/*!
Theme Name: medspa
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: medspa
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
medspa is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Указываем box sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/** {*/
/*  outline: 1px solid red;*/
/*}*/
/* Убираем внутренние отступы */
ul[class],
ol[class] {
    padding: 0;
}

/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
}

/* Выставляем основные настройки по-умолчанию для body */
body {
    font-family: 'Manrope', sans-serif;
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
ul[class],
ol[class] {
    list-style: none;
}

/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Упрощаем работу с изображениями */
img {
    max-width: 100%;
    display: block;
}

/* Указываем понятную периодичность в потоке данных у article*/
article>*+* {
    /*   margin-top: 1em; */
}

/* Наследуем шрифты для инпутов и кнопок */
input,
button,
textarea,
select {
    font: inherit;
}

input {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

section {
    scroll-margin-top: 40px;
}

:root {
    --container: 1352px;
}

a {
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Hatton', sans-serif;
    font-weight: 500;
}

.title-h2 {
    font-size: 72px;
    line-height: 1;
    color: rgb(170, 81, 184);
    font-weight: 500;
    margin-bottom: 78px;
    text-align: center;
}
@media (max-width: 1280px) {
    .title-h2 {
        font-size: 64px;
    }
}
@media (max-width: 1024px) {
    .title-h2 {
        font-size: 56px;
    }
}
@media (max-width: 768px) {
    .title-h2 {
        font-size: 48px;
    }
}
@media (max-width: 480px) {
    .title-h2 {
        font-size: 36px;
        margin-bottom: 40px;
    }
}
h1 {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease, transform 1s ease;
}
.fade-up-h1 {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-up-h1.show {
    opacity: 1;
    transform: translateY(0);
}

.fade {
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
}

.fade.show {
    opacity: 1;
}
.container {
    max-width: var(--container);
    width: 100%;
    margin-inline: auto;
}
.header__logo img,
.mobile-menu__logo img{
    width: 65px;
    height: auto;
}
.header__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.header {
    padding: 16px 0;
     background: transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Плавная "дорогая" анимация */
}
.header__menu {
    display: flex;
    align-items: center;
    gap: 30px;
}
.header__menu li a {
    color: #c4479d;
    font-weight: 500;
    transition: all 0.3s;
}
.header__menu li a:hover {
    color: #822865;
}
.header__menu li {
    position: relative;
}
.header__menu li:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    width: 1px;
    height: 13px;
    background-color: #EECAE3;
    transition: all 0.3s;
}
.header__menu li:last-child:after {
    content: none;
}
.header__navigation {
    background-color: #fff;
    border-radius: 38px;
    padding: 18px 30px;
}

/* Состояние при скролле (активируется через JS) */
.header--scrolled {
    /* padding: 10px 0;  */
    position: fixed;

    /* Градиент в стиле вашего MedSpa */
    /* background: linear-gradient(90deg, #310121 0%, #4a0232 50%, #310121 100%); */
    background: linear-gradient(270deg, #2d0020 25.2017%, #42002f 45.0174%, #7a0058 65.4755%, #b31085 85.0528%, #c21491 100%);

    /* Тень для объема */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

    /* Анимация "выплывания" сверху (опционально) */
    animation: slideDown 0.5s ease;
    width: 100%;
    z-index: 2;
}

/* Эффект для ссылок, чтобы они не сливались */
.hero .header__menu a {
    transition: color 0.3s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Анимация появления */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}


/* Burger Menu Styles */
.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.burger-menu__line {
    width: 25px;
    height: 3px;
    background-color: #c4479d;
    margin: 2px 0;
    transition: all 0.3s ease;
    transform-origin: center;
}

.burger-menu--active .burger-menu__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger-menu--active .burger-menu__line:nth-child(2) {
    opacity: 0;
}

.burger-menu--active .burger-menu__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu-overlay--active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #070212;
    padding: 16px 20px 20px 20px;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.mobile-menu-overlay--active .mobile-menu {
    transform: translateY(0);
}

.mobile-menu__header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 30px;
}


.mobile-menu__navigation {
    margin-bottom: 15px;
}

.mobile-menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu__list li {
    margin-bottom: 5px;
}

.mobile-menu__list li a {
    display: block;
    color: #c4479d;
    font-weight: 500;
    font-size: 18px;
    padding: 5px 0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-menu__list li a:hover {
    color: #822865;
}

.mobile-menu__services {
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-menu__services-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu__services-list li a {
    display: block;
    color: #c4479d;
    font-weight: 400;
    font-size: 16px;
    padding: 5px 0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-menu__services-list li a:hover {
    color: #c4479d;
}

/* Media Queries for Mobile Menu */
@media (max-width: 768px) {
    .burger-menu {
        display: flex;
    }

    .header__navigation {
        display: none;
    }
}

.button_top {
    /* background-color: #7F227D; */
    font-family: 'Manrope';
    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    cursor: pointer;
    color: #fff;
    gap: 8px;
    border-radius: 32px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    background-image: linear-gradient(360deg,
    #3c1c3b -10.96%,
    #683067 33.7%,
    #a24aa0 173.12%);
    transition: 0.5s;
}

.button_top:hover {
    background-image: linear-gradient(180deg,
    #3c1c3b -10.96%,
    #683067 33.7%,
    #a24aa0 173.12%);
}

.button_top img {
    /*  width: 18.8px;
  height: 17.3px; */
    /* transform: rotate(45deg); */
}

.banner {
    position: relative;
    width: 100%;
    aspect-ratio: 1.68;
    max-height: 900px;
    padding-top: 40px;
    display: grid;
    background-position: center;
    background-size: cover;
    background-position: center;
}

.banner_fon {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(179.74deg,
    rgba(36, 36, 36, 0.8) -116.55%,
    rgba(38, 34, 38, 0.8) 106.13%),
    url(img/top_baner.jpg);
    background-position: center, center;
    background-size: cover, cover;
    z-index: 1;
    /* background-blend-mode: screen; */
}

.top_menu a {
    font-family: 'Manrope';
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0%;
    color: #fff;
    gap: 8px;
    padding: 8px 16px;
    transition: 0.3s;
    /* outline: 1px solid red; */
}

.top_menu a.active {
    border-bottom: 1px solid #fff;
}

.banner_text_block {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    position: relative;
    z-index: 2;
}

.banner_login {
    font-family: 'Manrope';
    font-weight: 400;
    font-style: Regular;
    font-size: 80px;
    line-height: 1.2;
    letter-spacing: 0%;
    text-align: center;
    text-transform: capitalize;
    color: #fefff5;
}

.banner_text {
    font-family: 'Manrope';
    font-weight: 500;
    font-style: Medium;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
    text-align: center;
}

.banner_text span {
    font-weight: 600;
    font-style: SemiBold;
}

section.cat {
    min-height: 600px;
    padding-block: 50px;
    isolation: isolate;
}

.card_wrap {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(326px, 1fr)); */
    width: 100%;
    grid-template-columns: repeat(4, minmax(326px, 1fr));
    grid-column-gap: clamp(10px, 2vw, 25px);
    grid-row-gap: 20px;
    justify-content: center;
    justify-items: center;
}

.card {
    position: relative;
    max-width: 40vw;
    cursor: pointer;
    /* aspect-ratio: 0.66;*/
    overflow: hidden;
    transition: 0.1s;
}

.card__content {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    padding: 0 0;
    /*   box-shadow: 0px 4px 4px 0px #9F6879; */
    box-shadow: 0px 4px 4px 0px #00000040;
    background-image: linear-gradient(360deg,
    rgba(60, 28, 59, 0.7) -10.96%,
    rgba(104, 48, 103, 0.7) 33.7%,
    rgba(162, 74, 160, 0.7) 173.12%);
    transition: 1s;
    display: flex;
    flex-direction: column;
    border-radius: 10px 10px 0 0;
}

.card__content h2 {
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: 36px;
    line-height: 1.5;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #fff;
    text-align: center;
    margin-bottom: auto;
}

.card__thumb img {
    border-radius: 10px 10px 0 0;
}

.card .card__content p {
    display: none;
    padding: 15px 10px;
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: 32px;
    color: #fff;
    line-height: 1;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    /* background-color: #FFFFFF; */
    border: 1px solid #8f8f8f;
    box-shadow: 0px 4px 4px 0px #00000080;
    width: calc(100% - 50px);
    margin-inline: auto;
    background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.49) 0%,
    rgba(0, 0, 0, 0.51) 100%);
    margin-bottom: 40px;
    text-wrap: balance;
}

.card:hover>.card__content p {
    display: block;
}

.card:hover>.card__content {
    height: 80%;
}

.card:hover>.card__content h2 {
    color: #000000;
    background-color: #fff;
    background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 100%);
}

.card_link {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 41.528663635253906;
    height: 40;
    border-radius: 16px;
    background-image: linear-gradient(360deg,
    #3c1c3b -10.96%,
    #683067 33.7%,
    #a24aa0 173.12%);
    padding: 10px;
    display: flex;
    align-items: center;
}

.middle_banner {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /*! min-height: 80vh; */
    padding-block: 100px 50px;
}

.middle_banner_content {
    width: 50%;
    /*! outline: 1px solid red; */
}

.middle_banner_wrap {
    /* display: grid;
    justify-items: center; */
}

.middle_banner_content .subtitle {
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 124%;
    letter-spacing: 0%;
    vertical-align: middle;
    text-shadow: 0 4px 4px #000;
    color: #fff;
}

.middle_banner_content h2 {
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: 56px;
    line-height: 124%;
    letter-spacing: 0%;
    vertical-align: middle;
    text-shadow: 0 4px 4px #000;
    color: #fff;
    text-wrap: balance;
}

.middle_banner_block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
    margin-top: 30px;
}

.item {
    background-image: linear-gradient(360deg,
    rgba(60, 28, 59, 0.5) -10.96%,
    rgba(104, 48, 103, 0.5) 33.7%,
    rgba(162, 74, 160, 0.5) 173.12%);
    padding: 20px;
}

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

.item_wrap img {
    width: 60px;
}

.item_wrap h4 {
    font-family: 'Manrope';
    font-weight: 500;
    font-style: Medium;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -1px;
    color: #ffffff;
    text-shadow: 0px 4px 2px #00000080;
    margin-bottom: 7px;
}

.item_wrap span {
    font-family: 'Manrope';
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.4px;
    color: #ffffff;
    text-shadow: 0px 4px 2px #00000080;
    text-wrap: balance;
}

section.foto {
    padding-block: 50px;
}

.foto_item {
    width: 390px;
}

.foto_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 40px;
    justify-items: center;
}

section.review {
    padding-block: 50px;
}

.review_wrap {}

.review_wrap h2 {
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: 56px;
    line-height: 124%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
}

.review_block {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 15px;
    justify-items: center;
    margin-top: 50px;
}

.review_item {
    background-color: #e9e9e9;
    display: flex;
    flex-direction: column;
    padding: 40px 30px;
    row-gap: 10px;
}

.review_foto {
    width: 72px;
    /*! margin-inline: auto; */
}

a.fio {
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 34px;
    letter-spacing: -0.5px;
    text-align: center;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    text-decoration-skip-ink: auto;
    color: #000;
}

.rating {
    width: 122px;
    /*! margin-inline: auto; */
    margin-top: 5px;
}

.review_text {
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.5px;
    /*! text-align: center; */
}

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

.review_block_wrap .fio {
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: 22px;
    line-height: 34px;
    letter-spacing: -0.5px;
    text-decoration: none;
}

a.more {
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    display: flex;
    width: 140px;
    height: 60px;
    background-image: linear-gradient(360deg,
    #3c1c3b -10.96%,
    #683067 33.7%,
    #a24aa0 173.12%);
    color: #fff;
    margin: 20px auto 0 auto;
    align-items: center;
    justify-content: center;
}

.mail_wrap {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

.mail_foto {
    flex: 0 0 895px;
    /* flex: 0 0 min(100%,895px);  */
}

.mail_foto img {
    object-fit: cover;
}

.mail_block {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 50px;
    align-items: center;
}

.mail_block h3 {
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    text-wrap: balance;
}

.mail_title {
    font-family: 'Manrope';
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.4px;
    text-align: center;
    margin-top: 25px;
}

.form_book {
    width: 360px;
    height: 381px;
    background-image: linear-gradient(360deg,
    rgba(60, 28, 59, 0.8) -10.96%,
    rgba(104, 48, 103, 0.8) 33.7%,
    rgba(162, 74, 160, 0.8) 173.12%);
    box-shadow: 0px 4px 4px 0px #00000099;
    padding: 20px 15px 5px;
    max-width: 90%;
    margin-inline: auto;
}

.form_book_wrap {
    display: flex;
    flex-direction: column;
    column-gap: 15px;
    justify-content: space-between;
    height: 100%;
}

.mail_form input {
    background-color: #956a94;
    padding: 10px 10px;
    box-shadow: 0px 4px 4px 0px #00000099;
    border-style: none;
    outline: none;
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: Body/Size Medium;
    color: #fff;
    line-height: 100%;
    letter-spacing: 0%;
    box-shadow: 0px 4px 4px 0px #00000099;
}

.mail_form textarea {
    background-color: #956a94;
    padding: 5px;
    box-shadow: 0px 4px 4px 0px #00000099;
    border-style: none;
    outline: none;
    padding: 5px 10px;
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: Body/Size Medium;
    color: #fff;
    line-height: 100%;
    letter-spacing: 0%;
    box-shadow: 0px 4px 4px 0px #00000099;
    min-height: 95px;
}

.mail_form input::placeholder {
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: Body/Size Medium;
    color: #fff;
    line-height: 100%;
    letter-spacing: 0%;
    text-shadow: 0px 4px 4px 0px #00000099;
}

.mail_form .form_btn {
    width: 100%;
    height: 48px;
    box-shadow: 0px 4px 4px 0px #00000099;
    background-image: linear-gradient(180deg,
    rgba(29, 6, 29, 0.8) 0%,
    rgba(127, 34, 125, 0.8) 100%);
    font-family: 'Manrope';
    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    cursor: pointer;
}

.form_social {
    display: flex;
    justify-content: space-between;
}

.form_social>a {
    flex-shrink: 0;
}

.collage {
    padding: 50px 0;
}

.collage_wrap {
    display: flex;
    flex-direction: column;
    /*! overflow-x: hidden; */
    overflow: hidden;
}

.collage h2 {
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: 56px;
    line-height: 124%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
}

.collage_text {
    font-family: 'Manrope';
    font-weight: 500;
    font-style: Medium;
    font-size: 37px;
    line-height: 160%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    margin-block: 30px;
}

.collage-container {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    /* Выравнивание по горизонтали */
    align-items: center;
    /* Выравнивание по вертикали */
    /*! flex-wrap: wrap; */
    /* Перенос на новую строку */
    position: relative;
    /*   width: 100%; */
    /* height: 400px; */
    /* Пример высоты */
    /* background-color: #f0f0f0; */
    /* Для наглядности */
    margin-bottom: 250px;
    /*! flex-direction: column; */
    max-width: 100%;
    overflow-x: hidden;
}

.collage-item {
    /* Можно использовать absolute для точного размещения */
    /* position: absolute; */
    position: relative;
    width: 426px;
    /* Пример размера */
    /* height: 200px; */
    /* margin: 15px; */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    /* Легкая тень */
    transition: transform 0.3s ease;
    border-radius: 20px;
    /* Плавный эффект при наведении */
}

/* Углы наклона для каждого изображения */
.collage-item:nth-child(1) {
    transform: rotate(3.85deg);
    /* z-index: 3; */
    /* Верхний слой */
    width: 426px;
    height: 618px;
    opacity: 1;
    left: 0px;
    border-radius: 20px;
}

.collage-item:nth-child(2) {
    transform: rotate(-16.37deg);
    /* z-index: 2; */
    width: 408px;
    height: 514px;
    opacity: 1;
    top: 200px;
    left: 0px;
}

.collage-item:nth-child(3) {
    transform: rotate(4.6deg);
    width: 432px;
    height: 627px;
    opacity: 1;
    border-width: 1px;
    /* z-index: 1; */
    /* Нижний слой */
}

.collage-item:nth-child(4) {
    transform: rotate(-4.49deg);
    width: 425px;
    height: 580px;
    opacity: 1;
    border-radius: 20px;
    top: 200px;
    left: 0;
    /* z-index: 1; */
    /* Нижний слой */
}

.collage-item:nth-child(5) {
    transform: rotate(7.65deg);
    width: 471px;
    height: 591px;
    opacity: 1;
    left: 0;
    /* z-index: 1; */
    /* Нижний слой */
}

/* Эффект при наведении (опционально) */
.collage-item:hover {
    /* transform: scale(1.1) rotate(0deg);
     z-index: 10; */
    /* Выведение вперед */
}

.text_digit {
    font-family: 'Manrope';
    font-weight: 500;
    font-style: Medium;
    font-size: 128px;
    line-height: 100px;
    letter-spacing: 0.4px;
    vertical-align: middle;
    background-image: linear-gradient(180deg,
    rgba(29, 6, 29, 0.8) 0%,
    rgba(127, 34, 125, 0.8) 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    min-height: 100px;
    width: 90%;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
}

/* faq */
section.faq {
    margin-block: 50px;
}

.faq_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    align-items: flex-start;
}

.faq-section {}

.faq h2 {
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: 56px;
    line-height: 124%;
    letter-spacing: 0%;
    vertical-align: middle;
    text-transform: capitalize;
    max-width: 50%;
    text-wrap: balance;
    margin-bottom: 50px;
    color: #040404cc;
    text-shadow: 0px 4px 4px #00000099;
}

.faq-section details {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    cursor: pointer;
}

.faq-section summary {
    padding: 15px 20px;
    font-weight: bold;
    list-style: none;
    /* Убираем стандартный маркер */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Manrope';
    font-weight: 500;
    font-style: Medium;
    font-size: 24px;
    line-height: 124%;
    letter-spacing: 0%;
    vertical-align: middle;
}

/* Скрываем сам ответ по умолчанию */
.faq-section details p {
    padding: 0 20px 15px 20px;
    margin: 0;
    display: none;
    /* Прячем */
    color: #555;
    font-family: 'Manrope';
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 124%;
    letter-spacing: 0%;
    vertical-align: middle;
}

/* Показываем ответ при раскрытии */
.faq-section details[open] p {
    display: block;
    /* Показываем, когда <details> открыт */
}

/* Стили для иконки +/-, можно сделать анимацию */
.faq-section summary .icon {
    font-size: 1.2em;
    transition: transform 0.3s ease;
}

.faq-section details[open] summary .icon {
    transform: rotate(45deg);
    /* Поворачиваем + в x */
}

section.map {
    padding-block: 50px;
    padding-inline: 30px;
}

section.map h2 {
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: 56px;
    line-height: 124%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    text-shadow: 0px 4px 4px #00000080;
    margin-bottom: 100px;
}

.map_wrap {
    display: flex;
    gap: 100px;
}

.map_wrap>div {}

.map_container {
    flex: 0 0 calc(55% - 50px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.img_map {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    object-fit: cover;
    width: 100%;
    height: 100%;
    min-height: 0;
}

img[class*="img_metka"] {
    width: 42px;
}

.img_metka1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: flex-end;
    margin-left: 7vw;
    margin-bottom: 13vh;
}

.img_metka2 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    justify-self: center;
    /*! margin-bottom: 1vw; */
}

.img_metka3 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-self: center;
    align-self: center;
    margin-bottom: 15vh;
    margin-left: 5vw;
}

.map_text {
    flex: 0 0 calc(45% - 50px);
}

.map_text_block {
    display: flex;
    flex-direction: column;
    padding: 20px;
    row-gap: 20px;
    border-bottom: 1px solid #24242433;
    text-shadow: 0px 4px 4px #00000080;
}

.map_text_block:not(:last-child) {
    margin-bottom: 40px;
}

.map_text_title {
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0px;
    vertical-align: middle;
}

.map_text_discript {
    font-family: 'Manrope';
    font-weight: 500;
    font-style: Medium;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0px;
    vertical-align: middle;
}

.map_text_btn {}

.map_text_btn .button_top {
    max-width: 158px;
}

.block_winwow {
    width: 285px;
    height: 132px;
    gap: 10px;
    background-color: #faf4fe;
    display: flex;
    flex-direction: column;
    padding: 15px;
    grid-column: 1/2;
    grid-row: 1/2;
    align-self: flex-end;
    justify-self: center;
    margin-bottom: 2vh;
    position: relative;
}

.block_winwow:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    /* right: 100%;  */
    bottom: -20px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid #faf4fe;
    left: calc(50% - 10px);
}

.icon_close {
    position: absolute;
    top: 5px;
    right: 15px;
    transform: rotate(45deg);
    font-weight: bold;
    font-size: 30px;
    cursor: pointer;
}

.block_winwow .title_win {
    font-family: "Manrope";
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #242424;
    margin: 0;
}

.block_winwow p,
.block_winwow a {
    font-family: 'Manrope';
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 28px;
    letter-spacing: 0px;
    color: #242424;
}


.contact_link {
    font-family: 'Manrope';
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    color: #fff;
    line-height: 24px;
    letter-spacing: 0px;
    display: flex;
    align-items: center;
    column-gap: 10px;
}

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

.subscribe_wrap .button_top {
    text-transform: uppercase;
}

.service_menu_wrap {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    column-gap: 40px;
}

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

.service_menu_wrap ul li a {
    font-family: 'Manrope';
    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 24px;
    letter-spacing: 0px;
    transition: 0.5s;
}

.service_menu_wrap ul li a:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 25%;
    text-decoration-thickness: 3%;
}

.form_subscr {}

input.email_subscr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    font-family: 'Manrope';
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.5);
    padding: 5px 5px 5px 2px;
    margin-bottom: 25px;
}

