@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
button:focus {
    outline: none;
}

@font-face {
    font-family: font-lato-black;
    src: url(../font/Lato/Lato-Black.ttf);
}

body {
    font-family: 'Roboto', sans-serif;
}

section {
    overflow: hidden;
}

.text-blue {
    color: #04a1ec;
    font-weight: 700;
}

.pt-150 {
    padding-top: 150px;
}

.btn_theme {
    background: #fff;
    color: #2b31a3;
    padding: 10px 50px;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}

.btn_theme:hover {
    color: #054453;
}

.btn_theme-alt {
    background: #2b31a3;
    color: white;
    padding: 10px 50px;
    border: 1px solid #2b31a3;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}

.btn_theme-alt:hover {
    color: #054453;
    background-color: white;
}

/* HEADER */

.main-header {
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

.main_navigation {
    background-color: white;
}

.main_navigation.fixed-top {
    transition: all 0.8s ease-in-out;
}

.main_navigation .nav-link {
    color: black;
    font-weight: 500;
    font-size: 12px !important;
}

.main_navigation .navbar-nav .dropdown:hover .menu_dropdown {
    display: block !important;
}

.main_navigation .navbar-nav .dropdown-item:hover {
    color: #2b31a3;
    text-decoration: none;
    background-color: #f8f9fa;
}

.find_link {
    border: 1px solid gray;
}

.main_navigation .collapse .nav-item:hover .nav_btn {
    background-color: #2b31a3;
    border-color: #2b31a3;
    color: white !important;
}

.main_logo {
    width: 180px;
}

.main_navigation .collapse .nav-link {
    padding: 25px 12px;
    position: relative;
}

.main_navigation .collapse .nav_btn {
    padding: 10px 15px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: black !important;
    font-weight: 700;
}

.btn_nav_search {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white !important;
}

.main_navigation .collapse .nav-item:hover .btn_search {
    border: 2px solid #2b31a3 !important;
    background-color: white !important;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active {
    color: #2b31a3 !important;
}

.main_navigation .nav-link::after {
    content: "";
    border-bottom: 3px solid #2b31a3;
    display: inline-block;
    width: 35%;
    height: 5px;
    opacity: 0;
    position: absolute;
    bottom: 20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.main_navigation .nav-link:hover::after, .main_navigation .nav-link.active::after, .main_navigation .nav-item.active .nav-link::after {
    opacity: 1;
}

.btn-nav {
    background-image: linear-gradient( to top right, #2b31a3 30%, #2b31a399 67%, #2b31a3 100%);
    color: white !important;
    border-radius: 56px;
    background-size: 200% auto;
    color: white !important;
    border-radius: 56px;
    margin: auto;
    font-weight: 500 !important;
    letter-spacing: 2px;
    font-size: 14px !important;
    padding: 12px 20px !important;
    transition: all 0.3s ease-in-out;
}

.btn-nav:hover {
    background-position: right center;
}

.main_navigation .nav-link.btn-nav::after {
    display: none !important;
}

@media (min-width: 768px) {
    .main-header.is-scrolled {
        -webkit-transform: translateY(-32px);
        transform: translateY(-32px);
    }
}

/* HEADER-END */

/* FOOTER */

.footer-bg {
    background-color: #1a1a1a;
    padding: 70px 0px;
    background: url("../images/footer_bg.jpg");
}

footer p {
    color: #ffffff;
}

.footer-a h5 {
    color: white;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.footer-a ul li a {
    color: #ffffff;
    margin-bottom: 10px;
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

.footer-a ul li {
    margin-bottom: 15px;
}

.footer-a ul li:hover a {
    text-decoration: none;
    color: #6b74db;
}

/* FOOTER-END */

/* HERO */

.step_tag {
    width: fit-content;
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 49%, 0% 0%);
    padding: 5px 20px 5px 5px;
    color: #fff;
    background-color: #2b31a3;
}

.hero_bg {
    background-image: linear-gradient(45deg, black, #00000036), url(../images/car-123.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 650px;
}

.about_us {
    margin-top: 70px;
    width: 100%;
    height: 450px;
    background-image: linear-gradient(to right, #0000009e, #0000008c), url(../images/hero_bg2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*  */
    display: flex;
    justify-content: center;
    align-items: center;
}

.about_us h1 {
    font-weight: 800;
    margin: 0;
    color: #ffffffbf;
    font-size: 56px;
    text-transform: uppercase;
}

.about_us h1 u {
    color: #2b31a3;
}

.bread_crums {
    background: #f9f9f9;
    padding: 5px 0;
}

.bread_crums h4 {
    margin: 0;
    font-size: 13px;
    color: #949494;
}

.bread_crums h4 a {
    color: #949494;
}

.bread_crums h4 span {
    margin: 0 4px;
    color: #949494;
}

/* HERO-END */

/* MODAL*/

.modal-content {
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    border-radius: 0;
}

/* Removing the border radius on btns just in modal */

.modal-content .btn {
    border-radius: 0;
}

/* Adjusting  the close button */

.close {
    font-size: 30px;
    font-weight: 300;
}

.modal-header .close {
    margin-top: -10px;
}

/* MODAL END */

/* MODAL FORMS */

#msform {
    text-align: center;
    position: relative;
    margin-top: 20px
}

#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative
}

.form-card {
    text-align: left
}

#msform fieldset:not(:first-of-type) {
    display: none
}

#msform input, #msform textarea {
    padding: 8px 15px 8px 15px;
    border: 1px solid #ccc;
    border-radius: 0px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    color: #2C3E50;
    background-color: #ECEFF1;
    font-size: 16px;
    letter-spacing: 1px
}

#msform input:focus, #msform textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #673AB7;
    outline-width: 0
}

#msform .action-button {
    width: 100%;
    background: #2b31a3;
    font-weight: bold;
    color: #fff;
    border: 1px solid #2b31a3;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px 5px;
    float: right;
    transition: all 0.35s ease-in-out;
}

#msform .action-button:disabled, #msform .action-button[disabled] {
    background-color: rgb(173, 170, 170);
    border: 1px solid rgb(173, 170, 170);
    ;
}

/* #msform .action-button:hover, #msform .action-button:focus {
    color: white;
    background: #2b31a3;
} */

#msform .action-button-previous {
    width: 100px;
    background: #616161;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px 10px 0px;
    float: right
}

