/* ============================================================
   FEP Healthcare — Responsive Stylesheet  (FULL REWRITE)
   Breakpoints:
     ≥1400px   Large desktop
     1200–1399 Standard desktop
     992–1199  Laptop
     768–991   Tablet
     576–767   Phablet / mobile landscape
     ≤575      Small mobile
     ≤360      Tiny phones (Galaxy S, iPhone SE)
   ============================================================ */

/* ============================================================
   0 — GLOBAL BASE RESETS (all sizes)
   ============================================================ */

/* Prevent any element from causing horizontal scroll */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

img, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Remove row hover transform (was lifting entire rows) */
.row.g-4:hover,
.row.g-4 .col-lg-4:hover,
.row.g-4 .col-md-6:hover {
    transform: none !important;
}

/* ============================================================
   1 — HERO CONTENT WRAPPER  (fix: was display:none on mobile)
   The .hero-content-wrapper holds all three slide contents.
   .hero-content items use position:absolute so they stack.
   ============================================================ */

.hero-content-wrapper {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    pointer-events: none;       /* let clicks pass through to dots */
}

.hero-content-wrapper > * {
    pointer-events: auto;
}

/* Each slide's content block */
.hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0.9s ease;
    /* padding-top: 80px;          clear fixed navbar */
}

.hero-content.active {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   2 — NAVBAR  (font size was 1.3rem — too large; logo heights)
   ============================================================ */

/* Bring nav link font size in line with design */
.navbar-nav .nav-link {
    font-size: 0.92rem !important;
}

/* ── Large desktop 1400px+ ── */
@media (min-width: 1400px) {

    .container {
        max-width: 1320px;
    }

    .navbar-brand img {
        height: 96px;
        width: auto;
    }

    #mainNav.scrolled .navbar-brand img {
        height: 80px;
        width: auto;
    }

    .footer-brand .footer-logo {
        height: 100px;
        width: auto;
    }

    .preloader-logo {
        width: 96px;
        height: 96px;
    }

    .hero-title {
        font-size: 4.4rem;
    }
}

/* ── Standard desktop 1200–1399px ── */
@media (min-width: 1200px) and (max-width: 1399px) {

    .navbar-brand img {
        height: 88px;
        width: auto;
    }

    #mainNav.scrolled .navbar-brand img {
        height: 76px;
        width: auto;
    }

    .footer-brand .footer-logo {
        height: 88px;
        width: auto;
    }

    .preloader-logo {
        width: 88px;
        height: 88px;
    }

    .section-pad {
        padding: 90px 0;
    }

    .hero-title {
        font-size: 3.8rem;
    }

    .about-image-collage {
        height: 480px;
    }

    .service-flip-card {
        height: 360px;
    }
}

/* ── Laptop 992–1199px ── */
@media (min-width: 992px) and (max-width: 1199px) {

    .navbar-brand img {
        height: 76px;
        width: auto;
    }

    #mainNav.scrolled .navbar-brand img {
        height: 68px;
        width: auto;
    }

    .footer-brand .footer-logo {
        height: 76px;
        width: auto;
    }

    .preloader-logo {
        width: 80px;
        height: 80px;
    }

    .section-pad {
        padding: 80px 0;
    }

    .hero-title {
        font-size: 3.2rem;
    }

    .about-image-collage {
        height: 440px;
    }

    .collage-img-main {
        width: 70%;
        height: 72%;
    }

    .collage-img-secondary {
        width: 50%;
        height: 50%;
    }

    .service-flip-card {
        height: 340px;
    }

    .appt-form-wrap {
        padding: 40px 36px;
    }

    .contact-form-wrap {
        padding: 40px 36px;
    }
}

/* ============================================================
   3 — TABLET  768–991px
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {

    /* Logo */
    .navbar-brand img {
        height: 68px;
        width: auto;
        max-width: 180px;
        object-fit: contain;
        object-position: left center;
    }

    #mainNav.scrolled .navbar-brand img {
        height: 60px;
        width: auto;
        max-width: 180px;
    }

    .footer-brand .footer-logo {
        height: 72px;
        width: auto;
        display: block;
    }

    .preloader-logo {
        width: 76px;
        height: 76px;
    }
}

