@charset "UTF-8";

.header {
    /* Верхний спан */
    /* Средний спан */
    /* Нижний спан */
    /* Активное состояние */
    /* Поворот после смещения */
}

.header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-top: 13px;
    padding-bottom: 13px;
}

.header__top img {
    max-width: 165px;
    max-height: 68px;
}

.header__tel {
    display: flex;
    align-items: center;
    gap: 40px;
}

.header__top a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgb(151, 151, 151);
    font-family: Gotham;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 0px;
    text-align: left;
}

.header__top a:hover {
    color: #33b3ff;
}

.header__soc {
    display: flex;
    align-items: center;
    gap: 40px;
}

@media (max-width:992px) {
    .header__soc a {
        display: flex;
        align-items: center;
        gap: 5px;
        color: rgb(151, 151, 151);
        font-family: Gotham;
        font-size: 14px;
        font-weight: 500;
        line-height: 14px;
        letter-spacing: 0px;
        text-align: left;
    }
}

.header__soc ul {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header__soc ul div {
    border: 2px solid #005588;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
}

.header__soc ul div li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
}

.header__soc ul div li a svg path {
    transition: 0.3s;
}

.header__soc ul div:hover {
    border-color: #fff;
}

.header__soc ul div:hover li a svg path {
    fill: #fff;
}

.header__bot {
    background: #1c1c1c;
    padding: 15px 0;
}

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

.header__nav ul {
    display: flex;
    align-items: center;
    gap: 40px;
}

.header__nav ul a {
    color: #cfd3d5;
    font-family: Gotham;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0px;
    text-align: left;
    text-transform: uppercase;
}

.header__nav ul a.active {
    color: #fff;
    pointer-events: none;
}

.header__nav ul a:hover {
    color: #33b3ff;
}

.header__container .header__tel,
.header__container .header__soc {
    display: none;
}

.header__container .header__tel a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgb(151, 151, 151);
    font-family: Gotham;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 0px;
    text-align: left;
}

.header .burger {
    position: relative;
    width: 30px;
    height: 22px;
    cursor: pointer;
    display: none;
    flex-direction: column;
    justify-content: space-between;
}

.header .burger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff;
    position: absolute;
    transition: top 0.3s ease, bottom 0.3s ease, transform 0.3s ease 0.3s;
}

.header .burger span:first-child {
    top: 0;
}

.header .burger span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.1s ease 0.3s;
}

.header .burger span:last-child {
    bottom: 0;
}

.header .burger.active span:first-child {
    top: 50%;
    transform: translateY(-50%);
    transition: top 0.3s ease, transform 0.3s ease 0.3s;
}

.header .burger.active span:last-child {
    bottom: 50%;
    transform: translateY(50%);
    transition: bottom 0.3s ease, transform 0.3s ease 0.3s;
}

.header .burger.active span:nth-child(2) {
    opacity: 0;
    transition: opacity 0.1s ease;
}

.header .burger.active span:first-child,
.header .burger.active span:last-child {
    transform: translateY(-50%) rotate(-45deg);
}

.header .burger.active span:last-child {
    transform: translateY(50%) rotate(45deg);
}

@media (max-width: 992px) {
    .header__bot {
        padding: 0;
    }

    .header__tel {
        display: none;
    }

    .header .burger {
        display: flex;
        z-index: 999;
    }

    .header__nav {
        position: fixed;
        width: 100%;
        height: 100%;
        top: -200%;
        left: 0;
        background-color: #111;
        transition: 0.3s;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 100;
    }

    .header__nav.active {
        top: 0;
    }

    .header__nav ul {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 10px;
    }

    .header__container .header__tel,
    .header__container .header__soc {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
    }

    .header__container .header__soc ul {
        flex-direction: row;
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .header__soc {
        display: none;
    }
}

.hero {
    margin-top: 50px;
}

.hero__wrapp {
    position: relative;
}

.hero__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 30px;
    background: #202020;
    padding: 65px;
    gap: 30px;
}

.hero__wrapp::after {
    position: absolute;
    content: "";
    background: url("../img/hero-svg.svg") center no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    top: 0;
    left: 0;
}

.hero__left {
    max-width: 470px;
    position: relative;
    z-index: 5;
}

.hero__left h1 {
    text-align: start;
}

.hero__left p {
    color: #fff;
    font-family: Inter;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0%;
    text-align: left;
    margin-top: 30px;
    margin-bottom: 50px;
}

