/* =============
    Meridian FMS -- main.css
    Brand styles layered on top of bootstrap 5
   ============= */

   /* 1. CSS custom properties (Brand Tokens)
     Change a color once here and it updates everywhere.
     --------------------- */


     :root {
    --clr-navy:   #003D7A;
    --clr-blue:   #00529B;
    --clr-green:  #94B730;
    --clr-white:  #FFFFFF;
    --clr-light:  #F0F7FF;
    --clr-text:   #1A2E4A;
    --clr-muted:  #5A6A80;

    --font-heading: 'Playfair Display', serif;
    --font-body:    'DM Sans', sans-serif;

    --shadow-card: 0 4px 20px rgba(0, 82, 155, 0.10);
    --radius-card: 10px;
    --transition:  all 0.25s ease;
}

     /* 2. Base ------------------------------------- */

     *, *::before, *::after { box-sizing: border-box;}

     html { scroll-behavior: smooth;}

     body {
        font-family: var(--font-body);
        color: var(--clr-text);
        background: var(--clr-white);
        line-height: 1.65;
        font-size: 1rem;
     }

     h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
        color: var(--clr-navy);
        line-height: 1.25;
     }

     a {
        color: var(--clr-blue);
        text-decoration: none;
        transition: var(--transition);
     }

     a:hover {
        color: var(--clr-navy);
     }

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

     /* 3.Utility helpers ------------------------------ */

     .text-green {color: var(--clr-green) !important;}
     .text-navy {color: var(--clr-navy) !important;}
     .text-blue {color: var(--clr-blue) !important;}
     .bg-navy {background-color: var(--clr-navy) !important;}
     .bg-blue {background-color: var(--clr-blue) !important;}
     .bg-green {background-color: var(--clr-green) !important;}
     .bg-light-brand {background-color: var(--clr-light) !important;}


 .section.label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    color: var(--clr-green);
    margin-bottom: 0.5rem;
    display: block;
 }


 .section.title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-family: var(--font-heading);
    color: var(--clr-navy);
    margin-bottom: 1rem;
 }

 .section-subtitle {
    font-size: 1.05rem;
    color: var(--clr-muted);
    max-width: 640px;
    margin: 0 auto 2.5rem;
 }

 /* 4.Buttons ------------------------------------------ */

 .btn-brand-primary {
    background-color: var(--clr-green);
    color: var(--clr-white);
    border: 2px solid var(--clr-green);
    padding: 0.6rem 1.8rem;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition);
 }

 .btn-brand-primary:hover {
    background-color: #4a8926;
    border-color: #4a8926;
    color: var(--clr-white);
 }

 .btn-brand-outline {
    background-color: transparent;
    color: var(--clr-white);
    border: 2px solid var(--clr-white);
    padding: 0.6rem 1.8rem;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition);
 }

 .stat-box {
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    transition: background 0.3s ease, transform 0.3s ease;
    cursor: default;
}
.stat-box:hover {
    background: rgba(255,255,255,0.14);
    transform: translateY(-3px);
}
 .btn-brand-outline:hover {
    background-color: var(--clr-white);
    color: var(--clr-navy);
 }

 /* 5.Navbar --------------------------------------- */

 #main-navbar {
    background-color: #002F5F;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    transition: box-shadow 0.3s ease;
 }

 #main-navbar.scrolled {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
 }
 
 #main-navbar .navbar-brand img {
    height: 56px;
    width: auto;
    object-fit: contain;
    object-position: top center;
    mix-blend-mode: screen;
 }

 #main-navbar .navbar-brand span {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--clr-white);
    line-height: 1.1;
 }

 #main-navbar .nav-link {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.9rem !important;
    border-radius: 4px;
    transition: var(--transition);
 }

 #main-navbar .nav-link:hover, #main-navbar .nav-link:active {
    color: var(--clr-white) !important;
    background-color: rgba(255,255,255,0.01);
 }

 #main-navbar .navbar-toggler {
    border-color: rgba(255,255,255,0.3);
 }

 #main-navbar .navbar-toggler-icon {
    filter: invert(1);
 }

 #main-navbar .nav-cta {
    background-color: var(--clr-green);
    color: var(--clr-white) !important;
    border-radius: 6px;
    padding: 0.4rem 1.1rem !important;
    font-weight: 700;
 }

 #main-navbar .nav-cta:hover {
    background-color: #556e47;
 }

 /* 6. hero section ---------------------------------- */

 #hero-carousel {
   background-color: #4a8926;
 }

 /* Fixed height container for image */

 .hero-slide-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
}

 

 
/* Carousel controls */
.carousel-control-prev,
.carousel-control-next {
    width: 56px;
    z-index: 5;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
    background-color: rgba(27,58,92,0.55);
    border-radius: 50%;
    padding: 1.4rem;
    background-size: 40%;
}


