/* main paragraph header  */
@import url('https://fonts.googleapis.com/css2?family=Playwrite+DE+Grund:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&display=swap');

h1, h2, h3, h4, h5, h6 {
    font-family: "Playwrite DE Grund", cursive;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: bold;
}
p{
    font-family: "Carlito", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
}
button{
    font-family: "Playwrite DE Grund", cursive;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: bold;
}
span{
    font-family: "Carlito", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
}
.main-header-img{
    width: 100%;
    height: 50%
}
@media(max-width: 595px){
    .main-header-img{
        height: 30%
    }  
}
.paragraph{
    width: 80%;
    padding: 2%;
    padding-left: 10%;
}

/* *********************************************** */
/* shopping cart */
.shop-card{
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}
.img-card{
    background: #efd4b2;
    /* padding: 3%; */
    margin: 8%;
    border-radius: 10px;
    height: auto;
    padding-bottom: 5%            
}
.img-card img{
    width: 100%;
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
}
.buy-now{
    background: #ff9800;
    padding: 3%;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    color: #000;
}
@media(max-width: 755px){
    .shop-card{
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }
}
@media(max-width: 500px){
    .shop-card{
        display: grid;
        grid-template-columns: repeat(1, 1fr)
    }
}
/* ************************************************** */
/* rudraksha  */
.rudraksha{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.product-img-card{
    width: 100%;
    height: 50%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}
.rudraksha-card{
    background: rgb(240 139 122 / 47%);
    margin: 10%;
    border-radius: 10px;
    margin-bottom: 20%;
    height: 70%;
}
.product-cart{
    background: #d54746;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 3%;
    border-radius: 5px
}
.product-heading{
    font-size: 18px;
    margin-bottom: 5%;
}
.product-price{
    font-weight: bold;
}
.rudraksha-card-section{
    background: #fdfdf7;
    padding: 2%;
    box-shadow: 10px 0px 20px 10px gray;
    padding-bottom: 5%;
}
.view-more{
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    background: #d54c4b;
    padding: 1%;
    border-radius: 5px;
}
@media(max-width:776px){
    .rudraksha{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width:500px){
    .rudraksha{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}
/* *********************************************** */
/* gamestone  */
.gemstone-card-section{
    background:#fdfdf7;
    padding: 5%;
    box-shadow: 10px 0px 20px 10px gray;
    margin-top:3%;
    padding-bottom: 5%
} 
.gemstone{
    display: grid;
    grid-template-columns: repeat(4, 1fr) 
}  
.gemstone-card{ 
    background: #d8dae1;
    margin: 10%;
    border-radius: 10px;
    margin-bottom: 20%
}
.gemstone-img-card{
    width: 100%;
    height: 50%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
} 
.gemstone-cart{
    background: #424f5e;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 3%;
    border-radius: 5px;
}
.view-more-stones{
    background: #424f5e;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 1%;
    border-radius: 5px;
    font-size: 18px
}  
@media(max-width:776px){
    .gemstone{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width:500px){
    .gemstone{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}
/* ***********************************  */
/* god idol */
.god-card-section{
    background:#fdfdf7;
    padding: 5%;
    box-shadow: 10px 0px 20px 10px gray;
    margin-top:3%;
    padding-bottom: 6%
} 
.god{
    display: grid;
    grid-template-columns: repeat(4, 1fr) 
}  
.god-card{ 
    background: #b98989;
    margin: 5%;
    border-radius: 10px;
    margin-bottom: 20%
}
.god-img-card{
    width: 100%;
    height: 52%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
} 
.god-cart{
    background: #682e2d;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 3%;
    border-radius: 5px;
}
.view-more-god{
    background: #682e2d;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 1%;
    border-radius: 5px;
    font-size: 18px
} 
@media(max-width:776px){
    .god{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width:500px){
    .god{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
} 
/* ************************************************  */
/* yantras */
.yantra-card-section{
    background:#fdfdf7;
    padding: 5%;
    box-shadow: 10px 0px 20px 10px gray;
    margin-top: 3%;
    padding-bottom: 5%
} 
.yantra{
    display: grid;
    grid-template-columns: repeat(4, 1fr) 
}  
.yantra-card{ 
    background: #bcc1b4;
    margin: 5%;
    border-radius: 10px;
    margin-bottom: 20%
}
.yantra-img-card{
    width: 100%;
    height: 60%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
} 
.yantra-cart{
    background: #203220;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 3%;
    border-radius: 5px;
}
.view-more-yantra{
    background: #203220;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 1%;
    border-radius: 5px;
    font-size: 18px
} 
@media(max-width:776px){
    .yantra{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width:500px){
    .yantra{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
} 
/* *****************************************   */
/* bracelet */
.bracelete-card-section{
    background:#fdfdf7;
    padding: 5%;
    box-shadow: 10px 0px 20px 10px gray;
    margin-top: 3%;
    padding-bottom: 5%
} 
.bracelete{
    display: grid;
    grid-template-columns: repeat(4, 1fr) 
}  
.bracelete-card{ 
    background: rgb(226 213 235);
    margin: 5%;
    border-radius: 10px;
    margin-bottom: 65px
}
.bracelete-img-card{
    width: 100%;
    height: 53%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
} 
.bracelete-cart{
    background: rgb(76 62 86);
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 3%;
    border-radius: 5px;
}
.view-more-bracelete{
    background: rgb(76 62 86);
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 1%;
    border-radius: 5px;
    font-size: 18px
}  
@media(max-width:776px){
    .bracelete{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width:500px){
    .bracelete{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
} 
/* ***********************************************  */
/* ring  */
.ring-card-section{
    background:#fdfdf7;
    padding: 32px;
    box-shadow: 10px 0px 20px 10px gray;
    margin-top:40px;
    padding-bottom: 65px
} 
.ring{
    display: grid;
    grid-template-columns: repeat(4, 1fr) 
}  
.ring-card{ 
    background: rgb(195 156 117);
    margin: 5%;
    border-radius: 10px;
    margin-bottom: 20%
}
.ring-img-card{
    width: 100%;
    height: 58%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
} 
.ring-cart{
    background: rgb(145 76 8);
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 3%;
    border-radius: 5px;
}
.view-more-ring{
    background: rgb(145 76 8);
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 1%;
    border-radius: 5px;
    font-size: 18px
}  
@media(max-width:776px){
    .ring{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width:500px){
    .ring{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}  
/* ************************************* */
/*******shoping page heading***************/
.heading-section-shop{
    display: flex;
    justify-content: space-between;
}
.search-bar{
    width: 22%;
    height: 40px;
    border-radius: 25px;
    border: 1px solid gray
}
.first-section{
    display: flex;
}
.img-sec img{
    width: 100%
}
.shopping-page-section{
    width: 80%;
}