@import "fonts.css";

/*-------------------------------------------------------------- Global CSS */
body {
    font-family: Inter-Regular;
    color: #667085;
}

h1, h2, h3, h4 {
    color: #101828;
}
a {
    color: #667085;
}
a:hover, a:focus {
    color:#008000;
}

.btn__style {
    border-radius: 8px;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    font-family: Inter-Medium;
}
.btn_sm {
    font-size: 16px;
    line-height: 24px;
    padding: 11px 18px;
}
.btn_lg {
    font-size: 18px;
    line-height: 28px;
    padding: 15px 18px;
}
.btn__primary {
    background: #38B000;
    border: 1px solid #38B000;
}
.btn__primary:hover, 
.btn__primary:focus {
    background: #ffffff;
    border: 1px solid #38B000;
    color: #667085;
}
.btn__white {
    background: #ffffff;
    border: 1px solid #D0D5DD;
}
.btn__white:hover, .btn__white:focus {
    background: #ffffff;
    border: 1px solid #D0D5DD;
    color: #667085;
}
.btn__transparent {
    font-size: 16px;
    color: #667085;
    margin-right: 24px;
}
.btn__secondary {
    background: #667085;
    border: 1px solid #667085;
}
.btn__secondary:hover, 
.btn__secondary:focus {
    background: #ffffff;
    border: 1px solid #667085;
    color: #667085;
}
.border__bottom {
    border-bottom: 1px solid #EAECF0;
}
.border__top {
    border-top: 1px solid #EAECF0;
}
.badge__style {
    background: #ECFDF3;
    border-radius: 16px;
    color: #027A48;
    font-size: 16px;
    font-family: Inter-Medium;
    padding: 2px 8px;
}
/* global ends */

/* -----------------------------------------------------Header------------------------------------------------------- */

.site__navbar {
    font-family: Inter-Medium;
    background-color: #ffffff;
    border-bottom: 1px solid #F2F4F7;
    padding: 15px 0;
    margin-bottom: 55px; /*--95--*/
}
.site__navbar ul li {
    font-family: Inter-Medium;
    font-size: 16px;
    margin-right: 16px;
}
.site__navbar.navbar-light .navbar-nav .nav-link.active,  
.site__navbar.navbar-light .navbar-nav .show>.nav-link {
    color: #101828;
    background-color: transparent;
}
.site__navbar .navbar-brand {
    margin-right: 40px;    
}
.site__navbar .navbar-brand img, .footer__copyright img {
    max-width: 142px;
}
.site__navbar .navbar-toggler {
    border-color: #008000;
}
/* .site__navbar .navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.site__navbar .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");;
} */

/* -----------------------------------------------------NewFeature------------------------------------------------------- */
.badge__section {
    display: flex;
    background: #D9EBD3;
    padding: 5px 10px;
    border-radius: 16px;
}
.badge__section > a {
    color: #008000;
    text-align: center;
    font-size: 14px;
    font-family: Inter-Medium;
    text-decoration: none;
    padding: 4px 0;
}
.badge__section > a.new__feature__btn {
    background-color: white;
    border-radius: 22px;
    margin-right: 12px;
    padding: 4px 12px;
}

/* -----------------------------------------------------Demo------------------------------------------------------- */

.demo__section {
    margin-top: 25px;
}
.demo__section h1,
.feature__section h2 {
    color: #101828;
    font-family: Inter-SemiBold;
    font-size: 60px;
}
.demo__section p, 
.feature__section p {
    max-width: 768px;
    margin: 30px auto 45px;
    font-size: 20px;
}
.demo__section button.btn__white {
    margin-right: 12px;
}
.demo__section .content__img {
    margin: 64px 0 5px;
}

/* -----------------------------------------------------Social------------------------------------------------------- */

.social__proof {
    padding: 90px 0 0;
}
.social__proof p {
    font-size: 16px;
    font-family: Inter-Medium;
}
.social__proof .social__logos a {
    display: inline-block;
    padding: 15px 0;
}
.social__proof .social__logos {
    padding-bottom: 75px;
}

