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

.about-section{

    position:relative;

    overflow:hidden;

    padding:60px 0 140px;

    isolation:isolate;

    background: #0D182C;

}

.about-tag{
    display:flex;
    justify-content:center;
    margin-bottom:55px;
}}

.about-section .container{

    position:relative;

    z-index:5;

}

.about-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    align-items:center;

    gap:90px;

}


.about-content h2{

    margin:22px 0;

    font-size:clamp(3rem,5vw,4.6rem);

    line-height:1.05;

    color:#fff;

}

.about-content h2 span{

    display:block;

    color:#2F8CFF;

}

.about-content p{

    max-width:760px;

    margin-bottom:24px;

    color:#9FB0C5;

    font-size:1.08rem;

    line-height:1.9;

}

.about-cards{

    display:grid;

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

    gap:26px;

}

/*==========================================================
                    ABOUT CARDS
==========================================================*/

.about-card{

    position:relative;

     min-height:300px;

    padding:54px 44px;

    border-radius:24px;

     background:rgba(18,36,60,.82);

     backdrop-filter:blur(30px);

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

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

    -webkit-backdrop-filter:blur(16px);

    transition:.45s ease;

    overflow:hidden;

}

.about-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(47,140,255,.08),
        transparent 60%
    );

    opacity:0;

    transition:.45s;

}

.about-card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,122,0,.35);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);

}

.about-card:hover::before{

    opacity:1;

}

.about-card img{

    width:72px;

    height:72px;

    object-fit:contain;

    margin-bottom:26px;

}

.about-card h3{

    font-size:2.4rem;

    font-weight:700;

    color:#ffffff;

    margin-bottom:10px;

}

.about-card span{

    display:block;

    font-size:.95rem;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#FF7A00;

    margin-bottom:16px;

}

.about-card p{

    color:#9FB0C5;

    line-height:1.7;

    margin:0;

}

/*==========================================================
                        TIMELINE
==========================================================*/

.about-timeline{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin:90px 0 80px;

    padding-top:70px;

}

/*==========================================================
                    SEGMENTED LINE
==========================================================*/

.timeline-line{

    position:absolute;

    top:9px;

    left:10%;

    width:80%;

    display:flex;

    z-index:0;

}

.timeline-line .segment{

    position:relative;

    flex:1;

    height:3px;

    margin:0 6px;

    background:rgba(255,255,255,.08);

    border-radius:999px;

    overflow:hidden;

}

.timeline-line .segment::before{

    content:"";

    position:absolute;

    inset:0;

    width:0;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #FF7A00,
        #2F8CFF
    );

    transition:width .9s cubic-bezier(.22,.61,.36,1);

}

/* Active Segment */

.timeline-line .segment.active::before{

    width:100%;

}

/*==========================================================
                    TIMELINE ITEMS
==========================================================*/

.timeline-item{

    position:relative;

    flex:1;

    text-align:center;

    padding:40px 20px;

    border-radius:22px;

    background:rgba(18,36,60,.45);

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

    opacity:0;

    transform:translateY(24px);

    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.22,.61,.36,1),
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/*==========================================================
                    REVEAL ANIMATION
==========================================================*/

.timeline-item.show{

    opacity:1;

    transform:translateY(0);

}

/*==========================================================
                    HOVER
==========================================================*/

.timeline-item:hover{

    transform:translateY(-8px);

    background:rgba(18,36,60,.75);

    border-color:rgba(47,140,255,.35);

    box-shadow:
        0 0 0 1px rgba(47,140,255,.15),
        0 18px 45px rgba(0,0,0,.35),
        0 0 35px rgba(47,140,255,.18);

}

/*==========================================================
                GRADIENT BORDER
==========================================================*/

.timeline-item::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    padding:1px;

    background:linear-gradient(
        135deg,
        #FF7A00,
        #2F8CFF
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:opacity .35s ease;

    pointer-events:none;

}

.timeline-item:hover::after{

    opacity:1;

}

/*==========================================================
                        ICON
==========================================================*/

