/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 21 2026 | 21:27:54 */
/* =========================================================
WHY CHOOSE SECOND CREEK
COMPLETE SECTION CSS
========================================================= */

/* =========================================================
01 — IMAGE FILE LOCATIONS

The three feature-card images are assigned directly in
Section 11 instead of through CSS variables.

This avoids Elementor or another generated rule dropping
the variable-based background image.

Important:
WordPress file URLs and capitalization must match exactly.
Linux hosting treats Handshake.webp and handshake.webp as
different filenames.
========================================================= */
/* =========================================================
   02 — MAIN SECTION BACKGROUND AND COLOR VARIABLES

   Rich blue/navy background shared across desktop, tablet,
   and mobile.

   The hero-to-Why fade is also shared across all devices.
   Most of the 300px overlap remains transparent so the hero
   artwork stays visible, with the navy fade appearing only
   near the lower portion of the overlap.

   Blue radial glows sit farther down behind the Why content
   and cards without interfering with the hero transition.

   Section spacing is now standardized across all devices:
   60px normal top spacing
   15px horizontal spacing
   60px bottom spacing

   Section 03 adds the 300px overlap compensation to the
   normal 60px top spacing.
   ========================================================= */

.why-section {
    --why-bg: #020d20;
    --why-bg-mid: #03152d;
    --why-bg-light: #061d3d;
    --why-bg-deep: #010815;

    --why-card-bg: #03142c;

    --why-blue: #1677f2;
    --why-blue-bright: #2b8cff;

    --why-border: rgba(43, 140, 255, 0.42);
    --why-border-soft: rgba(43, 140, 255, 0.2);

    --why-text: #ffffff;
    --why-text-soft: rgba(255, 255, 255, 0.84);
    --why-text-muted: rgba(255, 255, 255, 0.68);

    position: relative;
    isolation: isolate;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100%;

    padding:
        60px
        15px
        60px;

    border-top: 0;

    overflow-x: clip !important;
    overflow-y: visible !important;

    box-shadow:
        0 40px 0 #020d20;

    background:

        /* Soft blue glow behind upper / left card area */
        radial-gradient(
            ellipse 520px 360px at 16% 520px,
            rgba(22, 119, 242, 0.13) 0%,
            rgba(22, 119, 242, 0.045) 42%,
            transparent 72%
        ),

        /* Very subtle secondary glow toward lower-right */
        radial-gradient(
            ellipse 520px 420px at 86% 72%,
            rgba(43, 140, 255, 0.08) 0%,
            rgba(43, 140, 255, 0.025) 44%,
            transparent 74%
        ),

		/* =====================================================
		   HERO-TO-WHY FADE

		   Keeps the upper overlap mostly transparent so the hero
		   stays clean, then transitions quickly so the rich navy
		   reaches the exact bottom edge of the hero.
		   ===================================================== */

		linear-gradient(
			180deg,

			rgba(6, 29, 61, 0) 0px,
			rgba(6, 29, 61, 0) 235px,

			rgba(6, 29, 61, 0.10) 250px,
			rgba(6, 29, 61, 0.30) 265px,
			rgba(6, 29, 61, 0.60) 280px,
			rgba(6, 29, 61, 0.85) 292px,

			var(--why-bg-light) 300px,
			var(--why-bg-mid) 350px,
			var(--why-bg) 440px,
			var(--why-bg) 100%
		);
}


/* =========================================================
   03 — HERO / WHY SECTION OVERLAP
   ALL DEVICES

   The Why section overlaps the hero by 300px on desktop,
   tablet, and mobile.

   The Why inner content is shifted downward by the same
   300px so the overlap area is reserved for the visual
   hero-to-dark transition rather than page content.

   Normal section spacing is 60px on every device, so the
   Why section receives 360px total top padding:

   60px normal spacing + 300px overlap compensation.

   Desktop keeps the additional 80px hero height because
   that extra artwork is part of the desktop composition.
   ========================================================= */

.sct-hero {
    position: relative;
    z-index: 1;
}

.why-section {
    position: relative;
    z-index: 2;

    margin-top: -300px !important;

    padding-top:
        calc(60px + 300px);
}

.why-inner {
    transform:
        translateY(300px) !important;

    margin-bottom:
        300px !important;
}


/* =========================================================
   03A — DESKTOP HERO EXTENSION
   1201PX AND WIDER

   Desktop alone receives 80px of additional hero height.
   The Why overlap, spacing, gradient, and content offset
   remain identical across all devices.
   ========================================================= */

