/* === TRANSLUCENT BLUE OVERLAY ACROSS THE PAGE === */
.page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    rgba(20, 40, 80, 0.35) 0%,   /* soft blue glow center */
    rgba(10, 20, 40, 0.7) 100%   /* darker blue edge */
  );
  z-index: 0;  /* sits above the galactic canvas but below all content */
  pointer-events: none; /* ensures links and scrolling work normally */
}


/* === FULLSCREEN BACKGROUND CANVAS === */
#galactic-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;   /* keeps it behind everything */
  /* display: block; */
}

/* === BASE STYLES === */
body {
  background: #121212;
  margin: 0;
  overflow-x: hidden;   /* hide horizontal */
  overflow-y: auto;     /* allow vertical scroll */
}

h1, h2, h3, h4, h5, h6, p, li, span, a {
  color: #fff;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes chill {
  from {opacity: 1;}
  to {opacity: 1;}
}

@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}




@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,400italic);

/* THEME COLORS */
$bgDark: #171b23;
$textDarkColor: #676a6c;
$textLightColor: #a0a5a8;
$headingColor: #eb4d5c; /* Spaceprobe red for section titles */

/* ====== GALACTIC BACKGROUND ====== */
#galactic-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: $bgDark;
}

/* ====== ABOUT PAGE ====== */
#about-main {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  color: $textDarkColor;
}

/* ---------- Jumbotron ---------- */
#about-main .jumbotron {
  /* width: 50%; */
  height: 530px;
  background: transparent; /* allow galactic canvas behind */
  position: relative;
  margin: 0;
  z-index: 2;
  border-radius: 0;
  overflow: hidden;
}

.jumbotron-inner{
  max-width: 50%;
  margin: 0 auto;
  text-align: center;
  position: center;
  z-index: 3;
}

#about-main  .jumbotron .jumbotron-inner .par {
  /* max-width: 50%; */
  margin: 0 auto;
  text-align: justify;
  position: relative;
  z-index: 3;
  margin-bottom: 15px;

}

#about-main .jumbotron .content-box h1 {
  color: white;
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 20px;
}

#about-main .jumbotron .content-box p {
  color: $textLightColor;
  font-size: 18px;
  margin-bottom: 15px;
}

/* ---------- Parallax Image Layers ---------- */
.img-layer-container {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.img-layer-container img {
  max-width: 95vw;
}

#team-image,
.img-1,
.img-2 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  will-change: top;
}

#team-image { z-index: 3; }
.img-1 { z-index: 2; }
.img-2 { z-index: 5; }

/* ---------- Story Sections ---------- */
.story-container {
  width: 100%;
  margin-top: 150px;
  position: relative;
  z-index: 2;
}

.story-container h3 {
  text-align: center;
  color: $headingColor;
  font-weight: 700;
}

.story-container p {
  font-size: 15px;
  margin-top: 20px;
  color: $textDarkColor;
}

.story-container ul {
  margin-top: 30px;
  list-style-image: url('https://apimatic.io/img/theme/aboutUs/bullet.svg');
}

.story-container li {
  line-height: 25px;
  padding-left: 5px;
  color: $textDarkColor;
}

.story-container .img-container {
  display: flex;
  justify-content: center;
}

.story-container .img-container img {
  margin: 50px auto;
}

/* ---------- Dividers ---------- */
.container-divider {
  margin: 100px auto;
  height: 1px;
  width: 60%;
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- Media Queries ---------- */
@media (max-width: 1401px) {
  #about-main .jumbotron { height: 595px !important; }
  #about-main .jumbotron .content-box h1 { font-size: 35px; }
}

@media (max-width: 815px) {
  .story-container { margin-top: 80px; }
}

@media (max-width: 640px) {
  #about-main .jumbotron { height: 400px !important; }
  .img-1, .img-2, #team-image { display: none; } /* disable parallax */
  .story-container p { font-size: 13px; }
}

@media (max-width: 400px) {
  #about-main .jumbotron .content-box h1 { font-size: 30px; }
  #about-main .jumbotron .content-box p { font-size: 14px; }
}

/* ====== ABOUT US - Two Column Modern Layout ====== */
#about-main {
  font-family: 'Nunito', sans-serif;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 100px 5%;
  color: #e0e0e0;
}

