.elementor-kit-14{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-ec63165:#4B3FD4;--e-global-color-acb88fa:#6D5DF6;--e-global-color-ee3063e:#000000;--e-global-color-1625bbf:#111111;--e-global-color-5dafe70:#FAF9FE;--e-global-color-44f0bd9:#F6F7FB;--e-global-color-6b6ca07:#E5E2FE;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;font-family:"Inter", Sans-serif;font-size:18px;}.elementor-kit-14 button,.elementor-kit-14 input[type="button"],.elementor-kit-14 input[type="submit"],.elementor-kit-14 .elementor-button{background-color:var( --e-global-color-ec63165 );font-family:"Inter", Sans-serif;font-size:18px;font-weight:600;color:#FFFFFF;border-radius:10px 10px 10px 10px;padding:18px 28px 18px 28px;}.elementor-kit-14 button:hover,.elementor-kit-14 button:focus,.elementor-kit-14 input[type="button"]:hover,.elementor-kit-14 input[type="button"]:focus,.elementor-kit-14 input[type="submit"]:hover,.elementor-kit-14 input[type="submit"]:focus,.elementor-kit-14 .elementor-button:hover,.elementor-kit-14 .elementor-button:focus{background-color:var( --e-global-color-acb88fa );}.elementor-kit-14 e-page-transition{background-color:#FFBC7D;}.elementor-kit-14 a{font-family:"Inter", Sans-serif;}.elementor-kit-14 h1{font-family:"Inter", Sans-serif;font-size:63px;}.elementor-kit-14 h2{font-family:"Inter", Sans-serif;font-size:44px;}.elementor-kit-14 h3{font-family:"Inter", Sans-serif;font-size:32px;}.elementor-kit-14 h4{font-family:"Inter", Sans-serif;font-size:20px;}.elementor-kit-14 h5{font-family:"Inter", Sans-serif;font-size:18px;}.elementor-kit-14 h6{font-family:"Inter", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;--container-default-padding-top:0px;--container-default-padding-right:20px;--container-default-padding-bottom:0px;--container-default-padding-left:20px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================
   Taadyl — Header (transparent + slide-down sticky) & mobile menu
   Paste at the END of your Custom CSS (after taadyl-global.css).
   Classes to add in Elementor (Advanced > CSS Classes):
   - First header container  -> tdl-header-top
   - Second header container -> tdl-header-sticky
   - Both Nav Menu widgets   -> tdl-nav
   ========================================================== */

/* The header wrapper becomes the reference point for header 1 */
.elementor-location-header {
  position: relative;
}

/* ---------- Header 1: transparent, sits on top of the hero ---------- */
.tdl-header-top {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  background: transparent;
}

/* ---------- Header 2: hidden above the screen, slides down ---------- */
.tdl-header-sticky {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.06), 0 8px 24px -12px rgba(17, 17, 17, 0.18);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.35s ease, visibility 0s linear 0.35s;
}
.tdl-header-sticky.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.35s ease, visibility 0s;
}

/* WordPress admin bar (only visible to you when logged in) */
.admin-bar .tdl-header-sticky { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .tdl-header-sticky { top: 46px; }
}

/* In the Elementor editor: show both headers normally so you can edit them */
.elementor-editor-active .tdl-header-top,
.elementor-editor-active .tdl-header-sticky {
  position: relative;
  transform: none;
  visibility: visible;
}

/* ---------- Mobile & tablet menu ---------- */

/* Burger button */
.tdl-nav .elementor-menu-toggle {
  background: transparent;
  color: var(--tdl-heading);
  border-radius: var(--tdl-radius-sm);
  padding: 8px;
  transition: background-color 0.2s ease;
}
.tdl-nav .elementor-menu-toggle.elementor-active {
  background: var(--tdl-tint-1);
  color: var(--tdl-primary);
}

/* Dropdown panel */
.tdl-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
  background: #FFFFFF;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 20px 32px -16px rgba(17, 17, 17, 0.2);
  margin-top: 12px;
}
/* Padding on the list, not the panel, so nothing shows while closed */
.tdl-nav .elementor-nav-menu--dropdown .elementor-nav-menu {
  padding: 8px 20px 20px;
}

