/*
AmeriFirst Finance
Website: https://amerifirstfinance.com

Created by: Social Points Media
Copyright 2025 Social Points Media - All Rights Reserved
Version: 1.0.0

Table of Contents
1. Root Variables
2. Default Css Styles
3. Navbar CSS Styles
4. Hero Section CSS Styles
5. Features Section CSS Styles
6. About Section CSS Styles
7. Pricing Section CSS Styles
8. FAQ Section CSS Styles
9. Contact Section CSS Styles
10. Footer Section CSS Styles
11. Responsive CSS Styles

 */

:root {
  --primary-color: #1E73A3 !important;
  --primary-color-hover: #155d7f !important;
  --secondary-color: #a51213 !important;
  --secondary-color-hover: #8f0f10 !important;
  --font-color: #333;
  --bg-blue: rgba(30, 115, 163, 0.05);

  --font-display: "League Spartan", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  --range-track-h: .5rem;
  --range-track-bg: #e5e7eb;
  --range-thumb-size: 2rem;
  --range-thumb-radius: 10px !important;
  --range-thumb-bg: var(--secondary-color);
  --range-thumb-ring: rgba(30, 115, 163, .25);
}

/*  Default Css Styles  */
a{
  color: var(--primary-color);
}
.section-pad{
  padding: 100px 0;
}
.pad-btm-25{
  padding-bottom: 25px;
}
.pad-btm-50{
  padding-bottom: 50px;
}
.pad-btm-100{
  padding-bottom: 100px;
}
.pad-top-25{
  padding-top: 25px;
}
.pad-top-50{
  padding-top: 50px;
}
.pad-top-100{
  padding-top: 100px;
}
.fs-14{
  font-size: 14px;
}
.fs-16{
  font-size: 16px;
}
.fs-18{
  font-size: 18px;
}
.fs-20{
  font-size: 20px;
}
.fs-22{
  font-size: 22px;
}
.bg-blue{
  background-color: var(--bg-blue);
}
.btn-primary {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: white;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
  background-color: var(--secondary-color-hover);
  border-color: var(--secondary-color-hover);
  color: white;
}
.text-primary {
  color: var(--primary-color) !important;
}
.text-secondary {
  color: var(--secondary-color) !important;
}
.bg-primary{
  background-color: var(--primary-color) !important;
}
.nav-pad{
  padding-top: 150px;
}
.input-group-text {
  color: #FFFFFF;
  background-color: var(--primary-color);
  padding: .1rem .5rem;
  font-size: 1.5rem;
}
.form-control-lg {
  padding: .5rem .5rem;
}
/* base */
input[type="range"].form-range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent; /* let tracks render */
}

/* WebKit (Chrome, Edge, Safari) */
.form-range::-webkit-slider-runnable-track{
  height: var(--range-track-h);
  background: var(--range-track-bg);
  border-radius: var(--range-thumb-radius);
}
.form-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  background: var(--range-thumb-bg);
  border: 2px solid #fff;
  border-radius: var(--range-thumb-radius);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  margin-top: calc((var(--range-thumb-size) - var(--range-track-h)) / -2); /* center thumb */
}
.form-range:focus::-webkit-slider-thumb{
  box-shadow: 0 0 0 .25rem var(--range-thumb-ring);
}

/* Firefox */
.form-range::-moz-range-track{
  height: var(--range-track-h);
  background: var(--range-track-bg);
  border-radius: var(--range-thumb-radius);
}
.form-range::-moz-range-thumb{
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  background: var(--range-thumb-bg);
  border: 2px solid #fff;
  border-radius: var(--range-thumb-radius);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.form-range:focus::-moz-range-thumb{
  box-shadow: 0 0 0 .25rem var(--range-thumb-ring);
}

/* Old MS (optional) */
.form-range::-ms-track{
  height: var(--range-track-h);
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.form-range::-ms-fill-lower,
.form-range::-ms-fill-upper{
  background: var(--range-track-bg);
  border-radius: var(--range-thumb-radius);
}
.form-range::-ms-thumb{
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  background: var(--range-thumb-bg);
  border: 2px solid #fff;
  border-radius: var(--range-thumb-radius);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
#breadcrumbs h1{
  font-size: 3rem;
  color: var(--primary-color);
  font-family: var(--font-display);
  text-transform: uppercase;
}
.section-title h2{
  font-size: 3rem;
  color: var(--primary-color);
  font-family: var(--font-display);
  text-transform: uppercase;
  margin-bottom: 0;
}
.btn .material-icons-outlined{
  vertical-align: sub;
}
.navbar-nav .dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}
.navbar-nav .dropdown-menu {
  transition: all 0.2s ease-in-out;
  padding-top: 13px;
  border: none;
 }

/*  Navbar CSS Styles  */
.navbar{
  background-color: #F3F3F3;
}
.navbar-brand img {
  transition: max-height 0.3s ease;
  max-height: 75px;
}
.navbar.scrolled .navbar-brand img {
  max-height: 45px;
}
.nav-item a, .dropdown-item a {
  font-size: 18px;
  line-height: 21px;
  padding: 5px 10px;
  margin: 0 10px;
}
.nav-item a:hover, .dropdown-item a:hover {
  color: var(--primary-color);
}
.nav-item .nav-link.active {
  color: var(--primary-color);
  font-weight: bold;
}
.dropdown-menu li a{
  margin-bottom: 5px;
}
.dropdown-menu li a:focus{
  background-color: transparent;
}
.header-contact a{
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--primary-color);
  text-decoration: none;
}
.header-contact a:hover{
  color: var(--primary-color-hover);
  text-decoration: none;
}
.header-contact a .material-icons-outlined{
  vertical-align: sub;
}

