:root {
  --soft-blue: #f2f9fc;
  --soft-purple: #889dba;
  --dark-blue: #002a54;
  --medium-dark-blue: #3B69A4;
  --bullet-purple: #7D4197;
}

html {
  scroll-padding-top: 70px;
}

body {
  padding-top: 60px;
}

.bread-link {
  text-decoration: none;
  color: black;
}

.bread-link:hover {
  text-decoration: underline;
  color: blue;
}

.footer-link {
  text-decoration: none;
  color: white;
}

.footer-link:hover {
  text-decoration: underline;
  color: white;
}

.text-medium-blue {
  color: var(--medium-dark-blue);
}

.img-product {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: contain;
  border-radius: 8px;
}

.header-home {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 8rem 0rem;
  background-image: url('../image/banner/Epson_Banner_Home_1.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-home-2 {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 3rem 0rem 20rem 0rem;
  background-image: url('../image/banner/Robot_Range_Banner1.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-industrial {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 0rem 0rem;
  background-image: url('../image/banner/Industrial_Banner.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-all-in-one {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 6rem 0rem;
  background-image: url('../image/banner/All-in-One_Banner.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-scara {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 8rem 0rem;
  background-image: url('../image/banner/Scara_Banner.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-scara-award {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 8rem 0rem;
  background-image: url('../image/banner/Award_Winning_Scara.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-6axis {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 6rem 0rem;
  background-image: url('../image/banner/6-Axis_Banner.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-6axis-award {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 0rem 0rem;
  background-image: url('../image/banner/Award_Winning_6-Axis.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.blue-banner {
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url('../image/banner/Blue_Banner.png');
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-rc-software {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 6rem 0rem;
  background-image: url('../image/banner/RC_Software_Banner.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-automotive {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 6rem 0rem;
  background-image: url('../image/banner/Industries_Automotive.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-medical {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 6rem 0rem;
  background-image: url('../image/banner/Industries_Medical.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-semiconductor {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 6rem 0rem;
  background-image: url('../image/banner/Industries_Semiconductor.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-consumer {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 6rem 0rem;
  background-image: url('../image/banner/Industries_Consumer.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-industry {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 6rem 0rem;
  background-image: url('../image/banner/Industries_Industrial.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-food {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 6rem 0rem;
  background-image: url('../image/banner/Industries_Food.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-lab {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 6rem 0rem;
  background-image: url('../image/banner/Industries_Lab.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-solar {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 6rem 0rem;
  background-image: url('../image/banner/Industries_Solar.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-packaging {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 0rem 6rem 0rem;
  background-image: url('../image/banner/Industries_Packaging.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-contact {
  inset: 0;
  width: 100%;
  height: 100%;
  /* padding: 5rem 0rem 6rem 0rem; */
  background-color: var(--soft-blue);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.card-hover {
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.31);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-around;
}

.card-hover:hover {
  transform: translate(0, -3%);
}

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

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

.bg-purple-soft {
  background-color: var(--soft-purple);
}

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

.bg-light-purple th {
  color: whitesmoke;
  background-color: var(--bullet-purple);
}

.square-bullet li {
  list-style: none;
  margin-left: -30px;
  position: relative;
  padding-left: 40px;
  color: black;
}

.square-bullet li::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: var(--bullet-purple);
  position: absolute;
  left: 0;
  top: 6px;
}

.blue-hr {
  border: none;
  height: 3px;
  background-color: var(--medium-dark-blue);
  opacity: 1;
}

@media all and (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    display: none;
  }

  .navbar .nav-item:hover .dropdown-menu {
    display: block;
  }

  .navbar .nav-item .dropdown-menu {
    margin-top: 0;
  }
}

@media screen and (max-width:540px) {

  .header-home {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 10rem 0rem;
    background-image: url('../image/banner/Epson_Banner_Home_1.png');
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-home-2 {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 2rem 0rem 20rem 0rem;
    background-image: url('../image/banner/Robot_Range_Banner1.png');
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-industrial {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 0rem 0rem;
    background-image: url('../image/banner/Industrial_Banner.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-all-in-one {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 15rem 0rem;
    background-image: url('../image/banner/All-in-One_Banner.png');
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-scara {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 0rem 0rem;
    background-image: url('../image/banner/Scara_Banner.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-scara-award {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 0rem 0rem;
    background-image: url('../image/banner/Award_Winning_Scara.png');
    background-position: calc(50% - 290px);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-6axis-award {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 0rem 0rem;
    background-image: url('../image/banner/Award_Winning_6-Axis.png');
    background-position: calc(50% - 360px);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-rc-software {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 6rem 0rem;
    background-image: url('../image/banner/RC_Software_Banner.png');
    background-position: calc(6% - 360px);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-automotive {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 6rem 0rem;
    background-image: url('../image/banner/Industries_Automotive.png');
    background-position: calc(30% - 360px);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-medical {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 6rem 0rem;
    background-image: url('../image/banner/Industries_Medical.png');
    background-position: calc(30% - 360px);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-semiconductor {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 6rem 0rem;
    background-image: url('../image/banner/Industries_Semiconductor.png');
    background-position: calc(30% - 360px);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-consumer {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 6rem 0rem;
    background-image: url('../image/banner/Industries_Consumer.png');
    background-position: calc(3% - 360px);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-industry {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 6rem 0rem;
    background-image: url('../image/banner/Industries_Industrial.png');
    background-position: calc(30% - 360px);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-food {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 6rem 0rem;
    background-image: url('../image/banner/Industries_Food.png');
    background-position: calc(-20% - 360px);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-lab {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 6rem 0rem;
    background-image: url('../image/banner/Industries_Lab.png');
    background-position: calc(15% - 360px);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-solar {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 6rem 0rem;
    background-image: url('../image/banner/Industries_Solar.png');
    background-position: calc(-10% - 360px);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header-packaging {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0rem 6rem 0rem;
    background-image: url('../image/banner/Industries_Packaging.png');
    background-position: calc(20% - 360px);
    background-repeat: no-repeat;
    background-size: cover;
  }

}