body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: rgb(189, 65, 45);  
    
     
}  
   
.logo > img { 
   display: block;
   width: 1000px;  
   height: 300px;
   margin-left: auto;
   margin-right: auto;
   padding-top: 20px;  
    
}   
@media (max-width: 786px){
    .logo > img {
        display: block;
        width: 280px;   
        height: 150px;
        padding-left: 5px;    
        padding-right: 5px;        
             
      }   
  }     
  .xmas > img {
    display: flex;
    height: 100px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    text-wrap: wrap;
      
  }
  @media(max-width:786px) {
    .xmas > img {
        height: 40px;
        width: auto;
    }
}

.border > img {
    width: 110%;
    height: 350px;
    object-fit: cover;    
    text-align: center;
    image-rendering: crisp-edges;    
    }   
 @media (max-width: 786px){
    .border > img {
        width: 100%;
        height: 200px;
    }
 }  
   
#main  h1 {
   font-family: sacramento;   
    color: rgb(246, 231, 245);
    text-align: center;
    font-size: 60px;   
    text-wrap: wrap;    
    text-shadow: 6px 6px 8px rgb(10, 77, 52);        
}
@media (max-width: 786px){
    #main  h1 {
        font-size: 30px;      
    }
}
h3 {
    font-family: sacramento;   
    color: rgb(246, 231, 245);
    text-align: center;
    font-size: 30px;   
    text-wrap: wrap;
    text-shadow: 6px 6px 8px rgb(10, 77, 52); 
}
     .holiday {
   display: block;   
   text-align: center;
   align-items: center;
   
}
.holiday img {
    width: 800px;  
    text-wrap: wrap;
   
}
@media (max-width: 786px) {
    .holiday img {
        height: 100px;
        width: 300px;
    }
}
     h4 {
    font-size: 50px;
    font-family: sacramento;
    color: rgb(59, 240, 177);
    text-align: center;
    text-shadow: 6px 6px 8px rgb(10, 77, 52); 
}
@media (max-width: 786px) {
    h4 {
        font-size: 25px;
    }
}
   

.winter {
    display:flex;
    
   
}   

.winter img {    
    width: 300px;
    height: auto; 
    margin-left: auto;
    margin-right: auto;
    text-wrap: wrap;
    margin-bottom: 20px;
}
.winter img:hover {    
    width: 350px;
    height: auto;

}
@media(max-width:786px){
    .winter img {
        width: 250px;
        height: auto;
        a:hover: 300px;
    }
}
.winter1 {
    display: flex;  
    
}   

.winter1 img {    
    width: 300px;
    height: auto; 
    margin-left: auto;
    margin-right: auto;
    text-wrap: wrap;
    gap: 20px;
   
} 
.winter1 img:hover {    
    width: 350px;
    height: auto;
}
@media(max-width:786px){
    .winter1 img {
        width: 250px;
        height: auto;
        a:hover: 300px;
    }
}


.navigation > ul {  
    display: flex;   
    
}
ul > li {
    margin-left: auto;  
    margin-right: auto;
    list-style: none;

}
li > a {
    color: rgb(245, 249, 250);
    font-size: 30px;
    text-decoration: none;
    text-wrap: wrap; 
    font-family: Dosis; 
   
}
@media (max-width: 786px){
    li > a {
        font-size: 20px;
        margin-right: 15px;
    }

}
li > a:hover {
    color: rgb(243, 162, 70);    
    font-size: 45px;
    text-decoration: none;
    text-wrap: wrap;

}
@media (max-width: 786px){
li > a:hover {
    font-size: 25px;

}    
}

.container {   
    display: flex;   
    width: 100%;  
    height: auto;    
    flex-wrap: wrap;      
    justify-content: space-evenly;
}   


.box1 > img {
    display: flex; 
    width: 200px;
    height:250px;   
    border-radius: 10%;
    border-color: rgb(244, 235, 237);
    box-shadow: 6px 6px 8px pink;  
    margin-top: 30px;  
} 
@media (max-width: 786px){
    .box1 > img {
        width: 150px;
        height: 200px;
        margin-left: 8px;
}
}
 
