/* =========================================
   AMENITIES SECTION
========================================= */

.amenities_section {
  position: relative;
  overflow: hidden;
  padding: 70px 0 ;
  /* background: #ffffff; */
  color: #111111;
}

/* =========================================
   CONTAINER
========================================= */

.amenities_section .amenities_container {
  position: relative;
  z-index: 2;
  width: min(1380px, calc(100% - 80px));
  margin: 0 auto;
}

/* =========================================
   HEADER
========================================= */

.amenities_section .amenities_header {
  margin-bottom: 30px;
}

/* =========================================
   GRID
========================================= */

.amenities_section .amenities_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  border-top: 1px solid #dedede;
  border-left: 1px solid #dedede;
}

/* =========================================
   CARD
========================================= */

.amenities_section .amenity_card {
  position: relative;

  min-height: 300px;
  padding: 28px;

  display: flex;
  flex-direction: column;

  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;

  background: rgba(255, 255, 255, 0.85);

  overflow: hidden;

  transition:
    background 0.5s ease,
    color 0.5s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay: var(--delay);
}

.amenities_section .amenity_card::before {
  content: "";

  position: absolute;
  inset: 0;

  background: #111111;

  transform: translateY(101%);

  transition: transform 0.55s cubic-bezier(0.77, 0, 0.18, 1);

  z-index: -1;
}

.amenities_section .amenity_card:hover {
  color: #ffffff;
  transform: translateY(0px);
}

.amenities_section .amenity_card:hover::before {
  transform: translateY(0);
}

/* =========================================
   CARD TOP
========================================= */

.amenities_section .amenity_top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 45px;
}

.amenity_number {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #999999;

  transition: color 0.4s ease;
}

.amenity_arrow {
  font-size: 18px;
  color: #999999;

  transform: rotate(0deg);

  transition:
    transform 0.4s ease,
    color 0.4s ease;
}

.amenities_section .amenity_card:hover .amenity_arrow {
  color: #ffffff;
  transform: translate(4px, -4px);
}

.amenities_section .amenity_card:hover .amenity_number {
  color: #777777;
}

/* =========================================
   ICON
========================================= */

.amenity_icon {
  width: 54px;
  height: 54px;

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

  margin-bottom: 30px;

  border: 1px solid #cfcfcf;
  border-radius: 50%;

  font-size: 20px;
  font-weight: 300;

  transition:
    background 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    transform 0.5s ease;
}

.amenities_section .amenity_card:hover .amenity_icon {
  background: #ffffff;
  color: #111111;
  border-color: #ffffff;

  transform: rotate(10deg) scale(1.08);
}

/* =========================================
   CONTENT
========================================= */

.amenity_content {
  margin-top: auto;
}

.amenity_content h3 {
  margin: 0 0 12px;

  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.amenity_content p {
  max-width: 230px;

  margin: 0;

  font-size: 12px;
  line-height: 1.7;

  color: #888888;

  transition: color 0.4s ease;
}

.amenities_section .amenity_card:hover .amenity_content p {
  color: #bcbcbc;
}

/* =========================================
   BOTTOM LINE
========================================= */

.amenities_section .amenity_bottom_line {
  position: absolute;
  left: 28px;
  bottom: 0;

  width: 0;
  height: 2px;

  background: #ffffff;

  transition: width 0.5s ease;
}

.amenities_section .amenity_card:hover .amenity_bottom_line {
  width: calc(100% - 56px);
}

/* =========================================
   BUTTON
========================================= */

.amenities_section .amenities_action {
  display: flex;
  justify-content: center;

  margin-top: 55px;
}

.amenities_section .amenities_view_btn {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 18px;

  padding: 0;

  border: 0;
  background: transparent;

  color: #111111;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;

  cursor: pointer;
}

.amenities_section .amenities_view_btn::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -9px;

  width: 0;
  height: 1px;

  background: #111111;

  transition: width 0.4s ease;
}

.amenities_section .amenities_view_btn:hover::after {
  width: 100%;
}

.amenities_section .amenities_btn_icon {
  width: 35px;
  height: 35px;

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

  border: 1px solid #111111;
  border-radius: 50%;

  font-size: 16px;

  transition:
    background 0.4s ease,
    color 0.4s ease,
    transform 0.4s ease;
}

.amenities_section .amenities_view_btn:hover .amenities_btn_icon {
  background: #111111;
  color: #ffffff;

  transform: translateX(5px) rotate(45deg);
}

.amenities_section .rotate_icon {
  transform: rotate(135deg) !important;
}

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

.amenities_section .amenities_footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 35px;
  align-items: center;

  margin-top: 50px;
}

.amenities_section .footer_line {
  height: 1px;
  background: #dedede;
}

.amenities_section .amenities_footer p {
  display: flex;
  flex-direction: column;

  margin: 0;

  text-align: center;

  font-size: 10px;
  letter-spacing: 0.2em;
  color: #999999;
}

.amenities_section .amenities_footer strong {
  margin-top: 5px;

  font-size: 13px;
  color: #111111;
}

/* =========================================
   REVEAL ANIMATION
========================================= */

.amenities_section .amenities_reveal {
  /* opacity: 0; */
  /* transform: translateY(45px); */

  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay: var(--delay, 0ms);
}

.amenities_section .amenities_reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0);
}

  /* =========================================
    RESPONSIVE
========================================= */

@media (min-width: 768px) and (max-width: 991px) {
  .amenities_section .amenities_grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .amenities_section {
    padding: 80px 0;
  }

  .amenities_section .amenities_container {
    width: min(100% - 36px, 600px);
  }

  .amenities_section .amenities_header {
    display: block;
    margin-bottom: 50px;
  }

  .amenities_section .amenities_grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .amenities_section .amenity_card {
    min-height: 260px;
  }

  .amenities_section .amenities_footer {
    grid-template-columns: 1fr;
    gap: 20px;

    margin-top: 70px;
  }

  .amenities_section .amenities_footer p {
    order: -1;
  }
}

@media (min-width: 0px) and (max-width: 575.98px) {
  .amenities_section {
    padding: 65px 0;
  }

  .amenities_section .amenities_container {
    width: calc(100% - 28px);
  }

  .amenities_section .amenity_card {
    min-height: 240px;
    padding: 22px;
  }

  .amenities_section .amenity_top {
    margin-bottom: 35px;
  }

  .amenities_section .amenity_bottom_line {
    left: 22px;
  }

  .amenities_section .amenity_card:hover .amenity_bottom_line {
    width: calc(100% - 44px);
  }

  .amenities_section .amenities_grid {
    grid-template-columns: 1fr;
  }
}