/* CSS Variables for Exact Colors */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 :root {
     --banner-dark: #000000;
     --footer-blue: #1178df;
     --general-white: #ffffff;
     --link-color: #ffffff;
     --header-bg: #1a1a1a;
     --content-bg: #f8f9fa;
     --event-date-blue: #007bff;
     --event-hover-border: #007bff;
     --primary-blue: #1e40af;
    /* Blue-700 */
    --primary-black: #1f2937;
    --transition-duration: 0.3s;
    --top-nav-height: 40px;
 }
 /* ------------------ Global & Font Approximation ------------------ */
 /* BASE LAYOUT & TYPOGRAPHY */
 
 body {
     font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
   /*padding-top: 150px;*/
 }
 
 /* INFO BAR RESPONSIVE STYLES */
 
 #infoBar {
     position: relative;
     z-index: 1050;
     transition: transform 0.4s ease-out, opacity 0.4s ease-out;
     background-color: #007bff;
     color: white;
     min-height: 40px;
 }
 
 #infoBar .info-left,
 #infoBar .info-right {
     color: white;
 }
  /*MAIN NAVBAR RESPONSIVE STYLES */
 
 .main-navbar {
     position: absolute;
     top: 40px;
     left: 0;
     width: 100%;
     z-index: 1020;
     transition: background-color 0.4s ease-out, top 0.4s ease-out;
 }
  /*------------------------------------------- */
  /*STATE 1: Transparent (over the hero)        */
  /*------------------------------------------- */
 
 .navbar-transparent {
     background-color: rgba(0, 0, 0, 0) !important;
 }
  /*Ensure nav links are visible against the dark hero image */
 
 .navbar-transparent .nav-link {
     color: white !important;
 }
  /*------------------------------------------- */
  /*STATE 2: Scrolled/Fixed                     */
  /*------------------------------------------- */
 
 .navbar-scrolled {
     position: fixed !important;
     top: 0 !important;
     background-color: white !important;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
  /*Ensure scrolled nav links turn back to dark for visibility against white background */
 
 .navbar-scrolled .nav-link {
     color: #212529 !important;
 }
  /*------------------------------------------- */
  /*TOGGLER/MOBILE MENU STYLES                  */
  /*------------------------------------------- */
  /*Make navbar toggler visible on mobile when transparent */
 
 .navbar-transparent .navbar-toggler-icon {
     filter: invert(1);
 }
 
 .navbar-scrolled .navbar-toggler-icon {
     filter: none;
      /*Icon returns to original (dark) color */
 }
  /*------------------------------------------- */
  /*HOVER EFFECT (Blue)                         */
  /*------------------------------------------- */
  /*Blue hover for links in the transparent state */
 
 .navbar-transparent .nav-link:hover {
     color: #007bff !important;
 }
  /*Blue hover for links in the scrolled state */
 
 .navbar-scrolled .nav-link:hover {
     color: #007bff !important;
 }
  /*------------------------------------------- */
  /*RESPONSIVENESS (Mobile View)                */
  /*------------------------------------------- */
 
 @media (max-width: 991.98px) {
   
     .navbar-transparent .navbar-collapse.show {
         background-color: rgba(0, 0, 0, 0.95) !important;
     }
      
     .navbar-scrolled .navbar-collapse.show {
         background-color: white !important;
       
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     }
     
     .navbar-transparent .navbar-collapse.show .nav-link {
         color: white !important;
         padding-left: 15px;
     }
   
     .navbar-scrolled .navbar-collapse.show .nav-link {
         color: #212529 !important;
     }

     .navbar-collapse.show .nav-link:hover {
         color: #007bff !important;
     }
 }
   
 
 .hero {
     position: relative;
     overflow: hidden;
     width: 100%;
     height: 100vh;
     /* Default height for desktop */
 }
 
 .slides {
     display: flex;
     flex-direction: column;
     transition: transform 1.5s ease-in-out;
     /* SLOWER ANIMATION */
     height: 100%;
 }
 
 .slide {
     flex-shrink: 0;
     width: 100%;
     height: 100%;
     position: relative;
     /* Crucial for absolute positioning of text overlay */
 }
 
 /* Gradient overlay from right → left */
.slide::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 40%, transparent 100%);
  z-index: 1;
}

