@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
/* Global style
------------------------------------ */
:root {
    --bs-success-rgb: 119, 189, 76;
    --bs-danger-rgb: 242, 77, 76;
    --bs-warning-rgb: 233, 189, 12;
    --bs-info-rgb: 0, 145, 247;
    --bs-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}


html {
    font-size: 16px;
}

body {
    font-family: 'Lato', sans-serif;
    color: #505050;
    font-size: 1rem;
    margin: 0;
    padding: 0;
    font-weight: 400;
    background: #F7F9FB;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #2B2D3B;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

h1 {
    font-size: 28px;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 20px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
}

a:hover,
a:focus {
    text-decoration: none;
    color: #000;
}

a {
    color: #454545;
    cursor: pointer;
    text-decoration: none;
}

img {
    max-width: 100%;
}

ol,
ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.c_blue {
    color: #216fa4;
}

.btn,
.btn:focus {
    background: #77cb51;
    color: #fff;
    padding: 6px 20px;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.06em;
    border-radius: 6px;
    text-align: center;
    transition: all ease 0.4s;
    border: 0px solid transparent;
    background: linear-gradient(to bottom, #7acf53 0%,#56963f 100%);
}

    .btn:hover,
    .btn:active {
        color: #fff;
        background: linear-gradient(to bottom, #56963f 0%,#7acf53 100%);
    }

label.c_radio input[type="radio"],
label.c_checkbox input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

label.c_checkbox,
label.c_radio {
    position: relative;
    margin: 0 20px 5px 0 !important;
    cursor: pointer;
}

    label.c_radio span,
    label.c_checkbox span {
        padding-left: 30px;
        position: relative;
        display: block;
        padding-top: 1px;
    }

        label.c_radio span:before, label.c_checkbox span:before {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            height: 20px;
            width: 20px;
            border-radius: 50px;
            background: #3b4046;
            /* border: 1px solid rgb(255 255 255 / 50%); */
        }

    label.c_radio input[type="radio"]:checked + span:before, label.c_checkbox input[type="checkbox"]:checked + span:before {
        border: 5px solid #3b4046;
        background: #dbdee7;
        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
    }

    label.c_checkbox span:before {
        border-radius: 4px;
    }

    label.c_checkbox input[type="checkbox"]:checked + span:before {
        border: 0px solid #dbdee7;
        background-color: #dbdee7;
        background-image: url('../images/checkbox-check.svg');
        background-repeat: no-repeat;
        background-position: center;
    }

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1500px;
    padding: 0 20px;
}

.form-group {
    margin: 0 0 18px;
}

.form-control,
.form-select {
    height: 37px;
    outline: none;
    box-shadow: none;
}

    .form-control:focus,
    .form-select:focus {
        outline: none;
        box-shadow: none;
    }

.form-group label {
    color: #656d9a;
    margin-bottom: 4px;
    font-weight: 500;
}

.form-control:focus,
.form-select:focus {
    border-color: #77bd4c;
}

form .btn {
    height: 37px;
}

.card-title {
    margin-bottom: 0;
}

.modal-backdrop.show {
    opacity: 0.7;
}


/* Loader style
===================================================== */
.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.8); /* Optional background color */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; /* Ensure it covers other content */
}

.spinner {
    animation: rotate 2s linear infinite;
    width: 50px;
    height: 50px;
}

.path {
    stroke: #77cb51; /* Color of the spinner */
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}



/* Header style
===================================================== */
header.main_header {
    position: relative;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: 0 3px 4px rgba(142,134,171,.1);
}

nav.navbar {
    padding: 0px 0;
    min-height: 65px;
}

ul.navbar-nav {
    padding: 0px 0 0;
    flex: 1;
}

.navbar-brand img {
    width: 300px;
    height: auto;
    object-fit: contain;
}

ul.navbar-nav > li {
    margin: 0 0 0 25px;
    position: relative;
    padding: 14px 0;
}

    ul.navbar-nav > li:first-child {
        margin-left: 0px;
    }

    ul.navbar-nav > li > a {
        font-weight: 500;
        /* text-transform: uppercase; */
        color: #302c4d;
    }

        ul.navbar-nav > li > a.active {
            color: #77cb51;
        }

ul.navbar-nav li.active > a {
    color: #fff;
}

.dropdown-menu.dropdown-menu-right {
    left: auto;
    right: 0;
    border: 0;
    box-shadow: 0 4px 16px rgb(0 0 0 / 14%);
    top: 35px;
    background-color: #ffffff;
}

    .dropdown-menu.dropdown-menu-right a {
        padding: 6px 15px;
        color: #302c4d;
    }

ul.sub_menu_list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 150px;
    background: #fff;
    margin: 0;
    padding: 8px 0px;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgb(0 0 0 / 14%);
    display: none;
    z-index: 1000;
}

.s_menu_toggle {
    display: none;
}

ul.sub_menu_list li {
    margin: 0;
}

    ul.sub_menu_list li a {
        padding: 5px 15px;
        display: block;
    }

        ul.sub_menu_list li a:hover, .dropdown-menu.dropdown-menu-right a:hover {
            text-decoration: none;
            background-color: #302c4d;
            color: #fff;
        }

ul.sub_menu_list:before,
.dropdown-menu.dropdown-menu-right:before {
    display: block;
    content: "";
    position: absolute;
    top: -8px;
    left: 10px;
    border-style: solid;
    border-width: 0 8px 10px 8px;
    border-color: transparent transparent #ffffff transparent;
}

.dropdown-menu.dropdown-menu-right:before {
    left: auto;
    right: 10px;
}

.user_avtar {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    border-radius: 50px;
    margin: 0 6px 0 0;
    /* overflow: hidden; */
    border: 2px solid #bdbfc5;
    BOX-SHADOW: 0 4px 6px rgb(0 0 0 / 10%);
}

    .user_avtar img {
        height: 100%;
        width: 100%;
        border-radius: 50px;
        object-fit: cover;
    }

