@font-face {
     font-family: 'Urbanist';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/urbanist/v15/L0x-DF02iFML4hGCyMqrbS1miXK2Z7s.woff2) format('woff2');
     unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }

 @font-face {
     font-family: 'Urbanist';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/urbanist/v15/L0x-DF02iFML4hGCyMqlbS1miXK2.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 :root {
 

       
  
     --menu-dark-gradient: linear-gradient(45deg, #1d183b, #0c091c, #1d183b);
     --menu-ease: cubic-bezier(.22, .8, .24, 1);


 }
 
 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }

 html {
     background-color: var(--color-bg);
     scroll-padding-top: calc(80px + var(--dim-16px));
 }

 /* Arabic: Urbanist has no Arabic glyphs, so Arabic characters fall through to Tajawal.
    Letter-spacing must be 0 or Arabic letters lose their joins. */
 html[lang="ar"] * {
     font-family: "Urbanist", "Tajawal", sans-serif;
     letter-spacing: 0;
 }

 /* ************************************************************** */
 /* SHARED                                                           */
 /* ************************************************************** */

 .menu-icon,
 .menu-icon * {
     color: inherit;
 }

 .menu-icon {
     width: 22px;
     height: 22px;
     flex-shrink: 0;
 }

 .menu-sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     margin: -1px;
     overflow: hidden;
     clip: rect(0 0 0 0);
     white-space: nowrap;
     border: 0;
 }

 :focus-visible {
     outline: 2px solid var(--color-brand);
     outline-offset: 3px;
     border-radius: var(--roundness-8px);
 }

 .hero-container,
 .demo-container,
 .why-container,
 .feature-container,
 .scan-container,
 .brand-container,
 .manage-container,
 .steps-container,
 .benefit-container,
 .industry-container,
 .products-container,
 .faqs-container,
 .order-container {
     display: flex;
     width: 100%;
     max-width: var(--global-max-width);
     margin: 0 auto;
 }

 .hero-container-inner,
 .demo-container-inner,
 .why-container-inner,
 .feature-container-inner,
 .scan-container-inner,
 .brand-container-inner,
 .manage-container-inner,
 .steps-container-inner,
 .benefit-container-inner,
 .industry-container-inner,
 .products-container-inner,
 .faqs-container-inner,
 .order-container-inner {
     width: var(--global-width);
     margin: 0 auto;
     padding: var(--dim-separator-gap) 0px;
 }

 .menu-section-head {
     max-width: 760px;
     margin-bottom: var(--dim-48px); 
 }

 .menu-section-head-center {
     margin-inline: auto;
     text-align: center;
 }

 .menu-section-title {
     font-size: var(--font-large-extra);
     color: var(--color-black);
 }

 .menu-section-subtitle {
     margin-top: var(--dim-8px);
     font-size: var(--font-medium);
     ;
     color: var(--color-gray);
 }

 html[lang="ar"] .menu-section-title {
     line-height: 1.4;
 }

 html[lang="ar"] .menu-section-subtitle {
     line-height: 1.8;
 }

 .menu-section-dark .menu-section-title {
     color: var(--color-white);
 }

 .menu-section-dark .menu-section-subtitle {
     color: rgba(255, 255, 255, 0.72);
 }

 /* Buttons */
 .menu-general-btn {


     margin: 0px;
     padding: 0px;
     display: flex;
     color: var(--color-white);
     font-size: var(--font-medium);
     text-align: center;
     border-radius: var(--roundness-full);
     padding: var(--dim-16px);

     cursor: pointer;
     outline: 0px;
     border: none;
     width: fit-content;
     height: fit-content;
     background-color: transparent;
     border: 1px solid var(--color-black-stroke);
     align-items: center;
     text-decoration: none;

     transform: scale(1);
     transition: .3s;
 }

 .menu-general-btn>img {
     display: flex;
     width: 20px;
     object-fit: contain;
     height: 20px;
     margin-left: var(--dim-8px);
     margin-inline-start: var(--dim-8px); 
     filter: invert(1);
     transition: .3s;
 }

 .menu-general-btn .menu-icon {
     width: 20px;
     height: 20px;


 }

 .menu-general-btn-brand {
     background-color: var(--color-brand);
     color: var(--color-white);
     border: none;
 }

 .menu-general-btn-ghost {
     background-color: rgba(255, 255, 255, 0.04);
     border-color: var(--color-black-stroke);
     color: var(--color-white);
 }

 .menu-general-btn-light {
     background-color: var(--color-white);
     color: var(--color-black);
 }

 .menu-general-btn-outline {
     background-color: var(--color-white);
     border-color: var(--color-stroke);
     color: var(--color-black);
 }

 @media (hover: hover) and (pointer: fine) {
     
     .menu-general-btn:hover {
         color: var(--color-black) !important;
         background-color: var(--color-white) !important;
         box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px !important;

         transform: scale(1.1);
         transition: .3s;
     }

     .menu-general-btn:hover img {
         filter: invert(0);
         transition: .3s;
     }

     .menu-general-btn-brand:hover {
         background-color: var(--color-brand-dark);
     }

     .menu-general-btn-ghost:hover,
     .menu-general-btn-outline:hover {
         background-color: var(--color-white);
         border-color: var(--color-white);
         color: var(--color-black);
     }
 }

 /* Check list (uses reference check.png) */
 .menu-check-list {
     display: flex;
     flex-direction: column;
     gap: var(--dim-12px);
     list-style: none; 
 }

 .menu-check-list>li {
     display: flex;
     align-items: flex-start;
     gap: var(--dim-8px);
 }

 .menu-check-list>li>img {
     width: 20px;
     height: 20px;
     flex-shrink: 0;
 }

 .menu-check-list>li>span {
     font-size: var(--font-medium);
     color: var(--color-black);
 }

 /* Image wrapper + fallback when a photo fails to load */
 .menu-img {
     position: relative;
     display: block;
     overflow: hidden;
     background-color: var(--demo-tint, var(--color-brand-light));
 }

 .menu-img>img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .menu-img-fallback>img {
     visibility: hidden;
 }

 .menu-img-fallback::after {
     content: attr(data-initial);
     position: absolute;
     inset: 0;
     display: grid;
     place-items: center;
     font-size: 22px;
     font-weight: 900;
     color: var(--demo-brand, var(--color-brand));
 }

 /* Scroll reveal — only hides content when JS is running */
 .menu-js .menu-reveal {
     opacity: 0;
     transform: translateY(24px);
     transition: opacity .7s var(--menu-ease), transform .7s var(--menu-ease);
 }

 .menu-js .menu-reveal.is-visible {
     opacity: 1;
     transform: none;
 }

 /* ************************************************************** */
 /* MENU TONES (used by demo phone and branding preview)             */
 /* ************************************************************** */

 [data-menu-tone="fresh"] {
     --demo-surface: #F4F8F5;
     --demo-card: #FFFFFF;
     --demo-ink: #0C091C;
     --demo-soft: #6B6F7B;
     --demo-brand: #109d58;
     --demo-brand-deep: #01612e;
     --demo-on-brand: #FFFFFF;
     --demo-tint: #E2F3E9;
     --demo-line: #E4EBE6;
 }

 [data-menu-tone="warm"] {
     --demo-surface: #FBF5EE;
     --demo-card: #FFFBF7;
     --demo-ink: #3B1F19;
     --demo-soft: #7D645A;
     --demo-brand: #B8532F;
     --demo-brand-deep: #6A1D1B;
     --demo-on-brand: #FFF8F2;
     --demo-tint: #F6E0D2;
     --demo-line: #EFDFCF;
 }

 [data-menu-tone="heritage"] {
     --demo-surface: #F8F2E5;
     --demo-card: #FFFCF4;
     --demo-ink: #1E2A24;
     --demo-soft: #5F6B61;
     --demo-brand: #2E6A54;
     --demo-brand-deep: #1B3E32;
     --demo-on-brand: #FBF6EA;
     --demo-tint: #E7E1CC;
     --demo-line: #E6D9BE;
 }

 [data-menu-tone="night"] {
     --demo-surface: #100E1C;
     --demo-card: #1C1930;
     --demo-ink: #F4F2FA;
     --demo-soft: #A6A3B8;
     --demo-brand: #E0B15A;
     --demo-brand-deep: #B98A34;
     --demo-on-brand: #1B1206;
     --demo-tint: #2B2743;
     --demo-line: #2B2743;
 }

 [data-menu-tone="navy"] {
     --demo-surface: #F3F5FA;
     --demo-card: #FFFFFF;
     --demo-ink: #111A33;
     --demo-soft: #667089;
     --demo-brand: #1F3A68;
     --demo-brand-deep: #12254A;
     --demo-on-brand: #FFFFFF;
     --demo-tint: #DFE6F3;
     --demo-line: #E3E7F0;
 }

 [data-menu-tone="rose"] {
     --demo-surface: #FBF3F4;
     --demo-card: #FFFFFF;
     --demo-ink: #33151C;
     --demo-soft: #83646B;
     --demo-brand: #B24C63;
     --demo-brand-deep: #7E2E40;
     --demo-on-brand: #FFFFFF;
     --demo-tint: #F5DDE2;
     --demo-line: #F0E2E5;
 }

 .demo-swatch-fresh,
 .brand-swatch-fresh {
     background: linear-gradient(135deg, #109d58 50%, #E2F3E9 50%);
 }

 .demo-swatch-warm,
 .brand-swatch-warm {
     background: linear-gradient(135deg, #B8532F 50%, #F6E0D2 50%);
 }

 .demo-swatch-heritage,
 .brand-swatch-heritage {
     background: linear-gradient(135deg, #2E6A54 50%, #C49A46 50%);
 }

 .demo-swatch-night,
 .brand-swatch-night {
     background: linear-gradient(135deg, #100E1C 50%, #E0B15A 50%);
 }

 .brand-swatch-navy {
     background: linear-gradient(135deg, #1F3A68 50%, #DFE6F3 50%);
 }

 .brand-swatch-rose {
     background: linear-gradient(135deg, #B24C63 50%, #F5DDE2 50%);
 }

 /* ************************************************************** */
 /* NAVBAR SECTION STARTS                                            */
 /* ************************************************************** */

 .navbar-container {
     position: sticky;
     top: 0;
     z-index: 50;
     display: flex;
     width: 100%;
     max-width: var(--global-max-width);
     margin: 0 auto;
     background-color: var(--color-black);
     -webkit-backdrop-filter: blur(14px);
     backdrop-filter: blur(14px);
     border-bottom: 1px solid transparent;
     transition: border-color .3s, background-color .3s;
     height: 80px;
 
 }

 .navbar-scrolled {
     background-color: var(--color-black);
     border-bottom-color: var(--color-black-stroke);
 }

 .navbar-container-inner {
     position: relative;
     display: flex;
     align-items: center;
     width: var(--global-width);
     height: 80px;
     margin: 0 auto;
 
 }

 .menu-navbar-logo-container {
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
     text-decoration: none;
 }

 .menu-navbar-logo {


     margin: 0px;
     padding: 0px;
     color: var(--color-white);
     font-size: var(--font-large);
     font-weight: 900;
     text-transform: uppercase;
     -webkit-text-stroke: 0.5px var(--color-white);
     width: fit-content;
 }

 .menu-navbar-poweredby {


     display: flex;
     align-items: center;
     width: 200px;
 }

 .menu-navbar-poweredby>p {
     margin: 0px;
     padding: 0px;
     color: var(--color-white);
     font-size: var(--font-small);
     display: flex;
     flex-shrink: none;
 }

 .menu-navbar-poweredby>img {
     height: 18px;
     margin-left: var(--dim-4px);
     cursor: pointer;
     object-fit: contain;
 }





 .navbar-item-container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     align-items: center;
     height: 44px;
     padding: 0px var(--dim-4px);
     list-style: none;
     border-radius: var(--roundness-full);
     background-color: var(--color-white);
 }

 .navbar-item {
     list-style: none;
 }

 .navbar-link {
     display: block;
     padding: var(--dim-8px) var(--dim-16px);
     border-radius: var(--roundness-full);
     font-size: 14px;
     color: var(--color-black);
     text-decoration: none;
     transition: background-color .2s;
 }

 @media (hover: hover) and (pointer: fine) {
     .navbar-link:hover {
         background-color: var(--color-hover);
     }
 }

 .menu-navbar-actions {
     display: flex;
     align-items: center;
     gap: var(--dim-12px);
     margin-inline-start: auto;
 }

 .menu-language-container {
     display: flex;
     overflow: hidden;
     border-radius: var(--roundness-full);
     background-color: var(--color-lightgray);
 }

 .menu-language-link {
     display: grid;
     place-items: center;
     min-width: 40px;
     height: 36px;
     padding: 0px var(--dim-8px);
     font-size: var(--font-small);
     font-weight: 700;
     color: var(--color-black);
     text-decoration: none;

 }

 .menu-language-active {
     background-color: var(--color-brand);
     color: var(--color-white);
     pointer-events: none;
 }

 .menu-navbar-cta {
     padding: var(--dim-8px) var(--dim-8px);
     font-size: 14px;

     background: transparent !important;
     border: 1px solid var(--color-brand);
     color: var(--color-white) !important;
     border: 1px solid var(--color-white);
 }

 .menu-navbar-cta:hover {
     transform: scale(1);
     background: var(--color-brand) !important;
     border: 1px solid var(--color-brand);
     color: var(--color-white) !important;
 }

 .menu-navbar-toggle {
     display: none;
     place-items: center;
     width: 44px;
     height: 44px;
     border: 1px solid var(--color-black-stroke);
     border-radius: 50%;
     background-color: transparent;
     color: var(--color-white);
     cursor: pointer;
 }

 /* NAVBAR SECTION ENDS */
 /* ************************************************************** */
 /* HERO SECTION STARTS                                              */
 /* ************************************************************** */

 .hero-container {
     position: relative;
     overflow: hidden;
     background-color: var(--color-black); 
 }

 .hero-container-inner {
     display: grid;
     grid-template-columns: 1.05fr 1fr;
     align-items: center;
     gap: var(--dim-32px);
     min-height: min(820px, calc(100vh - 80px));
     padding: var(--dim-separator-gap) 0px; 
 }

 .hero-content {
     position: relative;
     z-index: 2;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: var(--dim-8px);
     padding: var(--dim-8px) var(--dim-16px);
     border: 1px solid var(--color-black-stroke);
     border-radius: var(--roundness-full);
     background-color: rgba(255, 255, 255, 0.04);
     font-size: 14px;
     color: rgba(255, 255, 255, 0.86);
 }

 .hero-badge-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background-color: var(--color-brand);
     box-shadow: 0 0 0 4px var(--color-brand-light);
 }

 .hero-title {
     margin-top: var(--dim-16px);

     font-size: var(--font-large-extra);
     color: var(--color-white);
 }

 html[lang="ar"] .hero-title {
     line-height: 1.3;
 }

 .hero-subtitle {
     max-width: 560px;
     margin-top: var(--dim-32px);
     font-size: var(--font-medium);
     color: var(--color-gray)
 }

 html[lang="ar"] .hero-subtitle {
     line-height: 1.9;
 }

 .hero-cta-row {
     display: flex;
     flex-wrap: wrap;
     gap: var(--dim-12px);
     margin-top: var(--dim-32px);
 }

 .hero-points {
     display: flex;
     flex-wrap: wrap;
     gap: var(--dim-12px) var(--dim-24px);
     margin-top: var(--dim-32px);
     list-style: none;
 }

 .hero-points>li {
     display: flex;
     align-items: center;
     gap: var(--dim-8px);
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
 }

 .hero-points .menu-icon {
     width: 18px;
     height: 18px;
     color: var(--color-brand);
 }

 .hero-visual {
     position: relative;
     height: 600px;
 }

 .hero-visual-glow {
     position: absolute;
     inset: 8% 4%;
     border-radius: 50%;
     background: radial-gradient(closest-side, rgba(16, 157, 89, 0.32), rgba(16, 157, 89, 0) 72%);
     pointer-events: none;
 }

 .hero-visual-canvas {
     position: absolute;
     inset: 0;
     display: block;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity .9s var(--menu-ease);
     touch-action: pan-y;
 }

 .hero-visual-fallback {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: opacity .6s var(--menu-ease), visibility .6s;
 }

 .hero-visual.is-3d-ready .hero-visual-canvas {
     opacity: 1;
 }

 .hero-visual.is-3d-ready .hero-visual-fallback {
     opacity: 0;
     visibility: hidden;
 }

 /* CSS fallback composition */
 .hero-fb-phone {
     position: relative;
     z-index: 2;
     width: 262px;
     height: 540px;
     padding: 10px;
     border-radius: 44px;
     background-color: #14112a;
     box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45), inset 0 0 0 2px #2a2547;
     transform: perspective(1200px) rotateY(-14deg) rotateX(3deg);
     margin-inline-start: 90px;
 }

 html[dir="rtl"] .hero-fb-phone {
     transform: perspective(1200px) rotateY(14deg) rotateX(3deg);
 }

 .hero-fb-screen {
     display: flex;
     flex-direction: column;
     gap: 10px;
     height: 100%;
     padding: 34px 12px 12px;
     border-radius: 34px;
     background-color: #F4F8F5;
 }

 .hero-fb-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .hero-fb-word {
     font-size: 20px;
     font-weight: 900;
     color: var(--color-black);
 }

 .hero-fb-dot {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background-color: var(--color-white);
     box-shadow: var(--shadow-soft);
 }

 .hero-fb-cover {
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 8px;
     height: 118px;
     padding: 16px;
     border-radius: 18px;
     background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
 }

 .hero-fb-line {
     display: block;
     height: 8px;
     border-radius: var(--roundness-full);
     background-color: rgba(12, 9, 28, 0.12);
 }

 .hero-fb-line-lg {
     width: 70%;
     height: 12px;
 }

 .hero-fb-line-sm {
     width: 45%;
 }

 .hero-fb-line-light {
     background-color: rgba(255, 255, 255, 0.85);
 }

 .hero-fb-chips {
     display: flex;
     gap: 6px;
 }

 .hero-fb-chip {
     width: 52px;
     height: 24px;
     border-radius: var(--roundness-full);
     background-color: var(--color-white);
 }

 .hero-fb-chip-active {
     background-color: var(--color-brand);
 }

 .hero-fb-row {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px;
     border-radius: 16px;
     background-color: var(--color-white);
 }

 .hero-fb-plate {
     width: 54px;
     height: 54px;
     flex-shrink: 0;
     border-radius: 50%;
     border: 4px solid #F1F1F1;
 }

 .hero-fb-plate-1 {
     background: radial-gradient(circle at 35% 35%, #E9B56A, #9C5A2B);
 }

 .hero-fb-plate-2 {
     background: radial-gradient(circle at 40% 40%, #F3E1B4, #D4A45A);
 }

 .hero-fb-plate-3 {
     background: radial-gradient(circle at 40% 40%, #A7D98B, #3F8A4A);
 }

 .hero-fb-text {
     display: flex;
     flex: 1;
     flex-direction: column;
     gap: 6px;
 }

 .hero-fb-price {
     width: 38px;
     height: 18px;
     border-radius: var(--roundness-full);
     background-color: var(--color-brand-light);
 }

 .hero-fb-tent {
     position: absolute;
     z-index: 1;
     top: 50%;
     inset-inline-start: 4%;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
     width: 190px;
     padding: 20px 18px;
     border-radius: 20px;
     background-color: var(--color-white);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
     transform: translateY(-30%) perspective(900px) rotateY(18deg);
 }

 html[dir="rtl"] .hero-fb-tent {
     transform: translateY(-30%) perspective(900px) rotateY(-18deg);
 }

 .hero-fb-tent-title {
     font-size: 15px;
     font-weight: 800;
     color: var(--color-black);
     text-align: center;
 }

 .hero-fb-qr {
     width: 132px;
     height: 132px;
     border-radius: 10px;
     background:
         radial-gradient(circle, var(--color-black) 38%, transparent 40%) 0 0 / 11px 11px,
         var(--color-white);
     box-shadow: inset 0 0 0 10px var(--color-white);
 }

 .hero-fb-tent-foot {
     font-size: var(--font-small);
     color: var(--color-gray);
 }

 /* HERO SECTION ENDS */
 /* ************************************************************** */
 /* DEMO SECTION STARTS                                              */
 /* ************************************************************** */

 .demo-container {
     background-color: var(--color-bg); 
 }

 .demo-container-inner {
     display: grid;
     grid-template-columns: 1fr auto;
     align-items: center;
     gap: var(--dim-separator-gap); 
 }

 .demo-container-left .menu-section-head {
     margin-bottom: var(--dim-32px);
 }

 .demo-control {
     margin-bottom: var(--dim-32px); 
 }

 .demo-control-label {
     margin-bottom: var(--dim-16px);
     font-size: var(--font-medium);
     font-weight: 700;
     color: var(--color-gray);
 }

 .demo-control-options {
     display: flex;
     flex-wrap: wrap;
     gap: var(--dim-16px);
 }

 .demo-option {
     display: inline-flex;
     align-items: center;
     gap: var(--dim-8px);
     padding: var(--dim-8px);
     border: 1px solid var(--color-stroke);
     border-radius: var(--roundness-full);
     background-color: var(--color-white);
     font-size: var(--font-medium);
     color: var(--color-black);
     cursor: pointer;
     transition: background-color .2s, border-color .2s, color .2s;
 }

 @media (hover: hover) and (pointer: fine) {
     .demo-option:hover {
         background-color: var(--color-hover);
     }
 }

 .demo-option-active,
 .demo-option-active:hover {
     background-color: var(--color-black);
     border-color: var(--color-black);
     color: var(--color-white);
 }

 .demo-swatch {
     width: 18px;
     height: 18px;
     border-radius: 50%;
     box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }

 .demo-container-left .menu-check-list {
     margin-top: var(--dim-32px);
 }

 .demo-qr-card {
     display: flex;
     align-items: center;
     gap: var(--dim-16px);
     width: fit-content;
     margin-top: var(--dim-32px);
     padding: var(--dim-16px);
     padding-inline-end: var(--dim-32px);
     border: 1px solid var(--color-stroke);
     border-radius: var(--roundness);
     background-color: var(--color-white);
 }

 .demo-qr {
     display: grid;
     place-items: center;
     width: 92px;
     height: 92px;
     padding: var(--dim-8px);
     border-radius: var(--roundness-8px);
     background-color: var(--color-white);
     border: 1px solid var(--color-stroke);
 }

 .demo-qr img,
 .demo-qr canvas {
     width: 100% !important;
     height: 100% !important;
 }

 .demo-qr-title {
     font-size: var(--font-medium);
     color: var(--color-black);
 }

 .demo-qr-sub {
     margin-top: var(--dim-4px);
     font-size: var(--font-small);
     ;
     color: var(--color-gray);
 }

 /* Phone */
 .demo-phone {
     position: relative;
     width: 340px;
     height: 690px;
     padding: 11px;
     border-radius: 52px;
     background-color: #14112a;
     box-shadow: var(--shadow), inset 0 0 0 2px #2a2547;
 }

 .demo-phone-island {
     position: absolute;
     z-index: 6;
     top: 22px;
     left: 50%;
     width: 96px;
     height: 28px;
     border-radius: var(--roundness-full);
     background-color: #07060f;
     transform: translateX(-50%);
 }

 .demo-phone-screen {
     position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
     overflow: hidden;
     border-radius: 42px;
     background-color: var(--demo-surface);
     transition: background-color .4s var(--menu-ease);
 }

 .demo-phone-screen * {
     color: var(--demo-ink);
 }

 .demo-phone-screen .menu-icon * {
     color: inherit;
 }

 .demo-screen-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--dim-8px);
     padding: 58px 16px 10px;
 }

 .demo-screen-brand {
     font-size: 22px;
     font-weight: 900;
     color: var(--demo-brand-deep);
 }

 [data-menu-tone="night"] .demo-screen-brand {
     color: var(--demo-brand);
 }

 .demo-screen-table {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 6px 10px;
     border: 1px solid var(--demo-line);
     border-radius: var(--roundness-full);
     background-color: var(--demo-card);
     font-size: 12px;
     font-weight: 700;
 }

 .demo-screen-table .menu-icon {
     width: 14px;
     height: 14px;
     color: var(--demo-brand);
 }

 .demo-screen-cover {
     position: relative;
     overflow: hidden;
     flex-shrink: 0;
     margin: 0px 12px;
     padding: 18px 16px;
     min-height: 124px;
     border-radius: 22px;
     background: linear-gradient(135deg, var(--demo-brand), var(--demo-brand-deep));
     transition: background .4s var(--menu-ease);
 }

 .demo-screen-cover * {
     color: var(--demo-on-brand);
 }

 .demo-screen-cover-title {
     position: relative;
     z-index: 1;
     width: 58%;
     font-size: 21px;
     font-weight: 900;
 }

 html[lang="ar"] .demo-screen-cover-title {
     line-height: 1.35;
 }

 .demo-screen-cover-sub {
     position: relative;
     z-index: 1;
     width: 58%;
     margin-top: 6px;
     font-size: 12px;
     ;
     opacity: .9;
 }

 .demo-screen-cover-img {
     position: absolute;
     top: 50%;
     inset-inline-end: -26px;
     width: 136px;
     height: 136px;
     border-radius: 50%;
     border: 5px solid rgba(255, 255, 255, 0.2);
     transform: translateY(-50%);
 }

 .demo-screen-cats {
     display: flex;
     flex-shrink: 0;
     gap: 6px;
     padding: 12px;
     overflow-x: auto;
     scrollbar-width: none;
 }

 .demo-screen-cats::-webkit-scrollbar {
     display: none;
 }

 .demo-cat {
     flex-shrink: 0;
     height: 34px;
     padding: 0px 14px;
     border: 1px solid var(--demo-line);
     border-radius: var(--roundness-full);
     background-color: var(--demo-card);
     font-size: 13px;
     font-weight: 700;
     cursor: pointer;
     transition: background-color .2s, color .2s;
 }

 .demo-phone-screen .demo-cat-active {
     background-color: var(--demo-brand);
     border-color: var(--demo-brand);
     color: var(--demo-on-brand);
 }

 .demo-screen-items {
     display: flex;
     flex: 1;
     flex-direction: column;
     gap: 8px;
     padding: 0px 12px 28px;
     overflow-y: auto;
     scrollbar-width: none;
 }

 .demo-screen-items::-webkit-scrollbar {
     display: none;
 }

 .demo-item {
     display: grid;
     grid-template-columns: 72px 1fr;
     gap: 12px;
     align-items: center;
     width: 100%;
     padding: 8px;
     border: 1px solid var(--demo-line);
     border-radius: 18px;
     background-color: var(--demo-card);
     text-align: start;
     cursor: pointer;
     animation: demoItemIn .45s var(--menu-ease) both;
 }

 .demo-item:nth-child(2) {
     animation-delay: .05s;
 }

 .demo-item:nth-child(3) {
     animation-delay: .1s;
 }

 .demo-item:nth-child(4) {
     animation-delay: .15s;
 }

 @keyframes demoItemIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: none;
     }
 }

 .demo-item-img {
     width: 72px;
     height: 72px;
     border-radius: 14px;
 }

 .demo-item-text {
     display: flex;
     flex-direction: column;
     min-width: 0;
 }

 .demo-item-name {
     font-size: 14px;
     font-weight: 800;
 }

 .demo-item-desc {
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     overflow: hidden;
     margin-top: 2px;
     font-size: 12px;
     ;
 }

 .demo-phone-screen .demo-item-desc,
 .demo-phone-screen .demo-item-kcal {
     color: var(--demo-soft);
 }

 .demo-item-meta {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-top: 6px;
 }

 .demo-phone-screen .demo-item-price {
     font-size: 14px;
     font-weight: 800;
     color: var(--demo-brand);
 }

 .demo-item-kcal {
     font-size: 11px;
     font-weight: 700;
 }

 .demo-phone-home {
     position: absolute;
     z-index: 6;
     bottom: 18px;
     left: 50%;
     width: 120px;
     height: 5px;
     border-radius: var(--roundness-full);
     background-color: var(--demo-ink);
     opacity: .25;
     transform: translateX(-50%);
 }

 /* Dish sheet inside the demo phone */
 .demo-sheet {
     position: absolute;
     z-index: 5;
     inset: 0;
     visibility: hidden;
     transition: visibility 0s linear .4s;
 }

 .demo-sheet-open {
     visibility: visible;
     transition-delay: 0s;
 }

 .demo-sheet-backdrop {
     position: absolute;
     inset: 0;
     border: 0;
     background-color: rgba(12, 9, 28, 0.45);
     opacity: 0;
     cursor: pointer;
     transition: opacity .35s var(--menu-ease);
 }

 .demo-sheet-open .demo-sheet-backdrop {
     opacity: 1;
 }

 .demo-sheet-panel {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     max-height: 86%;
     overflow-y: auto;
     padding: 10px 10px 34px;
     border-radius: 28px 28px 0 0;
     background-color: var(--demo-surface);
     transform: translateY(100%);
     transition: transform .4s var(--menu-ease);
     scrollbar-width: none;
 }

 .demo-sheet-open .demo-sheet-panel {
     transform: none;
 }

 .demo-sheet-close {
     position: absolute;
     z-index: 2;
     top: 20px;
     inset-inline-end: 20px;
     display: grid;
     place-items: center;
     width: 34px;
     height: 34px;
     border: 0;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.92);
     cursor: pointer;
 }

 .demo-phone-screen .demo-sheet-close {
     color: #0C091C;
 }

 .demo-phone-screen .demo-sheet-close .menu-icon {
     width: 18px;
     height: 18px;
     color: inherit;
 }

 .demo-sheet-img {
     height: 190px;
     border-radius: 20px;
 }

 .demo-sheet-body {
     padding: 14px 6px 0px;
 }

 .demo-sheet-head {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 12px;
 }

 .demo-sheet-name {
     font-size: 19px;
     font-weight: 900;
 }

 .demo-phone-screen .demo-sheet-price {
     flex-shrink: 0;
     font-size: 17px;
     font-weight: 900;
     color: var(--demo-brand);
 }

 .demo-phone-screen .demo-sheet-desc {
     margin-top: 6px;
     font-size: 13px;
     ;
     color: var(--demo-soft);
 }

 .demo-sheet-nutri {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 6px;
     margin-top: 12px;
 }

 .demo-sheet-nutri-cell {
     padding: 8px 4px;
     border: 1px solid var(--demo-line);
     border-radius: 12px;
     background-color: var(--demo-card);
     text-align: center;
 }

 .demo-sheet-nutri-cell-kcal {
     background-color: var(--demo-brand);
     border-color: var(--demo-brand);
 }

 .demo-sheet-nutri-val {
     display: block;
     font-size: 14px;
     font-weight: 900;
 }

 .demo-sheet-nutri-lbl {
     display: block;
     font-size: 10px;
     font-weight: 600;
 }

 .demo-phone-screen .demo-sheet-nutri-cell-kcal * {
     color: var(--demo-on-brand);
 }

 .demo-sheet-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin-top: 12px;
 }

 .demo-sheet-tag {
     padding: 4px 10px;
     border-radius: var(--roundness-full);
     background-color: var(--demo-tint);
     font-size: 11px;
     font-weight: 700;
 }

 .demo-sheet-note {
     margin-top: 12px;
     padding: 10px 12px;
     border-radius: 14px;
     background-color: var(--demo-tint);
     font-size: 12px;
     font-weight: 600;
 }

 /* DEMO SECTION ENDS */
 /* ************************************************************** */
 /* WHY SECTION STARTS                                               */
 /* ************************************************************** */

 .why-container {
     background-color: var(--color-white);
 }

 .why-compare {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--dim-16px); 
 }

 .why-card {
     padding: var(--dim-32px);
     border-radius: var(--roundness);
 }

 .why-card-old {
     border: 1px solid var(--color-stroke);
     background-color: var(--color-bg);
 }

 .why-card-new {
     background: var(--menu-dark-gradient);
     box-shadow: var(--shadow);
 }

 .why-card-label {
     display: inline-block;
     padding: var(--dim-4px) var(--dim-8px);
     border-radius: var(--roundness-full);
     font-size: var(--font-medium);
 }

 .why-card-old .why-card-label {
     background-color: var(--color-red-light);
     color: var(--color-red);
 }

 .why-card-new .why-card-label {
     background-color: var(--color-brand-light);
     color: #5ee39f;
 }

 .why-card-title {
     margin-top: var(--dim-16px);
     font-size: var(--font-large);
     font-weight: 800;
     color: var(--color-black);
 }

 .why-card-new .why-card-title {
     color: var(--color-white);
 }

 .why-list {
     display: flex;
     flex-direction: column;
     margin-top: var(--dim-24px);
     list-style: none;
 }

 .why-list>li {
     display: flex;
     align-items: center;
     gap: var(--dim-16px);
     padding: var(--dim-16px) 0px;
     border-bottom: 1px solid var(--color-stroke);
     font-size: var(--font-medium);
     color: var(--color-gray);
 }

 .why-list>li:last-child {
     border-bottom: 0;
 }

 .why-card-new .why-list>li {
     border-bottom-color: rgba(255, 255, 255, 0.08);
     color: var(--color-white)
 }

 .why-mark {
     display: grid;
     place-items: center;
     width: 20px;
     height: 20px;
     flex-shrink: 0;
     border-radius: 50%;
 }

 .why-mark .menu-icon {
     width: 14px;
     height: 14px;
 }

 .why-mark-x {
     background-color: var(--color-red-light);
     color: var(--color-red);
 }

 .why-mark-check {
     background-color: var(--color-brand);
     color: var(--color-white);
 }

 /* WHY SECTION ENDS */
 /* ************************************************************** */
 /* FEATURE SECTION STARTS                                           */
 /* ************************************************************** */

 .feature-container {
     background-color: var(--color-bg);
 }

 .feature-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: var(--dim-16px);
 }

 .feature-item {
     padding: var(--dim-16px);
     border: 1px solid var(--color-stroke);
     border-radius: var(--roundness);
     background-color: var(--color-white);
     transition: transform .3s var(--menu-ease), box-shadow .3s;
 }

 @media (hover: hover) and (pointer: fine) {
     .feature-item:hover {
         transform: translateY(-4px);
         box-shadow: var(--shadow-soft);
     }
 }

 .feature-item-icon {
     display: grid;
     place-items: center;
     width: 40px;
     height: 40px;
     border-radius: var(--roundness);
     background-color: var(--color-brand-light);
     color: var(--color-brand-dark);
 }

 .feature-item-title {
     margin-top: var(--dim-16px);
     font-size: var(--font-large);
     color: var(--color-black);
 }

 .feature-item-text {
     margin-top: var(--dim-8px);
     font-size: var(--font-medium);
     ;
     color: var(--color-gray);
 }

 /* FEATURE SECTION ENDS */
 /* ************************************************************** */
 /* SCAN SECTION STARTS                                              */
 /* ************************************************************** */

 .scan-container {
     background-color: var(--color-white);
 }

 .scan-container-inner {
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     gap: var(--dim-separator-gap);
 }

 .scan-content .menu-section-head {
     margin-bottom: var(--dim-32px); 
 }

 .scan-content .menu-general-btn {
     margin-top: var(--dim-32px);
 }

 .scan-visual {
     position: relative;
     display: flex;
     align-items: flex-end;
     justify-content: center;
     height: 480px;
     overflow: hidden;
     border-radius: var(--roundness);
     background:
         radial-gradient(circle at 50% 110%, rgba(16, 157, 89, 0.28), transparent 60%),
         var(--menu-dark-gradient);
 }

 .scan-tent {
     position: relative;
     z-index: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 220px;
     margin-bottom: 70px;
     margin-inline-end: 170px;
     padding: 22px 20px 18px;
     border-radius: 22px 22px 8px 8px;
     background-color: var(--color-white);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
 }

 .scan-tent-title {
     font-size: var(--font-large);
     font-weight: 800;
     color: var(--color-black);
     text-align: center;
 }

 .scan-tent-sub {
     margin-top: var(--dim-4px);
     font-size: var(--font-small);

     color: var(--color-gray);
     text-align: center;
 }

 .scan-qr {
     display: grid;
     place-items: center;
     width: 148px;
     height: 148px;
     margin-top: var(--dim-16px);
 }

 .scan-qr img,
 .scan-qr canvas {
     width: 100% !important;
     height: 100% !important;
 }

 .scan-tent-nfc {
     display: flex;
     align-items: center;
     gap: var(--dim-4px);
     margin-top: var(--dim-16px);
     font-size: var(--font-small);
     font-weight: 700;
     color: var(--color-brand-dark);
 }

 .scan-tent-nfc .menu-icon {
     width: 20px;
     height: 20px;
 }

 .scan-tent-base {
     position: absolute;
     bottom: -20px;
     left: 50%;
     width: 240px;
     height: 22px;
     border-radius: 8px;
     background-color: #2a2547;
     transform: translateX(-50%);
 }

 .scan-phone {
     position: absolute;
     z-index: 2;
     bottom: -40px;
     inset-inline-end: 7%;
     width: 150px;
     height: 300px;
     padding: 7px;
     border-radius: 30px;
     background-color: #07060f;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 2px #2a2547;
     transform: rotate(-12deg);
     animation: scanPhoneTap 3.2s var(--menu-ease) infinite;
 }

 html[dir="rtl"] .scan-phone {
     transform: rotate(12deg);
     animation-name: scanPhoneTapRtl;
 }

 .scan-phone-screen {
     display: flex;
     flex-direction: column;
     gap: 8px;
     height: 100%;
     padding: 26px 10px 10px;
     border-radius: 24px;
     background-color: #F4F8F5;
 }

 .scan-phone-line {
     display: block;
     height: 10px;
     border-radius: var(--roundness-full);
     background-color: rgba(12, 9, 28, 0.1);
 }

 .scan-phone-line:first-child {
     height: 56px;
     border-radius: 12px;
     background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
 }

 .scan-phone-line:nth-child(3) {
     width: 70%;
 }

 .scan-wave {
     position: absolute;
     z-index: 1;
     bottom: 170px;
     inset-inline-end: 30%;
     width: 70px;
     height: 70px;
     border: 2px solid var(--color-brand);
     border-radius: 50%;
     opacity: 0;
     animation: scanWave 3.2s ease-out infinite;
 }

 .scan-wave:nth-of-type(2) {
     animation-delay: .35s;
 }

 .scan-wave:nth-of-type(3) {
     animation-delay: .7s;
 }

 @keyframes scanPhoneTap {

     0%,
     100% {
         transform: translate(0, 0) rotate(-12deg);
     }

     45%,
     60% {
         transform: translate(-26px, -30px) rotate(-8deg);
     }
 }

 @keyframes scanPhoneTapRtl {

     0%,
     100% {
         transform: translate(0, 0) rotate(12deg);
     }

     45%,
     60% {
         transform: translate(26px, -30px) rotate(8deg);
     }
 }

 @keyframes scanWave {
     0% {
         opacity: 0;
         transform: scale(.4);
     }

     45% {
         opacity: .9;
     }

     100% {
         opacity: 0;
         transform: scale(2.2);
     }
 }

 /* SCAN SECTION ENDS */
 /* ************************************************************** */
 /* BRAND SECTION STARTS                                             */
 /* ************************************************************** */

 .brand-container {
     background-color: var(--color-bg);
 }

 .brand-container-inner {
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     gap: var(--dim-separator-gap);
 }

 .brand-content .menu-section-head {
     margin-bottom: var(--dim-32px);
 }

 .brand-swatches {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: var(--dim-16px);
     max-width: 480px;
 }

 .brand-swatch {
     display: flex;
     align-items: center;
     gap: var(--dim-8px);
     padding: var(--dim-8px);
     border: 2px solid var(--color-stroke);
     border-radius: var(--roundness);
     background-color: var(--color-white);
     text-align: start;
     cursor: pointer;
     transition: border-color .2s;
 }

 .brand-swatch-active {
     border-color: var(--color-black);
 }

 .brand-swatch-color {
     width: 30px;
     height: 30px;
     flex-shrink: 0;
     border-radius: 50%;
     box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }

 .brand-swatch-name {
     font-size: var(--font-medium);
     color: var(--color-black);
 }

 .brand-content .menu-check-list {
     margin-top: var(--dim-32px);
 }

 .brand-preview {
     overflow: hidden;
     width: 100%;
     max-width: 440px;
     margin-inline: auto;
     border-radius: var(--roundness);
     background-color: var(--demo-surface);
     box-shadow: var(--shadow);
     transition: background-color .4s var(--menu-ease);
 }

 .brand-preview * {
     color: var(--demo-ink);
 }

 .brand-preview-cover {
     position: relative;
     display: flex;
     align-items: flex-end;
     gap: var(--dim-16px);
     height: 170px;
     padding: var(--dim-24px);
     background:
         radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.18), transparent 45%),
         linear-gradient(135deg, var(--demo-brand), var(--demo-brand-deep));
     transition: background .4s var(--menu-ease);
 }

 .brand-preview-logo {
     display: grid;
     place-items: center;
     width: 64px;
     height: 64px;
     flex-shrink: 0;
     border-radius: 20px;
     background-color: var(--demo-card);
     font-size: 26px;
     font-weight: 900;
     box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
 }

 .brand-preview .brand-preview-logo {
     color: var(--demo-brand);
 }

 .brand-preview .brand-preview-name {
     font-size: 24px;
     font-weight: 900;
     color: var(--demo-on-brand);
 }

 .brand-preview .brand-preview-tag {
     margin-top: var(--dim-4px);
     font-size: 13px;
     ;
     color: var(--demo-on-brand);
     opacity: .85;
 }

 .brand-preview-body {
     display: flex;
     flex-direction: column;
     gap: var(--dim-12px);
     padding: var(--dim-16px);
 }

 .brand-preview-chips {
     display: flex;
     gap: 6px;
 }

 .brand-preview-chip {
     padding: 7px 14px;
     border: 1px solid var(--demo-line);
     border-radius: var(--roundness-full);
     background-color: var(--demo-card);
     font-size: 13px;
     font-weight: 700;
 }

 .brand-preview .brand-preview-chip-active {
     background-color: var(--demo-brand);
     border-color: var(--demo-brand);
     color: var(--demo-on-brand);
 }

 .brand-preview-row {
     display: flex;
     align-items: center;
     gap: var(--dim-12px);
     padding: 10px;
     border: 1px solid var(--demo-line);
     border-radius: 18px;
     background-color: var(--demo-card);
 }

 .brand-preview-plate {
     width: 60px;
     height: 60px;
     flex-shrink: 0;
     border-radius: 50%;
     border: 4px solid var(--demo-tint);
 }

 .brand-preview-plate-1 {
     background: radial-gradient(circle at 35% 35%, #E9B56A, #9C5A2B);
 }

 .brand-preview-plate-2 {
     background: radial-gradient(circle at 40% 40%, #A7D98B, #3F8A4A);
 }

 .brand-preview-text {
     flex: 1;
     min-width: 0;
 }

 .brand-preview-title {
     font-size: 15px;
     font-weight: 800;
 }

 .brand-preview .brand-preview-sub {
     margin-top: 2px;
     font-size: 12px;
     ;
     color: var(--demo-soft);
 }

 .brand-preview .brand-preview-price {
     font-size: 15px;
     font-weight: 900;
     color: var(--demo-brand);
 }

 /* BRAND SECTION ENDS */
 /* ************************************************************** */
 /* MANAGE SECTION STARTS                                            */
 /* ************************************************************** */

 .manage-container {
     background-color: var(--color-white);
 }

 .manage-layout {
     display: grid;
     grid-template-columns: 1.35fr 1fr;
     align-items: center;
     gap: var(--dim-separator-gap);
 }

 .manage-dashboard {
     overflow: hidden;
     border: 1px solid var(--color-stroke);
     border-radius: var(--roundness);
     background-color: var(--color-bg);
     box-shadow: var(--shadow-soft);
 }

 .manage-dashboard-bar {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: var(--dim-12px) var(--dim-16px);
     border-bottom: 1px solid var(--color-stroke);
     background-color: var(--color-white);

 }

 .manage-dashboard-bar>span {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: var(--color-stroke);
 }

 .manage-dashboard-title {
     margin-inline-start: var(--dim-12px);
     font-size: 13px;
     font-weight: 700;
     color: var(--color-gray);
 }

 .manage-dashboard-body {
     display: grid;
     grid-template-columns: 170px 1fr;
     min-height: 380px;
 }

 .manage-sidebar {
     display: flex;
     flex-direction: column;
     gap: var(--dim-4px);
     padding: var(--dim-16px) var(--dim-12px);
     border-inline-end: 1px solid var(--color-stroke);
     background-color: var(--color-white);
 }

 .manage-sidebar-title {
     margin-bottom: var(--dim-8px);
     padding: 0px var(--dim-8px);
     font-size: var(--font-small);
     font-weight: 700;
     color: var(--color-gray);
 }

 .manage-sidebar-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: var(--dim-8px);
     border-radius: 10px;
     font-size: 14px;
     color: var(--color-black);
 }

 .manage-sidebar-item>span {
     font-size: var(--font-small);
     color: var(--color-gray);
 }

 .manage-sidebar-item-active {
     background-color: var(--color-brand-light);
     color: var(--color-brand-dark);
 }

 .manage-sidebar-item-active>span {
     color: var(--color-brand-dark);
 }

 .manage-main {
     display: flex;
     flex-direction: column;
     gap: var(--dim-8px);
     padding: var(--dim-16px);
 }

 .manage-main-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: var(--dim-4px);
 }

 .manage-main-title {
     font-size: 18px;
     font-weight: 800;
     color: var(--color-black);
 }

 .manage-add {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 6px 12px;
     border-radius: var(--roundness-full);
     background-color: var(--color-black);
     font-size: 13px;
     font-weight: 700;
     color: var(--color-white);
 }

 .manage-add .menu-icon {
     width: 16px;
     height: 16px;
 }

 .manage-row {
     display: grid;
     grid-template-columns: 52px 1fr auto auto;
     align-items: center;
     gap: var(--dim-12px);
     padding: var(--dim-8px);
     border: 1px solid var(--color-stroke);
     border-radius: 14px;
     background-color: var(--color-white);
     transition: opacity .3s;
 }

 .manage-row-img {
     width: 52px;
     height: 52px;
     border-radius: 10px;
 }

 .manage-row-text {
     min-width: 0;
 }

 .manage-row-name {
     display: flex;
     align-items: center;
     gap: var(--dim-8px);
     font-size: 15px;
     font-weight: 700;
     color: var(--color-black);
 }

 .manage-row-meta {
     margin-top: 2px;
     font-size: 12px;
     ;
     color: var(--color-gray);
 }

 .manage-row-price {
     font-size: 15px;
     font-weight: 800;
     color: var(--color-black);
 }

 .manage-sold-tag {
     display: none;
     padding: 2px 8px;
     border-radius: var(--roundness-full);
     background-color: var(--color-red-light);
     font-size: 11px;
     font-weight: 700;
     color: var(--color-red);
 }

 .manage-row-sold .manage-sold-tag {
     display: inline-block;
 }

 .manage-row-sold .manage-row-img,
 .manage-row-sold .manage-row-price {
     opacity: .4;
 }

 .manage-switch {
     position: relative;
     width: 44px;
     height: 26px;
     border: 0;
     border-radius: var(--roundness-full);
     background-color: var(--color-stroke);
     cursor: pointer;
     transition: background-color .25s;
 }

 .manage-switch[aria-checked="true"] {
     background-color: var(--color-brand);
 }

 .manage-switch-knob {
     position: absolute;
     top: 3px;
     inset-inline-start: 3px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background-color: var(--color-white);
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
     transition: transform .25s var(--menu-ease);
 }

 .manage-switch[aria-checked="true"] .manage-switch-knob {
     transform: translateX(18px);
 }

 html[dir="rtl"] .manage-switch[aria-checked="true"] .manage-switch-knob {
     transform: translateX(-18px);
 }

 .manage-points {
     display: flex;
     flex-direction: column;
     gap: var(--dim-8px); 
 }

 .manage-point {
     display: flex;
     gap: var(--dim-16px);
     padding: var(--dim-16px) 0px;
     border-bottom: 1px solid var(--color-stroke);
 }

 .manage-point:last-child {
     border-bottom: 0;
 }

 .manage-point-icon {
     display: grid;
     place-items: center;
     width: 40px;
     height: 40px;
     flex-shrink: 0;
     border-radius: var(--roundness);
     background-color: var(--color-brand-light);
     color: var(--color-brand-dark);
 }

 .manage-point-title {
     font-size: var(--font-medium);
     color: var(--color-black);
 }

 .manage-point-text {
     margin-top: var(--dim-4px);
     font-size: var(--font-medium);
     ;
     color: var(--color-gray);
 }

 /* MANAGE SECTION ENDS */
 /* ************************************************************** */
 /* STEPS SECTION STARTS                                             */
 /* ************************************************************** */

 .steps-container {
     background: var(--menu-dark-gradient);
     background-size: 300% 300%;
     animation: diagonalFlow 8s ease-in-out infinite;
 }

 .steps-list {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: var(--dim-separator-gap);
     list-style: none;
 }

 .steps-item {
     position: relative;
     padding: var(--dim-16px);
     border: 1px solid var(--color-black-stroke);
     border-radius: var(--roundness);
     background-color: rgba(255, 255, 255, 0.03);
 }

 .steps-number {
     display: grid;
     place-items: center;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background-color: var(--color-brand);
     font-size: var(--font-large);
     font-weight: 900;
     color: var(--color-white);
 }

 .steps-title {
     margin-top: var(--dim-16px);
     font-size: var(--font-large);
     font-weight: 800;
     color: var(--color-white);
 }

 .steps-text {
     margin-top: var(--dim-8px);
     font-size: var(--font-medium);
     ;
     color: var(--color-gray)
 }

 .steps-cta {
     display: flex;
     justify-content: center;
     margin-top: var(--dim-64px);
 }

 /* STEPS SECTION ENDS */
 /* ************************************************************** */
 /* BENEFIT SECTION STARTS                                           */
 /* ************************************************************** */

 .benefit-container {
     background-color: var(--color-bg); 
 }

 .benefit-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: var(--dim-16px); 
 }

 .benefit-item {
     padding: var(--dim-16px);
     border: 1px solid var(--color-stroke);
     border-radius: var(--roundness);
     background-color: var(--color-white);
 }

 .benefit-item-icon {
     display: grid;
     place-items: center;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background-color: var(--color-black);
     color: var(--color-white);
 }

 .benefit-item-title {
     margin-top: var(--dim-16px);
     font-size: var(--font-large);
     color: var(--color-black);
 }

 .benefit-item-text {
     margin-top: var(--dim-8px);
     font-size: var(--font-medium);

     color: var(--color-gray);
 }

 /* BENEFIT SECTION ENDS */
 /* ************************************************************** */
 /* INDUSTRY SECTION STARTS                                          */
 /* ************************************************************** */

 .industry-container {
     background-color: var(--color-white);
 }

 .industry-container-inner {
     padding: var(--dim-separator-gap) 0px;
 }

 .industry-container .menu-section-head {
     margin-bottom: var(--dim-32px);
 }

 .industry-row {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: var(--dim-12px);
     list-style: none;
 }

 .industry-badge {
     padding: var(--dim-8px);
     border: 1px solid var(--color-stroke);
     border-radius: var(--roundness-full);
     background-color: var(--color-white);
     font-size: var(--font-medium);
     color: var(--color-black);
 }

 /* INDUSTRY SECTION ENDS */
 /* ************************************************************** */
 /* PRODUCTS (PRICING) SECTION STARTS                                */
 /* ************************************************************** */

 .products-container {
     background-color: var(--color-bg);
 }

 .products-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     align-items: start;
     gap: var(--dim-16px);
 }

 .products-plan {
     position: relative;
     display: flex;
     flex-direction: column;
     padding: var(--dim-32px);
     border: 1px solid var(--color-stroke);
     border-radius: var(--roundness);
     background-color: var(--color-white);
 }

 .products-plan-featured {
     border: 2px solid var(--color-brand);
     box-shadow: var(--shadow);
 }

 .products-plan-tag {
     position: absolute;
     top: -14px;
     inset-inline-start: var(--dim-32px);
     padding: var(--dim-4px) var(--dim-8px);
     border-radius: var(--roundness-full);
     background-color: var(--color-brand);
     font-size: var(--font-small);
     font-weight: 700;
     color: var(--color-white);

 }

 .products-plan-name {
     font-size: var(--font-large);
     font-weight: 800;
     color: var(--color-black);
 }

 .products-plan-desc {
     margin-top: var(--dim-4px);
     font-size: var(--font-medium);
     color: var(--color-gray); 
 }

 .products-plan-price {
     margin-top: var(--dim-24px);
     font-size: var(--font-large-extra);
     font-weight: 900;
     color: var(--color-black);
 }

 .products-plan-note {
     font-size: var(--font-medium);
     margin-top: var(--dim-4px);

     color: var(--color-gray);
 }

 .products-plan .menu-general-btn {
     width: 100%;
     margin-top: var(--dim-24px);
 }

 .products-plan .menu-check-list {
     margin-top: var(--dim-16px);
     padding-top: var(--dim-16px);
     border-top: 1px solid var(--color-stroke);
 }

 /* PRODUCTS SECTION ENDS */
 /* ************************************************************** */
 /* FAQ SECTION STARTS                                               */
 /* ************************************************************** */

 .faqs-container {
     background-color: var(--color-white);
 }

 .faqs-list {
     display: flex;
     flex-direction: column;
     gap: var(--dim-8px);
     max-width: 880px;
     margin: 0 auto;
 }

 .faqs-question-container {
     border-radius: var(--roundness);
     background-color: var(--color-lightgray);
     border: 1px solid var(--color-stroke);
 }

 .faqs-question {
     display: flex;
     align-items: center;
     gap: var(--dim-16px);
     width: 100%;
     min-height: 60px;
     padding: var(--dim-12px) var(--dim-16px);
     border: 0;
     background-color: transparent;
     text-align: start;
     cursor: pointer;
 }

 .faqs-question-text {
     flex: 1;
     font-size: var(--font-medium);
     font-weight: 700;
     color: var(--color-black);
 }

 .faqs-question-icon {
     width: 14px;
     height: 14px;
     flex-shrink: 0;
     transition: transform .3s var(--menu-ease);
 }

 .faqs-open .faqs-question-icon {
     transform: rotate(45deg);
 }

 .faqs-question-answer {
     display: grid;
     grid-template-rows: 0fr;
     transition: grid-template-rows .35s var(--menu-ease);
 }

 .faqs-open .faqs-question-answer {
     grid-template-rows: 1fr;
 }

 .faqs-question-answer-inner {
     overflow: hidden;
 }

 .faqs-answer-text {
     padding: 0px var(--dim-16px) var(--dim-16px);
     font-size: var(--font-medium);
     ;
     color: var(--color-gray);
 }

 /* FAQ SECTION ENDS */
 /* ************************************************************** */
 /* ORDER SECTION STARTS                                             */
 /* ************************************************************** */

 .order-container {
     position: relative;
     overflow: hidden;
     background-color: var(--color-brand);
 }


 .order-container-inner {
     position: relative;
     text-align: center;
 }

 .order-title {

     margin: 0 auto;
     font-size: var(--font-large-extra);
     font-weight: 800;
     color: var(--color-white);
 }

 html[lang="ar"] .order-title {
     line-height: 1.4;
 }

 .order-subtitle {
     max-width: 620px;
     margin: var(--dim-8px) auto 0;
     font-size: var(--font-medium);
     color: rgba(255, 255, 255, 0.9);
 }

 .order-container .menu-general-btn {
     margin: 0 auto;
     margin-top: var(--dim-32px);
     border: none;
 }

 /* ORDER SECTION ENDS */
 /* ************************************************************** */
 /* FOOTER SECTION STARTS                                            */
 /* ************************************************************** */



 
 .footer-container {
     margin: 0px;
     padding: 0px;
     display: flex;
     height: fit-content;
     position: relative;
     width: 100%;
     display: flex;
     max-width: var(--global-max-width);
     margin: auto;

     background: #1d183b;
     background: linear-gradient(45deg, #1d183b, #0c091c, #1d183b);
     background-size: 300% 300%;
     animation: diagonalFlow 5s ease-in-out infinite;

 }

 .footer-container-inner {
     margin: 0px;
     padding: 0px;
     width: var(--global-width);
     display: flex;
     flex-direction: column;
     margin: 0 auto;
     height: fit-content;
     padding: var(--dim-32px) 0px;
 }

 .footer-top {
     display: flex;
     width: 100%;


 }

 .footer-main {

     display: flex;
     flex-direction: column;
 }


 .footer-section-title {
     margin: 0px;
     padding: 0px;
     font-size: var(--font-medium);
     color: var(--color-white);
     width: 80%;
 }



 .footer-logo-container {
     display: flex;
     flex-direction: column;
     margin-bottom: var(--dim-16px);


 }

 .footer-logo-container>p {
     margin: 0px;
     padding: 0px;
     color: var(--color-white);
     font-size: var(--font-large-extra);
     font-weight: 900;
     text-transform: uppercase;
     -webkit-text-stroke: 1px var(--color-white);
     width: fit-content;


 }

 .footer-poweredby {
     display: flex;
     align-items: center;
     width: 100%;

 }

 .footer-poweredby>p {
     margin: 0px;
     padding: 0px;
     color: var(--color-white);
     font-size: var(--font-small);
     display: flex;

 }

 .footer-poweredby>img {

     height: 18px;
     margin-left: var(--dim-4px);
     margin-right: var(--dim-4px);
     cursor: pointer;
     object-fit: contain;
 }


 .footer-social-icons {
     display: flex;
     margin-top: auto;
     margin-left: auto;
     justify-self: flex-end;
     align-items: flex-end;

 }

 .footer-social-icons>a {
     width: 40px;
     height: 40px;
     cursor: pointer;

     margin-left: var(--dim-16px);
 }

 @media (hover: hover) and (pointer: fine) {


     .footer-social-icons>a:hover {

         transform: scale(var(--scale-down-effect));
     }
 }


 .footer-social-icons>a>img {
     width: 40px;
     height: 40px;
 }










 .footer-section-ul {
     margin: 0px;
     padding: 0px;
     list-style: none;
     margin-top: var(--dim-16px);
 }

 .footer-section-li {
     margin: 0px;
     padding: 0px;
     font-size: var(--font-small);
     margin-bottom: var(--dim-2px);
     color: var(--color-white);
 }

 .footer-section-a {
     color: var(--color-black);
     text-decoration: none;
     cursor: pointer;
     color: var(--color-white);
     font-size: var(--font-small);
 }

 @media (hover: hover) and (pointer: fine) {
     .footer-section-a:hover {
         color: var(--color-brand);
         text-decoration: underline;
     }



 }


 .footer-middle {
     display: flex;
     margin-top: var(--dim-64px);
     margin-bottom: var(--dim-64px);
 }

 .footer-middle-section {
     width: 25%;
     display: flex;
     flex-direction: column;

 }

 .footer-bottom {
     width: 100%;
     height: fit-content;
     display: flex;
     align-items: center;
     color: var(--color-white);
 }

 .footer-rights {
     margin: 0px;
     padding: 0px;
     color: var(--color-white);
     font-size: var(--font-medium);
 }

 .footer-payment-method {
     margin-left: auto;
 }

 .footer-company {
     color: var(--color-white);
 }


 .footer-no-pointer {
     pointer-events: none;
 }








 /* FOOTER SECTION ENDS */
 /* ************************************************************** */
 /* RESPONSIVE                                                       */
 /* ************************************************************** */

 @media only screen and (max-width: 1350px) {
     .navbar-link {
         padding: var(--dim-8px) var(--dim-12px);
     }

     .feature-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media only screen and (max-width: 1250px) {
     .navbar-item-container {
         display: none;
     }

     .menu-navbar-toggle {
         display: grid;
     }

     .navbar-open .navbar-item-container {
         position: absolute;
         top: calc(100% + var(--dim-8px));
         left: 0;
         right: 0;
         transform: none;
         display: flex;
         flex-direction: column;
         align-items: stretch;
         height: auto;
         padding: var(--dim-8px);
         border-radius: var(--roundness);
         box-shadow: var(--shadow);
     }

     .navbar-open .navbar-link {
         padding: var(--dim-12px) var(--dim-16px);
         font-size: var(--font-medium);
     }

     .demo-container-inner,
     .scan-container-inner,
     .brand-container-inner {
         gap: var(--dim-48px);
     }

     .manage-layout {
         grid-template-columns: 1fr;
     }
 }


  
 @media only screen and (max-width: 1060px) {
     .hero-container-inner {
         grid-template-columns: 1fr;
         min-height: 0;
         padding: var(--dim-48px) 0px 0px;
     }

     .hero-visual {
         height: 520px;
     }

     .demo-container-inner {
         grid-template-columns: 1fr;
         justify-items: center;
     }

     .demo-container-left {
         width: 100%;
     }

     .scan-container-inner,
     .brand-container-inner {
         grid-template-columns: 1fr;
     }

     .benefit-grid,
     .products-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     
 }

 @media only screen and (max-width: 830px) {

     .why-compare,
     .steps-list {
         grid-template-columns: 1fr;
     }

     .products-grid {
         grid-template-columns: 1fr;
         max-width: 520px;
         margin: 0 auto;
     }

     .manage-dashboard-body {
         grid-template-columns: 1fr;
     }

     .manage-sidebar {
         flex-direction: row;
         overflow-x: auto;
         border-inline-end: 0;
         border-bottom: 1px solid var(--color-stroke);
     }

     .manage-sidebar-title {
         display: none;
     }

     .manage-sidebar-item {
         flex-shrink: 0;
         gap: var(--dim-8px);
     }
 }

 @media only screen and (max-width: 700px) {
    

     .menu-section-head {
         margin-bottom: var(--dim-32px);
     }

     .menu-section-head-center {
         text-align: start;
     }

     .hero-title {}

     .hero-visual {
         height: 440px;
     }

     .hero-fb-phone {
         width: 210px;
         height: 430px;
         margin-inline-start: 110px;
     }

     .hero-fb-tent {
         width: 150px;
         padding: 14px;
     }

     .hero-fb-qr {
         width: 100px;
         height: 100px;
     }

     .feature-grid,
     .benefit-grid {
         grid-template-columns: 1fr;
     }

     .why-card {
         padding: var(--dim-24px);
     }

     .scan-visual {
         height: 420px;
     }

     .industry-row {
         justify-content: flex-start;
     }

     .order-container-inner {
         text-align: start;
     }

     .order-title,
     .order-subtitle {
         margin-inline: 0;
     }

     
 }

 @media only screen and (max-width: 600px) {
     .menu-navbar-cta {
         display: none;
     }

     .menu-navbar-poweredby>span {
         display: none;
     }

     .hero-cta-row .menu-general-btn {
         flex: 1 1 100%;
     }

     .demo-phone {
         width: 320px;
         height: 650px;
     }

     .brand-swatches {
         grid-template-columns: repeat(2, 1fr);
     }

     .manage-row {
         grid-template-columns: 44px 1fr auto;
     }

     .manage-row-img {
         width: 44px;
         height: 44px;
     }

     .manage-row-price {
         display: none;
     }

     .scan-tent {
         width: 180px;
         margin-inline-end: 80px;
     }

     .scan-qr {
         width: 116px;
         height: 116px;
     }

     .scan-phone {
         width: 120px;
         height: 240px;
         inset-inline-end: 6%;
     }

     
 }

 @media only screen and (max-width: 400px) {
     .demo-phone {
         width: 100%;
         height: 620px;
         border-radius: 44px;
     }

     .hero-fb-phone {
         margin-inline-start: 80px;
     }

     .menu-language-link {
         min-width: 34px;
     }
 }

 @media (prefers-reduced-motion: reduce) {

     *,
     *::before,
     *::after {
         animation-duration: .01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: .01ms !important;
         scroll-behavior: auto !important;
     }

     .menu-js .menu-reveal {
         opacity: 1;
         transform: none;
     }
 }





   

 @media only screen and (max-width: 1100px) {

     .footer-top {
         flex-direction: column;
     }

     .footer-main {
         width: 100%;
     }

     .footer-social-icons {
         width: 100%;

         margin-top: var(--dim-16px);
         margin-left: 0px;
         justify-self: initial;
         align-items: initial;
         flex-wrap: wrap;

     }

     .footer-social-icons>a {
         margin-right: var(--dim-16px);
         margin-left: 0px;
         margin-bottom: var(--dim-16px);
     }

     .footer-middle {
         display: flex;
         margin-top: var(--dim-32px);
         margin-bottom: var(--dim-32px);
     }

     .footer-section-title {
         width: 100%;
     } 

 }

 @media only screen and (max-width: 1060px) {

    

     .footer-middle-section {
         width: 25% !important;
     }

     .footer-middle {
         flex-wrap: wrap;
     }

     .footer-middle-margin-bottom-16 {
         margin-bottom: var(--dim-16px);
     }

     .footer-middle-margin-left-auto {
         margin-left: auto !important;
     }
 


 }
  

  
 

 @media only screen and (max-width: 550px) {



     .footer-middle-section {
         width: 49% !important;
     }

     .footer-middle {
         flex-wrap: wrap;
     }

     .footer-middle-margin-bottom-16 {
         margin-bottom: var(--dim-16px);
     }

     .footer-middle-margin-left-auto {
         margin-left: auto !important;
     }
 
 
 }