html, body {
  overflow-x: hidden; /* prevents sideways scrollbars */
}

/* Reset and base styles */
body {
  margin: 0;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  background-color: rgb(228, 224, 224);
}

h4 {
  color: rgb(66, 65, 65);
  font-weight: lighter;
  text-transform: uppercase;
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
}

/* Remove blue color and underline from links inside h4 */
h4 a,
h4 a:link,
h4 a:visited {
    color: inherit;        /* Keeps the same color as the h4 text */
    text-decoration: none; /* Removes the underline */
    
}

/* If you want the link to still show some effect on hover (recommended) */
h4 a:hover {
    color: inherit;
    opacity: 0.6;               /* slight fade effect */
}

.text {
  color: #1a1311;
  font-weight: bold;
  font-size: 17px;
  margin-top: -20px;
}

/* HERO BACKGROUND SECTION */
.hero-background {
  background-image: url('images/first.jpg'); /* Change to your actual image */
  background-size: 40%;
  background-position: center 10%; 
  background-repeat: no-repeat;
  background-color: #1a1311; /* Fallback color */
  height: 180vh; /* Covers full screen height */
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: inset(0 0 80vh 0);
}

/* MAIN SEARCH CONTAINER */
.search-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: 100%;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: -880px;
  padding-right: 95px;
  background: rgb(228, 224, 224);
  border-radius: 30px;
  border: 1px solid #1a1311;
  overflow: hidden;
}

/* LEFT HALF - static clickable section */
.click-half {
  width: 50%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  background: rgb(228, 224, 224);
  transition: background 0.3s;
  margin-right: 200px;
  z-index: 10;
}

/* RIGHT HALF - flippable */
.flip-wrapper {
  width: 50%;
  height: 100px;
  perspective: 1000px;
  transform: translateX(-210px);
}

.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.flipped {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgb(228, 224, 224);
  padding: 0 35px;
}

/* FRONT SIDE */
.options {
  display: flex;
  gap: 20px;
  white-space: nowrap;
}

.option {
  font-size: 17px;
  color: #1a1311;
  cursor: pointer;
  transition: color 0.3s;
}

.option:hover {
  color: grey;
}

.search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 730px; /* same position as the X icon */
  width: 22px;
  height: 22px;
  cursor: pointer;
}

/* BACK SIDE */
.back {
  transform: rotateY(180deg);
}

.highlight {
  background-color: yellow;
  color: black;
  font-weight: bold;
  padding: 0 2px;
  border-radius: 2px;
}

.search-form {
  width: 85%; /* reduces from the left side */
  position: relative;
  margin-left: 44px; /* shift it inward from the left */
}

.search-form input {
  width: 100%;
  padding: 2px 30px;
  border: none;
  font-size: 20px;
  outline: none;
  background: rgb(228, 224, 224);
}

.close-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  cursor: pointer;
  left: 723px; /* adjust depending on layout */
  color: #1a1311;
  transition: color 0.3s;
}

/* New side container on the right */
.side-container {
  position: absolute;
  top: 410px; /* adjust vertical placement */
  width: 450px; /* adjust size */
  background-color: rgb(228, 224, 224);
  left: 800px;  /* move closer or farther from the edge */
  padding-right: 130px;
  padding-left: 35px;
  padding-bottom: 80px;
}

/* ===== PUBLICATION SECTION ===== */

.publication-container {
  display: flex;
  flex-direction: column; /* stack publications vertically */
  align-items: center;
  background-color: #1a1311;
  margin-top: -490px;
  padding-top: 20px;    /* was 100px */
  padding-bottom: 30px; /* was 100px */
  gap: 15px;            /* was 60px */
}

/* Each publication card */
.publication-card {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 80%;
  transition: transform 0.3s ease;
  height: auto;
}

/* Image on the left */
.publication-image img {
  width: 320px;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  display: block;
  transition: transform 0.3s ease;
}

.publication-image img:hover {
  transform: scale(1.03);
}

/* === SECOND PUBLICATION CUSTOM IMAGE WIDTH === */
.second-publication .publication-image {
  width: 31%;          /* ✅ smaller image section for the 2nd publication */
}

.second-publication .publication-content {
  padding-left: 40px;  /* bring text closer */
}

