/* ===========================
   MAHITHA STAR HOUSE CONSTRUCTION
   =========================== */

:root {
    --navy: #0F1A2E;
    --navy-light: #1B2D48;
    --blue: #2C456B;
    --blue-mid: #3C649F;
    --gold: #C8922A;
    --gold-light: #E5A83B;
    --white: #FFFFFF;
    --off-white: #F8F9FC;
    --gray-100: #F1F3F7;
    --gray-200: #E2E6ED;
    --gray-400: #8892A4;
    --gray-600: #5A6478;
    --gray-800: #2D3548;
    --radius: 12px;
    --radius-lg: 20px;
    --shadow: 0 4px 24px rgba(15,26,46,0.08);
    --shadow-lg: 0 12px 40px rgba(15,26,46,0.12);
    --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Inter',sans-serif; font-size:16px; line-height:1.6; color:var(--gray-800); overflow-x:hidden; background:var(--white); }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; }
ul { list-style:none; }

/* BUTTONS */
.btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 28px; border-radius:8px; font-weight:600; font-size:15px;
    border:none; cursor:pointer; transition:var(--transition); font-family:'Inter',sans-serif;
}
.btn-gold { background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--white); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(200,146,42,0.35); }
.btn-outline { background:transparent; border:2px solid var(--white); color:var(--white); }
.btn-outline:hover { background:var(--white); color:var(--navy); }
.btn-white { background:var(--white); color:var(--navy); }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.btn-outline-white { background:transparent; border:2px solid var(--white); color:var(--white); }
.btn-outline-white:hover { background:rgba(255,255,255,0.15); }
.btn-full { width:100%; justify-content:center; }

.highlight { color:var(--gold); }

.section-header { text-align:center; padding:70px 20px 40px; }
.section-header.light { background:var(--navy); }
.section-header.light .section-tag { color:var(--gold-light); }
.section-header.light h2, .section-header.light p { color:var(--white); }
.section-header h2 { font-family:'Playfair Display',serif; font-size:38px; font-weight:700; margin-bottom:12px; }
.section-header p { color:var(--gray-400); max-width:560px; margin:0 auto; font-size:16px; }
.section-tag { display:inline-block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--gold); margin-bottom:10px; }

/* ===========================
   NAVBAR
   =========================== */
.navbar {
    position:fixed; top:0; left:0; width:100%; z-index:9999;
    background:transparent; transition:var(--transition);
}
.navbar.scrolled {
    background:rgba(15,26,46,0.97); backdrop-filter:blur(10px);
    box-shadow:0 2px 20px rgba(0,0,0,0.2);
}
.nav-container {
    max-width:1240px; margin:0 auto; padding:0 24px;
    display:flex; align-items:center; justify-content:space-between; height:72px;
}
.nav-brand {
    display:flex; align-items:center; gap:10px; color:var(--white);
}
.brand-icon { font-size:26px; color:var(--gold); }
.nav-brand span { font-family:'Playfair Display',serif; font-size:17px; font-weight:700; line-height:1.2; }
.nav-brand small { font-family:'Inter',sans-serif; font-size:11px; font-weight:400; letter-spacing:0.5px; }
.nav-menu { display:flex; gap:0; }
.nav-menu .nav-link {
    color:rgba(255,255,255,0.8); font-size:14px; font-weight:500;
    padding:8px 16px; border-radius:6px; transition:var(--transition);
}
.nav-menu .nav-link:hover, .nav-menu .nav-link.active { color:var(--white); background:rgba(255,255,255,0.1); }
.nav-phone {
    display:flex; align-items:center; gap:8px;
    background:var(--gold); color:var(--white); padding:10px 20px;
    border-radius:8px; font-weight:600; font-size:14px; transition:var(--transition);
}
.nav-phone:hover { background:var(--gold-light); transform:scale(1.03); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:5px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--white); border-radius:2px; transition:var(--transition); }

/* ===========================
   HERO
   =========================== */
