@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=EB+Garamond&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');


:root {
    --font-primary: "Rubik", sans-serif;
    --font-secondary: 'Montserrat', sans-serif; /* Montserrat comme police secondaire */
    --color-red: #bea951;
    --color-dark: #000;
    --color-white: #fff;
    --container: 1500px;
}



body {
     background-color: #fff;
     font-family: var(--font-primary);
     margin: 0;
     padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     margin: 0;
}

button {
     border: none;
     outline: none;
     cursor: pointer;
}

.btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     font-size: 24px;
     line-height: 28px;
     font-weight: 700;
     text-decoration: none;
     height: 70px;
     border-radius: 15px;
     padding-inline: 40px;
     transition: 0.3s;
}
@media (max-width: 500px) {
     .btn {
          font-size: 20px;
          padding-inline: 20px;
     }
}
.btn-red {
     color: #fff;
     background-color: var(--color-red);
}
.btn-red:hover {
     background-color: var(--color-dark);
}
.btn-dark {
     color: #fff;
     background-color: var(--color-dark);
}
.btn-dark:hover {
     background-color: var(--color-red);
}
.btn-white {
     color: var(--color-dark);
     background-color: var(--color-white);
}
.btn-white:hover {
     background-color: var(--color-red);
     color: var(--color-white);
}

.btnbox {
     display: flex;
     gap: 20px;
     margin-top: 40px;
}
@media (max-width: 500px) {
     .btnbox {
          justify-content: center;
     }
}

@media (max-width: 500px) {
     .carusel-img {
          height: 400px;
     }
}
.carusel-img {
     max-width: 100%;
     height: 500px;
     border-radius: 30px;
     object-fit: cover;
}
.header {
     max-width: var(--container);
     margin-inline: auto;
     padding-inline: 20px;
}
.header__inner {
     display: flex;
     align-items: center;
     width: 100%;
     height: 100px;
     justify-content: space-between;
}
.header__inner-options {
     display: flex;
     align-items: center;
     gap: 30px;
}
.header__btn {
     background-color: transparent;
     border: none;
     outline: none;
     cursor: pointer;
     color: var(--color-red);
}

.wrapper {
     height: calc(100vh - 100px);
     background-image: url("/assets/img/cover.png");
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     position: relative;
     padding-inline: 20px;
}

@media (max-width: 992px) {
     .wrapper {
          height: auto;
     }
}
.wrapper::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     background-color: rgba(0, 0, 0, 0.5);
     width: 100%;
     height: 100%;
}
.wrapper__inner {
     width: 100%;
     max-width: var(--container);
     position: relative;
     margin-inline: auto;
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 30px;
     align-items: center;
     height: calc(100vh - 100px);
}
@media (max-width: 992px) {
     .wrapper__inner {
          height: auto;
          padding-block: 50px;
          grid-template-columns: 1fr;
          gap: 50px;
     }
     .wrapper__inner-detalic {
          flex-direction: column;
     }
}
.wrapper__inner-text {
     max-width: 690px;
     color: var(--color-white);
}
.wrapper__inner-detalic {
     display: flex;
     gap: 20px;
     margin-top: 30px;
}
.wrapper__inner-detalic-item {
     display: flex;
     align-items: center;
     gap: 20px;
}
.wrapper__inner-detalic-item h6 {
     font-size: 24px;
     font-weight: 600;
     margin-bottom: 5px;
}
.wrapper__inner-detalic-item p {
     font-size: 15px !important;
     margin: 0;
}
.wrapper__inner-text h1 {
     font-size: 50px;
     font-family: var(--font-secondary);
     margin: 0;
}
.wrapper__inner-text p {
     font-size: 20px;
     line-height: 1.5;
}
.wrapper__inner-contacts {
     background-color: rgba(255, 255, 255, 0.8);
     padding: 50px;
     border-radius: 20px;
}
@media (max-width: 992px) {
     .wrapper__inner-text p {
          font-size: 16px;
          line-height: 1.6;
     }
     .wrapper__inner-text h1 {
          font-size: 40px !important;
     }
     .wrapper__inner-contacts {
         background-color: #ededed;
    }
}

.wrapper__inner-contacts h4 {
     font-size: 40px;
     margin: 0;
}