/* Menu links */
.tdl-nav .elementor-nav-menu--dropdown a.elementor-item {
  padding: 14px 12px;
  font-size: 17px;
  font-weight: 500;
  color: var(--tdl-text);
  background: transparent;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: 8px;
}
.tdl-nav .elementor-nav-menu--dropdown li:last-child a.elementor-item {
  border-bottom: 0;
}
.tdl-nav .elementor-nav-menu--dropdown a.elementor-item:hover,
.tdl-nav .elementor-nav-menu--dropdown a.elementor-item:focus-visible,
.tdl-nav .elementor-nav-menu--dropdown a.elementor-item-active {
  background: var(--tdl-tint-1);
  color: var(--tdl-primary);
}



/* ==========================================================
   Taadyl — Global styles for Elementor (V3 widgets)
   Paste in: Elementor > Site Settings > Custom CSS
   Header styles live in taadyl-header.css (paste after this).

   HOW TO USE A CLASS:
   Select a container or widget > Advanced > CSS Classes >
   type the class name WITHOUT the dot (e.g. tdl-card).
   Classes marked "HTML widget" are used inside an HTML widget.
   ========================================================== */

:root {
  /* Brand colors */
  --tdl-primary: #4B3FD4;      /* buttons, main brand */
  --tdl-accent: #6D5DF6;       /* highlights, icons, outline buttons */
  --tdl-logo-dot: #8040ED;
  --tdl-heading: #000000;
  --tdl-text: #111111;

  /* Backgrounds & tints */
  --tdl-bg-soft: #FAF9FE;      /* lavender section boxes */
  --tdl-bg-gray: #F6F7FB;      /* logo strip */
  --tdl-tint-1: #ECEBFD;       /* icon tiles */
  --tdl-tint-2: #E5E2FE;       /* step circles, quote icons */

  /* Shape */
  --tdl-radius-sm: 10px;       /* buttons, screenshots */
  --tdl-radius-md: 13px;       /* cards */
  --tdl-radius-lg: 20px;       /* section boxes */

  /* Shadows */
  --tdl-shadow-card: 0 6px 13.4px -6px rgba(0, 0, 0, 0.25);
  --tdl-shadow-shot: 0 5px 48px -14px rgba(0, 0, 0, 0.25);
  --tdl-shadow-pin: 0 0 0 4px rgba(75, 63, 212, 0.18), 0 4px 10px rgba(75, 63, 212, 0.35);
}


/* ==========================================================
   1. TEXT
   ========================================================== */

/* Purple word in a heading.
   USE: Heading widget > Title field:
   The easiest way to collect website <span class="tdl-highlight">feedback.</span> */
.tdl-highlight {
  color: var(--tdl-accent);
}


/* Row of short points with purple check circles (under the hero text).
   USE (HTML widget):
   <ul class="tdl-checks">
     <li>No install needed</li>
     <li>Clients comment without an account</li>
     <li>Free to start</li>
   </ul> */
.tdl-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tdl-checks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 17px/1.4 "Inter", sans-serif;
  color: var(--tdl-text);
}
.tdl-checks li::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tdl-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
@media (max-width: 767px) {
  .tdl-checks li { font-size: 16px; }
}


/* One-word steps with numbers and arrows (under the hero text).
   USE (HTML widget):
   <ol class="tdl-flow">
     <li>Paste</li>
     <li>Comment</li>
     <li>Fix</li>
   </ol> */
