@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }

    .footer__content {
        gap: 30px;
    }

    .footer__title {
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }

    .nav__burger {
        display: block;
    }

    .nav__burger:focus ~ .menu {
        opacity: 1;
        visibility: visible;
    }

    .nav__burger:focus ~ .menu .menu__link {
        transform: translateX(0);
    }

    .dropdown {
        color: #000;
        margin: auto;
        right: 0;
        width: max-content;
    }

    .menu {
        position: fixed;
        background: rgba(0, 0, 0, 0.8);
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        color: #fff;
        flex-direction: column;
        gap: 0;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        transition: 0.5s;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .menu__link {
        padding: 15px;
        display: block;
        border-bottom: 1px solid #fff;
        font-size: 14px;
        transition: 0.5s;
        transform: translateX(100%);

        &:hover {
            background: rgba(255, 255, 255, 0.2);
        }
    }

    .ecom__content, .custom__content, .footer__content {
        flex-wrap: wrap;
    }

    .footer__title {
        margin-bottom: 20px;
    }
    
}

@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }

    .ecom__card, .custom__card, .footer__card {
        max-width: 240px;
    }
}

@media (max-width: 576px) {
    .nav__content {
        flex-wrap: wrap;
        gap: 30px;
    }

    .logo {
        width: 100%;
        text-align: center;
    }

    .header__title, .info__title, .project__title {
        font-size: 32px;
    }

    .ecom__content {
        justify-content: space-around;
        margin-bottom: 30px;
    }

    .ecom {
        padding-bottom: 40px;
    }

    .project__link {
        padding: 12px 25px;
    }

    .custom__content {
        justify-content: space-around;
        margin-top: 30px;
    }

    .custom__title {
        margin-top: 15px;
    }

    .footer__content, .footer__icon {
        justify-content: space-around;
        text-align: center;
    }

    .footer__link {
        display: block;
    }
}