@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600&display=swap');

:root {
  --midnight-emerald: #0B2912;
  --emerald-light: #165c36;
  --gold: #E1A928;
  --gold-mid: #f3d48a;
  --gold-light: #eedbb0;
  --ivory: #FDFBF7; 
  --charcoal: #1C241E;
  --white: #ffffff;
  --ivory-cream: #DAC0A7;
  --bisque: #FFE4C4;
}

/* ==========================================================================
   GLOBAL STYLES (Applies to all devices)
   ========================================================================== */

/* Add to the top of your CSS file */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  overflow-x: hidden; /* Stops horizontal scrolling caused by overflowing elements */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Orbitron', 'Comfortaa', sans-serif;
  p{
    font-family: 'Comfortaa', sans-serif;
  }
  background: var(--ivory);
  color: var(--gold);
  min-height: 100vh;
  display: flex;
  flex-direction: column;

background-color: var(--ivory); 
  
  /* Perfectly balanced line grid coordinates (Mirrored across left and right halves) */
  background-image: 
    /* ---- THE TECH HEXAGONS WALLPAPER GRID ---- */
    /*linear-gradient(30deg, color-mix(in srgb, var(--charcoal) 4%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--charcoal) 4%, transparent) 75%),
    linear-gradient(150deg, color-mix(in srgb, var(--charcoal) 4%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--charcoal) 4%, transparent) 75%),
    linear-gradient(30deg, color-mix(in srgb, var(--charcoal) 2%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--charcoal) 2%, transparent) 75%),
    linear-gradient(150deg, color-mix(in srgb, var(--charcoal) 2%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--charcoal) 2%, transparent) 75%),*/

    /* ---- BALANCED BACKGROUND LINES ---- */
    radial-gradient(circle at 15% 25%, transparent 400px, color-mix(in srgb, var(--charcoal) 15%, transparent) 400px, color-mix(in srgb, var(--gold) 15%, transparent) 403px, transparent 403px),
    radial-gradient(circle at 85% 75%, transparent 350px, color-mix(in srgb, var(--charcoal) 12%, transparent) 350px, color-mix(in srgb, var(--charcoal) 12%, transparent) 404px, transparent 404px),
    radial-gradient(circle at 85% 25%, transparent 250px, color-mix(in srgb, var(--gold-light) 12%, transparent) 250px, color-mix(in srgb, var(--charcoal) 12%, transparent) 353px, transparent 353px),
    radial-gradient(circle at 15% 75%, transparent 350px, color-mix(in srgb, var(--charcoal) 14%, transparent) 350px, color-mix(in srgb, var(--charcoal) 14%, transparent) 352px, transparent 352px),
    radial-gradient(circle at 75% 45%, transparent 200px, color-mix(in srgb, var(--gold) 10%, transparent) 200px, color-mix(in srgb, var(--gold-light) 10%, transparent) 252px, transparent 252px),
    radial-gradient(circle at 25% 45%, transparent 200px, color-mix(in srgb, var(--charcoal) 10%, transparent) 200px, color-mix(in srgb, var(--charcoal) 10%, transparent) 252px, transparent 252px),
    radial-gradient(circle at 50% 15%, transparent 450px, color-mix(in srgb, var(--midnight-emerald) 13%, transparent) 450px, color-mix(in srgb, var(--midnight-emerald) 13%, transparent) 453px, transparent 453px),
    radial-gradient(circle at 50% 85%, transparent 250px, color-mix(in srgb, var(--charcoal) 11%, transparent) 250px, color-mix(in srgb, var(--charcoal) 11%, transparent) 253px, transparent 253px);
  
  background-size: 
    80px 140px, 80px 140px,       
    40px 70px, 40px 70px,         
    140% 140%, 140% 140%, 140% 140%, 140% 140%, 140% 140%, 140% 140%, 140% 140%, 140% 140%; 
  
  background-attachment: fixed;
  animation: driftWaves 20s ease-in-out infinite alternate;
}


/* MASTER TIMELINE: Moves lines and shifts the hexagon patterns independently */
@keyframes driftWaves {
  0% {
    background-position: 
      0px 0px, 40px 70px, 
      0px 0px, 20px 35px, 
      0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  50% {
    background-position: 
      30px 40px, 70px 110px, 
      -15px 20px, 5px 55px, 
      8% 12%, -6% 8%, 5% -7%, -10% 6%, 4% 12%, -8% -10%, 10% -5%, -5% 15%;
  }
  100% {
    background-position: 
      -20px -50px, 20px 20px, 
      25px -30px, 45px 5px, 
      -4% -8%, 10% -4%, -8% 10%, 8% -10%, -6% -4%, 6% 8%, -4% 10%, 8% -6%;
  }
}

.countdownSubheading {
  font-family: 'Comfortaa', sans-serif;
  font-size: 16px;
  color: var(--charcoal);
  font-weight: 700;
}

/* ==========================================================================
   ALWAYS-ON TOP BAR (Custom Color Accents)
   ========================================================================== */
.mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--gold-light); /* Changed to Light Gold background */
  color: var(--midnight-emerald);       /* Dark green text for contrast */
  padding: 10px 24px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Hamburger button with dark green backdrop */
