.page-banner {height: 300px; display: flex; flex-direction: column; justify-content: center; gap: 2rem; background-image: var(--bg-xlarge); background-position: center; background-size: cover; background-repeat: no-repeat;}
.page-banner .banner-content-container {width: 1100px; max-width: 95%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center;}
.page-banner .banner-content-container-centered{align-items: center;}
.page-banner .banner-content-container-centered .banner-copy{max-width: unset;}
.page-banner .banner-scroll-bar {width: 1100px; max-width: 95%; margin: 0 auto; background-color: rgba(255, 255, 255, 0.90);}
.page-banner .banner-content {max-width: 600px;}
.page-banner .cta-wrapper{height: auto;}
.page-banner h1{text-align: left; color: #FFFFFF; font-size: 2rem; padding: 0;}
.page-banner .banner-copy {color: #FFFFFF; padding: 0.625rem 0 1rem 0; max-width: 45ch;}
.page-banner .banner-copy p{padding: 0 !important; font-size: 14px;}
.page-banner .banner-scroll-bar{border-radius: 16px;}

.inpage-navbar {display: flex; justify-content: space-evenly;}
.inpage-navbar .navbar-element{display: flex; align-items: center; justify-content: center; width: 100%;}
.inpage-navbar .navbar-element:not(:last-child)::after {content: "";height: 80%;width: 1px;background-color: #d1dce5;}
.inpage-navbar a{padding: 1.25rem; display: inline-block; color: #00579b; font-size: 14px; font-weight: 600; width: 100%; text-align: center;}
.inpage-navbar a:hover{text-decoration: underline; color: #0077cc;}

@media (max-width:1024px) {
	.page-banner .banner-content-container {width: 90%;}
	.page-banner .banner-scroll-bar {width: 90%;}
	.page-banner .banner-scroll-bar .navbar-element a{padding: 0.25rem;}
}

@media (max-width:2000px) {
    .page-banner { background-image: var(--bg-large); }
}

/* Tablet */
@media (max-width:768px) {
    .page-banner { background-image: var(--bg-medium); }
}

/* Mobile */
@media (max-width:480px) {
    .page-banner { background-image: var(--bg-small); }
}

.icon-block{margin: 32px auto 16px; max-width: 1100px;}
.icon-block .icon-block-title{text-align: center; margin-bottom: 10px; font-size: 20px !important; font-weight: 700 !important;}
.icon-block .icon-block-copy{text-align: center; font-size: 16px; padding: 0;}
.icon-block .icon-block-container{display: flex; justify-content: space-evenly; gap: 1rem;}
.icon-block .icon-block-container .icon-block{width: 100%; display: flex; flex-direction: column; align-items: center; background: white; padding: 1.5rem; border-radius: 16px; box-shadow: 0 2px 6px rgba(16, 24, 40, .04), 0 12px 24px rgba(16, 24, 40, .08); transition: transform 0.2s ease, box-shadow 0.2s ease;}
.icon-block .icon-block-container .icon-block:hover{box-shadow: 0 6px 12px rgba(0,0,0,.5); transform: translateY(-2px);}
.icon-block .icon-block-container .icon-block-image{max-width: 100%; height: auto; display: block; width: clamp(100px, 11vw, 130px);}
.icon-block .icon-block-container .icon-block-title{text-align: center; font-size: 20px; line-height: 1.3; margin: 0 0 0.5rem 0; color: #0e2a38;}
.icon-block .icon-block-container .icon-block-copy{text-align: center; font-size: 14px;}

@media (max-width:1250px) {
  .icon-block{max-width: 95%;}
}

@media (max-width:1024px) {
	.icon-block .icon-block-title{font-size: 18px !important;}
	.icon-block .icon-block-container{margin: 1.5rem 0 0 0; gap: 0.5rem;}
	.icon-block .icon-block-container .icon-block{padding: 0.75rem; width: 90%; margin: 0 auto;}
}

@media (max-width: 600px) {
	.icon-block .icon-block-container{flex-direction: column;}
}

.worldpay-banner {display: flex;align-items: center;justify-content: center;background-color: #2f4369;padding: 5px 0;max-width: 1250px; margin: 30px auto 15px; color: white;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);border-radius: 6px; gap: 5rem;}
.worldpay-banner .logo-box {background-color: white; padding: 2px 10px;display: flex;align-items: center;justify-content: center;}
.worldpay-banner .logo-box img {max-width: 300px; height: auto;display: block;}
.worldpay-banner .text-box .text-box-title {display: flex; gap: 1rem;}
.worldpay-banner .text-box .text-box-title span{font-size: 2rem; font-weight: bold; color: #fff;}
.worldpay-banner .text-box p {margin: 0;line-height: 1.5;text-align: left; max-width: 600px; font-size: 14px; color: #fff;}
@media (max-width: 1024px) {
  .worldpay-banner {flex-direction: column;text-align: center; gap: 0;}
  .worldpay-banner .logo-box {margin-right: 0;margin-bottom: 20px;}
  .worldpay-banner .text-box .text-box-title{gap: 0.5rem; max-width: 80%; justify-content: center; margin: auto; flex-wrap: wrap;}
  .worldpay-banner .text-box{max-width: 90%;}
  .worldpay-banner .text-box .text-box-title span{font-size: 1.5rem;}
  .worldpay-banner .text-box p {text-align: center;}
}
.text-box-title .animate {display: inline-block; opacity: 0; transform: translateX(200px); animation: slideIn 0.6s ease-out forwards;}
.text-box-title .animate:nth-child(1) {animation-delay: 0s;}
.text-box-title .animate:nth-child(2) {animation-delay: 0.75s;}
.text-box-title .animate:nth-child(3) {animation-delay: 1.5s;}
@keyframes slideIn {
to {
    opacity: 1;
    transform: translateX(0);
  }
}

.image-content-block{display: flex; align-items: center; border-radius: 16px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);}
.image-content-block:hover{  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.50); transition: box-shadow 0.5s ease;}
.image-content-block .content-wrapper{padding: 30px; display: flex; flex-direction: column; gap: 0.5rem;}
.image-content-block .content-wrapper .content-title{font-size: 18px; font-weight: 700;}
.image-content-block .content-wrapper .content-copy{font-size: 14px;}
.image-content-block .content-wrapper .content-list{font-size: 14px;}
.image-content-block .content-wrapper .content-list strong{font-size: 14px;}
.image-content-block .image-wrapper{display: flex; align-items: center; height: 100%; overflow: hidden;}
.image-content-block .image-wrapper .content-image{width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform 0.5s ease; margin: auto;}
.image-content-block .image-wrapper .content-image:hover{transform: scale(1.1);}
.image-content-block .image-wrapper .icon:hover{transform: none !important;}
.image-content-block-style-1{margin: 20px auto; max-width: 1250px;}
.image-content-block-style-1 .content-wrapper{width: 50%;}
.image-content-block-style-1 .image-wrapper{width: 50%; border-radius: 0 16px 16px 0;}
.image-content-block-style-2{height: 330px; max-width: 1250px; margin: auto;}
.image-content-block-style-2 .content-wrapper{width: 50%; display: flex; flex-direction: column; justify-content: center;}
.image-content-block-style-2 .image-wrapper{width: 250px; border-radius: 0 16px 16px 0;}
.image-content-block .three-quarter{height: 75%; display: flex; justify-content: center;}
.image-content-block .three-quarter .content-image{width: 75%;}
.image-content-block .half{display: flex; justify-content: center;} 
.image-content-block .half .content-image{width: 50%;}

@media (max-width: 1250px) {
  	.image-content-block{width: 95%;}
    .image-content-block-style-2{width: 100% !important;}
    .image-content-block-style-2{height: 415px;}
}

@media (max-width:1024px) {
	.image-content-block{flex-direction: column-reverse;}
	.image-content-block .content-wrapper{width: 100%; padding: 10px 0 !important;}
	.image-content-block .content-wrapper .content-title{width: 90%; margin: auto;}
	.image-content-block .content-wrapper .content-copy{width: 90%; margin: auto;}
	.image-content-block .content-wrapper .content-list{width: 90%; margin: auto;}
	.image-content-block .image-wrapper{width: 100%; border-radius: 16px 16px 0 0 !important;}
	.image-content-block .image-wrapper .content-image{max-height: 300px;}
	.image-content-block .image-wrapper .icon{padding: 16px 0 0 0;}
	/*.image-content-block-style-2{height: unset;} */
  .image-content-block-style-2{width: 100% !important; height: 470px;}
}


@media (max-width:480px) {
	.image-content-block .image-wrapper .icon{display: none;}
    .image-content-block-style-2{height: unset;}
}


/* Color Options Grid */
/* === Colour Options Grid === */
.colour-options { max-width: 1000px; margin: 30px auto; padding: 0 10px; text-align: center; }
.colour-options h2 { font-size: 22px; color: #00579b; margin-bottom: 6px; }
.colour-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px 18px;
  justify-items: center;
  margin: 30px 0 10px;
}

.colour-grid:last-child {
	
}
.colour-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 150px;
  padding: 6px;
  box-sizing: border-box;
  text-align: center;
}
.swatch {
  position: relative;
  width: 110px;
  height: 100px;
  border: 2px solid #ccc;
  margin-bottom: 4px;
  border-radius: 6px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
  transform: scale(2.5);
  transform-origin: center;
  filter: brightness(.95);
}
.swatch.gradient::after {
  background: linear-gradient(45deg, red, orange, yellow, green, cyan, blue, violet);
  transform: none;
  filter: none;
}
.swatch:hover{
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.50);
    transition: box-shadow 0.5s ease;
}
.colour-box p { margin: 2px 0 0; font-size: 14px; word-wrap: break-word; }
.note { color: #555; margin-top: 8px; font-size: 13px; }

@media (max-width: 768px) {
  .swatch { width: 90px; height: 85px; }
}
@media (max-width: 600px) {
  .colour-box { min-height: unset; padding: 5px 0; }
  .swatch { width: 80px; height: 75px; }
}
@media (max-width: 520px) {
  .colour-grid { grid-template-columns: repeat(3, 1fr); }
  .colour-grid > :last-child  {grid-column: span 3;} 
  .swatch { width: 75px; height: 70px; }
}
.swatch[style*="background-color"]::after { display: none; }
.swatch.no-zoom::after{display:none}

.section-divider {
  width: 80%;
  height: 1px;
  background-color: #ccc;
  margin: 0 auto 30px;
}

.bottom-section-divider {
  width: 80%;
  height: 1px;
  background-color: #ccc;
  margin: 30px auto 0;
}

.faq-section{max-width: 800px; margin: 30px auto;}
.faq-section .faq-title{text-align: center; font-size: 24px;}
.faq-section .faq-container{display: flex; flex-direction: column; border-bottom: 1px solid #cccccc;}
.faq-section .faq-container .question-wrapper{display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 0 8px;}
.faq-section .faq-container .question-wrapper .question{font-size: 14px; padding: 16px; font-weight: bold; color: #00579b;}
.faq-section .faq-container .question-wrapper .icon{font-size: 18px; font-style: unset; font-weight: bold; color: #00579b;}
.faq-section .faq-container .answer-wrapper{padding: 0 24px;max-height: 0;opacity: 0;overflow: hidden;transition: max-height 0.6s ease, opacity 0.6s ease;}
.faq-section .open .answer-wrapper{max-height: 500px;opacity: 1;padding-bottom: 16px;}
.faq-section .faq-container .answer-wrapper .answer{font-size: 16px;}


.content-block{padding: 30px 10px;}
.content-block .content-block-title{font-size: 24px; margin: 0 0 15px 0;}
.content-block .content-block-copy{margin: 0 auto 30px;max-width: 900px;font-size: 14px;line-height: 1.6;}
.content-block .cta-wrapper{display: flex; justify-content: center;}


/* === Gallery === */
.gallery { max-width: min(1100px, 92vw); margin: 32px auto; text-align: center; }
.gallery__header h2 { text-align: center; font-size: 24px; color: #00579b; margin-bottom: 10px; }
.gallery__header p { margin: 0 0 18px; font-size: 14px;}
.gallery__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 25px; }
.tile { display: block; overflow: hidden; border-radius: 6px; cursor: pointer; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 2 over 3 Mosaic Layout */
.tile--big { grid-column: span 6; aspect-ratio: 16/9; }
.tile--small { grid-column: span 4; aspect-ratio: 4/3; }

/* Hover Effect */
@media (hover: hover) {
  .tile { overflow: hidden; border-radius: 6px; }
  .tile img { transition: transform .5s ease, filter .3s ease; will-change: transform; }
  .tile:hover img { transform: scale(1.03); filter: brightness(.97); }
}

/* Tablet */
@media (max-width: 900px) {
  .gallery__grid { grid-template-columns: repeat(6, 1fr); }
  .tile--big { grid-column: span 6; aspect-ratio: 16/9; }
  .tile--small { grid-column: span 3; aspect-ratio: 4/3; }
}

/* Mobile condensed 2-column + show full image */
@media (max-width: 600px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tile { grid-column: span 1; aspect-ratio: auto; }
  .tile img { height: auto; object-fit: contain; background: #f5f5f5; }
  .gallery__header p { margin-bottom: 12px; }
  .gallery__grid > .tile:first-child:nth-child(odd) {grid-column: 1 / -1;}
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
}
.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* Lightbox Controls */
.lb-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: #041d3b;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 32px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, transform .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.lb-btn:hover { background: #063067; transform: translateY(-50%) scale(1.03); }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-close {
  top: 24px;
  right: 24px;
  transform: none;
  font-size: 36px;
  font-weight: 700;
  background: #041d3b;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  line-height: 0;
  transition: background .3s, transform .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.lb-close:hover { background: #063067; transform: scale(1.03); }


/*.tablet-row {
  flex-direction: row !important;
}

.tablet-row-reverse {
  flex-direction: row-reverse !important;
}

@media (max-width:500px) {
  .tablet-row, .tablet-row-reverse {
    flex-direction: column-reverse !important;
  }
} */


.left{flex-direction: row-reverse;}
.left .image-wrapper{border-radius: 16px 0 0 16px !important;}
@media (max-width: 1024px) {
	.left{flex-direction: column-reverse;}
  .left .image-wrapper{border-radius: 16px 16px 0 0 !important;}
}
.features-grid{display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px; max-width: 1250px; margin: auto;}

@media (max-width: 1250px) {
	.features-grid{max-width: 95%;}
}

@media (max-width: 600px) {
	.features-grid{grid-template-columns: none;}
}

.underline{padding: 0; text-decoration: underline;}
.padding-0{padding: 0;}

.energy{width:max-content; font-family:Arial, sans-serif; font-size:14px; font-weight:bold; color:white; border-radius:6px;	overflow:hidden; box-shadow:0 0 3px rgba(0,0,0,0.2); cursor:pointer; margin:0 auto;}
.energy-top{display:flex; align-items:center; background-color:#77007e; padding:3px 12px;}
.energy-more{background-color:#bb0a7e !important;}
.energy-a-plus-plus{background-color:#bb0a7e !important;}
.energy-a{background-color: #1a5b9c;}
.energy-circle{background:white;color:black;width:22px;height:22px;border-radius:50%;display:flex;align-items:center; justify-content:center; margin-right:6px; font-weight:bold; font-size:18px}
.energy-bottom{background-color:#29292b;text-align:center;padding:0px 12px;font-weight:normal; font-size:12px}
.image-content-block .energy{box-shadow: none !important;}
.image-content-block .energy-image{padding: 16px 0;}

.bg-white{background: #FFFFFF;}
.bg-light-blue{background: #F1F6FE;}
.bg-blue{background: #164a9e;}
.bg-dark-blue{background: #041d3b;}
.bg-blue-tertiary{background: #2f4369;}
.bg-dark-blue a{color: #FFFFFF; text-decoration: underline;}
.bg-grey{background: #EEEEEE;}
.bg-brand-blue{background: #2f4369;}
.text-white{color: #FFFFFF;}

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

@media (max-width: 1024px) {
	.d-mob-none{display: none !important;}
}

.w-lg-70 {width: 70% !important; }
.w-lg-30 {width: 30% !important;}
.w-75 {width: 75% !important;}

@media (max-width: 1024px) {
	.w-lg-70 {width: unset !important;}
  .w-lg-30 {width: unset !important;}
}

@media (max-width: 600px) {
  .w-75 {width: unset !important;}
}

@media (max-width: 500px) {
	.w-75 {width: 100% !important;}
}

.best-price {
  flex-direction: row !important;
}

@media (max-width: 600px) {
  .best-price {flex-direction: column-reverse !important;}
}


.btn-blue {display: inline-block; font-family:opensansR, Tahoma, Geneva, sans-serif !important; background-color: #45a4f0;color: #fff !important;padding: 10px 24px;border: none;font-size: 20px;cursor: pointer;border-radius: 6px;transition: background-color .3s ease, transform .2s ease, box-shadow .2s ease;margin-left: 0;font-family: Arial, opensansR, Tahoma, Geneva, sans-serif;
}


.video-container {
    position: relative;
    width: 250px;
    cursor: pointer;
}

@media (max-width: 1024px) {
  .video-container {
      width: 100%;
      max-height: 400px;
  }
}

.video-container video {
    width: 100%;
    display: block;
}

@media (max-width: 1024px) {
  .video-container video {
      width: 100%;
      height: 330px;
      object-fit: cover;
  }
}



.custom-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: #041d3b;
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    line-height: 64px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background 0.2s;
    font-family: opensansR, Tahoma, Geneva, sans-serif;
}