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

.playwrite-au-qld-uniquifier {
  font-family: "Playwrite AU QLD", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.main{
    width: 100% ;
    height: 100vh;   
    background-image: linear-gradient(to right bottom, #e07943, #de7641, #dc733f, #d96f3d, #d76c3b, #d66837, #d66532, #d5612e, #d65c26, #d7581d, #d75313, #d84e05);
}
.nav{
    width: 100%;
    height: 80px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 0% 40px;
}
.main .nav .logo{
    height: 30px;
    width:30px;
} 

.main .nav .menu{
    height: 16px;
    width:50px;
    }
 .main .nav .nav-links{
    display: flex;
    justify-content: space-between;
    gap:20px;
    /* list-style: none; */
    font-size: 16px;
    
    a{
        color:#FFF;
        list-style: none;
        text-decoration: none;
    }
 }   
 /* fanta */
 .fanta{
    display: flex;
    /* flex-direction: column; */
    /* justify-content: center; */
    margin-top: 5%;
    
 }
 .img-fanta{
    position: absolute;
    width: 40vw;
    height: 65vh;
    z-index: 2;
    top:15%;
    left:30%;
 }
 .orange2{
    width: 300px;
    height: 300px;
    top:10%;
    left:34%;
    position: absolute;
    z-index: 1;
    
 }
 .orange-2{
    width: 350px;
    height: 350px;
    top:55%;
    right:34%;
    position: absolute;
    z-index: 3;
    
 }
 .Fanta-text{
    position:absolute;
    top:20%;
    left:51%;
    transform: translateX(-50%);
    z-index: 0;
    color: #fff;
    font-size: 16vw;
    font-weight: 700;
    font-family: "playwrite-au-qld-uniquifier",'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.leaf{
    position: absolute;
    width:20%;
    top:10%;
    left:5%;
    transform:rotate(60deg);
    z-index: 2;

}
.leaf-2{
    position:absolute;
    top:70%;
    left:80%;
    transform: rotate(-90deg);
    width:13%;
    z-index:2;
}
.leaf-3{
    position:absolute;
    width:20%;
    top:10%;
    right:0%;
}

.slide-2{
    position: relative;
    height: 100vh;
    width:100vw;
    background-image: linear-gradient(to right top, #413321, #443523, #483726, #4b3a28, #4f3c2b);
}
.svg-2{
    height: auto;
    width: 30vw;
    transform: rotate(90deg);
}
.svg-1{
    height:auto;
    width: 100%;;
}
.text-2{
    position:absolute;
    top:47%;
    left:50%;
}
.text-2 h1{
    color:#fff;
    font-size: 4rem;
    font-family: sans-serif;
}
.text-2 p{
    color:#fff;
    font-size: 1.4rem;
    font-family: sans-serif;
    width:57%;
    line-height: 40px;
}
.slide-3{
    height: 100vh;
    width: 100vw;
    background-image: linear-gradient(to right bottom, #e07943, #de7641, #dc733f, #d96f3d, #d76c3b, #d66837, #d66532, #d5612e, #d65c26, #d7581d, #d75313, #d84e05);
    display: flex;
    justify-content:space-around;
    align-items: center;
    flex-direction: row;
}
.container-1{
    position:relative;
    width: 24%;
    height: 700px;
    background-color: rgb(182, 76, 76);
    border-radius: 20px;
    box-shadow: -6px 16px 68px -4px rgba(87,79,79,0.75);
    -webkit-box-shadow: -6px 16px 68px -4px rgba(87,79,79,0.75);
    -moz-box-shadow: -6px 16px 68px -4px rgba(87,79,79,0.75);

}
.container-2{
    position:relative;
    width: 24%;
    height: 700px;
    background-color: rgb(235, 155, 115);
    border-radius: 20px;
    box-shadow: -6px 16px 68px -4px rgba(87,79,79,0.75);
    -webkit-box-shadow: -6px 16px 68px -4px rgba(87,79,79,0.75);
    -moz-box-shadow: -6px 16px 68px -4px rgba(87,79,79,0.75);

}
.container-3{
    position:relative;
    width: 24%;
    height: 700px;
    background-color: rgb(37, 240, 135);
    border-radius: 20px;
    box-shadow: -6px 16px 68px -4px rgba(87,79,79,0.75);
    -webkit-box-shadow: -6px 16px 68px -4px rgba(87,79,79,0.75);
    -moz-box-shadow: -6px 16px 68px -4px rgba(87,79,79,0.75);
}




.nav-3{
    position: absolute;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    top:80%;
    left:40%;
}
.nav-3 p{ 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    font-family: sans-serif;
    color:#fff;

}
.coca-text{
    margin-left:-28%;
}
.colabtn{
    margin-left:-28%; 
}
.btn{
    width: 120px;
    height:45px;
    background-color: "#fff";
    border:none;
    border-radius: 25px;
    color:#000;
    margin-top:2%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    cursor: pointer;
    &&:hover{
        background-color: #d25d198a;
    }
}

.container-1 img ,.container-2 img ,.container-3 img{
    width: 400px;
    height:400px;
    justify-content: center;
    align-items: center;
    position: absolute;
    left:3%;
    top:-19%;
}

.container-1 .coca {
    position: absolute;
    top:5%;
    left:15%;
     width:300px;
    height: 500px;
}
.container-3  .pepsi{
     position: absolute;
    top:1%;
    left:-3%;
    width:500px;
    height: 570px;
}
.orange-cut{
    position:absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 50px;
}
.pepsi{
    position:absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 50px;
}

.coca{
    position:absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 45px;
}