@font-face {
    font-family: 'Montserrat';
    src: url(/wp-content/themes/corporate_4hod/assets/css/font/Montserrat-VariableFont_wght.ttf) format('truetype');
    font-weight: 1 1000;
    /* диапазон весов шрифта */
    font-stretch: 1 100%;
    /* диапазон растяжения шрифта */
}

@font-face {
    font-family: 'Montserrat';
    src: url(/wp-content/themes/corporate_4hod/assets/css/font/Montserrat-Italic-VariableFont_wght.ttf) format('truetype');
    font-weight: 1 1000;
    font-stretch: 1 100%;
    font-style: italic;
}

:root {
    --transition: all 0.3s ease;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

button {
    background-color: transparent;
    outline: none;
    border: none;
    cursor: pointer;
}

li {
    list-style: none;
}

*,
*::before,
*::after {
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

/* MOBILE FIRST */
.container {
    width: 100% !important;
    padding: 0 20px !important;
    max-width: unset !important;
}

main#main {
    margin-bottom: auto;
}

#header {
    position: relative;
}

.header__top {
    padding: 12px 0;
}

.header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__burger {
    width: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 20px;
    cursor: pointer;
    z-index: 3;
    position: relative;
}

.header__burger:after,
.header__burger:before,
.header__burger span {
    display: block;
    border-radius: 3px;
    width: 35px;
    background: rgb(28, 28, 37);
    height: 4px;
    transition: var(--transition);

}

.header__burger:after,
.header__burger:before {
    content: '';
}

#header.mobile-menu .header__burger:before {
    transform: scale(0);
    opacity: 0;
}

#header.mobile-menu .header__burger span {
    transform: rotate(30deg);
}

#header.mobile-menu .header__burger:after {
    transform: rotate(-30deg) translateY(-7px) translateX(4px);
}

.header__mobile-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 13px 20px;
}

.header__mobile-info a,
.header__mobile-info p {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    text-decoration: none;
    font-size: 18px;
    color: rgb(28, 28, 37);
}

.header__mobile-info p b {
    font-size: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.header__mobile-info img {
    width: 15px;
}

.header__socials {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    margin-right: 20px;
}

.header__socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
}

.header__socials a img {
    display: block;
    width: 100%;
    height: 100%;
}

.header__mobile-menu {
    background: white;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(-100%);
    width: 100%;
    transition: var(--transition);
    padding-top: 55px;
    opacity: 0;
    z-index: 2;
    padding-bottom: 30px;
}

#header.mobile-menu .header__mobile-menu {
    transform: translateY(calc(100% - 69px));
    opacity: 1;
}

.header__mobile-container li a {
    text-decoration: none;
    color: #23272f;
    font-size: 18px;
    font-weight: 400;
    line-height: 17px;
    text-align: left;
}

.header__mobile-container li {
    /* margin-bottom: 15px; */
    border-top: 1px solid rgba(0,0,0,.05);
    padding: 15px 20px;
}



.header__mobile-container li:first-child  {
    border-top: 0;
}

.header__mobile-container ul ul {
    padding-left: 20px;
    margin-top: 15px;
}

.header__bottom,
.header__cities,
.header__button,
.header__phone {
    display: none;
}

.footer__bottom {
    padding-top: 25px;
    border-top: 1px solid rgb(25, 25, 35, .5);
}

.footer__bottom span {
    color: rgba(25, 25, 35, 0.5);
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;

}

.footer__logo {
    width: 166px;
}

.footer__logo img {
    width: 100%;
    height: auto;
    margin-bottom: 24px;
}

.footer__phone a {
    text-decoration: none;
    color: rgb(25, 25, 35);
    font-size: 20px;
    font-weight: 700;
    line-height: 29px;
    text-align: left;
}

.footer__phone {
    margin-bottom: 5px;
}

.footer__button {
    border-radius: 5px;
    background: rgb(25, 25, 35);
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    padding: 16px 30px;
    cursor: pointer;
    border: 1px solid rgb(25, 25, 35);
    transition: var(--transition);
    margin-top: 15px;
    width: 100%;
    text-align: center;
}

.footer__button:hover {
    background: rgb(255, 255, 255);
    color: rgb(25, 25, 35);
}

.footer__yandex {
    margin-top: 40px;
}

.footer__yandex-header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
}

.footer__yandex-header img {
    width: 15px;
    height: auto;
}

.footer__yandex-header span {
    color: rgb(25, 25, 35);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}

.footer__yandex-main {
    display: flex;
    align-items: center;
    gap: 5px;
}

.footer__yandex-main span {
    color: rgb(25, 25, 35);
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
}

.footer__main {
    margin-bottom: 24px;
}

.footer__yandex-button {
    margin-top: 13px;
    text-decoration: none;
    color: rgb(25, 25, 35);
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    padding: 12px 50px;
    width: 100%;
    display: block;
    text-align: center;
    border: 1px solid rgb(25, 25, 35);
    border-radius: 5px;
    transition: var(--transition);
}

.footer__yandex-button:hover {
    background: rgb(25, 25, 35);
    color: rgb(255, 255, 255);
}

.footer__title {
    margin-bottom: 20px;
    color: rgb(25, 25, 35);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
}

.footer__row nav a {
    text-decoration: none;
    color: rgb(25, 25, 35);
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    margin-bottom: 15px;
    display: block;
}

.footer__row nav a {
    color: rgb(4, 120, 255);
    font-weight: 700;
}

.footer__socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
}

.footer__socials a {
    display: block;
    width: 29px;
    height: 29px;
    text-decoration: none;
}


footer#footer {
    margin-top: 50px;
    margin-bottom: 20px;
}

