/* ========================================
   RAJESH SHARMA | VASTU ENGINEER WEBSITE
   style.css — Full version with map & i18n
   ======================================== */

:root {
   --cream: #f8f3ec;
   --cream-dark: #ede6d8;
   --brown-deep: #2c1f0e;
   --brown: #4a3520;
   --gold: #c9973a;
   --gold-light: #e8be70;
   --gold-pale: #f5e4c0;
   --green-sage: #5a7a5e;
   --text-main: #2c1f0e;
   --text-muted: #7a6850;
   --white: #ffffff;
   --wa-green: #25d366;
   --ig-pink: #e1306c;
   --fb-blue: #1877f2;
   --radius: 12px;
   --shadow: 0 8px 40px rgba(44, 31, 14, 0.10);
   --shadow-lg: 0 20px 60px rgba(44, 31, 14, 0.18);
   --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   --max-w: 1200px;
}

*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: 'DM Sans', sans-serif;
   background: var(--cream);
   color: var(--text-main);
   font-size: 16px;
   line-height: 1.7;
   overflow-x: hidden;
}

img {
   max-width: 100%;
   display: block;
}

a {
   text-decoration: none;
   color: inherit;
}

ul {
   list-style: none;
}

h1,
h2,
h3,
h4 {
   font-family: 'Cormorant Garamond', serif;
   line-height: 1.2;
   color: var(--brown-deep);
}

em {
   font-style: italic;
   color: var(--gold);
}

.section__eyebrow {
   font-size: 0.78rem;
   font-weight: 500;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 0.5rem;
   display: block;
}

.section__title {
   font-size: clamp(2rem, 4vw, 3rem);
   font-weight: 600;
   margin-bottom: 1.5rem;
}

.section {
   padding: 6rem 2rem;
   max-width: var(--max-w);
   margin: 0 auto;
}

/* ── Buttons ── */
.btn {
   display: inline-block;
   padding: 0.85rem 2rem;
   border-radius: 4px;
   font-family: 'DM Sans', sans-serif;
   font-size: 0.9rem;
   font-weight: 500;
   cursor: pointer;
   transition: var(--transition);
   border: 2px solid transparent;
   letter-spacing: 0.04em;
}

.btn--primary {
   background: var(--gold);
   color: var(--white);
   border-color: var(--gold);
}

.btn--primary:hover {
   background: var(--brown);
   border-color: var(--brown);
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(201, 151, 58, 0.3);
}

.btn--ghost {
   background: transparent;
   color: var(--white);
   border-color: rgba(255, 255, 255, 0.5);
}

.btn--ghost:hover {
   background: rgba(255, 255, 255, 0.12);
   border-color: var(--white);
}

.btn--gold {
   background: transparent;
   color: var(--gold-light);
   border-color: var(--gold-light);
}

.btn--gold:hover {
   background: var(--gold-light);
   color: var(--brown-deep);
}

.btn--full {
   width: 100%;
   text-align: center;
}

/* ================================================================
   FLOATING WHATSAPP
================================================================ */
.wa-float {
   position: fixed;
   bottom: 2rem;
   right: 2rem;
   z-index: 999;
   background: var(--wa-green);
   color: #fff;
   width: 58px;
   height: 58px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.7rem;
   box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
   transition: var(--transition);
}

.wa-float:hover {
   transform: scale(1.12);
   box-shadow: 0 10px 32px rgba(37, 211, 102, 0.55);
}

/* ================================================================
   NAV
================================================================ */
.nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 998;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.1rem 3rem;
   background: transparent;
   transition: var(--transition);
}

.nav--scrolled {
   background: var(--cream);
   box-shadow: 0 2px 24px rgba(44, 31, 14, 0.1);
}

.nav__logo {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.1rem;
   font-weight: 600;
   color: var(--white);
   transition: color var(--transition);
}

.nav--scrolled .nav__logo {
   color: var(--brown-deep);
}

.nav__symbol {
   font-size: 1.5rem;
   color: var(--gold);
}

.nav__links {
   display: flex;
   align-items: center;
   gap: 1.6rem;
}

