/* === DC SYSTEM STEAM MASTER PAGE === */

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

.steam__master__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;
}

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

.steam__master__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;
}

.steam__master__home__circle:active + .steam__master__home__outline {
  transform: translateY(1px);
}

.steam__master__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;
}

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

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

  color: #ffffff;
}

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

.steam__master__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;
}

.steam__master__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;
}

.steam__master__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%
  );
}

.steam__master__bg {
  position: absolute;
  width: 2651px;
  height: 2015px;
  left: 1189px;
  top: 19px;
  will-change: auto;
  transform: none !important;
  backface-visibility: visible;
  contain: paint; /* Prevent promotion */
}

/* === FEATURES === */
.steam__master__feature__title {
  font-family: 'DIN OT Medium';
  font-style: normal;
  font-weight: 500;
  font-size: 66px;
  line-height: 55px;
  text-transform: uppercase;
  color: #f3c32d;
}
/* MONTATURA AUTOMATICA Cappuccino, flat white, latte caldo */

.steam__master__feature__desc {
  font-family: 'DIN OT Regular';
  font-style: normal;
  font-weight: 400;
  font-size: 50px;
  line-height: 55px;
  color: #ffffff;
}

/* === Feature 0 === */
.steam__master__feature.feature-0 .steam__master__feature__title {
  width: 1222px;
  height: 161px;
  left: 254px;
  top: 966px;
}
.steam__master__feature.feature-0 .steam__master__feature__desc {
  width: 1222px;
  left: 254px;
  top: 1036px;
}

/* === Feature 1 === */
.steam__master__feature.feature-1 .steam__master__feature__title {
  width: 1222px;
  height: 161px;
  left: 254px;
  top: 1145px;
}
.steam__master__feature.feature-1 .steam__master__feature__desc {
  width: 1222px;
  left: 254px;
  top: 1215px;
}

/* === Feature 2 === */
.steam__master__feature.feature-2 .steam__master__feature__title {
  width: 1222px;
  height: 161px;
  left: 254px;
  top: 1324px;
}

.steam__master__feature.feature-2 .steam__master__feature__desc {
  width: 1350px;
  left: 254px;
  top: 1394px;
}

/* === Feature 3 === */
.steam__master__feature.feature-3 .steam__master__feature__title {
  width: 1341px;
  height: 161px;
  left: 254px;
  top: 1503px;
}
.steam__master__feature.feature-3 .steam__master__feature__desc {
  width: 1222px;
  left: 254px;
  top: 1573px;
}

.steam__master__available {
  position: absolute;
  width: 380px;
  height: 60px;
  left: 254px;
  top: 1781px;

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

  color: #ffffff;
}

.steam__master__machine__icon__light {
  width: 629px;
  height: 380px;
  left: 3162px;
  top: 1466px;
}

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

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

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

.steam__master__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;
}

.steam__master__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;
}

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

.steam__master__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.4s 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);
}

/* Inactive buttons - touch feedback */
.steam__master__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);
}

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

/* === Active button === */
.steam__master__footer__link.active {
  border: 1px solid #f3c32d;
  background: #f3c32d;
  color: #000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

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

.steam__master__footer__link:nth-child(1) {
  left: calc(50% - 925px / 2 - 1417.5px);
}
.steam__master__footer__link:nth-child(2) {
  left: calc(50% - 925px / 2 - 472.5px);
}
.steam__master__footer__link:nth-child(3) {
  left: calc(50% - 925px / 2 + 472.5px);
}
.steam__master__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;
}

.steam__master__bg {
  z-index: 0;
}
.steam__master__bg__overlay {
  z-index: 1;
}

