/* ----------------------------------------------- */

/* Global Css Start */

/* ----------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");



:root {

    --clr-primary: #025699;

    --clr-secondary: #0071bc;

    --clr-white: #fff;

    --clr-black: #000;

    --clr-dark: #101828;

    --clr-light: #344054;

    --clr-light-sm: #dee2e6;

}



body {

    font-family: "Inter", sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 25px;

    color: var(--clr-dark);

    background-color: var(--clr-white);

}

h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: 700;

    line-height: 1;

    color: var(--clr-dark);

}

body h2 {

    margin: 0;

    color: var(--clr-dark);

    font-size: 36px;

    line-height: 46px;

    font-weight: 600;

}

body h4 {

    font-size: 30px;

    line-height: 40px;

}

body h5 {

    font-size: 25px;

    line-height: 32px;

}

body h6 {

    font-size: 16px;

    line-height: 24px;

}

body p {

    font-size: 15px;

    line-height: 22px;

    color: var(--clr-light);

}

a,

a:hover,

a:focus,

a:active {

    outline: 0;

    text-decoration: none;

    transition: 1s;

}



.slick-slide {

    height: auto !important;

}

section {

    padding: 60px 0px;

}

body ul {

    padding: 0;

}

body li {

    list-style: none;

}



/* table */

body table {

    width: 100%;

}

body th {

    background-color: #f7f7f7;

}

body td {

    color: var(--clr-light);

    white-space: nowrap;

}

body td,

body th {

    border: 1px solid #dddddd;

    font-size: 14px;

    text-align: left;

    padding: 8px;

}



body .cursor-pointer {

    cursor: pointer;

}

body .text-sky {

    color: var(--clr-primary);

}

body .section-title {

    margin-bottom: 50px;

}

body .bg-transparent-border {

    border: 1px solid var(--clr-secondary) !important;

    color: var(--clr-secondary) !important;

    background-color: transparent !important;

}

body .bg-transparent-border:hover {

    color: var(--clr-white) !important;

    background-color: var(--clr-secondary) !important;

}

body .custom-clr-primary {

    color: var(--clr-primary);

    font-size: 16px;

    line-height: 24px;

    font-weight: 600;

}

body .custom-clr-secondary {

    color: var(--clr-secondary) !important;

}

body .custom-bg-secondary {

    background-color: var(--clr-secondary) !important;

}

body .custom-clr-white {

    color: var(--clr-white) !important;

}

body .custom-clr-dark {

    color: var(--clr-dark) !important;

}

body .custom-bg-dark {

    background-color: var(--clr-dark) !important;

}

body .custom-bg-light {

    background-color: var(--clr-light) !important;

}

body .custom-bg-primary {

    background-color: var(--clr-primary) !important;

}

body .custom-clr-light {

    color: var(--clr-light) !important;

}



body .h6-line-clamp {

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    height: 50px;

}

body .p-2nd-line-clamp {

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    height: 42px;

}



body .cursor-pointer {

    cursor: pointer !important;

}

body .custom-btn-secondary {

    color: var(--clr-white) !important;

    background-color: var(--clr-secondary) !important;

    border: none !important;

    padding: 0.375rem 1rem;

}

body .modal-custom-design .btn-close {

    background: transparent url("../images/icons/modal-cross-btn.svg") !important;

}

body .modal-custom-design .btn-close:focus {

    box-shadow: none !important;

}

body .modal-custom-design .form-control:focus {

    border-color: #ced4da !important;

    box-shadow: none !important;

}

body .modal-custom-design .cancel-btn {

    width: 120px !important;

    border-color: var(--clr-primary) !important;

    color: var(--clr-primary) !important;

}

body .modal-custom-design .cancel-btn:hover {

    background-color: var(--clr-primary) !important;

    color: var(--clr-white) !important;

}

body .modal-custom-design .save-btn {

    width: 120px !important;

    background-color: var(--clr-secondary) !important;

}

body .modal-custom-design .save-btn {

    width: 120px !important;

    background-color: var(--clr-secondary) !important;

}



.bg-pos {

    background: linear-gradient(

        180deg,

        #f0f4f9 0%,

        #f0f5fa 71%,

        rgba(240, 244, 249, 0.1) 95%

    );

}

.text-lg-end {

    text-align: right;

}

.banner-bg {

    background: #f6f7f9;

}

.text-orange {

    color: #f37121;

}

.bg-0d0d16 {

    background-color: #0d0d16 !important;

}

.bg-F6F7F9 {

    background-color: #f6f7f9;

}



.bg-FFFFFF {

    background-color: #ffffff;

}



.max-w-600 {

    max-width: 600px;

}

.max-width-362 {

    max-width: 362px;

}



.section-description {

    font-size: 16px;

    line-height: 26px;

    font-weight: 400;

    color: #475467;

    padding-top: 16px;

    margin-bottom: 0px;

}



.gap-60 {

    gap: 60px;

}



/* scroll bar */

*,

body,

html {

    scrollbar-width: thin !important;

}

::-webkit-scrollbar {

    width: 5px;

    height: 5px;

}

::-webkit-scrollbar-button {

    background: #ccc;

}

::-webkit-scrollbar-track-piece {

    background: #888;

}

::-webkit-scrollbar-thumb {

    background: #eee;

}