.nav__links a {
   font-size: 0.88rem;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.85);
   transition: color var(--transition);
   letter-spacing: 0.03em;
}

.nav--scrolled .nav__links a {
   color: var(--text-muted);
}

.nav__links a:hover {
   color: var(--gold) !important;
}

.nav__cta {
   background: var(--gold) !important;
   color: var(--white) !important;
   padding: 0.45rem 1.2rem !important;
   border-radius: 4px;
}

.nav__cta:hover {
   background: var(--brown) !important;
}

/* Social icons in nav */
.nav__socials {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-left: 0.5rem;
}

.nav__social-icon {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.85rem;
   transition: var(--transition);
}

.nav__social-icon--wa {
   background: var(--wa-green);
   color: #fff;
}

.nav__social-icon--ig {
   background: var(--ig-pink);
   color: #fff;
}

.nav__social-icon--fb {
   background: var(--fb-blue);
   color: #fff;
}

.nav__social-icon:hover {
   transform: scale(1.15);
   opacity: 0.9;
}

/* Language toggle */
.nav__lang {
   display: flex;
   align-items: center;
   gap: 0.3rem;
   margin-left: 0.5rem;
}

.lang-btn {
   background: transparent;
   border: 1.5px solid rgba(255, 255, 255, 0.4);
   color: rgba(255, 255, 255, 0.7);
   padding: 0.2rem 0.55rem;
   border-radius: 4px;
   font-size: 0.75rem;
   font-weight: 600;
   cursor: pointer;
   transition: var(--transition);
   font-family: 'DM Sans', sans-serif;
   letter-spacing: 0.05em;
}

.lang-btn.active,
.lang-btn:hover {
   background: var(--gold);
   border-color: var(--gold);
   color: #fff;
}

.nav--scrolled .lang-btn {
   border-color: rgba(44, 31, 14, 0.3);
   color: var(--text-muted);
}

.nav--scrolled .lang-btn.active {
   background: var(--gold);
   border-color: var(--gold);
   color: #fff;
}

.lang-sep {
   color: rgba(255, 255, 255, 0.3);
   font-size: 0.75rem;
}

.nav--scrolled .lang-sep {
   color: var(--text-muted);
}

/* Mobile nav */
.nav__right-mobile {
   display: none;
   align-items: center;
   gap: 0.5rem;
}

.nav__hamburger {
   background: none;
   border: none;
   font-size: 1.4rem;
   color: var(--white);
   cursor: pointer;
   line-height: 1;
}

.nav--scrolled .nav__hamburger {
   color: var(--brown-deep);
}

/* ================================================================
   HERO
================================================================ */
.hero {
   min-height: 100vh;
   background: linear-gradient(135deg, var(--brown-deep) 0%, #3d2a10 50%, #5a3e1a 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 8rem 3rem 5rem;
   position: relative;
   overflow: hidden;
}

.hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 70% 50%, rgba(201, 151, 58, 0.12) 0%, transparent 65%),
      url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c9973a' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
   pointer-events: none;
}

.hero__bg-text {
   position: absolute;
   right: -2rem;
   top: 50%;
   transform: translateY(-50%);
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(10rem, 18vw, 22rem);
   font-weight: 300;
   color: rgba(201, 151, 58, 0.07);
   line-height: 1;
   pointer-events: none;
   user-select: none;
}

