/*==========================================
        PRODUCTS PAGE
==========================================*/

.products-page{
    padding:80px 0;
    background:#f8fbff;
}

.products-page h5{
    text-align:center;
    color:#005BAC;
    letter-spacing:2px;
}

.products-page h2{
    text-align:center;
    margin-bottom:10px;
}

.products-page p{
    text-align:center;
    max-width:750px;
    margin:0 auto 40px;
}

/*==========================================
        MAIN CATEGORY
==========================================*/

.main-category{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:30px;

}

.main-btn{

    border:none;
    padding:15px 30px;
    border-radius:40px;
    cursor:pointer;
    background:white;
    color:#003B73;
    font-size:16px;
    font-weight:600;
    transition:.3s;
    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.main-btn:hover{

    background:#005BAC;
    color:white;

}

.main-btn.active{

    background:#005BAC;
    color:white;

}

/*==========================================
        SUB CATEGORY
==========================================*/

.sub-category{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:35px;

}

.sub-btn{

    border:1px solid #005BAC;
    background:white;
    color:#005BAC;
    padding:10px 20px;
    border-radius:30px;
    cursor:pointer;
    transition:.3s;
    font-weight:500;

}

.sub-btn:hover{

    background:#005BAC;
    color:white;

}

.sub-btn.active{

    background:#003B73;
    color:white;

}

/*==========================================
        SEARCH
==========================================*/

.search-box{

    width:100%;
    max-width:500px;
    margin:0 auto 35px;
    position:relative;

}

.search-box input{

    width:100%;
    padding:16px 50px 16px 20px;
    border-radius:40px;
    border:1px solid #ddd;
    outline:none;
    font-size:16px;
    box-shadow:0 5px 20px rgba(0,0,0,.05);

}

.search-box i{

    position:absolute;
    right:20px;
    top:18px;
    color:#005BAC;
    font-size:18px;

}

/*==========================================
        TABLE
==========================================*/

.table-responsive{

    overflow-x:auto;

}

#productTable{

    width:100%;
    border-collapse:collapse;
    background:white;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

#productTable thead{

    background:#005BAC;
    color:white;

}

#productTable th{

    padding:18px;
    text-align:left;
    font-size:15px;
    white-space:nowrap;

}

#productTable td{

    padding:16px;
    border-bottom:1px solid #ececec;
    vertical-align:middle;

}

#productTable tbody tr{

    transition:.3s;

}

#productTable tbody tr:hover{

    background:#F4FAFF;

}

#productTable td:first-child{

    font-weight:600;
    text-align:center;

}

#productTable td:nth-child(2){

    font-weight:600;

}

#productTable td:nth-child(3){

    color:#666;

}

#productTable td:nth-child(4){

    color:#005BAC;
    font-weight:600;

}

#productTable td:last-child{

    text-align:center;

}

#productTable .btn{

    padding:8px 18px;
    font-size:14px;
}

/*==========================================
        EMPTY TABLE
==========================================*/

.no-product{

    text-align:center;
    padding:50px;
    font-size:20px;
    color:#777;

}

/*==========================================
        TABLE SCROLLBAR
==========================================*/

.table-responsive::-webkit-scrollbar{

    height:8px;

}

.table-responsive::-webkit-scrollbar-thumb{

    background:#005BAC;
    border-radius:20px;

}

/*==========================================
        RESPONSIVE
==========================================*/

@media(max-width:992px){

.main-category{

    justify-content:flex-start;

}

.sub-category{

    justify-content:flex-start;

}

}

@media(max-width:768px){

.products-page{

    padding:60px 0;

}

.main-btn{

    width:100%;

}

.sub-btn{

    width:100%;

}

.search-box{

    max-width:100%;

}

#productTable{

    min-width:850px;

}

}

@media(max-width:576px){

.products-page h2{

    font-size:28px;

}

.products-page p{

    font-size:15px;

}

.main-btn{

    font-size:15px;

}

.sub-btn{

    font-size:14px;

}

}