.open-popup {
    color: #ffffff;
    font-family: Gotham;
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: center;
    border-radius: 30px;
    background: #e32a28;
    padding: 20px;
}

.open-popup:hover {
    background-color: #005588;
}

.hero__right {
    max-width: 480px;
    width: 100%;
    position: relative;
    z-index: 5;
}

.hero__slider {
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    max-width: 600px;
    height: 400px;
}

.hero__slider .swiper-slide {
    flex: 1;
    transition: flex 0.5s ease;
    text-align: center;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.hero__slider .swiper-slide.active {
    flex: 4;
}

.hero__slide {
    width: 100%;
    height: 100%;
    border-radius: 25px;
    position: relative;
    padding-top: 75%;
    overflow: hidden;
    margin-right: 15px;
}

.hero__slide img {
    border-radius: 25px;
}

.delivery__wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.delivery__card {
    border-radius: 15px;
    background: rgb(32, 32, 32);
}

.delivery__img {
    position: relative;
    padding: 47%;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

.delivery__img img {
    border-radius: 15px 15px 0 0;
    transition: 0.3s;
}

.delivery__card:hover .delivery__img img {
    transform: scale(1.1);
}

.delivery__content {
    padding: 20px;
}

.delivery__content h3 {
    color: rgb(255, 255, 255);
    font-family: Gotham;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0px;
    text-align: left;
    margin-bottom: 20px;
    transition: 0.3s;
}

.delivery__card:hover .delivery__content h3 {
    color: #33b3ff;
}

.delivery__container {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    color: rgb(255, 255, 255);
    font-family: Gotham;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -2%;
    text-align: right;
}

.delivery__link {
    width: 100%;
    max-width: 290px;
    margin: 50px auto 0;
}

@media (max-width: 1280px) {
    .delivery__wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .hero__wrapper {
        flex-direction: column;
        align-items: baseline;
        padding: 35px;
    }

    .hero__left {
        max-width: 100%;
    }

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

    .delivery__container {
        font-size: 12px;
    }
}

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

    .delivery__container {
        font-size: 14px;
    }
}

.about-block {
    position: relative;
}

.about-block::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 17, 17, 0.6196078431);
}

.about-block img {
    border-radius: 30px;
}

.about-block__wrapper {
    position: relative;
    z-index: 5;
    padding: 10% 20px;
}

.about-block__wrapper p {
    color: rgb(255, 255, 255);
    font-family: Inter;
    font-size: 18px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
    width: 100%;
    max-width: 800px;
    margin: 40px auto 50px;
}

.advantages__wrapper {
    display: flex;
    gap: 50px;
    justify-content: space-between;
}

.advantages__left {
    width: 100%;
    max-width: 550px;
}

.advantages__left h2 {
    text-align: start;
}

.advantages__left p {
    color: rgb(255, 255, 255);
    font-family: Gotham;
    font-size: 16px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: -0.32px;
    text-align: left;
    margin: 30px 0;
}

.advantages__img {
    position: relative;
    padding: 50%;
    overflow: hidden;
    border-radius: 20px;
}

.advantages__img img {
    border-radius: 20px;
}

