@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Momo+Trust+Display&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap');



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

.section1-bg{
    background-image: url('../images/banner.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover ;
    width: 100%;
    height: 1048px;
    position: relative;
}


.navbar1{
    
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    height: 220px;

    
}

.navbar2{
    display: flex;
    justify-content: center;
}
.links,
.sticky-links{
    width: 1170px;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    margin-top: -8px;
    


}

.about{
    width: 60px;
    text-align: center;
    margin: 60px 0;
    
    
}
.blog{
    text-align: center;
    width: 53px;
    margin: 59px 0;
    height: 200px;
   
   
}
.blog:hover .blog-white{
    opacity: 1;
    transform: scaleY(1);
}

.blog img,
.pages img{
    width: 20px;
    filter: brightness() invert(1);
}
.pages{
    text-align: center;
    width: 64px;
    margin: 59px 0;
  

  
}

.blog-white,
.sticky-blog-white{
    color: black;
    background-color: white;
    width: 210px;
    text-align: start;
    padding: 8px 15px ;
    height: 85px;
    transform: scaleY(0.8);
    opacity: 0;
    transition: 0.3s;
}

.pages-white,
.sticky-pages-white{
    color: black;
    background-color: white;
    width: 210px;
    text-align: start;
    padding: 4px 15px ;
    height: 30%;
    transform: scaleY(0.8);
    opacity: 0;
    transition: 0.3s;
}
.pages a:hover .pages-white{
    opacity: 1;
    transform: scaleY(1);
}

.about:hover hr,
.blog:hover hr,
.pages:hover hr{
    transform: scale(1);

}

.about a,
.blog a,
.pages a{
    color: white;
    text-decoration: none;
    font-family: 'Josefin Sans', sans-serif;
}

.about hr,
.blog hr,
.pages hr{
    background-color: greenyellow;
    width: 100%;
    height: 2px;
    transform: scale(0);
    transition: 0.5s;
}
.links button,
.sticky-links button{
    background-color: transparent;
    border-style: none;
    color: white;
    border-style: double;
    border-color: white;
    border-width: 2px;
     font-family: 'Josefin Sans', sans-serif;
     width: 158px;
     height: 58px;
     transition: 0.3s;
     margin: 48px 0;
     font-size: 15px;
     font-weight: 600;
}
.links button:hover{
    background-color: white;
    color: black;
}

#sticky-navbar{
    background-color: white;
    position: absolute;
    height: 120px;
    width: 100%;
    top: -20%;
    z-index: 999;

}

#blog{
    color: black;
}

.sticky-links{
    height: 150px;
    margin: 0 0; 
}

.sticky-links a{
    color: black;
    
}

.sticky-links button{
    border-color: black;
    color: black;
    margin: 15px 0 !important;
}

.sticky-links button:hover{
   background-color: black;
   color: white;
}

#sticky-img-div{
    width:7.2%;
}

#sticky-img{
    width: 100%;
    
}

.sticky-links .about,
.sticky-links .pages,
.sticky-links .blog{
    margin: 28px 0;
    
    
}
.sticky-links button{
    margin: 10px 0;
}

.sticky-links .blog img,
.sticky-links .pages img{
      filter: brightness(0) invert(0);
}





.stickyNshow{
   
    
    position: fixed !important;
    top: 0% !important;
    width: 100%;
    height: 130px;
    padding: 10px 0;
    transition: 0.5s ease-in-out;
   
    
}
#menu,
#menu2{
    display: none;
}

#sticky-blog:hover .sticky-blog-white{
    transform: scaleY(1);
    opacity: 1;
}

#sticky-pages:hover .sticky-pages-white{
    transform: scaleY(1);
    opacity: 1;
    height: 40px;
}

.unknown{
    display: none;
}

.unknown2{
    display: none;
}

/* Section 1 content Card  Start*/



.section1-card{
    background-color: white;
    width: 720px;
    padding: 80px 100px;
    justify-self: center;
    margin: 110px 0;
    
    
}

.section1-card h1{
    text-align: center;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 67px;
}

.section1-card p{
    color: rgb(155, 154, 154);
    text-align: center;
    font-size: 13.1px;
    padding: 0px 0px;
    word-spacing: 0.1px;
    letter-spacing: 1px;
    line-height: 30px;
    margin: 25px 0;
    

}


