:root {
    --color-light: #f9fafb;
    --color-light-soft-1: #f4f3e9;
    --color-light-soft-2: #a0a0a0;
    --color-light-soft-3: #9b9b9b;
    --color-light-mute: #696359;

    --color-dark: #413835;
    --color-dark-soft: #746661;
    --color-dark-mute: #595245;

    --primary-color: rgb(47, 65, 126);
    --secondary-color: rgb(92, 92, 92);
    --tertiary-color: rgb(77, 161, 157);
}

@font-face {
    font-family: "DINNextLTArabic";
    src: url("../fonts/DINNextLTArabic-Regular-3.ttf") format("truetype");
}

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

body {
    margin-top: 108px;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 108px);
}
@media (min-width: 990px) {
    body{
        margin-top: 84px;
        min-height: calc(100vh - 84px);
    }
}

 p::-webkit-scrollbar {
    display: none;
}

/* button */

.style-btn{
    position: relative;
    overflow: hidden;
    color: var(--tertiary-color);
    border: solid var(--tertiary-color) 1px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.style-btn:hover {
    background-color: var(--tertiary-color);
    color: #fff;
}

.card-style-edit-btn{
    color: var(--primary-color);
    border: solid var(--primary-color) 1px;
    
}
.card-style-edit-btn:hover{
    background-color: var(--primary-color);
    color: #fff;

}
.card-style-delete-btn{
    color: #ff0000;
    border: solid #ff0000 1px;
    
}
.card-style-delete-btn:hover{
    background-color: #ff0000;
    color: #fff;

}




.order-btn {
    color: var(--tertiary-color);
    border: solid var(--tertiary-color) 1px;
}

.order-btn:hover {
    background-color: var(--tertiary-color);
    color: #fff;
}

.style-edit-btn{
    background-color: var(--primary-color);
    color: #fff;
}
.style-edit-btn:hover {
    background-color: var(--secondary-color);
    color: #fff;
}
.style-create-btn{
    color: var(--secondary-color);
    border: solid var(--secondary-color) 1px;
}
.style-create-btn:hover {
    background-color: var(--secondary-color);
    color: #fff;
}
.style-delete-btn{
    background-color: #ffffff00;
    color: rgba(255, 0, 0, 0.377);
}
.style-delete-btn:hover {
    background-color: #ffffff00;
    color: #ff0000;
}
.style-delete-btn:focus {
    border: none;
    background-color: #ff6f6f15;
}

.label-preview-image:hover{
    cursor: pointer;
    color: var(--tertiary-color);
}


/* Product */
.products-scroll::-webkit-scrollbar {
    display: none;
}



/* Navbar */

@keyframes expandLine {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
.x-navbar {
    background-color: var(--color-light);
}
.x-navbar .categories-list a {
    color: var(--color-dark-soft);
}

.x-navbar-categories-item {
    color: var(--tertiary-color);
    padding: 0 10px;
    height: 100%;
}

.x-navbar-categories-item .nav-link {
    height: 100%;
    display: flex;
    align-items: center;
}

.x-navbar-categories-item hr {
    width: 0;
    border-width: 0px;
    border-style: solid;
    opacity: 100%;
    border-color: var(--primery-color) !important;
}

.x-navbar-categories-item .underline {
    border-width: 1px;
    animation: expandLine 0.3s ease forwards;
}
.scrollable-nav::-webkit-scrollbar {
    display: none;
}



/* Banner */
.x-banner-carousel .carousel-item{
    max-height: 400px
}

.x-banner-carousel .carousel-indicators button {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50%;
    background-color: #00000000 !important;
    border: 1px solid #000 !important;
    opacity: 100% !important;
}

.x-banner-carousel .carousel-indicators .active {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

@media (max-width: 400px) {
    .x-banner-carousel .carousel-indicators button {
        width: 6px !important;
        height: 6px !important;
        border-width: 0.2px;
    }
}

.x-banner-carousel .carousel-control{
    width:5%;
}

/* Footer */

footer {
    margin-top: auto;
    background-color: var(--color-light);
}




/* Form */

.style-form-control:focus {
    box-shadow: 0 0 3px #000000;
}

.style-form {
    background-color: var(--color-light);
}