body {
    font-family: Roboto, sans-serif;
    font-size: var(--font-size-base);
    color: var(--main-2);
    line-height: var(--line-height-base);
    overflow-x: hidden;
}

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    /* font: inherit; */
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    color-scheme: dark light;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
    list-style: none;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    line-height: 1.5;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--deep-gray);
}

/* Set scroll-bar fo WebKit-browsers */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 3px;
}

::-webkit-scrollbar-track {
    background-color: var(--deep-gray);
}

button {
    outline: transparent;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    list-style-position: inside;
    padding-left: 0;
}

/* Make images easier to work with */
img,
picture,
svg,
video {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Typography style */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    color: var(--heading-color);
    line-height: var(--line-height-heading);
    margin: 0;
}

h1 {
    font-size: var(--font-size-title-headline);
    font-weight: 700;
    line-height: var(--line-height-heading);
}
h2 {
    font-size: 2em;
    font-weight: 700;
}
h3 {
    font-size: 1.75em;
    font-weight: 700;
}
h4 {
    font-size: 1.5em;
    font-weight: 700;
}
h5 {
    font-size: 1.25em;
    font-weight: 700;
}
h6 {
    font-size: 1em;
    font-weight: 700;
}

.t-b-72 {
    font-size: var(--font-size-72);
    font-weight: 700;
    line-height: var(--line-height-heading);
}

.t-r-72 {
    font-size: var(--font-size-title-headline);
    font-weight: 400;
    line-height: var(--line-height-heading);
}

.t-b-40 {
    font-size: var(--font-size-title-headline);
    font-weight: 700;
    line-height: var(--line-height-heading);
}

.t-b-36 {
    font-size: var(--font-size-title-large);
    font-weight: 700;
    line-height: var(--line-height-heading);
}

.t-b-27 {
    font-size: var(--font-size-27);
    font-weight: 700;
    line-height: var(--line-height-base);
}

.t-r-27 {
    font-size: var(--font-size-27);
    font-weight: 400;
    line-height: var(--line-height-base);
}

.t-b-22 {
    font-size: var(--font-size-22);
    font-weight: 700;
    line-height: var(--line-height-base);
}

.t-r-22 {
    font-size: var(--font-size-22);
    font-weight: 400;
    line-height: var(--line-height-base);
}

.t-b-24 {
    font-size: var(--font-size-title-medium);
    font-weight: 700;
    line-height: var(--line-height-base);
}

.t-r-24 {
    font-size: var(--font-size-title-medium);
    font-weight: 400;
    line-height: var(--line-height-base);
}

.t-b-20 {
    font-size: var(--font-size-medium);
    font-weight: 700;
    line-height: var(--line-height-base);
}

.t-r-20 {
    font-size: var(--font-size-medium);
    font-weight: 400;
    line-height: var(--line-height-base);
}

.t-b-18 {
    font-size: var(--font-size-regular);
    font-weight: 700;
    line-height: var(--line-height-small);
}

.t-r-18 {
    font-size: var(--font-size-regular);
    font-weight: 400;
    line-height: var(--line-height-base);
}

.t-b-16 {
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: var(--line-height-small);
}

.t-r-16 {
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--line-height-base);
}

.t-r-14 {
    font-size: var(--font-size-small);
    font-weight: 400;
    line-height: var(--line-height-base);
}

@media (max-width: 700px) {
    .t-b-72,
    .t-r-72 {
        font-size: var(--font-size-title-headline);
    }

    .t-b-40 {
        font-size: var(--font-size-title-large);
        line-height: var(--line-height-medium);
    }

    .t-b-36 {
        font-size: var(--font-size-title-big);
        line-height: var(--line-height-medium);
    }

    .t-b-27,
    .t-r-27 {
        font-size: var(--font-size-title-medium);
    }

    .t-b-24 {
        font-size: var(--font-size-medium);
        line-height: var(--line-height-heading);
    }

    .t-r-24 {
        font-size: var(--font-size-medium);
        line-height: var(--line-height-heading);
    }

    .t-b-20 {
        font-size: var(--font-size-regular);
        line-height: var(--line-height-heading);
    }

    .t-r-20 {
        font-size: var(--font-size-regular);
        line-height: var(--line-height-heading);
    }

    .t-b-16 {
        font-size: var(--font-size-small);
        line-height: var(--line-height-heading);
    }

    .t-r-16 {
        font-size: var(--font-size-small);
        line-height: var(--line-height-heading);
    }
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}

:root {
    /* Main color variables */
    --main: #333333;
    --primary: #3ec377;
    --secondary: #efefef;
    --secondary-2: #959595;
    --gradient: linear-gradient(
        100deg,
        rgba(111, 199, 115, 1),
        rgba(36, 138, 55, 1)
    );
    --gradient-2: linear-gradient(
        100deg,
        rgba(239, 239, 239, 1),
        rgba(152, 177, 146, 1)
    );
    --green: #248a37;
    --white: #fff;
    --gray: #e0e0e0;

    /* New colors */
    --deep-gray: #f5f5f5;
    --secondary-3: #767b7d;
    --main-2: #010101;

    /* Box shadow */
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.07);

    /* Typography variables  */
    --font-size-72: 4.5rem; /* 72px */
    --font-size-title-headline: 2.5rem; /* 40px */
    --font-size-title-large: 2.25rem; /* 36px */
    --font-size-title-big: 1.875rem; /* 30px */
    --font-size-27: 1.688rem; /* 27px */
    --font-size-title-medium: 1.5rem; /* 24px */
    --font-size-22: 1.375rem; /* 22px */
    --font-size-medium: 1.25rem; /* 20px */
    --font-size-regular: 1.125rem; /* 18px */
    --font-size-base: 1rem; /* 16px */
    --font-size-small: 0.875rem; /* 14px */

    --line-height-base: 1.4;
    --line-height-small: 1;
    --line-height-heading: 1.2;
    --line-height-medium: 1.1;

    /* Width container */
    --container: 1200px;
    --base-padding: 30px;
    --mobile-padding: 10px;

    /* z-index */
    --z-index-1: 1;
    --z-index-2: 2;
    --z-index-3: 3;
    --z-index-4: 4;
    --z-index-5: 5;
}