/* Section 1 content Card  End*/

/* Zig Zag Start */

.zigzag,
.zigzag2,
.zigzag3,
.zigzag4{
   background-image: url('../images/zigzag.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: 20px;
   transform: rotate(180deg);
   display: block;
   position: absolute;
   bottom: 0%;
    z-index: 0;
}


/* Zig Zag End */


/* Section 2 Start */

#section2-container{
   padding: 140px 15px 120px 15px;
}


.section2-text h1{
    font-size: 60px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;  
   
    
}

.section2-text p{
    color: rgb(156, 156, 156);
    font-size: 14px;
    letter-spacing: 0.9px;
    font-weight: 300;
    line-height: 30px;
    
}
.section2-card1{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 50px 15px 50px;
    border-style: double;
    border-width: 1px;
    color: rgb(205, 203, 203);
    border-radius: 5px;
    transition: 0.3s;
    width: 98%;
}

.section2-card1:hover{
    background-color: #78b454;
}
.section2-card1:hover h1,
.section2-card1:hover p{
    color: white;
}
.section2-card1:hover img{

  filter: brightness(0) invert(1);


}

.section2-card1 img{
    width: 50px;
    margin: 40px 0;

  filter: brightness(0) saturate(100%) invert(73%) sepia(16%) saturate(1588%) hue-rotate(53deg) brightness(95%) contrast(90%);


}



.section2-card1 h1{
    font-size: 25px;
    color: black;
     font-family: 'Josefin Sans', sans-serif;
}

#Catering{
    font-size: 24px;
}

.section2-card1 p{
    font-size: 16px;
    padding: 15px 0;
    text-align: center;
    font-family: 'Josefin Sans', sans-serif;
    color: rgb(156, 156, 156);
    font-weight: 350;
    line-height: 28px;
}
/* Section 2 End */

/* Section -------- 3 --------- Start*/

.section3-bg{
    background-image: url('../images/banner-2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 750px;
    position: relative;
    
}
.zigzag2{
    top: 0%;
    transform: rotate(0deg);
}

.section3-content{
    position: absolute;
    display: flex;
    right: 6%;
    bottom: 15%;

}

.section3-content-text{
    margin: 10px 25px;
}
.section3-content-text h1{
    text-align: end;
    color: white;
    font-size: 25px;
    font-family: 'Josefin Sans', sans-serif;
}
.section3-content-text p{
    color: rgb(203, 202, 202);
    font-size: 15px;
    font-family: 'Josefin Sans', sans-serif;
}

.section3-content-button button{
    background-color: #78b454;
    color: white;
    border-style: none;
    font-size: 40px;
    width: 80px;
    height: 80px;
    border-radius: 50px;
    
   
}






/* Section -------- 3 --------- End*/

/* Section -------- 4 --------- Start*/

#section4-container{
    padding: 130px 15px 50px 15px;
}

.section4-text h1{
    font-size: 60px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;  
   
    
    
}

.section4-text p{
    color: rgb(156, 156, 156);
    font-size: 14px;
    letter-spacing: 0.9px;
    font-weight: 300;
    line-height: 30px;
     font-family: 'Josefin Sans', sans-serif;
    
}


.container4-card1,
.container4-card2-img2,
.container4-card3-img3,
.container4-row2-card1,
.container4-row2-card2,
.container4-row2-card3{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 98%;
    height: 385px;
    display: flex;
    align-items: end;
    justify-content: end;
}

.container4-card1{
       background-image: url('../images/order-1.png');
}
.container4-card2-img2{
       background-image: url('../images/order-2.png');
}
.container4-card3-img3{
       background-image: url('../images/order-3.png');
}
.container4-row2-card1{
    background-image: url('../images/order-4.png');
}
.container4-row2-card2{
    background-image: url('../images/order-5.png');
}
.container4-row2-card3{
    background-image: url('../images/order-6.png');
}

.container4-card1-content{
    background-color:white;
    color: #78b454;
    display: flex;
    padding: 12px 20px 2px 20px;
    height: 45px;
    margin: 10px 10px;
    border-radius: 5px;
}

.container4-card1-content p{
     font-family: 'Josefin Sans', sans-serif;
     font-size: 17px;
     margin: 0 0;
    
}

