.hero {
    text-align: center;
    padding: 60px 35px 15px;
    z-index: 2;
    position: relative;

    h1 {
        line-height: 2.4375rem;
        font-size: 2.8125rem;
        margin: 30px 0 15px;
        color: var(--primary-blue);
    }

    p {
        margin-bottom: 20px;
        font-size: 1.125rem;
    }

    img {
        max-width: 100%;
        margin-bottom: -5px;
        width: 100%;
        height: auto;
    }
}

@media screen and (min-width: 810px) {
    .hero {
        h1 {
            line-height: 3.1375rem;
            font-size: 3.6125rem;
        }

        img {
            margin: 0px auto;
        }
    }
}
@media screen and (min-width: 1024px) {
    .hero {
        display: grid;
        grid-template-columns: 45% 55%;
        align-items: center;
        padding: 60px 0 0 0;
        text-align: left;

        .overlap {
            margin-bottom: -310px;
            padding-top: 85px;
        }

        h1 {
            font-size: 68px;
            line-height: 57px;
        }

        p {
            font-size: 21px;
            max-width: 460px;
            margin-top: 20px;
        }
    }
}

.hero-cta {
    padding: 22px 35px;
    background-color: var(--primary-green);
    margin-top: -9%;
    z-index: 2;
    position: relative;
}

#zipForm {
    .input-wrap {
        position: relative;
    }

    label {
        color: var(--white);
        text-transform: uppercase;
        font-weight: 500;
        text-align: left;
        display: block;
        margin-bottom: 11px;
    }

    input {
        width: 100%;
        padding: 18px 20px;
        border: 0;
        border-radius: 7px;
        font-size: 1.125rem;
        text-transform: capitalize;
    }

    button {
        position: absolute;
        right: 10px;
        top: 34px;
        height: 60px;
        width: 50px;
        background: transparent;
        border: 0;
        font-size: 20px;
        transition: 0.3s all;
        &:hover {
            right: 0px;
        }
    }
}

@media screen and (min-width: 810px) and (max-width: 1023px) {
    .hero-cta {
        padding: 40px 35px 60px;
        margin-top: 0;

        .container {
            max-width: 370px;
        }
    }
}
@media screen and (min-width: 1024px) {
    .hero-cta {
        padding: 40px 35px 130px;
        margin-top: 0;
        margin-bottom: -97px;
        background: var(--green-gradient-horz);
        z-index: 1;

        .input-wrap {
            max-width: 480px;
        }

        button {
            top: 33px;
            height: 60px;
            width: 60px;
        }

        label {
            text-align: left;
            display: block;
            font-size: 1.125rem;
        }
    }
}

.type-block {
    margin: 26px 0;
    z-index: 2;
    position: relative;

    .block {
        max-width: 100%;
        margin: 0 35px;
        text-align: center;
        border-radius: 10px;
        overflow: hidden;
        position: relative;

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

        .overlay {
            background: #4d555891;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 77px;
            transition: 0.3s all;
            opacity: 1;
        }

        &:hover .overlay {
            opacity: 0;
        }
    }

    .blue-bg {
        margin-top: 30px;
    }

    .cta {
        padding: 14px;

        h2, h3 {
            color: var(--white);
        }

        h2 {
            font-size: 1.5rem;
        }

        h3 {
            font-weight: 400;
            font-size: 1rem;
            padding-top: 5px;
            text-transform: uppercase;
        }
    }
}

@media screen and (min-width: 810px) {
    .type-block {
        display: flex;
        margin-top: -20px;

        a {
            width: 50%;
            border-top: 21px solid #fff;
            background: #fff;

            &:last-of-type {
                border-radius: 0 30px;
                border-right: 21px solid #fff;
                border-left: 10px solid #fff;
            }

            &:first-of-type {
                border-radius: 30px 0;
                border-left: 21px solid #fff;
                border-right: 10px solid #fff;
            }
        }

        .blue-bg {
            margin-top: 0;
        }

        img {
            height: 220px;
            object-fit: cover;
            object-position: top;
            width: 100%;
        }
        .cta {
            padding: 22px 14px;

            h2 {
                font-size: 1.6rem;
            }

            h3 {
                font-size: 1.125rem;
            }
        }

        .block {
            margin: 0;
            border-radius: 30px;

            .overlay {
                bottom: 98px;
            }
        }
    }
}

@media screen and (min-width: 1024px) {
    .type-block {
        display: flex;
        margin-top: -20px;

        a {
            width: 50%;
            border-top: 21px solid #fff;
            background: #fff;
            &:last-of-type {
                border-radius: 0 30px;
                border-right: 21px solid #fff;
                border-left: 10px solid #fff;
            }

            &:first-of-type {
                border-radius: 30px 0;
                border-left: 21px solid #fff;
                border-right: 10px solid #fff;
            }
        }
        .blue-bg {
            margin-top: 0;
        }

        img {
            height: 220px;
            object-fit: cover;
            object-position: top;
            width: 100%;
        }

        .cta {
            padding: 22px 14px;

            h2 {
                font-size: 2rem;
            }

            h3 {
                font-size: 1.125rem;
            }
        }

        .block {
            margin: 0;
            border-radius: 30px;

            .overlay {
                bottom: 104px;
            }
        }
    }
}

