/* =========================================================
   SATHGURU SILK CENTER - HYDERABAD
   CLEAN MASTER CSS
   FINAL STABLE VERSION
========================================================= */


/* =========================================================
   1. DESIGN TOKENS
========================================================= */

:root {
  --primary: #7b1e2b;
  --primary-dark: #4b0f19;
  --primary-light: #a84a58;

  --gold: #c99a3b;
  --gold-light: #f2c968;

  --cream: #f8f3eb;
  --cream-dark: #eee3d4;

  --white: #ffffff;

  --dark: #2d2622;
  --text: #5f554e;
  --muted: #8b7f76;

  --border: #e7ddd2;

  --container: 1180px;

  --space-section: 64px;
  --space-section-mobile: 46px;

  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;

  --shadow-sm: 0 8px 22px rgba(45, 25, 20, 0.07);
  --shadow-md: 0 14px 38px rgba(45, 25, 20, 0.12);
  --shadow-lg: 0 24px 65px rgba(45, 25, 20, 0.18);
}


/* =========================================================
   2. RESET
========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "DM Sans", Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  overflow-x: hidden;
}

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

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

button {
  font: inherit;
  cursor: pointer;
}

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.section {
  margin: 0;
  padding: var(--space-section) 0;
}


/* Prevent random default margins */

.section > .container > :first-child {
  margin-top: 0;
}

.section > .container > :last-child {
  margin-bottom: 0;
}


/* =========================================================
   3. GENERAL HEADINGS
========================================================= */

.section h2,
.section-content h2,
.contact-content h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  color: var(--dark);
}

.section-heading {
  max-width: 760px;
  margin: 0 auto 40px;
}

.section-heading.centered {
  text-align: center;
}

.section-heading h2,
.section-content h2 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.16;
}

.section-heading h2 span,
.section-content h2 span {
  color: var(--primary);
}

.section-tag {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
}


/* =========================================================
   4. TOP BAR
========================================================= */

.top-bar {
  background: var(--primary-dark);
  color: #fff;
  font-size: 13px;
}

.top-bar-inner {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* =========================
   TOP ACTION ICONS
========================= */

.top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.top-social {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.top-social svg {
  width: 20px;
  height: 20px;
  fill: #ffffff !important;
  color: #ffffff !important;
  display: block;
}

/* SOCIAL COLORS */
.top-social.facebook {
  background: #1877f2;
}

.top-social.instagram {
  background: linear-gradient(
    135deg,
    #833ab4,
    #fd1d1d,
    #fcb045
  );
}

.top-social.youtube {
  background: #ff0000;
}

/* CALL ICON */
.top-social.call {
  background: #ffffff;
}

.top-social.call svg {
  fill: var(--primary-dark) !important;
}

/* WHATSAPP ICON */
.top-social.whatsapp {
  background: #25d366;
}

/* HOVER */
.top-social:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
}

/* CLICK ANIMATION */
.top-social:active {
  animation: topIconClick 0.35s ease;
}

@keyframes topIconClick {

  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(0.8);
  }

  70% {
    transform: scale(1.18);
  }

  100% {
    transform: scale(1);
  }

}

/* DIVIDER */
.top-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.45);
  margin: 0 4px;
}


/* MOBILE */
@media (max-width: 768px) {

  .top-info {
    display: none;
  }

  .top-bar-inner {
    justify-content: center;
    min-height: 48px;
  }

  .top-actions {
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

  .top-social {
    width: 34px;
    height: 34px;
  }

  .top-social svg {
    width: 18px;
    height: 18px;
  }

  .top-divider {
    height: 24px;
    margin: 0 1px;
  }

}


/* =========================================================
   5. HEADER
========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(231, 221, 210, 0.9);
}

.nav-container {
  min-height: 78px;

  display: flex;
  align-items: center;

  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;

  gap: 12px;

  flex-shrink: 0;
}


/* =========================================================
   HEADER LOGO
   Clean zoom + ring glow
========================================================= */

.brand-logo {
  width: 68px;
  height: 68px;

  flex: 0 0 68px;

  display: block;

  object-fit: contain;
  object-position: center;

  background: #fff;

  border: 2px solid rgba(201, 154, 59, 0.82);

  border-radius: 50%;

  padding: 2px;

  box-shadow:
    0 0 0 4px rgba(123, 30, 43, 0.06),
    0 0 18px rgba(201, 154, 59, 0.25);

  animation: logoPulse 4s ease-in-out infinite;
}


/* Logo animation */

@keyframes logoPulse {

  0%,
  100% {
    transform: scale(1) rotate(0deg);

    box-shadow:
      0 0 0 4px rgba(123, 30, 43, 0.06),
      0 0 18px rgba(201, 154, 59, 0.24);
  }

  45% {
    transform: scale(1.035) rotate(0deg);

    box-shadow:
      0 0 0 6px rgba(201, 154, 59, 0.14),
      0 0 25px rgba(201, 154, 59, 0.38);
  }

  75% {
    transform: scale(1.02) rotate(360deg);

    box-shadow:
      0 0 0 5px rgba(201, 154, 59, 0.12),
      0 0 22px rgba(123, 30, 43, 0.24);
  }

  88% {
    transform: scale(1.055) rotate(360deg);

    box-shadow:
      0 0 0 7px rgba(242, 201, 104, 0.22),
      0 0 30px rgba(201, 154, 59, 0.45);
  }

  92% {
    transform: scale(1.025) rotate(360deg);

    box-shadow:
      0 0 0 5px rgba(201, 154, 59, 0.10),
      0 0 20px rgba(201, 154, 59, 0.25);
  }
}


/* Header text */

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-text strong {
  color: #6f1824;
  font-size: 20px;
  font-weight: 800;
}

.brand-text span {
  color: #9b5b62;
  font-size: 13px;
  letter-spacing: 0.5px;
}


/* Navigation */

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 22px;

  margin-left: auto;
}

.desktop-nav a {
  position: relative;

  color: var(--dark);

  font-size: 13px;
  font-weight: 700;

  white-space: nowrap;
}

.desktop-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  right: 100%;

  bottom: -7px;

  height: 2px;

  background: var(--primary);

  transition: right 0.22s ease;
}

.desktop-nav a:hover::after {
  right: 0;
}


/* WhatsApp */

.nav-whatsapp {
  flex-shrink: 0;

  padding: 11px 18px;

  border-radius: 999px;

  background: var(--primary);
  color: #fff;

  font-size: 13px;
  font-weight: 700;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.nav-whatsapp:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}


/* Mobile menu */

.mobile-menu-btn {
  display: none;

  margin-left: auto;

  border: 0;

  background: transparent;

  color: var(--primary);

  font-size: 28px;
}

.mobile-menu {
  display: none;

  border-top: 1px solid var(--border);

  background: #fff;

  padding: 8px 24px 16px;
}

.mobile-menu.show {
  display: flex;
  flex-direction: column;
}

.mobile-menu a {
  padding: 13px 0;

  border-bottom: 1px solid #f0ebe5;

  color: var(--dark);

  font-weight: 700;
}


