@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  line-height: 163%;
  letter-spacing: -0.02em;
  background-color: #121517;
  color: #D9D9D9;
}

html {
  overflow-x: hidden;
}

h1, h2 {
  font-weight: 800;
}

a {
  text-decoration: none;
  color: #D9D9D9;
  transition: 0.7s;
}

a:hover {
  opacity: 0.7;
}

img {
  max-width: 100%;
}

.container {
  max-width: 1270px;
  margin: 0 auto;
}

.header {
  padding-top: 48px;
}

.header .container {
  display: flex;
  justify-content: flex-start;
  gap: 94px;
  
}

.logo {
  font-weight: 800;
  font-size: 37px;
  line-height: 109%;
  letter-spacing: -0.03em;
  background: linear-gradient(223deg, #237249 0%, #35c66b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header__nav {
  display: flex;
  gap: 94px;
}

.main_caontainer {
  display: flex;
  align-items: center;
  gap: 160px;
}

.home__title {
  position: relative;
  font-weight: 800;
  font-size: 80px;
  line-height: 109%;
  letter-spacing: -0.03em;
  color: #fff;
}

.home__title::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 80px;
  z-index: -1;
  width: 140px;
  height: 140px;
  border-radius: 100%;
  background: linear-gradient(245deg, rgba(35, 114, 73, 0.55) 0%, rgba(53, 198, 107, 0.73) 51.85%);
  filter: blur(90px);
}

