body *{
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-style: normal;
}
body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.carousel1,
.carousel1 .carousel-inner,
.carousel1 .carousel-item {
  max-width: 100% !important;
  overflow: hidden;
}

.carousel1 .custom-caption {
  max-width: 90vw;
  word-wrap: break-word;
  box-sizing: border-box;
}
html {
  font-size: clamp(14px, 2vw, 18px);
}

h2,h1,h3{
  font-family: "Poppins", sans-serif;
  font-weight: 550;
}

.nav-bar a{
    text-decoration: none !important;
    color: white !important;
}
.section_1 button:hover{
  transform: translateY(-5px);
  transition: 0.2s linear;
}
.carousel1 button:hover{
  transform: translateY(-5px);
  transition: 0.2s linear;
}
.nav-bar div{
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: space-between;
   
}
.section_1{
    height: 70vh;
    overflow: hidden;

}
.section_1>div{
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex:1 1 50% !important;
    justify-content: center;
    position: relative;
    z-index: 0;
}
.section_1 >div > div{
    width:103% !important;
    background-color: rgba(0, 0, 0, 0.474); 
    position: absolute;
    height: 100%;
    z-index: 55;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
}
.section_1 div img{
  width: 50%;
  object-fit: cover !important;
}
.section_1 > div > div > div{
    width:50% !important;
    
}
.section_1 .image-section0{
  display: flex;
  flex-direction:row;
}
.section_1 .image-section0 div{
  flex: 1 1 50%;
  height: 100%;
  background-size:contain;
  background-repeat: no-repeat;
}

 /* Carousel wrapper */
.carousel1 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Carousel height and item image */
.carousel1 .carousel-inner {
  height: 70vh;
}

.carousel1 .carousel-item img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

/* Overlay dark filter */
.carousel1 .corousel_filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 5;
}

/* Custom caption box */
.carousel1 .custom-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  z-index: 10;
  padding: 10px 20px;
  border-radius: 8px;
  max-width: 90%;
}

.carousel1 .custom-caption h3 {
  font-size: 40px !important;
  max-width: fit-content;
  font-weight: 600;
  margin-bottom: 15px;
  border-radius: 10px;
}

.carousel1 .custom-caption p {
  font-size: 18px;
  margin-bottom: 10px;
}


/* CTA Button */
.carousel1 .custom-caption .btn {
  background-color: #fbc108;
  color: black;
  font-weight: 600;
  padding: 12px 25px;
  font-size: 16px;
  border-radius: 50px;
  border: none;
  transition: 0.3s ease;
}

.carousel1 .custom-caption .btn:hover {
  background-color: #e9aa05;
}


.carousel_2 div{
  max-width: 450px;
  max-height: 400px !important;
}
.carousel_2 video{
  width: 100% !important;
  max-height:100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block;
  border-radius: 10px;
  
}
.buttons{
  position: absolute;
  width:100%;
  top:40%;
}
.carousel_2 {
  display: flex;
  justify-content: center;
  position: relative;
  max-width: 100%;
  padding: 0 40px; /* give breathing space inside screen */
  box-sizing: border-box;
}
.carousel_2 .buttons {
  position: absolute;
  top: 40%;
  width: 100%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none; /* so video still clickable */
}

.carousel_2 .buttons button {
  background-color: black;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  pointer-events: auto; /* restore click */
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel_2 .buttons button span{
  width: 15px;
}

.carousel_2 .carousel-inner{
  display: flex;
}
.carousel_2{
  display: flex;
  justify-content: center;
  max-width: 450px;
  left:-160px;
}

.section_5 p,h2{
  max-width: 500px !important;
  text-align: center;
}
.section_5 h2{
  font-size: 26px !important;
  font-weight: 600;
}
.section_5 p{
  font-size: 18px !important;
}

.section_5{
  display: flex;
  align-items:center;
  flex-direction: row;
  height: 450px;
  width: 100%;
  justify-content: center;
}
.section_8 p{
  line-height: 1.7 !important;
}
.custom-accordion{
  margin-left: 50px;
  padding-top: 50px;
  text-align: left;
}
.accordion-item {
  text-align: left !important;
  width: 100%;
  max-width: 500px;
  font-size: 17px;
  background-color: #fff; /* optional for contrast */
  border: none;
  margin-bottom: 10px;
}

.accordion-item h2 button {
  font-size: 18px;
  box-shadow: none !important;
  background-color: #f8f9fa; /* light background for better UI */
  padding: 15px;
  border: none;
}

.accordion-button:not(.collapsed) {
  background-color:#0092c3 !important;
  color: white !important; 
}

.accordion-body {
  padding: 15px 20px;
  color: #333;
  font-size: 16px;
}

.accordion-item p {
  padding-left: 0px !important;
}

.accordion-item h2 {
  position: relative;
}

/* Vertical black line on heading */
.accordion-item h2::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 45px;
  background-color: black;
  top: 5px;
  left: -4px; /* shifted for visibility */
  z-index: 1;
  border-radius: 5px;
}
.accordion-button::after {
  transform: scale(0.7); /* adjust size: 0.5 to 1 */
}
.section_6 h2{
  color: #ffc108;
}