/* Adaptive width
use
1200px
1000px
700px
400px
320px
*/

/* Main layout */
.main-layout {
    position: relative;
    z-index: var(--z-index-1);
    width: 100%;
    max-width: var(--container);
    min-height: 60vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    row-gap: 80px;
    padding: 60px 0 80px 0;
}

#page {
    background-color: var(--deep-gray);
}

@media (max-width: 1200px) {
    .main-layout {
        padding: 60px var(--base-padding);
    }
}

@media (max-width: 1000px) {
    .main-layout {
        row-gap: 20px;
    }
}

@media (max-width: 340px) {
    .main-layout {
        padding: 60px var(--mobile-padding);
    }
}

.t-green {
    color: var(--primary);
}

/* Button */
.link-button {
    background: var(--primary);
    border: 1px solid var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-weight: 700;
    font-size: var(--font-size-base);
    border-radius: 30px;
    width: max-content;
    padding: 14px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.link-button:hover {
    background-color: var(--deep-gray);
    border: 1px solid var(--secondary-3);
    color: var(--primary);
}

.link-button.outline {
    color: var(--white);
    background: var(--main);
    border: 1px solid var(--white);
    transition: all 0.2s ease;
}

.link-button.outline:hover {
    color: var(--main);
    background: var(--white);
    transition: all 0.2s ease;
}

.button-icon {
    display: flex;
    gap: 8px;
    padding: 8px 20px;
    background: transparent;
    color: var(--white);
    border: 1px solid var(--white);
    font-weight: 700;
    border-radius: 50px;
    width: fit-content;
    cursor: pointer;
}

.button-icon.green {
    color: var(--main-2);
    border: 1px solid var(--primary);
}

.button {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--main-2);
    font-size: var(--font-size-base);
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button:hover {
    background-color: var(--primary);
    color: var(--white);
}

.button.w-100 {
    width: 100%;
}

.button.active {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

.section-title {
    display: flex;
}

.section-title::after {
    content: "";
    border-bottom: 2px solid var(--secondary-3);
    margin-left: 20px;
    display: block;
    width: 100%;
}

.section-title .t-b-36 {
    flex-shrink: 0;
}

@media (max-width: 400px) {
    .section-title::after {
        display: none;
    }

    .section-title .t-b-36 {
        width: 100%;
        text-align: center;
        flex-shrink: inherit;
    }
}

/* Header */
.header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: var(--z-index-2);
    background-color: var(--deep-gray);
}

.header__wrapper {
    width: 100%;
    max-width: var(--container);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    padding: 14px 0;
}

.header__navigation {
    display: flex;
    gap: 30px;
    align-items: center;
}

.header__navigation__menu.show img {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.header__navigation__menu img {
    transition: transform 0.3s ease;
}

.header__navigation span {
    cursor: pointer;
}

.header__navigation .t-b-16 {
    transition: all 0.2s ease;
}

.header__navigation .t-b-16:hover {
    color: var(--primary);
}

.header__navigation .t-b-16.active {
    color: var(--primary);
}

.header__navigation__menu {
    position: relative;
    display: flex;
}

.header__triangles {
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
}

.dropdown-wrapper {
    display: none;
    z-index: var(--z-index-3);
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 20px;
}

.dropdown-menu {
    width: max-content;
    background: white;
    border: 1px solid var(--gray);
    list-style: none;
    padding: 20px;
    margin: 0;
}

.dropdown-menu li {
    padding: 5px 0;
    transition: all 0.2s ease;
}

.dropdown-menu li:hover {
    color: var(--primary);
}

.header__navigation__menu.show .dropdown-wrapper {
    display: block;
}

.header__contacts .t-r-14 {
    display: block;
    color: var(--primary);
    text-align: right;
    width: 100%;
    cursor: pointer;
}

/* Header mobile styles */

.header__mobile-icons {
    display: none;
}

.header__navigation-mobile {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    min-height: calc(100vh - 73px);
    background-color: var(--secondary);
    transition: transform 0.3s ease;
    z-index: var(--z-index-3);
    padding: 40px var(--base-padding);
    overflow: auto;
    display: none;
    flex-direction: column;
    row-gap: 24px;
    transform: translateX(100%);
}

.dropdown-mobile-menu {
    display: none !important;
}

.dropdown-mobile-menu.open {
    display: block !important;
}

.header__navigation__mobile-menu__item {
    display: flex;
    align-items: center;
}

.header__navigation__mobile-menu__item .arrow {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.header__navigation__mobile-menu__item img {
    cursor: pointer;
}

.header__navigation__mobile-menu__item .arrow.open {
    transform: rotate(180deg);
}

.header__navigation-mobile ul {
    list-style-type: none;
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.header__mobile-icons .header__hamburger.open-icon {
    display: none;
}

.header__mobile-icons .header__hamburger.close-icon {
    display: inline-block;
}

.header__icons {
    display: flex;
    gap: 20px;
}

.header__cart__quantity {
    padding: 2px 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-weight: 700;
    font-size: var(--font-size-small);
    background-color: var(--primary);
    border-radius: 50%;
    height: fit-content;
    min-width: 25px;
}

.header__cart__quantity.hidden {
    display: none;
}

.header__cart {
    display: flex;
    gap: 4px;
}

@media (max-width: 1200px) {
    .header__wrapper {
        padding: 14px var(--base-padding);
    }
}

@media (max-width: 1000px) {
    .header__icons {
        display: none;
    }

    .header__navigation-mobile.open {
        transform: translateX(0);
        display: flex;
    }

    .header__navigation,
    .header__contacts {
        display: none;
    }

    .header__wrapper > .header__cart {
        display: none;
    }

    .header__mobile-icons {
        display: flex;
        gap: 30px;
        align-items: center;
    }
}

@media (max-width: 700px) {
    .header__triangles {
        display: none;
    }
}

@media (max-width: 400px) {
    .header__wrapper {
        padding: 14px;
    }
}

.footer {
    position: relative;
    width: 100%;
    background-color: var(--secondary-3);
    padding: 40px 0;
}

.footer__wrapper {
    width: 100%;
    max-width: var(--container);
    padding-bottom: 24px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.footer__bottom {
    border-top: 1px solid var(--white);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    color: var(--white);
    max-width: var(--container);
    margin: 0 auto;
}

.footer__logo-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 280px;
}

.footer__logo-info .t-r-14 {
    color: var(--white);
}

.footer__container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--white);
}

.footer__menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: var(--font-size-base);
}

.footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--white);
}

