:root {
  --primary: #091320;
  --primaryLight: #18212e;
  --secondary: #3bc080;
  --secondayLight: #4b9c5c;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
::-webkit-scrollbar {
  width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--secondayLight);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--secondayLight);
}
body {
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
  background-color: var(--primary);
  overflow-x: hidden !important;
}

.banner {
  background-image: url("../assets/banner.webp");
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 1.2;
}
.banner-heading {
  font-size: 5.5rem;
  line-height: 1.2;
  color: var(--primary);
  word-spacing: 1.5;
  animation: 1s ease-out 1s 1 slideInLeft;
}
.banner-content {
  color: var(--primary);
  animation: 1s ease-out 1s 1 slideInLeft;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 50%
  );
}
.heading-small {
  color: var(--primary);
  animation: 1s ease-out 1s 1 slideInLeft;
}

.link {
  font-size: 1.1rem;
  color: var(--primary);
  font-weight: 500;
}
.link:hover {
  transform: scale(1.2);
  cursor: pointer;
}

.button-section {
  animation: 1s ease-out 1s 1 slideInLeft;
}

.button {
  background-color: var(--secondary);
}
.button-arrow {
  background-color: #3dd79f;
}

.offers-card {
  background-color: var(--primaryLight);
}
.offers-card-2 {
  background-color: var(--secondayLight);
}

.card-text {
  color: var(--primary);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 50%
  );
}

.package-card {
  background-color: var(--secondayLight);
}

.swiper-slide-prev {
  opacity: 0;
}

.map-container {
  background-color: var(--primaryLight);
}

.footer {
  background-color: var(--primaryLight);
}

.booking-form-section {
  background-color: var(--primaryLight);
}

.form-control {
  font-size: 14px;
  color: #74757a;
  padding: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}
.form-control:focus {
  border: none;
  outline: 2px solid var(--secondayLight);
}

.form-btn {
  background-color: var(--secondayLight) !important;
}

.packages-section {
  background-color: var(--primary);
}

/* Animations */
@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}

/* media queries */
@media (min-width: 280px) and (max-width: 1080px) {
  .banner {
    background-image: url("../assets/banner.webp");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 1;
  }
  .banner-heading {
    font-size: 2rem;
    line-height: 1.2;
    color: var(--primary);
    word-spacing: 1.5;
    padding-left: 0.8rem;
    animation: 1s ease-out 1s 1 slideInLeft;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0) 50%
    );
  }
  .banner-content {
    color: #ffffff;
    animation: 1s ease-out 1s 1 slideInLeft;
    background: transparent !important;
  }
}