/*==========================================================
ABOUT HERO
Executive Blue Theme
Version 3.0
==========================================================*/



/*==========================================================
1. HERO SECTION
==========================================================*/

.about-hero{

    position:relative;

    overflow:hidden;

    padding:150px 0 80px;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fbff 100%
    );

}



/*==========================================================
2. BACKGROUND
==========================================================*/

.about-hero::before{

    content:"";

    position:absolute;

    top:-220px;

    right:-260px;

    width:900px;

    height:900px;

    background:

    radial-gradient(

        circle,

        rgba(14,73,124,.08) 0%,

        rgba(14,73,124,.04) 42%,

        rgba(14,73,124,0) 72%

    );

    pointer-events:none;

}



.about-hero::after{

    content:"";

    position:absolute;

    bottom:-250px;

    left:-220px;

    width:620px;

    height:620px;

    background:

    radial-gradient(

        circle,

        rgba(214,40,40,.05) 0%,

        rgba(214,40,40,0) 70%

    );

    pointer-events:none;

}



/*==========================================================
3. CONTAINER
==========================================================*/

.about-hero .container{

    position:relative;

    z-index:2;

}



/*==========================================================
4. GRID
==========================================================*/

.about-hero-grid{

    display:grid;

    grid-template-columns:minmax(420px,1fr) minmax(520px,1.15fr);

    gap:60px;

    align-items:center;

}



/*==========================================================
5. LEFT CONTENT
==========================================================*/

.about-hero-content{

    max-width:560px;

}



/*==========================================================
6. ABOUT LABEL
==========================================================*/

.about-section-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:0;

    padding:10px 20px;

    margin-bottom:34px;

    border-radius:40px;

    background:#ffffff;

    border:1px solid rgba(14,73,124,.08);

    box-shadow:

    0 10px 30px

    rgba(14,73,124,.06);

    font-family:var(--font-heading);

    font-size:.95rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--primary-blue);

    text-align:center;

}



.about-section-label::before{

    content:none;

}



/*==========================================================
7. HERO TITLE
==========================================================*/

.about-hero-title{

    margin:0;

    font-family:var(--font-heading);

    font-size:clamp(4.8rem,5.8vw,6.3rem);

    line-height:1.03;

    letter-spacing:-1px;

    color:var(--primary-blue);

    text-wrap:balance;

}



.about-hero-title span{

    color:var(--accent);

}



/*==========================================================
8. INTRODUCTION
==========================================================*/

.about-hero-introduction{

    margin-top:38px;

    max-width:36ch;

    font-size:1.15rem;

    line-height:1.9;

    color:var(--text-dark);

}



/*==========================================================
9. BELIEF CARD
==========================================================*/

.about-core-belief{

    margin-top:42px;

    padding:28px 34px;

    background:#ffffff;

    border-radius:22px;

    border-left:6px solid var(--primary-red);

    box-shadow:

    0 18px 45px

    rgba(14,73,124,.08);

}



.about-belief-year{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 18px;

    border-radius:40px;

    background:

    rgba(214,40,40,.08);

    font-family:var(--font-heading);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:var(--primary-red);

}



.about-belief-title{

    margin:0;

    font-family:var(--font-heading);

    font-size:2rem;

    line-height:1.4;

    color:var(--primary-blue);

}



/*==========================================================
10. HERO IMAGE
==========================================================*/

.about-hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    padding-right: 25px;

}



.about-hero-image::before{

    content:"";

    position:absolute;

    width:850px;

    height:850px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(14,73,124,.10),

        rgba(14,73,124,0)

    );

    z-index:0;

}



.about-hero-image img{

    position: relative;
    z-index: 2;

    width: auto;
    max-width: 100%;
    height: auto;

    display: block;

    transition: transform .4s ease;
}


.about-hero-image:hover img{

    transform:

    translateY(-8px);

}



/*==========================================================
TYPOGRAPHY ENHANCEMENT
==========================================================*/

.about-hero-title,

.about-belief-title{

    text-wrap:balance;

}



.about-hero-introduction{

    text-wrap:pretty;

}



/*==========================================================
IMAGE QUALITY
==========================================================*/

.about-hero img{

    image-rendering:auto;

}

/*==========================================================
ABOUT HERO
Version 3.0

==========================================================*/



/*==========================================================
11. IMPACT BAR
==========================================================*/

.about-impact-bar{

    display:grid;

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

    align-items:center;

    margin-top:70px;

    padding:35px 25px;

    background:#ffffff;

    border-radius:24px;

    border:1px solid rgba(14,73,124,.08);

    box-shadow:
        0 18px 50px rgba(14,73,124,.08);

}



/*==========================================================
12. IMPACT ITEM
==========================================================*/

.about-impact-item{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:10px 25px;

}



/*==========================================================
13. DIVIDERS
==========================================================*/

.about-impact-item:not(:last-child)::after{

    content:"";

    position:absolute;

    top:15%;

    right:0;

    width:1px;

    height:70%;

    background:
        linear-gradient(
            transparent,
            rgba(14,73,124,.15),
            transparent
        );

}



/*==========================================================
14. ICON
==========================================================*/

.about-impact-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:60px;

    height:60px;

    margin-bottom:18px;

}



