:root {
  height: 100%;
  --gold: #ae8f53;
  --green: #3a4854;
  --background: #eaeeed;
}

body {
  height: 100%;
  margin: 0;
  background: var(--background);
  font-family: Almarai;
  --width: min(0.3906vw, 7.5px);

  /* ****************************************************************************************** */
  font-size: calc(16px + var(--width)); /* - - - - - The font size for all elements             */
  --hexagon-size: 2.7em; /* - - - - - - - - - - - -  Icons Size                                 */
  --hexagon-border: 0.6em; /* - - - - - - - - - - -  Icons Border Size                          */
  --card-height: clamp(3em, calc(30vh / 5), 6em); /* Card Height                                */
  /* ****************************************************************************************** */
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-height: 100%;
}

.logo {
  position: fixed;
  top: 2em;
  right: 3em;
  animation: ping 1s ease-in-out reverse;
}

.logo svg {
  fill: var(--gold);
  width: 6em;
}

@keyframes ping {
  0% {
    transform: scale(1);
    filter: blur(0px);
    opacity: 1;
  }
  80% {
    transform: scale(1.2);
    filter: blur(6px);
    opacity: 0;
  }
  100% {
    transform: scale(2.2);
    filter: blur(12px);
    opacity: 0;
  }
}

.hexagon-background {
  position: fixed;
  top: 0;
  left: 0;
}

.hexagon-background svg {
  width: 7em;
  height: 7em;
  stroke: var(--gold);
  stroke-width: 0.3px;
}

.cards-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: stretch;
  gap: 1em;
  width: 800px;
  max-width: calc(100% - 2rem);
  padding: 1rem;
  margin-inline: auto;
  margin-top: var(--hexagon-size);
}

@media screen and (max-width: 900px) {
  .cards-container {
    margin-top: calc(var(--hexagon-size) * 2);
  }
}