.steam__master__home__icon,
.steam__master__lang__btn,
.steam__master__title,
.steam__master__intro,
.steam__master__features,
.steam__master__available,
.steam__master__machine__icon__light,
.steam__master__machine__icon__light__circles,
.steam__master__machine__icon__light__circle__inner,
.steam__master__machine__icon__light__circle__outer,
.steam__master__machine__icon__light__circle__outer2,
.steam__master__footer {
  z-index: 2;
}

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

  .steam__master__home__icon {
      width: 35px;
      height: 35px;
      left: 325px;
      top: 4px;
    }
  
    .steam__master__home__outline {
      left: 11%;
      right: 10%;
      top: 10%;
      bottom: 11%;
    }
  
    .steam__master__home__outline svg {
      width: 25px !important;
      height: 23px !important;
    }
  
    .steam__master__lang__btn {
      width: 203px;
      left: calc(50% - 203px / 2 + 525px);
      top: 1.48%;
      bottom: 88.33%;
      display: none;
    }
  
    .steam__master__lang__btn span {
      font-weight: 500;
      font-size: 23px;
      line-height: 30px;
    }
  
  
    .steam__master__title {
      width: 307px;
      height: 109px;
      left: 23px;
      top: 100px;
  
      font-weight: 300;
      font-size: 33px;
      line-height: 33px;
    }
  
    .steam__master__intro {
      width: 330px;
        height: 61px;
        left: 23px;
        top: 180px;
      
        font-weight: 200;
        font-size: 15px;
        line-height: 20px;
      /* or 110% */
  
    }
  
    .steam__master__bg__overlay {
      width: 360px;
        height: 600px;
        left: 0px;
        top: 100px;
  
    }
  
    .steam__master__bg {
      width: 360px;
        height: 600px;
        left: 0px;
        top: 100px;
    }
  
    /* === FEATURES === */
    .steam__master__feature__title {
      font-weight: 300;
      font-size: 15px;
      line-height: 17px;
    }
  
    /* MONTATURA AUTOMATICA Cappuccino, flat white, latte caldo */
  
    .steam__master__feature__desc {
      font-weight: 200;
      font-size: 15px;
      line-height: 17px;
    }
  
    /* === Feature 0 === */
    .steam__master__feature.feature-0 .steam__master__feature__title {
      width: 300px;
      height: 34px;
      left: 13px;
      top: 300px;
    }
  
    .steam__master__feature.feature-0 .steam__master__feature__desc {
      width: 300px;
      left: 13px;
      top: 325px;
    }
  
    /* === Feature 1 === */
    .steam__master__feature.feature-1 .steam__master__feature__title {
      width: 300px;
      height: 34px;
      left: 13px;
      top: 350px;
    }
  
    .steam__master__feature.feature-1 .steam__master__feature__desc {
      width: 300px;
      left: 13px;
      top: 375px;
    }
  
    /* === Feature 2 === */
    .steam__master__feature.feature-2 .steam__master__feature__title {
      width: 300px;
      height: 34px;
      left: 13px;
      top: 420px;
    }
  
    .steam__master__feature.feature-2 .steam__master__feature__desc {
      width: 300px;
      left: 13px;
      top: 445px;
    }
  
    /* === Feature 3 === */
    .steam__master__feature.feature-3 .steam__master__feature__title {
      width: 300px;
      height: 34px;
      left: 13px;
      top: 470px;
    }
  
    .steam__master__feature.feature-3 .steam__master__feature__desc {
      width: 300px;
      left: 13px;
      top: 495px;
    }
  
    .steam__master__available {
      width: 140px;
      height: 20px;
      left: 23px;
      top: 590px;
  
      font-weight: 200;
      font-size: 11px;
      line-height: 12px;
      /* identical to box height, or 150% */
  
    }
  
    .steam__master__machine__icon__light {
      width: 105px;
      height: 63px;
      left: 250px;
      top: 550px;
    }
  
    .steam__master__machine__icon__light__circles {
      width: 10px;
      height: 10px;
      left: 345px;
      top: 570px;
    }
  
    .steam__master__machine__icon__light__circle__inner {
      left: 32.31%;
      right: 33.08%;
      top: 32.31%;
      bottom: 33.08%;
    }
  
    .steam__master__machine__icon__light__circle__outer {
  
      left: 7.69%;
      right: 7.69%;
      top: 7.69%;
      bottom: 7.69%;
    }
  
    .steam__master__footer {
      width: 360px;
        height: 40px;
        top: 610px;
        left: 0;
    }
  
    .steam__master__footer__link {
      width: 173px;
        height: 40px;
        font-weight: 200;
        font-size: 12px;
        line-height: 13px;
    }
  
    .steam__master__footer__link:nth-child(1) {
      left: 5px;
    }
  
    .steam__master__footer__link:nth-child(2) {
      left: 183px;
    }
  
    .steam__master__footer__link:nth-child(3) {
      left: 5px;
        top: 45px;
    }
  
    .steam__master__footer__link:nth-child(4) {
      left: 183px;
        top: 45px;
    }
  
    .steam__master__bg {
      width: 340px;
        height: 600px;
        left: 0px;
        top: 100px;
    }
}

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

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

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

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

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

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

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


  .steam__master__title {
    width: 307px;
    height: 109px;
    left: 43px;
    top: 100px;

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

  .steam__master__intro {
    width: 203px;
    height: 61px;
    left: 43px;
    top: 188px;

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

  }

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

  }

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

  /* === FEATURES === */
  .steam__master__feature__title {
    font-weight: 300;
    font-size: 15px;
    line-height: 17px;
  }

  /* MONTATURA AUTOMATICA Cappuccino, flat white, latte caldo */

  .steam__master__feature__desc {
    font-weight: 200;
    font-size: 15px;
    line-height: 17px;
  }

  /* === Feature 0 === */
  .steam__master__feature.feature-0 .steam__master__feature__title {
    width: 407px;
    height: 34px;
    left: 43px;
    top: 350px;
  }

  .steam__master__feature.feature-0 .steam__master__feature__desc {
    width: 407px;
    left: 43px;
    top: 375px;
  }

  /* === Feature 1 === */
  .steam__master__feature.feature-1 .steam__master__feature__title {
    width: 407px;
    height: 34px;
    left: 43px;
    top: 400px;
  }

  .steam__master__feature.feature-1 .steam__master__feature__desc {
    width: 457px;
    left: 43px;
    top: 425px;
  }

  /* === Feature 2 === */
  .steam__master__feature.feature-2 .steam__master__feature__title {
    width: 407px;
    height: 34px;
    left: 43px;
    top: 450px;
  }

  .steam__master__feature.feature-2 .steam__master__feature__desc {
    width: 450px;
    left: 43px;
    top: 475px;
  }

  /* === Feature 3 === */
  .steam__master__feature.feature-3 .steam__master__feature__title {
    width: 447px;
    height: 34px;
    left: 43px;
    top: 500px;
  }

  .steam__master__feature.feature-3 .steam__master__feature__desc {
    width: 407px;
    left: 43px;
    top: 525px;
  }

  .steam__master__available {
    width: 140px;
    height: 20px;
    left: 43px;
    top: 620px;

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

  }

  .steam__master__machine__icon__light {
    width: 210px;
    height: 127px;
    left: 550px;
    top: 500px;
  }

  .steam__master__machine__icon__light__circles {
    width: 20px;
    height: 20px;
    left: 735px;
    top: 540px;
  }

  .steam__master__machine__icon__light__circle__inner {
    left: 32.31%;
    right: 33.08%;
    top: 32.31%;
    bottom: 33.08%;
  }

  .steam__master__machine__icon__light__circle__outer {

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

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

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

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

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

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

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

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

}

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

