/* =========================================
   VALUES SECTION
========================================= */

.values_section {
  position: relative;
  overflow: hidden;

  padding: 110px 0 130px;

  /* background: #ffffff; */
}

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

.values_section .values_heading {
  position: relative;

  margin-bottom: 65px;
}

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

.values_section .values_grid {
  display: grid;

  grid-template-columns:
    1.25fr
    0.75fr
    0.75fr;

  grid-template-rows:
    250px
    250px
    250px;

  gap: 16px;
}

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

.values_section .value_card {
  position: relative;

  overflow: hidden;

  min-height: 200px;

  background: #111111;

  cursor: pointer;

  isolation: isolate;
}

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

.values_section .value_business {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.values_section .value_quality {
  grid-column: 2 / span 2;
  grid-row: 1;
}

.values_section .value_prudence {
  grid-column: 2;
  grid-row: 2;
}

.values_section .value_respect {
  grid-column: 3;
  grid-row: 2;
}

.values_section .value_humility {
  grid-column: 1;
  grid-row: 3;
}

.values_section .value_pride {
  grid-column: 2 / span 2;
  grid-row: 3;
}

/* =========================================
   IMAGE
========================================= */

.values_section .value_image {
  position: absolute;

  inset: 0;

  overflow: hidden;

  z-index: -3;
}

.values_section .value_image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: fill;

  filter: grayscale(100%);

  transform: scale(1.08);

  transition:
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s ease;
}

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

.values_section .value_card:hover .value_image img {
  transform: scale(1.02);

  filter: grayscale(20%);
}

/* =========================================
   OVERLAY
========================================= */

.values_section .value_overlay {
  position: absolute;

  inset: 0;

  z-index: -2;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.9) 100%
  );

  transition: background 0.7s ease;
}

.values_section .value_card:hover .value_overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.35) 35%,
    rgba(0, 0, 0, 0.94) 100%
  );
}

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

.values_section .value_grid_effect {
  position: absolute;

  inset: 0;

  z-index: -1;

  opacity: 0;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);

  background-size: 45px 45px;

  transition: opacity 0.7s ease;
}

.values_section .value_card:hover .value_grid_effect {
  opacity: 0.45;
}

/* =========================================
   NUMBER
========================================= */

