.elementor-67 .elementor-element.elementor-element-6e77e1bf{--display:flex;--min-height:0px;--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:space-between;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:none;--border-style:none;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-67 .elementor-element.elementor-element-272e6001{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-67 .elementor-element.elementor-element-272e6001.e-con{--align-self:center;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-67 .elementor-element.elementor-element-4d0121e{width:var( --container-widget-width, 78.605% );max-width:78.605%;--container-widget-width:78.605%;--container-widget-flex-grow:0;text-align:start;}.elementor-67 .elementor-element.elementor-element-4d0121e.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-67 .elementor-element.elementor-element-4d0121e img{width:100%;max-width:100%;}.elementor-67 .elementor-element.elementor-element-6323d8df{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-67 .elementor-element.elementor-element-6323d8df.e-con{--align-self:center;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu .elementor-item{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;line-height:1.3em;letter-spacing:0.4px;}.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu--main .elementor-item{color:#4D3E3E;fill:#4D3E3E;}.elementor-67 .elementor-element.elementor-element-e8f687f .e--pointer-framed .elementor-item:before{border-width:0px;}.elementor-67 .elementor-element.elementor-element-e8f687f .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 0px 0px;}.elementor-67 .elementor-element.elementor-element-e8f687f .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:0px 0px 0 0;}.elementor-67 .elementor-element.elementor-element-e8f687f .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:0px 0 0 0px;}.elementor-67 .elementor-element.elementor-element-e8f687f .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 0px 0px 0;}.elementor-67 .elementor-element.elementor-element-e8f687f .e--pointer-underline .elementor-item:after,
					 .elementor-67 .elementor-element.elementor-element-e8f687f .e--pointer-overline .elementor-item:before,
					 .elementor-67 .elementor-element.elementor-element-e8f687f .e--pointer-double-line .elementor-item:before,
					 .elementor-67 .elementor-element.elementor-element-e8f687f .e--pointer-double-line .elementor-item:after{height:0px;}.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu--dropdown a, .elementor-67 .elementor-element.elementor-element-e8f687f .elementor-menu-toggle{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu--dropdown{background-color:var( --e-global-color-9c653a2 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );}.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu--dropdown a:hover,
					.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu--dropdown a:focus,
					.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu--dropdown a.highlighted,
					.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-menu-toggle:hover,
					.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-menu-toggle:focus{color:var( --e-global-color-9c653a2 );}.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu--dropdown a:hover,
					.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu--dropdown a:focus,
					.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu--dropdown a.highlighted{background-color:var( --e-global-color-text );}.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu--dropdown .elementor-item, .elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:"League Spartan", Sans-serif;font-size:14px;font-weight:400;letter-spacing:0.4px;}.elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-67 .elementor-element.elementor-element-e8f687f .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:24px !important;}.elementor-67 .elementor-element.elementor-element-70c195f3{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-67 .elementor-element.elementor-element-6353d5b{--display:flex;--min-height:0px;--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:space-between;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:none;--border-style:none;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-67 .elementor-element.elementor-element-6353d5b:not(.elementor-motion-effects-element-type-background), .elementor-67 .elementor-element.elementor-element-6353d5b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-9c653a2 );}.elementor-67 .elementor-element.elementor-element-eef197e{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-67 .elementor-element.elementor-element-eef197e.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-67 .elementor-element.elementor-element-7c906be{width:var( --container-widget-width, 78.605% );max-width:78.605%;--container-widget-width:78.605%;--container-widget-flex-grow:0;text-align:start;}.elementor-67 .elementor-element.elementor-element-7c906be.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-67 .elementor-element.elementor-element-7c906be img{width:100%;max-width:100%;}.elementor-67 .elementor-element.elementor-element-8765972{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-67 .elementor-element.elementor-element-8765972.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-67 .elementor-element.elementor-element-f61a275.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu .elementor-item{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;line-height:1.3em;letter-spacing:0.4px;}.elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu--main .elementor-item{color:#4D3E3E;fill:#4D3E3E;}.elementor-67 .elementor-element.elementor-element-d84312d .e--pointer-framed .elementor-item:before{border-width:0px;}.elementor-67 .elementor-element.elementor-element-d84312d .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 0px 0px;}.elementor-67 .elementor-element.elementor-element-d84312d .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:0px 0px 0 0;}.elementor-67 .elementor-element.elementor-element-d84312d .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:0px 0 0 0px;}.elementor-67 .elementor-element.elementor-element-d84312d .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 0px 0px 0;}.elementor-67 .elementor-element.elementor-element-d84312d .e--pointer-underline .elementor-item:after,
					 .elementor-67 .elementor-element.elementor-element-d84312d .e--pointer-overline .elementor-item:before,
					 .elementor-67 .elementor-element.elementor-element-d84312d .e--pointer-double-line .elementor-item:before,
					 .elementor-67 .elementor-element.elementor-element-d84312d .e--pointer-double-line .elementor-item:after{height:0px;}.elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu--dropdown a, .elementor-67 .elementor-element.elementor-element-d84312d .elementor-menu-toggle{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu--dropdown{background-color:var( --e-global-color-9c653a2 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );}.elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu--dropdown a:hover,
					.elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu--dropdown a:focus,
					.elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu--dropdown a.highlighted,
					.elementor-67 .elementor-element.elementor-element-d84312d .elementor-menu-toggle:hover,
					.elementor-67 .elementor-element.elementor-element-d84312d .elementor-menu-toggle:focus{color:var( --e-global-color-9c653a2 );}.elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu--dropdown a:hover,
					.elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu--dropdown a:focus,
					.elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu--dropdown a.highlighted{background-color:var( --e-global-color-text );}.elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu--dropdown .elementor-item, .elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:"League Spartan", Sans-serif;font-size:14px;font-weight:400;letter-spacing:0.4px;}.elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-67 .elementor-element.elementor-element-d84312d .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:24px !important;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-67 .elementor-element.elementor-element-6e77e1bf{--content-width:1220px;}.elementor-67 .elementor-element.elementor-element-272e6001{--width:20%;}.elementor-67 .elementor-element.elementor-element-6323d8df{--width:60%;}.elementor-67 .elementor-element.elementor-element-70c195f3{--width:20%;}.elementor-67 .elementor-element.elementor-element-6353d5b{--content-width:1220px;}.elementor-67 .elementor-element.elementor-element-eef197e{--width:20%;}.elementor-67 .elementor-element.elementor-element-8765972{--width:20%;}}@media(max-width:1024px) and (min-width:768px){.elementor-67 .elementor-element.elementor-element-272e6001{--width:30%;}.elementor-67 .elementor-element.elementor-element-6323d8df{--width:40%;}.elementor-67 .elementor-element.elementor-element-70c195f3{--width:40%;}.elementor-67 .elementor-element.elementor-element-eef197e{--width:30%;}.elementor-67 .elementor-element.elementor-element-8765972{--width:40%;}}@media(max-width:1024px){.elementor-67 .elementor-element.elementor-element-6e77e1bf{--padding-top:0px;--padding-bottom:0px;--padding-left:60px;--padding-right:60px;}.elementor-67 .elementor-element.elementor-element-272e6001.e-con{--order:2;}.elementor-widget-theme-site-logo .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-67 .elementor-element.elementor-element-6323d8df{--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:flex-start;}.elementor-67 .elementor-element.elementor-element-6323d8df.e-con{--order:1;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-67 .elementor-element.elementor-element-70c195f3.e-con{--order:3;}.elementor-67 .elementor-element.elementor-element-6353d5b{--padding-top:10px;--padding-bottom:10px;--padding-left:20px;--padding-right:20px;}.elementor-67 .elementor-element.elementor-element-eef197e.e-con{--align-self:center;}.elementor-67 .elementor-element.elementor-element-8765972{--justify-content:flex-end;}.elementor-67 .elementor-element.elementor-element-d84312d.elementor-element{--align-self:center;}}@media(max-width:767px){.elementor-67 .elementor-element.elementor-element-6e77e1bf{--min-height:50px;--padding-top:0px;--padding-bottom:0px;--padding-left:25px;--padding-right:25px;}.elementor-widget-theme-site-logo .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-67 .elementor-element.elementor-element-6323d8df{--width:10%;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-67 .elementor-element.elementor-element-70c195f3{--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-67 .elementor-element.elementor-element-6353d5b{--min-height:50px;--justify-content:flex-start;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-67 .elementor-element.elementor-element-eef197e{--width:38%;}.elementor-67 .elementor-element.elementor-element-7c906be{width:var( --container-widget-width, 142.875px );max-width:142.875px;--container-widget-width:142.875px;--container-widget-flex-grow:0;}.elementor-67 .elementor-element.elementor-element-8765972{--width:61%;--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-67 .elementor-element.elementor-element-f61a275{width:initial;max-width:initial;}.elementor-67 .elementor-element.elementor-element-f61a275.elementor-element{--align-self:center;}}/* Start custom CSS for nav-menu, class: .elementor-element-e8f687f */<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Menu</title>
  <style>
    /* Base styles */
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
    }

    .custom-menu {
      position: relative;
      z-index: 9999;
      background: #f8f8f8;
      padding: 10px 20px;
    }

    /* Normal desktop menu */
    .custom-menu .menu-items {
      display: flex;
      gap: 20px;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .custom-menu .menu-items li a {
      text-decoration: none;
      color: #333;
      font-weight: 500;
    }

    /* Hamburger (hidden on desktop) */
    .menu-toggle {
      display: none;
      font-size: 28px;
      cursor: pointer;
      user-select: none;
    }

    /* Sidebar (hidden offscreen by default) */
    .menu-sidebar {
      position: fixed;
      top: 0;
      right: -250px; /* hide offscreen */
      width: 250px;
      height: 100%;
      background: #fff;
      box-shadow: -2px 0 6px rgba(0,0,0,0.2);
      padding: 40px 20px;
      transition: right 0.3s ease;
    }

    .menu-sidebar.open {
      right: 0;
    }

    /* Sidebar menu items */
    .menu-sidebar .menu-items {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .menu-sidebar .menu-items li a {
      font-size: 18px;
      color: #222;
    }

    /* Tablet & mobile */
    @media (max-width: 1024px) {
      .custom-menu .menu-items {
        display: none; /* hide inline nav */
      }
      .menu-toggle {
        display: block; /* show hamburger */
      }
    }
  </style>
</head>
<body>

  <!-- MENU -->
  <div class="custom-menu">
    <!-- Hamburger toggle -->
    <div class="menu-toggle" id="menuToggle">☰</div>

    <!-- Normal desktop nav -->
    <ul class="menu-items">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

    <!-- Sidebar nav -->
    <nav class="menu-sidebar" id="menuSidebar">
      <ul class="menu-items">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const toggle = document.getElementById("menuToggle");
      const sidebar = document.getElementById("menuSidebar");

      toggle.addEventListener("click", () => {
        sidebar.classList.toggle("open");
      });

      // Close sidebar when clicking outside
      document.addEventListener("click", (e) => {
        if (!sidebar.contains(e.target) && !toggle.contains(e.target)) {
          sidebar.classList.remove("open");
        }
      });
    });
  </script>

</body>
</html>/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-d84312d */<div id="mySidebar" class="sidebar">
  <button id="closeSidebar" class="close-btn">&times;</button>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<!-- Hamburger button -->
<button class="menu-toggle">&#9776;</button>

<!-- Inline CSS -->
<style>
/* Sidebar styles */
.sidebar {
  position: fixed;
  top: 0;
  left: -250px; /* hidden offscreen */
  width: 250px;
  height: 100%;
  background: #fff;
  box-shadow: 2px 0 5px rgba(0,0,0,0.3);
  transition: left 0.3s ease;
  z-index: 1000;
  padding: 20px;
}

/* Active state */
.sidebar.active {
  left: 0; /* slide in */
}

/* Close button */
.close-btn {
  font-size: 30px;
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  margin-bottom: 20px;
}

/* Hamburger button */
.menu-toggle {
  font-size: 30px;
  background: none;
  border: none;
  cursor: pointer;
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1100;
}
</style>

<!-- Inline JS -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.menu-toggle');
  const sidebar = document.getElementById('mySidebar');
  const closeBtn = document.getElementById('closeSidebar');

  // Toggle sidebar on hamburger click
  hamburger.addEventListener('click', function() {
    sidebar.classList.add('active');
  });

  // Close sidebar on close button click
  closeBtn.addEventListener('click', function() {
    sidebar.classList.remove('active');
  });

  // Optional: click outside to close
  document.addEventListener('click', function(e) {
    if (!sidebar.contains(e.target) && !hamburger.contains(e.target)) {
      sidebar.classList.remove('active');
    }
  });
});
</script>/* End custom CSS */