@charset "UTF-8";
/* ----- VARIABLES ----- */
@font-face {
  font-family: "Agenor Neue";
  /* change for live */
  src: url("../../fonts/AgenorNeue-Regular.woff2") format("woff2"), url("../../fonts/AgenorNeue-Regular.woff") format("woff");
}
/***** MEDIA QUERIES *****/
/* ----- BASE ----- */
* {
  box-sizing: border-box; /* set width regardless of padding */
}

body, html {
  height: 100%;
  margin: 0;
  background-color: #fff;
  scrollbar-color: #DEDEDE #fff;
}

/* ---------------------------------- Text --------------------------------- */
body {
  font-family: "Poppins", "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: #555;
}

h1, h2.pseudoh1, h2, h3, h4, h5, h6 {
  font-family: "Agenor Neue", "Poppins", "Roboto", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 20px 0;
}

h1, h2.pseudoh1 {
  font-size: 2.6em;
  color: #06b9c6;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  h1, h2.pseudoh1 {
    font-size: 3.2em;
  }
}

h2 {
  font-size: 2em;
  color: #FF0083;
}
@media (min-width: 768px) {
  h2 {
    font-size: 2.6em;
  }
}

.darktextbox h2 {
  color: #fff;
}

h3 {
  font-size: 1.6em;
  color: #06b9c6;
}
@media (min-width: 768px) {
  h3 {
    font-size: 2em;
  }
}

h4 {
  font-size: 1em;
  color: #555;
  margin: 0;
}
@media (min-width: 768px) {
  h4 {
    font-size: 1.6em;
  }
}

h5 {
  font-size: 1em;
  color: #06b9c6;
}
@media (min-width: 768px) {
  h5 {
    font-size: 1em;
  }
}

h6 {
  font-size: 0.9em;
  color: #FF0083;
}
@media (min-width: 768px) {
  h6 {
    font-size: 0.9em;
  }
}

p {
  margin: 0 0 20px 0;
}

.note {
  font-size: 0.8em;
}

a {
  color: #06b9c6;
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: #FF0083;
}

.lighttextbox a:hover {
  color: #FF0083;
}

.darktextbox a:hover {
  color: #fff;
}

a.bloglink {
  color: #fff;
  text-decoration: underline;
  font-style: italic;
  padding: 0 0 6px 30px;
  background: url(https://www.evolvemyboiler.co.uk/images/read.png) top left no-repeat;
}

/* ---------------------------------- floats --------------------------------- */
.float-left,
.imglft {
  margin: 0;
}
@media (min-width: 768px) {
  .float-left,
  .imglft {
    float: left;
    margin: 0 20px 10px 0;
  }
}

.float-right,
.imgrgt {
  margin: 0;
}
@media (min-width: 768px) {
  .float-right,
  .imgrgt {
    float: right;
    margin: 0 0 10px 20px;
  }
}

.clear {
  clear: both;
}

.hidemobile {
  display: none;
}
@media (min-width: 1024px) {
  .hidemobile {
    display: block;
  }
}

@media (min-width: 1024px) {
  .hidedesktop {
    display: none;
  }
}

img {
  max-width: 100%;
  height: auto;
}

hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #e5e50e, transparent);
  margin: 40px 0;
}

/* ---------------------------------- bullets --------------------------------- */
ul {
  text-align: left;
  margin: 0 0 20px 0;
  overflow: hidden;
}

ol {
  text-align: left;
  padding-left: 15px;
  overflow: hidden;
}
ol li {
  padding-left: 10px;
}

/* ---------------------------------- tick instead of bullets --------------------------------- */
.tick-bullets {
  list-style: none;
  padding-left: 0;
}

.tick-bullets li {
  position: relative;
  padding-left: 25px;
}

.tick-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #06b9c6;
  font-weight: bold;
}

.horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 0;
  margin: 0 0 10px 0;
}

/* ---------------------------------- message --------------------------------- */
.ticker {
  background: #06b9c6;
  padding: 4px 0;
  text-align: center;
}
.ticker p {
  margin: 0;
}
.ticker a {
  color: #fff;
}
.ticker a:hover {
  color: #FF0083;
}

/* ---------------------------------- search --------------------------------- */
#search {
  position: absolute;
  top: 3px;
  right: 40px;
}

