:root {
  --primary: hsl(198, 66%, 70%);
  --secondary: #3b8ab5;
  --dark: #0c0c0c;
  --black: #000000;
  --white: #fffafa;
  --bone: #f2eadb;
  --gray: #000000;
  --darkgray: #ffffff;
  --lightgray: #ffffff;
  --aud: "Audiowide", sans-serif; /* kept for compatibility but not used */
}

html, body {
  font-family: "Inter", sans-serif !important;
}

h1, h2, h3, h4, h5, h6, p, a, button {
  font-family: "Inter", sans-serif !important;
}

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

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--white); }

html { scroll-behavior: smooth; }

body {
  background-color: var(--black);
  color: var(--white);
  font-family: "Inter", sans-serif;
  /* ✅ ensures content starts below fixed navbar */
  padding-top: 84px;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: 0 6rem;
}

header.aos-init.aos-animate.hidden { transform: translateY(-100%); }

.to-top {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  transform: scale(0);
  z-index: 99;
  transition: all .2s linear;
}
.to-top:hover { background-color: #fff; color: #060606; transition: all .2s linear; }
.to-top.active { transform: scale(1); transition: all .2s linear; }

/* =========================
   NAVBAR — FIXED & VISIBLE
   ========================= */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 84px; /* stable height */
  mix-blend-mode: normal !important;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  z-index: 99999;
  transition: transform 0.3s ease-in-out;
}

header .container .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .container .content .logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ✅ slightly bigger logo */
header .container .content .logo img {
  width: 210px;   /* was 175px */
  height: auto;
}

header .container .content .logo a {
  font-family: "Inter", sans-serif;     /* was Audiowide */
  font-weight: 800;                      /* bold for title look */
  font-size: 35px;
  text-decoration: none;
  color: var(--black);
  text-shadow:
        -1px -1px 0 #ffffff,
         1px -1px 0 #ffffff,
        -1px  1px 0 #ffffff,
         1px  1px 0 #ffffff;
}

header:hover .content .logo a {
  color: #fdfdfd;
  text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

header .container .content .extra-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

header .container .content .extra-nav button {
  cursor: pointer;
  padding: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: var(--darkgray);
  border: 2px solid var(--gray);
  color: var(--white);
  width: 150px;
  border-radius: 8px;
  font-family: "Inter", sans-serif;     /* ensure consistency */
  font-weight: 600;
}
header .container .content .extra-nav button:hover { background: var(--black); transition: .1s linear; }
header .container .content .extra-nav button .icon {
  padding: 4px;
  display: block;
  background: var(--black);
  border-radius: 4px;
  transition: .1s linear;
}
header .container .content .extra-nav button:hover .icon { background: var(--black); transition: .1s linear; }

.site-nav .title {
  font-family: "Inter", sans-serif !important; /* or any font you want */
  font-size: 1.4rem;                 /* adjust size */
  font-weight: 700;                  /* bold */
  letter-spacing: 0.5px;             /* optional spacing */
}


/* =========================
   HERO
   ========================= */
.hero { position: relative; min-height: 100vh; overflow: hidden; }
.bg-video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -1;
}
.hero-content { position: relative; z-index: 1; color: white; text-align: center; top: 50%; transform: translateY(-50%); }

.hero::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 30%;
  bottom: 0;
  background: linear-gradient(0deg, rgba(1, 1, 3, 1) 8%, rgba(255, 0, 0, 0) 50%);
}

.hero .container .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 0px);
}

.hero .container .content .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 5%;
  z-index: 10;
}

.hero .container .content .text h1 {
  font-size: 3.5rem;
  font-weight: 800;                 /* bold header */
  text-transform: uppercase;
  font-family: "Inter", sans-serif; /* was var(--aud) */
  animation: textGlow 2s linear forwards;
  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}

.hero .container .content .text p {
  font-weight: 1000;
  text-align: center;
  width: 53%;
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--lightgray);
  font-family: "Inter", sans-serif;
  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
  
}

.hero .container .content .text p span {
  font-weight: 700;
  font-style: italic;
  animation: color 1s linear forwards;
  font-family: "Inter", sans-serif;
}

button,
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-weight: 600;
  border: 2px solid #111;
  cursor: pointer;
  text-decoration: none;    /* for <a> */
  transition: 0.3s;
  font-size: 15px;
}

button:hover,
.btn-pill:hover {
  background: #111;
  color: #fff;
}

button {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* space between text and logo */
  padding: 5px 10px;
  border-radius: 13px;
  background: #fff;
  color: #111;
  font-weight: 600;
  border: 2px solid #111;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: #111;
  color: #fff;
}

button .btn-logo {
  width: 40px;   /* adjust size */
  height: auto;
}



