:root {
    /* Geneco */
    --geneco-blue: #001489;
    --geneco-green: #2dc84c;
    --green: #2dc84c;
    --geneco-light-blue: #4ba6de;
    --geneco-light-green: #4dc2b3;
    --geneco-grey: #636569;
    --geneco-light-grey: #F5F5F5;

    /* Stack and Save */
    --ss-dark-teal: #36b2b9;
    --ss-light-teal: #86d1d5;
    --ss-blue: #4894ce;

    --white: #ffffff;
    --dark-blue: #0b2d53;

    --bg-color-1: #FCF8EB;
    --bg-color-2: #F07DA5;

    --gold-dark: #866e49;

    scroll-behavior: auto;
}

/* **** TEXT **** */

@font-face {
    font-family: "Soho Pro Bold";
    src: url("https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/repository/fonts/SohoPro-Bold.woff") format("woff"),
        url("https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/repository/fonts/SohoPro-Bold.otf") format("otf"),
        url("https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/repository/fonts/SohoPro-Bold.eot") format("eot");
    font-display: swap;
}

.soho {
    font-family: "Soho Pro Bold", "Times New Roman", Times, serif !important;
    font-weight: bold;
}

/* Text colours */
.text-white {
    color: #fff;
}

.text-geneco-green {
    color: var(--geneco-green);
}

.text-geneco-blue {
    color: var(--geneco-blue);
}

.text-geneco-grey {
    color: var(--geneco-grey);
}

