/*
 * GUPTA AGRO SOLAR — Global Design Improvements
 * Premium section separation, card styling, animated borders, mobile polish
 * Applies across all pages. Add before </head> in every HTML file.
 */

/* ============================================================
   ROTATING BORDER — @property (Chrome 85+, all modern Android)
   ============================================================ */
@property --gi-spin {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes gi-border-spin {
  to { --gi-spin: 360deg; }
}

/* Reusable rotating border mixin applied via class */
.gi-rotating-border {
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    conic-gradient(
      from var(--gi-spin),
      #00B9FC 0deg,
      #236BCF 50deg,
      transparent 80deg,
      transparent 280deg,
      #FFD302 310deg,
      #00B9FC 360deg
    ) border-box !important;
  border: 2.5px solid transparent !important;
  animation: gi-border-spin 3s linear infinite !important;
}

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --gi-blue:       #236BCF;
  --gi-sky:        #00B9FC;
  --gi-yellow:     #FFD302;
  --gi-white:      #FFFFFF;
  --gi-offwhite:   #F5F4EE;   /* warm off-white — clearly visible against pure white */
  --gi-cream:      #FFF3D4;   /* warm cream — noticeably different */
  --gi-lightblue:  #E8F3FF;   /* soft blue tint — clearly blue-tinted */
  --gi-lightgreen: #E8F9EF;   /* soft green tint — clearly green-tinted */
  --gi-paleyellow: #FFFCE6;   /* pale yellow — soft warm accent */
  --gi-border:     #D8E8F5;
  --gi-shadow-sm:  0 4px 18px rgba(35,107,207,.07);
  --gi-shadow-md:  0 10px 32px rgba(35,107,207,.13);
  --gi-shadow-lg:  0 18px 48px rgba(35,107,207,.18);
  --gi-radius-sm:  12px;
  --gi-radius-md:  16px;
  --gi-radius-lg:  22px;
}

/* ============================================================
   2. SECTION BACKGROUNDS — full alternating pattern, all pages
   ============================================================ */

/*
  Color rotation used:
  A = #FFFFFF       pure white
  B = #E8F3FF       light blue
  C = #FFF3D4       warm cream
  D = #F5F4EE       off-white
  E = #E8F9EF       light green
  F = #FFFCE6       pale yellow
*/

/* ── INDEX.HTML ── */
/* 1 video-hero     → dark (untouched)                               */
/* 2 pm-surya       → light blue (form section)                      */
#pm-surya-yojana                          { background: var(--gi-lightblue)  !important; }
/* 3 subsidy-new    → warm cream                                     */
.subsidy-new                              { background: var(--gi-cream)      !important; }
/* 4 yojana-section → off-white                                      */
.yojana-section                           { background: var(--gi-offwhite)   !important; }
/* 5 feature cards wrapper                                           */
.position-relative.overflow-hidden.space-top
                                          { background: var(--gi-paleyellow) !important; }
/* 6 counter / stats wrapper                                         */
.space-extra2-top.space-bottom.overflow-hidden
                                          { background: var(--gi-lightgreen) !important; }
/* 7 solar-services-new                                              */
.solar-services-new                       { background: var(--gi-lightblue)  !important; }
/* 8 happy-installations                                             */
.happy-installations-section              { background: var(--gi-cream)      !important; }
/* 9 brands-offer                                                    */
.brands-offer-section                     { background: var(--gi-offwhite)   !important; }
/* 10 working-process / space section                                */
.space.overflow-hidden.position-relative  { background: var(--gi-paleyellow) !important; }
/* 11 testimonials                                                   */
section#testi-sec,
.overflow-hidden.bg-white.space           { background: var(--gi-lightgreen) !important; }
/* 12 request-quote form                                             */
.ga-clean-section:not(.dark)              { background: var(--gi-lightblue)  !important; }

