:root {
  /* West Yorkshire CA brand tokens */
  --wyca-grey-mid: #dee2e6;
  --brand-navy: #17243D;
  --brand-teal: #00847E;
  --brand-green: #A2C617;
  --color-green-dark: #89a80e;
  --color-white: #ffffff;
}


.main-purpleColor {
  color: var(--brand-navy)
}

/* Hero headline — displayed above the sign-up button */
.hero-title {
  font-size: 2rem;
  color: var(--color-green-dark);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

#ls-padding h2.main-purpleColor {
  font-size: 2em;
}

.second-green-color {
  color: var(--color-green-dark)
}




@font-face {
    font-family: 'ProximaNova';
    src: url('../fonts/proximanova-light-webfont.eot');
    src: url('../fonts/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/proximanova-light-webfont.woff') format('woff'),
        url('../fonts/proximanova-light-webfont.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNova';
    src: url('../fonts/proximanova-regular-webfont.eot');
    src: url('../fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/proximanova-regular-webfont.woff') format('woff'),
        url('../fonts/proximanova-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNova';
    src: url('../fonts/proximanova-bold-webfont.eot');
    src: url('../fonts/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/proximanova-bold-webfont.woff') format('woff'),
        url('../fonts/proximanova-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}



body * {
  font-family: 'Source Sans 3', 'ProximaNova', sans-serif;
}

body {
  color: var(--brand-navy);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
}

html {
  font-size: 18px;
  overflow-x: hidden;
}

body * h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}


body * h2 {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
}

body * h3 {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
}

body * h4 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
}

body * h2,
body * h3,
body * h4,
body * h5 {
  color: var(--brand-navy);
}


body * a:not(.cta-primary):not(.cta-secondary) {
  color: var(--brand-navy);
  text-decoration: none;
}

body * a.inline-underlined-link {
  text-decoration: underline !important;
  color: var(--brand-teal);
}

a:not(.cta-primary):not(.cta-secondary):hover {
  text-decoration: underline;
}

p {
  margin: 0% !important;
  font-size: 1rem;
  line-height: 1.65;
}


.underlineGreyOne {
  box-shadow: 0px .3em 0px -3px #dee2e6
}


.backGound-grey {
  background-color: var(--brand-teal);
  color: var(--color-white);
}

.backGound-grey h1,
.backGound-grey h2,
.backGound-grey h3,
.backGound-grey h4,
.backGound-grey h5,
.backGound-grey p,
.backGound-grey a {
  color: var(--color-white) !important;
}


/* ===== BUTTONS — WYCA style ===== */
a.cta-primary,
.cta-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 18px 40px;
  border: 2px solid var(--brand-green) !important;
  color: var(--brand-navy) !important;
  background-color: var(--brand-green) !important;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none !important;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
  overflow: hidden;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  -webkit-font-smoothing: antialiased;
}

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

.cta-arrow-icon {
  width: 10px;
  height: 10px;
  /* Positioned absolutely so it doesn't affect text centering */
  position: absolute;
  right: 14px;
  top: 50%;
  opacity: 0;
  /* Starts slightly to the right, slides left on hover */
  transform: translateY(-50%) translateX(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.cta-arrow-icon path {
  stroke: currentColor;
}

a.cta-primary:hover,
.cta-primary:hover {
  border-color: var(--color-green-dark) !important;
  background-color: var(--color-green-dark) !important;
  color: var(--brand-navy) !important;
  text-decoration: none !important;
}

a.cta-primary:hover .cta-arrow-icon,
.cta-primary:hover .cta-arrow-icon {
  opacity: 1;
  transform: translateY(-50%) translateX(-75%);
}

a.cta-primary:focus-visible,
.cta-primary:focus-visible {
  outline: 3px solid var(--brand-green);
  outline-offset: 3px;
}

a.cta-primary:active,
.cta-primary:active {
  background-color: var(--color-green-dark) !important;
  border-color: var(--color-green-dark) !important;
  color: var(--brand-navy) !important;
  filter: brightness(0.9);
}


a.cta-secondary,
.cta-secondary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 18px 40px;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: var(--brand-navy) !important;
  color: var(--brand-navy) !important;
  background-color: transparent !important;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none !important;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
  overflow: hidden;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  -webkit-font-smoothing: antialiased;
}

a.cta-secondary:hover,
.cta-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--brand-navy) !important;
  color: var(--brand-navy) !important;
  text-decoration: none !important;
}

a.cta-secondary:hover .cta-arrow-icon,
.cta-secondary:hover .cta-arrow-icon {
  opacity: 1;
  transform: translateY(-50%) translateX(-75%);
}