/* Text gradient */
.text-gradient-gold-dld {
    background: linear-gradient(to right, #a7824f, #f5d5a3, #a7824f);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-gold-ldld {
    background: linear-gradient(to right, #FDDDAB, #BE9469, #FDDDAB, #BE9469);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dollar-sign {
    font-size: 0.7em;
}


@media (min-width: 992px) {
.text-lg-left {
  text-align: left !important;
}
}


/* **** BODY **** */

body {
    font-family: 'Titillium Web', sans-serif !important;
    font-size: 1rem;
    overflow-x: hidden;
}


/* **** Z-INDEX **** */

.z-index-0 {
    z-index: 0;
}
.z-index-1 {
    z-index: 1;
}
.z-index-2 {
    z-index: 2;
}



/* **** BACKGROUNDS **** */

.bg-geneco-blue {
    background-color: var(--geneco-blue);
}
.bg-geneco-green {
    background-color: var(--geneco-green);
}

.bg-gradient-gold {
    background: rgb(253, 221, 171) !important;
    background: linear-gradient(90deg, rgba(253, 221, 171, 1) 0%, rgba(212, 174, 128, 1) 8%, rgba(194, 153, 109, 1) 16%, rgba(190, 148, 105, 1) 28%, rgba(212, 174, 128, 1) 45%, rgba(253, 221, 171, 1) 58%, rgba(217, 183, 132, 1) 74%, rgba(189, 154, 103, 1) 80%, rgba(172, 136, 85, 1) 95%, rgba(167, 130, 79, 1) 100%) !important;
}
.header.bg-gradient-gold {
    background: rgb(253, 221, 171) !important;
    background: linear-gradient(90deg, rgba(253, 221, 171, 1) 0%, rgba(212, 174, 128, 1) 8%, rgba(253, 221, 171, 1) 22%, rgba(212, 174, 128, 1) 45%, rgba(253, 221, 171, 1) 58%, rgba(217, 183, 132, 1) 74%, rgba(189, 154, 103, 1) 80%, rgba(172, 136, 85, 1) 95%, rgba(167, 130, 79, 1) 100%) !important;
}
@media (max-width: 991px) {
  .header.bg-gradient-gold {
    background: rgb(253, 221, 171) !important;
    background: linear-gradient(90deg, rgba(253, 221, 171, 1) 0%, rgba(212, 174, 128, 1) 8%, rgba(194, 153, 109, 1) 16%, rgba(190, 148, 105, 1) 28%, rgba(212, 174, 128, 1) 45%, rgba(253, 221, 171, 1) 58%, rgba(217, 183, 132, 1) 74%, rgba(189, 154, 103, 1) 80%, rgba(172, 136, 85, 1) 95%, rgba(167, 130, 79, 1) 100%) !important;
  }
}

.hs-wrapper,
.bg-blue {
    background-image: url('https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/bg-blue.png');
    background-repeat: repeat-y;
    background-size: 100% auto;
}

.bg-green {
    background-image: url('https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/bg-green.png') !important;
    background-repeat: repeat-y !important;
    background-size: 100% auto !important;
}

.bg-dark-blue {
    background-color: (--dark-blue);
}

/* For background that need radius corners */
.gradient-radius {
    border-top-right-radius: 24px; 
    border-bottom-right-radius: 24px;
    margin-left: -18px;
    padding-left: 18px !important;
}
@media (max-width: 768px) {
    .gradient-radius {
        border-top-right-radius: 0; 
        border-bottom-left-radius: 24px;
        margin-left: 0px;
        margin-top: -18px;
        padding-left: 0 !important;
    }
}

.bg-gradient-plan-gold {
    background: rgb(253, 221, 171) !important;
    background: linear-gradient(to right, #866e49 0%, #b79b6e 33%, #f3daad 100%) !important;
}

.bg-gradient-plan-blue {
    background: rgb(253, 221, 171) !important;
    background: linear-gradient(to right, #0d2137 0%, #163556 33%, #24507d 100%) !important;
}

.bg-gradient-plan-green {
    background: rgb(253, 221, 171) !important;
    background: linear-gradient(to right, #1d4425 0%, #2c613c 33%, #35724b 100%) !important;
}

.bg-jolly {
    background: rgb(190, 148, 105);
    background: linear-gradient(0deg, rgba(190, 148, 105, 1) 10%, rgba(227, 190, 144, 1) 20%, rgba(244, 210, 162, 1) 35%, rgba(251, 218, 169, 1) 100%) !important;
}

.bg-slsb {
    background: url('https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/bg-slsb-d.png');
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
}


button,
.button {
    cursor: pointer;
    border: none;
    border-radius: 30px;
    box-shadow: none;
    font-weight: 600;
    padding: 6px 6px 6px 16px;
    text-decoration: none;
    font-size: 1rem;
    /* text-transform: uppercase; */
    transition: all .6s;
    text-align: center;
}

@media (max-width: 576px) {

    button,
    .button {
        padding: 8px 24px;
    }
}

button.action,
.button.action {
    /* background-color: #fe387f; */
    color: white;
}

button.action,
.button.action:hover{
    background-color: #ff66a4;
    color: white;
}

button.gradient,
.button.gradient {
    background: rgb(167, 130, 79);
    background: linear-gradient(90deg, rgba(167, 130, 79, 1) 3%, rgba(248, 216, 166, 1) 49%, rgba(217, 183, 132, 1) 70%, rgba(167, 130, 79, 1) 95%);
    color: white;
}

button.gradient:hover,
.button.gradient:hover {
    background: rgb(167, 130, 79);
    background: linear-gradient(90deg, rgba(167, 130, 79, 1) 3%, rgba(248, 216, 166, 1) 26%, rgba(217, 183, 132, 1) 81%, rgba(167, 130, 79, 1) 95%);
}

.btn-primary,
.button.action.bg-geneco-green {
    background-color: var(--geneco-green);
}
.btn-primary:hover,
.button.action.bg-geneco-green:hover {
    background-color: var(--geneco-blue);
}

.button.action.bg-geneco-light-green {
    background-color: var(--geneco-light-green);
}
.button.action.bg-geneco-light-green:hover {
    background-color: var(--geneco-light-blue);
}

.button.action.bg-geneco-blue {
    background-color: var(--geneco-blue);
}
.button.action.bg-geneco-blue:hover {
    background-color: var(--geneco-green);
}

.button.action.bg-geneco-light-blue {
    background-color: var(--geneco-light-blue);
}
.button.action.bg-geneco-light-blue:hover {
    background-color: var(--geneco-light-green);
}

.tnc-link {
    font-size: .9rem;
    text-decoration: none;
    font-weight: 400;
}


.box-shadow {
    box-shadow: 0px 2px 10px #000;
}


/* **** HEADER and NAV **** */

.header {}

/* @media (max-width: 991px) {
    .header {
        height: 60px;
    }
}
@media (max-width: 768px) {
    .header {
        padding: 8px 0;
        position: sticky;
        top: 0;
        left: 0;
    }
} */

.header #logo {
    max-height: 60px;
    padding: 10px 0;
}

.top-nav {
    display: flex;
    padding-left: 0;
}

.top-nav li {
    list-style: none;
    padding: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--geneco-blue);
    margin-right: 2rem;
    margin-top: .5rem;
}

@media (max-width: 991px) {
    .top-nav li {
        margin-right: .5rem;
    }
}

.top-nav li a {
    font-size: 18px;
    color: var(--geneco-blue);
}

@media (max-width: 1200px) {
    .top-nav li a {
        font-size: 16px;
    }
}

@media (max-width: 1200px) {
    .top-nav li a {
        font-size: 14px;
    }
}

.top-nav li:last-of-type {
    margin-right: 0;
}


@media (max-width: 991px) {
    .top-nav {
        display: none;
    }
}

.mobile-burger {
    display: none;
}

@media only screen and (max-width: 991px) {
    .mobile-burger .iconify {
        height: 45px;
        width: 45px;
    }
}

@media (max-width: 991px) {
    .mobile-burger {
        display: block;
        position: absolute;
        top: 12px;
        right: 20px;
    }
}

.mobile-nav {
    width: 100%;
    height: 100%;
    background-color: var(--green) !important;
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    font-size: 1.8rem;
    display: none;
    align-items: center;
    justify-content: center;
}

.mobile-nav.active {
    display: flex;
}

.mobile-nav-wrapper {
    text-align: center;
    list-style: none;
}

.mobile-nav li a {
    color: var(--geneco-blue);
    text-decoration: none;
}

.mobile-nav-close {
    position: absolute;
    top: 12px;
    right: 20px;
}


/* **** HERO **** */

.hero-container {
    width: 100%;
    margin-top: 70px;
    position: relative;
}
.hero-container:before {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/header-stars.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    z-index: 1;
    position: absolute;
}
.hero-container-divider {
    margin-top: -320px;
}
@media (max-width: 576px) {
    .hero-container-divider {
    margin-top: -100px;
}
}
.hero-row {
    display: flex;
    flex-direction: row;
    align-items: center;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}

.hero-col-content {
    order: 1;
}

.hero-container h1 {
    font-size: 4rem !important;
    text-align: left;
}

.hero-container h2 {
    font-size: 2.3rem !important;
    text-align: left;
}

.hero-container .h1-lg {
    font-size: 7rem !important;
    text-align: left;
}

.hero-container .h1-sm {
    font-size: 2.3rem !important;
    text-align: left;
}

.hero-container .header-sym {
    font-size: 50% !important;
}

@media (max-width: 1200px) {
    .hero-container h1 {
        font-size: 3rem !important;
        text-align: left;
    }

    .hero-container h2 {
        font-size: 2rem !important;
        text-align: left;
    }

    .hero-container .h1-lg {
        font-size: 6rem !important;
        text-align: left;
    }

    .hero-container .h1-sm {
        font-size: 2rem !important;
        text-align: left;
    }

    .hero-container .header-sym {
        font-size: 50% !important;
    }
}

@media (max-width: 991px) {
    .hero-container h1 {
        font-size: 3.5rem !important;
        text-align: left;
    }

    .hero-container h2 {
        font-size: 1.75rem !important;
        text-align: left;
    }

    .hero-container .h1-lg {
        font-size: 4.5rem !important;
        text-align: left;
    }

    .hero-container .h1-sm {
        font-size: 1.75rem !important;
        text-align: left;
    }

    .hero-container .header-sym {
        font-size: 50% !important;
    }
}

@media (max-width: 768px) {
    .hero-container h1 {
        font-size: 3.5rem !important;
        text-align: center;
    }

    .hero-container h2 {
        font-size: 1.75rem !important;
        text-align: center;
    }

    .hero-container .h1-lg {
        font-size: 4.5rem !important;
        text-align: center;
    }

    .hero-container .h1-sm {
        font-size: 1.75rem !important;
        text-align: center;
        margin-bottom: 0;
    }

    .hero-container .header-sym {
        font-size: 50% !important;
    }
}

@media (max-width: 450px) {
    .hero-container h1 {
        font-size: 3.5rem !important;
        text-align: center;
    }

    .hero-container h2 {
        font-size: 1.75rem !important;
        text-align: center;
    }

    .hero-container .h1-lg {
        font-size: 4.5rem !important;
        text-align: center;
    }

    .hero-container .h1-sm {
        font-size: 1.75rem !important;
        text-align: center;
    }

    .hero-container .header-sym {
        font-size: 50% !important;
    }
}

.hero-col-image {
    order: 2;
}

.hero-col-image img {
    width: 100%;
    max-width: 600px;
    height: auto;
}

@media (max-width: 1400px) {
    .hero-row {
        max-width: 90%;
    }
}

@media (max-width: 991px) {
    .hero-container {}
}

@media (max-width: 768px) {
    .hero-container {
        margin-top: 0;
    }

    .hero-row {
        flex-direction: column;
        max-width: 100%;
        padding: 2rem 0 2rem 0;
    }

    .hero-col-content {
        order: 2;
    }

    .hero-col-image {
        order: 1;
        padding-top: 2rem;
    }

    .hero-col-image img {
        max-width: 100%;
        margin: 0 auto;
    }
}


/* **** PLANS  **** */

.gif24-adjustment {
    padding-bottom: 90px;
}

.plans-wrapper {
    border-radius: 35px;
    background-color: var(--geneco-light-blue);
    /* background-image: url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Campaign/2025-golden-savings/gold-bg.jpg); */
    padding: 6px 1.1rem;
    background-size: cover;
    background-position: center;
}
.plan-wrapper .long-banner{height: 309px;}
.plans-wrapper.go-green {
    background-color: var(--green);
}

.plans-inner-wrapper {
    border-radius: 38px;
    background-color: #FFF;
    padding: 0;
}

.plans-inner-wrapper img {
    border-radius: 38px 0 0 38px;
    width: 100%;
}

.plans-inner-wrapper img.mobile-img {
    border-radius: 38px 38px 0 0 ;
    width: 100%;
}
/* Plan Details */
.plan-details-wrapper {
    border-radius: 24px;
    display: flex;
    padding: 0;
    box-shadow: 4px 4px 16px rgba(0, 0, 0, .45);

    margin: 0 auto;
    max-width: 600px;
}
@media (max-width: 991px) {
    .plan-details-wrapper {
        max-width: 100%;
    }
}
@media (max-width: 768px) {
    .plan-details-wrapper {
        flex-direction: column;
    }
}
@media (max-width: 1199px) and (min-width: 992px) {
    .plan-details-wrapper {
        max-width: 440px;
    }
}

.plan-details-wrapper>div {
    flex: 1;
}

.plan-details-wrapper>div:first-of-type {
    background-color: var(--geneco-green);
    /* background-image: url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Campaign/2025-golden-savings/gold-bg-vertical.png); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 24px;
    padding: 6px;
    width: 60%;
}

/* .plan-details-wrapper.blue {
    background-color: var(--green);
} */

/* .plan-details-wrapper.blue>div:first-of-type {
    background-color: var(--geneco-blue);
} */

.plan-details-wrapper.plan-7to7 {
    /* background-color: var(--geneco-light-blue); */
    height: 100%;
}

.plan-details-wrapper.try-plan {
    background-color: var(--ss-blue);
    height: 100%;
}

/* .plan-details-wrapper.try-plan>div:first-of-type {
    background-color: var(--geneco-light-blue);
} */

.plan-details-img-wrapper h4 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: .75em 0 0;
}
@media (min-width: 992px) {
.col-lg-4 .plan-details-img-wrapper h4 {
    font-size: 1.6rem;
  padding: 0 .5rem;
}
}
@media (min-width: 1200px) {
.col-xl-4 .plan-details-img-wrapper h4 {
    font-size: 1.6rem;
  padding: 0 .5rem;
}
}

.plan-details-img-wrapper h6 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 auto 1em;
}
@media (min-width: 992px) {
.col-lg-4 .plan-details-img-wrapper h6 {
    font-size: 1.4rem;
  padding: 0 .5rem;
}
}
@media (min-width: 1200px) {
.col-xl-4 .plan-details-img-wrapper h6 {
    font-size: 1.4rem;
  padding: 0 .5rem;
}
}

.plan-details-wrapper.plan-7to7 {
    position: relative;
}
.plan-details-wrapper.plan-7to7 .plan-details-img-wrapper h6 {
    margin: 0 auto 0;
}

@media (max-width: 768px) {
    .plan-details-wrapper>div:first-of-type {
        width: 100%;
    }
}

.plan-details-wrapper>div:first-of-type>div {
    background: #FFF;
    border-radius: 24px;
    font-weight: 700;
    padding-bottom: 2rem;
    font-size: 18px;
    height: 100%;
}

.plan-details-wrapper img {
    border-radius: 20px 20px 0 0;
    width: 100%;
}

.plan-details-wrapper .price {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 65px;
}

.plan-details-wrapper .promo-details {
    padding: 1rem 0;
    font-size: 1.6rem;
    font-weight: 600;
}

.plan-details-wrapper .promo-details h4 {
    font-weight: 600;
    font-size: 1.2rem;
}

.plan-details-wrapper .promo-details .price {
    font-size: 3rem;
    font-weight: 700;
    /* text-shadow: 0px 6px 8px rgba(0, 0, 0, .45); */
}

.plan-details-wrapper .promo-details .plus-sign {
    font-size: 3rem;
}

.plan-details-wrapper .promo-details .promo-code {
    font-size: 2.4rem;
    line-height: 2rem;
}
@media (min-width: 992px) {
  .col-lg-4 .plan-details-wrapper .promo-details .promo-code {
    font-size: 2.1rem;
    padding: 0 .5rem;
  }
}
@media (min-width: 1200px) {
  .col-xl-4 .plan-details-wrapper .promo-details .promo-code {
    font-size: 2.1rem;
    padding: 0 .5rem;
  }
}

.blurb {
    border-radius: 2rem;
    border: 3px solid var(--geneco-green);
    color: #fff;
    background-color: var(--geneco-green);
    font-size: 20px;
    font-weight: 700;
    width: auto;
    height: auto;
    margin-top: -35px;
    padding: .25rem 1rem;
    display: inline-block;
}

.blurb.green,
.blurb-green {
    border: 3px solid var(--geneco-green) !important;
    color: #fff !important;
    background-color: var(--geneco-green) !important;
}
.blurb.blue,
.blurb-blue {
    border: 3px solid var(--geneco-blue) !important;
    color: #fff !important;
    background-color: var(--geneco-blue) !important;
}

.blurb img {
    width: 98px;
}

.wrapper {
    max-width: 1140px;
}

.plan-wrapper {
    background: none;
    background-color: transparent !important;
}


/* .plan-wrapper .container,
.plan-wrapper .row-go-green,
.plan-wrapper .row-referral {
    height: auto !important;
} */

.mobile {
    display: none;
}

button,
.button {
  padding: 6px 16px;
}

button {
    text-transform: none;
}

button.gradient {
    background: rgb(167, 130, 79);
    background: linear-gradient(90deg, rgba(167, 130, 79, 1) 3%, rgba(248, 216, 166, 1) 49%, rgba(217, 183, 132, 1) 70%, rgba(167, 130, 79, 1) 95%);
    color: white;
}

button.gradient:hover {
    background: rgb(167, 130, 79);
    background: linear-gradient(90deg, rgba(167, 130, 79, 1) 3%, rgba(248, 216, 166, 1) 26%, rgba(217, 183, 132, 1) 81%, rgba(167, 130, 79, 1) 95%);
}

button svg {
    display: none;
}


.plan-wrapper .plan-row .col-promo h5 span.desc {
    font-size: 1.6rem;
}

.plan-wrapper .plan-row .col-promo h4 {
    font-size: 1.2rem;
}

.plan-wrapper .plan-row .col-plan {
    padding-bottom: 0;
}

.plan-wrapper .plan-row .col-plan.gradient-border {
    background: linear-gradient(90deg, rgba(253, 221, 171, 1) 0%, rgba(228, 192, 145, 1) 6%, rgba(207, 168, 123, 1) 10%, rgba(194, 153, 109, 1) 16%, rgba(190, 148, 105, 1) 28%, rgba(212, 174, 128, 1) 45%, rgba(253, 221, 171, 1) 58%, rgba(217, 183, 132, 1) 74%, rgba(189, 154, 103, 1) 80%, rgba(172, 136, 85, 1) 95%, rgba(167, 130, 79, 1) 100%);
    box-shadow: 0 .5px .5px rgba(0, 0, 0, .084), 0 1.3px 1.4px rgba(0, 0, 0, .12), 0 2.7px 2.8px rgba(0, 0, 0, .15), 0 5.5px 5.8px rgba(0, 0, 0, .186), 0 15px 16px rgba(0, 0, 0, .27);
}

.plan-wrapper .plan-row .col-plan.gradient-border .col-content {
    background: white;
    margin: 5px;
    border-radius: 30px;
    overflow: hidden;
    height: 642px;
}

.plan-wrapper #power-eco .content-wrapper {
    background-image: url('https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/power-eco-bg.png');
    background-size: contain;
}

.plan-wrapper #referral .content-wrapper {
    background: url('https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/referral-bg.png');
    background-size: contain;
}


