/* =========================================================
   AFOND HR — PREMIUM SPEED SECTION
========================================================= */

.afh-speed-section {

    --afh-speed-black: #0b0d0e;
    --afh-speed-charcoal: #171a1c;
    --afh-speed-gray: #686d70;
    --afh-speed-light: #f5f5f3;
    --afh-speed-white: #ffffff;
    --afh-speed-border: rgba(11, 13, 14, 0.12);

    position: relative;

    padding: 120px 0 110px;

    overflow: hidden;

    background: var(--afh-speed-light);

    color: var(--afh-speed-black);

    font-family: "Roboto", sans-serif;

}


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

.afh-speed-grid {

    position: absolute;

    inset: 0;

    opacity: .45;

    pointer-events: none;

    background-image:

        radial-gradient(
            rgba(11, 13, 14, .12) 1px,
            transparent 1px
        );

    background-size: 9px 9px;

}


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

.afh-speed-header {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0 auto 65px;

    text-align: center;

}


.afh-speed-eyebrow {

    display: inline-block;

    margin-bottom: 18px;

    color: var(--afh-speed-black);

    font-family: "Montserrat", sans-serif;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .5px;

}


.afh-speed-title {

    margin: 0;

    color: var(--afh-speed-black);

    font-family: "Montserrat", sans-serif;

    font-size: clamp(40px, 5.5vw, 76px);

    line-height: .98;

    font-weight: 800;

    letter-spacing: -3.5px;

}


.afh-speed-title span {

    display: block;

}


.afh-speed-header-line {

    width: 55px;

    height: 4px;

    margin: 30px auto 0;

    background: var(--afh-speed-black);

}


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

.afh-speed-slider-wrapper {

    position: relative;

    z-index: 3;

}


.afh-speed-swiper {

    width: calc(100% - 120px);

    margin: 0 auto;

    overflow: visible;

}


.afh-speed-swiper .swiper-wrapper {

    align-items: stretch;

}


/* =========================================================
   SLIDE
========================================================= */

.afh-speed-swiper .swiper-slide {

    height: auto;

    transition:
        transform .6s cubic-bezier(.22,1,.36,1),
        opacity .6s ease;

}


/* Non active slides */

.afh-speed-swiper .swiper-slide:not(.swiper-slide-active) {

    opacity: .72;

}


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

.afh-speed-card {

    position: relative;

    height: 100%;

    min-height: 570px;

    overflow: hidden;

    background: var(--afh-speed-white);

    border: 1px solid rgba(11,13,14,.08);

    box-shadow:
        0 15px 50px rgba(11,13,14,.07);

    transition:
        transform .6s cubic-bezier(.22,1,.36,1),
        box-shadow .6s ease;

}


.afh-speed-swiper
.swiper-slide-active
.afh-speed-card {

    transform: translateY(-10px);

    box-shadow:
        0 30px 80px rgba(11,13,14,.16);

}


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

.afh-speed-image-wrap {

    position: relative;

    height: 280px;

    overflow: hidden;

    background: #dcdcdc;

}


.afh-speed-image {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 1s cubic-bezier(.22,1,.36,1);

}


/* Zoom active card */

.afh-speed-swiper
.swiper-slide-active
.afh-speed-image {

    transform: scale(1.06);

}


/* Image overlay */

.afh-speed-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 35%,
            rgba(0,0,0,.58) 100%
        );

    pointer-events: none;

}


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

.afh-speed-number {

    position: absolute;

    top: 22px;

    right: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    border: 1px solid rgba(255,255,255,.55);

    border-radius: 50%;

    background: rgba(11,13,14,.5);

    backdrop-filter: blur(8px);

    color: #ffffff;

    font-family: "Montserrat", sans-serif;

    font-size: 11px;

    font-weight: 700;

}


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

.afh-speed-card-body {

    display: flex;

    flex-direction: column;

    min-height: 290px;

    padding: 30px 32px 34px;

}


.afh-speed-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;

}


.afh-speed-category {

    color: var(--afh-speed-gray);

    font-family: "Montserrat", sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}


.afh-speed-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    border: 1px solid var(--afh-speed-border);

    border-radius: 50%;

    color: var(--afh-speed-black);

    font-size: 17px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;

}


