:root {
     --primary-orange: var(--mrn-orange-500, #ff7e00);
     --gradient-orange: var(--mrn-grad-orange, linear-gradient(90deg, #ff9900, #ff5e00));
     --gradient-text: linear-gradient(
         90deg,
         var(--mrn-orange-400, #fb923c),
         var(--mrn-orange-600, #ea580c),
         var(--mrn-navy-800, #1e1b4b)
     );
     --glass-bg: rgba(255, 247, 237, 0.55);
     --glass-border: rgba(255, 237, 213, 0.75);
     --glass-shadow: 0 10px 36px rgba(124, 45, 18, 0.10);
 }

 /* ThreeJS Canvas Background */
 #webgl-container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: -1;
     /* Keeps it behind the content */
     pointer-events: none;
     /* Allows clicking through the canvas */
 }

 /* UTILITY CLASSES FOR GLASSMORPHISM */
 .glass-effect {
     background: var(--glass-bg);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border: 1px solid var(--glass-border);
     box-shadow: var(--glass-shadow);
 }

 /* NAVBAR STYLES */
 .mrn-site-header {
     --primary-orange: var(--mrn-orange-500, #ff7e00);
     --gradient-orange: var(--mrn-grad-orange, linear-gradient(90deg, #ff9900, #ff5e00));
     --gradient-text: linear-gradient(
         90deg,
         var(--mrn-orange-400, #fb923c),
         var(--mrn-orange-600, #ea580c),
         var(--mrn-navy-800, #1e1b4b)
     );
     --glass-bg: rgba(255, 247, 237, 0.55);
     --glass-border: rgba(255, 237, 213, 0.75);
     --glass-shadow: 0 10px 36px rgba(124, 45, 18, 0.10);
     width: 100%;
     max-width: 1250px;
     margin: 30px auto 0px;
     padding: 15px 30px;
     border-radius: 50px;
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-items: center;
     align-self: stretch;
     position: relative;
     z-index: 10;
     transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, backdrop-filter 0.25s ease;
     will-change: transform;
 }

.mrn-site-header,
.mrn-site-header * {
    font-family: "Poppins", sans-serif;
}

 .mrn-header-spacer {
     height: 0;
 }

 .mrn-site-header.is-fixed {
     position: fixed;
     top: 0;
     left: 50%;
     transform: translate(-50%, 0);
     width: min(1250px, calc(100% - 24px));
     margin-top: 0;
     z-index: 999;
     animation: headerSlideDown 0.25s ease both;
     background: #ffffff;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
     box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 }

 @keyframes headerSlideDown {
     from {
         transform: translate(-50%, -120%);
     }
     to {
         transform: translate(-50%, 0);
     }
 }

 .mrn-site-header .logo {
   width: 80px;
   height:auto;
   display: block;
   text-decoration: none;
 }
 .mrn-site-header .logo img{
    width: 100%;
    height: auto;
 }
 .mrn-site-header .logo .mrn {
     color: var(--primary-orange);
 }

 .mrn-site-header .logo .digital {
     background: var(--gradient-text);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .mrn-site-header .nav-links {
     display: flex;
     list-style: none;
     gap: 25px;
 }

 .mrn-site-header .nav-links li a {
     text-decoration: none;
     color: #111;
     font-weight: 500;
     font-size: 15px;
     transition: 0.3s;
 }

 .mrn-site-header .nav-links li a:hover {
     color: var(--primary-orange);
 }

 .btn {
     padding: 12px 28px;
     border-radius: 30px;
     font-weight: 600;
     font-size: 15px;
     cursor: pointer;
     transition: all 0.3s ease;
     text-decoration: none;
 }

 .btn-primary {
     background: var(--gradient-orange);
     color: white;
     border: none;
     box-shadow: 0 4px 15px rgba(255, 94, 0, 0.4);
 }

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(255, 94, 0, 0.6);
 }

 .btn-secondary {
     background: transparent;
     color: var(--primary-orange);
     border: 2px solid var(--primary-orange);
 }

 .btn-secondary:hover {
     background: var(--primary-orange);
     color: white;
 }

 .mrn-site-header .hamburger {
     display: none;
     font-size: 28px;
     cursor: pointer;
     color: #333;
 }

   /* RESPONSIVE DESIGN (MOBILE VIEW) */
   @media (max-width: 900px) {
      .mrn-site-header {
        margin: 12px auto 0px;
        padding: 12px 16px;
        border-radius: 24px;
      }

      .mrn-site-header.is-fixed {
        transform: none;
        width: 100%;
        border-radius: 0 0 22px 22px;
      }

      .mrn-site-header .logo {
        width: 64px;
      }

      .mrn-site-header .nav-links {
        display: none;
        /* Hide links by default on mobile */
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        width: 100%;
        flex-direction: column;
        background: white;
        backdrop-filter: blur(20px);
        border-radius: 20px;
        padding: 20px 0;
        text-align: center;
        box-shadow: var(--glass-shadow);
        max-height: calc(100vh - 80px);
        overflow: auto;
        z-index: 1000;
      }

      .mrn-site-header .nav-links.active {
        display: flex;
      }

      .mrn-site-header .header-cta {
        display: none;
        /* Hide header button on mobile */
      }

      .mrn-site-header .hamburger {
        display: block;
        background: transparent;
        border: none;
        /* Show hamburger icon */
      }
    }