@font-face{
    font-family: Product Sans;
    src: url(product-sans/Product\ Sans\ Bold.ttf);
}
@font-face{
    font-family: Product Sans;
    src: url(product-sans/Product\ Sans\ Regular.ttf);
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* font-family: Bold; */
}
html,body{
    width: 100%;
    height: 100%;
}

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

#main{
    width: 100%;
    height: 100vh;
    background-color: orange;
}
nav{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0vh 10vh;
    width: 100%;
    height: 6%;
    z-index: 99;
    
    /* background-color: white; */
}

#fantaLogo{
    font-size:xx-large;
    font-weight: 990;
}

nav a{
    font-size: 1vw;
    text-decoration: none;
    color: white;
}
.centerNav{
    display: flex;
    gap: 3vh;
}
nav i{
    font-size: 1.5vw;
    color: white;
}
.one{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background:linear-gradient(360deg,rgb(255, 211, 79),rgb(255, 128, 0));
}
.one h1{
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing: 25px;
    color: #fff;
    font-size: 20vw;
}
#fanta{
    position: absolute;
    width: 33%;
    z-index: 2;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.8s;
}
#halfOrange{
    position: absolute;
    top: 3%;
    left: 32%;
    width: 19%;
    z-index: 1;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.8s;
}
#twoOrange{
    position: absolute;
    top: 49%;
    right: 23%;
    width: 25%;
    z-index: 3;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.8s;
}
#leaf{  
    position: absolute;
    width:26%;
    top: 22%;
    left: 11%;
    transform: rotate(180deg);
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.8s;
}
#leaf_1{
    position: absolute;
    width:10%;
    left: 20%;
    top: 50%;
    transform: rotate(210deg);

}
#coconutTree{
    position: absolute;
    width:20%;
    top: 15px;
    right: 0px;
}

/* 2nd page */
.two{
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #696969;
}
.leftTwo, .rightTwo{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction:column;
    gap: 5vh;
    width: 50%;
    height: 100%;
    background:linear-gradient(rgb(255, 211, 79),rgb(255, 128, 0));
}
.leftTwo svg{
    transform: rotateX(70deg);
    margin-top: 40vh;
    width: 85%;
}

.rightTwo h1{
    color: #fff;
    font-size: 5vw;
}
.rightTwo p{
    font-size: 1vw;
    color: #fff;
    width: 80%;
}





/* 3rd page */
.three{
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5vw;
    
    width: 100%;
    height: 100%;
    background:linear-gradient(360deg,rgb(255, 211, 79),rgb(255, 128, 0));
}
.card{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2vh;
    top: 10vh;
    width: 25vw;
    height: 60vh;
    background-color: white;
   border-radius: 20px;
}
.card:nth-child(1){
    background-color: #f6431fcf;
}
.card:nth-child(2){
    background-color: rgb(255, 149, 0);
}
.card:nth-child(3){
    background-color: #9ee632cf;
}

.card h1{
    margin-top: 40vh;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing: 3px;
    font-size: 3vw;
}
.card button{
    color: white;
    font-size: 1vw;
    padding: 1vw 2vw;
    border-radius: 50px;
    border: none;
    background-color: orange;
}

#CocaCola{
    position: absolute;
    top: 0%;
    width: 60%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.8s;
}
#lemon{
    position: absolute;
    top: -15%;
    width: 71%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.8s;
}
#dew{
    position: absolute;
    top: 0%;
    width: 70%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.8s;
}