/*
 Theme Name:   CM_winter
 Theme URI:    https://theme-winter.hotelrev.gr
 Description:  A custom theme built from scratch.
 Author:       HotelRev
 Author URI:   https://hotelrev.gr
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  theme-winter.hotelrev.gr
*/








/* ============================== GLOBALS START ================================ */


/* FONTS */


@font-face {
    font-family: 'Brygada1918';
    src: url('assets/fonts/Brygada_1918/Brygada1918-VariableFont_wght.ttf') format('truetype');
/*     src: url('assets/fonts/Brygada_1918/Brygada1918-VariableFont_wght.ttf') format('truetype'), */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ACNixie';
    src: url('assets/fonts/ACNixie/AC-Nixie.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('assets/fonts/ACQuicksand/TTF/AC-QuicksandRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand-bold';
    src: url('assets/fonts/ACQuicksand/TTF/AC-QuicksandBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand-lite';
    src: url('assets/fonts/ACQuicksand/TTF/AC-QuicksandLite.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Comfortaa';
    src: url('assets/fonts/Comfortaa/Comfortaa-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Afterglow';
    src: url('assets/fonts/afterglow/Afterglow-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ACGraduate';
    src: url('assets/fonts/ACGraduate/AC-Graduate.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat-light';
    src: url('assets/fonts/Montserrat/static/Montserrat-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Geologica';
    src: url('assets/fonts/Geologica/Geologica-VariableFont_CRSV,SHRP,slnt,wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CormorantGaramond-Regular';
    src: url('assets/fonts/Cormorant_Garamond/CormorantGaramond-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-Condensed';
    src: url('assets/fonts/open-sans-condensed/OpenSans-CondBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open_Sans';
    src: url('assets/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}





/* GLobaL */



* {
  scrollbar-width: thin; /* Makes scrollbar thin */
}



ul{
    margin: 0;
    padding: 0;
}



html {
    scrollbar-color: #008aae #FFF;
/*     scrollbar-width: none; */
    overflow-x: hidden;
}




body{
    background: #FFF;
    /* background: linear-gradient(330deg, rgba(218,255,249,0.3) 0%, rgba(236,248,255,0.3) 100%); */
}



.main-style{
/*     overflow-x: hidden; */
    position: relative;
    z-index: 0001;
    background-color: #FFF;
    color: #000;
}



img{
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;    
/*     outline: 3px solid #FFF; outline-offset: -7px; */
}
img:hover{
/*     filter: brightness(101.5%) !important; */
}



/* page transition */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  /* transition from the old page */
  animation: fade 0.7s ease-in forwards;
}
::view-transition-new(root) {
  /* transition to the new page */
  animation: fade 0.7s ease-in reverse;
}
@keyframes fade {
  from {
    opacity: 1;
/*     filter: blur(0px); */
  }
  50% {
/*     filter: blur(25px); */
  }
  to {
    opacity: 0;
/*     filter: blur(0px); */
  }
}
/* page transition */




/* START */



ul{
    list-style: none;
}



a{
    text-decoration: none;
}



*{
    cursor: default;
    font-family: 'Open_Sans';
/*     font-family: 'Geologica'; */
/*  font-family: 'ACNixie'; */
}



h1,h2,h3,h4,h5,h6{
    /*font-family: 'ACGraduate';*/
  /*font-family: 'Quicksand-bold'; */
  /*font-family: 'Geologica'; */
/*     font-family: 'CormorantGaramond-Regular';  */
    letter-spacing:1px;
    font-family: 'OpenSans-Condensed'; 
    color: #000;
    margin: 5px;
    font-weight: 400;
}



p{
    margin-top: 0px !important;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 30px;
}



.page{
/*  padding-top: 25px; */
/*  background-color: #fafafa; */
}




.lang-item{
/*  font-style: italic; */
    font-size: 13px;
    color: #FFF;
    list-style: none;
    float: right;
/*  margin: 5px 10px; */
}
.lang-item a{
    color: #000 !important;
    transition: all 0.2s;
    font-size: 14px !important;
    width: 72px;
    text-transform:uppercase;
}
.lang-item a:hover{
}


.lang-item.lang-item-first{
/*     padding-left:5px; */
}
@media (max-width: 1200px) {
    .lang-item{
/*         padding-top:20px; */
    }
}




/* swiper */

.swiper {
  width: 100%;
  height: 100%;
}

.swiper2 {
  width: 101%;
  height: 101%;
/*   max-width: 90vw; */
}

.swiper4,
.swiper6,
.swiper3 {
  width: 100%;
  height: 100%;
}


.swiper-wrapper{
    width: fit-content !important;
}

.section-carousel .swiper-wrapper .swiper-slide:first-child img{
    border-radius: 30px 0 0 30px;
}

.section-carousel .swiper-wrapper .swiper-slide:last-child img{
    border-radius: 0 30px 30px 0;
}



.swiper-wrapper.page-gallery{
    /*max-width:fit-content;*/
    width:100%;
    padding-left:10%;
}



.swiper4 .swiper-slide,
.swiper6 .swiper-slide,
.swiper3 .swiper-slide{
    width: auto;
}

/* swiper */







/* ============================== GLOBALS END ================================ */
.text-clamp {
  display: -webkit-box;        /* Enables the flexbox behavior needed for clamping */
  -webkit-box-orient: vertical; /* Specifies vertical orientation for the box */
  overflow: hidden;            /* Ensures overflowing text is hidden */
  -webkit-line-clamp: 2;       /* Limits the text to 3 lines */
  line-height: 1.5;            /* Optional: Adjusts the spacing between lines */
  max-height: calc(1.5em * 2); /* Optional: Ensures height matches the number of lines */
}





.sticky-1{
/*     position: absolute; */
    position: fixed;
    top: 0px;
    left: 0;
    background-color: #FCF7F0;
    color: #000;
    width: 100%;
    padding: 20px 80px;
    box-sizing: border-box;
    z-index: 7777;
    transition: all 0.5s;
    transition-delay: 0.7s;
    width:100vw;
    margin:auto;
}

.sticky-1 .content{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
}
@media (max-width: 1200px) {
    #nav-menu{
        width: 100vw !important;
    }
    .sticky-1{
        padding: 30px 30px;
    }  
    .sticky-1 .content{
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        align-items: center;
    }  
}



.sticky-1.bg-blur{
/*     background-color: #FFFFFFFF; */
    /*padding: 15px 20px;*/
}





.inset-border{
    position: absolute;
    border: 5px solid #FFF;
    width: 99%;
    height: 96%;
    left: 0;
    right: 0;
    top: 5px;
    margin: auto;
    z-index: 1111;
}

@media (max-width: 1200px) {
    .inset-border{
        position: absolute;
        border: 5px solid #FFF;
        width: unset;
        height: 98%;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 1111;
    }
}






.square{
    max-width: 1400px;
    width: 90vw;
    margin: auto;
    height: 200px;
    background-color: #000;
    margin-top: -170px;
    z-index: 1111;
    position: relative;
}






.hero_text{
    /*font-size:16px;*/
/*     transition: all 1s; */
    z-index: 1111;
    color: #000; 
    bottom: 150px;
    background-color: #FFFFFF77;
    padding: 50px 120px;
    display: inline-block;
    font-weight: 400; 
    position:absolute; 
    text-align:center; 
    left: 0;
    right: 0;
    margin:auto;
    max-width: 60%;
/*     box-shadow: -3px 3px 0 0 #00000077; */
}
.hero_text:hover{
    filter: brightness(1.03);
}
@media (max-width: 1200px) {
    .hero_text{
/*         font-size:35px; */
    }
}





.topbar-book{
/*     font-family: 'OpenSans-Condensed'; */
    font-family: 'Geologica';
    background: linear-gradient(118deg, rgba(255,246,213,1) 0%, rgba(241,211,125,1) 100%);
    color: #000;
    filter: brightness(1);
    font-weight: 400;
    transition: all 0.3s;
}
.topbar-book:hover{
    /*filter: brightness(0.75);*/
}




.welcome_text p{
    color: #FFF; 
    max-width: 700px; 
    margin: auto; padding-top: 10px;
    text-align: justify;
}




.hero-container {
/*     top: -90px; */
    position: relative; 
    height: 100svh; 
    overflow: hidden; 
    /*display:grid; */
    align-items:center; 
    width: 100vw;
    /*transition: all 0.7s;*/
    margin: auto;
    margin-top: -5px;
    opacity:0;
}

@media (max-width: 1200px) {
    .hero-container {
        width: 100vw;
        margin-top: 0px;
        height: 100svh; 
    }
}









@keyframes sticky-parallax-header-move-and-size {
    from {
        /*background-position: 50% 0;*/
        /*height: 100vh;*/
        /*filter: blur(0px);*/
        opacity:0;
    }
    to {
        /*background-position: 50% 100%;*/
        /*height: 60vh;*/
        /*filter: blur(15px);*/
        opacity:1;
    }
}
.hero-container {
     animation: sticky-parallax-header-move-and-size linear forwards; 
     animation-delay: 1.5s;
     animation-duration: 2s;
     background-color:#000;
    /*animation-timeline: scroll();*/
    /*animation-range: 0vh 100vh;*/
    /*opacity:1;*/
}



.hero-container img{
/*     opacity: 0; */
}










.container-3 img{
    margin-right: 10px;
/*     filter: brightness(0.5); */
}









.container-333{
    
}

.container-33{
    display:grid;grid-template-rows: fit-content(100%) fit-content(100%); max-width: 1400px; margin: auto; justify-items: start; align-items:top; margin-bottom:100px; position:relative;
}
.container-33 li{
    font-size: 24px;
    white-space: nowrap;
}
.container-33-a{
    display:grid; 
    grid-template-columns: 1fr 1fr; 
    width: 100%; 
    justify-items: center;
}
@media (max-width: 1200px) {
    .container-33{
    } 
    .container-33-a{
        grid-template-columns: 1fr; 
        max-width: 100vw;
/*         text-align: center; */
    }
    .container-33 li{
        font-size: 18px;
    }
    .container-33-a > div{
        margin-bottom: 25px;   
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;    
        width: 430px; 
    }
    
    .container-333{
        grid-template-columns:1fr !important;
    }    
}








@keyframes welcome_text_heading_scroll {
    from {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.welcome_text{
/*     animation: welcome_text_heading_scroll linear forwards; */
    animation-timeline: --section-1;
    animation-range: 0% 100%;    
    view-timeline: --section-1;
/*     opacity: 0; */
/*     filter: blur(10px);     */
}





@keyframes hero_text_heading_init2 {
    from {
        opacity: 0;
        bottom:0px;
    }
    30% {
        opacity: 0;
    }
    to {
        opacity: 1;
        bottom:150px;
    }
}
.hero_text{
     opacity: 0; 
     animation: hero_text_heading_init2 ease-out forwards 3s; 
     bottom:0px;
}
.init-anim{
     opacity: 0; 
/*     filter: blur(5px);     */
     animation: hero_text_heading_init2 linear forwards 3s; 
    animation-delay: 2s;
}











@keyframes about_us_paralax_1 {
    from {
        opacity: 0;
        margin-top: 0;
        filter: blur(5px);
    }
    50% {
        opacity: 0.9;
        filter: blur(0px);
    }
    to {
        opacity: 0.9;
        margin-top: -80px;
    }
}
.about_us{
    view-timeline: --section-2;
}
.about_us_paralax{
/*     animation: about_us_paralax_1 linear forwards; */
    animation-timeline: --section-2;
    animation-range: 0% 100%;   
}
.about_us_text_container{
/*     animation: about_us_paralax_1 linear forwards; */
    animation-timeline: --section-1;
    animation-range: 0% 100%;    
    animation-timeline: --section-2;
}



.about_us_text_container p{
    text-align: justify;
}



@keyframes about_us_paralax_1_container_1 {
    from {
        height: 700px;
        width: 0%;
    }
    50% {
        height: 670px;
        width: 100%;
    }
    70% {
        height: 670px;
        width: 100%;
    }
    to {
        height: 700px;
        width: 100%;
    }
}
.about_us_paralax_container{
    width: 100%;
    height: 700px;
/*     animation: about_us_paralax_1_container_1 linear forwards; */
    animation-timeline: --section-2;
    animation-range: 0% 100%;   
    position: relative;
    right: -30px;
    text-align: center;
}
@media (max-width: 1200px) {
    .about_us_paralax_container{
        right: 0px;
    }
}







.about_us{
    max-width: 1600px; margin: auto; display: grid; grid-template-columns: 40% 20% 40%; align-items:end; gap: 5px; min-height:100lvh; margin-top: 100px;
}
@media (max-width: 1200px) {
    .about_us{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
    .welcome_text_heading{
        text-align: center !important;
    }
    .about_us_paralax{
        animation: none;
    }
    .about_us_text_container{
        animation: none;
    }    
    .about_us_text_container p{
/*         padding: 20px; */
    }    
}






@keyframes gallery_1_container_1 {
    from {
/*         height: 50lvh; */
        width: 0%;
    }
    70% {
        width: 100%;
    }
    to {
/*         height: 130lvh; */
        width: 100%;
    }
}
.gallery-container{
    height: 100lvh;
    width: 100%;
    animation: gallery_1_container_1 linear forwards;
    animation-timeline: --section-3;
    animation-range: 0% 80%;   
    view-timeline: --section-3;
}




.footer-container-container h3{
    font-size: 16px;
    margin: 0;
}
.footer-container-container li{
    font-size: 17px;
    letter-spacing: 0px;
    transition: all 0.3s;
    transition-delay: 7s;
    color: #333;
    text-wrap: nowrap;
    padding: 3px 0px;
}
.footer-container-container li:hover{
/*     letter-spacing: 5px; */
/*     margin-left: 5px; */
    transition-delay: 0s;
    color: #333;
/*     text-decoration: underline; */
    background-color: #F9F9F933;
}
.footer-container-container li a{
    color: #333;
    padding: 3px 0px;
    display: block;
}




.footer-cta-btn-1{
    background: #a4c3b2;
    color: #FFF;
}
.footer-cta-btn-1:hover{
    filter:brightness(102%);
}





.masonry_card{
    background-color: #332f29;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 5px;
    transition: letter-spacing 1s;
    text-wrap: pretty;
    box-shadow: 0 0 5px #444;
}
.masonry_card:hover{
    background-color: #383838;
    letter-spacing: 7px;
}

.masonry_card span{
    mix-blend-mode: difference;
    -webkit-box-reflect: below -6px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));    
    position: relative;
    z-index: 1111;
    color: #FFF;
    pointer-events: none;
}

.masonry_card img{
    filter: brightness(1);
    transition: filter 0.8s;
}
.masonry_card img:hover{
    filter: brightness(0.2);
}








@keyframes masonry_1_container_1 {
    from {
        transform: scale(1.15);
    }
    to {
        transform: scale(1);
    }
}
.masonry_content{
    transform: scale(1.15);
    animation: masonry_1_container_1 linear forwards;
    animation-timeline: --section-4;
    animation-range: 0% 50%;   
    view-timeline: --section-4;

    gap:2px; 
    justify-items: center; 
    display:grid; 
    grid-template-columns:1fr 1fr; 
    max-width:800px; 
    margin: auto;    
}


@media (max-width: 1200px) {
    .masonry_content{
        grid-template-columns:1fr;
    }
}












@keyframes why_us_paralax_1 {
    from{
        opacity: 0;
        margin-top: 0;
        filter: blur(15px);
    }
    40%{
        filter: blur(0px);
    }
    50%{
        opacity: 1;
    }
    to{
        opacity: 1;
        margin-top: -100px;
    }
}
.why_us{
    view-timeline: --section-2;
    max-width: 1600px; margin: auto; display: grid; grid-template-columns: 40% 60%; align-items:center; gap: 5px; min-height:100lvh; margin-top: 100px;
}
.why_us_paralax{
    animation: why_us_paralax_1 linear forwards;
    animation-timeline: --section-2;
    animation-range: 0% 100%;   
}
.why_us_text_container{
/*     animation: why_us_paralax_1 linear forwards; */
    animation-timeline: --section-1;
    animation-range: 0% 100%;    
    animation-timeline: --section-2;
    padding: 20px;
}

@media (max-width: 1200px) {
    .why_us{
        grid-template-columns: 1fr;
    }
    .why_us_paralax{
        animation: unset;
    }
    .why_us_text_container{
        animation: unset;
    }    
}







.why_us_text_container p{
    text-align: justify;
}



@keyframes why_us_paralax_1_container_1 {
    from {
        height: 700px;
        width: 0%;
    }
    50% {
        height: 670px;
        width: 100%;
    }
    70% {
        height: 670px;
        width: 100%;
    }
    to {
        height: 700px;
        width: 100%;
    }
}
.why_us_paralax_container{
    width: 0%;
    height: 700px;
    animation: why_us_paralax_1_container_1 linear forwards;
    animation-timeline: --section-2;
    animation-range: 0% 100%;   
}






.footer-container{
    min-height: 60lvh; 
    align-items:top; 
    justify-items: center; 
    margin: auto; 
    position: relative; 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 20%; 
    padding: 100px; 
    max-width: 1100px; 
    position: relative; 
    z-index: 1111; 
/*     bottom: -120px; */
    padding-top: 50px;
}
@media (max-width: 1200px) {
    .footer-container{
        grid-template-columns: 1fr; 
        bottom: 0px;
        padding: 100px 0px;
    }   
    .footer-container > div{
        border: none !important;
    }
}




.footer-container.scroll-driven10b{
    padding: 0 20px !important;
    margin-bottom: 10px;
}



.testimonials > div{
    filter: brightness(0.8);
    transition: all 0s;
    transition-delay: 0.2s;
}
.testimonials > div:hover{
/*     filter: brightness(1); */
    transition-delay: 0s;
}












@keyframes photo-row-1 {
    from {
/*         transform: rotateX(0deg); */
        transform: translateX(-30vw);
    }
    40% {
/*         transform: rotateX(0deg); */
    }
    to {
/*         transform: rotateX(-20deg); */
        transform: translateX(30vw);
    }
}

.pre-footer-photo-row-container{
    perspective: 500px;
    view-timeline: --section-5;
}
.pre-footer-photo-row{
    animation: photo-row-1 linear forwards;
    animation-timeline: --section-5;
    animation-range: 0% 100%;      
}








@keyframes footer-border-1 {
    from {
        border-right: 1px solid #FFFFFF00; 
    }
    70% {
        border-right: 1px solid #FFFFFF00; 
    }
    to {
        border-right: 1px solid #FFFFFFFF; 
    }
}

.footer-container-container{
    view-timeline: --section-6;
    overflow: hidden; 
    background-color: #FEFEFE; 
    padding-top:50px; 
    padding-bottom:10px; 
    position:relative; 
    border-top: 4px solid #FFF; 
    display:grid; 
    grid-template-columns: 1fr; 
    align-items:center;
    justify-items:center;
    width: 100vw;
    /*min-height: 100vh;*/
}
.footer-border-anim{
    animation: footer-border-1 linear forwards;
    animation-timeline: --section-6;
    animation-range: 0% 50%;      

    border-right: 1px solid #FFFFFF00; 
}

@media (max-width: 1200px) {
    .footer-container-container{
        grid-template-columns: 1fr; 
        justify-items:center;
    }
    .footer-container-container .scroll-driven10{
        padding: 30px 50px !important;
    }
}




.footer-container-container li{
    float: left;
    margin: 5px 0;
}

.footer-container-container li a{
    padding: 0 5px !important;
    font-size: 14px;
}



.footer-col{
    padding: 50px 60px;
}
@media (max-width: 1200px) {
    .footer-col{
        padding: 50px 0px !important;
        width: 100%;
        text-align: center;
    } 
    .footer-container-container li:hover{
        margin-left: 0 !important;
    }
}





.menu-container .lang-select{
    color: #FFF;
    display: none;
    position: absolute;
    top: 29px;
    right: 1px;
    background-color: #FFF;
/*     padding: 2px 9px; */
}
.menu-container .lang-select.open{
    display: block;
}
.lang-select-open{
    color: #FFF;
    font-size: 14px !important;
}
@media (max-width: 1200px) {
    .menu-container .lang-select{
        top: 43px;
    }    
}








.sm-show {
    display: none !important;
}
@media (max-width: 1200px) {
    .sm-hide {
        display: none !important;
    }
    .sm-show {
        display: block !important;
    }    
}






.menu-container {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
/*     max-width: fit-content; */
    justify-self: center;
}
@media (max-width: 1200px) {
    .menu-container {
        justify-self: end;
    }  
    .menu-container2222 {
        justify-self: center;
        grid-template-columns: 1fr !important;
    }  
}


.menu-container ul li {
    /*float: left;*/
    clear:both;
    text-align:center;
}

.menu-container ul li a {
    font-family: 'OpenSans-Condensed';
    display: inline-block;
    float: left;
    /* margin: 10px; */
    margin-right: 1px;
    margin-left: 0px;
    text-align: left;
    /* width: 84px; */
    /* background-color: #f4f4f4; */
    padding: 10px 16px;
    font-size: 40px;
    letter-spacing: 0px;    
/*     transition: all 0.1s; */
    box-shadow: 0 0 0 0px #000 inset;
    color: #000;
    /*font-weight: 600;*/
    text-transform: uppercase;
}
@media (max-width: 1200px) {
    .menu-container ul li a {
        font-size: 30px;
    }
}
.menu-container ul li:hover a {
    background-color: #aaaaaa11;
}

.menu-container li.current-page-ancestor a, .menu-container li.current-menu-item a {
/*     box-shadow: 0 0 0 1px #e7e7e7 inset; */
    /* text-decoration: line-through; */
    background-color: #aaaaaa11;
    outline: 1px solid #999;
    outline-offset: -8px;
}


.current-menu-item{
    border-bottom:1px solid #000;
}




.container-1{
    display:grid;
    grid-template-columns: 70% 30%;
    max-width: 1400px;
    margin: auto;
    justify-items: center;
    align-items:center;
    text-align:left;
    margin-top: 50px;
    bottom: 30px;
}
@media (max-width: 1200px) {
    .container-1{
        display:grid;
        grid-template-columns: 1fr;
        max-width: 1400px;
        margin: auto;
        justify-items: center;
        align-items:center;
        text-align:left;
    }
}

.container-1 h1{
    float: left; 
    font-size: 85px; 
    color: #555; 
    font-weight: 400;
}
@media (max-width: 1200px) {
    .container-1 h1{
        float: left; 
        font-size: 35px; 
        color: #555; 
        font-weight: 400;
        margin-top: 100px;
        font-weight: 600;
    }    
}


.container-1 img{
    max-width: 300px;
    width: 90%;
}
@media (max-width: 1200px) {
    .container-1 img{
        width: 200px;
    }    
}




.container-2{
    display:grid;
    grid-template-columns: 40% 60%;
    max-width: 1400px;
    margin: auto;
    justify-items: center;
    align-items:center;
    margin-bottom: 70px;
    gap:10px;
}
@media (max-width: 1200px) {
    .container-2{
        grid-template-columns: 1fr;
        justify-items: start;
    }    
}

.container-2 h1{
    float: left; 
    font-size: 85px; 
    color: #555; 
    font-weight: 400;
}
@media (max-width: 1200px) {
    .container-2 h1{
        font-size: 28px !important;
        line-height: 1.2;
        white-space: nowrap;
        font-weight: 600;
    }    
}

.container-2 p{
    float: left;
    font-size: 36px;
    color: #555;
    font-weight: 400;
    text-align:justify;
    text-wrap: balance;
    margin-left:10px;
}
@media (max-width: 1200px) {
    .container-2 p{
        font-size: 26px;
        margin-left:0px;
        padding: 20px;
    }    
}



.decoration_image_1{
    position:absolute; top:-300px; left: -40vw; z-index: 0000; width:130vw; opacity: 0.1; pointer-events:none;
}

@media (max-width: 1200px) {
    .decoration_image_1{
        position:absolute; top:-300px; left: -20vw; z-index: 0000; width:130vw; opacity: 0.1; pointer-events:none;
    }
}









.container-2b{
    display:grid;
    grid-template-columns: 33% 67%;
    max-width: 1400px;
    margin: auto;
    justify-items: center;
    align-items:center;
    margin-bottom: 100px;
    gap:0px;
}
@media (max-width: 1200px) {
    .container-2b{
        grid-template-columns: 1fr;
        justify-items: start;
    }    
}

.container-2b h1{
    float: left; 
    font-size: 85px; 
    color: #555; 
    font-weight: 400;
}
@media (max-width: 1200px) {
    .container-2b h1{
        font-size: 9vw !important;
        line-height: 1.2;
        white-space: nowrap;
    }    
}

.container-2b p{
    float: left;
    font-size: 35px;
    color: #555;
    font-weight: 400;
    text-align:justify;
    text-wrap: balance;
    margin-left:15px;
}
@media (max-width: 1200px) {
    .container-2b p{
        font-size: 26px;
        margin-left:0px;
        padding: 20px;
    }    
}



.container-2b-img{
    width:100%; 
    max-width:95%;
}
@media (max-width: 1200px) {
    .container-2b-img{
        max-width:100%;
    }
}







/* 
.container-text-image-2{
    display:grid;
    grid-template-columns: 40% 60%;
    max-width: 1400px;
    margin: auto;
    justify-items: center;
    align-items:center;
    margin-bottom: 100px;
    gap:20px;
}
@media (max-width: 1200px) {
    .container-text-image-2{
        grid-template-columns: 1fr !important;
    }    
}
 */


.container-text-image-2 h3{
    font-size:60px;
}
@media (max-width: 1200px) {
    .container-text-image-2 h3{
        font-size:40px;
        font-weight: 600;
    } 
}



.container-text-image-2 p{
/*     font-size:60px; */
}
@media (max-width: 1200px) {
    .container-text-image-2 p{
/*         font-size:40px; */
        padding: 20px;
    } 
}





.container-4{
    display:grid; 
    grid-template-columns: 70% 30%; 
    gap:20px; 
    max-width: 1400px; 
    margin: auto; 
    justify-items: start; 
    align-items:center; 
    margin-bottom:100px; 
    position:relative;
}
@media (max-width: 1200px) {
    .container-4{
        grid-template-columns: 1fr; 
    }    
}






.container-4 p{
    text-wrap: balance; 
    text-align: justify; 
    float: left; 
    font-size: 36px; 
    color: #555; 
    font-weight: 400;
    margin: 30px;
}
@media (max-width: 1200px) {
    .container-4 p{
        padding: 20px;
        margin: 0px;
        font-size: 27px !important; 
    }    
}


.container-4a p{
    text-wrap: balance; 
    text-align: justify; 
    float: left; 
    font-size: 36px; 
    color: #555; 
    font-weight: 400;
    margin: 80px;
}
@media (max-width: 1200px) {
    .container-4a p{
        padding: 20px;
        margin: 0px;
        font-size: 27px !important; 
    }    
}





.container-4a{
    display:grid; 
    grid-template-columns: 1fr 1fr; 
    gap:0px; 
    max-width: 1400px; 
    margin: auto; 
    justify-items: start; 
    align-items:center; 
    margin-bottom:100px;
}
@media (max-width: 1200px) {
    .container-4a{
        grid-template-rows: 1fr 1fr; 
        grid-template-columns: 1fr; 
    }    
    .c4a-col{
        width: 100vw;
    }
    .c4a-col div{
        width: 100vw !important;
        min-height: 400px;
    }
    .c4a-col-a{
        height: 100%;
        display: grid;
        align-items: center;
    }
}









/*     mySwiper */
    .swiper {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
/*       height:380px !important; */
/*       max-width: 42%; */
    }
    .swiper-slide.v2 {
      height:unset !important;
    }
    .swiper-slide.v4 img {
      transition: all 0.2s;
    }
    .swiper-slide.v4:hover img {
      filter: brightness(105%);
    }
    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    @media (max-width: 1200px) {
        .swiper-slide.v2{
          height:100% !important;
        }
        .swiper-slide.v4{
          max-width:90vw !important;
          padding: 5vw !important;
          padding-bottom: 75px !important;
        }
        .swiper-slide.v8{
          padding-bottom: 20px !important;
        }
        .swiper-slide{
          max-width: 95%;
          height:360px !important;
        }
        .swiper-slide.v3{
          max-width:100% !important;
        }
        .swiper-slide img{
          /*width: 80%;*/
        }
    }    
    
    body {
      background: #000;
      color: #000;
    }
    .swiper {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }
    .swiper-slide {
      background-size: cover;
      background-position: center;
    }
    .mySwiper2 {
      height: 100%;
      width: 100%;
    }
    .mySwiper {
      height: 20%;
      box-sizing: border-box;
      padding: 10px 0;
    }
    .mySwiper .swiper-slide {
      width: 25% !important;
      height: 100%;
      opacity: 0.4;
    }
    .mySwiper .swiper-slide-thumb-active {
      opacity: 1;
    }
    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
/*     mySwiper */





.c4a-col-ba{
    width:800px; 
    overflow:hidden; 
    position: relative; 
    height:100%;
}
.c4a-col-bb{
    width:800px; 
    overflow:hidden; 
    position: relative; 
    height:100%; 
    display: grid; 
    justify-items:center; 
    align-items:center;
}
.c4a-col-bb p b{
    font-family: 'Montserrat';
}
.c4a-col-bb p{
    position: absolute; 
    z-index:1111; 
    margin: 0px 100px; 
    background-color:#ffffffcc; 
    font-size:30px;
}
@media (max-width: 1200px) {
    .c4a-col-bb p{
        margin: 0px !important; 
    }
}







.container-10 {
    max-width: 1400px;
    width: 98vw;
/*     background-color: #FFF; */
    margin: auto;
    padding: 0px;
    box-sizing: border-box;
    margin-top: 15px;
    overflow: hidden;
}

.container-10 .box-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0px;
    position: relative;
    width: 100%;    
    align-items: center;
    justify-items: center;    
}
@media (max-width: 1000px) {
    .container-10 .box-3 {
        grid-template-columns: 1fr 1fr;
    }
}

.heading-1 h3{
    text-align: center;
    color: #FFF !important;
}

.container-10 .box-3 > div {
    position: relative;
    height: 94%;
    width: 94%;
    overflow: hidden;
    aspect-ratio: 1.7/1;
}

.box-3 img{
    object-position: center;
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: brightness(1);
    transition: all 0.3s;
}
.box-3 img:focus,
.box-3 img:hover{
/*     filter: brightness(1.03); */
}




.post-footer > div,
.post-footer{
    color:#333; position: relative; z-index: 2222; 
/*     height: 80px;  */
    background-color:unset; width: 100%; margin-bottom: 50px; display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center; padding-bottom:60px; 
    /*border-top:1px solid #000;    */
}
.post-footer p{
    color:#333;
    background-color:#ffffff00; 
}

.post-footer div{
    margin: 0;
    color: #000;
    font-size:14px;
}
@media (max-width: 1200px) {
    .post-footer div{
        margin: 0;
        color: #FFF;
        padding: 20px;
        text-align: center;
    }
}




.btn-1{
     background-color: #FFF;
     color:#000;
     transition: all 0.3s !important;
}

.btn-1:hover{
     background-color: #000 !important; 
     color:#FFF !important;
     outline:#000 solid 1px !important;
}





.why_us_text_container h3,
.photos-container h3{
    color: #FFF;
}

.why_us_text_container p,
.photos-container p{
    color: #FFF;
    margin-top: 5px;
    margin-bottom: 10px;
}



.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
    width:98vw;
    border:1px solid #ffdcdc;
    font-size:16px;
    max-width:1350px;
}

.wpcf7-not-valid-tip{
    font-size:14px;
}




.wpcf7-form-control{
    width: 98%;
}


.wpcf7-submit{
    width: fit-content;
}










.scroll-driven {
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
    background: #f4f4f4;
    padding: 20px;
    text-align: center;
    margin: 100px auto;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.scroll-driven2 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
.scroll-driven3 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
.scroll-driven4 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
.scroll-driven5 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
.scroll-driven6 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px);
}
@media (max-width: 1200px) {
    .scroll-driven6 {
        margin-top:40px !important;
    } 
}
.scroll-driven7 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
.scroll-driven8 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
@media (max-width: 1200px) {
    .scroll-driven8 {
        /*max-width:100vw !important;*/
        grid-template-columns:100% !important;
        margin-bottom: 50px;
    } 
}


.scroll-driven9 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
.scroll-driven10 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
.scroll-driven11 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
.scroll-driven12 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
.scroll-driven13 {
    width: 100%;
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
.scroll-driven14 {
    width: 100%;
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
.scroll-driven15 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
.scroll-driven16 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
.scroll-driven17 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
.scroll-driven18 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}
.scroll-driven19 {
    filter: blur(0px);
    opacity: 1; /* Hidden initially */
    transform: translateY(0px); /* Slight downward offset */
/*     background: #f4f4f4; */
}




.revealing-box {
    width: 100%; /* Start with width 0 */
/*     height: 100px; */
    overflow: hidden;
    margin: 20px 0;
    transition: width 1s ease-out; /* Optional, for fallback behavior */
}
.revealing-box {
    width: 100%; /* Start with width 0 */
/*     height: 100px; */
    overflow: hidden;
    margin: 20px 0;
    transition: width 1s ease-out; /* Optional, for fallback behavior */
}








.container-contact{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    max-width:100vw;
    margin:auto;
    min-height: 500px;
    align-items: center;
    background-color: #f9f9f9;
}
@media (max-width: 1200px) {
    .container-contact{
        grid-template-columns:1fr;
    } 
}







.wpcf7-response-output{
    float: left;
}

.wpcf7-submit{
    width: 100%;
    padding: 10px;
}



.container-three-images{
    display:grid; 
    grid-template-columns:1fr 1fr 1fr; 
    max-width:100vw; 
    margin:auto; 
    align-items: start; 
    margin-bottom: 100px; 
    padding: 3px;
}
@media (max-width: 1200px) {
    .container-three-images{
        grid-template-columns:1fr 1fr;
    } 
}
@media (max-width: 800px) {
    .container-three-images{
        grid-template-columns:1fr;
    } 
}







/*================ ionianvillas2025 ================*/




.three-pages-item{
    width:97%; 
    aspect-ratio:1/1; 
    background-color:#FFFfff99; 
    margin-top:-230px; 
    overflow:hidden; 
    display:grid; 
    justify-items:center; 
    align-items:center; 
    position:relative;
}
@media (max-width: 1200px) {
    .three-pages-item{
        width:97%; 
        margin-top:0px; 
        margin-bottom:9px; 
    }
}




.three-pages-container{
    width:100vw; 
    height:250px; 
    background-color:#a4c3b2; 
    margin-bottom: 80px; 
    transition:all 0.2s ease-out; 
    margin-top: 350px;
}
@media (max-width: 1200px) {
    .three-pages-container{
        height: auto; 
        margin-top: 0px;
    }
}



.three-pages{
    grid-template-columns:1fr 1fr 1fr; 
    display:grid; 
    max-width:1433px; 
    margin:auto; 
    justify-items:center;
}
@media (max-width: 1200px) {
    .three-pages{
        grid-template-columns:1fr; 
    }
}



.container-cont-image-2{
    position:relative; aspect-ratio: 3.5/4; overflow: hidden; width: 500px;
    max-width: 95vw;
    grid-area: A;
}
@media (max-width: 1200px) {
    .container-cont-image-2{
        width: 100vw;
        height: 400px;
        text-align: center;
        grid-area: B;
    }
    .container-cont-image-2 img{
        max-width: 95vw;
    }
}



.container-text-image-2{
    display:grid; 
    grid-template-columns: 35% 65%; 
    max-width: 1400px; 
    margin: auto; 
    justify-items: end; 
    align-items:center; 
    margin-bottom: 100px; 
    grid-template-areas: "A" "B";
/*     overflow: hidden; */
    margin-top:100px;
}
@media (max-width: 1200px) {
    .container-text-image-2{
        grid-template-columns: 100% !important;
        justify-items: center !important;
        margin-top:30px;
    }
}


.offers-container{
     margin-bottom: 100px;
}
@media (max-width: 1200px) {
    .offers-container{
         margin-bottom: 15px !important;
    }
}



.yt-container{
    padding-bottom: 25.25%; 
}
@media (max-width: 1200px) {
    .yt-container{
        padding-bottom: 55.25%; 
    }
}



form{
    width:100%;
}

input{
    padding:10px;
    margin:10px;
}

input[type="email"],
input[type="text"]{
    width:100%;
    max-width:93%;
    min-height:50px;
    border:unset;
    border-bottom: 1px solid #000;
    background-color:#FDFDFD00;
}
input[type="email"]:focus,
input[type="text"]:focus{
    outline:none;
}
input[type="submit"]{
    border:unset;
    color:#FFF; float: left; padding: 15px 80px;  margin-top: 40px; background-color: #008aae; border: unset; font-weight: 400; font-size: 14px;
    width:auto;
    transition:all 0.4s;
}
input[type="submit"]:hover{
     color: #FFF;
     background-color: #007a9e;
}



@media (max-width: 1200px) {
    input[type="email"],
    input[type="text"]{
        width: 100%;
        max-width: 80%;
    }
}




.swiper-wrapper{
    align-items:center;
    max-width: 100vw;
}



.container-12{}


@media (max-width: 1200px) {
    .container-12{
        grid-template-columns: 1fr !important;
    }
    .container-12 > div{
        margin-bottom:20px;
    }
}






.btn-hover-1{
    transition:all 0.6s;
}
.btn-hover-1:hover{
    background-color:#0ea4cc !important;
/*     color:#c8ca9c !important; */
}

.btn-hover-2{
    transition:all 0.7s;
}
.btn-hover-2:hover{
    background-color:#c8ca9c !important;
    color:#324158 !important;
}









.rotate-container {
  /*width: 300px;*/
  /*height: 300px;*/
  perspective: 300px;
}

.rotate-box {
  /*width: 100%;*/
  /*height: 100%;*/
  /*background-color: #e74c3c;*/
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: center;*/
  /*color: white;*/
  /*font-size: 24px;*/
  /*border-radius: 10px;*/
  transform-style: preserve-3d;
  /*transition: transform 0.1s ease-out;*/
}
@media (max-width: 1000px) {
    .rotate-box {
        max-width:100% !important; 
        margin-left:0 !important; 
    }
}









.img-text-1{
}
@media (max-width: 1000px) {
    .img-text-1{
        grid-template-columns:1fr !important;
    }
    .img-text-1 .img-container{
        width:100% !important;
    }
}


.img-text-2{
}
@media (max-width: 1000px) {
    .img-text-2{
        grid-template-columns:1fr !important;
    }
    .img-text-2 .img-container{
        width:100% !important;
        order:-1;
    }
}








.container-5218{
}
@media (max-width: 1000px) {
    .container-5218{
        grid-template-columns: 1fr !important;
        text-align: center;
        margin-bottom: -10px !important;
    }
    .container-title{
        font-size:50px !important;
    }
    .container-text{
        font-size:50px !important;
    }
}




.highlights-item{
    margin-bottom: 40px;
}
.container-5219{
}
@media (max-width: 1000px) {
    .container-5219{
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        text-align: center;
    }
    .highlights-item{
        text-align: left;
/*         padding: 10px; */
    }
}



.container-1397{
}
.container-5220{
}
@media (max-width: 1000px) {
    .container-5220{
        grid-template-columns: 1fr !important;
        text-align: center;
/*         margin-bottom: 100px !important; */
    }
    .container-1397{
        margin-bottom:150px !important;
    }
}




.container-5221{
}
@media (max-width: 1000px) {
    .container-5221{
        grid-template-columns: 1fr !important;
        text-align: center;
    }
}




.container-5222{
}
@media (max-width: 1000px) {
    .container-5222{
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    .container-5222 p{
        padding: 20px;
    }
}





.container-5223{
}
@media (max-width: 1000px) {
    .container-5223{
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    .container-5223 > div{
        width: 100vw;
    }
    .container-5223 h3{
        font-size: 50px !important;
    }
    .container-5223 .img-1258{
        max-width: 100% !important;
        width: 100% !important;
        margin-top: 50px;
    }
}






.container-7983{
}
@media (max-width: 1000px) {
    .container-7983{
        grid-template-columns: 1fr !important;
        text-align: center;
        margin-bottom: 200px !important;
    }
    .container-7983 > div{
        width: 100vw;
        padding:0px !important;
    }
    .container-7983 p{
        padding:10px !important;
    }
}







.title-7983{
}
@media (max-width: 1000px) {
    .title-7983{
        font-size:50px !important;
        text-align: center;
    }
}







.dine-swiper{
    max-width:70% !important;
}
@media (max-width: 1000px) {
    .dine-swiper{
        max-width:100% !important;
    }
}




.title-7982{}
@media (max-width: 1000px) {
    .title-7982{
        text-align: center;
    }
}



.post-footer-content{
}
@media (max-width: 1200px) {
    .post-footer-content{
        grid-template-columns:1fr !important;
    }
    .copyrights-container p{
        text-align: center !important;
    }
}



.mySwiper3{
    overflow: visible !important;
    margin-bottom: 300px;
}
.mySwiper3 .swiper-wrapper{
    align-items: unset !important;
}
.reviews-slide{
    width: 50% !important;
    padding-right: 20px !important;
}
@media (max-width: 1000px) {
    .reviews-slide{
        width: 91vw !important;
        height: auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}





@media (max-width: 1000px) {
    .mobile-title-size{
        font-size: 50px !important;
    }
}



.hover-8513{
    transition: all 0.1s linear;
}
.hover-8513:hover{
    padding-bottom: 12px !important;
}


.sticky-menu-container ul li{
    float: left;
    margin: 0 30px;
}

.sticky-menu-container #menu-menu{
    width: fit-content;
    margin: auto;
}


.sticky-menu-container ul li a{
    color: #000;
    border-bottom: 1px solid #00000000;
    transition: all 0.4s;
    text-transform: uppercase;
/*     letter-spacing: 1px; */
    font-family: 'Geologica';
    font-size: 15px;
}
.sticky-menu-container ul li a:hover{
    border-bottom: 1px solid #000000FF;
}