.trust-block {
    margin: 60px 35px 0;

    h2 {
        margin-bottom: 20px;
    }

    ul {
        margin-bottom: 30px;
    }

    li {
        font-size: 1.125rem;
        margin: 12px 0 12px 40px;
        list-style: none;
        position: relative;
        &:before {
            content: '\F270';
            padding-right: 9px;
            color: var(--primary-green);
            font-family: bootstrap-icons !important;
            font-size: 30px;
            position: absolute;
            top: -1px;
            left: -41px;
        }
    }

    img {
        margin: 50px auto 0;
        max-width: 100%;
    }
}

@media screen and (min-width: 1024px) {
    .trust-block {
        display: grid;
        grid-template-columns: 50% 40%;
        gap: 10%;
        align-items: center;
        margin: 60px 0 0;

        li {
            font-size: 1.425rem;
            margin: 23px 0 0 40px;
        }

        img {
            margin-top: 0;
        }

        .button {
            margin-bottom: 60px;
        }
    }
}

.round-blocks {
    background: var(--light-blue-bg);
    padding: 60px 35px;
    text-align: center;

    .block {
        margin-bottom: 50px;
        &:last-of-type {
            margin-bottom: 0;
        }
    }

    h2 {
        margin: 26px 0 10px;
        color: var(--primary-blue);
    }
}

@media screen and (min-width: 820px) {
    .round-blocks {
        margin: 0 0 60px;

        .block-wrapper {
            display: flex !important;
            margin-bottom: -40px;
            gap: 70px;
        }

        .block {
            width: 33%;
        }

        h2 {
            font-size: 1.563rem;
        }
    }
}

@media screen and (min-width: 1024px) {
    .round-blocks {
        .container {
            display: flex;
            gap: 55px;
        }
        .block {
            margin-bottom: 0;
        }
    }
}

.step-block {
    padding: 60px 35px;

    .block {
        display: flex;
        align-items: center;
        gap: 20px;
        margin: 20px 0;

        &:last-of-type {
            margin-bottom: 30px;
        }
    }

    p {
        font-size: 1.125rem;
    }

    img {
        max-width: 100%;
    }

    .img {
        margin-top: 40px;
    }
}
@media screen and (min-width: 810px) and (max-width: 1023px) {
    .step-block {
        p {
            font-size: 1.425rem;
        }

        .img {
            display: none;
        }
    }
}
@media screen and (min-width: 1024px) {
    .step-block {
        display: grid;
        grid-template-columns: 40% 50%;
        gap: 10%;
        align-items: center;
        padding: 60px 0 60px;

        p {
            font-size: 1.425rem;
        }

        .img {
            margin-top: 0;
        }

        img {
            max-height: 460px;
            object-fit: cover;
            border-radius: 15px;
        }
    }
}

.call-cta {
    padding: 60px 35px 0;
    background: var(--light-blue-bg);

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

    h2 {
        margin-bottom: 15px;
    }

    img {
        margin-top: 60px;
        max-width: 100%;
        height: auto;
    }

    .call, .button {
        margin-top: 20px;
    }

    .block {
        &:nth-child(1) {
            order: 2;
        }

        &:nth-child(2) {
            order: 1;
        }
    }

    .benefit-list {
        grid-template-columns: 100%;
        max-width: 210px;
        margin: 0px auto !important;
    }

    li {
        font-size: 1.125rem;
        margin: 12px 0 12px 40px;
        list-style: none;
        position: relative;

        &:before {
            content: '\F270';
            padding-right: 9px;
            color: var(--primary-green);
            font-family: bootstrap-icons !important;
            font-size: 22px;
            position: absolute;
            top: -1px;
            left: -41px;
        }

        ul {
            margin-bottom: 40px;
        }
    }

    &.contact {
        img {
            margin-top: 30px;
        }
    }
}

@media screen and (min-width: 810px) and (max-width: 1023px) {
    .call-cta {
        .block:last-of-type {
            text-align: center;
        }
    }
}

@media screen and (min-width: 1024px) {
    .call-cta {
        margin-top: 60px;
        padding-top: 0;
        background-image: url('/images/svg/mesh-gradient-desktop.svg');
        background-color: #fff;
        background-size: cover;

        &.contact {
            img {
                margin-top: 0 !important;
            }
        }

        .container {
            display: grid;
            grid-template-columns: 40% 50%;
            gap: 10%;
            align-items: center;
        }

        .button {
            margin-top: 35px;
        }

        li {
            font-size: 1.225rem;

            &:before {
                font-size: 25px;
            }
        }

        .block {
            &:nth-child(1) {
                order: 1;
            }
            &:nth-child(2) {
                order: 2;
            }
        }

        .benefit-list {
            display: grid;
            grid-template-columns: 33% 33% 33%;
            text-align: center;
            margin-top: 40px;
            max-width: 100%;
        }

        img {
            max-height: 430px;
            margin: 40px auto 0;
            width: auto;
        }
    }
}

