@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
:root{
    --topic: 'Poppins', sans-serif;
}
body{
    background-color:#edf2fb;
}
.nav-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    position: relative;
    background-color:#000;
    padding: 12px 20px;
}
.logo img {

    width: 45px;
}
.menu {display: flex;}
.menu li {padding-left: 30px;}
.menu li a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    text-align: center;
    transition: 0.15s ease-in-out;
    position: relative;
    text-transform: uppercase;
}
.menu li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color:#fff;
    transition: 0.15s ease-in-out;
}
.menu li a:hover:after {width: 100%;}
.open-menu , .close-menu {
    position: absolute;
    color:#fff;
    cursor: pointer;
    font-size: 1.5rem;
    display: none;
}
.open-menu {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
.close-menu {
    top: 20px;
    right: 20px;
}
#check {display: none;}
@media(max-width: 610px){
    
    
    .menu {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 100vh;
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 100;
        background-color:#000;
        transition: all 0.2s ease-in-out;
    }
    .menu li:nth-child(6){
        display:none;
    }
    .menu li {margin-top: 40px;}
    .menu li a {padding: 10px;}
    .open-menu , .close-menu {display: block;}
    #check:checked ~ .menu {right: 0;}
}


.main img{
    width:100%;  
}

#category h1{
    color:#000;
    text-transform: uppercase;
    font-family: var(--topic);
    text-align: center;
    padding-top: 5px;
    letter-spacing: 2.5px;
}
.category-types{
    display: flex;
    flex-direction: column;
    padding:0px 4px;
}
.category-item{
    text-align: center;
    padding:10px 0px;
}
.category-item img{
    
    width:100%;
    padding:0 4px;
    height:250px;
    overflow:hidden;
    transition: all .5s ease-in-out;
}


.category-item:hover img{
    transform: scale(1.008);
}
.category-item h2{
    color:#000; 
    font-family: Arial, Helvetica, sans-serif;
}
.category-item h4{
    color:#3b3a3a;
    font-family: Arial, Helvetica, sans-serif;
}
.category-item a{
    text-decoration: none;
    text-transform:capitalize;
}
.best-selling-products{
    display: flex;
    flex-direction: column;
    padding:5px 15px;
}
.best-selling-products h2{
    font-family:Arial, Helvetica, sans-serif;
    letter-spacing: 2.5px;
    text-align: center;
    padding-bottom:8px;
}
.products{
    padding:8px 0;
    text-align: center;
}
.products a{
    text-decoration: none;
    text-transform: capitalize;
}
.products img{
    width:100%;
    height:250px;
}
.products a{
    font-family: Arial, Helvetica, sans-serif;
    color:#000;
}
.checked {
    color: orange;
}
.fa-star{
    padding-bottom:8px;
}
.price{
    padding-top:10px;
    color:red;
    font-size:larger;
}
.btn{
    font-size: larger;
    background-color: red;
}

.products p a {
    color:#fff;
    font-weight:600;
    padding:2px 10px;
}
.rugs h2{
    text-transform:uppercase;
    text-align: center;
    font-family:Arial, Helvetica, sans-serif;
    letter-spacing: 2.5px;
    padding:10px 0px;
}
.rugs{
    padding:5px 10px;
}
.rug img{
    width:100%;
    height:250px;
}
.rug{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    padding:8px 0;
}
.rug a {
    text-decoration: none;
}
.rug h3{
    color:#000;
    padding:3px;

}
.rug p a{
    color:#fff;
    font-weight:600;
    padding:2px 10px;
    text-decoration: none;
}
.rug span{
    padding:3px 0;

}
.about{
    font-family: Arial, Helvetica, sans-serif;
    padding:15px 0 10px 10px;
}
.about h2{
    text-align: center;
    padding-bottom:5px;
}
.content img{
    width:100%;
    height:250px;
}
.content p{
    line-height:25px;
}
.newsletter{
    color:#fff;
    background-color: #000;
}

.left{
    padding:10px 5px;
}
.left p{
    padding-top:5px;
    font-family: Arial, Helvetica, sans-serif;
}
 
