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

.about-hero{

    background:#0B132B;

    background-image:
    linear-gradient(
    rgba(214,216,220,.045) 1px,
    transparent 1px
    ),
    linear-gradient(
    90deg,
    rgba(214,216,220,.045) 1px,
    transparent 1px
    );

    background-size:72px 72px;

}


.about-container{

    max-width:1200px;
    margin:0 auto;
    padding:72px 32px;

}


.about-kicker{

    font-family:'Space Mono',monospace;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#86A9D6;

}


.about-hero-title{

    font-family:'Space Grotesk',sans-serif;
    font-size:48px;
    font-weight:700;
    line-height:1.05;
    letter-spacing:-1.2px;
    color:#fff;

    margin-top:12px;

}



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

.about-section{

    padding:20px 0 80px;

}


.about-grid{

    display:grid;
    grid-template-columns:380px 1fr;
    gap:60px;
    align-items:start;

}


.about-image-column{

    width:100%;

}


.about-image{

    position:relative;
    overflow:hidden;

    border-radius:20px;

    aspect-ratio:4/5;

    background:#0B132B;

    box-shadow:
    0 18px 44px rgba(11,19,43,.18);

}


.about-photo{

    width:100%;
    height:100%;
    object-fit:cover;

}


.about-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(11,19,43,.60),
    rgba(11,19,43,0)
    );

}


.about-caption{

    position:absolute;

    left:18px;
    bottom:18px;

    font-family:'Space Mono',monospace;
    font-size:11px;

    color:#fff;

    background:
    rgba(11,19,43,.55);

    padding:7px 12px;

    border-radius:8px;

}



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

.about-content{

    width:100%;

}


.about-title{

    font-family:'Space Grotesk',sans-serif;

    font-size:36px;

    font-weight:700;

    line-height:1.15;

    letter-spacing:-.8px;

    color:#0B132B;

    margin:0;

}


.about-text{

    font-size:17px;

    line-height:1.75;

    color:#4B5563;

    margin-top:20px;

}



/* ==========================
   INFO GRID
========================== */

.about-info-grid{

    display:grid;

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

    gap:34px;

    margin-top:40px;

}


.about-heading{

    font-family:'Space Grotesk',sans-serif;

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#3F6FA8;

    margin-bottom:16px;

}


.about-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}


.about-tag{

    font-family:'Space Mono',monospace;

    font-size:13px;

    color:#0B132B;

    background:#EFEFEC;

    border:1px solid #D6D8DC;

    padding:8px 14px;

    border-radius:9px;

}



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

.about-stats{

    display:flex;

    flex-wrap:wrap;

    gap:46px;

    margin-top:46px;

    padding-top:30px;

    border-top:1px solid #D6D8DC;

}


.about-stat{

    display:flex;
    flex-direction:column;

}


.about-number{

    font-family:'Space Grotesk',sans-serif;

    font-size:34px;

    font-weight:700;

    color:#0B132B;

}


.about-label{

    font-size:14px;

    color:#6B7280;

    margin-top:4px;

}



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

@media(max-width:992px){

.about-grid{

    grid-template-columns:1fr;

    gap:40px;

}

.about-image{

    max-width:420px;

    margin:auto;

}

.about-content{

    text-align:center;

}

.about-info-grid{

    grid-template-columns:1fr;

}

.about-tags{

    justify-content:center;

}

.about-stats{

    justify-content:center;

}

}



@media(max-width:768px){

.about-container{

    padding:60px 24px;

}

.about-hero-title{

    font-size:40px;

}

.about-title{

    font-size:30px;

}

.about-text{

    font-size:16px;

}

.about-stats{

    gap:28px;

}

}



@media(max-width:480px){

.about-container{

    padding:48px 20px;

}

.about-hero-title{

    font-size:34px;

}

.about-title{

    font-size:26px;

}

.about-number{

    font-size:28px;

}

.about-caption{

    font-size:10px;

}

}