/* inter-100 - greek_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Inter'; font-style: normal; font-weight: 100; src: url('./fonts/inter-v18-greek_latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-200 - greek_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Inter'; font-style: normal; font-weight: 200; src: url('./fonts/inter-v18-greek_latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-300 - greek_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Inter'; font-style: normal; font-weight: 300; src: url('./fonts/inter-v18-greek_latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-regular - greek_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Inter'; font-style: normal; font-weight: 400; src: url('./fonts/inter-v18-greek_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-500 - greek_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Inter'; font-style: normal; font-weight: 500; src: url('./fonts/inter-v18-greek_latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-600 - greek_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Inter'; font-style: normal; font-weight: 600; src: url('./fonts/inter-v18-greek_latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-700 - greek_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Inter'; font-style: normal; font-weight: 700; src: url('./fonts/inter-v18-greek_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-800 - greek_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Inter'; font-style: normal; font-weight: 800; src: url('./fonts/inter-v18-greek_latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-900 - greek_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Inter'; font-style: normal; font-weight: 900; src: url('./fonts/inter-v18-greek_latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } *{margin: 0px;padding: 0px;box-sizing: border-box;} html, body{width: 100%;position: relative;margin: 0px;padding: 0px;background-color: var(--main-color);font-family: 'Inter';} :root{--main-color:#A1412B;--text-color:#CBC3BB;--black-color:#000;--white-color:#fff;} /*All pages code starts*/ .pagewrap{width: 100%;position: relative;padding: 0px 20px;} .pagewrap-inside{width: 100%;position: relative;padding: 0px 20px;} p{font-size: 14px;font-weight: 300;line-height: 20px;} .text-20px{font-size: 20px;line-height: 24px;color: var(--text-color);font-weight: 700;} .text-16px{font-size: 16px;line-height: 20px;color: var(--text-color);font-weight: 300;} .section-title{width: 100%;position: relative;text-align: center;color: var(--text-color);} .button{max-width: 100%;width: auto;font-size: 14px;color: var(--text-color);line-height: 20px;} .button:hover{opacity: 0.7;} .no-scroll{overflow: hidden;} .grid-4-elements{width: 100%;position: relative;display: grid;grid-template-columns: repeat(4,1fr);gap: 20px;} .grid-3-elements{width: 100%;position: relative;display: grid;grid-template-columns: repeat(3,1fr);gap: 20px;} .grid-2-elements{width: 100%;position: relative;display: grid;grid-template-columns: repeat(2,1fr);gap: 20px;} /*All pages code ends*/ /*Availability code starts*/ .availability-section{position:relative;z-index: 10000;} .availability-section .desktop-version{position:fixed;bottom: 50px;right: 20px;z-index: 1000;} .availability-section.active .desktop-version{top: 20px;bottom: 0px;} .availability-section .desktop-version .availability-toggle{border: 1px solid var(--text-color);padding: 12px 20px;border-radius: 100px;font-size: 14px;color: var(--text-color);font-weight: 300;box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, .15);cursor: pointer;background-color: var(--main-color);transition: 0.5s ease;} .availability-section .desktop-version .availability-toggle:hover{border: 1px solid rgba(200, 195, 187, 0.3);transition: 0.5s ease;} .availability-section .desktop-version .availability-toggle:nth-child(2){display: none;flex-direction: column;justify-content: center;align-items: center;position: relative;width: 42px;height: 42px;} .availability-section .desktop-version .availability-toggle:nth-child(2) span:nth-child(1){width: 30px;height: 1px;transform: rotate(45deg);position: absolute;background-color: var(--text-color);} .availability-section .desktop-version .availability-toggle:nth-child(2) span:nth-child(2){width: 30px;height: 1px;transform: rotate(-45deg);position: absolute;background-color: var(--text-color);} .availability-section .desktop-version .availability-toggle:nth-child(1).active{display: none;} .availability-section .desktop-version .availability-toggle:nth-child(2).active{display: flex;background-color: var(--main-color);} #overlay-availability{width: 100%;height: 0vh;opacity: 0;visibility: hidden;position: fixed;top: 0px;left: 0px;background-color: var(--text-color);transition: 0.7s ease;overflow: auto;padding: 200px 0px 0px 0px;} #overlay-availability .availability-elements{width: 100%;height: auto;position: relative;} #overlay-availability .availability-elements .pagewrap{width: 100%;height: 100%;position: relative;} #overlay-availability .availability-elements .pagewrap .flex-elements{max-width: 1220px;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: start;align-items: center;gap: 60px;margin: auto;} #overlay-availability .availability-elements .pagewrap .flex-elements .element-top{width: 100%;text-align: center;padding-bottom: 70px;} #overlay-availability .availability-elements .pagewrap .flex-elements .element-top, #overlay-availability .availability-elements .pagewrap .flex-elements .element-bottom{width: 100%;} #overlay-availability .availability-elements .pagewrap .flex-elements .element-top p{color: var(--main-color);font-weight: 300;} #overlay-availability .ff-default .ff-el-input--label label{font-size: 14px;line-height: 20px;color: var(--main-color);} #overlay-availability .ff-el-form-check-label{color: var(--main-color);font-size: 12px;line-height: 20px;font-weight: 300;} form.fluent_form_4 .ff-btn-submit:not(.ff_btn_no_style){width: 178px!important;max-width: 100%;height: 42px!important;border: 1px solid var(--main-color)!important;font-size: 12px!important;color: var(--main-color)!important;background-color: var(--text-color)!important;border-radius: 0px!important;} form.fluent_form_4 .ff-btn-submit:not(.ff_btn_no_style):hover{opacity: 0.7!important;background-color: var(--text-color)!important;} #overlay-availability .fluentform{position: relative;} #overlay-availability .fluentform .ff-el-group:nth-child(9){position: absolute;width: 55%;padding-top: 9px;} #overlay-availability .fluentform .ff-el-group:nth-child(9) span{color: var(--main-color);font-size: 12px;font-weight: 300;} @media screen and (max-width: 600px) and (min-width:200px){ #overlay-availability .fluentform .ff-el-group:nth-child(9){position: relative;width: 100%;padding-top: 0px;} } #overlay-availability .ff-default .ff-el-form-control{border-top: 0px!important;border-right: 0px!important;border-bottom: 1px solid var(--main-color)!important;border-left: 0px!important;} #overlay-availability.open{height: 100vh;opacity: 1;visibility: visible;transition: 0.7s ease;overflow: auto;} #overlay-availability .logo-element{width: 100%;display: flex;justify-content: center;align-items: center;position: fixed;top: 22px;} .availability-section .mobile-version{display: none;position: fixed;bottom: 50px;right: 20px;z-index: 1000;} .availability-section.active .mobile-version{top: 20px;bottom: 0px;} .availability-section .mobile-version .availability-toggle{width: 42px;height: 42px;display: flex;flex-direction: column;justify-content: center;align-items: center;border: 1px solid var(--text-color);border-radius: 100px;} .availability-section .mobile-version .availability-toggle:nth-child(2){display: none;flex-direction: column;justify-content: center;align-items: center;position: relative;width: 42px;height: 42px;background-color: var(--main-color);} .availability-section .mobile-version .availability-toggle:nth-child(2) span:nth-child(1){width: 30px;height: 1px;transform: rotate(45deg);position: absolute;background-color: var(--text-color);} .availability-section .mobile-version .availability-toggle:nth-child(2) span:nth-child(2){width: 30px;height: 1px;transform: rotate(-45deg);position: absolute;background-color: var(--text-color);} .availability-section .mobile-version .availability-toggle:nth-child(1).active{display: none;} .availability-section .mobile-version .availability-toggle:nth-child(2).active{display: flex;} .page-id-7 .availability-section{display: none;} @media screen and (max-width:768px) and (min-width:200px){ #overlay-availability{padding: 120px 0px 0px 0px;} #overlay-availability .availability-elements .pagewrap .flex-elements{justify-content: start;} #overlay-availability .availability-elements .pagewrap .flex-elements .element-top{padding-bottom: 35px;} #overlay-availability .availability-elements .element-bottom{padding-bottom: 40px;} } @media screen and (max-width:570px) and (min-width:200px){ .availability-section .desktop-version{display: none;} .availability-section .mobile-version{display: flex;} } /*Availability code starts*/ /*Header code starts*/ #header{width: 100%;position:fixed;top: 0px;padding: 20px 0px;z-index: 1001;} #header-overlay{display: none;width: 100%;position:fixed;top: 0px;padding: 20px 0px;z-index: 1001;} #header .grid-element-left .button-menu{cursor: pointer;} #header .grid-element-center{text-align: center;position: relative;} #header .grid-element-center img{max-width: 180px;} #header .grid-element-right{margin: 0px 0px 0px auto;} #header .grid-element-right a{text-decoration: none;} #header .grid-element-right a:hover{opacity: 0.7;} #header-overlay .grid-element-left .button-menu{cursor: pointer;} #header-overlay .grid-element-center{text-align: center;position: relative;color: var(--main-color);} #header-overlay .grid-element-center img{max-width: 180px;} #header-overlay .grid-element-right{margin: 0px 0px 0px auto;} #header-overlay .grid-element-right a{text-decoration: none;color: var(--main-color);} #header-overlay .grid-element-right a p{color: var(--main-color);} #header-overlay .grid-element-right a:hover{opacity: 0.7;} .page-id-9 #header .grid-element-center{scale: 3;top: 36vh;} #header .grid-element-left .button-menu-noactive{display: block;cursor: pointer;} #header-overlay .grid-element-left .button-menu-noactive{display: block;cursor: pointer;} #header-overlay .grid-element-left .button-menu-noactive .text-20px{color: var(--main-color);} @media screen and (max-width:600px) and (min-width:390px){ .page-id-9 #header .grid-element-center{scale: 2;} } @media screen and (max-width:389px) and (min-width:200px){ .page-id-9 #header .grid-element-center{scale: 1.4;} } @media screen and (max-width:500px) and (min-width:200px){ #header .text-20px{font-size: 16px;} #header-overlay .text-20px{font-size: 16px;} } /*Homepage code starts*/ .landing-section {width: 100%;position: relative;z-index: 100;background-color: var(--main-color);overflow: hidden;} .landing-section .landing-section-elements {width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: end;align-items: center;gap: 20px;position: relative;} #logo-container img {max-width: 323px;will-change: transform;} .landing-section .landing-text{color: var(--text-color);max-width: 400px;text-align: center;will-change: transform, opacity;} .landing-section .landing-text p div{display: inline-block;white-space: nowrap;} .landing-split div{transform: translateY(20px);transition: tranform .5s;opacity: 0;} .landing-section .scroll-text p{color: var(--text-color);} #logo-container.sticky {position: fixed;top: 35px;left: 50%;transform: translateX(-50%);z-index: 1000;} #logo-container.sticky img{max-width: 180px;} .landing-section .video-element{width: 20%;height: 20%;} .landing-section .video-element video{width: 100%;height: 100%;object-fit: cover;} .scroll-text{position: fixed;bottom: 61px;} @media screen and (max-width:622px) and (min-width:200px){ .landing-section .landing-text{padding-top: 150px;} } #homepage .about-section{width: 100%;position: relative;padding: 20vh 0px 100px 0px;height: 200vh;background-color: var(--main-color);z-index: 2;} #homepage .about-section-desktop{width: 100%;position: relative;} #homepage .about-section-desktop .pagewrap{width: 100%;height: auto;position: sticky;top: 0px;padding: 20vh 20px 100px 20px;z-index: 5;} #homepage .about-section-desktop .pagewrap .about-elements-content{width: 100%;height: 100%;position: relative;z-index: 10;max-width: 630px;margin: auto;} #homepage .about-section-desktop .pagewrap .about-elements-content .section-title{padding-bottom: 80px;} #homepage .about-section-desktop .about-text-elements .about-element-1{max-width: 287px;color: var(--text-color);} #homepage .about-section-desktop .about-text-elements .about-element-2{max-width: 287px;margin: 0px 0px 0px auto;padding-top: 50px;color: var(--text-color);} #homepage .about-section-desktop .about-text-elements .about-element-3{max-width: 287px;margin: 0px 0px 0px auto;padding-top: 50px;color: var(--text-color);} #homepage .about-section-desktop .about-images-elements{padding-top: 50vh;position: relative;width: 100%;display: flex;height: 100vh;z-index: 3;} #homepage .about-section-desktop .grid__img{width: 100%;text-align: center;z-index: -1;opacity: 1;} #homepage .about-section-desktop .grid__img img{width: 50%;height: auto;object-fit: cover;} #homepage .about-section-mobile{display: none;width: 100%;position: sticky;top: 0px;padding: 20vh 0px 0px 0px;} #homepage .about-section-mobile .about-elements-content{max-width: 620px;margin: auto;} #homepage .about-section-mobile .about-elements-content .about-text-elements .section-title{padding-bottom: 60px;} #homepage .about-section-mobile .about-elements-content .about-text-elements .about-element-1, #homepage .about-section-mobile .about-elements-content .about-text-elements .about-element-2, #homepage .about-section-mobile .about-elements-content .about-text-elements .about-element-3{max-width: 287px;color: var(--text-color);} #homepage .about-section-mobile .about-elements-content .about-text-elements .about-element-2, #homepage .about-section-mobile .about-elements-content .about-text-elements .about-element-3{margin: 0px 0px 0px auto;padding-top: 50px;} #homepage .about-section-mobile .about-images-elements-mobile{width: 100%;position: relative;display: grid;grid-template-columns: repeat(2,1fr);gap: 20px;justify-content: end;align-items: end;padding-top: 100px;overflow-x: hidden;} #homepage .about-section-mobile .about-images-elements-mobile .grid__img__mob{width: 100%;position: relative;} #homepage .about-section-mobile .about-images-elements-mobile .grid__img__mob img{width: 100%;height: 100%;object-fit: cover;} #homepage .big-villa-image-section{width: 100%;height: 100vh;position: sticky;z-index: 3;top: 0px;} #homepage .big-villa-image-section img{width: 100%;height: 100%;object-fit: cover;} #homepage .villas-section{width: 100%;height: 200vh;position: relative;padding: 0px 0px 100px 0px;z-index: 3;background-color: var(--main-color);} #homepage .villas-section .villas-section-desktop{width: 100%;position: sticky;top: 0px;padding-top: 20vh;} #homepage .villas-section .villas-section-desktop .villas-text-elements{width: 100%;max-width: 630px;margin: auto;position: relative;z-index: 2;} #homepage .villas-section .villas-section-desktop .villas-text-elements .section-title{padding-bottom: 80px;} #homepage .villas-section .villas-section-desktop .villas-text-elements .villas-elements{display: flex;gap: 20px;} #homepage .villas-section .villas-section-desktop .villas-text-elements .villas-element-1, #homepage .villas-section .villas-section-desktop .villas-text-elements .villas-element-2{max-width: 287px;color: var(--text-color);} #homepage .villas-section .villas-section-desktop .villas-text-elements .villas-element-2{display: flex;flex-direction: column;} #homepage .villas-section .villas-section-desktop .villas-text-elements .villas-element-2 a{padding-top: 60px;} #homepage .villas-section .villas-section-desktop .villas-images-elements{max-width: 1640px;margin: auto;padding: 100px 0px 0px 0px;} #homepage .villas-section .villas-section-desktop .villas-images-elements .grid-elements{display: grid;grid-template-columns: 0.2fr 0.3fr 0.2fr 0.5fr;gap: 20px;} #homepage .villas-section .villas-section-desktop .villas-images-elements .grid-elements .grid__img{width: 100%;margin: auto 0px 0px 0px;z-index: 2;display: flex;} #homepage .villas-section .villas-section-desktop .villas-images-elements .grid-elements .grid__img img{width: 100%;height: auto;object-fit: cover;} #homepage .villas-section .villas-section-desktop .villas-images-elements .grid-elements .grid__img:nth-child(1){height: 10vw;} #homepage .villas-section .villas-section-desktop .villas-images-elements .grid-elements .grid__img:nth-child(2){height: 15vw;} #homepage .villas-section .villas-section-desktop .villas-images-elements .grid-elements .grid__img:nth-child(3){height: 22vw;} #homepage .villas-section .villas-section-desktop .villas-images-elements .grid-elements .grid__img:nth-child(4){height: 25vw;} #homepage .villas-section .villas-section-mobile{width: 100%;position: sticky;top: 0px;padding-top: 20vh;display: none;} #homepage .villas-section .villas-section-mobile .villas-text-elements .section-title{padding-bottom: 80px;} #homepage .villas-section .villas-section-mobile .villas-text-elements .villas-element-1, #homepage .villas-section .villas-section-mobile .villas-text-elements .villas-element-2, #homepage .villas-section .villas-section-mobile .villas-text-elements .villas-element-3{max-width: 287px;color: var(--text-color);} #homepage .villas-section .villas-section-mobile .villas-text-elements .villas-element-2, #homepage .villas-section .villas-section-mobile .villas-text-elements .villas-element-3{margin: 0px 0px 0px auto;padding-top: 50px;} #homepage .villas-section .villas-section-mobile .villas-images-elements-mobile{padding-top: 100px;} #homepage .villas-section .villas-section-mobile .villas-images-elements-mobile .grid-elements{width: 100%;position: relative;display: grid;grid-template-columns: repeat(2,1fr);gap: 20px;justify-content: end;align-items: end;overflow-x: hidden;} #homepage .villas-section .villas-section-mobile .villas-images-elements-mobile .grid-elements .grid__img__mob{width: 100%;position: relative;} #homepage .villas-section .villas-section-mobile .villas-images-elements-mobile .grid-elements .grid__img__mob img{width: 100%;height: 100%;object-fit: cover;} #homepage .big-location-image-section{width: 100%;height: 100vh;position: sticky;z-index: 3;top: 0px;} #homepage .big-location-image-section img{width: 100%;height: 100%;object-fit: cover;} #homepage .location-section{width: 100%;height: 200vh;position: relative;padding-bottom: 100px;z-index: 4;background-color: var(--main-color);} #homepage .location-section .location-section-desktop{width: 100%;position: sticky;top: 0px;padding-top: 20vh;} #homepage .location-section .location-section-desktop .pagewrap{height: 70vh;} #homepage .location-section .location-section-desktop .location-grid{width: 100%;height: 100%;position: relative;display: grid;grid-template-columns: 1fr 600px 1fr;gap: 20px;} #homepage .location-section .location-section-desktop .location-grid .grid-left, #homepage .location-section .location-section-desktop .location-grid .grid-right{position: relative;} #homepage .location-section .location-section-desktop .location-grid .grid-left .grid__img, #homepage .location-section .location-section-desktop .location-grid .grid-right .grid__img{width: 100%;height: 100%;margin-top: 200px;display: grid;justify-content: center;align-items:end;margin: auto;text-align: center;} #homepage .location-section .location-section-desktop .location-grid .grid-center .section-title{padding-bottom: 80px;} #homepage .location-section .location-section-desktop .location-grid .grid-center .location-grid-text{width: 100%;position: relative;display: flex;gap: 20px;} #homepage .location-section .location-section-desktop .location-grid .grid-center .location-grid-text-1, #homepage .location-section .location-section-desktop .location-grid .grid-center .location-grid-text-2{max-width: 287px;color: var(--text-color);} #homepage .location-section .location-section-desktop .location-grid .grid-center .location-grid-text-2{display: flex;flex-direction: column;gap: 50px;} #homepage .location-section .location-section-desktop .location-grid .grid-left img, #homepage .location-section .location-section-desktop .location-grid .grid-right img{width: 70%;height: auto;object-fit: cover;margin: 0px auto;} #homepage .location-section .location-section-mobile{width: 100%;position: sticky;top: 0px;padding-top: 20vh;display: none;} #homepage .location-section .location-section-mobile .location-text-elements .section-title{padding-bottom: 80px;} #homepage .location-section .location-section-mobile .location-text-elements .location-grid-text-1, #homepage .location-section .location-section-mobile .location-text-elements .location-grid-text-2, #homepage .location-section .location-section-mobile .location-text-elements .location-grid-text-3{max-width: 287px;color: var(--text-color);} #homepage .location-section .location-section-mobile .location-text-elements .location-grid-text-2, #homepage .location-section .location-section-mobile .location-text-elements .location-grid-text-3{margin-left: auto;padding-top: 50px;} #homepage .location-section .location-section-mobile .location-mobile-images{position: relative;width: 100%;display: grid;grid-template-columns: repeat(2,1fr);gap: 20px;justify-content: end;align-items: end;padding-top: 100px;overflow-x: hidden;} #homepage .location-section .location-section-mobile .location-mobile-images .grid__img{width: 100%;position: relative;} #homepage .location-section .location-section-mobile .location-mobile-images .grid__img img{width: 100%;height: 100%;object-fit: cover;margin: 0px auto;} #homepage .gallery-section .inside-section, #aboutpage .gallery-section .inside-section{margin: 0px;} #aboutpage .gallery-section{padding: 0px;} .gallery-section{padding: 100px 0px 0px 0px;width: 100%;height: 100%;position: relative;top: 0px;background-color: var(--main-color);z-index: 3;} .gallery-section .inside-section{margin: 100px 0px 0px 0px;width: 100%;height: 100vh;position: relative;top: 0px;background-color: var(--main-color);z-index: 3;} .gallery-section .swiper-slide{width: 100%;height: 100vh;} .gallery-section .swiper-slide img{width: 100%;height: 100%;object-fit: cover;} .gallery-section .gallery-text{width: auto;position: absolute;bottom: 23px;z-index: 2;left: 50%;transform: translate(-50%);} .gallery-section .swiper-pagination{width: auto;color: var(--text-color)!important;font-size: 24px;line-height: 24px;font-weight: 500;bottom: 20px;left: 20px;} .swiper-button-prev:after, .swiper-button-next:after{content: ''!important;} .swiper-button-prev img{transform: rotate(180deg);} @media screen and (max-width:1161px) and (min-width:200px){ #homepage .location-section .location-section-desktop .location-grid .grid-left img, #homepage .location-section .location-section-desktop .location-grid .grid-right img{width: 100%;height: auto;object-fit: cover;margin: 0px auto;} } @media screen and (max-width:842px) and (min-width:634px){ #homepage .location-section .location-section-desktop .location-grid .grid-center .location-grid-text{max-width: 600px;margin: auto;} #homepage .location-section .location-section-desktop .location-grid{grid-template-columns: 1fr;} #homepage .location-section .location-section-desktop .location-grid .grid-left{position: absolute;left: 0px;width: 20%;height: 100%;} #homepage .location-section .location-section-desktop .location-grid .grid-right{position: absolute;right: 0px;width: 20%;height: 100%;} } @media screen and (max-width:633px) and (min-width:200px){ #homepage .location-section .location-section-desktop{display: none;} #homepage .location-section .location-section-mobile{display: block;} } @media screen and (max-width:622px) and (min-width:200px){ .landing-section .video-element video{width: 100%;height: 50vh;} #homepage .about-section-desktop{display: none;} #homepage .about-section-mobile{display: block;} #homepage .villas-section .villas-section-desktop{display: none;} #homepage .villas-section .villas-section-mobile{display: block;} } @media screen and (max-width:544px) and (min-width:200px){ .gallery-section .gallery-text{display: none;} .gallery-section .swiper-pagination{width: auto;left: 10px;} .gallery-section .swiper-button{bottom: 14px;width: 90px;right: 0px;} .gallery-section .inside-section, .gallery-section .swiper-slide{height: 70vh;} } /*Homepage code ends*/ /*Aboutpage code starts*/ #aboutpage .about-section{width: 100%;position: relative;height: auto;background-color: var(--main-color);z-index: 2;} #aboutpage .about-section-desktop{width: 100%;position: relative;padding: 20vh 0px 100px 0px;} #aboutpage .about-section-desktop .about-top-elements{max-width: 810px;margin: auto;padding: 0px 20px;} #aboutpage .about-section-desktop .about-top-elements .section-title{padding-bottom: 80px;} #aboutpage .about-section-desktop .about-top-elements video{width: 100%;height: 100%;object-fit: cover;} #aboutpage .about-section-desktop .pagewrap-top{width: 100%;height: auto;position: sticky;top: 0px;padding: 20vh 20px 100px 20px;z-index: 5;} #aboutpage .about-section-desktop .pagewrap-top .about-elements-content{width: 100%;height: 100%;position: relative;z-index: 10;max-width: 630px;margin: auto;} #aboutpage .about-section-desktop .pagewrap-top .about-elements-content .section-title{padding-bottom: 80px;} #aboutpage .about-section-desktop .pagewrap-top .about-elements-content .section-video{max-width: 810px;margin: auto;padding-bottom: 80px;} #aboutpage .about-section-desktop .pagewrap-top .about-elements-content .section-video video{width: 100%;} #aboutpage .about-section-desktop .about-text-elements .about-element-1{max-width: 287px;color: var(--text-color);} #aboutpage .about-section-desktop .about-text-elements .about-element-2{max-width: 287px;margin: 0px 0px 0px auto;padding-top: 50px;color: var(--text-color);} #aboutpage .about-section-desktop .about-text-elements .about-element-3{max-width: 287px;padding-top: 50px;color: var(--text-color);} #aboutpage .about-section-desktop .about-text-elements .about-element-4{max-width: 287px;margin: 0px 0px 0px auto;padding-top: 50px;color: var(--text-color);} #aboutpage .about-section-desktop .about-images-elements{padding-top: 50vh;position: relative;width: 100%;display: flex;height: 120vh;z-index: 3;} #aboutpage .about-section-desktop .grid__img{width: 100%;text-align: center;z-index: -1;opacity: 1;} #aboutpage .about-section-desktop .grid__img img{width: 50%;height: auto;object-fit: cover;} #aboutpage .about-section-mobile{display: none;width: 100%;} #aboutpage .about-section-mobile .about-top-elements{position: relative;padding: 20vh 20px 0px 20px;} #aboutpage .about-section-mobile .about-top-elements .section-title{padding-bottom: 60px;} #aboutpage .about-section-mobile .about-top-elements .section-video video{width: 100%;height: 350px;object-fit: cover;} #aboutpage .about-section-mobile .pagewrap-top{width: 100%;position: sticky;top: 20vh;padding: 20vh 20px 0px 20px;} #aboutpage .about-section-mobile .pagewrap-top .about-element-1, #aboutpage .about-section-mobile .pagewrap-top .about-element-2, #aboutpage .about-section-mobile .pagewrap-top .about-element-3, #aboutpage .about-section-mobile .pagewrap-top .about-element-4{max-width: 287px;color: var(--text-color);padding-bottom: 50px;} #aboutpage .about-section-mobile .pagewrap-top .about-element-2, #aboutpage .about-section-mobile .pagewrap-top .about-element-4{margin: 0px 0px 0px auto;} #aboutpage .about-section-mobile .pagewrap-top .about-images-elements-mobile{padding-top: 50px;display: grid;grid-template-columns: repeat(2,1fr);gap: 20px;align-items: end;overflow-x: hidden;} #aboutpage .about-section-mobile .pagewrap-top .about-images-elements-mobile .grid__img__mob{width: 100%;height: auto;} #aboutpage .about-section-mobile .pagewrap-top .about-images-elements-mobile .grid__img__mob img{width: 100%;height: 100%;object-fit: cover;} @media screen and (max-width:622px) and (min-width:200px){ #aboutpage .about-section .about-section-desktop{display: none;} #aboutpage .about-section .about-section-mobile{display: block;} } /*Aboutpage code ends*/ /*Villaspage code starts*/ #villaspage .villas-section{width: 100%;position: relative;padding-top: 20vh;} #villaspage .villas-section .villas-text-elements:last-child{padding-top: 100px;} #villaspage .villas-section .villas-text-elements .section-title{padding-bottom: 80px;} #villaspage .villas-section .villas-text-elements .villas-elements{max-width: 630px;margin: auto;display: flex;gap: 20px;} #villaspage .villas-section .villas-text-elements .villas-elements .villas-element-1, #villaspage .villas-section .villas-text-elements .villas-elements .villas-element-2{max-width: 287px;color: var(--text-color);} #villaspage .villas-section .villas-text-elements .villas-elements .villas-element-2{display: flex;flex-direction: column;} #villaspage .villas-section .villas-text-elements .villas-elements .villas-element-2 a{margin-top: 50px;} #villaspage .villas-section .villas-text-elements .villas-element-list ul{columns: 2;} #villaspage .villas-section .villas-text-elements .villas-element-list ul li{color: var(--text-color);font-size: 12px;line-height: 20px;font-weight: 300;} #villaspage .villas-gallery-section{margin-top: 100px;} #villaspage .villas-gallery-section .grid-villas-gallery .section-title{padding-bottom: 80px;} #villaspage .villas-gallery-section .grid-villas-gallery .grid-gallery{max-width: 1220px;margin: auto;} @media screen and (max-width:622px) and (min-width:200px){ #villaspage .villas-section .villas-text-elements .villas-elements{flex-direction: column;} #villaspage .villas-section .villas-text-elements .villas-elements .villas-element-2{margin-left: auto;} } /*Villaspage code ends*/ /*Locationpage code starts*/ #locationpage .location-section{width: 100%;height: auto;position: relative;z-index: 4;background-color: var(--main-color);} #locationpage .location-section .location-section-desktop{width: 100%;padding-top: 20vh;} #locationpage .location-section .location-section-desktop .pagewrap{height: 100%;} #locationpage .location-section .location-section-desktop .location-grid{width: 100%;height: 100%;position: relative;display: grid;grid-template-columns: 1fr 600px 1fr;gap: 20px;padding-bottom: 100px;} #locationpage .location-section .location-section-desktop .location-grid .grid-left, #locationpage .location-section .location-section-desktop .location-grid .grid-right{position: relative;} #locationpage .location-section .location-section-desktop .location-grid .grid-left .grid__img, #locationpage .location-section .location-section-desktop .location-grid .grid-right .grid__img{width: 100%;height: 100%;margin-top: 200px;display: grid;justify-content: center;align-items:end;margin: auto;text-align: center;} #locationpage .location-section .location-section-desktop .location-grid .grid-center{padding-bottom: 20vh;} #locationpage .location-section .location-section-desktop .location-grid .grid-center .section-title{padding-bottom: 80px;} #locationpage .location-section .location-section-desktop .location-grid .grid-center .location-grid-text{width: 100%;position: relative;} #locationpage .location-section .location-section-desktop .location-grid .grid-center .location-grid-text-1, #locationpage .location-section .location-section-desktop .location-grid .grid-center .location-grid-text-2, #locationpage .location-section .location-section-desktop .location-grid .grid-center .location-grid-text-3, #locationpage .location-section .location-section-desktop .location-grid .grid-center .location-grid-text-4, #locationpage .location-section .location-section-desktop .location-grid .grid-center .location-grid-text-5{max-width: 287px;color: var(--text-color);padding-bottom: 50px;} #locationpage .location-section .location-section-desktop .location-grid .grid-center .location-grid-text-2, #locationpage .location-section .location-section-desktop .location-grid .grid-center .location-grid-text-4{margin-left: auto;} #locationpage .location-section .location-section-desktop .location-grid .grid-left img, #locationpage .location-section .location-section-desktop .location-grid .grid-right img{width: 70%;height: auto;object-fit: cover;margin: 0px auto;} #locationpage .location-section .location-section-mobile{width: 100%;position: sticky;top: 0px;padding-top: 20vh;display: none;} #locationpage .location-section .location-section-mobile .location-text-elements .section-title{padding-bottom: 80px;} #locationpage .location-section .location-section-mobile .location-text-elements .location-grid-text-1, #locationpage .location-section .location-section-mobile .location-text-elements .location-grid-text-2, #locationpage .location-section .location-section-mobile .location-text-elements .location-grid-text-3, #locationpage .location-section .location-section-mobile .location-text-elements .location-grid-text-4, #locationpage .location-section .location-section-mobile .location-text-elements .location-grid-text-5{max-width: 287px;color: var(--text-color);padding-bottom: 50px;} #locationpage .location-section .location-section-mobile .location-text-elements .location-grid-text-2, #locationpage .location-section .location-section-mobile .location-text-elements .location-grid-text-4{margin-left: auto;} #locationpage .location-section .location-section-mobile .location-mobile-images{position: relative;width: 100%;display: grid;grid-template-columns: repeat(2,1fr);gap: 20px;justify-content: end;align-items: end;padding-top: 50px;overflow-x: hidden;} #locationpage .location-section .location-section-mobile .location-mobile-images .grid__img{width: 100%;position: relative;} #locationpage .location-section .location-section-mobile .location-mobile-images .grid__img img{width: 100%;height: 100%;object-fit: cover;} @media screen and (max-width:1133px) and (min-width:200px){ #locationpage .location-section .location-section-desktop .location-grid .grid-left img, #locationpage .location-section .location-section-desktop .location-grid .grid-right img{width: 100%;height: auto;object-fit: cover;margin: 0px auto;} } @media screen and (max-width:1000px) and (min-width:200px){ #locationpage .location-section .location-section-desktop .location-grid{grid-template-columns: 1fr;} #locationpage .location-section .location-section-desktop .location-grid .grid-center{width: 100%;} #locationpage .location-section .location-section-desktop .location-grid .grid-left{position: absolute;bottom: 100px;left: 0px;width: 20%;} #locationpage .location-section .location-section-desktop .location-grid .grid-right{position: absolute;bottom: 100px;right: 0px;width: 20%;} #locationpage .location-section .location-section-desktop .location-grid .grid-center .location-grid-text{max-width: 630px;margin: auto;} #locationpage .location-section .location-section-desktop .location-grid .grid-center{padding-bottom: 30vh;} } @media screen and (max-width:622px) and (min-width:200px){ #locationpage .location-section .location-section-desktop{display: none;} #locationpage .location-section .location-section-mobile{display: block;} } /*Locationpage code ends*/ /*Contact code starts*/ #contactpage{width: 100%;height: 100%;padding-bottom: 70px;} #contactpage .contact-hero{width: 100%;position: relative;} #contactpage .contact-hero .pagewrap{width: 100%;height: 100%;} #contactpage .contact-hero .pagewrap .inside-elements{width: 100%;height: 100%;padding-top: 200px;max-width: 1440px;margin: auto;} #contactpage .contact-hero .pagewrap .inside-elements .grid-element-left{display: flex;flex-direction: column;gap: 40px;} #contactpage .contact-hero .pagewrap .inside-elements .element{display: flex;flex-direction: column;gap: 20px;} #contactpage .contact-hero .pagewrap .inside-elements .element-title p{color: var(--text-color);} #contactpage .contact-hero .pagewrap .inside-elements .element ul{list-style: none;} #contactpage .contact-hero .pagewrap .inside-elements .element ul li{color: var(--text-color);padding-bottom: 10px;} #contactpage .contact-hero .pagewrap .inside-elements .element ul li a{color: var(--text-color);text-decoration: none;} #contactpage .contact-hero .pagewrap .inside-elements .element ul li a:hover{opacity: 0.7;} #contactpage .contact-hero .pagewrap .inside-elements .element ul .social{display: flex;gap: 15px;} #contactpage .contact-hero .pagewrap .inside-elements .element-buttons ul{list-style: none;display: flex;flex-direction: column;gap: 20px;} #contactpage .contact-hero .pagewrap .inside-elements .element-buttons ul p a{color: var(--text-color);text-decoration: none;} #contactpage .contact-hero .pagewrap .inside-elements .element-buttons ul p a:hover{opacity: 0.7;} .fluentform{position: relative;} .fluentform .ff-el-group:nth-child(11){position: absolute;width: 55%;padding-top: 9px;} .fluentform .ff-el-group:nth-child(11) span{color: var(--text-color);font-size: 12px;font-weight: 300;} .ff-default .ff-el-input--label label{font-size: 12px;font-weight: 300!important;line-height: 18px;color: var(--text-color);} .ff-default .ff-el-form-control{background-color: transparent!important;border-top:0px!important;border-right: 0px!important;border-bottom: 1px solid var(--text-color)!important;border-left: 0px!important;border-radius: 0px!important;} form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style){width: 178px!important;max-width: 100%;height: 42px!important;border: 1px solid var(--text-color)!important;font-size: 12px!important;color: var(--text-color)!important;background-color: var(--main-color)!important;border-radius: 0px!important;} form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style):hover{opacity: 0.7!important;background-color: var(--main-color)!important;} .ff-default .ff-el-form-control{padding: 10px 0px!important;color: var(--white-color)!important;} .page-id-7 #footer{position: fixed;bottom: 0px;padding: 0px;} .page-id-7 #footer .footer-top{display: none;} .page-id-7 #footer .footer-bottom{padding-top: 0px;} @media screen and (max-width:1416px) and (min-width:200px){ .fluentform .ff-el-group:nth-child(11){padding-top: 0px;} } @media screen and (max-width:847px) and (min-width:200px){ .fluentform .ff-el-group:nth-child(11){position: relative;width: 100%;} } @media screen and (max-width:800px) and (min-width:700px){ #contactpage .contact-hero .pagewrap .inside-elements{padding-top: 100px;} .page-id-7 #footer{position: relative;} } @media screen and (max-width:699px) and (min-width:200px){ #contactpage .contact-hero .pagewrap .inside-elements{padding-top: 150px;} #contactpage .contact-hero .pagewrap .inside-elements .grid-2-elements{display: grid;grid-template-columns: 1fr;gap: 60px;} .page-id-7 #footer{position: relative;} } /*Contact code ends*/ /*Error page code starts*/ #errorpage .error-elements{width: 100%;height: 100vh;position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;} #errorpage .super-big-text{font-size: 300px;line-height: 300px;font-weight: 200;color: var(--text-color);} #errorpage .error-elements a{width: 178px;max-width: 100%;height: 42px;display: flex;flex-direction: column;justify-content: center;align-items: center;border: 1px solid var(--text-color);text-decoration: none;font-size: 12px;line-height: 18px;color: var(--text-color);background-color: var(--main-color);margin-top: 40px;} #errorpage .error-elements a:hover{background-color: var(--main-color);opacity: 0.7;} .error404 #footer{position: fixed;bottom: 0px;padding: 0px;} .error404 #footer .footer-top{display: none;} .error404 #footer .footer-bottom{padding-top: 0px;} @media screen and (max-width:699px) and (min-width:200px){ #errorpage{padding: 150px 0px 70px 0px;} #errorpage .error-elements{height: auto;} .error404 #footer{position: fixed;} #errorpage .super-big-text{font-size: 150px;line-height: 150px;} } /*Error page code ends*/ /*All pages code starts*/ #allpages{width: 100%;padding: 120px 0px;} #allpages .allpage-section{max-width: 720px;margin: auto;} #allpages .allpage-section .section-title{padding-bottom: 80px;} #allpages .allpage-section .page-content{display: flex;flex-direction: column;gap: 20px;} #allpages .allpage-section .page-content p, #allpages .allpage-section .page-content h1, #allpages .allpage-section .page-content h2, #allpages .allpage-section .page-content h3, #allpages .allpage-section .page-content h4, #allpages .allpage-section .page-content h5, #allpages .allpage-section .page-content h6{color: var(--text-color);} /*All pages code ends*/ /*Footer code starts*/ #footer{width: 100%;position: relative;padding: 100px 0px 0px 0px;background-color: var(--main-color);z-index: 3;} #footer .footer-top .element-title p{color: var(--text-color);} #footer .footer-top .element-bottom{padding-top: 20px;} #footer .footer-top .element-bottom ul{display: flex;flex-direction: column;gap: 10px;list-style: none;} #footer .footer-top .element-bottom ul li{font-size: 14px;line-height: auto;color: var(--text-color);font-weight: 300;line-height: 20px;} #footer .footer-top .element-bottom ul li a{color: var(--text-color);text-decoration: none;} #footer .footer-top .element-bottom ul li a:hover{opacity: 0.7;} #footer .footer-top .element-bottom ul li .social{display: flex;gap: 15px;} #footer .footer-top .grid-right-element .element-title{text-align: right;} #footer .footer-top .grid-right-element .element-bottom{text-align: right;} #footer .footer-top .grid-center-element{text-align: center;} #footer .footer-top .grid-center-element img{max-width: 180px;} #footer .footer-top .grid-center-element .footer-grid-center-element{display: flex;flex-direction: column;gap: 20px;padding-top: 30px;} #footer .footer-top .grid-center-element .footer-grid-center-element a{font-size: 20px;line-height: 24px;font-weight: 700;color: var(--text-color);text-decoration: none;} #footer .footer-top .grid-center-element .footer-grid-center-element a:hover{opacity: 0.7;} #footer .footer-bottom{padding-top: 200px;padding-bottom: 10px;} #footer .footer-bottom .grid-element-left p{color: var(--text-color);} #footer .footer-bottom .grid-element-center p{display: flex;gap: 20px;justify-content: center;list-style: none;} #footer .footer-bottom .grid-element-center p a{color: var(--text-color);font-size: 14px;line-height: 20px;color: var(--text-color);text-decoration: none;} #footer .footer-bottom .grid-element-center p a:hover{opacity: 0.7;} #footer .footer-bottom .grid-element-right{text-align: right;} #footer .footer-bottom .grid-element-right p, #footer .footer-bottom .grid-element-right p a{color: var(--text-color);text-decoration: none}; #footer .footer-bottom .grid-element-right p a:hover{opacity: 0.7;} #footer .mobile-footer{display: none;} #footer .mobile-footer .grid-elements-top{display: flex;flex-direction: column;gap: 10px;padding-bottom: 25px;} #footer .mobile-footer .grid-elements-top a{font-size: 20px;line-height: 24px;font-weight: 700;color: var(--text-color);text-decoration: none;} #footer .mobile-footer .grid-elements-bottom{display: grid;grid-template-columns: repeat(2,1fr);gap: 20px;} #footer .mobile-footer .grid-elements-bottom .element-right{text-align: right;} #footer .footer-bottom-mobile{display: none;} #footer .footer-bottom-mobile .grid-element-left{display: flex;flex-direction: column;gap: 5px;} #footer .footer-bottom-mobile .grid-element-left p a{color: var(--text-color);text-decoration: none;} #footer .footer-bottom-mobile .grid-element-left p a:hover{opacity: 0.7;} #footer .footer-bottom-mobile .grid-element-right{margin-top: auto;} @media screen and (max-width:592px) and (min-width:200px){ #footer .desktop-footer{display: none;} #footer .mobile-footer{display: block;} #footer .footer-bottom{padding-top: 100px;} } @media screen and (max-width:735px) and (min-width:500px){ #footer .footer-bottom-desktop{display: none;} #footer .footer-bottom-mobile{display: block;} } @media screen and (max-width:499px) and (min-width:200px){ #footer .footer-bottom-desktop{display: none;} #footer .footer-bottom-mobile{display: block;} #footer .footer-bottom .grid-element-left p:nth-child(1){display: flex;flex-direction: column;gap: 5px;} } /*Footer code ends*/ /*Overlay code starts*/ #overlay{width: 100%;position: fixed;height: 100vh;opacity: 0;visibility: hidden;top: 0px;left: -100%;z-index: 1000;background-color: var(--text-color);/*overflow-y: scroll;*/;overflow:hidden;} #overlay .grid-elements{width: 100%;height: 100%;position: relative;display: grid;grid-template-columns: repeat(2,1fr);} #overlay .grid-elements .grid-element-left{padding: 70px 0px 20px 20px;position: relative;display: flex;flex-direction: column;justify-content: space-between;gap: 20px;opacity: 0;left:-100%;} #overlay .grid-elements .grid-element-left .menu-elements ul{list-style: none;} #overlay .grid-elements .grid-element-left .menu-elements ul li a{font-size: 32px;line-height: 60px;font-weight: 500;color: var(--text-color);text-decoration: none;color: var(--main-color);} #overlay .grid-elements .grid-element-left .menu-elements ul li a:hover{opacity: 0.7;} #overlay .grid-elements .grid-element-left .info-elements{padding-top: 50px;} #overlay .grid-elements .grid-element-left .info-elements ul{list-style: none;display: flex;flex-direction: column;gap: 30px;} #overlay .grid-elements .grid-element-left .info-elements ul li .info{display: flex;flex-direction: column;gap: 10px;} #overlay .grid-elements .grid-element-left .info-elements ul li .info p{font-size: 16px;line-height: 20px;font-weight: 500;color: var(--main-color);} #overlay .grid-elements .grid-element-left .info-elements ul li .info p a{font-size: 16px;line-height: 20px;font-weight: 500;text-decoration: none;color: var(--main-color);color: var(--main-color);} #overlay .grid-elements .grid-element-left .info-elements ul li .info p a:hover{opacity: 0.7;} #overlay .grid-elements .grid-element-left .info-elements ul li .directions{display: flex;flex-direction: column;gap: 10px;} #overlay .grid-elements .grid-element-left .info-elements ul li .directions a{font-size: 20px;line-height: 24px;font-weight: 700;color: var(--main-color);text-decoration: none;} #overlay .grid-elements .grid-element-left .info-elements ul li .directions a:hover{opacity: 0.7;} #overlay .grid-elements .grid-element-left .info-elements ul li .social{display: flex;gap: 10px;} #overlay .grid-elements .grid-element-left .info-elements ul li .social img{width: 28px;height: 28px;} #overlay .grid-elements .grid-element-left .info-elements ul li .social a:hover{opacity: 0.7;} #overlay .grid-elements .grid-element-left .footer-element{position: relative;display: flex;gap: 5px;} #overlay .grid-elements .grid-element-left .footer-element p{color: var(--text-color);} #overlay .grid-elements .grid-element-right{width: 100%;height: 100%;right: -100%;position: relative;opacity: 0;overflow: hidden;} #overlay .grid-elements .grid-element-right .image-element{width: 100%;height: 100vh;} @media screen and (max-width:600px) and (min-width:200px){ #overlay .grid-elements{grid-template-columns: 1fr;} #overlay .grid-elements .grid-element-right{display: none;} } /*Overlay code ends*/