/* style.css */

body,
html {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

#video-section {
  position: relative;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
}

.wrapper {
  width: 95%;
  margin: auto;
  padding-inline: min(1rem, 10vw);
}

video {
  display: block;
  max-height: 100%;
  width: 100%; /* Full viewport width */
  object-fit: cover; /* Cover the entire area */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  border-radius: 20px; /* Rounded corners */
  z-index: 1; /* Below the canvas */
}

.video-control {
  position: absolute;
  cursor: pointer;
  inset: min(20%, 4rem);

  max-width: 8rem;
  max-height: 8rem;
  margin: auto;

  z-index: 10;
  overflow: hidden;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.video-container {
  position: relative;
}

@media screen and (hover: hover) {
  .video-control {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .video-container:hover .video-control {
    opacity: 1;
  }
}

.video-tank-containers {
  display: grid;
  gap: min(1rem, 10vw);
}

.video-tank-container {
  position: relative;
  overflow: hidden;
  max-height: 100vh;
}

.play {
  background-image: url("/static/img/playbutton.58c6a5b5c3d8.png");
}

.pause {
  background-image: url("/static/img/pausebutton.6a951b9c4ef8.png");
}

/* main image STUFF*/
#main-image {
  --padding: 25px; /* Adjust the offset value as needed */
  cursor: pointer; /* Changes the cursor to indicate it's clickable */
  transition: transform 0.3s ease; /* Smooth transition for the transform */
  position: relative;
  padding-block: var(--padding);
}

.video3-image-container {
  position: absolute;
  top: 22%;
  left: 30%;
  right: 28%;
  bottom: 25%;
}

.draggable-image-styles {
  width: 10%; /* Set the width of the image */
  height: auto; /* Maintain aspect ratio */
  position: absolute;
  transition: transform 0.3s ease; /* Smooth transition for the transform */
  cursor: move;
  z-index: 1003;
  object-fit: cover;
}

.video3-image-container .draggable-image-styles {
  width: 20%; /* Set the width of the image */
}

.draggable-image-styles:hover {
  transform: scale(1.3); /* Scales up the image by 10% */
}

/* CAROUSEL image STUFF IMAGE CENTRES*/
.carousel-item {
  text-align: center;
  vertical-align: middle;
}
.carousel-item img {
  max-width: 100%;
  max-height: 900px;
  object-fit: contain;
  border-radius: 20px; /* Set the radius here */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for depth */
}

.modal-video {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border-radius: 20px;
  border: none; /* No border */
  cursor: pointer;
}

.modal-body {
  /* height: 920px; height of yellow modal */
  background-color: rgb(21, 32, 37) !important; /* Replace with your desired color */
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border: none !important; /* Remove any borders */
}
.modal-header {
  background-color: rgb(21, 32, 37) !important; /* Replace with your desired color */
  border: none !important; /* Remove any borders */
  border-top-left-radius: 40px !important;
  border-top-right-radius: 40px !important;
  z-index: 1040; /* Below the controls */
}
.modal-header .close {
  color: rgb(255, 210, 2) !important; /* Override other styles */
  z-index: 1150; /* Below the controls */
}

/* Ensuring the controls are visible outside the modal's content area */
.modal-dialog {
  position: relative;
  max-width: 900px; /* Fixed width for the modal */
  height: 900px; /* Fixed height for the modal */
  margin: auto;
}

.modal-content {
  padding: 0 !important; /* Remove padding */
  position: relative; /* Needed for z-index to take effect */
  background-color: rgb(21, 32, 37) !important;
  border-radius: 20px !important;
  z-index: 1040; /* Below the controls */
  overflow: visible; /* Ensure arrows are visible outside the modal content */
}

/* Hide the default arrows */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none !important; /* Hide the default arrows */
}

/* Add custom icons with ::after pseudo-elements */
.carousel-control-prev::after {
  content: ''; /* Clear the content */
  display: inline-block;
  width: 100px; /* Size of the custom arrow */
  height: 100px; /* Size of the custom arrow */
  background: url("/static/img/arrowback.1020a89c238e.png") no-repeat center center;
  background-size: 100% 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.carousel-control-next::after {
  content: ''; /* Clear the content */
  display: inline-block;
  width: 100px; /* Size of the custom arrow */
  height: 100px; /* Size of the custom arrow */
  background: url("/static/img/arrow.51b8c70e3e2c.png") no-repeat center center;
  background-size: 100% 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Positioning arrows outside of the modal */
.modal .carousel-control-prev,
.modal .carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2000; /* Ensure it's above the modal content */
}

.modal .carousel-control-prev {
  left: -180px; /* Adjust as needed */
}

.modal .carousel-control-next {
  right: -160px; /* Adjust as needed */
}

/* Yellow close button */
.modal-header .close {
  color: rgb(255, 210, 2);
  opacity: 1; /* Make sure it's fully visible */
}

.carousel-title {
  text-align: center;
  font-family: 'Henny Penny', cursive;
  font-size: 50px;
  color: rgb(255, 210, 2);
  margin: 0px;
  /* Add other styles as needed */
}

.carousel-description {
  /* Add styles for your description */
  font-size: 14px;
  color: rgb(255, 210, 2);
  font-family: 'New Tegomin', sans-serif; /* Replace with your actual font */
}

/* To ensure that the description has spacing around it */
.carousel-description-container {
  padding: 20px; /* Adjust the padding as needed */
}

/* title overlay */

#video-overlay-text {
  position: absolute;
  bottom: clamp(
    calc(var(--padding) * 1.5),
    calc(var(--padding) * 1.5 + 5vw),
    calc(var(--padding) * 1.5 + 15vh)
  );
  left: 50%;

  transform: translateX(-50%);
  z-index: 15; /* Higher than the video */
  color: rgb(0, 0, 0); /* Adjust text color as needed */
  font-family: 'Press Start 2P', cursive;
  text-align: center;
  width: min(calc(100% - (var(--padding) * 2)), 60ch); /* Adjust as needed */
  pointer-events: none;
  font-size: clamp(0.5rem, 0.25rem + 1vw, 1.125rem);
}

body {
  background-color :#1c392c; /* Set your desired background color */
}

.email-contact {
  display: inline-block; /* Treat the link as a block element */
  border: none; /* Remove any default borders */
  outline: none; /* Remove the outline */
  text-decoration: none; /* No underline */
}

.email-contact:hover,
.email-contact:focus {
  opacity: 0.8; /* Slightly transparent on hover/focus for feedback */
}