@media (min-width: 769px) and (max-width: 3839px) {
/* === DC SYSTEM STEAM MASTER PAGE === */

  .steam__master__home__icon {
      width: 65px;
      height: 65px;
      left: 1207px;
      top: 8px;  
  }

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

    .steam__master__home__outline svg {
      width: 50px !important;
      height: 47px !important;
    }

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

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


  .steam__master__title {
    width: 614px;
    height: 216px;
    left: 85px;
    top: 120px;

    font-weight: 400;
    font-size: 67px;
    line-height: 67px;
    /* or 100% */
  }

  .steam__master__intro {
    width: 407px;
    height: 122px;
    left: 85px;
    top: 266px;

    font-weight: 300;
    font-size: 18px;
    line-height: 22px;
    /* or 110% */

  }

  .steam__master__bg__overlay {
    width: 950px;
    height: 772px;
    left: calc(50% - 950px / 2 + 178px);
    top: calc(50% - 772px / 2 - 18px);

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

  .steam__master__bg {
    width: 884px;
    height: 672px;
    left: 396px;
    top: 7px;
  }

  /* === FEATURES === */
  .steam__master__feature__title {
    font-weight: 400;
    font-size: 22px;
    line-height: 20px;
  }

  /* MONTATURA AUTOMATICA Cappuccino, flat white, latte caldo */

  .steam__master__feature__desc {
    font-weight: 300;
    font-size: 20px;
    line-height: 25px;
  }

  /* === Feature 0 === */
  .steam__master__feature.feature-0 .steam__master__feature__title {
    width: 407px;
    height: 54px;
    left: 85px;
    top: 402px;
  }

  .steam__master__feature.feature-0 .steam__master__feature__desc {
    width: 407px;
    left: 85px;
    top: 425px;
  }

  /* === Feature 1 === */
  .steam__master__feature.feature-1 .steam__master__feature__title {
    width: 407px;
    height: 54px;
    left: 85px;
    top: 462px;
  }

  .steam__master__feature.feature-1 .steam__master__feature__desc {
    width: 457px;
    left: 85px;
    top: 485px;
  }

  /* === Feature 2 === */
  .steam__master__feature.feature-2 .steam__master__feature__title {
    width: 407px;
    height: 54px;
    left: 85px;
    top: 521px;
  }

  .steam__master__feature.feature-2 .steam__master__feature__desc {
    width: 450px;
    left: 85px;
    top: 544px;
  }

  /* === Feature 3 === */
  .steam__master__feature.feature-3 .steam__master__feature__title {
    width: 447px;
    height: 54px;
    left: 85px;
    top: 581px;
  }

  .steam__master__feature.feature-3 .steam__master__feature__desc {
    width: 407px;
    left: 85px;
    top: 607px;
  }

  .steam__master__available {
    width: 140px;
    height: 20px;
    left: 85px;
    top: 695px;

    font-weight: 300;
    font-size: 15px;
    line-height: 20px;
    /* identical to box height, or 150% */

  }

  .steam__master__machine__icon__light {
    width: 210px;
    height: 127px;
    left: 1054px;
    top: 589px;
  }

  .steam__master__machine__icon__light__circles {
    width: 40px;
    height: 40px;
    left: 1227px;
    top: 623px;
  }

  .steam__master__machine__icon__light__circle__inner {
    left: 32.31%;
    right: 33.08%;
    top: 32.31%;
    bottom: 33.08%;
  }

  .steam__master__machine__icon__light__circle__outer {

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

  .steam__master__footer {
    width: 1280px;
    height: 73px;
    top: 730px;  
  }

  .steam__master__footer__link {
    width: 308px;
      height: 73px;
      font-weight: 400;
      font-size: 20px;
      line-height: 30px;  
  }


  .steam__master__footer__link:nth-child(1) {
    left: calc(50% - 308px / 2 - 473px);
  }

  .steam__master__footer__link:nth-child(2) {
    left: calc(50% - 308px / 2 - 158px);
  }

  .steam__master__footer__link:nth-child(3) {
    left: calc(50% - 308px / 2 + 158px);
  }

  .steam__master__footer__link:nth-child(4) {
    left: calc(50% - 308px / 2 + 473px);
  }

}