html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-size: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Montserrat Alternates", sans-serif;
    color: white;
    background-color: white;
    height: 100%;
    overflow-x: hidden;
}

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

h2 {
    font-size: clamp(3.5vw, 28px, 56px);
    font-weight: 200;
}

/* Верхняя навигационная панель */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 5%;
    width: 100%;
    position: fixed;
    z-index: 3;
}

.logo {
    width: 100px;
    height: 100px;
}

.logo-link {
    display: inline-block;
}

.logo-black,
.logo-white {
    display: block;
    width: 100%;
    width: 100px;
    height: 100px;
}

/* По умолчанию отображаем черный логотип */
.logo-white {
    display: none;
}

/* Скрытие логотипа */
.logo-link.hidden {
    display: none;
}

#menu {
    display: flex;
    column-gap: 14px;
    list-style: none;
}

#menu li a {
    color: #b3b7b4;
    font-size: 16px;
    letter-spacing: -0.035em;
}

#hamburger {
    cursor: pointer;
    display: none;
    z-index: 3;
}

.hamburger-menu {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 5%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    z-index: 2;
    overflow-y: auto;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #b3b7b4;
    margin-bottom: 5px;
    transition: 300ms;
}

/* трансформация меню с бургера в Х */
.open .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.open .bar:nth-child(2) {
    opacity: 0;
}

.open .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.slider0-container {
    height: auto;
    min-height: 109vh;
    overflow: hidden;
    position: relative;
    background-color: #e4eae9;
}

#slider0 {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: background-image 0.5s ease-in-out;
}

#slider0 div {
    width: 100%;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
}


.slide-img {
    position: relative;
    /* для фильтра ::before */
}

.slide-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* Точки навигации слайдера */
.slick-dots {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 10px 0;
    list-style-type: none;
}

.slick-dots li {
    margin: 0 5px;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    width: 10px;
    height: 10px;
    padding: 0;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 50%;
    outline: none;
    border: none;
}

.slick-dots li.slick-active button {
    background-color: goldenrod;
}

.welcome-text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    color: white;
    z-index: 2;
    width: 100%;
    font-weight: bold;
}

.welcome-text h1 {
    font-family: "Montserrat Alternates", sans-serif;
    font-size: clamp(3.5vw, 28px, 56px);
    margin-bottom: 0.5rem;
    color: #cbd1cd;
    font-weight: 400;
}

.welcome-text p {
    font-size: clamp(2vw, 16px, 32px);
    font-weight: 200;
    margin-top: 10px;
    line-height: 1.2;
    text-align: start;
    color: #cbd1cd;
}

.welcome-text button {
    width: 56%;
    height: 3em;
    background-color: #025d5a;
    color: #cbd1cd;
    border-radius: 27px;
    border: none;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 57px;
    font-weight: 500;
}

.welcome button:hover {
    background-color: #002b28;
}

/* Раздел "Инфо о домах */
.info_about_houses {
    width: 100%;
    background-color: #e4eae9;
    color: #494c4c;
    padding: 0 10px 0 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.info_about_houses ul {
    padding-left: 1em;
}

.info_about_houses ul li {
    font-size: clamp(1.5vw, 12px, 24px);
    margin-top: 2px;
    text-align: justify;
    position: relative;
    list-style-type: none;
}

.info_about_houses ul li::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 4px;
    width: 8px;
    height: 8px;
    background-color: #ecb263;
    border-radius: 50%; 
}

.first-line-top {
    display: block;
    margin-top: 22px;
}

.info_about_houses p:nth-of-type(3) {
    margin-top: 22px;
}

.big-font {
    font-size: clamp(2.5vw, 20px, 40px);
    font-weight: 300;
}

/* параграф c мелким шрифтом*/
.info_about_houses>div>*:nth-child(2) {
    width: 100%;
    text-align: start;
    font-size: clamp(1.5vw, 12px, 24px);
    margin-top: 24px;
    text-align: justify;
}

.video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 182%;/* Пропорции для вертикального видео */
    overflow: hidden;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.video-container::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.3;
    z-index: 1;
}

/*РАЗДЕЛ ДАРИТЕ ЭМОЦИИ, А НЕ ВЕЩИ */
.certificate-container {
    background-color: white;
    color: #494c4c;
    margin-top: 20px;
    align-items: center;
}