/* ✅ White CTA buttons only (no global color changes) */
.hero .container .content .text a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;

  background: #ffffff;
  color: #000000;
  font-weight: 700;
  padding: 12px 24px;

  border: 2px solid #000000;
  border-radius: 32px;

  transition: background 0.3s ease, color 0.3s ease;
  font-family: "Inter", sans-serif;
}
.hero .container .content .text a:hover { background: #f0f0f0; color: #000000; }
.hero .container .content .text a:active {
  border: 2px solid transparent;
  transform: translateY(2px);
  transition: .1s linear;
}

@keyframes color { to { color: var(--white); } }
@keyframes up { from { bottom: -100%; } }
@keyframes textGlow { to { text-shadow: 0 0 1px #ff0000, 0 0 3px #ff0000, 0 0 6px #ff0000; } }
@keyframes rotate { to { background-position: -200% 0; } }

/* =========================
   ABOUT
   ========================= */
.why-us { min-height: 100vh; }

.why-us .container .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  height: 100vh;
}

.why-us .container .content .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .5rem;
  margin-bottom: 4rem;
}
.why-us .container .content .title h2 {
  font-family: "Inter", sans-serif;  /* was var(--aud) */
  font-weight: 700;                  /* bold-ish subtitle */
  font-size: 1.5rem;
  color: var(--lightgray);
}
.why-us .container .content .title h1 {
  font-family: "Inter", sans-serif;  /* was var(--aud) */
  font-weight: 800;                  /* bold header */
  font-size: 2.5rem;
}

.why-us .container .content .title p {
  max-width: 66%;
  color: var(--white);
  text-align: justify;
  line-height: 1.8;
  font-size: 1.1rem;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
}

.why-us .container .content .reason {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.why-us .container .content .reason .card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 30%;
  height: 350px;
  padding: 1rem;
  background-color: var(--dark);
  border: 2px solid var(--darkgray);
  border-radius: 32px;
  overflow: hidden;
}
.why-us .container .content .reason .card .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
  border-radius: 8px;
  font-size: 1.5rem;
  background: var(--darkgray);
}
.why-us .container .content .reason .card .desc { text-align: center; height: 40%; width: 75%; }
.why-us .container .content .reason .card .desc h3 {
  font-weight: 800;  /* bold section title */
  margin-bottom: 1rem;
  font-family: "Inter", sans-serif;
}
.why-us .container .content .reason .card .desc p {
  color: var(--lightgray);
  text-align: justify;
  font-family: "Inter", sans-serif;
}

.why-us .container .content .reason .card hr {
  position: absolute;
  top: -100%;
  left: -150%;
  width: 350%;
  height: 15px;
  transform: rotate(-40deg);
  border: none;
  padding: 10px;
  background: var(--white);
  box-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff;
}
.why-us .container .content .reason .card:hover hr { top: 100%; left: 100%; transition: .3s linear; }


/* =========================
   ABOUT SECTION TEXT FIX
   ========================= */
.why-us .title p {
  text-align: justify;              /* uniform spacing left & right */
  text-justify: inter-word;         /* evenly distribute words */
  line-height: 1.8;                 /* comfortable vertical spacing */
  word-spacing: 0.02em;             /* slight balance for cleaner look */
  letter-spacing: 0.2px;            /* smoother visual flow */
  color: #f2f2f2;                   /* maintain your dark-theme contrast */
  font-family: "Inter", sans-serif; /* match global typography */
  font-weight: 400;
  padding: 0 1.2rem;                /* soft inner margin for mobile readability */
  margin-top: 1rem;                 /* spacing under the heading */
}

/* For smaller screens (phones/tablets) */
@media (max-width: 640px) {
  .why-us .title p {
    line-height: 1.7;
    padding: 0 1rem;
  }
}



/* =========================
   DESTINATION (Real Cases)
   ========================= */
.destination { min-height: 100vh; padding: 4rem 0; overflow: hidden; }

.destination .container .content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 2rem;
  height: 100vh;
}
.destination .container .content .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
}
.destination .container .content .title h1 {
  font-family: "Inter", sans-serif;  /* was Audiowide */
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: .3em;
}
.destination .container .content .title p { font-size: 1.1rem; color: var(--white); font-family: "Inter", sans-serif; }
.destination .container .content .title a {
  display: flex; justify-content: center; align-items: center; gap: 1rem;
  text-decoration: none; color: var(--white); font-size: .8rem; padding: 4px;
  border: 2px solid var(--lightgray); border-radius: 12px; background-color: transparent;
  backdrop-filter: blur(2px); width: 20%;
  font-family: "Inter", sans-serif;
}
.destination .container .content .title a:hover { background-color: var(--black); }

