/* Global Styles */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #9f3616;
  font-family: 'Freeman', sans-serif;
  letter-spacing: 1px; 
  overflow: hidden;
  position: relative;
}

main {
  height: 100svh;
  z-index: 5;
  position: relative;
  width: 80%; /* Sets the width of the main content area */
  margin-left: auto; /* Centers the block horizontally */
  margin-right: auto; /* Centers the block horizontally */
  pointer-events: none;
}

.main-title-img {
  position: relative;
}

/* Styles relative to central image */

.aspect-ratio-box-container {
  width: 40%; /* Your desired width */
  position: absolute; /* Your desired positioning */
  /* Add other positioning properties like top, left, right, bottom as needed */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for true centering */
  padding-top: calc(40% * 4 / 5); /* 4/5 = 0.8. So, 80% of the width. */
  /* Or, more simply: padding-top: 80%; */
  height: 0; /* Important: collapse the container's height */
  overflow: hidden; /* Hide any content that might spill outside the padding */
}

.bg-img {
  z-index: 1; /* Keep z-index for layering */
  display: block;
  position: absolute; /* Position relative to the main container */
  width: 100%; /* Adjust as needed, e.g., 50%, 70% */
  height: 100%; /* Adjust as needed */
  object-fit: contain; /* Ensures video covers the defined area */
  top: 0; /* Center vertically */
  left: 0; /* Center horizontally */
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

.bg-img.visible {
  opacity: 1;
}

/* End styles relative to central image */





/* Nav buttons */
.nav-btn {
  /*font-family: 'Freeman', sans-serif;*/
  font-size: 1rem;
  color: white;
  background-color: transparent;
  border: none;
  padding: 1rem 1rem 0rem 1rem; /* top | right | bottom | left */
  border-radius: 0;
  z-index: 100;
  position: relative;
  letter-spacing: 1px; 
  display: inline-block;
}

/* the underline */
.nav-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1px; /* distance below the text */
  width: calc(100% - 2rem);
  height: 2px;
  background-color: white;
  opacity: 0; /* hidden by default */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* show on hover */
.nav-btn:hover::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

/* active/selected effect */
.nav-btn.active::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

/* Bottom text box */
.bottom-text {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: white;
  font-family: 'Freeman', sans-serif;
  padding: 1rem;
  font-size: 1rem;
  z-index: 10;
}

/* Classes that manage the mouse movement and strip functionality */
.overlay {
  position: fixed;     /* stays pinned to viewport */
  top: 0;
  left: 0;
  width: 100vw;        /* full width */
  height: 100vh;       /* full height */
  vertical-align: text-bottom;
  pointer-events: none; /* let clicks pass through by default */
   /* sit on top of everything */
  display: flex;       /* flexbox divides evenly */
}

.strip {
  flex: 1;             /* equal width */
  height: 100%;
  pointer-events: auto; /* enable mouse events only on strips */
  background: transparent; /* invisible */
  z-index: 10;      
}
/* End classes that manage the mouse movement and strip functionality */

/* Responsive Adjustments with Media Queries */
@media (max-width: 992px) { /* Medium devices and below */
  .main-title {
      font-size: 6rem;
  }
  .nav-btn {
      font-size: 1rem;
  }
  .bottom-text {
      font-size: 1rem;
  }

}

@media (max-width: 768px) { /* Small devices and below */
  .main-title {
      font-size: 4rem;
  }
  .nav-btn {
      font-size: 0.9rem;
  }
  .bottom-text {
    font-size: 0.9rem;
    padding: 1rem;
}
.aspect-ratio-box-container {
  width:80%;
  padding-top: calc(80% * 4 / 5);
}
main {
  width: 90%;
}
}

@media (max-width: 576px) { /* Extra small devices (phones) */
  .main-title {
      font-size: 3rem;
  }
  header .p-3 {
      padding: 1rem !important; /* Reduce padding on header */
  }
  .nav-btn {
      font-size: 0.8rem;
  }
  .bottom-text {
    font-size: 0.8rem;
    padding: 1rem;
}
.aspect-ratio-box-container {
  width:70%;
  padding-top: calc(80% * 4 / 5);
}
main {
  width: 90%;
}
}




/*
.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4); 
  z-index: 2;
}
  */

/* Initially hide the image and overlay
.img-fluid.bg-img,
.img-overlay {
    visibility: hidden; 
    opacity: 0;          
    transition: opacity 0.5s ease, visibility 0s 0.5s; 
}
*/

/* When displayed, set them to visible
.img-fluid.bg-img.visible,
.img-overlay.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease, visibility 0s 0s;  
}
*/

/* Header positioning 
header {
  z-index: 10;
}
  +/

  /*
.image-wrapper {
  position: relative;
  display: inline-block; /* shrink-wrap to the image size 
}
*/

/* Main title styling 
.main-title {
  font-family: 'Tac One', sans-serif;
  font-size: 10rem;
  color: white;
  z-index: 10;
  position: relative;
}
*/