/* Mobile hero */
@media (max-width: 767px) {
    .hero-slide-img { min-height: 260px; }
}

/* 7. why choose us section -------------------------- */

#why-choose-us {
   padding: 5rem 0;
   background-color: var(--clr-light);
}

.feature-icon-wrap {
   width: 52px;
   height: 52px;
   background-color: rgba(26, 86, 160, 0.10);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.feature-item {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   margin-bottom: 1.5rem;
}

.feature-item p {
   margin: 0;
   font-size: 0.95rem;
   color: var(--clr-text);
}

.facility-badge {
   display: inline-block;
   background-color: var(--clr-white);
   border: 1px solid rgba(27, 58, 92, 0.15);
   border-radius: 6px;
   padding: 0.4rem 0.9rem;
   font-size: 0.85rem;
   font-weight: 500;
   color: var(--clr-navy);
   margin: 0.25rem;
   transition: var(--transition);
}

.facility-badge:hover {
   background-color: var(--clr-navy);
   color: var(--clr-white);
   border-color: var(--clr-navy);
}

.staff-photo {
   width: 100%;
   height: 320px;
   object-fit: cover;
   object-position: center top;
   border-radius: var(--radius-card);
}

@media (max-width: 767px) {
   .staff-photo {height: 140px;}
   #why-choose-us {padding: 3rem 0;}
}

/* 8.services section --------------------------------- */

#services {
   padding: 5rem 0;
   background-color: var(--clr-white);
}

.service-card {
   border: none;
   border-radius: var(--radius-card);
   box-shadow: var(--shadow-card);
   overflow: hidden;
   transition: transform 0.25s ease, box-shadow 0.25s ease;
   height: 100%;
}

.service-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 10px 32px rgba(27, 58, 92, 0.16);
}

.service-card-img {
   width: 100%;
   height: 220px;
   object-fit: cover;
   object-position: center;
   display: block;
}

/* Coloured top stripe — fallback when no image is available */
.service-card-img-placeholder {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, var(--clr-navy) 0%, var(--clr-blue) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-card-img-placeholder svg {
    opacity: 0.25;
}


.service-card .card-body {
    padding: 1.5rem;
}
.service-card .card-title {
    font-size: 1.1rem;
    font-family: var(--font-heading);
    color: var(--clr-navy);
    margin-bottom: 0.5rem;
}

.service-card .card-text {
    font-size: 0.88rem;
    color: var(--clr-muted);
    line-height: 1.6;
}

/* Green accent line on card hover */
.service-card::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--clr-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.service-card:hover::before { transform: scaleX(1); }

@media (max-width: 767px) {
    #services { padding: 3rem 0; }
}


/* 9.about-snippet section ---------------------------------- */

#about-snippet {
   padding: 5rem;
   background-color: var(--clr-blue);
   position: relative;
   overflow: hidden;
}

#about-snippet::before {
   content: '';
   position: absolute;
   top: -80px;
   right: -80px;
   width: 320px;
   height: 320px;
   border-radius: 50%;
   background: rgba(255,255,255,0.04);
   pointer-events: none;
}

#about-snippet::after {
   content: '';
   position: absolute;
   bottom: -60px;
   left: 10%;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   background: rgba(90,158,47,0.08);
   pointer-events: none;
}

#about-snippet h2 {
   color: var(--clr-white);
}

#about-snippet p {
   color: rgba(255,255,255,0.78);

}


@media (max-width: 767px) {
    #about-snippet { padding: 3rem 0; }
}

/* ── 10. Contact CTA Strip ------------------------- */
#contact-cta {
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--clr-blue) 0%, #006AC0 100%);
    text-align: center;
}

#contact-cta h2 {
    color: var(--clr-white);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    margin-bottom: 0.5rem;
}

#contact-cta p {
    color: rgba(255,255,255,0.85);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}


 /* 11.footer ---------------------------------------- */

 #main-footer {
    background-color: #002D5C;
    color: rgba(255,255,255,0.7);
    padding: 3.5rem 0 1.5rem;
    font-size: 0.88rem;
 }

 #main-footer h5 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-green);
    margin-bottom: 1rem;
 }

 #main-footer a {
    color: rgba(255,255,255,0.68);
    display: block;
    margin-bottom: 0.35rem;
 }

 #main-footer a:hover {
    color: var(--clr-white);
 }

 #main-footer span {
    color: rgba(255,255,255,0.68);
    display: block;
    margin-bottom: 0.35rem;
}

 .footer-divider {
    border-color: rgba(255,255,255,0.1);
    margin: 2rem 0 1rem;
 }

 .footer-bottom {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
 }



 /* ── 12. Scroll-reveal animation ─────────────────────────────
   Elements start hidden and fade up. JS triggers .visible.
   ----------------------------------------------------------- */
 .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
 }

 .reveal.visible {
    opacity: 1;
    transform: translateY(0);
 }