/* 3D Animatics */
    
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
     :root {
        /* colors */
        --main-color: #0c0c0c;
        --second-color: #0c0c0c;
        --third-color: #FFBF00;
        --fourth-color: #83D302;
        --fifth-color: #00BDD6;
        /* soft-colors */
        --main-color-soft: #ffe4e2;
        --second-color-soft: #f0d9ff;
        --third-color-soft: #fff1c8;
        --fourth-color-soft: #f0ffd8;
        --fifth-color-soft: #d2faff;
        /* hovers */
        --main-hover-color: #762723;
        --second-hover-color: #40175b;
        --third-hover-color: #a07f1c;
        --fourth-hover-color: #4e6f18;
        --fifth-hover-color: #125159;
        /* hover */
        --hover-main-color: #0c0c0c;
        --hover-second-color: #2a6a97;
        --hover-third-color: #ca873b;
        --hover-fourth-color: #989b9e;
        --hover-fifth-color: #e0c25f;
        /* neutral colors */
        --white-color: #fff;
        --light-color: #e6e6e6;
        --gray-color: #999999;
        --dark-color: #333;
        --hard-dark-color: #000;
        /* bg-colors */
        --bg-main-color: #00c492;
        --bg-second-color: #e1ffea;
        --bg-light-second-color: #eefff3;
        --bg-third-color: #7AFADA;
        --bg-fourth-color: #FA997A;
        --bg-fifth-color: #AD5032;
        /* bg-neutral colors */
        --bg-white-color: #fff;
        --bg-light-color: #e6e6e6;
        --bg-gray-color: #999999;
        --bg-dark-color: #333;
        --bg-hard-dark-color: #000;
        /* other colors */
        --whats-color: #00f078;
        --whats-second-color: #128C7E;
        --whats-hover-color: #1b6c43;
        /* fonts */
        --poppins: 'Open Sans', sans-serif;
        --size-10px: 10px;
        --size-12px: 12px;
        --size-14px: 14px;
        --size-16px: 16px;
        --size-18px: 18px;
        --size-20px: 20px;
        --size-24px: 24px;
        --size-28px: 28px;
        --size-34px: 34px;
        --size-38px: 38px;
        --size-46px: 46px;
        --size-54px: 54px;
        --size-64px: 64px;
        --size-72px: 72px;
        --size-88px: 88px;
        --box-shadow-1: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
        --box-shadow-2: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
        --box-shadow-3: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }
    
    .prev-gallery {
        display: grid;
        grid-template-columns: 40% 30% auto;
        grid-gap: 2rem;
        padding: 20px;
    }
    
    .prev-gallery .cc-card-one,
    .prev-gallery .cc-card-two,
    .prev-gallery .cc-card-three {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .prev-gallery .cc-card-one img {
        object-fit: cover;
        object-position: center;
        border-radius: 10px;
        height: 500px;
        width: 100%;
    }
    
    .prev-gallery .cc-card-two .cc-subcard-main {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    
    .prev-gallery .cc-card-two .cc-subcard-main img {
        object-fit: cover;
        object-position: center;
        border-radius: 10px;
        height: 280px;
        width: 190px;
    }
    
    .prev-gallery .cc-card-two .cc-subcard-second {
        display: flex;
        flex-direction: column;
    }
    
    .prev-gallery .cc-card-two .cc-subcard-second img {
        object-fit: cover;
        object-position: center;
        border-radius: 10px;
        height: 200px;
        width: 400px;
    }
    
    .prev-gallery .cc-card-three .cc-card-one img {
        object-fit: cover;
        object-position: center;
        border-radius: 10px;
        height: 300px;
        width: 400px;
    }
    
    .prev-gallery .cc-card-three .cc-card-two img {
        object-fit: cover;
        object-position: center;
        border-radius: 10px;
        height: 180px;
        width: 400px;
    }
    
    .box-section-3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .box-section-3 .subtitle {
        font-style: italic;
        font-size: 1.2rem;
    }
    
    .box-section-3 .btn-more {
        color: var(--white-color);
        background-color: #ed145b;
        font-size: .8rem;
        padding: 10px 20px;
        border-radius: 5px;
    }
    
    @media only screen and (max-width: 1366px) {
        .prev-gallery {
            grid-template-columns: repeat(3, 1fr);
        }
        .prev-gallery .cc-card-two .cc-subcard-main {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
        .prev-gallery .cc-card-three {
            grid-template-columns: repeat(1, 1fr);
        }
        .prev-gallery .cc-card-two .cc-subcard-second img,
        .prev-gallery .cc-card-two .cc-subcard-main img {
            object-fit: cover;
            object-position: center;
            border-radius: 10px;
            height: 140px;
            width: 100%;
        }
        .prev-gallery .cc-card-one img {
            object-fit: cover;
            object-position: center;
            border-radius: 10px;
            height: 300px;
            width: 100%;
        }
        .prev-gallery .cc-card-three .cc-card-one img,
        .prev-gallery .cc-card-three .cc-card-two img {
            object-fit: cover;
            object-position: center;
            border-radius: 10px;
            height: 140px;
            width: 100%;
        }
    }
    
    @media only screen and (max-width: 960px) {
        .prev-gallery {
            grid-template-columns: 100%;
        }
        .prev-gallery .cc-card-two .cc-subcard-main,
        .prev-gallery .cc-card-three {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
        .prev-gallery .cc-card-two .cc-subcard-second img,
        .prev-gallery .cc-card-two .cc-subcard-main img {
            object-fit: cover;
            object-position: center;
            border-radius: 10px;
            height: 300px;
            width: 100%;
        }
        .prev-gallery .cc-card-one img,
        .prev-gallery .cc-card-three .cc-card-one img,
        .prev-gallery .cc-card-three .cc-card-two img {
            object-fit: cover;
            object-position: center;
            border-radius: 10px;
            height: 300px;
            width: 100%;
        }
    }
    
    @media only screen and (max-width: 768px) {
        .prev-gallery {
            grid-template-columns: 100%;
        }
        .prev-gallery .cc-card-two .cc-subcard-main,
        .prev-gallery .cc-card-three {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
        .prev-gallery .cc-card-two .cc-subcard-second img,
        .prev-gallery .cc-card-two .cc-subcard-main img {
            object-fit: cover;
            object-position: center;
            border-radius: 10px;
            height: 300px;
            width: 100%;
        }
        .prev-gallery .cc-card-one img,
        .prev-gallery .cc-card-three .cc-card-one img,
        .prev-gallery .cc-card-three .cc-card-two img {
            object-fit: cover;
            object-position: center;
            border-radius: 10px;
            height: 300px;
            width: 100%;
        }
    }
    
    @media only screen and (max-width: 480px) {
        .prev-gallery {
            grid-template-columns: 100%;
        }
    }
    
    @media only screen and (max-width: 390px) {
        .prev-gallery {
            grid-template-columns: repeat(1, 1fr);
        }
        .prev-gallery .cc-card-two .cc-subcard-main {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
        .prev-gallery .cc-card-two .cc-subcard-second img,
        .prev-gallery .cc-card-two .cc-subcard-main img {
            object-fit: cover;
            object-position: center;
            border-radius: 10px;
            height: 300px;
            width: 100%;
        }
        .prev-gallery .cc-card-one img,
        .prev-gallery .cc-card-three .cc-card-one img,
        .prev-gallery .cc-card-three .cc-card-two img {
            object-fit: cover;
            object-position: center;
            border-radius: 10px;
            height: 300px;
            width: 100%;
        }
    }