.gallery {
     margin-inline: auto;
     max-width: var(--container);
     padding-block: 150px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 100px;
     padding-inline: 20px;
}
@media (max-width: 992px) {
     .gallery {
          grid-template-columns: 1fr;
     }
}
@media (max-width: 500px) {
     .gallery {
          gap: 20px;
          padding-block: 50px;
     }
}
.gallery h2 {
     font-size: 60px;
     font-weight: 700;
     font-family: var(--font-secondary);
}
@media (max-width: 500px) {
     .gallery h2 {
          font-size: 40px;
     }
}
.gallery p {
     font-size: 19px;
     line-height: 1.5;
}
.gallery__text {
     padding-top: 50px;
}

.service {
     max-width: var(--container);
     margin-inline: auto;
     padding-inline: 20px;
}
.service h2 {
     font-size: 50px;
     font-weight: 700;
     font-family: var(--font-secondary);
     text-align: center;
     margin-bottom: 100px;
}
@media (max-width: 500px) {
     .service h2 {
          font-size: 40px;
          margin-top: 50px;
     }
}
.service__inner {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 30px;
}
@media (max-width: 1200px) {
     .service__inner {
          grid-template-columns: repeat(3, 1fr);
     }
}
@media (max-width: 992px) {
     .service__inner {
          grid-template-columns: repeat(2, 1fr);
     }
}
@media (max-width: 700px) {
     .service__inner {
          grid-template-columns: 1fr;
     }
}
.service__inner-card {
     background-color: #f7f7f7;
     border-radius: 20px;
     padding: 40px;
}
.service__inner-card svg {
     color: var(--color-red);
     width: 70px;
     height: 70px;
}
.service__inner-card h5 {
     font-size: 30px;
     margin-top: 40px;
}

.info {
     max-width: var(--container);
     padding-inline: 20px;
     margin-inline: auto;

}
.info__text {
     text-align: center;
     max-width: 800px;
     margin-inline: auto;
}
.info__text h2 {
     font-size: 50px;
     font-weight: 700;
     font-family: var(--font-secondary);
}
@media (max-width: 500px) {
     .info__text h2 {
          font-size: 40px;
     }
}
.info__text p {
     font-size: 17px;
     line-height: 1.5;
}
.info__text .btnbox {
     justify-content: center;
}
.info__map {
     border-radius: 20px;
     margin-top: 100px;
     overflow: hidden;
}
.info__info {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 50px;
     max-width: 1200px;
     margin-inline: auto;
     margin-top: 100px;
     padding-inline: 20px;
}
@media (max-width: 500px) {
     .info__info {
          grid-template-columns: 1fr;
     }
}
.info__info h2 {
     font-size: 30px;
}
.info__info p {
     font-size: 18px;
     line-height: 1.6;
}

.contacts {
     padding-top: 150px;
     padding-inline: 20px;
}
.contacts__inner {
     width: 100%;
     max-width: 960px;
     margin-inline: auto;
     text-align: center;
     background-color: #000;
     border-radius: 30px;
     display: grid;
     grid-template-columns: minmax(200px, 400px) 1fr;
     grid-template-areas: "contacts-img contacts-form";
     gap: 20px;
     min-height: 500px;
     overflow: hidden;
}
.contacts__inner h2 {
     font-size: 50px;
     font-weight: 700;
     font-family: var(--font-secondary);
}
.contacts__img {
     padding: 20px;
     grid-area: contacts-img;
}
.contacts__img img {
     max-width: 100%;
     border-radius: 20px;
     height: 100%;
     object-fit: cover;
}
.contacts__form {
     padding: 40px;
     color: var(--color-white);
     grid-area: contacts-form;
}
@media (max-width: 500px) {
     .contacts__inner h2 {
          font-size: 40px;
     }
}
@media (max-width: 992px) {
     .contacts__inner {
          grid-template-columns: 1fr;
          grid-template-areas: "contacts-form" "contacts-img";
     }
     .contacts__img img {
         display: none;
     }
}
.footer {
     background-color: var(--color-dark);
     padding-inline: 20px;
     padding-block: 50px;
     margin-top: 150px;
}
.footer h2 {
     font-family: var(--font-secondary);
}
.footer__logo {
     text-align: center;
}
.footer__inner {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     max-width: 920px;
     width: 100%;
     margin-inline: auto;
     padding-top: 50px;
}
@media (max-width: 992px) {
     .footer__inner {
          grid-template-columns: 1fr;
          gap: 40px;
     }
}
.footer__inner h2 {
     color: var(--color-white);
     text-align: center;
}
.footer__menu {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
     margin-top: 30px;
}
.footer__menu-item {
     color: var(--color-white);
     text-decoration: none;
     border-bottom: 1px solid var(--color-white);
     transition: 0.2s;
}
.footer__menu-item:hover {
     opacity: 0.6;
}
.footer__menu span {
     color: #999999;
}
.footer__copy {
     padding-top: 100px;
     max-width: 450px;
     width: 100%;
     margin-inline: auto;
}
.footer__copy-nav {
     display: flex;
     gap: 10px;
     justify-content: center;
}
.footer__copy-nav a {
     color: #999999;
     font-size: 17px;
     text-decoration: none;
}
.footer__copy-nav a:not(:first-child):before {
     content: "•";
     padding-right: 10px;
}
.footer__copy-nav a:hover span {
     text-decoration: underline;
}
.footer__copy-text {
     font-size: 13px;
     text-align: center;
     color: #999999;
     margin-top: 30px;
}

