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

.about-section{

    position:relative;

    overflow:hidden;

    background:#0b1220;

}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.about-container{

    width:min(1400px, 92%);

    min-height:760px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(0, .98fr);

    align-items:stretch;

}


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

.about-content{

    position:relative;

    z-index:3;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        90px
        70px
        90px
        0;

}


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

.about-eyebrow{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:22px;

    color:var(--primary);

    font-family:'Manrope',sans-serif;

    font-size:13px;

    font-weight:800;

    letter-spacing:3px;

}

.about-eyebrow span:first-child{

    width:58px;

    height:1px;

    background:
        rgba(244,180,0,.65);

}


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

.about-title{

    max-width:650px;

    margin:0 0 25px;

    color:#fff;

    font-family:'Manrope',sans-serif;

    font-size:
        clamp(44px, 4.5vw, 68px);

    line-height:1.05;

    letter-spacing:-2.4px;

    font-weight:800;

}

.about-title span{

    color:var(--primary);

}


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

.about-description{

    max-width:660px;

    margin-bottom:16px;

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

    font-size:16px;

    line-height:1.8;

}

.about-description strong{

    color:#fff;

    font-weight:700;

}


/* =========================================================
   HIGHLIGHTS GRID
========================================================= */

.about-highlights{

    display:grid;

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

    gap:24px 42px;

    margin-top:30px;

}


/* =========================================================
   HIGHLIGHT ITEM
========================================================= */

.about-highlight{

    display:flex;

    align-items:flex-start;

    gap:16px;

}

.about-highlight-icon{

    width:54px;

    height:54px;

    flex:0 0 54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid
        rgba(244,180,0,.18);

    border-radius:50%;

    background:
        rgba(244,180,0,.08);

    color:var(--primary);

    transition:
        background .3s ease,
        transform .3s ease;

}

.about-highlight-icon i{

    font-size:25px;

}

.about-highlight:hover .about-highlight-icon{

    background:
        rgba(244,180,0,.17);

    transform:
        translateY(-3px);

}


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

.about-highlight h3{

    margin:1px 0 5px;

    color:#fff;

    font-family:'Manrope',sans-serif;

    font-size:18px;

    line-height:1.3;

    font-weight:700;

}

.about-highlight p{

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

    font-size:13.5px;

    line-height:1.55;

}


/* =========================================================
   ACTIONS
========================================================= */

.about-actions{

    display:flex;

    align-items:center;

    gap:25px;

    margin-top:38px;

}


/* =========================================================
   CTA BUTTON
========================================================= */

.about-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:54px;

    padding:0 28px;

    border-radius:10px;

    background:var(--primary);

    color:#111;

    font-family:'Manrope',sans-serif;

    font-size:14px;

    font-weight:800;

    box-shadow:
        0 12px 28px
        rgba(244,180,0,.16);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}

.about-button i{

    transition:
        transform .3s ease;

}

.about-button:hover{

    background:
        var(--primary-hover);

    transform:
        translateY(-2px);

    box-shadow:
        0 17px 34px
        rgba(244,180,0,.24);

}

.about-button:hover i{

    transform:
        translateX(5px);

}


/* =========================================================
   TRUST LINE
========================================================= */

.about-trust-line{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

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

    font-family:'Manrope',sans-serif;

    font-size:12px;

    font-weight:600;

}

.about-trust-line span:nth-child(even){

    width:4px;

    height:4px;

    border-radius:50%;

    background:var(--primary);

    opacity:.7;

}


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

.about-visual{

    position:relative;

    min-height:760px;

    overflow:hidden;

}


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

.about-image-frame{

    position:absolute;

    inset:
        0
        0
        0
        65px;

    overflow:hidden;

    clip-path:
        polygon(
            13% 0,
            100% 0,
            100% 100%,
            0% 100%,
            8% 50%
        );

}

.about-image-frame img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1.01);

    transition:
        transform .8s
        cubic-bezier(.22,1,.36,1);

}

.about-visual:hover
.about-image-frame img{

    transform:scale(1.035);

}


/* =========================================================
   IMAGE DARK OVERLAY
========================================================= */

.about-image-frame::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(11,18,32,.28),
            transparent 38%
        );

    pointer-events:none;

}


/* =========================================================
   YELLOW ACCENT
========================================================= */

.about-yellow-accent{

    position:absolute;

    left:20px;

    top:55px;

    width:16px;

    height:180px;

    border-radius:20px;

    background:var(--primary);

    transform:
        skewY(-18deg);

    z-index:4;

}


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