.plan-wrapper svg.ico-plus {
    width: 24px;
}

.plan-wrapper svg.ico-plus.blue path {
    fill: var(--geneco-blue);
}

.plan-wrapper svg.ico-plus.green path {
    fill: var(--geneco-green);
}

.cc-offer-wrapper .row-cc-offer .col-cc-offer .image-wrapper img {
    max-width: calc(100% + 3px);
    margin-left: -1px;
}

.plan-wrapper .plan-row .col-promo h5 span.desc {
    text-shadow: none;
}

.plan-wrapper .plan-row .col-promo .ico-plus {
    max-width: 32px;
}

.plan-wrapper .plan-row .col-plan.gradient-border .col-content{height: auto; padding-bottom: 30px;}
  .plan-wrapper .plan-row .col-plan.gradient-border .col-content,
  .plan-wrapper .plan-row>.container{border-radius: 45px;}
  .plan-wrapper .container .image-wrapper img{border-radius: 35px;}
  .plan-wrapper .plan-row .col-plan.gradient-border{
    border-bottom-left-radius: 45px;
    border-bottom-right-radius: 45px;
    border-top-left-radius: 45px;
    border-top-right-radius: 45px;
  }
  .plan-wrapper .long-banner{height: auto; border-radius: 45px;}
  .plan-wrapper .long-banner .content-wrapper{background-size: 100% auto !important;}