/* Special style for the second publication image */
.publication-image .small-logo {
  object-fit: contain;      /* ensures the full logo fits inside */
  width: 86%;               /* makes it appear smaller inside the frame */
  height: auto;
  background-color: #fff;   /* optional: white background for clean edges */
  padding: 10px;            /* optional: space around logo */
  border-radius: 6px;
  margin-top: 25px;
}


/* Right side text content */
.publication-content {
  flex: 1;
  padding-left: 60px;
}

.publication-content h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: rgb(228, 224, 224);
}

.heading {
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
  color: rgb(228, 224, 224);
}

.heading:hover {
  color: grey;
}

.publication-content p {
  color: rgb(228, 224, 224);
  line-height: 1.6;
  margin-bottom: 15px;
  font-size: 16px;
}

.read-more {
  text-decoration: none;
  font-weight: bold;
  color: grey;
  transition: color 0.3s;
}

.read-more:hover {
  color: white;
}

/* Hover effect for entire card */
.publication-card:hover {
  transform: translateY(-5px);
}

/* ===== Responsive layout (for smaller screens) ===== */
@media (max-width: 900px) {
  .publication-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .publication-image img {
    width: 90%;
    height: auto;
    margin-bottom: 20px;
  }

  .publication-content {
    padding-left: 0;
  }

  .publication-content h3 {
    font-size: 20px;
  }

  .publication-content p {
    font-size: 15px;
  }
}


.news-scroll-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px; /* space between icons and scrolling section */
  padding: 60px 0;
  background-color: #bfbfbf;
}

/* Edge icons */
.edge-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.edge-icon:hover {
  opacity: 1;
}

.left-icon {
  margin-left: 90px;
  transform: scaleX(-1); /* flips the image horizontally */
}

.right-icon {
  margin-right: 90px;
}

.news-track.paused {
  animation-play-state: paused;
}


.news-scroll {
  overflow: hidden;
  padding: 40px 0;
  width: 100vw;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

.news-track {
  display: flex;
  width: max-content;
  animation: scrollNews 10s linear infinite;

  will-change: transform;
  backface-visibility: hidden;
}

.news-track a {
  flex: 0 0 auto;
  margin-right: 200px;
}

.news-track img {
  width: 350px;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.news-track img:hover {
  transform: scale(1.05);
}

.ark {
  background-color: purple;
}

.ark-link {
  background-color: purple;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  width: 350px;
  height: 200px;
}


@keyframes scrollNews {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-70%);
  }
}

/* ===== FEATURE CONTAINER ===== */
.feature-container {
  display: flex;
  justify-content: center;
  background-color: #1a1311;
  padding: 100px 0;
}

.feature-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 80%;
  gap: 60px;
}

/* ----- LEFT SIDE (text + image) ----- */
.feature-content {
  flex: 1;
  color: rgb(228, 224, 224);
}

/* image + heading side by side */
.feature-header {
  display: flex;
  align-items: center;
  gap: 10px;               /* space between image and text */
  margin-bottom: 10px;
}

/* heading beside image */
.feature-header h3 {
  color: rgb(228, 224, 224);
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
}

.feature-content p {
  line-height: 1.7;
  font-size: 17px;
  color: rgb(228, 224, 224);
  max-width: 500px;
}

/* ----- RIGHT SIDE (YouTube video) ----- */
.feature-video {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto; /* allow dynamic height */
}


/* The YouTube video itself */
.feature-video iframe {
  width: 100%;
  max-width: 800px; /* make it wider if you like */
  height: 285px; /* 🔥 increase this to make it taller */
  
  display: block;
}

/* ----- RESPONSIVE DESIGN ----- */
@media (max-width: 900px) {
  .feature-card {
    flex-direction: column;
    text-align: center;
  }

  .feature-header {
    justify-content: center;
  }

  .feature-content p {
    max-width: 100%;
  }

  .feature-video iframe {
    width: 90%;
    height: 240px;
  }
}

/* Custom video container (for your thumbnail + play button setup) */
.custom-video {
  position: relative;
  width: 100%;
  max-width: 800px;
  
  aspect-ratio: 16 / 9; /* ✅ keeps perfect YouTube proportions */
  overflow: hidden;
  cursor: pointer;
}

