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

   @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,700;0,800;1,700&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: 'Plus Jakarta Sans', sans-serif;
       --font-body: 'Plus Jakarta Sans', 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: 120px 0; /* Generous vertical padding */
   }
   
   .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(38px, 5vw, 64px); /* Scales from mobile 38px to desktop 64px */
       font-weight: 800;
   }
   
   h2, .display-h2 {
       font-size: clamp(30px, 4vw, 48px); /* Scales to desktop 48px */
       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 Floating Sticky Navbar */
     .navbar-custom {
         position: fixed;
         top: 24px;
         left: 50%;
         transform: translateX(-50%);
         width: 95%;
         max-width: 1440px;
         background: rgba(15, 76, 92, 0.8);
         backdrop-filter: blur(16px);
         -webkit-backdrop-filter: blur(16px);
         border: 1px solid rgba(255, 255, 255, 0.12);
         border-radius: 100px;
         padding: 10px 32px;
         transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
         z-index: 1050;
         box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
     }
     
      .navbar-custom.navbar-scrolled {
          top: 0;
          left: 0;
          transform: none;
          width: 100%;
          max-width: 100%;
          border-radius: 0;
          background: rgba(15, 76, 92, 0.95) !important;
          backdrop-filter: blur(15px);
          -webkit-backdrop-filter: blur(15px);
          padding: 14px 40px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          border-left: none;
          border-right: none;
          border-top: none;
      }
      
      .navbar-custom .navbar-brand {
          font-family: var(--font-heading);
          font-weight: 800;
          font-size: 1.5rem;
          color: #fff;
          transition: var(--transition-smooth);
          display: flex;
          align-items: center;
      }
      
      .navbar-custom.navbar-scrolled .navbar-brand {
          color: #fff !important;
      }
      
      .navbar-custom .nav-link {
          font-weight: 600;
          color: rgba(255, 255, 255, 0.9);
          font-size: 14px;
          padding: 8px 16px !important;
          border-radius: 30px;
          transition: var(--transition-smooth);
          position: relative;
      }
      
      .navbar-custom.navbar-scrolled .nav-link {
          color: rgba(255, 255, 255, 0.9) !important;
      }
      
      .navbar-custom .nav-link:hover,
      .navbar-custom .nav-link.active {
          color: #fff !important;
          background: rgba(255, 255, 255, 0.18);
      }
      
      .navbar-custom.navbar-scrolled .nav-link:hover,
      .navbar-custom.navbar-scrolled .nav-link.active {
          color: #fff !important;
          background: rgba(255, 255, 255, 0.18) !important;
      }
      
      .navbar-custom .btn-donate-nav {
          background: var(--secondary-color);
          color: #fff !important;
          border-radius: 30px;
          font-weight: 700;
          font-size: 14px;
          padding: 10px 24px !important;
          box-shadow: 0 4px 15px rgba(242, 140, 40, 0.25);
          transition: var(--transition-smooth);
          display: inline-flex;
          align-items: center;
      }
      
      .navbar-custom .btn-donate-nav:hover {
          background-color: #fff !important;
          color: var(--secondary-color) !important;
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
      }

      .navbar-custom.navbar-scrolled .btn-donate-nav:hover {
          background-color: #fff !important;
          color: var(--secondary-color) !important;
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
      }
  
      .navbar-custom .btn-portal-nav {
          border: 2px solid rgba(255, 255, 255, 0.5);
          color: #fff !important;
          background: transparent;
          border-radius: 30px;
          font-weight: 700;
          font-size: 14px;
          padding: 8px 20px !important;
          transition: var(--transition-smooth);
          display: inline-flex;
          align-items: center;
      }
      .navbar-custom .btn-portal-nav:hover {
          background: rgba(255, 255, 255, 0.15);
          border-color: rgba(255, 255, 255, 0.9);
      }
      .navbar-custom.navbar-scrolled .btn-portal-nav {
          border: 2px solid rgba(255, 255, 255, 0.5);
          color: #fff !important;
          background: transparent;
      }
      .navbar-custom.navbar-scrolled .btn-portal-nav:hover {
          background: rgba(255, 255, 255, 0.15);
          border-color: rgba(255, 255, 255, 0.9);
      }
  
      .navbar-custom .mobile-menu-toggle {
          color: #fff;
          transition: var(--transition-smooth);
      }
      .navbar-custom.navbar-scrolled .mobile-menu-toggle {
          color: #fff;
      }
   
      /* Medium screens (1024px - 1399px) alignment tweaks to prevent wrapping */
      @media (min-width: 1024px) and (max-width: 1399.98px) {
          .navbar-custom {
              padding: 10px 16px;
              max-width: 1140px;
          }
          .navbar-custom .nav-link {
              padding: 6px 10px !important;
              font-size: 12px;
          }
          .navbar-custom .btn-donate-nav {
              padding: 8px 18px !important;
              font-size: 12px;
          }
          .navbar-custom .btn-portal-nav {
              padding: 6px 16px !important;
              font-size: 12px;
          }
      }
   
      /* Collapsed Mobile Menu Styling */
      @media (max-width: 1023.98px) {
          .navbar-custom {
              border-radius: 30px;
              padding: 10px 20px;
          }
          .navbar-custom.navbar-scrolled {
              border-radius: 0;
              padding: 14px 20px;
          }
      }
 
      /* Extra Small Mobile Devices Styling */
      @media (max-width: 480px) {
          .navbar-custom {
              padding: 8px 16px;
              top: 12px;
          }
          .navbar-custom.navbar-scrolled {
              padding: 10px 16px;
          }
          .navbar-custom .navbar-brand {
              font-size: 1.2rem;
          }
      }
   
   /* 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 {
       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 {
       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;
   }
   
   /* 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;
   }
   
   /* 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::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);
   }