/* =====================================================
   HERO SECTION
===================================================== */

.hero{

    position:relative;

    width:100%;

    height:78vh;

    min-height:820px;

    overflow:hidden;

    margin-bottom:0;

    background:#08273A;

}

.slides{

    width:100%;

    height:100%;

    position:relative;

}

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:opacity .8s ease;

}

.slide.active{

    opacity:1;

    visibility:visible;

}

.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}

.hero-badge{

    display:inline-block;

    color:var(--gold);

    font-size:.9rem;

    letter-spacing:4px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:22px;

}

.hero-content{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:min(90%, 850px);

    text-align:center;

    z-index:5;

}

.hero-image{

    width:10%;

    height:10%;

    object-fit:cover;

}

.hero3{

    object-position:center 60%;

}


.hero-content h1{

    font-size:clamp(2.6rem,4vw,4.2rem);

    line-height:1.15;

    margin-bottom:22px;

    color:white;

}

.hero-content p{

    font-size:1.05rem;

    line-height:1.8;

    color:#F5F5F5;

    max-width:650px;

    margin:0 auto 38px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:22px;

    flex-wrap:wrap;

}

.hero-btn{

    padding:15px 32px;

    border-radius:50px;

    font-size:.95rem;

    font-weight:700;

    letter-spacing:1px;

    transition:.35s;

}

.hero-btn-outline{

    color:white;

    border:2px solid white;

}

.hero-btn-outline:hover{

    background:white;

    color:#08273A;

}

.hero-btn-filled{

    background:var(--gold);

    color:#08273A;

}

.hero-btn-filled:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(0,0,0,.25);

}


/* ====================================
   ARROWS
==================================== */

.prev,
.next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(6px);

    color:white;

    font-size:28px;

    transition:.3s;

    z-index:20;

}

.prev:hover,
.next:hover{

    background:rgba(255,255,255,.35);

}

.prev{

    left:30px;

}

.next{

    right:30px;

}


/* ====================================
   HERO THUMBNAILS
==================================== */

.hero-thumbnails{

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    width:100%;

    display:flex;
    justify-content:space-evenly;   
    align-items:center;

    gap:0;

    padding:13px 70px 10px;              

    background:#08273A;

}

.hero-thumb{

    display:flex;
    flex-direction:column;
    align-items:center;

    background:none;

    height:auto;

    opacity:.65;

    overflow:visible;

    cursor:pointer;

    transition:.35s;
}

.hero-thumb img{

    width:90px;
    height:90px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid rgba(255,255,255,.35);

    transition:.35s;
}

.hero-thumb span{

    position:static;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin-top:8px;

    padding:8px 18px;

    min-width:80px;

    background:rgba(8,39,58,.92);

    border:1px solid rgba(255,255,255,.18);

    border-radius:999px;

    color:#fff;

    font-size:.9rem;

    font-weight:700;

    white-space:nowrap;

    transition:.35s;

}

.hero-thumb:hover{

    opacity:1;

    transform:translateY(-6px);

}

.hero-thumb:hover span{

    border-color:rgba(255,255,255,.45);

    background:rgba(15,50,71,.95);

}

.hero-thumb.active span{

    background:var(--gold);

    color:#08273A;

    border:1px solid var(--gold);

    font-weight:700;

}

.hero-thumb:hover img{

    transform:scale(1.05);

}

.hero-thumb.active{

    opacity:1;

    transform:translateY(-3px);

}

.hero-thumb.active img{

    width:95px;
    height:95px;

    border:3px solid var(--gold);

    box-shadow:0 0 0 5px rgba(212,175,55,.15);

    transform:scale(1.05);

}

.hero-thumb:last-child{

    border-right:none;

}

/* ===========================
   DELIVERY MODAL
=========================== */

.delivery-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .3s ease,
                visibility .3s ease;
}

.delivery-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.delivery-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(8, 39, 58, .72);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.delivery-modal-card {
    position: relative;
    z-index: 1;

    width: min(460px, 100%);

    padding: 50px 40px 42px;

    background: #F7F3EF;

    border: 1px solid rgba(212, 175, 55, .55);
    border-radius: 22px;

    box-shadow: 0 30px 90px rgba(0, 0, 0, .35);

    text-align: center;

    transform: translateY(20px) scale(.97);

    transition: transform .3s ease;
}

.delivery-modal.active .delivery-modal-card {
    transform: translateY(0) scale(1);
}

.delivery-modal-eyebrow {
    display: block;

    color: #D4AF37;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 4px;
    text-transform: uppercase;
}