.certificate-container-foto {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.image_section_certificate {
    display: flex;
    justify-content: end;
    align-items: center;
    height: 19em;
}

.image_right_certificate {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 59%;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

.image-container {
    display: flex;
    justify-content: center;
    gap: 5px;
    max-width: 100%;
}

.image-container img:hover {
    transform: scale(1.1); /* Увеличение на 10% */
}

.image_right_certificate img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    object-fit: contain;
}

.green_block_description {
    position: absolute;
    top: -30%;
    transform: translate(0%, -50%);
    width: 69%;
    border: 1px solid goldenrod;
    border-right: none;
    z-index: 0;
    height: 47em;
    right: 0;
}

/* Раздел "Обзор домов */
.review_of_houses {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1em;
    width: 100%;
    background-color: white;
    color: #494c4c;
    margin: 60px 0 72px;
}

.review_of_houses>*:first-child {
    font-size: 7px;
    text-align: start;
}

.yellow-line {
    border: none;
    height: 0.8px;
    background-color: goldenrod;
    margin-top: 5px;
    width: 43%;
}

.review_of_houses img {
    width: 40%;
    height: auto;
    margin-bottom: 10px;
}

.review_of_houses a {
    font-size: 13px;
    font-weight: bold;
    color: #025d5a;
}

.review_of_houses_info {
    width: 100%;
    color: #494c4c;
    padding: 35px 104px 40px 10px;
    position: relative;
}

/* параграф */
.review_of_houses_info>*:nth-child(2) {
    width: 100%;
    font-size: clamp(2vw, 16px, 32px);
    margin-top: 20px;
    text-align: justify;
}

.yellow_border {
    width: 65%;
    height: 324px;
    border: 1px solid goldenrod;
    border-right: none;
    position: absolute;
    top: 225px;
    right: 0;
}

.review_of_houses_info p {
    position: relative;
    z-index: 1;
}

/* Основной контейнер */
.container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

/* Раздел изображений */
.image-section {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 500px;
}

.image-left {
    position: absolute;
    top: 26px;
    left: 0;
    width: 44%;
    height: 47%;
    overflow: hidden;
    z-index: 1;
}

.image-right {
    position: absolute;
    top: 125px;
    right: 0;
    width: 53%;
    height: 27%;
    overflow: hidden;
    z-index: 1;
}

/* Зеленая вставка посередине */
.green-block {
    position: absolute;
    top: -2px;
    left: 37%;
    width: 62%;
    height: 23%;
    border: 1px solid goldenrod;
    border-right: none;
    z-index: 0;
}

/* Изображения внутри левого и правого блоков */
.image-left img,
.image-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Контейнер для текстового блока */
.center-container {
    position: absolute;
    bottom: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* Блок текста */
.text-section {
    width: 84%;
    padding: 104px 12px 39px 36px;
    text-align: start;
    border: 1px solid goldenrod;
    z-index: 1;
}

.text-section h2 {
    font-size: clamp(2.5vw, 20px, 40px);
    margin-bottom: 4px;
    font-weight: 300;
}

.text-section p {
    font-size: clamp(1.5vw, 12px, 24px);
    margin-bottom: 8px;
    font-weight: 200;
}

.more-link {
    color: #007bff;
    text-decoration: none;
    font-size: clamp(2vw, 16px, 32px);
}

.more-link:hover {
    text-decoration: underline;
}

/* Модальные окна */
.modal {
    display: none;
    /* Скрыто по умолчанию */
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content-reservation {
    background-color: #fff;
    color: #494c4c;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 91%;
    max-width: 57em;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: 0.3s;
    text-align: center;
}

.reservation {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    width: 95%;
    margin: 0 auto;
    background-color: white;
    padding: 7px;
}

.modal-content-reservation p {
    font-size: clamp(1.5vw, 12px, 24px);
    color: #494c4c;
    margin-bottom: 9px;
}

.modal-content-reservation button {
    width: 56%;
    max-width: 498px;
    height: 3em;
    color: #b7bab8;
    border-radius: 27px;
    border: none;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 15px 0 15px;
    font-weight: 500;
}

.modal-content-reservation button:enabled {
    background-color: #053634;
    cursor: pointer;
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 91%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: 0.3s;
    text-align: center;
}

/* Класс no-scroll для запрета прокрутки */
body.no-scroll {
    overflow: hidden;
}

.modal-foto {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.modal-foto img,
.modal-foto video {
    width: 49%;
}

.modal-foto img>:nth-child(5) {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.modal-foto>div {
    display: flex;/* Группировка изображений и видео */
    width: 98%;
    gap: 11px;
}

.modal-foto>div img,
.modal-foto>div video {
    width: 50%;/* Разделяем пространство пополам */
    height: auto;
    margin-bottom: 10px;
}

.video-container {
    margin-top: 20px;
    text-align: center;
}

.video-container video {
    max-width: 100%;
    height: auto;
}

.modal-content h2 {
    font-size: clamp(2.5vw, 20px, 40px);
    line-height: 1;
    font-weight: 400;
    margin-bottom: 20px;
}

.modal-content p {
    font-size: clamp(1.5vw, 12px, 24px);
    color: #494c4c;
    line-height: 1.5;
    font-weight: 250;
    text-align: start;
    margin-bottom: 2px;
}

.yellow-line-modal {
    border: none;
    height: 0.7px;
    background-color: goldenrod;
    margin: 11px 0 20px;
    width: 100%;
}

.modal-content>*:nth-child(4),
.modal-content>*:nth-child(5),
.modal-content>*:nth-child(6) {
    margin-bottom: 14px;
}

.modal-content>*:nth-child(6),
.modal-content>*:nth-child(7) {
    font-weight: 400;
    font-size: clamp(1.5vw, 12px, 24px);
}

.links-modal {
    display: flex;
    justify-content: center;
}

.links-modal a {
    color: black;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: clamp(1.5vw, 12px, 24px);
    font-weight: 700;
}

.links-modal a:hover {
    color: #0056b3;
}

.links-modal img {
    width: 2em;
    height: 2em;
    vertical-align: middle;
}

.whatsApp {
    display: flex;
    align-items: center;
}

.whatsApp img {
    width: 1.3em;
    height: 1.3em;
    margin: 0 5px;
}

.modal-content ul {
    list-style-type: disc;/* Маркер в виде точки */
    padding-left: 11px;
    font-size: clamp(1.5vw, 12px, 24px);
    color: #494c4c;
    line-height: 2;
    font-weight: 250;
    text-align: start;
    margin-bottom: 2px;
}

.modal-content li {
    margin-bottom: 5px;
}

.modal-content button {
    width: 80%;
    height: 42px;
    background-color: #ccc;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 19px;
    cursor: not-allowed;
    transition: background-color 0.3s ease;
    margin: 30px 0 30px;
    color: white;
}

.modal-content button>a {
    color: white;
}

.modal-content button:enabled {
    background-color: #053634;
    cursor: pointer;
}

@keyframes modalopen {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

.close {
    color: #aaa;
    float: right;
    font-size: clamp(4vw, 32px, 64px);
    font-weight: lighter;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.agreement {
    display: flex;
    gap: 14px;
    margin-top: 20px;
}

.modal-content button {
    width: 80%;
    height: 2.5em;
    border-radius: 27px;
}

.agreement a {
    color: #494c4c;
    font-size: clamp(1.5vw, 12px, 24px);
    line-height: 14px;
    font-weight: 400;
    text-decoration: underline;
}

#dataProcessingModal,
#bookingRulesModal,
#privacyPolicyModal {
    z-index: 7;
}

/* секция Отзывы гостей */
.guest_reviews {
    padding: 20px;
    background-color: #e4eae9;
    width: 100%;
}

.guest_reviews h2 {
    color: #025d5a;
    text-align: center;
    margin: 24px 10px 27px 10px;
    font-weight: 200;
}

.comments {
    margin-bottom: 20px;
    align-items: center;
}

.links {
    display: grid;
    text-align: center;
    gap: 14px;
    padding-bottom: 10px;
}

.links h2 {
    /* color: #053634; */
    color: #025d5a;
    font-size: clamp(2.5vw, 20px, 40px);
    font-weight: 400;
}

.links a {
    color: black;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: clamp(2.5vw, 20px, 40px);
    font-weight: 700;
}

.links a:hover {
    color: #0056b3;
}

.links img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 5px;
}

/* Фотогалерея */
.grid {
    background: white;
    max-width: 1290px;
    width: 100%;
}

/* clearfix */
.grid:after {
    content: '';
    display: block;
    clear: both;
}

.grid-item {
    position: relative;
    overflow: hidden;
    width: 160px;
    height: 120px;
    float: left;
    border: 2px solid white;
}

.grid-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
    
.grid-video {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* fluid 5 columns */
.grid-sizer,
.grid-item {
    width: 20%;
}

/* 2 columns */
.grid-item--width2 {
    width: 40%;
}

.grid-item--width3 {
    width: 60%;
}

.grid-item--width4 {
    width: 100%;
}

.grid-item--gigante {
    width: 329px;
    height: 403px;
}

.grid-item:hover {
    border-color: white;
    cursor: pointer;
}


/* Слайдер 1 отзывы гостей*/
.slider1-container {
    width: 100%;
    max-width: 800px;
    margin: 3em auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#slider1 {
    transition: transform 0.5s ease;
    overflow-x: scroll;
    scroll-behavior: smooth;
}

.slide {
    min-height: 300px;
    padding: 20px;
    flex-shrink: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    min-height: 300px;
    font-size: 12px;
    text-align: left;
    line-height: 1.5;
    color: #333;
}

.slide p:nth-child(1) {
    font-weight: bold;
    font-size: 15px;
    margin-top: 0;
}

#slider1::before {
    left: 0;
}

#slider1::after {
    right: 0;
}

/* Скрыть стрелки управления слайдером */
.slick-arrow {
    display: none !important;
}

/* Блок отзывов гостей для декстопов */
.comment-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.comment {
    width: 48%;
}

.comment {
    padding: 20px;
    background-color: #fff;
}

.author {
    font-weight: 500;
    font-size: clamp(2vw, 16px, 32px);
    margin-bottom: 3px;
}

.comment_date {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.comment_date a {
    color: #be3604;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: clamp(1vw, 8px, 16px);
}

.comment_date a:hover {
    color: #0056b3;
}

.date {
    display: inline-block;
    margin-left: 10px;
    font-size: clamp(1vw, 8px, 16px);
}

.comment p {
    text-align: justify;
    color: #494c4c;
}

.comment_text {
    font-size: clamp(1.5vw, 12px, 24px);
}


/* Раздел Отдых в Карелии */
.description {
    background-color: white;
    color: #494c4c;
    margin-top: 20px;
    align-items: center;
}

.container_description {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

/* слайдер 2 */
.slider2-container {
    width: 100%;
    width: 100vh;
    overflow: hidden;
}

#slider2 {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: background-image 0.5s ease-in-out;
}
 

#slider2 .slick-slide img {
    width: 100%;
    height: 50vh;
    object-fit: cover;
    display: inline-block;
}

/* Информация под вторым слайдером */
.slider-info-container {
    width: 60%;
    margin-top: 2em;
    margin-left: auto;
}

.slider-info {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e4eae9;
    color: #333;
    font-size: 12px;
    font-weight: 300;
    z-index: 1;
}

.slider-info>div {
    display: none;
    padding: 10px;
}

.slider-info>div.active {
    display: block;
}

.slider-info h4 {
    font-size: 15px;
    font-weight: 400;
}

.slider-info hr.yellow-line {
    margin-bottom: 5px;
}

/* Ответы на частые вопросы */
.answers-to-questions h2 {
    color: #494c4c;
    padding: 35px 104px 0 10px;
}

/* отступ между заголовком и аккордеоном */
.answers-to-questions>:first-child {
    margin-bottom: -50px;
}

.accordion-content ul {
    margin-left: 13px;
    color: #025d5a;
    font-size: clamp(1.5vw, 12px, 24px);
    margin-bottom: 1em;
    font-weight: 500;
}


/* секция  Хотите в Карелию*/
.i_want {
    width: 100%;
    background-color: #e4eae9;
    padding: 35px 10px 35px 29px;
    text-align: center;
}

.i_want h2 {
    color: #025d5a;
    font-weight: 300;
}

.arrow-down {
    font-size: 63px;
    font-weight: lighter;
    color: goldenrod;
    cursor: pointer;
    transition: transform 0.3s;
}

.arrow-down:hover {
    transform: scale(1.2);/* увеличение стрелки при наведении */
}

.i_want button {
    width: 77%;
    height: 3em;
    background-color: #025d5a;
    color: #cbd1cd;
    border-radius: 27px;
    border: none;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 26px;
    font-weight: 500;
}

.footer {
    background-color: #025d5a;
    color: #fff;
    padding: 50px;
    text-align: start;
    font-size: clamp(1.5vw, 12px, 24px);
    font-weight: 200;
}

footer>a:first-child>img {
    width: 100px;/* Размер для мобильной версии */
    height: auto;
}

.footer-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Колонки */
.column-left-footer,
.column-right-footer {
    width: 100%;
}

.footer h3 {
    font-size: clamp(2vw, 16px, 32px);
    font-weight: 300;
    margin: 30px 0 10px;
    color: goldenrod;
}

.legal-info {
    margin: 30px 0 30px;
}

.footer p {
    margin-bottom: 10px;
}

.footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #ccc;
}

.footer img {
    width: 3.3em;
    height: 3.3em;
}

.logo_fotter {
    display: flex;
    align-items: end;
    gap: 10px;
}

.logo_fotter p {
    font-size: clamp(1.5vw, 12px, 24px);
    font-weight: 400;
    margin-bottom: 8px;
    color: white;
}

.end {
    font-size: clamp(1vw, 8px, 16px);
    font-weight: 100;
    position: relative;
    padding-top: 10px;
    text-align: start;
}

.end::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: goldenrod;
}

/* СМИ */
.media-container {
    display: flex;
    align-items: center;
    gap: 1em;
}

.media-container img {
    border-radius: 8px;
}

/*Плашка cookie */
.cookie-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    color: #212121;
    padding: 10px 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    z-index: 1000;
}

.cookie-text {
    flex-grow: 1;
}

.cookie-button {
    background-color: #025d5a;
    color: #ffffff;
    border-radius: 18px;
    border: none;
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cookie-button:hover {
    background-color: #004d4a;
}

/* Скрываем баннер cookie */
.hidden {
    display: none !important;
}

/* СТРАНИЦА Дома и Документы - заголовок */
.welcome_houses {
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid goldenrod;
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

.welcome-text_houses {
    text-align: start;
    padding: 131px 20px 10px 0;
}

.welcome-text_houses h1 {
    font-size: clamp(3vw, 24px, 48px);
    margin-bottom: 0.5rem;
    color: #025d5a;
    font-weight: 400;
}

.welcome-text_houses p {
    font-size: clamp(1.5vw, 12px, 24px);
    font-weight: 400;
    color: #5e5c5c;
}

/* СТРАНИЦА Документы */
.accordion {
    width: 100%;
    margin: 0 auto;
    padding: 118px 7px;
    display: flex;
    flex-direction: column;
}

.accordion-item {
    border-top: 1px solid #e0dada;
}

.accordion-item:last-child {
    border-bottom: 1px solid #e0dada;
    /* Нижняя граница добавляется только к последнему элементу */
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px;
    cursor: pointer;
    position: relative;
}

.accordion-header h3 {
    font-size: clamp(2vw, 16px, 32px);
    margin: 0;
    color: #025d5a;
    font-weight: 500;
}



/* иконка в виде "+" на аккордионе */
.accordion-header .icon {
    color: goldenrod;
    font-size: clamp(4vw, 32px, 64px);
    font-weight: lighter;
    transition: transform 0.3s ease;
    position: relative;
}

.icon.open {
    transform: rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 14px;
}

.accordion-content p,
.accordion-content a {
    margin: 0;
    color: #025d5a;
    font-size: clamp(1.5vw, 12px, 24px);
    margin-bottom: 1em;
    font-weight: 500;
}

.link-hover:hover {
    text-decoration: underline;
}

.accordion-content-list {
    display: flex;
    flex-direction: column;
}
.yellow-square {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #025d5a;
    margin-right: 5px;
}

.accordion-content ul {
    list-style-type: none;
}

.accordion-content>:first-child {
    margin-top: 10px;
}

.accordion-item.active .accordion-content {
    max-height: 6000px;
    /*Максимальная высота в зависимости от содержимого */
}


/* МЕДИАЗАПРОСЫ */

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

    .info_about_houses {
        flex-direction: column;
    }

    .info_about_houses>div {
        width: 100%;
    }

    .video {
        /* width: 100%; */
        padding-bottom: 182%;
    }

    .comment-container {
        display: none;
    }

}

@media screen and (min-width: 500px) {

    .comment-container {
        display: none;
    }

    /* сертификат */
    .image_section_certificate {
        height: auto;
        margin-right: 35px;
    }

        .green_block_description {
        display: none;
    }

    .review_of_houses {
        gap: 1em;
    }

    .review_of_houses a {
        font-size: clamp(1.5vw, 12px, 24px);
    }

    .review_of_houses_info {
        padding-left: 28px;
    }

    .review_of_houses_info>div:nth-child(1),
    .answers-to-questions>div:nth-child(1) {
        width: 63%;
    }

    /* блок с текстом над каждой карточкой с домом и баней */
    .review_of_houses_info>*:nth-child(2) {
        width: 63%;
        font-size: clamp(1.5vw, 12px, 24px);

    }

    /* КАРТОЧКИ С ДОМАМИ */
    .container {
        width: 88%;
        margin-right: 33px;
    }

    .image-section {
        display: block;
        height: 21em;
    }

    .image-left {
        position: absolute;
        top: 0;
        left: 0;
        width: 44%;
        height: 100%;
    }

    .green-block {
        display: none;
    }

    .image-right {
        position: absolute;
        top: 0;
        right: 0;
        width: 53%;
        height: 52%;
    }

    .center-container {
        position: absolute;
        top: 57%;
        right: 0;
        width: 63%;
        height: 42%;
        display: flex;
        justify-content: end;
        align-items: center;
    }

    .text-section {
        width: 84%;
        height: 9em;
        padding: 14px 12px 97px 16px;
    }

    /* фотогалерея */
    .grid-item {
        height: 223px;
    }

    /* Базовая ячейка становится больше */
    .grid-sizer,
    .grid-item {
        width: 25%; /* Увеличено с 20% до 25% */
    }

    /* Перерасчет пропорций остальных классов */
    .grid-item--width2 {
        width: 50%;
    }

    /* Было 40%, стало 50% */
    .grid-item--width3 {
        width: 75%;
    }

    /* Было 60%, стало 75% */
    .grid-item--width4 {
        width: 100%;
    }

    /* Большое фото внизу галереи*/
    .grid-item--gigante--end {
        width: 100%;
        height: 368px;
    }

}


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

    #menu {
        display: none;
    }

    #hamburger {
        display: block;
    }

    #slider0 {
        height: calc(100vh - 100px);
        /* Уменьшаем высоту на мобильниках */
    }

    .prev-button,
    .next-button {
        display: none;
    }

    /* Фото слайдера для мобильных устройств */
    .slide1 {
        background-image: url('img/bg-kvadro.webp');
    }

    .slide2 {
        background-image: url('img/frukt.webp');
    }

    .slide3 {
        background-image: url('img/spalnay.webp');
    }

    .slide4 {
        background-image: url('img/DSV3.webp');
    }

    .slide5 {
        background-image: url('img/dom-solom.webp');
    }

    .slide6 {
        background-image: url('img/ozero-v-g.webp');
    }

    .slide7 {
        background-image: url('img/syamozero-bereg1.webp');
    }

}