.accordion {
    margin: 15px 0;
    padding: 15px;
    border-radius: 8px;
    position: relative;
    cursor: pointer;

    .accordion-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;

        strong {
            color: #fff;
        }

        h3 {
            color: #d3eda8;
            margin-bottom: -10px;
            font-size: 1rem;
            padding-top: 10px;
        }
    }

    h2 {
        font-size: 1.125rem;
        padding-right: 36px;
        text-transform: none;
        font-weight: 600;
        display: block;
        &:after {
            content: '\F282';
            font-family: 'bootstrap-icons';
            position: absolute;
            right: 17px;
            font-size: 14px;
            top: 16px;
            transition: transform 0.3s ease;
        }
    }

    p {
        font-size: 1rem;
    }

    &.active {
        h2 {
            &:after {
                transform: rotate(180deg);
            }
        }
        .accordion-body {
            max-height: 1000px;
        }
        p {
            margin-bottom: 0;
        }
    }

    &.active.green {
        background: var(--primary-green) !important;
    }
}



@media screen and (min-width: 1024px) {
    .accordion-container {
        display: flex;
        border-radius: 8px;
        overflow: hidden;

        .accordion-tabs {
            display: flex;
            flex-direction: column;
            min-width: 185px;

            .accordion-tab {
                padding: 15px;
                position: relative;
                cursor: pointer;
                font-size: 1rem;
                font-weight: 600;
                background-color: #8DBD3F;
                color: #fff;
                transition: background-color 0.4s ease, color 0.4s ease;
                border: none;
                text-align: left;
                outline: none;
                font-family: inherit;

                &:nth-child(odd) {
                    background-color: var(--primary-blue) !important;
                }

                &:hover {
                    background-color: lighten(#8DBD3F, 10%);
                }

                &.active {
                    background-color: #EFF5FA !important;
                    color: #333;
                }

                &:last-of-type {
                    border-radius: 0 0 0 10px;
                }
                &.active:after {
                    content: '\F285';
                    font-family: 'bootstrap-icons';
                    font-size: 12px;
                    padding-left: 9px;
                    position: absolute;
                    right: 4px;
                    top: 40%;
                }
            }
        }

        .accordion-content {
            flex-grow: 1;

            .accordion-body {
                max-height: 0;
                overflow: hidden;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.4s ease, visibility 0.4s ease;
                background-color: #fff;
                padding: 0 15px;

                h3 {
                    font-size: 1rem;
                    margin-bottom: 2px;
                }

                p {
                    font-size: 1rem;
                    margin-bottom: 21px;

                    &:last-of-type {
                        margin-bottom: 0;
                    }
                }

                &.active {
                    max-height: 800px;
                    opacity: 1;
                    visibility: visible;
                    background-color: #EFF5FA;
                    min-height: 100%;
                    border-radius: 0 10px 10px 10px;
                    padding: 20px 33px;
                }
            }
        }
    }
}

.hero-interior {
    padding: 100px 0 30px;
    text-align: center;
    margin: 0px auto;
    line-height: 1;

    h1 {
        padding: 10px 35px 4px;
    }
}

.green-wave {
    width: 100%;

    img {
        width: 100%;
    }
}

.intro {
    padding: 35px;

    .call {
        margin: 30px 0 30px;
    }

    p {
        margin: 0 0 20px;
    }

    h2 {
        margin: 0 0 20px;
        font-size: 1.563rem;
    }

    img {
        width: 100%;
        margin-top: 30px;
    }

    li {
        font-size: 1.125rem;
        margin: 12px 0 12px 40px;
        list-style: none;
        position: relative;
        &:before {
            content: '\F270';
            padding-right: 9px;
            color: var(--primary-green);
            font-family: bootstrap-icons !important;
            font-size: 30px;
            position: absolute;
            top: -1px;
            left: -41px;
        }
        ul {
            margin-bottom: 40px;
        }
    }

    .button {
        margin: 30px 0 0;
    }
}

@media screen and (min-width: 1024px) {
    .hero-interior {
        padding: 150px 0 30px;

        h1 {
            max-width: 1070px;
            margin: 0px auto;
        }
    }

    .intro {
        padding: 0 0 60px;

        h2 {
            font-size: 1.9rem;
        }

        li {
            font-size: 1.425rem;
            margin: 23px 0 0 40px;
        }

        img {
            margin-top: 0;
            margin-bottom: 0;
        }

        .container {
            display: grid;
            grid-template-columns: 45% 50%;
            align-items: center;
            gap: 5%;
        }

        .call {
            margin: 30px 0 0;
        }

        .block.small {
            li {
                font-size: 1.125rem;
            }
        }
    }
}

.faq {
    padding: 50px 35px 60px;
    align-items: center;

    img {
        width: 100%;
    }
    .accordion {
        background: #EFF5FA;
        transition: background-color 0.3s;

        h2 span {
            color: #9ba5ad;
        }

        p {
            padding-top: 16px;
        }
    }
    .accordion.active {
        transition: background-color 0.3s;
        background: var(--primary-blue);

        p {
            color: #fff;
        }

        h2 {
            color: #fff;
            span {
                color: #ffffff96;
            }
        }
    }
    &.blue {
        margin: 10px 0 20px;
        padding: 20px 35px 50px;
    }
}

.common-qs {
    margin-top: 40px;
}

@media screen and (min-width: 1024px) {
    .faq {
        padding: 60px 0 60px;

        .container {
            grid-template-columns: 45% 50%;
            gap: 5%;
            display: grid;
        }

        .block:first-of-type {
            h2 {
                margin-bottom: 15px;
            }
        }

        .block:nth-child(2) {
            margin-top: 0;
        }

        &.blue {
            margin: 60px 0 100px;

            .container {
                align-items: start;
            }
        }
    }

    .common-qs {
        margin-top: 0;
    }
}

.benefits {
    padding: 50px 35px;
    text-align: center;
    background-color: #F4FAFE;
    margin: 12px 0;

    h2 {
        margin-bottom: 30px;
    }

    h3 {
        margin: 10px 0 8px;
        text-transform: uppercase;
    }

    .blue h3 {
        color: var(--primary-blue);
    }

    .green h3 {
        color: var(--primary-green);
    }

    .dark-gray h3 {
        color: var(--text-color);
    }

    .block {
        margin: 50px 0;

        &:last-of-type {
            margin-bottom: 0;
        }
    }
}

.benefit-list {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    text-align: center;
    margin-top: 40px;

    i {
        font-size: 38px;
    }

    h3 {
        text-transform: uppercase;
        font-size: 1rem;
        margin-top: 9px;
    }

    .blue {
        h3, i {
            color: var(--primary-blue);
        }
    }

    .green {
        h3, i {
            color: var(--primary-green);
        }
    }

    .dark-gray {
        h3, i {
            color: var(--text-color);
        }
    }

    .block {
        margin: 50px 0 0;
    }
}

@media screen and (min-width: 1024px) {
    .benefits {
        margin: 60px 0 60px;

        .container {
            display: grid;
            grid-template-columns: 28% 28% 29%;
            gap: 5%;
        }

        .block {
            margin: 0;
        }
    }

    .benefit-list {
        .container {
            display: grid;
            grid-template-columns: 28% 28% 29%;
            gap: 5%;
        }

        .block {
            margin: 50px 0 0;

            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }
}

.trust-strip {
    background: #F4FAFE;
    padding: 32px 0;
    margin-top: 25px;

    .amount {
        font-size: 43px;
        font-weight: 700;
        color: var(--primary-blue);
    }

    .container {
        display: grid;
        grid-template-columns: 50% 50%;
        padding: 20px 35px;
        text-align: center;

        .block {
            margin-bottom: 20px;

            &:last-of-type {
                margin-bottom: 0;
            }

            &:nth-child(3) {
                margin-bottom: 0;
            }
        }
    }

    p {
        color: #8B8282;
        line-height: 1.1;
        font-weight: 500;
        font-size: 1rem;
        text-transform: capitalize;
    }
}


@media screen and (min-width: 1024px) {
    .trust-strip {
        margin-top: 0px;

        .container {
            display: grid;
            grid-template-columns: 27% 27% 33% 27%;
            text-align: left;
        }

        .block {
            margin-right: 80px;
            border-right: 1px solid #ccc;
            margin-bottom: 0 !important;

            &:last-of-type {
                margin-right: 0;
                border-right: 0;
            }
        }
    }
}

.leadership {
    text-align: center;
    padding: 70px 35px 30px;

    .leadership-grid {
        display: grid;
        grid-template-columns: 50% 50%;

        img {
            width: 100%;
        }

        .block {
            padding: 0 8px;
        }
    }

    img {
        margin-top: 60px;
    }

    h3 {
        color: var(--primary-blue);
        margin: 10px 0 0;
    }

    h2 {
        margin-bottom: 10px;
    }

    p {
        max-width: 800px;
        margin: 0px auto;
    }
}

@media screen and (min-width: 1024px) {
    .leadership {
        padding: 100px 35px 50px;

        .leadership-grid {
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
        }
    }
}

.carriers {
    text-align: center;
    padding: 50px 0;

    h2 {
        margin-bottom: 50px;
    }
}

.slider-container {
    overflow: hidden;
    width: 100%;
    position: relative;

    .slider-track {
        display: flex;
        animation: scroll 10s linear infinite;
        align-items: center;
    }

    .slide {
        flex-shrink: 0;
        width: auto;
        padding: 0 20px;

        img {
            display: block;
            height: auto;
            width: auto;
            max-height: 50px;
        }
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@media screen and (min-width: 1024px) {
    .carriers {
        margin: 20px 0  0;
    }


    .slider-container {
        .slider-track {
            animation: scroll 25s linear infinite;
        }

        .slide {
            padding: 0 44px;
        }
    }
}
.job-listings {
    padding: 50px 0 50px;

    .jobs {
        max-width: 800px;
        padding: 0px 35px;

        .text-center {
            margin-top: 60px;
        }

        h3 {
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
            margin-top: 50px;
            text-transform: uppercase;
        }

        p {
            padding-top: 11px;
        }

        .accordion {
            background: var(--primary-blue);

            .button {
                display: inline-block;
                background: #fff;
                width: 240px;
                padding: 8px 10px 10px;
                color: var(--text-color);
                border-color: var(--primary-blue);
                font-size: 1rem;
                margin-top: 20px;
                float: right;

                &:after {
                    font-family: bootstrap-icons !important;
                    content: '\F138';
                    padding-left: 0;
                    position: relative;
                    top: 3px;
                    font-size: 1rem;
                    opacity: 0;
                    transition: all 0.1s;
                    display: inline-flex;
                    width: 0;
                }
            }

            &.active {
                h4 {
                    &:after {
                        transform: rotate(180deg);
                    }
                }

                .accordion-body {
                    max-height: 1000px;
                }
            }

            p {
                color: #fff;
                padding-top: 10px;
            }

            .job-detail {
                font-weight: 400;
                font-size: 1rem;
                color: #e3f3ff !important;
                border-top: 1px solid #ffffff42;
                margin-top: 13px;
            }

            h4 {
                color: #fff;
                font-size: 1.125rem;
                font-weight: 500;

                &:after {
                    content: '\F282';
                    font-family: 'bootstrap-icons';
                    position: absolute;
                    right: 17px;
                    font-size: 14px;
                    top: 20px;
                    transition: transform 0.3s ease;
                }
            }
        }
    }
}

@media screen and (min-width: 1024px) {
    .text-center {
        margin-top: 0;
    }
    .jobs {
        margin: 90px auto;
    }
}

.articles {
    display: grid;
    grid-template-columns: 100%;
    padding: 50px 0;

    .block {
        margin: 30px 35px 30px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 10px;
    }

    .article-img {
        width: 100%;

        img {
            width: 100%;
        }
    }

    .article-info {
        padding: 20px 20px 60px;
        position: relative;

        h2, h3 {
            font-weight: 800;
            font-size: 1.3rem;
            margin: 13px 0px;
        }

        .article-btn {
            position: absolute;
            right: 0;
            left: 0;
            bottom: -16px;
            text-align: center;
            width: 100%;

            .button {
                border: 2px solid #444;
                color: #444;
                font-size: 1rem;
                width: 200px;
                background: #fff;
                padding: 4px 10px 10px;
                margin: 0px auto;
            }
        }

        .article-meta {
            display: flex;
            justify-content: space-between;

            span:last-of-type {
                color: #ccc;
            }

            &:first-of-type {
                position: relative;
                padding-left: 25px;
                &:before {
                    content: '\F20C';
                    font-family: 'bootstrap-icons';
                    position: absolute;
                    left: 0;
                    color: #1975BC;
                    font-weight: 600;
                    top: 1px;
                }
            }
        }

        img {
            width: 100%;
        }
    }
}

#page-numbers {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 60px;

    .page-num {
        border: 1px solid var(--primary-green);
        padding: 11px 17px;
        border-radius: 100%;
        font-weight: 600;
        margin: 0 5px;
        transition: background-color 0.3s;

        &.active {
            background: var(--primary-green);
            color: #fff;
        }
        &:hover {
            background: var(--primary-green);
            color: #fff;
        }
    }

    .page-arrow-left {
        border: 1px solid var(--primary-green);
        padding: 13px 13px 9px;
        border-radius: 100%;
        font-weight: 600;
        margin: 0 5px;
        height: 44px;
        transition: background-color 0.3s;

        &:after {
            content: '\F12F';
            font-family: 'bootstrap-icons';
        }

        &:hover {
            background: var(--primary-green);
            color: #fff;
        }
    }

    .page-arrow-right {
        border: 1px solid var(--primary-green);
        padding: 13px 13px 9px;
        border-radius: 100%;
        font-weight: 600;
        margin: 0 5px;
        height: 44px;
        transition: background-color 0.3s;

        &:after {
            content: '\F138';
            font-family: 'bootstrap-icons';
        }

        &:hover {
            background: var(--primary-green);
            color: #fff;
        }
    }
}


@media screen and (min-width: 1024px) {
    .articles {
        display: grid;
        grid-template-columns: 33% 33% 33%;
        padding: 50px 0;
        .block {
            margin: 50px 20px 50px;
        }

        h2 {
            font-size: 1.825rem;
        }
    }
}

.meta {
    margin-top: 20px;

    span {
        color: #888;

        &:last-of-type:before {
            content: '|';
            padding-left: 12px;
            margin-right: 12px;
        }
    }
}

.article-main-img {
    max-width: 950px;
    margin: 0px auto;
    text-align: center;
    position: relative;
    border-radius: 20px;
    overflow: hidden;

    img {
        width: 100%
    }
}

.article {
    padding: 35px;
}

.article-body {
    max-width: 950px;
    margin: 50px auto;

    ul {
        margin: 20px 0 30px !important;
        list-style-type: none;
        margin-left: 0;
        font-size: 1rem;

        li {
            &:before {
                content: '\F138';
                font-family: 'bootstrap-icons';
                padding-right: 16px;
                position: relative;
                top: 5px;
                color: var(--primary-blue);
                font-size: 1.35rem;
                line-height: 1.3;
            }
        }
    }

    h2 {
        margin-bottom: 10px;
        margin-top: 36px;
    }
}

.author {
    display: grid;
    grid-template-columns: 100%;
    max-width: 950px;
    margin: 0px auto 70px;
    align-items: center;
    background: #EFF5FA;
    padding: 40px;
    border-radius: 10px;
    text-align: center;

    img {
        margin-bottom: 20px;
    }
    h3 {
        color: #1975BC;
        margin-bottom: 6px;
    }
}

@media screen and (min-width: 1024px) {
    .article {
        padding: 0;

        ul {
            font-size: 1.125rem;
        }
    }

    .author {
        display: grid;
        text-align: left;
        grid-template-columns: 14% 86%;

        img {
            margin-bottom: 0;
        }
    }
}

.recent {
    .articles {
        padding-top: 0;

        .block {
            margin: 30px 0px 30px;
        }
    }

    h2 {
        text-align: center;
    }

    .button.blue-bg {
        margin: -10px auto 40px;
    }
}

@media screen and (min-width: 1024px) {
    .recent {
        .articles {
            .block {
                margin: 30px 20px 70px;
            }
        }

        .button.blue-bg {
            max-width: 410px;
            margin: -10px auto 80px;
        }
    }
}

.plan-form {
    max-width: 950px;
    display: grid;
    background: #fff;
    grid-template-columns: 100%;
    border-radius: 7px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 4;
    margin: 90px 15px;
    max-height: 83vh;
    overflow: auto;
    height: auto;

    .block:last-of-type {
        padding: 35px;
    }

    .steps {
        margin: 0 0 36px;
        font-size: 0.8rem;
        color: #bbb;
        font-weight: 600;
    }

    h1 {
        font-size: 25px;
        text-transform: uppercase;
        color: var(--primary-blue);
        border-bottom: 1px dotted #444;
        text-align: center;
        margin-bottom: 19px;
    }

    h2 {
        text-align: center;
        margin-bottom: 30px;
        text-transform: none;
        font-weight: 700;

        span {
            display: inline;
        }
    }

    .button {
        margin-top: 14px;
    }

    .content {
        max-width: 400px;
        margin: 0px auto;
        transform: translateX(0);
        opacity: 0;
        transition: opacity 0.7s;
        position: absolute;
        width: 100%;
        height: 0;

        &.hidden {
            opacity: 0;
            transform: translateX(-100%);
        }

        &.next {
            opacity: 0;
            transform: translateX(100%);
        }

        &.active {
            opacity: 1;
            position: relative;
            visibility: visible !important;
            height: auto;
            a {
                display: block;
            }
        }

        &:not(.active) {
            visibility: hidden !important;
            opacity: 0;
            height: 0;
            a {
                display: none;
            }
        }
    }

    .close {
        position: absolute;
        right: 5px;
        top: 4px;
        cursor: pointer;
        font-size: 30px;

        i {
            color: #bbb;
        }
    }
}

.bg-overlay, .plan-form {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 1;
    visibility: visible;
}

.box-hidden {
    opacity: 0;
    visibility: hidden;
    display: none;
}

.bg {
    &:after {
        content: '';
        background: #e9f5ff;
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }
}


.progress-bar {
    width: 100%;
    height: 20px;
    background-color: #EBEBEB;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background-color: #AEDAFD;
    border-radius: 10px 0 0 10px;
    position: absolute;
    left: 0;
    top: 0;
    transition: width 0.3s;
}

#stepText {
    color: #999;
}

.loading {
    margin-top: -60px;
}

#stepImage {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}

#step5 {
    margin-top: -20px;
    padding-bottom: 0;

    h2 {
        font-size: 2.363rem;
    }
    h3 {
        text-align: center;
        line-height: 1;
        font-size: 27px;
        margin-top: -23px;
        margin-bottom: 10px;

        .highlight {
            display: inline;
        }
    }

    a {
        max-width: 350px;
        margin: 14px auto;
    }

    p {
        text-align: center;
        line-height: 1.1;
        font-size: 1rem;
    }

    .gray {
        color: #888;
        margin-top: 20px;
        font-size: 0.9rem;
    }

    ul {
        border: 2px solid var(--primary-blue);
        border-radius: 10px;
        margin-bottom: -40px;
        margin-top: 30px;
        padding: 19px 22px 40px;

        li {
            list-style-type: none;
            font-weight: 500;
            color: var(--primary-blue);
            margin-bottom: 10px;

            &:before {
                content: '\F270';
                font-family: 'bootstrap-icons';
                font-size: 1.2rem;
                padding-right: 8px;
                top: 4px;
                position: relative;
            }
        }
    }
}

#step3 {
    .button {
        text-transform: none;
        font-size: 1.5rem;
    }
}