.about-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  margin: 120px auto;
  max-width: 1200px;
}

.about-section.alt {
  flex-direction: row-reverse;
}

.about-section .text-col {
  flex: 1;
}

.about-section .text-col h1,
.about-section .text-col h2 {
  color: #FFB200;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 25px;
}

.about-section .text-col h1 {
  font-size: 3rem;
}

.about-section .text-col h2 {
  font-size: 2.3rem;
}

.about-section .text-col p,
.about-section .text-col li {
  color: #E9E3DF;
  font-size: 1.15rem;
  line-height: 1.9;
  text-align: justify;
  margin-bottom: 15px;
}

.about-section .text-col ul {
  margin-top: 20px;
  padding-left: 20px;
}

.about-section .img-col {
  flex: 1;
  display: flex;
  justify-content: center;
}

.about-section .img-col img {
  width: 100%;
  max-width: 520px;
  border-radius: 18px;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.1);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.about-section .img-col img:hover {
  transform: scale(1.04);
  box-shadow: 0 0 35px rgba(255, 255, 255, 0.25);
}

/* ====== Responsive Design ====== */
@media (max-width: 1024px) {
  .about-section {
    flex-direction: column;
    text-align: center;
    gap: 50px;
  }

  .about-section.alt {
    flex-direction: column;
  }

  .about-section .text-col h1 {
    font-size: 2.6rem;
  }

  .about-section .text-col h2 {
    font-size: 2rem;
  }

  .about-section .text-col p,
  .about-section .text-col li {
    font-size: 1rem;
  }

  .about-section .img-col img {
    max-width: 90%;
  }
}

/* ====== HERO HEADER SECTION ====== */
.about-hero {
  min-height: 70vh; /* adaptive height */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  position: relative;
  z-index: 2;
  padding: 80px 8% 40px 8%;
  background: transparent;
  overflow: hidden;
  animation: fadeIn 1.8s ease-out both;
  font-family: 'Nunito', sans-serif;
}

.about-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, rgba(15,15,30,0.8) 0%, rgba(10,10,25,0.95) 100%);
  opacity: 0.3;
  z-index: -1;
}

.hero-content {
  max-width: 950px;
  animation: fadeIn 1.5s ease-out both;
}

/* === Text Styling === */
.hero-subtitle {
  font-size: 1.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #F0C93D; /* yellow-orchid accent */
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 0 0 20px rgba(240, 201, 61, 0.5);
}

.hero-title {
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.95);
  background: none;
  text-shadow:
    0 0 15px rgba(240, 201, 61, 0.6),
    0 0 35px rgba(240, 201, 61, 0.3);
  margin-bottom: 20px;
  transition: transform 0.4s ease;
}

.hero-title:hover {
  transform: scale(1.02);
}

.hero-quote {
  font-size: 1.25rem;
  color: #ffeaa7;
  max-width: 800px;
  line-height: 1.8;
  margin: 0 auto;
  opacity: 0.9;
  text-shadow:
    0 0 10px rgba(240, 201, 61, 0.4),
    0 0 20px rgba(240, 201, 61, 0.2);
}

/* === Smooth Fade Transition to About Section === */
.hero-fade {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom, rgba(10,10,25,0) 0%, rgba(10,10,25,1) 100%);
  z-index: 1;
  pointer-events: none;
}

/* === About Section (reduce spacing) === */
.story-container {
  margin-top: 60px;  /* tighter spacing */
  position: relative;
  z-index: 2;
}

/* Responsive Scaling */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 2.5rem;
  }
  .hero-quote {
    font-size: 1.1rem;
  }
}

