.navbar-custom {
            background-color: #f8f9fa; /* Light background color for navbar */
        }


        .btn-custom {
            background-color: #f39c12; /* Orange background */
            color: #fff;
            border: none;
        }

        .btn-custom:hover {
            background-color: #e67e22; /* Darker orange on hover */
        }

        .navbar-nav .nav-link.active {
            color: #f39c12; /* Orange color for active menu */
            font-weight: bold; /* Bold text for active menu */
        }

        .navbar-nav .nav-link {
            color: #000; /* Default color for nav links */
        }

        .navbar-nav .nav-link:hover {
            color: #f39c12; /* Orange color on hover */
        }

        /* Dummy content styling */
        section {
            height: 100vh;
            padding: 50px;
            background-color: #f0f0f0;
            border-bottom: 1px solid #ccc;
        }

        section h2 {
            text-align: center;
            margin-top: 20px;
        }


         .navbar-brand img {
    width: 200px; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
  }
.navbar-custom .navbar-collapse {
    background-color: #f8f9fa; /* Same as the navbar background */
    width: 100%;
}


  .navbar {
    /* Set height explicitly if needed */
    height: 80px; /* Example height */
    display: flex;
    align-items: center; /* Center items vertically */
  }

   #about {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #ffffff;
  }
  .icon-bg {
    width: 100px; /* Adjust width as needed */
    height: 100px; /* Adjust height as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa; /* Light background color for the icon container */
    border-radius: 50%; /* Make it circular */
    margin: 0 auto;
  }
  .icon-bg img {
    max-width: 70%; /* Adjust this value based on your image size */
    max-height: 70%; /* Adjust this value based on your image size */
  }

  .font-weight-bold {
  font-weight: 700; /* Commonly used value for bold text */
}



/* Existing CSS */
#services {
  text-align: center;
  padding: 20px;
}

.service-container {
  display: flex;
  flex-wrap: wrap; /* Enable wrapping for mobile responsiveness */
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.service-item {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  transition: transform 0.3s ease, background-color 0.3s ease;
  width: 150px;
  text-align: center;
}

.service-item img {
  width: 60px; /* Adjust size as needed */
  margin-bottom: 10px;
}

.service-item p {
  margin-top: 0;
}

.service-item:hover {
  transform: scale(1.1);
  background-color: #d1eaff;
}

/* New CSS for mobile responsiveness */
@media (max-width: 768px) {
  .service-item {
    width: calc(50% - 20px); /* 50% width minus the gap */
    margin-bottom: 20px; /* Add margin at the bottom for spacing */
  }
}


 /* Full-width map */
        #map {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        /* Contact box styling */
        .contact-box {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            position: relative;
        }
        /* Center the contact box */
        .contact-section {
            position: relative;
            height: 500px;
            display: flex;
            align-items: flex-end; /* Align to bottom */
            justify-content: flex-end;
            overflow: hidden;
        }
        /* Adjust the iframe */
        iframe {
            border: 0;
        }

        .accordion-button {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            font-weight: bold;
            background-color: #fff;
            border-radius: 10px;
            border: 1px solid #ddd;
            color: #333;
            position: relative;
        }
        .accordion-button::after {
            content: '';
            font-size: 1.5rem;
            color: #007bff;
            margin-left: auto;
            background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="blue" class="bi bi-plus" viewBox="0 0 16 16"%3E%3Cpath d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/%3E%3C/svg%3E');
            width: 24px;
            height: 24px;
            background-size: cover;
            transition: transform 0.2s ease-in-out;
        }
        .accordion-button.collapsed::after {
            transform: rotate(0deg);
        }
        .accordion-button:not(.collapsed)::after {
            transform: rotate(45deg);
        }
        .accordion-item {
            border: none;
            margin-bottom: 10px;
        }
        .accordion-body {
            border-top: 1px solid #ddd;
            padding: 1rem;
            background-color: #f8f9fa;
            border-radius: 0 0 10px 10px;
        }

         .doctor-container {
            position: relative;
            overflow: hidden;
            width: 100%; /* Set container width */
            height: 300px; /* Set a fixed height for uniform size */
        }

        .doctor-info {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.9);
            transition: top 0.3s ease-in-out;
            padding: 20px;
            text-align: center;
        }

        .doctor-container:hover .doctor-info {
            top: 0;
        }

        .doctor-container img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensure images cover the entire container */
        }

        .doctor-name {
            font-size: 18px;
            font-weight: bold;
        }

        .doctor-speciality {
            font-size: 14px;
            color: #777;
        }

      

        .card {
            background-color: #d1eaff;

    max-width: 400px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #0d6efd;
    margin: 0 3px;
    opacity: 0.5;
}

