@import "style.css";

/* =====HEADER===== */
.header .container {
  padding-bottom: 0px;
}

/* =====HERO===== */

.hero_index .container {
  position: relative;

  /* padding: 74px 30px 97px 21px; */
  padding-top: 192px;
  padding-bottom: 97px;

  background: linear-gradient(180deg, #017e0d 0%, #017e0d 100%);
}

.hero_index_price {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 35px;
  color: #fff;

  margin-bottom: 20px;
  margin-left: 21px;
}

.hero_index_title {
  width: 460px;
  padding-bottom: 87px;
  margin-left: 21px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 135px;
  line-height: 80%;
  color: #fff;
}

.hero_index_discont {
  position: absolute;
  bottom: 253px;
  left: 30px;

  width: 218px;
  height: 218px;
  border-radius: 100%;

  background-color: #faab34;

  display: flex;
  justify-content: center;
  align-items: center;
}

.discont_index_text {
  padding-top: 30px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 100px;
  line-height: 47%;
  text-align: center;
  color: #fff;

  span {
    font-size: 32px;
  }
}

.hero_index_post_text {
  margin-left: 265px;
  margin-bottom: 50px;
  width: 364px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 47px;
  line-height: 100%;
  color: #fff;
}

.hero_index_btn {
  margin-left: 265px;
  border-radius: 50px;
  padding: 22px 40px;
  width: 330px;
  height: 88px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 36px;
  line-height: 122%;
  color: #faab34;
}

.hero_index_img {
  position: absolute;
  bottom: -100px;
  right: 0;
}

.hero_index_ellipse_img {
  position: absolute;
  left: 466px;
  bottom: 209px;

  width: 583px;
}

/* ======DISCONT_MENU===== */

.discont_menu .container {
  display: flex;
}

.dicont_white {
  position: absolute;
  left: 30px;
  top: -28px;

  width: 218px;
  height: 218px;
  border-radius: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #fff;
}

.discont_white_text {
  width: 125px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 38px;
  line-height: 187%;
  text-align: center;
  color: #000;

  span {
    font-size: 70px;
  }
}

.dicont_orange {
  position: absolute;
  left: 88px;
  top: -28px;

  width: 218px;
  height: 218px;
  border-radius: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #faab34;
}

.discont_orange_text {
  width: 125px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 38px;
  line-height: 187%;
  text-align: center;
  color: #fff;

  span {
    font-size: 70px;
  }
}

.dicont_green {
  position: absolute;
  top: -44px;
  left: 88px;

  width: 218px;
  height: 218px;
  border-radius: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #017e0d;
}

.discont_green_text {
  width: 125px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 38px;
  line-height: 187%;
  text-align: center;
  color: #fff;

  span {
    font-size: 70px;
  }
}

.discont_menu_card1,
.discont_menu_card2,
.discont_menu_card3 {
  position: relative;
}

.discont_menu_card1 {
  width: 735px;
  height: 1370px;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    image-set(
      url("../images/img/discont_card1.avif") type("image/avif"),
      url("../images/img/discont_card1.webp") type("image/webp"),
      url("../images/img/discont_card1.png") type("image/.png")
    );
}

.discont_menu_card1_img {
  /* background-color: rgba(0, 0, 0, 0.5); */
}

.card1_info,
.card2_info,
.card3_info {
  position: absolute;
  bottom: 60px;
  left: 30px;
}

.discont_card1_pretext,
.discont_card2_pretext,
.discont_card3_pretext {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 40px;
  line-height: 178%;
  color: #fff;
}

.discont_card1_title,
.discont_card2_title,
.discont_card3_title {
  width: 548px;
  margin-top: -23px;
  margin-bottom: 44px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 61px;
  line-height: 116%;
  color: #fff;
}

.discont_menu_card_btn {
  border-radius: 50px;
  padding: 8px 66px;
  width: 354px;
  height: 60px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 32px;
  line-height: 138%;
  color: #faab34;
}

.discont_menu_wrap {
}

.discont_menu_card2 {
  width: 705px;
  height: 685px;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    image-set(
      url("../images/img/discont_card2.avif") type("image/avif"),
      url("../images/img/discont_card2.webp") type("image/webp"),
      url("../images/img/discont_card2.png") type("image/.png")
    );
}

.discont_menu_card2_img {
  /* background: rgba(0, 0, 0, 0.6); */
  /* filter: opacity(60%); */
}

.card2_info {
  left: 81px;
  bottom: 93px;
}

.discont_card2_pretext,
.discont_card3_pretext {
  font-size: 30px;
}

.discont_card2_title {
  margin-top: -15px;
  margin-left: 7px;
}

.discont_menu_card3 {
  width: 705px;
  height: 685px;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    image-set(
      url("../images/img/discont_card3.avif") type("image/avif"),
      url("../images/img/discont_card3.webp") type("image/webp"),
      url("../images/img/discont_card3.png") type("image/.png")
    );
}

.discont_menu_card3_img {
}

.card3_info {
  left: 88px;
}

.discont_card3_pretext {
}

.discont_card3_title {
  margin-top: -15px;
}

/* =====INGREDIENTS===== */

.ingredients .container {
  background: #017e0d;

  position: relative;

  padding-top: 73px;
  padding-bottom: 144px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.ingr_ellipse_img {
  position: absolute;
  top: 519px;
  left: 540px;

  width: 587px;
}

.ingr_title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 49px;
  line-height: 145%;
  color: #faab34;

  margin-bottom: 5px;
}

.ingr_posttitle {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 100px;
  line-height: 92%;
  text-align: center;
  color: #fff;

  width: 838px;
  margin-bottom: 170px;
}

.ingr_list {
  margin-left: 30px;
  margin-right: 30px;

  display: flex;
  flex-direction: column;
  gap: 157px;
}

.ingr_item:nth-child(2) {
  .ingr_item_list_item:first-child {
    .ingr_item_text {
      width: 341px;
      height: 197px;
    }
  }

  .ingr_item_list_item:last-child {
    width: 471px;
  }
}

.ingr_item_list {
  width: 1380px;

  display: flex;
  justify-content: space-between;
}

.ingr_item_list_item {
  display: flex;
  flex-direction: column;

  width: 421px;
}

.ingr_item_list_item:last-child {
  .ingr_item_title,
  .ingr_item_text {
    text-align: end;
  }
}

.ingr_item_title {
  margin-bottom: 27px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 50px;
  color: #fff;

  span {
    color: #d88200;
  }
}

.ingr_item_text {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 33px;
  color: #fff;
}

.ingr_img {
  position: absolute;
  top: 328px;
  left: 216px;
}

.ingr_space {
  position: absolute;
  top: 418px;
  left: 715px;
}

.line1 {
  position: absolute;
  top: 527px;
  left: 310px;

  svg {
    width: 248px;
    height: 188px;
  }
}

.line2 {
  position: absolute;
  top: 528px;
  left: 725px;

  svg {
    width: 277px;
    height: 84px;
  }
}

.line3 {
  position: absolute;
  top: 860px;
  left: 329px;

  svg {
    width: 299px;
    height: 166px;
  }
}

.line4 {
  position: absolute;
  top: 775px;
  left: 804px;

  svg {
    width: 296px;
    height: 93px;
  }
}

.line5 {
  position: absolute;
  top: 1286px;
  left: 391px;

  svg {
    width: 230px;
    height: 20px;
  }
}

.line6 {
  position: absolute;
  top: 1077px;
  left: 823px;

  svg {
    width: 289px;
    height: 220px;
  }
}

.ellipse17 {
  position: absolute;
  top: 1334px;
  left: 486px;
  /* z-index: 3; */
}

/* -=====BURGER_MENU ===== */

.burger_menu .container {
  padding-top: 100px;
  padding-bottom: 180px;

  display: flex;
  flex-direction: column;
  align-items: center;

  background: #f4f4f4;
}

.burger_menu_pre_text {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 49px;
  line-height: 145%;
  color: #faab34;

  margin-bottom: 5px;
}

.burger_menu_title {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 100px;
  line-height: 92%;
  text-align: center;
  color: #4d4d4d;

  margin-bottom: 10px;
}

.dell_line {
  margin-bottom: 50px;
}

.burger_menu_list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 90px;
  column-gap: 90px;
  justify-content: center;
}

