@font-face {
    font-family: 'Arial Black';
    src: url('fonts/arial-black.woff') format('woff'),
      url('fonts/arial-black.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'Arial Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Arial Bold'), url('fonts/arial-bold.woff') format('woff');
  }

  #makingBetterTab .nav-item .nav-link,
  a.fw-bold,
  footer .fw-bold,
  #locations a.btn,
  .fw-arial-bold {
    font-family: 'Arial Bold', 'Arial' !important;
  }

  body,
  * {
    font-family: 'Arial', sans-serif !important;
    color: #000000 !important;
  }

  #makingBetterContent .card-better .card-header span.badge,
  a.btn,
  a.btn span,
  .f-arial-b,
  h6,
  .h6,
  h5,
  .h5,
  h4,
  .h4,
  h3,
  .h3,
  h2,
  .h2,
  h1,
  .h1,
  .f-arial-b span,
  h6 span,
  .h6 span,
  h5 span,
  .h5 span,
  h4 span,
  .h4 span,
  h3 span,
  .h3 span,
  h2 span,
  .h2 span,
  h1 span,
  .h1 span {
    font-family: 'Arial Black', sans-serif !important;
  }

  .bg-main {
    background-color: #000 !important;
    background-image: url('../img/dark/bg-main.png');
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: -3vh;
    /* background-size: 100%; */
  }

  .discount-rectangle {
    position: absolute;
    top: 0;
    right: 0px;
    background-color: #66CD00;
    color: #000;
    padding-top: 18px;
    font-size: 1.68rem;
    font-weight: bolder;
    line-height: 0.84;
    z-index: 9999;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
    border-top-left-radius: 0px;
    height: 115px;
    width: 85px;
  }

  .discount-rectangle>span {
    font-size: 1.87rem;
  }

  @media (max-width: 768px) {
    .discount-rectangle {
      padding: 10px 20px;
      font-size: 18px;
    }
  }

  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .custom-nav .nav-link {
    color: #FFF;
    font-weight: bold;
  }

  header .nav-link:hover,
  header .nav-link:focus,
  .nav-link.active {
    color: #66CD00 !important;
  }

  /* Hero */
  .hero_ {
    height: 55vh;
    position: relative;
  }

  .hero .title {
    line-height: 0.85;
    font-size: 6rem !important;
  }

  .hero .border-start.border-5 {
    padding-left: 15px;
  }

  .h-500 {
    height: 550px;
  }


  .big-title {
    font-size: 4.3rem;
  }

  .big-subtitle {
    font-size: 3.2rem;
  }

  .text-justify {
    text-align: justify;
  }

  .text-grey-b1 {
    color: #B1B1B1;
  }

  .bg-less-grey {
    background-color: #F7f7f7;
  }

  .bg-less-grey-9 {
    background-color: #F9F9F9;
  }

  .btn.btn-secondary:hover {
    color: #66CD00 !important;
    background-color: #212121 !important;
  }

  .advantage .carousel-advantage-list-controler .feature.active a {
    color: #66CD00 !important;
  }


  .bg-black {
    background: #000 !important;
  }

  .title {
    font-size: 5.5rem;
    line-height: 1;
  }

  .title2 {
    font-size: 2.875rem !important;
  }

  .title3 {
    font-size: 2.25rem !important;
  }

  .custom-p {
    font-size: 1.857rem !important;
    line-height: 1.3;
  }

  .title-better {
    font-size: 7.125rem;
    line-height: 0.85;
  }

  .about-title {
    font-size: 4rem;
  }

  .locations {
    background-color: #000 !important;
    background-image: url('../img/dark/green-lines.png');
    background-repeat: no-repeat;
    background-size: 100% 66%;
    background-position: center;
  }

  @media (min-width: 992px) {
    .locations .section-border {
      border-right: #66CD00 dashed 1px;
      border-bottom: none !important;
      border-width: thick;
    }
  }

  @media (min-width: 768px) {
    .locations .section-border {
      border-left: none !important;
      border-bottom: #66CD00 dashed 1px;
      border-width: 1px;
    }
  }


  .title-4r {
    font-size: 4rem;
  }

  .title-3r {
    font-size: 3rem;
  }

  #makingBetterTab .nav-item .nav-link {
    color: #000;
    font-weight: bold;
  }

  .nav-link:hover,
  .nav-link:focus {
    color: var(--bs-nav-link-hover-color) !important;
  }

  .text-black {
    color: #000 !important;
  }

  .text-spacing-4 {
    letter-spacing: 4px;
  }

  .section-padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .hover-text-black:hover {
    color: #000 !important
  }


  .tab-pane p.card-text {
    line-height: 1.7;
  }

  .card-text.lh-lg {
    line-height: 1.7 !important;
  }

  footer p.f-responsive {
    font-size: 0.87rem;
    text-align: center;
  }

  /*-------- RESPONSIVE -------*/
  /* >lg */
  @media (min-width: 1400px) {
    .main-nav-menu {
      margin-right: auto !important;
    }

    .btn-top-find-dealer {
      margin-right: 115px !important;
    }

    .big-title {
      font-size: 4.3rem;
    }

    .big-subtitle {
      font-size: 3.2rem;
    }

    .bg-black {
      background: #000 !important;
    }

    .title {
      font-size: 5.5rem;
      line-height: 1;
    }

    .title2 {
      font-size: 2.875rem;
    }

    .title3 {
      font-size: 2.25rem;
    }

    .custom-p {
      font-size: 1.857rem;
      line-height: 1.3;
    }

    .title-better {
      font-size: 7.125rem;
      line-height: 0.85;
    }

    .about-title {
      font-size: 4rem;
    }

    .title-4r {
      font-size: 4rem;
    }

    .title-3r {
      font-size: 3rem;
    }

    .text-spacing-4 {
      letter-spacing: 4px;
    }

    .section-padding {
      padding-top: 4rem;
      padding-bottom: 4rem;
    }

    .legacy .card .card-body h5,
    .legacy .card .card-body p {
      text-align: start !important;
    }

    ul#makingBetterTab {
      --bs-nav-underline-gap: 1.2rem !important;
    }

    footer p.f-responsive {
      font-size: 1rem;
    }

    .img-hero-resp {
      margin-top: -300px !important;
      margin-bottom: -480px !important;
    }
  }

  /* =lg */
  @media (min-width: 1200px) and (max-width: 1399.98px) {
    .main-nav-menu {
      margin-right: auto !important;
    }

    .btn-top-find-dealer {
      margin-right: 115px !important;
    }

    .bg-main {
      background-size: 111%;
      background-position-y: -75px;
    }

    .big-title {
      font-size: 4.3rem;
    }

    .big-subtitle {
      font-size: 3.2rem;
    }

    .bg-black {
      background: #000 !important;
    }

    .title {
      font-size: 5.5rem;
      line-height: 1;
    }

    .title2 {
      font-size: 2.875rem;
    }

    .title3 {
      font-size: 2.25rem;
    }

    .custom-p {
      font-size: 1.857rem;
      line-height: 1.3;
    }

    .title-better {
      font-size: 6.125rem;
      line-height: 0.87;
    }

    .about-title {
      font-size: 3.5rem;
    }

    .title-4r {
      font-size: 3.5rem;
    }

    .title-3r {
      font-size: 2rem;
    }

    .text-spacing-4 {
      letter-spacing: 3.5px;
    }

    .section-padding {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }

    h5.card-title.text-uppercase.fs-2.fw-bold {
      font-size: 2rem;
    }

    .legacy .card .card-body h5,
    .legacy .card .card-body p {
      text-align: start !important;
    }

    ul#makingBetterTab {
      --bs-nav-underline-gap: 1.2rem !important;
    }

    footer p.f-responsive {
      font-size: 1rem;
    }

    .img-hero-resp {
      margin-top: -210px !important;
      margin-bottom: -390px !important;
    }

  }

  /* =md */
  @media (min-width: 992px) and (max-width: 1199.98px) {
    .main-logo {
      height: 55px !important;
    }

    .bg-main {
      background-size: 115%;
      background-position-y: -75px;
    }

    .big-title {
      font-size: 4.3rem;
    }

    .big-subtitle {
      font-size: 3.2rem;
    }

    .bg-black {
      background: #000 !important;
    }

    .title {
      font-size: 4.5rem;
      line-height: 1;
    }

    .title2 {
      font-size: 2.875rem;
    }

    .title3 {
      font-size: 2.25rem;
    }

    .custom-p {
      font-size: 1.857r;
      line-height: 1.3;
    }

    .title-better {
      font-size: 5.5rem;
      line-height: 0.87;
    }

    .about-title {
      font-size: 3.5rem;
    }

    .title-4r {
      font-size: 2.8rem;
    }

    .title-3r {
      font-size: 2.5rem;
    }

    .text-spacing-4 {
      letter-spacing: 3.5px;
      padding-top: 0px;
      margin-bottom: 2rem;
    }

    .section-padding {
      padding-top: 2.5rem;
      padding-bottom: 2.5rem;
    }

    h5.card-title.text-uppercase.fs-2.fw-bold {
      font-size: 1.87rem;
    }

    .tab-pane p.card-text,
    .card-text.lh-lg {
      line-height: 1.4 !important;
    }

    #locations a.btn.fs-6 {
      font-size: 0.798rem !important;
      padding-left: 7px;
      padding-right: 7px;
    }

    .legacy .card .card-body h5,
    .legacy .card .card-body p {
      text-align: start !important;
    }

    ul#makingBetterTab {
      --bs-nav-underline-gap: 1.2rem !important;
    }

    footer p.f-responsive {
      font-size: 1rem;
    }

    img.tab-img-responsive {
      height: 500px !important;
    }

    .img-hero-resp {
      margin-top: -180px !important;
      margin-bottom: -370px !important;
    }
  }

  /* <md */
  @media (min-width: 768px) and (max-width: 991.98px) {
    .big-title {
      font-size: 4.3rem;
    }

    .big-subtitle {
      font-size: 3.2rem;
    }

    .bg-black {
      background: #000 !important;
    }

    .title {
      font-size: 3.5rem;
      line-height: 1;
    }

    .title2 {
      font-size: 2.875rem;
    }

    .title3 {
      font-size: 2.25rem;
    }

    .custom-p {
      font-size: 1.758rem;
      line-height: 1.3;
    }

    .title-better {
      font-size: 4rem;
      line-height: 0.87;
    }

    .about-title {
      font-size: 3.5rem;
    }

    .title-4r {
      font-size: 2.5rem;
    }

    .title-3r {
      font-size: 2.5rem;
    }

    .text-spacing-4 {
      letter-spacing: 3.5px;
      padding-top: 0px;
      margin-bottom: 2rem;
    }

    .section-padding {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }

    .h-500 {
      height: 45vh;
    }

    h5.card-title.text-uppercase.fs-2.fw-bold {
      font-size: 1.87rem;
    }

    .tab-pane p.card-text,
    .card-text.lh-lg {
      line-height: 1.4 !important;
    }

    #locations a.btn.fs-6 {
      font-size: 0.758rem;
    }

    #locations .section-padding {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }

    .bg-main {
      background-size: 111%;
      background-position-y: -25px;
    }

    #makingBetterTab .nav-item .nav-link {
      padding: 3px 12px;
    }

    #makingBetterTab {
      --bs-nav-underline-gap: 1rem;
    }

    footer p.f-responsive {
      font-size: 1rem;
    }

    img.tab-img-responsive {
      height: 400px !important;
    }

    .img-hero-resp {
      margin-top: -200px !important;
      margin-bottom: -210px !important;
    }

  }

  /* =sm */
  @media (min-width: 576px) and (max-width: 767.98px) {
    .big-title {
      font-size: 4.3rem;
    }

    .big-subtitle {
      font-size: 3.2rem;
    }

    .bg-black {
      background: #000 !important;
    }

    .title {
      font-size: 3.25rem;
      line-height: 1;
    }

    .title2 {
      font-size: 2.875rem;
    }

    .title3 {
      font-size: 2.25rem;
    }

    .custom-p {
      font-size: 1.857rem;
      line-height: 1.3;
    }

    .title-better {
      font-size: 3rem;
      line-height: 0.87;
    }

    .about-title {
      font-size: 3.5rem;
    }

    .title-4r {
      font-size: 2.3rem;
    }

    .title-3r {
      font-size: 1.87rem;
    }

    .text-spacing-4 {
      letter-spacing: 1.5px;
      padding-top: 0px;
      margin-bottom: 1rem;
      font-size: 1rem;
    }

    .section-padding {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }

    h5.card-title.text-uppercase.fs-2.fw-bold {
      font-size: 1.87rem;
    }

    .tab-pane p.card-text,
    .card-text.lh-lg {
      line-height: 1.3 !important;
    }

    #locations a.btn.fs-6 {
      font-size: 0.758rem;
    }

    .discount-rectangle {
      position: absolute;
      top: 0;
      right: 0px;
      background-color: #66CD00;
      color: #000;
      padding-top: 60px;
      font-size: 2.5rem;
      font-weight: bolder;
      line-height: 0.75;
      z-index: 9999;
      clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
      border-top-left-radius: 0px;
      height: 215px;
      width: 110px;
    }

    .discount-rectangle>span {
      font-size: 2.8rem;
    }

    #locations .section-padding {
      padding-top: 1.87rem;
      padding-bottom: 1.87rem;
    }

    .h-500 {
      height: 40vh;
    }

    .bg-main {
      background-size: 120%;
      background-position-y: 15px;
    }

    .hero p.fs-4.f-arial-b {
      font-size: calc(0.875rem + 0.3vw) !important;
    }

    .hero p.fs-6 {
      font-size: 0.785rem !important;
    }

    .main-logo {
      height: 55px !important;
    }

    #makingBetterTab .nav-item .nav-link {
      padding: 3px 12px;
    }

    footer p.f-responsive {
      font-size: 1rem;
    }

    img.tab-img-responsive {
      height: 350px !important;
    }

    .img-hero-resp {
      margin-top: -115px !important;
      margin-bottom: -130px !important;
    }

  }

  /* Extra Small (XS) */
  @media (max-width: 575.98px) {
    .big-title {
      font-size: 4.3rem;
    }

    .big-subtitle {
      font-size: 3.2rem;
    }

    .bg-black {
      background: #000 !important;
    }

    .title {
      font-size: 2.5rem;
      line-height: 1;
    }

    .title2 {
      font-size: 2.875rem;
    }

    .title3,
    h5.card-title.text-uppercase.fs-2.fw-bold {
      font-size: 2.25rem;
    }

    .custom-p {
      font-size: 1.857rem;
      line-height: 1.3;
    }

    .title-better {
      font-size: 3.2rem;
      line-height: 0.86;
    }

    .about-title {
      font-size: 3.5rem;
    }

    .title-4r {
      font-size: 2.3rem;
    }

    .title-3r {
      font-size: 1.3rem;
    }

    .text-spacing-4 {
      letter-spacing: 1px;
      padding-top: 0px;
      margin-bottom: 1rem;
      font-size: 0.786rem;
    }

    .section-padding {
      padding-top: 1.875rem;
      padding-bottom: 1.875rem;
    }

    h5.card-title.text-uppercase.fs-2.fw-bold {
      font-size: 1.87rem;
    }

    .tab-pane p.card-text,
    .card-text.lh-lg {
      line-height: 1.3 !important;
    }

    #locations a.btn.fs-6 {
      font-size: 0.758rem;
    }

    .discount-rectangle {
      position: absolute;
      top: 0;
      right: 0px;
      background-color: #66CD00;
      color: #000;
      padding-top: 60px;
      font-size: 2.5rem;
      font-weight: bolder;
      line-height: 0.75;
      z-index: 9999;
      clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
      border-top-left-radius: 0px;
      height: 215px;
      width: 110px;
    }

    .discount-rectangle>span {
      font-size: 2.8rem;
    }

    #locations .section-padding {
      padding-top: 1.87rem;
      padding-bottom: 1.87rem;
    }

    .h-500 {
      height: 35vh;
    }

    .bg-main {
      background-size: 120%;
      background-position-y: 2rem;
    }

    .hero p.fs-4.f-arial-b {
      font-size: calc(0.875rem + 0.3vw) !important;
    }

    .hero p.fs-6 {
      font-size: 0.785rem !important;
    }

    .main-logo {
      height: 45px !important;
    }

    #makingBetterTab .nav-item .nav-link {
      padding: 3px 10px;
      font-size: 0.897rem;
    }

    img.tab-img-responsive {
      height: 300px !important;
    }

    .img-hero-resp {
      margin-top: -90px !important;
      margin-bottom: -90px !important;
    }

  }

  /* Mobile (M) */
  @media (max-width: 479.98px) {
    .h-500 {
      height: 25vh;
    }

    .bg-main {
      background-size: 111%;
      background-position-y: 3rem;
    }

    .title-3r,
    h5.card-title.text-uppercase.fs-2.fw-bold {
      font-size: 1.2rem!important;
    }
    
    img.tab-img-responsive {
      height: 275px !important;
    }

    footer ul>li {
      font-size: 12px !important;
    }

    footer h6,
    footer .h6 {
      font-size: 0.85rem !important;
    }

    .img-hero-resp {
      margin-top: -80px !important;
      margin-bottom: -80px !important;
    }

  }

  /* Mini Mobile (MM) */
  @media (max-width: 359.98px) {
    .h-500 {
      height: 245px;
    }

    .bg-main {
      background-size: 111%;
      background-position-y: 3.5rem;
    }

    #makingBetterTab .nav-item .nav-link {
      padding: 3px 7px;
      font-size: 0.74rem;
    }

    .title-3r,
    h5.card-title.text-uppercase.fs-2.fw-bold {
      font-size: 1.2rem !important;
    }

    img.tab-img-responsive {
      height: 100% !important;
    }

    .img-hero-resp {
      margin-top: -70px !important;
      margin-bottom: -70px !important;
    }

  }

  /* #makingBetterContent .tab-pane img{} */

  .legacy .card .card-body h5,
  .legacy .card .card-body p {
    text-align: center;
  }

  .locations .section-border {
    border-left: none !important;
    border-bottom: #66CD00 dashed 1px;
    border-width: 1px;
  }

  .main-logo {
    height: 65px;
  }

  .custom-nav .nav-link,
  .bg-transparent a.btn.rounded-0.my-1.py-2.hover-text-black.fw-bold {
    font-size: 0.897rem;
  }

  :root {
    --bs-heading-color: #000000 !important;
  }

  .card-title {
    color: #000000 !important;
  }

  .hover-text-black:hover>.bi-amazon>.text-primary {
    color: #000000 !important
  }

  .nav-link:hover,
  .nav-link:focus {
    color: #66cd00 !important;
  }

  footer ul>li {
    color: #FFF !important;
    font-size: 15px;
  }

  footer ul>li a {
    color: #66CD00 !important;
  }

  footer ul>li a:hover {
    text-decoration: none !important;
  }

  .making-better .card .card-text strong {
    font-weight: normal !important;
  }

  .card-img-top_ {
    max-height: 550px;
    /* max-width: 468px; */
    margin-left: auto;
    margin-right: auto;
  }


  /* sb change color */
  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: #66cd00;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: #66cd00 transparent;
  }

  *::-moz-scrollbar-track {
    background: transparent;
  }

  *::-moz-scrollbar-thumb {
    background: #66cd00;
  }

  .navbar-collapse.collapse.show {
    background: rgb(0 0 0 / 60%);
  }

  .btn-top-secondary:hover,
  .btn-top-secondary:hover>svg>path {
    color: #66CD00 !important;
  }

  .img-hero-resp {
    margin-top: -60px;
    margin-bottom: -60px;
  }