:root {
  --blue: #1d2e59;
  --beige: #e6e5e1;
  --white: #fff;
  --black: #1e1f21;
  --text-white: #cdcdcd;
  --off-white: whitesmoke;
  --white-2: white;
  --light-blue: #eaedf6;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

h1 {
  font-size: 33px;
}

h2 {
  color: var(--blue);
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Bebas Neue, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

.container {
  max-width: 1920px;
  margin-left: 110px;
  margin-right: 110px;
}

.container.home {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.logo-nav-bar {
  z-index: 9998;
  background-color: #fefefe;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
  display: block;
  position: relative;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
}

.image-15 {
  width: 28px;
  height: 28px;
}

.top-navbar-left-top-nav-4 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex: 0 auto;
  justify-content: space-around;
  align-items: center;
  margin-left: auto;
  display: flex;
}

.top-navbar---icon-text-vertical {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.brand-logo-2 {
  align-self: auto;
  width: auto;
  max-width: none;
  height: 32px;
  margin-left: 0;
}

.container---nav-bar {
  background-color: var(--blue);
  flex-direction: row;
  justify-content: flex-start;
  max-width: 4000px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 110px;
  display: block;
}

.top-navbar---nav-brand-link {
  flex: none;
  width: 120px;
  height: 48px;
}

.top-navbar-inside-top-nav-4 {
  justify-content: space-between;
  align-items: center;
  width: auto;
  height: 100%;
  padding-right: 10px;
  display: flex;
}

.top-navbar---icon-text-vertical-copy {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.top-navbar---paragraph-small {
  color: var(--blue);
  margin-top: 4px;
  margin-bottom: 4px;
  font-family: Bebas Neue, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
}

.top-nav-vertical-container {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-left: 10px;
  display: flex;
}

.top-nav-iconbox {
  background-color: var(--beige);
  opacity: .6;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

.top-nav---big-text {
  color: var(--white);
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
}

.to-nav---small-text {
  color: var(--white);
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 130%;
}

.top-nav-icon {
  color: var(--blue);
}

.top-nav-icon._4px {
  margin-top: 4px;
}

.top-nav-icon._8px {
  margin-top: 8px;
}

.top-navbar {
  z-index: 9999;
  background-color: var(--white);
  border: 1px #000;
  align-items: center;
  height: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 15px;
  line-height: 15px;
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.bottom-navbar_dropdown-link-list {
  grid-column-gap: 0px;
  grid-row-gap: 0rem;
  grid-template-rows: max-content;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  grid-auto-columns: 1fr;
  justify-items: stretch;
  width: 25ch;
  margin-bottom: 0;
  display: grid;
}

.text-block-11 {
  margin-right: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

.top-navbar_link {
  color: var(--blue);
  text-transform: capitalize;
  border-radius: 50px;
  align-items: center;
  margin-left: 0;
  padding: 1rem 1.4rem;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: all .3s;
}

.top-navbar_link:hover {
  background-color: var(--blue);
  color: #fff;
  border-radius: 50px;
  font-weight: 500;
}

.top-navbar_link.w--current {
  color: var(--blue);
}

.top-navbar_link.w--current:hover {
  color: var(--white);
}

.top-navbar_link.current {
  color: var(--blue);
  margin-right: 0;
  padding: 1rem 1.5rem;
  line-height: 1.3;
}

.top-navbar_link.current.w--current {
  margin-right: 0;
  padding: 1rem 1.5rem;
  line-height: 1.3;
}

.heading-22 {
  color: #1d1816;
  font-size: 16px;
  font-weight: 400;
  line-height: 36px;
}

.bottom-navbar_dropdown-link {
  grid-column-gap: 1rem;
  grid-row-gap: 0px;
  border-radius: 0;
  grid-template-rows: auto;
  grid-template-columns: max-content;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  padding: 1rem;
  text-decoration: none;
  transition: all .3s;
  display: grid;
}

.bottom-navbar_dropdown-link:hover {
  background-color: var(--beige);
  color: #fff;
  padding-left: 1.25rem;
}

.bottom-navbar_dropdown-link.w--current {
  border-radius: 0;
  padding: 1rem 1rem 1rem 1.5rem;
}

.uui-dropdown-icon-2 {
  color: var(--blue);
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  margin-left: 0;
  margin-right: 0;
  padding-right: 0;
  display: flex;
  position: absolute;
  top: auto;
  bottom: auto;
  left: auto;
  right: 0%;
}

.top-navbar_menu-right {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  height: 100%;
  display: flex;
}

.bottom-navbar_menu-button {
  padding: 0;
}

.top-navbar_menu-left {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  border-radius: 20px;
  margin-left: auto;
  margin-right: 24px;
  display: flex;
}

.bottom-navbar_dropdown-list {
  margin-top: 4px;
  box-shadow: 0 12px 16px -4px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
}

.bottom-navbar_dropdown-list.w--open {
  background-color: #fff;
  border: 1px solid #eaecf0;
  border-radius: 0;
  margin-top: 0;
  margin-left: -100px;
  margin-right: auto;
  padding: 0;
  top: 60px;
  left: 108px;
  right: auto;
  box-shadow: 0 12px 16px -7px rgba(0, 0, 0, .08), 0 4px 6px 6px rgba(16, 24, 40, .03);
}

.top-navbar_container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  height: 100%;
  margin-left: 110px;
  margin-right: 110px;
  display: flex;
}

.text-block-12 {
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

.div-block-22 {
  border: 1px solid rgba(0, 0, 0, .2);
  justify-content: space-between;
  padding: .5rem 1rem;
  display: none;
}

.bottom-navbar_item-heading {
  color: var(--black);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}

.bottom-navbar_item-heading:hover {
  color: #000;
}

.bottom-navbar_dropdown-toggle {
  color: var(--blue);
  align-items: center;
  margin-left: 0;
  margin-right: 0;
  padding: 1rem 2.5rem 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  transition: all .3s;
  display: flex;
}

.bottom-navbar_dropdown-toggle:hover {
  background-color: var(--blue);
  color: #fff;
  -webkit-text-stroke-color: var(--white);
  border-radius: 50px;
}

.top-navbar_menu {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  margin-left: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  position: static;
}

.bottom-navbar_menu-dropdown {
  color: #fff;
}

.uui-button-2 {
  background-color: var(--blue);
  color: #fff;
  text-align: center;
  white-space: nowrap;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: all .3s;
  display: flex;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.uui-button-2:hover {
  background-color: #84100f;
  border-color: #6941c6;
}

.uui-button-2:focus {
  box-shadow: none;
  background-color: #ac3a39;
}

.top-navbar_button-wrapper {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  align-items: center;
  display: flex;
}

.contact-button {
  border: 2px solid var(--white);
  background-color: var(--blue);
  color: #fff;
  text-align: center;
  white-space: nowrap;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 1rem 1.5rem;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: all .3s;
  display: flex;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.contact-button:hover {
  border: 2px solid var(--blue);
  background-color: var(--beige);
  color: var(--blue);
}

.main-logo {
  height: 48px;
}

.banner-cta-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: center;
  align-items: flex-end;
  display: flex;
}

.banner-heading {
  color: #fff;
  text-align: center;
  max-width: 500px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Bebas Neue, sans-serif;
  font-size: 54px;
  font-weight: 400;
  line-height: 1.1;
}

.primary-button {
  border: 2px solid var(--blue);
  background-color: var(--blue);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  justify-content: flex-end;
  margin-right: 0;
  padding: 1rem 1.5rem;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  display: inline-block;
}

.primary-button:hover {
  border-color: var(--beige);
}

.primary-button.mobile {
  background-color: var(--blue);
  border-radius: 5px;
  padding-top: 1rem;
  padding-bottom: 1px;
  transition: all .25s;
}

.primary-button.mobile:hover {
  background-color: #001d3d;
}

.primary-button.contact-form {
  margin-top: 40px;
}

.secondary-button {
  border: 1px solid var(--beige);
  color: #fff;
  background-color: rgba(56, 152, 236, 0);
  border-radius: 5px;
  padding: 1rem 1.5rem;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.secondary-button:hover {
  background-color: var(--beige);
  color: var(--blue);
}

.paragraph {
  color: var(--black);
  max-width: 500px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.paragraph.sub-text {
  color: var(--beige);
  text-align: center;
  max-width: 600px;
  margin-top: 16px;
  margin-bottom: 40px;
  font-size: 16px;
}

.paragraph.sub-text.mobile {
  color: rgba(255, 255, 255, .8);
  font-size: 16px;
}

.paragraph.auto {
  margin-top: auto;
}

.paragraph.usp {
  max-width: none;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
}

.paragraph.usp-text {
  max-width: none;
}

.paragraph.contact-section {
  color: var(--text-white);
  max-width: none;
  margin-bottom: 40px;
  font-size: 16px;
}

.home-banner {
  background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../images/dl.beatsnoop.com-final-P0K98RwHdV.jpg');
  background-position: 0 0, 50% 0;
  background-size: auto, cover;
  padding-top: 160px;
  padding-bottom: 160px;
}

.container-2 {
  text-align: left;
  justify-content: space-between;
  max-width: 1440px;
  margin-left: 140px;
  margin-right: 140px;
  padding: 0;
  display: block;
}

.body {
  font-family: Montserrat, sans-serif;
}

.home-about-section {
  padding-top: 100px;
  padding-bottom: 100px;
}

.home-about-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template: "Area-2 Area"
                 "Area-2 Area"
                 / 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  justify-items: center;
  display: grid;
}

.h-a-main-heading {
  color: var(--black);
  margin-top: 0;
  margin-bottom: 20px;
}

.h-a-column3 {
  object-fit: fill;
  width: 100%;
  height: 100%;
}

.home-about-image {
  object-fit: contain;
  width: 100%;
  height: 100%;
  max-height: 400px;
  display: block;
}

.category-section {
  background-color: var(--blue);
  padding-top: 80px;
  padding-bottom: 100px;
}

.section-heading {
  color: var(--off-white);
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
}

.section-heading.blue {
  color: var(--blue);
}

.products-section {
  background-color: var(--black);
  padding-top: 80px;
  padding-bottom: 100px;
}

.usp-section {
  padding-top: 80px;
  padding-bottom: 80px;
}

.usp-grid {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 60px;
  display: grid;
}

.usp-card {
  display: flex;
}

.usp-iconbox {
  background-color: var(--blue);
  border-radius: 50px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  margin-top: 4px;
  display: flex;
}

.code-embed {
  color: var(--white);
}

.usp-contentbox {
  margin-left: 16px;
}

.contact-form-section {
  background-image: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url('../images/dl.beatsnoop.com-final-DerFsmB8Vt.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  background-attachment: scroll, fixed;
  padding-top: 100px;
  padding-bottom: 100px;
}

.wbs-margin-top-auto {
  color: var(--black);
  margin: auto 9px 0;
  text-decoration: none;
}

.wbs-margin-top-auto:hover {
  color: #333;
}

.wbs-footer-link {
  color: #010b15;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}

.wbs-footer-link:hover, .wbs-footer-link.w--current {
  text-decoration: underline;
}

.wbs-footer-link.fotter {
  margin-left: 9px;
  margin-right: 9px;
}

.wbs-footer-link.fotter:hover {
  text-decoration: none;
}

.wbs-footer-social-icon {
  height: 26px;
}

.wbs-footer-logo-big {
  width: auto;
  max-width: 16rem;
  height: 48px;
  margin-bottom: 10px;
}

.wbs-footer-title {
  color: var(--blue);
  text-align: left;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 22px;
}

.paragraph-10 {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
}

.paragraph-10.about-al-massaar {
  margin-top: 20px;
  font-size: 16px;
}

.bottom-nav-bar {
  background-color: var(--off-white);
  padding: 50px 0% 0;
}

.wbs-grid-footer-light {
  grid-column-gap: 85px;
  grid-row-gap: 85px;
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1.5fr;
  margin-bottom: 80px;
  padding-bottom: 0;
}

.container-3 {
  text-align: center;
  flex: 1;
  align-items: center;
  max-width: 1440px;
  margin-left: 110px;
  margin-right: 110px;
  display: block;
}

.wbs-footer-social {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  margin-top: 20px;
  display: flex;
}

.contact {
  text-align: left;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 400;
}

.text-block-18 {
  color: var(--blue);
  text-align: left;
  font-size: 16px;
  font-weight: 600;
}

.wbs-grid-footer-menu {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.wbs-spacing-30 {
  background-color: var(--white);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1% 110px;
  display: flex;
}

.wbs-footer-about {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.wbs-footer-logo-wrap {
  align-items: flex-start;
  margin-bottom: 0;
  display: flex;
}

.wbs-footer-links {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0;
  padding-right: 0;
  display: flex;
}

.dot {
  width: 4px;
}

.blue-dot {
  background-color: var(--black);
  border-radius: 20px;
  width: 4px;
  height: 4px;
}

.link {
  color: var(--black);
  text-decoration: none;
}

.contact-info-wrapper {
  display: flex;
}

.form-block {
  width: 50%;
}

.contact-content {
  width: 40%;
  margin-left: 10%;
}

.textfield {
  color: var(--text-white);
  font-size: 16px;
  font-weight: 500;
}

.textfield-wrapper {
  width: 49%;
}

.input-field {
  border-style: solid;
  border-width: 1px;
  border-color: black black var(--text-white);
  background-color: rgba(255, 255, 255, .9);
}

.field-wrapper {
  grid-column-gap: 2%;
  grid-row-gap: 2%;
  display: flex;
}

.contact-info---big {
  color: var(--beige);
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.contact-info---big.sub-text {
  color: var(--beige);
  text-align: center;
  max-width: 600px;
  margin-top: 16px;
  margin-bottom: 40px;
  font-size: 16px;
}

.contact-info---big.sub-text.mobile {
  color: rgba(255, 255, 255, .8);
  font-size: 16px;
}

.contact-info---big.auto {
  margin-top: auto;
}

.contact-info---big.usp {
  max-width: none;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
}

.contact-info---big.usp-text {
  max-width: none;
}

.contact-info---big.contact-section {
  color: var(--text-white);
  max-width: none;
}

.product-card-grid {
  grid-column-gap: 24px;
  grid-row-gap: 40px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 60px;
  display: grid;
}

.product-card {
  background-color: var(--black);
  border-radius: 10px;
  flex-flow: column;
  height: 300px;
  display: flex;
}

.product-imagebox {
  background-color: var(--white);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
}

.product-image {
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
  height: 100%;
}

.product-contentbox {
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: stretch;
  padding: 20px;
  display: flex;
}

.product-name {
  color: var(--white);
  text-align: center;
  margin-top: auto;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.product-brand-name {
  color: var(--black);
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.product-card-cta {
  border: 1px solid var(--black);
  background-color: var(--white);
  color: var(--blue);
  text-align: center;
  border-radius: 5px;
  width: 100%;
  margin-top: auto;
  padding: .7rem 1rem;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  transition: all .3s;
}

.product-card-cta:hover {
  background-color: var(--blue);
  color: var(--white);
}

.brand-card-grid {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 60px;
  display: grid;
}

.brand-card {
  background-color: var(--white);
  border-radius: 15px;
  flex-flow: column;
  display: flex;
}

.brand-imagebox {
  background-color: var(--white);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
  height: 70%;
}

.brand-image {
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
  height: 100%;
}

.brand-contentbox {
  background-color: var(--blue);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-self: stretch;
  align-items: stretch;
  width: 100%;
  margin-bottom: 0;
  padding: 10px 20px;
  display: flex;
}

.brand-name {
  color: var(--white);
  text-align: center;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.bottomnav-sub-header {
  color: var(--blue);
  text-align: left;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}

.text-span {
  text-decoration: underline;
  transition: all .3s;
}

.text-span:hover {
  background-color: var(--blue);
  color: var(--white);
}

.text-span-3 {
  text-decoration: underline;
  transition: all .3s;
}

.text-span-3:hover {
  background-color: var(--blue);
  color: var(--white);
}

.text-block-19 {
  color: var(--black);
  margin-left: 9px;
  margin-right: 9px;
  text-decoration: none;
}

.link-block {
  margin-left: 9px;
  margin-right: 9px;
  text-decoration: none;
}

.hover {
  text-decoration: underline;
  transition: all .3s;
}

.hover:hover {
  background-color: var(--blue);
  color: var(--white);
}

.link-2, .link-3, .link-4 {
  color: var(--beige);
  text-decoration: none;
}

@media screen and (min-width: 1280px) {
  .banner-heading {
    max-width: 600px;
  }

  .paragraph.sub-text.mobile, .contact-info---big.sub-text.mobile {
    margin-top: 20px;
  }

  .product-card-grid, .brand-card-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 1440px) {
  .top-navbar-inside-top-nav-4 {
    padding-right: 10px;
  }

  .top-navbar---icon-text-vertical-copy {
    flex: 0 auto;
    display: flex;
  }

  .bottom-navbar_dropdown-toggle.w--open {
    margin-top: 0;
  }

  .banner-cta-wrapper {
    line-height: 10px;
  }

  .paragraph {
    max-width: 500px;
    font-size: 14px;
  }

  .paragraph-10 {
    max-width: 420px;
  }

  .contact-info---big {
    max-width: 500px;
    font-size: 14px;
  }
}

@media screen and (min-width: 1920px) {
  .container {
    margin-left: 220px;
    margin-right: 220px;
  }

  .top-navbar {
    justify-content: center;
  }

  .bottom-navbar_dropdown-list.w--open {
    margin-right: -1235px;
  }

  .container-2, .container-3 {
    margin-left: 220px;
    margin-right: 220px;
  }

  .wbs-spacing-30 {
    padding-left: 220px;
    padding-right: 220px;
  }
}

@media screen and (max-width: 991px) {
  .container {
    margin-left: 40px;
    margin-right: 40px;
  }

  .logo-nav-bar {
    margin-left: 0;
    margin-right: 0;
  }

  .image-15 {
    width: 20px;
    height: 20px;
  }

  .top-navbar-left-top-nav-4 {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
  }

  .container---nav-bar {
    padding-left: 40px;
    padding-right: 40px;
  }

  .top-navbar---nav-brand-link {
    padding-left: 0;
  }

  .top-navbar-inside-top-nav-4 {
    padding-right: 0;
  }

  .top-navbar---icon-text-vertical-copy {
    grid-column-gap: 4px;
  }

  .top-navbar---paragraph-small, .top-nav---big-text, .to-nav---small-text {
    line-height: 14px;
  }

  .bottom-navbar_dropdown-link-list {
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }

  .text-block-11 {
    color: #000;
    font-size: 1.125rem;
    font-weight: 500;
  }

  .top-navbar_link {
    color: #000;
    width: 100%;
    margin-left: 0;
    padding: 1rem 0 1rem 1.125rem;
    font-size: 1.125rem;
  }

  .top-navbar_link:hover {
    background-color: var(--beige);
    color: #101828;
  }

  .top-navbar_link.current {
    color: #1d1816;
  }

  .menu-icon_line-bottom-2 {
    background-color: var(--black);
    border-radius: 1rem;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .bottom-navbar_dropdown-link {
    padding-left: 1.5rem;
    padding-right: 1rem;
  }

  .bottom-navbar_dropdown-link:hover {
    background-color: rgba(29, 46, 89, .25);
  }

  .bottom-navbar_dropdown-link.w--current {
    padding-left: 2rem;
  }

  .uui-dropdown-icon-2 {
    color: #667085;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    top: auto;
    bottom: auto;
    left: auto;
    right: 0%;
  }

  .top-navbar_menu-right {
    flex-direction: column-reverse;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    align-items: stretch;
    height: auto;
    margin-top: 1rem;
    padding-bottom: 1rem;
  }

  .bottom-navbar_menu-button {
    flex: 0 auto;
  }

  .bottom-navbar_menu-button.w--open {
    background-color: rgba(0, 0, 0, 0);
  }

  .menu-icon_line-middle-inner-2 {
    width: 4px;
    height: 0;
    padding-bottom: 0;
    padding-right: 0;
  }

  .top-navbar_menu-left {
    grid-column-gap: 0px;
    grid-row-gap: .5rem;
    color: #101828;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 10px;
    display: flex;
  }

  .bottom-navbar_dropdown-list {
    position: static;
    overflow: hidden;
  }

  .bottom-navbar_dropdown-list.w--open {
    border-style: none;
    border-color: rgba(0, 0, 0, 0);
    width: auto;
    margin-top: 10px;
    margin-left: auto;
    padding: 0;
    box-shadow: 0 12px 16px -7px rgba(0, 0, 0, .08), 0 4px 6px 6px rgba(16, 24, 40, .03);
  }

  .menu-icon_component-2 {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-right: -.5rem;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .top-navbar_container {
    margin-left: 40px;
    margin-right: 40px;
  }

  .text-block-12 {
    font-size: 1.125rem;
    font-weight: 500;
  }

  .div-block-22 {
    padding-left: 1rem;
    padding-right: 0;
  }

  .menu-icon_line-middle-2 {
    background-color: var(--black);
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .menu-icon_line-top-2 {
    background-color: var(--black);
    border-radius: 1rem;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .bottom-navbar_dropdown-toggle {
    color: #101828;
    align-items: center;
    margin-left: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.25rem;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.3;
    display: flex;
  }

  .bottom-navbar_dropdown-toggle:hover {
    background-color: var(--beige);
    color: #101828;
  }

  .top-navbar_menu {
    -webkit-text-fill-color: inherit;
    background-color: #fff;
    background-clip: border-box;
    border-top: 1px solid #f2f4f7;
    align-items: flex-start;
    height: auto;
    margin-left: 0;
    padding: 1rem 2rem;
    position: absolute;
    overflow: auto;
  }

  .bottom-navbar_menu-dropdown {
    width: 100%;
    position: relative;
  }

  .uui-button-2 {
    text-align: left;
    font-size: 1.125rem;
    font-weight: 500;
  }

  .top-navbar_button-wrapper {
    flex-direction: column-reverse;
    align-items: stretch;
    display: flex;
  }

  .contact-button {
    text-align: left;
    font-size: 1.125rem;
    font-weight: 500;
  }

  .container-2 {
    margin-left: 60px;
    margin-right: 60px;
  }

  .bottom-nav-bar {
    padding-top: 60px;
    padding-bottom: 0;
  }

  .wbs-grid-footer-light {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: 1fr;
    margin-bottom: 60px;
  }

  .container-3 {
    justify-content: flex-start;
    align-items: center;
    margin-left: 40px;
    margin-right: 40px;
    display: block;
  }

  .wbs-spacing-30 {
    padding-left: 60px;
    padding-right: 60px;
  }

  .wbs-footer-about {
    margin-bottom: 40px;
  }

  .wbs-footer-logo-wrap {
    align-items: flex-start;
    width: 50%;
    display: flex;
  }

  .wbs-footer-links {
    padding-left: 0;
  }

  .product-card-grid, .brand-card-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
}

@media screen and (max-width: 767px) {
  .container {
    margin-left: 20px;
    margin-right: 20px;
  }

  .image-15 {
    display: none;
  }

  .top-navbar-inside-top-nav-4 {
    justify-content: center;
  }

  .top-navbar {
    min-height: 3.8rem;
    padding-left: 0;
    padding-right: 0;
  }

  .bottom-navbar_dropdown-link-list {
    grid-row-gap: .5rem;
    max-width: none;
    padding-top: 0;
    padding-bottom: .75rem;
  }

  .top-navbar_link {
    margin-left: 0;
    font-size: 1rem;
  }

  .top-navbar_link.current {
    color: #1d1816;
  }

  .bottom-navbar_dropdown-link {
    padding-left: 1.5rem;
    padding-right: 1rem;
  }

  .top-navbar_menu-right {
    height: auto;
    padding-bottom: 1rem;
  }

  .bottom-navbar_menu-button {
    flex: 0 auto;
  }

  .top-navbar_menu-left {
    padding-top: 1rem;
  }

  .bottom-navbar_dropdown-list.w--open {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    margin-left: auto;
    box-shadow: 0 12px 16px -7px rgba(0, 0, 0, .08), 0 4px 6px 6px rgba(0, 0, 0, .03);
  }

  .top-navbar_container {
    margin-left: 20px;
    margin-right: 20px;
  }

  .div-block-22 {
    padding-left: 1rem;
  }

  .bottom-navbar_dropdown-toggle {
    margin-left: 0;
    font-size: 1rem;
  }

  .top-navbar_menu {
    height: auto;
    padding: 0;
  }

  .uui-button-2 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    font-size: 1rem;
  }

  .uui-button-2:hover {
    background-color: #84100f;
    border-color: #7f56d9;
  }

  .contact-button {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    font-size: 1rem;
  }

  .contact-button:hover {
    background-color: #84100f;
    border-color: #7f56d9;
  }

  .banner-heading.mobile {
    text-align: center;
  }

  .primary-button.mobile, .secondary-button.mobile {
    font-size: 14px;
    line-height: 1.2;
  }

  .paragraph {
    max-width: none;
  }

  .paragraph.sub-text.mobile {
    text-align: center;
  }

  .home-banner {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .container-2 {
    margin-left: 24px;
    margin-right: 24px;
    display: block;
  }

  .container-2.mobile {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .home-about-section, .home-about-wrapper {
    flex-flow: column;
    display: flex;
  }

  .usp-card {
    flex-flow: column;
  }

  .usp-contentbox {
    margin-top: 10px;
    margin-left: 0;
  }

  .wbs-footer-logo-big {
    height: auto;
  }

  .bottom-nav-bar {
    padding: 10% 0% 0%;
  }

  .wbs-grid-footer-light {
    margin-bottom: 40px;
  }

  .container-3 {
    margin-left: 20px;
    margin-right: 20px;
  }

  .contact, .text-block-18 {
    margin-top: 20px;
  }

  .wbs-spacing-30 {
    padding: 8px 20px;
  }

  .wbs-footer-about {
    margin-bottom: 20px;
  }

  .wbs-footer-logo-wrap {
    flex: none;
  }

  .contact-info---big.sub-text.mobile {
    text-align: center;
  }

  .product-card-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .product-card-cta.mobile {
    font-size: 14px;
    line-height: 1.2;
  }

  .brand-card-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .bottomnav-sub-header {
    margin-top: 20px;
  }
}

@media screen and (max-width: 479px) {
  .container.home {
    margin-left: 24px;
    margin-right: 24px;
  }

  .logo-nav-bar {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }

  .image-15 {
    width: 40px;
    height: 40px;
    display: block;
  }

  .top-navbar-left-top-nav-4 {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .top-navbar---icon-text-vertical {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .brand-logo-2 {
    margin-left: 0;
  }

  .container---nav-bar {
    justify-content: center;
    align-items: stretch;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 10px;
  }

  .top-nav-vertical-container {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin-left: 0;
  }

  .top-nav-iconbox {
    width: 24px;
    height: 24px;
  }

  .top-nav---big-text, .to-nav---small-text {
    display: none;
  }

  .top-navbar {
    padding-left: 0;
    padding-right: 0;
  }

  .bottom-navbar_dropdown-link-list {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .text-block-11 {
    font-size: 1rem;
  }

  .top-navbar_link {
    margin-left: 0;
  }

  .top-navbar_link.current {
    color: #1d1816;
  }

  .bottom-navbar_dropdown-link {
    padding-left: 1.5rem;
    padding-right: 1rem;
  }

  .bottom-navbar_dropdown-link:hover {
    background-color: rgba(0, 0, 0, .15);
  }

  .top-navbar_menu-right {
    height: auto;
  }

  .top-navbar_menu-left {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .bottom-navbar_dropdown-list.w--open {
    border: 1px #ac3a39;
    width: 100%;
    margin-top: 10px;
    margin-left: auto;
    box-shadow: 0 12px 16px -7px rgba(0, 0, 0, .08), 0 4px 6px 6px rgba(0, 0, 0, .03);
  }

  .top-navbar_container {
    margin-left: 20px;
    margin-right: 20px;
  }

  .div-block-22 {
    padding: .25rem 0 .25rem 1rem;
  }

  .bottom-navbar_dropdown-toggle {
    margin-left: 0;
  }

  .top-navbar_menu {
    height: auto;
    padding-top: 0;
  }

  .uui-button-2:hover {
    background-color: #84100f;
  }

  .contact-button:hover {
    border-color: var(--blue);
    background-color: var(--beige);
  }

  .banner-cta-wrapper {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    justify-content: flex-start;
    align-items: center;
  }

  .banner-heading {
    max-width: 500px;
    font-size: 48px;
    line-height: 1;
  }

  .primary-button {
    text-align: center;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 14px;
    line-height: 1.4;
  }

  .primary-button.mobile {
    padding-left: 20px;
    padding-right: 20px;
  }

  .secondary-button {
    outline-offset: 0px;
    text-align: center;
    outline: 3px #fff;
    font-size: 14px;
    line-height: 1.4;
  }

  .secondary-button.mobile {
    padding-left: 20px;
    padding-right: 20px;
  }

  .paragraph.sub-text {
    color: rgba(255, 255, 255, .8);
    margin-top: 20px;
    margin-bottom: 60px;
    font-size: 14px;
  }

  .container-2 {
    flex-direction: row-reverse;
    max-width: none;
    margin-left: 24px;
    margin-right: 24px;
    display: block;
    overflow: visible;
  }

  .home-about-section {
    padding-top: 60px;
    padding-bottom: 80px;
  }

  .h-a-column3 {
    background-position: 50% 0;
    flex-flow: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    display: block;
  }

  .home-about-image {
    opacity: 1;
    display: block;
    overflow: visible;
  }

  .category-section, .products-section {
    padding-top: 60px;
    padding-bottom: 80px;
  }

  .usp-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .usp-grid {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .usp-card {
    flex-flow: row;
  }

  .usp-contentbox {
    margin-top: 0;
    margin-left: 20px;
  }

  .contact-form-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .wbs-margin-top-auto {
    color: #333;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
  }

  .wbs-footer-link.fotter {
    font-size: 12px;
    font-weight: 500;
  }

  .wbs-footer-logo-big {
    width: 50%;
    max-width: 20rem;
    overflow: hidden;
  }

  .wbs-footer-title {
    margin-bottom: 0;
  }

  .paragraph-10 {
    overflow: hidden;
  }

  .bottom-nav-bar {
    z-index: 6666;
    padding-bottom: 0;
    position: relative;
  }

  .wbs-grid-footer-light {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .wbs-footer-social {
    margin-top: 20px;
  }

  .contact {
    margin-top: 10px;
  }

  .wbs-grid-footer-menu {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    width: auto;
    overflow: hidden;
  }

  .wbs-footer-about {
    overflow: hidden;
  }

  .wbs-footer-logo-wrap {
    width: 100%;
    margin-bottom: 15px;
  }

  .wbs-footer-logo-wrap.w--current {
    margin-bottom: 0;
  }

  .contact-info-wrapper {
    flex-flow: column;
  }

  .form-block {
    width: 100%;
  }

  .contact-content {
    width: 100%;
    margin-top: 60px;
    margin-left: 0%;
  }

  .textfield-wrapper {
    width: 100%;
  }

  .input-field {
    margin-bottom: 16px;
  }

  .field-wrapper {
    flex-flow: column;
  }

  .contact-info---big.sub-text {
    color: rgba(255, 255, 255, .8);
    margin-top: 20px;
    margin-bottom: 80px;
    font-size: 16px;
  }

  .product-card-grid {
    grid-row-gap: 16px;
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
  }

  .product-card {
    height: 300px;
    max-height: none;
  }

  .product-imagebox {
    height: 120px;
  }

  .product-image {
    object-fit: contain;
  }

  .product-contentbox {
    padding: 16px;
  }

  .product-name {
    font-weight: 500;
  }

  .product-card-cta {
    outline-offset: 0px;
    text-align: center;
    outline: 3px #fff;
    font-size: 14px;
    line-height: 1.2;
  }

  .product-card-cta.mobile {
    padding-left: 20px;
    padding-right: 20px;
  }

  .brand-card-grid {
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
  }

  .brand-contentbox {
    padding: 12px;
  }

  .brand-name {
    font-weight: 500;
  }

  .text-span {
    text-decoration: underline;
    transition: all .3s;
  }

  .text-span:hover {
    background-color: var(--blue);
    color: var(--white);
  }

  .text-span-2 {
    text-decoration: underline;
  }

  .link-2, .link-3, .link-4 {
    color: var(--beige);
    text-decoration: none;
  }
}

#w-node-_909b30b2-cc6b-984d-81f0-54641f363706-b5ecfba3 {
  grid-area: span 2 / span 1 / span 2 / span 1;
}

#w-node-_0875dd8d-269c-fb16-515e-e027bb039448-b5ecfba3 {
  grid-area: span 2 / span 1 / span 2 / span 1;
  align-self: center;
  justify-self: auto;
}

#w-node-d387c2e0-bbd3-ae77-0237-d0ff5c9b395b-b5ecfba3, #w-node-_89f59621-653a-832d-525b-98af3a33c7dc-b5ecfba3, #w-node-_57365730-af7d-3d02-9e60-219e0dbdacf6-b5ecfba3, #w-node-_64800844-30bb-845c-f05b-724820808b25-b5ecfba3, #w-node-_90e0daaf-e0e7-789e-e856-b056572a60d9-b5ecfba3, #w-node-dcc9ad07-a95c-075d-d78f-570d8a81b55a-b5ecfba3, #w-node-_7f65cc63-347a-a377-3338-da13b287f6f6-b5ecfba3, #w-node-c676a512-d77b-c228-a3c0-a53e9eee3f4c-b5ecfba3, #w-node-_3d602d7f-7e36-cec9-853e-964e7841e26c-b5ecfba3, #w-node-_1dd79f9e-feb5-c4ca-df97-f0287660dda4-b5ecfba3, #w-node-a71f12e6-4fdd-3c9f-3c85-e2df137b070e-b5ecfba3, #w-node-_39b59f8a-9593-7ca6-6679-cbb66e01efcf-b5ecfba3, #w-node-_4bcf94ce-ff27-12ad-21cd-73e2ae0c5f5f-b5ecfba3, #w-node-_0f57ac76-b411-d00d-9be7-da0d6adb3ace-b5ecfba3, #w-node-_350815e5-b04c-791b-0cc5-eb1536e4d22f-b5ecfba3, #w-node-_9360db8e-acfa-1256-96a8-722935c18ae3-b5ecfba3, #w-node-_98b7f0b8-90e3-ebc6-a00d-26b90e6ece87-b5ecfba3, #w-node-d7a2837f-28c9-10c7-ba86-5fc597440d8a-b5ecfba3, #w-node-_46787731-6025-aa3d-2e8f-fe83a1208333-b5ecfba3, #w-node-_7a240957-dc97-122d-356e-0ab952c4170e-b5ecfba3, #w-node-_709f7d46-e016-00c4-537c-c2e72be310d9-b5ecfba3, #w-node-ff8930f4-4e37-6388-8898-d847cbf42005-b5ecfba3, #w-node-_5516191d-6bfe-2e75-c804-82d9d7cf5e44-b5ecfba3, #w-node-_38065b5c-f050-4bad-2bdc-d17cc184e040-b5ecfba3 {
  align-self: stretch;
}

#w-node-_85574bb2-6838-536f-50e8-35c09eae6063-b5ecfba3, #w-node-_85574bb2-6838-536f-50e8-35c09eae6064-b5ecfba3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

@media screen and (min-width: 1440px) {
  #w-node-_85574bb2-6838-536f-50e8-35c09eae6064-b5ecfba3 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

@media screen and (max-width: 479px) {
  #w-node-d387c2e0-bbd3-ae77-0237-d0ff5c9b395b-b5ecfba3 {
    align-self: auto;
    justify-self: auto;
  }

  #w-node-_89f59621-653a-832d-525b-98af3a33c7dc-b5ecfba3 {
    align-self: auto;
  }

  #w-node-_85574bb2-6838-536f-50e8-35c09eae6045-b5ecfba3, #w-node-_85574bb2-6838-536f-50e8-35c09eae6063-b5ecfba3 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}