.box2 > img {
    display: flex; 
    width: 200px;
    height:250px;  
    border-radius: 10%;
    border-color: rgb(237, 228, 230);
    box-shadow: 6px 6px 8px pink;  
    margin-top: 30px;
    margin-bottom: 15px;
    
}
@media (max-width: 786px){
    .box2 > img {
        width: 150px;
        height: 200px;
        margin-left: 8px;
        
}
}
    .para > p {            
        font-family: dosis;
        text-align: justify;        
        flex-wrap: wrap;
        color: rgb(214, 222, 214);     
        margin-top: 10px;
        width: 500px;
        height: auto;
        font-size: 22px;   
        padding: 20px;
    }           
    
    @media (max-width: 786px){
        .para > p {            
            width: 270px;           
            font-size: 17px;  
            padding: 30px;   
        }
    }
    .box3 > img {
        display: flex; 
        width: 200px;
        height:250px;  
        border-radius: 10%;
        border-color: rgb(237, 228, 230);
        box-shadow: 6px 6px 8px pink;  
        margin-top: 30px;
        margin-bottom: 15px;
    }
       
       @media (max-width: 786px){
        .box3 > img {
            width: 150px;
            height: 200px;      
            margin-left: 8px;              
    }
    }   
  
    .box4 > img {
        display: flex; 
        width: 200px;
        height:250px;  
        border-radius: 10%;
        border-color: rgb(237, 228, 230);
        box-shadow: 6px 6px 8px pink;  
        margin-top: 30px;
        margin-bottom: 15px;
    }   
   
   @media (max-width: 786px){
    .box4 > img {
        width: 150px;
        height: 200px;  
        margin-left: 8px;       
}
}

.footer > div {     
    display: flex;   
    background-color: rgb(243, 129, 148);
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    justify-content: space-evenly;
    font-size: 60px;
    font-family: sacramento;
    color: rgb(234, 237, 234);   
    object-fit: cover;
    margin-top: 20px;
}
@media (max-width: 786px){
    .footer > div {
        font-size: 32px;   
      

    }       
}

.goodies-container {     
    display: flex;   
    object-fit: cover;
    width: 100%;  
    height: auto;
    justify-content: space-evenly;   
    flex-wrap: wrap;    
    margin-top: 30px;         
      
 }

.bake1 > img {
    width: 250px;    
    height: 300px;   
    margin-bottom: 30px; 
    border: rgb(237, 157, 170) solid;
}
@media (max-width: 786px){
    .bake1 > img{
        width: 150px;
        height: 190px;
      
    }       
}
.bake2 > img {
    width: 250px;
    height: 300px;
    border: rgb(237, 157, 170) solid;
}
@media (max-width: 786px){
    .bake2 > img{
        width: 150px;
        height: 190px;
       
    }

}
.bake3 > img {
    width: 300px;
    height: 300px;
    border: rgb(237, 157, 170) solid;
    margin-bottom: 30px
}
    
@media (max-width: 786px){
    .bake3 > img{
        width: 150px;
        height: 190px;   
       
    }   
}
.bake4 > img {
    width: 250px;
    height: 300px;
    border: rgb(237, 157, 170) solid;
}
@media (max-width: 786px){
    .bake4 > img{
        width: 150px;
        height: 190px;
      
    }
}
.bake5 > img {
    width: 250px;
    height: 300px;
    border: rgb(237, 157, 170) solid;
    ;
}
@media (max-width: 786px){
    .bake5 > img{
        width: 150px;
        height: 190px;  
        margin-bottom: 10px; 
       
    }
}
.list {
    display: flex;
    justify-content: center;      
    width: 100%;
    margin-top: -2%;    
}

.list > h4 {        
    font-size: 48px;   
    color: rgb(251, 246, 246); 
    font-family: sacramento;
    text-decoration: underline rgb(244, 194, 202);
    text-align: center;
    justify-items: center;
}
@media (max-width: 786px){
.list > h4 {
    font-size: 28px;
}
}
.detail1 > p {
    display: flex;
    width: 600px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 20px;
    font-size: 25px;
    color: cornsilk;
    font-family: dosis;  ;
    text-align: center;
    justify-items: center;
}

@media (max-width: 786px) {
    .detail1 > p {
        width: 330px;
       font-size: 18px;
       padding-left: 15px;
       padding-right: 15px;
      
}
}
.gallery {     
    display: flex;   
    width: 100%;  
    height: auto;    
    flex-wrap: wrap;      
    }
   
    .gallery > div {      
        justify-items: center;
        margin: 0 auto;
        margin-bottom: 10px;     
        
    }
    .gallery > div > img {
        margin: 0px 30px 0px;
    }