#search input[type=text] {
  width: auto !important;
  padding: 2px !important;
  border: 0;
}

#search input[type=submit] {
  width: auto !important;
  font-size: 90% !important;
  background: var(--dark-bg);
  padding: 2px !important;
  margin: 0 !important;
  border-radius: 2px;
}

/* ---------------------------------- general tables --------------------------------- */
table {
  width: 100%;
  margin: 20px auto;
}

th {
  color: #fff;
  font-weight: normal;
  text-align: left;
  background: #06b9c6;
  padding: 5px;
}

th.columntitle {
  background: #132e49;
}

th h4 {
  margin: 0;
}

td {
  background: #f7f7f7;
  padding: 5px;
}

td p {
  margin: 0;
}

/* ---------------------------------- tiles (all white/flat) --------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .two {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
  }
  .four {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
  }
  .tile-1, .tile-2, .tile-3, .tile-4 {
    background: #f7f7f7;
    color: #555;
    padding: 20px 20px 18px;
    border-radius: 18px;
  }
  .darktextbox .tile-1, .darktextbox .tile-2, .darktextbox .tile-3, .darktextbox .tile-4 {
    background: #fff;
  }
}
/* ---------------------------------- cards (multiple, floating) --------------------------------- */
.cards_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 34px 0;
}
.cards_grid h3 {
  font-size: 1.6em;
  text-align: left;
  margin-left: 22px;
}
@media (min-width: 768px) {
  .cards_grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.card {
  position: relative;
  background: #fff;
  padding: 20px 40px;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  text-align: center;
}
@media (min-width: 768px) {
  .card {
    grid-column: span 2;
  }
}
@media (min-width: 768px) {
  .card:nth-child(4), .card:nth-child(5) {
    grid-column: span 3;
  }
}
.card p {
  text-align: justify;
}

.card .card_number {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.card_1 .card_number {
  background: #06b9c6;
}

.card_2 .card_number {
  background: #FF0083;
}

.card_3 .card_number {
  background: #e5e50e;
}

.card_4 .card_number {
  background: #132e49;
}

.card_5 .card_number {
  background: #555;
}

.card_1 h3 {
  color: #06b9c6;
}

.card_2 h3 {
  color: #FF0083;
}

.card_3 h3 {
  color: #e5e50e;
}

.card_4 h3 {
  color: #132e49;
}

.card_5 h3 {
  color: #555;
}

.card_icon {
  width: 62px;
  height: 62px;
  margin: 0 auto;
  border-radius: 18px;
  background: rgba(0, 188, 202, 0.12);
  color: #06b9c6;
  display: grid;
  display: none;
  place-items: center;
  font-size: 2rem;
  font-weight: 700;
}

/* ---- SIDEBAR --- */
/* ---------------------------------- call to action --------------------------------- */
.cta-global {
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #e5e50e, #e5e50e);
  color: #132e49;
  text-align: center;
  margin-bottom: 30px;
}
.cta-global h4 {
  color: #132e49;
  margin-bottom: 10px;
}

.cta-global_actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* ---------------------------------- sticky call to action --------------------------------- */
.sticky-quote-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10, 18, 34, 0.96);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.22);
}
@media (min-width: 768px) {
  .sticky-quote-cta {
    display: none;
  }
}

.sticky-quote-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
}

.sticky-quote-cta__main {
  background: #06b9c6;
  color: #fff;
}

