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

body, html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.video-background {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: 50px; /* Create top margin */
}

/* Default horizontal video */
#background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures video covers the area */
}

/* Content styling */
/* Content styling */
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 2em; /* Adjust the font size as needed */
  
  /* Apply gradient to text */
  background-image: linear-gradient(to right, rgb(6, 152, 250), rgb(255, 0, 255)); /* Example gradient */
  -webkit-background-clip: text; /* Clip the background to the text */
  color: transparent; /* Make text color transparent to show gradient */
}


h1 {
  font-size: 3em;
  margin-bottom: 20px;
}

p {
  font-size: 1.2em;
}

/* Media Query for screens smaller than 768px (e.g., mobile) */
@media screen and (max-width: 768px) {
  /* Vertical video */
  #background-video {
    object-fit: cover; /* Ensures video still fills the container */
    width: 100%; /* Ensure video is full width */
    height: 100%; /* Full height of the viewport */
  }

  /* Adjust content styling if needed */
  .content {
    font-size: 1.5em; /* Reduce font size for smaller screens */
  }
}

/* Media Query for screens in Portrait Mode (vertical orientation) */
@media screen and (orientation: portrait) {
  #background-video {
    object-fit: cover; /* Ensure the video covers the container */
    height: 100%;
    width: 100%;
  }
}