@media (min-width: 1201px) {


    /*
     * Fixed to match the tall-desktop reference height used in
     * "01 - Hero Layout" (1000px inner min-height - 70px), so this
     * no longer tracks viewport height independently of that file.
     */
    .sct-hero {
        min-height:
            930px !important;
    }
}
/* =========================================================
04 — ADDITIONAL LOWER-RIGHT DECORATIVE RINGS

Creates a subtle curved/ring pattern near the bottom-right
of the section.

This is the only decorative section overlay now. The earlier
imported transparent overlay image has been removed.
========================================================= */

.why-section::after {
  content: "";

  position: absolute;

  right: -330px;
  bottom: -290px;

  z-index: 0;

  width: 720px;
  height: 520px;

  pointer-events: none;

  border-radius: 50%;

  opacity: 0.26;

  background: repeating-radial-gradient(
    ellipse at center,
    transparent 0 11px,
    rgba(34, 127, 255, 0.09) 12px 13px
  );

  transform: rotate(12deg);
}

/* =========================================================
05 — INNER CONTENT CONTAINER

Controls the section's maximum width.

The z-index keeps all headings, cards, strips, and CTA
content above the decorative background layers.
========================================================= */

.why-inner {
  position: relative;
  z-index: 2;

  width: min(100%, 1320px) !important;
  max-width: 1320px !important;

  margin-inline: auto !important;
  align-self: center !important;

  gap: 0 !important;
}

/* =========================================================
06 — SECTION HEADING AREA

The bottom margin was increased so the heading has more
breathing room before the feature cards.
========================================================= */

.why-heading-wrap {
    width: 100% !important;
    margin-bottom: 16px;
    text-align: center;
}

.why-heading-wrap > .elementor-element {
  margin-inline: auto;
}

/* =========================================================
07 — EYEBROW HEADING
========================================================= */

.why-eyebrow {
  width: auto !important;

  margin-bottom: 12px;
}

.why-eyebrow .elementor-heading-title {
  margin: 0;

  color: var(--why-blue-bright);

  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.4px;

  text-transform: uppercase;
}

/* =========================================================
08 — MAIN SECTION HEADING
========================================================= */

.why-heading {
  width: 100% !important;
  max-width: 940px;

  margin-bottom: 12px;
}

.why-heading .elementor-heading-title {
  margin: 0;

  color: var(--why-text);

  font-size: clamp(42px, 3.75vw, 58px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -1.7px;
}

.why-heading .why-heading-accent {
  color: var(--why-blue);
}

/* =========================================================
09 — SECTION INTRO PARAGRAPH
========================================================= */

.why-intro {
  width: 100% !important;
  max-width: 760px;
}

.why-intro .elementor-widget-container,
.why-intro p {
  margin: 0;
}

.why-intro p {
  color: var(--why-text-soft);

  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
}

/* =========================================================
10 — MAIN FEATURE CARD GRID

Desktop layout:

Large card on the left
Two smaller cards stacked on the right
========================================================= */

.why-feature-grid {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.09fr)
    minmax(0, 1fr);

  align-items: stretch !important;

  width: 100% !important;
  min-height: 465px;

  gap: 14px !important;

  margin-bottom: 14px;
}

/* =========================================================
11 — CARD BACKGROUND IMAGE ASSIGNMENTS

Images are assigned with direct URLs and !important so they
are not lost if Elementor outputs another background rule.

Update the URLs here whenever a card image is replaced.
========================================================= */

.why-feature-primary {
  background-image: url("/wp-content/uploads/2026/08/server_tech.webp") !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}

.why-security-card {
  background-image: url("/wp-content/uploads/2026/08/security-first-it.webp") !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: right center !important;
}

.why-partnership-card {
  background-image: url("/wp-content/uploads/2026/08/Handshake.webp") !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: right center !important;
}

/* =========================================================
12 — SHARED CARD STYLES

Applies to all three feature cards.
========================================================= */

.why-card {
  position: relative;
  isolation: isolate;

  width: 100% !important;
  height: 100%;
  min-width: 0;

  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--why-border);

  border-radius: 13px;

  background-color: var(--why-card-bg);
  background-repeat: no-repeat !important;
  background-size: cover !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 16px 45px rgba(0, 0, 0, 0.12);

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

.why-card:hover,
.why-card:focus-visible {
    transform: translateY(-3px);

    border-color:
        rgba(43, 140, 255, 0.82);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 20px 48px rgba(0, 0, 0, 0.22);
}

/* =========================================================
13 — CARD DARK GRADIENT LAYER

This pseudo-element sits above each photo but below the text.
========================================================= */

.why-card::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;
  pointer-events: none;
}

