/* Reset */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Arial, sans-serif;
      }

      html {
        scroll-behavior: smooth;
      }

      .page {
        position: relative;
      }

      /* Base layout */
      body {
        background: #050b23;
        color: #ffffff;
        display: flex;
        justify-content: center;
        overflow-x: hidden;
      }

      /* Page container */
      .page {
        width: 100%;
        max-width: 1440px;
      }

      /* Header */
      .header {
        display: flex;
        position: absolute;
        align-items: center;
        width: 95%;
        z-index: 10;
        padding: 20px 24px;
        justify-content: space-between;
      }

      .header nav a {
        color: #aaa;
        text-decoration: none;
        font-size: 18px;
        padding: 10px 14px;
        border-radius: 10px;
        display: inline-block;
        text-transform: uppercase;
      }

      .header nav a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
      }

      /* Neon logo text */
      .neon-text {
        --stroke-width: 4px;

        font-family: "Pacifico", cursive;
        text-transform: uppercase;
        font-size: clamp(26px, 6vw, 72px);

        color: #ffb3ef;
        -webkit-text-stroke: var(--stroke-width) #ff6fe0;

        text-shadow:
          0 0 40px rgba(255, 79, 216, 0.85),
          0 0 40px rgba(255, 79, 216, 0.85),
          0 0 40px rgba(255, 79, 216, 0.85);

        position: relative;
        display: inline-block;
        max-width: 100%;
        white-space: nowrap;
      }

      .neon-text::after {
        content: attr(data-text);
        z-index: -1;
        position: absolute;
        top: -5%;
        left: -0.5%;
        color: transparent;
        -webkit-text-stroke: var(--stroke-width) rgba(80, 0, 60, 0.9);
      }

      /* Hero section */
      .hero {
        min-height: 100vh;
        padding: 60px 200px;
        text-align: center;
        position: relative;

        background-image: url("./images/front-page-pic.jpeg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(5, 11, 35, 0.7);
        z-index: 0;
      }

      .hero h1,
      .hero h2,
      .hero p {
        position: relative;
        z-index: 1;
        top: 10rem;
      }

      .hero h1 {
        font-size: 36px;
      }

      .hero h2 {
        font-size: 18px;
        color: #9fdfff;
        margin: 10px 0 20px;
      }

      .hero p {
        font-size: 14px;
        line-height: 1.7;
        color: #cfd8ff;
        width: 600px;
        margin: 0 auto;
      }

      /* Main content width */
      .cards,
      .cta {
        max-width: 1120px;
        margin: 0 auto;
      }

      /* Cards section */
      .cards {
        display: flex;
        gap: 60px;
        padding: 200px 0 50px;
        text-align: center;
      }

      .card {
        width: 100%;
      }

      .card img {
        width: 80%;
        height: 400px;
        object-fit: cover;
        margin-bottom: 20px;
        outline: black;
        outline-offset: -4px;
        outline-width: 5px;
        outline-style: solid;
        border-radius: 18px;
      }

      .card h3 {
        font-size: 20px;
        text-align: center;
        margin-bottom: 10px;
      }

      .card h4 {
        font-size: 14px;
        color: #9fdfff;
        margin: 10px 0 15px;
        text-align: center;
      }

      .card p {
        font-size: 13px;
        line-height: 1.8;
        margin-bottom: 20px;
        margin: 0 auto 20px;
        width: 50%;
        text-align: center;
      }

      /* Primary button */
      .btn {
        display: inline-block;
        padding: 10px 30px;
        background: #27c1d9;
        color: #002c36;
        text-decoration: none;
        font-size: 13px;
        transition: all 0.25s ease;
        border: 4px solid #3079cd;
        border-radius: 10px;
      }

      .btn:hover {
        background: #1aa3b8;
        color: #fff;
        transform: translateY(-2px);
      }

      /* Call-to-action section */
      .cta {
        display: flex;
        align-items: center;
        gap: 80px;
        padding: 200px 0;
      }
      .cta-video {
        border-radius: 12px;
        outline: rgb(177, 177, 177);
        outline-offset: -4px;
        outline-width: 5px;
        outline-style: solid;
        flex-shrink: 0;
      }
      .cta-text {
        flex: 1;
        min-width: 0;
      }

      .cta-text h2 {
        font-size: 28px;
      }

      .cta-text h4 {
        font-size: 14px;
        color: #9fdfff;
        margin: 10px 0 20px;
      }

      .cta-text p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 30px;
      }

      /* Gallery */
      .gallery {
        padding: 100px 160px;
        text-align: center;
      }

      .gallery h2 {
        font-size: 32px;
        margin-bottom: 50px;
        font-weight: 700;
      }

      .gallery-container {
        display: flex;
        align-items: center;
        gap: 20px;
        position: relative;
      }

      .gallery-track {
        flex: 1;
        overflow: hidden;
        border-radius: 12px;
      }

      .gallery-grid {
        display: flex;
        gap: 30px;
        transition: transform 0.4s ease;
      }

      .gallery-item {
        min-width: 370px;
        max-width: 370px;
        width: 370px;
        height: 370px;
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        flex-shrink: 0;
      }

      .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: #1a2847;
        transition: transform 0.3s ease;
      }

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

      .gallery-btn {
        background: #27c1d9;
        color: #002c36;
        border: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        flex-shrink: 0;
      }

      .gallery-btn:hover {
        background: #1aa3b8;
        color: #fff;
        transform: scale(1.1);
      }

      .gallery-btn:active {
        transform: scale(0.95);
      }

      /* Lightbox Modal */
      .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.95);
        z-index: 1000;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
      }

      .modal-content {
        position: relative;
        max-width: 90%;
        max-height: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }

      .modal-image-container {
        max-width: 100%;
        max-height: 70vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
      }

      #modalImage {
        max-width: 100%;
        max-height: 70vh;
        object-fit: contain;
        transition: transform 0.2s ease;
      }

      .modal-close {
        position: absolute;
        top: 20px;
        right: 30px;
        color: #ffffff;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
        transition: color 0.3s ease;
        z-index: 1001;
      }

      .modal-close:hover {
        color: #27c1d9;
      }

      .modal-controls {
        display: flex;
        gap: 15px;
        justify-content: center;
        flex-wrap: wrap;
      }

      .modal-btn {
        background: #27c1d9;
        color: #002c36;
        border: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 600;
      }

      .modal-btn:hover {
        background: #1aa3b8;
        color: #fff;
        transform: translateY(-2px);
      }

      .modal-btn:active {
        transform: translateY(0);
      }

      /* Footer */
      .footer {
        background: #0f172a;
        padding: 60px 160px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        color: rgba(255, 255, 255, 0.75);
        text-align: left;
      }

      .footer p {
        margin: 0;
        font-size: 13px;
        line-height: 1.7;
        max-width: 460px;
        font-family: "Roboto Slab", serif;
      }

      .footer strong {
        color: rgba(255, 255, 255, 0.95);
        font-weight: 600;
      }

      .footer-button {
        align-self: flex-start;
        display: block;
        padding: 10px 0;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 13px;
        text-align: left;
        transition:
          color 0.2s ease,
          transform 0.2s ease;
        cursor: pointer;
      }

      .footer-button:hover {
        color: rgba(255, 255, 255, 0.9);
        transform: translateY(-2px);
      }

      /* Responsive (mobile) */
      @media (max-width: 768px) {
        body {
          justify-content: center;
          text-align: center;
        }

        .page {
          padding: 0 12px;
        }

        /* HEADER*/
        .header {
          top: 0;
          left: 0;
          width: 100%;
          padding: 14px 12px;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          gap: 10px;
          text-align: left;
        }

        .neon-text {
          --stroke-width: 2px;
          font-size: 22px;
          white-space: normal;
          line-height: 1.1;
        }

        .header nav {
          display: flex;
          gap: 8px;
        }

        .header nav a {
          margin-left: 0;
          font-size: 14px;
          padding: 8px 10px;
        }

        /* HERO */
        .hero {
          padding: 90px 12px 24px;
          min-height: auto;
        }

        .hero h1,
        .hero h2,
        .hero p {
          top: 0;
        }

        .hero h1 {
          font-size: 24px;
        }

        .hero h2 {
          font-size: 14px;
          margin: 8px 0 12px;
        }

        .hero p {
          width: 100%;
          max-width: 520px;
          font-size: 14px;
        }

        /* CARDS */
        .cards {
          flex-direction: column;
          padding: 24px 0 20px; 
          gap: 24px;
          max-width: 100%;
          margin: 0 auto;
          align-items: center;
          text-align: center;
        }

        .card img {
          width: 100%;
          height: 200px;
        }

        .card p {
          width: 100%;
          max-width: 520px;
        }

        /* GALLERY */
        .gallery {
          padding: 60px 12px;
        }

        .gallery h2 {
          font-size: 24px;
          margin-bottom: 30px;
        }

        .gallery-container {
          gap: 12px;
        }

        .gallery-item {
          min-width: 280px;
          max-width: 280px;
          width: 280px;
          height: 280px;
        }

        .gallery-btn {
          width: 40px;
          height: 40px;
          font-size: 18px;
        }

        /* CTA */
        .cta {
          flex-direction: column;
          padding: 40px 0;
          gap: 20px;
          max-width: 100%;
          margin: 0 auto;
          align-items: center;
          text-align: center;
        }

        .cta-video {
          width: 100%;
          max-width: 520px;
          height: 200px;
        }

        /* Modal for mobile */
        .modal-content {
          max-width: 95%;
          max-height: 90%;
        }

        .modal-image-container {
          max-height: 60vh;
        }

        #modalImage {
          max-height: 60vh;
        }

        .modal-close {
          top: 10px;
          right: 15px;
          font-size: 30px;
        }

        .modal-btn {
          padding: 10px 16px;
          font-size: 12px;
        }

        /* FOOTER*/
        .footer {
          padding: 40px 12px;
          text-align: center;
          align-items: center;
        }

        .footer p {
          max-width: 100%;
        }

        .footer-button {
          align-self: center;
          text-align: center;
        }
      }