/* cormorant-garamond-300 - 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: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/cormorant-garamond-v16-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* cormorant-garamond-300italic - 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: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300;
    src: url('fonts/cormorant-garamond-v16-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* cormorant-garamond-regular - 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: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/cormorant-garamond-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* cormorant-garamond-italic - 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: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/cormorant-garamond-v16-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* cormorant-garamond-500 - 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: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/cormorant-garamond-v16-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* cormorant-garamond-500italic - 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: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 500;
    src: url('fonts/cormorant-garamond-v16-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* cormorant-garamond-600 - 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: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/cormorant-garamond-v16-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* cormorant-garamond-600italic - 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: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 600;
    src: url('fonts/cormorant-garamond-v16-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* cormorant-garamond-700 - 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: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/cormorant-garamond-v16-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* cormorant-garamond-700italic - 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: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 700;
    src: url('fonts/cormorant-garamond-v16-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  
  /* manrope-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: 'Manrope';
    font-style: normal;
    font-weight: 200;
    src: url('fonts/manrope-v15-greek_latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* manrope-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: 'Manrope';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/manrope-v15-greek_latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* manrope-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: 'Manrope';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/manrope-v15-greek_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* manrope-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: 'Manrope';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/manrope-v15-greek_latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* manrope-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: 'Manrope';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/manrope-v15-greek_latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* manrope-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: 'Manrope';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/manrope-v15-greek_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* manrope-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: 'Manrope';
    font-style: normal;
    font-weight: 800;
    src: url('fonts/manrope-v15-greek_latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }


*{margin: 0px;padding: 0px;box-sizing: border-box;}

:root{
    --black-color: #000;
    --white-color: #fff;
    --midgrey-color: #7a7a7a;
    --darkgrey-color: #535353;
    --midgrey-color: #c8c8c8;
}

html, body{width: 100%;height: 100%;background-color: var(--black-color);font-family: 'Manrope';margin: 0px;padding: 0px;scroll-behavior: smooth;}

/*h1{font-size: 72px;line-height: 72px;font-weight: 500;}*/
h1{font-size: 64px;line-height: 68px;font-weight: 500;}
h2{font-size: 36px;line-height: 36px;font-weight: 400;}
h3{font-size: 28px;line-height: 32px;font-weight: 400;}
h4{font-size: 24px;line-height: 28px;font-weight: 400;}
h5{font-size: 20px;line-height: 28px;font-weight: 400;}
p{font-size: 18px;line-height: 24px;}
em{font-family: 'Cormorant Garamond';font-weight: 400;}
h1 em{font-size: 82px;}
.extrabig{font-size: 128px;line-height: 128px;font-weight: 500;}

.pagewrap{width: 100%;position: relative;padding: 0px 20px;}
.pagewrapbig{width: 100%;position: relative;padding: 0px 100px;}

.section-title{color: var(--white-color);font-weight: 500;}
.section-bigtitle{padding-top: 10px;overflow: hidden;}
.section-bigtitle h2{text-transform: uppercase;color: var(--white-color);overflow: hidden;}
.section-bigtitle h2 div{overflow: hidden;}
.section-subtitle{width: 670px;max-width: 100%;padding-top: 50px;}
.section-subtitle h4{text-transform: uppercase;color: var(--midgrey-color);}

.button{display: flex;justify-content: center;align-items: center;border: 1px solid var(--black-color);padding: 10px 25px;border-radius: 60px;color: var(--black-color);text-decoration: none;height: 60px;max-width: fit-content;transition: 0.3s ease;}
.button:hover{background-color: var(--black-color);color: var(--white-color);transition: 0.3s ease;}
.button.noborder{border: 0px;transition: 0.3s ease;}
.button.white{width: 213px;max-width: 100%;border: 1px solid var(--white-color);color: var(--white-color);transition: 0.3s ease;}
.button.white:hover{background-color: var(--white-color);color: var(--black-color);transition: 0.3s ease;}

.line{width: 100%;height: 1px;background-color: var(--darkgrey-color);}

.parallax{overflow: hidden;}

.grid-2-elements{width: 100%;position: relative;display: grid;grid-template-columns: repeat(2,1fr);gap: 40px;}
/*Menuholder code starts*/
#menuholder{width: 100%;position: fixed;top: 0px;padding: 15px 0px;z-index: 100;background-image: linear-gradient(rgba(15, 15, 15, .7), rgba(0, 0, 0, 0));}
#menuholder .flex-elements{width: 100%;position: relative;display: flex;justify-content: space-between;gap: 20px;}
#menuholder .flex-elements .flex-element-left a{display: flex;height: 42px;width:123px}
#menuholder .flex-elements .flex-element-left a img{width: 100%;}
#menuholder .flex-elements .flex-element-right{margin: auto 0px;}
#menuholder .flex-elements .flex-element-right .desktop-menu{display: flex;gap: 20px;}
#menuholder .flex-elements .flex-element-right .desktop-menu .button, #overlay .element-menu-right-top .button{width: 122px;height: 42px;background-color: var(--white-color);color: var(--black-color);display: flex;justify-content: center;align-items: center;border: none;cursor: pointer;}
#menuholder .flex-elements .flex-element-right .desktop-menu .menu-elements{margin: auto 0px;}
#menuholder .flex-elements .menu-elements ul{display: flex;gap: 20px;list-style: none;}
#menuholder .flex-elements .menu-elements ul li a{font-size: 16px;line-height: 32px;color: var(--white-color);font-weight: 500;text-decoration: none;position: relative;}
#menuholder .flex-elements .menu-elements ul li a:after{content: "";position: absolute;bottom: 0px;left: 0px;width: 0%;height: 1px;background-color: var(--white-color);transition: 0.5s ease;}
#menuholder .flex-elements .menu-elements ul li a:hover:after{width: 100%;transition: 0.5s ease;}
#menuholder .flex-elements .menu-elements ul li.active a:after{content: "";position: absolute;bottom: 0px;left: 0px;width: 100%;height: 1px;background-color: var(--white-color);transition: 0.5s ease;}

#menuholder .flex-elements .mobile-menu{display: none;width: 42px;height: 42px;flex-direction: column;gap: 7px;justify-content: center;align-items: center;cursor: pointer;}
#menuholder .flex-elements .mobile-menu span{width: 35px;height: 2px;background-color: var(--white-color);}
#menuholder .flex-elements .mobile-menu.active span{position: absolute;}
#menuholder .flex-elements .mobile-menu.active span:nth-child(1){transform: rotate(45deg);}
#menuholder .flex-elements .mobile-menu.active span:nth-child(2){transform: rotate(-45deg);}
/*#menuholder .flex-elements .mobile-menu.active span:nth-child(2){}*/

@media screen and (max-width:1094px) and (min-width:200px){
    #menuholder .flex-elements .flex-element-right .desktop-menu{display: none;}
    #menuholder .flex-elements .mobile-menu{display: flex;}
}
/*Menuholder code ends*/

/*Homepage Elements starts*/
.hero-section{width: 100%;position: relative;height: 100vh;height: 100dvh;overflow: hidden;}
.hero-section .background-element{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);z-index: 1;}
.hero-section video{width: 100%;height: 100%;object-fit: cover;}
.hero-section .titlos-element{position: absolute;top: 50%;left: 0px;transform: translate(0%,-50%);padding: 0px 20px;max-width: 777px;z-index: 2;}
.hero-section .titlos-element h1{color: var(--white-color);font-weight: 400;overflow: hidden;}
.hero-section .small-title{position: absolute;bottom: 0px;z-index: 1;padding: 20px;color: var(--white-color);}

.video-container {width: 100%;height: 100%;position: relative;}
.video-container iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; transform: translate(-50%, -50%); pointer-events: none;}

/* Όταν η οθόνη είναι πιο στενή από 16:9 (π.χ. κινητά, tablet ή κάθετα παράθυρα) */
@media (max-aspect-ratio: 16/9) {
    .video-container iframe {
        width: 177.78vh;
        height: 100vh;
    }
}

/* Όταν η οθόνη είναι πιο πλατιά από 16:9 (π.χ. ultra-wide οθόνες) */
@media (min-aspect-ratio: 16/9) {
    .video-container iframe {
        width: 100vw;
        height: 56.25vw;
    }
}

.about-section{padding: 50px 0px;}


.scroll-section{width: 100%;position: relative;height: auto;padding-bottom: 100px;}
.scroll-section .pagewrap{width: 100%;position: relative;}
.scroll-section .pagewrap .element-top{width: 100%;height: auto;position: sticky;top: 0px;padding: 20vh 0px 0px 0px;z-index: 4;text-align: center;}
.scroll-section .pagewrap .element-bottom{padding-top: 50vh;position: relative;width: 100%; display: grid;grid-template-columns: repeat(2,1fr);gap: 20px;height: auto;z-index: 3;}
.scroll-section .pagewrap .element-bottom .element-bottom-left{display: flex;justify-content: center;align-items: center;}
.scroll-section .pagewrap .element-bottom .element-bottom-right{display: flex;gap: 100px;flex-direction: column;align-items: center;}
.scroll-section .pagewrap .element-bottom .image-element{width: 30vw;height: 40vw;}
.scroll-section .pagewrap .element-bottom img{width: 100%;height: 100%;object-fit: cover;}

.sustainability-section{width: 100%;background-color: var(--white-color);padding: 100px 0px 180px 0px;}
.sustainability-section .section-title{color: var(--black-color);}
.sustainability-section .section-bigtitle h2{color: var(--black-color);}

.sustainability-section .section-content{max-width: 570px;display: flex;gap: 20px;flex-direction: column;padding: 40px 0px;}
.sustainability-section .section-content h3{text-transform: uppercase;}
.sustainability-section .section-content p{color: var(--darkgrey-color);}

