/* ============================= */
/* VARIABLES                     */
/* ============================= */
:root {
  /* Colors */
  --color-black: #000;
  --color-white: #fff;
  --color-blue: #6babe6;
  --color-blue-dark: #1d8cff;
  --color-yellow: #ffcc00;
  --color-yellow-light: #f5e9b2;
  --color-grey: #787878;

  /* Typography */
  --font-family-main: "Alexandria", sans-serif;
}

/* ============================= */
/* GLOBAL RESET                  */
/* ============================= */

body {
  font-family: var(--font-family-main);
  color: var(--color-black);
  height: 100vh;
}

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

a {
  text-decoration: none;
}

/* Portrait mode only */
/* @media (orientation: portrait) {} */
.intro-bg {
  background: url("../images/intro_bg_mobile.png") no-repeat;
  background-size: 100%;
}

header {
  height: calc(412 / 2160 * 100vw);
  background-color: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

header .logo {
  height: calc(250 / 2160 * 100vw);
}

.back {
  position: absolute;
  left: calc(100 / 2160 * 100vw);
}

.back img {
  width: calc(170 / 2160 * 100vw);
}

.intro {
  justify-content: space-between;
}

section,
.intro {
  display: flex;
  flex-direction: column;
  height: calc(100% - calc(412 / 2160 * 100vw));
}

.intro-header {
  justify-content: center;
}

.banner-heading {
  font-size: calc(128 / 2160 * 100vw);
  color: var(--color-white);
  max-width: 100%;
  font-weight: 500;
  line-height: 1.2;
  /* padding-top: 228px; */
  padding-top: calc(228 / 2160 * 100vw);
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.btn {
  border: 0;
}

.btn-cocktail {
  width: calc(668 / 2160 * 100vw);
  border-radius: calc(100 / 2160 * 100vw);
  padding: calc(64 / 2160 * 100vw);
  font-size: calc(64 / 2160 * 100vw);
  /* width: 668px;
  border-radius: 100px;
  padding: 64px;
  font-size: 64px; */
  /* height: 198px; */

  display: inline-block;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  background: var(--color-blue);
  color: var(--color-white);
  text-decoration: none;
  transition: background 0.3s ease;
  line-height: 1;
}

.btn-cocktail:hover,
.btn-cocktail:focus,
.btn-cocktail:active {
  background: var(--color-blue-dark);
}

.btn-cocktail span {
  vertical-align: middle;
}

.btn-cocktail img {
  width: 12px;
}

.landscape-watermark,
.portrait-hide {
  display: none;
  width: 100%;
}

.portrait-watermark,
.landscape-hide {
  display: block;
  width: 100%;
}

/* Age-gate */

.age-gate-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url(../images/age_gate_bg_mobile.png) center / cover no-repeat;
  height: 100vh;
  position: relative;
  background-size: cover;
}

.age-gate-heading {
  text-align: center;
  font-size: calc(150 / 2160 * 100vw);
  color: var(--color-white);
}

.grey {
  font-size: calc(128 / 2160 * 100vw);
  color: var(--color-grey);
}

.btn-secondary {
  background-color: var(--color-yellow);
  color: var(--color-black);
}

.heading-text {
  position: relative;
  padding: calc(55 / 2160 * 100vw) calc(500 / 2160 * 100vw);
  font-size: calc(120 / 2160 * 100vw);
  color: var(--color-black);
  text-align: center;
  line-height: 1.2;
}

.light-blue-bg .heading-text {
  color: var(--color-white);
}

.light-yellow-bg {
  background-color: var(--color-yellow-light);
}

.light-blue-bg {
  background-color: var(--color-blue);
}

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

.slider-container {
  position: relative;
  padding: calc(60 / 2160 * 100vw);
}

.slider-container::before {
  content: "";
  display: inline-block;
  width: calc(126 / 2160 * 100vw);
  height: calc(126 / 2160 * 100vw);
  position: absolute;
  z-index: 1;

  top: calc(-100 / 2160 * 100vw);
    right: calc(10 / 2160 * 100vw);
  bottom: auto;
  left: auto;
  background: url("../images/scroll_thumb_hr.svg") no-repeat center/contain;
}

.slider-wrapper {
  max-height: calc(2260 / 2160 * 100vw);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  overflow-y: auto;
  overflow-x: hidden;
}

.categorie .slider-wrapper {
  padding: calc(160 / 2160 * 100vw) calc(000 / 2160 * 100vw) 0 calc(000 / 2160 * 100vw);
  max-height: calc(2300 / 2160 * 100vw);
}

.slide {
  flex-direction: column;
  flex: 0 0 33.33%;
  display: flex;
  align-items: center;
  margin-bottom: calc(70 / 2160 * 100vw);
}

.slider-wrapper .slide>img {
  max-height: calc(816 / 2160 * 100vw);
}

.categorie .slider-wrapper .slide>img {
  max-height: calc(742 / 2160 * 100vw);
}

.slide .btn-cocktail {
  width: calc(350 / 2160 * 100vw);
  height: calc(104 / 2160 * 100vw);
  padding: calc(32 / 2160 * 100vw);
  font-size: calc(36 / 2160 * 100vw);
  border-radius: calc(55 / 2160 * 100vw);
  margin-top: calc(70 / 2160 * 100vw);
  text-transform: capitalize;
}

.btn-top3 {
  width: calc(543 / 2160 * 100vw);
  padding: calc(55 / 2160 * 100vw);
  font-size: calc(48 / 2160 * 100vw);
  border-radius: calc(90 / 2160 * 100vw);
  /* margin-top: calc(90 / 2160 * 100vw); */
  background-color: var(--color-white);
  color: var(--color-black);
  text-transform: capitalize;
}

.btn-top3 img {
  filter: invert(1);
}

.top-rated {
  display: flex;
  flex-direction: column;
  padding-left: calc(140 / 2160 * 100vw);
  padding-right: calc(140 / 2160 * 100vw);
}

.rated {
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* .rated img {
  margin-top: calc(130 / 2160 * 100vw);
} */

.rated img.icon {
  margin-top: 10px;
  width: calc(54 / 2160 * 100vw);
}

.top3-rated {
  display: flex;
  justify-content: space-around;
  margin-bottom: calc(140 / 2160 * 100vw);
}

.top3-rated .rated:first-child>img {
  width: calc(568 / 2160 * 100vw);
}

.top3-rated .rated:nth-child(2)>img {
  width: calc(576 / 2160 * 100vw);
}

.top3-rated .rated:last-child>img {
  width: calc(592 / 2160 * 100vw);
}

.top3-rated.top-categorie {
  width: calc(532 / 2160 * 100vw);
}

.top-name {
  font-size: calc(55 / 2160 * 100vw);
  font-weight: bold;
  line-height: 1.25;
  margin-bottom: calc(45 / 2160 * 100vw);
}

.sec-heading {
  font-size: calc(96 / 2160 * 100vw);
  text-align: center;
  font-weight: bold;
}

.are-u-ready {
  margin-bottom: calc(68 / 2160 * 100vw);
}

.para {
  font-size: calc(60 / 2160 * 100vw);
  text-align: center;
}

.form-check {
  text-align: center;
  margin-top: calc(70 / 2160 * 100vw);
  display: flex;
  justify-content: center;
}

.form-check .form-check-input {
  float: none;
  margin-right: calc(15 / 2160 * 100vw);
  margin-top: calc(12 / 2160 * 100vw);
  width: calc(38 / 2160 * 100vw);
  height: calc(32 / 2160 * 100vw);
}

.btn-submit {
  width: calc(543 / 2160 * 100vw);
  /* height: calc(162 / 2160 * 100vw); */
  padding: calc(55 / 2160 * 100vw);
  font-size: calc(48 / 2160 * 100vw);
  border-radius: calc(90 / 2160 * 100vw);
  margin-top: calc(88 / 2160 * 100vw);
  text-align: center;
  text-transform: capitalize;
}

.btn-submit img {
  filter: invert(1);
}

.send-icon {
  display: none;
}

.submit-container {
  text-align: center;
  position: relative;
}

.form-check-label {
  font-size: calc(32 / 2160 * 100vw);
}

.btn-close {
  position: absolute;
  top: calc(-25 / 2160 * 100vw);
  right: calc(-25 / 2160 * 100vw);
  width: calc(55 / 2160 * 100vw);
  height: calc(55 / 2160 * 100vw);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-black);
  opacity: 1;
  font-size: calc(110 / 2160 * 100vw);
  line-height: calc(50 / 2160 * 100vw);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}

.modal-title {
  font-size: calc(70 / 2160 * 100vw);
  font-weight: bold;
  margin-bottom: calc(20 / 2160 * 100vw);
}

.modal-dialog {
  max-width: calc(2000 / 2160 * 100vw);
}

.modal-dialog .modal-body {
  padding: calc(115 / 2160 * 100vw) calc(105 / 2160 * 100vw);
  line-height: 1.2;
}

.modal-dialog .modal-body .para {
  text-align: left;
}

.modal-body img {
  width: calc(574 / 2160 * 100vw)
}

.categorie .heading-text {
  display: none;
}

.categorie-details .heading-text {
  color: var(--color-blue);
  padding: calc(40 / 2160 * 100vw) calc(450 / 2160 * 100vw);
  font-weight: 600;
  line-height: 1;
}

.product-name {
  text-align: center;
  margin-bottom: calc(30 / 2160 * 100vw);
}

.product-name span {
  display: inline-block;
  padding: calc(65 / 2160 * 100vw);
  font-size: calc(82 / 2160 * 100vw);
  border-radius: 0 0 calc(65 / 2160 * 100vw) calc(65 / 2160 * 100vw);
  background-color: var(--color-white);
  width: calc(528 / 2160 * 100vw);
  height: calc(202 / 2160 * 100vw);
  text-align: center;
  font-weight: 600;
  line-height: 1;
}

.bottle-name {
  font-size: calc(40 / 2160 * 100vw);
  color: #000;
  text-align: center;
  margin-top: calc(40 / 2160 * 100vw);
  margin-bottom: calc(30 / 2160 * 100vw);
}

.categorie-detail {
  display: flex;
  flex-wrap: wrap;
  padding: 0px calc(220 / 2160 * 100vw) 0px calc(220 / 2160 * 100vw);
}

.first-order img,
.second-order img {
  max-height: calc(1190 / 2160 * 100vw);
}

.first-order,
.second-order {
  flex: 1 1 50%;
  text-align: center;
}

.third-order {
  flex: 1 1 100%;
}

.categorie-detail .para {
  font-size: calc(40 / 2160 * 100vw);
  line-height: 1.2;
}

.third-order {
  margin-top: calc(100 / 2160 * 100vw);
}

.categorie-detail .sec-heading {
  font-size: calc(64 / 2160 * 100vw);
}

.text-right-portrait .para,
.text-right-portrait .sec-heading {
  text-align: right;
}

.enquiry-form {
  margin-top: calc(130 / 2160 * 100vw);
}

.form-element {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.form-element input {
  height: calc(103 / 2160 * 100vw);
  border-radius: calc(100 / 2160 * 100vw);
  font-size: calc(65 / 2160 * 100vw);
  text-align: center;
  max-width: calc(1070 / 2160 * 100vw);
  font-weight: normal;
  padding-left: calc(90 / 2160 * 100vw);
  padding-right: calc(90 / 2160 * 100vw);
}

.ready-container .form-element {
  flex-direction: column;
  align-items: center;
}

.left {
  display: flex;
  flex-direction: column;
  flex: 1 1 60%;
}

.left .para {
  max-width: calc(800 / 2160 * 100vw);
  margin: 0 auto;
}

.text {
  flex: 1;
}

.form {
  display: flex;
  flex-direction: column;
  margin-top: calc(70 / 2160 * 100vw);
}

.right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 40%;
  align-self: flex-end;
  padding-bottom: calc(30 / 2160 * 100vw);
}

.right .qr-code {
  max-height: calc(468 / 2160 * 100vw);
}

.and {
  font-size: calc(48 / 2160 * 100vw);
  text-align: center;
  margin: calc(25 / 2160 * 100vw) auto;
  line-height: 1;
}

.categorie-detail .btn-submit img {
  filter: invert(0);
}

input.form-control::placeholder {
  color: #ccc !important;
  font-weight: 300;
}

.fixed-bottom {
  z-index: -1;
}

/* width */
::-webkit-scrollbar {
  width: calc(15 / 2160 * 100vw);
  height: auto;
}

/* Track */
::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: calc(10 / 2160 * 100vw);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #000000;
  border-radius: calc(10 / 2160 * 100vw);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #000000;
}

