
#sub-navbar{
    display: flex;
    justify-content: center;
    background-color:#902735;
}

.home_decor{
    color: aliceblue;
    margin-left: 20px;
    font-size: 150%;
    padding-top: 15px;
    padding-bottom: 15px;
}
.home_decor:hover{
    cursor: pointer;
    border-radius: 7px;
    background-color: antiquewhite;
    color: #902735;
}
#shopByCatHead{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}
#category_section{
    display: grid;
    grid-template-columns: repeat(5,1fr);
}

#category_section > div > img{
    width: 100%;
}

/* FONTS SECTION  */



#fonts{
    display: flex;
    height: 100px;
    justify-content: space-around;
    background-color: black;
}
#fonts > div >i{
    font-size: 220%;
    margin-top: 40px;
}


.fa-solid , .fa-brands{
    color: white;
}
#fonts > div > span{
    margin-left:7px;
    color: white;
}

#last_4_img{
    width: 85%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    margin-top: 5%;
}

#last_4_img > div > img{
    width: 100%;
}

#carousel > img{
    width: 100%;
}
.indexstyle{
    text-decoration: none; 
    color: black;
}
.indexstyle1{
    text-decoration: none; 
    color: #902735;
}

/* RESPONSIVENESS */

@media screen and (min-width: 480px)  and (max-width:850px){
    #category_section{
        display: grid;
        grid-template-columns: repeat(2 , 1fr);
    }
    #last_4_img{
        display: grid;
        grid-template-columns: repeat(1 , 1fr);
    }
    #fonts > div >i{
        font-size: 150%;
    }
    .fa-solid , .fa-brands{
        font-size: 100%;
    }
    #fonts > div > span{
        font-size: 70%;
    }
} 

@media screen and (max-width: 480px){
    #category_section{
        display: grid;
        grid-template-columns: repeat(2 , 1fr);
    }
    #last_4_img{
        display: grid;
        grid-template-columns: repeat(1 , 1fr);
    }
    #fonts > div >i{
        font-size: 100%;
    }
    .fa-solid , .fa-brands{
        font-size: 50%;
    }
    #fonts > div > span{
        font-size: 30%;
    }

}