/* ============================================================
   FILE: css/variables.css
   EDIT THIS FILE TO CHANGE COLORS AND FONTS
   
   Just change the color codes below.
   Everything on the website will update automatically!
============================================================ */

:root {

  /* =====================
     COLORS — Edit Here
  ===================== */
  --dark-green:   #0d2818;   /* Very dark green  — used in topbar, footer */
  --main-green:   #1a4731;   /* Main green       — used in header, sections */
  --mid-green:    #2d6a4f;   /* Medium green     — used in buttons hover, accents */
  --lime:         #b5e550;   /* Lime yellow      — used in buttons, highlights */
  --lime-hover:   #94c230;   /* Lime hover       — button hover color */
  --cream:        #f4f0e6;   /* Warm cream       — light text on dark backgrounds */
  --off-white:    #fafaf7;   /* Off white        — page background */
  --black-soft:   #1c1c1c;   /* Soft black       — headings */
  --text-dark:    #2a2a2a;   /* Dark text        — body text */
  --text-grey:    #6b7280;   /* Grey text        — secondary / muted text */
  --border-color: #e2ddd4;   /* Border color     — card borders, dividers */
  --whatsapp:     #25d366;   /* WhatsApp green   — WhatsApp button */

  /* =====================
     FONTS — Edit Here
  ===================== */
  --font-heading: 'Syne', sans-serif;    /* Used for headings and buttons */
  --font-body:    'DM Sans', sans-serif; /* Used for body text */

}


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

.hero__inner,
.hero-grid,
.lead__grid{
display:flex !important;
flex-direction:column !important;
}

.hero__content,
.hero__form,
.form-card,
.lead-form{
width:100% !important;
max-width:100% !important;
flex:0 0 100% !important;
}

.form-card,
.hero__form{
margin-top:20px !important;
padding:20px !important;
}

.sp-form,
.sp-form .form-field,
.sp-form input,
.sp-form select,
.sp-form button{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}

h1{
font-size:42px !important;
line-height:1.1 !important;
word-break:break-word !important;
}

body,html{
overflow-x:hidden !important;
}
}