html {
    height: 100%;
}


body {

    min-height:100vh;

    display:flex;

    flex-direction:column;


    font-family:"Segoe UI", Arial, sans-serif;


    background:

        linear-gradient(
            rgba(255,255,255,0.55),
            rgba(255,255,255,0.55)
        ),

        url('/img/lab-background.jpg');


    background-size:cover;

    background-position:center;

    background-attachment:fixed;


    margin:0;

}



/* NAVBAR */


.navbar {

    display:flex;

    align-items:center;


    background:rgba(255,255,255,0.88);


    box-shadow:
    0 8px 20px rgba(0,0,0,.12);


    padding:12px 30px;

}



.logo {

    height:35px;

    width:auto;

    display:block;

}




.navbar-menu {


    flex:1;


    display:flex;


    justify-content:center;


    gap:45px;


}




.navbar-menu a {


    text-decoration:none;


    color:#6d358c;


    font-size:22px;


    font-weight:700;


    text-shadow:
    0 1px 2px rgba(0,0,0,0.12);


    transition:.2s;


}



.navbar-menu a:hover {


    color:#ea4c27;


}




/* PAGE */


.container-fluid {

    flex:1;

}



.page-content {

    flex:1;

}





/* MAIN CONTENT */


.content-box {


    background:
    rgba(238,238,238,.90);


    border-radius:10px;


    padding:25px;


    box-shadow:
    0 10px 25px rgba(0,0,0,.10);


}




/* SIDEBAR */


.sidebar {


    background:
    rgba(255,255,255,0.85);


    border-radius:12px;


    padding:20px;


    box-shadow:
    0 10px 30px rgba(0,0,0,.12);


}




.sidebar h5 {


    color:#6d358c;


    font-weight:bold;


    margin-bottom:15px;


}




.sidebar a {


    display:block;


    background:#6d358c;


    color:white;


    padding:10px 15px;


    margin-bottom:8px;


    border-radius:6px;


    text-decoration:none;


    font-weight:600;


    transition:.2s;


}




.sidebar a:hover {


    background:#8b4fb3;


    transform:translateX(5px);


}




/* FOOTER */


footer {


    background:
    rgba(255,255,255,.88);


    margin-top:auto;


    padding:20px 0;


    box-shadow:
    0 -5px 15px rgba(0,0,0,.10);


}



/* COPYRIGHT AREA */


.footer-top {


    text-align:center;


    font-size:18px;


    font-weight:600;


    color:#333;


    padding-bottom:12px;


}



/* FOOTER LINKS */


.footer-bottom {


    display:flex;


    justify-content:center;


    gap:35px;


    border-top:
    1px solid rgba(0,0,0,.15);


    padding-top:12px;


}




.footer-bottom a {


    color:#6d358c;


    text-decoration:none;


    font-size:16px;


    font-weight:600;


}



.footer-bottom a:hover {


    color:#ea4c27;


}

.logo {
    height: 80px !important;
    width: auto !important;
}

.navbar {
    min-height: 90px;
}

.navbar-brand {
    padding: 0;
}

.category-tile {

display:flex;
align-items:center;
justify-content:center;

height:120px;

background:#6d358c;
color:white;

font-size:22px;
font-weight:bold;

border-radius:10px;

text-decoration:none;

transition:0.2s;

}


.category-tile:hover {

background:#ea4c27;
color:white;

text-decoration:none;

transform:scale(1.05);

}

.navbar-menu a {

    background: #6d358c;
    color: white;

    padding: 10px 18px;

    margin-left: 8px;

    border-radius: 6px;

    text-decoration: none;

    font-weight: bold;

    display: inline-block;

}


.navbar-menu a:hover {

    background: #ea4c27;

    color: white;

    text-decoration: none;

}

.productbox img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.cart-box {
    background: #f5f5f5;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    margin-bottom: 30px;
}

.cart-box table {
    background: white;
}

.cart-box th {
    background: #343a40;
    color: white;
}

.cart-box td {
    vertical-align: middle;
}