html{
    scroll-behavior: smooth;
}

*{
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
}

:root {
    --text-color: #000;
    --highlight-color: #f1b40c;
    --espresso: #572b17;
    --rust: #ac420f;
    --sundance: #cba45f;
}

img{
    width: 100%;
    object-fit: contain;
}

nav,
section,
footer{
    display: flex;
    justify-content: center;
}

nav{
    position: relative;
    top: 0;
    align-items: center;
    padding: 5px 0;
    /* background-color: hsla(0, 0%, 100%, 0.384); */
    box-shadow: 2px 12px 12px #a1a1a1be;
}

.container{
    width: 85%;
}

nav.fixed{
    position: fixed;
    width: 100%;
    background-color: #fff;
    top: 0;
    z-index: 5000;
}

nav .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .menu-list{
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 80px 40px;
    box-sizing: border-box;
    width: 50%;
    height: 100%;
    background-color: #fff;
    color: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 400;
}

.menu-list.active {
    transform: translateX(0);
}

.menu-button,
.close-button{
    position: relative;
    font-size: 2rem;
    color: #000;
}

.close{
    position: absolute;
    top: -60px;
    right: 80px;
}

a{
    text-decoration: none;
}

nav a{
    text-decoration: none;
    color: var(--text-color, #000);
    padding: 15px 5px;
    background-color: #fff;
}

nav .img-wrapper{
    width: 30%;
    padding: 0;
}

nav i{
    font-size: 2rem;
}

.js-slick-carousel{
    position: relative;
    width: 100%;
}

ul.slick-dots {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    width: 200px;
    border-radius: 50px;
    background-color:hsla(0, 0%, 100%, 0.502);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.slick-next{
    right: 0;
}

.slick-prev{
    left: 0;
    z-index: 5000;
}

.slick-dots li button::before{
    font-size: 6px;
}

.space-5{
    position: relative;
    display: flex;
    align-items: center;
    height: 80vh;
    background-color: rgba(0, 0, 0, 0.219);
}

.bg-img-hero-center{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

section,
footer{
    padding: 80px 0;
    /* background-color: #1a1a1a; */
}

h2{
    width: 100%;
    font-size: calc(1.33125rem + .975vw);
    margin-bottom: 17px;
}

h3,
.title{
    font-size: calc(1.25625rem + .075vw);
    font-weight: bold;
    padding: 10px 20px;
}

h4{
    font-size: calc(1.2 + .075vw);
}

/* WHAT WE DO */

.what-we-do .container,
.what-we-do .wrapper{
    display: flex;
    flex-direction: column;
}

.what-we-do .container{
    align-items: center;
}

.what-we-do .wrapper{
    width: 95%;
    gap: 20px;
}

.planning,
.project-design,
.project-management{
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    /* height: 350px; */
    overflow: hidden;
    /* border: 0.25px solid hsla(0, 0%, 0%, 0.314); */
}

.planning img,
.project-design img,
.project-management img{
    object-fit: contain;
}

.what-we-do .text-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    color: #fff;
    box-sizing: border-box;
    background-color: var(--sundance);
}

.planning .img-wrapper,
.project-design .img-wrapper,
.project-management .img-wrapper{
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.what-we-do li{
    list-style-position: inside;
}

.planning .img-wrapper{
    background-image: url("../media/what-we-do/IMG-0005.JPG");
}

.project-design .img-wrapper{
    background-image: url("../media/what-we-do/3.jpg");
}

.project-management .img-wrapper{
    background-image: url("../media/what-we-do/working-housing-project.jpg");
}


/* PROJECTS */

.project .wrapper{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.project .project-cat{
    position: relative;
    overflow: hidden;
    height: 250px;
}

.project-cat::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: hsla(0, 0%, 0%, 0.137);
}

.project-cat img,
.project-cat .title{
    transition-property: all;
    transition-timing-function: cubic-bezier(.25,.25,.75,.75);
}

.project-cat img{
    transform: scale(1);
    transition-duration: 500ms;
}

.project-cat:hover> img{
    transform: scale(1.05);
}

.project-cat .title{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: hsla(0, 0%, 0%, 0.699);
    text-decoration: none;
    color: var(--highlight-color, #ffd900);
    z-index: 2;
    transition-duration: 240ms;
}

.project-cat:hover> .title{
    /* color: var(--highlight-color, #ffd900); */
    color: #000;
    background-color: #ffd900;
}

.project-cat img{
    object-fit: fill;
}

/* GRID LAYOUT */

.af-hs{
    grid-column: 1/6;
}

.com{
    grid-column: 6/14;
}

.hsp{
    grid-column: 1/8;
}

.edu{
    grid-column: 1/10;
}

.apt{
    grid-column: 10/14;
}

.hst{
    grid-column: 1/7;
}

.hsp{
    grid-column: 7/14;
}

.hsn{
    grid-column: 1/7;
}

.ind{
    grid-column: 7/14;
}

.mul-sty{
    grid-column: 1/6;
}

.offc{
    grid-column: 6/14;
}

.rsdn{
    grid-column: 1/9;
}

.rmod{
    grid-column: 9/14;
}

.shp-ctr{
    grid-column: 1/8;
}

.trv-stp{
    grid-column: 8/14;
}

.trv-stp img{
    transform: scale(3);
}

.trv-stp:hover img{
    transform: scale(3.05);
}

/* FOOTER */
/* footer{
    background-color: var(--sundance, #cba45f);
} */

footer .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    border-top: 1px solid var(--espresso, #572b17);
}

footer a{
    color: #000;
}

footer .img-wrapper{
    width: 100%;
    display: flex;
    justify-content: center;
}

footer img{
    width: 30%;
}

footer .details{
    text-align: center;
    margin: 15px 0;
}



@media (min-width:1200px) {

    nav{
        padding-top: 5px;
    }

    nav .img-wrapper{
        width: 15%;
    }

    /* nav .menu-list{
        width: 40%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        transform: translateX(0);
    } */

    /* nav .menu-list{
        width: 30%;
    } */

    nav .menu-list a{
        font-size: 2.06rem;
        transition: all 350ms ease-in-out;
    }

    .menu-list  a:hover,
    .menu-button:hover{
        color: #ffd900;
    }

    /* nav .fa-bars{
        display: none;
    } */

    .container{
        width: 80%;
    }

    /* WHAT WE DO */

    .what-we-do .wrapper{
        width: 100%;
        gap: 20px;
    }

    .planning,
    .project-design,
    .project-management{
        gap: 10px;
    }

    .planning,
    .project-management{
        flex-direction: row;
    }

    .project-design{
        flex-direction: row-reverse;
    }

    .what-we-do .text-wrapper{
        width: 35%;
        padding-left: 40px;
    }

    .planning .img-wrapper,
    .project-design .img-wrapper,
    .project-management .img-wrapper{
        width: 65%;
        background-size: cover;
    }


    /* PROJECT */

    .project .wrapper{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 10px;
        /* gap: 1.5rem; */
    }

    .project .project-cat{
        height: 300px;
        border-radius: 5px;
    }

    /* GRID LAYOUT */

    .af-hs{
        grid-column: 1/6;
    }

    .com{
        grid-column: 6/14;
    }

    .hsp{
        grid-column: 1/8;
    }

    .edu{
        grid-column: 1/9;
    }

    .apt{
        grid-column: 9/14;
    }

    .hst{
        grid-column: 1/7;
    }

    .hsp{
        grid-column: 7/14;
    }

    .hsn{
        grid-column: 1/7;
    }

    .ind{
        grid-column: 7/14;
    }

    .mul-sty{
        grid-column: 1/6;
    }

    .offc{
        grid-column: 6/14;
    }

    .rsdn{
        grid-column: 1/9;
    }

    .rmod{
        grid-column: 9/14;
    }

    .shp-ctr{
        grid-column: 1/8;
    }

    .trv-stp{
        grid-column: 8/14;
    }

    /* FOOTER */
    footer .menu-list{
        font-size: 0.9rem;
    }

    footer .img-wrapper{
        width: 55%;
    }
}