.cake1 > img {      
   display: flex;
   width: 230px;
   height: 230px;    
   border-radius: 10%;
   border-color: rgb(244, 235, 237);
   box-shadow: 6px 6px 8px pink; 
             
}
@media (max-width: 786px) {
    .cake1 > img {   
    width: 200px;
    height: 200px;       
    }
}

.cake2 > img {
    display: flex;
    width: 230px;
    height: 230px;   
    border-radius: 10%;
    border-color: rgb(244, 235, 237);
    box-shadow: 6px 6px 8px pink;     
}
@media (max-width: 786px) {
    .cake2 > img {   
    width: 200px;
    height: 200px;       
    }
}
.cake3 > img {      
    display: flex;
    width: 230px;
    height: 230px;    
    border-radius: 10%;
    border-color: rgb(244, 235, 237);
    box-shadow: 6px 6px 8px pink;           
 }     
 @media (max-width: 786px) {
    .cake3 > img {   
    width: 200px;
    height: 200px;       
    }
}
   
 .cake4 > img {      
    display: flex;
    width: 230px;
    height: 230px;    
    border-radius: 10%;
    border-color: rgb(244, 235, 237);
    box-shadow: 6px 6px 8px pink;              
 }   
 @media (max-width: 786px) {
    .cake4 > img {   
    width: 200px;
    height: 200px;       
    }
}  
 .cake5 > img {      
    display: flex;
    width: 230px;
    height: 230px;    
    border-radius: 10%;
    border-color: rgb(244, 235, 237);
    box-shadow: 6px 6px 8px pink;           
 }
 @media (max-width: 786px) {
    .cake5 > img {   
    width: 200px;
    height: 200px;       
    }
}
 .cake6 > img {      
    display: flex;
    width: 230px;
    height: 230px;    
    border-radius: 10%;
    border-color: rgb(244, 235, 237);
    box-shadow: 6px 6px 8px pink;           
 }
 @media (max-width: 786px) {
    .cake6 > img {   
    width: 200px;
    height: 200px;       
    }
}

.cake7 > img {      
    display: flex;
    width: 230px;
    height: 230px;    
    border-radius: 10%;
    border-color: rgb(244, 235, 237);
    box-shadow: 6px 6px 8px pink;           
 }

@media (max-width: 786px) {
    .cake7 > img {
        width: 200px;
        height: 200px;      
    }
}
.cake8 > img {      
    display: flex;
    width: 230px;
    height: 230px;    
    border-radius: 10%;
    border-color: rgb(244, 235, 237);
    box-shadow: 6px 6px 8px pink;           
 }
@media (max-width: 786px) {
    .cake8 > img {
        width: 200px;
        height: 200px;
        margin-right: 25px;
    }
}

   .cake9 > img {      
        display: flex;
        width: 230px;
        height: 230px;    
        border-radius: 10%;
        border-color: rgb(244, 235, 237);
        box-shadow: 6px 6px 8px pink;           
     }
@media (max-width: 786px) {
    .cake9 > img {
        width: 200px;
        height: 200px;     
        
    }
}
.cake10 > img {
    display: flex;
    width: 230px;
    height: 230px;   
    border-radius: 10%;
    border-color: rgb(244, 235, 237);
    box-shadow: 6px 6px 8px pink;  
    
}
@media (max-width: 786px) {
    .cake10 > img {
        width: 200px;
        height: 200px;        
    }
}

 .kid cake1 > img {      
    display: flex;
    width: 230px;
    height: 230px;    
    border-radius: 10%;
    border-color: rgb(244, 235, 237);
    box-shadow: 6px 6px 8px pink;           
 }
 @media (max-width: 786px) {
    .kid cake1 > img {
        width: 200px;
        height: 200px;        
    }
}
 .kid cake2 > img {      
    display: flex;
    width: 230px;
    height: 230px;    
    border-radius: 10%;
    border-color: rgb(244, 235, 237);
    box-shadow: 6px 6px 8px pink;           
 }
@media (max-width: 786px){
    .kid cake2 > img {
        width: 200px;
        height: 200px;
        
    }
}
  
.gallery1 {     
    display: flex;  
    width: 100%;          
    justify-content: space-evenly;   
    flex-wrap: wrap;       
    margin: 0 auto;    
   
     }