.conditions-section li{
  color:black
}
footer{
  background-color: #0092c3;
  margin: 0;
  margin-bottom: -15px;
  padding: 40px 20px;
  color: white;
}
footer a{
  text-decoration: none;
  color: white;
} 

@media (max-width: 768px) {
  .carousel1 .custom-caption h3 {
    font-size:23px !important;
  }
  .pre-phase{
   padding-top: 20px;
  }
  .pre-phase p{
    margin-left:30px !important;
  }
  .custom-accordion{
  margin-left: 50px;
  padding-top: 50px;
  text-align: left;
}
  .section_1{
    display: none;
  }
  .carousel1 .custom-caption p {
    font-size: 14px;
  }
  .carousel1 .custom-caption button {
    font-size: 15px !important;
    width:max-content;
  }
  .section_5{
   display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 15px;
  width: 100%;

}
.carousel_2{
  display: flex;
  justify-content: center;
  max-width: 450px;
  left:0px;
  margin-top: 50px;
}
.carousel_2 .buttons button span{
  width: 15px;
}
.carousel_2 .buttons button:nth-child(1){
  left:0px;

}
.carousel_2 .buttons button:nth-child(2){
  right: 0;
}
.conditions-section h2{
  font-size: 34px !important;
}
.custom-section ul{
  line-height: 1.5 !important;
}
.accordion-item{
  text-align:left !important;
  border: 1px solid black;
  width: 500px;
  max-width: 500px;
  font-size: 16px;
}
.accordion-item h2 button{
  font-size: 19px !important
}
.section_6 h2 + div{
  margin-left: 30px;
}
}
@media (min-width: 768px){
    .carousel1{
        display: none !important;
    }

}

.custom-section {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  padding: 20px;
  gap: 20px;
  grid-template-rows: auto auto;
  column-gap: 30px;
}
 .custom-section2 {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  padding: 20px;
  grid-template-rows: auto auto;
  column-gap: 50px;
  background-color: #0092c3;
}

 .image-section img,.image-section2 img  {
  width: 100%;
  max-width: 450px;
  height: auto; 
  border-radius: 10px 3px 10px 3px;
  box-shadow: 10px 10px 10px rgba(123, 93, 93, 0.318);
}
.image-section2 img{
  box-shadow: -10px 10px 10px rgba(123, 93, 93, 0.318) !important;
   border-radius: 3px 10px 3px 10px !important;
}
.image-section2 {
  align-self:start;
}
.image-section{
    grid-area: 1/2/3/3;
}
.image-section2{
    grid-area: 1/1/3/2;
}
.top-text,.top-text2, .bottom-text,.bottom-text2 {
  max-width: 500px;
}
.top-text ul,.top-text2 ul,.bottom-text2 ul, .bottom-text ul{
    font-size: 18px;
    padding: 0;
    margin-top: 0 !important;
}
.top-text h2, .top-text2 h2, .bottom-text2 h2, .bottom-text h2{
    font-size: 25px !important;
    font-weight: 550;
    text-align: left;
}
.top-text2 ul, .bottom-text2 ul{
  color: white !important;
}
.top-text2 h2,.bottom-text2 h2{
  color: #ffc108;  
}
.top-text ul, .top-text2 ul,.bottom-text2 ul, .bottom-text ul{
    list-style-type: none;
    font-size: 16px;
    line-height: 1.5;
    padding: 0 !important;
}