.footer__text {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer__text span {
    color: rgb(25, 25, 35);
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
}

.footer__text span b {
    font-weight: 700;
}

.footer__text span a {
    color: rgb(25, 25, 35);
}

@media (max-width: 768px) {
    .footer__row {
        margin-bottom: 25px;
    }

    .footer__row-third .footer__title {
        display: none;
    }

    .footer__main {
        display: flex;
        flex-direction: column;
    }

    .footer__row-third {
        order: 2;
    }

    .footer__row-second {
        order: 3;
    }
}

@media (min-width: 768px) {
    .footer__main {
        margin-bottom: 50px;
    }

    .footer__row-third {
        display: flex;
        flex-direction: column;
    }

    .footer__socials {
        order: 5;
        justify-content: flex-start;
        margin-top: 15px;
        margin-bottom: 0;
    }

    .footer__text {
        margin-bottom: 15px;
    }

    .footer__text span {
        font-size: 20px;
        line-height: 24px;
    }

    .footer__socials a {
        width: 40px;
        height: 40px;
    }

    .footer__socials a img {
        width: 100%;
        height: 100%;
    }

    footer#footer {
        margin-top: 90px;
    }

    .footer__title {
        font-size: 28px;
        font-weight: 700;
        line-height: 34px;
    }

    .footer__row nav a {
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
    }

    .footer__phone a {
        font-size: 24px;
    }

    .footer__yandex-header img {
        width: 25px
    }

    .footer__yandex-header span {
        font-size: 36px;
        font-weight: 700;
        line-height: 44px;
    }

    .footer__yandex-main span {
        font-size: 20px;
        font-weight: 400;
        line-height: 20px;
    }

    .footer__yandex-main {
        gap: 6px
    }

    .footer__yandex-button {
        padding: 19px 40px;
        margin-top: 19px;
    }

    .footer__main {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 60px;
        justify-content: space-between;
        width: 100%;
    }

    .footer__yandex-main img {
        width: 30px;
    }

    .footer__bottom {
        padding-top: 20px;
    }

    .footer__bottom span {
        font-size: 20px;
        line-height: 24px;
    }

    .header__bottom {
        display: flex;
    }

    .header__burger,
    .header__mobile-menu {
        display: none;
    }

    .header__phone {
        display: flex;
        flex-direction: column;
        gap: 1px;
        align-items: flex-end;
        margin-right: 15px;
    }

    .header__phone a {
        color: rgb(25, 25, 35);
        font-size: 18px;
        font-weight: 700;
        line-height: 24px;

        text-align: left;
        text-transform: uppercase;
        text-decoration: none;
    }

    .header__phone span {
        color: rgb(25, 25, 35);
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;

        text-align: left;
    }

    .header__button {
        display: inline;
        border-radius: 5px;
        background: rgb(25, 25, 35);
        padding: 14px 6px;
        color: rgb(255, 255, 255);
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;

        text-align: center;
        cursor: pointer;
    }



    .header__bottom {

        background: rgb(4, 120, 255);
    }

    .header__bottom ul {
        display: flex;
        justify-content: space-between;
        gap: 5px;
    }

    .header__bottom a {
        padding: 19px 15px 21px 15px;
        display: block;
        text-decoration: none;
        color: white;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;

    }

    .header__bottom ul ul a {
        padding: 5px 10px
    }
}