.about-impact-icon img{

    width:46px;

    height:46px;

    object-fit:contain;

    transition:
        transform .35s ease;

}



/*==========================================================
15. VALUE
==========================================================*/

.about-impact-value{

    margin:0;

    font-family:var(--font-heading);

    font-size:3.3rem;

    font-weight:700;

    line-height:1;

    letter-spacing:-1px;

    color:var(--primary-blue);

}



/*==========================================================
16. LABEL
==========================================================*/

.about-impact-text{

    margin-top:12px;

    max-width:170px;

    font-family:var(--font-body);

    font-size:.97rem;

    line-height:1.6;

    font-weight:500;

    color:#5f6b7a;

}



/*==========================================================
17. HOVER EFFECT
==========================================================*/

.about-impact-item{

    transition:
        transform .30s ease;

}



.about-impact-item:hover{

    transform:translateY(-8px);

}



.about-impact-item:hover .about-impact-icon img{

    transform:scale(1.10);

}



.about-impact-item:hover .about-impact-value{

    color:var(--primary-red);

}



/*==========================================================
18. MICRO ANIMATION
==========================================================*/

.about-impact-item::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%) scaleX(0);

    width:60px;

    height:3px;

    border-radius:10px;

    background:var(--primary-red);

    transition:
        transform .35s ease;

}



.about-impact-item:hover::before{

    transform:translateX(-50%) scaleX(1);

}



/*==========================================================
19. PREMIUM SPACING
==========================================================*/

.about-impact-item > *{

    position:relative;

    z-index:2;

}



/*==========================================================
20. IMAGE RENDERING
==========================================================*/

.about-impact-icon img{

    image-rendering:auto;

}

/*==========================================================
ABOUT HERO
Version 3.0
==========================================================*/


/*==========================================================
21. HERO BUTTONS
==========================================================*/

.about-hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:-16px;

    position:relative;

    z-index:10;

}



/*==========================================================
22. BUTTON OVERRIDES
==========================================================*/

.about-hero-buttons .primary-button,
.about-hero-buttons .secondary-button{

    min-width:230px;

    padding:16px 34px;

    border-radius:50px;

    text-align:center;

    transition:
        transform .30s ease,
        box-shadow .30s ease;

}



.about-hero-buttons .primary-button{

    box-shadow:
        0 12px 28px rgba(14,73,124,.18);

}



.about-hero-buttons .primary-button:hover,
.about-hero-buttons .secondary-button:hover{

    transform:translateY(-4px);

}



.about-hero-buttons .primary-button:hover{

    box-shadow:
        0 18px 40px rgba(14,73,124,.22);

}



/*==========================================================
23. TABLET
==========================================================*/

@media (max-width:1200px){

    .about-hero{

        padding:145px 0 76px;

    }

    .about-hero-grid{

        gap:50px;

    }

    .about-hero-title{

        font-size:clamp(4rem,7vw,5.3rem);

    }

    .about-belief-title{

        font-size:1.75rem;

    }

    .about-impact-bar{

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

        gap:35px 20px;

        padding:35px;

    }

    .about-impact-item::after{

        display:none;

    }

}



/*==========================================================
24. MOBILE
==========================================================*/

@media (max-width:992px){

    .about-hero{

        padding:138px 0 72px;

    }

    .about-hero-grid{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

    }

    .about-hero-content{

        max-width:100%;

    }

    .about-section-label{

        margin-left:auto;

        margin-right:auto;

    }

    .about-hero-introduction{

        max-width:100%;

    }

    .about-core-belief{

        text-align:left;

    }

    .about-hero-image{

        order:-1;

    }

    .about-hero-image img{

        max-width:600px;

    }

    .about-impact-bar{

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

        margin-top:50px;

        padding:30px;

    }

    .about-impact-item{

        padding:10px;

    }

    .about-impact-item::after{

        display:none;

    }

    .about-impact-value{

        font-size:2.8rem;

    }

    .about-hero-buttons{

        flex-direction:column;

        margin-top:30px;

        gap:18px;

    }

    .about-hero-buttons .primary-button,
    .about-hero-buttons .secondary-button{

        width:100%;

        max-width:340px;

    }

}



@media (max-width:768px){

    .about-hero{

        padding:130px 0 70px;

    }

}


/*==========================================================
25. SMALL MOBILE
==========================================================*/

@media (max-width:576px){

    .about-hero{

        padding:120px 0 60px;

    }

    .about-hero-title{

        font-size:3rem;

        line-height:1.08;

    }

    .about-hero-introduction{

        font-size:1rem;

        line-height:1.8;

    }

    .about-core-belief{

        padding:24px;

    }

    .about-belief-title{

        font-size:1.45rem;

    }

    .about-impact-bar{

        grid-template-columns:1fr;

        gap:30px;

        padding:28px 24px;

    }

    .about-impact-value{

        font-size:2.5rem;

    }

    .about-impact-text{

        font-size:.92rem;

    }

}



/*==========================================================
26. KEYBOARD ACCESSIBILITY
==========================================================*/

.about-hero-buttons a:focus-visible{

    outline:3px solid rgba(214,40,40,.35);

    outline-offset:4px;

    border-radius:50px;

}



/*==========================================================
27. REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

    .about-hero *{

        transition:none !important;

        animation:none !important;

    }

}