header {
    background-image: url(../images/2505c4fb0d1e6d6edf33f33f687db773.jpg);
    width: 100%;
    height: 30em;
    position: center;
    background-size: cover;
    background-position-y: 20%;
    animation-duration: 3s;
    animation-name: slidein;
}

@keyframes slidein {
    from {
        margin-left: 8%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}

.display-4 fw-bolder {
    text-shadow: black;
}


.imgage-zoom {
    background-image: url(../images/2505c4fb0d1e6d6edf33f33f687db773.jpg);
    -webkit-transform: scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
    -moz-transform: scale(0.8); /*Mozilla scale version*/
    -o-transform: scale(0.8); /*Opera scale version*/
    -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
    -moz-transition-duration: 0.5s; /*Mozilla duration version*/
    -o-transition-duration: 0.5s; /*Opera duration version*/
}

img:hover {
    -webkit-transform: scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
    -moz-transform: scale(1.1); /*Mozilla scale version*/
    -o-transform: scale(1.1); /*Opera scale version*/
    box-shadow: 0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
    -webkit-box-shadow: 0px 0px 30px gray; /*Safari shadow version*/
    -moz-box-shadow: 0px 0px 30px gray; /*Mozilla shadow version*/
}

body {
    background-color: black;
    color: white;
}

.table {
    color: white;
}

.navbar {
    background-color: black;
    color: white;
}

/* icon */
.bi-cart-fill {
    color: gray;
}

/* whole cart button*/
.btn {
    font-family: 'Roboto';
    font-size: 20px;
}

.text-center {
    color: white;
}

.card {
    background-color: black;
    color: white;
    border-color: white;
}

table {
    border-radius: 8px;
    border: 1px solid #e3e6f0;
    box-shadow: 0 0 2px 0;
    padding: 10px;
}

.dataTables_wrapper .dataTables_length select {
    background-color: white !important;
}

label {
    color: white;
}

body {
    color: white;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: #e9ecef !important;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: #f9fafb !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
        cursor: default;
        color: #f9fafb !important;
        border: 1px solid transparent;
        background: transparent;
        box-shadow: none;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        color: #333 !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        color: white;
    }

    .dataTables_wrapper .dataTables_length select {
        background-color: black !important;
        color: white !important;
    }

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: #f9fafb !important;
}

.form-control {
    color: white !important;
    background-color: black !important;
}