@charset "UTF-8";
/*
 * Legal Disclaimer
 *
 * These Fonts are licensed only for use on these domains and their subdomains:
 * switchd.co.uk
 *
 * It is illegal to download or use them on other websites.
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Lineto.com, 2019
 */

/*
 *
 * INSTRUCTIONS
 *
 * Copy the Legal Disclaimer and the @font-faces statements to your regular CSS file.
 * The fonts folder(s) should be placed relative to the regular CSS file.
 *
 * You can use either the complete or subsetted fonts:
 * If you don’t require the entire range of characters, you can use the smaller, subsetted webfonts instead.
 * See "Glyphs & Languages" for an overview of the characters in the corresponding html file in the root directory of this package.
 *
 */

@font-face {
    font-family: "Ginger";
    src: url("../fonts/GingerRegular.eot");
    src: url("../fonts/GingerRegular.eot?#iefix") format("embedded-opentype"), url("../fonts/GingerRegular.woff2") format("woff2"), url("../fonts/GingerRegular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GingerBold";
    src: url("../fonts/GingerExtraBold.eot");
    src: url("../fonts/GingerExtraBold.eot?#iefix") format("embedded-opentype"), url("../fonts/GingerExtraBold.woff2") format("woff2"), url("../fonts/GingerExtraBold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

html, body {
    scroll-behavior: smooth;
}

body {
    font-family: Ginger;
    position: relative;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p b, p strong, th, .bold {
    font-family: GingerBold;
}

h1, h2, h3, h4, h5, h6 {
    color: #1e2355;
}

p, label, ul li, ol li {
    color: #6c757d;
}

ul li, ol li {
    margin-bottom: 1rem;
}

p, ul li, ol li {
    font-size: 1.1rem;
}

p b, p a, li b {
    font-family: GingerBold;
}

p>a, li>a, th>a, td>a {
    color: #1e2355 !important;
    font-family: GingerBold;
    text-decoration: underline !important;
    cursor: pointer;
    word-break: break-word;
}

p>a:hover, p>a:focus, li>a:hover, li>a:focus {
    opacity: 0.8;
}

body {
    scrollbar-width: thin;
    scrollbar-color: #1e2355 lightgrey;
}

body::-webkit-scrollbar, iframe body::-webkit-scrollbar {
    width: 0.5rem;
    border-radius: 0.5rem;
}

body::-webkit-scrollbar-track, iframe body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb, iframe body::-webkit-scrollbar-thumb {
    background-color: #21f999;
    border-radius: 0.5rem;
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #1e2355;
}

/* ----------------------------------UTILS---------------------------------- */

.text-small, .text-tiny {
    font-size: 14px !important;
}

.text-medium {
    font-size: 17px !important;
}

.text-large {
    font-size: 20px !important;
}

.text-dark {
    color: #212529 !important;
}

.text-white, .text-white * {
    color: white !important;
}

.text-green {
    color: #21f999 !important;
}

.text-blue {
    color: #1e2355 !important;
}

.text-yellow {
    color: #fbdb5a !important;
}

.text-red {
    color: #C31D28 !important;
}

.bg-green {
    background-color: #21f999 !important;
}

.bg-blue {
    background-color: #1e2355 !important;
}

.bg-white {
    background-color: white !important;
}

.bg-light-grey {
    background-color: #f4f4f4 !important;
}

.bg-light-green {
    background-color: #f5fffb !important;
}

.border-blue {
    border-color: #1e2355;
}

.shadow-bottom {
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}

.shadow-top {
    box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.2);
}

.clickable {
    cursor: pointer !important;
}

.hide-on-mobile, .hide-on-mobile-flex, .hide-on-mobile-inline, .hide-on-mobile-in-block {
    display: none !important;
}

.show-on-mobile {
    display: block !important;
}

.show-on-mobile-flex {
    display: flex !important;
}

.show-on-mobile-in-block {
    display: inline-block !important;
}

@media (min-width: 768px) {
    .hide-on-mobile {
        display: block !important;
    }

    .hide-on-mobile-flex {
        display: flex !important;
    }

    .hide-on-mobile-inline {
        display: inline !important;
    }

    .hide-on-mobile-in-block {
        display: inline-block !important;
    }

    .show-on-mobile, .show-on-mobile-flex, .show-on-mobile-in-block {
        display: none !important;
    }
}

/* ----------------------------------BUTTONS---------------------------------- */

.btn {
    border-radius: 50rem;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-family: GingerBold;
    padding-top: 0.45rem;
    white-space: normal;
}

.btn.focus, .btn:focus {
    box-shadow: none;
}

.btn-cta {
    background-color: #21f999;
    color: #1e2355 !important;
}

.btn-cta:hover, .btn-cta:focus {
    background-color: #1DE089;
}

.btn-cancel {
    background-color: #A9A9A9 !important;
    color: white !important;
}

.btn-cancel:hover .btn-cancel:focus {
    background-color: #909090 !important;
    color: white !important;
}

.btn-cta.disabled:hover, .btn-cta.disabled:focus {
    cursor: not-allowed !important;
}

.btn-tertiary {
    background-color: #fbdb5a;
    color: black !important;
}

.btn-cta-blue {
    color: white !important;
    background-color: #1E2355;
    text-transform: unset;
    font-size: 1rem;
}

.btn-cta-blue:hover, .btn-cta-blue:focus {
    background-color: rgba(30, 35, 85, 0.9);
}

.btn-cta.bg-blue {
    color: white !important;
}

.btn-icon {
    font-size: 14px;
    padding: 3px 11px;
    margin-left: 0.5rem;
    border-radius: 50%;
    border: transparent;
}

/* ----------------------------------NAVBAR---------------------------------- */

.navbar-container {
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
    background-color: #1e2355;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}

.navbar-container.transparent {
    background-color: transparent;
    box-shadow: none;
}

.navbar .navbar-toggler {
    border-color: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.navbar-toggler:focus, .navbar-toggler:hover {
    outline: none !important;
}

.navbar-dark .navbar-nav .nav-item {
    margin-bottom: 0;
}

.navbar-dark .navbar-nav .nav-link {
    font-family: GingerBold;
    font-size: 1.1rem;
    text-transform: uppercase;
    margin-left: 1rem;
    text-decoration: none !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: white !important;
}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
    color: rgba(255, 255, 255, 0.8) !important;
}

.navbar .btn {
    background-color: white !important;
    border: solid transparent 2px;
    color: black;
    margin-left: 1rem;
    text-decoration: none !important;
}

.navbar .btn:hover, .navbar .btn:focus {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

.navbar.transparent .btn {
    background-color: transparent !important;
    color: white !important;
    border-color: white !important;
}

.navbar.transparent .btn:hover, .navbar.transparent .btn:focus {
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.8);
}

.navbar-brand img {
    height: 40px;
}

.navbar .start-section {
    border-left: none;
}

.navbar .dropdown-item.active, .navbar .dropdown-item:active {
    background-color: #1e2355;
    color: white;
}

.navbar .dropdown-item {
    font-family: Ginger;
    color: #1e2355;
    text-decoration: none !important;
}

@media only screen and (min-width: 768px) {
    .navbar .start-section {
        border-left: solid 2px #A9A9A9;
    }

    .navbar-brand img {
        height: 50px;
    }
}

/* ----------------------------------FOOTER---------------------------------- */

.footer {
    color: white;
    background-color: #1e2355;
}

.footer p {
    font-size: 1.1rem;
}

.footer img {
    height: 60px;
}

ul.footer-bar, ul.footer-terms {
    list-style: none;
    padding-inline-start: 0;
}

ul.footer-bar li {
    display: inline;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-family: GingerBold;
    margin-left: 1.5rem;
}

ul.footer-terms li {
    display: inline;
    font-size: 1.1rem;
    margin-right: 1.5rem;
}

ul.footer-bar a, ul.footer-terms a, .footer p a {
    color: white;
    text-decoration: none !important;
}

ul.footer-bar a:hover, ul.footer-bar a:focus, ul.footer-terms a:hover, ul.footer-terms a:focus, .footer p a:hover, .footer p a:focus {
    text-decoration: underline !important;
}

@media only screen and (min-width: 768px) {
    ul.footer-bar li {
        font-size: 1.2rem;
        margin-bottom: 0;
    }
}

/* ----------------------------------HOME IMAGE---------------------------------- */

.masthead {
    height: max-content;
    min-height: 110vh;
    background: url('../images/index/home_image.jpg') rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    padding-top: 3rem;
}

.masthead.mini {
    height: max-content;
    min-height: 50vh;
}

.masthead.midi {
    height: max-content;
    min-height: 100vh;
}

.masthead h1 {
    font-size: 2.5rem;
    margin-top: 3rem;
}

.masthead p {
    font-size: 1.2rem;
}

@media (max-width: 767px) and (min-height: 640px) {
    .masthead.midi {
        height: 100vh;
    }
}

@media only screen and (min-width: 768px) {
    .masthead {
        padding-top: 2rem;
    }

    .masthead, .masthead.midi {
        height: 100vh;
    }

    .masthead.mini {
        height: 50vh;
    }

    .masthead h1 {
        font-size: 3.25rem;
        margin-top: 2rem;
    }

    .masthead p {
        font-size: 1.3rem;
    }
}

.arrow-wrapper {
    position: relative;
    padding: 0 10px;
}

.arrow {
    position: absolute;
    width: 40px;
}

.arrow.top-left {
    top: -14px;
    left: -5px;
}

.arrow.bottom-right {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    bottom: -14px;
    right: -5px;
}

.masthead.mini .arrow-wrapper {
    width: fit-content;
    margin: auto;
    padding: 0 15px;
}

.masthead.mini .arrow-wrapper h1 {
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
    .arrow-wrapper {
        padding: 0;
    }

    .arrow.top-left {
        left: -15px;
    }

    .arrow.bottom-right {
        right: -15px;
    }

    .masthead.mini .arrow-wrapper {
        padding: 0 10px;
    }
}

/* ----------------------------------SIGN UP BAR---------------------------------- */

.sign-up-bar {
    background-color: #1e2355;
}

.sign-up-bar .widen {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .sign-up-bar .widen {
        width: 45%;
    }
}

@media only screen and (min-width: 992px) {
    .sign-up-bar .widen {
        width: 20%;
    }
}

@media (min-width: 1200px) {
    .sign-up-bar .widen {
        width: 25%;
    }
}

/* ----------------------------------FORM CONTROLS---------------------------------- */

.form-control {
    border: 2px solid #ced4da;
    border-radius: 7px;
    color: #495057 !important;
}

.form-control.error {
    border-color: #C31D28;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #1e2355;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(30, 35, 85, 0.25);
}

.focus {
    border-color: #1e2355 !important;
    box-shadow: 0 0 0 0.2rem rgba(30, 35, 85, 0.25) !important;
}

input[type=checkbox], input[type=radio] {
    width: 24px !important;
    height: 24px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: 2px solid #21f999;
    border-radius: 5px;
    box-shadow: none;
    font-size: 2em;
    cursor: pointer;
    background-color: white;
}

input[type=checkbox]:checked {
    background-color: #21f999 !important;
}

input[type=checkbox]:checked:after, input[type=radio]:checked:after {
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    font-weight: 900;
    color: black;
    font-size: 14px;
    position: absolute;
    left: calc(50% - 7px);
}

input[type=checkbox]:focus, input[type=radio]:focus {
    outline: none;
}

input[type=radio] {
    border-radius: 50%;
    position: relative;
}

input[type=radio]:checked {
    background-color: white !important;
}

input[type=radio]:checked:after {
    content: "\f111";
    color: #21f999;
}

.form-check-input {
    margin-top: 0;
}

.form-check-label {
    margin-left: 0.5rem;
}

/* ----------------------------------HOME PAGE---------------------------------- */

section.bottom-border {
    position: relative;
}

section.bottom-border::after {
    content: "";
    width: 80%;
    height: 1px;
    background: lightgray;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

section .container, section .container>div, section .container>div>div, section .container h1, section .container h2, section .container h3 {
    z-index: 3 !important;
}

div.arrows {
    position: absolute;
    opacity: 0.2;
    background-image: url("../images/index/green-arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 1 !important;
    width: 0;
    height: 0;
    pointer-events: none;
}

div.arrows.left {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    left: -12.5%;
}

div.arrows.right {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: -12.5%;
}

#whyBetter img {
    text-align: center;
    margin-bottom: 2rem;
    width: 80%;
}

#howSteps .img-how {
    height: 200px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 7px;
}

#howSteps .img-wrapper {
    position: relative;
    margin-bottom: 2rem;
    text-align: center;
}

#howSteps .img-wrapper h1 {
    position: absolute;
    bottom: -60px;
    font-size: 6rem;
    color: #21f999
}

.founder-text {
    color: #1e2355;
    font-size: 1.2rem;
    font-family: Ginger;
}

@media only screen and (min-width: 768px) {
    #howSteps .img-how {
        height: 400px !important;
    }

    #howSteps .img-wrapper {
        margin-bottom: 4rem;
        text-align: left;
    }

    #howSteps .img-wrapper h1 {
        bottom: -80px;
        font-size: 8rem;
    }

    .founder-text {
        font-size: 2.25rem;
        font-family: GingerBold;
    }
}