/* =========================================================
23A — SECURITY CARD OVERLAY TWEAK
Lightens the security card slightly while preserving
the current image position and readability.
========================================================= */

.why-security-card::before {
    background:
        linear-gradient(
            90deg,
            rgba(2, 14, 33, 0.94) 0%,
            rgba(2, 14, 33, 0.86) 36%,
            rgba(2, 14, 33, 0.56) 60%,
            rgba(2, 14, 33, 0.12) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 8, 21, 0.18),
            transparent 55%
        );
}

/* =========================================================
14 — CARD CONTENT LAYER

Keeps all card text and icons above the image and gradient.
========================================================= */

.why-card-content {
  position: relative;
  z-index: 2;

  height: 100%;
  min-width: 0;

  gap: 0 !important;
}

/* =========================================================
15 — LARGE PROACTIVE IT CARD
========================================================= */

.why-feature-primary {
  min-height: 465px;

  background-position: center center !important;
}

/* Large-card dark readability gradient */

.why-feature-primary::before {
  background:
    linear-gradient(
      90deg,
      rgba(2, 14, 33, 0.99) 0%,
      rgba(2, 14, 33, 0.96) 31%,
      rgba(2, 14, 33, 0.78) 52%,
      rgba(2, 14, 33, 0.28) 77%,
      rgba(2, 14, 33, 0.16) 100%
    ),
    linear-gradient(0deg, rgba(0, 8, 21, 0.64) 0%, transparent 42%);
}

/* Large-card text column */

.why-primary-content {
  width: min(55%, 390px) !important;
  min-height: 100%;

  padding: 28px 32px 24px;
}

/* =========================================================
16 — CARD ICON BOXES
========================================================= */

.why-card-icon {
    flex: 0 0 auto;

    width: 60px !important;
    height: 60px;

    margin-bottom: 14px;

    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.why-card-icon .elementor-widget-container {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}

.why-card-icon .elementor-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #4ca1ff;

    font-size: 42px;
}

.why-card-icon svg,
.why-card-icon img {
    width: 42px;
    height: 42px;

    object-fit: contain;
}

/* =========================================================
17 — CARD HEADINGS
========================================================= */

.why-card-title {
  width: 100% !important;

  margin-bottom: 16px;
}

.why-card-title .elementor-heading-title {
  margin: 0;

  color: var(--why-text);

  font-size: 28px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.65px;
}

/* =========================================================
18 — SMALL BLUE CARD DIVIDERS
========================================================= */

.why-card-line {
  width: 43px !important;

  margin-bottom: 15px;
}

.why-card-line .elementor-divider {
  padding: 0 !important;
}

.why-card-line .elementor-divider-separator {
  display: block;

  width: 43px !important;

  border-block-start: 2px solid var(--why-blue) !important;

  border-top: 2px solid var(--why-blue) !important;
}

/* =========================================================
19 — CARD PARAGRAPHS
========================================================= */

.why-card-text {
  width: 100% !important;

  margin-bottom: 16px;
}

.why-card-text .elementor-widget-container,
.why-card-text p {
  margin: 0;
}

.why-card-text p {
  color: var(--why-text-soft);

  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.55;
}

/* =========================================================
20 — PRIMARY CARD CHECKLIST
========================================================= */

.why-checklist {
  width: 100% !important;
  margin-top: 7px;
  margin-bottom: 18px;
}

.why-checklist .elementor-icon-list-items {
  display: flex;
  flex-direction: column;

  gap: 8px;

  margin: 0;
  padding: 0;
}

.why-checklist .elementor-icon-list-item {
  margin: 0 !important;
  padding: 0 !important;
}

.why-checklist .elementor-icon-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 16px;

  width: 16px;
  height: 16px;

  margin-right: 11px;

  border-radius: 50%;

  background: var(--why-blue);
}

.why-checklist .elementor-icon-list-icon svg {
  width: 9px;
  height: 9px;

  fill: #ffffff;
}

.why-checklist .elementor-icon-list-icon i {
  color: #ffffff;

  font-size: 8px;
}

