body {
    font-family: 'Montserrat', sans-serif;
    margin: 0 auto;

}

header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background-color: #fff;

        justify-content: center;
        align-items: center;

    }

@media (min-width: 1200px) {
    .div_header {
        border: 0px solid blue;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 20px;
        max-width: 1200px;
        height: 80px;
        margin: 0 auto;
        padding: 20px;
        justify-content: center;
        align-items: center;
    }

    .nav{
        display: none;
    }

    .div_ul {
        display: grid;
        gap: 15px;
    }

    .div_nav_info {
        display: grid;
        color: #fff;
        gap: 0px;
    }

    .ul{
        text-decoration: none;
        font-size: 28px;
        color: #fff;
        font-weight: 600;
    }

    .ul:hover {
        color: #0D0D0D;
    }

    .nav_messengers {
        display: flex;
        gap: 15px;
    }

    .nav.open {
        display: grid;
        position: fixed;
        top: 100px;

        height: auto;
        width: auto;
        gap: 50px;
        background-color: #A5A6F6;
        z-index: 50;
        overflow-y: auto;
        padding: 35px;
        border-radius: 25px;
        animation: burgerAnimation 0.4s;
    }

    .div_burger {
        display: flex;
        width: 50px;
        height: 35px;

        justify-content: center;
        align-items: center;
    }

    .burger{
        border: 0px solid red;

        grid-column: 1 / 2;
        position: relative;
        z-index: 50;
        justify-content: center;
        align-items: center;


        width: 100%;
        height: 15px;
    }

    .burger span{
        grid-column: 1 / 2;
        height: 4px;
        width: 100%;
        transform: scale(1);
        background-color: #0D0D0D;
        border-radius: 50px;
    }

    .burger::before, .burger::after{
        grid-column: 1 / 2;
        content: '';
        position: absolute;
        height: 4px;
        width: 100%;
        background-color: #0D0D0D;
        transition: all 0.3s ease 0s;
        border-radius: 50px;
    }

    .burger:hover span,
    .burger:hover::before,
    .burger:hover::after {
        background-color: #A5A6F6;
        height: 5px;

        transition: all 0.1s ease 0s;
    }

    .burger::before { top: 0 }

    .burger::after { bottom: 0 }


    /* Добавляем класс active для анимации иконки бургера */
    .burger.active span { transform: scale(0) }

    .burger.active::before{
        top: 50%;
        background-color: #EB5757;
        transform: rotate(-45deg) translate(0, -50%);
    }

    .burger.active::after{
        bottom: 50%;
        background-color: #EB5757;
        transform: rotate(45deg) translate(0, 50%);
    }

    .logo {
        border: 0px solid black;
        grid-column: 2 / 12;
        display: grid;
        background-size: cover;
        background-position: center;
        justify-content: center;
        align-items: center;
    }

    .logo-img {
        width: 60px;
        height: 60px;
    }

    .messengers {
        display: flex;
        flex-direction: column;
        grid-column: 12 / 13;
        gap: 15px;
        justify-content: center;
        align-items: center;
    }

    .shop {
        border: 0px solid yellow;

        width: 60px;
        height: 60px;
        background-color: #589BD4;
        border-radius: 50px;

        display: flex;
        justify-content: center;
        align-items: center;

        position: relative;
    }

    .shop:hover {
        background-color: #A5A6F6;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .shop:active {
        background-color: #A5A6F6;
        width: 65px;
        height: 65px;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .shop_count {
        position: absolute;
        left: -20px;
        bottom: -25px;

        text-decoration: none;
        padding: 5px 10px;
        border-radius: 50px;
        border: 1px solid #fff;

        background-color: #EB5757;
        color: #fff;
    }

    .messenger {
        border: 0px solid yellow;
        width: 60px;
        height: 60px;
        background-color: transparent;
        background-size: cover;
        background-position: center;
        justify-content: center;
        align-items: center;
    }

    /* Подвал */
    footer {
        border: 0px solid blue;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 40px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 25vh 20px;
        color: #FFFFFF;
    }

    .div_footer {
        background-color: #0D0D0D;
    }

    .div_info {
        grid-column: 1 / span 5;
    }

    footer p {
        font-size: 16px;
        font-weight: 600;
    }

    footer text {
        font-size: 12px;
        font-weight: 300;
    }
}

@media (max-width: 1199px) {
    .div_header {
        border: 0px solid red;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 20px;
        max-width: 1200px;
        height: 80px;
        margin: 0 auto;
        padding: 20px;
        justify-content: center;
        align-items: center;
    }

    .nav{
        display: none;
    }

    .div_ul {
        display: grid;
        gap: 15px;
    }

    .div_nav_info {
        display: grid;
        color: #fff;
        gap: 0px;
    }

    .ul{
        text-decoration: none;
        font-size: 28px;
        color: #fff;
        font-weight: 600;
    }

    .ul:hover {
        color: #0D0D0D;
    }

    .nav_messengers {
        display: flex;
        gap: 15px;
    }

    .nav.open {
        display: grid;
        position: fixed;
        top: 100px;

        height: auto;
        width: auto;
        gap: 50px;
        background-color: #A5A6F6;
        z-index: 50;
        overflow-y: auto;
        padding: 35px;
        border-radius: 25px;
        animation: burgerAnimation 0.4s;
    }

    .div_burger {
        display: flex;
        width: 50px;
        height: 35px;

        justify-content: center;
        align-items: center;
    }

    .burger{
        border: 0px solid red;

        grid-column: 1 / 2;
        position: relative;
        z-index: 50;
        justify-content: center;
        align-items: center;


        width: 100%;
        height: 15px;
    }

    .burger span{
        grid-column: 1 / 2;
        height: 4px;
        width: 100%;
        transform: scale(1);
        background-color: #0D0D0D;
        border-radius: 50px;
    }

    .burger::before, .burger::after{
        grid-column: 1 / 2;
        content: '';
        position: absolute;
        height: 4px;
        width: 100%;
        background-color: #0D0D0D;
        transition: all 0.3s ease 0s;
        border-radius: 50px;
    }

    .burger:hover span,
    .burger:hover::before,
    .burger:hover::after {
        background-color: #A5A6F6;
        height: 5px;

        transition: all 0.1s ease 0s;
    }

    .burger::before { top: 0 }

    .burger::after { bottom: 0 }


    /* Добавляем класс active для анимации иконки бургера */
    .burger.active span { transform: scale(0) }

    .burger.active::before{
        top: 50%;
        background-color: #EB5757;
        transform: rotate(-45deg) translate(0, -50%);
    }

    .burger.active::after{
        bottom: 50%;
        background-color: #EB5757;
        transform: rotate(45deg) translate(0, 50%);
    }

    .logo {
        border: 0px solid red;
        grid-column: 2 / 12;
        display: grid;
        background-size: cover;
        background-position: center;
        justify-content: center;
        align-items: center;
    }

    .logo-img {
        width: 60px;
        height: 60px;
    }

    .messengers {
        display: flex;
        flex-direction: column;
        grid-column: 12 / 13;
        gap: 15px;
        justify-content: center;
        align-items: center;
    }

    .shop {
        border: 0px solid yellow;

        width: 60px;
        height: 60px;
        background-color: #589BD4;
        border-radius: 50px;

        display: flex;
        justify-content: center;
        align-items: center;

        position: relative;
    }

    .shop:hover {
        background-color: #A5A6F6;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .shop:active {
        background-color: #A5A6F6;
        width: 65px;
        height: 65px;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .shop_count {
        position: absolute;
        left: -20px;
        bottom: -25px;

        text-decoration: none;
        padding: 5px 10px;
        border-radius: 50px;
        border: 1px solid #fff;

        background-color: #EB5757;
        color: #fff;
    }

    .messenger {
        border: 0px solid yellow;
        width: 60px;
        height: 60px;
        background-color: transparent;
        background-size: cover;
        background-position: center;
        justify-content: center;
        align-items: center;
    }

    /* Подвал */
    footer {
        display: grid;
        border: 0px solid blue;
        grid-template-columns: repeat(12, 1fr);
        gap: 40px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 25vh 20px;
        color: #FFFFFF;
    }

    .div_footer {
        background-color: #0D0D0D;
    }

    .div_info {
        grid-column: 1 / span 5;
    }

    footer p {
        font-size: 16px;
        font-weight: 600;
    }

    footer text {
        font-size: 12px;
        font-weight: 300;
    }
}

@media (max-width: 960px) {
    .div_header {
        border: 0px solid green;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        max-width: 960px;
        height: 60px;
        margin: 0 auto;
        padding: 20px;
        justify-content: center;
        align-items: center;
    }

    .div_ul {
        display: grid;
        gap: 15px;
    }

    .div_nav_info {
        display: grid;
        color: #fff;
        gap: 0px;
        font-size: 12px;
        text-decoration: none;
    }

    .ul{
        text-decoration: none;
        font-size: 24px;
        color: #fff;
        font-weight: 500;
    }

    .ul:hover {
        color: #0D0D0D;
    }

    .nav_messengers {
        display: flex;
        gap: 15px;
    }

    .nav.open { /* .nav.open */
        display: grid;
        position: fixed;
        top: 80px;

        height: auto;
        width: auto;
        gap: 25px;
        background-color: #A5A6F6;
        z-index: 50;
        overflow-y: auto;
        padding: 25px;
        border-radius: 25px;
        animation: burgerAnimation 0.4s;
    }

    .div_burger {
        display: flex;
        grid-column: 1 / 2;
        width: 40px;
        height: 35px;

        justify-content: center;
        align-items: center;
    }

    .burger{
        border: 0px solid red;
        position: relative;
        z-index: 50;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 15px;
    }

    .burger span{
        grid-column: 1 / 2;
        height: 4px;
        width: 100%;
        transform: scale(1);
        background-color: #0D0D0D;
        border-radius: 50px;
    }

    .burger::before, .burger::after{
        grid-column: 1 / 2;
        content: '';
        position: absolute;
        height: 4px;
        width: 100%;
        background-color: #0D0D0D;
        transition: all 0.3s ease 0s;
        border-radius: 50px;
    }

    .burger:hover span,
    .burger:hover::before,
    .burger:hover::after {
        background-color: #A5A6F6;
        height: 5px;

        transition: all 0.1s ease 0s;
    }

    .burger::before { top: 0 }

    .burger::after { bottom: 0 }


    /* Добавляем класс active для анимации иконки бургера */
    .burger.active span { transform: scale(0) }

    .burger.active::before{
        top: 50%;
        background-color: #EB5757;
        transform: rotate(-45deg) translate(0, -50%);
    }

    .burger.active::after{
        bottom: 50%;
        background-color: #EB5757;
        transform: rotate(45deg) translate(0, 50%);
    }

    .logo {
        border: 0px solid green;
        grid-column: 12 / 13;
        display: grid;
        background-size: cover;
        background-position: center;
        justify-content: center;
        align-items: center;
    }

    .logo-img {
        width: 20px;
        height: 20px;
    }

    .messengers {
        display: flex;
        flex-direction: column;
        grid-column: 10 / 13;
        gap: 15px;
        justify-content: center;
        align-items: center;
    }

    /* Подвал */
    footer {
        display: grid;
        border: 0px solid red;
        grid-template-columns: repeat(12, 1fr);
        gap: 40px;
        max-width: 720px;
        margin: 0 auto;
        padding: 25vh 20px;
        color: #FFFFFF;
    }

    .div_footer {
        background-color: #0D0D0D;
    }

    .div_info {
        grid-column: 1 / 8;
    }

    footer p {
        font-size: 16px;
        font-weight: 600;
    }

    footer text {
        font-size: 12px;
        font-weight: 300;
    }
}

@media (max-width: 720px) {
    .div_header {
        border: 0px solid green;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        max-width: 720px;
        height: 60px;
        margin: 0 auto;
        padding: 20px;
        justify-content: center;
        align-items: center;
    }

    .div_ul {
        display: grid;
        gap: 15px;
    }

    .div_nav_info {
        display: grid;
        color: #fff;
        gap: 0px;
        font-size: 12px;
        text-decoration: none;
    }

    .ul{
        text-decoration: none;
        font-size: 24px;
        color: #fff;
        font-weight: 500;
    }

    .ul:hover {
        color: #0D0D0D;
    }

    .nav_messengers {
        display: flex;
        gap: 15px;
    }

    .nav.open { /* .nav.open */
        display: grid;
        position: fixed;
        top: 80px;

        height: auto;
        width: auto;
        gap: 25px;
        background-color: #A5A6F6;
        z-index: 50;
        overflow-y: auto;
        padding: 25px;
        border-radius: 25px;
        animation: burgerAnimation 0.4s;
    }

    .div_burger {
        display: flex;
        grid-column: 1 / 2;
        width: 40px;
        height: 35px;

        justify-content: center;
        align-items: center;
    }

    .burger{
        border: 0px solid red;
        position: relative;
        z-index: 50;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 15px;
    }

    .burger span{
        grid-column: 1 / 2;
        height: 4px;
        width: 100%;
        transform: scale(1);
        background-color: #0D0D0D;
        border-radius: 50px;
    }

    .burger::before, .burger::after{
        grid-column: 1 / 2;
        content: '';
        position: absolute;
        height: 4px;
        width: 100%;
        background-color: #0D0D0D;
        transition: all 0.3s ease 0s;
        border-radius: 50px;
    }

    .burger:hover span,
    .burger:hover::before,
    .burger:hover::after {
        background-color: #A5A6F6;
        height: 5px;

        transition: all 0.1s ease 0s;
    }

    .burger::before { top: 0 }

    .burger::after { bottom: 0 }


    /* Добавляем класс active для анимации иконки бургера */
    .burger.active span { transform: scale(0) }

    .burger.active::before{
        top: 50%;
        background-color: #EB5757;
        transform: rotate(-45deg) translate(0, -50%);
    }

    .burger.active::after{
        bottom: 50%;
        background-color: #EB5757;
        transform: rotate(45deg) translate(0, 50%);
    }

    .logo {
        border: 0px solid green;
        grid-column: 12 / 13;
        display: grid;
        background-size: cover;
        background-position: center;
        justify-content: center;
        align-items: center;
    }

    .logo-img {
        width: 60px;
        height: 60px;
    }

    .messengers {
        display: g;
        grid-column: 10 / 13;
        gap: 15px;
        justify-content: center;
        align-items: center;
    }

    .shop {
        border: 0px solid yellow;

        width: 60px;
        height: 60px;
        background-color: #589BD4;
        border-radius: 50px;

        display: flex;
        justify-content: center;
        align-items: center;

        position: relative;
    }

    .shop:hover {
        background-color: #A5A6F6;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .shop:active {
        background-color: #A5A6F6;
        width: 65px;
        height: 65px;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .shop_count {
        position: absolute;
        left: -20px;
        bottom: -25px;

        text-decoration: none;
        padding: 5px 10px;
        border-radius: 50px;
        border: 1px solid #fff;

        background-color: #EB5757;
        color: #fff;
    }

    .messenger {
        border: 0px solid yellow;
        width: 45px;
        height: 45px;
        background-color: transparent;
        background-size: cover;
        background-position: center;
        justify-content: center;
        align-items: center;
    }

    /* Подвал */
    footer {
        display: grid;
        border: 0px solid red;
        grid-template-columns: repeat(12, 1fr);
        gap: 40px;
        max-width: 720px;
        margin: 0 auto;
        padding: 25vh 20px;
        color: #FFFFFF;
    }

    .div_footer {
        background-color: #0D0D0D;
    }

    .div_info {
        grid-column: 1 / 8;
    }

    footer p {
        font-size: 16px;
        font-weight: 600;
    }

    footer text {
        font-size: 12px;
        font-weight: 300;
    }
}

@media (max-width: 480px) {
    .div_header {
        border: 0px solid red;

        display: grid;
        grid-template-columns: repeat(6, 1fr);
        max-width: 480px;
        height: 60px;
        margin: 0 auto;
        padding: 10px;
        justify-items: center;
        align-items: center;
    }

    .div_ul {
        display: grid;
        gap: 15px;
    }

    .div_nav_info {
        display: grid;
        color: #fff;
        gap: 0px;
        font-size: 12px;
        text-decoration: none;
    }

    .ul{
        text-decoration: none;
        font-size: 24px;
        color: #fff;
        font-weight: 500;
    }

    .ul:hover {
        color: #0D0D0D;
    }

    .nav_messengers {
        display: flex;
        gap: 15px;
    }

    .nav.open { /* .nav.open */
        display: grid;
        position: fixed;
        top: 80px;

        height: auto;
        width: auto;
        gap: 25px;
        background-color: #A5A6F6;
        z-index: 50;
        overflow-y: auto;
        padding: 25px;
        border-radius: 25px;
        animation: burgerAnimation 0.4s;
    }

    .div_burger {
        display: flex;
        grid-column: 1 / 2;
        width: 40px;
        height: 35px;

        justify-content: center;
        align-items: center;
    }

    .burger{
        border: 0px solid red;
        position: relative;
        z-index: 50;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 15px;
    }

    .burger span{
        grid-column: 1 / 2;
        height: 4px;
        width: 100%;
        transform: scale(1);
        background-color: #0D0D0D;
        border-radius: 50px;
    }

    .burger::before, .burger::after{
        grid-column: 1 / 2;
        content: '';
        position: absolute;
        height: 4px;
        width: 100%;
        background-color: #0D0D0D;
        transition: all 0.3s ease 0s;
        border-radius: 50px;
    }

    .burger:hover span,
    .burger:hover::before,
    .burger:hover::after {
        background-color: #A5A6F6;
        height: 5px;

        transition: all 0.1s ease 0s;
    }

    .burger::before { top: 0 }

    .burger::after { bottom: 0 }


    /* Добавляем класс active для анимации иконки бургера */
    .burger.active span { transform: scale(0) }

    .burger.active::before{
        top: 50%;
        background-color: #EB5757;
        transform: rotate(-45deg) translate(0, -50%);
    }

    .burger.active::after{
        bottom: 50%;
        background-color: #EB5757;
        transform: rotate(45deg) translate(0, 50%);
    }

    .logo {
        grid-column: 6 / 8;
        display: grid;
        background-size: cover;
        background-position: center;
        justify-items: center;
        align-items: center;
    }

    .logo-img {
        width: 50px;
        height 50px;
    }

    .messengers {
        display: flex;
        grid-column: 6 / 7;
        gap: 5px;
        justify-items: center;
        align-items: center;
    }

    .messenger {
        border: 0px solid yellow;
        width: 35px;
        height: 35px;
        background-color: transparent;
        background-size: cover;
        background-position: center;
        border: none;
        justify-content: center;
        align-items: center;
    }

    /* Подвал */
    footer {
        display: grid;
        background-color: #0D0D0D;
        grid-template-columns: repeat(6, 1fr);
        max-width: 480px;
        gap: 40px;
        margin: 0 auto;
        padding: 25vh 20px;
        color: #FFFFFF;
    }

    .div_info {
        background-color: #0D0D0D;
        grid-column: 1 / span 5;
    }

    footer p {
        font-size: 16px;
        font-weight: 600;
    }

    footer text {
        font-size: 12px;
        font-weight: 300;
    }
}