/* ==========================================================================
   WHATSEAZY — LANDING PAGE  ·  full design system
   Paste into: Settings & Integration → Customization → Style → LANDING → Save
   Built on the same class names as your panel's SAMPLE CSS
   (.ud-header · .ud-hero · .ud-main-btn · .ud-about-wrapper · .ud-footer)
   English + Arabic (RTL). No images, no JS, no external requests.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — change a colour here and the whole page follows
   -------------------------------------------------------------------------- */
:root {
    /* template variables (keep these names — the theme reads them) */
    --primary-color: #31CA70;          /* WHATSEAZY green */
    --heading-color: #234666;          /* WHATSEAZY navy  */
    --body-color:    #64748B;          /* slate body text */

    /* brand scale */
    --wz-green:        #31CA70;
    --wz-green-600:    #22A85B;
    --wz-green-400:    #5FDC92;
    --wz-green-50:     #EAF9F0;
    --wz-navy:         #234666;
    --wz-navy-700:     #1B3A56;
    --wz-navy-900:     #16304A;
    --wz-navy-400:     #2F5C84;
    --wz-slate:        #64748B;
    --wz-slate-400:    #94A3B8;
    --wz-line:         #E6EDF3;
    --wz-line-soft:    #F1F5F9;
    --wz-surface:      #F7FAFC;
    --wz-white:        #FFFFFF;

    /* effects */
    --wz-radius-sm: 12px;
    --wz-radius:    18px;
    --wz-radius-lg: 26px;
    --wz-pill:      999px;
    --wz-shadow-xs: 0 2px 8px rgba(35, 70, 102, .05);
    --wz-shadow-sm: 0 8px 24px rgba(35, 70, 102, .07);
    --wz-shadow:    0 20px 48px rgba(35, 70, 102, .11);
    --wz-shadow-lg: 0 34px 74px rgba(35, 70, 102, .16);
    --wz-glow:      0 14px 30px rgba(49, 202, 112, .32);
    --wz-ease:      cubic-bezier(.22, 1, .36, 1);

    /* type */
    --wz-font: "Poppins", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --wz-font-ar: "Cairo", "Tajawal", "Segoe UI", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
    font-family: var(--wz-font) !important;
    color: var(--wz-slate) !important;
    background: var(--wz-white) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--wz-navy) !important;
    font-weight: 800 !important;
    letter-spacing: -.6px !important;
    line-height: 1.18 !important;
}

p { line-height: 1.75 !important; }

a { color: var(--wz-navy); text-decoration: none; transition: color .2s var(--wz-ease); }
a:hover { color: var(--wz-green-600); }

img { max-width: 100%; height: auto; }

::selection { background: rgba(49, 202, 112, .22); color: var(--wz-navy); }

/* section rhythm */
section, .ud-features, .ud-about, .ud-pricing, .ud-testimonials, .ud-faq, .ud-team, .ud-contact {
    padding-top: clamp(64px, 8vw, 118px) !important;
    padding-bottom: clamp(64px, 8vw, 118px) !important;
}

/* --------------------------------------------------------------------------
   3. HEADER  ·  glassy, sticky, quiet
   -------------------------------------------------------------------------- */
.ud-header {
    background-color: rgba(255, 255, 255, .86) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: inset 0 -1px 0 var(--wz-line) !important;
    transition: background-color .3s var(--wz-ease), box-shadow .3s var(--wz-ease), padding .3s var(--wz-ease);
    padding-top: 10px; padding-bottom: 10px;
}
.ud-header.sticky {
    background-color: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .09) !important;
    padding-top: 4px; padding-bottom: 4px;
}
.ud-header .navbar-brand img,
.ud-header .logo img { max-height: 48px !important; width: auto !important; }

.navbar-nav .nav-item { margin: 0 2px; }
.ud-menu-scroll,
.navbar-nav .nav-link {
    color: var(--wz-navy) !important;
    font-weight: 600 !important;
    font-size: 15.5px !important;
    padding: 10px 16px !important;
    border-radius: var(--wz-pill);
    position: relative;
    transition: color .2s var(--wz-ease), background .2s var(--wz-ease);
}
.ud-menu-scroll:hover,
.navbar-nav .nav-link:hover { color: var(--wz-green-600) !important; background: var(--wz-green-50); }
.navbar-nav .nav-link.active,
.ud-menu-scroll.active { color: var(--wz-green-600) !important; }
.navbar-nav .nav-link.active::after,
.ud-menu-scroll.active::after {
    content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px;
    height: 3px; border-radius: 99px; background: var(--wz-green);
}

