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

/* 
font-family: 'Amatic SC', sans-serif;
font-family: 'Inter', sans-serif;
font-family: 'Open Sans', sans-serif; 
 */

html {
    scroll-behavior: smooth;
}

a,span{
    display: inline-block;
}

.main-title{
    text-align: center;
    margin-bottom: 50px;

}

.main-title h2{
    color: #7F7F90;
    font-size: 14px;
    line-height: normal;
    padding:0px;
    margin:0px;
    font-weight:400;


}

.main-title p{
    font-family: 'Amatic SC', sans-serif;
    color: #212529;
    font-size: 50px;
    line-height: normal;
    padding:0px;
    margin:0px;
    font-weight:400;


}

.main-title span{
    color: #CE1212;
}

a{
    text-decoration: none;
    color: inherit ;
    font-family: 'Open Sans', sans-serif; 
}

p{
    font-family: 'Open Sans', sans-serif; 

}

img {
    display: block;
}


ul{
    list-style: none;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'Inter', sans-serif;
}

/* btn{
    padding: ;
    border: ;
    background-color: ;
} */


/* <-----------------------Container------------------------> */

.container{
    width:100%;
    /* background-color: rgb(42, 136, 165); */
    margin: auto;
    padding: 40px 5px;

}

/* <<<<<<<<-------------------- MEDIA -------------->>> */

@media  screen and  (min-width: 576px) { 
    .container {
        width: 540px;
    }
    
}


@media  screen and (min-width: 768px) {
    .container{
        width: 720px;
    }
}

@media  screen and (min-width: 992px) {
    .container{
        width: 960px;
    }
}




@media  screen and (min-width: 1200px) {
    .container{
        width: 1140px;
    }
}

@media  screen and (min-width: 1400px) {
    .container{
        width: 1320px ;
    }
}

/* @media  screen and (min-width: 575.98px) {
    .container{
        width: 100%;
        padding-inline: 20px;
    }
} */







/* <<<------------------Start-------------------->>> */


/* <<<------------------Navbar-------------------->>> */

nav .navcontent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 5px;
}

nav .container .navcontent h1{
    color: #212529;
    font-size: 30px;
    line-height: normal;
    font-weight: 700;
    text-align: start;
}

nav .container .navcontent span{
    color: #CE1212;
}




nav .container .navcontent ul{
    display: flex;
}

nav .container .navcontent ul li{
    padding-inline: 30px;
}

nav .container .navcontent ul li a{
    color: #7F7F90;
    font-size: 17px;
    line-height: normal;
    font-weight: 600;
    text-align: left;
    position: relative;
    transition: .3s;
}

nav .container .navcontent ul li a:hover{
    color: #020202;
}

nav .container .navcontent ul li a::before{
    content: " ";
    position: absolute;
    left: 0;
    top: 120%;
    width: 0;
    height: 2px;
    background-color: #CE1212;
    transition: .3s;
}

nav .container .navcontent ul li a:hover::before{
    width: 100%;
}

nav .container .navcontent .style i{
    font-size: 25px;
}

nav .container .navcontent .style .sun{
    display: none;
}

/* <<<<<<<<<<<<---------- Navbar midea--------->>>>>>>> */

/* @media  screen and (min-width:  1199.98px) {
    
} */






















/* <<<<<<-------------Header--------------->>>> */


#home{
    background-color: #EEEEEE;
    height: 100vh;
}

#home .container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#home .container > *{
    width: 40%;
}


/* <<<<<<------------ Image------------->>> */

#home .container picture img{
    width: 100%;
    filter:drop-shadow(30px 10px 20px rgba(0, 0, 0, 0.774))  ;
}


@keyframes dancing{
    0%{
        transform: translate(1px, 1px) rotate(0deg) ;
    }
    10%{
        transform: translate(-1px, -2px) rotate(-1deg) ;
    }
    20%{
        transform: translate(-3px, 0px) rotate(1deg) ;
    }
    30%{
        transform: translate(3px, 2px) rotate(0deg) ;
    }
    40%{
        transform: translate(1px, -1px) rotate(1deg) ;
    }
    50%{
        transform: translate(-1px, 2px) rotate(-1deg) ;
    }
    60%{
        transform: translate(-3px, 1px) rotate( 0deg) ;
    }
    70%{
        transform: translate(-2px, 2px) rotate( 1deg) ;

    }
    80%{
        transform: translate(-1px, 3px) rotate( -1deg) ;

    }
    90%{
        transform: translate(2px, -1px) rotate( 0deg) ;

    }
    100%{
        transform: translate(0px, -3px) rotate( 1deg) ;

    }

}


