:root {
    /* colors  */
    --black: #000000;
    --white: #fff;
    --green: #27AE60;
    --dgreen: #128d45;
    --blue: #0063DA;
    --dblue: #0d55ad;
    --purple: #6C0AF3;


    --fs-13: 13px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-24: 24px;
    --fs-35: 35px;
    --fs-38: 38px;
    --fs-45: 45px;
}



body {
    font-family: 'Inter', sans-serif;
    background: var(--white);
    color: var(--black);
    margin: 0;
    font-size: var(--fs-18);
    overflow-x: hidden;
    padding-top: 96px;
}


/*=========================
            common
=========================*/

/* buttons  */

.btn-blue {
    background-color: var(--blue);
    color: #fff;
    padding: 13px 28px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s;
    border: none;
}

.btn-blue:hover {
    background-color: var(--dblue);
    transform: translateY(-2px);
    color: #fff;
}

.btn-outline-blue {
    border: 1px solid var(--blue);
    color: var(--blue);
    padding: 13px 28px;
    border-radius: 8px;
    font-weight: 600;
    background: transparent;
    transition: all 0.3s;
}

.btn-outline-blue:hover {
    background: var(--dblue);
    color: #fff;
    transform: translateY(-2px);
}

.btn i {
    font-size: 19px;
    padding-right: 5px;
}

.green-txt {
    color: var(--green);
}

.blue-txt {
    color: var(--blue);
}



.white-txt {
    color: var(--white);
}

h1,
h2,
h3,
h4,
h5,
h6 .Jakarta {
    font-family: "Plus Jakarta Sans", sans-serif;

}

section {
    overflow-x: hidden;
    overflow-y: hidden;
}

/*=========================
            Logo
=========================*/

.navbar-brand img {
    height: 65px;
    transition: all .35s ease;
}


/*=========================
            Menu
=========================*/

.navbar-toggler {
    border: 0;
    outline: 0;
}

.navbar-toggler:focus {
    box-shadow: none
}

.navbar {
    background: #fff;
    padding: 8px 0;
    transition: all .35s ease;
    z-index: 1030;
}


.home-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .03);
    border-bottom: 1px solid #D7D9DB;
}

.home-nav.scrolled {
    padding: 8px 0;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .08);
}


.home-nav.scrolled .navbar-brand img {
    height: 53px;
}




.navbar-nav .nav-link {
    font-weight: 500;
    margin: 0 10px;
    position: relative;
    transition: .3s;
    color: #000;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--blue);
    font-weight: 600;
}

.navbar-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -24px;
    width: 100%;
    height: 4px;
    border-radius: 30px;
    transition: .3s;
    background: var(--blue);
}

.home-nav.scrolled .nav-link.active::after {
    bottom: -18px;
}

/*=========================
            Social Icons
        =========================*/

.social-icons a {
    width: 40px;
    height: 40px;
    background: var(--green);
    border-radius: 50%;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: .3s;
}

.social-icons a:hover {
    background: var(--dgreen);
    transform: translateY(-3px);
}


.sec-title {
    font-size: var(--fs-38);
    font-weight: 700;
    line-height: 45px;
}

p {
    font-size: var(--fs-18);
    font-weight: 400;
    line-height: 32px;
}



/* footer section  */

.page-footer {
    background: #0E1F3B;
    color: #fff;
}

.footer-logo img {
    height: 65px;
}

.page-footer h4 {
    font-size: var(--fs-24);
    margin-bottom: 35px;
}

.page-footer p {
    font-size: var(--fs-16);
}

.page-footer ul li {
    font-size: var(--fs-16);
    color: var(--white);
}

.page-footer ul li a {
    padding: 8px 0;
    display: inline-block;
    transition: .3s;
    font-family: "Plus Jakarta Sans", sans-serif;
    color: var(--white);
    text-decoration: none;
}

.page-footer a:hover {
    color: var(--green);
    padding-left: 6px;
}


.footer-cnt i {
    width: 30px;
    font-size: var(--fs-16);
    color: var(--blue);
}

.footer-cnt {
    font-size: var(--fs-16);
}

.copyright-info p {
    border-top: 1px solid #1C3257;
    padding-top: 20px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--fs-14);
}

/*=========================
           home
        =========================*/

/* hero section    */

.hero-section {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 83vh;
    background: #FBFCFD 0% 0% no-repeat padding-box;
    padding-bottom: 80px;
}



