add a /* ---------- Global Styles ---------- */
body {
  margin: 0;
  overflow: visible;
  /* Use the light font family for the main body text */
  font-family: "Thasadith-Light", Verdana, Geneva, sans-serif;
  color: white;
  background-color: black; /* Explicitly ensure the body background is black */
}

/* Common reset for tap highlights */
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

h1, h2, h3, p, blockquote {
  color: white;
  /* Use the light font family for general text elements */
  font-family: "Thasadith-Light", Verdana, Geneva, sans-serif;
}

.v3d-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Fix: Ensure this container is transparent so only the body background shows */
  background: transparent;
}

/* ---------- Layout (Visibility Fix) ---------- */
.txt-container {
  position: absolute;
  width: 100%;
  /* FIXED: height: 100%; removed to allow content to flow and buttons to be visible */
  top: 0;
  right: 0;
  text-align: left; /* Center alignment for the new sub-head */
  background: transparent;
  z-index: 10; /* Ensures content is above 3D elements */
  padding-top: clamp(20px, 5vw, 60px);
}

.txt-main-head {
  color: #fff;
  font-size: 48px;
  margin-top: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
}

/* New Sub-Headline Style (for H1: "Film & Tv" and H2s) */
/* This targets H1 elements with .txt-sub-head */
h1.txt-sub-head {
  color: #fff;
  /* H1 Size: 80px */
  font-size: 80px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* Uses the bold font family to match the button */
  font-family: "Thasadith-Bold", Verdana, Geneva, sans-serif;
  text-align: center;

  /* Positioning and spacing above and below the description box (Desktop Default) */
margin-top: clamp(80px, 15vw, 200px);
margin-bottom: clamp(80px, 10vw, 160px);
  position: relative;
}

/* Target H2 elements with .txt-sub-head inside the description-container */
.description-container h2.txt-sub-head {
  font-size: 20px;
  margin-top: 40px; /* spacing for smaller header */
  margin-bottom: 5px;
  text-align: center;
}

/* ---------- Description Section ---------- */
.description-container {
  position: relative;
  max-width: 600px;
  margin: clamp(30px, 10vw, 300px) auto;
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
}

/* ✅ Correct image scaling */
.description-container img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 10px;
}


/* ---------- Image Caption Style ---------- */
.image-caption {
  font-size: 16px;
  line-height: 1.5;
  color: #aaa; /* Slightly subdued color */
  text-align: center;
  margin-top: 10px; /* Space above */
  margin-bottom: 30px; /* Space below */
  font-style: italic;
}
/* ---------- Buttons Section (Blur, Animation, Centering) ---------- */
.storyboard-link {
  /* Use flex for centering the single button */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 20px;
}

/* Grouping common button styles for blur and animation */
.extra-button {
  position: static;
  width: 280px;
  height: 40px;
  padding: 14px 5px 0 5px;
  text-align: center;
  border-radius: 30px;
  font-size: 20px;
  font-family: "Thasadith-Bold", Verdana, Geneva, sans-serif;
  cursor: pointer;

  /* NEW: Blur Background and Text Color */
  background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
  color: white; /* Light text color for the blur background */
  backdrop-filter: blur(5px); /* Frosted glass effect */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle light border */

  /* NEW: Animation Transition */
  transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
}

/* Hover Animation: Brighter background and subtle lift/shadow */
.storyboard-link:hover .storyboard-button,
a:hover .extra-button {
  background-color: rgba(255, 255, 255, 0.4); /* Brighter blur on hover */
  transform: translateY(-2px); /* Slight lift */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Shadow for depth */
}

/* Click/Active Animation: Press down effect */
.storyboard-link:active .storyboard-button,
a:active .extra-button {
  background-color: rgba(255, 255, 255, 0.5); /* Fully visible blur */
  transform: translateY(0); /* Press down */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Reduced shadow */
}

/* Extra Buttons Grouping and Spacing (Desktop/Wide) */
.extra-buttons {
  /* Use Flexbox to display buttons horizontally and center them */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  /* Adds space *between* the buttons */
  gap: 15px;

  margin-top: 20px;
  margin-bottom: 80px;
}

/* Reset margin for individual button divs inside the flex container */
.extra-buttons .extra-button {
  margin: 0; /* Let the gap handle spacing */
}

/* Individual link wrappers for extra buttons */
.extra-buttons a {
    text-decoration: none;
}


/* Mobile devices */
@media screen and (max-width: 768px)
{
 .txt-container  {
    padding-top: 30px;   /* space between backdrop top and headline */
    backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
  }
 .description-container {
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
 }
}
{
  /* Main headline (Film & TV) */
  h1.txt-sub-head {
    font-size: 30px;
    margin-top: 80px;   /* reduced from 50px or 300px */
    margin-bottom: 60px; /* reduced space below */
  }

  .description {
  font-size: 17px;     /* was too small */
  line-height: 1.8;    /* better reading */
}

  /* Sub-headline (VFX Supervising, H2) */
  .description-container h2.txt-sub-head {
    font-size: 15px;
    margin-top: 20px;  /* reduced spacing from previous section */
    margin-bottom: 10px;
  }

.image-caption {
  font-size: 15px;
}

  /* Force extra buttons to stack vertically on smaller screens */
  .extra-buttons {
    flex-direction: column;
    gap: 10px; /* Slightly less vertical gap on mobile */
    /* FIX: Center the buttons horizontally when they are in a column */
    align-items: center;
  }

  /* Make all buttons take up more space on mobile */
  .storyboard-button,
  .extra-buttons .extra-button {
    width: 200px;
  }
}

/* Portrait-specific adjustments */
@media screen and (max-width: 768px) and (orientation: portrait) {
  h1.txt-sub-head {
    margin-top: 32px;  /* reduced from 300px */
    margin-bottom: 15px;
  }

  .description-container {
    margin: 20px 20px 30px 20px;  /* reduced top margin to bring content closer */
    padding: 20px;
  }
}

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Thasadith-Light";
  src: url('../0000/fonts/RobotoSerif-Light.ttf') format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Thasadith-Bold";
  src: url('../0000/fonts/RobotoSerif-Bold.ttf') format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}