/* input(3337,1): run-time error CSS1019: Unexpected token, found '}'
input(3346,1): run-time error CSS1019: Unexpected token, found '}'
input(8956,5): run-time error CSS1019: Unexpected token, found '}'
input(8960,5): run-time error CSS1019: Unexpected token, found '}'
input(8970,5): run-time error CSS1019: Unexpected token, found '}'
input(9960,5): run-time error CSS1019: Unexpected token, found '}'
input(10340,5): run-time error CSS1019: Unexpected token, found '}'
input(10349,1): run-time error CSS1019: Unexpected token, found '}' */
/* input(3329,1): run-time error CSS1019: Unexpected token, found '}'
input(3338,1): run-time error CSS1019: Unexpected token, found '}'
input(8948,5): run-time error CSS1019: Unexpected token, found '}'
input(8952,5): run-time error CSS1019: Unexpected token, found '}'
input(8962,5): run-time error CSS1019: Unexpected token, found '}'
input(9952,5): run-time error CSS1019: Unexpected token, found '}'
input(10332,5): run-time error CSS1019: Unexpected token, found '}'
input(10341,1): run-time error CSS1019: Unexpected token, found '}' */
.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: table;
    transition: opacity 0.3s ease;
}
.modal-wrapper {
    display: table-cell;
    vertical-align: middle;
}
        .modal-container {
            width: 50%;
            height: 65%;
            margin: 0px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .modal-header h3 {
            margin-top: 0;
            color: #42b983;
        }

        .modal-body {
            margin: 20px 0;
        }

        .modal-default-button {
            float: right;
        }

        .modal-enter-from {
            opacity: 0;
        }

        .modal-leave-to {
            opacity: 0;
        }

        .modal-enter-from .modal-container,
        .modal-leave-to .modal-container {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
/* Scroll bar stylings */
.modal-container::-webkit-scrollbar {
    width: 5px;
    border-radius: 0px 5px 5px 0px;
    background: lightgray;
}

/* Track */
.modal-container::-webkit-scrollbar-track {
    background: lightgray;
}

/* Handle */
.modal-container::-webkit-scrollbar-thumb {
    background: grey;
}

    /* Handle on hover */
    .modal-container::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  fonts  */

@font-face {
    font-family: 'Archivo-Bold'; 
    src: url('../fonts/Archivo/Archivo-Bold.woff?v=8b0sYOh3hSuIVQl4etqHvBiTSLU') format('woff'); 
    font-display: swap; 
}

@font-face {
    font-family: 'Archivo-Medium'; 
    src: url('../fonts/Archivo/Archivo-Medium.woff?v=ZtMfABJ_jZ7AXReV1S9pzzgN--Q') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Archivo-Semibold'; 
    src: url('../fonts/Archivo/Archivo-SemiBold.woff?v=qETCFD6yTiZGQSei-gKTF83UKao') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Archivo-Regular';
    src: url('../fonts/Archivo/Archivo-Regular.woff?v=hYuQehgbtUM3zaZiTnX5LsxpfE0') format('woff');  
    font-display: swap;
}

@font-face {
    font-family: 'Inter-Bold';
    src: url('../fonts/Inter/Inter-Bold.woff?v=oNZMOGNyaX0YuP9SF_Ztgj3kAY0') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Inter-Medium';
    src: url('../fonts/Inter/Inter-Medium.woff?v=XncPX-79N_mFc2rI5sbNyHnMdaI') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Inter-Regular';
    src: url('../fonts/Inter/Inter-Regular.woff?v=Sj86UFnEXQ2EZ5OUqQ_B5zqDmHk') format('woff');
    font-display: swap;
}

/*~~~~~~~~~~~~~~~~~~~~  end of fonts  */

/*{
    scrollbar-face-color: #bfbfbf;
    scrollbar-shadow-color: #bfbfbf;
    scrollbar-track-color: #e6e6e6;
    scrollbar-arrow-color: #e6e6e6;
    scrollbar-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.1);
    scrollbar-width: thin; 
}*/

::-webkit-scrollbar {
    width: 7px; 
    height: 7px; 
}

::-webkit-scrollbar-track {
    border-radius: 10px;  
    background: var(--lightestgrey); 
}

::-webkit-scrollbar-thumb {
    min-height: 50px !important; 
    border-radius: 10px; 
    background: #777; 
}
    
/*~~~~~~~~~~~~~~~~~~~~~~~~~~*/

*:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

.h-100svh {
    height: 100svh !important;
}

.text-black {
    color: #222 !important;
}

.text-lt-black {
    color: #555 !important;
}

    .text-lt-black.matched {
        color: #3db33d !important; 
    }

.text-blue {
    color: #1473ff !important; 
}

.text-grey {
    color: #777 !important;
}

.text-green-info {
    color: #3db33d !important;
}

.text-orange-info {
    color: #ffa500 !important;
}

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

.fs-5 {
    line-height: 1.50rem !important;
}

.fs-10 {
    font-size: 10px !important; 
    line-height: 14px !important; 
}

.fs-12 {
    font-size: 12px !important; 
    line-height: 16px !important; 
}

.fs-14 {
    font-size: 14px !important;  
    line-height: 18px !important; 
}

.fs-16 {
    font-size: 16px !important;
    line-height: 20px !important;
}

.fs-18 {
    font-size: 18px !important;
    line-height: 22px !important;
}

.fs-20 {
    font-size: 20px !important;
    line-height: 24px !important;
}   

.font-Archivo-Medium {
    font-family: 'Archivo-Medium', sans-serif;
}

.font-Archivo-Bold {
    font-family: 'Archivo-Bold', sans-serif;
}

.font-Inter-Medium {
    font-family: 'Inter-Medium', sans-serif !important; 
}

.font-Archivo-Semibold {
    font-family: 'Archivo-Semibold', sans-serif !important;  
} 

.font-Inter-Bold {
    font-family: 'Inter-Bold', sans-serif; 
}

.fs-normal {
    font-style: normal !important; 
}

.mt-10 {
    margin-top: 10px !important;
}

.p5,
.alert.p5 {
    padding: 5px !important;
}

.border-none {
    border: 0 !important; 
}

.bg-none {
    background: none !important;
}

.border-bottom-grey {
    border-bottom: 1px solid #eee !important;
}

a:visited {
    text-decoration: none !important;
}

.active-link {
    font-weight: bold;
    color: #00008b;
    text-decoration: none;
    border-radius: 4px;
}

.alert {
    padding: 10px !important;   
}

.btn-blue {
    color: #fff !important;
    background: #1874ff !important;
}

    .btn-blue:hover {
        background: #0962e8 !important; 
    }

body {
    font-family: "Inter-Regular", sans-serif;
    overflow-x: hidden;
    padding: 0 !important;
}

input[type=submit]:focus {
    background-color: #9cf;
    border: 1px solid red !important
}

.invalid {
    border-color: darkred;
    background-color: #f6eeee;
    margin-bottom: 0
}

.error-message {
    margin-bottom: 1em;
    color: #4d0000
}

    .error {
        display: inline-block;
        font-size: 12px !important;
        line-height: 16px !important;
        color: #ac0b0b !important;
        text-align: left;
        margin: 5px 0 0;
    }

input:required:valid {
    border-color: green; 
}

textarea:focus {  
    border-color: green !important;
}

select:required:valid {
    border-color: green
}

form .fa-eye-slash {
    opacity: 0.3;
}

main {
    min-height: 75vh;
}

.language {
    font-family: "Archivo-Regular", sans-serif;
    font-size: 14px !important;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAYAAAD5YeaVAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAC+SURBVHgBlZDPDcIgFMbbhjY9dgTdREfooT3rBjqBdgM7gR4bIMEN7AaOICNwJ4CPGBI01NIv+ULey4/3L2GMVeBVEqFMSvm0JoSc5uAUY2y8mIO7tm1vMfAnmaYjQmhf1zX/GiNUwRizgdFelNKrv08QdtJa7+DTYxiGw+QYE+JZskAxsIAd7IXWaAbs8zw/w1WEDYKwPR08XdM0o5//hTm0PELLe6iIhTm4AqgviuLiWgZhpdS2LEvxD3J6AzOhUlUMvVE5AAAAAElFTkSuQmCC);
    background-size: 8px 10px;
    background-repeat: no-repeat;
    background-position: right .75rem center;
    border: 1px solid #ced4da
}

    .language:focus {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAmCAYAAABK4fLXAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAG+SURBVHgB7ZdPTsJAFIfftBQ5Rt3RW8DSRK3eAE6gnMD2BNITgCcwAROX9ga4Q9zYI7DU9M/zDRWSQlNaZqbd+C0INEPy9TdvZt4A/JPC+EdrvuwB6vbmuxF73xdWADXC9NnqBgCfM081NjX0xK1LRgPEx4OnCQ7CkL1p89UD1AAl8YFHxgSUlBtfW1NQhFZijEmuE/1lNem8Lk1QQJkksiiolzJJZPmrF322HIAkqieRJWAMh9GV5YMA1ZPIYiJSKoL1IppEBmTMSaK2B7fn6yr/E00iA0N0dP1nUbVepCaxR2AY2C+ziqQmsYdJq+irTL2olEhJl/Si6AhQOR15BHlHQN0SW3yql+G2XtRPRz49Xi+t2efmBG8qiR20rN2mkthBG9xd4xKcxiUYwlOjEiTgRXb3vhEJavF9agH6XID/bkG95PYfdUmsaSl6UdIZ5x3z6iWoJ43D9qiox1AmweedKs+NLrv+sbEqJOiNcRRVuKfIlCicd+USPPqITkU48S4iJEGbzTtoFL1gy3+qxJp2OTe0u2OQQGWJzVabnDlxxXmXIiE676ISUq56xRJIzSfj1/8D0iVnWw4o5hdhT8s8uc2dOwAAAABJRU5ErkJggg==);
        background-size: 8px 10px;
        box-shadow: 0 0 0 .25rem rgba(13, 110, 253, 0);
        background-color: #e7fbff;
        border: 1px solid #00BFF3
    }

input[type=radio] {
    appearance: checkbox;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    -ms-appearance: checkbox;
    border: 1px solid #000;
    border-radius: 0 !important
}

.form-select {
    font-size: 13px;
    padding: 11px;
    line-height: 17px;
    font-family: "Inter-Medium", sans-serif !important; 
    background-image: none;
}

.form-check-label:after {
    color: transparent; 
}

.form-label,
.reg-form .form-label {
    color: #444;
    font-size: 14px; 
    font-weight: 500;
    line-height: 20px;
    font-family: 'Archivo-Medium', sans-serif !important;
}

.form-control,
.creditCardDetailModal form input {
    color: #999;
    font-size: 13px;
    padding: 11px;
    line-height: 17px;
    font-family: 'Archivo-Medium', sans-serif !important;
}

    .form-control.rounded-pill {
        border-radius: 10px !important; 
    }

    .form-control:focus {
        box-shadow: 0 0 0 .25rem rgba(13, 110, 253, 0);
        border: 1px solid red;
    }

    .form-control::-moz-placeholder {
        font-weight: 400;
        font-family: 'Archivo-Medium', sans-serif !important;
    }

    .form-control::placeholder {
        font-weight: 400;
        font-family: 'Archivo-Medium', sans-serif !important;
    }

    .form-control:focus:focus-within {
        font-weight: 400;
        font-family: 'Archivo-Bold', sans-serif !important;
    } 

.grayBox {
    margin: 0 0 30px;
    padding: 30px 20px 0;
    background: #f9f9f9;
} 

.mt-30 {
    margin-top: 30px;
}

.z-10 {
    z-index: 10 !important; 
}

.pswd-box {
    margin: 60px 0 0;
}

    .pswd-box .col-12 .head {
        font-size: 20px;
        line-height: 24px;
        text-align: center;
    }

.talent-dashboard .navbar.header-snap-roles {
    padding: 20px 60px;
}

/*~~~~~~~~~~~~~~~~~~~~  media queries  */
@media (max-width: 1199px) {
    .talent-reg-people {
        background: none;
    }
}

@media (max-width: 992px) {

    .workEligibility {
        display: block !important;
    }

        .workEligibility > label {
            display: block;
            margin: 0 0 10px;
        }

        .workEligibility > .d-flex {
            margin: 0 0 0 -15px;
        }

    .talent-registration-box .btn-1 {
        max-width: 205px !important;
    }

    .talent-registration-box {
        padding: 30px; 
    }

}

@media (max-width: 767px) {

    #talentInformation1 .talent-form {
        padding: 30px 15px !important;
    }

    .talent-registration-box {
        padding: 30px 15px;
    }

    .registrationLangChange {
        justify-content: center;
    }

    .talent-dashboard-progress-bar {
        margin: -200px 0 0;
    }

    .grayBox {
        padding: calc(var(--bs-gutter-x) * .5);
        background: none;
    }

    .talent-dashboard-progress-bar {
        padding: 0 15px;
    }

    .test-bottom {
        padding-top: 10px !important;
    }

    .test-para-main {
        margin-top: 0;
    }

    .pswd-box {
        margin: 30px 0 0;
        padding: 0 30px 30px;
    }
}

@media (max-width: 640px) { 

    .welcome-msg-body .container-fluid,
    .welcome-msg-body .container-fluid main,
    .welcome-msg-body .container-fluid main .talent-reg-form {
        height: 100%;
    }    
}

.options-container {
    position: absolute;
    left: 0;
    max-width: 250px; 
    z-index: 999;
}

    .options-container ul {
        min-width: 100%;
        margin: 0 !important;
        padding: 0;
    }

        .options-container ul li {
            font-size: 14px;
            line-height: 18px;
            text-align: left;
            cursor: pointer;
            padding: 5px 10px;
            white-space: normal;
        }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~  talent dashboard  */

.login-sub {
    flex-wrap: wrap;
}

    .login-sub form {
        width: 100%;
        max-width: calc(100% - 20px);
    }

    .login-sub .login-google,
    .login-sub .login-facebook {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 15px 0;
    }

        .login-sub .login-google button,
        .login-sub .login-facebook button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 40px;
            font-size: 20px;
            line-height: 26px;
            color: #fff;
            text-decoration: none;
            border-radius: 10px;
            border: 0;
        }

        .login-sub .login-google button {
            background: #AC1D1D;
        }

        .login-sub .login-facebook button {
            background: #3D5A98;
        }

        .login-sub .login-google img,
        .login-sub .login-facebook img {
            margin: 0 10px 0 0;
        }

.login-divider {
    font-size: 24px;
    line-height: 30px;
    color: #777;
    margin: 5px 0 15px;
}

.talent-reg-form .form-check-col-padding p a {
    text-decoration: none !important;
    color: #1573ff; 
    transition: all 0.3s linear 0s;
}

    .talent-reg-form .form-check-col-padding p a:hover {
        color: #0197c0;
        text-decoration: none !important;
    }

.formControlIncomplete {
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, 0);
    border: 1px solid #f00 !important;
} 

/*~~~~~~~~~~~~~~~~~~~ home page css snaproles */  

.body-snap .container-fluid, 
.body-business-dashboard .navbar .container-fluid, 
.body-privacy footer .container-fluid {  
    padding: 0px !important; 
} 

.body-font p { 
    font-family: 'Inter-Regular', sans-serif; 
    font-size: 16px; 
    line-height: 24px; 
    color: #757474;  
}

.body-snap h1 {
    letter-spacing: -2px;  
}  

.body-snap h2 {
    font-family: "Archivo-Regular", sans-serif;
    font-size: 60px;
    line-height: 70px;
}

.body-snap h2, .body-snap h3, .body-snap h5, .body-snap h5, .body-snap h6 {
    letter-spacing: -1px;
}

.header-snap-roles .container-fluid {
    position: relative;
}

.navbar-new li {
    display: flex;
    align-items: center;
}

.header-snap-roles .nav-link,
.header-snap-roles .nav-link button,
.header-snap-roles .flag-1 .nav-link {
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
}

.header-snap-roles .flag-1 .nav-link  {
    display: flex;
    align-items: center;
}

.header-snap-roles .nav-link {
    color: #212121;
}    
    
    .header-snap-roles .nav-link button {    
        padding: 0;
        border: 0;
        background: none; 
    }

    .header-snap-roles .nav-link img {
        width: auto; 
        height: auto; 
        max-width: 20px; 
    }

.header-snap-roles .nav-link li {
    margin: 0;  
}

    .header-snap-roles .nav-link, 
    .header-snap-roles .nav-link li a,
    .header-snap-roles .nav-link li a:visited,
    .header-snap-roles .flag-1 .nav-link {
        color: #222;
        padding: 5px 15px;
        text-decoration: none;
    }

        .header-snap-roles .nav-link:hover,
        .header-snap-roles .nav-link li a:hover,
        .header-snap-roles .flag-1 .nav-link:hover { 
            text-shadow: 0px 0px #000;  
        }

    .header-snap-roles .nav-link .dropdown-menu {
        min-width: 150px; 
    }

.header-snap-roles .nav-link li a:hover {
    color: #fff; 
    background: #1573ff; 
}

    .header-snap-roles .nav-link .dropdown-toggle::after {
        margin: 0;
    }

    .navbar-inner {
        width: 80%;
    }

.navbar-new {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: end;
}

    .navbar-new li {
        border: 0px;
        margin-right: 30px;
    }
        .navbar-new .nav-hide-lg {
            display: none;
            position: relative;
        }

            .navbar-new .nav-hide-lg .dropdown-menu {
                right: auto;
                left: -50px; 
                width: 135px; 
                min-width: 120px; 
                padding: 5px; 
            }
            
            .navbar-new .nav-hide-lg .dropdown-menu li {
                margin: 0 0 5px;  
            }
            
            .navbar-new .nav-hide-lg .dropdown-menu li:last-child {
                margin: 0;  
            }
            
            .navbar-new .nav-hide-lg .dropdown-menu li button {
                width: 100%; 
                border: 0; 
            }

            .nav-log-sm button {
                padding: 0;
            }

.nav-log-sm button svg {
    width: 20px;
    height: 20px; 
}

.nav-log-sm .dropdown-toggle::after {
    display: none;
}

.header-snap-roles .navbar-toggler.collapsed .navbar-toggler-icon {
    visibility: visible !important;
}

.header-snap-roles .navbar-toggler {
    border: 0px;
}

.header-snap-roles .right-icon-navbar > .navbar-toggler {
    width: 28px;
    margin: 0;
    padding: 0.5rem 0 0 !important;  
}

.header-snap-roles .right-icon-navbar > .navbar-toggler > .navbar-toggler-icon {
    display: block; 
    width: 28px; 
    height: 3px; 
    border-radius: 3px; 
    margin: 0 0 5px; 
    background: #1473FF;  
}

.chase-head h1 {
    font-family: 'Archivo-Bold', sans-serif;
    font-size: 70px;
    line-height: 84px;
    color: #000000;
}

.blue-head {
    color: #1573FF;
    font-family: "Archivo-Bold", sans-serif;
}

.max-width-container {
    margin: auto;
}

.navbar.header-snap-roles {
    padding: 20px 60px;
    background: #fff; 
    transition: all 0.3s linear 0s; 
}

.navbar.header-snap-roles.sticky {
    position: sticky;
    top: 0;
    padding: 5px 60px !important;  
    box-shadow: 0px 1px 4px #ddd; 
    z-index: 10;
}

    .navbar.header-snap-roles.sticky .navbar-brand {
        padding: 0; 
    }
    
    .navbar.header-snap-roles.sticky .navbar-brand svg {
        width: 150px;
    }

.body-home .navbar.header-snap-roles,
.body-business .navbar.header-snap-roles,
.body-about .navbar.header-snap-roles,
.pricing-page .navbar.header-snap-roles,
.body-blogs .navbar.header-snap-roles,
.body-blog-single .navbar.header-snap-roles,
.body-jobdescription .navbar.header-snap-roles, 
.body-roles .navbar.header-snap-roles {
    z-index: 9999;
}

    .body-business-dashboard .navbar.header-snap-roles {
        padding: 20px 60px;  
    }

.button-snap,
.button-snap:visited {
    cursor: pointer; 
    background: #FF8011; 
    color: #fff;
    padding: 8px 20px;
    border-radius: 10px; 
    display: inline-flex;
    font-family: "Inter-Regular", sans-serif;
    font-size: 14px; 
    border: 1px solid transparent;  
    transition: all 0.3s linear 0s;  
}

    .button-snap.rounded-pill {
        border-radius: 10px !important; 
    }

    .button-snap:disabled {
        opacity: 0.25;
    }

    .button-snap.white {
        color: #222;
        background: #fff; 
    }

#navbarNavDropdown-1 .button-snap.white {
    border-color: #999; 
}

.button-snap:hover {
    color: #fff;
    background: #e36f0a;
}

    .button-snap.white:hover {
        color: #222;
        border-color: #222;
        background: transparent;
    }

#navbarNavDropdown-1 .button-snap.white:hover {
    border-color: #222;
}

.sign-up {
    margin-top: 30px;
}