a.cta-secondary:focus-visible,
.cta-secondary:focus-visible {
  outline: 3px solid var(--brand-green);
  outline-offset: 3px;
}

a.cta-secondary:active,
.cta-secondary:active {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--brand-navy) !important;
  color: var(--brand-navy) !important;
  filter: brightness(0.9);
}



.column-questions {
  display: flex !important;
  flex-direction: column !important;
}

.question-top-padding {
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}



.hidden {
  opacity: 0;
  display: none;
  transition: opacity 0.3s ease;
}

.visible {
  opacity: 1;
  display: block;
  transition: opacity 0.3s ease;
}


.text-padding-1 {
  padding-right: 20%;
}

@media screen and (max-width:700px) {
  .text-padding-1 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
}

.text-padding-2 {
  padding-right: 8%;
}

.arrow-padding{
  margin-top: 20px !important;
}

.arrow-padding-about{
    margin-top: 10px !important;
}


/* ///................Large Monitors screen adjust */
@media screen and (min-width:1920px) {
  .container-lg-screen {
    max-width: 1920px;
    margin: 0 auto;
  }
}

/* ///................Large Desktop/Monitor screen adjust */
@media screen and (max-width:2000px) and (min-width:1240px) {
  #ls-padding{
    padding-left:5%
  }
}

/* ///................Desktop/Monitor screen adjust */
@media screen and (max-width:1240px) and (min-width:1023px) {

    #ls-padding{
    padding-left:5%
  }
  .text-padding-1 {
    padding-right: 5%;
  }

  .text-padding-2 {
    padding-right: 2%;
  }

  .text-padding-3 {
    padding-left: 1rem !important
  }

  #text-padding-video {
    padding-left: 1rem !important
  }

  #text-padding-tt{
    padding-left:3% !important
  }

}


@media screen and (max-width:1023px) {

  .text-padding-1 {
    padding: 3% !important
  }

  #text-padding-tt{
    padding-left: 2% !important;
  }

  #text-padding-video {
    display: flex;
    justify-content: center;
    padding: 0% !important;
  }

  .mx-width {
    width: 100% !important
  }


  .mobile-header-column {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    padding: 0% !important;
  }


  #video-width{
    width:90%
  }


  div.footer-logos * img {
    max-width: 300px;
    width: 100%;
    padding: 0 10%;
    float: left;
  }

  div.footer-half-section-right,
  div.footer-half-section-left {
    position: relative !important;
    width: 100%;
    margin: 40px 0;
    right: 0%;
    left: 0%;
  }

  .footer-half-section-left * .col-2 {
    padding: 0;
    width: 15% !important;
  }

  .social-icons-footer {
    padding-left: 10px;
  }

  .logo-img-footer {
    order: 1;
  }

  .mrs-logo-footer {
    order: 2;
  }

}


@media screen and (min-width:700px) {
  #mobile-top-banner{
    display: none !important;
  }
}

/* Prevent mobile carousel from causing horizontal scroll */
#mobile-top-banner {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  position: relative;
}

#mobile-top-banner .carousel-inner {
  width: 100%;
  overflow: hidden;
}

/* Only constrain the image — do NOT override display on .carousel-item
   as Bootstrap toggles display:none/block to control slide visibility */
#mobile-top-banner .carousel-item img {
  width: 100%;
  max-width: 100%;
}

/* ///................Mobile screen adjust */
@media screen and (max-width:700px) {
  /* Footer improvements for mobile */
  div.footer-half-section-right,
  div.footer-half-section-left,
  div.footer-half-section-center {
    position: relative !important;
    left: 0% !important;
    right: 0% !important;
    text-align: center !important;
    margin: 20px 0 !important;
  }

  .social-icons-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding-left: 0 !important;
  }

  .social-icons-footer .col-2 {
    width: auto !important;
    flex: 0 0 auto;
  }

  .footer-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .footer-logos .row {
    width: 100%;
  }

  .footer-logos .col-6 {
    text-align: center;
    margin-bottom: 10px;
  }

  .footer-half-section-left * img {
    width: 30px !important;
  }

  .arrow-padding-about{
    margin-top: 20px !important;
}
  .arrow-padding{
  margin-top: 10px !important;
}


   #mx-width-fq {
    width: 100% !important;
    padding: 10% 0% 0% 0% !important
  }

  .padding-fq {
    padding: 2% 0% 0% 3% !important
  }

  #center-buttons{
    display:flex;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 15px;
  }

  #center-buttons .pe-4 {
    padding-right: 0 !important;
  }

  .cta-primary,
  .cta-secondary {
    min-width: 120px !important;
    padding: 12px 16px 12px 20px !important;
    font-size: 0.95rem !important;
    justify-content: center;
  }

  .padding-0{
    padding:0% !important
  }

  #desk-top-banner{
    display: none !important;
  }

  .text-padding-2 {
    padding: 0% !important;
  }

  .text-padding-3{
    padding-top: 1rem!important;
  }

  #text-padding-tt {
    padding-top: 1rem!important;
    padding-right: 1rem !important;
    padding-left: 1rem !important
  }



  body * .pb-5 {
    padding-bottom: 1rem !important
  }


  #video-width{
    width:90%
  }



}