/* -----------------------------------------------------Feature------------------------------------------------------- */

.feature__section {
    padding: 90px 0 40px;
}
.feature__section h5 {
    color:#008000;
    font-size: 16px;
    font-family: Inter-SemiBold;
    margin-bottom: 15px;
}
.feature__section h3 {
    font-size: 36px;
    font-family: Inter-SemiBold;
}
.feature__section .card, 
.quote__section .card {
    border: none;
    margin-bottom: 40px;
}
.feature__section .card > img {
    width: 48px;
    height: 48px;
    margin: 0 auto;
}
.feature__section .card h4 {
    font-family: Inter-Medium;
    font-size: 20px;
}
.feature__section .card p,
.quote__section p {
    font-family: Inter-Regular;
    font-size: 16px;
}
.feature__section .card-link {
    font-size: 16px;
    font-family: Inter-Medium;
    color: #008000;
    margin-top: 20px;
    text-decoration: none;
}
.feature__section .card-link > img {
    margin-left: 10px;
}

/* -----------------------------------------------------Quote------------------------------------------------------- */
.quote__section {
    background-color: #F9FAFB;
    padding: 90px 0;
}
.quote__section h2 {
    font-size: 48px;
    font-family: Inter-Medium;
}
.quote__section img {
    height: 40px;
    margin-bottom: 20px;
}
.quote__section .card {
    background-color: transparent;
    margin-bottom: 0;
}
.quote__section .card img {
    width: 64px;
    height: 64px;
    margin: 25px auto 5px;
    border-radius: 50%;
    object-fit: contain;
}
.quote__section h4 {
    font-size: 18px;
    font-family: Inter-Medium;
}

/* -----------------------------------------------------Metrics------------------------------------------------------- */

.metrics__section {
    padding: 90px 0;
}
.metrics__section img {
    margin-bottom: 20px;
}
.metrics__section h3 {
    font-size: 36px;
    font-family: Inter-Medium;
}
.metrics__section p {
    font-size: 20px;
}
.metrics__section .card-title {
    font-size: 60px;
    font-family: Inter-SemiBold;
    color: #38B000;
    margin: 60px 0 30px;
}
.metrics__section .card-text {
    font-size: 18px;
    color: #101828;
}
.metrics__section .content__img {
    padding: 30px 0 60px;
}

/* -----------------------------------------------------CTA------------------------------------------------------- */

.cta__bg {
    background-color: #D9EBD3;
    padding: 64px;
    border-radius: 16px;
}
.CTA__section h3 {
    color: #004B23;
    font-size: 30px;
    font-family: Inter-SemiBold;
}
.CTA__section p {
    color: #008000;
    font-size: 20px;
}
.CTA__section .cta__btn .btn__white {
    margin-right: 12px;
    text-align: center;
}
.CTA__section .cta__btn button {
    margin-bottom: 10px;
}
/* -----------------------------------------------------Feature2------------------------------------------------------- */
.feature2__section {
    padding-bottom: 0;
}
.feature2__section .card-text {
    margin-bottom: 25px;
}
.feature2__content {
    padding-bottom: 35px;
}

/* -----------------------------------------------------FAQ------------------------------------------------------- */
.fAQ__section {
    padding: 90px 0;
}
.fAQ__section h3 {
    font-size: 36px;
    font-family: Inter-SemiBold;
    margin-bottom: 20px;
}
.fAQ__section p {
    font-size: 20px;
    font-family: Inter-Regular;
}
.fAQ__accordion {
    max-width: 768px;
    margin-top: 10px;
}

.fAQ__accordion .accordion-button,
.fAQ__accordion .accordion-button:not(.collapsed) {
    padding: 30px 0;
    background-color: transparent;
    box-shadow: none;
    color: #101828;
    font-size: 18px;
    font-family: Inter-Medium;
}

