:root {
  --footer-content-font-family: "Inter", sans-serif;
  --footer-header-font-family: "Outfit", sans-serif;
  --footer-primary: #1f62ff;
  --footer-link-text-color: #475467;
  --footer-secondary-text-color: #667085;
  --footer-border: #d3d6dc;
}

/* footer */
footer {
  padding: 64px 0px 48px 0px;
  position: relative;
  font-family: var(--footer-content-font-family);
}
footer .inner .top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
footer .inner .top .right {
  display: flex;
  justify-content: end;
}
footer .inner .top .right h5 {
  font-family: var(--footer-content-font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;

  color: var(--footer-primary);
  margin-bottom: 16px;
}
footer .inner .top .right .image {
  margin-bottom: 16px;
}
footer .inner .top .right .image:last-child {
  margin-bottom: 0px;
}
footer .inner .top .left .logo img {
  min-height: 55px;
  max-height: 55px;
  object-fit: contain;
}
footer .inner .top .left .logo {
  margin-bottom: 32px;
}
footer .inner .top .left p {
  margin-bottom: 32px;
  font-family: var(--footer-content-font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;

  color: var(--footer-link-text-color);
}
footer .inner .top .left ul {
  display: flex;
  align-items: center;
  gap: 32px;
}
footer .inner .top .left ul li a {
  font-family: var(--footer-header-font-family);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;

  color: var(--footer-link-text-color);
  transition: 0.3s;
}
footer .inner .top .left ul li a:hover {
  color: var(--footer-primary);
}
footer .copyright {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--footer-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
footer .copyright .icons {
  display: flex;
  align-items: center;
  gap: 24px;
}
footer .copyright .icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
footer .copyright .icons a svg path {
  transition: 0.3s;
}
footer .copyright .icons a:hover svg path {
  fill: var(--footer-primary);
}
footer .copyright p {
  font-family: var(--footer-content-font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--footer-secondary-text-color);
}