.hero-title {
    font-size: var(--fs-45);
    font-weight: 700;

    line-height: 59px;
}





.hero-stats ul li {
    box-shadow:
        1px 3px 8px 1px #cccccc78;
    padding: 10px 24px;
    border-radius: 12px;
    font-size: var(--fs-16);
    font-weight: 600;
}


/* feature section    */

.featured-section {
    margin-top: -170px;
    position: relative;
}

.cmf-card {
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 20px;
    padding: 32px 24px;
    transition: all .35s ease;
    box-shadow:
        0 2px 8px rgba(15, 23, 42, .02),
        0 10px 20px rgba(15, 23, 42, .04);
}

.cmf-card:hover {
    transform: translateY(-8px);
    border-color: #dddddd;
    box-shadow:
        0 8px 20px rgba(15, 23, 42, .08),
        0 18px 40px rgba(15, 23, 42, .12);
}

.cmf-card h3 {
    font-size: var(--fs-20);
    font-weight: 700;
}


/* app section    */
.btk-download-section {
    padding-top: 110px;
    padding-bottom: 30px;
}

.btk-download-wrapper {

    background: linear-gradient(135deg, #1797F6 23%, #1CCB73 100%);
    border-radius: 35px;
    position: relative;
    padding: 70px;
}



.btk-mobile-wrapper {

    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -100px;
    right: 86px;
}

.btk-mobile {

    width: 100%;
    max-width: 600px;
    transform-origin: center bottom;
    will-change: transform;
}

/* Button */

.btk-content img {

    height: 60px;
    transition: .3s;
}

.btk-content img:hover {

    transform: translateY(-5px);
}

.float-icon {
    will-change: transform;
    animation: floatIcon 5s cubic-bezier(.445, .05, .55, .95) infinite;
}

@keyframes floatIcon {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}



/* Impact section    */

.bts-card {

    background: #fff;
    border-radius: 20px;
    padding: 35px 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #ececec;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, .05),
        0 10px 30px rgba(0, 0, 0, .06);

    transition: .35s;
}

.bts-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .12);
}

.bts-icon {

    width: 85px;
    height: 85px;
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px auto;
}

.bts-icon i {
    font-size: 40px;
}

.bts-blue {
    background: #EAF3FF;
}

.bts-blue i {
    color: var(--blue);
}

.bts-green {

    background: #DFF3E7;
}

.bts-green i {
    color: var(--green);
}

.bts-purple {
    background: #E9DAFD;
}

.bts-purple i {
    color: var(--purple);
}




.bts-line {

    display: block;
    width: 48px;
    height: 4px;
    border-radius: 30px;
    margin: 25px auto 0;

    transition: .45s cubic-bezier(.22, .61, .36, 1);
}

.bts-line-blue {
    background: var(--blue);
}

.bts-line-green {
    background: var(--green);
}


.bts-line-purple {
    background: var(--purple);
}


.bts-line-green {

    background: var(--green);
}

.bts-card:hover .bts-line {

    width: 80%;
}

.bts-number {
    font-size: var(--fs-38);
    font-weight: 700;
}

.bts-card-blue .bts-number {
    color: var(--blue);
}

.bts-card-green .bts-number {
    color: var(--green);
}

.bts-card-purple .bts-number {
    color: var(--purple);
}




/* faqs section  */
.accordion-button:not(.collapsed) {
    background-color: transparent;
    border: 0px;
    box-shadow: 0px 0px 0px 0px;
}

.accordion-flush>.accordion-item {
    box-shadow: 0px 3px 6px #00000029;
}

.accordion-button {
    font-size: var(--fs-18);
}

/*=========================
           about page
=========================*/


/* breadcrumb section  */
.breadcrumb-header {
    background: linear-gradient(90deg, #015FF6 0%, #27AE60 100%);
    margin-top: -5px;
    position: relative;
}

.breadcrumb-header-in:after {
    position: absolute;
    content: "";
    background: url(../img/social.png);
    width: 270px;
    height: 104px;
    right: 0px;
    top: 9px;
    opacity: .7;
    filter: grayscale(80%);
}

.breadcrumb {
    font-size: var(--fs-16);

}

.breadcrumb a {
    color: #ffff;
    text-decoration: none;

}

.breadcrumb .active::before {
    color: var(--white);
}

.breadcrumb .active {
    color: #fff;
    opacity: .6;
    font-weight: normal;
}

.breadcrumb-header-in .breadcrumb {
    margin-bottom: 0px;
}

.breadcrumb-header-in h1 {
    font-size: var(--fs-35);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0;
}


.abt-why-ext {
    background: #F5F8FD;
}


.abt-misson {
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #D8D8D8;
    transition: .35s;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.075);
}

