@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: "DM Sans", sans-serif !important;
  font-optical-sizing: auto !important;

  font-style: normal !important;
}

@media (min-width: 768px) {
  .page-home h2 {
    font-size: 36px;
  }
}

.btn-primary {
  font-weight: 600 !important;
  text-align: center !important;
  position: relative !important;
  z-index: 1 !important;
  border: none !important;
  padding: 11px 31px 11px !important;
  /* border-radius: 50px !important; */
  border: 1px solid transparent !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Header ===================================================== */

/*  */
.cw-custom-header {
  background-color: var(--header-background);
  color: var(--header-text);
  padding: 1px 0;
  text-align: center;
}

.cw-custom-header .container-fluid {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.cw-custom-header h4 {
  font-size: 18px;
}

.cw-custom-header .cw-header-logo img {
  width: 315px;
}

.cw-custom-header a {
  color: inherit;
  font-weight: 700;
}

.cw-custom-header a:hover {
  color: #e0cdcb;
}

.cw-custom-header .cw-header-blurb {
  display: inline-block;
  font-weight: 900;
  font-size: 22px;
  padding: 11px 0.6em;
  margin: 1rem auto;
  border-radius: 10px;
  background-color: var(--color-theme-primary);
  color: var(--color-theme-text-btn);
  animation: 1s cw-blurb-attn 1 ease-in-out;
}

@keyframes cw-blurb-attn {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate(-1.5deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate(-1.5deg);
  }

  35%,
  65% {
    -webkit-transform: scale3d(1.03, 1.03, 1.03) rotate(1.5deg);
    transform: scale3d(1.03, 1.03, 1.03) rotate(1.5deg);
  }

  50%,
  80% {
    -webkit-transform: scale3d(1.03, 1.03, 1.03) rotate(-1.5deg);
    transform: scale3d(1.03, 1.03, 1.03) rotate(-1.5deg);
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .cw-custom-header .cw-header-blurb {
    font-size: 38px;
    line-height: 36px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .cw-custom-header {
    padding: 2rem 0;
  }
}

/* Large devices (desktops, 992px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 992px) {
  .cw-custom-header h4 {
    font-size: 20px;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .cw-custom-header .cw-header-blurb {
    font-size: 36px;
  }
}

@media (min-width: 1400px) {
  .cw-custom-header h4 {
    font-size: 24px;
  }
}

/* -------------------- Hero ---------------------- */

/* this is built specifically for the Red Tag template, so it includes css from that. Try to avoid doubling up on the declarations and just replace the existing code with this one's if updating.  */
.cw-slide-wrap {
  position: relative;
  height: 500px;
  z-index: 10;
}

.cw-slide-wrap .cw-hero {
  /* position: relative; */
  z-index: 5;
  width: 100%;
  /* padding: 30px 0; */
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  color: var(--color-theme-text);
  overflow: hidden;
}

.cw-slide-wrap .cw-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* background: rgba(0, 0, 0, 0.7); */
  transform: unset;
}

.cw-slide-wrap .container {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  margin-top: 40px;
}

.cw-slide-wrap .cw-hero-overlay2 {
  display: none;
}

.cw-slide-wrap .cw-hero-title .cw-bigtext {
  font-size: 1.5rem;
  color: inherit;
  font-weight: 700;

  text-transform: uppercase;
  display: block;
  line-height: 0.9;
  margin-bottom: 15px;
}

.cw-slide-wrap .cw-hero-title .cw-smalltext {
  font-size: 1.2rem;
  color: var(--color-theme-primary);
  font-weight: 400;
  font-family: var(--bodyfont);
  display: block;
  line-height: 1.1;
}

@media (min-width: 576px) {
  .cw-slide-wrap .cw-hero-title .cw-bigtext {
    font-size: 2.5rem;
  }

  /* .cw-slide-wrap .cw-hero {
            padding: 70px 0;
          } */

  .cw-slide-wrap #cw-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .cw-slide-wrap #cw-carousel .carousel-inner,
  .cw-slide-wrap #cw-carousel .carousel-item {
    height: 100%;
  }

  .cw-slide-wrap #cw-carousel img {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .cw-sub-header {
    background-image: linear-gradient(
      90deg,
      var(--color-theme-primary),
      transparent
    );
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 1rem;
  }
}

@media (min-width: 768px) {
  .cw-slide-wrap .cw-hero-title .cw-bigtext {
    font-size: 3rem;
  }

  .cw-slide-wrap .cw-hero-title .cw-smalltext {
    font-size: 1.3rem;
  }

  .cw-slide-wrap .cw-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.85); */
    z-index: 0;
    width: 60%;
    transform: skewX(-5deg);
    transform-origin: top left;
  }

  .cw-slide-wrap .cw-hero-overlay2 {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0); */
    z-index: 0;
    transform: skewX(-5deg);
    transform-origin: top left;
  }
}