/* header buttons */
.ud-header .ud-main-btn { padding: 11px 26px !important; font-size: 15px !important; }
.ud-header .ud-white-btn { padding: 10px 24px !important; font-size: 15px !important; }

/* burger */
.navbar-toggler { border: 0 !important; box-shadow: none !important; padding: 6px 10px !important; }
.navbar-toggler .toggler-icon {
    background-color: var(--wz-navy) !important; height: 2px !important; border-radius: 2px;
}
@media (max-width: 991px) {
    .navbar-collapse {
        background: var(--wz-white); border: 1px solid var(--wz-line);
        border-radius: var(--wz-radius); box-shadow: var(--wz-shadow);
        padding: 14px 10px !important; margin-top: 12px;
    }
    .navbar-nav .nav-link { padding: 12px 14px !important; }
    .navbar-nav .nav-link.active::after { display: none; }
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.ud-main-btn,
.btn-primary,
.ud-pricing-btn {
    background: var(--wz-green) !important;
    border: 2px solid var(--wz-green) !important;
    color: var(--wz-white) !important;
    border-radius: var(--wz-pill) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: .2px !important;
    padding: 15px 36px !important;
    box-shadow: var(--wz-glow) !important;
    transition: transform .22s var(--wz-ease), background .22s var(--wz-ease),
                box-shadow .22s var(--wz-ease), border-color .22s var(--wz-ease) !important;
    position: relative;
    overflow: hidden;
}
/* light sweep on hover */
.ud-main-btn::after,
.ud-pricing-btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
    left: -60%; transform: skewX(-20deg);
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
    transition: left .55s var(--wz-ease);
}
.ud-main-btn:hover::after,
.ud-pricing-btn:hover::after { left: 130%; }

.ud-main-btn:hover,
.btn-primary:hover,
.ud-pricing-btn:hover {
    background: var(--wz-green-600) !important;
    border-color: var(--wz-green-600) !important;
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(34, 168, 91, .36) !important;
}
.ud-main-btn:active, .btn-primary:active { transform: translateY(-1px); }

.ud-white-btn {
    background: var(--wz-white) !important;
    color: var(--wz-navy) !important;
    border: 2px solid var(--wz-line) !important;
    border-radius: var(--wz-pill) !important;
    font-weight: 700 !important;
    padding: 13px 32px !important;
    box-shadow: var(--wz-shadow-xs) !important;
    transition: all .22s var(--wz-ease) !important;
}
.ud-white-btn:hover {
    border-color: var(--wz-green) !important;
    color: var(--wz-green-600) !important;
    transform: translateY(-3px);
    box-shadow: var(--wz-shadow-sm) !important;
}

.ud-border-btn {
    background: transparent !important;
    border: 2px solid var(--wz-green) !important;
    color: var(--wz-green-600) !important;
    border-radius: var(--wz-pill) !important;
    font-weight: 700 !important;
}
.ud-border-btn:hover { background: var(--wz-green) !important; color: var(--wz-white) !important; }

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
.ud-hero {
    background:
        radial-gradient(1150px 560px at 8% -12%, rgba(49, 202, 112, .20) 0%, rgba(49, 202, 112, 0) 60%),
        radial-gradient(980px 520px at 96% 4%, rgba(47, 92, 132, .16) 0%, rgba(47, 92, 132, 0) 58%),
        linear-gradient(180deg, #F5FBF8 0%, #FFFFFF 72%) !important;
    padding-top: clamp(130px, 15vw, 190px) !important;
    padding-bottom: clamp(70px, 9vw, 110px) !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* faint engineering grid, faded at the edges */
.ud-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(rgba(35, 70, 102, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35, 70, 102, .05) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(75% 62% at 50% 18%, #000 0%, transparent 100%);
    mask-image: radial-gradient(75% 62% at 50% 18%, #000 0%, transparent 100%);
}
/* slow drifting glow */
.ud-hero::after {
    content: ""; position: absolute; z-index: -1;
    width: 620px; height: 620px; right: -180px; top: -160px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(49, 202, 112, .22), rgba(49, 202, 112, 0));
    animation: wzFloat 16s ease-in-out infinite;
}
@keyframes wzFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-40px, 40px, 0) scale(1.08); }
}