/* =========================================================
   6. HERO
========================================================= */

.hero {
  position: relative;

  overflow: hidden;

  margin: 0;

  padding: 40px 0 36px;

  background:
    radial-gradient(
      circle at 92% 24%,
      rgba(201, 154, 59, 0.16),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #faf7f1 0%,
      #f7f1e8 52%,
      #fbfaf7 100%
    );
}

.hero-pattern {
  position: absolute;

  inset: 0 auto 0 0;

  width: min(36vw, 480px);

  opacity: 0.14;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 18% 20%,
      transparent 0 48px,
      rgba(123, 30, 43, 0.22) 49px 50px,
      transparent 51px
    ),
    radial-gradient(
      circle at 25% 28%,
      rgba(201, 154, 59, 0.18) 0 3px,
      transparent 4px
    );

  background-size:
    110px 110px,
    34px 34px;
}

.hero-grid {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(380px, 0.92fr);

  align-items: center;

  gap: clamp(32px, 5vw, 58px);

  min-height: 590px;
}

.hero-content {
  min-width: 0;

  position: relative;

  z-index: 2;
}

.hero-badge {
  width: fit-content;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;

  margin-bottom: 20px;

  padding: 9px 15px;

  border: 1px solid rgba(123, 30, 43, 0.12);

  border-radius: 999px;

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

  color: var(--primary);

  font-size: 12px;
  font-weight: 700;
}

.badge-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #2d9b68;
}

.hero-badge-telugu,
.telugu-text,
.hero-feature small,
.button-content small,
.slider-bottom-overlay p {
  font-family:
    "Noto Sans Telugu",
    "Nirmala UI",
    sans-serif;
}

.hero h1 {
  max-width: 720px;

  margin: 0 0 20px;

  color: var(--dark);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: clamp(52px, 5.2vw, 78px);

  line-height: 1.02;

  letter-spacing: -2px;
}

.hero h1 span {
  display: block;

  color: var(--primary);
}

/* MOBILE H1 CENTER ALIGN */
@media (max-width: 768px) {

  .hero h1 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

}

.hero-description {
  max-width: 650px;

  margin: 0;

  color: var(--text);

  font-size: 16px;

  line-height: 1.75;
}

.telugu-text {
  display: block;

  margin-top: 12px;

  color: var(--primary);

  font-size: 15px;

  font-weight: 600;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;

  gap: 14px;

  margin: 30px 0 34px;
}

.btn {
  min-height: 52px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  padding: 12px 20px;

  border-radius: 14px;

  border: 1px solid transparent;

  font-weight: 800;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);

  box-shadow: var(--shadow-md);
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.8);

  color: var(--primary);

  border-color: rgba(123, 30, 43, 0.28);
}

.button-content {
  display: flex;

  flex-direction: column;
  
    justify-content: center;

  align-items: flex-start;

  line-height: 1.15;
}

.button-content small,
.btn-telugu {
  display: block;

  margin-top: 3px;

  font-size: 10px;

  font-weight: 500;

  opacity: 0.92;
}

.hero-features {
  display: grid;

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

  gap: 16px 20px;
}

.hero-feature {
  display: flex;

  align-items: flex-start;

  gap: 10px;
}

.feature-icon {
  width: 26px;
  height: 26px;

  flex: 0 0 26px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--primary);

  color: #fff;

  font-size: 13px;

  font-weight: 800;
}

.hero-feature strong {
  display: block;

  color: var(--dark);

  font-size: 13px;
}

.hero-feature small {
  display: block;

  margin-top: 2px;

  color: var(--muted);

  font-size: 10px;
}


/* =========================================================
   7. HERO SLIDER
   NO RED FRAME
========================================================= */

.hero-visual {
  min-width: 0;
  min-height: 0;

  position: relative;

  z-index: 2;
}

.hero-glow {
  position: absolute;

  width: 220px;
  height: 220px;

  border-radius: 50%;

  filter: blur(60px);

  opacity: 0.42;

  pointer-events: none;
}

.glow-one {
  top: -35px;
  right: -30px;

  background: var(--gold);
}

.glow-two {
  bottom: -35px;
  left: -30px;

  background: var(--primary-light);
}

.saree-slider {
  position: relative;

  z-index: 1;

  width: 100%;

  min-height: 0;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  /* IMPORTANT: NO RED BORDER */
  border: 0;

  outline: 0;

  border-radius: 30px;

  background: var(--primary-dark);

  box-shadow: var(--shadow-lg);
}

.slider-track,
.slider-slide {
  position: absolute;

  inset: 0;
}

.slider-slide {
  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

.slider-slide.active {
  opacity: 1;

  visibility: visible;
}

.slider-slide img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.slider-bottom-overlay {
  position: absolute;

  z-index: 4;

  left: 0;
  right: 0;
  bottom: 0;

  padding: 70px 26px 20px;

  color: #fff;

  background:
    linear-gradient(
      to top,
      rgba(38, 10, 17, 0.96) 8%,
      rgba(38, 10, 17, 0.45) 58%,
      transparent 100%
    );
}

.slider-location {
  display: block;

  margin-bottom: 4px;

  color: var(--gold-light);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.7px;
}

.slider-bottom-overlay h3 {
  margin: 0;

  color: #fff;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: clamp(24px, 2.5vw, 34px);

  line-height: 1.1;
}

.slider-bottom-overlay p {
  margin: 7px 0 12px;

  color: var(--gold-light);

  font-size: 13px;

  font-weight: 600;
}

.slider-dots {
  display: flex;

  align-items: center;

  gap: 7px;
}

.slider-dot {
  width: 8px;
  height: 8px;

  padding: 0;

  border: 0;

  border-radius: 50%;

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

  transition:
    width 0.25s ease,
    background 0.25s ease;
}

.slider-dot.active {
  width: 24px;

  border-radius: 999px;

  background: var(--gold-light);
}

.slider-arrow {
  position: absolute;

  top: 50%;

  z-index: 5;

  width: 46px;
  height: 46px;

  display: grid;

  place-items: center;

  border: 0;

  border-radius: 50%;

  background: rgba(75, 15, 25, 0.82);

  color: #fff;

  font-size: 24px;

  transform: translateY(-50%);

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.slider-arrow:hover {
  background: var(--primary);
}

.slider-prev {
  left: 14px;
}

.slider-next {
  right: 14px;
}

/* =========================================================
   PREMIUM FLOATING CALL + WHATSAPP
   BALL COLLISION + SPARK + CALL NOW EFFECT
========================================================= */


/* =========================================================
   MAIN CONTAINER
========================================================= */

.floating-actions {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;

  overflow: visible;
}


/* =========================================================
   COMMON BUTTON STYLE
========================================================= */

.floating-call,
.floating-whatsapp {
  position: relative;

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

  text-decoration: none;

  -webkit-tap-highlight-color: transparent;

  box-shadow:
    0 12px 30px rgba(45, 25, 20, .18);
}


/* =========================================================
   CALL BUTTON - BALL
========================================================= */

.floating-call {
  width: 58px;
  height: 58px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--primary-light),
      var(--primary)
    );

  color: #fff;

  font-size: 23px;

  border: 2px solid rgba(255,255,255,.75);

  z-index: 5;

  overflow: visible;

  transform-origin: center;

  animation:
    callBallCollision 7s cubic-bezier(.22,.8,.3,1) infinite;

  transition:
    box-shadow .3s ease;
}


