.hero{
   width: 100%;
    /* Changed to min-height: calc(100vh - nav_height) if needed, 
       but 100vh works if you want full screen */
    min-height: 100vh; 
    background-repeat: no-repeat;
    background-color: var(--page-background);
    background-size: cover;
    background-position: center; /* Keeps your background centered */
    padding: 0; /* Adjusted padding to let Bootstrap containers do the structural lifting */
    overflow: hidden;
    display: flex;
    align-items: center; /* Centers content vertically if min-height is 100vh */
}

.about-text-top h2{
    font-family: "Oswald", sans-serif;
    color: var(--app-main);
}
.stat-info{
    margin: 0 auto;       /* 2. Centers the block itself (0 top/bottom, auto left/right) */
  text-align: center;
}

.hero-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.anim {
    opacity: 0;
    transform: translateY(40px); /* Start 40px lower */
   transition: opacity 1s cubic-bezier(0.215, 0.610, 0.355, 1.000), 
                transform 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.hero .anim {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity; /* Optimizes mobile performance */
}

.page-fully-loaded .hero .anim {
    opacity: 1;
    transform: translateY(0);
}

.page-fully-loaded .hero h1.anim                  { transition-delay: 0.1s; }
.page-fully-loaded .hero p.anim                   { transition-delay: 0.25s; }
.page-fully-loaded .hero .d-flex.anim, 
.page-fully-loaded .hero .btn-app.anim            { transition-delay: 0.4s; }
.page-fully-loaded .hero img.hero-img.anim        { transition-delay: 0.3s; }

@keyframes moveup {
    100% {
        opacity: 1;
        transform: translateY(0); /* Returns to its natural structural position */
    }
}
.gallery-card {
    position: relative;
    width: 100%;
    height: 280px;            /* Normalize differing layouts */
    overflow: hidden;
    border-radius: 8px;
    background-color: #1a1a1a;
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* Crops and fits image perfectly without distortion */
    object-position: center;  /* Centers layout focal boundaries */
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 100%);
    display: flex;
    align-items: flex-end;    /* Places textual cards along the bottom shelf */
    padding: 25px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

.overlay-text {
    transform: translateY(15px);
    transition: transform 0.4s ease;
    text-align: left;
}

.overlay-text h5 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--app-main) !important;
    margin-bottom: 5px;
}

.world-map-section{
    background-color: var(--page-background) ;
}

.upcoming-competitions{
    background-color: var(--page-background);
}

.overlay-text p {
    font-size: 0.9rem;
    color: var(--app-white);
    margin: 0;
}

/* Gallery Hover State Activations */
.gallery-card:hover img {
    transform: scale(1.06);   /* Elegant micro zoom effect */
}

.gallery-card:hover .gallery-hover-overlay {
    opacity: 1;
}

.gallery-card:hover .overlay-text {
    transform: translateY(0);
    color: var(--app-white);
}

.gallery-card:hover .overlay-text h4 {
    color: #c6eefd !important; /* Dynamic color shift to light blue on hover */
}

.mean-container .mean-nav{
    background-color: #07133c;
}

   .btn-outline-app{
        color: var(--app-main) !important;
        border: 1px solid var(--app-main) !important;
        background: transparent;
        transition: all 0.3s ease-in-out;
        font-weight: 500;
    }
    .btn-outline-app:hover{
        background-color: var(--app-main) !important;
        color: var(--page-background) !important;
    }

    .btn-outline-app:focus,
    .btn-outline-app:active{
         background: var(--app-main) !important;
        border-color: var(--app-main) !important;
        color: #fff !important;
        box-shadow: none;
    }

/* Lightbox2 Caption Elements Overrides */
#lightbox .lb-caption {
    font-size: 1rem !important;
    line-height: 1.5;
    padding-top: 8px;
}

.bg-app-light{
    background-color: #15173D;
}

.bg-light{
    background-color: #c6eefd;
}

#lightbox .lb-caption strong {
    color: var(--app-white);   /* Highlights the main title inside Lightbox modal */
}

/* ==========================================================================
   2. Navigation & Global UI Component Buttons
   ========================================================================== */
.btn-app {
    background-color: var(--app-main) !important;
    color: var(--page-background) !important;
}

.btn-app:hover {
    background-color: var(--page-grey) !important;
    
}

.menu-link:focus, 
.menu-link:active,
.header-btn-wrapper a:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.menu-link.active {
    color: var(--app-main) !important;
    font-weight: bold;
}



.single-page-blog-content-body p{
    color: #fff;
}
/* ==========================================================================
   3. Video Card Overlay & Animated Play Button Components
   ========================================================================== */
.video-card-img-wrapper {
    position: relative;
    overflow: hidden;
}

.video-card-img-wrapper img {
    transition: transform 0.3s ease;
}

/* Play button overlay structural layer */
.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.3s ease;
    text-decoration: none;    /* Removes link underline */
}

/* Circular Play Button Container Base style */
.play-btn-circle {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border: 3px solid var(--app-main-bright);
    color: var(--app-main-bright);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}

.bg-app{
    background-color: var(--app-main);
}

