:root {
  --width-of-switch: 3rem;
  --height-of-switch: 1.5rem;
  --size-of-icon: 1.1rem;
  --slider-offset: 0.3rem;
  --padding: 1rem;
  --border-radius: 1rem;
  --background-slide: url("/assets/iiisometric.svg");
  --font-size-small: clamp(0.9rem, 2vw, 1.2rem);
  --font-size-small-big: clamp(1rem, 2vw, 1.5rem);
  --font-size-medium: clamp(1.3rem, 3vw, 1.8rem);
  --font-size-medium-big: clamp(2rem, 4vw, 3rem);
  --font-size-title: clamp(1rem, 10vw, 6rem);
  --font-size-title-big: clamp(2rem, 10vw, 10rem);
  --font-size-watermark: clamp(3.5rem, 10vw, 10rem);

  --accent: #bced09;
}

.light {
  --background: #f9f6fb;
  --background-transparency-59: #f9f6fb59;

  --text: #121c29;
  --primary: #2f52e0;
  --primary-transparency-80: #2f52e080;
  --primary-transparency-3f: #2f52e03f;
  --secondary: #00afef;
  --secondary-transparency-4d: #00afef4d;
  --secondary-transparency-30: #00afef30;
  --outline: #4e6ce4;
  --theme-slider-shadow-1: #ef400050;
  --theme-slider-shadow-2: #ff8c0050;

  --box-shadow-slider: -0.3rem -0.3rem 0.3rem var(--theme-slider-shadow-1),
    0.1rem 0.1rem 0.3rem var(--theme-slider-shadow-2);

  --box-shadow: -0.1rem -0.1rem 0.3rem #4e6ce440, 0.3rem 0.3rem 0.3rem #2f52e0;

  --tile-background-gradient: linear-gradient(
    to bottom right,
    var(--primary-transparency-80),
    var(--secondary-transparency-4d)
  );
  --watermark-background-gradient: linear-gradient(
    to bottom right,
    var(--primary-transparency-3f),
    var(--secondary-transparency-30)
  );
  --tile-before-background-gradient: linear-gradient(
    to bottom left,
    var(--outline),
    var(--secondary-transparency-4d)
  );
  --text-background-gradient: linear-gradient(
    to bottom right,
    var(--primary),
    var(--secondary)
  );

  --logo-image: url("/assets/blue-logo-blue.svg");
}

.dark {
  --background: #121c29;
  --background-transparency-59: #121c2959;
  --text: #f9f6fb;

  --primary: #4e6ce4;
  --primary-transparency-80: #4e6ce480;
  --primary-transparency-3f: #4e6ce43f;
  --secondary: #00afef;
  --secondary-transparency-4d: #00afef4d;
  --secondary-transparency-30: #00afef30;
  --outline: #2f52e0;
  --theme-slider-shadow-1: #2f52e0;
  --theme-slider-shadow-2: #f9f6fb50;

  --box-shadow-slider: -0.1rem -0.1rem 0.3rem var(--theme-slider-shadow-1),
    0.3rem 0.3rem 0.3rem var(--theme-slider-shadow-2);

  --box-shadow: -0.1rem -0.1rem 0.3rem var(--theme-slider-shadow-1),
    0.3rem 0.3rem 0.3rem var(--theme-slider-shadow-2);

  --watermark-background-gradient: linear-gradient(
    to bottom right,
    var(--primary-transparency-3f),
    var(--secondary-transparency-30)
  );

  --tile-background-gradient: linear-gradient(
    to bottom right,
    var(--primary-transparency-80),
    var(--secondary-transparency-4d)
  );
  --tile-before-background-gradient: linear-gradient(
    to bottom left,
    var(--outline),
    var(--secondary-transparency-4d)
  );

  --text-background-gradient: linear-gradient(
    to bottom right,
    var(--primary),
    var(--secondary)
  );

  --logo-image: url("/assets/white-logo-blue.svg");
}