/* GOLD OUTER RING */

.floating-call::before {
  content: "";

  position: absolute;

  inset: -6px;

  border-radius: 50%;

  border: 1px solid rgba(201,154,59,.60);

  pointer-events: none;

  animation:
    callRingPulse 7s ease-out infinite;
}


/* BALL SHINE */

.floating-call::after {
  content: "";

  position: absolute;

  width: 12px;
  height: 12px;

  top: 8px;
  left: 10px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.58);

  filter: blur(2px);

  pointer-events: none;
}


/* CALL HOVER */

.floating-call:hover {
  box-shadow:
    0 18px 42px rgba(123,30,43,.38);
}


/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.floating-whatsapp {
  min-width: 58px;
  height: 48px;

  padding: 0 22px 0 18px;

  gap: 10px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #32d979,
      #1fb85f
    );

  color: #fff;

  font-size: 19px;
  font-weight: 800;

  letter-spacing: .2px;

  overflow: visible;

  z-index: 3;

  transform-origin: center;

  animation:
    whatsappImpact 7s ease-in-out infinite;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


/* KEEP WHATSAPP ICON ABOVE EFFECT */

.floating-whatsapp i,
.floating-whatsapp svg,
.floating-whatsapp .fa-whatsapp {
  position: relative;

  z-index: 4;

  display: inline-flex;

  align-items: center;
  justify-content: center;
}


/* WHATSAPP TEXT */

.floating-whatsapp span {
  position: relative;

  z-index: 4;

  font-size: 14px;

  white-space: nowrap;
}



/* WHATSAPP HOVER */

.floating-whatsapp:hover {
  transform:
    translateY(-5px)
    translateX(-4px);

  box-shadow:
    0 18px 40px rgba(37,211,102,.32);
}


/* =========================================================
   IMPACT SPARK BURST
   APPEARS ONLY WHEN BALL HITS WHATSAPP
========================================================= */

.floating-actions::before {
  content: "";

  position: absolute;

  right: 24px;
  bottom: 59px;

  width: 14px;
  height: 14px;

  border-radius: 50%;

  pointer-events: none;

  z-index: 20;

  opacity: 0;

  background:
    #fff3b0;

  box-shadow:
    0 0 0 0 rgba(255,255,255,0),

    28px -18px 0 -3px #ffd76a,
    -28px -15px 0 -3px #ffffff,

    38px 4px 0 -4px #ffd76a,
    -38px 7px 0 -4px #ffffff,

    18px 28px 0 -3px #ffffff,
    -18px 28px 0 -3px #ffd76a,

    48px -30px 0 -5px #fff1a0,
    -48px -28px 0 -5px #ffffff;

  animation:
    impactSparkBurst 7s ease-out infinite;
}


/* =========================================================
   CALL NOW POPUP
========================================================= */

.floating-actions::after {
  content: "📞 CALL NOW";

  position: absolute;

  right: 72px;
  bottom: 52px;

  z-index: 30;

  white-space: nowrap;

  pointer-events: none;

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

  padding: 13px 22px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fff8e8
    );

  border:
    1px solid rgba(201,154,59,.65);

  color:
    var(--primary);

  font-size: 16px;
  font-weight: 900;

  letter-spacing: 1px;

  line-height: 1;

  box-shadow:
    0 10px 35px rgba(123,30,43,.18),
    0 0 22px rgba(255,215,106,.38);

  opacity: 0;

  transform:
    scale(.01)
    translateX(40px);

  transform-origin:
    right center;

  animation:
    callNowExplosion 7s cubic-bezier(.16,.84,.28,1) infinite;
}


/* =========================================================
   CALL BALL MOVEMENT
========================================================= */

@keyframes callBallCollision {

  0%,
  58% {
    transform:
      translateY(0)
      scale(1);
  }

  63% {
    transform:
      translateY(16px)
      scale(.94);
  }

  /* IMPACT */

  65% {
    transform:
      translateY(25px)
      scale(1.16);
  }

  68% {
    transform:
      translateY(13px)
      scale(.97);
  }

  72% {
    transform:
      translateY(18px)
      scale(1.04);
  }

  76%,
  100% {
    transform:
      translateY(0)
      scale(1);
  }

}


/* =========================================================
   WHATSAPP IMPACT
========================================================= */

@keyframes whatsappImpact {

  0%,
  63% {
    transform:
      scale(1);
  }

  65% {
    transform:
      scale(.92);
  }

  68% {
    transform:
      scale(1.08);
  }

  72% {
    transform:
      scale(.98);
  }

  76%,
  100% {
    transform:
      scale(1);
  }

}


/* =========================================================
   SPARK BURST
   ONLY AT IMPACT
========================================================= */

@keyframes impactSparkBurst {

  0%,
  63% {
    opacity: 0;

    transform:
      scale(.05);
  }

  /* BALL HITS */

  65% {
    opacity: 1;

    transform:
      scale(.15);
  }

  /* EXPLOSION */

  68% {
    opacity: 1;

    transform:
      scale(1.45);
  }

  73% {
    opacity: .9;

    transform:
      scale(1.7);
  }

  78%,
  100% {
    opacity: 0;

    transform:
      scale(2);
  }

}


/* =========================================================
   CALL NOW
   ZERO -> BIG ZOOM -> HOLD -> SMOOTH EXIT
========================================================= */

@keyframes callNowExplosion {

  0%,
  64% {
    opacity: 0;

    transform:
      scale(.01)
      translateX(45px);
  }

  /* START EXACTLY AT IMPACT */

  65% {
    opacity: 1;

    transform:
      scale(.05)
      translateX(35px);
  }

  /* FAST ZOOM */

  69% {
    opacity: 1;

    transform:
      scale(1.45)
      translateX(0);
  }

  /* SETTLE */

  73% {
    opacity: 1;

    transform:
      scale(1)
      translateX(0);
  }

  /* STAY VISIBLE */

  87% {
    opacity: 1;

    transform:
      scale(1)
      translateX(0);
  }

  /* SMOOTH EXIT */

  94%,
  100% {
    opacity: 0;

    transform:
      scale(.88)
      translateX(-10px);
  }

}


/* =========================================================
   CALL RING
========================================================= */

