.elementor-kit-35{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--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;}.elementor-kit-35 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.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:70%;}.e-con{--container-max-width:70%;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===========================
   Syre — Dark Icon Tiles
   Attach: Section = .syre-grid
            Widget (Icon Box) = .syre-tile
   Tweaks: change the CSS variables for quick theming
   =========================== */

:root{
  --tile-bg-1: #121418;              /* inner panel */
  --tile-bg-2: #1b1f27;              /* edge tint */
  --tile-stroke: rgba(255,255,255,.08);
  --tile-stroke-strong: rgba(255,255,255,.16);
  --tile-text: #e9eef6;
  --tile-text-dim: #b9c2cf;
  --accent: #ffbd59;                 /* highlight/glow */
  --shadow-1: 0 12px 28px rgba(0,0,0,.55);
  --shadow-2: inset 0 1px 0 rgba(255,255,255,.05);
}

/* Grid layout (optional) */
.syre-grid{
  display:grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap:18px;
}
@media (max-width:1024px){ .syre-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:768px){  .syre-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px){  .syre-grid{ grid-template-columns: 1fr; } }

/* Base tile — works on Elementor Icon Box widget */
.syre-tile{
  background: radial-gradient(120% 130% at 100% 0%, var(--tile-bg-2) 0%, var(--tile-bg-1) 60%);
  border:1px solid var(--tile-stroke);
  border-radius:24px;
  padding:24px 22px;
  color:var(--tile-text);
  box-shadow: var(--shadow-1), var(--shadow-2);
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Soft corner glow */
.syre-tile::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(180px 180px at 90% 8%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(220px 220px at -10% 100%, rgba(255,255,255,.03), transparent 60%);
  mix-blend-mode: screen;
}

/* Hover/Focus state */
.syre-tile:hover,
.syre-tile:focus-within{
  transform: translateY(-2px);
  border-color: var(--tile-stroke-strong);
  box-shadow: 0 18px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.03) inset;
}
@media (prefers-reduced-motion: reduce){
  .syre-tile{ transition:none; }
}

/* Elementor Icon Box specific resets */
.syre-tile.elementor-widget-icon-box .elementor-icon-box-wrapper{
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
}
.syre-tile .elementor-icon-box-icon{
  margin:0 !important;
}
.syre-tile .elementor-icon{
  width:58px; height:58px;
  border-radius:16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid var(--tile-stroke-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 18px rgba(0,0,0,.35);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.04));
  transition: transform .18s ease, box-shadow .18s ease;
}
.syre-tile:hover .elementor-icon{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 12px 26px rgba(0,0,0,.45),
    0 0 24px rgba(255,255,255,.05);
}

/* If your icon is an SVG, gently tint it */
.syre-tile .elementor-icon svg,
.syre-tile .elementor-icon i{
  color:#fff; fill:#fff; stroke:none;
  opacity:.95;
}

/* Title & description */
.syre-tile .elementor-icon-box-title{
  margin:0;
  font-size:1.25rem;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--tile-text);
  text-wrap: balance;
}
.syre-tile .elementor-icon-box-description{
  margin-top:6px;
  color:var(--tile-text-dim);
  line-height:1.5;
  font-size:.95rem;
  max-width: 32ch;
}

/* Subtle focus ring for keyboard users */
.syre-tile a:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius:12px;
}

/* Optional: accent edge on hover */
.syre-tile:hover::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 26px rgba(255,255,255,.06) inset;
}

/* Compact size variant (add class .syre-tile--sm) */
.syre-tile--sm{ padding:18px 16px; border-radius:20px; }
.syre-tile--sm .elementor-icon{ width:50px; height:50px; border-radius:14px; }
.syre-tile--sm .elementor-icon-box-title{ font-size:1.1rem; }/* End custom CSS */