.footer__mobile-wrapper {
    display: none;
    color: var(--white);
}

.footer__mobile-wrapper .footer__mail {
    color: var(--primary);
}

.footer__triangles {
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: rotate(180deg);
    user-select: none;
}

.footer__triangles-2 {
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    user-select: none;
}

@media (max-width: 1200px) {
    .footer__wrapper {
        padding: 40px var(--base-padding);
    }
    .footer__bottom {
        padding-left: var(--base-padding);
        padding-right: var(--base-padding);
    }
}

@media (max-width: 1000px) {
    .footer__wrapper,
    .footer__bottom {
        display: none;
    }

    .footer__mobile-wrapper {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        width: 100%;
        padding: var(--base-padding);
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
}

@media (max-width: 700px) {
    .footer__triangles,
    .footer__triangles-2 {
        display: none;
    }
}

/* Main page slider */

.single-slider::after {
    content: "";
    display: block;
    margin-top: 20px;
    width: 100%;
    border: 1px solid var(--secondary-3);
}

.slider {
    position: relative;
}

.slider__arrows {
    display: flex;
    gap: 10px;
    padding-top: 20px;
}

.slider__arrows .custom-prev,
.slider__arrows .custom-next {
    cursor: pointer;
}

.slider .swiper-container {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.swiper-container.shadow {
    border-radius: 30px;
}

.slider .swiper-wrapper {
    align-items: stretch;
}

.slider .swiper-slide {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider .slider-content img {
    object-fit: contain;
    max-width: 642px;
    border-radius: 30px;
}

.slider-content img {
    max-width: 100%;
    height: auto;
}

.slider-content,
.slider-content1 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    column-gap: 20px;
    row-gap: 30px;
    align-items: center;
}

.slider-content__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 100px 0;
    width: 100%;
}

.slider-content img {
    width: 100%;
    /* object-fit: cover; */
}

.slider-content1 {
    position: relative;
    overflow: hidden;
}

.slider-content1::after {
    position: absolute;
    bottom: 0;
    right: -10%;
    width: 100%;
    max-width: 500px;
    height: 170px;
    content: "";
    background-color: var(--green);
}

.slider-content1 .slider-content__text {
    max-width: 520px;
    overflow: hidden;
    padding: 0px 30px;
}
.slider-content1 .slider-content__title,
.slider-content1 .slider-content__text::after {
    /* z-index: ; */
    width: 100%;
    max-width: 477px;
    height: 100%;
    max-height: 170px;
}

.slider-content1 .slider-content__title {
    background: var(--gradient);
    top: -60px;
    left: 50px;
    display: flex;
    padding: 35px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.slider-content1 .slider-content__title span {
    align-self: self-end;
    display: block;
    width: 100%;
    font-size: 50px;
    text-align: center;
    color: var(--white);
}

.slider-content1 .slider-content__description {
    margin-left: auto;
    max-width: 400px;
    z-index: 2;
    font-weight: 700;
}

.slider-content1 .slider-content__text::after {
    position: absolute;
    background-color: var(--secondary);
    content: "";
    top: 80%;
    border-radius: 20px;
    left: 10%;
}

.slider-content1 img {
    max-width: 500px;
    max-height: 85%;
    object-fit: fill;
    padding-right: 70px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    z-index: 1;
}

@media (max-width: 1200px) {
    .slider-content img {
        width: 50%;
    }
    .slider-content__text {
        padding: 20px;
    }

    .slider-content1 .slider-content__title span {
        font-size: 40px;
    }

    .slider-content1 .slider-content__description {
        font-size: 20px;
    }

    .slider-content1 .slider-content__text::after {
        max-width: 380px;
    }

    .slider-content1::after {
        max-width: 400px;
    }

    .slider-content1 img {
        max-width: 400px;
        padding-right: 40px;
    }
}

@media (max-width: 700px) {
    .slider-content {
        flex-direction: column;
    }
    .slider-content img {
        width: 100%;
        object-fit: cover;
        max-height: 320px;
    }
    .slider-content__text {
        text-align: center;
    }
    .slider-content .link-button {
        margin: 0 auto;
        width: 100%;
    }
    .slider-content1 {
        flex-direction: column;
    }
    .slider-content1 img {
        max-width: 400px;
        padding-right: 0;
        margin: 0 auto;
        border-radius: 20px;
        width: 100%;
    }
    .slider-content1 .slider-content__text {
        margin: 0 auto;
    }
}

@media (max-width: 500px) {
    .slider-content1 .slider-content__text {
        padding: 0;
    }
}

.achievements {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.achievements__item {
    display: flex;
    padding: 30px;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--primary);
    border-radius: 20px;
    width: 100%;
    gap: 10px;
    transition: all 0.3s ease;
}

.achievements__item svg {
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.achievements__item path {
    fill: var(--primary);
    transition: all 0.3s ease;
}

.achievements__item:hover {
    background-color: var(--primary);
    border: 2px solid var(--deep-gray);
    color: var(--white);
}

.achievements__item:hover path {
    fill: var(--white);
}

.achievements__item p {
    color: var(--main-2);
    word-break: break-word;
    transition: all 0.3s ease;
}

.achievements__item:hover p {
    color: var(--white);
}

.products-categories {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.products-categories__container {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.products-categories__item {
    display: flex;
    gap: 20px;
    background-color: var(--white);
    border: 1px solid var(--secondary-2);
    border-radius: 20px;
    padding: 30px;
    align-items: center;
    word-break: break-word;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.products-categories__item:hover {
    transform: scale(1.05);
}

.slider-popular-products {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.multiple .swiper-slide {
    height: auto;
    padding: 15px;
}

.multiple .slider__arrows {
    display: inline-block;
    padding: 0;
}

.multiple .slider {
    padding: 0 40px;
    position: relative;
    margin-bottom: 60px;
}

.multiple .custom-prev {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-index-1);
}

.multiple .custom-next {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-index-1);
}

.multiple .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
}

.multiple .swiper-pagination-bullet-active {
    background: var(--secondary-2);
}

.swiper-pagination {
    top: 105% !important;
    z-index: var(--z-index-1) !important;
}

@media (max-width: 700px) {
    .multiple .slider {
        padding: 0 10px;
    }
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    height: 100%;
    border-radius: 20px;
    box-shadow: var(--shadow);
    position: relative;
    background-color: var(--white);
}

.product-card__link {
    height: 100%;
}

.product-card img {
    max-height: 290px;
    height: 100%;
    object-fit: contain;
    width: 100%;
    user-select: none;
    align-self: center;
    border-radius: 20px;
}

.product-card__info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    padding: 10px 20px 20px 20px;
}

.product-card__info .button {
    margin-top: auto;
    border: 2px solid var(--primary);
}

.product-card__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-card__content .t-b-18 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em;
    line-height: 1.5em;
    word-break: break-word;
}

.product-card__content .t-r-16 {
    color: var(--secondary-2);
}

.product-card__tag {
    position: absolute;
    top: 18px;
    left: 18px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.75rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    padding: 6px 8px;
}

.product-card__tag.promo {
    background-color: var(--green);
}

.product-card__tag.new {
    background-color: var(--primary);
}

.main-promo-block {
    background-image: url("../images/promo1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    padding: 50px 60px;
}

.main-promo-block .t-b-36 {
    color: var(--white);
}

.main-promo-block__content {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

@media (max-width: 700px) {
    .main-promo-block {
        padding: 30px;
    }
}

.info-content img {
    max-width: 100%;
    height: auto;
}

.info-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    column-gap: 20px;
    row-gap: 30px;
    background-color: var(--white);
    box-shadow: var(--shadow);
    border-radius: 20px;
}

/* .info-content.reverse {
    flex-direction: row-reverse;
} */

.info-content__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px 60px;
    width: 100%;
}

.info-content img {
    width: 100%;
}

@media (max-width: 1200px) {
    .info-content img {
        width: 50%;
    }
    .info-content__text {
        padding: 20px;
    }
}

@media (max-width: 1000px) {
    .info-content {
        flex-direction: column;
    }
    .info-content img {
        width: 100%;
        max-height: 320px;
        object-fit: cover;
        border-radius: 20px;
    }
    .info-content__text {
        text-align: center;
    }
    .info-content .link-button {
        margin: 0 auto;
        width: 100%;
    }
}

.page-top {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#breadcrumbs {
    font-size: var(--font-size-small);
    color: var(--main-2);
}

#breadcrumbs span span {
    text-decoration: underline;
}

#breadcrumbs span .breadcrumb_last {
    text-decoration: none;
}