.fAQ__accordion .accordion-body {
    padding: 0 0 30px;
}
.fAQ__accordion .accordion-button:not(.collapsed)::after {
    background-image: url('../../assets/img/icon-minus.png');
}
.fAQ__accordion .accordion-button::after {
    background-image: url('../../assets/img/icon-plus.png');
}

/* -----------------------------------------------------Contact Section------------------------------------------------------- */
.contact__section {
    padding: 30px 0 90px;
}
.contact__section h4 {
    color: #008000;
    font-size: 16px;
    font-family: Inter-SemiBold;
}
.contact__section h3 {
    font-size: 36px;
    font-family: Inter-SemiBold;
    margin: 10px 0 20px;
}
.contact__section p {
    font-size: 20px;
    font-family: Inter-Regular;
}
.contact__form,
.form__style {
    max-width: 480px;
    margin: 20px auto;
    text-align: left;
}
.contact__form .form-label,
.form__style .form-label {
    font-size: 14px;
    color: #344054;
    font-family: Inter-Medium;
}
.contact__form .form-control,
.form__style .form-control,
.form-select {
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    font-size: 16px;
    padding: 11px 16px;
    color: #667085;
}
.contact__form .agreecheck .policy__link,
.form__style .agreecheck .policy__link {
    color: #667085;
}
.contact__form textarea.form-control,
.form__style textarea.form-control {
    resize: none;
}
.contact__form .agreecheck .policy__link:hover,
.form__style .agreecheck .policy__link:hover,
.contact__form .agreecheck .policy__link:focus,
.form__style .agreecheck .policy__link:focus {
    color: #008000;
}
.contact__form .btn {
    padding: 9px 16px;
}

/* -----------------------------------------------------footer------------------------------------------------------- */
footer {
    padding: 30px 0 0;
}
.footer__links {
    padding-top: 30px;
    padding-bottom: 60px;
}
.link__list h4 {
    color: #98A2B3;
    font-size: 14px;
    font-family: Inter-SemiBold;
    margin: 25px 0;
}
.link__list ul {
    padding: 0;
}
.link__list ul li {
    list-style-type: none;
    margin-top: 18px;
}
.link__list ul li a {
    font-size: 16px;
    color: #667085;
    font-family: Inter-Medium;
    text-decoration: none;
}
.link__list .badge__style {
    font-size: 14px;
}
.footer__copyright {
    padding-top: 30px;
    padding-bottom: 30px;
}
.footer__copyright p {
    font-size: 16px;
    color: #98A2B3;
    margin-bottom: 0;
}
.copyright__text {
    text-align: right;
}

/* -----------------------------------------------------global header style------------------------------------------------------- */

.header__section {
    margin-top: 20px;
}
.header__section h5 {
    font-size: 16px;
    color: #38B000;
    font-family: Inter-SemiBold;
}
.header__section h3,
.header__section h4 {
    font-size: 48px;
    color: #101828;
    font-family: Inter-SemiBold;
    margin: 20px 0;
}
.header__section h4 {
    font-size: 36px;
}
.header__section p {
    font-size: 20px;
    color: #667085;
    max-width: 768px;
    margin: 0 auto;
}
/* -----------------------------------------------------Policy tabs------------------------------------------------------- */

.tab__section {
    padding-top: 40px;
    padding-bottom: 90px;
}
.tab__section .nav-pills {
    background: #F9FAFB;
    border: 1px solid #F2F4F7;
    border-radius: 8px;
    padding: 6px;
}
.tab__section .nav-link {
    font-size: 16px;
    color: #667085;
    font-family: Inter-Medium;
    padding: 10px 14px;
}
.tab__section .nav-pills .nav-link.active, 
.tab__section .nav-pills .show>.nav-link {
    background: #FFFFFF;
    box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
    border-radius: 6px;
    color: #344054;
}
/* -----------------------------------------------------Policy and Terms static Content------------------------------------------------------- */

