:root {
    --gray-color-50: #f5f5f5;
    --gray-color-100: #e9e9e9;
    --gray-color-200: #d9d9d9;
    --gray-color-300: #c4c4c4;
    --gray-color-400: #9d9d9d;
    --gray-color-500: #7b7b7b;
    --gray-color-600: #555555;
    --gray-color-700: #434343;
    --gray-color-800: #262626;
    --gray-color-900: #000000;
    --primary-color-50: #fff9e3;
    --primary-color-100: #ffedb7;
    --primary-color-200: #ffe389;
    --primary-color-300: #ffd95a;
    --primary-color-400: #ffce3a;
    --primary-color-500: #ffc627;
    --primary-color-600: #ffb821;
    --primary-color-700: #fea51d;
    --primary-color-800: #fe951a;
    --primary-color-900: #fe7614;
    --secondary-color-50: #e6eaf0;
    --secondary-color-100: #bfcadc;
    --secondary-color-200: #97a8c4;
    --secondary-color-300: #6f87ad;
    --secondary-color-400: #4f6d9d;
    --secondary-color-500: #2c558e;
    --secondary-color-600: #254e86;
    --secondary-color-700: #1c447a;
    --secondary-color-800: #153b6e;
    --secondary-color-900: #0d2a56;
    --primary: var(--primary-color-300);
    --secondary: var(--secondary-color-900);
    --yummy-primary: #7265e3;
}