.plan-wrapper .container .image-wrapper {
    width: 50%;
}
.plan-wrapper .container {
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em;
    border-top-left-radius: 2em;
    border-top-right-radius: 2em;
    display: flex;
    flex-direction: row;
    height: 345px;
}
.section-1 {
    background-image: url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/bg-trans2.png), url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/section1-stars.png), url('https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/bg-green.png') !important;
    background-repeat: no-repeat, no-repeat, repeat-y !important;
    background-size: 100% auto, contain, 100% auto !important;
    background-position: bottom center, center center, bottom center;
    padding-bottom: 360px;
    z-index: 1;
}

.section-2 {
    margin-top: -360px;
    background-image: url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/bg-trans3.png), url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/section1-stars.png) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: 100% auto, contain !important;
    background-position: bottom 145px center, center center;
    padding-bottom: 300px;
    z-index: 3;
}
.section-3 {
    margin-top: -150px;
    background-image: url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/bg-trans4.png),url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/section3-stars.png), url('https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/bg-green2.png') !important;
    background-repeat: no-repeat, no-repeat, repeat-y !important;
    background-size: 100% auto,  contain, 100% auto !important;
    background-position: bottom center, center center, center center;
    padding-bottom: 300px;
    z-index: 4;
}
.section-4 {
    background-image: url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/section4-stars.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-top: -300px;
    padding-bottom: 100px;
    z-index: 5;
}

