/* =========================================

   CORE SETUP & ALIGNMENT

   ========================================= */

:root {

    --primary: #4a2c3a;

    --secondary: #ffb84d;

    --accent: #8c3a3a;

    --white: #ffffff;

    --text: #333;

    --bg-light: #fffcf2;

    --border-color: #3b4252;

}


/* ΔΙΟΡΘΩΣΗ ΓΙΑ ΤΟ "ΚΟΛΥΜΠΗΜΑ" (OVERFLOW) */

html, body {

    width: 100%;

    margin: 0;

    padding: 0;

    overflow-x: hidden; /* Απαγορεύει την οριζόντια κύλιση */

    scroll-behavior: smooth;

}


* {

    box-sizing: border-box; /* Διασφαλίζει ότι τα paddings δεν μεγαλώνουν το πλάτος των στοιχείων */

}


body {

    font-family: 'Montserrat', sans-serif;

    color: var(--text);

    line-height: 1.8;

}


img, video {

    max-width: 100%; 

    height: auto;

    display: block;

}


.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

    width: 100%;

}


.flex-between {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.flex { display: flex; align-items: center; }

.align-center { align-items: center; }


.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }


.grid-3 { 

    display: grid; 

    grid-template-columns: repeat(3, 1fr); 

    gap: 60px 30px; 

}


.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }


.section-padding { padding: 100px 0; }

.text-center { text-align: center; }

.bg-light { background-color: var(--bg-light); }


/* =========================================

   TOP BAR

   ========================================= */

.top-bar {

    background: var(--primary);

    color: var(--white);

    height: 40px;

    position: fixed;

    width: 100%;

    top: 0;

    z-index: 1002;

}


.top-bar .container { height: 100%; }


.top-bar a {

    color: var(--white);

    text-decoration: none;

    font-size: 0.85rem;

    transition: 0.3s;

}


.top-bar a:hover { color: var(--secondary); }

.top-bar-contact { display: flex; align-items: center; gap: 25px; }


.top-bar-actions { gap: 15px; }

.top-bar-social a { font-size: 1.1rem; margin-left: 10px; }


.btn-top-booking {

    background: var(--secondary);

    color: var(--primary) !important;

    padding: 4px 15px;

    font-weight: 700;

    border-radius: 2px;

    margin-left: 10px;

    transition: 0.3s;

    font-size: 0.85rem;

}

.btn-top-booking:hover { background: var(--white); }


/* =========================================

   HEADER & NAVIGATION

   ========================================= */

.site-header {

    background: #ffffff;

    height: 100px;

    border-bottom: 4px solid var(--border-color);

    position: sticky;

    top: 40px; 

    z-index: 1000;

    width: 100%;

}


.site-header .container { height: 100%; }

.logo-img { height: 75px; object-fit: contain; }


.main-nav {

    display: flex;

    align-items: center;

    flex-grow: 1;

    justify-content: center; 

}


.nav-list {

    display: flex;

    list-style: none;

    gap: 10px;

    margin: 0;

    padding: 0;

}


.nav-list a {

    text-decoration: none;

    color: var(--primary);

    font-weight: 700;

    font-size: 0.85rem;

    text-transform: uppercase;

    padding: 10px 15px;

    transition: all 0.3s ease;

    letter-spacing: 1px;

    position: relative;

}


.nav-list a:hover, .nav-list a.active { color: var(--accent); }


.header-actions {

    display: flex;

    align-items: center;

    gap: 15px;

}


.lang-btn {

    background-color: #e5e7eb;

    border: 2px solid #2d3748;

    color: #2d3748;

    font-weight: 800;

    font-size: 0.8rem;

    padding: 4px 10px;

    border-radius: 4px;

    text-decoration: none;

    transition: 0.3s;

}


