body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Courier New", Courier, monospace;
    overflow: hidden;
}

.bgvideo {
    position: relative;
    height: 100%;
    width: 100%;
}

#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topleft, .middle, .bottomleft {
    position: absolute;
    /* Add positioning styles as needed */
}

/*backgeound styles*/  

.bgimg {
background-image: url('https://images.pexels.com/photos/764880/pexels-photo-764880.jpeg');
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-family: "Courier New", Courier, monospace;
font-size: 25px;
}

.topleft {
position: absolute;
top: 0;
left: 16px;
}

.bottomleft {
position: absolute;
bottom: 0;
left: 16px;
}

.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

hr {
margin: auto;
width: 40%;
}

h2#demo {
  position: absolute;
  top: 8px;
  right: 32px;
  font-size: 24px; /* Adjust the font size as needed */
  color: black; /* Change to black color */
}

p,h1,h2 {
color: black;
}

.logo {
    position: absolute;
    top: 8px;
    left: 32px;
}

.bottomleft {
    left: 32px;
}

.logo img {
    width: 150px; /* Adjust the size as needed */
    height: auto;
}

.image-above {
    text-align: center;
    margin-top: 20px; /* Adjust the margin as needed */
}

.image-above img {
    max-width: 100%; /* Ensure the image fits within the container */
    height: auto;
}


/*------- slider text shifting----------- */

/* Slideshow container */
.slideshow-container {
  position: relative;
  background: transparent; /* Set to transparent background */
}

/* Slides */
.mySlides {
  display: none;
  padding: 2px;
  text-align: center;
  background: transparent(255, 255, 255, 0.8); /* Add a light background with transparency */
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
}

/* Add an italic font style to all quotes */
q {font-style: italic;}


/* Additional styles for automatic slideshow */
.automatic-slideshow {
  animation: slide 8s infinite;
}

@keyframes slide {
  0%, 100% {
    opacity: 0;
    transform: translateX(100px);
  }
  10%, 90% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 450px) {
  #demo {
    font-size: 10px !important;
    /* Other styles */
    white-space: nowrap; /* Prevent line breaks */
    width: 100%; /* Make the element span full width */
    text-align: right; /* Center the text horizontally */
    right: 0px !important; /* Adjust positioning as needed */
    top: 0% !important;     
    transform: none; /* Reset any previous transforms */
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent black overlay */
    color: rgb(0, 0, 0) !important; /* Text color */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a subtle text shadow */ 
  }

  .logo img {
    width: 50px; /* Adjust the size as needed */
    height: auto;
    top: 10px;
  }

  .bottomleft p {
      font-size: 12px; /* Adjust the size as needed */
    }

  .audio-toggle {
    position: absolute;
    top: 10% !important; /* Adjust the vertical position as needed */
    right: 0px !important; /* Adjust the spacing from the right side */
    transform: translate(0, -50%);
    }

    #background-video {
      width: 100%; /* Set the video width to 100% of the container */
      height: auto; /* Allow the video to adjust its height proportionally */
      object-fit: contain; /* Fit the video while maintaining its aspect ratio */
    }
}

/* Styles for the custom toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.audio-toggle {
  position: absolute;
  top: calc(50% + 20px); /* Adjust the vertical position as needed */
  right: 20px;
  top: 120px;
  transform: translate(-50%, -50%);
}

.toggle-switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #585858;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 3px;
  bottom: 2.5px;
  background-color: rgb(92, 2, 2);
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #f16970;
}

input:checked + .slider:before {
  transform: translateX(18px);
}


@media (max-width: 400px) {
  /* Styles for the image card */
  .image-card {
    display: none; /* Initially hide the image card */
    position: absolute;
    top: 600px; /* Align the top of the container with the bottom of the viewport */
    left: 0;
    width: 100%;
    transform: translateY(-100%); /* Move the container up by its own height */
    z-index: 1; /* Place the container below the video */
  }

  .image-card img {
    width: 100%;
    height: auto;
  }

  .image-card {
    display: block; /* Show the image card in mobile view */
    /* Add any other styling you need for the image card */
  }
}

@media (max-width: 450px) and (min-width: 400px) {
  /* Styles for the image card */
  .image-card {
    display: none; /* Initially hide the image card */
    position: absolute;
    top: 700px; /* Align the top of the container with the bottom of the viewport */
    left: 0;
    width: 100%;
    transform: translateY(-100%); /* Move the container up by its own height */
    z-index: 1; /* Place the container below the video */
  }

  .image-card img {
    width: 100%;
    height: auto;
  }

  .image-card {
    display: block; /* Show the image card in mobile view */
    /* Add any other styling you need for the image card */
  }
}