#msform .action-button-previous:hover, #msform .action-button-previous:focus {
    background-color: #000000
}

.custom-input {
    border: 1px solid #ccc;
    background: #eceff1;
}

.custom-input input {
    width: 60% !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-right: 1px solid !important;
    border-color: #cccccc !important;
}

.custom-input-2 .custom-field {
    border: 1px solid;
    background: #eceff1;
    border-color: #cccccc;
    padding: 12px 10px 11px 19px;
    width: 10% !important;
}

.custom-input-2 input {
    width: 85% !important;
}

.custom-input-3 input {
    width: 75% !important;
}

.custom-input-3 .custom-field {
    border: 1px solid !important;
    background: #eceff1 !important;
    border-color: #cccccc !important;
    padding: 11px 20px !important;
}

.card {
    z-index: 0;
    border: none;
    position: relative
}

.fs-title {
    font-size: 20px;
    color: #000000;
    font-weight: normal;
}

.purple-text {
    color: #673AB7;
    font-weight: normal
}

.steps {
    font-size: 20px;
    color: gray;
    font-weight: normal;
    text-align: right;
}

.fieldlabels {
    color: gray;
    text-align: left;
    margin-bottom: 10px;
    font-size: 12px;
}

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey
}

#progressbar .active {
    color: #673AB7
}

#progressbar li {
    list-style-type: none;
    font-size: 15px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 400
}

#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: -1
}

.progress {
    height: 5px;
    border-radius: 0;
}

.progress-bar {
    background-color: #2b31a3;
}

.fit-image {
    width: 100%;
    object-fit: cover
}

.agree_terms p {
    font-size: 14px;
    text-align: left !important;
}

.agree_terms input {
    width: 20% !important;
}

/* MODAL FORMS END */

/* MODAL CONTENT */

.vehicle_card {
    border: 1px solid #ebebeb;
    border-radius: 0;
    transition: all 0.35s ease-in-out;
    height: 50px;
}