.timeline-item img{

    display:block;

    width:56px;

    height:56px;

    object-fit:contain;

    margin:0 auto 20px;

    transition:
        transform .35s ease,
        filter .35s ease;

}

.timeline-item.show img{

    transform:translateY(-4px);

    filter:drop-shadow(0 0 12px rgba(47,140,255,.22));

}

.timeline-item:hover img{

    transform:translateY(-6px) scale(1.08);

    filter:drop-shadow(0 0 16px rgba(255,122,0,.45));

}

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

.timeline-item h4{

    margin:0 0 8px;

    color:#FFFFFF;

    font-size:1.5rem;

    font-weight:700;

    line-height:1.2;

    transition:color .35s ease;

}

.timeline-item:hover h4{

    color:#2F8CFF;

}

/*==========================================================
                    DESCRIPTION
==========================================================*/

.timeline-item span{

    display:block;

    color:#AAB7C8;

    font-size:1rem;

    line-height:1.6;

    transition:color .35s ease;

}

.timeline-item:hover span{

    color:#D7E2F2;

}
/*==========================================================
                        MISSION
==========================================================*/

.about-mission{

    display:grid;

    grid-template-columns:420px 1fr;

    align-items:center;

    gap:110px;

    margin-top:25px;

    padding-top:40px;

    border-top:1px solid rgba(255,255,255,.08);

}

/*==========================================================
                    BLUEPRINT
==========================================================*/

.about-mission img{

    width:100%;

    max-width:470px;

    user-select:none;

    pointer-events:none;

    filter:
        drop-shadow(0 0 45px rgba(47,140,255,.22));

    opacity:0;

    transform:translate(-50px,-55px) scale(.96);

    transition:
        opacity 1.1s ease,
        transform 1.2s cubic-bezier(.22,.61,.36,1);

}

.about-mission.animate img{

    opacity:.95;

    transform:translate(0,-55px) scale(1);

}

/*==========================================================
                    HEADING
==========================================================*/

.mission-content h3{

    margin:0 0 38px;

    max-width:760px;

    color:#fff;

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

    font-weight:800;

    line-height:1.05;

    letter-spacing:-1.5px;

    opacity:0;

    transform:translateY(45px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,.61,.36,1);

    transition-delay:.15s;

}

.about-mission.animate h3{

    opacity:1;

    transform:translateY(0);

}

/*==========================================================
                    PARAGRAPH
==========================================================*/

.mission-content p{

    position:relative;

    max-width:580px;

    padding-left:72px;

    padding-right:55px;

    color:#AAB7C8;

    font-size:1.18rem;

    line-height:1.9;

    font-weight:500;

    opacity:0;

    transform:translateY(24px);

    transition:
        opacity .8s ease,
        transform .8s ease;

    transition-delay:.45s;

}

.about-mission.animate p{

    opacity:1;

    transform:translateY(0);

}

/*==========================================================
                    OPENING QUOTE
==========================================================*/

.mission-content p::before{

    content:"\201C";

    position:absolute;

    left:0;

    top:-34px;

    font-size:7rem;

    font-weight:800;

    font-family:"Cormorant Garamond",serif;

    line-height:1;

    color:#FF7A00;

    opacity:0;

    transform:scale(.4);

    transition:
        opacity .6s ease,
        transform .6s cubic-bezier(.34,1.56,.64,1);

    transition-delay:.85s;

}

/*==========================================================
                    CLOSING QUOTE
==========================================================*/

.mission-content p::after{

    content:"\201D";

    position:absolute;

    right:-18px;

    bottom:-65px;

    font-size:5.5rem;

    font-weight:800;

    font-family:"Cormorant Garamond",serif;

    line-height:1;

    color:#FF7A00;

    opacity:0;

    transform:scale(.4);

    transition:
        opacity .6s ease,
        transform .6s cubic-bezier(.34,1.56,.64,1);

    transition-delay:1s;

}

/*==========================================================
                ACTIVE STATE
==========================================================*/

.about-mission.animate p::before,
.about-mission.animate p::after{

    opacity:.95;

    transform:scale(1);

}