.design-section  {
    /* height: 100vh; */

    .bigD-section {
        margin-top: 3rem;
        display: grid;
        grid-template-columns: auto min-content 1fr;

        .div-1 {
            height: 95vh;
            /* background-color: rgb(202, 202, 202); */
            /* background: repeating-linear-gradient(
                rgb(224, 224, 224),
                rgb(224, 224, 224) 50px,
                white 50px,
                white 100px
            ); */
            /* background-image: radial-gradient(black 2px, transparent 2px);
            background-size: 30px 30px; */

            background-image: 
            linear-gradient(90deg, black 1px, transparent 1px),
            linear-gradient(180deg, black 1px, transparent 1px),
            linear-gradient(90deg, transparent 100px, black 100px),
            linear-gradient(180deg, transparent 100px, black 100px);
            background-size: 52px 52px;
        }

        svg {
            width: 100%;
            height: 100%;
        }

        .div-2 {
            background-color: red;  
            height: 95vh;
            border-left: 4px solid black;   
        }

        .coje-design {
            width: min-content;
            align-self: center;
            text-transform: uppercase;
            font-size: 28vh;

            line-height: 0.80;
        }

        @media (max-width: 1450px) {
            .coje-design {
                font-size: clamp(4rem, 2rem + 14vw, 30rem);
            }
            .div-1, .div-2 {
                height: 60vw;
            }
        }

        .right-box {
            border-left: 4px solid black;
            background-image: radial-gradient(blue 2px, transparent 2px);
            background-size: 30px 30px;
        }
    }

    @media (max-width: 700px) {
        .bigD-section {
            grid-template-columns: 1fr;
            .div-1, .div-2 {
                height: max-content;
                display: grid;  
            }
            .div-1 {
                align-content: end;
                background-image: radial-gradient(blue 2px, transparent 2px);
                background-size: 30px 30px;
            }
            .div-2 {
                align-content: center;
                border: none;
            }
        }
    }

    .section-2 {
        /* background-color: rgb(3, 33, 225); */
        background-color: rgb(0, 0, 0);
        /* height: 900px; */
        /* padding-block: 15rem; */
        display: grid;
        grid-template-columns: 50% 1fr;
        color: white;
        .div-21 {
            /* border-right: 10px solid rgb(27, 255, 2); */
            /* border-right: 10px solid red; */
            padding-block: 8rem;
            margin: auto;
            background-color: white;
        }
        p {
            font-size: clamp(1.4rem, 1vw + 1.1rem, 3rem);
            font-weight: 700;
            line-height: 1.8;
            /* text-transform: uppercase; */
            /* letter-spacing: 1px; */
            padding-inline: 5rem;
            /* max-width: 40%; */
            color: black;
            font-family: monospace;
            /* color: rgb(255, 2, 209); */
            /* color: white; */
            /* color: rgb(27, 255, 2); */
            /* color: rgb(33, 134, 250); */
        }
        .div-3 {
            display: grid;
            margin:auto;
            h3 {
                display: block;
                font-size: clamp(1.6rem, 1.2vw + 1.4rem, 3rem);
                letter-spacing: 2rem;
            }
            /* h5 {
                display: inline;
                margin: auto;
                font-size: 2rem;
                font-weight: 100;
                align-self: center;
            } */
        }
        .hidden-text {
            transform: translateX(-100%);
            /* transition: transform 2s ease-out; */
        }
        .visible-text {
            transform: translateX(0);
        }

    }
    @media (max-width: 1300px) {
        .section-2 {
            grid-template-columns:1fr;
            /* padding-block: 5vw; */
            .div-21 {
                padding-block: 2rem;
            }
            p {
                padding-inline: 5vw;
                border:none;
            }
            .div-3 {
                display: none;
            }
            .hidden-text {
                transform: none;
                transition: none;
            }
        }
    }

    .section-3 {
        position: relative;
        /* background-color: rgb(187, 187, 187); */
        background-color: white;
        padding-block: 6rem;
        /* padding-inline: 20rem; */
        /* height: 900px; */
        /* color: rgb(37, 37, 37); */
        color: black;
        .div-4 {
            /* border: 3px solid rgb(107, 15, 15); */
            /* padding: 2rem 2rem; */
            /* position: relative; */
            --mask:
            radial-gradient(40px at 40px 40px,#0000 calc(98% - 4px),#000 calc(100% - 4px) 98%,#0000) -40px -40px,
            linear-gradient(90deg,#000 8px,#0000 0) -4px 50% /100% calc(100% - 80px + 4px) repeat-x,
            linear-gradient(      #000 8px,#0000 0) 50% -4px/calc(100% - 80px + 4px) 100% repeat-y;
        }    
        .div-4 {
            content: "";
            position: absolute;
            inset: 3rem;
            background: rgb(37, 37, 37);
            -webkit-mask: var(--mask);
                    mask: var(--mask);
        }

        h2 {
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: clamp(1.6rem, 1.6vw + 1.6rem, 4rem);
            text-align: center; 
        }

        p {
            font-family: Georgia, 'Times New Roman', Times, serif;
            letter-spacing: 1.5px;
            line-height: 1.7;
            font-size: clamp(1.6rem, .9vw + 0.8rem, 2.4rem);
            margin-block: 2rem;
            max-width: 70%;
            margin-inline: auto;
        }  

    }
}

.section-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* padding-block: 14rem; */
    /* background-color: rgb(33, 134, 250); */
    background-color: black;
}

@media (max-width: 1300px) {
    .section-4 {
        grid-template-columns: 1fr;
        grid-template-rows: 30rem auto;    
    }
}

.scene {
    width: 200px;
    height: 200px;
    perspective: 600px;
    justify-self: center;
    align-self: center;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 18s infinite linear;
}

.face {
    position: absolute;
    width: 200px;
    height: 200px;
    /* background: black; */
    border: 3px solid rgb(255, 255, 255);
    /* opacity: 1; */
}

.front  { transform: translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

@keyframes rotate {
    from { transform: rotateX(0deg) rotateY(0deg); }
    to { transform: rotateX(360deg) rotateY(360deg); }
}

.div-5 {
    /* background-color: rgb(86, 86, 86); */
    background-color:white; 
    color: black;
    h2 {
        font-size: clamp(1.6rem, 4vw + 2rem, 7rem);
    }
    p {
        font-size: clamp(1.6rem, .9vw + 0.75rem, 2.4rem);
        text-transform: uppercase;
    }
    
}

.footer-design {
    background-color: red;
    color: black;
    .email {
        font-weight: 800;
    }
}