.header__cities-current {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (min-width: 860px) {
    .header__cities {
        margin: 0 auto;
        display: flex;
        align-self: center;
        gap: 4px;
        cursor: pointer;
        position: relative;
    }

    .header__cities * {
        user-select: none;
    }

    .header__cities-list {
        position: absolute;
        bottom: -15px;
        opacity: 0;
        pointer-events: none;
        user-select: none;
        transition: var(--transition);
        transform: translateY(90%) translateX(-50px);
        background-color: white;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        padding-top: 10px;
        max-height: 280px;
        overflow-y: scroll;
        z-index: 3;

        &::-webkit-scrollbar {
            width: 8px;
        }

        &::-webkit-scrollbar-track {
            background: rgba(4, 120, 255, 0.3);
            /* Set the background color of the scrollbar track */
        }

        &::-webkit-scrollbar-thumb {
            background-color: #0478FF;
            border-radius: 4px;
        }
    }

    .header__cities.active .header__cities-list {
        pointer-events: all;
        user-select: all;
        opacity: 1;
        transform: translateY(100%)translateX(-50px);
    }

    .header__cities-list a {
        text-decoration: none;
        color: rgb(25, 25, 35);
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;

        text-align: left;
        padding-bottom: 9px;
        margin-bottom: 10px;
        display: block;
        border-bottom: 1px solid rgba(0, 0, 0, 0.5);
        padding-right: 10px;
        padding-left: 10px;
        width: 200px;
    }

    .header__cities-list li:last-child a {
        margin-bottom: 0;
        border: none;
    }

    .header__cities-current img {
        transition: var(--transition);
        transform: rotate(-90deg);
    }

    .header__cities.active .header__cities-current img {
        transform: rotate(0);
    }
}

@media (min-width: 1000px) {
    .header__bottom a {
        font-size: 16px;
    }
}


@media (min-width: 1290px) {
    .container {
        max-width: 1280px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
}

.portfolio__prev,
.portfolio__next {
    cursor: pointer;
}

.portfolio .swiper-slide {
    height: 100%;
}
.portfolio {
    position: relative;
}

.portfolio .swiper-pagination {
    margin-top: 10px;
    position: static;
}
.portfolio__text button {
    margin-top: auto !important;
}

.portfolio__content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.portfolio__text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.main-banner {
    background-image: url(/wp-content/themes/corporate_4hod/assets/images/main-screen.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 29px 0 42px 0;
}

.banner__info h1 {
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    color: #191923;
}

.banner__info h1 span {
    font-weight: 700;
    font-size: 18px;
    color: #191923;
    text-transform: lowercase
}

.banner__advantages-pc,
.banner__socials,
.banner__info p,
.banner__info .btn {
    display: none;
}

.banner__advantages {
    margin-top: 25px;
}

.banner__advantages-mobile .swiper-slide {
    border: 1px solid rgba(25, 25, 35, 0.1);
    border-radius: 5px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.banner__advantages-mobile .swiper-slide img {
    width: 57px;
    height: auto
}

.banner__advantages-mobile .swiper-pagination {
    position: static;
    margin-top: 10px;
}

.banner__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #191923;
    align-items: center;
    padding: 15px 20px;
    border-radius: 5px;

    width: fit-content;
}

.banner__form-header {
    font-weight: 800;
    font-size: 20px;
    color: #fff;
}

.banner__input-value {
    display: flex;
    align-self: center;
    justify-content: space-between;
    padding-bottom: 10px;
    color: white;
}

.banner__input-value:nth-child(1) {
    border-bottom: 1px solid #fff;
}

.banner__input-value:nth-child(2) {
    padding-top: 10px;
    padding-bottom: 15px;
}

.banner__price {
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    color: #1c1c25;
    background-color: white;
    padding: 7px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 14px;
    color: #1c1c25;
}

.banner__price span {
    font-weight: 700;
    font-size: 20px;
    margin-top: 5px;
    display: block;
}

.banner__input-value input::-webkit-outer-spin-button,
.banner__input-value input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.banner__input-value span {
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    display: flex;
    align-items: center;
}

.banner__input-value input {
    width: 80px;
    border-radius: 5px;
    height: 45px;
    text-align: center;
    padding: 0 10px;
    font-weight: 400;
    font-size: 14px;
    color: #191923;
    outline: none;
    border: none
}

.banner__price+input {
    width: auto;
    height: auto;
    padding: 11px 10px;
    border-radius: 5px;
    border: none;
    outline: none;
    width: 100%;
    text-align: center;
    font-weight: 400;
    font-size: 20px;
    color: #1c1c25;
    background: white;
}

@media (max-width: 768px) {
    .header__logo {
        width: 140px;
    }

    .header__logo img {
        width: 100%;
        height: auto;
    }
}


.banner__form-body .btn {
    border-radius: 5px;
    width: 100%;
    padding: 13px 20px;
    background: #0478ff;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    margin-top: 10px;
}

@media (min-width: 768px) {

    .banner__socials,
    .banner__info p,
    .banner__info .btn {
        display: block;
    }



    .banner__wrapper {
        display: flex;

    }

    .banner__socials {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-left: 40px;
        gap: 20px;
    }

    .banner__socials a {
        width: 50px;
        height: 50px;
    }

    .banner__socials img {
        width: 100%;
    }

    .banner__form {
        margin-left: auto;
        width: 320px;
        padding: 40px 20px 25px 20px;
        gap: 0;
    }

    .banner__form-header {
        font-weight: 800;
        font-size: 26px;
        color: #fff;
        margin-bottom: 25px;
    }

    .banner__input-value span {
        font-weight: 400;
        font-size: 15px;
        color: #fff;
    }

    .banner__input-value input {
        font-weight: 400;
        font-size: 20px;
        color: #191923;
    }

    .banner__price {
        font-weight: 400;
        font-size: 16px;
        color: #1c1c25;
    }

    .banner__price span {
        font-weight: 700;
        font-size: 32px;
        color: #1c1c25;
    }

    .banner__info h1 {
        font-weight: 700;
        font-size: 48px;
        margin-bottom: 70px;
        margin-top: 0;
    }

    .banner__info h1 span {
        font-weight: 700;
        font-size: 36px;
    }

    .banner__info p {
        font-weight: 400;
        font-size: 24px;
        color: #191923;
        margin-bottom: 15px;
    }

    .banner__info button.btn {
        border: 1px solid #191923;
        border-radius: 5px;
        width: 280px;
        height: 70px;
        font-weight: 700;
        font-size: 20px;
        color: #191923;
        padding: 22px 34px;
        transition: var(--transition);
        cursor: pointer;
    }

    .banner__info button.btn:hover {
        opacity: .8;
    }

    .banner__info button.btn:active {
        opacity: .7;
    }

    .banner__advantages-mobile {
        display: none;
    }

    .banner__advantages-pc {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        border: 1px solid #1c1c25;
        border-radius: 5px;
        background: rgba(251, 254, 249, 0.7);
        padding: 30px 25px
    }

    .banner__advantages-item {
        display: flex;
        gap: 10px;
    }

    .banner__advantages-item img {
        width: auto;
        height: 100px;
    }

    .banner__advantages-item p {
        margin: 0;
        margin-top: 10px;
        font-weight: 400;
        font-size: 14px;
        color: #1c1c25;
    }

    .banner__advantages-item span {
        font-weight: 700;
        font-size: 16px;
        color: #0478ff;
    }

    .main-banner {
        padding-top: 60px;
    }
}


#mainPageTabs {
    display: none;
}

#mainPageTabsMobile {
    display: block;
}

#mainPageTabsMobile a h4,
#mainPageTabsMobile a p {
    color: black
}

#mainPageTabsMobile .swiper-slide img {
    height: 250px;
    width: 100%;
    object-fit: cover;
    object-position: top;
}

#mainPageTabsMobile a h4 {
    font-weight: 600;
    margin-bottom: 20px;
}

#mainPageTabsMobile a h4+p {
    margin-bottom: 0px;
    text-transform: lowercase;
}

#mainPageTabsMobile a {
    text-decoration: none;
}

#mainPageTabsMobile .swiper-pagination {
    position: static;
    margin-top: 5px;
    margin-bottom: 20px;
}

#mainPageTabsMobile {
    margin-top: 50px;
}

#mainPageTabsMobile h2 {
    font-weight: 700;
    font-size: 21px;
    color: #191923;
    margin-bottom: 20px;
}

.potolki__container {
    display: none;
}

@media (min-width: 995px) {
    #mainPageTabsMobile {
        display: none;
    }

    .potolki__container {
        display: block;
    }

    .potolki__container h2 {
        font-weight: 700;
        font-size: 48px;
        color: #191923;
        margin-top: 70px;
        margin-bottom: 50px;
    }

    .potolki__tabs-btns {
        display: flex;
        justify-content: space-between;
        gap: 18px;
    }

    .potolki__tabs-btns button {
        flex-grow: 1;
        text-align: center;
        padding: 13px 5px;
        font-weight: 400;
        font-size: 18px;
        color: #191923;
        border: 1px solid #191923;
        border-radius: 50px;
        cursor: pointer;
    }

    .potolki__tabs-btns button.active {
        background: #0478ff;
        border-color: #0478ff;
        color: white;
    }
}

.product_card {
    margin: 20px 0 40px
}

.product_card h1 {
    text-align: center;
    margin: 0 0 20px
}

.product_card .body .main_swiper {
    padding: 0 0 0 15px;
    margin: 0 0 20px
}

.product_card .body .main_swiper .swiper-wrapper .swiper-slide {
    width: 85%
}

.product_card .body .main_swiper .swiper-pagination,
.product_card .body .swiper_thumb {
    display: none
}

.product_card .body .info h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
    text-align: center
}

.product_card .body .info>p {
    margin: 0 0 10px;
    font-size: 12px
}

.product_card .body .info ul {
    margin: 0 0 20px;
    font-size: 12px
}