.hamburger-btn {
  background-color: var(--midnight-emerald); /* Dark green backdrop */
  border: none;
  color: var(--gold);                        /* Regular gold icon */
  font-size: 1.6rem;
  width: 45px;
  height: 45px;
  border-radius: 8px;                       /* Clean rounded corner block */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
  padding: 0;

  position: relative; 
  z-index: 3100;     
  
  transition: transform 0.3s ease, background-color 0.2s ease, color 0.2s ease;
}

.hamburger-btn:hover {
  background-color: var(--gold);
  color: var(--midnight-emerald);
}

.header-right-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mobile-brand {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 1px;
  text-align: right;
  color: var(--midnight-emerald); /* Forces title text to dark green */
}

/* Updated logo container with gold outline */
.header-logo {
  width: 45px;
  height: 45px;
  object-fit: cover;                 /* Crop profile to square/circle neatly */
  border: 2px solid var(--gold);     /* Team gold outline */
  border-radius: 50%;                /* Circular framing */
  background-color: var(--white);
}

/* ==========================================================================
   HIDDEN OVERLAY SIDEBAR (Hidden off-screen on all devices until opened)
   ========================================================================== */
.sidebar {
  position: fixed;
  top: 65px; /* Sits cleanly right under the header bar */
  bottom: 0;
  left: -100%; /* Completely hidden off-screen to the left */
  width: 320px; /* Locked elegant width for desktop drawer style */
  max-width: 100%; /* Ensures it doesn't break on tiny phone screens */
  height: calc(100vh - 65px);
  background: var(--white);
  border-right: 1px solid rgba(11, 41, 18, 0.1);
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  z-index: 1999;
  transition: left 0.3s ease-in-out; /* Smooth sliding drawer effect */
  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.05);

  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;

  height: 100vh;            
  top: 0;                  
  z-index: 3000;            
  
  border-radius: 0 20px 20px 0;
  overflow: hidden;
}

/* Slides the drawer into view when JS toggles the active class */
.sidebar.active {
  left: 0;
}

.brand {
  color: var(--charcoal);
  text-align: right;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: -5px;
}

.nav {
  width: 100%;
  margin-top: 6px;
}

.nav a {
  display: block;
  color: var(--gold);
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 700;
  margin-bottom: 6px;
  transition: all 0.2s ease;
}

.nav a:hover {
  background: rgba(11, 41, 18, 0.05);
  color: var(--midnight-emerald);
}

.nav a.active {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  color: #fff;
}

/* ==========================================================================
   SIDEBAR CLOSE BUTTON
   ========================================================================== */
.sidebar-close-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  
  background-color: var(--midnight-emerald);
  border: 1px solid var(--gold);
  color: var(--gold);
  
  width: 45px;
  height: 45px;
  border-radius: 8px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  
  /* Start slightly rotated backward and invisible/scaled down */
  transform: rotate(-180deg) scale(0.3);
  opacity: 0;
  
  /* Smooth animation timing */
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
}

/* NEW TRIGGER: When the parent sidebar gets the .active class, spin the button forward! */
.sidebar.active .sidebar-close-btn {
  transform: rotate(0deg) scale(1);
  opacity: 1;
  transition-delay: 0.2s; /* Waits a split second for the sidebar layout to slide in first */
}

/* Keep your existing hover effects intact */
.sidebar-close-btn:hover {
  background-color: var(--gold);
  color: var(--midnight-emerald);
  transform: scale(1.1) rotate(90deg); /* Optional: extra twist when hovered! */
}

/* ==========================================================================
   MAIN CONTENT CONTAINER (Centered and full width on all screens)
   ========================================================================== */
.container {
  margin-left: 0; /* No longer pushed to the side on desktop */
  padding: 110px 40px 40px 40px; /* Extra top padding to clear the fixed top bar */
  width: 100%;
  max-width: 1200px; /* Keeps your layout from stretching infinitely on massive screens */
  margin-right: auto;
  margin-left: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Mobile responsive padding tweak */
@media (max-width: 768px) {
  .container {
    padding: 95px 20px 40px 20px;
  }
}

/* ==========================================================================
   TEAM COMPONENTS & DESIGN STYLES
   ========================================================================== */
.header-badge {
  display: inline-block;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--charcoal);
  font-weight: 700;
}

.hero {
  padding: 30px;
  border-radius: 12px;
  background: var(--midnight-emerald);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  margin-bottom: 20px;
}

.hero h1 {
  font-size: 44px;
  margin: 8px 0 12px;
  color: var(--gold);
}

@media (max-width: 768px) {
  .hero h1 { font-size: 32px; }
}

.heroes {
  padding: 30px;
  border-radius: 12px;
  background: var(--midnight-emerald);
  box-shadow: 0 8px 30px rgba(0, 0, 0,0,15);
  margin-bottom:20px;
}

