/* Styles/SalesSite/css/main.css */

/* CSS Document */
@import url("/Styles/Library/vars.css");

:root {
    scroll-behavior: smooth;
    --wix-bg: url("https://static.wixstatic.com/media/71f788_4b81db5fa82e455bbd7c0d826687c876~mv2.jpg");
    --light-overlay: rgba(128, 128, 128, 0.1);
    --dark-overlay: rgba(0, 0, 0, 0.5);
    --overlay: var(--light-overlay);
}

    :root[data-bs-theme="dark"] {
        --overlay: var(--dark-overlay);
    }

    :root body#homePage {
        background-image: url("/images/business-meeting.png");
        background: url("/images/business-meeting.svg") top center / cover no-repeat border-box border-box fixed;
    }

body {
    position: relative;
    font-family: var(--font-base) !important;
}

#mytopmenu {
    display: none;
}
/*----- Logo & Nav -----*/
header {
    /*margin-bottom: 1em;*/
}

    header p {
        display: block;
        margin: 1em 0 0 0;
        padding: 0 0 0.5em 0;
    }

.top {
    position: absolute;
    z-index: 999;
    width: 100%;
    top: 50px;
}

.logo {
    background: rgba(255, 255, 255, 0.6) none repeat scroll 0% 0%;
    float: left;
    padding: 10px;
}

    .logo a {
        color: #000;
    }

        .logo a:hover {
            color: #c53417;
        }

    .logo h2 {
        font-size: 17.305px;
        font-weight: 900;
        margin: 0px;
        padding: 0;
        text-transform: uppercase;
    }

    .logo img {
        max-width: 135px;
    }
/*----- Header Slider----*/
#header {
    width: 100%;
}

body form > #intro ~ section, #header {
    border-top: 1px dashed #8888;
    background: var(--color-bg-dark);
}

#intro {
    background: transparent;
    min-height: 90vh;
    backdrop-filter: blur(5px);
    padding: 1em 5em;
}

    #intro ul {
        list-style-type: none;
        font-size: 1.2em;
    }

        #intro ul.bullets {
            list-style-type: disc;
        }

    #intro .content {
        padding: 2em 2em 1ch;
        text-align: left;
        position: relative;
    }

    #intro h1 {
        font-size: 3.5vw;
        font-weight: 600;
        margin: 0px;
        padding: 0;
        line-height: 1.5;
        margin-bottom: 0.2em;
    }

    #intro h2 {
        font-size: 2.5vw;
        font-weight: 600;
        margin: 0px;
        padding: 0 0 1em;
        line-height: 1.2;
    }

    #intro h3 {
        font-size: 2vw;
        color: var(--color-text);
        font-weight: 600;
        margin: 0px;
        padding: 0 0 1em;
        line-height: 1.2;
    }

    #intro h2.sm {
        font-size: 1.8em;
    }

    #intro .b {
        font-weight: bold;
    }

    #intro .content ol {
        margin-left: 1ch;
    }

:is([action*="x.a"], [action="./"]) #intro .content {
    border-radius: 4em;
    background: #8884;
}

[data-bs-theme="dark"] :is([action*="x.a"], [action="./"]) #intro .content {
    background: #0004;
}




.font-15 {
    font-size: 1.5em;
}

.text-light {
    color: var(--color-text-light) !important;
}

.shadow .text-light {
    text-shadow: .05em .05em .1em #000;
}

.clickBut {
    background: var(--color-bg-light-trans);
    padding: 10px;
    text-align: center;
    z-index: 22;
    position: sticky;
    bottom: 2em;
    right: 3em;
}

    .clickBut span, .clickBut img {
        float: right;
    }

.box-shadow {
    box-shadow: .5em .5em 2em var(--color-bg-dark);
}

:root:not([data-bs-theme="dark"]) .shadow {
    text-shadow: .25em .25em .5em #ccc;
}

#tblPricing td:not(.bgred) {
    padding: 10px;
    font-size: 18px;
    font-style: normal;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    background: var(--color-bg-light);
    color: var(--color-text);
}

#logo {
    letter-spacing: -1px;
    padding: 0;
    margin: 0;
    text-align: center;
    display: inline-block;
    position: relative;
    float: left;
    left: 1em;
    /*width: 20%;*/
}

#logoimg, #mclogo {
    width: 100%;
    max-width: min(420px, 25vw) !important;
}

