.elementor-2114 .elementor-element.elementor-element-db36cb1{--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;}.elementor-2114 .elementor-element.elementor-element-35d01912{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}/* Start custom CSS for html, class: .elementor-element-560c0b2 *//* === Root Variables for Easy Theme Tweaks === */
:root {
  --grad-start: #006b6b;       /* Deep teal */
  --grad-end: #009aa2;         /* Light teal */
  --radius: 14px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.22);
  --font-main: "Segoe UI", Arial, sans-serif;
}

/* === Container Layout for Buttons === */
.button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  padding: 40px 12px;
}

/* === Main Button Style === */
.iot-btn {
  display: flex;
  align-items: center;
  gap: 18px;

  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  color: white;
  text-decoration: none;
  font: 600 18px/1 var(--font-main);

  padding: 26px 36px;
  min-width: 260px;
  aspect-ratio: 16 / 5;
  border-radius: var(--radius);

  box-shadow: var(--shadow);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    filter 0.28s ease;
}

/* === Icon Style inside Button === */
.iot-btn i {
  font-size: 32px;
}

/* === Hover and Focus Effects === */
.iot-btn:hover,
.iot-btn:focus-visible {
  transform: scale(1.05);
  box-shadow: var(--shadow-hover);
  filter: brightness(1.05);
}

/* === Responsive: Full Width on Small Screens === */
@media (max-width: 480px) {
  .iot-btn {
    min-width: 100%;
    justify-content: flex-start;
  }
}/* End custom CSS */