.high-contrast {
  --background: #000000; /* Pure black background */
  --background-transparency-59: rgba(
    0,
    0,
    0
  ); /* Black with adjusted transparency */
  --text: #ffffff; /* Pure white text */

  --primary: #ffffff; /* Pure white primary color */
  --primary-transparency-80: rgba(
    255,
    255,
    255
  ); /* White with adjusted transparency */
  --primary-transparency-3f: rgba(
    255,
    255,
    255
  ); /* White with adjusted transparency */
  --secondary: #ffffff; /* Pure white secondary color */
  --secondary-transparency-4d: rgba(
    255,
    255,
    255
  ); /* White with adjusted transparency */
  --secondary-transparency-30: rgba(
    255,
    255,
    255
  ); /* White with adjusted transparency */
  --outline: #ffffff; /* Pure white outline color */
  --theme-slider-shadow-1: #ffffff; /* White shadow */
  --theme-slider-shadow-2: rgba(
    255,
    255,
    255
  ); /* White shadow with transparency */

  --box-shadow-slider: -0.1rem -0.1rem 0.3rem var(--theme-slider-shadow-1),
    0.3rem 0.3rem 0.3rem var(--theme-slider-shadow-2);

  --box-shadow: -0.1rem -0.1rem 0.3rem var(--theme-slider-shadow-1),
    0.3rem 0.3rem 0.3rem var(--theme-slider-shadow-2);

  --watermark-background-gradient: linear-gradient(
    to bottom right,
    var(--background),var(--background)
  );

  --tile-background-gradient: linear-gradient(
    to bottom right,
   var(--background),var(--background)
  );
  --tile-before-background-gradient: linear-gradient(
    to bottom left,
    var(--background),var(--background)
  );

  --text-background-gradient: var(--background)

  --logo-image: url("/assets/white-logo-blue.svg");
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "REM", sans-serif;
}

html {
  scroll-behavior: smooth;
  font-size: 13px;
}

::-webkit-scrollbar {
  width: 1rem;
}

::-webkit-scrollbar-thumb {
  background: var(--tile-background-gradient);
  border: 0.2rem solid var(--background);
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
}

body {
  background-color: var(--background);
  color: var(--text);
  overflow-x: hidden;
}
.hero-page {
  position: relative;
  height: 100vh;
  /* top: 5rem; */
  width: 100%;
  display: flex;
  background-image: url("/assets/nnneon.svg");
  background-position: 100% 30%;
  background-repeat: no-repeat;
  background-size: contain;
}

.top-bar {
  background: var(--header-color);
  padding: var(--padding);
  position: fixed;
  top: 0;
  left: 0;
  height: 6rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: var(--background-transparency-59);
  backdrop-filter: blur(5px);
  z-index: 9999;
  transition: top 0.3s ease-in-out;
  -webkit-transition: top 0.3s ease-in-out;
  -moz-transition: top 0.3s ease-in-out;
  -ms-transition: top 0.3s ease-in-out;
  -o-transition: top 0.3s ease-in-out;
}

.logo-container {
  flex: 1 1 auto;
  height: 100%;
  width: clamp(6rem, 15vw, 18rem);
  background-image: var(--logo-image);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: contain;
}

.navigation-bar {
  flex: 1 1 auto;
  display: flex;
  gap: var(--padding);
  align-items: center;
  justify-content: space-between;
  padding: var(--padding);
}
.navigation-links-container-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.navigation-links-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--padding);
}
.hamburger-links-container .navigation-links-container.display-row {
  display: none;
}

.settings-links-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.navigation-link-container,
.hamburger-link-container {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.navigation-link,
.hamburger-link {
  position: relative;
  text-decoration: none;
  color: var(--primary);
  font-weight: 600;
  font-size: var(--font-size-small);
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 0.5rem;
  padding: 0.5rem;
}

.navigation-link::before,
.hamburger-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--accent);
  transform: skew(150deg, 0deg);
  -webkit-transform: skew(150deg, 0deg);
  -moz-transform: skew(150deg, 0deg);
  -ms-transform: skew(150deg, 0deg);
  -o-transform: skew(150deg, 0deg);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  z-index: -1;
}

.navigation-link:hover::before,
.hamburger-link:hover::before {
  width: 100%;
}

.navigation-link:hover,
.hamburger-link:hover {
  color: var(--outline);
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
}
.navigation-links-container:hover > .navigation-link-container:not(:hover),
.hamburger-links-container:hover > .hamburger-link-container:not(:hover) {
  opacity: 0.3;
}