.product_card .body .info ul li {
    padding: 0 0 0 25px;
    margin: 0 0 10px;
    position: relative
}

.product_card .body .info ul li::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 2px;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background-color: #00926b
}

.product_card .body .info ul li::after {
    content: "";
    display: block;
    position: absolute;
    left: 5px;
    top: -1px;
    width: 4px;
    height: 9px;
    border-radius: 2px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.product_card .body .info .order {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.product_card .body .info .order .price p {
    font-size: 12px
}

.product_card .body .info .order .price p strong {
    font-size: 24px
}

.product_card .body .info .order button {
    padding: 15px 35px
}

.potolki-type .swiper-button-next:after,
.potolki-type .swiper-button-prev:after {
    content: url(/wp-content/themes/corporate_4hod/assets/images/white-arrow.svg)
}

.potolki-type .swiper-button-prev:after {
    transform: rotate(180deg);
    left: 20px;
}

.potolki-type .swiper-button-next {
    right: 20px;
}

.potolki-type .swiper-button-prev {
    left: 20px;
}

.product_card .body .main_swiper .swiper-wrapper .swiper-slide {
    object-fit: cover;
}

@media (min-width:768px) {
    .product_card {
        margin: 25px 0 75px
    }

    .product_card .body .main_swiper .swiper-wrapper .swiper-slide {
        width: 45%
    }
}

.price p:nth-child(1) {
    font-weight: 400;
    font-size: 20px !important;
    color: #191923;
    margin-top: auto;
    margin-bottom: 5px;
}

.price p:nth-child(2) {
    margin-top: 0;
}

.product-item .button-block a {
    font-weight: 400;
    font-size: 20px;
    color: #191923;
    text-decoration: none;
    padding: 16px 20px;
    border: 1px solid #191923;
    border-radius: 5px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

@media (min-width:992px) {
    .product_card {
        margin: 30px 0 100px
    }

    .product_card h1 {
        text-align: left;
        margin: 0 0 40px
    }

    .product_card .body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 20px;
    }

    .product_card .body .wrapper {
        padding: 0
    }

    .product_card .body .main_swiper {
        width: calc((100% - 20px)/ 2);
        padding: 0;
        margin: 0
    }

    .product_card .body .main_swiper .swiper-wrapper .swiper-slide {
        width: 100%;
    }

    .product_card .body .main_swiper .swiper-pagination {
        display: block;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        left: auto;
        right: 25px;
        bottom: 15px
    }

    .product_card .body .info {
        width: calc((100% - 20px)/ 2)
    }

    .product_card .body .info h2 {
        margin: 0 0 20px;
        text-align: left
    }

    .product_card .body .info>p {
        margin: 0 0 15px;
        font-size: 16px
    }

    .product_card .body .info ul {
        margin: 0 0 25px;
        font-size: 16px
    }

    .product_card .body .info .order .price p {
        font-size: 16px
    }

    .product_card .body .info .order .price p strong {
        font-size: 32px
    }

    .product_card .body .info .order button {
        padding: 20px 45px;
        font-size: 22px
    }

    .product_card .body .swiper_thumb {
        display: block
    }

    .product_card .body .swiper_thumb .swiper-slide {
        width: calc((100% - 60px)/ 4)
    }
}

@media (min-width:1163px) {
    .product_card .body .info .order {
        display: block
    }

    .product_card .body .info .order .price {
        margin: 0 0 30px
    }
}

@media (min-width: 768px) {

    /* Adjusts for larger screens */
    .desktop-grid {
        grid-template-columns: auto 1fr;
        /* Image on the left, content on the right */
        gap: 2rem;
    }
}

.portfolio {
    margin-bottom: 40px;
}

.portfolio h2 {
    font-weight: 700;
    font-size: 21px;
    color: #191923;
    margin-top: 50px;
    margin-bottom: 20px;
}

.portfolio__navigation {
    display: none;
}

.portfolio button {
    margin-top: 40px;

}

.portfolio .swiper-pagination {
    bottom: 55px
}

@media (min-width: 768px) {
    .portfolio h2 {
        font-weight: 700;
        font-size: 48px;
        color: #191923;
        margin-top: 80px;
        margin-bottom: 60px;
    }

    .portfolio__navigation {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 30px;
        margin-top: 20px;
    }

    .portfolio__navigation .portfolio__prev img {
        transform: rotate(180deg);
    }

    .portfolio .swiper-pagination {
        display: none;
    }

}

.why {
    padding: 50px 0 20px 0;
    background: #EDF5FF;
    margin-top: 20px;
    margin-bottom: 50px;
}

.why h2 {
    font-weight: 700;
    font-size: 21px;
    color: #191923;
    margin-bottom: 20px;
}

.why__item {
    display: flex;
    gap: 20px;
    align-items: center;
}

.why__item img {
    height: 69px;
    width: auto;
}

.why__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px
}

.why__info p {
    margin: 0;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 16px;
    color: #191923;
}

.why__info span {
    font-weight: 400;
    font-size: 14px;
    color: #191923;
}

@media (min-width: 768px) {
    .why__list {
        grid-template-columns: 1fr 1fr;
        gap: 15px
    }
}

@media (min-width: 1024px) {
    .why__list {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 50px 30px;
    }

    .why h2 {
        font-weight: 700;
        font-size: 48px;
        color: #191923;
        margin-bottom: 50px;
    }

    .why {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .why__item {
        gap: 10px
    }

    .why__item img {
        height: 80px;
    }

    .why__info p {
        font-size: 20px;
    }

    .why__info span {
        font-size: 16px;
    }

}


.reviews-slider .swiper-slide video {
    width: 100%;
    height: auto;
}

.reviews-slider {
    position: relative;
}

.reviews-slider .swiper-pagination {
    position: static;
    margin-top: 10px;
}

.reviews-slider .swiper-pagination-bullet {
    background-color: #0478FF;
}

.reviews h2 {
    font-weight: 700;
    font-size: 21px;
    color: #191923;
    margin-bottom: 20px;
}

@media (min-width: 1024px) {
    .reviews h2 {
        font-weight: 700;
        font-size: 48px;
        color: #191923;
        margin-bottom: 50px;
    }
}

.faq {
    padding-top: 50px;
    padding-bottom: 20px;
}

.faq h2 {
    font-weight: 700;
    font-size: 21px;
    color: #191923;
    margin-bottom: 20px;
}

.faq__title {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.faq__title {
    font-weight: 400;
    font-size: 16px;
    color: #191923;
    transition: var(--transition);
    cursor: pointer;
}

.faq__item.active .faq__title {
    color: #0478ff;
    margin-bottom: 15px;
}

.faq__content {
    display: none;
    transition: var(--transition);
}

.faq__title svg {
    width: 15px;
    height: auto;
    transform: rotate(180deg);
    transition: var(--transition);
}

.faq__title svg path {
    fill: #191923
}

.faq__item.active .faq__title svg {
    transform: rotate(0);
}

.faq__item.active .faq__title svg path {
    fill: #0478FF;
}

.faq__item.active .faq__content {
    display: block;
}

.faq__item {
    border-bottom: 1px solid #1919233c;
    padding-bottom: 25px;
    padding-top: 20px;
}

.faq__content,
.faq__content * {
    font-weight: 400;
    font-size: 14px;
    color: #191923;
}

.faq__content li {
    list-style: inside;
}

@media (min-width: 1024px) {
    .faq h2 {
        font-weight: 700;
        font-size: 48px;
        color: #191923;
        margin-bottom: 50px;
        margin-top: 70px;
    }

    .faq__title svg {
        width: 30px;
    }

    .faq__title {
        font-weight: 400;
        font-size: 32px;
    }

    .faq__content,
    .faq__content * {
        font-weight: 400;
        font-size: 24px;
        color: #191923;
    }

}

.certs a {
    display: block;
}

.certs .swiper-slide img {
    width: 100%;
    height: auto;
}


.certs h2 {
    font-weight: 700;
    font-size: 21px;
    color: #191923;
    margin-bottom: 20px;
    margin-top: 50px;
}

.certs button {
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    width: 100%;
    padding: 12px 20px;
    margin-top: 37px;
    border-radius: 5px;
    background: #0478ff;

}


.certs__content {
    position: relative;
    padding-bottom: 30px;
}

@media (min-width: 768px) {
    .certs img {
        display: block;
        height: 250px;
        object-fit: cover;
    }

    .certs button {
        display: block;
        width: fit-content;
        margin: 0 auto;
        margin-top: 30px;
        padding: 16px 32px;
    }
}

@media (min-width: 1024px) {
    .certs .swiper-pagination {
        display: none;
    }

    .certs__content {
        padding-bottom: 0;
    }

    .certs h2 {
        font-weight: 700;
        font-size: 48px;
        color: #191923;
        margin-bottom: 50px;
        margin-top: 70px;
    }
}

.brands__item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    text-align: center;
}

.brands__image {
    display: flex;
    align-items: center;
    flex-grow: 1;
    border: 1px solid #191923;
    width: 100%;
}

.brands__image img {
    width: 100%;
    height: auto;
}

.brands__item span {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    color: #191923;
}

.brands__item p {
    font-weight: 700;
    font-size: 24px;
    color: #191923;
}

.brands__list {
    display: none;
}

.brands {
    position: relative;
}

.brands h2 {
    margin-top: 50px;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 21px;
    color: #191923;
}

@media (max-width: 1024px) {
    .brands__image {
        height: 225px;
        width: 225px;
    }

    .brands__image img {
        height: auto;
        width: auto;
    }

    .brands {
        padding-bottom: 40px;
    }
}

@media (min-width: 1024px) {
    .brands__list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px 20px
    }

    .brands .swiper-pagination,
    .brands .swiper {
        display: none;
    }

    .brands h2 {
        font-weight: 700;
        font-size: 48px;
        color: #191923;
        margin-top: 70px;
        margin-bottom: 50px;
    }
}

.form__input {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
}

.form__contacts span,
.form__input label {
    font-weight: 700;
    font-size: 14px;
    color: #191923;
}


.form__input input {
    background: rgba(4, 120, 255, 0.07);
    font-weight: 400;
    font-size: 14px;
    color: rgba(25, 25, 35, 1);
    padding: 15px;
    border-radius: 5px;
    border: none;
    outline: none;
}

.form__input input::placeholder {

    color: rgba(25, 25, 35, .5);
}

.wideform h2 {
    font-weight: 700;
    font-size: 21px;
    color: #191923;
    margin-top: 50px;
    margin-bottom: 20px;
}

.form__contacts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.form__radio input {
    display: none;
}

.form__radio label {
    cursor: pointer;
}

.form__contacts-list {
    gap: 15px;
    display: flex;
    align-items: center;
}

.form__radio label {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf5ff;
    border-radius: 5px;
    border: 1px solid transparent;
    transition: var(--transition);
}

.form__radio img {
    width: 30px;
    height: auto;
}

.form__radio input:checked+label {
    border: 1px solid #0478ff;
}

.wideform button {
    padding: 13px 34px;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    background: #0478ff;
    border-radius: 5px;
    height: fit-content;

}

@media (min-width: 1024px) {
    .wideform form {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .wideform form .form__input {
        width: 25%;
    }

    .wideform h2 {
        font-weight: 700;
        font-size: 48px;
        color: #191923;
        margin-top: 90px;
        margin-bottom: 50px;
    }
}

.calc__container--pc {
    display: none;
}

.slider {
    position: relative;
    width: 100%;
    /* Измените ширину по вашему усмотрению */
    height: 10px;
    /* Высота трека слайдера */
    background: #d3d3d3;
    border-radius: 5px;
}

.slider__input {
    width: 100%;
    position: absolute;
    pointer-events: none;
    -webkit-appearance: none;
    z-index: 2;
    /* Повыше, чтобы быть над progress bar */
    height: 10px;
    /* Высота трека слайдера */
    opacity: 0;
}

.slider__track {
    position: absolute;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #D9D9D9;
    z-index: 1;
}

.slider__progress {
    position: absolute;
    background: #0478FF;
    height: 10px;
    border-radius: 5px;
    z-index: 2;
}

.slider__thumb {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    cursor: pointer;
}

.calc__slider--action {
    user-select: none;
}

.slider__thumb svg {
    width: 20px;
    height: auto;
}

.calc__slider--action {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calc__slider--action span {
    font-weight: 400;
    font-size: 14px;
    color: #191923;
}

.calc__slider--title {
    font-weight: 400;
    font-size: 14px;
    display: flex;
    width: 100%;
    color: #191923;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin-bottom: 17px;
}

/* remove arrows on input number */
.calc__slider--title input::-webkit-outer-spin-button,
.calc__slider--title input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.calc__slider--title input {
    outline: none;
    font-weight: 700;
    font-size: 20px;
    color: rgba(25, 25, 35, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 6px 16px;
    width: 75px;
    text-align: center;
}

.calc__slider--title span {
    font-weight: 700;
    font-size: 15px;
    color: #191923;
}

.calc__container--mobile {
    padding: 25px 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.custom-select {
    position: relative;
    width: 100%;
    margin-top: 27px;

}

.custom-select__selected {
    padding: 10px;
    background-color: white;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.custom-select__options-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: none;
    z-index: 1000;
    background-color: white;
    display: none;
}

.custom-select__option {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    ;
}

.custom-select__option:hover {
    background-color: #f2f2f2;
}

.custom-select__selected::after {
    content: url(/wp-content/themes/corporate_4hod/assets/images/select-arrow.svg);
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* remove arrows on input number */
.counters__item input::-webkit-outer-spin-button,
.counters__item input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.counters__item input {
    width: 30px;
    outline: none;
    border: none;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    color: #191923;
}

.counters__body {
    display: flex;
    align-items: center;
    gap: 17px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 13px;
    width: fit-content;
}

.counters__body button {
    width: 15px;
    height: 15px;
}

.counters__title {
    font-weight: 400;
    font-size: 14px;
    color: #191923;
    margin-bottom: 2px;
}

.counters {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.request-block__price {
    font-weight: 400;
    font-size: 14px;
    color: #191923;
    margin-top: 20px;
    margin-bottom: 15px;
    text-align: center;
    line-height: 120%;
}

.request-block input {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 10px;
    outline: none;
    font-weight: 400;
    font-size: 20px;
    color: #1c1c25;
    text-align: center;
}

.request-block button {
    padding: 12px 50px;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    border-radius: 50px;
    background: #191923;
    margin: 0 auto;
    display: block;
    margin-top: 15px;
}

.request-block p {
    margin-top: 10px;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    color: #191923;
    margin-bottom: 20px;
}

.request-block span {
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    color: rgba(25, 25, 35, 0.5);
    text-align: center;
    display: block;
}

@media (min-width: 995px) {
    .calc__container--mobile {
        display: none;
    }

    .calc__container--pc {
        display: block;
    }

    .calc__title {
        font-weight: 700;
        font-size: 20px;
        color: #191923;
        padding: 23px 40px;
        width: 100%;
        background: #edf5ff;
        border-radius: 5px;
        text-align: center;
        margin-bottom: 26px;
        height: fit-content;
    }

    .calc-pc {
        display: flex;
        justify-content: space-between;
        gap: 20px;
    }

    .calc__column {
        flex-grow: 1;
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }

    .calc__choose input {
        display: none;
    }

    .calc__choose {
        width: calc(50% - 7px);
    }

    .calc__choose label {
        width: 100%;
        display: block;
        text-align: center;
        font-weight: 400;
        font-size: 20px;
        border: 1px solid rgba(25, 25, 35, 0.2);
        border-radius: 5px;
        color: #191923;
        padding: 12px 2px;
        cursor: pointer;
        transition: var(--transition);
    }

    .calc__choose input:checked+label {
        background: #0478ff;
        color: #fff;
    }

    .calc__choose:nth-last-child(1) {
        width: 100%;
    }

    .calc__column:nth-child(2) .calc__choose:nth-last-child(1) {
        width: calc(50% - 7px);
    }

    .calc__subtitle {
        font-weight: 400;
        font-size: 16px;
        color: #191923;
        margin-bottom: 10px;
    }

    .calc__number button {
        border: 1px solid rgba(25, 25, 35, 0.2);
        border-radius: 5px;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .calc__number button:nth-child(3) {
        border-radius: 5px;
        background: #0478ff;
        border-color: #0478ff;
    }

    .calc__number {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .calc__number input {
        font-weight: 700;
        font-size: 40px;
        color: #191923;
        width: 60px;
        text-align: center;
        border: none;
        outline: none
    }

    /* remove input number arrows */
    .calc__number input::-webkit-outer-spin-button,
    .calc__number input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .calc__action {
        width: 100%;
    }

    .calc__container--pc h2 {
        font-weight: 700;
        font-size: 48px;
        color: #191923;
        margin-bottom: 50px;
    }

    .calc__description {
        font-weight: 400;
        font-size: 20px;
        text-align: center;
        color: #191923;
        margin-top: 40px;
        display: block;
    }

    .calc__itog {
        margin-top: 60px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        gap: 10px;
        align-items: center;
    }

    .calc__itog input {
        border: 1px solid rgba(25, 25, 35, 0.2);
        border-radius: 5px;
        padding: 18px 26px;
        font-weight: 400;
        font-size: 20px;
        color: #191923;
        width: 275px;
        text-align: center;
        display: block;
        outline: none;
    }

    .calc__submit {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .calc__submit .btn {
        background: #191923;
        border-radius: 5px;
        font-weight: 400;
        font-size: 20px;
        color: #fff;
        padding: 18px 40px;
    }

    .calc__itog span {
        font-weight: 400;
        font-size: 24px;
        color: #191923;
    }

    .calc__itog span b {
        font-weight: 700;
        font-size: 32px;
    }
}


.product h1 {
    font-weight: 700;
    font-size: 21px;
    color: #191923;
    margin: 20px 0;
}

.product .product_card .body .info .order {
    flex-direction: column;
    align-items: flex-start;
}

.product .product_card .body .info .order .price {
    text-align: left;
    margin: 20px 0;

}

.product .product_card .body .info .order .price p {
    font-weight: 400;
    font-size: 14px !important;
    color: #191923;
}

.product .product_card .body .info .order button {
    font-weight: 400;
    font-size: 18px;
    color: #fbfef9;
    background: #0478ff;
    border-radius: 5px;
    padding: 12px 40px;
    display: block;
    margin-top: auto;
    width: 100%;
}

.product .product_card .type-block {
    width: 100%;
}

@media (min-width: 768px) {
    .product h1 {
        font-size: 48px;
        margin-top: 70px;
        margin-bottom: 50px;
    }

    .product .product_card .body .info .order button {
        font-size: 20px;
        padding: 16px 40px;
    }
}

.examples h2 {
    margin-top: 50px;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 21px;
    color: #191923;
}

.examples__pc {
    display: none;
}

.examples .swiper-pagination {
    position: static;
    margin-top: 10px;
}

.examples__mobile .swiper-slide img {
    width: 100%;
    height: auto;
}

@media (min-width: 1024px) {
    .examples__pc {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .examples__mobile {
        display: none;
    }

    .examples__pc--image img {
        width: 100%;
        height: auto;
    }

    .examples h2 {
        font-weight: 700;
        font-size: 48px;
        color: #191923;
        margin-bottom: 50px;
        margin-top: 70px;
    }

    .examples {
        margin-bottom: 70px;
    }
}

.products h2 {
    font-weight: 700;
    font-size: 21px;
    color: #191923;
    margin-bottom: 20px;
}

.products {
    margin-bottom: 20px;
}

.product__image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.product__image {
    margin-bottom: 10px;
}

.product__title {
    margin-bottom: 40px;
}

.products__item button {
    border-radius: 5px;
    background: #0478ff;
    padding: 12px 20px;
    width: 100%;
    font-size: 18px;
    text-align: center;
    font-weight: 400;
    color: #fbfef9;
}



.products__item a {
    display: block;
}

.products {
    position: relative;
}

.products .swiper-wrapper {
    justify-content: stretch;
}

.products .swiper-pagination {
    bottom: 60px;
}

.product__title {
    font-weight: 700;
    font-size: 16px;
    color: #191923;
    min-height: 48px;

}

@media (min-width: 1024px) {


    .products__item button {
        border-radius: 5px;
        background: #0478ff;
        padding: 14px 40px;
        font-weight: 400;
        font-size: 20px;
        color: #fbfef9;
    }

    .products h2 {
        font-size: 48px;
        margin-top: 70px;
        margin-bottom: 50px;
    }

    .product__title {
        font-size: 20px;
    }

    .products__list {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 20px;
    }

    .products__item {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .products__item button {
        width: fit-content;
        margin-top: auto;
    }
}

.materials h1 {
    font-weight: 700;
    font-size: 21px;
    color: #191923;
    margin: 20px 0;
}

.materials__buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-bottom: 20px;
}

.materials__button {
    font-weight: 400;
    font-size: 14px;
    color: #0478ff;
    padding: 12px 20px;
    background: #edf5ff;
    border-radius: 5px;
    transition: var(--transition);
}

.materials__button:hover {
    opacity: .8;
}

.materials__button.materials__button--active {
    background: #0478ff;
    color: white;
}

.materials__tab-item {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

.materials__title p {
    font-weight: 700;
    font-size: 18px;
    color: #191923;
    margin-bottom: 0px;
    margin-top: 0;
}

.materials__title span {
    font-weight: 400;
    font-size: 14px;
    color: #191923;
}

.materials__title {
    margin-bottom: 15px;
}

.materials__description {
    font-weight: 400;
    font-size: 14px;
    color: #191923;
}

.materials__price {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
}

.materials__price p {
    font-weight: 700;
    font-size: 20px;
    color: #191923;
}

.materials__price span {
    font-weight: 400;
    font-size: 14px;
    color: #191923;
}

.materials__props {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-top: 15px;
}

.materials__tabs .swiper-pagination {
    position: static;
}

.materials__tab {
    display: none;
}

.materials__tab-active.materials__tab {
    display: block;
}

.materials__tabs+button {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-top: 30px;
    padding: 16px 33px;
    font-weight: 400;
    font-size: 20px;
    color: #191923;
    border: 1px solid #191923;
    border-radius: 5px;
}

@media (min-width: 582px) {
    .materials__buttons {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

@media (min-width: 1024px) {
    .materials__buttons {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 40px;
    }

    .materials__button {
        font-size: 24px;
        padding: 15px 50px;
    }

    .materials h1 {
        font-weight: 700;
        font-size: 48px;
        color: #191923;
        margin-top: 70px;
        margin-bottom: 50px;
    }

    .materials__tabs .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

.shirina__buttons {
    display: flex;
    align-items: center;
    gap: 10px;

}

.shirina__button {
    padding: 10px 20px;
    font-weight: 400;
    font-size: 14px;
    color: #0478ff;
    background: #edf5ff;
    border-radius: 5px;
}

.shirina__button.shirina__button--active {
    background: #0478ff;
    color: #fff;
}

.shirina__tab {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.shirina__item {
    width: 100%;
}

.shirina__img img {
    width: 100%;
    height: auto;
    display: block;
}

.shirina__img {
    border: 1px solid #191923;
}

.shirina__text p,
.shirina__text span:nth-child(1) {
    font-weight: 700;
    font-size: 14px;
    color: #191923;
    margin-bottom: 5px;
    display: block;
}

.shirina__text span:nth-child(3) {
    font-weight: 700;
    font-size: 16px;
    color: #0478ff;
}

.shirina__text {
    margin-top: 5px;
}

.shirina__buttons {
    margin-bottom: 28px;
}

.shirina__tab:not(.shirina__tab--active) {
    display: none;
}

.shirina h2 {
    font-weight: 700;
    font-size: 21px;
    color: #191923;
    margin-top: 50px;
    margin-bottom: 20px;
}

@media (min-width: 520px) {
    .shirina__tab {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .shirina__tab {
        grid-template-columns: repeat(4, 1fr);
    }

    .shirina h2 {
        font-weight: 700;
        font-size: 48px;
        margin-top: 70px;
        margin-bottom: 50px;
    }

    .shirina__button {
        font-size: 24px;
        padding: 18px 56px;
    }
}

.garanty h2 {
    margin-top: 50px;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 21px;
    color: #191923;
}

.garanty p {
    font-weight: 400;
    font-size: 14px;
    color: #191923;
}

.garanty button {
    margin: 20px 0;
    border: 1px solid #0478ff;
    border-radius: 5px;
    padding: 13px 20px;
    width: 100%;
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    color: #0478ff;
}

@media (min-width: 1024px) {
    .garanty h2 {
        font-weight: 700;
        font-size: 48px;
        margin-top: 70px;
        margin-bottom: 50px;
        text-align: center;
    }

    .garanty p {
        font-weight: 400;
        font-size: 24px;
        text-align: center;
        color: #191923;
    }

    .garanty button {
        background: #0478ff;
        width: fit-content;
        font-size: 20px;
        color: #fff;
        display: block;
        margin: 30px auto;
        padding: 18px 54px;
    }

}

.contacts h1 {
    font-weight: 700;
    font-size: 21px;
    color: #191923;
    margin-top: 30px;
    margin-bottom: 20px;
}

.contacts p {
    font-weight: 400;
    font-size: 14px;
    color: #191923;
    margin-bottom: 25px;
}

.contacts p b {
    font-weight: 700;
}

.contacts__tel a {
    font-weight: 400;
    font-size: 20px;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: #191923;
}

@media (min-width: 768px) {
    .contacts__content {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .contacts p {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .contacts h1 {
        font-weight: 700;
        font-size: 48px;
        margin-top: 70px;
        margin-bottom: 50px;
    }

    .contacts__tel a {
        font-weight: 400;
        font-size: 32px;
        text-decoration: unset;
    }

    .contacts__content {
        margin-bottom: 40px;
    }
}

.modal-form {
    max-width: 570px;
}

.modal-form__title {
    font-weight: 700;
    font-size: 28px;
    color: #191923;
    margin-bottom: 30px;
}

.modal-form__title+p {
    font-weight: 400;
    font-size: 16px;
    color: #191923;
    margin-bottom: 20px;
}

.modal-form form {
    display: flex;
    flex-direction: column;
}

.modal-form__label-text {
    font-weight: 700;
    font-size: 20px;
    color: #191923;
}

.modal-form form label+input {
    background: rgba(4, 120, 255, 0.07);
    border-radius: 5px;
    padding: 18px 15px;
    outline: none;
    margin-bottom: 25px;
    outline: none;
    border: none
}

.modal-form form label+input::placeholder {
    font-weight: 400;
    font-size: 20px;
    color: rgba(25, 25, 35, 0.5);
}

.modal-form__radios {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-start;
    gap: 16px;
}

.modal-form__radio label {
    display: flex;
    align-items: center;
    border: 1px solid #edf5ff;
    background: #edf5ff;
    cursor: pointer;
    padding: 18px;
    border-radius: 5px;
    align-items: center;
    gap: 0px;
    font-size: 0px;
    transition: var(--transition);
}

@media (min-width: 1024px) {
    .modal-form__radio label {
        gap: 10px;
        font-size: 14px
    }

    .modal-form__title {
        font-size: 40px;
    }

    .modal-form__radios {
        justify-content: space-between;
    }
}

.modal-form__radio input {
    display: none !important;
}

.modal-form__radio input:checked+label {
    border: 1px solid #0478ff;
}

.modal-form form button[type=submit] {
    margin-top: 30px;
    width: 100%;
    text-align: center;
    padding: 18px;
    background: #0478ff;
    border-radius: 5px;
    font-weight: 400;
    font-size: 20px;
    color: #fff;
    transition: var(--transition);
}

.modal-form form button[type=submit]:hover {
    opacity: .8;
}

.modal-form form button[type=submit]+span {
    margin-top: 10px;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.5);
}

.modal-form form button[type=submit]+span a {
    color: rgba(4, 120, 255, 0.5);
}

.modal-form__economy {
    margin-top: 25px;
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    color: #000;
}

.modal-form__economy+a {
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-align: center;
    color: #191923;
    margin-top: 10px;
}

.portfolio__text p {
    font-weight: 400;
    font-size: 14px;
    color: #191923;
}

.portfolio__text p b {
    font-weight: 700;
    font-size: 16px;
}

.portfolio__text button {
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    padding: 12px;
    width: 100%;
    text-align: center;
    background: #0478ff;
    border-radius: 5px;

}

.portfolio__image {
    height: 300px;
}

.portfolio__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 1024px) {
    .portfolio__content {
        display: flex;
        align-items: stretch;
        flex-direction: row;
        gap: 18px;

    }

    .portfolio__image {
        height: 422px;
    }

    .portfolio__text button {
        border-radius: 0;
        padding: 18px 60px;
        font-weight: 400;
        font-size: 20px;
        color: #fff;
        margin-top: auto;
        transition: var(--transition);
    }

    .portfolio__text button:hover {
        opacity: .8;
    }



    .portfolio__text p:nth-child(1) {
        margin-top: 0;
        font-weight: 700;
        font-size: 32px;
        color: #191923;
        margin-bottom: 20px;
    }

    .portfolio__text {
        display: flex;
        flex-direction: column;
    }
}

#ok-modal svg {
    width: 28px;
    height: auto;
    margin-bottom: 10px;
}

#ok-modal p {
    font-weight: 400;
    font-size: 14px;
    color: #000;
    margin: 0;
}

#ok-modal p b {
    font-weight: 700;
    font-size: 16px;
    color: #0478ff;
    margin-bottom: 10px;
    margin-top: 0;
}

.mobile-menu-toggle {
    color: #23272f;
    font-size: 16px;
}

.mobile-menu-toggle+.child-menu {
    display: none;
}

.mobile-menu-toggle.active+.child-menu {
    display: block;
    padding-left: 0;
}

.header__mobile-menu {
    height: calc(100vh);
    overflow-y: auto;
}

@media (min-width: 768px) {
    .menu {
        background-color: rgb(4, 120, 255);
    }

    .menu ul {
        all: unset;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        background:
            rgb(4, 120, 255);
    }

    .menu ul li {
        position: relative;
    }

    .menu ul li a {
        display: block;
        /* padding: 10px; */
    }

    /* Style the submenus */
    .menu ul li ul {
        position: absolute;
        display: none;
        flex-direction: column;
        z-index: 5;
    }

    .menu ul ul li {
        width: max-content;
        min-width: 100%;
        max-width: 200px;
    }

    .menu ul a {
        color:
            #fff;
        cursor: pointer;
    }

    .menu ul a:hover {
        background:
            rgba(4, 121, 255, 0.425);
    }

    .menu ul li:hover>ul {
        display: flex;
        /* Show submenus on hover */
    }

    /* Style the third-level submenu */
    .menu ul ul ul {
        top: 0;
        left: 100%;
    }
}

.product_card a {
    color: #0478ff;
    text-decoration: none;
}

button.f-button svg {
    margin-bottom: 0 !important; 
} 

#breadcrumbs a{
    text-decoration: none !important;
    color: rgb(25, 25, 35) !important;
}