/* =========================
   FULL FOOTER CSS (for your provided HTML)
   Paste this into your stylesheet (or inside a <style> block)
   ========================= */

/* --- Base / variables (quick tweaks) --- */
:root{
  --footer-max-width: 1440px;
  --footer-gutter: 40px;
  --muted: #111111;
  --border: #ddd;
  --social-bg: #f5f5f5;
  --whatsapp-green: #075E54;
  --shadow: 0 6px 20px rgba(15,23,42,0.12);
}

/* ===== FOOTER LAYOUT ===== */
.footer {
  margin-top: 30px;
  width: 100%;
  font-family: 'Lato', sans-serif;
  color: var(--muted);
  line-height: 1.45;
}

/* Top section with gray background */
.footer-top{
  background: #f0f0f0;
  padding: 40px 0;
  text-align: center;
}

/* container inside top/bottom for consistent width */
.footer-content {
  max-width: var(--footer-max-width);
  margin: 0 auto;
  padding: 0 var(--footer-gutter);
  width: 100%;
}

/* Heading + description in top */
.footer-main-title{
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 3px;
  margin-bottom: 12px;
  text-align:left;
  color: #000;
  text-transform: uppercase;
}

.footer-description{
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: #111;
  margin: 0 auto;
  text-align:left;
  max-width: 100%;
  letter-spacing: 0.3px;
}

/* Bottom section */
.footer-bottom{
  background: #f8f8f6;
  padding: 40px 0;
}

/* ===== COLUMNS ===== */
.footer-columns{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 180px;
}

/* column basics */
.footer-column{
  display: flex;
  flex-direction: column;
  padding: 0 30px;
  position: relative;
}

/* full-height vertical divider using pseudo element */
.footer-column::after{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

/* first / last adjustments */
.footer-column:first-child{ padding-left: 0; }
.footer-column:last-child{ padding-right: 0; }
.footer-column:last-child::after{ display: none; }

/* headings + text in columns */
.footer-column h4{
  color: #000;
  font-size: 14px;
  margin-top: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-bottom: 15px;
  text-transform: uppercase;
  transition: color .2s ease;
}

.footer-column p{
  font-size: 14px;
  font-weight: 300;
  color: #111;
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0.2px;
}

/* logo */
.footer-column .logo img{
  height: 40px;
  display: block;
  margin-bottom: 15px;
  object-fit: contain;
}

/* footer links column */
.footer-links { display: flex; flex-direction: column;margin-top: -20px; }
.footer-link{
  font-size: 14px;
  font-weight: 300;
  color: #111;
  text-decoration: none;
  margin-bottom: 6px;
  display: block;
  transition: color .18s ease;
}
.footer-link:hover{ color: #333; }

/* Social icons area */
.social-icons{
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 8px;
}

/* default social anchor */
.social-icons a,
.social-icons .social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--social-bg);
  border-radius: 50%;
  color: #111;
  text-decoration: none;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}

/* default hover */
.social-icons a:hover,
.social-icons .social-link:hover{
  background: #e8e8e8;
  transform: translateY(-2px);
  color: #111;
}

/* svg sizing inside icons */
.social-icons svg{
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}

/* allow for nested .social-icons in markup (defensive) */
.footer-column .social-icons .social-icons{ gap: 8px; }

/* ===== WhatsApp specific (brand-safe) ===== */
/* If you use the filled SVG (green circle + white glyph), keep background transparent so it shows as intended */
.social-icons .social-link.whatsapp,
.social-icons a[aria-label="WhatsApp"],
.social-icons a.whatsapp {
  /* if you use filled SVG, let the svg draw the circle (transparent bg) */
  background: transparent;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  box-shadow: none;
  color: inherit;
}

/* If you prefer to use the monochrome SVG (fill=currentColor) and want circle bg, use this rule instead:
.social-icons a.whatsapp { background: var(--social-bg); }
*/

/* hover/focus for accessibility */
.social-icons a.whatsapp:hover,
.social-icons a[aria-label="WhatsApp"]:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(7,94,84,0.12);
}

/* The filled SVG we suggested contains its own green circle and white glyph,
   so ensure svg scales to icon container when used */
.social-icons a.whatsapp svg,
.social-icons a[aria-label="WhatsApp"] svg,
.social-icons .social-link.whatsapp svg{
  width: 36px;
  height: 36px;
  display: block;
}

/* for accessibility focus */
.social-icons a.whatsapp:focus,
.social-icons a[aria-label="WhatsApp"]:focus{
  outline: 3px solid rgba(7,94,84,0.12);
  outline-offset: 3px;
}

.whatsapp-icon
{
  width:170px;
  padding: 5px 0px 0px 5px;
  position:fixed;
  bottom:20px;
  right:20px;
  background-color:#f7f7f7;
  height:35px;
  display: flex;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.whatsapp-icon img{
  height: 18px;
  width: 18px;

}

.whatsapp-icon span {
  font-size:14px;
  width: 125px;
}

.whatsapp-icon a {
  display: flex;
  align-items: center;
 
  gap: 8px;
  text-decoration: none;
  color:black; /* WhatsApp green */
  font-weight: 500;
  font-size: 14px;
}

.whatsapp-icon img {
  width: 24px;
  height: 24px;
  display: block;
}



/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .footer-content { padding: 0 28px; }
  .footer-columns { min-height: auto; }
}

@media (max-width: 768px) {
  .footer-content { padding: 0 20px; }
  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    min-height: auto;
  }

  /* remove inner-right border on even columns so layout reads better */
  .footer-column::after { display: block; }
  .footer-column:nth-child(2n)::after { display: none; }
  .footer-column:nth-child(2n) { padding-right: 0; }
}

@media (max-width: 480px) {
  .footer-content { padding: 0 16px; }
  .footer-columns {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .footer-column { padding: 0; margin: 0; }
  .footer-column::after { display: none; }

  /* tighten spacing for mobile */
  .footer-column > * { margin-top: -17px; margin-bottom: 8px; }
  .footer-column h4 { font-size: 12px; margin-bottom: 6px; }
  .footer-column p, .footer-link, .footer-description { font-size: 12px; line-height: 1.35; }

  /* center social icons & WhatsApp on mobile */
  .social-icons { justify-content: center; }
  .social-icons a.whatsapp,
  .social-icons a[aria-label="WhatsApp"],
  .social-icons .social-link.whatsapp {
    width: 44px;
    height: 44px;
  }
  .social-icons a.whatsapp svg,
  .social-icons a[aria-label="WhatsApp"] svg {
    width: 44px;
    height: 44px;
  }
}

/* ===== Utility / optional: ensure chat-pill or other items don't hide icons ===== */
.footer .chat-pill { z-index: 10; }

/* End Footer CSS */