@font-face {
  font-family: "BebasKai";
  src:
    url("../fonts/BebasKai.woff2") format("woff2"),
    url("../fonts/BebasKai.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Done";
  src:
    url("../fonts/Done-Regular.woff2") format("woff2"),
    url("../fonts/Done-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BebasNeue";
  src:
    url("../fonts/BebasNeue-Regular.woff2") format("woff2"),
    url("../fonts/BebasNeue-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src:
    url("../fonts/Roboto-Regular.woff2") format("woff2"),
    url("../fonts/Roboto-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TradeGothicLTStdRegular";
  src:
    url("../fonts/TradeGothicLTStd.woff2") format("woff2"),
    url("../fonts/TradeGothicLTStd.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TradeGothicLTStdBold";
  src:
    url("../fonts/TradeGothicLTStd-BdCn20.woff2") format("woff2"),
    url("../fonts/TradeGothicLTStd-BdCn20.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sink";
  src:
    url("../fonts/SinkRegular.woff2") format("woff2"),
    url("../fonts/SinkRegular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* background colors */
  --color-bg-white: #ffffff;
  --color-body-bg: #f9f9f9;
  --color-primary-bg: #be1622;
  --color-secondary-bg: #f8c000;
  --color-dark-bg: #1f1f1f;
  --color-dark-bg-200: #222222;
  --color-black-bg: #000000;

  /* font colors */
  --fonts-light: #ffffff;
  --fonts-light-200: #f9f9f9;
  --fonts-dark: #222222;
  --fonts-dark-200: #0a0a0a;
  --fonts-yellow: #f8c000;
  --fonts-red: #be1622;
  --fonts-black: #000000;
  --fonts-qr: #fbfbfb;
  --font-copywrite: #fbf7ec;
  --font-trems: #1e1e1e;
  --fonts-review-card: #0e0e0e;

  /* container */
  --cus-container-width: 1508px;
  --cus-container-padding: 110px;

  /* Font Family*/
  --font-button: "BebasKai", sans-serif;
  --font-button-secondery: "BebasNeue", sans-serif;
  --font-heading: "Done", sans-serif;
  --fonts-desc: "TradeGothicLTStdBold", sans-serif;
  --fonts-card-desc: "Roboto", sans-serif;
  --fonts-mobile-drawer: "Sink", sans-serif;
  --fonts-location: "TradeGothicLTStdRegular", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* background-color: var(--color-body-bg); */
  background-color: var(--color-primary-bg);
  font-family: Arial, sans-serif;
}

body.franchise-page {
  background-color: var(--color-dark-bg-200);
}

body.drawer-open {
  background-color: var(--color-black-bg);;
  overflow: hidden;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
  cursor: pointer;
}

button {
  cursor: pointer;
}

.cus-container {
  max-width: calc(
    var(--cus-container-width) + (var(--cus-container-padding) * 2)
  );
  width: 100%;
  padding: 0 var(--cus-container-padding);
  margin: 0 auto;
}

.d-none {
  display: none;
}

.d-sm-block {
  display: block;
}

.prev-btn.slick-disabled,
.next-btn.slick-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

@media only screen and (max-width: 1728px) and (min-width: 992px) {
  .cus-container {
    /* max-width: calc(100vw - (6.366vw * 2)); */
    padding: 0 6.366vw;
  }
}

@media only screen and (max-width: 991px) {
  .d-none {
    display: block;
  }

  .d-sm-block {
    display: none;
  }

  .cus-container {
    padding: 0px 20px;
  }

  body.menu-list .cus-container {
    padding: 0px 40px;
  }

  body.menu-list footer .cus-container {
    padding: 0px 20px;
  }
}

/* Scrollbar CSS*/

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

.scrollbar::-webkit-scrollbar {
  width: 3px;
  background-color: transparent;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(190, 22, 34, 0.5);
  border-radius: 10px;
}

.scrollbar {
  padding-right: 10px;
  margin-right: -10px;
}

.scrollbar-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}


@media only screen and (max-width: 1728px) and (min-width: 992px) {
  .scrollbar {
    padding-right: 0.579vw;
    margin-right: -0.579vw;
  }

  .scrollbar::-webkit-scrollbar {
    width: 0.174vw;
  }
  
  .scrollbar::-webkit-scrollbar-thumb {
    border-radius: 0.579vw;
  }
}