.heroes h2 {
  font-family: Orbitron, sans-serif;
  font-size: 44px;
  margin: 8px 0 12px;
  text-align: center;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.heroes p {
  font-family: Comfortaa, sans-serif;
  font-size: 18px;
  color: var(--ivory);
  text-align: center;
}

.lead {
  color: var(--white);
  max-width: 800px;
}

.buttons {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.button {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  color: #061b0a;
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
}

.button.outline {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--gold);
  padding: 10px 16px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.card {
  background: var(--emerald-light);
  padding: 16px;
  border-radius: 10px;
  color: var(--white);
  h3 { font-family: 'Orbitron', sans-serif; }
  p { font-family: 'Comfortaa', sans-serif; }
}


.stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.stat {
  background: rgba(255, 255, 255, 0.05);
  padding: 14px;
  border-radius: 10px;
  min-width: 140px;
  text-align: center;
}

.projects .card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}


.mainPage-Headers {
  font-family: 'Orbitron', sans-serif;
  font-size: 60px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .mainPage-Headers { font-size: 38px; }
}

.major-Text {
  font-family: 'Comfortaa', sans-serif;
  font-size: 18px;
  color: var(--charcoal);
  line-height: 1.5;
}

.site-footer {
  margin-top: 50px; 
  background-color: #ffffff;
  color: var(--midnight-emerald);
  padding: 40px 30px;
  font-family: 'Comfortaa', sans-serif;
  letter-spacing: 0.6px;
  line-height: 1.8;
  border-top: 4px solid var(--midnight-emerald);
  border-radius: 20px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
  word-wrap: break-word;
}

/* ==========================================================================
   RESPONSIVE EMBEDDED FORM
   ========================================================================== */
.form-container {
  width: 100%;
  max-width: 700px; /* Keeps the form from stretching too wide on desktops */
  margin: 20px auto; /* Centers the form on the page */
  background: var(--charcoal);
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.form-container iframe {
  border: none;
  display: block;
}


/* ==========================================================================
   Team Page Card Layout & Styling
   ========================================================================== */

/* Team Section Framework */
.team-header-text {
  text-align: center;
  margin-bottom: 40px;
}

.team-header-text h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 32px;
  color: #004d00;
  margin-bottom: 5px;
}

.team-header-text h4 {
  font-weight: normal;
  color: #006400;
  margin: 0;
}

/* 3-Column Desktop Grid Configuration */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Forms exactly 3 items per row */
  gap: 25px;
  margin-bottom: 60px;
  align-items: stretch; /* Ensures all cards are the same height */
  align-items: center; /* Centers cards vertically in the grid */
  align-items: start;
}

.member-card {
  background-color: var(--midnight-emerald); 
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 64, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  
  /* ADDED LINE: Smooths out the card shape changing size */
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
}

.member-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  margin: 0 0 4px 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
}

.member-role {
  font-family: 'Alata', sans-serif;
  font-size: 13px;
  color: var(--ivory);
  margin: 0 0 16px 0;
  font-weight: 600;
  line-height: 1.4;
  min-height: 36px; /* Ensures text alignment stays level even if roles differ in length */
}

/* Photo Configurations */
.member-image-container {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 3px solid #006400;
}

.member-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mentors-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
  padding: 50px 20px;
}

.mentor-card {
  background-color: linear-gradient(90deg, var(--ivory-cream), var(-bisque));
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 64, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.mentor-card {
  width: 250px;
  height: 250px;
  background: linear-gradient(90deg, var(--ivory-cream), var(--bisque));
  border-radius: 16px;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.mentor-card-inner {
  transform: rotate(-45deg);
  text-align: center;
  width: 140%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mentor-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ivory);
  margin-bottom: 8px;
}

.mentor-card-inner h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  margin: 0;
  background: linear-gradient(90deg, var(--midnight-emerald), var(--emerald-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mentor-role {
  font-family: 'Alata', sans-serif;
  font-size: 13px;
  color: var(--charcoal);
  margin-top: 4px;
}

.mentor-card:hover {
  transform: rotate(45deg) scale(1.08);
  border-color: var(--emerald-light);
}

/* Summary Memo Dropdowns */
.bio-dropdown {
  width: 100%;
  margin-top: auto; /* Pushes the dropdown bar exactly to the bottom of the card */
  padding-top: 12px;
  display: inline-block;
  /* Removed background, padding, and border-radius from here */
}

.bio-summary {
  font-family: 'Comfortaa', sans-serif;
  font-size: 14px;
  color: var(--charcoal);
  font-weight: 700;
  cursor: pointer;
  list-style: none; /* Removes native system arrow indicators */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  /* MOVED AND UPGRADED BUTTON STYLES HERE: */
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  padding: 8px 16px;
  border-radius: 999px;
  width: fit-content; /* Keeps the pill snugly fit around the text */
  margin: 0 auto;    /* Centers the pill button inside the card */
}

.bio-summary::-webkit-details-marker {
  display: none; /* Hide arrow on Safari browsers */
}

.bio-summary::after {
  content: ' ▾';
  font-size: 12px;
  transition: transform 0.2s ease;
}

/* Forces the opening animation onto absolutely every card layout on the grid */
.bio-dropdown[open] .bio-content,
.bio-dropdown[open] summary + .bio-content {
  animation: smoothReveal 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

.bio-content {
  font-family: Comfortaa, sans-serif;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--charcoal);
  text-align: left;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 12px;
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;

  opacity: 0;
  transform: translateY(-10px);
}

.miniHeaderBio {
  font-family: 'Comfortaa', sans-serif;
  font-size: 16px;
  color: var(--charcoal);
  font-weight: 700;
}

/* Responsiveness adjustments for smaller browser screens */
@media (max-width: 992px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
  }
}

@media (max-width: 650px) {
  .team-grid {
    grid-template-columns: 1fr; /* Single column stack on phones */
  }
}

/* Triggers the fade-in animation whenever the dropdown opens */
.bio-dropdown[open] .bio-content {
  animation: smoothReveal 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* The timeline animation for the text reveal */
@keyframes smoothReveal {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   FLOATING GRADIENT GOLD HEXAGONS 
   ========================================================================== */
.floating-shapes-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; 
  z-index: -1; /* FIXED: Pushes them safely behind your cards and text contents */
  overflow: hidden;
}

.float-hex {
  position: absolute;
  /* FIXED: Applies the gradient layout defined inside the JS vector maps */
  fill: url(#goldGradient) !important; 
  stroke: none !important;
  opacity: 0.85 !important; /* Elegant semi-transparent visibility */
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.1));
}

/* 2 Hexagons on the left, 1 Hexagon on the right */
.hex-1 {
  width: 180px;
  top: 15%;
  left: 5%;     /* Left Side Lane */
  animation: floatGeometric-1 22s ease-in-out infinite alternate !important;
}

.hex-2 {
  width: 130px;
  top: 55%;
  left: 10%;    /* Left Side Lane (Lower down) */
  animation: floatGeometric-2 19s ease-in-out infinite alternate !important;
}

.hex-3 {
  width: 160px;
  top: 35%;
  left: 85%;    /* Right Side Lane */
  animation: floatGeometric-3 15s ease-in-out infinite alternate !important;
}

/* FIXED: Added the explicit geometric translation paths to make them move */
@keyframes floatGeometric-1 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(40px, -50px) rotate(45deg); }
}

