/* =========================================
   AWARDS SECTION
========================================= */

.awards_section {
  position: relative;
  overflow: hidden;

  padding: 110px 0 120px;

  background: #ffffff;

  color: #111111;
}

/* =========================================
   HEADING
========================================= */

.awards_section .awards_heading {
  position: relative;

  margin-bottom: 35px;
}

/* =========================================
   INTRO
========================================= */

.awards_section .awards_intro {
  margin-bottom: 65px;
}

.awards_section .awards_intro_label {
  display: flex;
  align-items: center;

  gap: 13px;

  color: #111111;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2px;
}

.awards_section .awards_intro_label span {
  display: block;

  width: 45px;
  height: 1px;

  background: #111111;

  transition: width 0.5s ease;
}

.awards_section .awards_intro:hover .awards_intro_label span {
  width: 75px;
}

.awards_section .awards_intro_text {
  margin: 0;

  max-width: 600px;

  color: #666666;

  font-size: 14px;

  line-height: 1.8;

  letter-spacing: 0.2px;
}

/* =========================================
   SLIDER
========================================= */

.awards_section .awards_slider_wrap {
  position: relative;
}

/* =========================================
   SWIPER
========================================= */

.awards_section .awards_swiper {
  width: 100%;

  overflow: visible;
}

.awards_section .awards_swiper .swiper-slide {
  height: auto;

  display: flex;
}

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

.awards_section .award_card {
  position: relative;

  width: 100%;

  min-height: 430px;

  padding: 35px 35px 30px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  background: #f5f5f5;

  border: 1px solid #e5e5e5;

  overflow: hidden;

  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}

/* =========================================
   CARD BACKGROUND NUMBER
========================================= */

.awards_section .award_card::before {
  content: attr(data-number);

  position: absolute;

  right: -15px;
  bottom: -45px;

  font-size: 180px;

  line-height: 1;

  font-weight: 800;

  color: rgba(0, 0, 0, 0.035);

  pointer-events: none;
}

/* =========================================
   HOVER
========================================= */

.awards_section .award_card:hover {
  background: #111111;

  border-color: #111111;

  transform: translateY(-10px);

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.16);
}

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

.awards_section .award_card_top {
  position: relative;

  display: flex;

  justify-content: space-between;

  align-items: center;

  z-index: 2;
}

.awards_section .award_number {
  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2px;

  color: #111111;

  transition: color 0.4s ease;
}

.award_year {
  padding: 6px 11px;

  border: 1px solid #d7d7d7;

  color: #555555;

  font-size: 9px;

  letter-spacing: 1.5px;

  transition:
    color 0.4s ease,
    border-color 0.4s ease;
}

.awards_section .award_card:hover .award_number {
  color: #ffffff;
}

.awards_section .award_card:hover .award_year {
  color: #ffffff;

  border-color: rgba(255, 255, 255, 0.35);
}

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