@media screen and (min-width: 769px) {

    #menu {
        display: none;
    }

    #hamburger {
        display: block;
    }

    #menu li a {
        font-size: 16px;
    }

    .bar {
        width: 37px;
        height: 3px;
    }

    /* корректировка бургер меню при открытии "Х" */
    .open .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-40deg);
    }

    /* Горизонтальные фото слайдера для планшетов и десктопов  */
    .slide1 {
        background-image: url('img/bg-kvadro.webp');
    }

    .slide2 {
        background-image: url('img/frukt.webp');
    }

    .slide3 {
        background-image: url('img/spalnay.webp');
    }

    .slide4 {
        background-image: url('img/DSV3.webp');
    }

    .slide5 {
        background-image: url('img/siyanie.webp');
    }

    .slide6 {
        background-image: url('img/ozero-g.webp');
    }

    .slide7 {
        background-image: url('img/syamozero-bereg2.webp');
    }

    .welcome-text {
        left: 36%;
        width: 70%;
    }

    .welcome-text h1 {
        font-size: clamp(4vw, 39px, 64px);
    }

    .welcome-text p {
        font-size: clamp(2.5vw, 20px, 40px);
    }

    .welcome button {
        font-size: 1.2em;
    }

    .info_about_houses {
        margin-bottom: 6em;
        flex-direction: row;
        padding-top: 7em;
    }

    .info_about_houses>div {
        width: 50%;
        padding-left: 1em;
    }

    .video {
        width: 50%;
        padding-bottom: 64.25%;/* Пропорции для горизонтального видео */
        margin-top: 1em;
    }

    .video-container {
        width: 100%;
        left: 4em;
    }

    .video-container::before {
        width: 71%;
    }

    .video video {
        width: 71%;
        height: auto;
        object-fit: contain;
    }

    .slid-first {
        display: none;
    }

    .intro {
        display: contents;
    }

    /* сертификат */
    .image_section_certificate {
        height: auto;
        margin-right: 67px;
    }

    .green_block_description {
        display: none;
    }

    .review_of_houses {
        gap: 1em;
    }

    .review_of_houses a {
        font-size: clamp(1.5vw, 12px, 24px);
    }

    .review_of_houses_info {
        padding-left: 54px;
    }

    .review_of_houses_info>div:nth-child(1),
    .answers-to-questions>div:nth-child(1) {
        width: 63%;
    }

    /* блок с текстом над каждой карточкой с домом и баней */
    .review_of_houses_info>*:nth-child(2) {
        width: 63%;
        font-size: clamp(1.5vw, 12px, 24px);
    }

    /* КАРТОЧКИ С ДОМАМИ */
    .container {
        width: 67%;
        margin-right: 69px;
    }

    .image-section {
        display: block;
        height: 21em;
    }

    .image-left {
        position: absolute;
        top: 0;
        left: 0;
        width: 44%;
        height: 100%;
    }

    .green-block {
        display: none;
    }

    .image-right {
        position: absolute;
        top: 0;
        right: 0;
        width: 53%;
        height: 52%;
    }

    .center-container {
        position: absolute;
        top: 57%;
        right: 0;
        width: 63%;
        height: 42%;
        display: flex;
        justify-content: end;
        align-items: center;
    }

    .text-section {
        width: 84%;
        height: 9em;
        padding: 24px 12px 97px 36px;

    }

    /* модальное окно */
    .modal-content {
        width: 50%;
        padding: 0 28px;
    }

    .modal-content button {
        height: 3em;
        width: 48%;
    }

    /* фотогалерея */
    .grid-item {
        width: 340px;
        height: 400px;
    }

    /* Базовая ячейка становится больше */
    .grid-sizer,
    .grid-item {
        width: 25%; /* Увеличено с 20% до 25% */
    }

    /* Перерасчет пропорций остальных классов */
    .grid-item--width2 {
        width: 50%;
    }

    /* Было 40%, стало 50% */
    .grid-item--width3 {
        width: 75%;
    }

    /* Было 60%, стало 75% */
    .grid-item--width4 {
        width: 100%;
    }

    /* Большое фото внизу галереи*/
    .grid-item--gigante--end {
        width: 100%;
        height: 500px;
    }

    /* отзывы */
    .slider1-conteiner {
        display: none;
    }

    .comment-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .comment {
        width: 32%;
    }

    .author {
        font-size: 12px;
    }

    .comment_text {
        font-size: 10px;
    }

    .links {
        width: 100%;
        /* Ссылки занимают всю ширину */
        text-align: center;
        /* Центрируем ссылки */
        margin-top: 20px;
        /* Отступ сверху для ссылок */
    }

    .review_of_houses_info {
        margin-bottom: 3em;
    }

    .answers-to-questions>:first-child {
        margin-left: 39px;
    }

    /*слайдер 2 */
    .container_description {
        width: 67%;
        margin-right: 69px;
    }

    .slider-info-container {
        width: 100%;
    }

    .slider-info h4 {
        font-size: 16px;
    }

    .slider-info {
        font-size: 12px;
    }

    .accordion {
        max-width: 88%;
    }

    .accordion-header h3 {
        font-size: clamp(2vw, 16px, 32px);
    }

    .accordion-content p {
        font-size: clamp(2vw, 16px, 32px);
    }

    .icon {
        font-size: 3em;
    }

    .i_want button {
        width: 40%;
    }

    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        gap: 13em;
    }

    .column-left-footer,
    .column-right-footer {
        width: 48%;
    }

    .logo_fotter p {
        font-size: clamp(2vw, 16px, 32px);
    }

    .logo_fotter {
        align-items: center;
    }

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

    .footer p {
        margin-bottom: 5px;
    }

    /* страница с домами */
    .welcome-text_houses h1 {
        font-size: clamp(4vw, 32px, 64px);
    }

    .welcome-text_houses {
        padding-left: 24px;
    }

}