/* ///..................Footer */

div.footer-half-section-right {
  position: absolute;
  right: 4%;
  text-align: center;
}

div.footer-half-section-left {
  position: absolute;
  left: 4%;
  text-align: left;
}

a.footer-link {
  color: var(--brand-navy);
  text-decoration: none;
  font-weight: normal;
  /*font-size: 0.8em;*/
}

.footer-half-section-left * img {
  width: 35px !important;
}

.footer-half-section-left * .col-2 {
  width: 10%;
}

.logo-img-footer,
.mrs-logo-footer {
  text-align: right;

}

div.hovIcon:hover {
            transform: scale(1.1);
          }

      /* Arrow toggle icons - replaces repeated inline style="width:22px" */
      .toggle-arrow-icon {
        width: 22px;
        transition: transform 0.3s ease;
      }

      /* Ensure question rows align icon and text on the same vertical axis. */
      a.toggle-arrow {
        align-items: center;
      }

      /* Keep FAQ arrow position stable while toggling visible/hidden states. */
      div.toggle-arrow.pe-4 {
        position: relative;
        width: 22px;
        min-width: 22px;
        height: 22px;
        flex: 0 0 22px;
        align-self: center;
        padding-right: 0 !important;
        margin-right: 1rem;
      }

      .toggle-arrow-icon[src*="faq-arrow-"] {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 22px;
        height: 22px;
        margin-top: 0 !important;
        display: block;
        transform: translate(-50%, -50%);
      }

      /* FAQ specific orientation: provided UP asset is right-pointing, so rotate it up. */
      .toggle-arrow-icon[src*="faq-arrow-up.svg"] {
        transform: translate(-50%, -50%) rotate(-90deg);
      }

/* ===== SITE HEADER ===== */
.site-header {
  background-color: var(--brand-navy);
  width: 100%;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px clamp(24px, 5%, 80px);
  min-height: 120px;
  gap: 28px;
  flex-wrap: nowrap;
  margin: 0 auto;
}

/* Logos group */
.site-header__logos {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-shrink: 0;
}

.site-header__logo-wyca {
  height: 76px;
  width: auto;
  display: block;
}

.site-header__logo-djs {
  height: 56px;
  width: auto;
  display: block;
}

/* Vertical divider between logos */
.site-header__divider {
  width: 1px;
  height: 56px;
  background-color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

/* Navigation links */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: center;
}

.site-header__nav-link {
  color: var(--color-white) !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 1.15rem;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.site-header__nav-link:hover {
   color: var(--brand-green) !important;
   opacity: 1;
  text-decoration: none !important;
}

/* CTA button group */
.site-header__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Inverted secondary button — white border/text on the navy header background */
a.site-header__cta-inverted,
.site-header__cta-inverted {
  border-color: var(--color-white) !important;
  color: var(--color-white) !important;
  background-color: transparent !important;
}

a.site-header__cta-inverted:hover,
.site-header__cta-inverted:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--color-white) !important;
  color: var(--color-white) !important;
}

/* Responsive: tablet — logos left, CTAs right, nav below spanning full width */
@media screen and (max-width: 900px) {
  .site-header__inner {
    flex-wrap: wrap;
    padding: 50px clamp(16px, 4%, 48px);
    min-height: unset;
    gap: 20px;
  }

  .site-header__logos {
    flex: 1;
    justify-content: flex-start;
  }

  .site-header__ctas {
    order: 2;
    flex-shrink: 0;
  }

  .site-header__nav {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }
}

/* Responsive: mobile — three centered rows: logos / buttons / nav */
@media screen and (max-width: 600px) {
  .site-header__inner {
    flex-direction: column;
    align-items: center;
    padding: 50px 20px;
    gap: 20px;
  }

  .site-header__logos {
    flex: unset;
    width: 100%;
    justify-content: center;
    order: 1;
  }

  .site-header__logo-wyca {
    height: 58px;
  }

  .site-header__logo-djs {
    height: 44px;
  }

  .site-header__divider {
    height: 48px;
  }

  .site-header__ctas {
    order: 2;
    width: 100%;
    justify-content: center;
    gap: 16px;
  }

  .site-header__nav {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .site-header__nav-link {
    font-size: 1rem;
  }
}