.about-experience{

    position:absolute;

    right:25px;

    bottom:50px;

    z-index:6;

    width:235px;

    padding:23px 25px;

    display:grid;

    grid-template-columns:
        50px 1fr;

    align-items:center;

    column-gap:14px;

    border:
        1px solid
        rgba(244,180,0,.35);

    border-radius:16px;

    background:
        rgba(11,18,32,.94);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.25);

}

.about-experience-icon{

    grid-row:span 2;

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        rgba(244,180,0,.11);

    color:var(--primary);

}

.about-experience-icon i{

    font-size:25px;

}

.about-experience strong{

    color:var(--primary);

    font-family:'Manrope',sans-serif;

    font-size:34px;

    line-height:1;

}

.about-experience span{

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

    font-size:12px;

    line-height:1.4;

}


/* =========================================================
   VERTICAL SERVICE RAIL
========================================================= */

.about-service-rail{

    position:absolute;

    top:35px;

    right:20px;

    z-index:5;

    width:105px;

    padding:18px 10px;

    display:flex;

    flex-direction:column;

    gap:18px;

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

    border-radius:14px;

    background:
        rgba(11,18,32,.82);

    backdrop-filter:blur(8px);

}

.about-service-rail div{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:6px;

    text-align:center;

}

.about-service-rail i{

    color:var(--primary);

    font-size:23px;

}

.about-service-rail span{

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

    font-size:9px;

    line-height:1.35;

    text-transform:uppercase;

    letter-spacing:.7px;

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .about-container{

        width:92%;

        grid-template-columns:
            1fr
            1fr;

        min-height:650px;

    }

    .about-content{

        padding:
            70px
            35px
            70px
            0;

    }

    .about-visual{

        min-height:650px;

    }

    .about-image-frame{

        inset:
            0
            -20px
            0
            20px;

        clip-path:
            polygon(
                9% 0,
                100% 0,
                100% 100%,
                0 100%,
                5% 50%
            );

    }

    .about-highlights{

        gap:20px;

    }

    .about-service-rail{

        right:10px;

    }

}


/* =========================================================
   TABLET PORTRAIT
========================================================= */

@media(max-width:900px){

    .about-container{

        grid-template-columns:1fr;

    }

    .about-content{

        padding:
            75px
            0
            55px;

    }

    .about-visual{

        min-height:560px;

    }

    .about-image-frame{

        inset:0;

        clip-path:none;

        border-radius:18px;

    }

    .about-yellow-accent{

        display:none;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

    .about-container{

        width:
            calc(100% - 32px);

    }

    .about-content{

        padding:
            60px
            0
            40px;

    }

    .about-eyebrow{

        font-size:11px;

        letter-spacing:2.5px;

    }

    .about-eyebrow span:first-child{

        width:38px;

    }

    .about-title{

        margin-bottom:20px;

        font-size:
            clamp(37px, 10vw, 48px);

        letter-spacing:-1.6px;

    }

    .about-description{

        font-size:14.5px;

        line-height:1.75;

    }

    .about-highlights{

        grid-template-columns:1fr;

        gap:20px;

        margin-top:26px;

    }

    .about-highlight-icon{

        width:50px;

        height:50px;

        flex-basis:50px;

    }

    .about-highlight h3{

        font-size:16px;

    }

    .about-highlight p{

        font-size:13px;

    }

    .about-actions{

        flex-direction:column;

        align-items:stretch;

        gap:20px;

        margin-top:32px;

    }

    .about-button{

        width:100%;

    }

    .about-trust-line{

        justify-content:center;

    }

    .about-visual{

        min-height:470px;

    }

    .about-image-frame{

        border-radius:15px;

    }

    .about-yellow-accent{

       display:none;

    }

    .about-experience{

        right:15px;

        bottom:20px;

        width:200px;

        padding:18px;

    }

    .about-experience strong{

        font-size:30px;

    }

    .about-service-rail{

        top:15px;

        right:15px;

        width:85px;

        padding:12px 8px;

        gap:13px;

    }

    .about-service-rail i{

        font-size:19px;

    }

    .about-service-rail span{

        font-size:8px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:430px){

    .about-container{

        width:
            calc(100% - 24px);

    }

    .about-content{

        padding-top:50px;

    }

    .about-title{

        font-size:36px;

    }

    .about-visual{

        min-height:400px;

    }

    .about-experience{

        width:180px;

        right:10px;

        bottom:10px;

    }

    .about-service-rail{

        width:78px;

        right:10px;

    }

}