/* google font add */
 @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@700&family=Lato:ital,wght@0,700;1,700&family=Poppins:ital,wght@0,700;1,400&family=Raleway:ital,wght@0,600;1,500;1,600&family=Roboto:wght@500;700&family=Work+Sans:wght@700&display=swap');
 /*strat common styl */
 body{
    font-family: 'Fira Sans', sans-serif;
    font-family: 'Lato', sans-serif;
    font-family: 'Poppins', sans-serif;
    font-family: 'Raleway', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Work Sans', sans-serif;
    background-color: whitesmoke;
 }
 
 .container{
    max-width: 1200px;
    margin: 0 auto;
}
 /*end common styl */
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav a{
text-decoration: none;
color: black;
margin: 10px;
}
nav span a:hover{
    background-color:#E02C6D;
    color: #fff;
    padding: 30px;
    border-radius: 5px;
    
    
}
/* strat banner */
.banner{
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.banner-left a{
text-decoration: none;
background-color: #E02C6D;
color: #fff;
padding: 10px;
border-radius: 41px;
}
.banner-left a:hover{
    background-color: #fff;
    color: #E02C6D;
    border: 2px solid #E02C6D;
}
.banner-reight img{
    width: 100%;
    background-image: url(/images/Circle\ design.svg);
    background-repeat: no-repeat;
    background-position: center;   
}
.banner .banner-reight:hover{
    transform: rotate(360deg) scale(.5);
    transition: transform 4s linear;
}
/* end banner */

/* strat logo */
.logo{
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 20px;
}
.logos{
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    overflow: hidden;
}
/* end logo */

/* start popular collection */
.collections{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    overflow: hidden;
}
.collection-title{
    text-align:center;
    margin: 60px;
}
.collection{
    width: 300px;
    background-color: white;
    box-shadow:10px 10px 5px white;
    border-radius: 20px;
    padding: 20px;
    margin: 20px;
    
}
.collection:hover{
    transform: scale(1.1);
    transition: transform .5s linear;
}
.collection-them img{
    width: 100%;
}
.fa-star{
    color: orange;
}
.fa-star-half-alt{
    color: orange;
}
#see-more {
    text-decoration: none;
    color:#E02C6D;
    display: flex;
    justify-content: flex-end;
}
/* end popular collection */

/* start footer  */
footer{
    background-color: #0A0826;
    color: #FFFFFF;
    text-align: center;
}
/* end footer  */

/* Media Qureies  */

/*  start  mobile devise */
@media only screen and (max-width:688px){
    .banner,.logos,.collections {
        grid-template-columns: repeat(1,1fr);
    }
    .banner-left{
        order: 2;
    }
    .logo img{
        width: 30px;
    }
}
/*  end mobile  devise*/

/* strat table devise  */
@media only screen and (min-width:689px) and (max-width:992px) {
    .collections{
       grid-template-columns: repeat(2,1fr);
    }
}
/* end table devise  */