a.active .vehicle_card {
    border-top: 1px solid #c2e9fb;
    border-right: 1px solid #c2e9fb;
    border-radius: 0;
    border-left: 1px solid #c2e9fb;
    border-bottom: 2px solid #2b31a3;
    transform: translateY(-3px);
    cursor: pointer;
}

.vehicle_card:hover {
    border-top: 1px solid #c2e9fb;
    border-right: 1px solid #c2e9fb;
    border-radius: 0;
    border-left: 1px solid #c2e9fb;
    border-bottom: 2px solid #2b31a3;
    transform: translateY(-3px);
    cursor: pointer;
}

.house_card {
    width: 40%;
}

.house_card p {
    margin: 0;
    padding: 14px 0 0 35px;
}

.vehicle_card p {
    margin: 0%;
}

.step_1 a {
    text-decoration: none;
    color: #000000 !important;
}

.confirmation_code_box {
    background: #04a1ec;
    color: #fff;
    height: 24px;
    font-weight: 500;
}

/* MODEL CONTENT END */

/* MAIN SECTION */

.main img {
    height: 275px;
}

.main p {
    font-size: 14px;
}

/* MAIN SECTION END */

/* INNER-MODAL */

.inner-modal i {
    color: #03c700;
    font-size: 50px;
}

.inner-modal p {
    font-size: 14px;
}

.btn_submit {
    color: #2b31a3;
    border: 1px solid #2b31a3;
    padding: 15px 0;
    border-radius: 5px;
    width: 100%;
    transition: all 0.35s ease-in-out;
}

.btn_submit:hover {
    background: #2b31a3;
    color: #fff;
}

.code_box {
    border: 1px solid #eaeaea;
    height: 50px;
}

.code_box p {
    margin: 0%;
    padding: 10px 0 0 0;
    font-size: 20px;
    font-weight: 100;
}

/* INNER-MODAL END */

/* submit modal */

.submit_modal i {
    font-size: 20px;
    color: #03c700;
}

/* submit modal end*/