.chase-jobs {
    padding: 100px 60px 40px 60px;
    position: relative;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~  home banner  */

.home-banner {
    display: flex; 
    min-height: calc(100svh - 100px); 
    overflow: hidden; 
    position: relative; 
}

    .home-banner .banner-text {
        display: flex;
        flex-wrap: wrap; 
    }

        .home-banner .banner-text h1 {
            font-family: 'Archivo-Bold', sans-serif; 
            color: #000;
        }

        .home-banner .banner-text h1 span {
            display: block;
        }

            .home-banner .banner-text h1 span i {
                font-style: normal;
                color: #000;
            }

        .home-banner .banner-text h1 span {
            color: #FF8011;
        }

        .home-banner .banner-text p {
            max-width: 460px;
            font-size: 22px;
            line-height: 28px;
            font-family: 'Inter-Medium', sans-serif;
            color: #000;
            margin: 30px 0;
        }

    .home-banner .banner-text .banner-button {
        width: 100%; 
        margin: 80px 0 0;
    }

        .home-banner .banner-text .banner-button .button-snap {
            width: 145px;
            justify-content: center;
        }

        .home-banner .banner-text .banner-button span {
            display: block;
        }

    .home-banner .bg-banner {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        height: 578px;
    }

        .home-banner .bg-banner .banner-01,
        .home-banner .bg-banner .banner-02,
        .home-banner .bg-banner .banner-03 {
            position: absolute;
        }

        .home-banner .bg-banner .banner-01 {
            top: 185px;
            right: 550px;
        }

        .home-banner .bg-banner .banner-02 {
            top: 60px;
            right: 280px;
        }

        .home-banner .bg-banner .banner-03 {
            top: 110px;
            right: 60px;
        }

@media (min-width: 1301px) {
    .home-banner .banner-text {        
        margin: -220px 0 0; 
    }
}

@media (min-width: 1600px) {
    .home-banner {
        display: flex;
        min-height: calc(100svh - 100px);
        padding: 120px 60px 40px 60px;
    }    

        .home-banner .bg-banner {
            top: 0;
            bottom: 0;
            margin: auto;
            height: 578px;
        }

        .home-banner .banner-text {
            margin: -220px 0 0;
            max-width: 700px;
        }

            .home-banner .banner-text h1 {
                font-size: 54px;
                line-height: 60px;
            }

                .home-banner .banner-text h1 span {
                    font-size: 74px;
                    line-height: 80px;
                }

            .home-banner .banner-text p {
                font-size: 28px;
                line-height: 34px;                
            }
}

@media (min-width: 1700px) { 
    .home-banner .banner-text {
        max-width: 900px;  
    }
    .home-banner .banner-text h1 {
        font-size: 80px;
        line-height: 86px;
    }
        .home-banner .banner-text h1 span {
            font-size: 84px; 
            line-height: 90px; 
        }
}

@media (max-width: 1600px) and (min-width: 1201px) {
    .home-banner {
        padding: 200px 60px 40px 60px; 
    }
        .home-banner .banner-text h1 {
            font-size: 44px;
            line-height: 54px;
        }
            .home-banner .banner-text h1 span {
                font-size: 54px;
                line-height: 60px;
            }
} 

@media (max-width: 1600px) {    

    .home-banner .banner-text { 
        max-width: 500px; 
    }        

        .home-banner .banner-text p {
            margin: 20px 0; 
        }

        .home-banner .banner-text .banner-button {
            margin: 70px 0 0;
        }

        .home-banner .bg-banner {
            height: 460px; 
        }

        .home-banner .bg-banner picture img {
            width: 770px; 
            height: auto; 
        }

    .home-banner .bg-banner .banner-01 {
        top: 145px; 
        right: 465px; 
    }

        .home-banner .bg-banner .banner-01 img {
            width: 210px;
            height: auto; 
        }

    .home-banner .bg-banner .banner-02 {
        top: 35px; 
        right: 235px;
    }

        .home-banner .bg-banner .banner-02 img {
            width: 265px; 
            height: auto;
        }

    .home-banner .bg-banner .banner-03 {
        top: 75px;
        right: 35px;
    }
    
        .home-banner .bg-banner .banner-03 img {
            width: 220px;
            height: auto;
        }
}
    
@media (max-width: 1500px) {
    .home-banner .bg-banner {
        height: 375px; 
    }

    .home-banner .banner-text { 
        max-width: 580px; 
    }

        .home-banner .banner-text .banner-button {
            margin: 50px 0 0; 
        }

    .home-banner .bg-banner picture img {
        width: 630px;
    }

    .home-banner .bg-banner .banner-01 {
        top: 125px; 
        right: 370px;
    }

        .home-banner .bg-banner .banner-01 img {
            width: 170px;
        }

    .home-banner .bg-banner .banner-02 {
        top: 55px; 
        right: 190px;
    }

        .home-banner .bg-banner .banner-02 img {
            width: 200px;
        }

    .home-banner .bg-banner .banner-03 {
        top: 65px;
        right: 30px; 
    }

        .home-banner .bg-banner .banner-03 img {
            width: 174px; 
        }
}

@media (max-width: 1300px) {
    .home-banner .banner-text {
        max-width: 450px;
    }
}

@media (max-width: 1300px) and (min-width: 1201px) {
    .home-banner .banner-text {
        margin: -280px 0 0;
    }
}

@media (max-width: 1200px) and (min-width: 992px) {
    .body-snap .home-banner {
        margin: -103px 0 0; 
        padding: 50px 40px; 
    }
}

@media (max-width: 1200px) and (min-width: 768px) {
    .home-banner .banner-text {
        margin: 40px 0 0;
    }
}

@media (max-width: 1200px) and (min-width: 481px) {
    .home-banner .banner-text h1 {
        font-size: 40px;
        line-height: 50px;
    }
        .home-banner .banner-text h1 span {
            font-size: 50px;
            line-height: 60px;
        }
}

@media (max-width: 1200px) { 
    .body-snap .home-banner {
        height: 100svh;
        min-height: auto;        
        overflow: hidden; 
    }    

        .body-snap .home-banner .max-width-container {
            height: 280px;
        }

        .home-banner .banner-text {
            justify-content: center; 
            max-width: 100%;
        }

            .home-banner .banner-text h1 {
                letter-spacing: 0; 
            }
       
        .home-banner .banner-text h1,
        .home-banner .banner-text p {
            width: 100%;
            text-align: center;
        }                

        .home-banner .banner-text .banner-button {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 0;
        }

            .home-banner .banner-text .banner-button span {
                width: 100%;
                text-align: center;
            }

    .home-banner .bg-banner {
        display: none; 
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .body-snap .home-banner {
        margin: -123px 0 0;
    }
} 

@media (max-width: 767px) {
    .body-snap .home-banner {
        height: 100svh; 
        margin: -83px 0 0; 
        padding: 50px 20px; 
    }    
    .home-banner .banner-text {
        margin: 40px 0 0;  
    }
    .home-banner .banner-text p { 
        max-width: 350px; 
        font-size: 16px; 
        line-height: 22px; 
    }
}

@media (max-width: 480px) {
    .home-banner .banner-text h1 { 
        font-size: 24px;
        line-height: 38px; 
    }
        .home-banner .banner-text h1 span {
            font-size: 38px; 
            line-height: 48px;
        } 
} 


/*~~~~~~~~~~~~~~~~~~~~~~~  section-02  */

.section-02 {
    padding: 150px 80px; 
    background: #000002;
    background: linear-gradient(169deg, rgba(0, 0, 2, 1) 0%, rgba(23, 38, 62, 1) 80%, rgba(176, 88, 13, 1) 100%); 
}

    .section-02 h2 {
        font-size: 75px;
        line-height: 85px;
        font-family: 'Archivo-Bold', sans-serif;
        color: #FF8011;
    }

        .section-02 h2 span {
            display: block;
            color: #E8E8E8; 
        }

    .section-02 h4 {
        font-size: 26px;
        line-height: 32px;
        font-family: 'Inter-Regular', sans-serif;
        color: #FFF;
    }

    .section-02 p {
        font-size: 16px;
        line-height: 32px;
        font-family: 'Inter-Regular', sans-serif;
        color: #aaa; 
        margin: 20px 0;
    }

    .popular-roles {
        padding-top: 160px;
    }

    .popular-roles h2 {
        font-size: 50px;
        line-height: 60px;
        font-family: 'Archivo-Regular', sans-serif;
    }

.body-snap .popular-roles h2.blue-head {
    color: #1573FF;
    font-size: 100px;
    line-height: 114px;
    font-family: 'Archivo-Bold', sans-serif;
}

@media (min-width: 1600px) {
    .body-business .section-02 h2 {
        padding-right: 100px; 
    }
    .body-business .section-02 h2 br {
        display: none;
    }
}

@media (max-width: 1500px) {
        .section-02 h2 {
            padding-right: 70px; 
        } 
}

@media (max-width: 1400px) {
    .section-02 {
        padding: 100px 80px; 
    } 
}

@media (max-width: 1300px) {
    .body-business .section-02 h2 br {
        display: none;
    }
}

@media (max-width: 1200px) {
    .section-02 h2 {
        padding-right: 50px;
    }
    .section-02 h4 {
        font-size: 22px;
        line-height: 28px;
    }    
}

@media (max-width: 767px) {
    .section-02 h2 {
        padding-right: 0;
    }
    .section-02 h4 {
        font-size: 18px;
        line-height: 24px;
    } 
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~ trending roles  */

.trending-roles {
    padding: 100px 60px; 
}

    .trending-roles h2 {
        font-size: 100px;
        line-height: 110px;
        font-family: 'Archivo-Bold', sans-serif;
        color: #1573FF;
    }

        .trending-roles h2 span {
            display: block;
            font-size: 50px;
            line-height: 60px;
            font-family: 'Archivo-Regular', sans-serif;
            color: #000;
        }

    .trending-roles .col-12 a {
        margin: 0 0 45px 50px !important; 
    }

    .trending-roles p {
        color: rgb(0 0 0 / 70%);
    }

    .trending-roles a,
    .trending-roles .role-link { 
        display: block;
        cursor: pointer; 
        position: relative;
        overflow: hidden;
    }

        .trending-roles a .role-apply-now svg,
        .trending-roles .role-link .role-apply-now svg {
            transition: all 0.3s linear 0s;
        }

        .trending-roles a:hover .role-apply-now svg,
        .trending-roles .role-link:hover .role-apply-now svg {
            margin-left: 5px;
        }

        .trending-roles a picture,
        .trending-roles .role-link picture {
            transition: all 0.3s linear 0s;
        }

        .trending-roles a:hover picture,
        .trending-roles .role-link:hover picture { 
            opacity: 0.9;
        }

        .trending-roles a img,
        .trending-roles .role-link img {
            width: 100%;
            height: 100%;
            max-height: 500px;
            border-radius: 10px;
            object-fit: cover;
            object-position: top;
        }

        .trending-roles a .role-text,
        .trending-roles .role-link .role-text {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 50%;
            height: 100%;
        }

            .trending-roles a .role-text h3,
            .trending-roles .role-link .role-text h3 {
                font-size: 24px;
                line-height: 30px;
                font-family: 'Archivo-Bold', sans-serif;
                color: #000;
            }

            .trending-roles a .role-text p,
            .trending-roles a .role-text p *,
            .trending-roles .role-link .role-text p,
            .trending-roles .role-link .role-text p * {
            font-size: 16px !important; 
            line-height: 20px !important; 
            font-family: 'Inter-Regular' !important;
            background: none !important; 
        }

            .trending-roles a .role-text span,
            .trending-roles .role-link .role-text span {
                display: inline-block;
                font-family: "Inter-Medium", sans-serif;
                color: #000;
            }

                .trending-roles a .role-text span svg,
                .trending-roles .role-link .role-text span svg {
                    width: 40px;
                    height: 40px;
                }

@media (max-width: 1599px) {
    .trending-roles a .role-text,
    .trending-roles .role-link .role-text {
        top: 30px;
        left: 30px;
    }
    .trending-roles a img,
    .trending-roles .role-link img {
        max-height: 400px;
    }
}

@media (max-width: 1200px) {
    .trending-roles a .role-text h3,
    .trending-roles .role-link .role-text h3 {
        font-size: 22px;
        line-height: 28px;
    }
}
        @media (max-width: 1024px) {
            .body-snap .trending-roles h2 {
                font-size: 80px;
                line-height: 90px;
            }
            .body-snap .trending-roles h2 img {
                width: 51px;
                height: 51px; 
            }
            .trending-roles a .role-text,
            .trending-roles .role-link .role-text {
                top: 20px;
                left: 20px;
            }
                .trending-roles a .role-text h3,
                .trending-roles .role-link .role-text h3 {
                    font-size: 20px;
                    line-height: 26px;
                }
        }

        @media (max-width: 767px) {
            .body-snap .trending-roles h2 {
                font-size: 50px;
                line-height: 60px;
            }

            .trending-roles h2 span {
                font-size: 40px;
                line-height: 50px; 
            }

            .body-snap .trending-roles h2 img {
                width: 31px;
                height: 31px;
            }
            .trending-roles .col-12 a {
                margin: 0 0 35px 10px !important;
            }
            .trending-roles a img {
                max-height: 300px;
            }
            .trending-roles a .role-text p,
            .trending-roles a .role-text p *,
            .trending-roles .role-link .role-text p,
            .trending-roles .role-link .role-text p * {
                font-size: 14px !important;
                line-height: 18px !important;
            }
        }
        
        @media (max-width: 600px) {
            .trending-roles h2 span {
                font-size: 30px;
                line-height: 40px; 
            }
            .trending-roles a {
                text-decoration: none;  
            }
            .trending-roles a img {
                max-height: 260px; 
            }
                .trending-roles a .role-text,
                .trending-roles .role-link .role-text {
                    position: static;
                    width: 100%;
                    margin: 10px 0;
                }
        }

        @media (max-width: 575px) {
            .trending-roles .col-12 a {
                margin: 0 0 20px 10px !important; 
            }
        } 

        @media (max-width: 500px) {
            .trending-roles a img,
            .trending-roles .role-link img {
                max-height: 220px;
            }
            .body-snap .trending-roles h2 {
                font-size: 40px;
                line-height: 50px;
            }
            .body-snap .trending-roles h2 img {
                width: 25px;
                height: 25px; 
            }
        }

        @media (max-width: 480px) {
            .trending-roles .col-12 a {
                margin: 0 0 15px 10px !important;
            }
        }

        @media (max-width: 400px) {
            .trending-roles a img,
            .trending-roles .role-link img {
                max-height: 200px;
            }
        }

.business-pointer-02, 
.business-pointer-03, 
.business-pointer-05, 
.business-pointer-06 {
    padding: 40px !important;
    text-decoration: none;
}

    .business-pointer-03 h3,
    .business-pointer-06 h3 { 
        color: #ffffff;
    }

    .business-pointer-03 p,
    .business-pointer-06 p { 
        color: #ffffff;
        opacity: 0.63;
    }

    .business-pointer-04 p, 
    .business-pointer-02 p, 
    .business-pointer-03 p, 
    .business-pointer-06 p, 
    .business-pointer-07 p { 
        max-width: 300px;
    }

.next-conatiner .row h3 {
    font-family: 'Archivo-Semibold', sans-serif;
    font-size: 24px;
    line-height: 32px;
}

.business-pointer-02 h3,
.business-pointer-02 p,
.business-pointer-04 h3,
.business-pointer-07 h3,
.business-pointer-04 p,
.business-pointer-07 p {
    color: #212529;
}

.whats-next {
    padding: 40px 60px 100px 60px;
}

/*~~~~~~~~~~~~~~~~~~~~~~  why snaproles  */

.why-snaproles {
    padding: 100px 60px; 
    background: linear-gradient(169deg, rgba(0, 0, 2, 1) 0%, rgba(23, 38, 62, 1) 80%, rgba(176, 88, 13, 1) 100%);
}

    .why-snaproles p {
        color: #aaa; 
    }

    .orange-text {
        color: #FF8011;
    }

.button-snap.blue-button {
    align-items: center; 
    background-color: #1573FF; 
}

    .button-snap.blue-button:hover {
        background-color: #085fe0; 
    }

.why-snaproles .button-snap.white-button:hover {
    color: #fff;
    border: 1px solid #fff;
    background: transparent;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  job board  */
.job-board {
    padding: 100px 60px;
}

    .job-board h1 {
        font-family: 'Archivo-Regular', sans-serif;
        font-size: 70px;
        line-height: 84px;
    } 

.job-board-row-one {
    border-bottom: 1px solid #ccc;
    padding-bottom: 80px;
}

.job-board-row-two {
    padding-top: 80px;
}

.job-board .button-snap.not-bg {
    background-color: transparent;
    color: #000000;
    padding: 0px;
    text-decoration: underline !important;
    margin-top: 20px;     
}

    .job-board .button-snap.not-bg svg { 
        transition: all 0.3s linear 0s;
    }
    
    .job-board .button-snap.not-bg:hover svg {
        margin-left: 5px;
    }

    .job-board .button-snap span {
        margin-left: 10px;
    }

.job-board-row-two h3 {
    margin-bottom: 20px;
    font-family: "Archivo-Bold", sans-serif;
    color: #050038;
    min-height: 100px;  
    max-width: 190px; 
    font-size: 26px;
    line-height: 34px;
}

.job-board .button-snap span img {
    max-width: 20px;
}

.job-board .button-snap span svg {
    fill: #1573ff; 
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~  blogs  */ 

.blogs {
    padding: 100px 60px;
    background: rgb(0,0,2);
    background: linear-gradient(169deg, rgba(0,0,2,1) 0%, rgba(23,38,62,1) 80%, rgba(176,88,13,1) 100%);
}

.blog-row-one .blog-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.blog-row-one h2 {
    font-size: 100px;
    line-height: 114px;
    font-family: 'Archivo-Regular', sans-serif;
    color: #ffffff;
    margin: 0 100px 0 0;
}

.blogs .card-body {
    padding-left: 0px !important; 
    padding-right: 0px !important; 
    padding-bottom: 0px !important;  
}

.blog-row-two .card {
    background: transparent;
    border: none;
    color: #fff;
    text-decoration: none; 
}

.blog-row-two .card > div:after{
    content: "";
    display: block;
    height: 100%; 
}

.blogs .card-title {
    font-size: 1.25rem; 
    letter-spacing: -1px; 
}

    .blog-row-two .row > .col {
        width: calc(50% - 30px); 
    }

.blog-row-two .card-img,
.blog-row-two .card-img-top,
.blog-sec-top img {
    height: auto;
    max-height: 500px; 
    object-fit: cover;
    object-position: top; 
    border-radius: 10px;
    transition: all 0.3s linear 0s;
}

        .blog-row-two .card > div  {
            overflow: hidden; 
            border-radius: 10px;
        }

.blog-row-two .card:hover .card-img-top, 
.blog-sec-top img:hover { 
    transform: scale(1.05); 
}

        .blog-cat {
            display: flex;
            flex-wrap: wrap;
        }

    .blog-cat p {
        background: #fff;
        color: #000;
        padding: 3px 8px;
        border-radius: 5px;
        font-size: 12px;
        line-height: 16px;
        margin-right: 10px;
    }

    @media (max-width: 1599px) {
        .blog-row-two .card-img-top {
            max-height: 400px; 
        }
    }
    
    @media (max-width: 767px) {
        .blog-row-two .card-img-top {
            max-height: 300px;  
        }
    }
    
    @media (max-width: 600px) {
        .blog-row-two .card-img-top {
            max-height: 260px;  
        }
    }
    
    @media (max-width: 500px) {
        .blog-row-two .card-img-top {
            max-height: 220px;  
        }
    }
    
    @media (max-width: 400px) {
        .blog-row-two .card-img-top {
            max-height: 200px;  
        }
    }


.effortless {
    padding: 100px 60px;
}

    .effortless img {
        width: 100%;
        height: 100%; 
        padding-left: 40px;
    }

    .effortless h2 {
        max-width: 250px;
    }

.effortless-row-one {
    border-bottom: 1px solid #ccc;
    padding-bottom: 80px;
}

.effortless-row-two-main {
    padding-top: 80px;
}

.effortless-row-two h3 {
    margin-bottom: 20px;
}

.effortless h3 {
    font-size: 24px;
    font-family: "Archivo-Bold", sans-serif;
}

/*~~~~~~~~~~~~~~~~~~~~~~~  survey */

.survey {
    padding: 100px 60px;
    background: rgb(0,0,2);
    background: linear-gradient(169deg, rgba(0,0,2,1) 0%, rgba(23,38,62,1) 80%, rgba(176,88,13,1) 100%);
}

.survey-col-1 h2 {
    max-width: 250px;
}

.survey h2 {
    font-size: 100px;
    line-height: 114px;
    font-family: 'Archivo-Regular', sans-serif;
    color: #ffffff;
}

.survey .survey-col-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    margin-top: 30px;
}

.survey .row > div .survey-list {
    width: 45%;
    margin-right: 15px;
}

    .survey .row > div .survey-list:nth-child(2), .survey .row > div .survey-list:nth-child(4) {
        margin-right: 0px;
    }

    .survey .row > div .survey-list:nth-child(2), .survey .row > div .survey-list:nth-child(4) {
        margin-bottom: 15px;
    }

.survey-list span {
    color: #ffffff;
    font-size: 50px;
    line-height: 64px;
    font-family: 'Archivo-Regular', sans-serif;
    letter-spacing: -1px; 
}

.survey p {
    color: #aaa; 
}

.time {
    padding: 100px 60px;
}

.time-inner-row-one {
    background: #FF8011;
    color: #fff;
    border-radius: 250px;
    padding: 0;
    position: relative;
    margin-top: 60px !important;
}

    .time-inner-row-one .time-col-left {
        padding: 60px 0px 60px 120px;
    }

    .time-inner-row-one img {
        width: 100%;
        height: auto;
        position: absolute;
        max-width: 500px;
        right: 100px;
        bottom: 0;
    }

.time-home h3 {
    font-size: 50px; 
    line-height: 60px; 
    letter-spacing: -1px; 
    margin: 0 0 20px;  
} 

    @media (min-width: 1801px) {
        .time-inner-row-one img {
            max-width: 400px; 
        }
    }

.for-jobseekers-menu,
.for-business-menu, 
.for-employee-menu { 
    margin: 30px 0 0; 
}

.for-jobseekers-menu h4,
.for-business-menu h4,
.for-employee-menu h4 {
    font-size: 16px;
    line-height: 20px;
}

    .for-jobseekers-menu .button-snap,
    .for-business-menu .button-snap,
    .for-employee-menu .button-snap {
        margin: 0 15px 0 0;
    }

    .for-business-menu > .button-snap:nth-child(2) { 
        background: #1573ff;
    }


        .body-snap .chase-head h1 {
            font-family: "Archivo-Bold", sans-serif;
            color: #000;
        }

.body-snap .right-icon-navbar .navbar-collapse .chase-head h1 {
    max-width: 400px;
}

.body-snap .chase-head h1 span { 
    color: #1573ff; 
}

    .body-snap .chase-head h1 span.orange-text {
        color: #ff8011 !important; 
    }

.footer-snap {
    background-color: #000000;
    padding: 300px 60px 60px 60px; 
}

.talent-dashboard .footer-snap,
.body-business-dashboard .footer-snap,
.body-privacy .footer-snap {
    margin: 50px 0 0;
    padding: 60px;
}

.talent-dashboard .privacy-policy-main,
.body-business-dashboard .privacy-policy-main,
.body-privacy .privacy-policy-main { 
    padding: 0;
}

.footer-snap a,
.footer-snap a:visited {
    text-decoration: none !important;
    color: #fff !important;
    transition: 0.3s;
}

        .footer-snap a:hover {
            color: #a9a9a9 !important;
        }

    .footer-snap a svg {
        transition: all 0.3s linear 0s;
    }
    
    .footer-snap a:hover svg {
        transform: scale(1.1); 
    }

    .footer-snap p, .footer-snap {
        color: #ffffff;
        font-family: "Inter", sans-serif;
    }

.blue-top-section {
    padding: 0px 60px 0px 60px;
    margin-bottom: -225px;
    position: relative;
    color: #ffffff;
}

.blue-top-container .row {
    background-color: #1573FF;
    border-radius: 250px; 
    padding: 60px 120px;
}

.blue-top-section h3 {
    font-size: 50px;
    line-height: 64px;
}

.blue-top-section p {
    color: #ffffff;
    font-size: 24px;
    margin-top: 15px;
}

.footer-snap-col-1 a,
.footer-snap-col-1 a:visited { 
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    text-decoration: none !important;
}

.footer-snap-col-2 h3 {
    margin-bottom: 15px;
}

.footer-snap-col-2 p, .faq-col-1 p {
    font-size: 14px;
    font-weight: 300;
}

.footer-snap-col-3 img {
    max-width: 300px;
    width: 100%; 
    height: auto; 
}

.footer-snap-col-3 svg {
    max-width: 280px; 
    width: 100%; 
}

.faq-col-2 img {
    max-width: 20px;
}

.faq-section-footer {
    padding: 30px 0px;
}

.faq-col-1 p {
    margin-bottom: 3px;
}

.privacy-policy-main a, .body-font .privacy-policy-main p {
    font-size: 12px;
    margin-bottom: 0;
}

.privacy-policy-main {
    padding-top: 50px;
}


/*~~~~~~~~~~~~~~~~~ About us snaproles  */ 

.body-about .chase-jobs {
    padding: 100px 60px 190px 60px;
}

.body-snap h1 {
    font-family: 'Archivo-Regular', sans-serif;
}

.bold {
    font-family: 'Archivo-Bold', sans-serif;
}

.about-our-company {
    padding: 100px 60px;
    position: relative;
    color: #ffffff;
}

    .about-our-company picture {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    
    .about-our-company picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .about-our-company .container-fluid {
        position: relative;
        z-index: 2; 
    }

    @media (min-width: 992px) {
        .about-our-company, .the-mission {
        min-height: 100svh;
    }
}

.about-our-company .col-12 {
    max-width: 370px;
}

.about-our-company .blue-text {
}

.blue-text {
    color: #1573FF;
}

.about-our-company p {
    color: #ffffff;
}

    .about-our-company p.p-bold {
        font-family: "Inter-Bold", sans-serif;
    }

.p-bold {
    font-size: 22px;
    line-height: 32px;
}

.about-our-company .p-bold {
    font-size: 22px;
    line-height: 32px;
    margin: 30px 0px;
}

.the-mission {
    padding: 100px 60px;
    color: #ffffff;
    position: relative;
}

    .the-mission picture {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

        .the-mission picture img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .the-mission .container-fluid {
        position: relative;
        z-index: 2;
    }

    .the-mission .col-12 {
        max-width: 370px;
        margin-left: 0px;
    }

    .the-mission p {
        color: #ffffff;
    }

    .the-mission h1 {
        margin-bottom: 30px;
    }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~  contact us snaproless  */

.time-contact-us .time-col-left h2 a {
    color: #ffffff;
    text-decoration: none;
}

.body-snap section.time-contact-us {
    padding-top: 40px;
}

.time-contact-us p {
    color: #ffffff;
}

.time-contact-us .time-inner-row-one .time-col-left {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 20px;
}

.time-contact-us .col-6 h1 {
    font-size: 50px;
    line-height: 60px;
}

.time-contact-us .time-inner-row-one {
    padding-top: 30px;
    padding-bottom: 130px;
    border-radius: 98px;
    margin-top: 0 !important;
}

.time-contact-us .col-12 .col-12 h1 {
    text-align: center;
    max-width: 400px;
    margin: auto;
}

.time-contact-us .time-inner-row-one img {
    max-width: 400px;
}

.black-text {
    color: #000000;
}

.snap-roles-form-contact {
    margin-top: 30px;
    margin-bottom: 30px;
}

    .snap-roles-form-contact label {
        display: none;
    }

    .snap-roles-form-contact input {
        border-radius: 58px;
        height: 45px;
    }

        .snap-roles-form-contact input::placeholder, .snap-roles-form-contact textarea::placeholder {
            font-family: 'Inter-Regular', sans-serif !important;
            font-size: 16px;
        }

    .snap-roles-form-contact textarea {
        border-radius: 24px;
    }

/*~~~~~~~~~~~~~~~~~~~~~~~  business page csss  */

.home-banner.business .banner-text h1 span {
    color: #1573ff; 
}

.business-banner {
    display: flex;
    height: 900px;
    position: relative;
}

    .business-banner .banner-text-top,
    .business-banner .bg-business-banner,
    .business-banner .bg-business-banner picture, 
    .business-banner .banner-text-bottom {
        display: flex;
        flex-wrap: wrap; 
        justify-content: center;
        width: 100%; 
    }

        .business-banner .banner-text-top h1 {
            color: #000;
            font-family: 'Archivo-Bold', sans-serif; 
            position: relative;
            top: 20px; 
            text-align: center; 
        }

            .business-banner .banner-text-top h1 span {
                color: #1473ff; 
            }

        .business-banner .bg-business-banner {
            position: relative;
        }

            .business-banner .bg-business-banner .banner-01,
            .business-banner .bg-business-banner .banner-02,
            .business-banner .bg-business-banner .banner-03 {
                position: relative;
                z-index: 2; 
            }

            .business-banner .bg-business-banner .banner-01 {
                top: 170px;
                left: 40px;
            }
            
            .business-banner .bg-business-banner .banner-02 {
                top: 65px;
            }

            .business-banner .bg-business-banner .banner-03 {
                top: 130px; 
                right: 35px; 
            }

                .business-banner .bg-business-banner picture img {
                    position: absolute;
                    width: 100%;  
                    z-index: 1;
                }

    .business-banner .banner-text-bottom {
        position: relative; 
        top: 130px;  
        align-items: center;  
        z-index: 2; 
    }

        .business-banner .banner-text-bottom .button-snap {
            width: 145px;
            justify-content: center; 
            margin: 0 5px 0 0;
        } 

@media (min-width: 1401px) {
    .business-banner .bg-business-banner picture img {
        top: -30px;
        height: 675px;
    }
}

@media (max-width: 1400px) and (min-width: 1201px) {
    .business-banner .bg-business-banner picture img {
        top: -15px;
        height: 620px;
    }
}

@media (min-width: 1201px) { 
    .business-banner .banner-text-top h1 {
        font-size: 70px;
        line-height: 80px;
    }
}

@media (max-width: 1200px) and (min-width: 641px) { 
    .business-banner .banner-text-top h1 {
        font-size: 50px;
        line-height: 60px;  
    } 
}

@media (max-width: 1200px) and (min-width: 992px) {
    .business-banner {
        margin: -103px 0 0;
        padding: 50px 40px;
    }
}

@media (max-width: 1200px) {
    .business-banner {
        height: 100svh;
        min-height: auto;
        overflow: hidden;
    }
        .business-banner > .container-fluid {
            margin: auto; 
        } 
    #businessBannerImg {
        display: none !important;
    }
        .business-banner .banner-text-bottom {
            top: 30px;
            width: 200px;
            display: flex;
            justify-content: center; 
            margin: 0 auto; 
        }
            .business-banner .banner-text-bottom .button-snap {
                margin: 0; 
            }
            .business-banner .banner-text-bottom span {
                display: block;
                width: 100%;
                text-align: center;
                margin: 5px 0 0; 
            }
}

@media (max-width: 991px) and (min-width: 768px) {
    .business-banner {
        margin: -123px 0 0;
    }
}

@media (max-width: 767px) {
    .business-banner {
        height: 100svh;
        margin: -83px 0 0;
        padding: 50px 20px;
    }        
}

@media (max-width: 640px) and (min-width: 481px) {
    .business-banner .banner-text-top h1 {
        font-size: 40px; 
        line-height: 50px; 
    } 
}

@media (max-width: 480px) {
    .business-banner .banner-text-top h1 {
        font-size: 30px; 
        line-height: 40px; 
    }
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    @media (min-width: 1024px) {
        .chase-jobs.business-chase { 
        height: calc(100svh - 145px); 
        align-content: center; 
    }
}

@media (max-width: 1023px) and (min-width: 767px) {
    .chase-jobs.business-chase {
        height: calc(100svh - 118px);  
        align-content: center; 
    }    
}

@media (max-width: 767px) {
    .body-snap .chase-jobs.business-chase {
        padding-bottom: 70px !important; 
    }
    .button-snap, 
    .button-snap:visited {
        padding: 5px 15px; 
    }
    .footer-snap-col-3 svg {
        max-width: 220px;
    }
    .blog-row-two .row > .col {
        width: 100%;
    }
}
.chase-jobs.business-chase {
    padding-bottom: 190px;
}

.time.time-business .time-inner-row-one img {
    right: 0;
    max-width: 80%; 
}

@media (min-width: 2000px) {
    .time-business .time-col-left h2 {
        padding-right: 20px; 
    }
    .time.time-business .time-inner-row-one img {
        max-width: 650px; 
    }
}

@media (min-width: 1200px) {
    .time.time-business .time-inner-row-one img {
        border-bottom-right-radius: 160px;
    }
}

@media (max-width: 1500px) {
    .time.time-business .time-inner-row-one {
        overflow: hidden; 
    }
}

@media (max-width: 1400px) {
    .time.time-business .time-inner-row-one img {
        max-width: 90%;  
    }
}

.time.time-business .time-inner-row-one {
    padding: 0px;
}

.time-col-left h2 {
    margin-bottom: 20px;
}

.time.time-business .time-col-left {
    padding: 60px 0px 60px 120px;
}

.button-snap.not-bg {
    background-color: transparent;
    color: #000000;
    padding: 0px;
    text-decoration: underline !important;
    margin-top: 30px;
    font-family: "Inter-Medium", sans-serif;
}

.body-business .whats-next.verified-users-sec .button-snap span img {
    max-width: 20px;
    display: block;
}

.body-business .whats-next.verified-users-sec a {
    display: flex;
    align-items: center;
}

.body-business .whats-next.verified-users-sec a svg {
    width: 40px;
    height: 40px; 
    transition: all 0.3s linear 0s; 
}

.body-business .whats-next.verified-users-sec a:hover svg {
    margin-left: 5px; 
}

@media (min-width: 1200px) {
    .popular-role a + a .role-apply-now {
        color: #fff;
    } 
}

.popular-role p {
    margin: 0; 
}

.popular-role .role-apply-now {
    display: inline-block;
    font-family: "Inter-Medium", sans-serif;
    color: #000;
    text-decoration: underline;
}

.popular-role .role-apply-now svg {
    width: 40px;
    height: 40px; 
}

.button-snap span {
    margin-left: 10px;
}

.verified-users-sec {
    padding: 100px 60px;
}

.body-business .business-pointer-01 img {
    max-width: 100%; 
}

.business-pointer-01 img {
    display: block;
}

.business-pointer-01 .bs-text-sm,
.business-pointer-04 .bs-text-sm,
.business-pointer-07 .bs-text-sm {
    padding: 40px;
}

.business-pointer-02 .bs-text-sm,
.business-pointer-03 .bs-text-sm,
.business-pointer-05 .bs-text-sm, 
.business-pointer-06 .bs-text-sm { 
    width: 60%; 
}

.whats-next.verified-users-sec .row {
    margin-bottom: 30px;
}    

    .whats-next.verified-users-sec .row:last-child {
        margin-bottom: 0px;
    }

.whats-next.verified-users-sec .next-conatiner .row h3 {
    font-size: 36px;
    line-height: 46px;
    font-family: "Archivo-Bold", sans-serif;
    color: #000000;
}

.business-pointer-04 h3,
.business-pointer-07 h3 {
    max-width: 400px;
}

.whats-next.verified-users-sec .button-snap.not-bg {
    margin-top: 0px;
}

.whats-next.verified-users-sec p {
    color: #000000;
    max-width: 420px; 
}

.business-pointer-01,
.business-pointer-04,
.business-pointer-07 {
    background: #000002; 
    background: linear-gradient(169deg,rgba(0,0,2,1) 0%,rgba(23,38,62,1) 80%,rgba(176,88,13,1) 100%);
}

.business-pointer-01 h3,
.business-pointer-01 p,
.business-pointer-01 a,
.business-pointer-04 h3,
.business-pointer-04 p,
.business-pointer-04 a,
.business-pointer-07 h3,
.business-pointer-07 p,
.business-pointer-07 a { 
    color: #fff !important;
}

.business-pointer-02 h3,
.business-pointer-02 p,
.business-pointer-02 a,
.business-pointer-03 h3,
.business-pointer-03 p,
.business-pointer-03 a,
.business-pointer-06 h3,
.business-pointer-06 p,
.business-pointer-06 a {  
    color: #000 !important; 
}

@media (min-width: 1201px) {
    .business-pointer-01 img, 
    .whats-next.verified-users-sec .row,
    .whats-next.verified-users-sec .row .col-12,
    .whats-next.verified-users-sec .row .col,
    .whats-next.verified-users-sec .row .col-7 {
            border-radius: 44px;
        }
    .business-pointer-02,
    .business-pointer-05 {
        margin-right: 30px; 
    }
    .body-business .next-row-one, 
    .body-business .next-row-one .col-xl-6, 
    .body-business .next-row-two, 
    .body-business .next-row-two > div, 
    .body-business .next-row-two > div picture {       
        height: 450px; 
        position: relative; 
    }
    .body-business .next-row-three,
    .body-business .next-row-three > div,
    .body-business .next-row-three > div picture {
        height: 450px; 
    }
    .body-business .next-row-two > div picture,
    .body-business .next-row-three > div picture {   
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; 
    }        
        .body-business .whats-next img {
            width: 100%;
            max-width: 100%;
            height: 100%; 
            object-fit: cover;
            border-radius: 44px;
        }    
}

@media (min-width: 1500px) {
    .body-business .next-row-three,
    .body-business .next-row-three > div,
    .body-business .next-row-three > div picture {
        height: 500px;
    }
}

@media (min-width: 1600px) {
    .body-business .next-row-three,
    .body-business .next-row-three > div,
    .body-business .next-row-three > div picture {
        height: 600px;
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~  blogs  */
.blogs.business-blogs .blog-row-one h2 {
    font-size: 60px;
    line-height: 70px;
    max-width: 735px;
}

    .blogs.business-blogs .blog-row-one h2 span {
        display: block;
        font-size: 90px;
        line-height: 100px;
        font-family: "Archivo-Bold", sans-serif;
    }

.empowering {
    padding: 100px 60px;
}

    .empowering .container-fluid {
        max-width: 1000px; 
    }

    .empowering h2 {
        width: 100%; 
        font-family: "Archivo-Bold", sans-serif;
    }

    .empowering h3 {
        font-family: "Archivo-Regular", sans-serif;
    }

    .empowering .row > div {
        display: flex;
        flex-wrap: wrap; 
        justify-content: center;
    }

    .empowering .industry-icon {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 180px;
        max-width: calc(100% - 20px);
        height: 160px;
        border: 1px solid #1573ff;
        border-radius: 10px;
        margin: 0 10px;
        padding: 15px;
    }

.empowering svg {
    fill: #1573FF;
    margin: 0 0 15px;
    transition: all 0.3s linear 0s;
}

    .empowering .industry-icon:hover svg { 
        transform: scale(1.1);
    }

        .empowering .col-12 {
            margin-bottom: 40px;
        }

    .empowering .row:nth-child(2) .col:nth-child(3) p {
        max-width: 100px;
    }

    .empowering p {
        width: 100%; 
        font-family: "Archivo-Bold", sans-serif;
        color: #050038;
        font-size: 20px;
        line-height: 24px;
        max-width: 130px;
        margin: auto;
    }
/*~~~~~~~~~~~~~~~~~~~  business page csss end  */ 


/*~~~~~~~~~~~~~~~~~  job description page css start  */

.job-description-sec {
    padding: 100px 60px;
    padding-bottom: 0px !important;
}

    .job-description-sec > div,
    .job-description-sec > .container-fluid {
        background-color: #ffffff;
        border-radius: 55px;
        box-shadow: 0px 0px 17px 8px rgba(219,219,219,1);
        padding: 60px 40px !important;
    }

    .job-description-sec h3 {
        font-family: "Archivo-Bold", sans-serif;    
        font-size: 26px;
        line-height: 36px;
    }

    .job-description-sec p, 
    .job-description-sec p *, 
    .job-description-sec li,
    .job-description-sec li * {
        color: #545454 !important;
        font-size: 16px !important;
        line-height: 24px !important;
        font-family: "Inter-Regular", sans-serif !important;
    }

    .job-description-sec li {
        margin-bottom: 13px;
    }

    .job-description-sec ul {
        padding-left: 20px;
    }

    .job-description-sec li::marker {
        font-size: 13px;
    }

.chase-jobs-job-description .popular-roles {
    display: flex;
    padding-top: 0px;
}

    .chase-jobs-job-description .popular-roles > div {
        display: flex;
        align-items: end;
    }

        .chase-jobs-job-description .popular-roles > div + div {
            margin: 15px 0 0;
        }

        .chase-jobs-job-description .popular-roles > div span {
            display: block;
            align-items: center;
        }

.chase-jobs.chase-jobs-job-description {
    padding-top: 40px;
    padding-bottom: 0;
}

.chase-jobs-job-description .popular-roles > div h2 {
    color: #1573FF;
    font-size: 100px;
    line-height: 114px;
    font-family: 'Archivo-Bold', sans-serif;
}

    .chase-jobs-job-description .popular-roles > div h2 span {
        font-size: 50px;
        line-height: 60px;
        font-family: 'Archivo-Regular', sans-serif;
        color: #212529;
    }


/*~~~~~~~~~~~~~~~~~~  job description page css end  */

/*~~~~~~~~~~~~~~~~  blog page css start  */

.blogs.blog-page-sec {
    background-image: none;
}

.blog-page-sec .blog-row-one .blue-head {
    color: #1573FF;
    font-family: "Archivo-Bold", sans-serif;
}

.blog-page-sec .blog-row-one h2 {
    color: #000000;
}

.blog-page-sec .blog-row-one .small-text {
    width: 100%; 
    font-size: 60px; 
    line-height: 70px; 
    margin-bottom: 0;  
}

.blog-page-sec .blog-row-two .card {
    flex-wrap: wrap;
    flex-direction: row;
    color: #000000;
}

    .blog-page-sec .blog-row-two .card h5 {
        width: 100%; 
        font-size: 28px; 
        line-height: 38px; 
        font-family: "Inter-Bold", sans-serif; 
        max-width: calc(100% - 30px); 
        margin: 10px 0 0;  
    }

    .blog-page-sec .blog-row-two .card p {
        color: #000000;
    }

        .blog-page-sec .blog-row-two .card p *,
        .blog-sec-top .blog-text p * {
            font-family: 'Inter-Regular', sans-serif !important;
            font-size: 16px !important;
            line-height: 24px !important;
            color: #757474 !important;
        }

        .blog-sec-top .blog-cat p, .blog-page-sec .blog-cat p {
            background-color: #e8e8e8;
        }

.blog-sec-top .col-6:nth-child(1) {
    padding-right: 20px;
}

.blog-page-sec .button-snap img {
    max-width: 16px;
    transform: rotate(90deg);
}

.blog-page-sec .blog-row-two .card img:nth-child(1) {
    border-radius: 10px;
}

.blog-sec-top {
    padding: 30px 60px 0px 60px;
    padding-bottom: 0px !important;
    padding-top: 20px !important;
}

    .blog-sec-top img {
        border-radius: 10px; 
    }

    .blog-sec-top h5 {
        font-size: 45px;
        line-height: 55px;
        font-family: "Inter-Bold", sans-serif;
        max-width: 400px;
        color: #000000;
    }

    .blog-sec-top .blog-text {
        color: #000;
        max-width: 500px;
        margin-top: 20px;
        margin-bottom: 25px;
    }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  blog page css end  */ 

/*~~~~~~~~~~~~~~~~~~~~~~~  single blog page css start  */ 

.single-blog-content {
    padding: 100px 60px;
}

    .single-blog-content img {
        max-width: 100%; 
        margin: 0 0 30px; 
    }

    .single-blog-content .blog-cat p {
        background-color: #e8e8e8;
    }

.single-blog-cat {
    margin: 40px 0px 30px 0px;
}

    .single-blog-cat > div {
        justify-content: center;
    }

.single-blog-image img {
    border-radius: 10px; 
} 

.single-blog-data img {
    border-radius: 20px;
    margin: 30px 0px;
}

.single-blog-data p:last-child {
    margin-bottom: 0px;
}

.single-blog-data h3 {
    margin: 20px 0px 20px 0px;
    font-family: "Inter-SemiBold", sans-serif;
    color: #000000;
}

.single-blog-data p {
    color: #000000;
    font-family: "Inter-Regular", sans-serif;
} 

.single-blog-content .blog-container .single-blog-data * {
    font-family: 'Inter-Regular', sans-serif !important;
    font-size: 20px !important;
    line-height: 30px !important;  
    color: #000 !important; 
}

.single-blog-data h3:nth-child(1) {
    margin-top: 0px;
}

.share-blog-sec {
    padding: 100px 60px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.body-snap .share-blog-sec > div {
    padding: 80px 20px !important;
    border-radius: 237px;
    background: rgb(0,0,2);
    background: linear-gradient(169deg, rgba(0,0,2,1) 0%, rgba(23,38,62,1) 50%, rgba(176,88,13,1) 100%);
}

    .share-blog-sec .orange-text {
        color: #FF8011;
    }

    .share-blog-sec h2 {
        color: #ffffff;
        font-family: "Archivo-Bold", sans-serif;    
    }

.social-sharing-single-blog {
    margin-top: 35px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

    .social-sharing-single-blog img {
        max-width: 40px;
    }
/**single blog page css end**/

@media screen and (max-width: 1600px) {
    .whats-next.verified-users-sec .next-conatiner .row h3 {
        font-size: 34px;
        line-height: 44px;
    }
}

@media screen and (max-width: 1300px) {
    .business-pointer-02, 
    .business-pointer-03, 
    .business-pointer-05, 
    .business-pointer-06 {
        padding: 30px !important;
    }
    .time-contact-us .time-col-left h2 a {
        font-size: 40px;
        line-height: 50px;
    }
    .whats-next.verified-users-sec .next-conatiner .row h3 {
        font-size: 30px;
        line-height: 40px;
    }
   .whats-next.verified-users-sec p {
        font-size: 14px; 
        line-height: 22px; 
        margin: 0; 
    }
}

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

    .time-inner-row-one img {
        max-width: 450px;
    }

    .time-home h2 {
        font-size: 50px;
        line-height: 60px;
    }
}

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

        .business-pointer-03 h3,
        .business-pointer-06 h3,
        .business-pointer-03 p,
        .business-pointer-06 p {
            color: #212529;
            opacity: 1;
        }
    .whats-next.verified-users-sec .row .col-12,
    .whats-next.verified-users-sec .row .col,
    .whats-next.verified-users-sec .row .col-7 {
        border-radius: 0;
    }

    .business-pointer-01, 
    .business-pointer-03,
    .business-pointer-04,
    .business-pointer-06,
    .bs-image-mobile,
    .business-pointer-04,
    .business-pointer-07,
    .business-pointer-02,
    .business-pointer-05 {
        min-height: 350px;
    }

        .business-pointer-01 .bs-image-mobile { 
            position: absolute;
            top: 0;
            background: url(../Images/business-1-sm.webp) no-repeat 50% 0/105% !important;
        }

        .whats-next .bs-text-sm { 
            width: 60%;
            padding: 30px !important;
            position: relative;
            z-index: 2; 
        }

    .business-pointer-02,
    .business-pointer-05 {
        width: 100%;
        margin-bottom: 30px;
        padding: 0 !important;
        background: none;
    }

        .business-pointer-02 .bs-image-mobile {
            position: absolute;
            width: 100%;
            margin-bottom: 30px;
            background: url(../images/beware-sm.webp) no-repeat 50% 0/105% !important;
        }

    .business-pointer-03 {
        padding: 0 !important;
        position: relative;
        background: none;
    }

        .business-pointer-03 .bs-image-mobile {
            position: absolute;
            top: 0;
            width: 100%;
            background: url(../images/read-sm.webp) no-repeat 50% 0/105% !important;
        }

    .business-pointer-04 .col-12 {
        padding: 0 !important;
        position: relative;
        background: none;
    }

        .business-pointer-04 .bs-image-mobile {
            position: absolute;
            top: 0;
            width: 100%;
            background: url(../images/middleman-new.webp) no-repeat 50% 0/105% !important;
        }

    .business-pointer-05 {
        width: 100%;
        margin: 0 0 30px;
        padding: 0 !important;
        position: relative;
        background: none;
    }

        .business-pointer-02 .bs-image-mobile {
            position: absolute;
            width: 100%;
            top: 0;
            margin-bottom: 30px;
            background: url(../images/connect-sm.webp) no-repeat 50% 0/105% !important;
        }

    .business-pointer-06 {
        flex: 0 0 auto;
        width: 100%;
        padding: 0 !important;
        position: relative;
        background: none;
    }

        .business-pointer-06 .bs-image-mobile {
            position: absolute;
            width: 100%;
            top: 0;
            margin-bottom: 30px;
            background: url(../images/sponsered-sm.webp) no-repeat 50% 0/105% !important;
        }

    .business-pointer-07 .col-12 {
        width: 100%;
        padding: 0 !important;
        position: relative;
        background: none; 
    }

        .business-pointer-07 .bs-image-mobile {
            position: absolute; 
            width: 100%; 
            top: 0; 
            margin-bottom: 30px;
            background: url(../images/real-time.webp) no-repeat 60% 0/105% !important;
        }

    .whats-next.verified-users-sec .next-conatiner .row h3,
    .whats-next.verified-users-sec p,
    .whats-next.verified-users-sec .button-snap.not-bg {
        color: #000 !important;
    }

    .whats-next.verified-users-sec .row {
        margin-bottom: 30px;
        position: relative;
        background: none !important; 
        border-radius: 0 !important;
    }
        
    .time-inner-row-one img {
        max-width: 350px; 
    }
}

    .body-snap .time-contact-us .time-col-left h1 {
        font-size: 30px;
        line-height: 44px;
    }

    .right-icon-navbar .navbar-nav {
        padding: 0; 
        background: none; 
        height: auto; 
    }
    .blogs.business-blogs .blog-row-one h2 span {
        font-size: 70px; 
        line-height: 80px; 
    }

    .blogs.business-blogs .blog-row-one h2 {
        max-width: 600px; 
    }    

    .chase-jobs-job-description .popular-roles {
        display: block;
    }
}
        .chase-jobs-job-description .popular-roles > div + div,
        .chase-jobs-job-description .popular-roles > div .button-snap {
            margin: 0;
        }
    
    .blog-row-two .row > .col {
        width: 50%;
    }
}

@media screen and (max-width: 1100px) {
    .time-home h2 {
        max-width: 300px;
    }
}

@media screen and (min-width: 1025px) {
    .body-snap h1 {
        font-size: 70px;
        line-height: 80px;
        font-size: 70px;
    }
} 

@media screen and (max-width: 1024px) and (min-width: 768px) {
    .body-snap h1 { 
        font-size: 60px;
        line-height: 70px;
    }
}

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

    .blog-page-sec .blog-row-one .small-text {
        font-size: 50px;
        line-height: 60px;
    }

    .body-business .whats-next.verified-users-sec a svg {
        color: #000; 
    }

    .blog-page-sec .blog-row-two .card h5 {
        font-size: 26px;
        line-height: 34px;
    }

    .blog-sec-top h5 {
        font-size: 40px;
        line-height: 50px;
    }

    .job-description-sec p, 
    .job-description-sec p *, 
    .job-description-sec li,
    .job-description-sec li * { 
        font-size: 14px !important;
        line-height: 22px !important;
    }

    .job-description-sec .mb-5 {
        margin-bottom: 30px !important;
    }

    .job-description-sec h3 {
        font-size: 24px;
        line-height: 34px;
    }

    .job-description-sec > div,
    .job-description-sec > .container-fluid {
        padding: 50px 30px !important;
    }        

        .body-snap .empowering p {
            font-size: 18px;
            line-height: 22px;
        }

    .blogs.business-blogs .blog-row-one h2 {
        font-size: 50px;
        line-height: 60px;
    }

    .body-snap .chase-jobs.business-chase {
        padding-bottom: 40px;
        padding-top: 40px;
    }

    .whats-next.verified-users-sec .next-conatiner .row h3 {
        font-size: 32px;
        line-height: 42px;
    }

    .blogs.business-blogs .blog-row-one h2 span {
        font-size: 60px;
        line-height: 70px;
    }

    .body-snap .time-home h3 {
        font-size: 40px;
        line-height: 50px;
    }

    .time-home h2 {
        max-width: 300px;
    }

    .time-contact-us .time-col-left h2 a {
        font-size: 30px;
        line-height: 40px;
    }

    .body-snap .popular-roles h2.blue-head {
        font-size: 80px;
        line-height: 90px;
    }

    .blue-top-section {
        margin-bottom: -180px;
    }

    .body-snap.body-about .chase-jobs {
        padding: 80px 40px;
    }

    .time-inner-row-one .time-col-left {
        padding: 60px 0px 60px 80px;
    }

    .header-snap-roles .navbar-toggler-icon {
        background-size: 80%;
    }

    .body-font p {
        font-size: 14px;
        line-height: 22px;
    }

    .navbar.header-snap-roles {
        padding: 30px 40px;
    }

        .navbar.header-snap-roles.sticky {
            padding: 5px 40px !important; 
        }

        .talent-dashboard .navbar.header-snap-roles,
        .body-business-dashboard .navbar.header-snap-roles {
            padding: 20px 40px;
        }

    .body-snap section {
        padding: 80px 40px;
    }

    .body-talent-registration.body-snap section {
        padding: 50px 40px !important;
    }

    .popular-roles h2 {
        font-size: 40px;
        line-height: 54px;
    }

    .body-snap .popular-roles h1 {
        font-size: 80px;
        line-height: 94px;
    }

    .business-pointer-03, 
    .business-pointer-02,
    .business-pointer-05 {
        min-height: 400px;
        max-height: auto;
    }

    .job-board-row-one {
        padding-bottom: 60px;
    }

    .job-board-row-two {
        padding-top: 60px;
    }

        .job-board-row-two > div {
            width: 48%;
            margin-bottom: 40px;
        }

            .job-board-row-two > div:last-child {
                margin-bottom: 0px;
            }

            .job-board-row-two > div:nth-child(3) {
                margin-bottom: 0px;
            }

        .job-board-row-two h3 {
            font-size: 22px;
            line-height: 32px;
            max-width: 100%;
            min-height: auto;
        }

    .blog-cat p {
        font-size: 11px;
        line-height: 15px;
    }

    .effortless-row-two-main {
        padding-top: 60px;
    }

    .effortless-row-one {
        padding-bottom: 60px;
    }

    .effortless h3 {
        font-size: 20px;
    }

    .survey-list span {
        font-size: 40px;
        line-height: 54px;
    }

    .body-snap section.blue-top-section {
        padding-top: 0px;
        padding-bottom: 0px;
    }

        .body-snap section.blue-top-section img {
            width: 100%; 
            height: auto; 
        }            

            .blue-top-section h3 {
                font-size: 40px;
                line-height: 54px;
            }

    .blue-top-container .row {
        padding: 60px 80px;
    }

    .body-snap .footer-snap section.footer-sec-1 {
        padding: 0;
    }

    .body-snap section.faq-section-footer {
        padding: 30px 0px
    }

    .body-snap section.privacy-policy-main {
        padding: 0px;
    }

    .footer-snap-col-1 a,
    .footer-snap-col-2 a {
        font-size: 18px !important;
        line-height: 24px !important;
    }

    .verfied-users h3 {
        font-size: 30px;
        line-height: 44px;
    }

    .footer-snap {
        padding: 250px 40px 80px 40px;
    }

    .talent-dashboard .footer-snap,
    .body-business-dashboard .footer-snap {
        padding: 60px 40px 80px 40px; 
    }

    .about-our-company .p-bold {
        font-size: 20px;
        line-height: 30px;
    }

    .body-snap h2 {
        font-size: 50px;
        line-height: 60px;
    }

    .next-conatiner .row h3 {
        font-size: 22px;
        line-height: 30px;
    }

    .body-snap section.whats-next {
        padding-top: 40px;
    }

    .social-sharing-single-blog img {
        max-width: 30px;
    }

    .social-sharing-single-blog {
        max-width: 400px;
    }

    .body-snap .share-blog-sec > div {
        padding: 60px 20px !important;
    }

    .chase-jobs-job-description .popular-roles > div h2 {
        font-size: 80px;
        line-height: 90px;
    }

        .chase-jobs-job-description .popular-roles > div h2 span {
            font-size: 40px;
            line-height: 50px;
        }

    .body-snap section.chase-jobs {
        padding-bottom: 0px;
    }

    .body-snap.blog-single section.chase-jobs {
        padding-top: 25px; 
    }

    .body-snap.blog-single section {
        padding-top: 25px; 
    }

    .single-blog-content img {
        margin: 0 0 25px;
    }
}

@media (max-width: 991px) {
    .navbar-new li {
        margin: 0 15px 0 0; 
    }
    .header-snap-roles .nav-link,
    .header-snap-roles .flag-1 .nav-link {
        padding: 5px 10px;
    }
    .empowering .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

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

    .time-inner-row-one img {
        max-width: 350px;
    }
    .time-contact-us .time-inner-row-one img {
        max-width: 350px;
    }
}

@media screen and (max-width: 900px) {
    .business-pointer-01 .bs-image-mobile,
    .business-pointer-02 .bs-image-mobile,
    .business-pointer-03 .bs-image-mobile,
    .business-pointer-04 .bs-image-mobile,
    .business-pointer-05 .bs-image-mobile,
    .business-pointer-06 .bs-image-mobile,
    .business-pointer-07 .bs-image-mobile {
        background-size: cover !important;  
    }

    .whats-next.verified-users-sec p {
        max-width: 250px; 
    }

    .blog-sec-top h5 {
        font-size: 35px;
        line-height: 45px;
    }

    .time.time-business .time-inner-row-one img {
        max-width: 400px;
        margin: auto;
        margin-bottom: 20px;
    }

    .whats-next.verified-users-sec .next-conatiner .row h3 {
        font-size: 28px;
        line-height: 38px;
    }

    .time-home h2 {
        max-width: 100%;
    }

    .popular-roles h2:nth-child(1) {
        margin-bottom: 0px;
    }

    .time h2 br {
        display: none;
    }

    .blue-top-section {
        margin-bottom: -150px;
    }

    .time-contact-us .time-inner-row-one img {
        margin-top: 20px;
    }

    .time-inner-row-one {
        flex-direction: column-reverse;
        padding: 40px 20px !important;
        border-radius: 80px;
    }

        .time-inner-row-one > div {
            width: 100%;
            padding: 0px 10px 0px 10px !important;
        }

        .time-inner-row-one .col-6:nth-child(2) {
            text-align: center;
        }

    .time-contact-us .time-inner-row-one .col-6:nth-child(2) {
        text-align: left;
    }

    .time-col-left h1 br {
        display: none;
    }

    .time-contact-us .time-inner-row-one .time-col-left {
        padding: 20px 30px 20px 30px;
    }

    .time-inner-row-one .col-12 {
        order: 1;
    }

    .time-inner-row-one .time-col-left {
        padding: 40px 0px 40px 80px;
    }

    .effortless .effortless-row-two {
        flex-direction: column-reverse;
    }

    .effortless-row-two > div {
        width: 100%;
    }

    .effortless img {
        padding-left: 0px;
        margin-bottom: 20px;
        max-width: 500px;
    }

    .time-inner-row-one {
        margin-top: 0px !important;
    }

    .blue-top-container .row {
        padding: 40px 60px;
    }

    .blue-top-section h3 {
        font-size: 30px;
        line-height: 44px;
    }

    .next-row-two > div {
        margin-bottom: 0px;
        margin-right: 10px;
        min-height: 460px;
    }

    .next-row-two .business-pointer-02,
    .next-row-two .business-pointer-05 {
        margin-bottom: 30px;
    }

    .next-row-two > div:last-child {
        margin-right: 0px;
    }

    .time-inner-row-one img {
        position: unset;
        max-width: 300px;
    }

    .footer-snap {
        padding: 200px 40px 80px 40px;
        margin: 10px auto 0;
    }

    .time-contact-us .time-inner-row-one .time-col-left, .snap-roles-form-contact {
        margin-top: 0px;
    }
    .time-contact-us .time-inner-row-one .col-6:nth-child(3) {
        text-align: center;
    }    
}

@media screen and (max-width: 767px) and (min-width: 501px) { 
    .body-snap h1 {
        font-size: 50px;
        line-height: 60px;
    }
}

@media screen and (max-width: 767px) {
    .blog-row-two > .row {
        --bs-gutter-x: 1rem; 
    }
    
    .blog-row-two .row > .col {
        width: 100%;
    }

    .single-blog-cat {
        margin: 20px 0px 4px 0px;
    }

    .single-blog-data h3 {
        font-size: 20px;
        line-height: 28px;
    }

    .single-blog-data img {
        margin: 10px 0px;
    }

    .blog-sec-top .blog-cat {
        margin-top: 20px;
    }

    .blog-page-sec .blog-row-one .small-text {
        font-size: 40px;
        line-height: 50px;
    }

    .blog-page-sec .blog-row-two .col {
        margin-bottom: 20px;
    }

        .blog-page-sec .blog-row-two .col:last-child {
            margin-bottom: 0px;
        }

    .blog-sec-top .row:first-child {
        flex-direction: column-reverse;
    }

        .blog-sec-top .row:first-child > div {
            width: 100%;
        }

        .blog-sec-top .row:first-child h5 {
            max-width: 100%;
            margin: 10px 0 0; 
        }

    .blog-sec-top p {
        max-width: 100%;
    }

    .blog-page-sec .blog-row-two .card h5 {
        font-size: 24px;
        line-height: 30px;
        max-width: 100%;
    }

    .blog-sec-top h5 {
        font-size: 30px;
        line-height: 40px;
    }

    .social-sharing-single-blog img {
        max-width: 25px;
    }

    .social-sharing-single-blog {
        max-width: 300px;
        margin-top: 25px;
    }

    .body-snap .share-blog-sec > div {
        padding: 40px 20px !important;
    }

    .business-pointer-04 h3,
    .business-pointer-07 h3 {
        max-width: 300px;
    }

    .job-description-sec > div,
    .job-description-sec > .container-fluid { 
        border-radius: 44px;
    }

    .job-description-sec .mb-5 {
        margin-bottom: 20px !important;
    }

    .job-description-sec h3 {
        font-size: 22px;
        line-height: 32px;
    }

    .job-description-sec > div,
    .job-description-sec > .container-fluid {
        padding: 40px 20px !important;
    }

    .whats-next.verified-users-sec .row .col-12,
    .whats-next.verified-users-sec .row .col,
    .whats-next.verified-users-sec .row .col-7 {
        border-radius: 34px;
    }

    .whats-next.verified-users-sec .row {
        border-radius: 34px;
    }

    .body-snap section.whats-next.verified-users-sec {
        padding-top: 60px;
    }

    .whats-next.verified-users-sec .row {
        margin-bottom: 30px;
    }

    .business-pointer-04 .col-12 {
        margin: 0;
    }

    .whats-next.verified-users-sec .next-conatiner .row h3 {
        font-size: 22px;
        line-height: 32px;
    }

    .effortless h2 {
        max-width: 100%;
    }

    .body-snap .time-home h3 {
        font-size: 30px;
        line-height: 40px;
    }

    .body-snap section.time-contact-us {
        padding-top: 20px;
    }

    .col-6.survey-col-1 {
        width: 100%;
    }

    .body-snap section.whats-next {
        padding-top: 20px;
    }    

    .job-board-row-two > div:nth-child(3) {
        margin-bottom: 40px;
    }

    .survey-col-1 h2 {
        margin: auto;
    }
    
    .blue-top-section {
        margin-bottom: -120px;
    }

    .survey-list p {
        max-width: 100%;
        margin: auto;
    }

    .blog-cat p {
        font-size: 10px;
        line-height: 14px;
    }

    .survey-list span {
        font-size: 30px;
        line-height: 44px;
    }

    .popular-roles {
        padding-top: 60px;
    }

    .header-snap-roles .nav-link {
        font-size: 14px;
    }

    .about-our-company .p-bold {
        font-size: 18px;
        line-height: 28px;
        margin: 15px 0px;
    }

    .body-snap.body-about .chase-jobs { 
        padding: 60px 20px 60px 20px;
    }

    .privacy-policy-main a,  
    .body-font .privacy-policy-main p { 
        font-size: 11px;
    }

    .footer-snap-col-1 a,
    .footer-snap-col-2 a {
        font-size: 16px !important;
        line-height: 22px !important;
    }

    .footer-sec-1 .row {
        flex-wrap: wrap;
    }

    .footer-snap-col-1 {
        width: 50% !important;
        order: 2;
    }

    .footer-snap-col-2 {
        width: 50% !important;
        order: 3;
    }

    .col-4.footer-snap-col-3 {
        width: 100% !important;
        order: 1;
        text-align: left !important;
        margin-bottom: 20px;
    }

    .footer-snap-col-3 img {
        max-width: 250px;
    }

    .time-contact-us .time-inner-row-one img {
        max-width: 300px;
    }

    .body-snap .time-contact-us .time-col-left h1 {
        font-size: 20px;
        line-height: 34px;
    }

    .button-snap {
        font-size: 14px;
    }

        .button-snap.not-bg {
            margin-top: 10px;
        }

    .verfied-users p {
        margin-top: 10px;
    }

    .verfied-users h3 {
        font-size: 20px;
        line-height: 34px;
    } 

    .body-snap .popular-roles h1 {
        font-size: 60px;
        line-height: 74px;
    }

    .navbar.header-snap-roles {      
        padding: 0 20px 20px; 
    }
    
    .navbar.header-snap-roles.sticky {      
        padding: 5px 20px !important;  
    }

    .talent-dashboard .navbar.header-snap-roles,
    .body-business-dashboard .navbar.header-snap-roles {
        padding: 0 20px;
    }

    .body-snap section {
        padding: 50px 20px; 
    }

    .body-talent-registration.body-snap section {
        padding: 30px 20px !important;
    }

    .job-board-row-one, .effortless-row-one {
        flex-direction: column;
    }

        .job-board-row-one > div, .effortless-row-one > div {
            width: 100%;
        }

    .job-board-row-two > div {
        width: 100%;
    }

    .job-board-row-one, .effortless-row-one {
        padding-bottom: 40px;
    }

    .job-board-row-two, .effortless-row-two-main {
        padding-top: 40px;
    }

    .job-board .button-snap.not-bg {
        margin-top: 0px;
    }

    .job-board .button-snap span img {
        max-width: 15px;
    }

    .effortless .effortless-row-two {
        margin-bottom: 20px !important;
    }

        .effortless .effortless-row-two:last-child {
            margin-bottom: 0px !important;
        }

    .navbar-new li {
        border: 0px;
        margin-right: 10px;
    }

    .survey .row {
        flex-direction: column;
    }

        .survey .row > div .survey-list {
            width: 46%;
            text-align: center;
        }

    .survey .survey-col-2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 30px;
        width: 100%;
    }

    .survey-col-1 h1 {
        text-align: center;
        max-width: 100%;
    }

    .survey-list:nth-child(2) {
        margin: 0px 0px;
    }

    .footer-snap {
        padding: 170px 20px 60px 20px;
    }

    .header-snap-roles .navbar-toggler-icon {
        background-size: 65%;
    }

    .header-snap-roles .navbar-brand svg {
        max-width: 150px !important; 
    }

    .body-snap h2 {
        font-size: 40px;
        line-height: 50px;
    }

    .body-snap .popular-roles h2.blue-head {
        font-size: 50px;
        line-height: 60px;
    }

    .next-conatiner .row h3 {
        font-size: 20px;
        line-height: 28px;
    }

    .time-contact-us .col-12 .col-12 h1 {
        text-align: center;
        max-width: 300px;
    }
    
    .survey-col-1 h2 {
        text-align: center;
    }

    .blogs.business-blogs .blog-row-one h2 {
        margin: 0 30px 15px 0;
    }

    .blogs.business-blogs .blog-row-one h2,
    .blogs.business-blogs .blog-row-one h2 span {
        font-size: 40px;
        line-height: 50px;
    }

    .body-snap .empowering p {
        font-size: 16px;
        line-height: 20px;
    }

    .empowering .col:nth-child(2) img {
        max-width: 40px;
    }

    .business-pointer-01 img {
        border-radius: 34px;
    }    

    .empowering .col {
        flex: 1 0 32%;
    }

    .empowering .row .col:nth-child(4), .empowering .row .col:nth-child(5) {
        max-width: 200px;
    }

    .blog-page-sec .row-cols-1 {
        margin-top: 0px;
    }

    .chase-jobs-job-description .popular-roles > div h2 {
        font-size: 50px;
        line-height: 60px;
    }
    .talent-dashboard .footer-snap,
    .body-business-dashboard .footer-snap {
        padding: 30px;
    }
}

@media screen and (max-width: 600px) {
    .business-pointer-01,
    .business-pointer-02,
    .business-pointer-03,
    .no-middle-man,
    .business-pointer-05,
    .business-pointer-06,
    .business-pointer-07 {
        height: auto;
        min-height: 250px;
        position: relative;
    }

        .business-pointer-01 .bs-image-mobile,
        .business-pointer-02 .bs-image-mobile,
        .business-pointer-03 .bs-image-mobile,
        .business-pointer-04 .bs-image-mobile, 
        .business-pointer-05 .bs-image-mobile,
        .business-pointer-06 .bs-image-mobile,
        .business-pointer-07 .bs-image-mobile { 
            background-position: 70% 0 !important;  
        }

    .whats-next.verified-users-sec .row,
    .whats-next.verified-users-sec .row .col-7,
    .whats-next.verified-users-sec .row .col,
    .whats-next.verified-users-sec .row .col-12 {
        flex: 0 0 auto;
        border-radius: 0;
    }

    .whats-next.verified-users-sec .bs-text-sm {
        position: absolute; 
    }

    .whats-next.verified-users-sec .row:first-child {
        flex-direction: row; 
    }

    .whats-next.verified-users-sec .row {
        margin: 0; 
    }

    .business-pointer-01,
    .business-pointer-02,
    .business-pointer-03,
    .no-middle-man,
    .business-pointer-05,
    .business-pointer-06,
    .bs-image-mobile {
        height: auto;
        min-height: 250px;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
    }
    
        .business-pointer-01 .bs-text-sm, 
        .business-pointer-02 .bs-text-sm, 
        .business-pointer-03 .bs-text-sm, 
        .business-pointer-04 .bs-text-sm, 
        .business-pointer-05 .bs-text-sm, 
        .business-pointer-06 .bs-text-sm, 
        .business-pointer-07 .bs-text-sm { 
            width: 100% !important; 
            margin: 0 0 30px !important;
            position: static !important; 
        }

    .whats-next.verified-users-sec p {
        margin: 0;
    }

    .blog-sec-top h5 {
        font-size: 25px; 
        line-height: 35px; 
    }

    .blog-page-sec .blog-row-two .card h5 {
        font-size: 20px;
        line-height: 26px;
    }

    .body-snap .share-blog-sec > div {
        border-radius: 50px;
    }

    .blogs.business-blogs .blog-row-one h2, .blogs.business-blogs .blog-row-one h2 span {
        font-size: 30px;
        line-height: 40px;
    }

    .body-snap h2 {
        font-size: 30px;
        line-height: 40px;
    }

    .business-pointer-01 .bs-text-sm,
    .business-pointer-04 .bs-text-sm,
    .business-pointer-07 .bs-text-sm {
        padding: 20px 0px 0px 0px !important;
    }

    .chase-jobs.chase-jobs-job-description {
        padding-top: 0;
    }

    .whats-next.verified-users-sec .row .col-7 {
        margin-bottom: 20px;
    }

    .business-pointer-01 img, 
    .whats-next.verified-users-sec img {
        border-radius: 24px;
        object-fit: cover;
        height: auto !important; 
    }

    .whats-next.verified-users-sec .button-snap.not-bg img {
        min-height: auto;
        max-height: 100%;
    }

    .whats-next.verified-users-sec .col-6 {
        width: 100%;
    }

    .whats-next.verified-users-sec h3, .whats-next.verified-users-sec p {
        max-width: 100%;
    }

    .whats-next.verified-users-sec .row {
        border-radius: 0px;
        background-color: transparent !important;
    }

    .business-pointer-01 .bs-text-sm,
    .business-pointer-04 .bs-text-sm,
    .business-pointer-07 .bs-text-sm {
        padding: 20px 0px;
    }

    .whats-next.verified-users-sec .next-conatiner .row h3, .whats-next.verified-users-sec p,
    .whats-next.verified-users-sec .button-snap.not-bg {
        color: #000000 !important;
    }

    .whats-next.verified-users-sec .row:nth-child(2) .button-snap img,
    .whats-next.verified-users-sec .row:nth-child(4) .col .button-snap img {
        filter: invert(1);
    }

    .about-our-company > div {
        position: relative;
        z-index: 11;
    }

    .about-our-company {
        position: relative;
    }

        .about-our-company::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

    .the-mission > div {
        position: relative;
        z-index: 11;
    }

    .the-mission {
        position: relative;
    }

        .the-mission::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

    .survey .row > div .survey-list {
        margin-right: 0px;
        margin-bottom: 25px;
        width: 100%;
        max-width: 400px;
    }

    .time-inner-row-one {
        border-radius: 50px;
    }

    .about-our-company .p-bold {
        font-size: 16px;
        line-height: 26px;
    }

    .header-snap-roles .nav-link {
        font-size: 12px;
    }

    .footer-snap {
        padding: 60px 20px 60px 20px;
    }

    .verfied-users .row {
        flex-direction: column;
        margin-bottom: 30px;
    }

        .verfied-users .row:nth-child(odd) {
            flex-direction: column-reverse;
        }

        .verfied-users .row .col-6 {
            width: 100% !important;
            max-width: 100%;
            overflow: hidden;
        }

        .verfied-users .row img {
            max-width: 350px;
        }

    .verfied-users p {
        max-width: 100%;
    }

    .verfied-users .row .button-snap.not-bg img {
        max-width: 15px;
    }

    .verfied-users h3 {
        margin-top: 10px;
        max-width: 100%;
    }

    .body-snap section.blue-top-section {
        margin-bottom: 0;
        padding-bottom: 60px;
    }

    .blue-top-container .row > div {
        width: 100% !important;
    }

    .blue-top-container .row {
        padding: 40px 20px;
        border-radius: 50px;
        flex-direction: column-reverse;
    }

    .blue-top-container img {
        max-width: 300px;
        margin-bottom: 20px;
    }

    .whats-next .col-12, .whats-next .col, .whats-next .col-7 {
        background-image: none;
        padding-bottom: 0px !important;
    }

    .next-row-two > div {
        width: 100%;
        min-height: auto;
        max-height: 100%;
        margin-right: 0px;
    }

    .business-pointer-03 p {
        color: rgb(0 0 0 / 70%);
        opacity: 1;
        max-width: 100%;
    }

    .business-pointer-03 h3 {
        max-width: 100%;
        color: #000000;
        opacity: 1;
    }

    .body-snap section.whats-next {
        padding-top: 0px;
    }

    .image-mobile {
        margin-bottom: 10px;
    }

        .image-mobile img {
            max-width: 100%; 
            object-fit: cover;
            min-height: 220px;
            max-height: 220px;
            object-position: right;
        }

    .business-pointer-04 p, 
    .business-pointer-07 p, 
    .business-pointer-02 p, 
    .business-pointer-03 p {
        max-width: 100%;
    }

    .next-row-two .image-mobile img {
        object-position: bottom;
    }

    .time-contact-us .time-inner-row-one {
        padding: 30px 20px !important;
    }

    .blog-page-sec .blog-row-one .small-text {
        font-size: 30px;
        line-height: 40px;
    }

    .chase-jobs-job-description .popular-roles > div h2 span {
        font-size: 28px; 
        line-height: 38px; 
    }
}

@media (max-width: 1200px) {
    .empowering .industry-icon {
        max-width: calc(100% - 10px); 
        margin:0 5px;  
        padding: 15px 10px; 
    }
    .body-snap .empowering p {
        font-size: 14px; 
        line-height: 18px; 
    }
}

@media (max-width: 1200px) and (min-width: 601px) {
    .body-business .business-pointer-01 > div + div,
    .body-business .business-pointer-04 > div:first-child,
    .body-business .business-pointer-07 > div:first-child {
        position: absolute;
    }
}

@media (max-width: 1200px) {    

    .body-business .business-pointer-01,
    .body-business .business-pointer-02,
    .body-business .business-pointer-03,
    .body-business .business-pointer-05,
    .body-business .business-pointer-06,
    .body-business .business-pointer-04, 
    .body-business .business-pointer-07 {
        min-height: 350px;
        position: relative;
        border-radius: 0 !important;
    }

    .body-business .verified-users-sec img {
        position: absolute; 
        top: 0;  
        left: 0; 
        width: 100%; 
        height: 350px; 
        border-radius: 0 !important; 
        object-fit: cover; 
    }
}

@media (max-width: 600px) {

    .body-business .business-pointer-01 .bs-text-sm {
        padding: 0 !important;
    }    

        .body-business .business-pointer-01 > div:first-child {
            order: 2;
        }

        .body-business .business-pointer-01 > div + div {
            position: relative;
            order: 1;
        }

    .body-business .verified-users-sec img {
        position: relative;
        margin: 0 0 10px;
    }

    .body-business .verified-users-sec .bs-text-sm {
        padding: 0 !important;
    }
    .business-pointer-07 > div:first-child {
        order: 2; 
    }
}

@media screen and (max-width: 500px) and (min-width: 401px) {
    .body-snap h1 {
        font-size: 40px;
        line-height: 50px; 
    }
} 

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

    .empowering .col {
        flex: 1 0 50%;
    }

    .time-contact-us .time-col-left h2 a {
        font-size: 25px;
        line-height: 35px;
    }

    .body-snap .popular-roles h2.blue-head {
        font-size: 40px;
        line-height: 50px;
    }

    .body-snap h2 {
        font-size: 30px;
        line-height: 40px;
    }    

    .time-contact-us .time-inner-row-one {
        border-radius: 40px;
    }

    .col-4.footer-snap-col-3 {
        text-align: center !important;
    }

    .footer-snap-col-2 {
        width: 100% !important;
        text-align: center;
    }

    .footer-snap-col-1 {
        width: 100% !important;
        text-align: center;
        margin-bottom: 10px;
    }

    .faq-col-1, .faq-col-2 {
        width: 100% !important;
        text-align: center;
    }

    .col-6.faq-col-2 {
        justify-content: center !important;
        margin-top: 10px;
    }

    .footer-snap-col-3 img {
        max-width: 200px;
    }

    .privacy-policy-main .col-6 {
        width: 100% !important;
        text-align: center !important;
    }

        .privacy-policy-main .col-6 .snaprole-copyright {
            text-align: center !important;
        }

    .time-contact-us .col-12 .col-12 h1 {
        text-align: center;
        max-width: 250px;
    }

    .survey .row > div {
        flex-direction: column;
        align-items: center;
    }

    .survey-list p:last-child {
        margin-bottom: 0px;
    }

    .chase-jobs-job-description .popular-roles > div h2 {
        font-size: 40px;
        line-height: 50px;
    }
}


@media screen and (max-width: 400px) {
    .chase-jobs .sign-up {
        font-size: 14px;  
    }

    .business-pointer-01 .bs-image-mobile,
    .business-pointer-02 .bs-image-mobile,
    .business-pointer-03 .bs-image-mobile,
    .business-pointer-04 .bs-image-mobile,
    .business-pointer-05 .bs-image-mobile,
    .business-pointer-06 .bs-image-mobile,
    .business-pointer-07 .bs-image-mobile {
        min-height: 200px;
    }    

    .blog-page-sec .blog-row-one {
        flex-direction: column;
        align-items: start !important;
    }

        .blog-page-sec .blog-row-one > div {
            width: 100% !important;
            text-align: left !important;
        }

    .business-blogs .blog-row-one {
        flex-direction: column;
        align-items: start !important;
    }

        .business-blogs .blog-row-one > div {
            width: 100% !important;
        }

        .business-blogs .blog-row-one .blg-button {
            text-align: left !important;
        }

    .managers {
        flex-direction: column;
        align-items: start !important;
    }

        .managers h2 {
            margin-right: 0px;
        }

        .managers .button-snap {
            margin-top: 20px;
        }

    .body-snap h1 {
        font-size: 30px;
        line-height: 40px;
    }

    .survey-list p {
        max-width: 100%;
    }

    .image-mobile img {
        min-height: 190px; 
        max-height: 190px; 
    }

    .time-contact-us .col-12 .col-12 h1 {
        max-width: 190px;
    }

    .social-sharing-single-blog a {
        margin-right: 12px !important;
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  sign up  */

@media (min-width: 1200px) {

    .body-talent-registration .container-fluid {
        height: 100svh;
    }

    .body-talent-registration.body-forgot-password .container-fluid {
        height: auto;
    }

    .welcome-to-snaproles,
    .body-forgot-password .loginContainer { 
        height: 100svh;
    }

    .body-forgot-password #Signup {
        height: 100%; 
    }
}

.body-talent-registration .container-fluid main {
    min-height: 100%;
    padding: 0 !important;
    background: transparent;
}

.body-talent-registration .container-fluid .container-fluid > div {
    height: 100%;
}

.right-signup .faq-col-2 img {
    max-width: 32px;
}

.right-signup {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    background-color: #F08F3A;
    padding: 60px 40px; 
    border-top-left-radius: 65px;
    border-bottom-left-radius: 65px;
    overflow: auto; 
}

   

    @media (min-width: 1200px) {
        .right-signup {
            height: 100svh;
        } 
}

    .right-signup .log-title {
        width: 100%; 
        font-size: 60px; 
        line-height: 70px; 
        font-family: "Archivo-Bold", sans-serif; 
        color: #000000; 
        text-align: center; 
    }

.proceeder {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
}

    .proceeder a {
        margin-bottom: 0;
        color: #000000;
        font-family: "Inter-Medium", sans-serif;
        font-size: 14px;
        margin-right: 10px;
        text-decoration: none; 
        text-transform: uppercase;
    }
        
    .proceeder svg {
        max-width: 30px;
        margin: 0 0 0 10px;
    }

.login-step {
    display: flex;
    justify-content: center;
    width: 100%;
    color: #000;
    padding: 20px 0px;
}

    .login-step p {
        color: #000;
        font-size: 13px;
    }

p.or {
    width: 100%;
    text-align: center;
    color: #000000;
    padding-bottom: 20px;
    margin-bottom: 0px;
}

.form-nav {
    width: 100%;
    text-align: center;
}

    .form-nav label {
        display: none;
    }

    .form-nav input {
        height: 46px;
        border-radius: 50px;
        max-width: 400px;
        margin: auto;
    }

.email-check {
    font-size: 13px; 
    color: #ac0b0b; 
    text-align: left; 
}

.body-talent-registration .form-nav,
.business-registration .form-nav { 
    max-width: 400px;
    margin: 0 auto;
}

.body-talent-registration .form-nav input {
    max-width: 100%;
}

        .form-nav button {
            border: 0px;
        }


.login-step > a,
.login-step form button {
    display: flex;
    align-items: center;
    color: #000; 
    border: 0;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    background: #fff;
}

.login-step p {
    margin-bottom: 0px;
}

.login-step svg {
    margin-right: 10px;
    max-width: 30px;
}

.google-login,
.login-google { 
    margin-right: 20px;
}

.welcome-to-snaproles,
.loginContainer { 
    padding: 0 0 0 60px;
    padding-right: 0px !important;
    padding-top: 0px !important;
}

    .welcome-to-snaproles > div {
        max-width: 100%;
    }

.left-signup {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

p.one-paltform {
    color: #000000;
    font-size: 22px;
    line-height: 32px;
    max-width: 350px;
}

.left-signup h5 {
    font-family: "Inter-Bold", sans-serif;
    margin-bottom: 0px;
}

.left-signup svg {
    max-width: 350px;
    margin-bottom: 10px;
}

h2.no-resume-need {
    font-family: "Archivo-Bold", sans-serif;
    max-width: 370px;
    margin-top: 30px;
}

.form-nav input::placeholder {
    font-weight: 400;
    font-family: 'Archivo-Medium' !important;
}

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


    .right-icon-navbar .navbar-nav {
        max-width: 100% !important;
    }

    .header-snap-roles .right-icon-navbar li.nav-item {
        border: 0px;
    }

    .welcome-to-snaproles .row {
        flex-direction: column;
    }

        .welcome-to-snaproles .row > div {
            width: 100%;
        }

    .left-signup {
        text-align: center;
    }

    p.one-paltform,
    h2.no-resume-need {
        max-width: 100%;
    }

    h2.no-resume-need {
        margin-bottom: 30px;
    }

    p.one-paltform {
        font-size: 20px;
        line-height: 30px;
    }

    .welcome-to-snaproles {
        padding: 50px 40px 30px !important; 
    }

    .right-signup {
        border-radius: 65px;
    }

    .left-signup svg {
        max-width: 300px;
    }


    .login-step svg {
        max-width: 25px;
    }
}

@media screen and (max-width: 767px) {
    .welcome-to-snaproles {
        padding: 50px 20px 30px !important;
    }

    .right-signup {
        border-radius: 50px;
    }    

    .welcome-to-snaproles .row > div {
        border-radius: 30px; 
    }

    p.one-paltform {
        font-size: 18px;
        line-height: 28px;
    }

    .left-signup svg {
        max-width: 250px;
    }  
    #Signup .login-step img {
        max-width: 25px;
    }

    .login-step {
        padding: 25px 0px;
    }

    p.or {
        padding-bottom: 25px;
    }

    .proceeder p {
        font-size: 12px;
    }
}

@media screen and (max-width: 640px) {
    .welcome-to-snaproles {
        padding: 50px 10px 30px !important; 
    }
}

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

    .left-signup svg {
        max-width: 200px; 
    }

    p.one-paltform {
        font-size: 16px;
        line-height: 26px;
    }

    .left-signup h5 {
        font-size: 16px;
    }

    h2.no-resume-need {
        margin-top: 20px;
    }

    p.or {
        padding-bottom: 20px;
    }

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

        .login-step p {
            font-size: 11px;
        }

        .login-step > a {
            padding: 8px 20px;
        }
}

@media screen and (max-width: 400px) {
    .login-step {
        flex-direction: column;
    }

    .google-login {
        margin-right: 0px;
        margin-bottom: 10px;
    }

    .login-step > a {
        justify-content: center;
        max-width: 130px;
        margin-left: auto;
        margin-right: auto;
    }
    .google-login, 
    .login-google {
        margin: 0 0 10px; 
    }
    .login-step .login-google,
    .login-step .login-facebook {
        display: flex;
        justify-content: center;
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~  menu  */

.right-icon-navbar .navbar-collapse {
    display: block !important; 
    position: fixed;
    width: 100%;
    max-width: 100%;
    right: 0;
    bottom: -110%; 
    background: #fff;
    padding: 0px 0px;
    height: auto;
    z-index: 999;
    height: 100svh;
    transition: all 0.3s linear 0s; 
}

    .right-icon-navbar .navbar-collapse.show {
        bottom: 0;
    }

    .right-icon-navbar .navbar-collapse .row {
        align-items: center;
        height: 100%;
        /*background: url(../Images/chase-bg.webp) no-repeat left center/100%;*/
    }

        .right-icon-navbar .navbar-collapse .row .col-6 {
            max-width: 100%;
            height: 100%;
        }

            .collapse-right {
                max-width: 600px;
                background-color: #FF8011;
                border-top-left-radius: 120px;
                border-bottom-left-radius: 120px;
            }

.collapse-left svg {
    max-width: 160px;
    margin-bottom: 25px;
}

.right-icon-navbar .collapse-left {
    padding-left: 40px;
    align-content: center; 
}

.right-icon-navbar .collapse-right {
    padding-right: 40px; 
    padding-top: 60px; 
}

.collapse-left .sign-up {
    color: #fff;
}

.collapse-left h2 {
    max-width: 400px;
    font-size: 50px;
    line-height: 60px;
    font-family: "Archivo-Bold", sans-serif;
    color: #000;
    letter-spacing: -2px;
    text-align: left; 
}

.collapse-left h2 span {     
    max-width: 300px; 
}

.header-snap-roles .right-icon-navbar .nav-link {
    color: #fff !important;
    margin-right: 0;
    text-align: right;
    font-size: 34px;
    font-family: "Archivo-SemiBold", sans-serif;
    padding-bottom: 0px;
    padding-top: 0px;
    line-height: 44px;
}

.header-snap-roles .right-icon-navbar li.nav-item {
    display: flex;
    justify-content: end;
    margin-right: 0px;
}

.header-snap-roles .container-fluid {
    position: unset;
}

.faq-nav {
    list-style: none;
    padding: 40px 0px;
}

    .faq-nav a,
    .faq-nav a:visited,
    .faq-nav button,
    .faq-nav button:visited {
        color: #fff;
        text-align: right;
        font-family: "Inter-Regular", sans-serif;
        font-size: 20px;
        text-decoration: underline;
        border: 0;
        padding: 5px 15px; 
        background: none;
    }

    .faq-nav li {
        text-align: right;
    }

    .faq-nav a:hover,
    .faq-nav button:hover {
        text-decoration: none;
    }

    .right-icon-navbar .navbar-collapse .navbar-toggler {
        display: none;
        position: fixed;
        top: 20px;
        right: 20px;
        width: auto;
        text-align: right;
        padding-top: 0px !important;
        padding-bottom: 30px !important;
    }

    .right-icon-navbar .navbar-collapse.show .navbar-toggler {
        display: block;
    }

.navbar-inner {
    position: unset !important;
}

.right-icon-navbar .navbar-nav {
    margin: 50px 0 0;
}

.right-icon-navbar .collapse-right .faq-col-2 {
    height: auto !important;
    width: 100% !important;
}

    .right-icon-navbar .collapse-right .faq-col-2 a svg {
        transition: all 0.3s linear 0s;
    }
    
    .right-icon-navbar .collapse-right .faq-col-2 a svg:hover {
        transform: scale(1.1); 
    }


/*~~~~~~~~~~~~~~~~~~~  menu media query start  */

    @media (max-width: 1200px) {
        .right-icon-navbar .collapse-left .chase-head > svg {
        max-width: 200px;
        margin: 0 0 15px;
    }
    .navbar-new > .nav-hide-sm {
        display: none;
    }
    .navbar-new .nav-hide-lg {
        display: flex; 
    }
    .nav-log-sm button svg {
        width: 24px;
        height: 24px;
    }
}

@media screen and (max-width: 991px) {
    .faq-nav a,
    .faq-nav a:visited,
    .faq-nav button,
    .faq-nav button:visited {
        padding: 5px 10px; 
    }
}

@media screen and (max-width: 767px) {
    .collapse-left h2, 
    .collapse-left h2 span {
        font-size: 40px;
        line-height: 50px;
    }

    .faq-nav a,
    .faq-nav button { 
        font-size: 18px;
    }

    .right-icon-navbar .collapse-left .chase-head > svg {
        width: 100%; 
        max-width: 150px;  
        margin: 0; 
    }

    .right-icon-navbar .collapse-right {
        width: 100%;
        max-width: 370px;
        margin-left: auto;
        border-top-left-radius: 80px;
        border-bottom-left-radius: 80px;
    }

    .right-icon-navbar .collapse-right {
        padding-bottom: 40px;
        padding-right: 20px;
        padding-top: 40px;
    }

    .faq-nav {
        list-style: none;
        padding: 20px 0px;
    }

    .header-snap-roles .right-icon-navbar .navbar-collapse .navbar-toggler svg {
        max-width: 20px; 
    }

        .header-snap-roles .right-icon-navbar .navbar-collapse .navbar-toggler svg path {
            stroke: #000; 
        }

        .header-snap-roles .right-icon-navbar .nav-link {
            display: inline-block;
            font-size: 20px;
            line-height: 30px;
        }

    .right-icon-navbar .collapse-left {
        width: 100%;
        height: 50svh !important;
        padding: 15px;
        align-content: center;
    }

        .right-icon-navbar .collapse-left .chase-head > svg {
            padding: 0;
        }

    .body-snap .right-icon-navbar .navbar-collapse .chase-head h1,
    .body-snap .right-icon-navbar .navbar-collapse .chase-head h1 span {
        font-size: 18px;
        line-height: 22px;
    }

    .body-snap .right-icon-navbar .navbar-collapse .chase-head h1,
    .collapse-left h2 {
        display: none;
    }

        .body-snap .right-icon-navbar .navbar-collapse .chase-head h1 span {
            letter-spacing: -1px;
        }

    .for-jobseekers-menu .button-snap,
    .for-business-menu .button-snap ,
    .for-employee-menu .button-snap { 
        margin: 0 10px 0 0;  
        padding: 5px 15px;  
    }

    .right-icon-navbar .collapse-right {
        display: flex; 
        flex-wrap: wrap;
        align-content: center;
        width: 100%;
        height: 50svh !important;  
        border-radius: 0; 
        padding-right: 0;
    }

    .right-icon-navbar .navbar-nav,
    .right-icon-navbar .faq-nav {
        width: 100%;
        margin: 0;
    }     
    .right-icon-navbar .col-6.faq-col-2 a { 
        margin: 0 8px 0 0 !important; 
    }    
    .navbar-new > li {
        margin-right: 15px;  
    }
    .header-snap-roles .nav-link,
    .header-snap-roles .nav-link button,
    .header-snap-roles .flag-1 .nav-link {
        font-size: 14px;
        line-height: 20px;
    }
    .right-icon-navbar .collapse-left {
        display: flex;
        align-items: baseline;
        justify-content: flex-start !important;
    }
    .for-jobseekers-menu,
    .for-business-menu,
    .for-employee-menu {
        width: 100%; 
        margin: 15px 0 0;  
        padding: 10px 15px;  
        border-radius: 10px; 
        text-align: center; 
        background: #f5f5f5;  
    }
        .for-jobseekers-menu h4,
        .for-business-menu h4,
        .for-employee-menu h4 {
            font-family: "Archivo-Bold", sans-serif; 
        }
    .header-snap-roles .right-icon-navbar li.nav-item,
    .right-icon-navbar .navbar-collapse .row .col-6 {
        justify-content: center !important; 
        flex-wrap: wrap;       
    }
    .right-icon-navbar .navbar-collapse .navbar-toggler {
        top: 25px; 
    }
    .right-icon-navbar .navbar-collapse.show .navbar-toggler {
        width: 28px;
        height: 28px;
        padding: 0 !important;
        border-radius: 100%;
        text-align: center;
        background: #f5f5f5;
    }
    
    .right-icon-navbar .navbar-collapse.show .navbar-toggler svg {
        width: 12px; 
    }
}

@media screen and (max-width: 640px) {
    .collapse-left h2,
    .collapse-left h2 span {
        font-size: 34px; 
        line-height: 44px; 
    }
}

@media screen and (max-width: 500px) {
    .header-snap-roles .navbar-brand svg {
        max-width: 31vw !important;  
    }

    .navbar.header-snap-roles {
        padding: 0 10px 20px;
    }
    
    .navbar.header-snap-roles.sticky {
        padding: 0 10px 5px !important;
    }

    .navbar-new > li {
        margin-right: 10px; 
    }

    .header-snap-roles .nav-link,
    .header-snap-roles .flag-1 .nav-link {
        padding: 5px 7px;
    } 

            .header-snap-roles .nav-link img {
                width: 20px; 
            }

    .right-icon-navbar .col-6.faq-col-2 {
        justify-content: end !important;
    }
}

@media screen and (max-width: 480px) {
    .right-icon-navbar .collapse-left {
        padding: 10px;
    }
    .collapse-left h2, 
    .collapse-left h2 span {
        font-size: 22px;
        line-height: 32px;
    }
}
@media screen and (max-width: 420px) {    
    .faq-nav a, 
    .faq-nav a:visited, 
    .faq-nav button, 
    .faq-nav button:visited {
        padding: 5px 7px;
    }
}

@media screen and (max-width: 400px) {    
    .navbar-new > li {
        margin-right: 5px; 
    }

    .header-snap-roles .nav-link,
    .header-snap-roles .nav-link button,
    .header-snap-roles .flag-1 .nav-link {
        font-size: 13px;
        line-height: 17px;
        font-family: "Inter-Medium", sans-serif; 
    }

    .nav-log-sm button svg {
        width: 18px;
        height: 18px;
    }

    .right-icon-navbar .collapse-right {
        max-width: 285px;
    }

    .header-snap-roles .right-icon-navbar .nav-link {
        font-size: 18px;
        line-height: 28px;
    }

    .faq-nav a,
    .faq-nav button { 
        font-size: 16px;
    } 

    .right-icon-navbar .col-6.faq-col-2 {
        justify-content: end !important;
    }

    .faq-nav a, 
    .faq-nav a:visited, 
    .faq-nav button, 
    .faq-nav button:visited {
        padding: 5px; 
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  pricing  */

.business-modal-steps {
    overflow: hidden; 
}

.pricing-page {
    background-attachment: fixed;
}

    .pricing-page #pricingApp h2 span { 
        display: block;
        color: #1573ff;
        font-size: 100px;
        line-height: 114px;
        font-family: 'Archivo-Bold', sans-serif;
    }

    .pricing-page .pricingSolLink p {
        font-family: 'Inter-Medium', sans-serif;
        color: #000;
        margin: 0 15px 15px 0; 
    }

        .pricing-page .pricingSolLink p span {
            font-family: "Archivo-Semibold", sans-serif;
            color: #ff8011; 
        }

    .pricing-page .pricingSolLink p i { 
        font-style: normal; 
    }
    
    .pricing-page .pricingSolLink * { 
        text-decoration: none; 
    }
    
    .pricing-page .pricingSolLink * svg {  
        margin: 2px 0 0 10px;  
    }

        .pricing-page > .container-fluid {
            max-width: 90%; 
        }

.container-fluid.pricing {
    margin: 0 0 100px;
    padding-right: var(--bs-gutter-x, .75rem) !important;
    padding-left: var(--bs-gutter-x, .75rem) !important;
}

.pre-msg {
    margin: 0 0 15px; 
}

    .pre-msg span {
        font-family: "Archivo-Bold", sans-serif; 
    }

.pricing-container {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    background: #f2f6ff;
}

.pricing-box {
    display: flex; 
}

.pricing-box ul {
    width: 100%; 
    list-style-type: none; 
    margin: 0; 
    padding: 0;
}

.pricing-left {
    display: flex; 
    width: 280px; 
    padding: 30px 0 0; 
}

    .pricing-left ul li {
        display: flex;
        flex-wrap: wrap;
        align-content: center; 
        align-items: center; 
        font-size: 14px;
        line-height: 1.2;
        font-family: 'Archivo-Medium', sans-serif;
        padding: 15px 10px;
        border-bottom: 1px solid #cecece;
    }

        .pricing-left ul li:nth-child(3),
        .pricing-plan-info ul li:nth-child(3),
        .pricing-left ul li:nth-child(4),
        .pricing-plan-info ul li:nth-child(4) { 
            font-family: 'Archivo-Bold', sans-serif;
            color: #ff8011; 
        }

        .pricing-left ul li:first-child,
        .pricing-plan-info ul li:nth-child(11),
        .pricing-left ul li:nth-child(11) {
            border-bottom: 0;
        }

        .pricing-plan-info ul li:first-child,
        .pricing-left ul li:first-child {
            display: block;
            min-height: 155px;  
        }

        .pricing-plan-info ul li:nth-child(2),
        .pricing-left ul li:nth-child(2) {
            min-height: 90px; 
            font-size: 14px;
            font-family: 'Archivo-Semibold', sans-serif;
        } 
        
        .pricing-left ul li:nth-child(2) {
            font-size: 18px;
        }       

        .pricing-plan-info ul li:nth-child(6),
        .pricing-left ul li:nth-child(6) { 
            min-height: 70px; 
        }
        
        .pricing-plan-info ul li:nth-child(5),
        .pricing-left ul li:nth-child(5) { 
            min-height: 70px; 
        }
        
        .pricing-plan-info ul li:nth-child(7),
        .pricing-plan-info ul li:nth-child(8),
        .pricing-left ul li:nth-child(7),
        .pricing-left ul li:nth-child(8) {
            min-height: 80px; 
        }
        
        .pricing-plan-info ul li:nth-child(9), 
        .pricing-left ul li:nth-child(9),
        .pricing-plan-info ul li:nth-child(10),
        .pricing-left ul li:nth-child(10) {  
            min-height: 85px; 
        }

        .pricing-plan-info ul li:nth-child(11),
        .pricing-left ul li:nth-child(11),
        .pricing-plan-info ul li:nth-child(12),
        .pricing-left ul li:nth-child(12),
        .pricing-plan-info ul li:nth-child(13),
        .pricing-left ul li:nth-child(13),
        .pricing-plan-info ul li:nth-child(14),
        .pricing-left ul li:nth-child(14),
        .pricing-plan-info ul li:nth-child(15),
        .pricing-left ul li:nth-child(15) { 
            min-height: 85px; 
        }

        .pricing-plan-info ul li:nth-last-child(3), 
        .pricing-left ul li:nth-last-child(3) {
            flex-wrap: nowrap; 
        }

        .pricing-plan-info ul li:last-child,
        .pricing-left ul li:last-child {
            justify-content: center;
            border-bottom: 0;
        }

.pricing-plan-info ul li.additional-info svg {
    width: 20px;
    height: 20px;
}

.pricing-left ul li span {
    display: block;
    width: 100%;
    font-size: 11px;
}

    .pricing-plan-info ul li:first-child h6, 
    .pricing-plan-info ul li:first-child h6 span {
        font-size: 1rem;
        font-family: 'Archivo-Semibold', sans-serif;
        font-weight: normal;
        margin: 10px 0;
    }

        .pricing-plan-info ul li:first-child h6 span {
            color: #ff8011; 
        }
    
    .pricing-plan-info ul li:first-child h6 span i {
        font-style: normal; 
    }

.pricing-left ul li.additional-services {
    font-size: 18px;
    font-family: 'Archivo-Semibold', sans-serif; 
}

    .pricing-left ul li.additional-services,
    .pricing-left ul li.additional-services ~ li:not(:last-child),
    .pricing-right ul li.additional-services, 
    .pricing-right ul li.additional-services ~ li:not(:last-child) {
        display: none;
    }

    .pricing-right {
        display: flex;
        width: calc(100% -300px);
    }

.pricing-plans {
    display: grid;
    grid-template-columns: 19.5% 19.5% 19.5% 19.5% 19.5%; 
    grid-gap: 1%; 
    overflow: visible;
}

.pricing-plan-info { 
    flex: 0 0 19%; 
    position: relative;
    padding: 30px 0 0;
    border-radius: 10px;
    text-align: center; 
    background: #fff; 
}

@media (min-width: 1200px) {
    .pricing-plan-info {
        display: block !important;  
        margin: 0 5px 0 0;
    }
}

    .pricing-plan-info ul li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center; 
        font-size: 14px;
        line-height: 1.2;
        font-family: 'Inter-Medium', sans-serif;
        padding: 15px;
        border-bottom: 1px solid #cecece;
    }
    
    .pricing-plan-info ul li:first-child {
        font-size: 34px; 
        line-height: 1.2;
        font-family: 'Archivo-Bold', sans-serif;
        border-bottom: 0; 
    }

        .pricing-plan-info ul li span {
            display: block; 
            font-size: 14px; 
            line-height: 1.2; 
            font-family: 'Archivo-Regular', sans-serif;  
        }

        .pricing-plan-info ul li.plan-cost {
            color: #707070; 
        }
        
        .pricing-plan-info ul li.plan-cost span {
            display: inline-block; 
            font-size: 22px;
            line-height: 1.2;
            font-family: 'Inter-Bold', sans-serif;
            color: #1573FF;
        }

    .pricing-plan-info.recommended {
        background: #1573FF;
    }

        .pricing-plan-info.recommended:before { 
            content: "Recommended";
            position: absolute;
            top: 10px;  
            right: 0;  
            left: 0;  
            margin: auto; 
            width:110px; 
            font-size: 10px;
            line-height: 1.2;
            color: #fff;
            text-transform: uppercase;
            padding: 3px 10px;
            border-radius: 5px; 
            background: #FF8011;
        }

.es .pricing-plan-info.recommended:before {
    content: "Recomendado";
}

        .pricing-plan-info.recommended ul li,
        .pricing-plan-info.recommended ul li.plan-cost span {
            color: #fff;
        }

            .pricing-plan-info.recommended ul li .button-snap {
                background: #ff8011 !important;
            }

                .pricing-plan-info.recommended ul li .button-snap:hover {
                    background: #e57310 !important;
                }

.pricing-solution {
    padding: 30px; 
    border-radius: 10px; 
    background: #fff; 
}

    .pricing-solution h2 {
        margin: 0 0 30px; 
    }

    .pricing-solution form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 20px 0 0;
    }

    .pricing-solution form > div {
        width: calc(33.333% - 30px); 
    }
    
    .pricing-solution form > div:nth-child(5) { 
        width: calc(66.666% - 15px);  
    }
    
    .pricing-solution form > div:nth-child(5) textarea { 
        min-height: 100px; 
    }
    
    .pricing-solution form > div:last-child {
        width: 100%; 
    }

        .pricing-solution form .button-snap {
            padding: 8px 35px;
            position: relative;
        }
        
        .pricing-solution form .button-snap span {
            margin: 0; 
        }

            .pricing-solution form .button-snap .fa {
                position: absolute;
                top: 11px;
                right: 15px;
            }

@media (max-width: 1600px) {
    .pricing-box.es .pricing-plan-info ul li:nth-child(5),
    .pricing-box.es .pricing-left ul li:nth-child(5) {
        min-height: 85px;
    }
}

@media (max-width: 1500px) {
    .pricing-box.es .pricing-plan-info ul li:nth-child(7),
    .pricing-box.es .pricing-plan-info ul li:nth-child(8),
    .pricing-box.es .pricing-left ul li:nth-child(7),
    .pricing-box.es .pricing-left ul li:nth-child(8) { 
        min-height: 95px;
    }    
    .pricing-box.es .pricing-plan-info ul li:nth-child(14),
    .pricing-box.es .pricing-left ul li:nth-child(14) { 
        min-height: 100px; 
    }
}

@media (max-width: 1400px) {
    .pricing-plan-info ul li:first-child {
        font-size: 30px; 
    }
    .pricing-box.es .pricing-plan-info ul li:nth-child(7),
    .pricing-box.es .pricing-left ul li:nth-child(7) {
        min-height: 110px; 
    }

}

    @media (max-width: 1300px) {
        .pricing-plan-info ul li:first-child, 
        .pricing-left ul li:first-child {
            min-height: 180px;
        } 
        .pricing-plan-info ul li:first-child {
            font-size: 24px;
        }
        .pricing-plan-info ul li.plan-cost span {
            font-size: 28px;
            line-height: 1.2;
        }
        .pricing-plan-info .button-snap,
        .pricing-plan-info .button-snap:visited {
            padding: 8px 15px; 
        }
        .pricing-box.es .pricing-plan-info ul li:nth-child(4), 
        .pricing-box.es .pricing-left ul li:nth-child(4) {
            min-height: 110px;
        }
    }

@media (max-width: 1300px) and (min-width: 1200px) {
    .pricing-plan-info ul li:nth-child(2), 
    .pricing-left ul li:nth-child(2) {
        min-height: 110px;  
    }
    .pricing-plan-info ul li:nth-child(5), 
    .pricing-left ul li:nth-child(5) {
        min-height: 85px;
    }
    .pricing-plan-info ul li.plan-cost span {
        display: block;
        width: 100%;
    }
    .pricing-plan-info .button-snap, 
    .pricing-plan-info .button-snap:visited {
        padding: 8px 10px; 
    }
}

@media (min-width: 1200px) {
    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }    

}

@media (max-width: 1199px) {
    .pricing-right {
        display: block;  
    }
    .pricing-plans {
        display: block;
        overflow: hidden;
    }
    
    .pricing-plan-info {
        text-align: center; 
    }    

        .pricing-plan-info ul li {
            justify-content: center; 
        }

            .pricing-plan-info ul li:first-child, 
            .pricing-left ul li:first-child {
                min-height: 110px;
            }

            .pricing-plan-info ul li:last-child,
            .pricing-left ul li:last-child {
                padding-bottom: 50px; 
            }

            #carouselExampleIndicators .carousel-control-next,
            #carouselExampleIndicators .carousel-control-next:hover,
            #carouselExampleIndicators .carousel-control-next:focus,
            #carouselExampleIndicators .carousel-control-prev,
            #carouselExampleIndicators .carousel-control-prev:hover,
            #carouselExampleIndicators .carousel-control-prev:focus {
                top: 0;
                bottom: 100px; 
                margin: auto;
                width: 28px;
                height: 28px;
                position: sticky;
                margin: -32px 0;
                border-radius: 10px;
                opacity: 0.6; 
                background: #000; 
            }

        #carouselExampleIndicators .carousel-control-next {
            left: 100%; 
        }

        #carouselExampleIndicators .carousel-control-next span,
        #carouselExampleIndicators .carousel-control-prev span {
            width: 16px;
            height: 16px;
        }

    .pricing-plan-info.recommended:before {
        right: 0;
        left: 0;
        width: 100px; 
        margin: auto;
    }
}

    @media (max-width: 1024px) {
        .pricing-page #pricingApp h2 {
            font-size: 40px;
            line-height: 1.2;
        }
        .pricing-page #pricingApp h2 span { 
            font-size: 80px;
            line-height: 1.2;
        }
        .right-signup .log-title {
            font-size: 50px;
            line-height: 60px;
        }
    }
    
    @media (max-width: 767px) {
        .right-signup .log-title {
            font-size: 40px; 
            line-height: 50px;
        }
        .pricing-page #pricingApp h2 span {
            font-size: 50px;
            line-height: 1.2;
        }
        .pricing-left {
            width: 220px;
        }
        .pricing-solution {
            padding: 15px;
        }
            .pricing-solution h2 {
                margin: 0 0 30px !important;
            }
            .pricing-solution form > div,
            .pricing-solution form > div:nth-child(5) { 
                width: 100%;
            }

        .pricing-plan-info ul li:first-child, 
        .pricing-left ul li:first-child {
            min-height: 130px;
        }

        .pricing-plan-info ul li:nth-child(5), 
        .pricing-left ul li:nth-child(5) {
            min-height: 65px; 
        }

        .pricing-plan-info ul li:nth-last-child(3),
        .pricing-left ul li:nth-last-child(3),
        .pricing-plan-info ul li:nth-last-child(2),
        .pricing-left ul li:nth-last-child(2),
        .pricing-plan-info ul li:nth-child(9),
        .pricing-left ul li:nth-child(9),
        .pricing-plan-info ul li:nth-child(10),
        .pricing-left ul li:nth-child(10) { 
            min-height: 85px; 
        }

    }
    
    @media (max-width: 600px) {
        .pricing-page #pricingApp h2 {
            font-size: 28px;
            line-height: 1.2;
        }
        .right-signup .log-title {
            font-size: 30px;
            line-height: 40px; 
        }
    }

