/* ---HERO STYLES--- */

.hero_section {
    height: 100vh;
    background: black;
}

.hero_section video.absolute_media {
    opacity: .5;
}

.hero_section .container {
    justify-content: flex-end;
    padding: 5vw;
}

@media (max-width: 997px) {
    .hero_section .container {
        justify-content: flex-end;
        padding: 20vw 10vw;
    }

    .hero_section .info_box {
        align-items: center;
        text-align: center;
    }

    .hero_section .title_box h1 {
        font-size: var(--h2);
    }
}



/* ---SERVICES STYLES--- */

.services_section .cards_box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2vw;
}

.services_section .card_item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--light-brown);
    transition: var(--transition);
    cursor: pointer;
}

.services_section .card_item:hover {
    transform: translateY(-.25vw)
}

.services_section .card_item .media_box {
    height: 25vw;
}

.services_section .card_item .media_box img {
    transition: var(--transition);
    object-position: top;

}

.services_section .card_item:hover .media_box img {
    transform: scale(1.02);
}

.services_section .card_item .info_box {
    gap: 1vw;
    padding: 2vw;
}

.services_section .card_item h3 {
    font-size: var(--h3);
}

.services_section .card_item .btn {
    justify-self: flex-end;
}

@media (max-width: 997px) {
    .services_section .cards_box {
        grid-template-columns: 1fr;
        gap: 10vw;
    }

    .services_section .card_item .media_box {
        height: 90vw;
    }

    .services_section .card_item .info_box {
        align-items: center;
        padding: 10vw 5vw;
        text-align: center;
    }
}



/* ---ABOUT STYLES--- */

.about_section .about_box {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3vw;
}

.about_section .media_box .absolute_media {
    object-position: top;
}

@media (max-width: 997px) {
    .about_section .about_box {
        grid-template-columns: 1fr;
        gap: 10vw;
    }

    .about_section .media_box {
        height: 100vw;
    }

    .about_section .info_box {
        align-items: center;
        text-align: center;
    }

}



/* ---PROJECTS STYLES--- */

.projects_section .projects_box {
    display: flex;
    flex-direction: column;
    gap: 3vw;
    padding: 10vw 0;
}

.projects_section .info_box {
    padding: 0 5vw;
}

.projects_section .info_box p {
    width: 50%;
}

.projects_section .porfolio_box {
    height: 50vw;
    display: grid;
    grid-template-areas: "a b c" "a d d";
    gap: .5vw;
}

.projects_section .portfolio_item {
    position: relative;
    background: var(--black);
    cursor: pointer;
    overflow: hidden;
}

.projects_section .portfolio_item:nth-child(1) {
    grid-area: a;
}

.projects_section .portfolio_item:nth-child(2) {
    grid-area: b;
}

.projects_section .portfolio_item:nth-child(3) {
    grid-area: c;
}

.projects_section .portfolio_item:nth-child(4) {
    grid-area: d;
}

.projects_section .portfolio_item .eyebrow {
    color: var(--white);
    position: absolute;
    top: 2vw;
    left: 2vw;
    opacity: 0;
    transition: var(--transition);
    z-index: 1;
}

.projects_section .portfolio_item:hover .eyebrow {
    opacity: 1;
}

.projects_section .portfolio_item .btn {
    color: var(--white);
    position: absolute;
    right: 2vw;
    bottom: 1vw;
    opacity: 0;
    transition: var(--transition);
    z-index: 1;
}

.projects_section .portfolio_item:hover .btn {
    opacity: 1;
}

.projects_section .portfolio_item img {
    transition: var(--transition);
}

.projects_section .portfolio_item:hover img {
    transform: scale(1.01);
    opacity: .6;
}

@media (max-width: 997px) {
    .projects_section .projects_box {
        gap: 10vw;
        padding: 20vw 0;
    }

    .projects_section .info_box {
        align-items: center;
        text-align: center;
        padding: 0 10vw;
    }

    .projects_section .info_box p {
        width: 100%;
    }

    .projects_section .porfolio_box {
        height: 170vw;
        display: grid;
        grid-template-areas: "a a a a" "b b c c" "d d d d";
        gap: 1.5vw;
    }

    .projects_section .portfolio_item .eyebrow {
        top: 5vw;
        left: 5vw;
    }

    .projects_section .portfolio_item .btn {
        right: 5vw;
    }
}



/* ---WHY STYLES--- */

.why_section .why_box {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3vw;
}

.why_section .info_box ul {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    list-style: none;
}

@media (max-width: 997px) {
    .why_section .why_box {
        grid-template-columns: 1fr;
        gap: 10vw;
    }

    .why_section .media_box {
        height: 100vw;
    }

    .why_section .info_box {
        align-items: center;
        text-align: center;
    }

    .why_section .info_box ul {
        gap: 3vw;
    }
}



/* ---CTA STYLES--- */

.cta_setion {
    background: var(--black);
}

.cta_setion .absolute_media {
    opacity: .3;
}

.cta_setion .cta_box {
    position: relative;
    z-index: 1;
}

.cta_setion .info_box {
    width: 50%;
}

@media (max-width: 997px) {
    .cta_setion .cta_box {
        height: 150vw;
        justify-content: center;
    }
    .cta_setion .info_box {
        width: 100%;
    }
}