@font-face {
  font-family: 'Product Sans';
  src: url(fonts/ProductSansRegular.ttf);
}

@font-face {
  font-family: 'Product Sans B';
  src: url(fonts/ProductSansBold.ttf);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Product Sans';
}

html,
body {
  height: 100%;
  width: 100%;
}

body::-webkit-scrollbar {
  display: none;
}

#main {
  width: 100%;
  height: 200vh;
  background-color: orangered;
}

nav {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 10vh;
  padding: 0vw 10vw;
  z-index: 99;
}

nav a,
i {
  font-size: 1vw;
  text-decoration: none;
  color: #fff;
}

.center-nav {
  display: flex;
  gap: 3vw;
}

nav i {
  font-size: 1.5vw;
}

.one {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: linear-gradient(150deg, rgb(255, 166, 0), rgb(255, 166, 0), rgb(255, 94, 0))
}

.one h1 {
  font-size: 25vw;
  font-family: 'Product Sans';
  color: #fff;
}

#fanta {
  position: absolute;
  width: 40%;
  z-index: 4;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#orange-cut {
  position: absolute;
  width: 20%;
  transform: scale(1.25);
  z-index: 3;
  top: 55%;
  right: 30%;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#leaf {
  top: 10%;
  left: 0%;
  transform: rotate(60deg);
  position: absolute;
  width: 18%;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#leaf2 {
  top: 70%;
  left: 80%;
  transform: rotate(-90deg);
  position: absolute;
  width: 12%;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#leaf3 {
  position: absolute;
  width: 20%;
  top: 10%;
  right: 0%;
}

.two {
  display: flex;
  width: 100%;
  height: 100vh;
  background: #4d231c;
}

.left-two,
.right-two {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 5vh;
  width: 50%;
  height: 100%;
}

.left-two svg {
  margin-top: 50vh;
  width: 90%;
  transform: rotateX(50deg);
}

.right-two h1 {
  color: #fff;
  font-size: 5vw;
}

.right-two p {
  font-size: 1vw;
  color: #fff;
  width: 80%;
}

.three {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5vw;
  width: 100%;
  height: 100vh;
  background: linear-gradient(150deg, rgb(255, 166, 0), rgb(255, 94, 0));
}

.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2vh;
  width: 25vw;
  height: 70vh;
  margin-top: 10vh;
  border-radius: 20px;
  background-color: #fff;
}

.card h1 {
  margin-top: 40vh;
  font-size: 3vw;
}

.card button {
  font-size: 1vw;
  border-radius: 50px;
  border: none;
  color: #fff;
  background-color: rgb(255, 149, 0);
  padding: 1vw 2vw;
}

#cocacola {
  top: -15%;
  position: absolute;
  width: 57%;
  left: 50%;
  right: 50%;
  transform: translate(-50%, 0%);
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#pepsi {
  top: -20%;
  position: absolute;
  width: 85%;
  left: 50%;
  right: 50%;
  transform: translate(-50%, 0%);
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

.lemon {
  top: -30%;
  position: absolute;
  left: -1%;
  right: 50%;
  width: 25vw;
  transform: scale(1.1);
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#orange {
  transform: scale(1.2);
}