/* Landscape mode only */
@media (orientation: landscape) {
  .back {
    left: calc(100 / 3840 * 100vw);
  }

  .intro-bg {
    background: url("../images/intro_bg.png") no-repeat;
    background-size: 100%;
  }

  header {
    height: calc(297 / 3840 * 100vw);
    padding-left: calc(170 / 3840 * 100vw);
    justify-content: flex-start;
  }

  header .logo {
    height: calc(216 / 3840 * 100vw);
  }

  .btn-cocktail {
    width: calc(668 / 3840 * 100vw);
    border-radius: calc(100 / 3840 * 100vw);
    padding: calc(64 / 3840 * 100vw);
    font-size: calc(58 / 3840 * 100vw);
  }

  section,
  .intro {
    height: calc(100% - calc(297 / 3840 * 100vw));
  }

  .intro-header {
    padding-left: 0;
  }

  .back-btn-header {
    padding-left: calc(300 / 3840 * 100vw);
  }

  .back img {
    width: calc(113 / 3840 * 100vw);
  }

  .light-blue-bg .white-header+section .heading-text {
    color: var(--color-black);
  }

  .intro {
    display: flex;
    min-height: calc(100vh - 297px);
  }

  .banner-heading {
    padding-top: 0px;
    align-items: flex-start;
    margin-left: calc(390 / 3840 * 100vw);
    margin-top: calc(350 / 3840 * 100vw);
    font-size: calc(128 / 3840 * 100vw);
  }

  .landscape-watermark,
  .portrait-hide {
    display: block;
  }

  .portrait-watermark,
  .landscape-hide {
    display: none;
  }

  .age-gate-container {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
      url(../images/age_gate_bg.png) center / cover no-repeat;
  }

  .age-gate-heading {
  font-size: calc(150 / 3840 * 100vw);
}

  .grey {
    font-size: calc(128 / 3840 * 100vw);
}

  .heading-text {
    position: absolute;
    top: calc(90 / 3840 * 100vw);
    right: calc(140 / 3840 * 100vw);
    font-size: calc(96 / 3840 * 100vw);

    font-weight: bold;
    color: var(--color-white);
    text-align: right;
    padding: 0;
  }

  .slider-container {
    position: relative;
    padding: 0;
    padding-left: calc(200 / 3840 * 100vw);
  }

  .slider-container::before {
    content: "";
    display: inline-block;
    width: calc(126 / 3840 * 100vw);
    height: calc(126 / 3840 * 100vw);
    position: absolute;
    z-index: 1;
    top: auto;
    right: auto;
    bottom: calc(-63 / 3840 * 100vw);
    left: calc(30 / 3840 * 100vw);
    background: url("../images/scroll_thumb_hr.svg") no-repeat center/contain;
  }

  .slider-wrapper {
    /* padding: calc(50 / 3840 * 100vw) 0; */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: flex-end;
    gap: calc(110 / 3840 * 100vw);
    scroll-behavior: smooth;
    position: relative;
  }

  .slide {
    flex: 0 0 auto;
    margin-bottom: 0;
    padding: calc(50 / 3840 * 100vw) 0;
  }

  .categorie .slide {
    padding: calc(60 / 3840 * 100vw) 0;
  }

  .slide .btn-cocktail {
    width: calc(543 / 3840 * 100vw);
    height: calc(162 / 3840 * 100vw);
    padding: calc(55 / 3840 * 100vw);
    font-size: calc(48 / 3840 * 100vw);
    margin-top: calc(90 / 3840 * 100vw);
    border-radius: calc(90 / 3840 * 100vw);
  }

  .categorie .slide .btn-cocktail {
    margin-top: 0px;
  }

  .slider-wrapper .slide>img {
    max-height: calc(932 / 3840 * 100vw);
  }

  .categorie .slider-wrapper .slide>img {
    max-height: calc(742 / 3840 * 100vw);
  }

  .btn-top3 {
    position: absolute;
    right: calc(140 / 3840 * 100vw);
    top: calc(130 / 3840 * 100vw);
    margin-top: 0px;
    z-index: 1040;
  }

  .categorie .btn-top3 {
    top: calc(70 / 3840 * 100vw);
  }

  .ready-container {
    width: 45%;
  }

  .top-name {
    font-size: calc(55 / 3840 * 100vw);
    margin-bottom: calc(45 / 3840 * 100vw);
  }

  .are-u-ready {
    margin-bottom: calc(68 / 3840 * 100vw);
  }

  .form-element input {
    height: calc(103 / 3840 * 100vw);
    border-radius: calc(100 / 3840 * 100vw);
    font-size: calc(65 / 3840 * 100vw);
    max-width: calc(1070 / 3840 * 100vw);
    padding-left: calc(90 / 3840 * 100vw);
    padding-right: calc(90 / 3840 * 100vw);
  }

  .top3-rated {
    width: 70%;
    margin-bottom: 0;
    /* margin-left: calc(250 / 3840 * 100vw); */
    justify-content: space-between;
  }

  .top3-rated .rated:first-child>img {
    width: calc(668 / 3840 * 100vw);
  }

  .top3-rated .rated:nth-child(2)>img {
    width: calc(676 / 3840 * 100vw);
  }

  .top3-rated .rated:last-child>img {
    width: calc(692 / 3840 * 100vw);
  }

  .top3-rated.top-categorie {
    width: auto;
  }

  .form-check .form-check-input {
    margin-right: calc(15 / 3840 * 100vw);
    margin-top: calc(12 / 3840 * 100vw);
    width: calc(38 / 3840 * 100vw);
    height: calc(32 / 3840 * 100vw);
  }

  .top-rated {
    flex-direction: row;
    padding: calc(122 / 3840 * 100vw) calc(220 / 3840 * 100vw) calc(122 / 3840 * 100vw) calc(300 / 3840 * 100vw);
    height: 100%;
    align-items: flex-end;
  }

  .rated img {
    margin-top: 0;
    width: calc(54 / 3840 * 100vw);
  }

  .top-rated> :first-child {
    order: 2;
  }

  .top-rated> :last-child {
    order: 1;
  }

  .send-icon {
    display: inline-block;
    margin-left: 0;
    position: absolute;
    top: calc(-100 / 3840 * 100vw);
    z-index: -1;
    width: calc(597 / 3840 * 100vw);
  }

  .sec-heading {
    font-size: calc(96 / 3840 * 100vw);
    text-align: left;
  }

  .are-u-ready .sec-heading {
    margin-bottom: calc(60 / 3840 * 100vw);
  }

  .para {
    font-size: calc(48 / 3840 * 100vw);
    text-align: left;
  }

  .form-element {
    margin-left: 0;
  }

  .submit-container {
    text-align: left;
  }

  .form-check {
    text-align: left;
    justify-content: flex-start;
  }

  .form-check-label {
    width: calc(800 / 3840 * 100vw) !important;
    font-size: calc(32 / 3840 * 100vw);
  }

  .enquiry-form .form-check-label {
    width: auto;
  }

  .are-u-ready-text {
    width: calc(994 / 3840 * 100vw);
  }

  .and {
    margin-left: calc(90 / 3840 * 100vw);
  }

  .modal-dialog {
    max-width: calc(2125 / 3840 * 100vw);
  }

  .categorie .heading-text {
    display: block;
    top: calc(30 / 3840 * 100vw);

  }

  .categorie-details .heading-text {
    color: var(--color-white);
    padding: 0;
    font-weight: bold;
  }

  .product-name {
    text-align: right;
    padding-right: calc(140 / 3840 * 100vw);
    margin-bottom: 0px;
  }

  .product-name span {
    display: inline-block;
    padding: calc(25 / 3840 * 100vw) calc(45 / 3840 * 100vw);
    font-size: calc(64 / 3840 * 100vw);
    border-radius: 0 0 calc(65 / 3840 * 100vw) calc(65 / 3840 * 100vw);
    background-color: var(--color-white);
    width: calc(368 / 3840 * 100vw);
    height: calc(141 / 3840 * 100vw);
    line-height: 1;
  }

  .categorie .slider-wrapper {
    padding: 0px;
    max-height: calc(2400 / 3840 * 100vw);
    margin-left: 0;
  }

  .categorie .bottle-name {
    font-size: calc(40 / 3840 * 100vw);
    min-height: calc(120 / 3840 * 100vw);
    margin-top: calc(20 / 3840 * 100vw);
  }

  .categorie-detail {
    flex-wrap: nowrap;
    padding: calc(80 / 3840 * 100vw) calc(140 / 3840 * 100vw);
    align-items: center;
  }

  .first-order img, .second-order img {
    max-height: calc(1590 / 3840 * 100vw);
}

  .first-order {
    order: 1;
  }

  .second-order {
    order: 3;
  }

  .third-order {
    order: 2;
    margin-top: 0px;
    padding-left: calc(50 / 3840 * 100vw);
    padding-right: calc(90 / 3840 * 100vw);
  }

  .third-order {
    flex: 1 1 50%;
  }

  .first-order,
  .second-order {
    flex: 1 1 25%;
  }

  .categorie-detail .para {
    font-size: calc(44 / 3840 * 100vw);
    line-height: 1.2;
  }

  .text-right-portrait .para,
  .text-right-portrait .sec-heading {
    text-align: left;
  }

  .form-element {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  .right {
    padding-bottom: 0px;
    flex: 1 1 10%;
  }

  .right .qr-code {
    max-height: calc(294 / 3840 * 100vw);
  }

  .enquiry-form {
    margin-top: 0;
  }

  .form {
    margin-top: calc(50 / 3840 * 100vw);
  }

  .enquiry-form .btn-submit {
    margin-top: calc(75 / 3840 * 100vw);
  }

  .enquiry-form .form-check {
    margin-top: calc(50 / 3840 * 100vw);
    margin-left: calc(90 / 3840 * 100vw);
  }

  .form-element input {
    text-align: left;
  }

  .ready-container .enquiry-form .form-check {
    margin-left: 0px;
  }

  .categorie-detail .sec-heading {
    font-size: calc(70 / 3840 * 100vw);
  }

  .categorie-detail .send-icon {
    margin-left: calc(50 / 3840 * 100vw);
    position: relative;
    top: auto;
    z-index: 0;
  }

  .ready-container .form-element {
    align-items: flex-start;
  }

  .modal-title {
    font-size: calc(70 / 3840 * 100vw);
    font-weight: bold;
    margin-bottom: calc(20 / 3840 * 100vw);
  }

  .btn-close {
    top: calc(-25 / 3840 * 100vw);
    right: calc(-25 / 3840 * 100vw);
    width: calc(55 / 3840 * 100vw);
    height: calc(55 / 3840 * 100vw);
    font-size: calc(110 / 3840 * 100vw);
    line-height: calc(50 / 3840 * 100vw);
  }

  .modal-dialog .modal-body {
    padding: calc(115 / 3840 * 100vw) calc(105 / 3840 * 100vw);
  }

  .modal-body img {
    width: calc(574 / 3840 * 100vw)
  }

  ::-webkit-scrollbar {
    height: calc(15 / 3840 * 100vw);
    width: auto;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: calc(10 / 3860 * 100vw);
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    border-radius: calc(10 / 3860 * 100vw);
  }
}

@media (min-width:2160px) {

  .btn-cocktail img {
    width: auto;
  }
}