@font-face{
    src: url("FONTS/attila.ttf");
    font-family: "attila Sans Uniform";
}
@font-face{
    src: url("FONTS/DancingScript-VariableFont_wght.ttf");
    font-family: "dancing script";
}
@font-face{
    src: url("FONTS/Havelock\ Titling\ Family/havelock.otf");
    font-family: "havelock titling";
}
@font-face{
    src: url("FONTS/Montserrat/Montserrat-Medium.ttf");
    font-family: "montserrat";
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'attila Sans Uniform';
}
body,html{
    height: 100%;
    width: 100%;
}
#bg{
    color: #d1d1d1;
    position: relative;
    background-color: #232025;
    overflow: hidden;
}
#page1{
    /* height: 100vh; */
    background-color: #232025;
    position: relative;
}
#page1 h1{
    font-size: 13vw;
    text-transform: uppercase;
    /* background-color: red; */
    position: absolute;
    top: 19vh;
    left: 5vw;
    letter-spacing: 7px;
}

#page1 h2{
    position: absolute;
    top: 55vh;
    left: 20vw;
    font-size: 3vw;
    font-weight: 100;
    line-height: 6vh;
    color: #adadad;
}
#page1 h4{
    font-size: 0.9vw;
    position: absolute;
    top: 58vh;
    right: 19vw;
    color: #adadad;
    font-weight: 100;
    line-height: 2.3vh;
}
#nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    z-index: 11;
    width: 100vw;
    padding: 7vh 5.8vw;
    color: #cecece;
    /* background-color: red; */
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 5s;
}
#nav>h1{
    font-size: 1.1vw;
    letter-spacing: 0.5vw;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 100;
}
#prt2 h2{
    font-size: 1.05vw;
    text-transform: uppercase;
    margin-right: 55px;
    letter-spacing: 2px;
    word-spacing: 6px;
    cursor: pointer;
}
#nav #prt2{
    /* background-color: blue; */
    display: flex;
    align-items: center;
    
}
#prt2 #menu{
    width: 2vw;
    height: 1.6vh;
    /* background-color: yellow; */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    cursor: pointer;
    flex-direction: column;
    /* background-color: red; */
}
#menu .line{
    border-radius: 10px;
    height: 0.3vh;
    width: 100%;
    background-color: #cecece;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
}
#line1{
    /* transform: rotate(40deg); */
    transform-origin: 0 100%;

}
#menu #line2{
    width: 70%;
    transform-origin: 30% 50%;
    /* transform: rotate(-40deg); */
}
#page1 img{
    height: 100vh;
    width: 90vw;
    position: relative;
    margin-top: 88vh;
    left: 50%;
    transform: translateX(-50%);
    object-fit: cover;
    object-position: center;
}
#page2{
    position: relative;
    background-color: #232025;
}
#part1{
    height: 90vh;
    overflow: hidden;
    display: flex;
    perspective: 600px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#page2 #part1 h1{
    font-size: 55px;
    opacity: 0;
    transform: rotateX(270deg);
    transform-origin: left bottom;
}
#page2 #part1 h1 span{
    font-family: 'dancing script';
}
#part2{
    height: 100vh;
    background-color: #232025;
    position: relative;
    padding: 10vh 6vw;
}
#part2 #line{
    height: 2px;
    width: 30%;
    background-color: #adadad;
}
#part2 .card{
    position: absolute;
    top: 50%;
    left: 25%;
    z-index: 1;
    transform: translate(-50%,-50%);
    height: 300px;
    width: 250px;
    border-radius: 20px;
    color: black;
    padding: 20px 25px;
    opacity: 0;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 4s;
    text-transform: uppercase;
}
.mangocard{
    background-color: rgb(255, 208, 0);
}
.bananacard{
    background-color: rgb(233, 255, 34);
}
.pinecard{
    background-color: rgb(0, 255, 170);
}
.pithayacard{
    background-color: rgb(255, 34, 119);
}
.card h2{
    font-size: 33px;
    font-weight: 100;
}
.card h3{
    font-size: 15px;
    position: absolute;
    top: 80%;
}
#line h6{
    text-transform: uppercase;
    font-size: 11px;
    position: absolute;
    left: 22vw;
    top: 8vh;
}
.fruit{
    display: flex;
    align-items: flex-start;
    margin: 4vh 0;
    /* background-color: red; */
    position: relative;
    cursor: pointer;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
}
.fruit h5{
    font-family: 'havelock titling';
    font-size: 15px;
}
.fruit h1{
    font-family: 'havelock titling';
    font-size: 4.9vw;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
    margin-left: 12vw;
    text-align: left;
    position: relative;
    z-index: 99;
    font-weight: 700;
    letter-spacing: -0.6vw;
    -webkit-text-stroke: 1px #cecece;
}
.fruit:hover h1{
    color: #232025;
}
.fruit:hover p{
    opacity: 1;
}
.fruit p{
    position: absolute;
    right: 0;
    font-weight: 900;
    font-size: 65px;
    opacity: 0;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.3s;
}
#mango{
    margin-top: 12vh;
}
#page3{
    background-color: #232025;
    /* height: 120vh; */
    
}
#finish{
    padding: 26vh 10vw 0vh 5vw;
    opacity: 0;

}   
#finish>h1{
    font-size: 8vw;
    /* background-color: rgb(2, 88, 88); */
    margin-bottom: -4vh;
}
#box{
    height: 30vh;
    margin-top: 15vh;
    display: flex;
    position: relative;
    /* background-color: beige; */
    border-top: 1px solid #cecece ;
    border-bottom: 1px solid #cecece ;
}
#box #box1{
    width: 70vw;
    height: 100%;
    /* background-color: red; */
    border-right: 1px solid #cecece ;
    padding: 5.5vh 5vw;
}
#box #box2{
    width: 30vw;
    height: 100%;
    padding: 7.5vh 4vw 5.5vh 5vw;
    /* background-color: rgb(126, 83, 226); */
}
#box1 h2{
    font-size: 4vw;
    margin-bottom: -2vh;
}
#box2 h3{
    font-size: 1.5vw;
    margin-bottom: 1.3vh;
}
#page4{
    background-image: url(https://uploads-ssl.webflow.com/61defec4a021d8fe954c11bd/61defec4a021d83ede4c11f8_stars.gif);
    height: 100vh;
    background-color: #232025;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#page4 h1{
    /* background-color: red; */
    width: 55vw;
    font-size: 4vw;
    line-height: 7vh;
}
#page4 h1 span{
    font-family: 'dancing script';
    font-size: 5.2vw;
}
#page4 .h4{
    margin-top: 8vh;
    font-size: 1.05vw;
    text-align: left;
    font-weight: 100;
}