.hero__content {
   max-width: 650px;
   animation: heroIn 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes heroIn {
   from {
      opacity: 0;
      transform: translateY(40px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

.hero__tag {
   font-size: 0.78rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--gold-light);
   margin-bottom: 1rem;
   display: block;
   animation: heroIn 0.9s 0.1s both;
}

.hero__title {
   font-size: clamp(2.6rem, 5.5vw, 4.8rem);
   color: var(--white);
   font-weight: 300;
   margin-bottom: 1.5rem;
   animation: heroIn 0.9s 0.2s both;
}

.hero__title em {
   color: var(--gold-light);
   font-weight: 600;
}

.hero__desc {
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.72);
   max-width: 520px;
   margin-bottom: 2.5rem;
   animation: heroIn 0.9s 0.3s both;
}

.hero__actions {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
   animation: heroIn 0.9s 0.4s both;
}

.hero__actions .btn--ghost i {
   margin-right: 0.3rem;
}

.hero__social-row {
   display: flex;
   gap: 1rem;
   margin-top: 2rem;
   animation: heroIn 0.9s 0.5s both;
}

.hero__social-row a {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   transition: var(--transition);
   background: rgba(255, 255, 255, 0.1);
   color: #fff;
}

.hero__social-row a:hover {
   transform: translateY(-3px);
}

.hero__social-row a:nth-child(1):hover {
   background: var(--wa-green);
}

.hero__social-row a:nth-child(2):hover {
   background: var(--ig-pink);
}

.hero__social-row a:nth-child(3):hover {
   background: var(--fb-blue);
}

.hero__badge {
   position: absolute;
   right: 8%;
   bottom: 15%;
   animation: heroIn 0.9s 0.6s both;
}

.hero__badge-ring {
   width: 120px;
   height: 120px;
   border: 2px solid var(--gold);
   border-radius: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: var(--white);
   box-shadow: 0 0 30px rgba(201, 151, 58, 0.25);
}

.hero__badge-ring span {
   font-family: 'Cormorant Garamond', serif;
   font-size: 2rem;
   font-weight: 600;
   color: var(--gold-light);
}

.hero__badge-ring small {
   font-size: 0.72rem;
   color: rgba(255, 255, 255, 0.7);
   letter-spacing: 0.05em;
}

.hero__scroll-hint {
   position: absolute;
   bottom: 2.5rem;
   left: 50%;
   transform: translateX(-50%);
   font-size: 0.75rem;
   letter-spacing: 0.15em;
   color: rgba(255, 255, 255, 0.4);
   animation: bounce 2s infinite;
}

@keyframes bounce {

   0%,
   100% {
      transform: translateX(-50%) translateY(0)
   }

   50% {
      transform: translateX(-50%) translateY(6px)
   }
}

/* ================================================================
   STATS
================================================================ */
.stats {
   background: var(--gold);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   padding: 2.5rem 2rem;
}

.stats__item {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 1rem 3rem;
}

.stats__num {
   font-family: 'Cormorant Garamond', serif;
   font-size: 2.8rem;
   font-weight: 600;
   color: var(--white);
   line-height: 1;
}

.stats__label {
   font-size: 0.78rem;
   color: rgba(255, 255, 255, 0.85);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   margin-top: 0.25rem;
}

.stats__divider {
   width: 1px;
   height: 50px;
   background: rgba(255, 255, 255, 0.3);
}

/* ================================================================
   ABOUT
================================================================ */
.about {
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 5rem;
   align-items: center;
   padding: 7rem 3rem;
}

.about__img-col {
   position: relative;
   opacity: 0;
   transform: translateX(-30px);
   transition: opacity 0.7s, transform 0.7s;
}

.about__img-col.visible {
   opacity: 1;
   transform: translateX(0);
}

.about__img-frame {
   position: relative;
   width: 100%;
   padding-top: 120%;
}

.about__img-placeholder {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, var(--cream-dark) 0%, #d4c5a9 100%);
   border-radius: var(--radius);
   overflow: hidden;
   /* ← THIS stops the image from spilling out */
}


.about__photo {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* fills the box cleanly */
   object-position: top center;
   /* keeps face/top visible */
   display: block;
}

.about__initials {
   font-family: 'Cormorant Garamond', serif;
   font-size: 5rem;
   font-weight: 300;
   color: var(--gold);
   opacity: 0.6;
}

.about__img-deco {
   position: absolute;
   bottom: -20px;
   right: -20px;
   width: 60%;
   height: 60%;
   border: 3px solid var(--gold);
   border-radius: var(--radius);
   z-index: -1;
   opacity: 0.4;
}

.about__cert {
   position: absolute;
   bottom: -10px;
   left: -20px;
   background: var(--white);
   border-radius: var(--radius);
   padding: 1rem 1.5rem;
   box-shadow: var(--shadow);
   display: flex;
   align-items: center;
   gap: 0.75rem;
   font-size: 0.85rem;
   font-weight: 500;
}

.about__cert-icon {
   font-size: 1.5rem;
}

.about__cert small {
   display: block;
   color: var(--text-muted);
   font-weight: 300;
   margin-top: 0.1rem;
}

.about__text-col {
   opacity: 0;
   transform: translateX(30px);
   transition: opacity 0.7s 0.15s, transform 0.7s 0.15s;
}

.about__text-col.visible {
   opacity: 1;
   transform: translateX(0);
}

.about__para {
   color: var(--text-muted);
   margin-bottom: 1rem;
}

.about__para strong {
   color: var(--brown-deep);
}

.about__highlights {
   margin-top: 1.5rem;
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
}

.about__highlights li {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   font-size: 0.95rem;
   color: var(--text-muted);
}

.highlight__dot {
   width: 8px;
   height: 8px;
   background: var(--gold);
   border-radius: 50%;
   flex-shrink: 0;
}

/* ================================================================
   SERVICES
================================================================ */
.services {
   background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
   padding: 6rem 3rem;
   max-width: 100%;
}

.services__header {
   text-align: center;
   margin-bottom: 3.5rem;
   max-width: var(--max-w);
   margin-left: auto;
   margin-right: auto;
}

.services__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
   max-width: var(--max-w);
   margin: 0 auto;
}

.service-card {
   background: var(--white);
   border-radius: var(--radius);
   padding: 2rem;
   box-shadow: var(--shadow);
   border: 1px solid transparent;
   transition: var(--transition);
   position: relative;
   overflow: hidden;
   opacity: 0;
   transform: translateY(20px);
}

.service-card.visible {
   opacity: 1;
   transform: translateY(0);
}

.service-card:hover {
   border-color: var(--gold-pale);
   box-shadow: var(--shadow-lg);
   transform: translateY(-4px);
}

.service-card--featured {
   background: linear-gradient(135deg, var(--brown-deep), var(--brown));
   color: var(--white);
}

.service-card--featured h3,
.service-card--featured p {
   color: var(--white);
}

.service-card--featured p {
   color: rgba(255, 255, 255, 0.72);
}

.service-card__icon {
   font-size: 2rem;
   margin-bottom: 1rem;
}

.service-card h3 {
   font-size: 1.2rem;
   margin-bottom: 0.75rem;
}

.service-card p {
   font-size: 0.9rem;
   color: var(--text-muted);
}

.service-card__badge {
   position: absolute;
   top: 1rem;
   right: 1rem;
   background: var(--gold);
   color: var(--white);
   font-size: 0.7rem;
   font-weight: 500;
   padding: 0.2rem 0.7rem;
   border-radius: 20px;
}

/* ================================================================
   VASTU
================================================================ */
.vastu {
   background: linear-gradient(135deg, var(--brown-deep) 0%, #3a2810 100%);
   max-width: 100%;
   padding: 6rem 3rem;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6rem;
   flex-wrap: wrap;
}

.vastu__left {
   max-width: 460px;
}

.vastu__desc {
   color: rgba(255, 255, 255, 0.72);
   margin-bottom: 2.5rem;
}

.vastu__compass {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2rem;
}

.vastu__compass-bg {
   width: 240px;
   height: 240px;
   background: rgba(255, 255, 255, 0.05);
   border: 2px solid var(--gold);
   border-radius: 50%;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 60px rgba(201, 151, 58, 0.2);
}

.vastu__center {
   font-family: 'Cormorant Garamond', serif;
   font-size: 2.5rem;
   color: var(--gold-light);
}

.vastu__dir {
   position: absolute;
   font-size: 0.72rem;
   font-weight: 500;
   color: var(--gold-light);
   text-align: center;
   letter-spacing: 0.05em;
}

.vastu__dir small {
   display: block;
   color: rgba(255, 255, 255, 0.5);
   font-size: 0.65rem;
}

.vastu__dir--n {
   top: -22px;
   left: 50%;
   transform: translateX(-50%);
}

.vastu__dir--s {
   bottom: -22px;
   left: 50%;
   transform: translateX(-50%);
}

.vastu__dir--e {
   right: -34px;
   top: 50%;
   transform: translateY(-50%);
}

.vastu__dir--w {
   left: -40px;
   top: 50%;
   transform: translateY(-50%);
}

.vastu__tips {
   max-width: 320px;
}

.vastu__tips li {
   color: rgba(255, 255, 255, 0.75);
   font-size: 0.88rem;
   padding: 0.5rem 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vastu__tips li:last-child {
   border-bottom: none;
}

/* ================================================================
   PROJECTS
================================================================ */
.projects {
   text-align: center;
}

.projects__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
   margin-top: 2.5rem;
   text-align: left;
}

.project-card {
   background: var(--white);
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow);
   transition: var(--transition);
   opacity: 0;
   transform: translateY(20px);
}

.project-card.visible {
   opacity: 1;
   transform: translateY(0);
}

.project-card:hover {
   box-shadow: var(--shadow-lg);
   transform: translateY(-5px);
}

.project-card__img {
   height: 200px;
   position: relative;
}

.project-card__img--1 {
   background-image: url('house1.jpeg');
   background-size: cover;
   background-position: center;
}

.project-card__img--2 {
   background-image: url('house2.jpeg');
   background-size: cover;
   background-position: center;
}


.project-card__img--3 {
   background-image: url('house3.jpeg');
   background-size: cover;
   background-position: center;
}

.project-card__img::after {
   display: none;
   /* removes all emoji icons */
}

.project-card__img--2::after {
   content: '🏢';
}

.project-card__img--3::after {
   content: '🔍';
}

.project-card__body {
   padding: 1.5rem;
}

.project-card__tag {
   font-size: 0.7rem;
   font-weight: 500;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--gold);
   background: var(--gold-pale);
   padding: 0.2rem 0.7rem;
   border-radius: 20px;
   display: inline-block;
   margin-bottom: 0.75rem;
}