.ud-hero-title {
    font-size: clamp(34px, 5.4vw, 62px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -1.8px !important;
    margin-bottom: 22px !important;
}
/* wrap one or two words in  for the green accent */
.ud-hero-title span,
.ud-hero-title mark {
    color: var(--wz-green) !important;
    background: none !important;
    padding: 0 !important;
}

.ud-hero-desc {
    font-size: clamp(16px, 1.4vw, 19.5px) !important;
    line-height: 1.75 !important;
    color: var(--wz-slate) !important;
    max-width: 660px; margin-left: auto; margin-right: auto;
    margin-bottom: 34px !important;
}

.ud-hero-buttons { gap: 14px; }

.ud-hero-image, .ud-hero-image img {
    border-radius: var(--wz-radius-lg) !important;
    box-shadow: var(--wz-shadow-lg) !important;
}
.ud-hero-image { animation: wzRise .9s var(--wz-ease) both; }
@keyframes wzRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* trust logos strip */
.ud-hero-brands-title, .ud-hero-brands span { color: var(--wz-slate-400) !important; font-size: 14px !important; }
.ud-hero-brands img { opacity: .6; filter: grayscale(1); transition: all .3s var(--wz-ease); }
.ud-hero-brands img:hover { opacity: 1; filter: none; transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   6. SECTION TITLES
   -------------------------------------------------------------------------- */
.ud-section-title { margin-bottom: 52px; }
.ud-section-title span,
.ud-section-title .ud-section-subtitle {
    display: inline-block;
    color: var(--wz-green-600) !important;
    background: var(--wz-green-50);
    font-weight: 800 !important;
    font-size: 12.5px !important;
    letter-spacing: 2.6px !important;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: var(--wz-pill);
    margin-bottom: 16px;
}
.ud-section-title h2 {
    font-size: clamp(27px, 3.6vw, 44px) !important;
    letter-spacing: -1.1px !important;
    margin-bottom: 14px !important;
}
.ud-section-title p {
    color: var(--wz-slate) !important;
    font-size: 17px !important;
    max-width: 640px;
    margin-left: auto; margin-right: auto;
}

/* --------------------------------------------------------------------------
   7. FEATURES
   -------------------------------------------------------------------------- */
.ud-features { background: var(--wz-surface) !important; }

.ud-single-feature {
    background: var(--wz-white) !important;
    border: 1px solid var(--wz-line) !important;
    border-radius: var(--wz-radius) !important;
    padding: 36px 32px !important;
    height: 100%;
    box-shadow: var(--wz-shadow-xs) !important;
    transition: transform .3s var(--wz-ease), box-shadow .3s var(--wz-ease), border-color .3s var(--wz-ease);
    position: relative;
    overflow: hidden;
}
.ud-single-feature::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--wz-green), var(--wz-green-400));
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--wz-ease);
}
.ud-single-feature:hover::before { transform: scaleX(1); }
.ud-single-feature:hover {
    transform: translateY(-8px);
    border-color: rgba(49, 202, 112, .4) !important;
    box-shadow: var(--wz-shadow) !important;
}