.green {
  background: linear-gradient(223deg, #237249 0%, #35c66b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home__tabs {
  display: flex;
  gap: 17px;
  padding-top: 54px;
}

.select__tab {
  transition: 0.3s;
  font-weight: 639;
  font-size: 24px;
  line-height: 146%;
  padding: 20px 78px;
  text-align: center;
  border-radius: 83px;
  background: linear-gradient(210deg, #237249 0%, #35c66b 100%);
}

.select__tab:hover {
  background: linear-gradient(30deg, #237249 0%, #35c66b 100%);
  transition: 0.3s;
}

.more__tab {
  padding: 20px 54px;
  font-size: 24px;
  line-height: 146%;
  letter-spacing: -0.03em;
  border: 1.02px solid #dadada;
  border-radius: 83px;
  background: #121517;
}

.home__rating {
  margin-top: -44px;
}

.analytics__title {
 display: flex;
 gap: 67px;
 margin-bottom: -100px;
}

.analytics__text {
 display: flex;
 gap: 78px;
}

.users__title {
  font-weight: 400;
  font-size: 62px;
  line-height: 109%;
  letter-spacing: -0.03em;
  color: #fff;
}

.users__text {
  font-weight: 400;
  line-height: 144%;
}

.home__img {
  height: 628px;
  width: 468px;
}

.home_img-wrapper {
  position: relative;
}

.home_img-wrapper::after {
  content: "";
  position: absolute;
  right: 50px;
  bottom: 20px;
  z-index: -1;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  background: linear-gradient(245deg, rgba(35, 114, 73, 0.55) 0%, rgba(53, 198, 107, 0.73) 51.85%);
  filter: blur(110px);
}

.home_img-wrapper::before {
  content: "";
  width: 860px;
  height: 620px;
  position: absolute;
  right: -395px;
  bottom: -150px;
  background-image: url(images/icons/lines.svg);
  z-index: -3;
}

.benefits {
  padding-top: 111px;
  padding-bottom: 130px;
}

.benefits__container {
  display: flex;
  margin: 0 auto;
  max-width: 800px;
  max-height: 434px;
  justify-content: space-between;
  align-items: flex-start;
  padding-left: 70px;
  padding-right: 78px;
  text-align: center;
  border-radius: 46px;
  background: linear-gradient(
    230deg,
    #fff 3.94%,
    #e5e5e5 64.08%,
    #fbfbfb 88.62%
  );
}

.benefits__item {
  position: relative;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.benefits__img-wrapper {
  position: relative;
  width: 220px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefits__img-wrapper::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  border-radius: 50%;
  background: linear-gradient(245deg, #237249 0%, #35c66b 100%);
  box-shadow: 0 4px 41px rgba(0, 0, 0, 0.39);
  z-index: 1;
}

.benefits__icon-1 {
  bottom: -13px;
  left: 8px;
  width: 146px;
  height: 183px;
  position: relative;
  z-index: 5;
}

.benefits__icon-2 {
  bottom: -15px;
  width: 208px;
  height: 201px;
  position: relative;
  z-index: 5;
}

.benefits__icon-3 {
  bottom: -15px;
  width: 211px;
  height: 153px;
  position: relative;
  z-index: 5;
}

.benefits__title {
  margin-top: 24px;
  font-weight: 500;
  font-size: 32px;
  color: #121517;
}


.benefits__desc {
  margin-top: -20px;
  font-size: 18px;
  line-height: 150%;
  color: rgba(18, 21, 23, 0.9);
}

.benefits__container::before {
  content: url(images/icons/we_have.png);
  position: absolute;
  bottom: -60px;
  left: 400px;
  z-index: 5;
}

.info .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info__img {
  width: 557px;
  height: 767px;
}

.info__wrapper {
  padding-left: 327px;
}

.info__title {
  position: relative;
  margin: 0;
  padding-bottom: 63px;
  font-weight: 800;
  font-size: 80px;
  line-height: 109%;
  letter-spacing: -0.03em;
  color: #fff;
}

.info__title::before {
  content: "";
  position: absolute;
  right: 40px;
  top: 40px;
  z-index: -1;
  width: 140px;
  height: 140px;
  border-radius: 100%;
  background: linear-gradient(245deg, rgba(35, 114, 73, 0.55) 0%, rgba(53, 198, 107, 0.73) 51.85%);
  filter: blur(90px);
}

.info_desc {
  position: relative;
  padding-bottom: 63px;
  margin: 0;
}

.info_desc::before {
  content: "";
  width: 860px;
  height: 620px;
  background-repeat: no-repeat;
  position: absolute;
  left: 25px;
  top: 185px;
  background-image: url(images/icons/lines-half.svg);
  z-index: -3;
}

.info__kitchen {
  width: 447px;
  height: 235px;
}

.benefits__item::before {
  content: "";
  position: absolute;
  left: -130px;
  top: 40px;
  z-index: -1;
  width: 140px;
  height: 240px;
  border-radius: 100%;
  background: linear-gradient(245deg, rgba(35, 114, 73, 0.55) 0%, rgba(53, 198, 107, 0.73) 51.85%);
  filter: blur(90px);
}

.products {
  padding-top: 80px;
  padding-bottom: 100px;
}

.product__info {
  display: flex;
  align-items: center;
}

.product-info__title {
  position: relative;
  font-weight: 800;
  font-size: 80px;
  line-height: 109%;
  letter-spacing: -0.03em;
  color: #fff;
}

.product-info_text {
  padding-left: 75px;
  width: 444px;
  height: 132px;
}

.product-info__title::before {
  content: "";
  position: absolute;
  right: 130px;
  top: 40px;
  z-index: -1;
  width: 140px;
  height: 140px;
  border-radius: 100%;
  background: linear-gradient(245deg, rgba(35, 114, 73, 0.55) 0%, rgba(53, 198, 107, 0.73) 51.85%);
  filter: blur(90px);
}

.product__cards {
  display: flex;
  gap: 54px;
}

.card {
  border-radius: 29px;
  border: 1.02px solid #dadada;
  border-color: linear-gradient(90deg, #ffffff, black, #ffffff);
  padding-bottom: 32px;
  padding-right: 45px;
  padding-left: 45px;
  text-align: center;
}

.card-active {
  border-radius: 29px;
  border: 1.02px solid #35c66b;
  border-color: linear-gradient(90deg, #ffffff, black, #ffffff);
  padding-bottom: 32px;
  padding-right: 45px;
  padding-left: 45px;
  text-align: center;
}

.product__title {
  position: relative;
  margin: 0;
  padding-bottom: 25px;
  font-weight: 500;
  font-size: 32px;
  color: #fff;
}

.product__title::before {
  content: "";
  width: 860px;
  height: 620px;
  background-repeat: no-repeat;
  position: absolute;
  left: -17px;
  bottom: -330px;
  background-image: url(images/icons/circle.svg);
  z-index: -3;
}

.product__desc {
  margin: 0;
}

.product__row {
  margin: 0;
 display: flex;
 gap: 35px;
 margin: 0;
}

.product__price {
  font-weight: 500;
  font-size: 32px;
  color: #fff;
}

.product__size {
  padding-top: 15px;
}

.buy {
  font-weight: 639;
  font-size: 17px;
  line-height: 146%;
  width: 186px;
  height: 54px;
  color: #fff;
  padding: 15px 38px;
  border-radius: 60px;
  background: linear-gradient(210deg, #237249 0%, #35c66b 100%);
}

.events {
  padding-bottom: 100px;
}

.events__text {
  display: flex;
  align-items: center;
  gap: 72px;
}

.events__desc {
  padding-left: 360px;
  width: 850px;
  height: 99px;
  margin: 0;
}

.events__title {
  margin: 0;
  font-weight: 800;
  font-size: 80px;
  line-height: 109%;
  letter-spacing: -0.03em;
  color: #fff;
}