/* Shared CSS for all pages */

/* @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"); */

/* Circular Std Font */
/* Circular Std Font - Light (100) */
@font-face {
  font-family: "Circular Std";
  src: url("../src/assets/fonts/circular-std-light.woff2") format("woff2"),
    url("../src/assets/fonts/circular-std-light.woff") format("woff"),
    url("../src/assets/fonts/circular-std-light.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
/* Circular Std Font - book (400) */
@font-face {
  font-family: "Circular Std";
  src: url("../src/assets/fonts/FontsFree-Net-Circular-Std-Book.woff2")
      format("woff2"),
    url("../src/assets/fonts/FontsFree-Net-Circular-Std-Book.woff")
      format("woff"),
    url("../src/assets/fonts/FontsFree-Net-Circular-Std-Book.ttf")
      format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Circular Std Font - Medium (500) */
@font-face {
  font-family: "Circular Std";
  src: url("../src/assets/fonts/circular-std-medium-500.woff2") format("woff2"),
    url("../src/assets/fonts/circular-std-medium-500.woff") format("woff"),
    url("../src/assets/fonts/circular-std-medium-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Circular Std Font - Black (900) */
@font-face {
  font-family: "Circular Std";
  src: url("../src/assets/fonts/CircularStd-Black.woff2") format("woff2"),
    url("../src/assets/fonts/circular-std-black.woff") format("woff"),
    url("../src/assets/fonts/circular-std-black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* DIN Font (You'll need to replace with the correct URLs for your DIN font files) */
@font-face {
  font-family: "DIN";
  src: url("../assets/fonts/din.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  -webkit-font-smoothing: antialiased;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  font-family: "Circular Std", sans-serif;
  height: 100%;
  background: #080c26;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: white;
  text-decoration: none;
}
p {
  font-weight: 400;
  font-family: "Circular Std", sans-serif;
}
a:hover {
  color: #48e5ff;
  text-decoration: none;
}
#typingAnim {
  color: white;
  text-align: center;
  font-style: italic;
  margin-top: 20px;

  font-weight: 100 !important;
}
.font-black {
  font-weight: 900;
  font-family: "Circular Std", sans-serif;
}
b,
strong {
  font-weight: 900;
}
/* h3 {
  font-weight: bold;
  color: #48E5FF;
  padding-top: 20px;
}
h4 {
  font-weight: bold;
  font-size: 35px;
  padding-bottom: 10px;
} */
.block-type-values-heading {
  text-transform: uppercase;
  letter-spacing: 10.2px;
  font-size: 30px;
  font-weight: bold;
  padding-bottom: 10px;
}

.block-type-values-text {
  line-height: 21px;
}
.barba-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.custom-scrollbar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px #00ff55;
  background: #00000000;
  height: 10px;
  border-radius: 10px;
}
.home-services__item__line {
  background-color: rgba(2, 0, 36, 1);
  height: 2px;
  width: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(2, 0, 36, 0.7) 0%,
    rgba(0, 9, 255, 0.7) 25%
  );
  border-radius: 10px;
}
.font-light {
  font-weight: 100;
}
/* Handle on hover */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    0deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(0, 9, 255, 1) 25%
  );
}

.circular {
  font-family: "Circular Std Bold", sans-serif;
}
.wrapper {
  width: 100%;
  height: 100%;
}
nav ul {
  margin-top: 0;
}
.transition {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(2, 2, 85, 1) 60%,
    rgba(0, 9, 255, 1) 100%
  );
  position: fixed;
  top: 0;
  left: 0;
  transform: scaleY(0);
  transform-origin: bottom;
  z-index: 10;
}
.header {
  position: relative;
  width: 100%;
}
.header-revealer {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.header-revealer:after {
  content: "";
  position: absolute;
  top: 120px;
  left: 0;
  width: 110%;
  height: 110%;
  z-index: 1;
}

.wrapper-titles {
  width: 170vw;
  height: 100px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.wrapper-titles2 {
  width: 100vw;
  height: 100px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.m-scroll {
  display: flex;

  width: 100%;
  height: 100px;
  margin: auto;
  z-index: 1;
}

.m-scroll-title {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  transition: all 0.1s ease;
}

.m-scroll-title div {
  display: flex;
  animation: scrollText 50s infinite linear; /* cambiar animation duration */
}

.swiper {
  height: 400px;
}
.swiper5 {
  width: 100%;
  height: 100%;
}
.mySwiper5 .swiper-slide {
  width: 100%;
  height: 100%;
  opacity: 0.4;
}
.mySwiper5 {
  width: 100%;
}
.mySwiper5 {
  width: 100%;
  height: 100%;
}
.mySwiper5 .swiper-slide-thumb-active {
  opacity: 1;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
}
.block-type-project-heading {
  font-size: 32px;
  font-weight: 900;
  text-align: justify;
}
.block-type-project-text {
  font-size: 16px;
  text-align: justify;
}
.block-type-video {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  object-fit: cover;
  z-index: 0;
}
.block-type-project-video {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  object-fit: cover;
  z-index: 0;
}
.block-type-2video figure {
  position: absolute;
  height: 100%;

  border-radius: 20px;
  overflow: hidden;
  object-fit: cover;
  z-index: 0;
}
.swiper-slide .block-type-2video {
  height: 100% !important;
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 20;
}
.swiper-pagination-bullet {
  background: #48e5ff !important;
  opacity: 0.5;
}
.swiper-pagination-bullet-active {
  background: #48e5ff !important;
  opacity: 1;
}
.swiper-pagination {
  pointer-events: all !important;
}
.swiper-pagination-bullet {
  z-index: 20;
  position: relative;
}
figure {
  margin: 0;
  padding: 0;
  width: 100%;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: cover;
  overflow: hidden;
}
figure iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.background-video {
  transform: translateY(-4rem);
}
.background-video__inner {
  width: 100%;
  height: 100%;
}

.background-video .ui-video {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 56.25vw;
  z-index: 0;
  min-height: 110vh;
  min-width: 187.77vh;
}
.tag-with-line {
  position: relative;
}
.tag-with-line::before {
  content: "";
  background-color: #f5f5f5;
  width: 40px;
  height: 10px; /* Adjust the height of the line as needed */
}
.mySwiper4 {
  height: 80%;
  width: 100%;
}

.mySwiper3 {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.swiper2 {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}
.swiper-p {
  width: 100%;
  height: 100%;
}

.swiper-slide-p {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide-p img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-slide2 {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}
.swiper-slide .content-text {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.swiper-slide-active .content-text {
  opacity: 1;
}
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 9, 255, 1) 100%;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #48e5ff;
}
.swiper-button-next2,
.swiper-button-prev2 {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 9, 255, 1) 100%;
}
.swiper-button-next2:hover,
.swiper-button-prev2:hover {
  color: #48e5ff;
}
.full-landing-image {
  width: 100%;
  height: 100vh;
  background-color: (0, 0, 0, 0.2);
  z-index: 5;
  position: static;
  top: 0;
}

.bg-cards {
  -webkit-filter: brightness(200%) blur(60px);
  filter: brightness(110%) blur(60px) opacity(0.2);
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.circle {
  pointer-events: none;

  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin: 1px;
  background-color: currentColor;
  font-size: 14px;
}
@keyframes scrollText {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}
[x-cloak] {
  display: none !important;
}
.cursor::after {
  content: "|";
  animation: blink 0.7s infinite;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.fade-out {
  transition: opacity 1s ease-out;
  opacity: 0;
}
.block-type-contact-heading {
  font-size: 24px;
  font-weight: bold;
}
.block-type-contact-text {
  font-size: 16px;
  font-weight: 400;
  color: #c1c7ff;
  padding-top: 2px;
}
.attract {
  transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
#cookie-notice {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;

  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
  transform: translateX(-100%);
}
.video-container {
  position: relative;

  z-index: -10;
}
#bgVideo {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;

  width: auto;
  height: auto;
  transform: translateX(-50%) translateY(-50%);
  object-fit: cover;
}