.ud-feature-icon {
    width: 66px !important; height: 66px !important;
    border-radius: 18px !important;
    background: var(--wz-green-50) !important;
    color: var(--wz-green-600) !important;
    display: flex !important; align-items: center; justify-content: center;
    margin-bottom: 24px !important;
    transition: transform .3s var(--wz-ease), background .3s var(--wz-ease);
}
.ud-feature-icon svg, .ud-feature-icon i {
    fill: var(--wz-green-600) !important; color: var(--wz-green-600) !important;
    width: 30px; height: 30px; transition: fill .3s var(--wz-ease), color .3s var(--wz-ease);
}
.ud-single-feature:hover .ud-feature-icon { background: var(--wz-green) !important; transform: scale(1.06) rotate(-3deg); }
.ud-single-feature:hover .ud-feature-icon svg,
.ud-single-feature:hover .ud-feature-icon i { fill: #fff !important; color: #fff !important; }

.ud-feature-title { font-size: 21px !important; margin-bottom: 12px !important; }
.ud-feature-desc { color: var(--wz-slate) !important; font-size: 16px !important; }
.ud-feature-link {
    color: var(--wz-green-600) !important; font-weight: 700 !important;
    display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
}
.ud-feature-link:hover { gap: 13px; }

/* --------------------------------------------------------------------------
   8. ABOUT  ·  the class from your sample: .ud-about-wrapper
   -------------------------------------------------------------------------- */
.ud-about { background: var(--wz-white) !important; }

.ud-about-wrapper {
    background-color: var(--wz-surface) !important;
    background-image:
        radial-gradient(680px 340px at 8% 0%, rgba(49, 202, 112, .13), rgba(49, 202, 112, 0) 62%),
        radial-gradient(560px 300px at 100% 100%, rgba(47, 92, 132, .12), rgba(47, 92, 132, 0) 60%) !important;
    border: 1px solid var(--wz-line) !important;
    border-radius: var(--wz-radius-lg) !important;
    padding: clamp(34px, 5vw, 68px) !important;
    box-shadow: var(--wz-shadow-sm) !important;
    overflow: hidden;
    position: relative;
}

.ud-about-content-wrapper { padding: 0 !important; }
.ud-about-title {
    font-size: clamp(25px, 3.1vw, 38px) !important;
    letter-spacing: -1px !important;
    margin-bottom: 18px !important;
}
.ud-about-content p { color: var(--wz-slate) !important; font-size: 17px !important; }

.ud-about-image img { border-radius: var(--wz-radius) !important; box-shadow: var(--wz-shadow) !important; }

/* tick list used inside about / feature columns */
.ud-about-list, .ud-list { list-style: none !important; padding-left: 0 !important; margin-top: 22px; }
.ud-about-list li, .ud-list li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 14px;
    color: var(--wz-navy) !important;
    font-weight: 600 !important;
    font-size: 16.5px;
}
.ud-about-list li::before, .ud-list li::before {
    content: "";
    position: absolute; left: 0; top: 3px;
    width: 22px; height: 22px; border-radius: 999px;
    background: var(--wz-green-50);
    box-shadow: inset 0 0 0 2px var(--wz-green);
}
.ud-about-list li::after, .ud-list li::after {
    content: "";
    position: absolute; left: 7px; top: 10px;
    width: 8px; height: 4px;
    border-left: 2px solid var(--wz-green-600);
    border-bottom: 2px solid var(--wz-green-600);
    transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   9. PRICING
   -------------------------------------------------------------------------- */
.ud-pricing { background: var(--wz-surface) !important; }

.ud-single-pricing {
    background: var(--wz-white) !important;
    border: 1px solid var(--wz-line) !important;
    border-radius: var(--wz-radius-lg) !important;
    padding: 44px 36px !important;
    box-shadow: var(--wz-shadow-xs) !important;
    transition: transform .3s var(--wz-ease), box-shadow .3s var(--wz-ease), border-color .3s var(--wz-ease);
    position: relative;
    height: 100%;
    overflow: hidden;
}
.ud-single-pricing:hover { transform: translateY(-8px); box-shadow: var(--wz-shadow) !important; }

.ud-single-pricing.active,
.ud-single-pricing.highlight,
.ud-single-pricing.popular {
    border: 2px solid var(--wz-green) !important;
    box-shadow: 0 28px 62px rgba(49, 202, 112, .22) !important;
    transform: translateY(-6px);
}
.ud-single-pricing.active::before,
.ud-single-pricing.highlight::before,
.ud-single-pricing.popular::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
    background: linear-gradient(90deg, var(--wz-green), var(--wz-green-600));
}

