@import url('https://fonts.googleapis.com/css2?family=Anton&family=Baloo+2&display=swap');
@import url('https://fonts.cdnfonts.com/css/circular-std');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2&family=Dancing+Script&family=Josefin+Sans&family=Lato:wght@100;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

/* font-family: 'Baloo 2', cursive; */
/* font-family:'circular Std', sans-serif;    */
/* font-family: 'Dancing Script', cursive; */
/* font-family: 'Josefin Sans', sans-serif; */
/* #E9E4F0 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
.navbar {
    
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 0 80px 0 80px;
    margin: 0 auto;
    background-color: #DACFC9;
    position: sticky;
    top: 0;
    box-shadow: rgba(0, 0, 0, 0.185) 0px 5px 5px;
}
.navbar img {
    height: 80px;
    
    cursor: pointer;
    border-style: double;
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 5px;
}
.lists ul {
    display: flex;
    list-style: none;
    gap: 15px;
    margin-top:50px;
    font-family: 'Josefin Sans', sans-serif;

}

.lists ul li a {
    text-decoration: none;
    color: black;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s ease-in-out;
}

.lists ul li a:hover {
    color: white;
    text-decoration: underline;
}

.fa-list{
    margin-top:50px;
    font-size:1.5rem;
    cursor: pointer;
}
.fa-list:hover{
    color:white;
    transition:0.3s ease-in-out;
}
.secondpart {
    width:100%;
    background-color:#000000e5;
    position:absolute;
    top:0;
    right:0;
    padding:20px;
    display:none;
    
}
.fa-xmark{
    color:white;
    float:right;
    font-size:1.4rem;
    padding:10px;
}
.fa-xmark:hover{
    color:rgb(255, 3, 3);
    border-radius:50%;
    border-bottom:1px solid red;
    text-shadow: 3px 3px 20px rgb(175, 8, 8),
                -2px 1px 30px rgb(175, 8, 8);
    transition: 0.3s ease-in-out;
}
.secondlists{
    display:flex;
    justify-content:center;
    align-items: center;
    font-family: 'Josefin Sans', sans-serif;
   
}
.secondlists ul{
    list-style: none;
}

.secondlists ul li{
   margin: 68px 0px 25px 0px;
}

.secondlists ul li a {
    text-decoration: none;
    color:white;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s ease-in-out;

}
.secondlists ul li a:hover {
    color: rgb(0, 0, 0);
    text-shadow: 3px 3px 20px #ffffff,
                -2px 1px 30px #ffffff;
} 




/* finish */

.afternavbar {
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    background-color: #DACFC9;

}
.bodybar {
    height:400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    margin-top: 30px;
    width: 100%;
    margin-bottom:10px;
}

.bodybar .h1-container {
    width: 100%;
   
}

.bodybar h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 3rem;
    text-transform: uppercase;
    padding: 5px;
    letter-spacing: 3px;
    width: 100%;
    

}
.bodybar p {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.2rem;

}
.hidebar {
    display: none;
}
.callbtn {
    font-family: 'Josefin Sans', sans-serif;
    background-color: rgb(27, 15, 15);
    color: white;
    font-size: 20px;
    padding: 10px;
    padding-right: 20px;
    padding-left: 20px;
    border: 1px solid white;
    transition: 0.4s ease-in-out;

}
.callbtn:hover {
    color: rgb(211, 211, 211);
    border: 1px solid rgb(27, 15, 15);
    color: rgb(27, 15, 15);
    background: white;
    transition: 0.4s ease-in-out;

}
/* firstsectionstarts */
.firstsection {
    background-image: url("gigi.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    
    background-attachment: fixed;
    
    
}
.firstsectioncontent {
    width: 50%;
    padding: 20px;
    padding-left:100px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    
}
.firstsectioncontent h1 {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    margin-top: 100px;
    color: black;
    text-decoration: underline;

}
.firstsectioncontent p {
    font-family: 'Baloo 2', cursive;
    letter-spacing: 1px;
    width:fit-content;
    margin-top: 30px;
    margin-bottom: 60px;
    color: white;

}
/* secondsectionstarts */
.secondsection {
    display: flex;
    justify-content: center;
    background-color: rgb(184, 180, 180);
    text-align: center;
    gap: 20px;
    padding:10px;

}
.secondsection img {
    
    height:335px;
}
/* .secondsectioncontainer {
    width:100%;
} */
.secondsectioncontainer h1 {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    margin-top: 30px;
    color: black;
    text-decoration: underline;
    text-align: center;
}

.aboutinfo {
    display: flex;
    margin-top: 100px;
    justify-content: space-around;
    gap:50px;
    max-width: 1200px;
    margin:0 auto;
    margin-top:50px;
}

.aboutinfo p {
    font-family: 'Baloo 2', cursive;
    letter-spacing: 1px;
   
}

#learnmore {
    float:right;
    margin-right:200px;
    margin-top:20px;
}



