/* ============================================================
   DESIGN SYSTEM — Global color variables
   Edit a value here to update that color project-wide.
   These variables are loaded globally via index.html, so they
   are available in iclick-Customer-portal.css, frontex-style.css,
   and all component CSS files.
   ============================================================ */
:root {
  /* === NEUTRALS === */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f7f7f7;          /* Very light bg */
  --color-gray-100: #efefef;         /* Light bg */
  --color-gray-200: #e0e0e0;         /* Light border */
  --color-gray-300: #c6c6c6;         /* Medium-light border */
  --color-gray-400: #868686;         /* Disabled/placeholder */
  --color-gray-500: #D9D9D9;         /* Mid gray */
  --color-gray-600: #404040;         /* Body text fallback */
  --color-gray-700: #292929;         /* Nav links */
  --color-gray-800: #1a1a1a;         /* Near-black */
  --color-text-primary: #21272A;     /* CoolGray 90 - main body text */

  /* === ICLICK BRAND (iclick-style.css) === */
  --color-primary: #0F62FE;          /* Main CTA blue (Carbon) */
  --color-primary-navbar: #0D6EFD;          /* Main CTA blue (Carbon) */
  --color-primary-hover: #0047ed;    /* Darker blue hover */
  --color-primary-accent: #3678ff;   /* Secondary accent blue */
  --color-primary-light: #758ef0;    /* Light lavender-blue */
  --color-primary-dark: #25197e;     /* Dark navy (active nav) */
  --color-primary-darkest: #071124;  /* Deepest navy (gradient end) */
  --color-primary-pure: #002eff;     /* Pure saturated blue */

  /* === STATUS === */
  --color-success: #409d3c;
  --color-success-light: #b5ebc9;
  --color-error: #ff3d00;
  --color-warning: #f5c518;

  /* === CUSTOMER PORTAL (iclick-Customer-portal.css) === */
  --color-portal-purple: #9d349a;
  --color-portal-purple-dark: #891486;
  --color-portal-purple-light: #dba1d9;
  --color-portal-purple-darkest: #660360;
  --color-portal-gray-bg: #eff3f6;

  /* === FRONTEX BRAND (frontex-style.css) === */
  --color-frontex-primary: #004289;
  --color-frontex-primary-dark: #00356e;
  --color-frontex-primary-hover: #0079fc;
  --color-frontex-bg: #e6f2ff;
  --color-frontex-accent: #e91e63;

  /* === SHADOWS === */
  --shadow-card: 0 4px 4px rgba(0, 0, 0, 0.25);
  --shadow-light: 0 4px 4px rgba(0, 0, 0, 0.1);

  /* === TYPOGRAPHY (per Figma design system) ===
     Verified directly in Figma via Claude in Chrome inspection.
     Each stack falls back to GT Walsheim Pro until the real Futura/Nexa
     font files are placed in src/assets/font/.                          */
  --font-heading:  'Futura Hv BT', 'GT Walsheim Pro', 'Helvetica Neue', Arial, sans-serif; /* H1/H2/H3 — Heavy   */
  --font-subhead:  'Futura Lt BT', 'GT Walsheim Pro', 'Helvetica Neue', Arial, sans-serif; /* Sub headlines — Light */
  --font-body:     'Futura Bk BT', 'GT Walsheim Pro', 'Helvetica Neue', Arial, sans-serif; /* Paragraphs — Book    */
  --font-button:   'Futura Hv BT',   'GT Walsheim Pro', sans-serif;        /* CTAs — Bold 700      */
  /* --font-button:   'Nexa Demo',    'Futura Hv BT',   'GT Walsheim Pro', sans-serif;    */
}

body {
  /*font-family: 'Barlow', sans-serif !important;*/
  font-family: var(--font-body) !important;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: var(--color-gray-600);
  background-color: var(--color-white) !important;
  /*color: #000741;*/
}

/* --- Global heading / button typography defaults (per Figma)
   Individual component classes can still override these when they
   need to. Kept as a single place to change the site's type scale. --- */
h1, h2, h3, h4, h5, h6,
.title-heading, .title-header, .title-section, .title-blue, .title-white,
.title-light-blue, .title-dark-blue, .title-white-bigger, .title-blue-box,
.title-assistance, .title_plan, .title_uf, .title-card-price-iclick {
  font-family: var(--font-heading);
}

p, span, li, td, label, input, textarea, select {
  font-family: var(--font-body);
}

button, .btn {
  font-family: var(--font-button);
}


/*NAVBAR MENU*/
.navbar-iclick {
  /*background-color: #f8f9fa !important;*/
  background-color: var(--color-white) !important;
  border-bottom: 1px solid #dadada;
}

a.nav-link {
  color: var(--color-text-primary);
  font-size: 17px;
  font-weight: 400;
}

.op-navbar-iclick {
  padding-left: 13px;
  padding-right: 13px;
}

.sub-op-navbar-iclick {
  padding-top: 13px;
  padding-bottom: 13px;
}

/**************Nuevo navbar MENU***************/
.navbar {
  transition: 0.5s;
}

/* Default (unscrolled) navbar background. Matches the home page hero's
   light-gray fill (#e6e6e6) so the two visually merge. On pages that
   override with .navbar-white or .navbar-blue, those rules use
   !important and win the cascade. */
   .navbar-transparente {
    background-color: #e6e6e6;
  }


.navbar-white {
  background-color: var(--color-primary-light)!important;
  transition: 1s;
  -webkit-box-shadow: 0px -5px 5px 5px rgb(0 0 0 / 23%);
  box-shadow: 0px -5px 5px 5px rgb(0 0 0 / 23%);
}

/* Solid-primary navbar — used on pages whose hero already sits on a
   --color-primary background (e.g. /products). Keeps the iClick logo and
   nav links readable by switching to white text/outline pills. */
.navbar-blue {
  background-color: var(--color-primary-navbar)!important;
  transition: 1s;
  -webkit-box-shadow: 0px -5px 5px 5px rgb(0 0 0 / 23%);
  box-shadow: 0px -5px 5px 5px rgb(0 0 0 / 23%);
}

/* Darker variant of navbar-blue — used on /homeproduct/quote and /dashboard
   where the page body is a deeper blue (#0047ed, aka --color-primary-hover).
   All text / pill / logo behavior is inherited from the shared selectors
   below so the two navbars look identical except for the background shade. */
.navbar-blue-hover {
  background-color: var(--color-primary-hover)!important;
  transition: 1s;
  -webkit-box-shadow: 0px -5px 5px 5px rgb(0 0 0 / 23%);
  box-shadow: 0px -5px 5px 5px rgb(0 0 0 / 23%);
}

/* Shared text / button / logo rules for all "white-on-blue" navbars.
   Listing both class names here keeps the styles DRY. */
.navbar-blue a.nav-link.new-navbar,
.navbar-blue a.nav-link.new-navbar:hover,
.navbar-blue a.nav-link.new-navbar.active,
.navbar-blue-hover a.nav-link.new-navbar,
.navbar-blue-hover a.nav-link.new-navbar:hover,
.navbar-blue-hover a.nav-link.new-navbar.active {
  color: var(--color-white) !important;
}
.navbar-blue .btn-outline-primary,
.navbar-blue .btn-outline-dark,
.navbar-blue-hover .btn-outline-primary,
.navbar-blue-hover .btn-outline-dark {
  color: var(--color-white);
  border-color: var(--color-white);
}
.navbar-blue .btn-outline-primary:hover,
.navbar-blue .btn-outline-dark:hover,
.navbar-blue-hover .btn-outline-primary:hover,
.navbar-blue-hover .btn-outline-dark:hover {
  background-color: var(--color-white);
  color: var(--color-primary) !important;
}
/* The nav template uses the dark-blue iClick PNG; on any white-on-blue
   navbar we flip it to white so the logo remains visible. The PNG is
   monochrome, so brightness(0) + invert(1) produces a clean white version
   without needing a separate asset. */
.navbar-blue .logo-nav-bar .logo-white,
.navbar-blue-hover .logo-nav-bar .logo-white {
  filter: brightness(0) invert(1);
}
/* Mobile top bar (<992px) on white-on-blue navbars: the burger icon has a
   fixed black color in frontex-style, and the user-name link wraps its text
   in a Bootstrap .btn, which resets the inherited white. Force both white. */
.navbar-blue .lines-navbar-ivea,
.navbar-blue-hover .lines-navbar-ivea,
.navbar-white .lines-navbar-ivea,
.navbar-blue .navbar-toggler .btn,
.navbar-blue-hover .navbar-toggler .btn,
.navbar-white .navbar-toggler .btn {
  color: var(--color-white) !important;
}
/* EN | ES toggle (mobile top bar): follows the burger icon's color.
   Default = black like .lines-navbar-ivea; blue navbars = white outline
   and text, active pill white with blue text. */
.mobile-lang-switch {
  --lang-fg: var(--color-black);
  --lang-active-fg: var(--color-white);
}
.navbar-blue .mobile-lang-switch,
.navbar-blue-hover .mobile-lang-switch,
.navbar-white .mobile-lang-switch {
  --lang-fg: var(--color-white);
  --lang-active-fg: var(--color-primary);
}

/* "powered by 360 Risk Solutions LLC" tagline that sits directly below the
   centered iClick logo. Mirrors the logo's color transformation: dark navy
   on transparent navbars; white on blue / blue-hover / scrolled-white
   navbars. */
.logo-nav-bar .logo-tagline {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-primary-darkest);
  white-space: nowrap;
}
/* Smaller variant used when the nav-menu is in `smallLogo` mode (and
   always on the mobile logo, which is always small). */
.logo-nav-bar .logo-tagline.logo-tagline-sm {
  font-size: 8px;
  margin-top: 4px;
}
.navbar-blue .logo-nav-bar .logo-tagline,
.navbar-blue-hover .logo-nav-bar .logo-tagline,
.navbar-white .logo-nav-bar .logo-tagline {
  color: #ffffff;
}

/* Hide elements only in the Bootstrap `lg` breakpoint range (992–1199.98px)
   — used on the navbar's "Make a Claim" button, which gets crowded out of
   the right-side button cluster on mid-size desktops. Shown normally on
   mobile (<992px) and full desktop (≥1200px).
   Selector is bumped to `a.hide-at-lg-only` so it beats the many
   `.ocultar-op-en-mobile { display: block !important }` rules declared
   later in the cascade at the same base specificity. */
@media (min-width: 992px) and (max-width: 1525px) {
  a.hide-at-lg-only,
  .hide-at-lg-only.nav-link {
    display: none !important;
  }
}

/* Navbar tightening for the mid-desktop range (992–1525px).
   The navbar uses an absolutely-centered 222px logo plus a left nav and a
   right pill cluster, and those three pieces overlap in this range. We
   shrink the logo, reduce horizontal padding, and tighten the left nav gap
   so the three zones don't collide. Everything returns to defaults at
   ≥1526px where there's enough room for the original layout. */
@media (min-width: 992px) and (max-width: 1525px) {
  /* Shrink the centered logo (desktop version only — the mobile logo at
     d-lg-none is unaffected). */
  nav.navbar-transparente .d-lg-block.logo-nav-bar .logo-white {
    width: 140px !important;
    height: auto !important;
  }
  /* Reduce the navbar's large horizontal padding so left nav and right
     action pills each get ~50px more breathing room. */
  .navbar-transparente {
    padding-inline: 30px !important;
  }
  /* Tighter gap between left nav links (Home / About / Our Products) —
     `gap-5` (3rem) is overkill at this size. */
  .navbar-transparente .navbar-nav.gap-5 {
    gap: 1rem !important;
  }
}
.navbar-white a.nav-link.new-navbar,
.navbar-white a.nav-link.new-navbar:hover,
.navbar-white a.nav-link.new-navbar.active {
  color: var(--color-white) !important;
}
.navbar-white .btn-outline-primary,
.navbar-white .btn-outline-dark {
  color: var(--color-white);
  border-color: var(--color-white);
}
.navbar-white .btn-outline-primary:hover,
.navbar-white .btn-outline-dark:hover {
  background-color: var(--color-white);
  color: var(--color-primary) !important;
}
.navbar-white .exit-image,
.navbar-white .exit-image:hover,
.navbar-white .exit-image.active {
  filter: brightness(0) invert(1);
}
.navbar-blue .exit-image,
.navbar-blue .exit-image:hover,
.navbar-blue .exit-image.active {
  filter: brightness(0) invert(1);
}
.navbar-blue-hover .exit-image,
.navbar-blue-hover .exit-image:hover,
.navbar-blue-hover .exit-image.active {
  filter: brightness(0) invert(1);
}
.exit-image {
  width: 20px;
  height: 20px;
}
/* The nav template uses the dark-blue iClick PNG; on the blue navbar we
   flip it to white so the logo remains visible. The PNG is monochrome,
   so brightness(0) + invert(1) produces a clean white version without
   needing a separate asset. */
.navbar-white .logo-nav-bar .logo-white {
  filter: brightness(0) invert(1);
}
/*----Opciones----*/
a.nav-link.new-navbar.active {
  color: var(--color-text-primary);
  font-weight: bold;
  text-decoration: underline;
}

a.nav-link.new-navbar {
  font-family: var(--font-heading);
  color: var(--color-gray-700);
  font-weight: bold;
  font-size: 16px;
  font-weight: 400;
  padding: 0.5rem 0.2rem;
}

  a.nav-link.new-navbar:hover {
    color: var(--color-text-primary);
    font-weight: bold;
  }

/*----IPAD----*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .navbar-transparente {
    padding-inline: 80px;
  }
}



/******************OCULTAR OPCIONES EN DESKTOP********************/
/*small (mobile)*/
@media (min-width: 100px) {
  .ocultar-op-en-desktop {
    display: block !important;
  }
}

/*small (mobile)*/
@media (min-width: 400px) {
  .ocultar-op-en-desktop {
    display: block !important;
  }
}

/*small devices (mobile)*/
@media (min-width: 600px) {
  .ocultar-op-en-desktop {
    display: block !important;
  }
}


/*----IPAD----*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .ocultar-op-en-desktop {
    display: block !important;
  }
}

@media (min-width: 800px) {
  .ocultar-op-en-desktop {
    display: block !important;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .ocultar-op-en-desktop {
    display: none !important;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .ocultar-op-en-desktop {
    display: none !important;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1300px and up)*/
@media (min-width: 1300px) {
  .ocultar-op-en-desktop {
    display: none !important;
  }
}

/******************OCULTAR OPCIONES EN MOBILE********************/
/*small (mobile)*/
@media (min-width: 100px) {
  .ocultar-op-en-mobile {
    display: none !important;
  }
}

/*small (mobile)*/
@media (min-width: 400px) {
  .ocultar-op-en-mobile {
    display: none !important;
  }
}

/*small devices (mobile)*/
@media (min-width: 600px) {
  .ocultar-op-en-mobile {
    display: none !important;
  }
}


/*----IPAD----*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .ocultar-op-en-mobile {
    display: none !important;
  }
}

@media (min-width: 800px) {
  .ocultar-op-en-mobile {
    display: none !important;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .ocultar-op-en-mobile {
    display: block !important;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .ocultar-op-en-mobile {
    display: block !important;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1300px and up)*/