/* Text overlay container */
.hero-text-overlay {
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
  text-align: right;
  color: white;
  z-index: 2;
  max-width: 600px;
  padding: 20px;
}

/* Text style */
.hero-text-overlay h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 3rem;
  line-height: 1.3;
  margin: 0;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .hero-text-overlay {
    right: 5%;
  }

  .hero-text-overlay h1 {
    font-size: 2.4rem;
  }
}

@media (max-width: 768px) {
  .hero-text-overlay {
    right: 5%;
  }

  .hero-text-overlay h1 {
    font-size: 1.9rem;
  }
}
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }
 

 .counter-item {
     padding: 20px;
     border-radius: 0.5rem;
     transition: transform 0.3s ease;
 }
 
 .counter-item:hover {
     transform: translateY(-5px);
 }
 /* HERO DOT Styling for Bubble/Line Animation - now VERTICAL */
 
 .hero-bar {
     position: absolute;
     top: 50%;
     right: 40px;
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     /* Changed from row → column */
     align-items: center;
     gap: 12px;
     z-index: 10;
 }
 
 .hero-dot {
     width: 10px;
     height: 10px;
     background-color: rgba(255, 255, 255, 0.5);
     border-radius: 50%;
     cursor: pointer;
     transition: all 0.4s ease-in-out;
 }
 
 .hero-dot.active {
     width: 10px;
     height: 30px;
     background-color: white;
     border-radius: 5px;
 }
 /* ================================================= */
 /* ===== EXCELLENCE CAROUSEL STYLES (NEW THEME) ===== */
 /* ================================================= */
 