#breadcrumbs span .breadcrumb_last strong {
    font-weight: 400;
}

.page-description {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.page-description p {
    padding: 30px 0;
}

.catalog {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.catalog__sidemenu {
    width: 100%;
    max-width: 280px;
    background-color: var(--secondary);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: var(--font-size-medium);
}

.catalog__sidemenu a.active {
    text-decoration: underline;
    font-weight: 700;
}

.catalog__sidemenu .category-arrow.active {
    transform: rotate(180deg);
}

.category-toggle {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.category-item > a {
    display: flex;
    justify-content: space-between;
}

.category-item .subcategories-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 5px;
}

.category-item .subcategories-wrapper > a {
    font-size: 18px;
}

.catalog__sidemenu .subcategory {
    padding-left: 15px;
    font-size: var(--font-size-base);
}

.catalog__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 900px;
}

.catalog__filter {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.catalog__filter__top {
    display: flex;
    gap: 20px;
}

.filter__button {
    background-color: var(--secondary);
    padding: 14px 50px;
    border-radius: 10px;
    color: var(--main);
    font-size: var(--font-size-base);
    font-weight: 700;
    border: 1px solid var(--secondary-3);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
}

.filter__button:hover {
    background-color: var(--secondary-3);
    color: var(--white);
    transition: all 0.2s ease;
}

.filter__button.active {
    background-color: var(--secondary-3);
    color: var(--white);
}

.catalog__filter__mid {
    display: flex;
    align-items: center;
    gap: 30px;
}

.catalog__filter__mid .t-r-14 {
    color: #727272;
}

.catalog__filter__mid__container {
    display: flex;
    gap: 20px;
}

.catalog__filter__bottom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--secondary);
    padding-bottom: 5px;
    position: relative;
    row-gap: 10px;
}

