.footer-wrap {
  --layout-vw:min(1vw,16px);
  zoom:1;
}

.footer-card {
  position:relative;
  z-index:2;
  justify-content:space-between;
  text-align:left;
}

.footer-wrap .col {
  min-width:0;
  text-align:left;
}

.footer-wrap .col h4 {
  display:inline-block;
  color:#fff;
}

.footer-wrap .col a {
  display:block;
  text-decoration:none;
}

.footer-wrap .socials {
  display:flex;
  justify-content:flex-start;
}

.footer-wrap .socials a {
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s ease,box-shadow .25s ease;
}

.footer-wrap .socials a:hover {
  transform:translateY(-4px);
  box-shadow:0 6px 14px #0005;
}

.footer-wrap {
  position: relative;
  z-index: 2;
  min-height: min(729px, calc(37.969 * var(--layout-vw)));
  padding: min(325px, calc(16.927 * var(--layout-vw))) 24px min(93px, calc(4.844 * var(--layout-vw)));
  margin-top: 0;
  overflow: hidden;
  background:
    url('../images/footer-bg.png') center top / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(26, 43, 54, .018) 0 2px, transparent 2px 6px), repeating-linear-gradient(0deg, rgba(26, 43, 54, .014) 0 1px, transparent 1px 5px),
    #fff;
}

.footer-wrap .footer-aeroplane {
  position: absolute;
  z-index: 3;
  top: 31.8%;
  right: 2.3%;
  width: min(449px, calc(23.385 * var(--layout-vw)));
  height: auto;
  pointer-events: none;
}

.footer-wrap .footer-card {
  display: grid;
  grid-template-columns: 28.3fr 38fr 33.7fr;
  width: min(1345px, calc(70.052 * var(--layout-vw)));
  max-width: 1345px;
  min-height: min(312px, calc(16.25 * var(--layout-vw)));
  margin: 0 auto;
  padding: min(44px, calc(2.292 * var(--layout-vw))) min(95px, calc(4.948 * var(--layout-vw)));
  gap: min(64px, calc(3.333 * var(--layout-vw)));
  align-items: flex-start;
  border: min(15px, calc(.781 * var(--layout-vw))) solid #fff;
  border-radius: min(60px, calc(3.125 * var(--layout-vw)));
  background: #24384b;
}

.footer-wrap .col {
  flex: 1 1 0;
}

.footer-wrap .col:nth-child(2) {
  flex-grow: 1.28;
}

.footer-wrap .col h4 {
  position: relative;
  z-index: 0;
  width: fit-content;
  min-width: 185px;
  margin-bottom: min(12px, calc(.625 * var(--layout-vw)));
  padding: min(5px, calc(.26 * var(--layout-vw))) min(12px, calc(.625 * var(--layout-vw)));
  border-radius: min(11px, calc(.573 * var(--layout-vw)));
  background: linear-gradient(90deg, transparent 0%,rgba(239, 59, 49, .08) 8%,rgba(239, 59, 49, .48) 20%, #ef3b31 38%, #ef3b31 100%);
  font-size: clamp(17px, calc(1.615 * var(--layout-vw)), 31px);
  font-weight: 500;
  line-height: 1.18;
  text-align: left;
  cursor: default;
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.16, 1, .3, 1), filter .38s ease, letter-spacing .38s ease;
}

.footer-wrap .col h4:hover {
  background: #ef3b31;
  transform: translateY(-4px) scale(1.035);
  filter: drop-shadow(0 7px 8px rgba(239, 59, 49, .3));
  letter-spacing: .02em;
}

.footer-wrap .col:nth-child(2) h4 {
  min-width: 120px;
}

.footer-wrap .col:nth-child(3) h4 {
  min-width: 207px;
}

.footer-wrap .col a {
  margin-bottom: min(8px, calc(.417 * var(--layout-vw)));
  color: #fff;
  font-size: clamp(15px, calc(1.406 * var(--layout-vw)), 27px);
  font-weight: 300;
  line-height: 1.18;
}

.footer-wrap .col>a {
  position: relative;
  width: fit-content;
  transition: color .32s ease, translate .38s cubic-bezier(.16, 1, .3, 1), text-shadow .32s ease;
}

.footer-wrap .col>a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #ef4136;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}

.footer-wrap .col>a:hover {
  color: #ff6a61;
  translate: 7px 0;
  text-shadow: 0 4px 12px rgba(239, 65, 54, .25);
}

.footer-wrap .col>a:hover::after {
  transform: scaleX(1);
}

.footer-wrap .socials {
  gap: min(20px, calc(1.042 * var(--layout-vw)));
  margin-top: min(25px, calc(1.302 * var(--layout-vw)));
}

.footer-wrap .socials a {
  width: min(50px, calc(2.604 * var(--layout-vw)));
  height: min(50px, calc(2.604 * var(--layout-vw)));
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
}

.footer-wrap .socials img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-wrap .footer-aeroplane {
  transform-origin: 72% 28%;
  animation: footerPlaneFlight 5.5s ease-in-out infinite;
}

@keyframes footerPlaneFlight {
  0%,  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  35% {
    transform: translate3d(-12px, -8px, 0) rotate(-1.2deg);
  }

  70% {
    transform: translate3d(7px, -3px, 0) rotate(.7deg);
  }
}

@media(max-width:900px) {
  .footer-wrap {
    padding:30px 24px;
    background-image:none;
    background-color:var(--navy);
    min-height:0;
  }

  .footer-wrap .footer-card {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    max-width:680px;
    min-height:0;
    padding:32px;
    gap:30px;
    border-width:8px;
    border-radius:38px;
    align-items:start;
  }

  .footer-wrap .col:last-child {
    grid-column:1 / -1;
  }

  .footer-wrap .col h4 {
    min-width:0;
    width:100%;
    font-size:20px;
  }

  .footer-wrap .col > a {
    font-size:16px;
    padding-block:5px;
  }

  .footer-wrap .socials {
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
  }

  .footer-wrap .socials a {
    width:35px;
    height:35px;
    padding:0;
  }
}

@media(max-width:640px) {
  .footer-wrap {
    padding:30px 24px;
  }

  .footer-wrap .footer-card {
    max-width:460px;
    padding:26px 22px;
    gap:24px 18px;
    border-width:6px;
    border-radius:30px;
  }
}

@media(max-width:480px) {
  .footer-wrap .footer-card {
    grid-template-columns:1fr;
  }

  .footer-wrap .col:last-child {
    grid-column:auto;
  }
}

@media(max-width:900px) {
  .footer-wrap .footer-aeroplane {
    display:none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .footer-wrap .footer-aeroplane {
    animation:none;
  }

  .footer-wrap .col h4,.footer-wrap .col > a,.footer-wrap .col > a::after,.footer-wrap .socials a {
    transition:none;
  }
}