.destination .container .content .items {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.5rem; background-size: cover; background-position: center;
  border: 2px solid var(--darkgray); border-radius: 32px;
}
.destination .container .content .items a {
  display: flex; justify-content: center; align-items: center; gap: 1rem;
  text-decoration: none; color: var(--white); font-size: .8rem; padding: 4px;
  border: 2px solid var(--lightgray); border-radius: 12px; background-color: transparent;
  backdrop-filter: blur(1px); width: 125px;
  font-family: "Inter", sans-serif;
}
.destination .container .content .items a:hover { background-color: var(--black); }
.destination .container .content .items a .icon { width: 16px; }
.destination .container .content .items h1 {
  font-family: "Inter", sans-serif;   /* was Audiowide */
  font-weight: 700;                    /* bold item titles */
  font-style: italic;
  font-size: 1.5rem;
  color: rgb(0,0,0);
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

.destination .container .content .title { grid-column: span 2 / span 2; grid-row: span 2 / span 2; }
.destination .container .content .saturn { grid-column: span 2 / span 2; grid-row: span 2 / span 2; grid-column-start: 3; background: url("test.png"); }
.destination .container .content .moon {
  grid-column: span 2 / span 2; grid-row: span 3 / span 3; grid-column-start: 1; grid-row-start: 3;
  padding: 1rem; background: url("img2.png"); background-size: cover; background-position: center;
  border: 2px solid var(--white); border-radius: 32px;
}
.destination .container .content .eyropa {
  grid-row: span 2 / span 2; grid-column: span 2 / span 2; grid-row-start: 3;
  padding: 1rem; background: url("img7.png"); background-size: cover; background-position: center;
  border: 2px solid var(--white); border-radius: 32px;
}
.destination .container .content .blackhole {
  grid-column: span 2 / span 2; grid-row: span 3 / span 3; grid-column-start: 1; grid-row-start: 6;
  padding: 1rem; background: url("img1.png"); background-size: cover; background-position: center;
  border: 2px solid var(--white); border-radius: 32px;
}
.destination .container .content .titan {
  grid-row: span 2 / span 2; grid-column: span 2 / span 2; grid-row-start: 5;
  padding: 1rem; background: url("img4.png"); background-size: cover; background-position: center;
  border: 2px solid var(--white); border-radius: 32px;
}
.destination .container .content .mars {
  grid-column: span 2 / span 2; grid-row: span 2 / span 2; grid-column-start: 3; grid-row-start: 7;
  padding: 1rem; background: url("img6.png"); background-size: cover; background-position: center;
  border: 2px solid var(--white); border-radius: 32px;
}

/* === REAL CASES: make paragraph text smooth & professional on phone === */
@media (max-width: 640px) {
  .destination .container .content .title p {
    text-align: left;         /* natural alignment */
    text-justify: auto;       /* reset justify */
    line-height: 1.6;         /* good readability */
    word-spacing: normal;     /* even spacing */
    letter-spacing: normal;   /* no weird gaps */
    hyphens: none;            /* remove auto - breaks */
    overflow-wrap: normal;    /* don't break words mid-line */
    white-space: normal;      /* ensure proper wrapping */
    margin: 8px 0 16px 0;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .destination .container .content .title p {
    line-height: 1.75;     /* softer vertical spacing */
    font-size: 0.98rem;    /* slightly smaller, smoother text */
    color: #ddd;           /* gentle contrast for long reading */
  }
}



/* =========================
   CONTACT
   ========================= */
.contact {
  position: relative;
  padding: 4rem 0;
  background: #000;
  background-size: cover;
  background-position: center;
  min-height: 80vh;
  overflow: hidden; /* keep pseudo-element inside */
}
.contact::after {
  /* soften the bottom fade and avoid the white line */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(0,0,0,1) 15%,
    rgba(0,0,0,0) 65%
  );
}

.contact .container .content {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 80vh;
}

/* ---------- LEFT SIDE ---------- */
.contact .container .content .left-side {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contact .container .content .left-side h1 {
  font-family: "Inter", sans-serif;   /* was Audiowide */
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: .3em;
  color: #fff;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000,
    -1px  1px 0 #000, 1px  1px 0 #000;
}
.contact .container .content .left-side p {
  font-size: 1.2rem;
  color: #fff;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000,
    -1px  1px 0 #000, 1px  1px 0 #000;
  font-family: "Inter", sans-serif;
  opacity: .95;
}

/* ---------- RIGHT SIDE ---------- */
.contact .container .content .right-side {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* panel that holds the email + copy button */
.contact .contact-panel {
  padding: 2rem 2.25rem;
  background-color: rgba(0,0,0,0.6);
  backdrop-filter: blur(18px);
  border-radius: 24px;
  font-family: "Inter", sans-serif;
  color: #fff;
  max-width: 450px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

.contact .contact-panel h2 {
  margin: 0 0 .5rem 0;
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: .04em;
}

.contact .contact-lead {
  margin: 0 0 1rem 0;
  opacity: .9;
  font-size: 1rem;
}

/* email row */
.contact-email-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #111;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.contact-email {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cyan, #E91E63);
  text-decoration: none;
}
.contact-email:hover { text-decoration: underline; }

.copy-btn {
  background: var(--cyan, #ffffff);
  color: #000;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: transform .08s ease, opacity .2s ease, background .2s ease;
}
.copy-btn:hover { background: #E91E63; }
.copy-btn:active { transform: scale(0.98); }

/* === CONTACT SECTION FIX (Prevent email breaking on phone) === */
@media (max-width: 640px) {
  .contact-email-box,
  .contact-email {
    white-space: nowrap;      /* keep email on one line */
    overflow-x: auto;         /* allow horizontal scroll if needed */
    text-align: center;       /* center nicely */
    word-break: keep-all;     /* don’t break between letters */
    font-size: clamp(14px, 4vw, 16px);
  }

  /* ensure text inside spans or p stays in one line too */
  .contact-email span,
  .contact-email p {
    white-space: nowrap;
  }
}



/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
  .contact .container .content {
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    min-height: unset;
  }
  .contact .container .content .left-side,
  .contact .container .content .right-side {
    width: 100%;
  }
  .contact .container .content .left-side h1 {
    font-size: 2.4rem;
    letter-spacing: .22em;
  }
  .contact .contact-panel {
    max-width: 640px;
  }
}

@media (max-width: 640px) {
  .contact {
    padding: 3rem 0;
  }
  .contact .container .content .left-side h1 {
    font-size: 2rem;
    letter-spacing: .16em;
  }
  .contact-email-box {
    flex-wrap: wrap;
    gap: 12px;
  }
  .copy-btn {
    width: 100%;
    text-align: center;
  }
}


/* =========================
   SLIDER
   ========================= */
@keyframes orbit {
  40% { z-index: 1; }
  50% { left:40em; z-index: -1; }
  99% { z-index: -1; }
  100% { left:-11em; }
}

.homepage-section { height: 100vh; position: relative; overflow: hidden; }
.slider-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
.slider-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; }
.slider-track { display: flex; height: 100%; transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; }

.slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex; justify-content: center; align-items: center;
}


.nav-button {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: rgb(255, 255, 255);
  width: 70px; height: 70px; border-radius: 50%; cursor: pointer; z-index: 10;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); backdrop-filter: blur(15px);
  display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: bold; user-select: none;
  font-family: "Inter", sans-serif;
}
.nav-button:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-50%) scale(1.1); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); }
.prev { left: 30px; }
.next { right: 30px; }

