@keyframes moveInLeft {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}
@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes fade-in {
    from {opacity: 0; transform: translateY(10px);}
    to {opacity: 1;}
}

.fade-in-element-intro { animation: fade-in 1.5s; }

.fade-in-element-feature { animation: fade-in 1.5s; }


html { scroll-behavior: smooth; }
body { font-family: 'Dosis', sans-serif; }
a { color: white; text-decoration: none; font-size: 16px; }

.header { display: flex; flex-direction: row; }
 /* Navigation on Load */
.nav-menus { width: 30%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px 0; background-color: #0F0F0F; }

.hero-nav { width: 100%; display: flex; flex-direction: row; justify-content: space-around; align-items: center; padding: 15px 0; background-color: #0F0F0F; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }

.logo { font-size: 34px; text-align: center; margin: 10px 0; color: black; }

.nav-items { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }

.nav-item { text-decoration: none; font-size: 14px; margin: 0px; text-align: center; background-color: #D4BA71; 
    padding: 5px 5px; width: 85%; border-radius: 5px; transition: all, .3s; font-weight: 500; animation-name: moveInLeft; animation-duration: 2s; color: black; }
.nav-item a { color: black; }    
.phone { color: white; animation-name: moveInLeft; animation-duration: 2s; }
.nav-item:hover { background-color: #b49b54; }

.hero-nav-items { display: flex; flex-direction: row; padding:10px 0; }
.hero-nav-item { color: rgb(228, 228, 228); text-decoration: none; font-size: 15px; margin: 10px 10px; text-align: center; }

.active { border-bottom: 3px solid white; }

/* Navigation on Scroll */

.scroll-nav-menu { display: none; }
.scrolled { display: flex; flex-direction: row; justify-content: center; align-items: center; position: fixed; background-color: #3B4483;  color: white; width: 100%; top: 0; left: 0; z-index: 20; padding: 20px 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; }


.hero { width: 70%; min-height: 100vh; background-color: rgb(80, 80, 80); background: url("img/home-hero3.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.hero-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 0px; min-height: 200px; animation-name: moveInRight; animation-duration: 2s; background-color: rgba(0, 0, 0, 0.50); border-radius: 10px; }
.hero h1 { font-size: 28px; color: white; text-align: center; width: 70%; margin: 10px 0; }
.hero h6 { font-size: 20px; color: white; text-align: center; width: 70%; margin: 10px 0; }

.home-btn { width: 20%; background-color: #D4BA71; text-decoration: none; padding: 22px 40px; font-weight: 500; text-align: center; color: black; border-radius: 5px; margin: 20px 0; transition: all, .3s; }
.home-btn:hover { background-color: #b39952; }
.home-btn-one { background-color: red; color: white; margin-top: 0px; margin-bottom: 0px; padding: 8px 20px; }
.home-btn-one:hover { color: black; }

.home-apply-btn { background-color: black; color: #D4BA71; width: 50%; }
.home-apply-btn:hover { color: black; }


@media only screen and (max-width: 900px) {

    .header { display: flex; flex-direction: column-reverse; }

    .hero { width: 100%; min-height: 270px; background-color: rgb(80, 80, 80); background: url("img/home-hero3.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .hero-wrapper { margin-bottom: 0px; min-height: 200px; background-color: rgba(0, 0, 0, 0.55); width: 90%; }
    .hero h1 { font-size: 24px; color: white; text-align: center; width: 70%; margin: 10px 0; }
    .home-btn { width: 60%; }
    
    .home-btn-one {margin-top: 0px; margin-bottom: 0px; }
    .nav-menus { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px 0; background-color: #0F0F0F; }

    /* .hero-nav { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 5px 0; background-color: #3B4483; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } */

    .hero-nav-item { color: black; font-weight: 700; text-decoration: none; font-size: 14px; margin: 50px 5px; text-align: center; }

}


/* Intro */

#intro { padding: 50px 0; }

.intro-wrapper { display: flex; flex-direction: row; justify-content: center; align-items: center; }
/* .intro-img { width: auto; height: 200px; margin: 20px 0; } */
.intro { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #3B4483; 
     border: 2px solid rgb(255, 255, 255); border-radius: 5px; margin: 5px 10px; padding: 10px; min-height: 300px; width: 28%; transition: all, .3s; cursor: pointer; }
.intro-text { background-color: rgba(0, 0, 0, 0.60); margin-top: 140px; width: 85%; height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 8px; }     
.intro1 { background-image: url("img/application.jpg"); } .intro2 { background-image: url("img/approved.jpg"); } 
.intro3 { background-image: url("img/sign.jpg"); background-position: center; } 
.intro:hover { background-color: #505cb4;  }


.intro h1 { font-size: 26px; margin: 5px 0; text-align: center; color: white; font-weight: 500; }
.intro p { font-size: 18px; margin: 10px 0; text-align: center; color: rgb(255, 255, 255); font-weight: 500; }


@media only screen and (max-width: 900px) {

    .intro-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; }  
    .intro { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #3B4483; 
        border: 2px solid rgb(255, 255, 255); border-radius: 5px; margin: 5px 10px; padding: 10px; min-height: 400px; width: 90%; transition: all, .3s; cursor: pointer; }

}



/* Features */

#features { padding: 50px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.section-heading { width: 60%; font-size: 26px; text-align: center; margin: 10px 0; font-weight: 500; }
.section-subheading { font-size: 17px; text-align: center; width: 60%; letter-spacing: .3px; line-height: 22px; margin: 10px 0; font-weight: 500; }

.features-wrapper { margin: 50px 0; }

.feature { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; margin: 50px 0; }
.feature-text-wrapper { width: 40%; padding: 35px 20px; display: flex; flex-direction: column; justify-content: start; align-items: flex-start; min-height: 100px; background-color: rgba(255, 255, 255, 0.75); border: 1px solid rgb(189, 189, 189); border-radius: 5px; z-index: 1; }
.feature-text-wrapper1, .feature-text-wrapper3 { margin-right: -80px; margin-top: -100px; }
.feature-text-wrapper2, .feature-text-wrapper4 { margin-left: -80px; margin-bottom: -100px; }
.feature-text-wrapper5, .feature-text-wrapper7 { margin-right: -80px; margin-top: 50px; }
.feature-text-wrapper6 { margin-left: -80px; }
.feature-text-wrapper h1 { font-size: 28px; margin: 10px 0; text-align: left; font-weight: 500; }
.feature-text-wrapper h2 { font-size: 22px; margin: 10px 0; text-align: left; font-weight: 500; }
.feature-text-wrapper p { font-size: 19px; line-height: 20px; letter-spacing: .3px; margin: 5px 0; text-align: left; font-weight: 500; }

.feature-img { width: 50%; background-color: rgb(175, 175, 175); border: 2px solid black; border-radius: 5px; }



@media only screen and (max-width: 900px) {

    .section-heading { width: 90%; font-size: 26px; text-align: center; margin: 10px 0; font-weight: 500; }
    .section-subheading { font-size: 17px; text-align: center; width: 90%; letter-spacing: .3px; line-height: 22px; margin: 10px 0; font-weight: 500; }

    .feature { display: flex; flex-direction: column-reverse; margin: 50px 0; }
    #bankruptcy, #immigrants, #self-employed { display: flex; flex-direction: column; }
    .feature-text-wrapper { width: 90%; padding: 35px 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100px; }

    .feature-text-wrapper1, .feature-text-wrapper3 { margin-right: 0px; margin-top: -30px; }
    .feature-text-wrapper2, .feature-text-wrapper4 { margin-left: 0px; margin-bottom: 0; margin-top: -30px; }
    .feature-text-wrapper5, .feature-text-wrapper7 { margin-right: 0px; margin-top: -30px; }
    .feature-text-wrapper6 { margin-left: 0px; margin-top: -30px }

    .feature-text-wrapper h1 { font-size: 25px; margin: 10px 0; text-align: center; font-weight: 500; }
    .feature-text-wrapper p { font-size: 17px; line-height: 20px; letter-spacing: .3px; margin: 5px 0; text-align: center; font-weight: 500; }

    .feature-img { width: 90%; background-color: rgb(175, 175, 175); border: 2px solid black; border-radius: 5px; }

    .phone { color: white; animation-name: moveInLeft; animation-duration: 2s; }
}

a[href^="tel"] { color: white; }

/* Footer */

.footer { min-height: 200px; background-color: #2F2F2F; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.footer h1 { font-size: 24px; color: white; }
.footer-cities { display: flex; flex-direction: row; margin: 20px 0; }
.footer-cities p { margin: 0 15px; font-size: 14px; color: white; }

@media only screen and (max-width: 900px) {

    .footer { min-height: 200px; background-color: #2F2F2F; display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .footer h1 { font-size: 24px; color: white; }
    .footer-cities { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; margin: 20px 0; }
    .footer-cities p { margin: 10px 10px; font-size: 1px; color: white; }

}



/* About Page */



#about-us { padding: 50px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }

/* Contact Page */

.contact-section { display: flex; flex-direction: row; padding: 50px 0; }

.contact-form { display: flex; flex-direction: column;  justify-content: center; align-items: center; margin-left: auto; margin-right: auto; width: 40%; }

#contact { width: 100%; }


.input { width: 100%; margin: 5px 0 20px 0; padding: 10px 5px; }

.submit-btn { background-color: rgb(194, 0, 0); color: white; border: none; padding: 20px 55px; border-radius: 5px; margin: 10px 0; }

.contact-text-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 50px 0; width: 50%; }
.contact-text-wrapper h2 { font-size: 28px; color: black; font-weight: 500; }
.contact-text-wrapper h6 { font-size: 20px; color: black; font-weight: 500; transition: all, .2s; }

.contact-info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin: 0 50px; }

.address { display: flex; flex-direction: row; justify-content: center; align-items: center; margin: 15px 0; }

.address-link:hover { color: rgb(112, 112, 112); }

.contact-icon { width: 20px; height: auto; margin: 0 20px; }
.calender-icon { width: 25px; height: auto; }



/* City Pages */
.city-nav-menu { background-color: #E9E9E9; width: 25%; }
.city-nav-items { animation-name: moveInLeft; animation-duration: 2s; }

.city-hero { min-height: 450px; width: 75%; background: url("img/homehero.jpg"); background-repeat: no-repeat;  background-size: cover; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
/* .child-tax-hero { background-image: none; } */
.city-hero-wrapper { width: 70%; margin-bottom: 150px;  }
.about-hero { background: url("img/about-us.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; }
.contact-hero { background: url("img/home-hero3.jpg"); background-repeat: no-repeat; background-position: center; 
    background-size: cover; }
.about-heading, .home-btn { animation-name: moveInRight; animation-duration: 2s; }

.city-nav-items li { color: white; text-decoration: none; font-size: 20px; margin: 15px 10px; text-align: center; font-weight: 500; }
.city-scrolled { display: flex; flex-direction: row; justify-content: center; align-items: center; position: fixed; background-color: #3B4483; color: white; width: 100%; top: 0; left: 0; z-index: 20; padding: 10px 0; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px; }

#description { padding: 70px 0; display: flex; flex-direction: row; justify-content: center; align-items: center; }
.description { width: 45%; margin-left: auto; margin-right: -75px; margin-bottom: 50px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 15px 30px; background-color: rgba(238, 238, 238, 0.87); 
    border: 2px solid rgb(95, 95, 95); border-radius: 5px; z-index: 5; }

#description h1 { font-size: 28px; margin-top: 10px; margin-bottom: 25px; text-align: left; font-weight: 500; }
#description p { font-size: 18px; margin: 5px 0; letter-spacing: .1px; text-align: left; font-weight: 500; }
.btn-wrapper { margin-top: 30px; margin-bottom: 10px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.city-btn { width: 100%; margin: 5px 10px; border: 1px solid rgb(139, 139, 139); font-size: 17px; padding: 22px 30px; }
.city-btn1 { width: 100%; background-color: black; color: white; }

.page-description { width: 90%; margin-left: auto; margin-right: auto; margin-bottom: 50px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 15px 30px; } 

.write-review-wrapper { width: 90%; margin-left: auto; margin-right: auto; margin-bottom: 50px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } 
.review-heading { margin: 0; color: black; }
.review-subheading { margin-top: 0; margin-bottom: 40px; }
input { width: 100%; padding: 8px; font-size: 16px; border-radius: 3px; border: 1px solid rgb(221, 221, 221); margin: 10px 0; }
.review-label { margin: 0; font-size: 20px; }
textarea { width: 100%; padding-bottom: 50px; }
.submitButton { width: 30%; padding: 10px 40px; margin: 25px 0; background-color: #D4BA71; color: black; transition: all, .3s; }
.submitButton:hover { background-color: #b39952; }

.review-btn { font-weight: 500; padding: 14px 40px; margin-bottom: 30px; text-align: center; background-color: #D4BA71; color: black; transition: all, .3s; }
.review-btn:hover { background-color: #b39952; }
.specials-btn { padding: 17px 30px; }

.review-heading-btn-wrapper { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; margin: 0; } 

@media only screen and (max-width: 900px) {

    .review-heading-btn-wrapper { display: flex; flex-direction: column;  justify-content: center; align-items: center  }

    .submitButton { width: 100%; padding: 10px 40px; margin: 25px 0; background-color: #D4BA71; color: black; transition: all, .3s; }

    .city-hero { min-height: 280px; width: 100%; background: url("img/homehero.jpg"); background-repeat: no-repeat;  background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; }

    .city-nav-menu { display: none; }

    .city-hero-wrapper { width: 90%; margin-bottom: 0px;  }

    #description { padding: 20px 0; display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; }
    .description { width: 90%; margin-left: auto; margin-right: auto; margin-bottom: 50px; margin-top: -30px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15px 10px; }

    #description h1 { font-size: 24px; margin-top: 10px; margin-bottom: 25px; text-align: center; font-weight: 500; }
    #description h2 { font-size: 20px; margin-top: 10px; margin-bottom: 25px; text-align: center; font-weight: 500; }
    #description p { font-size: 16px; margin: 5px 0; letter-spacing: .1px; text-align: center; font-weight: 500; }
    .btn-wrapper { margin-top: 30px; margin-bottom: 10px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .city-btn { width: 100%; margin: 5px 10px; border: 1px solid rgb(139, 139, 139); font-size: 17px; padding: 12px 30px; }
    .city-btn1 { width: 100%; background-color: black; color: white; }

}

.new-car { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; margin: 20px 0; }
.feature-text-wrapper-description { width: 40%; margin-right: -80px; margin-top: 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.feature-text-wrapper-description p { text-align: center; }
.new-car-img { width: 60%; }


/* .about-page-img { background: rgb(143, 143, 143); min-height: 600px; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; } */
.about-page-img, .city-page-img { width: 55%; z-index: 0; }

footer { background: rgb(143, 143, 143); display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; }
.contact-section h1 { font-size: 24px; color: white; }
.contact-section p { font-size: 19px; color: rgb(226, 226, 226); }

.footer-cities h1 { font-size: 24px; color: white; }
.footer-cities p { font-size: 16px; color: rgb(226, 226, 226); }

@media only screen and (max-width: 900px) {

    .new-car { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; margin: 20px 0; }

    .feature-text-wrapper-description { width: 90%; padding: 35px 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100px; margin: 0; }
    .about-page-img, .city-page-img { width: 100%; z-index: 0; }

    .contact-section { display: flex; flex-direction: column; padding: 50px 0; }

    .contact-form { display: flex; flex-direction: column;  justify-content: center; align-items: center; margin-left: auto; margin-right: auto; width: 100%; }

    #contact { width: 90%; }


    .input { width: 100%; margin: 5px 0 20px 0; padding: 10px 5px; }

    .submit-btn {  transition: all, .3s; border: none; padding: 12px 55px; border-radius: 5px; margin: 10px 0; }

    .contact-text-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 50px 0; width: 100%; }
    
    .contact-text-wrapper h2 { font-size: 24px; color: black; font-weight: 500; }
    .contact-text-wrapper h6 { font-size: 18px; color: black; font-weight: 500; }

    .contact-info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin: 0 50px; }

    .address { display: flex; flex-direction: row; justify-content: center; align-items: center; margin: 10px 0; }

    .contact-icon { width: 15px; height: auto; margin: 0 20px; }
    .calender-icon { width: 20px; height: auto; }

}

.apply-hero { width: 70%; min-height: 100vh; background-color: white;   display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
@media only screen and (max-width: 900px) {

    .apply-hero { width: 100%; min-height: 100vh; background-color: white;   display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }

    .about-hero { background: url("img/about-us.jpg"); min-height: 250px; background-size: cover; background-repeat: no-repeat; }
    .contact-hero { background: url("img/home-hero3.jpg"); min-height: 300px; background-size: cover; background-repeat: no-repeat; }
}

.testimonial-hero-wrapper { width: 100%; background-color: rgb(255, 255, 255); color: black; }

.testimonial-wrapper { width: 100%; padding: 25px 8px; background-color: white; border: 2px solid rgb(223, 223, 223); display: flex; flex-direction: column; margin: 20px 0; }
.testimonial-wrapper p { font-size: 24px; color: black; }
.testimonial-wrapper h3 { font-size: 23px; color: black; font-weight: 600; margin: 15px 0 12px 0; }
.testimonial-wrapper h4 { font-size: 20px; color: black; font-weight: 400;}


@media only screen and (max-width: 900px) {
    .testimonial-hero-wrapper { width: 100%; margin: 0; } 
}



#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: black; /* Set a background color */
    color: #D4BA71; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 5px 20px 10px 20px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 30px; /* Increase font size */
    transition: all, .3s;
  }
  
  #myBtn:hover {
    background-color: #a08742; /* Add a dark-grey background on hover */
  }