@media screen and (min-width: 1024px) {
    .plan-form {
        display: grid;
        grid-template-columns: 33% 67%;
        overflow: hidden;
        margin: 130px auto !important;

        .content {
            padding-bottom: 47px;
        }
    }

    #step5 {
        h2 {
            font-size: 2.63rem;
        }

        h3 {
            font-size: 35px;
            padding-top: 22px;
            text-transform: none;
        }

        p {
            font-size: 1.2rem;
        }

        .gray {
            font-size: 1rem;
        }
    }
}


.bg-overlay {
    content: '';
    position: fixed;
    background: rgb(255 255 255 / 68%);
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    backdrop-filter: blur(6px);
}

.open-popup-button {
    cursor: pointer;
}


.privacy-overlay {
    content: '';
    position: fixed;
    background: rgb(255 255 255 / 68%);
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    backdrop-filter: blur(6px);
    transition: opacity 0.3s ease; /* Ensure smooth transition */
    opacity: 0;
    pointer-events: none;

    &.show {
        opacity: 1;
        pointer-events: auto;
    }

    &.hide {
        opacity: 0;
        pointer-events: none; /* Ensure pointer-events are none while hiding */
    }
}

.privacy-modal {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    width: 90%;
    background: white;
    border-radius: 8px;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 4;
    padding: 35px;
    pointer-events: none;
    max-height: 87%;
    overflow-y: auto;

    &.show {
        top: 80px;
        pointer-events: auto;
    }

    &.hide {
        top: 100%;
        pointer-events: none; /* Ensure pointer-events are none while hiding */
    }

    h2 {
        margin-bottom: 10px;
    }

    h3 {
        margin-bottom: 6px;
        font-weight: 600;
    }

    .privacy-modal__close {
        background: none;
        border: none;
        cursor: pointer;
        position: absolute;
        right: 2px;
        top: 0;

        i {
            font-size: 2rem;
            color: #bbb;
        }
    }
}