.slide-indicators {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 20px; z-index: 10;
}
.indicator {
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.indicator.active { background: white; transform: scale(1.4); box-shadow: 0 0 25px rgba(255, 255, 255, 0.8); }

/* Scroll Down Arrow */
.scroll-down {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  color: white; font-size: 2rem; cursor: pointer; animation: bounce 2s infinite; z-index: 10; transition: all 0.3s ease;
  font-family: "Inter", sans-serif;
}
.scroll-down:hover { transform: translateX(-50%) scale(1.2); }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
  40% { transform: translateY(-20px) translateX(-50%); }
  60% { transform: translateY(-10px) translateX(-50%); }
}

/* Content Sections */
.content-section { min-height: 100vh; padding: 100px 0; position: relative; overflow: hidden; color: white; font-family: "Inter", sans-serif; }

/* ===== NAVBAR: always visible, no blending, bigger logo ===== */
header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 84px;
  z-index: 10000;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  mix-blend-mode: normal !important;
  transform: none !important;
}

/* prevent content from sliding under the fixed bar */
body{ padding-top: 84px; }

/* stop any script/AOS rule from hiding the header */
header.hidden,
header.aos-init.aos-animate.hidden{
  transform: none !important;
}

/* keep header content vertically centered in the fixed height */
header .container .content{ height: 84px; }

/* Bigger logo */
header .container .content .logo img{
  width: 210px; /* was 175px */
  height: auto;
}

/* ===============================
   ABOUT US SECTION
==================================*/

/* Section wrapper */
.content-section {
  min-height: 100vh;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.faq-content {
  position: relative;
  z-index: 1;
  padding: 60px 20px;
  text-align: center;
}

/* Title + subtitle */
.section-title {
  font-family: "Inter", sans-serif !important;
  font-size: 3rem;
  text-align: center;
  margin-bottom: 3rem;
  font-weight: 800;
  text-shadow: -1px -1px 0 #000,
               1px -1px 0 #000,
              -1px  1px 0 #000,
               1px  1px 0 #000;
}

.section-content {
  font-size: 1.2rem;
  line-height: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
  text-shadow: -1px -1px 0 #000,
               1px -1px 0 #000,
              -1px  1px 0 #000,
               1px  1px 0 #000;
}

/* Team slider row */
.team-slider {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* Flip cards */
.team-card {
  width: 300px;
  height: 380px;
  perspective: 1000px;
  margin: 0 10px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .8s;
  transform-style: preserve-3d;
}

.team-card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  inset: 0;
  border-radius: 15px;
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 8px 20px rgb(0 0 0 / 80%);
}

.card-front {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  background-color: #333;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.card-front .overlay {
  background: rgba(0,0,0,0.6);
  padding: 10px;
  border-radius: 10px;
  text-align: center;
}

.card-front .overlay h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}

