* {

    box-sizing: border-box;

}



body {

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    color: #333;

    background: #f5f5f5;

    line-height: 1.6;

}



.container {

    width: 90%;

    max-width: 1200px;

    margin: auto;

}



/* HEADER */


.header {

    background: white;

    padding: 20px 0;

    border-bottom: 1px solid #ddd;

}



.header-content {

    display: flex;

    justify-content: center;

    align-items: center;

}



.logo {

    max-width: 220px;

    height: auto;

}





/* HERO */


.hero {

    background: linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.65)
    ),
    url("../images/city-skyline.png");

    background-size: cover;

    background-position: center;

    color: white;

    text-align: center;

    padding: 100px 20px;

}



.hero h1 {

    font-size: 48px;

    margin-bottom: 10px;

}



.hero h2 {

    font-size: 30px;

    font-weight: normal;

}



.hero p {

    font-size: 20px;

    max-width: 700px;

    margin: 25px auto;

}





/* DIVISIONS */


.divisions {

    padding: 70px 0;

    background:white;

}



.division-grid {

    display:grid;

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

    gap:40px;

}



.division-card {

    background:white;

    padding:40px;

    border-radius:10px;

    box-shadow:0 5px 20px rgba(0,0,0,.12);

    text-align:center;

}



.division-card h2 {

    font-size:30px;

}



.division-card h3 {

    font-weight:normal;

}



.division-card ul {

    text-align:left;

    display:inline-block;

    margin:20px 0;

}



.division-card li {

    margin-bottom:10px;

}





/* BUTTONS */


.button {

    display:inline-block;

    padding:14px 30px;

    background:#1b5e20;

    color:white;

    text-decoration:none;

    border-radius:5px;

    margin-top:20px;

}



.button:hover {

    opacity:.85;

}


.gateway-footer {

    background:#222;

    color:white;

    padding:40px 0;

}



.footer-grid {

    display:grid;

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

    gap:30px;

}



.gateway-footer h3,
.gateway-footer h4 {

    margin-top:0;

}



.gateway-footer a {

    color:white;

    text-decoration:none;

}



.gateway-footer a:hover {

    text-decoration:underline;

}



.footer-bottom {

    text-align:center;

    margin-top:30px;

    padding-top:20px;

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

}



@media(max-width:768px){

    .footer-grid {

        grid-template-columns:1fr;

        text-align:center;

    }

}



.brand-tagline {

    text-align:center;

    font-size:18px;

    letter-spacing:1px;

    margin-top:10px;

    color:#555;

}

/* PHILOSOPHY */


.philosophy {

    padding:70px 0;

    text-align:center;

}



.philosophy h2 {

    font-size:36px;

}



.values {

    display:grid;

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

    gap:30px;

    margin-top:40px;

}



.values div {

    background:white;

    padding:30px;

    border-radius:10px;

    box-shadow:0 4px 15px rgba(0,0,0,.1);

}





/* FOOTER */


footer {

    background:#222;

    color:white;

    text-align:center;

    padding:30px;

}






/* MOBILE */


@media(max-width:768px){


.hero h1 {

    font-size:36px;

}


.division-grid {

    grid-template-columns:1fr;

}


.values {

    grid-template-columns:1fr;

}


}