/*-------------------
This theme uses Bootstrap v5.1.

It is highly recommended to check out Bootstrap's guiding principles,
strategies, and techniques at https://getbootstrap.com/docs/5.1/extend/approach/
before adding custom styling.

To learn more about Bootstrap v5.1, please check
out https://getbootstrap.com/docs/5.1/getting-started/introduction/.
/*-------------------*/
* {
  font-family: 'Gilroy', sans-serif !important;
}
.fa, .fas {
  font-family: 'Font Awesome 5 Free' !important;
}
/*-------------------*/
/* GENERAL */
/*-------------------*/
.btn.primary, .btn.secondary {
  border-radius: 30px;
}
.select2-container--bootstrap4 .select2-selection {
    border-radius: 30px;
}
/*-------------------*/
/* TOP NAV */
/*-------------------*/
.nav-link {
    color: #000000;
    font-size: 16px;
    font-weight: 700;
}
.nav-link:hover {
    color: #000000; 
}
.nav-link {
    text-decoration: none; 
    transition: color 0.3s ease;
}

.nav-link:hover {
    text-decoration: underline;
    text-underline-offset: 5px; 
    text-decoration-thickness: 2px; 
    text-decoration-color: #ffcb05;
}
/*-------------------*/
/* HEADER */
/*-------------------*/

/*-------------------*/
/* CATEGORY NAV */
/*-------------------*/

/*-------------------*/
/* CONTENT */
/*-------------------*/
/* Container for the buttons */
.category-nav-container {
    display: flex; 
    justify-content: center; 
    align-items: center;
    gap: 20px; 
    padding: 20px 0; 
    flex-wrap: wrap; 
}

.category-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700; 
    text-decoration: none; 
    border-radius: 30px; 
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    white-space: nowrap; 
}
#mobile-slider-button > span:nth-child(1) {
    display: block !important;
}

#mobile-slider-button > span:nth-child(2) {
    display: inline-block !important;
    fill: #000 !important; 
}

.category-button-primary {
    color: #000000; 
    background-color: #FFCC00; 
    border: 2px solid #FFCC00; 
}

.category-button-secondary {
    color: #000000; 
    background-color: #FFCC00; 
    border: 2px solid #FFCC00; 
}

.category-button:hover {
    opacity: 0.9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.category-button .chevron {
    margin-left: 8px;
    font-size: 18px; 
    line-height: 1;
}
.content-container {
  min-height: 0;
}
#homepage-carousel a {
  cursor: default !important;
  pointer-events: none;

}


@media (max-width: 768px) {
    .category-nav-container {
        gap: 10px;
        padding: 15px 10px;
    }
    .category-button {
        padding: 10px 15px;
        font-size: 13px;
    }
}
/*-------------------*/
/* PRODUCT THUMBS */
/*-------------------*/
.product-list {
  gap: 30px;
}
.product-thumbnail .thumbnail-img-container a {
  justify-content: center;
  overflow: hidden;
}
.thumbnail-img-container {
  border-radius: 20px !important;
}
.product-thumbnail .thumbnail-img-container img {
  width: auto;
  max-width: none;
  margin: auto;
}
.product-thumbnail .thumbnail-description-container a h5 {
  font-size: 18px;
  text-align: center;
}
.product-page-main .images-wrapper {
  align-items: start;
  padding-right: 20px;
}
.product-page-main .images-container {
  max-height: 100%;
  height: 100%;
}
.product-page-main .images-wrapper ul {
  width: 100%;
  position: relative;
  height: 100%;
  max-width: 120px;
}
.product-page-main .images-wrapper ul li {
  margin: 0 0 5px;
  max-width: 120px;
  min-width: 120px;
  overflow: hidden;
  min-height: 120px;
  border-radius: 0
}
.product-page-main .images-wrapper ul li a {
  min-width: 118px;
  width: 100%;
}
.product-page-main .images-wrapper ul li .small-thumb {
  max-height: none;
  max-width: 120px;
}
.product-page-main .images-wrapper > button {
  display: none;
}
.gallery-main {
  display: flex;
  flex-direction: row-reverse;
}
.product-page .main-img img {
  max-width: 80%;
}
.thumbnail-img-container {
  overflow: hidden;           /* prevents image spilling out */
}

.thumbnail-img-container img {
  transition: transform 0.3s ease;
}