.card-front .overlay p {
  margin: 0;
  font-size: 0.85rem;
  color: #fff;
}

.card-back {
  background-color: #000;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
}

.slide-title,
.slide-description,
.slide-description h6{
  color: white; /* keep the text white */
  text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,  
    -1px  1px 0 #000,  
     1px  1px 0 #000; /* black outline */
}

/* ===== SLIDER TEXT OUTLINE ===== */
.slide-title,
.slide-description,
.slide-description h6 {
  color: white; /* text stays white */
  text-shadow: 
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000; /* creates a black outline */
}

.btn {
  display: inline-flex;          /* flex so icon aligns nicely */
  align-items: center;           /* center text + icon */
  gap: 8px;                      /* space between text and icon */
  padding: 10px 22px;
  background: white;
  color: black;
  font-weight: 600;
  text-decoration: none;
  border-radius: 30px;
  border: 2px solid black;
  transition: all 0.3s ease;
}

.btn:hover {
  background: black;
  color: white;
}

.slide-content h6 {
  font-size: 0.8rem;            /* increase size (default h6 ~0.67rem) */
  font-weight: 600;           /* make it bolder */
  color: white;               /* keep main text white */
  margin-top: 10px;

  /* black outline using text-shadow */
  text-shadow: 
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

/* Container */
.scroll-indicator {
  text-align: center;
  margin-top: 20px;
  color: #ccc;
  font-family: "Inter", sans-serif;
}

/* Circle with arrow */
.scroll-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  cursor: pointer;
  transition: background 0.3s;
}

.scroll-circle:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Arrow icon */
.scroll-circle i {
  color: #fff;
  font-size: 18px;
  animation: bounce 1.5s infinite;
}

/* Text */
.scroll-indicator p {
  font-size: 14px;
  color: #aaa;
  margin: 0;
}

/* Bouncing animation */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.scroll-indicator {
  position: absolute;   /* take out of normal flow */
  bottom: 40px;         /* adjust upward/downward */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #ccc;
  font-family: "Inter", sans-serif;
}

.nav-cta button {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 20px;
  border-radius: 9999px;   /* pill shape */
  background: #fff;
  color: #111;
  font-weight: 600;
  border: 2px solid #111;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-cta button:hover {
  background: #111;  /* dark background */
  color: #fff;       /* white text */
}

.nav-cta button:hover .icon {
  stroke: #fff;      /* make Feather icon turn white */
}


/* hint + CTA */
.tap-hint{
  text-align:center;
  color:var(--muted);
  font-size:12px;
  margin-top:14px;
}
.cta{ margin-top:28px; text-align:center; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:13px;
  background:#fff; color:#111; border:2px solid #111;
  font-weight:800; text-decoration:none;
  transition:.2s;
}
.btn:hover{ background:#111; color:#fff; }


:root {
  --accent: #E91E63; /* same as navbar underline */
  --footer-bg: #000;
  --footer-text: #eee;
  --footer-dim: #aaa;
}

.gcsg-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding-top: 40px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 30px;
  display: grid;
  gap: 32px;
  grid-template-columns: 1.2fr 1fr 1.2fr;
}

.footer-col { min-width: 0; }

.footer-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.2rem;
  text-decoration: none; color: var(--footer-text);
}
.footer-logo { width: 40px; height: 40px; }

.footer-tagline {
  margin: 12px 0 16px;
  font-size: 0.9rem; line-height: 1.5;
  color: var(--footer-dim);
}