.section-divider {
  width: 3px;
  height: 50px;
  background-color: white;
  margin: 0 auto;
  display: flex;
align-items: center;
justify-content: center;

}

 .excellence-wrapper {
     overflow: hidden;
     position: relative;
     padding: 0;
     background-color: #ffffff;
 }
 
 .excellence-track {
     width: 300%;
     transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     gap: 1.5rem;
     padding: 0;
     margin: 0;
 }
 
 .card-slide-wrapper {
     flex-shrink: 0;
     width: calc(100% / 12);
     padding: 0 0.5rem;
     margin: 0;
     transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 .excellence-card {
     cursor: pointer;
     height: 100%;
     overflow: hidden;
     border-radius: 0.75rem;
     background-color: white;
     box-shadow: 0 10px 30px rgba(255, 255, 255, 0.5);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     position: relative;
 }
 
 .card-slide-wrapper.inactive-card {
     opacity: 1;
     transform: scale(0.95);
 }
 
 .card-slide-wrapper.active-card {
     opacity: 1;
     transform: scale(1.0);
 }
 
 .excellence-card:hover {
     transform: translateY(-8px) scale(1.02);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 0 4px #007bff;
 }
 
 .text-overlay-excellence {
     background-color: rgba(0, 123, 255, 0.9);
     transition: background-color 0.4s ease-out, opacity 0.4s ease-out;
     border-radius: 0 0 0.75rem 0.75rem;
     color: white;
     padding: 1rem;
 }
 
 .excellence-card img {
     width: 100%;
     height: 350px;
     object-fit: cover;
     border-radius: 0.75rem 0.75rem 0 0;
 }
 
 @media (max-width: 767.98px) {
     .hero {
         height: 60vh;
     }
     .excellence-card img {
         height: 250px;
     }
     .card-slide-wrapper {
         width: calc(100% / 6);
     }
 }
 /* Hover animation */
 
 .text-overlay-excellence {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     transform: translateY(0);
     transition: transform 0.6s ease, background-color 0.4s ease;
 }
 
 .excellence-card:hover .text-overlay-excellence {
     transform: translateY(-50%);
     background-color: rgba(0, 123, 255, 0.95);
     border-radius: 0.75rem;
 }
 /* Carousel controls */
 
 .excellence-wrapper .carousel-control-prev,
 .excellence-wrapper .carousel-control-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 50px;
     height: 100%;
     color: #007bff;
     background: none;
     border: none;
     opacity: 0.7;
     transition: opacity 0.15s ease;
     z-index: 5;
     display: block;
 }
 
 .excellence-wrapper .carousel-control-prev:hover,
 .excellence-wrapper .carousel-control-next:hover {
     opacity: 1;
 }
 
 .excellence-wrapper .carousel-control-prev {
     left: 0;
     background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
 }
 
 .excellence-wrapper .carousel-control-next {
     right: 0;
     background: linear-gradient(to left, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
 }
 
 .excellence-wrapper .carousel-control-prev-icon,
 .excellence-wrapper .carousel-control-next-icon {
     filter: invert(24%) sepia(91%) saturate(2250%) hue-rotate(205deg) brightness(101%) contrast(90%);
 }
 /* Indicator dots for the Excellence section */
 
 .excellence-indicator-dot {
     width: 10px;
     height: 10px;
     background-color: #6c757d;
     border-radius: 50%;
     margin: 0 5px;
     cursor: pointer;
     align-items: center;
     align-content: center;
     transition: background-color 0.3s ease, transform 0.2s ease;
 }
 
 .excellence-indicator-dot.active {
     background-color: #007bff;
     transform: scale(1.2);
     border-radius: 80%;
 }
 
 .bazoo {
     background-color: #007bff;
 }

 /* ================================================= */
 /* ------------------ Banner Section Styling (PARALLAX ADDED) ------------------ */
 
 .msa-banner-section {
     background-color: var(--banner-dark);
     /* --- IMAGE PLACEHOLDER: Replace 'path/to/pattern.jpg' with your background image path --- */
     background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)), url('../Assets/img/Courses/Ground.jpg');
     /* === PARALLAX EFFECT CSS === */
     background-attachment: fixed;
     background-size: cover;
     background-position: center;
     /* ========================= */
     color: var(--general-white);
     padding-top: 50px;
     padding-bottom: 50px;
 }
 /* Default (Desktop) Gutter */
 
 .msa-content-wrapper {
     padding-left: 50px;
     padding-right: 50px;
 }
 /* Logo Sizing (Desktop) */
 
 .msa-logo-container {
     width: 155px;
     height: 155px;
     margin-right: 40px;
     flex-shrink: 0;
 }
 
 .msa-logo-container img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }
 /* Title Sizing (Desktop) */
 
 .msa-subtitle {
     color: var(--general-white);
     font-size: 1.15rem;
     font-weight: 400;
     margin-bottom: 0;
     margin-top: -10px;
 }
 
 .msa-title-main {
     color: var(--general-white);
     font-size: 3.5rem;
     font-weight: 700;
     line-height: 1.1;
     margin-bottom: 0.2rem;
 }
 
 .msa-title-year {
     color: var(--general-white);
     font-size: 3.5rem;
     font-weight: 700;
     line-height: 1.1;
 }
 /* ------------------ Footer Bar Styling ------------------ */
 
 .msa-footer-bar {
     background-color: var(--footer-blue);
     color: var(--general-white);
     padding: 1.3rem 0;
     font-size: 1.1rem;
 }
 
 .msa-location-text {
     font-weight: 600;
     padding-left: 50px;
 }
 
 .msa-learn-more {
     color: var(--link-color);
     text-decoration: underline;
     font-weight: 500;
     margin-left: 15px;
 }
 /* ------------------ Main Content Section Styling ------------------ */
 
 .msa-main-content-section {
     background-color: var(--content-bg);
     padding: 40px 0;
 }
 /* ------------------ Events Section Styling ------------------ */
 
 .msa-events-section {
     background-color: var(--general-white);
     padding: 60px 0;
 }
 
 .msa-event-card-wrapper {
     padding: 0 15px;
 }
 
 .msa-event-card {
     background-color: var(--general-white);
     border: none;
     height: 100%;
     margin-bottom: 30px;
     border-left: 0px solid transparent;
     transition: border-left 0.3s ease-in-out;
 }
 
 .msa-event-card:hover {
     border-left: 3px solid var(--event-hover-border);
 }
 
 .msa-event-card-link {
     display: flex;
     flex-direction: column;
     text-decoration: none;
     color: inherit;
     height: 100%;
 }
 
 .msa-event-card-content {
     padding: 15px 25px 25px 25px;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 }
 
 .msa-event-date {
     color: var(--event-date-blue);
     font-size: 1rem;
     font-weight: 600;
     margin-bottom: 15px;
     display: block;
 }
 
 .msa-event-title {
     font-size: 1.6rem;
     font-weight: 700;
     line-height: 1.25;
     color: #333;
     margin-bottom: 15px;
 }
 
 .msa-event-description {
     font-size: 0.95rem;
     line-height: 1.6;
     color: #555;
     margin-bottom: 0;
     flex-grow: 1;
 }
 
 .msa-event-link-bottom {
     display: flex;
     justify-content: flex-start;
     padding: 0 25px 20px;
     align-items: center;
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
 }
 
 .msa-event-card:hover .msa-event-link-bottom {
     opacity: 1;
 }
 
 .msa-event-link-bottom .fa-link {
     color: var(--event-date-blue);
     font-size: 0.9rem;
     margin-right: 5px;
 }
 
 .msa-event-link-bottom span {
     color: var(--event-date-blue);
     font-size: 0.9rem;
     text-decoration: underline;
 }
 /* ================================================= */
 /* === MOBILE RESPONSIVENESS ADJUSTMENTS (XS/SM) === */
 /* ================================================= */
 
 @media (max-width: 767.98px) {
     /* Banner Section Stacking */
     .msa-banner-section .d-flex {
         flex-direction: column;
         align-items: flex-start !important;
     }
 }
 
 @media (max-width: 575.98px) {
     /* IMPORTANT: For mobile devices, fixed background attachment can sometimes cause issues. 
               We override it to 'scroll' on mobile for better performance and compatibility. */
     .msa-banner-section {
         background-attachment: scroll;
     }
     /* MOBILE GUTTER REDUCTION */
     .msa-content-wrapper,
     .msa-header-nav .container-fluid {
         padding-left: 20px;
         padding-right: 20px;
     }
     .msa-banner-section {
         padding-top: 30px;
         padding-bottom: 30px;
     }
     /* LOGO SCALING */
     .msa-logo-container {
         width: 100px;
         height: 100px;
         margin-right: 0;
         margin-bottom: 15px;
     }
     /* FONT SCALING (To fit smaller screens) */
     .msa-subtitle {
         font-size: 0.9rem;
         margin-top: 0;
     }
     .msa-title-main,
     .msa-title-year {
         font-size: 2rem;
     }
     .msa-title-main {
         margin-bottom: 0.1rem;
     }
     /* HEADER NAVIGATION ADJUSTMENTS */
     .msa-header-nav .container-fluid {
         flex-direction: column;
         align-items: center;
     }
     .msa-header-nav .logo {
         margin-bottom: 10px;
     }
     .msa-header-nav a {
         margin: 0 5px;
     }
     /* Footer bar stacks vertically */
     .msa-footer-bar .container-fluid {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         gap: 4px;
     }
     .msa-location-text {
         padding-left: 20px;
     }
     .msa-learn-more {
         margin-left: 20px;
     }
 }
 
 
 /* ================================================= */
 /* ===== EVENT SLIDER STYLES (Vertical Sync - EXACT MATCH) ===== */
 /* ================================================= */
 
 .event-slider-container {
     max-width: 1200px;
     margin: 0 auto;
     border-radius: 1rem;
     /* Using a cleaner shadow */
     box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }
 
 .event-slider-wrapper {
     display: flex;
     height: 500px;
     /* Fixed height for the vertical slider area - CRITICAL FOR SYNC */
     position: relative;
 }
 
 .event-image-column,
 .event-text-column {
     width: 50%;
     overflow: hidden;
     /* Mask the vertical sliding content - CRITICAL FOR HIDING OVERFLOW */
     height: 100%;
     position: relative;
 }
 /* Tracks must be full height and transition vertically */
 
 .event-image-track,
 .event-text-track {
     height: 100%;
     transition: transform 0.8s cubic-bezier(0.65, 0.05, 0.36, 1);
     /* Smooth transition */
     will-change: transform;
 }
 /* Each individual slide item must match the wrapper height */
 
 .event-slide-item {
     height: 500px;
     /* Must match .event-slider-wrapper height */
     flex-shrink: 0;
     display: flex;
     align-items: center;
 }
 /* Image Column Styling */
 
 .event-slide-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }
 /* Text Column Styling */
 
 .event-text-column {
     display: flex;
     align-items: center;
     background-color: white;
 }
 
 .event-text-content {
     padding: 3rem;
     /* Generous padding for content */
 }
 
 .event-text-content h3 {
     color: #1e40af;
     /* Tailwind blue-800 */
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 0.5rem;
 }
 /* Vertical Indicator Dots (Matching Snapshot Placement) */
 
 .event-indicator-bar {
     position: absolute;
     left: 20px;
     top: 50%;
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     gap: 12px;
     z-index: 10;
     /* Above the image */
 }
 
 .event-dot {
     width: 10px;
     height: 10px;
     background-color: rgba(255, 255, 255, 0.5);
     /* Semi-transparent white inactive */
     border: 2px solid white;
     border-radius: 50%;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .event-dot.active {
     background-color: #3b82f6;
     /* Tailwind blue-500 active */
     transform: scale(1.3);
     border-color: #3b82f6;
 }
 /* Responsive Layout: Stacks columns on small screens */
 
 @media (max-width: 767.98px) {
     .event-slider-wrapper {
         flex-direction: column;
         height: auto;
         /* Allow wrapper to grow */
     }
     .event-image-column,
     .event-text-column {
         width: 100%;
         height: 300px;
         /* Smaller fixed height for mobile image */
     }
     .event-slide-item {
         height: 300px;
         /* Match mobile column height for image slides */
     }
     .event-text-column {
         height: auto;
         padding: 0;
         /* Text content handles padding */
     }
     .event-text-track {
         /* Important: On mobile, only the image track slides. The text track should flow naturally */
         transform: none !important;
         height: auto;
     }
     .event-indicator-bar {
         left: 10px;
         top: 150px;
         /* Center dots in the smaller mobile image column */
     }
 }
 /* ------------------ Footer Bar Styling ------------------ */
 
 .msa-footer-bar {
     background-color: var(--footer-blue);
     color: var(--general-white);
     padding: 1.3rem 0;
     font-size: 1.1rem;
 }
 
 .msa-location-text {
     font-weight: 600;
     padding-left: 50px;
 }
 
 .msa-learn-more {
     color: var(--link-color);
     text-decoration: underline;
     font-weight: 500;
     margin-left: 15px;
 }
 /* ------------------ Join MSA Section ------------------ */
 
 .msa-join-section {
     /* Replace with actual patterned green background image */
     background-image: linear-gradient(rgba(60, 92, 147, 0.7), rgba(60, 147, 103, 0.7)), url('../Assets/img/Courses/craft.jpg');
     background-color: #3c9367;
     background-size: cover;
     background-position: center;
     padding: 60px 0;
     color: var(--general-white);
 }
 
 .msa-join-title {
     font-size: 2.5rem;
     font-weight: 700;
     flex-shrink: 0;
     /* Prevents text from wrapping early */
     margin-right: 40px;
     /* Space from description */
 }
 
 .msa-join-text {
     font-size: 1.15rem;
     line-height: 1.6;
     font-weight: 500;
     margin-right: 40px;
 }
 
 .btn-join-online {
     background-color: var(--join-button-green);
     color: var(--general-white);
     border: none;
     padding: 10px 25px;
     font-size: 1rem;
     font-weight: bold;
     border-radius: 4px;
     transition: background-color 0.3s;
 }
 
 .btn-join-online:hover {
     background-color: #30a061;
     color: var(--general-white);
 }
 /* ------------------ Main Content Section Styling ------------------ */
 
 .msa-main-content-section {
     background-color: var(--content-bg);
     padding: 40px 0;
 }
 
 .msa-events-section {
     background-color: var(--general-white);
     padding: 60px 0;
 }
 /* ------------------ Site Footer ------------------ */
 
 .msa-site-footer {
     background-color: var(--site-footer-bg);
     padding: 40px 0 0;
     color: #555;
     font-size: 0.95rem;
 }
 
 .msa-footer-logo-block img {
     height: 40px;
     margin-right: 10px;
 }
 
 .msa-footer-address,
 .msa-footer-contact {
     line-height: 1.7;
 }
 
 .msa-footer-contact a {
     color: #555;
     text-decoration: none;
 }
 /* Footer Column Widths for Desktop Alignment */
 
 .msa-footer-col-logo {
     flex: 0 0 350px;
     /* Specific width for logo/name block */
     max-width: 350px;
     padding-right: 50px;
 }
 
 .msa-footer-col-contact {
     flex: 1;
     /* Allow contact column to take remaining width */
 }
 
 .msa-footer-col-icons {
     flex: 0 0 200px;
     /* Fixed width for social icons */
     max-width: 200px;
 }
 
 .msa-social-icons .fa-brands {
     color: rgb(11, 11, 107);
     border-radius: 50%;
     width: 30px;
     height: 30px;
     line-height: 30px;
     text-align: center;
     margin-left: 8px;
     font-size: 0.8rem;
 }
 /* Copyright Bar */
 
 .msa-copyright-bar {
     background-color: var(--copyright-bg);
     padding: 15px 0;
     margin-top: 30px;
     font-size: 0.85rem;
     color: #777;
 }
 
 .msa-copyright-bar a {
     color: #777;
     text-decoration: none;
     margin: 0 5px;
 }
 /* ================================================= */
 /* === MOBILE RESPONSIVENESS ADJUSTMENTS (XS/SM) === */
 /* ================================================= */
 /* Override Footer Custom Column widths on Tablet/Mobile */
 
 @media (max-width: 1200px) {
     .msa-footer-col-logo,
     .msa-footer-col-contact,
     .msa-footer-col-icons {
         flex: 1 1 100%;
         /* Switch to standard 100% width stacking */
         max-width: 100%;
         margin-bottom: 20px;
         padding-right: 15px;
         /* Restore standard Bootstrap padding */
     }
     .msa-social-icons {
         justify-content: flex-start !important;
         /* Align icons left on tablet */
     }
 }
 
 @media (max-width: 767.98px) {
     /* Banner Section Stacking */
     .msa-banner-section .d-flex {
         flex-direction: column;
         align-items: flex-start !important;
     }
 }
 
 @media (max-width: 575.98px) {
     /* Parallax override for mobile performance */
     .msa-banner-section {
         background-attachment: scroll;
     }
     /* MOBILE GUTTER REDUCTION */
     .msa-content-wrapper,
     .msa-header-nav .container-fluid {
         padding-left: 20px;
         padding-right: 20px;
     }
     /* FONT SCALING (Banner) */
     .msa-title-main,
     .msa-title-year {
         font-size: 2rem;
     }
     /* JOIN SECTION SCALING */
     .msa-join-title {
         font-size: 1.8rem;
         margin-right: 0;
     }
     .msa-join-text {
         font-size: 1rem;
         margin-right: 0;
     }
     .msa-join-section .d-flex {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }
     /* FOOTER STACKING */
     .msa-site-footer .row>div {
         text-align: center;
     }
     .msa-footer-logo-block {
         display: flex;
         flex-direction: column;
         align-items: center;
     }
     .msa-social-icons {
         justify-content: center !important;
     }
     /* Copyright bar layout */
     .msa-copyright-bar .d-flex {
         flex-direction: column;
         align-items: center;
         text-align: center;
         gap: 5px;
     }
 }
 
 
 /*New carousel for service section*/
  /* Custom CSS for Parallax, Height, and Font */
        .mm-section {
            /* Using a placeholder for the background image */
            background-image: url('../Assets/img/Courses/Ground.jpg');
            background-attachment: fixed; /* Essential for Parallax effect */
            background-size: cover;
            background-position: center;
            font-family: 'Inter', sans-serif;
            position: relative;
            min-height: 100vh; /* h-screen equivalent */
        }
        
        @media (min-width: 768px) {
            .mm-section {
                min-height: 70vh; /* md:h-[70vh] equivalent */
            }
        }

        /* Logo Sizing (equivalent to w-24/h-24 and md:w-40/h-40) */
        .mm-logo {
            width: 96px; 
            height: 96px;
            object-fit: cover;
            border-radius: .5rem; /* rounded-lg */
        }
        @media (min-width: 768px) {
            .mm-logo {
                width: 160px;
                height: 160px;
            }
        }

        /* Footer Box styling */
        .mm-footer-box {
            position: absolute;
            bottom: 0;
            left: 40px;
            right: 40px;
            z-index: 2; 
            /* Increased vertical padding (py-6 equivalent) */
            padding-top: 1.5rem !important; 
            padding-bottom: 1.5rem !important;
            /* Horizontal padding equivalent to px-12/px-5 */
            padding-left: 3rem !important; 
            padding-right: 3rem !important;
            background-color: #0057ff; /* Custom blue color to match Tailwind's blue-600 */
        }

        /* Margin above footer box */
        .mm-content-align {
            margin-bottom: 6rem; /* Adjust for increased footer height on mobile */
        }
        @media (min-width: 768px) {
            .mm-content-align {
                margin-bottom: 4rem; /* Desktop margin */
            }
        }