body, html {
  background-color: #000000;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* Only hide horizontal overflow */
}

@font-face {
  font-family: 'CustomFont'; /* Name your font family */
  src: url('geek.ttf'); /* Locate the .ttf file within your directory*/
}


.slideshow {
  position: relative;
  z-index: 1; /* Set a lower z-index */
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slideshow-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  animation-name: kenburns;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 16s;
  opacity: 1;
  transform: scale(1.2);
}

.slideshow-image:nth-child(1) {
  animation-name: kenburns-1;
  z-index: 13;
}

.slideshow-image:nth-child(2) {
  animation-name: kenburns-2;
  z-index: 12;
}

.slideshow-image:nth-child(3) {
  animation-name: kenburns-3;
  z-index: 11;
}

.slideshow-image:nth-child(4) {
  animation-name: kenburns-4;
  z-index: 10;
}

.slideshow-image:nth-child(5) {
  animation-name: kenburns-5;
  z-index: 9;
}

.slideshow-image:nth-child(6) {
  animation-name: kenburns-6;
  z-index: 8;
}

.slideshow-image:nth-child(7) {
  animation-name: kenburns-7;
  z-index: 7;
}

.slideshow-image:nth-child(8) {
  animation-name: kenburns-8;
  z-index: 6;
}

.slideshow-image:nth-child(9) {
  animation-name: kenburns-9;
  z-index: 5;
}

.slideshow-image:nth-child(10) {
  animation-name: kenburns-10;
  z-index: 4;
}

.slideshow-image:nth-child(11) {
  animation-name: kenburns-11;
  z-index: 3;
}

.slideshow-image:nth-child(12) {
  animation-name: kenburns-12;
  z-index: 2;
}

.slideshow-image:nth-child(13) {
  animation-name: kenburns-13;
  z-index: 1;
}

@keyframes kenburns-1 {
  0%, 7.692% {
    opacity: 1;
    transform: scale(1.2);
  }
  15.384%, 100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-2 {
  7.692%, 15.384% {
    opacity: 1;
    transform: scale(1.2);
  }
  23.076%, 100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-3 {
  15.384%, 23.076% {
    opacity: 1;
    transform: scale(1.2);
  }
  30.768%, 100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-4 {
  23.076%, 30.768% {
    opacity: 1;
    transform: scale(1.2);
  }
  38.46%, 100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-5 {
  30.768%, 38.46% {
    opacity: 1;
    transform: scale(1.2);
  }
  46.152%, 100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-6 {
  38.46%, 46.152% {
    opacity: 1;
    transform: scale(1.2);
  }
  53.844%, 100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-7 {
  46.152%, 53.844% {
    opacity: 1;
    transform: scale(1.2);
  }
  61.536%, 100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-8 {
  53.844%, 61.536% {
    opacity: 1;
    transform: scale(1.2);
  }
  69.228%, 100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-9 {
  61.536%, 69.228% {
    opacity: 1;
    transform: scale(1.2);
  }
  76.92%, 100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-10 {
  69.228%, 76.92% {
    opacity: 1;
    transform: scale(1.2);
  }
  84.612%, 100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-11 {
  76.92%, 84.612% {
    opacity: 1;
    transform: scale(1.2);
  }
  92.304%, 100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-12 {
  84.612%, 92.304% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-13 {
  92.304%, 100% {
    opacity: 1;
    transform: scale(1.2);
  }
}

h1 {
  position: absolute; /* Change from fixed to absolute */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Offset the element’s own dimensions */
  z-index: 99;
  text-align: center;
  font-family: CustomFont;
  color: white;
  font-weight: 700; /* Thicker text */
  text-transform: uppercase;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 2em 3em;
  line-height: 1.5;
  border-radius: 15px;
  box-shadow: 0 0 20px 5px white;
}

h1 small {
  display: block;
  text-transform: lowercase;
  font-size: 0.7em;
}

h1 small:first-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 0.5em;
}

h1 small:last-child {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 0.5em;
}

h1::before {
  font-family: CustomFont;
  content: '$CARTI';
  position: absolute;
  top: -50px; /* Adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  color: white;
  font-size: 6em; /* Glow size */
  font-weight: 700;
  opacity: 0.5;
  filter: blur(10px); /* Glow effect */
}

.cta-button {
  font-family: CustomFont;
  display: inline-block;
  margin-top: 1em;
  margin-left: 0.5em;
  margin-right: 0.5em; /* Space between buttons */
  padding: 0.5em 1em;
  font-size: 1em;
  color: #333;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-transform: uppercase;
  font-family: Raleway, sans-serif;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 10px 2px white; /* Glow effect */
  transition: background-color 0.3s, transform 0.3s;
}

.cta-button:hover {
  background-color: #ddd;
  transform: translateY(-2px);
}

/* New section styles */
.new-section {
  position: relative;
  z-index: 2; /* Set a higher z-index to ensure it's above the slideshow */
  padding: 20px;
  background-color: #000000;
  text-align: center;
  margin-top: 20px; /* Add some margin to separate it from the slideshow */
}

.new-section h2 {
  font-family: CustomFont;
  font-size: 50px;
  font-weight: 300;
  margin-bottom: 20px;
  color: white; /* Ensure text is visible on dark background */
}

.new-section p {
  font-family: CustomFont;
  font-weight: 300;
  margin-bottom: 40px;
  color: white; /* Ensure text is visible on dark background */
}

.gallery {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.gallery-item {
  background-color: #000000;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  width: 100%; /* Adjust the width if needed */
  text-align: center;
}

.elfsight-app-0e2d6e9f-7bc4-4782-a944-85d3dd35cb4b {
  width: 100%;
  height: 500px; /* Set a suitable height */
  border-radius: 5px;
}

.gallery-item p {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  margin-top: 10px;
}