/*
 * Custom CSS for Femina Health Design
 */

/* 1. Define Custom Colors */
/* PRIMARY PINK/MAGENTA: #da1c5c (Main Accent, Buttons, Text Accents) */
.femina-gold { /* Updated to use the new pink/magenta for backgrounds */
    background-color: #da1c5c; 
}
/* The text color for the logo icon and other accents */
.femina-text-gold { /* Updated to use the new pink/magenta for text color */
    color: #da1c5c;
}

/* 2. Hero Section Background */
.hero-background {
    /* Set the background image based on the design */
    background-image: url('https://www.tenderpalmivf.com/wp-content/uploads/2025/11/Best-IVF-Center-in-Lucknow-India.webp'); 
    background-size: cover;
    background-position: 50% 50%; /* Adjust to center the key elements (baby's foot) */
    background-repeat: no-repeat;
    position: relative;
    min-height: 700px;
}

/* Overlay element */
.hero-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: black; /* or white, depending on your design */
  opacity: 0; /* default: no overlay on desktop */
 
}

/* 📱 Mobile only — apply 30% opacity */
@media (max-width: 768px) {
  .hero-background::after {
    opacity: 0.6;
  }
}

/* 3. Hero Overlay (Subtle Gradient/Darkening) */
.hero-overlay {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Subtle overlay to enhance text readability and match the softness of the original */
    z-index: 1;
}

/* 4. Custom Script Font Styling (Hero) */
.custom-font-script {
    /* Uses Playfair Display (linked in HTML) to mimic the script style */
    font-family: 'Playfair Display', Georgia, serif; 
    font-size: 4rem; /* Slightly larger for impact */
    font-weight: 400; /* Medium weight for legibility */
    line-height: 1; 
    font-style: italic; 
    color: #fff;
    /* Add a subtle text shadow to make it pop against the background */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); 
}
/* 5. Main Hero Heading Style */
.hero-heading {
    font-size: 3rem; /* Refined size for the main heading text */
    font-weight: 300;
    line-height: 1.2;
}

/* 6. Subtle Shadow for Header/Nav */
.nav-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 7. Primary Nav Link Hover/Active State */
.nav-link-hover {
    /* Base link style: transparent border */
    border-bottom: 2px solid transparent; 
    transition: border-color 0.15s ease-in-out;
}

.nav-link-hover:hover {
    /* Hover state: apply the new pink color */
    border-bottom-color: #da1c5c; 
}

.nav-link-active {
    /* Active state for the parent link when the dropdown is open */
    border-bottom-color: #da1c5c;
}

/* 8. Dropdown Menu Item Styling */
/* Background color for the dropdown menu when opened */
.dropdown-menu-bg {
    background-color: #fff;
}

/* Hover state for individual dropdown items */
.dropdown-item-hover:hover {
    background-color: #f7ede3; /* A lighter shade matching your existing theme */
    color: #374151; /* Darker gray text for better contrast on hover */
}

/* 9. Dropdown Divider Line */
.dropdown-item-divider {
    border-bottom: 1px solid #e5e7eb; /* Light gray line at the bottom */
}

/* 10. Mobile Menu Drawer Styles */
.mobile-menu-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%; /* Takes 80% of the screen width */
    max-width: 300px; /* Optional: cap maximum width on tablets */
    height: 100vh;
    transform: translateX(100%); /* Start completely off-screen to the right */
    transition: transform 0.3s ease-in-out;
    z-index: 50; /* Above the navigation bar */
    overflow-y: auto; /* Scrollable if content is too long */
}

.mobile-menu-drawer.open {
    transform: translateX(0); /* Slide into view */
}

/* 11. Overlay for Mobile Menu */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 40;
    display: none; /* Hidden by default, shown by JS */
}

/* 12. General Font and Icon Colors */
.femina-text-gold {
    color: #da1c5c; /* Primary pink/magenta color for text/accents */
}
.card-icon-color {
    color: #13670b; /* Secondary forest green color for icons */
}

.new-text-green {
        color: #13670b; /* for Headings except h1 */

}

/* 13. Custom Script Font Styling for Body Sections */
.custom-font-script {
    font-family: 'Playfair Display', Georgia, serif; 
    font-style: italic; 
    font-weight: 400;
}
.custom-font-script.text-5xl {
    font-size: 3.5rem; /* Standard size for headings */
    color: #2c2c2c; /* Dark text color */
    line-height: 1;
}