@media screen and (max-width: 991px) {
  .section-2 {
    background-position: bottom center, center center;
    padding-bottom: 0;
  }
  .section-3 {
    margin-top: 0;
    padding-top: 7rem;
  }
  .section-4 {
    margin-top: 0;
  }
}

.section-4-bg {
    z-index: 1;
    margin-top: -300px;
    position: absolute;
}

.section-5 {
    z-index: 5;
}

@media screen and (max-width: 576px) {
    .section-1 {
        padding-bottom: 0;
        background-image: url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/bg-trans2.png), url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/section1-stars.png), url('https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/bg-green.png') !important;
        background-repeat: no-repeat, repeat-y, repeat-y !important;

    }

    .section-2 {
    margin-top: 0;
}
.section-3 {
    background-image: url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/bg-trans4.png),url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/section3-stars.png), url('https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/bg-green2.png') !important;
    background-repeat: no-repeat, repeat-y, repeat-y !important;
    background-size: 100% auto,  contain, 100% auto !important;
}
    .section-4 {
        background-repeat: repeat-y;
         background-size: 100% auto;
    }
}

/* .section-2-bg::before {
    background-image: url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/bg-trans2.png);
    background-size: 100% auto !important;
    background-repeat: no-repeat; 
    margin-top: -200px;
    position: absolute;
    top: 0;
    left:0;
    z-index: 0;
    content: '';
    width: 100%;
    height: 500px;
} */