/*  Footer CSS Styles  */
footer{
  background-color: var(--primary-color);
  color: white;
}
footer a{
  color: white;
  text-decoration: none;
}
footer a:hover{
  color: #cccccc;
  text-decoration: none;
}
footer .footer-contact a{
  font-size: 1.25rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
}
footer ul li{
  margin-bottom: 10px;
}

/*  Modal CSS Styles  */
#prequalModal form .form-check-label{
  font-size: 10px;
}
#prequalModal .modal-md{
  max-width: 630px;
}
#prequalModal form .slider-group label{
  font-size: 20px;
  font-weight: 500;
}
#prequalModal form .slider-group label .funding{
  font-weight: bold;
  font-size: 3.5rem;
  color: var(--primary-color);
}
#prequalModal .slider-group span{
  color: var(--primary-color);
  font-weight: bold;
}

/*  Widget CSS Styles  */
#testimonials, #breadcrumbs{
  background-color: var(--bg-blue);
}
.testimonial-slider .card {
  min-height: 250px;
  border-color: var(--secondary-color);
}
#breadcrumbs ol li{
  text-transform: uppercase;
}
#breadcrumbs .breadcrumb-item a{
  color: var(--secondary-color);
  text-decoration: none;
}
#breadcrumbs .breadcrumb-item a:hover{
  color: var(--primary-color-hover);
  text-decoration: none;
}
#faq .accordion-button{
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--secondary-color);
}
#faq .accordion-button:not(.collapsed) {
  font-size: 1.2rem;
  font-weight: bold;
  color: #FFFFFF;
  background-color: var(--secondary-color);
}
#faq .accordion-body{
  font-size: 1.1rem;
}

/*  Index CSS Styles  */
#hero, #apply {
  background: url('../images/bg/hero-bg.png') no-repeat center center/cover;
}
#hero .hero-text h1{
  font-size: 90px;
  font-weight: bold;
  color: var(--primary-color);
  font-family: var(--font-display);
  text-transform: uppercase;
  margin-bottom: -25px;
  line-height: 1;
}
#hero .hero-text h1 span{
  font-size: 150px;
  color:#FFFFFF;
  -webkit-text-stroke: 5px var(--secondary-color);
}
#hero .hero-text h2{
  font-size: 65px;
  font-weight: bold;
  font-family: var(--font-display);
  color: #333333;
}
#hero .hero-text .list-inline-item{
  font-size: 30px;
}
#hero .hero-text .list-inline-item .material-icons-outlined{
  color: var(--secondary-color);
}
#hero form h2, #prequalModal form h2{
  font-size: 2.5rem;
  color: var(--secondary-color);
  font-weight: bold;
}
#hero form .slider-group label{
    font-size: 20px;
    font-weight: 500;
}
#hero form .slider-group label .funding{
  font-weight: bold;
  font-size: 3.5rem;
  color: var(--primary-color);
}
#hero .slider-group span, #prequalModal .slider-group span{
  color: var(--primary-color);
  font-weight: bold;
}
#hero .slider-group .min-max, #prequalModal .slider-group .min-max{
  font-size: 24px;
}
#hero .form-check-label{
  font-size: 10px;
}
#badges{
  background-color: var(--primary-color);
  border-top: 3px solid #CCCCCC;
  border-bottom: 2px solid #CCCCCC;
  color: #FFFFFF;
  padding: 50px 0;
}
#badges .material-icons-outlined{
  font-size: 80px;
}
#badges h2{
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 0;
}

#options .card{
  border: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  padding: 1.5rem 1rem;
}
#options .card:hover{
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  border: 1px solid var(--secondary-color);
}
#options .card .material-icons-outlined{
  font-size: 150px;
  color: var(--primary-color);
}
#options .card h2{
  font-size: 1.2rem;
  color: #666666;
}
#steps .step-card{
  position: relative;
  overflow: hidden;
}
#steps .step-card:hover{
   transform: translateY(-10px);
   box-shadow: 0 8px 16px rgba(0,0,0,0.6);
  cursor: pointer;
 }
