.elementor-550 .elementor-element.elementor-element-f229946{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-550 .elementor-element.elementor-element-f229946{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-cd6541e *//* =========================================
   MOBILE & TABLET: STACK CARDS VERTICALLY
   DESKTOP: KEEP EXISTING LAYOUT
========================================= */

/* Tablet & below */
@media (max-width: 980px) {
  #why-us .cards,
  #areas .cards {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  #why-us .card,
  #areas .card {
    grid-column: 1 / -1 !important;
  }
}

/* =========================================
   ORANGE ICONS (ALL SCREENS)
========================================= */

.card .icon {
  background: linear-gradient(
    135deg,
    rgba(235,116,24,0.4),
    rgba(235,116,24,0.15)
  );
  border-color: rgba(235,116,24,0.5);
  box-shadow:
    0 10px 30px rgba(235,116,24,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.15);
}

.card .bolt {
  background: linear-gradient(
    180deg,
    #ffb067,
    #eb7418
  );
  filter: drop-shadow(0 8px 22px rgba(235,116,24,0.6));
}


/* =========================================
   PREMIUM CARD HOVER GLOW
========================================= */

.card {
  transition:
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.35s cubic-bezier(.2,.8,.2,1),
    border-color 0.35s cubic-bezier(.2,.8,.2,1);
}

/* Hover effect (desktop) */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-6px);
    border-color: rgba(235,116,24,0.55);
    box-shadow:
      0 30px 80px rgba(0,0,0,0.45),
      0 0 0 1px rgba(235,116,24,0.25),
      0 0 60px rgba(235,116,24,0.35);
  }

  .card:hover::before {
    opacity: 1;
  }
}

/* Soft inner glow overlay */
.card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(
      600px 220px at 30% 0%,
      rgba(235,116,24,0.35),
      transparent 60%
    );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(.2,.8,.2,1);
}

@media (hover: hover) {
  .card:hover::after {
    opacity: 1;
  }
}/* End custom CSS */