/* =====================================================================
   Durdur design system for Elementor
   Ported from the approved static site (assets/css/style.css) so the
   WordPress build matches it exactly. Content stays editable in
   Elementor; only the look lives here.
   ===================================================================== */
:root{
  --dd-navy:#2E3192;
  --dd-navy-900:#171a4a;
  --dd-green:#38B04F;
  --dd-green-600:#2c9440;
  --dd-deep:#185939;
  --dd-ink:#10152e;
  --dd-body:#5b6484;
  --dd-line:#e6e9f2;
  --dd-soft:#f5f7fc;
  --dd-radius:18px;
  --dd-shadow-sm:0 2px 8px rgba(23,26,74,.06);
  --dd-shadow:0 18px 40px -18px rgba(23,26,74,.28);
  --dd-shadow-lg:0 40px 80px -30px rgba(23,26,74,.38);
  --dd-grad:linear-gradient(125deg,#185939 0%,#23804a 55%,#38B04F 100%);
  --dd-grad-btn:linear-gradient(120deg,#38B04F 0%,#2c9440 100%);
}

/* ---------- base typography, matching the static site ---------- */
.elementor-widget-heading .elementor-heading-title{
  font-family:'Plus Jakarta Sans',sans-serif;color:var(--dd-ink);
  line-height:1.18;letter-spacing:-.02em;
}
.elementor-widget-text-editor{
  font-family:'Inter',sans-serif;font-size:16px;line-height:1.7;color:var(--dd-body);
}
.elementor-widget-text-editor p{margin:0 0 14px}
.elementor-widget-text-editor p:last-child{margin-bottom:0}

/* ---------- section rhythm ---------- */
.dd-sec{padding-top:110px;padding-bottom:110px}
.dd-sec--tight{padding-top:60px;padding-bottom:90px}
.dd-soft{background-color:var(--dd-soft)}

/* ---------- eyebrow pill ---------- */
.dd-eyebrow .elementor-heading-title{
  display:inline-flex;align-items:center;gap:8px;
  font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dd-navy);background:rgba(46,49,146,.08);
  padding:9px 16px;border-radius:99px;
}
.dd-eyebrow .elementor-heading-title::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--dd-green);flex:none;
}

/* ---------- section heading block ---------- */
.dd-head h2.elementor-heading-title{font-size:clamp(30px,4vw,44px);font-weight:800}
.dd-head .elementor-widget-text-editor{font-size:17px}