:is([action*="x.a"], [action="./"]) #logoimg {
    box-shadow: .5em .5em 1em #000;
    border-radius: 50%;
}

header #logo:last-child {
    float: none;
    width: 100%;
}

#nav {
    /*position: absolute;*/
    right: 0.5em;
    top: 0;
    height: 3em;
    line-height: 3em;
}

    #nav ul {
        margin: 0;
        text-align: right
    }

        #nav ul li {
            display: inline-block;
        }

            #nav ul li a {
                display: block;
                text-decoration: none;
                padding: 0 10px;
                outline: 0;
                color: #000;
                font-size: 17.305px;
            }

            #nav ul li a {
                position: relative;
                float: right;
                color: var(--color-text);
                background: var(--color-bg-light-trans);
            }

                #nav ul li a:hover {
                    color: var(--color-accent);
                    background: var(--color-bg-light-trans);
                }
/*----- Opt-in section ----*/
.bluebg {
    background: #424A56;
    padding: 42px 0 22px;
}

.opt-container {
    text-align: center;
    color: #fff;
}

    .opt-container h2 {
        font-size: 57.597px;
        font-weight: 900;
        line-height: 1;
        padding: 0 0 22px;
        margin: 0;
    }

    .opt-container p {
        font-size: 22px;
        padding: 0 0 22px;
        margin: 0;
        font-weight: 300;
    }

    .opt-container .form input {
        width: 100%;
        padding: 15px;
        border: none;
        border-radius: 2px;
        margin-bottom: 20px;
    }
/* success message overlay*/
.msg {
    position: relative;
    transition: .3s;
}

.success {
    position: absolute;
    z-index: 20;
    width: 100%;
    height: 100%;
    background: rgba(106, 187, 217, 0.85);
}

    .success .text-msg {
        color: #fff;
        position: relative;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
    }

.error-msg {
    background: #c40000;
    text-align: center;
    color: #fff;
    font-size: 16px;
    padding: 15px 0;
}

.show_hide {
    display: block;
    font-size: 22px;
    padding-bottom: 22px;
    line-height: 1;
}
/*Mail Chimp setting*/
#mc_embed_signup {
    background: none !important;
}

input.button {
    font-size: 22px !important;
    font-weight: bold;
    text-align: center;
    border-radius: 2px;
    color: #fff !important;
    background: #295d70;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    line-height: 52px;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 2px;
    margin-bottom: 20px;
}

.mc-field-group input {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 2px;
    font-size: 16px;
    color: #ccc;
}
/*----- Feature section ----*/
.feature-container {
    padding: 0 0 57.597px;
}

    .feature-container img {
        max-width: 100%;
    }

    .feature-container ul {
        padding: 0;
        margin: 0;
    }

    .feature-container li {
        padding: 0 0 16.069px;
        list-style-type: disc;
        list-style-position: inside;
        text-indent: -1em;
        padding-left: 1em;
    }

#features {
    padding: 57.597px 0 0;
}

:is([action*="x.a"], [action="./"]) #features {
    padding: 5em 5em 8em;
}

.feature-styles h1 {
    font-size: 35.597px;
    color: var(--color-text);
    padding: 0 0 13.597px;
    margin: 0;
    line-height: 1;
}

.feature-styles .txt {
    font-size: 22px;
    line-height: 1.2;
    color: #666;
    font-weight: 300;
}

.feature-styles .getstarted a {
    color: #c53417 !important;
    text-decoration: none;
    font-weight: bold;
    transition: ease-in-out;
    transition-duration: .3s;
    font-size: 22px;
    padding: 0 0 13.597px;
    margin: 0;
}

    .feature-styles .getstarted a:hover {
        color: #000000 !important;
        text-decoration: none !important;
    }

.feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    position: absolute;
}

    .feature-icon i {
        position: relative;
        top: 40%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
    }

#nav ul li .red, .red {
    background: var(--color-accent);
    color: var(--color-bg-dark);
}

.green {
    background: #6ad993;
    right: 50px;
    top: 35px;
}

#nav ul li .blue, .blue {
    background: #424A56;
    color: #fff;
}

.orange {
    background: #f87c45;
    left: 70px;
    top: 45px;
}

.pgreen {
    background: #98d96a;
    right: 110px;
    top: -40px;
}

