html-css-practice-two/src/styles/pages/home/_welcome.scss

.delivery-text-box {
  position: relative;
  display: inline-block;
  font-size: $fs-xx-lg;
}

.welcome {
  background: linear-gradient(
    180deg,
    rgba(245, 71, 72, 0.06) 0%,
    rgba(245, 71, 72, 0) 100%
  );

  padding-top: 50px;

  &__container {
    @extend %d-flex;
    @include flex-layout($justify: center, $direction: column);

    margin: auto;
    padding-top: 67px;
  }
  // Start banner
  &__banner-container {
    @extend %d-flex;
    @include flex-layout($justify: center, $direction: column);
    @include size(428px, 417px);

    position: relative;
  }

  &__main-image {
    text-align: right;
    padding-right: 25px;
    z-index: 1;
  }

  &__food-img:nth-child(2) {
    @extend %absolute;
    @include set-location($bottom: 75px, $left: 12px);
  }

  &__food-img:nth-child(3) {
    @extend %absolute;
    @include set-location($bottom: -7px, $left: 110);
  }

  &__food-img:nth-child(4) {
    @extend %absolute;
    @include set-location($bottom: 0, $right: 80px);
  }

  &__food-img:nth-child(5) {
    @extend %absolute;
    @include set-location($bottom: 85px, $right: 15px);
  }

  &__review-card {
    @extend %absolute;
    @include set-location($top: 100px, $left: 10px);
  }

  &__rate-card {
    @extend %absolute;
    @include set-location($top: 103px, $right: -5px);
  }

  &__background-banner {
    @extend %absolute;
    @include size(100%, 100%);
  }

  &__lines-background {
    @extend %absolute;
    @include set-location($top: -85px, $right: 1px);
  }

  &__arrow-img-up {
    @extend %absolute;
    @include set-location($top: -15px, $right: 40px);

    z-index: -1;
  }

  &__mint-img {
    @extend %absolute;
    @include set-location($bottom: 90px, $right: 0);
  }
  // End banner

  // Start content
  &__content {
    @include size(380px, auto);
    @extend %d-flex;
    @include flex-layout($direction: column);

    position: relative;
    padding-top: 58px;
    padding-inline: 24px;
  }

  &__arrow-down-img-wrapper {
    @extend %absolute;

    display: none;
  }

  &__orange-img-wrapper {
    @extend %absolute;
    @include set-location($top: 7px, $right: 0);
  }

  &__text-box {
    @extend %d-flex;
    @include flex-layout($align: center, $gap: 6px);
    @include size(fit-content);

    background-color: #feeae9;
    border-radius: 100px;
    padding: 4px;
    margin-left: 10px;
  }

  &__text-box-content {
    font-family: $secondary-font;
    font-size: $fs-xx-sm;
  }

  &__icon-container {
    @include size(20px, 20px);
  }

  &__love-icon {
    @include size(100%, 100%);
  }

  &__head-arrow-container {
    @include size(13px, 7.3px);
    @extend %absolute;
    @include set-location($right: 107px);
  }

  &__heading {
    margin-top: 16px;
    font-size: $fs-xx-lg;
    text-transform: capitalize;
    font-weight: 900;
  }

  &__underline-img-container {
    @extend %absolute;
    @include set-location($bottom: -15px, $left: 0);
  }

  &__description {
    margin-top: 36px;
    font-size: $fs-x-md;
    line-height: 140%;
    letter-spacing: -0.2px;
    max-width: 517px;
  }

  &__search-form {
    @extend %d-flex;

    margin-top: 30px;
    border-radius: 100px;
    border: 0.5px solid $black;
    max-width: 471px;
  }

  &__search-icon-wrapper {
    @include size(24px, 24px);

    padding: 14px;
  }

  &__text-input {
    @include size(100%, auto);

    border: none;

    &:focus {
      outline: none;
    }
  }

  &__submit-btn {
    @include size(42px, 42px);

    background-color: #fdc55e;
    border-radius: 100px;
    border: none;
    padding: 9px;
    margin: 5px 4px;
    cursor: pointer;

    &:hover {
      background-color: $secondary-light-color;
      transition: 0.2s;
    }
  }

  &__action-container {
    @extend %d-flex;
    @include flex-layout($justify: space-between, $gap: 10px);

    width: 100%;
    margin-top: 35px;
    max-width: 376px;
  }

  &__watch-video-link {
    @extend %d-flex;
    @include flex-layout($align: center, $gap: 21px);

    position: relative;
    &:hover {
      .welcome__play-icon-wrapper {
        transform: scale(1.2);
        transition: 0.2s;
      }

      .welcome__text-download-btn {
        color: $primary-color;
      }
    }
  }

  &__play-icon {
    color: $primary-color;
  }

  &__play-icon-wrapper {
    @extend %absolute;
    @include size(12px, 17px);

    padding: 17.5px 20px;
    border-radius: 50px;
    background-color: $white;
    box-shadow: 0 25px 50px 3px rgba($color: $primary-color, $alpha: 0.4);
    transition: width 0.5s;
    line-height: 100%;
  }

  &__text-download-btn {
    color: $gray;
    font-size: $fs-sm;
    font-family: $tertiary-font;
    margin-left: 70px;
    transition: 0.5s;
    z-index: 1;
  }

  &__download-btn:hover {
    background-color: $secondary-color;
    transition: 0.2s;
  }

  &__slider-container {
    @extend %absolute;

    display: none;
  }
  // End content
}