.title-gradient {

    background: linear-gradient(to right, #89ceff, #89ceff, #ff8900);

    -webkit-text-fill-color: transparent;

    -webkit-background-clip: text;

}

.mb-40 {

    margin-bottom: 40px;

}

.px-36 {

    padding-left: 36px !important;

    padding-right: 36px !important;

}

.h-400 {

    height: 400px;

}

.rounded-16 {

    border-radius: 16px !important;

}

.rounded-8 {

    border-radius: 8px !important;

}

.rounded-top-16 {

    border-top-left-radius: 16px;

    border-top-right-radius: 16px;

}

.custom-message-btn {

    padding: 9px 30px !important;

}

.custom-primary-btn,

.custom-message-btn,

.custom-generate-btn,

.custom-downloads-btn,

.custom-downloads-btn:hover {

    color: var(--clr-white) !important;

    background: var(--clr-primary);

}

.custom-outline-btn {

    color: var(--clr-primary);

    background: transparent;

}

.custom-btn {

    font-size: 18px;

    font-weight: 600;

    line-height: 28px;

    display: inline-flex;

    padding: 16px 28px 16px 28px;

    justify-content: center;

    align-items: center;

    gap: 8px;

    border-radius: 8px;

    border: 1px solid var(--clr-primary);

    background: var(--clr-primary);

    color: var(--clr-primary);

}

.custom-btn:hover i {

    transform: translateX(10px);

    transition: 1s;

}



.custom-btn i {

    width: 28px;

    height: 28px;

    line-height: 28px;

    border-radius: 50%;

    border: 1px solid var(--clr-white);

    font-size: 13px;

    text-align: center;

}

.custom-btn.custom-outline-btn i {

    border: 1px solid var(--clr-primary) !important;

}



/* move image */

@keyframes moveUpDown {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(50px);

    }

    100% {

        transform: translateY(0);

    }

}



.move-image {

    animation: moveUpDown 5s infinite;

}

/* ----------------------------------------------- */

/* Header Css Start */

/* ----------------------------------------------- */



.btn-close i {

    color: #ffffff;

    font-size: 26px;

}

.btn-close-commmon i {

    color: #000;

    font-size: 26px;

}

.header-section {

    padding: 5px 0px;

    background: var(--clr-white);

    position: sticky;

    width: 100%;

    top: 0;

    left: 0;

    z-index: 9;

    border-bottom: 1px solid #b7b7b73d;

}

.header-section.home-header {

    position: fixed !important;

    background: transparent;

    border-bottom: 1px solid rgba(255, 255, 255, 0.24);

}

.header-section .login-btn {

    display: none;

}

@media (max-width: 991px) {

    .header-section .login-btn {

        display: block;

    }

}

.header-section.home-header a {

    color: var(--clr-white) !important;

}



.home-header .header-logo img,

.header-logo img {

    height: 44px;

    width: auto;

}

.header-section a {

    color: #101828 !important;

    font-size: 15px;

    font-weight: 500;

}

.header-section a:hover {

    color: var(--clr-primary) !important;

}

.header-section .nav-link {

    padding: 20px 15px !important;

}

/* dropdown */

.header-section .menu-dropdown {

    position: relative;

}

.header-section .dropdown-content {

    display: none;

    padding: 20px;

    min-width: 200px;

    position: absolute;

    z-index: 1;

    left: 50%;

    transform: translateX(-50%);

    background-color: var(--clr-white);

    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

}



.header-section .dropdown-content a {

    border-radius: 8px;

    color: var(--clr-dark) !important;

    padding: 7px 10px !important;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 2px;

}

.header-section .menu-dropdown a span {

    font-family: monospace;

    margin-left: 20px;

}

.header-section .menu-dropdown .arrow {

    margin-left: 10px !important;

    transform: rotate(90deg);

    display: inline-block;

}

.header-section .menu-dropdown:hover .dropdown-content {

    display: block;

}



.header-section .dropdown-item:hover,

.header-section .dropdown-item.active,

.header-section .dropdown-item:active {

    color: var(--clr-white) !important;

    background-color: var(--clr-primary) !important;

}



/* bootstrap custom code */



.accordion-flush .accordion-item {

    border: none;

}



.accordion-flush .accordion-item .accordion-button {

    padding: 10px 15px !important;

}



.accordion-flush .accordion-item .accordion-button:hover {

    background: var(--clr-primary) !important;

    border-radius: 8px !important;

    color: #fff !important;

}



.accordion-flush .accordion-item a {

    font-size: 18px;

    line-height: 28px;

    font-weight: 500;

    color: #344054;

}

.offcanvas-header {

    padding: 0px 15px;

}

.home-offcanvas-header {

    background-color: #000;

}

.navbar-toggler {

    border: none;

}

.navbar-toggler i {

    font-size: 30px;

    color: #fff;

}

.header-section .mobile-menu .btn-close {

    color: var(--clr-dark) !important;

    background-image: none !important;

    font-size: 30px;

    opacity: 1;

}

.header-section .navbar-toggler:focus,

.header-section .mobile-menu .btn-close:focus {

    box-shadow: none !important;

}



.header-section .accordion-button:not(.collapsed),

.header-section .accordion-button:focus {

    background-color: transparent !important;

    box-shadow: none !important;

}

.header-section .accordion-button {

    padding: 7px 0px !important;

}

.header-section .accordion-body li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-left: 25px;

    margin-bottom: 10px;

    padding: 10px 15px;

}



.header-section .accordion-body li:hover {

    background: #e8f1f8 !important;

    /* padding: 5px 10px; */

    border-radius: 8px;

    color: #fff !important;

}

.header-section .accordion-body li:hover a,

.header-section .accordion-body li:hover .arrow {

    color: var(--clr-primary) !important;

}

.header-section .accordion-body li .arrow {

    font-size: 20px;

    color: #344054 !important ;

}

.accordion-flush .accordion-item .accordion-button,

.accordion-flush .accordion-item .accordion-button.collapsed,

.header-section .accordion-body a {

    color: #344054 !important;

}

.header-section .without-sub-menu::after {

    display: none !important;

}

.header-section .form-control,

.header-section .form-control:focus {

    border-color: var(--clr-secondary) !important;

    box-shadow: none !important;

}

.header-section .input-group input {

    border-top-left-radius: 20px !important;

    border-bottom-left-radius: 20px !important;

}