.tdl-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tdl-flow;
}
.tdl-flow li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 17px/1 "Inter", sans-serif;
  color: var(--tdl-text);
  counter-increment: tdl-flow;
}
.tdl-flow li::before {
  content: counter(tdl-flow);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tdl-accent);
  color: #FFFFFF;
  font: 700 12px/1 "Inter", sans-serif;
}
.tdl-flow li:not(:last-child)::after {
  content: "";
  width: 22px;
  height: 12px;
  margin-inline-start: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%236D5DF6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.55'%3E%3Cpath d='M1 6h19M15 1.5 20 6l-5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
[dir="rtl"] .tdl-flow li:not(:last-child)::after {
  transform: scaleX(-1);
}
@media (max-width: 767px) {
  .tdl-flow li { font-size: 16px; }
}


/* ==========================================================
   2. SECTION BACKGROUNDS
   Put these on FULL-WIDTH outer containers.
   Use only ONE background class per container, and don't set a
   background image on it in Elementor (a color is fine).
   ========================================================== */

/* Hero wash: soft lavender light from the top-left fading to white
   (the background of the hero in your Figma).
   USE: hero outer container > CSS Classes: tdl-hero-wash */
.tdl-hero-wash {
  --tdl-wash-a: 0%;    /* main glow side */
  --tdl-wash-b: 100%;  /* faint glow side */
  background-color: #FFFFFF;
  background-image:
    radial-gradient(ellipse 55% 70% at var(--tdl-wash-a) 25%, rgba(109, 93, 246, 0.13), transparent 70%),
    radial-gradient(ellipse 45% 55% at var(--tdl-wash-b) 0%, rgba(109, 93, 246, 0.06), transparent 70%),
    linear-gradient(180deg, #FAF9FE 0%, #FFFFFF 100%);
}
[dir="rtl"] .tdl-hero-wash {
  --tdl-wash-a: 100%;
  --tdl-wash-b: 0%;
}

/* Purple glow at the edge of a section.
   USE: outer container > CSS Classes: tdl-glow-start | tdl-glow-end | tdl-glow-both
   start = left (right on Arabic pages), end = right (left on Arabic pages).
   The glow is sized in % of the container, so it always fades out
   BEFORE the top and bottom edges (no hard cut line), whatever the height.
   OPTIONAL per section (Advanced > Custom CSS):
   .elementor-kit-14 { --tdl-glow-w: 55%; --tdl-glow-h: 45%; --tdl-glow-y: 50%; }
   Keep --tdl-glow-h <= the distance from --tdl-glow-y to the nearest edge
   (e.g. y 50% -> h up to 50%, y 40% -> h up to 40%). */
.tdl-glow-start,
.tdl-glow-end,
.tdl-glow-both {
  --tdl-glow-w: 45%;                          /* horizontal reach */
  --tdl-glow-h: 48%;                          /* vertical reach */
  --tdl-glow-y: 50%;                          /* vertical center */
  --tdl-glow-color: rgba(109, 93, 246, 0.20);
  --tdl-glow-left: radial-gradient(ellipse var(--tdl-glow-w) var(--tdl-glow-h) at 0% var(--tdl-glow-y), var(--tdl-glow-color), transparent);
  --tdl-glow-right: radial-gradient(ellipse var(--tdl-glow-w) var(--tdl-glow-h) at 100% var(--tdl-glow-y), var(--tdl-glow-color), transparent);
}
.tdl-glow-start { background-image: var(--tdl-glow-left); }
.tdl-glow-end   { background-image: var(--tdl-glow-right); }
.tdl-glow-both  { background-image: var(--tdl-glow-left), var(--tdl-glow-right); }
[dir="rtl"] .tdl-glow-start { background-image: var(--tdl-glow-right); }
[dir="rtl"] .tdl-glow-end   { background-image: var(--tdl-glow-left); }
@media (max-width: 767px) {
  .tdl-glow-start,
  .tdl-glow-end,
  .tdl-glow-both { --tdl-glow-w: 75%; --tdl-glow-h: 35%; }
}


/* ==========================================================
   3. BOXES & CARDS
   ========================================================== */

/* Lavender rounded box ("Say it. Don't type it.", "Built for every reviewer").
   USE: the boxed container inside the section > CSS Classes: tdl-box
   Add padding in Elementor (e.g. 48px). */
.tdl-box {
  background: var(--tdl-bg-soft);
  border-radius: var(--tdl-radius-lg);
}

/* White card with soft shadow (reviewer cards, testimonials).
   USE: card container > CSS Classes: tdl-card */
.tdl-card {
  background: #FFFFFF;
  border-radius: var(--tdl-radius-md);
  box-shadow: var(--tdl-shadow-card);
}


/* ==========================================================
   4. IMAGES
   ========================================================== */

/* Screenshot with rounded corners + soft shadow.
   USE: Image widget > CSS Classes: tdl-shot */
.tdl-shot img {
  border-radius: var(--tdl-radius-sm);
  box-shadow: var(--tdl-shadow-shot);
}

/* Screenshot inside a browser window (3 dots + URL bar).
   USE: Image widget > CSS Classes: tdl-browser
   URL text (optional): Advanced > Attributes:  data-url|yourwebsite.com */
.tdl-browser {
  position: relative;
  padding-top: 38px;
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: 12px;
  box-shadow: var(--tdl-shadow-shot);
  overflow: hidden;
}
.tdl-browser::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
  background:
    radial-gradient(circle at 18px 19px, #FF5F57 5px, transparent 5.5px),
    radial-gradient(circle at 36px 19px, #FEBC2E 5px, transparent 5.5px),
    radial-gradient(circle at 54px 19px, #28C840 5px, transparent 5.5px),
    #F7F7F9;
}
.tdl-browser::after {
  content: attr(data-url);
  position: absolute;
  top: 8px;
  left: 76px;
  max-width: calc(100% - 92px);
  height: 22px;
  padding-inline: 12px;
  border-radius: 11px;
  background: #ECECF1;
  font: 400 12px/22px "Inter", sans-serif;
  color: #6B6B76;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tdl-browser[data-url=""]::after,
.tdl-browser:not([data-url])::after { min-width: 180px; }
.tdl-browser img {
  display: block;
  width: 100%;
  border-radius: 0;
}

/* Area where you place pins on top of an image.
   USE: the container holding the image + pin HTML widgets > CSS Classes: tdl-pins-area
   Then each pin widget: Advanced > Position: Absolute, offsets in %. */
.tdl-pins-area {
  position: relative;
}


/* ==========================================================
   5. CIRCLES, PINS & ICONS  (HTML widget)
   ========================================================== */

/* Numbered comment pin (like the purple 1, 2, 3 on the mockup).
   USE (HTML widget):  <span class="tdl-pin">1</span>
   With pulse:         <span class="tdl-pin tdl-pin--pulse">1</span> */
.tdl-pin {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tdl-primary);
  color: #FFFFFF;
  font: 600 13px/1 "Inter", sans-serif;
  box-shadow: var(--tdl-shadow-pin);
}
.tdl-pin--pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--tdl-accent);
  animation: tdl-pulse 2s ease-out infinite;
}
@keyframes tdl-pulse {
  from { transform: scale(1); opacity: 0.8; }
  to   { transform: scale(2.2); opacity: 0; }
}

/* Step number circle ("How it works" 1–4).
   USE (HTML widget):  <span class="tdl-step">1</span> */
.tdl-step {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--tdl-tint-2);
  color: var(--tdl-accent);
  font: 700 22px/1 "Inter", sans-serif;
}

/* Small dot with a ring (nodes on the "Feedback everywhere" diagram).
   USE (HTML widget):  <span class="tdl-dot"></span> */
.tdl-dot {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tdl-primary) 0 3.5px, rgba(75, 63, 212, 0.3) 4px);
}