.ud-pricing-header { padding-bottom: 24px; border-bottom: 1px dashed var(--wz-line); margin-bottom: 24px; }
.ud-pricing-header h3, .ud-pricing-title {
    font-size: 20px !important; color: var(--wz-navy) !important; margin-bottom: 6px !important;
}
.ud-pricing-header p { color: var(--wz-slate) !important; font-size: 15px !important; }
.ud-pricing-header h4, .ud-price, .ud-pricing-price {
    font-size: clamp(34px, 4vw, 46px) !important;
    color: var(--wz-navy) !important;
    letter-spacing: -1.6px !important;
    margin-top: 14px !important;
}
.ud-pricing-header h4 span, .ud-price span {
    font-size: 16px !important; font-weight: 600 !important; color: var(--wz-slate) !important;
    letter-spacing: 0 !important;
}

.ud-pricing-body ul, .ud-pricing-features { list-style: none !important; padding-left: 0 !important; }
.ud-pricing-body ul li, .ud-pricing-features li {
    position: relative;
    padding: 11px 0 11px 30px !important;
    color: var(--wz-navy) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    border-bottom: 1px solid var(--wz-line-soft);
}
.ud-pricing-body ul li:last-child, .ud-pricing-features li:last-child { border-bottom: 0; }
.ud-pricing-body ul li::before, .ud-pricing-features li::before {
    content: "";
    position: absolute; left: 0; top: 18px;
    width: 8px; height: 4px;
    border-left: 2.5px solid var(--wz-green);
    border-bottom: 2.5px solid var(--wz-green);
    transform: rotate(-45deg);
}
.ud-pricing-body ul li.off, .ud-pricing-features li.off { color: var(--wz-slate-400) !important; }
.ud-pricing-body ul li.off::before { border-color: var(--wz-slate-400); }

.ud-pricing-btn { width: 100%; text-align: center; margin-top: 28px !important; }

.ud-popular-tag, .ud-single-pricing .badge {
    background: var(--wz-green) !important;
    color: #fff !important;
    border-radius: var(--wz-pill) !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase;
    padding: 8px 18px !important;
    box-shadow: var(--wz-glow);
}

/* --------------------------------------------------------------------------
   10. TESTIMONIALS
   -------------------------------------------------------------------------- */
.ud-testimonials { background: var(--wz-white) !important; }