.header-section .input-group button {

    background-color: var(--clr-secondary);

    border-color: var(--clr-secondary) !important;

    color: var(--clr-white);

    border-radius: 20px;

}



.header-section .get-app-btn {

    background-color: var(--clr-primary);

    color: var(--clr-white) !important;

    border: 0;

    font-size: 16px;

    line-height: 24px;

    font-weight: 600;

    border-radius: 8px;

    padding: 10px 24px !important;

    text-align: center;

}

.header-section .get-app-btn:hover {

    color: var(--clr-white) !important;

}

.header-section .get-app-btn i {

    width: 28px;

    height: 28px;

    line-height: 28px;

    border-radius: 50%;

    border: 1px solid var(--clr-white);

    margin-left: 5px !important;

    font-size: 13px;

}

.header-section .get-app-btn:hover:hover i {

    transform: translateX(10px);

    transition: 1s;

}



/* ----------------------------------------------- */

/* slick-slider-section Css Start */

/* ----------------------------------------------- */



.slick-slider-section .slick-prev,

.slick-slider-section .slick-next {

    width: 30px;

    height: 30px;

    line-height: 30px;

    border-radius: 50%;

    background: var(--clr-primary);

}

.slick-slider-section .slick-prev {

    left: -35px !important;

}

.slick-slider-section .slick-next {

    right: -35px !important;

}

.slick-slider-section .slick-prev:before,

.slick-slider-section .slick-next:before {

    font-family: monospace !important;

    line-height: inherit !important;

    opacity: 1 !important;

    color: var(--clr-white) !important;

}

.slick-slider-section .slick-prev:hover,

.slick-slider-section .slick-prev:focus,

.slick-slider-section .slick-next:hover,

.slick-slider-section .slick-next:focus {

    background: var(--clr-secondary) !important;

}



.slick-slider-section img {

    width: 80%;

    height: 515px;

}



/* ----------------------------------------------- */

/* footer-section Css Start */

/* ----------------------------------------------- */

.footer-details {

    width: 275px;

    line-height: 28px;

}

.footer-section {

    background-image: url("../images/footer/footer.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

}

.footer-section .footer-logo {

    height: 44px;

    width: auto;

}

.footer-play-store {

    display: flex;

    align-items: center;

    gap: 15px;

}

.footer-play-store img {

    height: 45px;

    width: auto;

}

.footer-section p,

.footer-section li,

.footer-section li a {

    color: var(--clr-white);

}

.social-link {

    display: flex;

    gap: 10px;

}

.social-link li a {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 40px;

    width: 40px;

    background: #f9f9f926;

    border-radius: 50%;

}



.social-link li a img {

    width: 25px;

    height: auto;

}



/* ----------------------------------------------- */

/* Banner Css Start */

/* ----------------------------------------------- */

/* Home Banner */

.home-banner-section {

    padding-top: 120px;

    background-repeat: no-repeat;

    background-size: cover;

}



.video-wrapper .fa {

    line-height: inherit !important;

    margin-left: 3px;

}



/* new css for scanner text Start*/

.banner-scan {

    display: flex;

    align-items: center;

    gap: 10px;

}

.banner-scan img {

    height: 86px;

    width: 86px;

}

.banner-scan p {

    margin-bottom: 0px !important;

    width: 118px;

}

/* new css for scanner text ENd */



.home-banner-section .banner-content h1 {

    font-weight: 600;

    font-size: 54px;

    line-height: 64px;

    color: #ffffff;

    margin-bottom: 20px;

}

.home-banner-section .banner-content h1 span {

    color: var(--clr-primary) !important;

    background: none !important;

}



.home-banner-section .banner-content p {

    color: var(--clr-white);

    opacity: 0.9;

    margin-bottom: 20px;

}

.home-banner-section .banner-content .demo-btn-group {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 30px;

    margin-top: 30px;

}



.home-banner-section .banner-content .banner-checkMark span {

    font-size: 15px;

    line-height: 22px;

    color: var(--clr-white);

}

.play-button {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    position: relative;

    display: inline-block;

    color: #fff;

    background-color: var(--clr-primary);

}



.play-button::after {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translateX(-40%) translateY(-50%);

    transform: translateX(-40%) translateY(-50%);

    transform-origin: center center;

    border-top: 12px solid transparent;

    border-bottom: 12px solid transparent;

    border-left: 17px solid #fff;

    z-index: 8;

    -webkit-transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);

    transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);

}



.play-button:before {

    content: "";

    position: absolute;

    width: 155%;

    height: 155%;

    -webkit-animation-delay: 0s;

    animation-delay: 0s;

    -webkit-animation: pulsate1 2s;

    animation: pulsate1 2s;

    -webkit-animation-direction: forwards;

    animation-direction: forwards;

    -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite;

    -webkit-animation-timing-function: steps;

    animation-timing-function: steps;

    opacity: 1;

    border-radius: 50%;

    border: 5px solid rgba(255, 255, 255, 0.75);

    top: -15px;

    left: -14px;

    background-color: var(--clr-primary);

}



@-webkit-keyframes pulsate1 {

    0% {

        -webkit-transform: scale(0.6);

        transform: scale(0.6);

        opacity: 1;

        box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75),

            0px 0px 25px 10px rgba(255, 255, 255, 0.75);

    }

    100% {

        -webkit-transform: scale(1);

        transform: scale(1);

        opacity: 0;

        box-shadow: none;

    }

}



@keyframes pulsate1 {

    0% {

        -webkit-transform: scale(0.6);

        transform: scale(0.6);

        opacity: 0.7;

        box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75),

            0px 0px 25px 10px rgba(255, 255, 255, 0.75);

    }

    100% {

        -webkit-transform: scale(1, 1);

        transform: scale(1);

        opacity: 0;

        box-shadow: none;

    }

}



