/* Page background image */
body {
  background: url('textures/right.png') no-repeat center center fixed;
  background-size: cover;
  overflow-x: hidden;
  width: 100%;
}

html { scroll-behavior: smooth; }
/* Fixed left sidebar (hidden on small screens) */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh; /* ensure full viewport height */
  padding: 0 1rem;
  overflow-y: auto;
  border-right: 1px solid rgba(0,0,0,.1);
  background-color: transparent;
  z-index: 1;
  display: flex !important;
  flex-direction: column;
  justify-content: center; /* vertical center */
  align-items: flex-start; /* keep items left aligned */
}

/* Neutralize inner Bootstrap sticky helpers so outer .sidebar can center content */
.sidebar .position-sticky,
.sidebar .sticky-top,
.sidebar [style*="position: sticky"],
.sidebar [style*="position:sticky"] {
  position: static !important;
  top: auto !important;
}

.sidebar .nav { gap: .5rem; margin: 0 !important; padding: 0 !important; }

.sidebar > * { margin-block: 0 !important; }

/* Let Bootstrap container fill the content track instead of capping at its max width */
.sidebar {
  grid-column: 1;
}
.content {
  grid-column: 2;
  width: 100%;
  padding-top: 7.5vh;
  padding-bottom: 7.5vh;
}
/* container width will be handled below */

/* Grid layout: sidebar contributes to layout (20%/80%) */
.page-grid {
  display: grid;
  grid-template-columns: minmax(260px, 20%) 1fr;
  min-height: 100vh;
}

/* On small screens, hide sidebar and use single column */
@media (max-width: 991.98px) {
  .page-grid { grid-template-columns: 1fr; width: 100%;}
  .sidebar { display: none !important;}
  .content { grid-column: 1; padding: 0vh;}
  .seeProject {display: block; width: 100%; text-align: center;}
}
/* Extra spacing between sections and better anchor stop position */
.section-anchor { scroll-margin-top: 1rem; }

/* Sections take ~70% of viewport height */
.section-block { min-height: 70vh; }
/* Vertically center section content */
.section-block > .container { min-height: inherit;}
.section-block > .container {
    margin-left: auto;
    margin-right: auto;
  }
.section-block > .container { padding-left: 2rem; padding-right: 2rem; }
.section-block > .container > .row {
  min-height: inherit;
  display: flex;
  align-items: center;   /* vertical center */
  width: 100%;           /* no leftover space (the “purple” area) */
}
@media (min-width: 1200px) {
  .section-block > .container { padding-left: 4rem; padding-right: 4rem; }
}


/* When jumping to an anchor, keep the section centered (70vh section -> 15vh top margin) */
.section-anchor { scroll-margin-top: 15vh; scroll-margin-bottom: 15vh; }

/* Ensure sections/containers stay transparent over the page background */
.section-block,
.section-block .container {
  background: transparent !important;
}

/* Override any Bootstrap bg-* utilities applied on sections */
.section-block.bg-light,
.section-block [class*="bg-"] {
  background-color: transparent !important;
}

@media (max-width: 991.98px) {
  #sectionNav { display: none !important; }

}

/* ---- reveal on scroll (cols slide from sides) ---- */
.reveal-left,
.reveal-right {
  opacity: 0;
  transform: translateX(0);
  transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .9s ease-out;
  will-change: transform, opacity;
}
.reveal-left { transform: translateX(-120px); }
.reveal-right { transform: translateX(120px); }

.reveal-left.in-view,
.reveal-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* CTA button styles */
.cta {
  background-color: #1E90FF;
  color: #ffffff;
  border-radius: 50px;
  padding: 12px 24px;
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-weight: bolder;
  font-size: 1.5rem;
  cursor: pointer;
  text-decoration: none;
  border: 3px solid #1E90FF;
  margin-top: 10px;
}

.cta:hover {
  background-color: transparent;
  color: #1E90FF;
}

.video{
  width: 100%;
}

p {
    font-family: 'Nunito', sans-serif;
    color:white;
    font-size: 20px;
}

p1 {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color:white;
    font-size: clamp(1rem, 2.5vmin, 2.5rem);
    font-weight: lighter;
    line-height: 2rem;
}

.email{
  font-family: 'Orbitron', sans-serif;
  font-weight: bolder;
  font-size: clamp(1rem, 2.5vmin, 2.5rem);
  color: #1E90FF;
  text-decoration: none;
  margin: 0px;
  padding: 0px
}

.email:hover{
  color: #E8E8E8;
}


b{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color:white;
    font-size: clamp(1rem, 2.5vmin, 2.5rem);
    font-weight: 500;
}

.b1{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color:white;
    font-size: clamp(1rem, 2.5vmin, 2.5rem);
    font-weight: 800;
}

h1{
  font-family: 'Orbitron', sans-serif;
  font-weight: bolder;
  font-size: (36px, 8vw, 64px);
  color: white;
}

h2 {
    font-family: 'Orbitron', sans-serif;
    font-weight: bolder;
    font-size: 32px;
    color:white;
}

/* Disable reveal animations on mobile */
@media (max-width: 767.98px) {
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-left,
  .reveal-right {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===== Sidebar navigation (text-only) ===== */
/* Use Orbitron for the sidebar labels */

.container{
  width: 100%;
}

/* Sidebar container vertically centered - styles now consolidated above */

/* Stack nav items with comfortable spacing */
.sidebar .nav { gap: .5rem; }

/* Make nav links look like plain text (no pills/boxes) */
.sidebar .nav-link {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: .25rem 0 !important; /* minimal vertical rhythm */
  color: #fff !important; /* default white */
  text-decoration: none !important;
  box-shadow: none !important;
  font-weight: bold;
  font-size: clamp(1rem, 4.5vmin, 4.5rem);
  font-family: 'Orbitron', sans-serif;
}

/* Hover/Focus state */
.sidebar .nav-link:hover{
  color: #1E90FF !important; /* DodgerBlue */
}

/* Active state from JS */
.sidebar .nav-link.active,
.sidebar .nav-link[aria-current="page"] {
  color: #1E90FF !important;
}

/* Ensure sidebar remains transparent over page bg */
.sidebar { background: transparent !important; }

/* Mobile: sidebar hidden already via media query; no extra styles needed */


.planet{
    width: 100%;
    aspect-ratio: 1 / 1;   /* square canvas tied to width */
    height: auto;          /* ignore fixed heights */
    background: transparent;
    display: block;
}


.logo{
  width: 300px;
}

.spacer{
  height: clamp(20px, 4vh, 60px);
}

.seeProject {
  font-family: 'Orbitron', sans-serif;
  font-weight: bold;
  color: #000;
  background: #007bff;
  border: 2px solid #007bff;
  border-radius: 100px;
  font-size: 1.16rem;
  padding: 12px 28px;
  cursor: pointer;
  letter-spacing: 0.04em;
  box-shadow: none;
  outline: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  align-self: flex-end;
  text-decoration: none;
  position: relative;
  align-self: flex-start;
  display: inline-block;
}
.seeProject:hover,
.seeProject:focus {
  background: transparent;
  color: #007bff;
  border-color: #007bff;
}

@media (max-width: 575.98px) {
  .section-block > .container { padding-left: 0; padding-right: 0; }
  .section-block > .container > .row { margin-left: 0; margin-right: 0; }
  .logo{
    width: 100%;
  }
}