@media (min-width: 1300px) {
  .ocultar-op-en-mobile {
    display: block !important;
  }
}




/*********MARGENES***************/

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-80 {
  margin-top: 80px;
}

/*********HEADER***************/
.title-header.text-center {
  font-size: 3rem;
  font-weight: bold;
}

.title-header-white {
  font-size: 3rem;
  font-weight: bold;
}

.text-sombreado {
  filter: drop-shadow(0px 1px 5px black);
}

.icon-header {
  width: 100px;
  height: 100px;
  color: var(--color-gray-400);
}

.card-header {
  text-align: center;
  padding: 20px;
  border: 1px solid #a9a9a9;
  border-radius: 10px !important;
  width: 200px;
}

.card-header-title {
  font-size: 20px;
}

a.link-card.header {
  font-size: 20px;
}





/*********NUEVO HEADER***************/





/*IMAGEN HEADER*/

.background-img-home{
  background-image: linear-gradient(to right, #f6f6fd 0%, rgba(246, 246, 253, 0.9) 30%, rgba(246, 246, 253, 0.3) 55%, transparent 75%), url(../img/img-background-hero-2.jpeg);
  background-repeat: no-repeat;
  background-position-x: right;
}
/*small (mobile)*/
/* @media (min-width: 100px) {
  .background-img-home {
    background-size: cover;
    background-blend-mode: multiply;
  }
} */
@media (max-width: 450px) {
  .background-img-home {
    background-image: none;
    background-size: cover;
    background-blend-mode: multiply;
    background-color: var(--color-primary-accent)
  }
  
}
/*small (mobile)*/
@media (min-width: 451px) {
  .background-img-home {
    background-size: cover;
    background-blend-mode: multiply;
    background-color: #eeeff9
  }
}

/*small devices (mobile)*/
@media (min-width: 600px) {
  .background-img-home {
    background-size: cover;
    background-blend-mode: multiply;
  }
}

/*----IPAD----*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .background-img-home {
    background-size: contain;
    /*background-size: auto;*/
    background-blend-mode: normal;
  }
}