.display-row {
  width: unset;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flex-1 {
  flex: 1 1 auto;
}

.hamburger-menu {
  position: relative;
  display: none;
}

.hamburger-button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.hamburger-button span {
  display: block;
  width: 28px;
  height: 3px;
  background: var(--primary);
  margin: 6px 0;
  transition: 0.3s;
}
.hamburger-button.is-active span {
  background: var(--accent);
}

.hamburger-links-container {
  position: absolute;
  right: 0;
  top: 2rem;
  max-height: 0;
  width: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: var(--padding);
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  z-index: 9999999;
}
.hamburger-links-container::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--background);
  filter: blur(10px);
  -webkit-filter: blur(10px);
}
.hamburger-links-wrapper {
  max-height: 100%;
  height: 50svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger-links-wrapper .navigation-links-container {
  flex-direction: column;
}
.hamburger-button.is-active + .hamburger-links-container {
  height: 100svh;
  max-height: calc(100svh - 5rem);
}

.hamburger-button.is-active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger-button.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger-button.is-active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.lang-toggle {
  width: 5rem;
}

.lang-toggle.is-active {
  display: none;
}

.ro-flag,
.en-flag {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 1.5rem;
  height: 1rem;
}

.ro-flag {
  background-image: url("/assets/romanian-flag.svg");
}

.en-flag {
  background-image: url("/assets/english-flag.svg");
}

.theme-switch {
  display: block;
  position: relative;
  width: var(--width-of-switch);
  height: var(--height-of-switch);
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background);
  box-shadow: var(--box-shadow-slider);
  transition: 0.4s;
  border-radius: 30px;
}

.theme-slider:before {
  position: absolute;
  content: "";
  height: var(--size-of-icon, 1.4em);
  width: var(--size-of-icon, 1.4em);
  border-radius: 20px;
  left: var(--slider-offset, 0.3em);
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
  transition: 0.4s;
}

input:checked + .theme-slider {
  background-color: #303136;
}

input:checked + .theme-slider:before {
  left: calc(100% - (var(--size-of-icon, 1.4em) + var(--slider-offset, 0.3em)));
  background: #303136;
  box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}

.hero-section {
  width: 100%;
  height: 100%;
}

.carousel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.carousel .flex-helper {
  width: 100%;
  height: 50%;
}

.slide {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--padding);
  background-image: var(--background-slide);
  background-position: 20% center;
  background-repeat: no-repeat;
  background-size: contain;
  user-select: none;
}

.slide.active {
  display: flex;
  animation: fade 6s ease-in-out infinite;
  -webkit-animation: fade 6s ease-in-out infinite;
  animation-play-state: running;
}

.carousel:has(> .dots:hover) > .slide.active {
  animation-play-state: paused;
}

.carousel-text {
  width: fit-content;
  height: fit-content;
  position: relative;
  text-transform: capitalize;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: baseline;
  user-select: none;
}

#landing-heading-first {
  font-size: var(--font-size-title);
  font-weight: 600;
}

#landing-heading-second {
  line-height: 1.3em;
  font-size: var(--font-size-title-big);
  font-weight: 900;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--primary);
  background-image: url("/assets/strokes\(2\).png");
  background-clip: text;
  -webkit-background-clip: text;
  background-repeat: round;
  background-position: 0 0;
  animation: back 10s linear infinite;
  -webkit-animation: back 10s linear infinite;
}

#landing-heading-third {
  font-size: var(--font-size-title);
  font-weight: 900;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--primary);
  background-image: url("/assets/strokes\(5\).png");
  background-clip: text;
  -webkit-background-clip: text;
  background-repeat: round;
  background-position: 0 0;
  animation: back 20s linear infinite;
  -webkit-animation: back 20s linear infinite;
}

.carousel-text p {
  font-size: var(--font-size-title);
  overflow: hidden;
  line-height: 1.2;
  letter-spacing: 8px;
  -webkit-text-stroke: 1.5px var(--primary);
  color: var(--outline);
}

.carousel-text p span {
  font-weight: 600;
  display: inline-block;
}

.reveal-text {
  animation: reveal 1.3s ease-in-out forwards;
  -webkit-animation: reveal 1.3s ease-in-out forwards;
}

.dots {
  align-self: flex-start;
  display: flex;
  justify-content: space-around;
  gap: var(--padding);
  padding: var(--padding);
}