/* ── ABOUT.HTML ── */
.who-section                              { background: var(--gi-white)      !important; }
.values-section                           { background: var(--gi-cream)      !important; }
.alt-section                              { background: var(--gi-offwhite)   !important; }
.alt-section.bg-light-section             { background: var(--gi-paleyellow) !important; }
.why-section                              { background: var(--gi-lightgreen) !important; }
.cta-band                                 { background: var(--gi-lightblue)  !important;
                                            border-top: 2px solid #C5DCF5    !important;
                                            border-bottom: 2px solid #C5DCF5 !important; }

/* ── SERVICES.HTML ── */
.services-section                         { background: var(--gi-lightblue)  !important; }

/* ── SERVICE DETAIL PAGES ── */
/* intro (A) → gallery (B) → stats dark → benefits (C) → packages (D) → process (E) → cta (F) */
.intro-section                            { background: var(--gi-white)      !important; }
.gallery-section                          { background: var(--gi-offwhite)   !important; }
.benefits-section                         { background: var(--gi-cream)      !important; }
.packages-section                         { background: var(--gi-paleyellow) !important; }
.process-section                          { background: var(--gi-lightgreen) !important; }
.eligibility-section                      { background: var(--gi-lightblue)  !important; }
.scheme-section                           { background: var(--gi-white)      !important; }
.form-section                             { background: var(--gi-paleyellow) !important; }
.service-features-section                 { background: var(--gi-lightblue)  !important; }
.service-benefits-section                 { background: var(--gi-cream)      !important; }

/* ── ROOFTOP-SYSTEM.HTML ── */
/* scheme(A) → benefits(C) → eligibility(B) → process(F) → why(E) → gallery(D) → form(B) */

/* ── CONTACT.HTML ── */
/* wrap the contact section containers */
.contact-area, .contact-wrap              { background: var(--gi-lightblue)  !important; }
.space-bottom                             { background: var(--gi-offwhite)   !important; }

/* ── GLOBAL — any leftover space/section wrappers ── */
/* Catch all .space sections that don't already have a colour */
section.space:not(.bg-white):not(.stats-band):not(.mv-section):not(.video-section):not(.solar-services-new):not(.happy-installations-section):not(.brands-offer-section):not(.ga-clean-section):not(.subsidy-new):not(.yojana-section):not(.who-section):not(.values-section):not(.alt-section):not(.why-section):not(.cta-band):not(.services-section):not(.intro-section):not(.gallery-section):not(.benefits-section):not(.packages-section):not(.process-section):not(.eligibility-section):not(.scheme-section):not(.form-section) {
  background: var(--gi-offwhite) !important;
}

/* ── KEEP DARK SECTIONS UNTOUCHED ── */
.ga-clean-section.dark,
.stats-band,
.mv-section,
.video-section,
.video-hero-section,
.cta-band-dark,
footer,
.footer-wrapper { /* intentionally empty — do not override */ }

/* ── SECTION SEPARATORS — visible top-border on color-change transitions ── */
.subsidy-new,
.yojana-section,
.solar-services-new,
.happy-installations-section,
.brands-offer-section,
.who-section,
.values-section,
.alt-section,
.why-section,
.services-section,
.intro-section,
.gallery-section,
.benefits-section,
.packages-section,
.process-section,
.eligibility-section,
.form-section,
.cta-band {
  border-top: 1px solid rgba(35,107,207,.08);
}

/* ── SECTION PADDING — generous on mobile so color change looks intentional ── */
.subsidy-new,
.yojana-section,
.solar-services-new,
.happy-installations-section,
.brands-offer-section,
.values-section,
.who-section,
.alt-section,
.why-section,
.services-section,
.intro-section,
.gallery-section,
.benefits-section,
.packages-section,
.process-section,
.eligibility-section,
.scheme-section,
.form-section,
.cta-band {
  padding-top:    72px !important;
  padding-bottom: 72px !important;
}

@media (max-width: 767px) {
  .subsidy-new,
  .yojana-section,
  .solar-services-new,
  .happy-installations-section,
  .brands-offer-section,
  .values-section,
  .who-section,
  .alt-section,
  .why-section,
  .services-section,
  .intro-section,
  .gallery-section,
  .benefits-section,
  .packages-section,
  .process-section,
  .eligibility-section,
  .scheme-section,
  .form-section,
  .ga-clean-section,
  .cta-band {
    padding-top:    52px !important;
    padding-bottom: 52px !important;
  }
  /* Ensure the counter / feature wrappers also get padding on mobile */
  .space-extra2-top.space-bottom.overflow-hidden,
  .position-relative.overflow-hidden.space-top {
    padding-top:    48px !important;
    padding-bottom: 48px !important;
  }
}

/* ============================================================
   3. CARD IMPROVEMENTS — borders, shadows, spacing
   ============================================================ */

.svc-card,
.val-card,
.why-card,
.solar-card,
.service-card,
.process-card,
.feature-card,
.brand-offer-card,
.happy-installation-card {
  border: 1.5px solid var(--gi-border) !important;
  border-radius: var(--gi-radius-md) !important;
  box-shadow: var(--gi-shadow-sm) !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}

.svc-card:hover,
.val-card:hover,
.why-card:hover,
.solar-card:hover,
.service-card:hover,
.process-card:hover,
.feature-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--gi-shadow-md) !important;
  border-color: var(--gi-sky) !important;
}

