// ==============================
// ** Variables **
// ==============================

// Color Variables
$primary-gradient-start: #f76ab3;
$primary-gradient-end: #fc5296;
$secondary-gradient-start: #f78fc5;
$secondary-gradient-end: #f7619d;
$border-color: #b90a96;
$text-color: #fff;
$text-shadow-color: #c026a1;

// Font Size Variables
$font-size-large: 38px;
$font-size-medium: 30px;
$font-size-small: 24px;
$font-size-xsmall: 17px;

// Padding Variables
$padding-large: 15px 20px;
$padding-small: 10px 15px;

// ==============================
// ** Base Styles **
// ==============================

main {
  margin-top: 80px;

  section.hotelSlide {
    width: 100%;
    height: 500px;
    position: relative;

    // ** Slide Text Styling **
    .slideText {
      position: absolute;
      top: 40px;
      right: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      color: $text-color;

      h1 {
        font-size: $font-size-large;
      }

      h2 {
        font-size: $font-size-medium;
      }

      a {
        background: linear-gradient(
          to bottom,
          rgba(216, 216, 216, 0.368) 0%,
          rgba(115, 9, 9, 0) 100%
        );
        border: none;
        box-shadow: 0px 0px 12px 4px #9a0e7e;
        padding: $padding-large;
        font-weight: bold;
        font-size: 15px;
        border-radius: 7px;
        background-color: #d327b1;
        transition: 0.4s all ease;
        text-decoration: none;
        cursor: pointer;
        color: #fff;

        &:hover {
          background-color: #d327b1;
          box-shadow: 0px 0px 12px 4px #d327b1;
          padding: 16px 22px;
        }
      }
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

// ==============================
// ** Responsive Styles **
// ==============================

// Medium Screen (max-width: 1200px)
@media screen and (max-width: 1200px) {
  main {
    section.hotelSlide {
      .slideText {
        h1 {
          font-size: $font-size-medium;
        }

        h2 {
          font-size: $font-size-small;
        }

        a {
          font-size: 14px;
        }
      }
    }
  }
}

// Small Screens (max-width: 900px)
@media screen and (max-width: 900px) {
  main {
    section.hotelSlide {
      .slideText {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;

        h1 {
          font-size: $font-size-small;
        }

        h2 {
          font-size: 16px;
        }

        a {
          font-size: 14px;
        }
      }
    }
  }
}

// Very Small Screens (max-width: 650px)
@media screen and (max-width: 650px) {
  main {
    section.hotelSlide {
      .slideText {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;

        h1 {
          font-size: $font-size-small;
        }

        h2 {
          font-size: 16px;
        }

        a {
          font-size: 14px;
        }
      }
    }
  }
}

// Extra Small Screens (max-width: 500px)
@media screen and (max-width: 500px) {
  main {
    section.hotelSlide {
      .slideText {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;

        h1 {
          font-size: $font-size-xsmall;
        }

        h2 {
          font-size: 13px;
        }

        a {
          padding: $padding-small;
        }
      }
    }
  }
}