.advantages__right {
    width: 100%;
    max-width: 630px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.advantages__card {
    display: flex;
    align-items: center;
    gap: 40px;
    border-radius: 20px;
    background: rgb(235, 235, 235);
    padding: 30px;
}

.advantages__card:first-child {
    background: rgb(0, 85, 136);
}

.advantages__card span {
    color: rgb(0, 0, 0);
    font-family: Gotham;
    font-size: 50px;
    font-weight: 500;
    line-height: 58px;
    letter-spacing: -1px;
}

.advantages__card h3 {
    color: #000;
    font-family: Inter;
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.48px;
}

.advantages__card p {
    color: rgb(0, 0, 0);
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.32px;
    margin-top: 10px;
}

.advantages__card:first-child span {
    color: #fff;
}

.advantages__card:first-child p {
    color: #fff;
}

.advantages__card:first-child h3 {
    color: #fff;
}

.advantages .right-img {
    display: none;
}

@media (max-width: 1280px) {
    .advantages__card span {
        font-size: 40px;
    }
}

@media (max-width: 992px) {
    .advantages__wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .advantages__left {
        max-width: 100%;
    }

    .advantages__right {
        max-width: 100%;
    }

    .advantages .left-img {
        display: none;
    }

    .advantages .right-img {
        display: block;
    }

    .advantages__card {
        flex-direction: column;
        gap: 20px;
        padding: 15px;
    }

    .advantages__text {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.reviews__slide {
    border-radius: 20px;
    background: rgb(32, 32, 32);
    padding: 30px;
    position: relative;
    z-index: 10;
}

.reviews__user {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.reviews__user img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.reviews__user span {
    color: rgb(255, 255, 255);
    font-family: Inter;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: left;
}

.reviews__user svg {
    display: block;
    margin-left: auto;
}

.reviews__slide p {
    color: rgb(255, 255, 255);
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0%;
    text-align: left;
}

.reviews__slider {
    padding-bottom: 50px;
    margin-top: 50px;
}

.reviews .swiper-pagination-bullet {
    background: #fff;
    opacity: 1;
    width: 10px;
    height: 10px;
}

.reviews .swiper-pagination-bullet-active {
    background: #005588;
}

.reviews .swiper-slide-active {
    position: relative;
}

.reviews .swiper-slide-active::after {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: #005588;
    border-radius: 20px;
}

.select-wrapper {
    position: relative;
    border-radius: 10px;
    background: rgb(93, 93, 93);
    padding-right: 20px;
}

.select-wrapper::after {
    position: absolute;
    content: "";
    top: 35%;
    right: 5px;
    width: 14px;
    height: 14px;
    background: url("../img/select-arrow.svg") center no-repeat;
}

/* Убираем стрелки в Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Убираем стрелки в Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.feedback__wrapper {
    position: relative;
}

.feedback__wrapp {
    background: #202020;
    padding: 60px;
    position: relative;
    border-radius: 15px;
    margin-bottom: 50px;
    z-index: 5;
}

.feedback__wrapp::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url("../img/form-bg.svg") center no-repeat;
}

.feedback__wrapper::after {
    position: absolute;
    content: "";
    bottom: -14px;
    left: 0;
    width: 100%;
    height: 100%;
    background: #005588;
    border-radius: 0 0 30px 30px;
}

.feedback__wrapper h2 {
    position: relative;
    z-index: 5;
    text-align: start;
}

.feedback__wrapper p {
    color: #fff;
    font-family: Inter;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0%;
    text-align: left;
    margin: 20px 0 50px;
    position: relative;
    z-index: 5;
}

.feedback__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: center;
}

.feedback form {
    position: relative;
    z-index: 5;
}

.feedback form select,
.feedback form input {
    border-radius: 10px;
    background: rgb(93, 93, 93);
    padding: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: rgb(255, 255, 255);
    font-family: Gotham;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -2%;
    text-align: left;
    width: 100%;
}

.feedback form select {
    cursor: pointer;
}

.feedback form input::-moz-placeholder {
    color: rgb(255, 255, 255);
    font-family: Gotham;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -2%;
    text-align: left;
}

.feedback form input::placeholder {
    color: rgb(255, 255, 255);
    font-family: Gotham;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -2%;
    text-align: left;
}

form .feedback__container label {
    display: flex;
    align-items: center;
    gap: 2px;
}

form .feedback__container label input {
    border-radius: 0;
}

form .feedback__container label input:first-child {
    border-radius: 10px 0 0 10px;
}

form .feedback__container label input:last-child {
    border-radius: 0 10px 10px 0;
}

form .feedback__container label select:first-child {
    border-radius: 10px 0 0 10px;
}

form .feedback__container label select:last-child {
    border-radius: 0 10px 10px 0;
}

.feedback form p {
    color: rgb(255, 255, 255);
    font-family: Gotham;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
    margin: 50px 0 30px;
}

.feedback__data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 820px;
}

.feedback form .visually-hidden {
    padding: 0;
    width: 1px;
}

.feedback__method {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 400px;
}

.feedback__method .control-label {
    position: relative;
}

.feedback__method .control-span {
    border-radius: 10px;
    background: transparent;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #b3b3b3;
}

.feedback input[type=radio]:checked+.control-span {
    border-color: #33b3ff;
    color: #33b3ff;
}

.feedback form button {
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    margin-top: 50px;
}

@media (max-width: 992px) {
    .feedback__wrapp {
        padding: 30px;
    }
}

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

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

.footer {
    background: rgb(28, 28, 28);
    margin-top: auto;
}

.footer__top {
    display: flex;
    align-items: center;
    gap: 50px;
    justify-content: space-between;
    padding: 60px 20px;
}

.footer__group {
    display: flex;
    align-items: center;
    gap: 50px;
}

.footer__group img {
    max-width: 100px;
}

.footer__nav ul {
    display: flex;
    align-items: center;
    gap: 50px;
}

.footer__nav ul a {
    color: rgb(255, 255, 255);
    font-family: Gotham;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0px;
    text-align: left;
    text-transform: uppercase;
}

.footer__nav ul a:hover {
    color: #33b3ff;
}

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

.footer__contacts a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgb(207, 211, 213);
    font-family: Gotham;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0px;
    text-align: left;
}

.footer__contacts a:hover {
    color: #33b3ff;
}

.footer__bot {
    border-top: 1px solid #b3b3b3;
    padding: 20px 0;
}

.footer__bot .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.footer__bot .container span,
.footer__bot .container a {
    color: #b3b3b3;
    font-family: Gotham;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0px;
    text-align: left;
}

.footer__bot .container a:hover {
    color: #33b3ff;
}

@media (max-width: 1240px) {
    .footer__top {
        gap: 30px;
    }

    .footer__group {
        gap: 20px;
    }

    .footer__nav ul {
        gap: 20px;
    }
}

@media (max-width: 992px) {
    .footer__top {
        flex-direction: column;
    }

    .footer__contacts {
        align-items: center;
    }

    .footer__bot .container {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .footer .header__soc {
        display: block;
    }

    .footer__group {
        flex-direction: column;
    }

    .footer__nav ul {
        flex-direction: column;
    }
}

.breadcrumbs {
    margin-top: 50px;
    margin-bottom: 50px;
}

.breadcrumbs ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.breadcrumbs ul li {
    font-family: Gotham;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -2%;
    text-align: left;
}

.breadcrumbs ul li.active {
    color: #33b3ff;
}

.breadcrumbs ul a {
    color: #fff;
}

.breadcrumbs ul a:hover {
    color: #005588;
}

.catalog__left {
    width: 100%;
    max-width: 288px;
}

.catalog__left form {
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-radius: 15px;
    background: rgb(32, 32, 32);
    padding: 40px;
    height: -moz-fit-content;
    height: fit-content;
}

.catalog__left form.active {
    display: flex;
}

.catalog__left form select,
.catalog__left form input {
    border-radius: 10px;
    background: rgb(93, 93, 93);
    padding: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: rgb(255, 255, 255);
    font-family: Gotham;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -2%;
    text-align: left;
    width: 100%;
}

.catalog__left form select {
    cursor: pointer;
}

.catalog__left form input::-moz-placeholder {
    color: #fff;
}

.catalog__left form input::placeholder {
    color: #fff;
}

.catalog__left form label {
    display: flex;
    flex-direction: column;
}

.catalog__group span {
    color: rgb(255, 255, 255);
    font-family: Gotham;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 0px;
    text-align: left;
    display: block;
    margin-bottom: 14px;
}

.catalog__inp {
    display: flex;
    gap: 1px;
}

form .catalog__inp input {
    border-radius: 0;
}

form .catalog__inp input:first-child {
    border-radius: 10px 0 0 10px;
}

form .catalog__inp input:last-child {
    border-radius: 0 10px 10px 0;
}

.catalog__container {
    display: flex;
    gap: 30px;
    margin-top: 50px;
}

.catalog__right {
    width: 100%;
}

.catalog__wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 40px;
    -moz-column-gap: 30px;
    column-gap: 30px;
}

.catalog__filter {
    border-radius: 10px;
    padding: 15px;
    display: none;
    margin-bottom: 10px;
}

.catalog__pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-top: 50px;
}

.catalog__pagination a {
    color: rgb(255, 255, 255);
    font-family: Gotham;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -2%;
    text-align: right;
    border-radius: 10px;
    background: rgb(93, 93, 93);
    padding: 15px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalog__pagination a.active {
    background-color: #005588;
    pointer-events: none;
}

.catalog__pagination a:hover {
    background: #33b3ff;
}

.catalog__pagination ul {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

@media (max-width: 992px) {
    .catalog__container {
        flex-direction: column;
    }

    .catalog__left {
        max-width: 100%;
    }

    .catalog__left form {
        display: none;
    }

    .catalog__filter {
        display: block;
    }
}

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

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

.product__left {
    width: 100%;
    max-width: 600px;
    position: relative;
}

.product__left button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 10px;
    width: 150px;
    z-index: 10;
}

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

.product__left ul li {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.product__img {
    position: relative;
    padding: 38.5%;
}

.product__img::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background: #00000024;
}

.product__img img {
    border-radius: 15px;
}

.product__wrapper h2 {
    color: #fff;
    font-family: Inter;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0%;
    text-align: left;
    margin: 50px 0;
}

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

.product__container img {
    width: 100%;
    height: 100%;
    max-height: 214px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 15px;
}

.product .open-overlay {
    position: relative;
    cursor: pointer;
}

.product .open-overlay::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.462745098);
}

.product .open-overlay span {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 2;
}

.product__right ul li {
    list-style: disc;
    margin-left: 20px;
}

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

    .product__wrapper h2 {
        margin: 30px 0 15px;
    }
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.631372549);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

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

.modal-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    height: 100%;
    max-height: 500px;
    border-radius: 15px;
    position: relative;
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.631372549);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

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

.popup .container {
    max-width: 460px;
}

.popup-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    height: 100%;
    max-height: 400px;
    border-radius: 15px;
    position: relative;
    border-radius: 20px;
    background: rgb(32, 32, 32);
    padding: 70px;
}

@media (max-width: 480px) {
    .popup-wrapper {
        padding: 40px;
    }
}

.close-popup {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: transparent;
}

.popup-wrapper p {
    color: rgb(255, 255, 255);
    font-family: Gotham;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
    margin-bottom: 40px;
    margin-top: 10px;
}

.popup-wrapper form {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.popup-wrapper form input {
    border-radius: 10px;
    background: rgb(93, 93, 93);
    padding: 15px;
    width: 100%;
    color: #fff;
}

.popup-wrapper form input::placeholder {
    color: #fff;
}

.modal-slider {
    height: 100%;
}

.modal-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 15px;
}

.modal-wrapper .swiper-button-prev::after,
.modal-wrapper .swiper-button-next::after {
    content: "";
}

.modal-wrapper .swiper-button-prev {
    left: -40px;
    width: 40px;
}

.modal-wrapper .swiper-button-next {
    right: -40px;
    width: 40px;
}

.close-modal {
    position: absolute;
    top: 0;
    right: 0;
    background-color: transparent;
}

@media (max-width: 767px) {
    .modal-wrapper .swiper-button-prev {
        left: 0;
        width: 40px;
    }

    .modal-wrapper .swiper-button-next {
        right: 0;
        width: 40px;
    }
}

.about {
    margin-bottom: 80px;
}

.about__img {
    position: relative;
    padding: 20%;
    margin-top: 50px;
}

.about__img img {
    border-radius: 15px;
}

.about p {
    color: rgb(255, 255, 255);
    font-family: Gotham;
    font-size: 14px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: -2%;
    text-align: justify;
    margin-top: 50px;
}

.about__soc {
    margin-top: 80px;
}

.about__slider {
    margin-left: -70px;
    height: 288px;
    margin-top: 50px;
}

.about__slider-new {
    margin-top: 30px;
    height: 288px;
}

.about__slide {
    height: 100%;
}

.about__slide img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 15px;
}

.about a {
    width: 100%;
    max-width: 409px;
    margin: 50px auto 0;
}

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

.contacts__card {
    border-radius: 15px;
    background: rgb(32, 32, 32);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 30px;
}

.contacts__card a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #cfd3d5;
    font-family: Inter;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0%;
    text-align: left;
}

.contacts__card a:hover {
    color: #33b3ff;
}

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

    .contacts .header__soc {
        display: flex;
    }
}

.policy {
    margin-bottom: 80px;
}

.policy h2 {
    margin-bottom: 50px;
}

.policy p {
    color: rgb(255, 255, 255);
    font-family: Gotham;
    font-size: 14px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: -2%;
    text-align: left;
    margin-top: 20px;
}



/*Modal*/
/* Фон модального окна */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* Затемненный фон */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    /* Скрываем элемент, когда он невиден */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Переход для плавного исчезновения */
}

/* Показ модального окна */
.modal-overlay.show {
    opacity: 1;
    visibility: visible;
    /* Показываем элемент */
}

/* Контейнер модального окна */
.custom-modal {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    width: 350px;
    max-width: 90%;
    transform: scale(0.7);
    transition: transform 0.3s ease;
    /* Переход для плавного увеличения */
}

/* Анимация для показа модального окна */
.modal-overlay.show .custom-modal {
    transform: scale(1);
}

.modal-header {
    background-color: #4CAF50;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.modal-title {
    font-size: 18px;
    font-weight: bold;
}

.modal-content {
    padding: 20px;
    font-size: 16px;
    color: #333;
}

.close-btn {
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    color: white;
}

.close-btn:hover {
    color: #ffdddd;
}