.numbers {
  font-family: Cairo;
  color: var(--gold);
  font-size: 2em;
  font-weight: normal;
  margin: 0;
  line-height: 1em;
  margin-bottom: 0.2em;
  animation: focus-in-expand-fwd 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.text {
  color: var(--green);
  font-size: 1.3em;
  font-weight: normal;
  margin: 0;
  word-wrap: break-word;
  white-space: nowrap;
  animation: focus-in-expand-fwd 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.text-header {
  color: var(--green);
  font-size: 1.3em;
  font-weight: normal;
  margin: 0;
  word-wrap: break-word;
  white-space: nowrap;
  animation: focus-in-expand-fwd 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes focus-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    transform: translateZ(-800px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    transform: translateZ(0);
    filter: blur(0);
    opacity: 1;
  }
}

@media screen and (max-width: 400px) {
  body {
    --hexagon-size: 2em;
    --hexagon-border: 0.4em;
  }

  .numbers {
    font-size: 1.8em;
  }
  .text-header {
    font-size: 1.1em;
  }
  .text {
    font-size: 1.2em;
  }
}
@media screen and (max-width: 450px) {
 

  .text-header {
    font-size: 1.1em;
    margin-top: 105px;
  }

}

/* also check .spacer in Card.css */
@media screen and (max-width: 320px) {
  .cards-container {
    margin-inline: 0;
    min-width: calc(100% - 20px);
  }
}

/* * Animated numbers */

.animated-number {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  height: 1em;
  margin-bottom: 0.2em;
  font-family: Cairo;
  font-size: 2em;
  font-weight: 700;
  line-height: 1em;
  text-align: center;
  color: var(--gold);
  overflow: hidden;
  animation: focus-in-expand-fwd 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.cycle {
  position: relative;
  width: 0.6em;
  display: block;
  float: left;
  top: 0%;
  transition: top 0.7s ease-out;
}

/* * Card */

.card-wrapper {
  display: flex;
  flex-direction: row-reverse;
}

.card-container {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: row;
  filter: drop-shadow(-5px 6px 9px rgb(0 0 0 / 20%));

  --background: #fff;
  --angle: calc(var(--card-height) / 1.7);
}

.card-container::after {
  content: '';
  -webkit-clip-path: polygon(
    calc(100% - var(--angle)) 1%,
    100% 50%,
    calc(100% - var(--angle)) 100%,
    var(--angle) 100%,
    0% 50%,
    var(--angle) 1%
  );
  clip-path: polygon(
    calc(100% - var(--angle)) 1%,
    100% 50%,
    calc(100% - var(--angle)) 100%,
    var(--angle) 100%,
    0% 50%,
    var(--angle) 1%
  );
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(60deg, rgb(0 0 0 / 7%) 0%, rgb(0 0 0 / 0%) 150%);
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--background);
}

.card-arrow-right {
  width: 0;
  height: 0;
  border-top: var(--card-height) solid transparent;
  border-bottom: var(--card-height) solid transparent;
  border-inline-start: var(--angle) solid var(--background);
}

.card-arrow-left {
  width: 0;
  height: 0;
  border-top: var(--card-height) solid transparent;
  border-bottom: var(--card-height) solid transparent;
  border-inline-end: var(--angle) solid var(--background);
}

.card-spacer {
  animation: width-expand 0.5s 0.5s ease-in-out both;
}

@keyframes width-expand {
  0% {
    width: 0;
  }

  100% {
    width: calc(((var(--hexagon-size) + var(--hexagon-border)) * 2) - (var(--card-height) / 1.7) + 10px);
  }
}

.card-right-padding-animation {
  animation: right-padding 0.5s ease-in-out both;
}

.card-left-padding-animation {
  animation: left-padding 0.5s ease-in-out both;
}

@keyframes left-padding {
  0% {
    padding-inline-end: 0;
  }

  100% {
    padding-inline-end: calc(((var(--hexagon-size) + var(--hexagon-border)) * 2) - var(--angle));
  }
}

@keyframes right-padding {
  0% {
    padding-inline-start: 0;
  }

  100% {
    padding-inline-start: calc(((var(--hexagon-size) + var(--hexagon-border)) * 2) - var(--angle));
  }
}

@media screen and (max-width: 320px) {
  .spacer {
    display: none;
  }
}

/* * hexagon */

.hexagon-wrapper {
  position: absolute;
  top: 0;
  filter: drop-shadow(-1px 7px 4px #0000001a);
  z-index: 1;
  transform: translateY(-30%);
  animation: hexagon-rotate-in-center 0.5s 0.5s ease-in-out both;
}

@keyframes hexagon-rotate-in-center {
  0% {
    top: 50%;
    filter: blur(4px);
    opacity: 0;
  }

  100% {
    top: 0;
    filter: blur(0);
    opacity: 1;
  }
}

.hexagon-wrapper::after {
  content: '';
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%, 25% 0%);
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%, 25% 0%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(60deg, rgb(0 0 0 / 10%) 0%, rgb(0 0 0 / 10%) 49.5%, rgb(0 0 0 / 0%) 50.5%, rgb(0 0 0 / 0%) 100%);
}

.hexagon-container {
  display: flex;
  flex-direction: row;
  filter: drop-shadow(-1px 7px 14px rgb(0 0 0 / 10%));

  --background: var(--gold);
  --width: var(--hexagon-size);
  --height: calc(52 / 30 * var(--width));
  --angle: calc(var(--width) / 2);
}

.hexagon-container-as-border {
  display: flex;
  flex-direction: row;
  filter: drop-shadow(-1px 7px 4px rgba(0 0 0 / 10%));

  --background: #fff;
  --width: calc(var(--hexagon-size) + var(--hexagon-border));
  --height: calc(52 / 30 * var(--width));
  --angle: calc(var(--width) / 2);
}

.hexagon-content {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background);
  width: var(--width);
  height: var(--height);
}

.hexagon-content svg {
  width: var(--width);
  height: var(--height);
  fill: #fff;
}

.hexagon-arrow-left {
  width: 0;
  border-top: calc(var(--height) / 2) solid transparent;
  border-bottom: calc(var(--height) / 2) solid transparent;
  border-inline-end: var(--angle) solid var(--background);
}

.hexagon-arrow-right {
  width: 0;
  border-top: calc(var(--height) / 2) solid transparent;
  border-bottom: calc(var(--height) / 2) solid transparent;
  border-inline-start: var(--angle) solid var(--background);
}

/* * NewsBar */

.news-wrapper {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(0deg, var(--background) 75%, rgb(0 0 0 / 0%) 100%);
}

.news-bar {
  padding-inline: 1em;
  padding-block: 0.5em;
  box-sizing: content-box;
  background-color: var(--green);
  transform: skew(-29deg);
  scale: 1 0;
  overflow: hidden;
  animation: news-bar-enter 0.5s ease-out 0.5s forwards;
}

@keyframes news-bar-enter {
  0% {
    scale: 1 0;
  }

  100% {
    scale: 1 1;
  }
}

.news-bar-ticker {
  display: inline-block;
  padding-inline-start: 100%;
  box-sizing: content-box;
  white-space: nowrap;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: news-ticker;
  animation-duration: 16s;
}

@keyframes news-ticker {
  0% {
    transform: translateX(0);
    visibility: visible;
  }

  100% {
    transform: translateX(100%);
  }
}

.news-bar p {
  display: inline-block;
  margin: 0;
  margin-left: 2em;
  font-family: Cairo;
  font-weight: 700;
  transform: skew(29deg);
  color: #fff;
}

.news-hexagon-svg {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 10em;
  height: 10em;
  stroke: var(--gold);
  fill: var(--background);
  stroke-linecap: round;
  stroke-width: 0.01em;
}

.news-hexagon-svg-place-holder {
  min-width: 5em;
}

.news-hexagon-div {
  min-width: 10em;
  height: 5em;
  margin-inline-end: -5.5em;
  background: var(--green);
  transform: skew(-29deg) translateX(70%);
}

@media screen and (max-width: 900px) {
  .news-wrapper {
    left: 14px;
  }

  .news-hexagon-svg {
    display: none;
  }

  .news-hexagon-svg-place-holder {
    min-width: 1em;
  }

  .news-hexagon-div {
    margin-inline-end: -6.5em;
  }
}

@media screen and (max-width: 320px) {
  .news-wrapper {
    margin-bottom: 2em;
  }

  .news-bar {
    transform: skew(0deg);
  }

  .news-bar p {
    transform: skew(0deg);
  }

  .news-hexagon-div {
    display: none;
  }

  .news-hexagon-svg {
    display: none;
  }

  .news-hexagon-svg-place-holder {
    display: none;
  }
}