/*
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100&display=swap');
*/

/* Global styles
================================================== */
body {
  padding-top: 0rem;
  background-color: white !important;
}


#userRegister input::placeholder {
  color: #000 !important;
  opacity: 1 !important;
}
#userLogin input::placeholder {
  color: #000 !important;
  opacity: 1 !important;
}

body,
p {
  font-family: 'Lexend', sans-serif;
  color: #000000;
  font-size: 10px;
}

a:link,
a:visited {
  text-decoration: none;
}

a {
  color: inherit;
  transition: 0.2s ease;
}

a:hover {
  text-decoration: none;
}

container {

}

.sub-heading {
  font-size: 1.25em;
  font-weight: bold;
}


/* Section title */
.section-title {
  margin: 0;
  font-weight: bolder;
  font-size: 4em;
}

.section-title img {
  height: 100%;
  max-height: 100px;
}

.section-sub-title {
  font-weight: bolder;
  font-size: 2em;
  line-height: 46px;
  color: #212121;
}
@media (max-width: 575px) {
  .section-sub-title {
    font-size: 28px;
  }
}




/* Colors
================================================== */
.primary-color {
  color: #FF1F00 !important;
}

.primary-color:hover {
  color: #FF1F00;
}

.secondary-color {
  color: #F3B02E !important;
}

.secondary-color:hover {
  color: #F3B02E;
}

.tertiary-color {
  color: #0E0E0F !important;
}

.fourth-color {
  color: #FFECDE !important;
}

.fifth-color {
  color: #FFE8D8 !important;
}

.white-color {
  color: #FFFFFF !important;
}

.black-color {
  color: #000000 !important;
}

.red-color {
  color: #FF0000 !important;
}

.yellow-color {
  color: #FFFF00 !important;
}

.blue-color {
  color: #0000FF !important;
}

.green-color {
  color: #00FF00 !important;
}

.grey-color {
  color: #AAAAAA !important;
}

.red-color {
  color: #FF0000 !important;
}






.error {
  color: red;
}

.success {
  color: green;
}




/* Colors Gradient
================================================== */
.primary-gradient-color {
  color: rgb(255,31,0);
  color: linear-gradient(90deg, rgba(255,31,0,1) 0%, rgba(243,176,46,1) 50%);
}



/* Backgrounds
================================================== */
.primary-background-color {
  color: #FFFFFF;
  background: linear-gradient(90deg, rgba(255,31,0,1) 0%, rgba(243,176,46,1) 50%);
  border: none;
}
.fourth-background-color {
  background: #FFECDE;
}
.fifth-background-color {
  background: #FFE8D8;
}
.grey-background-color {
  background: grey;
}
.black-background-color {
  background: #000000;
  color: #FFFFFF !important;
}
.ash-background-color {
  background: #1F1F1F;
  color: #FFFFFF;
}
.red-background-color {
  background: #FF0000;
  color: #FFFFFF;
}
.green-background-color {
  background: #008000;
}
.lightgrey-background-color {
  background: #D4D4D4;
  color: #000000;
}
.transparent-background-color {
  background-color: transparent;
}



/* Buttons
================================================== */
.btn {
  font-size: 0.75em;
}

.primary-button {
  color: #FFFFFF;
  background: linear-gradient(90deg, rgba(255,31,0,1) 0%, rgba(243,176,46,1) 50%);
  border: none;
  border-radius: 5px;
}

.primary-button:hover {
  color: #FFFFFF;
  background: linear-gradient(90deg, rgba(255,31,0,1) 0%, rgba(243,176,46,1) 50%);
  border: none;
  border-radius: 5px;
}

.second-button {
  color: #0E0E0F;
  background: #FFFFFF;
  border: none;
  border-radius: 5px;
}

.second-button:hover {
  color: #FFFFFF;
  background: linear-gradient(90deg, rgba(255,31,0,1) 0%, rgba(243,176,46,1) 50%);
  border: none;
  border-radius: 5px;
}

.secondary-button {
  color: #F3B02E;
  border: 1px solid #F3B02E;
  border-radius: 5px;
}
.secondary-button:hover {
  color: #FFFFFF;
  border: 1px solid #F3B02E;
  background-color: #F3B02E;
  border-radius: 5px;
}
.secondary-button-cart {
  color: #F3B02E;
  border: 1px solid #F3B02E;
  border-radius: 5px 5px 15px 15px;
  height: 30px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 0 15px;
  font-size: 18px;
}