.delivery-modal-card h2 {
    margin: 18px 0 12px;

    color: #08273A;

    font-family: "Cormorant Garamond", serif;
    font-size: 46px;
    font-weight: 600;
    line-height: .95;
}

.delivery-modal-card p {
    margin: 0 0 30px;

    color: #59636A;

    font-family: Manrope, sans-serif;
    font-size: 15px;
    line-height: 1.7;
}

.delivery-modal-options {
    display: grid;
    gap: 12px;
}

.delivery-option {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 58px;

    border-radius: 12px;

    text-decoration: none;

    font-family: Manrope, sans-serif;
    font-size: 15px;
    font-weight: 700;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.delivery-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}

.delivery-option-efood {
    background: #EA004B;
    color: #fff;
}

.delivery-option-wolt {
    background: #00C2E8;
    color: #08273A;
}

.delivery-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(8, 39, 58, .15);
    border-radius: 50%;

    background: transparent;
    color: #08273A;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}

.delivery-modal-close:hover {
    background: #08273A;
    color: #F7F3EF;
}


/* MOBILE */

@media (max-width: 600px) {

    .delivery-modal {
        padding: 18px;
    }

    .delivery-modal-card {
        padding: 46px 24px 28px;
        border-radius: 18px;
    }

    .delivery-modal-card h2 {
        font-size: 40px;
    }

    .delivery-modal-card p {
        font-size: 14px;
        margin-bottom: 24px;
    }

}

/* ====================================
   RESPONSIVE
==================================== */

@media(max-width:600px){

.hero{

height:65vh;

min-height:500px;

}

.hero-content h1{

font-size:2.2rem;

}

.hero-content p{

font-size:.95rem;

}

.hero-badge{

font-size:.75rem;

letter-spacing:3px;

}

.hero-btn{

width:100%;

max-width:280px;

}

}

@media(max-width:900px){

.hero-content{

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:90%;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.prev,
.next{

display:none;

}

}

/* =====================================================
   SERVICES SECTION
===================================================== */

.about-section{

    width:100%;

    background:#08273A;

}

.about-container{

    width:100%;

}

.about-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:stretch;

    height:620px;

}

.about-row.reverse .about-image{

    order:2;

}

.about-row.reverse .about-content{

    order:1;

}


/* =====================================================
   IMAGE
===================================================== */

.about-image{

    width:100%;
    height:100%;
    overflow:hidden;

}

.events-image{
    background-image:url("images/events.jpg");
	background-repeat:no-repeat;
    background-size:100% auto;
    background-position:center;
    background-color:#08273A;
}

.menu-image{
    background-image:url("images/menu.jpg");
	background-repeat:no-repeat;
    background-size:100% auto;
    background-position:center;
    background-color:#08273A;
}

.wine-image{
    background-image:url("images/wine.jpg");
	background-repeat:no-repeat;
    background-size:100% auto;
    background-position:center;
    background-color:#08273A;
}

.delivery-image{
    background-image:url("images/delivery.jpg");
	background-repeat:no-repeat;
    background-size:100% auto;
    background-position:center;
    background-color:#08273A;
}

.about-image img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

}


/* =====================================================
   CONTENT
===================================================== */

.about-content{

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:70px;

    background:#08273A;

}

.about-subtitle{

    color:var(--gold);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.about-content h2{

    color:#ffffff;

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

    line-height:1.2;

    margin-bottom:30px;

}

.about-content p{

    color:rgba(255,255,255,.82);

    font-size:1.05rem;

    line-height:2;

    max-width:600px;

    margin-bottom:40px;

}

.about-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:fit-content;

    padding:16px 34px;

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

    border-radius:50px;

    color:#ffffff;

    font-weight:700;

    transition:var(--transition);

}

.about-button:hover{

    background:var(--gold);

    color:#08273A;

    transform:translateY(-3px);

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1100px){

    .about-content{

        padding:70px;

    }

    .about-content h2{

        font-size:2.6rem;

    }

}

@media(max-width:900px){

    .about-row{

        grid-template-columns:1fr;

        height:auto;
        min-height:auto;

    }

    .about-row.reverse .about-image{

        order:1;

    }

    .about-row.reverse .about-content{

        order:2;

    }

    .about-image{

        height:350px;

    }

    .about-content{

        padding:60px 35px;

        text-align:center;

        align-items:center;

    }

    .about-content p{

        max-width:100%;

    }

    .about-content h2{

        font-size:2.2rem;

    }

}

