/* HEADER (Topline = Header) */
    .topline {
      position: fixed;
      top: 0;
      left: 0;
      width: calc(100% - 80px);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      background-color: #ffffff;
      padding: 15px 40px;
      z-index: 100;
      background: linear-gradient(120deg, #ffffff00, #ffffff);
    }

    .toplinenavbar a {
      margin-left: 25px;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.95rem;
      color: #404041;
      transition: 0.3s;
      position: relative;
    }

    .toplinenavbar a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, #ffffff, #60efff);
      transition: width 0.3s ease;
      border-radius: 2px;
    }

    .toplinenavbar a:hover {
      color: #60efff;
    }

    .toplinenavbar a:hover::after {
      width: 100%;
    }

    /* HERO */
    .hero-header-wide {
      position: relative;
      height: 95vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      background: linear-gradient(180deg, #ffffff,#ffffff, #ffffff);
      overflow: hidden;
    }

    /* Midline centered in remaining space */
    .hero-header-wide .midline {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .midline .logo {
      width: 65vw;
      animation: fadeInUp 1.5s ease forwards;
      margin-top: 80px; /* offset for header height */
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .topline {
        padding: 15px 20px;
        width: calc(100% - 40px);
      }

      .toplinenavbar a {
        margin-left: 16px;
        font-size: 0.9rem;
      }

      .midline .logo {
        width: 75vw;
      }
    }

    @media (max-width: 580px) {
      .hero-header-wide {
      position: relative;
      height: 90vh;
    }

      .topline {
        padding: 15px 15px;
        width: calc(100% - 30px);
      }
       .toplinenavbar a {
        margin-left: 8px;
        font-size: 0.8rem;
      }

      .midline .logo {
        width: 85vw;
        margin-top: -20px;
      }
    }

    
    @media (max-width: 460px) {
      .topline {
        padding: 15px 15px;
        width: calc(100% - 30px);
      }
       .toplinenavbar a {
        margin-left: 6px;
        font-size: 0.6rem;
      }

      .midline .logo {
        width: 85vw;
      }
    }