.secondary-button-cart span {
  flex-grow: 0;
  text-align: left; 
  font-size: 0.6rem;
}

.secondary-button-cart i {
  font-size: 20px; 
}

.secondary-button-cart:hover {
  color: #FFFFFF;
  border: 1px solid #F3B02E;
  background-color: #F3B02E;
  border-radius: 5px 5px 15px 15px;
}



.third-button {
  color: #FFFFFF;
  border: none;
  background-color: #8A2BE2;
  border-radius: 5px;
}

.third-button:hover {
  color: #FFFFFF;
  background-color: #000000;
  border-radius: 5px;
}

.grey-button {
  color: #FFFFFF;
  border: none;
  background-color: #808080;
  border-radius: 5px;
}

.grey-button:hover {
  color: #FFFFFF;
  background-color: #808080;
  border-radius: 5px;
}

.black-button {
  color: #FFFFFF;
  border: 1px solid #F3B02E;
  background-color: #000000;
  border-radius: 5px;
}

.black-button:hover {
  color: #F3B02E;
  background-color: #000000;
  border-radius: 5px;
}

.red-button {
  color: #FFFFFF;
  border: 1px solid #F3B02E;
  background-color: #FF0000;
  border-radius: 5px;
}

.red-button:hover {
  color: #FFFFFF;
  border: 1px solid #F3B02E;
  background-color: #FF0000;
  border-radius: 5px;
}

.white-button {
  color: #000000;
  border: 1px solid #F3B02E;
  background-color: #FFFFFF;
  border-radius: 5px;
}

.white-button:hover {
  color: #FFFFFF;
  background-color: #000000;
  border-radius: 5px;
}

.transparent-button {
  color: #FFFFFF;
  background-color: transparent;
  border: solid 1px #ffffff;
  border-radius: 5px;
}

.transparent-button:hover {
  color: #FFFFFF;
  border-color: #000000;
  background-color: #000000;
  border-radius: 5px;
}

.transparent2-button {
  color: #FFFFFF;
  background-color: #5e09dd;
  border: solid 1px #5e09dd;
  border-radius: 5px;
}

.transparent2-button:hover {
  color: #FFFFFF;
  border-color: #000000;
  background-color: #000000;
  border-radius: 5px;
}



/* Border
================================================== */
.no-border {
  border: none;
}





/* Border Radius
================================================== */
.border-radius-5 {
  border-radius: 5px;
}

.border-radius-10 {
  border-radius: 10px;
}

.border-radius-15 {
  border-radius: 15px;
}

.border-radius-20 {
  border-radius: 20px;
}

.border-radius-25 {
  border-radius: 25px;
}

.border-radius-circle {
  border-radius: 50%;
}





/* Pointer
================================================== */
.pointer {
  cursor: pointer;
}





/* Reviews
================================================== */
.reviews {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}
.reviews img {
  height: 100%;
  height: auto;
  display: block;
}




/* Rating and Stars
================================================== */
.rating-system {
  display: flex;
}
.star {
  cursor: pointer; /* Optional: Enable hover effect */
  color: grey; /* Adjust default star color */
}
.star-filled {
  color: green; /* Adjust filled star color */
}




/* Header and Nav
================================================== */
.navbar {
  background: rgba(236,238,218, 0.95);
  color: #000000;
}

.navbar .headernavbar ul li a{
  color: #000000;
  font-family: 'Lexend', sans-serif;
  font-weight: bold;
}

.logo img {
  width: auto;
  height: 0.75em;
}

.navbar .navbar-icons {
  background: #FFFFFF;
  border-radius: 10px;
}

.navbar .navbar-icons .btn {
  border-radius: 10px;
  margin: 5px;
}

.navbar .navbar-icons .img {
  max-height: 30px;
}

.navbar .navbar-icons ul li a {
  background: #FFFFFF;
  border-radius: 10px;
}

.navbar .navbar-icons ul li a i {
  color: #000000;
  padding: 10px;
  background-color: none;
  border-radius: 10px;
}

