:root{
      --brand:#E71F1F;
      --topbar-h:42px; 
      --navbar-h:64px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: Arial, Helvetica, sans-serif;
      padding-top: calc(var(--topbar-h) + var(--navbar-h));
    }
    body.no-scroll{ overflow: hidden; }

    /* ---- Top Bar ---- */
    
    /* ---- Navbar ---- */
    .navbar{
      position:fixed; top: var(--topbar-h); left:0; right:0;
      height: var(--navbar-h);
      background:#fff; color:var(--brand);
      display:flex; align-items:center; justify-content:space-between;
      padding: 0 clamp(18px, 4vw, 30px);
      box-shadow: 0 2px 5px rgba(0,0,0,.08);
      z-index:1200;
    }

    

    .logo img{ height:55px; width:auto; display:block; }

    .hamburger{
        display: none;}

    .menu{ display:flex; align-items:center; gap:18px; }
    .menu a{
      color:var(--brand); text-decoration:none;
      font-size:15px; font-weight:550;
      padding:8px 16px;
      border-radius:999px;
      transition: background .25s, color .25s;
    }
    .menu a:hover,
    .menu a.active{ background:var(--brand); color:#fff; }

    /* ---- Hamburger ---- */
    .hamburger{
      display:none;
      width:40px; height:40px;
      border:2px solid var(--brand);
      border-radius:8px;
      padding:6px;
      cursor:pointer;
      align-items:center; justify-content:center;
      background-color: #fff;
    }

   
    .hamburger .bar,
    .hamburger .bar::before,
    .hamburger .bar::after{
      content:""; display:block;
      width:22px; height:2px;
      background:var(--brand);
      border-radius:2px;
      transition: all .4s ease;
      position:relative;
    }
    .hamburger .bar::before{ position:absolute; top:-7px; }
    .hamburger .bar::after{ position:absolute; top:7px; }

    /* ---- Mobile Overlay ---- */
    .mobile-menu{
      position:fixed; inset:0;
      background: linear-gradient(
    90deg,
    rgba(0, 150, 255, 0.7),   /* 70% opacity */
    rgba(64, 224, 208, 0.7)   /* 70% opacity */
  );  /* semi-transparent red */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      display:flex; flex-direction:column; align-items:center;
      padding-top:100px;
      opacity:0; transform: translateY(-100%);
      pointer-events:none;
      transition: opacity .45s ease, transform .45s ease;
      overflow-y:auto;
      z-index:1250;
    }
    .mobile-menu.show{ opacity:1; transform:translateY(0); pointer-events:auto; }

    .mobile-menu .menu-list{
      width:100%; max-width:500px;
      display:flex; flex-direction:column; align-items:center;
    }
    .mobile-menu .menu-list a{
      color:#fff; text-decoration:none;
      font-size:21px; font-weight:700;
      padding:16px; text-align:center;
      border-bottom:1px solid rgba(255,255,255,.3);
      opacity:0; transform:translateY(15px);
      animation: fadeUp .5s ease forwards;
    }
    .mobile-menu .menu-list a:last-child{ border-bottom:none; }
    .mobile-menu.show .menu-list a:nth-child(1){ animation-delay:.1s; }
    .mobile-menu.show .menu-list a:nth-child(2){ animation-delay:.2s; }
    .mobile-menu.show .menu-list a:nth-child(3){ animation-delay:.3s; }
    .mobile-menu.show .menu-list a:nth-child(4){ animation-delay:.4s; }
    .mobile-menu.show .menu-list a:nth-child(5){ animation-delay:.5s; }
    .mobile-menu.show .menu-list a:nth-child(6){ animation-delay:.6s; }
    .mobile-menu.show .menu-list a:nth-child(7){ animation-delay:.7s; }
    .mobile-menu.show .menu-list a:nth-child(8){ animation-delay:.8s; }
    .mobile-menu.show .menu-list a:nth-child(9){ animation-delay:.9s; }

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

    /* ---- Close Button ---- */
    .close-btn{
      position:absolute;
      top:20px; right:20px;
      width:38px; height:38px;
      border-radius:50%;
      background:#fff;
      color:var(--brand);
      display:flex; align-items:center; justify-content:center;
      font-size:20px;
      cursor:pointer;
      opacity:0; transform:rotate(-180deg) scale(.5);
      transition: all .7s ease;
      z-index:1400;
    }
    .mobile-menu.show .close-btn{
      opacity:1; transform:rotate(0) scale(1);
    }
    .close-btn:hover{ background:var(--brand); color:#fff; }

    /* ---- Responsive ---- */
    @media(max-width:992px){
      .menu{ display:none; }
      .hamburger{ display:flex; }
    }

     .logo img{ height:48px; width:auto; display:block; }