.menu_wrap {
    width: calc(100% - 180px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

a.navbar-brand {
    margin-right: 20px;
    padding: 8px 0;
}

.header_right {
    flex: 1;
    justify-content: space-between;
}

ul.navbar-nav li > a i.fa-cog {
    margin-left: 3px;
    font-size: 16px;
    color: #216fa4;
    animation: rotation 4s infinite linear;
    -webkit-animation: rotation 4s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
    }
}

@-webkit-keyframes rotation {
    from {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
    }
}

.menu_right_block {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: inherit;
    padding: 6px 0;
}

    .menu_right_block .userDropdown,
    .userDropdown {
        margin-left: 20px;
    }

        .menu_right_block .userDropdown .dropdown-toggle,
        .userDropdown .dropdown-toggle {
            display: flex;
            align-items: center;
        }

.menuToggle {
    margin: 0 0 0 10px;
    padding: 5px 5px;
    font-size: 18px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .menuToggle span {
        height: 2px;
        width: 100%;
        background: #302c4d;
        display: block;
        margin: 3px 0;
        transition: all ease 0.4s;
    }

body.menu_expanded .menuToggle {
    position: relative;
    z-index: 99990;
}

    body.menu_expanded .menuToggle span:nth-child(2) {
        display: none;
    }

    body.menu_expanded .menuToggle span:first-child {
        transform: rotate(45deg);
        transform-origin: 8px 1px;
    }

    body.menu_expanded .menuToggle span:last-child {
        transform: rotate(-45deg);
        transform-origin: 6px 0px;
    }

.menu_wrap .dropdown-toggle > span {
    max-width: 60px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.searchToggle.active {
    background: rgb(33 111 164 / 100%);
    color: #fff;
}

.menu_right_block .userDropdown .dropdown-toggle::after,
.userDropdown .dropdown-toggle::after,
ul.navbar-nav .dropdown > a::after {
    display: none;
}

.menu_right_block .userDropdown svg,
.userDropdown svg {
    margin-left: 12px;
}

.menu_right_block .userDropdown .dropdown-toggle,
.userDropdown .dropdown-toggle {
    font-weight: 500;
}

ul.navbar-nav > li.dropdown > a {
    display: flex;
    align-items: center;
}

ul.navbar-nav .dropdown > a svg {
    margin-left: 12px;
}

    ul.navbar-nav .dropdown > a svg path,
    .menu_right_block .userDropdown svg path,
    .userDropdown svg path {
        fill: #302c4d;
    }

ul.navbar-nav > li .dropdown-menu.dropdown-menu-right {
    top: 100%;
}

.exit_app_btn {
    background: linear-gradient(360deg, #000000 2.26%, rgb(0 0 0 / 67%) 98.36%);
    padding: 7px 15px;
    display: block;
    box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.25);
    margin-right: 30px;
    white-space: nowrap;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
    color: #FFFFFF;
    letter-spacing: 0;
    border-radius: 4px;
    border: 0px;
}

    .exit_app_btn:hover {
        background: linear-gradient(360deg, rgb(0 0 0 / 67%) 2.26%, #000000 98.36%);
    }

    .exit_app_btn:focus {
        color: #fff !important;
    }

.navbar_nav_right {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.exit_app_btn svg {
    margin-right: 5px;
}

.menu_right_block .userDropdown .dropdown-toggle span,
.userDropdown .dropdown-toggle span {
    max-width: 90px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #302c4d;
}

ul.navbar-nav .dropdown-toggle {
    font-weight: 500;
    color: #bdbfc5;
}

nav.navbar {
    flex-wrap: nowrap;
}
/* landing page style start here
------------------------------------------------------ */
.page_head h2 {
    font-size: 20px;
    margin: 0;
    font-weight: 500;
}

.page_head {
    padding: 15px 0 15px 0;
    margin: 0 0 20px;
    border-bottom: 1px solid rgb(255 255 255 / 4%);
}




.coming_soon_sec h1 {
    font-size: 45px;
    text-transform: uppercase;
    letter-spacing: 20px;
    color: #fff;
}

body {
}

.coming_soon_sec {
    min-height: calc(100vh - 63px);
    background-color: #302c4d;
}


/* Login page style */
.login_wrap {
    padding: 35px 0;
    min-height: calc(100vh - 65px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login_inner {
    max-width: 500px;
    margin: 0 auto;
    background: #fff;
    margin: 0px auto;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 3px 16px rgba(142,134,171,.05);
}

.login_wrap .container-fluid {
    position: relative;
    z-index: 99;
}

.site_logo {
    max-width: 200px;
}

.login_box h3 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 26px;
    line-height: 30px;
    text-align: center;
    color: #000000;
    position: relative;
    margin: 0 0 20px;
}

    .login_box h3:after {
        display: block;
        content: "";
        width: 50px;
        height: 2px;
        background: #000000;
        margin: 15px auto 0;
    }

.login_box .form-control {
    background: #fff;
    border-radius: 6px;
    border: 0;
    height: 42px;
    padding: 5px 15px;
    outline: none;
    box-shadow: none;
    border: 2px solid #e2e7f1;
    color: #2b2d3b;
}

    .login_box .form-control:focus {
        border-color: #77bd4c;
    }

.login_inner label.f_label {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    color: #555555;
    padding: 0 0 5px 12px;
    margin: 0;
}

.login_inner .form-group {
    margin: 0 0 20px;
}

.forgotPasswordToggle {
    text-decoration: none;
}

.login_inner .btn {
    width: 100%;
    border-radius: 6px;
    height: 42px;
    padding: 12px 15px;
    font-weight: 500;
    transition: all ease 0.4s;
    border: 0px;
}

.login_inner .loginToggle {
    margin: 20px 0 0;
}

    .login_inner .loginToggle i {
        margin-right: 10px;
    }

.login_inner .rememberMeDiv {
    justify-content: flex-end;
    margin: 0 0 25px;
}

    .login_inner .rememberMeDiv a {
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #302c4d;
    }

input.form-control::-webkit-input-placeholder {
    color: #96A0BC;
    opacity: 1;
}

input.form-control:-moz-placeholder {
    color: #96A0BC;
    opacity: 1;
}

input.form-control::-moz-placeholder {
    color: #96A0BC;
    opacity: 1;
}

input.form-control:-ms-input-placeholder {
    color: #96A0BC;
    opacity: 1;
}

input.form-control::-ms-input-placeholder {
    color: #96A0BC;
    opacity: 1;
}

input.form-control::placeholder {
    color: #96A0BC;
    opacity: 1;
}

.create_account_text {
    margin: 23px 0 0;
}

    .create_account_text h5 {
        text-align: center;
        font-size: 14px;
        font-weight: normal;
        margin: 0 0 0;
    }

        .create_account_text h5 a {
            color: #6fbb44;
            cursor: pointer;
            text-decoration: underline !important;
        }

.message_body button.btn-close {
    position: absolute;
    right: 0;
    top: 10px;
    right: 10px;
}

.message_body {
    padding: 0;
    margin: 0px 0 0;
    padding: 2rem;
    position: relative;
}

    .message_body:after {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        bottom: -12px;
        height: 12px;
        background: #7acf53;
        width: 84%;
        border-radius: 0 0 12px 12px;
        left: 8%;
    }

    .message_body span.check_icon {
        height: 60px;
        width: 60px;
        border-radius: 50px;
        background: #7acf53;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        margin: -58px auto 20px;
        font-size: 20px;
        box-shadow: 0 15px 40px #7acf5361;
    }

    .message_body p {
        color: #96a0b5;
    }


.svgContainer {
    position: relative;
    width: 175px;
    height: 175px;
    margin: 0 auto 30px;
    border-radius: 50%;
    pointer-events: none;
    border: 2px solid #69b639;
    background: #f0fff1;
    overflow: hidden;
}

    .svgContainer .svgContainerInner {
        position: relative;
        width: 100%;
        height: 0;
        overflow: hidden;
        border-radius: 50%;
        padding: 17px 23px 100%;
    }

        .svgContainer .svgContainerInner img {
            max-width: 100%;
        }

.cloud_character {
    position: relative;
    width: 497px;
    min-width: 497px;
    max-width: 467px;
    margin: 0 auto;
}

.eyeBlock {
    background: #0d3341;
    height: 18px;
    width: 84px;
    position: absolute;
    top: 40px;
    right: 118px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .eyeBlock span {
        display: block;
        height: 11px;
        width: 11px;
        /*background: #fff;*/
        border-radius: 50px;
        margin: 0 25px 0 0;
        position: relative;
    }

        .eyeBlock span:last-child {
            margin: 0px 0 0 23px;
        }

        .eyeBlock span:after,
        .eyeBlock span:before {
            display: block;
            position: absolute;
            left: 0;
            content: "";
            top: 0;
            height: 100%;
            width: 100%;
            background: #fff;
            border-radius: 50px;
        }

        .eyeBlock span:before {
            height: 2px;
            top: 4px;
            width: 9px;
            left: 1px;
            opacity: 0.4;
        }

        #eyeopened, #eyeopened2, .eyeBlock span:after {
            animation: blink 4s infinite;
            -webkit-animation: blink 4s infinite;
        }

@keyframes blink {
    0%, 100% {
        opacity: 0;
    }

    5%, 95% {
        opacity: 1;
    }
}

@-webkit-keyframes blink {
    0%, 100% {
        opacity: 0;
    }

    5%, 95% {
        opacity: 1;
    }
}

.my_profile_wrap {
    border-radius: 10px;
    overflow: hidden;
    margin: 30px 0 !important;
}

#downhead {
    display: none;
}

.inputClicked g#uphead {
    display: none;
}

.inputClicked #downhead {
    display: block;
}

g#handUp,
.passwordClicked g#hand-grip,
.inputChecked g#hand-grip {
    display: none;
}

g#see_eye_hand {
    display: none;
}

.passwordClicked g#handUp,
.inputChecked g#handUp,
.inputChecked g#see_eye_hand {
    display: block;
}

    .inputChecked g#handUp #right-hand {
        display: none;
    }