/* Main navigation */
.navbar-toggler {
  border-radius: 0;
  border: none;
}

.navbar-toggler:active,
.navbar-toggler:hover,
.navbar-toggler:after {
  border: none;
}







/* Main Body Carousel
================================================== */

.mainbody {

}




/*Moble serach button
================================================== */

  /* Styling the mobile suggestions container */
  #mobileSuggestions {
    position: absolute;
    z-index: 1000; 
    width: 100%; 
    background-color: #fff; 
    border: 1px solid #ddd; 
    border-radius: 5px; 
    max-height: 200px; 
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

/* Styling individual suggestion items */
#mobileSuggestions .list-group-item {
    padding: 10px; 
    font-size: 16px; 
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

#mobileSuggestions .list-group-item:last-child {
    border-bottom: none;
}

/* Hover effect for suggestion items */
#mobileSuggestions .list-group-item:hover {
    background-color: #f1f1f1;
}

/* Styling the search input field */
#mobileProductSearch {
    border-radius: 5px; 
    border: 1px solid #ccc; 
    padding: 10px;
    font-size: 16px; 
}

.input-group .form-control {
    padding-right: 50px; 
}

#mobileSearchButton {
    background-color: #007bff; 
    color: #fff;
    border-radius: 5px; 
    padding: 10px;
    width: 45px; 
    height: 45px;
}

/* Adjustments for small screens */
@media (max-width: 767px) {
    #mobileSuggestions {
        max-width: 100%; 
    }
}





/* Categories List in Home Page
================================================== */
.fixed-height-container {
  height: 450px; 
  overflow-y: auto; /* Allow vertical scrolling if content exceeds container height */
  position: relative; /* Ensure proper positioning for child elements */
}

.overflow-content {
  overflow-y: auto; /* Enable scrolling if necessary */
  height: 100%; /* Match the height of the container */
}

.overflow-content::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Webkit browsers */
}

.overflow-content {
  scrollbar-width: none; /* Hide scrollbar for other browsers */
}

/* Ensure proper positioning and default hidden state */
.category-item {
  position: relative; /* Allow subcategories to position relative to the category */
}








/* Home Carousel
================================================== */

/* .carousel {

} */

/* .carousel-caption {
  bottom: 3rem;
  z-index: 10;
} */

.carousel-item {
  height: 30rem;
}

/* @media (min-width: 40em) {  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
} */


/* Home Search
================================================== */

.form-select {
  font-size: 1em;
}

.search-form {
  background-color: white;
}

.border-none {
  border: none !important;
}
 
.indexSearch {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}



/* Home Markets
================================================== */
 

/* Home Items
================================================== */

.homeitems .homeitems-categories {
  background-color: #FFECDE;
  border-radius: 10px;
  font-weight: bolder;
}

.homeitems .homeitems-categories a:hover {
  color: black;
}

.homeitems .homeitems-item {
  position: relative;
  /* padding-bottom: 2em; */
}
.homeitems .homeitems-items  {
  margin-bottom: 10px; 
  /* margin-top: 10px; */
}
.homeitems-item-text .name {
  margin-bottom: 10px; 
  margin-top: 10px;
  font-size: 1em;
}

.homeitems .homeitems-items .homeitems-item .price {
  font-weight: bolder;
  font-size: 1em;
  margin-bottom: 10px; 
  margin-top: 10px;
}

.homeitems .homeitems-items .homeitems-item hr {
  margin-top: 1px;
  margin-bottom: 1px; 
}

.homeitems .homeitems-items .homeitems-item-location {
  margin-top: 1px;
  margin-bottom: 1px; 
  font-size: 0.75em;
}

.homeitems .homeitems-items .homeitems-item-location span {
  color: #F3B02E;
}

.homeitems .homeitems-items .homeitems-item button {
  margin-top: 1px;
  margin-bottom: 1px; 
  width: 100%;
  font-weight: bolder;
  font-size: 0.75em;
}

.homeitems .homeitems-items .homeitems-item .verification-badge {
    /* position: absolute; */
    position: absolute;
    z-index: 2;
    font-size: 20px;
    text-align: left;
    cursor: pointer;
    border-radius: 10rem;
    background-color: transparent;
    border: none;
    width: 100%;
    color: green;
    padding-left: 5px;
}