.yellow {
    background: #fccf3c;
    right: 50px;
    top: 35px;
}
/*----- Testimonial section ----*/
.testimonial-bg {
    background-image: url(../images/body/testimonial-bg.jpg) !important;
    background-attachment: fixed;
    margin: 0;
    padding: 57.597px 0 35.597px;
}

    .testimonial-bg h1 {
        font-size: 57.597px;
        color: #8888;
        font-weight: 900;
        line-height: 1;
        padding: 0px;
        margin: 0px;
        text-align: center;
    }

    .testimonial-bg .txt {
        color: #666666;
        font-weight: 400;
        margin: 0 auto;
        font-size: 22px;
        padding: 57.597px 0 0;
    }

        .testimonial-bg .txt li {
            padding: 0 0 22px;
        }

        .testimonial-bg .txt p {
            color: #666666;
            font-weight: 400;
            margin: 0 auto;
            padding: 0 0 22px;
        }

.testimonial-title {
    font-size: 30px;
    color: #000;
    text-align: center;
}

.testimonial-photo {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    overflow: hidden;
    margin: 40px auto;
}

.testimonial-content {
    font-size: 18px;
    color: #666;
    font-style: italic;
    margin: 0 auto !important;
    text-align: center;
}

    .testimonial-content span {
        font-style: normal;
        font-size: 16px;
        color: #000;
        font-weight: bold;
    }

        .testimonial-content span a {
            font-style: normal;
            color: #f87c45;
            font-weight: normal;
        }

.testimonial-bg .flexslider {
    padding: 40px 0 !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 40px !important;
}

.testimonial-bg .flex-control-nav {
    bottom: -10px !important;
    z-index: 40;
}
/*----- Login Page -----*/
#demotable {
    margin: 0 auto 40px !important;
}

    #demotable tr {
    }

        #demotable tr td {
            padding: 0 0 20px;
            border: 1px solid #ccc;
        }
/*----- Pricing section ----*/
#pricing {
    padding: 57.597px 0;
}

.pricing h1 {
    font-size: 57.597px;
    color: var(--color-text);
    font-weight: 900;
    text-align: center;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.pricing h2 {
    color: #000;
    font-size: 35.597px;
    text-align: center;
    margin: 0px;
    padding: 35.597px 0px;
    line-height: 1;
    font-weight: 400;
}

.pricing-box {
    /* content: hi; */
}

    .pricing-box .price {
        color: #fff;
        text-align: center;
        padding: 35.597px 0;
    }

    .pricing-box .price-first {
        color: #fff;
        text-align: center;
        padding: 35.597px 0;
        height: 114.6px;
    }

    .pricing-box .price .package {
        font-size: 30px;
        font-weight: bold;
    }

    .pricing-box .price .divider {
        height: 2px;
        background: rgba(255,255,255,.3);
        width: 40px;
        margin: 20px auto;
    }

    .pricing-box .price .amount {
        font-size: 17px;
        font-weight: 300;
        line-height: 1;
    }

    .pricing-box .price .duration {
        font-size: 22px;
        font-weight: 300;
        line-height: 1.2;
    }

    .pricing-box .featcontent {
        background: #f4f5f6;
    }

        .pricing-box .featcontent .feat-list-title {
            font-weight: 600;
            font-style: normal;
        }

        .pricing-box .featcontent .feat-list {
            font-weight: 400;
            color: #656667;
        }

            .pricing-box .featcontent .feat-list ul {
                list-style: none;
                margin: 0px;
                padding: 0px;
            }

            .pricing-box .featcontent .feat-list li {
                border-bottom: 1px solid rgba(0,0,0,0.1);
                padding: 22px;
                font-size: 22px;
                font-style: italic;
                text-align: center;
            }

                .pricing-box .featcontent .feat-list li:last-child {
                    border-bottom: none;
                }

        .pricing-box .featcontent .feat-list-first {
            font-weight: 400;
            color: #656667;
        }

            .pricing-box .featcontent .feat-list-first ul {
                list-style: none;
                margin: 0px;
                padding: 0px;
            }

            .pricing-box .featcontent .feat-list-first li {
                border-bottom: 1px solid rgba(0,0,0,0.1);
                padding: 17px;
                font-size: 17px;
                text-align: center;
            }

        .pricing-box .featcontent .feat-list li:last-child {
            border-bottom: none;
        }

i.fa, em.fa {
    color: var(--color-primary);
}
/*bg colors for packages*/
.bgred {
    background: #c53417;
}

.bggreen {
    background: #6ad993;
}

.bgblue {
    background: #6abbd9;
}

.bgorange {
    background: #f87c45;
}

.bgpgreen {
    background: #98d96a;
}

.bgyellow {
    background: #fccf3c;
}

.bggray {
    background: #999;
}
/*---- Contact Section ---*/
:is([action*="x.a"], [action="./"]) #contact {
    display: flex;
    justify-content: space-between;
}

