/* Header */
.page-header {
    padding-top: 11rem;
    padding-bottom: 10rem;
}

/* Header image */
#headerImage{
    margin-top: -9rem;
}

.header-image {
    width: 100%;
    height: 30vw;
    object-fit: cover;
    object-position: center;
    border: 3px solid var(--primary-light);
    border-radius: 5px;
}

.instagram-icon {
    width: 7%;
    height: auto;
    position: absolute;
    z-index: 10;
    bottom: -11%;
    right: 1%;

}
.youtube-icon {
    width: 4%;
    height: auto;
    position: absolute;
    z-index: 10;
    bottom: -5%;
    left: 2.5%;
}

/* who are we */
#whoAreWe {
    padding-top: 8rem;
}

.whoAreWe-hr {
    width: 25%;
    border: 2px solid var(--primary-lightest);
}

/* Advantage */
#advantage {
    padding-top: 64px;
    padding-bottom: 64px;
    margin-top: 8rem;
    position: relative;
    background: var(--primary-dark);
}

.advantage-description {
    width: 80%;
}

.advantage-img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Clients */
#clients {
    padding: 8rem 0;
}

.clients-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    transition: all 150ms ease;
}

.clients-image:hover {
    filter: grayscale(0);
}

.clients-spacing {
    width: 11vw;
    height: auto;
    margin-left: 48px;
    margin-right: 48px;
    margin-bottom: 8px;
}

/* Contact */
#contact {
    padding-top: 0;
    padding-bottom: 3rem;
}

.contact-img {
    border: 3px solid var(--primary-light);
    border-radius: 5px;
}

.whatsapp-btn {
    background: #25D366;
    border-radius: 5px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 19.2px;
    color: #FFFFFF;
}

.contact-vector {
    width: 100%;
    height: 12vw;
    object-fit: cover;
    position: absolute;
    object-position: top;
    bottom: 0;
}

@media only screen and (max-width: 768.98px) {

    .page-header {
        padding-top: 15rem;
    }

    .header-image {
        height: 60vw;
    }

    .youtube-icon {
        width: 15%;
    }

    .instagram-icon {
        width: 22%;
        bottom: -6%;
    }

    #whoAreWe {
        padding-top: 5rem;
    }

    #advantage {
        margin-top: 5rem;
    }

    .advantage-description {
        width: 100%;
    }

    #clients {
        padding: 5rem 0;
    }

    .clients-spacing {
        width: 40vw;
        margin-left: 8px;
        margin-right: 8px;
        margin-bottom: 24px;
    }

}

@media only screen and (min-width: 768px) and (max-width: 997.98px) {

    .page-header {
        padding-top: 7rem;
    }

    .header-image {
        height: 45vw;
    }

    .youtube-icon {
        width: 9%;
        bottom: -3%;
        left: 0;
    }

    .instagram-icon {
        width: 11%;
        bottom: -3%;
        right: 0;
    }

    #whoAreWe {
        padding-top: 5rem;
    }

    #advantage {
        margin-top: 5rem;
    }

    .advantage-description {
        width: 100%;
    }

    #contact {
        padding-top: 5rem;
        padding-bottom: 6rem;
    }

    .contact-img {
        width: 100%;
        height: 70vw;
        object-fit: cover;
    }

}