@media (max-width: 540px) {
    .pricing-left {
        width: 170px;
    }
    .pricing-plan-info ul li:first-child {
        font-size: 28px; 
    }
    .pricing-plan-info ul li:first-child,
    .pricing-left ul li:first-child {
        min-height: 160px;
    }
    .pricing-plan-info ul li:nth-child(2),
    .pricing-left ul li:nth-child(2) {
        font-size: 16px; 
    }
    .pricing-plan-info ul li:nth-child(2),
    .pricing-left ul li:nth-child(2),
    .pricing-plan-info ul li:nth-child(9),
    .pricing-left ul li:nth-child(9) {
        min-height: 85px;
    }    
    .pricing-plan-info ul li:nth-child(7), 
    .pricing-left ul li:nth-child(7) {
        min-height: 80px; 
    }

    .pricing-plan-info ul li:nth-child(6), 
    .pricing-left ul li:nth-child(6),
    .pricing-plan-info ul li:nth-child(8),
    .pricing-left ul li:nth-child(8) {
        min-height: 65px;
    }
    
    .pricing-plan-info ul li:nth-child(10), 
    .pricing-left ul li:nth-child(10),
    .pricing-plan-info ul li:nth-child(12), 
    .pricing-left ul li:nth-child(12) { 
        min-height: 65px;
    }
    .pricing-left ul li.additional-services {
        font-size: 16px; 
    }
}

    @media (max-width: 500px) {
        .pricing-page #pricingApp h2 span { 
            font-size: 36px;
            line-height: 1.2;
        }
    }

