[/* Specific fix for contact form wrapper using var(--white-color) inline style */]
.header-inner > div[style*="var(--white-color)"],
.header-inner > div[style*="background: var(--white-color)"] {
    color: var(--primary-color) !important;
}
.header-inner > div[style*="var(--white-color)"] h3,
.header-inner > div[style*="var(--white-color)"] label,
.header-inner > div[style*="var(--white-color)"] p,
.header-inner > div[style*="var(--white-color)"] input,
.header-inner > div[style*="var(--white-color)"] textarea,
.header-inner > div[style*="var(--white-color)"] .btn {
    color: var(--primary-color) !important;
}

/* Ensure placeholder text in inputs is visible and blue */
.header-inner > div[style*="var(--white-color)"] input::placeholder,
.header-inner > div[style*="var(--white-color)"] textarea::placeholder {
    color: rgba(0,0,0,0.45) !important;
}

/* Contact info (left column) — ensure address/phone/email are visible on light backgrounds */
.section-padding.bg-light .header-inner > div:first-child h4,
.section-padding.bg-light .header-inner > div:first-child p,
.section-padding.bg-light .header-inner > div:first-child span,
.section-padding.bg-light .header-inner > div:first-child .text-gray-500 {
    color: var(--primary-color) !important;
}

.section-padding.bg-light .header-inner > div:first-child .fa-map-marker-alt,
.section-padding.bg-light .header-inner > div:first-child .fa-phone,
.section-padding.bg-light .header-inner > div:first-child .fa-envelope {
    color: var(--primary-color) !important;
}

/* Vibrant Theme: colorful gradients, playful shapes and dynamic accents
   Fresh redesign — keeps original markup but provides a bold, modern look.
*/
:root {
    /* base ties to existing variables but adds vibrant accents */
    --bg-1: #0f1724; /* deep navy */
    --bg-2: #071726; /* darker teal */
    --accent-1: #4176B8; /* coral */
    --accent-2: #FFB86B; /* warm gold */
    --accent-3: #6EE7B7; /* mint */
    --accent-4: #60A5FA; /* sky */
    --card-glow: rgba(255,107,107,0.12);
    --glass-surface: rgba(255,255,255,0.04);
    --bright: #ffffff;
    --muted-light: rgba(255,255,255,0.9);
}

/* Animated gradient background */
body {
    background: linear-gradient(120deg, var(--bg-1) 0%, #08303a 40%, #0b1e3a 60%);
    color: var(--muted-light);
    background-attachment: fixed;
}

/* Header: colorful underline and translucent glass */
.main-header{
    background: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav-link{ color: rgba(255,255,255,0.9); }
.nav-link::after{ background: linear-gradient(90deg,var(--accent-4), var(--accent-3)); }
.header-action .btn-primary{ background: #4176B8; color: #fff; box-shadow: 0 6px 20px var(--card-glow); }

/* Playful floating shapes in hero (pseudo elements) */
.hero-section{ position: relative; padding: 80px 0; }
.hero-section::before,
.hero-section::after{
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    transform: translateZ(0);
}
.hero-section::before{ width: 360px; height: 360px; right: -80px; top: -40px; background: radial-gradient(circle at 30% 30%, var(--accent-1), transparent 40%); }
.hero-section::after{ width: 420px; height: 420px; left: -120px; bottom: -80px; background: radial-gradient(circle at 70% 70%, var(--accent-3), transparent 40%); }

/* Split hero layout — large, colorful */
.hero-grid{ display:grid; grid-template-columns: 1fr 520px; gap:32px; align-items:center; max-width:1200px; margin: 0 auto; }
.hero-left{ padding:48px; border-radius:18px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); box-shadow: 0 12px 40px rgba(2,6,23,0.6); position:relative; overflow: visible; }
.hero-title{ font-size:3.25rem; color:var(--bright); letter-spacing: -1px; margin-bottom:8px; }
.hero-subtitle{ color: var(--accent-2); font-weight:800; letter-spacing:1px; }
.hero-text{ color: rgba(255,255,255,0.85); font-size:1.05rem; margin-bottom:18px; }
.hero-cta .btn{ border-radius: 12px; padding: 12px 22px; font-weight:700; }
.hero-cta .btn-primary{ background: linear-gradient(90deg,var(--accent-1), var(--accent-4)); color: var(--bg-1); box-shadow: 0 10px 30px rgba(96,165,250,0.12); }
.hero-cta .btn-outline{ background: transparent; color: var(--bright); border: 1px solid rgba(255,255,255,0.08); }

/* Right-side hero image with decorative diagonal mask */
.hero-right{ position: relative; border-radius:18px; overflow:hidden; height:420px; }
.hero-right img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02); transition: transform .7s cubic-bezier(.2,.9,.2,1); }
.hero-right:hover img{ transform: scale(1.08); }
.hero-right::after{ content:''; position:absolute; left:0; top:0; width:100%; height:100%; background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18)); mix-blend-mode: overlay; }