/*** slsb Section ***/
.slsb-container {
  position: relative;       /* needed for ::before */
  overflow: hidden;
  background-image: url('https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/slsb-bg.png');
  background-color: var(--dark-blue);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* overlay that fades edges into var(--dark-blue) */
/* .slsb-container::before {
  content: "";
  position: absolute;
  inset: 0;                 top:0; right:0; bottom:0; left:0;
  pointer-events: none;
  left fade and right fade on top of the image
  background-image:
    linear-gradient(to right, var(--dark-blue) 0%, transparent 22%),
    linear-gradient(to left,  var(--dark-blue) 0%, transparent 22%);
  background-repeat: no-repeat;
} */

.slsb-row {}

.slsb-col {
    max-width: 700px;
    padding: 12rem 5rem 10rem;
    text-align: center;
    color: #fff;
}

.slsb-title {
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
}

.slsb-button {
    max-height: 40px;
    height: auto;
    margin-top: 2rem;
}

.slsb-wrapper {
    height: 100dvh;
    background-color: #0C1D3B !important;
}

.slsb-wrapper .wrapper {
    max-width: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    height: 100%;
}

.slsb-wrapper .col-content {
    width: 60%;
    padding: 10rem 5rem 0;
}

.slsb-wrapper .col-content .content-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 700px;
}

.slsb-wrapper .col-content .content-wrapper p {
    font-size: 1.2rem;
    color: white;
    line-height: 1.8;
}

.slsb-wrapper .col-content .content-wrapper .slsb-titleimg {
    margin-bottom: 40px;
}

.slsb-wrapper .col-content .content-wrapper .slsb-button {
    max-width: 200px;
    margin: 40px auto 0;
    border-radius: 30px;
    transition: all 0.35s;
    cursor: pointer;
}

.slsb-wrapper .col-content .content-wrapper .slsb-button:hover {
    -webkit-box-shadow: 0px 0px 70px 19px rgba(253, 221, 171, 0.67);
    -moz-box-shadow: 0px 0px 70px 19px rgba(253, 221, 171, 0.67);
    box-shadow: 0px 0px 70px 19px rgba(253, 221, 171, 0.67);
}

#back-to-top {
    border: 3px solid white;
    content: url(https://api.iconify.design/ion/chevron-up-outline.svg?color=%23ffffff);
}

.plan-wrapper .container {
    height: auto !important;
}

#aig-protect .image-wrapper {}
#aig-protect .content-wrapper {}
@media (min-width: 900px) {
  #aig-protect .image-wrapper {
    width: 40%;
  }
  #aig-protect .content-wrapper {
    width: 60%;
  }
}

@media only screen and (max-width: 1599px) {
    .slsb-wrapper .col-content .content-wrapper .slsb-titleimg {
        max-width: 100%;
    }
}