.service_col1 {}

.service_col2 {}

.service_col3 {}

.footer {
    background: url(img/footer-bg.avif) no-repeat center;
    background-size: cover;
    padding: 124px 0 50px;
}
@media (max-width: 480px) {
    .footer {
        padding: 100px 0 50px;
    }
}
.footer__title {
    font-family: 'Hatton', sans-serif;
    font-size: 64px;
    line-height: 1;
    text-align: center;
    color: #fff;
    padding-bottom: 80px;
}
@media (max-width: 992px) {
    .footer__title {
        font-size: 48px;
    }
}
@media (max-width: 662px) {
    .footer__title span {
        display: block;
    }
}
@media (max-width: 576px) {
    .footer__title {
        font-size: 32px;
    }
}
@media (max-width: 480px) {
    .footer__title {
        padding-bottom: 40px;
    }
}
.footer__content {
    border-top: 1px solid #fff;
    padding-top: 50px;
}
.footer__copyright {
    font-size: 16px;
    line-height: 1;
    font-family: serif;
    color: #EDBFDB;
}
@media (max-width: 880px) {
    .footer__copyright {
        order: 3;
    }
}
.footer__social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}
.footer__social-link:hover {
    opacity: 0.8;
}
.footer__social-link span {
    font-size: 16px;
    line-height: 1;
    color: #fff;
    font-weight: 600;
}
.footer__social-icon {
    width: 24px;
    height: 24px;
}
.footer__socials {
    display: flex;
    align-items: center;
    gap: 20px;
}
@media (max-width: 880px) {
    .footer__socials {
        flex-direction: column;
        order: 1;
    }
}
.footer__content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
@media (max-width: 880px) {
    .footer__content-wrapper {
        flex-direction: column;
        text-align: center;
    }
}
.footer__phone {
    font-size: 16px;
    line-height: 1;
    color: #fff;
    font-weight: 600;
}
@media (max-width: 880px) {
    .footer__phone {
        order: 2;
    }
}
.footer__phone:hover {
    opacity: 0.8;
}
.footer__privacy-policy {
    text-align: center;
    padding-top: 40px;
}
.footer__privacy-policy-btn {
    font-size: 16px;
    line-height: 1;
    color: #EDBFDB;
    font-weight: 500;
    text-decoration: underline;
    transition: all 0.3s ease;
}
.footer__privacy-policy-btn:hover {
    color: #fff;
}
@media screen and (max-width: 1400px) {
    :root {
        --container: 1200px;
    }

    .card_wrap {
        /* grid-template-columns:repeat(2,  minmax(40%, 1fr)); */
        grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
    }

    .mail_wrap {
        flex-direction: column;
    }

    .mail_foto {
        flex: 0 0 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    .service_menu_wrap {
        grid-template-columns: max-content;
        row-gap: 20px;
    }
}

@media screen and (max-width: 1200px) {
    :root {
        --container: calc(100% - 40px);
    }

    .foto_wrap {
        grid-template-columns: 1fr 1fr;
        grid-row-gap: 30px;
    }

    .foto_item {
        width: calc(100% - 15px);
    }

    .text_digit {
        /* font-size: 128px; */
        font-size: calc(50px + 28 * ((100vw - 360px) / (1200 - 360)));
        line-height: 1;
        letter-spacing: 0.2px;
        vertical-align: middle;
        min-height: 80px;
        width: 90%;
    }
}

@media screen and (max-width: 991px) {
    :root {
        /* --container: 850px; */
    }

    .footer_middle {
        flex-direction: column;
        width: 100%;
        row-gap: 50px;
        padding-bottom: 100px;
    }

    .subscribe_wrap .button_top {
        max-width: 500px;
        margin-inline: auto;
    }

    .banner_login {
        font-size: calc(40px + 40 * ((100vw - 360px) / (991 - 360)));
        line-height: 1.2;
    }

    .middle_banner_content h2 {
        font-size: calc(36px + 20 * ((100vw - 360px) / (991 - 360)));
        line-height: 124%;
    }

    .review_wrap h2 {
        font-size: calc(36px + 20 * ((100vw - 360px) / (991 - 360)));
    }

    section.map h2 {
        font-size: calc(36px + 20 * ((100vw - 360px) / (991 - 360)));
        line-height: 124%;
        letter-spacing: 0%;
        margin-bottom: 50px;
    }

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

    .banner {
        padding-top: 0;
        padding-bottom: 50px;
    }

    .middle_banner_content {
        width: 100%;
    }

    .faq h2 {
        /* font-size: 56px; */
        font-size: calc(36px + 20 * ((100vw - 360px) / (991 - 360)));
        line-height: 124%;
        max-width: none;
        text-align: center;
    }

    .faq-section summary {
        padding: 10px 15px;
        /* font-size: 24px; */
        font-size: calc(18px + 6 * ((100vw - 360px) / (991 - 360)));
    }

    .map_wrap {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {

    .card__content h2 {
        font-size: calc(30px + 6 * ((100vw - 360px) / (768 - 360)));
        line-height: 1.3;
    }

    .card .card__content p {
        font-size: calc(25px + 7 * ((100vw - 360px) / (768 - 360)));
    }

    .collage h2 {
        font-size: calc(45px + 11 * ((100vw - 360px) / (768 - 360)));
    }

    .collage_text {
        /* font-size: 37px; */
        font-size: calc(28px + 10 * ((100vw - 360px) / (768 - 360)));
    }

    .faq_wrap {
        grid-template-columns: 1fr;
        gap: 10px 20px;
    }

    .footer_middle .contact_links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 20px;
    }

    .collage-container {
        flex-wrap: wrap;
        row-gap: 20px;
    }

    .collage-container .collage-item {
        transform: none !important;
        width: auto !important;
        top: 0 !important;
        max-width: 90%;
    }
}

@media screen and (max-width: 600px) {
    .card_wrap {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }

    .card {
        max-width: min(380px, 90vw);
    }

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

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

    .text_digit {
        /* font-size: 128px; */
        font-size: calc(30px + 25 * ((100vw - 360px) / (600 - 360)));
        line-height: 1;
    }
}

@media screen and (max-width: 480px) {
    .form_book {
        width: 300px;

        max-width: 90%;

    }



    .footer_middle .contact_links {
        grid-template-columns: 1fr;
    }

    .footer_bottom_left {
        font-size: 12px;
    }

    .footer_bottom_right {
        font-size: 12px;
        gap: 10px;
    }

    .hamburger {
        width: 30px;
    }

    .logo {
        width: 80px;
    }

    .header_wrap {
        padding-inline: 0;
    }

    .map_container img[class*="img_metka"] {
        margin-left: 0;
    }
}

/* Reviews Section */
.reviews {
    padding-bottom: 100px;
}
.reviews__wrapper {
    border-radius: 40px;
    background-color: #fff;
    padding: 40px;
}
@media (max-width: 768px) {
    .reviews__wrapper {
        padding: 20px;
    }
}
.reviews__item-top {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 15px;
}
@media (max-width: 480px) {
    .reviews__item-top {
        gap: 20px;
    }
}
.reviews__item-image {
    flex: 0 0 72px;
}
.reviews__item-image img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}
.reviews__item-image--letter {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: #150836;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    font-weight: 500;
}
.reviews__item-title {
    font-size: 20px;
    line-height: 30px;
    color: rgb(25, 40, 55);
    font-weight: 500;
    letter-spacing: -0.5px;
    font-family: 'Manrope', sans-serif;
    text-transform: capitalize;
}
@media (max-width: 480px) {
    .reviews__item-title {
        font-size: 18px;
    }
}
.reviews__item-description {
    font-size: 15px;
    line-height: 30px;
    color: rgb(25, 40, 55);
}

/* Контейнер слайдера */
.reviews-swiper {
    margin-top: 40px;
    margin-bottom: 30px;
    overflow: hidden;
}

.reviews__items.swiper-wrapper {
    display: flex;
    gap: 0;
    box-sizing: border-box;
}

.reviews__item.swiper-slide {
    height: auto;
    flex-shrink: 0;
    width: calc((100% - 40px) / 3);
    margin-right: 20px;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
@media (max-width: 480px) {
    .reviews__item.swiper-slide {
        padding: 0;
    }
}

.swiper-pagination {
    position: relative!important;
    margin-top: 25px;
}

.swiper-pagination-bullet {
    width: 12px!important;
    height: 12px!important;
    background-color: #D0D0D0!important;
    opacity: 1!important;
    margin: 0 5px!important;
    transition: background-color 0.3s ease;
}

.swiper-pagination-bullet-active {
    background-color: rgb(25, 40, 55)!important;
}

.reviews__item:last-child {
    margin-right: 0;
}

.reviews__item:not(:last-child) {
    border-right: 1px solid #D0D0D0;
}
@media (max-width: 768px) {
    .reviews__item:not(:last-child) {
        border-right: none;
    }
}
@media (max-width: 992px) {
    .reviews__item.swiper-slide {
        width: calc((100% - 20px) / 2);
    }
}

@media (max-width: 768px) {
    .reviews__item.swiper-slide {
        width: 100%;
        margin-right: 0;
        border-right: none;
    }

    .reviews__item:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }
}
.reviews__title {
    font-size: 64px;
    line-height: 1.24;
    color: rgb(25, 40, 55);
    font-weight: 500;
    margin-bottom: 40px;
    text-transform: capitalize;
    text-align: center;
}
@media (max-width: 1280px) {
    .reviews__title {
        font-size: 48px;
    }
}
@media (max-width: 768px) {
    .reviews__title {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .reviews__item {
        padding: 15px;
    }
}
.reviews__stars {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}
.reviews__btn {
    text-align: center;
}
.reviews__btn-link {
    font-size: 20px;
    line-height: 30px;
    color: rgb(25, 40, 55);
    background-color: #E9E9E9;
    padding: 15px 20px;
    font-weight: 500;
    transition: background-color 0.3s ease;

    display: inline-flex;
    align-items: center;
    gap: 20px;
}
@media (max-width: 480px) {
    .reviews__btn-link {
        font-size: 16px;
        padding: 12px 16px;
        gap: 10px;
    }
}
.reviews__btn-link:hover {
    background-color: #D0D0D0;
}
/* End Reviews Section */

/* FAQ Section */
.faq-services {
    padding-bottom: 150px;
}
@media (max-width: 768px) {
    .faq-services {
        padding-bottom: 100px;
    }
}
.faq-services__wrapper {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
@media (max-width: 480px) {
    .faq-services__wrapper {
        gap: 20px;
    }
}
.faq-services__heading {
    flex: 0 1 45%;
}
.faq-services__items {
    flex: 0 1 55%;
}
.faq-services__title {
    font-size: 64px;
    line-height: 1;
    color: #fff;
    font-weight: 500;
}
@media (max-width: 1280px) {
    .faq-services__title {
        font-size: 56px;
    }
}
@media (max-width: 768px) {
    .faq-services__wrapper {
        flex-direction: column;
    }
    .faq-services__heading,
    .faq-services__items {
        flex: 1 1 100%;
    }
    .faq-services__title {
        font-size: 48px;
        margin-bottom: 40px;
    }
}
@media (max-width: 480px) {
    .faq-services__title {
        font-size: 36px;
    }
}
.faq-services__question-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.faq-services__question {
    font-size: 28px;
    line-height: 1.2;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    margin: 0;
    flex: 1;
    transition: color 0.3s ease;
}
@media (max-width: 768px) {
    .faq-services__question {
        font-size: 24px;
    }
}
@media (max-width: 480px) {
    .faq-services__question {
        font-size: 20px;
    }
}
.faq-services__icon {
    font-size: 32px;
    color: #fff;
    font-weight: 300;
    transition: transform 0.3s ease, color 0.3s ease;
    min-width: 32px;
    text-align: center;
    line-height: 1;
}
.faq-services__icon.active {
    transform: rotate(45deg);
}
.faq-services__answer {
    font-size: 20px;
    line-height: 1.4;
    color: #B4B0BE;
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
    padding: 0;
    opacity: 0;
}

@media (max-width: 480px) {
    .faq-services__answer {
        font-size: 16px;
    }
}
.faq-services__answer.active {
    max-height: 500px;
    margin-top: 20px;
    opacity: 1;
}
.faq-services__item {
    border-bottom: 1px solid #fff;
    transition: border-color 0.3s ease;
    padding-bottom: 40px;
}
.faq-services__item:not(:last-child) {
    margin-bottom: 40px;
}
/* End FAQ Section */

/* Map Section */
.maps {
    padding-bottom: 150px;
}
@media (max-width: 768px) {
    .maps {
        padding-bottom: 100px;
    }
}
@media (max-width: 480px) {
    .maps {
        padding-bottom: 50px;
    }
}
.maps__wrapper {
    background-color: #120B38;
    padding: 40px;
    border-radius: 40px;
}
@media (max-width: 768px) {
    .maps__wrapper {
        padding: 20px;
    }
}
.maps__title {
    color: #fff;
}
.maps__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}
@media (max-width: 992px) {
    .maps__list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .maps__list {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .maps__list {
        gap: 15px;
    }
}
.maps__item {
    display: flex;
    flex-direction: column;
}
.maps__item-title {
    font-family: 'Manrope', sans-serif;
    color: #fff;
}
.maps__item-address {
    margin-bottom: 25px;
}
.maps__item-address address {
    font-family: 'Manrope', sans-serif;
    font-style: normal;
    color: #fff;
}
@media (max-width: 480px) {
    .maps__item-map {
        display: none;
    }
    .maps__item-map.active {
        display: block;
    }
}
.maps__item-map {
    margin-top: auto;
}
.maps__item-map iframe {
    border-radius: 19px;
}
.maps__icon {
    display: none;
}
@media (max-width: 480px) {
    .maps__wrapper-text {
        display: flex;
        justify-content: space-between;
        gap: 15px;
    }
    .maps__icon {
        display: block;
    }
    .maps__icon svg {
        transition: transform 0.3s ease;
    }
    .maps__icon.active svg {
        transform: rotate(-180deg);
    }
}
/* End Map Section */

/* Контейнер-родитель */
.header__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1001;
}

/* Навигация (белая таблетка) - Строго по центру */
.header__navigation {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    white-space: nowrap;
}

/* Блок действий справа (Кнопка + Бургер) */
.header__actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
    z-index: 10;
}

/* Кнопка в шапке (дизайн из вашего макета) */
.button_top {
    /*display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #713a71 0%, #4a264a 100%);
    color: #ffffff !important;
    padding: 11px 26px;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 500;*/
    transition: all 0.3s ease;
    border:none;
}

.arrow-icon {
    stroke: #ffffff;
    flex-shrink: 0;
}

/* --- СКРЫТИЕ ЭЛЕМЕНТОВ ПРИ ОТКРЫТИИ МЕНЮ --- */

/* Скрываем логотип */
.header--menu-open .header__logo {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Скрываем центральное меню (таблетку) */
.header--menu-open .header__navigation {
    display: none;
}

/* Скрываем кнопку Book Now */
.header--menu-open .button_top {
    display: none;
}

/* Центрирование хедера при открытом меню, чтобы бургер остался справа */
.header--menu-open .header__wrapper {
    justify-content: flex-end;
}

.header__navigation {
    pointer-events: none; /* Пропускает клики сквозь контейнер таблетки */
}
.header__navigation a {
    pointer-events: auto; /* Возвращает кликабельность самим ссылкам внутри таблетки */
}
.header__actions {
    z-index: 99999 !important; /* Выводим кнопку на самый передний план */
}


/* --- АДАПТИВНОСТЬ КНОПКИ --- */


@media (max-width: 768px) {
    .button_top {
        padding: 7px 15px;
        font-size: 12px;
        gap: 6px;
    }

    .arrow-icon {
        width: 12px;
        height: 12px;
    }
}

/* Анимация бургера в крестик (используем ваш класс из JS) */
.burger-menu__line {
    transition: all 0.3s ease;
}


/* Это гарантирует, что кнопка доступна для клика */
.header__actions {
    position: relative !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
}

.button_top {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Ограничиваем область навигации, чтобы она не "наползала" на края */
.header__navigation {
    pointer-events: none; /* Клики проходят сквозь пустые места */
}
.header__navigation a,
.header__navigation ul {
    pointer-events: auto; /* Ссылки в меню остаются кликабельными */
}


/* =========================================
   ФИНАЛЬНЫЕ СТИЛИ ФОРМЫ (КОМПАКТНЫЕ, В ЦВЕТАХ САЙТА)
   ========================================= */

/* Общий контейнер всплывающего окна */
.ic-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 4, 25, 0.95); /* Глибокий темний */
    backdrop-filter: blur(8px);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.ic-popup-overlay.active {
    display: flex;
}

/* Контейнер контента — ТЕМНИЙ ФОН */
.ic-popup-content {
    background: #261A45; /* Основний фон форми зі скринів */
    width: 100%;
    max-width: 440px;
    padding: 40px 25px 25px; /* Оригінальні відступи */
    border-radius: 20px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
   border: 2px solid #463B60;
}

/* Крестик закрытия — світлий */
.ic-popup-close {
    position: absolute;
    top: 12px;
    right: 15px;
    background: none !important;
    border: none !important;
    font-size: 30px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.5); /* Світлий колір */
    cursor: pointer;
    font-weight: 300;
    padding: 0;
    transition: color 0.3s;
}

.ic-popup-close:hover {
    color: #fff; /* Білий при наведенні */
}

/* Заголовки */
.popup-header {
    text-align: center;
    margin-bottom: clamp(20px,5vw,40px);
}

.popup-header h3 {
    font-size: 22px;
    color: #fff; /* Білий текст заголовка */
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
}

#service-display {

    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
    display: block;
    color: #c4479d;
    font-weight: 500;
}

