/* ─── 4 STEPS PROCESS SECTION ─── */
.process-section {
    background-color: #fcfdfd; 
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}

.process-step {
    transition: transform 0.3s ease;
    padding: 15px;
    position: relative;
    z-index: 2;
}

.process-step:hover {
    transform: translateY(-8px);
}

.step-icon-wrapper {
    width: 100px;
    height: 100px;
    margin: 0 auto 25px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border: 2px solid #f0f4f8;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Icon Colors & Gradient */
.step-icon-wrapper i {
    font-size: 36px;
    color: #fbbc04; 
    transition: all 0.3s ease;
}

/* Hover Effect on Icon Circle */
.process-step:hover .step-icon-wrapper {
    border-color: #28a745;
    box-shadow: 0 15px 35px rgba(40, 167, 69, 0.18);
    transform: scale(1.1);
}

.process-step:hover .step-icon-wrapper i {
    color: #28a745; 
}

.step-title {
    font-weight: 800;
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: #111;
}

.step-desc {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.7;
    padding: 0 10px;
}

/* Connecting Dashed Line (Desktop Only) */
.connecting-line {
    position: absolute;
    top: 50px; 
    left: 12.5%;
    width: 75%;
    height: 2px;
    border-top: 2px dashed #dde3e8;
    z-index: 1;
    transition: border-color 0.5s ease;
}

.process-section:hover .connecting-line {
    border-top-color: rgba(40, 167, 69, 0.4);
}









* {
  --bg-dark-1:     #0d2b1a;        /* deep forest green — was #1B1663 */
  --bg-dark-2:     #081a10;        /* deeper green — was #120d4f      */
  --bg-dark-3:     #1e1e1e;        /* unchanged                       */
  --bg-dark-1-rgb: 13, 43, 26;    /* green version of the rgb tuple  */
}

/* ─── HEADER ──────────────────────────────────────── */
header {
  background: #0d2b1a;
}

header.smaller {
  background: rgba(13, 43, 26, 0.75) !important;
}

/* ─── HERO / SWIPER SLIDE ─────────────────────────── */
.swiper,
.swiper-slide {
  background: #0d2b1a;
}

.sw-overlay {
  background: linear-gradient(
    0deg,
    rgba(13, 43, 26, 0.70) 0%,
    rgba(13, 43, 26, 0.50) 100%
  ) !important;
}

/* ─── DARK SECTION BACKGROUNDS ───────────────────── */
.bg-dark,
.bg-dark-1,
.dark-scheme {
  background-color: #0d2b1a !important;
}

.bg-dark-2 {
  background-color: #081a10 !important;
}

/* ─── FOOTER ──────────────────────────────────────── */
footer {
  background: #081a10 !important;
}

/* ─── BLUR / GLASS PANELS ────────────────────────── */
#extra-wrap {
  background: rgba(13, 43, 26, 0.80);
}

/* ─── GRADIENT EDGES (section transitions) ───────── */
.gradient-edge-top {
  background: linear-gradient(
    180deg,
    rgba(13, 43, 26, 1) 0%,
    rgba(13, 43, 26, 0) 100%
  ) !important;
}

.gradient-edge-bottom {
  background: linear-gradient(
    0deg,
    rgba(13, 43, 26, 1) 0%,
    rgba(13, 43, 26, 0) 100%
  ) !important;
}

/* ─── OVERLAY HELPERS ────────────────────────────── */
.de-overlay {
  background: rgba(13, 43, 26, 0.40) !important;
}

.overlay-dark-5 { background: rgba(13, 43, 26, 0.50) !important; }
.overlay-dark-6 { background: rgba(13, 43, 26, 0.60) !important; }
.overlay-dark-7 { background: rgba(13, 43, 26, 0.70) !important; }
.overlay-dark-8 { background: rgba(13, 43, 26, 0.80) !important; }
.overlay-dark-9 { background: rgba(13, 43, 26, 0.90) !important; }