.homeitems .homeitems-items .homeitems-item .verification-badge:hover {
    color: #FF1F00;
}




.card-cover {
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  max-height: 400px;
  border-radius: 10px;
  min-height: 399px;
  margin-bottom: 1.5rem;
}

.card-cover h3 {
  display: flex;
  align-items: flex-end;
  height: 100%;
  font-weight: bolder;
}

.card-cover button {
  border-radius: 10px;
  width: fit-content;
}


.features {
  text-align: left;
  font-size: 1em;
}

.features .card {
  border: none;
  padding: 2em;
}

.features .gold {
  background: rgba(243,176,46, 0.3);
}

.features .magenta {
  background: rgba(151,71,255, 0.3);
}

.features .green {
  background: rgba(0,227,50, 0.3);
}

.features .icon-bg {
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.features h3 {
  font-weight: bolder;
  font-size: 2em;
}












/* About
================================================== */
.about {
  color: #000000;
  padding-top: 30px;
}

.row-about {
  margin: 30px;
}

.about .history i {
  border-radius: 10px;
  font-size: 8em;
}

.about h2 {
  font-weight: bolder;
  font-size: 2em;
}

.about .title {
  border-radius: 10px;
  font-size: 1.5em;
}

.row-about .background {
  border-radius: 10px;
}

.row-about .background h4 {
  font-weight: bolder;
}

.row-about p {
  text-align: justify;
  font-size: 1.25em;
}
.about-us {
  position: relative;
}

.about-img {
  text-align: left;
  /* height: 200px; */
  width: 50px;
}











/* Search
================================================== */

#loading {
  text-align:center; 
  background: url('../images/loader.gif') no-repeat center; 
  height: 150px;
}






/* Cart
================================================== */


