/* ABOUT PAGE */

.about-hero {

    background:
    linear-gradient(
    rgba(16,42,67,.85),
    rgba(16,42,67,.85)
    ),
    url("../images/hero/about.jpg");

    background-size:cover;

    background-position:center;

    height:500px;

    display:flex;

    align-items:center;

    color:white;

    text-align:center;

}



.about-hero h1 {

    font-size:55px;

    margin-bottom:20px;

}



.about-grid {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:60px;

    align-items:center;

}









.about-content p {

    color:#555;

    font-size:17px;

    margin-bottom:20px;

}



.mission {

    background:
    var(--light-gray);

}



.mission-box {

    max-width:850px;

    margin:auto;

    text-align:center;

}



.mission-box h2 {

    color:var(--navy);

    font-size:40px;

}



.mission-box p {

    font-size:22px;

    color:#555;

    margin-top:20px;

}



.markets {

    background:white;

}



.market-grid {

    display:grid;

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

    gap:25px;

}



.market-grid div {

    background:
    var(--light-gray);

    padding:35px 25px;

    border-radius:8px;

}



.market-grid h3 {

    color:var(--navy);

    margin-bottom:15px;

}



.market-grid p {

    color:var(--gray);

}



@media(max-width:900px){


.about-grid {

    grid-template-columns:1fr;

}


.market-grid {

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

}



.about-hero h1 {

    font-size:42px;

}


}



@media(max-width:600px){


.market-grid {

    grid-template-columns:1fr;

}


.about-hero h1 {

    font-size:32px;

}


.about-content h2 {

    font-size:30px;

}


}