@keyframes callRingPulse {

  0%,
  58% {
    transform:
      scale(.90);

    opacity: .45;
  }

  63% {
    transform:
      scale(1);

    opacity: .70;
  }

  68%,
  100% {
    transform:
      scale(1.45);

    opacity: 0;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .floating-actions {
    right: 16px;
    bottom: 16px;

    gap: 12px;
  }


  /* CALL BALL */

  .floating-call {
    width: 54px;
    height: 54px;

    font-size: 21px;
  }


  /* WHATSAPP ROUND ICON BUTTON */

  .floating-whatsapp {
    width: 54px;
    min-width: 54px;
    height: 54px;

    padding: 0;

    gap: 0;

    border-radius: 50%;

    font-size: 22px;
  }


  /* HIDE ONLY TEXT */

  .floating-whatsapp span {
    display: none;
  }


  /* FORCE ICON TO REMAIN VISIBLE */

  .floating-whatsapp i,
  .floating-whatsapp svg,
  .floating-whatsapp .fa-whatsapp {
    display: inline-flex !important;

    position: relative;

    z-index: 5;

    font-size: 22px;

    width: 22px;
    height: 22px;

    color: #fff;

    visibility: visible !important;

    opacity: 1 !important;
  }


  /* MOBILE IMPACT POSITION */

  .floating-actions::before {
    right: 20px;
    bottom: 54px;

    width: 12px;
    height: 12px;
  }


  /* MOBILE CALL NOW - FULL TEXT */

  .floating-actions::after {
    content: "📞 CALL NOW";

    right: 64px;
    bottom: 48px;

    padding: 11px 16px;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: .5px;

    line-height: 1;

    white-space: nowrap;

    transform-origin:
      right center;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .floating-actions {
    right: 12px;
    bottom: 12px;
  }


  .floating-call,
  .floating-whatsapp {
    width: 50px;
    min-width: 50px;
    height: 50px;
  }


  .floating-actions::after {
    right: 60px;
    bottom: 44px;

    padding: 10px 13px;

    font-size: 12px;
  }

}

/* =========================================================
   9. TRUST STRIP
========================================================= */

.trust-strip {
  padding: 28px 0;

  background: var(--primary-dark);

  color: #fff;
}

.trust-grid {
  display: grid;

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

  gap: 24px;
}

.trust-item {
  display: flex;

  align-items: center;

  gap: 12px;
}

.trust-number {
  min-width: 48px;

  color: var(--gold-light);

  font-size: 25px;

  font-weight: 800;
}

.trust-item strong,
.trust-item span {
  display: block;
}

.trust-item strong {
  font-size: 13px;
}

.trust-item span {
  color: rgba(255, 255, 255, 0.66);

  font-size: 11px;
}

/* =========================================================
   11. SERVICES
========================================================= */

/* =========================================================
   SERVICES / WHAT WE BUY
========================================================= */

.services-section {
  position: relative;
  overflow: hidden;
}


.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 48px;
  
  align-items: start;
}

/* =========================================
   CENTER THE LAST (10TH) SERVICE CARD
========================================= */

.services-grid .service-card:last-child {
    grid-column: 2;
}


/* =========================================================
   CARD
========================================================= */

.service-card {
  position: relative;
  overflow: hidden;

  background: #ffffff;

  border: 1px solid rgba(123, 30, 43, 0.12);

  border-radius: 22px;

  box-shadow:
    0 12px 35px rgba(60, 35, 25, 0.08);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}


.service-card:hover {
  transform: translateY(-8px);

  border-color: rgba(123, 30, 43, 0.35);

  box-shadow:
    0 22px 48px rgba(60, 35, 25, 0.15);
}


/* =========================================================
   IMAGE
========================================================= */

.service-image {
  position: relative;

  width: 100%;
  height: 180px;

  overflow: hidden;

  background: #eee;
}


.service-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(80, 15, 25, 0.03),
      rgba(80, 15, 25, 0.30)
    );

  pointer-events: none;
}


.service-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.6s ease;
}


.service-card:hover .service-image img {
  transform: scale(1.08);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.service-content {
  position: relative;

  padding: 28px 30px 30px;
}


/* =========================================================
   SERVICE NUMBER
========================================================= */

.service-number {
  position: absolute;

  top: 18px;
  right: 24px;

  color:
    rgba(123, 30, 43, 0.10);

  font-size: 48px;

  line-height: 1;

  font-weight: 800;

  letter-spacing: -2px;

  pointer-events: none;
}


/* =========================================================
   ICON
========================================================= */

.service-icon {
  width: 50px;
  height: 50px;

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

  margin-top: -52px;
  margin-bottom: 22px;

  position: relative;
  z-index: 2;

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #7b1e2b,
      #9b2e3c
    );

  color: #d7aa52;

  font-size: 21px;

  border: 4px solid #ffffff;

  box-shadow:
    0 8px 20px rgba(70, 20, 30, 0.18);
}


/* =========================================================
   TITLE
========================================================= */

.service-card h3 {
  position: relative;
  z-index: 2;

  margin: 0 0 13px;

  color: #2f2a28;

  font-size: 22px;

  line-height: 1.3;

  font-weight: 700;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.service-card p {
  position: relative;
  z-index: 2;

  margin: 0;

  color: #625b56;

  font-size: 15px;

  line-height: 1.75;
}


/* =========================================================
   LAST CONTACT CARD
========================================================= */

.service-card-contact {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fcf8f3
    );
}


.service-card-contact a {
  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;

  margin-top: 22px;

  color: #7b1e2b;

  font-size: 14px;

  font-weight: 700;

  text-decoration: none;

  transition:
    gap 0.3s ease,
    color 0.3s ease;
}


.service-card-contact a:hover {
  color: #b88632;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.services-section .section-heading {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}


.services-section .section-heading p {
  line-height: 1.8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
  }


  /* Reset desktop centering */
  .services-grid .service-card:last-child {
    grid-column: auto;
    width: auto;
    justify-self: auto;
    align-self: start;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .services-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 18px;

    margin-top: 35px;

    align-items: start;

    grid-auto-rows: auto;
  }


  /* Reset the desktop/tablet positioning of last card */
  .services-grid .service-card:last-child {
    grid-column: auto !important;

    width: 100% !important;

    justify-self: stretch !important;

    align-self: start !important;
  }


  /* Prevent cards from stretching */
  .service-card {
    display: block !important;

    width: 100%;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    align-self: start !important;
  }


  /* Saree image */
  .service-image {
    display: block;

    width: 100%;

    height: 190px !important;

    min-height: 190px !important;

    max-height: 190px !important;
  }


  .service-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
  }


  /* Card text content */
  .service-content {
    display: block !important;

    height: auto !important;

    min-height: 0 !important;

    padding: 26px 22px 25px;
  }


  /* Floating icon */
  .service-icon {
    margin-top: -52px;

    margin-bottom: 20px;
  }


  /* Title */
  .service-card h3 {
    font-size: 21px;

    line-height: 1.3;
  }


  /* Description */
  .service-card p {
    margin: 0 !important;

    font-size: 15px;

    line-height: 1.7;
  }


  /* Number */
  .service-number {
    font-size: 44px;

    right: 20px;

    top: 18px;
  }

}

/* =========================================================
   12. WHY CHOOSE US
========================================================= */

.why-section {
  background: #fff;

  padding-top: 56px;
  padding-bottom: 40px;
}

.why-wrapper {
  display: grid;

  grid-template-columns:
    0.95fr 1.05fr;

  align-items: center;

  gap: 52px;
}

