/* === DC SYSTEM GRINDER CONTROL SYSTEM PAGE === */

.grinder__control__system__home__icon {
  width: 218px;
  height: 218px;
  left: 2920px;
  top: 24px;
}

.grinder__control__system__home__circle {
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  border-radius: 50%;

  background: #f3c32d;

  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.grinder__control__system__home__circle:active {
  background: #ffd84e;
  transform: translateY(3px) scale(0.97);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.grinder__control__system__home__outline {
  left: 28.44%;
  right: 28.44%;
  top: 29.36%;
  bottom: 33.49%;

  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.grinder__control__system__home__circle:active
  + .grinder__control__system__home__outline {
  transform: translateY(1px);
}

.grinder__control__system__lang__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  width: 610px;
  left: calc(50% - 610px / 2 + 1575px);
  top: 1.48%;
  bottom: 88.33%;

  background: #2e2e2e;
  border-radius: 15px;

  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.grinder__control__system__lang__btn:active {
  background: #3a3a3a;
  transform: translateY(3px) scale(0.97);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.grinder__control__system__lang__btn span {
  font-family: 'DIN OT Medium';
  font-style: normal;
  font-weight: 500;
  font-size: 70px;
  line-height: 90px;

  color: #ffffff;
}

.grinder__control__system__lang__btn:active span {
  transform: translateY(1px);
}

.grinder__control__system__lang__btn:hover {
  background-color: #3a3a3a;
}

.grinder__control__system__title {
  width: 1842px;
  height: 647px;
  left: 254px;
  top: 146px;

  font-family: 'DIN OT Medium';
  font-style: normal;
  font-weight: 500;
  font-size: 200px;
  line-height: 200px;
  /* or 100% */
  text-transform: uppercase;

  color: #ffffff;
}

.grinder__control__system__intro {
  width: 1222px;
  height: 366px;
  left: 254px;
  top: 617px;

  font-family: 'DIN OT Light';
  font-style: normal;
  font-weight: 400;
  font-size: 50px;
  line-height: 55px;
  /* or 110% */

  color: #ffffff;
}

.grinder__control__system__bg__overlay {
  width: 2851px;
  height: 2315px;
  left: calc(50% - 2851px / 2 + 594.5px);
  top: calc(50% - 2315px / 2 - 53.5px);

  background: radial-gradient(
    42.93% 42.93% at 50% 50%,
    rgba(0, 0, 0, 0) 0%,
    #000000 100%
  );
}

.grinder__control__system__bg {
  position: absolute;
  width: 2651px;
  height: 2015px;
  left: 1189px;
  top: 19px;
}

/* === Features === */
.grinder__control__system__feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;

  width: 102px;
  height: 102px;
}

.grinder__control__system__feature__icon__circle {
  position: absolute;
  inset: 0;
  background: #f3c32d;
  border: 1px solid #f3c32d;
  border-radius: 50%;
}

.grinder__control__system__feature__label {
  height: 55px;

  font-family: 'DIN OT Light';
  font-weight: 400;
  font-size: 50px;
  line-height: 55px;
  color: #fff;
}

/* === Feature 0 === */
.grinder__control__system__feature.feature-0
  .grinder__control__system__feature__icon {
  left: 254px;
  top: 853px;
}

.grinder__control__system__feature.feature-0
  .grinder__control__system__feature__label {
  width: 1004px;
  left: 393px;
  top: 876px;
}

/* === Feature 1 === */
.grinder__control__system__feature.feature-1
  .grinder__control__system__feature__icon {
  left: 254px;
  top: 993px;
}

.grinder__control__system__feature.feature-1
  .grinder__control__system__feature__label {
  width: 1004px;
  left: 393px;
  top: 1016px;
}

/* === Feature 2 === */
.grinder__control__system__feature.feature-2
  .grinder__control__system__feature__icon {
  left: 254px;
  top: 1133px;
}

.grinder__control__system__feature.feature-2
  .grinder__control__system__feature__label {
  width: 757px;
  left: 393px;
  top: 1157px;
}

/* === Feature 3 === */
.grinder__control__system__feature.feature-3
  .grinder__control__system__feature__icon {
  left: 254px;
  top: 1241px;
}

.grinder__control__system__feature.feature-3
  .grinder__control__system__feature__label {
  width: 800px;
  left: 422px;
  top: 1264px;
}

.grinder__control__system__technology__title {
  width: 1222px;
  height: 125px;
  left: 254px;
  top: 1318px;

  font-family: 'DIN OT Medium';
  font-style: normal;
  font-weight: 500;
  font-size: 66px;
  line-height: 55px;
  /* or 83% */

  color: #f3c32d;
}

.grinder__control__system__technology__text {
  width: 1222px;
  height: 261px;
  left: 254px;
  top: 1390px;

  font-family: 'DIN OT Regular';
  font-style: normal;
  font-weight: 400;
  font-size: 50px;
  line-height: 55px;
  /* or 110% */

  color: #ffffff;
}

.grinder__control__system__available {
  width: 800px;
  height: 60px;
  left: 254px;
  top: 1731px;

  font-family: 'DIN OT';
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 60px;
  /* identical to box height, or 150% */

  color: #ffffff;
}

.grinder__control__system__compatibility {
  width: 1400px;
  height: 60px;
  left: 254px;
  top: 1781px;

  font-family: 'DIN OT';
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 60px;
  /* identical to box height, or 150% */

  color: #ffffff;
}

.grinder__control__system__machine__icon__light {
  width: 629px;
  height: 380px;
  left: 2944px;
  top: 1466px;
}

.grinder__control__system__grinder {
  width: 288px;
  height: 432px;
  left: 3522px;
  top: 1433px;
}

/* Shared highlight styles */
.grinder__control__system__highlight__machine,
.grinder__control__system__highlight__grinder {
  box-sizing: border-box;

  background: linear-gradient(
      0deg,
      rgba(243, 195, 45, 0.1),
      rgba(243, 195, 45, 0.1)
    ),
    linear-gradient(0deg, rgba(243, 195, 45, 0.1), rgba(243, 195, 45, 0.1)),
    rgba(243, 195, 45, 0.1);

  border: 4px dashed #ffffff;
  border-radius: 20px;
}

.grinder__control__system__highlight__machine {
  width: 74px;
  height: 71px;
  left: 3382px;
  top: 1600px;
}

.grinder__control__system__highlight__grinder {
  width: 74px;
  height: 71px;
  left: 3629px;
  top: 1580px;
}

.grinder__control__system__machine__icon__light__circles {
  width: 119px;
  height: 119px;
  left: 3681px;
  top: 1570px;
}

.grinder__control__system__machine__icon__light__circle__inner {
  left: 32.31%;
  right: 33.08%;
  top: 32.31%;
  bottom: 33.08%;

  border-radius: 50%;
  background: #f3c32d;
}

.grinder__control__system__machine__icon__light__circle__outer {
  box-sizing: border-box;

  left: 7.69%;
  right: 7.69%;
  top: 7.69%;
  bottom: 7.69%;

  border-radius: 50%;
  border: 1px solid #f3c32d;
  box-shadow: 0px 0px 10px 1px #f3c32d;
}

.grinder__control__system__machine__icon__light__circle__outer2 {
  box-sizing: border-box;

  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;

  border-radius: 50%;
  border: 1px solid #f3c32d;
  box-shadow: 0px 0px 10px 1px #f3c32d;
}

/* === Connection between machine and grinder === */
.grinder__control__system__connection {
  width: 135px;
  height: 4px;
  left: 3473px;
  top: 1632px;
  background-image: repeating-linear-gradient(
    to right,
    #ffffff 0 10px,
    transparent 12px 24px
  );
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 2px;
}

.grinder__control__system__chevron__left,
.grinder__control__system__chevron__right {
  width: 21px;
  height: 42px;
  top: 1613px;
}

.grinder__control__system__chevron__left {
  left: 3470px;
}

.grinder__control__system__chevron__right {
  left: 3588px;
}

.grinder__control__system__footer {
  position: absolute;
  width: 3840px;
  height: 220px;
  top: 1879px;
  left: 0;
}

.grinder__control__system__footer__link {
  position: absolute;
  width: 925px;
  height: 220px;
  border-radius: 15px;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: 'DIN OT Medium';
  font-weight: 500;
  font-size: 66px;
  line-height: 100px;
  text-transform: uppercase;
  color: #fff;
  background: transparent;

  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.grinder__control__system__footer__link:not(.active):active {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.8);
  color: rgba(255, 255, 255, 0.8);
}

.grinder__control__system__footer__link:not(.active):hover {
  color: rgba(255, 255, 255, 0.8);
}

/* === Active button === */
.grinder__control__system__footer__link.active {
  border: none;
  background: #f3c32d;
  color: #000;

  /* Disable clicking */
  pointer-events: none;
  cursor: default;
}

.grinder__control__system__footer__link:nth-child(1) {
  left: calc(50% - 925px / 2 - 1417.5px);
}
.grinder__control__system__footer__link:nth-child(2) {
  left: calc(50% - 925px / 2 - 472.5px);
}
.grinder__control__system__footer__link:nth-child(3) {
  left: calc(50% - 925px / 2 + 472.5px);
}
.grinder__control__system__footer__link:nth-child(4) {
  left: calc(50% - 925px / 2 + 1417.5px);
}

/* === Z-Index Management === */
.container-fluid.position-relative.h-100 {
  position: relative;
  z-index: 0;
}

.grinder__control__system__bg {
  z-index: 0;
}
.grinder__control__system__bg__overlay {
  z-index: 1;
}

.grinder__control__system__home__icon,
.grinder__control__system__lang__btn,
.grinder__control__system__title,
.grinder__control__system__intro,
.grinder__control__system__features,
.grinder__control__system__technology,
.grinder__control__system__technology__text,
.grinder__control__system__available,
.grinder__control__system__compatibility,
.grinder__control__system__machine__icon__light,
.grinder__control__system__grinder,
.grinder__control__system__highlight__machine,
.grinder__control__system__highlight__grinder,
.grinder__control__system__machine__icon__light__circles,
.grinder__control__system__machine__icon__light__circle__inner,
.grinder__control__system__machine__icon__light__circle__outer,
.grinder__control__system__machine__icon__light__circle__outer2,
.grinder__control__system__chevron__left,
.grinder__control__system__chevron__right,
.grinder__control__system__connection,
.grinder__control__system__footer {
  z-index: 2;
}

.grinder__control__system__bg {
  position: absolute;
  z-index: 0;
  width: 2651px;
  height: 2015px;
  left: 1189px;
  top: 19px;
  object-fit: cover;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.grinder__control__system__bg__overlay {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: normal;
  transform: translateZ(0);
}

/* === Responsive styles for screens up to 768px wide === */
@media (max-width: 360px) {

  .grinder__control__system__home__icon {
      width: 35px;
      height: 35px;
      left: 325px;
      top: 4px;
    }
  
    .grinder__control__system__home__circle {
      left: 0%;
      right: 0%;
      top: 0%;
      bottom: 0%;
    }
  
    .grinder__control__system__home__outline {
      left: 10%;
      right: 10%;
      top: 10%;
      bottom: 11%;
    }
  
    .grinder__control__system__home__outline svg {
      width: 25px !important;
      height: 23px !important;
    }
  
    .grinder__control__system__lang__btn {
  
      width: 203px;
      left: calc(50% - 203px / 2 + 525px);
      top: 1.48%;
      bottom: 88.33%;
      display: none;
    }
  
    .grinder__control__system__lang__btn span {
      font-weight: 500;
      font-size: 23px;
      line-height: 30px;
    }
  
    .grinder__control__system__title {
      width: 327px;
      height: 109px;
      left: 13px;
      top: 100px;
  
      font-weight: 300;
      font-size: 30px;
      line-height: 30px;
    }
  
    .grinder__control__system__intro {
      width: 340px;
      height: 61px;
      left: 13px;
      top: 180px;
  
      font-weight: 200;
      font-size: 12px;
      line-height: 14px;
      /* or 110% */
  
    }
  
    .grinder__control__system__bg__overlay {
      width: 360px;
        height: 600px;
        left: 0px;
        top: 100px;    
      }
  
    .grinder__control__system__bg {
      width: 360px;
        height: 600px;
        left: 0px;
        top: 100px;
      }
  
    /* === Features === */
    .grinder__control__system__feature__icon {
  
      width: 15px;
      height: 15px;
    }
  
    .grinder__control__system__feature__label {
      height: 15px;
  
      font-weight: 200;
      font-size: 13px;
      line-height: 15px;
    }
  
    .grinder__control__system__feature__icon__outline svg {
      width: 12px !important;
      height: 12px !important;
    }
  
    /* === Feature 0 === */
    .grinder__control__system__feature.feature-0 .grinder__control__system__feature__icon {
      left: 13px;
      top: 244px;
    }
  
    .grinder__control__system__feature.feature-0 .grinder__control__system__feature__label {
      width: 335px;
      left: 36px;
      top: 244px;
    }
  
    /* === Feature 1 === */
    .grinder__control__system__feature.feature-1 .grinder__control__system__feature__icon {
      left: 13px;
      top: 275px;
    }
  
    .grinder__control__system__feature.feature-1 .grinder__control__system__feature__label {
      width: 335px;
      left: 36px;
      top: 275px;
    }
  
    /* === Feature 2 === */
    .grinder__control__system__feature.feature-2 .grinder__control__system__feature__icon {
      left: 13px;
      top: 305px;
    }
  
    .grinder__control__system__feature.feature-2 .grinder__control__system__feature__label {
      width: 252px;
      left: 36px;
      top: 305px;
    }
  
    /* === Feature 3 === */
    .grinder__control__system__feature.feature-3 .grinder__control__system__feature__icon {
      left: 13px;
      top: 384px;
    }
  
    .grinder__control__system__feature.feature-3 .grinder__control__system__feature__label {
      width: 267px;
      left: 36px;
      top: 382px;
    }
  
    .grinder__control__system__technology__title {
      width: 250px;
      height: 42px;
      left: 13px;
      top: 340px;
      z-index: 1;
  
      font-weight: 200;
      font-size: 15px;
      line-height: 17px;
      /* or 83% */
  
    }
  
    .grinder__control__system__technology__text {
      width: 337px;
      height: 87px;
      left: 13px;
      top: 370px;
  
      font-weight: 200;
      font-size: 12px;
      line-height: 14px;
      /* or 110% */
  
    }
  
    .grinder__control__system__available {
      width: 250px;
      height: 20px;
      left: 13px;
      top: 440px;
  
      font-weight: 200;
      font-size: 11px;
      line-height: 12px;
      /* identical to box height, or 150% */
  
    }
  
    .grinder__control__system__compatibility {
      width: 250px;
      height: 20px;
      left: 13px;
      top: 455px;
  
      font-weight: 200;
      font-size: 11px;
      line-height: 12px;
      /* identical to box height, or 150% */
  
    }
  
    .grinder__control__system__machine__icon__light {
      width: 150px;
      height: 80px;
      left: 90px;
      top: 500px;
    }
  
    .grinder__control__system__grinder {
      width: 55px;
      height: 95px;
      left: 230px;
      top: 495px;
    }
  
    /* Shared highlight styles */
  
    .grinder__control__system__highlight__machine {
      width: 15px;
      height: 15px;
      left: 195px;
      top: 525px;
    }
  
    .grinder__control__system__highlight__grinder {
      width: 15px;
      height: 15px;
      left: 250px;
      top: 525px;
    }
  
    .grinder__control__system__machine__icon__light__circles {
      width: 15px;
      height: 15px;
      left: 260px;
      top: 530px;
    }
  
    .grinder__control__system__machine__icon__light__circle__inner {
      left: 32.31%;
      right: 33.08%;
      top: 32.31%;
      bottom: 33.08%;
  
    }
  
    .grinder__control__system__machine__icon__light__circle__outer {
  
      left: 7.69%;
      right: 7.69%;
      top: 7.69%;
      bottom: 7.69%;
  
    }
  
    .grinder__control__system__machine__icon__light__circle__outer2 {
  
      left: 0%;
      right: 0%;
      top: 0%;
      bottom: 0%;
  
    }
  
    /* === Connection between machine and grinder === */
    .grinder__control__system__connection {
      width: 25px;
      height: 2px;
      left: 220px;
      top: 535px;
      background-image: repeating-linear-gradient(to right,
          #ffffff 0 5px,
          transparent 5px 5px);
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 2px;
    }
  
    .grinder__control__system__chevron__left,
    .grinder__control__system__chevron__right {
      width: 10px;
      height: 20px;
      top: 525px;
    }
  
    .grinder__control__system__chevron__left {
      left: 210px;
    }
  
    .grinder__control__system__chevron__right {
      left: 235px;
    }
  
    .grinder__control__system__footer {
      width: 360px;
      height: 40px;
      top: 610px;
      left: 0;
    }
  
    .grinder__control__system__footer__link {
      width: 173px;
      height: 40px;
      font-weight: 200;
      font-size: 12px;
      line-height: 13px;
    }
      
    .grinder__control__system__footer__link:nth-child(1) {
      left: 5px;
    }
  
    .grinder__control__system__footer__link:nth-child(2) {
      left: 183px;    
    }
  
    .grinder__control__system__footer__link:nth-child(3) {
      left: 5px;
      top: 45px;   
   }
  
    .grinder__control__system__footer__link:nth-child(4) {
      left: 183px;
      top: 45px;
    }
  
    .grinder__control__system__bg {
      width: 340px;
        height: 600px;
        left: 0px;
        top: 100px;
          }
}

/* === Responsive Styles for over 768px === */

@media (min-width: 361px) and (max-width: 768px) {
  /* === DC SYSTEM GRINDER CONTROL SYSTEM PAGE === */

  .grinder__control__system__home__icon {
    width: 35px;
    height: 35px;
    left: 725px;
    top: 4px;
  }

  .grinder__control__system__home__circle {
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
  }

  .grinder__control__system__home__outline {
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 11%;
  }

  .grinder__control__system__home__outline svg {
    width: 25px !important;
    height: 23px !important;
  }

  .grinder__control__system__lang__btn {

    width: 203px;
    left: calc(50% - 203px / 2 + 525px);
    top: 1.48%;
    bottom: 88.33%;
    display: none;
  }

  .grinder__control__system__lang__btn span {
    font-weight: 500;
    font-size: 23px;
    line-height: 30px;
  }

  .grinder__control__system__title {
    width: 327px;
    height: 109px;
    left: 43px;
    top: 100px;

    font-weight: 300;
    font-size: 33px;
    line-height: 33px;
  }

  .grinder__control__system__intro {
    width: 203px;
    height: 61px;
    left: 43px;
    top: 198px;

    font-weight: 200;
    font-size: 15px;
    line-height: 20px;
    /* or 110% */

  }

  .grinder__control__system__bg__overlay {
    width: 768px;
    height: 600px;
    left: calc(50% - 768px / 2 + 190px);
    top: calc(50% - 600px / 2);
  }

  .grinder__control__system__bg {
    width: 884px;
    height: 600px;
    left: 350px;
    top: 14px;
  }

  /* === Features === */
  .grinder__control__system__feature__icon {

    width: 15px;
    height: 15px;
  }

  .grinder__control__system__feature__label {
    height: 15px;

    font-weight: 200;
    font-size: 13px;
    line-height: 15px;
  }

  .grinder__control__system__feature__icon__outline svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* === Feature 0 === */
  .grinder__control__system__feature.feature-0 .grinder__control__system__feature__icon {
    left: 43px;
    top: 344px;
  }

  .grinder__control__system__feature.feature-0 .grinder__control__system__feature__label {
    width: 335px;
    left: 66px;
    top: 344px;
  }

  /* === Feature 1 === */
  .grinder__control__system__feature.feature-1 .grinder__control__system__feature__icon {
    left: 43px;
    top: 375px;
  }

  .grinder__control__system__feature.feature-1 .grinder__control__system__feature__label {
    width: 335px;
    left: 66px;
    top: 375px;
  }

  /* === Feature 2 === */
  .grinder__control__system__feature.feature-2 .grinder__control__system__feature__icon {
    left: 43px;
    top: 405px;
  }

  .grinder__control__system__feature.feature-2 .grinder__control__system__feature__label {
    width: 252px;
    left: 66px;
    top: 405px;
  }

  /* === Feature 3 === */
  .grinder__control__system__feature.feature-3 .grinder__control__system__feature__icon {
    left: 43px;
    top: 484px;
  }

  .grinder__control__system__feature.feature-3 .grinder__control__system__feature__label {
    width: 267px;
    left: 66px;
    top: 492px;
  }

  .grinder__control__system__technology__title {
    width: 147px;
    height: 42px;
    left: 43px;
    top: 480px;

    font-weight: 200;
    font-size: 15px;
    line-height: 17px;
    /* or 83% */

  }

  .grinder__control__system__technology__text {
    width: 357px;
    height: 87px;
    left: 43px;
    top: 530px;

    font-weight: 200;
    font-size: 12px;
    line-height: 14px;
    /* or 110% */

  }

  .grinder__control__system__available {
    width: 267px;
    height: 20px;
    left: 43px;
    top: 615px;

    font-weight: 200;
    font-size: 11px;
    line-height: 12px;
    /* identical to box height, or 150% */

  }

  .grinder__control__system__compatibility {
    width: 467px;
    height: 20px;
    left: 43px;
    top: 625px;

    font-weight: 200;
    font-size: 11px;
    line-height: 12px;
    /* identical to box height, or 150% */

  }

  .grinder__control__system__machine__icon__light {
    width: 220px;
    height: 131px;
    left: 455px;
    top: 519px;
  }

  .grinder__control__system__grinder {
    width: 79px;
    height: 150px;
    left: 660px;
    top: 508px;
  }

  /* Shared highlight styles */

  .grinder__control__system__highlight__machine {
    width: 30px;
    height: 31px;
    left: 605px;
    top: 560px;
  }

  .grinder__control__system__highlight__grinder {
    width: 30px;
    height: 31px;
    left: 685px;
    top: 560px;
  }

  .grinder__control__system__machine__icon__light__circles {
    width: 30px;
    height: 30px;
    left: 700px;
    top: 560px;
  }

  .grinder__control__system__machine__icon__light__circle__inner {
    left: 32.31%;
    right: 33.08%;
    top: 32.31%;
    bottom: 33.08%;

  }

  .grinder__control__system__machine__icon__light__circle__outer {

    left: 7.69%;
    right: 7.69%;
    top: 7.69%;
    bottom: 7.69%;

  }

  .grinder__control__system__machine__icon__light__circle__outer2 {

    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;

  }

  /* === Connection between machine and grinder === */
  .grinder__control__system__connection {
    width: 45px;
    height: 2px;
    left: 630px;
    top: 579px;
    background-image: repeating-linear-gradient(to right,
        #ffffff 0 5px,
        transparent 5px 10px);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 2px;
  }

  .grinder__control__system__chevron__left,
  .grinder__control__system__chevron__right {
    width: 10px;
    height: 20px;
    top: 570px;
  }

  .grinder__control__system__chevron__left {
    left: 630px;
  }

  .grinder__control__system__chevron__right {
    left: 670px;
  }

  .grinder__control__system__footer {
    width: 768px;
    height: 40px;
    top: 650px;
    left: 0;
  }

  .grinder__control__system__footer__link {
    width: 184px;
    height: 40px;
    font-weight: 200;
    font-size: 13px;
    line-height: 15px;
  }

  .grinder__control__system__footer__link:nth-child(1) {
    left: 5px;
  }

  .grinder__control__system__footer__link:nth-child(2) {
    left: 194px;
  }

  .grinder__control__system__footer__link:nth-child(3) {
    left: 383px;
  }

  .grinder__control__system__footer__link:nth-child(4) {
    left: 572px;
  }

  .grinder__control__system__bg {
    width: 768px;
    height: 600px;
    left: 198px;
    top: 4px;
  }

}

/* === Responsive Styles for over 1280px === */

@media (min-width: 769px) and (max-width: 3839px) {
  /* === DC SYSTEM GRINDER CONTROL SYSTEM PAGE === */
  
    .grinder__control__system__home__icon {
      width: 65px;
      height: 65px;
      left: 1207px;      
      top: 8px;
    }
  
    .grinder__control__system__home__circle {
      left: 0%;
      right: 0%;
      top: 0%;
      bottom: 0%;
    }
    
    .grinder__control__system__home__outline {
      left: 10%;
      right: 10%;
      top: 10%;
      bottom: 11%;
    }

    .grinder__control__system__home__outline svg {
        width: 50px !important;
        height: 47px !important;
    }
    
    .grinder__control__system__lang__btn {
  
      width: 203px;
      left: calc(50% - 203px / 2 + 525px);
      top: 1.48%;
      bottom: 88.33%;
      display: none;
    }
    
    .grinder__control__system__lang__btn span {
      font-weight: 500;
      font-size: 23px;
      line-height: 30px;
    }
    
    .grinder__control__system__title {
      width: 614px;
      height: 216px;
      left: 88px;
      top: 120px;
  
      font-weight: 400;
      font-size: 67px;
      line-height: 67px;
      /* or 100% */
    }
  
    .grinder__control__system__intro {
      width: 407px;
      height: 122px;
      left: 88px;
      top: 256px;
  
      font-weight: 300;
      font-size: 18px;
      line-height: 20px;
      /* or 110% */
  
    }
  
    .grinder__control__system__bg__overlay {
      width: 950px;
      height: 772px;
      left: calc(50% - 950px / 2 + 198px);
      top: calc(50% - 772px / 2 - 18px);
  
      background: radial-gradient(42.93% 42.93% at 50% 50%,
          rgba(0, 0, 0, 0) 0%,
          #000000 100%);
    }
  
    .grinder__control__system__bg {
      width: 884px;
      height: 672px;
      left: 396px;
      top: 7px;
    }
  
    /* === Features === */
    .grinder__control__system__feature__icon {
  
      width: 30px;
      height: 30px;
    }
    
    .grinder__control__system__feature__label {
      height: 18px;
  
      font-weight: 300;
      font-size: 17px;
      line-height: 19px;
    }

    .grinder__control__system__feature__icon__outline svg {
        width: 20px !important;
        height: 18px !important;
    }
  
    /* === Feature 0 === */
    .grinder__control__system__feature.feature-0 .grinder__control__system__feature__icon {
      left: 85px;
      top: 354px;
    }
  
    .grinder__control__system__feature.feature-0 .grinder__control__system__feature__label {
      width: 335px;
      left: 131px;
      top: 360px;
    }
  
    /* === Feature 1 === */
    .grinder__control__system__feature.feature-1 .grinder__control__system__feature__icon {
      left: 85px;
      top: 401px;
    }
  
    .grinder__control__system__feature.feature-1 .grinder__control__system__feature__label {
      width: 335px;
      left: 131px;
      top: 407px;
    }
  
    /* === Feature 2 === */
    .grinder__control__system__feature.feature-2 .grinder__control__system__feature__icon {
      left: 85px;
      top: 450px;
    }
  
    .grinder__control__system__feature.feature-2 .grinder__control__system__feature__label {
      width: 252px;
      left: 131px;
      top: 457px;
    }
  
    /* === Feature 3 === */
    .grinder__control__system__feature.feature-3 .grinder__control__system__feature__icon {
      left: 85px;
      top: 484px;
    }
  
    .grinder__control__system__feature.feature-3 .grinder__control__system__feature__label {
      width: 267px;
      left: 141px;
      top: 492px;
    }
  
    .grinder__control__system__technology__title {
      width: 407px;
      height: 42px;
      left: 85px;
      top: 520px;
  
      font-weight: 300;
      font-size: 18px;
      line-height: 20px;
      /* or 83% */
  
    }
  
    .grinder__control__system__technology__text {
      width: 407px;
      height: 87px;
      left: 85px;
      top: 550px;
  
      font-weight: 300;
      font-size: 15px;
      line-height: 16px;
      /* or 110% */
  
    }
  
    .grinder__control__system__available {
      width: 267px;
      height: 20px;
      left: 85px;
      top: 685px;
  
      font-weight: 300;
      font-size: 12px;
      line-height: 14px;
      /* identical to box height, or 150% */
  
    }
  
    .grinder__control__system__compatibility {
      width: 467px;
      height: 20px;
      left: 85px;
      top: 700px;
  
      font-weight: 300;
      font-size: 12px;
      line-height: 14px;
      /* identical to box height, or 150% */
  
    }
  
    .grinder__control__system__machine__icon__light {
      width: 220px;
      height: 131px;
      left: 970px;
      top: 589px;
    }
  
    .grinder__control__system__grinder {
      width: 79px;
      height: 150px;
      left: 1180px;
      top: 578px;
    }
  
    /* Shared highlight styles */
  
    .grinder__control__system__highlight__machine {
      width: 30px;
      height: 31px;
      left: 1120px;
      top: 630px;
    }
  
    .grinder__control__system__highlight__grinder {
      width: 30px;
      height: 31px;
      left: 1205px;
      top: 620px;
    }
  
    .grinder__control__system__machine__icon__light__circles {
      width: 30px;
      height: 30px;
      left: 1230px;
      top: 625px;
    }
  
    .grinder__control__system__machine__icon__light__circle__inner {
      left: 32.31%;
      right: 33.08%;
      top: 32.31%;
      bottom: 33.08%;
  
    }
  
    .grinder__control__system__machine__icon__light__circle__outer {
  
      left: 7.69%;
      right: 7.69%;
      top: 7.69%;
      bottom: 7.69%;
  
    }
  
    .grinder__control__system__machine__icon__light__circle__outer2 {
  
      left: 0%;
      right: 0%;
      top: 0%;
      bottom: 0%;
  
    }
  
    /* === Connection between machine and grinder === */
    .grinder__control__system__connection {
      width: 50px;
      height: 2px;
      left: 1150px;
      top: 644px;
      background-image: repeating-linear-gradient(to right,
          #ffffff 0 5px,
          transparent 5px 10px);
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 2px;
    }
  
    .grinder__control__system__chevron__left,
    .grinder__control__system__chevron__right {
      width: 10px;
      height: 20px;
      top: 635px;
    }
  
    .grinder__control__system__chevron__left {
      left: 1150px;
    }
  
    .grinder__control__system__chevron__right {
      left: 1190px;
    }
  
    .grinder__control__system__footer {
      width: 1280px;
      height: 73px;
      top: 730px;
      left: 0;
    }
  
    .grinder__control__system__footer__link {
      width: 308px;
      height: 73px;
      font-weight: 400;
      font-size: 20px;
      line-height: 30px;    
    }
    
    .grinder__control__system__footer__link:nth-child(1) {
      left: calc(50% - 308px / 2 - 473px);
    }
  
    .grinder__control__system__footer__link:nth-child(2) {
      left: calc(50% - 308px / 2 - 158px);
    }
  
    .grinder__control__system__footer__link:nth-child(3) {
      left: calc(50% - 308px / 2 + 158px);
    }
  
    .grinder__control__system__footer__link:nth-child(4) {
      left: calc(50% - 308px / 2 + 473px);
    }
    
  
    .grinder__control__system__bg {
      width: 884px;
      height: 672px;
      left: 396px;
      top: 7px;
    }
  

}