#home .container picture img:hover{
    animation: dancing 1s infinite ;
}




/* <-----___________Home content-------------->> */

#home .container .home-content h2{
    color: #37373f;
    font-family: 'Amatic SC', sans-serif;
    font-size: 65px;
    line-height: normal;
    font-weight: 700;
    text-align: start;
}

#home .container .home-content p{
    color: #4F4F5A;
    font-family: 'Open Sans', sans-serif; 
    font-size: 16px;
    line-height: 25.6px;
    font-weight: 400;
    text-align: start;
    margin:20px 0px;
}

/* <<<<<<<<<<<--------------Buttom--------->>>>>> */

#home .container .home-content .home-bnt{
    /* background-color: aqua; */
    display: flex;
    align-items: center;
}

#home .container .home-content .home-bnt .bnt1{
    background-color:#CE1212;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif; 
    font-size: 15px;
    line-height: normal;
    font-weight: 400;
    text-align: start;
    margin-right:10px;
    padding: 10px 25px;
    border-width: 2px;
    border-radius: 0 30px 30px 30px ;
    transition: .3s;

}
#home .container .home-content .home-bnt .bnt1:hover{
    background-color: #E51414;
}


/* ,,,,,, watch icone -------- */

#home .container .home-content .home-bnt .bnt2 > *{
    display: flex;
    align-items: center;
    padding: 10px 25px;

}




#home .container .home-content .home-bnt a{
    color: #37373f;
    font-family: 'Open Sans', sans-serif; 
    font-size: 16px;
    line-height: normal;
    font-weight: 600;
    text-align: start;
    margin:0px;
    padding: 0px;
    transition: .3s;

}

#home .container .home-content .home-bnt .icon{
    background-image:linear-gradient(to right, #CE1212 0% 50%, transparent 50% 100%) ;    
    width: 50px;
    height: 50px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#home .container .home-content .home-bnt .icon::after{
    background-color: #ffffff;
    content: "" ;
    width: 40px;
    height: 40px;
    position: absolute;
    border-radius: inherit;


}

#home .container .home-content .home-bnt .icon i{
    z-index: 5 ;
}

#home .container .home-content .home-bnt .bnt2 a:hover{
    color: #E51414;

}

/* <<<<<<<<-------------------- Homee MEDIA -------------->>> */


/* @media  screen and (min-width:  1199.98px) {
    #home .container{
        min-width: 100vh;
    }
}


@media  screen and (max-width: 991.98px) {
    #home .container{
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
    }
    #home .container > * {
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: center;
        align-items: center;

    }

    #home .container .home-content p{
        text-align: center;
    }
    #home .container .home-content .home-bnt .bnt1{
        border-radius: 30px;
    }


}

@media  screen and (max-width: 399.98px) {
    #home .container .home-content .home-bnt{
    flex-direction: column;
    }
    
    }


@media  screen and (max-width: 575.98px) {
    .container{
        width: 100%;
        padding-inline: 20px;
    }
} */



/* <----------------------Chef------------------->>>>>>>>> */

#chefs{

}

#chefs .main-chef{
    --gap:20px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);

}

#chefs .main-chef .chef-data {
    width: calc(calc(100% - var(--gap)*2 )/3);
    /* background-color: aqua; */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.14);
    transition: .3s;
    position: relative;
}

#chefs .main-chef .chef-data .social{
    position: absolute;
    top: 20px;
    right: -70px;
    background-color: #e6e6e6b9;
    border-radius: 5px;
    text-align: center;
    transition: right .3s ;
}


#chefs .main-chef .chef-data .social i:hover{
    color: #020202;
}

#chefs .main-chef .chef-data:hover .social{
    right: 15px;
    transition: right .3s .3s ;


}



#chefs .main-chef .chef-data .social a{
    padding: 10px; ; 
}

#chefs .main-chef .chef-data .social i{
    font-size: 18px;
    color: #7f7f908f;
    transition: .3s;
}