.dot {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;
  background: conic-gradient(from 90deg at 50% 50%, #2f52e0, #18ea83, #bced09);
  overflow: hidden;
}

.dot.active::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  background: conic-gradient(from 90deg at 50% 50%, #2f52e0, #18ea83, #bced09);
  animation: loading_dot 1.5s linear infinite;
  -webkit-animation: loading_dot 1.5s linear infinite;
  transform: translate(-50% -50%);
  -webkit-transform: translate(-50% -50%);
  -moz-transform: translate(-50% -50%);
  -ms-transform: translate(-50% -50%);
  -o-transform: translate(-50% -50%);
}

.dot.active span {
  animation: loading_dot 1.5s linear infinite;
  -webkit-animation: loading_dot 1.5s linear infinite;
}

.dot span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  height: 70%;
  width: 70%;
  background-color: var(--background);
  filter: blur(2px);
  -webkit-filter: blur(2px);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

.marquee-section {
  position: relative;
  display: flex;
  flex-direction: column;
}

.marquee {
  margin: 0 auto;
  width: 100%;
  /* height: 30px; */
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

.marquee-content {
  width: 300% !important;
  display: flex;
  /* line-height: 30px; */
  animation: marquee 40s linear infinite forwards;
  -webkit-animation: marquee 40s linear infinite forwards;
}
.marquee-content:hover,
.marquee-content.reverse:hover {
  animation-play-state: paused;
}

.marquee-content.reverse {
  animation: marquee 40s linear infinite reverse;
  -webkit-animation: marquee 40s linear infinite reverse;
}

.list-inline {
  display: flex;
  justify-content: space-around;
  gap: 4rem;
  padding: 0 2rem;
  /* width: 33.33%; */
  color: var(--outline);
  font-size: var(--font-size-title);
  font-weight: 100;

  /* reset list */
  list-style: none;
}

.marquee-highlight {
  color: var(--accent);
}

.main-title-section {
  height: 20vh;
  width: 100%;
  display: grid;
  place-items: center;
  text-align: center;
}

.main-title-section h1 {
  font-size: var(--font-size-title);
  color: var(--accent);
}

.main-title-content {
  font-size: var(--font-size-medium-big);
}

.home-about-container,
.communication-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 3rem 0;
}

.home-about-illustrations {
  position: relative;
  width: 35rem;
  height: 50rem;
  flex: 1 1 500px;
  background: url("/assets/gggyrate\(1\).svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.image-container {
  position: relative;
  height: fit-content;
  width: fit-content;
  display: grid;
  grid-gap: 3rem;
  grid-template: 1fr 1fr;
  grid-template-areas: "network software" "hardware .";
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}

.tile {
  width: clamp(10rem, 40vw, 15rem);
  height: clamp(10rem, 40vw, 15rem);
  position: relative;
  user-select: none;
  cursor: pointer;
  background: var(--tile-background-gradient);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  box-shadow: 3px 3px 4px var(--tile-shadow-color);
}

.tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--tile-before-background-gradient);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  z-index: -1;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  -moz-backdrop-filter: blur(1px);
  transition: transform 0.4s ease-in-out;
  -webkit-transition: transform 0.4s ease-in-out;
  -moz-transition: transform 0.4s ease-in-out;
  -ms-transition: transform 0.4s ease-in-out;
  -o-transition: transform 0.4s ease-in-out;
}

.tile:hover::before,
.tile.active::before {
  transform: rotate(-5deg) translateX(-5%) translateY(-5%);
  -webkit-transform: rotate(-5deg) translateX(-5%) translateY(-5%);
  -moz-transform: rotate(-5deg) translateX(-5%) translateY(-5%);
  -ms-transform: rotate(-5deg) translateX(-5%) translateY(-5%);
  -o-transform: rotate(-5deg) translateX(-5%) translateY(-5%);
}

.tile p {
  color: var(--text);
  position: absolute;
  bottom: 15%;
  right: -15%;
  font-size: var(--font-size-medium-big);
  font-weight: 600;
  width: max-content;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  z-index: 1;
}

.tile p::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  background: var(--accent);
  filter: blur(0.6px);
  -webkit-filter: blur(0.6px);
  width: 60px;
  height: 60px;
  z-index: -10;
  animation: beat 1s infinite alternate;
  -webkit-animation: beat 1s infinite alternate;
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
}

.tile:hover > p::after {
  width: 100%;
  left: 0;
}

.tile:nth-child(1) {
  grid-area: network;
}
.tile:nth-child(2) {
  grid-area: software;
}
.tile:nth-child(3) {
  grid-area: hardware;
}
.tile svg {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 2.5rem;
  height: auto;
  animation-name: click-90;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes click-90 {
  0% {
    transform: rotate(75deg) scale(1);
    -webkit-transform: rotate(75deg) scale(1);
    -moz-transform: rotate(75deg) scale(1);
    -ms-transform: rotate(75deg) scale(1);
    -o-transform: rotate(75deg) scale(1);
  }
  25% {
    transform: rotate(75deg) scale(1);
    -webkit-transform: rotate(75deg) scale(1);
    -moz-transform: rotate(75deg) scale(1);
    -ms-transform: rotate(75deg) scale(1);
    -o-transform: rotate(75deg) scale(1);
  }
  50% {
    transform: rotate(75deg) scale(0.9);
    -webkit-transform: rotate(75deg) scale(0.9);
    -moz-transform: rotate(75deg) scale(0.9);
    -ms-transform: rotate(75deg) scale(0.9);
    -o-transform: rotate(75deg) scale(0.9);
  }
  100% {
    transform: rotate(75deg) scale(1);
    -webkit-transform: rotate(75deg) scale(1);
    -moz-transform: rotate(75deg) scale(1);
    -ms-transform: rotate(75deg) scale(1);
    -o-transform: rotate(75deg) scale(1);
  }
}

#services + .home-about-container .home-about-illustrations .tile svg {
  top: 1rem;
  left: 1rem;
  animation-name: click-15;
}