/* FontAwesome icon alignment inside circle */
.play-btn-circle i {
    font-size: 1.8rem;
    color: #fff;
    margin-left: 5px;         /* Centers the triangle icon visually */
    transition: all 0.3s ease;
}

/* Card Interaction Triggers (Unified Rules) */
.card:hover .video-card-img-wrapper img {
    transform: scale(1.05);   /* Thumbnail scale */
}

.card:hover .play-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
}

.card:hover .play-btn-circle {
    transform: scale(1.1);
    background: var(--app-main);      /* High priority blue background match */
    border-color: var(--app-main);
    color: #fff;
    animation: pulse-glow 1.5s infinite; /* Activates glow loop */
}

.card:hover .play-btn-circle i {
    color: #ffffff !important; /* Enforces white icon on hover */
}

.pagination-link{
width: 46px;
height: 46px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}

.text-dark{
    color: var(--black-color);
}

/* Pure CSS Glowing/Pulse animation targeting the circle border shadow */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 194, 209, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(20, 52, 164, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(20, 52, 164, 0);
    }
}

.progress-section {
  background-color: var(--app-main);
}

.progress-track-custom {
    background-color:var(--page-grey) !important;
    overflow: visible; /* Allows glowing effects if desired */
    padding: 3px;
}

.progress-section h2 {
    letter-spacing: -0.5px;
}

/* Custom background pulsing effect if active */
.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite !important;
}

.progress-bar-striped {
    /* Creates a sleek, sharp angled stripe pattern */
   background-image: linear-gradient(
    45deg,
    rgba(255, 215, 0, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 215, 0, 0.2) 50%,
    rgba(255, 215, 0, 0.2) 75%,
    transparent 75%,
    transparent
);
    background-size: 1rem 1rem;
    
    /* Adds a modern neon energy glow to the bar */
    box-shadow: 0 0 12px rgba(13, 202, 240, 0.5); 
    
    /* Smooth scaling when data updates via Livewire */
    transition: width 1.2s cubic-bezier(0.1, 1, 0.1, 1) !important; 
}

@keyframes progress-bar-stripes {
    0% {
        background-position: 1rem 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* --- Supporters Slider Custom Canvas --- */
.supporters-slider-section {
   background-color: var(--app-main) !important;
}

/* Base Card Configuration */
.supporter-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s;
    width: 100%;
}

.supporter-card:hover {
    transform: translateY(-4px);
    border-color: rgba(13, 202, 240, 0.3);
}

/* Dynamic Tier Scaling Engine */
.tier-elite {
    min-height: 160px;
    max-width: 260px;
    background: linear-gradient(145deg, rgba(13, 202, 240, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(13, 202, 240, 0.15);
}

.tier-elite .supporter-name {
    font-size: 1.1rem; /* Visually dominant text */
}

.tier-supporter {
    min-height: 120px;
    max-width: 200px;
    opacity: 0.75; /* Subtly understated compared to Elite tiers */
}

.tier-supporter .supporter-name {
    font-size: 0.9rem;
}

/* Swiper Styling Hooks */
.supporters-swiper {
    padding: 20px 0 40px 0 !important;
}

.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.2) !important;
}

.swiper-pagination-bullet-active {
    background: #0dcaf0 !important; /* Matches theme text-info */
}

.text-info{
    color: var(--page-background) !important;
}

.milestone-header{
    color: var(--app-main);
}

.row-mobile-margin{
    background-color: var(--app-main);
    padding: 10px;
    border-radius: 10px;
}

.text-count{
    color: var(--page-gold);
}

    .about-years-experience,.about-complete-project{
        border: 1px solid #fff;
        padding: 6px;
        border-radius: 8px;
    }
/* Remove the absolute layer styling to let the lists flow naturally beneath the titles */
.about-complete-project .list-group,
.about-years-experience .list-group {
    position: static;
    width: 100%;
    height: auto;
    z-index: initial;
    opacity: 1;                  /* Always visible */
    pointer-events: auto;        /* Always interactable */
    transform: none;
    
    background-color: transparent; /* Seamless blend with the page section background */
    box-shadow: none;             /* Clean flat look since it doesn't pop out anymore */
    padding: 0; 
    margin-top: 15px;            /* Adds uniform space right below the titles */
}

/* Maintain your borderless large text styling */
.about-complete-project .list-group-item,
.about-years-experience .list-group-item {
    border: none;             
    font-size: 1.1rem;           /* Slightly balanced for inline flow */
    padding: 6px 0;              /* Snugger spacing for lists that flow with content */
    background: transparent;  
    color: var(--page-background); 
    font-weight: 500;             /* Matches typical body context secondary text */
}

/* Force standard alignment across the metrics grid */
.about-complete-project,
.about-years-experience {
    width: 100%;
    align-self: flex-start;      /* Aligns multiple blocks nicely at the top of the flex container */
}


.app-color{
    color: var(--app-main);
}

.profile-bio-section{
    background-color: var(--page-background) !important;
}

.text-color{
    color: var(--app-white);
}

.pledge-text{
font-family: "Barlow", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 11px;
font-style: italic;
margin-top: 10px;

}
.pledge-text-white{
    font-family: "Barlow", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 11px;
font-style: italic;
margin-top: 10px;
color: #fff;

}

.sponsor-tier{
font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-size: 0.65rem;
  color: var(--page-background);
}

.sponsor-tier-white{
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-size: 0.65rem;
  color: #fff !important;  
}

.music-player-btn {
position: fixed;
bottom: 30px;
right: 30px;
width: 55px;
height: 55px;
border-radius: 50%;
background-color: var(--app-main); /* Adjust color to fit your brand */
color: #ffffff;
border: none;
outline: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
cursor: pointer;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
transition: all 0.3s ease;
}

.music-player-btn:hover {
transform: scale(1.1);
background-color: var(--app-main-dark);
}

/* ===== JOURNEY TIMELINE v2 ===== */
.journey-timeline-v2 {
   
    color: #f3efe3;
}

.jt-prologue {
    padding: 18px 22px;
    border-left: 3px solid #ffc72c;
    background: rgba(255, 199, 44, 0.06);
    border-radius: 0 10px 10px 0;
}

.jt-prologue-tag {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #ffc72c;
    margin-bottom: 8px;
}

.jt-prologue p {
    color: #c9c4b4;
    font-size: 14px;
    line-height: 1.7;
}

/* Year tabs */
.jt-year-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.jt-year-tab {
    font-family: monospace;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(243, 239, 227, 0.25);
    background: transparent;
    color: #c9c4b4;
    cursor: pointer;
    transition: all .2s ease;
}

.jt-year-tab:hover,
.jt-year-tab.active {
    border-color: #ffc72c;
    background: #ffc72c;
    color: #08181d;
}

/* Timeline shell */
.jt-timeline {
    position: relative;
    margin-top: 40px;
    padding-left: 24px;
}

.jt-belt-track {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 6px;
    background: rgba(243, 239, 227, 0.08);
    overflow: hidden;
}

.jt-belt-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #00c2d6 0%, #ffc72c 100%);
    transition: height .1s linear;
}

