@font-face {
    font-family: garet;
    src: url('../fonts/Garet-Book.otf');
}

@font-face {
    font-family: dmserif;
    src: url('../fonts/DMSerifDisplayRegular.ttf') format('truetype');
}
@font-face {
    font-family: Caravan;
    src: url('../fonts/Caravan.otf') format('truetype');
}

body {
    margin: 0;
    padding: 0;
    font-family: garet;
    background-color:#151515;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: dmserif, serif;
}


/* ШАПКА */

.header {
    display: flex;
    align-items: center;
    background-color: #15151590;
    height: 100px;
    width: 98%;
    padding: 10px 20px;
    justify-content: space-between;
    position: fixed;
    z-index: 3;
}

.logo {
    max-height: 120px;
    max-width: 120px;
    margin: 0 15px;
}

nav {
    display: flex;
    flex-wrap: wrap;
}

.nav-item {
    color: #E8E8E8;
    margin: 10px 15px;
    font-weight: 100;
    text-decoration: none;
    font-family: garet;
    letter-spacing: normal;
}

.nav-item:hover {
    color: #B59B7A;
    transition: 0.4s linear;
    cursor: pointer;
}

.nav-button-container {
    display: flex;
    flex-direction: column;
}

/* начало тестовых стилей */

.nav-button-container-test{
    display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 220px;
height: 100px;
}
.phone-icons{
    width: 200px;
    height:40px;
    margin: 5px 10px;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.phone-icons-contacts{
    width: 200px;
    height: 70px;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 0;
}
.contact-icon-test{
    height: 50px;
    width: 50px;
}
.phone-icons-mobile{
    width: 200px;
    height:40px;
    margin: 5px 10px;
    align-items: center;
    justify-content: space-between;
    display:none;
}
.phone-link-header {
    color: #fff;
text-decoration: none;
font-size: 14px;
}
.phone-link-header:hover{
        color: #B59B7A;
    transition: 0.4s linear;
    cursor: pointer;
}

.header-icon-test {
    width: 25px;
    height: 25px;
}
.header-icon-geo {
    width: 25px;
    height: 25px;
}

.mobile-container{
        display: flex;
    align-items: center;
    width: 100%;
    height: 100px;
    justify-content: space-between;
}

.call-request-popup {
 display: none; /* Модальное окно скрыто по умолчанию */
 position: fixed; /* Фикс. Позиция на главной странице */
 z-index: 10; /* Отображение на заднем плане */
 left: 0;
 top: 0;
 width: 100%; /* 100% по ширине */
 height: 100%; /* 100% по высоте */
 overflow: auto; /* Включить прокрутку, если необходимо */
 background-color: rgba(0,0,0,0.4); /* Полупрозрачный фон */
}

/* Содержание модального окна */
.modal-content {
 background-color: #fefefe;
 margin: 15vh auto; /* 15% от верха и центрировано */
 padding: 0px 20px 20px;
 border: 1px solid #888;
     display: flex;
    justify-content: center;
    position: relative;
    width: 320px;
 
}

/* Основные свойства кнопки «Закрыть» */
.close {
 color: #aaa;
 float: right;
 font-size: 28px;
 font-weight: bold;
     position: absolute;
    top: 0px;
    right: 14px;
}

.call-request-header{
    font-size: 20px;
}

/* Свойства кнопки «Закрыть», когда вы наводите на нее курсор или взаимодействуете с ней */
.close:hover,
.close:focus {
 color: black;
 text-decoration: none;
 cursor: pointer;
}

.text-input{
    width: 278px;
    height: 50px;
    border: 1px solid #B59B7C;
    border-radius: 4px;
    font-size: 16px;
    padding: 0px 10px;
}
.select-input{
        width: 300px;
    height: 50px;
    border: 1px solid #B59B7C;
    padding: 5px 30px 5px 10px;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color:#fff;
    font-size:16px;
    color:#000;
}
.submit-call{
        width: 300px;
    height: 50px;
    border-radius: 4px;
    border: none;
    background-color: #B59B7C;
    color: #fff;
    font-size: 16px;
}
.call-request-form{
        display: flex;
    flex-direction: column;
}
.call-request-checkbox{
        font-size: 10px;
    width: 300px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
input[type='checkbox'] {
    accent-color: #B59B7C;
}
.submit-call:hover {
            color: #fff;
            background-color:#6B0401;
    transition: 0.4s linear;
    cursor: pointer;
}

.buy-residence{
    text-decoration: none;
    line-height: 36px;
}

.contacts-link-phone {
    text-decoration:none;
    color:#fff;
    font-size: 30px;
}
.contacts-link-phone:hover {
            color: #B59B7C;
    transition: 0.4s linear;
    cursor: pointer;
}

.float-btns{
    display:flex;
    flex-direction:column;
    width: 50px;
    position:fixed;
    gap:15px;
    margin-right:20px;
    margin-bottom:20px;
    right:0px;
    bottom:0px;
    z-index: 9;
}
.float-btn{
    width:50px;
    height:50px;
    background-color: #B59B7A;
    display:flex;
    justify-content:center;
    align-items:center;
}
.float-link{
    height:30px;
}

.float-btn:hover{
    background-color: #6B0401;
        transition: 0.4s linear;
    cursor: pointer;
}
.float-icon{
    width: 24px;
    height: 24px;
    padding-top:3px;
}
.float-call-request-btn{
        width: 200px;
    height: 50px;
    background-color: #B59B7A;
    border: none;
    font-size: 16px;
    font-family: garet;
    color: #E8E8E8;
}
.float-call-request-btn:hover{
        background-color: #6B0401;
        transition: 0.4s linear;
    cursor: pointer;
}

.float-call-request{
        position: fixed;
    bottom: 20px;
    right: 85px;
    display:none;
    flex-direction:column;
    gap:15px;
    z-index: 2;
}
.float-phone-btn{
    height:48px !important;
    text-align:center;
    margin:0 !important;
    text-decoration:none;
    line-height:48px;
    width:200px !important;
    background-color: #00000090 !important;
}

.section-feedback{
    padding:50px;
    display:flex;
    flex-direction:column;
    gap:30px;
    color: #fff;
    background-color:#151515;
}
.feedback-link{
    color: #B59B7A;
    text-decoration:none;
}
.feedback-link:hover {
    color: #6B0401;
    transition: 0.4s linear;
    cursor: pointer;
}

/* services */

.services-header-container{
    padding: 100px 50px 50px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.services-header{
    font-size:40px;
    text-align:center;
    color:#fff;
}
.services-container{
    padding:30px 50px 50px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.services-menu-container{
    width:500px;
    height:50px;
    display:flex;
    justify-content:center;
    gap:50px;
}
.services-menu-btn{
    height:50px;
    width:200px;
    color: #fff;
    background:none;
    box-shadow:none;
    font-size: 20px;
    text-align:center;
    font-family: garet;
    border-radius:0px;
    border: 1px solid #B59B7A;
}
.services-menu-btn:hover{
    border:1px solid #6B0401;
    transition: 0.4s linear;
    cursor: pointer;
}
.services-items-container{
    padding:30px 50px 50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:30px;
}
.services-item{
    width:calc(100% - 80px);
    padding:30px;
    border:1px solid #B59B7A;
    color:#fff;
    display:flex;
    flex-direction:row;
    gap:30px;
    justify-content:space-between;
}
.services-item-text-container{
    width:calc(70% - 15px);
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    gap:30px;
    justify-content:center;
}
.services-item-name{
    font-size:32px;
    margin:0px;
    text-align:center;
}
.services-item-text{
    font-size:16px;
    margin:0px;
    text-align:center;
}
.services-item-label{
    position:absolute;
    top:-10px;
    left:-10px;
    color:#B59B7A;
}
.services-item-img-container{
    width:350px;
    display:flex;
    align-items:flex-start;
}
.services-item-img{
    width:280px;
    height:280px;
}
.services-border-container{
    width: 320px;
    height:320px;
    border:1px solid #B59B7A;
    display:flex;
    align-items:center;
    justify-content:center;
}
.services-eats{
    display:none;
}

/* offers */
.offers-item-text-container{
    width:calc(50% - 15px);
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    gap:30px;
    justify-content:center;
}
.offers-item-img-container{
    width:550px;
    display:flex;
    align-items:flex-start;
}
.offers-border-container{
    width: 520px;
    height:320px;
    border:1px solid #B59B7A;
    display:flex;
    align-items:center;
    justify-content:center;
}
.offers-item-img{
    width:480px;
    height:280px;
}
.offers-item-button{
        display: flex;
    justify-content: center;
    align-items: center;
    text-decoration:none;
}

.image-header {
    height: calc(100vw / 2);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    justify-content: right;
    align-items: flex-end;
}
.image-header-container{
    padding:30px 50px;
    background-image: linear-gradient(#40404000, #000000c9 35%, #000000c9 65%, #40404000 100%);
    align-items:center;
    justify-content:center;
    color:#fff;
    margin:50px;
}
.house-header{
        font-family: Caravan, serif;
    font-size:160px;
text-align: right;
padding: 50px;
margin: 0 50px 0px 0px;
/*    text-transform: uppercase; 
    letter-spacing: 10px;  */
    background-image: linear-gradient(to bottom, #CAB093 30%,#BFA788 45%,#D9C7AE 60%);
      /* обрезаем фон по тексту */
  -webkit-background-clip: text;
  /* меняет цвет текста заголовка на прозрачный что бы можно было увидеть градиент*/
  -webkit-text-fill-color: transparent;
}
.page-header-img{
    height:16vw;
    margin-right:30px;
}
.house-header-text{
    font-size: 16px;
    line-height:18px;
    text-align: right;
    padding: 0px 50px 50px;
    margin: 0px 50px 50px 0px;
    color: #ffffff;
}
.download-block-text-block {
    color:#fff;
}
.download-block-file-part{
    color:#fff;
}
.download-block{
    padding:100px 50px;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:30px;
}
.download-block-text-block{
    width:60%;
    border:1px solid #B59B7A;
}
.downloaf-block-file-block{
    display:flex;
    border:1px solid #B59B7A;
    
}
.download-block-text{
    padding:30px;
    font-size:16px;
}
.download-block-file-part{
    padding:30px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
}
.download-block-file-text{
    margin:0px 0px 15px;
    text-align:center;
}
.download-button{
     width: 200px;
    height: 40px;
    margin: 5px 10px;
    background-color: #B59B7A;
    border: none;
    font-size: 16px;
    font-family: garet;
    color: #E8E8E8;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.download-button:hover {
    background-color: #6B0401;
    transition: 0.4s linear;
    cursor: pointer;
}
.house-icon{
    width: 25px;
    height: 25px;
    margin: 0px 10px 0px 0px;
}
.house-desc{
    font-size:16px;
    margin:0px;
}
.description-house-block{
        display: flex;
    margin: 15px 15px;
}
.house-frame{
        background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 0px 0px 50px;
}
.house-frame:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: 0.7;
    z-index: 1;
}
.house-plates{
    padding:100px 50px;
    display:flex;
    flex-direction:column;
    gap:50px;
    align-items:center;
}
.plates-header{
    font-size:40px;
    color:#fff;
    text-align:center;
    margin:0px;
}
.plates-container{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:30px;
    max-width:960px;
}
.plate{
    width:300px;
    height:250px;
    background-color:#252525;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    margin:0 auto;
}
.plate-icon{
    width:100px;
    height:100px;
    margin-top:30px;
}
.plate-text{
    color:#B59B7A;
    margin:10px 20px 30px;
    text-align:center;
}
.feedback-form{
   display: flex;
flex-direction: column;
    width: 300px;
    justify-content: center;
    align-items: flex-start;
}
.feedback-form-text-header{
    color:#fff;
    font-size:40px;
    text-align:left;
    margin:0px 0px 15px;
}
.feedback-form-container{
    display:flex;
    justify-content:center;
    gap:100px;
    padding:100px 50px;
    align-items:center;
}
.feedback-border-container{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
    border: 1px solid #B59B7A;
    gap: 100px;
}

.feedback-form-text{
    display:flex;
    flex-direction:column;
    width:50%;
}
.feedback-form-text-text{
    color:#fff;
    font-size:16px;
    text-align:left;
    margin:0px 0px 0px;
}
.feedback-checkbox{
        font-size: 10px;
    width: 300px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color:#fff;
}
.feedback-form-header{
    color:#fff;
        font-size: 20px;
}
.feedback-label{
    color:#fff;
}
.dontmiss{
        padding: 100px 50px;
}
.dontmiss-border-container{
        border: 1px solid #B59B7A;
    padding: 50px;
}
.dontmiss-header{
        text-align: center;
    font-size: 40px;
    color: #fff;
    margin: 0px 0px 15px;
}
.dontmiss-text{
        text-align: center;
    font-size: 16px;
    color: #fff;
    margin: 0px 0px;
}
.dontmiss-buttons{
        margin: 50px 0px 0px;
    display: flex;
    justify-content: center;
    gap: 30px;
}
.messenger-button{
        width: 220px;
    color: #fff;
    background-color: #B59B7A;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    text-decoration:none;
}
.messenger-button:hover {
    background-color: #6B0401;
    transition: 0.4s linear;
    cursor: pointer;
}

.last-slide {
        height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    gap: 30px;
    align-items: center;
}

.swiper-pagination-bullet-active{
    background: #B59B7A !important;
}

.image-header-container{
    animation: fadeIn 1.5s;
      -webkit-animation: fadeIn 1.5s;
  -moz-animation: fadeIn 1.5s;
  -o-animation: fadeIn 1.5s;
  -ms-animation: fadeIn 1.5s;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.main-frame-swipe{
        align-items: flex-end !important;
        justify-content: flex-end;
}
.main-frame-swipe-first{
        align-items: center;
        justify-content: space-between;
}
.main-frame-text-swipe{
        margin: 0px 100px 0px 20px !important;
            align-items: flex-end;
}
.main-frame-header-swipe{
        text-align: right;
            font-size: 36px !important;
            font-family: Caravan, serif;
}
.main-frame-paragraph-first{
    text-align: right;
        font-size: 16px !important;
    max-width: 600px;
}
/* конец тестовых стилей */

.nav-button {
    width: 200px;
    height: 40px;
    margin: 5px 10px;
    background-color: #B59B7A;
    border: none;
    font-size: 16px;
    font-family: garet;
    color: #E8E8E8;
}

.nav-button:hover {
    background-color: #6B0401;
    transition: 0.4s linear;
    cursor: pointer;
}

.nav-second-button {
    width: 200px;
    height: 40px;
    margin: 5px 10px;
    background-color: #00000000;
    border: 1px solid #B59B7A;
    font-size: 16px;
    font-family: garet;
    color: #E8E8E8;
}

.nav-second-button:hover {
    border-color: #6B0401;
    transition: 0.4s linear;
    cursor: pointer;
}

/* ПЕРВЫЙ ЭКРАН */

.main-frame {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 600px;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-color: #0009;
    background-blend-mode: color;
    width: 100%;
}

.main-frame-text {



    padding: 30px 20px 30px 20px;
    margin-top: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;

}

.main-frame-header {
    font-size: 60px;
    color: #E8E8E8;
    margin: 0;
}

.main-frame-paragraph {
    font-size: 20px;
    line-height: 24px;
    color: #E8E8E8;
    margin: 0;
}

.main-frame-vidget {
    width: 85vw;
    padding: 0px 2.5vw;
    background-color: #15151590;
    margin-top: 20vh;
}

/* Блок заголовка страницы (сео) */
.inside-page-header-block {
    padding-top: 150px;
    text-align: center;
    background-color: #151515;
}

.inside-page-header-block .block-header {
    color: #E8E8E8;
    font-size: 40px;
    margin-bottom: 0;
    text-transform: uppercase;
}

/* ЭКРАН ВИДЕО ЮТУБ */

.video-frame {
    height: 600px;
    background-color: #151515;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pokachto {
    height: 400px;
    width: 650px;
    background-color: #B59B7A;
}

.video-ul {
    list-style-type: none;
    color: #E8E8E8;
    font-size: 20px;
}

.video-list {
    border: 1px solid #B59B7A;
    line-height: 34px;
    font-weight: 100;
    margin: 3px;
    padding: 4px;
}

.video-list:hover {
    border-color: #6B0401;
    transition: 0.4s linear;
    cursor: pointer;
}

.video-container {
    margin-top: 10vh;
    margin-left: 10vh;
}

.video-menu {
    margin-top: 10vh;
    margin-right: 10vh;
}

/* ИНФОРМАЦИЯ О РЕЗИДЕНЦИЯХ */

.residence-frame {
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 50px;
}

.residence-frame:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: 0.7;
    z-index: 1;
}

.residence-frame-header {
    position: relative;
    width: 100%;
    text-align: center;
    color: #E8E8E8;
    padding: 30px 0;
    z-index: 2;
}

.residence-frame-header-text {
    font-size: 40px;
}

.description {
    position: relative;
    width: 60%;
    margin: 0 5% 0;
    background-color: #00000080;
    z-index: 2;
    font-size: 20px;
    line-height: 30px;
    color: #E8E8E8;
}

.residence-image {
    position: relative;
    width: 25%;
    margin: 0 5% 0 0;

    background-size: cover;
    background-position: 50%;
    z-index: 2;
}

.description-start {
    margin: 30px 130px 30px;
}

.description-ul {
    margin: 25px;
}

.description-ul li {
    font-weight: 100;
}

.description-icon {
    max-height: 80px;
    width: 100px;
    margin: 15px;
}

.description-block {
    display: flex;
    margin: 15px 10px;
}

.description-heading {
    font-size: 24px;
    margin: 5px 0;
    font-family: garet;
}

.description-desc {
    font-size: 20px;
}

/* Виды резиденций */
.residence-types-section {
    width: 100%;
    padding: 50px 0;
    background-color: #151515;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.residence-description-header {
    color: #E8E8E8;
    text-align: center;
    width: 100%;
    font-size: 40px;
}

.residence-type-background {
    width: 80%;
    border: 1px solid #B59B7A;
    background-color: #151515;
    display: flex;
    margin: 25px 0;
    align-items: center;
    padding: 30px;
}

.residence-type-slider {
    padding: 20px 10px 20px 20px;
}

.residence-type-image {
    width: 100%;
}

.residence-type-description {
    padding: 20px 20px 20px 10px;
    width: 50%;
}

.slider-about {
    width: 50%;
}

.owl-theme .owl-nav.disabled+.owl-dots {
    margin-bottom: 10px;
    margin-top: 0px !important;
}

.residence-type-name {
    font-size: 22px;
    color: #E8E8E8;
    margin: 20px 40px;
}

.residence-description-area {
    font-size: 18px;
    color: #E8E8E8;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.residence-description-icon {
    width: 20px;
    height: 20px;
    margin: 5px 10px;
}

.residence-description-text {
    margin: 0;
}

/* ИНФОРМАЦИЯ О КОМПАНИИ */
.about-company {
    width: 100%;
    padding: 50px 0;
    background-image: url(img/VILLINGSTON-21.jpg);
    background-size: cover;
    background-position: center;
    position: relative;

}

.about-company:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: 0.7;
    z-index: 1;
}

.about-header-text {
    position: relative;
    color: #E8E8E8;
    text-align: center;
    width: 100%;
    font-size: 40px;
    z-index: 2;
}

.logo-and-desc {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 80%;
    margin-bottom: 50px;
}

.about-logo {
    width: 300px;
}

.about-company {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-desc {
    font-size: 26px;
    color: #E8E8E8;
    width: 60%;
}

/* ПОДВАЛ */

.footer {
    width: 100%;
    background-color: #151515;
    display: flex;
    flex-direction: column;
}

.footer-box {
    width: 100%;
    display: flex;
    justify-content: center;
}

.footer-nav {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.footer-down {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 50px;
}

.footer-down-text {
    max-width: 65%;
    color: #DDBFA0;
    font-size: 16px;
    margin: 10px 0;
}

.logo-footer {
    width: 200px;
    margin-top: 50px;
}

.footer-header a {
    margin: 50px;
    color: #E8E8E8;
    text-align: center;
    width: 100%;
    font-size: 40px;
}

.footer-span {
    color: #E8E8E8;
    margin: 0 10px;
    font-size: 22px;
}

.footer-link {
    color: #E8E8E8;
    margin: 0 10px;
    font-size: 22px;
}

.footer-link:hover {
    color: #B59B7A;
    transition: 0.4s linear;
    cursor: pointer;
}

/* Специальные предложения */

.offers {
    background-color: #151515;
}

.offers-header {
    font-size: 40px;
    color: #E8E8E8;
    text-align: center;
    padding-top: 140px;
    margin-top: 0px;
}

.offers-cards {
    display: flex;
    margin: 0 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.offers-card {
    width: 380px;
    position: relative;
    margin: 30px;

}

.card-top {
    background-image: url(img/residence.webp);
    background-size: cover;
    background-position: center;
    position: relative;
    height: 200px;

}

.card-bot {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.card-bot-text {
    color: #fff;
    font-size: 24px;
    text-align: center;
    margin: 15px auto 10px;
}

.card-bot-desc {
    color: #fff;
    font-size: 16px;
    text-align: center;
}

.offer-desc-button {
    background-color: #B59B7A;
    color: #E8E8E8;
    border: none;
    height: 40px;
    width: 160px;
    padding: 3px 0;
    font-size: 22px;
    font-family: garet;
    margin: 0 90px;
    text-align: center;
    text-decoration: none;
}

.offer-desc-button:hover {
    background-color: #6B0401;
    transition: 0.4s linear;
    border: 1px solid #E8E8E8;
    cursor: pointer;
}

/* Контакты */

.contacts {
    padding-top: 150px;
    text-align: center;
    background-color: #151515;

}

.contacts-header {
    color: #E8E8E8;
    font-size: 40px;
    margin-bottom: 0;
    text-transform: uppercase;
}

.contacts-header-text {
    color: #E8E8E8;
    font-size: 26px;
    margin-bottom: 100px;
}

.contact-inf {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    padding: 0 50px;
    margin-bottom: 100px;
    color: #E8E8E8;
    font-size: 40px;
}

.how-to-reach {
    width: 80%;
    display: flex;
    justify-content: space-around;

    flex-wrap: wrap;
    margin: 0 10%;
    padding-bottom: 30px;

}

.how-to-reach-card {
    width: 40%;
    display: flex;
    align-items: start;
    padding: 30px 40px;
    text-align: left;
}

.how-to-reach-img {
    width: 35px;
    height: 35px;
    margin-right: 15px;

}

.how-to-reach-text {
    font-size: 22px;
    color: #E8E8E8;
    margin-top: 6px;

}

/* ваше мероприятие */
.events {
    padding-top: 120px;
    background-size: cover;
    height: 500px;
    background-position: center;
    background-color: #00000090;
    background-blend-mode: color;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.events-header {
    color: #E8E8E8;
    font-size: 40px;
    margin-bottom: 0;
}

.events-header-text {
    font-size: 22px;
    color: #E8E8E8;
}

.events-desc-text {
    font-size: 22px;
    color: #E8E8E8;
}

.events-header-block {
    width: calc(50% - 100px);
    margin: 0 50px 50px 50px;
}

.events-desc-block {
    margin: 0 50px 50px 0;
    width: calc(25% - 50px);
    height: 120px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.events-list {
    background-color: #151515;
    padding: 50px;
}

.events-list-header {
    color: #E8E8E8;
    font-size: 40px;
    margin: 0px;
    text-align: center;
}

.events-list-header-text {
    color: #E8E8E8;
    font-size: 22px;
    margin-bottom: 50px;
    text-align: center;
}

.events-grid {
    display: grid;
    grid-template-columns: 1fr 1.7fr 0.9fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    height: 600px;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1.7fr 0.9fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 6px;
}



.firstchild {
    grid-column: span 1;
    grid-row: span 1;

}

.secondchild {
    grid-column: span 1;
    grid-row: span 1;
}

.thirdchild {
    grid-column: span 1;
    grid-row: span 2;
}

.fourthchild {
    grid-column: span 2;
    grid-row: span 1;
}

.fivthchild {
    grid-column: span 1;
    grid-row: span 2;

}

.sixthchild {
    grid-column: span 1;
    grid-row: span 1;

}

.seventhchild {
    grid-column: span 1;
    grid-row: span 1;

}

.eightchild {
    grid-column: span 2;
    grid-row: span 1;

}

.event-name {
    width: 100%;
    height: 40px;
    background-color: #E8E8E8;
    text-align: center;
    line-height: 40px;
    font-size: 26px;
    margin-top: -24px;
    position: absolute;
    top: 24px;

}

.event-child:hover div {
    background-color: #6B0401;
    transition: 0.4s linear;
    cursor: pointer;

}

.event-child:hover img {
    transform: scale(1.1);
    transition: 0.4s linear;
}

.event-child:hover {
    cursor: pointer;
}

.event-child a {
    color: #6B0401;
}

.event-child:hover a {
    color: #E8E8E8;
}

.event-child-name {
    line-height: 40px;
    margin: 0;
}

.event-name a {
    color: #151515;
    text-decoration: none;
}

.event-child {
    overflow: hidden;
    position: relative;
    height: 300px;
}

.event-child:nth-child(4n+3) {
    height: 606px;
}

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

.event-child:nth-child(4n+1) {
    grid-column: span 1;
    grid-row: span 1;
}

.event-child:nth-child(4n+2) {
    grid-column: span 1;
    grid-row: span 1;
}

.event-child:nth-child(4n+3) {
    grid-column: span 1;
    grid-row: span 2;
}

.event-child:nth-child(4n+4) {
    grid-column: span 2;
    grid-row: span 1;
}

.events-slider {
    background-color: #151515;
}

.events-slider-block {
    width: 100%;
    height: 450px;

}

.slide {
    display: flex;
    justify-content: center;

}

/* faq */
.faq {
    padding-top: 150px;
    padding-bottom: 50px;
    background-color: #151515;
}

.faq-header {
    color: #E8E8E8;
    font-size: 40px;
    margin: 0px 0px 50px;
    text-align: center;
}

.panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
}

.item-faq-outer {
    width: 100%;
    border: none;
    height: 50px;
    font-size: 26px;
    font-family: garet;
    text-align: left;
    padding: 0px 15px;
    background-color: #B59B7A;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-block {
    padding: 0px 50px;
}

.item-faq-inner {
    padding: 0 15px;
    color: #E8E8E8;
    border: 1px solid #B59B7A;
    font-size: 22px;
}

.faq-img {
    width: 30px;

}

.faq-item {
    margin-bottom: 20px;
}

/* галерея */

.gallery-block {
    background-color: #151515;
    color: #E8E8E8;
    padding: 50px;
}

.gallery-header {
    font-size: 40px;
    text-align: center;
    margin-bottom: 50px;
}

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

/* блог */
.blog {
    padding: 150px 50px 50px;
    background-color: #151515;
}

.blog-header {
    color: #E8E8E8;
    font-size: 40px;
    text-align: center;
    margin: 0px 0px 50px 0px;
}

.blog-masonry {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
}

.blog-card {
    border: 1px solid #B59B7A;
    width: 100%;
    padding: 0px;
    margin: 4px;
    padding-bottom: 20px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blog-card-img {
    width: 100%;
    height: 200px;
    margin-bottom: 15px;
}

.blog-card-name {
    font-size: 24px;
    color: #E8E8E8;
    margin: 0px 20px 0px;
}

.blog-card-text {
    color: #E8E8E8;
    font-size: 18px;
    margin: 0px 15px 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    box-orient: vertical;
}

.read-the-article-link {
    text-decoration: none;
    color: #ebebeb;
}

.read-the-article {
    font-size: 22px;
    margin: 0px 15px;
    border: 1px solid #B59B7A;
    padding: 5px 10px;
    background-color: #B59B7A;
}

.read-the-article-link:hover {
    color: #ebebeb;
    cursor: pointer;
    transition: 0.4s linear;
}

.read-the-article:hover {
    border: 1px solid #6B0401;
    background-color: #6B0401;
    cursor: pointer;
    transition: 0.4s linear;
}

.footer-down-text {
    text-align: center;
}

.mobile-menu {
    display: none;
    position: absolute;
    top: 70px;
    background: #202020;
    width: 100%;
    left: -15px;
    flex-direction: column;
}



.mobile-button {
    display: none;
    background: none;
    width: 50px;
    height: 50px;
    border: none;
    padding: 0;
    margin-right: 20px;
}

.burger {
    width: 50px;
    height: 50px;
    display: inline;
}

.delete {
    width: 50px;
    height: 50px;
    display: none;
}

#mobile {
    display: none;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    margin: 20px;
}

.mobile-buttons-menu {
    margin: 0 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slider-item {
    height: 400px;
    width: auto !important;
}

.inside-page-section {
    padding: 150px 50px 50px;
    background: #151515;
    color: #ebebeb;
}

.inside-page-main-header {
    font-size: 40px;
    text-align: center;
    margin: 0px 0px 10px;
    font-family: DMserif;
}

.inside-page-header {
    font-size: 24px;
    margin: 0px 0px 10px;
}

.inside-page-text {
    font-size: 20px;
    margin: 0px 0px 10px;
}

#menu {
    width: 100vw;
    height: auto;
    padding: 20px 0;
    display: flex;
    visibility: visible;
    opacity: 1;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border-radius: 3px;
    transition: all 300ms ease-in-out;
    position: fixed;
    top: -100vh;
    left: 0px;
    z-index: 10;
}

#menu.active {
    top: 0;
}

#toggle {
    position: relative;
    width: 40px;
    height: 36px;
    left: -20px;
    top: 8px;
    transition: all 300ms ease-in-out;
    z-index: 11;
    display: none;
}

#toggle input {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}

#toggle input:checked+span {
    background: transparent;
    left: 0;
}

#toggle input:checked+span:after {
    transform: rotate(45deg) translate(-1px, -12px);
    left: -7px;
    background: #fff;
}

#toggle input:checked+span:before {
    transform: rotate(-45deg) translate(-4px, 16px);
    left: -7px;
    background: #fff;
}

#toggle .menu-span {
    position: absolute;
    width: 100%;
    height: 2px;
    background: #ebebeb;
    margin-top: 10px;
    transition: all 0.1s;
    left: 0;
}

#toggle .menu-span:before,
#toggle .menu-span:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: #ebebeb;
    top: -12px;
    left: 0;
    transition: all 0.3s;
}

#toggle .menu-span:after {
    top: 12px;
}

.blog-img-div {
    height: 200px;
    width: 100%;
}

.blog-card-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.main-frame-404{
        display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    height: 600px;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-color: #0009;
    background-blend-mode: color;
}
.main-frame-header-404{
        font-size: 140px;
    color: #E8E8E8;
    margin: 0;
}
.main-frame-text-404 {
    padding: 0px 20px 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
}

@media (max-width: 1399px) {
    .video-container {
        margin-right: 30px;
    }

    .video-menu {
        margin-right: 15px;
    }

    .video-frame {
        height: 800px;
    }

    .blog-masonry {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 1099px) {
    .video-frame {
        height: auto;
        flex-direction: column-reverse;
    }

    .video-menu {
        margin: 30px 0 50px;
    }

    .video-ul {
        padding: 0;
    }

    .video-container {
        margin: 150px 0 0;
    }

    .description {
        width: 90%;
    }

    .residence-image {
        display: none;
    }

    .logo-and-desc {
        flex-direction: column;
    }

    .about-desc {
        width: 90%;
    }
}

@media (max-width: 999px) {
    
    .house-header-text{
    font-size: 12px;
    line-height:14px;
    text-align: right;
    padding: 0px 20px 20px;
    margin: 0px;
    color: #ffffff;
}

    .how-to-reach-card {
        width: 80%;

        padding: 15px 20px;

    }

    .how-to-reach-text {
        font-size: 16px;
    }

    .contacts-header-text {

        font-size: 20px;

        margin: 30px auto;
        width: 80%;
    }

    .contacts-header {
        font-size: 35px;
    }

    .contact-inf {
        padding: 0 20px;
        margin-bottom: 30px;

        font-size: 35px;
    }

    .events {
        padding-top: 120px;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }

    .events-header {
        font-size: 35px;
    }

    .events-header-block {
        width: auto;
        margin: 0 20px 30px 20px;
    }

    .events-desc-block {
        margin: 15px 20px 20px 20px;
        width: auto;
        height: auto;
        padding: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

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

    .event-child a img {
        width: 100%;
    }

    .event-child:nth-child(4n+3) {
        height: 300px;
    }
    .dontmiss-buttons{
        flex-wrap:wrap;
    }
    .dontmiss-border-container {
    padding: 30px;
}
.dontmiss {
    padding: 50px 20px;
}
.last-slide{
        padding: 100px 20px 30px;
    gap: 15px;
}
.swiper-slide-header{
        font-size: 30px;
}
.slide-paragraf{
        font-size: 14px;
}
.slide-footer-box{
    font-size:30px;
}
.slide-footer-header{
        margin: 0;
}
.main-frame-text-swipe{
        margin: 0px 70px 66px 20px !important;
}
.main-frame-header-swipe{
        text-align: right;
            font-size: 24px !important;
            line-height:28px !important;
}
.main-frame-paragraph-first{
    text-align: right;
        font-size: 12px !important;
}
}

@media (max-width: 899px) {
    #toggle {
        display: block;
    }

    .menu-nav {
        display: none;
    }

    .events-list {
        background-color: #151515;
        padding: 50px 20px;
    }

    .contacts {
        padding-top: 90px;
    }

    .nav-button-container {
        display: none;
    }
    
/* начало тестовых стилей */
        .nav-button-container-test {
        display: none;
    }
    .phone-link-header {
font-size: 12px;
}
 .phone-icons-mobile{
     display:flex;
 }
.phone-icons{
    width:300px;
    height: 70px;
}
.header-icon-test {
    width: 50px;
    height: 50px;
}
.mobile-container{
    justify-content: right;
}

.image-header-container{
    padding:20px 15px;
}
.download-block{
    flex-wrap:wrap;
}
.download-block-text-block{
    width:100%;
}
.downloaf-block-file-block{
        width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}
.feedback-border-container{
    flex-wrap:wrap;
    gap:30px;
    border:none;
}
.feedback-form-text{
    width:100%;
}
    /* конец тестовых стилей */


.services-item {
    width: 100%;
    flex-direction: column-reverse;
    gap: 10px;
    align-items: center;
    border: none;
    padding:10px;
}
.services-item-label {
    top: -33px;
    left: 10px;
}
.services-item-text-container{
    width:calc(100% - 30px);
}
.services-item-img-container {
    width: 320px;
}
.services-menu-container {
    height: 110px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-direction: column;
    align-items: center;
}
.services-item-name {
    font-size: 20px;
}
.services-item-text {
    font-size: 12px;
}
.services-item-text-container {
    gap: 10px;
}
    .header {
        height: 50px;
    }

    .logo {
        max-width: 100px;
        max-height: 50px;
        margin-top: 5px;
    }

    .mobile-menu {
        display: block;
    }

    .logo {
        margin: 7px 0 0;
    }

    .mobile-button {
        display: inline;
    }

    .nav-button {
        width: 300px;
    }

    .nav-second-button {
        width: 300px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 35px;
    }

    .main-frame-header {
        font-size: 32px;
        line-height: 36px;
    }

    .main-frame-paragraph {
        font-size: 12px;
    line-height: 16px;
    }

    .footer-header a {
        font-size: 30px;
        color: #E8E8E8;
        text-decoration: none;
    }

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

    .footer-down-text {
        font-size: 12px;
    }

    .footer-link {
        font-size: 16px;
    }

    .footer-box {
        flex-direction: column;
        align-items: center;
    }

    .video-list {
        font-size: 16px;
        line-height: 24px;
    }

    .residence-frame-header-text {
        font-size: 35px;
    }

    .description-heading {
        font-size: 20px;
    }

    .description-desc {
        font-size: 16px;
        margin-right: 10px;
    }

    .description-icon {
        max-height: 30px;
        max-width: 60px;
        margin: 7px;
    }

    .description {
        width: 100%;
        margin: 0;
    }

    .residence-description-header {
        font-size: 35px;
    }

    .residence-type-name {
        font-size: 20px;
        text-align: center;
    }

    .residence-description-text {
        font-size: 16px;
    }

    .residence-type-background {
        flex-direction: column-reverse;
        align-items: center;
    }

    .residence-type-description {
        width: 100%;
        padding: 20px 15px 20px;
    }

    .slider-about {
        width: 100%;
    }

    .residence-type-slider {
        padding: 15px 5px 5px;
    }

    .about-header-text {
        font-size: 35px;
    }

    .about-desc {
        font-size: 16px;
    }

    .gallery-header {
        font-size: 35px;
    }

    .gallery-block {
        padding: 20px;
    }

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

    .grid div img {
        width: 100% !important;
    }

    .offers-header {
        font-size: 35px;
        padding-top: 90px;
    }

    .card-bot-text {
        font-size: 20px;
    }

    .offer-desc-button {
        font-size: 20px;
        text-decoration: none;
    }

    .blog {
        padding: 90px 20px 20px;

    }

    .blog-header {
        font-size: 35px;
    }

    .blog-masonry {
        grid-template-columns: 1fr 1fr;
    }


    .blog-card {
        width: 100%;
    }

    .blog-img-div {
        height: 200px;
        width: 100%;
    }

    .faq {
        padding-top: 90px;
    }

    .faq-header {
        font-size: 35px;
        margin: 0px 0px 30px;
    }

    .faq-block {
        padding: 0px 20px;
    }

    .events {
        padding-top: 90px;

    }

    .events-header-text {
        font-size: 16px;
    }

    .events-desc-text {
        font-size: 16px;
    }

    .events-list-header {
        font-size: 35px;
    }

    .events-list-header-text {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .slider-item {
        height: 300px;
    }

    .events-slider-block {
        height: 360px;
    }

    .inside-page-section {
        padding: 80px 20px 20px;
    }

    .inside-page-main-header {
        font-size: 35px;
    }

    .inside-page-header {
        font-size: 20px;
    }

    .inside-page-text {
        font-size: 16px;
    }
    .image-header {
    height: calc(100vw / 2);
justify-content: right;
align-items: flex-end;
}
.house-header{
font-size: 40px !important;
margin: 0px !important;
padding:20px !important;
letter-spacing: 0px;
line-height:10px;
}
.image-header-container{
        margin: 100px 20px 50px;
}
}
@media (max-width: 725px){
    .downloaf-block-file-block{
        justify-content:center;
    }
    
}

@media (max-width: 670px) {
    .pokachto {
        height: 300px;
        width: 100%;
        background-color: #B59B7A;
    }

    .video-container {
        width: 100%;
        margin-top: 100px;
    }

    .video-menu {
        margin: 30px 20px 50px;
    }

    .main-frame-text {
        margin-top: 0;
    }

    .main-frame-vidget {
        margin-top: 80px;
    }

    .blog-masonry {
        grid-template-columns: 1fr;
    }
    
.offers-item-img-container {
    width: 320px;
    justify-content: center;
}
.offers-border-container {
    width: 260px;
    height: 160px;
}
.offers-item-img {
    width: 240px;
    height: 140px;
}
}