@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
* {
margin: 0;
padding: 0;
font-family: "TT Norms Pro"; font-weight: 400;
font-style: normal;
line-height: normal;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
} *:focus {
outline: none;
}
html,
body {
height: 100%;
width: 100%;
scroll-behavior: smooth;
}
body {
display: flex;
flex-direction: column;
background-color: var(--gray);
}
main {
flex: auto;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
}
strong {
font-weight: 700;
}
b {
font-weight: 500;
}
img {
width: 100%;
height: auto;
}
svg {
transition: 0.4s all;
}
input,
textarea,
select {
vertical-align: middle;
padding: 0;
box-sizing: border-box;
resize: none;
border: 1px solid #fff;
color: #fff;
background-color: transparent;
}
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
color: #fff;
color: #fff;
font-family: "TT Norms Pro";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 110%;
letter-spacing: -1px;
text-transform: uppercase;
}
textarea:focus::-webkit-input-placeholder,
input:focus::-webkit-input-placeholder {
color: #b9b9b9;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-background-clip: text;
-webkit-text-fill-color: #fff;
transition: background-color 5000s ease-in-out 0s;
box-shadow: inset 0 0 20px 20px transparent;
}
.hover {
transition: opacity 0.4s;
cursor: pointer;
}
.hover:hover {
opacity: 0.5;
}
.container {
display: block;
position: relative;
width: 100%;
padding: 0 20px;
margin: 0 auto;
height: 100%;
}   section { }
:root {
--black: #1e1e1e;
--gray: #2b2b2b;
--white: #fff;
--light-gray: #cfcfcf;
--green: #4b5948;
--light-green: #818a7e;
--f9: #f9f9f9;
}
.section-top {
margin-top: 150px;
}
.svg-sprite {
display: none;
}
.white-btn {
padding: 22px 36px;
background-color: var(--white);
color: var(--black);
font-size: 18px;
font-weight: 400;
line-height: 100%;
letter-spacing: -0.9px;
text-transform: uppercase;
width: max-content;
display: flex;
gap: 7px;
align-items: center;
cursor: pointer;
}
.white-btn:hover svg {
transform: rotate(90deg);
}
.white-btn svg {
transition: 0.4s all;
}
.animate-me {
text-align: justify;
font-size: 48px;
font-weight: 300;
line-height: 100%;
letter-spacing: -2.4px;
will-change: transform, opacity, filter; }
.animate-me-wrap .span-title {
display: inline;
float: left;
transform: translateY(-5px);
}
.animate-me-wrap .span-title span {
display: inline;
}
.span-title {
margin-right: 420px;
}
.span-title,
.span-title span,
.span-title div {
color: var(--light-green);
font-size: 20px;
font-weight: 500;
line-height: 120%;
letter-spacing: -1px;
display: inline-block;
text-transform: uppercase;
display: flex;
gap: 10px;
align-items: center;
}
.span-title span {
display: block;
}   .preloader {
z-index: 200;
position: fixed;
width: 100%;
height: 100vh;
}
.preloader__inner {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.preloader-overlay1 {
background-color: var(--gray);
height: 100%;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
left: -50%;
border-radius: 0 0;
}
.preloader__text-residence--wrap {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
}
.preloader__text-residence {
background: var(--gray);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%); }
.preloader__text-residence > .img {
max-width: 470px;
}
.title-multiple {
overflow: hidden;
height: 490px;
display: flex;
align-items: center;
}
.title-multiple__text {
width: 100%;
height: 580px;
overflow: hidden;
}
.title-multiple__text span {
display: block;
font-size: 470px;
color: var(--white);
}
.title-multiple__text > span > span {
line-height: 1;
}
.title-multiple__text {
display: flex;
gap: 10px;
}
.title-multiple__text span {
font-family: "Playfair Display", serif;
font-weight: 700;
}   .hero {
padding: 140px 40px 40px;
height: 100vh; background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.last-bg-img {
position: absolute;
top: -1px;
left: 0;
width: 100%;
z-index: -1;
height: 100%;
}
.last-bg-img img {
display: block;
height: 100%;
object-fit: cover;
}
.hero__inner {
display: flex;
justify-content: space-between;
height: 100%;
flex-direction: column;
gap: 10px;
padding-bottom: 15px;
}
.hero__inner > div:nth-child(2) {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: flex-start;
}
.hero__inner-left {
display: flex;
flex-direction: column;
gap: 95px;
}
.hero-title span {
color: var(--light-gray);
font-size: 20px;
font-weight: 500;
line-height: 120%;
letter-spacing: -1px;
flex-shrink: 0;
display: inline-block;
transform: translateY(-70px);
}
.hero-title,
.hero-title > div,
.hero-title span.icons {
color: var(--white);
font-size: 128px;
font-weight: 500;
line-height: 93%;
letter-spacing: -8.96px;
text-transform: uppercase;
gap: 10px;
max-width: 1095px;
}
.hero-title span.icons {
font-weight: 400;
display: contents;
}
.hero__inner-right {
width: 480px;
display: flex;
align-items: flex-end;
}
.hero__inner-right--wrap {
padding: 10px 10px 20px;
width: 100%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 120px 10px;
}
.hero .item {
display: flex;
flex-direction: column;
gap: 35px;
padding: 20px;
}
.hero .item a {
display: block;
color: var(--light-gray);
font-size: 18px;
line-height: 100%;
letter-spacing: -0.9px;
}
.hero .item-2 a {
text-decoration-line: underline;
text-underline-offset: 5px;
}
.hero .item-1 {
background-color: var(--green);
}
.hero .item-2 {
background-color: var(--light-green);
}
.hero .item-3 {
grid-column: span 2;
display: flex;
align-items: end;
gap: 40px;
justify-content: space-between;
padding: 0 10px;
}
.item-3 svg {
transition: 0.4s all;
transform: rotate(-90deg);
}
.item-3:hover svg {
transform: rotate(-180deg);
}
.item-bottom_title {
color: var(--light-gray);
font-size: 18px;
font-weight: 400;
line-height: 100%;
letter-spacing: -0.9px;
text-transform: uppercase;
}
.item-bottom_description {
font-size: 24px;
font-weight: 400;
line-height: 100%;
letter-spacing: -1.2px;
text-transform: uppercase;
display: flex;
align-items: end;
gap: 2px;
}
.item-bottom_description span {
display: block;
width: 55px;
height: 1px;
background-color: var(--white);
}
.hero .item-title {
color: var(--white);
font-size: 18px;
line-height: 100%;
letter-spacing: -0.9px;
text-transform: uppercase;
} .concept .num {
color: #818a7e;
font-family: "TT Norms Pro";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 110%; letter-spacing: -1px;
transition: 0.5s all;
}
.concept-item:hover .num {
color: var(--white);
}
.concept-title {
margin-top: 40px;
color: var(--f9);
font-size: 64px;
font-weight: 400;
line-height: 100%;
letter-spacing: -1.408px;
}
.concept-descr {
margin-top: 20px;
color: var(--f9);
font-size: 24px;
font-weight: 400;
line-height: 120%;
letter-spacing: -0.456px;
}
.concept #faq-arrow {
width: 50px;
height: 50px;
}
.concept .text {
color: var(--light-gray);
text-align: right;
font-size: 18px;
font-weight: 400;
line-height: 100%;
letter-spacing: -0.9px;
text-transform: uppercase;
}
.concept .inst {
color: var(--white);
font-size: 24px;
font-weight: 400;
line-height: 100%;
letter-spacing: -1.2px;
}
.concept-item .container {
display: flex;
justify-content: space-between;
}
.concept-item--wrap {
margin-top: 80px;
border-top: 1px solid var(--white);
}
.concept-item {
position: relative;
display: block;
padding: 50px 0;
border-bottom: 1px solid var(--white);
transition: 0.4s all;
}
.overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--light-green);
transform: scaleY(0);
transform-origin: bottom;
z-index: 0;
}
.concept-item svg {
width: 52px;
height: 52px;
}
.concept-item:hover svg {
transform: rotate(90deg);
}
.concept-item__bottom {
display: flex;
flex-direction: column;
gap: 120px;
align-items: flex-end;
justify-content: space-between;
}
.hover-img {
position: fixed;
top: 0;
left: 0;
width: 750px;
height: 560px;
background-size: cover;
background-position: center;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%);
z-index: 100;
}  .galery {
position: relative;
width: 100%;
}
.galery-wrap {
height: 100vh;
}
.galery-item {
display: flex;
gap: 170px;
height: 100%;
overflow: hidden;
}
.galery-item__left { position: relative;
width: 50%;
flex-shrink: 0;
}
.galery .skip {
position: absolute;
right: 20px;
top: 20px;
z-index: 5;
}
.galery-item--wrap {
height: 100%;
}
.galery-item__img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0;
z-index: 0;
transition: 0.5s all;
}
.galery-item__img.active {
position: relative;
opacity: 1;
z-index: 1;
}
.galery-item__img img {
height: 100%;
object-fit: cover;
object-position: center;
}
.galery .count {
position: absolute;
bottom: 30px;
left: 20px;
font-size: 24px;
font-weight: 400;
line-height: 100%;
letter-spacing: -1.2px;
text-transform: uppercase;
z-index: 5;
}
.galery-item__right {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
padding-right: 120px;
}
.reverce .galery-item {
flex-direction: row-reverse;
}
.galery-title {
position: absolute;
top: 50%;
bottom: 50%;
transform: translateY(-35px);
font-size: 128px;
font-style: normal;
font-weight: 400;
line-height: 110%;
letter-spacing: -6.4px;
z-index: 5;
}
.galery-item__right-el {
height: 100%;
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.galery-item__right-el .img { position: absolute;
width: 375px;
height: 375px;
flex-shrink: 0;
aspect-ratio: 1/1;
}
.galery-item__right-el .img img {
height: 100%;
object-fit: cover;
object-position: center;
}  .siam-wrapper--top {
overflow: hidden;
}
.siam-wrapp__pin {
display: flex;
width: 100%;
height: 100vh; }
.siam-wrapp__pin > .siam {
flex: 0 0 99.5vw;
height: 100vh;
}
.siam {
height: 100vh;
}
.siam-wrapp__pin {
display: flex;
}
.siam-wrap {
height: 100vh;
display: flex;
padding: 30px 0;
overflow: hidden;
justify-content: space-between;
gap: 20px;
align-items: center;
}
.siam-wrap > div {
flex: 1;
}
.siam-title,
.siam-title span {
color: var(--white);
font-size: 64px;
font-weight: 400;
line-height: 150%;
letter-spacing: -3.2px;
text-transform: uppercase;
}
.siam-title span {
color: var(--light-green);
}
.siam-list {
margin-top: 50px;
display: flex;
flex-direction: column;
gap: 20px;
}
.siam-left img {
padding: 0 20px;
}
.siam-list .line {
display: block;
height: 1px;
width: 100%;
background-color: #d9d9d9;
}
.siam-list__item {
display: flex;
gap: 20px;
justify-content: space-between;
}
.siam-list__item .left {
color: var(--light-gray);
font-size: 18px;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.9px;
text-transform: uppercase;
flex-shrink: 0;
}
.siam-list__item .right {
color: var(--white);
font-size: 24px;
font-weight: 400;
line-height: 150%;
letter-spacing: -1.2px;
text-align: end;
}
.siam-bottom {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.green-btn {
padding: 22px 36px;
display: flex;
align-items: center;
gap: 7px;
background: #4c5948;
font-size: 18px;
font-weight: 400;
line-height: 100%;
letter-spacing: -0.9px;
text-transform: uppercase;
}
.siam-bottom_social {
display: flex;
align-items: center;
gap: 10px;
}
.green-btn.light {
background: var(--light-green);
}  .residence__wrap {
margin-top: 50px;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.residence-item:nth-child(1) {
border-left: 1px dashed var(--white);
}
.residence-item {
display: flex;
flex-direction: column;
gap: 190px;
padding: 40px;
border: 1px dashed var(--white);
border-left: none;
}
.residence-item .top {
width: 60px;
height: 60px;
}
.residence-item .bottom {
max-width: 290px;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 110%;
letter-spacing: -0.456px;
text-transform: uppercase;
}  .presentation {
width: 100%;
margin-top: 124px;
min-height: 1700px;
position: relative;
background-image: url(//siamresidence.asia/wp-content/themes/siam/assets/images/presentation.webp);
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
}
.presentation__inner,
.residence__wrap {
overflow: hidden;
}
.presentation-bg {
position: absolute;
bottom: 0;
z-index: 0;
}
.presentation__inner {
display: flex;
flex-direction: column;
gap: 115px;
max-width: 1380px;
}
.presentation-text {
display: flex;
flex-direction: column;
gap: 40px;
}
.presentation-text p {
text-align: justify;
font-family: "TT Norms Pro";
font-size: 24px;
font-weight: 400;
line-height: 120%;
letter-spacing: -1.2px;
}
.presentation-row {
display: grid;
grid-template-columns: 920px auto;
gap: 20px;
}
.presentation-row .presentation-item:nth-child(1) {
display: flex;
gap: 60px;
align-items: center;
}
.presentation-row .presentation-item:nth-child(2) {
display: flex;
flex-direction: column;
align-items: end;
justify-content: space-between;
}
.presentation-btn__wrap {
display: flex;
gap: 10px;
}
.presentation-title,
.presentation-title span {
text-align: justify;
font-size: 61px;
font-weight: 400;
line-height: 110%;
letter-spacing: -1.22px;
text-transform: uppercase;
}
.presentation-title span {
font-weight: 500;
}
.presentation-item .arrow svg {
width: 250px;
height: 242px;
flex-shrink: 0;
aspect-ratio: 94/91;
transition: 0.6s all;
}
.presentation-item.hover:hover svg {
transform: rotate(90deg);
} .gradient {
position: relative;
}
.gradient section {
position: relative;
z-index: 2;
}
.cloud {
position: absolute;
height: 100%;
pointer-events: none;
z-index: 1;
}
.gradient {
--c1: #2b2b2b;
--c2: #2b2b2b;
--c3: #2b2b2b;
--c4: #2b2b2b;
--c5: #2b2b2b;
background: linear-gradient(
180deg,
var(--c1) 0%,
var(--c2) 36.64%,
var(--c3) 55.81%,
var(--c4) 69.67%,
var(--c5) 78.51%
);
} .lifestyle {
position: relative;
height: 100vh;
}
.lifestyle--content {
height: 100%;
overflow: hidden;
justify-content: space-between;
}
.lifestyle .span-title {
transform: none;
}
.lifestyle-relative {
position: relative;
overflow: hidden;
}
.lifestyle-relative.lifestyle-title__wrap {
height: 65px;
}
.lifestyle-relative.lifestyle-text__wrap {
height: 90px;
}
.lifestyle-relative.lifestyle-link__wrap {
height: 58px;
}
.lifestyle-relative > div,
.lifestyle-link {
position: absolute;
overflow: hidden;
top: 0;
z-index: 2;
transition: 0.4s all;
}
.lifestyle-relative > div.active,
.lifestyle-relative > a.active {
position: relative;
z-index: 1;
}
.lifestyle--content {
display: flex;
justify-content: space-between;
align-items: center;
}
.lifestyle-title {
font-size: 64px;
font-weight: 400;
line-height: 100%;
letter-spacing: -1.408px;
text-transform: uppercase;
}
.lifestyle--item.left {
width: 505px;
}
.lifestyle-text__wrap {
margin-top: 20px;
}
.lifestyle-text {
font-size: 24px;
font-weight: 400;
line-height: 110%;
letter-spacing: -0.456px;
}
.lifestyle-link__wrap {
margin-top: 48px;
}
.lifestyle--circle {
position: relative;
width: 600px;
height: 600px;
flex-shrink: 0;
border-radius: 600px;
overflow: hidden;
flex: 1;
display: flex;
justify-content: center;
}
.lifestyle--item.center {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.lifestyle--circle__inner {
position: relative;
}
.lifestyle--content-line {
content: "";
position: absolute;
scale: 0;
width: 60vw;
bottom: 0vh;
left: -6vh;
transform: translateX(-8%);
rotate: 135.5deg;
background: #fff;
height: 4px;
z-index: 1;
transition: 1s all;
}
.lifestyle--content-line.active {
scale: 1;
opacity: 1;
}
.lifestyle--content-line.activs {
opacity: 1;
}
.lifestyle--content-line::before {
content: "";
position: absolute;
top: 50%;
z-index: 4;
transform: translateY(-20px) translateX(-20px);
display: block;
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 100%;
}
.lifestyle--item.right {
position: relative;
width: 405px;
height: 95px;
}
.lifestyle-count {
position: absolute;
color: var(--white);
font-weight: 400;
line-height: 100%;
font-size: 96px;
letter-spacing: -2.112px;
text-transform: uppercase;
}
.lifestyle--circle img {
left: 0;
top: 0;
position: absolute;
display: block;
height: 100%;
object-fit: cover;
object-position: center;
} .lifestyle--circle {
position: relative;
width: 600px;
height: 600px;
border-radius: 50%;
overflow: hidden;
}
.img-wrapper {
position: absolute;
inset: 0;
width: 600px;
height: 600px;
} .dark-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
pointer-events: none;
}
.img-wrapper:nth-child(1) image {
opacity: 0 !important;
}
.lifestyle--circle image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1;
}
.lifestyle svg {  }  .video {
position: relative;
z-index: 10;
}
.video--container {
position: relative;
width: 100%;
height: 100vh;
}
.video--container .img {
width: 100%;
height: 100%;
}
.video--container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}  .map {
margin-top: -200px;
}
.map--wrap {
margin-top: 70px;
background-image: url(//siamresidence.asia/wp-content/themes/siam/assets/images/map.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.map--wrap_content {
margin-top: 20px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.map--wrap-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.map--wrap-row:nth-child(2) {
justify-items: end;
}
.map--wrap-item {
width: 50%;
padding: 40px;
border: 1px dashed var(--white);
background: rgba(43, 43, 43, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.map--wrap-item .icon {
width: 60px;
height: 60px;
aspect-ratio: 1/1;
margin-bottom: 60px;
}
.map-title {
font-size: 24px;
font-weight: 400;
line-height: 110%;
letter-spacing: -0.456px;
text-transform: uppercase;
}
.map-text {
margin-top: 20px;
font-size: 24px;
font-weight: 400;
line-height: 110%; letter-spacing: -0.456px;
}  .ourproject--inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.ourproject-left {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.ourproject--title {
margin-top: 20px;
font-size: 123px;
font-weight: 400;
line-height: 100%;
letter-spacing: -2.706px;
text-transform: uppercase;
}
.ourproject--text {
margin-top: 20px;
font-size: 32px;
font-weight: 300;
line-height: 100%;
letter-spacing: -0.608px;
}
.ourproject-left__bottom {
width: 189px;
}
.ourproject-right {
display: flex;
align-items: end;
}
.ourproject-right p,
.ourproject-right p span {
font-size: 32px;
font-weight: 300;
line-height: 100%;
letter-spacing: -0.608px;
}
.ourproject-right p span {
font-weight: 500;
}  .villas--inner {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.villas--inner > div {
display: flex;
flex-direction: column;
gap: 20px;
}
.villas__title {
font-size: 64px;
font-weight: 400;
line-height: 100%;
letter-spacing: -1.408px;
text-transform: uppercase;
}
.villas-text {
text-align: justify;
font-size: 24px;
font-weight: 400;
line-height: 120%;
letter-spacing: -0.48px;
}  .faq--inner {
margin-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.faq-item {
padding: 50px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.faq-top_title {
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 150%; letter-spacing: -0.608px;
text-transform: uppercase;
}
.f-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.f-bottom {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 0.3s;
}
.f-bottom span {
display: block;
height: 29px;
}
.active .f-bottom {
grid-template-rows: 1fr;
}
.f-bottom > div {
min-height: 0;
font-size: 24px;
font-weight: 400;
line-height: 120%;
letter-spacing: -0.456px;
padding-right: 70px;
max-width: 1500px;
}
.faq-item svg {
transition: 0.4s all;
transform: rotate(180deg);
}
.faq-item.active svg {
transform: rotate(0deg);
}  .footer {
background-image: url(//siamresidence.asia/wp-content/themes/siam/assets/images/footer-bg.webp);
background-repeat: no-repeat;
background-position: top;
background-size: cover;
}
.footer__inner {
padding-top: 580px;
display: grid;
}
.footer--top {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.input {
background-color: transparent;
border: none;
display: block;
width: 100%;
padding-bottom: 15px;
border-bottom: 1px solid var(--white);
border-radius: 0 !important;
font-family: "TT Norms Pro";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 110%; letter-spacing: -1px;
text-transform: uppercase;
}
.input--wrap {
display: flex;
flex-direction: column;
gap: 50px;
width: 100%;
margin-bottom: 30px;
}
.input--wrap p {
display: flex;
flex-direction: column;
gap: 50px;
width: 100%;
}
.input--wrap p br {
display: none;
}
.forms {
max-width: 600px;
display: flex;
width: 100%;
flex-direction: column;
align-items: end;
}
.footer--center {
margin-top: 230px;
display: flex;
gap: 20px;
justify-content: space-between;
}
.footer--center svg {
transform: rotate(-90deg) translateX(116px);
}
.footer-contact {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
}
.footer-contact__top {
display: flex;
flex-direction: column;
gap: 31px;
}
.footer-contact__item > p {
color: #cfcfcf;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 100%; letter-spacing: -0.9px;
text-transform: uppercase;
}
.footer-contact__item a {
color: #fff;
font-size: 24px;
font-weight: 400;
line-height: 100%;
letter-spacing: -1.2px;
}
.footer-contact__item > div,
.footer-contact__item a {
display: flex;
gap: 3px;
align-items: end;
}
.footer-contact__item span {
display: block;
width: 57px;
height: 1px;
background: var(--white);
}
.footer-contact__bottom {
display: flex;
gap: 10px;
}
.footer--bottom {
margin-top: 10px;
padding: 10px 0 70px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #fff;
}
.footer--bottom p,
.footer--bottom a {
display: flex;
gap: 5px;
align-items: center;
font-size: 20px;
font-weight: 400;
line-height: 120%; letter-spacing: -0.38px;
}
.footer--bottom img {
display: block;
}  .burger-menu {
display: none;
}
.header {
padding-top: 40px;
position: absolute;
top: 0;
width: 100%;
max-height: 180px;
z-index: 20;
}
.heade-menu {
display: flex;
align-items: flex-start;
justify-content: space-between;
position: relative;
}
.heade-menu > .logo {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.heade-menu ul {
display: flex;
gap: 20px;
align-items: center;
}
.heade-menu ul li {
position: relative;
display: flex;
justify-content: center;
}
.heade-menu ul li::before {
content: "";
height: 3px;
background-color: #fff;
position: absolute;
top: -40px;
width: 0;
opacity: 0;
transition: 0.5s all;
}
.heade-menu ul li:hover::before {
width: 100%;
opacity: 1;
}
.heade-menu ul li a,
.translate *,
.translate {
display: block;
height: 100%;
color: #fff;
text-align: right;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.304px;
text-transform: uppercase;
}
.header .logo {
width: 159px;
}
.header-left {
display: flex;
align-items: center;
gap: 40px;
}
.translate {
display: flex;
gap: 2px;
align-items: center;
}
.translate:hover img {
transform: rotate(90deg);
}
.translate img {
display: block;
transition: 0.3s all;
width: 10px;
height: 10px;
}  .pop_up {
position: fixed;
z-index: -1;
top: -100vh;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: rgb(0 0 0 / 30%);
overflow: hidden;
opacity: 0;
transition: 0.5s all;
}
.pop_up.modal_active {
opacity: 1;
z-index: 10;
top: 0;
}
.pop-up_container {
background-color: var(--dark-blue);
padding: 0 20px;
width: 100%;
max-width: 910px;
position: relative;
display: flex;
justify-content: center;
background: rgba(43, 43, 43, 0.5);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
transition: all 0.4s;
}
.pop-up_content {
padding: 80px;
width: 100%;
display: flex;
justify-content: center;
}
.close-pop_up {
position: absolute;
right: 40px;
top: 40px;
cursor: pointer;
transition: 0.5s;
}
.close-pop_up:hover {
transform: rotate(180deg);
}
.pop_up .footer-form__btn:hover {
opacity: 0.8;
background-color: var(--white);
}
.pop_up .footer-form__btn:hover span {
color: var(--black);
}
div#wpcf7-f54-o1 {
width: 100%;
display: flex;
justify-content: center;
}
.pop-up_container form {
max-width: 650px;
}
.pop-up_title {
color: #f9f9f9;
text-align: center;
font-size: 64px;
font-weight: 400;
line-height: 100%;
letter-spacing: -1.408px;
text-transform: uppercase;
}
.questions-l {
display: flex;
flex-direction: column;
align-items: center;
gap: 60px;
max-width: 600px;
} .lifestyle--circle {
position: relative;
width: 600px; height: 600px;
}
.lifestyle--circle svg {
width: 100%;
height: 100%;
}
.mobail--gallery {
display: none;
}
.lifestyle--content-line {
position: fixed; left: 50%; top: 50%; transform-origin: left center;
pointer-events: none;
will-change: transform, width;
}
.lifestyle {
overflow: hidden;
max-width: 100vw;
} .lifestyle--content-line { opacity: 0;
}
.form-btn {
display: flex;
justify-content: end;
}
.form-btn p {
display: flex;
gap: 5px;
align-items: center;
}
.form-btn p * {
color: #1e1e1e;
font-size: 18px;
font-weight: 400;
line-height: 100%; letter-spacing: -0.9px;
text-transform: uppercase;
}
.trp-shortcode-switcher {
overflow: visible !important;
}
.trp-shortcode-arrow {
display: none !important;
}
.trp-current-language-item__wrapper,
.trp-shortcode-switcher {
padding: 0px !important;
}
.trp-language-item {
padding: 2px 10px 0 !important;
min-height: 8px;
}
header .trp-language-item-name {
padding-top: 2px;
font-family: "TT Norms Pro";
color: #fff;
font-size: 16px;
font-weight: 400;
letter-spacing: -0.304px;
text-transform: uppercase;
}
.wpcf7-form,
.wpcf7 {
width: 100%;
}
.galery-wrap .span-title {
margin-bottom: 20px;
}
.reverce .span-title {
margin-right: 0;
text-align: right;
justify-content: flex-end;
}
.lifestyle--content-line-svg {
pointer-events: none;
-webkit-transform: translateZ(0); backface-visibility: hidden;
}