@keyframes click-15 {
  0% {
    transform: rotate(15deg) scale(1);
    -webkit-transform: rotate(15deg) scale(1);
    -moz-transform: rotate(15deg) scale(1);
    -ms-transform: rotate(15deg) scale(1);
    -o-transform: rotate(15deg) scale(1);
  }
  25% {
    transform: rotate(15deg) scale(1);
    -webkit-transform: rotate(15deg) scale(1);
    -moz-transform: rotate(15deg) scale(1);
    -ms-transform: rotate(15deg) scale(1);
    -o-transform: rotate(15deg) scale(1);
  }
  50% {
    transform: rotate(15deg) scale(0.9);
    -webkit-transform: rotate(15deg) scale(0.9);
    -moz-transform: rotate(15deg) scale(0.9);
    -ms-transform: rotate(15deg) scale(0.9);
    -o-transform: rotate(15deg) scale(0.9);
  }
  100% {
    transform: rotate(15deg) scale(1);
    -webkit-transform: rotate(15deg) scale(1);
    -moz-transform: rotate(15deg) scale(1);
    -ms-transform: rotate(15deg) scale(1);
    -o-transform: rotate(15deg) scale(1);
  }
}

.home-about-text {
  flex: 1 1 400px;
  position: relative;
  display: none;
  place-items: center;
  padding: var(--padding);
}

.watermark-container {
  width: 100%;
  height: var(--font-size-watermark);
  position: relative;
  margin-bottom: 5rem;
  z-index: 1;
}

.watermark {
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--font-size-watermark);
  font-weight: 900;
  letter-spacing: clamp(7px, 2vw, 15px);
  color: transparent;
  background: var(--watermark-background-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  user-select: none;
  z-index: -1;
  transform: scale(1, 1.5);
  -webkit-transform: scale(1, 1.5);
  -moz-transform: scale(1, 1.5);
  -ms-transform: scale(1, 1.5);
  -o-transform: scale(1, 1.5);
  white-space: nowrap;
}

.w-2 {
  left: var(--padding);
  right: unset;
}

.t-2 {
  left: 2rem;
  right: unset;
  text-align: start !important;
}

.home-about-text h2 {
  position: absolute;
  right: 2rem;
  top: 90%;
  color: transparent;
  text-align: end;
  background: var(--text-background-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: var(--font-size-medium-big);
  font-weight: 800;
  padding-top: var(--font-size-medium-big);
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.home-about-text h2::selection {
  color: var(--home-container-title-color);
}

#second_container {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  grid-template-areas: "software network" ". hardware";
}

#second_container .tile p {
  bottom: 5%;
  left: -25%;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}

#second_container .tile p::after {
  right: 10%;
  left: unset;
}

#second_container .tile:hover > p::after {
  width: 100%;
  right: 0;
}

#second_container .tile:nth-child(1) {
  grid-area: software;
}

#second_container .tile:nth-child(2) {
  grid-area: network;
}

#second_container .tile:nth-child(3) {
  grid-area: hardware;
}

#second_container .tile:hover::before,
#second_container .tile.active::before {
  transform: rotate(5deg) translateX(5%) translateY(-5%);
  -webkit-transform: rotate(5deg) translateX(5%) translateY(-5%);
  -moz-transform: rotate(5deg) translateX(5%) translateY(-5%);
  -ms-transform: rotate(5deg) translateX(5%) translateY(-5%);
  -o-transform: rotate(5deg) translateX(5%) translateY(-5%);
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--padding);
  padding: 5rem 0;
  justify-content: center;
}

.card {
  flex: 1 1 350px;
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 22rem;
  background-color: var(--background);
}

.card-image-container {
  padding: var(--padding);
}

.card-image-container img {
  width: 2rem;
  object-fit: cover;
}