.home-banner-section .banner-content .play-store {

    display: flex;

    align-items: center;

    gap: 15px;

}



.home-banner-section .banner-content .play-store img {

    height: 45px;

    width: auto;

}



/* right */



.home-banner-section .banner-img {

    position: relative;

}

.banner-img {

    max-width: 590px;

    max-height: 615px;

}

.banner-img img {

    width: 100% !important;

    height: 100% !important;

    object-fit: contain;

}

.home-banner-section .banner-img .button-one {

    position: absolute;

    width: 185px;

    left: 0;

    top: 152px;

    animation-delay: 0.2s;

}

.home-banner-section .banner-img .button-two {

    position: absolute;

    width: 162px;

    left: 40px;

    top: 192px;

    animation-delay: 0.6s;

}

.home-banner-section .banner-img .button-three {

    position: absolute;

    width: 162px;

    left: 20px;

    top: 233px;

    animation-delay: 1s;

}



/* ----------------------------------------------- */

/* Payroll Css Start */

/* ----------------------------------------------- */

.payroll-section {

    position: relative;

    overflow: hidden;

}



.payroll-section h2 {

    max-width: 550px;

    margin-bottom: 20px;

}



.payroll-section ul {

    margin-left: 18px;

    margin-bottom: 35px;

}

.payroll-section ul li {

    list-style: unset;

    font-size: 15px;

    line-height: 25px;

    color: var(--clr-light);

}



/* ----------------------------------------------- */

/* Service Css Start */

/* ----------------------------------------------- */

.service-section {

    position: relative;

    overflow: hidden;

}



.service-section .service-card {

    padding: 24px;

    border-radius: 8px;

}

.service-section .service-content h6 {

    color: var(--clr-dark) !important;

    font-size: 20px;

    font-weight: 500;

    margin-bottom: 0px;

    margin-top: 8px;

}



.service-section .image {

    height: 70px;

    width: 70px;

    line-height: 70px;

    background-color: white;

    border-radius: 50%;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

}

.service-section .image img {

    height: 50px;

    width: 50px;

    text-align: center;

}



/* ----------------------------------------------- */

/* Service Css End */

/* ----------------------------------------------- */



/* ----------------------------------------------- */

/* package-section Css Start */

/* ----------------------------------------------- */

.package-section {

    position: relative;

    overflow: hidden;

    background: linear-gradient(

        to right,

        rgba(255, 137, 0, 0.12),

        rgba(13, 154, 255, 0.12)

    );

}



.package-section h2 {

    max-width: 510px;

    margin-bottom: 20px;

}

.package-section .form-switch .form-check-input:checked {

    background-color: var(--clr-primary) !important;

    border-color: var(--clr-primary) !important;

}

.package-section .package-arrow {

    position: absolute;

    top: 25px;

    right: 0;

    width: 25px;

}

.package-section .package {

    background-color: var(--clr-white);

    border: 1px solid #d0d5dd;

    padding: 20px;

    border-radius: 15px;

    position: relative;

    z-index: 1;

}



.package-section .package .month {

    border-bottom: 1px solid #00000033;

    padding-bottom: 15px;

    margin-bottom: 27px;

    position: relative;

    z-index: 0;

}

.package-section .package .month:after {

    position: absolute;

    content: "";

    width: 189px;

    height: 18px;

    background-color: var(--clr-primary);

    z-index: -1;

    opacity: 0.2;

    border-radius: 20px;

    bottom: 25px;

}

.package-section .package small {

    font-weight: 600;

}

.package-section .package .package-content img {

    width: 20px;

}

.package-section .package .package-content p {

    color: #101828;

}

.package-section .package .package-content button {

    width: 100%;

    background-color: var(--clr-primary);

    color: var(--clr-white);

    padding: 12px 0;

    border: 1px solid var(--clr-primary);

    border-radius: 10px;

    margin-top: 20px;

    cursor: pointer;

}

.package-section .package .package-content button:hover {

    background-color: transparent;

    color: var(--clr-primary);

    transition: 1s;

}



/* ----------------------------------------------- */

/* Blogs section Css Start */

/* ----------------------------------------------- */

.col-xl-4 .blog-shadow:hover {

    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,

        rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;

    transition: 0.2s;

    cursor: pointer;

}

.blogs-section {

    position: relative;

    overflow: hidden;

}



.blogs-section .tags-btn {

    border: none !important;

    color: var(--clr-dark);

    background-color: #e3dedf;

}

.blogs-tag-btn-selected {

    background-color: var(--clr-primary) !important;

    color: var(--clr-white) !important;

}



.blogs-tag-btn-unselected {

    background-color: #e3dedf !important;

}

/* pagination */

.blogs-section .pagination .page-link {

    color: var(--clr-primary) !important;

}

.blogs-section .pagination .page-link:focus {

    box-shadow: none !important;

    background-color: var(--clr-primary) !important;

    color: var(--clr-white) !important;

}

.blogs-section .pagination .page-item {

    margin-right: 10px;

}

.blogs-section .pagination .page-item:first-child .page-link,

.blogs-section .pagination .page-item:last-child .page-link,

.blogs-section .pagination .page-item .page-link {

    border-radius: var(--bs-pagination-border-radius) !important;

    border-color: var(--clr-primary) !important;

}

/* blog-details */

.blogs-section .blog-details-content .details-img {

    height: 408px;

    width: 100%;

    object-fit: cover;

}

.blogs-section .blog-details-content ul li {

    list-style: disc;

}

.blogs-section .blog-details-content p {

    color: var(--clr-light);

}

.blogs-section .blog-details-content p span {

    color: var(--clr-dark);

    font-weight: 600;

}

