/* ==========================================================================
   GO VETTY - FOOTER STYLES
   ========================================================================== */

/* Main Outer Footer Element (<footer class="frame-54">) */
footer,
footer.frame-54 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  align-items: center;
  gap: clamp(50px, 4.167vw, 80px);
  padding: clamp(55px, 4.583vw, 88px) clamp(43.75px, 3.646vw, 70px) clamp(30px, 2.5vw, 48px);
  position: relative;
  background-color: #ffffff;
  border-top: 1px solid #ececec;
  box-sizing: border-box;
  max-width: clamp(1100px, 91.667vw, 1760px);
  margin: 0 auto;
}

/* Inner Layout Container (<div class="frame-55">) */
footer .frame-55 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
}

/* Footer Navigation Columns (<div/nav class="frame-56">) */
footer .frame-56 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12.5px, 1.042vw, 20px);
  position: relative;
  flex: 0 0 auto;
}

footer .frame-56 img {
  width: 245px;
  height: auto;
}

/* Branding Logo Image (<img class="group-3">) */
footer .group-3 {
  position: relative;
  width: clamp(134.38px, 11.198vw, 215px);
  height: clamp(56.88px, 4.74vw, 91px);
  object-fit: contain;
}

/* Column Titles & Tagline Header (<div class="text-wrapper-28">) */
footer .text-wrapper-28 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Inter", Helvetica, sans-serif;
  font-weight: 600;
  color: #600209;
  font-size: clamp(12.5px, 1.042vw, 20px);
  letter-spacing: -0.25px;
  line-height: clamp(18.75px, 1.562vw, 30px);
  white-space: nowrap;
}

/* Tagline Paragraph (<p class="text-wrapper-26 footer-tagline">) */
footer .text-wrapper-26 {
  position: relative;
  width: auto;
  margin-top: -1px;
  margin-bottom: 0;
  font-family: "Inter", Helvetica, sans-serif;
  font-weight: 500;
  color: #333333;
  font-size: clamp(12.5px, 1.042vw, 20px);
  letter-spacing: -0.2px;
  line-height: clamp(15px, 1.25vw, 24px);
  white-space: nowrap;
}

/* Nav Links Sub-Container (<div class="frame-57">) */
footer .frame-57 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(7.5px, 0.625vw, 12px);
  position: relative;
  flex: 0 0 auto;
}

/* Nav Link Anchors Styling */
footer .frame-57 a {
  font-family: "Inter", Helvetica, sans-serif;
  font-weight: 500;
  color: #000000;
  font-size: clamp(12.5px, 1.042vw, 20px);
  letter-spacing: -0.2px;
  line-height: clamp(15px, 1.25vw, 24px);
  text-decoration: none;
  transition: color 0.2s ease;
}

footer .frame-57 a:hover {
  color: #600209;
}

/* "FOLLOW US" Header (<div class="text-wrapper-27">) */
footer .text-wrapper-27 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Inter", Helvetica, sans-serif;
  font-weight: 600;
  color: #600209;
  font-size: clamp(12.5px, 1.042vw, 20px);
  letter-spacing: -0.25px;
  line-height: clamp(18.75px, 1.562vw, 30px);
  white-space: nowrap;
}

/* Social & Localized Identity Block (<div class="frame-58">) */
footer .frame-58 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12.5px, 1.042vw, 20px);
  position: relative;
  flex: 0 0 auto;
}

/* Social & Canadian Flag Sub-Wrapper (<div class="frame-7">) */
footer .frame-7 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12.5px, 1.042vw, 20px);
  position: relative;
  flex: 0 0 auto;
}

/* Social Icons Banner (<img class="frame-59">) */
footer .frame-59 {
  position: relative;
  width: clamp(130px, 10.833vw, 208px);
  height: clamp(20px, 1.667vw, 32px);
}

/* Canadian Flag Row Wrapper (<div class="frame-60">) */
footer .frame-60 {
  display: inline-flex;
  align-items: center;
  gap: clamp(7.5px, 0.625vw, 12px);
  position: relative;
  flex: 0 0 auto;
}

/* Canadian Flag Icon (<img class="fi-5">) */
footer .fi-5 {
  position: relative;
  width: clamp(25px, 2.083vw, 40px);
  height: clamp(26.25px, 2.188vw, 42px);
}

/* Support Text Wrapper (<div class="frame-61">) */
footer .frame-61 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

/* "Proudly Canadian." Heading (<div class="text-wrapper-30">) */
footer .text-wrapper-30 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Inter", Helvetica, sans-serif;
  font-weight: 600;
  color: #600209;
  font-size: clamp(12.5px, 1.042vw, 20px);
  letter-spacing: -0.2px;
  line-height: clamp(15px, 1.25vw, 24px);
  white-space: nowrap;
}

/* "Service & support in Canada" Subtext (<p class="text-wrapper-29">) */
footer .text-wrapper-29 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  margin: 0;
  font-family: "Inter", Helvetica, sans-serif;
  font-weight: 500;
  color: #000;
  font-size: clamp(12.5px, 1.042vw, 20px);
  letter-spacing: -0.18px;
  line-height: clamp(12.5px, 1.042vw, 20px);
  white-space: nowrap;
}

/* Copyright Paragraph (<p class="copyright">) */
footer .copyright {
  position: relative;
  width: fit-content;
  font-family: "Inter", Helvetica, sans-serif;
  font-weight: 400;
  color: #777777;
  font-size: clamp(8.75px, 0.729vw, 14px);
  letter-spacing: -0.18px;
  line-height: clamp(12.5px, 1.042vw, 20px);
  white-space: nowrap;
}

/* ==========================================================================
   NOTE ON THE OLD "MID-SIZE DESKTOPS & LAPTOPS (1200px - 1599px)" BLOCK
   ==========================================================================
   Removed. It re-padded the footer and re-sized all the link/label text
   between 1200-1599px with !important overrides — all of that now happens
   continuously via the clamp() values baked into the base rules above, so
   the step-based override is redundant.
   ========================================================================== */

/* ==========================================================================
   TABLET & MOBILE RESPONSIVE MEDIA QUERIES — unchanged, out of scope
   ========================================================================== */

@media (max-width: 1024px) {
  footer,
  footer.frame-54 {
    padding: 60px 40px 40px;
    gap: 60px;
  }

  footer .frame-55 {
    flex-wrap: wrap;
    gap: 40px;
  }
}

@media (max-width: 767px) {
  footer,
  footer.frame-54 {
    padding: 48px 20px 32px;
    gap: 40px;
  }

  footer .frame-55 {
    flex-direction: column;
    gap: 32px;
  }

  footer .frame-56,
  footer .frame-58 {
    width: 100%;
  }

  footer .frame-59 {
	width: auto;
  }
}