.afh-speed-card:hover .afh-speed-arrow {

    background: var(--afh-speed-black);

    color: #ffffff;

    transform: rotate(45deg);

}


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

.afh-speed-card-title {

    max-width: 420px;

    margin: 0 0 17px;

    color: var(--afh-speed-black);

    font-family: "Montserrat", sans-serif;

    font-size: 25px;

    line-height: 1.12;

    font-weight: 700;

    letter-spacing: -1px;

}


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

.afh-speed-card-text {

    margin: 0;

    color: #707477;

    font-family: "Roboto", sans-serif;

    font-size: 14px;

    line-height: 1.75;

    font-weight: 400;

}


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

.afh-speed-nav {

    position: absolute;

    top: 50%;

    z-index: 20;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    padding: 0;

    border: 1px solid rgba(11,13,14,.18);

    border-radius: 50%;

    background: var(--afh-speed-black);

    color: #ffffff;

    font-size: 19px;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.afh-speed-prev {

    left: 0;

}


.afh-speed-next {

    right: 0;

}


.afh-speed-nav:hover {

    background: #ffffff;

    color: var(--afh-speed-black);

    transform:
        translateY(-50%)
        scale(1.08);

}


.afh-speed-nav.swiper-button-disabled {

    opacity: .35;

    cursor: not-allowed;

}


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

.afh-speed-pagination {

    position: relative !important;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 55px;

}


.afh-speed-pagination
.swiper-pagination-bullet {

    width: 7px;

    height: 7px;

    margin: 0 !important;

    border-radius: 50%;

    background: #b8babc;

    opacity: 1;

    transition:
        width .4s ease,
        border-radius .4s ease,
        background .4s ease;

}


.afh-speed-pagination
.swiper-pagination-bullet-active {

    width: 28px;

    border-radius: 10px;

    background: var(--afh-speed-black);

}


/* =========================================================
   PROGRESS
========================================================= */

.afh-speed-progress {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-top: 18px;

}


.afh-speed-progress-current,
.afh-speed-progress-total {

    color: #6b6f72;

    font-family: "Montserrat", sans-serif;

    font-size: 9px;

    font-weight: 700;

}


.afh-speed-progress-current {

    color: var(--afh-speed-black);

}


.afh-speed-progress-line {

    position: relative;

    width: 100px;

    height: 1px;

    background: #c8c9ca;

    overflow: hidden;

}


.afh-speed-progress-line span {

    position: absolute;

    top: 0;

    left: 0;

    width: 25%;

    height: 100%;

    background: var(--afh-speed-black);

    transition: width .5s ease;

}


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

@media (max-width: 1199px) {

    .afh-speed-section {

        padding: 100px 0 90px;

    }

    .afh-speed-swiper {

        width: calc(100% - 90px);

    }

    .afh-speed-card {

        min-height: 540px;

    }

    .afh-speed-image-wrap {

        height: 250px;

    }

}


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

@media (max-width: 767px) {

    .afh-speed-section {

        padding: 75px 0 70px;

    }

    .afh-speed-header {

        margin-bottom: 45px;

    }

    .afh-speed-eyebrow {

        font-size: 11px;

        margin-bottom: 14px;

    }

    .afh-speed-title {

        font-size: clamp(34px, 10vw, 52px);

        line-height: 1;

        letter-spacing: -2px;

    }

    .afh-speed-header-line {

        margin-top: 22px;

    }

    .afh-speed-swiper {

        width: 100%;

    }

    .afh-speed-card {

        min-height: auto;

    }

    .afh-speed-image-wrap {

        height: 245px;

    }

    .afh-speed-card-body {

        min-height: auto;

        padding: 26px 25px 30px;

    }

    .afh-speed-card-title {

        font-size: 22px;

    }

    .afh-speed-card-text {

        font-size: 13px;

        line-height: 1.7;

    }

    .afh-speed-nav {

        top: 245px;

        width: 44px;

        height: 44px;

        font-size: 16px;

    }

    .afh-speed-prev {

        left: 10px;

    }

    .afh-speed-next {

        right: 10px;

    }

}


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

@media (max-width: 480px) {

    .afh-speed-section {

        padding: 60px 0;

    }

    .afh-speed-image-wrap {

        height: 220px;

    }

    .afh-speed-card-body {

        padding: 23px 21px 26px;

    }

    .afh-speed-card-title {

        font-size: 20px;

    }

    .afh-speed-card-text {

        font-size: 13px;

    }

    .afh-speed-number {

        top: 16px;

        right: 16px;

        width: 42px;

        height: 42px;

    }

}


/* =========================================================
  # AFOND HR —  STATISTICS
========================================================= */

.afond-stats-section {

  position: relative;

  overflow: hidden;

  background: #ffffff;

  color: #111111;

  padding:
    130px
    0
    110px;

  isolation: isolate;
}


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

.afond-stats-grid {

  position: absolute;

  inset: 0;

  z-index: -3;

  pointer-events: none;

  background-image:

    linear-gradient(
      rgba(15,15,15,0.055) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(15,15,15,0.055) 1px,
      transparent 1px
    );

  background-size:
    70px 70px,
    70px 70px;

  opacity: 0.8;

  /*
     Creates premium fade.
  */

  -webkit-mask-image:

    radial-gradient(
      ellipse 75% 90% at 50% 50%,
      black 0%,
      rgba(0,0,0,0.75) 40%,
      rgba(0,0,0,0.35) 65%,
      transparent 100%
    );

  mask-image:

    radial-gradient(
      ellipse 75% 90% at 50% 50%,
      black 0%,
      rgba(0,0,0,0.75) 40%,
      rgba(0,0,0,0.35) 65%,
      transparent 100%
    );

}


/* =========================================================
   BACKGROUND IMPACT TEXT
========================================================= */

.afond-stats-bg-text {

  position: absolute;

  right: -70px;

  top: 40px;

  color: #f4f4f4;

  font-family: "Montserrat", sans-serif;

  font-size: clamp(
    100px,
    17vw,
    250px
  );

  font-weight: 800;

  line-height: 1;

  letter-spacing: -15px;

  user-select: none;

  z-index: -2;

  pointer-events: none;
}


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

.afond-stats-container {

  position: relative;

  z-index: 2;
}


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

.afond-stats-heading {

  max-width: 850px;

  margin-bottom: 75px;
}


/* =========================================================
   EYEBROW
========================================================= */

.afond-stats-eyebrow {

  display: flex;

  align-items: center;

  gap: 13px;

  margin-bottom: 25px;

  color: #777777;

  font-family: "Montserrat", sans-serif;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 2.5px;
}


.afond-stats-line {

  width: 42px;

  height: 1px;

  background: #111111;
}


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

.afond-stats-title {

  margin: 0;

  color: #111111;

  font-family: "Montserrat", sans-serif;

  font-size: clamp(
    45px,
    5.5vw,
    78px
  );

  font-weight: 800;

  line-height: 0.98;

  letter-spacing: -4px;
}


.afond-stats-title span {

  display: block;

  color: transparent;

  -webkit-text-stroke:
    1.5px #111111;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.afond-stats-description {

  max-width: 590px;

  margin:
    27px
    0
    0;

  color: #666666;

  font-family: "Poppins", sans-serif;

  font-size: 14px;

  line-height: 1.8;
}


/* =========================================================
   STATISTICS WRAPPER
========================================================= */

.afond-stats-wrapper {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  border-top:
    1px solid #dcdcdc;

  border-bottom:
    1px solid #dcdcdc;
}


/* =========================================================
   STAT ITEM
========================================================= */

.afond-stat-item {

  position: relative;

  min-height: 330px;

  padding:
    30px
    35px
    35px;

  overflow: hidden;

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


/* Vertical divider */

.afond-stat-item:not(:last-child)::after {

  content: "";

  position: absolute;

  top: 35px;

  right: 0;

  width: 1px;

  height: calc(100% - 70px);

  background: #dedede;
}


/* Hover */

.afond-stat-item:hover {

  background: #f7f7f7;

}


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

.afond-stat-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 22px;

  border-bottom:
    1px solid #e4e4e4;
}


.afond-stat-index {

  color: #999999;

  font-family: "Montserrat", sans-serif;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1px;
}


.afond-stat-label {

  color: #999999;

  font-family: "Montserrat", sans-serif;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 2px;
}


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

.afond-stat-number-wrap {

  position: relative;

  margin-top: 42px;

  overflow: hidden;
}


.afond-stat-number {

  display: block;

  color: #111111;

  font-family: "Montserrat", sans-serif;

  font-size: clamp(
    70px,
    8vw,
    120px
  );

  font-weight: 800;

  line-height: 0.9;

  letter-spacing: -7px;

  will-change: transform;
}


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

.afond-stat-number-wrap::after {

  content: "";

  position: absolute;

  left: 5px;

  bottom: -8px;

  width: 55px;

  height: 2px;

  background: #111111;

  transform:
    scaleX(0);

  transform-origin: left;

}


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

.afond-stat-bottom {

  display: flex;

  align-items: center;

  gap: 11px;

  margin-top: 35px;

  color: #555555;

  font-family: "Poppins", sans-serif;

  font-size: 11px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1px;
}


.afond-stat-line {

  width: 28px;

  height: 1px;

  background: #111111;
}


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

.afond-stats-footer {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  margin-top: 55px;

  color: #999999;

  font-family: "Montserrat", sans-serif;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2.5px;

  text-align: center;
}


.afond-stats-footer-line {

  width: 45px;

  height: 1px;

  background: #d5d5d5;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width:991px) {

  .afond-stats-section {

    padding:
      100px
      0
      90px;
  }


  .afond-stats-heading {

    margin-bottom: 60px;
  }


  .afond-stats-wrapper {

    grid-template-columns:
      repeat(3,1fr);
  }


  .afond-stat-item {

    min-height: 290px;

    padding:
      25px
      22px
      30px;
  }


  .afond-stat-number {

    font-size: clamp(
      55px,
      8vw,
      85px
    );

    letter-spacing: -5px;
  }


  .afond-stat-label {

    font-size: 7px;

    letter-spacing: 1.3px;
  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width:767px) {

  .afond-stats-section {

    padding:
      80px
      0
      70px;
  }


  .afond-stats-title {

    font-size: 45px;

    letter-spacing: -2.5px;
  }


  .afond-stats-description {

    font-size: 13px;
  }


  .afond-stats-wrapper {

    display: block;
  }


  .afond-stat-item {

    min-height: auto;

    padding:
      30px
      5px
      35px;
  }


  .afond-stat-item:not(:last-child) {

    border-bottom:
      1px solid #dddddd;
  }


  .afond-stat-item:not(:last-child)::after {

    display: none;
  }


  .afond-stat-number {

    font-size: 82px;

    letter-spacing: -5px;
  }


  .afond-stat-number-wrap {

    margin-top: 35px;
  }


  .afond-stat-bottom {

    margin-top: 25px;
  }


  .afond-stats-bg-text {

    right: -30px;

    top: 80px;

    font-size: 100px;

    letter-spacing: -7px;
  }


  .afond-stats-footer {

    margin-top: 40px;

    font-size: 7px;

    letter-spacing: 1.5px;
  }


  .afond-stats-footer-line {

    width: 25px;
  }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width:400px) {

  .afond-stats-title {

    font-size: 39px;
  }


  .afond-stat-number {

    font-size: 70px;
  }


  .afond-stats-eyebrow {

    font-size: 8px;

    letter-spacing: 2px;
  }

}


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

@media (prefers-reduced-motion: reduce) {

  .afond-stat-number {

    will-change: auto;
  }

}


    
/* =========================================================
   AFOND HR — PREMIUM PAGE HERO
========================================================= */

.afond-page-hero {

  position: relative;

  min-height: 52vh;

  display: flex;

  align-items: center;

  overflow: hidden;

  background: #ffffff;

  color: #111111;

  isolation: isolate;
}


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

.afond-page-grid {

  position: absolute;

  inset: 0;

  z-index: -4;

  pointer-events: none;

  background-image:

    linear-gradient(
      rgba(15,15,15,0.065) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(15,15,15,0.065) 1px,
      transparent 1px
    );

  background-size:
    65px 65px,
    65px 65px;

  opacity: 0.8;


  /*
     Premium fading grid.
  */

  -webkit-mask-image:

    radial-gradient(
      ellipse 75% 100% at 50% 50%,
      black 0%,
      rgba(0,0,0,0.75) 40%,
      rgba(0,0,0,0.35) 68%,
      transparent 100%
    );

  mask-image:

    radial-gradient(
      ellipse 75% 100% at 50% 50%,
      black 0%,
      rgba(0,0,0,0.75) 40%,
      rgba(0,0,0,0.35) 68%,
      transparent 100%
    );
}


/* =========================================================
   SOFT BACKGROUND LIGHT
========================================================= */

.afond-page-hero::before {

  content: "";

  position: absolute;

  width: 650px;

  height: 650px;

  right: -330px;

  top: -300px;

  border-radius: 50%;

  background: #f2f2f2;

  z-index: -5;
}


.afond-page-hero::after {

  content: "";

  position: absolute;

  width: 700px;

  height: 700px;

  left: 18%;

  top: -280px;

  background:

    radial-gradient(
      circle,
      rgba(255,255,255,0.95),
      transparent 68%
    );

  z-index: -3;

  pointer-events: none;
}


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

.afond-page-container {

  position: relative;

  z-index: 5;

  padding-top: 90px;

  padding-bottom: 70px;
}


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

.afond-page-content {

  max-width: 850px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.afond-page-breadcrumb {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 30px;

  font-family: "Montserrat", sans-serif;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.afond-page-breadcrumb a {

  color: #777777;

  text-decoration: none;

  transition:
    color 0.3s ease;
}


.afond-page-breadcrumb a:hover {

  color: #111111;
}


.afond-breadcrumb-slash {

  color: #c5c5c5;

  font-size: 13px;
}


.afond-breadcrumb-current {

  color: #111111;
}


/* =========================================================
   EYEBROW
========================================================= */

.afond-page-eyebrow {

  display: flex;

  align-items: center;

  gap: 13px;

  margin-bottom: 22px;

  color: #888888;

  font-family: "Montserrat", sans-serif;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2.5px;
}


.afond-page-eyebrow-line {

  width: 40px;

  height: 1px;

  background: #111111;
}


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

.afond-page-title {

  margin: 0;

  color: #111111;

  font-family: "Montserrat", sans-serif;

  font-size: clamp(
    55px,
    7vw,
    105px
  );

  font-weight: 800;

  line-height: 0.88;

  letter-spacing: -6px;

  perspective: 1000px;
}


.afond-page-title span {

  display: block;

  color: transparent;

  -webkit-text-stroke:
    1.5px #111111;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.afond-page-description {

  max-width: 580px;

  margin:
    30px
    0
    0;

  color: #666666;

  font-family: "Poppins", sans-serif;

  font-size: 14px;

  line-height: 1.8;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.afond-page-side {

  position: relative;

  min-height: 260px;

  display: flex;

  align-items: center;

  justify-content: flex-end;
}


/* =========================================================
   PAGE INDICATOR
========================================================= */

.afond-page-indicator {

  position: absolute;

  right: 0;

  top: 10px;

  display: flex;

  align-items: center;

  gap: 12px;

  writing-mode: vertical-rl;

  color: #888888;

  font-family: "Montserrat", sans-serif;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 2px;
}


.afond-page-indicator-number {

  color: #111111;

  font-size: 12px;
}


.afond-page-indicator-line {

  width: 1px;

  height: 40px;

  background: #cccccc;
}


/* =========================================================
   CIRCLE
========================================================= */

.afond-page-circle {

  position: relative;

  width: 170px;

  height: 170px;

  margin-right: 60px;

  border:
    1px solid #d0d0d0;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

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

  backdrop-filter: blur(8px);
}


.afond-page-circle::before {

  content: "";

  position: absolute;

  inset: 15px;

  border:
    1px dashed #bcbcbc;

  border-radius: 50%;
}


.afond-page-circle::after {

  content: "";

  position: absolute;

  width: 6px;

  height: 6px;

  top: 8px;

  left: 50%;

  transform: translateX(-50%);

  border-radius: 50%;

  background: #111111;
}


.afond-page-circle-inner {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 70px;

  height: 70px;

  border-radius: 50%;

  background: #111111;

  color: #ffffff;

  font-family: "Montserrat", sans-serif;

  font-size: 17px;

  font-weight: 800;
}


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

.afond-page-number {

  position: absolute;

  right: -30px;

  bottom: -90px;

  z-index: -2;

  color: #f3f3f3;

  font-family: "Montserrat", sans-serif;

  font-size: 300px;

  font-weight: 800;

  line-height: 1;

  letter-spacing: -25px;

  user-select: none;

  pointer-events: none;
}


/* =========================================================
   DECORATIVE SQUARES
========================================================= */

.afond-page-square {

  position: absolute;

  border:
    1px solid rgba(0,0,0,0.055);

  pointer-events: none;
}


.afond-page-square-1 {

  width: 250px;

  height: 250px;

  left: -130px;

  top: 15%;
}


.afond-page-square-2 {

  width: 150px;

  height: 150px;

  left: 45%;

  top: 8%;

  opacity: 0.55;
}


.afond-page-square-3 {

  width: 350px;

  height: 350px;

  right: -210px;

  bottom: -220px;

  opacity: 0.7;
}


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

.afond-page-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 65px;

  padding-top: 22px;

  border-top:
    1px solid #dddddd;
}


.afond-page-bottom-left {

  display: flex;

  align-items: center;

  gap: 12px;

  color: #999999;

  font-family: "Montserrat", sans-serif;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2px;
}


.afond-page-bottom-line {

  width: 35px;

  height: 1px;

  background: #111111;
}


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

.afond-page-scroll {

  display: flex;

  align-items: center;

  gap: 10px;

  color: #777777;

  font-family: "Montserrat", sans-serif;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2px;
}


.afond-page-scroll i {

  color: #111111;

  font-size: 13px;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width:991px) {

  .afond-page-hero {

    min-height: 55vh;
  }


  .afond-page-container {

    padding-top: 75px;

    padding-bottom: 60px;
  }


  .afond-page-title {

    font-size:
      clamp(
        55px,
        9vw,
        85px
      );

    letter-spacing: -4px;
  }


  .afond-page-side {

    min-height: 160px;

    margin-top: 50px;

    justify-content: flex-start;
  }


  .afond-page-circle {

    width: 130px;

    height: 130px;

    margin-left: 0;

    margin-right: 0;
  }


  .afond-page-circle-inner {

    width: 58px;

    height: 58px;

    font-size: 14px;
  }


  .afond-page-indicator {

    right: 20px;

    top: 0;
  }


  .afond-page-number {

    font-size: 230px;

    bottom: -70px;
  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width:575px) {

  .afond-page-hero {

    min-height: auto;
  }


  .afond-page-container {

    padding-top: 55px;

    padding-bottom: 40px;
  }


  .afond-page-breadcrumb {

    margin-bottom: 24px;

    font-size: 8px;

    letter-spacing: 1.5px;
  }


  .afond-page-eyebrow {

    font-size: 8px;

    letter-spacing: 2px;
  }


  .afond-page-eyebrow-line {

    width: 28px;
  }


  .afond-page-title {

    font-size: 52px;

    line-height: 0.92;

    letter-spacing: -3px;
  }


  .afond-page-title span {

    -webkit-text-stroke:
      1px #111111;
  }


  .afond-page-description {

    margin-top: 24px;

    font-size: 13px;

    line-height: 1.75;
  }


  .afond-page-side {

    min-height: 120px;

    margin-top: 35px;
  }


  .afond-page-circle {

    width: 100px;

    height: 100px;
  }


  .afond-page-circle::before {

    inset: 9px;
  }


  .afond-page-circle-inner {

    width: 48px;

    height: 48px;

    font-size: 12px;
  }


  .afond-page-indicator {

    right: 5px;

    font-size: 7px;
  }


  .afond-page-indicator-line {

    height: 28px;
  }


  .afond-page-number {

    right: -20px;

    bottom: -20px;

    font-size: 150px;

    letter-spacing: -12px;
  }


  .afond-page-square-1 {

    width: 180px;

    height: 180px;

    left: -120px;
  }


  .afond-page-square-2 {

    width: 110px;

    height: 110px;

    left: 65%;

    top: 15%;
  }


  .afond-page-square-3 {

    width: 220px;

    height: 220px;

    right: -150px;

    bottom: -140px;
  }


  .afond-page-bottom {

    margin-top: 35px;
  }


  .afond-page-bottom-left {

    font-size: 7px;

    letter-spacing: 1.2px;
  }


  .afond-page-scroll {

    font-size: 7px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width:380px) {

  .afond-page-title {

    font-size: 45px;
  }


  .afond-page-bottom-left span:last-child {

    display: none;
  }

}


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

@media (prefers-reduced-motion: reduce) {

  .afond-page-circle {

    transform: none !important;
  }

}