.static__content {
    max-width: 768px;
    margin: 0 auto;
    text-align: left;
}
.static__content p, .about__section .list__view li {
    font-size: 18px;
    line-height: 28px;
}
.static__content h2,
.static__content h3,
.static__content h4 {
    font-family: Inter-SemiBold;
    margin: 45px 0 30px;
}
.static__content h2 {
    font-size: 30px;   
}
.static__content h3 {
    font-size: 24px;   
}
.terms__section {
    padding-bottom: 90px;
}

/* ------------------------ABOUT-----------------------------Matrics------------------------------------------------------- */

.image__content__section {
    background: #F9FAFB;
    padding: 90px 0;
}
 .metrics__data {
     margin-top: 30px;
 }
.metrics__data h3 {
    font-size: 60px;
    font-family: Inter-SemiBold;
    color: #38B000;
}
.metrics__data p {
    font-family: Inter-Medium;
    font-size: 18px;
    color: #101828;
}

/* -------------------------ABOUT----------------------------Team section------------------------------------------------------- */

.team__section {
    padding: 70px 0;
}
.team__section .btns {
    margin: 55px 0;
}
.team__section .btns a:first-child {
    margin-right: 10px;
}

.card__grid .card {
    background: #F9FAFB;
    padding: 30px 24px 24px;
    border: none;
}
.card__grid .card > img {
    height: 80px;
    width: 80px;
    margin: 0 auto;
    border-radius: 50%;
    object-fit: contain;
}
.card__grid .card .card-title {
    font-size: 18px;
    font-family: Inter-SemiBold;
    margin: 15px 0 10px;
}
.card__grid .card .card-subtitle,
.card__grid .card .card-text  {
    font-size: 16px;
}
.card__grid .card .card-subtitle {
    color: #008000;
    margin-bottom: 20px;
}
.card__grid .card .card-text {
    line-height: 24px;
}
.card__grid .card .card__social__icons a {
    margin: 0 5px;
}
.card__grid div > div {
    padding: 12px;
}
.list__view {
    padding: 0;
}
.list__view li {
    margin-bottom: 5px;
    list-style-position: inside;

}
/* -------------------------ABOUT----------------------------Our Values section------------------------------------------------------- */

.our__values {
    background: #F9FAFB;
    padding: 90px 0 60px;
    margin: 70px 0;
}
.our__values .card {
    background-color: transparent;
}

/* -------------------------Dashboard----------------------------Login------------------------------------------------------- */