.why-left h2 {
  margin: 0;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: clamp(34px, 4vw, 50px);

  line-height: 1.18;

  color: var(--dark);
}

.why-left h2 span {
  color: var(--primary);
}

.why-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 16px;
}

.why-item {
  display: flex;

  align-items: flex-start;

  gap: 14px;

  min-width: 0;

  padding: 20px;

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

  border-radius: 18px;

  background: var(--cream);
}

.why-icon {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background: #fff;

  font-size: 19px;

  box-shadow: var(--shadow-sm);
}

.why-item h3 {
  margin: 0 0 5px;

  color: var(--dark);

  font-size: 16px;

  line-height: 1.25;
}

.why-item p {
  margin: 0;

  font-size: 13px;

  line-height: 1.6;
}


/* =========================================================
   13. HOW IT WORKS
   CLEAN 3-CARD LAYOUT
========================================================= */

.process-section {
  margin: 0;

  padding: 42px 0 58px;

  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #fbf8f4 100%
    );
}

.process-section .section-heading {
  margin-bottom: 30px;
}


/*
   IMPORTANT:
   HTML contains:

   card
   arrow
   card
   arrow
   card

   We use CSS grid but arrows do NOT create
   extra visual columns.
*/

.process-grid {
  display: grid;

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

  gap: 22px;

  align-items: stretch;
}


/* Cards */

.process-card {
  min-width: 0;

  min-height: 220px;

  padding: 28px;

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

  border-radius: var(--radius-md);

  background: #fff;

  box-shadow: var(--shadow-sm);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.process-card:hover {
  transform: translateY(-3px);

  box-shadow: var(--shadow-md);
}


/* Hide arrow elements completely on desktop.
   They are not needed for this cleaner design. */

.process-arrow {
  display: none !important;
}


/* Number */

.process-number {
  margin-bottom: 14px;

  color: rgba(123, 30, 43, 0.22);

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 1.8px;
}


/* Icon */

.process-icon {
  width: 48px;
  height: 48px;

  display: grid;

  place-items: center;

  margin-bottom: 16px;

  border-radius: 14px;

  background: rgba(123, 30, 43, 0.08);

  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}


/* Heading */

.process-card h3 {
  margin: 0 0 8px;

  color: var(--dark);

  font-size: 19px;

  line-height: 1.3;
}


/* Description */

.process-card p {
  margin: 0;

  color: var(--text);

  font-size: 14px;

  line-height: 1.65;
}


/* CTA */

.process-cta {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  margin-top: 24px;

  padding: 22px 28px;

  border-radius: var(--radius-md);

  background: var(--primary);

  color: #fff;
}

.process-cta p {
  margin: 0;

  color: rgba(255, 255, 255, 0.82);
}

.process-cta .btn {
  flex-shrink: 0;

  background: #fff;

  color: var(--primary);
}


/* =========================================================
   SERVICE AREAS — PREMIUM COMPACT
========================================================= */

.areas-section {
  position: relative;
  padding: 58px 0;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(201, 154, 59, 0.10),
      transparent 42%
    ),
    var(--primary-dark);

  color: #ffffff;
}


.areas-premium {
  max-width: 1100px;
  margin: 0 auto;
}


/* =========================
   HEADER
========================= */

.areas-header {
  max-width: 800px;
  margin: 0 auto 28px;

  text-align: center;
}


.areas-header .section-tag {
  display: inline-block;

  margin-bottom: 10px;

  color: var(--gold-light) !important;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;
}


.areas-section .areas-header h2 {
  margin: 0;

  color: #ffffff !important;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(36px, 4vw, 52px);

  line-height: 1.12;
}


.areas-section .areas-header h2 span {
  display: inline;

  color: var(--gold-light) !important;
}


.areas-header p {
  max-width: 680px;

  margin: 14px auto 0;

  color:
    rgba(255, 255, 255, 0.74) !important;

  font-size: 15px;

  line-height: 1.7;
}


/* =========================
   LOCATION PANEL
========================= */

.locations-panel {
  padding: 24px 28px 18px;

  border:
    1px solid
    rgba(242, 201, 104, 0.18);

  border-radius: 22px;

  background:
    rgba(255, 255, 255, 0.035);
}


.areas-section .area-tags {
  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center;

  justify-content: center;

  gap: 10px;

  margin: 0;
}


/* =========================
   LOCATION PILLS
========================= */

.areas-section .area-tags span {
  display: inline-flex !important;

  align-items: center;

  justify-content: center;

  min-height: 40px;

  padding: 8px 16px;

  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius: 999px;

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

  color:
    rgba(255, 255, 255, 0.92) !important;

  font-size: 13px;

  font-weight: 700;

  line-height: 1;

  white-space: nowrap;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}


.areas-section .area-tags span:hover {
  transform: translateY(-2px);

  background:
    rgba(201, 154, 59, 0.18);

  border-color:
    rgba(242, 201, 104, 0.55);
}


/* =========================
   AMEERPET HIGHLIGHT
========================= */

.areas-section .area-tags .featured-area {
  background:
    linear-gradient(
      135deg,
      var(--gold),
      var(--gold-light)
    ) !important;

  border-color:
    var(--gold-light);

  color:
    var(--primary-dark) !important;

  font-weight: 800;

  box-shadow:
    0 6px 18px
    rgba(0, 0, 0, 0.18);
}


/* =========================
   FOOT NOTE
========================= */

.areas-section .areas-note {
  margin: 16px 0 0;

  text-align: center;

  color:
    rgba(255, 255, 255, 0.48) !important;

  font-size: 11px;
}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

  .areas-section {
    padding: 52px 0;
  }

  .locations-panel {
    padding: 22px 20px 16px;
  }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

  .areas-section {
    padding: 44px 0;
  }

  .areas-section .areas-header h2 {
    font-size:
      clamp(32px, 10vw, 43px);
  }

  .areas-section .areas-header h2 span {
    display: block;
  }

  .areas-header p {
    font-size: 14px;
  }

  .locations-panel {
    padding: 18px 12px 14px;

    border-radius: 18px;
  }

  .areas-section .area-tags {
    gap: 8px;
  }

  .areas-section .area-tags span {
    min-height: 37px;

    padding: 8px 12px;

    font-size: 12px;
  }

}

/* =========================================
   PREMIUM SEO CONTENT SECTION
========================================= */

.seo-content-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

/* Soft luxury background glow */
.seo-content-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -250px;
    right: -200px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(194, 153, 84, 0.10),
        transparent 70%
    );
    pointer-events: none;
}

.seo-content-container {
    position: relative;
    max-width: 1120px;
}

/* Heading */
.seo-content-section .section-heading {
    margin-bottom: 45px;
}

