body {font-family: 'Open Sans', sans-serif;}

:root {
    --gold-color: rgb(105, 91, 11);
    --brown-color: brown;
}


body {
  background-image: url("../images/Background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


/* Fixed star background on the sticky navbar so it stays put while scrolling.
   Uses the SAME image + background-attachment: fixed as the body, so the stars
   line up with the page behind it and never move, and content no longer shows
   through the navbar as you scroll. */
.navbar.sticky-top {
  background-image: url("../images/Background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


/* Compact navbar: trim vertical padding and cap the logo height so the bar
   is slimmer. Adjust the 42px logo height to taste. */
.navbar.sticky-top {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.navbar-brand img {
  height: 42px;   /* overrides the inline width=150; keeps the aspect ratio */
  width: auto;
}


.navbar-nav .nav-link {
    color: rgb(186, 201, 243) !important;
    font-size: 18px; /* Adjust this value as needed */
}


.nav-link:hover {
    color: #e0dd31 !important;
}


.nav-link.btn-outline-light:hover {
    background-color: rgb(1, 6, 58) !important;
    color: #e0dd31 !important;
    border-color: black !important;
}

.navbar-toggler-icon {
  filter: invert(78%) sepia(60%) saturate(400%) hue-rotate(10deg);
}


.header_X h1 {
    margin-bottom: 2rem;
}

.btn-gold {
    background-color: var(--gold-color) !important;
    border-color: var(--gold-color) !important;
}

.btn-brown {
    background-color: var(--brown-color) !important;
    border-color: var(--brown-color) !important;
}

/* ---- Responsive carousel: uniform height, whole image (never cropped) ---- */
.carousel-item {
    height: 500px;
    background: #0a1a3a;   /* fills the space beside portrait photos */
}
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* same height for every slide, no cropping */
    display: block;
}

/* Caption visible on ALL screen sizes. Bootstrap hides .carousel-caption below
   768px and its rules load after this file, so we use a higher-specificity
   selector (.carousel .carousel-caption) + !important to reliably win. */
.carousel .carousel-caption {
    display: block !important;
    background: rgba(10, 20, 45, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 10px 18px;
    right: 8%;
    left: 8%;
    bottom: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.carousel .carousel-caption h5 {
    font-weight: 600;
    letter-spacing: .3px;
    margin-bottom: 0;
}

/* Smooth fade-up each time a slide becomes active */
.carousel-item.active .carousel-caption {
    animation: captionFadeUp .7s ease both;
}
@keyframes captionFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1000px) {

  .header_X .image-hero {
    display: flex;
    justify-content: center;
  }
}


/* ============ AI app pages: glass UI over the starfield ============ */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  color: #fff;
}

.dropzone {
  border: 2px dashed rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  padding: 44px 20px;
  text-align: center;
  cursor: pointer;
  color: #fff;
  transition: border-color .2s, background .2s;
}

.dropzone:hover,
.dropzone.dragover {
  border-color: #e0dd31;
  background: rgba(255, 255, 255, 0.06);
}

.btn-gold-lg {
  background: linear-gradient(135deg, #c9a635, #6b5b0b);
  border: none;
  color: #fff !important;
  padding: 12px 32px;
  border-radius: 999px;
  font-weight: 600;
  transition: transform .15s, box-shadow .15s;
}

.btn-gold-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  color: #fff !important;
}

.brand-chip {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .85rem;
  margin: 3px;
}

.count-badge {
  display: inline-block;
  background: linear-gradient(135deg, #c9a635, #6b5b0b);
  color: #fff;
  font-weight: 700;
  padding: 8px 22px;
  border-radius: 999px;
  font-size: 1.05rem;
}

.count-badge span {
  font-size: 1.4rem;
}

/* Highlighted (featured) box */
.pub-highlight {
  border: 2px solid rgba(201, 166, 53, 0.65);
  box-shadow: 0 0 22px rgba(201, 166, 53, 0.28);
}

/* Channel showcase header */
.channel-banner {
  width: 100%;
  max-height: 230px;
  object-fit: cover;
  display: block;
}
.channel-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .35);
  object-fit: cover;
  margin-top: -52px;
  background: #0b1b3a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
@media (max-width: 575px) {
  .channel-avatar { width: 72px; height: 72px; margin-top: -40px; }
}

/* Video cards (Projects & Media) */
.video-card { transition: transform .15s, box-shadow .15s; }
a:hover .video-card { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
.play-badge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6); opacity: .85;
}
a:hover .play-badge { opacity: 1; color: #fff; }

/* +/- toggle for collapsible boxes */
.collapse-toggle .icon-minus { display: none; }
.collapse-toggle:not(.collapsed) .icon-plus { display: none; }
.collapse-toggle:not(.collapsed) .icon-minus { display: inline; }
.collapse-toggle:focus { box-shadow: none; }

/* Gold circular badge for the +/- toggle */
.toggle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0dd31, #6b5b0b);
  color: #fff;
  font-size: 1.3rem;
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  transition: transform .15s;
}
.collapse-toggle:hover .toggle-badge { transform: scale(1.12); }
.collapse-toggle.collapsed .toggle-badge { animation: pulseGold 2s infinite; }
@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 221, 49, .55); }
  50%      { box-shadow: 0 0 0 10px rgba(224, 221, 49, 0); }
}


/* ================= Mobile optimizations ================= */
@media (max-width: 767.98px) {
  /* fixed backgrounds are janky on mobile browsers -> let them scroll */
  body,
  .navbar.sticky-top { background-attachment: scroll; }
}

@media (max-width: 575.98px) {
  /* scale big headings down on small phones */
  .display-3 { font-size: 2.3rem; }
  .display-4 { font-size: 1.9rem; }
  .display-5 { font-size: 1.6rem; }

  /* uniform, smaller carousel height on phones */
  .carousel-item { height: 420px; }

  /* tighter carousel captions over the photo */
  .carousel .carousel-caption { padding: 6px 10px; bottom: 6px; }
  .carousel .carousel-caption h5 { font-size: 1rem; margin-bottom: 0; }

  /* trim large vertical paddings so there is less scrolling */
  .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
}