#chefs .main-chef .chef-data:hover{
    transform: scale(1.05);
}

#chefs .main-chef .chef-data img{
    width: 100%;
    border-radius: 10px;

}

#chefs .main-chef .chef-data picture{
    position: relative;
}

#chefs .main-chef .chef-data picture::before{
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 60px;
    background-image: url(Images/wave.svg);
    background-repeat: repeat-x ;
}




#chefs .main-chef .chef-data .chef-inf{
    padding: 10px 25px 25px;
    text-align: center;
}

#chefs .main-chef .chef-data .chef-inf h3{
    color: #212529;
    font-size: 18.72px;
    line-height: normal;
    padding:0px;
    margin:0px;
    font-weight:700; 
}

#chefs .main-chef .chef-data .chef-inf p{
    font-family: 'Open Sans', sans-serif; 
    color: #7F7F90;
    font-size: 15px;
    line-height: normal;
    padding:0px;
    margin:0px;
    font-weight:400;
    font-style: italic;


}

#chefs .main-chef .chef-data .chef-inf span{
    font-family: 'Open Sans', sans-serif; 
    color: #7F7F90;
    font-size: 14px;
    line-height: normal;
    padding:0px;
    margin:5px 0px 10px;
    font-weight:400;
    font-style: italic;

}

/* <----------------------Gallary------------------->>>>>>>>> */


#gallery{
    background-color: #EEEEEE;
}

#gallery .gallery-imgs{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    --gap:20px;
    height: 1165px;
    gap: var(--gap)  
}

#gallery .gallery-imgs picture{
width: calc(calc(100% - var(--gap)*2)/3);
border: 4px solid white;
position: relative;
overflow: hidden;
}

#gallery .gallery-imgs img{
    width: 100%;
    transition: .4s;

}


#gallery .gallery-imgs .layer{
position: absolute;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
height: 100%;
background-color: #000000a8;
color: #ffffff;
padding: 10px;
top: 110%;
left: 0;
transition: .4s;
}

#gallery .gallery-imgs .layer h2{
    font-size: 24px;
    line-height: normal;
    font-weight: 700;
    text-align: start;
}
#gallery .gallery-imgs .layer p{
    color: #DDDDDD;
    font-size: 16px;
    line-height: normal;
    font-weight: 400;
    text-align: center;
    padding-top: 10px;
}


#gallery .gallery-imgs picture:hover .layer{
    top:0;
}

#gallery .gallery-imgs picture:hover img{
    scale: 1.2;
}



/* <<<<<<<<<<<<<<----------contyactus----------->>>>>>>>>>>> */

#contact{

}

#contact .container{

}

#contact .container iframe{
    width: 100%;
    height: 400px;
}

#contact .container .contact-means{

    --gap:15px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin-block: 25px;
}

#contact .container .contact-means > div{
    width: calc(calc(100% - var(--gap)) / 2);
    background-color: #F5F5F5;
    padding: 25px;
    display: flex;
    gap: 10px;
}

#contact .container .contact-means .icon{
    width: 50px;
    height: 50px;
    background-color: #CE1212;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

#contact .container .contact-means h3{
    color: #7d7d7d;
    font-size: 20px;
    margin: 0px 0px 5px;
    font-weight: 700;
    text-align: start;
}

#contact .container .contact-means p{
    color: #212529;
    font-size: 16px;
    font-weight: 400;
    text-align: start;
}

#contact .container .contact-means a{
    color: #212529;
    font-size: 16px;
    font-weight: 400;
    text-align: start;
}

#contact .container form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.089) ;
    padding: 20px;
}

#contact .container form > *:not(button){
    width: 100%;
}

#contact .container .inpt{
    /* background-color: #E51414; */
    display: flex;
    flex-wrap: wrap;
    --gap:15px;
    gap: var(--gap);
}

#contact .container .inpt input{
    width: calc(calc(100% - var(--gap))/2);
}

#contact .container input{
    padding: 15px;
    outline-color: #CE1212;
    border: 1px solid #7d7d7d;
}

#contact .container textarea{
    padding: 15px;
    height: 150px;
    border: 1px solid #7d7d7d;
    outline-color: #CE1212;
    resize: vertical;
    max-height: 250px;
    min-height: 150px;
}