/* Common form style */
.form__style {
    max-width: 384px;
}
.form__style h3 {
    font-size: 30px;
    margin: 10px 0;
    font-family: Inter-SemiBold;
}
.form__style p {
    font-size: 16px;
}
.form__style .logo__mark {
    margin-bottom: 40px;
}
.form__style .form-control, .form__style .form-select {
    padding: 9px 16px;
}
.form__style a,
.form__style .remember__check label {
    font-family: Inter-Medium;
}
.form__style a, .form__style a:focus {
    color: #008000;
    text-decoration: none;
    box-shadow: none;
}
.form__style a:hover {
    text-decoration: underline;
    color: #008000;
}
.form__style p,
.form__style a.back__link {
    font-family: Inter-Regular;
}
.form__style a.back__link {
    color: #667085;
}
.form__style .btn {
    padding: 7px 16px;
}
.form__style .button__eye {
    position: absolute;
    top: 32px;
    right: 15px;
    font-size: 20px;
    padding: 5px 8px;
    color: #667085;
}
.plan__style {
    text-align: center;
}
.plan__style h2 {
    font-size: 60px;
    font-family: Inter-SemiBold;
}
.plan__style p {
    font-size: 18px;
    font-family: Inter-Medium;
    color: #101828;
    margin-bottom: 10px;
}
.plan__price__perpage h2 {
    color: #F79009;
}
.plan__price h2 {
    color: #38B000;
}
/*------------------------------------------------ Make payment page */
.card__wrapper {
    max-width: 420px;
    padding: 30px;
    margin-top: 0;
    box-shadow: 0 .1rem 1rem rgba(0,0,0,.15)!important;
}
.card__number .input-group-text {
    background-color: #ffffff;
    padding: 1px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    padding-right: 2px;
}
.image__card {
    width: 60px;
}
/*------------------------------------------------ Success and decline message */
.payment__success__msg .card, .payment__decline__msg .card {
    border-color: #38B000;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 12px;
}
.payment__success__msg .card-header, .payment__decline__msg .card-header {
    font-size: 40px;
    background-color: #38B000;
    color: #fff;
    padding: 8px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.payment__success__msg .card-title, .payment__decline__msg .card-title {
    font-size: 30px;
    margin: 10px 0;
    font-family: Inter-SemiBold;
}
.payment__success__msg .card-body .btn{
    padding: 7px 16px;
    background-color: #38B000;
    border-color: #38B000;
} 
.payment__decline__msg .card-body .btn  {
    padding: 7px 16px;
    background-color: #101828;
    border-color: #101828;
} 
.payment__success__msg .card-body .btn:hover, .payment__decline__msg .card-body .btn:hover,
.payment__success__msg .card-body .btn:focus, .payment__decline__msg .card-body .btn:focus {
    background-color: #ffffff;
} 
.payment__decline__msg .card {
    border-color: #ff0000;
}
.payment__decline__msg .card-header  {
    background-color: #ff0000;
}

/* -----------------------------------------------------Responsive------------------------------------------------------- */
@media (max-width: 575.98px) { 
    .footer__copyright {
        text-align: center;
    }
    .copyright__text {
        text-align: center;
    }
 }
@media (max-width: 767.98px) { 
    .site__navbar {
        margin-bottom: 50px;
    }    
    .demo__section h1, 
    .feature__section h2,
    .quote__section h2,
    .header__section h3 {
        font-size: 40px;
    }
    .social__proof {
        padding-top: 40px;
    }
    .social__proof .social__logos,
    .terms__section  {
        padding-bottom: 40px;
    }
    .feature__section {
        padding: 40px 0 20px;
    }   
    .quote__section,
    .metrics__section,
    .CTA__section,
    .fAQ__section,
    .image__content__section,
    .our__values,
    .team__section {
        padding: 40px 0;
    }
    .contact__section {
        padding: 0 0 40px;
    }
    .feature2__content {
        padding-bottom: 0;
    }  
    .our__values {
        margin: 40px 0;
    }
    
}
@media (max-width: 991.98px) {
    .nav__btns .login__btn {
        border: 1px solid #D0D5DD;
        border-radius: 8px;
    }
    .site__navbar .navbar-nav .nav-link {
        padding: 12px 0;
    }
    .site__navbar ul li {
        margin-right: 0;
        background-color: #F2F4F7;
        border-bottom: 1px solid #fff;
        padding: 0 12px;
    }
    .site__navbar .navbar-nav {
        margin-top: 15px;
    }
    .cta__btn {
        margin-top: 20px;
    }
}
@media (max-width: 1199.98px) { 
    .image__content__section .header__section h3 {
        font-size: 48px;
    }
    .metrics__data {
        margin-top: 5px;
    }
    .metrics__data h3 {
        font-size: 40px;
    }
 } 
 .form-alert {
    color: red;
    position: absolute;
    bottom: -22px;
    font-size: 14px;
}
.form-success {
    color: darkgreen;
}
button.btn.btn-link.resent-otp {
    color: #52b116;
    padding: 0px 5px;
    text-decoration: none;
}
button.btn.btn-link.resent-otp:hover {
    text-decoration: underline;
}
.site__navbar .navbar-brand img, .footer__copyright img  {
    max-width: 142px;
}
.errorClass {
    border: 1px solid red !important;
}
.ccicon {
    height: 38px;
    /* position: absolute; */
    right: 6px;
    top: calc(50% - 17px);
    width: 60px;
}
.card__number #cardNumber {
    border-right: 0;
}