@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

#video_link {
  display: inline-block; /* Ensure it wraps around the video */
  text-decoration: none; /* Remove underline if needed */
}

#video_link video {
  display: block; /* Ensure video displays correctly within the link */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

body {
  background-color: #000;
  background-image: url(bg.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 20px;
  font-family: 'Inter', Arial, sans-serif;
  text-align: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh; /* Ensure the container takes at least the full height of the viewport */
  padding: 0 15px; /* Add padding to prevent text from touching edges */
}

h1 {
  color: #A4FF00;
  font-size: 1.5em;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2em;
  text-transform: uppercase;
  margin-bottom: 24px;
  margin-top: 20px; /* Ensure there’s space above h1 */
}

h2 {
  color: #FAFAFA;
  text-align: center;
  font-family: Inter;
  font-size: 2em;
  font-style: normal;
  font-weight: 500;
}

p {
  color: rgba(250, 250, 250, 0.80);
  text-align: center;
  font-family: Inter;
  font-size: 1.3em;
  font-style: normal;
  font-weight: 300;
  line-height: 1.25em;
  max-width: 640px;
  margin: 24px auto;
}

a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 260px;
  height: 72px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #A4FF00;
  color: #000;
  text-align: center;
  font-family: Inter;
  font-size: 1.2em;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  text-decoration: none;
  margin: 20px auto;
  border-radius: 70px;
  box-shadow: 0px 101px 28px 0px rgba(0, 0, 0, 0.01), 0px 65px 26px 0px rgba(0, 0, 0, 0.05), 0px 36px 22px 0px rgba(0, 0, 0, 0.18), 0px 16px 16px 0px rgba(0, 0, 0, 0.31), 0px 4px 9px 0px rgba(0, 0, 0, 0.36);
}

a:active {
  transform: scale(0.98);
  box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.18);
}

.video_container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: 32px auto;
}

.video {
  width: 420px;
  height: 420px;
  overflow: hidden;
  border-radius: 16px;
  border: 5px solid rgba(255, 255, 255, 0.20);
  box-shadow: 0px 101px 28px 0px rgba(0, 0, 0, 0.01), 0px 65px 26px 0px rgba(0, 0, 0, 0.05), 0px 36px 22px 0px rgba(0, 0, 0, 0.18), 0px 16px 16px 0px rgba(0, 0, 0, 0.31), 0px 4px 9px 0px rgba(0, 0, 0, 0.36);
}

.video_slider_container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
}

.video_wrapper {
  width: 320px;
  height: 320px;
  overflow: hidden;
  border-radius: 16px;
  border: 5px solid rgba(255, 255, 255, 0.20);
}

.video_wrapper video {
  width: 100%;
  height: 100%;
}

.slider_arrow {
  background-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  border: none;
  font-size: 24px;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;  /* Makes it circular */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;  /* Set a fixed width */
  height: 50px; /* Set a fixed height to make it circular */
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider_arrow:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.left_arrow {
  left: 10px;
}

.right_arrow {
  right: 10px;
}

.video_dots_container {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: rgba(255, 255, 255, 1);
}

/* Mobile styles */
@media (max-width: 768px) {
  .container {
    padding: 0 10px; /* Add padding to prevent text from touching edges */
  }

  h1 {
    font-size: 1.2em;
    margin-bottom: 16px;
    margin-top: 10px; /* Adjust top margin for mobile */
  }

  h2 {
    font-size: 1.5em;
  }

  p {
    font-size: 1em;
    margin: 16px 0; /* Adjust margin to fit mobile view */
  }
}