#contact .container button{
    background-color:#CE1212;
    color: #ffffff;
    font-family: 'Open Sans'; 
    font-size: 15px;
    line-height: normal;
    font-weight: 400;
    text-align: center;
    margin: 25px 0px 0px;
    padding: 12px 40px;
    border-width: 0px;
    /* border-color:#CE1212; */
    border-radius:  30px 30px ;
    transition: .3s;
}


#contact .container button:hover{
    background-color: #E51414;


}


/* <<<<<<<<<<<<<<<_______________Footer---------->>>>>> */


footer{
    background-image: linear-gradient(rgba(0, 0, 0, 0.596), rgba(0, 0, 0, 0.534)) , url(Images/textured-metal-background.jpg);
    background-size: contain;

    color:#ffffff;


}

footer .container{
    display: flex;
    --gap:20px;
    gap: var(--gap);

}

footer .container .about , .contact-details{
    width:calc(calc(100% - var(--gap)*2)/4);
}

footer .container .about > div{
    display: flex;
    gap: 10px;
    align-items: center;
}

footer .container .about img{
    width: 40px;
    height: 40px;
}

footer .container .about h2{
    color: #ffffff;
    font-size: 30px;
    line-height: normal;
    font-weight: 700;
    text-align: start;
}

footer .container .about h2 span{
    color: #CE1212;
}

footer .container .about p{
    color: #ffffff;
    font-size: 16px;
    line-height: normal;
    margin: 10px 0px;
    font-weight: 400;
    text-align: start;
}

footer .container .about h3{
    color: #ffffff;
    font-size: 18.72px;
    line-height: normal;
    padding:10px 0px;
    margin: 0px 0px 10px;
    font-weight: 700;
    text-align: center;
    border-bottom: 2px solid #7d7d7d;
}

footer .container .about ul{
    display: flex;
    justify-content: space-around;
}

footer .container .about ul i {
    font-size:  24px; 
    line-height: 24px;
    text-align: left;
}







footer .container .subscribe{
    width:calc(calc(100% - var(--gap)*2)/2);
    display: flex;
    flex-direction: column ;
    gap: 10px;

}

footer .container .subscribe h3{
    font-size: 18.72px;
    font-weight: 700;
    text-align: start;
}

footer .container .subscribe p{
    font-size: 16px;
    margin: 10px 0px;
    font-weight: 400;
    text-align: start;
}

footer .container .subscribe .subscribe-box{
    --gap:10px;
    display: flex;
    gap: var(--gap);

}

footer .container .subscribe .subscribe-box input{
    flex-grow: 1;
    padding: 10px;
    outline-style: none;

}
footer .container .subscribe .subscribe-box button{
    background-color:#CE1212;
    color: #ffffff;
    min-width: 110px;
    font-family: 'Open Sans'; 
    font-size: 15px;
    line-height: normal;
    font-weight: 400;
    text-align: center;
    margin:  0px;
    padding: 10px;
    border-width: 0px;
    /* border-color:#CE1212; */
    border-radius:  3px ;
    transition: .3s;
}

footer .container .subscribe .subscribe-box button:hover{
    background-color: #E51414;
}

footer .container .subscribe .quick-link ul{
    display: flex;
    flex-wrap: wrap;
    --gap: 5px;
    gap: var(--gap);
    margin-top: 10px;


    /* flex-direction: column; */
    /* list-style: decimal-leading-zero; */
}

footer .container .subscribe .quick-link ul li{ 
    width: calc(calc(100% - var(--gap))/2);
    /* background-color: blue; */
    transition: all .4s;
    padding: 5px;
}

footer .container .subscribe .quick-link ul li:hover{
    background-color: #37373f83;
    transform: translateX(10px);
}

footer .container .contact-details {

}

footer .container .contact-details h3{
    font-size: 18.72px;
    font-weight: 700;
    text-align: start;
    margin: 0px 0px 10px;
}



footer .container .contact-details ul li{
    display: flex;
    align-items: center;
    /* gap: px; */
    font-size: 16px;
    font-weight: 400;
    color: white;
    text-align: left;
    padding: 5px;
}

footer .container .contact-details ul li i{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #CE1212;
    font-size: 22px;
}