@media only screen and (max-width: 1450px) {
    .slsb-wrapper .col-content .content-wrapper {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 1399px) {
    .slsb-wrapper .col-content .content-wrapper p {
        font-size: 1rem;
    }

    .slsb-wrapper .col-content .content-wrapper .slsb-button {
        max-width: 150px;
        margin-top: 30px;
    }
}

@media only screen and (max-width: 1399px) {
    .slsb-wrapper .col-content .content-wrapper {
        max-width: 80%;
    }
}

@media only screen and (max-width: 1299px) and (min-height: 559px) {}

@media screen and (max-width: 1199px) {
    .slsb-col {
    max-width: 600px;
    padding: 13rem 5rem 10rem;
}
    
}
@media only screen and (max-width: 1099px) {
    .slsb-container {
        background-position: right -180px center;
    }

    .bg-slsb {
        height: 75dvh;
    }

    .slsb-wrapper .col-content .content-wrapper .slsb-button {
        max-width: 150px;
        margin-top: 20px;
    }

    .slsb-wrapper .col-content .content-wrapper p {
        font-size: 1rem;
    }

    .plan-wrapper .long-banner {
        height: 260px;
    }

    .slsb-col {
        max-width: 45%;
        padding: 14rem 1rem 10rem;
    }
}

@media only screen and (max-width: 1099px) and (orientation: portrait) {
    .bg-slsb {
        height: 40dvh;
    }
}
@media only screen and (max-width: 991px) {
    .slsb-container {
        background-position: right -240px top;
    }
    .slsb-col {
        max-width: 45%;
        padding: 12rem 0rem 5rem;
    }
}

@media only screen and (max-width: 899px) {
    .slsb-container {
        background-position: right -220px top;
    }
    .slsb-col {
        padding: 10rem 0rem 5rem;
    }
    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    .header-kv {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        position: relative;
        max-width: 180px;
        margin: 60px auto 0;
        z-index: 1;
    }

    .js-emblem-wrapper {
        position: absolute;
        top: 0;
        width: 100%;
        height: 150px;
        z-index: 1;
        display: flex;
        justify-content: center;
    }

    .js-emblem-wrapper .emblem-js {
        max-height: 95%;
    }
}

@media only screen and (max-width: 899px) and (orientation: portrait) {
    .mobile-nav {
        background-color: #11203F !important;
    }

    #back-to-top {
        background: transparent;
    }

    .plan-wrapper .plan-row .col-plan.gradient-border .col-content {
        height: auto;
        padding-bottom: 30px;
    }

    .plan-wrapper .plan-row .col-plan.gradient-border .col-content,
    .plan-wrapper .plan-row>.container {
        border-radius: 45px;
        
    }
    .plan-wrapper .container {
        flex-direction: column;
        height: auto;
    }

    .plan-wrapper .container .image-wrapper img {
        border-radius: 35px;
    }
    .plan-wrapper .container .image-wrapper  {
        width: 100%;
    }

    .plan-wrapper .plan-row .col-plan.gradient-border {
        border-bottom-left-radius: 45px;
        border-bottom-right-radius: 45px;
        border-top-left-radius: 45px;
        border-top-right-radius: 45px;
    }

    .plan-wrapper .long-banner {
        height: auto;
        border-radius: 45px;
    }

    .bg-slsb {
        background: url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Jolly%20Savings%202025/web/bg-slsb-m.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-color: #11203F !important;
        height: 1300px;
    }

    .slsb-wrapper .wrapper {
        justify-content: end;
    }

    .slsb-wrapper .col-content {
        width: 100%;
    }

    .slsb-wrapper .col-content .content-wrapper p {
        font-size: 1.2rem;
    }

    .slsb-wrapper .col-content .content-wrapper .slsb-button {
        max-width: 140px;
    }

    .plan-wrapper .container .content-wrapper {
        align-items: center;
        text-align: center;
    }

    .cc-offer-wrapper .row-cc-offer .col-cc-offer .content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .plan-wrapper #power-eco .content-wrapper {
        background: url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Campaign/2024-jolly-savings/campaign-page/plan-power-eco-bg-mobile.jpg);
        background-repeat: no-repeat;
        background-position: center bottom;
      
      padding-top: 4rem;
    }

    .plan-wrapper #referral .content-wrapper {
        background: url(https://4702098.fs1.hubspotusercontent-na1.net/hubfs/4702098/Campaign/2024-jolly-savings/campaign-page/friend-referral-bg-mobile.jpg);
        background-repeat: no-repeat;
        background-position: center bottom;
    }

    .bg-jolly {
        background: #be9469;
        background: linear-gradient(0deg, #be9469 5%, #e3be90 10%, #f4d2a2 15%, #fbdaa9) !important;
    }
}

@media only screen and (max-width: 799px) {
    .slsb-container {
       background-image: none;
    }
    .slsb-col {
        width: 100%;
        max-width: 100%;
        padding: 0 0 2rem;
    }
    .js-emblem-wrapper {
        height: 120px;
    }
}

@media only screen and (max-width: 599px) {
    .plan-wrapper .plan-row {
        margin-top: 40px !important;
    }

    .mt40 {
        margin-top: 40px !important;
        margin-bottom: -18px !important
    }

    ;

    .padding-bottom-3 {
        padding-bottom: none !important
    }

    .cc-offer-wrapper h2 {
        margin-top: -55px;
    }

    .cc-offer-wrapper .row-cc-offer {
        margin-top: 30px;
    }

    .cc-offer-wrapper .row-cc-offer .col-cc-offer:nth-child(n+4) {
        margin-top: 0;
    }
        .wrapper {
        margin: 0 auto;
        max-width: calc(100% - 3em);
    }
}