.container4-card2{
    margin: 40px 0;
}

.container4-card2 h1{
     font-family: 'Josefin Sans', sans-serif;
     font-size: 24px;
}

.container4-card2 p{
     font-family: 'Josefin Sans', sans-serif;
     color: gray;
     font-weight: 350;
     padding: 7px 0;
     line-height: 30px;
}

.container4-card2 button,
#section2-container1 button,
#section4-container1 button{
    background-color: transparent;
    width: 160px;
    border-width: 1.6px;
    border-color: #88d55b;
    height: 60px;
    font-family: 'Josefin Sans', sans-serif;
    transition: 0.3s;
}

.container4-card2 button:hover,
#section2-container1 button:hover,
#section4-container1 button:hover{
    background-color: #78b454;
    color: white;
    border-style: none;
    
}



/* Section -------- 4 --------- End*/


/* Section -------- 5 --------- start*/

.section5-bg{
    background-image: url('../images/banner-3.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 800px;
    padding: 145px 0;
}


.section5-text h1{
    font-size: 60px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;  
    color: white;
    
    
}

.section5-text p{
    color: white;
    font-size: 14px;
    letter-spacing: 0.9px;
    font-weight: 300;
    line-height: 30px;
    font-family: 'Josefin Sans', sans-serif;   
}

.section5-slider1{
    display: flex;
    background-color: white;
    width: 100%;
    gap: 25px;
    padding: 50px 40px 20px  40px;
    border-radius: 10px;
    margin: 50px 0;
}

.slider1-text{
    margin: 15px 0;
}

#slider1-p1{
    font-size: 18px;
    font-weight: 600;
    font-family: 'Josefin Sans', sans-serif;
}
#slider1-p2{
    color: rgb(176, 176, 176);
    font-size: 13px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 350;
}

#slider1-p3{
    line-height: 28px;
    color: rgb(176, 176, 176);
     font-family: 'Josefin Sans', sans-serif;
     font-size: 15.5px;
     font-weight: 350;
}

/* Section -------- 5 --------- End*/

/* Section --------- 6 ----------- Start */
#section6-container{
    padding: 140px 14px;
    
}




/* Section --------- 6 ----------- End*/



/* Footer -------- Start */

.footer-bg{
    background-image: url('../images/footer-bg.png');
    display: flex;
    
    
    padding: 100px 70px;
    position: relative;
}

.relative{
    position: relative;
}

.zigzag4{
    
    width: 100%;
    transform: rotate(0deg);
    z-index: 10;
    top: 1%;
   
}

.footer-card1{
    width: 52%;

    
    margin: 0 20px;
}

#footer-card3-id{
    width: 50%;
}


.footer-card1 h1,
.footer-card-last h1{
    font-size: 19px;
    color: white;
     font-family: 'Josefin Sans', sans-serif;
     margin: 40px 0;
    
}

.footer-card1 p,
.footer-card-last p{
    margin: 10px 0;
    color: rgb(241, 239, 239);
     font-family: 'Josefin Sans', sans-serif;
     font-size: 16.5px;
     font-weight: 300;
}

.input{
    display: flex;
}

#email{
    margin: 20px 0;
    background-color: #b1f78939;
    border-style: none;
    padding: 15px 20px;
    width: 300px;

}
#email::placeholder{
    color: white;
    font-size: 13px;
}

.input button{
    width: 50px;
    margin: 20px 0;
    border-style: none;
    color: #88d55b;
}

#swiper-sec{
    padding: 80px 0 40px 0;
}

#logo-992,
#logo2-992{
    display: none;
}


@media only screen and (max-width: 1200px){



    .footer-bg{
        padding: 100px 0;
        justify-content: center;
    }

    .footer-card1{
        width: 14%;
        margin: 0 10px;
        
    }
    #footer-card3-id{
        width: 13%;
        margin: 0 10px;
    }

    .footer-card-last{
        width: 25%;
        
    }

    .section3-bg{
        height: 500px;
    }

    .container4-card1,
.container4-card2-img2,
.container4-card3-img3,
.container4-row2-card1,
.container4-row2-card2,
.container4-row2-card3{
   
    width: 98.8%;
    height: 500px;
    border-radius: 15px;
   
}

}