@media screen and (min-width: 1025px) {
    header {
        padding: 0.1em 5%;
        background-color: #025d5a;
        position: sticky;
        top: 0;
    }

    .logo-black {
        display: none;
    }

    .logo-white {
        display: block;
    }

    .logo-link.hidden {
        display: block;
        /* Делаем логотип видимым */
    }

    #menu {
        display: flex;
        column-gap: 14px;
        list-style: none;
        align-items: center;
    }

    #menu li {
        display: inline-flex;
        align-items: center;
    }

    #hamburger {
        display: none;
    }

    #menu li a {
        font-size: 1em;
    }

    /* кнопка вверх */
    .scroll-to-top {
        display: none;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: white;
        color: #025d5a;
        line-height: 54px;
        text-align: center;
        font-size: 30px;
        position: fixed;
        bottom: 50px;
        left: 20px;
        opacity: 0.8;
        transition: all 0.3s ease;
        z-index: 1000;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }

    .scroll-to-top.show {
        display: inline-block;
    }

    .scroll-to-top:hover {
        opacity: 1;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .arrow-up::before {
        content: "↑";
        display: inline-block;
        font-weight: bold;
    }

    /* горизон-е фото для слайдера */
    .slide1 {
        background-image: url('img/dom1.webp');
    }

    .slide2 {
        background-image: url('img/bg-big2.webp');
    }

    .slide3 {
        background-image: url('img/bg-big1.webp');
    }

    .slide4 {
        background-image: url('img/DS9.webp');
    }

    .slide5 {
        background-image: url('img/quadroBig.webp');
    }

    .welcome-text {
        left: 30%;
        width: 51%;
    }

    .welcome-text p {
        font-size: clamp(2vw, 16px, 32px);
    }

    .welcome-text button {
        width: 42%;
        height: 2.1em;
        font-size: 1.3em;
    }

    .reservation {
        width: 65%;
    }

    .agreement label.checkbox-container input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    /* КАРТОЧКИ С ДОМАМИ */
    .image-section {
        height: 30em;
    }

    .text-section {
        height: 13em;
        padding: 47px 12px 97px 36px;
    }

    /* фотогалерея */
    .grid {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0 auto;
    }

    .grid-item {
        height: 514px;
    }

    /* аккордеон */
    .accordion {
        flex-direction: row;
        justify-content: space-between;
    }

    .left-column,
    .right-column {
        width: 48%;
        display: flex;
        flex-direction: column;
    }

    .accordion-content p {
        font-size: clamp(1.4vw, 12px, 24px);
    }

    .logo_fotter p {
        font-size: clamp(1.5vw, 12px, 24px);
    }

    .cookie-bar {
        width: 40%;
        left: 50%;
        bottom: 8%;
        border-radius: 5px;
        font-size: 16px;
    }
}