.list2 > h4 {
    display: flex;   
    justify-content: center;
    font-family: sacramento;
    color: rgb(248, 246, 246);
    text-decoration: underline rgb(247, 182, 193);
    width: 100%;
    font-size: 45px;
    margin-bottom: 35px;
    
   
}
@media (max-width: 786px) {
    .list2 > h4 {  
        font-size: 30px; 
                

    }       
}
.detail2 > p {
    display: flex;
    width: 600px;
    height: auto;
    margin: 0 auto;   
    font-size: 25px;
    color: cornsilk;
    font-family: dosis;
    text-align: center;
    margin-bottom: 30px;
    text-align: center;
    justify-items: center;

}   

@media (max-width: 786px) {
    .detail2 > p {
        width: 350px;
        font-size: 18px;
        text-align: center;
        align-items: justify;
        padding-left: 5px;
        padding-right: 15px;
       
    }
}
.cake11 > img{
    display: flex;
    width: 200px;
    height: 200px;   
    border: rgb(241, 142, 208) solid;  
    margin-bottom: 30px;  
}
@media (max-width: 786px) {
    .cake11 > img {       
        width: 150px;
        height: 140px; 
        margin-left: 5px;

 }    
} 
.cake12 > img {
    display: flex;
    width: 200px;
    height: 200px;
    border: rgb(241, 142, 208) solid;  
    margin-bottom: 30px;
}
@media (max-width: 786px) {
    .cake12 > img {       
        width: 150px;
        height: 140px; 

 }    
} 
.cake13 > img {
    display: flex;
    width: 200px;
    height: 200px;
    border: rgb(241, 142, 208) solid;  
    margin-bottom: 30px;
}
@media (max-width: 786px) {
    .cake13 > img {       
        width: 150px;
        height: 140px;  
        margin-left: 5px;

 }    
} 
.cake14 > img {
    display: flex;
    width: 200px;
    height: 200px;   
    border: rgb(241, 142, 208) solid;
    margin-bottom: 30px;
}
@media (max-width: 786px) {
    .cake14 > img {  
        width: 150px;
        height: 140px;        
 }    
} 
.cake15 > img {
    display: flex;
    width: 200px;
    height: 200px;    
    border: rgb(241, 142, 208) solid; 
    margin-bottom: 30px;
   
}
@media (max-width: 786px) {
    .cake15 > img {       
       width: 150px;
       height: 140px;
       margin-left: 5px;
 }    
} 

.cake16 > img {
    display: flex;
    width: 200px;
    height: 200px;   
    border: rgb(241, 142, 208) solid;  
    margin-bottom: 30px;
   
}
@media (max-width: 786px) {
    .cake16 > img {       
        width: 150px;
        height: 140px; 

 }    
} 
.gallery2 {     
    display: flex;   
    width: 100%;      
    justify-content: center;
    flex-wrap: wrap;     
    
     }
.gallery2 > div {   
    margin: 0px auto;
    margin-bottom: 10px;   
    }  
    
.list3 {
    display: flex;
    justify-content: center;
    font-family: sacramento;
    color: rgb(248, 246, 246);
    text-decoration: underline rgb(244, 194, 202);
    width: 100%;
    font-size: 45px;    
    
}
@media (max-width:786px){
.list3 {
    font-size: 30px;
    width: 90%;
    margin-left: 20px;
    
}
}  
.detail3 > P {
    display: flex;
    width: 800px;
    height: auto;
    margin: 0 auto;   
    font-size: 25px;
    color: cornsilk;
    font-family: Dosis;
    text-align: center;
    justify-content: center;
    margin-bottom: 30px;
}

@media (max-width: 786px) {
    .detail3 > p {
        width: 300px;
        font-size: 18px;       
       padding: 10px;       
   
    }
}
.cake17> img {
    display: flex;
    width: 200px;
    height: 200px;   
    border: rgb(241, 142, 208) solid;    
}
@media (max-width: 786px) {
    .cake17 > img {
        width: 150px;
        height: 150px;
        margin-left: 5px;
    }
} 

.cake18 > img {
    display: flex;
    width: 200px;
    height: 200px;    
    border: rgb(241, 142, 208) solid; 
}
@media (max-width: 786px) {
    .cake18 > img {
        width: 150px;
        height: 150px;
        
       
    }
}   

.cake19 > img {
    display: flex;
    width: 200px;
    height: 200px;    
    border: rgb(241, 142, 208) solid; 
   
}
@media (max-width: 786px) {
    .cake19 > img {
        width: 150px;
        height: 150px;
        margin-left: 5px;
    }
}   