.image-section3{
  width:90vh !important;
}
.image-section3{
  width: 100% !important;
}
.image-section3 >div img{
  width: 100%;
  max-width: 300px;
  height: 400px;
  float: right;
  object-fit: cover;
  margin-right:50px !important;
  border-radius:0 10px 0 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.433) ;
 
}
.image-section3 h2, .section_4 h2,h3{
  font-size: 25px !important;
  font-weight: 550;
  text-align:left ;
}
.image-section3 ul, .section_4 p{
  font-size: 18px !important;
}
.section_6 p{
  font-size: 16px !important;
  line-height: 1.7 !important;
  color:white;
}
.section_7{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(assets/images/White-Wave-PNG-Image\ \(1\).png);
  background-repeat: no-repeat;
  width: 100% !important;
  background-position:-100px -150px;
  position: relative;
  z-index: 77;
}
.section_7 .inner-vision{
  text-align: center;
  z-index: 55;
  position: relative;
}
.section_7 .overlay{
  position: absolute;
  top: 0;
  width:100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.573);
  z-index: 0 ;
}
.section_7 h2{
  color: #0092c3;
  font-size: 38px !important;
}
.section_7 p{
  padding: 0;
  margin: 0;
  line-height:1.7 !important;
}
.custom-section ul li{
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .custom-section,.custom-section2 {
    grid-template-columns: auto;
    grid-auto-flow: auto auto  auto;
  }

  .image-section {
    order: 2;
    grid-area: 2/1/3/3;
    margin: auto;
     
  }
  .image-section2 {
    order: 1;
    grid-area: 1/1/2/3;
    margin: auto;
  }

  .top-text {
    order: 1;
    grid-area: 1/1/2/2;
    margin: auto;
  }
  .top-text2 {
    order: 2;
    grid-area: 2/1/3/3;
    margin: auto;
    margin-top: 20px;
  }

  .bottom-text {
    order: 3;
    grid-area:3/1/4/3;
  }
  .bottom-text2 {
    order: 3;
    grid-area:3/1/4/3;
    margin-left:20px !important;
  }
  .top-text h2, .bottom-text h2{
    text-align: center;
  }
  .top-text ul, .bottom-text ul{
    text-align: left;
  }
  .custom-section{
    margin-top:45px !important;
    margin-bottom: 10px !important;
  }
  .top-text h2,.bottom-text h2{
    font-size: 24px;
    text-align: left !important;
  }
  .bottom-text{
    margin-top: 20px;
  }
  .top-text ul, .bottom-text ul{
    list-style-type: none;
    font-size: 17px;
    line-height: 1.6px;
}
.image-section3 >div img{
  width: 100%;
  max-width: 300px;
  height: 400px;
  float: none;
  object-fit: fill;
  margin-right:0px !important;
  border-radius:0 10px 0 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.433) ;
}
.image-section3 >div{
  display: flex;
  flex-direction: column;
  margin: 0 0 !important;
  gap: 20px;
  align-items: center;
}
.image-section3 div ul{
  margin:-10px 30px !important;
}
.image-section3 div h2{
  margin:10px 30px !important;
}
.image-section3 ul, .section_4 p{
  font-size: 18px !important;
  line-height: 1.5;
  text-align: left;
  margin: 0 !important
}
.section_4 h3{
  font-size: 20px !important;
  font-weight: 530 !important;
}
.section_4 h3:nth-child(1){
  margin-top: 20px
}
.section_6 .custom-section2{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.section_6 .image-section2{
  order: 3
}
.section_6  .butto{
  margin-top: 20px;
  order: 2
}
.section_6 .top-text2{
  order:1;
  padding: 25px;
}
.section_6 .top-text2 div{
  border:1px solid black;
  padding: 20px 30px;
}
.btn{
  padding: 0.5rem 2rem !important;
  font-size: 14px !important;
  margin-top: -30px;
}
.section_7 h2{
  color: #0092c3;
  font-size: 34px !important;
}
.section_7 p{
  padding: 0;
  margin: 0;
  line-height:1.7  !important;
  font-size: 17px !important;
}
.section_9{
  gap: 50px !important;
}
.section_9 .butto{
  text-align: center !important;
}
.section_9 .image-section{
    order:1 !important;
    grid-area: 1/1/2/2 !important;
    margin: auto;
  }
  .section_9 .top-text{
    order: 2;
    grid-area:2/1/3/1 !important;
    text-align: left !important;
  } 
  .section_9 ul{
    font-size: 17px;
    padding: 0 !important;
    margin: 0;
  }
  .section_9 ul li{
    padding: 0 !important;
  }
 
}


