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

body{
font-family:'Inter',sans-serif;
background:#101010;
color:#fff;
}

/* TOP BAR */
.top-bar{
width:100%;
background:#000;
padding:12px 40px;
}

.flags{
display:flex;
justify-content:flex-end;
}

.flags img{
width:24px;
margin-left:10px;
}

/* HERO */
.hero{
position:relative;
height:100vh;
background:url('../images/hero.jpg') center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
}

.hero-overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.35);
}

.content{text-align:center;position:relative;}

.logo{
width:340px;
margin-bottom:-8px;
animation:fadeIn 1s ease;
transition:0.4s;
}
.logo:hover{transform:scale(1.05);}

.subtitle{
margin-top:0;
color:#ccc;
animation:fadeIn 1.3s ease;
}

.btn{
background:#c9a96e;
color:#fff;
padding:14px 34px;
display:inline-block;
margin-top:18px;
border-radius:10px;
text-decoration:none;
animation:fadeIn 1.6s ease;
transition:0.3s;
}
.btn:hover{transform:translateY(-3px);}

.menu{
margin-top:45px;
animation:fadeIn 2s ease;
}

.menu a{
margin:0 20px;
color:#fff;
text-decoration:none;
position:relative;
}
.menu a::after{
content:'';
position:absolute;
bottom:-5px;
left:0;
width:0;
height:1px;
background:#c9a96e;
transition:0.3s;
}
.menu a:hover::after{width:100%;}

/* SECTION */
.about{
background:#222222;
padding:120px 10%;
}

.container{
display:flex;
align-items:center;
gap:80px;
}

.text{
flex:1;
color:#ddd;
}

.text h2{
font-size:28px;
margin-bottom:25px;
font-weight:500;
}

.text p{
margin-bottom:20px;
line-height:1.7;
}

.cards{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
margin:30px 0;
}

.card{
background:rgba(255,255,255,0.05);
padding:15px;
border-radius:8px;
}

.image{
flex:1;
}

.image img{
width:100%;
border-radius:20px;
}

.final{
margin-top:20px;
font-size:15px;
color:#ccc;
}

/* ANIM */
@keyframes fadeIn{
from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:translateY(0);}
}

@media(max-width:768px){
.container{flex-direction:column;}
}


/* GALLERY */