.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-right: 6px;
  background: #111; border-radius: 50%;
  color: var(--footer-text); font-size: 14px;
  transition: 0.3s;
}
.footer-social a:hover { background: var(--accent); color: #fff; }

.footer-title {
  margin-bottom: 10px;
  color: var(--accent);
  font-weight: 700;
}

.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-links li, .footer-contact li { margin: 8px 0; }
.footer-links a { color: var(--footer-text); text-decoration: none; }
.footer-links a:hover {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

.footer-contact i {
  color: var(--accent);
  margin-right: 8px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  padding: 12px 20px;
  font-size: 0.85rem;
  color: var(--footer-dim);
}

/* Responsive */
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand span { font-size: 1rem; }
}



/* ===========================================================
   RESPONSIVE ENHANCEMENTS (APPEND-ONLY, SAFE FOR DESKTOP)
   =========================================================== */

/* Use the mobile 100vh fix you added in HTML */
.hero{
  min-height: calc(var(--vh, 1vh) * 100);
}

/* Fluid container padding on smaller screens */
@media (max-width: 1200px){
  .container{ padding-left: 3rem; padding-right: 3rem; }
}
@media (max-width: 992px){
  .container{ padding-left: 2rem; padding-right: 2rem; }
}
@media (max-width: 640px){
  .container{ padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- HERO ---------- */
@media (max-width: 1024px){
  .hero .container .content{ min-height: calc(100vh - 0px); }
  .hero .container .content .text h1{ font-size: 3rem; }
  .hero .container .content .text p{ width: 80%; font-size: 1rem; }
}
@media (max-width: 768px){
  .hero .container .content .text h1{ font-size: 2.2rem; line-height: 1.2; text-align:center; }
  .hero .container .content .text p{ width: 92%; font-size: .95rem; }
  button, .btn-pill{ padding: 8px 14px; border-radius: 12px; font-size: 14px; }
  button .btn-logo{ width: 28px; }
}
@media (max-width: 480px){
  .hero .container .content .text h1{ font-size: 1.8rem; }
  .scroll-indicator{ bottom: 24px; }
}

/* ---------- WHY-US (About) ---------- */
@media (max-width: 1200px) {
  .why-us .container .content {
    height: auto; /* allow it to grow naturally */
  }

  /* keep using flex but allow wrapping instead of switching to grid */
  .why-us .container .content .reason {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
  }

  .why-us .container .content .reason .card {
    width: 45%;     /* 2 cards per row on tablets */
    height: auto;
    padding: 1.25rem;
    overflow: visible;
  }
}

/* phones: stack cards vertically */
@media (max-width: 640px) {
  .why-us .container .content .title h1 { font-size: 2rem; }
  .why-us .container .content .title p { max-width: 100%; }

  .why-us .container .content .reason {
    flex-direction: column;
    align-items: stretch;
  }

  .why-us .container .content .reason .card {
    width: 100%;
    padding: 1.4rem 1rem;
  }
}


/* ---------- SLIDER ---------- */
@media (max-width: 1200px){
  .image-border{ max-width: 90%; }
  .image-border img{ max-height: 70vh; }
  .slide-title{ font-size: 3.2rem; }
  .slide-description{ font-size: 1.1rem; max-width: 760px; }
}
@media (max-width: 992px){
  .slide-title{ font-size: 2.6rem; margin-bottom: 1.5rem; }
  .slide-description{ font-size: 1rem; max-width: 640px; margin-bottom: 1.5rem; }
  .nav-button{ width: 56px; height: 56px; font-size: 24px; }
  .prev{ left: 16px; } .next{ right: 16px; }
  .slide-indicators{ gap: 12px; bottom: 28px; }
  .indicator{ width: 12px; height: 12px; }
}
@media (max-width: 640px){
  .image-border{ max-width: 96%; padding: 6px; }
  .image-border img{ max-height: 58vh; }
  .slide-title{ font-size: 2rem; }
  .slide-description{ font-size: .95rem; line-height: 1.6; padding: 0 8px; }
  .nav-button{ width: 48px; height: 48px; font-size: 20px; }
  .slide-indicators{ bottom: 22px; gap: 10px; }
}

/* ---------- REAL CASES (destination grid) ---------- */
/* Collapse rigid 4x8 grid → fluid stacks without breaking desktop */
@media (max-width: 1280px){
  .destination{ padding: 3rem 0; min-height: auto; }
  .destination .container .content{
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-rows: auto;
    height: auto;
    gap: 1.25rem;
  }
  /* Reset hard placements so items flow naturally */
  .destination .container .content .title,
  .destination .container .content .saturn,
  .destination .container .content .moon,
  .destination .container .content .eyropa,
  .destination .container .content .blackhole,
  .destination .container .content .titan,
  .destination .container .content .mars{
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .destination .container .content .items{ min-height: 280px; }
  .destination .container .content .title h1{
    font-size: 2.2rem; letter-spacing: .18em;
  }
  .destination .container .content .title a{ width: auto; }
}
@media (max-width: 768px){
  .destination .container .content{ grid-template-columns: 1fr; }
  .destination .container .content .items{ min-height: 240px; padding: 16px; }
  .destination .container .content .items h1{ font-size: 1.25rem; }
  .destination .container .content .title h1{
    font-size: 1.8rem; letter-spacing: .12em;
  }
}

/* ---------- TEAM (flip cards) ---------- */
.card-inner.is-flipped{ transform: rotateY(180deg); } /* mobile click support */

@media (max-width: 1024px){
  .team-slider{ gap: 16px; }
  .team-card{ width: calc(50% - 16px); height: 360px; margin: 0; }
}
@media (max-width: 640px){
  .team-card{ width: 100%; height: 340px; }
  .section-title{ font-size: 2rem; }
  .section-content{ font-size: 1rem; margin-bottom: 2rem; }
}

/* ---------- CONTACT (you already had some; this adds small polish) ---------- */
@media (max-width: 768px){
  .contact .container .content{ gap: 2rem; }
  .contact .contact-panel{ width: 100%; max-width: 600px; }
}

/* ---------- FOOTER ---------- */
@media (max-width: 768px){
  .footer-inner{ gap: 24px; }
  .footer-title{ margin-bottom: 6px; }
  .footer-links a{ display: inline-block; padding-bottom: 2px; }
}

/* ---------- Misc small-screen taps ---------- */
@media (max-width: 600px){
  .nav-cta button{ padding: 8px 12px; border-radius: 12px; font-size: 13px; }
  .scroll-indicator p{ font-size: 12px; }
}


/* =========================
   MOBILE/TABLET NAV
   ========================= */

/* Hamburger (hidden by default, enabled in media query) */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  position: relative; /* ✅ allow absolute bars inside */
}

/* Three white lines inside the button */
.nav-toggle span {
  position: absolute;
  width: 20px;
  height: 2px;
  background: #ffffff; /* ✅ white bars */
  border-radius: 2px;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Positions for top, middle, bottom lines */
.nav-toggle span:nth-child(1) {
  top: 13px;
}
.nav-toggle span:nth-child(2) {
  top: 20px;
}
.nav-toggle span:nth-child(3) {
  top: 27px;
}

/* Animate into “X” when open */
body.drawer-open .nav-toggle span:nth-child(1) {
  transform: translateX(-50%) rotate(45deg);
  top: 20px;
}
body.drawer-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
body.drawer-open .nav-toggle span:nth-child(3) {
  transform: translateX(-50%) rotate(-45deg);
  top: 20px;
}

/* Drawer + backdrop */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  height: 100dvh;
  width: min(92vw, 420px);
  background: #0b0b0b;
  color: #fff;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  padding: 18px;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.4);
  transition: right 0.28s ease;
}
.mobile-drawer .brand img {
  width: 64px;
  height: auto;
}
.mobile-drawer .brand .title {
  font: 600 18px "Audiowide", sans-serif;
  letter-spacing: 0.3px;
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.drawer-close {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 4px;
}
.drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  font: 600 16px "Saira", sans-serif;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.drawer-link:active,
.drawer-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

.drawer-cta {
  margin-top: auto;
  padding-top: 12px;
}
.drawer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration: none;
  color: #111;
  background: #fff;
  font-weight: 800;
  border: 2px solid #111;
}
.drawer-btn:hover {
  background: #111;
  color: #fff;
}

/* Backdrop (click to close) */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Open states (applied via JS to <body>) */
body.drawer-open .mobile-drawer {
  right: 0;
}
body.drawer-open .drawer-backdrop {
  opacity: 1;
}
body.drawer-open {
  overflow: hidden;
}

/* --------- Breakpoints: show hamburger, hide desktop links ---------- */
@media (max-width: 1024px) {
  .nav-toggle {
    display: inline-flex;
  }
  .nav-links,
  .nav-cta {
    display: none !important;
  } /* Hide desktop row */
}

/* =========================
   SCROLL INDICATOR (Hero Only + Precise Spacing)
   ========================= */
.scroll-indicator {
  display: none; /* hide by default on all sections */
}

#hero .scroll-indicator {
  display: block; /* show only inside the hero section */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 110px; /* slightly higher (closer to Start Scanning) */
  z-index: 20;
}

/* Mobile/tablet spacing */
@media (max-width: 1024px) {
  #hero .scroll-indicator {
    bottom: 100px; /* adjust for tablets */
  }
}

@media (max-width: 640px) {
  #hero .scroll-indicator {
    bottom: 95px; /* perfect balance on smaller phones */
  }
}