#contact {
    background: #424a56;
    background-image: url(../images/body/dot-map.png);
    background-position: top center;
    background-repeat: no-repeat;
    padding: 57.597px 0;
    position: relative;
}


    #contact h1 {
        font-size: 57.597px;
        color: #c53417;
        font-weight: 900;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    #contact h2 {
        color: var(--color-text);
        font-size: 30px;
        text-align: center;
        padding: 0 0 57.597px;
        margin: 0;
    }

    #contact .contact-form {
        width: 100%;
    }

    #contact .pull-right {
        background: linear-gradient(var(--overlay), var(--overlay)), url("https://static.wixstatic.com/media/a33721_5bbb1d2111834abdbe63b91dc423a591~mv2.jpg") center center / cover;
        position: absolute;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 50%;
    }

    #contact a:not(.fa) {
        color: var(--color-primary);
        display: inline-block;
        padding: 1em;
    }

    #contact .fa {
        color: var(--color-secondary);
    }
    #contact a:hover .fa {
        color: var(--color-text);
    }


    #contact :is(.phone,.address), #contact :is(.phone,.address) a {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #contact :is(.phone,.address) a > div {
            line-height: 1.2em;
            color: var(--color-text);
        }

.contact-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 20px 0;
    font-size: 20px;
    color: var(--color-text);
}

    .contact-info i {
        margin-right: 15px;
    }

.contact-form :is(input, textarea) {
    width: 100%;
    padding: 15px;
    border: 1px solid #8888;
    border-radius: 2px;
    font-size: 16px;
    margin-bottom: 20px;
    background: var(--color-bg-dark);
}

.contact-form .btn-message {
    width: 195px;
    background: #c53417;
    color: #fff;
    font-size: 20px;
}

    .contact-form .btn-message:hover {
        background: #DB3A1A;
        transition: ease-in-out;
        transition-duration: .3s;
    }

.success-contact .text-msg {
    background: #56E047;
    text-align: center;
    color: #fff;
    font-size: 16px;
    padding: 15px 0;
}

#RecaptchaDiv > div {
    margin: 0 auto 25px;
}
/*----- Footer section ----*/
.xdivider {
    margin: 40px 0px;
}

.footer {
    padding: 30px 0;
    background: var(--color-bg-light);
    z-index: 11;
}

.footer-nav {
    font-size: 16px;
    color: #000;
}

    .footer-nav ul {
        padding: 0px;
        margin: 0px;
        list-style: none;
    }

    .footer-nav li {
        display: inline-block;
        text-align: right;
    }

        .footer-nav li:after {
            content: '|';
            margin: 0 10px;
            color: var(--color-text)
        }

        .footer-nav li:last-child:after {
            content: '';
            margin: 0px 0px;
        }

    .footer-nav a {
        color: var(--color-text);
        text-decoration: none;
    }

        .footer-nav a:hover {
            color: #f87c45;
        }

.social-icons {
    font-size: 20px;
    padding: 15px 0;
}

    .social-icons ul {
        padding: 0px;
        margin: 0px;
        list-style: none;
    }

    .social-icons li {
        display: inline-block;
        margin: 0 10px;
    }

        .social-icons li:last-child {
            margin: 0px 0px;
        }

    .social-icons a {
        color: #b2b2b3;
        text-decoration: none;
    }

        .social-icons a:hover {
            color: #f87c45;
        }

.copyright {
    font-size: 16px;
    color: #777;
    text-align: center;
}

#signupTop .logo {
    margin-top: 0;
}
/*Sign Up Page*/
#mainContent_Button1 {
    width: 195px;
    background: #c53417;
    color: #fff;
    font-size: 20px;
    float: right;
    padding: 15px;
    border: none;
    border-radius: 2px;
}

    #mainContent_Button1:hover {
        background: #DB3A1A;
        transition: ease-in-out;
        transition-duration: .3s;
    }

.siteBadges {
    clear: both;
    margin: 0 auto;
    width: 50%;
    text-align: center;
}

    .siteBadges #DigiCertClickID_Yv0l4rL2 {
        display: inline-block;
        margin: 20px 0;
    }

    .siteBadges img {
        display: inline-block;
        margin: -85px 0 0 10px;
        padding: 0;
    }