.card-image-container a {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  opacity: 0.1;
  text-decoration: none;
  color: var(--background);
}
.card-image-container a:hover {
  opacity: 0.5;
}

.card .text-container {
  font-size: var(--font-size-small-big);
  display: grid;
  place-items: center;
  text-align: center;
  border-top: 1px solid;
  border-image: linear-gradient(
      to right,
      transparent,
      var(--secondary-transparency-4d),
      transparent
    )
    1;
  padding: var(--padding);
}

.about-page-text {
  width: 100%;
  padding: var(--padding);
  display: flex;
  align-items: center;
  gap: var(--padding);
}

.icon {
  flex: 1;
  height: 5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.content-icon {
  background-image: url("/assets/forward-arrows-icon.svg");
}

.about-page-text p {
  flex: 8;
  font-size: var(--font-size-medium);
}

.banner {
  height: 15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--text);
  background-color: var(--background);
  position: relative;
  z-index: 0;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.banner h1 {
  font-size: var(--font-size-medium-big);
  text-align: center;
}

.banner::before {
  content: "";
  width: 3px;
  height: 80%;
  position: absolute;
  left: 0;
  z-index: 3;
  transition: transform 50ms ease-out 0s;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 0 25px 5px #fff, /* inner white */ 0 0 405px 15px #008cff,
    /* inner blue */ 0 0 350px 20px #0ff;
  /* outer cyan */
  transform: translateX(var(--p, 30px));
  -webkit-transform: translateX(var(--p, 30px));
  -moz-transform: translateX(var(--p, 30px));
  -ms-transform: translateX(var(--p, 30px));
  -o-transform: translateX(var(--p, 30px));
}

.banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  mask: linear-gradient(to right, #fff 45%, transparent, #fff 55%) right
    calc(-1 * var(--p, 0px)) top 0/200% 100% no-repeat;
  -webkit-mask: linear-gradient(to right, #fff 45%, transparent, #fff 55%) right
    calc(-1 * var(--p, 0px)) top 0/200% 100% no-repeat;
}
.banner .reveal-text {
  position: relative;
  color: var(--accent);
  z-index: -2;
}

@keyframes move-banner {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.banner.in-view::before {
  animation: move-banner 3s ease-in-out forwards;
}

.title-content {
  width: 80%;
  font-size: var(--font-size-medium-big);
  border-bottom: 1px solid;
  border-image: linear-gradient(
      to right,
      transparent,
      var(--secondary-transparency-4d),
      transparent
    )
    1;
  color: var(--outline);
}

.subtitle-content {
  width: 80%;
  font-size: var(--font-size-medium);
}

.solutions-list-container {
  width: 80%;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: var(--padding);
}

.solutions-list-container li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  list-style: none;
  gap: var(--padding);
  padding: 0 var(--padding);
}

.solutions-list-container span {
  width: 100%;
  height: 1px;
  background-image: linear-gradient(
    to right,
    transparent,
    var(--secondary-transparency-4d),
    transparent
  );
}

.performance-icon {
  background-image: url("/assets/performance-icon.svg");
}
.scale-icon {
  background-image: url("/assets/scale-icon.svg");
}

.safe-icon {
  background-image: url("/assets/safe-icon.svg");
}

.solutions-list-container li p {
  flex: 8;
}

.partnership-card {
  display: flex;
  flex-direction: column;
  gap: var(--padding);
  padding: var(--padding);
  margin-top: 10rem;
  background-image: var(--tile-background-gradient);
  box-shadow: 10px 10px 10px -7px var(--text);
  width: 90%;
}

.partnership-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: url("/assets/programmer-icon.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.bordered-icon {
  width: 10rem;
  height: 10rem;
  position: relative;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  background-color: var(--background);
  transform: translateY(-60%);
  -webkit-transform: translateY(-60%);
  -moz-transform: translateY(-60%);
  -ms-transform: translateY(-60%);
  -o-transform: translateY(-60%);
  border: 1rem solid var(--background);
}

.partnership-card .text-content h1,
.partnership-card .text-content h3 {
  flex: 8;
  width: 100%;
}

.hands-icon {
  flex: 1;
  background-image: url("/assets/shake-hands-icon.svg");
}

.partnership-card .text-content:nth-child(3) {
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: var(--padding);
}

.vertical-line {
  height: 5rem;
  width: 0.1rem;
  margin: 3rem 0;
  background-color: var(--accent);
}

.title-container {
  border: 1px solid;
  border-image: var(--text-background-gradient) 1;
  padding: var(--padding);
}

.title-container .title-content,
.title-container .subtitle-content {
  width: 100%;
}

.building-icon {
  background-image: url("/assets/building-icon.svg");
  background-position: right;
}

.scales-icon {
  background-image: url("/assets/scales-icon.svg");
  background-position: right;
}

.integration-icon {
  background-image: url("/assets/integration-icon.svg");
}

.intuition-icon {
  background-image: url("/assets/intuition-icon.svg");
}
.connection-icon {
  background-image: url("/assets/connection-icon.svg");
}

.maximize-icon {
  background-image: url("/assets/maximize-icon.svg");
}

.piano-icon {
  background-image: url("/assets/piano-icon.svg");
  background-position: right;
}

.group-icon {
  background-image: url("/assets/group-icon.svg");
  background-position: right;
}

.brain-icon {
  background-image: url("/assets/synapse-icon.svg");
}

.qr-code {
  position: absolute;
  top: 50%;
  left: 15%;
  width: clamp(150px, 5vw, 200px);
  height: clamp(150px, 5vw, 200px);
  transform: translateY(-50%) translateX(-15%);
  -webkit-transform: translateY(-50%) translateX(-15%);
  -moz-transform: translateY(-50%) translateX(-15%);
  -ms-transform: translateY(-50%) translateX(-15%);
  -o-transform: translateY(-50%) translateX(-15%);
  background-color: white;
  z-index: 10;
}

.qr-code img {
  width: 100%;
  height: 100%;
}

.communication-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  background-image: linear-gradient(to bottom right, #2f52e0, #00afef);
  box-shadow: 0px 0px 15px var(--tile-shadow-color);
  color: #f9f6fb;
}

.communication-illustration {
  height: 25rem;
  flex: 1 1 400px;
  background-image: url("/assets/undraw_code_typing.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.communication-form {
  flex: 2 1 400px;
  z-index: 1;
}

.communication-watermark {
  width: max-content;
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  font-size: var(--font-size-title);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  background: linear-gradient(to bottom left, #2f52e0, #00afef4d);
  background-clip: text;
  -webkit-background-clip: text;
  user-select: none;
  z-index: 0;
}

.center {
  text-align: center;
  margin: auto;
  padding: var(--padding);
}

form {
  padding: var(--padding);
  max-width: 500px;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
}

.form-group {
  position: relative;
  margin-bottom: 30px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid #f9f6fb;
  background: none;
  outline: none;
  font-size: var(--font-size-small);
  transition: 0.3s;
}

.form-group label {
  position: absolute;
  left: 15px;
  top: 12px;
  color: #f9f6fb;
  font-size: var(--font-size-small);
  transition: 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--accent);
}

.form-group input:is(:not(:placeholder-shown), :focus) ~ label,
.form-group textarea:is(:not(:placeholder-shown), :focus) ~ label {
  top: -12px;
  color: var(--background);
  background-color: var(--accent);
  padding: 0 var(--padding);
}

#contact_form button {
  background: none;
  color: #f9f6fb;
  border: 2.5px solid var(--accent);
  padding: 15px 30px;
  cursor: pointer;
  align-self: flex-end;
  font-size: var(--font-size-small);
}

#contact_form button:hover {
  background: var(--accent);
  color: var(--background);
}

footer {
  position: relative;
  width: 100%;
  height: 30svh;
  display: flex;
}

.footer-container {
  position: absolute;
  width: 90%;
  bottom: 5rem;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--padding);
  background-color: var(--background);
  box-shadow: var(--box-shadow);
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  z-index: 2;
}

