@charset "UTF-8";

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

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

html,
body {
  height: 100%;
  min-width: 320px;
}

body {
  color: #000;
  line-height: 1;
  font-family: "";
  font-size: 0.875rem;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input,
button,
textarea {
  font-family: "";
  font-size: inherit;
}

button {
  cursor: pointer;
  color: inherit;
  background-color: transparent;
}

a {
  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;
}

svg {
  height: 1em;
  width: 1em;
}

svg path {
  stroke: inherit;
  fill: inherit;
}

.lock body {
  overflow: hidden;
  -ms-touch-action: none;
      touch-action: none;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
}

.wrapper {
  min-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
}

@supports (overflow: clip) {
  .wrapper {
    overflow: clip;
  }
}

.wrapper > main {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.wrapper > * {
  min-width: 0;
}

/*
(i) Стилі будуть застосовуватись до
всіх класів, що містять *__container
Наприклад header__container, main__container і т.п.
Сніппет (HTML): cnt
*/

[class*=__container] {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 0.9375rem;
}

[class*=-ibg] {
  position: relative;
}

[class*=-ibg] img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

[class*=-ibg_contain] img {
  -o-object-fit: contain;
     object-fit: contain;
}

/*
.icon-menu {
	display: none;
	@media (max-width: $mobile) {
		display: block;
		position: relative;
		width: rem(30);
		height: rem(18);
		z-index: 5;
		@media (any-hover: none) {
			cursor: default;
		}
		span,
		&::before,
		&::after {
			content: "";
			transition: all 0.3s ease 0s;
			right: 0;
			position: absolute;
			width: 100%;
			he
			ight: rem(2);
			background-color: #000;
		}
		&::before {
			top: 0;
		}
		&::after {
			bottom: 0;
		}
		span {
			top: calc(50% - rem(1));
		}
		.menu-open & {
			span {
				width: 0;
			}
			&::before,
			&::after {
			}
			&::before {
				top: calc(50% - rem(1));
				transform: rotate(-45deg);
			}
			&::after {
				bottom: calc(50% - rem(1));
				transform: rotate(45deg);
			}
		}
	}
}
*/

.header {
  margin-top: 0.75rem;
  max-width: 100vw;
  height: 3.125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 2;
  /* .header__container */
  /* .header__logo */
  /* .header__menu */
  /* .header__menu-list */
  /* .header__menu-botton */
}

.header__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 3.125rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header__logo {
  position: absolute;
  left: 11.25rem;
}

.header__menu {
  height: 3.125rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 20rem;
  font-size: 0.875rem;
}

.header__menu-list {
  margin-right: 19.375rem;
  line-height: 16px;
}

.header__menu-list a:not(nth-last-child) {
  margin-right: 1.625rem;
}

.header__menu-list a:hover {
  padding-bottom: 0.625rem;
  width: 3.125rem;
  height: 0.3125rem;
  -webkit-box-shadow: inset 0px -1px 0px #22356F;
          box-shadow: inset 0px -1px 0px #22356F;
}

.header__menu-botton {
  line-height: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #FFFFFF;
  background: #62D0DF;
  border-radius: 50px;
  height: 3.125rem;
  width: 9.375rem;
}

.header__menu-botton span {
  display: block;
  margin: 0 auto;
}

.logo-ibg {
  max-width: 6.875rem;
}

.footer {
  width: 90rem;
  background: #62D0DF;
  height: 5rem;
  /* .footer__container */
  /* .footer__text */
}

.footer__container {
  margin-top: 2rem;
  margin-left: 12.125rem;
}

.footer__text {
  position: relative;
  font-size: 0.875rem;
  line-height: 0.5625rem;
  letter-spacing: -0.006em;
  color: #FFFFFF;
}

.footer__text::before {
  content: "©";
  font-size: 0.875rem;
  line-height: 0.5625rem;
  letter-spacing: -0.006em;
  color: #FFFFFF;
  position: absolute;
  left: -16px;
}

html {
  overflow-x: hidden;
}

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 100%;
}

.page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.introduse-wrap {
  background: #F4F9E2;
  width: 57.8125rem;
}

.introduse {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #F4F9E2;
  position: relative;
  top: -3.75rem;
  width: 57.8125rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  /* .introduse__container */
  /* .introduse__logo */
  /* .introduse__title */
  /* .introduse__text */
  /* .introduse__botton */
}

.introduse__container {
  margin-top: 12.5rem;
  margin-left: 11.25rem;
}

.introduse__logo {
  height: 4rem;
}

.introduse__title {
  max-width: 30.25rem;
  max-height: 10.4375rem;
  font-size: 3rem;
  line-height: 2.875rem;
  letter-spacing: -0.035em;
  color: #22356F;
  margin-bottom: 5.625rem;
}

.introduse__text {
  max-width: 30.25rem;
  max-height: 10.4375rem;
  font-size: 1.5rem;
  line-height: 2.25rem;
  color: #22356F;
}

.introduse__bottons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 2.5rem;
}

