/* Layout css start */

:root {

    --gold: #D4AF37;

    --dark-gold: #B8860B;

    --black: #000000;

    --light-black: #1a1a1a;

    --white: #ffffff;

}



* {

    margin: 0; padding: 0; box-sizing: border-box;

    font-family: 'Playfair Display', serif, Arial;

}



body { background-color: var(--white); overflow-x: hidden; }



/* --- Luxury Black Header --- */

.head-bar {

    display: flex; justify-content: space-between; align-items: center;

    background: var(--black); padding: 5px 50px; position: fixed;

    top: 0; width: 100%; z-index: 1000; border-bottom: 2px solid var(--gold);

}

.logo img { height: 50px;}



.nav-links { display: flex; list-style: none; gap: 25px; }

.nav-links li a { 

    text-decoration: none; color: var(--white); font-size: 17px; 

    /*text-transform: uppercase;*/ font-weight: 600; letter-spacing: 1px; transition: 0.3s;

}

.nav-links li a:hover { color: var(--gold); }



.header-contact { 

    border: 1px solid var(--gold); color: var(--gold); 

    padding: 8px 18px; font-weight: bold; font-size: 14px; 

    transition: 0.4s; cursor: pointer;

}

.header-contact:hover { background: var(--gold); color: var(--black); }



/* Hamburger Menu Icon (Desktop par hide) */

.menu-toggle {

    display: none;

    color: var(--gold);

    font-size: 24px;

    cursor: pointer;

}



/* --- Hero Banner --- */

.banner {

    position: relative;

    width: 100%;

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding: 0 8%;

    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('images/gallery/rivana/g1.jpg');

    background-repeat: no-repeat;

    background-position: center center;

    background-size: 100% 100%;

    overflow: hidden;

    margin-top: 60px;

}



.info-card {

    background: rgba(0, 0, 0, 0.85); width: 400px; padding: 20px;

    border-left: 2px solid var(--gold); color: var(--white);

    box-shadow: 0 15px 35px rgba(0,0,0,0.5);

    z-index: 5;

}

.info-card h2 { font-size: 32px; margin-bottom: 30px; color: var(--gold); }

.price-box { 

    border: 1px solid var(--gold); padding: 15px; text-align: center; 

    font-weight: bold; font-size: 25px; margin: 25px 0; color: var(--gold);

}

