* { box-sizing: border-box; }

body {
    background: linear-gradient(172deg, rgba(85,72,64,1) 0%, rgba(65,83,59,1) 100%);
    font-family: 'Open Sans', sans-serif;
    color: white;
    min-height: 100vh;
    margin: 0;
}

.main-content h1,h2,h3 {text-align: center; }

h1 { font-family: 'Montserrat', sans-serif; font-size: 30px; line-height: 1.5; margin: 10px 0; }
h2 { font-family: 'Montserrat', sans-serif; font-size: 28px; line-height: 1.5; margin: 10px 0; }
p { line-height: 1.5; font-size: 16px; }

.alert {
    color: black;
    background-color: yellow;
    max-width: 450px;
    border-radius: 9px;
    margin: 15px auto;
    padding: 10px;
    font-weight: bold;
}

.banner { max-width: 100%; margin: 0px; padding: 0px;}

.myButton {
    background-color: #1A100E;
    border-radius: 4px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    padding: 10px 20px;
    margin: 10px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    transition: 0.3s;
}

.myButton:hover { color: #38ffb6; box-shadow: 0 4px 15px rgba(56, 255, 182, 0.6); }

.wrapper { max-width: 900px; margin: 40px auto; }

.nav-container { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }

.nav-link { color: lightyellow; font-size: 18px; cursor: pointer; padding: 10px 5px; border-bottom: 3px solid transparent; }
.nav-link.active { color: #38ffb6; border-bottom: 3px solid #f96854; }
.nav-link:hover{
   color: #38ffb6;
}
.display-content {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease;
    background-color: #ffffff;
    border-radius: 15px;
    color: black;
    margin-top: 20px;
}

.display-content.is-visible { opacity: 1; visibility: visible; max-height: 5000px; padding: 25px; border: 1px solid #ddd; }

/* SLIDESHOW STYLING */
.slideshow-container-inner {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    background-color: #0d0d0d;
    border-radius: 12px;
}

.slideshow-container-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, transparent 20%, #0d0d0d 90%);
    pointer-events: none;
    z-index: 10;
}

a {
  text-decoration: none;
}

.slide-inner { display: none; width: 100%; height: 100%; }
.slide-inner img { width: 100%; height: 100%; object-fit: cover; }

.caption {
  position: absolute;
      bottom: 50%;
      left: 50%;
      transform: translate(-50%, 50%); /* This centers the element based on its own size */
      color: white;
      font-family: 'Arial Black', sans-serif;
      font-size: 18px;
      font-weight: 600;
      z-index: 100;
      text-shadow: 2px 2px 10px black;
      pointer-events: none;
      text-align: center; /* Ensures multiple lines of text are centered within the box */
      white-space: nowrap; /* Prevents text from wrapping if it's long */
}

.fade { animation: armyReveal var(--duration) infinite ease-in; }

@keyframes armyReveal {
    0% { opacity: 0; transform: scale(var(--zoom-intensity)); filter: blur(20px) grayscale(1); }
    15% { opacity: 1; filter: blur(0px) grayscale(0); }
    85% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.85); filter: blur(10px); }
}

.social-menu { display: flex; justify-content: center; gap: 20px; margin: 20px 0; }
.social-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: #1A100E; color: white; border-radius: 50%; transition: 0.3s; }
.social-icon:hover { transform: translateY(-5px); }

@media (max-width: 600px) {
    h1 { font-size: 32px !important; }
    .myButton { width: 90%; display: block; margin: 15px auto; }
}

img {
  max-width: 100%;
  height: auto;
}

p.info {
    color: #124712;
    font-size: 18px;
    line-height: 1.2;
    font-weight: bold;
}

table { width: 100%; border-collapse: collapse; margin-top: 10px; }
table td {
    border: 2px solid #d6c1ab;
    padding: 15px;
    background-color: #fafaf5;
    border-radius: 8px;
}

.detail-page {
  color: black;
}

.short{
      max-width: 800px; /* Limits the image width to a maximum of 800px */
      width: 100%;       /* Ensures the image uses the full width of its container on small screens */
      height: auto;      /* Maintains the aspect ratio */
      display: block;    /* Optional: helps with alignment and avoids extra space below the image */
      margin: 0 auto;    /* Optional: centers the image if its width is less than 100% of the container */
}



a.sub-menu {
  color: #284283;
  font-size: 18px;
  cursor: pointer;
  padding: 10px 5px;
  border-bottom: 3px solid transparent;
}

a.sub-menu:hover{
  color: #9acdda;
  transition: 0.3s;
}

.contents {
  width: 80%; /* Content area is 80% of the page width */
   margin: 0 auto; /* Center the container horizontally */
   box-sizing: border-box; /
}