.elementor-kit-98{--e-global-color-primary:#FF9D19;--e-global-color-secondary:#097C6E;--e-global-color-text:#000000A6;--e-global-color-accent:#2A9D8F;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-preloader-animation-duration:1500ms;--e-preloader-delay:0ms;--e-preloader-color:#FF9D19;--e-preloader-size:50px;}.elementor-kit-98 e-page-transition{background-color:#000000;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1400px;}.e-con{--container-max-width:1400px;}.elementor-widget:not(:last-child){margin-block-end: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;}.elementor-kit-98{--e-page-transition-entrance-animation:e-page-transition-fade-out;}}/* Start custom CSS */.grid-bg {
  position: relative;
  overflow: hidden;
}

/* =========================
   LIGHT MODE
========================= */
.grid-bg.light {
  background-color: #ffffff;
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* =========================
   DARK MODE
========================= */
.grid-bg.dark {
  background-color: #000000;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* =========================
   EDGE FADE (LIGHT)
========================= */
.grid-bg.light::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    transparent 40%,
    rgba(255,255,255,1) 100%
  );
  z-index: 1;
}

/* =========================
   EDGE FADE (DARK)
========================= */
.grid-bg.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    transparent 40%,
    rgba(0,0,0,1) 100%
  );
  z-index: 1;
}

/* =========================
   CONTENT LAYER
========================= */
.grid-bg > * {
  position: relative;
  z-index: 2;
}

/* =========================
   Service Card Base
========================= */
.service-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  background: #fff;

  /* your existing grey border stays, but we control it */
  border: 1px solid #e5e5e5;

  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* =========================
   Top Orange Line (on top of everything)
========================= */
.service-card::before {
  content: "";
  position: absolute;
  top: 1px;
  left: -100%;
  width: 100%;
  height: 2px;
  background: #ff9d19;
  z-index: 10;
  transition: left 0.6s ease;
}

/* animate line */
.service-card:hover::before {
  left: 0;
}

/* =========================
   Hover state
   (this removes the "grey conflict look")
========================= */
.service-card:hover {
  transform: translateY(-8px);
  border-color: #ff9d19; /* optional but makes it consistent */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* =========================
   Safety layer (prevents theme overlays)
========================= */
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 1;
  pointer-events: none;
}


/* title + arrow wrapper (IMPORTANT: do NOT target whole card again) */
.service-card .title-text {
  display: inline-block;
  transition: transform 0.4s ease;
}

/* arrow */
.service-card .arrow {
  display: inline-block;
  transition: transform 0.4s ease;
}

/* hover movement */
.service-card:hover .title-text {
  transform: translate(6px, -6px);
}

.service-card:hover .arrow {
  transform: translate(4px, -4px);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px; /* 0px top/bottom, 10px left/right */
  font-weight: 500;
  font-size: 14px;
  gap: 6px; /* slightly closer dot/text */
  position: relative;
  letter-spacing: 1px;
  line-height: 1; /* reduce extra vertical space */
}

.badge-dot {
  width: 8px;
  height: 8px;
  background-color: #ff9d19;
  border-radius: 50%;
  position: relative;
}

/* Create the pulsing ring */
.badge-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #ff9d19;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  animation: ping 1.5s infinite;
}

/* Ping animation */
@keyframes ping {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

.strobe-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #ff9d19;
  overflow: hidden;
}

.strobe-text::after {
  content: "";
  position: absolute;
  inset: 0;
  left: -150%;
  width: 60%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.9),
    transparent
  );
  transform: skewX(-20deg);
  animation: strobe-sweep 2s infinite;
  pointer-events: none;
}

@keyframes strobe-sweep {
  0% {
    left: -150%;
  }
  100% {
    left: 200%;
  }
}

.trusted-by {
  position: relative;
  background: #fff;
  border: 1px solid #e5e5e5;
}

/* animated border layer */
.trusted-by::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(#ff9d19 0 0) 
              top left,
              linear-gradient(#ff9d19 0 0) 
              top right,
              linear-gradient(#ff9d19 0 0) 
              bottom right,
              linear-gradient(#ff9d19 0 0) 
              bottom left;

  background-size: 0% 2px, 2px 0%, 0% 2px, 2px 0%;
  background-repeat: no-repeat;

  transition: background-size 0.6s ease;
}

/* hover = draw border around box */
.trusted-by:hover::after {
  background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
}

/* subtle background highlight */
.trusted-by:hover {
  background: #fafafa;
  transition: background 0.3s ease;
}



/* Sets the carousel wrapper height/ratio */
.elementor-kit-98 .elementor-image-carousel-wrapper {
    aspect-ratio: 16 / 9; /* Change to your preferred ratio */
}

/* Forces the inner slides to fill the container */
.elementor-kit-98 .swiper-slide-inner,
.elementor-kit-98 .swiper-slide .swiper-slide-image {
    height: 100%;
    width: 100%;
    object-fit: cover; /* This makes images 'fill' without stretching */
    object-position: center center;
}/* End custom CSS */