.features-list { list-style: none; margin-bottom: 30px; color: #ccc; font-size: 14px; }

.features-list li { margin-bottom: 12px; }

.features-list li::before { content: '◈'; color: var(--gold); margin-right: 10px; }



.btn-enquire { 

    width: 100%; background: var(--gold); color: var(--black); 

    padding: 16px; border: none; font-weight: bold; 

    text-transform: uppercase; cursor: pointer; transition: 0.3s;

}



/* --- Desktop Contact Form --- */

.form-dock {

    width: 330px; position: fixed; right: 50px; bottom: 0;

    background: var(--light-black); box-shadow: 0 -5px 25px rgba(0,0,0,0.5);

    border-radius: 10px 10px 0 0; z-index: 2000;

    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    border: 1px solid var(--gold); border-bottom: none;

}

.form-head {

    background: var(--gold); padding: 15px 20px; color: var(--black);

    font-weight: bold; display: flex; justify-content: space-between; 

    cursor: pointer; text-transform: uppercase; font-size: 14px;

}

.form-body { padding: 25px; overflow: hidden; max-height: 500px; transition: 0.5s; }

.form-dock.minimized .form-body { max-height: 0; padding: 0; opacity: 0; }

.form-body input {

    width: 100%; border: none; border-bottom: 1px solid #444;

    background: transparent; color: var(--white);

    margin-bottom: 25px; padding: 10px 0; outline: none;

}



/* --- Mobile Action Bar --- */

.mobile-footer {

    display: none;

    position: fixed; bottom: 0; width: 100%;

    background: var(--black); border-top: 2px solid var(--gold);

    z-index: 9999; grid-template-columns: repeat(3, 1fr);

}

.mobile-footer a {

    text-align: center; padding: 12px 0; color: var(--gold);

    text-decoration: none; font-size: 12px; font-weight: bold;

    border-right: 1px solid #333;

}

.mobile-footer a i { display: block; font-size: 20px; margin-bottom: 5px; }

.mobile-footer a:last-child { border-right: none; }



/* --- Mobile Responsiveness (Stacked Layout & Menu) --- */

@media (max-width: 768px) {

    .head-bar { padding: 4px 10px; position: fixed; }

    .logo img { height: 50px; }

    

    /* Show Hamburger & Hide Desktop Menu/Form */

    .menu-toggle { display: block; }

    .header-contact, .form-dock { display: none !important; }



    .nav-links {

        display: none;

        flex-direction: column;

        position: absolute;

        top: 55px; left: 0; width: 100%;

        background: var(--black);

        padding: 20px; gap: 15px;

        border-bottom: 2px solid var(--gold);

        text-align: center;

        z-index: 1001;

    }

    .nav-links.active { display: flex; }



    /* Banner 50% Image & Stacked Text */

    .banner { 

        flex-direction: column;

        padding: 0;

        min-height: auto;

        background-size: 100% 50vh;

        background-position: top center;

        align-items: flex-start;

    }

    .info-card { 

        width: 100%; 

        margin-top: 38vh; /* Image ke baad start hoga */

        padding: 30px 20px; 

        border-left: none; 

        border-top: 5px solid var(--gold);

        background: var(--black);

    }

    .info-card h2 { font-size: 30px; }

    .mobile-footer { display: grid; } 

    body { padding-bottom: 60px; }

}



footer {

    background: var(--black); color: #888; padding: 40px 8%;

    text-align: center; border-top: 1px solid #333;

}

.spacer { height: 400px; padding: 50px 8%; background: #fdfdfd; }





.features-list {

list-style: none;

padding: 0;

}



.features-list li {

display: flex;

align-items: flex-start;

}



.features-list li::before {

content: "•";

margin-right: 8px;

}

/* Layout css end */











/* Overview css strat */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Poppins:wght@300;400;600&display=swap');

    

/* Main Section Wrapper */

.sobha-wrapper {

    position: relative;

    padding: 20px 10px;

    background-color: #ffffff;

    overflow: hidden;

    font-family: 'Poppins', sans-serif;

}



/* Real Estate Building Background Effect (Subtle Watermark) */

.sobha-wrapper::before {

    content: "";

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop');

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    opacity: 0.08; /* Subtle architecture ghost effect */

    z-index: 1;

}



.main-content {

    position: relative;

    z-index: 2;

    max-width: 1600px;

    margin: 0 auto;

}



/* Extra Dark 3D Gold Heading */

.gold-3d-title {

    text-align: center;

    font-family: 'Montserrat', sans-serif;

    font-size: 1.9rem;

    font-weight: 900;

    margin-bottom: 5px;

    text-transform: uppercase;

    /* Deeper Gold Gradient */

    background: linear-gradient(to bottom, #7d5e27 0%, #d4af37 40%, #8a6d3b 60%, #1a1409 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    /* Stronger 3D Depth */

    filter: drop-shadow(0px 3px 0px #4d3a1a) 

            drop-shadow(0px 6px 0px #2b1d0a) 

            drop-shadow(0px 15px 15px rgba(0,0,0,0.4));

    letter-spacing: 4px;

}



.gold-underline {

    width: 150px;

    height: 4px;

    background: linear-gradient(90deg, transparent, #d4af37, transparent);

    margin: 0 auto 50px;

}



/* Flex Layout: Equal Height on Desktop */

.flex-row {

    display: flex;

    align-items: stretch;

    background: #ffffff;

    box-shadow: 0 30px 60px rgba(0,0,0,0.1);

    border-radius: 4px;

    overflow: hidden;

    border-top: 4px solid #8a6d3b;

}



/* Text Area */

.text-column {

    flex: 1.2;

    padding: 60px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.text-column p {

    font-size: 1.15rem;

    line-height: 1.6;

    color: #333;

    margin-bottom: 20px;

    text-align: justify;

}



/* Image Area: Auto-Height Desktop, Fixed-Height Mobile */

.image-column {

    flex: 1;

    position: relative;

    min-height: 100%;

}



.image-column img {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    object-fit: cover;

    display: block;

}



.accent-text {

    color: #8a6d3b;

    font-weight: 700;

}



/* Mobile View Fixes */

@media (max-width: 992px) {

    .flex-row { 

        flex-direction: column; 

    }

    .gold-3d-title { 

        font-size: 1.9rem; 

        letter-spacing: 2px;

    }

    .image-column { 

        height: 350px; /* Mobile par image ki height fix kar di hai */

        width: 100%;

    }

    .image-column img {

        position: relative; /* Mobile par positioning fix */

    }

    .text-column { 

        padding: 10px; 

    }

    .sobha-wrapper {

        padding: 40px 15px;

    }

}

/* Overview css end */













/* highlights css start */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Poppins:wght@300;400;600&display=swap');



.highlights-wrapper {

position: relative;

padding: 20px 10px;

background-color: #ffffff;

font-family: 'Poppins', sans-serif;

overflow: hidden;

}



/* Real Estate Background Watermark */

.highlights-wrapper::before {

content: "";

position: absolute;

top: 0; left: 0; width: 100%; height: 100%;

background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop');

background-size: cover;

background-position: center;

opacity: 0.06;

z-index: 1;

}



.container {

position: relative;

z-index: 2;

max-width: 1200px;

margin: 0 auto;

}



/* 3D Dark Gold Heading */

.gold-title {

text-align: center;

font-family: 'Montserrat', sans-serif;

font-size: 1.9rem;

font-weight: 900;

margin-bottom: 50px;

text-transform: uppercase;

background: linear-gradient(to bottom, #7d5e27 0%, #d4af37 40%, #8a6d3b 60%, #1a1409 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

filter: drop-shadow(0px 3px 0px #4d3a1a) drop-shadow(0px 10px 15px rgba(0,0,0,0.2));

letter-spacing: 3px;

}





/* Highlights Grid */

.highlights-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 25px;

}



/* Highlight Box Style */

.highlight-box {

background: #ffffff;

padding: 30px;

border-radius: 10px;

display: flex;

align-items: center;

gap: 20px;

box-shadow: 0 10px 30px rgba(0,0,0,0.05);

border-left: 5px solid #8a6d3b;

transition: all 0.3s ease;

border-top: 1px solid #f1f1f1;

}



.highlight-box:hover {

transform: translateY(-5px);

box-shadow: 0 15px 40px rgba(186, 141, 43, 0.15);

background: #fffdf9;

}



/* Icon Style */

.icon-circle {

width: 60px;

height: 60px;

background: linear-gradient(135deg, #d4af37, #8a6d3b);

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

color: white;

font-size: 1.5rem;

flex-shrink: 0;

box-shadow: 0 5px 15px rgba(138, 109, 59, 0.3);

}



.highlight-text {

font-size: 1.05rem;

font-weight: 500;

color: #333;

line-height: 1.5;

}



.highlight-text b {

color: #8a6d3b;

font-size: 1.2rem;

display: block;

}



/* Mobile Responsive */

@media (max-width: 768px) {

.gold-title { font-size: 2.5rem; }

.highlight-box { padding: 20px; }

.highlights-wrapper { padding: 20px 15px; }

}

/* highlights css end */









/* projetcs section css */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Poppins:wght@300;400;600&display=swap');



.projects-wrapper {

position: relative;

padding: 20px 20px;

background-color: #ffffff;

font-family: 'Poppins', sans-serif;

overflow: hidden;

}



/* Subtle Real Estate Background */

.projects-wrapper::before {

content: "";

position: absolute;

top: 0; left: 0; width: 100%; height: 100%;

background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop');

background-size: cover;

opacity: 0.05;

z-index: 1;

}



.gold-title {

text-align: center;

font-family: 'Montserrat', sans-serif;



font-weight: 900;

margin-bottom: 5px;

text-transform: uppercase;

background: linear-gradient(to bottom, #7d5e27 0%, #d4af37 40%, #8a6d3b 60%, #1a1409 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

filter: drop-shadow(0px 3px 0px #4d3a1a) drop-shadow(0px 8px 12px rgba(0,0,0,0.15));

letter-spacing: 2px;

}



.gold-underline {

width: 100px;

height: 3px;

background: linear-gradient(90deg, transparent, #d4af37, transparent);

margin: 0 auto 40px;

}



.projects-grid {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 25px;

}



/* Compact Project Card (Reduced by ~40%) */

.project-card {

background: #ffffff;

flex: 0 1 430px;

border-radius: 10px;

overflow: hidden;

box-shadow: 0 10px 30px rgba(0,0,0,0.07);

border: 1px solid #f1f1f1;

transition: all 0.3s ease;

display: flex;

flex-direction: column;

}



.project-card:hover {

transform: translateY(-8px);

box-shadow: 0 15px 35px rgba(138, 109, 59, 0.12);

}



.card-image {

width: 100%;

height: 180px;

overflow: hidden;

position: relative;

}



.card-image img {

width: 100%;

height: 100%;

object-fit: cover;

}



.status-badge {

position: absolute;

top: 15px;

right: 15px;

background: #d4af37;

color: #1a1a1a;

padding: 4px 10px;

font-size: 0.65rem;

font-weight: 700;

border-radius: 3px;

text-transform: uppercase;

}



.card-body {

padding: 20px;

flex: 1;

}



.card-body h3 {

margin: 0 0 15px 0;

font-size: 1.25rem;

font-weight: 700;

color: #1a1a1a;

border-bottom: 2px solid #8a6d3b;

padding-bottom: 8px;

}



.detail-item {

display: flex;

margin-bottom: 10px;

font-size: 0.9rem;

}



.detail-item i {

color: #8a6d3b;

width: 20px;

margin-top: 4px;

}



.detail-label {

font-weight: 600;

color: #666;

width: 100px;

flex-shrink: 0;

}



.detail-value {

color: #333;

flex: 1;

}



.rera-section {

background: #fdfaf0;

padding: 8px;

border-radius: 4px;

margin-top: 15px;

font-size: 0.85rem;

font-weight: 600;

color: #8a6d3b;

border: 1px dashed #d4af37;

text-align: center;

}



.details-btn {

background: linear-gradient(135deg, #d4af37, #8a6d3b);

color: white;

padding: 10px;

text-align: center;

border-radius: 5px;

font-weight: 700;

text-transform: uppercase;

text-decoration: none;

margin-top: 15px;

font-size: 0.85rem;

display: block;

transition: 0.3s;

}



.details-btn:hover {

opacity: 0.9;

letter-spacing: 1px;

}



@media (max-width: 480px) {

.project-card { flex: 0 1 100%; }

.gold-title { font-size: 1.8rem; }

}

/* projetcs section css */











/* Why Choose SOBHA */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Poppins:wght@300;400;600&display=swap');



.why-choose-wrapper {

position: relative;

padding: 20px 10px;

background-color: #ffffff;

font-family: 'Poppins', sans-serif;

overflow: hidden;

}



/* Real Estate Background Watermark */

.why-choose-wrapper::before {

content: "";

position: absolute;

top: 0; left: 0; width: 100%; height: 100%;

background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop');

background-size: cover;

background-position: center;

opacity: 0.07;

z-index: 1;

}



/* Deeper 3D Gold Heading */

.gold-title-3d {

    text-align: center;

    font-family: 'Montserrat', sans-serif;

    

    font-weight: 900;

    margin-bottom: 5px;

    text-transform: uppercase;

    background: linear-gradient(to bottom, #7d5e27 0%, #d4af37 40%, #8a6d3b 60%, #1a1409 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    filter: drop-shadow(0px 3px 0px #4d3a1a) drop-shadow(0px 8px 12px rgba(0,0,0,0.15));

    letter-spacing: 2px;

    }



.gold-line {

width: 100px;

height: 4px;

background: #d4af37;

margin: 0 auto 50px;

border-radius: 2px;

}



/* Two-Column Balanced Layout */

.flex-container {

display: flex;

align-items: stretch;

background: #ffffff;

box-shadow: 0 20px 50px rgba(0,0,0,0.08);

border-radius: 12px;

overflow: hidden;

border-top: 5px solid #8a6d3b;

}



/* Text Section */

.text-box {

flex: 1.2;

padding: 50px;

display: flex;

flex-direction: column;

justify-content: center;

}



.text-box ul {

list-style: none;

padding: 0;

margin: 0;

}



.text-box li {

position: relative;

padding-left: 30px;

margin-bottom: 25px;

font-size: 1.05rem;

line-height: 1.7;

color: #333;

text-align: justify;

}



/* Gold Bullet Point */

.text-box li::before {

content: "\f058";

font-family: "Font Awesome 6 Free";

font-weight: 900;

position: absolute;

left: 0;

top: 3px;

color: #d4af37;

font-size: 1.2rem;

}



.highlight-gold {

color: #8a6d3b;

font-weight: 600;

}



/* Image Section */

.image-box {

flex: 1;

position: relative;

min-height: 100%;

}



.image-box img {

position: absolute;

top: 0; left: 0; width: 100%; height: 100%;

object-fit: cover;

display: block;

}



/* Mobile Optimization */

@media (max-width: 992px) {

.flex-container { flex-direction: column; }

.image-box { height: 350px; width: 100%; }

.image-box img { position: relative; }

.gold-title-3d { font-size: 2.2rem; }

.text-box { padding: 10px; }

}

/* Why Choose SOBHA */









/* Project Selection Approach */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Poppins:wght@300;400;600&display=swap');



.selection-wrapper {

position: relative;

padding: 20px 10px;

background-color: #ffffff;

font-family: 'Poppins', sans-serif;

overflow: hidden;

}



/* Real Estate Background Watermark */

.selection-wrapper::before {

content: "";

position: absolute;

top: 0; left: 0; width: 100%; height: 100%;

background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop');

background-size: cover;

background-position: center;

opacity: 0.07;

z-index: 1;

}



/* Deeper 3D Gold Heading */

.gold-title-3d {

    text-align: center;

    font-family: 'Montserrat', sans-serif;

    

    font-weight: 900;

    margin-bottom: 5px;

    text-transform: uppercase;

    background: linear-gradient(to bottom, #7d5e27 0%, #d4af37 40%, #8a6d3b 60%, #1a1409 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    filter: drop-shadow(0px 3px 0px #4d3a1a) drop-shadow(0px 8px 12px rgba(0,0,0,0.15));

    letter-spacing: 2px;

    }



.gold-line {

width: 100px;

height: 4px;

background: #d4af37;

margin: 0 auto 50px;

border-radius: 2px;

}



/* Single Premium Box */

.single-selection-box {

background: #ffffff;

padding: 60px;

border-radius: 15px;

box-shadow: 0 20px 60px rgba(0,0,0,0.08);

border-top: 6px solid #8a6d3b;

position: relative;

overflow: hidden;

}



/* Decorative icon background */

.single-selection-box::after {

content: "\f5a0";

font-family: "Font Awesome 6 Free";

font-weight: 900;

position: absolute;

right: -20px;

bottom: -20px;

font-size: 15rem;

color: rgba(212, 175, 55, 0.05);

z-index: 0;

}



.selection-content {

position: relative;

z-index: 1;

}



.selection-content p {

font-size: 1.15rem;

line-height: 1.4;

color: #333;

margin-bottom: 25px;

text-align: justify;

}



.highlight-gold {

color: #8a6d3b;

font-weight: 700;

border-bottom: 2px solid #d4af37;

}



/* Feature Row */

.feature-row {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 20px;

margin-top: 40px;

border-top: 1px solid #f0f0f0;

padding-top: 30px;

}



.feature-item {

display: flex;

align-items: center;

gap: 15px;

font-weight: 600;

color: #555;

}



.feature-item i {

color: #d4af37;

font-size: 1.2rem;

}



/* Mobile Optimization */

@media (max-width: 768px) {

.gold-title-3d { font-size: 2.2rem; }

.single-selection-box { padding: 10px; }

.selection-content p { font-size: 1.01rem; }

}

/* Project Selection Approach */











/* FAQs Section Css */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Poppins:wght@300;400;600&display=swap');



.faq-wrapper {

position: relative;

padding: 20px 10px;

/* Deep Blue Background Gradient */

background: linear-gradient(135deg, #001f3f 0%, #003366 100%);

font-family: 'Poppins', sans-serif;

overflow: hidden;

}



/* Real Estate Building Effect in Blue */

.faq-wrapper::before {

content: "";

position: absolute;

top: 0; left: 0; width: 100%; height: 100%;

background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop');

background-size: cover;

background-position: center;

/* Blue Overlay Effect */

opacity: 0.15;

mix-blend-mode: luminosity;

z-index: 1;

}



.container-faq {

position: relative;

z-index: 2;

max-width: 700px;

margin: 0 auto;

}



/* 3D Dark Gold Heading */

.gold-title-3d {

text-align: center;

font-family: 'Montserrat', sans-serif;



font-weight: 900;

margin-bottom: 5px;

text-transform: uppercase;

background: linear-gradient(to bottom, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

filter: drop-shadow(0px 3px 0px #4d3a1a) drop-shadow(0px 10px 15px rgba(0,0,0,0.5));

letter-spacing: 3px;

}



.gold-line {

width: 100px;

height: 4px;

background: #d4af37;

margin: 0 auto 50px;

}



/* FAQ Accordion Style */

.faq-item {

background: rgba(255, 255, 255, 0.05);

border: 1px solid rgba(212, 175, 55, 0.3);

margin-bottom: 15px;

border-radius: 8px;

overflow: hidden;

transition: all 0.3s ease;

}



.faq-item:hover {

background: rgba(255, 255, 255, 0.1);

border-color: #d4af37;

}



/* Question Style */

.faq-question {

padding: 10px 25px;

cursor: pointer;

display: flex;

justify-content: space-between;

align-items: center;

color: #fcf6ba;

font-weight: 600;

font-size: 1.1rem;

line-height: 1.6rem;

}



.faq-question i {

transition: transform 0.3s ease;

color: #d4af37;

}



/* Answer Style */

.faq-answer {

max-height: 0;

overflow: hidden;

transition: max-height 0.4s ease;

background: rgba(0, 0, 0, 0.2);

}



.faq-answer p {

padding: 20px 25px;

margin: 0;

color: #e0e0e0;

line-height: 1.8;

border-top: 1px solid rgba(212, 175, 55, 0.1);

}



/* Active State (JavaScript handle karega) */

.faq-item.active .faq-answer {

max-height: 300px;

}



.faq-item.active .faq-question i {

transform: rotate(180deg);

}



@media (max-width: 768px) {

.gold-title-3d { font-size: 1.1rem; }

.faq-question { font-size: 1rem; }

}

/* FAQs Section Css */











/*left side popup Css start*/

/* --- Desktop Styles (Default) --- */

    .colorful-sidebar {

      position: fixed;

      left: 1px;

      top: 81%;

      transform: translateY(-50%);

      z-index: 9999;

      display: flex;

      flex-direction: column;

      gap: 15px;

    }



    .n-item {

      text-decoration: none;

      cursor: pointer;

      display: flex;

      align-items: center;

    }



    .icon-circle {

      width: 42px;

      height: 42px;

      border-radius: 50%;

      display: flex;

      justify-content: center;

      align-items: center;

      color: #fff;

      font-size: 24px;

      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

      transition: all 0.3s ease;

      animation: float 3s ease-in-out infinite;

    }



    /* Colors */

    .wa .icon-circle {

      background: linear-gradient(45deg, #25D366, #128C7E);

    }



    .cl .icon-circle {

      background: linear-gradient(45deg, #00C6FF, #0072FF);

    }



    .ct .icon-circle {

      background: linear-gradient(45deg, #d4af37, #d4af37);

    }



    .n-tooltip {

      position: absolute;

      left: 65px;

      background: rgba(0, 0, 0, 0.8);

      color: #fff;

      padding: 5px 12px;

      border-radius: 6px;

      font-family: 'Poppins', sans-serif;

      font-size: 12px;

      opacity: 0;

      white-space: nowrap;

      pointer-events: none;

      transition: 0.3s;

    }



    .n-item:hover .n-tooltip {

      opacity: 1;

      transform: translateX(5px);

    }



    /* --- Mobile View Optimization --- */

    @media (max-width: 768px) {

      .colorful-sidebar {

        left: 10px;

        gap: 10px;

      }



      .icon-circle {

        width: 42px;

        height: 42px;

        font-size: 18px;

      }



      .n-tooltip {

        display: none;

      }

    }



    @keyframes float {



      0%,

      100% {

        transform: translateY(0);

      }



      50% {

        transform: translateY(-5px);

      }

    }



    /* --- Modified Form Styles with #c6a46e Gold Theme --- */

    .form-overlay {

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background: rgba(0, 0, 0, 0.75);

      backdrop-filter: blur(5px);

      display: flex;

      justify-content: center;

      align-items: center;

      z-index: 10000;

      opacity: 0;

      visibility: hidden;

      transition: 0.3s;

    }



    .form-overlay.active {

      opacity: 1;

      visibility: visible;

    }



    .form-container {

      background: #fff;

      width: 85%;

      max-width: 350px;

      padding: 25px;

      border-radius: 20px;

      position: relative;

      font-family: 'Poppins', sans-serif;

      box-shadow: 0 20px 40px rgba(198, 164, 110, 0.15);

      border: 1px solid rgba(198, 164, 110, 0.1);

    }



    .close-btn {

      position: absolute;

      top: 10px;

      right: 15px;

      font-size: 25px;

      border: none;

      background: none;

      cursor: pointer;

      color: #c6a46e;

      font-weight: 600;

      transition: 0.3s;

    }



    .close-btn:hover {

      color: #d4b885;

      transform: scale(1.1);

    }



    .form-container h3 {

      color: #333;

      margin-bottom: 20px;

      text-align: center;

      font-weight: 600;

      color: #c6a46e;

    }



    .form-control {

      width: 100%;

      padding: 12px 15px;

      margin-bottom: 15px;

      border: 2px solid #e8e8e8;

      border-radius: 10px;

      font-family: 'Poppins', sans-serif;

      font-size: 14px;

      box-sizing: border-box;

      transition: all 0.3s ease;

      background: #faf9f7;

    }



    .form-control:focus {

      outline: none;

      border-color: #c6a46e;

      box-shadow: 0 0 0 3px rgba(198, 164, 110, 0.1);

      background: #fff;

    }



    /* Gold Gradient Button */

    .gold-gradient {

      width: 100%;

      padding: 14px;

      background: linear-gradient(135deg, #c6a46e 0%, #d4b885 50%, #c6a46e 100%);

      color: #fff;

      border: none;

      border-radius: 10px;

      font-family: 'Poppins', sans-serif;

      font-size: 16px;

      font-weight: 600;

      cursor: pointer;

      text-transform: uppercase;

      letter-spacing: 0.5px;

      box-shadow: 0 8px 25px rgba(198, 164, 110, 0.3);

      transition: all 0.3s ease;

      position: relative;

      overflow: hidden;

    }



    .gold-gradient:hover {

      transform: translateY(-2px);

      box-shadow: 0 12px 35px rgba(198, 164, 110, 0.4);

      background: linear-gradient(135deg, #d4b885 0%, #c6a46e 50%, #b89a5e 100%);

    }



    .gold-gradient:active {

      transform: translateY(0);

      box-shadow: 0 5px 15px rgba(198, 164, 110, 0.3);

    }



    /* Mobile Form Adjustments */

    @media (max-width: 480px) {

      .form-container {

        width: 90%;

        padding: 20px;

      }



      .form-control {

        padding: 12px;

        font-size: 16px;

      }



      .gold-gradient {

        padding: 16px;

        font-size: 16px;

      }

    }

/*left side popup Css end*/













/* sobha-popup form css start */

.sobha-popup-overlay {

    position: fixed;

    top: 0; left: 0;

    width: 100%; height: 100%;

    background: rgba(0, 0, 0, 0.8); /* Dark Overlay */

    backdrop-filter: blur(8px); /* Premium Blur Effect */

    display: none; /* Default Hidden */

    justify-content: center;

    align-items: center;

    z-index: 10000;

    padding: 20px; /* Padding for mobile edges */

}



/* Central Popup Card */

.sobha-popup-card {

    background: #ffffff;

    width: 100%;

    max-width: 420px; /* Desktop width */

    border-radius: 15px;

    position: relative;

    box-shadow: 0 20px 60px rgba(0,0,0,0.5);

    animation: popupFadeIn 0.4s ease-out;

    border-top: 6px solid #8a6d3b;

}



/* Fade In Animation */

@keyframes popupFadeIn {

    from { opacity: 0; transform: scale(0.8); }

    to { opacity: 1; transform: scale(1); }

}



.sobha-close-btn {

    position: absolute;

    top: 10px; right: 15px;

    background: none; border: none;

    font-size: 30px; color: #333;

    cursor: pointer; z-index: 1;

}



.sobha-popup-body { padding: 20px 30px; text-align: center; }



.sobha-form-header h3 {

    font-family: 'Montserrat', sans-serif;

    font-size: 1.6rem; color: #1a1a1a;

    text-transform: uppercase; margin-bottom: 5px;

}



.sobha-form-header p { font-size: 0.9rem; color: #666; margin-bottom: 20px; }



.gold-line-center {

    width: 50px; height: 3px;

    background: #d4af37; margin: 0 auto 25px;

}



/* Input Fields */

.sobha-input-field {

    position: relative; margin-bottom: 8px;

}



.sobha-input-field i {

    position: absolute; left: 15px; top: 15px;

    color: #8a6d3b;

}



.sobha-input-field input {

    width: 100%; padding: 12px 15px 12px 45px;

    border: 1px solid #ddd; border-radius: 6px;

    font-family: 'Poppins', sans-serif;

    outline: none; box-sizing: border-box;

}



.sobha-input-field input:focus { border-color: #d4af37; }



/* 3D Gold Button */

.sobha-submit-btn {

    width: 100%; padding: 14px;

    background: linear-gradient(135deg, #d4af37, #8a6d3b);

    color: white; border: none; border-radius: 6px;

    font-weight: 700; text-transform: uppercase;

    cursor: pointer; margin-top: 10px;

    box-shadow: 0 5px 15px rgba(138, 109, 59, 0.3);

}



.sobha-privacy-text { font-size: 0.75rem; color: #999; margin-top: 15px; }



/* Mobile Responsive Adjustments */

@media (max-width: 480px) {

    .sobha-popup-card { max-width: 100%; }

    .sobha-popup-body { padding: 30px 20px; }

    .sobha-form-header h3 { font-size: 1.3rem; }

}

/*sobha-popup form css end*/















/*Gallery Section Start Css*/

.gallery-wrapper {

    padding: 20px 20px;

    background: #fff;

    position: relative;

}



.gallery-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr); /* 4 images in one line */

    gap: 15px;

}



.gallery-item {

    position: relative;

    height: 200px;

    overflow: hidden;

    border-radius: 8px;

    cursor: pointer;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

}



.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.gallery-item:hover img {

    transform: scale(1.1);

}



.overlay-icon {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    background: rgba(138, 109, 59, 0.6); /* Gold transparent overlay */

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    transition: 0.3s;

}



.gallery-item:hover .overlay-icon {

    opacity: 1;

}



.overlay-icon i {

    color: white;

    font-size: 2rem;

}



/* Lightbox Styles */

.lightbox-modal {

    display: none;

    position: fixed;

    z-index: 10001;

    top: 0; left: 0;

    width: 100%; height: 100%;

    background: rgba(0,0,0,0.9);

    justify-content: center;

    align-items: center;

}



.lightbox-content {

    max-width: 80%;

    max-height: 80%;

    border-radius: 5px;

    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);

    animation: zoomIn 0.3s ease;

}



@keyframes zoomIn {

    from { transform: scale(0.7); opacity: 0; }

    to { transform: scale(1); opacity: 1; }

}



.close-lightbox {

    position: absolute;

    top: 30px; right: 40px;

    color: #fff;

    font-size: 50px;

    cursor: pointer;

}



/* Mobile Adjustments */

@media (max-width: 992px) {

    .gallery-grid { grid-template-columns: repeat(2, 1fr); } /* 2 images on tablet */

}



@media (max-width: 480px) {

    .gallery-grid { grid-template-columns: 1fr; } /* 1 image on mobile */

    .gallery-item { height: 250px; }

}

/*Gallery Section End Css*/













/*Price & Configuration Start*/



/* --- Desktop Table Styling --- */

.pricing-section { padding: 20px 0; background: #fff; }

.pricing-table-wrapper { width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-radius: 10px; overflow: hidden; }

.responsive-table { width: 100%; border-collapse: collapse; background: #fff; font-family: 'Poppins', sans-serif; }



.responsive-table thead tr { background-color: #1a1a1a; color: #d4af37; text-align: left; }

.responsive-table th, .responsive-table td { padding: 18px 25px; }

.responsive-table th { text-transform: uppercase; font-size: 0.9rem; border-bottom: 3px solid #8a6d3b; }

.responsive-table td { border-bottom: 1px solid #f1f1f1; color: #333; }

.responsive-table tr:hover { background-color: #fdfaf2; }



/* Table Button */

.table-btn {

    background: linear-gradient(135deg, #d4af37, #8a6d3b);

    color: #fff; border: none; padding: 10px 20px; border-radius: 4px;

    font-weight: 700; text-transform: uppercase; cursor: pointer; transition: 0.3s;

    width: 50%; /* For Mobile button width */

}

.table-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(138, 109, 59, 0.3); }

.price-footer-text { text-align: center; margin-top: 15px; font-size: 0.8rem; color: #888; font-style: italic; }



/* --- MOBILE RESPONSIVE (CRITICAL FIX) --- */

@media screen and (max-width: 768px) {

    /* Table headers ko hide karein */

    .responsive-table thead { display: none !important; }



    /* Rows ko Card banayein */

    .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { 

        display: block !important; 

        width: 100% !important; 

        padding:5px;

    }



    .responsive-table tr { 

        margin-bottom: 20px !important; 

        border: 1px solid #8a6d3b !important; 

        border-radius: 12px !important;

        padding: 10px !important;

        box-shadow: 0 5px 15px rgba(0,0,0,0.05);

    }



    .responsive-table td { 

        text-align: right !important; 

        padding: 12px 15px !important; 

        position: relative !important;

        border-bottom: 1px solid #f5f5f5 !important;

        display: flex !important;

        justify-content: space-between !important;

        align-items: center !important;

    }



    .responsive-table td:last-child { border-bottom: none !important; padding-top: 20px !important; }



    /* Data labels ko left side par dikhayen */

    .responsive-table td::before {

        content: attr(data-label);

        font-weight: 700;

        color: #8a6d3b;

        text-transform: uppercase;

        font-size: 0.8rem;

        text-align: left;

    }



    /* Button full width mobile par */

    .table-btn { padding: 15px !important; font-size: 1rem !important; }

}



/*Price & Configuration End*/













/*Amenities Section Css Start*/

.amenities-wrapper {

        position: relative;

        padding: 20px 0;

        background-color: #fcfcfc;

        overflow: hidden;

    }



    /* --- Building Effect (Background Watermark) --- */

    .amenities-wrapper::before {

        content: "";

        position: absolute;

        top: 0; left: 0; width: 100%; height: 100%;

        /* Modern Building Image */

        background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070');

        background-size: cover;

        background-position: center;

        /* Blue tint and low opacity for watermark look */

        opacity: 0.08; 

        filter: grayscale(100%) sepia(100%) hue-rotate(190deg) saturate(200%);

        z-index: 1;

        pointer-events: none;

    }



    .amenities-header {

        position: relative;

        z-index: 2;

        text-align: center;

        margin-bottom: 30px;

    }



    .amenities-grid {

        position: relative;

        z-index: 2;

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 30px;

    }



    /* Individual Card Style */

    .amenity-card {

        background: rgba(255, 255, 255, 0.9); /* Slight transparency for effect */

        padding: 10px 30px;

        text-align: center;

        border-radius: 12px;

        border: 1px solid #d4af37;

        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smooth motion */

        cursor: pointer;

        box-shadow: 0 10px 30px rgba(0,0,0,0.03);

        margin-left: 8px;

        margin-right: 8px;

    }



    .amenity-icon {

        font-size: 2.8rem;

        color: #8a6d3b;

        margin-bottom: 20px;

        transition: 0.3s;

    }



    .amenity-card h3 {

        font-family: 'Montserrat', sans-serif;

        font-size: 1.25rem;

        color: #1a1a1a;

        margin-bottom: 12px;

        text-transform: uppercase;

        letter-spacing: 1px;

    }



    .amenity-card p {

        font-size: 0.9rem;

        color: #666;

        line-height: 1.6;

    }



    /* --- HOVER EFFECTS --- */

    .amenity-card:hover {

        transform: translateY(-15px) scale(1.02); /* Motion up + slight zoom */

        background: #001f3f; /* Dark Navy Blue */

        border-color: #d4af37;

        box-shadow: 0 25px 50px rgba(138, 109, 59, 0.25); /* Goldish Shadow */

    }



    .amenity-card:hover .amenity-icon, 

    .amenity-card:hover h3 {

        color: #d4af37; /* Metallic Gold */

    }



    .amenity-card:hover p {

        color: #f0f0f0;

    }



    /* --- MOBILE RESPONSIVE --- */

    @media (max-width: 992px) {

        .amenities-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    }



    @media (max-width: 600px) {

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

        /*.gold-title-3d { font-size: 2.2rem; }*/

        .amenity-card { padding: 35px 20px; }

    }

/*Amenities Section Css End*/













/*Location Advantages Style*/



.connectivity-wrapper {

    padding: 20px 0;

    background: #f8f9fa;

}



.connectivity-flex-container {

    display: flex;

    gap: 30px;

    align-items: flex-start;

    flex-wrap: wrap;

}



.location-list {

    flex: 1;

    min-width: 320px;

    display: flex;

    flex-direction: column;

    gap: 15px;

}



/* Individual Card */

.location-item {

    background: #d4af37;

    padding: 5px 10px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    gap: 20px;

    cursor: pointer;

    transition: all 0.4s ease-in-out;

    border: 1px solid transparent;

    margin-left: 8px;

    margin-right: 8px;

}



/* Icon Circle */

.loc-icon {

    width: 55px;

    height: 55px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: rgb(29 35 32);

    color: #fff;

    font-size: 1.4rem;

    flex-shrink: 0;

}



.loc-details h3 {

    margin: 0;

    color: #fff;

    font-size: 1.1rem;

    font-family: 'Poppins', sans-serif;

    font-weight: 600;

}



.time-green {

    margin: 3px 0 0;

    color: #fff;

    font-size: 0.9rem;

    font-weight: 500;

}



/* Hover Effects */

.location-item:hover {

    background: #14213d;

    transform: translateX(10px);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(46, 204, 113, 0.2);

    border-color: #2ecc71;

}



.location-item:hover .loc-icon {

    background: #2ecc71;

    color: #fff;

    transform: rotate(360deg);

    transition: 0.5s;

}



/* Right Side Map */

.map-box-wrapper {

    flex: 1.2;

    min-width: 320px;

    height: 500px;

    border: 8px solid #fff;

    border-radius: 20px;

    box-shadow: 0 15px 45px rgba(0,0,0,0.1);

}



/* Mobile Responsive */

@media (max-width: 768px) {

    .map-box-wrapper { 

        height: 350px; 

        /* order removed so map comes AFTER text */

    }



    .location-item:hover { 

        transform: translateY(-5px); 

    }

}





/*Location Advantages Style*/