.sticky-quote-cta__call {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* ---------------------------------- Promo badge --------------------------------- */
.promobadge {
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #FF0083, #FF0083);
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
}
.promobadge h4 {
  color: #fff;
  margin-bottom: 10px;
}

/* ---------------------------------- further info --------------------------------- */
.furtherinfo {
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #d0f3f7, #d0f3f7);
  color: #132e49;
  text-align: center;
  margin-bottom: 30px;
}
.furtherinfo h4 {
  margin-bottom: 10px;
}

/* ---------------------------------- callout box --------------------------------- */
.callout {
  background: #f7f7f7;
  padding: 20px;
  border-radius: 18px;
  margin-bottom: 20px;
}

.calloutgreen {
  background: #e5e50e;
  padding: 20px 20px 10px;
  border-radius: 18px;
  margin-bottom: 20px;
}

.callout h2,
.calloutgreen h2 {
  color: #555;
  font-size: 1.6em;
  margin-top: 0;
}

.callout p,
.calloutgreen p {
  color: #555;
}

/* ---------------------------------- FAQs --------------------------------- */
ul.mktree li.liOpen ul {
  display: block;
  margin-bottom: 0px;
}

ul.mktree li.liClosed ul {
  display: none;
  margin-bottom: 0px;
}

ul.mktree li {
  color: #be6e24;
  cursor: pointer;
}

ul.mktree li li {
  color: #777;
  cursor: none;
  list-style-type: none;
  padding-left: 0;
}

/* for IOS */
select {
  color: #000;
}

/* ----- LAYOUT ----- */
@media (min-width: 350px) {
  body {
    border: 0px solid red;
  }
}
@media (min-width: 480px) {
  body {
    border: 0px solid cyan;
  }
}
@media (min-width: 768px) {
  body {
    border: 0px solid orange;
  }
}
@media (min-width: 1024px) {
  body {
    border: 0px solid lime;
  }
}
@media (min-width: 1280px) {
  body {
    border: 0px solid blue;
  }
}
@media (min-width: 1440px) {
  body {
    border: 0px solid violet;
  }
}
.lighttextbox {
  clear: both;
  position: relative;
  display: block;
  color: #555;
  background-color: #fff;
  padding: 30px 10%;
}
@media (min-width: 768px) {
  .lighttextbox {
    padding: 60px 15%;
  }
}

#homepage .lighttextbox {
  text-align: center;
}

.darktextbox {
  clear: both;
  position: relative;
  display: block;
  color: #fff;
  background-color: #132e49;
  padding: 30px 10%;
}
@media (min-width: 768px) {
  .darktextbox {
    padding: 60px 15%;
  }
}

#homepage .darktextbox {
  text-align: center;
}

#homepage #hero.darktextbox {
  text-align: left;
}

/* Only becomes a 2-column layout if a sidebar is present */
.lighttextbox.has-sidebar,
.darktextbox.has-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
}

/* Desktop */
@media (min-width: 768px) {
  .lighttextbox.has-sidebar,
  .darktextbox.has-sidebar {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
  .lighttextbox.has-sidebar > :not(.sidebar),
  .darktextbox.has-sidebar > :not(.sidebar) {
    grid-column: 1;
  }
  .lighttextbox.has-sidebar > .sidebar,
  .darktextbox.has-sidebar > .sidebar {
    grid-column: 2;
    grid-row: 1;
  }
}
/* -- general grid -- */
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
}

.logos img {
  max-width: 230px;
  height: auto;
}

/* -- sidebar -- */
.sidebar {
  padding: 0 22px;
  border-radius: 20px;
  background: #fff;
  /* box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); */
}

/* ------------------------- STICKY FOOTER ------------------------- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#footer {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

#main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

/* ---footer ---*/
#footer.darktextbox {
  text-align: center;
}

/* ------------------------- HEADER ------------------------- */
/* logotel */
.logomenutel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 15px 30px;
  margin: 0;
}

#logo {
  text-align: center;
}

#logo img {
  max-width: 300px;
  height: auto;
}

#tel {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  color: #132e49;
}

#tel a {
  color: #FF0083;
}

@media (min-width: 480px) {
  .logomenutel {
    flex-direction: row;
    align-items: center;
  }
}
/* ----- MENU ----- */
.menu-toggle {
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 1100;
  width: 22px;
  border: 0;
  border-radius: 0px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 0px;
  transition: 0.3s ease;
  border-top: 2px solid #132e49;
  border-bottom: 2px solid #fff;
}

.menu-toggle.active span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
  border-bottom: 0px;
}
.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
  border-bottom: 0px;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  z-index: 999;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.menu {
  position: fixed;
  top: 0;
  right: 0;
  width: min(90vw, 380px);
  height: 100vh;
  background: #ffffff;
  /* box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1); */
  transform: translateX(100%);
  transition: 0.35s ease;
  z-index: 1000;
  overflow-y: auto;
  padding: 80px 0 30px;
}

.menu.active {
  transform: translateX(0);
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  position: relative;
  border-bottom: 1px solid #e5e5e5;
}