.newsletter h2{
    text-transform: uppercase;
    letter-spacing:2.5px;
}
.right{
    display:flex;
    justify-content:space-between;
    padding:5px 10px 5px 5px;
}

.right input{
    border-radius:10px;
    height:30px;
    width:280px;
}
.right input::placeholder{
    text-transform: capitalize;
    color:darkgray;
    font-family: 'Courier New', Courier, monospace;
}
.right a{
    text-decoration: none;
}
.subscribe{
    text-transform: capitalize;
    font-family: Arial, Helvetica, sans-serif;
    background-color: red;
    color:#fff;
    text-align: center;
    justify-content: center;
    padding: 4px 10px;
    
    border-radius: 10px;
}
footer{
    display: flex;
    flex-direction: column;
    padding:15px 8px;
    
}
footer ul li a{
    color:rgb(202, 194, 194);
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 2.1px;
}
footer ul li a:hover{
    color:#fff;
    
}
footer ul li{
    padding:3px 0;
}
section{
    padding:10px 0;

}
.ab h2{
    color:yellow;
    font-size:2.5rem
}
.color{
    color:red;
    font-size:2.2rem;
}
.socials li{
    list-style-type: none;
}
.socials ul{
    display:flex;
    
}
.socials ul li{
    padding:4px 15px;
}
.copyright{
    letter-spacing: 2.5px;
    padding:0 8px;
}




/*Media query for desktop*/
@media screen and (min-width: 1024px){
    footer{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        align-items:self-start;
        padding:0 15px;
    }
    footer ul li{
        list-style-type:none;
        padding-left:5px;
    }
    .ab{
        float:left;
        
    }
    .socials{
        float:right;
    }
    .copyright{
        text-align: center;
    }
    .ab h2{
        font-size:3rem;
    }

    /*animation in logo of company*/
    .ab{
    text-transform: uppercase;   
    /*font-size:20px;*/
    font-family: monospace;
	color: transparent;
	-webkit-text-stroke: #e8e5f1;
	-webkit-text-stroke-width: 1px;
	/*text-shadow: 2px 2px 10px rgb(0, 0, 0);*/
	transition: all 0.5s ease-in-out;
	
	letter-spacing: 0.2em;
	animation: flicker 0.3s ease-in-out infinite alternate;
    padding-bottom:20px;

	
    }
    .ab:hover{
            color: #fff;
    }
    @keyframes flicker {
        0% {
            opacity: 0.5;
            text-shadow: 3px 3px 10px rgb(241, 10, 10);
        }
        100% {
            opacity: 1;
            text-shadow: 2px 2px 20px rgb(255, 230, 0);
        }
    }

    /*Newsletter*/
    .newsletter{
        padding:0px 15px;
    }
    .left h2{
        font-size:3rem;
    }
    .right input{
        height:50px;
        border-radius:20px;
        width:80%;
    }
    .right input::placeholder{
        font-size:1.6rem;
        padding-top:10px;
        padding-left:20px;
    }
    .subscribe{
        width:17%;
        border-radius:20px;
        font-size:1.6rem;
        padding-top:6.5px;
    }
    .right a:hover{
        transform: scale(1.15);
    }

    /*About section*/
    .about{
        padding:0 15px;
    }
    .about h2{
        font-size:2.5rem;
    }
    .content{
        display:flex;
        flex-direction: row;
       
    }
    .content img{
       height:500px;
        
    }
    .content p{
        color:#292828;
        float:right;
    
    }
    .rugs{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        grid-gap:5px;
        grid-template-rows:40px 1fr 1fr;

    }
    .rugs h2{
        grid-column: 1/-1;
    }
    .best-selling-products{
        display:grid;
        grid-gap:8px;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows:40px 1fr 1fr;
    }
    .best-selling-products h2{
        grid-column: 1/-1;
    }
    .category-types{
        display:grid;
        grid-gap:1px;
        grid-template-columns: repeat(6,1fr);
        grid-template-rows:1fr;
    }
   
    
    
    

}