@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-Regular.woff2") format("woff2"), url("../fonts/Barlow-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-Italic.woff2") format("woff2"), url("../fonts/Barlow-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/BarlowCondensed-Italic.woff2") format("woff2"), url("../fonts/BarlowCondensed-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("BarlowCondensed-SemiBoldItalic.woff2") format("woff2"), url("BarlowCondensed-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/BarlowCondensed-ExtraBoldItalic.woff2") format("woff2"), url("../fonts/BarlowCondensed-ExtraBoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
* {
  box-sizing: border-box;
}

:root {
  --footer-black: #2e2e38;
  --footer-grey: #707070;
  --background-grey: #f4f4f4;
  --line-grey: #d5d5d5;
  --line-cian: #67ffb8;
  --line-orange: #ffd67b;
  --line-blue: #1159d1;
  --mask: linear-gradient(-35deg, #0000 2.8em, #000 0);
  --mask-both: linear-gradient(-35deg, #0000 1.3em, #000 0 calc(100% - 1.3em), #0000 0);
  --mask-footer: linear-gradient(-135deg, #0000 2.8em, #000 0);
  --mask-footer-small: linear-gradient(-135deg, #0000 2em, #000 0);
}

body {
  font-family: "Barlow", sans-serif;
  font-weight: normal;
  font-style: normal;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background-color: #fff;
  color: #000;
  font-size: 1.125rem;
  font-size: clamp(1rem, 9vw, 1.125rem);
  line-height: 1.75;
  line-height: clamp(1.55em, 0.1vw, 1.75em);
  text-align: left;
}

h1,
.style-h1 {
  font-family: "Barlow Condensed";
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
  font-size: 6.666em;
  font-size: clamp(3.333em, 15vw, 6.666em);
  font-weight: 900;
  margin-bottom: 1em;
  line-height: 1.1083;
  line-height: clamp(0.875em, 9vw, 1.085em);
  text-align: center;
}

h2 {
  font-family: "Barlow Condensed";
  font-weight: bold;
  font-style: italic;
  font-size: 3.33em;
  font-size: clamp(1.66em, 4vw, 3.33em);
  line-height: 1.16;
  line-height: clamp(0.833em, 11vw, 1.16em);
  margin-bottom: 1em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

h3,
.style-h3 {
  font-family: "Barlow Condensed";
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
  font-size: 2.222em;
  font-size: clamp(1.11em, 3.5vw, 2.222em);
  line-height: 1.35;
  line-height: clamp(1.25em, 1.5vw, 1.35em);
  margin-bottom: 1em;
}

h4 {
  font-family: "Barlow Condensed";
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.388em;
  font-size: clamp(1em, 2.5vw, 1.388em);
  line-height: 1.4;
  margin-bottom: 1em;
}

h5 {
  font-family: "Barlow";
  font-weight: normal;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.388em;
  font-size: clamp(0.888em, 3vw, 1.388em);
  line-height: 1.625;
  line-height: clamp(1.2em, 2vw, 1.625em);
  letter-spacing: 0.09em;
}

.button-font {
  font-family: "Barlow Condensed";
  font-weight: normal;
  font-style: italic;
  text-transform: uppercase;
  font-size: 0.888em;
  line-height: 2.5em;
  letter-spacing: 0.07em;
}

.text {
  font-family: "Barlow Condensed";
  font-weight: normal;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.388em;
  font-size: clamp(1.111em, 2.3vw, 1.388em);
  line-height: 1.5em;
  line-height: clamp(1.25em, 3.5vw, 1.5em);
  letter-spacing: 0.05em;
}

.text-bold {
  font-family: "Barlow Condensed";
  font-weight: 550;
  font-style: italic;
  font-size: 1.388em;
  font-size: clamp(1.111em, 2.3vw, 1.388em);
  line-height: 1.5em;
  line-height: clamp(1.25em, 3.5vw, 1.5em);
  letter-spacing: 0.05em;
}

.headline-card {
  font-family: "Barlow", sans-serif;
  font-weight: normal;
  font-style: normal;
  text-transform: uppercase;
  font-size: 1.333em;
  font-size: clamp(0.888em, 2vw, 1.333em);
  line-height: 1.5;
  line-height: clamp(1.2em, 2.8vw, 1.5em);
  text-transform: uppercase;
}

.text-card {
  font-family: "Barlow", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 0.888em;
  font-size: clamp(0.777em, 1.4vw, 0.888em);
  line-height: 1.187;
  line-height: clamp(0.823em, 20vw, 1.187em);
  letter-spacing: 0.05;
}

.text-card-bold {
  font-family: "Barlow", sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 0.888em;
  font-size: clamp(0.777em, 1.4vw, 0.888em);
  line-height: 1.187;
  line-height: clamp(0.823em, 20vw, 1.187em);
  letter-spacing: 120;
}

.text-card-small {
  font-family: "Barlow", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 0.666em;
  line-height: 1.187;
  color: var(--footer-grey);
}

.description-text {
  font-family: "Barlow";
  font-weight: normal;
  font-style: italic;
  font-size: 1em;
  font-size: clamp(0.888em, 1.7vw, 1em);
  line-height: 1.625;
  line-height: clamp(1.555em, 4vw, 1.625em);
  letter-spacing: 0.02em;
}

.upper {
  text-transform: uppercase;
}

p,
ul {
  margin-bottom: 1.8em;
}

p:last-child,
ul:last-child {
  margin-bottom: 0;
}

ul {
  list-style: disc;
  margin-left: 1em;
}

ul li {
  margin-bottom: 0.3em;
}

ul li:last-child {
  margin-bottom: 0;
}

a {
  color: #fff;
  text-decoration: none;
}

img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.container-full {
  width: 100%;
  height: 100%;
  margin: auto;
}

.container-medium {
  width: 78%;
  max-width: 1500px;
  height: 100%;
  margin: auto;
}

.container-small {
  width: 68%;
  max-width: 1500px;
  height: 100%;
  margin: auto;
}

.margin-top-bottom {
  margin-top: 6em;
  margin-top: clamp(1.8em, 10vw, 6em);
  margin-bottom: 6em;
  margin-bottom: clamp(1.5em, 10vw, 6em);
}

.padding-left-7 {
  text-align: left;
  padding-left: 5.4em;
  padding-left: clamp(1.3em, 5vw, 5.4em);
  padding-right: 7em;
  padding-right: clamp(1em, 10vw, 7em);
  margin-bottom: 0.5em;
}

.image-container-medium {
  width: 100%;
  aspect-ratio: 3.5/2;
}
.image-container-medium img {
  width: 100%;
  height: 100%;
}

.color-used {
  background-color: #000;
  color: #fff;
}
.color-used h5 {
  padding-block: 2em;
  padding-left: 1em;
}

.colors-used {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.colors-used > * {
  display: grid;
  place-content: center;
  padding-block: 7em;
  padding-block: clamp(3em, 15vw, 7em);
}
.colors-used .footer-black {
  background-color: #2e2e38;
  color: #fff;
}
.colors-used .footer-grey {
  background-color: #707070;
  color: #fff;
}
.colors-used .line-grey {
  background-color: #d5d5d5;
  color: #123;
}
.colors-used .background-grey {
  background-color: #f4f4f4;
  color: #123;
}
.colors-used .line-cian {
  background-color: #67ffb8;
  color: #123;
}
.colors-used .line-orange {
  background-color: #ffd67b;
  color: #123;
}
.colors-used .line-blue {
  background-color: #1159d1;
  color: #123;
}

.reveal {
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 0.7s all ease;
}

.reveal.active {
  transform: translateY(0);
  opacity: 1;
}

.reveal-left {
  position: relative;
  transform: translateX(-700px);
  opacity: 0;
  transition: 1s transform ease-in, 1s opacity ease-in;
}

.reveal-left.active {
  transform: translateX(0);
  opacity: 1;
}

.link-to-news a {
  stroke: #000;
  color: #000;
  display: flex;
  gap: 2%;
}
.link-to-news a .arrow {
  display: flex;
  justify-content: flex-start;
  padding-block: 1em;
  width: 30%;
}
.link-to-news a .arrow .arrow-right {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 2.5em;
  height: 2px;
  background-color: #000;
  transition: width 0.4s ease;
}
.link-to-news a .arrow svg {
  width: 1.6em;
  stroke-width: 2px;
  color: #000;
}
.link-to-news a .button-font {
  width: 55%;
}
.link-to-news a:hover .arrow .arrow-right {
  width: 90%;
}

@media (max-width: 768px) {
  .colors-used {
    grid-template-columns: repeat(2, 1fr);
  }
  .container-medium {
    width: 95%;
  }
  .container-small {
    width: 90%;
  }
}