.menu a {
  display: block;
  padding: 16px 20px;
  color: #132e49;
  text-decoration: none;
  font-weight: 500;
  padding-right: 60px;
}

.menu a:hover {
  background: #f5f5f5;
}

.menu li ul {
  display: none;
  background: #f8f8f8;
}

.menu li.open > ul {
  display: block;
}

.menu li ul a {
  padding-left: 35px;
  font-size: 0.95rem;
}

.menu li ul li ul a {
  padding-left: 50px;
  font-size: 0.9rem;
}

.submenu-toggle {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.submenu-toggle::before, .submenu-toggle::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 10px;
  width: 18px;
  height: 2px;
  background: #111;
  transition: 0.25s ease;
}
.submenu-toggle::after {
  transform: rotate(90deg);
}

.menu li.open > .submenu-toggle::after {
  transform: rotate(0);
}

/* Style for full menu but for simplicity keep the hamburger on all devices.  Main links on homepage hero and CTA */
@media (min-width: 1024px) {
  .menu-toggle,
  .menu-overlay,
  .submenu-toggle {
    display: none;
  }
  .menu {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    transform: none;
    overflow: visible;
    padding: 0;
  }
  .menu > ul {
    display: flex;
    align-items: center;
    overflow: visible !important;
  }
  .menu > ul > li {
    position: relative;
    border-bottom: 0;
  }
  .menu > ul > li > a {
    padding: 10px 18px;
  }
  /* 2nd level dropdown */
  .menu li ul {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: 0.2s ease;
    overflow: visible !important;
  }
  .menu li:hover > ul,
  .menu li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .menu li ul li {
    position: relative;
  }
  /* 3rd level flyout */
  .menu li ul li ul {
    top: 0;
    left: 100%;
  }
  .menu li ul a {
    padding: 14px 18px;
    white-space: nowrap;
    color: #132e49;
    background: #fff;
  }
  .menu li ul a:hover {
    background: #f5f5f5;
  }
}
/* ------------------ FORMs ------------------ */
/* for IOS */
select {
  color: #000;
}

/* ----- BUTTONS ----- */
button,
a.button,
input[type=submit] {
  display: inline-block;
  padding: 0.9rem;
  font-size: 1em;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  transition: all 0.25s ease;
}

.primary {
  background: #06b9c6;
  color: #fff;
}
.primary:hover {
  transform: translateY(-2px);
  background: #d0f3f7;
  color: #06b9c6 !important;
}

.secondary {
  background: #FF0083;
  color: #fff;
}
.secondary:hover {
  transform: translateY(-2px);
  background: #fff;
  color: #FF0083 !important;
}

.highlight {
  background: #e5e50e;
  color: #132e49;
}
.highlight:hover {
  transform: translateY(-2px);
  background: #132e49;
  color: #e5e50e !important;
}

.light {
  background: #d0f3f7;
  color: #555;
}
.light:hover {
  transform: translateY(-2px);
  background: #555;
  color: #d0f3f7 !important;
}

.lightest {
  background: #fff;
  color: #FF0083;
}
.lightest:hover {
  transform: translateY(-2px);
  background: #FF0083;
  color: #fff !important;
}

.dark {
  background: #132e49;
  color: #fff;
}
.dark:hover {
  transform: translateY(-2px);
  background: #fff;
  color: #132e49 !important;
}

.darkest {
  background: #555;
  color: #fff;
}
.darkest:hover {
  transform: translateY(-2px);
  background: #fff;
  color: #555 !important;
}

/* ---- HERO ---- */
.home #hero {
  display: grid;
  gap: 40px;
  padding: 100px 8% !important; /* override darktextbox */
  border-radius: 0 0 45px 45px;
}
@media (min-width: 768px) {
  .home #hero {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
    border-radius: 0 0 20% 20%;
  }
}

body:not(.home) #hero {
  display: grid;
  gap: 40px;
  padding: 60px 8% !important; /* override darktextbox */
  border-radius: 0 0 45px 45px;
}
@media (min-width: 768px) {
  body:not(.home) #hero {
    grid-template-columns: repeat(2, auto);
    gap: 60px;
    border-radius: 0 0 20% 20%;
  }
}