.burger_item {
  position: relative;

  width: 400px;
  /* height: 639px; */
  padding-top: 226px;
}

.burger_img {
  position: absolute;
  bottom: 255px;
  left: 50%;
  transform: translateX(-50%);
}

.burger_item:nth-child(4) .burger_img {
  transform: translateX(-40%);
}

.burger_item_info {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: 128px;
  padding-bottom: 89px;

  border-radius: 15px;
  width: 400px;
  /* height: 379px; */

  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  background: #fff;
}

.burger_item_title {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 38px;
  color: #000;

  margin-bottom: 19px;
}

.burger_item_price {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 28px;
  color: #c90000;

  margin-bottom: 23px;
}

.burger_item_disc {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 18px;
  text-align: center;
  color: #000;

  width: 359px;
}

.burger_item_btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);

  background-color: transparent;
}

.burger_item_btn_plus {
}

/* =====TESTIMO===== */

.testimo .container {
  width: 1440px;
  height: 1864px;
  background-image: image-set(
    url("../images/img/testimo_bg.avif") type("image/avif"),
    url("../images/img/testimo_bg.webp") type("image/webp"),
    url("../images/img/testimo_bg.png") type("image/.png")
  );

  position: relative;
}

.wrap {
  position: absolute;
  left: 0;
  bottom: 87px;

  display: flex;
  flex-direction: column;
  align-items: center;

  border-radius: 0 15px 0 0;
  width: 1163px;
  height: 1866px;

  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25);
  background: #fff;

  box-sizing: border-box;
  padding: 119px 22px 124px 30px;
}