.project-card__body h4 {
   font-size: 1.1rem;
   margin-bottom: 0.5rem;
}

.project-card__body p {
   font-size: 0.88rem;
   color: var(--text-muted);
}

/* ================================================================
   TESTIMONIALS
================================================================ */
.testimonials {
   background: var(--cream-dark);
   max-width: 100%;
   padding: 6rem 3rem;
   text-align: center;
}

.testimonials__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
   max-width: var(--max-w);
   margin: 0 auto;
}

.testimonial-card {
   background: var(--white);
   border-radius: var(--radius);
   padding: 2rem;
   box-shadow: var(--shadow);
   text-align: left;
   border-top: 3px solid var(--gold);
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s, transform 0.6s;
}

.testimonial-card.visible {
   opacity: 1;
   transform: translateY(0);
}

.testimonial-card__text {
   font-size: 0.95rem;
   color: var(--text-muted);
   font-style: italic;
   margin-bottom: 1.5rem;
   line-height: 1.8;
}

.testimonial-card__text::before {
   content: '"';
   font-size: 2rem;
   color: var(--gold-pale);
   font-family: 'Cormorant Garamond', serif;
   line-height: 0.5;
   vertical-align: -0.4em;
   margin-right: 4px;
}

.testimonial-card__author {
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

.author__avatar {
   width: 40px;
   height: 40px;
   background: var(--gold);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--white);
   flex-shrink: 0;
}