/* ====== Import & Variables ====== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
:root {
  --primary: #0092c3;;         /* Purple headings/buttons */
  --primary-dark: #4a1ebe;
  --header-blue: #0092c3;     /* Blue background for header & sections */
  --btn-yellow: #ffc108;      /* Yellow for CTA buttons on blue */
  --secondary-bg: #f9f9f9;    /* Light gray alternate sections */
  --text-color: #333;         /* Default body text */
  --white: #ffffff;
  --black: #000000;
  --heading-font: 'Poppins', sans-serif;
  --body-font: 'Poppins', sans-serif;
  --transition-speed: 0.3s ease;
  --max-width: 1200px;
}

/* ====== Reset & Base ====== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  color: var(--text-color);
  line-height: 1.6;
  background: var(--white);
}

.main a {
  text-decoration: none;
  color: inherit;
}

/* ====== Containers & Helpers ====== */
.main .container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.main .text-center {
  text-align: center;
}

.main .section {
  padding: 80px 0;
}

.main .section-alt {
  background: var(--secondary-bg);
}

/* Separator between sections */
.main .section + .main .section,
.main .section-alt + .main .section,
.main .section + .main .section-alt {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ====== Typography ====== */
.main h1, h2, h3 {
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1rem;
  line-height: 1.2;
  font-size: 40px;
}

.main h1 { font-size: 2.5rem; }
.main h2 { font-size: 2rem; }
.main h3 { font-size: 1.5rem; }

.main p,ul {
  margin: 0.75rem 0;
  font-size: 20px;
  line-height: 1.7rem;
}


.main .subtext {
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.5rem;
}

/* ====== Buttons ====== */
.main .btn {
  display: inline-block;
  padding: 0.5rem 2rem;
  background:#ffc108;
  color: black;
  border-radius: 50px;
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  transition: background var(--transition-speed),
              transform var(--transition-speed),
              box-shadow var(--transition-speed);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.main .btn:hover {
  background: var(--primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  color:white
}

/* ====== Lists ====== */
.main ul {
  list-style: none;
  margin: 1.5rem 0;
  padding-left: 1rem;
}
/* ====== Phases & Testimonials ====== */
.main .phase {
  margin-bottom: 40px;
}

#testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.main .testimonial {
  background: #eee;
  padding: 20px;
  border-radius: 8px;
}

/* ====== Common Conditions Treated ====== */
.main .conditions-section .section-title {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
  text-align: center;
}

.main .conditions-list {
  display: grid;
  gap: 1rem;
}

.main .condition-item summary::-webkit-details-marker {
  display: none;
}

.main .condition-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--primary);
  color: var(--white);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  position: relative;
}

.main .condition-item summary::after {
  content: "−";
  font-size: 1.25rem;
  line-height: 1;
}
.main .condition-item:not([open]) summary::after {
  content: "+";
}
.main .condition-icon {
  margin-right: 0.75rem;
  font-size: 1.25rem;
}
.main .condition-label {
  flex: 1;
  text-align: left;
}

.main .condition-item ul {
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--secondary-bg);
  border-radius: 0 0 8px 8px;
  color: var(--text-color);
}
.main .condition-item ul li {
  margin: 0.5rem 0;
  padding-left: 1rem;
  list-style: disc inside;
}

/* ====== Site Header ====== */
.main .site-header {
  background: var(--header-blue);
}
.main .header-inner {
  display: flex;
  align-items: center;
  padding: 0.5rem 2rem;
}
.main .logo {
  height: 40px;
  max-width: 200px;
}