/* 14. Custom Shape for the 'Why Choose Us' image */
.custom-shape-container {
    background-color: #f7ede3; /* A soft, light peach/pink background (kept) */
    position: relative;
    border-radius: 40% 0 0 40%; /* Creates the rounded corner effect */
    overflow: hidden; 
    height: 100%;
}

/* 15. Custom Blob Shape */
.custom-blob-shape {
    background-color: #f7ede3; /* Soft peach/pink background (kept) */
    position: relative;
    border-radius: 40% 40% 0 40%; /* Creates the specific blob-like shape */
    overflow: hidden;
    height: 100%;
}

/* 16. Decorative leaf (placeholder) */
.decorative-leaf {
    position: absolute;
    bottom: -20px; /* Adjust position */
    right: -20px;  /* Adjust position */
    width: 80px;   /* Size of the leaf */
    height: 80px;  /* Size of the leaf */
    background-image: url('leaf-icon.svg'); /* Replace with actual path to your leaf SVG */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
    z-index: 1;
}

/* 17. Custom Checkmark color */
.femina-checkmark {
    color: #da1c5c; /* Use the primary pink/magenta color for checkmarks */
}


/* 18. Icon Animation */
@keyframes icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px); /* Moves the icon up 5px in the middle of the animation */
    }
}

.card-icon-animated:hover .card-icon-color {
    animation: icon-bounce 0.4s ease-in-out; /* Apply bounce animation */
}

/* 19. TESTIMONIAL CAROUSEL MECHANICS */
.carousel-hide-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.carousel-hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.carousel-track {
    display: flex;
    /* 9 cards total for the seamless loop simulation */
    width: 900%; 
    /* 9 cards * 3s = 27s total cycle time (MOBILE default) */
    animation: scroll-mobile 27s linear infinite; 
    transition: transform 0.5s ease-in-out; /* Smooth transition for keyframe changes */
}

/* MOBILE: Scroll 1 card width at a time. The loop is 9 cards total. */
.carousel-track > div {
    width: calc(100% / 9); /* Each card is 1/9th of the total track width */
    flex-shrink: 0;
}

/* MOBILE Keyframes: Scrolls through 9 individual cards (3s each) */
@keyframes scroll-mobile {
    0%, 10.11% { transform: translateX(0); }
    11.11%, 21.22% { transform: translateX(calc(-100% / 9 * 1)); } 
    22.22%, 32.33% { transform: translateX(calc(-100% / 9 * 2)); } 
    33.33%, 43.44% { transform: translateX(calc(-100% / 9 * 3)); } 
    44.44%, 54.55% { transform: translateX(calc(-100% / 9 * 4)); } 
    55.55%, 65.66% { transform: translateX(calc(-100% / 9 * 5)); } 
    66.66%, 76.77% { transform: translateX(calc(-100% / 9 * 6)); } 
    77.77%, 87.88% { transform: translateX(calc(-100% / 9 * 7)); } 
    88.88%, 99.99% { transform: translateX(calc(-100% / 9 * 8)); } 
    100% { transform: translateX(calc(-100% / 9 * 9)); } /* Jump back */
}


/* DESKTOP (md breakpoint and up): Scroll 3 card widths at a time. */
@media (min-width: 768px) {
    .carousel-track {
        /* Only need 3 sets of cards * 100% = 300% */
        width: 300%; 
        /* 3 desktop slides * 3s = 9s total cycle time */
        animation: scroll-desktop 9s linear infinite; 
    }

    /* DESKTOP Keyframes: Scrolls 1/3 of the track (which is 3 cards) */
    @keyframes scroll-desktop {
        0%, 32.33% { transform: translateX(0); } /* Display Slide 1 (3s) */
        33.33%, 65.66% { transform: translateX(calc(-100% / 3 * 1)); } /* Slide 2 */
        66.66%, 99.99% { transform: translateX(calc(-100% / 3 * 2)); } /* Slide 3 */
        100% { transform: translateX(calc(-100% / 3 * 3)); } /* Jump back */
    }
}


/* 20. DOCTOR PAGE SPECIFIC STYLES */

/* Subtle Shadow and Hover for Doctor Cards */
.doctor-card-shadow {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease;
}

.doctor-card-shadow:hover {
    transform: translateY(-5px);
}