.blogs-section .blog-details-content .form-control:focus {

    border-color: #ced4da !important;

    box-shadow: none !important;

}

.blogs-section .user-image {

    width: 50px;

}

.blogs-section .blog-image {

    height: 264px;

}

.blogs-section .home-blog-small-image,

.home-blog-small-image {

    height: 143px;

    width: 150px;

}

.blogs-section .blog-small-image {

    height: 143px;

    width: 150px;

    object-fit: cover;

}

.blog-shadow {

    box-shadow: 0px 4px 24px 0px #c3d0e44d;

}

/* ----------------------------------------------- */

/* customer-section Css Start */

/* ----------------------------------------------- */



.customer-section {

    position: relative;

    overflow: hidden;

}



.customer-section .customer-card {

    background-color: var(--clr-white);

    border-radius: 10px;

    padding: 25px;

    position: relative;

    margin: 30px 10px 0;

    height: auto !important;

}

.customer-section .customer-card img {

    width: 50px;

    height: 50px;

    line-height: 50px;

    border-radius: 50%;

    position: absolute;

    top: -30px;

    border: 1px solid var(--clr-white);

}

.customer-section .customer-card ul li {

    color: #ffa800;

    font-size: 12px;

}



/* ----------------------------------------------- */

/* faq section Css Start */

/* ----------------------------------------------- */

.faqs-section {

    position: relative;

    overflow: hidden;

}



.faqs-section .accordion-item {

    margin-bottom: 20px !important;

    border: 1px solid #d0d5dd !important;

    padding: 16px;

    gap: 8px;

    border-radius: 8px;

    background: var(--clr-white);

    box-shadow: 0px 4px 28px 0px #0000000d;

}

.faqs-section .accordion-button:focus {

    box-shadow: none !important;

}

.faqs-section .accordion-button:not(.collapsed) {

    color: var(--clr-black) !important;

    background-color: transparent !important;

    box-shadow: none !important;

}

.faqs-section .accordion-button {

    color: #101828;

    font-size: 18px;

    font-style: normal;

    font-weight: 600;

    line-height: 28px;

    padding: 10px !important;

}

.faqs-section .accordion-body {

    padding: 2px 25px 2px 10px !important;

}

.faqs-section .accordion-body p {

    color: #344054;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

    margin-bottom: 5px;

}

.faqs-section .accordion-button::after {

    background-image: url("../images/faq/circle-plus.svg") !important;

}

.faqs-section .accordion-button:not(.collapsed)::after {

    background-image: url("../images/faq/circle-minus.svg") !important;

    transform: rotate(0deg) !important;

}

.faqs-section .custom-accordion {

    width: 80%;

    margin: 0 auto;

}



/* ----------------------------------------------- */

/* Contact section Css Start */

/* ----------------------------------------------- */

.contact-section .section-title p {

    max-width: 505px;

    margin: 0 auto;

}

.contact-section .contact-image img {

    height: 550px;

}

.contact-section .form-control:focus {

    border-color: #c0babc !important;

    box-shadow: none !important;

}

.contact-section form input,

.contact-section form textarea {

    border-color: #c0babc !important;

    border-radius: 5px !important;

}

.location-section {

    background: linear-gradient(

        to right,

        rgba(255, 137, 0, 0.12),

        rgba(13, 154, 255, 0.12)

    );

    position: relative;

    overflow: hidden;

}



.play-btn {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, 50%);

    transform: translate(-50%, -50%);

    height: 60px;

    width: 60px;

    background: var(--clr-primary);

    border-radius: 50%;

    text-align: center;

    color: #fff !important;

    font-size: 20px;

    line-height: 60px;

    z-index: 3;

    cursor: pointer;

}

.play-btn:before {

    content: "";

    position: absolute;

    width: 150%;

    height: 150%;

    -webkit-animation-delay: 0s;

    animation-delay: 0s;

    -webkit-animation: pulsate1 2s;

    animation: pulsate1 2s;

    -webkit-animation-direction: forwards;

    animation-direction: forwards;

    -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite;

    -webkit-animation-timing-function: steps;

    animation-timing-function: steps;

    opacity: 1;

    border-radius: 50%;

    border: 5px solid white;

    top: -15px;

    left: -16px;

    background-color: var(--clr-primary);

}

.video-wrapper {

    max-width: 820px;

    margin: 0 auto;

    background: #e6d9f7;

    border: 4px solid #ffffff;

    border-radius: 16px;

    position: relative;

    overflow: hidden;

}

.video-wrapper:after {

    position: absolute;

    content: " ";

    display: block;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    opacity: 0.2;

}

.video-wrapper img {

    aspect-ratio: 16/9;

    width: 100%;

}



/* slider css start */

.slider-container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 60px;

    position: relative;

}

.slider-container .swiper-btn {

    position: absolute;

    top: 50%;

    -webkit-transform: translate(0, -50%);

    transform: translate(0, -50%);

    left: 0;

    background-color: var(--clr-primary) !important;

}

.slider-container .next,

.slider-container .next2,

.slider-container .next3,

.slider-container .next4,

.slider-container .next5,

.slider-container .next1 {

    right: 0 !important;

    left: auto !important;

}

.slider-container .swiper-scrollbar {

    background: none;

    z-index: 1;

}

.slider-container .swiper-scrollbar::after {

    position: absolute;

    content: "";

    display: block;

    left: 0;

    top: 6px;

    width: 100%;

    background: #d0d5dd;

    height: 2px;

    z-index: -1;

}

.slider-container .swiper-container-horizontal > .swiper-scrollbar {

    border-radius: 2px;

    height: 14px;

    max-width: 400px;

    width: 100%;

    bottom: 0;

    left: 50%;

    -webkit-transform: translateX(-50%);

    transform: translateX(-50%);

}

.slider-container .swiper-scrollbar-drag {

    background: #98a2b3;

    border-radius: 24px;

    opacity: 1;

}

