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

.container {
    height: 48px;
    width: 100%;
    display: flex;

}

.pattern {
    background-image: url(/image/Pattern-01.png);
    width: 69%;
    height: 37px;
    background-size: 800px;
    background-position-y: -29px;
}

.black {
    background-color: black;
    width: 31%;
    height: 37px;
}

.logo img {
    width: 300px;
    height: auto;

}

.logo {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.icons i {
    font-size: 2.2rem;
    padding-top: 13px;
}

.icons a {
    color: black;
    text-decoration: none;
}



.banner {
    background-image: url(/image/home.png);
    height: 85vh;
    width: 100%;
    text-align: center;

}

.heading {
    padding-top: 25vh;
    font-size: 1.3rem;
    font-family: 'Tinos', serif;
    font-weight: 200;
}

.dish {
    padding: 90px 10px;
    display: flex;
    gap: 60px;
}

.content-h1 {
    font-family: 'Tinos', serif;
    font-size: 2rem;
    padding-bottom: 10px;
    margin-left: 20px;

}

.content-p {
    font-family: 'Barlow', sans-serif;
    font-size: 1rem;
    margin-left: 20px;
}

.juice {
    border: 2px solid black;
    width: 100%;
    height: 27vh;
    border-radius: 25px;
    background-color: black;
    color: white;
    padding: 30px;
    margin: 20px;
}

.juice h1 {
    font-family: 'Tinos', serif;
    font-size: 1.9rem;
    padding-bottom: 10px;
}

.juice p {
    font-family: 'Barlow', sans-serif;
    font-size: 1rem;
    padding: 20px 0;

}

.juice a h5 {
    color: #8D8060;
    font-size: 17px;
    padding-top: 20px;
}

.juice a {
    text-decoration: none;
}

.hyderbadi {
    background-image: url(/image/hyderabi.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;
    text-align: right;
}

.hyderbadi h1 {
    padding-top: 210px;
    padding-left: 65%;
    text-align: left;
    font-family: 'Tinos', serif;
    font-size: 30px;

}

.world {
    border: 2px solid black;
    width: 60%;
    height: 50vh;
    border-radius: 30px;
    background-color: black;
    padding-top: 90px;
    display: flex;
    gap: 5%;
    margin-left: 20%;
    transform: translateY(-250px);
}

.map-content {
    color: white;
    font-family: 'Tinos', serif;
    padding-left: 70px;
}

.world a {
    color: white;
    text-decoration: none;
}

.map-content h1 {
    padding-bottom: 50px;
    padding-top: 40px;

}

.rice {

    width: 100%;
    height: 35vh;
}

.footer {
    width: 100%;
    height: 65vh;
    background-image: url(/image/eat-zaitoon);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.olive {
    justify-content: center;
    gap: 10%;
    display: flex;
}

.olive img {
    width: 300px;
    padding-top: 100px;
}


.cont-2 {
    padding-top: 150px;
}

.cont-2 h1 {
    font-family: 'Tinos', serif;
}

.cont-2 p {
    font-family: 'Barlow', sans-serif;
    padding: 25px 0px 30px 0px;
}

.cont-2 a {
    font-family: 'Tinos', serif;
    color: #8D8060;
    font-weight: bold;
    text-decoration: none;
}

.cont-2 a:hover {
    color: rgb(50, 50, 103);
}

.fresh {
    background-image: url(image/chicken_fry-removebg-preview.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;
    background-position-x: 100%;
    background-position-y: 100px;
}

.en {
    width: 50%;
    padding-left: 20%;
}

.en h1 {
    font-family: 'Tinos', serif;
    font-size: 40px;
    padding-top: 120px;
}

.fresh .cont-3 {
    width: 50%;
}

footer {
    width: 60%;
    font-family: 'Barlow', sans-serif;
    font-size: 1.1rem;
    margin-left: 20%;

}

.about ul {
    display: flex;
    list-style: none;
    gap: 25px;
    border-bottom: 1px solid black;
    margin-bottom: 30px;
    padding-bottom: 30px;

}

.about li a {
    text-decoration: none;
    color: black;

}

.about li a:hover {
    color: #8D8060;
}

.terms ul {
    display: flex;
    list-style: none;
    justify-content: space-between;
    margin-bottom: 30px;
}

.terms li a {
    color: black;
    text-decoration: none;
}



.terms li a:hover {
    color: #8D8060;
}

.agree {
    display: flex;
    gap: 5px;
}


/* ----------Responsive-------------- */


@media(max-width:1650px) {
    .killi img {
        width: 95%;
        height: auto;
    }

    .dish {
        gap: 0px;
    }

    .juice {
        width: 95%;
        height: 30vh;
    }

    .world {
        padding-top: 50px;
    }

    /* .banner{
        background-position-x: 80%;
    } */
}

@media(max-width:1500px) {
    .map img {
        width: 85%;
        height: 30vh;
    }
}

@media(max-width:1350px){
    .world{
        height: 50vh;
        padding-top: 30px;
    }
}

@media(max-width:1300px){
    .fresh .en{
        padding-left: 10%;
    }
}

@media(max-width:1050px){
    .map-content{
        padding-left: 40px;
    }
    .hyderbadi{
        background-position-x: 15%;
    }
    
}

@media(max-width:950px){
    .map-content h1 {
        font-size: 25px;
    }

}

@media(max-width:900px){
    .dish{
        flex-direction: column;
    }
}

@media(max-width:850px){
    .world{
        flex-direction: column;
    }

    .map-content h1{
        font-size: 25px;
        padding-bottom: 20px;
        padding-top: 20px;
    }

    .map img{
        width: 55%;
        height: auto;
        margin-left:25% ;
    }

    .cont-2 h1{
        font-size: 2.7rem;
        font-weight: bold;
       
     
    }
    .cont-2{
        text-align: left;
        padding: 30px;
    }
    .fresh{
        background-position-x: 380% ;
    }
    .hyderbadi{
        background-position-x: 25% ;
    }

    .olive {
        flex-direction: column;
        text-align: center;
        width: 100%;
    }

    .hyderbadi h1{
        text-align: center;
        padding-left: 0px ;
    }

    .olive img{
        width: 40%;
        margin-left: 30%;
    }

    .en {
        width: 100%;
        padding-left: 50px;
    }

    .content-h1, .content-p{
        padding-bottom: 30px;
    }

   .juice{
      height: auto;
      margin: auto;
   }

   
}

@media(max-width:800px){
    .fresh{
        background-size: 100%;
       
        width: 100%;
        height: 50vh;
        background-position-x: 100%;
        background-position-y: 100px;
    }

    .world{
        width: 90%;
        margin-left: 5%;
        height: auto;
    }

    .world .map img{
        width: 80%;
        margin-left: 10%;
    }
    footer{
        width: 90%;
        margin-left: 5%;
    }

    .terms ul{
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .agree {
        justify-content: center;
        padding-bottom: 20px;
    }

}

@media (max-width: 600px){
    .olive img {
        width: 60%;
        margin-left: 20%;
    }


    .logo img {
        padding-top: 5px;
        width: 200px;
        height: auto;
    }

}