/** Shopify CDN: Minification failed

Line 413:3 Unexpected "{"

**/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@font-face {
  font-family: "robotoregular";
  src: url("../fonts/roboto-regular-webfont.woff2") format("woff2"),
    url("../fonts/roboto-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "robotolight";
  src: url("../fonts/roboto-light-webfont.woff2") format("woff2"),
    url("../fonts/roboto-light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "robotomedium";
  src: url("../fonts/roboto-medium-webfont.woff2") format("woff2"),
    url("../fonts/roboto-medium-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "robotobold";
  src: url("../fonts/roboto-bold-webfont.woff2") format("woff2"),
    url("../fonts/roboto-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Bold.otf") format("otf");
  font-weight: Bold;
  font-style: normal;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Regular.otf") format("otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Scotch Display Cont Ft";
	src:url("../fonts/ScotchDisplayCond-Ft.woff2")format("woff2"),
  url("../fonts/ScotchDisplayCond-Ft.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
:root {
  --white: #fff;
  --black: #000000;
  --dark-gray: #212121;
  --yellow: #FCDC2F;
  --yellow-hover: #e2c62a;
  --bg-color:#F3F3F3;
}
html,
body {
  font-family: "robotoregular";
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  font-display: swap;
}
/* large screen size 2k 4k 8k  */
@media (min-width: 2561px) and (max-width: 80000000px) {
  body,
  html {
    position: relative;
    width: 1920px !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.24) !important;
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.24) !important;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.24) !important;
  }
}
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
  padding: 0;
  margin: 0;
}
.custom-btn {
  background-color: var(--yellow);
  border: none;
  border-radius: 0.25rem;
  text-wrap: nowrap;
}
.view-all {
  font-size: 1.125rem;
  color: var(--yellow);
  font-family: 'robotomedium';
}
.view-all:hover {
  color: var(--black);
  cursor: pointer;
}
.arrow-right i::before {
  border: 1px solid;
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  padding: 0.25rem;
}
li {
  list-style: none;
}
/* scrollbar css */
::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}
::-webkit-scrollbar-track {
  border-radius: 10rem;
  background: #efefef;
}
::-webkit-scrollbar-thumb {
  border-radius: 10rem;
  background: #dfdfdf;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}
::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.9);
}
input[placeholder] {
  text-overflow: ellipsis;
}
input[placeholder] {
  text-overflow: ellipsis;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0;
}
::-moz-placeholder {
  color: var(--black);
  font-weight: normal;
}
input:-moz-placeholder {
  text-overflow: ellipsis;
}
input:focus-visible {
  outline: none;
}
.navbar-toggler:focus {
  box-shadow: unset !important;
}
.form-control:focus {
  box-shadow: none !important;
}
.nav-link:focus {
  color: var(--white);
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
a {
  text-decoration: none;
}
.custom-container {
  width: 100%;
  margin: 0 auto;
  padding: 0rem 6rem;
}
.full-width-container {
  width: 100%;
  margin: 0 auto;
  padding: 0rem 0rem;
  overflow: hidden;
}

/* .owl-carousel custom */
.btn.focus,
.btn:focus {
  box-shadow: unset;
}
.btn-focus {
  box-shadow: none;
}
.owl-nav .fa-2xs {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--dark-gray);
  vertical-align: 0em;
  height: 21px;
  width: 21px;
  border-radius: 3rem;
  background: var(--white);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.owl-theme .owl-nav [class*="owl-"]:hover {
  background: unset !important;
  color: var(--yellow);
  text-decoration: none;
  border-radius: 0px;
}
.owl-nav .fa-2xs:hover {
  background-color: var(--yellow);
  color: var(--black);
}
.owl-theme .owl-nav {
  margin-top: 0px !important;
}
.owl-carousel .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.owl-carousel .owl-nav .owl-prev{
  left: -45px;
  position: absolute;
}
.owl-carousel .owl-nav .owl-next{
  right: -45px;
  position: absolute;
}
.owl-carousel .owl-dots button {
  background: var(--dark-gray);
  width:15px;
  height: 15px;
  border-radius: 50%;
  margin:5px;
}
.owl-carousel .owl-dots button.active{
  background: var(--yellow);
}
.owl-carousel .owl-dots button:focus-visible{
  border: none;
  background: transparent;
}
.owl-carousel .owl-nav button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  pointer-events: auto;
}
#our-products .owl-theme .owl-dots {
  text-align: center;
  margin-top: 15px;
}
#heroSection .owl-theme .owl-dots {
  text-align: center;
} 
#heroSection .owl-theme .owl-dots .owl-dot span {
  width: 1rem;
  height: 1rem;
  margin: 0rem 0.75rem;
  background-color: var(--white);
  color: #000;
  display: inline-block;
  border-radius: 50%;
}
#heroSection .owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background-color: var(--yellow);
}
.border-btn {
  border-color: #9b9b9b;
  color: var(--black);
}
.border-btn:hover {
  background-color: var(--yellow);
  border-color: var(--yellow);
}
.breadcrumb-item a {
  text-decoration: none;
  color: var(--black);
}
.breadcrumb-item {
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 100;
  font-family: "robotomedium";
  color: var(--black);
  padding-right: 0rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--black);
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-size: 1rem;
  padding-right: 0.5rem;
}
.breadcrumb-item.active {
  color: var(--yellow);
}
.form-check-input:focus {
  box-shadow: none;
}
.slick-next {
  right: 0px;
}
.slick-prev {
  left: 0px;
}
.slick-prev, .slick-next {
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: transparent;
  border: none;
  cursor: pointer;
  height: 2rem;
  width: 2rem;
  border: 1px solid #D2D8D9;
  border-radius: 0.25rem;
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  font-size: 0.875rem;
  line-height: normal;
}
.slick-prev:before {
  content: '\f104';
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  color: #CACACA;
}
.slick-next:before {
  content: '\f105';
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  color: #CACACA;
}
input {
  font-family: "robotoregular";
  color: #605B5B;
 
  border: 1px solid #eff3f6;
 
}
select {
  font-family: "robotoregular";
  color: #605B5B;
  margin-bottom: 1rem;
  border: 1px solid #eff3f6;
  padding: 0.5rem;
}
.page-link:focus {
  box-shadow: none;
}
.slide-left{
  float: left;
  background: #fff;
  width:60%;
  display: table;
  margin: 0 auto;
  padding: 0 60px;
}
.slide-right{
  float: right;
  width:40%;
} 
.slide-left .text{
  display: table-cell;
  vertical-align: middle;
}
.cta-button img{
  width: auto!important;
  display: inline-block!important;
}
.float-right{
  float:right;
}
.icon{
  margin-right: 0 !important;
}
ul.social-media.social-media--block.unstyled-list .icon {
    margin: 0 auto !important;
}


h1,
h2,
h3,
h4,
h5,
h6,{
   font-family: "DINPro" !important;
}

p,
span,
a,
ul,
ol,
li,
dl,
dt,
dd,
em,
b,
u,
mark,
code,
pre,
blockquote,
cite,
abbr,
sup,
sub,
section,
article,
aside,
nav,
header,
footer,
details,
summary,
label,
input,
textarea,
select,
option,
button {
  font-family: 'Roboto', sans-serif;
}


@media screen and (max-width: 576px) {
  .custom-container {
    padding: 0 1rem;
  }
}
.section-padding{
  padding: 80px 0;
}