/* === HERO: kill side padding only inside hero on mobile === */
@media (max-width: 768px){
  .hero .container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* keep a little breathing room for the text/buttons */
  .hero .container .content{
    padding-left: 16px;
    padding-right: 16px;
  }
  /* make sure the video truly fills the hero */
  .hero .bg-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* === ABOUT cards: keep tidy and remove diagonal sweep on phones === */
@media (max-width: 640px){
  .why-us .container .content .reason .card{
    height: auto;            /* content defines height */
    overflow: visible;       /* avoid cropping */
    padding: 1.4rem 1rem;
  }
  .why-us .container .content .reason .card hr{
    display: none;           /* hide the sweeping line on phones */
  }
}


/* =========================================================
        SLIDER — one layout, scales down, no cropping
   ========================================================= */

/* Slide frame */
.slide{
  position: relative;
  overflow: hidden;
  min-height: 72vh; /* desktop */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s ease, transform .15s ease;
}

/* The image box owns the height; the image fits inside */
.image-border{
  width: 100%;
  height: 72vh;      /* match .slide */
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;  /* “letterbox” fill around image when needed */
}
.image-border img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;     /* ← key: show the whole image (no crop) */
  object-position: center;
}

/* Readability gradient behind the text */
.slide::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.75) 100%);
  z-index: 0;
}