body{background:#101010;color:#fff;font-family:Inter;margin:0;}
.hero{height:100vh;background:url('../images/hero.jpg') center/cover no-repeat;display:flex;align-items:center;justify-content:center;position:relative;}
.hero-overlay{position:absolute;width:100%;height:100%;background:rgba(0,0,0,.35);}
.content{text-align:center;position:relative;}
.logo{width:320px;}
.btn{background:#c9a96e;padding:14px 30px;border-radius:10px;}

.gallery{background:#0a1014;padding:80px;}
.wrapper{display:flex;gap:40px;}

.slider{flex:1;overflow:hidden;position:relative;} /* NO BORDER RADIUS */
.slides{display:flex;transition:.5s;}
.slides img{width:100%;cursor:pointer;}

.arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:40px;background:rgba(0,0,0,.5);padding:10px;border-radius:50%;cursor:pointer;}
.prev{left:10px}.next{right:10px}

.label{text-align:center;margin-top:10px;color:#ccc;}

.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;display:none;align-items:center;justify-content:center;flex-direction:column;}
.lb-slider{width:90%;overflow:hidden;}
.lb-slides{display:flex;transition:.5s;}
.lb-slides img{width:100%;flex-shrink:0;}
#count{position:absolute;bottom:20px;color:#ccc;}
.close{position:absolute;top:20px;right:30px;font-size:40px;cursor:pointer;}


/* exact gallery transplant */

body{background:#101010;color:#fff;font-family:Inter;margin:0;}
.hero{height:100vh;background:url('../images/hero.jpg') center/cover no-repeat;display:flex;align-items:center;justify-content:center;position:relative;}
.hero-overlay{position:absolute;width:100%;height:100%;background:rgba(0,0,0,.35);}
.content{text-align:center;position:relative;}
.logo{width:320px;}
.btn{background:#c9a96e;padding:14px 30px;border-radius:10px;}

.gallery{background:#0a1014;padding:80px;}
.wrapper{display:flex;gap:40px;}

.slider{flex:1;overflow:hidden;position:relative;} /* NO BORDER RADIUS */
.slides{display:flex;transition:.5s;}
.slides img{width:100%;cursor:pointer;}

.arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:40px;background:rgba(0,0,0,.5);padding:10px;border-radius:50%;cursor:pointer;}
.prev{left:10px}.next{right:10px}

.label{text-align:center;margin-top:10px;color:#ccc;}

.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;display:none;align-items:center;justify-content:center;flex-direction:column;}
.lb-slider{width:90%;overflow:hidden;}
.lb-slides{display:flex;transition:.5s;}
.lb-slides img{width:100%;flex-shrink:0;}
#count{position:absolute;bottom:20px;color:#ccc;}
.close{position:absolute;top:20px;right:30px;font-size:40px;cursor:pointer;}


/* Gallery arrows visible only on hover */
.slider .arrow{
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.slider:hover .arrow{
    opacity: 1;
}
.slider .arrow:hover{
    transform: translateY(-50%) scale(1.06);
}



.services{
    background:#0a1014;
    padding:100px 10%;
    color:#ddd;
}
.services-container h2{
    margin-bottom:20px;
}

.contacts{
    background:#101010;
    padding:100px 10%;
    color:#ddd;
}
.contacts-container h2{
    margin-bottom:20px;
}


/* Services section refined */
.services{
    background:#222222 !important;
    padding:100px 8%;
    color:#f0f0f0;
}

.services-container{
    max-width:1280px;
    margin:0 auto;
}

.services-card{
    background:rgba(10,16,20,0.55);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:24px;
    padding:34px 38px;
    box-shadow:0 18px 40px rgba(0,0,0,0.18);
}

.services-header{
    margin-bottom:28px;
}

.services-header h2{
    margin:0 0 16px 0;
    font-size:36px;
    font-weight:500;
    color:#f3f3f3;
}

.services-header p{
    margin:0;
    max-width:980px;
    color:#d6d6d6;
    line-height:1.8;
    font-size:17px;
}

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

.services-columns ul{
    margin:0;
    padding-left:24px;
}

.services-columns li{
    color:#f1f1f1;
    line-height:1.9;
    font-size:18px;
}

.services-columns li::marker{
    color:#c9a96e;
}

@media (max-width: 900px){
    .services{
        padding:80px 6%;
    }
    .services-card{
        padding:26px 22px;
        border-radius:18px;
    }
    .services-header h2{
        font-size:30px;
    }
    .services-columns{
        grid-template-columns:1fr;
        gap:10px;
    }
    .services-columns li{
        font-size:17px;
        line-height:1.8;
    }
}


/* Services header centered refinement */
.services-header{
    margin-bottom:28px;
    text-align:center;
}

.services-header h2{
    text-align:center;
}

.services-header p{
    text-align:center;
    margin:0 auto;
    max-width:680px;
}


/* Bring service columns closer to center */
.services-columns{
    max-width: 820px;
    margin: 0 auto;
    gap: 36px 28px !important;
    justify-content: center;
}

.services-columns ul{
    margin: 0 auto;
}

@media (max-width: 900px){
    .services-columns{
        max-width: 100%;
    }
}


/* Services columns tighter and centered */
.services-columns{
    max-width: 640px !important;
    margin: 0 auto !important;
    gap: 24px 8px !important;
    justify-content: center !important;
    align-items: start;
}
.services-columns ul{
    width: max-content;
    margin: 0 auto !important;
    padding-left: 22px;
}
@media (max-width: 900px){
    .services-columns{
        max-width: 100% !important;
        gap: 10px !important;
    }
    .services-columns ul{
        width: auto;
    }
}


/* Elegant contacts form */
.contacts{
    background:#101010;
    padding:100px 8%;
    color:#f1f1f1;
}

.contacts-container{
    max-width:1100px;
    margin:0 auto;
    display:flex;
    justify-content:center;
}

.contacts-card{
    width:100%;
    max-width:860px;
    background:linear-gradient(180deg, rgba(34,34,34,0.95) 0%, rgba(16,16,16,0.98) 100%);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:24px;
    padding:42px 42px 36px;
    box-shadow:0 18px 40px rgba(0,0,0,0.22);
}

.contacts-header{
    text-align:center;
    margin-bottom:28px;
}

.contacts-header h2{
    margin:0 0 14px 0;
    font-size:36px;
    font-weight:500;
    color:#f4f4f4;
}

.contacts-header p{
    margin:0 auto;
    max-width:640px;
    color:#d2d2d2;
    line-height:1.7;
    font-size:16px;
}

.contact-form{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
}

.form-row{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.form-row.single{
    grid-template-columns:1fr;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    background:#1a1a1a;
    border:1px solid rgba(255,255,255,0.10);
    border-radius:14px;
    padding:16px 18px;
    color:#f1f1f1;
    font-size:16px;
    outline:none;
    transition:border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:#a9a9a9;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:rgba(201,169,110,0.55);
    box-shadow:0 0 0 4px rgba(201,169,110,0.10);
    background:#171717;
}

.privacy-check{
    width:100%;
    max-width:720px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:12px;
    color:#d6d6d6;
    font-size:15px;
    line-height:1.6;
    text-align:center;
}

.privacy-check input{
    width:18px;
    height:18px;
    margin-top:3px;
    accent-color:#c9a96e;
    flex:0 0 auto;
}

.form-submit{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:6px;
}

.form-submit button{
    background:#c9a96e;
    color:#fff;
    border:none;
    border-radius:12px;
    padding:15px 34px;
    font-size:15px;
    letter-spacing:0.03em;
    cursor:pointer;
    transition:transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.form-submit button:hover{
    background:#b8955c;
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(0,0,0,0.18);
}

@media (max-width: 900px){
    .contacts{
        padding:80px 6%;
    }
    .contacts-card{
        padding:28px 22px 24px;
        border-radius:18px;
    }
    .contacts-header h2{
        font-size:30px;
    }
    .form-row{
        grid-template-columns:1fr;
        gap:14px;
    }
    .privacy-check{
        justify-content:flex-start;
        text-align:left;
    }
}


/* Gold divider + footer */
.footer-line{
    width:100%;
    height:1px;
    background:#c9a96e;
}

.site-footer{
    background:#101010;
    color:#e6e6e6;
    padding:46px 8% 24px;
}

.footer-container{
    max-width:1280px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:36px;
    align-items:start;
}

.footer-brand h3{
    margin:0 0 14px 0;
    font-size:24px;
    font-weight:500;
    color:#f3f3f3;
}

.footer-brand p{
    margin:0;
    max-width:340px;
    color:#bdbdbd;
    line-height:1.7;
    font-size:15px;
}

.footer-links h4{
    margin:0 0 16px 0;
    font-size:15px;
    font-weight:500;
    color:#c9a96e;
    letter-spacing:0.04em;
    text-transform:uppercase;
}

.footer-links{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.footer-links a{
    color:#d8d8d8;
    text-decoration:none;
    font-size:15px;
    transition:color 0.25s ease;
}

.footer-links a:hover{
    color:#ffffff;
}

.footer-bottom{
    max-width:1280px;
    margin:28px auto 0;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,0.06);
    text-align:center;
}

.footer-bottom p{
    margin:0;
    color:#9f9f9f;
    font-size:14px;
}

@media (max-width: 980px){
    .footer-container{
        grid-template-columns:1fr 1fr;
        gap:28px;
    }
}

@media (max-width: 700px){
    .site-footer{
        padding:38px 6% 20px;
    }
    .footer-container{
        grid-template-columns:1fr;
        gap:24px;
    }
    .footer-brand p{
        max-width:none;
    }
}


/* Hero booking box */
.hero-booking-box{
    width:100%;
    max-width:1040px;
    margin:34px auto 0;
    background:rgba(0,0,0,0.58);
    border:1px solid rgba(255,255,255,0.10);
    border-radius:26px;
    padding:26px 26px 22px;
    box-shadow:0 20px 50px rgba(0,0,0,0.28);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
}
.hero-booking-box.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.hero-booking-inner{
    width:100%;
}
.booking-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    align-items:end;
}
.booking-field{
    text-align:left;
}
.booking-field label{
    display:block;
    color:#f2f2f2;
    font-size:13px;
    margin-bottom:8px;
    letter-spacing:0.03em;
}
.booking-field input,
.booking-field select{
    width:100%;
    height:54px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(255,255,255,0.06);
    color:#ffffff;
    padding:0 16px;
    font-size:16px;
    outline:none;
}
.booking-field input::placeholder{
    color:#b8b8b8;
}
.booking-field select{
    appearance:none;
}
.booking-field input:focus,
.booking-field select:focus{
    border-color:rgba(201,169,110,0.65);
    box-shadow:0 0 0 4px rgba(201,169,110,0.10);
}
.booking-submit-wrap{
    margin-top:16px;
    display:flex;
    justify-content:center;
}
.booking-submit{
    min-width:180px;
    height:48px;
    border:none;
    border-radius:999px;
    background:#c9a96e;
    color:#fff;
    font-size:14px;
    letter-spacing:0.10em;
    cursor:pointer;
    padding:0 24px;
    transition:transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.booking-submit:hover{
    background:#b8955c;
    transform:translateY(-2px);
    box-shadow:0 12px 22px rgba(0,0,0,0.22);
}
@media (max-width: 980px){
    .hero-booking-box{
        max-width:92%;
        padding:22px 18px 18px;
    }
    .booking-grid{
        grid-template-columns:1fr 1fr;
    }
}
@media (max-width: 640px){
    .hero-booking-box{
        margin-top:26px;
        border-radius:20px;
    }
    .booking-grid{
        grid-template-columns:1fr;
    }
    .booking-submit{
        width:100%;
        min-width:0;
    }
}


/* Booking box refinement */
.hero-booking-box{
    margin:58px auto 0 !important;
}

.booking-grid-three{
    grid-template-columns:repeat(3, 1fr) !important;
}

.booking-field input[type="date"]{
    color-scheme: dark;
}

.booking-field select{
    appearance:auto;
}

@media (max-width: 980px){
    .booking-grid-three{
        grid-template-columns:1fr 1fr !important;
    }
}
@media (max-width: 640px){
    .booking-grid-three{
        grid-template-columns:1fr !important;
    }
}


/* Booking box final alignment */
.hero-booking-box{
    margin:88px auto 0 !important;
}

.booking-field{
    text-align:center !important;
}

.booking-field label{
    text-align:center !important;
}

.booking-field select,
.booking-field input{
    text-align:left;
}

/* Dark select dropdown */
.booking-field select{
    background:#111 !important;
    color:#fff !important;
    border-color:rgba(255,255,255,0.14) !important;
}

.booking-field select option{
    background:#111 !important;
    color:#fff !important;
}

/* Extra spacing under logo/subtitle/button area when booking opens */
.hero-booking-box.is-open{
    margin-top:96px !important;
}


/* Refine hero spacing and booking placement */
.content{
    padding-top: 36px !important;
}

.logo{
    margin-top: 10px !important;
    margin-bottom: -18px !important;
}

.subtitle{
    margin-top: -2px !important;
    margin-bottom: 10px !important;
}

.btn{
    margin-top: 10px !important;
    margin-bottom: 16px !important;
}

.menu{
    margin-top: 24px !important;
}

.hero-booking-box{
    margin: 120px auto 0 !important;
}

.hero-booking-box.is-open{
    margin-top: 120px !important;
}

/* Select dark teal */
.booking-field select{
    background:#29474b !important;
    color:#fff !important;
}

.booking-field select option{
    background:#29474b !important;
    color:#fff !important;
}


/* Move logo/text/menu block lower and close gap above booking box */
.content{
    padding-top: 120px !important;
}

.logo{
    margin-top: 0 !important;
}

.subtitle{
    margin-top: 6px !important;
}

.btn{
    margin-top: 14px !important;
    margin-bottom: 18px !important;
}

.menu{
    margin-top: 26px !important;
    margin-bottom: 0 !important;
}

.hero-booking-box{
    margin: 54px auto 0 !important;
}

.hero-booking-box.is-open{
    margin-top: 54px !important;
}


/* Entry animations */
.reveal{
    opacity:0;
    will-change:transform, opacity;
}

.reveal-top{
    animation: fadeDown 0.8s cubic-bezier(0.22,1,0.36,1) forwards;
}

.reveal-hero{
    animation: fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
}

.delay-1{ animation-delay: 0.08s; }
.delay-2{ animation-delay: 0.18s; }
.delay-3{ animation-delay: 0.28s; }
.delay-4{ animation-delay: 0.40s; }
.delay-5{ animation-delay: 0.52s; }

.reveal-section{
    opacity:0;
    transform:translateY(42px);
    transition:opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
    will-change:transform, opacity;
}

.reveal-section.is-visible{
    opacity:1;
    transform:translateY(0);
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(26px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

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

@media (prefers-reduced-motion: reduce){
    .reveal,
    .reveal-section{
        animation:none !important;
        transition:none !important;
        opacity:1 !important;
        transform:none !important;
    }
}


/* =========================
   MOBILE REFINEMENT
   ========================= */
@media (max-width: 768px){

    /* Hero darker on mobile */
    .hero::before,
    .hero:before{
        background: rgba(0,0,0,0.42) !important;
    }

    /* Hide CTA button and keep booking visible */
    #hero-booking-trigger{
        display:none !important;
    }

    .hero-booking-box{
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        display:block !important;
        margin:28px auto 0 !important;
        max-width:92% !important;
        padding:18px 14px 16px !important;
        border-radius:20px !important;
    }

    .hero-booking-box.is-open{
        margin-top:28px !important;
    }

    .booking-grid,
    .booking-grid-three{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    .booking-field label{
        font-size:12px !important;
        margin-bottom:6px !important;
    }

    .booking-field input,
    .booking-field select{
        height:48px !important;
        font-size:15px !important;
        border-radius:14px !important;
    }

    .booking-submit-wrap{
        margin-top:12px !important;
    }

    .booking-submit{
        min-width:140px !important;
        height:44px !important;
        font-size:13px !important;
        padding:0 18px !important;
    }

    /* Hero spacing */
    .content{
        padding-top:88px !important;
    }

    .logo{
        margin-bottom:-8px !important;
    }

    .subtitle{
        margin-top:4px !important;
        margin-bottom:8px !important;
    }

    /* Mobile menu tighter so it stays horizontal */
    .menu{
        display:flex !important;
        flex-wrap:nowrap !important;
        justify-content:center !important;
        align-items:center !important;
        gap:14px !important;
        margin-top:22px !important;
        white-space:nowrap !important;
        overflow:hidden !important;
    }

    .menu a{
        font-size:15px !important;
        letter-spacing:0 !important;
        padding:0 !important;
    }

    /* About section: image full width and square corners */
    .about,
    .villa,
    .about-section{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .about .image,
    .about-image,
    .about .about-image,
    .about .image-wrap{
        width:100% !important;
        max-width:100% !important;
    }

    .about .image img,
    .about-image img,
    .about .about-image img,
    .about .image-wrap img{
        width:100% !important;
        max-width:100% !important;
        border-radius:0 !important;
        display:block !important;
    }

    /* Galleries full width, stacked one above the other */
    .gallery-grid,
    .galleries,
    .gallery-wrap{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:22px !important;
    }

    .gallery-card,
    .slider,
    .gallery .slider,
    .gallery-item{
        width:100% !important;
        max-width:100% !important;
    }

    .slider img,
    .slides img,
    .gallery-card img{
        width:100% !important;
        display:block !important;
    }

    /* Footer fully centered */
    .site-footer,
    .footer-container,
    .footer-brand,
    .footer-links,
    .footer-bottom{
        text-align:center !important;
    }

    .footer-container{
        grid-template-columns:1fr !important;
        justify-items:center !important;
    }

    .footer-brand p{
        max-width:100% !important;
        margin:0 auto !important;
    }

    .footer-links{
        align-items:center !important;
    }
}


/* MOBILE FIX V2 */
@media (max-width: 768px){
    /* keep side margins overall */
    .menu{
        width:80% !important;
        max-width:80% !important;
        margin-left:auto !important;
        margin-right:auto !important;
        gap:10px !important;
        justify-content:space-between !important;
    }
    .menu a{
        font-size:14px !important;
    }

    .hero-booking-box{
        width:60% !important;
        max-width:60% !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .about .text,
    .about-content,
    .about .content-text,
    .about .text-card,
    .about .about-text,
    .about .text-content{
        width:80% !important;
        max-width:80% !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    /* gallery full width, stacked */
    .gallery .gallery-grid,
    .gallery-grid,
    .galleries,
    .gallery-wrap,
    .gallery-container,
    .gallery-row,
    .gallery .container{
        display:grid !important;
        grid-template-columns:1fr !important;
        flex-direction:column !important;
        gap:22px !important;
    }
    .gallery-card,
    .gallery-item,
    .gallery .slider,
    .slider,
    .gallery .slides,
    .gallery .slider-wrap{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
    .slider img,
    .slides img,
    .gallery-card img,
    .gallery-item img{
        width:100% !important;
        max-width:100% !important;
        display:block !important;
    }
}

@media (max-width: 540px){
    .menu{ width:80% !important; max-width:80% !important; }
    .hero-booking-box{ width:60% !important; max-width:60% !important; }
    .about .text,
    .about-content,
    .about .content-text,
    .about .text-card,
    .about .about-text,
    .about .text-content{ width:80% !important; max-width:80% !important; }
}


/* MOBILE TARGETED FIX 3 */
@media (max-width: 768px){
    /* logo block a bit higher */
    .content{
        padding-top:52px !important;
    }

    /* mobile menu tighter and contained */
    .menu{
        width:80% !important;
        max-width:80% !important;
        margin-left:auto !important;
        margin-right:auto !important;
        display:flex !important;
        flex-wrap:nowrap !important;
        justify-content:center !important;
        align-items:center !important;
        gap:6px !important;
        white-space:nowrap !important;
        overflow:visible !important;
    }
    .menu a{
        margin:0 !important;
        padding:0 !important;
        font-size:13px !important;
        letter-spacing:0 !important;
    }

    /* booking box wider */
    .hero-booking-box{
        width:80% !important;
        max-width:80% !important;
        margin:24px auto 0 !important;
    }
    .hero-booking-box.is-open{
        margin-top:24px !important;
    }

    /* About section: keep text card with margins */
    .about{
        padding-left:0 !important;
        padding-right:0 !important;
    }
    .about .container{
        width:100% !important;
        max-width:100% !important;
        gap:26px !important;
    }
    .about .text{
        width:80% !important;
        max-width:80% !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
    .about .image,
    .about .image img{
        width:100% !important;
        max-width:100% !important;
    }

    /* Gallery full width and stacked */
    .gallery{
        padding:60px 0 !important;
    }
    .gallery .wrapper,
    .wrapper{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        gap:0 !important;
        padding:0 !important;
        margin:0 !important;
    }
    .gallery .slider,
    .slider{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        flex:none !important;
        margin:0 0 26px 0 !important;
    }
    .gallery .slides,
    .slides{
        width:100% !important;
    }
    .gallery .slides img,
    .slides img,
    .gallery .slider img,
    .slider img{
        width:100% !important;
        max-width:100% !important;
        display:block !important;
    }
    .gallery .label,
    .label{
        margin-top:12px !important;
        margin-bottom:0 !important;
    }

    /* footer centered */
    .footer-container,
    .footer-brand,
    .footer-links,
    .footer-bottom{
        text-align:center !important;
    }
}

@media (max-width: 420px){
    .menu{ width:84% !important; max-width:84% !important; gap:5px !important; }
    .menu a{ font-size:12.5px !important; }
    .hero-booking-box{ width:80% !important; max-width:80% !important; }
}


/* MOBILE TARGETED FIX 4 */
@media (max-width: 768px){
    /* Raise the whole hero content block near the top with ~10% margin */
    .content{
        padding-top: 10vh !important;
    }

    /* Slightly more space between menu items */
    .menu{
        gap: 10px !important;
        margin-top: 20px !important;
    }
    .menu a{
        font-size: 13px !important;
    }

    /* Keep booking box close to the menu */
    .hero-booking-box,
    .hero-booking-box.is-open{
        margin-top: 20px !important;
    }
}

@media (max-width: 420px){
    .content{
        padding-top: 10vh !important;
    }
    .menu{
        gap: 8px !important;
    }
}


/* MOBILE TARGETED FIX 5 */
@media (max-width: 768px){
    .content{
        padding-top: 5vh !important;
    }
    .menu{
        gap: 14px !important;
        margin-top: 20px !important;
    }
    .menu a{
        font-size: 13px !important;
    }
}

@media (max-width: 420px){
    .content{
        padding-top: 5vh !important;
    }
    .menu{
        gap: 10px !important;
    }
}


/* MOBILE TARGETED FIX 6 */
@media (max-width: 768px){
    /* push the whole hero content block to the top */
    .hero{
        align-items:flex-start !important;
    }
    .content{
        width:100% !important;
        padding-top:5vh !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
    }
    .logo{
        margin-top:0 !important;
        margin-bottom:-6px !important;
    }
    .subtitle{
        margin-top:2px !important;
        margin-bottom:8px !important;
    }

    /* darker hero image on mobile */
    .hero-overlay{
        background:rgba(0,0,0,0.58) !important;
    }

    /* wider mobile menu */
    .menu{
        width:92% !important;
        max-width:92% !important;
        gap:16px !important;
        margin-top:18px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        justify-content:center !important;
    }
    .menu a{
        margin:0 !important;
        font-size:13px !important;
        letter-spacing:0 !important;
    }

    /* keep booking box directly under menu */
    .hero-booking-box,
    .hero-booking-box.is-open{
        width:80% !important;
        max-width:80% !important;
        margin-top:18px !important;
    }
}

@media (max-width: 420px){
    .hero{
        align-items:flex-start !important;
    }
    .content{
        padding-top:5vh !important;
    }
    .menu{
        width:94% !important;
        max-width:94% !important;
        gap:12px !important;
    }
    .menu a{
        font-size:12.5px !important;
    }
}


/* MOBILE TARGETED FIX 7 */
@media (max-width: 768px){
    /* Move hero block even higher */
    .content{
        padding-top: 2vh !important;
    }
    .logo{
        margin-top: 0 !important;
    }

    /* Slightly larger mobile menu font */
    .menu a{
        font-size: 14px !important;
    }
}

@media (max-width: 420px){
    .content{
        padding-top: 2vh !important;
    }
    .menu a{
        font-size: 13px !important;
    }
}


/* MOBILE TARGETED FIX 8 */
@media (max-width: 768px){
    .menu{
        gap: 20px !important;
    }
}

@media (max-width: 420px){
    .menu{
        gap: 14px !important;
    }
}


/* Footer CIN line */
.footer-cin{
    margin-top:8px;
    color:#bdbdbd;
    font-size:14px;
    line-height:1.6;
}


/* Gallery subtitles centered and same style/color as labels */
.gallery-subtitle{
    text-align:center !important;
    color:#ccc !important;
    font-size:inherit !important;
    line-height:1.6;
    margin-top:6px;
    margin-bottom:0;
    font-weight:inherit !important;
}
.label{
    text-align:center !important;
    color:#ccc !important;
}


/* Footer spacing under location line */
.footer-brand p:nth-of-type(2){
    margin-bottom:14px;
}


/* Restore desktop hero menu / mobile top bar menu */
.desktop-menu{
    display:flex;
}
.mobile-menu{
    display:none;
}

.booking-field input,
.booking-field select{
    text-align:center !important;
}

.top-bar{
    position:fixed !important;
    top:0;
    left:0;
    right:0;
    z-index:9999 !important;
    background:#000 !important;
}

/* Desktop */
@media (min-width: 769px){
    .mobile-menu{
        display:none !important;
    }
    .desktop-menu{
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        gap:18px !important;
        margin-top:45px !important;
        width:auto !important;
        max-width:none !important;
    }
    .desktop-menu a{
        color:#fff !important;
        text-decoration:none !important;
        font-size:14px !important;
        margin:0 !important;
        padding:0 !important;
        letter-spacing:0 !important;
    }
}

/* Mobile */
@media (max-width: 768px){
    .desktop-menu{
        display:none !important;
    }
    .top-bar{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:10px 12px !important;
    }
    .top-bar .mobile-menu{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:12px !important;
        margin:0 auto !important;
        width:auto !important;
        max-width:none !important;
        white-space:nowrap !important;
        opacity:1 !important;
        visibility:visible !important;
        flex:0 1 auto !important;
    }
    .top-bar .mobile-menu a{
        color:#fff !important;
        text-decoration:none !important;
        font-size:13px !important;
        margin:0 !important;
        padding:0 !important;
        letter-spacing:0 !important;
    }
    .top-bar .flags{
        position:absolute !important;
        right:12px !important;
        top:50% !important;
        transform:translateY(-50%) !important;
        display:flex !important;
        gap:8px !important;
        margin-left:0 !important;
    }
    .top-bar .flags img{
        width:22px !important;
        margin:0 !important;
        display:block !important;
    }
}

@media (max-width: 420px){
    .top-bar .mobile-menu{
        gap:10px !important;
    }
    .top-bar .mobile-menu a{
        font-size:12px !important;
    }
}


/* Mobile home icon + lower hero block */
.home-icon{
    display:none;
    color:#fff;
    text-decoration:none;
    font-size:20px;
    line-height:1;
    opacity:0.95;
}

@media (max-width: 768px){
    .top-bar{
        justify-content:center !important;
        position:fixed !important;
    }

    .home-icon{
        display:block !important;
        position:absolute;
        left:12px;
        top:50%;
        transform:translateY(-50%);
        z-index:2;
    }

    .top-bar .mobile-menu{
        margin:0 auto !important;
    }

    /* push hero block lower under the fixed top bar */
    .hero{
        align-items:flex-start !important;
    }

    .content{
        padding-top: 14vh !important;
    }

    .hero-booking-box,
    .hero-booking-box.is-open{
        margin-top: 20px !important;
    }
}

@media (max-width: 420px){
    .home-icon{
        left:10px;
        font-size:18px;
    }
    .content{
        padding-top: 15vh !important;
    }
}


/* Mobile hero block up to about 5% from top */
@media (max-width: 768px){
    .content{
        padding-top: 5vh !important;
    }
}

@media (max-width: 420px){
    .content{
        padding-top: 5vh !important;
    }
}


/* Mobile hero block slightly lower: 6% from top */
@media (max-width: 768px){
    .content{
        padding-top: 6vh !important;
    }
}

@media (max-width: 420px){
    .content{
        padding-top: 6vh !important;
    }
}


/* Footer map link */
.footer-map-link{
    color:#bdbdbd;
    text-decoration:none;
    transition:color 0.25s ease, text-shadow 0.25s ease;
}
.footer-map-link:hover{
    color:#ffffff;
    text-shadow:0 0 10px rgba(255,255,255,0.22);
}


/* Top bar fixed only on mobile */
.top-bar{
    position:relative !important;
}

@media (max-width: 768px){
    .top-bar{
        position:fixed !important;
        top:0;
        left:0;
        right:0;
        z-index:9999 !important;
    }
}