.introduse__botton {
  width: 9.375rem;
  height: 3.125rem;
  background: #F9B640;
  margin-top: 4.0625rem;
  margin-bottom: 4.0625rem;
  font-size: 1rem;
  line-height: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  letter-spacing: 0.1em;
  color: #FFFFFF;
}

.introduse__botton a {
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  letter-spacing: 0.1em;
  color: #FFFFFF;
}

.botton-wh {
  background-color: transparent;
}

.botton-wh a {
  color: #FAB63E;
}

.rectangle {
  position: absolute;
  width: 50.4375rem;
  height: 34.0625rem;
  left: 50rem;
  top: -30px;
  background: #EDFDFF;
  border-radius: 312.159px;
  -webkit-transform: matrix(-0.5, 0.87, 0.87, 0.5, 0, 0);
      -ms-transform: matrix(-0.5, 0.87, 0.87, 0.5, 0, 0);
          transform: matrix(-0.5, 0.87, 0.87, 0.5, 0, 0);
}

.mask {
  position: absolute;
  width: 78.125rem;
  height: 46.875rem;
  left: 18.75rem;
  -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
          transform: scale(0.95);
  top: -60px;
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
}

.rectangle2 {
  -webkit-mask-image: url(../img/mask1.svg);
  mask-image: url(../img/mask1.svg);
  background: -o-linear-gradient(220deg, #FFFFFF 11.23%, rgba(255, 255, 255, 0) 60%);
  background: linear-gradient(230deg, #FFFFFF 11.23%, rgba(255, 255, 255, 0) 60%);
}

.rectangle2 img {
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(130px) translateY(-150px) scale(0.5) rotate(30deg);
      -ms-transform: translateX(130px) translateY(-150px) scale(0.5) rotate(30deg);
          transform: translateX(130px) translateY(-150px) scale(0.5) rotate(30deg);
}

.why {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #62D0DF;
  /* .why__textblock */
  /* .why__title */
  /* .why__text */
  /* .why__image */
}

.why__textblock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 auto;
}

.why__title {
  margin-top: 9.375rem;
  margin-bottom: 4.6875rem;
  font-size: 36px;
  line-height: 23px;
  letter-spacing: -0.006em;
  color: #FFFFFF;
}

.why__text {
  font-size: 24px;
  line-height: 30px;
  color: #FFFFFF;
  max-width: 34.6875rem;
}

.about {
  max-width: 90rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 14.0625rem;
  /* .about__topic */
  /* .about__text */
}

.about__topic {
  margin-top: 9.375rem;
  margin-left: 6.5625rem;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.06em;
  color: #22356F;
}

.about__text {
  margin-top: 9.375rem;
  max-width: 37rem;
  margin-bottom: 4.75rem;
  font-size: 24px;
  line-height: 29px;
  letter-spacing: 0.005em;
  color: #22356F;
}

.sub-title {
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0.06em;
  color: rgba(34, 53, 111, 0.5);
}

.help {
  margin-top: 1.875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 7.5rem;
  /* .help__topic */
}

.help__topic {
  width: 22.5rem;
  height: 22.5rem;
  background: #FFE2DE;
  font-size: 32px;
  line-height: 29px;
  letter-spacing: -0.006em;
  color: #FFFFFF;
}

.help p {
  margin-top: 1.4375rem;
  margin-left: 4.875rem;
}

.help span {
  display: block;
  padding-top: 4.6875rem;
  margin-left: 3.28125rem;
  width: 15.9375rem;
  border-bottom: 0.0625rem solid white;
}

.help p::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  position: relative;
  left: -0.9375rem;
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: #E9B730;
}

.topic-bg1 {
  background: #C4E769;
}

.topic-bg2 {
  background: #62D0DF;
}

.topic-bg3 {
  background: #0052C1;
}

.help2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  max-width: 90rem;
  /* .help2__topic */
}

.help2__topic {
  width: 33.3333333333%;
  height: 30rem;
  font-size: 32px;
  line-height: 29px;
  letter-spacing: -0.006em;
  color: #FFFFFF;
}

.help2 p {
  margin-top: 1.4375rem;
  margin-left: 4.875rem;
}

.help2 p::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  position: relative;
  left: -0.9375rem;
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: #E9B730;
}

.help2 span {
  display: block;
  padding-top: 4.6875rem;
  margin-left: 3.28125rem;
  width: 15.9375rem;
  border-bottom: 0.0625rem solid white;
}

.topic-1 {
  background: #22356F;
}

.topic-2 {
  background: #0052C1;
}

.no-webp .topic-3{
  background: url(../img/strawberry.png) no-repeat; }

