*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

::before,
::after {
  --tw-content: '';
}

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
  tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

body {
  margin: 0;
  line-height: inherit;
}

@media (min-width: 2000px) {
  .w-3xl {
    width: 80%;
  }

  .w1-3xl {
    width: 60%;
  }

  .w2-3xl {
    width: 50%;
  }
}

/* Import Fonts */

@font-face {
  font-family: 'Futura PT';
  src: url("/assets/fonts/Futura/Futura Bold/Futura Bold.otf");
}

.font-futura {
  font-family: 'Futura PT', sans-serif;
}

.font-lato {
  font-family: 'Lato', sans-serif;
}

@keyframes fadeContent {
  from {
    opacity: 0;
    transform: translateY(-5%);
  }

  to {
    opacity: 1;
    transform: translateY(50);
  }
}

@keyframes fadeContent2 {
  from {
    opacity: 0;
    transform: translateX(-5%);
  }

  to {
    opacity: 1;
    transform: translateX(50);
  }
}

.fade {
  animation: fadeContent 1s ease-out forwards;
}

.fade-2 {
  animation: fadeContent2 2s ease-out forwards;
}

/* arrow */

/* .arrow,
.arrow:before {
  position: absolute;
  left: 50%
}

.arrow {
  width: 40px;
  height: 40px;
  top: 50%;
  margin: -20px 0 0 -20px;
  transform: rotate(45deg);
  border-left: none;
  border-top: none;
  border-right: 2px #fff solid;
  border-bottom: 2px #fff solid;
}

.arrow:before {
  content: '';
  width: 20px;
  height: 20px;
  top: 50%;
  margin: -10px 0 0 -10px;
  border-left: none;
  border-top: none;
  border-right: 1px #fff solid;
  border-bottom: 1px #fff solid;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: arrow;
}

@keyframes arrow {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-10px, -10px);
  }
} */

/* CSS for fullscreen mode */
.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.fullscreen img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.image-container {
  transition: opacity 0.3s;
  /* Adding a transition for smoother opacity change */
}

/* Show the icon on hover */
.image-container:hover {
  opacity: 1;
}