@media screen and (min-width: 1281px) {

    /* КАРТОЧКИ С ДОМАМИ */
    .container {
        width: 67%;
        margin-right: 69px;
    }

    .image-section {
        height: 41em;
    }

    .text-section {
        height: 18em;
        padding: 78px 12px 70px 36px;
    }

    .modal-content {
        padding: 0 4%;
    }

    .modal-content button {
        height: 4em;
    }

    /* отзывы */
    .guest_reviews {
        margin-top: 4em;
    }

    .author {
        font-size: clamp(1.4vw, 16px, 32px);
    }

    .comment_date a {
        font-size: clamp(0.8vw, 8px, 16px);
    }

    .comment_text {
        font-size: clamp(1.0vw, 12px, 24px);
    }

    /* слайдер 2 */
    .container_description {
        margin-right: 0px;
    }

    .slider2-container {
        margin-right: 0;
    }

    #slider2 {
    width: 85%;
    }

    .slider-info-container {
        width: 85%;
        margin-left: 0;
    }

    .slider-info h4 {
        font-size: clamp(1.4vw, 16px, 32px);
    }

    .slider-info {
        font-size: clamp(1.0vw, 12px, 24px);
    }

}


@media screen and (min-width: 1921px) {

    .welcome-text {
        left: 30%;
        width: 51%;
    }

    .welcome-text p {
        font-size: 30px;
    }

    .welcome-text button {
        width: 42%;
        height: 2.3em;
        font-size: 2em;
    }

    .reservation {
        width: 90%;
    }

    .agreement label.checkbox-container input[type="checkbox"] {
        width: 30px;
        height: 30px;
    }

    /* КАРТОЧКИ С ДОМАМИ */
    .image-section {
        height: 55em;
    }

    .center-container {
        top: 51%;
        height: 54%;
    }

    .text-section {
        height: 24em;
        padding: 78px 12px 70px 36px;
    }

    /* фотогалерея */
    .grid {
        justify-content: flex-end;
        margin-right: 70px;
    }

}