.cake20 > img {
    display: flex;
    width: 200px;
    height: 200px;   
    border: rgb(241, 142, 208) solid;    
   
}
@media (max-width: 786px) {
    .cake20 > img {
        width: 150px;
        height: 150px;
      
    }
}   

.cake21 > img {
    display: flex;
    width: 200px;
    height: 200px;    
    border: rgb(241, 142, 208) solid;     
   
}
@media (max-width: 786px) {
    .cake21 > img {
        width: 150px;
        height: 150px;
        margin-left: 15px;
    }
}   
.slide-bar1 {
    display: flex;         
    flex-wrap: wrap;       
    margin: 0 auto;    
    gap: 70px;    
    margin-top: 50px;
    padding-top: 50px;
   align-items: center;
   justify-content: center;    
   
  }    

.slide1 > img {     
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: rgb(17, 79, 57) solid;
}
.slide2 > img {    
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: rgb(17, 79, 57) solid;
}  
.slide3 > img {   
    width: 300px;
    height: 300px;
    border-radius: 50%;   
    border: rgb(17, 79, 57) solid;
    
}
.slide-bar2 {
    display: flex;         
    flex-wrap: wrap;       
    margin: 0 auto;    
    gap: 70px;    
    margin-top: 50px;
   align-items: center;
   justify-content: center;     
   
  }    
.slide4 > img {   
    width: 500px;
    height: 500px;     
    border: rgb(17, 79, 57) solid;
    box-shadow: 6px 6px 8px rgb(183, 65, 85);      
    
}
@media (max-width: 786px) {
.slide4 > img {  
    width: 300px;
    height: 300px;     
    border: rgb(17, 79, 57) solid;
    box-shadow: 6px 6px 8px rgb(183, 65, 85); 
}
}

.slide5 > img {   
    width: 500px;
    height: 500px;     
    border: rgb(17, 79, 57) solid;
    box-shadow: 6px 6px 8px rgb(183, 65, 85); 
}
@media (max-width: 786px) {
    .slide5 > img {  
        width: 300px;
        height: 300px;     
        border: rgb(17, 79, 57) solid;
        box-shadow: 6px 6px 8px rgb(183, 65, 85); 
    }
    }
.slide6 > img {   
    width: 500px;
    height: 500px;     
    border: rgb(17, 79, 57) solid;
    box-shadow: 6px 6px 8px rgb(183, 65, 85);     
}
@media (max-width: 786px) {
    .slide6 > img {  
        width: 300px;
        height: 300px;     
        border: rgb(17, 79, 57) solid;
        box-shadow: 6px 6px 8px rgb(183, 65, 85); 
    }
    }
.slide-para > p {
    font-display: flex;
    font-size: 25px;
    color: azure;
    font-family: dosis;
    text-align: center;
   align-items: justify;
    margin: 0 auto;
    margin: 30px 30px ;
}
@media (max-width: 786px) {
    .slide-para > p {
        font-size: 18px;    
        text-align: justify;   
        margin: 30px 30px;
        padding-left: 30px;
        padding-right: 30px;
        text-align: center;
        align-items: justify;
    }   

}
.contact-details {
    display: flex;
    gap: 200px;    
    padding-bottom: 1;

   
}
@media (max-width: 786px) {
    .contact-details {
        display: flex;
        gap: 80px;   
        
    }
}
.button1 {
   
    width:70px;
    height: 70px;    
  
}
@media(max-width: 786px) {
    .button1 {
        width: 40px;
        height: 40px;       
        padding-left: 55px;
    }
}

.button3 {
    display: flex;
    width: 70px;
    height: 70px;   
    border-radius: 50%;
    padding-bottom: 50px;
    
}
@media(max-width: 786px) {
    .button3 {
        width: 40px;
        height: 40px;
        padding-left: 55px;
        
    }
}
p4 {
    display: flex;
    font-family: sacramento;
    color: antiquewhite;
    font-size: 40px;
    font-weight: bold;
    padding-bottom: 50px;
}
@media(max-width: 786px) {
    p4 {             
        font-size: 35px;
        display: flex;
        padding-top: 100px;
        
    }
} 
.fa-square-instagram {
    font-size: 70px;
    color: rgb(141, 16, 16);
    margin: 10px 10px 30px 15px; 
    
}

.fa-border-all {
    font-size: 70px;
    color:rgb(17, 144, 55);
    margin: 10px 30px 30px 15px;  
   
}