/*-----------------------------------------------------------------------------------

    Template Name: Advanced App Landing Page Template
    Author: UIdeck
    Version: 1.0

-----------------------------------------------------------------------------------

    CSS INDEX
    ===================

    01. Theme default CSS
	02. Header
    03. Hero
	04. Footer

-----------------------------------------------------------------------------------*/
/*===========================
      01.COMMON css 
===========================*/
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap");
body {
  font-family: "Poppins", sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #677284;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  text-decoration: none;
}

i,
span,
a {
  display: inline-block;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: #3A424E;
  margin: 0px;
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

ul, ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #677284;
  margin: 0px;
}

.bg_cover {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

/*===== All Button Style =====*/
.main-btn {
  display: inline-block;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 0;
  padding: 0 25px;
  font-size: 16px;
  height: 55px;
  line-height: 55px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  z-index: 5;
  -webkit-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
  background-color: #3698EE;
}

@media (max-width: 767px) {
  .main-btn {
    padding: 0 15px;
    height: 45px;
    line-height: 45px;
    font-size: 14px;
  }
}

.main-btn:hover {
  background-color: rgba(54, 152, 238, 0.8);
  color: #fff;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.main-btn.main-btn-2 {
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
  line-height: 53px;
}

@media (max-width: 767px) {
  .main-btn.main-btn-2 {
    line-height: 41px;
  }
}

.main-btn.main-btn-2:hover {
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/*===== All Section Title Style =====*/
.section_title .title {
  font-size: 44px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .section_title .title {
    font-size: 32px;
  }
}

.section_title p {
  margin-top: 25px;
}

/*===== All Slick Slide Outline Style =====*/
.slick-slide {
  outline: 0;
}

/*===== All Preloader Style =====*/
.preloader {
  /* Body Overlay */
  position: fixed;
  top: 0;
  left: 0;
  display: table;
  height: 100%;
  width: 100%;
  /* Change Background Color */
  background: #fff;
  z-index: 99999;
}

.preloader .loader {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.preloader .loader .ytp-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  margin-left: -32px;
  z-index: 18;
  pointer-events: none;
}

.preloader .loader .ytp-spinner .ytp-spinner-container {
  pointer-events: none;
  position: absolute;
  width: 100%;
  padding-bottom: 100%;
  top: 50%;
  left: 50%;
  margin-top: -50%;
  margin-left: -50%;
  -webkit-animation: ytp-spinner-linspin 1568.2353ms linear infinite;
  animation: ytp-spinner-linspin 1568.2353ms linear infinite;
}

.preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-left {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  right: 50%;
}

.preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  left: 50%;
}

.preloader .loader .ytp-spinner-circle {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  width: 200%;
  height: 100%;
  border-style: solid;
  /* Spinner Color */
  border-color: #3698EE #3698EE #F7F8F9;
  border-radius: 50%;
  border-width: 6px;
}

.preloader .loader .ytp-spinner-left .ytp-spinner-circle {
  left: 0;
  right: -100%;
  border-right-color: #F7F8F9;
  -webkit-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.preloader .loader .ytp-spinner-right .ytp-spinner-circle {
  left: -100%;
  right: 0;
  border-left-color: #F7F8F9;
  -webkit-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

/* Preloader Animations */
@-webkit-keyframes ytp-spinner-linspin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes ytp-spinner-linspin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes ytp-spinner-easespin {
  12.5% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  25% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  37.5% {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
  50% {
    -webkit-transform: rotate(540deg);
    transform: rotate(540deg);
  }
  62.5% {
    -webkit-transform: rotate(675deg);
    transform: rotate(675deg);
  }
  75% {
    -webkit-transform: rotate(810deg);
    transform: rotate(810deg);
  }
  87.5% {
    -webkit-transform: rotate(945deg);
    transform: rotate(945deg);
  }
  to {
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
  }
}

@keyframes ytp-spinner-easespin {
  12.5% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  25% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  37.5% {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
  50% {
    -webkit-transform: rotate(540deg);
    transform: rotate(540deg);
  }
  62.5% {
    -webkit-transform: rotate(675deg);
    transform: rotate(675deg);
  }
  75% {
    -webkit-transform: rotate(810deg);
    transform: rotate(810deg);
  }
  87.5% {
    -webkit-transform: rotate(945deg);
    transform: rotate(945deg);
  }
  to {
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
  }
}

@-webkit-keyframes ytp-spinner-left-spin {
  0% {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
  }
  50% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
  }
}

@keyframes ytp-spinner-left-spin {
  0% {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
  }
  50% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
  }
}

@-webkit-keyframes ytp-right-spin {
  0% {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  to {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }
}

@keyframes ytp-right-spin {
  0% {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  to {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }
}

/*===========================
        02.HEADER css 
===========================*/
/*===== NAVBAR =====*/
.header_navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.sticky {
  position: fixed;
  z-index: 999;
  background-color: #fff;
  -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.sticky .navbar {
  padding: 10px 0;
}

.navbar {
  padding: 25px 0;
  border-radius: 5px;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.navbar-brand {
  padding: 0;
}

.navbar-toggler {
  padding: 0;
}

.navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #fff;
  display: block;
  margin: 5px 0;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.navbar-toggler.active .toggler-icon:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 7px;
}

.navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-toggler.active .toggler-icon:nth-of-type(3) {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  top: -7px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9;
    -webkit-box-shadow: 0px 15px 20px 0px rgba(34, 34, 34, 0.1);
    box-shadow: 0px 15px 20px 0px rgba(34, 34, 34, 0.1);
    padding: 5px 12px;
  }
}

@media (max-width: 767px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9;
    -webkit-box-shadow: 0px 15px 20px 0px rgba(34, 34, 34, 0.1);
    box-shadow: 0px 15px 20px 0px rgba(34, 34, 34, 0.1);
    padding: 5px 12px;
  }
}

.navbar-nav .nav-item {
  margin-left: 20px;
  position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-item {
    margin: 0;
  }
}

@media (max-width: 767px) {
  .navbar-nav .nav-item {
    margin: 0;
  }
}

.navbar-nav .nav-item a {
  font-size: 16px;
  color: #fff;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  padding: 4px 10px;
  position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-item a {
    color: #3A424E;
  }
}

@media (max-width: 767px) {
  .navbar-nav .nav-item a {
    color: #3A424E;
  }
}

.navbar-nav .nav-item a::before {
  position: absolute;
  content: '';
  width: 0;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  left: 110%;
  left: 0;
  bottom: 0;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-transform: skewX(13deg);
          transform: skewX(13deg);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-item a::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-nav .nav-item a::before {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-item a {
    display: block;
    padding: 4px 0;
  }
}

@media (max-width: 767px) {
  .navbar-nav .nav-item a {
    display: block;
    padding: 4px 0;
  }
}

.navbar-nav .nav-item.active > a::before, .navbar-nav .nav-item:hover > a::before {
  width: 100%;
}

.navbar-nav .nav-item:hover .sub-menu {
  top: 100%;
  opacity: 1;
  visibility: visible;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-item:hover .sub-menu {
    top: 0;
  }
}

@media (max-width: 767px) {
  .navbar-nav .nav-item:hover .sub-menu {
    top: 0;
  }
}

.navbar-nav .nav-item .sub-menu {
  width: 200px;
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 110%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-item .sub-menu {
    position: relative;
    width: 100%;
    top: 0;
    display: none;
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 767px) {
  .navbar-nav .nav-item .sub-menu {
    position: relative;
    width: 100%;
    top: 0;
    display: none;
    opacity: 1;
    visibility: visible;
  }
}

.navbar-nav .nav-item .sub-menu li {
  display: block;
}

.navbar-nav .nav-item .sub-menu li a {
  display: block;
  padding: 8px 20px;
  color: #222;
}

.navbar-nav .nav-item .sub-menu li a.active, .navbar-nav .nav-item .sub-menu li a:hover {
  padding-left: 25px;
  color: #3698EE;
}

.navbar-nav .sub-nav-toggler {
  display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .sub-nav-toggler {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background: none;
    color: #222;
    font-size: 18px;
    border: 0;
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 767px) {
  .navbar-nav .sub-nav-toggler {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background: none;
    color: #222;
    font-size: 18px;
    border: 0;
    width: 30px;
    height: 30px;
  }
}

.navbar-nav .sub-nav-toggler span {
  width: 8px;
  height: 8px;
  border-left: 1px solid #222;
  border-bottom: 1px solid #222;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: relative;
  top: -5px;
}

.sticky .navbar-toggler .toggler-icon {
  background-color: #3A424E;
}

.sticky .navbar-nav .nav-item a {
  color: #3A424E;
}

.sticky .navbar-nav .nav-item a::before {
  background-color: rgba(54, 152, 238, 0.1);
}

/*===== HEADER HERO =====*/
.header_hero {
  position: relative;
  z-index: 5;
  background-position: bottom center;
  padding-top: 70px;
  height: 800px;
}

@media only screen and (min-width: 1400px) {
  .header_hero {
    height: 900px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header_hero {
    height: 700px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header_hero {
    height: auto;
  }
}

@media (max-width: 767px) {
  .header_hero {
    height: auto;
  }
}

.header_hero::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 1200px;
  background-image: url(../images/header_shape.svg);
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

.shape {
  position: absolute;
}

.shape.shape-1 {
  top: 0;
  left: 0;
}

@media (max-width: 767px) {
  .shape.shape-1 {
    left: 0;
  }
}

.shape.shape-2 {
  bottom: -200px;
  left: calc((100% - 1700px) / 2);
}

.shape.shape-3 {
  top: 0;
  right: 0;
}

.header_image {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: 9;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header_image {
    position: relative;
    width: 720px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 50px;
  }
}

@media (max-width: 767px) {
  .header_image {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 50px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header_image {
    width: 540px;
  }
}

.header_image .image {
  position: relative;
  padding-bottom: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header_image .image {
    top: 50px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header_image .image {
    top: 50px;
  }
}

.header_image .image .dots {
  position: absolute;
  right: 10%;
  bottom: 0px;
  z-index: -1;
  -webkit-animation: dots 6s ease-out infinite;
  animation: dots 6s ease-out infinite;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header_image .image .dots {
    width: 125px;
  }
}

@media (max-width: 767px) {
  .header_image .image .dots {
    width: 100px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header_image .image .dots {
    width: 130px;
  }
}

@keyframes dots {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes dots {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header_hero_content {
    padding-top: 50px;
  }
}

@media (max-width: 767px) {
  .header_hero_content {
    padding-top: 50px;
  }
}

.header_hero_content .header_title {
  font-size: 54px;
  font-weight: 700;
  color: #fff;
  margin-top: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header_hero_content .header_title {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .header_hero_content .header_title {
    font-size: 30px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header_hero_content .header_title {
    font-size: 38px;
  }
}

.header_hero_content .header_title span {
  color: #3698EE;
}

.header_hero_content p {
  margin-top: 35px;
  color: #fff;
}

.header_hero_content ul {
  padding-top: 20px;
}

.header_hero_content ul li {
  display: inline-block;
  margin-top: 15px;
}

.header_hero_content ul li + li {
  margin-left: 13px;
}

@media (max-width: 767px) {
  .header_hero_content ul li + li {
    margin-left: 8px;
  }
}

.header_hero_image img {
  width: 100%;
}

/*===========================
      03.FEATURES css 
===========================*/
.features_area {
  position: relative;
  z-index: 5;
}

.single_features {
  background-color: #fff;
  padding: 60px 25px;
  border-radius: 10px;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-box-shadow: 0px 3px 35px 0px rgba(158, 158, 158, 0.1);
  box-shadow: 0px 3px 35px 0px rgba(158, 158, 158, 0.1);
}

.single_features:hover {
  -webkit-box-shadow: 0px 3px 35px 0px rgba(158, 158, 158, 0.2);
  box-shadow: 0px 3px 35px 0px rgba(158, 158, 158, 0.2);
}

.single_features:hover .features_icon i {
  border-radius: 50%;
}

.single_features .features_icon i {
  width: 78px;
  height: 78px;
  line-height: 78px;
  text-align: center;
  color: #fff;
  font-size: 40px;
  border-radius: 10px;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.single_features .features_content {
  margin-top: 25px;
}

.single_features .features_content .features_title {
  font-size: 24px;
  font-weight: 600;
  color: #3A424E;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.single_features .features_content p {
  margin-top: 15px;
}

.single_features.features_1 .features_icon i {
  background-color: #F85146;
}

.single_features.features_2 .features_icon i {
  background-color: #3698EE;
}

.single_features.features_3 .features_icon i {
  background-color: #581CCB;
}

/*===========================
       04.ABOUT css 
===========================*/
.about_image {
  position: relative;
  padding-bottom: 30px;
}

.about_image .dots {
  position: absolute;
  bottom: 0;
  right: 20%;
  z-index: -1;
  -webkit-animation: dots_2 6s ease-out infinite;
  animation: dots_2 6s ease-out infinite;
}

@keyframes dots_2 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes dots_2 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.about_content .main-btn {
  margin-top: 40px;
  padding: 0 35px;
}


/*===========================
       09.PRICING css 
===========================*/
.single_pricing {
  -webkit-box-shadow: 0px 0px 35px 0px rgba(158, 158, 158, 0.1);
  box-shadow: 0px 0px 35px 0px rgba(158, 158, 158, 0.1);
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #fff;
  border-radius: 10px;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.single_pricing:hover {
  -webkit-box-shadow: 0px 0px 35px 0px rgba(158, 158, 158, 0.2);
  box-shadow: 0px 0px 35px 0px rgba(158, 158, 158, 0.2);
}

.single_pricing .pricing_top_bar .pricing_title {
  font-size: 24px;
  font-weight: 600;
  border-radius: 50%;
}

.single_pricing .pricing_top_bar i {
  width: 85px;
  height: 85px;
  line-height: 85px;
  text-align: center;
  background-color: #F7F8F9;
  font-size: 40px;
  border-radius: 50%;
  margin-top: 30px;
}

.single_pricing .pricing_top_bar .price {
  display: block;
  font-size: 44px;
  font-weight: 700;
  margin-top: 20px;
  padding-bottom: 20px;
}

.single_pricing .pricing_list {
  border-top: 1px solid #E8E8E8;
  padding-top: 10px;
}

.single_pricing .pricing_list ul li {
  margin-top: 15px;
  font-size: 16px;
  color: #677284;
}

.single_pricing .pricing_btn {
  margin-top: 25px;
}

.single_pricing .pricing_btn .main-btn {
  border-color: #677284;
  color: #677284;
}

.single_pricing .pricing_btn .main-btn:hover {
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.single_pricing.pricing_color_1 .pricing_top_bar i {
  color: #F85146;
}

.single_pricing.pricing_color_1 .pricing_top_bar .price {
  color: #F85146;
}

.single_pricing.pricing_color_2 .pricing_top_bar i {
  color: #3698EE;
}

.single_pricing.pricing_color_2 .pricing_top_bar .price {
  color: #3698EE;
}

.single_pricing.pricing_color_3 .pricing_top_bar i {
  color: #581CCB;
}

.single_pricing.pricing_color_3 .pricing_top_bar .price {
  color: #581CCB;
}

.single_pricing.pricing_active .pricing_btn {
  margin-top: 25px;
}

.single_pricing.pricing_active .pricing_btn .main-btn {
  background-color: #3698EE;
  color: #fff;
  border-color: #3698EE;
}

.single_pricing.pricing_active .pricing_btn .main-btn:hover {
  background-color: rgba(54, 152, 238, 0.7);
}

/*===========================
    10.DOWNLOAD APP css 
===========================*/
.download_app_area {
  position: relative;
}

.download_app_image {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: 9;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .download_app_image .image img {
    width: 480px;
  }
}

.download_app {
  background: -webkit-gradient(linear, left top, right top, from(#291584), to(#9133e2));
  background: linear-gradient(to right, #291584 0%, #9133e2 100%);
  padding: 115px 60px 120px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  z-index: 8;
  margin-top: 111px;
}

@media (max-width: 767px) {
  .download_app {
    padding: 115px 30px 120px;
  }
}

.download_shape {
  position: absolute;
  top: 50%;
  left: -80px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}

.download_shape_2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0.21;
}

.download_app_content {
  max-width: 470px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .download_app_content {
    max-width: 410px;
  }
}

.download_app_content .download_title {
  color: #fff;
  font-size: 44px;
  font-weight: 700;
  nt-weight: 700;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .download_app_content .download_title {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .download_app_content .download_title {
    font-size: 30px;
  }
}

.download_app_content p {
  color: #fff;
  margin-top: 15px;
}

.download_app_content ul {
  padding-top: 30px;
}

.download_app_content ul li {
  display: inline-block;
  margin-top: 10px;
}

.download_app_content ul li + li {
  margin-left: 30px;
}

@media (max-width: 767px) {
  .download_app_content ul li + li {
    margin-left: 0;
  }
}

.download_app_content ul li a {
  background-color: #fff;
  padding: 8px 20px;
  border-radius: 5px;
}

@media (max-width: 767px) {
  .download_app_content ul li a {
    padding: 4px 10px 3px;
  }
}

.download_app_content ul li a .icon i {
  font-size: 25px;
  color: #3698EE;
}

@media (max-width: 767px) {
  .download_app_content ul li a .icon i {
    font-size: 18px;
  }
}

.download_app_content ul li a .content {
  padding-left: 15px;
}

@media (max-width: 767px) {
  .download_app_content ul li a .content {
    padding-left: 10px;
  }
}

.download_app_content ul li a .content .title {
  font-size: 18px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .download_app_content ul li a .content .title {
    font-size: 16px;
  }
}

.download_app_content ul li a .content p {
  margin-top: 0;
  color: #677284;
  font-size: 12px;
}

@media (max-width: 767px) {
  .download_app_content ul li a .content p {
    font-size: 11px;
  }
}

/*===========================
        11.BLOG css 
===========================*/
.blog_area {
  position: relative;
  z-index: 99;
}

.single_blog {
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 79px 0px rgba(158, 158, 158, 0.16);
  box-shadow: 0px 0px 79px 0px rgba(158, 158, 158, 0.16);
  overflow: hidden;
  border-radius: 10px;
}

.single_blog .blog_image img {
  width: 100%;
}

.single_blog .blog_content {
  padding: 15px 20px 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .single_blog .blog_content .blog_meta {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.single_blog .blog_content .blog_meta .meta_date span {
  font-size: 16px;
  color: #677284;
}

.single_blog .blog_content .blog_meta .meta_like ul li {
  display: inline-block;
}

.single_blog .blog_content .blog_meta .meta_like ul li + li {
  margin-left: 15px;
}

.single_blog .blog_content .blog_meta .meta_like ul li a {
  font-size: 16px;
  color: #677284;
}

.single_blog .blog_content .blog_meta .meta_like ul li a i {
  margin-left: 5px;
}

.single_blog .blog_content .blog_title a {
  font-size: 24px;
  font-weight: 600;
  color: #3A424E;
  margin-top: 15px;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.single_blog .blog_content .blog_title a:hover {
  color: #3698EE;
}

.single_blog .blog_content .main-btn {
  margin-top: 25px;
  height: 40px;
  line-height: 36px;
  border: 2px solid;
  padding: 0 15px;
  color: #3698EE;
  border-color: #3698EE;
  background: #fff;
}

.single_blog .blog_content .main-btn:hover {
  background-color: #3698EE;
  color: #fff;
}


/*===== BACK TO TOP =====*/
.back-to-top {
  font-size: 20px;
  color: #fff;
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 5px;
  background-color: #3698EE;
  text-align: center;
  z-index: 99;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  display: none;
}

.back-to-top:hover {
  color: #fff;
  background-color: #3698EE;
}
/*# sourceMappingURL=style.css.map */



 






/*======================= 
    Call Box Styling
  =======================
*/

.navbar-nav .call-box a {
    background: linear-gradient(135deg, #9b63b3, #6f6abeff);
    color: #fff !important;
    font-weight: 600;
    border-radius: 30px;
    padding: 0 25px;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    column-gap: 6px;
    box-shadow: 0 0 0px rgba(157, 14, 180, 0.4);
    transition: all 0.35s ease;
}

/* Hover Effect */
.navbar-nav .call-box a:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 6px 15px rgba(157, 14, 180, 0.4);
}

/* Icon Animation */
.navbar-nav .call-box a i {
    animation: phoneShake 1.4s infinite ease-in-out;
}

@keyframes phoneShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(8deg); }
    50% { transform: rotate(-8deg); }
    75% { transform: rotate(5deg); }
}

/* Mobile View */
@media (max-width: 992px) {
    .navbar-nav .call-box a {
        width: 100%;
        text-align: center;
        border-radius: 10px;
        margin-top: 10px;
        background: linear-gradient(135deg, #bb0bd2, #6e00ad);
    }
}


 

/* 
---------------------------------------------
Whatsapp Style
--------------------------------------------- 
*/

.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  color: white;
}

.whatsapp-button:active {
  transform: scale(0.95);
}


/*=====================
   Home Section 
  =====================
*/


/* Home | Hero Section */

.hero_area {
    padding-top: 150px; /* Space for the fixed navbar */
    padding-bottom: 50px;
    /* background-color: #fff; or transparent if body has color */
}

/* --- Left Box Styling --- */
.hero_content_box {    
    background: url('/images/home-section.png');
    background-size: cover;
    background-position: center;   
    background-repeat: no-repeat;
    border-radius: 40px;
    padding: 60px 40px;
    position: relative;
    overflow: hidden; 
    
    /* --- NEW SIZING CODE --- */
    height: 100%;           /* Fills the height of the neighbor column */
    min-height: 600px;      /* Ensures it never gets too small */
    display: flex;          /* Enables flexbox */
    flex-direction: column; /* Stacks content vertically */
    justify-content: center;/* Centers content vertically */

}

.hero_badge {
    display: inline-block;
    color: #7052fb;
    border: 1px solid #7052fb;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 25px;
    background: #fff;
    width: fit-content;
}

.hero_title {
    font-size: 60px;
    font-weight: 800;
    color: #000;
    line-height: 1.1;
    margin-bottom: 30px;
}

.hero_text_wrapper {
    margin-bottom: 40px;
}

.hero_text_wrapper .line {
    height: 2px;
    width: 40px;
    background-color: #000;
    margin-right: 15px;
    display: inline-block;
}

.hero_text_wrapper p {
    font-size: 18px;
    color: #333;
    font-weight: 500;
    max-width: 400px;
    margin: 0;
}

/* --- Buttons --- */

.main-btn {
    background-image: linear-gradient(to right, #9b63b3ff 0%, #6f6abeff  51%, #9d84fd  100%);
    /* color: #fff; */
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.main-btn i { margin-left: 8px; }

.main-btn:hover {
    background-position: right center;
    color: #fff;
    border-color: #7052fb;
}

.secondary-btn {
    background: #fff;
    color: #000;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 20px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.secondary-btn i { margin-left: 8px; transform: rotate(-45deg); transition: 0.3s; }
.secondary-btn:hover {  
        background-image: linear-gradient(to right, #9b63b3ff 0%, #6f6abeff  51%, #9d84fd  100%);
        color: #fff;

}
.secondary-btn:hover i { 
    transform: rotate(0deg); 

}


/* --- NEW: Video Review Card Styling --- */
.video_review_card {
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 40px rgba(112, 82, 251, 0.1);
    max-width: 380px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video_review_card:hover {
    transform: translateY(-5px);
}

.video_thumbnail {
    position: relative;
    width: 120px;
    height: 70px;
    border-radius: 12px;
    overflow: hidden;
    margin-right: 15px;
}

.video_thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play_overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 30px; height: 30px;
    background: rgb(119 111 155 / 80%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 12px;
}

.review_content h5 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    color: #000;
}

.review_content p {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.2;
}

.avatars {
    display: flex;
    margin-bottom: 5px;
}
.avatars img {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-right: -8px;
}



/* --- Right Box Styling (Image) --- */
.hero_image_box {
    background-size: cover;
    background-position: center top;
    border-radius: 40px;
    position: relative;
    width: 100%;
    
    /* --- NEW SIZING CODE --- */
    height: 100%;          
    min-height: 600px;  
}

/* --- Floating Cards Animation --- */
.floating_card {
    background: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    position: absolute;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    animation: float 4s ease-in-out infinite;
}

.floating_card .icon_circle {
    width: 30px;
    height: 30px;
    background: #f6f5ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    color: #7052fb;
}

.floating_card .text {
    font-weight: 700;
    color: #000;
    font-size: 14px;
}

/* Positions for the floating cards */
.card_1 {
    top: 40%;
    left: -20px;
    animation-delay: 0s;
}

.card_2 {
    bottom: 30px;
    right: 40px;
    animation-delay: 2s;
}

.card_3 {
    top: 60%;
    right: -20px;
    animation-delay: 1s;
}

/* Animation Keyframes */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* --- Responsive Media Queries --- */
@media (max-width: 991px) {
 
    .hero_title { font-size: 40px; }
    .hero_content_box { 
        padding: 40px 20px; 
        min-height: auto; /* On mobile, let content define height */
    }
    .hero_image_box { 
        height: 400px;    /* Fixed height for image on mobile */
        min-height: 400px;
        margin-top: 30px; 
    }
    .card_1 { left: 10px; }
    .card_3 { right: 10px; }

}

/* --- Scroll Down / Joiner Icon --- */

.scroll_connector {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    
    /* This centers the icon exactly on the bottom line of your boxes */
    bottom: -5px; /* Half of the icon height (70px) to create the 'joining' overlap */
    
    z-index: 10;
    
    /* Design of the White Circle */
    background: #fff;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.3s;
}

.scroll_connector:hover {
    transform: translateX(-50%) translateY(-5px);
}

.mouse {
    width: 26px;
    height: 42px;
    border: 2px solid #000;
    border-radius: 20px;
    position: relative;
}

.wheel {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #7052fb;
    border-radius: 50%;
    animation: scroll_anim 1.5s infinite;
}

@keyframes scroll_anim {
    0% { top: 8px; opacity: 1; height: 4px; }
    100% { top: 20px; opacity: 0; height: 8px; }
}

/* Mobile: Adjust position since columns stack */
@media (max-width: 991px) {
    .scroll_connector {
        width: 60px; height: 60px;
        bottom: -5px; /* Half of 60px */
    }
}



















/* Home | Services */

/*===========================
    NEW SPECIALTIES CARD CSS
===========================*/

.specialties_area {
    background-color: #f8f9fa;
    padding-top: 80px !important;
    padding-bottom: 50px !important;


}

.pt-120 { padding-top: 120px; }
.pb-120 { padding-bottom: 120px; }
.pb-60 { padding-bottom: 60px; }
.mt-60 { margin-top: 60px; }

/* The Card Container */
.health_card {
    background: #fff;
    border-radius: 16px;
    padding: 25px 20px;
    position: relative;
    border: 1px solid rgba(155, 99, 179, 0.1); /* Subtle Purple Border */
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: all 0.4s ease;
    margin-bottom: 30px;
    height: 100%;
}

.health_card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(111, 106, 190, 0.15); /* #6f6abeff shadow */
    border-color: #9d84fd;
}

/* Safe Badge (Top Right) */
.safe_badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #e8f7ff;
    color: #007bff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 30px;
    text-transform: uppercase;
}

.safe_badge i {
    margin-right: 3px;
}

/* Icon Area */
.card_icon {
    width: 80px;
    height: 80px;
    background: rgba(157, 132, 253, 0.1); /* Light wash of #9d84fd */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    transition: 0.4s;
}

.health_card:hover .card_icon {
    background: #9d84fd; /* Icon background turns purple on hover */
}

/* Card Title */
.card_title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

/* Home Collection Tag */
.tag_badge {
    text-align: center;
    background: #fdf2f8; /* Very light pink background */
    color: #9b63b3; /* Purple Text */
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 4px;
    width: 100%;
    margin-bottom: 15px;
}

/* Bullet Points */
.card_features {
    padding: 0;
    list-style: none;
    margin-bottom: 20px;
    text-align: left;
    padding-left: 10px;
}

.card_features li {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.card_features li i {
    color: #6f6abeff; /* Checkmark color */
    margin-right: 8px;
}

/* Pricing Section */
.price_box {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 10px;
}

.current_price {
    font-size: 24px;
    font-weight: 800;
    color: #333;
    margin: 0;
}

.old_price {
    font-size: 14px;
    text-decoration: line-through;
    color: #999;
}

.discount {
    font-size: 12px;
    color: #28a745;
    font-weight: 700;
}

/* Buttons Container */
.card_buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* View Details Button (Outline) */
.btn_outline {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    border: 1px solid #9b63b3;
    color: #9b63b3;
    border-radius: 8px; /* Rounded Rect like modern apps */
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.btn_outline:hover {
    background: #f5eff9;
    color: #9b63b3;
    text-decoration: none;
}

/* Book Now Button (Solid Gradient) */
.btn_fill {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    background: linear-gradient(90deg, #9b63b3 0%, #6f6abeff 100%);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(111, 106, 190, 0.3);
}

.btn_fill:hover {
    background: linear-gradient(90deg, #6f6abeff 0%, #9b63b3 100%);
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}


/* .mb-50 { margin-bottom: 50px; } */

/* 1. The Capsule Badge (Small pill at top) */
.badge_capsule {
    display: inline-block;
    background: rgba(155, 99, 179, 0.1); /* Low opacity purple */
    color: #9b63b3;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 15px;
}

/* 2. The Main Title */
.title_modern {
    font-size: 42px;
    font-weight: 800;
    color: #2c2c2c;
    line-height: 1.2;
    margin-bottom: 15px;
}

/* 3. The Description Text */
.text_modern {
    font-size: 16px;
    color: #666;
    max-width: 500px;
    border-left: 3px solid #6f6abeff; /* Purple accent line on left */
    padding-left: 15px;
    margin-top: 10px;
}

/* 4. The 'See All' Link on the right */
.simple_link_btn {
    font-size: 16px;
    font-weight: 600;
    color: #6f6abeff;
    text-decoration: none;
    transition: 0.3s ease;
    border-bottom: 2px solid rgba(111, 106, 190, 0.2);
    padding-bottom: 5px;
}

.simple_link_btn i {
    margin-left: 8px;
    transition: 0.3s ease;
}

.simple_link_btn:hover {
    color: #9b63b3;
    border-color: #9b63b3;
    text-decoration: none;
}

.simple_link_btn:hover i {
    transform: translateX(5px); /* Arrow moves right on hover */
}

/* Mobile Responsiveness for Title */
@media (max-width: 768px) {
    .title_modern {
        font-size: 32px;
    }
    .header_action {
        text-align: left !important;
        margin-top: 20px;
    }
}

.card-main{

   margin-bottom: 20px;
}


/*===========================
    LIFESTYLE SOLUTIONS CSS
===========================*/


 

.lifestyle_area {
    background-color: #f3f4f7; 
    padding-top: 80px !important;
    padding-bottom: 50px !important;
}

/* Card Container */
.problem_card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    overflow: hidden; 
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
    margin-bottom: 30px;
    border: 1px solid rgba(0,0,0,0.02);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Hover Effect: Lift up + Shadow */
.problem_card:hover {
    transform: translateY(-10px); /* Lifts higher */
    box-shadow: 0 20px 40px rgba(111, 106, 190, 0.15);
}

/* The Gradient Bar at the top */
.card_top_border {
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, #9b63b3 0%, #6f6abeff 100%);
}

/* Header: Icon + Title */
.card_header {
    padding: 25px 25px 10px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Icon Animation Wrapper */
.icon_bg {
    width: 50px;
    height: 50px;
    background: #f8f5ff; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s ease;
}

.icon_bg img {
    width: 28px;
    transition: 0.5s ease;
}

/* Animation on Hover: Icon Scale & Rotate */
.problem_card:hover .icon_bg {
    background: #9b63b3; /* Icon bg turns purple */
    transform: rotate(360deg); /* Full spin */
}

.problem_card:hover .icon_bg img {
    filter: brightness(0) invert(1); /* Turns icon white */
}

.p_title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

/* Content Body */
.card_body_content {
    padding: 15px 25px;
    flex-grow: 1; 
}

.symptom_label {
    font-size: 13px;
    text-transform: uppercase;
    color: #9b63b3; 
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* The List of Symptoms */
.symptom_list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.symptom_list li {
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
    display: flex;
    align-items: start;
    transition: 0.3s;
}

/* Small hover effect on list items */
.problem_card:hover .symptom_list li {
    transform: translateX(5px); /* Slide text slightly right */
}

.symptom_list li i {
    color: #ffaa00; 
    margin-right: 8px;
    font-size: 14px;
    margin-top: 3px; 
}

/* Divider Line */
.solution_divider {
    height: 1px;
    background: #eee;
    margin: 15px 0;
}

.solution_text {
    font-size: 13px;
    color: #777;
    line-height: 1.5;
}

.solution_text strong {
    color: #6f6abeff; 
}

/* Bottom Button */
.check_btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px 0;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    color: #6f6abeff;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.check_btn:hover {
    background: #6f6abeff;
    color: #fff;
    text-decoration: none;
}

.check_btn i {
    margin-left: 5px;
    transition: 0.3s;
}

.check_btn:hover i {
    margin-left: 10px; /* Arrow moves right */
}

/* Ensure 'See All' Link in Header is styled */
.simple_link_btn {
    font-size: 16px;
    font-weight: 600;
    color: #6f6abeff;
    text-decoration: none;
    transition: 0.3s ease;
    border-bottom: 2px solid rgba(111, 106, 190, 0.2);
    padding-bottom: 5px;
}
.simple_link_btn:hover {
    color: #9b63b3;
    border-color: #9b63b3;
    text-decoration: none;
}




/* --- Promo Banner Section --- */
.promo_banner_area {
    /* Using your brand gradient */
    background: linear-gradient(90deg, #9b63b3 0%, #6f6abeff 100%);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 10px 30px rgba(111, 106, 190, 0.2);
    /* Spacing to separate from previous section */
    margin-top: 50px; 
    margin-bottom: 50px;
    border-radius: 0; /* Or 20px if you want a floating rounded banner */
}

/* Background Decorative Shapes (Optional) */
.banner_shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    z-index: 0;
}
.shape_1 { width: 300px; height: 300px; top: -100px; left: -100px; }
.shape_2 { width: 200px; height: 200px; bottom: -50px; right: 10%; }

/* --- 1. The Calendar Date Box --- */
.date_highlight_box {
    background: #fff;
    width: 200px;
    border-radius: 15px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    margin: 0 auto; /* Centers on mobile */
    transform: rotate(-3deg); /* Fun jaunty angle */
    transition: transform 0.3s ease;
}

.date_highlight_box:hover {
    transform: rotate(0deg) scale(1.05);
}

.calendar_top {
    height: 15px;
    background: #ffaa00; /* Orange accent from your checkmarks */
    width: 100%;
}

.calendar_body {
    padding: 15px 10px 20px 10px;
}

.month_text {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #9b63b3;
    margin-bottom: 5px;
}

.date_number {
    font-size: 70px;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    background: -webkit-linear-gradient(#9b63b3, #6f6abeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.day_text {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-top: 5px;
}

/* --- 2. Middle Content --- */
.banner_title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}

.banner_desc {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 20px;
}

.benefit_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit_list li {
    font-size: 15px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.benefit_list li i {
    margin-right: 12px;
    color: #ffaa00; /* Matching your existing orange icons */
    font-size: 18px;
    background: rgba(255,255,255,0.2);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* --- 3. CTA Button --- */
.banner_btn {
    display: inline-block;
    background: #fff;
    color: #6f6abeff;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.banner_btn:hover {
    /* background: ; */
        background: linear-gradient(90deg, #9b63b3 100%, #6f6abeff 0%);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.banner_btn i {
    margin-left: 8px;
    transition: 0.3s;
}

.banner_btn:hover i {
    margin-left: 12px;
}

/* --- Responsive Tweaks --- */
@media (max-width: 991px) {
    .date_highlight_box {
        margin-bottom: 30px;
        transform: rotate(0deg);
        width: 100%;
        max-width: 250px;
    }
    
    .promo_banner_area {
        text-align: center;
    }

    .benefit_list li {
        justify-content: center; /* Center list on mobile */
    }
    
    .text-md-end {
        text-align: center !important;
    }
}




/* ========================
    Booking Section 
  =========================
--- */

.booking_area {
    padding: 80px 0;
    background-color: #f3f4f7;
}

.brand-text { color: #9b63b3; }

.booking_card {
    background: #fff;
    border-radius: 20px; /* Overall card radius */
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
}

.booking_form_wrapper {
    padding: 50px;
}

/* --- THE NEW INPUT STYLING --- */

/* 1. Create a container for the input group */
.custom-input-group {
    border: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    border-radius: 12px; /* Radius for the whole group */
    transition: all 0.3s ease;
    overflow: hidden; /* Ensures child elements don't spill out of radius */
}

/* 2. Remove default borders from children so they merge */
.custom-input-group .input-group-text {
    background: transparent;
    border: none;
    color: #9b63b3; /* Icon color */
    padding-left: 15px;
    padding-right: 10px;
}

.custom-input-group .form-control,
.custom-input-group .form-select {
    border: none;
    background: transparent;
    box-shadow: none; /* Remove default blue glow */
    height: 50px; /* Taller touch target */
    font-size: 15px;
    color: #333;
    padding-left: 0; /* Text sits closer to icon */
}

/* 3. The "Focus-Within" Magic */
/* When any input inside is clicked, the Wrapper glows */
.custom-input-group:focus-within {
    background-color: #fff;
    border-color: #9b63b3; /* Brand color border */
    box-shadow: 0 4px 15px rgba(155, 99, 179, 0.15); /* Soft purple shadow */
}

/* Labels */
.form-label {
    margin-bottom: 8px;
    color: #555;
    letter-spacing: 0.3px;
}

/* Payment Section Styling */
.border-dashed {
    border: 2px dashed #e0e0e0;
    background: #fafbff;
}

.btn-outline-custom {
    color: #6f6abeff;
    border-color: #6f6abeff;
}

.btn-outline-custom:hover {
    background-color: #6f6abeff;
    color: #fff;
}

/* Submit Button Gradient */
.btn_gradient {
    background: linear-gradient(90deg, #9b63b3 0%, #6f6abeff 100%);
    border: none;
    transition: all 0.3s;
}

.btn_gradient:hover {
    background: linear-gradient(90deg, #8a52a2 0%, #5e59aa 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(111, 106, 190, 0.3) !important;
}

/* Right Side Styling */
.booking_image_side {
    position: relative;
    height: 100%;
    min-height: 600px; /* Ensures height matches form on large screens */
    background: #333;
}

.side_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6; /* Darken image slightly */
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
}

.overlay_content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Gradient Overlay */
    background: linear-gradient(135deg, rgba(155, 99, 179, 0.85) 0%, rgba(111, 106, 190, 0.9) 100%);
}

.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 350px;
}

.icon_box {
    width: 70px; height: 70px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

/* Responsive */
@media (max-width: 991px) {
    .booking_form_wrapper { padding: 30px 20px; }
    .booking_image_side { min-height: 300px; }
}



/* ====================
    FAQ Section Styling 
  ======================
*/

.faq_area {
    padding: 80px 0;
    /* background-color: #f3f4f7; */

}

/* 1. Accordion Item ( The Card ) */
.custom_accordion .accordion-item {
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Hover effect for the card */
.custom_accordion .accordion-item:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
}

/* 2. The Button (Question) Styling */
.custom_accordion .accordion-button {
    background-color: #fff;
    color: #333;
    font-size: 17px;
    padding: 20px 25px;
    border: none;
    box-shadow: none; /* Removes default Bootstrap blue glow */
}

/* Remove the default Bootstrap arrow icon because we will make a better one */
.custom_accordion .accordion-button::after {
    display: none; 
}

/* Create Custom Plus (+) Icon */
.custom_accordion .accordion-button::before {
    content: '\f067'; /* FontAwesome Code for Plus */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 25px;
    font-size: 14px;
    width: 30px;
    height: 30px;
    background: #f3f4f7;
    color: #9b63b3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* 3. ACTIVE STATE (When clicked/open) */
.custom_accordion .accordion-button:not(.collapsed) {
    color: #9b63b3; /* Text turns purple */
    /* background-color: #fcfaff; Very light purple tint bg */
    box-shadow: none;
    
    /* Adds the Gradient Border on the Left */
    border-left: 5px solid #9b63b3; 
}

/* Transform the Plus (+) to Minus (-) */
.custom_accordion .accordion-button:not(.collapsed)::before {
    content: '\f068'; /* FontAwesome Code for Minus */
    background: linear-gradient(90deg, #9b63b3 0%, #6f6abeff 100%);
    color: #fff;
    transform: rotate(180deg); /* Nice spin animation */
}

/* 4. The Body (Answer) Styling */
.custom_accordion .accordion-body {
    padding: 0 25px 25px 25px;
    line-height: 1.6;
    background-color: #fcfaff; /* Matches active header */
}

/* --- Left Side Image Styling --- */
.faq_image_wrapper img {
    max-width: 90%;
}

.help_card {
    position: absolute;
    bottom: 20px;
    right: 0;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    text-align: left;
    max-width: 200px;
    z-index: 3;
    border: 1px solid #eee;
    animation: float 4s ease-in-out infinite;
}

.help_card .icon_circle {
    width: 40px; height: 40px;
    background: #f3f4f7;
    color: #6f6abeff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Mobile Tweak */
@media (max-width: 991px) {
    .help_card { right: 50%; transform: translateX(50%); bottom: -20px; }
}








/* ======================
     Split Banner Area 
  ======================= */

.split_banner_area {
    padding: 80px 0;
    background-color: #fff; /* or #f3f4f7 depending on where you place it */
}

/* The Main Card */
.split_card {
    background: #fff;
    border-radius: 25px; /* Large modern radius */
    overflow: hidden; /* Ensures image stays inside radius */
    border: 1px solid rgba(0,0,0,0.05);
    /* Soft shadow for depth */
    box-shadow: 0 20px 50px rgba(111, 106, 190, 0.15) !important; 
}

/* --- Left Side: Image --- */
.banner_image_wrapper {
    position: relative;
    min-height: 400px; /* Ensures height on mobile */
    overflow: hidden;
}

.banner_img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills space without stretching */
    transition: transform 0.6s ease;
}

/* Zoom effect on hover */
.split_card:hover .banner_img {
    transform: scale(1.05);
}

/* The Floating Badge on the Image */
.floating_date_badge {
    position: absolute;
    top: 30px;
    left: 30px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    padding: 15px 20px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    text-align: center;
    color: #9b63b3;
    border-left: 4px solid #9b63b3;
}

/* --- Right Side: Content --- */
.banner_content_wrapper {
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Badge Pill */
.badge_pill {
    background: rgba(155, 99, 179, 0.1);
    color: #9b63b3;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Typography */
.banner_heading {
    font-size: 36px;
    font-weight: 800;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.2;
}

.text_gradient {
    background: linear-gradient(90deg, #9b63b3 0%, #6f6abeff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.banner_text {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Feature List */
.feature_row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.f_icon {
    width: 45px;
    height: 45px;
    background: #f8f9fa;
    color: #6f6abeff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 15px;
    transition: 0.3s;
}

.split_card:hover .f_icon {
    background: #6f6abeff;
    color: #fff;
}


/* Responsive */
@media (max-width: 991px) {
    .banner_content_wrapper {
        padding: 40px 30px;
    }
    .banner_heading {
        font-size: 28px;
    }
}



/*=====================
      ABOUTE PAGE
  =====================
*/







  .vision_section {
        padding: 100px 0;
        background-color: #f3f4f7; /* Matching light grey background */
        position: relative;
        overflow: hidden;
    }

    /* Gradient Text Helper */
    .text_gradient {
        background: linear-gradient(90deg, #9b63b3 0%, #6f6abeff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

 
    /* Matches .badge_pill */
    .vision_badge {
        background: rgba(155, 99, 179, 0.1);
        color: #9b63b3;
        font-weight: 700;
        font-size: 13px;
        padding: 6px 14px;
        border-radius: 30px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .section_title {
        font-size: 42px; 
        font-weight: 800;
        color: #333;
        line-height: 1.2;
        margin-bottom: 25px;
    }

    .section_desc {
        color: #666;
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 30px;
    }

    /* Vision Points List */
    .vision_points {
        list-style: none;
        padding-top: 1rem;

    }
    .vision_points li {
        margin-bottom: 15px;
        font-weight: 600;
        color: #444;
        display: flex;
        align-items: center;
        font-size: 17px;
    }
    
    /* Icon styling matching your theme */
    .point_icon {
        width: 35px; height: 35px;
        background: #fff;
        color: #6f6abeff; /* Indigo */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        margin-right: 15px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        transition: 0.3s;
    }
    .vision_points li:hover .point_icon {
        background: #6f6abeff;
        color: #fff;
    }


    /* --- Vision Image Area --- */
    .vision_image_wrapper {
        position: relative;
        z-index: 2;
        padding: 20px;
    }
    .main_img {
        width: 100%;
        border-radius: 25px;
        box-shadow: 0 20px 50px rgba(111, 106, 190, 0.15); /* Purple shadow */
    }

    /* Floating Stat Card */
    .vision_stat_card {
        position: absolute;
        bottom: 50px;
        left: -10px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(5px);
        padding: 20px 30px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border-left: 5px solid #9b63b3; /* Purple Border */
        animation: floatY 4s ease-in-out infinite;
    }
    .vision_stat_card h3 {
        font-weight: 800;
        margin: 0;
        font-size: 32px;
    }
    .vision_stat_card p {
        margin: 0;
        color: #666;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
    }

    /* --- Core Values Section --- */
    
    .values_title {
        font-weight: 800;
        font-size: 32px;
        color: #333;
        position: relative;
        display: inline-block;
        padding-bottom: 15px;
    }
    /* Gradient Underline */
    .values_title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 4px;
        background: linear-gradient(90deg, #9b63b3 0%, #6f6abeff 100%);
        border-radius: 2px;
    }

    /* Value Cards */
    .value_card {
        background: #fff;
        padding: 40px 35px;
        border-radius: 25px;
        position: relative;
        overflow: hidden;
        transition: all 0.4s ease;
        border: 1px solid rgba(0,0,0,0.03);
        height: 100%;
        z-index: 2;
    }

    /* Hover State: Lift + Purple Shadow */
    .value_card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 50px rgba(111, 106, 190, 0.15);
    }

    /* Icon Box */
    .icon_box {
        width: 70px; height: 70px;
        line-height: 70px;
        text-align: center;
        background: rgba(111, 106, 190, 0.05); /* Very light indigo */
        color: #6f6abeff; /* Indigo icon */
        border-radius: 50%;
        font-size: 30px;
        margin-bottom: 25px;
        transition: all 0.4s ease;
    }

    .value_card:hover .icon_box {
        background: #9b63b3; /* Purple on hover */
        color: #fff;
        transform: rotate(360deg); /* Spin effect */
    }

    .value_card h4 {
        font-weight: 800;
        margin-bottom: 15px;
        font-size: 22px;
        color: #333;
    }

    .value_card p {
        color: #666;
        font-size: 15px;
        line-height: 1.6;
        margin: 0;
    }

    /* Background Number decoration */
    .bg_number {
        position: absolute;
        top: -10px;
        right: 15px;
        font-size: 100px;
        font-weight: 900;
        color: rgba(155, 99, 179, 0.05); /* Very subtle purple */
        z-index: -1;
        transition: all 0.4s ease;
    }
    .value_card:hover .bg_number {
        color: rgba(155, 99, 179, 0.1);
        transform: scale(1.1);
    }

    @keyframes floatY {
        0% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0); }
    }


/* ========================
About Page Technology
 */

    .tech_facilities_area {
        background-color: #fff;
        padding: 80px 0;
        position: relative;
        overflow: hidden;
    }

    /* --- HEADER STYLES --- */
    .badge_capsule {
        display: inline-block;
        background: rgba(155, 99, 179, 0.1);
        color: #9b63b3;
        font-weight: 700;
        font-size: 13px;
        padding: 6px 14px;
        border-radius: 30px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 15px;
    }

    .title_modern {
        font-size: 38px;
        font-weight: 800;
        color: #333;
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .text_modern {
        color: #666;
        font-size: 16px;
        line-height: 1.6;
        max-width: 600px;
    }

    /* --- LEFT SIDE: LAB IMAGE & HOTSPOTS --- */
    .lab_image_box {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        /* Shadow */
        box-shadow: 0 20px 50px rgba(111, 106, 190, 0.2);
    }

    .lab_main_img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.6s ease;
    }

    .lab_image_box:hover .lab_main_img {
        transform: scale(1.03);
    }

    /* Dark Overlay */
    .img_overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%);
        pointer-events: none;
    }

    /* Tech Badge (Bottom Left) */
    .tech_badge {
        position: absolute;
        bottom: 20px;
        left: 20px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        padding: 12px 20px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        border-left: 4px solid #6f6abeff;
    }
    .tech_badge i {
        font-size: 24px;
        color: #9b63b3;
        margin-right: 12px;
    }
    .tech_badge span {
        font-weight: 700;
        color: #333;
        font-size: 14px;
        line-height: 1.2;
    }
    .tech_badge small {
        color: #666;
        font-weight: 400;
    }

    /* --- HOTSPOTS ANIMATION --- */
    .hotspot_wrapper {
        position: absolute;
        cursor: pointer;
        z-index: 2;
    }
    
    .spot_1 { top: 40%; left: 30%; }
    .spot_2 { top: 60%; right: 25%; }

    .hotspot_dot {
        position: relative;
        width: 20px; height: 20px;
        display: flex; justify-content: center; align-items: center;
    }

    .dot {
        width: 12px; height: 12px; background-color: #fff;
        border-radius: 50%; z-index: 2; box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }

    .ping {
        position: absolute; width: 100%; height: 100%;
        border-radius: 50%; background-color: #9b63b3;
        opacity: 0.8; animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    @keyframes ping {
        75%, 100% { transform: scale(2.5); opacity: 0; }
    }

    /* Tooltip */
    .hotspot_tooltip {
        position: absolute;
        bottom: 30px; left: 50%;
        transform: translateX(-50%) translateY(10px);
        background: #fff; padding: 10px 15px; border-radius: 8px;
        width: 160px; text-align: center;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        opacity: 0; visibility: hidden; transition: all 0.3s ease;
    }
    .hotspot_tooltip::after {
        content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px;
        border-width: 6px; border-style: solid;
        border-color: #fff transparent transparent transparent;
    }
    .hotspot_tooltip h6 { font-size: 13px; font-weight: 700; margin: 0; color: #9b63b3; }
    .hotspot_tooltip p { font-size: 11px; margin: 0; color: #666; line-height: 1.2; }

    .hotspot_wrapper:hover .hotspot_tooltip {
        opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
    }


    /* --- RIGHT SIDE: TECH LIST --- */
    .tech_list_wrapper {
        padding-left: 20px;
    }
    /* Mobile fix for padding */
    @media (max-width: 991px) {
        .tech_list_wrapper { padding-left: 0; margin-top: 30px; }
    }

    .tech_item {
        display: flex; align-items: flex-start;
        background: #fff; border: 1px solid #f0f0f0; border-radius: 15px;
        padding: 20px; margin-bottom: 20px; transition: all 0.3s ease;
        position: relative; overflow: hidden;
    }

    .tech_item:hover {
        border-color: #6f6abeff;
        box-shadow: 0 10px 30px rgba(111, 106, 190, 0.1);
        transform: translateY(-5px);
    }

    .tech_icon {
        min-width: 50px; height: 50px;
        background: rgba(155, 99, 179, 0.1); color: #9b63b3;
        border-radius: 10px; display: flex; align-items: center; justify-content: center;
        font-size: 22px; margin-right: 20px; transition: 0.3s;
    }

    .tech_item:hover .tech_icon {
        background: linear-gradient(135deg, #9b63b3 0%, #6f6abeff 100%);
        color: #fff;
    }

    .tech_content { flex-grow: 1; }
    .tech_content h5 { font-size: 18px; font-weight: 700; color: #333; margin: 0; }
    
    .status_badge {
        font-size: 11px; font-weight: 700; text-transform: uppercase;
        padding: 3px 8px; border-radius: 4px; background: #f3f4f7; color: #6f6abeff;
    }

    .tech_content p { font-size: 14px; color: #666; margin-bottom: 10px; }

    .tech_progress {
        height: 4px; background: #eee; border-radius: 2px; width: 100%; overflow: hidden;
    }
    .tech_progress .bar {
        height: 100%; background: linear-gradient(90deg, #9b63b3 0%, #6f6abeff 100%);
        border-radius: 2px;
    }

    /* View All Link */
    .view_all_link {
        font-weight: 700; color: #333; text-decoration: none;
        display: inline-flex; align-items: center; transition: 0.3s;
    }
    .view_all_link i { margin-left: 10px; color: #9b63b3; transition: 0.3s; }
    .view_all_link:hover { color: #9b63b3; }
    .view_all_link:hover i { margin-left: 15px; }

 

    /* Section Background - Light to contrast with previous white section */
    .management_area {
        background-color: #f9fbfc;
        padding: 80px 0;
    }

    /* Shared Typography from previous section */
    .badge_capsule {
        display: inline-block;
        background: rgba(155, 99, 179, 0.1);
        color: #9b63b3;
        font-weight: 700;
        font-size: 13px;
        padding: 6px 14px;
        border-radius: 30px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 15px;
    }
    .title_modern {
        font-size: 38px;
        font-weight: 800;
        color: #333;
        margin-bottom: 20px;
    }
    .text_modern {
        color: #666; font-size: 16px; line-height: 1.6;
    }

    /* --- CARD DESIGN --- */
    .leader_card {
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transition: all 0.4s ease;
        border: 1px solid rgba(0,0,0,0.02);
        height: 100%;
        position: relative;
    }

    .leader_card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(111, 106, 190, 0.15);
    }

    /* Image Area */
    .leader_img_wrapper {
        position: relative;
        height: 320px; /* Fixed height for uniformity */
        overflow: hidden;
        background: #f0f0f0;
    }

    .leader_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        transition: transform 0.6s ease;
    }
    
    .leader_card:hover .leader_img {
        transform: scale(1.05);
    }

    /* Social Icons Overlay */
    .social_overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
        display: flex;
        justify-content: center;
        gap: 15px;
        transform: translateY(100%); /* Hidden by default */
        transition: transform 0.4s ease;
    }

    .leader_card:hover .social_overlay {
        transform: translateY(0);
    }

    .social_overlay a {
        width: 40px; height: 40px;
        background: #fff;
        color: #9b63b3;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        text-decoration: none;
        transition: 0.3s;
        font-size: 18px;
    }

    .social_overlay a:hover {
        background: #9b63b3;
        color: #fff;
    }

    /* Content Area */
    .leader_content {
        padding: 30px;
        text-align: center;
    }

    .leader_name {
        font-size: 22px;
        font-weight: 700;
        color: #333;
        margin-bottom: 5px;
    }

    .leader_role {
        font-size: 14px;
        color: #6f6abeff; /* Indigo */
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .divider_small {
        width: 40px;
        height: 3px;
        background: #eee;
        margin: 15px auto;
        border-radius: 2px;
    }

    .leader_bio {
        font-size: 14px;
        color: #666;
        font-style: italic; /* Makes it look like a quote */
        line-height: 1.6;
        margin-bottom: 0;
    }

    /* Decorative Bottom Line */
    .card_bottom_line {
        height: 5px;
        width: 100%;
        background: linear-gradient(90deg, #9b63b3 0%, #6f6abeff 100%);
        transform: scaleX(0); /* Hidden initially */
        transform-origin: left;
        transition: transform 0.4s ease;
    }

    .leader_card:hover .card_bottom_line {
        transform: scaleX(1); /* Animate full width on hover */
    }


/* AWARD Section Design */

  .awards_area {
        background-color: #fff;
        padding: 80px 0;
        overflow: hidden;
    }

    /* Reuse Typography */
    .badge_capsule {
        display: inline-block;
        background: rgba(155, 99, 179, 0.1);
        color: #9b63b3;
        font-weight: 700; font-size: 13px;
        padding: 6px 14px; border-radius: 30px;
        text-transform: uppercase; letter-spacing: 1px;
        margin-bottom: 15px;
    }
    .title_modern {
        font-size: 38px; font-weight: 800; color: #333; margin-bottom: 20px;
    }
    .text_modern { color: #666; font-size: 16px; line-height: 1.6; }

    /* Stat Box in Header */
    .award_stat_box {
        display: inline-flex;
        align-items: center;
        background: #f8f9fa;
        padding: 15px 25px;
        border-radius: 15px;
        border: 1px solid #eee;
    }
    .award_stat_box .icon_wrap {
        width: 45px; height: 45px;
        background: linear-gradient(135deg, #9b63b3 0%, #6f6abeff 100%);
        color: #fff;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 20px;
        margin-right: 15px;
        box-shadow: 0 5px 15px rgba(111, 106, 190, 0.3);
    }
    .award_stat_box h4 { color: #333; }

    /* --- SLIDER STYLES --- */
    .slider_container {
        position: relative;
        background: #fff;
        box-shadow: 0 10px 40px rgba(0,0,0,0.05);
        border: 1px solid #f0f0f0;
        border-radius: 20px;
        padding: 40px 0;
        overflow: hidden;
        white-space: nowrap;
    }

    /* Fade Effect on Edges */
    .fade_left, .fade_right {
        position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none;
    }
    .fade_left {
        left: 0;
        background: linear-gradient(to right, #fff, transparent);
    }
    .fade_right {
        right: 0;
        background: linear-gradient(to left, #fff, transparent);
    }

    /* The Track Animation */
    .logo_track {
        display: inline-flex;
        animation: scroll 30s linear infinite;
    }
    
    /* Individual Logo Slide */
    .slides {
        width: 200px;  
        padding: 0 30px;
        display: flex; align-items: center; justify-content: center;
    }

    .slides img {
        max-width: 100%;
        height: 50px;  
        object-fit: contain;
        filter: grayscale(100%);
        opacity: 0.6;
        transition: all 0.4s ease;
        cursor: pointer;
    }

    /* Hover Effect on Logos */
    .slider_container:hover .slides img {
        filter: grayscale(100%); /* Keep others grey */
        opacity: 0.4;
    }
    .slider_container .slides img:hover {
        filter: grayscale(0); /* Make hovered one color */
        opacity: 1;
        transform: scale(1.1);
    }
    /* Pause animation on hover */
    .slider_container:hover .logo_track {
        animation-play-state: paused;
    }


    /* --- CERTIFICATION CARDS (Bottom) --- */
    .cert_card {
        display: flex; align-items: center;
        background: #fff;
        padding: 20px;
        border-radius: 12px;
        border: 1px solid #f0f0f0;
        transition: 0.3s;
    }
    .cert_card:hover {
        border-color: #6f6abeff;
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(111, 106, 190, 0.1);
    }
    
    .check_icon {
        min-width: 40px; height: 40px;
        border-radius: 50%;
        background: rgba(155, 99, 179, 0.1);
        color: #9b63b3;
        display: flex; align-items: center; justify-content: center;
        font-size: 18px;
        margin-right: 15px;
    }

    .cert_content h5 { font-size: 16px; font-weight: 700; margin-bottom: 3px; color: #333; }
    .cert_content p { font-size: 13px; color: #777; margin: 0; line-height: 1.4; }

    /* Keyframes for Sliding */
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); } /* Moves half way (since we duplicated content) */
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .title_modern { font-size: 28px; }
        .slides { width: 150px; padding: 0 15px; }
        .slides img { height: 35px; }
    }







/* ============= Testimonial Section Design=============== */



    .testimonial_area {
        background-color: #f9fbfc; /* Light grey to contrast awards section */
        padding: 100px 0;
        position: relative;
    }

    /* Reuse Typography */
    .badge_capsule {
        display: inline-block;
        background: rgba(155, 99, 179, 0.1);
        color: #9b63b3;
        font-weight: 700; font-size: 13px;
        padding: 6px 14px; border-radius: 30px;
        text-transform: uppercase; letter-spacing: 1px;
        margin-bottom: 15px;
    }
    .title_modern {
        font-size: 38px; font-weight: 800; color: #333; margin-bottom: 20px;
    }
    .text_gradient {
        background: linear-gradient(90deg, #9b63b3 0%, #6f6abeff 100%);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .text_modern { color: #666; font-size: 16px; line-height: 1.6; }

    /* --- LEFT SIDE: TRUST CARD --- */
    .rating_summary_card {
        background: #fff;
        padding: 25px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(111, 106, 190, 0.1);
        border: 1px solid rgba(0,0,0,0.03);
        display: inline-block;
        min-width: 280px;
    }

    .total_score {
        font-size: 48px; font-weight: 800; color: #333; line-height: 1;
    }
    .stars_row i { color: #ffaa00; font-size: 14px; margin-right: 2px; }

    /* Avatar Group Overlap */
    .avatar_group { display: flex; align-items: center; }
    .avatar_group img {
        width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff;
        margin-left: -15px; object-fit: cover;
    }
    .avatar_group img:first-child { margin-left: 0; }
    
    .more_count {
        width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff;
        margin-left: -15px; background: #6f6abeff; color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 12px; font-weight: 700;
    }

    .btn_text_only {
        color: #9b63b3; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center;
        transition: 0.3s;
    }
    .btn_text_only:hover { color: #6f6abeff; transform: translateX(5px); }
    .btn_text_only i { margin-left: 8px; }


    /* --- RIGHT SIDE: REVIEW CARDS --- */
    .review_card {
        background: #fff;
        padding: 40px 30px;
        border-radius: 20px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.03);
        border: 1px solid rgba(0,0,0,0.02);
        height: 100%;
        position: relative;
        overflow: hidden;
        transition: 0.3s;
    }
    .review_card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(111, 106, 190, 0.1);
        border-color: transparent;
    }

    /* Top Color Line on Hover */
    .review_card::before {
        content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
        background: linear-gradient(90deg, #9b63b3 0%, #6f6abeff 100%);
        transform: scaleX(0); transform-origin: left; transition: 0.4s ease;
    }
    .review_card:hover::before { transform: scaleX(1); }

    /* Big Quote Background */
    .quote_bg {
        position: absolute; top: 20px; right: 20px;
        font-size: 80px; color: #f3f4f7; z-index: 0;
        font-family: serif; line-height: 1; opacity: 0.5;
        transition: 0.3s;
    }
    .review_card:hover .quote_bg { color: rgba(155, 99, 179, 0.1); }

    .review_text {
        font-size: 16px; color: #555; line-height: 1.7; font-style: italic;
        position: relative; z-index: 1; margin-bottom: 25px;
        min-height: 80px; /* Ensures alignment */
    }

    /* Reviewer Profile */
    .reviewer_info {
        display: flex; align-items: center; position: relative; z-index: 1;
    }
    .reviewer_info img {
        width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
        margin-right: 15px;
    }
    .reviewer_info h5 {
        font-size: 16px; font-weight: 700; color: #333; margin: 0;
    }
    .reviewer_info span {
        font-size: 13px; color: #9b63b3; font-weight: 600; text-transform: uppercase;
    }

    /* Carousel Custom Dots */
    .custom_indicators {
        bottom: -50px; /* Move below cards */
    }
    .custom_indicators button {
        width: 10px !important; height: 10px !important; border-radius: 50%;
        background-color: #ccc !important; opacity: 1 !important; border: none; margin: 0 5px;
    }
    .custom_indicators button.active {
        background-color: #9b63b3 !important; width: 25px !important; border-radius: 10px;
    }








/* ===============================
        SERVICES PAGE 
  ================================ */

/* --- Process Section Styles --- */

.process_item {
    position: relative;
    z-index: 2; /* Keeps item above the line */
    padding: 0 15px;
    margin-bottom: 30px;
    transition: transform 0.3s ease;
}

.process_item:hover {
    transform: translateY(-10px); /* Slight lift on hover */
}

/* The Icon Circle */
.icon_wrapper {
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 32px;
    color: #9b63b3; /* Your Theme Purple */
    box-shadow: 0 10px 30px rgba(155, 99, 179, 0.2);
    position: relative;
    border: 2px solid rgba(155, 99, 179, 0.1);
}

/* The Small Step Number Badge */
.step_number {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #9b63b3, #6f6abeff);
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

/* Text Styles */
.step_title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.step_text {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
}

/* The Connecting Dotted Line (Desktop Only) */
.process_line {
    position: absolute;
    top: 45px; /* Center of the icon (90px / 2) */
    left: 15%;
    right: 15%;
    height: 2px;
    background-image: linear-gradient(to right, #9b63b3 50%, transparent 50%);
    background-size: 15px 100%; /* Creates dotted effect */
    z-index: 1;
    opacity: 0.4;
}

 
/* --- Process Box (Right Side Cards) --- */
.process_box {
    background: #fff;
    padding: 30px 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    position: relative;
    transition: transform 0.3s ease;
    height: 100%;
    border: 1px solid #eee;
}

.process_box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(155, 99, 179, 0.15);
    border-color: #9b63b3;
}

.process_box .icon_circle {
    font-size: 35px;
    color: #9b63b3;
    margin-bottom: 15px;
}

.process_box h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.process_box p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 0;
}

.step_badge {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 12px;
    font-weight: 900;
    color: #ddd; /* Subtle grey number */
    font-family: sans-serif;
}

/* Highlight the number on hover */
.process_box:hover .step_badge {
    color: #9b63b3; 
}








/*==================
    DOCKTOR PAGE
  ==================
*/

/* --- Doctor Card Modern Styles --- */

.doctor_card_modern {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.03);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.doctor_card_modern:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(155, 99, 179, 0.15); /* Purple shadow glow */
    border-color: rgba(155, 99, 179, 0.3);
}

/* Image Box */
.doc_image_box {
    position: relative;
    height: 250px;
    overflow: hidden;
    background: #f0f0f0;
}

.doc_image_box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures face is not stretched */
    object-position: top center;
    transition: transform 0.5s ease;
}

.doctor_card_modern:hover .doc_image_box img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

/* Social Overlay (Hidden by default, slides up on hover) */
.overlay_social {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 0;
    text-align: center;
    transition: bottom 0.3s ease;
}

.doctor_card_modern:hover .overlay_social {
    bottom: 0;
}

.overlay_social a {
    color: #9b63b3;
    font-size: 18px;
    margin: 0 10px;
    transition: 0.2s;
}

.overlay_social a:hover {
    color: #333;
}

/* Content Box */
.doc_content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.doc_specialty {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #9b63b3;
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
}

.doc_name {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
}

.doc_degree {
    font-size: 14px;
    color: #777;
    margin-bottom: 10px;
}

.doc_affiliation {
    display: flex;
    align-items: center;
    background: #f9f9f9;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
    margin-bottom: 15px;
}

.doc_affiliation i {
    color: #9b63b3;
    margin-right: 8px;
    font-size: 16px;
}

.divider {
    border-top: 1px dashed #eee;
    margin: 10px 0 15px 0;
}

/* OPD Schedule Section */
.opd_schedule {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.schedule_icon {
    width: 35px;
    height: 35px;
    background: rgba(155, 99, 179, 0.1);
    color: #9b63b3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
}

.schedule_info .label {
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.days_list {
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.day_badge {
    background: #333;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}

.time_text {
    font-size: 12px;
    color: #555;
    display: block;
}

/* Button */
.book_btn_full {
    margin-top: auto; /* Pushes button to bottom */
    display: block;
    width: 100%;
    text-align: center;
    background: #fff;
    color: #9b63b3;
    border: 1px solid #9b63b3;
    padding: 10px 0;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.3s;
}

.book_btn_full:hover {
    background: #9b63b3;
    color: #fff;
}


        /* --- Departments Grid --- */
.dept_box {
    background: #fff;
    padding: 30px 15px;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.dept_box:hover {
    transform: translateY(-5px);
    border-color: #9b63b3;
    box-shadow: 0 10px 30px rgba(155, 99, 179, 0.15);
}

.dept_box .icon_box {
    font-size: 40px;
    color: #9b63b3;
    margin-bottom: 15px;
}

.dept_box h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #333;
}

.dept_box p {
    font-size: 14px;
    color: #888;
    margin: 0;
}

/* --- Doctor Features (Why Choose) --- */
.feature_img_box {
    position: relative;
}

.exp_badge {
    position: absolute;
    bottom: 30px;
    right: -20px;
    background: #fff;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    text-align: center;
    border-left: 5px solid #9b63b3;
}

.exp_badge h3 {
    font-size: 36px;
    font-weight: 800;
    color: #9b63b3;
    margin: 0;
    line-height: 1;
}

.exp_badge p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.list_icon {
    width: 60px;
    height: 60px;
    background: rgba(155, 99, 179, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #9b63b3;
    margin-right: 20px;
    flex-shrink: 0; /* Prevents icon from shrinking */
}

.list_text h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}

.list_text p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* Responsive adjustment for badge */
@media (max-width: 768px) {
    .exp_badge {
        right: 0;
        bottom: 0;
    }
}


































/*=====================
      CONTACT PAGE
  =====================
*/


 /* --- Split Map Section --- */
.contact_map_split_area {
    padding: 80px 0;
    background-color: #f9f9f9; /* Light background to separate from other sections */
}

/* The Main Container Card */
.contact_wrapper {
    background: #fff;
    border-radius: 20px;
    overflow: hidden; /* Ensures the map respects the rounded corners */
    border: 1px solid rgba(0,0,0,0.05);
}

/* --- Left Side: Info Panel --- */
.info_panel {
    padding: 50px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Badge */
.badge_pill {
    background: rgba(155, 99, 179, 0.1);
    color: #9b63b3;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    display: inline-block;
}

/* List Items */
.info_item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.info_item .icon_box {
    width: 40px;
    height: 40px;
    background: #f4f7fa;
    color: #9b63b3;
    border-radius: 50%; /* Circle Icons */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-right: 15px;
    flex-shrink: 0;
    transition: 0.3s;
}

/* Hover Effect */
.info_item:hover .icon_box {
    background: #9b63b3;
    color: #fff;
    transform: scale(1.1);
}

/* Button */
.btn-outline-custom {
    color: #9b63b3;
    border: 2px solid #9b63b3;
    border-radius: 10px;
    padding: 10px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-outline-custom:hover {
    background: #9b63b3;
    color: #fff;
}

/* --- Right Side: Map Panel --- */
.map_panel {
    min-height: 450px; /* Ensures map has height on desktop */
    height: 100%;
}

.map_panel iframe {
    display: block; /* Removes weird gaps */
    /* Optional: Grayscale map for modern look */
    filter: grayscale(10%); 
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .info_panel {
        padding: 30px;
    }
    .map_panel {
        height: 300px; /* Fixed height for map on mobile */
    }
    /* Fix for mobile order if needed */
    .contact_wrapper {
        margin-bottom: 20px;
    }
}











































































































/* --- Footer Styling --- */

/* --- FOOTER CONTAINER --- */
.footer_area {
    position: relative;
    /* Ensure no margins interrupt the flow */
    width: 100%;
    margin-top: 50px;
}

/* --- THE FIX: WAVE WRAPPER --- */
.footer_wave_wrapper {
    /* Line-height 0 removes tiny gaps below inline images/svgs */
    line-height: 0; 
    width: 100%;
    overflow: hidden; /* Prevents horizontal scrollbars */
    position: relative;
    z-index: 1;
    margin-bottom: -1px; /* Overlaps slightly to prevent thin line gaps */
}

.footer_wave_wrapper svg {
    display: block;
    width: 100%;
    height: 100px; /* Adjust height of wave curve here */
    /* This color must match the .footer_content background */
    fill: #0b1628; 
}

/* --- MAIN FOOTER CONTENT --- */
.footer_content {
    background-color: #0b1628; /* Deep Navy Blue */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* --- TYPOGRAPHY & ELEMENTS --- */
.widget_title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

/* Underline Effect for Titles */
.widget_title::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0; width: 40px; height: 3px;
    background: linear-gradient(90deg, #9b63b3 0%, #6f6abeff 100%);
    border-radius: 2px;
}

/* Links */
.footer_links { list-style: none; padding: 0; margin: 0; }
.footer_links li { margin-bottom: 12px; }
.footer_links a {
    color: #a0a6b5;
    text-decoration: none;
    transition: 0.3s;
}
.footer_links a:hover {
    color: #9b63b3;
    transform: translateX(5px);
    display: inline-block;
}

/* Social Icons (Round Buttons) */
.social_links a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    margin-right: 10px;
    text-decoration: none;
    transition: 0.3s;
}
.social_links a:hover {
    background: #9b63b3;
    transform: translateY(-3px);
}

/* Newsletter Form */
.newsletter_form .form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 5px 0 0 5px;
}
.newsletter_form .form-control:focus {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    border-color: #9b63b3;
}

.btn_purple {
    background: linear-gradient(90deg, #9b63b3 0%, #6f6abeff 100%);
    border: none;
    border-radius: 0 5px 5px 0;
    padding: 0 20px;
}
.btn_purple:hover {
    background: linear-gradient(90deg, #8a52a2 0%, #5e59aa 100%);
}

/* Contact Icons */
.icon_wrap {
    color: #9b63b3;
    font-size: 16px;
    margin-right: 1rem;
}