.svgContainer.forgot_svg .svgContainerInner svg {
    /* height: 162px; */
}

.svgContainer.forgot_svg .svgContainerInner {
    padding: 17px 10px 100%;
}

g#eyes_right {
    display: none;
}

g#eyes_left {
    display: none;
}

.forgot_password_open .svgContainer.login_svg {
    opacity: 0;
    visibility: inherit;
    position: absolute;
}

.display-none {
    display: none !important;
}

.forgot_password_open .svgContainer.forgot_svg {
    display: block !important;
}

g#eyes_center {
    animation: blink 4s infinite;
    -webkit-animation: blink 4s infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 0;
    }

    5%, 95% {
        opacity: 1;
    }
}

@-webkit-keyframes blink {
    0%, 100% {
        opacity: 0;
    }

    5%, 95% {
        opacity: 1;
    }
}

.passwordDiv {
    position: relative;
}

    .passwordDiv label.custom_checkbox {
        max-width: inherit;
        display: inline-block;
        position: absolute;
        right: 15px;
        margin: 0;
        top: 7px;
        z-index: 1;
    }

        .passwordDiv label.custom_checkbox span:after {
            display: none;
        }

        .passwordDiv label.custom_checkbox span {
            font-size: 18px;
            padding: 0;
            color: #666;
            height: 27px;
            width: 27px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .passwordDiv label.custom_checkbox span i.fa-eye {
                display: none;
            }

label.custom_checkbox input {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    opacity: 0;
    z-index: 9;
    margin: 0;
}

.passwordDiv label.custom_checkbox input[type="checkbox"]:checked + span i.fa-eye {
    display: block;
}

.passwordDiv label.custom_checkbox input[type="checkbox"]:checked + span i.fa-eye-slash {
    display: none;
}


.page_head h2 {
    font-size: 20px;
    margin: 0;
}

.page_head {
    padding: 15px 0 15px 0;
    margin: 0 0 20px;
    border-bottom: 1px solid rgb(48 44 77 / 10%);
}
/* breadcrumbs */
.breadcrumbs_wrap {
    background: #fff;
    padding: 6px 0;
    box-shadow: 0px 2px 12px #E6E0FE;
}

.breadcrumbs_block ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

    .breadcrumbs_block ul li {
        margin: 0 28px 0 0;
        font-weight: 400;
        font-size: 13px;
        line-height: 21px;
        text-transform: uppercase;
        position: relative;
    }

        .breadcrumbs_block ul li:last-child {
            margin-right: 0;
        }

        .breadcrumbs_block ul li:after {
            display: flex;
            content: "\f054";
            position: absolute;
            left: calc(100% + 3px);
            top: 0;
            height: 20px;
            width: 20px;
            font-family: 'FontAwesome';
            font-size: 9px;
            justify-content: center;
        }

        .breadcrumbs_block ul li:last-child:after {
            content: none;
        }

        .breadcrumbs_block ul li a {
            display: flex;
        }

            .breadcrumbs_block ul li a i {
                font-size: 17px;
                margin-right: 5px;
                line-height: 1;
            }

            .breadcrumbs_block ul li a svg {
                margin-right: 5px;
            }

                .breadcrumbs_block ul li a svg path {
                    fill: #027dff;
                }

        .breadcrumbs_block ul li a {
            color: #6ebc4c;
        }

.card {
    -webkit-box-shadow: 0 3px 16px rgba(142, 134, 171, .05);
    box-shadow: 0 3px 16px rgba(142, 134, 171, .05);
    border: none;
    margin-bottom: 1.5rem;
}

.card-header {
    background: #fff;
    border-bottom: 1px solid #e2e7f1;
    padding: 1.5rem;
}

.card-body {
    background: #fff;
    border: 0;
    padding: 1.5rem;
}


.avatar-upload {
    position: relative;
    max-width: 225px;
    margin: 0px auto 20px;
}

    .avatar-upload .avatar-edit {
        position: static;
        right: 12px;
        z-index: 1;
        display: flex;
        justify-content: center;
        margin: 0 0 0;
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

        .avatar-upload .avatar-edit span {
            color: #96a0b5;
            font-size: 13px;
        }

        .avatar-upload .avatar-edit input {
            display: none;
        }

            .avatar-upload .avatar-edit input + label {
                display: inline-block;
                margin-bottom: 0;
                cursor: pointer;
                font-weight: normal;
                transition: all 0.2s ease-in-out;
                align-items: center;
                justify-content: center;
                padding: 8px 20px;
            }

    .avatar-upload .avatar-preview {
        width: 200px;
        height: 200px;
        position: relative;
        border-radius: 100%;
        border: 6px solid #f8f8f8;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
        margin: 0 auto 20px;
    }

        .avatar-upload .avatar-preview > div {
            width: 100%;
            height: 100%;
            border-radius: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }


.toast {
    max-width: calc(100% - 2rem);
}

.toast_div .show-toast {
    cursor: pointer;
    text-decoration: underline;
}

section.privacy_page .container {
    /* max-width: 1000px; */
}

section.privacy_page {
    padding: 30px 0;
}

.privacy_page_inner {
    padding: 30px;
    background: #fff;
    border-radius: 30px;
    margin: 0 0 30px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgb(56 111 31 / 4%);
}

.privacy_page h4 {
    font-weight: bold;
    margin: 0px 0 10px;
    position: relative;
    display: inline-block;
}

    .privacy_page h4 span {
        z-index: 1;
        position: relative;
    }

.privacy_page p {
    margin: 0 0 30px;
}

.privacy_page ul li {
    margin: 0 0 10px;
}

.privacy_page ul {
    margin: 0 0 30px;
    list-style: disc;
    padding: 0 0 0 20px;
}

.privacy_page strong {
    color: #2B2D3B;
    font-weight: bold;
}

.privacy_page h4:after {
    display: block;
    content: "";
    height: 8px;
    width: 100%;
    background: rgb(119 203 81 / 20%);
    bottom: 0;
    margin: 0;
    position: absolute;
    z-index: 0;
}
/* My Responsive style
===================================================== */
@media (min-width: 1200px) {
    ul.navbar-nav {
        align-items: center;
    }
}

@media (min-width: 1450px) {
    .container-fluid {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 1449px) {
    ul.navbar-nav > li {
        margin: 0 0 0 20px;
    }
}


@media (max-width: 1300px) {
    .exit_app_btn {
        margin-right: 15px;
    }
}


@media screen and (max-width: 1199px) {
    .login_btns {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
    }

        .login_btns .btn {
            width: 100%;
        }

    .header_right {
        min-width: 120px;
    }

    a.navbar-brand {
        max-width: calc(100% - 120px);
        width: 100%;
    }

    .navbar_nav_right {
        flex-direction: column;
    }

        .navbar_nav_right .exit_app_btn {
            width: 100%;
            border-radius: 0;
            margin: 0;
            box-shadow: none;
        }

        .navbar_nav_right > .dropdown {
            width: 100%;
        }

            .navbar_nav_right > .dropdown a.dropdown-toggle {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

    .sub_menu .nav-tabs li.nav-item {
        margin: 0 15px 0 0;
    }

        .sub_menu .nav-tabs li.nav-item:last-child {
            margin: 0;
        }

    ul.navbar-nav li {
        margin: 0 0 10px !important;
    }

    .menu_right_block {
        min-width: initial;
        margin-left: auto;
    }

        .menu_right_block .userDropdown,
        .userDropdown {
            margin-left: 15px;
        }

    .menu_wrap {
        position: fixed;
        right: -100%;
        left: auto;
        width: 300px;
        background: #fff;
        height: 100%;
        top: 0;
        padding: 86px 0px 60px;
        overflow: auto;
        box-shadow: 0 0 30px rgb(0 0 0 / 15%);
        transition: all ease 0.4s;
        -webkit-transition: all ease 0.4s;
        opacity: 0;
        z-index: 9999;
        display: block;
    }

    body.menu_expanded .menu_wrap {
        right: 0px;
        opacity: 1;
    }

    ul.navbar-nav {
        margin: 0px;
    }

        ul.navbar-nav li a {
            padding: 12px 20px;
            display: block;
        }

        ul.navbar-nav li {
            margin: 0 0 0px !important;
            border-bottom: 1px solid rgb(255 255 255 / 9%);
            padding: 0;
        }

            ul.navbar-nav li:first-child {
                border-top: 1px solid rgb(255 255 255 / 9%);
            }

    ul.sub_menu_list {
        position: static;
        box-shadow: none;
        width: 100%;
        padding: 0;
        background: #f3f3f3;
    }

        ul.sub_menu_list:before {
            display: none;
        }

        ul.sub_menu_list li {
            border: 0 !important;
        }

            ul.sub_menu_list li a {
                padding: 8px 30px;
            }

    span.s_menu_toggle {
        height: 45px;
        width: 40px;
        position: absolute;
        right: 0;
        top: 0;
        background: transparent;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        display: flex;
        pointer-events: none;
    }

        span.s_menu_toggle:after {
            display: block;
            content: "\f067";
            font-family: 'FontAwesome';
            color: #555;
        }

        span.s_menu_toggle.active:after {
            content: "\f068";
        }

    ul.navbar-nav > li .dropdown-menu.dropdown-menu-right {
        top: 100%;
        box-shadow: none;
    }

        ul.navbar-nav > li .dropdown-menu.dropdown-menu-right:before {
            display: none;
        }

    ul.navbar-nav .dropdown > a svg {
        margin-left: auto;
    }

    li.has_menu ul.sub_menu {
        display: none;
        position: static;
        width: 100%;
        box-shadow: none;
    }

        li.has_menu ul.sub_menu:after {
            display: none;
        }

        li.has_menu ul.sub_menu > li {
            border: 0;
        }

    li.has_menu > a svg {
        display: none;
    }

    span.m_menu_toggle {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        height: 44px;
        width: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
        cursor: pointer;
        color: #fff;
    }

        span.m_menu_toggle svg path {
            fill: #bdbfc5;
        }

    li.has_menu.active span.m_menu_toggle {
        transform: rotate(-180deg);
    }
}

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

@media screen and (max-width: 767px) {
    .privacy_page h4 {
        padding-left: 10px;
    }

        .privacy_page h4:after {
            display: block;
            content: "";
            height: 21px;
            width: 6px;
            background: rgb(119 203 81 / 20%);
            bottom: auto;
            margin: 0;
            position: absolute;
            z-index: 0;
            left: 0;
            top: 0;
        }

    .privacy_page_inner {
        padding: 30px 20px;
    }

    .login_wrap {
        min-height: initial;
    }

    a.navbar-brand {
        margin-right: 10px;
    }

    .page_head h2 {
        font-size: 20px;
        margin: 0 0 8px;
        text-align: center;
    }

    .menu_right_block .userDropdown svg,
    .userDropdown svg {
        margin-left: 5px;
    }

    .toast_div {
        margin-top: 20px;
    }
}

@media (max-width: 575px) {
    .coming_soon_sec h1 {
        font-size: 28px;
        text-transform: uppercase;
        letter-spacing: 8px;
    }

    .login_inner {
        padding: 30px 25px;
    }

    .card-title {
        margin-bottom: 10px;
        text-align: center;
    }

    .breadcrumbs_block ul {
        justify-content: center;
    }
}



/* landing page style start here
========================================================================================= */
.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.btn.btn-outlined, .btn.btn-outlined:focus {
    background: transparent;
    border: 1px solid #77cb51;
    color: #77cb51;
}

.btn-solid, .btn-solid:focus {
    background: #77cb51;
    border-color: #77cb51;
    border: 1px solid #77cb51;
}

.btn.btn-lg {
    padding: 12px 20px;
    line-height: 1.4;
}

.btn.btn-outlined:hover,
.btn.btn-outlined:active,
.btn-solid:hover,
.btn-solid:active {
    color: #fff;
    background: #64b142;
    border-color: #64b142;
}

.c_green {
    color: #77cb51;
}

.container {
    margin: 0 auto;
    max-width: 100%;
    padding: 0 7%;
}

@media (max-width: 1550px) {
    .container {
        padding: 0 30px;
    }
}

@media (max-width: 1320px) {
    .container {
        padding: 0 20px;
    }
}

@media (max-width: 1199px) {
    .container {
        padding: 0 15px;
    }
}



/* Landing page top section style start here */
section.top_main_sec {
    padding: 60px 0;
}

.top_main_sec h1 {
    font-size: 60px;
    font-weight: 600;
    max-width: 790px;
    margin: 0 0 0px;
}

.top_main_sec h4 {
    font-size: 20px;
    color: #505050;
}

.top_main_left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
}

.start_free_btn {
    position: relative;
    border-color: #fff;
}

    .start_free_btn:after {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        opacity: 1;
        box-shadow: 0 0 0 rgba(119, 203, 81,0.60);
        animation: 2s infinite pulso;
        transition: .5s;
        content: "";
        position: absolute;
        border-radius: 6px;
        margin: auto;
        z-index: -1;
        pointer-events: none
    }

@keyframes pulso {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(119, 203, 81,0.80);
        box-shadow: 0 0 0 0 rgba(119, 203, 81,0.80)
    }

    70% {
        -moz-box-shadow: 0 0 0 20px rgba(119, 203, 81,0.0);
        box-shadow: 0 0 0 20px rgba(119, 203, 81,0.0);
    }

    100% {
        -moz-box-shadow: 0 0 0 20px rgba(119, 203, 81,0.0);
        box-shadow: 0 0 0 20px rgba(119, 203, 81,0.0);
    }
}


/* feature section style start here */
.features_sec {
    padding: 80px 0;
    background-color: #fff;
}

.features_list_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

    .features_list_wrap .features_item {
        flex: 0 0 calc(33.333% - 14px);
        max-width: calc(33.333% - 14px);
    }

.features_item .feature_item_icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block
}

.features_item a {
    display: flex;
    background: #f7f9fb;
    border-radius: 24px;
    padding: 30px 25px;
    flex-direction: column;
    gap: 10px;
    transition: .4s;
    align-items: flex-start;
    height: 100%;
    border: 1px solid #e6ebef;
    box-shadow: 0px 6px 20px rgb(56 111 31 / 0%);
    transition: all ease 0.4s;
}

    .features_item a:hover {
        box-shadow: 0 8px 24px rgb(56 111 31 / 10%);
        transform: translate(-0px, -3px);
        background: #fff;
    }

    .features_item a h4 {
        font-size: 18px;
        margin: 0;
        color: #000;
        line-height: 26px;
        font-weight: 700;
        position: relative;
        display: inline-block;
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

        .features_item a h4 span {
            display: block;
            position: relative;
            z-index: 1
        }

    .features_item a p {
        line-height: 25px;
        font-weight: 400;
        color: #505050;
    }

.feature_item_icon svg {
    height: 30px;
    width: 30px;
}

    .feature_item_icon svg path {
        fill: #77cb51;
    }

.sec_head {
    margin: 0 0 30px;
}

    .sec_head h2 {
        font-size: 36px;
        margin: 0 0 10px;
    }

    .sec_head p {
        margin: 0 0 20px;
        font-size: 18px;
        color: #505050;
    }

    .sec_head h5 {
        background: #fff;
        border: 1px solid #e6ebef;
        display: inline-block;
        padding: 8px 15px;
        border-radius: 50px;
        font-size: 14px;
        margin: 0 0 15px;
        line-height: 1;
        font-family: 'Lato', sans-serif;
        /* letter-spacing: 1px; */
        font-weight: bold;
        box-shadow: 0px 4px 4px rgb(40 78 23 / 5%);
    }


/* functionalities section style start here */
.functionalities_sec {
    padding: 70px 0;
}

    .functionalities_sec .sec_head {
        margin: 0 0 50px;
    }

.pricing_block h4 {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 -10px;
}

.functionality_item {
    padding: 30px 30px;
    background: #fff;
    margin: 0 0 40px;
    border-radius: 24px;
    /* box-shadow: 0 8px 24px rgb(56 111 31 / 10%); */
    border: 1px solid #e6ebef;
    transition: all ease 0.4s;
}

    .functionality_item:hover {
        box-shadow: 0 8px 24px rgb(56 111 31 / 10%);
        transform: translate(-0px, -3px);
    }

.functionality_left {
    position: sticky;
    top: 150px;
    margin-top: 40px;
}

.functionality_item h4 {
    margin: 0 0 15px;
    font-weight: 500;
    border-radius: 23px;
    /* border: 1px solid #2b2d3b; */
    /* padding: 6px 26px; */
    display: inline-block;
    font-size: 20px;
}

.functionality_item p {
    /* font-size: 18px; */
    margin: 0px;
}

.functionality_list {
    max-width: 450px;
}


/* Customer section style  */
.customers_sec,
.features_sec,
.pricing_sec,
.download_count_sec {
    background-color: #fff;
    max-width: 95%;
    margin: 0 auto;
    border-radius: 30px;
    padding: 55px 0px;
}

.customer_item figure img {
    max-width: 170px;
    max-height: 60px;
    display: block;
    width: 100%;
}

.customer_item {
    padding: 0 16px;
}

.customer_slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

    .customer_slider figure {
        margin: 0;
        min-height: 70px;
        display: flex;
        align-items: center;
    }

.functionality_left img {
    max-width: 500px;
    margin: 0 auto;
    display: block;
    padding: 0 20px;
    width: 100%;
}

/* testimonials section style start here */
.testimonials_sec {
    padding: 70px 0;
    background-color: transparent;
}

.testimonial_item {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 30px 25px;
    flex-direction: column;
    gap: 10px;
    transition: .4s;
    align-items: flex-start;
    height: 100%;
    border: 1px solid #e6ebef;
    display: flex;
    position: relative;
}

    .testimonial_item:after {
        display: block;
        content: "";
        position: absolute;
        right: 20px;
        top: 15px;
        background-image: url(../images/quote.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        height: 90px;
        width: 90px;
        opacity: 0.025;
    }

.testi_author {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 1;
}

.testi_content {
    position: relative;
    z-index: 1;
}

.testi_author figure {
    margin: 0;
    border-radius: 50px;
    overflow: hidden;
    display: block;
}

    .testi_author figure img {
        height: 100%;
        width: 100%;
        display: block;
        object-fit: cover;
    }

.author_info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    line-height: 1;
}

    .author_info span {
        font-size: 85%;
        opacity: 0.7;
    }

.testimonials_sec_inner {
    position: relative;
}

.swiper-controls {
    position: absolute;
    top: -70px;
    right: 0;
    width: 100px;
    height: 40px;
    display: flex;
    gap: 0;
    justify-content: space-between;
}

    .swiper-controls .swiper-button-prev,
    .swiper-controls .swiper-button-next {
        height: 40px;
        width: 40px;
        background-color: #fff;
        border-radius: 50px;
        background-size: 10px auto;
        position: static;
        transform: none;
        margin: 0;
        border: 1px solid transparent;
        transition: all ease 0.4s;
    }

        .swiper-controls .swiper-button-prev:hover,
        .swiper-controls .swiper-button-next:hover {
            box-shadow: 0px 6px 20px rgb(40 78 23 / 12%);
            /* border: 1px solid #e6ebef; */
        }

        .swiper-controls .swiper-button-prev:after, .swiper-controls .swiper-button-next:after {
            position: relative;
            content: "";
            display: block;
            height: 12px;
            width: 12px;
            background: transparent;
            border-top: 2px solid #77cb51;
            border-right: 2px solid #77cb51;
            transform: rotate(45deg);
            position: absolute;
            left: calc(50% - 8px);
            top: calc(50% - 5px);
        }

    .swiper-controls .swiper-button-prev, .swiper-controls .swiper-button-next {
        position: relative;
        left: 0;
        top: 0;
        background-image: none;
    }

        .swiper-controls .swiper-button-prev:after {
            transform: rotate(-135deg);
            transform-origin: 8px 5px;
        }

/* Pricing sec style  */
.pricing_sec {
    margin-bottom: 55px;
}

.pricing_blocks_list {
    max-width: 1000px;
    margin: 0 auto;
}

.pricing_block {
    background: #ffffff;
    border-radius: 24px;
    padding: 30px 25px;
    flex-direction: column;
    gap: 25px;
    transition: .4s;
    height: 100%;
    border: 1px solid #e6ebef;
    display: flex;
    margin: 0 auto 20px;
    box-shadow: 0px 6px 20px rgb(56 111 31 / 0%);
    transition: all ease 0.4s;
}

    .pricing_block:hover {
        box-shadow: 0 8px 24px rgb(56 111 31 / 10%);
        transform: translate(-0px, -3px);
    }

    .pricing_block > * {
        margin: 0;
    }

.plan_price strong {
    font-size: 40px;
    display: inline-block;
    line-height: 1;
    color: #302c4d;
}

.plan_price {
    display: flex;
    align-items: flex-end;
    line-height: 1;
    gap: 5px;
}

    .plan_price small {
        padding-bottom: 5px;
        display: block;
    }

.pro_plan {
    background: #302c4d;
    color: #fff;
}

    .pro_plan h4, .pro_plan h5,
    .pro_plan .plan_price strong {
        color: #fff;
    }

.plan_features ul li {
    position: relative;
    padding-left: 20px;
}

    .plan_features ul li:after {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        height: 7px;
        width: 12px;
        border-left: 2px solid #77cb51;
        border-bottom: 2px solid #77cb51;
        transform: rotate(-45deg);
        top: 9px;
    }

.plan_features ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


/* Download sec style */
.download_count_sec {
    padding: 40px 0;
    background-color: #302c4d;
    color: #fff;
}

    .download_count_sec h4 {
        color: #fff;
    }

.real_time_counter span {
    display: inline-block;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0.2049194677871149) 0%, rgba(255,255,255,0) 100%);
    padding: 6px 18px;
    border-radius: 8px;
    line-height: 1.5;
}

