* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

/* hobmer */
.hob {
  width: 100%;
  height: 6vh;
  background-color: black;
}

.hobrap {
  width: 80%;
  margin: auto;
}

.head {
  position: absolute;
}

.head h2 {
  font-size: 28px;
  color: white;
  padding-left: 5px;
}

.menu {
  float: right;
  margin: 6px;
}

.menu ul li {
  display: inline;
}

.menu ul li a {
  text-decoration: none;
  font-size: 18px;
  padding: 5px;
  color: white;
}

.ban {
  width: 100%;
  height: 120vh;
  background-image: url(./ban.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.banrap {
  width: 100%;
  height: 120vh;
  background-color: rgb(0, 0, 0, 0.5);
}

/* navigation bar */
.logo {
  position: absolute;
  padding: 5px;
}

.nav {
  width: 100%;
  height: 11vh;
  background-color: rgb(0, 0, 0, 0.6);
  top: 0px;
  position: sticky;
}

.navrap {
  width: 75%;
  margin: auto;
}

.heading {

  position: absolute;
  padding-top: 10px;
  margin: auto;
  font-size: 45px;
  -webkit-animation: colorchange 10s infinite;

}

@-webkit-keyframes colorchange {
  0% {

    color: cyan;
  }

  10% {

    color: yellow;
  }

  20% {

    color: orangered;
  }

  30% {

    color: pink;
  }

  40% {

    color: greenyellow;
  }

  50% {

    color: white;
  }

  60% {

    color: magenta;
  }

  70% {

    color: lightsalmon;
  }

  80% {

    color: red;
  }

  90% {

    color: lawngreen;
  }

  100% {

    color: mediumvioletred;
  }
}

.name ul {
  text-align: right;
  padding-top: 25px;
}

.name ul li {
  display: inline;
}

.name ul li a {
  text-decoration: none;
  padding: 7px;
  text-transform: uppercase;
  font-size: 18px;
  color: aliceblue;
}

.name ul li a:hover {
  color: yellow;
  background-color: rgb(0, 0, 0, 0.2);
  border-radius: 7px;
  border-top-width: 5px;
}

.navrap1 {
  width: 75%;
  padding-top: 260px;
  padding-left: 330px;
  padding-bottom: 250px;
}

.banner {
  text-align: center;
  color: white;
  font-size: 70px;
  position: relative;
  transition: .3s;
  border: 2px solid white;
  ;
}

.banner:hover {
  -webkit-text-stroke: 2px white;
  color: transparent;
}
.pro{
  height: 185vh;
  width: 100%;
  background-image: url(./bg1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.prorap{
  margin: auto;
}
.product h1{
  text-align: center;
  font-size: 50px;
}
.product h2{
  font-size: 35px;
  background-color: rgb(202, 126, 202);
  padding-left: 20px;
}
.product h3{
  float: right;
  padding-right: 10px;
}
.scroll-container {
  overflow: auto;
  white-space: nowrap;
  padding:5px;
  scrollbar-color: rgb(165, 230, 230) white;
}

.scroll-container img {
  border: 2px solid black;
}
/* footer */
.foot{
  width: 100%;
  height: 45vh;
  background: black;
}
.footrap{
  width: 75%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 40px;
}
.footer h3{
  font-size: 35px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
}
.footer ul li{
  list-style: none;
}
.footer ul li a{
  text-decoration: none;
  font-size: 20px;
  color: wheat;
}
.footer p{
  font-size: 20px;
  color: wheat;
}