/* Сетка полей — ОРИГІНАЛЬНА РОЗМІТКА */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 10px;
}

.full-width {
    grid-column: span 2;
}


.ic-medspa-form.compact-form {
display: flex;
flex-direction:column;
}
.form-footer {
    margin-top: clamp(10px,4vw,40px);
    
}

/* Подписи полей — білі */
.field-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #fff; /* Білий текст лейблів */
    margin-bottom: 2px;
    text-transform: uppercase;
}

/* Стилизация полей ввода — ТЕМНІ З РАМКОЮ */
.ic-medspa-form input,
.ic-medspa-form select,
.ic-medspa-form textarea {
    width: 100%;
    padding: 10px 12px;
   background-color: #150836;
    border: 1px solid #463B60;
    border-radius: 8px;
    font-size: 14px;

    color:rgba(255, 255, 255, 0.6);
    transition: 0.3s;
}
*:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.ic-medspa-form input::placeholder {
    color:rgba(255, 255, 255, 0.6)
}

.ic-medspa-form input:focus,
.ic-medspa-form select:focus,
.ic-medspa-form textarea:focus {
   /*! box-shadow: rgb(0, 153, 255) 0px 0px 0px 2px inset, rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset; */
}

.ic-medspa-form textarea {
    min-height: 60px;
    resize: none;
}

