/*body {*/
/*    overflow: visible !important;*/
/*}*/


/*.hero-text {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    color: black;*/
/*    text-align: center;*/
/*    font-size: 3rem;*/
/*    font-family: 'Times New Roman', Times, serif;*/
    /* large and bold */
/*    border: 4px solid black;*/
    /* thick white border */
/*    padding: 50px 50px;*/
    /* spacious padding inside box */
    /*background: rgba(0, 0, 0, 0.2);*/
    /* optional soft dark background */
/*    max-width: 80%;*/
    /* responsive width */
/*    line-height: 1.3;*/
/*}*/

/*@media (max-width: 768px) {*/
/*    .hero-text {*/
/*        font-size: 1.3rem;*/
/*        border-width: 4px;*/
/*    }*/
/*}*//* Hero Section Styles */
section.hero {
    /* padding: 40px 20px; */
    text-align: left;
}

/* About Section Styles */
section.about {
    text-align: left;
    /* padding: 40px 20px; */
}

/* Courses Section Styles */
section.courses {
    text-align: left;
    /* padding: 40px 20px; */
}

/* Faculty Section Styles */
section.faculty {
    text-align: left;
    /* padding: 40px 20px; */
}

/* Facilities Section Styles */
section.facilities {
    text-align: left;
    /* padding: 40px 20px; */
}

/* Contact Section Styles */
section.contact {
    text-align: left;
    /* padding: 40px 20px; */
}



.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}


/*body {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

.main-content {
    flex: 1; /* Push footer to bottom */
}
/* FORCE NEW HEADER TO BE STICKY ON ALL DEVICES */


/* FIX MOBILE ISSUES WHERE ABSOLUTE MENU BREAKS STICKY BEHAVIOR */
@media (max-width: 768px) {
   
    /* Push content down so it doesn't hide under fixed header */
    body {
        padding-top: 70px !important;
    }
}

section {
    padding: 0 40px;
}

@media (max-width: 768px) {
    section {
        padding: 0 20px;  /* smaller gap on mobile */
    }
}

.image-row{
display:flex;
flex-wrap:nowrap;
}


/*.slide {*/
/*  min-width: 100%;*/
/*  height: 100%;*/
/*}*/

/*.slide img {
 width: 100%;
  height: 100%;
  object-fit: cover;   IMPORTANT: fixes fast shift issue 
  display: block;
}*/

li {
font-weight: normal;
color: #666;
font-size: inherit;
}

.bg-section{
min-height: 220px;
background-image:url("img/baby-rejoice.jpg");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
padding: 20px 10px; /* Added padding for mobile breathing room */
color: white;       /* Ensures heading/meta are white */
}


/* 3. Meta Data (Date/Author) Styling */
.meta-data {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}



#footer .social-icons{
display:flex;
gap:6px;
flex-wrap:nowrap;
}
    
.share-container {
  display: flex;
  flex-wrap: wrap; /* This allows items to move to the next line on mobile */
  align-items: center;
  justify-content: center; /* Centers everything on mobile */
  gap: 10px;
  padding: 10px;
  width: 100%;
}

/* On Desktop/Tablets (screens wider than 600px) */
@media (min-width: 600px) {
  .share-container {
    justify-content: center; /* keep centered on desktop too */
  }
}

/* Ensure the text doesn't take up 100% width on mobile */
.share-label {
  margin: 0;
  white-space: nowrap; /* Keeps "Share this post:" on one line */
}    
.share-icons {
  display: flex;
  align-items:center;
  gap: 10px;             /* This adds space between the icons themselves */
}

.share-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 3px;
    text-decoration: none;
}

.white-text {
color: white;
}

.top-strip{
background:#007bff;
color:white;
text-align:center;
padding:8px;
font-weight:bold;
}

.top-strip a{
color:white;
text-decoration:none;
}

.appointment-bar {
    display: flex !important;
    justify-content: space-between !important; /* Pushes to opposite ends */
    align-items: center !important;
    width: 100% !important;
    padding: 10px 40px !important;
    box-sizing: border-box !important; /* Prevents horizontal scroll */
    background-color: #f5c2c1; /* Crayon pink */
    color: black;
    font-weight: bold;
}

.appointment-bar a {
    color: black; /* Blue for the phone number */
    text-decoration: none;
}


/* Fix for mobile so they don't overlap */
@media (max-width: 768px) {
    .appointment-bar {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
        padding: 15px !important;
    }
}

