body, html {
    margin: 0;
    padding: 0;
    font-size:20px;
}
ul{
    list-style-type: none;
}
ul a{
    text-decoration:none;
}
a:hover{
    opacity:0.5;
}
li{
    padding:15px;
}
.food{
    background-image: url("img/gend.png");
    position:relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height:150vh;
}
.position{
    position: absolute;
    width:100%;
    height:100%;
    top:6%;
}
.position2{
    position:relative;
    top:0%;
    left:0;
    overflow: hidden;
}
.card{
    border: none !important; /* Remove border */
    box-shadow: none !important; /* Remove shadow */
    background-color: transparent !important; /* Make background transparent */
    padding:50px !important;
}
.circle{
    top:0%;
    border-radius:100px;
    width:100%;
    height:100%;
    left:10%;
    position:relative;
}
.menu{
    position: absolute;
    top:30%;
    left:45%;
    transition:all ease-in 3s;
    transform:translateX(-1000px);

    animation:3s speed ease-in forwards;
}
.order{
    position: absolute;
    top:40%;
    left:45%;
    transition:all ease-in 5s;
    transform:translateX(-1000px);
    animation:4s speed ease-in forwards;
}
.about{
    position: absolute;
    top:50%;
    left:45%;
    transition:all ease-in 7s;
    transform:translateX(-1000px);
    animation:5s speed ease-in forwards;
}
.contact{
    position: absolute;
    top:60%;
    left:45%;
    transition:all ease-in 9s;
    transform:translateX(-1000px);
    animation:6s speed ease-in forwards;
}
.feed{
    position: absolute;
    top:70%;
    left:45%;
    transition:all ease-in 11s;
    transform:translateX(-1000px);
    animation:7s speed ease-in forwards;
}
.home{
    position: absolute;
    top:20%;
    left:45%;
    transition:all ease-in 1s;
    transform:translateX(-400px);
    animation:2s speed ease-in forwards;
}
.position4{
    position:relative;
    top:10%;
}

@keyframes speed {
    form{
        transform:translateX(-1000px);
    }
    to{
        transform:translateX(0);
    }
}
.card-body{
    border-radius:300px;
    padding:180px 200px !important;
    background: linear-gradient(to right,rgba(225,225,225,0) , grey);
}
@media (max-width:1000px) {
    body, html {
        margin: 0;
        padding: 0;
        overflow:visible;
    }
    .food{
        background-image: url("img/t.png");
        position:relative;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height:160vh;
    }
    body, html {
        margin: 0;
        padding: 0;
    }
    .circle{
        top:-40%;
        border-radius:100px;
        left:7%;
        position:relative;
    }
    .position4{
        position:relative;
        top:-22%;
        left:-30%;
    }
    
}
@media (max-width:780px) {
    body, html {
        margin: 0;
        padding: 0;
        overflow:visible;
    }
    .food{
        background-image: url("img/t.png");
        position:relative;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height:300vh;
        overflow: hidden;
    }
    body, html {
        margin: 0;
        padding: 0;
    }
    .circle{
        top:10%;
        border-radius:100px;
        left:7%;
        overflow: hidden;
        position:relative;
    }
    .position3{
        overflow: hidden;
        position: absolute;
        top:0%;
    }
}
@media (max-width:700px) {
    body, html {
        margin: 0;
        padding: 0;
        font-size:15px;
    }
    .food{
        background-image: url("img/t.png");
        position:relative;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height:150vh;
    }
    .position3{
        position: absolute;
        top:0%;
    }
    .card{
        border: none !important; /* Remove border */
        box-shadow: none !important; /* Remove shadow */
        background-color:transparent !important;
        padding:80px !important;
    }
    .circle{
        top:5%;
        border-radius:100px;
        left:0%;
        position:relative;
    }
    .card-body{
        border-radius:100px;
        padding:120px 120px !important;
        margin-top:150px !important;
        background: linear-gradient(to right,rgba(225,225,225,0),rgb(132, 133, 133));
    }
    .slide{
        background:linear-gradient(to top right , rgba(225,225,225,0) , grey);
        border-radius:50px;
        position: relative;
        top: -10px ;
        left:-50px;
    }
    .slide .fod{
        margin-left:50px !important;
    }
    .menu{
        position: absolute;
        top:44%;
        left:45%;
        transition:all ease-in 3s;
        transform:translateX(-400px);
        animation:3s speed ease-in forwards;
    }
    .order{
        position: absolute;
        top:54%;
        left:45%;
        transition:all ease-in 5s;
        transform:translateX(-400px);
        animation:4s speed ease-in forwards;
    }
    .about{
        position: absolute;
        top:64%;
        left:45%;
        transition:all ease-in 7s;
        transform:translateX(-400px);
        animation:5s speed ease-in forwards;
    }
    .contact{
        position: absolute;
        top:74%;
        left:45%;
        transition:all ease-in 9s;
        transform:translateX(-400px);
        animation:6s speed ease-in forwards;
    }
    .feed{
        position: absolute;
        top:84%;
        left:45%;
        transition:all ease-in 11s;
        transform:translateX(-400px);
        animation:7s speed ease-in forwards;
    }
    .home{
        position: absolute;
        top:34%;
        left:45%;
        transition:all ease-in 1s;
        transform:translateX(-400px);
        animation:2s speed ease-in forwards;
    }
}