.slider-container {
  display: none;
}

@media screen and (min-width: 600px) {
  .welcome {
    &__container {
      max-width: unset;
    }

    &__banner-container {
      @include size(auto, auto);
    }

    &__main-image {
      @include size(355px, 417px);

      margin-inline: auto;
      position: relative;
      padding-left: 50px;
    }

    &__food-img:nth-child(2) {
      @extend %absolute;
      @include set-location($bottom: 75px, $left: 14px);
    }

    &__food-img:nth-child(3) {
      @extend %absolute;
      @include set-location($bottom: -7px, $left: 105px);
    }

    &__food-img:nth-child(4) {
      @extend %absolute;
      @include set-location($bottom: 0, $right: 80px);
    }

    &__food-img:nth-child(5) {
      @extend %absolute;
      @include set-location($bottom: 85px, $right: 15px);
    }

    &__review-card {
      @extend %absolute;
      @include set-location($top: 100px, $left: 10px);
    }

    &__rate-card {
      @extend %absolute;
      @include set-location($top: 103px, $right: 0);
    }

    &__content {
      width: unset;
      padding-inline: unset;
      padding-left: 24px;
    }

    &__underline-img-container {
      @include set-location($bottom: 0px, $left: 0);
    }

    &__underline-img {
      width: 180px;
    }
  }
}

@media screen and (min-width: 840px) {
  .welcome {
    &__container {
      @include flex-layout(
        $direction: row-reverse,
        $justify: space-between,
        $align: center
      );

      padding-top: 130px;
      width: 100%;
    }

    // Start content

    &__head-arrow-container {
      display: none;
    }

    &__content {
      @include size(auto, auto);

      padding-left: 70px;
      padding-right: 0;
      padding-top: 70px;
      max-width: 560px;
    }

    &__orange-img-wrapper {
      @include set-location($top: 170px, $right: -50px);

      transition: 0.2s;
    }

    &__heading {
      font-size: $fs-xxx-lg;
      line-height: 125%;
    }

    &__underline-img {
      width: unset;
    }

    &__underline-img-container {
      @include set-location($bottom: -10px, $left: 8px);
    }

    &__description {
      font-size: $fs-lg;
    }

    &__watch-video-link:hover {
      .welcome__play-icon-wrapper {
        transform: unset;
        width: 100%;
        background-color: $secondary-color;
      }

      .welcome__text-download-btn {
        color: $white;
      }
    }

    &__arrow-down-img-wrapper {
      @include set-location($top: -50px, $left: 220px);

      display: block;
      transition: 0.2s;
    }

    &__search-form {
      @include size(auto, 54px);
    }

    &__slider-container {
      display: block;
      @include set-location($bottom: -135px, $left: 65px);
    }

    // End content
  }
}

@media screen and (min-width: 1200px) {
  .welcome {
    padding-top: 0;

    // Start banner
    &__banner {
      padding-right: 96px;
    }

    &__banner-container {
      @include size(100%, auto);
    }

    &__main-image {
      @include size(570px, 655px);

      padding-right: 29px;
    }

    &__arrow-img-up {
      @include set-location($top: 4px, $right: -34px);
    }

    &__orange-img-wrapper {
      @include set-location($top: 110px, $right: -50px);
    }

    &__arrow-down-img-wrapper {
      @include set-location($top: -40px, $left: 223px);
    }

    &__lines-background {
      @include set-location($top: -85px, $right: -96px);
    }

    &__review-card {
      @include set-location($top: 160px, $left: 1px);
    }

    &__rate-card {
      @include set-location($top: 168px, $right: -62px);
    }

    &__food-img:nth-child(2) {
      @include set-location($bottom: 108px, $left: -18px);
    }

    &__food-img:nth-child(3) {
      @include set-location($bottom: -29px, $left: 151px);
    }

    &__food-img:nth-child(4) {
      @include set-location($bottom: -19px, $right: 107px);
    }

    &__food-img:nth-child(5) {
      @include set-location($bottom: 125px, $right: -1px);
    }

    // End banner

    &__container {
      @include flex-layout($align: unset, $gap: 50px);
    }

    &__content {
      padding-top: 81px;
    }

    &__heading {
      max-width: 530px;
    }

    &__text-box {
      padding-left: 1px;
    }

    .delivery-text-box {
      font-size: $fs-xxx-lg;
    }

    &__description {
      margin-top: 29px;
    }

    &__search-form {
      margin-top: 24px;
    }

    &__slider-container {
      @include set-location($bottom: -58px, $left: 68px);
    }
  }
}