/* Icon in a lavender rounded square (voice note icon, feature icons).
   USE: Icon widget > CSS Classes: tdl-icon-tile */
.tdl-icon-tile .elementor-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--tdl-radius-sm);
  background: var(--tdl-tint-1);
  color: var(--tdl-accent);
  fill: var(--tdl-accent);
}
.tdl-icon-tile .elementor-icon svg {
  width: 22px;
  height: 22px;
}

/* Icon in a white floating circle (top of the reviewer cards).
   USE: Icon widget > CSS Classes: tdl-icon-circle */
.tdl-icon-circle .elementor-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 5px 10.6px -4px rgba(0, 0, 0, 0.25);
}
.tdl-icon-circle .elementor-icon svg {
  width: 22px;
  height: 22px;
}


/* ==========================================================
   6. ACCESSIBILITY
   ========================================================== */

.elementor-button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--tdl-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .tdl-pin--pulse::after { animation: none; }
}


/* ==========================================================
   7. ARABIC / RTL
   ========================================================== */

/* Flip arrows on Arabic pages.
   USE: arrow Icon widget (or button with arrow) > CSS Classes: tdl-flip */
[dir="rtl"] .tdl-flip {
  transform: scaleX(-1);
}

/* Arabic font + no negative letter-spacing (it breaks connected letters).
   Automatic on Arabic pages, nothing to add. */
:lang(ar) body,
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3,
:lang(ar) h4, :lang(ar) h5, :lang(ar) h6,
:lang(ar) .elementor-button,
:lang(ar) .elementor-heading-title {
  font-family: "IBM Plex Sans Arabic", "Inter", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
:lang(ar) p,
:lang(ar) .elementor-text-editor {
  line-height: 1.8;
}/* End custom CSS */