.seo-content-section .section-heading h2 {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

/* Main premium content panel */
.seo-content-text {
    max-width: 1050px;
    margin: 0 auto;
    padding: 42px 48px;
    position: relative;

    background: rgba(255, 255, 255, 0.38);
    border: 1px solid rgba(120, 86, 48, 0.14);
    border-radius: 20px;

    box-shadow:
        0 20px 60px rgba(61, 40, 25, 0.05);
}

/* Luxury top accent */
.seo-content-text::before {
    content: "";
    display: block;
    width: 75px;
    height: 3px;
    margin-bottom: 28px;

    background: linear-gradient(
        90deg,
        #7b2630,
        #c99b52
    );

    border-radius: 10px;
}

/* Paragraph styling */
.seo-content-text > p {
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 22px;
    color: #5f5853;
}

.seo-content-text strong {
    color: #6d2630;
    font-weight: 700;
}

/* First paragraph premium highlight */
.seo-content-text > p:first-of-type {
    font-size: 17px;
    color: #49413d;
}

/* =========================================
   WHAT WE BUY AREA
========================================= */

.seo-highlight {
    margin: 32px 0;
    padding: 26px 28px;

    border-top: 1px solid rgba(120, 86, 48, 0.16);
    border-bottom: 1px solid rgba(120, 86, 48, 0.16);

    background:
        linear-gradient(
            90deg,
            rgba(123, 38, 48, 0.035),
            rgba(201, 155, 82, 0.06),
            rgba(123, 38, 48, 0.035)
        );
}

/* Label */
.seo-highlight-label {
    display: inline-block;
    margin-bottom: 15px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #7b2630;
}

/* Saree types */
.seo-highlight p {
    margin: 0;

    font-size: 15px;
    line-height: 2;
    color: #514945;
}

/* =========================================
   SERVICE AREA / LOCATION TEXT
========================================= */

.seo-last-text {
    position: relative;
    padding: 22px 25px;

    background: rgba(123, 38, 48, 0.035);

    border-left: 3px solid #b88a4b;
    border-radius: 0 12px 12px 0;
}

/* =========================================
   CTA
========================================= */

.seo-content-actions {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

.seo-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 14px 24px;

    color: #7b2630;
    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    border: 1px solid rgba(123, 38, 48, 0.25);
    border-radius: 50px;

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

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.seo-contact-link span {
    font-size: 18px;
    transition: transform 0.25s ease;
}

.seo-contact-link:hover {
    background: #7b2630;
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(123, 38, 48, 0.18);
}

.seo-contact-link:hover span {
    transform: translateX(4px);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .seo-content-section {
        padding: 70px 0;
    }

    .seo-content-section .section-heading {
        margin-bottom: 30px;
    }

    .seo-content-text {
        padding: 28px 22px;
        border-radius: 16px;
    }

    .seo-content-text::before {
        width: 55px;
        margin-bottom: 22px;
    }

    .seo-content-text > p {
        font-size: 15px;
        line-height: 1.75;
    }

    .seo-content-text > p:first-of-type {
        font-size: 15px;
    }

    .seo-highlight {
        margin: 26px 0;
        padding: 20px 18px;
    }

    .seo-highlight p {
        font-size: 14px;
        line-height: 1.9;
    }

    .seo-last-text {
        padding: 18px;
    }

    .seo-content-actions {
        margin-top: 28px;
    }

    .seo-contact-link {
        width: 100%;
        justify-content: center;
        padding: 15px 20px;
    }
}

/* =========================================================
   16. FAQ
========================================================= */

.faq-section {
  background: var(--cream);
}

.faq-list {
  max-width: 820px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  gap: 14px;
}

.faq-item {
  overflow: hidden;

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

  border-radius: var(--radius-sm);

  background: #fff;
}

.faq-question {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 20px 24px;

  border: 0;

  background: transparent;

  text-align: left;

  color: var(--dark);

  font-size: 15px;

  font-weight: 800;
}

.faq-question b {
  flex-shrink: 0;

  color: var(--primary);

  font-size: 20px;

  transition: transform 0.25s ease;
}

.faq-item.active .faq-question b {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;

  overflow: hidden;

  transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
  max-height: 320px;
}

.faq-answer p {
  margin: 0;

  padding: 0 24px 22px;

  font-size: 14px;
}


/* =========================================================
   17. CONTACT
========================================================= */

.contact-section {
  background: var(--primary-dark);
}

.contact-wrapper {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  overflow: hidden;

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-lg);
}

.contact-content {
  padding: 54px 46px;

  background: var(--primary);

  color: #fff;
}

.contact-content h2 {
  color: #fff;

  font-size: clamp(32px, 3.6vw, 46px);

  line-height: 1.18;
}

.contact-content h2 span {
  color: var(--gold-light);
}

.contact-content p {
  color: rgba(255, 255, 255, 0.78);
}

.contact-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 26px;
}

.contact-actions .btn-primary {
  background: #fff;

  color: var(--primary);
}

.contact-actions .btn-secondary {
  color: #fff;

  border-color: rgba(255, 255, 255, 0.35);

  background: transparent;
}

.contact-details {
  padding: 54px 46px;

  background: #fff;
}

.contact-detail {
  display: flex;

  align-items: flex-start;

  gap: 14px;

  margin-bottom: 24px;
}

.contact-detail-icon {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: rgba(123, 30, 43, 0.08);
}

.contact-detail span,
.contact-detail strong {
  display: block;
}

.contact-detail span {
  margin-bottom: 4px;

  color: var(--primary);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.4px;
}

.contact-detail strong {
  color: var(--dark);

  font-size: 14px;

  line-height: 1.65;
}

.map-link {
  display: inline-block;

  margin-top: 9px;

  color: var(--primary);

  font-size: 13px;

  font-weight: 800;
}


/* =========================================================
   18. FOOTER
   CLEAN / CONTROLLED LOGO
========================================================= */

.site-footer {
  background: var(--dark);

  color: rgba(255, 255, 255, 0.68);
}

.footer-grid {
  display: grid;

  grid-template-columns:
    1.45fr 1fr 1fr 1fr;

  gap: 38px;

  padding: 52px 0 34px;
}


/* Footer brand */

.footer-about .brand {
  display: inline-flex;

  align-items: center;

  margin-bottom: 18px;
}


/*
   Footer uses SAME logo image,
   but smaller and WITHOUT animation.
*/

.footer-about .brand-logo {
  width: 72px;
  height: 72px;

  flex: 0 0 72px;

  animation: none;

  transform: none;

  box-shadow:
    0 0 0 3px rgba(201, 154, 59, 0.16);

  border: 1px solid rgba(201, 154, 59, 0.55);

  border-radius: 50%;

  background: #fff;
}


/* Footer brand text */

.site-footer .brand-text strong,
.site-footer .logo-text strong {
  color: #fff;

  font-size: 21px;
}

.site-footer .brand-text span,
.site-footer .logo-text span {
  color: var(--gold-light);
}


/* Footer description */

.footer-about p {
  max-width: 420px;

  margin: 0;

  font-size: 14px;

  line-height: 1.75;
}


/* Footer columns */

.footer-column h3,
.footer-column h4 {
  margin: 0 0 15px;

  color: #fff;

  font-size: 16px;
}

.footer-column p {
  margin-top: 0;
}

.footer-column a,
.footer-column span {
  display: block;

  margin-bottom: 10px;

  font-size: 13px;
}

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


/* Footer bottom */