.captchaContainer {
    border: 1px solid #ccc;
    padding: 40px;
    margin: 20px 0;
}

.captchaMeta {
    margin: 15px 0;
}

    .captchaMeta input {
        margin: 0 10px;
    }

    .captchaMeta .form-label {
        font-size: 17px;
    }

.divSignUpHeader {
    background: #424a56;
    padding: 15px 0;
}

.passStrengthify {
    display: block;
    position: absolute;
    bottom: 10px;
    margin: 0 !important;
}

.registerList {
    list-style: none;
    margin: 0;
    padding: 0 0 40px;
    position: relative;
}

    .registerList li, .type-text li {
        margin: 22px 0;
        padding: 0;
    }

        .registerList li label, .type-text label {
            float: left;
            margin: 0;
            font-size: 22px;
        }

        .registerList li input, .type-text input, .type-text select {
            width: 80%;
            float: right;
            padding: 5px;
            box-sizing: content-box;
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            border: 1px solid #ccc;
            border-radius: 2px;
        }
/*
LOGIN PAGE
*/
#loginForm {
    background: var(--color-bg-light);
    text-align: center;
    border: 1px solid #ddd;
    max-width: 480px;
    margin: 5em auto;
    border-radius: 2em;
    padding-bottom: 3em;
    display: flex;
    clear: both;
    flex-direction: column;
    box-shadow: 2px 2px 20px #0004;
}

    #loginForm legend {
        margin-bottom: 40px;
    }

    #loginForm table {
        width: 80%;
        margin: 0 auto;
    }

        #loginForm table, #loginForm table :is(tbody, tr, td) {
            display: block;
        }

.loginButton {
    width: 195px;
    background: #c53417;
    color: #fff;
    font-size: 20px;
    padding: 15px;
    border: none;
    border-radius: 2px;
    margin: 20px 0;
}

    .loginButton:hover {
        background: #DB3A1A;
        transition: ease-in-out;
        transition-duration: .3s;
    }

.loginList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

    .loginList li {
        margin: 0;
        padding: 0;
    }

        .loginList li input {
            float: left;
            margin: 0;
            font-size: 1.75em;
            border-radius: 0.5em;
            width: 100%;
            border: 1px solid #0004;
            padding: 0.5em;
        }

.rememberBox {
    width: 100%;
    height: 2.5em;
    font-size: 2em;
    text-align: left;
    border: 1px solid #0004;
    border-radius: 0.5em;
    user-select: none;
    padding-left: .25em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

    .rememberBox label, .rememberBox input {
        pointer-events: none;
    }

    .rememberBox label {
        display: inline-block;
        width: 100%;
        line-height: 1.2em;
        color: var(--color-midtone);
        font-size: 0.85em;
    }

    .rememberBox input {
        display: inline-block;
        line-height: 1;
        float: left;
        width: 2.5em;
        height: 2.5em;
        margin: 0;
    }

.clear {
    clear: both;
    float: left;
    width: 100vw;
}

    .clear:after {
        content: " ";
        display: table;
        clear: both;
    }

.type-text {
    margin-bottom: 15px;
}

.loginPassword {
    float: right;
    width: 100%;
    border: 1px solid #00000044;
    border-radius: 0.5em;
}

:is(.loginPassword, .rememberBox, .usernameTextBox) {
    background: var(--color-bg-light);
}

    :is(.loginPassword, .rememberBox, .usernameTextBox):is(:hover,:focus), .loginPassword:has(input:focus) {
        border-color: #000;
        transition: all 0.5s;
    }

:is(.loginPassword input, .rememberBox, .usernameTextBox)::placeholder {
    color: var(--color-midtone);
}

.loginList li input.passwordTextBox {
    float: left;
    width: calc(100% - 2.5em) !important;
    display: block !important;
    background: transparent;
    line-height: 1.8;
    border: none;
}

.showPassword {
    width: 1.5em !important;
    border: none !important;
    border-radius: 0.5em;
    font-size: 2.5em;
    line-height: 1.7em !important;
    display: block !important;
    float: left;
    cursor: pointer;
}
/*SKM New Home page design*/
body {
    background: var(--color-bg-dark)
}
/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background: var(--color-bg-dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    transition: opacity 0.2s ease;
    color: var(--color-primary);
}

    a:hover {
        opacity: 0.8;
    }
/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em 2em;
    background: var(--color-bg-dark);
    border-bottom: 1px solid #e5e5e5;
}

    .header .logo img, .header .badge img {
        height: 50px;
    }
