body {
   font-family: "Noto Sans", sans-serif;
   box-sizing: border-box;
 }

 .container {padding: 0px;
   width: 1240px;
   margin: 0 auto;
 }

 a {
   text-decoration: none;
 }

 li {
   list-style: none;
 }

 .nav-link.active {
   border-bottom: 2px solid #fff;
 }

 .navbar-bottom {box-shadow: 0px 3px 16px #0000000F;
   background-color: #FFFFFF;
 }
.navbar{background: #fff;}
 .navbar-bottom .nav-link {
   border-bottom: 2px solid #fff;
   color: #000;
 }

 .navbar-bottom .nav-link:hover{border-bottom: 2px solid #50B8E7;}
 .navbar-bottom .nav-link.active {border-bottom: 2px solid #50B8E7;
   color: #000;
   
 }
.navbar{padding-bottom: 0;}

 /* header css end here */
 .logo img{width: 100%;}
.hero{display: flex; background: #DBF0FA;}
.right-box {padding-left: 160px; margin-top:150px;    padding-right: 100px;}
.right-box span{color: #302F45;text-transform: uppercase;opacity: 1;padding: 35px;font-size: 18px;line-height: 24px;letter-spacing: 0px;text-align: center; position: relative;}
.right-box span::before{content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 3px;
    background-color: #302F45;
    border-radius: 8px;
  }
.right-box h1{letter-spacing: 0px;color: #302F45;opacity: 1;font-size: 55px;line-height: 57px;font-weight: 600;margin-top: 20px;font-family: Poppins;}
.right-box p{letter-spacing: 0px;color: #0B0B0B;opacity: 1;font-size: 18px;line-height: 24px;font-weight: 500;margin-top: 40px;padding-right: 20px;padding-right: 65px;}
.services-section {
  padding: 60px 20px;
  background-color: #fff;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 40px !important  ;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

.text-content {
  flex: 1;
  max-width: 600px;
}

.section-label {
  position: relative;
  font-weight: 700;
  color: #302F45; /* dark navy */
  text-transform: uppercase;
  display: inline-block;
  padding-left: 40px;
  font-size: 18px;line-height: 27px;
letter-spacing: 0px;
}

.section-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 40%;
  transform: translateY(-50%);
  width: 30px;
  height: 3px;
  background-color: #50B8E7; /* mint green */
  border-radius: 8px;
}


.section-heading {
     font-size: 30px;
    color: #2c2f4a;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 43px;
    text-align: left;
}
.short-heading {
     font-size: 20px;letter-spacing: 0px;
    color: #2c2f4a;
    font-weight: 500;
    margin-bottom: 15px;
    line-height: 28px;
    text-align: left;
}
.section-description {letter-spacing: 0px;text-align: left; font-weight: 400;
  color: #222222;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 25px;
}

.cta-button {
  display: inline-block;
  background-color: #50B8E7;
  color: #fff;
  padding: 10px 40px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 400;
}
  
.cta-button:hover{background-color: #000000;color: #FFFFFF;;}
.image-content {
  flex: 1;
  max-width: 600px;
}
.image-content .image-wrapper {width: 600px;}
.image-content .image-wrapper img{width: 100%;;}

.short-description{background: #DBF0FA;
    padding: 20px;border-radius: 13px;
    font-size: 16px;
    display: block;
    line-height: 24px;
    color: #222222;
    font-weight: 600;;}
@media (min-width: 768px) {
  .container {
    flex-direction: row;align-items: flex-start;
    justify-content: space-between;gap: 0px;
  }
}


.contact-section {
  background-image: url('image/bg.png');background-repeat: no-repeat;;
  padding: 50px 45px;
}

.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.contact-info {
  flex: 1;
}
 .fb9 {
      border: 1px solid #3366FF;
      background-color: #B3C6FF;
      width:150px;
      height:30px;
    }

.contact-info .section-label {
  font-weight: 700;
  color: #2c2f4a;
  margin-bottom: 10px;
  text-transform: uppercase;
  position: relative;
  padding-left: 25px;
}

.contact-info .section-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 3px;
  background-color: #50B8E7;
  border-radius: 2px;
}

.contact-info h2 {
  font-size: 24px;
  margin-bottom: 30px;
  font-weight: 600;
}

.contact-method {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.contact-method .icon {
     font-size: 24px;
    margin-right: 15px;
    padding: 10px;
    background: #302F45;
    border-radius: 50px;
    aspect-ratio: 1;
    width: 50px;
    height: 50px;
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;

}

.contact-method p {
  margin: 0;
  font-weight: 500;
}

.contact-method a {font-size: 16px;
  color: #2c2f4a;
  font-weight: bold;line-height: 37px;
  text-decoration: none;
}
.contactText {padding: 50px 0;}
.contactText .container{display: inherit;}
.contactText p{margin-bottom: 15px;}
.contactText p a{color: #50B8E7;}
.contactText ul{padding-left: 20px;}
.contactText li{list-style: disc;}
.bgGray{background: #f2f2f2; margin-bottom: 40px; margin-top: -16px; padding-bottom: 40px;}
.contact-form {
  flex: 1.2;

  padding: 0px;

}

.contact-form h3 {line-height: 40px;
  font-size: 30px;
  font-weight: 600;letter-spacing: 0px;
  color: #302F45;;
  margin-bottom: 25px;
}
.form-label{font-size: 14px ;line-height: 20px;letter-spacing: 0px;
color: #0F0E0E;font-weight: 600;margin: 0;;}
.contact-form form {
  display: flex;
flex-wrap: wrap;
  gap: 10px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.form-row input {
  flex: 1;
  padding: 12px;
  border: none;
  background: #f3eef7;
  border-radius: 6px;
  font-size: 15px;
}

textarea {
  resize: vertical;
  min-height: 100px;
  border: none;
  padding: 12px;
  background: #f3eef7;
  border-radius: 6px;
  font-size: 15px;
}

.recaptcha-box {
  text-align: center;
}

.contact-form button {width: 400px;
  background-color: #50B8E7;
  color: #fff;
  padding: 5px 30px;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  margin: 40px auto;
  align-self: center;
}
.contact-form button:hover{background-color: #000000;}











.breadcrumb{   background: transparent linear-gradient(124deg, #DAF0FA 0%, #A6E8E1 100%) 0% 0%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    padding-left: 201px;
    text-align: left;
}
.breadcrumb-item ul{margin: 0px;padding-top:23px ;padding-left: 0;margin-bottom: 20px;}
.breadcrumb-item ul li{font-size:16px;letter-spacing: 0px;
color: #302F45;
opacity: 1;line-height: 26px ;}
.breadcrumb-item ul li a{color: #302F45;}
.breadcrumb-item ul li a:hover{color: #27524d;}
.img-sec img{width: 100%;}
.breadcrumb-item h1{font-size: 40px;line-height: 50px;color: #302F45;letter-spacing: 0px;font-weight: 600;}
.contact-box{background: #fff; padding: 40px;margin: 20px auto;}
.contact-box .contact-container{gap: 45px;}
.section-text{letter-spacing: 0px;font-size: 20px;line-height: 27px;
color: #FFFFFF;font-weight: 700;
text-transform: uppercase;
opacity: 1;}
.contact-method .icons{font-size: 24px;
 
    padding: 10px;
    background: #302F45;
    border-radius: 50px;
    aspect-ratio: 1;
    width: 50px;
        height: 27px;
    text-align: left;
    display: flex
;
    justify-content: center;
    align-items: center;
}
.contact-no{font-weight: normal !important;}
.contact-form .col-md-6{width: 49%;}
@media (max-width: 768px) {
 
  .form-row {
    flex-direction: column;
  }
}


 .footer {
      background-color: #302F45;
      color: white;
      padding:  40px;border-radius: 18px;
    }


    .footer a {display: flex;gap: 20px;
      color: white;
      text-decoration: none;
    }

    .footer a:hover {
      text-decoration: underline;
    }

    .social-icons a {
      color: #2e2c45;
      background-color: #B8E2F5;
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      border-radius: 50%;
      transition: all 0.3s ease-in-out;
    }

    .social-icons a:hover {
      background-color: #dddddd;
    }

    .footer-bottom {color: #302F45;
      text-align: center;
      padding: 10px;letter-spacing: 0px;
      border-top: 1px solid rgba(255,255,255,0.1);
      font-size: 16px;
    }

    .footer .icon-text i {
      margin-right: 10px;
      color: #fff;
    }

    .border-right {
      border-right: 1px solid rgba(255,255,255,0.2);
    }

    

    .footer p {letter-spacing: 0px;line-height: 26px;text-align: left;font-weight: 400;
      font-size: 16px;color: #FFFFFF;
      margin-bottom: 10px;
    }
  .footer p a:hover{color: red;}
  .footer h5{font-size: 18px;line-height: 24px;letter-spacing: 0px;
color: #FFFFFF;font-weight: 600;margin-bottom: 20px;
text-transform: uppercase;
opacity: 1;}



 .form-control{background-color: #fff ; border-radius:0;}

   .form-control:focus{border: 1px solid #EDF7FC;box-shadow: none;}
   .mobile-slide-menu .logo-menu{display: none;}
   .map iframe{width: 100%;height: 450px;;}

.contact-info-box{width: 400px;display: block;;}
.contact-info{display: block;}
.contact-form{width: 660px;}

 @media (max-width: 768px) {
     .hero {
      flex-direction: column;
    }
      .right-section {
      order: 2;
      text-align: center;
    }
   .left-section {
      order: 1;
      text-align: center;
    }
  .contact-form button{width: 100%;}
  .contact-container{width: 100%;}
   .container {padding: 12px;
     width: 100%;
     margin: 0 auto;
   }
   .right-box{padding: 0;margin:0px;;}

   .image-wrapper img{width: 100%;}
   .left-section img{width: 100%;}

   .navbar-toggler {
     outline: none;
     position: absolute;
     top: -45px;
     border: none;
     left: 10px;
   }

   .navbar-bottom {
     padding: 0px;
   }

   .logo-section {
     width: 110px;
     text-align: right;
   }

   .navbar-bottom .nav-link {
     color: #000;
     text-align: left;
     border-bottom: 1px solid #978e8e87
   }

   .navbar-toggler span {
     position: absolute;
     z-index: 1111;
   }

   .mobile-slide-menu {
     position: fixed;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100vh;
     background:  transparent linear-gradient(107deg, #DAF0FA 0%, #A6E8E1 100%) 0% 0%;
     /* Or your preferred color */
     color: #000;
     z-index: 1050;
     transition: all 0.3s ease;
  
   }
   .mobile-slide-menu ul{padding: 20px 10px;}
   .mobile-slide-menu  .logo-menu{        background: #FFFFFF;        padding: 10px;
        text-align: left;
        width: 100%;
        display: block !important;}
          .mobile-slide-menu  .logo-menu img{width: 290px;}
   .mobile-slide-menu.show {
     left: 0;
     box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
   }

   body.menu-open {
     overflow: hidden;
   }

   .navbar-toggler .hamburger-icon {top: 28px;
     position: fixed;left: 14px;
   }
.navbar-toggler .close-icon {top: 28px;
     position: fixed;right: 20px;
   }
   .searchToggle-btn {
     position: absolute;
     top: 5px;
     left: 35px;
     right: 0;
   }

   .hamburger-icon,
   .close-icon {
     transition: opacity 0.2s ease;
   }

   .close-icon.d-none,
   .hamburger-icon.d-none {
     display: none !important;
   }

   .navbar-top {
     background-color: #fff;
     border-bottom: 1px solid #ddd;
   }

   .navbar-bottom .nav-link.active {
     font-weight: 800;
     border-bottom: 1px solid #978e8e87 ;
   }

   

   .dropdown-menu[data-bs-popper]{
    top: 32px;
    left: -77px;
    margin-top: var(--bs-dropdown-spacer);
}
.swiper-buttons button{display: none;}
 .dropdown-toggle::after{margin-top: 5px;}

  /* header css end here */
  .contact-form{width: 100%;}
  .right-box h1{font-size: 30px;line-height: 40px;}
  .services-section{padding: 0px;}
  .text-content{order: 2;}
  .cta-button{width: 100%;text-align: center;}
  .section-description{margin: 0px;margin-bottom:20px}
  .contact-section{background-image: url('image/mob-bg.png');background-size: 100%;}
  /* .contact-box{background-image: url('image/contact-bg2.png');background-size: 100%;margin: 20px 0;} */
  .contact-box{background: #DAF0FA;margin-bottom: 40px;padding: 0;}
  .contact-form{margin: 10px;}
  .contact-info-box{background: #302F45;padding: 20px;}
  .contact-info-box{order: 2;width: 100%;;}
  .contact-form{padding: 20px;}
  .breadcrumb{flex-wrap: wrap;padding: 0px;;}
  .breadcrumb-item{padding: 10px;}
  .map iframe{width: 100%;height: 600px;;}
  .contact-box .contact-container{gap: 60px;}
  .image-content .image-wrapper{width: 100%;}
  .right-section{text-align: left;padding: 10px 10px 20px ;}
  .right-box p{padding: 0;margin: 0;;}
  .right-box h1{margin: 10px 0;}
 
  .section-heading{font-size: 26px;line-height: 38px;margin-bottom:10px ;}
  .contact-form .col-md-6{width: 100%;}
  .breadcrumb-item h1{font-size: 26px;line-height: 34px;}
  .breadcrumb-item ul{padding-top:15px ;margin-bottom: 10px;}
  .contact-form form{gap: 25px;}
 }