/* =========================================================
   ANWAR & SONS FOOTER
========================================================= */

.as-footer,
.as-footer * {
  box-sizing: border-box;
}


.as-footer {

  --footer-primary: #2654b1;
  --footer-primary-dark: #1e4799;

  --footer-bg: #f5f8ff;

  --footer-text: #465269;
  --footer-heading: #17233b;

  --footer-border: #dce5f5;

  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: var(--footer-bg);

  font-family: inherit;

}



/* =========================================================
   MAIN FOOTER
========================================================= */

.as-footer-main {

  width: 100%;

  padding: 70px 0 60px;

}


.as-footer-container {

  width: 100%;
  max-width: 1600px;

  margin: 0 auto;

  padding: 0 40px;

  display: grid;

  grid-template-columns:
    1.4fr
    .75fr
    .95fr
    1.25fr;

  gap: clamp(35px, 4vw, 75px);

}



/* =========================================================
   LOGO / BRAND
========================================================= */

.as-footer-brand {

  max-width: 390px;

}


.as-footer-logo {

  display: inline-flex;

  align-items: center;

  margin-bottom: 24px;

  text-decoration: none;

}


.as-footer-logo img {

  display: block;

  width: auto;

  height: auto;

  max-width: 205px;

  max-height: 65px;

  object-fit: contain;

}



.as-footer-about {

  margin: 0 0 22px;

  max-width: 360px;

  color: var(--footer-text);

  font-size: 14px;

  font-weight: 400;

  line-height: 1.8;

}



/* ABOUT LINK */

.as-footer-about-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--footer-primary) !important;

  text-decoration: none !important;

  font-size: 14px;

  font-weight: 600;

  transition:
    color .25s ease,
    gap .25s ease;

}


.as-footer-about-link svg {

  width: 17px;
  height: 17px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;

}


.as-footer-about-link:hover {

  color: var(--footer-primary-dark) !important;

  gap: 12px;

}



/* =========================================================
   COLUMNS
========================================================= */

.as-footer-column h3 {

  position: relative;

  margin: 0 0 24px;

  padding-bottom: 13px;

  color: var(--footer-heading);

  font-size: 16px;

  font-weight: 700;

  line-height: 1.3;

}



/* Small blue line */

.as-footer-column h3::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 32px;
  height: 2px;

  background: var(--footer-primary);

  border-radius: 20px;

}



/* =========================================================
   LINKS
========================================================= */

.as-footer-links {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 5px;

}


.as-footer-links a {

  position: relative;

  display: inline-flex;

  align-items: center;

  padding: 6px 0;

  color: var(--footer-text) !important;

  background: transparent !important;

  text-decoration: none !important;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.5;

  transition:
    color .25s ease,
    padding-left .25s ease;

}



/* Small arrow */

.as-footer-links a::before {

  content: "";

  width: 0;

  height: 1px;

  margin-right: 0;

  background: var(--footer-primary);

  opacity: 0;

  transition:
    width .25s ease,
    margin-right .25s ease,
    opacity .25s ease;

}


.as-footer-links a:hover {

  color: var(--footer-primary) !important;

  padding-left: 2px;

}


.as-footer-links a:hover::before {

  width: 12px;

  margin-right: 7px;

  opacity: 1;

}



/* =========================================================
   CONTACT
========================================================= */

.as-footer-contact {

  min-width: 0;

}


.as-contact-item {

  display: flex;

  align-items: flex-start;

  gap: 13px;

  margin-bottom: 18px;

}


.as-contact-item:last-child {

  margin-bottom: 0;

}



/* Contact Icon */

.as-contact-icon {

  width: 35px;
  height: 35px;

  min-width: 35px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-top: 2px;

  border-radius: 50%;

  background: rgba(38, 84, 177, .08);

  color: var(--footer-primary);

}


.as-contact-icon svg {

  width: 17px;
  height: 17px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;

}



/* Contact Label */

.as-contact-label {

  display: block;

  margin-bottom: 3px;

  color: var(--footer-heading);

  font-size: 13px;

  font-weight: 600;

}



/* Contact Text */

.as-contact-item p {

  margin: 0;

  color: var(--footer-text);

  font-size: 13px;

  line-height: 1.65;

}


.as-contact-item a {

  color: var(--footer-text) !important;

  text-decoration: none !important;

  transition: color .25s ease;

}


.as-contact-item a:hover {

  color: var(--footer-primary) !important;

}



/* =========================================================
   COPYRIGHT BAR
========================================================= */

.as-footer-bottom {

  width: 100%;

  background: var(--footer-primary);

}


.as-footer-bottom-inner {

  width: 100%;
  max-width: 1600px;

  min-height: 62px;

  margin: 0 auto;

  padding: 14px 40px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

}



/* Copyright */

.as-footer-bottom p {

  margin: 0;

  color: rgba(255,255,255,.88);

  font-size: 13px;

  font-weight: 400;

}



/* Legal links */

.as-footer-legal {

  display: flex;

  align-items: center;

  gap: 14px;

}


.as-footer-legal a {

  color: rgba(255,255,255,.88) !important;

  text-decoration: none !important;

  font-size: 13px;

  transition: color .25s ease;

}


.as-footer-legal a:hover {

  color: #ffffff !important;

}


.as-footer-legal span {

  width: 1px;
  height: 13px;

  background: rgba(255,255,255,.35);

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  .as-footer-main {

    padding: 60px 0 50px;

  }


  .as-footer-container {

    padding: 0 28px;

    grid-template-columns:
      1.3fr
      1fr;

    gap: 45px 70px;

  }


  .as-footer-brand {

    max-width: 440px;

  }


  .as-footer-bottom-inner {

    padding-left: 28px;

    padding-right: 28px;

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .as-footer-main {

    padding: 48px 0 38px;

  }


  .as-footer-container {

    padding: 0 20px;

    grid-template-columns: 1fr;

    gap: 36px;

  }


  .as-footer-brand {

    max-width: none;

  }


  .as-footer-logo {

    margin-bottom: 20px;

  }


  .as-footer-logo img {

    max-width: 175px;

    max-height: 58px;

  }


  .as-footer-about {

    max-width: 100%;

    font-size: 13.5px;

    line-height: 1.75;

  }


  .as-footer-column h3 {

    margin-bottom: 17px;

  }


  .as-footer-links {

    gap: 2px;

  }


  .as-footer-links a {

    width: 100%;

    padding: 7px 0;

  }


  .as-contact-item {

    margin-bottom: 17px;

  }


  /* Copyright */

  .as-footer-bottom-inner {

    min-height: auto;

    padding: 18px 20px;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

  }


  .as-footer-bottom p {

    line-height: 1.6;

  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .as-footer-container {

    padding-left: 15px;

    padding-right: 15px;

  }


  .as-footer-bottom-inner {

    padding-left: 15px;

    padding-right: 15px;

  }


  .as-footer-logo img {

    max-width: 160px;

  }

}