body {
      background-image: url('background.jpg');
      background-size: cover;
      background-attachment: fixed;
      background-position: center center;
      
      color: #f8f9fa;
      font-family: 'Open Sans', sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    /* Subtle moving stars background */
    body::before {
      content: "";
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: url("https://www.transparenttextures.com/patterns/stardust.png");
      opacity: 0.2;
      animation: moveStars 60s linear infinite;
      z-index: -1;
    }
    
    @keyframes moveStars {
      from { background-position: 0 0; }
      to { background-position: 10000px 10000px; }
    }
    
    header {
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(5px);
      text-align: center;
      padding: 20px 0;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    header h1 {
      font-family: 'Orbitron', sans-serif;
      font-size: 2.5rem;
      letter-spacing: 2px;
      color: #00d4ff;
      text-shadow: 0 0 12px #00d4ff;
    }
    
    .interactive-img {
      transition: transform 0.2s ease-out;
      will-change: transform;
      cursor: pointer;
    }

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

    .hero {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      padding: 60px 20px;
    }
    
    .hero h2 {
      font-family: 'Orbitron', sans-serif;
      font-size: 3rem;
      font-weight: 700;
      color: #fff;
      text-shadow: 0 0 25px #007bff;
    }

    .hero p {
      color: #d1d1d1;
      font-size: 1.2rem;
      max-width: 700px;
      margin: 20px auto;
      text-shadow: 0 0 10px #00bcd4;
    }

    .btn-glow {
      background-color: #00bcd4;
      border: none;
      border-radius: 50px;
      padding: 14px 32px;
      font-size: 1.1rem;
      color: #fff;
      box-shadow: 0 0 15px #00bcd4;
      transition: all 0.3s ease;
    }
    
    .btn-glow:hover {
      box-shadow: 0 0 30px #00eaff;
      background-color: #00eaff;
      color: #111;
    }
    
    footer {
      background: rgba(0, 0, 0, 0.5);
      text-align: center;
      padding: 15px 0;
      color: #aaa;
      font-size: 0.9rem;
      border-top: 1px solid rgba(255,255,255,0.1);
    }

    .text-glow {
      color: #00eaff;
      text-shadow: 0 0 10px #00eaff, 0 0 20px #007bff;
      font-family: 'Orbitron', sans-serif;
    }
    
    .navbar {
      background: rgba(0, 0, 20, 0.75);
      backdrop-filter: blur(6px);
    }
    
    .navbar-brand img {
      transition: transform 0.3s ease;
    }
    
    .navbar-brand img:hover {
      transform: rotate(10deg) scale(1.1);
    }
    
    .nav-link {
      color: #b0e0ff !important;
      transition: color 0.2s ease;
    }
    
    .nav-link:hover {
      color: #00eaff !important;
      text-shadow: 0 0 8px #00eaff;
    }
  
  /* Section centers the swiper vertically and horizontally */
  #featured-gallery {
    min-height: 100vh; /* full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #0a0a0a 60%, #000);
    text-align: center;
    position: relative;
    overflow: hidden;
    
  }

  .gallery-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  /* Swiper styling */
  .mySwiper {
    width: 80%;
    max-width: 900px;
    height: 500px;
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.15);
  }

  /* Center each image */
  .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }

  .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s ease;
  }

  .swiper-slide:hover img {
    transform: scale(1.02);
  }

  /* Soft background glow overlay */
  #swiper-glow {
    filter: blur(120px);
    opacity: 0.4;
    transition: background-color 0.6s ease;
    pointer-events: none;
  }


  .apod-section img {
    max-width: 90%;
    height: auto;
    transition: transform 0.3s ease;
  }
  .apod-section img:hover {
    transform: scale(1.025);
  }

  .favorite-star {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
    z-index: 10;
  }
  
  .favorite-star:hover {
    color: gold;
    transform: scale(1.1);
  }