:root {
  /* Designs were in 1440px, so scale the user's elements to match. Multiply all sizes by this factor */
  /* --DESIGN-FACTOR: calc(99vw / 1440px);
  --RESPONSIVE-PHONE: 430px; */
  --body-color: #1B3868;
  --light-blue: #52CBFF;
  --dark-blue: #0D3050;
  --color-black: black;
  --white: #FAF9F4;
  --p-text: #00262b;
  --nav-text: #07263E;
  --color-black: black;
  --font-inter: 'Inter', sans-serif;
  --font-outfit: 'Outfit', sans-serif;
  --font-dm-sans: 'DM Sans', sans-serif;
  --font-onest: 'Onest', sans-serif;
  --animation-tilting-cards: .35s;
  --animation-text-panel: .35s;
} 


/* Function to calculate responsive size based on user screen width */
/* @function --responsive(--pixel_size) {
  result: calc(var(--pixel_size) * var(--DESIGN-FACTOR));
} */


/* Mobile */
@media (max-width: 768px) {

  .header-nav {
    display: none;
  }

  .header-ctas-phone-link {
    display: none;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width:768px){
    main {
    max-width: 720px;
  }

  .header-nav {
    display: none;
  }

  .header-ctas-phone-link {
    display: none;
  }
}

/* Small DT */
@media (min-width: 769px) and (max-width: 1024px){
  .header-mobile-menu-container {
    display: none;
  }

  .header-container-row {
    max-width: 960px;
    padding: 26px 0;
    margin: 0 auto;
  }
}

/* Normal DT */
@media (min-width: 1025px) and (max-width: 1440px){
  .header-mobile-menu-container {
    display: none;
  }

  .header-container-row {
    max-width: 1212px;
    padding: 26px 0;
    margin: 0 auto;
  }
}

/* Large DT */
@media (min-width: 1441px){

  .header-mobile-menu-container {
    display: none;
  }

  .header-container-row {
    max-width: 1440px;
    padding: 26px 0;
    margin: 0 auto;
  }
}

/* DEBUG */

.test-image {
  background-color: var(--dark-blue);
}

/* END DEBUG */

html {
  /* @media (max-width: 768px) { */
    overflow-x: clip;
  /* } */
  
}

body {
  margin: 0;
  font-family: var(--font-inter);
  color: var(--body-color);
  background-color: var(--white);
  overflow-x: clip;
}

main {
  width: max(1440px, 50vw);
  padding: 1rem 1.8rem;
  margin: 0 auto;
  /* margin-bottom: 50px; */


@media (min-width: 430px) and (max-width: 768px){
  width: min(430px, 72%);
  padding: 1rem;
}

  @media (min-width: 769px) and (max-width: 768px){
    width: min(720px, 93%);

  }

  @media (min-width: 769px) and (max-width: 1024px){
    width: min(960px, 95%);
    padding: 1rem 6.5rem;
  }

  @media (min-width: 1025px) and (max-width: 1440px){
    width: min(1200px, 85%);
  }

  @media (min-width: 1441px) and (max-width: 1920px){
    width: min(1280px, 70%);
  }

}

h1, h2, h3, h4, h5 {
  font-family: var(--font-outfit);
}

h1, h2, h3 {
  margin: 0;
}

a {
  font-family: var(--font-dm-sans);
  color: var(--body-color);
  text-decoration: none;
  font-weight: 600;
}

a.header-link{
  color: var(--nav-text);
}

p {
  font-family: var(--font-dm-sans);
  margin-block-start: --responsive(1rem);
  margin-block-end: --responsive(1rem);
  /*function up at the top*/
}

sup {
  font-size: 50%;
  vertical-align: 30%;
}

[type=button]:not(:disabled) {
  cursor: pointer;
}

/* Common */

.page-title {
  color: var(--dark-blue);
  font-family: var(--font-outfit);
  font-size: clamp(1.9rem, 45vw + 1rem, 4.75rem);
  font-weight: 900;
  line-height: 66px;
  letter-spacing: -1.52px;
  margin-bottom: 75px;
  padding-left: 105px;

}

.section-header {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: -1.35px;
  color: var(--dark-blue);

  /* @media (min-width: 769px) and (max-width: 1439px) {
    font-size: 34px;
    line-height: 38px;
  } */
}

.section-header-big {
  color: #061F32;
  font-family: var(--font-outfit);
  font-size: clamp(4.6rem, 40vw + 2rem, 4.6875rem);
  font-weight: 800;
  line-height: clamp(75px, 80px, 87px);
  letter-spacing: min(1.5, -1.8px);

}

.section-subheader {
  color: var(--color-black);
  font-family: var(--font-outfit);
  font-size: 25px;
  font-weight: 700;
  line-height: 29px;

  /* @media (min-width: 769px) and (max-width: 1439px) {
    font-size: 18px;
    line-height: 24px;
  } */
}

.section-subheader-blue {
  color: var(--dark-blue);
  font-family: var(--font-outfit);
  font-size: max(18px, 25px);
  font-weight: 500;
  line-height: max(24px, 29px);

}

.section-paragraph-text {
  color: var(--color-black);
  font-size: max(15px, 18px);
  line-height: max(22px, 28px);
  margin: 0;
/* 
  @media (max-width: 768px) {
    font-size: 16px;
  }

  @media (min-width: 769px) and (max-width: 1439px) {
    font-size: 15px;
    line-height: 22px;
  } */
}

.jpl-trademark {
  position: relative;
  font-size: 25px;
  top: -16px;
}

.jpl-hero-section-button {
  width: 260px;
  height: 57px;
  justify-content: center;
  align-items: center;
  background-color: var(--dark-blue);
  color: var(--white);
  gap: 8px;
  border-radius: 4px;
  font-weight: 400;

  @media (max-width: 768px) {
    width: 100%;
  }
}

.button-blue {
  background-color: var(--dark-blue);
  border-radius: 4px;
}

.button-light-blue {
  background-color: var(--light-blue);
  border-radius: 4px;
}

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


.container-row {
  display: flex;
  flex-direction: row;
}

.container-column {
  display: flex;
  flex-direction: column;
}

/* End Common */

/* BACKGROUNDS */
.background-container {
  position: relative;
  z-index: -10;
  left: calc((100vw - 1440px)/2);
  top: -66px;
}

.background-main-gradient {
  position: absolute;
  top: -89px;
  /* left: calc((100vw - 1440px)/2 - 256px) ; */
  left: -256px;
  width: 1615px;
  height: 688px;
  rotate: -10.257deg;
  border-radius: 1615px;
  background: linear-gradient(180deg, rgba(82, 203, 255, 0.25) 34.62%, rgba(167, 245, 136, 0.25) 100%);
  filter: blur(150px);

  @media (max-width: 768px) {
    top: -192px;
  }
}

.background-top-curves {
  position: absolute;
  background: url(/_assets/_redesign/svgs/jpl_top_curves2.svg);
  background-repeat: no-repeat;
  top: -924px;
  left: -2777px;
  width: 7154.315px;
  height: 2593.095px;
  opacity:.4;

  @media (max-width: 768px) {
    top: -1150px;
  }
}

.jpl-graphic-parent {
  position: relative;
}

.footer-background-container {
  position: relative;
  z-index: -10;
}

.footer-background-parent {
  position: absolute;
  width: 100%;
  height: 1823px;
  top: -1330px;
  overflow: hidden;
}

.footer-background {
  position: absolute;
  width: 100vw;
  height: 100%;
  /* left: calc((100vw - 1440px)/2 - 450px); */
  background: linear-gradient(0deg, #52CBFF 8.51%, rgba(206, 236, 246, 0.25) 72.29%, rgba(18, 94, 152, 0.00) 100%);
}

/* HEADER */

header {
  position: sticky;
  top: 0;
  z-index: 10;

  @media (max-width: 768px) {
    position: initial;
  }
}

.header-container-row {
  width: 100%;
  justify-content: space-between;
  align-items: center;

  @media (max-width: 768px) {
    justify-content: center;
    gap: 15px;
    max-width: 430px;
    padding: 15px 0;
    margin: 0 auto;
  }

  @media (min-width: 769px) {
    box-sizing: border-box;
    padding: 8px 107px;
    max-width: 100%;
  }

}

.header-logo-link {
  /* @media (max-width: 768px) { */
    z-index: 10;
  /* } */
}

.header-logo {
  width: 178px;

   @media (max-width: 768px) {
    width: min(135px, 155px);
  }

}

/* .header-nav {

} */

.header-link-list {
  list-style-type: none;
  padding-inline-start: 0;
}

.header-link {
  padding: 0 17px;
  font-size: .875rem;
  font-weight: 600;

  /* @media (min-width: 769px) and (max-width: 1023px) {
    font-size: 1.5625px;
    padding: 0 12px;
  } */
}

.header-ctas-phone-link {
  padding-right: 30px;
}

.header-phone-icon {
  padding-top: 8px;
  width: 16px;
}

.header-phone-box-container {
  position: relative;
}

.header-phone-box-content {
  visibility: hidden;
  position: absolute;
  display: block;
  opacity: 0;
  z-index: 1;
  top: 20px;
  width: 203px;
  height: 73px;
  transition: visibility .2s, opacity .2s;
}

.header-phone-box-text {
  position: absolute;
  width: 172px;
  height: 41px;
  top: 20px;
  left: -66px;
}

.header-phone-text-number {
  font-weight: 600;
  color: var(--dark-blue);
  font-size: 20px;
  line-height: 18px;
}

.header-phone-text-availability {
  font-size: 11px;
  line-height: 18px;
}

.header-phone-box {
  position: absolute;
  top: 10px;
  width: 203px;
  left: -93.5px;
}

.header-phone-carrot {
  position: absolute;
}

.header-ctas-phone-link:hover + .header-phone-box-container .header-phone-box-content {
  visibility: visible;
  opacity: 1;
}

.header-ctas {
  justify-content: center;
  align-items: center;
  gap: 0;

  /* @media (max-width: 768px) { */
    z-index: 10;
  /* } */
}

.header-ctas-button {
  justify-content: center;
  align-items: center;
  width: 202px;
  height: 40px;
  padding: 0 5px;

  @media (max-width: 768px) {
    width: 168px;
    height: 34px;
  }
}

.header-ctas-text {
  font-size: clamp(.6825rem, .75rem, .875rem);
  font-weight: 600;
  color: var(--white);
}

.header-ctas-envelope-container {
  padding-left: 8px;
  padding-top: 2px;

  @media (max-width: 768px) {
    padding-top: 0;
  }
}

.header-ctas-envelope-icon {
  width: 20px;

  @media (max-width: 768px) {
    width: 12px;
  }
}

.header-ctas-button:hover {
  background-color: var(--dark-blue);
  color: var(--white);

  .header-ctas-envelope-inactive {
    display: none;
  }

  .header-ctas-envelope-active {
    display: inline;
  }
}

.header-ctas-envelope-active {
  display: none;
}

/* .header-mobile-menu-container {
  
} */

.header-mobile-menu {
  z-index: 11;
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  width: 100vw;
  max-height: 100vh;
  height: 100%;
  background-color: var(--dark-blue);
  border-radius: 4px;
  background-image: url(/_assets/_redesign/svgs/mobile_menu_graphic.svg);
  background-repeat: no-repeat;
  background-position: right 50%;
}

.header-mobile-menu-hidden {
  display: none;
}

.header-mobile-menu-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 27px 0 23px;
}

.header-mobile-menu-header-logo {
  width: 155px;
  height: 34px;
}

.header-mobile-menu-header-link {
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background-color: var(--light-blue);
  border-radius: 4px;
}

.header-mobile-menu-header-link-icon {
  width: 12px;
  height: 9px;
}

.header-mobile-menu-header-link-text {
  color: #061F32;
  font-family: var(--font-dm-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
}

.header-mobile-menu-header-close-icon {
  width: 19px;
  height: 19px;
}

.header-mobile-menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  padding: 55px 0 0 36px;
  gap: 38px;
}

.header-mobile-menu-link {
  color: var(--white);
  font-family: var(--font-outfit);
  font-size: 25px;
  font-weight: 400;
  line-height: 18px;
}

.header-mobile-menu-call-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  padding: 26px 36px;
  border-radius: 4px;
  border: 1px solid #7F7E88;
  background-color: var(--dark-blue);
}

