.elementor-15 .elementor-element.elementor-element-01c444f{--display:flex;--min-height:76px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-15 .elementor-element.elementor-element-01c444f:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-01c444f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-15 .elementor-element.elementor-element-c8ee920{width:100%;max-width:100%;}.elementor-15 .elementor-element.elementor-element-c8ee920.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-15 .elementor-element.elementor-element-c8ee920{width:var( --container-widget-width, 331.8px );max-width:331.8px;--container-widget-width:331.8px;--container-widget-flex-grow:0;}}/* Start custom CSS for container, class: .elementor-element-01c444f */<div class="elementor-eb-header-wrapper">
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

  <style>
    /* 1. Structural Fluid Reset */
    .elementor-eb-header-wrapper,
    .elementor-eb-header-wrapper .elementor-widget-container,
    .site-header {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* 2. Glassmorphic Background Blend */
    .site-header {
      background-color: rgba(255, 255, 255, 0.8) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.01) !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      position: relative;
      z-index: 9999;
    }

    .site-header.scrolled {
      background-color: rgba(255, 255, 255, 0.95) !important;
      border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
      box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.04) !important;
    }

    /* 3. Alignment Grid Protection */
    .header-container {
      width: 100% !important;
      max-width: 1200px !important;
      margin: 0 auto !important;
      padding: 0 24px !important;
      height: 76px !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
    }

    /* 4. Brand Logo Space */
    .logo-container {
      display: flex !important;
      align-items: center !important;
      text-decoration: none;
      z-index: 10001;
      flex-shrink: 0 !important;
    }

    .logo-icon {
      font-size: 24px;
      margin-right: 8px;
    }

    .logo-text {
      font-size: 22px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.5px;
    }

    .logo-text span {
      color: #2563eb;
    }

    /* 5. Desktop Navigation Menu */
    .nav-menu {
      display: flex !important;
      list-style: none !important;
      gap: 32px !important;
      align-items: center !important;
    }

    .nav-link {
      text-decoration: none;
      color: #1e293b !important;
      font-size: 15px !important;
      font-weight: 500 !important;
      transition: color 0.2s ease !important;
    }

    .nav-link:hover {
      color: #2563eb !important;
    }

    /* 6. Cohesive Button System */
    .header-actions {
      display: flex !important;
      align-items: center !important;
      gap: 16px !important;
      flex-shrink: 0 !important;
      z-index: 10001;
    }

    .btn {
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      padding: 10px 20px;
      border-radius: 10px;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
      display: inline-block !important;
    }

    .btn-login {
      color: #475569 !important;
    }

    .btn-login:hover {
      color: #0f172a !important;
    }

    .btn-cta {
      background-color: #2563eb !important;
      color: #ffffff !important;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2) !important;
    }

    .btn-cta:hover {
      background-color: #1d4ed8 !important;
      box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3) !important;
      transform: translateY(-1px) !important;
    }

    /* Hamburger Menu Icon */
    .mobile-menu-btn {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      z-index: 10001;
    }

    .mobile-menu-btn span {
      display: block;
      width: 24px;
      height: 2px;
      background-color: #0f172a;
      margin: 5px 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-menu-btn.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-btn.active span:nth-child(2) {
      opacity: 0;
    }

    .mobile-menu-btn.active span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }

    /* 7. Mobile View Layout & Space Adjustments */
    @media (max-width: 868px) {
      .mobile-menu-btn {
        display: block !important;
      }

      /* Hide desktop top-bar action buttons on mobile to avoid cropping */
      .header-actions {
        display: none !important;
      }

      /* Dynamic Slide-out Drawer */
      .nav-menu {
        position: fixed !important;
        top: 0;
        right: -100%;
        width: 100% !important;
        max-width: 300px !important;
        height: 100vh !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-left: 1px solid rgba(226, 232, 240, 0.8) !important;
        box-shadow: -10px 0 30px rgba(15, 23, 42, 0.05) !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding: 110px 30px 40px 30px !important;
        gap: 12px !important;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .nav-menu.active {
        right: 0 !important;
      }

      .nav-link {
        font-size: 18px !important;
        width: 100% !important;
        display: block !important;
        padding: 12px 0;
      }

      /* Make mobile menu list items take full width */
      .nav-menu li {
        width: 100% !important;
      }

      /* Unhide and style buttons inside the mobile drawer */
      .nav-menu li.mobile-action-item {
        display: block !important;
        margin-top: 15px;
      }

      .nav-menu .mobile-action-item .btn {
        width: 100% !important;
        text-align: center;
        padding: 12px 20px;
      }
      
      .nav-menu li.mobile-login-item {
        display: block !important;
        margin-top: 10px;
      }
      
      .nav-menu .mobile-login-item .btn {
        width: 100% !important;
        text-align: center;
        border: 1px solid #e2e8f0;
      }
    }
  </style>

  <header class="site-header" id="eb-scroll-header">
    <div class="header-container">
      <!-- Brand Area -->
      <a href="#" class="logo-container">
        <span class="logo-icon">🎓</span>
        <span class="logo-text">Essay<span>Buddy</span></span>
      </a>

      <!-- Middle Links Menu (Now appends action buttons dynamically on mobile) -->
      <nav>
        <ul class="nav-menu" id="nav-menu-el">
          <li><a href="#features" class="nav-link">Features</a></li>
          <li><a href="#how-it-works" class="nav-link">How it Works</a></li>
          <li><a href="#pricing" class="nav-link">Pricing</a></li>
          <li><a href="#faqs" class="nav-link">FAQs</a></li>
          
          <!-- These items only show inside the mobile menu drawer -->
          <li class="mobile-action-item" style="display: none;"><a href="#get-started" class="btn btn-cta">Start Free</a></li>
          <li class="mobile-login-item" style="display: none;"><a href="#login" class="btn btn-login">Log In</a></li>
        </ul>
      </nav>

      <!-- Desktop Action Items Block (Hidden automatically on phones) -->
      <div class="header-actions">
        <a href="#login" class="btn btn-login">Log In</a>
        <a href="#get-started" class="btn btn-cta">Start Free</a>
      </div>

      <!-- Hamburger Trigger Button (Perfectly safe from cropping) -->
      <button class="mobile-menu-btn" id="mobile-btn-el" aria-label="Toggle Menu">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
  </header>

  <script>
    const mobileBtnEl = document.getElementById('mobile-btn-el');
    const navMenuEl = document.getElementById('nav-menu-el');
    const navLinksEl = document.querySelectorAll('.elementor-eb-header-wrapper .nav-link, .elementor-eb-header-wrapper .btn');
    const scrollHeader = document.getElementById('eb-scroll-header');

    // Sticky Scroll Effect Changer
    window.addEventListener('scroll', () => {
      if (window.scrollY > 15) {
        scrollHeader.classList.add('scrolled');
      } else {
        scrollHeader.classList.remove('scrolled');
      }
    });

    // Open/Close Mobile Drawer
    mobileBtnEl.addEventListener('click', () => {
      mobileBtnEl.classList.toggle('active');
      navMenuEl.classList.toggle('active');
    });

    // Close Menu on Click
    navLinksEl.forEach(link => {
      link.addEventListener('click', () => {
        mobileBtnEl.classList.remove('active');
        navMenuEl.classList.remove('active');
      });
    });
  </script>
</div>/* End custom CSS */