/* #region CSS Reset */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
/* #endregion */

/* #region HEADER */
.header-container {
    display: flex;
    justify-content: space-between; /* Distributes space between items */
    align-items: center;
    background-color: black;
    opacity: 0.75;
    padding: 0.5% 2vw; /* Adds space to both left and right sides */
    padding-right:2%;
    position: fixed;
    top: -200%; /* Initially hide it off-screen */
    width: 100%;
    z-index: 1000;
    box-sizing: border-box; /* Ensures padding doesn't affect width calculation */
    transition: top 0.3s ease; /* Smooth transition when header becomes visible */
}

.header-container.show-header {
    top: 0; /* Brings the header back into view */
}

.header-container a {
  color: white;
  text-decoration: none;
  font-family: "inter", sans-serif;
  font-size: 2vw; /* Adjust the font size as needed */
  padding: 0 30px;
}

.header-container a:first-child {
    margin-right: auto; /* Puts the first link to the left */
}

.header-container a:not(:first-child) {
    margin-left: 20px; /* Adds space between the links except the first */
}
/* #endregion */

/* The Modal (background) */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1000; 
  padding-top: 60px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  overflow: auto; 
  background-color: rgba(0,0,0,0.9); 
}

/* Modal Content (the image) */
.modal-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
}

/* Caption text */
#caption {
  margin: 10px auto;
  text-align: center;
  color: #ccc;
  font-size: 1.2vw;
}

/* Close button */
.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover {
  color: #bbb;
}


/* #region BODY */
p {
    text-align: center;
    font-family: "inter", sans-serif;
    color: white;
    font-size: 2vw;
}
/* #endregion */
img.mouse-hover:hover {
  opacity: 0.5;
  transition: 0.3s;
}
/* #region BANNER */
/* Banner container with responsive height */
.banner-container {
    position: relative;
    width: 100%;
    height: 18vh; /* Sets the banner height to 50% of the viewport height */
    overflow: hidden; /* Ensures the image outside the container gets hidden */
  }
  
  /* Image inside the banner */
  .banner-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Ensures the image spans the full width */
    height: 100%; /* Ensures the image fills the full height */
    object-fit: cover; /* Ensures the image covers the container without stretching */
  }
  
  /* Title inside the banner */
  .banner-title {
    position: absolute;
    top: 65%; /* Centers the title vertically */
    left: 13%; /* Centers the title horizontally */
    transform: translate(-50%, -75%); /* Fine-tunes centering by shifting it back */
    color: white;
    font-family: "inter", sans-serif;
    font-size: 3vw; /* Adjust the font size responsively */
    font-weight: bold;
    text-align: left;
    z-index: 30; /* Ensure the title is above the image */
  }
  .banner-subtitle {
    position: absolute;
    top: 80%; /* Centers the title vertically */
    left: 10%; /* Centers the title horizontally */
    transform: translate(-50%, -60%); /* Fine-tunes centering by shifting it back */
    color: white;
    opacity: 0.7;
    font-weight:bold;
    font-family: "inter", sans-serif;
    font-size: 2vw; /* Adjust the font size responsively */
    text-align: left;
    z-index: 30; /* Ensure the title is above the image */  
  }
  

/* #endregion */

/* #region Body Text */
.body-title {
  font-family: "inter", sans-serif; /* Set your preferred font */
  color: black; /* Black text color */
  font-size: 3vw; /* Responsive font size */
  line-height: 1.5; /* Adjust line spacing for readability */
  text-align: center; /* Default text alignment */
  margin: 10px 0; /* Optional: Space around the text */
}

.body-text {
  font-family: "inter", sans-serif; /* Set your preferred font */
  color: black; /* Black text color */
  font-size: 1vw; /* Responsive font size */
  line-height: 1.5; /* Adjust line spacing for readability */
  text-align: left; /* Default text alignment */
  margin: 20px 15%; /* Optional: Space around the text */
}

/* #endregion */

/* #region hotbar */
.hotbar {
  position: absolute;
  top: 80%;
  width: 20%;
  right:0%;
  transform: translate(0, -60%);
  display: flex; /* Enable Flexbox */
  justify-content: space-evenly; /* Distributes space evenly between the links */
  align-items: right; /* Vertically centers the links */
/* Adds vertical padding for the links */
}

.hotbar a {
  color: white;
  text-decoration: none;
  font-family: "inter", sans-serif;
  font-size: 2vw; /* Adjust the font size as needed */
}

.hotbar a:hover {
  opacity: 0.8; /* Optional: gives a hover effect */
}
/* #endregion */

/* #region slideshow */

/* Slideshow container */

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
  display: flex;
  justify-content: center; /* Horizontally center the slides */
  align-items: center; /* Vertically center the slides */
}

/* Hide the images by default */
.mySlides:first-child {
  height: 100%;
  width: auto;
  flex-direction: column;
  align-items: center;
  display: block;
  margin: 0 auto;
}

.mySlides {
  display: none; /* hide all slides initially */
}

/* Next & previous buttons */
/* Removed duplicate .prev, .next block to avoid conflicts */

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

.prev {
  left: 0; /* Aligns the left arrow with the left edge */
  border-radius: 3px 0 0 3px;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* Vertically center the buttons */
  width: auto;
  padding: 16px;
  color: lightslategray;
  font-weight: bold;
  font-size: 48px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

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

.prev {
  left: 0; /* Aligns the left arrow with the left edge */
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.text {
  color: #f2f2f2;
  font-family: "inter", sans-serif;
  font-size: 3vw; /* Responsive to image/slide size */
  /* font-weight: bold; */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25%; /* Place above the bottom edge of the slide */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
  width: 100%; /* Match slide width */
  height: 100%; /* Match slide height */
  pointer-events: none; /* Make the text invisible to mouse events */
  user-select: none;    /* Prevent text selection */
}

.dot-container {
  text-align: center;
  margin-top: 20px; /* Add space between dots and slides */
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

/* #endregion */

 /* Three image containers (use 25% for four, and 50% for two, etc) */
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  align-items: flex-start; /* make all columns align at the top */
  justify-content: center; /* center-align the columns */
}

.column {
  width: 25%;  
  padding: 10px;
  box-sizing: border-box; 
}

.column img {
  margin-top: 8px;
  width: 100%;
  display: block; 
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.image-container {
  max-width: 30%; /* Limit the container width */
  margin: auto; /* Center the container */
  text-align: left; /* Align text inside the container */
}

.img-responsive {
  max-width: 100%; /* Ensure the image scales to fit the container */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Ensures no inline spacing issues */
}

.caption {
  color: #000000;
  font-family: "inter", sans-serif;
  font-size: 20px;
  padding: 8px 0; /* Add spacing above/below caption text */
  text-align: center;
  width:100%
}

 /* Style inputs with type="text", select elements and textareas */
 input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #000000;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #000000;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
} 

table {
  width:35%;
  text-align: left;
  color:darkgray;
  margin-left:35%;
  font-size:1vw;
}

tr {
  vertical-align: top;
  padding-right:50px;
}