.catalog__filter-by {
    /* position: relative; */
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.catalog__filter-by span {
    color: #727272;
}

.catalog__filter-by__button {
    position: relative;
    background-color: transparent;
    border: none;
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    color: var(--main);
    font-weight: 400;
    font-size: var(--font-size-small);
}

.catalog__filter-by__button.green {
    color: var(--primary);
}

.catalog__filter-by__button.green svg {
    stroke: var(--primary);
}

.catalog__clear-filter__button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: var(--main);
    font-weight: 400;
    font-size: var(--font-size-small);
    padding-bottom: 3px;
    border-bottom: 1px solid var(--main);
}

.catalog__filter__dropdown,
.catalog__filter-age__dropdown {
    position: absolute;
    top: 150%;
    left: 0;
    display: none;
    opacity: 0;
    transition: all 0.3s, opacity 0.3s ease;
    max-width: 530px;
    width: max-content;
    padding: 20px;
    background-color: var(--white);
    z-index: var(--z-index-2);
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: opacity 0.3s ease;
    max-height: 300px;
    overflow-y: auto;
}

.catalog__filter-age__dropdown.open {
    display: block;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.catalog__filter-by__button .arrow {
    transition: transform 0.3s ease;
}

.catalog__filter__dropdown.open + .catalog__filter-by__button .arrow {
    transform: rotate(180deg);
}

.catalog__filter__dropdown.open {
    display: block;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.catalog__filter__dropdown__container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.catalog__filter__checkbox {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--main);
    font-weight: 400;
    font-size: var(--font-size-small);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.catalog__filter__checkbox:hover {
    transition: all 0.2s ease;
    color: var(--primary);
}

.catalog__filter__checkbox input {
    display: none;
}

.catalog__filter__checkbox span {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid var(--main);
    border-radius: 4px;
    margin-right: 8px;
    position: relative;
    transition: background-color 0.2s, border-color 0.2s;
}

.catalog__filter__checkbox:hover span {
    border-color: var(--primary);
}

.catalog__filter__checkbox input:checked + span {
    background-color: var(--primary);
    border-color: var(--primary);
}

.catalog__filter__checkbox input:checked + span::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.catalog__filter__dropdown__button {
    background: var(--primary);
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    margin-left: auto;
    margin-right: 20px;
}

.catalog__wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.catalog__container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.catalog__mobile-filter {
    overflow-x: auto;
    padding: 20px 0;
    padding-right: 30px;
    width: 100%;
    display: none;
    overflow-x: hidden;
}

.catalog__mobile-filter .filter__button {
    width: 100%;
    padding: 8px 10px;
}

@media (max-width: 1000px) {
    .catalog__sidemenu {
        display: none;
    }
    .catalog__filter__top {
        flex-wrap: wrap;
    }
    .catalog__filter__top .filter__button {
        width: fit-content;
    }
}

@media (max-width: 700px) {
    .catalog__mobile-filter {
        display: inherit;
    }
    .catalog__sidemenu {
        display: none;
    }
    .catalog__filter__top {
        display: none;
    }
    .catalog__container {
        grid-template-columns: 1fr 1fr;
    }
    .catalog__filter__bottom {
        align-items: flex-start;
        gap: 20px;
        flex-direction: column;
        padding-bottom: 20px;
    }
    .catalog__filter__dropdown {
        max-height: 400px;
        overflow-y: auto;
        left: -110%;
        max-width: 80vw;
    }
}

@media (max-width: 500px) {
    .catalog__container {
        grid-template-columns: 1fr;
    }
}

.catalog__pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    justify-content: center;
}

.catalog__pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.catalog__pagination .page-numbers {
    min-width: 24px;
    min-height: 24px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--secondary);
    font-size: var(--font-size-small);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.catalog__pagination .page-numbers.current {
    background-color: var(--secondary-2);
}

.catalog__pagination .prev,
.catalog__pagination .next {
    background-color: transparent;
}

.personal-card {
    display: flex;
    gap: 20px;
}

.personal-card__gallery {
    display: flex;
    gap: 20px;
}

.personal-card__thumbnails {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100px;
    max-height: 430px;
    position: relative;
}

.personal-card__thumbnails .custom-prev,
.personal-card__thumbnails .custom-next {
    position: absolute;
    z-index: var(--z-index-3);
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    max-width: 30px;
    width: max-content;
}

.personal-card__thumbnails .custom-prev {
    cursor: pointer;
    bottom: 100%;
}

.personal-card__thumbnails .custom-next {
    cursor: pointer;
    top: 100%;
}

.personal-card__thumbnail {
    display: block;
    height: 100%;
    max-height: 100px;
}

.personal-card__thumbnail-image {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.3s ease;
}

.personal-card__thumbnail-image:hover {
    border: 2px solid var(--secondary-2);
}

.personal-card__main-image {
    flex: 1;
}

.personal-card__main-image-src {
    width: 100%;
    max-width: 430px;
    height: 430px;
    object-fit: contain;
    border-radius: 5px;
}

.personal-card__thumbnails .swiper-container {
    height: 100%;
    width: 100%;
    overflow-y: hidden;
}

.personal-card__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.personal-card__info .personal-card__number {
    color: var(--secondary-2);
}

.personal-card__ask_question {
    width: fit-content;
    min-width: 150px;
}

@media (max-width: 1000px) {
    .personal-card__thumbnail {
        max-height: 100%;
    }

    .personal-card__thumbnails .custom-prev,
    .personal-card__thumbnails .custom-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        max-width: 40px;
    }

    .personal-card__thumbnails .custom-prev {
        left: -20px;
        bottom: auto;
        transform: translateY(-50%) rotate(0deg);
    }

    .personal-card__thumbnails .custom-next {
        left: auto;
        right: -20px;
        transform: translateY(-50%) rotate(0deg);
    }
    .personal-card {
        flex-direction: column;
    }
    .personal-card__gallery {
        flex-direction: column-reverse;
    }
    .personal-card__thumbnails {
        flex-direction: row;
        width: 100%;
    }

    .personal-card__main-image-src {
        height: auto;
    }
}