/* -- left -- */
.home .hero_main {
  text-align: center;
}
@media (min-width: 768px) {
  .home .hero_main {
    text-align: left;
  }
}
.home .hero_main h1 {
  margin-bottom: 0;
}
.home .hero_main p {
  color: #fff;
  font-size: 1.6em;
  margin-bottom: 0;
}

body:not(.home) .hero_main {
  text-align: center;
}
@media (min-width: 768px) {
  body:not(.home) .hero_main {
    text-align: left;
  }
}
body:not(.home) .hero_main h1 {
  font-size: 2.6em;
  margin-bottom: 0;
}
body:not(.home) .hero_main p {
  color: #fff;
  margin-bottom: 0;
}

/* -- right (home page) -- */
body.home .hero_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px) {
  body.home .hero_grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
  }
}

/* -- all cards --*/
body.home .hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100px;
  padding: 20px 20px 18px;
  text-decoration: none;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
body.home .hero-card:hover, body.home .hero-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.24);
  filter: brightness(1.03);
}
body.home .hero-card:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* -- right (other pages) -- */
body:not(.home) .hero_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px) {
  body:not(.home) .hero_grid {
    grid-template-columns: repeat(3, auto);
    grid-auto-rows: auto;
    align-items: start;
  }
}

/* -- all cards --*/
body:not(.home) .hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  height: auto;
  padding: 20px 20px 18px;
  text-decoration: none;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
body:not(.home) .hero-card:hover, body:not(.home) .hero-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.24);
  filter: brightness(1.03);
}
body:not(.home) .hero-card:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* -- card differences --*/
.hero-card_1 {
  background: #06b9c6;
  color: #fff;
}
.hero-card_1:hover, .hero-card_1:focus-visible {
  color: #132e49 !important;
}

@media (min-width: 768px) {
  body.home .hero-card_1 {
    grid-row: span 2;
  }
}

.hero-card_2 {
  background: #FF0083;
  color: #fff;
}
.hero-card_2:hover, .hero-card_2:focus-visible {
  color: #132e49 !important;
}

.hero-card_3 {
  background: #e5e50e;
  color: #132e49;
}
.hero-card_3:hover, .hero-card_3:focus-visible {
  color: #fff !important;
}

.hero-card_4 {
  background: #d0f3f7;
  color: #132e49;
}
.hero-card_4:hover, .hero-card_4:focus-visible {
  color: #FF0083 !important;
}

.hero-card_5 {
  background: #555;
  color: #fff;
}
.hero-card_5:hover, .hero-card_5:focus-visible {
  color: #e5e50e !important;
}

.hero-card_title {
  display: block;
  margin-bottom: 0;
  font-size: 1em;
  line-height: 1.15;
}

.home .hero-card_title {
  margin-bottom: 10px;
  font-size: 1.6em;
}

.hero-card_text {
  display: block;
  padding-right: 20px;
  font-size: 1em;
  line-height: 1.4;
}

.hero-card_arrow {
  position: absolute;
  right: 18px;
  bottom: 16px;
  font-weight: 700;
}

.hero-card_arrow {
  position: absolute;
  right: 18px;
  bottom: 16px;
  font-weight: 700;
}

/* ----- SLIDER ----- */
#slider {
  overflow: hidden;
  width: 100%;
  margin: 0 auto 20px;
}

#slider #slidecontainer {
  display: flex;
  width: 200%;
  min-height: 200px;
  margin: 0 auto;
  animation: boiler-slider 16s infinite;
  will-change: transform;
}

#slider #slidecontainer .slide {
  flex: 0 0 50%;
  width: 50%;
  background: #fff;
}

@keyframes boiler-slider {
  0%, 45% {
    transform: translateX(0);
  }
  50%, 95% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}