@media (max-width: 420px) {
    .pricing-page .pricingSolLink .button-snap,
    .pricing-page .pricingSolLink .button-snap:visited {
        font-size: 12px; 
        padding: 5px 10px; 
    }
    .pricing-left {
        width: 110px;
    }

    .pricing-left ul li {
        padding: 15px 5px; 
    }
    .pricing-plan-info ul li {
        padding: 15px 10px; 
    }
    .pricing-plan-info ul li:first-child {
        font-size: 22px;
    }
    .pricing-plan-info ul li:first-child, 
    .pricing-left ul li:first-child { 
        min-height: 160px;  
    }    

    .pricing-plan-info ul li:nth-child(5), 
    .pricing-left ul li:nth-child(5),
    .pricing-plan-info ul li:nth-child(6), 
    .pricing-left ul li:nth-child(6),
    .pricing-plan-info ul li:nth-child(9), 
    .pricing-left ul li:nth-child(9),
    .pricing-plan-info ul li:nth-child(10), 
    .pricing-left ul li:nth-child(10),
    .pricing-plan-info ul li:nth-child(12), 
    .pricing-left ul li:nth-child(12),    
    .pricing-plan-info ul li:nth-child(15), 
    .pricing-left ul li:nth-child(15) {  
        min-height: 85px;
    }
    
    .pricing-plan-info ul li:nth-child(4), 
    .pricing-left ul li:nth-child(4),
    .pricing-plan-info ul li:nth-child(11), 
    .pricing-left ul li:nth-child(11),
    .pricing-plan-info ul li:nth-child(13), 
    .pricing-left ul li:nth-child(13) { 
        min-height: 70px; 
    }
    
    .pricing-plan-info ul li:nth-child(7), 
    .pricing-left ul li:nth-child(7) { 
        min-height: 110px; 
    }
    
    .pricing-plan-info ul li:nth-child(8), 
    .pricing-left ul li:nth-child(8) { 
        min-height: 75px; 
    }
    
    .pricing-plan-info ul li:nth-child(14), 
    .pricing-left ul li:nth-child(14) {  
        min-height: 115px;  
    }

        .pricing-plan-info ul li:nth-last-child(3),
        .pricing-left ul li:nth-last-child(3) {
            flex-wrap: wrap;
        } 

    .pricing-plan-info ul li .button-snap {
        padding: 5px 10px; 
    }
}

