﻿:root {
    --cc-primary: #004D40;
    --cc-primary-rgb: 0, 77, 64;
    --cc-primary-accent: rgb(129, 189, 65);
}

.bg-cc-primary-noisy {
    background: linear-gradient(to bottom, rgba(var(--cc-primary-rgb),0.5), rgba(0, 0, 0, 0)), url(https://grainy-gradients.vercel.app/noise.svg), 
        linear-gradient(to right, rgba(var(--cc-primary-rgb),0.5), rgba(0, 0, 0, 0)), url(https://grainy-gradients.vercel.app/noise.svg);
}

.bg-cc-primary-gradient {
    background: linear-gradient(0deg, rgba(0,77,64,1) 0%, rgba(253,29,29,0) 51%, rgba(252,176,69,0) 100%);
}


#eteamGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
    grid-gap: 0px;
}

    #eteamGrid > img {
        float: left;
        width: 100%;
        height: 100%;
        height: -moz-available; /* WebKit-based browsers will ignore this. */
        height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
        height: fill-available;
        object-fit: cover;
    }


@media (max-width: 576px) {
    #eteamGrid {
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    }
}


.ucccc_container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
}

    .ucccc_container > .div1 {
        grid-area: 1 / 1 / 3 / 3;
    }

    .ucccc_container > .div2 {
        grid-area: 3 / 1 / 5 / 3;
    }

    .ucccc_container > .div3 {
        grid-area: 1 / 3 / 5 / 5;
    }

@media (max-width: 1080px) {
    .ucccc_container {
        display: flex;
        flex-flow: column wrap;
    }
}

.about-icon {
    top: -13rem;
    left: -27rem;
}

/* Overloading of swiper css */
.swiper.desSwiper {
    max-width: 45rem;
}
    
    .swiper.desSwiper .swiper-slide > img {
        max-height: 25rem;
    }


.sticky-container .parent {
    overflow-x: hidden;
    display: flex;
    position: sticky;
    top: 15vh;
}

.sticky-container .child{
    min-width: 50vw;
    min-height: 50vh;
    max-height: 75vh;
}

    .sticky-container .child > :first-child {
    }

.img-flex {
    max-width: 45rem;
}
    .img-flex img {
        width: calc(100% / 2);
        aspect-ratio: 3/2;
        -webkit-aspect-ratio: 3/2;
        object-fit: contain;
    }