.topic-3 {
  background-size: cover;
}

.topic-4 {
  background: #62D0DF;
}

.topic-5 {
  background: #DEE1FF;
}

.topic-6 {
  background: #8F00FF;
}

.help3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  max-width: 90rem;
  /* .help3__part */
}

.help3__part {
  width: 33.3333333333%;
  height: 15rem;
  margin-top: 1.375rem;
}

.part {
  /* .part__title */
  /* .part__text */
}

.part__title {
  margin-left: 6.5625rem;
  margin-bottom: 1.75rem;
  font-size: 1.75rem;
  line-height: 1.75rem;
  letter-spacing: -0.03em;
  color: #22356F;
}

.part__text {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: 6.5625rem;
  max-width: 18.75rem;
  font-size: 1rem;
  line-height: 1.375rem;
  letter-spacing: -0.03em;
  color: rgba(34, 53, 111, 0.5);
}

.help4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* .help4__photo */
  /* .help4__wrap */
  /* .help4__title */
  /* .help4__text */
  /* .help4__button */
}

.help4__photo img {
  max-height: 50rem;
}

.help4__title {
  margin-top: 6.25rem;
  margin-left: 6.5625rem;
  font-size: 1rem;
  line-height: 0.625rem;
  letter-spacing: 0.06em;
  color: #22356F;
}

.help4__text {
  max-width: 42.25rem;
  text-align: left;
  margin-top: 14.0625rem;
  margin-left: 6.5625rem;
  margin-bottom: 12.5rem;
  font-size: 2.25rem;
  line-height: 2.8125rem;
  letter-spacing: -0.01em;
  color: #22356F;
}

.help4__text span {
  color: #6CD3E1;
}

.help4__button {
  margin-left: 6.5625rem;
  font-size: 1rem;
  line-height: 1.25rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  letter-spacing: 0.1em;
  color: #FAB63E;
}

.contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* .contact__wrap */
  /* .contact__title */
  /* .contact__sub-title */
  /* .contact__text */
}

.contact__wrap {
  width: 60rem;
  max-height: 50rem;
  background: #22356F;
  color: #FFFFFF;
}

.contact__title {
  font-size: 1rem;
  line-height: 0.625rem;
  letter-spacing: 0.06em;
  margin-top: 6.25rem;
  margin-left: 11.25rem;
}

.contact__sub-title {
  margin-top: 14.375rem;
  margin-left: 11.25rem;
  font-size: 4rem;
  line-height: 5rem;
  letter-spacing: -0.01em;
}

.contact__text {
  margin-top: 4.6875rem;
  margin-left: 11.25rem;
  font-size: 2.25rem;
  line-height: 2.8125rem;
  letter-spacing: -0.005em;
  max-width: 33.75rem;
}

.button-bg {
  color: #62D0DF;
  margin-top: 6.25rem;
  margin-left: 11.25rem;
}

.info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* .info__photo */
  /* .info__wrap */
  /* .info__information */
  /* .info__title */
  /* .info__address */
  /* .info__hours */
}

.info__photo {
  max-width: 35.625rem;
  max-height: 23.75rem;
}

.info__wrap {
  margin-top: 6.25rem;
  margin-left: 2.75rem;
  -webkit-column-gap: 5.625rem;
     -moz-column-gap: 5.625rem;
          column-gap: 5.625rem;
  -webkit-columns: 3;
     -moz-columns: 3;
          columns: 3;
  -webkit-column-rule: 1px solid rgba(0, 0, 0, 0.1);
     -moz-column-rule: 1px solid rgba(0, 0, 0, 0.1);
          column-rule: 1px solid rgba(0, 0, 0, 0.1);
}

.info__title {
  margin-bottom: 1.25rem;
  width: 15rem;
  font-size: 0.875rem;
  line-height: 0.5625rem;
  letter-spacing: -0.006em;
  color: #22356F;
}

.info__address {
  margin-top: 6.25rem;
}

.info__hours {
  margin-top: 6.25rem;
}

.information {
  width: 12.5rem;
  /* .information__text */
}

.information__text {
  max-width: 11.875rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: -0.006em;
  color: rgba(34, 53, 111, 0.5);
}

.address {
  width: 12.5rem;
  /* .address__street */
  /* .address__contact */
}

.address__street {
  width: 9.625rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: -0.006em;
  color: rgba(34, 53, 111, 0.5);
}

.address__contact {
  width: 9.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: -0.006em;
  color: rgba(34, 53, 111, 0.5);
}

.address__contact a {
  color: #006DFF;
}

.hours {
  width: 12.5rem;
  /* .hours__info */
}

.hours__info {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: -0.006em;
  color: rgba(34, 53, 111, 0.5);
}

.webp .topic-3{ background: url(../img/strawberry.webp) no-repeat; }