/* Кнопка отправки — ОРИГІНАЛЬНІ РОЗМІРИ, КОЛЬОРИ САЙТУ */
.wpcf7-submit {
    display: block; /* Гарантує центрування */
    width: 100%;
    max-width: 100%; /* Запобігає розтягуванню */
    background: transparent !important; /* Прозорий фон */
    color: #fff !important; /* Білий текст */
    padding: 14px; /* ОРИГІНАЛЬНИЙ ВІДСТУП */
    border-radius: 50px;

    font-weight: 700;
    font-size: 15px; /* ОРИГІНАЛЬНИЙ РОЗМІР */
    text-transform: uppercase;
    cursor: pointer;
    margin: 12px auto 0; /* ОРИГІНАЛЬНИЙ МАРЖИН, АВТО ДЛЯ ЦЕНТРУВАННЯ */
    transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
    text-align: center;
    box-shadow: rgba(255, 255, 255, 0.32) 0px 0px 0px 2px inset;
}

.wpcf7-submit:hover {
    transform: translateY(-1px);
    background: #fff !important; /* Білий фон при наведенні */
    color: #1a0b2e !important; /* Темний текст при наведенні */
    border-color: #fff !important;
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
}

.wpcf7-submit:active {
    transform: translateY(0);
}

/* Ошибки валидации (чтобы не раздували форму) */
.wpcf7-not-valid-tip {
    font-size: 11px;
    margin-top: 2px;
    color: #ff4d4d; /* Червоний колір помилки */
}

