.title {
   
    width: 100%;
    max-width: 1400px;
    height: 100%;

    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    gap: 16px;
    margin-top: clamp(40px, 8vw, 120px);
    margin-bottom: clamp(20px, 10vw, 112px);
}

/* .burgerCont {
    width: 30px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;

}

.burgerLine {
    width: 100%;
    min-height: 2.5px;
    background-color: var(--base);
    border-radius: 6px;
    visibility: visible;
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
    transform-origin: center;
}


.transformBurger .burgerLine:nth-child(1) {
    animation: slideAndRotate1 0.8s forwards;
}

.transformBurger .burgerLine:nth-child(2) {

    visibility: hidden;
    transition-delay: 0.1s;

}

.transformBurger .burgerLine:nth-child(3) {
    animation: slideAndRotate3 0.8s forwards;
}

@keyframes slideAndRotate1 {
    0% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(10px) rotate(0);
    }

    100% {
        transform: translateY(9px) rotate(45deg);
    }
}

@keyframes slideAndRotate3 {
    0% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-10px) rotate(0);
    }

    100% {
        transform: translateY(-9px) rotate(-45deg);
    }
}


.resetBurger .burgerLine:nth-child(1) {
    animation: slideBack1 0.8s forwards;
}

.resetBurger .burgerLine:nth-child(2) {
    visibility: visible;
    transition-delay: 0.3s;
}

.resetBurger .burgerLine:nth-child(3) {
    animation: slideBack2 0.8s forwards;
}

@keyframes slideBack1 {
    0% {
        transform: translateY(9px) rotate(45deg);
    }

    50% {
        transform: translateY(10px) rotate(0);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes slideBack2 {
    0% {
        transform: translateY(-9px) rotate(-45deg);
    }

    50% {
        transform: translateY(-10px) rotate(0);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
} */

@media(max-width: 768px) {
    .title{
        gap: 32px;
    }
}

@media(min-width: 768px) {
    .burgerCont {
        display: none;
    }
}