.buttons-cart {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cart-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--secondary-2);
    border-radius: 30px;
    padding: 14px 20px;
    min-width: 150px;
}

.cart-counter.hidden {
    display: none !important;
}

.cart-counter__decrease,
.cart-counter__increase {
    width: 21px;
    height: 21px;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.cart-counter__quantity {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: var(--main);
}

@media (max-width: 400px) {
    .personal-card__thumbnails .custom-prev,
    .personal-card__thumbnails .custom-next {
        display: none;
    }
    .buttons-cart {
        flex-direction: column;
    }

    .buttons-cart .link-button,
    .buttons-cart .cart-counter,
    .personal-card__ask_question {
        width: 100%;
    }
}

.product-info {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.product-info__tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    border: 1px solid var(--secondary);
}

.product-info__tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    border: none;
    background-color: transparent;
    outline: none;
    background-color: var(--white);
}

.product-info__tab:hover {
    color: var(--primary);
}

.product-info__tab.active {
    font-weight: 700;
    color: var(--primary);
}

.product-info__content {
    padding: 15px;
    border-top: none;
    background-color: var(--white);
}

.product-info__panel {
    display: none;
}

.product-info__panel.active {
    display: block;
}

.product-info__table {
    width: 100%;
    border-collapse: separate;
    margin-top: 10px;
    border-spacing: 20px;
}

.product-info__table-header {
    text-align: left;
}

.product-info__table-header::first-letter {
    text-transform: capitalize;
}

@media (max-width: 400px) {
    .product-info__table {
        display: block;
        width: 100%;
        border-spacing: 10px;
    }

    .product-info__table-header,
    .product-info__table-data {
        display: block;
        width: 100%;
        text-align: left;
    }

    .product-info__table-header {
        margin-bottom: 5px;
    }

    .product-info__table-data {
        margin-bottom: 10px;
    }

    tr {
        display: block;
        margin-bottom: 10px;
    }
}

@media (max-width: 700px) {
    .product-info__tabs {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .product-info__tabs {
        grid-template-columns: 1fr;
    }
}

.accordion {
    overflow: hidden;
}

.accordion__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    gap: 10px;
}

.accordion__title {
    font-weight: 700;
    font-size: var(--font-size-base);
    text-align: left;
}

.accordion__icon {
    transition: transform 0.3s ease;
}

.accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 15px;
}

.accordion__content p {
    margin: 15px 0;
    font-weight: 400;
    font-size: var(--font-size-base);
    text-align: left;
}

.accordion__item_active .accordion__icon {
    transform: rotate(45deg);
}

.accordion__item_active .accordion__content {
    max-height: 200px;
}

.page-faq .accordion__title {
    font-size: var(--font-size-title-medium);
}

.page-faq .accordion__content p {
    font-size: var(--font-size-medium);
}