.real_time_counter {
    gap: 4px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    line-height: 1;
    font-weight: bold;
    font-size: 32px;
    margin: 0px 0 0px;
}

.download_count_sec .sec_head h2 {
    color: #fff;
    font-size: 30px;
    margin: 0;
}

.download_count_sec .sec_head {
    margin: 0;
}

.download_count_inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}




/* blog sec style */
.blogs_sec {
    padding: 60px 0;
}

ul.blog_item_info {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px;
    color: #77cb51;
    font-size: 14px;
}

.blog_item_content {
    padding: 15px;
    background: #fff;
}

.blog_item {
    padding: 15px;
    background: #fff;
    border-radius: 24px;
    transition: all ease 0.4s;
}

    .blog_item:hover {
        box-shadow: 0 8px 24px rgb(56 111 31 / 10%);
        transform: translate(-0px, -3px);
    }

.blog_thumb {
    border-radius: 16px;
    overflow: hidden;
}

.blog_list_wrap {
}

.blog_item_content p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical
}

ul.blog_item_info li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog_thumb a {
    position: relative;
    display: block;
    padding-bottom: 65%;
}

    .blog_thumb a img {
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }



/* footer style start here */
footer {
    background: #302c4d;
    padding: 60px 20px 40px;
    color: #fff;
    max-width: 95%;
    margin: 0 auto;
    border-radius: 30px;
    margin-bottom: 2.5%;
}

    footer a {
        color: #fff;
    }

    footer h4 {
        color: #fff;
        position: relative;
        display: inline-block;
        margin-bottom: 30px;
        letter-spacing: 0.05rem;
    }

    footer .footer_middle h4:after {
        content: "";
        display: block;
        position: absolute;
        bottom: -10px;
        height: 2px;
        background: #77cb5191;
        width: 40px;
        z-index: 0;
    }

    footer .footer_middle h4 > * {
        position: relative;
        z-index: 1;
    }