@media(max-width:600px){

    .about-image{

        height:260px;

    }

    .about-content{

        padding:45px 25px;

    }

    .about-subtitle{

        font-size:.75rem;

        letter-spacing:3px;

    }

    .about-content h2{

        font-size:1.9rem;

    }

    .about-content p{

        font-size:.95rem;

        line-height:1.8;

    }

    .about-button{

        width:100%;

        max-width:280px;

    }

}

/* =====================================================
   SCROLL ANIMATIONS
===================================================== */

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/* =====================================================
   LOCATION SECTION
===================================================== */

.location-section{

    background:#F7F3EF;

    padding-top:110px;
	
	padding-bottom:5px;

}

.location-container{

    width:min(90%,1200px);

    margin:auto;

}

.location-title{

    text-align:center;

    font-size:3.5rem;

    color:#08273A;

    margin-bottom:80px;

}

.location-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

}

.location-box{

    text-align:center;

}

.location-box h3{

    color:#08273A;

    font-size:2rem;

    margin-bottom:25px;

}

.location-box p{

    color:#555;

    font-size:1.08rem;

    line-height:2;

}

@media(max-width:900px){

.location-grid{

grid-template-columns:1fr;

gap:60px;

}

.location-title{

font-size:2.6rem;

}

.location-box h3{

font-size:1.7rem;

}

}

/* =====================================================
   SECTION DIVIDER
===================================================== */

.divider {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 70px 0;
    background: #F7F3EF;
	padding-top:100px;
	padding-bottom:0px;
}

.divider::before,
.divider::after {
    content: "";
    width: 100px;      
    height: 1px;       
    background: #bdb5ae;
}

.divider span {
    width: 8px;       
    height: 8px;      
    background: #d4af37;
    border-radius: 50%;
    margin: 0 18px;    
}

/* =====================================================
   GOOGLE REVIEWS
===================================================== */

.reviews-section{

    width:100%;

    background:#F7F3EF;

    padding:80px 0;

    overflow:hidden;

    position:relative;

}

.reviews-header{

    width:min(90%,900px);

    margin:0 auto 70px;

    text-align:center;

}

.reviews-subtitle{
	
	 display:block;

    color:var(--gold);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;
	
	padding-bottom: 30px;

}

.reviews-header h2{

    color:#08273A;

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

    margin:18px 0;

}

.reviews-header p{

    color:#666;

    line-height:1.9;

    font-size:1.05rem;

}

/* =====================================================
   GOOGLE REVIEW AUTHOR
===================================================== */

.review-author{

    display:flex;

    align-items:center;

    gap:13px;

    color:#08273A;

    text-decoration:none;

    min-width:0;

    transition:.3s ease;

}

.review-author:hover{

    transform:translateY(-1px);

}

.review-avatar{

    width:48px;

    height:48px;

    min-width:48px;

    border-radius:50%;

    object-fit:cover;

    display:block;

    border:2px solid rgba(212,175,55,.35);

    background:#F7F3EF;

}

.review-avatar-placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    background:#08273A;

    color:#D4AF37;

    font-family:"Cormorant Garamond",serif;

    font-size:1.4rem;

    font-weight:600;

}

.review-author-info{

    min-width:0;

}

.review-author-info h4{

    margin:0 0 4px;

    color:#08273A;

    font-size:1.05rem;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.review-stars{

    color:#F5C542;

    font-size:1rem;

    letter-spacing:2px;

    line-height:1;

}


/* =====================================================
   GOOGLE ATTRIBUTION
===================================================== */

.google-attribution{

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    flex-shrink:0;

    text-decoration:none;

    transition:.3s ease;

}

.google-attribution{

    display:flex;

    align-items:center;
    justify-content:center;

    color:#5e5e5e;

    font-family:Arial, sans-serif;

    font-size:12px;

    font-weight:500;

    white-space:nowrap;

    text-decoration:none;

    transition:.25s ease;

}

.google-attribution:hover{

    color:#08273A;

    transform:translateY(-1px);

}

.google-attribution:hover{

    transform:scale(1.08);

}


/* =====================================================
   REVIEW TEXT
===================================================== */

.review-text{

    margin:0;

    color:#555;

    line-height:1.9;

    font-size:.98rem;

}


/* =====================================================
   REVIEW BOTTOM
===================================================== */

.review-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-top:22px;

}

.review-date{

    color:#999;

    font-size:.78rem;

    white-space:nowrap;

}

.review-google-link{

    color:#08273A;

    font-size:.75rem;

    font-weight:700;

    text-decoration:none;

    white-space:nowrap;

    transition:.3s ease;

}

.review-google-link:hover{

    color:#D4AF37;

}