.ud-single-testimonial {
    background: var(--wz-white) !important;
    border: 1px solid var(--wz-line) !important;
    border-radius: var(--wz-radius) !important;
    padding: 34px 32px !important;
    box-shadow: var(--wz-shadow-xs) !important;
    height: 100%;
    transition: transform .3s var(--wz-ease), box-shadow .3s var(--wz-ease);
    position: relative;
}
.ud-single-testimonial:hover { transform: translateY(-6px); box-shadow: var(--wz-shadow) !important; }
.ud-single-testimonial::before {
    content: "\201C";
    position: absolute; right: 26px; top: 6px;
    font-size: 84px; line-height: 1; color: var(--wz-green-50); font-weight: 800;
}
.ud-testimonial-ratings i, .ud-testimonial-ratings svg { color: #FFB020 !important; fill: #FFB020 !important; }
.ud-testimonial-content, .ud-single-testimonial p {
    color: var(--wz-navy) !important; font-size: 17px !important; line-height: 1.8 !important;
}
.ud-testimonial-image img { border-radius: 999px !important; border: 3px solid var(--wz-green-50); }
.ud-testimonial-name, .ud-testimonial-info h5 { color: var(--wz-navy) !important; font-size: 17px !important; }
.ud-testimonial-designation, .ud-testimonial-meta { color: var(--wz-slate) !important; font-size: 14.5px !important; }

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */
.ud-faq { background: var(--wz-surface) !important; }

.ud-single-faq { margin-bottom: 16px; }
.ud-single-faq .accordion-button, .accordion-button, .ud-faq-btn {
    background: var(--wz-white) !important;
    color: var(--wz-navy) !important;
    font-weight: 700 !important;
    font-size: 17.5px !important;
    border: 1px solid var(--wz-line) !important;
    border-radius: var(--wz-radius-sm) !important;
    padding: 20px 24px !important;
    box-shadow: var(--wz-shadow-xs) !important;
    transition: all .25s var(--wz-ease) !important;
}
.accordion-button:not(.collapsed), .ud-faq-btn[aria-expanded="true"] {
    color: var(--wz-green-600) !important;
    border-color: rgba(49, 202, 112, .45) !important;
    box-shadow: var(--wz-shadow-sm) !important;
}
.accordion-button:focus { box-shadow: 0 0 0 4px rgba(49, 202, 112, .15) !important; }
.accordion-button::after { filter: none; }
.accordion-body, .ud-faq-body {
    color: var(--wz-slate) !important;
    font-size: 16.5px !important;
    padding: 6px 24px 22px !important;
}

/* --------------------------------------------------------------------------
   12. TEAM
   -------------------------------------------------------------------------- */
.ud-single-team {
    background: var(--wz-white) !important;
    border: 1px solid var(--wz-line) !important;
    border-radius: var(--wz-radius) !important;
    padding: 30px !important;
    text-align: center;
    box-shadow: var(--wz-shadow-xs) !important;
    transition: transform .3s var(--wz-ease), box-shadow .3s var(--wz-ease);
}
.ud-single-team:hover { transform: translateY(-6px); box-shadow: var(--wz-shadow) !important; }
.ud-team-image img { border-radius: var(--wz-radius-sm) !important; }
.ud-team-info h5 { color: var(--wz-navy) !important; margin-top: 18px; }
.ud-team-info h6 { color: var(--wz-green-600) !important; font-weight: 600 !important; }

/* --------------------------------------------------------------------------
   13. CTA BAND + CONTACT
   -------------------------------------------------------------------------- */
.ud-cta, .ud-contact {
    background: linear-gradient(150deg, var(--wz-navy-400) 0%, var(--wz-navy) 55%, var(--wz-navy-900) 100%) !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ud-cta::before, .ud-contact::before {
    content: ""; position: absolute; z-index: -1;
    width: 660px; height: 660px; left: -190px; top: -250px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(49, 202, 112, .30), rgba(49, 202, 112, 0));
}
.ud-cta::after, .ud-contact::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .06;
    background-image:
        linear-gradient(#fff 1px, transparent 1px),
        linear-gradient(90deg, #fff 1px, transparent 1px);
    background-size: 62px 62px;
}
.ud-cta h1, .ud-cta h2, .ud-cta h3,
.ud-contact h1, .ud-contact h2, .ud-contact-title { color: #fff !important; }
.ud-cta p, .ud-contact p, .ud-cta-desc { color: #CBD8E4 !important; font-size: 17.5px !important; }

/* contact info blocks */
.ud-single-info { display: flex; gap: 16px; margin-bottom: 26px; }
.ud-info-icon {
    width: 50px; height: 50px; flex: none; border-radius: 14px;
    background: rgba(255, 255, 255, .10);
    display: flex; align-items: center; justify-content: center;
}
.ud-info-icon svg, .ud-info-icon i { fill: var(--wz-green) !important; color: var(--wz-green) !important; }
.ud-info-meta h5 { color: #fff !important; font-size: 17px !important; margin-bottom: 4px; }
.ud-info-meta p, .ud-info-meta a { color: #CBD8E4 !important; }
.ud-info-meta a:hover { color: var(--wz-green) !important; }

/* contact form card */
.ud-contact-form-wrapper, .ud-contact-form {
    background: var(--wz-white) !important;
    border-radius: var(--wz-radius-lg) !important;
    box-shadow: 0 34px 70px rgba(0, 0, 0, .22) !important;
    padding: clamp(26px, 3.4vw, 44px) !important;
}
.ud-form-label, .ud-contact-form label {
    color: var(--wz-navy) !important; font-weight: 600 !important; font-size: 14.5px !important; margin-bottom: 8px !important;
}
.ud-contact-form .form-control,
.ud-contact-form input, .ud-contact-form textarea, .ud-contact-form select {
    border: 1.5px solid var(--wz-line) !important;
    border-radius: var(--wz-radius-sm) !important;
    background: #FBFDFE !important;
    color: var(--wz-navy) !important;
    padding: 14px 16px !important;
    font-size: 15.5px !important;
    transition: border-color .2s var(--wz-ease), box-shadow .2s var(--wz-ease), background .2s var(--wz-ease) !important;
}
.ud-contact-form .form-control::placeholder { color: #A9B7C4 !important; }
.ud-contact-form .form-control:focus,
.ud-contact-form input:focus, .ud-contact-form textarea:focus {
    border-color: var(--wz-green) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(49, 202, 112, .16) !important;
    outline: 0 !important;
}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.ud-footer {
    background: var(--wz-navy-900) !important;
    color: #B9C6D1 !important;
    position: relative;
    overflow: hidden;
}
.ud-footer::before {
    content: ""; position: absolute; width: 560px; height: 560px; left: -180px; top: -230px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(49, 202, 112, .16), rgba(49, 202, 112, 0));
}
.ud-footer > * { position: relative; }
.ud-widget-logo img { max-height: 46px; margin-bottom: 20px; }
.ud-widget-desc, .ud-footer p { color: #9FB0BF !important; font-size: 15.5px !important; }
.ud-widget-title, .ud-footer h4, .ud-footer h5 {
    color: #fff !important; font-size: 18px !important; margin-bottom: 20px !important;
}
.ud-widget-links li { margin-bottom: 11px; }
.ud-footer a, .ud-widget-links li a { color: #B9C6D1 !important; font-size: 15.5px !important; }
.ud-footer a:hover, .ud-widget-links li a:hover { color: var(--wz-green) !important; padding-left: 4px; }

.ud-widget-socials a {
    width: 42px; height: 42px; border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    display: inline-flex; align-items: center; justify-content: center;
    margin-right: 9px;
    transition: all .25s var(--wz-ease);
}
.ud-widget-socials a:hover {
    background: var(--wz-green) !important; color: #fff !important; transform: translateY(-3px);
}
.ud-widget-socials a svg, .ud-widget-socials a i { fill: currentColor; }

.ud-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .10) !important;
    margin-top: 44px; padding-top: 26px;
}
.ud-footer-bottom p, .ud-footer-bottom a { color: #8FA2B2 !important; font-size: 14.5px !important; }

/* back to top */
.back-to-top {
    background: var(--wz-green) !important;
    border-radius: 999px !important;
    width: 48px !important; height: 48px !important;
    box-shadow: var(--wz-glow) !important;
    transition: transform .25s var(--wz-ease) !important;
}
.back-to-top:hover { transform: translateY(-4px); background: var(--wz-green-600) !important; }

/* --------------------------------------------------------------------------
   15. SCROLLBAR
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #EEF3F7; }
::-webkit-scrollbar-thumb { background: #C6D2DE; border-radius: 999px; border: 3px solid #EEF3F7; }
::-webkit-scrollbar-thumb:hover { background: var(--wz-green); }

/* --------------------------------------------------------------------------
   16. ARABIC / RTL
   Activates automatically when the interface language is Arabic.
   -------------------------------------------------------------------------- */
html[lang="ar"], html[dir="rtl"], body.rtl { direction: rtl; text-align: right; }

html[lang="ar"] body, [dir="rtl"] body,
html[lang="ar"] .ud-hero-title, [dir="rtl"] .ud-hero-title {
    font-family: var(--wz-font-ar) !important;
}

/* Arabic must never be letter-spaced, and needs more leading */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
html[lang="ar"] .ud-hero-title, html[lang="ar"] .ud-section-title h2,
html[lang="ar"] .ud-about-title, html[lang="ar"] .ud-pricing-header h4 {
    letter-spacing: 0 !important;
    line-height: 1.42 !important;
}
html[lang="ar"] .ud-hero-title, [dir="rtl"] .ud-hero-title { font-size: clamp(30px, 4.6vw, 54px) !important; }
html[lang="ar"] p, html[lang="ar"] .ud-hero-desc,
html[lang="ar"] .ud-feature-desc, html[lang="ar"] .accordion-body,
[dir="rtl"] p { line-height: 1.95 !important; }
html[lang="ar"] .ud-section-title span, [dir="rtl"] .ud-section-title span {
    letter-spacing: 0 !important; text-transform: none;
}
html[lang="ar"] .ud-popular-tag, [dir="rtl"] .ud-popular-tag {
    letter-spacing: 0 !important; text-transform: none;
}

/* mirror the pieces that are pinned to one side */
[dir="rtl"] .ud-about-list li, [dir="rtl"] .ud-list li { padding-left: 0; padding-right: 34px; }
[dir="rtl"] .ud-about-list li::before, [dir="rtl"] .ud-list li::before { left: auto; right: 0; }
[dir="rtl"] .ud-about-list li::after, [dir="rtl"] .ud-list li::after { left: auto; right: 7px; }
[dir="rtl"] .ud-pricing-body ul li, [dir="rtl"] .ud-pricing-features li { padding: 11px 30px 11px 0 !important; }
[dir="rtl"] .ud-pricing-body ul li::before, [dir="rtl"] .ud-pricing-features li::before { left: auto; right: 0; }
[dir="rtl"] .ud-feature-icon { margin-left: auto; margin-right: 0; }
[dir="rtl"] .ud-single-testimonial::before { right: auto; left: 26px; }
[dir="rtl"] .ud-widget-socials a { margin-right: 0; margin-left: 9px; }
[dir="rtl"] .ud-footer a:hover, [dir="rtl"] .ud-widget-links li a:hover { padding-left: 0; padding-right: 4px; }
[dir="rtl"] .ud-cta::before, [dir="rtl"] .ud-contact::before,
[dir="rtl"] .ud-footer::before { left: auto; right: -190px; }
[dir="rtl"] .ud-hero::after { right: auto; left: -180px; }
[dir="rtl"] .navbar-nav { padding-right: 0; }
[dir="rtl"] .ud-main-btn i, [dir="rtl"] .ud-main-btn svg,
[dir="rtl"] .ud-feature-link svg { transform: scaleX(-1); }
[dir="rtl"] .ud-single-feature::before { transform-origin: right; }

/* Mixed Arabic + Latin: let every paragraph pick its own direction from its
   first strong character. This is what stops "‎1,000 conversations" and
   "© 2026 WHATSEAZY" from being reordered inside an RTL page. */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .ud-feature-desc, [dir="rtl"] .ud-widget-desc,
[dir="rtl"] .ud-testimonial-content, [dir="rtl"] .ud-footer-bottom p,
[dir="rtl"] .accordion-body, [dir="rtl"] .ud-info-meta p {
    unicode-bidi: plaintext;
}

/* Prices stay a single left-to-right run, parked on the right of the card */
[dir="rtl"] .ud-price,
[dir="rtl"] .ud-pricing-header h4,
[dir="rtl"] .ud-pricing-price {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: block !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* Phone numbers, e-mail addresses, URLs and anything you tag .ltr */
[dir="rtl"] .ltr,
[dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"], [dir="rtl"] a[href^="http"] {
    direction: ltr;
    display: inline-block;
    unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .ud-single-pricing { padding: 36px 28px !important; }
}
@media (max-width: 991px) {
    .ud-hero { padding-top: 128px !important; text-align: center; }
    .ud-hero-buttons { justify-content: center; }
    .ud-about-wrapper { padding: 32px 26px !important; }
    .ud-single-feature { padding: 30px 26px !important; }
    .ud-section-title { margin-bottom: 40px; }
}
@media (max-width: 575px) {
    .ud-hero-title { letter-spacing: -1px !important; }
    .ud-main-btn, .ud-white-btn, .btn-primary { width: 100%; text-align: center; padding: 14px 24px !important; }
    .ud-hero-buttons { flex-direction: column; }
    .ud-single-pricing { padding: 32px 24px !important; }
    .ud-contact-form-wrapper { padding: 24px 20px !important; }
    .ud-single-testimonial::before { display: none; }
}

/* --------------------------------------------------------------------------
   18. ACCESSIBILITY & PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}
:focus-visible { outline: 3px solid rgba(49, 202, 112, .55) !important; outline-offset: 2px; border-radius: 6px; }

@media print {
    .ud-header, .back-to-top, .ud-cta, .ud-hero::before, .ud-hero::after { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .ud-single-feature, .ud-single-pricing { box-shadow: none !important; border: 1px solid #ccc !important; }
}