@import url(https://fonts.googleapis.com/css?family=PT+Sans:regular,700);
@font-face {
  font-family: Georgia;
  font-display: swap;
  src: url(../fonts/georgia.woff2) format("woff2");
  font-weight: 400;
  font-style: normal
}
@font-face {
  font-family: Georgia;
  font-display: swap;
  src: url(../fonts/georgiab.woff2) format("woff2");
  font-weight: 700;
  font-style: normal
}
:root {
  --fontFamily: "Georgia",serif;
  --secondFontFamily: "PT Sans",sans-serif;
  --fontSize: 18px;
  --mainColor: rgba(0, 0, 0, 1);
  --white: #fff;
  --light-blue: #62CCED;
  --red: #E31E26
}
* {
  padding: 0;
  margin: 0;
  border: 0
}
*,
*::after,
*::before {
  box-sizing: border-box
}
*::after,
*::before {
  display: inline-block
}
body,
html {
  height: 100%;
  min-width: 320px
}
body {
  color: var(--mainColor);
  line-height: 1;
  font-family: var(--fontFamily);
  font-size: var(--fontSize);
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
button,
input,
textarea {
  font-family: var(--fontFamily);
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background-color: rgba(0,0,0,0)
}
input,
textarea {
  width: 100%
}
label {
  display: inline-block
}
a,
button,
input,
summary,
textarea {
  outline: 1px solid transparent
}
button,
option,
select {
  cursor: pointer
}
a {
  display: inline-block;
  color: inherit;
  text-decoration: none
}
ul li {
  list-style: none
}
img {
  vertical-align: top
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit
}
.lock body {
  overflow: hidden;
  touch-action: none;
  -ms-scroll-chaining: none;
  overscroll-behavior: none
}
.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden
}
@supports (overflow:clip) {
  .wrapper {
    overflow: clip
  }
}
.wrapper>main {
  flex: 1 1 auto
}
.wrapper>* {
  min-width: 0
}
[class*=__container] {
  max-width: 78.75rem;
  margin: 0 auto;
  padding: 0 .9375rem
}
.btn {
  display: inline-flex;
  justify-content: center;
  padding: 12.5px 54px;
  color: var(--mainColor);
  font-family: var(--secondFontFamily);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  border-radius: 8px;
  border: 1px solid var(--mainColor);
  background-color: var(--white);
  transition: border .3s ease,color .3s ease
}
.btn--fw {
  width: 100%
}
.btn--sec {
  border: 1px solid transparent
}
input[type=email],
input[type=tel],
input[type=text],
textarea {
  -webkit-appearance: none;
  appearance: none
}
.input {
  border-radius: 8px!important;
  width: 100%;
  display: block;
  padding: 11.25px 16px;
  color: var(--mainColor);
  caret-color: inherit;
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  font-family: var(--secondFontFamily)
}
.input::-webkit-input-placeholder {
  color: var(--mainColor)
}
.input:-ms-input-placeholder {
  color: var(--mainColor)
}
.input::-ms-input-placeholder {
  color: var(--mainColor)
}
.input::placeholder {
  color: var(--mainColor)
}
.input[placeholder]:not([data-placeholder-nohiden])::-webkit-input-placeholder {
  -webkit-transition: opacity .3s;
  transition: opacity .3s
}
.input[placeholder]:not([data-placeholder-nohiden]):-ms-input-placeholder {
  -ms-transition: opacity .3s;
  transition: opacity .3s
}
.input[placeholder]:not([data-placeholder-nohiden])::-ms-input-placeholder {
  -ms-transition: opacity .3s;
  transition: opacity .3s
}
.input[placeholder]:not([data-placeholder-nohiden])::placeholder {
  transition: opacity .3s
}
.input[placeholder]:not([data-placeholder-nohiden]):focus::-webkit-input-placeholder {
  opacity: 0
}
.input[placeholder]:not([data-placeholder-nohiden]):focus:-ms-input-placeholder {
  opacity: 0
}
.input[placeholder]:not([data-placeholder-nohiden]):focus::-ms-input-placeholder {
  opacity: 0
}
.input[placeholder]:not([data-placeholder-nohiden]):focus::placeholder {
  opacity: 0
}
textarea.input {
  resize: none;
  padding: 0 0
}
.checkbox {
  position: relative
}
.checkbox:not(:last-child) {
  margin-bottom: em(5)
}
.checkbox__input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0
}
.checkbox__input:focus-visible+.checkbox__label .checkbox__icon {
  box-shadow: 0 0 5px #000
}
.checkbox__input:checked+.checkbox__label .checkbox__icon:before {
  -webkit-transform: translate(-50%,-50%) scale(1);
  transform: translate(-50%,-50%) scale(1)
}
.checkbox__label {
  cursor: pointer;
  display: inline-flex;
  position: relative;
  gap: 13px
}
.checkbox__icon {
  align-self: flex-start;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  position: relative
}
.checkbox__icon:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%) scale(0);
  transform: translate(-50%,-50%) scale(0);
  align-self: flex-start;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  transition: -webkit-transform .3s ease 0s;
  transition: transform .3s ease 0s;
  transition: transform .3s ease 0s,-webkit-transform .3s ease 0s;
  background-color: var(--light-blue)
}
.checkbox__text {
  align-self: center;
  font-size: 14px;
  line-height: 1.21
}
.checkbox__text a {
  color: var(--light-blue)
}
.options {
  display: grid;
  grid-template-columns: repeat(3,1fr)
}
.options__item {
  position: relative;
  cursor: pointer
}
.options__input {
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute
}
.options__input:focus-visible+.options__label {
  box-shadow: 0 0 5px #000
}
.options__input:checked+.options__label {
  border: 1px solid #dbdbdb
}
.options__input:checked+.options__label .options__text {
  color: var(--mainColor)
}
.options__label {
  width: 100%;
  text-align: center;
  border: 1px solid var(--light-blue);
  border-radius: 8px;
  background-color: var(--white);
  padding: 14px 10px;
  transition: border .3s ease 0s
}
.options__text {
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  transition: color .3s ease;
  color: var(--light-blue)
}
.quantity {
  height: 48px;
  width: 100%;
  display: flex;
  border: 1px solid var(--light-blue);
  border-radius: 8px;
  font-family: var(--secondFontFamily)
}
.quantity__button {
  flex: 0 0 48px;
  position: relative;
  cursor: pointer
}
.quantity__button::after,
.quantity__button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all .3s ease 0s;
  margin: 0 0 0 -4.5px;
  background-color: #d9d9d9;
  width: 16px;
  height: 2px;
  border-radius: 3px
}
.quantity__button--plus::before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg)
}
.quantity__input {
  flex: 1 1 auto
}
.quantity__input input {
  height: 100%;
  color: var(--light-blue);
  font-size: 18px;
  font-weight: 700;
  font-family: var(--secondFontFamily);
  width: 100%;
  text-align: center
}
body::after {
  content: "";
  background-color: rgba(0,0,0,.5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .8s ease 0s;
  pointer-events: none;
  z-index: 149
}
.popup-show body::after {
  opacity: 1
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 30px 10px;
  transition: visibility .8s ease 0s;
  visibility: hidden;
  pointer-events: none
}
.popup_show {
  z-index: 150;
  visibility: visible;
  overflow: auto;
  pointer-events: auto
}
.popup_show .popup__content {
  visibility: visible;
  -webkit-transform: scale(1);
  transform: scale(1)
}
.popup__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}
.popup__content {
  visibility: hidden;
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: -webkit-transform .3s ease 0s;
  transition: transform .3s ease 0s;
  transition: transform .3s ease 0s,-webkit-transform .3s ease 0s;
  background-color: #eee;
  padding: 30px 10px 20px;
  width: 100%;
  max-width: 400px;
  border-radius: 20px
}
.lock .popup__content {
  visibility: visible
}
.popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px
}
.popup__close::after,
.popup__close::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  top: 50%;
  left: 50%;
  background-color: red
}
.popup__close::before {
  -webkit-transform: translate(-50%,-50%) rotate(45deg);
  transform: translate(-50%,-50%) rotate(45deg)
}
.popup__close::after {
  -webkit-transform: translate(-50%,-50%) rotate(-45deg);
  transform: translate(-50%,-50%) rotate(-45deg)
}
.popup__text {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5
}
.spollers {
  display: grid;
  gap: 12px
}
.spollers__item {
  box-shadow: 0 6px 12px 0 #dbdbdb;
  border-radius: 8px;
  overflow: hidden
}
.spollers__title {
  width: 100%;
  cursor: default;
  text-align: left;
  padding: 12px 16px;
  list-style: none;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.28;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--secondFontFamily);
  color: var(--mainColor);
  background-color: var(--white);
  justify-content: space-between
}
.spollers__title i {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  position: relative
}
.spollers__title i::after,
.spollers__title i::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  border-radius: 2px;
  background-color: var(--light-blue);
  left: 50%;
  top: 50%;
  transition: all .3s ease 0s
}
.spollers__title i::before {
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%)
}
.spollers__title i::after {
  -webkit-transform: translate(-50%,-50%) rotate(90deg);
  transform: translate(-50%,-50%) rotate(90deg)
}
.spollers__title._spoller-active i::before {
  -webkit-transform: translateX(-50%,-50%);
  transform: translateX(-50%,-50%)
}
.spollers__title._spoller-active i::after {
  -webkit-transform: translate(-50%,-50%) rotate(180deg);
  transform: translate(-50%,-50%) rotate(180deg)
}
.spollers__title::-webkit-details-marker,
.spollers__title::marker {
  display: none
}
.spollers__body {
  padding: 4px 16px 16px 16px;
  background-color: var(--white);
  font-size: 18px;
  line-height: 1.39;
  font-weight: 400;
  color: var(--mainColor)
}
.tabs {
  max-width: 975.25px;
  margin-inline: auto;
  background-color: var(--white);
  border-radius: 8px;
  box-shadow: 0 12px 24px 0 #dbdbdb;
  overflow: hidden
}
.tabs__navigation {
  display: flex
}
.tabs__title {
  flex: 0 1 50%;
  font-family: var(--secondFontFamily);
  padding: 33.5px 10px;
  font-weight: 700;
  font-size: 18px;
  background-color: var(--light-blue);
  color: var(--white);
  line-height: 1.17;
  transition: color .3s ease,background-color .3s ease
}
.tabs__title._tab-active {
  color: var(--mainColor);
  background-color: var(--white)
}
.tabs__content {
  font-family: var(--secondFontFamily)
}
.tabs__lines:not(:last-child) {
  margin-bottom: 40px
}
.tabs__lines h3 {
  color: var(--mainColor);
  font-weight: 700;
  font-size: 18px
}
.tabs__lines h3:not(:last-child) {
  margin-bottom: 24px
}
.tabs__data h3 {
  color: var(--mainColor);
  font-weight: 700;
  font-size: 18px
}
.tabs__data h3:not(:last-child) {
  margin-bottom: 24px
}
.tabs__data ul {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(350px,1fr))
}
.tabs__border {
  border-bottom: 1px solid #d9d9d9
}
.tabs__border:not(:last-child) {
  margin-bottom: 24px
}
.tabs__btn {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}
.ibg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}
.ibg--top {
  -o-object-position: top;
  object-position: top
}
.ibg--bottom {
  -o-object-position: bottom;
  object-position: bottom
}
.ibg--left {
  -o-object-position: left;
  object-position: left
}
.ibg--right {
  -o-object-position: right;
  object-position: right
}
.ibg--contain {
  -o-object-fit: contain;
  object-fit: contain
}
.heart {
  color: var(--red);
  position: relative;
  top: 8px
}
.ttl {
  font-size: clamp(24px,24px + 16*(100vw - 767.98px)/332.02,40px);
  font-weight: 700;
  line-height: 1.175;
  text-align: center;
  text-transform: uppercase;
  color: var(--mainColor)
}
.ttl--white {
  color: var(--white)
}
.footer {
  background-color: var(--mainColor)
}
.footer__container {
  display: flex;
  justify-content: center
}
.footer__container a {
  font-family: var(--secondFontFamily);
  font-size: 16px;
  text-align: center;
  color: var(--white)
}
.hero {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 58px 24px
}
.hero__container {
  position: relative;
  z-index: 3
}
.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}
.hero__bg video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}
.hero__bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5)
}
.hero__body {
  max-width: 880px;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column
}
.hero__title {
  font-weight: 700;
  line-height: 1.23;
  color: var(--white);
  max-width: 750px
}
.hero__text p {
  font-size: 18px;
  line-height: 1.39;
  color: var(--white)
}
.hero__btn:not(:last-child) {
  margin-bottom: 64px
}
.why {
  background-color: var(--white)
}
.why__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px 20px
}
.why__body:not(:last-child) {
  margin-bottom: 24px
}
.why__info {
  flex: 0 1 74.308943%
}
.why__info h3 {
  font-weight: 700;
  line-height: 1.29;
  color: var(--mainColor);
  font-family: var(--secondFontFamily)
}
.why__info ul li {
  font-size: 18px;
  color: var(--mainColor);
  line-height: 1.72;
  padding-left: 26px;
  position: relative
}
.why__info ul li::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  top: 14.5px;
  left: 11px;
  border-radius: 50%;
  background-color: var(--mainColor)
}
.why__info ul li:not(:last-child) {
  margin-bottom: 10px
}
.why__info ul:not(:last-child) {
  margin-bottom: 10px
}
.why__image {
  flex: 0 1 264px;
  aspect-ratio: 264/208;
  position: relative
}
.why__image img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover
}
.support {
  background-color: #efefef
}
.gratitude__container {
  position: relative;
  z-index: 3;
}
.gratitude {
  background-color: var(--mainColor);
  position: relative;
  overflow: hidden
}
.gratitude__ttl {
  line-height: 1.18
}
.gratitude__ttl:not(:last-child) {
  margin-bottom: 46px
}
.gratitude__image {
  position: absolute;
  top: 0;
  left: 0
}
.gratitude__image img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover
}
.gratitude__info h3 {
  font-family: var(--secondFontFamily);
  font-weight: 700;
  line-height: 1.29;
  color: var(--white)
}
.gratitude__info p {
  line-height: 1.72;
  color: var(--white)
}
.projects {
  background-color: var(--white)
}
.projects__slider:not(:last-child) {
  margin-bottom: 24px
}
.projects__slide {
  display: flex;
  align-items: flex-start;
  gap: 24px 30px
}
.projects__link {
  flex: 0 1 50%;
  display: block;
  aspect-ratio: 600/450;
  position: relative
}
.projects__link img {
  max-width: 100%
}
.projects__info {
  flex: 0 1 50%;
  color: var(--mainColor)
}
.projects__title a {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.29;
  font-family: var(--secondFontFamily)
}
.projects__descriptions {
  line-height: 1.72
}
.projects__descriptions:not(:last-child) {
  margin-bottom: 10px
}
.projects__actions {
  display: flex;
  gap: 11.5px;
  align-items: center
}
.projects__swiper-pagination {
  position: relative;
  top: -3px;
  font-size: 16px;
  text-transform: uppercase;
  text-align: center
}
.faq {
  background-color: #efefef
}
.faq__spollers {
  max-width: 975px;
  margin-inline: auto
}
.swiper {
  overflow: hidden
}
.swiper-initialized {
  touch-action: pan-y
}
.swiper-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  display: flex;
  position: relative
}
.swiper-vertical .swiper-wrapper {
  flex-direction: column
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start
}
.swiper-initialized .swiper-slide {
  flex-shrink: 0
}
.swiper-android .swiper-slide,
.swiper-android .swiper-wrapper {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0)
}
.swiper-button-lock {
  display: none!important
}
@media (min-width:767.98px) {
  .options--sec {
    grid-template-columns: repeat(3,1fr)
  }
  .tabs__navigation:not(:last-child) {
    margin-bottom: 20px
  }
  .tabs__content {
    padding: 20px 30px 40px
  }
  .footer {
    padding-block: 33px 34px
  }
  .gratitude__body {
    display: grid;
    grid-template-columns: calc(50% - 70px) 50%;
    gap: 70px
  }
  .gratitude__image {
    width: clamp(900px,900px + 287*(100vw - 991px)/909,1187px);
    height: clamp(500px,500px + 328*(100vw - 991px)/909,828px);
    -webkit-transform: translateX(clamp(-476px,-476px + 190 * (100vw - 991px) / 909,-286px)) translateY(55px) rotate(-15deg);
    transform: translateX(clamp(-476px,-476px + 190 * (100vw - 991px) / 909,-286px)) translateY(55px) rotate(-15deg)
  }
  .projects__container {
    position: relative
  }
  .projects__title:not(:last-child) {
    margin-bottom: 32px
  }
  .projects__title a {
    font-size: 24px
  }
  .projects__descriptions {
    font-size: 18px
  }
  .projects__actions {
    bottom: -44px;
    position: absolute;
    right: 21.463415%
  }
}
@media (min-width:991.98px) {
  .options {
    gap: 24px 30px
  }
  .tabs__data ul {
    gap: 24px 30px
  }
  .tabs__data:not(:last-child) {
    margin-bottom: 40px
  }
  .tabs__checkbox:not(:last-child) {
    margin-bottom: 40px
  }
  .heart {
    width: 48px;
    height: 48px
  }
  .hero__title {
    font-size: 48px
  }
  .hero__title:not(:last-child) {
    margin-bottom: 64px
  }
  .hero__text p {
    font-size: 18px
  }
  .hero__text p:not(:last-child) {
    margin-bottom: 25px
  }
  .hero__text:not(:last-child) {
    margin-bottom: 64px
  }
  .why {
    padding-block: 104px 88px
  }
  .why__ttl:not(:last-child) {
    margin-bottom: 46px
  }
  .why__info h3 {
    font-size: 24px
  }
  .why__info h3:not(:last-child) {
    margin-bottom: 32px
  }
  .support {
    padding-block: 104px 88px
  }
  .support__ttl:not(:last-child) {
    margin-bottom: 48px
  }
  .gratitude {
    padding-block: 108px 122px
  }
  .gratitude__info h3 {
    font-size: 24px
  }
  .gratitude__info h3:not(:last-child) {
    margin-bottom: 32px
  }
  .gratitude__info p {
    font-size: 18px
  }
  .gratitude__info p:not(:last-child) {
    margin-bottom: 48px
  }
  .gratitude__btn {
    padding-inline: 100px
  }
  .projects {
    padding-block: 104px 88px
  }
  .projects__ttl:not(:last-child) {
    margin-bottom: 48px
  }
  .faq {
    padding-block: 98px 88px
  }
  .faq__ttl:not(:last-child) {
    margin-bottom: 29px
  }
}
@media (max-width:991.98px) {
  .options {
    gap: 8px
  }
  .tabs__data:not(:last-child) {
    margin-bottom: 24px
  }
  .tabs__data ul {
    gap: 8px
  }
  .tabs__checkbox:not(:last-child) {
    margin-bottom: 24px
  }
  .heart {
    width: 32px;
    height: 32px
  }
  .hero__title {
    font-size: 32px
  }
  .hero__title:not(:last-child) {
    margin-bottom: 32px
  }
  .hero__text p {
    font-size: 16px
  }
  .hero__text p:not(:last-child) {
    margin-bottom: 15px
  }
  .hero__text:not(:last-child) {
    margin-bottom: 32px
  }
  .why {
    padding-block: 48px 40px
  }
  .why__ttl:not(:last-child) {
    margin-bottom: 24px
  }
  .why__body {
    flex-direction: column
  }
  .why__info h3 {
    font-size: 18px
  }
  .why__info h3:not(:last-child) {
    margin-bottom: 24px
  }
  .why__image {
    width: 264px;
    height: 208px;
    flex: 0 1 208px
  }
  .support {
    padding-block: 48px 40px
  }
  .support__ttl:not(:last-child) {
    margin-bottom: 24px
  }
  .gratitude {
    padding-block: 48px 32px
  }
  .gratitude__info h3 {
    font-size: 18px
  }
  .gratitude__info h3:not(:last-child) {
    margin-bottom: 24px
  }
  .gratitude__info p {
    font-size: 16px
  }
  .gratitude__info p:not(:last-child) {
    margin-bottom: 32px
  }
  .gratitude__btn {
    width: 100%
  }
  .projects {
    padding-block: 48px 40px
  }
  .projects__ttl:not(:last-child) {
    margin-bottom: 24px
  }
  .faq {
    padding-block: 48px 40px
  }
  .faq__ttl:not(:last-child) {
    margin-bottom: 24px
  }
}
@media (max-width:767.98px) {
  .options--sec {
    grid-template-columns: repeat(2,1fr)
  }
  .tabs__navigation:not(:last-child) {
    margin-bottom: 16px
  }
  .tabs__content {
    padding: 16px 12px 12px
  }
  .tabs__lines h3 {
    text-align: center
  }
  .tabs__data h3 {
    text-align: center
  }
  .tabs__btn {
    padding-inline: 20px
  }
  .footer {
    padding-block: 23px
  }
  .gratitude__body .empty {
    display: none
  }
  .gratitude__image {
    width: 100%;
    aspect-ratio: 320/482;
  }
  .projects__slide {
    flex-direction: column
  }
  .projects__link {
    width: 100%
  }
  .projects__title:not(:last-child) {
    margin-bottom: 17px
  }
  .projects__title a {
    font-size: 18px
  }
  .projects__descriptions {
    font-size: 16px
  }
  .projects__actions {
    justify-content: center
  }
}
@media (max-width:479.98px) {
  .quantity__button {
    flex: 0 0 40px
  }
  .tabs__title {
    padding-block: 23px
  }
}
@media (any-hover:hover) {
  .btn:hover {
    border: 1px solid var(--light-blue);
    color: var(--light-blue)
  }
  .btn--sec:hover {
    border: 1px solid transparent;
    color: var(--light-blue)
  }
  .quantity__button:hover::after,
  .quantity__button:hover::before {
    background-color: rgba(0,0,0,.5)
  }
}