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

body,
html
{
  height: 100%;
  width: 100%;
  font-family: Helvetica, sans-serif;
  overflow-x: hidden;
}
* button:hover 
{
  cursor: pointer;
}
body::-webkit-scrollbar{
  display: block;
  width: 8px;
   background-color:#034f36;
}
body::-webkit-scrollbar-thumb
{
  border-radius: 50px;
    background: #95c11e;
}
#cursor
{
  position: fixed;
  width: 20px;
  height:20px;
  background-color:#15d18c;
  border-radius: 50%;
  z-index: 10;
  transition: all linear 0.1s;
}
#main {
  height: 100%;
  width: 100%;
}

#main #nav {
  width: 100%;
  height: 15%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid hsla(0, 0%, 50%, 0.315);
}

#main #nav #nleft img {
  height: 70px;
}

#main #nav #nleft img:hover {
  cursor: pointer;
}

#nav #nleft {
  width: 50%;
  height: 100%;
  /* background-color: blue; */
  display: flex;
  align-items: center;
  gap: 40px;
}

#nav #nleft a {
  text-decoration: none;
  color: black;
}

#nav #nleft a:hover {
  color: #006241;
  cursor: pointer;
}

#main #nav #nav-right {
  width: 50%;
  height: 100%;
  /* background-color: rgb(65, 220, 9); */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 3vw;
  padding-right: 5vw;
  gap: 20px;
  transition: all ease-in-out 0.1s;
}

#icon {
  display: flex;
  gap: 20px;
}

#nav-right button {
  font-size: 13px;
  border: 1px solid black;
  border-radius: 100px;
  padding: 6px 20px;
}

#butn1 {
  background-color: white;
  margin-left: 3vw;
}

#butn2 {
  background-color: black;
  color: white;
}

#icon:hover {
  color: #006241;
  cursor: pointer;
}

#butn1:hover {
  background-color: hsla(0, 0%, 50%, 0.279);
  cursor: pointer;
}

#butn2:hover {
  background-color: rgba(0, 0, 0, 0.505);
  cursor: pointer;
}

#page1 {
  padding: 3vw 0px;
  width: 100%;
  height: 110vh;
  /* background-color: red; */
  display: flex;
  gap: 2%;
  position: relative;
}

#pg1-left {
  width: 49%;
  height: 100%;
  background-color: #006241;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2vw;
  position: absolute;
}

#pg1-left img {
  object-fit: cover;
  width: 100%;
}

#pg1-left h3 {
  padding: 3vw 5vw;
}

#pg1-left p {
  padding-bottom: 2vw;
  text-align: center;
  width: 60%;
  line-height: 30px;
  letter-spacing: 1px;
  font-size: 900;
}

#pg1-left button {
  padding: 7px 20px;
  border-radius: 100px;
  background-color: transparent;
  color: white;
  border: 1px solid white;
}
#pg1-left button:hover {
  background-color: #034f36;
}
#pg1-right {
  width: 50%;
  height: 100%;
  background-color: #006241;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2vw;
  position: absolute;
  left: 51%;
}

#pg1-right img {
  object-fit: cover;
  width: 100%;
}

#pg1-right h3 {
  padding: 3vw 5vw;
  font-size: 900;
}

#pg1-right p {
  padding-bottom: 2vw;
  text-align: center;
  width: 60%;
  line-height: 30px;
  letter-spacing: 1px;
  font-size: 900;
}

#pg1-right button {
  padding: 7px 20px;
  border-radius: 100px;
  background-color: transparent;
  color: white;
  border: 1px solid white;
}

#pg1-right button:hover {
  background-color: #034f36;
}

#page2 {
  padding: 5vw 0px;
  width: 100%;
  height: 90vh;
  display: flex;
  position: relative;
  padding-bottom: 5vw;
}

#pg2-left {
  width: 50%;
  height: 100%;
  background-color: #006241;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2vw;
  position: absolute;
  background-image: url("https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-99412.jpg");
  background-position: center;
  background-size: cover;
  object-fit: cover;
}

#pg2-left h3 {
  padding: 3vw 5vw;
}

#pg2-left p {
  padding-bottom: 2vw;
  text-align: center;
  width: 60%;
  line-height: 30px;
  letter-spacing: 1px;
  font-size: 900;
}

#pg2-left button {
  padding: 7px 20px;
  border-radius: 100px;
  background-color: transparent;
  color: white;
  border: 1px solid white;
}

#pg2-right {
  width: 50%;
  height: 100%;
  background-color: #32462f;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2vw;
  position: absolute;
  left: 50%;
  padding: 5vw 2vw 2vw 2vw;
  text-align: center;
}

#pg2-right h3 {
  padding: 3vw 5vw;
  font-size: 900;
  font-size: 50px;
}

#pg2-right p {
  font-size: 20px;
  padding-bottom: 2vw;
  text-align: center;
  width: 80%;
  line-height: 40px;
  letter-spacing: 1px;
  font-size: 900;
}

#pg2-right button {
  padding: 7px 20px;
  border-radius: 100px;
  background-color: transparent;
  color: white;
  border: 1px solid white;
}

#pg2-right button:hover {
  background-color: #034f36;
}
#page3 {
  padding-top: 8vw;
  width: 100%;
  height: 80vh;
  display: flex;
  position: relative;
}

#page3 #pg3-left {
  width: 50%;
  height: 100%;
  background-color: #f7f0e4;
  color: #00754a;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2vw;
  position: absolute;
  padding: 5vw 2vw 2vw 2vw;
  text-align: center;
}