.custom-video iframe {
  position: absolute;
  top: 0;
  height: 100%;
  left: 0;
  width: 100%;
  border: none;
  object-fit: cover; /* 💡 ensures the video fills the box like a background image */
  background-color: #1a1311; /* hides any stray empty space */
}

/* Thumbnail image */
.video-thumb {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.custom-video:hover .video-thumb {
  transform: scale(1.03);
}

/* Play button */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px; /* bigger play icon */
  height: 100px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.9;
}

.custom-video:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  opacity: 1;
}

.custom-video {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

/* Mobile version */
@media (max-width: 900px) {
  .feature-video iframe,
  .custom-video {
    height: 350px;
    max-width: 90%;
  }

  .play-btn {
    width: 70px;
    height: 70px;
  }
}

/* Ensure YouTube iframe matches thumbnail size */
.feature-video iframe {
  width: 100%;
  height: 285px; /* same as .custom-video height */
  max-width: 560px;
  display: block;
}

/* Responsive version */
@media (max-width: 900px) {
  .feature-video iframe {
    height: 240px; /* same as responsive .custom-video */
  }
}

/* Make YouTube iframe responsive (16:9 aspect ratio) */
.responsive-video {
  position: relative;
  width: 100%;
  max-width: none;
  padding-bottom: 60%; /* 16:9 ratio */
  height: 0;
  margin-left: 2px;
  margin-top: -3px;
  padding-right: 150px;
  object-fit: cover;
  background-color: #1a1311;
  overflow: hidden;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin-left: 2px;
  margin-top: -3px;
  padding-bottom: 60%;
  padding-right: 150px;
  object-fit: cover;
  transform: scale(1.03);
  background-color: #1a1311;
}


/* smooth fade animation */
.video-fade-out {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.video-loaded {
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* ===== QUOTE + PHOTO CONTAINER ===== */
.quote-photo-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: 500px; /* adjust height as desired */
  background-color: #1a1311; /* matches your site’s main dark theme */
}

/* Left half: white background with centered quote */
.quote-side {
  flex: 1;
  background-color: rgb(228, 224, 224);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.quote-side .quote {
  font-size: 22px;
  text-align: center;
  max-width: 400px;
  font-weight: bold;
}

/* --- Modern Floating Footer + Collage Reveal with 3D Rubik-style flip --- */
.photo-side {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.photo-link-float {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}

/* Main photo */
.main-photo-float {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.photo-link-float:hover .main-photo-float {
  transform: scale(1.05);
}

/* Tint overlay (warm #1a1311 tone) */
.photo-link-float::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 19, 17, 0.40);
  opacity: 1;
  transition: background 0.5s ease;
  z-index: 2;
}

.photo-link-float:hover::before {
  background: rgba(26, 19, 17, 0.60);
}

/* Footer (dash + text) */
.photo-footer {
  position: absolute;
  bottom: 35px;
  left: 18%;
  transform: translateX(-50%);
  text-align: left;
  transition: transform 0.4s ease;
  z-index: 3;
}

.dash {
  width: 105px;
  height: 1px;
  background-color: rgb(228, 224, 224);
  margin: 0 auto 8px;
  border-radius: 2px;
}

.footer-text {
  font-size: 18px;
  color: rgb(228, 224, 224);
  font-weight: lighter;
  letter-spacing: 3px;
}

/* When hovering anywhere on the photo-side */
.photo-side:hover .footer-text {
  color: grey; /* gold/yellow accent on hover */
}

.photo-side:hover .dash {
  background-color: grey;
}

.collage-window {
  position: absolute;
  bottom: 80px;
  left: 15%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(2, 60px);
  grid-template-rows: repeat(2, 60px);
  gap: 0;
  opacity: 0;
  transition: opacity .4s ease, bottom .4s ease;
  z-index: 10;
}

.photo-link-float:hover .collage-window {
  bottom: 100px;
  opacity: 1;
}

/* reset every 3-D and perspective property */
.photo-side, .photo-link-float, .collage-window, .tile, .tile img {
  perspective: none !important;
  transform-style: flat !important;
}

/* the tiles themselves */
.tile {
  position: relative;
  width: 110px;
  height: 50px;
  overflow: hidden; /* covers any sub-pixel gap */
}

/* both faces stacked in the same 2-D plane */
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  left: -32%;
  object-fit: cover;
  display: block;
  border: none;
  transition: opacity .45s ease, transform .45s ease;
  backface-visibility: visible; /* disable hiding “other half” */
}

/* start state */
.tile .front {
  opacity: 1;
  transform: scale(1);
}
.tile .back {
  opacity: 0;
  transform: scale(.95);
}

/* flip (pure fade/scale, no 3-D) */
.tile.flip .front {
  opacity: 0;
  transform: scale(1.05);
}
.tile.flip .back {
  opacity: 1;
  transform: scale(1);
}

/* ===== SOCIAL SECTION (horizontal logo bar below quote-photo-container) ===== */
.social-section {
  display: flex;
  flex-direction: row;              /* 👈 horizontal layout */
  align-items: center;
  justify-content: space-evenly;    /* evenly spread across width */
  background-color: #1a1311;        /* match theme */
  height: 250px;                    /* half height of quote-photo-container */
  padding: 20px 40px;
}

.social-link img {
  width: 75px;
  height: 75px;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-link img:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

@media (max-width: 700px) {
  .social-section {
    flex-direction: column;
    gap: 25px;
    height: auto;
    padding: 40px 0;
  }
}

/* ===== FOOTER BAR ===== */
.footer-bar {
  background-color: rgb(228, 224, 224);      /* grey center bar */
  color: #1a1311;                 /* dark text for contrast */
  text-align: center;
  font-size: 14px;
  padding: 15px 0;
  letter-spacing: none;
  font-weight: bolder;
  width: 97%;                     /* leaves dark background at edges */
  max-width: 900px;
  margin: 0 auto;                 /* centers horizontally */
  border-radius: none;

  /* remove top gap */
  position: relative;
  top: 0;
}

/* make sure the page background below stays dark */
body {
  background-color: #1a1311;      /* matches social-section edges */
}




















/* ===== GALLERY PAGE ===== */
.gallery-container {
  background-color: #1a1311;
  padding: 120px 60px;
  min-height: 100vh;
  color: rgb(228, 224, 224);
  font-size: 15px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  text-align: center;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  justify-items: center;
}

.gallery-grid img {
  width: 100%;
  max-width: 350px;
  height: 250px;
  object-fit: cover;
  border-radius: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.gallery-grid img:hover {
  transform: scale(1.05);
  opacity: 0.9;
  cursor: pointer;
}

/* ===== LIGHTBOX OVERLAY ===== */
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.90);
  backdrop-filter: blur(2px);     /* subtle blur for elegance */
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.lightbox-img {
  max-width: 90%;
  max-height: 80%;
  border-radius: none;
  object-fit: contain;
  
}

.close-btn {
  position: absolute;
  top: 25px;
  right: 50px;
  font-size: 30px;
  color: grey;
  cursor: pointer;
  transition: color 0.3s;
}

.close-btn:hover {
  color: white;
}

.lightbox-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}

.lightbox-controls .prev {
  position: absolute;
  left: 120px;  /* move inward from left edge */
}

.lightbox-controls .next {
  position: absolute;
  right: 120px; /* move inward from right edge */
}

.lightbox-controls span {
  color: rgb(73, 72, 72);
  font-size: 40px;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s;
}

.lightbox-controls span:hover {
  color: white;
}

/* Caption inside lightbox */
.lightbox-caption {
  color: #f0f0f0;
  font-size: 18px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  text-align: center;
  margin-top: 15px;
  max-width: 80%;
  line-height: 1.4;
  text-shadow: 0 0 5px rgba(0,0,0,0.6);
}










/* --- GALLERY PAGE FIXES --- */
.gallery-hero .search-container {
  margin-top: 60px !important;   /* bring the search bar into view */
  z-index: 10001 !important;
}

.gallery-hero .mobile-menu {
  top: 90px !important;
  z-index: 10000 !important;
}

.gallery-hero {
  background-image: none !important;
  background-color: #1a1311 !important;
  height: auto;                 /* remove giant hero behavior */
  min-height: 120px;            /* just enough for search bar */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  clip-path: none;
  position: relative;
  overflow: visible;
  z-index: 1;
}

.gallery-container {
  margin-top: -500px;
}

/* === KEEP COLLAGE 2D ONLY === */
.collage-window,
.collage-window * {
  perspective: none !important;
  transform-style: flat !important;
}

/* ===== DESKTOP TOP COLOR BLOCK ===== */
@media (min-width: 1025px) {
  .top-color-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;                    /* Thickness of the color strip */
    background-color: #1a1311;       /* ← Change this color */
    z-index: 9999;
    pointer-events: none;            /* Allows clicks to pass through */
  }
}

html, body {
  overflow-x: hidden; /* stop horizontal scroll entirely */
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
}

/* MOBILE ONLY – CLEAN HAMBURGER MENU */
/* MOBILE ONLY – CLEAN HAMBURGER MENU */
/* MOBILE ONLY – CLEAN HAMBURGER MENU */
/* MOBILE ONLY – CLEAN HAMBURGER MENU */
/* MOBILE ONLY – CLEAN HAMBURGER MENU */


@media (max-width: 1024px) {

  /* Hide the original flip-wrapper completely on mobile */
  .flip-wrapper {
    display: none !important;
  }

  .search-container {
    position: fixed !important;
    top: 20px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    margin: 0 auto !important;
    height: 60px !important;
    padding: 0 15px !important;
    background: rgb(228, 224, 224) !important;
    border: none !important;
    border-radius: 30px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important; /* changed from hidden */
    box-sizing: border-box !important;

    z-index: 10001 !important; /* VERY important */
  }

  .search-container .click-half {
    position: relative;
    z-index: 10002;
  }

  .title-text {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
  }

.click-half {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 0 0 15px;
  box-sizing: border-box;
}

  .hamburger {
  width: 30px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  margin-left: 20px;
  margin-right: 0;
  position: relative;
  z-index: 10003 !important;
}

  .hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: black;
  transform-origin: center;
  border-radius: 2px;
  transition: all 0.3s ease;
}

  .hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

  .hamburger.active span:nth-child(2) {
  opacity: 0;
}

  .hamburger.active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}


 .mobile-menu {
  position: fixed;
  top: 98px;
  left: 10px;
  right: 10px;
  background: rgb(228, 224, 224);
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(46, 35, 35, 0.2);

  max-height: 0;
  overflow-x: hidden;
  overflow-y: clip;

  transition: max-height 0.28s ease, opacity 0.2s ease;
  opacity: 0;

  z-index: 9998;

} 


 .mobile-menu.open {
  max-height: 400px;
  opacity: 1;
  overflow-y: visible;
  padding-top: 50px;
} 

  .mobile-menu .option {
    padding: 16px 20px;
    font-size: 17px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    cursor: pointer;
    text-align: center;
    margin: 0;
    color: #1a1311;
  }

  .mobile-menu .option:last-child {
    border-bottom: none;
  }

  .mobile-menu .option:hover { background: rgba(0,0,0,0.05); }


  /* Hero fixes */
  .hero-background {
    background-position: center 70px !important;
    background-size: 90% !important;
    height: 150vh !important;
    clip-path: inset(0 0 60vh 0) !important;
    position: relative;
  }

  /* Optional: center the bio text on mobile */
  .side-container {
    position: relative !important;
    width: 90% !important;
    max-width: 500px;
    top: 5px;   /* adjust this */
    left: 50%;
    transform: translateX(-50%);
    height: auto !important;
    padding: 30px 20px !important;
    overflow: visible !important;
    text-align: center;
  }

    .side-container h4 {
     margin-top: 0;
  }
}