/* Hero Section */
.hero {
    text-align: center;
    padding: 4em 1em;
    background: var(--color-bg-dark);
}

    .hero h1 {
        font-size: 2.5em;
        font-weight: bold;
        color: var(--color-primary);
        max-width: 800px;
        margin: 0 auto;
        line-height: 1.2;
        font-family: var(--header-font);
    }
/* Features Section */
:is([action*="x.a"], [action="./"]) #features {
    padding: 5em 5em 8em;
    text-align: left;
    position: relative;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2em;
    padding: 2em 2em;
    background: var(--color-bg-light);
}

.section {
    padding: 3rem 1rem;
}

.h2 {
    font-size: 2rem;
    margin: 0 0 1.25rem;
    text-align: center;
}

.cards {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
    background: var(--color-bg-light);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 .25rem 1rem rgba(0,0,0,.05);
    transition: transform .35s ease, filter .35s ease;
}

    .card h3 {
        margin: .25rem 0 .5rem;
        font-size: 1.1rem;
    }

    .card p {
        margin: 0 0 .5rem;
        color: var(--color-text);
    }

    .card ul {
        margin: .25rem 0 0 1rem;
        color: var(--color-text);
    }

.feature-item {
    text-align: center;
    padding: 1em;
}

    .feature-item img {
        height: 60px;
        margin-bottom: 1em;
    }

    .feature-item p {
        font-size: 1em;
        color: var(--color-text);
    }
/* Pricing & Guarantee */
.pricing {
    text-align: center;
    padding: 2em 1em;
    background: var(--color-bg-light);
    font-size: calc(var(--font-size-base) * 2);
}

    .pricing p {
        margin: 0.5em 0;
        font-size: 2.125em;
    }
/* Buttons */
.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 0.75em 1.5em;
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    /*text-shadow: 1px 2px 2px var(--color-bg-dark);*/
}

.btn-primary {
    background: var(--color-primary);
    color: #ffffff;
    top: 0;
    position: relative;
}

    .btn-primary:hover {
        background: var(--color-secondary) !important;
        text-decoration: none;
    }
/* Contact Section */
.contact {
    padding: 2em 1em;
    background: var(--color-bg-dark);
    border-radius: 4vw 4vw 2vw 2vw;
}

    .contact h2 {
        text-align: center;
        font-size: 1.75em;
        margin-bottom: 1em;
        color: var(--color-text);
    }

.btn-orange {
    float: right;
}

    .btn-orange a {
        border-radius: 2px !important;
        background: #C53417 none repeat scroll 0% 0%;
        color: #FFF;
        font-size: 17.305px;
        font-weight: bold;
        padding: 20px;
        max-width: 280px;
        box-shadow: 0px 1px 1px var(--color-bg-dark);
        display: block;
        transition: all 0.3s ease-in-out 0s;
        text-shadow: none;
        text-align: center;
    }

        .btn-orange a:hover {
            background: #DB3A1A;
            text-decoration: none;
        }

#intro {
    /* max-height: 200vh; */
    position: relative;
}

    #intro .flexy {
        padding-top: 1em;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 80%;
        margin: 0 auto;
    }

        #intro .flexy > * {
            width: 20%;
        }

        #intro .flexy img {
            width: 100%;
            max-width: 25vw;
        }

        #intro .flexy #mclogo {
            text-align: center;
        }

            #intro .flexy #mclogo h2 {
                font-weight: 400
            }

    #intro .style2 {
        float: right;
        border-radius: 2px !important;
        background: #424a56 none repeat scroll 0% 0%;
        color: #FFF;
        font-size: 17.305px;
        font-weight: bold;
        padding: 20px;
        max-width: 280px;
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.6);
        display: block;
        transition: all 0.3s ease-in-out 0s;
        text-shadow: none;
        text-align: center;
        margin-right: 35.597px;
    }

        #intro .style2:hover {
            background: #DB3A1A;
            text-decoration: none;
            color: var(--color-text) !important
        }

#lstNeg {
    list-style: disc;
    margin: 0;
    padding: 0;
    font-weight: 700;
}

#itseasy, #information, #joinlink {
    /*background: var(--color-bg-light);*/
}

#itseasy {
    text-align: center;
}

#information {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 4em;
    padding: 2em 2em;
}

    #information p {
        font-weight: bold
    }

