@font-face {
            font-family: Product Sans;
            src: url(./Fonts/Fonts/Product\ Sans\ Regular.ttf);
        }
        @font-face{
            font-family: Product Sans B;
            src: url(./Fonts/Fonts/Product\ Sans\ Bold.ttf);
        }
        * {
            padding: 0;
            margin: 0;
        }
        
        .navbar {
            height: 80px;
            background:linear-gradient(90deg, rgb(255, 166, 0), rgb(255,94,0));
            display: flex;
            align-items: center;
            justify-content: space-around;
            /* position: sticky;
            top: 0;
            z-index: 99; */
        }
        
        .logo img{
            height: 60px;
            margin-left: 50px;
        }
        .menu ul {
            display: flex;
            align-items: center;
            gap: 60px;
            font-size: 19px;
            color: black;
            list-style-type: none;
           
            
        }
        .menu ul li{
            padding: 10px 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgb(0, 0, 0);
        }
        .toggle {
            font-size: 40px;
            color: white;  
        }
        .main {
            height: 90vh;
            background:linear-gradient(90deg, rgb(255, 166, 0), rgb(255,94,0));
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        .main h1 {
            color: white;
            font-size: 400px;
            font-family: Product Sans B;
        }
        .fanta {
            position: absolute;
            height: 65vh;
            margin-top: 10px;
        }
        .leaf1 {
            position: absolute;
          
            top: 90%; 
            width: 20vh;
            right:10vh;
            transform: rotateZ(-90deg);
        }
        .lemon {
            position: absolute;
            width: 35vh;
            left: 32%;
            top :20px;
        }
        .coconut {
            position: absolute;
      
            width: 35vh;
            right: 0;
            top: 0;
        }
        .leaf2 {
            position: absolute;
            height: 200px;
            right: 50px;
            left: 3%;
            top: 8%;
            transform: rotateZ(45deg);
          
        }
       .orange {
        width: 40vh;
        position: absolute;
        bottom: 0;
        right: 32%;
        z-index: 9999;
       }
       .lemon2{
        position: absolute;
        height: 400px;
        margin-top: 220px;
        margin-left: 100px;
    }
        .second {
            height: 100vh;
            background-color: red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .second div {
            height: 100%;
            width: 50%;
        }
        #second-left {
            /* background-color: green; */
            position: relative;
        }
        #second-left svg {
           height: 80vh;
           transform: rotateX(70deg);
           position: absolute;
           top: 40%;
           filter: drop-shadow(0px 20px 15px black) ;
        }
       
        #second-right {

            display: flex;
            flex-direction: column;
            align-items: center;
            
            padding: 40px;
        }
        #second-right h1 {
            font-size: 6vh;
            color: white;
            font-family: Product Sans B;
        }
        #second-right p {
            padding: 10px;
            text-align: justify;
            font-family: Product Sans;
            color: white;
        }

        .third {

            height: 110vh;
            background:linear-gradient(90deg, rgb(255, 166, 0), rgb(255,94,0));
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .third div {
            width: 25%;
            height: 80vh;
            background-color: white;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            position: relative;
        }
        #coca-orange {
            height: 42vh;
            position: absolute;
            top: -18%;
        }
        #coca {
            height: 70vh;
            top : -2%;
            position: absolute;
        }
        #pepsi {
            height: 75vh;
            top : -2%;
            position: absolute;
        }
        .forth {
            height: 100vh;
            background-color: red;
            display: flex;
           
            color:white;
        }
        .forth div {
            width: 50%;
            
        }
        .forth-2 {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            padding: 0px 50px;
        }
        .footer {
           background:linear-gradient(90deg, rgb(255, 166, 0), rgb(255,94,0));
            padding: 50px;
            color: white;
            text-align: center;
        }
        .footer p {
            margin: 5px 0px;
        }
        #fanta{
            position: absolute;
            z-index: 999;
        }
        #orange{
            position: absolute;
            z-index: 99;
        }
        #orange-1 {
            position: absolute;
        }
        #leaf-1{
            position: absolute;
        }