/* ====== Hero Section ====== */
/* Adjust or remove if you have custom hero styles elsewhere */
.main .section_1 {
  position: relative;
  overflow: hidden;
}
.main .desktop-hero {
  display: flex;
  height: 70vh;
}
.main .desktop-hero img {
  flex: 1;
  width: 33.333%;
  object-fit: cover;
  height: 100%;
}
.main .mobile-hero {
  display: none;
  position: relative;
}
.main .mobile-hero .carousel-inner {
  height: 70vh;
}
.main .mobile-hero .carousel-item img {
  object-fit: cover;
  height: 70vh;
  width: 100%;
}
.main .hero-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 161, 255, 0.34);
  display: flex;
  justify-content: center;
  align-items: center;
}
.main .hero-content {
  text-align: center;
  color: var(--white);
  padding: 20px;
  border-radius: 8px;
}
.main .hero-content h1 {
  font-family: var(--heading-font);
  font-size: 2rem;
  margin-bottom: 1rem;
}
.main .hero-content p {
  margin-bottom: 1.5rem;
}
.main .hero-content .btn {
  background: var(--btn-yellow);
  color: var(--black);
}

/* ====== Blue‐Background Helper ====== */
.main .blue-color {
  background-color: var(--header-blue);
  color: var(--white);
}
.main .blue-color h2,
.main .blue-color h3,
.main .blue-color p {
  color: var(--white);
}
.main .blue-color .btn {
  background-color: var(--btn-yellow);
  color: var(--black);
}



/* ====== Responsive ====== */
@media (max-width: 1024px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
}

@media (max-width: 768px) {
  .main .section { padding: 60px 0}
  .main .btn { padding: 0.75rem 1.5rem; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .main .desktop-hero { display: none; }
  .main .mobile-hero { display: block; }
}

@media (max-width: 600px) {
  .main .condition-item summary {
    flex-direction: column;
    align-items: flex-start;
  }
  .main .condition-item summary::after {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }
  .main .hero-content h1 {
    font-size: 1.5rem;
  }
}
@media (max-width: 480px) {
  .main .container { width: 95%; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.25rem; }
  .main .btn { width: 100%; text-align: center; }

   .custom-section {
    padding: 10px;
    gap: 15px;
  }

  .custom-section ul {
    padding-left: 20px;
    font-size: 15px;
  }

  .image-section img {
    border-radius: 8px;
  }

  .top-text h2,
  .bottom-text h2 {
    font-size: 18px;
    line-height: 1.3;
  }
   .custom-section2 .top-text2{
    padding: 20px !important;
   }
     .accordion {
    margin: 0 auto;
    padding: 10px;
  }

  .accordion-item {
    width: 100%;
    font-size: 16px;
  }

  .accordion-item h2 button {
    font-size: 16px;
    padding: 12px;
  }

  .accordion-body {
    font-size: 15px;
    padding: 12px;
  }

  .accordion-item h2::after {
    height: 40px;
    left: -6px;
  }
   .accordion-button::after {
    transform: scale(0.5);
  }
  .conditions-section h2{
    text-align: center !important;
  }
   .carousel_2 div {
    max-width: 100% !important;
    max-height: 250px !important;
  }

  .carousel_2 video {
    border-radius: 8px !important;
  }

  .buttons {
    top: 35%;
  }

  .carousel_2 .buttons button {
    width: 30px;
    height: 30px;
  }

  .carousel_2 .buttons button span {
    width: 12px;
  }

  .section_5 h2 {
    font-size: 22px !important;
  }

  .section_5 p {
    font-size: 16px !important;
  }
  .section_5{
    margin: 0;
  }
 .section_6 .butto a{
  margin-top: 20px;
  order: 2;
  font-size: 13px !important;
}
.section_7 .inner-vision h2 {
    font-size: 22px !important;
  }

  .section_7 .inner-vision p {
    font-size: 15px !important;
  }
    .carousel1 .carousel-inner img {
    height: 300px;
  }
  .carousel1 .carousel-inner,
.carousel1 .carousel-item,
.carousel1 .carousel-item img,
.carousel1 .corousel_filter {
  height: 70vh;
  width: 100%;
  object-fit: cover;
}

.carousel1 .corousel_filter {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.6);
}

  .custom-caption {
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .custom-caption h3 {
    font-size: 20px;
    line-height: 1.4;
  }

  .custom-caption p {
    font-size: 14px;
  }

  .custom-caption .btn {
    padding: 8px 18px;
    font-size: 14px;
    margin: auto !important;
  }
  .section_8{
  flex-direction: column;
  padding:50px 30px !important;
}
.section_8 p{
  font-size: 17px !important;
}
.section_8 div,h2{
  text-align: left !important;
}
.section_8 a{
  font-size: 14px !important;
  word-break: keep-all;
}
}

 /* new one */