.slider-container .swiper-wrapper img {

    width: 100%;

}



.swiper-btn {

    width: 44px;

    height: 44px;

    text-align: center;

    background: #0062ff;

    border-radius: 50%;

    line-height: 44px;

    color: #fff;

    -webkit-box-shadow: 0px 14px 30px rgba(148, 148, 148, 0.25);

    box-shadow: 0px 14px 30px rgba(148, 148, 148, 0.25);

    opacity: 0;

}

.swiper-btn:hover {

    opacity: 1 !important;

}



section:hover .swiper-btn {

    opacity: 0.5;

}



.swiper-button-disabled {

    background: #fff;

    color: #667085;

}



/* Need-customization-section style start */



.need-customization-section {

    background-image: url(../images/payment/2.jpg);

    background-size: cover; /* Cover the entire viewport */

    background-position: center; /* Center the background image */

    /* Other background properties can be added as needed */

}



.need-customization-section h2 {

    color: #fff;

}

.need-customization-section p {

    color: #fff;

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

    margin-top: 24px;

    margin-bottom: 32px;

}



/* Need-customization-section style End */



.theme-btn,

.theme-btn:hover {

    font-size: 18px;

    font-weight: 600;

    line-height: 24px;

    background-color: var(--clr-primary);

    color: white;

    display: inline-flex;

    padding: 16px 28px 16px 28px;

    justify-content: center;

    align-items: center;

    gap: 8px;

    border-radius: 8px;

    border: 1px solid var(--clr-primary);

    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

    transition: 0.5s;

}



.theme-btn:hover i {

    transform: translateX(10px);

    transition: 1s;

}



.theme-btn span {

    vertical-align: middle;

}



.theme-btn i {

    margin-left: 10px;

    vertical-align: middle;

    border-radius: 50%;

    border: 1px solid white;

    padding: 5px;

}



/* User-panel-section css start */

.slider-container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 60px;

    position: relative;

}

.slider-container .swiper-btn {

    position: absolute;

    top: 50%;

    -webkit-transform: translate(0, -50%);

    transform: translate(0, -50%);

    left: 0;

}

.slider-container .next,

.slider-container .next2,

.slider-container .next3,

.slider-container .next4,

.slider-container .next5,

.slider-container .next1 {

    right: 0 !important;

    left: auto !important;

}

.slider-container .swiper-scrollbar {

    background: none;

    z-index: 1;

}

.slider-container .swiper-scrollbar::after {

    position: absolute;

    content: "";

    display: block;

    left: 0;

    top: 6px;

    width: 100%;

    background: #d0d5dd;

    height: 2px;

    z-index: -1;

}

.slider-container .swiper-container-horizontal > .swiper-scrollbar {

    border-radius: 2px;

    height: 14px;

    max-width: 400px;

    width: 100%;

    bottom: 0;

    left: 50%;

    -webkit-transform: translateX(-50%);

    transform: translateX(-50%);

}

.slider-container .swiper-scrollbar-drag {

    background: #98a2b3;

    border-radius: 24px;

    opacity: 1;

    text-align: center;

}

.slider-container .swiper-wrapper img {

    width: auto;

    height: 100vh;

}



.admin-panel-item {

    border-radius: 16px;

    aspect-ratio: 16/9;

    overflow: hidden;

    text-align: center;

}



/* Multiple-Languages-section style start */

.lang-grid {

    display: -ms-grid;

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 20px;

}



.lang-item {

    background: #ffffff;

    box-shadow: 0px 4px 60px 0px #0000001a;

    border-radius: 8px;

    padding: 15px;

    text-align: center;

}

.lang-item img {

    height: 60px;

}

.lang-item h6 {

    font-weight: 600;

    font-size: 20px;

    line-height: 32px;

    margin-top: 10px;

    margin-bottom: 0px;

    color: #101828;

    white-space: nowrap;

}



.coming-soon {

    background: #dfdfdf;

    position: relative;

}

.coming-soon::after {

    position: absolute;

    content: "";

    display: block;

    left: 0;

    right: 0;

    top: 0;

    background: rgba(223, 223, 223, 0.3);

    -webkit-backdrop-filter: blur(4px);

    backdrop-filter: blur(4px);

    height: 100%;

    width: 100%;

}



.coming-soon .theme-btn {

    position: absolute;

    z-index: 2;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    min-width: 160px;

}



/* Multiple-Languages-section style start */



.compatible-img {

    max-width: 825px;

    margin: 0 auto;

}



/* PRICING PLAN START */



/* PRICING PLAN START */



.pricing-plan-section input[type="radio"] {

    width: 20px;

    height: 20px;

    line-height: 20px;

    cursor: pointer;

}

.pricing-plan-section input[type="radio"]:checked {

    accent-color: var(--clr-primary);

}

.pricing-plan-section label {

    font-size: 16px;

    font-weight: 500;

    line-height: 24px;

    color: #101828;

    cursor: pointer;

}



.pricing-plan-section .section-description {

    margin-bottom: 32px !important;

}



.pricing-plan-section .nav-tabs,

.pricing-plan-section .nav-tabs .nav-link,

.pricing-plan-section .nav-tabs .nav-item.show .nav-link,

.pricing-plan-section .nav-tabs .nav-link.active {

    border: none !important;

}



.plans-list .card {

    transition: 0.3s ease;

    border: 1px solid #eaecf0;

    border-radius: 16px;

}

.plans-list .card .card-header {

    border-top-left-radius: 16px;

    border-top-right-radius: 16px;

}



.plans-list .card:hover {

    box-shadow: 0px 14px 20px 0px #94949426;

    border: 0;

    margin-top: -5px;

}



.plans-list .col-sm-6 .card-header {

    background: #f9e9e9;

}