#steps .step-card .material-icons-outlined{
  font-size: 36px;
  color: var(--primary-color);
  vertical-align: sub;
}
#steps .step-spacer .material-icons-outlined{
  font-size: 48px;
  color: var(--secondary-color);
  vertical-align: sub;
}
#steps .corner-ribbon{
  position: absolute;
  top: .75rem;               /* distance from top edge */
  right: -2.25rem;           /* push outward so the diagonal sits on the corner */
  z-index: 2;
  transform: rotate(45deg);
  background: var(--secondary-color); /* hook to your brand var */
  color: #fff;
  padding: .25rem 2.0rem .25rem 2.5rem;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  pointer-events: none;      /* decorative; don’t block clicks */
}
#steps .corner-ribbon::before,
#steps .corner-ribbon::after{
  content:"";
  position:absolute;
  bottom:-.25rem;
  width:.25rem; height:.25rem;
  background: rgba(0,0,0,.15);
  box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset;
}
#steps .corner-ribbon::before{ left:.35rem; transform: skewX(45deg); }
#steps .corner-ribbon::after{  right:.35rem; transform: skewX(-45deg); }
#steps .about-text p{
    font-size: 18px;
    color: #333333;
}
#steps ul{
  list-style-type: none;
  padding-left: 0;
}
#steps ul li{
  font-size: 22px;
  margin-bottom: 5px;
}
#steps ul li .material-icons-outlined{
  color: var(--primary-color);
  vertical-align: sub;
}

/*  Solution Pages  */
#solution .vertical-divider{
  border-right: 1px solid #CCCCCC;
  height: auto;
}
#solution .section-title h2{
  font-size: 2.5rem;
  font-weight: bold;
  font-family: var(--font-display);
  color: var(--primary-color);
}
#solution .highlight-icon .material-icons-outlined{
  font-size: 80px;
  color: var(--primary-color);
}
#solution .highlight-info p{
  color: var(--secondary-color);
  margin-bottom: 0;
}
#solution .highlight-info h4{
  color: var(--primary-color);
  font-size: 2.5rem;
}
#solution .solution-align{
  margin-top: auto !important;
  margin-bottom: auto !important;
}
#solution .vertical-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  font-size: 3rem;
  color: var(--secondary-color);
  letter-spacing: 2px;
  line-height: 1;
}#solution .section-body ul li, #solution .section-body p{
   font-size: 1.1rem;
 }
#solution .solution-list li{
  font-size: 1.3rem;
  margin-bottom: 10px;
}
#solution .section-body ul li a{
  text-decoration: none;
}
#solution .section-body ul li a:hover{
  text-decoration: none;
}

/*  Responsive CSS Styles Tablet  */
@media (max-width: 991px) {
  .navbar-nav .dropdown:hover .dropdown-menu {
    display: none;
  }
  .nav-pad{
    padding-top: 120px;
  }
  #hero .hero-text h1{
    font-size: 70px;
  }
  #hero .hero-text h1 span{
    font-size: 120px;
    -webkit-text-stroke: 4px var(--primary-color);
  }
  #hero .hero-text h2{
    font-size: 50px;
  }
  #hero .hero-text .list-inline-item{
    font-size: 25px;
  }
  #badges .material-icons-outlined{
    font-size: 65px;
  }
  #badges h2{
    font-size: 1.3rem;
  }
  #options h2{
    font-size: 2.5rem;
  }
}

/*  Responsive CSS Styles Mobile  */
@media (max-width: 767px) {
  .navbar-brand img {
    max-height: 45px;
  }
  .nav-item a, .dropdown-item a {
    margin: 0;
  }
  .nav-pad{
    padding-top: 100px;
  }
  #prequalModal form .slider-group label,   #hero form .slider-group label {
    text-align: center;
    margin-top: 20px;
  }
  #prequalModal form .slider-group label .funding,   #hero form .slider-group label .funding{
    line-height: 50px;
  }
  #hero .hero-text h1{
    font-size: 60px;
    margin-bottom: -15px;
  }
  #hero .hero-text h1 span{
    font-size: 95px;
    -webkit-text-stroke: 3px var(--primary-color);
  }
  #hero .hero-text h2{
    font-size: 50px;
  }
  #hero .hero-text .list-inline-item{
    font-size: 30px;
  }
  #hero form h2, #prequalModal form h2{
    font-size: 1.9rem;
  }
  #badges .material-icons-outlined{
    font-size: 50px;
  }
  #badges h2{
    font-size: 1.2rem;
  }
  #options h2{
    font-size: 2rem;
  }
  #options .card .material-icons-outlined{
    font-size: 100px;
  }
  #options .card h2{
    font-size: 1rem;
  }
  #solution .section-title h2{
    font-size: 2rem;
  }
  #solution .vertical-divider{
    border: none;
  }
  #solution .highlight-icon .material-icons-outlined{
    font-size: 65px;
  }
  #solution .highlight-info h4{
      font-size: 1.7rem;
  }
  #solution .solution-align{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  #solution .solution-right{
    margin-top: 3rem !important;
  }
}