.carousel-indicators .active {
    background-color: #0d6efd;
    opacity: 1;
}


 .accordion-button::after {
      display: none;
    }
    .icon-btn {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .icon-btn img {
      width: 100%;
      height: auto;
    }

    .social-icon {
  width: 24px;  /* Adjust this value to make icons smaller or larger */
  height: auto; /* Keeps the aspect ratio intact */
}


  /* Scroll-to-Top Button */
        .scroll-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background-color: #e67e22; /* Matches the primary color */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: opacity 0.3s ease-in-out;
            z-index: 1000; /* Ensures the button is above other content */
        }

        .scroll-to-top img {
            width: 24px;
            height: 24px;
        }

        .scroll-to-top:hover {
            background-color: #0056b3; /* Darker shade of primary color */
        }

        .scroll-to-top.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* Background image for mobile view */
@media (max-width: 767.98px) {
  .home-bg {
    background-image: url('assets/hero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.d-none {
  display: none;
}

.d-md-block {
  display: block;
}

#home {
  width: 100%;
  height: 100vh; /* Full height of the viewport */
  padding: 0; /* Remove any padding */
  margin: 0; /* Remove any margin */
  overflow: hidden; /* Prevent overflow */
}

.carousel-inner {
  width: 100%;
  height: 100%;
}

.carousel-item {
  height: 100vh; /* Make each carousel item fill the viewport height */
  position: relative; /* For overlay positioning */
}

.img-cover {
  height: 100%;
  width: 100%;
  object-fit: cover; /* Ensure the image covers the entire section */
}




/* Ensure the captions are centered */
.carousel-caption {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  text-align: center;
}

.carousel-caption h1, .carousel-caption p {
  color: white;
}

/* Buttons styling */
.carousel-caption .btn {
  margin-top: 10px;
  margin-right: 10px;
}




/* Ensure Text is White */
.carousel-caption h1,
.carousel-caption p,
.carousel-caption a {
  color: #ffffff !important; /* Force text to be white */
}

/* Move Carousel Indicators to the Right */
.carousel-indicators.carousel-indicators-custom {
  position: absolute;
  top: 50%;
  left: 69%; /* Position on the right side */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

.carousel-indicators.carousel-indicators-custom button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: blue; /* Blue color for indicators */
  margin: 5px 0;
  border: none;
  opacity: 1; /* Ensure visibility */
}

.carousel-indicators.carousel-indicators-custom .active {
  background-color: blue; /* Active indicator is blue */
}

 h2 {
            color: #1a73e8;
        }

        .speciality-container {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .speciality {
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
            transition: transform 0.3s ease;
            width: 250px;
            overflow: hidden;
        }

        .speciality:hover {
            transform: scale(1.05);
        }

        .speciality img {
            width: 100%;
            transition: transform 0.3s ease;
        }

        .speciality:hover img {
            transform: scale(1.1);
        }

        .speciality h3 {
            margin-top: 15px;
            position: relative;
            overflow: hidden;
        }

        .speciality h3::after {
            content: '';
            position: absolute;
            height: 2px;
            width: 100%;
            background-color: #1a73e8;
            bottom: 0;
            left: 100%;
            transition: left 0.3s ease;
        }

        .speciality:hover h3::after {
            left: 0;
        }

        .speciality .icon {
            margin-top: 10px;
            font-size: 20px;
            transition: color 0.3s ease;
        }

        .speciality:hover .icon {
            color: orange;
        }


   .gallery-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

        .img-comp-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 350px;
        }

        .img-comp-container {
            position: relative;
            height: 300px;
            width: 100%;
            overflow: hidden;
        }

        .img-comp-img {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .img-comp-img img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .img-comp-slider {
            position: absolute;
            z-index: 9;
            cursor: ew-resize;
            width: 2px;
            background-color: #fff;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .img-comp-slider::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #fff;
            border: 2px solid #2196F3;
            border-radius: 50%;
            z-index: 10;
        }

        .img-comp-slider::after {
            content: '⇠⇢';
            position: absolute;
            color: #2196F3;
            font-size: 18px;
            z-index: 11;
            top: -25px;
            width: 100%;
            text-align: center;
        }

        .card-body {
            padding: 15px;
            text-align: center;
        }

        .card-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .card-text {
            font-size: 16px;
            color: #555;
        }

        .img-comp-container {
    position: relative;
}

.img-comp-img {
    position: absolute; /* Ensures both images are positioned on top of each other */
    top: 0;
    left: 0;
    width: 100%; /* Make sure images are fully covering the container */
    height: 100%;
}

.img-comp-overlay {
    z-index: 1; /* Place the After image above the Before image */
}

.label {
    position: absolute;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 14px;
    display: none;
    z-index: 2; /* Ensure labels are above both images */
}

.label-before {
    top: 10px;
    right: 10px;
}

.label-after {
    bottom: 10px;
    left: 10px;
}

.img-comp-container:hover .label-before,
.img-comp-container:hover .label-after {
    display: block;
}

 /* Custom styles */
        .number-box {
            text-align: center;
            padding: 20px;
            border-radius: 10px;
            background-color: #f8f9fa;
        }
        .number {
            font-size: 2.5rem;
            font-weight: bold;
            color: #6c757d;
        }
        .description {
            color: #6c757d;
        }

        
        .carousel {
  position: relative;
}

.carousel-indicators {
  position: absolute;
  bottom: -25px; /* Adjust this value to position the indicators directly below the slider */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  list-style: none;
}

.carousel-indicators li {
  background-color: #007bff; /* Adjust the color as needed */
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

.carousel-indicators .active {
  background-color: #0056b3; /* Slightly darker color for the active indicator */
}

.carousel-inner img {
  border-radius: 14px;
}

.carousel-item {
  transition: transform 0.5s ease-in-out;
}

#imageSliderContainer {
    width: 400px; /* Set container width */
    height: 300px; /* Set container height */
    border-radius: 20px; /* Apply border radius */
    overflow: hidden; /* Ensure images stay within the border radius */
    margin: 0 auto; /* Center the slider horizontally (optional) */
}

#imageSliderContainer .carousel-inner img {
    width: 100%;
    height: 100%; /* Make images fill the container */
    object-fit: cover; /* Ensure images cover the container area */
}

.videocontainer {
  position: relative;
  width: 100%;
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.videocontainer video {
  width: 100%;
  border-radius: 20px;
}

/* Ensure the carousel caption text and buttons are centered for both mobile and desktop */
.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 15px;
}

/* Center the Book Appointment and Enquiry buttons */
.carousel-caption .btn {
  display: inline-block;
  margin: 10px 5px; /* Ensure proper space between buttons */
  font-size: 1rem;
  padding: 12px 24px;
}

.carousel-caption h1 {
  font-size: 2.5rem; /* Slightly larger for desktop */
  color: #fff;
  margin-bottom: 20px;
}

.carousel-caption p {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 30px;
}

/* Style the enquiry section inside the caption */
.carousel-caption .enquiry {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px; /* Space above the enquiry section */
}

.carousel-caption .enquiry img {
  width: 50px;
  height: 50px;
}

.carousel-caption .enquiry div {
  margin-left: 15px;
}

.carousel-caption .enquiry p {
  margin: 0;
  color: white;
}

/* Mobile adjustments */
@media (max-width: 576px) {
  .carousel-caption h1 {
    font-size: 1.8rem;
  }
  
  .carousel-caption p {
    font-size: 1rem;
  }

  .carousel-caption a.btn {
    font-size: 0.9rem;
    padding: 10px 20px;
  }
}

/* Make sure images are properly sized */
.img-cover {
  object-fit: cover;
  height: 100vh; /* Ensure it takes full screen height */
  width: 100%;
}

/* Overlay for better readability */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}