.slide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px) {
  .slide {
    grid-template-columns: 0.8fr 1.4fr 0.8fr;
    grid-auto-rows: 1fr;
    align-items: center;
  }
}
.slide h3 {
  text-align: left;
}
.slide .slide_image {
  background: none;
}
.slide .slide_info {
  background: none;
}
.slide .slide_price {
  background: #f7f7f7;
  border-radius: 10px;
  padding: 20px 10px;
}
.slide .slide_price p {
  line-height: 1.6em;
  margin: 0;
}
.slide .slide_price p.fixed {
  font-style: italic;
  color: #555;
}
.slide .slide_price p.price {
  font-size: 2.6em;
  font-weight: 600;
  line-height: 1.3em;
  color: #3bb54a;
}
.slide .slide_price p.finance {
  font-weight: 400;
  color: #555;
}
.slide .slide_price .finance-amount {
  font-size: 2em;
}
.slide .slide_price p.vat {
  font-weight: 300;
  color: #555;
  margin-bottom: 15px;
}

@media (prefers-reduced-motion: reduce) {
  #slider #slidecontainer {
    animation: none;
    transform: none;
  }
}
/* ----- HOW DOES IT WORK ----- */
/* --- Home Page ---*/
#hdiw .hdiw {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  #hdiw .hdiw {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
  }
}
#hdiw .hdiw div {
  text-align: left;
  background: #fff;
  border-radius: 10px;
  padding: 30px;
}
#hdiw .hdiw div p, #hdiw .hdiw div li {
  color: #132e49 !important;
}

/* ----- REVIEWS ----- */
.bx-wrapper {
  position: relative;
  margin-bottom: 7px;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.lighttextbox .bx-wrapper,
.darktextbox .bx-wrapper {
  margin-bottom: 60px;
}

.bx-wrapper img {
  max-width: 100%;
  display: block;
}

.bxslider {
  margin: 0;
  padding: 0;
}

ul.bxslider {
  list-style: none;
}

.bx-viewport {
  /*fix other elements on the page moving (on Chrome)*/
  -webkit-transform: translatez(0);
}

.bx-wrapper {
  /*-moz-box-shadow: 0 0 5px #ccc;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
  border: 5px solid #fff;
  background: #fff;*/
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}

/* LOADER */
.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url("https://cdn.jsdelivr.net/bxslider/4.2.12/images/bx_loader.gif") center center no-repeat #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}

/* PAGER */
.bx-wrapper .bx-pager {
  text-align: center;
  font-size: 0.85em;
  font-family: Arial;
  font-weight: bold;
  color: #555;
  padding-top: 20px;
}

.bx-wrapper .bx-pager.bx-default-pager a {
  background: #132e49;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #FF0083;
}

.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  vertical-align: bottom;
  *zoom: 1;
  *display: inline;
}

.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
  background: url("https://cdn.jsdelivr.net/bxslider/4.2.12/images/controls.png") no-repeat 0 -32px;
}

.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}

.bx-wrapper .bx-next {
  right: 10px;
  background: url("https://cdn.jsdelivr.net/bxslider/4.2.12/images/controls.png") no-repeat -43px -32px;
}

.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}

/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
  text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url("https://cdn.jsdelivr.net/bxslider/4.2.12/images/controls.png") -86px -11px no-repeat;
  margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url("https://cdn.jsdelivr.net/bxslider/4.2.12/images/controls.png") -86px -44px no-repeat;
  margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}

/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(80, 80, 80, 0.75);
  width: 100%;
}

.bx-wrapper .bx-caption span {
  color: #fff;
  font-family: Arial;
  display: block;
  font-size: 0.85em;
  padding: 10px;
}

.name {
  font-weight: bold;
  margin: 0;
}

.company {
  font-style: italic;
  font-size: 90%;
  margin: 0;
}

.faqs_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 34px 0;
}
@media (min-width: 768px) {
  .faqs_grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
  }
}

.faq-section {
  padding: 24px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.faq-section h2 {
  margin: 0 0 18px;
  font-size: 1.6em;
  line-height: 1.25;
}

.faq-link,
.faq-item {
  display: block;
  margin-bottom: 10px;
  border-radius: 14px;
  background: rgba(0, 188, 202, 0.08);
  border: 1px solid rgba(0, 188, 202, 0.18);
}

.faq-link {
  position: relative;
  padding: 14px 42px 14px 16px;
  color: #132e49;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.35;
}
.faq-link::after {
  content: "→";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #06b9c6;
  font-weight: 700;
}
.faq-link:hover, .faq-link:focus-visible {
  background: rgba(0, 188, 202, 0.15);
}

.faq-item {
  overflow: hidden;
}
.faq-item summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 14px 42px 14px 16px;
  color: #132e49;
  font-weight: 600;
  line-height: 1.35;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #FF0083;
  font-size: 1.4rem;
  font-weight: 700;
}
.faq-item[open] summary::after {
  content: "−";
}

