/* banner section */

.banner-section {
    width: 100%;
}

.banner-box {
    width: 100%;
    aspect-ratio: 1728/554;
}

.banner-img-box {
    width: 100%;
    aspect-ratio: 1728/554;
    overflow: hidden;
}

.banner-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

.banner-overlay {
    background: #00000099;
    z-index: 10;
    inset: 0;
}

.banner-content {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    /* width: 60%; */
    color: #fff;
}

.banner-content h3 {
    font-size: 3rem;
    color: var(--main-clr);
    text-decoration: underline;
    text-underline-offset: 10px;
}

.banner-content p {
    font-size: 1rem;
}

.welcome {
    color: var(--main-clr);
}

@media (width <=768px) {
    .banner-box {
        width: 100%;
        aspect-ratio: 360/273;
    }

    .banner-img-box {
        width: 100%;
        aspect-ratio: 360/273;
        overflow: hidden;
    }

    .banner-content h3 {
        font-size: 2rem;
    }
}


/* ourclient section */

.ourclient {
    width: 90%;
    padding: 20px 0px;
    max-width: var(--max-width);
    margin-inline: auto;
}

.ourclient h3 {
    width: 70%;
    font-size: 1.3rem;
    font-weight: 600;
    font-family: 'Poppins';
    text-align: center;
    margin: 40px auto;
}

.ourclient-grid-box {
    width: calc(100%/4);
    aspect-ratio: 1/1;
    border: 1px solid #dadada;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s ease-in-out;
}



.ourclient-grid-box:nth-child(4n-3) {
    border-left: none;
}

.ourclient-grid-box:nth-child(4n) {
    border-right: none;
}


.ourclient-grid-box img {
    width: 70%;
    aspect-ratio: 16/9;
    object-fit: contain;
    /*opacity: .5;*/
    transition: all .1s ease-in-out;
}

/*.ourclient-grid-box img:hover {*/
/*    opacity: 1;*/
/*}*/


@media (width <=768px) {
    .ourclient h3 {
        width: 100%;
    }

    .ourclient-grid-box {
        width: calc(100%/2);

    }

    .ourclient-grid-box:nth-child(2n-3) {
        border-left: none;
    }

    .ourclient-grid-box:nth-child(2n) {
        border-right: none;
    }
}