.color-white { color: #fff; }
.color-gray-50 { color: var(--gray-color-50); }
.color-gray-100 { color: var(--gray-color-100); }
.color-gray-200 { color: var(--gray-color-200); }
.color-gray-300 { color: var(--gray-color-300); }
.color-gray-400 { color: var(--gray-color-400); }
.color-gray-500 { color: var(--gray-color-500); }
.color-gray-600 { color: var(--gray-color-600); }
.color-gray-700 { color: var(--gray-color-700); }
.color-gray-800 { color: var(--gray-color-800); }
.color-gray-900 { color: var(--gray-color-900); }
.bg-color-gray-50 { background-color: var(--gray-color-50); }
.bg-color-gray-100 { background-color: var(--gray-color-100); }
.bg-color-gray-200 { background-color: var(--gray-color-200); }
.bg-color-gray-300 { background-color: var(--gray-color-300); }
.bg-color-gray-400 { background-color: var(--gray-color-400); }
.bg-color-gray-500 { background-color: var(--gray-color-500); }
.bg-color-gray-600 { background-color: var(--gray-color-600); }
.bg-color-gray-700 { background-color: var(--gray-color-700); }
.bg-color-gray-800 { background-color: var(--gray-color-800); }
.bg-color-gray-900 { background-color: var(--gray-color-900); }
.color-pri-50 { color: var(--primary-color-50); }
.color-pri-100 { color: var(--primary-color-100); }
.color-pri-200 { color: var(--primary-color-200); }
.color-pri-300 { color: var(--primary-color-300); }
.color-pri-400 { color: var(--primary-color-400); }
.color-pri-500 { color: var(--primary-color-500); }
.color-pri-600 { color: var(--primary-color-600); }
.color-pri-700 { color: var(--primary-color-700); }
.color-pri-800 { color: var(--primary-color-800); }
.color-pri-900 { color: var(--primary-color-900); }
.bg-color-pri-50 { background-color: var(--primary-color-50); }
.bg-color-pri-100 { background-color: var(--primary-color-100); }
.bg-color-pri-200 { background-color: var(--primary-color-200); }
.bg-color-pri-300 { background-color: var(--primary-color-300); }
.bg-color-pri-400 { background-color: var(--primary-color-400); }
.bg-color-pri-500 { background-color: var(--primary-color-500); }
.bg-color-pri-600 { background-color: var(--primary-color-600); }
.bg-color-pri-700 { background-color: var(--primary-color-700); }
.bg-color-pri-800 { background-color: var(--primary-color-800); }
.bg-color-pri-900 { background-color: var(--primary-color-900); }
.color-sec-50 { color: var(--secondary-color-50); }
.color-sec-100 { color: var(--secondary-color-100); }
.color-sec-200 { color: var(--secondary-color-200); }
.color-sec-300 { color: var(--secondary-color-300); }
.color-sec-400 { color: var(--secondary-color-400); }
.color-sec-500 { color: var(--secondary-color-500); }
.color-sec-600 { color: var(--secondary-color-600); }
.color-sec-700 { color: var(--secondary-color-700); }
.color-sec-800 { color: var(--secondary-color-800); }
.color-sec-900 { color: var(--secondary-color-900); }
.bg-color-sec-50 { background-color: var(--secondary-color-50); }
.bg-color-sec-100 { background-color: var(--secondary-color-100); }
.bg-color-sec-200 { background-color: var(--secondary-color-200); }
.bg-color-sec-300 { background-color: var(--secondary-color-300); }
.bg-color-sec-400 { background-color: var(--secondary-color-400); }
.bg-color-sec-500 { background-color: var(--secondary-color-500); }
.bg-color-sec-600 { background-color: var(--secondary-color-600); }
.bg-color-sec-700 { background-color: var(--secondary-color-700); }
.bg-color-sec-800 { background-color: var(--secondary-color-800); }
.bg-color-sec-900 { background-color: var(--secondary-color-900); }
.bg-color-yummy-primary { background-color: var(--yummy-primary); }

html, body {
    color: #fff;
    background: var(--secondary-color-900);
    direction: ltr;
}

main {
    background: #fff;
    color: #000;
}

.btn-pri {
    background-color: #ffbf00;
    color: #000;
    font-weight: 500;
}

.btn-pri:hover, .btn-pri:active, .btn-pri:first-child:active {
    background-color: var(--primary-color-400);
    color: #000;
}

.btn-sec {
    background-color: var(--secondary-color-800);
    color: #fff;
    font-weight: 500;
}

.btn-sec:hover, .btn-sec:active, .btn-sec:first-child:active {
    background-color: var(--secondary-color-500);
    color: #fff;
}

.badge.small {
    transform: translateY(-50%);
    font-size: .4em;
}

.badge.primary {
    background-color: var(--primary-color-100);
    color: #000;
}

.navbar-brand {
    width: 51px;
    height: 44px;
    background-image: url('../image/beedev-logo1593.png');
    background-size: cover;
}

.navbar-brand h1 {
    display: none;
}

.navbar-toggler {
    border: none;
}

.product-description-yummy {
    background-image: url('../image/yummy-icon.png');
    background-size: 203px;
    background-repeat: no-repeat;
    background-position: center 114px;
    padding-bottom: 300px;
}

.product-device {
    position: absolute;
    right: 10%;
    bottom: -30%;
    width: 300px;
    height: 540px;
    /*background-color: #0d2a56;*/
    border-radius: 21px;
    transform: rotate(30deg);
  }
  
  .product-device::before {
    position: absolute;
    top: 10%;
    right: 10px;
    bottom: 10%;
    left: 10px;
    content: "";
    background-color: rgba(255, 255, 255, .1);
    border-radius: 5px;
  }
  
  .product-device-2 {
    top: -25%;
    right: auto;
    bottom: 0;
    left: 5%;
    /*background-color: #ffd95a;*/
  }

  .yummy-landing {
    background-image: linear-gradient(var(--secondary), #101010);
    color: #fff;
    min-height: 900px;
  }

  .yummy-header {
    max-width: 700px;
  }

  .yummy-block {
    max-width: 800px;
    margin: 0 auto;
  }

  .yummy-title {
    font-size: 76px;
    font-weight: bold;
    margin-bottom: 1.5em;
  }

  .yummy-description {
    height: 800px;
    color: var(--yummy-primary);
  }

  .yummy-logo {
    background-image: url('../image/yummy-icon.png');
    background-size: 203px;
    background-repeat: no-repeat;
    background-position: center;
    padding-bottom: 203px;
    margin-bottom: 2.5em;
  }

  .yummy-logo h2 {
    display: none;
  }

  .yummy-app-box {
    width: 100%;
    margin-bottom: 1.5em;
  }

  .yummy-app {
    background-image: url('../image/yummy-app.png');
    background-size: auto 600px;
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 600px;
    margin-bottom: 1.5em;
    display: inline-block;
    width: 300px;
  }

  .yummy-app-2 {
    display: none;
  }

  .yummy-app-3 {
    display: none;
  }

  @media only screen and (min-width: 1400px) {
    .yummy-app-1 {
      background-image: url('../image/yummy-app.png');
      background-size: auto 450px;
      background-position: right bottom;
      margin-right: 20px;
    }

    .yummy-app-2 {
      background-image: url('../image/yummy-app.png');
      background-size: auto 600px;
      background-position: left bottom;
      margin-left: 20px;
      display: inline-block;
    }

    .yummy-app-3 {
      background-image: url('../image/big-screen-yummy.png');
      background-size: 550px auto;
      background-position: center bottom;
      width: 550px;
      display: inline-block;
    }
  }

  .yummy-picture {
    background-size: auto 600px;
    background-repeat: no-repeat;
    background-position: center;
    padding-bottom: 800px;
  }

  .yummy-picture-1 {
    background-image: url('../image/yummy-app.png');
  }

  .yummy-picture-2 {
    background-image: url('../image/yummy-app.png');
  }

  .yummy-picture-3 {
    background-size: 460px;
    background-repeat: no-repeat;
    background-position: center;
    padding-bottom: 460px;
    background-image: url('../image/big-screen-yummy.png');
  }

  .yummy-feature ul {
    list-style: none;
  }

  .yummy-feature ul li::before {
    content: "-";
    color: var(--yummy-primary);
    padding-right: 7px;
    font-size: 200%;
    line-height: 50%;
    vertical-align: sub;
  }

  .yummy-highlight {
    color: var(--yummy-primary);
    font-weight: bold;
  }