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

/* *{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
} */

body{
    font-family: 'Montserrat', sans-serif;
}

#p_footer{
    width: 80%;
    margin: auto;
    margin-top: 30px;
    padding: 5px;
    /* border: 1px solid red; */
}

.p_footerlinks, .p_footericons{
    list-style: none;
}

#p_quicklinks{
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.p_footerlinks{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.p_footerlinks > li:first-child{
    color: #84c225;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.p_footerlinks > li:first-child:hover{
    color: #84c225;
}

.p_footerlinks > li{
    font-size: 14px;
}

.p_footerlinks > li:hover{
    cursor: pointer;
    color: green;
}

.p_footericons{
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.p_footericons > li{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    border-radius: 50%;
    cursor: pointer;
}

.p_footericons > li:first-child{
    background-color: #3b5998;
    border: 2px solid #3b5998 ;
}

/* .p_footericons > li:hover{
    background-color: #fff;
} */

.p_footericons > li:first-child:hover{
    background-color: #fff;
}

.p_footericons > li:first-child:hover i{
    color: #3b5998;
}

.p_footericons > li:nth-child(2){
    background-color: #db3236;
    border: 2px solid #db3236;
}

.p_footericons > li:nth-child(2):hover{
    background-color: #fff;
}

.p_footericons > li:nth-child(2):hover i{
    color: #db3236;
}

.p_footericons > li:nth-child(3){
    background-color: #00aced;
    border: 2px solid #00aced;
}

.p_footericons > li:nth-child(3):hover{
    background-color: #fff;
}

.p_footericons > li:nth-child(3):hover i{
    color: #00aced;
}

.p_footericons > li:nth-child(4){
    background-color: #517fa4;
    border: 2px solid #517fa4;
}

.p_footericons > li:nth-child(4):hover{
    background-color: #fff;
}

.p_footericons > li:nth-child(4):hover i{
    color: #517fa4;
}

.p_footericons > li > i{
    font-size: 25px;
    color: #fff;
}



#p_footerCategories{
    padding-top: 20px;
    border-top: 1px solid lightgray;
}

.p_footerCategoryText{
    display: flex;
    justify-content: space-around;
}

.p_footerCategoryText > h3{
    width: 20%;
    font-size: 16px;
    color: #84c225;
    cursor: pointer;
}

.p_footerCategoryText > p{
    width: 75%;
    font-size: 12px;
}


.p_footerPayment{
    width: 75%;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.p_footerPayment > div{
    width: 10%;
    font-size: 12px;
    font-weight: bold;
}

.p_footerPayment > div > img{
    width: 100%;
    height: 40px; 
}


#p_copyrightText{
    width: 100%;
    height: 30px;
    margin-top: 40px;
    padding: 5px;
    background-color: #eaeaea;
    display: flex;
    align-items: center;
}

#p_copyrightText > p{
    width: 80%;
    margin: auto;
    color: #808080;
    font-size: 12px;
}




/* CSS Media Queries */

@media all and (max-width: 700px){
    #p_footer{
        width: 95%;
    }

    #p_quicklinks{
        flex-wrap: wrap;
    }

    .p_footerCategoryText > h3{
        font-size: 12px;
    }

    .p_footerPayment{
        flex-wrap: wrap;
    }

    .p_footerPayment > div{
        width: 20%;
        font-size: 8px;
        font-weight: bold;
    }
}