@media screen and (min-width: 1024px) {
    .privacy-modal {
        top: 120px;
        padding: 60px;
        max-width: 1150px;
        max-height: 90vh;

        &.show {
            opacity: 1;
            top: 120px;
            pointer-events: auto;
        }

        h3 {
            font-size: 1.3rem;
        }
    }
}

#privacyOverlay,
#privacyModal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#privacyOverlay.show,
#privacyModal.show {
    opacity: 1;
    visibility: visible;
}


.departments {
    margin: -20px 0 90px;
    position: relative;

    img {
        width: 100%;
    }

    .block {
        margin: 50px 35px;
        border: 3px solid;
        border-radius: 10px;
        padding: 33px;
        text-align: center;
        position: relative;


        .button {
            position: absolute;
            bottom: 0;
            max-width: 306px;
            left: 0;
            right: 0;
            margin: 0px auto -22px;
            font-size: 1.2rem;
        }
    }

    h2 {
        font-size: 1.19rem;
    }

    p {
        font-size: 1rem;
        line-height: 1.1;
        margin: 13px 0 28px;
    }

    .call {
        span {
            margin-top: 4px;
            letter-spacing: 0;
            margin-left: 15px;
        }

        &:before {
            left: 1px;
            font-size: 1.25rem;
            top: 0px;
        }
    }
}