.speciality-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
}

.speciality {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s ease;
  width: 250px; /* Fixed width */
  overflow: hidden;
  margin: 10px; /* Add margin to ensure spacing between items */
}

.speciality:hover {
  transform: scale(1.05);
}

.speciality img {
  width: 100%;
  transition: transform 0.3s ease;
}

.speciality:hover img {
  transform: scale(1.1);
}

.speciality h3 {
  margin-top: 15px;
  position: relative;
  overflow: hidden;
}

.speciality h3::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: #1a73e8;
  bottom: 0;
  left: 100%;
  transition: left 0.3s ease;
}

.speciality:hover h3::after {
  left: 0;
}

.speciality .icon {
  margin-top: 10px;
  font-size: 20px;
  transition: color 0.3s ease;
}

.speciality:hover .icon {
  color: orange;
}

@media (max-width: 768px) {
  .speciality-container {
    justify-content: space-around; /* Center items and allow wrapping */
  }

  .speciality {
    width: 45%; /* Adjust to fit more items per row on tablets */
  }
}

@media (max-width: 480px) {
  .speciality {
    width: 100%; /* Full width for each item on mobile */
  }
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
}

.carousel-item img {
  object-fit: cover;
}

.carousel-indicators-custom button {
  background-color: #000; /* Custom indicator color */
}