/* ── Tablet and below: shared ── */
@media (max-width: 991px) {

    /* ── Section spacing ── */
    .section-pad {
        padding: 70px 0;
    }

    /* ── Typography ── */
    h1 { font-size: 2.4rem; }
    h2 { font-size: 2rem; }

    /* ── Navbar collapse state ── */
    #mainNav {
        background: rgba(26, 35, 64, 0.97) !important;
        backdrop-filter: blur(20px);
        padding: 14px 0;
    }

    #mainNav.scrolled {
        background: rgba(255, 255, 255, 0.97) !important;
    }

    .navbar-nav {
        padding: 16px 0 12px;
        gap: 2px;
    }

    .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 11px 16px !important;
        font-size: 0.95rem !important;
    }

    #mainNav.scrolled .navbar-nav .nav-link {
        color: var(--text-body) !important;
    }

    .navbar-nav .nav-link::after {
        display: none;
    }

    /* ── Dropdown — static/inline inside collapsed navbar ── */
    .dropdown-menu {
        position: static !important;
        float: none;
        border: none !important;
        background: rgba(255, 255, 255, 0.07) !important;
        box-shadow: none !important;
        padding: 4px 0 8px 16px;
        margin: 0 !important;
        border-radius: 0 !important;
        display: block !important;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.35s ease, opacity 0.25s ease;
        pointer-events: none;
    }

    .services-dropdown.show > .dropdown-menu,
    .dropdown-menu.show {
        max-height: 500px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #mainNav.scrolled .dropdown-menu {
        background: rgba(240, 244, 248, 0.95) !important;
    }

    .dropdown-item {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 0.88rem;
        padding: 9px 16px;
        border-radius: 6px;
    }

    .dropdown-item:hover {
        background: rgba(55,178,211,0.15) !important;
        color: var(--primary) !important;
    }

    #mainNav.scrolled .dropdown-item {
        color: var(--text-body) !important;
    }

    .services-dropdown.show .dropdown-icon {
        transform: rotate(180deg);
    }

    .nav-cta {
        margin-top: 10px;
        display: inline-flex !important;
        align-self: flex-start;
    }

    /* ── Hero — tablet navbar ~96px tall ── */
    .hero-section {
        min-height: 600px;
        height: auto;
    }

    .hero-content {
        padding-top: 96px;
        padding-bottom: 60px;
        align-items: flex-start;
    }

    .hero-shape {
        display: none;
    }

    .hero-title {
        font-size: 2.6rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        max-width: 100%;
    }

    /* ── Healthcare feature strip ── */
    .healthcare-features {
        padding: 40px 0;
    }

    .healthcare-feature-card {
        margin-bottom: 0;
    }

    /* ── About collage ── */
    .about-image-collage {
        height: 380px;
        margin-bottom: 48px;
    }

    .collage-img-main {
        width: 72%;
        height: 68%;
    }

    .collage-img-secondary {
        width: 50%;
        height: 48%;
    }

    /* ── Service flip cards ── */
    .service-flip-card {
        height: 320px;
    }

    /* ── Journey section ── */
    .journey-step-line {
        display: none;
    }

    .journey-step {
        margin-bottom: 36px;
    }

    /* ── Testimonial ── */
    .testimonial-card {
        padding: 32px 28px;
    }

    /* ── Footer ── */
    .footer-brand {
        margin-bottom: 40px;
    }

    /* ── Inner hero ── */
    .inner-hero {
        padding: 155px 0 90px;
        background-attachment: scroll;
        background-position: center center;
    }

    .inner-hero h1 {
        font-size: 2.6rem;
    }

    .inner-hero p {
        font-size: 1rem;
        max-width: 500px;
    }

    .breadcrumb-nav {
        margin-top: 24px;
        font-size: 0.85rem;
        padding: 7px 18px;
    }

    /* ── Timeline ── */
    .timeline-item {
        gap: 24px;
    }

    .timeline-item::after {
        display: none;
    }

    /* ── Contact / Appointment forms ── */
    .contact-form-wrap {
        padding: 36px 28px;
        margin-top: 40px;
    }

    .appt-form-wrap {
        padding: 36px 28px;
    }
}

/* ============================================================
   4 — PHABLET / MOBILE LANDSCAPE  576–767px
   ============================================================ */
@media (min-width: 576px) and (max-width: 767px) {

    /* Logo */
    .navbar-brand img {
        height: 56px;
        width: auto;
        max-width: 160px;
        object-fit: contain;
        object-position: left center;
    }

    #mainNav.scrolled .navbar-brand img {
        height: 50px;
        width: auto;
        max-width: 160px;
    }

    .footer-brand .footer-logo {
        height: 62px;
        width: auto;
        display: block;
    }

    .preloader-logo {
        width: 68px;
        height: 68px;
    }
}