.cart-notification {
  text-decoration: none;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.cart-notification:hover {
  background: red;
}

.cart-notification .cart-badge {
  position: absolute;
  top: 5px;
  right: 2px;
  padding: 5px 10px;
  border-radius: 50%;
  color: red;
}





/* Contact Page
================================================== */

.product-max-height {
  max-height: 500px; /* Adjust this value to your desired maximum height */
}




/* Contact Page
================================================== */
.contact{
  
}

.contact-info{
  padding: 50px;
  /* padding-left: 100px; */
}

.contact-info .back-arrow:hover{
  color: #000000;
}

.contact-info h2{
  font-weight: bolder;
  padding: 40px;
  padding-left: 0px;
}

.contact-info span{
  font-weight: bolder;
  font-size: 1.25em;
  text-align: left;
}

.contact-info img{
  width: 150px;
}

.contact-form {
  border: 5px solid #FFFFFF;
  border-radius: 30px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 20px;
  max-width: 350px;
}

.contact-form b{
  padding: 20px;
  padding-bottom: 0px;
  font-size: 1.25em;
}

.contact-form form{
  padding: 20px;
  padding-top: 0px;
}

.contact-form .form-control{
  margin: 7px;
}

.contact-form input,
.contact-form textarea {
  border: solid 1px #ccc;
  background: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
    background-color: none; 
    border: 1px solid #000000; 
    color: #000000;
}








/* Login Page
================================================== */
.login {
  
}

.login .row {
  padding: 0px; 
  padding-right: 0px;
}

.login-form {
  /*  padding: 0em 3em;
  padding: 50px 150px 50px 150px; */
  padding-left: 40px; 
}

.login-form .back-arrow:hover {
  color: #000000;
}

.login-form img{
  width: 150px;
}

.login-form h2 {
  font-weight: bolder;
  padding: 40px 40px 0px 0px;
  padding-left: 0px;
  font-size: 2em;
}

.login-form span {
  font-weight: bolder;
  font-size: 1.25em;
  text-align: left;
}

.form-control,
.input-group-text {
  border-color: black;
  border-radius: 0px;
  border: black solid 0px;
  font-size: 1.25em;
  color: black;
}

.form-control:focus,
.input-group-text:focus {
  border-radius: 5px;
  border: solid 0px;
  outline: none !important;
}

/*
.input-group-text {
  border: none;
  border-color: black;
  background-color: #fff;
  border-radius: 5px;
  border-bottom: black solid 1px;
  font-size: 0.75em;
}

.form-control:focus,
.input-group-text:focus {
  border-width: 2px;
  border-bottom-style: solid;
  outline: none !important;
}
*/

input[type="text"]:focus {
  border: none;
}

/* Using a class: */
.no-border-on-click:focus {
  border: none;
}

/* Using a type selector: */
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus { /* Add other types as needed */
  border: none;
}


.login .bg-image {
  height: 100vh;
  background-image: url(../images/bg/login.jpg);
  background-size: cover;
  background-position: center;
}
















/* Footer
================================================== */
footer {
  background-image: url("../images/bg/footer.png");
  color: #FFFFFF;
}

footer p {
  color: #FFFFFF;
}

.footer-main h5 {
  font-weight: bolder;
}

.footer-main .newsletter {
  padding: 10px;
  border: none;
  border-radius: 10px;
  width: 80%;
  outline: none;
  background: #7E7E7E;
}

.footer-main .newsletter:focus {
  border-color: #F3B02E;
}

.footer-main .newsletter::placeholder {
  color: #FFFFFF;
}

.footer-main ul li a {
  display: block;
  font-size: 16px;
  color: #FFFFFF;
}

.footer-main ul li a i {
  color: #FFFFFF;
  padding: 10px;
  background-color: #7E7E7E;
  decoration: none;
  border-radius: 10px;
  border: solid 2px #000000;
}

.footer-main h5.sub-heading .footerimage {
  height: 30px;
}

/*
.footer-main h5.sub-heading .footerimage {
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to right, #F3B02E, #FF1F00) 1;
  height: 30px;
  border-radius: 5px;
}
*/

.footer-main h5 {
  font-weight: bolder;
}


/*-- Copyright -- */
.copyright {
  color: #FFFFFF;
  padding-right: 5em;
}




























































/*
.footer-main h5.sub-heading img {
  height: 30px;
  border-radius: 5px; 
  border: 1px solid linear-gradient(45deg,#F3B02E,#FF1F00);
  border: red 3px solid;
  border-image: linear-gradient(to right, #ff0000, #00ff00, #0000ff);
  border-image-slice: 1;
}


.footer-main {
  padding: 80px 0 60px;
}

.footer .widget-title {
  font-size: 16px;
  font-weight: 700;
  position: relative;
  margin: 0 0 30px;
  padding-left: 15px;
  text-transform: uppercase;
  color: #fff;
  border-left: 3px solid #F00E0E;
}


.footer-logo {
  margin-bottom: 25px;
}


.footer-social {
  margin-top: 15px;
}

.footer-social .widget-title {
  font-size: 14px;
  margin-bottom: 10px;
}

.footer-social ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -13px;
}
.footer-social ul li {
  display: inline-block;
}
.footer-social ul li a i {
  display: block;
  font-size: 16px;
  color: #999;
  transition: 400ms;
  padding: 10px 13px;
}
.footer-social ul li:hover {
  color: #fff;
}


.footer-widget ul.list-arrow li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 8px 0;
}

.footer-widget ul.list-arrow li:last-child {
  border-bottom: 0;
}

.footer-widget ul.list-arrow li a,
.footer-widget ul.list-arrow li:before {
  color: #747474;
}

.footer-widget ul.list-arrow li:hover a,
.footer-widget ul.list-arrow li:hover {
  color: #F00E0E;
}

.working-hours {
  padding-right: 10px;
}

.working-hours .text-right {
  float: right;
}


.copyright {
  background: #F00E0E;
  color: #111;
  padding: 25px 0;
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: 12px;
}

.footer-menu ul li {
  display: inline-block;
  line-height: 12px;
  padding-left: 15px;
}

.footer-menu ul.nav li a {
  background: none;
  color: #111;
  padding: 0;
}

.footer-menu ul li a:hover {
  color: #fff;
}
*/


/*

      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }

      .btn-bd-primary {
        --bd-violet-bg: #712cf9;
        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #6528e0;
        --bs-btn-hover-border-color: #6528e0;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #5a23c8;
        --bs-btn-active-border-color: #5a23c8;
      }

      .bd-mode-toggle {
        z-index: 1500;
      }

      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }

*/