.footer_block ul.footer_menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer_logo {
    margin: 0 0 20px;
    max-width: 300px;
}

.social_links li a {
    display: block;
    background: #76c951;
    height: 38px;
    width: 38px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.2049194677871149) 0%, rgba(255,255,255,0) 100%);
    transition: all ease 0.4s;
}

    .social_links li a:hover {
        color: #76c951;
    }

ul.social_links {
    margin: 25px 0 0;
}

ul.footer_bottom_menu {
    display: flex;
    justify-content: flex-end;
    gap: 30px;
}

    ul.footer_bottom_menu li a:hover,
    .footer_block ul.footer_menu a:hover {
        color: #76c951;
        text-decoration: underline;
    }

.footer_bottom {
    padding: 70px 0 0;
}

.footer_top {
    padding: 0 0 50px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    margin: 0 0 50px;
}

form.footer_newsletter {
    max-width: 500px;
    margin-left: auto;
}

.footer_top h2 {
    color: #fff;
    font-size: 28px;
    margin: 0 0 0px;
}

.footer_newsletter .form-control {
    border: 0;
    height: 45px;
}

.footer_newsletter .btn {
    height: 45px;
}

.footer_block .real_time_counter span {
    padding: 5px 12px;
}

.footer_block .real_time_counter {
    font-size: 20px;
    justify-content: flex-start;
    margin: 0 0 15px;
}