@keyframes floatGeometric-2 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-30px, 40px) rotate(-60deg); }
}

@keyframes floatGeometric-3 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(50px, 30px) rotate(30deg); }
}

/* ==========================================================================
   DROPDOWN MENU STYLING (For the sidebar navigation) 
   ========================================================================== */

.dropdown summary {
  list-style: none;
}
.dropdown summary::-webkit-details-marker {
  display: none;
}

/* 2. Main Parent Link Row (Resources Line) */
.dropdown-title {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  cursor: pointer;
  padding: 10px 15px;
  
  /* COLOR & FONT: Swapped to your team's gold and Orbitron font */
  color: var(--gold, #D4AF37);
  font-family: 'Orbitron', sans-serif;
  font-size: 16px; /* Adjust this number if your other links are larger/smaller */
  
  /* THICKNESS: Normalizes it to match standard link weights */
  font-weight: 800; 
  letter-spacing: 1px; /* Orbitron looks great with a tiny bit of tracking */
  
  /* Text smoothing to keep the font clean and balanced */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 3. The Decorative Circle Button Container */
.arrow-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(212, 175, 55, 0.1); /* Subtle gold tint */
  border: 1px solid var(--gold, #D4AF37);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Hover effects for the parent row container */
.dropdown-title:hover .arrow-circle {
  background-color: var(--gold, #D4AF37);
}
.dropdown-title:hover .arrow {
  border-left-color: var(--midnight-emerald, #004d00);
}

/* 4. The Arrow Character inside the Circle */
.dropdown .arrow {
  display: block;
  width: 0;
  height: 0;
  
  /* EQUILATERAL GEOMETRY: Adjust these border numbers to scale the triangle size */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10.39px solid var(--gold, #D4AF37); /* Length calculated for equilateral proportions */
  
  /* NUDGE TO TRUE CENTER: Text boxes have slight offsets. 
     This minor adjustment centers the visual weight inside the parent circle */
  margin-left: 3px; 
  
  /* SPIN AXIS: Anchors the rotation pivot precisely to the triangle's visual center */
  transform-origin: 33% 50%; 
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(0deg);
}

.dropdown[open] .arrow {
  transform: rotate(90deg);
}

/* 5. Subpage Links Dropdown Panel Indentation */
.dropdown-subpages {
  padding-left: 30px; /* Safely indents subpage blocks inward */
  display: flex;
  flex-direction: column;
  border-left: 2px solid rgba(212, 175, 55, 0.15); /* Sleek vertical separator line */
  margin-left: 25px; /* Aligns line nicely right beneath parent text */
  margin-top: 4px;
  margin-bottom: 8px;
}

/* 6. Individual Subpage Link Attributes */
.dropdown-subpages a {
  padding: 8px 15px;
  font-size: 0.95em; /* Marginally scaled down to show clear sub-hierarchy */
  opacity: 0.85;
  font-family: 'Orbitron', sans-serif;
  text-decoration: none;
  color: var(--gold);

  transition: opacity 0.2s ease;
}

.dropdown-subpages a:hover {
  opacity: 1;
}

/* Styles links that are sitting inside paragraphs */
p a {
  color: var(--gold, #D4AF37);
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

p a:hover {
  opacity: 0.8;
}

/* ==========================================================================
   SPONSOR US FORM DROPDOWN STYLING
   ========================================================================== */

.form-dropdown-container {
  max-width: none; 
  margin: 40px auto;
  padding: 0; 
}

/* Hide default browser summary arrows */
.form-dropdown summary {
  list-style: none;
}
.form-dropdown summary::-webkit-details-marker {
  display: none;
}

.form-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--midnight-emerald);
  color: var(--gold);
  padding: 15px 25px;
  font-family: 'Orbitron', sans-serif;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  min-width: 1120px;
}

.form-btn:hover {
  background: var(--gold, #D4AF37);
  color: var(--midnight-emerald, #004d00);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

/* Plus/Minus Icon styling */
.form-btn .toggle-icon {
  font-size: 50px;
  font-weight: light;
  transition: transform 0.5s ease;
}

/* Change icon from + to - when the form section is open */
.form-dropdown[open] .form-btn .toggle-icon {
  transform: rotate(45deg); 
}

/* Wrapper for the embedded Microsoft Form */
.form-content {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Makes sure the Microsoft Form iframe stays responsive on mobile devices */
.form-content iframe {
  width: 1110px;
  min-height: 600px; /* Gives the form plenty of room to display without scrolling */
}

/* ==========================================================================
   ABOUT PAGE STYLING
   ========================================================================== */

.about-row {
  display: flex;
  align-items: stretch; 
  margin-bottom: 20px;  
}

.heroic {
  padding: 30px;
  border-radius: 12px;
  background: var(--midnight-emerald);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); 
  width: 700px;
  box-sizing: border-box; 
}

.heroic h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  margin: 8px 0 12px;
  color: var(--gold);
  text-decoration: underline;
}

.heroic p {
  font-family: 'Comfortaa', sans-serif;
  font-size: 16px;
  color: var(--ivory);
  line-height: 1.5;
}

.heroicImageLeft {
  width: 400px;       
  height: 400px;
  margin-left: 20px;  
  border-radius: 12px;
  background: var(--midnight-emerald);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  
  padding: 30px;         
  overflow: hidden;  

}

.heroicImageRight {
  width: 400px;       
  height: 400px;
  margin-right: 20px;  
  border-radius: 12px;
  background: var(--midnight-emerald);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  
  padding: 30px;         
  overflow: hidden;  
}

.heroicImageRight img {
  width: 100%;
  height: 100%;
  object-fit: cover;  
  border-radius: 8px;
} 

.heroicImageLeft img {
  width: 100%;
  height: 100%;
  object-fit: cover;  
  border-radius: 8px;
}


/* ==========================================================================
   RESPONSIVE DESIGN (PHONES & TABLETS)
   ========================================================================== */

@media (max-width: 1150px) {
  
  .about-row {
    flex-direction: column;
    align-items: stretch; 
    gap: 20px; 
  }

  .about-row:has(.heroicImageLeft) {
    flex-direction: column-reverse;
  }

  .heroic {
    width: 100%;        
    margin: 0; 
  }

  .heroicImageLeft,
  .heroicImageRight {
    width: 100%;        
    height: 350px; 
    margin: 0;     
  }
}

.underline {
  text-decoration: underline;
}

/* ==========================================================================
   MISSION STATEMENT PAGE STYLES
   ========================================================================== */

/*==================================== Title + Subtitle Section ======================================*/



/*==================================== Mentorship Section ======================================*/
.mentorship-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.mentorship-text {
  width: 400px;
  height: 400px; 
  padding: 40px;
  box-sizing: border-box;
  background: var(--midnight-emerald);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mentorship-text h3 {
  font-family: 'Orbitron', sans-serif;
  color: var(--gold);
  margin-bottom: 5px;
}

.mentorship-text p {
  font-family: 'Comfortaa', sans-serif;
  color: var(--ivory);
  line-height: 1.6;
}

.carousel-container {
  position: relative;
  width: 700px;      
  height: 400px;
  border-radius: 12px;
  overflow: hidden;   
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.carousel-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;         
  transition: opacity 0.5s ease-in-out; 
}

.carousel-slide img.active {
  opacity: 1;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 15px 10px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 4px;
  transition: background 0.3s;
  z-index: 10;
}

.carousel-btn:hover {
  background: var(--gold);
  color: black;
}

.prev { left: 10px; }
.next { right: 10px; }

/*==================================== FLL to FTC Section ======================================*/
.FLLFTC-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.FLLFTC-text {
  width: 550px;
  height: 450px;
  padding: 40px;
  box-sizing: border-box;
  background: var(--midnight-emerald);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.FLLFTC-text h3 {
  font-family: 'Orbitron', sans-serif;
  color: var(--gold);
  margin-bottom: 5px;
}

.FLLFTC-text p {
  font-family: 'Comfortaa', sans-serif;
  color: var(--ivory);
  line-height: 1.6;
}

.FLLFTC-image {
  width: 550px;
  height: 450px; 
  padding: 0; 
  box-sizing: border-box;
  background: var(--midnight-emerald);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.FLLFTC-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*==================================== FIRST Community ======================================*/
.community-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.community-text {
  width: 800px;
  height: 350px;
  padding: 40px;
  box-sizing: border-box;
  background: var(--midnight-emerald);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.community-text h3 {
  font-family: 'Orbitron', sans-serif;
  color: var(--gold);
  margin-bottom: 5px;
}

.community-text p {
  font-family: 'Comfortaa', sans-serif;
  color: var(--ivory);
  line-height: 1.6;
}

.community-image {
  width: 300px;
  height: 350px; 
  padding: 0; 
  box-sizing: border-box;
  background: var(--midnight-emerald);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.community-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*==================================== Innovation ======================================*/
.innovation-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.innovation {
  width: 1120px;
  height: 220px;
  padding: 40px;
  box-sizing: border-box;
  background: var(--midnight-emerald);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.innovation h3 {
  font-family: 'Orbitron', sans-serif;
  color: var(--gold);
  margin-bottom: 5px;
}

.innovation p {
  font-family: 'Comfortaa', sans-serif;
  color: var(--ivory);
  line-height: 1.6;
}

/*==================================== Looking Ahead ======================================*/
.lookingahead-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.lookingahead-text {
  width: 700px;
  height: 350px;
  padding: 40px;
  box-sizing: border-box;
  background: var(--midnight-emerald);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.lookingahead-text h3 {
  font-family: 'Orbitron', sans-serif;
  color: var(--gold);
  margin-bottom: 5px;
}

.lookingahead-text p {
  font-family: 'Comfortaa', sans-serif;
  color: var(--ivory);
  line-height: 1.6;
}

.lookingahead-image {
  width: 400px;
  height: 350px; 
  padding: 0; /* Clean edge boundaries for image framework */
  box-sizing: border-box;
  background: var(--midnight-emerald);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.lookingahead-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================================
   RESPONSIVE DESIGN (PHONES & TABLETS)
   ========================================================================== */

@media (max-width: 1150px) {

  .mentorship-section,
  .FLLFTC-section,
  .community-section,
  .innovation-section,
  .lookingahead-section {
    flex-direction: column;
    align-items: stretch;
    gap: 20px; 

  .mentorship-text,
  .FLLFTC-text,
  .community-text,
  .innovation,
  .lookingahead-text {
    width: 100%;
    height: auto;
    min-height: 200px;
  }

  .mentorship-text {
    aspect-ratio: 1 / 1; 
  }

  .carousel-container {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2; 
  }

  .FLLFTC-image,
  .community-image,
  .lookingahead-image {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2; 
  }
  }
}

/* ==========================================================================
   Outreach Page Sytling
   ========================================================================== */

/*==================================== Outreach Title ======================================*/
/* Finished with heroic styling class in html...


/*==================================== Resource Blog Page ======================================*/

.blogblob-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.blogblob-text{
  width: 1120px;
  height: 200px;
  padding: 40px;
  box-sizing: border-box;
  background: var(--midnight-emerald);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.blogblob-text h3 a {
  font-family: Orbitron, sans-serif;
  color: var(--gold);
  font-size: 24px;
}

.blogblob-text p {
  font-family: Comfortaa, sans-serif;
  color: var(--ivory);
  line-height: 1.6;
}

/*==================================== FLL Team Mentorship ======================================*/

.fllmentoring-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.fllmentoring-text {
  width: 700px;
  height: 300px;
  padding: 40px;
  box-sizing: border-box;
  background: var(--midnight-emerald);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.fllmentoring-text h3 {
  font-family: Orbitron, sans-serif;
  color: var(--gold);
  font-size: 24px;
}

.fllmentoring-text p {
  font-family: Comfortaa, sans-serif;
  color: var(--ivory);
  line-height: 1.6;
}

.carousel-containerv2 {
  position: relative;
  width: 400px;      
  height: 300px;
  border-radius: 12px;
  overflow: hidden;   
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.carousel-slidev2 img {
  min-height: 300px;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;         
  transition: opacity 0.5s ease-in-out; 
}

.carousel-slidev2 img.active {
  opacity: 1;
}

.carousel-btnv2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 15px 10px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 4px;
  transition: background 0.3s;
  z-index: 10;
}

.carousel-btnv2:hover {
  background: var(--gold);
  color: black;
}

.prev { left: 10px; }
.next { right: 10px; }

.fllmentoring-sectionpt2 {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.fllmentoring-textpt2 {
  width: 1120px;
  height: 350px;
  padding: 40px;
  box-sizing: border-box;
  background: var(--midnight-emerald);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.fllmentoring-textpt2 p {
  font-family: Comfortaa, sans-serif;
  color: var(--ivory);
  line-height: 1.6;
}

/* ==========================================================================
   Article Hub Sytling
   ========================================================================== */

.article-hub {
  width: 100%;
  max-width: 1120px; 
  margin: 0 auto;
  padding: 20px 0;   
  box-sizing: border-box;
}

.category-section {
  display: block;
  width: 100%;
  clear: both;
  margin-bottom: 30px;
}

.category-title {
  font-family: 'Orbitron', sans-serif;
  color: var(--charcoal);
  font-size: 24px;
  margin-bottom: 15px;
  margin-top: 30px;
}

/*==================================== The Horizontal Scroll Engine ======================================*/

.scroll-container {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 15px;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  background: var(--charcoal);
  border-radius: 12px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  margin-bottom: 30px;
}

.scroll-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: var(--midnight-emerald);
  border: 1px solid var(--gold);
  border-radius: 10px;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

/*==================================== 300x300 Square Article Cards ======================================*/

.article-card {
  flex-shrink: 0;
  width: 300px;
  height: 300px;
  padding: 30px;
  box-sizing: border-box;
  background: linear-gradient(var(--gold-light), var(--gold-mid));
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  justify-content: space-between;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
  box-shadow 0.3s ease;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  border: 7px solid var(--ivory);
}

.article-card h3 {
  font-family: 'Orbitron', sans-serif;
  color: var(--midnight-emerald);
  font-size: 18px;
  line-height: 1.4px;
  margin-bottom: 0x;
}

.card-image-box {
  width: 100%;
  height: 200px;
  background-color: var(--midnight-emerald);
  border-radius: 12px;
  overflow: hidden;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.card-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.article-card:hover .card-img {
  transform: scale(1.05);
}

.card-date {
  font-family: 'Comfortaa', sans-serif;
  width: fit-content;
  color: var(--ivory);
  font-size: 12px;
  opacity: 0.8;
  background: linear-gradient(90deg, var(--midnight-emerald), var(--emerald-light));
  border-radius: 999px;
  display: inline-block;
  padding: 6px 12px;
}

.article-class {
  font-family: 'Comfortaa', sans-serif;
  width: fit-content;
  color: var(--charcoal);
  font-size: 12px;
  opacity: 0.8;
  background: linear-gradient(var(--ivory-cream), var(--bisque));
  border-radius: 999px;
  display: inline-block;
  padding: 6px 12px;
}

.card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.category-row-wrapper {
  position: relative;
  width: 100%;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: transalateY(-50%);
  width: 45px;
  height: 45px;
  background: var(--midnight-emerald);
  border: 1px solidvar(--gold);
  color: var(--ivory);
  font-size: 18px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  transition: background 0.2s, transform 0.2s;
}

.nav-btn:hover {
  background: var(--gold);
  color: var(--midnight-emerald);
  transform: transalateY(-50%) scale(1.1);
}

.prev-btn {
  left: -22px;
}

.next-btn {
  right: -22px;
}

/* ==========================================================================
Sidebar Contact Details Styling
========================================================================== */

.sidebar-contact {
  margin-top: auto;
  padding: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-contact h4 {
  color: var(--gold);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.contact-email a {
  color: var(--ivory-cream);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.contact-email a:hover {
  color: var(--midnight-emerald);
}

.sidebar-socials {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.sidebar-socials a {
  color: var(--ivory-cream);
  text-decoration: none;
  font-size: 0.85rem;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sidebar-socials a:hover {
  opacity: 1;
  transform: transalateX(3px);
  color: var(--midnight-emerald);
}

.sidebar-contact-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.sidebar-socials a, .contact-email {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Comfortaa', sans-serif;
  font-size: 0.85rem;
  line-height: 1;
  text-decoration: none;
}

.sidebar-socials a:hover .sidebar-contact-icon, .contact-email a:hover .sidebar-contact-icon {
  color: var(--midnight-emerald);
}


/* ==========================================================================
   Robot Page Styling
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@media (max-width: 600px) {
  .robot-title-block h3 {
    font-size: 48px;
  }
}

/* ==================================== ARC Section ====================================== */

.robot-arc-title-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 30px auto;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.robot-arc-title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--midnight-emerald);
  height: 200px;
  flex: 1; /* Allows it to fluidly scale up to 900px within the 1120px max-width boundary */
  max-width: 900px; 
  border-radius: 12px;
  border: 1px solid rgba(223, 177, 67, 0.2);
  box-sizing: border-box;
}

.robot-arc-title h3 {
  font-family: 'Cinzel Decorative', serif;
  font-size: 150px;
  font-weight: 700;
  letter-spacing: 20px;
  text-align: center;
  margin: 0;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 12px rgba(223, 177, 67, 0.3));
  text-transform: uppercase;
}

.arc-title-image-box {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--gold-light);
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

.arc-title-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arc-viewer-section {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 30px auto;
  box-sizing: border-box;
}

.arc-viewer-text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--midnight-emerald);
  height: 700px;
  width: 400px;
  flex: 1;
  border-radius: 12px;
  border: 1px solid rgba(223, 177, 67, 0.2);
  box-sizing: border-box;
}

.arc-viewer-text h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 25px;
  color: var(--gold);
  text-decoration: underline;
  margin-top: 20px;
}

.arc-viewer-text p {
  font-family: 'Comfortaa', sans-serif;
  font-size: 17px;
  text-align: left;
  color: var(--ivory);
  line-height: 2;
  margin-bottom: 10px;
}

.arc-viewer-text h2 {
  font-family: 'Alata', sans-serif;
  font-size: 20px;
  color: var(--gold-light);
  text-align: center;
  margin-bottom: 10px;
}

.arc-text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}

.arc-strengths-weaknesses-section {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto 30px auto;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.arc-strengths-block {
  display: flex;
  flex: 1;
  width: 550px;
  height: 250px;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--midnight-emerald);
  border-radius: 12px;
  border: 1px solid rgba(223, 177, 67, 0.2);
  box-sizing: border-box;
}

.arc-strengths-text {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 25px;
}

.arc-strengths-block h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 25px;
  color: var(--gold);
  text-decoration: underline;
  margin-top: 20px;
}

.arc-strengths-block p {
  font-family: 'Comfortaa', sans-serif;
  font-size: 17px;
  color: var(--ivory-cream);
  line-height: 2;
}

.arc-weaknesses-block {
  display: flex;
  flex: 2;
  width: 550px;
  height: 250px;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--midnight-emerald);
  border-radius: 12px;
  border: 1px solid rgba(223, 177, 67, 0.2);
  box-sizing: border-box;
}

.arc-weaknesses-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}

.arc-weaknesses-block h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 25px;
  color: var(--gold);
  text-decoration: underline;
  margin-top: 20px;
}

.arc-weaknesses-block p {
  font-family: 'Comfortaa', sans-serif;
  font-size: 17px;
  line-height: 2;
  color: var(--ivory-cream);
}

/* ==================================== Dropdown Container ====================================== */

.arc-dropdown {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 30px auto;
  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-family: 'Comfortaa', sans-serif;
  font-size: 1.2rem;
  color: var(--charcoal);
  cursor: pointer;
  user-select: none;
  border: none;
  background: transparent;
  outline: none;
  list-style: none;
  text-decoration: underline;
}

/* Fixed Typo: webkit-details-marker */
.dropdown-trigger::-webkit-details-marker {
  display: none;
}

.dropdown-trigger .chevron {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

/* Rotates your plus symbol/chevron indicator when details element is open */
.arc-dropdown[open] .dropdown-trigger .chevron {
  transform: rotate(315deg);
}

/* Extracted from broken nesting block to ensure clean execution */
.dropdown-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* ============================ Bottom Row Section: Side-by-Side Panel =========================== */

.viewer-row-section {
  display: flex;
  align-items: stretch; /* Forces both boxes to look even by sharing identical heights */
  gap: 20px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* ==================================== 360 Viewer ====================================== */

.arc-viewer-container {
  flex: 2; /* Dynamically sizes to occupy left side space seamlessly next to info block */
  height: 700px; /* Adjusted down from 800px slightly so it lines up with side text panes neatly */
  background: radial-gradient(circle, var(--midnight-emerald), var(--emerald-light));
  border: 2px solid var(--gold-light);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
}

#robot-360-viewer {
  width: 100%;             
  max-width: 900px;  
  max-height: 700px;      
  margin: 0 auto;         
  overflow: hidden;        
}

#arc-viewer-img {
  width: 100%;
  height: 100%;
  max-width: 100%;  /* STRICTLY stops the image from outgrowing the box width */
  max-height: 100%; /* STRICTLY stops the image from blowing up the box height */
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ==========================================================================
Team Gallery Styling                                                          
========================================================================== */

.season-dropdown-container {
  max-width: none; 
  margin: 40px auto;
  padding: 0;
}

.season-dropdown summary {
  list-style: none;
}

.season-dropdown summary::-webkit-details-marker {
  display: none;
}

.season-dropdown-btn {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, var(--ivory-cream), var(--bisque));
  color: var(--charcoal);
  padding: 15px 25px;
  font-family: 'Comfortaa', sans-serif;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 2px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  min-width: 1120px;
  transition: transform 0.3s ease;
}

.season-dropdown-btn:hover {
  transform: scale(1.05);
}

/* Plus/Minus Icon styling */
.season-dropdown-btn .toggle-icon {
  font-size: 50px;
  font-weight: light;
  transition: transform 0.5s ease;
}

.season-dropdown[open] .season-dropdown-btn .toggle-icon {
  transform: rotate(405deg);
}

/* Change icon from + to - when the form section is open */
.season-dropdown-btn[open] .form-btn .toggle-icon {
  transform: rotate(45deg); 
}

.dropdown-content {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-item:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--charcoal);
  z-index: 2;
}

.poki-gallery-grid {
  display: grid !important; /* Forces grid mode */
  
  grid-template-columns: repeat(4, 1fr); 
  
  grid-auto-rows: 180px; 
  
  gap: 12px; /* Spacing between tile cards */
  padding: 15px;
}

.gallery-item {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.gallery-item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
  color: #ffffff;
  padding: 20px 12px 10px 12px;
  font-family: 'Comfortaa', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.5px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  transform: translateY(100%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.gallery-item:hover .caption {
  transform: translateY(0);
  opacity: 1;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* ===== Large Square ===== */
.gallery-item.largeSquare {
  grid-column: span 2;
  grid-row: span 2;
}

/* ===== Wide Tile ===== */
.gallery-item.wide {
  grid-column: span 2;
  grid-row: span 1;
}

/* ===== Tall Tile ===== */
.gallery-item.tall {
  grid-column: span 1;
  grid-row: span 2;
}

.gallery-item.normal {
  grid-column: span 1;
  grid-row: span 1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.3s ease;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 600px) {
  /* On small screens, reset tiles to 1 column so they fit nicely */
  .gallery-item.wide,
  .gallery-item.tall,
  .gallery-item.featured {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* On mobile screens smaller than 768px, drop down to 2 columns */
@media (max-width: 768px) {
  .poki-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Update your dropdown container */
.dropdown-container, 
.dropdown-content {
  width: 100%;             /* Takes up 100% of the available screen space */
  max-width: 1200px;       /* Limits max width on large monitors */
  box-sizing: border-box;  /* Prevents padding from causing horizontal scrollbars */
  margin: 0 auto;          /* Keeps it centered on the page */
}

footer {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  /* Ensure child flex/grid boxes inside the footer shrink cleanly: */
  display: flex;
  flex-wrap: wrap; 
  justify-content: space-between;
}