/* --- Google Font & Global Styles --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --primary-green: #135834;
    --primary-green-darker: #0e4026;
    --dark-text: #212529;
    --body-text: #495057;
    --light-bg: #F8F9FA;
    --white: #fff;
    --border-color: #dee2e6;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--white);
    color: var(--body-text);
    scroll-behavior: smooth;
    line-height: 1.7;
}

/* --- Preloader --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #fff;
    transition: opacity 0.5s ease-out;
}
#preloader.fade-out {
    opacity: 0;
}
.preloader-bg {
    width: 100%;
    height: 100vh;
    background-image: url('../media/main.jpg');
    background-size: cover;
    background-position: center ;
}


h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--dark-text); }
.page-section { padding-top: 4rem; padding-bottom: 4rem; }
.bg-light { background-color: var(--light-bg) !important; }
.section-title { font-weight: 700; color: var(--dark-text); margin-bottom: 0.5rem; }
.eyebrow-text { color: var(--primary-green); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.lead { color: var(--body-text); max-width: 600px; margin-left: auto; margin-right: auto; }
.text-primary { color: var(--primary-green) !important; }

/* --- Keyframes for Animations --- */
@keyframes pulse-animation {
  0% { box-shadow: 0 0 0 0 rgba(19, 88, 52, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(19, 88, 52, 0); }
  100% { box-shadow: 0 0 0 0 rgba(19, 88, 52, 0); }
}
@keyframes float-animation {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { translateY(0px); }
}

/* --- HEADER / NAVBAR STYLES --- */
.navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
    /* Always-on Translucent State */
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(222, 226, 230, 0.5) !important;
}

.navbar-brand.logo img {
    height: 80px;
    width: auto;
    transition: height 0.3s ease;
}

/* Link colors for the translucent header */
.navbar .navbar-nav .nav-link {
    color: var(--dark-text) !important;
    font-weight: 600;
    text-shadow: none;
    position: relative;
    padding-bottom: 5px;
}

.navbar .navbar-nav .nav-link.active {
    color: var(--primary-green) !important;
}

.navbar .navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 3px;
    background-color: var(--primary-green);
    border-radius: 2px;
}


/* Phone link styling */
.phone-link {
    display: flex;
    align-items: center;
    color: var(--primary-green) !important;
    font-weight: 700;
}

/* Toggler icon color */
.navbar-dark .navbar-toggler { border: none; }
.navbar-dark .navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* --- Buttons --- */
.btn { border-radius: 50px; padding: 10px 24px; font-weight: 600; transition: all 0.3s ease; }
.btn-primary { background-color: var(--primary-green); border-color: var(--primary-green); color: var(--white) !important; }
.btn-primary:hover { background-color: var(--primary-green-darker); border-color: var(--primary-green-darker); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
.enquire-btn { animation: pulse-animation 2s infinite; }


/* --- HERO SECTION --- */
.hero { 
    position: relative; 
    min-height: 100vh; 
    display: flex; 
    align-items: center;
    padding-top: 80px; 
    padding-bottom: 80px; 
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    background-image: url('../media/main.png');
    background-position: center;
    background-size: cover;
    background-color: #333;
}
.hero-overlay { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)); 
    z-index: 2; 
}
.hero .container {
    position: relative;
    z-index: 3;
}

.hero-text-wrapper {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 0.1rem;
    border-radius: 12px;
    display: inline-block;
}
.hero-headline { font-size: clamp(1.8rem, 8vw, 2.2rem); color: var(--white); text-shadow: none; }
.hero-subheadline { font-size: clamp(1rem, 4vw, 1.2rem); color: var(--white); opacity: 0.9; text-shadow: none; }
.hero-features .hero-badge { background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); color: var(--white); padding: 0.5rem 1rem; font-size: 0.9rem; margin: 5px; display: inline-block; }

/* --- SUB-PAGE HEADER --- */
.page-header {
    padding-top: 140px;
    padding-bottom: 60px;
    background-color: var(--light-bg);
    border-bottom: 1px solid var(--border-color);
}

/* --- Animated Floor Plan Preview --- */
.floor-plan-preview { display: block; max-width: 400px; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.3); position: relative; animation: float-animation 1.3s ease-in-out infinite; transition: all 0.3s ease; border: 3px solid var(--white); }
.floor-plan-preview:hover { transform: scale(1.05); animation-play-state: paused; }
.floor-plan-preview img { width: 100%; height: 100%; object-fit: cover; }
.floor-plan-preview .floor-plan-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(19, 88, 52, 0.7); color: var(--white); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; }
.floor-plan-preview:hover .floor-plan-overlay { opacity: 1; }
.floor-plan-overlay i { font-size: 2.5rem; margin-bottom: 0.5rem; }
.floor-plan-overlay span { font-weight: 600; }