@media (max-width: 350px) {
    .pricing-plan-info ul li:first-child,
    .pricing-left ul li:first-child {
        min-height: 210px; 
    }
    .pricing-plan-info ul li .button-snap {
        font-size: 12px; 
        padding: 5px; 
    }
    .pricing-plan-info ul li.plan-cost span {
        font-size: 26px; 
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~ business registration */

    .br-01 {
        max-width: 550px;
    }

    .business-registration {
        background-attachment: fixed;
    }

        .business-registration main {
            padding: 0 !important;
        }

    .business-registration-container {
        display: flex;
        align-items: center; 
        min-height: 100svh; 
        padding: 0;
    }

        .business-registration-container .container {
            max-width: 100%;
            padding: 0;
            border-radius: 10px;
        }

        .business-registration-container .br-01 .brb {
            padding: 30px 80px 50px;
            background: #fff;
        }

        .business-registration-container .br-02 .brb {
            padding: 50px;
            border-radius: 10px;
            box-shadow: 0 0 3px rgba(0, 0, 0, .075);
            background: #fff;
        }

        .business-registration-container h2 {
            margin: 0 0 30px;
        }

        .business-registration-container .br-02 h2 {
            font-size: calc(1.325rem + .9vw);  
            line-height: 1;  
            margin: 0 0 50px;  
        }

        .business-registration-container .container.br-02 {
            max-width: 100%;
            margin: 0; 
            padding: 30px 5%; 
            box-shadow: none;
            background: #EFF4F5;
        }

    .br-02-logo {
        display: flex;
        justify-content: center;
        margin: 0 0 15px;
    }

        .br-02-logo a > svg {
            max-width: 220px; 
        }

    .mb3 {
        margin-bottom: 2.5rem !important;
    }

.br-02 .bg {
    margin: 0 0 30px !important;
    padding: 10px 20px !important;
    border-radius: 10px; 
    background: #EFF4F5; 
}

.business-registration-container .br-02 .brb > .row > div,
.business-registration-container .br-02 .brb > .row .bg .row > div {
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
}

    .business-registration-container .br-02 .brb > .row .bg .row > .col-12 {
        padding: 15px calc(var(--bs-gutter-x) * .5);
    }

    .business-registration-container .br-01 .brb i {
        opacity: 0.3;
    }

    .business-registration-container .brb #text {
        line-height: 20px;
    }

    .br-02 .bg h4 {
        font-size: 22px;
        line-height: 26px;
    }

    .br-02 .form-check-col-padding {
        padding: 0 15px;
    }

    .ext label:after {
        display: none;
    }

    .ext label span {
        font-size: 12px;
        color: #999;
    }

    .br-03 .thanks-business {
        margin: 0;
    }

    .body-snap .welcome-to-snaproles .container-fluid,
    .body-snap .welcome-to-snaproles .container-fluid > div {
        height: 100%;
    }

    .business-registration-container .br-02 .brb > .row .bg .row > .form-field-normal-padding > .row {
        flex-grow: 1; 
    }

    @media (min-width: 1200px) {
        .business-registration-container .br-02 .brb > .row > div {
            padding: 0 30px;
        }

        .business-registration-container .br-02 .brb > .row .bg .row > .col-12 {
            padding: 15px 25px;
        }

        .business-registration-container .br-02 .brb > .row .bg .row > div {
            padding: 0 25px;
        }

        .business-registration-container .br-02 .brb > .row .bg .row > .form-field-normal-padding {
            padding: 0 calc(var(--bs-gutter-x) * .5);
        }
    }

    @media (max-width: 1199px) {
        .blog-row-one h2 {
            margin: 0 50px 0 0; 
        }
        .container-fluid.pricing {
            margin: 0 0 50px;  
            padding: 0 !important;  
        }

        .business-registration-container .br-02,
        .business-registration-container .br-03 {
            max-width: 90%; 
        }

            .business-registration-container .br-02 .brb {
                padding: 30px 25px; 
            }

        .br-02 .mb3 {
            margin-bottom: 1.5rem !important; 
        }
    }

    @media (max-width: 991px) {
        .pricing .pricing-col.plan-info-title {
            padding: 20px 20px 20px 0; 
        }

        .pricing .pricing-col + .pricing-col {
            padding: 20px; 
        }

        .pricing .pricing-col.plan-info-title ul li,
        .pricing .pricing-col ul li {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            line-height: 20px;
            min-height: 70px;
            padding: 15px 10px;
        }

        .pricing .pricing-col.plan-info-title ul li {
            justify-content: flex-start;
        }
    }

    @media (max-width: 880px) {
        .pricing h2 br {
            display: none;
        }
    }

    @media (max-width: 767px) {
        .business-registration-container .container.br-02 {
            max-width: 95%;
        }
        .blog-row-one .blog-heading {
            justify-content: space-between; 
        }
        .blog-row-one h2 {
            margin: 0;
        }
        .navbar-brand {
            margin: 0 10px 0 0;
        }

        .header-snap-roles .right-icon-navbar > .navbar-toggler,
        .header-snap-roles .right-icon-navbar > .navbar-toggler > .navbar-toggler-icon {
            width: 24px;
        }

        .pricing-container {
            padding: 15px;
        }

        .pricing h2 {
            margin: 15px 0 10px;
        }

        .pricing .pricing-col + .pricing-col {
            flex-basis: 35%;
        }

        .pricing .pricing-col.plan-info-title ul li, 
        .pricing .pricing-col ul li {
            display: flex; 
            align-items: center; 
            justify-content: center; 
            min-height: 70px; 
        }

        .plan-info-title li {
            justify-content: flex-start !important;
        }

        .plan-info .btn {
            padding: 5px 25px !important;
        }

        .pricing .section-2 {
            padding: 30px 15px !important;
        }

        .pricing-details {
            flex-wrap: wrap;
        }

        .pricing-col.plan-info-title {
            display: none;
        }

        .plan-info {
            height: auto;
        }

            .plan-info .plan-price {
                margin: 10px 0;
            }

            .plan-info .btn {
                margin: 10px 0 30px !important;
            }

        .pricing .pricing-col + .pricing-col {
            flex-basis: unset;
            width: 100%;
            margin: 0 0 30px;
            padding: 30px 15px;
            border-radius: 10px;
            border: 0 !important;
            filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.08));
            background: #fff;
        }

        .pricing .pricing-details .pricing-col:nth-child(2) .plan-info .free-for {
            display: none;
        }

        .pricing .pricing-col .plan-info-list li {
            flex-wrap: wrap;
            min-height: auto;
            font-size: 15px;
            line-height: 19px;
            padding: 0;
            border-bottom: 1px solid #eee;
            background: none !important;
        }

            .pricing .pricing-col .plan-info-list li:last-child {
                border-bottom: 0;
            }

            .pricing .pricing-col .plan-info-list li.additional-info {
                background: #004584 !important;
            }

        .plan-info-list li:before {
            width: 70%;
            color: #000;
            text-align: left;
            padding: 12px 10px;
            background: rgba(0, 69, 132, .04);
        }

        .plan-info-list li span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 30%;
            background: #fff;
        }

        .plan-info-list li.additional-info:before {
            width: 100%;
            color: #fff;
            text-align: center;
            padding: 0px 10px;
        }

        .plan-info-list li:first-child:before {
            content: "Subscription Cost";
        }

        .plan-info-list li:nth-child(2):before {
            content: "Search Mile Radius";
        }

        .plan-info-list li:nth-child(3):before {
            content: "Daily SMS Limit";
        }

        .plan-info-list li:nth-child(4):before {
            content: "Total SMS Connections(Resets Monthly)";
        }

        .plan-info-list li:nth-child(5):before {
            content: "Profile Views(Resets Monthly)";
        }

        .plan-info-list li:nth-child(6):before {
            content: "Saved Contact History";
        }

        .plan-info-list li:nth-child(7):before {
            content: "Assign a Location Manager?";
        }

        .plan-info-list li:nth-child(8):before {
            content: "Manage Multiple Locations";
        }

        .plan-info-list li:nth-child(9):before {
            content: "Additional Services";
        }

        .plan-info-list li:nth-child(10):before {
            content: "Additional Location";
        }

        .plan-info-list li:nth-child(10):before {
            content: "Additional Location";
        }

        .plan-info-list li:nth-child(11):before {
            content: "5 More Mile Radius";
        }

        .plan-info-list li:nth-child(12):before {
            content: "The Snaproles Day Pass";
        }

        .plan-info-list li.additional-info span {
            display: none;
        }

        .br-01,
        .br-02 {
            max-width: 90%;
        }

        .business-registration-container .br-02 h2 {
            margin: 0 0 30px;
        }

        .br-02 .bg {
            padding: 10px 15px !important;
        }

        .br-03 {
            min-height: calc(100vh - 200px);
        }

        .business-registration-container {
            padding: 0;
        }
        #personalDetailsTab .grayBox  {
            margin: 0;
        }        
    }

    @media (max-width: 640px) {

        .point-of-contact > label {
            width: 100%;
            line-height: 20px;
            margin: 0 0 10px;
        }

        .point-of-contact .form-check-col-padding {
            padding: 0 15px 0 0;
        }

            .point-of-contact .form-check-col-padding + .form-check-col-padding {
                padding: 0 0 0 15px;
            }
    }

    @media (max-width: 575px) {

        .business-registration-container .container {
            padding: 15px 10px; 
        }

        .business-registration-container .br-01 .brb,
        .business-registration-container .br-02 .brb {
            padding: 30px 25px;
        }
        .business-registration-container .container.br-02 {
            max-width: 100%; 
        }
    }

    .dropdown-multilevel-checkbox {
        width: 100%;
        position: relative;
    }
    
        .dropdown-multilevel-checkbox .selected-options {
            display: flex;
            position: relative;
        }

            .dropdown-multilevel-checkbox .selected-options .form-control {
                text-overflow: ellipsis;
                padding-right: 35px; 
            }

                .dropdown-multilevel-checkbox .selected-options .form-control { 
                    padding-left: 35px; 
                    border: 2px solid #555; 
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-size: 16px 16px;
                    background-position: 8px center; 
                }

                    .dropdown-multilevel-checkbox .selected-options .form-control::placeholder,
                    .dropdown-multilevel-checkbox .selected-options #talentWorkRoles-10::placeholder,
                    .dropdown-multilevel-checkbox .selected-options #industrySelect-10::placeholder { 
                        color: #000 !important;
                        opacity: 1 !important;
                    }
            
                    .dropdown-multilevel-checkbox .selected-options .selected-options-close {
                        font-size: 12px;
                        color: grey;
                        position: absolute;
                        right: 15px;
                        top: 13px;
                    }

            .dropdown-multilevel-checkbox .selected-options .selected-options-arrow {
                color: grey;
                margin: auto;
                position: absolute;
                right: 15px;
                top: 10px;
            }

    .dropdown-menu-custom {
        max-height: 150px;
        overflow-y: auto;
        min-width: 16rem;
        margin-left: 10px !important;
        border-radius: 5px;
        background-color: rgb(231 251 255);
        border: 1px solid #03B2D8;
        overflow-x: hidden;
    }

        .dropdown-menu-custom::-webkit-scrollbar {
            width: 5px;
        }

        /* Add a thumb */
        .dropdown-menu-custom::-webkit-scrollbar-thumb {
            background-color: grey;
        }

.talent-dashboard {
    background-attachment: fixed;
}

.talent-registration-box {
    margin: 120px 0 0; 
    padding: 40px; 
    border-radius: 10px;  
}

@media (max-width: 767px) {
    .talent-registration-box {
        margin: 80px 0 0; 
    }
}

    .talent-registration-box h2 {
        font-size: 2rem;
        line-height: 1.2;
    }

.registrationLangChange {
    display: inline-block;
    font-size: 14px;
    line-height: 18px;
    margin: 0 0 10px;
    padding: 0;
    color: #1473ff; 
}

    .registrationLangChange img {
        width: 24px;
        margin-left: 5px;
        margin-top: -4px;
    }


.regisration-message {
    display: flex;
}

    .regisration-message > div {
        display: flex;
        flex-wrap: wrap;
        width: 33.333%;
        padding: 10px;
        text-align: center;
        align-content: baseline;
        align-items: baseline;
        justify-content: center;
    }

        .regisration-message > div span {
            display: flex;
            width: 100%;
            height: 60px;
            align-items: center;
            justify-content: center;
        }

        .regisration-message > div svg {
            width: 50px;
        }

        .regisration-message > div p {
            font-size: 12px;
            line-height: 14px;
            font-family: "Inter-Medium",sans-serif;
            margin: 5px 0 0;
        }

    .talent-registration-box .col-sm-6 #autoCompleteAddress.form-control::placeholder,
    .talent-registration-box .col-sm-6 #txtPassword.form-control::placeholder,
    .talent-registration-box .col-sm-6 #txtConfirmPassword.form-control::placeholder,
    .talent-registration-box .col-sm-6 .selected-options > .form-control::placeholder {
        color: transparent !important;
    }

    .talent-registration-box label:after,
    .talent-registration-box legend:after {
        display: none;
    }

    .talent-registration-box .form-check-col-padding {
        padding: 0 15px;
    }

    .talent-registration-box input#myCheck,
    .talent-registration-box input#msgPolicyCheck {
        margin: 0 10px 0 0;
    }

    .talent-registration-box #myTab,
    #preferencesTab .talent-registration-box #myTab {
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        border: 0;
        margin: 0;
    }

        .talent-registration-box #myTab li,
        #talentInformation1 #preferencesTab .talent-registration-box #myTab li {
            display: flex;
            width: auto;
            margin: 0 3px 0 0 !important; 
        }

            .talent-registration-box #myTab li button,
            #talentInformation1 #preferencesTab .talent-registration-box #myTab li button {
                width: 100%;
                font-size: 14px;
                line-height: 18px;
                color: #444;
                padding: 7px 0 !important;
                text-align: center !important;
                border: 0;
                border-radius: 5px !important; 
                background: #F9F8F8 !important;
            }

            #talentInformation1 #preferencesTab .talent-registration-box #myTab li button {
                background: #EFF4F5 !important; 
            }

                .talent-registration-box #myTab li button:hover,
                #talentInformation1 #preferencesTab .talent-registration-box #myTab li button:hover,
                .talent-registration-box #myTab li button.active,
                #talentInformation1 #preferencesTab .talent-registration-box #myTab li button.active {
                    color: #fff !important;
                    border: 0;
                    background: #1175fd !important;
                }

    .talent-registration-box #myTabContent,
    #preferencesTab .talent-registration-box #myTabContent {
        min-height: 50px;
        padding: 0;
        border-radius: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

        .talent-registration-box #myTabContent > div,
        #preferencesTab .talent-registration-box #myTabContent > div {
            padding: 15px 0; 
            border-radius: 0;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
        }

            .talent-registration-box #myTabContent > div {
                padding-bottom: 0; 
            }

            .talent-registration-box #myTabContent .weekDaysSelection,
            #preferencesTab .talent-registration-box #myTabContent .weekDaysSelection {
                display: flex;
                flex-wrap: wrap;
            }

            .talent-registration-box #myTabContent .weekDaysSelection .weekDaysOptions,
            #preferencesTab .talent-registration-box #myTabContent .weekDaysSelection .weekDaysOptions {
                width: auto;
                margin: 0 15px 0 0;
            }

                .talent-registration-box #myTabContent .weekDaysSelection .weekDaysOptions label,
                #preferencesTab .talent-registration-box #myTabContent .weekDaysSelection .weekDaysOptions label {
                    font-size: 14px;
                    line-height: 18px;
                }

                .talent-registration-box #myTabContent .weekDaysSelection .weekDaysPartTime {
                    width: 100%;
                    border-radius: 10px;
                    background: #EFF4F5;
                }
            
            #preferencesTab .talent-registration-box #myTabContent .weekDaysSelection .weekDaysPartTime {
                width: 100%;
            }

                #preferencesTab .talent-registration-box #myTabContent .weekDaysSelection .weekDaysPartTime .tr-part-time .col-5 {
                    width: calc(50% - 15px); 
                }

                .talent-registration-box #myTabContent .weekDaysSelection .weekDaysPartTime .tr-part-time,
                #preferencesTab .talent-registration-box #myTabContent .weekDaysSelection .weekDaysPartTime .tr-part-time {
                    display: flex;
                    justify-content: space-between;
                    margin: 10px 0 0;
                }

            .talent-registration-box #myTabContent .weekDaysSelection .weekDaysPartTime .tr-part-time {
                padding: 5px 10px; 

            }

            @media (max-width: 767px) {
                .talent-registration-box #myTabContent .weekDaysSelection .weekDaysPartTime .tr-part-time {
                    padding: 5px 0;
                }
            }

            .verify-phone-field {
                position: relative;
            }

.phone-number-check-registration {
    display: flex;
    font-size: 12px;
    color: #f9af5e;
}

.verfiy-phone-registration {
    position: absolute; 
    top: 0;
    right: 0;
    width: 205px;
    font-size: 12px; 
    color: #fff;
    cursor: pointer;
    text-align: center;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0;
    padding: 11px 5px; 
    z-index: 2;
}

.form-control.rounded-pill.verfiy-phone-registration,
.form-control.rounded-pill.verfied-phone-registration {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

    .verfied-phone-registration {
        position: absolute;
        top: 0;
        right: 0;
        width: 205px; 
        font-size: 12px;
        color: #fff;
        text-align: center;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-left: 0;
        padding: 11px 5px;
        z-index: 3;
        background: #1b9329;
    }

.phoneVerifyCode {
    position: absolute;
    top: -28px;
    right: 204px;
    width: 60px;
    display: flex;
    flex-wrap: wrap;
}

    .phoneVerifyCode .form-label {
        width: 100%;
        font-size: 12px;
        text-align: center;
    }

.otp-field-regisration,
.otp-field-regisration:focus {
    width: 100%;
    padding: 11px 5px;
    border: 0;
    border-top: 1px solid #008000 !important;
    border-bottom: 1px solid #008000 !important;
    border-left: 1px solid #ced4da !important;
    border-radius: 0 !important;
}

.form-control.rounded-pill.otp-field-regisration {
    border-radius: 0 !important;
}

    .otp-field-regisration::placeholder {
        font-size: 20px !important;
    }

/*~~~~~~~~~~~~~~~~~~~~  Welcome Message Modal  */

.welcome-message-modal .modal-container {
    width: 800px;
    height: 600px;
    max-width: calc(100% - 30px);
    background: url(../images/welcome-message-bg.png?v=AzoVRjvqEjYNflGGNK5xe9Zimok) no-repeat 0 0/100%;
}

.welcome-message-modal .modal-content {
    height: calc(100% + 20px);
    border: 0;
    background: none;
}

.welcome-message-modal .welcome-message-header img {
    width: 140px;
}

.welcome-message-modal .welcome-message-content {
    display: flex;
    height: 100%;
    padding: 70px 0 0;
}

.welcome-message-modal .welcome-message-content-left {
    width: 45%;
    min-height: 400px;
    background: url(../images/welcome-message-talent-img.png?v=3FPDbMPnue7PicVETiISvjCa42c) no-repeat right 0/cover;
}

.welcome-message-modal .welcome-message-content-right {
    width: 55%;
    padding: 50px 50px 0 40px;
}

    .welcome-message-modal .welcome-message-content-right h1 {
        font-size: 60px;
        line-height: 66px;
    }

        .welcome-message-modal .welcome-message-content-right h1 span {
            display: block;
            color: #00BFF3;
            font-family: 'Archivo-Bold', sans-serif;
            text-transform: uppercase;
        }

    .welcome-message-modal .welcome-message-content-right h6 {
        font-size: 24px;
        line-height: 28px;
        font-family: 'Archivo-Medium', sans-serif;
    }

    .welcome-message-modal .welcome-message-content-right p {
        font-size: 16px;
        line-height: 24px;
        color: #676767;
    }

        .welcome-message-modal .welcome-message-content-right p span {
            font-family: 'Archivo-Bold', sans-serif;
            color: #222;
        }

/*~~~~~~~~~~~~~~~~~  talent dashboard progress bar  */

.talent-dashboard-progress-bar {
    margin: -380px 0 50px;
    padding: 0 150px;
    position: relative;
}

    .talent-dashboard-progress-bar h3 {
        font-size: 18px;
        line-height: 22px;
        font-family: 'Archivo-Medium', sans-serif;
    }

        .talent-dashboard-progress-bar h3 span {
            padding: 0 0 0 20px;
        }

    .talent-dashboard-progress-bar p {
        font-size: 14px; 
        line-height: 18px; 
        color: #777;
        margin: 0;
        padding: 0 30px 0 0;
    }

    .talent-dashboard-progress-bar .talent-dashboard-progress-bar-box {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: relative;
    }

        .talent-dashboard-progress-bar .talent-dashboard-progress-bar-box sup {
            position: absolute;
            right: 0;
            top: -14px; 
            font-size: 12px;
            line-height: 16px;
            color: #00bff3;
            text-decoration: none;
        }

            .talent-dashboard-progress-bar .talent-dashboard-progress-bar-box sup a {
                font-size: 16px; 
                text-decoration: none;
            }

    .talent-dashboard-progress-bar .talent-dashboard-progress-bar-tab {
        width: calc(100% - 100px);
        height: 4px;
        position: relative;
        border-radius: 4px;
        background: #ccc;
    }

        .talent-dashboard-progress-bar .talent-dashboard-progress-bar-tab > div {
            position: absolute;
            top: 0;
            left: 0;
            min-width: 5%;
            height: 100%;
            border-radius: 4px;
            background: #0e9700;
        }

    .talent-dashboard-progress-bar .talent-dashboard-progress-bar-percentage {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px !important;
        height: 50px;
        font-size: 14px;
        line-height: 18px;
        color: #fff;
        border-radius: 100%;
        background: #0e9700;
    }

#preferencesTab .talent-registration-box {
    padding: 0;
}