@media (min-width: 992px) {
  .cw-slide-wrap .cw-hero {
    /* this is built specifically for the Red Tag template and that header/navbar so if you aren't using that, you can probably get rid of these variables and negative margins. */
    margin-top: calc(-1 * var(--cw-headerHeight));
    padding: 200px 0 150px;
    padding-top: calc(var(--cw-headerHeight) + 100px);
  }

  .cw-slide-wrap .cw-hero-title .cw-bigtext {
    font-size: 3.4rem;
  }

  .cw-slide-wrap .cw-hero-title .cw-smalltext {
    font-size: 1.5rem;
  }

  .cw-slide-wrap {
    position: relative;
    height: 600px;
    z-index: 10;
  }
}

@media (min-width: 1200px) {
  .cw-slide-wrap .cw-hero-title .cw-bigtext {
    font-size: 4.5rem;
  }
}

@media (min-width: 1400px) {
  .cw-slide-wrap .cw-hero-overlay {
    width: 44%;
  }
  .cw-slide-wrap .cw-hero-title .cw-bigtext {
    font-size: 62px;
  }
}

.cw-slide-wrap .cw-hero-title,
.cw-slide-wrap .cw-inner-info {
  color: #ffffff;
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
  .cw-slide-wrap .container {
    position: relative !important;
    z-index: 2;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
  }

  .cw-slide-wrap .cw-hero-overlay {
    background: transparent !important;
  }

  .cw-slide-wrap {
    position: relative;
    height: 100% !important;
    z-index: 10;
    padding-bottom: 2rem;
  }

  .cw-slide-wrap .cw-hero-title,
  .cw-slide-wrap .cw-inner-info {
    color: #000;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/* XX-Large devices (larger desktops, 1400px and ) */
@media (min-width: 1400px) {
}

/* Inventory Slideshow ==================================== */
.page-home .card__multi__style2 .item__card {
  background-color: #ffffff;
}

/* Body Style ======================================================================================= */
.cw-bodystyle {
  height: 100%;
  position: relative;
  z-index: 0;
  padding: 5rem 0 5rem 0;
  background-color: #333333;
  /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%); */
  color: #ffffff;
  margin: 5rem 0 0 0;
}

/* .cw-bodystyle::before {
    content: "";
    background-color: #000;
    padding: 2rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;f
    opacity: 80%;
  } */

/* .cw-bodystyle h2 {
    font-size: 54px;
    font-weight: 500;
    line-height: 3.7rem;
  } */

@media (max-width: 576px) {
  .cw-bodystyle h2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.7rem;
  }
}

.cw-bodystyle .cw-card {
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  background-color: #fff;
  color: #000;
  /* border-right: 1px solid rgb(226, 226, 226); */
  display: inline-block;
  /* padding: 15px 20px; */
  padding-top: 2rem;
  padding-bottom: 2rem;
  position: relative;
}

.cw-bodystyle .cw-card a {
  color: inherit;
}

.cw-bodystyle .cw-card a:hover {
  color: var(--color-theme-highlight);
}

.cw-card:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #cf0a0a;
  transition:
    width 0.3s ease 0s,
    left 0.3s ease 0s;
  width: 0;
}

.cw-card:hover:after {
  width: 100%;
  left: 0;
}