/* NEW: Keyframe for entry animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* NEW: Class to apply the entry animation */
.animate-fadeInUp {
    animation-name: fadeInUp;
    animation-duration: 0.6s;
    animation-fill-mode: both; /* Keeps the final state (opacity 1, translateY 0) */
    animation-timing-function: ease-out;
}

/* 21. TESTIMONIAL PAGE SPECIFIC STYLES */
.testimonial-card-bg {
    background-color: #fcfcfc; /* Light background for cards */
}

.quote-icon-color {
    color: #da1c5c; /* Uses the new primary pink/magenta color for the large quote icon */
}

/* Footer link hover (from blog_detail.html for consistency) */
.footer-link-hover:hover {
    color: #da1c5c;
    transition: cQolor 0.2s;
}

/* Disease Detail Page Styling (works with Tailwind CDN) */
.disease-article h1 {
  font-size: 2rem;
  line-height: 1.25;
  margin: 1.5rem 0 1rem;
  font-weight: 700;
  color: #13670b;
}

.disease-article h2 {
  font-size: 1.5rem;
  line-height: 1.35;
  margin: 1.25rem 0 0.75rem;
  font-weight: 700;
  color: #13670b;
}

.disease-article h3 {
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 1rem 0 0.5rem;
  font-weight: 600;
  color: #13670b;
}

.disease-article p {
  margin: 1rem 0;
  line-height: 1.75;
}

.disease-article ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 1rem 0;
}

.disease-article ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 1rem 0;
}

.disease-article li {
  margin: 0.35rem 0;
}

.disease-article a {
  color: #0e82e8; /* emerald-600 */
}

.disease-article blockquote {
  border-left: 4px solid #d1d5db; /* gray-300 */
  padding-left: 1rem;
  color: #4b5563; /* gray-600 */
  font-style: italic;
  margin: 1.5rem 0;
}

.disease-article img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

.disease-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.disease-article th,
.disease-article td {
  border: 1px solid #e5e7eb; /* gray-200 */
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    gap: 0.5rem;
  }

  .pagination a,
  .pagination span {
    padding: 0.75rem 1.5rem;
    background-color: #da1c5c;
    color: white;
    font-weight: bold;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    display: inline-flex;
  }

  .pagination a:hover {
    background-color: #13670b;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }

  .pagination .current {
    background-color: #13670b;
  }



<!-- Tailwind Breadcrumb Styling Wrapper -->

/* Strong, specific selectors to target Rank Math + your .breadcrumbs wrapper */
.page-title .breadcrumbs .rank-math-breadcrumb a,
.page-title .breadcrumbs a,
.rank-math-breadcrumb a {
  color: #4b5563 !important;              /* base text-gray-600 */
  transition: color 0.2s ease-in-out !important;
}

/* Hover state */
.page-title .breadcrumbs .rank-math-breadcrumb a:hover,
.page-title .breadcrumbs a:hover,
.rank-math-breadcrumb a:hover {
  color: #da1c5c !important;              /* your brand pink */
}

/* Ensure the final breadcrumb (current page) stays bold/dark */
.page-title .breadcrumbs .rank-math-breadcrumb .last,
.page-title .breadcrumbs .rank-math-breadcrumb li:last-child,
.page-title .breadcrumbs li:last-child {
  color: #111827 !important;
  font-weight: 500;
}


/* Hide Rank Math’s default ›› characters */
.rank-math-breadcrumb .separator {
  font-size: 0;
  line-height: 0;
}

/* Wrapper for custom arrow separator */
.rank-math-breadcrumb span.separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px;
  color: #9ca3af; /* Tailwind text-gray-400 */
  vertical-align: middle;
}

/* Custom single arrow separator (centered visually) */
.rank-math-breadcrumb span.separator::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-top: 1px; /* tweak for perfect vertical alignment */
}

/* Breadcrumb links */
.rank-math-breadcrumb a {
  color: #4b5563; /* text-gray-600 */
  text-decoration: none;
  transition: color 0.2s ease;
}

.rank-math-breadcrumb a:hover {
  color: #da1c5c; /* brand pink */
}

/* Current page (last item) */
.rank-math-breadcrumb span.last {
  color: #111827; /* text-gray-900 */
  font-weight: 600;
}
/* Hide breadcrumb on smaller screens */
@media (max-width: 768px) {
  .rank-math-breadcrumb {
    display: none !important;
  }
}