.talentDetails #personalDetailsTab .btn-1 {
    margin: auto !important;
}

#preferencesTab .talent-dashboard-roles .input-group {
    margin-bottom: 0 !important;
}

#preferencesTab .talent-dashboard-roles .business-role-select-main {
    margin-bottom: 1.5rem !important;
    padding-top: 0 !important;
}

    #preferencesTab .talent-dashboard-roles .business-role-select-main > div {
        margin-top: 10px;
    }

.grayBox {
    margin: 0 0 30px;
    padding: 30px 20px 0;
    background: #f9f9f9;
}

/*~~~~~~~~~~~~~~~~~~~~  media queries  */

@media (min-width: 1351px) and (max-width: 1600px) {
    .talent-dashboard-progress-bar {
        padding: 0 120px;
    }
}

@media (min-width: 1250px) and (max-width: 1350px) {
    .talent-dashboard-progress-bar {
        padding: 0 100px;
    }
}

@media (max-width: 1199px) {
    .talent-reg-people {
        background: none;
    }
}

@media (max-width: 992px) {

    .welcome-message-modal .modal-container {
        width: 600px;
        height: 450px;
        padding: 20px;
    }

    .welcome-message-modal .welcome-message-content {
        padding: 30px 0 0;
    }

    .welcome-message-modal .welcome-message-content-left {
        min-height: 200px;
    }

    .welcome-message-modal .welcome-message-content-right {
        padding: 30px 30px 0 30px;
    }

        .welcome-message-modal .welcome-message-content-right h1 {
            font-size: 44px;
            line-height: 50px;
        }

        .welcome-message-modal .welcome-message-content-right h6 {
            font-size: 16px;
            line-height: 20px;
        }

        .welcome-message-modal .welcome-message-content-right p {
            font-size: 14px;
            line-height: 22px;
        }
}

@media (min-width: 767px) and (max-width: 1249px) {
    .talent-dashboard-progress-bar {
        padding: 0 50px;
    }
}

@media (max-width: 767px) {

    #talentInformation1 .talent-form {
        padding: 30px 15px !important;
    }

    .talent-reg-form {
        padding: 0;
    }

    .talent-registration-box {
        padding: 30px 15px;
    }

    .registrationLangChange {
        justify-content: center;
    }

    .talent-dashboard-progress-bar {
        margin: -200px 0 0;
    }

    .grayBox {
        padding: calc(var(--bs-gutter-x) * .5);
        background: none;
    }

    .talent-dashboard-progress-bar {
        padding: 0 15px;
    }
}

@media (max-width: 640px) {

    .welcome-msg-body .container-fluid,
    .welcome-msg-body .container-fluid main,
    .welcome-msg-body .container-fluid main .talent-reg-form {
        height: 100%;
    }

    .welcome-message-modal .modal-container {
        width: 300px;
        height: auto;
        background-position: right center;
        background-size: cover;
    }

    .welcome-message-modal .modal-content {
        height: auto;
        padding: 0;
    }

    .welcome-message-modal .welcome-message-header img {
        width: 120px;
    }

    .welcome-message-modal .welcome-message-content {
        flex-wrap: wrap;
        padding: 20px 0 0;
    }

    .welcome-message-modal .welcome-message-content-left {
        display: none;
    }

    .welcome-message-modal .welcome-message-content-right {
        width: 100%;
        padding: 20px 10px;
    }

        .welcome-message-modal .welcome-message-content-right h1 {
            font-size: 40px;
            line-height: 46px;
        }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~  talent dashboard  */

.talent-dashboard-container .container {
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
    background: #EFF4F5;
}

.talent-dashboard .talent-dashboard-progress-bar {
    margin: 0 0 50px;
    padding: 0 30px;
}

.talent-dashboard #talentInformation1.bottom-base {
    margin: 0;
    padding: 0 !important;
}

.talent-dashboard .talent-dashboard-left {
    padding: 30px 0;
    background: #fff;
}

    .talent-dashboard .talent-dashboard-left .talent-dashboard-left-top {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 20px 0 50px;
        padding: 0 30px;
    }

            .talent-dashboard .talent-dashboard-left .talent-dashboard-left-top figure img {
                max-width: 100%;
                border-radius: 100%;
            }

        .talent-dashboard .talent-dashboard-left .talent-dashboard-left-top h5,
        .talent-dashboard .talent-dashboard-left .talent-dashboard-left-top span {
            width: 100%;
            font-family: 'Archivo-Medium', sans-serif;
            text-align: center;
        }

        .talent-dashboard .talent-dashboard-left .talent-dashboard-left-top h5 {
            color: #1473ff;
        }

        .talent-dashboard .talent-dashboard-left .talent-dashboard-left-top span {
            color: #777;
        }

    .talent-dashboard .talent-dashboard-left #myTab {
        width: 100%;
        margin: 0;
        border: 0;
    }

        .talent-dashboard .talent-dashboard-left #myTab li {
            width: 100%;
            margin: 0 0 20px;
            border: 0;
        }

            .talent-dashboard .talent-dashboard-left #myTab li button {
                width: calc(100% - 30px);
                min-height: 52px;   
                font-size: 16px;
                line-height: 20px;
                font-family: 'Inter-Medium', sans-serif;
                color: #000;
                border: 0;
                border-radius: 0;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                padding: 10px 15px 10px 30px;
                text-align: left;
                background: #EFF4F5 !important; 
            }

                .talent-dashboard .talent-dashboard-left #myTab li button.active,
                .talent-dashboard .talent-dashboard-left #myTab li button.active span,
                .talent-dashboard .talent-dashboard-left #myTab li button.active svg {
                    color: #fff !important;
                }

                .talent-dashboard .talent-dashboard-left #myTab li button i {
                    margin-right: 10px;
                }

#talentInformation1 .tab-content {
    padding: 30px;
}

.talentDetails .tab-pane h4 {
    font-size: 24px;
    line-height: 28px;
    font-family: 'Archivo-Medium', sans-serif;
    margin: 0 0 50px;
}

.talent-dashboard .border-footer {
    margin: 0 !important;
}

@media (min-width: 1600px) {
    .talent-dashboard-container .container {
        max-width: 80%;
    }
}

@media (max-width: 1199px) {    

    .talent-dashboard-container .container {
        padding: 20px;
    }

    .talent-dashboard .talent-dashboard-left .talent-dashboard-left-top,
    .talent-dashboard .talent-dashboard-progress-bar {
        padding: 0 20px;
    }

    .talent-dashboard-progress-bar .talent-dashboard-progress-bar-tab {
        width: calc(100% - 70px);
    }

    .talent-dashboard .talent-dashboard-left #myTab li {
        margin: 0 0 10px;
    }

        .talent-dashboard .talent-dashboard-left #myTab li button {
            width: calc(100% - 15px);
            font-size: 16px;
            line-height: 20px;
            padding: 10px;
        }

            .talent-dashboard .talent-dashboard-left #myTab li button i {
                margin-right: 0px;
            }
}

@media (max-width: 991px) {
    .talent-dashboard-container .container {
        width: calc(100% - 30px);
        max-width: 100%; 
    }
}

@media (max-width: 767px) {    

    .talent-dashboard .talent-dashboard-left .talent-dashboard-left-top,
    .talent-dashboard .talent-dashboard-progress-bar {
        margin: 0 0 30px;
    }

    .talent-dashboard .talent-dashboard-left .talent-dashboard-left-top,
    .talent-dashboard .talent-dashboard-progress-bar {
        padding: 0 20px;
    }

    .talent-dashboard .talent-dashboard-left #myTab {
        display: flex;
        flex-wrap: nowrap;
    }

        .talent-dashboard .talent-dashboard-left #myTab li {
            border-left: 2px solid #fff;
        }

            .talent-dashboard .talent-dashboard-left #myTab li:first-child {
                border-left: 0;
            }

            .talent-dashboard .talent-dashboard-left #myTab li button {
                width: 100%;
                font-size: 16px;
                text-align: center;
                border-radius: 0 !important;
            }

                .talent-dashboard .talent-dashboard-left #myTab li button span {
                    display: none;
                }

    .talent-dashboard-container #talentInformation1 {
        padding: 15px;
    }

    #talentInformation1 .talent-form {
        padding: 0 !important;
    }
    .talent-dashboard-container {
        padding: 20px 0 50px;
    }
}

@media (max-width: 640px) {
    
    .talent-registration-box #myTab li button, #talentInformation1 #preferencesTab .talent-registration-box #myTab li button {
        font-size: 14px; 
        line-height: 18px; 
    }
}

@media (max-width: 350px) {
    .talent-registration-box #myTab li button, #talentInformation1 #preferencesTab .talent-registration-box #myTab li button {
        font-size: 12px;
        line-height: 16px; 
    }
}

.business-role-select-main > div {
    flex-grow: 1; 
    width: auto;
    max-width: 33.333%; 
    padding: 0 5px;
}

@media (max-width: 1300px) {
    .business-role-select-main > div {         
        max-width: 50%; 
    } 
}

.business-role-select-main > div .business-role { 
    display: flex;
    justify-content: space-between;  
    color: #1175fd; 
    padding-right: 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 10px !important; 
    border-color: #1175fd !important; 
}

        .business-role-select-main > div .business-role .business-role-text {
            font-size: 13px;
            line-height: 17px;
            font-family: "Inter-Medium", sans-serif !important; 
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .business-role-select-main > div .business-role .cross-2 {
            width: 12px;
            height: 12px;
            position: relative;
            margin: 2px 0 0 10px !important;
        }

            .business-role-select-main > div .business-role .cross-2 i {
                position: absolute; 
                top: 0; 
                left: 0; 
                font-size: 12px; 
                cursor: pointer; 
            }

@media (max-width: 767px) {
    .bottom-base-in .business-role-select-main > div, .bottom-base-in .business-role-select-main > div .business-role + div {
        width: auto;
    }
}

.font-sm-info {
    font-size: 11px;
    line-height: 1.2; 
    color: #777;
}

@media (max-width: 11199px) {
    .talent-registration-box h2 {
        font-size: 24px; 
    }
}

.talent-registration-box-form > .col-sm-6 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.talent-registration-box-form > .col-sm-6 > div,
.talent-registration-box-form > .col-sm-6 > label {
    width: 100%;
}

.body-snap section.blue-top-section img {
    width: 100%;
    height: auto; 
    transition: all 0.3s linear 0s; 
}

.body-snap .blue-top-section a:hover img {
    transform: scale(1.02); 
}

.talent-registration-box-form p { 
    font-size: 16px; 
    line-height: 22px; 
    color: #222;
}

.body-privacy {
    background: none;
}

.body-privacy main {
    padding: 0 !important; 
}

.link-back,
.link-back:hover,
.link-back:focus {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 14px;
    line-height: 18px;
    color: #222;
    text-decoration: none;
}

.link-back svg {
    position: relative; 
    right: 3px;  
    transition: all 0.3s linear 0s;  
}    

    @media (min-width: 1200px) {
        .link-back svg { 
            right: 0;
            transition: all 0.3s linear 0s;
        }  

        .link-back:hover svg { 
            right: 3px; 
        }
    }

.login-remember {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    max-width: 400px; 
    margin: 0 auto 20px; 
}

.rememberMeDiv {
    display: flex; 
    align-items: center; 
    margin: 0 15px 15px 0; 
}

.rememberMeDiv input {
    height: auto; 
    margin: 0 5px 0 0; 
}

.rememberMeDiv span {
    font-size: 14px; 
    line-height: 18px; 
}

.login-remember .forget-pass {
    font-size: 14px;
    line-height: 18px;
    color: #222;
    text-decoration: none;
}

.body-forgot-password .left-signup h3,
.body-forgot-password .right-signup > p { 
    font-family: "Archivo-Medium", sans-serif;
}

.body-forgot-password .left-signup p {
    font-family: "Archivo-Bold", sans-serif; 
}

.forgot-pswd-step-02 .col-12 {
    width: 100% !important; 
}

.forgot-pswd-step-02 h1 {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: normal;
}

.forgot-pswd-step-02 h1 p {
    color: #fff !important;
}

.forgot-pswd-step-02 .col-12 .col-md-4 {
    display: flex;  
    flex-wrap: wrap; 
    justify-content: center;  
    width: 100%;  
    margin: 0 0 30px;  
}

.forgot-pswd-step-02 .two_buttons {
    display: flex; 
    justify-content: space-between; 
}

    .forgot-pswd-step-02 .two_buttons button:first-child {
        font-size: 14px !important;
        font-family: "Archivo-Medium", sans-serif;
    }

    .forgot-pswd-step-02 .two_buttons button:nth-child(2) {
        padding: 10px 20px !important;
        display: inline-flex;
        font-family: "Inter-Regular", sans-serif;
        border: 1px solid transparent;
        transition: all 0.3s linear 0s;
        font-size: 14px !important;
        line-height: 18px !important;
        background-color: #1573ff;
    }

.forgot-pswd-step-03 .right-signup > div {
    width: 100%; 
}

.forgot-pswd-step-03 .right-signup .col-sm-8 {
    width: 100%;
}

.forgot-pswd-step-03 .pswd-box {
    width: 100%;  
    max-width: 500px; 
    margin: 0 auto;  
    padding: 0 70px;  
}

.forgot-pswd-step-03 .pswd-box > div:first-child p {
    font-size: 1.5rem !important; 
    line-height: 1; 
    font-family: "Archivo-Medium", sans-serif;
}

.forgot-pswd-step-03 .pswd-box div label {
    display: none; 
}

@media (max-width: 480px) {
    .forgot-pswd-step-03 .pswd-box {
        max-width: 400px; 
        padding: 0 25px;
    }
}

@media (max-width: 420px) {
    .login-remember {
        justify-content: center; 
    }
    .rememberMeDiv {
        width: 100%;
        justify-content: center; 
    }
}

.loginContainer.forgot-pswd-step-04 {
    height: 100svh;
    padding: 0; 
}

    .loginContainer.forgot-pswd-step-04 .container-fluid {
        height: 100%; 
    }

    .loginContainer.forgot-pswd-step-04 .thank-you-box {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
    }

.thanks-business {
    width: 800px;
    max-width: calc(100% - 30px); 
    border: 1px solid #eee;
    border-radius: 10px;
    margin: 0 auto;
    padding: 30px;
    background: #fafafa;
}

.business-registration-container .thanks-business > div {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.loginContainer.forgot-pswd-step-04 .thank-you-box .tick-green img,
.business-registration-container .thanks-business .tick-green img {
    width: 100px;
}

        .loginContainer.forgot-pswd-step-04 .thank-you-box .green-thank,
        .business-registration-container .thanks-business .green-thank {
            width: 100%;
        }

            .loginContainer.forgot-pswd-step-04 .thank-you-box .green-thank h2,
            .business-registration-container .thanks-business .green-thank h2 {
                font-size: 2.5rem; 
                line-height: 1;
                color: #029602;
                text-align: center;
                margin: 30px 0;
            }

.loginContainer.forgot-pswd-step-04 .thank-you-box .green-para p,
.business-registration-container .thanks-business .green-para p {
    color: #000;
    font-size: 22px; 
    line-height: 32px; 
    font-family: "Inter-Regular", sans-serif;
    text-align: center;
}


    .loginContainer.forgot-pswd-step-04 .thank-you-box .green-para p span,
    .business-registration-container .thanks-business .green-para p span {
        font-family: 'Archivo-Semibold', sans-serif;
    }

    .business-registration-container .thanks-business .green-para p {
        margin: 0; 
    }

@media (max-width: 767px) {
    .thanks-business {
        padding: 15px 10px;  
    }
    .thanks-business .tick-green svg {
        width: 60px;
        height: 60px; 
    }
    .loginContainer.forgot-pswd-step-04 .thank-you-box .tick-green img, .business-registration-container .thanks-business .tick-green img {
        width: 80px;
    }
    .loginContainer.forgot-pswd-step-04 .thank-you-box .green-thank h2,
    .business-registration-container .thanks-business .green-thank h2 { 
        font-size: 2rem;
    }
    .loginContainer.forgot-pswd-step-04 .thank-you-box .green-para p,
    .business-registration-container .thanks-business .green-para p {
        font-size: 18px;
        line-height: 22px;
    }
}

/*~~~~~~~~~~~~~~~~~~~~  dropdown multiselect pop-up  */

.dropdown-multilevel-checkbox div[aria-labelledby="editionModalLabel"],
#deleteModal,
#deleteAccountModalOne,
#deleteAccountModal,
#additionalLocationModal,
#TemplateModal,
#messageOff { 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.7);
}

    .dropdown-multilevel-checkbox div[aria-labelledby="editionModalLabel"] .modal-dialog,
    #deleteModal .modal-dialog,
    #additionalLocationModal .modal-dialog, 
    #TemplateModal .modal-dialog,
    .employee-dashboard #candidateModal .modal-dialog,
    #msgModal .modal-dialog,
    #messageOff .modal-dialog {
        position: absolute;
        top: 10px;
        right: 0;
        left: 0;
        margin: auto;
        max-width: 90%;
        width: 600px;
    }

.employee-dashboard #candidateModal .modal-dialog,
#messageOff .modal-dialog {
    width: 680px;
    max-width: calc(100% - 30px);
} 

#leadsSummaryTab .employee-dashboard-leads #candidateModal .modal-dialog {
    width: 1200px; 
}

.dropdown-multilevel-checkbox div[aria-labelledby="editionModalLabel"] .modal-dialog .modal-content,
#deleteModal .modal-dialog .modal-content,
#additionalLocationModal .modal-content,
#TemplateModal .modal-content,
.employee-dashboard #candidateModal .modal-dialog .modal-content,
#msgModal .modal-dialog .modal-content,
#messageOff .modal-dialog .modal-content {
    border-radius: 10px;
}

.roleSelectBox .dropdown-multilevel-checkbox div[aria-labelledby="editionModalLabel"] .modal-dialog .modal-content {
    background: #fff; 
}

    .dropdown-multilevel-checkbox div[aria-labelledby="editionModalLabel"] .modal-dialog .modal-header,
    #deleteModal .modal-dialog .modal-header,
    #deleteAccountModal .modal-dialog .modal-header,
    #deleteAccountModalOne .modal-dialog .modal-header,
    #TemplateModal .modal-dialog .modal-header,
    #additionalLocationModal .modal-dialog .modal-header,
    .employee-dashboard #candidateModal .modal-dialog .modal-header,
    #msgModal .modal-dialog .modal-header,
    #messageOff .modal-dialog .modal-header,
    #TemplateModal .modal-dialog .modal-header {
        justify-content: center;
        padding: 15px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background: #0a3e8b;
        border: 0;
    }

    .dropdown-multilevel-checkbox div[aria-labelledby="editionModalLabel"] .modal-dialog .modal-header button,
    #deleteModal .modal-dialog .modal-header button,
    #deleteAccountModal .modal-dialog .modal-header button,
    #deleteAccountModalOne .modal-dialog .modal-header button,
    #additionalLocationModal .modal-dialog .modal-header button,
    #TemplateModal .modal-dialog .modal-header button,
    .employee-dashboard #candidateModal .modal-dialog .modal-header button,
    #msgModal .modal-dialog .modal-header button,
    #messageOff .modal-dialog .modal-header button,
    #TemplateModal .modal-dialog .modal-header button {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 30px;
        height: 30px;
        border: 0;
        margin: 0;
        padding: 0;
        background: none;
    }

        .dropdown-multilevel-checkbox div[aria-labelledby="editionModalLabel"] .modal-dialog .modal-header button i,
        #deleteModal .modal-dialog .modal-header button i,
        #deleteAccountModal .modal-dialog .modal-header button i,
        #deleteAccountModalOne .modal-dialog .modal-header button i,
        #additionalLocationModal .modal-dialog .modal-header button i,
        #TemplateModal .modal-dialog .modal-header button i,
        .employee-dashboard #candidateModal .modal-dialog .modal-header button i,
        #msgModal .modal-dialog .modal-header i,
        #messageOff .modal-dialog .modal-header i,
        #TemplateModal .modal-dialog .modal-header button i {
            font-size: 30px;
            line-height: 24px;
            color: #aaa;
        }

    .dropdown-multilevel-checkbox div[aria-labelledby="editionModalLabel"] .modal-dialog .modal-header img,
    #deleteModal .modal-dialog .modal-header img,
    #deleteAccountModal .modal-dialog .modal-header img,
    #deleteAccountModalOne .modal-dialog .modal-header img,
    #deleteModal .modal-dialog .modal-header svg,
    #TemplateModal .modal-dialog .modal-header svg,
    #additionalLocationModal .modal-dialog .modal-header svg,
    .employee-dashboard #candidateModal .modal-dialog .modal-header svg,
    #msgModal .modal-dialog .modal-header svg,
    #messageOff .modal-dialog .modal-header svg,
    #TemplateModal .modal-dialog .modal-header svg {
        max-width: 150px;
    }

.dropdown-multilevel-checkbox .modal-title {
    display: flex; 
    align-items: center; 
    width: calc(100% - 20px); 
    margin: 15px auto 0; 
}

    .dropdown-multilevel-checkbox .modal-title span:first-child {
        font-size: 14px;
        max-width: calc(100% - 40px);
        color: #777;
        margin: 0 10px 0 0;
    }

    .dropdown-multilevel-checkbox .modal-title span i {
        font-family: "Inter-Medium";
        font-style: normal;
        color: #ff7f11;
    }

    .dropdown-multilevel-checkbox .modal-title span + span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        font-size: 14px;
        color: #fff;
        border-radius: 100%;
        background: #ff7f11;
    }

.dropdown-multilevel-checkbox .selected-options {
    width: calc(100% - 20px); 
    margin: 5px auto 15px; 
}

.dropdown-multilevel-checkbox div[aria-labelledby="editionModalLabel"] .modal-dialog .modal-body {
    max-height: calc(100svh - 45svh);  
    overflow-y: auto;
    margin: 0;
    padding: 0 10px;
}

        .dropdown-multilevel-checkbox div[aria-labelledby="editionModalLabel"] .modal-dialog .modal-body .form-check:hover {
             background: #f1f1f1; 
        }  
        
        .dropdown-multilevel-checkbox div[aria-labelledby="editionModalLabel"] .modal-dialog .modal-body .form-check label {
            display: inline-block; 
        }    

.dropdown-multilevel-checkbox div[aria-labelledby="editionModalLabel"] .modal-dialog .modal-footer {
    padding: 10px;
    border: 0;
}

        .dropdown-multilevel-checkbox div[aria-labelledby="editionModalLabel"] .modal-dialog .modal-footer button {
            font-size: 12px;
            line-height: 16px;
            margin: 0;
            padding: 3px 10px;
            border: 0;
            background: #1473ff;
        }      
        
        @media (max-width: 767px) {
            .dropdown-multilevel-checkbox div[aria-labelledby="editionModalLabel"] .modal-dialog {
                width: 400px; 
            }
            .dropdown-multilevel-checkbox .selected-options {
                margin: 15px auto 5px !important; 
            }
            .dropdown-multilevel-checkbox div[aria-labelledby="editionModalLabel"] .modal-dialog .modal-body {
                padding: 10px 10px 0; 
            }
            .dropdown-multilevel-checkbox .selected-options .form-control {
                margin: 0 0 10px !important; 
            }
        }

/*~~~~~~~~~~~~~~~~~~~~~~~~~  privacy policy  */

.body-privacy {
    background: #F1F1F1; 
}

    .body-privacy h1 {
        font-size: 36px;
        line-height: 42px;
        font-family: 'Archivo-Regular', sans-serif;
        font-weight: normal;
    }

    .body-privacy .container-fluid .container-fluid {
        max-width: calc(100% - 50px);
        padding: 0 calc(var(--bs-gutter-x) * .5) !important; 
    }

.privacy-left {
    width: 370px; 
    padding-right: 0;
    border-top-left-radius: 20px; 
    border-bottom-left-radius: 20px; 
    background: #fff; 
}

    .privacy-left ul {
        list-style-type: none;
        padding: 25px 0 30px; 
    }
    
    .privacy-left ul li {
        margin: 0;  
    }
    
    .privacy-left ul li a {
        cursor: pointer;
    }

    .privacy-left ul li a,
    .privacy-left ul li a span { 
        display: block;
        color: #777;  
        font-weight: normal; 
        text-decoration: none; 
    }

        .privacy-left ul li a span {
            margin: 0 0 2px;
            padding: 15px 20px;
            border-left: 4px solid transparent;
        }

        .privacy-left ul li a span:hover,
        .privacy-left ul li a span.active-link {
            color: #004584 !important;
            border-left: 4px solid #004584;
            border-radius: 0;
            position: relative;
            background: #EFF4F5;
        }

    .privacy-right {
        width: calc(100% - 370px); 
        padding-left: 0;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        background: #fff;
    }

        .privacy-right #privacyContent {
            margin: 25px 0;
            padding: 25px;
            border-top-right-radius: 10px;
            background: #EFF4F5;
        }

        .privacy-right .WordSection1 {
            max-width: 100%; 
        }

        @media (max-width: 1199px) {
            .privacy-left {
                width: 250px;
            }
            .privacy-right {
                width: calc(100% - 250px);
            }
        }
        
        @media (max-width: 767px) {
            .body-privacy .container-fluid {
                padding: 0 !important;
            }
                .body-privacy .container-fluid .container-fluid {
                    max-width: calc(100% - 5px); 
                }
           .privacy-left {
                width: 100%;
                border-radius: 20px;
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
                padding-right: calc(var(--bs-gutter-x) * .5);
            }
            .privacy-left ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding: 25px 0 0; 
            }
                .privacy-left ul li {
                    width: calc(50% - 2px);
                }
            .privacy-right {
                width: 100%;
                border-radius: 20px;
                border-top-right-radius: 0;
                border-top-left-radius: 0;
                padding-left: calc(var(--bs-gutter-x) * .5);
            }
                .privacy-right #privacyContent {
                    border-radius: 0;
                }
            .privacy-left ul li a span {
                font-size: 14px;  
                line-height: 18px; 
                padding: 10px; 
            }
            .privacy-right #privacyContent {
                padding: 25px 0;
            }
        }

/*~~~~~~~~~~~~~~~~~~~~  Why Snaproles  */ 

.why-snap-new-sec {
    background-color: #000;
    padding: 0px 60px;
    color: #fff;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    overflow-y: hidden;
}

.button-snap.white-button {
    background-color: #fff;
    color: #000;
}

.why-snap-new-sec p {
    color: #ffffff;
}