.abt-misson h3 {
    font-size: var(--fs-35);
}

.abt-misson:hover {
    transform: translateY(-4px);
}

.believe-lsiting i {
    font-size: var(--fs-24);
    color: var(--green);
}

.believe-lsiting h5 {
    font-size: var(--fs-20);
}

.action-bar-skin {
    background: linear-gradient(180deg, #F4F3FF 0%, #F4F5FE 100%);
    overflow: hidden;
    min-height: 300px;
    padding: 30px;
}

.action-bar-inner {
    position: relative;
}

.blur-c-1 {
    position: absolute;
    left: -13vw;
    top: 10px;
    opacity: .5;
}

.blur-c-2 {
    position: absolute;
    right: -9vw;
    top: 10px;
    opacity: .5;
}

.blur-c-3 {
    position: absolute;
    left: 15vw;
    bottom: -28px;
    opacity: .5;
}

.ction-man {
    position: absolute;
    right: 50px;
}



/*=========================
     feature  page
=========================*/

.work-widget {
    border-radius: 40px;
    color: #fff;
    padding: 25px 35px;
    background: linear-gradient(256deg, #20BB63 2.59%, #0DB792 32.12%, #0182F4 100.16%);
}

.step-wizard {
    text-align: center;
    padding: 10px 25px;
}

.step-wizard p {
    line-height: 28px;
}

.step-wizard h5 {
    font-weight: 700;
    font-size: var(--fs-20);
}



/*=========================
     download app  page
=========================*/

.download-app {

    position: relative;
    margin-top: -5px;
    background: linear-gradient(160deg,
            #f8fbff 0%,
            #FFFFFF 40.29%,
            #F3F8FF 60.29%,
            #FFFFFF 98.63%);

}

.app-bl-1 {
    position: absolute;
    right: -100px;
    top: -250px;
    opacity: .6;
}

.inner-download-app {
    min-height: 90vh;
    display: flex;
    background-image: url("../img/box.png");
    /* Your small tile image */
    justify-content: center;
    background-size: 40px;
    align-items: center;
    text-align: center;
    padding: 40px;
}

.after-bg::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 250px;
    background: linear-gradient(180deg, rgba(243, 248, 255, 0.00) 0%, #FFF 63.93%);
    bottom: 0px;
}


.works-section {
    margin-top: -60px;
    position: relative;
    margin-bottom: 30px;
}


.ease-animation img {
    transition: .3s;
}

.ease-animation img:hover {
    transform: translateY(-3px)
}


/*=========================
     contact us page
=========================*/

.contact-card {
    border: 1px solid #D4D4D4;
    padding: 24px;
    border-radius: 16px;
}

.contact-card h4 {
    font-size: var(--fs-20);
}

.contact-icon {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    text-align: center;
    line-height: 50px;
}

.light-green {
    background: #DEFFF4;
}

.light-blue {
    background: #DEEBFF;
}

.light-purple {
    background: #EADAFF;
}

.contact-form-head h3 {
    font-size: var(--fs-24);
    font-weight: 700;
}

.contact-form-head p {
    font-size: var(--fs-16);
    line-height: 25px;
}

.form-label {
    font-size: var(--fs-16);
    font-weight: 500;
}

.form-control {
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04);
    border: 1px solid #D7DEE8;
}

.map-section {
    position: relative;
    overflow: hidden;

}

.map-section iframe {
    width: 100%;
    height: 500px;
    margin: 0;
    padding: 0;
    filter: grayscale(100%) invert(92%) contrast(95%) brightness(85%);
}

.map-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 82, 204, 0.35);
    /* Blue overlay */
    mix-blend-mode: multiply;
    pointer-events: none;
}



/*=========================
     privacy page
=========================*/

.policy-card h2{
    color:#111;
    font-size:28px;
    margin-bottom:20px;
}

.policy-card h4{
    margin-top:40px;
    margin-bottom:15px;
    color:#111;
    font-size:22px;
}

.policy-card p{
    margin-bottom:15px;
}

.policy-card ul{
    padding-left:20px;
}

.policy-card li{
    margin-bottom:10px;
}