@media (min-width: 1025px) {
  .hamburger, .mobile-menu { display: none !important; }
}


 
/* ==== PUBLICATION SECTION (MOBILE) - IMPROVED CENTERING ==== */
@media (max-width: 900px) {

  .publication-container {
    display: flex;
    flex-direction: column;
    align-items: center;        /* This centers the cards horizontally */
    justify-content: center;
    gap: 35px;                  /* Better spacing between cards */
    padding: 50px 20px 40px;    /* Balanced top/bottom padding */
    margin-top: -500px;         /* Adjust if needed based on your hero */
  }

  .publication-card {
    display: flex;
    flex-direction: column;
    align-items: center;        /* Centers image and text inside each card */
    text-align: center;
    width: 100%;
    max-width: 420px;           /* Nice readable width on mobile */
    margin: 0 auto;             /* Extra safety for centering */
  }

  /* Image wrapper */
  .publication-image {
    width: 100%;
    max-width: 380px;           /* Slightly wider but still controlled */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    height: auto;
  }

  /* All images (normal + small logo) */
  .publication-image img,
  .publication-image .small-logo {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;        /* Keeps logos clean */
    border-radius: 8px;
  }

  /* Second publication specific adjustment */
  .second-publication .publication-image {
    width: 100%;
    max-width: 380px;
  }

  .second-publication .publication-content {
    margin-right: 60px;
  }

  .publication-content {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  .publication-content h3 {
    font-size: 19px;
    line-height: 1.3;
    margin-bottom: 12px;
  }

  .publication-content p {
    font-size: 15px;
    line-height: 1.6;
    padding: 0 10px;           /* Slight side padding for readability */
  }

  .read-more {
    margin-top: 10px;
    display: inline-block;
  }
}


/* ==== NEWS SCROLL ==== */
@media (max-width: 1024px) {
  .news-scroll-wrapper { flex-direction: column; gap: 20px; padding: 40px 0; }
  .edge-icon { width: 32px; height: 32px; }
  .left-icon, .right-icon { margin: 0; }
  .news-scroll { max-width: 100%; padding: 0 20px; }
  .news-track a { margin-right: 80px; }
  .news-track img { width: 280px; height: 160px; }
  @keyframes scrollNews { 100% { transform: translateX(-75%); } }
}

/* ==== FEATURE SECTION ==== */
@media (max-width: 900px) {
  .feature-container { padding: 60px 20px; }
  .feature-card { flex-direction: column; gap: 30px; text-align: center; }
  .feature-header { justify-content: center; }
  .feature-content p { max-width: 100%; font-size: 16px; }
  .custom-video { max-width: 100%; height: auto; aspect-ratio: 16/9; }
  .play-btn { width: 70px; height: 70px; }
}

/* ==== QUOTE + PHOTO ==== */
@media (max-width: 768px) {
  .quote-photo-container { flex-direction: column; height: auto; align-items: center; justify-content: center; }
  .quote-side, .photo-side { flex: none; width: 100%; height: 300px; }
  .quote-side .quote { font-size: 18px; }
  .photo-footer { bottom: 20px; left: 50%; transform: translateX(-50%); text-align: center; }
  .dash { margin: 0 auto 6px; width: 80px; }
  .footer-text { font-size: 16px; }
  .collage-window { bottom: 70px; left: 50%; transform: translateX(-50%); grid-template-columns: repeat(2, 50px); grid-template-rows: repeat(2, 50px); }
  .tile { width: 80px; height: 40px; }
}

/* ==== SOCIAL SECTION ==== */
@media (max-width: 700px) {
  .social-section { flex-direction: column; height: auto; padding: 40px 0; gap: 25px; }
  .social-link img { width: 60px; height: 60px; }
}

/* ==== GALLERY PAGE ==== */
@media (max-width: 768px) {

.gallery-hero {
    height: 1px;
    min-height: 1px;
    padding: 0;
    margin: 0;
    overflow: visible;
  }

  .gallery-hero .search-container {
    margin-top: 20px;
    z-index: 10001;
  }

  .gallery-container {
    padding: 100px 20px 60px;
    margin-top: 0;
  }

  .hero-background.gallery-hero {
  height: 80px !important;
  min-height: 80px !important;
  clip-path: none !important;
}

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .gallery-grid img {
    height: 200px;
  }

  .lightbox-controls .prev {
    left: 20px;
  }

  .lightbox-controls .next {
    right: 20px;
  }

  .close-btn {
    top: 15px;
    right: 15px;
    font-size: 32px;
  }
}

/* ==== GENERAL MOBILE TWEAKS ==== */
@media (max-width: 480px) {
  .click-half { font-size: 18px; height: 70px; }
  .options .option { font-size: 14px; }
  .search-form input { font-size: 16px; }
  .publication-content h3 { font-size: 17px; }
  .feature-content h3 { font-size: 18px; }
  .quote { font-size: 16px !important; }
  .footer-text { font-size: 14px; }
}