.sustainability-section .grid-element-right .section-bottom{padding-bottom: 40px;}
.sustainability-section .grid-element-right .element-story{padding: 20px 0px;display: flex;flex-direction: column;gap: 30px;}
.sustainability-section .grid-element-right .element-story .element-story-bottom p{color: var(--darkgrey-color);}
.sustainability-section .grid-element-right .story-line{width: 100%;height: 1px;background-color: var(--black-color);}

.villas-section{background-color: var(--white-color);padding-bottom: 100px;}
.villas-section .section-bigtitle{padding-bottom: 20px;}
.mySwiper .swiper-slide{width: 100%;height: 100%;}
.mySwiper .swiper-slide .swiper-slide-image{width: 100%;height: 80vh;position: relative;}
.mySwiper .swiper-slide .swiper-slide-image img{width: 100%;height: 100%;object-fit: cover;}
.mySwiper .swiper-slide .swiper-slide-content{max-width: 660px;padding-top: 15px;}
.mySwiper .swiper-slide .swiper-slide-content .villas-text{padding: 10px 0px 40px 0px;}
.mySwiper .swiper-slide .swiper-slide-content .villas-text p{font-size: 18px;line-height: 24px;color: #7a7a7a;}
.mySwiper .swiper-slide .swiper-slide-content .villas-buttons{padding-bottom: 20px;display: flex;gap:20px;}
.mySwiper .swiper-buttons{position: absolute;right: 20px;bottom: 251px;width: 150px;max-width: 100%;height: 30px;}
.mySwiper .swiper-buttons .swiper-pagination{width: auto;margin-left: 33%;font-size: 26px;line-height: 17px;font-weight: 400;}
.mySwiper .swiper-buttons .swiper-button-next::after, .mySwiper .swiper-buttons .swiper-button-prev::after{content: '';}
.mySwiper .swiper-buttons .swiper-button-prev img{transform: rotate(180deg);}

.faq-section{padding: 150px 0px;}
.faq-section .section-top .flex-elements{width: 100%;position: relative;display: flex;justify-content: space-between;gap: 20px;}
.faq-section .section-top .flex-elements .flex-element-left img{width: 328px;max-width: 100%;}
.faq-section .section-top .flex-elements .flex-element-right{margin: auto 0px 0px 0px;}
.faq-section .section-bottom{padding-top: 20px;}
.faq-container .faq{border-top: 1px solid var(--darkgrey-color);padding: 50px 0px;}
.faq-container .faq:last-child{border-bottom: 1px solid var(--darkgrey-color);}
.faq-container .faq .faq-question{display: flex;justify-content: space-between;gap: 20px;color: var(--white-color);cursor: pointer;padding: 0px 50px;}
.faq-container .faq .faq-question .faq-btn{width: 25px;height: 32px;display: flex;align-items: center;transition: 0.4s ease;}
.faq-container .faq .faq-question .faq-btn span{width: 25px;height: 2px;background-color: var(--white-color);}
.faq-container .faq .faq-question .faq-btn span:nth-child(2){transform: rotate(90deg);position: absolute;}
.faq-container .faq.open .faq-question .faq-btn{transform: rotate(45deg);transition: 0.4s ease;}

.faq-container .faq .faq-answer{display: none;color: var(--white-color);padding: 50px 100px 20px 100px;}
.faq-container .faq.open .faq-answer{display: block;}

.opportunity-section{width: 100%;height: 100vh;height: 100dvh;position: relative;}
.opportunity-section .opportunity-background{width: 100%;height:100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
.opportunity-section .background-filter{width: 100%;height: 100%;position: absolute;background-color: rgba(0,0,0,0.1);top: 0px;left: 0px;}
.opportunity-section .opportunity-content{position: absolute;top: 80px;left: 0px;}
.opportunity-section .opportunity-content .section-title{color: var(--white-color);}
.opportunity-section .opportunity-content .section-bigtitle{max-width: 858px;color: var(--white-color);}
.opportunity-section .opportunity-content .section-content{max-width: 639px;padding: 20px 0px 40px 0px;color: var(--white-color);}
.opportunity-section .opportunity-content .button{width: 213px;max-width: 100%;border: 1px solid var(--white-color);color: var(--white-color);}
.opportunity-section .opportunity-content .button:hover{background-color: var(--white-color);color: var(--black-color);}

.location-section{width: 100%;position: relative;background-color: var(--white-color);padding: 100px 0px;}
.location-section .location-content .section-title{color: var(--black-color);display: flex;justify-content: space-between;}
.location-section .location-content .section-bigtitle{max-width: 662px;}
.location-section .location-content .section-content{max-width: 612px;color: var(--darkgrey-color);padding: 20px 0px 40px 0px;display: flex;flex-direction: column;gap: 20px;}
.location-section .location-content a{position: relative;z-index: 1;}
.location-section .grid-element-right{text-align: right;}
.location-section .section-elements-bottom{margin-top: -60px;}
.location-section .section-elements-bottom .grid-element-left{margin: auto 0px;}
.location-section .section-elements-bottom .grid-element-left img{width: 60%;}
.location-section .section-elements-bottom .grid-element-right img{width: 100%;}

.form-section{width: 100%;position: relative;background-color: var(--white-color);padding: 0px 0px 100px 0px;}
.form-section .line{margin: 0px 0px 100px 0px;}
.form-section .section-bigtitle{padding: 10px 0px 20px 0px;max-width: 700px;}
.form-section .form-element-left{display: flex;flex-direction: column;gap: 20px;justify-content: space-between;}
.form-section .form-element-top{padding-bottom: 20px;}
.form-section .ff-default .ff-el-input--label label{color: var(--black-color);}
.form-section .ff-default .ff-el-form-control{border-bottom: 1px solid var(--black-color)!important;}
.form-section .fluentform .privacy span{color: var(--black-color);}
.form-section .fluentform .privacy{width: 50%;}
.form-section .ff-default .ff-el-form-control{color: var(--black-color)!important;}
.form-section .ff-default .ff_btn_style{max-width: 213px!important;background-color: var(--white-color)!important;color: var(--black-color)!important;border: 1px solid var(--black-color)!important;max-width: 100%!important;}
.form-section .form-bottom-bottom{display: none;}


@media screen and (max-width:900px) and (min-width:200px){
    .form-section .grid-2-elements{grid-template-columns: repeat(1,1fr);gap: 60px;}
    .form-section .form-bottom-bottom{display: block;margin-top: 40px;}
    .form-section .form-icon{display: none;}
}
/*Homepage Elements ends*/

/*The Project Page code starts*/
/*
#theprojectpage .hero-section{position: sticky;top: 0px;z-index: 1;}
#theprojectpage .about-section{position: relative;z-index: 2;background-color: var(--black-color);}
#theprojectpage .pogonia-palairos{position: relative;z-index: 2;}
#theprojectpage .sustainability-section{position: relative;z-index: 2;}
*/

.hero-section .image-element{width: 100%;height: 100%;}
.hero-section .image-element img{width: 100%;height: 100%;object-fit: cover;}

#theprojectpage .about-section .section-content{color: var(--midgrey-color);padding: 15px 0px 30px 0px;}
#theprojectpage .about-section .about-elements-right{display: flex;flex-direction: column;justify-content: center;align-items: center;}
#theprojectpage .about-section .about-elements-right .image-element{width:30vw;height: 40vw;}
#theprojectpage .about-section .about-elements-right .image-element img{width: 100%;height: 100%;object-fit: cover;}
#theprojectpage .about-section .section-content{max-width: 620px;}
#theprojectpage .about-section .section-content ul{list-style: none;padding: 0px 0px 50px 0px;}
#theprojectpage .about-section .section-content ul li{padding: 10px 0px;}
#theprojectpage .about-section .section-content .button.white{width: auto;max-width: fit-content;}

.pogonia-palairos{width: 100%;position: relative;height: 100vh;height: 100dvh;}
.pogonia-palairos .palairos-background{width: 100%;height: 100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
.pogonia-palairos .background-filter{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);z-index: 1;}
.pogonia-palairos .palairos-content{position: absolute;top: 0px;left: 0px;z-index: 3;}
.pogonia-palairos .palairos-content .pagewrap{padding: 80px 20px 0px 20px;}
.pogonia-palairos .palairos-content .section-bigtitle{color: var(--white-color);}
.pogonia-palairos .palairos-content .section-content{padding: 15px 0px 30px 0px;max-width: 620px;color: var(--white-color);}

#theprojectpage .sustainability-section .grid-element-right .image-element{width: 100%;height: 100%;}
#theprojectpage .sustainability-section .grid-element-right img{width: 100%;height: 100%;object-fit: cover;}

#theprojectpage .lineBig{width: 100%;position: relative;background-color: var(--white-color);}
/*The Project Page code ends*/

/*Villas Page code starts*/

#villaspage .hero-section{width: 100%;height: auto;position: relative;padding: 180px 0px 80px 0px;}
#villaspage .hero-section .villaspage-top-element{color: var(--white-color);padding-bottom: 140px;}
#villaspage .hero-section .villaspage-bottom-element .section-content{color: var(--midgrey-color);max-width: 620px;padding-top: 20px;}


.villa-element{width: 100%;position: relative;padding: 50px 0px;border-bottom: 1px solid var(--darkgrey-color);}
.villa-element h4{font-weight: 500;}
.villa-element:first-child{border-top: 0px;border-top: 1px solid var(--darkgrey-color);}
.villa-element .flex-element{display: flex;gap: 20px;}
.villa-element .flex-element .flex-villa-left-element{width: 50%;}
.villa-element .flex-element .flex-villa-right-element{width: 50%;}
.villa-element .villas-title{color: var(--white-color);}
.villa-element .villas-informations{color: var(--white-color);width: 100%;padding: 50px 0px 30px 0px;display: grid;grid-template-columns: repeat(5,1fr);}
.villa-element .villas-informations .element{display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 10px;border-right: 1px solid var(--darkgrey-color);padding: 0px 15px;}
.villa-element .villas-informations .element:last-child{border-right: 0px;}
.villa-element .villas-content{color: var(--midgrey-color);}
.villa-element .villas-buttons{display: flex;gap: 20px;padding-top: 35px;}
.villa-element .villas-buttons .button:nth-child(1){border: 1px solid var(--white-color);color: var(--white-color);width: 247px;max-width: 100%;}
.villa-element .villas-buttons .button:nth-child(1):hover{opacity: 0.7;}
.villa-element .villas-buttons .button:nth-child(2){border: 1px solid rgba(255,255,255,0.7);color: rgba(255,255,255,0.7);width: 220px;max-width: 100%;}
.villa-element .villas-buttons .button:nth-child(2):hover{border: 1px solid rgba(255,255,255,1);color: rgba(255,255,255,1);width: 220px;max-width: 100%;}
.villa-element .flex-element .flex-villa-right-element .villas-image{width: 100%;height: 100%;}
.villa-element .flex-element .flex-villa-right-element .villas-image a{width: 100%;display: block;}
.villa-element .flex-element .flex-villa-right-element .villas-image img{width: 100%;height: 420px;object-fit: cover;}

.next-villas-section .next-project-section-title{width: 100%;position: relative;border-bottom: 1px solid var(--darkgrey-color);}
.next-villas-section .next-project-section-title h3{color: var(--white-color);padding-bottom: 20px;}
.next-villas-section .next-project{max-width: 1440px;margin: 120px auto;}
.next-villas-section .next-project .next-element{display: flex;gap: 30px;justify-content: center;}
.next-villas-section .next-project .next-element .project-name{display: flex;justify-content: center;align-items: center;}
.next-villas-section .next-project .next-element .project-name span{color: var(--white-color);}
.next-villas-section .next-project .next-element .project-image{width: 25vw;height: 33vw;}
.next-villas-section .next-project .next-element .project-image img{width: 100%;height: 100%;object-fit: cover;}
.next-villas-section .next-project .next-element .project-link{display: flex;gap: 20px;justify-content: center;align-items: center;margin-top: 23px;transition: 0.5s ease;}
.next-villas-section .next-project .next-element .project-link p{color: var(--white-color);}
.btn-circle{width: 50px;height: 50px;border: 1px solid var(--white-color);border-radius: 60px;display: flex;justify-content: center;align-items: center;transition: 0.5s ease;}
.btn-circle img{width: 28px;height: 28px;}
.next-villas-section .next-project .next-element .project-link .btn-circle:hover{position: relative;margin-left: 15px;transition: 0.5s ease;}

.next-villas-section:has(img){display: block;}
.next-villas-section{display: none;}


@media screen and (max-width:1377px) and (min-width:1193px){
    .villa-element .flex-element .flex-villa-left-element{width: 50%;}
    .villa-element .flex-element .flex-villa-right-element{width: 50%;}
}
@media screen and (max-width:1193px) and (min-width:612px){
    .villa-element .flex-element{flex-direction: column;gap: 30px;}
    .villa-element .flex-element .flex-villa-left-element{width: 100%;order: 1;}
    .villa-element .flex-element .flex-villa-right-element{width: 100%;order: 0;}
    .villa-element .flex-element .flex-villa-right-element .villas-image img{height: 500px;}
}
@media screen and (max-width:611px) and (min-width:200px){
    .villa-element .flex-element{flex-direction: column;gap: 30px;}
    .villa-element .flex-element .flex-villa-left-element{width: 100%;order: 1;}
    .villa-element .flex-element .flex-villa-right-element{width: 100%;order: 0;}
    .villa-element .flex-element .flex-villa-right-element .villas-image img{height: 350px;}
    .villa-element .villas-informations{grid-template-columns: 1fr;padding: 30px 0px;}
    .villa-element .villas-informations .element{border-right: 0px;border-bottom: 1px solid var(--darkgrey-color);display: flex;gap: 20px;justify-content: space-between;flex-direction: row;padding: 10px 0px;}
}
@media screen and (max-width:424px) and (min-width:200px){
    .villa-element .villas-buttons .button{font-size: 14px;padding: 12px;}
}
@media screen and (max-width:910px) and (min-width:200px){
    .next-villas-section .next-project .next-element{flex-direction: column;}
    .next-villas-section .next-project .next-element .project-image{width: 100%;height: 53vw;}
}
@media screen and (max-width:470px) and (min-width:200px){
    .extrabig{font-size: 100px;line-height: 100px;}
    .next-villas-section .next-project{margin: 80px 0px;}
}
/*Villas Page code ends*/

/*Villas Inside Page code starts*/
#villasinsidepage .hero-section{width: 100%;height: auto;padding: 180px 0px 20px 0px;}
#villasinsidepage .hero-section h1{color: var(--white-color);}
#villasinsidepage .hero-section .hero-section-element-right .buttons{display: flex;gap: 20px;justify-content: end;}
#villasinsidepage .hero-section .hero-section-element-right .buttons .button:nth-child(1){width: 247px;max-width: 100%;background-color: var(--white-color);}
#villasinsidepage .hero-section .hero-section-element-right .buttons .button:nth-child(1):hover{background-color: rgba(255,255,255,0.7);color: var(--black-color);}
#villasinsidepage .hero-section .hero-section-element-right .buttons .button:nth-child(2){width: 220px;max-width: 100%;border: 1px solid rgba(255,255,255,0.7);color: rgba(255,255,255,0.7);}
#villasinsidepage .hero-section .hero-section-element-right .buttons .button:nth-child(2):hover{border: 1px solid rgba(255,255,255,1);color: rgba(255,255,255,1);}

#villasinsidepage .villas-image{width: 100%;position: relative;}
#villasinsidepage .villas-image img{width: 100%;height: 100%;object-fit: cover;}

#villasinsidepage .villas-informations .informations-elements{color: var(--white-color);width: 100%;padding: 30px 0px;display: grid;grid-template-columns: repeat(5,1fr);}
#villasinsidepage .villas-informations .element{display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 20px;border-right: 1px solid var(--darkgrey-color);padding: 0px 15px;}
#villasinsidepage .villas-informations .element h4{font-size: 28px;}
#villasinsidepage .villas-informations .element:nth-child(1){border-left: 1px solid var(--darkgrey-color);}

#villasinsidepage .villas-concept{padding: 100px 0px;}
#villasinsidepage .villas-concept .villas-concept-left, #villasinsidepage .villas-concept .villas-concept-right{display: flex;flex-direction: column;gap: 30px;}
#villasinsidepage .villas-concept .villas-concept-top{color: var(--white-color);}
#villasinsidepage .villas-concept .villas-concept-content{display: flex;flex-direction: column;gap: 20px;max-width: 620px;}
#villasinsidepage .villas-concept .villas-concept-content h4{color: var(--white-color);}
#villasinsidepage .villas-concept .villas-concept-content p{color: var(--midgrey-color);}
#villasinsidepage .villas-concept .villas-concept-right .villas-concept-bottom ul{list-style: none;}
#villasinsidepage .villas-concept .villas-concept-right .villas-concept-bottom ul li{padding: 10px 0px;position: relative;}
#villasinsidepage .villas-concept .villas-concept-right .villas-concept-bottom ul li:after{content: '';width: 100%;position: absolute;bottom: 0px;left: 0px;height: 1px;background-color: var(--darkgrey-color);}
#villasinsidepage .villas-concept .villas-concept-right .villas-concept-bottom ul li:nth-child(1){padding: 0px 0px 10px 0px;}
#villasinsidepage .villas-concept .villas-concept-right .villas-concept-bottom h4{color: var(--midgrey-color);}

#villasinsidepage .villas-gallery-01 .grid-2-elements{gap: 25px;}
#villasinsidepage .villas-gallery-01 .grid-2-elements img{width: 100%;height: auto;object-fit: cover;}

#villasinsidepage .villas-walking-sustainable{padding: 100px 0px;}
#villasinsidepage .villas-walking-sustainable .villas-walking-sustainable-left,
#villasinsidepage .villas-walking-sustainable .villas-walking-sustainable-right{display: flex;flex-direction: column;gap: 30px;}
#villasinsidepage .villas-walking-sustainable h3{color: var(--white-color);}
#villasinsidepage .villas-walking-sustainable .walking-content,
#villasinsidepage .villas-walking-sustainable .sustainable-content{display: flex;flex-direction: column;gap: 20px;color: var(--midgrey-color);}

#villasinsidepage .villas-gallery-02 .grid-2-elements{gap: 25px;}
#villasinsidepage .villas-gallery-02 .grid-2-elements img{width: 100%;height: auto;object-fit: cover;}

#villasinsidepage .villas-documents{padding: 100px 0px;}
#villasinsidepage .villas-documents .flex-elements{display: flex;flex-direction: column;gap: 30px;}
#villasinsidepage .villas-documents .villas-document-top h3{color: var(--white-color);}
#villasinsidepage .villas-documents .villas-document-bottom{display: flex;flex-direction: column;gap: 20px;}
#villasinsidepage .villas-documents .drawing-image img{width: 920px;max-width: 100%;object-fit: cover;}
#villasinsidepage .villas-documents .drawing-pdf .button{width: 230px;}


@media screen and (max-width:1010px) and (min-width:200px){
    #villasinsidepage .hero-section .grid-2-elements{grid-template-columns: 1fr;}
    #villasinsidepage .hero-section .hero-section-element-right .buttons{justify-content: start;}
}
@media screen and (max-width:540px) and (min-width:360px){
    #villasinsidepage .hero-section .hero-section-element-right .buttons .button:nth-child(1){width: auto;}
    #villasinsidepage .hero-section .hero-section-element-right .buttons .button:nth-child(2){width: auto;}
}
@media screen and (max-width:359px) and (min-width:200px){
    #villasinsidepage .hero-section .hero-section-element-right .buttons .button:nth-child(1){width: auto;height: 50px;padding: 10px 15px;}
    #villasinsidepage .hero-section .hero-section-element-right .buttons .button:nth-child(2){width: auto;height: 50px;padding: 10px 15px;}
}
@media screen and (max-width:670px) and (min-width:200px){
    #villasinsidepage .villas-informations .informations-elements{grid-template-columns: 1fr;}
    #villasinsidepage .villas-informations .element{flex-direction: row;justify-content: space-between;border-bottom: 1px solid var(--darkgrey-color);border-right: 0px;border-left: 0px;padding: 10px 0px;}
    #villasinsidepage .villas-informations .element:nth-child(1){border-left: 0px;}
    #villasinsidepage .villas-informations .element h4{font-size: 20px;line-height: 24px;}
}
@media screen and (max-width:900px) and (min-width:200px){
    #villasinsidepage .villas-concept .grid-2-elements{grid-template-columns: 1fr;gap: 70px;}
    #villasinsidepage .villas-concept .villas-concept-content{max-width: 100%;}

    #villasinsidepage .villas-walking-sustainable .grid-2-elements{grid-template-columns: 1fr;gap: 70px;}
}
@media screen and (max-width:500px) and (min-width:200px){
    #villasinsidepage .villas-concept .villas-concept-right .villas-concept-bottom h4{font-size: 20px;}
} 
@media screen and (max-width:600px) and (min-width:200px){
    #villasinsidepage .villas-informations .informations-elements{padding: 15px 0px;}
    #villasinsidepage .villas-concept{padding: 70px 0px;}
    #villasinsidepage .villas-walking-sustainable{padding: 70px 0px;}
    #villasinsidepage .villas-documents{padding: 70px 0px;}
}
/*Villas Inside Page code ends*/

/*Sustainability Page code starts*/
/*
#sustainabilitypage .hero-section{position: sticky;top: 0px;z-index: 1;}
#sustainabilitypage .about-section{position: relative;z-index: 2;background-color: var(--black-color);}
#sustainabilitypage .opportunity-section{position: relative;z-index: 2;}
*/

#sustainabilitypage .about-section .about-section-title{padding-bottom: 60px;}
#sustainabilitypage .about-section .about-elements-left{display: flex;flex-direction: column;gap: 50px;}
#sustainabilitypage .about-section .about-elements-left .about-section-top-elements,
#sustainabilitypage .about-section .about-elements-left .about-section-middle-elements,
#sustainabilitypage .about-section .about-elements-left .about-section-bottom-elements{width: 100%;position: relative;display: flex;flex-direction: column;gap: 20px;max-width: 620px;}
#sustainabilitypage .about-section .about-elements-left .section-content{width: 100%;position: relative;display: flex;flex-direction: column;gap: 20px;}
#sustainabilitypage .about-section .about-section-middle-elements .section-content{display: flex;flex-direction: column;gap: 0px;}
#sustainabilitypage .about-section .about-elements-left .section-content ul{list-style: none;}
#sustainabilitypage .about-section .about-elements-left .section-content ul li{padding: 10px 0px;color: var(--midgrey-color);}
#sustainabilitypage .about-section .about-elements-left .section-content .button{margin-top: 30px;}
#sustainabilitypage .about-section .about-elements-left h4{color: var(--white-color);}
#sustainabilitypage .about-section .about-elements-left p{color: var(--midgrey-color);}
#sustainabilitypage .about-section .about-elements-right .image-element img {width: 70%;height: 100%;object-fit: cover;display: flex;margin: auto;}

@media screen and (max-width:830px) and (min-width:200px){
    #sustainabilitypage .about-section .grid-2-elements{grid-template-columns: 1fr;}
    #sustainabilitypage .about-section .about-elements-left .about-section-top-elements, #sustainabilitypage .about-section .about-elements-left .about-section-middle-elements, #sustainabilitypage .about-section .about-elements-left .about-section-bottom-elements{max-width: 100%;}
}
/*Sustainability Page code ends*/

/*Story Page code starts*/
/*
#storypage .hero-section{position: sticky;top: 0px;z-index: 1;}
#storypage .about-section{position: relative;z-index: 2;background-color: var(--black-color);}
#storypage .story-section{position: relative;z-index: 2;background-color: var(--black-color);}
#storypage .opportunity-section{position: relative;z-index: 2;}
*/

#storypage .story-section .story-section-top,
#storypage .story-section .story-section-bottom{padding-bottom: 80px;}
#storypage .story-section .story-section-top .story-section-top-left,
#storypage .story-section .story-section-bottom .story-section-bottom-right{margin: auto 0px;}
#storypage .story-section .image-element img{width: 50%;height: auto;object-fit: cover;display: flex;margin: auto;}
#storypage .story-section .section-content{max-width: 620px;}
#storypage .story-section .section-content ul{list-style: none;}
#storypage .story-section .section-content ul li{padding: 30px 0px;display: flex;flex-direction: column;gap: 15px;}
#storypage .story-section .section-content ul li h4{color: var(--white-color);}
#storypage .story-section .section-content ul li p{color: var(--midgrey-color);}

@media screen and (max-width:1467px) and (min-width:1061px){
    #storypage .story-section .image-element img{width: 70%;}
}
@media screen and (max-width:1060px) and (min-width:200px){
    #storypage .story-section .image-element img{width: 100%;}
}
@media screen and (max-width:820px) and (min-width:200px){
    #storypage .story-section .story-section-top .grid-2-elements,
    #storypage .story-section .story-section-bottom .grid-2-elements{grid-template-columns: 1fr;}
    #storypage .story-section .section-content{max-width: 100%;}
    #storypage .story-section .story-section-top .story-section-top-right,
    #storypage .story-section .story-section-bottom .story-section-bottom-left{display: flex;justify-content: center;}
    #storypage .story-section .story-section-bottom .story-section-bottom-right{order: 0;}
    #storypage .story-section .story-section-bottom .story-section-bottom-left{order: 1;}
}
/*Story Page code ends*/

/*Opportunity Page code starts*/
/*
#opportunitypage .hero-section{position: sticky;top: 0px;z-index: 1;}
#opportunitypage .about-section{position: relative;z-index: 2;background-color: var(--black-color);}
#opportunitypage .story-section{position: relative;z-index: 2;background-color: var(--black-color);}
#opportunitypage .opportunity-page-section{position: relative;z-index: 2;background-color: var(--black-color);}
*/

#opportunitypage .opportunity-page-section .opportunity-section-top,
#opportunitypage .opportunity-page-section .opportunity-section-bottom{padding-bottom: 80px;}
#opportunitypage .opportunity-page-section .opportunity-grid-element-right{margin: auto 0px;}
#opportunitypage .opportunity-page-section .opportunity-grid-element-right .button{margin-top: 40px;}
#opportunitypage .opportunity-page-section .image-element img{width: 55%;height: auto;object-fit: cover;display: flex;margin: auto;}
#opportunitypage .opportunity-page-section .section-content{max-width: 630px;display: flex;flex-direction: column;gap: 20px;}
#opportunitypage .opportunity-page-section .section-content h4, #opportunitypage .opportunity-page-section .section-content p{color: var(--midgrey-color);}
#opportunitypage .opportunity-page-section .section-content h4{text-transform: uppercase;}
#opportunitypage .opportunity-page-section .section-content h2{padding: 30px 0px;}
#opportunitypage .opportunity-page-section .section-content h2, #opportunitypage .opportunity-page-section .section-content h3{color: var(--white-color);text-transform: uppercase;}
#opportunitypage .opportunity-page-section .section-content h3{padding-bottom: 20px;}
#opportunitypage .opportunity-page-section .section-content ul{list-style: none;}
#opportunitypage .opportunity-page-section .section-content ul li{color: var(--midgrey-color);padding: 20px 0px;}
#opportunitypage .opportunity-page-section .section-content ul li:nth-child(1){padding: 0px 0px 20px 0px;}

@media screen and (max-width:1669px) and (min-width:1415px){
    #opportunitypage .opportunity-page-section .image-element img{width: 65%;}
}
@media screen and (max-width:1414px) and (min-width:1243px){
    #opportunitypage .opportunity-page-section .image-element img{width: 75%;}
}
@media screen and (max-width:1242px) and (min-width:200px){
    #opportunitypage .opportunity-page-section .image-element img{width: 100%;}
}
@media screen and (max-width:1000px) and (min-width:200px){
    #opportunitypage .opportunity-page-section .opportunity-section-top .grid-2-elements,
    #opportunitypage .opportunity-page-section .opportunity-section-bottom .grid-2-elements{grid-template-columns: 1fr;gap: 70px;}
    #opportunitypage .opportunity-page-section .opportunity-section-top .opportunity-grid-element-right,
    #opportunitypage .opportunity-page-section .opportunity-section-bottom .opportunity-grid-element-left{display: flex;margin: auto;}
    #opportunitypage .opportunity-page-section .section-content{max-width: 100%;}
    #opportunitypage .opportunity-page-section .opportunity-grid-element-right{order: 0;}
    #opportunitypage .opportunity-page-section .opportunity-grid-element-left{order: 1;}
}
/*Opportunity Page code ends*/

/*Location Page code starts*/
/*
#locationpage .hero-section{position: sticky;top: 0px;z-index: 1;}
#locationpage .about-section{position: relative;z-index: 2;background-color: var(--black-color);}
#locationpage .location-page-section{position: relative;z-index: 2;background-color: var(--black-color);}
#locationpage .pogonia-palairos{position: relative;z-index: 2;background-color: var(--black-color);}
#locationpage .activities-section{position: relative;z-index: 2;background-color: var(--black-color);}
*/

.location-page-section{padding-bottom: 100px;}
.location-page-section .section-content{max-width: 620px;display: flex;flex-direction: column;gap: 20px;}
.location-page-section .section-content h4{color: var(--white-color);text-transform: uppercase;}
.location-page-section .section-content p{color: var(--midgrey-color);}
.location-page-section .location-buttons{display: flex;gap: 20px;padding-top: 40px;}
.location-page-section .location-grid-right .image-element{display: flex;justify-content: center;}
.location-page-section .location-grid-right .image-element img{width: 65%;height: auto;object-fit: cover;}

.activities-section{padding: 100px 0px;}
.activities-section .activities-grid-left .image-element{display: flex;justify-content: center;}
.activities-section .activities-grid-left img{width: 65%;height: auto;object-fit: cover;}
.activities-section .activities-grid-right{display: flex;flex-direction: column;gap: 40px;}
.activities-section .section-big-title h1{color: var(--white-color);}
.activities-section .section-content{max-width: 620px;}
.activities-section .section-content .element{padding: 20px 0px;}
.activities-section .section-content .element:nth-child(1){padding: 0px 0px 20px 0px;}
.activities-section .section-content .element h4{color: var(--white-color);}
.activities-section .section-content .element p{color: var(--midgrey-color);}

@media screen and (max-width:1400px) and (min-width:1240px){
    .location-page-section .location-grid-right .image-element img{width: 80%;}
}
@media screen and (max-width:1239px) and (min-width:951px){
    .location-page-section .location-grid-right .image-element img{width: 100%;}
}
@media screen and (max-width:950px) and (min-width:200px){
    .location-page-section .grid-2-elements{grid-template-columns: 1fr;gap: 70px;}
    .location-page-section .location-grid-right .image-element img{width: 65%;}
}
@media screen and (max-width:510px) and (min-width:200px){
    .location-page-section .location-buttons{gap: 10px;}
    .location-page-section .location-buttons .button{width: 100%;}
}
@media screen and (max-width:1253px) and (min-width:920px){
    .activities-section .activities-grid-left img{width: 85%;}
}
@media screen and (max-width:919px) and (min-width:200px){
    .activities-section .activities-grid-left img{width: 65%;}
    .activities-section .grid-2-elements{grid-template-columns: 1fr;gap: 70px;}
    .activities-section .activities-grid-left{order: 1;}
    .activities-section .activities-grid-right{order: 0;}
    .activities-section .section-content{max-width: 100%;}
}
/*Location Page code ends*/

/*Gallery Page code starts*/
#gallerypage .hero-section{width: 100%;height: auto;padding: 180px 0px 140px 0px;}
#gallerypage .hero-section h1{color: var(--white-color);}
#gallerypage .tabs-buttons{display: flex;gap: 10px;}
#gallerypage .tab-button{width: 120px;height: 40px;background-color: transparent;border: 1px solid rgba(255,255,255,0.7);border-radius: 40px;color: rgba(255,255,255,0.7);cursor: pointer;}
#gallerypage .tab-button:hover, #gallerypage .tab-button.active{border: 1px solid rgba(255,255,255,1);color: rgba(255,255,255,1);transition: 0.3s ease;}
#gallerypage .tabcontent{display: none;}
#gallerypage .tab-galleries{padding-top: 25px;}
#gallerypage .gallholder{padding-bottom: 100px;}

@media screen and (max-width:470px) and (min-width:200px){
    #gallerypage .tabs-buttons{display: grid;grid-template-columns: repeat(4,1fr);gap: 10px;overflow: scroll;justify-content: start;padding-bottom: 20px;}
}
/*Gallery Page code ends*/

/*Contact Page code starts*/
#contactpage .contact-us-section{width: 100%;position: relative;padding: 180px 0px 0px 0px;}
#contactpage .contact-us-section .grid-2-elements{padding-bottom: 120px;border-bottom: 1px solid var(--darkgrey-color);}
#contactpage .contact-us-section .section-title{padding-bottom: 20px;}
#contactpage .contact-us-section .section-content{display: flex;flex-direction: column;gap: 20px;max-width: 620px;}
#contactpage .contact-us-section .contact-us-grid-left{color: var(--white-color);}
#contactpage .contact-us-section .contact-us-grid-right{display: flex;gap: 120px;}
#contactpage .contact-us-section .contact-us-grid-right .grid-right-1{display: flex;flex-direction: column;gap: 50px;}
#contactpage .contact-us-section .contact-us-grid-right .grid-right-2{display: flex;flex-direction: column;justify-content: space-between;}
#contactpage .contact-us-section .contact-us-grid-right .element{display: flex;flex-direction: column;gap: 10px;}
#contactpage .contact-us-section .contact-us-grid-right .element .title p{color: var(--white-color);}
#contactpage .contact-us-section .contact-us-grid-right .element ul{list-style: none;}
#contactpage .contact-us-section .contact-us-grid-right .element ul li,
#contactpage .contact-us-section .contact-us-grid-right .element ul li a{color: var(--white-color);text-decoration: none;font-size: 16px;line-height: 26px;}
#contactpage .contact-us-section .contact-us-grid-right .element ul li a:hover{opacity: 0.7;transition: 0.3s ease;}

#contactpage .contact-form .grid-2-elements{padding: 120px 0px;border-bottom: 1px solid var(--darkgrey-color);}
#contactpage .contact-form .contact-form-left{display: flex;flex-direction: column;justify-content: space-between;}
#contactpage .contact-form .contact-form-left .section-image img{width: 55px;height: 55px;object-fit: contain;}

@media screen and (max-width:1026px) and (min-width:882px){
    #contactpage .contact-us-section .contact-us-grid-right{gap: 60px;}
}
@media screen and (max-width:881px) and (min-width:200px){
    #contactpage .contact-us-section .grid-2-elements{grid-template-columns: 1fr;gap: 100px;}
    #contactpage .contact-us-section .contact-us-grid-right{gap: 20px;justify-content: space-between;}
}
@media screen and (max-width:500px) and (min-width:200px){
    #contactpage .contact-us-section .contact-us-grid-right .button{width: 100%;}
}
/*Contact Page code ends*/

/*All Pages code starts*/
#allpages .allpages-section{width: 100%;position: relative;padding: 180px 0px 100px 0px;}
#allpages .allpages-section .grid-element-left p{color: var(--white-color);}
#allpages .allpages-section .allpages-content{color: var(--white-color);display: flex;flex-direction: column;gap: 20px;max-width: 720px;}
#allpages .allpages-section .allpages-content a{color: var(--white-color);}
#allpages .allpages-section .allpages-content a:hover{opacity: 0.7;}
#allpages .allpages-section .allpages-content img{width: 100%;object-fit: cover;}

@media screen and (max-width:800px) and (min-width:200px){
    #allpages .allpages-section .grid-2-elements{grid-template-columns: repeat(1,1fr);}
}
/*All Pages code ends*/

/*Footer Elements starts*/
#footer{width: 100%;position: relative;padding: 100px 0px 20px 0px;}
#footer .footer-top{padding-bottom: 30px;}
#footer .footer-top .flex-elements{width: 100%;position: relative;display: flex;justify-content: space-between;gap: 20px;}
#footer .footer-top .flex-elements .footer-top-element-right{margin: auto 0px 0px 0px;}
#footer .footer-top .flex-elements .footer-top-element-right{display: flex;list-style: none;gap: 10px;}
#footer .footer-top .flex-elements .button.white{width: 101px;height: 48px;}
#footer .footer-middle{width: 100%;position: relative;}
#footer .footer-middle .flex-elements{width: 100%;position: relative;display: flex;justify-content: space-between;gap: 20px;border-top: 1px solid var(--darkgrey-color);padding: 50px 0px;}
#footer .footer-middle .flex-elements:last-child{border-bottom: 1px solid var(--darkgrey-color);}
#footer .footer-middle .flex-elements p{color: var(--white-color);font-size: 16px;line-height: 24px;}
#footer .footer-middle .flex-elements a{color: var(--white-color);text-decoration: none;}
#footer .footer-middle .flex-elements a:hover{opacity: 0.7;}
#footer .footer-middle .flex-elements .element-informations ul{display: flex;gap: 20px;}
#footer .footer-middle .footer-middle-bottom{padding: 80px 0px;}
#footer .footer-middle .footer-middle-bottom .button{width: fit-content;margin: 0px 0px 0px auto;}
#footer .footer-bottom{display: grid;grid-template-columns: repeat(3,1fr);overflow: hidden;}
#footer .footer-bottom p, #footer .footer-bottom a{color: var(--white-color);text-decoration: none;font-size: 14px;line-height: 20px;}
#footer .footer-bottom a:hover{opacity: 0.7;}
#footer .footer-bottom p:nth-child(2){text-align: center;}
#footer .footer-bottom p:nth-child(3){text-align: right;}

.fluentform{position: relative;}
.fluentform .ff-el-group{margin-bottom: 30px!important;}
.fluentform .villas-elements .ff-el-form-check{margin: 0px!important;}
.fluentform .villas-elements .ff-el-input--content{display: flex;gap: 15px;}
.ff-default .ff-el-input--label label{font-size: 18px;line-height: 24px!important;font-weight: 400!important;color: var(--white-color);}
.ff-default .ff-el-form-control{border-left: 0px!important;border-top: 0px!important;border-right: 0px!important;border-bottom: 1px solid var(--white-color)!important;background-color: transparent!important;border-radius: 0px!important;color: var(--white-color)!important;}
.fluentform .villas-elements .ff-el-form-check label.ff-el-form-check-label{position: relative;color: var(--white-color);border: 1px solid var(--white-color);display: flex;flex-direction: column;justify-content: center;align-items: center;width: 82px;height: 40px;border-radius: 60px;overflow: hidden;margin-bottom: 0px!important;}
.fluentform .villas-elements .ff-el-form-check label.ff-el-form-check-label span{width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.fluentform .villas-elements .ff-el-form-check-label .ff-el-form-check-input{width: auto;position: absolute;top: -14px!important;left: 0px;height: auto;background: transparent;color: #fff;z-index: -1;}
.fluentform .privacy{position: absolute;width: 70%;margin-bottom: 0px!important;height: 60px;display: flex;align-items: center;}
.fluentform .privacy span{color: var(--white-color);}
.ff_submit_btn_wrapper{margin: 0px 0px 0px auto;width: 30%;}
.ff-default .ff_btn_style{width: 213px!important;height: 60px!important;font-weight: 400!important;font-size: 18px!important;display: flex!important;justify-content: center!important;align-items: center!important;border: 1px solid var(--white-color)!important;background-color: var(--black-color)!important;color: var(--white-color)!important;border-radius: 60px!important;max-width: 100%!important;}
.ff-default .ff_btn_style:hover{background-color: var(--white-color)!important;color:var(--black-color)!important;}
/*Footer Elements ends*/

/*Overlay Enquiry Element starts*/
#overlay-enquiry{width: 100%;height: 100vh;position: fixed;top: 0px;right: -100%;z-index: 100;background-color: rgba(0,0,0,0.8);/*transition: 0.7s ease;*/overflow-y: scroll;}
#overlay-enquiry .enquiry-element{width: 40%;height: 100vh;background: var(--black-color);position: absolute;top: 0px;right: -100%;padding: 20px;}
#overlay-enquiry .enquiry-element .element-top{padding: 0px 0px 20px 0px;display: flex;justify-content: end;}
#overlay-enquiry .enquiry-element .element-top .btn{width: 40px;height: 40px;border-radius: 60px;background-color: var(--white-color);display: flex;justify-content: center;align-items: center;cursor: pointer;}
#overlay-enquiry .enquiry-element .element-top .btn span{width: 25px;height: 2px;background-color: var(--black-color);position: absolute;}
#overlay-enquiry .enquiry-element .element-top .btn span:nth-child(1){transform: rotate(45deg);}
#overlay-enquiry .enquiry-element .element-top .btn span:nth-child(2){transform: rotate(-45deg);}

#overlay-enquiry .element-middle .element-middle-top{width: 94%;margin-top: -40px;}
#overlay-enquiry .element-middle .element-middle-bottom{padding-top: 40px;}
#overlay-enquiry .element-middle h4{color: var(--white-color);text-transform: uppercase;}
#overlay-enquiry .element-middle p{color: var(--white-color);padding-bottom: 10px;}
#overlay-enquiry .element-middle ul li a{color: var(--white-color);text-decoration: none;font-size: 16px;}
#overlay-enquiry .element-middle ul li a:hover{opacity: 0.7;}
#overlay-enquiry .element-bottom{padding-top: 40px;}
#overlay-enquiry .element-bottom h4{color: var(--white-color);}
#overlay-enquiry .element-bottom .fluentform{padding-top: 20px;}
#overlay-enquiry .element-bottom .fluentform .villas-elements .ff-el-input--content{overflow-y: scroll;}
#overlay-enquiry .element-bottom .fluentform .ff-el-input--label{padding-bottom: 15px!important;}
#overlay-enquiry .element-bottom .fluentform .privacy{width: 50%;}
#overlay-enquiry .element-bottom .ff_submit_btn_wrapper{width: 50%;}
#overlay-enquiry .element-bottom .ff_submit_btn_wrapper .ff-btn{margin-left: auto!important;}
#overlay-enquiry  .ff-el-form-check input[type="checkbox"]:checked + span{background-color: var(--white-color);color: var(--black-color);}

@media screen and (max-height:940px){
    #overlay-enquiry .enquiry-element{height: auto;}
}
@media screen and (max-width:940px) and (min-width:720px){
    #overlay-enquiry{background-color: var(--black-color);}
    #overlay-enquiry .enquiry-element{width:100%;}
    #overlay-enquiry .element-middle .element-middle-top{margin: 0px;width: 100%;}
    #overlay-enquiry .element-bottom .fluentform .privacy{width: 100%;}
    #overlay-enquiry .element-bottom .ff_submit_btn_wrapper .ff-btn{margin-left: auto!important;}
}
@media screen and (max-width:719px) and (min-width:200px){
    #overlay-enquiry{background-color: var(--black-color);}
    #overlay-enquiry .enquiry-element{width:100%;}
    #overlay-enquiry .element-middle .element-middle-top{margin: 0px;width: 100%;}
    #overlay-enquiry .element-bottom .fluentform .privacy{width: 100%;}
    #overlay-enquiry .element-bottom .ff_submit_btn_wrapper .ff-btn{margin-left: 0px!important;}
}
/*Overlay Enquiry Element ends*/

/*Overlay Element starts*/
#overlay{width: 100%;height: 0vh;background: var(--black-color);position: fixed;top: 0px;left: 0px;z-index: 99;transition: 0.7s ease;opacity: 0;visibility: hidden;overflow-y: scroll;}
#overlay.open{height: 100vh;transition: 0.7s ease;opacity: 1;visibility: visible;}
#overlay .pagewrap{height: 100%;display: flex;flex-direction: column;justify-content: space-between;gap: 20px;}

#overlay .overlay-menu-top{width: 100%;height: 100%;}
#overlay .overlay-menu-bottom{width: 100%;}
#overlay .overlay-menu-top{padding-top: 120px;}
#overlay .overlay-menu-top .grid-2-elements{height: 100%;justify-content: center;align-items: center;}
#overlay .overlay-menu-top .grid-element-menu-left ul li{padding-bottom: 7px;}
#overlay .overlay-menu-top .grid-element-menu-left ul li a{text-decoration: none;color: var(--white-color);font-size: 24px;line-height: 28px;transition: 0.4s ease;}
#overlay .overlay-menu-top .grid-element-menu-left ul li a:hover{padding-left: 10px;transition: 0.4s ease;opacity: 0.7;}
#overlay .overlay-menu-top .grid-element-menu-right{height: 282px;display: flex;flex-direction: column;justify-content: space-between;}
#overlay .overlay-menu-top .grid-element-menu-right ul li{padding-bottom: 5px;}
#overlay .overlay-menu-top .grid-element-menu-right ul li p{color: var(--white-color);}
#overlay .overlay-menu-top .grid-element-menu-right ul li a{color: var(--white-color);text-decoration: none;}
#overlay .overlay-menu-top .grid-element-menu-right ul li a:hover{opacity: 0.7;}
#overlay .overlay-menu-bottom .scroll-elements{display: grid;grid-template-columns: repeat(8,1fr);gap: 20px;overflow-x: scroll;padding-bottom: 25px;}
#overlay .villa-element{width: 75vw;height: 100%;border: 0px;padding: 0px;}
#overlay .villa-element .villa-element-image{width: 100%;}
#overlay .villa-element .villa-element-image a{display: block;}
#overlay .villa-element .villa-element-image img{width: 100%;height: 100%;object-fit: cover;}
#overlay .villa-element .villa-element-title a{text-decoration: none;}
#overlay .villa-element .villa-element-title h4{color: var(--white-color);}

@media screen and (max-width:520px) and (min-width:200px){
    #overlay .overlay-menu-top .grid-2-elements{grid-template-columns: repeat(1,1fr);}
    #overlay .overlay-menu-bottom{width: 100%;margin-bottom: 50px;}
    #overlay .overlay-menu-top .grid-element-menu-right{height: auto;gap: 20px;}
}
/*Overlay Element ends*/

/*Pages that hasn't something code starts*/
.page-id-7 .form-section{display: none;}
.error404 .form-section{display: none;}
.error404 .hero-section .titlos-element{left: 50%;transform: translate(-50%,-50%);text-align: center;display: flex;flex-direction: column;gap: 20px;}
.error404 .hero-section .titlos-element .extrabig, .error404 .hero-section .titlos-element h3{color: var(--white-color);}
.error404 .hero-section .titlos-element .button{margin: auto;}

@media screen and (max-width:743px) and (min-width:542px){
    .error404 .hero-section .titlos-element{max-width: 100%;width: 100%}
    .error404 .hero-section .titlos-element .extrabig{font-size: 90px;line-height: 90px;}
}
@media screen and (max-width:541px) and (min-width:446px){
    .error404 .hero-section .titlos-element{max-width: 100%;width: 100%}
    .error404 .hero-section .titlos-element .extrabig{font-size: 75px;line-height: 75px;}
    .error404 .hero-section .titlos-element h3{font-size: 24px;line-height: 30px;}
}
@media screen and (max-width:445px) and (min-width:200px){
    .error404 .hero-section .titlos-element{max-width: 100%;width: 100%}
    .error404 .hero-section .titlos-element .extrabig{font-size: 60px;line-height: 60px;}
    .error404 .hero-section .titlos-element h3{font-size: 20px;line-height: 28px;}
}
/*Pages that hasn't something code ends*/

/*Media Queries Code starts*/
@media screen and (max-width:620px) and (min-width:200px){
    .scroll-section .element-top img{max-width: 150px;}
    .scroll-section .pagewrap .element-bottom .image-element{width: 40vw;height: 60vw;}
}

@media screen and (max-width:550px) and (min-width:200px){
    #villaspage .hero-section .villaspage-top-element{padding-bottom: 70px;}
    #gallerypage .hero-section{padding: 180px 0px 70px 0px;}
    .villas-section{padding-bottom: 0px;}
    .form-section .line{margin: 0px 0px 50px 0px;}
}

@media screen and (max-width:620px) and (min-width:390px){
    .hero-section .titlos-element h1{font-size: 50px;line-height: 58px;}
    .hero-section .titlos-element h1 em{font-size: 60px;}
}
@media screen and (max-width:479px) and (min-width:200px){
    .hero-section .titlos-element h1{font-size: 40px;line-height: 48px;}
    .hero-section .titlos-element h1 em{font-size: 40px;}
}

@media screen and (max-width:567px) and (min-width:446px){
    #villaspage .hero-section h1{font-size: 50px;line-height: 60px;}
}
@media screen and (max-width:445px) and (min-width:200px){
    #villaspage .hero-section h1{font-size: 40px;line-height: 50px;}
}

@media screen and (max-width:890px) and (min-width:200px){
    .sustainability-section .grid-2-elements{grid-template-columns: 1fr;gap: 70px;}
}

@media screen and (max-width:812px) and (min-width:200px){
    .mySwiper .swiper-slide .swiper-slide-image{height: 60vh;}
    .mySwiper .swiper-slide .swiper-slide-content{padding-top: 80px;}
    .mySwiper .swiper-buttons .swiper-pagination{width: 100%;margin-left: 0px;}
    .swiper-button-prev, .swiper-button-next{z-index: 11!important;}
}

@media screen and (max-width:812px) and (min-width:595px){
    .mySwiper .swiper-buttons{bottom: 311px;width: 95%;left: 0px;right: 0px;margin: auto;}
}
@media screen and (max-width:594px) and (min-width:526px){
    .mySwiper .swiper-buttons{bottom: 332px;width: 95%;left: 0px;right: 0px;margin: auto;}
}
@media screen and (max-width:525px) and (min-width:437px){
    .mySwiper .swiper-buttons{bottom: 357px;width: 95%;left: 0px;right: 0px;margin: auto;}
}
@media screen and (max-width:436px) and (min-width:413px){
    .mySwiper .swiper-buttons{bottom: 385px;width: 95%;left: 0px;right: 0px;margin: auto;}
}
@media screen and (max-width:412px) and (min-width:200px){
    .mySwiper .swiper-buttons{bottom: 406px;width: 95%;left: 0px;right: 0px;margin: auto;}
}

@media screen and (max-width:1000px) and (min-width:200px){
    .pagewrapbig{padding: 0px 20px;}
    .faq-container .faq .faq-question{padding: 0px 20px;}
    .faq-container .faq .faq-answer{padding: 50px 40px 20px 40px;}
}
@media screen and (max-width:640px) and (min-width:200px){
    .faq-section .section-top .flex-elements{flex-direction: column;justify-content: center;align-items: center;gap: 30px;}
}

@media screen and (max-width:727px) and (min-width:577px){
    .location-section .location-content .section-title img{width: 100px;}
    .location-section .section-elements-bottom{margin-top: 0px;padding-top: 40px;}
    .location-section .section-elements-bottom .grid-element-left{margin: auto 0px 0px 0px;}
    .location-section .section-elements-bottom .grid-element-left img{width: 80%;}
}
@media screen and (max-width:576px) and (min-width:200px){
    .location-section .location-content .section-title img{width: 100px;}
    .location-section .section-elements-bottom{margin-top: 0px;padding-top: 40px;}
    .location-section .section-elements-bottom .grid-2-elements{grid-template-columns: repeat(1,1fr);}
    .location-section .section-elements-bottom .grid-element-left{display: none;}
}

@media screen and (max-width:900px) and (min-width:200px){
    .about-section .grid-2-elements{grid-template-columns: repeat(1,1fr);}
    #theprojectpage .about-section .about-elements-right .image-element{width: 50vw;height: 70vw;}
    #theprojectpage .about-section .section-content{max-width: 100%;}
}

@media screen and (max-width:1221px) and (min-width:924px){
    #footer .footer-top .flex-elements{flex-direction: column;align-items: center;gap: 20px;}
}
@media screen and (max-width:923px) and (min-width:200px){
    #footer .footer-top .flex-elements{display: block;}
    #footer .footer-top .flex-elements .footer-top-element-left{text-align: center;padding-bottom: 30px;}
    #footer .footer-top .flex-elements .footer-top-element-right{display: grid;grid-template-columns: repeat(8,1fr);gap: 10px;overflow: scroll;padding-bottom: 20px;}
}
@media screen and (max-width:865px) and (min-width:200px){
    .footer-element-middle{display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: auto auto;}
    #footer .footer-middle .flex-elements:nth-child(1){order: 0;grid-column: 1/3;}
    #footer .footer-middle .flex-elements:nth-child(2){order: 2;padding: 20px;border-bottom: 1px solid var(--darkgrey-color);justify-content: start;}
    #footer .footer-middle .flex-elements:nth-child(3){order: 1;border-right: 1px solid var(--darkgrey-color);}

    #footer .footer-middle .flex-elements{flex-direction: column;padding: 20px 0px;}
    #footer .footer-middle .flex-elements .element-informations ul{flex-direction: column;gap: 10px;}

    #footer .footer-middle .footer-middle-bottom .button{margin: auto auto auto auto;}

    #footer .footer-bottom{grid-template-columns: 1fr;gap: 10px;} 
    #footer .footer-bottom p:nth-child(2), #footer .footer-bottom p:nth-child(3){text-align: left;}
}
@media screen and (max-width:1048px) and (min-width:804px){
    #contactpage .contact-form .grid-2-elements{grid-template-columns: 1fr;}
    #contactpage .contact-form .contact-form-left{flex-direction: row;}
    #contactpage .contact-form .contact-form-left .section-title{margin: auto 0px;}
}
@media screen and (max-width:803px) and (min-width:310px){
    #contactpage .contact-form .grid-2-elements{grid-template-columns: 1fr;}
    #contactpage .contact-form .contact-form-left{flex-direction: row;}
    #contactpage .contact-form .contact-form-left .section-title{margin: auto 0px;}
    .fluentform .villas-elements .ff-el-input--content{display: grid;grid-template-columns: repeat(4,1fr);}
    .fluentform .villas-elements .ff-el-form-check label.ff-el-form-check-label{width: 100%;}
}
@media screen and (max-width:309px) and (min-width:200px){
    #contactpage .contact-form .grid-2-elements{grid-template-columns: 1fr;}
    #contactpage .contact-form .contact-form-left{flex-direction: row;}
    #contactpage .contact-form .contact-form-left .section-title{margin: auto 0px;}
    .fluentform .villas-elements .ff-el-input--content{display: grid;grid-template-columns: repeat(2,1fr);}
    .fluentform .villas-elements .ff-el-form-check label.ff-el-form-check-label{width: 100%;}
}

@media screen and (max-width:748px) and (min-width:200px){
    .form-section .fluentform .privacy{width: 100%;}
    .fluentform .privacy{position: relative;width: 100%;margin-bottom: 25px!important;height: auto;display: flex;align-items: center;}
    .fluentform .privacy span{color: var(--white-color);}
    .ff_submit_btn_wrapper{margin: 0px;width: 100%;}
}
/*Media Queries Code ends*/

/* --- mobile/Safari + carousel polish (added) --- */
.mySwiper .swiper-buttons{ z-index: 12; }
.mySwiper .swiper-button-next, .mySwiper .swiper-button-prev{
  width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.9);
  border-radius: 9999px; background: rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s ease;
}
.mySwiper .swiper-button-next:hover, .mySwiper .swiper-button-prev:hover{ background: rgba(0,0,0,.5); }
.mySwiper .swiper-button-next img, .mySwiper .swiper-button-prev img{
  width: 20px; height: 20px; filter: brightness(0) invert(1);
}
.mySwiper .swiper-buttons .swiper-pagination{ color:#fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }

/* Fix: villas-section titles on white "lefko" relief were white-on-white. */
.villas-section.lefko .section-bigtitle h1,
.villas-section.lefko .section-bigtitle h2,
.villas-section.lefko .section-bigtitle h1 em,
.villas-section.lefko .section-bigtitle h2 em{ color: var(--black-color); }

/* Contact form — matched to the8's FluentForm metrics: two equal columns with a
   15px gap, underline inputs at 39px height, 18px regular labels, 30px group gaps,
   pill submit. (Their plugin CSS isn't in the theme mirror, so it's set here.) */
.fluentform .ff-el-group{ margin-bottom: 30px; }
.fluentform .ff-t-container{ display:flex; gap:15px; flex-wrap:nowrap; margin-bottom:0; }
.fluentform .ff-t-container > .ff-t-cell{ flex:1 1 0; min-width:0; padding:0; }
.fluentform .ff-el-input--label{ margin-bottom:6px; }
.fluentform .ff-el-input--label label{ font-size:18px; font-weight:400; text-transform:none; letter-spacing:normal; margin-bottom:0; }
.fluentform .ff-el-form-control{ width:100%; height:39px; padding:11px 15px; font-size:14px; }
.fluentform textarea.ff-el-form-control{ height:auto; min-height:46px; }
.fluentform .ff-btn-submit{ width:180px; max-width:100%; height:60px; border-radius:60px; border:1px solid var(--black-color); background:#fff; color:#000; font-size:18px; text-transform:none; letter-spacing:normal; }
.fluentform .ff-btn-submit:hover{ background:var(--black-color); color:#fff; }
@media (max-width: 600px) {
  .fluentform .ff-t-container{ flex-wrap:wrap; }
  .fluentform .ff-t-container > .ff-t-cell{ flex:1 1 100%; }
}

/* Smooth FAQ accordion — the8 toggles display:none/block (no animation). Make
   the answer height-animated; Motion sets inline max-height on open / clears on
   close, so it eases both ways. */
.faq-section .faq-answer{ display:block; overflow:hidden; max-height:0; transition:max-height .5s cubic-bezier(.16,1,.3,1); }
.faq-section .faq .faq-btn{ transition: transform .4s ease; }

/* Mobile overlay menu: fit the whole menu in one screen (no inner scroll).
   the8's stock layout (120px top pad + tall right block) overflowed on phones,
   forcing an awkward scroll. Compact it to 100dvh and center it. */
@media (max-width: 990px) {
  #overlay{ height:0; overflow:hidden; }
  #overlay.open{ height:100dvh; }
  #overlay .pagewrap{ height:100dvh; justify-content:center; gap:0; padding-top:0; padding-bottom:env(safe-area-inset-bottom); }
  #overlay .overlay-menu-top{ height:auto; padding-top:78px; }
  #overlay .overlay-menu-top .grid-2-elements{ height:auto; gap:26px; align-items:start; }
  #overlay .overlay-menu-top .grid-element-menu-left ul li{ padding-bottom:2px; }
  #overlay .overlay-menu-top .grid-element-menu-left ul li a{ font-size:22px; line-height:30px; }
  #overlay .overlay-menu-top .grid-element-menu-right{ height:auto; gap:14px; }
  #overlay .element-menu-right-top .button{ height:40px; }
  #overlay .grid-element-menu-right ul.contact li,
  #overlay .grid-element-menu-right ul.social li{ padding-bottom:2px; }
  #overlay .grid-element-menu-right ul.contact li p,
  #overlay .grid-element-menu-right ul.contact li a,
  #overlay .grid-element-menu-right ul.social li a{ font-size:14px; line-height:22px; }
}

/* Legibility: the8's stock scrims were tuned for their dark imagery; our brighter
   rebrand photos made white overlay text vanish. Strengthen the dark filters so
   headings/paragraphs over images stay readable on every viewport (esp. mobile). */
.opportunity-section .background-filter{ background-color: rgba(0,0,0,0.45); }
.pogonia-palairos .background-filter{ background-color: rgba(0,0,0,0.45); }
.hero-section .background-element{ background-color: rgba(0,0,0,0.4); }

/* Belt-and-suspenders: even if a section ever lacks its filter div, darken the
   image-bearing layers directly so text never sits on a bare bright photo. */
.opportunity-section .opportunity-background,
.pogonia-palairos{ position: relative; }
.opportunity-section .opportunity-background::after,
.pogonia-palairos > .background-element::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.50));
}

@media (max-width: 990px) {
  /* Mobile crops images tighter and zooms in, so go a touch darker still. */
  .opportunity-section .background-filter{ background-color: rgba(0,0,0,0.52); }
  .pogonia-palairos .background-filter{ background-color: rgba(0,0,0,0.52); }
  .hero-section .background-element{ background-color: rgba(0,0,0,0.46); }
}

/* ─── White (lefko) section text: ensure ink, never white-on-white ──────
   the8 uses .lefko for white relief bands; our global base text is white, so
   un-themed headings/paragraphs inherited white and vanished. globals.css now
   maps .lefko to light tokens (black text); these belt-and-suspenders rules
   catch any element that still pulls an explicit white. Buttons keep their own
   colors and are intentionally excluded. */
.lefko h1, .lefko h2, .lefko h3, .lefko h4, .lefko h5, .lefko h6,
.lefko p, .lefko li, .lefko em, .lefko strong, .lefko label,
.lefko .section-title, .lefko .section-bigtitle, .lefko .section-bigtitle em,
.lefko .form-icon span, .lefko blockquote{ color: var(--black-color); }

/* ─── Title descenders: don't clip g/y/q/p tails ───────────────────────
   the8 masks split-word titles with overflow:hidden + tight line-height,
   which sliced descenders. Add line-height + bottom padding so the tails sit
   inside the mask box. */
.hero-section .titlos-element h1{ line-height: 1.12; padding-bottom: 0.14em; }
.section-bigtitle h1, .section-bigtitle h2, .section-bigtitle h3{ line-height: 1.14; padding-bottom: 0.1em; }
.extrabig{ line-height: 1.06; padding-bottom: 0.1em; }

/* sustainability-section is a white band; the8 left its section-content h3 with
   no color so it inherited the global white base and vanished. Make it ink. */
.sustainability-section .section-content h3,
.sustainability-section .section-content h4{ color: var(--black-color); }

/* ---------------------------------------------------------------------------
   Ultra-wide / 4K adaptation. The8 layout has no content cap, so on very wide
   viewports section content (and the auto-fill card grids) cluster to the left
   with a large empty gutter on the right. Menu + footer + every section live
   inside .pagewrap, so capping and centering .pagewrap fixes the whole site at
   once. Full-bleed backgrounds (hero video, dark bands) stay edge-to-edge.
--------------------------------------------------------------------------- */
@media (min-width: 1681px){
  .pagewrap{ max-width: 1680px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 2400px){
  .pagewrap{ max-width: 2080px; }
}
@media (min-width: 3200px){
  .pagewrap{ max-width: 2560px; }
}

/* ---------------------------------------------------------------------------
   Primary dropdown navigation (MainNav). Four categories in the8's dark header,
   each opening a calm dark panel of sub-items. Hidden on small screens (the
   mobile overlay takes over below 1094px, matching the existing breakpoint).
--------------------------------------------------------------------------- */
.tr-mainnav { display: flex; }
.tr-mainnav-top { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.tr-mainnav-item { position: relative; }
.tr-mainnav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  line-height: 32px;
  font-weight: 500;
  color: var(--white-color);
  text-decoration: none;
}
.tr-mainnav-link:after {
  content: "";
  position: absolute;
  left: 0; bottom: 4px;
  width: 0%; height: 1px;
  background-color: var(--white-color);
  transition: width 0.4s ease;
}
.tr-mainnav-item:hover .tr-mainnav-link:after,
.tr-mainnav-link:focus-visible:after { width: 100%; }

.tr-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  transform: translateY(8px);
  background: rgba(10, 10, 10, 0.98);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
  z-index: 120;
  overflow: hidden;
}
/* Hover bridge so the pointer can cross the gap without the panel closing. */
.tr-dropdown:before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -18px; height: 18px;
}
.tr-dropdown.align-left { left: 0; }
.tr-dropdown.align-right { right: 0; }
.tr-dropdown.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Two columns: an intro rail + the item list. */
.tr-dropdown-inner {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-width: 560px;
}
.tr-dropdown-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px;
  background: rgba(255, 255, 255, 0.03);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.tr-dropdown-kicker {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 26px;
  line-height: 1.05;
  color: #fff;
}
.tr-dropdown-blurb {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}
.tr-dropdown-viewall {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.tr-dropdown-viewall span { transition: transform 0.2s ease; }
.tr-dropdown-viewall:hover span { transform: translateX(4px); }

.tr-dropdown-list { list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; }
.tr-dropdown-group { padding: 0; }
.tr-dropdown-group + .tr-dropdown-group { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.tr-dropdown-link {
  display: block;
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.tr-dropdown-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.tr-dropdown-sublist { list-style: none; margin: -2px 0 8px; padding: 0 0 0 14px; }
.tr-dropdown-sublink {
  display: block;
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.18s ease;
}
.tr-dropdown-sublink:hover { color: rgba(255, 255, 255, 0.92); }

@media screen and (max-width: 1094px) {
  .tr-mainnav { display: none; }
}

/* Mobile menu accordion (MAIN_NAV grouped). Sits inside the8 #overlay.
   Collapsed by default so the five rows fit one screen; tapping a category
   expands its sub-items. Fonts kept modest so an open group never overflows. */
.tr-mobile-menu { display: flex; flex-direction: column; gap: 0; }
.tr-mobile-menu > .menu-item > a span { font-size: 22px; line-height: 1.2; }
.tr-mobile-group { display: block; border-top: 1px solid rgba(255,255,255,0.08); }
.tr-mobile-menu > .menu-item:first-child { border-top: none; }
.tr-mobile-grouptop {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 12px; padding: 12px 0;
  background: none; border: none; cursor: pointer;
  color: var(--white-color); font: inherit; text-align: left;
}
.tr-mobile-grouptop span { font-size: 22px; line-height: 1.2; font-weight: 500; }
.tr-mobile-chev { width: 20px; height: 20px; color: rgba(255,255,255,0.55); transition: transform 0.25s ease; }
.tr-mobile-chev.open { transform: rotate(180deg); }
.tr-mobile-sub { list-style: none; margin: 0 0 12px; padding: 0 0 0 2px; display: flex; flex-direction: column; gap: 0; }
/* #overlay-scoped + !important to beat the8's id-based .menu li a sizing. */
#overlay .tr-mobile-sub > li > a {
  display: block; padding: 7px 0; font-size: 15px !important; line-height: 1.4 !important;
  color: rgba(255,255,255,0.78) !important; text-decoration: none; font-weight: 400 !important;
}
#overlay .tr-mobile-sub > li > a:hover { color: #fff !important; }
.tr-mobile-sub2 { list-style: none; margin: 0 0 4px; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 0; }
#overlay .tr-mobile-sub2 > li > a {
  display: block; padding: 4px 0; font-size: 13px !important; line-height: 1.4 !important;
  color: rgba(255,255,255,0.5) !important; text-decoration: none; font-weight: 400 !important;
}
#overlay .tr-mobile-sub2 > li > a:hover { color: rgba(255,255,255,0.9) !important; }

/* The Home row uses the8 .menu li a (large). Match the group rows. */
#overlay .tr-mobile-menu > .menu-item > a { padding: 12px 0; display: inline-block; }
#overlay .tr-mobile-menu > .menu-item > a span { font-size: 22px !important; }