.why-snap-new-sec .col-4 {
    padding-top: 100px;
    padding-bottom: 100px;
    margin-right: 20px;
    width: 31%;
    position: relative;
}

    .why-snap-new-sec .col-4 picture {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
        z-index: 1; 
    }

    .why-snap-new-sec .col-4 img  {
        width: 100%;
        height: 100%; 
        object-fit: cover; 
    }

    .why-snap-new-sec .col-4 picture + *,
    .why-snap-new-sec .col-4 picture + * + * { 
        position: relative;
        z-index: 2; 
    }

    .why-snap-new-sec .row {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

.no-resumme-need {
    padding: 60px 30px 0px 30px;
    max-width: 300px;
}

    .no-resumme-need h3 {
        font-size: 34px;
        line-height: 44px;
    }

    .no-resumme-need p {
        padding: 30px 0px;
    }

.why-snap-new-sec .col-4:last-child {
    margin-right: 0px;
    display: flex;
    align-items: flex-end;
}

.why-snap-new-sec .col-4:nth-child(2) {
    display: flex;
    align-items: flex-end;
}

.why-snap-new-sec .button-snap.white-button {
    transition: all 0.3s linear 0s; 
}

.why-snap-new-sec .button-snap.white-button:hover {
    color: #fff;
    border: 1px solid #fff;
    background: transparent; 
}

@media screen and (max-width: 980px) {
    .no-resumme-need h3 {
        font-size: 28px;
        line-height: 38px;
    }

    .no-resumme-need {
        padding: 40px 10px 0px 10px;
    }

    .why-snap-new-sec .col-4 {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .no-resumme-need p {
        padding: 20px 0px;
    }
}

@media screen and (max-width: 768px) {
    .body-snap .why-snap-new-sec h2 {
        margin: 0 0 50px;
    }
    .no-resumme-need h3 {
        font-size: 22px;
        line-height: 32px;
    }

    .no-resumme-need {
        padding: 0px 20px 0px 20px;
        max-width: 100%;
    }

    .why-snap-new-sec .col-4 {
        padding-top: 60px;
        padding-bottom: 60px;
        width: 100%;
        margin-right: 0px;
        margin-bottom: 20px;
    }

    .why-snap-new-sec .row {
        flex-wrap: wrap;
        flex-direction: column;
    }

    .no-resumme-need p {
        padding: 10px 0px;
    }

    .why-snap-new-sec {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

        .why-snap-new-sec .col-4:last-child {
            margin-bottom: 0px;
        }
}

@media screen and (max-width: 640px) {
    .body-snap .why-snap-new-sec h2 {
        margin: 0 0 30px;
    }
}

    /*~~~~~~~~~~~~~~~~~~~  Sign Up/Sign In modal */

    #SignUpModal .modal-content,
    #SignInModal .modal-content {
        border: 0;
        border-radius: 0px;
        height: 100vh;
    }

    #SignUpModal .modal-dialog,
    #SignInModal .modal-dialog {
        max-width: 100%;
        height: 100%;
        border: 0px;
        margin: 0;
        border-radius: 0px;
        padding: 0px;
    }

    #SignUpModal .modal-button,
    #SignInModal .modal-button {
        text-align: right;
    }

        #SignUpModal .modal-button .btn-close,
        #SignInModal .modal-button .btn-close {
            font-size: 24px;   
            padding: 30px; 
        }

    #SignUpModal .modal-body,
    #SignInModal .modal-body {
        margin: auto;
        display: flex;
        align-items: center;
    }
    
    #SignUpModal .modal-body {
        max-width: 1000px;
    }

    #SignInModal .modal-body {
        max-width: 1100px; 
    }

        #SignUpModal .modal-body button,
        #SignUpModal .modal-body a,
        #SignInModal .modal-body a {
            display: flex; 
            flex-wrap: wrap; 
            font-size: 38px;
            line-height: 48px;
            font-family: "Archivo-Bold", sans-serif;
            color: #000000;
            align-items: flex-end;
            position: relative;
            border: 0;
            background: none;
        }

            #SignInModal .modal-body a > span + span,
            #SignUpModal .modal-body a > span + span,
            #SignUpModal .modal-body button > span + span {
                display: flex;
                align-items: center;
                width: 100%; 
                justify-content: space-between; 
            }

            #SignUpModal .modal-body .col-6:first-child,
            #SignInModal .modal-body .col-6:first-child {
                margin-right: 30px;
            }

        #SignUpModal .modal-body .row,
        #SignInModal .modal-body .row {
            flex-wrap: nowrap;
            justify-content: space-between;
            padding: 0px 40px;
        }

        #SignUpModal .modal-body .col-6,
        #SignInModal .modal-body .col-6 {
            width: 46%;
        }

        #SignUpModal .modal-body button:after,
        #SignUpModal .modal-body a:after,
        #SignInModal .modal-body a:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            background-color: #000000;
            bottom: -36px;
        }

    #SignUpModal .modal-button,
    #SignInModal .modal-button {
        position: absolute; 
        top: 150px; 
        right: 30px; 
        z-index: 99; 
    }

    #SignUpModal .modal-body svg, 
    #SignInModal .modal-body svg {
        max-width: 60px;
    }

    @media screen and (max-width: 1200px) {
        #SignUpModal .modal-button,
        #SignInModal .modal-button {
            top: 100px;
            right: 0;
        }

    }
    
    @media screen and (max-width: 980px) {
        #SignUpModal .modal-body button,
        #SignUpModal .modal-body a,
        #SignInModal .modal-body a {
            font-size: 34px;
            line-height: 44px;
        }

    }

    @media screen and (max-width: 767px) {
        #SignUpModal .modal-button, 
        #SignInModal .modal-button {
            top: 60px;
            right: 0;
        }
    }

    @media screen and (max-width: 680px) {
        #SignUpModal .modal-body button, 
        #SignUpModal .modal-body a,
        #SignInModal .modal-body a {
            font-size: 28px;
            line-height: 38px;
        }

        #SignUpModal .modal-body .row,
        #SignInModal .modal-body .row {
            flex-wrap: wrap;
            flex-direction: column;
            max-width: 300px;
            padding: 0px 0px;
        }

            #SignUpModal .modal-body .row .col-6,
            #SignInModal .modal-body .row .col-6 {
                width: 100%;
            }

        #SignUpModal .modal-body .col-6:first-child,
        #SignInModal .modal-body .col-6:first-child {
            margin-right: 0px;
            margin-bottom: 90px;
        }
    }

    @media (max-width: 400px) {        
            .header-snap-roles .right-icon-navbar > .navbar-toggler,
            .header-snap-roles .right-icon-navbar > .navbar-toggler > .navbar-toggler-icon {
                width: 16px;
            }

                .header-snap-roles .right-icon-navbar > .navbar-toggler > .navbar-toggler-icon {
                    height: 2.5px; 
                    margin: 0 0 3px;
                }

        .header-snap-roles .nav-link img {
            width: 16px;
        }
        .header-snap-roles .nav-link,
        .header-snap-roles .flag-1 .nav-link {
            padding: 5px;
        }
    }

    @media (max-width: 350px) {
        .navbar-brand {
            margin: 0 4px 0 0;
        }
    }

.no-account {
    display: flex; 
    flex-wrap: wrap;
    align-items: center; 
    justify-content: center; 
    color: #222 !important; 
    margin: 15px 0;  
}

    .no-account button,
    .no-account button:hover,
    .no-account button:focus { 
        color: #222; 
        font-family: 'Archivo-Semibold', sans-serif; 
        margin: 0 0 0 5px;
        padding: 0;
        background: none;
    }

.btn-gray {
    color: #000 !important;  
    background: #e4e1e1 !important;  
} 

.btn-gray:hover {
    background: #d0cece !important;  
}

.btn-gray-dark {
    color: #fff !important;
    background: #949494 !important; 
} 

.btn-gray-dark:hover {
    background: #848484 !important;  
}

.add-new-role {
    margin: 30px 0 0;
    padding: 15px 15px 0; 
    border-radius: 10px;
    background: #EFF4F5; 
}

.add-new-role.row h4 {
    margin: 30px 0;  
    padding: 0 0 15px; 
    border-bottom: 1px solid #ddd; 
}

.add-new-role-title div[disabled="disabled"],
.add-new-role-industry div[disabled="disabled"] {
    margin: 0 !important; 
}

.add-new-role-title .business-role-select-main,
.add-new-role-industry .business-role-select-main {
    padding: 0 !important;  
}

.add-new-role-industry div[disabled="disabled"] {
    margin: 0 !important; 
}

.add-new-role-title .business-role-select,
.add-new-role-industry .business-role-select-main .business-role-select {
    margin: 15px 0 0 !important;
}

.border-top-lightgray {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #ddd;
}

.btn-delete {
    font-size: 14px; 
    line-height: 18px; 
    font-family: 'Inter-Medium', sans-serif; 
    color: #FF023A;
    border: 0;
    background: none;
}

.btn-delete svg {
    width: 14px; 
    margin: 0 5px 0 0; 
}

#personalDetailsTab .btn-delete {
    display: flex;
    align-items: center;
    margin: 0 0 10px; 
}

#personalDetailsTab .button-snap {
    margin: 0 25px 10px 0;  
}

    #personalDetailsTab .button-snap span {
        top: 11px; 
        right: 5px;
    }

    #professionalSummaryTab table tbody tr td .btnDeleteRole svg {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

#professionalSummaryTab table tbody tr td .btnDeleteRole svg:first-child {
    margin: 0 10px 0 0;
}

.border-row { 
    padding-top: 20px;
    padding-bottom: 20px; 
    border-bottom: 1px solid #ccc; 
}

#preferencesTab .tanlent-role-select label span + span {
    color: #999; 
}

/*~~~~~~~~~~~~~~~~~~~~~~  input type  */


.brb input[type="radio"], 
.weekDaysSelection input[type="radio"], 
.workEligibility input[type="radio"],
.fresher-field input[type="radio"],
.form-check-col-padding input[type="checkbox"],
#preferencesTab input[type="checkbox"],
#preferencesTab input[type="radio"],
#professionalSummaryTab input[type="checkbox"],
#professionalSummaryTab input[type="radio"] {
    width: 18px;
    height: 18px;
    border-radius: 5px !important;
    border: 1px solid #ccc;
    appearance: none;
}

.brb input:checked[type=radio], 
.weekDaysSelection input:checked[type=radio], 
.workEligibility input:checked[type=radio],
.fresher-field input:checked[type=radio],
.form-check-col-padding input:checked[type=checkbox],
#preferencesTab input:checked[type=checkbox],
#preferencesTab input:checked[type=radio],
#professionalSummaryTab input:checked[type=checkbox],
#professionalSummaryTab input:checked[type=radio] { 
    border-color: transparent !important;
    background-color: #47BC1E;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-check2' viewBox='0 0 16 16' %3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E") !important;
    background-size: 16px;
}

.bg-orange {
    background: #ff800f !important; 
}

.bg-orange-lt {
    background: #f9af5e !important;
}

.bg-green {
    background: #67ca19 !important; 
}

.bg-gray {
    background: #EFF4F5 !important; 
}

.bg-gray-dark {
    background: #808080 !important; 
}

#deleteAccountModal .modal-dialog,
#deleteAccountModalOne .modal-dialog {
    width: 400px;
    max-width: calc(100% - 30px); 
    margin: 1.5rem auto; 
}

#deleteModal .modal-dialog .modal-body {
    text-align: left; 
}

    #deleteModal .modal-dialog .modal-body p {
        font-size: 18px; 
        line-height: 1.2; 
        font-family: 'Archivo-Medium', sans-serif; 
        color: #333; 
        margin: 0; 
        padding: 10px; 
        border-radius: 10px; 
    }

    #deleteModal .modal-dialog .modal-body ul li:first-child {
        margin: 0 0 5px; 
    }

#deleteModal .modal-dialog .modal-footer {
    justify-content: space-between; 
}

#deleteAccountModal .modal-dialog .modal-body,
#deleteAccountModalOne .modal-dialog .modal-body {
    justify-content: center;
}
    }
    #deleteAccountModalOne .modal-dialog .modal-body {
        margin: 30px 0; 
    }
    }
    #deleteModal .modal-dialog .modal-footer p,
    #deleteAccountModal .modal-dialog .modal-body p,
    #deleteAccountModalOne .modal-dialog .modal-body p {
        font-size: 16px;
        line-height: 1.2;
        color: #111;
        margin: 0 0 10px;
        padding: 0 10px;
    }
    }
    #deleteAccountModal .modal-dialog .modal-body p,
    #deleteAccountModalOne .modal-dialog .modal-body p {
        margin: 0 15px 0 0;
        padding: 0;
    }

    #deleteModal .modal-dialog .modal-footer div,
    #deleteAccountModal .modal-dialog .modal-body div,
    #deleteAccountModalOne .modal-dialog .modal-body div {
        display: flex;
    }

    #deleteModal .modal-dialog .modal-footer .btn-cancel,
    #deleteAccountModal .modal-dialog .modal-body .btn-cancel,
    #deleteAccountModalOne .modal-dialog .modal-body .btn-cancel {
        color: #fff; 
        margin: 0 10px 10px 0; 
        background: #4CAF50;
    }

    #deleteAccountModal .modal-dialog .modal-body .btn-cancel,
    #deleteAccountModalOne .modal-dialog .modal-body .btn-cancel {
        margin: 0 10px 0 0;
    }

        #deleteModal .modal-dialog .modal-footer .btn-cancel:hover,
        #deleteAccountModal .modal-dialog .modal-body .btn-cancel:hover,
        #deleteAccountModalOne .modal-dialog .modal-body .btn-cancel:hover {
            background: #359639;
        }

    #deleteModal .modal-dialog .modal-footer .btn-delete-account,
    #deleteAccountModal .modal-dialog .modal-body .btn-delete-account,
    #deleteAccountModalOne .modal-dialog .modal-body .btn-delete-account {
        color: #222;
        margin: 0 0 10px 0;
        background: #eff4f5;
    }

    #deleteAccountModal .modal-dialog .modal-body .btn-delete-account,
    #deleteAccountModalOne .modal-dialog .modal-body .btn-delete-account {
        margin: 0;
    }

        #deleteModal .modal-dialog .modal-footer .btn-delete-account:hover,
        #deleteAccountModal .modal-dialog .modal-body .btn-delete-account:hover,
        #deleteAccountModalOne .modal-dialog .modal-body .btn-delete-account:hover {
            background: #e2e4e4; 
        } 

@media (max-width: 767px) {
    .talent-dashboard-container .container {
        padding: 10px; 
    }
    .add-new-role {
        padding: 15px 5px; 
    }
    #preferencesTab .talent-registration-box #myTabContent .weekDaysSelection .weekDaysPartTime .tr-part-time .col-5 {
        width: calc(50% - 5px);
    }
    #preferencesTab input[type="checkbox"],
    #preferencesTab input[type="radio"],
    #professionalSummaryTab input[type="checkbox"],
    #professionalSummaryTab input[type="radio"] {
        width: 18px;
        height: 18px;
    }
    #preferencesTab input:checked[type=checkbox],
    #preferencesTab input:checked[type=radio],
    #professionalSummaryTab input:checked[type=checkbox],
    #professionalSummaryTab input:checked[type=radio] { 
        background-size: 16px;
    }
}

@media (max-width: 400px) {
    .talent-dashboard-container .container {
        width: calc(100% - 15px);
    }
}

/*~~~~~~~~~~~~~~~~~~  business sign up steps  */

/*body.business-modal-steps {
    overflow: hidden;
}*/

.modal-how-main .modal-dialog {
    max-width: 640px; 
}

    .modal-how-main .modal-dialog .modal-content.modal-content-how {
        padding: 30px 30px 15px;  
    }

.modal-how-main #exampleModalToggle,
.modal-how-main #exampleModalToggle2,
.modal-how-main #exampleModalToggle3 {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
}

#exampleModalToggle,
#exampleModalToggle2,
#exampleModalToggle3 {
    background: #fff;
}

.modal-backdrop.show:nth-of-type(even) {
    z-index: 1 !important;
}

.modal-backdrop.show {
    background-color: #ff000000;
}

.radio-modal-how {
    display: flex;
    margin-bottom: 30px;
}

    .radio-modal-how input[type=radio]:checked + label:before {
        background: #FF8011;
    }

    .radio-modal-how input[type=radio] {
        /* Hide original inputs */
        visibility: hidden;
        position: absolute;
    }

        .radio-modal-how input[type=radio] + label:before {
            height: 22px;
            width: 22px;
            margin-right: 2px;
            content: " ";
            display: inline-block;
            vertical-align: baseline;
            border: 2px solid #000;
        }

        .radio-modal-how input[type=radio] + label:before {
            border-radius: 50%;
        }

.modal-how-main .modal-dialog > h4 {
    width: 100%; 
    font-size: 20px; 
    line-height: 1.2; 
    font-family: 'Inter-Bold', sans-serif; 
    margin: 20px 0; 
    padding: 0 15px; 
}

.modal-content.modal-content-how {
    border-radius: 34px;
    padding: 40px 30px;
    border: 0px;
    -webkit-box-shadow: 3px -1px 23px 1px rgba(217, 217, 217, 1);
    -moz-box-shadow: 3px -1px 23px 1px rgba(217, 217, 217, 1);
    box-shadow: 3px -1px 23px 1px rgba(217, 217, 217, 1);
}

.modal-content-how .modal-body {
    margin: 0;  
    padding: 0;  
}

.modal-content-how h2 {
    font-size: 30px;
    line-height: 40px;
    font-family: "Archivo-Bold", sans-serif;
    margin-bottom: 20px;
}

.radio-modal-how .form-check:first-child {
    padding-left: 0px;
}

.radio-modal-how .form-check-label {
    display: flex;
    align-items: center;
}

    .radio-modal-how .form-check-label span {
        margin-left: 8px;
        font-family: 'Inter-Regular', sans-serif;
        color: #000;
    }

.btn.next-how {
    background-color: #1473FF;
    color: #fff;
    border-radius: 10px; 
    padding: 8px 30px;
    font-size: 14px;
}

    .btn.next-how:hover {
        background-color: #0c58c7;
        color: #fff;
    }

.btn.skip-how {
    padding: 0;
    color: #5e5e5e;
    font-size: 14px;
    border: 0; 
    font-family: 'Inter-Bold', sans-serif; 
}

    .btn.skip-how:hover,
    .btn.skip-how:active {
        color: #222 !important; 
        border: 0 !important; 
    }

    .how-dots {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 20px;
    }

    .how-dots .dot {
        width: 16px;
        height: 16px;
        background: #ff8011;
        border-radius: 50px;
        margin-right: 5px;
        opacity: 0.7;
    }

    .how-dots div:last-child {
        margin-right: 0px;
    }

    .how-dots .dot.active {
        opacity: 1 !important;
    }

@media screen and (max-width:1024px) {
    .modal-content-how h2 {
        font-size: 28px;
        line-height: 36px; 
    }

    .radio-modal-how input[type=radio] + label:before {
        height: 20px;
        width: 20px;
    }

    .how-dots div {
        width: 14px;
        height: 14px;
    }
}

@media screen and (max-width:768px) {
    .modal-how-main .modal-dialog {
        width: calc(100% - 30px);  
        max-width: 640px; 
    }

        .modal-how-main .modal-dialog .modal-content.modal-content-how {
            padding: 0 25px 15px; 
        }

    .modal-how-main .modal-dialog > h4 {
        font-size: 18px; 
    }

    .how-dots div {
        width: 12px;
        height: 12px;
    }

    .modal-content-how h2 {
        font-size: 26px;
        line-height: 32px;
    }

    .radio-modal-how {
        margin-bottom: 20px;
    }

        .radio-modal-how input[type=radio] + label:before {
            height: 18px;
            width: 18px;
        }

}

@media screen and (max-width:480px) {
    .modal-content-how h2 {
        font-size: 24px;
        line-height: 30px; 
    }

    .radio-modal-how {
        flex-wrap: wrap;
    }

        .radio-modal-how .form-check {
            width: 100%;
            padding-left: 0px;
        }
}

/*.talent-registration-box-form .workEligibility {
    padding-top: 25px;
    padding-bottom: 20px;
    border-top: 1px solid #ddd; 
    border-bottom: 1px solid #ddd; 
}*/

    .talent-registration-box-form .workEligibility + .form-check {
/*        padding-bottom: 20px; */
        padding-left: 10px;
    }

        .talent-registration-box-form .workEligibility + .form-check + .form-check {
/*            padding-top: 20px;*/
            padding-left: 10px;
/*            border-top: 1px solid #ddd;*/
        }

.incompleteInfo {
    display: block !important;
    font-size: 14px;
    line-height: 18px;
    color: #f00; 
}

#v-pills-profile .incompleteInfo ul {
    width: 300px;
    max-width: 100%; 
} 

#additionalLocationModal .incompleteInfo ul {
    width: 350px; 
    max-width: 100%; 
}

.business-registration .incompleteInfo {
    padding: 0 !important;
}

    .incompleteInfo > ul {
        padding: 0;
        list-style: inside;
    }

        .incompleteInfo > ul li {
            color: #842029; 
            margin: 5px 0; 
            padding: 7px 10px; 
            border: 1px solid #f5c2c7; 
            border-radius: 10px;
            background: #f8d7da; 
        }

            .incompleteInfo > ul li a {
                color: #842029;  
                text-decoration: none; 
            }    

    .incompleteInfo p {
        font-size: 14px;
        line-height: 18px;
        color: #f00;
        margin: 0 0 5px;
    }

#v-pills-profile .incompleteInfo {
    padding: 10px !important;
}

#additionalLocationModal .incompleteInfo {
    padding: 15px 10px !important;
}

.fresher-field {
    padding-top: 25px;
    border-top: 1px solid #ddd;
}

.fresherNoBox .roleSelectBox,
.add-new-role-title .roleSelectBox,
.add-new-role-industry .roleSelectBox {
    position: relative;
}

.fresherNoBox .roleSelectBox > div .form-control:has(.text-selected),
.add-new-role-industry .roleSelectBox > div .form-control:has(.text-selected), 
.add-new-role-title .roleSelectBox > div .form-control:has(.text-selected) {
    border-color: #008000;
}

.emailVerified {
    border: 1px solid #f00 !important; 
}

.buttonDisabled {
    pointer-events: none;
    background: grey;
}

.phoneVerifyCode .form-control:disabled {
    border-top: 1px solid #ced4da !important;
    border-bottom: 1px solid #ced4da !important;
}

@media (max-width: 767px) {    

    .form-control,
    .creditCardDetailModal form input {
        padding: 11px 10px;
    }

    .verfiy-phone-registration {
        padding: 11px 5px;
    }

    .phoneVerifyCode {
        width: 50px; 
    }

        .phoneVerifyCode .form-control {
            padding: 11px 5px; 
        }
                
}

#personalDetailsTab .btn-advance {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 18px;
    font-family: 'Inter-Medium', sans-serif;
    color: #333; 
    border: 0;
    margin: 0 0 10px; 
    background: none;
}

#personalDetailsTab .btn-advance i {
    font-size: 18px;
    margin: 0 7px 0 0; 
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~  pagination  */

.pagination {
    margin: 15px 0;
}

.pagination ul {
    margin: 0 !important; 
    padding: 0 !important; 
}

    .pagination ul li a,
    #v-pills-home .pagination ul li a {
        width: 34px;
        height: 34px;
        color: #333; 
        border: 1px solid #ddd !important;
        border-radius: 10px !important;
        margin: 0 3px !important;
    }

        .pagination ul li.active a,
        .pagination ul li a:hover,
        #v-pills-home .pagination ul li a:hover,
        #v-pills-home .pagination ul li.active a {
            color: #fff !important;
            background: #ff8113 !important;
        }

.table-candidates tbody tr.no-more-data td {
    color: #664d03 !important;
    background: #fff3cd !important;
}

.moreCandidateView {
    display: flex;
    flex-wrap: wrap; 
}

.moreCandidateView:has(button) { 
    justify-content: end; 
}

.moreCandidateView:has(div) {
    justify-content: space-between; 
}

.moreCandidateView > div {
    margin: 0 15px 0 0; 
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  contact us  */

.body-contact main,
.body-unsubscribe main {
    min-height: auto;
    padding: 0 0 50px; 
}

.body-snap .contact-us,
.body-snap .unsubscribe {
    padding: 20px 60px !important;
}

    .body-snap .contact-us p,
    .body-snap .unsubscribe p {
        color: #212529; 
    }
    
    .body-snap .contact-us textarea {
        min-height: 100px; 
    }

    .body-snap .unsubscribe h2 {
        color: #1573ff;
        font-size: 100px;
        line-height: 114px;
        font-family: 'Archivo-Bold', sans-serif;
        letter-spacing: -1px; 
        margin: 0 0 30px; 
    }

        .body-snap .unsubscribe h2 span {
            display: block;
            font-size: 50px; 
            line-height: 60px; 
            font-family: 'Archivo-Regular', sans-serif; 
            color: #212529; 
        }

    .body-snap .contact-us svg,
    .body-snap .unsubscribe svg {
        max-height: calc(100%  - 100px); 
    }

    @media (max-width: 1400px) {
        .body-snap .unsubscribe h2 {
        font-size: 70px;
        line-height: 80px;
    }
}
    @media (max-width: 1024px) {
        .body-snap .contact-us,
        .body-snap .unsubscribe {
            padding: 0 40px !important;
        }
            .body-snap .unsubscribe h2 {
                font-size: 55px;
                line-height: 65px; 
            }
            .body-snap .unsubscribe  span {
                font-size: 40px; 
                line-height: 50px;  
            }
    }
    
    @media (max-width: 767px) {
        .body-snap .contact-us,
        .body-snap .unsubscribe { 
            padding: 0 20px !important;
        }
            .body-snap .unsubscribe h2 {
                font-size: 50px;
                line-height: 60px;
            }
    }
    
    @media (max-width: 600px) {
            .body-snap .unsubscribe h2 span {
                font-size: 28px; 
                line-height: 38px; 
            }
    }
    
    @media (max-width: 500px) {
            .body-snap .unsubscribe h2 {
                font-size: 40px; 
                line-height: 50px; 
            }
    }

#additionalLocationModal .modal-dialog {
    width: 800px; 
    max-width: 90%;  
}

#additionalLocationModal .modal-dialog .modal-dialog {
    width: 600px; 
}

    #additionalLocationModal .modal-dialog .modal-body {
        height: auto !important;
        max-height: calc(100svh - 150px);
        overflow-y: auto;
        margin: 0 0 20px; 
    } 
    
    #additionalLocationModal .modal-dialog .modal-body .modal-body {
        max-height: calc(100svh - 45svh);  
    } 
    
    #additionalLocationModal .modal-dialog .bg {
        padding: 20px 10px; 
        background: #f9f9f9;    
    } 

    @media (max-width: 575px) {
        #additionalLocationModal .modal-content {
            padding: 0; 
        }
    }
    
body .tooltip.show { 
    opacity: 1; 
}

body .tooltip .tooltip-inner { 
    font-size: 16px;
    line-height: 20px; 
    color: #084298;
    background-color: #cfe2ff;
    border-color: #b6d4fe;  
}

body .tooltip .tooltip-arrow:before { 
    border-top-color: #b6d4fe !important;  
}

.body-privacy #privacyContent .cls-1,
.body-privacy #privacyContent .cls-2 {
    fill: #ff8113; 
}

body .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after,
.bs-popover-bottom > .popover-arrow::after {
    border-bottom-color: #cfe2ff;
}

body .popover-body {  
    color: #084298;
    background: #cfe2ff;
}

.popover-body ul li:only-child {
    width: 140px;
}

body .popover-body * {
    font-size: 16px;
    line-height: 20px;
} 
    
    body .popover-body p {
        color: #084298; 
    } 
    
    body .popover-body ul {
        margin: 0; 
    }

.blog-single .blog-container {
    max-width: 1000px; 
}

.blog-single .single-blog-data * {
    font-size: 20px;
    line-height: 30px; 
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  alert messages */
body .alert.p-2 {
    font-size: 12px;
    line-height: 16px;
    padding: 10px !important;
    border-radius: 10px; 
}

body .pswd-error .alert {
    margin: 0;
    padding: 10px !important; 
    padding-bottom: 0 !important;
    border: 0;
    border-radius: 0;
}

    body .pswd-error .alert:first-child {
        margin: 5px 0 0 !important;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }           

    body .pswd-error .alert:last-child {  
        padding-bottom: 10px !important; 
        border-bottom-left-radius: 10px;  
        border-bottom-right-radius: 10px; 
    }
    
    body .pswd-error .alert:empty {  
        padding: 0 !important; 
    }
    
    body .pswd-error .alert + .alert:empty {  
        padding-bottom: 10px !important; 
        border-bottom-left-radius: 10px; 
        border-bottom-right-radius: 10px;
    }

body .alert.alert-primary {
    color: #084298;  
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~  moving hand animation  */

.transform90 {
    transform: rotateZ(90deg);
    animation: handmvoing 1s ease 0s infinite;  
}

@keyframes handmvoing { 
    0% { 
        transform: rotateZ(90deg) translateY(-5px);
    }

    50% { 
        transform: rotateZ(90deg) translateY(0);
    }

    100% {
        transform: rotateZ(90deg) translateY(-5px);
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~  page-error  */

.page-error {
    padding: 100px 60px;  
}

.page-error h1,
.page-error p { 
    text-align: center; 
}

    .page-error h1 {
        font-size: 100px;
        line-height: 110px; 
        font-family: 'Archivo-Bold'; 
        text-align: center;
        text-transform: uppercase;
        margin: 15px 0;
    }

    .page-error h5 {
        font-size: 40px;
        line-height: 50px;
        text-align: center;
        margin: 0;
    }

    .page-error p {
        color: #222;
        text-align: center;
        margin: 15px 0;
    }

@media (max-width: 1024px) {
    .page-error {
        padding: 80px 40px;
    }

        .page-error svg {
            width: 90px; 
            height: 90px;
        }

        .page-error h1 {
            font-size: 80px;
            line-height: 90px;
        }

        .page-error h5 {
            font-size: 36px;
            line-height: 46px; 
        }
}

@media (max-width: 767px) { 
    .page-error {
        padding: 50px 20px;
    }

        .page-error svg {
            width: 70px; 
            height: 70px; 
        }

        .page-error h1 {
            font-size: 60px;
            line-height: 70px;
        }

        .page-error h5 {
            font-size: 32px;
            line-height: 42px;
        }
} 

@media (max-width: 575px) {     

        .page-error svg {
            width: 60px; 
            height: 60px; 
        }

        .page-error h1 {
            font-size: 50px;
            line-height: 60px;
        }

        .page-error h5 {
            font-size: 28px;
            line-height: 38px;
        }
} 

/*~~~~~~~~~~~~~~~~~~~~~~~~~  employee dashboard  */

.body-employee-dashboard {
    background: #F1F1F1; 
}

.employee-dashboard .your-candidate-left .navbar-brand span { 
    height: 50px;
    font-family: 'Archivo-Medium', sans-serif;
    margin: -5px 0 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #fff;
}

.employee-dashboard .your-candidate-left .nav-tabs {
    padding: 30px 0 0;  
}

.employee-dashboard .your-candidate-left .nav-tabs li {
    width: 100%;  
}

    .employee-dashboard .your-candidate-left .nav-tabs li button {
        width: 100%; 
        font-family: 'Inter-Medium', sans-serif;
        color: #777; 
        text-align: left;
        margin: 0 0 2px;
        padding: 15px 20px;
        border: 0; 
        border-left: 4px solid transparent; 
    }

        .employee-dashboard .your-candidate-left .nav-tabs li button.active,
        .employee-dashboard .your-candidate-left .nav-tabs li button:hover { 
            background: #EFF4F5 !important; 
            color: #004584 !important;
            border-left: 4px solid #004584;
            border-radius: 0;
            position: relative; 
        }

        .employee-dashboard .your-candidate-left .nav-tabs li button i {
            margin: 0 5px 0 0; 
        }

.employee-dashboard #talentInformation1 .tab-content {
    padding: 0; 
}

    .employee-dashboard #talentInformation1 .tab-content .employee-dashoard-top-bar {
        display: flex;
        color: #555;
        justify-content: space-between;
        padding: 15px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background: #fff;
    }

    .employee-dashboard #talentInformation1 .tab-content #talentSummaryTab .container-fluid,
    .employee-dashboard #talentInformation1 .tab-content #leadsSummaryTab .container-fluid,
    .employee-dashboard #talentInformation1 .tab-content #rolesTab .container-fluid {
        padding: 0 12px;
    }

    .employee-dashboard #talentInformation1 .tab-content .employee-dashoard-top-bar .invite-employee {
        font-size: 14px;
        line-height: 18px;
        color: #1473ff; 
        padding: 0;
        border: 0;
        background: none;
    }

    .employee-dashboard #talentInformation1 .tab-content .employee-dashboard-below-top-bar {
        display: flex;
        justify-content: end;
        padding-top: 15px;  
        padding-bottom: 15px;  
        background: #fff;
    }

.employee-dashboard-below-top-bar span {
    font-size: 14px;
    line-height: 18px; 
    color: #555;
}

.employee-dashboard-below-top-bar span:first-child {
    margin: 0 15px 0 0;
    padding: 0 15px 0 0;
    border-right: 2px solid #ddd; 
}

    .employee-dashboard-below-top-bar span i {
        font-family: 'Inter-Medium';
        font-style: normal;
        color: #000; 
    }

.employee-filter {
    border-bottom: 1px solid #ddd;  
}

.employee-filter > div input[type="date"] {
    width: 150px; 
}

.employee-filter > div div:nth-child(2) {
    display: flex; 
    align-items: center;  
    justify-content: center; 
    width: 50px; 
}

.table-employee table {
    width: 2000px;  
    table-layout: auto;
}

.table-employee table tr th:last-child {
    width: auto !important; 
}
    
    .table-employee table tr td:nth-child(2) button {
        width: 100%; 
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left; 
    }

.table-employee-leads table {
    width: 1400px; 
    table-layout: auto; 
}

.table-employee-leads table tr th:not(:nth-child(1)):not(:nth-child(2)) { 
    text-align: center !important; 
}

