/*
==================================================
ABOUT HERO
==================================================
*/

.sidv-about-hero{

    position:relative;

    overflow:hidden;

    padding:8rem 0;

    background:
    radial-gradient(circle at top right,rgba(245,158,11,.12),transparent 35%),
    radial-gradient(circle at bottom left,rgba(255,255,255,.05),transparent 30%),
    linear-gradient(
        135deg,
        #0D2137 0%,
        #15385C 45%,
        #1F4E79 100%
    );

}

.sidv-about-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(255,255,255,.06),
            transparent 35%
        ),

        radial-gradient(
            circle at 90% 85%,
            rgba(245,158,11,.08),
            transparent 28%
        );

    pointer-events:none;

}

.sidv-about-hero>*{

    position:relative;

    z-index:2;

}

/*
==================================================
WRAPPER
==================================================
*/

.sidv-about-hero__wrapper{

    display:grid;

    grid-template-columns:1.25fr .9fr;

    gap:5rem;

    align-items:center;

}

/*
==================================================
CONTENT
==================================================
*/

.sidv-about-hero__content{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}

.sidv-about-hero.is-visible
.sidv-about-hero__content{

    opacity:1;

    transform:none;

}

/*
==================================================
EYEBROW
==================================================
*/

.sidv-about-hero__eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.65rem 1.2rem;

    border-radius:999px;

    background:rgba(245,158,11,.14);

    border:1px solid rgba(245,158,11,.25);

    color:#FBBF24;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

/*
==================================================
TITLE
==================================================
*/

.sidv-about-hero h1{

    margin:1.5rem 0;

    max-width:760px;

    font-size:clamp(2.8rem,4vw,4.3rem);

    line-height:1.08;

    color:#FFFFFF;

}

/*
==================================================
TEXT
==================================================
*/

.sidv-about-hero p{

    max-width:680px;

    font-size:1.08rem;

    line-height:1.9;

    color:rgba(255,255,255,.82);

}

/*
==================================================
FEATURES
==================================================
*/

.sidv-about-hero__features{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:1rem 2rem;

    list-style:none;

    margin:2.5rem 0;

    padding:0;

}

.sidv-about-hero__features li{

    position:relative;

    padding-left:1.8rem;

    font-weight:600;

    color:#FFFFFF;

}

.sidv-about-hero__features li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#F59E0B;

    font-weight:700;

}

/*
==================================================
BUTTONS
==================================================
*/

.sidv-about-hero__actions{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:2.5rem;

}

.sidv-about-hero__actions .sidv-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:1rem 2rem;

    border-radius:999px;

    background:#F59E0B;

    color:#FFF;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.sidv-about-hero__actions .sidv-btn-primary:hover{

    background:#D97706;

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(245,158,11,.35);

}

.sidv-about-hero__actions .sidv-btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:1rem 2rem;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.35);

    background:transparent;

    color:#FFFFFF;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.sidv-about-hero__actions .sidv-btn-secondary:hover{

    background:#FFFFFF;

    color:#0D2137;

    border-color:#FFFFFF;

    transform:translateY(-3px);

}

/*
==================================================
VISUAL
==================================================
*/

.sidv-about-hero__visual{

    opacity:0;

    transform:translateY(40px);

    transition:.9s ease .15s;

}

.sidv-about-hero.is-visible
.sidv-about-hero__visual{

    opacity:1;

    transform:none;

}

/*
==================================================
CARD
==================================================
*/

.sidv-about-hero__card{

    padding:2.8rem;

    border-radius:30px;

    background:#FFFFFF;

    border:1px solid rgba(255,255,255,.5);

    box-shadow:0 35px 70px rgba(0,0,0,.18);

    transition:.35s;

}

.sidv-about-hero__card:hover{

    transform:translateY(-8px);

}

.sidv-about-hero__card h3{

    margin:1.5rem 0 1rem;

    font-size:1.55rem;

    color:#0F172A;

}

.sidv-about-hero__card p{

    color:#64748B;

    line-height:1.85;

}

/*
==================================================
STATS
==================================================
*/

.sidv-about-hero__stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:1rem;

    margin-top:2.2rem;

}

.sidv-about-hero__stats div{

    padding:1.25rem;

    border-radius:18px;

    border:1px solid #EEF2F6;

    background:#F8FAFC;

    text-align:center;

}

.sidv-about-hero__stats strong{

    display:block;

    margin-bottom:.4rem;

    font-size:1.55rem;

    color:#F59E0B;

}

.sidv-about-hero__stats span{

    color:#64748B;

    font-size:.85rem;

}

/*
==================================================
RESPONSIVE
==================================================
*/

@media(max-width:1100px){

    .sidv-about-hero__wrapper{

        grid-template-columns:1fr;

        gap:3rem;

    }

}

@media(max-width:768px){

    .sidv-about-hero{

        padding:6rem 0;

    }

    .sidv-about-hero h1{

        font-size:2.4rem;

    }

    .sidv-about-hero__features{

        grid-template-columns:1fr;

    }

    .sidv-about-hero__actions{

        flex-direction:column;

    }

    .sidv-about-hero__actions a{

        width:100%;

    }

    .sidv-about-hero__stats{

        grid-template-columns:1fr;

    }

}