.about_bg {
    position: relative;
    background-image: url(../images/about_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.about_main {}

.about_content {
    padding: 50px 45px 50px 65px;
    background-color: rgba(0, 0, 0, 0.85) !important;
}

.about_content span {
    font-size: 14px;
    color: white;
    font-family: 'Roboto';
}

.about_content h1 {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 40px;
    line-height: 50px;
    letter-spacing: 0px;
    color: white;
}

.separator {
    position: relative;
    margin-top: 10px;
    display: inline-block;
}

.separator::before {
    left: 0;
    margin-left: 0;
    content: '';
    display: block;
    position: absolute;
    margin: auto;
    left: 50%;
    height: 1px;
    width: 100px;
    bottom: -15px;
    background: #2b31a3;
    transition: width .8s ease, background-color .8s ease;
    -webkit-transition: width .8s ease, background-color .8s ease;
    -o-transition: width .8s ease, background-color .8s ease;
    -ms-transition: width .8s ease, background-color .8s ease;
    -moz-transition: width .8s ease, background-color .8s ease;
    margin-bottom: 6px;
    background-color: #2b31a3;
}

.separator::after {
    background-color: #2b31a3;
    width: 50px;
    display: block;
    margin: auto;
    position: absolute;
    content: "";
    height: 1px;
    background: #2b31a3;
    bottom: 0;
    left: 50%;
    transition: width .8s ease, background-color .8s ease;
    -webkit-transition: width .8s ease, background-color .8s ease;
    -o-transition: width .8s ease, background-color .8s ease;
    -ms-transition: width .8s ease, background-color .8s ease;
}

.about_content p {
    color: white;
    margin-top: 20px;
    line-height: 23px;
    font-weight: 100;
    font-size: 16px;
}

.about_content_inner i {
    color: white;
    font-size: 30px;
    margin-bottom: 15px;
}

.about_content_inner h6 {
    font-weight: 600;
    color: white;
    font-size: 14px;
}

.about_content_inner p {
    font-size: 14px;
    font-weight: 500;
    color: white;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

@media (min-width: 768px) {
    .main-header.is-scrolled {
        -webkit-transform: translateY(-32px);
        transform: translateY(-32px);
    }
}

@media screen and (max-width: 520px) {
    .step_main span {
        font-size: 75px;
        top: -114px;
        left: 0;
        transform: rotate( 0deg);
    }
    .about_content {
        padding: 20px 40px !important;
    }
    .about_content h1 {
        font-size: 30px;
    }
    .about_content p {
        font-size: 16px;
        margin-bottom: 15px;
    }
    .step_main_alt span {
        font-size: 75px;
        font-family: 'Rajdhani', sans-serif;
        color: #ffc94794;
        font-weight: bolder;
        position: absolute;
        top: -110px;
        left: 0;
        transform: rotate( 0deg);
    }
}

.choose_bg {
    padding: 70px 0px;
}

.choose_content .card {
    transition: all 0.3s ease-in-out;
    border-top: 3px solid #fcfcfc;
    height: 370px;
    box-shadow: 0 3px 11px 2px #00000012;
}

.choose_content .card:hover {
    border-top: 3px solid #2b31a3;
    box-shadow: 0 3px 11px 4px #00000031;
}

.choose_content .card .card-body {
    background-color: #fcfcfc;
    margin-bottom: -15px;
    padding-bottom: 0;
}

.choose_content .card .card-body h6 {
    font-size: 15px;
    font-weight: 600;
    color: #363636;
    text-transform: uppercase;
}

.choose_content .card .card-body i {
    font-size: 30px;
    color: #2b31a3;
}

.choose_content .card-body {
    background-color: #fcfcfc;
}

.choose_content .card .card-body p {
    color: #b7b7b7;
    font-size: 14px;
}

.car_main .car_inner {
    margin-bottom: 60px;
}

.car_main .car_inner i {
    color: #2b31a3;
    font-size: 30px;
    margin-bottom: 15px;
}

.car_main .car_inner h6 {
    font-size: 15px;
    font-weight: 600;
    color: #363636;
    text-transform: uppercase;
}

.car_main .car_inner p {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
}

.car_img {
    position: relative;
    cursor: pointer;
}

.car_img img {
    transition: all 0.5s ease-in-out;
    position: absolute;
    left: 50%;
    width: 100%;
    top: 0%;
    transform: translate(-50%, -40%);
}

.car_img img:hover {
    transform: translate(-50%, -50%);
}

.car_bg {
    padding: 80px 0px;
}

.call_us_bg {
    background-image: url(../images/call_us_img.jpg);
    background-size: cover;
    background-position: center;
}

.call_us_main {
    background-color: #f6f6f6;
    text-align: center;
    padding: 40px 25px;
}

.call_us_main h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 55px;
    text-transform: uppercase;
    color: #363636;
}

.call_us_main span {
    font-size: 18px;
    font-style: italic;
    font-weight: 600;
    display: block;
    color: #999999;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
}

.call_us_main strong {
    font-size: 40px;
    font-weight: 700;
    display: block;
    color: #2b31a3;
}

.call_us_main p {
    font-size: 18px;
    color: #999999;
    font-weight: 600;
    display: block;
    text-transform: uppercase;
}

.call_us_main a {
    color: #2b31a3;
    font-weight: 600;
}

.dealer_main {
    padding: 70px 0px;
}

.dealer_main .dealer_content h3 {
    font-size: 28px;
    padding-bottom: 10px;
    position: relative;
    margin-bottom: 30px;
    font-weight: 600;
    color: #363636;
}

.dealer_main .dealer_content h3::after {
    position: absolute;
    content: "";
    width: 50px;
    height: 2px;
    background: #2b31a3;
    left: 0;
    bottom: 0;
}

.dealer_main .dealer_content strong {
    font-size: 16px;
    color: #999999;
}

.dealer_main .dealer_content p {
    font-size: 14px;
    color: #999999;
}

.dealer_main .dealer_content .icon {
    width: 70px;
    cursor: pointer;
    height: 70px;
    float: left;
    margin-right: 20px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #f6f6f6;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.dealer_main .dealer_content .icon:hover {
    border: 1px solid #2b31a3;
}

.dealer_main .dealer_content .icon i {
    font-size: 23px;
    background: #f6f6f6;
    color: #999;
    display: block;
    border-radius: 50%;
    margin: 9px 10px 10px 9px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.dealer_main .dealer_content .icon:hover i {
    background: #2b31a3;
    color: white;
}

.dealer_main .dealer_content h6 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #363636;
    text-transform: uppercase;
}

.contact {
    background-image: url(../images/contact_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

.contact .contact_form {
    background: #0000008a;
    background-position: center;
    background-size: 100% 100%;
    border-radius: 10px;
    border: 2px solid #21299f;
}

.contact .contact_form h2 {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 40px;
    line-height: 50px;
    letter-spacing: 0px;
    color: #fff;
}

.contact .contact_form .form-group label {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Roboto';
}

.contact .contact_form .form-group input {
    background: transparent;
    color: #fff;
    height: 50px;
    font-size: 14px;
}

.contact .contact_form .form-group textarea {
    background: transparent;
    color: #fff;
    font-size: 14px;
}

.contact .contact_form .form-group input:focus {
    box-shadow: none;
    outline: none;
}

/* loan calculator */

.laon_bg img {
    height: 275px;
    position: absolute;
    padding: 50px 0 0 0;
    top: 0;
    width: 100%;
}

.btn_credit {
    border-left: 2px solid;
    border-right: 2px solid;
    border-top: 2px solid;
    border-bottom: 4px solid;
    border-radius: 0;
    border-color: #e6e6e6;
    color: #e6e6e6;
    background: #fff;
    padding: 15px 25px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.btn_credit:hover, .btn_credit.active {
    border-color: #07a3ee;
    color: #07a3ee;
}

.loan_calculator h2 {
    margin-bottom: 15px;
    font-size: 36px;
    font-weight: 400;
    color: #4a4a4a;
}

.loan_calculator p {
    font-size: 14px;
    color: #4a4a4a;
    line-height: 2;
    margin-bottom: 25px;
}

.loan_calculator form label {
    color: #929292;
    font-size: 14px;
}

.loan_calculator form input, .loan_calculator form select {
    color: #929292;
    height: 50px;
}

.loan_calculator h5 {
    font-size: 16px;
    color: #929292;
}

.loan_calculator .loan_payment .calculator {
    background: #f8f9fa;
}

.loan_calculator .credit_rating {
    display: flex;
}

.btn_approve_2 {
    border: 2px solid #067bb1;
    padding: 15px;
    width: 80%;
    color: #067bb1;
    font-size: 18px;
    transition: all 0.3s ease-in-out;
}

.btn_approve_2:hover {
    background: #067bb1;
    color: #fff;
}

.btn_approve {
    background-image: linear-gradient( 45deg, #10a7f0, #53c5f9);
    border: 0;
    width: 80%;
    padding: 15px;
    color: #fff !important;
    font-size: 18px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    box-shadow: 8px 8px 25px rgb(0 0 0 / 16%);
    transition: all 0.3s ease-in-out;
}

.btn_approve:hover {
    transform: translateY(-1px);
}

.loan_calculator .loan_payment {
    box-shadow: 0 3px 20px 0 rgb(0 0 0 / 16%);
    border-radius: 10px;
    margin-top: 100px;
}

.loan_calculator .payment {
    background: #fff;
}

.loan_calculator .payment h6 {
    font-size: 22px;
    color: #929292;
    font-weight: 400;
    padding-bottom: 25px;
}

.loan_calculator .payment h5 {
    font-size: 14px;
    font-weight: 400;
    color: #929292;
}

.loan_calculator .payment span {
    font-size: 44px;
    font-size: 48px;
    color: #4a4a4a;
    font-weight: 600;
}

.loan_calculator .payment h1 {
    font-size: 68px;
    color: #4a4a4a;
    position: absolute;
    top: 70px;
    left: 85px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.loan_calculator .payment h4 {
    color: #4a4a4a;
}

.budget h2, .next_car h2 {
    font-size: 36px;
    margin-bottom: 30px;
    color: #4a4a4a;
}

.budget p {
    color: #4a4a4a;
    font-size: 17px;
    margin-bottom: 20px;
}

.next_car .find_card {
    width: 100%;
    box-shadow: 0 3px 20px 0 rgb(0 0 0 / 16%);
}

.payment .border-payment {
    border-right: 1px solid #929292;
}

@media screen and (max-width:500px) {
    .loan_calculator .credit_rating {
        display: block;
        text-align: center;
    }
    .payment .border-payment {
    border-bottom: 1px solid #929292;
    border-right: 0px;
    }
}