.jt-year-block {
    margin-bottom: 56px;
}

.jt-year-num {
    font-weight: 900;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1;
    color: #ffc72c;
}

.jt-year-stat-tag {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
    color: #08181d;
    font-weight: 600;
    background: #ffc72c;
}

.jt-year-tagline {
    font-family: monospace;
    color: #c9c4b4;
    font-size: 13px;
    letter-spacing: .03em;
}

/* Cards */
.jt-card {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(243, 239, 227, 0.03);
    border: 1px solid rgba(243, 239, 227, 0.1);
    border-radius: 10px;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
    opacity: 0;
    transform: translateY(14px);
}

.jt-card.jt-in {
    opacity: 1;
    transform: translateY(0);
}

.jt-card:hover {
    border-color: rgba(0, 194, 214, 0.4);
    background: rgba(0, 194, 214, 0.05);
}

.jt-card-major {
    border-color: rgba(255, 199, 44, 0.4);
    background: rgba(255, 199, 44, 0.05);
}

.jt-card-life {
    border-color: rgba(255, 107, 74, 0.4);
    background: rgba(255, 107, 74, 0.05);
}

.jt-flag {
    width: 20px;
    /* flex: 0 0 30px; */
    height: 10px;
    border-radius: 1px;
    margin-top: 2px;
    box-shadow: 0 0 0 1px rgba(243, 239, 227, 0.15);
}

.jt-card-body {
    flex: 1;
    min-width: 0;
}

.jt-card-title {
    font-weight: 600;
    font-size: 15px;
    color: #f3efe3;
    line-height: 1.35;
}

.jt-card-major .jt-card-title {
    font-weight: 700;
    font-size: 16px;
}

.jt-card-meta {
    font-family: monospace;
    font-size: 11.5px;
    color: #c9c4b4;
    margin-top: 5px;
}

.jt-card-note {
    font-size: 13px;
    color: #c9c4b4;
    margin-top: 8px;
    line-height: 1.55;
}

.jt-tag {
    display: inline-block;
    font-family: monospace;
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
}

.jt-tag-comp   { background: rgba(0, 194, 214, 0.15); color: #00c2d6; }
.jt-tag-train  { background: rgba(243, 239, 227, 0.08); color: #c9c4b4; }
.jt-tag-camp   { background: rgba(46, 139, 87, 0.18); color: #8fd6ac; }
.jt-tag-major  { background: #ffc72c; color: #08181d; font-weight: 700; }
.jt-tag-life   { background: #ff6b4a; color: #08181d; font-weight: 700; }

.jt-medal-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 700;
    margin-left: 8px;
    vertical-align: middle;
}

.jt-medal-gold   { background: #ffd23f; color: #08181d; }
.jt-medal-silver { background: #d6dbe0; color: #08181d; }
.jt-medal-bronze { background: #c9773a; color: #08181d; }

/* Responsive */
@media (max-width: 575.98px) {
    .jt-timeline {
        padding-left: 14px;
    }

    .jt-card {
        flex-direction: column;
    }

    .jt-flag {
        width: 26px;
        flex-basis: auto;
    }
}