.f-carousel {
     --f-button-width: 30px !important;
     --f-button-height: 30px !important;
     --f-button-svg-width: 15px !important;
     --f-button-svg-height: 15px !important;
     --f-button-svg-stroke-width: 2.5;
     --f-button-color: rgb(71 85 105);
     --f-button-border-radius: 50%;
     --f-button-shadow: 0 6px 12px -2px rgb(50 50 93 / 25%), 0 3px 7px -3px rgb(0 0 0 / 30%);
     --f-button-bg: #fff !important;
     --f-button-hover-bg: #f9f9f9;
     --f-button-active-bg: #f0f0f0;
}

.d-none {
     display: none !important;
}

.modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 2000;
}
.modal-content {
     background-color: white;
     padding: 30px;
     border-radius: 5px;
     width: 100%;
     max-width: 500px;
     border-radius: 20px;
     position: relative;
     animation: scaleAnimation 0.4s ease-in-out;
}
.modal-title {
     font-family: var(--font-secondary);
     font-size: 40px;
}
.modal-form {
     margin-top: 30px;
}

@keyframes scaleAnimation {
     0% {
          transform: scale(0.5);
     }
     100% {
          transform: scale(1);
     }
}
.btn-close {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 50px;
     height: 50px;
     border-radius: 15px;
     color: var(--color-white);
     background-color: var(--color-dark);
     transition: 0.3s;
     position: absolute;
     right: 30px;
     top: 30px;
}
.btn-close:hover {
     background-color: var(--color-red);
}

.aside {
     position: fixed;
     top: 0;
     right: -300px;
     width: 100%;
     max-width: 300px;
     transition: right 0.3s ease;
}
.aside__content {
     position: relative;
     z-index: 100;
     height: 100%;
     background-color: var(--color-dark);
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
     height: 100vh;
     padding: 40px 30px;
     animation: slideFromRight 0.3s forwards;
     color: var(--color-white);
}
.aside__content h4 {
     font-size: 22px;
}
.aside__content-info {
     padding-top: 100px;
}
.aside__content-info nav {
     display: flex;
     flex-direction: column;
     gap: 15px;
}
.aside__content-info nav a {
     width: max-content;
}
.aside__content-info nav span {
     color: #999999;
}
.aside__content-info .btn-white {
     width: 160px !important;
     margin-top: 100px;
}

@keyframes slideFromRight {
     from {
          transform: translateX(100%); /* Начальное положение за пределами видимой области */
     }
     to {
          transform: translateX(0); /* Конечное положение */
     }
}
.aside.open {
     right: 0;
}

.overlay {
     position: fixed;
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 10;
}

.btn-close-offcanvas {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 50px;
     height: 50px;
     border-radius: 15px;
     color: var(--color-dark);
     background-color: var(--color-white);
     transition: 0.3s;
     position: absolute;
     right: 30px;
     top: 30px;
}
.btn-close-offcanvas:hover {
     background-color: var(--color-red);
     color: var(--color-white);
}