.footer-logo {
  flex: 1 1 200px;
  height: 5rem;
  width: 100%;
  background-image: url("/assets/blue-logo-blue.svg");
  background-position: center left;
  background-repeat: no-repeat;
  background-size: contain;
}

.footer-contacts {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--padding);
}

.footer-contacts h2 {
  color: var(--text);
}

.contact-links-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: var(--padding);
}

.contact-links-container a {
  color: var(--outline);
  text-decoration: none;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.small-icon {
  width: 2rem;
  height: 2rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.email-icon {
  background-image: url("/assets/email-icon.svg");
}

.phone-icon {
  background-image: url("/assets/phone-icon.svg");
}

.copyright {
  position: absolute;
  bottom: 0;
  height: fit-content;
  width: 100%;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  align-self: flex-end;
  background-image: var(--text-background-gradient);
  color: #f9f6fb;
  border: 1px red solid;
  padding: 1rem;
}
.copyright p:first-child {
  margin-top: 5rem;
}

.cookie-consent-modal {
  display: flex;
  gap: 1rem;
  position: fixed;
  margin: auto;
  top: 50%;
  left: 50%;
  height: 50svh;
  width: 30rem;
  max-width: calc(100% - 1rem);
  overflow-y: auto;
  background: var(--background);
  padding: 2rem;
  box-shadow: 0 2px 10px var(--accent);
  z-index: 1000;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.cookie-consent-page {
  display: none;
  flex-direction: column;
  gap: 2rem;
}

.cookie-consent-page:first-child {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cookie-category {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cookie-consent-button {
  padding: 1rem 2rem;
  background: unset;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-small);
}

#manage-cookies-detail,
#accept-selected-cookies,
#back-to-details {
  background: none;
  color: var(--text);
  border: 2.5px solid var(--accent);
  padding: 15px 30px;
}

:is(#manage-cookies-detail, #accept-selected-cookies, #back-to-details):hover {
  background: var(--accent);
  color: #121c29;
}

#accept-all-cookies-detail,
#accept-all-cookies-specific,
#save-accessibility-settings {
  background: var(--accent);
  color: #121c29;
  border: 2.5px solid var(--accent);
  padding: 15px 30px;
  cursor: pointer;
}

:is(#accept-all-cookies-detail, #accept-all-cookies-specific, #save-accessibility-settings):hover {
  border: 2.5px solid var(--accent);
  background: unset;
  color: var(--text);
}
#close-modal,
#close-modal-specific,#cookie-settings-link {
  color: var(--text);
  font-size: var(--font-size-small);
}

:is(#close-modal, #close-modal-specific,#cookie-settings-link):hover {
  color: var(--accent);
  text-decoration: underline;
}

.accessibility-settings-modal {
  display: none;
  flex-direction: column;
  gap: 1rem;
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 2rem;
  box-shadow: 0 2px 10px var(--accent);
  background: var(--background);
  color: var(--text);
  z-index: 10;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.accessibility-settings-button {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  padding: .5rem;
  background: #121c29;
  border: none;
  cursor: pointer;
  z-index: 3;
  width: 3rem;
  height: 3rem;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text); /* Adjust color as needed */
}

.back-to-top {
  display: none;
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  z-index: 10;
  height: 3rem;
  width: 3rem;
  background-color: var(--accent);
  color: var(--text);
  cursor: pointer;
  padding: 10px;
  background-image: url("/assets/arrow-icon.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  opacity: 0.7;
  box-shadow: var(--box-shadow) 0px 0px 9px 0px inset,
    var(--box-shadow) 0px 0px 5px 0px inset;
}

.back-to-top:hover {
  opacity: 1;
}

.back-to-top.show {
  display: block;
}

.created-by{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: #f9f6fb;
  font-size: 1.2rem;
}
.created-by img{
  width: 2rem;
  height: 2rem;
 background-color: #f9f6fb;
 padding: .2rem;
 border-radius: 1rem;
 -webkit-border-radius: 1rem;
 -moz-border-radius: 1rem;
 -ms-border-radius: 1rem;
 -o-border-radius: 1rem;
}
.created-by:hover{
  color: var(--accent);
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-66.6%);
  }
}

