/* ==========================================================================
   Premium Frontend CSS System - Mount Thomas Organization Redesign
   Aesthetics: Modern, Immersive, Spacious, Full-Width Fluid Layout
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

   :root {
       /* Modern Color Palette */
       --primary-color: #0F4C5C;      /* Deep Teal */
       --secondary-color: #F28C28;    /* Warm Orange */
       --accent-color: #E76F51;       /* Terracotta Accent */
       --bg-light: #FAFAFA;           /* Off-White */
       --text-dark: #1F2937;          /* Charcoal */
       --text-muted: #6B7280;         /* Soft Gray */
       
       /* Typography */
       --font-heading: 'Inter', sans-serif;
       --font-body: 'Inter', sans-serif;
       
       /* Layout Variables */
       --border-radius-lg: 24px;
       --border-radius-md: 18px;
       --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
       --shadow-premium: 0 10px 40px -10px rgba(15, 76, 92, 0.08);
       --shadow-hover: 0 20px 50px -10px rgba(15, 76, 92, 0.15);
       --glass-bg: rgba(255, 255, 255, 0.7);
       --glass-border: rgba(255, 255, 255, 0.2);
   }
   
   /* Base Reset & Body Styles */
   html, body {
       width: 100%;
       margin: 0;
       padding: 0;
       overflow-x: hidden;
   }
   
   body {
       font-family: var(--font-body);
       color: var(--text-dark);
       background-color: var(--bg-light);
       line-height: 1.8;
       font-size: 18px; /* Standard 18px Body text on desktop */
       -webkit-font-smoothing: antialiased;
   }
   
   /* Full-Width Layout System (Fluid sections, no boxed wraps) */
     .section-fluid-wrapper {
         width: 100%;
         max-width: 100%;
         padding: 60px 0; /* Generous vertical padding on mobile */
         overflow-x: hidden;
     }
     
     @media (min-width: 992px) {
         .section-fluid-wrapper {
             padding: 120px 0; /* Expanded vertical padding on desktop */
         }
     }
   
   .section-colored {
       background-color: #fff;
       border-top: 1px solid rgba(15, 76, 92, 0.04);
       border-bottom: 1px solid rgba(15, 76, 92, 0.04);
   }
   
   .section-contrast {
       background-color: rgba(15, 76, 92, 0.03);
   }
   
   /* Typography Hierarchy */
   h1, h2, h3, h4, .display-heading {
       font-family: var(--font-heading);
       color: var(--primary-color);
       margin-top: 0;
       line-height: 1.2;
   }
   
   h1, .display-h1 {
        font-size: clamp(32px, 5vw, 64px); /* Scales from mobile 32px to desktop 64px */
        font-weight: 800;
    }
    
    h2, .display-h2 {
        font-size: clamp(24px, 4vw, 48px); /* Scales to desktop 48px, minimum 24px on mobile */
        font-weight: 700;
        position: relative;
    }
   
   h3, .display-h3 {
       font-size: clamp(24px, 3vw, 36px); /* Scales to desktop 36px */
       font-weight: 700;
   }
   
   h4, .display-h4 {
       font-size: clamp(20px, 2vw, 24px); /* Scales to desktop 24px */
       font-weight: 700;
   }
   
   p {
       font-size: 18px;
       color: var(--text-dark);
       font-weight: 400;
       margin-bottom: 1.5rem;
   }
   
   .text-sm {
       font-size: 16px;
       color: var(--text-muted);
   }
   
   /* Premium Sticky Sticky Navbar */
   .navbar-custom {
       background: transparent;
       padding: 24px 0;
       transition: var(--transition-smooth);
       z-index: 1050;
       border-bottom: 1px solid rgba(255,255,255,0.08);
   }
   
   .navbar-custom.navbar-scrolled {
       background: rgba(255, 255, 255, 0.95) !important;
       backdrop-filter: blur(15px);
       -webkit-backdrop-filter: blur(15px);
       padding: 16px 0;
       box-shadow: 0 10px 30px rgba(0,0,0,0.05);
       border-bottom: 1px solid rgba(15, 76, 92, 0.05);
   }
   
   .navbar-custom .navbar-brand {
       font-family: var(--font-heading);
       font-weight: 800;
       font-size: 1.8rem;
       color: #fff;
       transition: var(--transition-smooth);
   }
   
   .navbar-custom.navbar-scrolled .navbar-brand {
       color: var(--primary-color) !important;
   }
    
    .navbar-custom.navbar-scrolled .navbar-toggler-btn {
        color: var(--primary-color) !important;
    }
   
   .navbar-custom .nav-link {
       font-weight: 600;
       color: rgba(255, 255, 255, 0.9);
       font-size: 15px;
       padding: 8px 12px !important;
       transition: var(--transition-smooth);
       position: relative;
   }
   
   .navbar-custom.navbar-scrolled .nav-link {
       color: var(--text-dark) !important;
   }
   
   .navbar-custom .nav-link::after {
       content: '';
       position: absolute;
       width: 0;
       height: 2px;
       bottom: 0;
       left: 12px;
       background-color: var(--secondary-color);
       transition: var(--transition-smooth);
   }
   
   .navbar-custom .nav-link:hover::after,
   .navbar-custom .nav-link.active::after {
       width: calc(100% - 24px);
   }
   
   .navbar-custom .nav-link:hover,
   .navbar-custom .nav-link.active {
       color: #fff !important;
   }
   
   .navbar-custom.navbar-scrolled .nav-link:hover,
   .navbar-custom.navbar-scrolled .nav-link.active {
       color: var(--primary-color) !important;
   }
   
   .navbar-custom .btn-donate-nav {
       background: var(--secondary-color);
       color: #fff !important;
       border-radius: 30px;
       font-weight: 700;
       padding: 10px 22px !important;
       box-shadow: 0 4px 15px rgba(242, 140, 40, 0.3);
       transition: var(--transition-smooth);
   }
   
   .navbar-custom .btn-donate-nav::after {
       display: none;
   }
   
   .navbar-custom .btn-donate-nav:hover {
       background: var(--primary-color) !important;
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(15, 76, 92, 0.2);
   }

   /* Medium screens (1200px - 1400px) alignment tweaks to prevent wrapping */
   @media (min-width: 992px) and (max-width: 1399.98px) {
       .navbar-custom .nav-link {
           padding: 8px 8px !important;
           font-size: 14px;
       }
       .navbar-custom .nav-link::after {
           left: 8px;
       }
       .navbar-custom .nav-link:hover::after,
       .navbar-custom .nav-link.active::after {
           width: calc(100% - 16px);
       }
       .navbar-custom .btn-donate-nav {
           padding: 8px 18px !important;
           font-size: 14px;
       }
   }

   /* Collapsed Mobile Menu Styling */
   @media (max-width: 991.98px) {
       .navbar-custom .navbar-collapse {
           background: rgba(15, 76, 92, 0.98);
           backdrop-filter: blur(15px);
           -webkit-backdrop-filter: blur(15px);
           border-radius: 20px;
           padding: 24px;
           margin-top: 15px;
           box-shadow: 0 15px 40px rgba(0,0,0,0.15);
           border: 1px solid rgba(255,255,255,0.08);
       }
       .navbar-custom .nav-link {
           color: rgba(255,255,255,0.85) !important;
           padding: 12px 16px !important;
           border-bottom: 1px solid rgba(255,255,255,0.08);
       }
       .navbar-custom .nav-link:hover,
       .navbar-custom .nav-link.active {
           color: var(--secondary-color) !important;
       }
       .navbar-custom .nav-link:last-of-type {
           border-bottom: none;
       }
       .navbar-custom .nav-link::after {
           display: none !important;
       }
       .navbar-custom .btn-donate-nav {
           margin-top: 15px;
           width: 100%;
           text-align: center;
       }
   }
   
   /* Fullscreen Edge-to-Edge Hero Banner */
   .hero-slider-container {
       height: 90vh; /* Premium large viewport height */
       width: 100%;
       position: relative;
       overflow: hidden;
       background-color: var(--primary-color);
   }
   
   .hero-slide {
       height: 100%;
       background-size: cover;
       background-position: center;
       position: relative;
   }
   
   .hero-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(135deg, rgba(15, 76, 92, 0.9) 0%, rgba(31, 41, 55, 0.5) 100%);
       display: flex;
       align-items: center;
   }
   
   .slide-content {
       max-width: 850px;
       color: #fff;
       z-index: 10;
   }
   
   .slide-content h1 {
       color: #fff;
       margin-bottom: 24px;
       text-shadow: 0 2px 10px rgba(0,0,0,0.15);
   }
   
   .slide-content p {
       color: rgba(255,255,255,0.9);
       font-size: 20px;
       line-height: 1.6;
       margin-bottom: 40px;
   }
   
   /* Standard Premium Banner Header for Inner Pages */
   .banner-header {
       background-size: cover;
       background-position: center;
       position: relative;
       padding: 220px 0 120px 0; /* Deep responsive header */
       margin-top: 0;
   }
   
   .banner-header-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(180deg, rgba(15, 76, 92, 0.85) 0%, rgba(31, 41, 55, 0.9) 100%);
   }
   
   .banner-header-content {
       position: relative;
       z-index: 5;
       color: #fff;
   }
   
   .banner-header-content h1 {
       color: #fff;
       font-size: clamp(36px, 5vw, 56px);
       font-weight: 800;
       margin-bottom: 15px;
   }
   
   .banner-header-content .breadcrumb-item,
   .banner-header-content .breadcrumb-item a {
       color: rgba(255, 255, 255, 0.75);
       text-decoration: none;
       font-weight: 500;
       font-size: 16px;
   }
   
   .banner-header-content .breadcrumb-item.active {
       color: var(--secondary-color);
   }
   
   /* Premium Cards styling */
   .card-premium {
       background: #fff;
       border-radius: var(--border-radius-lg);
       border: 1px solid rgba(15, 76, 92, 0.04);
       box-shadow: var(--shadow-premium);
       transition: var(--transition-smooth);
       overflow: hidden;
       position: relative;
   }
   
   .card-premium:hover {
       transform: translateY(-10px);
       box-shadow: var(--shadow-hover);
   }
   
   .card-premium .card-img-wrap {
       position: relative;
       overflow: hidden;
       height: 260px;
       border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
   }
   
   .card-premium .card-img-wrap img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: var(--transition-smooth);
   }
   
   .card-premium:hover .card-img-wrap img {
       transform: scale(1.08);
   }
   
   .card-premium .card-img-overlay-gradient {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(to top, rgba(31, 41, 55, 0.7) 0%, transparent 100%);
   }
   
   .card-premium .card-body {
       padding: 35px;
   }
   
   /* Glassmorphic elements */
   .glass-panel {
       background: var(--glass-bg);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
       border: 1px solid var(--glass-border);
       border-radius: var(--border-radius-md);
       box-shadow: var(--shadow-premium);
   }
   
   /* Child Sponsorship Cards with cost gauge */
   .sponsor-badge-gender {
       position: absolute;
       top: 20px;
       right: 20px;
       z-index: 10;
       background: var(--primary-color);
       color: #fff;
       padding: 6px 16px;
       border-radius: 20px;
       font-weight: 700;
       text-transform: uppercase;
       font-size: 13px;
       box-shadow: 0 4px 10px rgba(0,0,0,0.15);
   }
   
   .sponsor-progress-wrap {
       margin: 20px 0;
   }
   
   .sponsor-progress-bar {
       height: 6px;
       background-color: #E5E7EB;
       border-radius: 3px;
       overflow: hidden;
   }
   
   .sponsor-progress-fill {
       height: 100%;
       background-color: var(--secondary-color);
       border-radius: 3px;
   }
   
   /* Call to Action blocks */
   .cta-block-fluid {
       background-size: cover;
       background-position: center;
       position: relative;
       padding: 100px 0;
       color: #fff;
   }
   
   .cta-block-fluid .cta-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(15, 76, 92, 0.9);
   }
   
   /* Responsive Forms */
   .form-control-premium {
       background-color: #fff;
       border: 1px solid #E5E7EB;
       border-radius: 12px;
       padding: 15px 20px;
       font-size: 16px;
       color: var(--text-dark);
       transition: var(--transition-smooth);
   }
   
   .form-control-premium:focus {
       border-color: var(--primary-color);
       box-shadow: 0 0 0 4px rgba(15, 76, 92, 0.08);
       outline: none;
   }
   
   /* Premium Buttons styling */
    .btn-primary-custom {
        box-sizing: border-box;
        background: linear-gradient(135deg, var(--primary-color) 0%, #157b95 100%);
        color: #fff;
        font-weight: 700;
        font-size: 16px;
        padding: 15px 35px;
        border-radius: 50px;
        border: none;
        box-shadow: 0 6px 20px rgba(15, 76, 92, 0.25);
        transition: var(--transition-smooth);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-primary-custom:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(15, 76, 92, 0.35);
        color: #fff;
    }
    
    .btn-secondary-custom {
        box-sizing: border-box;
        background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
        color: #fff;
        font-weight: 700;
        font-size: 16px;
        padding: 15px 35px;
        border-radius: 50px;
        border: none;
        box-shadow: 0 6px 20px rgba(242, 140, 40, 0.25);
        transition: var(--transition-smooth);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
   
   .btn-secondary-custom:hover {
       transform: translateY(-3px);
       box-shadow: 0 10px 30px rgba(242, 140, 40, 0.35);
       color: #fff;
   }

    .btn-primary-custom:active,
    .btn-secondary-custom:active {
        transform: scale(0.96) translateY(-1px) !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    }
   
   /* Image Grids and Asymmetric layout frames */
   .img-asymmetric-wrap {
       position: relative;
   }
   
   .img-asymmetric-wrap img {
       border-radius: var(--border-radius-lg);
       box-shadow: 0 15px 35px rgba(0,0,0,0.1);
       transition: var(--transition-smooth);
   }
   
   .img-asymmetric-wrap::before {
       content: '';
       position: absolute;
       top: -20px;
       left: -20px;
       width: 100px;
       height: 100px;
       border-top: 5px solid var(--secondary-color);
       border-left: 5px solid var(--secondary-color);
       z-index: -1;
   }

   @media (max-width: 640px) {
       .img-asymmetric-wrap::before {
           left: -10px;
           top: -10px;
           width: 60px;
           height: 60px;
       }
   }
   
   /* Testimonial Avatar styling */
   .testimonial-avatar {
       width: 70px;
       height: 70px;
       border-radius: 50%;
       object-fit: cover;
       border: 3px solid var(--secondary-color);
   }
   
   /* Premium Footer */
   .footer-custom {
       background-color: #0d151c;
       color: rgba(255, 255, 255, 0.7);
       padding: 100px 0 40px 0;
       font-size: 16px;
       border-top: 4px solid var(--secondary-color);
   }
   
   .footer-custom h5 {
       color: #fff;
       font-size: 22px;
       font-weight: 700;
       margin-bottom: 30px;
       position: relative;
       padding-bottom: 12px;
   }
   
   .footer-custom h5::after {
       content: '';
       position: absolute;
       left: 0;
       bottom: 0;
       width: 40px;
       height: 3px;
       background-color: var(--secondary-color);
   }
   
   .footer-custom a {
       color: rgba(255, 255, 255, 0.7);
       text-decoration: none;
       transition: var(--transition-smooth);
   }
   
   .footer-custom a:hover {
       color: var(--secondary-color);
       padding-left: 6px;
   }
   
   .footer-social-icon {
       width: 45px;
       height: 45px;
       background: rgba(255,255,255,0.06);
       border-radius: 50%;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       color: #fff;
       margin-right: 12px;
       transition: var(--transition-smooth);
   }
   
   .footer-social-icon:hover {
       background: var(--secondary-color);
       transform: translateY(-3px);
       color: #fff !important;
   }
   
   .footer-bottom {
       margin-top: 60px;
       padding-top: 30px;
       border-top: 1px solid rgba(255,255,255,0.08);
   }
   
   /* Back to Top widget button */
   .back-to-top-btn {
       position: fixed;
       bottom: 30px;
       right: 30px;
       width: 50px;
       height: 50px;
       background-color: var(--secondary-color);
       color: #fff;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 5px 15px rgba(0,0,0,0.15);
       z-index: 999;
       opacity: 0;
       visibility: hidden;
       transition: var(--transition-smooth);
   }
   
   .back-to-top-btn.visible {
       opacity: 1;
       visibility: visible;
   }
   
   .back-to-top-btn:hover {
       background-color: var(--primary-color);
       transform: translateY(-3px);
       color: #fff;
   }
   
   /* Section Tag label styles */
   .section-tag {
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 2px;
       color: var(--secondary-color);
       font-size: 14px;
       margin-bottom: 12px;
       display: inline-block;
   }
   
   .section-title {
        position: relative;
    }
    
    .section-title::after {
       content: '';
       position: absolute;
       left: 0;
       bottom: -10px;
       width: 80px;
       height: 4px;
       background-color: var(--secondary-color);
       border-radius: 2px;
   }
   
   .text-center .section-title::after {
       left: 50%;
       transform: translateX(-50%);
   }
   
   /* Timeline component overrides */
   .timeline-dot {
       background: var(--secondary-color);
       border-color: #fff;
   }
   
   .timeline-content {
       border-radius: var(--border-radius-md);
       box-shadow: var(--shadow-premium);
   }