.awards_section .award_icon_wrapper {
  position: relative;

  width: 110px;
  height: 110px;

  margin: 15px auto 10px;

  display: flex;

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

.award_icon_ring {
  width: 80px;
  height: 80px;

  display: flex;

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

  border: 1px solid #111111;

  border-radius: 50%;

  color: #111111;

  font-size: 25px;

  transition:
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.5s ease,
    color 0.5s ease,
    border-color 0.5s ease;
}

.awards_section .award_icon_wrapper::before,
.awards_section .award_icon_wrapper::after {
  content: "";

  position: absolute;

  border: 1px solid #d8d8d8;

  border-radius: 50%;

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

.awards_section .award_icon_wrapper::before {
  inset: 8px;
}

.awards_section .award_icon_wrapper::after {
  inset: 0;

  border-style: dashed;
}

.awards_section .award_card:hover .award_icon_ring {
  background: #ffffff;

  color: #111111;

  border-color: #ffffff;

  transform: scale(1.08) rotate(-8deg);
}

.awards_section .award_card:hover .award_icon_wrapper::before {
  border-color: rgba(255, 255, 255, 0.3);

  transform: rotate(30deg);
}

.awards_section .award_card:hover .award_icon_wrapper::after {
  border-color: rgba(255, 255, 255, 0.4);

  transform: rotate(-45deg);
}

/* =========================================
   CENTER DOT
========================================= */

.awards_section .award_icon_dot {
  position: absolute;

  top: 2px;
  right: 18px;

  width: 5px;
  height: 5px;

  background: #111111;

  border-radius: 50%;

  transition: background 0.4s ease;
}

.awards_section .award_card:hover .award_icon_dot {
  background: #ffffff;
}

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

.awards_section .award_content {
  position: relative;

  z-index: 2;

  text-align: center;

  padding: 0 5px;
}

.awards_section .award_label {
  display: block;

  margin-bottom: 13px;

  color: #888888;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2.5px;

  transition: color 0.4s ease;
}

.awards_section .award_content h3 {
  margin: 0 auto;

  max-width: 330px;

  color: #111111;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 21px;

  line-height: 1.35;

  font-weight: 400;

  text-transform: uppercase;

  transition: color 0.4s ease;
}

.awards_section .award_content p {
  max-width: 340px;

  margin: 15px auto 0;

  color: #777777;

  font-size: 12px;

  line-height: 1.7;

  transition: color 0.4s ease;
}

.awards_section .award_card:hover .award_label {
  color: #aaaaaa;
}

.awards_section .award_card:hover .award_content h3 {
  color: #ffffff;
}

.awards_section .award_card:hover .award_content p {
  color: #aaaaaa;
}

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

.awards_section .award_card_footer {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 25px;

  z-index: 3;
}

.awards_section .award_line {
  width: 55px;
  height: 1px;

  background: #111111;

  transition:
    width 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s ease;
}

.awards_section .award_card:hover .award_line {
  width: 100px;

  background: #ffffff;
}

.awards_section .award_arrow {
  width: 34px;
  height: 34px;

  display: flex;

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

  border: 1px solid #cccccc;

  border-radius: 50%;

  color: #111111;

  font-size: 9px;

  transform: rotate(0deg);

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

.awards_section .award_card:hover .award_arrow {
  background: #ffffff;

  color: #111111;

  border-color: #ffffff;

  transform: rotate(45deg);
}

/* =========================================
   NAVIGATION
========================================= */

.awards_section .awards_navigation {
  margin-top: 35px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 25px;
}

.awards_section .awards_nav_button {
  width: 42px;
  height: 42px;

  display: flex;

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

  background: #ffffff;

  border: 1px solid #d8d8d8;

  border-radius: 50%;

  color: #111111;

  font-size: 11px;

  cursor: pointer;

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

.awards_section .awards_nav_button:hover {
  background: #111111;

  color: #ffffff;

  border-color: #111111;

  transform: translateY(-3px);
}

/* =========================================
   PAGINATION
========================================= */

.awards_section .awards_pagination_text {
  display: flex;

  align-items: center;

  gap: 12px;

  color: #777777;

  font-size: 9px;

  letter-spacing: 2px;
}

.awards_section .awards_pagination_text span:first-child {
  color: #111111;

  font-weight: 700;
}

.awards_section .awards_pagination_text i {
  width: 55px;
  height: 1px;

  display: block;

  background: #111111;
}

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

.awards_section .awards_bottom {
  margin-top: 75px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 20px;

  color: #999999;

  font-size: 8px;

  font-weight: 600;

  letter-spacing: 3px;
}

.awards_section .awards_bottom_line {
  width: 45px;
  height: 1px;

  background: #dddddd;
}

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

.awards_section .awards_reveal {
  opacity: 0;

  transform: translateY(45px);

  transition:
    opacity 0.9s ease,
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.awards_section .awards_visible {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================
   STAGGER
========================================= */

.awards_section .awards_swiper .swiper-slide:nth-child(1) {
  transition-delay: 0.1s;
}

.awards_section .awards_swiper .swiper-slide:nth-child(2) {
  transition-delay: 0.2s;
}

.awards_section .awards_swiper .swiper-slide:nth-child(3) {
  transition-delay: 0.3s;
}

/* =========================================
   TABLET
========================================= */

@media (min-width: 576px) and (max-width: 991px) {
  .awards_section {
    padding: 90px 0 100px;
  }

  .awards_section .awards_intro {
    margin-bottom: 50px;
  }

  .awards_section .award_card {
    min-height: 410px;

    padding: 30px 25px 25px;
  }

  .awards_section .award_content h3 {
    font-size: 19px;
  }
}

/* =========================================
   MOBILE
========================================= */

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

  .awards_section .awards_intro {
    margin-bottom: 38px;
  }

  .awards_section .awards_intro_label {
    margin-bottom: 18px;
  }

  .awards_section .awards_intro_text {
    font-size: 13px;
  }

  .awards_section .award_card {
    min-height: 400px;

    padding: 25px 22px 22px;
  }

  .awards_section .award_icon_wrapper {
    width: 95px;
    height: 95px;
  }

  .award_icon_ring {
    width: 70px;
    height: 70px;

    font-size: 22px;
  }

  .awards_section .award_content h3 {
    font-size: 18px;
  }

  .awards_section .award_content p {
    font-size: 11px;
  }

  .awards_section .awards_navigation {
    margin-top: 25px;

    gap: 18px;
  }

  .awards_section .awards_nav_button {
    width: 38px;
    height: 38px;
  }

  .awards_section .awards_bottom {
    margin-top: 50px;

    gap: 12px;

    font-size: 7px;
  }

  .awards_section .awards_bottom_line {
    width: 25px;
  }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {
  .awards_section .awards_reveal,
  .awards_section .award_card,
  .award_icon_ring,
  .awards_section .award_icon_wrapper::before,
  .awards_section .award_icon_wrapper::after,
  .awards_section .award_line,
  .awards_section .award_arrow,
  .awards_section .awards_nav_button {
    transition: none !important;

    animation: none !important;
  }
}