.carousel-caption h1 {
  font-size: 2rem;
  color: #fff; /* Adjust text color */
}

.carousel-caption p {
  font-size: 1rem;
  color: #fff; /* Adjust text color */
}

/* Flex container styles */
.button-container {
  display: flex;
  flex-direction: column; /* Stack vertically by default */
  align-items: center;
}

.enquiry-container {
  display: flex;
  flex-direction: column; /* Stack vertically by default */
  align-items: center;
  margin-top: 20px;
}

.enquiry-img {
  width: 50px;
  height: 50px;
}

@media (min-width: 768px) {
  .button-container {
    flex-direction: row; /* Align horizontally on larger screens */
    justify-content: center;
  }

  .enquiry-container {
    flex-direction: row; /* Align horizontally on larger screens */
    margin-top: 0;
  }

  .enquiry-container p {
    margin-left: 20px;
  }
}
/* Center the entire carousel content */
.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.carousel-item img {
  object-fit: cover;
}

/* Custom carousel indicator color */
.carousel-indicators-custom button {
  background-color: #000;
}

.carousel-caption h1 {
  font-size: 2rem;
  color: #fff;
}

.carousel-caption p {
  font-size: 1rem;
  color: #fff;
}

/* Button container styles - stacked vertically on mobile */
.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Enquiry container */
.enquiry-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  gap: 10px;
}

.enquiry-img {
  width: 50px;
  height: 50px;
}

/* Responsive behavior */
@media (min-width: 768px) {
  /* Align buttons horizontally on larger screens */
  .button-container {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }

  /* Align enquiry section horizontally on larger screens */
  .enquiry-container {
    flex-direction: row;
    margin-top: 0;
    gap: 10px;
  }

  .enquiry-container p {
    margin-left: 20px;
  }
}