#joinlink {
    text-align: center;
}

    #joinlink a {
        margin: 1em auto;
        display: inline-block
    }

#about {
    page-break-after: always;
    page-break-before: always;
    page-break-inside: avoid;
}

    #about h4 {
        font-size: 2em;
        margin-bottom: 2em;
    }

    #about .flexbox {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    #about .card {
        flex: 0 1 480px;
        max-width: 480px;
        margin: 0;
    }

    #about .photo {
        width: 100%;
        aspect-ratio: 3 / 4;
        border-radius: 3em;
        overflow: hidden;
        box-shadow: 0 .25em 1em #8888;
        position: relative;
    }

        #about .photo img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform-origin: center;
            transition: transform .35s ease, filter .35s ease;
            will-change: transform;
        }

        #about .photo:hover img {
            transform: scale(1.05);
        }

    #about b {
        display: block;
        margin-top: 1.5em;
        font-size: 1.5em;
        line-height: 1.2;
        color: var(--color-text);
    }

    #about figcaption {
        margin-top: .5em;
        font-size: 1.5em;
        line-height: 1.2;
        color: var(--color-text);
    }

:is(#about, #contact) {
    padding: 3em 1em;
    text-align: center;
}

    :is(#about, #contact) h3 {
        font-size: 3em;
    }

#demoModal .modal-header {
    padding: 15px;
    border-bottom: none;
    /* min-height: 16.42857143px; */
}

.pricing-box .featcontent .feat-list li {
    font-size: 18px !important;
    font-style: normal !important;
}

.pricing-box .price .duration {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.pricing-box .featcontent .feat-list li {
    padding: 10px;
}

.get-started:hover {
    text-decoration: none;
    color: #fff;
    background: #DB3A1A;
}

.get-started:hover, .get-started:active, .get-started:visited {
    text-decoration: none;
    color: #fff;
}

.hidden {
    display: none;
}

@keyframes bounce {
    0% {
        transform: scale(10,5) translateY(0);
    }

    100% {
        transform: scale(10,5) translateY(-10%);
    }
}

#scrollDown {
    animation: bounce 0.8s infinite alternate;
    position: fixed;
    bottom: 1.25em;
    left: 50%;
    transform: scale(20, 5);
    color: var(--color-text);
    z-index: 10;
    user-select: none;
}
/* Responsive Adjustments */
@media screen and (max-width: 1080px) { /*tablet*/
    #intro .content h1 {
        font-size: 3em;
        line-height: 1.2;
        font-weight: 900;
        margin: 0px;
        padding: .5em 0;
    }

    #intro .content h2 {
        font-size: 2em;
        font-weight: 900;
        margin: 0px;
        margin-top: 15px;
        padding: 0 0 20px
    }

    #intro .content h3 {
        font-size: 2em;
        font-weight: 900;
        margin: 0px;
        margin-top: 15px;
        padding: 0 0 20px
    }

    #lstNeg .col {
        font-weight: 900;
    }

    #intro .content .clickBut.float {
        bottom: 2em;
        width: auto;
        top: auto;
        left: 0;
        right: 0;
        z-index: 999;
        text-align: center;
        background: var(--color-bg-light-trans);
    }

    #about .card {
        flex: 0 1 480px;
        max-width: 480px;
    }

    #footer .footer {
        padding-bottom: 11em;
        z-index: 11;
    }

    #contact .pull-right {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    :root body#homePage {
        background: url("/images/business-meeting.svg") top right / cover no-repeat border-box border-box fixed;
    }

    #mytopmenu {
        display: inherit !important;
        position: absolute;
        right: 1em;
        top: 9px;
        line-height: 1;
        letter-spacing: -1px;
        padding: 0;
        margin: 0;
        z-index: 9999;
    }

    .topMenuOpen {
        display: block !important;
    }

    #nav {
        z-index: 1;
        right: 0;
    }

        #nav ul {
            margin-top: 0;
            padding-left: 7px;
        }

            #nav ul li, header:hover nav {
                opacity: 1;
            }

    .blue {
        background: inherit;
        color: black !important;
    }

    .contact-info {
        flex-direction: column !important;
    }

        .contact-info a {
            padding: 0;
            height: auto !important;
        }

    .hero h1 {
        font-size: 2em;
    }

    #logo {
        width: 30%;
    }

    #header #logo {
        width: 100%;
    }

    #header #nav {
        height: auto;
    }

        #header #nav ul {
            padding: 0;
        }

        #header #logo, #header #nav, #header #nav ul {
            position: static;
        }

    #mainContent > div > div ul, #mainContent > div > div ol {
        padding-left: 1ch;
    }

    .pricing p {
        font-size: 16px;
    }

    .features#features {
        padding: 0;
    }

    .pricing,
    .contact {
        padding: 1.5em 1em;
    }

    .banner .carousel-indicators {
        top: 600px;
    }

    #intro {
        padding: 0 1ch !important;
    }

        #intro .content {
            background: transparent !important;
            position: static;
            text-align: center;
            z-index: 10;
            width: 100%;
            position: relative;
        }

            #intro .content h1 {
                font-size: 3em;
                line-height: 1.2;
                font-weight: 900;
                margin: 0px;
                padding: 2em 0;
            }

            #intro .content h2 {
                font-size: 2em;
                font-weight: 900;
                margin: 0px;
                margin-top: 15px;
                padding: 0 0 20px
            }

        #intro .btn-primary + div {
            padding: 0;
            max-height: 0;
            width: 80vw;
            text-align: left;
            top: 10px;
            right: 10vw;
            bottom: unset;
            position: absolute;
            transform: translate(0,-20vh);
        }

    #intro {
        /*         max-height: 200vh; */
        position: relative;
    }

        #intro .flexy {
            flex-direction: row;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
            width: 100%;
        }

            #intro .flexy > * {
                width: 30%;
            }

            #intro .flexy > .center {
                width: 50%;
            }

            #intro .flexy #cpaStamp {
                width: 20%;
            }

            #intro .flexy img {
                width: 100%;
                max-width: 45vw;
            }


    #lstNeg {
        flex-direction: column;
        flex-wrap: wrap;
    }

    #intro #lstNeg .col {
        text-align: center;
    }

    .btn-orange {
        margin-top: 30px;
    }

        .btn-orange a {
            border-radius: 2px !important;
            background: #f87c45;
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            padding: 15px 20px;
            max-width: 280px;
            box-shadow: 0px 1px 1px rgba(0,0,0,0.6);
            display: block;
            transition: ease-in-out .3s;
            margin: 0 auto;
        }

            .btn-orange a:hover {
                background: #e25719;
                text-decoration: none;
            }
    /* success message overlay*/
    .success .text-msg {
        font-size: 24px;
    }
    /*----- Pricing section ----*/
    .pricing-box {
        margin-bottom: 20px;
    }

        .pricing-box:last-child {
            margin-bottom: 0px;
        }

    #contact .fa-envelope ~ a {
        font-size: 4.5vw !important;
    }
}