.offices {
    margin: 0 35px 60px;
    align-items: center;

    img {
        width: 100%;
        margin-bottom: 30px;
    }

    .office {
        display: grid;
        margin: 30px 0 30px;
        grid-template-columns: 13% 87%;
    }

    i {
        font-size: 28px;
        position: relative;
        margin-bottom: 0;
        top: 4px;
    }
}


@media screen and (min-width: 1024px) {
    .departments {
        margin: 40px 0 100px;
        display: grid;
        grid-template-columns: 31% 31% 31%;
        gap: 40px;

        &:before {
            content: 'Speak With A Licensed Insurance Agent';
            position: absolute;
            text-align: center;
            width: 100%;
            font-size: 1.8rem;
            font-weight: 700;
        }

        .block {
            margin: 70px 0 50px ;
        }
    }

    .offices {
        margin: 110px 0 90px;
        display: grid;
        grid-template-columns: 66.66% 30.33%;
        gap: 33px;
        align-items: center;

        img {
            margin-bottom: 0;
        }

        .office {
            grid-template-columns: 12% 88%;
            margin: 30px 0 40px;

            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }
}

/** landing page **/
.hero {
    &.alternate {
        img {
            margin-bottom: -25px;
            padding-top: 50px;
        }
        h1 {
            line-height: 1;
            font-size: 2.4125rem;
            margin: 50px 0 15px;
            color: var(--primary-blue);
        }
    }
}
.alternate-cta {
    background: #fff;
    z-index: 2;
    position: relative;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.05);
    padding: 40px 35px;

    .block {
        margin-top: 31px;

        &:last-of-type .text {
            padding-right: 0;
        }

        &:first-of-type {
            margin-top: 0;
        }
    }

    .text {
        h2 {
            font-size: 20px;
            line-height: 1.2;
            font-weight: 600;
            text-transform: none;
        }
    }
}

