.section-header {
    text-align: center;
    max-width: 800px;
    /* margin-bottom: 50px; */
}

.eyebrow {
    display: block;
    /* color: #3a507a;  */
    color: rgb(var(--section-color));
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.section-title {
    font-size: clamp(32px, 5vw, 48px); /* Fluid typography: gets smaller on mobile automatically */
    /* color: #1d3557;  */
    color: rgb(var(--section-color));
    margin: 0 0 20px 0;
    font-weight: 800;
    line-height: 1.2;
}

.section-description {
    font-size: 18px;
    /* color: #64748b;  */
    color: rgb(var(--section-color));
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Optional: Add a subtle divider line below the title */
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    /* background: #1d3557; */
    background: rgb(var(--section-color));
    margin: 25px auto 0 auto;
    border-radius: 2px;
}

/* Container Wrapper */
.innovation-container {
    background-color: rgb(249, 250, 251); /* The solid white background */
    border-radius: 20px; /* Matches your other rounded corners */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); /* Soft drop shadow for lift */
    padding: 50px;
    width: 100%;
    max-width: 1200px; /* Keeps it from stretching too far on huge monitors */
    box-sizing: border-box;
    border: 1px rgb(222, 222, 222) solid;
}

/*-------------- Innovation section ------------ */
.innovations {

    position:relative;
    z-index: 10;
    background-color: white; 
    /* margin-top: 150px; */
    padding: 80px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
}

/*  */

.recent-adv, .future-adv{
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    font-size: 15px;
    color: rgb(101, 101, 101)
}

.recent-adv li, .future-adv li{
    max-width: 520px;
    height: 275px;
    padding: 25px;
    transition: all .4s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px;
    
}

.inv-title {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 24px;
    color: #1a202c;
    margin-bottom: 30px;
    border-bottom: 2px solid #edf2f7; /* A subtle dividing line under the title */
    padding-bottom: 15px;
}

/* ---------------- RECENT ---------------- */

.recent-adv li {
    padding-top: 65px;
    padding-bottom: 35px;
    position: relative;
    overflow: hidden; 
    box-shadow: 0 1px 25px rgba(0, 0, 0, .25);
    border: .5px solid #E5E7EB;
    background-color: white;
    outline: 1px solid rgb(215, 215, 215);
}

.recent-adv li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 9px;
    background: rgb(225, 226, 228);
    /* background-color: #1fa2ff */
}

/* .bottom-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: rgb(225, 226, 228);
    transform: scaleX(0);
    transform-origin: center;
    z-index: 10;
    transition: all .45s ease-in-out;
} */

.recent-adv li:hover .bottom-bar{
    transform: scaleX(1);
}

.recent-adv li:hover {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.741);
}

.card-btn {
    text-decoration: none;
    background-color: rgb(225, 226, 228); /* Sunexcore primary dark blue */
    color: rgb(82, 82, 82);
    border: none;
    padding: 8px 18px; /* Slightly smaller padding for card fit */
    border-radius: 50px; /* Pill shape */
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle depth */
    border: 1px solid rgb(166, 166, 166);
}

.card-btn:hover {
    /* background-color: #3a507a; Lighter blue on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* ---------------- FUTURE ---------------- */

.future-adv li{
    padding-top: 55px !important;
    padding-bottom: 35px !important;
    background: #0a1039; /* turns future adv container purple*/ 
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 25px rgba(0, 0, 0, .55);
    color: rgb(184, 184, 184);
    isolation: isolate; /* important */
    
}
.future-adv li:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.95);
    transition: box-shadow 0.35s ease-in-out;
}
/* lift ALL content above the glow */
.future-adv li > * {
    position: relative;
    z-index: 2;
}

/* center-weighted glow */
.future-adv li::after {
    content: "";
    position: absolute;
    inset: 0;
    
    /* background: radial-gradient(
        circle at center,
        rgba(var(--glow-color),60) 0%,
        rgba(var(--glow-color),60) 0%,
        rgba(var(--glow-color),60) 0%,
        rgba(var(--glow-color),60) 0%,
        transparent 110%
    ); */
    opacity: 0;
    filter: blur(120px);
    transition: opacity 1.2s ease;
    pointer-events: none;
    z-index: 1;
}

.future-adv li:hover::after {

    
    opacity: 1;
}


/* ---------------- CONTENT ---------------- */

.icon-bg {
    width: 50px;
    height: 50px;
    background: rgb(225, 226, 228);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.innovations img{
    width: 50px;
    height: 50px;
}

.status, .time-frame{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.time-frame {
    display: flex;
    align-items: center; /* Changed from flex-start to perfectly center the button */
    justify-content: space-between;
    border-top: 1px solid rgb(218, 218, 218);
    padding-top: 15px;
    margin-top: auto;
}

.status p{
    background: rgba(147, 237, 193, 0.287);
    color: green;
    border-radius: 50px;
    
    /* 1. The Magic Fix: Enable Flexbox */
    display: flex;
    justify-content: center; /* Horizontal center */
    align-items: center;     /* Vertical center */
    
    /* 2. Better Width Strategy */
    min-width: 90px;        /* Minimum size so it doesn't look squashed */
    padding: 0 15px !important; /* Side padding so long text doesn't touch the edges */
    height: 40px;            /* 50px was a bit tall, 40px is usually the "sweet spot" */
    
    /* 3. Cleanup */
    font-size: 13px;
    font-weight: 500;        /* Makes the status slightly more readable */
    margin: 0;
}

.recent-adv li h3, 
.recent-adv li p,
.future-adv li h3, 
.future-adv li p  {
    margin: 0;
    padding: 20px 0;
}


.future-adv-con{

    padding-top: 50px !important;

}

.quarter{

background: rgba(88, 43, 171, 0.502) !important;
color: rgb(164, 127, 233) !important;
/* font-size */
background-color: #1988d8;
}

@media (max-width: 900px) {
    .recent-adv, .future-adv {
        grid-template-columns: 1fr; 
        
        /* FIX 1: Centers the grid tracks in the container */
        justify-content: center; 
        
        /* FIX 2: Centers the cards within the grid tracks */
        justify-items: center; 
        
        width: 100%;
        padding: 0;
        gap: 25px;
    }

    .recent-adv li, .future-adv li {
        /* FIX 3: Ensure margin is auto so it sits in the middle */
        margin: 0 auto;
        
        /* Keep your fluid width so it doesn't poke out the sides */
        width: 90%; 
        max-width: 570px; 
        
        height: auto;
        min-height: 275px;
    }
}