.hero {
    position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
}
.hero-bg { position:absolute; inset:0; }
.hero-bg video { width:100%; height:100%; object-fit:cover; }
.hero-overlay {
    position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(15,26,46,0.88) 0%, rgba(27,45,72,0.75) 50%, rgba(15,26,46,0.85) 100%);
}
.hero-content {
    position:relative; z-index:2; text-align:center; padding:120px 20px 60px; max-width:700px;
}
.hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(200,146,42,0.15); border:1px solid rgba(200,146,42,0.3);
    color:var(--gold-light); padding:8px 20px; border-radius:50px;
    font-size:13px; font-weight:600; letter-spacing:1px; margin-bottom:24px;
}
.hero-content h1 {
    font-family:'Playfair Display',serif; font-size:56px; font-weight:800;
    color:var(--white); line-height:1.15; margin-bottom:20px;
}
.hero-content h1 .highlight {
    background:linear-gradient(135deg, var(--gold-light), var(--gold));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-content p { color:rgba(255,255,255,0.75); font-size:17px; margin-bottom:32px; max-width:520px; margin-left:auto; margin-right:auto; }
.hero-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-scroll {
    position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2;
}
.hero-scroll a {
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:50%; border:2px solid rgba(255,255,255,0.3);
    color:var(--white); font-size:18px; animation:bounce 2s infinite;
}
@keyframes bounce {
    0%,100% { transform:translateY(0); }
    50% { transform:translateY(8px); }
}

/* ===========================
   STATS STRIP
   =========================== */
.stats-strip {
    background:var(--navy); padding:0 20px;
}
.stats-container {
    max-width:1100px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:30px 0;
}
.stat-item { display:flex; align-items:center; gap:14px; }
.stat-item i { font-size:28px; color:var(--gold); }
.stat-number { font-family:'Playfair Display',serif; font-size:36px; font-weight:700; color:var(--white); }
.stat-plus { font-size:24px; color:var(--gold); font-weight:700; }
.stat-label { display:block; font-size:13px; color:var(--gray-400); font-weight:500; }
.stat-divider { width:1px; height:50px; background:rgba(255,255,255,0.1); }

/* ===========================
   ABOUT - SPLIT
   =========================== */
.about { padding:80px 20px; background:var(--white); }
.about-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-images { position:relative; }
.about-img-main { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.about-img-main img { width:100%; height:400px; object-fit:cover; }
.about-img-accent {
    position:absolute; bottom:-30px; right:-30px; width:200px;
    border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);
    border:4px solid var(--white);
}
.about-img-accent img { width:100%; height:160px; object-fit:cover; }
.experience-badge {
    position:absolute; top:-20px; left:-20px;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:var(--white); padding:20px; border-radius:var(--radius);
    text-align:center; box-shadow:0 8px 24px rgba(200,146,42,0.3);
}
.exp-number { display:block; font-family:'Playfair Display',serif; font-size:36px; font-weight:800; line-height:1; }
.exp-text { font-size:12px; font-weight:600; line-height:1.3; }
.about-content .section-tag { text-align:left; }
.about-content h2 { font-family:'Playfair Display',serif; font-size:34px; font-weight:700; margin-bottom:20px; line-height:1.2; }
.about-content p { color:var(--gray-600); margin-bottom:16px; line-height:1.7; }
.about-features { margin:28px 0; display:flex; flex-direction:column; gap:18px; }
.af-item { display:flex; gap:14px; align-items:flex-start; }
.af-icon {
    width:44px; height:44px; min-width:44px; border-radius:10px;
    background:rgba(200,146,42,0.1); color:var(--gold);
    display:flex; align-items:center; justify-content:center; font-size:18px;
}
.af-item strong { display:block; font-size:15px; margin-bottom:2px; }
.af-item p { font-size:13px; color:var(--gray-400); margin:0; }

/* ===========================
   SERVICES - BENTO GRID
   =========================== */
.services { padding:0 20px 80px; background:var(--off-white); }
.bento-grid {
    max-width:1200px; margin:0 auto 40px;
    display:grid; grid-template-columns:1.5fr 1fr; grid-template-rows:280px 280px; gap:16px;
}
.bento-item {
    position:relative; border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
}
.bento-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.bento-item:hover img { transform:scale(1.08); }
.bento-overlay {
    position:absolute; inset:0; background:linear-gradient(to top,rgba(15,26,46,0.9) 0%,transparent 60%);
    display:flex; flex-direction:column; justify-content:flex-end; padding:24px;
    opacity:0; transition:opacity 0.3s;
}
.bento-item:hover .bento-overlay { opacity:1; }
.bento-overlay i { font-size:28px; color:var(--gold); margin-bottom:10px; }
.bento-overlay h3 { color:var(--white); font-size:20px; margin-bottom:6px; }
.bento-overlay p { color:rgba(255,255,255,0.7); font-size:14px; }
.bento-large { grid-row:span 2; }
.services-cta {
    max-width:800px; margin:0 auto; text-align:center;
    background:var(--white); padding:30px 40px; border-radius:var(--radius-lg); box-shadow:var(--shadow);
}
.services-cta p { color:var(--gray-600); margin-bottom:20px; font-size:15px; }

/* ===========================
   PROJECTS - GALLERY
   =========================== */
.projects { background:var(--navy); padding-bottom:60px; }
.gallery-grid {
    max-width:1200px; margin:0 auto; padding:0 20px;
    display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:200px 200px; gap:12px;
}
.gallery-item { border-radius:var(--radius); overflow:hidden; cursor:pointer; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; filter:brightness(0.85); }
.gallery-item:hover img { transform:scale(1.08); filter:brightness(1); }
.gi-1 { grid-column:span 2; }
.gi-2 { grid-row:span 2; }
.gi-6 { grid-column:span 2; }

/* ===========================
   INTERIOR
   =========================== */
.interior { padding:80px 20px; background:var(--white); }
.interior-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.interior-content .section-tag { text-align:left; }
.interior-content h2 { font-family:'Playfair Display',serif; font-size:34px; font-weight:700; margin-bottom:18px; line-height:1.2; }
.interior-content p { color:var(--gray-600); margin-bottom:28px; line-height:1.7; }
.interior-services { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:30px; }
.is-item {
    display:flex; align-items:center; gap:10px; padding:12px 16px;
    background:var(--off-white); border-radius:10px; font-size:14px; font-weight:500;
    transition:var(--transition);
}
.is-item:hover { background:rgba(200,146,42,0.1); color:var(--gold); }
.is-item i { color:var(--gold); font-size:18px; width:24px; text-align:center; }
.interior-gallery { display:flex; flex-direction:column; gap:12px; }
.ig-row { display:flex; gap:12px; }
.ig-row img { width:50%; height:180px; object-fit:cover; border-radius:var(--radius); }

/* ===========================
   PROCESS
   =========================== */
.process { padding:80px 20px; background:var(--off-white); }
.process-steps {
    max-width:1100px; margin:0 auto 40px;
    display:flex; align-items:flex-start; justify-content:center; gap:0; flex-wrap:wrap;
}
.step {
    text-align:center; flex:1; min-width:200px; max-width:220px; padding:0 15px;
}
.step-num {
    font-family:'Playfair Display',serif; font-size:48px; font-weight:800;
    color:rgba(200,146,42,0.12); line-height:1; margin-bottom:8px;
}
.step-icon {
    width:60px; height:60px; border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:var(--white); display:flex; align-items:center; justify-content:center;
    font-size:22px; margin:0 auto 14px;
}
.step h3 { font-size:17px; margin-bottom:8px; }
.step p { font-size:13px; color:var(--gray-400); line-height:1.6; }
.step-connector { color:var(--gold); font-size:20px; padding-top:80px; }

.process-cta { text-align:center; }

/* ===========================
   TESTIMONIALS
   =========================== */
.testimonials { background:var(--navy); padding-bottom:60px; }
.testimonial-grid {
    max-width:1200px; margin:0 auto; padding:0 20px;
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.testimonial-card {
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-lg); padding:30px; transition:var(--transition);
}
.testimonial-card:hover { background:rgba(255,255,255,0.08); transform:translateY(-4px); }
.tc-stars { color:var(--gold); font-size:14px; margin-bottom:14px; }
.testimonial-card > p { color:rgba(255,255,255,0.75); font-size:14px; line-height:1.7; margin-bottom:20px; font-style:italic; }
.tc-author { display:flex; align-items:center; gap:12px; }
.tc-avatar {
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:var(--white); display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:18px;
}
.tc-author strong { display:block; color:var(--white); font-size:14px; }
.tc-author span { font-size:12px; color:var(--gray-400); }

/* ===========================
   FAQ
   =========================== */
.faq { padding:0 20px 80px; background:var(--white); }
.faq-list { max-width:750px; margin:0 auto; }
.faq-item { border:1px solid var(--gray-200); border-radius:var(--radius); margin-bottom:10px; overflow:hidden; }
.faq-q {
    width:100%; padding:18px 22px; background:var(--white); border:none;
    display:flex; justify-content:space-between; align-items:center;
    cursor:pointer; font-size:15px; font-weight:600; color:var(--gray-800);
    font-family:'Inter',sans-serif; transition:var(--transition);
}
.faq-q:hover { background:var(--off-white); }
.faq-q i { color:var(--gold); transition:transform 0.3s; font-size:14px; }
.faq-q.active i { transform:rotate(45deg); }
.faq-a {
    max-height:0; overflow:hidden; transition:max-height 0.3s ease;
    background:var(--off-white);
}
.faq-a.open { max-height:200px; }
.faq-a p { padding:0 22px 18px; font-size:14px; color:var(--gray-600); line-height:1.7; }

/* ===========================
   CTA BANNER
   =========================== */
.cta-banner {
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    padding:60px 20px; text-align:center;
}
.cta-content h2 { font-family:'Playfair Display',serif; font-size:34px; color:var(--white); margin-bottom:10px; }
.cta-content p { color:rgba(255,255,255,0.85); margin-bottom:24px; font-size:16px; }
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ===========================
   CONTACT
   =========================== */
.contact { padding:0 20px 80px; background:var(--off-white); }
.contact-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.contact-info { display:flex; flex-direction:column; gap:16px; }
.ci-card { display:flex; gap:14px; align-items:flex-start; background:var(--white); padding:20px; border-radius:var(--radius); box-shadow:var(--shadow); }
.ci-icon {
    width:48px; height:48px; min-width:48px; border-radius:12px;
    background:rgba(200,146,42,0.1); color:var(--gold);
    display:flex; align-items:center; justify-content:center; font-size:20px;
}
.ci-card strong { display:block; font-size:15px; margin-bottom:4px; }
.ci-card p { font-size:13px; color:var(--gray-600); line-height:1.5; margin:0; }
.ci-card p a { color:var(--blue-mid); font-weight:500; }
.ci-card p a:hover { color:var(--gold); }
.contact-map { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); height:250px; }
.contact-map iframe { width:100%; height:100%; border:none; }
.contact-form-wrapper {
    background:var(--white); border-radius:var(--radius-lg); padding:36px;
    box-shadow:var(--shadow-lg);
}
.contact-form-wrapper h3 { font-family:'Playfair Display',serif; font-size:24px; margin-bottom:24px; }
.contact-form-wrapper input,
.contact-form-wrapper select,
.contact-form-wrapper textarea {
    width:100%; padding:13px 16px; margin-bottom:14px;
    border:1px solid var(--gray-200); border-radius:8px;
    font-size:14px; font-family:'Inter',sans-serif; transition:var(--transition);
    background:var(--off-white);
}
.contact-form-wrapper input:focus,
.contact-form-wrapper select:focus,
.contact-form-wrapper textarea:focus { outline:none; border-color:var(--gold); background:var(--white); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ===========================
   FOOTER
   =========================== */
.footer { background:var(--navy); padding:60px 20px 0; color:var(--white); }
.footer-container { max-width:1200px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-brand { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-brand i { font-size:28px; color:var(--gold); }
.footer-brand span { font-family:'Playfair Display',serif; font-size:18px; font-weight:700; line-height:1.2; }
.footer-about p { font-size:14px; color:var(--gray-400); line-height:1.7; margin-bottom:20px; }
.footer-social { display:flex; gap:10px; }
.footer-social a {
    width:40px; height:40px; border-radius:10px;
    background:rgba(255,255,255,0.06); color:var(--white);
    display:flex; align-items:center; justify-content:center; font-size:16px;
    transition:var(--transition);
}
.footer-social a:hover { background:var(--gold); transform:translateY(-2px); }
.footer-links-col h4, .footer-contact-col h4 {
    font-size:16px; font-weight:700; margin-bottom:18px; position:relative; padding-bottom:10px;
}
.footer-links-col h4::after, .footer-contact-col h4::after {
    content:''; position:absolute; bottom:0; left:0; width:30px; height:2px; background:var(--gold);
}
.footer-links-col ul li { margin-bottom:10px; }
.footer-links-col ul li a { font-size:14px; color:var(--gray-400); transition:var(--transition); }
.footer-links-col ul li a:hover { color:var(--gold); padding-left:5px; }
.footer-contact-col ul li {
    display:flex; gap:10px; font-size:14px; color:var(--gray-400); margin-bottom:12px; line-height:1.5;
}
.footer-contact-col ul li i { color:var(--gold); margin-top:3px; min-width:16px; }
.footer-contact-col ul li a { color:var(--gray-400); transition:var(--transition); }
.footer-contact-col ul li a:hover { color:var(--gold); }
.footer-bottom { text-align:center; padding:20px 0; font-size:13px; color:var(--gray-400); }

/* ===========================
   WHATSAPP FLOAT
   =========================== */
.whatsapp-float {
    position:fixed; bottom:24px; right:24px; z-index:999;
    width:56px; height:56px; border-radius:50%;
    background:#25D366; color:var(--white);
    display:flex; align-items:center; justify-content:center; font-size:28px;
    box-shadow:0 4px 20px rgba(37,211,102,0.4);
    transition:var(--transition);
}
.whatsapp-float:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,0.5); }

/* ===========================
   SCROLL TOP
   =========================== */
.scroll-top {
    position:fixed; bottom:24px; right:90px; z-index:999;
    width:44px; height:44px; border-radius:50%;
    background:var(--navy); color:var(--white); border:none;
    display:flex; align-items:center; justify-content:center; font-size:16px;
    cursor:pointer; opacity:0; visibility:hidden; transition:var(--transition);
}
.scroll-top.visible { opacity:1; visibility:visible; }
.scroll-top:hover { background:var(--gold); transform:translateY(-2px); }

/* ===========================
   RESPONSIVE
   =========================== */
@media(max-width:1024px) {
    .about-grid { grid-template-columns:1fr; gap:40px; }
    .about-img-accent { right:10px; bottom:-20px; width:150px; }
    .bento-grid { grid-template-columns:1fr 1fr; }
    .bento-large { grid-row:span 1; }
    .gallery-grid { grid-template-columns:repeat(2,1fr); grid-template-rows:auto; }
    .gi-1, .gi-6 { grid-column:span 1; }
    .gi-2 { grid-row:span 1; }
    .interior-grid { grid-template-columns:1fr; }
    .testimonial-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .process-steps { flex-direction:column; align-items:center; }
    .step-connector { transform:rotate(90deg); padding:10px 0; }
}

@media(max-width:768px) {
    .nav-menu { display:none; }
    .nav-phone { display:none; }
    .nav-toggle { display:flex; }
    .nav-menu.open {
        display:flex; flex-direction:column; position:absolute; top:72px; left:0; right:0;
        background:var(--navy); padding:20px; gap:4px;
    }
    .hero-content h1 { font-size:36px; }
    .stats-container { flex-wrap:wrap; gap:20px; justify-content:center; }
    .stat-divider { display:none; }
    .bento-grid { grid-template-columns:1fr; }
    .bento-grid .bento-item { min-height:250px; }
    .bento-overlay { opacity:1; }
    .gallery-grid { grid-template-columns:1fr 1fr; }
    .interior-services { grid-template-columns:1fr; }
    .ig-row img { height:140px; }
    .form-row { grid-template-columns:1fr; }
    .contact-grid { grid-template-columns:1fr; }
    .section-header h2 { font-size:28px; }
    .footer-grid { grid-template-columns:1fr; gap:30px; }
}

@media(max-width:480px) {
    .hero-content h1 { font-size:28px; }
    .hero-btns { flex-direction:column; align-items:center; }
    .bento-grid { grid-template-columns:1fr; }
    .gallery-grid { grid-template-columns:1fr; }
    .ig-row { flex-direction:column; }
    .ig-row img { width:100%; height:200px; }
    .cta-content h2 { font-size:26px; }
}