@media (min-width: 800px) {
  .background-img-home {
    background-size: contain;
    /*background-size: auto;*/
    background-blend-mode: normal;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .background-img-home {
    background-size: contain;
    /*background-size: auto;*/
    background-blend-mode: normal;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .background-img-home {
    background-size: contain;
    /*background-size: auto;*/
    background-blend-mode: normal;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1300px and up)*/
@media (min-width: 1300px) {
  .background-img-home {
    background-size: contain;
    /*background-size: auto;*/
    background-blend-mode: normal;
  }
}





/*TITULO*/
.line-height-title-header.heighter {
  margin-bottom: -20px;
}

.title-vert-align {
  margin-top: 100px;
}


/*small (mobile)*/
@media (min-width: 100px) {
  .text-white-white {
    color: var(--color-white);
    filter: drop-shadow(0px 1px 5px black);
    font-size: 4rem;
    text-align: center;
  }
}

/*small (mobile)*/
@media (min-width: 400px) {
  .text-white-white {
    color: var(--color-white);
    filter: drop-shadow(0px 1px 5px black);
    font-size: 4rem;
    text-align: center;
  }
}

/*small devices (mobile)*/
@media (min-width: 600px) {
  .text-white-white {
    color: var(--color-white);
    filter: drop-shadow(0px 1px 5px black);
    font-size: 4rem;
    text-align: center;
  }
}

/*----IPAD----*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .text-white-white {
    color: var(--color-white);
    font-size: 5.6rem;
    text-align: left;
    filter: none;
  }
}

@media (min-width: 800px) {
  .text-white-white {
    color: var(--color-white);
    font-size: 5.6rem;
    text-align: left;
    filter: none;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .text-white-white {
    color: var(--color-white);
    font-size: 5.6rem;
    text-align: left;
    filter: none;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .text-white-white {
    color: var(--color-white);
    font-size: 5.6rem;
    text-align: left;
    filter: none;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1300px and up)*/
@media (min-width: 1300px) {
  .text-white-white {
    color: var(--color-white);
    font-size: 5.6rem;
    text-align: left;
    filter: none;
  }
}




/*SUB-TITULO*/
.sub-title-header.smaller {
  font-size: 1.7rem;
}

/*small (mobile)*/
@media (min-width: 100px) {
  .sub-title-header.blue-white.smaller {
    color: var(--color-white);
    filter: drop-shadow(0px 1px 5px black);
    text-align: center;
    font-size: 1.7rem;
  }
}

/*small (mobile)*/
@media (min-width: 400px) {
  .sub-title-header.blue-white.smaller {
    color: var(--color-white);
    filter: drop-shadow(0px 1px 5px black);
    text-align: center;
    font-size: 1.7rem;
  }
}

/*small devices (mobile)*/
@media (min-width: 600px) {
  .sub-title-header.blue-white.smaller {
    color: var(--color-white);
    filter: drop-shadow(0px 1px 5px black);
    text-align: center;
    font-size: 1.7rem;
  }
}

/*----IPAD----*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .sub-title-header.blue-white.smaller {
    color: var(--color-primary-dark);
    font-size: 5.6rem;
    text-align: left;
    filter: none;
    font-size: 1.7rem;
  }
}

@media (min-width: 800px) {
  .sub-title-header.blue-white.smaller {
    color: var(--color-primary-dark);
    font-size: 5.6rem;
    text-align: left;
    filter: none;
    font-size: 1.7rem;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .sub-title-header.blue-white.smaller {
    color: var(--color-primary-dark);
    font-size: 5.6rem;
    text-align: left;
    filter: none;
    font-size: 1.7rem;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .sub-title-header.blue-white.smaller {
    color: var(--color-primary-dark);
    font-size: 5.6rem;
    text-align: left;
    filter: none;
    font-size: 1.7rem;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1300px and up)*/
@media (min-width: 1300px) {
  .sub-title-header.blue-white.smaller {
    color: var(--color-primary-dark);
    font-size: 5.6rem;
    text-align: left;
    filter: none;
    font-size: 1.7rem;
  }
}

.title-header {
  font-weight: 400;
}

.sub-title-header {
  font-weight: 500;
}




/*CENTRAR BOTÓN EN MOBILE*/

/*small (mobile)*/
@media (min-width: 100px) {
  .centrar-mobile {
    text-align: center;
  }
}

/*small (mobile)*/
@media (min-width: 400px) {
  .centrar-mobile {
    text-align: center;
  }
}

/*small devices (mobile)*/
@media (min-width: 600px) {
  .centrar-mobile {
    text-align: center;
  }
}

/*----IPAD----*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .centrar-mobile {
    text-align: left;
  }
}

@media (min-width: 800px) {
  .centrar-mobile {
    text-align: left;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .centrar-mobile {
    text-align: left;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .centrar-mobile {
    text-align: left;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1300px and up)*/
@media (min-width: 1300px) {
  .centrar-mobile {
    text-align: left;
  }
}










/*********************HEADER PRODUCT PAGE**************************************/

/*small (mobile)*/
@media (min-width: 100px) {
  .text-black-white {
    color: var(--color-white);
    filter: drop-shadow(0px 1px 5px black);
    font-size: 4rem;
    text-align: center;
  }
}

/*small (mobile)*/
@media (min-width: 400px) {
  .text-black-white {
    color: var(--color-white);
    filter: drop-shadow(0px 1px 5px black);
    font-size: 4rem;
    text-align: center;
  }
}

/*small devices (mobile)*/
@media (min-width: 600px) {
  .text-black-white {
    color: var(--color-white);
    filter: drop-shadow(0px 1px 5px black);
    font-size: 4rem;
    text-align: center;
  }
}

/*----IPAD----*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .text-black-white {
    color: var(--color-primary-darkest);
    font-size: 5.1rem;
    text-align: left;
    filter: none;
  }
}

@media (min-width: 800px) {
  .text-black-white {
    color: var(--color-primary-darkest);
    font-size: 5.1rem;
    text-align: left;
    filter: none;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .text-black-white {
    color: var(--color-primary-darkest);
    font-size: 5.1rem;
    text-align: left;
    filter: none;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .text-black-white {
    color: var(--color-primary-darkest);
    font-size: 5.1rem;
    text-align: left;
    filter: none;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1300px and up)*/
@media (min-width: 1300px) {
  .text-black-white {
    color: var(--color-primary-darkest);
    font-size: 5.1rem;
    text-align: left;
    filter: none;
  }
}


/*small (mobile)*/
@media (min-width: 100px) {
  .background-img-product {
    background-image: url("../img/home-page-banner-2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: cover;
    background-blend-mode: multiply;
  }
}

/*small (mobile)*/
@media (min-width: 400px) {
  .background-img-product {
    background-image: url("../img/home-page-banner-2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: cover;
    background-blend-mode: multiply;
  }
}

/*small devices (mobile)*/
@media (min-width: 600px) {
  .background-img-product {
    background-image: url("../img/home-page-banner-2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: cover;
    background-blend-mode: multiply;
  }
}

/*----IPAD----*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .background-img-product {
    background-image: url("../img/home-page-banner-2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
    /*background-size: auto;*/
    background-blend-mode: normal;
  }
}

@media (min-width: 800px) {
  .background-img-product {
    background-image: url("../img/home-page-banner-2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
    /*background-size: auto;*/
    background-blend-mode: normal;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .background-img-product {
    background-image: url("../img/home-page-banner-2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
    /*background-size: auto;*/
    background-blend-mode: normal;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .background-img-product {
    background-image: url("../img/home-page-banner-2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
    /*background-size: auto;*/
    background-blend-mode: normal;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1300px and up)*/
@media (min-width: 1300px) {
  .background-img-product {
    background-image: url("../img/home-page-banner-2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
    /*background-size: auto;*/
    background-blend-mode: normal;
  }
}











/*********************ALL SCREEN**************************************/
/*small (mobile)*/
@media (min-width: 100px) {
  .section-all-screen {
    /*height: 683px;*/
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/*small (mobile)*/
@media (min-width: 400px) {
  .section-all-screen {
    /*height: 683px;*/
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/*small devices (mobile)*/
@media (min-width: 600px) {
  .section-all-screen {
    /*height: 683px;*/
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 28px;
    padding-right: 28px;
  }
}


/*----IPAD----*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .section-all-screen {
    /*height: 682px;*/
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media (min-width: 800px) {
  .section-all-screen {
    /*height: 682px;*/
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 130px;
    padding-right: 130px;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .section-all-screen {
    /*height: 769px;*/
    height: 866px;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 130px;
    padding-right: 130px;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .section-all-screen {
    /*height: 770px;*/
    height: 866px;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 130px;
    padding-right: 130px;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1300px and up)*/
@media (min-width: 1300px) {
  .section-all-screen {
    height: 770px;
    /*height: 953px;*/
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 130px;
    padding-right: 130px;
  }
}



/*********SECCIÓN Totally digital***************/

/*small (mobile)*/
@media (min-width: 100px) {
  .background-img-Totally-digital {
    background-image: url("../img/img-digital.png");
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    background-size: 60%;
    /* background-size: auto;*/
  }
}

/*small (mobile)*/
@media (min-width: 400px) {
  .background-img-Totally-digital {
    background-image: url("../img/img-digital.png");
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    background-size: 60%;
    /* background-size: auto;*/
  }
}

/*small devices (mobile)*/
@media (min-width: 600px) {
  .background-img-Totally-digital {
    background-image: url("../img/img-digital.png");
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    background-size: 60%;
    /* background-size: auto;*/
  }
}

/*----IPAD----*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .background-img-Totally-digital {
    background-image: url("../img/img-digital.png");
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    background-size: 60%;
    /* background-size: auto;*/
  }
}

@media (min-width: 800px) {
  .background-img-Totally-digital {
    background-image: url("../img/img-digital.png");
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    background-size: 60%;
    /* background-size: auto;*/
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .background-img-Totally-digital {
    background-image: url("../img/img-digital.png");
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    background-size: 60%;
    /* background-size: auto;*/
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .background-img-Totally-digital {
    background-image: url(../img/img-digital.png);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    background-size: 60%;
    /* background-size: auto;*/
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1300px and up)*/
@media (min-width: 1300px) {
  .background-img-Totally-digital {
    background-image: url(../img/img-digital.png);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    background-size: 60%;
    /* background-size: auto;*/
  }
}


/*********SECCIONES***************/


/*small (mobile)*/
@media (min-width: 100px) {
  .section {
    padding-top: 8rem;
    padding-bottom: 8rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/*small (mobile)*/
@media (min-width: 400px) {
  .section {
    padding-top: 8rem;
    padding-bottom: 8rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/*small devices (mobile)*/
@media (min-width: 600px) {
  .section {
    padding-top: 8rem;
    padding-bottom: 8rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/*----IPAD----*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .section {
    padding-top: 8rem;
    padding-bottom: 8rem;
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

@media (min-width: 800px) {
  .section {
    padding-top: 8rem;
    padding-bottom: 8rem;
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .section {
    padding-top: 8rem;
    padding-bottom: 8rem;
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .section {
    padding-top: 8rem;
    padding-bottom: 8rem;
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1300px and up)*/
@media (min-width: 1300px) {
  .section {
    padding-top: 8rem;
    padding-bottom: 8rem;
    padding-left: 8rem;
    padding-right: 8rem;
  }
}



.content-section/*News*/ {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.bg-dark-blue {
  background-color: #DDE1E6;
  color: var(--color-black);
}

.background-gray {
  background-color: #f8f9fa;
}

.bg-light-gray{
  background-color: #f5f5f5;
}

.bg-dark-gray{
  background-color: #f2f2f2;
}

.bg-white{
  background-color: var(--color-white);
}

.bg-light-blue {
  background-color: var(--color-primary-accent);
  margin-top: -1px;
}

.bg-light-purple {
  background-color: #7d97ff;
  margin-top: -1px;
}

.bg-degrade-blue {
  background: rgb(7,17,36);
  background: -moz-linear-gradient(90deg, rgba(7,17,36,1) 0%, rgba(54,120,255,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(7,17,36,1) 0%, rgba(54,120,255,1) 100%);
  background: linear-gradient(90deg, rgba(7,17,36,1) 0%, rgba(54,120,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--color-primary-darkest)",endColorstr="var(--color-primary-accent)",GradientType=1);
}

/*small (mobile)*/
@media (min-width: 100px) {
  .bg-degrade-blue {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

/*small (mobile)*/
@media (min-width: 400px) {
  .bg-degrade-blue {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

/*small devices (mobile)*/
@media (min-width: 600px) {
  .bg-degrade-blue {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

/*----IPAD----*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .bg-degrade-blue {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

@media (min-width: 800px) {
  .bg-degrade-blue {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .bg-degrade-blue {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .bg-degrade-blue {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1300px and up)*/
@media (min-width: 1300px) {
  .bg-degrade-blue {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

.title-section {
  font-size: 2rem;
  font-weight: bold;
}

.sub-title-section {
  font-size: 1.4rem;
  font-weight: bold;
}

.text-section {
  font-size: 1rem;
  text-align: center;
}

.text-center{
  text-align: center;
}

/*Centrar Horizontal y vertical*/
.centrar-hor-ver {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*CARD SIN BORDES*/
.card.no-border {
  border: 0;
  margin-top: 20px;
}

a.link-card {
  color: #696969;
  border-bottom: 1px solid;
  padding-bottom: 7px;
}

/*CARD BLOG*/

img.card-blog-img-top {
  height: 193px;
  width: 280px;
}

img.card-blog-img-big {
  height: 450px;
  width: 586px;
}


/*CARD PREGUNTAS*/
.card-form-content {
  background-color: white;
  margin: 40px 0px;
  /*padding: 20px 15%;
  -webkit-box-shadow: 0px 10px 30px 0px rgb(204 204 204 / 60%);
  -moz-box-shadow: 0px 10px 30px 0px rgba(204, 204, 204, 0.6);
  box-shadow: 0px 10px 30px 0px rgb(204 204 204 / 60%);
  border: 1px solid rgba(204, 204, 204, 0.5);*/
}

/*MARGENES*/
.mt-dp5 {
  margin-top: 5%;
}


/*BOTONES*/
.btn-dark {
  color: var(--color-white);
  background-color: var(--color-primary-darkest);
  border-color: var(--color-primary-darkest);
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 25px;
  padding-left: 25px;
  border-radius: 0 !important;
  font-size: 13px;
  font-weight: bold;
}

.btn-light-blue {
  color: var(--color-primary-darkest);
  background-color: var(--color-primary-accent);
  border-color: var(--color-primary-accent);
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 25px;
  padding-left: 25px;
  border-radius: 0 !important;
  font-size: 13px;
  font-weight: bold;
}

.btn-light-blue:hover {
  color: var(--color-primary-darkest);
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

.btn-transparent {
  color: var(--color-primary-darkest);
  background-color: transparent;
  border-color: transparent;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 25px;
  padding-left: 25px;
  border-radius: 0 !important;
  font-size: 13px;
  font-weight: bold;
}

.btn.btn-small {
  padding: 2px;
  font-size: 11px;
  margin-top: -4px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #e9e9e9;
}

.btn.btn-small:hover {
  background-color: #b9b9b9;
}


a.btn.btn-special.w-100 {
  background-color: white;
  border: 1px solid #dedede;
}

a.btn.btn-special.w-100:hover {
  background-color: #dedede;
  border: 1px solid #dedede;
}


.btn.btn-orange {
  font-size: 18px;
  color: white;
  text-align: center;
  display: inline-block;
  width: auto;
  background-color: rgb(255, 61, 0);
  box-sizing: border-box;
  text-decoration: none;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(255, 61, 0);
  border-image: initial;
  margin: 10px 0px;
  transition: all 0.3s ease 0s;
  border-radius: 5px;
  padding: 10px 20px !important;
}

.btn.btn-orange:hover {
  font-size: 18px;
  color: rgb(255, 61, 0);
  text-align: center;
  display: inline-block;
  width: auto;
  background-color: white;
  box-sizing: border-box;
  text-decoration: none;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(255, 61, 0);
  border-image: initial;
  margin: 10px 0px;
  transition: all 0.3s ease 0s;
  border-radius: 5px;
  padding: 10px 20px !important;
}

.btn.btn-default.bottom-planes {
  border: none !important;
  margin-top: 25px !important;
  margin-bottom: 25px !important;
  background: var(--color-error) !important;
  color: white !important;
  height: 40px;
  width: 180px;
  font-size: 16px;
  border-radius: 40px;
}

.btn-primary {
  color: var(--color-white);
  background-color: var(--color-primary-accent);
  border-color: var(--color-primary-accent);
}

.btn-primary:hover {
  color: var(--color-primary-accent);
  background-color: var(--color-white);
  border-color: var(--color-primary-accent);
}

.btn.btn-previus {
  border: 1px solid var(--color-primary-hover);
  color: var(--color-primary-hover);
}

.btn.btn-previus:hover {
  color: var(--color-white) !important;
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle {
  color: var(--color-white);
  background-color: var(--color-primary-darkest);
  border-color: var(--color-primary-darkest);
}

.btn{
  box-shadow: none !important;
  border-radius: 0.5rem;
}

/*Botón iconos*/
.btn-icon {
  border-radius: 0.5rem !important;
  border: 0;
}

/*
.btn-primary {

  font-size: 18px;
  color: var(--color-error);
  text-align: center;
  display: inline-block;
  width: 100%;
  max-width: 220px;
  text-decoration: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-error);
  padding: 10px 20px !important;
  margin: 10px 0;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-sizing: border-box;
}

.btn-primary:hover {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-white);
}
*/
.navbar-blue .btn-outline-primary-navbar, .navbar-white .btn-outline-primary-navbar, .navbar-blue-hover .btn-outline-primary-navbar {
  border-color: var(--color-white) !important;
  color: var(--color-white) !important;
}
.navbar-blue .btn-outline-primary-navbar:hover{
  background-color: var(--color-white) !important;
  color: var(--color-primary-navbar) !important;
}
.navbar-white .btn-outline-primary-navbar:hover{
  background-color: var(--color-white) !important;
  color: var(--color-primary-light) !important;
}
.navbar-blue-hover .btn-outline-primary-navbar:hover{
  background-color: var(--color-white) !important;
  color: var(--color-primary-hover) !important;
}

.btn-outline-primary-navbar {
  font-family: var(--font-heading);
  color: var(--color-primary);
  border-radius: 20px !important;
  border: 2px solid var(--color-primary);
  font-size: 16px;
  font-weight: 400;
}
.btn-outline-primary-navbar:hover {
background-color: var(--color-gray-500);
color: var(--color-black);
border: none;
}
.btn-outline-primary {
  color: var(--color-gray-600);
  border-color: #ced4da;
  /*height: 50px;*/
  /*padding-top: 11px;*/
}

.btn-outline-primary:hover {
  color: var(--color-primary-accent);
  background-color: var(--color-white);
  border-color: var(--color-primary-accent);
}

.btn-check:active+.btn-outline-primary, .btn-check:checked+.btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
  color: var(--color-white);
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/*BREADCRUMB*/
.progressbar {
  counter-reset: step;
  margin-bottom: 5%;
}

.progressbar li {
  list-style-type: none;
  width: 25%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  color: #999;
}

.progressbar li:before {
  width: 11px;
  height: 11px;
  content: "";
  line-height: 30px;
  display: block;
  text-align: center;
  margin: 10px auto 10px auto;
  border-radius: 50%;
  background-color: #f5f5f5;
}

.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #f5f5f5;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.active {
  color: var(--color-primary-pure);
}

.progressbar li.complete {
  color: var(--color-primary-pure);
}

.progressbar li.complete:before {
  background-color: var(--color-primary-pure);
}

.progressbar li.active:before {
  background-color: var(--color-primary-pure);
}

.progressbar li.complete+li:after {
  background-color: var(--color-primary-pure);
}


/*INPUT*/
.form-control {
  /*height: 48px;
  padding: 12px;
  border: 1px solid var(--color-gray-500);
  border-radius: 13px;*/

  /*height: 50px;*/
  background-color: #f8fafc;
}

.form-select {
  /*height: 48px;
  padding: 12px;
  border: 1px solid var(--color-gray-500);
  border-radius: 13px;*/
  height: auto;
}

.form-select:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
  box-shadow: none;
}


/*********TEXTOS***************/

h3.seltipopago {
  font-size: 20px;
  font-weight: 700;
  color: #0039cb;
}

.label {
  font-size: 1.15rem;
  margin-bottom: 5px;
  font-weight: bold;
}

.title-heading {
  font-size: 2rem;
}

.title-heading.lighter {
  font-weight: lighter;
}

.sub-title-heading {
  font-size: 1.5rem;
  font-weight: bold;
}

.sub-title-heading.lighter {
  font-weight: lighter;
}

.title-light-blue {
  font-size: 4rem;
  line-height: 1.2;
  font-weight: 400;
}

.title-blue {
  color: var(--color-primary-accent);
  font-size: 3.7rem;
  line-height: 1.2;
  font-weight: 400;
}

.title-white {
  color: white;
  font-size: 2rem;
  font-weight: 400;
}

.title-white-bigger {
  color: white;
  font-size: 3.2rem;
  line-height: 1.2;
  font-weight: 300;
}

.title-dark-blue {
  color: var(--color-primary-darkest);
  font-size: 3.2rem;
  line-height: 1.2;
  font-weight: 300;
}

.text-white {
  font-size: 1.7rem;
}

.text-section-big {
  font-size: 1.5rem;
  line-height: 1.7;
  font-weight: 300;
}

.big-comment-black {
  color: var(--color-primary-darkest);
  font-size: 1.9rem;
  font-weight: 500;
  margin-top: -12px;
}

.a-black-no-line {
  color: var(--color-primary-darkest);
  font-weight: 500;
}

.title-assistance {
  color: var(--color-primary-light);
  font-size: 3.7rem;
  line-height: 1.2;
  font-weight: 400;
}

.text-assistance {
  font-size: 1.3rem;
  font-weight: normal;
  color: var(--color-white);
}



/*********PADDING PERSONALIZADO***************/
.p-top-10 {
  padding-top: 10px;
}

.p-top-40 {
  padding-top: 40px;
}

/*********PROGRESS BAR***************/
.progress.iclick {
  height: 0.4rem;
  border-radius: 0;
  transition: all 0.3s ease 0s;

}

.progress-bar.iclick {
  /*background-color: var(--color-primary-accent);*/
  transition: all 0.3s ease 0s;

  /*background: rgb(2,0,36);
  background: -moz-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(54,120,255,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(54,120,255,1) 100%);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(54,120,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="var(--color-primary-accent)",GradientType=1);*/

background: rgb(1,38,84);
background: -moz-linear-gradient(90deg, rgba(1,38,84,1) 0%, rgba(9,45,121,1) 35%, rgba(54,120,255,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(1,38,84,1) 0%, rgba(9,45,121,1) 35%, rgba(54,120,255,1) 100%);
background: linear-gradient(90deg, rgba(1,38,84,1) 0%, rgba(9,45,121,1) 35%, rgba(54,120,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#012654",endColorstr="var(--color-primary-accent)",GradientType=1);
}

/*********QUOTE***************/
.card-quote-top {
  /*background-color: slategray;*/
  color: white;
  font-size: 1.5rem;
  padding: 10px;
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -20px;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  background-color: var(--color-primary-hover);
}

/*Titulo en barra de color*/
.title-blue-box {
  background-color: var(--color-primary-accent);
  font-size: 1.5rem;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
}

.price-quote {
  /*font-size: 3rem;
  font-weight: 500;
  padding-top: 20px;*/

  font-size: 2.8rem;
  text-align: center;
  font-weight: bold;
}

.payment-frecuency-quote {
  /*font-size: 15px;
  margin-top: -12px;
  margin-bottom: 10px;*/

  text-align: center;
  margin-top: -5px;
  font-size: 17px;
  margin-bottom: 10px;
}

.col-price-quote {
  background-color: var(--color-primary-accent);
  height: 100%;
  color: white;
}

.price-quote-annual {
  /*font-size: 17px;
  font-weight: 500;*/

  font-size: 2.2rem;
  text-align: center;
  font-weight: bold;
}

.price-or {
  font-weight: bold;
  font-size: 15px;
  color: var(--color-primary-accent);
  margin-top: -10px;
  margin-bottom: -20px;
  text-align: center;
}

.divisor-padding {
  height: 1px;
  background-color: #e2e2e2;
  margin-bottom: 20px;
}

p.between-lines {
  display: inline-block;
  position: relative;
}

p.between-lines::after, p.between-lines::before{
  content: '';
  position: absolute;
  width: 120px;
  height: 1px;
  background-color: #e2e2e2;
  
  /* border-top: 1px solid white; */
  /* border-bottom: 1px solid #ededed; */
  top: 0.6em;
}

p.between-lines::before{
  left: -134px;
}

p.between-lines::after{
  right: -134px;
}




/*********PAYMENT***************/
.payment-details {
  font-size: 1.5rem;
  font-weight: bold;
  /*background-color: var(--color-primary-accent);*/
  padding-left: 10px;
  padding-right: 10px;
  color: white;

  /*background-color: slategray;*/
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  padding: 7px;
  font-size: 1.3rem;
  font-weight: 400;
  background-color: var(--color-primary-hover);
}

.car-payment-details {
  /*border: 1px solid var(--color-primary-accent);
  padding: 15px;
  min-height: 210px;*/

  margin-bottom: 30px;
  /*background-color: var(--color-gray-50);*/
  padding: 20px;
  border-radius: 0.5rem;
  transition: 0.5s;
  min-height: 220px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  /*border: 2px solid var(--color-gray-100);*/
}

.car-payment {
  /*border: 1px solid var(--color-primary-accent);
  padding: 15px;
  min-height: 210px;*/

  margin-bottom: 30px;
  /*background-color: var(--color-gray-50);*/
  padding: 20px;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  /*border: 2px solid var(--color-gray-100);*/
  transition: 0.5s;
}

div#card-element {
  background-color: #ebebeb;
  border: 1px solid;
  border-color: #d3d3d3 !important;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 50px;
  margin-top: 15px;
  width: 100%;
  text-align: left;
}
/* Stripe's single-line Card Element needs ~300px to keep number, expiry,
   CVC and ZIP apart. On phones drop the panel's side padding so it gets
   the full card width. */
@media (max-width: 575.98px) {
  .car-payment { padding-left: 4px; padding-right: 4px; }
  div#card-element { padding: 10px 8px; }
}

.card-blue {
  /*background-color: var(--color-primary-hover); */
  color: white;
  padding: 20px;
  border-radius: 0.5rem;
  /* background-color: #64656a; */
  border: 2px solid var(--color-gray-100);
  color: var(--color-primary-hover);
  background-color: var(--color-gray-50);
}

i.bi.bi-shield-lock-fill.candado-iclick {
  font-size: 4.75rem;
}

.img-top-question.payment-secure {
  width: 150px;
}

.top-border-question.payment-secure {
  margin-top: -100px;
}


/*********SALE CONFIRMATION***************/

.sale-confirmation-icon {
  width: 260px;
  max-width: 100%;
  height: auto;
}
@media (max-width: 991.98px) {
  /* The fixed navbar is taller on mobile (two rows) than the 100px top
     offset the quote flow reserves, so push this page's content down. */
  #Pag6 { padding-top: 40px; }
  .sale-confirmation-icon { width: 170px; }
  #Pag6 .title-heading { font-size: 1.6rem; }
}

i.bi.bi-check-circle.check-sale-confirmation {
  font-size: 10rem;
  color: var(--color-primary-accent);
}


/*********SERVICIOS***************/


/*------Plumbing-----*/

.bg-Plumbing {
  background-color: var(--color-primary-darkest);
}

/*small (mobile)*/
@media (min-width: 100px) {
.bg-Plumbing {
  background-image: url("../img/service-plumber2.jpg");
  background-repeat: no-repeat;
  background-position-x: right;
  background-size: contain;
  /* background-size: auto; */
  background-blend-mode: normal;
  background-attachment: fixed;
}
}

/*small (mobile)*/
@media (min-width: 400px) {
  .bg-Plumbing {
    background-image: url("../img/service-plumber2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
    /* background-size: auto; */
    background-blend-mode: normal;
    background-attachment: fixed;
  }
}

/*small devices (mobile)*/
@media (min-width: 600px) {
  .bg-Plumbing {
    background-image: url("../img/service-plumber2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
    /* background-size: auto; */
    background-blend-mode: normal;
    background-attachment: fixed;
  }
}

/*----IPAD----*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .bg-Plumbing {
    background-image: url("../img/service-plumber2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
    /* background-size: auto; */
    background-attachment: fixed;
  }
}

@media (min-width: 800px) {
  .bg-Plumbing {
    background-image: url("../img/service-plumber2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
    /* background-size: auto; */
    background-attachment: fixed;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .bg-Plumbing {
    background-image: url("../img/service-plumber2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
    /* background-size: auto; */
    background-blend-mode: normal;
    background-attachment: fixed;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .bg-Plumbing {
    background-image: url("../img/service-plumber2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
    /* background-size: auto; */
    background-blend-mode: normal;
    background-attachment: fixed;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1300px and up)*/
@media (min-width: 1300px) {
  .bg-Plumbing {
    background-image: url("../img/service-plumber2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
    /* background-size: auto; */
    background-blend-mode: normal;
    background-attachment: fixed;
  }
}





/*------Electrical-----*/

.bg-Electrical {
  background-color: var(--color-primary-darkest);
}

/*small (mobile)*/
@media (min-width: 100px) {
  .bg-Electrical {
    background-image: url("../img/service-electric2.jpg");
    background-repeat: no-repeat;
    background-position-x: left;
    background-size: contain;
    /* background-size: auto; */
    background-blend-mode: normal;
    background-attachment: fixed;
  }
  }
  
  /*small (mobile)*/
  @media (min-width: 400px) {
    .bg-Electrical {
      background-image: url("../img/service-electric2.jpg");
      background-repeat: no-repeat;
      background-position-x: left;
      background-size: contain;
      /* background-size: auto; */
      background-blend-mode: normal;
      background-attachment: fixed;
    }
  }
  
  /*small devices (mobile)*/
  @media (min-width: 600px) {
    .bg-Electrical {
      background-image: url("../img/service-electric2.jpg");
      background-repeat: no-repeat;
      background-position-x: left;
      background-size: contain;
      /* background-size: auto; */
      background-blend-mode: normal;
      background-attachment: fixed;
    }
  }
  
  /*----IPAD----*/
  /*Medium devices (tablets, 768px and up)*/
  @media (min-width: 768px) {
    .bg-Electrical {
      background-image: url("../img/service-electric2.jpg");
      background-repeat: no-repeat;
      background-position-x: left;
      background-size: contain;
      /* background-size: auto; */
      background-attachment: fixed;
    }
  }
  
  @media (min-width: 800px) {
    .bg-Electrical {
      background-image: url("../img/service-electric2.jpg");
      background-repeat: no-repeat;
      background-position-x: left;
      background-size: contain;
      /* background-size: auto; */
      background-attachment: fixed;
    }
  }
  
  /*----IPAD PRO----*/
  /*Large devices (desktops, 992px and up)*/
  @media (min-width: 992px) {
    .bg-Electrical {
      background-image: url("../img/service-electric2.jpg");
      background-repeat: no-repeat;
      background-position-x: left;
      background-size: contain;
      /* background-size: auto; */
      background-blend-mode: normal;
      background-attachment: fixed;
    }
  }
  
  /*----IPAD PRO----*/
  /*Large devices (desktops, 1200px and up)*/
  @media (min-width: 1200px) {
    .bg-Electrical {
      background-image: url("../img/service-electric2.jpg");
      background-repeat: no-repeat;
      background-position-x: left;
      background-size: contain;
      /* background-size: auto; */
      background-blend-mode: normal;
      background-attachment: fixed;
    }
  }
  
  /*----IPAD PRO----*/
  /*Large devices (desktops, 1300px and up)*/
  @media (min-width: 1300px) {
    .bg-Electrical {
      background-image: url("../img/service-electric2.jpg");
      background-repeat: no-repeat;
      background-position-x: left;
      background-size: contain;
      /* background-size: auto; */
      background-blend-mode: normal;
      background-attachment: fixed;
    }
  }




  /*------Locksmith-----*/

  .bg-Locksmith {
    background-color: var(--color-primary-darkest);
  }

/*small (mobile)*/
@media (min-width: 100px) {
  .bg-Locksmith {
    background-image: url("../img/service-locksrepairman2.jpg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
    /* background-size: auto; */
    background-blend-mode: normal;
    background-attachment: fixed;
  }
  }
  
  /*small (mobile)*/
  @media (min-width: 400px) {
    .bg-Locksmith {
      background-image: url("../img/service-locksrepairman2.jpg");
      background-repeat: no-repeat;
      background-position-x: right;
      background-size: contain;
      /* background-size: auto; */
      background-blend-mode: normal;
      background-attachment: fixed;
    }
  }
  
  /*small devices (mobile)*/
  @media (min-width: 600px) {
    .bg-Locksmith {
      background-image: url("../img/service-locksrepairman2.jpg");
      background-repeat: no-repeat;
      background-position-x: right;
      background-size: contain;
      /* background-size: auto; */
      background-blend-mode: normal;
      background-attachment: fixed;
    }
  }
  
  /*----IPAD----*/
  /*Medium devices (tablets, 768px and up)*/
  @media (min-width: 768px) {
    .bg-Locksmith {
      background-image: url("../img/service-locksrepairman2.jpg");
      background-repeat: no-repeat;
      background-position-x: right;
      background-size: contain;
      /* background-size: auto; */
      background-attachment: fixed;
    }
  }
  
  @media (min-width: 800px) {
    .bg-Locksmith {
      background-image: url("../img/service-locksrepairman2.jpg");
      background-repeat: no-repeat;
      background-position-x: right;
      background-size: contain;
      /* background-size: auto; */
      background-attachment: fixed;
    }
  }
  
  /*----IPAD PRO----*/
  /*Large devices (desktops, 992px and up)*/
  @media (min-width: 992px) {
    .bg-Locksmith {
      background-image: url("../img/service-locksrepairman2.jpg");
      background-repeat: no-repeat;
      background-position-x: right;
      background-size: contain;
      /* background-size: auto; */
      background-blend-mode: normal;
      background-attachment: fixed;
    }
  }
  
  /*----IPAD PRO----*/
  /*Large devices (desktops, 1200px and up)*/
  @media (min-width: 1200px) {
    .bg-Locksmith {
      background-image: url("../img/service-locksrepairman2.jpg");
      background-repeat: no-repeat;
      background-position-x: right;
      background-size: contain;
      /* background-size: auto; */
      background-blend-mode: normal;
      background-attachment: fixed;
    }
  }
  
  /*----IPAD PRO----*/
  /*Large devices (desktops, 1300px and up)*/
  @media (min-width: 1300px) {
    .bg-Locksmith {
      background-image: url("../img/service-locksrepairman2.jpg");
      background-repeat: no-repeat;
      background-position-x: right;
      background-size: contain;
      /* background-size: auto; */
      background-blend-mode: normal;
      background-attachment: fixed;
    }
  }






  /*------Glazier-----*/

  .bg-Glazier {
    background-color: var(--color-primary-darkest);
  }

/*small (mobile)*/
@media (min-width: 100px) {
  .bg-Glazier {
    background-image: url("../img/service-vidrio2.jpg");
    background-repeat: no-repeat;
    background-position-x: left;
    background-size: contain;
    /* background-size: auto; */
    background-blend-mode: normal;
    background-attachment: fixed;
  }
  }
  
  /*small (mobile)*/
  @media (min-width: 400px) {
    .bg-Glazier {
      background-image: url("../img/service-vidrio2.jpg");
      background-repeat: no-repeat;
      background-position-x: left;
      background-size: contain;
      /* background-size: auto; */
      background-blend-mode: normal;
      background-attachment: fixed;
    }
  }
  
  /*small devices (mobile)*/
  @media (min-width: 600px) {
    .bg-Glazier {
      background-image: url("../img/service-vidrio2.jpg");
      background-repeat: no-repeat;
      background-position-x: left;
      background-size: contain;
      /* background-size: auto; */
      background-blend-mode: normal;
      background-attachment: fixed;
    }
  }
  
  /*----IPAD----*/
  /*Medium devices (tablets, 768px and up)*/
  @media (min-width: 768px) {
    .bg-Glazier {
      background-image: url("../img/service-vidrio2.jpg");
      background-repeat: no-repeat;
      background-position-x: left;
      background-size: contain;
      /* background-size: auto; */
      background-attachment: fixed;
    }
  }
  
  @media (min-width: 800px) {
    .bg-Glazier {
      background-image: url("../img/service-vidrio2.jpg");
      background-repeat: no-repeat;
      background-position-x: left;
      background-size: contain;
      /* background-size: auto; */
      background-attachment: fixed;
    }
  }
  
  /*----IPAD PRO----*/
  /*Large devices (desktops, 992px and up)*/
  @media (min-width: 992px) {
    .bg-Glazier {
      background-image: url("../img/service-vidrio2.jpg");
      background-repeat: no-repeat;
      background-position-x: left;
      background-size: contain;
      /* background-size: auto; */
      background-blend-mode: normal;
      background-attachment: fixed;
    }
  }
  
  /*----IPAD PRO----*/
  /*Large devices (desktops, 1200px and up)*/
  @media (min-width: 1200px) {
    .bg-Glazier {
      background-image: url("../img/service-vidrio2.jpg");
      background-repeat: no-repeat;
      background-position-x: left;
      background-size: contain;
      /* background-size: auto; */
      background-blend-mode: normal;
      background-attachment: fixed;
    }
  }
  
  /*----IPAD PRO----*/
  /*Large devices (desktops, 1300px and up)*/
  @media (min-width: 1300px) {
    .bg-Glazier {
      background-image: url("../img/service-vidrio2.jpg");
      background-repeat: no-repeat;
      background-position-x: left;
      background-size: contain;
      /* background-size: auto; */
      background-blend-mode: normal;
      background-attachment: fixed;
    }
  }


/*********ELEMENTOS***************/
/**SWITCH**/
/*
.form-switch .form-check-input {
  width: 2em !important;
  margin-left: -2.5em !important;
  background-position: left center !important;
  border-radius: 2em !important;
  transition: background-position .15s ease-in-out !important;
}
*/

/***Card Coberturas******/
.card-cover {
  background-color: var(--color-white);
  border-radius: 5px;
  padding: 20px;
  min-height: 17rem;
  margin-top: 30px;
  -webkit-box-shadow: 4px 4px 4px -1px rgb(0 0 0 / 15%);
  -moz-box-shadow: 4px 4px 4px -1px rgba(0,0,0,0.15);
  box-shadow: 4px 4px 4px -1px rgb(0 0 0 / 15%);
}

.card-cover.mobile {
  min-height: 40rem;
}

.card-cover-title {
  color: #7d97ff;
  font-weight: 400;
  font-size: 1.7rem;
  margin-top: 35px;
}

.card-cover-info {
  font-size: 1.1rem;
  font-weight: 300;
  text-align: justify;
  margin-top: 1rem;
  color: var(--color-primary-darkest);
}

/***Lista de servicios******/
li.assistance {
  font-size: 1.3rem;
  font-weight: normal;
  color: var(--color-white);
  line-height: 2;
}

ul.assistance {
  margin-left: -15px;
  margin-top: 1rem;
}


/***Card news stories******/
.card.card-news.big {
  min-height: 373px;
  margin-bottom: 0px;
}

.card.card-news {
  /*margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  height: 373px;
  -webkit-box-shadow: 0px 0px 7px 0px rgb(0 0 0 / 10%) !important;
  box-shadow: 0px 0px 7px 0px rgb(0 0 0 / 10%) !important;*/

  border: 3px solid var(--color-gray-300);
  border-radius: 5px;
  background-color: white;
  width: 280px;
  margin-right: 10px;
  margin-left: 10px;
  transition: 0.5s;
  margin-bottom: 20px;
  height: 373px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.card-title.card-news {
  color: var(--color-primary-darkest);
  font-weight: bold;
  font-size: 1.3rem;
  height: 70%;
  margin-right: 0px;
  margin-left: 0px;
}

.resumen-card-news.big {
  height: 195px;

}

.fecha-card-news {
  font-size: 10px;
  padding-top: 9px;
}

a.card-link.card-news {
  background-color: var(--color-success-light) !important;
  font-size: 12px;
  text-decoration: none;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 30px !important;
  color: var(--color-primary-dark) !important;
  font-weight: bold !important;
  -webkit-box-shadow: 0px 0px 7px 0px rgb(0 0 0 / 10%) !important;
  box-shadow: 0px 0px 7px 0px rgb(0 0 0 / 10%) !important;
}





/*small (mobile)*/
@media (min-width: 100px) {
  .margin-top-content {
    margin-top: 55px;
  }
}

/*small (mobile)*/
@media (min-width: 400px) {
  .margin-top-content {
    margin-top: 55px;
  }
}

/*small devices (mobile)*/
@media (min-width: 600px) {
  .margin-top-content {
    margin-top: 55px;
  }
}

/*----IPAD----*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .margin-top-content {
    margin-top: 55px;
  }
}

@media (min-width: 800px) {
  .margin-top-content {
    margin-top: 55px;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .margin-top-content {
    margin-top: 102px;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .margin-top-content {
    margin-top: 102px;
  }
}

/*----IPAD PRO----*/
/*Large devices (desktops, 1300px and up)*/
@media (min-width: 1300px) {
  .margin-top-content {
    margin-top: 102px;
  }
}


/***Container sin padding******/
.container-no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/***Card Blog******/
.card-blog {
  background-color: white;
  border-radius: 5px;
  padding: 20px;
  border-top: 7px solid #7d97ff;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  height: fit-content;
  margin-bottom: 2rem;
}

.card-blog::after{
  content: "";
  position: absolute;
  /* top: 4.5em; */
  /* right: 2.5em; */
  width: 2em;
  height: 2em;
  background-color: var(--color-white);
  transform: rotate(45deg);
}

.blog-comment {
  font-size: 1rem;
  line-height: 2;
}

.blog-customer {
  margin-top: 20px;
  font-weight: 500;
}

img.btn-blog {
  width: 50px;
  cursor: pointer;
  margin-left: 10px;
  margin-right: 10px;
}

img#next-blog {
  transform: rotate(180deg);
  margin-top: -1px;
}

/***Card News******/
.card-news {
  border: 3px solid var(--color-gray-300);
  border-radius: 5px;

  background-color: white;
  width: 280px;
  margin-right: 10px;
  margin-left: 10px;
  transition: 0.5s;
  margin-bottom: 20px;
  /* height: 26rem; */
  height: auto;
  min-height: 28rem;
}

.news-hashtag {
  background-color: var(--color-primary-accent);
  width: fit-content;
  padding: 10px;
  color: white;
  margin-left: 20px;
  margin-top: -25px;
  position: relative;
  font-weight: 400;
  font-size: 12px;
}

.news-comment {
  padding: 18px;
  padding-top: 5px;
}

.news-title {
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  color: var(--color-primary-darkest);
  font-weight: bold;
}

a.news-link {
  color: var(--color-primary-darkest);
  font-weight: 500;
  cursor: pointer;
}

/***Box Section 2******/
.box-totally-digital {
  border: 3px solid var(--color-gray-300);
  border-radius: 5px;
  padding: 20px;
  font-size: 1.1rem;
  font-weight: 400;
  margin-top: 25px;
}

.text-box-totally {
  padding-top: 18px;
  margin-left: 0px;
}

img.img-box-totally {
  -webkit-box-shadow: 0px 6px 10px 1px rgb(0, 0, 0, 0.33);
  -moz-box-shadow: 0px 6px 10px 1px rgb(0, 0, 0, 0.33);
  box-shadow: 0px 6px 10px 1px rgb(0, 0, 0, 0.33);
}

.box-totally-digital.left {
  margin-right: 2em;
}

.box-totally-digital.right {
  margin-left: 2em;
}

/*********CARDS***************/
p.card-text {
  font-size: 1.2rem;
  /*text-align: justify;*/
  text-align: left;
}

.card-title {
  font-size: 1.5rem !important;
  font-weight: 500;
}

.icon-card-transparent {
  margin-bottom: 15px;
}


/*Validación de campo requerido*/
.input-validation {
  color: red;
  font-weight: 300;
  transition: 0.5s;
}

/*Popover*/
button.btn.btn-help.redondo {
  border-radius: 50%;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 10px;
}

.btn.btn-help {
  /*border-color: var(--color-primary-accent);*/
  padding: 5px 45px 7px 45px;
  color: var(--color-white);
  /* width: 40%; */
  border-radius: 2em;
  background: #b9b9b9;
  outline: 0;
  max-width: 200px;
  font-size: 20px;
  border: none;
}


/*Icono en botones*/
.icon-boton {
  font-size: 3rem;
}

/*Formulario con borde*/
.border-question {
  border-radius: 0.5rem;
  border: 2px solid var(--color-gray-100);
  padding: 20px;
  margin-top: 50px;
}

.top-border-question{
  margin-top: -57px;
}

.img-top-question{
  width: 70px;
}

/*Questions/preguntas*/
.formulario {
  margin-top: 10px;
  margin-bottom: 10px;
}

.question {
  margin-top: 10px;
  margin-bottom: 10px;
}

/*Recuperación de contraseña*/
a.LinkRecuperar {
  color: #0039cb;
  text-decoration: none;
  font-weight: 400;
}

.RecuperarClavePrequote {
  font-size: 18px;
  font-weight: 100;
}

/*Pagos*/
.card-offline-Payment {
  background-color: white !important;
  font-size: 14px;
  color: #4a4a4a;
  border-left: solid #50e3c2 10px;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  height: 130px;
  box-shadow: 0 3px 7px 0 rgb(99 100 103 / 31%);
  cursor: pointer;
}

.card-online-Payment {
  background-color: white !important;
  font-size: 14px;
  color: #4a4a4a;
  border-left: solid #093bc8 10px;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  height: 130px;
  box-shadow: 0 3px 7px 0 rgb(99 100 103 / 31%);
  cursor: pointer;
}

/*Link*/
a.link-modal {
  color: blue;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

/*Planes/plan/covertypes/cards*/
.card-plan {
  background: white;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 15px;
  text-align: center;
  padding-top: 0;
  border: 1px solid rgba(204, 204, 204, 0.6);
}

.title_plan {
  font-weight: 600;
  font-size: 19px;
  text-align: center;
  color: white;
  background: blue;
  padding: 8px;
  margin-top: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  margin-left: -3px;
  margin-right: -3px;
}

.title_uf {
  font-weight: bold;
  font-size: 20px;
  line-height: 18px;
  text-align: center;
  color: #636467;
  padding-top: 5px;
}

.signo {
  color: black;
  font-size: 45px;
  font-weight: 600;
}

.color-g {
  color: #333333;
}

.ml-20 {
  margin-left: 20px;
}

.m-25 {
  margin-top: 30px;
}

.list-be {
  font-size: 15px;
  margin-top: 0;
  margin-bottom: 10px;
  color: #636467;
  font-weight: 500;
  line-height: 25px;
}

/*Modal*/
.titl-pop {
  color: var(--color-primary-pure);
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.color_n {
  color: black !important;
}

.tleft {
  text-align: left;
}

.color_n {
  color: black !important;
}

.montoMax {
  font-weight: 800;
  margin-bottom: 15px;
}


.b-bottomp {
  border-bottom: 1px solid #ececec;
}

.p15 {
  padding-left: 15px;
  padding-right: 15px;
}

.item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  height: initial;
  padding: 4px 0;
}

/*CARD Pagos*/
.box-cobertura {
  margin-bottom: 20px;
}

.plan-img img {
  border-radius: 16px 16px 0 0;
}

.plan-bajada {
  color: white;
  padding: 20px 20px 25px;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  background-color: var(--color-primary-pure);
  margin-top: -21px;
}

.plan-detalle {
  background-color: white;
  border-radius: 16px;
  padding: 0px 15px 15px 15px;
  border: 1px solid var(--color-primary-pure);
  margin-top: -16px;
}

.plan-precio {
  font-weight: 600;
  font-size: 25px;
  color: var(--color-primary-pure);
}

/*QUOTE DISPLAY*/
.box-shadow-resumen {
  color: black;
  padding-right: 15%;
  padding-left: 15%;
  padding-top: 30px;
  padding-bottom: 90px;
  box-shadow: 0px 10px 30px 0px rgb(204 204 204 / 60%);
  border: 1px solid rgba(204, 204, 204, 0.5);
}

.blue {
  color: var(--color-primary-pure);
  font-weight: 600;
  font-size: 18px;
}

/*SALE CONFIRMATION*/
.back {
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)), url(../img/banner-dp.jpg); */
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  /*background-image: url(../img/banner-dp.jpg);*/
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px;
  background-position: 50% 25%;
}

.text-exito {
  padding: 40px 30px;
  font-size: 16px;
  line-height: 30px;
  font-weight: 400;
}

.color-g {
  color: #333333;
}

/*FOOTER*/
footer.footer-entel {
  background-color: var(--color-primary-darkest);
  color: var(--color-white);
  bottom: 0;
  padding: 25px 0 130px 0;
}

footer.footer-entel .box-iconos-footer .box-rrss-iconos .iconos-rrss {
  width: auto;
  height: 20px;
}

img {
  vertical-align: middle;
  border-style: none;
}

a {
  text-decoration: none;
  background-color: transparent;
}

.copyright-blue {
  color: var(--color-primary-darkest);
  background-color: #dde1e6;
  font-size: 12px;
  border-top: 1px solid;
  margin-top: 3rem;
}

footer.bg-dark-blue {
 padding: 4rem 8rem 0;
}
.footer-description {
color: var(--color-black);
font-family: var(--font-body);
font-size: 11px;
font-style: normal;
line-height: 200%;
}
.footer-logo-tagline{
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-primary-darkest);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
}
.footer-logo-tagline img {
  width: 10rem;
}
.footer-title {
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 118%; /* 28.32px */
}
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav li,
.footer-nav a {
  color: inherit;
  font-family: inherit;
  text-decoration: none;
}
.footer-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer-nav a:focus-visible {
  outline: 2px solid var(--color-primary-darkest);
  outline-offset: 2px;
  border-radius: 4px;
}
.footer-contact-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.footer-contact-info {
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 118%;
  text-align: center;
}
.footer-contact-info a,
.footer-contact-info span {
  font-family: inherit;
  white-space: nowrap;
}
.footer-contact-info a {
  color: inherit;
  text-decoration: none;
}
.footer-contact a:focus-visible {
  outline: 2px solid var(--color-primary-darkest);
  outline-offset: 2px;
  border-radius: 8px;
}
.footer-description p {
  margin-bottom: 0;
}
/* Tablet and up: icons and values share one left edge, 24px from the labels.
   Hours may wrap after the days on tablets so they stay inside the footer. */
@media (min-width: 768px) {
  .footer-contact-icons {
    justify-content: flex-start;
    gap: 24px;
  }
  .footer-contact-info {
    text-align: left;
    font-size: 14px;
  }
  .footer-contact {
    row-gap: 8px;
  }
  /* Labels stay on one line; longer ones extend left into the free space */
  .footer-contact > .d-flex {
    white-space: nowrap;
  }
  /* 24px from the column above + 24px here = 48px between footer sections */
  .footer-description {
    padding-top: 24px;
  }
  /* Icons share one height that fits inside the text line; the padding gives
     each link a 44px click target without changing the layout */
  .icono-redes-footer {
    height: 24px;
    width: auto;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .footer-contact-icons a {
    display: inline-flex;
    padding: 10px;
    margin: -10px;
    border-radius: 8px;
  }
  .footer-contact-icons a:hover > .icono-redes-footer {
    opacity: 0.7;
    transform: translateY(-1px);
  }
  .footer-contact a:focus-visible {
    outline-offset: 0;
  }
}
/* Desktop: labels | values grid pushed to the right margin (mirroring the logo
   on the left), 24px between columns. Each row is exactly one .footer-title
   line tall, so Contact us / Phone / Hours sit on the nav links' lines. */
@media (min-width: 992px) {
  .footer-contact {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    column-gap: 24px;
    row-gap: 0;
    margin: 0;
  }
  .footer-contact > div {
    width: auto;
    padding: 0;
    height: 1lh;
    display: flex;
    align-items: center;
  }
  .footer-contact-info {
    font-size: 18px;
    white-space: nowrap;
  }
  /* Keep the three nav links on three lines so they pair with the contact rows */
  .footer-nav {
    white-space: nowrap;
  }
  /* 36px rows (1.5 line height) leave room around the icons. The logo is sized
     so the first line's cap height starts at the logo's top and the last
     line's baseline sits on the "powered by" baseline:
     2 x 36px rows + 16px cap height = 71px logo + 8px gap + 9px to baseline */
  .footer-nav,
  .footer-contact {
    line-height: 36px;
  }
  .footer-logo-tagline {
    margin-top: 10px;
  }
  .footer-logo-tagline img {
    align-self: flex-start;
    width: auto;
    height: 71px;
  }
}
/*******************QUOTE DISPLAY***********************/
.recomendado-card-price-iclick {
  text-align: center;
  font-size: 1.3rem;
  background-color: var(--color-primary-accent);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;

  margin-left: -20px;
  margin-right: -20px;
  margin-top: -20px;
  /*color: white;*/
  color: #000741;
  padding: 7px;

  /*background-color: var(--color-primary-darkest);*/
  /*background-color: slategray;*/
 /*background-color: palevioletred;
  background-color: lightpink;*/
  background-color: #c7d3ec;
}

.title-card-price-iclick {
  font-size: 1.5rem;
  /*color: var(--color-primary-accent);*/
  text-align: center;
}

.form-select.deducible {
 padding: 0 22px 0 5px;
    border: 1px solid var(--color-primary-accent) !important;
    text-align: left;
    font-weight: bold;
    /* width: fit-content; */
    background-color: var(--color-gray-50) !important;
    /* border-radius: 20px !important; */
    width: 111px;
}

.deducible-card-price-iclick {
  font-size: 17px;
  padding-top: 17px;
  text-align: right;
  margin-right: -24px;
  padding-right: 0;
}

.price-card-price-iclick {
  font-size: 2.2rem;
  text-align: center;
  /*color: var(--color-primary-accent);*/
  font-weight: bold;
}

.anual-card-price-iclick {
  text-align: center;
  margin-top: -5px;
  font-size: 17px;
  margin-bottom: 10px;
}

ul.ul-card-price-iclick {
  list-style: none;
  padding-left: 3px;
  margin-top: 10px;
  line-height: 2;
  color: var(--color-black);
  font-size: 13px;
  font-weight: 500;
}

i.bi.bi-check-lg.icon-check-icbl-auto {
  color: var(--color-primary-accent);
}
/* Plan-card feature lines: the check/x icon hangs in a fixed-width gutter
   on the left, so every line's text starts at the same x and wrapped
   lines (e.g. "upon renewal") line up under the amount, not under the icon. */
ul.ul-card-price-iclick > li {
  position: relative;
  padding-left: 26px;
}
ul.ul-card-price-iclick > li > i.bi {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  text-align: center;
}
/* Quote summary (step 3) coverage list: same gutter treatment. */
ul.ul-summary-covers {
  list-style: none;
  font-size: 16px;
  padding: 15px 0 0;
  margin: 0;
}
ul.ul-summary-covers > li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 4px;
  text-align: left;
}
ul.ul-summary-covers > li > i.bi {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  text-align: center;
}
/* Lines that hold a select or switch: match the 32px height of the
   amount lines so the boxes never touch the neighbouring rows. */
ul.ul-card-price-iclick > li > .row.g-0 {
  padding: 3px 0;
  align-items: center;
}


li.dont-have {
  color: #b1b1b1;
}

.card-price-iclick {
  margin-bottom: 50px;
  background-color: var(--color-gray-50);
  padding: 20px;
  width: 20rem;
  border-radius: 0.5rem;
  border: 2px solid var(--color-gray-100);
  transition: 0.5s;
  max-height: 40rem;
  height: 100%;
  max-height: 715px;
}

.card-price-iclick:hover {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%);
  cursor: pointer;
}

.recomendado-top {
  padding: 0;
  margin: 0;
  margin-top: -65px;
  text-align: center;
}

.icon-top-card-price {
  width: 65px;
}


/*****************EFECTO MAQUINA DE ESCRIBIR*******************/
.text-typing {
  display:block;
  white-space: nowrap;
  border-right:2px solid;
  width: 18ch;
  margin: auto;
  animation: typing 2s steps(18), blink .5s infinite step-end alternate;
  overflow: hidden;
}

@keyframes typing{
  from { width: 0;}
}

@keyframes blink {
  50% { border-color:transparent }
}



/*****************SLIDER PERSONALIZADO*******************/

/*------ ADDED CSS ---------*/
.on
{
  display: none;
}

.on, .off
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  /* left: 50%; */
  font-size: 11px;
  font-weight: 600;
  font-family: Verdana, sans-serif;
  white-space: nowrap;
}
.on{
  left: 38%;
}
.off{
  left: 63%;
}

input:checked+ .slider .on
{display: block;}

input:checked + .slider .off
{display: none;}

/*--------- END --------*/
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;}



/*****************OCULTAR PANTALLAS*******************/
div#pag1 {
  display: block;
}

div#pag2 {
  display: none;
}

div#pag3 {
  display: none;
}

div#pag4 {
  display: none;
}

div#pag5-1 {
  display: none;
}

div#pag5-2 {
  display: none;
}

div#pag6 {
  display: none;
}

div#pag7 {
  display: none;
}

div#pag8 {
  display: none;
}
#Spinner > div.spinner-border {
  position: absolute;
  width: 8rem;
  height: 8rem;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  margin: auto;
  border: 0.35em solid var(--color-primary-hover);
  border-right-color: #FFF0;
}

#Spinner {
  position: fixed;
  top: 0;
  background-color: rgba(255,255,255,0.70);
  z-index: 9999;
}
/* change-password.component.css */

.container {
  margin: 20px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 58px;
  height: 28px;
  vertical-align: middle;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 35px;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: '';
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  border-radius: 35px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--color-primary-accent);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--color-primary-accent);
}

/* knob travel = switch width (58) - knob (22) - 2 x inset (3) */
input:checked + .slider:before {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}

.disclaimer{
    background-color: #c7d3ec;
    border: 1px solid #c7d3ec;
    border-radius: 4px;
    padding: 10px;
  }
.topic{
    display: list-item;
  list-style-type: auto;
  margin-left: 40px;
      margin-top: 2.4rem;

}
.confirmation-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  z-index: 100000;
  overflow-x: hidden;
  overflow-y: auto;
}

.confirmation-modal button {
  margin: 5px;
}
@keyframes headShake {
  0% {
    transform: translateX(0);
  }
  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    transform: translateX(0);
  }
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.headShake {
  animation-name: headShake;
}


/*=============================================================================
  NEW HOME PAGE STYLES (Figma Redesign)
=============================================================================*/

/* --- HERO SECTION --- */
.home-hero-section {
  padding-top: 80px;
  background-color: #E6E6E6 !important;
}

.home-hero-bg {
  background-color: #E6E6E6;
  background-image: url(../img/hero-illustration.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  min-height: 590px;
  padding: 0 8rem;
  position: relative;
  overflow: hidden;
}

.home-hero-content {
  padding: 6rem 0 4rem;
}

.home-hero-title {
  font-family: var(--font-heading);
  font-size: 48px;
  color: var(--color-black);
  line-height: 1;
  text-align: center;
  letter-spacing: 0.02em;
}

.home-hero-subtitle {
  font-family: var(--font-subhead);
  font-size: 1.25rem;
  color: var(--color-text-primary);
  line-height: 1.4;
  max-width: 520px;
  text-align: center;
  letter-spacing: 0;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
}

/* --- HERO CTA RIGHT BUTTON --- */
.home-hero-cta-right {
  position: absolute;
  right: 8rem;
  bottom: 35%;
  background: linear-gradient(135deg, #8a9ef5 0%, #7b8ff0 100%);
  color: var(--color-white);
  padding: 16px 40px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  border-radius: 30px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
  z-index: 2;
}

.home-hero-cta-right:hover {
  background: linear-gradient(135deg, #7b8ff0 0%, #6b7fe0 100%);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(120,140,240,0.35);
}

/* --- HERO CONNECTING LINES --- */
.home-hero-connecting {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

.home-hero-connecting--2 {
  left: -5%;
  bottom: -10%;
  width: 60%;
  max-width: 700px;
}

.home-hero-connecting--3 {
  right: -5%;
  top: -10%;
  width: 45%;
  max-width: 500px;
}

/* --- OUTLINE BUTTONS --- */
.home-btn-outline {
  font-family: var(--font-button);
  border: 2px solid var(--color-gray-800);
  color: var(--color-gray-800);
  background: transparent;
  padding: 14px 40px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  border-radius: 30px;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.home-btn-outline:hover {
  background: var(--color-gray-800);
  color: var(--color-white);
}

/* ==========================================================
   HOME PAGE BUTTON SYSTEM (per Figma)
   Two variants of the same pill button:
   - Variant A (blue fill on light bg):  .home-btn-filled, .home-btn-blue-filled
   - Variant B (gray fill on blue bg):   .home-btn-outline-white
   ========================================================== */

/* --- Variant A: Blue pill on light/gray background (hero, testimonials) --- */

.home-btn-primary-blue-filled {
  font-family: var(--font-button);
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 12px 32px !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  letter-spacing: 0.07em;
  border-radius: 40px !important;
  text-transform: uppercase;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  box-shadow: var(--shadow-card) !important;
}

.home-btn-primary-blue-filled:hover {
  background: var(--color-white);
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(15, 98, 254, 0.35) !important;
}
.home-btn-filled,
.home-btn-blue-filled {
  font-family: var(--font-button);
  background: var(--color-primary-light);
  color: var(--color-white);
  border: none;
  padding: 12px 32px !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  letter-spacing: 0.07em;
  border-radius: 40px !important;
  text-transform: uppercase;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  box-shadow: var(--shadow-card) !important;
}

.home-btn-filled:hover,
.home-btn-blue-filled:hover {
  background: var(--color-gray-100);
  color: var(--color-primary-light) !important;
  border: 1px solid var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(15, 98, 254, 0.35) !important;
}

/* --- Variant B: Light-gray pill with blue text on blue background (steps, digital) --- */
/* Same padding 18px 48px as Variant A to keep both button variants consistent */
.home-btn-outline-white {
  font-family: var(--font-button);
  background: var(--color-gray-100);
  color: var(--color-primary-light);
  border: none;
  padding: 12px 32px !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  letter-spacing: 0.07em;
  border-radius: 40px !important;
  text-transform: uppercase;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  box-shadow: var(--shadow-card) !important;
}

.home-btn-outline-white:hover {
  background: var(--color-primary-light);
  color: var(--color-white) !important;
  border: 1px solid var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}
.home-btn-outline-primary {
  font-family: var(--font-button);
  background: var(--color-gray-100);
  color: var(--color-primary);
  border: none;
  padding: 12px 32px !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  letter-spacing: 0.07em;
  border-radius: 40px !important;
  text-transform: uppercase;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  box-shadow: var(--shadow-card) !important;
}

.home-btn-outline-primary:hover {
  background: var(--color-primary);
  color: var(--color-white) !important;
  border: 1px solid var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

/* --- 3-STEP PROCESS SECTION --- */
.home-steps-section {
  background-color: var(--color-primary-light);
  position: relative;
  overflow: hidden;
}

.home-steps-wave-top {
  height: 40px;
  background: linear-gradient(180deg, #c3cef5 0%, transparent 100%);
}

.home-steps-inner {
  padding: 3rem 0rem 5rem;
}

.home-steps-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 400;
  color: var(--color-white);
  line-height: 1;
  letter-spacing: 0.02em;
}

.home-steps-subtitle {
  font-family: var(--font-subhead);
  font-size: 1.5rem;
  color: var(--color-white);
  font-weight: 400;
  line-height: 1.4;
}

.home-step {
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-step-icon {
  margin-bottom: 1.5rem;
}

.home-step-icon img {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.home-step-number {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--color-white);
  margin-bottom: 0.75rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.home-step-desc {
  font-family: var(--font-body);
  font-size: 1.06rem;
  color: var(--color-white);
  line-height: 1.41;
  width: 261px;
}

/* --- STEPS ILLUSTRATION --- */
.home-steps-illustration {
  position: absolute;
  left: 50%;
  top: 32%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 2400px;
  /* opacity: 0.5; */
  pointer-events: none;
  z-index: 0;
  filter: brightness(0) invert(1);
}

/* Per-step icon — phone / clock / envelope, sliced out of
   home-illustration.png and rendered above each step on mobile.
   Hidden on desktop where the single combined strip already
   spans behind all three steps. */
.home-step-illustration-mobile {
  display: none;
}
@media (max-width: 767.98px) {
  .home-steps-illustration {
    display: none;
  }
  .home-step-illustration-mobile {
    /* Break out of the col-md-4 horizontal padding + .home-steps-inner
       padding and center a 70vw strip on the viewport. The 15vw left
       on each side is where the connectors below loop the line down to
       the next step, so the path reads top-to-bottom. */
    display: block;
    position: relative;
    left: 50%;
    width: 70vw;
    max-width: none;
    margin-left: -35vw;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 16px;
    height: auto;
    /* White line-art on transparent — same filter the combined strip
       uses so the icons read as crisp white on the blue section. */
    filter: brightness(0) invert(1);
    pointer-events: none;
  }
  .home-steps-cards > [class*="col-"] {
    position: relative;
  }
  /* Connectors that carry the line from one step's strip down to the
     next, so the path reads top-to-bottom. Strip = 70vw wide, 28.17vw
     tall (194/482); its line leaves/enters the strip edges at known
     heights and angles, measured from the PNGs:
       phone  right edge: y 20.55vw, rising to the right  (slope -.22)
       clock  right edge: y 19.24vw, rising to the right  (slope -.55)
       clock  left  edge: y 20.55vw, nearly flat          (slope -.16)
       letter left  edge: y 18.95vw, rising to the right  (slope -.45)
     Each connector is three stacked background layers, drawn in units
     of 0.1vw: a fixed-ratio top curve that continues the line at its
     own angle and swings over, a stretchy middle with a soft S-drift
     (only vertical tangents, so stretching can't kink it), and a
     fixed-ratio bottom curve that swings back in at the next line's
     angle. The middle overlaps the caps by 1px to hide rounding seams.
     Stroke is .6px: the PNG line carries ~1.08px of ink at 482px wide,
     which is ~.6px once the strip is scaled to 70vw on a phone. */
  .home-steps-cards > [class*="col-"]:nth-child(1)::after,
  .home-steps-cards > [class*="col-"]:nth-child(2)::after {
    content: "";
    position: absolute;
    width: 13.5vw;
    background-repeat: no-repeat;
    background-position: 0 0, 0 100%, 0 calc(8.5vw - 1px);
    pointer-events: none;
  }
  /* phone -> clock, down the right side */
  .home-steps-cards > [class*="col-"]:nth-child(1)::after {
    left: calc(50% + 34.5vw);
    top: 17.05vw;
    height: calc(100% + 2.69vw);
    background-size: 13.5vw 8.5vw, 13.5vw 11.5vw, 13.5vw calc(100% - 20vw + 2px);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -35 135 85'%3E%3Cpath d='M0,0 C70,-15.4 120,-70 120,50' fill='none' stroke='%23fff' stroke-width='.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -110 135 115'%3E%3Cpath d='M120,-110 C120,-20 70,-38.5 0,0' fill='none' stroke='%23fff' stroke-width='.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 0 135 100' preserveAspectRatio='none'%3E%3Cpath d='M120,0 C120,25 70,38 75,58 C80,78 120,78 120,100' fill='none' stroke='%23fff' stroke-width='.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  }
  /* Lead-in / lead-out: the strip's line used to start and finish at the
     screen edges when the strip was full-bleed. Now that it's 70vw, carry
     both loose ends out to the edges, continuing their own angles:
       phone  left  edge: y 5.66vw, rising to the right (slope -.45)
       letter right edge: y  .07vw, rising to the right (slope -.44)
     The paths overshoot the tile by .5vw so they're cut flush at the edge. */
  .home-steps-cards > [class*="col-"]:nth-child(1)::before,
  .home-steps-cards > [class*="col-"]:nth-child(3)::after {
    content: "";
    position: absolute;
    width: 15.5vw;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
  }
  .home-steps-cards > [class*="col-"]:nth-child(1)::before {
    left: calc(50% - 50vw);
    top: 5.16vw;
    height: 7.5vw;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-150 -5 155 75'%3E%3Cpath d='M0,0 C-50,22.5 -100,50 -155,65' fill='none' stroke='%23fff' stroke-width='.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  }
  .home-steps-cards > [class*="col-"]:nth-child(3)::after {
    left: calc(50% + 34.5vw);
    top: -2.93vw;
    height: 3.5vw;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -30 155 35'%3E%3Cpath d='M0,0 C40,-17.6 90,-35 160,-10' fill='none' stroke='%23fff' stroke-width='.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  }
  /* clock -> envelope, down the left side */
  .home-steps-cards > [class*="col-"]:nth-child(2)::after {
    left: calc(50% - 48vw);
    top: 20.05vw;
    height: calc(100% + 1.4vw);
    background-size: 13.5vw 8.5vw, 13.5vw 11.5vw, 13.5vw calc(100% - 20vw + 2px);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-130 -5 135 85'%3E%3Cpath d='M0,0 C-60,9.6 -120,5 -120,80' fill='none' stroke='%23fff' stroke-width='.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-130 -90 135 115'%3E%3Cpath d='M-120,-90 C-120,30 -60,27 0,0' fill='none' stroke='%23fff' stroke-width='.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-130 0 135 100' preserveAspectRatio='none'%3E%3Cpath d='M-120,0 C-120,25 -70,38 -75,58 C-80,78 -120,78 -120,100' fill='none' stroke='%23fff' stroke-width='.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  }
}

.home-steps-inner {
  position: relative;
  z-index: 1;
}
.home-steps-cards{
  margin-top: 0;
}
@media (min-width: 768px) {
  .home-steps-cards{
    margin-top: 193px;
  }
}
/* --- INSURANCE CARDS SECTION --- */
.home-cards-section {
  background: var(--color-white);
  background-image: radial-gradient(circle at 20% 50%, rgba(180,190,230,0.15) 0%, transparent 50%),
                     radial-gradient(circle at 80% 30%, rgba(180,190,230,0.1) 0%, transparent 40%);
  padding: 0;
  position: relative;
  overflow: hidden;
}

.home-cards-connecting {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  /* opacity: 0.4; */
}

.home-cards-connecting--2 {
  right: -3%;
  bottom: -5%;
  width: 60%;
  max-width: 700px;
}

.home-cards-connecting--3 {
  left: -3%;
  top: -5%;
  width: 45%;
  max-width: 500px;
}

.home-cards-inner {
  padding: 5rem 8rem;
  position: relative;
  z-index: 1;
}

.home-cards-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--color-black);
  max-width: 1015px;
  margin: 0 auto;
  line-height: 1;
  letter-spacing: 0.02em;
}

.home-cards-subtitle {
  font-family: var(--font-body);
  font-size: 1.06rem;
  color: var(--color-text-primary);
  line-height: 1.41;
  max-width: 1040px;
  margin: 0 auto;
}

.home-card {
  background-color: var(--color-primary-light);
  border-radius: 20px;
  overflow: hidden;
  text-align: center;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(120,140,240,0.25);
}

.home-card-img-wrapper {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  margin: 2rem auto 0;
  border: 4px solid rgba(255,255,255,0.25);
}

.home-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-card-body {
  padding: 1.5rem 1.5rem 2rem;
}

.home-card-title {
  font-family: var(--font-heading);
  font-size: 1.06rem;
  color: var(--color-white);
  margin-bottom: 0.75rem;
}

.home-card-desc {
  font-family: var(--font-body);
  font-size: 1.06rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.41;
}

/* --- COMPLETELY DIGITAL SECTION --- */
.home-digital-section {
  overflow: hidden;
}

.home-digital-left {
  background-color: var(--color-primary-light);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  min-height: 620px;
}

.home-digital-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--color-white);
  line-height: 1;
  letter-spacing: 0.02em;
}

.home-digital-subtitle {
  /* font-family: var(--font-body); */
  font-size: 1.4rem;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  line-height: 1.41;
}

.home-digital-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.home-digital-item {
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.375rem;
  color: var(--color-white);
  line-height: 1.41;
}

.home-digital-item-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
}

.home-digital-item-icon img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.home-digital-right {
  /* Position: relative lets the image be absolutely positioned inside,
     so the image's intrinsic height does NOT stretch the row.
     The row height is driven by the left column's content. */
  position: relative;
  overflow: hidden;
}

.home-digital-image {
  /* The cropped source (Bottom-picture-1-cropped.png) is 656x492 — a
     4:3 landscape framing of the original near-square photo. That
     ratio sits in the middle of typical column aspect ratios across
     the home page's responsive widths, so `cover` fills the box
     without having to crop important content (laptop, hands, browser
     windows with house icons) at any viewport. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* --- TESTIMONIALS SECTION --- */
.home-testimonials-section {
  background: var(--color-white);
  position: relative;
  padding: 0;
  overflow: hidden;
}

.home-testimonials-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* opacity: 0.15; */
  pointer-events: none;
  z-index: 0;
}

.home-testimonials-inner {
  padding: 5rem 8rem;
  position: relative;
  z-index: 1;
}

.home-testimonials-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--color-black);
  line-height: 1;
  letter-spacing: 0.02em;
}

.home-testimonials-subtitle {
  font-family: var(--font-subhead);
  font-size: 1.5rem;
  color: var(--color-black);
  line-height: 1.4;
  font-weight: 400;
}

.home-testimonial-card {
  border-radius: 16px;
  padding: 1.75rem;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-testimonial-card:hover {
  transform: translateY(-3px);
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  color: var(--color-gray-800);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.home-testimonial-card--white {
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  color: var(--color-gray-800);
}

.home-testimonial-card--blue {
  background: var(--color-primary);
  color: var(--color-white);
}

.home-testimonial-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.home-testimonial-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}

.home-testimonial-info {
  display: flex;
  flex-direction: column;
}

.home-testimonial-info strong {
  font-size: 0.9rem;
  font-style: italic;
}

.home-testimonial-info span {
  font-size: 0.75rem;
  opacity: 0.7;
  font-style: italic;
}

.home-star-rating {
  color: var(--color-warning);
  font-size: 1.3rem;
  letter-spacing: 3px;
  margin-bottom: 0.75rem;
}

.home-testimonial-card--blue .home-star-rating {
  color: var(--color-white);
}
.home-testimonial-card:hover .home-star-rating {
  color: var(--color-primary);
}

.home-testimonial-quote {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 0;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 1200px) {
  .home-hero-bg {
    padding-left: 2rem;
    padding-right: 2rem;
    background-position: bottom;
  }

  .home-steps-inner {
    padding: 3rem 2rem;
  }

  .home-cards-inner {
    padding: 3rem 2rem;
  }

  .home-digital-left {
    padding: 3rem 2rem;
  }

  .home-testimonials-inner {
    padding: 3rem 2rem;
  }

  .home-hero-content {
    padding: 3rem 0;
    text-align: center;
  }

  .home-hero-subtitle {
    margin: 0 auto;
  }

  .home-hero-content .mt-4 {
    text-align: center;
  }
  footer.bg-dark-blue{
    padding: 3rem 2rem 0;
  }
}

@media (max-width: 767px) {
  .home-hero-bg {
    min-height: 430px;
  }
  .home-hero-title {
    font-size: 2.2rem;
  }

  .home-steps-title,
  .home-cards-title,
  .home-testimonials-title {
    font-size: 2rem;
  }

  .home-digital-title {
    font-size: 2rem;
  }

  .home-step-number {
    font-size: 2rem;
  }

  .home-steps-subtitle,
  .home-testimonials-subtitle {
    font-size: 1.1rem;
  }

  .home-btn-filled,
  .home-btn-blue-filled,
  .home-btn-primary-blue-filled,
  .home-btn-outline-white {
    font-size: 0.9rem;
    padding: 12px 24px;
  }

  .home-digital-right {
    min-height: 300px;
  }

  .home-step {
    margin-bottom: 1rem;
  }

  /* Testimonials: one horizontal swipe row instead of a stacked list.
     The row bleeds through .home-testimonials-inner's 2rem padding so the
     next card peeks in from the screen edge. */
  .home-testimonials-row {
    flex-wrap: nowrap;
    justify-content: flex-start !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -2rem;
    margin-right: -2rem;
    padding: 0 calc(2rem - 12px);
    scroll-padding: 0 calc(2rem - 12px);
  }
  .home-testimonials-row::-webkit-scrollbar {
    display: none;
  }
  .home-testimonials-row > [class*="col-"] {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .home-testimonial-card.is-active {
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    color: var(--color-gray-800);
  }
  .home-testimonial-card.is-active .home-star-rating {
    color: var(--color-primary);
  }

  /* Footer: keep the "powered by" tagline within the logo width and
     tone down the nav links so they don't collide */
  .footer-logo-tagline {
    font-size: 8px;
    letter-spacing: 0.4px;
  }
  .footer-title {
    font-size: 16px;
    line-height: 150%;
  }

}
@media (max-width: 576px) {
  /* Hero: show only the house doodle (left half of the illustration),
     enlarged, with the text pulled up and room reserved below the CTA */
  .home-hero-bg {
    background-size: 200vw auto;
    background-position: left bottom;
    min-height: 0;
  }
  .home-hero-content {
    padding: 1.5rem 0 62vw;
  }
}

/* ==========================================================
   ABOUT ICLICK PAGE  (per Figma)
   Sections: Hero, Who We Are, Our Focus, What Makes Us Different
   Reuses design tokens:
     Colors:  --color-primary-light, --color-white, --color-text-primary
     Fonts:   --font-heading, --font-subhead, --font-body, --font-button
     Shadows: --shadow-card
   ========================================================== */

/* --- HERO ----------------------------------------------------- */
.about-hero-section {
  padding-top: 80px;
  background-color: var(--color-primary-light)
}

.about-hero-bg {
  background-color: var(--color-primary-light);
  background-image: url(../img/about_us_hero_img.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  min-height: 590px;
  padding: 0 8rem;
  position: relative;
  overflow: hidden;
}

.about-hero-content {
  padding: 6rem 0 4rem;
  /* max-width: 520px; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-hero-title {
  font-family: var(--font-heading);
  font-size: 48px;
  color: var(--color-white);
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0.02em;
  margin: 0;
}

.about-hero-subtitle {
  font-family: var(--font-subhead);
  font-size: 1.25rem;
  color: var(--color-white);
  line-height: 1.4;
  max-width: 650px;
  text-align: center;
  letter-spacing: 0;
  margin: 0;
}

.about-hero-cta-wrapper {
  text-align: center;
}

/* Hero CTA: re-uses .home-btn-filled but swapped for a light-on-dark look */
.about-hero-section .home-btn-filled {
  background: var(--color-gray-100, #f2f2f2);
  color: var(--color-text-primary);
}

.about-hero-section .home-btn-filled:hover {
  background: var(--color-white);
  color: var(--color-primary-light) !important;
  border: 1px solid var(--color-white);
}

/* --- WHO WE ARE ---------------------------------------------- */
.about-who-section {
  background-color: var(--color-white);
  padding: 6rem 8rem;
}

.about-who-inner {
  /* max-width: 950px; */
  margin: 0 auto;
}

.about-who-title {
  font-family: var(--font-heading);
  font-size: 48px;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 2%;
  margin: 0;
  line-height: 1;
}

.about-who-paragraph {
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-text-primary);
  letter-spacing: 0;
  margin: 1.5rem auto 0;
  max-width: 1120px;
}

/* --- OUR FOCUS ----------------------------------------------- */
.about-focus-section {
  position: relative;
  min-height: 520px;
  background-image: url(../img/about_us_our_focus.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.about-focus-overlay {
  position: absolute;
  inset: 0;
  /* background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.55) 100%); */
  z-index: 1;
}

.about-focus-content {
  position: relative;
  z-index: 2;
  padding: 6rem 2rem;
  min-height: 520px;
  display: flex;
  align-items: center;
}

.about-focus-content > .row {
  flex: 1;
}

.about-focus-text {
  text-align: center;
  color: var(--color-white);
  padding: 0 1rem;
}

.about-focus-title {
  font-family: var(--font-heading);
  font-size: 48px;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin: 0;
}

.about-focus-subtitle {
  font-family: var(--font-subhead);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-white);
  text-align: center;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
}

.about-focus-paragraph {
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--color-white);
  line-height: 1.41;
  text-align: center;
  letter-spacing: 0;
  margin: 0 auto;
  max-width: 480px;
}

/* --- WHAT MAKES US DIFFERENT --------------------------------- */
.about-difference-section {
  background-color: var(--color-white);
  /* padding: 6rem 8rem; */
}

.about-difference-inner {
  /* max-width: 1200px; */
  margin: 0 auto;
}

.about-difference-text {
  /* padding-right: 2rem; */
}

.about-difference-title {
  font-family: var(--font-heading);
  font-size: 48px;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  margin-inline: auto;
  text-align: center;
  max-width: 360px;

}

.about-difference-list {
  list-style: disc;
  padding-left: 1.25rem;
  max-width: max-content;
  margin-inline: auto;
}

.about-difference-list li {
  font-family: var(--font-body);
  font-size: 32px;
  color: var(--color-text-primary);
  line-height: 1.41;
  letter-spacing: 0;
}

.about-difference-image-wrapper {
  width: 100%;
  height: 100%;
  min-height: 340px;
  overflow: hidden;
}

.about-difference-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 340px;
}

/* --- RESPONSIVE ---------------------------------------------- */
@media (max-width: 1200px) {
  .about-hero-bg,
  .about-who-section,
  .about-focus-content,
  .about-difference-section {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .about-hero-title,
  .about-focus-title {
    font-size: 32px;
  }

  .about-who-title,
  .about-difference-title {
    font-size: 26px;
  }

  .about-focus-subtitle {
    font-size: 20px;
  }

  .about-who-paragraph,
  .about-focus-paragraph {
    font-size: 17px;
  }

  .about-difference-list li {
    font-size: 16px;
  }

  .about-difference-text {
    padding-right: 0;
    margin-bottom: 2rem;
  }

  .about-focus-content > .row > .col-md-6:first-child {
    display: none;
  }
}

@media (max-width: 767.98px) {
  /* Our Focus: title on top, body at the bottom, family visible between */
  .about-focus-section {
    background-position: 38% center;
  }
  .about-focus-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.6) 100%);
  }
  .about-focus-content {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    min-height: 150vw;
    align-items: stretch;
  }
  .about-focus-content > .row {
    align-items: stretch !important;
    flex-direction: column;
  }
  .about-focus-content > .row > .col-md-4 {
    display: flex;
    flex: 1;
  }
  .about-focus-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
  }
  .about-focus-paragraph--mobile {
    margin-top: auto;
  }

  /* What makes us different: breathing room under the photo above, and a
     full-width landscape crop zoomed in on the couple */
  .about-difference-text {
    padding-top: 3.5rem;
  }
  .about-difference-image-wrapper {
    min-height: 0;
    height: 68vw;
    width: auto;
    margin: 0 -2rem;
  }
  .about-difference-image {
    min-height: 0;
    transform: scale(1.75);
    transform-origin: 70% 36%;
  }
}

@media (max-width: 576px) {
  /* Hero: text up, house illustration enlarged and centered below the CTA */
  .about-hero-bg {
      background-size: 200vw auto;
      background-position: -91vw bottom;
      min-height: 0;
  }
  .about-hero-content {
    padding: 1.5rem 0 64vw;
  }

  .about-hero-title {
    font-size: 26px;
  }
}

/* ==========================================================
   PLANS / OUR PRODUCTS PAGE  (per Figma)
   Sections: Hero, Support, Coverage, Home Assistance tabs, Incident CTA
   Reuses design tokens:
     Colors:  --color-primary, --color-primary-light, --color-white,
              --color-text-primary, --color-gray-*, --color-primary-dark
     Fonts:   --font-heading, --font-subhead, --font-body, --font-button
   ========================================================== */

/* --- Shared button styles for this page --- */
.plans-btn-filled {
  font-family: var(--font-button);
    background: var(--color-gray-100);
    color: var(--color-primary);
    border: none;
    padding: 12px 32px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    letter-spacing: 0.07em;
    border-radius: 40px !important;
    text-transform: uppercase;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    box-shadow: var(--shadow-card) !important;
}
.plans-btn-filled:hover {
  background: var(--color-primary);
  color: var(--color-white) !important;
  border-color: var(--color-primary);
}
.plans-btn-solid {
  background: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: 30px;
  padding: 14px 44px;
  font-family: var(--font-button);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  min-width: 240px;
  transition: all 0.2s ease;
}
.plans-btn-solid:hover {
  background: var(--color-primary-hover);
  color: var(--color-white) !important;
  border-color: var(--color-primary-hover);
}

/* --- HERO ----------------------------------------------------- */
.plans-hero-section {
  padding-top: 80px;
  background-color: var(--color-primary-navbar)
}
.plans-hero-bg {
  background-color: var(--color-primary-navbar);
  background-image: url(../img/plans-hero-img.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  min-height: 494px;
  padding: 0 8rem;
  position: relative;
  overflow: hidden;
}
.plans-hero-content {
  padding: 4rem 0;
  max-width: 520px;
  margin-left: auto;
}
.plans-hero-title {
  font-family: var(--font-heading);
  font-size: 36px;
  color: var(--color-white);
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin: 0;
  text-align: left;
}
.plans-hero-cta-wrapper {
  text-align: center;
}

/* --- SUPPORT BANNER ------------------------------------------ */
.plans-support-section {
  padding: 0;
}
.plans-support-bg {
  background-image: url(../img/supports.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 15% center;
  min-height: 536px;
  padding: 0 8rem;
  position: relative;
}
.plans-support-content {
  padding: 7rem 0 5rem;
  max-width: 540px;
}

@media (min-width: 992px) {
  .plans-support-content {
    margin-left: 7rem;
  }
}
.plans-support-title {
  font-family: var(--font-heading);
  font-size: 36px;
  color: var(--color-primary);
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin: 0;
}
.plans-support-body {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: 0;
}
.plans-support-section .plans-btn-filled {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.plans-support-section .plans-btn-filled:hover {
  background: var(--color-primary-hover);
  color: var(--color-white) !important;
  border-color: var(--color-primary-hover);
}

/* --- COVERAGE SECTION ---------------------------------------- */
.plans-coverage-section {
  background-color: var(--color-white);
  padding: 6rem 4rem;
}
.plans-coverage-section .plans-btn-filled {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.plans-coverage-section .plans-btn-filled:hover {
  background: var(--color-primary-hover);
  color: var(--color-white) !important;
  border-color: var(--color-primary-hover);
}

.plans-coverage-inner {
  /* max-width: 1200px; */
  margin: 0 auto;
}
.plans-coverage-title {
  font-family: var(--font-heading);
  font-size: 36px;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  margin: 0;
}
.plans-coverage-subtitle {
  font-family: var(--font-subhead);
  font-size: 20px;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin: 0;
}

.plans-coverage-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.plans-coverage-row {
  display: grid;
  width: 100%;
  position: relative;
  /* gap: 2rem; */
}
.plans-coverage-row--4 {
  grid-template-columns: repeat(4, 1fr);
}
.plans-coverage-row--3 {
  /* Row 2: 3 columns, offset from center so the icons sit at roughly
     1/4, 2/4, 3/4 of the container width — mirroring the Figma alignment
     where the 3 icons align with the first three of the row-1 icons. */
  grid-template-columns: repeat(3, 1fr);
  padding-left: 14%;
  padding-right: 14%;
}
@media (max-width:992px) {
  .plans-coverage-row--3 {
    padding-left: 0;
    padding-right: 0;
  }
  
}
.plans-coverage-row--icons {
  align-items: center;
  /* Use split properties (not shorthand) so sibling rules like
     .plans-coverage-row--3 can still set padding-left/right without being
     reset by the shorthand cascade. */
  padding-top: 2rem;
  padding-bottom: 2rem;
}
/* Wavy connector line (PNG exported from Figma) sits behind the icon row
   and extends the full width of the coverage inner container. Icons are
   positioned above it via z-index. */
.plans-coverage-wave {
  position: absolute;
  top: 50%;
  left: -4%;
  width: 108%;
  height: auto;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* Per-card icon + wave-segment header. Hidden on desktop where the
   original icon row + single wave handles the layout. Below 992px we
   hide the icon row and show this header instead so each card carries
   its own slice of the wave directly above its title. */
.plans-coverage-card-header {
  display: none;
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  min-height: 110px;
}
.plans-coverage-wave-segment {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.plans-coverage-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}
.plans-coverage-icon-circle {
  background: var(--color-primary);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(15, 98, 254, 0.2);
}
.plans-coverage-icon-circle img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
/* Wrapper around the per-card header + card body. Fills the full
   height of its grid cell so cards inside same row sit at equal
   height regardless of how much text each card body has. */
.plans-coverage-card-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plans-coverage-card {
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  background: var(--color-white);
  min-height: 160px;
  /* Stretch to fill any leftover space in the .plans-coverage-card-wrap
     after the (fixed-height) header. Grid's default `align-items: stretch`
     makes all wrappers in the same row equal-height; flex:1 here makes
     the inner cards equal-height too. At <576px the single-column
     layout has nothing to stretch against, but the min-height + auto
     content sizing keeps the card looking right. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-inline: 2rem;
  margin-block: 1rem;
}
.plans-coverage-card-title {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
  margin: 0 0 0.75rem;
}
.plans-coverage-card-body {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: 0;
}

/* --- HOME ASSISTANCE TABS ------------------------------------ */
.plans-assistance-section {
  background-color: var(--color-white);
  padding: 2rem 8rem 6rem;
}
.plans-assistance-inner {
  max-width: 920px;
  margin: 0 auto;
}
.plans-assistance-title {
  font-family: var(--font-heading);
  font-size: 48px;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 2%;
  line-height: 1;
  margin: 0;
}
.plans-assistance-subtitle {
  font-family: var(--font-subhead);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.5;
  letter-spacing: 2%;
  margin: 0;
  /* max-width: 840px; */
  margin-left: auto;
  margin-right: auto;
}

.plans-assistance-tabs-container {
  max-width: 1100px;
  margin: 0 auto;
}
.plans-assistance-tabs {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: var(--color-primary);
  border-radius: 8px;
  overflow: hidden;
  min-height: 420px;
}
.plans-assistance-tab-list {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-right: 1px solid var(--color-gray-200);
}
.plans-assistance-tab {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: none;
  background: var(--color-white);
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--color-gray-200);
  transition: background 0.15s ease, color 0.15s ease;
}
.plans-assistance-tab:last-child {
  border-bottom: none;
}
.plans-assistance-tab:hover {
  background: var(--color-gray-50);
}
.plans-assistance-tab.active {
  background: var(--color-primary);
  color: var(--color-white);
}
/* The icon sits inside a separate circular wrapper so the img can render
   at its natural aspect ratio (not clipped by the border-radius) while the
   wrapper supplies the gray badge background. */
.plans-assistance-tab-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: var(--color-gray-100);
  flex-shrink: 0;
}
.plans-assistance-tab-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
}
/* On the active (blue) tab the circle blends into the background and the
   icon flips white so it stays readable. */
.plans-assistance-tab.active .plans-assistance-tab-icon-wrapper {
  background-color: var(--color-white);
}
/* .plans-assistance-tab.active .plans-assistance-tab-icon {
  filter: brightness(0) invert(1);
} */
.plans-assistance-tab-label {
  font-family: var(--font-heading);
  font-size: 32px;
  /* font-weight: 600; */
  letter-spacing: 2%;
  color: inherit;
}
.plans-assistance-tab.active .plans-assistance-tab-label {
  color: var(--color-white);
}

.plans-assistance-panel {
  display: flex;
  align-items: center;
  padding: 2rem;
  gap: 2rem;
  color: var(--color-white);
  flex-direction: column;
  justify-content: center;
}
.plans-assistance-panel-image {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-gray-100);
  flex-shrink: 0;
}
.plans-assistance-panel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plans-assistance-panel-content {
  color: var(--color-white);
  align-self: baseline
}
.plans-assistance-panel-heading {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--color-white);
  margin: 0 0 0.75rem;
}
.plans-assistance-panel-list {
  font-family: var(--font-body);
  font-size: 30px;
  line-height: 1.5;
  color: var(--color-white);
  padding-left: 1.25rem;
  margin: 0;
}
.plans-assistance-panel-list li {
  color: var(--color-white);
}
.plans-assistance-panel-paragraph {
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1.6;
  color: var(--color-white);
  margin: 0;
}

/* --- INCIDENT CTA BAND --------------------------------------- */
.plans-incident-section {
  background-color: var(--color-gray-100);
  padding: 4rem 8rem;
}
.plans-incident-section .plans-btn-filled {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  width: 300px;
}
.plans-incident-section .plans-btn-filled:hover {
  background: var(--color-primary-hover);
  color: var(--color-white) !important;
  border-color: var(--color-primary-hover);
}
.plans-incident-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.plans-incident-title {
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0;
}
.plans-incident-body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: 0;
  max-width: 520px;
}
.plans-incident-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

/* --- RESPONSIVE --------------------------------------------- */
@media (max-width: 1200px) {
  .plans-hero-bg,
  .plans-support-bg,
  .plans-coverage-section,
  .plans-assistance-section,
  .plans-incident-section {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .plans-hero-title{
    font-size: 32px;
  }
  .plans-hero-content{
    max-width: 416px;
    padding-top: 0;
  }
}
@media (max-width: 992px) {
  .plans-support-bg{
    background-position: 37% center;

  }
  /* Below desktop: hide the icon row entirely and surface each card's
     own icon + wave-segment header. The icon row's single wave was
     anchored to a 4- or 3-column layout and didn't follow the cards
     when they reflowed to 2x2 / 1x4. */
  .plans-coverage-row--icons {
    display: none;
  }
  .plans-coverage-card-header {
    display: flex;
  }
  .plans-coverage-row--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .plans-coverage-row--3 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
  /* .plans-assistance-tabs {
    grid-template-columns: 1fr;
  } */
  /* .plans-assistance-tab-list {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--color-gray-200);
  }
  .plans-assistance-tab {
    border-bottom: none;
    border-right: 1px solid var(--color-gray-200);
    flex-shrink: 0;
  }
  .plans-assistance-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .plans-assistance-panel-image {
    margin: 0 auto;
  } */

  /* Scale the assistance section down for tablets / small desktops
     (<992px) so the 320px sidebar + large icons + 32px tab labels
     don't crowd the panel content. Everything shrinks proportionally;
     the structure (sidebar + panel) is preserved. */
  .plans-assistance-title {
    font-size: 32px;
  }
  .plans-assistance-subtitle {
    font-size: 16px;
  }
  .plans-assistance-tabs {
    grid-template-columns: 220px 1fr;
    min-height: 360px;
  }
  .plans-assistance-tab {
    gap: 0.75rem;
    padding: 0.875rem 1rem;
  }
  .plans-assistance-tab-icon-wrapper {
    width: 64px;
    height: 64px;
  }
  .plans-assistance-tab-icon {
    width: 40px;
    height: 40px;
  }
  .plans-assistance-tab-label {
    font-size: 18px;
  }
  .plans-assistance-panel {
    padding: 1.5rem;
    gap: 1.25rem;
  }
  .plans-assistance-panel-image {
    width: 130px;
    height: 130px;
  }
  .plans-assistance-panel-heading {
    font-size: 22px;
    margin-bottom: 0.5rem;
  }
  .plans-assistance-panel-list {
    font-size: 18px;
    padding-left: 1rem;
  }
  .plans-assistance-panel-paragraph {
    font-size: 16px;
  }

  .plans-incident-buttons {
    align-items: center;
    margin-top: 2rem;
  }
}

@media (max-width: 576px) {
  /* Hero: text up, family + house doodle enlarged below the CTA */
  .plans-hero-bg{
    background-size: 200vw auto;
    background-position: -22vw bottom;
    min-height: 0;
    align-items: flex-start !important;
  }
  .plans-hero-content{
    padding: 2rem 0 72vw;
  }
  /* Support banner: the photo can't sit behind the text at this width,
     so it moves below it (full-bleed) with the CTA over its lower edge */
  .plans-support-bg{
    background-image: unset;
    min-height: unset;
    text-align: center;
  }
  .plans-support-content{
    padding: 3rem 0 0;
  }
  /* The three section intros share one text style on phones. The values
     are the coverage subtitle's own (it's the reference); it's listed too
     so the three can't drift apart. */
  .plans-support-body,
  .plans-coverage-subtitle,
  .plans-assistance-subtitle{
    font-family: var(--font-subhead);
    font-size: 20px;
    font-weight: 100;
    line-height: 1.4;
    letter-spacing: normal;
  }
  /* On a plain white ground the title matches the other section titles */
  .plans-support-title{
    color: var(--color-text-primary);
  }
  .plans-support-cta-wrapper{
    background-image: url(../img/supports.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 60% center;
    height: 105vw;
    margin-left: -2rem;
    margin-right: -2rem;
    padding-bottom: 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  /* Coverage list: swap the horizontal wave slices for one line that
     winds down the stack — out of each icon, around the outside of its
     card, into the next icon — alternating right / left. Each segment
     spans circle-centre to circle-centre (wraps are contiguous, so
     that's exactly one wrap height). */
  .plans-coverage-wave-segment {
    display: none;
  }
  .plans-coverage-card-wrap {
    position: relative;
  }
  .plans-coverage-card {
    position: relative;
    z-index: 1;
  }
  .plans-coverage-card-wrap::after {
    content: "";
    position: absolute;
    top: 55px;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 0;
    pointer-events: none;
  }
  /* Stretched SVG (preserveAspectRatio none) with a loose S-wobble so it
     reads as the same hand-drawn line as the desktop wave. Stroke is
     --color-primary; data URIs can't read CSS variables. */
  .plans-coverage-card-wrap:nth-child(odd)::after {
    left: 50%;
    right: -20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,1 C35,1 68,0 84,9 C97,17 86,46 93,60 C98,70 85,97 50,96 C30,95.4 12,99 0,99' fill='none' stroke='%230F62FE' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  }
  .plans-coverage-card-wrap:nth-child(even)::after {
    right: 50%;
    left: -20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100,1 C65,1 32,0 16,9 C3,17 14,46 7,60 C2,70 15,97 50,96 C70,95.4 88,99 100,99' fill='none' stroke='%230F62FE' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  }
  /* Lead-in: the line enters from the left screen edge and waves into the
     first icon (its last stretch is hidden behind the circle). */
  .plans-coverage-row--4 .plans-coverage-card-wrap:first-child::before {
    content: "";
    position: absolute;
    left: calc(50% - 50vw);
    width: 50vw;
    top: 30px;
    height: 50px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M-2,30 C30,0 60,85 100,50' fill='none' stroke='%230F62FE' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
    z-index: 0;
    pointer-events: none;
  }
  /* last card of the first group still has to reach the second group */
  .plans-coverage-row--4 .plans-coverage-card-wrap:last-child::after {
    height: calc(100% + 8px);
  }
  .plans-coverage-row--3 .plans-coverage-card-wrap:last-child::after {
    display: none;
  }

  /* Coverage CTA: same distance to the last card above as to the
     Home Assistance title below */
  .plans-coverage-section{
    padding-bottom: 1rem;
  }
  .plans-coverage-cta-wrapper{
    margin-top: 3rem !important;
  }
  .plans-assistance-section{
    padding-top: 2rem;
  }
  .plans-hero-title,
  .plans-support-title,
  .plans-coverage-title,
  .plans-assistance-title {
    font-size: 26px;
  }
  .plans-coverage-row--4,
  .plans-coverage-row--3 {
    grid-template-columns: 1fr;
  }
  .plans-btn-filled,
  .plans-btn-solid {
    min-width: 200px;
    padding: 12px 28px;
    font-size: 12px;
  }

  /* Stack the assistance section vertically on phones — the 220px
     sidebar + 1fr panel from the <992px rule is too wide for a 430px
     viewport (panel ends up ~150px and clips the text). Sidebar
     becomes a horizontal scrollable strip of tabs on top, panel
     drops below with full available width. */
  .plans-assistance-tabs {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .plans-assistance-tab-list {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--color-gray-200);
  }
  .plans-assistance-tab {
    border-bottom: none;
    border-right: 1px solid var(--color-gray-200);
    flex-shrink: 0;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 0.875rem;
    min-width: 96px;
    width: min-content;
    text-align: center;
  }
  .plans-assistance-tab-icon-wrapper {
    width: 48px;
    height: 48px;
  }
  .plans-assistance-tab-icon {
    width: 30px;
    height: 30px;
  }
  .plans-assistance-tab-label {
    font-size: 13px;
    line-height: 1.2;
  }
  .plans-assistance-panel {
    padding: 1.25rem;
    gap: 1rem;
    text-align: center;
  }
  .plans-assistance-panel-image {
    width: 110px;
    height: 110px;
    margin: 0 auto;
  }
  .plans-assistance-panel-content {
    align-self: stretch;
  }
  .plans-assistance-panel-heading {
    font-size: 20px;
    text-align: center;
  }
  .plans-assistance-panel-list {
    font-size: 16px;
    text-align: left;
    display: inline-block;
  }
  .plans-assistance-panel-paragraph {
    font-size: 14px;
  }
}


/* ---- Terms & Conditions modal: acceptance strip pinned above the footer ---- */
#tocModal .toc-accept-bar {
  flex-shrink: 0;
  padding: 12px 24px;
  border-top: 1px solid #e6e8f0;
  background: #f7f8fb;
  text-align: left;
}
#tocModal .toc-accept-bar .form-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding-left: 0;
}
#tocModal .toc-accept-bar .form-check-input {
  flex-shrink: 0;
  margin: 3px 0 0;
}

/* "Your card was registered successfully" chip. inline-block so a wrapped
   message on narrow screens gets one rounded box instead of a broken
   background per line. */
.card-registered-msg {
  display: inline-block;
  max-width: 100%;
  background: #1fb31b85;
  padding: 10px 14px;
  border-radius: 10px;
  color: #000;
  line-height: 1.4;
  text-align: center;
}

/* Mobile header cluster (language switch + user + burger). Keep it on
   the right even when a long username forces it onto a second line,
   and truncate the name so that rarely happens. */
.mobile-nav-actions {
  margin-left: auto;
  flex-shrink: 0;
}
.mobile-nav-user {
  display: inline-block;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
/* Under 435px the logo (153px incl. margin) + cluster must fit in the
   364px available on one row: tighter burger padding, smaller gap after
   the language switch, shorter name. Under 360px only the icon remains. */
@media (max-width: 435px) {
  .mobile-nav-user { max-width: 80px; }
  .mobile-nav-actions .mobile-lang-switch { margin-right: 6px; }
  .mobile-nav-actions .navbar-toggler { padding-left: 4px; padding-right: 4px; }
}
@media (max-width: 360px) {
  .mobile-nav-user-name { display: none; }
  .mobile-nav-user { max-width: none; }
}