@media only screen and (max-width: 992px){

    #Catering{
        font-size: 22px;
    }

    


    .blog-white,
    .pages-white{
        display: none;
    }


    .sticky-blog-white{
        display: none;
    }
    .unknown{
        display: block;
    }

  


       .footer-bg{
        padding: 100px 0px;
        justify-content: start;
       flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        
        
        
    }

    .footer-card1{
        width: 40%;
        margin: 0 10px;
        
    }
    #footer-card3-id{
        width: 40%;
        margin: 0 10px;
    }

    .footer-card-last{
        width: 81%;
                
    }

    #email{
        width: 100%;
    }


  

    
#section6-img{
    display: flex;
   justify-self: center;
}

  
    /* Navbar Start  */

    .unknown992{
        display: block !important;
    }

    .navbar{
        overflow: visible;
    }

    .section1-bg{
        overflow: hidden;
    }

        #logo-992{
    display: block;
    width: 55px;
    position: absolute;
    top: 0%;
    left: 2%;
    z-index: 999;
}

#logo2-992{
    
     display: block;
    width: 55px;
    position: absolute;
    top: -10%;
    left: 2%;
    z-index: 999;
    transition: 0.1s;

}

.logo-fixed{
    position: fixed !important;
    top: 0% !important;
}

    #simple-navbar
    {
        width: 69.7%;
        justify-self: center;
         background-color: rgb(79, 79, 79) !important; 
        position: relative;
        height: 55px;
        margin-top: 10px;
        
    }

    #sticky-navbar{
        background-color: rgb(79, 79, 79);
        color: white;
        width: 80%;
        height: 65px;
        top:   0%;
        justify-self: center;
        
    }

    #menu,
    #menu2{
        position: absolute;
        right: 1.5%;
        top: 17%;
        background-color: black;
        width: 100px;
        padding: 5px;
        height: 33px;
        border-radius: 5px;
        font-size: 17px;
         font-family: 'Josefin Sans', sans-serif;
         font-weight: 600;
        color: white;
        display: block;
    }


    

   

    .links,
    .sticky-links{
        display: block;
        width: 100%;
        background-color: rgb(79, 79, 79);
        margin-top: 47px;
        opacity: 0;
        
        
        transition: 0.4s;
    }

    #sticky-blog img,
    #sticky-pages img{
        filter: brightness() invert(1) !important;
    }

   

     

     .sticky-links a{
        color: white;

     }

    

    .links-opacity1 {
        opacity: 1 !important;
        height: 100%;
        
    }

    .links-opacity2 {
        opacity: 1 !important;
        height: auto;
    }


    .blog-white,
    .pages-white{
        height:55px !important;
        width: 120px;
        font-size: 10px;
        padding: 5px 10px;
        
    }

    .blog-white p,
    .pages-white p{
        font-size: 13px;
        height: 8px;
       
    }

    

    

    #simple-img,
    #sticky-img{
        display: none;
        
    }

    
.about,
.blog,
.pages{
    margin: 0 !important;
    padding: 0 !important;
    text-align: start ;
    height: 38px !important;
}

.blog{
    text-align: center;
    width: 59px;
}
.pages{
     text-align: center;
     width: 69px;
}

.links button,
.sticky-links button{
    display: none;
}

.unknown,
.unknown2{
     margin-top: -10px;
     display: none;
   
}

.unknown p,
.unknown2 p{
    font-size: 13.5px;
    margin: 5px 20px;

}

.sticky-blog-white{
    display: none;
}
.sticky-pages-white{
    display: none;
}

.section2-text br,
.section4-text br{
    display: none;
}


    /* Navbar End */


    /* Section 1 Content  Start */

    .section1-bg{
        height: 700px;
    }

    .section1-card{
        width: 600px;
        padding: 30px 45px;
        border-radius: 10px;
    }

    .section1-card h1{
       margin:  20px 0;
    }

  

    /* Section 1 Content  End */

    /* Section4 ----------------- Start */
        .container4-card1,
.container4-card2-img2,
.container4-card3-img3,
.container4-row2-card1,
.container4-row2-card2,
.container4-row2-card3{
   
    width: 98.4%;
    height: 360px;
    
   
}

  /* Section4 ----------------- End */
}