.lang-btn:hover { background-color: #d1d5db; color: #1a202c; }


.menu-toggle {

    display: none;

    background: transparent;

    border: none;

    cursor: pointer;

    padding: 5px;

    z-index: 1100;

}


.hamburger {

    display: block; width: 30px; height: 3px; background: var(--primary); position: relative; transition: 0.3s;

}

.hamburger::before, .hamburger::after { content: ''; position: absolute; width: 30px; height: 3px; background: var(--primary); left: 0; transition: 0.3s; }

.hamburger::before { top: -8px; }

.hamburger::after { top: 8px; }


/* Hamburger Animation */

.menu-toggle.is-active .hamburger { background: transparent; }

.menu-toggle.is-active .hamburger::before { transform: rotate(45deg); top: 0; }

.menu-toggle.is-active .hamburger::after { transform: rotate(-45deg); top: 0; }


/* =========================================

   TITLES & TYPOGRAPHY

   ========================================= */

h1, h2, h3 { color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }


h2 {

    font-size: 2.2rem;

    position: relative;

    padding-bottom: 15px;

    margin-bottom: 20px;

    display: inline-block;

}


h2::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 60px;

    height: 3px;

    background: var(--secondary);

}


.section-title h2::after { left: 50%; transform: translateX(-50%); }

.content-text p { margin-bottom: 15px; }


/* =========================================

   HORIZONTAL AMENITIES ROW

   ========================================= */

.amenities-row {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 40px;

    margin-top: 80px;

    padding-top: 50px;

    border-top: 1px solid rgba(0,0,0,0.08);

}


.amenity-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    color: var(--primary);

    transition: transform 0.3s ease;

}


.amenity-item:hover {

    transform: translateY(-5px);

}


.amenity-item i {

    font-size: 2rem;

    margin-bottom: 10px;

    color: var(--secondary);

}


.amenity-item span {

    font-weight: 700;

    font-size: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 1px;

}


/* =========================================

   CARDS & IMAGES

   ========================================= */

.card-link-wrapper {

    text-decoration: none;

    color: inherit;

    display: flex;

    flex-direction: column;

    height: 100%;

}


.card {

    background: var(--white);

    padding: 40px 25px; 

    text-align: center;

    box-shadow: 0 5px 25px rgba(0,0,0,0.05);

    border-bottom: 3px solid var(--secondary);

    transition: 0.4s;

    display: flex;

    flex-direction: column;

    height: auto;

}


.card:hover { transform: translateY(-8px); box-shadow: 0 15px 45px rgba(0,0,0,0.1); }

.card i { font-size: 2.2rem; color: var(--secondary); margin-bottom: 15px; display: block;}

.card h3 { font-size: 1.1rem; margin-bottom: 10px; }

.card p { font-size: 0.9rem; line-height: 1.6; margin: 0; }


.philosophy-img {

    width: 100%;

    border-radius: 4px;

    box-shadow: -15px 15px 0 var(--secondary);

}


/* =========================================

   FOOTER

   ========================================= */

.site-footer {

    background: var(--primary);

    color: rgba(255,255,255,0.8);

    padding: 80px 0 20px;

}


.footer-grid-4 {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 40px;

}


.footer-col h3 {

    color: var(--secondary);

    font-size: 0.95rem; 

    margin-bottom: 20px;

    letter-spacing: 1.5px;

}


.footer-links { list-style: none; padding: 0; margin: 0;}

.footer-links a { color: inherit; text-decoration: none; display: block; margin-bottom: 10px; transition: 0.3s;}

.footer-links a:hover { color: var(--secondary); padding-left: 5px;}


.social-links-footer a {

    color: var(--white);

    font-size: 1.5rem;

    margin-right: 15px;

}


.footer-bottom {

    margin-top: 40px;

    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,0.1);

    font-size: 0.9rem;

}

.footer-bottom a { color: var(--secondary); text-decoration: none; }


.designer-credit {

    margin-top: 10px;

    font-size: 0.8rem;

    opacity: 0.7;

}


.designer-credit a {

    color: var(--secondary);

    font-weight: 600;

    transition: 0.3s;

}

.designer-credit a:hover { color: var(--white); }


/* =========================================

   HERO & PARALLAX

   ========================================= */