/* article */
article{
    background: linear-gradient(to bottom, #eef2f3, #8d8d8d); 
    position:relative;
    }
article h1{
        text-transform: uppercase;
        font-family: 'Josefin Sans', sans-serif;
        padding-top: 100px;
        color: black;
        text-decoration: underline;
        text-align: center;
         
    }
 .article{
        display:flex;
        flex-wrap:wrap;
        max-width: 1300px;
        margin:0 auto;
        gap:20px;
        margin-top:40px;
        justify-content: center;
        padding-bottom:3%;
    
       
    }
    .boxes {
        width: 300px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        text-align: center;
        padding: 5px;
        padding-bottom: 3%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        background-color: white;
        border-radius: 10px;
    }
    
    
    .boxes:nth-child(n+5){
        display:none;
    }
    .boxes:hover{
        box-shadow: rgba(0, 0, 0, 0.623) 0px 3px 8px;
    
    }
    .boxes img{
        height:300px;
        width:100%;
    }
    .boxes h5{
        font-family: 'Dancing Script', cursive;
        font-size:1.2rem;
        letter-spacing:2px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.247);
    }
    .boxes button{
        width: 110px;
        height: 30px;
        background: black;
        color:white;
        font-family: 'Josefin Sans', sans-serif;
         
    }
    .boxes button:hover{
        background: black;
        font-weight: bolder;
        width:130px;
        transition:0.2s ease-in-out;
        color:rgb(212, 255, 212);
        text-shadow: 3px 3px 20px #ffffff,
        -2px 1px 30px #ffffff;
        border:2px solid rgb(212,255,212);

    }
    
    .loadproduct {
        font-family: 'Josefin Sans', sans-serif;
        background-color: rgb(27, 15, 15);
        color: white;
        font-size: 20px;
        padding: 10px;
        padding-right: 20px;
        padding-left: 20px;
        border: 1px solid white;
        transition: 0.4s ease-in-out;
        display: block;
        margin:0 auto;
    }
    
    .loadproduct:hover {
        color: rgb(211, 211, 211);
        border: 1px solid rgb(27, 15, 15);
        color: rgb(27, 15, 15);
        background: white;
        transition: 0.4s ease-in-out;
    
    }
    .fa-solid {
        color:rgb(121, 112, 112);
       
    }







/* cart */
.cart{
    position: absolute;
  top: 10%;
  left: 5%;
  transform: translate(-50%, -50%);
    font-size:1.5rem;
    display:flex;
    gap:40px;
    
    
}
.fa-cart-shopping{
    color:black;
    cursor:pointer;
    
}

.closethis{ 
    position:absolute;
    height:100vh;
    top:0;
    right:0;
    background-color:#000000e5;
    color:white;
    width:100%;   
    display:none;
    align-items: center;
}
.addtocart{
    display:flex;
    justify-content: space-between;
   

}
.items h1, .price h1{
    color:white;
    padding-top:10px;
    font-family: 'Dancing Script', cursive;
    text-transform:none;
    text-decoration:none;
    padding-bottom:20px;
    
}
 .items ,  .price{
    width:50%;
    margin:50px;
    line-height:30px;
    margin-bottom:300px;
    font-family: 'Josefin Sans', sans-serif;
}
.total{
    padding:20px;
    margin-bottom:30px;
}



