@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');


*, html, body {
  font-family: "Montserrat", "Noto Sans SC", sans-serif;
}

h1, h2, h3 , h4 {
  font-family: "Montserrat", sans-serif; /* Primary font */
}

p {
  font-family: "Noto Sans SC", sans-serif; /* Chinese font for paragraphs if needed */
}


html,body{
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.navbar-brand img {
    max-height:70px;
    width: 80px;
  }
  .btn-outline-custom {
    background: #e69500;
    color: white;
    border-radius: 12px;
  }
  .btn-outline-custom:hover {
    background-color: #e69500;
    color: white;
  }
  .btn-custom {
    background-color: #E74425;
    color: white;
    border-radius: 20px;
    border: none;
  }
  .btn-custom:hover {
    background-color: #e69500;
  }
  .contact-info {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .contact-info i {
    color: #007bff;
    font-size: 1.2rem;
  }
  .social-icons i {
    font-size: 1.2rem;
    color: #666;
  }
  .social-icons i:hover {
    color: #007bff;
  }
  /* banner section */
  .banner {
    background-image: url('images/doctor-banner-new.jpg'); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 75vh;
    display: flex;
    align-items: center;
    color: white;
    margin-top:130px;
  }

  .banner-overlay {
    /*background-color: rgba(0, 0, 0, 0.6); */
    padding: 2rem;
    border-radius: 8px;
  }
  .banner h1 {
    font-size: 3rem;
    font-weight: bold;
  }
  .banner p {
    font-size: 1.2rem;
    line-height: 1.8;
  }
  @media (max-width: 768px) {
      .banner {
    background-image: url('images/doctor-banner-mobile.jpg'); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 75vh;
    display: flex;
    align-items: center;
    color: white;
    margin-top: 100px;
  }
    .banner {
     
      padding: 2rem 1rem;
    }
    .banner h1 {
      font-size: 2rem;
    }
    .banner p {
      font-size: 1rem;
    }
  }
  h4.heading{
    color: #9C0D38;

}
  /* our comunity css */
  .our-community {
    text-align: center;
    /*padding: 50px 20px;*/
}

.our-community h2 {
    margin-bottom: 40px;
    font-size: 1.5rem;
    color: #233464;
}

.community-stats .stat {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.community-stats .stat span {
    font-weight: bold;
    font-size: 2rem;
    color: #233464;
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }

    .community-stats .stat {
        font-size: 1rem;
    }

    .community-stats .stat span {
        font-size: 1.5rem;
    }
}

/* special offers*/
.special-offer-section {
    background: linear-gradient(to left, #3C6A84, #55A3BA);
    height: 300px;
    color: #ffffff; 
    
}

.special-offer-section .offer-image {
    max-width: 100%;
    height: auto;
}

.special-offer-section h1 {
    font-size: 2.5rem;
    font-weight: bold;
}

.special-offer-section .btn-warning {
    color: #ffffff;
    font-weight: bold;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 1.2rem;
}

.special-offer-section .btn-warning:hover {
    background-color: #ff8c00;
    color: #ffffff;
}
/* our doctors */
.doctor-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}
.doctor-card img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-bottom: 15px;
}
.doctor-card h5 {
    font-weight: bold;
    margin-bottom: 5px;
}
.doctor-card p {
    margin: 0;
    color: #6c757d;
}
.tag {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #f8d7da;
    color: #721c24;
    border-radius: 20px;
    font-size: 12px;
}
.experience {
    margin-top: 15px;
    font-weight: bold;
    color: #5a5a5a;
}



/* services section css  */
.services-section {
    background-color: #fdfdfd;
    padding: 40px 0;
}
.services-section h2 {
    font-weight: bold;
}
.highlight-card {
    background-color:#a5a5a5;
    color:#233464;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.highlight-card img {
    max-width: 150px;
    border-radius: 50%;
}
.highlight-card button {
    background-color: #ff8c42;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    color: #fff;
    font-size: 16px;
}
.service-card {
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.service-card img {
    width: 100px;
    margin-bottom: 15px;
}
.service-card h5 {
    font-size: 18px;
    font-weight: bold;
}

/* testimonial */
/* Testimonial Section CSS */
.carousel img {
  width: 70px;
  max-height: 70px;
  border-radius: 50%;
  margin-right: 1rem;
  overflow: hidden;
}
.carousel-inner {
  padding: 1em;
}

@media screen and (min-width: 576px) {
  .carousel-inner {
    display: flex;
    width: 90%;
    margin-inline: auto;
    padding: 1em 0;
    overflow: hidden;
  }
  .carousel-item {
    display: block;
    margin-right: 0;
    flex: 0 0 calc(100% / 2);
  }
}
@media screen and (min-width: 768px) {
  .carousel-item {
    display: block;
    margin-right: 0;
    flex: 0 0 calc(100% / 3);
    
  }
  
  .carousel-control-prev,
.carousel-control-next {
  width: 2rem;
  height: 2rem;
  background-color: grey;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
}
.carousel .card {
  margin: 0 0.5em;
  border: 0;
}

.carousel-control-prev,
.carousel-control-next {
  width: 3rem;
  height: 3rem;
  background-color: grey;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

   /* faq section */
  .faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 15px;
}

.faq-title {
    color: #033d85;
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
}

.accordion-button {
    background-color: transparent;
    color: #007B9A;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    color: #033d85;
}

.accordion-button:hover {
    color: #033d85;
    opacity: 0.8;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-body {
    color: #333;
    background-color: #f8f9fa;
}

.show-more-btn {
    display: block;
    width: 200px;
    margin: 30px auto 0;
    background-color: #007B9A;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.show-more-btn:hover {
    background-color: #033d85;
    color: white;
}

#hiddenQuestions {
    display: none;
}

@media (max-width: 768px) {
    .faq-container {
        padding: 15px;
    }

    .accordion-button {
        font-size: 0.95rem;
    }
}
/* footer css */

.footer-container {
  background: linear-gradient(135deg, #007B9A, #033d85);
  color: #ffffff;
  padding: 3rem 0;
}

.footer-logo {
  max-width: 120px;
  margin-bottom: 1rem;
}

.footer-contact h3 {
  font-weight: 700;
  margin-bottom: 1rem;
}

.footer-contact .contact-info ul {
  padding: 0;
}

.footer-social a {
  color: #ffffff;
  font-size: 1.3rem;
  transition: transform 0.3s ease;
}

.footer-social a:hover {
  transform: scale(1.2);
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-cta {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
}

.footer-cta .btn {
  width: 100%;
  max-width: 250px;
}

.footer-bottom {
  background: rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 1rem 0;
}

@media (max-width: 767px) {
  .footer-container {
      text-align: center;
  }
  .footer-social {
      justify-content: center;
  }
  .footer-contact .contact-info ul {
      display: inline-block;
      text-align: left;
  }
  .contact-info{
    justify-content: center;
  }
  .footer-links ul {
      display: inline-block;
      text-align: left;
  }
}
/* call back form */
.callback-form {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 80%;
      background-color:#0190b4 ; 
      z-index: 1000;
      box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
      padding: 0.8rem 1rem;
      margin-left: 10%;
      display: flex;
    }
    .callback-form .form-control {
      border-radius: 0.5rem;
    }
    .callback-form .btn-submit {
      background-color: #002855; /* Button color */
      color: white;
      border: none;
      border-radius: 0.5rem;
      padding: 0.5rem 1.5rem;
      font-weight: bold;
    }
    .callback-form .btn-submit:hover {
      background-color: #0056b3;
    }
    .callback-icon {
      font-size: 1.5rem;
      color: white;
      margin-right: 0.5rem;
    }
    /* @media (max-width: 576px) {
      .callback-form {
        flex-wrap: wrap;
        padding: 1rem;
      }
      .callback-form .col-md-auto {
        flex-basis: 100%;
        margin-bottom: 0.5rem;
      }
    } */

    
     /* modal form */
     /* Custom colors for modal header and button */
    .modal-header {
      background-color: #002855;
      color: #fff;
    }

    .btn-primary {
      background-color: #007B9A;
      border-color: #007B9A;
    }

    .btn-primary:hover {
      background-color: #005f73;
      border-color: #005f73;
    }

    .modal-footer {
      justify-content: center;
    }

    /* Make sure the modal is responsive */
    @media (max-width: 767px) {
      .modal-dialog {
        width: 100%;
      }
    }
    /* index css */
    .banner-overlay-row {
      margin-right: 75px;
  }
  @media (max-width: 768px) {
      .banner-overlay-row {
      margin-right: 0px;
  }          
  
}

/* @media (max-width: 768px) {
             
.footer-container{
  margin-bottom:120px;
}
} */

/* navbar */
/* General Navbar Styles */
/*  */
/* .navbar-brand img {
max-height: 90px;
width: 100px;
} */

.btn-outline-custom {
background: #e69500;
color: white;
border-radius: 12px;
}

.btn-outline-custom:hover {
background-color: #e69500;
color: white;
}

.btn-custom {
background-color: #E74425;
color: white;
border-radius: 20px;
border: none;
}

.btn-custom:hover {
background-color: #e69500;
}

.contact-info {
display: flex;
align-items: center;
gap: 10px;
}

.contact-info i {
color: #007bff;
font-size: 1.2rem;
}

.social-icons i {
font-size: 1.2rem;
color: #666;
}

.social-icons i:hover {
color: #007bff;
}

/* Media Queries for Responsiveness */
/* mobile screen*/
/* .navbar-brand img {
max-height: 90px;
width: 100px;
} */

.btn-outline-custom {
background: #e69500;
color: white;
border-radius: 12px;
}

.btn-outline-custom:hover {
background-color: #e69500;
color: white;
}

.btn-custom {
background-color: #E74425;
color: white;
border-radius: 20px;
border: none;
}

.btn-custom:hover {
background-color: #e69500;
}

.contact-info {
display: flex;
align-items: center;
gap: 10px;
}

.contact-info i {
color: #007bff;
font-size: 1.2rem;
}

.social-icons i {
font-size: 1.2rem;
color: #666;
}

.social-icons i:hover {
color: #007bff;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
.navbar-brand img {
max-height: 50px;
width: 50px;
}

.btn-outline-custom, .btn-custom {
font-size: 0.9rem;
padding: 5px 10px;
}

.contact-info {
font-size: 0.8rem;
gap: 5px;
}

.social-icons {
font-size: 0.9rem;
}

.d-flex.align-items-center.ms-auto.gap-3 {
flex-direction: column;
gap: 10px;
}

.navbar-nav {
text-align: center;
}
}

@media (max-width: 576px) {
.contact-info span {
display: none; /* Hides phone number for small screens */
}

.social-icons {
justify-content: center;
}

.d-flex.align-items-center.ms-auto.gap-3 {
gap: 5px;
}
}

/* hide mobile navbar in laptop screen */
@media (min-width: 1024px) {
.mobile-display-none{
display: none;
}
}

@media (max-width: 767px) {
.mobile-display-none{
display: block; /* or flex, grid, depending on your layout */
}
}

@media (max-width: 767px) {
.big-device-nav{
display: none; /* or flex, grid, depending on your layout */
}
.second-nav{
display: none; /* or flex, grid, depending on your layout */
}
}

/* form hide in mobile screen */
@media (max-width: 767px) {
.hide-form{
  display: none;
}
}
/* Scroll-to-top button styling */
#scrollToTop {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      background-color: gray;
      color: white;
      border: none;
      border-radius: 15px;
      display: none; /* Hidden initially */
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1000;
      transition: opacity 0.3s ease-in-out;
  }

  #scrollToTop:hover {
      background-color: #555;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
      #scrollToTop {
          width: 40px;
          height: 40px;
          bottom: 15px;
          right: 15px;
      }
  }
  /* Scroll-to-top button styling */
  #scrollToTop {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      background-color: gray;
      color: white;
      border: none;
      border-radius: 5px;
      display: none; /* Hidden initially */
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1000;
      transition: opacity 0.3s ease-in-out;
  }

  #scrollToTop:hover {
      background-color: #555;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
      #scrollToTop {
          width: 40px;
          height: 40px;
          bottom: 15px;
          right: 15px;
      }
  }

/* laptop banner */
@media (max-width: 768px) {

.laptop-banner{
  display: none;
}
}
/* mobile-banner */
@media (min-width: 1024px) {
.mobile-banner{
display: none;
}
}

/*whatsaap icon*/
 .whatsapp-icon {
            position: fixed;
            left: 20px;
            bottom: 20px;
            z-index: 1000;
            background-color: #25D366;
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        .whatsapp-icon:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
        }

        .whatsapp-icon i {
            font-size: 32px;
        }

        /* Media queries for responsiveness */
        @media (max-width: 768px) {
            .whatsapp-icon {
                width: 50px;
                height: 50px;
                left: 15px;
                bottom: 15px;
            }
            
            .whatsapp-icon i {
                font-size: 26px;
            }
        }

        @media (max-width: 480px) {
            .whatsapp-icon {
                width: 45px;
                height: 45px;
                left: 10px;
                bottom: 10px;
            }
            
            .whatsapp-icon i {
                font-size: 24px;
            }
        }

        /* Demo content - you can remove this */
        .demo-content {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-color: #f8f9fa;
        }