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





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


.about-hero {

    padding:
    100px 0;

    background:
    linear-gradient(
        135deg,
        var(--secondary),
        var(--primary)
    );

    color:
    white;

}



.about-hero h1 {

    font-size:
    50px;

    font-weight:
    800;

    margin-bottom:
    20px;

}



.about-hero p {

    max-width:
    650px;

    font-size:
    18px;

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

}








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


.about-company {

    padding:
    100px 0;

}



.about-company-grid {

    display:
    grid;

    grid-template-columns:
    1fr 1fr;

    gap:
    70px;

    align-items:
    center;

}



.about-company-image {

    height:
    520px;

    border-radius:
    16px;

    overflow:
    hidden;

}



.about-company-image img {

    width:
    100%;

    height:
    100%;

    object-fit:
    cover;

}





.about-company-text h2 {

    font-size:
    40px;

    line-height:
    1.2;

    margin-bottom:
    25px;

}



.about-company-text p {

    color:
    var(--text-light);

    margin-bottom:
    18px;

    font-size:
    16px;

}









/* ===================================
   DIRECTIONS
=================================== */


.directions {

    background:
    var(--background);

}





.directions-grid {

    display:
    grid;

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

    gap:
    30px;

}



.direction-card {

    background:
    white;

    padding:
    40px 30px;

    border-radius:
    14px;

    text-align:
    center;

    transition:
    .35s ease;

}



.direction-card:hover {

    transform:
    translateY(-8px);

    box-shadow:
    var(--shadow);

}



.direction-card div {

    width:
    70px;

    height:
    70px;

    margin:
    0 auto 25px;

    border-radius:
    12px;

    background:
    rgba(11,92,173,.1);

    display:
    flex;

    align-items:
    center;

    justify-content:
    center;

    font-size:
    32px;

}

.direction-card div .lucide {
    width: 34px;
    height: 34px;
}

.equipment-list .lucide {
    margin-right: 8px;
    color: #9dc9ff;
}



.direction-card h3 {

    font-size:
    22px;

    margin-bottom:
    15px;

}



.direction-card p {

    color:
    var(--text-light);

}









/* ===================================
   EQUIPMENT
=================================== */


.equipment {

    padding:
    80px 0;

}





.equipment-box {

    background:
    #081d33;

    color:
    white;

    border-radius:
    18px;

    padding:
    60px;

    display:
    grid;

    grid-template-columns:
    1fr 1fr;

    gap:
    50px;

}



.equipment-box h2 {

    font-size:
    36px;

    margin-bottom:
    20px;

}



.equipment-box p {

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

    font-size:
    17px;

}



.equipment-list {

    display:
    flex;

    flex-direction:
    column;

    gap:
    18px;

    justify-content:
    center;

}



.equipment-list div {

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

    padding:
    18px 22px;

    border-radius:
    8px;

}









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


.about-benefits {

    background:
    var(--background);

    padding:
    70px 0;

}



.benefits-grid {

    display:
    grid;

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

    gap:
    25px;

}



.benefits-grid div {

    background:
    white;

    border-radius:
    12px;

    padding:
    35px;

    text-align:
    center;

}



.benefits-grid strong {

    display:
    block;

    color:
    var(--primary);

    font-size:
    42px;

    font-weight:
    800;

}



.benefits-grid span {

    color:
    var(--text-light);

    font-size:
    14px;

}









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


.about-cta {

    padding:
    80px 0;

}










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


@media(max-width:1000px){



.about-company-grid {

    grid-template-columns:
    1fr;

}



.directions-grid {

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

}



.equipment-box {

    grid-template-columns:
    1fr;

}



.benefits-grid {

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

}


}







@media(max-width:700px){



.about-hero {

    padding:
    70px 0;

}



.about-hero h1 {

    font-size:
    36px;

}



.about-company {

    padding:
    60px 0;

}



.about-company-image {

    height:
    350px;

}



.about-company-text h2 {

    font-size:
    30px;

}



.directions-grid {

    grid-template-columns:
    1fr;

}



.equipment-box {

    padding:
    35px 25px;

}



.equipment-box h2 {

    font-size:
    28px;

}



.benefits-grid {

    grid-template-columns:
    1fr;

}



}