html {
      scroll-behavior: smooth;
  }

  :root {
      --nav-text: #ffffff;
      --nav-muted: rgba(255, 255, 255, 0.7);
      --nav-accent: #00e5ff;
      --nav-bg-glass: rgba(0, 0, 0, 0.35);
  }


  body {
      color: white !important;
      font-family: 'Supreme', sans-serif;
  }

  h1 {
      font-family: 'Clash Display', sans-serif;
  }

  /* HERO */
  .hero {
      position: relative;
      height: 100vh;
      overflow: hidden;
  }

  /* VIDEO */
  .bg-video {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: translate(-50%, -50%);
      z-index: -2;
  }

  /* OVERLAY */
  .hero::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4));
      z-index: -1;
  }

  /* CONTENT */
  .glass-box {
      background: transparent;
      border-radius: 20px;
      padding: 40px;
      color: white;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
      max-width: auto;
      margin: auto;
  }

  .hero h1 {
      font-size: 3rem;
      font-weight: 600;
  }

  /* BUTTON */
  .btn-custom {
      background: #ff4d5a;
      border: none;
      border-radius: 30px;
  }

  .btn-custom:hover {
      background: #ff1e3c;
  }

  /* SCROLL INDICATOR */
  .scroll-down {
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      color: white;
      opacity: 0.7;
      animation: bounce 2s infinite;
  }

  @keyframes bounce {

      0%,
      100% {
          transform: translate(-50%, 0);
      }

      50% {
          transform: translate(-50%, 10px);
      }
  }

  /* MOBILE FALLBACK */
  @media (max-width: 768px) {
      .bg-video {
          display: none;
      }

      .hero .glass-box {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;

      }

      .hero h1 {
          font-size: 2rem;
      }
  }

  /* ==========================
       NAVBAR BASE
    ========================== */
  .app-navbar {
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1000;
      background: transparent;
  }

  .app-navbar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 40px;
  }

  .app-brand {
      font-size: 22px;
      font-weight: 700;
      color: var(--nav-text);
      text-decoration: none;
      font-family: 'Clash Display', sans-serif;

  }

  .app-brand:hover {
      color: var(--nav-text);
  }

  /* ==========================
       NAV ITEMS
    ========================== */
  .app-nav {
      display: flex;
      gap: 40px;
      list-style: none;
      margin: 0;
      padding: 0;
  }

  .app-nav a {
      color: var(--nav-muted);
      text-decoration: none;
      font-size: 17px;
      display: flex;
      align-items: center;
      gap: 6px;
      position: relative;
      font-family: 'Supreme', sans-serif;
  }

  .app-nav a i {
      font-size: 18px;
      display: none;
  }

  .app-nav a:hover {
      color: var(--nav-text);
  }

  .app-nav a.active {
      color: var(--nav-text);
  }

  .app-nav a.active::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 100%;
      height: 2px;
      background: var(--nav-accent);
  }

  /* ==========================
       MOBILE BOTTOM TRANSPARENT NAV
    ========================== */
  @media (max-width: 768px) {
      .app-navbar {
          position: fixed;
          bottom: 0;
          top: auto;
          background: var(--nav-bg-glass);
          backdrop-filter: blur(10px);
      }

      .app-navbar-inner {
          padding: 10px 0;
          justify-content: center;
      }

      .app-brand {
          display: none;
      }

      .app-nav {
          width: 100%;
          justify-content: space-around;
          gap: 0;
      }

      .app-nav a {
          flex-direction: column;
          font-size: 12px;
      }

      .app-nav a i {
          font-size: 20px;
          display: block;
      }

      .app-nav a.active::after {
          display: none;
      }
  }

  #progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 0%;
      background: linear-gradient(90deg, #00c6ff, #0072ff);
      z-index: 9999;
  }

  .bg-video-global {
      position: fixed;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      object-fit: cover;
      transform: translate(-50%, -50%);
      z-index: -3;
      color: white;
  }

  .contact-section {
      background: #050505;
      color: #fff;
      padding: 100px 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      font-family: 'Supreme', sans-serif;

  }

  .contact-section h2 {
      font-size: 2.2rem;
      margin-bottom: 15px;
  }

  .contact-sub {
      opacity: 0.6;
      max-width: 500px;
      margin: auto;
      margin-bottom: 30px;
  }

  .contact-btn {
      display: inline-block;
      padding: 12px 28px;
      border: 1px solid #fff;
      border-radius: 30px;
      color: #fff;
      text-decoration: none;
      transition: 0.3s;
  }

  .contact-btn:hover {
      background: #fff;
      color: #000;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  }

  .footer {
      position: relative;
      background: #000;
      color: #fff;
      padding: 70px 20px 30px;
      overflow: hidden;
      font-family: 'Supreme', sans-serif;
      text-align: center;
  }

  /* Glow Background */
  .footer-glow {
      position: absolute;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%);
      top: -100px;
      left: -100px;
      filter: blur(80px);
  }

  /* Container */
  .footer-container {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 40px;
      z-index: 2;
  }

  /* BRAND */
  .footer-brand h2 {
      font-size: 26px;
      letter-spacing: 1px;
      font-family: 'Clash Display', sans-serif;
      font-weight: 600;
  }

  .footer-brand h2 span {
      color: #888;
  }

  .footer-brand p {
      color: #aaa;
      font-size: 15px;
      margin: 10px 0 20px;
  }

  /* CTA Button */
  .footer-cta {
      display: inline-block;
      padding: 10px 18px;
      border: 1px solid #fff;
      font-size: 20px;
      text-decoration: none;
      color: #fff;
      transition: 0.3s;
  }

  .footer-cta:hover {
      background: #fff;
      color: #000;
  }

  /* LINKS */
  .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;

  }

  .footer-links a {
      text-decoration: none;
      color: #bbb;
      font-size: 16px;
      position: relative;
      transition: 0.3s;
  }

  .footer-links a::after {
      content: "";
      position: absolute;
      width: 0%;
      height: 1px;
      background: #fff;
      left: 0;
      bottom: -4px;
      transition: 0.3s;
  }

  .footer-links a:hover {
      color: #fff;
  }

  .footer-links a:hover::after {
      width: 100%;
  }

  /* SOCIAL */
  .footer-social {
      display: flex;
      gap: 15px;
  }

  .footer-social a {
      color: #888;
      font-size: 22px;
      transition: 0.3s;
  }

  .footer-social a:hover {
      color: #fff;
      transform: translateY(-3px);
  }

  /* BOTTOM */
  .footer-bottom {
      margin-top: 50px;
      border-top: 1px solid #111;
      padding-top: 20px;
      text-align: center;
      font-size: 12px;
      color: #666;
  }

  /* DESKTOP */
  @media (min-width: 768px) {
      .footer-container {
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
      }

      .footer-links {
          justify-content: center;
      }
  }









  /* From Uiverse.io by doniaskima */
  .btn-17,
  .btn-17 *,
  .btn-17 :after,
  .btn-17 :before,
  .btn-17:after,
  .btn-17:before {
      border: 0 solid;
      box-sizing: border-box;
  }

  .btn-17 {
      -webkit-tap-highlight-color: transparent;
      -webkit-appearance: button;
      background-color: #000;
      background-image: none;
      color: #fff;
      cursor: pointer;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
      font-size: 100%;
      font-weight: 800;
      line-height: 1.5;
      margin: 0;
      -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
      padding: 0;
      text-transform: uppercase;
  }

  .btn-17:disabled {
      cursor: default;
  }

  .btn-17:-moz-focusring {
      outline: auto;
  }

  .btn-17 svg {
      display: block;
      vertical-align: middle;
  }

  .btn-17 [hidden] {
      display: none;
  }

  .btn-17 {
      border-radius: 99rem;
      border-width: 2px;
      padding: 0.8rem 3rem;
      z-index: 0;
  }

  .btn-17,
  .btn-17 .text-container {
      overflow: hidden;
      position: relative;
  }

  .btn-17 .text-container {
      display: block;
      mix-blend-mode: difference;
  }

  .btn-17 .text {
      display: block;
      position: relative;

  }

  .btn-17:hover .text {
      -webkit-animation: move-up-alternate 0.3s forwards;
      animation: move-up-alternate 0.3s forwards;
  }

  @-webkit-keyframes move-up-alternate {
      0% {
          transform: translateY(0);
      }

      50% {
          transform: translateY(80%);
      }

      51% {
          transform: translateY(-80%);
      }

      to {
          transform: translateY(0);
      }
  }

  @keyframes move-up-alternate {
      0% {
          transform: translateY(0);
      }

      50% {
          transform: translateY(80%);
      }

      51% {
          transform: translateY(-80%);
      }

      to {
          transform: translateY(0);
      }
  }

  .btn-17:after,
  .btn-17:before {
      --skew: 0.2;
      background: #fff;
      content: "";
      display: block;
      height: 102%;
      left: calc(-50% - 50% * var(--skew));
      pointer-events: none;
      position: absolute;
      top: -104%;
      transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0));
      transition: transform 0.2s ease;
      width: 100%;
  }

  .btn-17:after {
      --progress: 0%;
      left: calc(50% + 50% * var(--skew));
      top: 102%;
      z-index: -1;
  }

  .btn-17:hover:before {
      --progress: 100%;
  }

  .btn-17:hover:after {
      --progress: -102%;
  }












 :root {
     --bg: #0a0a0a;
     --card: rgba(255, 255, 255, 0.05);
     --border: rgba(255, 255, 255, 0.1);
     --text: #fff;
     --muted: #aaa;
 }


 /* SECTION */
 .contact-section {
     padding: 60px 15px;
 }

 /* TEXT */
 .title {
     font-size: clamp(1.8rem, 5vw, 2.5rem);
 }

 .subtitle {
     color: var(--muted);
 }

 /* GRID */
 .contact-wrapper {
     display: grid;
     gap: 20px;
 }

 /* CARDS */
 .contact-info,
 .contact-form {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 20px;
     backdrop-filter: blur(10px);
 }

 /* INFO */
 .info-item {
     display: flex;
     gap: 10px;
     padding: 12px;
     color: #ccc;
     text-decoration: none;
     border-radius: 8px;
 }

 .info-item:hover {
     background: rgba(255, 255, 255, 0.05);
     color: #fff;
 }

 .social-icons {
     margin-top: 15px;
     display: flex;
     gap: 12px;
 }

 /* FORM GRID */
 .form-grid {
     display: grid;
     gap: 20px;
 }

 /* INPUT GROUP */
 .form-group {
     position: relative;
 }

 .form-group.full {
     grid-column: 1/-1;
 }

 /* INPUTS */
 input,
 textarea {
     width: 100%;
     background: transparent;
     border: none;
     border-bottom: 1px solid #444;
     color: #fff;
     padding: 16px 0 12px;
     font-size: 16px;
 }

 /* LABEL */
 .form-group label {
     position: absolute;
     left: 0;
     top: 14px;
     font-size: 14px;
     color: var(--muted);
     transition: 0.25s;
     pointer-events: none;
 }

 /* FLOAT */
 input:focus+label,
 textarea:focus+label,
 input:valid+label,
 textarea:valid+label {
     top: -4px;
     font-size: 11px;
     color: #fff;
 }

 /* SELECT FIX (IMPORTANT) */
 .fixed-label {
     display: block;
     font-size: 12px;
     margin-bottom: 6px;
     color: var(--muted);
 }

 /* SELECT STYLE */
 select {
     width: 100%;
     background: #111;
     color: #fff;
     border: 1px solid #333;
     padding: 12px;
     border-radius: 6px;
     font-size: 15px;
     outline: none;
 }

 /* SELECT OPTIONS (works in most browsers) */
 select option {
     background: #111;
     color: #fff;
 }

 /* BUTTON */
 .btn-submit {
     background: #fff;
     color: #000;
     padding: 14px;
     border: none;
     border-radius: 8px;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 10px;
 }

 /* LOADER */
 .loader {
     width: 16px;
     height: 16px;
     border: 2px solid #000;
     border-top: 2px solid transparent;
     border-radius: 50%;
     display: none;
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     100% {
         transform: rotate(360deg);
     }
 }

 /* MODAL */
 .success-modal {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.8);
     display: none;
     justify-content: center;
     align-items: center;
 }

 .modal-box {
     background: #111;
     padding: 25px;
     border-radius: 12px;
     text-align: center;
 }

 /* RESPONSIVE */
 @media (min-width:768px) {
     .contact-wrapper {
         grid-template-columns: 1fr 2fr;
     }

     .form-grid {
         grid-template-columns: 1fr 1fr;
     }
 }