.card-header {

    text-align: center;

    background-color: #f9e9e9;

}

.card-header p {

    margin-bottom: 0px;

    color: #1d2939;

    font-weight: 700;

    line-height: 18px;

    font-size: 18px;

}



.card-header h4 {

    line-height: 48px;

    color: var(--clr-primary);

    font-weight: 600;

    font-size: 40px;

    margin-bottom: 0px;

    margin-top: 8px;

}



.card-header .price-span {

    font-size: 20px;

    color: #4d4d4d;

    font-weight: 600;

    line-height: 20px;

}



.card-body p {

    font-size: 16px;

    font-weight: 500;

    line-height: 20px;

    color: #101828;

}



.plans-list .card h2 {

    color: var(--clr-primary);

    font-weight: bold;

    font-size: 35px;

}



.plans-list .card h6 {

    color: #212121;

    display: inline-block;

    text-align: center;

    padding: 0 5px;

    margin: 15px 0;

    background: #ecf1f9;

}



.plans-list .card ul li {

    margin: 5px 0;

}



.subscribe-plan {

    color: var(--clr-primary) !important;

    border: 2px solid var(--clr-primary);

    font-weight: bold;

    transition: 0.4s ease;

    border-radius: 8px;

    padding: 12px 28px 12px 28px;

}

.plans-list .card .subscribe-plan:hover {

    color: #fff !important;

    background: var(--clr-primary) !important;

    font-weight: bold;

    cursor: pointer;

}



/* PRICING PLAN END */



/* ----------------------------------------------- */

/* customer-section Css Start */

/* ----------------------------------------------- */



.customer-section {

    position: relative;

    overflow: hidden;

}



.customer-section .customer-card {

    display: flex;

    flex-direction: column;

    align-items: center; /* Center items horizontally */

    justify-content: center; /* Center items vertically */

    padding: 25px;

    margin: 30px 10px 0;

    background-color: var(--clr-white);

    position: relative;

    border-radius: 16px;

    border: 1px solid white;

}



.customer-section .customer-card .star {

    color: #ffa800;

}



.customer-section .customer-slider-section p {

    text-align: center;

    color: #4d4d4d;

    size: 18px;

    line-height: 28px;

    font-weight: 400;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    height: 80px;

}



.customer-section .customer-card h5 {

    font-size: 24px;

    color: #101828;

    line-height: 32px;

    font-weight: 600;

}



.customer-section .customer-card small {

    color: #121212;

    font-size: 14px;

    line-height: 20px;

    font-weight: 500;

    margin: 8px 0px;

}



.customer-section .customer-star {

    color: #ffa800 !important;

    margin-bottom: 0;

}



/* ----------------------------------------------- */

/* About section Css Start */

/* ----------------------------------------------- */

.about-section h2 {

    max-width: 420px;

}

.about-section ul li {

    list-style: inside;

}

.about-section .about-img {

    height: 388px;

    width: 100%;

    object-fit: cover;

    border-radius: 16px;

}

/* ----------------------------------------------- */

/* Blogs section Css Start */

/* ----------------------------------------------- */



.blogs-section {

    position: relative;

    overflow: hidden;

}



.blogs-section .tags-btn {

    border: none !important;

    color: var(--clr-dark);

    background-color: #e3dedf;

}

.blogs-tag-btn-selected {

    background-color: var(--clr-primary) !important;

    color: var(--clr-white) !important;

}



.blogs-tag-btn-unselected {

    background-color: #e3dedf !important;

}

/* pagination */

.blogs-section .pagination .page-link {

    color: var(--clr-primary) !important;

}

.blogs-section .pagination .page-link:focus {

    box-shadow: none !important;

    background-color: var(--clr-primary) !important;

    color: var(--clr-white) !important;

}

.blogs-section .pagination .page-item {

    margin-right: 10px;

}

.blogs-section .pagination .page-item:first-child .page-link,

.blogs-section .pagination .page-item:last-child .page-link,

.blogs-section .pagination .page-item .page-link {

    border-radius: var(--bs-pagination-border-radius) !important;

    border-color: var(--clr-primary) !important;

}



@media (max-width: 1700px) {

    .video-wrapper {

        max-width: 650px;

    }

}



.modal-body .form-control {

    -webkit-box-shadow: none;

    box-shadow: none;

    background: #ffffff;

    border: 1px solid #e4e5e7;

    border-radius: 6px;

    padding: 12px 15px;

    font-weight: 400;

}



.modal-body .form-control:focus {

    border: 1px solid #d7d9de !important;

}



.modal-body label {

    font-weight: 400;

    font-size: 14px;

    line-height: 22px;

    text-align: center;

    color: #191919;

    background: #fff;

    position: relative;

    left: 10px;

    top: 7px;

    padding: 0 10px;

    z-index: 2;

    line-height: 1;

}



.gpt-up-down-arrow span {

    border-bottom: 2px solid #999;

    border-right: 2px solid #999;

    pointer-events: none;

    content: "";

    position: absolute;

    top: 30%;

    right: 16px;

    height: 10px;

    width: 10px;

    -webkit-transform-origin: 66% 66%;

    -ms-transform-origin: 66% 66%;

    transform-origin: 66% 66%;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

    -webkit-transition: all 0.15s ease-in-out;

    transition: all 0.15s ease-in-out;

}



.font-size-update p {

    font-size: 22px;

}



/* plan modal css start */

.p-24-0 {

    padding: 24px 0px;

}



.p-8-0 {

    padding: 8px 0px;

}

.mb-30 {

    margin-bottom: 30px;

}

/*---------------- payment section style start ------------------------*/

.success-modal-body h4 {

    font-size: 24px;

    font-weight: 600;

    line-height: 36px;

    color: #121212;

    margin-bottom: 0px;

    padding-top: 8px;

    padding-bottom: 16px;

}