.testimonial-card__author strong {
   display: block;
   font-size: 0.9rem;
}

.testimonial-card__author small {
   color: var(--text-muted);
   font-size: 0.78rem;
   display: block;
}

/* ================================================================
   CONTACT
================================================================ */
.contact {
   display: grid;
   grid-template-columns: 1fr 1.4fr;
   gap: 5rem;
   align-items: start;
   padding: 7rem 3rem;
}

.contact__left p {
   color: var(--text-muted);
   margin-bottom: 1.5rem;
}

.contact__info {
   display: flex;
   flex-direction: column;
   gap: 0.85rem;
   margin-bottom: 1.5rem;
}

.contact__info-item {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   font-size: 0.9rem;
   color: var(--text-muted);
}

.contact__info-item a {
   color: var(--gold);
   text-decoration: none;
}

.contact__info-item a:hover {
   text-decoration: underline;
}

/* Social buttons */
.contact__socials {
   display: flex;
   gap: 0.75rem;
   flex-wrap: wrap;
}

.social-btn {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.55rem 1.1rem;
   border-radius: 25px;
   font-size: 0.82rem;
   font-weight: 500;
   color: #fff;
   transition: var(--transition);
}

.social-btn i {
   font-size: 1rem;
}

.social-btn--wa {
   background: var(--wa-green);
}