.employee-dashboard-leads #v-pills-tabContent .dropdown-multilevel-checkbox .selected-options,
#rolesTab .dropdown-multilevel-checkbox .selected-options {
    width: 100%;
    margin: 0;
}
    }

    .employee-dashboard-leads #v-pills-tabContent .dropdown-multilevel-checkbox .selected-options .selected-options-close,
    #rolesTab .dropdown-multilevel-checkbox .selected-options .selected-options-close { 
        right: 30px;
    }

.border-right-light-gray {
    border-right: 2px solid #eff4f5; 
}

.cursor-pointer {
    cursor: pointer; 
}

.if-empty:empty {
    display: none !important;
}

.add-master-role .col-md-5 {
    width: 41.66666667% !important; 
}

.add-master-role button {
    width: 155px; 
}

#rolesTab .dropdown-multilevel-checkbox .options-container {
    width: 150px;
    max-width: 100%;  
}

#manageRoles .roleSelectBox .dropdown-multilevel-checkbox {
    margin-bottom: 15px; 
}

.hover-manage-role-tab:hover {
    color: #1473ff; 
    background: #eee !important; 
}

.manage-role-filter input {
    width: 250px !important; 
}

.border-bottom-gray {
    border-bottom: 1px solid #ddd;
}

.table-layout-auto { 
    table-layout: auto !important; 
}

#leadsSummaryTab .employee-dashboard-leads #candidateModal .modal-dialog table {
    table-layout: auto;
}

#leadsSummaryTab .employee-dashboard-leads #candidateModal .modal-dialog table thead tr th:first-child {
    width: 150px; 
} 

#leadsSummaryTab .employee-dashboard-leads #candidateModal .modal-dialog table tbody tr td {
    box-shadow: none;
}

#leadsSummaryTab .employee-dashboard-leads #candidateModal .modal-dialog table tbody tr td button {
    text-align: left; 
}

.w-90 {
    width: 90% !important; 
}

#msgModal .modal-dialog .modal-body {
    max-height: 75svh;
    overflow: auto;
}

.text-link {
    color: #1473ff !important; 
    border: 0 !important; 
    background: none !important;   
}

/*~~~~~~~~~~~~~~~~~~~~~~~~  message off modal  */ 

#messageOff .modal-dialog {
    width: 450px;
    height: 100svh;
    top: 0;
    display: flex;
    align-items: center;
}

#deleteModal .modal-dialog {
    width: 450px; 
}

#messageOff .modal-content,
#deleteAccountModalOne .modal-content,
#deleteModal .modal-content,
#deleteAccountModal .modal-content {
    border: 0;
    border-radius: 10px;
}

#messageOff .modal-body {
    padding-bottom: 0;
}

    #messageOff .modal-body p {
        text-align: center; 
    }

#messageOff .modal-footer,
#deleteAccountModalOne .modal-footer,
#deleteModal .modal-footer,
#deleteAccountModal .modal-footer {
    border: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

    #messageOff .modal-footer button,
    #deleteAccountModalOne .modal-footer button,
    #deleteModal .modal-footer button,
    #deleteAccountModal .modal-footer button {
        width: 50%;
        height: auto;
        border: 0;
        margin: 0 !important;
        padding: 15px 0;
        justify-content: center;
        border-radius: 0;
    }

        #messageOff .modal-footer button:first-child,
        #deleteAccountModalOne .modal-footer button:first-child,
        #deleteModal .modal-footer button:first-child,
        #deleteAccountModal .modal-footer button:first-child {
            color: #fff;
            border-bottom-left-radius: 10px;
            background: #4CAF50;
        }

        #messageOff .modal-footer button:nth-child(2),
        #deleteAccountModalOne .modal-footer button:nth-child(2),
        #deleteModal .modal-footer button:nth-child(2),
        #deleteAccountModal .modal-footer button:nth-child(2) {
            color: #222;
            border-bottom-right-radius: 10px;
            background: #eff4f5;
        }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~  shortcut links  */

#install-btn {
    display: none;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 115px;
    cursor: pointer;
    padding: 10px;
    z-index: 9;
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
    background: #1473ff; 
}

#ios-instructions {
    display: none;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 130px;
    padding: 10px;
    z-index: 9;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #1473ff; 
}

.close-install-ui {
    position: absolute;
    top: -15px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px; 
    height: 22px; 
    font-size: 14px;
    line-height: 20px;
    padding: 5px;
    border: 0;
    border-radius: 100%; 
    background: #eee; 
}

    .close-install-ui:hover {
        background: #ddd; 
    }

    #install-btn p,
    #ios-instructions p {
        width: 100%;    
        font-size: 12px; 
        line-height: 1.2;
        color: #fff;
        margin: 0;
    }

#ios-instructions p {
    color: #eee;    
}

    #ios-instructions p:last-child {
        font-family: 'Inter-Medium', sans-serif; 
    }

#ios-instructions .link-ios-help {
    color: #fff; 
    cursor: pointer; 
    margin: 5px 0 0; 
}

.header-snap-roles .right-icon-navbar .nav-link.link-android,
.header-snap-roles .right-icon-navbar .link-ios {
    font-size: 14px;
    line-height: 20px;
    font-family: 'Inter-Medium';
    margin: 10px 0 0;
    padding: 10px 5px 5px;
    border: 0;
    border-top: 1px solid #f5bb88;
    border-radius: 0;
    background: none;
}

.header-snap-roles .right-icon-navbar .link-ios p {
    font-size: 14px;
    line-height: 20px; 
    color: #fff; 
    text-align: right; 
    margin: 0; 
}

    .header-snap-roles .right-icon-navbar .link-ios p.link-ios-help {
        font-family: 'Inter-Bold', sans-serif;
        cursor: pointer; 
    }

    .header-snap-roles .right-icon-navbar .link-ios p span {
        font-family: 'Inter-Bold', sans-serif; 
    }

/*~~~~~~~~~~~~~~~~~~~~~~~~  ios Shotcut Help  */

#iosShotcutHelp {
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8); 
}

    #iosShotcutHelp .modal-header h4 {
        letter-spacing: 0; 
    }
    
    #iosShotcutHelp .modal-body {
        margin: 0; 
    }

    #iosShotcutHelp .carousel img {
        display: block; 
        width: auto; 
        max-width: 100%; 
        max-height: calc(100svh - 120px); 
        margin: auto;  
    }

    #iosShotcutHelp .carousel .carousel-control-prev,
    #iosShotcutHelp .carousel .carousel-control-next {
        display: block; 
        top: 0;
        bottom: 0;
        width: 38px;
        height: 38px; 
        margin: auto;
        background: rgba(0, 0, 0, 0.5); 
    }

/*~~~~~~~~~~~~~~~~~~~~~~  autoShowModal  */

#autoShowModal {
    z-index: 9999; 
    background: rgba(0,0,0,0.8); 
}

    #autoShowModal .modal-dialog {
        max-width: 800px;  
    }


.pricing-left ul li .dayPassInfo {
    display: inline;
    width: auto; 
    cursor: pointer;
    margin: 0 0 0 10px; 
}

/*~~~~~~~~~~~~~~~~~~~~~  find next role  */

.find-next-role {
    padding: 50px; 
    background: #000002;
    background: linear-gradient(169deg, rgba(0, 0, 2, 1) 0%, rgba(23, 38, 62, 1) 80%, rgba(176, 88, 13, 1) 100%);
    }

    .find-next-role .row > div { 
        align-content: center; 
    }

    .find-next-role h2 {
        font-size: 75px;
        line-height: 85px;
        font-family: 'Archivo-Bold';
        color: #ff8011;
        text-align: center;
    }

    .find-next-role h2 span {
        color: #e8e8e8;
    }

.find-next-role h5 {
    color: #e8e8e8;
    margin: 0 0 10px; 
}

    .find-next-role .roleSelectBox {
        max-width: 500px;
    }

@media (max-width: 1024px) {
    .find-next-role h2 {
        font-size: 50px;
        line-height: 60px;
    }
} 

@media (max-width: 767px) {
    .find-next-role h2 {
        font-size: 40px;
        line-height: 50px;
        margin: 0 0 30px;
    }
    .find-next-role h2 br {
        display: none; 
    }
    .find-next-role h5 {
        text-align: center; 
    }
    .find-next-role .roleSelectBox {
        max-width: 450px; 
        margin: 0 auto; 
    }
} 
@media (max-width: 600px) {
    .find-next-role h2 {
        font-size: 30px; 
        line-height: 40px; 
    }
}

.pricing-page .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.pricing-page .bs-tooltip-end .tooltip-arrow::before {
    border-top-color: transparent !important;  
    border-right-color: #b6d4fe !important; 
}
    }
.pricing-page .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.pricing-page .bs-tooltip-bottom .tooltip-arrow::before { 
    border-bottom-color: #b6d4fe !important;  
} 

div.vue-loading-wrapper.loading :not(.loading-spinner) {
    opacity: 0.6;
    }
}
div.vue-loading-wrapper.loading img.loading-spinner { 
    position: absolute;
    height: 60px;
    top: 50%;
    left: 45%; 
}

.body-snap.body-privacy h2 {
    font-size: revert;     
}

.grecaptcha-badge {
    display: none !important;
}
.loading-spinner {
    max-width: 80px;  
    margin: auto;
    justify-content: center;
    display: flex;
}
.loading {
height:70vh;
}

.verify-phone-code {
    font-size: 14px !important; 
    line-height: 1.2 !important; 
    font-family: 'Inter-Medium', sans-serif !important;  
    margin: 5px 0 15px !important; 
}

.verify-phone-code span {
    font-family: 'Inter-Bold', sans-serif !important; 
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  pricing accordion  */

.pricing-plans {
    display: block; 
}

    .pricing-plans .accordion .accordion-item {
        display: block;
        margin: 0 !important;
        border: 0; 
        border-radius: 10px; 
    }
    
    .pricing-plans .accordion .accordion-item .accordion-body {
        padding: 0; 
    }

.pricing-plan-info.recommended ul li:nth-child(2) p {
    color: #ddd; 
}

@media (min-width: 1200px) {
    .pricing-plans .accordion {
        width: 100%;
        display: grid;
        grid-template-columns: 19.5% 19.5% 19.5% 19.5% 19.5%;
        grid-gap: 1%;
        overflow: visible;
    } 

    .pricing-plans .accordion-collapse {
        display: block !important;
        height: auto !important;
    }

    .pricing-plans .accordion-header { 
        display: none;
    }

    .pricing-plans .accordion-collapse {
        padding: 0; 
    }

    .pricing-plan-info ul li:first-child > div:first-child {
        display: block; 
    }
    
    .pricing-plan-info ul li > div:first-child {
        display: none;
    }
}

@media (max-width: 1199px) {
    .pricing-left {
        display: none;
    }

    .pricing-plans .accordion .accordion-item {
        padding: 0;
        margin: 0 0 15px !important;
    }

    .pricing-plans .accordion-header { 
        margin: 0; 
    }

    .pricing-plans .accordion-item.recommended .accordion-header {
        margin: 15px 0 0; 
    }

    .pricing-plans .accordion-header .accordion-button {
        display: flex;
        justify-content: space-between; 
        font-size: 30px; 
        line-height: 1.2;
        font-family: 'Archivo-Semibold', sans-serif;
        color: #000;
        padding: 15px 80px 15px 15px;
        box-shadow: none;
        background: none;
    }

    .pricing-plans .recommended .accordion-header .accordion-button {
        color: #fff; 
    }

    #pricingApp .pricing-plans .recommended .accordion-header .accordion-button span {
        color: #eee;
    }

        .pricing-plans .accordion-header .accordion-button:after {
            display: block;
            position: absolute;
            top: 0;
            right: 30px;
            bottom: 0;
            margin: auto;
            width: 34px;
            height: 34px;
            border-radius: 5px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='15' viewBox='0 0 26 15' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.5777 14.3139L0.263725 2.99988L3.09172 0.171875L12.9917 10.0719L22.8917 0.171875L25.7197 2.99988L14.4057 14.3139C14.0307 14.6888 13.5221 14.8994 12.9917 14.8994C12.4614 14.8994 11.9528 14.6888 11.5777 14.3139Z' fill='%23222222'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 18px;
            background-color: #f2f6ff;
            background-position: center;
        }

    #pricingApp .pricing-plans .accordion-header .accordion-button span {
        display: block;
        width: 100%;
        font-size: 16px;
        line-height: 1.2;
        font-family: 'Inter-Medium', sans-serif;
        color: #777;
        background: none;
    }

    .pricing-plans .accordion-header .accordion-button > div:nth-child(2) {
        min-width: 125px;
        font-size: 18px;
        line-height: 1.2; 
        font-family: 'Inter-Medium', sans-serif; 
        text-align: right; 
        margin: 0 0 0 20px;
    }

        .pricing-plans .accordion-header .accordion-button > div:nth-child(2) span {
            display: inline-block;
            width: auto;
            font-size: 18px;
            color: #1573ff; 
        }

    .pricing-plans .recommended .accordion-header .accordion-button > div:nth-child(2) span {
        color: #fff; 
    }

    .pricing-plans .accordion-header .accordion-button[aria-expanded="false"]::after {
        transform: rotate(0deg);
    }
    
    .pricing-plans .accordion-header .accordion-button[aria-expanded="true"]::after { 
        transform: rotate(-180deg); 
    }

    .pricing-plan-info ul li {
        min-height: auto !important;
    } 
    
    .pricing-plan-info ul li:first-child {
        display: none; 
    }     

    .pricing-plan-info ul li > div:first-child {
        display: block; 
        font-size: 16px;
        line-height: 1.2;
        color: #222;
        padding: 0 15px 0 0; 
    }

    .pricing-plan-info.recommended ul li > div:first-child { 
        color: #fff;
    }
    
    .pricing-plan-info.recommended ul li > div:first-child span { 
        color: #eee; 
    }
    
    .pricing-plan-info ul li > div:first-child span {
        display: block; 
        font-size: 14px;
        line-height: 1.2;
        color: #777; 
    }

    .pricing-plan-info ul li div {
        width: 50%;  
        text-align: left;  
        padding: 0 0 0 15px; 
    } 

    .pricing-plan-info ul li.additional-services > div:first-child {
        width: 100%;
        font-size: 18px;
        line-height: 1.2; 
        font-family: 'Archivo-Semibold', sans-serif; 
    }
    
    .pricing-plan-info ul li.additional-services > div:nth-child(2) { 
        display: none; 
    }
}

@media (max-width: 640px) {
    .pricing-plans .accordion-header .accordion-button {
        font-size: 26px; 
        padding: 15px 60px 15px 15px; 
    }
    #pricingApp .pricing-plans .accordion-header .accordion-button span {
        font-size: 14px;
    }
        .pricing-plan-info ul li > div:first-child {
            font-size: 14px;
        }
        .pricing-plan-info ul li > div:first-child span {
            font-size: 12px;  
        }
    .pricing-plan-info ul li.additional-services > div:first-child {
        font-size: 16px; 
    }
        .pricing-plans .accordion-header .accordion-button:after {
            right: 15px;
            width: 30px;
            height: 30px;
            background-size: 16px;
        }
    .pricing-plans .accordion-header .accordion-button {
        flex-wrap: wrap;
    }
        .pricing-plans .accordion-header .accordion-button > div {
            width: 100%;
        }
            .pricing-plans .accordion-header .accordion-button > div:nth-child(2) {
                width: 100%;
                text-align: left; 
                margin: 10px 0 0; 
            }
} 

@media (max-width: 420px) {
    .pricing-plans .accordion-header .accordion-button {
        font-size: 24px; 
    }
    #pricingApp .pricing-plans .accordion-header .accordion-button span {
        font-size: 12px;
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  pricing-banner  */

.pricing-banner > div {
    margin: 50px 0; 
    padding: 50px; 
    position: relative; 
    border-radius: 50px;    
    background: #FF8011; 
} 

.pricing-page #pricingApp .pricing-banner h2, 
.pricing-page #pricingApp .pricing-banner h2 span { 
    font-size: 70px; 
    line-height: 80px; 
    font-family: "Archivo-Bold", sans-serif; 
}

    .pricing-page .pricing-banner h2 { 
        margin: 0; 
    }

.pricing-page #pricingApp .pricing-banner h2 span {
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
}  


.pricing-page .pricing-banner h4,
.pricing-page .pricing-banner h4 span {
    font-size: 45px; 
    line-height: 55px; 
    font-family: "Archivo-Regular", sans-serif; 
}

.pricing-page .pricing-banner h4 {
    margin: 50px 0; 
}

.pricing-page .pricing-banner h4 span {
    display: inline-block;
    color: #fff;
    text-transform: uppercase; 
    border: 3px dashed #fff; 
    border-radius: 10px; 
    padding: 5px 10px; 
}

.pricing-page .pricing-banner p {
    color: #222;  
    margin: 0; 
}


.pricing-page .pricing-banner img {
    position: absolute; 
    top: 0; 
    right: 0;  
    height: 100%;  
}

@media (max-width: 1500px) {
    .pricing-page .pricing-banner svg {
        width: 280px;
    }
    .pricing-page #pricingApp .pricing-banner h2,
    .pricing-page #pricingApp .pricing-banner h2 span {
        font-size: 55px;
        line-height: 65px;
    }
    .pricing-page .pricing-banner h4, 
    .pricing-page .pricing-banner h4 span {
        font-size: 35px; 
        line-height: 45px; 
    }    
    .pricing-page .pricing-banner h4 {
        margin: 40px 0; 
    }
}

@media (max-width: 991px) {
    .pricing-page .pricing-banner img {
        display: none;
    }
}

@media (max-width: 1200px) { 
    .pricing-banner > div {
        padding: 40px; 
    }
    .pricing-page .pricing-banner svg {
        width: 220px;
        height: 60px;
    }
    .pricing-page #pricingApp .pricing-banner h2,
    .pricing-page #pricingApp .pricing-banner h2 span {
        font-size: 45px;
        line-height: 55px;
    }
    .pricing-page .pricing-banner h4, 
    .pricing-page .pricing-banner h4 span {
        font-size: 30px;
        line-height: 40px;
    }
    .pricing-page .pricing-banner h4 {
        margin: 30px 0;
    }
}

@media (max-width: 640px) {
    .pricing-banner > div {
        margin: 25px 0;
        padding: 25px; 
        border-radius: 30px; 
    }
    .pricing-page .pricing-banner svg { 
        width: 180px;
        height: 45px;
    }
    .pricing-page #pricingApp .pricing-banner h2,
    .pricing-page #pricingApp .pricing-banner h2 span { 
        font-size: 40px;
        line-height: 50px;
    }
    .pricing-page .pricing-banner h4, 
    .pricing-page .pricing-banner h4 span {
        font-size: 30px;
        line-height: 40px;
    }
        .pricing-page .pricing-banner h4 { 
            margin: 15px 0; 
        }
}

.impersonate {
    position: fixed; 
    top: 75px; 
    right: 55px; 
    display: flex; 
    justify-content: right; 
    max-width: calc(100% - 30px); 
    word-break: break-all; 
    z-index: 10000; 
}

    .impersonate a {
        font-size: 13px;
        color: #fff;
        text-decoration: none;
        padding: 2px 10px;
        border-radius: 10px;
        background: #0d6efd; 
    }

        .impersonate a span { 
            color: #eee; 
        } 

        @media (max-width: 1024px) {
            .impersonate {
            right: 32px; 
        }
    }
    
    @media (max-width: 767px) {
        .impersonate {
            top: 55px; 
            right: 15px;  
        }
    }

.thanks-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 600px;
    max-width: calc(100% - 20px);
    border-radius: 10px;
    padding: 50px 30px;
    background: #ffffff;
}

    .thanks-box .tick-green {
        width: 100%; 
        display: flex;
        justify-content: center;
        margin: 15px 0;
    }

    .thanks-box h2 {
        width: 100%;
        font-size: 28px;
        line-height: 1.2;
        font-family: "Archivo-Semibold", sans-serif;
        color: #3db33d;
        margin: 0 0 10px;  
        text-align: center;  
    }

    .thanks-box .text-para p {  
        font-size: 16px; 
        line-height: 1.2;  
        font-family: 'Inter-Medium', sans-serif;  
        color: #222;  
        margin: 0;  
        text-align: center; 
    } 

    @media (max-width: 767px) {
        .thanks-box {
            padding: 30px; 
        }
    }
    

/* verify phone number animation */

.vp-bg-orange-lt {
    background: #f9af5e;
}

.vp-bg-gray-dark {
    background: #808080;
}

/*@keyframes verifyPhoneAnimation {
    0% {
        background: #f9af5e; 
    }

    100% {
        background: #d4740c; 
    }
}

#verifyPhNo.vp-bg-orange-lt {
    animation-name: verifyPhoneAnimation !important;
    animation-duration: 0.5s !important;
    animation-timing-function: ease !important; 
    animation-delay: 0s !important; 
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important; 
}*/

.address-help-tooltip .tooltip-inner img {
    margin: 5px 0 0;
}

.addressTooltip svg,
.cityTooltip svg { 
    color: #444;
}

@media (min-width: 350px) {
    .jrmobilelabel br {
        display: none;
    }
}

.address-field label {
    max-width: calc(100% - 30px); 
}

#verifyPhNo i {
    display: none;
}

@media (min-width: 641px) {
    .text-md {
        display: none; 
    }
}

@media (max-width: 640px) {
    #verifyPhNo.verfiy-phone-registration {
        display: inline-block;
        float: right; 
        position: static;
        padding: 5px 10px;
        color: #222;
        border: 0;
        width: auto;
        border-radius: 10px !important;
        margin: 10px 0 0; 
    }
        #verifyPhNo.verfiy-phone-registration.vp-bg-gray-dark {
            background: #eee !important;  
        }
        .verify-phone-code {
            margin: 45px 0 0 !important; 
            background: rgba(0, 0, 255, 0.1);
            border-radius: 10px;
            padding: 10px;
        }
    .phoneVerifyCode {
        right: 8px;
    }
    .form-control.rounded-pill.otp-field-regisration {
        border-right: 0 !important;
    }
    .verfied-phone-registration {
        display: none; 
    }
    .mb-sm-5 {
        margin-bottom: 2rem !important; 
    }
    #verifyPhNo.verified-success {
        color: #fff;
        background: #18891C;
    }
    #verifyPhNo.verified-success i {
        display: inline-block;
    }
    .verify-phone-field .error {
        margin: 5px 0 0; 
    }
    .verify-phone-field .phone-number-check-registration {
        margin: 5px 0 0 !important;
    }    
}

@media (min-width: 1200px) {
    .signup-box {
        min-width: 900px; 
    }
}

.body-employee-dashboard #blogsTab .modal-content,
.body-employee-dashboard #msgModal .modal-content { 
    background: #fff;
}

.body-employee-dashboard #blogsTab .modal-body,
.body-employee-dashboard #msgModal .modal-body {
    padding: 15px;
}


/* _content/ZipRoles/Views/Shared/_Layout_en.cshtml.rz.scp.css */
/* _content/ZipRoles/Views/Shared/_Layout_es.cshtml.rz.scp.css */

.mx-icon-left:before, .mx-icon-right:before, .mx-icon-double-left:before, .mx-icon-double-right:before, .mx-icon-double-left:after, .mx-icon-double-right:after {
    content: "";
    position: relative;
    top: -1px;
    display: inline-block;
    width: 10px;
    height: 10px;
    vertical-align: middle;
    border-style: solid;
    border-color: currentColor;
    border-width: 2px 0 0 2px;
    border-radius: 1px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(-45deg) scale(0.7);
    transform: rotate(-45deg) scale(0.7)
}

.mx-icon-double-left:after {
    left: -4px
}

.mx-icon-double-right:before {
    left: 4px
}

.mx-icon-right:before, .mx-icon-double-right:before, .mx-icon-double-right:after {
    -webkit-transform: rotate(135deg) scale(0.7);
    transform: rotate(135deg) scale(0.7)
}

.mx-btn {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 15px;
    margin: 0;
    cursor: pointer;
    background-color: transparent;
    outline: none;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 4px;
    color: #73879c;
    white-space: nowrap
}

    .mx-btn:hover {
        border-color: #1284e7;
        color: #1284e7
    }

    .mx-btn:disabled, .mx-btn.disabled {
        color: #ccc;
        cursor: not-allowed
    }

.mx-btn-text {
    border: 0;
    padding: 0 4px;
    text-align: left;
    line-height: inherit
}

.mx-scrollbar {
    height: 100%
}

    .mx-scrollbar:hover .mx-scrollbar-track {
        opacity: 1
    }

.mx-scrollbar-wrap {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto
}

.mx-scrollbar-track {
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    width: 6px;
    z-index: 1;
    border-radius: 4px;
    opacity: 0;
    -webkit-transition: opacity .24s ease-out;
    transition: opacity .24s ease-out
}

    .mx-scrollbar-track .mx-scrollbar-thumb {
        position: absolute;
        width: 100%;
        height: 0;
        cursor: pointer;
        border-radius: inherit;
        background-color: rgba(144,147,153,.3);
        -webkit-transition: background-color .3s;
        transition: background-color .3s
    }

.mx-zoom-in-down-enter-active, .mx-zoom-in-down-leave-active {
    opacity: 1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition: opacity .3s cubic-bezier(0.23, 1, 0.32, 1),-webkit-transform .3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: opacity .3s cubic-bezier(0.23, 1, 0.32, 1),-webkit-transform .3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1),opacity .3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1),opacity .3s cubic-bezier(0.23, 1, 0.32, 1),-webkit-transform .3s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform-origin: center top;
    transform-origin: center top
}

.mx-zoom-in-down-enter, .mx-zoom-in-down-enter-from, .mx-zoom-in-down-leave-to {
    opacity: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0)
}

.mx-datepicker {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .mx-datepicker svg {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden
    }

.mx-datepicker-range {
    width: 320px
}

.mx-datepicker-inline {
    width: auto
}

.mx-input-wrapper {
    position: relative
}

.mx-input {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 45px;
    padding: 6px 30px;
    padding-left: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50rem !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
}

    .mx-input:hover, .mx-input:focus {
        /*border-color: #409aff*/
    }

    .mx-input:disabled, .mx-input.disabled {
        color: #ccc;
        background-color: #f3f3f3;
        border-color: #ccc;
        cursor: not-allowed
    }

    .mx-input:focus {
        outline: none
    }

    .mx-input::-ms-clear {
        display: none
    }

.mx-icon-calendar, .mx-icon-clear {
    position: absolute;
    top: 45%;
    right: 8px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1;
    color: rgba(0,0,0,.5);
    vertical-align: middle
}

.mx-icon-clear {
    cursor: pointer
}

    .mx-icon-clear:hover {
        color: rgba(0,0,0,.8)
    }

.mx-datepicker-main {
    font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei",sans-serif;
    color: #73879c;
    background-color: #fff;
    border: 1px solid #e8e8e8
}

.mx-datepicker-popup {
    position: absolute;
    margin-top: 1px;
    margin-bottom: 1px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    z-index: 2001
}

.mx-datepicker-sidebar {
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100px;
    padding: 6px;
    overflow: auto
}

    .mx-datepicker-sidebar + .mx-datepicker-content {
        margin-left: 100px;
        border-left: 1px solid #e8e8e8
    }

.mx-datepicker-body {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.mx-btn-shortcut {
    display: block;
    padding: 0 6px;
    line-height: 24px
}

.mx-range-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media(max-width: 750px) {
    .mx-range-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.mx-datepicker-header {
    padding: 6px 8px;
    border-bottom: 1px solid #e8e8e8
}

.mx-datepicker-footer {
    padding: 6px 8px;
    text-align: right;
    border-top: 1px solid #e8e8e8
}

.mx-calendar {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 248px;
    padding: 6px 12px
}

    .mx-calendar + .mx-calendar {
        border-left: 1px solid #e8e8e8
    }

.mx-calendar-header, .mx-time-header {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 34px;
    line-height: 34px;
    text-align: center;
    overflow: hidden
}

.mx-btn-icon-left, .mx-btn-icon-double-left {
    float: left
}

.mx-btn-icon-right, .mx-btn-icon-double-right {
    float: right
}

.mx-calendar-header-label {
    font-size: 14px
}

.mx-calendar-decade-separator {
    margin: 0 2px
}

    .mx-calendar-decade-separator:after {
        content: "~"
    }

.mx-calendar-content {
    position: relative;
    height: 224px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

    .mx-calendar-content .cell {
        cursor: pointer
    }

        .mx-calendar-content .cell:hover {
            color: #73879c;
            background-color: #f3f9fe
        }

        .mx-calendar-content .cell.active {
            color: #fff;
            background-color: #1284e7
        }

        .mx-calendar-content .cell.in-range, .mx-calendar-content .cell.hover-in-range {
            color: #73879c;
            background-color: #dbedfb
        }

        .mx-calendar-content .cell.disabled {
            cursor: not-allowed;
            color: #ccc;
            background-color: #f3f3f3
        }

.mx-calendar-week-mode .mx-date-row {
    cursor: pointer
}

    .mx-calendar-week-mode .mx-date-row:hover {
        background-color: #f3f9fe
    }

    .mx-calendar-week-mode .mx-date-row.mx-active-week {
        background-color: #dbedfb
    }

    .mx-calendar-week-mode .mx-date-row .cell:hover {
        color: inherit;
        background-color: transparent
    }

    .mx-calendar-week-mode .mx-date-row .cell.active {
        color: inherit;
        background-color: transparent
    }

.mx-week-number {
    opacity: .5
}

.mx-table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center
}

    .mx-table th {
        padding: 0;
        font-weight: 500;
        vertical-align: middle
    }

    .mx-table td {
        padding: 0;
        vertical-align: middle
    }

.mx-table-date td, .mx-table-date th {
    height: 32px;
    font-size: 12px
}

.mx-table-date .today {
    color: #2a90e9
}

.mx-table-date .cell.not-current-month {
    color: #ccc;
    background: none
}

.mx-time {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 224px;
    background: #fff
}

    .mx-time + .mx-time {
        border-left: 1px solid #e8e8e8
    }

.mx-calendar-time {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.mx-time-header {
    border-bottom: 1px solid #e8e8e8
}

.mx-time-content {
    height: 224px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden
}

.mx-time-columns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.mx-time-column {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    border-left: 1px solid #e8e8e8;
    text-align: center
}

    .mx-time-column:first-child {
        border-left: 0
    }

    .mx-time-column .mx-time-list {
        margin: 0;
        padding: 0;
        list-style: none
    }

        .mx-time-column .mx-time-list::after {
            content: "";
            display: block;
            height: 192px
        }

    .mx-time-column .mx-time-item {
        cursor: pointer;
        font-size: 12px;
        height: 32px;
        line-height: 32px
    }

        .mx-time-column .mx-time-item:hover {
            color: #73879c;
            background-color: #f3f9fe
        }

        .mx-time-column .mx-time-item.active {
            color: #1284e7;
            background-color: transparent;
            font-weight: 700
        }

        .mx-time-column .mx-time-item.disabled {
            cursor: not-allowed;
            color: #ccc;
            background-color: #f3f3f3
        }

.mx-time-option {
    cursor: pointer;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 20px
}

    .mx-time-option:hover {
        color: #73879c;
        background-color: #f3f9fe
    }

    .mx-time-option.active {
        color: #1284e7;
        background-color: transparent;
        font-weight: 700
    }

    .mx-time-option.disabled {
        cursor: not-allowed;
        color: #ccc;
        background-color: #f3f3f3
    }