@keyframes loading_dot {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    -moz-transform: translate(-50%, -50%) rotate(0deg);
    -ms-transform: translate(-50%, -50%) rotate(0deg);
    -o-transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    -moz-transform: translate(-50%, -50%) rotate(360deg);
    -ms-transform: translate(-50%, -50%) rotate(360deg);
    -o-transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes reveal {
  from {
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
  }
}

@keyframes back {
  100% {
    background-position: 1000px 0;
  }
}

@keyframes fade {
  0% {
    opacity: 0;
    animation-play-state: paused; /* pause the animation */
  }
  20% {
    opacity: 1;
    animation-play-state: paused; /* pause the animation */
  }
  85% {
    opacity: 1;
    animation-play-state: paused; /* pause the animation */
  }
  100% {
    opacity: 0;
    animation-play-state: paused; /* pause the animation */
  }
}

@keyframes beat {
  0% {
    scale: 1;
  }
  100% {
    scale: 1.1;
  }
}

@media (max-width: 700px) {
  .navigation-links-container.big-screen {
    display: none;
  }

  .hamburger-menu {
    display: block;
  }
  .hamburger-links-container .navigation-links-container.display-row {
    display: flex;
  }
}

@media (max-width: 900px) {
  .home-about-text {
    order: 2;
  }
  .home-about-illustrations {
    order: 1;
  }
}