/* =============    BUTTONS    =============== */
/* ==  btn--link__prime  == */
.btn--link__prime {
  line-height: 1;
  border-radius: 0.5rem;
  border: 1px solid;
  padding: 0.8rem 1.6rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-weight: 700;
  background-color: #fff;
  box-shadow: var(--box-shadow-prime);
}

.btn--link__prime:hover,
.btn--link__prime:active {
  border-color: var(--color-primary-dark-prime);
}

/* ==  btn--link__hover  == */
.btn--link__hover {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-yellow-prime);
  margin-bottom: 1.5rem;
  align-self: center;
  box-shadow: var(--box-shadow-hover);
}

.btn--link__hover:hover,
.btn--link__hover:active {
  box-shadow: var(--box-shadow-prime);
  transition: all 0.2s ease-in;
}

/* == btn--link__appears == */
.btn--link__appears {
  transform: scale(0.5);
  transition: transform 0.6s ease-out;
}

.show--scale {
  transform: scale(1);
}


/* ==================  COUNTER  ================= */
.counter--container,
.counter--award__text,
.counter--box {
  display: flex;
  flex-direction: column;
}

.counter--container {
  gap: 2rem;
}

.counter--award__box {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: -webkit-min-content 1fr -webkit-min-content;
  grid-template-rows: min-content 1fr min-content;
  justify-items: center;
  align-items: center;
}

.counter--award__image {
  width: 60%;
  max-width: 12rem;
  margin-block: 2rem;
  outline-offset: 0.5rem;
  outline: 1px solid var(--color-primary-dark-prime);
  line-height: 0;
}

.counter--award__text {
  align-items: center;
  line-height: 1.2;
}

.counter--award__text-title {
  text-align: center;
  margin-bottom: 1rem;
}

.counter--award__text-item {
  font-size: 0.9rem;
}

.counter--award__text-categ {
  font-family: var(--font-title);
  font-weight: 800;
  text-align: center;
}

.counter--award__link {
  margin-top: 2rem;
}

/* -----  COUNTER  ----- */
.counter--box {
  margin-left: 1rem;
}

.counter--box-1>h4 {
  margin-left: 5%;
}

.counter--counter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.3;
}

.counter--box__count {
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
}

.count__plus {
  display: inline-block;
  color: var(--color-teal-green-prime);
  font-size: 2.3rem;
  font-weight: 600;
}

.counter--box-2,
.counter--box-3 {
  margin-left: 15%;
}

.counter--box-2>p,
.counter--box-3>p {
  font-size: 0.9rem;
}

.divider--1-left {
  margin-left: 1rem;
}

/* ---   30 rem */
@media(min-width: 30rem) {
  .counter--box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 2fr;
  }

  .counter--box-1 {
    grid-column: 1 / -1;
  }
}

/* ---   48rem */
@media(min-width: 48rem) {
  .counter--award__box {
    grid-template-columns: 40% 60%;
    grid-template-rows: 2fr 1fr;
    gap: 0;
    width: 90%;
    margin: 1rem auto 0 auto;
  }

  .counter--award__image {
    grid-row: 1 / 3;
    margin-block: 0;
    transform: translateX(2rem);
  }

  .counter--award__text-title {
    font-size: 1.3rem;
  }

  .counter--award__text-categ {
    font-size: 1.2rem;
  }

  .counter--award__link {
    margin-top: 1rem;
  }

  .counter--box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
  }

  .counter--divider {
    margin: 0.5rem auto;
  }

  .counter--box-1 {
    width: 12rem;
  }

  .counter--box-2,
  .counter--box-3 {
    margin-left: 10%;
  }
}

/* =========   ANIMATIONS   ========== */
/*  ----  text >>>>>>>>>>>   */
@-webkit-keyframes moveTextLeft {

  0% {
    opacity: 0;
    transform: translateX(-7rem);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes moveTextLeft {

  0% {
    opacity: 0;
    transform: translateX(-7rem);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@-webkit-keyframes moveTextLeft2 {

  0% {
    opacity: 0;
    transform: translateX(-60%);
  }

  100% {
    opacity: 1;
    transform: translateX(-20%);
  }
}

@keyframes moveTextLeft2 {

  0% {
    opacity: 0;
    transform: translateX(-60%);
  }

  100% {
    opacity: 1;
    transform: translateX(-20%);
  }
}

/*   <<<<<<<<<<<  text  ---  */
@-webkit-keyframes moveTextRight {

  0% {
    opacity: 0;
    transform: translateX(7rem);
  }

  80% {
    transform: translateX(-0.7rem);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes moveTextRight {

  0% {
    opacity: 0;
    transform: translateX(7rem);
  }

  80% {
    transform: translateX(-0.7rem);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@-webkit-keyframes moveTextRight2 {

  0% {
    opacity: 0;
    transform: translateX(80%);
  }

  80% {
    transform: translateX(38%);
  }

  100% {
    opacity: 1;
    transform: translateX(45%);
  }
}

@keyframes moveTextRight2 {

  0% {
    opacity: 0;
    transform: translateX(80%);
  }

  80% {
    transform: translateX(38%);
  }

  100% {
    opacity: 1;
    transform: translateX(45%);
  }
}

@-webkit-keyframes slogan--sta {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes slogan--sta {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}