/* Feature cards — colorful gradient borders */
.feature-card{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; padding:22px; box-shadow: 0 6px 22px rgba(2,6,23,0.5); border: 1px solid rgba(255,255,255,0.04); transition: transform .28s ease, box-shadow .28s ease; }
.feature-card:hover{ transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.feature-icon{ font-size:2.2rem; background: linear-gradient(90deg,var(--accent-1),var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom:12px; }

/* Properties — gradient image borders and price ribbon */
.property-card2{ position:relative; border-radius:14px; overflow:hidden; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.04); }
.property-card-thumb{ position:relative; }
.property-card-thumb::before{ content:''; position:absolute; left:12px; top:12px; right:12px; bottom:12px; border-radius:10px; pointer-events:none; background: linear-gradient(90deg, rgba(255,107,107,0.06), rgba(96,165,250,0.04)); }
.property-card-price{ background: #4176B8; color: var(--bg-1); font-weight:900; padding:6px 10px; border-radius:10px; }
.property-card2:hover .property-card-thumb img{ transform: scale(1.06); }

/* Card text colors: headings orange, paragraphs white for contrast on blurred backgrounds */
.property-card2 .property-card-title a {
    color: var(--accent-1) !important;
    font-weight: 800;
}
.property-card2 p,
.property-card2 .text-gray-500 {
    color: #ffffff !important;
}

/* Blog cards — colorful tag */
.th-blog-wrapper .blog-single{ border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.04); }
.th-blog-wrapper h4 a{ color: var(--bright); }
.th-blog-wrapper .blog-single .badge{ background: linear-gradient(90deg,var(--accent-4), var(--accent-3)); color: var(--bg-1); padding:6px 10px; border-radius:8px; font-weight:700; }

/* Contact form — left accent bar */
.main-contact-surface{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:14px; padding:28px; border:1px solid rgba(255,255,255,0.04); box-shadow: 0 12px 40px rgba(2,6,23,0.6); }
.main-contact-surface:before{ content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background: linear-gradient(180deg,var(--accent-1), var(--accent-3)); border-top-left-radius:14px; border-bottom-left-radius:14px; }
form input, form textarea{ background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); color: var(--muted-light); padding:12px; border-radius:8px; }

/* Footer — colorful separators */
.main-footer{ background: linear-gradient(180deg,#03121a,#07121a); color: rgba(255,255,255,0.9); }
.footer-links a:hover{ color: var(--accent-2); }

/* Animations & utility tweaks */
@media (max-width: 1100px){ .hero-grid{ grid-template-columns: 1fr; } .hero-right{ height:320px; } }
@media (max-width: 576px){ .hero-title{ font-size:1.8rem; } .hero-left{ padding:20px; } }

/* Ensure readable text on any white backgrounds (including inline styles) */
[style*="background: white"],
[style*="background:white"],
[style*="background: #fff"],
[style*="background:#fff"],
.bg-white,
.white-color,
.feature-card,
.property-card,
.property-card2,
.th-blog-wrapper .blog-single,
.main-contact-surface,
.newsletter-form input {
    color: var(--primary-color) !important;
}

[style*="background: white"] a,
[style*="background:white"] a,
[style*="background: #fff"] a,
[style*="background:#fff"] a,
.bg-white a,
.white-color a,
.th-blog-wrapper .blog-single a {
    color: var(--primary-color) !important;
}

/* Buttons inside white surfaces should keep their original look; only links/text are changed */
[style*="background: white"] .btn,
[style*="background:white"] .btn,
.bg-white .btn,
.white-color .btn {
    color: inherit !important;
}

/* About section: use project blue for better readability */
.about-section h3,
.about-section .text-gray-500,
.about-section p,
.about-section span,
.about-section .property-card-location {
    color: var(--primary-color) !important;
}
.about-section .fas.fa-check-circle {
    color: var(--primary-color) !important;
}

/* Testimonial section: change white text on white background to blue */
.testi-card_text {
    color: var(--primary-color) !important;
}
.testi-card_name,
.testi-card_desig {
    color: var(--primary-color) !important;
}
.testi-card.style2 {
    color: var(--primary-color) !important;
}