/* ---------- cards ---------- */
.dd-card{
  background:#fff;border:1px solid var(--dd-line);border-radius:var(--dd-radius);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;
}
.dd-card:hover{transform:translateY(-8px);box-shadow:var(--dd-shadow-lg);border-color:transparent}
.dd-card--flat:hover{transform:none;box-shadow:var(--dd-shadow)}
.dd-card--dark{background:var(--dd-grad);border-color:transparent}
.dd-card--dark .elementor-heading-title{color:#fff}
.dd-card--dark .elementor-widget-text-editor{color:rgba(255,255,255,.85)}

/* ---------- icon boxes ---------- */
.dd-ic .elementor-icon.elementor-icon{
  width:62px;height:62px;border-radius:18px;display:grid;place-items:center;
  background:rgba(46,49,146,.08);color:var(--dd-navy);font-size:26px;transition:.35s;
}
.dd-ic .elementor-icon svg{width:28px;height:28px;fill:var(--dd-navy);height:auto}
.dd-card:hover .dd-ic .elementor-icon.elementor-icon{background:var(--dd-grad-btn);color:#fff;transform:rotate(-6deg) scale(1.06)}
.dd-card:hover .dd-ic .elementor-icon svg{fill:#fff}

.dd-ic--round .elementor-icon.elementor-icon{
  width:60px;height:60px;border-radius:50%;background:var(--dd-grad-btn);color:#fff;
  box-shadow:0 12px 24px -12px rgba(56,176,79,.8);font-size:24px;
}
.dd-ic--round .elementor-icon svg{fill:#fff;width:26px}

.dd-ic--sm .elementor-icon.elementor-icon{
  width:52px;height:52px;border-radius:15px;background:var(--dd-grad);color:#fff;font-size:21px;
}
.dd-ic--sm .elementor-icon svg{fill:#fff;width:22px}

.dd-ic--tint .elementor-icon.elementor-icon{
  width:46px;height:46px;border-radius:14px;background:rgba(56,176,79,.12);
  color:var(--dd-green);font-size:20px;
}
.dd-ic--tint .elementor-icon svg{fill:var(--dd-green);width:21px}

/* ---------- buttons ---------- */
.dd-btn .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:700 15px/1 'Plus Jakarta Sans',sans-serif;
  padding:16px 30px;border-radius:99px;border:0;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,color .25s;
}
.dd-btn .elementor-button:hover{transform:translateY(-3px)}
.dd-btn--green .elementor-button{
  background-image:var(--dd-grad-btn);color:#fff;
  box-shadow:0 12px 26px -10px rgba(56,176,79,.75);
}
.dd-btn--green .elementor-button:hover{box-shadow:0 20px 34px -12px rgba(56,176,79,.85)}
.dd-btn--navy .elementor-button{
  background-color:var(--dd-navy);color:#fff;box-shadow:0 12px 26px -10px rgba(46,49,146,.7);
}
.dd-btn--outline .elementor-button{
  background-color:#fff;color:var(--dd-navy);border:1.5px solid var(--dd-line);
  box-shadow:var(--dd-shadow-sm);
}
.dd-btn--outline .elementor-button:hover{border-color:var(--dd-navy)}
.dd-btn--white .elementor-button{
  background-color:#fff;color:var(--dd-navy);box-shadow:0 16px 34px -14px rgba(0,0,0,.5);
}

/* ---------- tick lists ---------- */
.dd-ticks .elementor-icon-list-item{font:500 15px/1.5 'Inter',sans-serif;color:var(--dd-ink)}
.dd-ticks .elementor-icon-list-icon svg,
.dd-ticks .elementor-icon-list-icon i{color:var(--dd-green);fill:var(--dd-green);font-size:17px}

/* ---------- the hero / banner white wave ----------
   .durdur-forest already uses ::before and ::after for the animated glow,
   so the wave lives in its own empty container at the end of the section. */
.dd-wave{position:relative}
.dd-wave > .e-con-inner{position:static}
.dd-wave .dd-wave-el,
.e-con.dd-wave-el{
  position:absolute;left:0;right:0;bottom:-1px;height:90px;pointer-events:none;z-index:3;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path fill='%23ffffff' d='M0 42c180 40 360 52 720 22S1260 12 1440 34V90H0z'/></svg>") no-repeat center bottom;
  background-size:100% 100%;min-height:0;padding:0;
}

/* ---------- ussd strip pulled over the hero ---------- */
.dd-overlap{margin-top:-78px;position:relative;z-index:5}
@media (max-width:640px){
  .dd-sec{padding-top:76px;padding-bottom:76px}
  .dd-overlap{margin-top:-40px}
  .dd-wave .dd-wave-el,
  .e-con.dd-wave-el{height:50px}
}

/* ---------- about image frame ---------- */
.dd-frame .elementor-widget-container{border-radius:24px;overflow:hidden;box-shadow:var(--dd-shadow-lg)}
.dd-frame img{display:block;width:100%;height:480px;object-fit:cover}
@media (max-width:1080px){.dd-frame img{height:380px}}

/* ---------- stat counters on the dark band ---------- */
.dd-stat .elementor-counter-number-wrapper{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(120deg,#fff,#9cf0ae);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;
}
.dd-stat .elementor-counter-title{
  font:500 14.5px/1.5 'Inter',sans-serif;color:rgba(255,255,255,.7);margin-top:10px;
}

/* ---------- service cards (durdur-service-cards widget) ---------- */
.durdur-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.durdur-svc{
  position:relative;background:#fff;border:1px solid var(--dd-line);border-radius:var(--dd-radius);
  padding:38px 32px;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;
}
.durdur-svc::after{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--dd-grad-btn);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.durdur-svc:hover{transform:translateY(-10px);box-shadow:var(--dd-shadow-lg);border-color:transparent}
.durdur-svc:hover::after{transform:scaleX(1)}
.durdur-svc-ic{
  width:62px;height:62px;border-radius:18px;display:grid;place-items:center;margin-bottom:24px;
  background:rgba(46,49,146,.08);transition:.35s;
}
.durdur-svc-ic svg{width:28px;height:28px;fill:none;stroke:var(--dd-navy);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:.35s}
.durdur-svc:hover .durdur-svc-ic{background:var(--dd-grad-btn);transform:rotate(-6deg) scale(1.06)}
.durdur-svc:hover .durdur-svc-ic svg{stroke:#fff}
.durdur-svc h3{font:700 20px/1.25 'Plus Jakarta Sans',sans-serif;color:var(--dd-ink);margin:0 0 11px}
.durdur-svc-tag{display:block;margin:-4px 0 10px;font:600 13.5px/1.3 'Plus Jakarta Sans',sans-serif;color:var(--dd-green)}
.durdur-svc p{font:400 15px/1.7 'Inter',sans-serif;color:var(--dd-body);margin:0}
.durdur-svc-more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font:700 14px/1 'Plus Jakarta Sans',sans-serif;color:var(--dd-navy);text-decoration:none}
.durdur-svc-more svg{width:15px;height:15px;transition:transform .3s}
.durdur-svc:hover .durdur-svc-more svg{transform:translateX(5px)}
@media (max-width:1080px){.durdur-svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.durdur-svc-grid{grid-template-columns:1fr}}

/* =====================================================================
   Hover fixes.
   Hello Elementor's reset.css styles every button:hover / [type=submit]:hover
   with background #c36 and white text, and it loads after our stylesheet.
   The static design has no colour change on hover, so we restate each
   hover explicitly instead of letting the theme repaint them pink.
   ===================================================================== */
.durdur-tab.durdur-tab:hover,
.durdur-tab.durdur-tab:focus{
  background:transparent;color:var(--dd-navy);box-shadow:none;
}
.durdur-tab.durdur-tab.on:hover,
.durdur-tab.durdur-tab.on:focus{
  background:var(--dd-grad);color:#fff;box-shadow:0 10px 22px -10px rgba(24,89,57,.8);
}
.durdur-check-form button:hover,
.durdur-check-form button:focus{
  background-image:var(--dd-grad-btn);background-color:var(--dd-green);color:#fff;
}
.durdur-btn.durdur-btn:hover,
.durdur-btn.durdur-btn:focus{color:inherit}
.durdur-btn--green.durdur-btn--green:hover,
.durdur-btn--green.durdur-btn--green:focus{
  background-image:var(--dd-grad-btn);background-color:var(--dd-green);color:#fff;
}
.durdur-btn--outline.durdur-btn--outline:hover,
.durdur-btn--outline.durdur-btn--outline:focus{
  background-color:#fff;color:var(--dd-navy);
}
.durdur-btn--navy.durdur-btn--navy:hover,
.durdur-btn--navy.durdur-btn--navy:focus{
  background-color:var(--dd-navy);color:#fff;
}
/* Elementor form submit buttons (contact form, footer newsletter) */
.elementor-widget-form .elementor-button:hover,
.elementor-widget-form .elementor-button:focus{
  background-color:var(--dd-green-600);color:#fff;
}