/* Generated by tools/build_website.mjs from the Mobile designs. Do not edit.
   Loaded only at (width < 600px). */
html{scroll-behavior:smooth}
body{margin:0;background:#dfe5e0;color:#1f2b26;font-family:'Rubik',system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:#33705b;text-decoration:none}
a:hover{color:#285948}
*{box-sizing:border-box}
section[id]{scroll-margin-top:68px}
[data-snap]::-webkit-scrollbar{display:none}
@keyframes vg-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes vg-hbar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@keyframes vg-htrack{0%,100%{transform:translate(0,0)}35%{transform:translate(34px,8px)}70%{transform:translate(-12px,3px)}}
@keyframes vg-harc{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.02)}}
@keyframes vg-hpop{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-8px) rotate(var(--r,0deg))}}
@keyframes vg-scan{0%{top:-20%}100%{top:110%}}
@keyframes vg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes vg-toast{0%,8%{opacity:0;transform:translateY(14px)}14%,80%{opacity:1;transform:translateY(0)}88%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes vg-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes vg-rv{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@supports (animation-timeline: view()){[data-reveal]{animation:vg-rv linear both;animation-timeline:view();animation-range:entry 0% entry 40%}[data-count]{animation:vg-count linear both;animation-timeline:view();animation-range:entry 10% cover 40%}[data-progress]{animation:vg-progress linear both;animation-timeline:scroll(root)}[data-grow]{transform-origin:top;animation:vg-grow linear both;animation-timeline:view();animation-range:entry 20% cover 70%}}
@keyframes vg-glow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes vg-count{from{--n:0}}
@keyframes vg-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
[data-count]::after,[data-live]::after{content:counter(n)}
@keyframes vg-sheen{to{background-position:300% 0}}
@keyframes vg-rise{from{transform:translateY(.4em);filter:blur(6px)}to{transform:none;filter:blur(0)}}
@keyframes vg-marquee{to{transform:translateX(-50%)}}
@keyframes vg-shine{0%,55%{transform:translateX(-150%) skewX(-20deg)}100%{transform:translateX(350%) skewX(-20deg)}}
@keyframes vg-aurora{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(10%,-8%) scale(1.15)}66%{transform:translate(-8%,6%) scale(.9)}}
@keyframes vg-ring{0%{box-shadow:0 0 0 0 rgba(51,112,91,.45)}100%{box-shadow:0 0 0 12px rgba(51,112,91,0)}}
@keyframes vg-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vg-radar{to{transform:rotate(360deg)}}
@keyframes vg-ripple{from{transform:scale(.08);opacity:.7}to{transform:scale(1);opacity:0}}
@keyframes vg-blip{0%{opacity:1;transform:scale(1.6)}8%{opacity:1;transform:scale(1)}55%{opacity:.35}100%{opacity:0;transform:scale(1)}}
@keyframes vg-border{to{--a:360deg}}
@keyframes vg-live{0%{--n:37}20%{--n:39}40%{--n:38}60%{--n:41}80%{--n:36}100%{--n:37}}
@keyframes vg-badge{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.35)}86%{transform:scale(.9)}}
@keyframes vg-alert{0%,100%{border-color:#2e3933;box-shadow:0 0 0 0 rgba(217,126,112,0)}50%{border-color:#d97e70;box-shadow:0 0 0 4px rgba(217,126,112,.16)}}
@keyframes vg-type{0%,6%{max-width:0}45%,80%{max-width:230px}92%,100%{max-width:0}}
@keyframes vg-glare{0%,62%{transform:translateX(-160%) rotate(20deg)}100%{transform:translateX(420%) rotate(20deg)}}
@keyframes vg-ticker{to{transform:translateY(-50%)}}
@keyframes vg-pop{0%,10%{opacity:0;transform:translateY(12px) scale(.94)}16%,78%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(-6px) scale(.97)}}
@keyframes vg-menu{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes vg-cta{from{transform:translateY(110%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
/* Arabic design only */
[dir="rtl"] *:not([data-latin]){letter-spacing:0!important}
/* style-hover / style-focus */
.hm1:hover{color:#fff!important}
.hm2:hover{color:#1f2b26!important}
.fm1:focus{border-color:#33705b!important;box-shadow:0 0 0 4px rgba(51,112,91,.14)!important}
.hm3:hover{color:#10201a!important}