/* ─── BG-COLOR UTILITIES ─────────────────────────── */
.bg-dark-10 { background: rgba(13, 43, 26, 0.10) !important; }
.bg-dark-20 { background: rgba(13, 43, 26, 0.20) !important; }
.bg-dark-30 { background: rgba(13, 43, 26, 0.30) !important; }
.bg-dark-40 { background: rgba(13, 43, 26, 0.40) !important; }
.bg-dark-50 { background: rgba(13, 43, 26, 0.50) !important; }

/* ─── TRIANGLE DECO SHAPES ───────────────────────── */
.triangle-bottomright-dark,
.triangle-bottomright-dark-half {
  border-bottom-color: #0d2b1a !important;
}

.triangle-bottomright-dark-2,
.triangle-bottomright-dark-2-half,
.triangle-bottomleft-dark-2 {
  border-bottom-color: #081a10 !important;
}

/* ─── DARK-SCHEME TEXT AREAS ─────────────────────── */
.dark-scheme section {
  background: #0d2b1a !important;
}

/* ─── STEP ICON ──────────────────────────────────── */
.de-step-icon {
  background-color: #0d2b1a !important;
}

/* ─── PRELOADER (if dark) ────────────────────────── */
.dark-scheme #de-loader {
  background: #0d2b1a !important;
}

/* ─── TOPBAR DARK ────────────────────────────────── */
#topbar.topbar-dark {
  background: rgba(13, 43, 26, 0.30) !important;
}

/* ─── SUB-HEADER DARK ────────────────────────────── */
#subheader.dark {
  background-color: #0a2015 !important;
}

/* ─── MEGA MENU DARK SCHEME ──────────────────────── */
.dark-scheme #mainmenu ul {
  background: #0d2b1a !important;
}

.dark-scheme #mainmenu>li ul.mega .sb-menu {
  background: #0d2b1a !important;
}

/* ─── ACCORDION DARK ─────────────────────────────── */
.dark-scheme .accordion-body {
  background: #0d2b1a !important;
}

/* ─── FORM BORDER DARK ───────────────────────────── */
.dark-scheme .form-border input[type=text],
.dark-scheme .form-border textarea,
.dark-scheme .form-border input[type=email],
.dark-scheme .form-border select {
  background: rgba(13, 43, 26, 0.5) !important;
}

/* ─── TIMELINE NODE ──────────────────────────────── */
.de-timeline-s2 .d-item .d-icon {
  background: #0d2b1a !important;
}

/* ─── TAG / BADGE ────────────────────────────────── */
.post-image .d-tagline span {
  background: #0d2b1a !important;
}

/* ─── DE-DOT POPUP ───────────────────────────────── */
.de-dot .d-content {
  background: rgba(13, 43, 26, 0.90) !important;
}

/* ─── SELECTOR (demo panel) ──────────────────────── */
#selector .sc-opt {
  background: #0d2b1a !important;
}

/* ─── BLOG DATE BOX ──────────────────────────────── */
.de-blog-c1 .d-date .d-month {
  /* Already uses primary-color — no change needed */
}

/* ─── EXTRA WRAP PANEL ───────────────────────────── */
#extra-wrap {
  background: rgba(13, 43, 26, 0.85) !important;
}

/* ─── SWIPER DARK OVERLAY ────────────────────────── */
.sw-overlay {
  background: linear-gradient(
    0deg,
    rgba(13, 43, 26, 0.65) 0%,
    rgba(13, 43, 26, 0.45) 100%
  ) !important;
}

/* ─── COOKIE CONSENT ─────────────────────────────── */
#cookit {
  background: rgba(13, 43, 26, 1) !important;
}

/* ─── SMALL TWEAKS ───────────────────────────────── */

/* slightly warm up text on dark sections for contrast */
.dark-scheme,
body.dark-scheme {
  background: #0d2b1a;
}

/* make sure blue doesn't peek through on scroll */
html body {
  scrollbar-color: #1a5c34 #0d2b1a;
}