/* Centered overlay text */
.slide-content{
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 0 20px;
  max-width: 900px;
  width: 100%;
}

/* Scalable typography */
.slide-title{
  margin: 0 0 12px;
  font-weight: 800;
  font-size: clamp(22px, 5.4vw, 48px);
  line-height: 1.15;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000,
    -1px  1px 0 #000, 1px  1px 0 #000;
}
.slide-description{
  margin: 0 auto 12px;
  max-width: 800px;
  font-size: clamp(14px, 3.2vw, 18px);
  line-height: 1.7;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000,
    -1px  1px 0 #000, 1px  1px 0 #000;
}
.legal-note{
  font-size: clamp(10px, 2.5vw, 13px);
  opacity: .9;
}

/* Arrows & dots (unchanged) */
.nav-button{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  font-size: 24px;
  background: rgba(0,0,0,.18);
  border: 2px solid rgba(255,255,255,.35);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}
.prev{ left: 30px; }
.next{ right: 30px; }
.slide-indicators{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 24px; display: flex; gap: 20px; z-index: 10; }

/* ===== Phone / small tablets ===== */
@media (max-width: 640px){
  .slide{ min-height: 64vh; }
  .image-border{ height: 64vh; }     /* keep heights in sync */
  .slide-content{ padding: 0 14px; max-width: 92vw; }
  .nav-button{ width: 44px; height: 44px; font-size: 18px; }
  .slide-indicators{ bottom: 18px; gap: 10px; }
}

/* ===== Mid tablets ===== */
@media (min-width: 641px) and (max-width: 1024px){
  .slide{ min-height: 68vh; }
  .image-border{ height: 68vh; }
  .nav-button{ width: 50px; height: 50px; font-size: 20px; }
}

/* (Optional) If you ever want a slide to behave like a hero with crop:
   add class="slide cover" to that slide. */
.slide.cover .image-border img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* per-slide control */
.slide.no-overlay::before { background: none !important; }
.slide.light-overlay::before {
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.25) 100%) !important;
}
.slide.strong-overlay::before {
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.75) 100%) !important;
}

/* === MOBILE POLISH (safe to append) === */
@media (max-width: 640px){
  /* keep the composition bright enough on phones */
  .slide::before{
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%);
  }

  /* line-length & spacing */
  .slide-content{ 
    padding: 0 16px; 
    max-width: 28ch;            /* ~2 lines shorter = easier to read */
  }
  .slide-title{ 
    font-size: clamp(22px, 7vw, 28px);
    margin-bottom: 8px;
  }
  .slide-description{
    font-size: .95rem;
    line-height: 1.65;
    margin-bottom: 10px;
  }
  .legal-note{
    font-size: .74rem; 
    line-height: 1.45;
    opacity: .9;
  }

  /* keep arrows off the text a bit */
  .nav-button{
    top: 58%;                   /* was 50%; nudges below the title/para */
    width: 44px; height: 44px; font-size: 18px;
    background: rgba(0,0,0,.16);
    border-color: rgba(255,255,255,.35);
  }

  /* dots a touch closer to content */
  .slide-indicators{ bottom: 16px; gap: 10px; }
}

/* Optional: lighten overlay on tablets too */
@media (min-width: 641px) and (max-width: 1024px){
  .slide::before{
    background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.55) 100%);
  }
}

/* ========== FIX PHONE VIEW: text BELOW image ========== */
@media (max-width: 640px) {
  /* make slide stack vertically */
  .slide {
    display: flex;
    flex-direction: column;       /* image on top, text below */
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    padding: 0 0 30px;
    overflow: visible;
  }

  /* remove the dark overlay layer */
  .slide::before {
    display: none;
  }

  /* image full width on phone */
  .image-border {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border: none;
    padding: 0;
    background: none;
  }

  .image-border img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* logo slide: always visible full logo */
  .slide.logo-slide .image-border img {
    object-fit: contain;
    height: auto;
  }

  /* text block below the image */
  .slide-content {
    position: relative;
    transform: none;
    top: auto; left: auto;
    text-align: center;
    max-width: 92%;
    margin-top: 5px;       /* was 15px — tighter spacing */
    margin-bottom: 18px;   /* optional, adds a bit of bottom gap */
    padding: 12px 14px 16px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 16px;
    backdrop-filter: blur(2px);
  }

  .slide-title {
    font-size: clamp(22px, 6vw, 28px);
    margin-bottom: 8px;
    line-height: 1.25;
  }

  .slide-description {
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.65;
    margin-bottom: 10px;
  }

  .legal-note {
    font-size: 12px;
    opacity: 0.9;
  }

  /* reposition arrows to center vertically relative to image */
  .nav-button {
    top: 40%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .slide-indicators {
    bottom: 14px;
  }
}