.meta-data {
        flex-direction: column;
        gap: 5px;
    }
    
    /* Footer & Helpers */
#footer .social-icons {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}

.blog-meta{
list-style:none;
padding:0;
margin:10px 0;
display:flex;
flex-wrap:wrap;        /* allows items to move to next line */
justify-content:center; /* keeps everything centered */
gap:12px 20px;         /* vertical and horizontal spacing */
}

.blog-meta li{
font-size:18px;
font-family:bold;
opacity:0.9;
display:flex;
align-items:center;
gap:6px;
}

.info {
    font-family:bold;
}

.bg-section-1{
min-height: 220px;
background-image:url("img/operation-rejoice.jpg");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
padding: 20px 10px; /* Added padding for mobile breathing room */
color: white;       /* Ensures heading/meta are white */
}

.appointment-bar-1 {
    display: flex !important;
    justify-content: space-between !important; /* Pushes to opposite ends */
    align-items: center !important;
    width: 100% !important;
    padding: 10px 40px !important;
    box-sizing: border-box !important; /* Prevents horizontal scroll */
    background-color: #245245; /* Crayon blue */
    color: white;
    font-weight: bold;
}

.appointment-bar-1 a {
    color: white; /* Blue for the phone number */
    text-decoration: none;
}

/* Fix for mobile so they don't overlap */
@media (max-width: 768px) {
    .appointment-bar-1 {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
        padding: 15px !important;
    }
}

.header-nav-top .nav {
  display: flex;
  flex-wrap: nowrap;   /* prevents breaking into next line */
  align-items: center;
  gap: 15px;           /* spacing between items */
}

.header-nav-top .nav-item {
  white-space: nowrap; /* keeps text in one line */
}

@media (max-width: 768px) {
  .header-top .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-nav-top .nav {
    overflow-x: auto;   /* allows scroll instead of breaking */
  }
}

@media (max-width: 768px) {
  .header-top .container,
  .header-top .header-row {
    height: auto !important;
  }
}

.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 20px auto;
}

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

/* Show 3 doctors */
.slide {
  min-width: calc(100% / 3);  /* desktop = 3 slides */
  padding: 10px;
  box-sizing: border-box;
}

.slide img {
  height: 400px;   /* match your image height */
  object-fit: cover; /* shows full image */
  /*border-radius: 10px;*/
}

.slide-caption {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
}
/* Buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

.carousel-btn.left {
  left: 10px;
}

.carousel-btn.right {
  right: 10px;
}

@media (max-width: 768px) {
  .slide {
    min-width: 100%; /* 1 slide */ 
  }
}

.doctor-card {
  background: white;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

h5{
    text-align: center;
}

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-box {
  display: flex;
  width: 700px;
  max-width: 95%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  animation: fadeIn 0.4s ease-in-out;
}

/* LEFT SIDE */
.popup-left {
  width: 50%;
  background: #e6f2ff;
  padding: 25px;
}

.popup-left h2 {
  color: #007bff;
  margin-bottom: 10px;
}

.popup-left ul {
  padding-left: 15px;
}

.popup-left li {
  margin-bottom: 8px;
}

/* RIGHT SIDE */
.popup-right {
  width: 50%;
  padding: 25px;
  text-align: center;
}

.popup-right h3 {
  margin-bottom: 15px;
}

.popup-right input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.popup-right button {
  width: 100%;
  padding: 12px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}

.popup-right button:hover {
  background: #218838;
}

/* ACTION BUTTONS */
.quick-actions {
  margin-top: 10px;
}

.call-btn, .whatsapp-btn {
  display: inline-block;
  margin: 5px;
  padding: 8px 12px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
}

.call-btn {
  background: #007bff;
}

.whatsapp-btn {
  background: #25D366;
}

/* CLOSE BUTTON */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 25px;
  cursor: pointer;
}

/* ANIMATION */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* MOBILE */
@media (max-width: 768px) {
  .popup-box {
    flex-direction: column;
  }

  .popup-left, .popup-right {
    width: 100%;
  }
}

/* Force the navigation to stay on one line */
#header .header-nav-main nav > ul {
    flex-wrap: nowrap !important;
}

/* Reduce the horizontal space between menu items */
#header .header-nav-main nav > ul > li > a {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 13px; /* Slightly reducing font size helps if the menu is very crowded */
    white-space: nowrap;
}

/* Ensure the dropdown arrow doesn't push text too far */
#header .header-nav-main nav > ul > li.dropdown > a::after {
    margin-left: 4px !important;
}