@import"https://fonts.googleapis.com/css?family=Rubik:regular";
@import"https://fonts.googleapis.com/css?family=Inter:regular";
@import"https://fonts.googleapis.com/css?family=Unbounded:regular,500,600,700,800,900";

* {
  padding: 0px;
  margin: 0px;
  border: none
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

a,
a:link,
a:visited {
  text-decoration: none
}

a:hover {
  text-decoration: none
}

footer,
main {
  display: block
}

h1,
h2,
p {
  font-size: inherit;
  font-weight: inherit
}

ul,
ul li {
  list-style: none
}

img {
  vertical-align: top
}

img,
svg {
  max-width: 100%;
  height: auto
}

input,
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background-color: rgba(0, 0, 0, 0)
}

input::-ms-clear {
  display: none
}

button,
input[type=submit] {
  display: inline-block;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: rgba(0, 0, 0, 0);
  background: none;
  cursor: pointer
}

input:focus,
input:active,
button:focus,
button:active {
  outline: none
}

button::-moz-focus-inner {
  padding: 0;
  border: 0
}

label {
  cursor: pointer
}

:root {
  --font-family: "Rubik", sans-serif;
  --second-family: "Inter", sans-serif;
  --third-family: "Unbounded", sans-serif;
  --color-accent: hsl(200, 100%, 48%);
  --linear-gradient: linear-gradient(127deg, #1292d3 0%, #00a9ff 100%);
  --container: 1330px;
  --container-padding: 15px;
  --bg-hero: hsl(201, 66%, 93%);
  --bg-hero-2: linear-gradient(76deg, #ce5fb6 0%, #6996ff 100%);
  --icon-snowflake: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.05354 3.556L4.08154 0.839999C4.08154 0.597332 4.15621 0.401333 4.30554 0.252C4.45487 0.102666 4.64154 0.0186664 4.86554 0H6.37754C6.63887 0 6.78821 0.0933332 6.82554 0.28C6.88154 0.466666 6.87221 0.653333 6.79754 0.839999L5.64954 3.556L8.36554 2.184C8.53354 2.09067 8.72021 2.05333 8.92554 2.072C9.14954 2.072 9.27087 2.212 9.28954 2.492L9.48554 4.004C9.52287 4.24667 9.45754 4.424 9.28954 4.536C9.14021 4.648 8.96287 4.72267 8.75754 4.76L5.84554 5.096L7.49754 6.944C7.62821 7.09333 7.68421 7.27067 7.66554 7.476C7.66554 7.66267 7.56287 7.82133 7.35754 7.952L5.87354 8.904C5.68687 9.03467 5.50021 9.072 5.31354 9.016C5.12687 8.94133 5.01487 8.792 4.97754 8.568L4.33354 6.02L2.56954 8.652C2.45754 8.80133 2.30821 8.92267 2.12154 9.016C1.93487 9.10933 1.75754 9.08133 1.58954 8.932L0.525539 7.952C0.338872 7.80267 0.292205 7.63467 0.385538 7.448C0.478872 7.24267 0.609539 7.07467 0.777539 6.944L3.21354 5.096L0.525539 4.788C0.338872 4.75067 0.189539 4.65733 0.0775386 4.508C-0.0344615 4.35867 -0.0251283 4.172 0.105538 3.948L0.945539 2.408C1.05754 2.20267 1.19754 2.09067 1.36554 2.072C1.55221 2.03467 1.70154 2.05333 1.81354 2.128L4.05354 3.556Z" fill="%23565757" /></svg>');
  --icon-snowflake-2: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.05354 3.556L4.08154 0.839999C4.08154 0.597332 4.15621 0.401333 4.30554 0.252C4.45487 0.102666 4.64154 0.0186664 4.86554 0H6.37754C6.63887 0 6.78821 0.0933332 6.82554 0.28C6.88154 0.466666 6.87221 0.653333 6.79754 0.839999L5.64954 3.556L8.36554 2.184C8.53354 2.09067 8.72021 2.05333 8.92554 2.072C9.14954 2.072 9.27087 2.212 9.28954 2.492L9.48554 4.004C9.52287 4.24667 9.45754 4.424 9.28954 4.536C9.14021 4.648 8.96287 4.72267 8.75754 4.76L5.84554 5.096L7.49754 6.944C7.62821 7.09333 7.68421 7.27067 7.66554 7.476C7.66554 7.66267 7.56287 7.82133 7.35754 7.952L5.87354 8.904C5.68687 9.03467 5.50021 9.072 5.31354 9.016C5.12687 8.94133 5.01487 8.792 4.97754 8.568L4.33354 6.02L2.56954 8.652C2.45754 8.80133 2.30821 8.92267 2.12154 9.016C1.93487 9.10933 1.75754 9.08133 1.58954 8.932L0.525539 7.952C0.338872 7.80267 0.292205 7.63467 0.385538 7.448C0.478872 7.24267 0.609539 7.07467 0.777539 6.944L3.21354 5.096L0.525539 4.788C0.338872 4.75067 0.189539 4.65733 0.0775386 4.508C-0.0344615 4.35867 -0.0251283 4.172 0.105538 3.948L0.945539 2.408C1.05754 2.20267 1.19754 2.09067 1.36554 2.072C1.55221 2.03467 1.70154 2.05333 1.81354 2.128L4.05354 3.556Z" fill="%23E4E4E4" /></svg>');
  --icon-snowflake-3: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.05354 3.556L4.08154 0.839999C4.08154 0.597332 4.15621 0.401333 4.30554 0.252C4.45487 0.102666 4.64154 0.0186664 4.86554 0H6.37754C6.63887 0 6.78821 0.0933332 6.82554 0.28C6.88154 0.466666 6.87221 0.653333 6.79754 0.839999L5.64954 3.556L8.36554 2.184C8.53354 2.09067 8.72021 2.05333 8.92554 2.072C9.14954 2.072 9.27087 2.212 9.28954 2.492L9.48554 4.004C9.52287 4.24667 9.45754 4.424 9.28954 4.536C9.14021 4.648 8.96287 4.72267 8.75754 4.76L5.84554 5.096L7.49754 6.944C7.62821 7.09333 7.68421 7.27067 7.66554 7.476C7.66554 7.66267 7.56287 7.82133 7.35754 7.952L5.87354 8.904C5.68687 9.03467 5.50021 9.072 5.31354 9.016C5.12687 8.94133 5.01487 8.792 4.97754 8.568L4.33354 6.02L2.56954 8.652C2.45754 8.80133 2.30821 8.92267 2.12154 9.016C1.93487 9.10933 1.75754 9.08133 1.58954 8.932L0.525539 7.952C0.338872 7.80267 0.292205 7.63467 0.385538 7.448C0.478872 7.24267 0.609539 7.07467 0.777539 6.944L3.21354 5.096L0.525539 4.788C0.338872 4.75067 0.189539 4.65733 0.0775386 4.508C-0.0344615 4.35867 -0.0251283 4.172 0.105538 3.948L0.945539 2.408C1.05754 2.20267 1.19754 2.09067 1.36554 2.072C1.55221 2.03467 1.70154 2.05333 1.81354 2.128L4.05354 3.556Z" fill="%238193b7" /></svg>');
  --icon-check: url('data:image/svg+xml,<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5L6 10L15 1" stroke="white" stroke-width="2" /></svg>');
  --icon-line-bg: url('data:image/svg+xml,<svg width="555" height="596" viewBox="0 0 555 596" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M394 61L89 207L495 243L60 444L313 535" stroke="%2300A4F7" stroke-width="120" stroke-linecap="round" stroke-linejoin="round" /></svg>');
  --icon-line-bg-2: url('data:image/svg+xml,<svg width="555" height="596" viewBox="0 0 555 596" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.25" d="M394 61L89 207L495 243L60 444L313 535" stroke="white" stroke-width="120" stroke-linecap="round" stroke-linejoin="round" /></svg>');
  --icon-slider: url('data:image/svg+xml,<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6H13M13 6L8 1M13 6L8 11" stroke="%2300A4F7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>');
  --icon-slider-hover: url('data:image/svg+xml,<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6H13M13 6L8 1M13 6L8 11" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>')
}

* {
  min-width: 0;
  min-height: 0;
  outline: 0
}

html,
body {
  min-height: 100%
}

body {
  font-family: var(--font-family);
  min-width: 20rem;
  width: 100%;
  background-color: #fff;
  padding-top: clamp(1.875rem, .229rem + 8.23vw, 4.375rem)
}

body.small-content {
  background-image: url(./../img/small-content/bg.webp)
}

.small-container {
  width: 100%;
  margin: 0 auto;
  padding-inline: clamp(.938rem, -0.914rem + 9.26vw, 3.75rem)
}

.container {
  width: 100%;
  max-width: var(--container);
  padding: 0 var(--container-padding);
  margin: 0 auto
}

.small-content .container {
  padding-inline: clamp(.938rem, -0.914rem + 9.26vw, 3.75rem)
}

.main {
  display: grid;
  gap: clamp(1.25rem, .303rem + 4.73vw, 2.688rem);
  padding-bottom: clamp(3.125rem, 2.105rem + 5.1vw, 6.25rem)
}

.title {
  margin-bottom: clamp(1.125rem, .384rem + 3.7vw, 2.25rem)
}

h1,
h2,
.title-h2 {
  font-family: var(--third-family);
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  color: #000
}

h1 {
  font-size: clamp(1.438rem, 1.067rem + 1.85vw, 2rem)
}

h2,
.title-h2 {
  font-size: clamp(1.375rem, 1.212rem + .82vw, 1.875rem)
}

.title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.title__button {
  position: relative
}

.title__button .swiper-button-next,
.title__button .swiper-button-prev {
  top: 0;
  left: initial;
  right: 0;
  background-color: #d5edfa;
  border-radius: 50%;
  z-index: 2;
  background-image: var(--icon-slider);
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: all .3s ease 0s;
  transition: all .3s ease 0s
}

.title__button .swiper-button-next::after,
.title__button .swiper-button-prev::after {
  display: none
}

.title__button .swiper-button-next:hover,
.title__button .swiper-button-prev:hover {
  background-color: var(--color-accent);
  background-image: var(--icon-slider-hover)
}

@media(min-width: 0) {

  .title__button .swiper-button-next,
  .title__button .swiper-button-prev {
    width: 2rem;
    height: 2rem;
    background-size: .5rem
  }
}

@media(min-width: 576px) {

  .title__button .swiper-button-next,
  .title__button .swiper-button-prev {
    width: 3rem;
    height: 3rem;
    background-size: .875rem
  }
}

@media(min-width: 0) {
  .title__button .swiper-button-prev {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
    right: 2.5rem
  }
}

@media(min-width: 576px) {
  .title__button .swiper-button-prev {
    right: 4rem
  }
}

.main-footer {
  text-align: center;
  padding: 2.5rem 0;
  background-color: #101515
}

.main-footer-copy {
  font-family: var(--third-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.25;
  text-transform: uppercase;
  color: #fff;
  opacity: .7
}

.title-1 span {
  color: var(--color-accent)
}

.btn {
  padding: 1rem;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: clamp(.938rem, .856rem + .41vw, 1.188rem);
  line-height: 1.35;
  color: #fff;
  border-radius: .625rem;
  -webkit-transition: all .3s ease 0s;
  transition: all .3s ease 0s
}

.btn-blue {
  background: var(--linear-gradient)
}

.btn .icon-tg {
  width: 2.25rem;
  aspect-ratio: 1;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
  margin-left: 1rem
}

.small-hero {
  background-color: #fff
}

.hero__content {
  padding-bottom: clamp(1.875rem, .64rem + 6.17vw, 3.75rem)
}

.hero__head {
  margin-bottom: 1.75rem
}

.hero__advs {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 2.25rem
}

.hero__adv {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: clamp(1rem, .918rem + .41vw, 1.125rem);
  line-height: 1.35;
  color: #565858;
  margin-bottom: .75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.hero__adv::before {
  content: "";
  width: 1.75rem;
  aspect-ratio: 1;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background-color: var(--color-accent);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-radius: 50%;
  margin-right: .875rem;
  background-image: var(--icon-check);
  background-repeat: no-repeat;
  background-position: center;
  background-size: .875rem
}

.hero__adv:last-child {
  margin-bottom: 0
}

.hero__desc {
  font-family: var(--font-family);
  font-style: italic;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.35;
  color: #565757;
  position: relative;
  padding-left: 1.4375rem
}

.hero__desc::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: .625rem;
  aspect-ratio: 1;
  background-image: var(--icon-snowflake)
}

@media(min-width: 0)and (max-width: 48rem) {
  .hero__desc {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr
  }
}

@media(min-width: 36rem)and (max-width: 48rem) {
  .hero__desc {
    grid-template-columns: 1fr 1fr;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }
}

@media(min-width: 48rem) {
  .hero__desc {
    max-width: 16.375rem
  }
}

.posts .title {
  margin-bottom: .625rem
}

.cart {
  background: #fff;
  border: .0625rem solid #d1d1d1;
  border-radius: .5rem;
  padding: 1.5rem;
  position: relative
}

.cart__text {
  margin-bottom: 1.25rem
}

.cart__text p:not(:last-child) {
  margin-bottom: 1em
}

.cart__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: .5rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.icon {
  background: #d9ecfc;
  padding: .4375rem .625rem;
  border-radius: 3.125rem;
  min-width: 4.5rem;
  font-family: var(--second-family);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.2;
  color: #3490ec;
  display: grid;
  grid-template-columns: 1.375rem 1fr;
  gap: .375rem
}

.icon-cart-top {
  position: absolute;
  z-index: 2
}

.icon-top-1 {
  top: -1.375rem;
  right: 0
}

.icon-top-2 {
  top: 60px;
  left: -22px
}

.posts__slider:not(.swiper-initialized) .posts__wrapper {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
}

.posts__slider:not(.swiper-initialized) .posts__wrapper .cart {
  -webkit-box-shadow: 0 .5rem 3.75rem 0 rgba(13, 28, 35, .08);
  box-shadow: 0 .5rem 3.75rem 0 rgba(13, 28, 35, .08)
}

.small-content main {
  max-width: 50.375rem;
  margin-inline: auto
}

.top-content {
  padding-top: clamp(1.875rem, 1.463rem + 2.06vw, 2.5rem);
  margin-bottom: clamp(1.25rem, .592rem + 3.29vw, 2.25rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: clamp(1rem, .342rem + 3.29vw, 2rem);
  position: relative
}

.top-content__user {
  max-width: 9.375rem;
  min-width: 3.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}

@media(min-width: 36rem) {
  .top-content__logo {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    min-width: 15rem
  }
}

.logo-text {
  font-family: var(--third-family);
  font-weight: 700;
  font-size: clamp(1rem, .588rem + 2.06vw, 1.625rem);
  line-height: 1.25;
  text-transform: uppercase;
  color: #000;
  margin-bottom: clamp(.5rem, .335rem + .82vw, .75rem)
}

.logo-desc {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: clamp(.875rem, .752rem + .62vw, 1.063rem);
  line-height: 1.25;
  color: #565757
}

.reviews,
.posts {
  background-color: #fff;
  padding-block: 3.75rem;
  overflow: hidden
}

.reviews__slider,
.posts__slider {
  overflow: visible
}

.swiper {
  padding-top: 1.5rem;
  padding-bottom: 2rem
}

.reviews__slider.swiper {
  padding-bottom: 0
}

.icon-tg__image {
  position: absolute;
  right: 0;
  top: -2.875rem
}

.hero__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  margin-bottom: 1.75rem
}

@media(min-width: 0) {
  .hero__bottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
  }
}

@media(min-width: 0)and (max-width: 576px) {
  .hero__bottom {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }
}

@media(min-width: 36rem) {
  .hero__bottom {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
  }
}

.hero__bottom__desc {
  border-radius: .75rem .75rem .75rem 2.5rem;
  padding: 1rem 1.75rem;
  background-color: #f4f4f4;
  font-family: var(--font-family);
  font-style: italic;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.35;
  text-align: right;
  color: #252d3d
}

@media(min-width: 0)and (max-width: 576px) {
  .hero__bottom__desc {
    text-align: center
  }
}

@media(min-width: 576px) {
  .hero__bottom__desc {
    max-width: 15.25rem
  }
}

.reviews__slide {
  background-color: #f4f4f4;
  border-radius: .5rem;
  padding: 1rem
}

.swiper-slide {
  height: auto
}

main.black-theme .small-hero {
  background-color: #202124
}

main.black-theme .logo-desc,
main.black-theme .logo-text {
  color: #fff
}

main.black-theme .hero__adv,
main.black-theme h1,
main.black-theme h2,
main.black-theme .title-h2 {
  color: #e2ecff
}

main.black-theme .hero__bottom__desc {
  background-color: #3b3f43;
  color: #f4f4f4
}

main.black-theme .hero__desc {
  color: #8193b7
}

main.black-theme .hero__desc::after {
  background-image: var(--icon-snowflake-3)
}

main.black-theme .reviews,
main.black-theme .posts {
  background-color: #202124
}

main.black-theme .cart {
  border-color: #16171a;
  background-color: #2a2b2e;
  color: #f4f4f4
}

main.black-theme .cart a {
  color: #f4f4f4;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease 0s;
}

main.black-theme .cart a:hover {
  border-bottom-color: #f4f4f4;
}

main.black-theme .icon {
  background-color: #3b3f43
}

main.black-theme .reviews__slide {
  background-color: #2a2b2e;
  color: #f4f4f4
}

/* * {
  outline: .0625rem solid red;
  outline: 0
} */