.footer-bottom {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding: 20px 0;

  border-top:
    1px solid rgba(255, 255, 255, 0.09);

  font-size: 12px;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom div {
  display: flex;

  gap: 20px;
}


/* =========================================================
   19. FLOATING ACTION BUTTONS
========================================================= */




/* =========================================================
   20. TABLET
========================================================= */

@media (max-width: 1100px) {

  .desktop-nav {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .nav-whatsapp {
    margin-left: auto;
  }


  /* KEEP HERO SIDE-BY-SIDE */

  .hero-grid {
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(300px, 0.95fr);

    gap: 32px;

    min-height: 560px;
  }

  .hero h1 {
    font-size:
      clamp(42px, 5.6vw, 64px);

    letter-spacing: -1.4px;
  }

  .hero-features {
    grid-template-columns:
      1fr 1fr;
  }


  .floating-card-one {
    left: -12px;
  }

  .floating-card-two {
    right: -12px;
  }


  .intro-grid,
  .why-wrapper,
  .areas-wrapper,
  .contact-wrapper {
    grid-template-columns: 1fr;
  }


  .why-wrapper {
    gap: 36px;
  }


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


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


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


  /*
     IMPORTANT:
     At tablet width, How It Works
     becomes 3 cards vertically only
     when space is genuinely insufficient.
  */

  .process-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 16px;
  }

  .process-card {
    padding: 24px;
  }
}


/* =========================================================
   21. MOBILE
========================================================= */

@media (max-width: 700px) {

  .container {
    width:
      min(
        calc(100% - 28px),
        var(--container)
      );
  }


  .section {
    padding:
      var(--space-section-mobile)
      0;
  }


  .top-info {
    display: none;
  }

  .top-bar-inner {
    justify-content: center;
  }


  /* HEADER */

  .nav-container {
    min-height: 68px;
  }

  .brand-logo {
    width: 56px;
    height: 56px;

    flex-basis: 56px;
  }

  .brand-text strong {
    font-size: 17px;
  }

  .brand-text span {
    font-size: 11px;
  }

  .nav-whatsapp {
    display: none;
  }


  /* HERO */

  .hero {
    padding:
      34px 0 30px;
  }

  .hero-grid {
    grid-template-columns: 1fr;

    min-height: 0;

    gap: 28px;
  }

  .hero h1 {
    font-size:
      clamp(40px, 12vw, 56px);

    letter-spacing: -1px;
  }

  .hero-description {
    font-size: 15px;
  }

  .hero-buttons {
    flex-direction: column;

    align-items: stretch;
  }

  .hero-features {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  /* SLIDER */

  .saree-slider {
    width: 100%;

    border: 0 !important;

    outline: 0;

    border-radius: 24px;
  }


  .floating-card-one {
    top: 18px;

    left: 4px;
  }

  .floating-card-two {
    right: 4px;

    bottom: 104px;
  }

  .floating-card {
    min-width: 0;

    padding: 9px 11px;

    gap: 7px;
  }

  .floating-icon {
    width: 34px;
    height: 34px;

    flex-basis: 34px;

    font-size: 14px;
  }

  .floating-card strong {
    font-size: 10px;
  }

  .floating-card span {
    font-size: 9px;
  }


  /* HOW IT WORKS */

  .process-section {
    padding:
      30px 0 46px;
  }

  .process-section .section-heading {
    margin-bottom: 28px;
  }

  .process-grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .process-arrow {
    display: none !important;
  }

  .process-card {
    min-height: 0;

    padding: 24px;
  }

  .process-cta {
    flex-direction: column;

    align-items: stretch;

    text-align: center;

    padding: 22px;
  }


  /* OTHER SECTIONS */

  .trust-grid,
  .services-grid,
  .why-grid,
  .area-list,
  .intro-points {
    grid-template-columns: 1fr;
  }


  .contact-content,
  .contact-details {
    padding: 38px 26px;
  }

  .contact-actions {
    flex-direction: column;
  }

  .contact-actions .btn {
    width: 100%;
  }


  /* FOOTER */

  .footer-grid {
    grid-template-columns: 1fr;

    gap: 28px;

    padding:
      42px 0 30px;
  }

  .footer-about .brand-logo {
    width: 64px;
    height: 64px;

    flex-basis: 64px;
  }

  .footer-bottom {
    flex-direction: column;

    text-align: center;
  }

  .footer-bottom div {
    justify-content: center;

    flex-wrap: wrap;
  }


  /* FLOATING BUTTONS */
}


/* =========================================================
   22. SMALL PHONES
========================================================= */

@media (max-width: 420px) {

  .hero h1 {
    font-size: 38px;
  }

  .slider-bottom-overlay {
    padding:
      58px 18px 16px;
  }

  .slider-bottom-overlay h3 {
    font-size: 24px;
  }

  .saree-slider .slider-arrow {
    width: 40px;
    height: 40px;

    font-size: 20px;
  }

  .process-card {
    padding: 22px;
  }
}


/* =========================================================
   23. ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================
   INTRO / PREMIUM VALUATION
========================= */

.valuation-card {
  position: relative;
  padding: 42px 46px;
  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 30px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #fbf7f0 55%,
      #f3eadb 100%
    );

  box-shadow:
    0 20px 50px rgba(75, 15, 25, 0.10);
}


/* GOLD DECORATIVE CIRCLE */

.valuation-card::before {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  top: -125px;
  right: -80px;

  border-radius: 50%;

  border: 1px solid rgba(201, 154, 59, 0.22);

  background:
    radial-gradient(
      circle,
      rgba(242, 201, 104, 0.14),
      transparent 68%
    );

  pointer-events: none;
}


/* TOP AREA */

.valuation-card-top {
  position: relative;
  z-index: 1;

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

  margin-bottom: 20px;
}


.valuation-card .small-label {
  margin: 0;

  color: var(--primary);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 2px;
}


/* ICON */

.valuation-icon {
  width: 52px;
  height: 52px;

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

  flex-shrink: 0;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-dark)
    );

  color: var(--gold-light);

  font-size: 21px;

  box-shadow:
    0 10px 25px rgba(123, 30, 43, 0.20);
}


/* MAIN TITLE */

.valuation-card h3 {
  position: relative;
  z-index: 1;

  max-width: 520px;

  margin: 0 0 28px;

  color: var(--dark);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(30px, 2.8vw, 42px);

  line-height: 1.15;
}


/* VALUATION LIST */

.valuation-list {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;

  margin: 0;
}


/* EACH ROW */

.valuation-list > div {
  display: grid;

  grid-template-columns:
    58px
    1fr;

  align-items: center;

  min-height: 76px;

  padding: 12px 0;

  border-top:
    1px solid rgba(201, 154, 59, 0.22);

  transition:
    padding-left 0.25s ease,
    background 0.25s ease;
}


.valuation-list > div:last-child {
  border-bottom:
    1px solid rgba(201, 154, 59, 0.22);
}


/* NUMBER */