/* Mission / Vision cards */
.mv-card {
  border: 1.5px solid rgba(255,255,255,.18) !important;
  border-radius: var(--gi-radius-md) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.14) !important;
}

/* ============================================================
   COUNTER / STATS CARDS (50+, 20+, 5+, 1MW+) — rotating border
   ============================================================ */

.counter-card {
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    conic-gradient(
      from var(--gi-spin),
      #00B9FC 0deg, #236BCF 50deg,
      transparent 80deg, transparent 280deg,
      #FFD302 310deg, #00B9FC 360deg
    ) border-box !important;
  border: 2.5px solid transparent !important;
  border-radius: var(--gi-radius-md) !important;
  box-shadow: 0 6px 24px rgba(35,107,207,.10) !important;
  padding: 28px 24px !important;
  animation: gi-border-spin 3.5s linear infinite !important;
  /* stagger each card */
}

.counter-card:nth-child(1) { animation-delay: 0s    !important; }
.counter-card:nth-child(3) { animation-delay: .8s   !important; }
.counter-card:nth-child(5) { animation-delay: 1.6s  !important; }
.counter-card:nth-child(7) { animation-delay: 2.4s  !important; }

/* ============================================================
   SERVICE CARDS (svc-card) — upgrade top-sweep to rotating border
   ============================================================ */

/* Remove old top-sweep pseudo-element for svc-card */
.svc-card::before {
  display: none !important;
}

/* Apply rotating border */
.svc-card {
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    conic-gradient(
      from var(--gi-spin),
      #00B9FC 0deg, #236BCF 50deg,
      transparent 80deg, transparent 280deg,
      #FFD302 310deg, #00B9FC 360deg
    ) border-box !important;
  border: 2px solid transparent !important;
  border-radius: var(--gi-radius-md) !important;
  animation: gi-border-spin 4s linear infinite !important;
}

.svc-card:nth-child(1) { animation-delay: 0s   !important; }
.svc-card:nth-child(2) { animation-delay: .6s  !important; }
.svc-card:nth-child(3) { animation-delay: 1.2s !important; }
.svc-card:nth-child(4) { animation-delay: 1.8s !important; }
.svc-card:nth-child(5) { animation-delay: 2.4s !important; }
.svc-card:nth-child(6) { animation-delay: 3.0s !important; }

/* ============================================================
   FORM CARDS — rotating border from all sides
   ============================================================ */

/* Remove old top-sweep pseudo-elements for form cards */
.ga-clean-form::before,
.inquiry-form::before,
.contact-form2::before {
  display: none !important;
}