.kxa{
    padding-bottom:10px;
    margin-bottom:10px;
    color:red;
}
.clearall{
    font-family:'Courier New', Courier, monospace;
    transition:0.2s ease-in-out;
    margin-top:10px;
    margin-right:10px;
    cursor: pointer;
}
.clearall:hover{
    color:red;
    font-weight:bold;
}

/* images */
.gallery {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    color: black;
    text-decoration: underline;
    padding: 30px;
    padding-top:100px;
    text-align: center;
    background: linear-gradient(to top, #eef2f3, #8d8d8d); 
}

.gallery h1 {
    margin-bottom: 40px;
}

.images img {
    height: 100%;
    width: 100%;
    border-radius: 8px;

}

.images img:hover {
    transform: scale(1.05);
    transition: 0.3s ease-in-out;
}

.images {
    display: grid;
    grid-template-areas:
        "p1 p2 p2 p3"
        "p6 p6 p7 p7"
        "p5 p5 p8 p8";
    grid-gap: 6px;
    max-width: 1200px;
    margin: 0 auto;


}

.image1 {
    grid-area: p1;

}

.image2 {
    grid-area: p2;

}

.image3 {
    grid-area: p3;

}

.image4 {
    grid-area: p4;

}

.image5 {
    grid-area: p5;

}

.image6 {
    grid-area: p6;

}

.image7 {
    grid-area: p7;

}

.image8 {
    grid-area: p8;

}

.image9 {
    grid-area: p9;
}









/* contact starts */

.contacts {
    height: 70vh;
    display: flex;
    text-align: center;
    flex-direction: column;
    font-family: 'Josefin Sans', sans-serif;
    background-color: #DACFC9;
    gap: 100px;
}

.contacts h1 {
    text-transform: uppercase;
    margin-top: 70px;
    text-decoration: underline;
}

.remaining p {
    margin: 20px 0px 20px 0px;
}

.info {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.kxa {
    display: flex;
    justify-content: center;
    gap: 50px;

}

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

.kxa a:hover {
    color: white;
}

.icons {
    margin-top: 40px;
    display: flex;
    gap: 15px;
    justify-content: center;
    cursor: pointer;
}

.fa-brands:hover {
    color: white;
}

footer {
    height: 30vh;
    background-color: rgba(0, 0, 0, 0.925);
    color: white;
    display: flex;
    flex-direction: column;
    font-family: 'Josefin Sans', sans-serif;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.sakyo {
    display: flex;
    gap: 10px;

}

.sakyo a {
    color: white;
}

.sakyo a:hover {
    color: rgb(0, 0, 0);
    text-shadow: 3px 3px 20px #ffffff,
        -2px 1px 30px #ffffff;
}









































@media (max-width:892px) {
    .lists{
        display:none;
    }
    .aboutinfo{
        flex-direction:column;
        align-items: center;
        margin-top:1%;
        width:50%;
        margin:0 auto;
    }
    #learnmore{
        margin:0;
        float:none;
        margin-top:3%;
    }
   
    .hello{
        display:none;
    }
    .secondsection img{
        height:200px;
    }
}


@media(max-width:690px){
    .firstsectioncontent{
        width:75%;
    }
}



@media(max-width:340px){
    .navbar img{
        height:40px;

    }
    .navbar{
        display:flex;
        justify-content: space-around;
        padding:0;
    }
    .bodybar h1{
        font-size:1rem;
    }
    .bodybar p {
        font-size:0.71rem;
    }
    .callbtn{
        font-size:8px;
    }
    .firstsectioncontent{
        width:100%;
        padding:4px;
    }
    .secondsection img{
        padding-top:5px;
        height:100px;
    }
}




@media (min-width:892px) {
    .fa-list{
        display:none;
    }
}