@media only screen and (min-width: 1200px) {
    div.arrows {
        height: 20%;
        width: 20%;
    }

    div.arrows.how {
        right: -12.5%;
        top: 15%;
        height: 22.5%;
        width: 22.5%;
    }

    div.arrows.plan {
        top: 60%;
    }

    div.arrows.founder {
        right: -12.5%;
        top: 67.5%;
        height: 22.5%;
        width: 22.5%;
    }

    div.arrows.testimonial {
        top: 36.5%;
    }

    div.arrows.why {
        top: 11%;
    }
}

/* ----------------------------------CAROUSEL---------------------------------- */

.testimonial-text {
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: center;
}

.testimonial-text p {
    font-size: 1.1rem;
}

.star-rating {
    font-weight: 900;
}

.star-rating .fas {
    font-size: 2rem;
    color: #fbdb5a !important;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: none;
}

.carousel-control-next-icon {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

.carousel-control-prev-icon {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@media only screen and (min-width: 768px) {
    .carousel-control-next, .carousel-control-prev {
        width: 10%;
    }

    .testimonial-text {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

@media (min-width: 992px) {
    .carousel-control-next, .carousel-control-prev {
        width: 5%;
    }

    .testimonial-text {
        padding-left: 6rem;
        padding-right: 6rem;
    }
}

/* ------------------------ACCORDION------------------------- */

.accordion {
    border-top: solid 1px lightgrey;
}

.accordion .card {
    border-radius: 0;
    border: none !important;
}

.accordion .collapse.show {
    border-bottom: solid 1px lightgrey;
}

.accordion .collapse p {
    margin-bottom: 0;
}

.accordion .card-header {
    border-radius: 0;
    border: none;
    border-bottom: solid 1px lightgrey;
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.accordion .card-header .col-9 {
    padding-right: 0;
}

.accordion .card-header h4, .accordion .card-header h5 {
    margin-bottom: 0;
}

.accordion .card-header h4, h4.head-settings {
    font-size: 1.2rem;
}

.accordion .card-header h5 {
    font-size: 1.1rem;
}

.accordion .card-header button.btn {
    font-size: 0.75rem;
    padding: 3px 7px;
    border-radius: 50%;
    border: transparent;
    float: right;
}

.accordion .card-header button:after {
    font-family: "Font Awesome 5 Free";
    content: "\f068";
    font-weight: 900;
}

.accordion .preferences button.btn.collapsed {
    padding: 3px 10px !important;
}

.accordion .preferences button.collapsed:after {
    content: "\f129" !important;
}

.accordion .card-header button.collapsed:after {
    content: "\f067";
}

.accordion>.card>.card-header {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .accordion .card-header h4, h4.head-settings {
        font-size: 1.5rem;
    }

    .accordion .card-header h5 {
        font-size: 1.25rem;
    }

    .accordion .card-header button.btn {
        font-size: 1rem;
        padding: 5px 10px;
    }

    .accordion .preferences button.btn.collapsed {
        padding: 3px 12px !important;
    }
}

/* ------------------------COOKIE BANNER------------------------- */

.cookie-consent-sec {
    position: fixed;
    bottom: 10px;
    border-radius: 5px;
    z-index: 9;
    display: none;
    width: 90%;
    left: 5%;
}

.cookie-consent-box {
    background-color: white;
    box-shadow: 0 20px 50px 0 rgba(34, 43, 55, 0.3);
    border-radius: 7px;
    padding: 1.25rem;
}

.cookie-consent-box p {
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
    .cookie-consent-sec {
        left: 45%;
        transform: translateX(-40%);
        width: auto;
        min-width: 50%;
    }
}

/* ------------------------PLAN CARD------------------------- */

.card-slider {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;
    text-align: center;
    padding-top: 1rem;
    height: auto;
}

.card-slider::-webkit-scrollbar {
    display: none;
}

.plan-card {
    display: inline-block;
    border: 4px solid lightgrey;
    border-radius: 10px;
    padding: 1rem 0.75rem;
    width: 80%;
    cursor: pointer;
    text-align: center;
    margin-right: 0.5rem;
    white-space: normal;
    position: relative;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.plan-card p {
    margin-bottom: 1rem;
}

.plan-card p:last-child {
    margin-bottom: 0;
}

.plan-card h3 {
    margin-top: 0.5rem;
}

.plan-card.active {
    border-width: 4px;
    border-color: #21f999;
    background-color: #f5fffb;
}

.plan-card .plan-badge {
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.plan-card p.benefit {
    text-align: left;
    padding-left: 1.75rem;
    font-size: 1.15rem;
}

.plan-card p.benefit:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0.75rem;
}

.plan-card p.benefit.included:before {
    color: #1e2355;
    content: "\f14a";
}

.plan-card p.benefit.excluded {
    opacity: 0.5;
}

.plan-card p.benefit.excluded:before {
    color: #495057;
    opacity: 0.5;
    content: "\f057";
}

.plan-badge .badge {
    background-color: #21f999;
    color: #1e2355;
    padding: .5rem 1rem;
    border-radius: 50rem;
}

.card-slider .plan-card:last-child {
    margin-right: 0;
}

@media (min-width: 768px) {
    .plan-card {
        width: 45%;
    }
}

@media (min-width: 992px) {
    .plan-card {
        width: 30%;
    }
}

@media (min-width: 1200px) {
    .card-slider {
        overflow: hidden;
    }

    .plan-card {
        width: 24%;
    }
}

/* ------------------------HOW PROGRESS------------------------- */

.stepper-container {
    width: 100%;
}

.stepper-bar {
    counter-reset: step;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: unset;
}

.stepper-bar li {
    list-style-type: none;
    width: 31%;
    float: left;
    position: relative;
    color: #1e2355;
    font-family: GingerBold;
}

.stepper-bar li strong {
    margin-top: 1rem;
    font-size: 20px;
}

.stepper-bar li:before {
    width: 30px;
    height: 30px;
    content: counter(step);
    counter-increment: step;
    line-height: 28px;
    border: 4px solid #1e2355;
    display: block;
    text-align: center;
    border-radius: 50%;
    background-color: #21f999;
    position: relative;
    z-index: 3;
    color: #21f999;
}

.stepper-bar li:after {
    width: 100%;
    height: 3px;
    content: '';
    position: absolute;
    background-color: #1e2355;
    top: 13px;
    right: -10%;
}

.stepper-bar li.active, .stepper-bar li.completed {
    color: black;
}

.stepper-bar li.active:before, .stepper-bar li.completed:before {
    font-family: "Font Awesome 5 Free";
    border-color: #29f199;
    background-color: #29f199;
    font-weight: 900;
    color: white;
}

.timeline-item {
    padding: 1rem;
    border-radius: 7px;
}

.timeline-item span {
    padding-right: 0.25rem;
}

.timeline-item.you {
    background-color: #21f999;
    color: #1e2355;
}

.timeline-item.us {
    background-color: #1e2355;
    color: white;
}

ul.timeline {
    list-style-type: none;
}

ul.timeline:before {
    content: ' ';
    background: #1e2355;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 4px;
    height: 100%;
    z-index: 400;
}

ul.timeline>li {
    margin: 20px 0;
    position: relative;
}

ul.timeline>li:before {
    content: ' ';
    background: #21f999;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 4px solid #1e2355;
    left: -37px;
    top: -3px;
    width: 25px;
    height: 25px;
    z-index: 400;
}

/* ------------------------HOW VIDEO------------------------- */

#videoTab .nav-item {
    margin-bottom: 10px;
}

#videoTab .nav-link {
    background-color: #f4f4f4;
    padding: 1rem;
    text-decoration: none !important;
}

#videoTab .nav-link:hover, #videoTab .nav-link:focus {
    opacity: 1;
}

#videoTab .nav-link.active {
    background-color: #21f999;
}

#videoTab .nav-link h5 {
    margin: 0;
}

.badge-circle {
    text-align: center;
    border-radius: 50%;
    position: absolute;
    height: 110px;
    width: 110px;
    right: -8%;
    top: -8%;
    z-index: 10;
    display: none;
}

@media (min-width: 768px) {
    #videoTab .nav-item {
        margin-right: 10px;
    }

    #videoTab .nav-item:last-child {
        margin-right: 0;
    }

    .badge-circle {
        display: table;
    }
}

.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 4;
}

.contact-bar p {
    font-size: 16px;
    margin-bottom: 0;
}

.contact-bar .btn-cta {
    font-size: 1rem;
}

.contact-bar span {
    cursor: pointer;
    text-decoration: underline;
}