@media only screen and (max-width: 767px){

    .section4-text h1{
    font-size: 40px; 
}

.section4-text p{
    font-size: 16px;
}



    .section2-text p{
    font-size: 12px;
    }

    .section2-text h1{
        font-size: 40px;
    }



    .section5-bg{
    padding: 100px 0;
    }

    .section5-text h1{
        font-size: 38px;
    }

    .section3-bg{
        height: 400px;
    }

      #simple-navbar,
       #sticky-navbar
    {
        width: 90%;
        
    }
   



 

    .section1-bg{
        padding: 0 20px;
        height: 580px;
    }


    .section1-card{
        width: 100%;
        padding: 30px 25px 20px 25px;
        
        margin: 130px 0;
    }

    .section1-card h1{
        font-size: 30px;
        margin: 0;
        line-height: 40px;
    }

    .section1-card p{
        margin: 20px 0;
    }


    /* Section4 -------------------- Start */

            .container4-card1,
            .container4-card2-img2,
            .container4-card3-img3,
            .container4-row2-card1,
            .container4-row2-card2,
            .container4-row2-card3{
                width: 99.5%;
                height: 550px;
           }
}

@media only screen and (max-width: 576px){

    #section6-container{
    padding: 140px 15px !important;
    
    
}



    .footer-bg{
        justify-content: start;
        padding: 100px 10px;

    }

     .footer-card1{
        width: 50%;
        margin: 0 10px;
        
    }
 

    .footer-card-last{
        width: 100%;
        margin: 0 10px;
                
    }

  

    #section6-row{
        width: 100%;
        
    }

    #section6-img{
        justify-self: center;
   
    }

   

    .section5-slider1{
        display: block;
         padding: 50px 40px 20px  40px;

    }

    .slider1-text{
        margin: 50px 0;
    }

    
    .section5-bg{
        padding: 50px 20px;
      height: auto;
    }
    
            .container4-card1,
            .container4-card2-img2,
            .container4-card3-img3,
            .container4-row2-card1,
            .container4-row2-card2,
            .container4-row2-card3{
                width: 400px;
                height: 400px;
                justify-self: center;
                
                
           }
         

           .container4-card2{
            /* height: 300px; */
            width: 400px;
            justify-self: center;
            

            
           }

}

@media only screen and (max-width: 425px){

    .section2-text h1,
    .section4-text h1,
    .section5-text h1{
        font-size: 35px;
        text-align: center;

    }

    .section2-text p,
    .section4-text p,
    .section5-text p{
        line-height: 25px;
        font-size: 15px;
        text-align: center;
    }



    
            .container4-card1,
            .container4-card2-img2,
            .container4-card3-img3,
            .container4-row2-card1,
            .container4-row2-card2,
            .container4-row2-card3{
                width: 350px;
                justify-self: center;
                
                
           }
         

           .container4-card2{
            justify-self: center;
            width: 350px;
           }

   


    .section1-card{
        margin-top: 100px;
    }
    
    #menu,
    #menu2{
        width: 90px;
        height: 30px;
        font-size: 15px;
}

}

@media only screen and (max-width: 375px){

    .section3-content-text h1{
        font-size: 19px;
    }

    .section3-content-text p{
        font-size: 13px;
    }

    .section3-content-button button{

        font-size: 30px;
    width: 70px;
    height: 70px;

    }

    .section2-card1{
          padding: 20px 10px 15px 10px;
    }

    .section2-card1 h1{
        font-size: 23px;
    }


            .container4-card1,
            .container4-card2-img2,
            .container4-card3-img3,
            .container4-row2-card1,
            .container4-row2-card2,
            .container4-row2-card3{
                width: 300px;
                height: 320px;
                justify-self: center;
                
                
           }
         

           .container4-card2{
            justify-self: center;
            width: 300px;
           }
}



@media only screen and (max-width: 320px){



     .container4-card1,
            .container4-card2-img2,
            .container4-card3-img3,
            .container4-row2-card1,
            .container4-row2-card2,
            .container4-row2-card3{
                width: 100%;
                height: 100vw;
                justify-self: center;
                
                
           }
           .padding{
            width: 100%;
            height: auto;
           }
         

           .container4-card2{
            justify-self: center;
            width: 100%;
           }

    
    .section1-card{
        margin: 20% 0;
    }

    .section1-card h1{
        line-height: 35px;
    }
    
  

}