@media screen and (max-width: 1540px) {
.hero-title,
.hero-title > div,
.hero-title span.icons {
color: var(--white);
font-size: 118px;
font-weight: 500;
line-height: 93%;
letter-spacing: -8.96px;
text-transform: uppercase;
gap: 10px;
max-width: 1121px;
}
.hero {
padding: 140px 0px 40px;
}
.item-bottom_description {
font-size: 20px;
}
.reverce .galery-title {
transform: translateX(15px);
}
.galery-title {
font-size: 120px;
}
.siam-title,
.siam-title span {
font-size: 52px;
}
.lifestyle--content-line {
content: "";
position: absolute;
scale: 0;
width: 70vw;
bottom: 0vh;
left: -18vh;
transform: translateX(-8%);
rotate: 135.5deg;
background: #fff;
height: 4px;
z-index: 3;
transition: 1s all;
}
.ourproject--title {
margin-top: 20px;
font-size: 90px;
}
.span-title,
.span-title span,
.span-title div {
color: var(--light-green);
font-size: 20px;
font-weight: 500;
width: max-content;
}
.ourproject-right p,
.ourproject-right p span {
font-size: 25px;
}
.ourproject--text {
margin-top: 20px;
font-size: 28px;
}
.footer--center {
gap: 40px;
}
}
@media screen and (max-width: 1440px) {
.hero-title,
.hero-title > div,
.hero-title span.icons {
color: var(--white);
font-size: 104px;
line-height: 93%;
letter-spacing: -8.96px;
gap: 10px;
max-width: 985px;
}
.villas-text {
text-align: justify;
font-size: 20px;
}
.faq-top_title {
font-size: 28px;
}
.siam-list__item .right,
.siam-list__item .left,
.lifestyle-text,
.map-text,
.ourproject-right p,
.ourproject-right p span,
.f-bottom > div {
font-size: 20px;
}
.ourproject--text {
margin-top: 20px;
font-size: 24px;
}
.item-3-r svg {
width: 45px;
height: 45px;
}
.reverce .galery-item__right {
padding-right: 0;
padding-left: 20px;
}
.presentation-title,
.presentation-title span {
text-align: justify;
font-size: 48px;
}
.presentation-row {
display: grid;
grid-template-columns: 700px auto;
gap: 60px;
}
.presentation-item .arrow svg {
width: 208px; flex-shrink: 0;
}
.lifestyle--content-line {
scale: 0;
width: 77vw;
bottom: 0vh;
left: -31vh;
transform: translateX(-8%);
rotate: 135.5deg;
}
.lifestyle--item.right {
position: relative;
width: 33%;
height: 95px;
}
.lifestyle-count {
left: 50px;
}
.map {
margin-top: -250px;
}
.map--wrap-item .icon {
width: 60px;
height: 60px;
margin-bottom: 35px;
}
}
@media screen and (max-width: 1370px) {
.heade-menu ul {
display: flex;
gap: 14px;
align-items: center;
}
.header-left {
display: flex;
align-items: center;
gap: 20px;
}
.header .logo {
width: 140px;
}
.header {
padding-top: 30px;
position: absolute;
top: 0;
width: 100%;
max-height: 180px;
}
.heade-menu ul li::before {
top: -30px;
}
.animate-me {
text-align: justify;
font-size: 34px;
}
.section-top {
margin-top: 110px;
}
.concept-title {
margin-top: 40px;
color: var(--f9);
font-size: 48px;
}
.galery-title {
font-size: 96px;
}
.reverce .galery-item__right {
padding-right: 60px;
}
.reverce .galery-title {
transform: translateY(-35px);
}
.lifestyle--content-line {
scale: 0;
width: 68vw;
bottom: 0vh;
left: -19vh;
transform: translateX(-8%);
rotate: 135.5deg;
}
.lifestyle-title {
font-size: 56px;
text-transform: uppercase;
}
.lifestyle-text {
font-size: 22px;
font-weight: 400;
line-height: 110%;
letter-spacing: -0.456px;
}
.lifestyle-count {
font-size: 80px;
}
.span-title {
margin-right: 220px;
}
.ourproject--title {
font-size: 80px;
}
.ourproject-left__bottom {
width: 170px;
}
.faq-item {
padding: 40px 0;
}
.faq-top_title {
font-size: 30px;
}
.faq-item svg {
width: 40px;
height: 40px;
}
.f-bottom > div {
min-height: 0;
font-size: 22px;
max-width: 1200px;
}
.f-bottom span {
height: 20px;
} }
@media screen and (max-width: 1280px) {
.title-multiple__text span {
display: block;
font-size: 270px;
color: var(--white);
}
.title-multiple {
overflow: hidden;
height: 270px;
display: flex;
align-items: center;
}
.title-multiple__text {
width: 100%;
height: 100%;
overflow: hidden;
}
.hero-title,
.hero-title > div,
.hero-title span.icons {
color: var(--white);
font-size: 84px;
max-width: 630px;
}
.hero-title span {
color: var(--light-gray);
font-size: 20px;
transform: translateY(-41px);
}
.hover-img {
width: 450px;
height: 360px;
}
.concept-item {
padding: 40px 0;
}
.concept-descr {
margin-top: 20px;
font-size: 20px;
}
.concept-item__bottom {
gap: 60px;
}
.concept-item svg {
width: 42px;
height: 42px;
}
.siam-list {
margin-top: 40px;
gap: 15px;
}
.green-btn,
.white-btn {
padding: 18px 30px;
font-size: 16px;
}
.residence-item {
gap: 120px;
padding: 30px;
}
.span-title,
.span-title span,
.span-title div {
font-size: 18px;
}
.animate-me-wrap .span-title {
transform: translateY(0px);
}
.animate-me {
font-size: 28px;
}
.residence-item .bottom {
font-size: 20px;
}
.hero__inner {
gap: 35px;
}
.hero__inner-right--wrap {
padding: 10px 10px 20px;
gap: 65px 10px;
}
.siam-title,
.siam-title span {
font-size: 40px;
}
.siam-list__item .right {
font-size: 18px;
max-width: 300px;
}
.presentation-title,
.presentation-title span {
font-size: 40px;
}
.presentation-item .arrow svg {
width: 153px;
flex-shrink: 0;
}
.lifestyle-text {
font-size: 20px;
}
.lifestyle-title {
font-size: 40px;
}
.lifestyle-relative.lifestyle-title__wrap {
height: 40px;
}
.lifestyle-link__wrap {
margin-top: 20px;
}
.lifestyle--content-line {
scale: 0;
width: 68vw;
bottom: 0vh;
left: -18vh;
transform: translateX(-8%);
rotate: 135.5deg;
}
.lifestyle-count {
font-size: 68px;
left: 95px;
}
.map--wrap-item {
width: 50%;
padding: 20px;
}
.map--wrap-item .icon {
width: 50px;
height: 50px;
margin-bottom: 25px;
}
.map-text {
margin-top: 20px;
font-size: 20px;
}
.map-title {
font-size: 20px;
}
.villas__title {
font-size: 40px;
}
.villas-text {
font-size: 20px;
}
.footer--center svg {
transform: rotate(-90deg) translateX(116px);
flex-shrink: 0;
width: 140px;
height: 150px;
}
.footer-contact {
gap: 30px;
}
}
@media screen and (max-width: 1200px) {
.ourproject--title {
font-size: 50px;
}
.villas-text,
.ourproject-right p,
.ourproject-right p span {
font-size: 18px;
}
.ourproject--text {
margin-top: 20px;
font-size: 20px;
}
.ourproject-right p,
.ourproject-right p span {
font-size: 20px;
}
.heade-menu ul li a,
.translate *,
.translate {
font-size: 14px;
}
.concept-title {
margin-top: 20px;
color: var(--f9);
font-size: 26px;
}
.concept-item {
padding: 25px 0;
}
.concept-descr {
margin-top: 20px;
font-size: 18px;
}
.presentation-row {
display: grid;
grid-template-columns: 530px auto;
gap: 20px;
}
.presentation-title,
.presentation-title span {
font-size: 32px;
}
.presentation-item .arrow svg {
width: 117px;
height: auto;
flex-shrink: 0;
}
.presentation {
margin-top: 124px;
min-height: 1460px;
background-image: url(//siamresidence.asia/wp-content/themes/siam/assets/images/presentation.webp);
}
.presentation-text p {
font-size: 20px;
}
.lifestyle-count {
font-size: 54px;
left: 95px;
}
.lifestyle--content-line {
scale: 0;
width: 70vw;
bottom: 0vh;
left: -20vh;
transform: translateX(-8%);
rotate: 135.5deg;
}
.footer-contact__item a {
color: #fff;
font-size: 20px;
font-weight: 400;
line-height: 100%;
letter-spacing: -1.2px;
}
.input--wrap {
display: flex;
flex-direction: column;
gap: 30px;
width: 100%;
margin-bottom: 30px;
}
.forms {
max-width: 400px;
display: flex;
width: 100%;
flex-direction: column;
align-items: end;
}
.input,
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
padding-bottom: 12px;
font-size: 16px;
}
.footer-contact__top {
display: flex;
flex-direction: column;
gap: 18px;
}
.footer__inner {
padding-top: 345px;
}
.faq-top_title {
font-size: 20px;
}
.faq-item {
padding: 20px 0;
}
.f-bottom > div {
min-height: 0;
font-size: 18px;
max-width: 1200px;
}
.faq-item svg {
width: 26px;
height: 26px;
}
.footer--bottom p,
.footer--bottom a {
display: flex;
gap: 5px;
align-items: center;
font-size: 16px;
}
.footer--bottom a span {
display: block;
width: 45px;
}
.header {
padding-top: 10px;
position: absolute;
max-height: 180px;
}
.header .logo {
width: 100px;
}
.burger-menu > div {
display: flex;
gap: 30px;
align-items: center;
}
.heade-menu ul li a,
.translate *,
.translate {
font-size: 16px;
}
.menu {
display: block;
background-color: transparent;
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 5;
}
.header * {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
} .menu svg {
width: 43px;
height: 43px;
}
.heade-menu * {
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.header {
top: 0;
padding-top: 10px;
position: fixed;
max-height: 180px;
background: linear-gradient(
353deg,
rgba(43, 43, 43, 0) 5.17%,
#2b2b2b 94.58%
);
}
.burger-menu {
display: block;
background-color: transparent;
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
position: relative;
z-index: 5;
}
.line {
fill: none;
stroke: #fff;
stroke-width: 3;
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
stroke-dasharray: 60 207;
stroke-width: 6;
}
.line2 {
stroke-dasharray: 60 75;
stroke-width: 6;
stroke-dashoffset: -134;
border-radius: 40px;
}
.line3 {
stroke-dasharray: 60 207;
stroke-width: 6;
}
.opened .line1 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6;
}
.opened .line2 {
stroke-dasharray: 1 60;
stroke-dashoffset: -90;
stroke-width: 6;
}
.opened .line3 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6;
}
.heade-menu ul {
gap: 0px;
}
.heade-menu.burger {
position: fixed;
top: 0;
left: -100vw;
width: 100vw;
height: 100vh;
padding: 0 10px;
padding-bottom: 100px;
z-index: 2;
transition: all 0.4s;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
background-color: #2b2b2b;
gap: 0px;
padding-top: 80px;
}
.heade-menu {
counter-reset: menu-counter; }
.heade-menu ul li::before {
counter-increment: menu-counter; content: counter(menu-counter, decimal-leading-zero); display: block;
position: static;
width: auto;
opacity: 1;
transition: 0.5s all;
background: none;
color: #fff;
font-family: "TT Norms Pro";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.228px;
text-transform: uppercase;
}
.heade-menu ul li {
position: relative;
display: flex;
justify-content: space-between;
}
.heade-menu ul li:hover::before {
width: auto;
transition: none;
}
.heade-menu > .logo,
.burger .translate {
display: none;
}
.heade-menu.burger.active {
left: 0;
}
.heade-menu.burger ul {
flex-direction: column;
justify-content: start;
width: 100%;
}
.heade-menu.burger ul li {
width: 100%;
padding: 12px 0;
border-bottom: 0.5px solid #fff;
}
.hero .item-title {
color: var(--white);
font-size: 16px;
}
.item-bottom_description {
font-size: 18px;
}
.item-3-r svg {
width: 40px;
height: 40px;
}
.hero {
padding: 90px 0px 40px;
height: 100vh; }
.green-btn,
.white-btn {
padding: 20px 16px;
font-size: 14px;
}
.siam-list__item .left {
color: var(--light-gray);
font-size: 16px;
}
.siam-list {
margin-top: 40px;
gap: 10px;
}
.white-btn svg {
width: 10px;
height: 10px;
}
.footer-contact__item > p {
font-size: 16px;
font-weight: 400;
line-height: 100%;
}
.galery-title {
font-size: 78px;
}
.reverce .galery-title {
transform: translateY(-35px);
}
.reverce .galery-item__right {
padding-right: 0px;
padding-left: 50px;
}
.residence-item .bottom {
font-size: 18px;
}
.residence-item .top {
width: 50px;
height: 50px;
}
.residence-item {
gap: 90px;
padding: 20px;
}
.lifestyle--item.left {
width: 345px;
}
.lifestyle--circle {
width: 400px;
height: 400px;
}
.lifestyle--content-line::before {
transform: translateY(-14px) translateX(-11px);
width: 30px;
height: 30px;
}
.lifestyle--content-line {
scale: 0;
width: 89vw;
bottom: 0vh;
left: -43vh;
transform: translateX(-10%);
rotate: 136.2deg;
}
.lifestyle--item.right {
height: 40px;
}
.lifestyle-text {
font-size: 18px;
}
.lifestyle-title {
font-size: 30px;
}
.map {
margin-top: -240px;
}
.map-title {
font-size: 18px;
}
.map-text {
margin-top: 10px;
font-size: 18px;
}
.map--wrap-item .icon {
width: 40px;
height: 40px;
margin-bottom: 40px;
}
.footer--center svg {
transform: rotate(-90deg) translateX(116px);
flex-shrink: 0;
width: 120px;
height: auto;
}
}
@media screen and (max-width: 1024px) {
.map-text {
margin-top: 10px;
font-size: 16px;
}
.ourproject-right p,
.ourproject-right p span {
font-size: 16px;
}
.ourproject--text {
font-size: 18px;
}
.villas-text,
.ourproject-right p,
.ourproject-right p span {
font-size: 16px;
}
}
@media screen and (max-width: 840px) {
section.galery {
display: none;
}
.title-multiple__text span {
font-size: 170px;
}
.title-multiple {
height: 170px;
}
.mobail--gallery {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
gap: 40px;
}
.swiper-pagination.swiper-pagination-fraction.swiper-pagination-horizontal {
display: flex;
position: relative;
z-index: 5;
padding-left: 50px;
gap: 5px;
align-items: center;
transform: translateY(-20px);
}
.swiper-pagination.swiper-pagination-fraction.swiper-pagination-horizontal,
.swiper-pagination.swiper-pagination-fraction.swiper-pagination-horizontal * {
color: #fff;
leading-trim: both;
text-edge: cap;
font-family: "TT Norms Pro";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%; letter-spacing: -0.7px;
text-transform: uppercase;
}
.gallery-mob__wrap {
margin-top: 22px;
position: relative;
}
.gallery-mob--title {
color: #fff;
font-size: 70px;
font-weight: 400;
line-height: 110%; letter-spacing: -3.5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 6;
}
.siam-wrap {
height: auto;
display: flex;
justify-content: space-between;
gap: 20px;
align-items: stretch;
flex-direction: column;
}
.siam-wrap > div {
text-align: center;
}
.siam-wrap > div img {
max-width: 540px;
}
.siam-wrapp__pin {
display: flex;
gap: 60px;
flex-direction: column;
height: auto;
}
.siam-wrapp__pin > .siam {
height: auto;
}
.siam-title,
.siam-title span {
text-align: start;
font-size: 20px;
line-height: 150%; letter-spacing: -1px;
text-transform: uppercase;
}
.siam-list {
margin-top: 10px;
}
.siam-list__item .right {
max-width: 400px;
text-align: right;
font-size: 14px;
font-weight: 400;
line-height: 150%; letter-spacing: -0.7px;
}
.residence-item .top {
width: 40px;
height: 40px;
}
.residence-item {
gap: 40px;
}
.residence-item .bottom {
font-size: 14px;
}
.gallery-mob--title {
pointer-events: none;
user-select: none;
}
.residence-item {
gap: 60px;
}
.presentation-title,
.presentation-title span {
font-size: 28px;
}
}
@media screen and (max-width: 800px) {
.hero-title,
.hero-title > div,
.hero-title span.icons {
font-size: 50px;
font-weight: 500;
line-height: 93%;
letter-spacing: -2.1px;
width: 100%;
max-width: 450px;
}
.gradient {
overflow: hidden;
}
.cloud {
top: 40px;
position: absolute;
height: 150vh;
pointer-events: none;
z-index: 1;
}
.hero { }
.hero__inner > div:nth-child(2) {
flex-direction: column;
}
.hero-title span {
color: var(--light-gray);
font-size: 14px;
transform: translateY(-12px);
padding-right: 10px;
font-weight: 500;
line-height: 120%; letter-spacing: -0.7px;
}
.hero__inner > div:nth-child(2) {
flex-direction: column;
}
.hero .item a {
font-size: 16px;
}
.item-bottom_title {
color: var(--light-gray);
font-size: 14px;
}
.hero .item {
gap: 20px;
padding: 10px;
}
.hero__inner-right--wrap {
padding: 10px 10px 20px;
gap: 40px 10px;
}
.hero__inner-right {
width: 100%;
max-width: 350px;
display: flex;
align-items: flex-end;
}
.item-bottom_description {
flex-shrink: 0;
width: max-content;
}
.item-bottom_description span {
display: block;
width: 40px;
height: 1px;
background-color: var(--white);
}
.hero .item-3 {
grid-column: span 2;
display: flex;
align-items: end;
gap: 10px;
justify-content: space-between;
padding: 0 10px;
}
.section-top {
margin-top: 80px;
}
.animate-me,
.concept-title {
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: 100%; letter-spacing: -1px;
}
.span-title,
.span-title span,
.span-title div,
.concept .inst {
font-size: 16px;
}
.concept .num,
.concept-descr,
.concept .text {
font-size: 14px;
}
.concept-item--wrap {
margin-top: 24px;
border-top: 1px solid var(--white);
}
.concept-item svg {
width: 32px;
height: 32px;
}
.concept-item__bottom {
gap: 32px;
}
.concept-title {
margin-top: 15px;
}
.concept-descr {
margin-top: 10px;
}
.concept-item {
padding: 15px 0;
}
.concept-item {
display: flex;
position: relative;
flex-direction: column-reverse;
gap: 15px;
}
.concept-item__img {
width: 100%;
height: auto;
overflow: hidden;
}
.concept-item__img img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.residence__wrap {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.presentation-row {
display: block;
}
.presentation {
margin-top: 30px;
min-height: 150vh;
}
.presentation-text p {
text-align: justify;
font-size: 14px;
font-weight: 400;
line-height: 120%; letter-spacing: -0.7px;
}
.presentation-text {
display: flex;
flex-direction: column;
gap: 20px;
}
.presentation__inner {
gap: 30px;
max-width: 1380px;
}
.presentation-row:nth-child(2) .presentation-item:nth-child(1),
.presentation-row:nth-child(2) .presentation-item:nth-child(2) {
gap: 30px;
max-width: 450px;
}
.presentation-btn__wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 100%;
}
.presentation-item {
margin-top: 20px;
}
.presentation-item a {
width: 100%;
justify-content: center;
}
.presentation-item.first {
display: none !important;
}
.lifestyle--content {
display: flex;
padding-bottom: 40px;
align-items: center;
flex-direction: column;
gap: 5px;
}
.gallery-mob .span-title {
padding: 0 20px;
}
.lifestyle--item.right {
display: flex;
position: relative;
width: 230px;
height: 40px;
justify-content: center;
align-items: center;
}
.lifestyle--item.left {
width: 100%;
}
.lifestyle-text {
font-size: 14px;
}
.lifestyle {
height: 100vh;
}
.lifestyle-title {
font-size: 20px;
}
.lifestyle > .container {
padding-top: 90px;
}
.lifestyle-count {
font-size: 32px;
left: 95px;
}
.lifestyle-relative.lifestyle-text__wrap {
height: 50px;
}
.lifestyle-relative.lifestyle-title__wrap {
height: 20px;
}
.lifestyle--item.left {
margin-top: 20px;
}
.lifestyle-text__wrap {
margin-top: 10px;
}
.lifestyle-link__wrap {
margin-top: 5px;
}
.lifestyle--circle {
width: 300px;
height: 300px;
}
.lifestyle--item.center {
height: 300px;
}
.map {
margin-top: -220px;
}
.map--wrap-row {
display: block;
grid-template-columns: repeat(2, 1fr);
}
.map--wrap-row:nth-child(1) .map--wrap-item:nth-child(1) {
border-top: 1px dashed var(--white);
}
.map--wrap-item {
width: 100%;
padding: 20px;
border-top: none;
}
.span-title {
margin-right: 190px;
}
.ourproject--inner {
display: flex;
flex-direction: column;
gap: 20px;
}
.ourproject--title {
font-size: 20px;
}
.ourproject-left__bottom {
margin-top: 20px;
width: 80px;
}
.ourproject-right p,
.ourproject-right p span {
font-size: 16px;
line-height: 100%;
letter-spacing: -0.266px;
}
.villas--inner {
display: flex;
gap: 40px;
flex-direction: column;
}
.villas--inner > div {
gap: 10px;
}
.villas__title {
font-size: 20px;
}
.villas-text {
text-align: justify;
font-size: 16px;
line-height: 120%; letter-spacing: -0.28px;
}
.faq-top_title {
font-size: 16px;
}
.f-bottom span {
height: 10px;
}
.f-bottom > div {
min-height: 0;
font-size: 16px;
}
.faq-item svg {
width: 30px;
height: 30px;
}
.footer--top {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 40px;
}
.forms {
max-width: none;
display: flex;
width: 100%;
flex-direction: column;
align-items: end;
}
.footer--center {
margin-top: 40px;
}
.footer--center svg {
transform: rotate(-90deg) translateX(0px);
flex-shrink: 0;
width: 70px;
height: auto;
}
.footer-contact__top {
display: flex;
flex-direction: column;
gap: 30px;
}
.form-btn .white-btn {
padding: 20px 16px;
font-size: 14px;
width: 162px;
justify-content: center;
}
.footer__inner {
padding-top: 150px;
}
.lifestyle--content-line {
scale: 0;
width: 86vw;
bottom: 38px;
left: -50vh;
transform: translateX(-6px);
rotate: 154.7deg;
}
.lifestyle--item.center {
position: relative;
}
.lifestyle--content-line::before {
transform: translateY(-14px) translateX(-10px);
width: 30px;
height: 30px;
}
.pop-up_title {
margin-top: 20px;
font-size: 20px;
}
.pop-up_container {
margin: 0 20px;
padding: 0;
}
.pop-up_content {
padding: 20px;
width: 100%;
}
.close-pop_up {
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
transition: 0.5s;
}
.close-pop_up svg {
width: 20px;
height: 20px;
}
.questions-l {
width: 100%;
} .lifestyle--content-line {
position: fixed; left: 50%; top: 50%; transform-origin: left center; pointer-events: none;
will-change: transform, width;
margin-top: 76px;
}
.lifestyle--content {
padding-top: 0;
}
.header {
background: none;
}
.footer--center {
gap: 30px;
}
.heade-menu ul li a {
font-size: 24px;
}
}
@media screen and (max-width: 600px) {
.siam-list__item .left {
font-size: 14px;
}
.hero-title,
.hero-title > div,
.hero-title span.icons {
font-size: 30px;
width: 100%;
max-width: none;
}
.residence-item .bottom {
font-size: 16px;
}
.residence-item {
gap: 40px;
}
.lifestyle--content-line {
left: 50%;
top: 50%; transform-origin: left center;
-webkit-transform-origin: left center;
will-change: transform, opacity;
z-index: 4; }
.lifestyle--content-line {
-webkit-transform: translateZ(0); will-change: transform, opacity;
}
.lifestyle {
position: relative; }
.presentation-title,
.presentation-title span {
font-size: 20px;
}
.hero__inner-right {
width: 100%;
max-width: none;
}
.siam-bottom {
flex-direction: column;
gap: 10px;
}
.siam-bottom_social {
width: 100%;
}
.siam-bottom_social a {
flex: 1;
justify-content: center;
}
.presentation-row:nth-child(2) .presentation-item:nth-child(1) {
gap: 13px;
}
.presentation-item .arrow svg {
width: 70px;
height: auto;
flex-shrink: 0;
}
.wpcf7 {
width: 100%;
}
.footer-contact__bottom a {
flex: 1;
justify-content: center;
}
.siam-bottom .white-btn,
.presentation-item .white-btn {
width: 100%;
justify-content: center;
}
.presentation-row:nth-child(2) .presentation-item:nth-child(1),
.presentation-row:nth-child(2) .presentation-item:nth-child(2) {
gap: 10px;
max-width: none;
}
.ourproject-right p,
.ourproject-right p span {
font-size: 14px;
line-height: 100%;
letter-spacing: -0.266px;
}
.title-multiple__text span {
font-size: 90px;
}
.title-multiple {
height: 90px;
}
.map {
margin-top: -40px;
}
.siam-list__item > div {
flex: 1;
}
.siam-list__item .left {
text-align: start;
}
.footer-contact__item > p {
font-size: 14px;
}
.footer-contact__item a {
font-size: 16px;
}
.f-bottom > div {
min-height: 0;
font-size: 14px;
}
.villas-text {
text-align: justify;
font-size: 14px;
line-height: 120%; letter-spacing: -0.28px;
}
.footer--bottom {
margin-top: 20px;
padding: 20px 0 40px;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 10px;
justify-content: space-between;
}
.residence__wrap {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(1, 1fr);
}
.residence-item {
display: flex;
flex-direction: column;
border: 1px dashed var(--white);
border-left: 1px dashed var(--white);
}
.concept-item__bottom {
flex-shrink: 0;
}
.preloader__text-residence > .img {
padding: 0 20px;
}
.cloud {
position: absolute;
height: 150vh;
pointer-events: none;
z-index: 1;
}
.cloud img {
height: 100%;
object-fit: cover;
object-position: center;
}
.input--wrap p {
gap: 30px;
}
.preloader-overlay1,
.preloader__text-residence--wrap {
padding-bottom: 90px;
}
.presentation {
margin-top: 30px;
min-height: 100vh;
}
}
@media screen and (max-width: 500px) {
.hero__inner-right {
width: 100%;
max-width: none;
display: flex;
align-items: flex-end;
} .siam-bottom {
margin-top: 20px;
display: flex;
align-items: stretch;
justify-content: space-between;
flex-direction: column;
gap: 10px;
}
.siam-bottom a {
width: 100%;
display: flex;
justify-content: center;
}
.lifestyle--content {
display: flex;
align-items: center;
flex-direction: column;
gap: 20px;
height: 100%;
justify-content: space-between;
padding-bottom: 100px;
}
.lifestyle--content-line {
margin-top: 74px;
}
.gradien {
overflow: hidden;
}
section {
position: relative;
z-index: 5;
}
.lifestyle--content-line.active {
z-index: 4;
}
.concept .span-title {
display: flex;
flex-wrap: wrap;
gap: 5px;
width: 100%;
}
.concept .span-title div {
width: 96%;
}
.concept .span-title div:nth-child(3) {
justify-content: end;
}
.concept .span-title span {
display: contents;
}
.presentation {
position: relative;
background-image: url(//siamresidence.asia/wp-content/themes/siam/assets/images/mob-bg.webp);
background-repeat: no-repeat;
background-position: bottom center;
background-size: contain;
}
.f-bottom > div {
padding-right: 0;
}
}