.social-btn--wa:hover {
   background: #1ebe5a;
   transform: translateY(-2px);
}

.social-btn--ig {
   background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-btn--ig:hover {
   opacity: 0.88;
   transform: translateY(-2px);
}

.social-btn--fb {
   background: var(--fb-blue);
}

.social-btn--fb:hover {
   background: #1565c0;
   transform: translateY(-2px);
}

.contact__right {}

.contact__form {
   background: var(--white);
   border-radius: var(--radius);
   padding: 2.5rem;
   box-shadow: var(--shadow);
}

.form__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
}

.form__group {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   margin-bottom: 1.2rem;
}

.form__group label {
   font-size: 0.78rem;
   font-weight: 500;
   color: var(--text-muted);
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.form__group input,
.form__group select,
.form__group textarea {
   padding: 0.85rem 1rem;
   border: 1.5px solid var(--cream-dark);
   border-radius: 6px;
   font-family: 'DM Sans', sans-serif;
   font-size: 0.95rem;
   color: var(--text-main);
   background: var(--cream);
   transition: border-color var(--transition);
   outline: none;
}

.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus {
   border-color: var(--gold);
   background: var(--white);
}

.form__group textarea {
   resize: vertical;
   min-height: 100px;
}

/* ================================================================
   MAP SECTION
================================================================ */
.map-section {
   background: var(--cream-dark);
   padding: 5rem 0 0;
}

.map-header {
   text-align: center;
   padding: 0 2rem 2.5rem;
   max-width: var(--max-w);
   margin: 0 auto;
}

.map-address {
   font-size: 0.95rem;
   color: var(--text-muted);
   margin-top: -0.5rem;
}

.map-container {
   position: relative;
   width: 100%;
}

.map-container iframe {
   display: block;
   width: 100%;
   height: 420px;
   border: 0;
   filter: sepia(20%) saturate(80%);
}

.map-directions-btn {
   position: absolute;
   bottom: 1.5rem;
   right: 1.5rem;
   background: var(--gold);
   color: #fff;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.7rem 1.4rem;
   border-radius: 25px;
   font-size: 0.85rem;
   font-weight: 500;
   box-shadow: 0 4px 20px rgba(201, 151, 58, 0.4);
   transition: var(--transition);
}

.map-directions-btn:hover {
   background: var(--brown);
   transform: translateY(-2px);
}

.map-directions-btn i {
   font-size: 1rem;
}

/* ================================================================
   FOOTER
================================================================ */
.footer {
   background: var(--brown-deep);
   color: rgba(255, 255, 255, 0.7);
   padding: 4rem 3rem 2rem;
}

.footer__top {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   gap: 3rem;
   max-width: var(--max-w);
   margin: 0 auto;
   padding-bottom: 3rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__brand {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.footer__brand .nav__symbol {
   font-size: 2rem;
}

.footer__brand>span {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.3rem;
   color: var(--white);
}

.footer__brand p {
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.5);
   margin-top: 0.3rem;
   line-height: 1.6;
}

.footer__socials {
   display: flex;
   gap: 0.6rem;
   margin-top: 1rem;
}

.footer__social {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.9rem;
   transition: var(--transition);
}

.footer__social--wa {
   background: var(--wa-green);
   color: #fff;
}

.footer__social--ig {
   background: var(--ig-pink);
   color: #fff;
}

.footer__social--fb {
   background: var(--fb-blue);
   color: #fff;
}

.footer__social:hover {
   transform: scale(1.15);
   opacity: 0.9;
}

.footer__links {
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
}

.footer__links strong {
   color: var(--white);
   font-size: 0.82rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   margin-bottom: 0.4rem;
}

.footer__links a {
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.5);
   transition: color var(--transition);
}

.footer__links a:hover {
   color: var(--gold-light);
}

.footer__bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 1rem;
   max-width: var(--max-w);
   margin: 0 auto;
   padding-top: 2rem;
   font-size: 0.8rem;
   color: rgba(255, 255, 255, 0.35);
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media(max-width:1024px) {
   .services__grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .projects__grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .testimonials__grid {
      grid-template-columns: repeat(2, 1fr);
   }

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

@media(max-width:768px) {
   .nav {
      padding: 1rem 1.2rem;
   }

   .nav__links {
      display: none;
      position: fixed;
      top: 60px;
      left: 0;
      right: 0;
      background: var(--cream);
      flex-direction: column;
      padding: 1.5rem;
      gap: 1.2rem;
      box-shadow: var(--shadow-lg);
      z-index: 997;
   }

   .nav__links a {
      color: var(--text-muted) !important;
      font-size: 1rem;
   }

   .nav__socials {
      flex-direction: row;
      justify-content: center;
      margin: 0;
   }

   .nav__lang {
      justify-content: center;
      margin: 0;
   }

   .lang-btn {
      border-color: rgba(44, 31, 14, 0.3) !important;
      color: var(--text-muted) !important;
   }

   .lang-btn.active {
      background: var(--gold) !important;
      color: #fff !important;
   }

   .nav__links--open {
      display: flex;
   }

   .nav__right-mobile {
      display: flex;
   }

   .hero {
      padding: 7rem 1.5rem 4rem;
      text-align: center;
   }

   .hero__actions {
      justify-content: center;
   }

   .hero__social-row {
      justify-content: center;
   }

   .hero__badge {
      display: none;
   }

   .hero__bg-text {
      font-size: 8rem;
   }

   .stats {
      gap: 0;
   }

   .stats__item {
      padding: 1rem 1.5rem;
   }

   .stats__divider {
      display: none;
   }

   .about {
      grid-template-columns: 1fr;
      padding: 4rem 1.5rem;
      gap: 3rem;
   }

   .about__img-frame {
      padding-top: 110%;
      max-width: 100%;
   }

   .about__cert {
      left: 0;
   }

   .services {
      padding: 4rem 1.5rem;
   }

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

   .vastu {
      padding: 4rem 1.5rem;
      gap: 3rem;
      flex-direction: column;
   }

   .projects {
      padding: 4rem 1.5rem;
   }

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

   .testimonials {
      padding: 4rem 1.5rem;
   }

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

   .contact {
      grid-template-columns: 1fr;
      padding: 4rem 1.5rem;
      gap: 2.5rem;
   }

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

   .map-section {
      padding: 4rem 0 0;
   }

   .map-container iframe {
      height: 300px;
   }

   .map-directions-btn {
      bottom: 1rem;
      right: 1rem;
      font-size: 0.78rem;
      padding: 0.55rem 1rem;
   }

   .footer {
      padding: 3rem 1.5rem 2rem;
   }

   .footer__top {
      grid-template-columns: 1fr;
      gap: 2rem;
   }

   .footer__bottom {
      flex-direction: column;
      text-align: center;
   }

   .wa-float {
      bottom: 1.2rem;
      right: 1.2rem;
      width: 50px;
      height: 50px;
      font-size: 1.4rem;
   }
}

@media(max-width:480px) {
   .hero__title {
      font-size: 2.3rem;
   }

   .section__title {
      font-size: 1.8rem;
   }

   .contact__socials {
      flex-direction: column;
   }

   .social-btn {
      justify-content: center;
   }
}