/* ── Phablet and below: shared ── */
@media (max-width: 767px) {

    /* ── Spacing ── */
    .section-pad {
        padding: 60px 0;
    }

    /* ── Typography ── */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.4rem; }

    .section-heading-center {
        margin-bottom: 44px;
    }

    /* ── Hero ── */
    .hero-content {
        padding-top: 80px;
        padding-bottom: 50px;
    }

    .hero-title {
        font-size: 2.1rem;
    }

    .hero-subtitle {
        font-size: 0.97rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-actions .btn-primary-custom,
    .hero-actions .btn-white-custom {
        width: 100%;
        justify-content: center;
    }

    .hero-dots {
        bottom: 24px;
    }

    /* ── Healthcare feature strip ── */
    .healthcare-features {
        padding: 36px 0;
    }

    .healthcare-feature-card {
        padding: 24px 20px;
        margin-bottom: 4px;
    }

    /* ── About collage ── */
    .about-image-collage {
        height: 300px;
        margin-bottom: 36px;
    }

    .collage-img-main {
        width: 75%;
        height: 70%;
    }

    .collage-img-secondary {
        width: 52%;
        height: 50%;
    }

    .collage-badge {
        display: none;
    }

    /* ── About value items ── */
    .about-value-item {
        margin-bottom: 20px;
    }

    /* ── Service flip cards ── */
    .service-flip-card {
        height: 300px;
        margin-bottom: 8px;
    }

    /* ── Why cards ── */
    .why-card {
        margin-bottom: 20px;
        padding: 24px 20px;
    }

    /* ── Journey ── */
    .journey-step {
        padding: 0 8px;
        margin-bottom: 32px;
    }

    /* ── Testimonials ── */
    .testimonial-card {
        padding: 28px 20px;
    }

    .testimonial-text {
        font-size: 0.95rem;
    }

    /* ── CTA Banner ── */
    .cta-banner {
        padding: 70px 0;
        background-attachment: scroll !important;
    }

    .cta-banner h2 {
        font-size: 1.8rem;
    }

    .cta-banner p {
        font-size: 0.95rem;
    }

    /* ── Footer ── */
    .site-footer {
        padding: 56px 0 0;
    }

    .footer-bottom .row {
        text-align: center;
    }

    .footer-bottom .col-md-6:last-child {
        margin-top: 6px;
    }

    /* ── Contact / Hours ── */
    .contact-form-wrap {
        padding: 28px 20px;
    }

    .map-section {
        height: 300px;
    }

    .hours-card {
        margin-bottom: 24px;
    }

    /* ── Appointment ── */
    .appt-form-wrap {
        padding: 28px 20px;
    }

    /* ── Mission / Service detail cards ── */
    .mission-card {
        margin-bottom: 20px;
    }

    .service-detail-card {
        margin-bottom: 20px;
    }

    /* ── Scroll-to-top button ── */
    #scrollTop {
        bottom: 80px;   /* clear WhatsApp button */
        right: 20px;
        width: 42px;
        height: 42px;
    }

    /* ── WhatsApp widget ── */
    .whatsapp-chat {
        bottom: 20px;
        right: 16px;
    }

    /* ── Inner hero ── */
    .inner-hero {
        padding: 135px 0 76px;
        background-attachment: scroll;
        background-position: center center;
    }

    .inner-hero h1 {
        font-size: 2.1rem;
    }

    .inner-hero p {
        font-size: 0.97rem;
        max-width: 100%;
        padding: 0 8px;
    }

    .breadcrumb-nav {
        font-size: 0.83rem;
        padding: 7px 16px;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ============================================================
   5 — SMALL MOBILE  ≤575px
   ============================================================ */
@media (max-width: 575px) {

    /* ── Logo ── */
    .navbar-brand img {
        height: 54px;
        width: auto;
        max-width: 140px;
        object-fit: contain;
        object-position: left center;
    }

    #mainNav.scrolled .navbar-brand img {
        height: 48px;
        width: auto;
        max-width: 140px;
    }

    .footer-brand .footer-logo {
        height: 60px;
        width: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 16px;
    }

    .footer-brand {
        text-align: center;
    }

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

    .preloader-logo {
        width: 60px;
        height: 60px;
    }

    .preloader-bar {
        width: 160px;
    }

    /* ── Section spacing ── */
    .section-pad {
        padding: 50px 0;
    }

    .section-pad-sm {
        padding: 36px 0;
    }

    /* ── Typography ── */
    h1 { font-size: 1.85rem; }
    h2 { font-size: 1.6rem; }
    h4 { font-size: 1.05rem; }

    /* ── Buttons — full-width on tiny screens ── */
    .btn-primary-custom,
    .btn-outline-custom,
    .btn-white-custom {
        padding: 12px 22px;
        font-size: 0.88rem;
    }

    /* ── Navbar ── */
    #mainNav {
        padding: 10px 0;
    }

    /* ── Hero ── */
    .hero-section {
        min-height: 520px;
    }

    .hero-content {
        padding-top: 74px;
        padding-bottom: 40px;
    }

    .hero-title {
        font-size: 1.85rem;
        line-height: 1.2;
        margin-bottom: 16px;
    }

    .hero-subtitle {
        font-size: 0.92rem;
        margin-bottom: 28px;
    }

    .hero-badge {
        font-size: 0.72rem;
        padding: 7px 14px;
        /* margin-bottom: 18px; */
        /* margin-top: 18px; */
    }

    /* ── Healthcare strip ── */
    .healthcare-feature-card {
        padding: 20px 16px;
    }

    .healthcare-feature-title {
        font-size: 1rem;
    }

    /* ── About collage ── */
    .about-image-collage {
        height: 240px;
        margin-bottom: 28px;
    }

    .collage-img-main {
        width: 80%;
        height: 72%;
    }

    .collage-img-secondary {
        width: 55%;
        height: 52%;
    }

    /* ── Section heading ── */
    .section-heading-center {
        margin-bottom: 36px;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .section-desc {
        font-size: 0.93rem;
    }

    .section-label {
        font-size: 0.72rem;
    }

    /* ── Service flip cards ── */
    .service-flip-card {
        height: 280px;
    }

    /* ── Service features list ── */
    .service-features-list li {
        font-size: 0.82rem;
    }

    /* ── Why cards ── */
    .why-card {
        padding: 20px 16px;
    }

    /* ── Care journey ── */
    .journey-step-num {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }

    .journey-step h4 {
        font-size: 0.95rem;
    }

    .journey-step p {
        font-size: 0.83rem;
    }

    /* ── Testimonials ── */
    .testimonial-card {
        padding: 22px 16px;
    }

    .testimonial-quote {
        font-size: 3rem;
    }

    .testimonial-text {
        font-size: 0.88rem;
    }

    /* ── CTA banner ── */
    .cta-banner {
        padding: 56px 0;
    }

    .cta-banner h2 {
        font-size: 1.55rem;
    }

    .cta-banner p {
        font-size: 0.9rem;
    }

    .cta-banner .d-flex {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .cta-banner .btn-white-custom,
    .cta-banner .btn-outline-custom {
        width: 100%;
        justify-content: center;
    }

    /* ── Footer ── */
    .site-footer {
        padding: 48px 0 0;
    }

    .footer-heading {
        font-size: 0.75rem;
        margin-top: 8px;
    }

    .footer-contact-item {
        margin-bottom: 14px;
    }

    /* ── WhatsApp window ── */
    .whatsapp-chat-window {
        width: calc(100vw - 32px);
        right: -8px;
    }

    .whatsapp-chat {
        bottom: 16px;
        right: 12px;
    }

    .whatsapp-chat-btn {
        width: 52px;
        height: 52px;
    }

    .whatsapp-chat-btn i {
        font-size: 26px;
    }

    /* ── Contact form ── */
    .contact-form-wrap,
    .appt-form-wrap {
        padding: 24px 16px;
    }

    .form-group-custom {
        margin-bottom: 18px;
    }

    /* ── Inner hero ── */
    .inner-hero {
        padding: 118px 0 68px;
        background-attachment: scroll;
        background-position: center 30%;
    }

    .inner-hero h1 {
        font-size: 1.85rem;
        margin-bottom: 12px;
    }

    .inner-hero p {
        font-size: 0.92rem;
        padding: 0 4px;
    }

    .inner-hero .section-label {
        font-size: 0.72rem;
        margin-bottom: 12px;
    }

    .breadcrumb-nav {
        font-size: 0.78rem;
        padding: 6px 14px;
        gap: 5px;
        margin-top: 18px;
    }

    /* ── Appt step header ── */
    .appt-step-header {
        gap: 12px;
    }

    .appt-step-num {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }

    /* ── Time slot grid ── */
    .time-slot-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── Mission cards ── */
    .mission-card {
        padding: 24px 20px;
    }
}

/* ============================================================
   6 — TINY PHONES  ≤360px  (Galaxy S, iPhone SE)
   ============================================================ */
@media (max-width: 360px) {

    /* ── Logo ── */
    .navbar-brand img {
        height: 44px;
        width: auto;
        max-width: 110px;
        object-fit: contain;
        object-position: left center;
    }

    #mainNav.scrolled .navbar-brand img {
        height: 40px;
        width: auto;
        max-width: 110px;
    }

    .footer-brand .footer-logo {
        height: 48px;
        width: auto;
    }

    .preloader-logo {
        width: 52px;
        height: 52px;
    }

    .preloader-bar {
        width: 130px;
    }

    /* ── Typography ── */
    h1 { font-size: 1.65rem; }
    h2 { font-size: 1.45rem; }

    /* ── Hero ── */
    .hero-title {
        font-size: 1.65rem;
    }

    .hero-subtitle {
        font-size: 0.88rem;
    }

    /* ── Inner hero ── */
    .inner-hero {
        padding: 108px 0 60px;
        background-position: center 30%;
    }

    .inner-hero h1 {
        font-size: 1.6rem;
    }

    .inner-hero p {
        font-size: 0.85rem;
    }

    .breadcrumb-nav {
        font-size: 0.74rem;
        padding: 5px 12px;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ── Buttons ── */
    .btn-primary-custom,
    .btn-outline-custom,
    .btn-white-custom {
        padding: 11px 18px;
        font-size: 0.84rem;
    }

    /* ── Section ── */
    .section-pad {
        padding: 44px 0;
    }

    /* ── WhatsApp ── */
    .whatsapp-chat-window {
        width: calc(100vw - 24px);
        right: -4px;
    }
}

/* ============================================================
   7 — TOUCH DEVICE FLIP CARD FALLBACK
   ============================================================ */
@media (hover: none) {
    .service-flip-card:focus-within .service-flip-inner,
    .service-flip-card.touched .service-flip-inner {
        transform: rotateY(180deg);
    }
}

/* ============================================================
   8 — PRINT
   ============================================================ */
@media print {

    #mainNav,
    #scrollTop,
    #preloader,
    .hero-dots,
    .partners-section,
    .cta-banner,
    .site-footer,
    .whatsapp-chat {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }
}

/* ============================================================
   9 — ANIMATION INTEGRITY  (prevent layout conflicts)
   ============================================================ */

.anim-fade-up,
.anim-fade-up.anim-delay-1,
.anim-fade-up.anim-delay-2,
.anim-fade-up.anim-delay-3,
.anim-fade-up.anim-delay-4,
.anim-fade-up.anim-delay-5,
.anim-fade-up.anim-delay-6 {
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.anim-fade-up.anim-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ============================================================
   10 — NURSING PREMIUM CARD  (independent hover, no row lift)
   ============================================================ */

.nursing-premium-card {
    transform: translateY(0) translateZ(0);
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1), box-shadow 0.3s ease;
    will-change: transform;
}

.nursing-premium-card:hover {
    transform: translateY(-8px) translateZ(0);
    z-index: 10;
}

/* ============================================================
   11 — MISC COMPONENT FIXES
   ============================================================ */

/* Dropdown caret icon alignment */
.services-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dropdown-icon {
    font-size: 0.72rem;
    transition: transform 0.25s ease;
}

.services-dropdown.show .dropdown-icon {
    transform: rotate(180deg);
}

/* CTA overlay (background-image version) */
.cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,35,64,0.80) 0%, rgba(55,178,211,0.55) 100%);
    z-index: 1;
}

.cta-banner > .container {
    position: relative;
    z-index: 3;
}

/* Fix footer link text wrap on narrow screens */
.footer-links a {
    word-break: break-word;
}

/* Fix contact email wrapping */
.footer-contact-item p {
    word-break: break-all;
}

/* Ensure section overflow is hidden so blobs don't create scrollbars */
section {
    overflow: hidden;
}

/* Glass panel on narrow screens */
@media (max-width: 575px) {
    .glass-panel {
        padding: 14px 16px !important;
    }
}

/* Collage minimum height guard */
@media (max-width: 400px) {
    .about-image-collage {
        height: 200px;
    }
}
@media (max-width: 991px) {
    
.row{
    margin-top: 30px;
}
}