.compare_plan_btn,
.view_all_btn {
    margin: 40px auto 0;
    display: block;
    width: 100%;
    max-width: 220px;
}


/* Download page style  */
.page_header {
    padding: 50px 20px;
    background: #302c4d;
    margin: 0 0 0px 0;
}

    .page_header h1 {
        font-size: 32px;
    }

section.page_header h1 {
    color: #fff;
}

section.downloads_wrap {
    padding: 60px 0 60px;
}

.accordion-item {
    margin: 0 0 30px;
    border-radius: 10px !important;
    overflow: hidden;
    border: 1px solid #e6ebef !important;
    box-shadow: 0 4px 12px rgb(56 111 31 / 4%);
}

    .accordion-item button.accordion-button {
        padding: 20px 30px;
        font-weight: bold;
        box-shadow: none;
        font-size: 20px;
    }

.accordion-button:not(.collapsed) {
    background: #77cb5136;
    color: #000;
}

    .accordion-button:not(.collapsed)::after {
        background-image: var(--bs-accordion-btn-icon);
    }

.accordion-body {
    color: #505050;
}

.downloads_wrap .table td,
.downloads_wrap .table {
    vertical-align: middle;
}

    .downloads_wrap .table td, .downloads_wrap .table th {
        padding: 10px 30px;
    }

    .downloads_wrap .table h4 {
        margin: 0;
        font-size: 16px;
    }