/* Dropdown */
.dropdown {
     position: relative;
}
.dropdown-menu {
     position: absolute;
     right: 0;
     width: 150px;
     border-radius: 15px;
     padding: 10px;
     background-color: #fff;
     z-index: 20;
     -webkit-box-shadow: 0px 2px 24px 0px rgba(34, 60, 80, 0.13);
     -moz-box-shadow: 0px 2px 24px 0px rgba(34, 60, 80, 0.13);
     box-shadow: 0px 2px 24px 0px rgba(34, 60, 80, 0.13);
}
.dropdown-list {
     display: flex;
     flex-direction: column;
     gap: 3px;
}
.dropdown-list a {
     display: flex;
     align-items: center;
     gap: 10px;
     height: 50px;
     border-radius: 10px;
     text-decoration: none;
     color: #000;
     font-size: 17px;
     font-weight: 600;
     transition: 0.2s;
     padding-inline: 10px;
}
.dropdown-list a:hover {
     background-color: #f7f7f7;
}
.btn-lang {
     display: flex;
     align-items: center;
     gap: 10px;
     width: auto;
     height: 40px;
     background-color: transparent;
     font-size: 18px;
     font-weight: 600;
}
.img-mobile img {
     max-width: 100%;
}
@media screen and (min-width: 500px) {
     .img-mobile {
          display: none;
     }
}
@media screen and (max-width: 500px) {
     .wrapper {
          background-image: none;
     }
     .wrapper::before {
          background-color: rgba(0, 0, 0, 0);
     }
     .wrapper__inner-text {
          color: #000 !important;
     }
     .header {
          padding-inline: 10px;
     }
     .header__inner-options {
          gap: 5px;
     }
     .header img {
          height: 50px;
     }
}
/* Banner */
.banner {
     padding-inline: 20px;
     margin-inline: auto;
     max-width: var(--container);
     margin-bottom: 100px;
}
.banner__inner {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-areas: "banner-item-1 banner-item-2 banner-item-3" "banner-item-4 banner-item-4 banner-item-4";
     background-color: #000;
     border-radius: 10px;
     overflow: hidden;
     color: var(--color-white);
}
.banner-item-1 {
     grid-area: banner-item-1;

     justify-self: center;
     padding: 30px;
}
.banner-item-1 h2 {
     color: var(--color-red);
}
.banner-item-1 h2,
.banner-item-3 h2 {
     font-size: 40px;
     font-weight: 600;
}
.banner-item-1 p,
.banner-item-3 p {
     margin: 0;
}
.banner-item-2 {
     grid-area: banner-item-2;
     padding: 30px;
     justify-self: center;
}
.banner-item-3 {
     grid-area: banner-item-3;
     padding: 30px;
     justify-self: center;
}
.banner-item-2 p {
     font-size: 20px;
}
.banner-item-4 {
     grid-area: banner-item-4;
     background-color: var(--color-red);
     text-align: center;
     padding-block: 20px;
     color: var(--color-white);
     font-size: 20px;
}
@media screen and (max-width: 992px) {
     .banner__inner {
          grid-template-columns: repeat(2, 1fr);
          grid-template-areas: "banner-item-1 banner-item-3" "banner-item-2 banner-item-2" "banner-item-4 banner-item-4 ";
     }
}
/* fullgallery */
.fullgallery {
     background-color: #000;
     padding-block: 100px;
     margin-bottom: 100px;
     overflow: hidden;

     padding-inline: 30px;
}
.fullgallery h2 {
     font-size: 40px;
     font-weight: 600;
     font-family: var(--font-secondary);
     margin-bottom: 50px;
     text-align: center;
     color: var(--color-white);
}
.gallery-2 {
     --f-carousel-slide-width: calc(100% / 3) !important;
     --f-carousel-spacing: 40px !important;
}

.carusel-img-2 {
     max-width: 100%;
     height: 500px;
     border-radius: 30px;
     object-fit: cover;
}
@media (max-width: 992px) {
     .gallery-2 {
          --f-carousel-slide-width: calc(100% / 2) !important;
          --f-carousel-spacing: 40px !important;
     }
     .carusel-img-2 {
          height: 400px;
     }
}
@media (max-width: 600px) {
     .gallery-2 {
          --f-carousel-slide-width: calc(100% / 2) !important;
          --f-carousel-spacing: 20px !important;
     }
     .carusel-img-2 {
          height: 250px;
     }
}
/* Location */
.location__inner {
     display: grid;
     grid-template-columns: 1fr 1fr;
}
.location__inner__cover {
     position: relative;
}
.location__inner__cover img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}