.faq-item__answer {
  padding: 0 16px 16px;
}
.faq-item__answer p {
  margin: 0;
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ------------------------- Articles ------------------------- */
.articles-page {
  background: #fff;
}

.articles-section {
  padding: 40px 0 60px;
}

.articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .articles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.article-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}
.article-card__image {
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.article-card__image:hover img {
  transform: scale(1.05);
}
.article-card__content {
  padding: 20px;
}
.article-card__date {
  font-size: 0.9em;
  color: #FF0083;
  margin: 0 0 8px;
}
.article-card h2 {
  font-size: 1.25rem;
  margin: 0 0 12px;
}
.article-card h2 a {
  color: #555;
  text-decoration: none;
  transition: all 0.25s ease;
}
.article-card h2 a:hover {
  color: #06b9c6;
}
.article-card__tags {
  font-size: 1em;
  color: #555;
  margin: 0 0 16px;
}

.article-page {
  background: #fff;
}

.single-article {
  padding-bottom: 60px;
}
.single-article__header {
  background: #06b9c6;
  color: #fff;
  padding: 40px 0;
}
.single-article__header h1 {
  max-width: 900px;
  margin: 0;
  color: #fff;
}
.single-article__back {
  display: inline-block;
  margin-bottom: 20px;
  color: #fff;
  text-decoration: none;
}
.single-article__back:hover {
  text-decoration: underline;
}
.single-article__date, .single-article__author {
  margin: 0 0 12px;
  color: #fff;
}
.single-article__image {
  margin-top: 30px;
}
.single-article__image img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}
.single-article__content {
  max-width: 850px;
  padding-top: 40px;
}
.single-article__content h2,
.single-article__content h3 {
  color: #06b9c6;
  margin-top: 32px;
}
.single-article__content p {
  margin-bottom: 20px;
}
.single-article__content img {
  max-width: 100%;
  height: auto;
}
.single-article__content a {
  color: #06b9c6;
}

/* auto injected Promo badge (Standard sidebar box styled in base) */
.promo-badge {
  float: right;
  width: 320px;
  margin: 10px 0 20px 30px;
}
@media (max-width: 768px) {
  .promo-badge {
    float: none;
    width: 100%;
    margin: 30px 0;
  }
}
.promo-badge__inner {
  background: linear-gradient(135deg, #ffffff, #f8fefe);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border: 2px solid rgba(6, 185, 198, 0.15);
  position: relative;
  overflow: hidden;
}
.promo-badge__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0px;
  background: #06b9c6;
}
.promo-badge__label {
  font-size: 1em;
  font-weight: 700;
  color: #06b9c6;
  text-transform: uppercase;
  margin: 0 0 6px;
  letter-spacing: 0.5px;
}
.promo-badge h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  line-height: 1.2;
  color: #555;
}
.promo-badge p {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.promo-badge strong {
  background: rgba(6, 185, 198, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
  color: #06b9c6;
}
.promo-badge__cta {
  display: inline-block;
  background: #06b9c6;
  color: #fff !important;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 1em;
  transition: 0.2s ease;
}
.promo-badge__cta:hover {
  background: #FF0083;
  transform: translateY(-1px);
}

/* ---- SIDEBAR --- */
/* ---------------------------------- related articles --------------------------------- */
.related-articles {
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f7f7f7, #f7f7f7);
  color: #555;
  text-align: center;
  margin-bottom: 30px;
}
.related-articles h4 {
  margin-bottom: 10px;
}
.related-articles ul {
  margin: 0;
  padding: 0;
}
.related-articles ul li {
  border-bottom: 0px solid #eee;
  position: relative;
  padding-left: 25px;
}
.related-articles ul li:last-child {
  border-bottom: 0;
}
.related-articles ul li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: #FF0083;
  font-weight: bold;
}
.related-articles ul a {
  display: block;
  color: #555;
  text-decoration: none;
}
.related-articles ul a:hover {
  color: #06b9c6;
}

/*# sourceMappingURL=style.css.map */