.downloads_wrap .table {
    margin: 30px 0;
}


.contact_sec {
    padding: 50px 0;
}

.contact_us_form .btn {
    height: auto;
    width: 160px;
}

.contact_us_form textarea.form-control {
    height: 140px;
}

.contact_map iframe {
    width: 100%;
    border: 5px solid #ddd;
    /* max-width: 580px; */
    margin: 10px auto 0;
    display: block;
    height: 100%;
    border-radius: 24px;
}

.contact_us_wrap {
    border-radius: 24px;
    padding: 35px 40px;
    background: #fff;
}

form.contact_us_form h4 {
    margin: 0 0 20px;
    color: #505050;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
}

.contact_map {
    height: 100%;
}

.contact_us_form input.form-control {
    height: 45px;
}


.features_sec .container,
.customers_sec .container,
.pricing_sec .container,
.download_count_sec .container,
footer .container {
    padding: 0 40px;
}

.features_sec,
.customers_sec,
.pricing_sec,
.download_count_sec,
footer {
    max-width: calc(100% - 14%);
}

@media (max-width: 1550px) {
    .features_sec, .customers_sec, .pricing_sec, .download_count_sec, footer {
        max-width: calc(100% - 60px);
    }

        .features_sec .container,
        .customers_sec .container,
        .pricing_sec .container,
        .download_count_sec .container,
        footer .container {
            padding: 0 30px;
        }
}

@media (max-width: 1320px) {
    .features_sec, .customers_sec, .pricing_sec, .download_count_sec, footer {
        max-width: calc(100% - 40px);
    }

        .features_sec .container,
        .customers_sec .container,
        .pricing_sec .container,
        .download_count_sec .container,
        footer .container {
            padding: 0 20px;
        }
}

@media (max-width: 1199px) {
    .features_sec, .customers_sec, .pricing_sec, .download_count_sec, footer {
        max-width: calc(100% - 30px);
    }

        .features_sec .container,
        .customers_sec .container,
        .pricing_sec .container,
        .download_count_sec .container,
        footer .container {
            padding: 0 15px;
        }
}



