.elementor-1598 .elementor-element.elementor-element-bdf5813{--display:flex;--min-height:100px;--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;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:8%;--padding-right:8%;--z-index:95;}.elementor-1598 .elementor-element.elementor-element-bdf5813:not(.elementor-motion-effects-element-type-background), .elementor-1598 .elementor-element.elementor-element-bdf5813 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1598 .elementor-element.elementor-element-3670873d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.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-weight:var( --e-global-typography-text-font-weight );}.elementor-1598 .elementor-element.elementor-element-4a69553b{text-align:start;}.elementor-1598 .elementor-element.elementor-element-4a69553b img{width:65%;height:34px;object-fit:contain;object-position:center center;}.elementor-1598 .elementor-element.elementor-element-6886ae7{--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:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.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-1598 .elementor-element.elementor-element-5fac9c5c .elementor-menu-toggle{margin-left:auto;background-color:#02010100;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu .elementor-item{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;word-spacing:0em;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--main .elementor-item{color:#000000;fill:#000000;padding-left:0px;padding-right:0px;padding-top:5px;padding-bottom:5px;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--main .elementor-item:hover,
					.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--main .elementor-item:focus{color:#39CA6A;fill:#39CA6A;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#21743D;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .e--pointer-framed .elementor-item:before,
					.elementor-1598 .elementor-element.elementor-element-5fac9c5c .e--pointer-framed .elementor-item:after{border-color:#21743D;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#21743D;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:before,
					.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:after{background-color:#21743D;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .e--pointer-framed .elementor-item.elementor-item-active:before,
					.elementor-1598 .elementor-element.elementor-element-5fac9c5c .e--pointer-framed .elementor-item.elementor-item-active:after{border-color:#21743D;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .e--pointer-framed .elementor-item:before{border-width:1px;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 1px 1px;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:1px 1px 0 0;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:1px 0 0 1px;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 1px 1px 0;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .e--pointer-underline .elementor-item:after,
					 .elementor-1598 .elementor-element.elementor-element-5fac9c5c .e--pointer-overline .elementor-item:before,
					 .elementor-1598 .elementor-element.elementor-element-5fac9c5c .e--pointer-double-line .elementor-item:before,
					 .elementor-1598 .elementor-element.elementor-element-5fac9c5c .e--pointer-double-line .elementor-item:after{height:1px;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c{--e-nav-menu-horizontal-menu-item-margin:calc( 30px / 2 );}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:30px;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--dropdown a, .elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-menu-toggle{color:#1C244B;fill:#1C244B;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--dropdown{background-color:#F3F5F8;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--dropdown a:hover,
					.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--dropdown a:focus,
					.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--dropdown a.highlighted{background-color:#F9FAFD;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--dropdown a.elementor-item-active{background-color:#F9FAFD;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--dropdown .elementor-item, .elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;text-transform:capitalize;font-style:normal;text-decoration:none;letter-spacing:0px;word-spacing:0em;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c div.elementor-menu-toggle{color:#467FF7;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c div.elementor-menu-toggle svg{fill:#467FF7;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1598 .elementor-element.elementor-element-53495a74 .elementor-button{background-color:#000000;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;word-spacing:0em;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:2px 2px 2px 2px;border-color:#000613;border-radius:100px 100px 100px 100px;padding:16px 45px 16px 45px;}.elementor-1598 .elementor-element.elementor-element-53495a74 .elementor-button:hover, .elementor-1598 .elementor-element.elementor-element-53495a74 .elementor-button:focus{background-color:#02010100;color:#000000;border-color:#000000;}.elementor-1598 .elementor-element.elementor-element-53495a74.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-1598 .elementor-element.elementor-element-53495a74 .elementor-button:hover svg, .elementor-1598 .elementor-element.elementor-element-53495a74 .elementor-button:focus svg{fill:#000000;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-1598 .elementor-element.elementor-element-bdf5813{--min-height:85px;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}.elementor-1598 .elementor-element.elementor-element-4a69553b img{height:27px;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu .elementor-item{font-size:14px;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--dropdown .elementor-item, .elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:14px;}.elementor-1598 .elementor-element.elementor-element-53495a74 .elementor-button{font-size:14px;padding:14px 35px 14px 35px;}}@media(max-width:767px){.elementor-1598 .elementor-element.elementor-element-bdf5813{--min-height:65px;}.elementor-1598 .elementor-element.elementor-element-3670873d{--width:20%;}.elementor-1598 .elementor-element.elementor-element-4a69553b img{height:20px;}.elementor-1598 .elementor-element.elementor-element-6886ae7{--width:80%;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--dropdown a{padding-top:14px;padding-bottom:14px;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-1598 .elementor-element.elementor-element-5fac9c5c .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:15px !important;}.elementor-1598 .elementor-element.elementor-element-5fac9c5c{--nav-menu-icon-size:20px;}.elementor-1598 .elementor-element.elementor-element-53495a74 .elementor-button{padding:12px 25px 12px 25px;}}@media(min-width:768px){.elementor-1598 .elementor-element.elementor-element-bdf5813{--content-width:1440px;}.elementor-1598 .elementor-element.elementor-element-3670873d{--width:40%;}.elementor-1598 .elementor-element.elementor-element-6886ae7{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-1598 .elementor-element.elementor-element-3670873d{--width:15%;}.elementor-1598 .elementor-element.elementor-element-6886ae7{--width:85%;}}/* Start custom CSS for nav-menu, class: .elementor-element-5fac9c5c */<div class="cs-apple-menu-wrap">
  <button class="cs-menu-toggle" aria-label="Open menu">
    <span></span>
    <span></span>
  </button>

  <div class="cs-apple-menu-overlay">
    <div class="cs-apple-menu-panel">
      <div class="cs-apple-menu-top">
        <div class="cs-apple-menu-brand">colorsource</div>
        <button class="cs-menu-close" aria-label="Close menu">✕</button>
      </div>

      <nav class="cs-apple-menu-nav">
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/services">Services</a>
        <a href="/portfolio">Portfolio</a>
        <a href="/production">Production</a>
        <a href="/clients">Clients</a>
        <a href="/contact">Contact</a>
      </nav>

      <div class="cs-apple-menu-bottom">
        <a href="/profile" class="cs-apple-profile-btn">الملف التعريفي</a>
      </div>
    </div>
  </div>
</div>

<style>
  .cs-apple-menu-wrap {
    position: relative;
    z-index: 9999;
  }

  .cs-menu-toggle {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    padding: 0;
  }

  .cs-menu-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 34px rgba(0,0,0,0.12);
  }

  .cs-menu-toggle span {
    width: 18px;
    height: 1.8px;
    background: #111;
    border-radius: 99px;
    display: block;
  }

  .cs-apple-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(245,245,247,0.55);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility .35s ease;
    z-index: 99999;
  }

  .cs-apple-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .cs-apple-menu-panel {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    background: rgba(255,255,255,0.78);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 32px;
    box-shadow:
      0 20px 60px rgba(0,0,0,0.10),
      inset 0 1px 0 rgba(255,255,255,0.55);
    padding: 22px 22px 28px;
    transform: translateY(-18px) scale(.985);
    transition: transform .42s cubic-bezier(.22,1,.36,1);
    overflow: hidden;
  }

  .cs-apple-menu-overlay.active .cs-apple-menu-panel {
    transform: translateY(0) scale(1);
  }

  .cs-apple-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }

  .cs-apple-menu-brand {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #111;
  }

  .cs-menu-close {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
    color: #111;
    font-size: 18px;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
  }

  .cs-menu-close:hover {
    background: rgba(0,0,0,0.1);
    transform: rotate(90deg);
  }

  .cs-apple-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .cs-apple-menu-nav a {
    position: relative;
    display: block;
    text-decoration: none;
    color: #111;
    font-size: 34px;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.04em;
    padding: 14px 4px;
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity .5s ease,
      transform .5s cubic-bezier(.22,1,.36,1),
      color .25s ease;
  }

  .cs-apple-menu-overlay.active .cs-apple-menu-nav a {
    opacity: 1;
    transform: translateY(0);
  }

  .cs-apple-menu-nav a:nth-child(1) { transition-delay: .06s; }
  .cs-apple-menu-nav a:nth-child(2) { transition-delay: .10s; }
  .cs-apple-menu-nav a:nth-child(3) { transition-delay: .14s; }
  .cs-apple-menu-nav a:nth-child(4) { transition-delay: .18s; }
  .cs-apple-menu-nav a:nth-child(5) { transition-delay: .22s; }
  .cs-apple-menu-nav a:nth-child(6) { transition-delay: .26s; }
  .cs-apple-menu-nav a:nth-child(7) { transition-delay: .30s; }

  .cs-apple-menu-nav a:hover {
    color: #6e6e73;
  }

  .cs-apple-menu-bottom {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(0,0,0,0.08);
  }

  .cs-apple-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: transform .25s ease, opacity .25s ease;
  }

  .cs-apple-profile-btn:hover {
    transform: translateY(-1px);
    opacity: .92;
  }

  body.cs-apple-menu-open {
    overflow: hidden;
  }

  @media (min-width: 1025px) {
    .cs-menu-toggle {
      display: none;
    }
  }

  @media (max-width: 767px) {
    .cs-apple-menu-panel {
      top: 10px;
      left: 10px;
      right: 10px;
      padding: 18px 18px 24px;
      border-radius: 28px;
    }

    .cs-apple-menu-nav a {
      font-size: 28px;
      padding: 12px 2px;
    }

    .cs-menu-toggle {
      width: 44px;
      height: 44px;
    }
  }
</style>

<script>
  (function () {
    const wrap = document.querySelector('.cs-apple-menu-wrap');
    if (!wrap) return;

    const openBtn = wrap.querySelector('.cs-menu-toggle');
    const closeBtn = wrap.querySelector('.cs-menu-close');
    const overlay = wrap.querySelector('.cs-apple-menu-overlay');
    const navLinks = wrap.querySelectorAll('.cs-apple-menu-nav a');

    function openMenu() {
      overlay.classList.add('active');
      document.body.classList.add('cs-apple-menu-open');
    }

    function closeMenu() {
      overlay.classList.remove('active');
      document.body.classList.remove('cs-apple-menu-open');
    }

    openBtn.addEventListener('click', openMenu);
    closeBtn.addEventListener('click', closeMenu);

    overlay.addEventListener('click', function (e) {
      if (e.target === overlay) closeMenu();
    });

    navLinks.forEach(link => {
      link.addEventListener('click', closeMenu);
    });

    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') closeMenu();
    });
  })();
</script>

/* Burger Icon */
.cs-menu-toggle span {
  background: #000 !important;
}

/* إذا أكو SVG */
.cs-menu-toggle svg {
  fill: #000 !important;
  stroke: #000 !important;
}

/* إذا الزر نفسه يتلون */
.cs-menu-toggle {
  color: #000 !important;
  border-color: rgba(0,0,0,0.15) !important;
}

.menu-toggle,
.elementor-menu-toggle {
  color: #000 !important;
}

.elementor-menu-toggle i,
.elementor-menu-toggle svg {
  color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
}/* End custom CSS */