/* Apply rotating border to form cards */
.ga-clean-form,
.inquiry-form {
  background:
    linear-gradient(#EBF5FF, #EBF5FF) padding-box,
    conic-gradient(
      from var(--gi-spin),
      #236BCF 0deg, #00B9FC 50deg,
      transparent 80deg, transparent 280deg,
      #FFD302 310deg, #236BCF 360deg
    ) border-box !important;
  border: 2.5px solid transparent !important;
  animation: gi-border-spin 5s linear infinite !important;
}

.contact-form2 {
  background:
    linear-gradient(#EBF5FF, #EBF5FF) padding-box,
    conic-gradient(
      from var(--gi-spin),
      #236BCF 0deg, #00B9FC 50deg,
      transparent 80deg, transparent 280deg,
      #FFD302 310deg, #236BCF 360deg
    ) border-box !important;
  border: 2.5px solid transparent !important;
  animation: gi-border-spin 5s linear infinite !important;
}

/* ── FEATURE CARDS (Energy Solutions / Global Expertise / Home Appliance / Easy Installation) ── */
/* Override the near-invisible palette border with a strong, visible blue outline */
.feature-card {
  border: 2px solid #236BCF !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 28px rgba(35,107,207,.13) !important;
  background: #FFFFFF !important;
  position: relative;
  overflow: hidden;
}

.feature-card:hover {
  border-color: var(--gi-sky) !important;
  box-shadow: 0 14px 40px rgba(35,107,207,.22) !important;
  transform: translateY(-5px) !important;
}

/* Rotating all-sides border on feature cards */
.feature-card::before { display: none !important; }

.feature-card {
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    conic-gradient(
      from var(--gi-spin),
      #00B9FC 0deg, #236BCF 50deg,
      transparent 80deg, transparent 280deg,
      #FFD302 310deg, #00B9FC 360deg
    ) border-box !important;
  border: 2px solid transparent !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 28px rgba(35,107,207,.10) !important;
  animation: gi-border-spin 4s linear infinite !important;
}

.feature-card:nth-child(1) { animation-delay: 0s; }
.feature-card:nth-child(2) { animation-delay: .7s; }
.feature-card:nth-child(3) { animation-delay: 1.4s; }
.feature-card:nth-child(4) { animation-delay: 2.1s; }

@media (max-width: 767px) {
  .feature-card {
    margin-bottom: 16px !important;
    padding: 22px 18px !important;
  }
}

/* Highlighted / outlined cards — stronger blue border */
.yojana-panel,
.benefit-card,
.table-container {
  border: 2px solid var(--gi-border) !important;
  border-radius: var(--gi-radius-lg) !important;
  box-shadow: var(--gi-shadow-md) !important;
}

/* Subsidy box — yellow accent border */
.subsidy-box {
  border: 2px solid var(--gi-yellow) !important;
  border-radius: var(--gi-radius-lg) !important;
  box-shadow: var(--gi-shadow-md) !important;
  overflow: hidden !important;
}

/* Stats / counter boxes */
.counter-card,
.stat-item {
  border: 2px solid rgba(255,255,255,.16) !important;
  border-radius: var(--gi-radius-md) !important;
}

/* PM Surya form + media boxes */
.ga-clean-box,
.ga-clean-form,
.ga-clean-media {
  border: 2px solid var(--gi-border) !important;
  border-radius: var(--gi-radius-lg) !important;
  box-shadow: var(--gi-shadow-md) !important;
}

/* ============================================================
   4. ANIMATED BORDER SWEEP — subtle premium line effect
   Applied to selected feature cards only
   ============================================================ */

@keyframes gi-sweep {
  0%   { left: -110%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

@keyframes gi-sweep-yellow {
  0%   { left: -110%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* Blue sweep on service cards */
.svc-card {
  position: relative;
  overflow: hidden;
}
.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: -110%;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gi-sky) 40%, var(--gi-blue) 60%, transparent 100%);
  animation: gi-sweep 4s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}
.svc-card:nth-child(1)::before { animation-delay: 0s; }
.svc-card:nth-child(2)::before { animation-delay: .6s; }
.svc-card:nth-child(3)::before { animation-delay: 1.2s; }
.svc-card:nth-child(4)::before { animation-delay: 1.8s; }
.svc-card:nth-child(5)::before { animation-delay: 2.4s; }
.svc-card:nth-child(6)::before { animation-delay: 3.0s; }

/* Rotating all-sides border on val-cards and why-cards */
.val-card::before,
.why-card::before { display: none !important; }

.val-card,
.why-card {
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    conic-gradient(
      from var(--gi-spin),
      #FFD302 0deg, #00B9FC 50deg,
      transparent 80deg, transparent 280deg,
      #236BCF 310deg, #FFD302 360deg
    ) border-box !important;
  border: 2px solid transparent !important;
  animation: gi-border-spin 5s linear infinite !important;
}

.val-card:nth-child(1), .why-card:nth-child(1) { animation-delay: 0s   !important; }
.val-card:nth-child(2), .why-card:nth-child(2) { animation-delay: .8s  !important; }
.val-card:nth-child(3), .why-card:nth-child(3) { animation-delay: 1.6s !important; }
.val-card:nth-child(4), .why-card:nth-child(4) { animation-delay: 2.4s !important; }
.val-card:nth-child(5), .why-card:nth-child(5) { animation-delay: 3.2s !important; }
.val-card:nth-child(6), .why-card:nth-child(6) { animation-delay: 4.0s !important; }

/* Blue sweep on form card */
.ga-clean-form {
  position: relative;
  overflow: hidden;
}
.ga-clean-form::before {
  content: '';
  position: absolute;
  top: 0; left: -110%;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gi-sky) 45%, var(--gi-blue) 55%, transparent 100%);
  animation: gi-sweep 5s ease-in-out infinite;
  animation-delay: .5s;
  z-index: 3;
  pointer-events: none;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .svc-card::before,
  .val-card::before,
  .why-card::before,
  .ga-clean-form::before {
    display: none;
  }
}

/* ============================================================
   5. FORM SECTION IMPROVEMENTS — Premium color scheme
   ============================================================ */

/* Form card backgrounds */
#pm-surya-yojana .ga-clean-form,
#pm-surya-yojana .ga-clean-box.ga-clean-form,
#request-quote .ga-clean-form,
#request-quote .ga-clean-box.ga-clean-form {
  background: #EBF5FF !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 18px !important;
}