.directory {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

.directory__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 700px) {
    .directory {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .directory {
        grid-template-columns: 1fr;
    }
}

.service {
    display: flex;
    flex-direction: column;
    row-gap: 60px;
}

.service-advantages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-advantages__item {
    background-color: var(--secondary);
    border-radius: 20px;
    padding: 30px;
    gap: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1000px) {
    .service-advantages {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .service-advantages {
        grid-template-columns: 1fr;
    }
}

.main-form {
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    border-radius: 20px;
    background-color: var(--primary);
}

.main-form .form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto;
}

.main-form__title,
.main-form__description {
    color: var(--white);
    text-align: center;
    display: ruby;
}

.form__group textarea {
    border-radius: 14px;
    resize: none;
}

.form__label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.form__input {
    width: 100%;
    padding: 16px 24px;
    border: 1px solid var(--white);
    border-radius: 60px;
    background-color: transparent;
    color: var(--white);
    font-size: var(--font-size-small);
    font-weight: 400;
}

.form__input::placeholder {
    color: var(--white);
}

.form__input:focus {
    outline: none;
}

.form__button {
    padding: 14px 20px;
    border: none;
    background-color: var(--white);
    color: var(--main);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 30px;
    width: 100%;
}

.form__button:hover {
    background-color: var(--secondary);
}

.form__error {
    color: red;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

.form__rule {
    font-weight: 400;
    color: var(--white);
    font-size: 0.75rem;
    text-align: center;
}

.form__rule a {
    text-decoration: underline;
}

.main-form .wpcf7-response-output {
    color: #dc3232;
    padding: 10px;
    border-radius: 5px;
    margin-top: 15px;
}

.wpcf7 form .wpcf7-response-output {
    border: none;
    margin: 10px 0;
    padding: 0;
    color: yellow;
}

.wpcf7 form.invalid .wpcf7-response-output {
    border: none;
    margin: 10px 0;
    padding: 0;
    color: #dc3232;
}

.wpcf7 form .modal-form .wpcf7-response-output {
    text-align: center;
    color: var(--green);
}

.education {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.education__achievements .achievements {
    grid-template-columns: 1fr 1fr;
}

.education__achievements .t-b-36 {
    color: var(--main-2);
}

.education__achievements .achievements__item {
    justify-content: flex-start;
}

.block-content {
    width: 100%;
    display: flex;
    column-gap: 60px;
    row-gap: 30px;
}

.block-content__text {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.block-content img {
    height: fit-content;
}

.points {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.points__item {
    display: flex;
    column-gap: 30px;
    row-gap: 20px;
    padding: 40px;
    background-color: var(--secondary);
    border-radius: 20px;
}

.points__number {
    color: var(--primary);
}

.education__gallery__wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.education__gallery__wrapper img {
    width: 100%;
    max-width: 585px;
    height: 100%;
    max-height: 491px;
    object-fit: cover;
    border-radius: 20px;
}

.directions-study {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.directions-study .t-b-36 {
    text-align: center;
}

.directions-study__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    column-gap: 30px;
    row-gap: 20px;
}

.directions-study__container.column-2 {
    grid-template-columns: repeat(2, 1fr);
}

.directions-study__item {
    background-color: var(--secondary);
    border-radius: 20px;
    padding: 30px;
}

.directions-study__buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.help {
    display: flex;
    column-gap: 60px;
    row-gap: 30px;
}

.help img {
    height: fit-content;
}

.help__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.help__content ul {
    font-weight: 700;
}

@media (max-width: 700px) {
    .education__achievements .achievements {
        grid-template-columns: 1fr;
    }

    .block-content {
        flex-direction: column;
    }

    .block-content img {
        width: fit-content;
    }

    .points {
        grid-template-columns: 1fr;
    }

    .points__item {
        flex-direction: column;
        padding: 20px;
    }

    .education__gallery__wrapper {
        grid-template-columns: 1fr;
    }
    .education__gallery__wrapper img {
        width: 100%;
        max-width: 585px;
        height: 100%;
        max-height: 491px;
    }

    .directions-study__container {
        grid-template-columns: repeat(2, 1fr);
    }

    .help {
        flex-direction: column;
    }

    .help img {
        width: fit-content;
    }
}

@media (max-width: 500px) {
    .directions-study__container,
    .directions-study__container.column-2 {
        grid-template-columns: 1fr;
    }

    .directions-study__buttons {
        flex-direction: column;
    }

    .directions-study__buttons .link-button {
        width: 100%;
    }
}

.cart {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 60px;
    min-height: 50vh;
}

.cart-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.cart-top__clear-cart {
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--primary);
    font-weight: 400;
    font-size: var(--font-size-base);
    align-self: flex-end;
}

.cart-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cart-list__empty {
    padding: 30px;
    background-color: var(--white);
    box-shadow: var(--shadow);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cart-list__container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cart-list__item {
    display: flex;
    gap: 30px;
    padding: 30px;
    box-shadow: var(--shadow);
    background-color: var(--white);
    border-radius: 20px;
}

.cart-list__item__img {
    width: 100%;
    max-width: 200px;
    max-height: 200px;
    object-fit: cover;
}

.cart-list__item__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cart-list__item__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart-list__item__number {
    color: var(--secondary-2);
}

.cart-list__item__buttons {
    display: flex;
    gap: 30px;
}

.cart-list__item__delete-item {
    cursor: pointer;
}

@media (max-width: 700px) {
    .cart-top {
        flex-direction: column;
    }
    .cart-list__item {
        padding: 15px;
        flex-direction: column;
    }
    .cart-list__item__img-link {
        width: fit-content;
        align-self: center;
    }
    .cart__request {
        width: 100%;
    }
}

.about-company {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.about-company__info-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: var(--primary);
    text-decoration: underline;
    font-weight: 400;
    cursor: pointer;
}

.directors-address {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.directors-address__info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.directors-address__quote {
    display: flex;
    gap: 16px;
    align-items: baseline;
}

.gray-slide {
    width: 100%;
    background-color: var(--secondary-2);
}

.gray-slide {
    width: 100%;
    object-fit: cover;
}

.about-company__slider {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.about-company__slider h2 {
    text-align: center;
}

.about-company__documents {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.about-company__documents h2 {
    text-align: center;
}

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

.about-company__documents__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.about-company__documents__item span {
    text-align: center;
}

@media (max-width: 1000px) {
    .directors-address {
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .directors-address__quote {
        flex-direction: column;
    }

    .about-company__documents__container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    .about-company__info-list {
        grid-template-columns: 1fr;
    }
}

.contacts {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.contacts__block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.contacts__block__item {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: var(--secondary);
    border-radius: 20px;
    padding: 30px;
}

.contacts__block__item img {
    width: 50px;
}

@media (max-width: 1000px) {
    .contacts__block {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .contacts__block {
        grid-template-columns: 1fr;
    }
}

.for-dealers {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.for-dealers__why {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.for-dealers__why__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.for-dealers__why__item {
    background-color: var(--secondary);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.for-dealers__why__item .t-r-16 {
    color: var(--secondary-2);
}

@media (max-width: 1000px) {
    .for-dealers__why__container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .for-dealers__why__container {
        grid-template-columns: 1fr;
    }
}

body.no-scroll {
    overflow: hidden;
}

.popUpBg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: var(--z-index-4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popUp {
    position: fixed;
    width: 100%;
    max-width: 500px;
    height: fit-content;
    min-height: 350px;
    padding: 30px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: var(--z-index-5);
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    border-radius: 10px;
}

.popUpBg.active {
    opacity: 1;
    visibility: visible;
}

.callPopUp.active {
    opacity: 1;
    visibility: visible;
}

.cartPopUp.active {
    opacity: 1;
    visibility: visible;
}

.searchPopUp {
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    margin: 0 auto;
    min-height: auto;
    width: 100vw;
    max-width: none;
    padding: 30px;
}

.popUp__success {
    margin: auto;
}

.popUp__success.hidden {
    display: none;
    transition: all 0.3s ease;
}

.popUp__success .t-b-36 {
    color: var(--primary);
}

.popUp__success .t-b-36,
.popUp__success .t-r-20 {
    text-align: center;
    display: block;
}

.wpcf7.hidden {
    display: none;
    transition: all 0.3s ease;
}

.searchPopUp.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 700px) {
    .searchPopUp {
        padding: 20px 10px;
    }
}

.educationSchedulePopUp.active {
    opacity: 1;
    visibility: visible;
    max-height: 500px;
    max-width: 800px;
    overflow-y: auto;
}

.modal-form .form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.modal-form__title {
    color: var(--primary);
    font-size: var(--font-size-title-big);
    text-align: center;
}

.modal-form .form__input {
    outline: none;
    border: 1px solid var(--main);
    border-radius: 10px;
    color: var(--main);
    max-height: 120px;
    font-size: var(--font-size-base);
}

.modal-form .form__input:focus {
    border: 2px solid var(--primary);
}

.modal-form .form__input::placeholder {
    color: var(--secondary-2);
}

.modal-form .form__button {
    background-color: var(--primary);
    border: 1px solid var(--primary);
    color: var(--white);
    transition: all 0.2s ease;
}

.modal-form .form__button:hover {
    background-color: var(--white);
    color: var(--main);
    border: 1px solid var(--primary);
    transition: all 0.2s ease;
}

.modal-form .form__rule {
    font-weight: 400;
    color: var(--main);
    display: block;
}

.modal-form .wpcf7-spinner {
    display: none;
}

.wpcf7 form .modal-form .wpcf7-response-output {
    border: none;
    margin: 10px 0;
    padding: 0;
    color: var(--primary);
}

.wpcf7 form.invalid .modal-form .wpcf7-response-output {
    border: none;
    margin: 10px 0;
    padding: 0;
    color: #dc3232;
}

.success-message {
    color: var(--green);
    font-size: 14px;
    margin-top: 10px;
}

.error-message {
    color: #dc3232;
    font-size: 14px;
    margin-top: 10px;
}

.product-card__img-wrapper {
    position: relative;
    overflow: hidden;
    height: inherit;
}
.product-card__img-wrapper img {
    display: block;
    width: 100%;
    transition: opacity 0.3s ease;
}
.product-card__img-wrapper .primary-img {
    opacity: 1;
}
.product-card__img-wrapper .secondary-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.product-card__img-wrapper:hover .primary-img {
    opacity: 0;
}
.product-card__img-wrapper:hover .secondary-img {
    opacity: 1;
}

/* search page */
.search-page {
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: 100%;
}

/* Стили для контейнера формы поиска */
.searchwp-form {
    display: flex;
    justify-content: center;
    align-items: center;
    /* max-width: 600px; */
}

.search-icon.open_searchPopUp {
    cursor: pointer;
    max-width: 24px;
}

.searchwp-form input[type="search"] {
    padding: 10px;
    font-size: 16px;
    width: 100%;
    background-color: var(--white) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow) !important;
    border: var(--gray) 2px solid !important;
    outline-color: var(--primary);
    transition: all 0.3s ease;
}

.searchwp-form input[type="submit"] {
    padding: 10px 20px;
    background-color: var(--primary);
    color: var(--white);
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.searchwp-live-search-no-min-chars:after {
    content: "Продолжайте печатать..." !important;
}

.search-item {
    display: flex;
    gap: 15px;
}

.search-item__image img {
    max-width: 150px;
    object-fit: contain;
}

.search-item__sku {
    color: var(--secondary-2);
}

.searchwp-form input[type="submit"]:hover {
    background-color: var(--secondary);
    color: var(--main);
    transition: all 0.3s ease;
}

.searchPopUp .searchwp-form input[type="search"] {
    font-size: var(--font-size-title-medium);
}

.searchPopUp .searchwp-form input[type="submit"] {
    font-size: var(--font-size-medium);
}

.searchwp-live-search-results {
    max-height: 50vh !important;
}

/* Another search plugin styles from  */
.ysm-search-widget .search-field[type="search"] {
    font-size: 24px;
    background-color: var(--white);
    font-style: normal;
    border-radius: 10px;
    border: 2px solid var(--deep-gray);
    transition: all 0.3s ease;
}

.ysm-search-widget .search-field[type="search"]:hover {
    border: 2px solid var(--primary);
}

.ysm-search-widget .search-field[type="search"]:focus {
    border: 2px solid var(--primary);
}

.ysm-search-widget .search-submit {
    background: var(--primary);
    border-radius: 0px 10px 10px 0px;
}

.ysm-search-widget .search-submit:before {
    color: var(--white);
}

.smart-search-view-all-holder a {
    background: var(--primary);
    color: var(--white);
}

.ysm-search-widget-1 .smart-search-suggestions .smart-search-post-icon {
    width: 100px;
}

.smart-search-post-title {
    font-size: 18px;
}

.smart-search-post-sku {
    float: left;
    color: var(--secondary-2);
    font-size: 14px;
}

.sws-search-recent-list-item-trigger:hover {
    color: var(--primary);
}

.sws-search-recent-list-item-delete svg:hover {
    color: var(--primary);
}

.page-item a p {
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    color: var(--primary);
}

@media (max-width: 700px) {
    .search-item {
        flex-direction: column;
    }

    .searchwp-form input[type="submit"] {
        padding: 10px 15px;
    }

    .searchwp-live-search-results-showing {
        width: 100% !important;
        left: 0 !important;
    }
}

/* Якорная кнопка */
#scrollBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: var(--z-index-4);
    border: none;
    outline: none;
    cursor: pointer;

    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;

    transition: opacity 0.3s ease, transform 0.3s ease;
}

#scrollBtn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Иконка ватсап */
#whatsapp {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: var(--z-index-4);
    border: none;
    outline: none;
    cursor: pointer;
    width: 50px;
}

.policy-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.grecaptcha-badge {
    visibility: hidden !important;
}

#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary);
    color: white;
    padding: 15px 20px;
    display: none;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

#cookie-banner #cookie-accept {
    border: 1px solid var(--primary);
    background-color: white;
    color: var(--primary);
    padding: 6px 24px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.3s ease;
}

#cookie-banner #cookie-accept:hover {
    background-color: transparent;
    color: white;
    border: 1px solid white;
}

#cookie-banner p {
    margin: 0;
}

#cookie-banner a {
    text-decoration: underline;
    color: white;
}

@media (max-width: 756px) {
    #cookie-banner {
        flex-wrap: nowrap;
    }
}