@media (max-width: 320px) {
    .banner .carousel-fade .carousel-inner .item {
        background-attachment: scroll;
    }
}

@media (orientation: portrait) {
    #intro {
        /*max-height: 200vh; */
        position: relative;
    }
}

@media (orientation: landscape) {
    #intro {
        max-height: 200vw;
        position: relative;
    }
}

@media only print {
    #scrollDown, #RecaptchaDiv, #lstNeg ~ br, #contact .pull-right {
        display: none !important;
    }

    .clickBut {
        float: none !important;
        position: static !important;
    }

    #contact .contact-form :is(input, textarea) {
        border: 1px solid #000 !important;
        background: transparent !important;
        color: #000 !important;
    }

        #contact .contact-form :is(input, textarea)::placeholder {
            color: #000 !important;
        }

    #lstNeg {
        display: block;
    }

        #lstNeg .col {
            display: block;
            text-align: left;
            margin-bottom: 1em;
            text-align: left !important;
        }
}

body:not([data-bs-theme=dark]) span.clientSuccess {
    color: green;
}

@media (prefers-color-scheme: dark) {
    span.clientSuccess {
        color: rgb(166, 227, 161);
    }

    #intro {
        background: hsla(0,0%,0%, 0.5) none;
    }

        #intro.shadow {
            text-shadow: .05em .05em .1em #000;
        }

    .card {
        text-shadow: .1em .1em .25em #000;
    }
}

[data-bs-theme="dark"] span.clientSuccess {
    color: rgb(166, 227, 161);
}

[data-bs-theme="dark"] #intro.shadow {
    text-shadow: .25em .25em .5em #000;
}

[data-bs-theme="dark"] #intro {
    background: hsla(0,0%,0%, 0.5) none;
}

#txtFaxDiv {
    position: absolute;
    left: -9999px;
}