.thumbnail-img-container:hover img {
  transform: scale(1.2);      /* zoom level */
}
/*-------------------*/
/* FEATURED PRODUCTS CAROUSEL CUSTOM CSS */
/*-------------------*/
.featured-products h1 {
  font-weight: bold;
  margin-bottom: 22px;
}
.jcarousel-wrapper {
  margin: 20px auto;
  position: relative;
}
.product-list-container {
  position: relative;
}
.custom-featured-products-wrapper {
  position: relative;
  margin-top: -5px;
}
.jcarousel, .custom-featured-products {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}
a.btn-jcarousel {
  position: absolute;
  top: calc(50% - 60px);
  z-index: 9999;
  height: 40px;
  width: 40px;
  border: 1px solid #eaeaea !important;
  opacity: 1 !important;
  background-color: #FFCC00;
  border-radius: 50px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
a.btn-jcarousel.jcarousel-prev {
  padding: 0 2px 0 0;
  left: 5px;
}
a.btn-jcarousel.jcarousel-next {
  padding: 0 0 0 2px;
  right: 5px;
}
.jcarousel ul, .custom-featured-products > ul {
  width: 10000em;
  position: relative;
  list-style: none;
  margin: 0 20px;
  padding: 0;
  height: 100%;
  display: flex;
  gap: 20px;
}
.jcarousel li {
  width: 200px;
  float: left;
  border: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}
.custom-featured-products > ul > li {
  width: 200px;
  float: left;
  border: none;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.jcarousel .product-thumbnail {
  margin: 0;
  width: calc((100vw - 100px) / 4) !important;
}
.jcarousel img, .custom-featured-products > ul > li {
  display: block;
  max-width: 100%;
  height: auto !important;
}

/** Carousel Controls **/
.jcarousel-control-prev,
.jcarousel-control-next {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  text-align: center;
  background: #FFCC00;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 1px #000;
  font: 24px/27px Arial, sans-serif;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 0 0 4px #F0EFE7;
  -moz-box-shadow: 0 0 4px #F0EFE7;
  box-shadow: 0 0 4px #F0EFE7;
}
.jcarousel-control-prev {
    left: 15px;
}
.jcarousel-control-next {
    right: 15px;
}

/** Carousel Pagination **/
.jcarousel-pagination {
  position: absolute;
  bottom: -40px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  margin: 0;
}
.jcarousel-pagination a {
  text-decoration: none;
  display: inline-block;
  font-size: 11px;
  height: 10px;
  width: 10px;
  line-height: 10px;
  background: #fff;
  color: #4E443C;
  border-radius: 10px;
  text-indent: -9999px;
  margin-right: 7px;
  -webkit-box-shadow: 0 0 2px #4E443C;
  -moz-box-shadow: 0 0 2px #4E443C;
  box-shadow: 0 0 2px #4E443C;
}
.jcarousel-pagination a.active {
  background: #4E443C;
  color: #000;
  opacity: 1;
  -webkit-box-shadow: 0 0 2px #F0EFE7;
  -moz-box-shadow: 0 0 2px #F0EFE7;
  box-shadow: 0 0 2px #F0EFE7;
}


/*-------------------*/
/* PRODUCT */
/*-------------------*/
#productCarousel .carousel-item {
  display: flex;
  justify-content: center;
}
#productCarousel .product-thumbnail {
  flex: 0 0 25%; /* 4 per row */
  max-width: 25%;
}
/*-------------------*/
/* CART/CHECKOUT */
/*-------------------*/

/*-------------------*/
/* FOOTER */
/*-------------------*/
.button-container {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 20px;
}


.donate-btn {
    background-color: #ffc400; 
    color: #000000;
  border-radius: 50px;
}

.donate-btn:hover {
    background-color: #ffd700; 
}


.involved-btn {
    background-color: #1a719c; 
    color: #fff;
    border: 1px solid #fff; 
  border-radius: 50px;
}

.involved-btn:hover {
    background-color: #00567b; 
    color: #ffe08c; 
}
/*-------------------*/
/* MEDIA QUERIES */
/*-------------------*/

@media screen and (max-width: 768px){
  .jcarousel .product-thumbnail {
    margin: 0;
    width: calc((100vw - 60px) / 2) !important;
  }
}


@media screen and (max-width: 480px){
  .jcarousel .product-thumbnail {
    margin: 0;
    width: calc(100vw - 40px) !important;
  }
}


@media screen and (max-width: 480px){

}

@media screen and (max-width: 340px){

}
@media (min-width: 600px) {
    
    .button-container {
        flex-direction: row; 
        justify-content: center;
        width: auto;
    }
    }