.wpcf7-response-output {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Кастомна стрілка SVG чисто БІЛОГО кольору (stroke='white') */
/*    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;*/

    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 18px !important;
    padding-right: 50px !important;

    /* Колір тексту самого селекта (залишаємо як у плейсхолдера) */
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.3s ease !important;
}


/* --- СТИЛІ ДЛЯ ПОЛЯ ДАТИ (DATE) --- */

/* Робимо іконку календаря ПОВНІСТЮ БІЛОЮ */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    /* Інвертуємо в білий на 100% */
    filter: invert(100%) brightness(100%) contrast(100%);
    /* Прибираємо напівпрозорість для максимальної чіткості */
    opacity: 1 !important;
    transition: transform 0.3s ease;
}

/* Ефект легкого збільшення при наведенні */
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Кастомна стрілка SVG чисто БІЛОГО кольору (stroke='white') */
    /*! background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; */

    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 18px !important;
    padding-right: 50px !important;

    /* Колір тексту самого селекта (залишаємо як у плейсхолдера) */
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.3s ease !important;
}


/* --- СТИЛІ ДЛЯ ВИПАДАЮЧОГО СПИСКУ (SELECT) --- */

select.wpcf7-form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Кастомна стрілка SVG чисто БІЛОГО кольору (stroke='white') */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 18px !important;
    padding-right: 50px !important;

    /* Колір тексту самого селекта (залишаємо як у плейсхолдера) */
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.3s ease !important;
}

/* При наведенні на селект робимо текст білим */
select.wpcf7-form-control:hover {
    color: #fff !important;
}
.wpcf7-response-output {
font-size:10px;

}



/* Адаптивность для мобильных — ОРИГІНАЛЬНА РОЗМІТКА */
@media (max-width: 480px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    .full-width, .form-item {
        grid-column: span 1;
    }
    .ic-popup-content {
        padding: 20px 20px 20px;
    }
}