.header-mobile-menu-button-container {
  margin-top: auto;
  padding: 0 23px;
}

.header-mobile-menu-button-text {
  color: var(--white);
  font-family: var(--font-dm-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
}

/* .header-mobile-menu-phone-icon {

} */

.header-mobile-menu-end-text-container {
  padding: 20px 0;
  text-align: center;
}

.header-mobile-menu-end-text {
  color: rgba(240, 239, 236, 0.80);
  font-family: var(--font-dm-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}


/* FOOTER */

footer {
  background-color: #0D3050;
}

.footer-container {
  max-width: 100vw;
  margin: 0 auto;
  padding: 0 30px;
}

.footer-main-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 63px 0;
  justify-content: space-evenly;

  @media (max-width: 768px) {
    flex-direction: column;
    padding-top: 63px;
    padding-bottom: 30px;
  }
}

.footer-left-container {
  gap: 20px;
  justify-content: space-between;
  padding: 0 2rem;

  @media (max-width: 768px) {
    gap: 45px;
    padding: 0;
  }
}

.footer-log-image {
  max-width:214px;

  @media (max-width: 768px) {
    /* width: 335px; */
  }
}

.footer-tagline-img {
  width: 214px;

  @media (max-width: 768px) {
    width: 307px;
  }
}

.footer-talk-button {
  width: 202px;
  height: 42px;
  justify-content: center;
  align-items: center;

  @media (max-width: 768px) {
    width: 100%;
    height: 57px;
  }
}


.footer-talk-button-text {
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;

  @media (max-width: 768px) {
    font-size: 16px;
  }
}

.footer-talk-button-icon {
  width: 20px;
  padding-left: 8px;
}

.footer-talk-button-icon-active {
  display: none;
}


.footer-social-icon-row {
  justify-content: space-between;
  width: 244px;
  gap: 16px;
}

.footer-social-icon {
  width: 36px;
}

.footer-nav-link-column {
  justify-content: space-between;
  gap: 20px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.footer-nav-link {
  color: var(--white);
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;

  @media (max-width: 768px) {
    font-size: 18px;
    font-weight: 400;
  }
}

.footer-disclaimers {
  max-width: 805px;
  padding: 0 20px;
  padding-top: 35px;

  @media (max-width: 768px) {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    padding-top: 35px
  }
}

.footer-disclaimer-text {
  color: #F0EFEC;
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 18px;
}

.footer-bold-disclaimer-text {
  color: var(--white);
  font-weight: 700;
}

.footer-line-break {
  display: block;
  /* max-width: 1220px; */
  height: 1px;
  /* padding: 0 110px; */

  @media (max-width: 768px) {
    padding: 0;
  }
}

.footer-legal-links-container {
  display:flex;
  justify-content: center;
  /* padding-left: 110px;
  padding-right: 110px; */
  padding-top: 20px;
  padding-bottom: 40px;

  @media (max-width: 768px) {
    /* padding: 25px 0 70px 0; */
    gap: 40px;
  }
}

.footer-legal-image {
  height: auto;

  @media (max-width: 768px) {
    width: 70px;
    height: 72px;
  }
}

.footer-legal-links {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 40px;
  gap: 4px;

  @media (max-width: 768px) {
    padding: 0;
    flex-direction: column;
    justify-content: left;
    align-items: normal;
    gap: 14px;
  }
}

.footer-legal-text {
  color: var(--white);
  font-size: 14px;

  @media (min-width: 769px) {
    font-size: 12px;
  }
}

.footer-legal-link {
  color: var(--white);
  font-family: var(--font-onest);

  @media (max-width: 768px) {
    font-weight: 400;
  }
}

.footer-legal-links-break-bar {
  @media (max-width: 768px) {
    display: none;
  }
}

/* OTHER / COMPONENTS */


/* Testimonial Component */
.jpl-testimonial-component-container {
  display: flex;
  padding-top: 55px;
  

  @media (min-width: 769px) {
    justify-content: center;
  }
}

.jpl-testimonial-text-container {
  position: relative;
  left: 150px;
  width: 100%;
  max-width: 737px;
  min-height: max-content;
  background-color: white;
  border-radius: 24px;
  padding: 60px 0;
  box-shadow: 0 25px  50px -12px rgba(0, 0, 0, 0.25);

  @media (max-width: 768px) {
    left: 0;
    margin: 250px 0 0 0;
  }

}

.jpl-testimonial-right .jpl-testimonial-text-container {

  @media (min-width: 769px) {
    left: -130px;
  }
}

.jpl-testimonial-text-content {
  display: none;
  padding: 0 40px 0 156px;

  @media (max-width: 768px) {
    padding: 232px 17px 30px 25px;
  }
}

.jpl-testimonial-right .jpl-testimonial-text-content {
  @media (min-width: 1200px) {
    padding: 0 150px 0 66px;
  }
}

.jpl-testimonial-text-heading {
  font-size: 45px;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: -1.2px;
  margin-bottom: 22px;
  color: var(--dark-blue);
}

.jpl-testimonial-text {
  color: var(--color-black);
  font-size: 1rem;
  line-height: 1.25rem;
  margin-bottom: 22px;
  
  @media (max-width: 768px) {
    margin: 19px 0;
  }
}

.jpl-testimonial-small-text-container {
  color: var(--dark-blue);
  font-family: var(--font-outfit);
  font-size: 12px;
  line-height: 24px;
}

.jpl-testimonial-small-text-bold {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: var(--dark-blue);
}

/* .jpl-testimonial-small-text {

} */

.jpl-testimonial-card-cards-container {
  position: absolute;
  
  @media (min-width: 769px) {
    left: calc(50vw - 480px);
  }

}

.jpl-testimonial-right .jpl-testimonial-card-cards-container {
  @media (min-width: 769px) {
    left: calc(50vw + 170px);
  }
}

.jpl-testimonial-card-stack {
  position: relative;
  top: -16px;
  /* left: 220px; */

  @media (max-width: 768px) {
    top: -10px;
    left: 0px;
  }
}

.jpl-testimonial-card {
  position: absolute;
  width: 339px;
  aspect-ratio: 339 / 430;
  border-radius: 15px;
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;

  @media (max-width: 768px) {
    width: 330px;
    border-radius: 10px;
  }

}

.jpl-testimonial-card-1 {
  /* background-color: blue; */
  top: -10px;
  left: -35px;

  @media (max-width: 768px) {
    top: -10px;
    left: 10px;
  }
}

.jpl-testimonial-card-2 {
  top: -10px;
  left: 30px;

  @media (max-width: 768px) {
    top: -28px;
    left: 20px;
  }
}

.jpl-testimonial-card-3 {

  @media (max-width: 768px) {
    /* top: 10px; */
    left: 20px;
  }
}

.jpl-testimonial-card-background {
  width: 100%;
  height: 100%;
  background-size: cover;
  background: linear-gradient(rgba(122, 164, 153, .7), rgba(122, 164, 153, .7));
}

.jpl-testimonial-slider-container {
  position: absolute;
  top: 430px;
  left: 60px;

  /* @media(max-width:1024px){
    left:50%;
    transform:translateX(-50%);
  } */

}

/* Text Panel Component */
.jpl-text-panel-container {
  gap: 12px;
}

.jpl-text-panel {
  border-color: #52CBFF;
  border: 1px;
  border-radius: 15px;
  box-shadow: 0px 4px 17px 0px #52CBFF40;
  background-color: white;
  color: var(--body-color);
  cursor: pointer;
  transition: background-color var(--animation-text-panel), color var(--animation-text-panel);
}

.jpl-text-panel-active {
  color: white;
  background-color: var(--dark-blue);
  cursor: default;
}

.jpl-text-panel-content {
  justify-content: space-between;
  max-height: 91px;
  padding: 30px;
  overflow: hidden;
  transition: max-height var(--animation-text-panel);
}

.jpl-text-panel-content-active {
  max-height: fit-content;
}

.jpl-text-panel-text-container {

  @media (max-width: 768px) {
    gap: 26px;
  }
}

.jpl-text-panel-header {
  font-weight: 700;
  font-size: 25px;
  line-height: 29px;
}

/* .jpl-text-panel-header-active {
  
} */

.jpl-text-panel-text {
  color: white !important;
  font-size: 18px;
  line-height: 28px;
  margin-top: 30px;

  @media (max-width: 768px) {
    font-weight: 400;
    font-size: 16px;
  }
}

.jpl-text-panel-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: align-items var(--animation-text-panel);
}

.jpl-text-panel-image-container-active {
  align-items: start;
}

.jpl-text-panel-icon-hidden {
  display: none;
}

.jpl-text-panel-open-icon {
  width: 15px;
  min-width: 15px;
}

.jpl-text-panel-close-icon {
  padding-top: 8px;
  width: 15px;
  min-width: 15px;
  cursor: pointer;
}


/* Tilting Cards component */
.jpl-tilting-cards-component {
  width: 100%;

  @media (max-width: 768px) {
    overflow: hidden;
  }

}

.jpl-tilting-cards-cards-container {
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 30px;

  @media (max-width: 768px) {
    justify-content: start;
    flex-wrap: nowrap;
    width: 5000px;
  }
}

.jpl-tilting-cards-nowrap {
  flex-wrap: nowrap;
}

.jpl-tilting-cards-card {
  width: 266px;
  min-width: 266px;
  height: 255px;
  min-height: 255px;
  background-color: #FCFDFC;
  border: 1px solid;
  border-color: #52CBFF;
  border-radius: 15px;
  box-shadow: 0px 4px 17px 0px #52CBFF40;
  cursor: pointer;
  transition: background-color var(--animation-tilting-cards), rotate var(--animation-tilting-cards);

  @media (min-width: 769px) {
    width: 230px;
    min-width: 230px;
    height: 230px;
    min-height: 230px;
  }
}

.jpl-tilting-cards-card-active {
  rotate: -1deg;
  background-color: var(--dark-blue);
  cursor: default;
}

.jpl-tilting-cards-card-content {
  padding: 29px 28px;
  gap: 16px;
  color: var(--dark-blue);
  transition: color var(--animation-tilting-cards);

  @media (min-width: 769px) {
    padding: 10px 20px;
    gap: 12px;
  }
}

.jpl-tilting-cards-card-content-big {
  padding-top: 50px;

  @media (min-width: 769px) and (max-width: 1439px) {
    padding-top: 48px;
  }
}

.jpl-tilting-cards-card-content-active {
  color: var(--white);
}

.jpl-tilting-cards-card-image-container {
  display: flex;
  justify-content: end;
}

.jpl-tilting-cards-card-image {
  opacity: 0;
  width: 62px;
  min-width: 62px;
  margin-left: auto;
  transition: opacity var(--animation-tilting-cards);

  @media (min-width: 769px) {
    width: 60px;
    min-width: 60px;
  }
}

.jpl-tilting-cards-icon-one {
  width: 62px;
  height: 60px;
  fill: #52CBFF;
  stroke-width: 0.3px;
  stroke: #52CBFF;

  @media (min-width: 769px) {
    width: 30px;
    min-width: 30px;
    height: 31px;
  }

}

.jpl-tilting-cards-card-image-active {
  opacity: 1;
}

.jpl-tilting-cards-card-header {
  font-family: var(--font-outfit);
  font-weight: 700;
  font-size: 25px;
  line-height: 29px;

  @media (min-width: 769px) {
    font-size: 20px;
  }
}

.jpl-tilting-cards-card-header-big {
  font-family: var(--font-outfit);
  font-size: 45px;
  font-weight: 800;
  line-height: 29px;

  @media (min-width: 769px) {
    font-size: 36px;
  }
}

.jpl-tilting-cards-card-text {
  font-family: var(--font-dm-sans);
  margin: 0;
  font-size: 14px;
  line-height: 19px;

  @media (min-width: 769px) {
    font-size: 12px;
  }
}

.jpl-tilting-cards-card-text-big {
  font-family: var(--font-outfit);
  font-size: 25px;
  font-weight: 700;
  line-height: 29px;

  @media (min-width: 769px) {
    font-size: 19px;
  }
}

.jpl-tilting-cards-slider-container {
  display: none;
  margin-top: 40px;

  @media (max-width: 1024px) {
    display: inline-flex;
    justify-content: center;
  }
}


/* Accolades Component */
.jpl-accolades-container {
  overflow: hidden;
  margin: 55px 0 75px;
}

.jpl-accolades-accolades-container {
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;


  @media (max-width: 768px) {
    justify-content: start;
    width: 5000px;
    gap: 0px;
    /* translate: -65px; */
  }

}

/* .jpl-accolades-award-icon-container {

} */

.jpl-accolades-item-container {
  padding: 0 4px;

  @media (max-width: 768px) {
    padding: 0;
    width: 500px;
  }
}

.jpl-accolades-accolade-one-container {
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.jpl-accolades-accolade-one-text {
  font-weight: 500;
  font-size: 25px;
  line-height: 34px;
}

.jpl-accolades-text {
  font-family: var(--font-outfit);
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
}

.jpl-accolades-text-small {
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 2.1px;
  font-weight: 400;

  @media (min-width: 769px){
    max-width: 220px;
  }
}

.jpl-accolades-small-width {
  max-width: 159px;
  max-height: 50px;
  width: 100%;
}

.jpl-accolades-text-column {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jpl-accolades-accolade-two-container,
.jpl-accolades-accolade-three-container {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.jpl-accolades-accolade-two-top-text,
.jpl-accolades-accolade-three-top-text {
  font-size: 15px;
  letter-spacing: 15%;
} 

.jpl-accolades-accolade-two-bottom-text,
.jpl-accolades-accolade-three-bottom-text {
  font-weight: 500;
  font-size: 20px;
  line-height: 34px;
}

.jpl-accolades-star-accolade-container {
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.jpl-accolades-star-accolade-text {
  width: 160px;
  font-weight: 500;
  font-size: 20px;
  
}

.jpl-accolades-award-image, .jpl-accolades-star-image {
  width: 33px;
}

.jpl-accolades-leaf-image {
  width: 27px;
}

.jpl-accolades-slider-container {
  display: none;
  padding: 16px 0;

  @media (max-width: 768px) {
    display: block;
  }
}




/* Standard Carousel */
.jpl-standard-carousel-parent-container {
  width: calc(100% + (100vw - 100%) / 2);
  margin-right: calc((100vw - 100%) / -2);
  overflow: hidden;

  @media (max-width: 768px) {
    margin-right: 0;
    margin-left: calc(-50vw + 50%);
  }
}


.jpl-standard-carousel-component{
  border-radius: 15px 0 0 15px;
  overflow: hidden;
}
@media (max-width: 768px){
  .jpl-standard-carousel-component{
    border-radius: 0;
    overflow:hidden;
  }
}

.jpl-standard-carousel-container {
  gap: 22px;
}

.jpl-standard-carousel-display {
  max-width: 700px;
  width: 100%;
  overflow-x: visible;

  @media (max-width: 768px) {
    overflow: hidden;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }
}

.jpl-standard-carousel {
  position: relative;
  width: fit-content;
  padding-left: 50px;
  gap: 28px;
  left: -597px;

  @media (max-width: 768px) {
    padding-left: 0;
  }
}

.jpl-standard-carousel-item {
  width: 597px;
  height: 445px;
  border-radius: 15px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  
}

.jpl-standard-carousel-slider-container {
  display: none;

}




/* Slider */
.slider-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 13px;
  position:absolute;

/* @media (max-width: 1024px){
  max-width:max-content;
  left: 50vw;
  transform: translateX(-20vw);
} */

}

.slider-chevron {
  width: 28px;
  height: 28px;
}

.slider-chevron:hover, .slider-circle:hover {
  cursor: pointer;
}

.slider-chevron-left::before {
  content: url("/_assets/_redesign/svgs/chevron_left.svg");
}

.slider-chevron-right::before {
  content: url("/_assets/_redesign/svgs/chevron_right.svg");
}

.slider-circle-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 7px;
}

.slider-circle {
  width: 13px;
  height: 13px;
  border-radius: 13px;
  border: 1px solid var(--dark-blue);
  background-color: var(--white);
}

.slider-circle-active {
  background-color: var(--dark-blue);
} 

/* 
RESPONSIVE ENHANCEMENTS
Breakpoints: 768px / 1024px / 1920px / 2560px
These overrides preserve the existing layout and use existing classes only.
*/

*, *::before, *::after {
  box-sizing: border-box;
}

img, svg, video, iframe {
  max-width: 100%;
}

button,
input,
select,
textarea {
  max-width: 100%;
}

/* 768px and below - MB - retain the existing mobile composition, but make sizing
   fluid enough to prevent clipping at 431-768px widths. */
@media (max-width: 768px) {
  main {
    width: 100%;
    max-width: 430px;
    padding: 16px 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .page-title {
    max-width: 100%;
    padding-left: 0;
    margin-bottom: 48px;
    font-size: clamp(2.35rem, 9vw, 3.5rem);
    line-height: 1.05;
  }

  .section-header {
    font-size: clamp(1.9rem, 7vw, 2.8rem);
    line-height: 1.12;
  }

  .section-paragraph-text {
    font-size: 16px;
    line-height: 1.6;
  }

  .header-container-row {
    width: 100%;
    padding: 14px 20px;
  }

  .header-logo {
    width: min(155px, 42vw);
    height: auto;
  }

  .header-ctas-button {
    min-height: 40px;
  }

  .header-mobile-menu-icon {
    width: 24px;
    height: 24px;
  }

  .jpl-hero-section-button,
  .hero-section-button,
  .section-three-text-container-cta,
  .section-seven-text-container-cta,
  .section-eight-text-container-cta,
  .submit-button {
    min-height: 48px;
  }

  /* .jpl-tilting-cards-component,
  .jpl-standard-carousel-parent-container,
  .jpl-accolades-container {
    min-width: 100vw;
  } */

  .jpl-tilting-cards-card {
    max-width: calc(100vw - 40px);
  }

  .jpl-testimonial-text-container {
    max-width: 100%;
  }

  .form-input,
  .form-textarea {
    font-size: 16px;
  }
}

/* 769-1024px - TB - Keep content multi-column where it fits,
   otherwise use the existing mobile/menu flow rather than allowing the
   desktop navigation or fixed-width content to wrap. */
@media (min-width: 769px) and (max-width: 1024px) {
  main {
    width: 100%;
    max-width: 960px;
    padding: 20px 28px;
  }

  .header-container-row {
    max-width: 960px;
    padding: 18px 28px;
    margin: 0 auto;
    gap: 18px;
  }

  .header-nav,
  .header-ctas-phone-link,
  .header-phone-container {
    display: none;
  }

  .header-mobile-menu-container {
    display: block;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .header-mobile-menu-icon {
    display: block;
    width: 26px;
    height: 26px;
  }

  .header-ctas {
    margin-left: auto;
  }

  .header-ctas-button {
    width: 180px;
    min-height: 42px;
  }

  .header-link-list {
    flex-wrap: nowrap;
  }

  .page-title {
    padding-left: 0;
    margin-bottom: 56px;
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 1.05;
  }

  .section-header {
    font-size: clamp(2.1rem, 4vw, 2.8rem);
    line-height: 1.12;
  }

  .section-paragraph-text {
    font-size: 17px;
    line-height: 1.6;
  }

  .jpl-tilting-cards-cards-container {
    justify-content: center;
    gap: 24px;
  }

  .jpl-tilting-cards-card {
    width: 220px;
    min-width: 220px;
    height: 230px;
    min-height: 230px;
  }

  .jpl-tilting-cards-card-content {
    padding: 18px 20px;
  }

  .jpl-tilting-cards-card-header {
    font-size: 19px;
    line-height: 1.2;
  }

  .jpl-tilting-cards-card-header-big {
    font-size: 34px;
  }

  .jpl-tilting-cards-card-text {
    font-size: 12px;
    line-height: 1.45;
  }

  .jpl-accolades-accolades-container {
    max-width: 820px;
    gap: 30px;
  }

  .jpl-standard-carousel-display {
    max-width: 100%;
  }

  .jpl-standard-carousel-item {
    width: min(56vw, 520px);
    height: auto;
    aspect-ratio: 597 / 445;
  }

  .jpl-standard-carousel {
    left: -430px;
  }

  .jpl-testimonial-text-container {
    left: 0;
    max-width: 640px;
    margin: 420px auto;
  }



  .jpl-testimonial-card-cards-container,
  .jpl-testimonial-right .jpl-testimonial-card-cards-container {
    left: calc(50vw - (418px / 2));
  }



  /* .jpl-testimonial-card-cards-container,
  .jpl-testimonial-right .jpl-testimonial-card-cards-container {
    left: 30px;
  } */

  .jpl-testimonial-text-content {
    padding: 45px;
  }

  .footer-main-container {
    gap: 40px;
  }

  .footer-left-container {
    padding: 0 20px;
  }

  .footer-disclaimers {
    max-width: 600px;
  }
}

/* 1025-1919px - DT */
@media (min-width: 1025px) and (max-width: 1919px) {
  main {
    width: 100%;
    max-width: 1280px;
    padding: 24px 32px;
  }

  .header-container-row {
    max-width: 1280px;
    padding: 18px 32px;
    margin: 0 auto;
  }

  .header-link {
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
  }

  .header-ctas-phone-link {
    padding-right: 18px;
  }

  .page-title {
    padding-left: 0;
    font-size: clamp(3.8rem, 5vw, 4.75rem);
  }

  .jpl-tilting-cards-cards-container {
    justify-content: center;
    gap: 26px;
  }

  .jpl-tilting-cards-card {
    width: 230px;
    min-width: 230px;
  }

  .jpl-standard-carousel-item {
    max-width: 597px;
    /* width: 100%; */
    height: auto;
    aspect-ratio: 597 / 445;
  }

  .footer-container {
    max-width: 1440px;
  }
}

/* 1920-2559px - DT LG*/
@media (min-width: 1920px) and (max-width: 2559px) {
  main {
    width: 100%;
    max-width: 1440px;
    padding: 28px 40px;
  }

  .header-container-row {
    max-width: 1440px;
    padding: 20px 40px;
    margin: 0 auto;
  }

  .header-link {
    padding-left: 14px;
    padding-right: 14px;
  }

  .page-title {
    padding-left: 0;
    font-size: 4.75rem;
  }

  .jpl-tilting-cards-cards-container {
    justify-content: center;
    gap: 30px;
  }

  .jpl-tilting-cards-card {
    width: 240px;
    min-width: 240px;
    height: 240px;
    min-height: 240px;
  }

  .jpl-standard-carousel-item {
    width: 597px;
    height: 445px;
  }

  .footer-container {
    max-width: 1600px;
  }
}

/* 2560px DT XLG */
@media (min-width: 2560px) {
  main {
    width: 100%;
    max-width: 1600px;
    padding: 32px 48px;
  }

  .header-container-row {
    max-width: 1600px;
    padding: 22px 48px;
    margin: 0 auto;
  }

  .header-link {
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-title {
    padding-left: 0;
    font-size: 5rem;
  }

  .jpl-tilting-cards-cards-container {
    gap: 34px;
  }

  .jpl-tilting-cards-card {
    width: 250px;
    min-width: 250px;
    height: 250px;
    min-height: 250px;
  }

  .footer-container {
    max-width: 1760px;
  }
}