/* Welcome Before Line elements */
.cw-highlight {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.cw-highlight::before {
  content: " ";
  width: 1.5rem;
  border-bottom: 2px solid #ff4b36;
  margin-top: -1px;
  margin-bottom: 0;
  margin-right: 6px;
  display: inline;
  -webkit-flex-grow: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

/* Inventory Search =============================================== */
.inventory-search-module {
  /* background-color: var(--color-theme-secondary) !important; */
  margin-top: 0px !important;
  margin-bottom: 4rem !important;
}

/* section.inventory-search-module label {
    color: #ffffff !important;
} */

.page-home section.inventory-search-module .form__wrapper {
  background-color: var(--color-theme-accent);
  border: 0px solid var(--color-theme-border) !important;
  padding: 20px;
}

section.inventory-search-module > .container {
  max-width: 1320px !important;
  padding: 2rem !important;
  position: relative !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  z-index: 100 !important;

  background: white !important;
  border-radius: 10px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  section.inventory-search-module > .container {
    max-width: 1320px !important;
    padding: 2rem !important;
    position: relative !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    z-index: 100 !important;
    margin-top: -8rem !important;
    background: white !important;
    border-radius: 10px;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}

/* About us ===================================================== */
.cw-about-us {
  margin: 5rem 0 5rem 0;
}

/* Pre Approval ======================================================== */
.cw-shimmer-banner {
  background-color: var(--color-theme-primary);
  color: var(--color-theme-text-btn);
  text-align: center;
  overflow: hidden;

  background-image: linear-gradient(
    -45deg,
    var(--color-theme-primary) 45%,
    #d6d6d6 50%,
    var(--color-theme-primary) 55%
  );
  background-size: 300%;
  background-position-x: 100%;
  animation: cw-shimmer-primary 5s infinite linear;
  margin-bottom: 5rem;
}

.cw-shimmer-banner .cw-shimmer-box {
  padding: 1rem 1rem;
  max-width: var(--cw-box-width);
}

.cw-shimmer-banner a {
  color: inherit;
  font-size: 1.5rem;
  margin: 0;
  font-weight: 700;
  text-shadow: 1px 1px 2px #000;
  transition-duration: 0.3s;
}

.cw-shimmer-banner a:hover {
  opacity: 0.9;
  text-shadow: 3px 2px 2px #000;
}

@keyframes cw-shimmer-primary {
  0%,
  30% {
    background-position-x: 100%;
  }

  40%,
  100% {
    background-position-x: 0%;
  }
}

@media (min-width: 992px) {
  .cw-shimmer-banner a {
    font-size: 2rem;
  }

  .cw-shimmer-banner a:hover {
    font-size: 2.2rem;
  }
}

/* Card */
.cw-quality-icon {
  width: 70px;
  height: 70px;
  display: flex;
  border-radius: 50%;
  color: var(--color-theme-primary);
  margin-bottom: 20px;
  background-color: #f4f4f4;
  align-items: center;
  justify-content: center;
}

.cw-button-shape {
  background-color: var(--color-theme-primary) !important;
  padding: 10px 2px;
  border-radius: 10px 0px 10px 0px;
  color: #fff;
}

.cw-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cw-copy {
  flex-grow: 1;
}

/*SLIDES*/
.cw-slideText {
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 1;
  bottom: 1em;
  left: 0;
  right: 0;
  pointer-events: none;
}

.cw-slideText h5 {
  /* font-size: 3em; */
  text-transform: uppercase;
  font-weight: bold;
  color: #e30000;
  text-shadow: 2px 2px 2px #000;
  display: inline-block;
  padding: 0.5em;
  margin: 0 auto;
}

/* Adjust carousel height */
.carousel,
.carousel-inner,
.carousel-item {
  max-height: 450px;
  /* Adjust this value as needed */
}

.carousel-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* XS: 440px & Up */
@media (min-width: 440px) {
}

/* SM: 768px & Up */
@media (min-width: 768px) {
  .cw-slideText h5 {
    font-size: 4em;
  }

  .carousel,
  .carousel-inner,
  .carousel-item {
    max-height: 450px;
  }
}

/* MD: 992px & Up */
@media (min-width: 992px) {
  .cw-slideText h5 {
    font-size: 5em;
  }

  .carousel,
  .carousel-inner,
  .carousel-item {
    max-height: 500px;
  }
}

/* LG: 1200px & Up */
@media (min-width: 1200px) {
  .cw-slideText h5 {
    font-size: 6em;
  }
}

/* XLG: 1400px & Up */
@media (min-width: 1400px) {
  .cw-slideText h5 {
    font-size: 7em;
  }
}