/* =========================================
   1. VARIABLES & GLOBAL
   ========================================= */
:root {
    --primary: #6EC1E4;
    --secondary: #54595F;
    --accent: #61CE70;
    --text: #7A7A7A;
    --dark: #282A2C;
    --white: #FFFFFF;
    --gold-start: #FFDE00;
    --gold-end: #DF9C06;
    --font-lato: "Lato", Sans-serif;
    --font-inter: "Inter", Sans-serif;
    --font-arial: "Arial", Sans-serif;
    --gradient-gold: linear-gradient(90deg, #FFDE00 0%, #DF9C06 43%);
    --gradient-strip: linear-gradient(90deg, #FFDE00 0%, #DF9C06 75%);
    --gradient-why: linear-gradient(90deg, #FFDD01 0%, #DF9C06 49%);
}

* { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: var(--font-lato); color: #454545; line-height: 1.5; overflow-x: hidden; background: #fff; }
h1, h2, h3, h4, h5 { font-family: var(--font-lato); color: var(--dark); font-weight: 600; margin-top: 0; margin-bottom: 20px; line-height: 1.2; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
a:hover { text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; display: block; }
.container { margin: 0 auto; padding: 0 15px; }

/* Responsive Max Widths */
@media (min-width: 1600px) { 
    .container, .hero-content, .intro-grid, .stats-grid, .why-us-wrapper { max-width: 1600px; } 
}
@media (max-width: 1024px) { .container { max-width: 1024px; } }
@media (max-width: 767px) { .container { max-width: 767px; padding: 0 15px; } }

/* =========================================
   2. BUTTONS
   ========================================= */
.btn {
    display: inline-block; padding: 12px 24px; font-size: 15px;
    font-weight: 500; text-transform: uppercase; border-radius: 3px; cursor: pointer; text-align: center; line-height: 15px;
}
.btn-gradient {
    background-image: var(--gradient-gold); color: #000; border: none;
}
.btn-outline {
    background: transparent; border: 2px solid #DF9C06;
    background-image: var(--gradient-gold); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; border-image: var(--gradient-gold) 1;
    font-weight: 600; color: #DF9C06;
}
.btn-outline:hover {
    background: var(--gradient-gold); -webkit-text-fill-color: #000; color: #000;
}
.btn-outline.dark-btn { border: 1px solid #DF9C06; border-image: var(--gradient-gold) 1; }
.btn-black { background: #000; color: #fff; padding: 15px 30px; font-weight: 500; text-transform: uppercase; }
.btn-black:hover { background: #333; }

/* =========================================
   3. HEADER
   ========================================= */
.site-header {
    position: absolute; width: 100%; top: 0; left: 0; z-index: 999;
    border-bottom: 1px solid rgba(255,255,255,0.15); transition: background 0.3s;
}
.site-header.is-sticky {
    position: fixed; background: rgba(0,0,0,0.9); box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.header-inner { display: flex; flex-direction: column; }
.top-bar { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 8px 15px; }
.top-bar-content { display: flex; justify-content: flex-end; }
.social-list { display: flex; gap: 15px; }
.social-list a { color: #fff; font-size: 12px; display: flex; align-items: center; gap: 6px; font-weight: 400; }

.main-bar { padding: 15px; display: flex; justify-content: space-between; align-items: center; }
.logo-col img { max-height: 50px; width: auto; }
.nav-links { display: flex; gap: 20px; }
.nav-links a { color: #fff; text-transform: uppercase; font-size: 15px; font-weight: 500; }
.mobile-toggle { display: none; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }
.mobile-header { display: none; }
.mobile-toggle svg { width: 40px; }

@media (max-width: 1024px) {
    .logo-col img { max-height: 45px; }
    .cta-col { display: flex; align-items: center; gap: 15px; }
    .cta-col .btn { font-size: 11px; padding: 8px; }
    .mobile-toggle svg { width: 30px; }
    .mobile-toggle { display: block; margin-left: auto; background: #0000009c; border-radius: 3px; line-height: 15px; }
    .menu-container {
        position: fixed; top: 0; left: -100%; width: 350px; height: 100vh;
        background: #fff; flex-direction: column; padding: 20px;
        transition: 0.4s; z-index: 1000; box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    }
    .menu-container.active { left: 0; }
    .mobile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .mobile-header img { height: 40px; }
    .close-menu { background: none; border: none; font-size: 20px; cursor: pointer; color: #000; padding: 8px; width: 45px; border-radius: 3px; background-color: #000; color: #fff; }
    .nav-links { flex-direction: column; gap: 0; }
    .nav-links li { padding: 15px 0; }
    .nav-links a { color: #000; padding: 12px 0; border-bottom: 1px solid #eee; }
    .menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; display: none; }
    .menu-overlay.active { display: block; }
}
@media (max-width: 767px) {
    .main-bar { padding: 10px; }
    .logo-col img { max-height: 26px; }
    .cta-col .btn { font-size: 9px; padding: 6px; }
    .mobile-toggle svg { width: 30px; }
    .social-list a { font-size: 9px; }
}

/* =========================================
   4. HERO SECTION & VIDEO OPTIMIZATION
   ========================================= */
.hero-section {
    position: relative;
    min-height: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

/* Optimized Video Background */
.video-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background-color: #000;
    /* Sets the static poster image immediately to prevent white flash */
    background-image: url('assets/images/video-poster.jpg');
    background-size: cover;
    background-position: center;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Hide video initially until JS confirms it is playing */
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* JS will add this class when video starts playing */
.video-background video.is-playing {
    opacity: 1;
}

.overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }

.hero-content { position: relative; z-index: 2; width: 100%; }
.hero-title { color: #ffffff; font-size: 45px; font-weight: 600; margin-bottom: 10px; }
.animated-headline { font-size: 45px; font-weight: 600; line-height: 1.2; }
.headline-dynamic-wrapper { position: relative; height: 1.2em; overflow: hidden; }
.dynamic-text { 
    display: block; position: absolute; width: 100%; left: 0; 
    opacity: 0; transform: translateY(20px); transition: 0.5s;
    color: #fff;
}
.dynamic-text.active { opacity: 1; transform: translateY(0); }
.hero-buttons { margin-top: 20px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1024px) {
    .hero-title { font-size: 24px; }
    .animated-headline { font-size: 24px; }
}
@media (max-width: 767px) {
    .hero-section { min-height: 360px; }
    .hero-title, .dynamic-text { font-size: 25px; }
    .animated-headline { min-height: auto; }
    .headline-dynamic-wrapper { margin-top: 0; height: auto; }
    .dynamic-text { position: relative; opacity: 1; transform: none; display: none; font-size: 14px; margin-bottom: 10px; }
    .dynamic-text.active { display: block; }
    .hero-buttons .btn { font-size: 10px; padding: 8px; }
}

/* =========================================
   5. SECTIONS
   ========================================= */
.gradient-separator { height: 7px; background: var(--gradient-strip); margin-top: -2px; position: relative; z-index: 3; }

/* Intro */
.intro-section { padding-top: 80px; padding-bottom: 80px; }
.intro-grid { display: flex; gap: 40px; align-items: center; justify-content: space-evenly; }
.intro-content { flex: 1; }
.intro-content h1 { font-size: 30px; margin-bottom: 24px; color: #282A2C; }
.gold-border-box { border-left: 8px solid #E3A507; padding-left: 10px; margin-bottom: 24px; }
.highlight { font-size: 19px; font-weight: 500; color: #454545; margin: 0; }
.intro-image { flex: 1; display: flex; justify-content: center; }
.intro-image img { width: 100%; max-width: 790px; }

/* For Sale - Path Updated */
.for-sale-section {
    position: relative; padding: 40px 15px;
    background-image: url('assets/images/bg-salespeople.webp');
    background-attachment: fixed; background-size: cover; background-position: center;
    color: #fff; text-align: center; margin-top: 40px;
}
.overlay-dark { position: absolute; inset: 0; background: #000; opacity: 0.32; }
.relative-z { position: relative; z-index: 1; }
.text-white h2 { color: #fff; font-size: 30px; font-weight: 600; }
.no-properties-found { 
    background: rgba(0,0,0,0.5); padding: 40px; border-radius: 5px; margin: 30px auto; display: inline-block;
}
.no-properties-found i { font-size: 40px; margin-bottom: 10px; display: block; }
.view-more-wrap { margin-top: 20px; display: flex; justify-content: center; }

/* Sold Section */
.sold-section { padding: 50px 15px 30px; }
.section-header.text-dark h2 { font-size: 30px; color: #454545; text-align: center; margin-bottom: 40px; }
.swiper { padding-bottom: 20px !important; }
.property-card { margin: 0; cursor: pointer; box-shadow: 4px 4px 10px rgba(0,0,0,0.2); transition: transform 0.3s; background: #282a2c; }
.card-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.card-details { background: #282A2C; color: #fff; text-align: center; }
.address-main { font-size: 18px; font-weight: 400; font-family: "Lato"; margin-bottom: 5px; }
.address-sub { font-size: 14px; opacity: 0.8; }
.swiper-button-next, .swiper-button-prev { color: #282A2C; }

/* Stats */
.stats-section { padding: 10px 15px 50px; text-align: center; }
.stats-section h2 { font-size: 50px; font-weight: 400; color: #545454; margin-bottom: 40px; }
.stats-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.stat-item { display: flex; flex-direction: column; align-items: center; width: 27%; min-width: 200px; }
.stat-title { color: #5C5C5C; font-size: 14px; text-transform: uppercase; font-family: "Inter", sans-serif; font-weight: 400; order: 2; }
.stat-number-box { font-size: 30px; font-weight: 600; color: #393939; font-family: "Arial", sans-serif; order: 1; line-height: 1; }

/* Awards - Path Updated */
.awards-section { 
    background-image: url('assets/images/texture06.webp');
     background-position: center; background-repeat: repeat;
    padding: 60px 0; text-align: center; margin-top: 40px;
}
.awards-section h2 { color: #fff; font-size: 30px; margin-bottom: 40px; }
.awards-flex { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; }
.award-item { width: 40%; max-width: 200px; }
.award-item img { width: 78%; margin: 0 auto; }

/* Why Choose Us - Path Updated */
.why-us-section { background: var(--gradient-why); }
.why-us-wrapper { display: flex; margin-top: 0; }
.why-us-content { flex: 1; padding: 20px 15px 50px; }
.why-us-bg-col { 
    flex: 1; 
    background-image: url('assets/images/why-choose-us.webp');
    background-size: cover; background-position: center; min-height: 500px;
}
.section-header.text-left h2 { font-size: 30px; color: #000; text-align: left; }
.highlight-box.gold-border { border-left: 8px solid #E3A507; padding-left: 10px; margin-bottom: 30px; }
.highlight-box p { font-size: 19px; font-weight: 500; color: #000; margin: 0; }

/* Accordion */
.accordion { margin-top: 30px; }
.acc-item { margin-bottom: 10px; }
.acc-button {
    width: 100%; text-align: left; background: rgba(2,1,1,0.07); border: none; padding: 15px 20px;
    font-size: 16px; font-weight: 500; display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; transition: 0.3s; font-family: "Lato", sans-serif;
}
.acc-button:hover { background: rgba(0,0,0,0.1); }
.acc-panel { display: none; padding: 20px 30px 20px 70px; }
.acc-item.active .acc-panel { display: block; }
.acc-item.active .acc-button { box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

/* Reviews - Path Updated */
.reviews-section {
    padding: 60px 15px;
    background-image: url('assets/images/texture06.webp');
     background-position: center; background-repeat: repeat;
}
.reviews-section h2 { color: #fff; font-size: 30px; margin-bottom: 30px; }
.review-widget-container { padding: 20px; border-radius: 10px; margin-top: 30px; }

/* =========================================
   6. FOOTER
   ========================================= */
/* Path Updated */
.footer-cta {
    background-image: url("assets/images/bg-thinking-selling.webp");
    background-size: cover; background-position: center; text-align: center; position: relative;
}
.cta-content { position: relative; z-index: 1; padding: 40px 20px; background: #e2a206c7; }
.cta-content h2 { font-size: 25px; color: #000; font-weight: 600; margin-bottom: 10px; }
.cta-content p { font-weight: 700; font-size: 18px; margin-bottom: 20px; color: #000; }

.main-footer { background: #282A2C; padding: 80px 0 50px; color: #eee; margin-top: -60px; padding-top: 120px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 40px; }
.f-col { flex: 1; min-width: 250px; }
.f-col h3 { 
    font-size: 18px; color: #eee; border-bottom: 1px solid #DF9C06; border-top: 1px solid #DF9C06; 
    padding: 10px 10px 10px 0; display: inline-block; width: 50%; margin-bottom: 20px; font-weight: 700;
}
.f-col ul li { padding: 5px 0; }
.f-col ul li a { color: #eee; font-size: 16px; font-weight: 400; }
.contact-details li { display: flex; gap: 10px; font-size: 16px; align-items: center; }
.footer-logo { margin-top: 20px; width: 55%; }

.sub-footer { background: #6B6B6A; padding: 8px 15px; color: #fff; font-size: 12px; }
.sub-flex { display: flex; justify-content: space-between; align-items: center; }
.sub-socials { display: flex; gap: 15px; align-items: center; }
.sub-socials a { display: flex; gap: 3px; align-items: center; }
.sub-socials i { color: #fff; font-size: 14px; }

/* =========================================
   7. RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
    .intro-grid, .why-us-wrapper { gap: 20px; }
    .intro-content h1 { font-size: 23px; }
    .highlight { font-size: 14px; }
    p { font-size: 12px; }
    .award-item { width: 14%; }
    .intro-content, .why-us-content { padding-right: 0; }
    .intro-image img { width: 100%; }
    .why-us-bg-col { width: 100%; } 
}

@media (max-width: 767px) {
    .intro-section { padding-top: 20px; padding-bottom: 20px; }
    .intro-grid, .why-us-wrapper { flex-direction: column; }
    .award-item img { margin-bottom: 20px; }
    .stats-section h2 { font-size: 24px; }
    .stats-grid { flex-direction: row; gap: 10px; }
    .stat-item { margin-bottom: 20px; min-width: auto; }
    .stat-title { font-size: 9px; }
    .award-item { width: 45%; }
    .why-us-bg-col { order: -1; }
    .footer-cols { flex-direction: column; gap: 30px; }
    .sub-flex { flex-direction: column; gap: 10px; text-align: center; }
    .f-col h3 { width: 100%; }
    .highlight-box p { font-size: 12px; }
}