@charset "utf-8";
/* CSS Document */




/*





.ysabeau-office-<uniquifier> {
  font-family: "Ysabeau Office", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}



*/













html {
    scroll-behavior: smooth;
}

body {
    
    margin: 0px;
    font-family: "Ysabeau Office", sans-serif;
    font-weight:300 ;
    background: #fff;
    padding: 80px 0px 0px 0px ;
    font-size: 1.2em; /* Optional: bumped up slightly as serif fonts often look smaller */
}

/* =========================================
   HEADER & NAVIGATION
========================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: #fff;
    z-index: 1000;
    border-top: 5px solid  #00a99d ;
    
    transition: height 0.3s ease;
}

.site-header.shrunk {
    height: 60px;
}

.header-inner {
  /*  
    max-width: 1600px; 
    padding: 0 20px;
    */
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4em;
    
}




@media (max-width: 1200px) { .header-inner {  padding: 0 2em; } }
@media (max-width: 800px)  { .header-inner {  padding: 0 1em; } }
@media (max-width: 500px)  { .header-inner {  padding: 0 0.5em; } }






	 a:link,  a:visited {text-decoration:none; color: #666;  transition: all 0.2s ;}
	 a:hover 			{text-decoration:none; color: #00a99d;}



ul {list-style-type: circle;}





h1 {
    color: #b0955f ;
    display: block;
    font-size: 2.75em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight:100 ;
    unicode-bidi: isolate;
}



h2 {
    color: #b0955f ;
    display: block;
    font-size: 2.0em;
    margin-block-start: 0em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight:100 ;
    unicode-bidi: isolate;
}




h3 {
    color: #b0955f ;
    display: block;
    font-size: 1.5em;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight:100 ;
    unicode-bidi: isolate;
}





.ftw h1 {color:#fff;  } 
.ftw h2 {color:#fff;  } 
.ftw h3 {color:#fff;  } 
.ftw {color:#fff;  } 
.ftw a:link {color:#fff;   }
.ftw a:visited {color:#fff;   }
.ftw a:hover {color:#fff;  }



.minitext {    font-size: 0.9em;    }









.colbox {
    
    background: #f8f8f8; 
    padding: 30px;
    border-radius: 4px;
    box-sizing: border-box;
    
}


.col {
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}


.bak1 {background-image: url('../_photos/bak1.png'); background-size: cover; background-position: center center ;}




.blubox { 
    max-width: 480px;
    background-color: #b0955f;
    margin: 0 auto; 
    transition: background-color 0.2s ease-in-out;
}

.blubox:hover { 
    background-color: #00a99d;
}
 









/* THREE COLUMN LAYOUT */
.three-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
    gap: 40px; /* This adds the padding/space between them */
}

/* Optional: Adding a bit of styling to the columns themselves */
.three-columns .col {

}

/* MOBILE FALLBACK */
@media (max-width: 968px) {
    .three-columns {
        grid-template-columns: 1fr; /* Collapses into a single column */
        gap: 20px; /* Reduces the gap slightly for mobile screens */
    }
}



/* TWO COLUMN LAYOUT (Aligned perfectly with 3-columns) */
.two-columns {
    display: grid;
    /* Use the exact same base grid as the three-column layout */
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px; 
}

/* Tell the second column to stretch across two grid spaces */
.two-columns .col:nth-child(2) {
    grid-column: span 2;
}

/* Optional styling */
.two-columns .col {

}

/* MOBILE FALLBACK */
@media (max-width: 968px) {
    .two-columns {
        grid-template-columns: 1fr; /* Collapses into a single column */
        gap: 20px; 
    }
    
    /* Reset the stretching on mobile so they stack evenly */
    .two-columns .col:nth-child(2) {
        grid-column: span 1;
    }
}




/* TWO COLUMN LAYOUT ALT (Wide column FIRST: 2/3 and 1/3) */
.two-columns-alt {
    display: grid;
    /* Use the exact same base grid as the three-column layout */
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px; 
}

/* Tell the FIRST column to stretch across two grid spaces */
.two-columns-alt .col:nth-child(1) {
    grid-column: span 2;
}

/* Optional styling */
.two-columns-alt .col {

}

/* MOBILE FALLBACK */
@media (max-width: 968px) {
    .two-columns-alt {
        grid-template-columns: 1fr; /* Collapses into a single column */
        gap: 20px; 
    }
    
    /* Reset the stretching on mobile so they stack evenly */
    .two-columns-alt .col:nth-child(1) {
        grid-column: span 1;
    }
}


/* TWO COLUMN LAYOUT EQUAL (50/50 split) */
.two-columns-equal {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates 2 equal columns */
    gap: 40px; 
    
}

/* Optional styling */
.two-columns-equal .col {
    /* Ready for your custom styles if needed */
}

/* MOBILE FALLBACK */
@media (max-width: 968px) {
    .two-columns-equal {
        grid-template-columns: 1fr; /* Collapses into a single column */
        gap: 20px; 
    }
}














/* LOGO */
.logo {
    display: flex;
    align-items: center;
    height: 100%;
}

.logo img {
    height: 70px; /* Explicit height fixes the disappearing SVG bug */
    width: auto;
    display: block;
    transition: height 0.3s ease;
}

.site-header.shrunk .logo img {
    height: 40px; 
}

/* NAV DESKTOP */
.nav {
    display: flex;
    gap: 30px;
    font-size: 1.2em;
}

.nav a {
    text-decoration: none;
}

/* BURGER ICON */
.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.burger span {
    width: 25px;
    height: 2px;
    background: #111;
    display: block;
}

/* MOBILE NAV */
@media (max-width: 768px) {
    .nav {
        position: absolute;
        top: 110%;
        right: 20px;
        width: auto;
        background: #fff;
        flex-direction: column;
        align-items: flex-end;
        padding: 15px 20px;
        display: none;
        border-radius: 5px;
        border-bottom: 1px solid #ccc; 
    }

    .nav.active {
        display: flex;
    }

    .burger {
        display: flex;
    }
}











/* =========================================
   LAYOUT & TYPOGRAPHY
========================================= */
.wrap { 
    margin: 0em; 
    padding: 0em; 
   /* 
    
    background: #f3f3f3;  
    background: linear-gradient(135deg, #f3f3f3 0%, #f8f2e4 50%, #e0f2f0 100%);
    
    
    background: linear-gradient(135deg, #f3f3f3 ,  #f3f3f3 , #f8f2e4  );
     */
    
    background:#f3f3f3  url('../_files/images/ubak.png'); background-size: cover; background-position: center center ;
    
}

.section { 
    margin: 0em; 
    padding: 0em; 
}


.pds { padding: 2em 3em; }
.scm { margin: 2em 3em; }


@media (max-width: 1200px) { 
    
    .pds  {  padding: 2em; }

}
@media (max-width: 800px)  { 
    
    .pds  {  padding: 1em; }
        
    .scm {   margin: 1em; }

}
@media (max-width: 500px)  { 
    
    .pds  {  padding: 0.5em; }

}
















.bold {font-weight: 700 ;}




.logomax {max-width: 175px; height: auto ; margin: 0 auto; }



.hrx {  
    
    background-image: url('../_files/images/hrx.png'); background-size:auto  ; background-position: center center ; background-repeat:repeat-x ;
    margin: 0 2em;
}


.hrx2 {  
    
    background-image: url('../_files/images/hr.png'); background-size: contain ; background-position: center center ; background-repeat:no-repeat; width:50px; height: 40px; ;
    margin: 0 auto;
}



.cst {  text-align: center; }
.rst {  text-align: right; }


.push-right { align-self: flex-end; }

.push-center { align-self: center; }



.brdb1 { border-bottom: 1px solid #ccc;  }
.brdt1 { border-top: 1px solid #ccc;  }


.shadow  {box-shadow: 0 5px 15px rgba(0,0,0,0.15); }

.shadowx {box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.greyscale {
  filter: grayscale(50%);
}



.op50 {opacity: 0.5 ;}
.op25 {opacity: 0.25 ;}

.roundedge {  border-radius: 6px;}





.bakfff { background: #fff ; }




.vftag           { opacity: 0.25 ; max-width: 200px;  transition: opacity 0.2s ease-in-out; /* Smooth crossfade */  }
.vftag:hover     { opacity: 0.5 ; }












/* HERO SLIDESHOW CONTAINER */

.wide {  aspect-ratio: 16 / 9;  }
.ultrawide {  aspect-ratio: 2.35 / 1;  }
.fourthirds {  aspect-ratio: 4 / 3;  }
.square {  aspect-ratio: 1 / 1;  }



/* Default (Portrait / Mobile vertical) */
.xtrawide { 
    aspect-ratio: 4 / 3 ; 
}

/* Changes when the screen is Landscape (Desktop / Rotated phone) */
@media (orientation: landscape) {
    .xtrawide {
        aspect-ratio: 2.35 / 1;
    }
}



    
.text-box {
    display: block; 
}



/* Forces all text inside the wrapped hero-slider to ignore the global link colors */

a .hero-slider .text-box h1,
a .hero-slider .text-box h2,
a .hero-slider .text-box p {
    
    color: #111; /* Put your desired text color here */
}

/* Prevents the text from changing color when you hover over the slider */
a:hover .hero-slider .text-box h2,
a:hover .hero-slider .text-box p {
    color: #111; 
}



@media (max-width: 800px)  {
    
.text-box {
    display: none; 
}

}








.hero-slider {
    position: relative;
    width: 100%;
    
    overflow: hidden;
}

/* INDIVIDUAL SLIDES */
.slide {
    position: absolute;
    inset: 0; /* Stretches to fill the container */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Smooth crossfade */
}

.slide.active {
    opacity: 1;
}

/* GRADIENT OVERLAY 
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0),  rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.30));
    background-image: url('../_files/bak0.png'); background-size: cover; background-position: center center ;
    z-index: 1; /* Places it above the images *//*
}
*/

/* CONTENT CONTAINER */
.hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Removed flexbox centering so we can explicitly position the text box */
}

/* THE TEXT BOX */
.text-box {
    position: absolute;
    top: 73%; /* Pushes the box down so 70% of the space is above it */
    left: 50%; /* Centers it horizontally */
    transform: translate(-50%, -50%); /* Perfectly offsets it based on its own dimensions */
    
    /* Keeps the box from stretching off-screen on mobile devices */
    
    width: 80%; 
    max-width: 768px; 
    
    
   /* 
    
    background: rgba(255, 255, 255, 0.7);
    
    background: rgba(255, 255, 255, 0.85);
    
    */
    box-sizing: border-box;
    
    /* Your original styles */
    
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.85),  rgba(255, 255, 255, 0.65));
    padding: 30px 40px;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.text-box h1 {
    margin: 0 0 10px 0;
    
}





















/* ========================================= */
/* --- BLUE PINE VILLA CUSTOM STYLES --- */
/* ========================================= */

/* Το Καρτελάκι στη Δεξιά Λίστα */
.villa-highlight-card {
    background-color: var(--color-primary-pale);
    border: 1px solid var(--color-primary-dark);
    border-radius: 6px;
    padding: 4px 15px;
    margin-bottom: 15px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    
}

.villa-highlight-card:hover {
    background-color: var(--color-white);
}



.villa-title {
    color: var(--color-primary-dark);
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 3px;
    display: flex;             /* Για να μπουν εικόνα και κείμενο σε τέλεια στοίχιση */
    align-items: center; 
    justify-content: center;
    gap: 8px;                  /* Κενό ανάμεσα στο εικονίδιο και το κείμενο */
}

/* Το εικονίδιο μέσα στο καρτελάκι της λίστας */
.villa-list-icon {
    width: 40px;               /* Μικρότερο μέγεθος για να ταιριάζει με τα γράμματα */
    height: auto;
}





































/* =========================================
   GALLERY GRID
========================================= */
.gallery {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    padding: 5px;
}

@media (max-width: 1600px) { .gallery { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1200px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .gallery { grid-template-columns: repeat(1, 1fr); } }

.thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: pointer;
    border-radius: 5px;
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease, transform 0.3s ease;
}

.thumb:hover img {
    opacity: 0.9;
    transform: scale(1.02);
}

/* =========================================
   MODAL LIGHTBOX
========================================= */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.modal.active {
    display: flex;
}

.modal img {
    width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: white;
    cursor: pointer;
    user-select: none;
    padding: 20px;
}

.prev { left: 0; }
.next { right: 0; }

.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    color: white;
    cursor: pointer;
}





















/* ========================================= */
/* --- CONTACT MODAL & FORM STYLES --- */
/* ========================================= */

.contact-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7); /* Σκοτεινό ημιδιάφανο φόντο */
    display: none; /* Κρυφό από προεπιλογή */
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.contact-modal.active {
    display: flex;
}

.contact-modal-content {
    background: rgba(255,255,255,0.95);
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px; /* Responsive: Μέχρι 500px σε PC, 90% σε κινητά */
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.contact-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s;
}

.contact-close:hover {
    color: var(--color-primary-dark);
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--color-text-dark);
    font-weight: 600;
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 5px var(--color-primary-pale);
}