/* --- Configurations & Video Section --- */
.config-card { border: 1px solid var(--border-color); border-radius: 12px; padding: 2rem; background-color: var(--white); box-shadow: 0 5px 15px rgba(0,0,0,0.05); height: 100%; }
.config-card h3 { color: var(--primary-green); font-size: 1.2rem; }
.area-value, .price-value { font-size: 1.8rem; font-weight: 700; color: var(--dark-text); }
.price-value .onwards { font-size: 0.9rem; font-weight: 500; color: var(--body-text); }
.video-responsive { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.video-responsive iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }

/* --- Gallery & Location --- */
.gallery-img { width: 100%; height: 250px; object-fit: cover; border-radius: 12px; transition: all 0.3s ease; cursor: pointer; }
.gallery-img:hover { transform: scale(1.05); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.map-responsive { overflow: hidden; padding-bottom: 75%; position: relative; height: 0; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.map-responsive iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; }

/* --- Footer, Social Icons, FABs --- */
.footer { background-color: var(--light-bg); color: var(--body-text); border-top: 1px solid var(--border-color); }
.footer-disclaimer { font-size: 0.8rem; opacity: 0.8; max-width: 800px; margin: 0 auto; }
.footer-disclaimer a { color: var(--body-text); text-decoration: underline; }
.social-icon { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; background-color: #e2e2e2; color: var(--body-text); margin: 0 5px; text-decoration: none; transition: all 0.3s ease; }
.social-icon:hover { background-color: var(--primary-green); color: var(--white); transform: translateY(-3px); }

.call-fab, .whatsapp-fab {
    position: fixed;
    width: 55px;
    height: 55px;
    right: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: all 0.3s ease;
    color: #fff;
    text-decoration: none;
}
.call-fab:hover, .whatsapp-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    color: #fff;
}
.whatsapp-fab {
    bottom: 20px;
    background-color: #25D366;
    font-size: 1.8rem;
}
.call-fab {
    bottom: 85px; /* (20px bottom + 55px height + 10px margin) */
    background-color: var(--primary-green);
    font-size: 1.5rem;
}

/* --- Modal & Toast --- */
.modal-content { border: none; border-radius: 12px; }
.modal-header { background-color: var(--light-bg); border-bottom: 1px solid var(--border-color); }
.modal-title { font-weight: 600; }
.form-control { border-radius: 8px; padding: 0.75rem 1rem; }
.form-control:focus { border-color: var(--primary-green); box-shadow: 0 0 0 0.25rem rgba(19, 88, 52, 0.25); }
.toast-header { font-weight: bold; }
.toast.success { background-color: #d1e7dd; border-left: 5px solid #0f5132; }
.toast.error { background-color: #f8d7da; border-left: 5px solid #842029; }

/* Styles for Gallery Modal (Lightbox) */
#galleryModal .modal-content {
    background-color: transparent;
    border: none;
}
#galleryModal .modal-body {
    padding: 0;
}
#galleryModal .modal-dialog {
    max-width: 900px;
}
#galleryModal #modalImage {
    border-radius: 12px;
    max-height: 90vh;
    margin: 0 auto;
    display: block;
}

/* --- Media Queries --- */
@media (max-width: 991.98px) {
    .navbar-brand.logo img {
        height: 40px;
    }
    .navbar-collapse {
        background-color: rgba(255, 255, 255, 0.95);
        border-radius: 0 0 12px 12px;
        padding: 1rem;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .navbar-collapse .navbar-nav .nav-link {
        color: var(--dark-text) !important;
        text-shadow: none !important;
    }
    .navbar-collapse .phone-link {
        color: var(--primary-green) !important;
    }
    .navbar .navbar-nav .nav-link.active::after {
        display: none;
    }
}

@media (min-width: 992px) {
    .page-section { padding-top: 5rem; padding-bottom: 5rem; }
    .navbar-collapse { border-top: none; margin-top: 0; padding-top: 0; }
    .navbar .navbar-nav .nav-link { text-align: left; padding: 0.5rem 1rem; }
    .hero { min-height: 100vh; }
    .hero-headline { font-size: clamp(3rem, 6vw, 4rem); }
}