#page4 img{
    margin-top: 20vh;
}
#page5{
    /* height: 120vh; */
    background-color: #232025;
}
#page5 .slide1h1{
    overflow-x: auto;
    overflow-y: hidden;
    cursor: default;
}
#page5 .slide2h1{
    overflow-x: auto;
    overflow-y: hidden;
    cursor: default;
}
#page5 .slide2h1 h1{
    transform: translateX(-96%);
}
#page5 h1{
    font-size: 13vw;
    text-transform: uppercase;
    line-height: 23vh;
}
#page5 .slide1h1::-webkit-scrollbar{
    display: none;
}
#page5 .slide2h1::-webkit-scrollbar{
    display: none;
}
#page5 h1 .one2{
    color: transparent;
    -webkit-text-stroke: 1px #adadad;
}
#page6{
    height: 100vh;
    background-color: #232025;
    text-align: center;
    position: relative;
}
#page6 .ques{
    position: absolute;
    top: 19.5vh;
    left: 34.5vw;
}
.ques1{
    font-size: 2.8vw;
}
.ques2{
    font-size: 4vw;
    font-weight: 100;
    margin-top: -1vh;
    font-family: 'dancing script';
}
#page6 #option{
    /* background-color: blue; */
    position: absolute;
    top: 55vh;
    display: flex;
    width: 100vw;
    justify-content: space-around;
    align-items: center;
}
#option #op1,#op2{
    
    width: 40vw;
    cursor: pointer;
    position: relative;
    height: 10vh;
}

#op1 h3{
    font-size: 2.8vw;
    position: relative;
    z-index: 999;
}
#op2 h3{
    font-size: 2.8vw;
    position: relative;
    z-index: 999;
}
#op1 .gifimg{
    height: 300px;
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(15deg);
    z-index: 9;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 3s;
    opacity: 0;
    will-change: transform;
} 
#op2 .gifimg{
    height: 300px;
    width: 300px;
    position: absolute;
    opacity: 0;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 3s;
    top: 50%;
    will-change: transform;
    left: 50%;
    transform: translate(-50%,-50%) rotate(15deg);
    z-index: 9;
}
.gifimg img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;

}
#page7{
    height: 100vh;
    background-color: #232025;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}
#page7 h1{
    font-size: 4.2vw;
    top: 20vh;
    position: absolute;
}
#product{
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
    /* background-color: red; */
}
.products{
    height: 35vh;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
    top: 35vh;
    position: absolute;
    box-shadow: 0px 0px 15px #232025;
}
.products:hover{
    transform: rotate(13deg) scale(1.1);
}
.products img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    
}
#product3{
    height: 50vh;
    z-index: 11;
}
#product1{
    left: 19vw;
    top: 41.5vh;
    height: 37vh;
    z-index: 9;
}
#product4{
    top: 38vh;
    height: 44vh;
    left: 57vw;
    z-index: 10;
}
#product2{
    height: 44vh;
    left: 30vw;
    top: 38vh;
    z-index: 10;
}
#product5{
    left: 70.5vw;
    z-index: 9;
    height: 37vh;
    top: 41.5vh;
}
#topmenu{
    background-color: #cecece;
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 10;
    color: #2b2b2b;
    transform: translateY(-100%);
    border-top: 1px solid #000;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.8s;
    
}
#topmenu h1{
    font-size: 13.5vw;
    margin-top: 15.7vh;
    margin-left: 4.8vw;
    letter-spacing: -1vw;
    text-transform: uppercase;

}
#opt{
    height: 45vh;
    width: 45vw;
    margin-left: 5.5vw;
    display: flex;
    flex-direction: column;
    margin-top: 5vh;
    flex-wrap: wrap;
    /* background-color: azure; */
}
#opt h4{
    /* background-color: red; */
    font-size: 1.8vw;
    font-family: 'montserrat';
    margin-bottom: 2.2vh;
    /* background-color: aqua; */
    font-weight: 500;
    cursor: pointer;
    width: 15vw;
}