@media only screen and (max-width: 450px) {
    h2 {
        margin: 0 auto 25px;
    }

    .padding-bottom-3 {
        padding-bottom: 35px;
    }

    .header-kv {
        max-width: 240px;
        margin: 90px auto 0;
    }

    .cc-offer-wrapper .row-cc-offer .col-cc-offer,
    .plan-wrapper .container,
    .plan-wrapper .plan-row .col-plan,
    .plan-wrapper .plan-row .plan-12,
    .plan-wrapper .plan-row .plan-24 {
        max-width: max(80%, 320px);
        margin-top: -3px;
    }

    .js-emblem-wrapper {
        height: 100px;
    }

    h2.mt40 {
        margin-bottom: 0px !important;
    }

    .plan-wrapper .plan-row {
        margin-top: 30px !important;
    }

    .plan-wrapper .plan-row .plan-12 .col-plan .plan-12-img,
    .plan-wrapper .plan-row .plan-24 .col-plan .plan-24-img,
    .plan-wrapper .container .image-wrapper img {
        margin-top: -3px;
    }

    .row-go-green,
    .row-referral {
        margin-top: 30px !important;
    }

    .cc-offer-wrapper .row-cc-offer .col-cc-offer .content-wrapper h3 {
        text-align: center;
        margin-top: -5px;
    }

    .cc-offer-wrapper .row-cc-offer .col-cc-offer .image-wrapper img {
        max-width: calc(100% + 3px);
        margin-left: -1px;
        margin-top: -3px;
    }

    .bg-slsb {
        height: 950px;
    }

    .mt40 {
        margin-top: 70px;
        margin-bottom: 60px;
    }

    .slsb-wrapper .col-content .content-wrapper p {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 450px) and (min-height: 800px) {

    .cc-offer-wrapper .row-cc-offer .col-cc-offer .content-wrapper h3,
    .plan-wrapper .plan-row .col-promo h5 span.desc,
    .plan-wrapper .row-go-green h3 span.h3-sm,
    .plan-wrapper .row-referral h3 span.h3-sm,
    h3 {
        font-size: 1rem;
    }
    

}

@media only screen and (max-width: 450px) and (min-height: 700px) {}

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

    .cc-offer-wrapper .row-cc-offer .col-cc-offer,
    .plan-wrapper .container,
    .plan-wrapper .plan-row .col-plan,
    .plan-wrapper .plan-row .plan-12,
    .plan-wrapper .plan-row .plan-24 {
        max-width: 280px;
    }

    .plan-wrapper .plan-row .plan-12,
    .plan-wrapper .plan-row .plan-24 {}
}

@media only screen and (max-width: 399px) and (max-height: 739px) {
    .js-emblem-wrapper {
        height: 60px;
    }

    .header-kv {
        max-width: 220px;
    }

    .padding-bottom-3 {
        padding-bottom: none !important
    }

    .plan-wrapper .plan-row {
        margin-top: 40px !important;
    }

    .mt40 {
        margin-top: 35px !important;
        margin-bottom: -20px !important
    }

    .cc-offer-wrapper h2 {
        margin-top: -60px;
    }

    .cc-offer-wrapper .row-cc-offer {
        margin-top: 20px;
    }

    .bg-slsb {
        height: 950px;
    }
}

@media only screen and (max-width: 399px) and (min-height: 600px) {
    .header-kv {
        margin: 60px auto 0;
    }
}

@media only screen and (max-width: 399px) and (min-height: 740px) {
    .plan-wrapper .plan-row {
        margin-top: 35px !important;
    }

    .slsb-wrapper .col-content .content-wrapper p {
        font-size: 0.9rem;
    }

    .slsb-wrapper .col-content .content-wrapper .slsb-button {
        max-width: 120px;
    }

    .bg-slsb {
        height: 900px;
    }
}

@media only screen and (max-width: 349px) {
    .js-emblem-wrapper {
        height: 50px;
    }

    .slsb-wrapper .col-content .content-wrapper p {
        font-size: 0.9rem;
    }

    .bg-slsb {
        height: 900px;
    }

    .slsb-wrapper .col-content .content-wrapper .slsb-button {
        max-width: 120px;
        margin-top: 10px;
    }
}

@media only screen and (max-width: 699px) and (orientation: landscape) {
    html {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
    }
}

.hero-title h1 {
    color: #FFF;
    font-size: 3.8rem;
    line-height: .25;
    margin: 0;
    font-weight: 700;
}

.hero-title h2 {
    font-weight: 700;
    color: #FFF;
    font-size: 1.9rem;
}

.hero-container .h1-lg,
.hero-title .h1-lg {
    font-size: 3rem !important;
    line-height: 1.5;
    font-weight: 700;
}
.hero-title .h1-md {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 700;
}
@media (min-width: 1200px) {
    .hero-container .h1-lg,
    .hero-title .h1-lg {
        font-size: 3.25rem !important;
    }
    .hero-title .h1-md {
        font-size: 2.25rem;
    }
}

@media (max-width: 991px) {
  .hero-title {
    display: flex;
    flex-direction: column;
  }
  
  .hero-blurb {
    max-width: 80%;
    margin: 0 auto !important;
    text-align: center;
  }
}

.footer {
  padding: 1em 0;
}

.footer .logo {
    max-height: 60px;
    padding: 10px 0;
}

.footer p {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.8px
    margin-bottom: 0;
    margin-left: 1em;
    margin-top: -.1em;
    text-align: left;
}
@media (max-width: 991px) {
.footer p {
  text-align: center;
  }
}








#header-col-nav-content {}

@media (max-width: 991px) {
  #header-col-nav-content {
    position: relative;
    height: 0px;
  }
  .mobile-burger {
    position: relative;
    top: -50px;
  }
}