/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.9.1784809201
Updated: 2026-07-23 12:20:01

*/

:root {
  --sc-color-brand-rgb: 155, 27, 42;
  --sc-color-blue-900-rgb: 30, 58, 138;
  --sc-color-white-rgb: 255, 255, 255;
  --sc-color-grad-1: #fca5a5;
  --sc-color-grad-2: #f43f5e;
  --sc-color-grad-3: #fda4af;
  --sc-grad-blue-emerald-1: #60a5fa;
  --sc-grad-blue-emerald-2: #34d399;
  --sc-grad-blue-emerald-3: #34d399;
}

/*
 * GENERAL QOL
 * ----------------------------------------- */

/* .link-style-fix,
.elementor-element .inline-link a {
  color: var(--clr-brand-1);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.link-style-fix:hover,
.elementor-element .inline-link a:hover {
  color: var(--clr-brand-1);
  font-weight: var(--fw-bold);
} */

/*
 * SHRINKING HEADER
    Be sure to add the ID 'ele-shrink-header' on the header element in elementor.
    On the header element, under 'advanced' > 'Motion Effects', set 'Sticky' to 'Top' and add all the breakpoints.
    'Offset' and 'Effects Offset' to 0, those are controlled in js/app.js, as well as adding/removing the 'scrolled' class.
    See comments below on what values can be adjusted as needed per site.
 * ----------------------------------------- */
#ele-shrink-header {
  position: fixed;
  width: 100% !important;
  transition: all 0.3s linear;
  z-index: 2;
}
#ele-shrink-header.scrolled {
  width: 100% !important;
  padding: 0px 10px 10px 10px; /* Adjust as needed */
  background-color: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
}
/* Logo default state */
#ele-shrink-header img {
  width: 100%;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s;
}
/* Mobile logo on scroll */
#ele-shrink-header.scrolled img {
  width: 80%; /* Adjust as needed */
}
/* Shrink Logo more only on tablet and larger */
@media (min-width: 767px) {
  #ele-shrink-header.scrolled img {
    width: 80%; /* Adjust as needed */
  }
}
/* Shrink nav items */
#ele-shrink-header.scrolled .elementor-nav-menu li a {
  font-size: 0.9rem; /* Adjust as needed */
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
}
/* Buttons */
#ele-shrink-header .elementor-button {
  /* font-size: 1.2rem; */
}
/* Buttons */
#ele-shrink-header.scrolled .elementor-button {
  /* font-size: 0.9rem; */
}

/* ============================================================
   HERO — CUSTOM CSS
   All selectors prefixed with .sc-hero to keep specificity
   consistently ahead of Elementor's own generated CSS.
   ============================================================ */

@keyframes sc-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes sc-shine {
  to {
    background-position: 200% center;
  }
}

@keyframes sc-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.sc-hero .sc-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.sc-hero-bg .e-con-inner,
.sc-hero-bg .elementor-widget-html,
.sc-hero-bg .elementor-widget-container {
  height: 100%;
}

.sc-hero .sc-hero-bg .sc-grid {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: linear-gradient(rgba(var(--sc-color-white-rgb), 0.8) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--sc-color-white-rgb), 0.8) 1px, transparent 1px);
  background-size: 40px 40px;
}

.sc-hero .sc-hero-bg .sc-glow-a {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 50%;
  height: 50%;
  border-radius: 999px;
  background: rgba(var(--sc-color-brand-rgb), 0.2);
  filter: blur(150px);
  mix-blend-mode: screen;
}

.sc-hero .sc-hero-bg .sc-glow-b {
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 60%;
  height: 60%;
  border-radius: 999px;
  background: rgba(var(--sc-color-blue-900-rgb), 0.3);
  filter: blur(150px);
  mix-blend-mode: screen;
}

.sc-hero .sc-hero-bg svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.sc-hero .grad {
  background: linear-gradient(to right, var(--sc-color-grad-1), var(--sc-color-grad-2), var(--sc-color-grad-3), var(--sc-color-grad-1));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sc-shine 4s linear infinite;
}

.sc-hero .grad-blue-emerald {
  background: linear-gradient(to right, var(--sc-grad-blue-emerald-1), var(--sc-grad-blue-emerald-2), var(--sc-grad-blue-emerald-3), var(--sc-grad-blue-emerald-1));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sc-shine 4s linear infinite;
}

.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e2e8f0;
}

.sc-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
  animation: sc-pulse 2s infinite;
}

/* .sc-spotlight-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
} */

.sc-dot-live {
  display: flex;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
  animation: sc-pulse 2s infinite;
}

.sc-dot-live.indigo {
  background: #6366f1;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.8);
}

.sc-dot-live.red {
  background: #9b1b2a;
  box-shadow: 0 0 8px rgba(155, 27, 42, 0.8);
}

/* ---- Small square "T1" carrier badges ---- */
.sc-mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(155, 27, 42, 0.1);
  color: #9b1b2a;
  font-size: 10px;
  font-weight: 700;
}

.sc-mini-badge.fail {
  background: #fee2e2;
  color: #dc2626;
}

/* ---- Pill-shaped status badges ---- */
.sc-pill-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
}

.sc-pill-badge.fail {
  color: #ef4444;
  background: #fee2e2;
}

.sc-pill-badge.indigo {
  color: #4f46e5;
  background: #eef2ff;
  border-radius: 6px; /* slightly larger radius on this one in the original design */
}

.b-dot {
  display: flex;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #6366f1;
  flex-shrink: 0;
}

.sc-faq-mascot {
  /*   position: absolute;
  bottom: -32px;
  left: -32px;
  width: 190px; */
  animation: sc-float 6s ease-in-out infinite;
  filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.15));
}

/* Smoothing out counter numbers on homepage */
.elementor-counter-number-wrapper {
  display: inline-block;
  width: 172px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}