.trust-cta {
    display: grid;
    grid-template-columns: 26% 75%;
    align-items: center;
    img {
        height: 60px;
        width: auto;
    }
}

.tab-info {
    padding: 30px;
    text-align: center;
    background: #edf3f8;
    margin-top: 30px;
    border-radius: 20px;

    .button.call {
        font-size: 1.15rem;
    }

    h2 {
        font-size: 22px;
        margin-bottom: 28px;
    }

    p {
        margin-top: 10px;
        font-size: 1rem;
        margin-bottom: 0;
    }

}

@media screen and (min-width: 1024px) {
    .hero {
        &.alternate {
            img {
                padding: 60px 0px 0px 69px;
                margin-bottom: -100px;
            }

            .overlay {
                margin-bottom: -70px;
            }
            h1 {
                font-size: 68px;
                line-height: 57px;
            }
        }
    }
    .alternate-cta {
        .block {
            margin-top: 0;
        }
        .container {
            display: grid;
            grid-template-columns: 33.33% 33.33% 33.33%;
            align-items: center;
        }
    }
    .trust-cta {
        .text {
            padding-right: 30px;
            h2 {
                font-size: 25px;
            }
        }
        img {
            height: 73px;
            width: auto;
        }
    }
    .tab-info {
        border-radius: 20px 20px 0 0;
        margin-bottom: -51px;

        .button.call {
            font-size: 1.35rem;
            &:before {
                left: 4px !important;
                font-size: 1.5rem !important;
                top: -1px !important;
            }
        }
    }
}