.why-checklist .elementor-icon-list-text {
  color: #ffffff !important;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

/* =========================================================
21 — LEARN MORE CARD LABELS

The entire feature card is clickable, so these are visual
labels only and are intentionally not links themselves.

Hovering anywhere on the card changes the label to blue
and moves the arrow slightly to the right.
========================================================= */

.why-learn-more {
    width: auto !important;

    margin-top: auto;

    align-self: flex-start;

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;
}

.why-small-content > .why-learn-more {
    margin-top: 16px;
}

.why-learn-more-label {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: inherit;

    transition:
        color 0.22s ease;
}

.why-learn-more-arrow {
    display: inline-block;

    color: var(--why-blue-bright);

    transition:
        transform 0.22s ease;
}

.why-card:hover .why-learn-more-label,
.why-card:focus-visible .why-learn-more-label {
    color: var(--why-blue-bright);
}

.why-card:hover .why-learn-more-arrow,
.why-card:focus-visible .why-learn-more-arrow {
    transform: translateX(5px);
}

/* =========================================================
22 — RIGHT-SIDE CARD STACK
========================================================= */

.why-feature-secondary {
  display: grid !important;

  grid-template-rows: repeat(2, minmax(0, 1fr));

  width: 100% !important;
  min-width: 0;

  gap: 14px !important;
}

/* =========================================================
23 — SMALL FEATURE CARDS
========================================================= */

.why-small-card {
  min-height: 0;

  background-position: right center !important;
}

/* Small-card dark readability gradient */

.why-small-card::before {
  background:
    linear-gradient(
      90deg,
      rgba(2, 14, 33, 0.99) 0%,
      rgba(2, 14, 33, 0.97) 38%,
      rgba(2, 14, 33, 0.77) 61%,
      rgba(2, 14, 33, 0.22) 100%
    ),
    linear-gradient(0deg, rgba(0, 8, 21, 0.34), transparent 55%);
}



/* =========================================================
24 — SMALL-CARD CONTENT
========================================================= */

.why-small-content {
  width: 60% !important;
  min-height: 100%;

  padding: 23px 29px 21px;
}

/* Small-card icon and heading row */

.why-small-top {
  display: flex !important;
  flex-direction: row !important;

  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;

  gap: 17px !important;

  margin-bottom: 10px;
}

.why-small-top > .elementor-element {
  min-width: 0;
}

/* Smaller icon box */

.why-small-icon {
  flex: 0 0 56px;

  width: 56px !important;
  height: 56px;

  margin: 0;

  border-radius: 13px;
}

.why-small-icon .elementor-icon {
  font-size: 29px;
}

.why-small-icon svg,
.why-small-icon img {
  width: 29px;
  height: 29px;
}

/* Small-card heading */

.why-small-title {
  flex: 1 1 auto;

  width: auto !important;

  margin: 0;
}

.why-small-title .elementor-heading-title {
  font-size: 25px;
  line-height: 1.08;
}

/* Small-card divider placement */

.why-small-content > .why-card-line {
  margin-left: 73px;
  margin-bottom: 10px;
}

/* Small-card paragraph */

.why-small-text {
  max-width: 330px;

  margin-bottom: 15px;
}

.why-small-text p {
  font-size: 14.5px;
  line-height: 1.52;
}

/* =========================================================
25 — SIX-ITEM BENEFIT STRIP
========================================================= */

.why-benefit-strip {
  display: grid !important;

  grid-template-columns: repeat(6, minmax(0, 1fr));

  width: 100% !important;
  min-height: 120px;

  overflow: hidden;

  margin-bottom: 14px;

  border: 1px solid var(--why-border-soft);

  border-radius: 13px;

  background: linear-gradient(
    105deg,
    rgba(3, 20, 44, 0.96),
    rgba(3, 28, 61, 0.88)
  );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 14px 35px rgba(0, 0, 0, 0.1);
}

/* Individual benefit item */

.why-benefit-item {
  position: relative;

  display: flex !important;
  flex-direction: row !important;

  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;
  min-width: 0;

  gap: 14px !important;

  padding: 19px 20px;

    border-right: 1px solid rgba(42, 125, 225, 0.25);
    border-bottom: 0;
}

.why-benefit-item:last-child {
    border-right: 0;
}

/* =========================================================
   BENEFIT ICON
   ========================================================= */

.why-benefit-icon {
    flex: 0 0 49px;

    width: 49px !important;

    margin: 0;
}

.why-benefit-icon .elementor-widget-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-benefit-icon .elementor-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--why-blue-bright);

    font-size: 43px;
}

.why-benefit-icon svg {
    width: 43px;
    height: 43px;

    fill: currentColor;
}

.why-benefit-icon img {
    width: 43px;
    height: 43px;

    object-fit: contain;
}

/* Benefit text column */

.why-benefit-copy {
  flex: 1 1 auto;

  width: auto !important;
  min-width: 0;

  gap: 0 !important;
}

/* Benefit title */

.why-benefit-title {
  width: 100% !important;

  margin-bottom: 5px;
}