.values_section .value_number {
  position: absolute;

  top: 22px;
  left: 25px;

  color: rgba(255, 255, 255, 0.75);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 2px;

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

.values_section .value_card:hover .value_number {
  transform: translateX(8px);

  color: #ffffff;
}

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

.values_section .value_icon {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 52px;
  height: 52px;

  display: flex;

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

  transform: translate(-50%, -50%) scale(1);

  border: 1px solid rgba(255, 255, 255, 0.55);

  border-radius: 50%;

  color: #ffffff;

  font-size: 17px;

  opacity: 0.9;

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

.values_section .value_card:hover .value_icon {
  transform: translate(-50%, -50%) scale(1.12) rotate(-8deg);

  background: #ffffff;

  color: #111111;
}

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

.values_section .value_content {
  position: absolute;

  left: 30px;
  right: 30px;
  bottom: 27px;

  z-index: 4;

  text-align: center;
}

/* =========================================
   CATEGORY
========================================= */

.value_category {
  display: block;

  margin-bottom: 7px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 8px;

  font-weight: 600;

  letter-spacing: 2.5px;

  text-transform: uppercase;

  transition: color 0.4s ease;
}

.values_section .value_card:hover .value_category {
  color: rgba(255, 255, 255, 0.85);
}

/* =========================================
   TITLE
========================================= */

.values_section .value_content h3 {
  margin: 0;

  color: #ffffff;

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

  font-size: clamp(19px, 2vw, 26px);

  font-weight: 400;

  text-transform: uppercase;

  letter-spacing: 1px;

  transition: transform 0.5s ease;
}

.values_section .value_card:hover .value_content h3 {
  transform: translateY(-4px);
}

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

.values_section .value_line {
  display: block;

  width: 35px;
  height: 1px;

  margin: 12px auto 0;

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

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

.values_section .value_card:hover .value_line {
  width: 70px;
}

/* =========================================
   ARROW
========================================= */

.values_section .value_arrow {
  position: absolute;

  right: 23px;
  top: 20px;

  width: 34px;
  height: 34px;

  display: flex;

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

  border: 1px solid rgba(255, 255, 255, 0.35);

  border-radius: 50%;

  color: #ffffff;

  font-size: 9px;

  opacity: 0;

  transform: translate(10px, -10px) rotate(-20deg);

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

.values_section .value_card:hover .value_arrow {
  opacity: 1;

  transform: translate(0, 0) rotate(0deg);
}

/* =========================================
   CORNER DECORATIONS
========================================= */

.values_section .value_corner {
  position: absolute;

  width: 25px;
  height: 25px;

  opacity: 0.7;

  transition:
    width 0.5s ease,
    height 0.5s ease;
}

.values_section .value_corner_tl {
  top: 15px;
  left: 15px;

  border-top: 1px solid rgba(255, 255, 255, 0.45);
  border-left: 1px solid rgba(255, 255, 255, 0.45);
}

.values_section .value_corner_br {
  right: 15px;
  bottom: 15px;

  border-right: 1px solid rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.values_section .value_card:hover .value_corner {
  width: 38px;
  height: 38px;

  opacity: 1;
}

/* =========================================
   SCROLL REVEAL
========================================= */

.values_section .values_reveal {
  opacity: 0;

  transform: translateY(55px) scale(0.97);

  transition:
    opacity 0.8s ease var(--value-delay, 0s),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--value-delay, 0s);
}

.values_section .values_visible {
  opacity: 1;

  transform: translateY(0) scale(1);
}

/* =========================================
   CARD HOVER LIFT
========================================= */

.values_section .value_card {
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s ease;
}

.values_section .value_card:hover {
  /* transform: translateY(-6px); */

  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.2);
}

/* =========================================
   LIGHT SWEEP
========================================= */

.values_section .value_card::after {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 50%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.13),
    transparent
  );

  transform: skewX(-20deg);

  transition: left 1s cubic-bezier(0.16, 1, 0.3, 1);

  pointer-events: none;

  z-index: 6;
}

.values_section .value_card:hover::after {
  left: 130%;
}

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

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

  .values_section .values_heading {
    margin-bottom: 50px;
  }

  .values_section .values_grid {
    grid-template-columns:
      1fr
      1fr;

    grid-template-rows:
      260px
      220px
      220px
      260px;

    gap: 14px;
  }

  .values_section .value_business {
    grid-column: 1;
    grid-row: 1;
  }

  .values_section .value_quality {
    grid-column: 2;
    grid-row: 1;
  }

  .values_section .value_prudence {
    grid-column: 1;
    grid-row: 2;
  }

  .values_section .value_respect {
    grid-column: 2;
    grid-row: 2;
  }

  .values_section .value_humility {
    grid-column: 1;
    grid-row: 3 / span 2;
  }

  .values_section .value_pride {
    grid-column: 2;
    grid-row: 3 / span 2;
  }

  .values_section .value_image img {
    filter: unset;
  }
}

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

@media (min-width: 0px) and (max-width: 575px) {
  .values_section {
    padding: 40px 0 75px;
  }

  .values_section .values_heading {
    margin-bottom: 38px;
  }

  .values_section .values_grid {
    display: grid;

    grid-template-columns: 1fr;

    grid-template-rows: none;

    gap: 12px;
  }

  .values_section .value_business,
  .values_section .value_quality,
  .values_section .value_prudence,
  .values_section .value_respect,
  .values_section .value_humility,
  .values_section .value_pride {
    grid-column: auto;
    grid-row: auto;

    min-height: 270px;
  }

  .values_section .value_content {
    left: 20px;
    right: 20px;
    bottom: 23px;
  }

  .values_section .value_content h3 {
    font-size: 21px;
  }

  .values_section .value_icon {
    width: 46px;
    height: 46px;

    font-size: 14px;
  }

  .values_section .value_number {
    left: 20px;
    top: 20px;
  }

  .values_section .value_arrow {
    right: 20px;
    top: 18px;
  }

  .values_section .value_image img {
    filter: unset;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .values_section .values_reveal,
  .values_section .value_card,
  .values_section .value_image img,
  .values_section .value_icon,
  .values_section .value_arrow,
  .values_section .value_line,
  .values_section .value_corner,
  .values_section .value_card::after {
    transition: none !important;
    animation: none !important;
  }
}