/* Landing page responsive style start here
------------------------------------------------------------- */
@media (min-width:1921px) {
    .functionality_left img {
        max-width: 700px;
    }

    .functionality_list {
        max-width: 550px;
    }

    .functionality_item {
        padding: 45px;
    }

    .testimonial_item {
        padding: 40px;
    }
}

@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-nav {
        justify-content: center;
    }

    .menu_wrap {
        width: 100%;
    }
}

@media (max-width:1399px) {
    .top_main_sec h1 {
        font-size: 52px;
    }

    ul.navbar-nav > li {
        margin: 0 0 0 15px;
    }

    .footer_block .real_time_counter span {
        padding: 5px 10px;
    }

    html {
        font-size: 14px;
    }

    .navbar-brand img {
        width: 250px;
    }

    .login_btns {
        gap: 10px !important;
    }
}


@media (max-width:1200px) {
    .top_main_sec h1 {
        font-size: 52px;
    }

    .footer_block .real_time_counter {
        font-size: 16px;
    }

        .footer_block .real_time_counter span {
            padding: 4px 8px;
        }

    .top_main_sec h1 {
        font-size: 46px;
    }

    .top_main_sec h4 {
        font-size: 18px;
    }

    .sec_head h2 {
        font-size: 32px;
    }

    .login_btns {
        margin: 0 !important;
    }
}


@media (max-width:991px) {
    .contact_map {
        height: 300px;
        margin: 30px 0 0px;
    }

    .contact_sec {
        padding: 40px 0;
    }

    .contact_us_wrap {
        padding: 30px 25px;
    }

    .contact_sec .row {
        flex-direction: column-reverse;
    }

    section.downloads_wrap {
        padding: 40px 0 40px;
    }

    .top_main_sec h1 {
        font-size: 52px;
    }

    .footer_block {
        margin: 0 0 30px;
    }

    .footer_bottom {
        padding: 40px 0 0;
    }

    .blog_item {
        margin: 0 0 30px;
    }

    .view_all_btn {
        margin: 20px auto 0;
    }

    .testimonials_sec .sec_head {
        padding-right: 120px;
    }

    section.customers_sec {
        text-align: center;
    }

    .customer_slider {
        margin-top: 20px;
    }

    .top_main_sec h1 {
        font-size: 42px;
    }
}



@media (max-width:767px) {
    .page_header h1 {
        font-size: 28px;
    }

    .top_main_sec h1 {
        font-size: 32px;
    }

    .top_main_left {
        align-items: center;
        text-align: center;
        margin: 0 0 30px;
        gap: 15px;
    }

    .top_main-right figure {
        max-width: 500px;
        margin: 0 auto;
    }

    .features_list_wrap .features_item {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }

    .functionality_item {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
        margin: 0;
    }

    .functionality_list {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        width: 100%;
        max-width: 100%;
        margin: 30px 0 0;
    }

    .pricing_blocks_list .col-md-4:not(:last-child) {
        margin: 0 0 30px;
    }

    .download_count_sec .real_time_counter {
        font-size: 20px;
    }

        .download_count_sec .real_time_counter span {
            padding: 5px 12px;
        }

    .customers_sec, .features_sec, .pricing_sec, .download_count_sec {
        padding-left: 0;
        padding-right: 0;
    }

    .functionality_left {
        margin: 0;
    }

    section.top_main_sec {
        padding: 30px 0 40px;
    }

    .features_sec,
    .customers_sec,
    .pricing_sec {
        padding: 40px 0px;
    }

    .functionalities_sec,
    .testimonials_sec {
        padding: 50px 0;
    }

    .blogs_sec {
        padding: 45px 0;
    }

    .view_all_btn {
        margin: 0px auto 0;
    }

    .footer_top h2 {
        font-size: 24px;
        margin: 0 0 20px;
        text-align: center;
    }

    form.footer_newsletter {
        max-width: 500px;
        margin: 0 auto;
    }

    ul.footer_bottom_menu {
        justify-content: flex-start;
        text-align: left;
    }

    .footer_bottom {
        text-align: left;
    }

    .footer_bottom {
        padding: 20px 0 0;
    }

    footer {
        padding: 45px 0px 45px;
    }

    .sec_head h2,
    .download_count_sec .sec_head h2 {
        font-size: 28px;
    }

    .plan_price strong {
        font-size: 36px;
    }

    .pricing_block {
        gap: 20px;
    }

    .testimonials_sec .sec_head {
        padding-right: 0;
        text-align: center;
    }

    .swiper-controls {
        position: static;
        margin: 20px auto 0;
    }

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

    .footer_top {
        padding: 0 0 30px;
        margin: 0 0 30px;
    }

    .downloads_wrap .table td, .downloads_wrap .table th {
        padding: 10px 15px;
    }

    .accordion-item {
        margin: 0px 0 20px;
    }

        .accordion-item button.accordion-button {
            font-size: 18px;
        }

    .page_header {
        padding: 30px 20px;
        margin: 0 0 0px 0;
    }

    .pricing_block h4 {
        font-size: 20px;
    }
}

@media (max-width:479px) {
    .features_list_wrap .features_item,
    .functionality_item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .pricing_block {
        padding: 20px 20px;
    }
}


/*------------  loader  -------------*/
.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.8); /* Optional background color */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; /* Ensure it covers other content */
}

.spinner {
    animation: rotate 2s linear infinite;
    width: 50px;
    height: 50px;
}

.path {
    stroke: #77cb51; /* Color of the spinner */
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}
/*------------  loader  -------------*/
.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.8); /* Optional background color */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; /* Ensure it covers other content */
}

.spinner {
    animation: rotate 2s linear infinite;
    width: 50px;
    height: 50px;
}

.path {
    stroke: #77cb51; /* Color of the spinner */
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}
/*------------   Select2 css  ----------*/
.select2-container--default .select2-selection--single {
    height: 37px;
    outline: none;
    box-shadow: none;
    background-color: var(--bs-body-bg) !important;
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
} 

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 35px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { 
    top: 6px !important; 
}
input[readonly], input[readonly]:focus {
    background-color: #f0f0f0; /* Light gray background color */
    color: #808080; /* Gray text color */
    cursor: not-allowed; /* Change cursor to indicate non-editable field */
}