@media (max-width: 640px) {
  .hero-title {
    font-size: 2rem;
  }
  .hero-subtitle {
    font-size: 1.2rem;
  }
  .hero-quote {
    font-size: 1rem;
  }
}


/* ======= RESPONSIVE MEDIA QUERIES ======= */

/* --- Large Tablets & Small Laptops --- */
@media (max-width: 1024px) {
  .two-column {
    gap: 40px;
    margin: 80px auto;
  }

  .text-block h3 {
    font-size: 1.8rem;
  }

  .text-block p,
  .text-block li {
    font-size: 1rem;
  }
}

/* --- Tablets & Large Phones --- */
@media (max-width: 768px) {
  .two-column {
    flex-direction: column;
    text-align: center;
    gap: 30px;
    margin: 60px auto;
  }

  .two-column.reverse {
    flex-direction: column;
  }

  .text-block {
    order: 1;
  }

  .image-block {
    order: 2;
  }

  .text-block h3 {
    font-size: 1.6rem;
  }

  .text-block p,
  .text-block li {
    font-size: 1rem;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .hero-quote {
    font-size: 1rem;
  }
}

/* --- Small Phones --- */
@media (max-width: 480px) {
  .two-column {
    margin: 40px auto;
    padding: 0 4%;
  }

  .text-block h3 {
    font-size: 1.4rem;
  }

  .text-block p,
  .text-block li {
    font-size: 0.95rem;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .hero-quote {
    font-size: 0.9rem;
  }
}


/* ===== GLASSMORPHIC SECTION STYLING ===== */
.two-column {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 80px 10%;
  position: relative;
  flex-wrap: wrap;
}

.two-column.reverse {
  flex-direction: row-reverse;
}

.text-block, .image-block {
  flex: 1 1 45%;
  z-index: 2;
}

/* ===== FINAL RESPONSIVE ADJUSTMENTS ===== */

/* --- Default two-column layout --- */
.two-column {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 80px 10%;
  position: relative;
  flex-wrap: wrap;
  z-index: 2;
}

.two-column.reverse {
  flex-direction: row-reverse;
}

/* --- Columns --- */
.text-block, .image-block {
  flex: 1 1 45%;
  z-index: 2;
}

.text-block h3 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #F0C93D; /* yellow–orchid accent */
  text-shadow: 0 0 20px rgba(240, 201, 61, 0.4);
  margin-bottom: 20px;
}

.text-block p,
.text-block li {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 15px;
  text-align: justify;
}

.image-block {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-block img {
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.12);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.image-block img:hover {
  transform: scale(1.03);
  box-shadow: 0 0 35px rgba(255, 255, 255, 0.25);
}

/* --- Divider between sections --- */
.container-divider {
  margin: 80px auto;
  height: 1px;
  width: 70%;
  background: rgba(255, 255, 255, 0.1);
}

/* ======= RESPONSIVE ======= */

/* Large tablets / small laptops */
@media (max-width: 1024px) {
  .two-column {
    gap: 40px;
    padding: 60px 6%;
  }

  .text-block h3 {
    font-size: 1.9rem;
  }

  .text-block p,
  .text-block li {
    font-size: 1rem;
  }

  .image-block img {
    max-width: 90%;
  }
}

/* Tablets and large phones */
@media (max-width: 768px) {
  .two-column {
    flex-direction: column;
    text-align: center;
    gap: 30px;
    padding: 60px 5%;
  }

  /* ensure text comes first */
  .two-column.reverse {
    flex-direction: column;
  }

  .text-block {
    order: 1;
  }

  .image-block {
    order: 2;
  }

  .text-block h3 {
    font-size: 1.7rem;
  }

  .text-block p,
  .text-block li {
    font-size: 1rem;
  }

  .image-block img {
    max-width: 95%;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .two-column {
    padding: 40px 4%;
    gap: 25px;
  }

  .text-block h3 {
    font-size: 1.5rem;
  }

  .text-block p,
  .text-block li {
    font-size: 0.95rem;
  }

  .image-block img {
    max-width: 100%;
  }
}