footer{
  background:#111 !important;
  color:#fff !important;
  font-family:"Inter", sans-serif;
  width:100%;
  position:relative;
  z-index:10;


  /* safe padding */
  padding:clamp(26px, 4vw, 64px) 20px 18px;


  /* kill horizontal overflow caused by grids/icons */
  overflow-x:hidden;
}


/* Main container */
footer .footer-container{
  max-width:1200px;
  margin:0 auto;


  display:grid;
  grid-template-columns:1fr; /* mobile default */
  gap:22px;
  align-items:start;


  /* critical: prevents grid overflow */
  min-width:0;
}


/* =========================
   BRAND (Logo + Tagline)
========================= */
footer .footer-brand{
  /* mobile: centered */
  text-align:center;
  width:100%;
  min-width:0;
}


/* Force brand images side-by-side without extra wrapper */
footer .footer-brand img {
  height: clamp(60px, 8vw, 120px); /* bigger than before */
  width: auto;
  object-fit: contain;

  display: inline-block;
  vertical-align: middle;

  margin: 0 6px;
}

/* Tagline text */
footer .footer-brand p{
  margin:10px 0 0;
  font-size:clamp(12px, 1.15vw, 14px);
  line-height:1.4;
  color:#d3d3d3;
}


/* =========================
   SECTIONS (Quick Links / Contact / Follow)
========================= */
footer .footer-links,
footer .footer-contact,
footer .footer-social{
  width:100%;
  min-width:0;
}


/* Section titles */
footer h4{
  margin:0 0 10px;
  font-size:clamp(14px, 1.2vw, 16px);
  font-weight:800;
  color:#fff;
  letter-spacing:.4px;


  /* mobile centered */
  text-align:center;
}


/* QUICK LINKS */
footer .footer-links ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;


  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 28px;


  /* mobile centered */
  justify-items:center;


  min-width:0;
}
footer .footer-links ul li{ margin:0; padding:0; }
footer .footer-links ul li::marker{ content:""; }


footer .footer-links ul li a{
  color:#cfcfcf;
  text-decoration:none;
  font-weight:600;
  font-size:clamp(13px, 1.1vw, 14px);
  display:inline-block;
  transition:color .25s ease, transform .2s ease;
  white-space:nowrap;
}
footer .footer-links ul li a:hover{
  color:#ffcc00;
  transform:translateY(-1px);
}


/* CONTACT */
footer .footer-contact{
  text-align:center;
}
footer .footer-contact p{
  margin:3px 0;
  color:#cfcfcf;
  font-weight:400;
  font-size:clamp(12.6px, 1.1vw, 14px);
  line-height:1.35;
  word-break:break-word;
}


/* FOLLOW US */
footer .footer-social{
  text-align:center;
}


footer .footer-social a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;


  width:clamp(34px, 3.2vw, 40px);
  height:clamp(34px, 3.2vw, 40px);


  margin:0 6px;
  background:#222;
  color:#fff;
  border-radius:50%;
  font-size:clamp(15px, 1.4vw, 18px);
  text-decoration:none;


  vertical-align:middle;
  transition:transform .25s ease, background .25s ease, color .25s ease;
}


footer .footer-social a:hover{
  background:linear-gradient(135deg, #ff4c4c, #ffcc00);
  color:#111;
  transform:scale(1.12);
}


/* ✅ ICON SAFETY: ensures Font Awesome <i> glyphs actually render */
footer .footer-social a i{
  display:inline-block;
  line-height:1;
  font-size:inherit;
  color:inherit;
}


/* =========================
   BOTTOM COPYRIGHT
========================= */
footer .footer-bottom{
  max-width:1200px;
  margin:20px auto 0;
  text-align:center;
  font-size:clamp(11.5px, 1.0vw, 13px);
  color:#9a9a9a;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:12px;


  overflow-wrap:anywhere;
}


/* =========================
   DESKTOP: 4 COLUMN LAYOUT
========================= */
@media (min-width: 900px){
  footer .footer-container{
    grid-template-columns:
      minmax(260px, 1.35fr)
      minmax(200px, 1fr)
      minmax(240px, 1fr)
      minmax(200px, 0.95fr);
    column-gap:42px;
    row-gap:22px;
    align-items:start;
  }


  footer .footer-brand{ text-align:left; }
  footer h4{ text-align:left; }
  footer .footer-links ul{ justify-items:start; }
  footer .footer-contact{ text-align:left; }
  footer .footer-social{ text-align:left; }


  footer .footer-bottom{
    grid-column:1 / -1;
  }
}


/* =========================
   TABLET: 2 columns
========================= */
@media (min-width: 620px) and (max-width: 899px){
  footer .footer-container{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:28px;
    row-gap:22px;
  }


  footer .footer-brand{ grid-column:1 / -1; }
  footer .footer-social{ grid-column:1 / -1; }
}


/* =========================
   SMALL PHONES: stack + 1 column links if needed
========================= */
@media (max-width: 380px){
  footer .footer-links ul{
    grid-template-columns:1fr;
    gap:8px;
  }
}