/* ── Blue header band at top of form card ── */
.ga-clean-form h3 {
  background: linear-gradient(135deg, #1a56b0 0%, #236BCF 50%, #0d9fe8 100%) !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  padding: 22px 28px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  border-radius: 0 !important;
  position: relative;
}

/* Yellow accent stripe under header */
.ga-clean-form h3::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FFD302 0%, #00B9FC 100%);
}

/* Subtitle/description text inside form head area */
.ga-clean-form > p {
  padding: 10px 28px 0 !important;
  color: #444 !important;
  font-size: 14px !important;
}

/* Form body padding (wraps the fields) */
.ga-clean-form form {
  padding: 20px 24px 24px !important;
}

/* ── Input / select / textarea ── */
.ga-clean-field input,
.ga-clean-field select,
.ga-clean-field textarea {
  border: 1.5px solid #BDD4EE !important;
  border-radius: 9px !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  background: #FFFFFF !important;
  color: #1a2d4d !important;
  width: 100% !important;
  transition: border-color .2s, background .2s, box-shadow .2s !important;
  appearance: auto;
  outline: none !important;
}

.ga-clean-field input:focus,
.ga-clean-field select:focus,
.ga-clean-field textarea:focus {
  border-color: #236BCF !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(35,107,207,.15) !important;
}

.ga-clean-field input::placeholder,
.ga-clean-field textarea::placeholder {
  color: #8aabcc !important;
}

.ga-clean-field textarea {
  resize: vertical;
  min-height: 90px !important;
}

/* ── Labels ── */
.ga-clean-field label {
  font-weight: 700 !important;
  color: #1a56b0 !important;
  margin-bottom: 5px !important;
  display: block !important;
  font-size: 13px !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
}