.valuation-list span {
  width: 40px;
  height: 40px;

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

  border-radius: 50%;

  background:
    rgba(123, 30, 43, 0.08);

  border:
    1px solid rgba(123, 30, 43, 0.10);

  color: var(--primary);

  font-size: 13px;
  font-weight: 800;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


/* TEXT */

.valuation-list p {
  margin: 0;

  color: var(--dark);

  font-size: 17px;
  font-weight: 600;

  line-height: 1.4;

  transition:
    color 0.25s ease;
}


/* HOVER EFFECT */

.valuation-list > div:hover {
  padding-left: 10px;

  background:
    linear-gradient(
      90deg,
      rgba(201, 154, 59, 0.07),
      transparent
    );
}


.valuation-list > div:hover span {
  transform: scale(1.08);

  background: var(--primary);

  color: var(--gold-light);
}


.valuation-list > div:hover p {
  color: var(--primary);
}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

  .valuation-card {
    padding: 34px;
  }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

  .valuation-card {
    padding: 28px 22px;

    border-radius: 24px;
  }


  .valuation-card::before {
    width: 160px;
    height: 160px;

    top: -95px;
    right: -70px;
  }


  .valuation-card h3 {
    font-size: 30px;

    margin-bottom: 22px;
  }


  .valuation-list > div {
    grid-template-columns:
      50px
      1fr;

    min-height: 66px;
  }


  .valuation-list span {
    width: 36px;
    height: 36px;

    font-size: 12px;
  }


  .valuation-list p {
    font-size: 15px;
  }

}

/* =========================================================
   FINAL FLOATING BUTTON FIX
   DESKTOP CALL NOW POSITION + MOBILE WHATSAPP ICON
========================================================= */


/* =========================================================
   WHATSAPP ICON + TEXT
========================================================= */

.floating-whatsapp .whatsapp-icon {
  position: relative;
  z-index: 10;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  font-size: 19px;
  line-height: 1;

  pointer-events: none;
}


.floating-whatsapp .whatsapp-label {
  position: relative;
  z-index: 10;

  display: inline-block;

  white-space: nowrap;
}


/* =========================================================
   DESKTOP
   MOVE CALL NOW HIGHER
   PREVENT OVERLAP WITH WHATSAPP
========================================================= */

@media (min-width: 701px) {

  .floating-actions::after {

    /*
      Move CALL NOW upward.
      This prevents it from overlapping
      the WhatsApp button.
    */

    bottom: 82px !important;

    right: 68px !important;

    z-index: 30;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .floating-actions {
    right: 16px;
    bottom: 16px;

    gap: 12px;

    overflow: visible;
  }


  /* -------------------------
     CALL BALL
  ------------------------- */

  .floating-call {
    width: 54px;
    height: 54px;

    min-width: 54px;
    min-height: 54px;

    font-size: 21px;

    flex-shrink: 0;

    z-index: 10;
  }


  /* -------------------------
     WHATSAPP ROUND BUTTON
  ------------------------- */

  .floating-whatsapp {
    width: 54px;
    height: 54px;

    min-width: 54px;
    min-height: 54px;

    padding: 0;

    gap: 0;

    border-radius: 50%;

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

    overflow: visible;

    font-size: 0;

    z-index: 5;
  }


  /* SHOW ONLY WHATSAPP ICON */

  .floating-whatsapp .whatsapp-icon {

    display: flex !important;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    font-size: 22px !important;

    line-height: 1;

    opacity: 1 !important;

    visibility: visible !important;

    color: #fff;

    z-index: 20;
  }


  /* HIDE WHATSAPP TEXT */

  .floating-whatsapp .whatsapp-label {
    display: none !important;
  }


  /* -------------------------
     MOBILE CALL NOW
     ONLY PHONE SYMBOL
  ------------------------- */

  .floating-actions::after {

    content: "📞" !important;

    right: 68px !important;

    /*
      Position above WhatsApp
      and beside the call ball
    */

    bottom: 52px !important;

    min-width: 54px;
    height: 54px;

    padding: 0 !important;

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

    border-radius: 50%;

    font-size: 24px !important;

    line-height: 1;

    white-space: nowrap;

    z-index: 50;

    pointer-events: none;
  }

}

.seo-saree-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.seo-saree-tags span {
    display: inline-flex;
    align-items: center;

    padding: 8px 13px;

    font-size: 13px;
    font-weight: 500;
    color: #5d3a30;

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

    border: 1px solid rgba(123, 38, 48, 0.12);
    border-radius: 50px;

    transition: 0.25s ease;
}

.seo-saree-tags span:hover {
    transform: translateY(-2px);
    background: #7b2630;
    color: #fff;
}

/* =========================================================
   FLOATING GOOGLE REVIEW BUTTON
========================================================= */

.google-review-float {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;

  display: flex;
  align-items: center;

  width: 54px;
  height: 54px;

  background: #ffffff;
  border-radius: 50px;

  text-decoration: none;
  overflow: hidden;

  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);

  transition:
    width 0.35s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* GOOGLE ICON */

.google-review-icon {
  min-width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.google-review-icon svg {
  width: 28px;
  height: 28px;
}

/* TEXT - HIDDEN INITIALLY */

.google-review-text {
  display: flex;
  flex-direction: column;

  min-width: 110px;

  opacity: 0;
  transform: translateX(-10px);

  color: #333;

  transition:
    opacity 0.25s ease,
    transform 0.35s ease;
}

.google-review-text strong {
  font-size: 13px;
  line-height: 1.2;
}

.google-review-text small {
  font-size: 11px;
  color: #777;
  margin-top: 2px;
}

/* HOVER - EXPAND */

.google-review-float:hover {
  width: 170px;
  transform: translateY(-50%) translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.google-review-float:hover .google-review-text {
  opacity: 1;
  transform: translateX(0);
}

/* CLICK ANIMATION */

.google-review-float:active {
  transform: translateY(-50%) scale(0.92);
}

/* SUBTLE ATTENTION ANIMATION */

.google-review-float {
  animation: googleReviewFloat 3s ease-in-out infinite;
}

@keyframes googleReviewFloat {

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

  50% {
    transform: translateY(calc(-50% - 7px));
  }

}

/* =========================
   MOBILE - BOTTOM LEFT
========================= */

@media (max-width: 768px) {

  .google-review-float {
    left: 12px;
    top: auto;
    bottom: 20px;

    /* Remove desktop center positioning */
    transform: none;

    width: 145px;
    height: 48px;

    animation: googleReviewMobileFloat 3s ease-in-out infinite;
  }

  .google-review-icon {
    min-width: 48px;
    height: 48px;
  }

  .google-review-icon svg {
    width: 25px;
    height: 25px;
  }

  .google-review-text {
    opacity: 1;
    transform: translateX(0);
    min-width: 90px;
  }

  /* Mobile floating animation */
  @keyframes googleReviewMobileFloat {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-5px);
    }

  }

  /* Click animation */
  .google-review-float:active {
    transform: scale(0.92);
  }

}

@media (max-width: 700px) {

  .hero-buttons .btn-secondary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
  }

  .hero-buttons .btn-secondary .button-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
  }

  .hero-buttons .btn-secondary .button-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
  }

}