:root{
    --primaryNeutral900 : #192252;
    --primaryNeutral800 : #2A3563;
    --primaryNeutral700 : #424F7B;
    --primaryNeutral600 : #606D93;
    --primaryNeutral500 : #848FAC;
    --primaryNeutral400 : #A9B4CD;
    --primaryNeutral300 : #C5D0E6;
    --primaryNeutral200 : #DFE8F6;
    --primaryNeutral100 : #EFF3FA;


    --brand900 : #5F0720;
    --brand800 : #720C21;
    --brand700 : #8E1322;
    --brand600 : #AA1C21;
    --brand500 : #C62F27;
    --brand400 : #DC6957;
    --brand300 : #ED947B;
    --brand200 : #F9C1A9;
    --brand100 : #FCE3D3;
}

* {
    font-family: 'Urbanist', sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.btn-outline-primary{
    padding: 12px 32px;
    border-radius: 100px;
    height: fit-content;
    width: fit-content;
    color: var(--primaryNeutral900);
    border: 1.5px solid var(--primaryNeutral900);
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;

}

.btn-outline-primary:hover{
    background-color: var(--primaryNeutral900);
    color: white;
    border: none;
}

.btn-brand{
    padding: 12px 32px;
    border-radius: 100px;
    height: fit-content;
    width: fit-content;
    color: white;
    background-color: var(--brand500);
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
    border: none;
}

.btn-brand:hover{
    background-color: var(--brand600);
    color: white;
}

.btn-outline-brand{
    border-radius: 4px;
    width: fit-content;
    padding: 16px 40px;
    border: 1px solid var(--brand500);
    font-weight: bold;
    font-size: 18px;
    color: var(--brand500);
    text-decoration: none;
    margin-top: 64px;
}

.btn-outline-brand:hover{
    color: white;
    background-color: var(--brand500);
}

@media (max-width: 768px) {
    .btn-outline-primary{
        padding: 12px 28px;
        font-size: 16px;
    }
    
    
    .btn-brand{
        padding: 12px 28px;
        font-size: 16px;
    }
    
    
    .btn-outline-brand{
        padding: 12px 32px;
        font-size: 16px;
    }
    
}

@media (max-width: 576px) {
    .btn-outline-primary{
        padding: 12px 28px;
        font-size: 14px;
    }
    
    
    .btn-brand{
        padding: 12px 28px;
        font-size: 14px;
    }

    .btn-outline-brand{
        padding: 12px 32px;
        font-size: 14px;
    }
}

/* styling paginate */

.paginate-nav .btn-paginate{
    width: 40px;
    height: 40px;
    margin-left: 16px;
    cursor: pointer;
}

.paginate-nav .btn-paginate:nth-last-child(0){
    margin-left: 0;
}

.paginate-nav .btn-paginate p{
    margin-bottom: 0;
}

.paginate-nav .btn-nav-paginate{
    border: 1.5px solid var(--brand300);
    border-radius: 4px;
}

.paginate-nav .btn-nav-paginate:hover{
    border-color: var(--brand500);
}


.paginate-nav .btn-nav-paginate:hover img{
    filter: invert(30%) sepia(22%) saturate(3249%) hue-rotate(327deg) brightness(100%) contrast(115%);
}

.paginate-nav .btn-number{
    border: 1.5px solid var(--primaryNeutral400);
    border-radius: 4px;
    color: var(--primaryNeutral400);
    font-weight: bold;
}

.paginate-nav .btn-number:hover{
    background-color: var(--brand500);
    border-color: var(--brand500);
    color: white;
}

.paginate-nav .active{
    color: white;
    background-color: var(--brand500);
    border-color: var(--brand500);

}


/* pagination laravel */
.pagination{
    justify-content: center;
}

.pagination li{
    width: 40px;
    height: 40px;
    margin-left: 16px;
    cursor: pointer;
    text-align: center;
}

.pagination .page-item .page-link[aria-label = '« Previous'] ,
.pagination .page-item .page-link[aria-label = 'Next »']{
    border: 1.5px solid var(--brand300) !important;
    border-radius: 4px;
    color: var(--brand300) !important;
}

.pagination .page-item:hover .page-link[aria-label = '« Previous'] ,
.pagination .page-item:hover .page-link[aria-label = 'Next »']{
    background-color: transparent !important;
    border: 1.5px solid var(--brand400) !important;
    color: var(--brand400);
}

.pagination .page-item .page-link{
    border: 1.5px solid var(--primaryNeutral400);
    border-radius: 4px;
    color: var(--primaryNeutral400);
    font-weight: bold;
}

.pagination .page-item.active .page-link{
    color: white;
    background-color: var(--brand500);
    border-color: var(--brand500);
}

.pagination .page-item:hover .page-link{
    background-color: var(--brand500) !important;
    border-color: var(--brand500);
    color: white;
}