.video-hero {

    height: 70vh;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

}


.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }


/* ΑΝΟΙΧΤΟ ΧΡΩΜΑ ΣΤΟΝ ΤΙΤΛΟ HERO */

.hero-content { position: relative; color: var(--white); z-index: 1; }

.hero-content h1 { 

    color: #ffffff !important; 

    font-size: clamp(2rem, 4vw, 3rem); 

    margin-bottom: 10px; 

    text-shadow: 2px 2px 10px rgba(0,0,0,0.6);

}


.parallax-section {

    padding: 120px 0;

    background-attachment: fixed;

    background-size: cover;

    background-position: center;

    color: var(--white);

    position: relative;

}


.parallax-section::before {

    content: ''; position: absolute; inset: 0; background: rgba(74, 44, 58, 0.45); z-index: 1;

}


.parallax-content { position: relative; z-index: 2; }

.parallax-title { color: var(--white); text-shadow: 2px 2px 10px rgba(0,0,0,0.8); margin-bottom: 20px;}


.btn-ghost {

    display: inline-block;

    border: 2px solid var(--white);

    color: var(--white);

    padding: 12px 30px;

    text-decoration: none;

    font-weight: 700;

    margin-top: 20px;

    transition: 0.3s;

}

.btn-ghost:hover { background: var(--white); color: var(--primary); }


.btn-primary {

    background: var(--primary);

    color: var(--white);

    padding: 12px 30px;

    text-decoration: none;

    display: inline-block;

    font-weight: 700;

    border: 2px solid var(--primary);

    transition: 0.3s;

}

.btn-primary:hover { background: transparent; color: var(--primary); }


/* =========================================

   RESPONSIVE (MOBILE FIXES)

   ========================================= */

@media (max-width: 992px) {

    .grid-2, .grid-4, .footer-grid-4 { grid-template-columns: 1fr; gap: 30px; }

    .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 30px; }

    

    .menu-toggle { display: block; }

    

    /* ΕΜΦΑΝΙΣΗ ΚΟΥΜΠΙΟΥ ΓΛΩΣΣΑΣ ΣΤΟ MOBILE */

    .lang-btn { 

        display: inline-block !important; 

        margin-right: 15px;

        font-size: 0.75rem;

        padding: 4px 8px;

        vertical-align: middle;

    }

    

    .main-nav {

        position: fixed; 

        top: 40px !important; /* ΞΕΚΙΝΑΕΙ ΚΑΤΩ ΑΠΟ ΤΟ TOP BAR */

        right: -100%; 

        width: 80%; 

        max-width: 300px;

        height: calc(100vh - 40px);

        background: var(--white); 

        transition: all 0.4s ease;

        padding: 110px 30px 30px; 

        box-shadow: -10px 0 30px rgba(0,0,0,0.1);

        flex-direction: column; 

        align-items: flex-start; 

        justify-content: flex-start; 

        z-index: 1001;

    }

    

    .main-nav.is-open { right: 0; }

    .nav-list { flex-direction: column; width: 100%; gap: 5px; }

    .nav-list a { display: block; width: 100%; border-bottom: 1px solid #eee; padding: 15px 0; font-size: 1rem; }

}


@media (max-width: 768px) {

    .section-padding { padding: 60px 0; }

    .top-bar { height: auto; padding: 10px 0; position: relative; }

    .top-bar .flex-between { flex-direction: column; gap: 10px; text-align: center; }

    .top-bar-contact { flex-direction: column; gap: 5px; }

    .site-header { height: auto; padding: 15px 0; top: 0; position: sticky; }

    .logo-img { height: 50px; }

    .parallax-section { background-attachment: scroll; padding: 80px 0; }

    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 30px; }

    .amenities-row { gap: 20px; margin-top: 40px; padding-top: 30px; }

    .hero-content h1 { font-size: 1.8rem; }

    .hero-content p { font-size: 0.9rem; }

    .philosophy-img { box-shadow: -8px 8px 0 var(--secondary); }

}