:root {
    --color-primary: 105, 190, 60;
    --color-container: #100d10;
    --btn-border-radius: 25px;
    --ease-in-out: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --ellipsis-lines: 3;
    --background-from: #100d10;
    --background-to: #4c4e4f;
    --page-height: 898px;
    --mobile-navigation-height: 0.5rem;
}
@font-face {
    font-family: 'Roboto Black';
    src: url('Roboto-Black.ttf') format('truetype');
    font-weight: bold;
  }
body {
    /*background: url(../images/bg.png);*/
    background: var(--background-from) linear-gradient(var(--background-from),var(--background-to));
    background-attachment: fixed;
}
#back-to-top {
    position: fixed!important;
    bottom: 20px!important;
    right: 20px!important;
    display: none!important;
    z-index: 1000!important; /* Ensure it's above other items */
}

.language-selector {
    text-align: center;
    text-align: -webkit-center;
}
.bg-white {
    background-color: #fff!important;;
}
.mb-2, .my-2 {
    margin-bottom: 20px!important;
}
.mt-2, .my-2 {
    margin-top: 20px!important;
}
.mr-2, .mx-2 {
    margin-right: 20px!important;
}
.ml-2, .mx-2 {
    margin-left: 20px!important;
}
.site {
    font-family: 'Roboto Black', sans-serif;
}
.text-logo {
    font-family: 'Roboto Black', sans-serif;
    color: #e7480f;
    text-shadow: 2px 2px #ffd301;
    font-size: 50px;
    padding: 40px 0px;
    text-align: center;
}
.text-logo span {
    color: #ffd301;
    text-shadow: 0px 0px #ffd301;
}
.img-logo {
    width: 100px;
}
.nav {
   margin-bottom: 40px;
}
.nav-link {
    color: #eee;
    font-size: 18px;
    text-shadow: 2px 2px #333;
    cursor: pointer;
}
.nav-link.active {
    background-color: #e7480f !important;
}
.nav-link:hover {
    color: #e7480f;
    background-color: #eee;
}
.img-thumbnail {
    position: relative;
    margin-bottom: 20px;
}
.img-thumbnail img, .upload-img {
    background: #ffd301;
    width: 100%;
    height: 406px;
    object-fit: cover;
}
.img-fluid {
    max-width: 100%;
    max-height: 406px;
}
.img-thumbnail .price {
    background: #5cb85c;
    box-shadow: 0 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 1px rgba(0,0,0,0.2);
    color: #fff;
    text-shadow: 2px 2px #333;
    position: absolute;
    right: -9px;
    top: 16px;
    padding: 5px 10px;
    font-size: 20px;
    border-radius: 3px 0 3px 3px;
}
.img-thumbnail .price:before {
    border: 4px solid transparent;
    border-bottom: 4px solid #4a934a;
    border-left: 4px solid #4a934a;
    content: "";
    position: absolute;
    right: 0px;
    top: -8px;
}
.img-thumbnail .casier {
    background: #e7480f;
    box-shadow: 0 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 1px rgba(0,0,0,0.2);
    color: #fff;
    text-shadow: 2px 2px #333;
    position: absolute;
    left: -9px;
    top: 16px;
    padding: 5px 10px;
    font-size: 20px;
    border-radius: 0px 3px 3px 3px;
}
.img-thumbnail .casier:before {
    border: 4px solid transparent;
    border-bottom: 4px solid #7f1919;
    border-right: 4px solid #7f1919;
    content: "";
    position: absolute;
    left: 0px;
    top: -8px;
}
.img-thumbnail .caption {
    padding: 9px;
}
.img-thumbnail .caption h4 {
    color: #e7480f;
    font-size: 16px;
}
.img-thumbnail .btn-order {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    background-color: #e7480f;
    text-shadow: 2px 2px #333;
}
.img-thumbnail .btn-order:hover, 
.img-thumbnail .btn-order:focus {
    color: #fff;
    background-color: #c13c0d;
}

.space-evenly {
    justify-content: space-evenly !important;
}

/*ADMIN*/

.admin{
    background: #fff;
    padding: 50px;
    border-radius: 10px;
}

.help-inline{
    color: red;
}

.d-flex-end {
    justify-content: flex-end!important;
}
.d-flex {
    display: flex!important;
}

.t-shadow-none {
    text-shadow: none!important;
}


/*RESPONSIVE*/
/* For medium screens (e.g., tablets) */
@media (max-width: 992px) {
    .text-logo {
        font-size: 40px; /* Adjust as needed */
    }
}

/* For small screens (e.g., landscape phones) */
@media (max-width: 768px) {
    .text-logo {
        font-size: 30px; /* Adjust as needed */
    }
}

/* For extra small screens (e.g., portrait phones) */
@media (max-width: 576px) {
    .text-logo {
        font-size: 18px;
    }
}