.create-account-body {

    padding: 0 24px 24px 24px;

}

.create-account-body h4 {

    font-size: 28px;

    font-weight: 700;

    line-height: 36px;

    color: #121212;

    margin-top: 20px;

    margin-bottom: 6px;

}

.setup-account-body h4 {

    font-size: 26px;

    font-weight: 600;

    line-height: 36px;

    color: #121212;

    margin-bottom: 6px;

}

.custom-label {

    color: #121535 !important;

    font-weight: 600 !important;

}

.create-account-body p {

    color: #4b5563;

}

.login-social {

    border: 1px solid #9999994d !important;

    background-color: transparent !important;

    border-radius: 10px !important;

    padding: 10px !important;

    color: #121535 !important;

    font-size: 14px !important;

    font-weight: 500;

}

.login-social img {

    height: 24px;

    width: 24px;

    margin-right: 10px;

    border-radius: 20px !important  ;

}

.have-account {

    color: #4b5563;

}

.have-account a {

    color: var(--clr-primary);

    font-weight: 500;

}

.verify-modal-body h4 {

    font-size: 24px;

    font-weight: 600;

    line-height: 36px;

    color: #212121;

}



.verify-modal-body .des,

.verify-modal-body .des span {

    color: #4d4d4d;

    font-size: 16px;

    font-weight: 500;

    line-height: 24px;

}



.verify-modal-body .des {

    font-weight: 400 !important;

    margin: 0;

}



.verify-modal-body .des .reset {

    color: var(--clr-primary);

}



.verify-modal-body .code-input {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

}

.verify-modal-body .code-input input {

    width: 51px;

    height: 58px;

    border-radius: 10px;

    border: 1px solid #d8d8d8;

    box-shadow: none !important;

    text-align: center;

}



.verify-modal-body .code-input input:focus {

    border: 1px solid var(--clr-primary) !important;

    outline: none !important;

}



.verify-modal-body .code-input input:focus-visible {

    border: 1px solid var(--clr-primary) !important;

    outline: none !important;

}



.verify-modal-body .code-input input::-webkit-inner-spin-button,

.verify-modal-body .code-input input::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;

}



.verify-modal-body .code-input input {

    -moz-appearance: textfield;

}



.verify-modal-body .des span {

    color: #121212;

}



.success-modal-body p {

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

    color: #4d4d4d;

    margin-bottom: 24px;

}



.modal-body button {

    width: 100%;

    padding: 12px 20px;

    background: var(--clr-primary);

    border-radius: 8px;

    border: 0;

    color: white;

    font-size: 16px;

    font-weight: 600;

    line-height: 24px;

    margin-bottom: 24px;

}

.modal-body button:focus-visible {

    border: 0 !important;

}



.success-content {

    border-radius: 16px;

}



#registration-modal .cancel-btn {

    width: 80px;

    margin-right: 10px;

    background: #fff;

    border: 1px solid var(--clr-primary);

    color: var(--clr-primary);

    text-align: center;

}



#registration-modal .submit-btn {

    width: 80px;

    /* border: 1px solid var(--clr-primary); */

}



.error {

    color: red;

}



/* plan modal css end */



/* banner img responsive */

@media (min-width: 992px) {

    .banner-img.text-center img {

        height: 490px;

        width: auto;

    }

}



@media only screen and (min-width: 768px) and (max-width: 992px) {

    .banner-img.text-center img {

        height: 400px;

        width: auto;

    }

}



@media only screen and (min-width: 0px) and (max-width: 768px) {

    .banner-img.text-center img {

        height: 300px;

        width: auto;

    }

}

.social-login {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

}

@media (max-width: 768px) {

    .social-login {

        grid-template-columns: 1fr;

    }

}

.create-account-body .create-account-logo {

    height: 48px;

    width: 150px;

    object-fit: contain;

}

.login-btn {

    display: block;

    font-size: 18px;

    font-weight: 600;

    line-height: 24px;

    color: #fff !important;

    background: var(--clr-primary) !important;

    border-radius: 8px;

    padding: 12px 20px;

    width: 100%;

    margin-top: 15px;

    height: 50px;

}

.login-btn {

    background-color: var(--clr-primary) !important;

}

.mobile-lang-container {

    display: none;

}

@media (max-width: 991px) {

    .lang-name {

        display: none;

    }

    .home-page-language-change .language-btn {

        border: 1px solid transparent !important;

    }

    .mobile-lang-container {

        display: block;

    }

    .home-page-language-change {

        margin: 0px !important;

    }

}

.home-page-language-change {

    margin-right: 20px;

}

.home-page-language-change .language-btn {

    background: transparent;

    border: 1px solid white;

    padding: 10px 16px !important;

    border-radius: 8px;

    color: #fff;

    position: relative;

}

.home-page-language-change .language-btn::after {

    display: inline-block;

    margin-left: 0.255em;

    vertical-align: 0.255em;

    content: "";

    border-top: 0.3em solid;

    border-right: 0.3em solid transparent;

    border-bottom: 0;

    border-left: 0.3em solid transparent;

}

.home-page-language-change .language-btn img {

    border-radius: 50%;

    width: 24px;

    height: 24px;

    object-fit: cover;

}

.home-page-language-change .dropdown-menu .language-li .dropdown-item {

    color: #4b5563 !important;

}

.home-page-language-change .dropdown-menu .language-li .dropdown-item img {

    border-radius: 50%;

    width: 24px;

    height: 24px;

    object-fit: cover;

}

.home-page-language-change .dropdown-menu .language-li .dropdown-item:hover {

    color: #fff !important;

}

.home-page-language-change .dropdown-menu .language-li {

    padding: 10px !important;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.dropdown-menu-scroll {

    max-height: 400px;

    overflow-y: auto;

}