/* ── Submit button — full-width gradient ── */
.ga-clean-submit {
  width: 100% !important;
  background: linear-gradient(135deg, #236BCF 0%, #00B9FC 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #FFFFFF !important;
  letter-spacing: .03em !important;
  cursor: pointer !important;
  transition: opacity .2s, transform .2s, box-shadow .2s !important;
  box-shadow: 0 4px 18px rgba(35,107,207,.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.ga-clean-submit:hover {
  opacity: .92 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(35,107,207,.45) !important;
}

/* ── Note text below submit ── */
.ga-clean-note {
  font-size: 12px !important;
  color: #7a94b0 !important;
  margin-bottom: 12px !important;
  line-height: 1.5 !important;
}

/* ============================================================
   5b. BOOTSTRAP FORM CONTROLS (Rooftop-System, contact pages)
   ============================================================ */

.inquiry-form .form-control,
.inquiry-form .form-select,
.contact-form2 .form-control,
.contact-form2 .form-select,
.form-section .form-control,
.form-section .form-select,
.form-section textarea.form-control {
  border: 1.5px solid #BDD4EE !important;
  border-radius: 9px !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  background: #FFFFFF !important;
  color: #1a2d4d !important;
  transition: border-color .2s, background .2s, box-shadow .2s !important;
}

.inquiry-form .form-control:focus,
.inquiry-form .form-select:focus,
.contact-form2 .form-control:focus,
.contact-form2 .form-select:focus,
.form-section .form-control:focus,
.form-section .form-select:focus {
  border-color: #236BCF !important;
  box-shadow: 0 0 0 3px rgba(35,107,207,.15) !important;
  background: #FFFFFF !important;
}

.inquiry-form .form-control::placeholder,
.contact-form2 .form-control::placeholder {
  color: #8aabcc !important;
}

.inquiry-form .form-label,
.form-section .form-label {
  font-weight: 700 !important;
  color: #1a56b0 !important;
  font-size: 13px !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
}

/* Inquiry form card container */
.inquiry-form {
  background: #EBF5FF !important;
  border-radius: 18px !important;
  padding: 0 !important;
  box-shadow: 0 10px 32px rgba(35,107,207,.10) !important;
  position: relative;
  overflow: hidden;
}

/* Blue header band for inquiry-form h2 / h3 */
.inquiry-form h2,
.inquiry-form h3,
.form-section h2,
.form-section h3 {
  background: linear-gradient(135deg, #1a56b0 0%, #236BCF 50%, #0d9fe8 100%) !important;
  color: #FFFFFF !important;
  padding: 22px 28px !important;
  margin: 0 0 0 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  position: relative;
}

.inquiry-form h2::after,
.inquiry-form h3::after,
.form-section h2::after,
.form-section h3::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FFD302 0%, #00B9FC 100%);
}

/* Form body within inquiry-form */
.inquiry-form form,
.form-section .row {
  padding: 20px 24px 24px !important;
}

/* Submit button inside inquiry-form */
.inquiry-form .btn,
.inquiry-form button[type="submit"],
.form-section .btn,
.form-section button[type="submit"] {
  width: 100% !important;
  background: linear-gradient(135deg, #236BCF 0%, #00B9FC 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(35,107,207,.35) !important;
  cursor: pointer !important;
  transition: opacity .2s, transform .2s !important;
}

.inquiry-form .btn:hover,
.form-section button[type="submit"]:hover {
  opacity: .92 !important;
  transform: translateY(-2px) !important;
}

.inquiry-form::before {
  content: '';
  position: absolute;
  top: 0; left: -110%;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, transparent 0%, #00B9FC 45%, #236BCF 55%, transparent 100%);
  animation: gi-sweep 5s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}

@media (max-width: 767px) {
  .inquiry-form {
    padding: 22px 16px !important;
    border-radius: 14px !important;
  }
}

/* ============================================================
   6. PM SURYA YOJANA SECTION
   ============================================================ */

#pm-surya-yojana {
  background: linear-gradient(160deg, #EDF5FB 0%, #E6F0FA 100%) !important;
}

/* ============================================================
   7. SUBSIDY SECTION
   ============================================================ */

.subsidy-left {
  background: linear-gradient(160deg, var(--gi-blue) 0%, var(--gi-sky) 100%) !important;
  color: #FFFFFF !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 24px !important;
}

.subsidy-left .amount {
  font-size: clamp(26px, 5vw, 40px) !important;
  font-weight: 800 !important;
  color: var(--gi-yellow) !important;
  line-height: 1.1 !important;
}

.subsidy-left .amount-label {
  color: rgba(255,255,255,.88) !important;
  font-size: 14px !important;
  margin-top: 6px !important;
  text-align: center !important;
}

.subsidy-right {
  padding: 32px 28px !important;
}

.subsidy-list li {
  padding: 6px 0 !important;
  font-size: 14.5px !important;
}

.subsidy-list li i {
  color: var(--gi-sky) !important;
  margin-right: 8px !important;
}

/* ============================================================
   8. SECTION HEADER / LABEL IMPROVEMENTS
   ============================================================ */

.sub-label {
  display: inline-block;
  background: rgba(35,107,207,.08);
  color: var(--gi-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 30px;
  margin-bottom: 10px;
}

.sec-label {
  display: inline-block;
  color: var(--gi-sky);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ============================================================
   9. MOBILE — Visual hierarchy, spacing, readability
   ============================================================ */

@media (max-width: 767px) {

  /* Section padding uniformity */
  .section-pad,
  .space,
  .ga-clean-section,
  .subsidy-new,
  .yojana-section,
  .solar-services-new,
  .happy-installations-section,
  .brands-offer-section,
  .values-section,
  .why-section,
  .mv-section,
  .who-section,
  .alt-section,
  .services-section,
  .process-section {
    padding-top:    52px !important;
    padding-bottom: 52px !important;
  }

  /* Container side padding */
  .container {
    padding-left:  18px !important;
    padding-right: 18px !important;
  }

  /* Section heading sizes */
  .sec-title,
  .yojana-title,
  .section-title h2,
  .ga-clean-head h2 {
    font-size: clamp(22px, 6.5vw, 30px) !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  .ga-clean-head p,
  .sec-body,
  .sec-text {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  /* Card body padding */
  .svc-card .svc-body        { padding: 20px 18px !important; }
  .val-card, .why-card       { padding: 24px 18px !important; margin-bottom: 16px !important; }
  .brand-offer-card          { padding: 18px !important; min-height: 100px !important; }
  .process-card              { padding: 22px 18px !important; }

  /* Form card on mobile */
  .ga-clean-form,
  .ga-clean-box {
    padding: 22px 16px !important;
    border-radius: 14px !important;
  }

  /* Input font-size 16px prevents iOS zoom */
  .ga-clean-field input,
  .ga-clean-field select,
  .ga-clean-field textarea {
    font-size: 16px !important;
    padding: 13px 12px !important;
  }

  /* CTA spacing */
  .hero-cta-button,
  .th-btn,
  .subsidy-btn,
  .subsidy-btn-outline,
  .ga-clean-submit {
    margin-bottom: 10px !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Subsidy section mobile stack */
  .subsidy-left {
    padding: 28px 20px !important;
    border-radius: 0 !important;
  }

  .subsidy-right {
    padding: 24px 18px !important;
  }

  /* Yojana panel */
  .yojana-panel {
    padding: 24px 16px !important;
    border-radius: 14px !important;
  }

  /* Title area spacing */
  .title-area,
  .ga-clean-head,
  .section-title,
  .brands-offer-title-wrap {
    margin-bottom: 28px !important;
    padding-left:  4px !important;
    padding-right: 4px !important;
  }

  /* Stats band */
  .stat-item {
    padding: 20px 16px !important;
  }
  .stat-item .number {
    font-size: 32px !important;
    font-weight: 800 !important;
  }

  /* Counter card */
  .counter-card {
    padding: 24px 18px !important;
    margin-bottom: 12px !important;
  }

  /* Hero CTA text alignment */
  .hero-text-content {
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 12px !important;
  }

  /* WhatsApp button — ensure it does not overlap main content */
  .floating-whatsapp-wrap {
    bottom: 20px !important;
    right: 14px !important;
  }
}

/* Small phones (360–430px) */
@media (max-width: 430px) {

  .ga-clean-head h2,
  .yojana-title,
  .section-title h2,
  .sec-title {
    font-size: clamp(20px, 6vw, 26px) !important;
  }

  .svc-card .svc-body        { padding: 18px 14px !important; }
  .val-card, .why-card       { padding: 20px 14px !important; }
  .ga-clean-form, .ga-clean-box { padding: 18px 14px !important; }

  .subsidy-left .amount { font-size: 28px !important; }

  /* Benefit grid single column */
  .benefit-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   10. ABOUT PAGE — alt-section image
   ============================================================ */

.alt-img {
  width: 100%;
  border-radius: var(--gi-radius-lg);
  box-shadow: var(--gi-shadow-md);
}

.who-img-wrap img,
.about-video-wrap {
  border-radius: var(--gi-radius-lg) !important;
  overflow: hidden !important;
}

/* ============================================================
   11. HAPPY INSTALLATIONS SECTION
   ============================================================ */

.happy-installation-card {
  border-radius: var(--gi-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--gi-shadow-sm) !important;
}

.happy-installation-card img {
  border-radius: var(--gi-radius-md) !important;
}

/* ============================================================
   12. BRANDS SECTION CARDS
   ============================================================ */

.brand-offer-card {
  background: #FFFFFF !important;
  border-color: var(--gi-border) !important;
}

.brand-offer-card:hover {
  border-color: var(--gi-sky) !important;
  box-shadow: var(--gi-shadow-md) !important;
}

/* ============================================================
   13. PROCESS / WORKING SECTION
   ============================================================ */

.process-card {
  background: #FFFFFF !important;
  border-color: var(--gi-border) !important;
}

/* ============================================================
   13b. PROJECT GALLERY — card polish
   ============================================================ */

.project-gallery-card {
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: var(--gi-shadow-sm) !important;
  border: 1.5px solid var(--gi-border) !important;
  transition: transform .3s, box-shadow .3s !important;
}

.project-gallery-card:hover {
  transform: scale(1.02) !important;
  box-shadow: var(--gi-shadow-md) !important;
}

/* ============================================================
   13c. CONTACT PAGE
   ============================================================ */

.contact-form2 {
  background: #EBF5FF !important;
  border-radius: var(--gi-radius-lg) !important;
  padding: 0 !important;
  box-shadow: var(--gi-shadow-md) !important;
  position: relative;
  overflow: hidden;
}

/* Blue header band for contact form */
.contact-form2 h3 {
  background: linear-gradient(135deg, #1a56b0 0%, #236BCF 50%, #0d9fe8 100%) !important;
  color: #FFFFFF !important;
  padding: 22px 28px !important;
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  position: relative;
}

.contact-form2 h3::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FFD302 0%, #00B9FC 100%);
}

.contact-form2 .row {
  padding: 20px 24px 24px !important;
}

.contact-form2 .form-btn .th-btn {
  width: 100% !important;
  background: linear-gradient(135deg, #236BCF 0%, #00B9FC 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(35,107,207,.35) !important;
}

.contact-form2::before {
  content: '';
  position: absolute;
  top: 0; left: -110%;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gi-sky) 45%, var(--gi-blue) 55%, transparent 100%);
  animation: gi-sweep 5s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}

.contact-form2 .form-control,
.contact-form2 .form-select {
  border: 1.5px solid #C8D8EE !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  background: #F8FBFF !important;
  color: #111 !important;
}

.contact-form2 .form-control:focus,
.contact-form2 .form-select:focus {
  border-color: var(--gi-blue) !important;
  box-shadow: 0 0 0 3px rgba(35,107,207,.12) !important;
  background: #FFFFFF !important;
}

.contact-map iframe {
  border-radius: var(--gi-radius-md) !important;
  border: 2px solid var(--gi-border) !important;
}

@media (max-width: 767px) {
  .contact-form2 {
    padding: 22px 16px !important;
    border-radius: 14px !important;
  }
}

/* ============================================================
   14. DESKTOP — minor improvements (no regressions)
   ============================================================ */

@media (min-width: 992px) {

  .ga-clean-form {
    padding: 36px 32px !important;
  }

  .yojana-panel {
    padding: 44px 40px !important;
  }
}

/* ============================================================
   15. UTILITY OVERRIDES — background safety
   ============================================================ */

/* Ensure stat-band dark blue is never overridden */
.stats-band,
.bg-theme,
.theme-bg {
  background: #236BCF !important;
  color: #FFFFFF !important;
}

/* Light gray override only for non-dark sections */
.bg-light-section:not(.mv-section):not(.video-section) {
  background: var(--gi-lightblue) !important;
}