.hero {
    &.landing {
        padding-top: 110px;
        h1 {
            font-size: 31px;
            line-height: 31px;
            margin-top: 0;
        }
        .highlight {
            display: inline;
        }
        .dark {
            font-size: 1.3rem;
            line-height: 1;
            padding-bottom: 15px;
            display: block;
        }
    }
}

.trust-strip {
    &.alternate {
        background: #1975bc;
        z-index: 2;
        position: relative;
        p, span {
            color: #fff;
        }
    }
}

@media screen and (min-width: 1024px) {
    .hero {
        &.landing {
            padding-top: 80px;
            h1 {
                font-size: 51px;
                line-height: 46px;
            }
            img {
                padding: 0 0 0 70px !important;
                margin-bottom: -150px;
                margin-top: -40px;
            }
            .dark {
                font-size: 1.8rem;
                line-height: 2;
            }
            .tab-info {
                margin-bottom: -21px;
            }
        }
    }
}

.tab-info {
    #zip {
        border: 2px solid var(--primary-green);
        background-color: #fff;
    }

    #zip:-webkit-autofill {
        background-color: #fff !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    #zipForm {
        label {
            color: #4d5558;
            text-align: center;
            font-weight: 700;
        }
        button {
            top: 51px;
        }
    }

    .separator {
        margin: 7px;
        display: block;
        text-transform: uppercase;
        font-weight: 700;
    }

    .call:before {
        left: 4px !important;
        font-size: 1.3rem !important;
        top: 0px !important;
    }
}

.round-blocks {
    &.options {
        background: #fff;
        margin-bottom: 0;
        padding-bottom: 20px;

        .container {
            display: block;
        }
        h2 {
            color: var(--text-color);
            font-size: 27px;
            line-height: 1;
        }

        p {
            margin: 20px 0 50px;
        }

        .block-wrapper {
            max-width: 870px;

            h3 {
                margin-top: 20px;
                margin-bottom: 40px;
            }

            img {
                max-width: 96px;
            }
        }

        .button-wrapper {
            max-width: 440px;
            margin: 50px auto;
        }
    }
}

.badge-strip {
    background: url(/images/svg/mesh-gradient-desktop.svg);
    background-size: cover;
    padding: 59px 35px;

    .container {
        display: block;
    }


    .block {
        margin-bottom: 30px;
        &:last-of-type {
            margin-bottom: 0;
        }
    }

    .badge-wrapper {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 15px 45px;
        border-radius: 15px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        .image {
            padding-right: 17px;
            width: 98px;
            text-align: center;
        }
    }
}
@media screen and (min-width: 458px) {
    .tab-info {
        #zipForm {
            button {
                top: 33px;
            }
        }
    }
}
@media screen and (min-width: 1024px) {
    .badge-strip {
        .container {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .block {
                margin-bottom: 0;
            }
        }
    }

    .round-blocks {
        &.options {
            h2 {
                font-size: 35px;
            }
        }
    }
}

.plan-steps {
    padding: 60px 35px 73px;

    h2 {
        font-size: 25px;
    }

    p {
        margin: 20px 0 0;
    }

    .step-block {
        padding: 20px 0;
    }
}

.step-block {
    position: relative;
    .block {
        position: relative;
    }
}

.step-overlay {
    position: absolute;
    bottom: -89px;
    right: 0;
    left: 0;
    border-radius: 10px;
    padding: 20px;
    margin: 0px auto;
    width: 93%;
    text-align: center;

    .button.call {
        &:before {
            left: 4px !important;
            font-size: 1.55rem !important;
            top: 5px !important;
        }
    }

    separator {
        margin: 7px;
        display: block;
        text-transform: uppercase;
        font-weight: 700;
    }

    p {
        margin-bottom: 0;
        font-size: 1rem;
        text-align: center;
    }
}

.step-wrapper {
    position: relative;
    border: 2px solid #91c143;
    padding: 26px 50px 60px;
    border-radius: 20px;

    .block {
        margin-top: 29px;
    }

    p {
        margin: 0;
        line-height: 1.2;
    }

    h2 {
        font-size: 23px !important;
        text-align: center;
        background: #fff;
        display: inline;
        position: absolute;
        left: 0;
        right: 0;
        width: 237px;
        max-width: 100%;
        top: -14px;
        margin: 0px auto;
    }
}

@media screen and (min-width: 1024px) {
    .step-overlay {
        width: 370px;
        box-shadow: 0 0 21px rgba(0, 0, 0, 0.1);
        background: #fff;
    }
    .plan-steps {
        padding: 100px 35px;
        h2 {
            font-size: 35px;
        }
    }
    .step-wrapper {
        h2 {
            font-size: 28px !important;
            top: -18px;
            width: 287px;
        }
    }
}

.priv-pol {
    padding: 100px 35px 60px;

    h1 {
        font-size: 29px;
        margin-bottom: 10px;
    }

    h3 {
        margin-bottom: 10px;
    }

    p:last-of-type {
        margin-bottom: 0;
    }
}

@media screen and (min-width: 1024px) {
    .priv-pol {
        padding: 130px 35px 60px;
        max-width: 860px;
        margin: 0px auto;

        h1 {
            font-size: 36px;
        }
    }
}