/* ==========================================================================
   VRC PROPERTIES — RESPONSIVE
   Desktop-first overrides at laptop / tablet / mobile breakpoints.
   ========================================================================== */

/* ---------- Laptop (≤1200px) ---------- */
@media (max-width: 1200px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid .footer-col:last-child { grid-column: span 3; }
  .contact-info-strip { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
  :root { --navbar-height: 78px; }

 .navbar{
        position:fixed;
        top:0;
        left:0;
        right:0;
        width:100%;
        height:70px;
        z-index:99999;
    }

    .navbar.is-solid{
        z-index:99999;
    }

    .navbar .container{
        display:flex;
        align-items:center;
        justify-content:space-between;
        height:70px;
        width:100%;
    }

    .nav-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        position:relative;
        z-index:100001;
        cursor:pointer;
    }

    .nav-links{
        position:fixed;
        top:70px;
        left:0;
        width:100%;
        height:calc(100vh - 70px);

        background:#121212;

        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;

        gap:20px;
        padding:30px 24px;

        overflow-y:auto;

        transform:translateX(100%);
        visibility:hidden;
        opacity:0;

        transition:
            transform .35s ease,
            opacity .35s ease,
            visibility .35s ease;

        z-index:100000;
    }

    .nav-links.is-open-mobile{
        transform:translateX(0);
        visibility:visible;
        opacity:1;
    }

    .nav-links a{
        width:100%;
        display:block;
        color:#fff;
        font-size:18px;
        padding:16px 0;
        border-bottom:1px solid rgba(255,255,255,.08);
        text-decoration:none;
    }

    .nav-links a:last-child{
        border-bottom:none;
    }

    body.no-scroll{
        overflow:hidden;
    }
  .hero-grid { grid-template-columns: 1fr; text-align: left; min-height: auto; padding-bottom: var(--space-2xl); }
  .hero-visual { margin-top: var(--space-xl); }
  .hero-feature-card { position: static; width: 100%; margin-top: var(--space-md); }

  .search-card { grid-template-columns: repeat(2, 1fr); margin-top: var(--space-lg); }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .tile-grid { grid-template-columns: repeat(3, 1fr); }

  .slider-track > * { flex: 0 0 calc(50% - (var(--space-lg) / 2)); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .footer-grid .footer-col:last-child { grid-column: span 2; }

  .form-row { grid-template-columns: 1fr; }
  .contact-info-strip { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-lg); }
  .map-mini-cards { grid-template-columns: 1fr; }

  .timeline { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-lg); }
  .timeline::before { display: none; }

  .masonry { columns: 2; }

  .testimonial-card { flex-direction: column; text-align: center; }
  .testimonial-person { justify-content: center; }

  .cta-band { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ---------- Mobile (≤768px) ---------- */
@media (max-width: 768px) {
  :root { --navbar-height: 70px; --space-3xl: 4rem; --space-2xl: 3rem; }

  .hero-title { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero-content { max-width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; }

  .search-card { grid-template-columns: 1fr; padding: var(--space-md); }

  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }

  .stat-strip { gap: var(--space-lg); }
  .stat-item .num { font-size: 1.5rem; }

  .slider-track > * { flex: 0 0 100%; }
  .slider-controls .slider-arrow { display: none; }

  .amenity-strip { justify-content: flex-start; gap: var(--space-md); }
  .amenity-item { width: calc(33.333% - var(--space-md)); }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid .footer-col:last-child { grid-column: span 1; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .contact-info-strip { grid-template-columns: 1fr 1fr; }

  .timeline { grid-template-columns: 1fr 1fr; }

  .masonry { columns: 1; }

  .cta-band { padding: var(--space-lg); }
  .cta-left { flex-direction: column; align-items: flex-start; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { flex: 1; }

  .whatsapp-float { width: 50px; height: 50px; bottom: 18px; right: 18px; }

  .form-card, .enquiry-card { padding: var(--space-lg); }

  .section { padding-block: var(--space-2xl); }
}

@media (max-width: 480px) {
  .contact-info-strip { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .amenity-item { width: calc(50% - var(--space-md)); }
  .tab-list { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
}
@media (max-width: 767px) {
    .nav-actions .btn,
    .nav-book-btn {
        display: none !important;
    }
}
@media (max-width:1024px){

.navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:9999;
}

.navbar .container{
    display:flex;
    align-items:center;
    justify-content:space-between;

    width:100%;
    height:100%;
}

.nav-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
}

body.no-scroll{
    overflow:hidden;
}

}
/* ==========================================
   MOBILE & TABLET HERO + HEADER FIX
   ========================================== */

@media (max-width:1024px){

    :root{
        --navbar-height:70px;
    }

    .navbar{
        position:fixed;
        top:0;
        left:0;
        right:0;
        height:70px;
        z-index:99999;
    }

    .navbar .container{
        height:70px;
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .hero{
        min-height:68vh;
        padding-top:70px;
        overflow:hidden;
    }

    .hero-inner{
        padding-top:0;
    }

    .hero-grid{
        min-height:calc(68vh - 70px);
        align-items:center;
    }

    .hero-video{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center top;
        transform:scale(1.25);
    }

}

@media (max-width:768px){

    .hero{
        min-height:62vh;
    }

    .hero-grid{
        min-height:calc(62vh - 70px);
    }

    .hero-video{
        transform:scale(1.35);
    }

}
/* ==========================================
   MOBILE HORIZONTAL SCROLL FIX
   ========================================== */

@media (max-width:1024px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .hero,
    .navbar,
    .container,
    .hero-inner,
    .hero-grid{
        max-width:100%;
        overflow-x:hidden;
    }

    img,
    video{
        max-width:100%;
        display:block;
    }

}
/* ==========================================
   FOUNDER IMAGE - MOBILE & TABLET
   ========================================== */

@media (max-width:1024px){

    .founder-image img{
        height:420px;
        object-fit:cover;
        object-position:center top;
    }

}

@media (max-width:768px){

    .founder-image img{
        height:320px;
        border-radius:18px;
    }

}
/* ==========================================
   TESTIMONIAL SECTION - MOBILE ONLY
   ========================================== */

@media (max-width:768px){

    /* Section */
    .testimonial-section{
        padding:60px 0;
    }

    /* Heading */
    .testimonial-section .section-title{
        font-size:34px;
        line-height:1.2;
        margin-bottom:15px;
    }

    /* Testimonial Card */
    .testimonial-card{
        width:90%;
        margin:0 auto;
        padding:18px 12px;
        border-radius:24px;
    }

    /* Quote */
    .testimonial-quote p{
        font-size:18px;
        line-height:1.8;
        text-align:center;
        max-width:100%;
    }

    /* Client Name */
    .testimonial-person{
        margin-top:22px;
        justify-content:center;
        text-align:center;
    }

    .testimonial-person h5{
        font-size:20px;
    }

    .testimonial-person span{
        font-size:15px;
    }

    /* Slider Arrows */
    .slider-arrow{
        width:44px;
        height:44px;
    }

    .slider-arrow:first-child{
        left:12px;
    }

    .slider-arrow:last-child{
        right:12px;
    }

    /* Dots */
    .slider-dots{
        margin-top:24px;
    }

    /* WhatsApp */
    .whatsapp-float{
        right:16px;
        bottom:16px;
    }

}
/* ==========================================
   MOBILE STICKY MENU FIX
   ========================================== */

@media (max-width:1024px){

    .navbar,
    .navbar.is-solid{
        z-index:99999;
    }

    .nav-toggle{
        position:relative;
        z-index:100001;
    }

    .nav-links{
        position:fixed;
        top:70px;
        left:0;
        width:100%;
        height:calc(100vh - 70px);

        background:#121212;

        z-index:100000;

        display:none;
    }

    .nav-links.is-open-mobile{
        display:flex;
        flex-direction:column;
    }

}
html.no-scroll,
body.no-scroll{
    overflow:hidden;
    height:100vh;
}
/* ==========================================
   INNER PAGE HERO IMAGE FIX
   Mobile & Tablet Only
   ========================================== */

@media (max-width:1024px){

    .hero{
        min-height:68vh !important;
        overflow:hidden;
        position:relative;
    }

    .hero-bg,
    .hero-image{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
    }

    .hero-image img{
        width:100%;
        height:100%;
        object-fit:cover;
           object-position:left center;
        display:block;
    }

    .hero-inner{
        position:relative;
        z-index:2;
    }

}

@media (max-width:768px){

    .hero{
        min-height:58vh !important;
    }

}
/* Logo */
/* Normal Header Logo */
.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 4px 8px;     
    border-radius: 8px;
}

.brand img {
    width: 150px;          
    height: 55px;          
    object-fit: contain;
    display: block;
}

/* Sticky Header */
header.sticky .brand {
   display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 4px 8px;      
    border-radius: 8px;
}

header.sticky .brand img {
    width: 150px;
    height: 55px;
}

/* Footer Logo */
.footer-logo{
    display: inline-block;
    text-decoration: none;
}

.footer-logo img{
    width: 180px;
    height: auto;
    max-height: 60px;
    object-fit: contain;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
/* ==========================
   Mobile Header
========================== */
@media (max-width: 768px) {

    header .container,
    header .navbar,
    nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    /* Logo - Left Corner */
    .brand {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-right: auto;
        margin-left: 0;
        padding: 0;
        background: transparent;
    }

    .brand img {
        width: 120px;
        height: auto;
        display: block;
        
    }

    /* Menu - Right Corner */
    .menu-toggle,
    .nav-toggle,
    .hamburger {
        margin-left: auto;
    }
}

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

    header.sticky {
        padding: 10px 15px;
    }

    header.sticky .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: relative;
    }

    /* Logo - Left Corner */
    header.sticky .brand {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: transparent;
        padding: 0;
        margin: 0;
        border: none;
        box-shadow: none;
    }

    header.sticky .brand img {
        width: 120px;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* Menu Button - Right Corner */
    header.sticky .menu-toggle,
    header.sticky .nav-toggle,
    header.sticky .hamburger {
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header.sticky .menu-toggle i,
    header.sticky .nav-toggle i,
    header.sticky .hamburger i {
        font-size: 28px;
        color: #fff;
    }
}
.footer-contact-list{
    list-style:none;
    padding:0;
    margin:20px 0 0;
}

.footer-contact-list li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:20px;
    color:#fff;
    line-height:1.8;
}

.footer-contact-list svg{
    width:22px;
    height:22px;
    color:var(--color-primary);
    flex-shrink:0;
    margin-top:3px;
}

.footer-contact-list a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.footer-contact-list a:hover{
    color:var(--color-primary);
}

.footer-contact-list strong{
    color:#fff;
    font-size:16px;
    display:block;
    margin-bottom:4px;
}