.why-benefit-title .elementor-heading-title {
  margin: 0;

  color: #ffffff;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

/* Benefit description */

.why-benefit-text {
  width: 100% !important;
}

.why-benefit-text .elementor-widget-container,
.why-benefit-text p {
  margin: 0;
}

.why-benefit-text p {
  color: var(--why-text-soft);

  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
}

/* =========================================================
26 — BOTTOM CONSULTATION CTA
========================================================= */

.why-cta {
  position: relative;
  isolation: isolate;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1.24fr)
    1px
    minmax(360px, 0.96fr);

  align-items: center !important;

  width: 100% !important;
  min-height: 140px;

  overflow: hidden;

  gap: 0 !important;

  padding: 24px 37px;

  border: 1px solid rgba(43, 140, 255, 0.62);

  border-radius: 13px;

  background:
    radial-gradient(
      circle at 68% 45%,
      rgba(16, 96, 232, 0.36),
      transparent 34%
    ),
    linear-gradient(105deg, #04142d 0%, #06245b 48%, #073f9c 100%);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 45px rgba(0, 0, 0, 0.14);
}

/* =========================================================
27 — CTA DECORATIVE SHAPES
========================================================= */

.why-cta::before,
.why-cta::after {
  content: "";

  position: absolute;

  z-index: -1;

  pointer-events: none;
}

/* Rings around phone icon */

.why-cta::before {
  left: 28px;
  top: 50%;

  width: 120px;
  height: 120px;

  border-radius: 50%;

  background: repeating-radial-gradient(
    circle,
    transparent 0 9px,
    rgba(44, 137, 255, 0.13) 10px 11px
  );

  transform: translateY(-50%);
}

/* Curved lower-right CTA pattern */

.why-cta::after {
  right: -70px;
  bottom: -115px;

  width: 310px;
  height: 240px;

  border-radius: 50%;

  background: repeating-radial-gradient(
    ellipse at center,
    transparent 0 8px,
    rgba(75, 155, 255, 0.2) 9px 10px
  );

  transform: rotate(-14deg);
}

/* Keeps CTA contents above decorative shapes */

.why-cta > .elementor-element {
  position: relative;
  z-index: 2;
}

/* =========================================================
28 — CTA LEFT SIDE
========================================================= */

.why-cta-left {
  display: flex !important;
  flex-direction: row !important;

  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;
  min-width: 0;

  gap: 24px !important;

  padding-right: 35px;
}

/* CTA phone icon */

.why-cta-phone {
    position: relative;

    flex: 0 0 64px;

    width: 64px !important;
    height: 64px;

    border: 0;
    border-radius: 0;

    background: none;
    box-shadow: none;
}

.why-cta-phone .elementor-widget-container {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}

.why-cta-phone svg,
.why-cta-phone img {
    width: 52px !important;
    height: 52px !important;

    object-fit: contain;
}

/* CTA text column */

.why-cta-copy {
  flex: 1 1 auto;

  width: auto !important;
  min-width: 0;

  gap: 0 !important;
}

/* CTA heading */

.why-cta-title {
  width: 100% !important;

  margin-bottom: 6px;
}

.why-cta-title .elementor-heading-title {
  margin: 0;

  color: #ffffff;

  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.45px;
}

/* CTA paragraph */

.why-cta-text {
  width: 100% !important;
  max-width: 510px;
}

.why-cta-text .elementor-widget-container,
.why-cta-text p {
  margin: 0;
}

.why-cta-text p {
  color: var(--why-text-soft);

  font-size: 14.5px;
  line-height: 1.55;
}

/* =========================================================
29 — CTA VERTICAL DIVIDER
========================================================= */

.why-cta-divider {
  width: 1px !important;

  height: 78px;
  min-height: 78px;

  background: rgba(51, 139, 255, 0.48);
}

/* =========================================================
30 — CTA RIGHT SIDE
========================================================= */

.why-cta-right {
  width: 100% !important;
  min-width: 0;

  gap: 0 !important;

  padding-left: 44px;
}

/* CTA button */

.why-cta-button {
  width: 100% !important;
  max-width: 335px;

  margin-bottom: 11px;
}

.why-cta-button .elementor-button {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 56px;

  padding: 15px 25px;

  border: 1px solid rgba(255, 255, 255, 0.84);

  border-radius: 5px;

  background: #ffffff;
  color: #0759d2;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;

  box-shadow: 0 8px 22px rgba(0, 21, 72, 0.18);

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
}

.why-cta-button .elementor-button:hover {
    transform:
        translateY(-2px);

    background: #f5f9ff;
    color: #064fc0;

    box-shadow:
        0 12px 27px rgba(0, 21, 72, 0.25);
}

.why-cta-button .elementor-button-icon {
  margin-left: 15px;

  transition: transform 0.22s ease;
}

.why-cta-button .elementor-button:hover .elementor-button-icon {
    transform:
        translateX(5px);
}

/* CTA reassurance note */

.why-cta-note {
  display: flex !important;
  flex-direction: row !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  gap: 7px !important;
}

.why-cta-note-icon {
  flex: 0 0 auto;

  width: auto !important;
}

.why-cta-note-icon .elementor-icon {
  display: flex;

  color: var(--why-blue-bright);

  font-size: 14px;
}

.why-cta-note-icon svg {
  width: 14px;
  height: 14px;

  fill: currentColor;
}

.why-cta-note-text {
  width: auto !important;
}

.why-cta-note-text .elementor-widget-container,
.why-cta-note-text p {
  margin: 0;
}

.why-cta-note-text p {
  color: rgba(255, 255, 255, 0.9);

  font-size: 12.5px;
  line-height: 1.4;
}

/* =========================================================
   31 — TABLET LAYOUT
   768PX TO 1200PX
   ========================================================= */

@media (min-width: 768px) and (max-width: 1200px) {
	

    /* =====================================================
       TABLET — FEATURE CARDS

       Primary card stays full width.
       Secondary cards sit side-by-side underneath.
       ===================================================== */

    .why-feature-grid {
        grid-template-columns: 1fr;

        min-height: 0;

        gap: 14px !important;
    }

    .why-feature-primary {
        min-height: 440px;

        background-position:
            center center !important;
    }

    .why-primary-content {
        width:
            min(52%, 430px) !important;

        padding:
            28px 30px 24px;
    }


    /* Secondary cards */

    .why-feature-secondary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: none;

        gap: 14px !important;
    }

    .why-small-card {
        min-height: 300px;
    }

    .why-small-content {
        width: 78% !important;

        padding:
            23px 23px 21px;
    }

    .why-small-title .elementor-heading-title {
        font-size: 22px;
    }

    .why-small-text p {
        font-size: 14px;
    }


    /* =====================================================
       TABLET — BENEFIT STRIP

       Six items become two rows of three.
       ===================================================== */

    .why-benefit-strip {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .why-benefit-item {
        min-height: 112px;

        border-right: 0 !important;
        border-bottom: 0 !important;
    }


    /* Vertical dividers between columns */

    .why-benefit-item:nth-child(1),
    .why-benefit-item:nth-child(2),
    .why-benefit-item:nth-child(4),
    .why-benefit-item:nth-child(5) {
        border-right:
            1px solid rgba(42, 125, 225, 0.25) !important;
    }


    /* Horizontal divider between the two rows */

    .why-benefit-item:nth-child(1),
    .why-benefit-item:nth-child(2),
    .why-benefit-item:nth-child(3) {
        border-bottom:
            1px solid rgba(42, 125, 225, 0.25) !important;
    }


    /* =====================================================
       TABLET — CTA
       ===================================================== */

    .why-cta {
        grid-template-columns:
            minmax(0, 1.15fr)
            1px
            minmax(300px, 0.85fr);

        padding-inline: 29px;
    }

    .why-cta-left {
        padding-right: 27px;
    }

    .why-cta-right {
        padding-left: 28px;
    }

    .why-cta-title .elementor-heading-title {
        font-size: 23px;
    }

}
/* =========================================================
32 — MOBILE LAYOUT
767PX AND BELOW

Mobile uses a single-column card layout, a two-column
benefit strip, and a stacked CTA.

The Why section overlaps the final 180px of the hero so
the transparent-to-navy fade remains over hero artwork
instead of revealing the light page background.
========================================================= */

@media (max-width: 767px) {
	
	
	 .why-section {
        pointer-events: none;
		  position: relative !important;

        top: -90px !important;

        z-index: 2 !important;
    }

    .why-inner {
        pointer-events: auto;
    }
	

	
	
/* =========================================================
extend mobile hero image below viewport
========================================================= */	
    .sct-hero::after {
        content: "";
        display: block;

        width: 100%;
        height: 30px;
        min-height: 30px;

        flex: 0 0 30px;
    }
    /* =====================================================
       MOBILE — SECTION HEADING
       ===================================================== */

    .why-heading-wrap {
        margin-bottom: 20px;
    }

    .why-eyebrow {
        margin-bottom: 10px;
    }

    .why-eyebrow .elementor-heading-title {
        font-size: 13px;
        letter-spacing: 1.15px;
    }

    .why-heading {
        max-width: 560px;

        margin-bottom: 14px;
    }

    .why-heading .elementor-heading-title {
        font-size:
            clamp(34px, 10vw, 44px);

        line-height: 1.08;
        letter-spacing: -1.1px;
    }

    .why-intro {
        max-width: 570px;
    }

    .why-intro p {
        font-size: 16px;
        line-height: 1.55;
    }


    /* =====================================================
       MOBILE — FEATURE CARD GRID

       Important:
       This explicitly forces one column on mobile now that
       the tablet layout begins at 768px.
       ===================================================== */

    .why-feature-grid {
        grid-template-columns: 1fr;

        min-height: 0;

        gap: 13px !important;

        margin-bottom: 13px;
    }


    /* Primary card */

    .why-feature-primary {
        min-height: 515px;

        background-position:
            62% center !important;
    }

    .why-feature-primary::before {
        background:
            linear-gradient(
                90deg,
                rgba(2, 14, 33, 0.99) 0%,
                rgba(2, 14, 33, 0.96) 44%,
                rgba(2, 14, 33, 0.73) 74%,
                rgba(2, 14, 33, 0.4) 100%
            ),
            linear-gradient(
                0deg,
                rgba(0, 8, 21, 0.8),
                transparent 60%
            );
    }

    .why-primary-content {
        width: 100% !important;
        max-width: 430px;

        padding:
            25px 24px 22px;
    }


    /* =====================================================
       MOBILE — SECONDARY CARDS

       Security and Local Experts stack vertically.
       ===================================================== */

    .why-feature-secondary {
        grid-template-columns: 1fr;
        grid-template-rows: none;

        gap: 13px !important;
    }

    .why-small-card {
        min-height: 300px;
    }

    .why-small-content {
        width:
            min(75%, 450px) !important;

        padding:
            24px 23px 21px;
    }

    .why-small-title .elementor-heading-title {
        font-size: 23px;
    }

    .why-card-title .elementor-heading-title {
        font-size: 27px;
    }

    .why-card-text p {
        font-size: 15px;
    }


 /* =====================================================
   MOBILE — COMPACT BENEFIT STRIP
   Two columns / three rows with tighter icon-to-text
   spacing and reduced overall height.
   ===================================================== */

.why-benefit-strip {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    margin-bottom: 13px;
}

.why-benefit-item {
    min-height: 120px;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 6px !important;

    padding: 10px 8px;

    text-align: center;

    border-right: 0 !important;
    border-bottom: 0 !important;
}


/* Center vertical divider */

.why-benefit-item:nth-child(1),
.why-benefit-item:nth-child(3),
.why-benefit-item:nth-child(5) {
    border-right:
        1px solid rgba(42, 125, 225, 0.25) !important;
}


/* Horizontal dividers */

.why-benefit-item:nth-child(1),
.why-benefit-item:nth-child(2),
.why-benefit-item:nth-child(3),
.why-benefit-item:nth-child(4) {
    border-bottom:
        1px solid rgba(42, 125, 225, 0.25) !important;
}


/* Benefit icon */

.why-benefit-icon {
    flex: 0 0 auto;

    width: 49px !important;

    margin: 0;
}

.why-benefit-icon svg,
.why-benefit-icon img {
    width: 43px;
    height: 43px;

    object-fit: contain;
}


/* Benefit text */

.why-benefit-copy {
    flex: 0 0 auto !important;

    width: 100% !important;

    align-items: center !important;
}

.why-benefit-title {
    margin-bottom: 2px;
}

.why-benefit-title .elementor-heading-title {
    font-size: 13.5px;
    line-height: 1.28;
}

.why-benefit-text p {
    font-size: 11px;
    line-height: 1.4;
}

   /* =====================================================
   MOBILE — CONSULTATION CTA
   Compact height with content-sized rows.
   ===================================================== */

.why-cta {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;

    align-items: start !important;

    min-height: 0 !important;
    height: auto !important;

    padding: 22px 20px;
}


/* CTA heading / icon area */

.why-cta-left {
    min-height: 0 !important;
    height: auto !important;

    align-self: start !important;

    padding: 0 0 18px;

    gap: 18px !important;
}


/* Hide desktop divider */

.why-cta-divider {
    display: none !important;
}


/* CTA button area */

.why-cta-right {
    min-height: 0 !important;
    height: auto !important;

    align-self: start !important;

    padding: 18px 0 0;

    border-top:
        1px solid rgba(51, 139, 255, 0.42);
}

.why-cta-button {
    max-width: 390px;
    margin-bottom: 0;
}
	
	/* =========================================================
   MOBILE — PREVENT HORIZONTAL PAGE OVERFLOW

   Prevents decorative elements and translated content from
   extending the page width while still allowing vertical
   overflow where needed.
   ========================================================= */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip !important;
    }

    .why-section {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }


}