.testimo1_img {
  position: absolute;
}

.testimo2_img {
  position: absolute;
}

.testimo_line {
  position: absolute;
}

.testimo_pretitle {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 50px;
  color: #d88200;

  margin-bottom: 5px;
}

.testimo_title {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 100px;
  color: #4d4d4d;

  margin-bottom: 205px;
}

.testimo_list {
  display: flex;
  gap: 84px;

  margin-bottom: 233px;
}

.test1 {
  .test_text {
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 39px;
    text-align: justify;
    color: #c90000;

    width: 510px;
  }
}

.user {
  display: flex;
  gap: 19px;
  align-items: center;

  margin-bottom: 37px;
}

.user1 {
}

.user_info {
}

.user_name {
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 30px;
  color: #414141;

  margin-bottom: 10px;
}

.user_reviews {
  font-family: var(--second-family);
  font-weight: 300;
  font-size: 25px;
  color: #414141;
}

.rating {
  display: flex;
  gap: 8px;
  align-items: center;

  margin-bottom: 20px;
}

.star_list {
  display: flex;
  gap: 6px;
}

.star_item {
}

.star_img {
}

.rating_text {
  font-family: var(--second-family);
  font-weight: 300;
  font-size: 25px;
  color: #414141;
}

.test_text {
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 22px;
  line-height: 150%;
  text-align: justify;
  color: #4d4d4d;
}

.test_col_right {
  display: flex;
  flex-direction: column;
  gap: 43px;
}

.test_item {
}

.user2 {
}

.user3 {
}

.company_list {
  display: flex;
  gap: 134px;
  align-items: end;
}

.company_item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.company_item:nth-child(2) {
  .company_name {
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 28px;
    text-align: justify;
    color: #000;
  }
}

.company_item:nth-child(3) {
  .company_name {
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 45px;
    text-align: justify;
    color: #414141;
  }
}

.company_icon {
}

.company_name {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 28px;
  text-align: justify;
  color: #3506bd;
}

/* =====APP INFO===== */

.APP_info .container {
  padding-top: 280px;
  padding-bottom: 367px;
  width: 1440px;

  background: linear-gradient(180deg, #017e0d 0%, #309600 100%);

  position: relative;
}

.iphone_img {
  position: absolute;
  top: 164px;
  left: 30px;
}

.discont_burger_img {
  position: absolute;
  top: 610px;
  left: 454px;
}

.app_discont {
  margin-left: 671px;
  width: 739px;
}

.app_discont_title {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 93px;
  text-align: right;
  color: #fff;

  margin-bottom: 13px;
}

.app_discont_text {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 48px;
  color: #fff;

  margin-bottom: 103px;
}

.app_connect {
  display: flex;
  align-items: center;
  gap: 20px;
}

.app_link {
}

.google_play_store_img,
.IOS_app_store_img {
  height: 101px;
}

/* =====FOOTER===== */

.footer .container {
  padding-top: 33px;
  padding-bottom: 39px;
}

.footer_wrap1,
.footer_wrap2 {
  margin-left: 30px;
  margin-right: 30px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer_nav {
}

.footer_nav_list {
  display: flex;
  gap: 28px;
}

.footer_nav_item {
}

.footer_nav_item_link {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 28px;
  color: #414141;
}

.social {
  display: flex;
  gap: 10px;
}

.social_item {
}

.social_item_link {
}

.footer_line {
  width: 1367px;
  height: 0;
  border: 1px solid #000;

  margin-right: auto;
  margin-left: auto;
  margin-top: 59px;
  margin-bottom: 48px;
}

.footer_wrap2 {
}

.footer_copyright {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 20px;
  color: #414141;
}

.footer_view {
  p {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 28px;
    color: #414141;
    text-decoration: underline;
  }
}