/* =====================================================
   REVIEW CARD UPDATE
===================================================== */

.review-card{

    min-height:270px;

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

    .review-avatar{

        width:44px;

        height:44px;

        min-width:44px;

    }

    .review-author-info h4{

        font-size:1rem;

    }

    .review-stars{

        font-size:.9rem;

    }

    .review-bottom{

        align-items:flex-start;

        flex-direction:column;

        gap:8px;

    }

}

/* =====================================================
   GOOGLE REVIEW AVATAR - FIX
===================================================== */

.review-top .review-avatar{

    width:48px !important;
    height:48px !important;

    min-width:48px !important;
    min-height:48px !important;

    max-width:48px !important;
    max-height:48px !important;

    border-radius:50% !important;

    object-fit:cover !important;

    display:block;

    border:2px solid rgba(212,175,55,.45);

    box-shadow:0 3px 10px rgba(0,0,0,.10);

}

/* =====================================================
   MARQUEE
===================================================== */

.reviews-slider{

    position:relative;

    overflow:hidden;

    width:100%;

    margin-bottom:90px;

}

/* Fade δεξιά - αριστερά */

.reviews-slider::before,
.reviews-slider::after{

    content:"";

    position:absolute;

    top:0;

    width:140px;

    height:100%;

    z-index:5;

    pointer-events:none;

}

.reviews-slider::before{

    left:0;

    background:linear-gradient(to right,#F7F3EF 0%,transparent 100%);

}

.reviews-slider::after{

    right:0;

    background:linear-gradient(to left,#F7F3EF 0%,transparent 100%);

}

.reviews-track{

    display:flex;

    gap:28px;

    width:max-content;

    animation:scrollReviews 45s linear infinite;

}

.reviews-slider:hover .reviews-track{

    animation-play-state:paused;

}

@keyframes scrollReviews{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}



/* =====================================================
   REVIEW CARD
===================================================== */

.review-card{

    width:370px;

    min-height:240px;

    background:#ffffff;

    border-radius:22px;

    padding:28px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    transition:.35s;

}

.review-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 45px rgba(0,0,0,.12);

}

.review-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:25px;

}

.review-top h4{

    color:#08273A;

    font-size:1.1rem;

    margin-bottom:8px;

}

.review-top span{

    color:#F5C542;

    font-size:1.15rem;

    letter-spacing:2px;

}

.review-top img{

    width:28px;

    height:28px;

    object-fit:contain;

}

.review-card p{

    color:#555;

    line-height:1.9;

    font-size:.98rem;

}



/* =====================================================
   FOOTER
===================================================== */

.reviews-footer{

    text-align:center;

    width:min(90%,700px);

    margin:auto;

}

.reviews-footer h3{

    color:#08273A;

    font-size:2rem;

    margin-bottom:18px;

}

.reviews-footer p{

    color:#666;

    line-height:1.8;

    margin-bottom:35px;

}

.review-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:17px 36px;

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

    border-radius:50px;

    background:transparent;

    color:#08273A;

    font-weight:700;

    transition:var(--transition);

}

.review-button:hover{

    background:var(--gold);

    color:#08273A;

    transform:translateY(-3px);

}



/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:900px){

    .review-card{

        width:320px;

    }

    .reviews-header{

        margin-bottom:55px;

    }

}

@media(max-width:600px){

    .review-card{

        width:280px;

        padding:22px;

    }

    .reviews-header h2{

        font-size:2.2rem;

    }

    .reviews-footer h3{

        font-size:1.7rem;

    }

    .reviews-slider::before,
    .reviews-slider::after{

        width:60px;

    }

}

/* =====================================================
   MOBILE - HIDE HERO THUMBNAILS
===================================================== */

@media screen and (max-width: 900px){

    .hero-thumbnails{
        display:none !important;
        visibility:hidden !important;
        height:0 !important;
        min-height:0 !important;
        padding:0 !important;
        margin:0 !important;
        overflow:hidden !important;
    }

}

.mobile-reserve{
    display:none;
}

@media(max-width:900px){

    .mobile-reserve{
        display:block;
        width:100%;
        margin-top:10px;
    }

    .mobile-reserve a{
        display:flex;
        justify-content:center;
        align-items:center;
        width:100%;
        padding:14px 24px;
        border:1px solid var(--gold);
        border-radius:50px;
        color:white;
        font-size:1rem;
        font-weight:700;
        text-decoration:none;
        transition:.3s ease;
    }

    .mobile-reserve a:hover{
        background:var(--gold);
        color:#08273A;
    }

}