/* =========================================================
33 — SMALL MOBILE LAYOUT
480PX AND BELOW
========================================================= */

@media (max-width: 480px) {


    /* =====================================================
       SMALL MOBILE — SECTION HEADING
       ===================================================== */

    .why-heading .elementor-heading-title {
        font-size: 34px;
    }


    /* =====================================================
       SMALL MOBILE — LARGE FEATURE CARD
       ===================================================== */

    .why-feature-primary {
        min-height: 545px;

        background-position:
            66% center !important;
    }

    .why-feature-primary::before {
        background:
            linear-gradient(
                90deg,
                rgba(2, 14, 33, 0.99) 0%,
                rgba(2, 14, 33, 0.95) 57%,
                rgba(2, 14, 33, 0.71) 100%
            ),
            linear-gradient(
                0deg,
                rgba(0, 8, 21, 0.83),
                transparent 64%
            );
    }

    .why-primary-content {
        padding:
            23px 20px 21px;
    }


    /* =====================================================
       SMALL MOBILE — SECONDARY FEATURE CARDS
       ===================================================== */

    .why-small-card {
        min-height: 320px;

        background-position:
            65% center !important;
    }

    .why-small-card::before {
        background:
            linear-gradient(
                90deg,
                rgba(2, 14, 33, 0.99) 0%,
                rgba(2, 14, 33, 0.94) 62%,
                rgba(2, 14, 33, 0.64) 100%
            );
    }

    .why-small-content {
        width: 100% !important;
        max-width: 390px;

        padding:
            22px 20px 20px;
    }

    .why-small-content > .why-card-line {
        margin-left: 69px;
    }


    /* =====================================================
       SMALL MOBILE — CARD ICON SIZING
       ===================================================== */

    .why-card-icon {
        width: 56px !important;
        height: 56px;
    }

    .why-small-icon {
        flex-basis: 52px;

        width: 52px !important;
        height: 52px;
    }

    .why-small-top {
        gap: 15px !important;
    }


    /* =====================================================
       SMALL MOBILE — CARD TYPOGRAPHY
       ===================================================== */

    .why-card-title .elementor-heading-title {
        font-size: 25px;
    }

    .why-small-title .elementor-heading-title {
        font-size: 21px;
    }


    /* =====================================================
       SMALL MOBILE — COMPACT CONSULTATION CTA
       Forces natural content height and removes excess
       vertical space between the icon, copy, and button.
       ===================================================== */

    .why-cta {
        display: block !important;

        min-height: 0 !important;
        height: auto !important;

        padding:
            16px 18px 14px !important;
    }


    /* CTA icon + text area */

    .why-cta-left {
        display: grid !important;

        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;

        justify-items: center !important;
        align-items: start !important;
        align-content: start !important;

        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;

        gap: 8px !important;

        padding:
            0 0 12px !important;

        text-align: center;
    }


    /* Calendar/check icon */

    .why-cta-phone {
        flex: none !important;

        width: 54px !important;
        height: 54px !important;

        min-height: 0 !important;

        margin: 0 !important;
    }

    .why-cta-phone .elementor-widget-container {
        width: 54px !important;
        height: 54px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .why-cta-phone svg,
    .why-cta-phone img {
        display: block;

        width: 48px !important;
        height: 48px !important;

        margin: auto !important;

        object-fit: contain;
    }


    /* CTA text */

    .why-cta-copy {
        display: flex !important;
        flex: none !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;

        gap: 3px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .why-cta-title {
        margin: 0 !important;
    }

    .why-cta-title .elementor-heading-title {
        font-size: 23px;
    }

    .why-cta-text {
        width: 100% !important;
        max-width: 340px;

        margin: 0 !important;
    }

    .why-cta-text p {
        margin: 0 !important;

        font-size: 14px;
    }


    /* Hide desktop/tablet divider */

    .why-cta-divider {
        display: none !important;
    }


    /* CTA button area */

    .why-cta-right {
        width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;

        padding:
            12px 0 10px !important;

        border-top:
            1px solid rgba(51, 139, 255, 0.42);
    }

    .why-cta-button {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
    }

    .why-cta-button .elementor-button {
        width: 100%;

        min-height: 50px;

        padding:
            12px 16px;

        font-size: 14px;
    }

}

/* =========================================================
34 — REDUCED MOTION ACCESSIBILITY

Removes hover and movement transitions for visitors who
request reduced motion in their device settings.
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .why-card,
  .why-learn-more .elementor-button-icon,
  .why-cta-button .elementor-button,
  .why-cta-button .elementor-button-icon {
    transition: none;
  }
}