@charset "utf-8";

.footer {
  background: #fff;
  padding: 67px 0 37px;
}
@media screen and (min-width: 768px) {
  .footer__inner {
    padding: 0 80px;
  }
}

.footer__top {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 40px;
}
@media screen and (min-width: 1024px) {
  .footer__top {
    grid-template-columns: repeat(2, 1fr);
  }
}

.footer__top-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #3DBAE8;
  border-radius: 100px;
  padding: 31px 37px 31px 68px;
  &:nth-of-type(2) {
    background: #F48314;
  }
}
.footer__top-item p {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  color: #fff;
  text-decoration: none;
}
.footer__top-item::after {
  content: "";
  background: url('../images/20260121150453803294.svg') no-repeat center / contain;
  width: 38px;
  height: 30px;
}
.footer__top-item:hover {
  opacity: 0.8;
}

.footer__bottom {
  border-bottom: 1px solid rgba(40, 56, 56, 0.1);
  padding: 81px 0 42px;
  display: flex;
  gap: 74px;
  justify-content: space-between;
  flex-direction: column-reverse;
      align-items: center;
}
@media screen and (min-width: 900px) {
  .footer__bottom {
    flex-direction: row;
  }
}

.footer__logo {
  width: 133px;
  height: auto;
}
.footer__logo:hover {
  opacity: 0.7;
}
.c3150 {
  width: 326px;
  height: auto;
}
.c7051 {
  margin-top: 27px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__bottom-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  width: fit-content;
}
@media screen and (min-width: 768px) {
  .footer__bottom-links {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .footer__bottom-links {
    display: flex;
    flex-wrap: wrap;
    max-width: 300px;
    justify-content: end;
  }
}
@media screen and (min-width: 1200px) {
  .footer__bottom-links {
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
  }
}

.footer__bottom-link {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
      white-space: nowrap;
}
.footer__bottom-link p {
  width: fit-content;
  color: #333333;
  position: relative;
  display: inline-block;
  transition: color 0.3s;

  &:hover {
    color: #3DBAE8;
  }
}
.footer__bottom-link p::after {
  background-color: #3DBAE8;
  bottom: -5px;
  content: "";
  height: 1px;
  left: 0;
  transform: scale(0, 1);
  transform-origin: left top;
  position: absolute;
  transition: transform .3s;
  width: 100%;
}
.footer__bottom-link p:hover::after {
  transform: scale(1, 1);
}

.footer__btn  {
  width: 270px;
}