#pg3-left h3 {
  padding: 1vw 5vw;
  font-size: 900;
  font-size: 30px;
}

#pg3-left p {
  font-size: 20px;
  padding-bottom: 2vw;
  text-align: center;
  width: 85%;
  line-height: 40px;
  letter-spacing: 1px;
  font-size: 900;
  color: #00754a;
}

#pg3-left button {
  padding: 7px 20px;
  border-radius: 100px;
  background-color: transparent;
  color: #00754a;
  border: 1px solid #00754a;
}
#pg3-left button:hover {
  background-color: #d3ccc066;
}
#pg3-right {
  width: 50%;
  height: 100%;
  background-image: url("https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-99508.jpg");
  background-position: center;
  background-size: cover;
  object-fit: cover;
  background-color: red;
  position: absolute;
  left: 50%;
}

#page4 {
  padding-top: 11vw;
  width: 100%;
  height: 90vh;
  display: flex;
  position: relative;
  padding-bottom: 5vw;
}

#pg4-left {
  width: 50%;
  height: 100%;
  background-color: #006241;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2vw;
  position: absolute;
  background-image: url("https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-98053.jpg");
  background-position: center;
  background-size: cover;
  object-fit: cover;
}

#pg4-left h3 {
  padding: 3vw 5vw;
}

#pg4-left p {
  padding-bottom: 2vw;
  text-align: center;
  width: 60%;
  line-height: 30px;
  letter-spacing: 1px;
  font-size: 900;
}

#pg4-left button {
  padding: 7px 20px;
  border-radius: 100px;
  background-color: transparent;
  color: white;
  border: 1px solid white;
}

#pg4-right {
  width: 50%;
  height: 100%;
  background-color: #32462f;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2vw;
  position: absolute;
  left: 50%;
  padding: 5vw 2vw 2vw 2vw;
  text-align: center;
  overflow: hidden;
}

#pg4-right h3 {
  padding: 3vw 5vw;
  font-size: 900;
  font-size: 50px;
}

#pg4-right p {
  font-size: 20px;
  padding-bottom: 2vw;
  text-align: center;
  width: 80%;
  line-height: 40px;
  letter-spacing: 1px;
  font-size: 900;
}

#pg4-right button {
  padding: 7px 20px;
  border-radius: 100px;
  background-color: transparent;
  color: white;
  border: 1px solid white;
}
#pg4 button:hover {
  background-color: #8ba59c !important;
  cursor: pointer;
}
#page5 {
  padding-top: 14vw;
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
}

#page5 #pg5-left {
  width: 50%;
  height: 100%;
  background-color: #006241;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2vw;
  position: absolute;
  padding: 5vw 2vw 2vw 2vw;
  text-align: center;
}

#pg5-left h3 {
  padding: 1vw 5vw;
  font-size: 900;
  font-size: 40px;
}

#pg5-left p {
  font-size: 20px;
  padding-bottom: 1vw;
  text-align: center;
  width: 70%;
  line-height: 40px;
  letter-spacing: 1px;
  font-size: 900;
  color: white;
}

#pg5-left button {
  padding: 7px 20px;
  border-radius: 100px;
  background-color: transparent;
  color: white;
  border: 1px solid white;
}
#pg5-left button:hover {
  background-color: #034f36;
}
#pg5-right {
  width: 50%;
  height: 100%;
  background-image: url("https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-99485.jpg");
  background-position: center;
  background-size: cover;
  object-fit: cover;
  position: absolute;
  left: 50%;
}

#info {
  width: 100%;
  height: 80vh;
  position: relative;
  top: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  border-bottom: 1px solid hsla(0, 0%, 50%, 0.315);
  padding: 2vw 5vw;
}

#info p {
  font-family: Helvetica, sans-serif;
  text-align: center;
  width: 50%;
  letter-spacing: 1px;
  line-height: 30px;
  font-size: 12px;
}

#footer {
  height: 100vh;
  width: 100%;
  position: relative;
  top: 35%;
}

#footer-tags {
  width: 100%;
  height: 55%;
  /* background-color: red; */
  display: flex;
  gap: 30px;
  padding: 1vw 10vw 2vw 4vw;
  overflow: hidden;
  border-bottom: 1px solid hsla(0, 0%, 50%, 0.315);
}

#footer-tags h2 {
  font-weight: 100;
}

#tag1 {
  height: 100%;
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  color: black;
}

#tag1 a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.468);
}

#tag2 {
  height: 100%;
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  color: black;
}

#tag2 a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.468);
}

#tag3 {
  height: 100%;
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  color: black;
}

#tag3 a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.468);
}

#tag4 {
  height: 100%;
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  color: black;
}

#tag4 a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.468);
}
#footer-tags a:hover {
  color: black;
}
#footer-bottom {
  width: 100%;
  height: 60%;
  position: relative;
  padding-left: 4vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 10vw;
  padding-top: 2vw;
  /* background-color: red; */
}

#footer-bottom #icons {
  display: flex;
  gap: 10px;
  font-size: 30px;
}

#footer-bottom a {
  text-decoration: none;
  color: black;
}
#icons > i {
  transition: all ease-in 0.1s;
}
#icons > i:hover {
  background-color: rgba(128, 128, 128, 0.4);
  border-radius: 50%;
  cursor: pointer;
}
#footer-bottom a:hover {
  text-decoration: underline;
}
u:hover {
  text-decoration: none;
  cursor: pointer;
}