body { padding-top: 150px; background: #f5f5f5; font-family: "Jost", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; }
html { scroll-behavior: smooth; }
h1, h2, h3, h4, h5, h6 { font-family: 'Jost', sans-serif; }
a { text-decoration: none; }
.back-to-top { position: fixed; bottom: 100px; right: 20px; display: none; z-index: 999; }
.navbar-custom { background-color: #eff8f3; }
.navbar-custom .nav-link { position: relative; color: #000; transition: color 0.3s ease; }
.navbar-custom .nav-link::after { content: ''; position: absolute; left: 0; bottom: 0;
	width: 0%; height: 2px; background-color: #04934e; /* dark green underline */ transition: width 0.3s ease;
}
.border-dark { border-bottom: red; }
.navbar-custom .nav-link:hover::after,
.navbar-custom .nav-link.active::after { width: 100%; }
.dropdown-menu .dropdown-item { position: relative; color: #000; transition: color 0.3s ease; }
.dropdown-menu .dropdown-item.hover { background-color: #04934e; color: white;}
.dropdown-menu .dropdown-item.active { background-color: #d4edda; color: black;}

input:focus, .form-control:focus { outline: green !important; box-shadow: none !important; border-color: #28a745 !important; }
.btn-outline-dark { color: green; border-color: green; }
.btn-outline-dark:hover { color: white; border-color: darkgreen; }

.search-bar { background-color: white; padding: 10px; border: 0px solid #ccc; }
.fixed-top-search { top: 85px; z-index: 1040; }

#searchResults { display: none; position: absolute; top: 60px; left: 0; right: 0;
max-height: 350px; overflow-x: auto; white-space: nowrap; background-color: white; border: 1px solid #dee2e6; padding: 5px; }
#searchResults .result-item { display: inline-block; min-width: 200px; margin-right: 10px; border: 1px solid #ccc;
padding: 10px; vertical-align: top; background-color: #f8f9fa; border-radius: 5px; }
.list-group-item:hover { cursor: pointer; }
#searchResults ul.list-group { max-height: 220px; overflow-y: auto; overflow-x: auto; }
#searchResults ul.list-group::-webkit-scrollbar { width: 3px; /* Thin scrollbar */ }
#searchResults ul.list-group::-webkit-scrollbar-track { background: transparent; }
#searchResults ul.list-group::-webkit-scrollbar-thumb { background-color: #343a40; /* Dark gray */ border-radius: 3px; }
#searchResults ul.list-group { scrollbar-width: thin; scrollbar-color: #343a40 transparent; }

#searchResultsMobile { display: none; position: absolute; top: 60px; left: 0; right: 0;
max-height: 350px; overflow-x: auto; white-space: nowrap; background-color: white; border: 1px solid #dee2e6; padding: 5px; }
#searchResultsMobile .result-item { display: inline-block; min-width: 150px; margin-right: 10px; border: 1px solid #ccc;
padding: 10px; vertical-align: top; background-color: #f8f9fa; border-radius: 5px; }
.list-group-item:hover { cursor: pointer; }
#searchResultsMobile ul.list-group { max-height: 220px; overflow-y: auto; overflow-x: auto; }
#searchResultsMobile ul.list-group::-webkit-scrollbar { width: 3px; /* Thin scrollbar */ }
#searchResultsMobile ul.list-group::-webkit-scrollbar-track { background: transparent; }
#searchResultsMobile ul.list-group::-webkit-scrollbar-thumb { background-color: #343a40; /* Dark gray */ border-radius: 3px; }
#searchResultsMobile ul.list-group { scrollbar-width: thin; scrollbar-color: #343a40 transparent; }

footer h5 { text-decoration: underline; font-size: 1.2rem; font-weight: bold;}
.footer { background-image: url('imgs/footer.jpg'); background-size: cover; color: white; padding: 40px 20px; }
footer a { cursor: pointer; color: #000 !important; /* Black color */ text-decoration: none; }
footer a:hover { text-decoration: none; }
.footer-links a { display: inline-flex; align-items: center; text-decoration: none;
	color: black; transition: color 0.3s ease; }
.footer-icon { margin-right: 8px; transition: transform 0.3s ease; }
.footer-links a:hover .footer-icon { transform: rotate(180deg); }
@keyframes scrollLoop {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.info-bar { background-color: #04934e; position: fixed; top: 0; width: 100%;
	z-index: 1055; /* Higher than navbar (Bootstrap default is 1050) */
	line-height: 24px; height: 33px; display: flex; align-items: center; justify-content: center;
	overflow: hidden; font-size: 0.95rem; font-weight: 600; padding: 0 1rem;
}
#marquee-message { position: relative; width: 100%; max-width: 100%; height: 100%; }
#marquee-message .message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0;
	transition: opacity 0.5s ease-in-out; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
	text-align: center; }
/* Change the navbar-toggler icon (hamburger lines) */
.navbar-toggler {
border: 1px solid #006400; /* Optional: dark green border */
border-radius: 50%;         /* Make it round */
padding: 0.25rem;            /* Reduce padding for better shape */
width: 40px;                /* Fixed width */
height: 40px;               /* Fixed height */
display: flex; align-items: center; justify-content: center;
}
/* Customize the toggler icon bars */
.navbar-toggler-icon { background-image: url("imgs/navicon.png"); }
@media (max-width: 767.98px) { .info-bar { font-size: 14px; top: 0; }
	.navbar.fixed-top { top: 30px; }
}
@media (max-width: 400px) { .info-bar { font-size: 12px; padding: 4px 0; height: 32px; }
	body { padding-top: 32px; }
}

.leaf-heading { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; text-align: center; margin-bottom: 0; }
.green-line { width: 100%; height: 2px; background-color: #03934e; margin: 12px 0 24px; }

/* category ------------------- */			
.category-wrapper { position: relative; max-width: 1200px; margin: auto; }
.category { margin: 0 -10px; }
.category .slick-slide { padding: 0 10px; box-sizing: border-box;}
.category img { height: auto; display: block; }

/* Arrows */
.category .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: green; border: none;
border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; z-index: 10;
opacity: 0; transition: opacity 0.3s ease; cursor: pointer; }
.category-wrapper:hover .category .slick-arrow { opacity: 1; }
.category .slick-prev { left: 10px; }
.category .slick-next { right: 10px; }
.category .slick-arrow i { color: #fff; font-size: 1.5rem; }

/* Remove default slick arrows */
.category .slick-prev::before,
.category .slick-next::before { display: none; }

@media (max-width: 767.98px) {
.category img { max-width: 100%; height: auto; max-height: 100px; /* Adjust this value to control image height */ object-fit: contain; /* Ensures the entire image is visible */ }
.category .slick-slide { padding: 0 5px; /* Optional: reduce gutter on small screens */ } }

@media (max-width: 480px) { .viewslide { margin-top: 40px; } }
/*------------- */
.product-wrapper { position: relative; max-width: 1200px; margin: auto; }
.product { margin: 0 -10px; }
.product .slick-slide { padding: 1px; box-sizing: border-box;}
.product img { height: auto; display: block; }


.product-card {
  background: transparent; /* instead of #e1e1e1 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: 1px solid orange;
  margin: 5px;
  padding: 15px;
  border-radius: 8px;
  box-shadow: none;
}
.pro-card { display: flex; flex-direction: column; }
.pro-card-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }

/* Arrows */
.product .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: green; border: none;
border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; z-index: 10;
opacity: 0; transition: opacity 0.3s ease; cursor: pointer; }
.product-wrapper:hover .product .slick-arrow { opacity: 1; }
.product .slick-prev { left: 10px; }
.product .slick-next { right: 10px; }
.product .slick-arrow i { color: #fff; font-size: 1.5rem; }

/* Remove default slick arrows */
.product .slick-prev::before,
.product .slick-next::before { display: none; }

/* ------------------------------ */
.blog-wrapper { position: relative; max-width: 1200px; margin: auto; }
.blog { margin: 0 -10px; }
.blog .slick-slide > div { display: flex; justify-content: center; align-items: center; height: 100%; text-align: center; }
.blog img { max-width: 100%; height: auto; display: inline-block; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* Arrows */
.blog .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: green; border: none; 
border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; z-index: 10; 
opacity: 0; transition: opacity 0.3s ease; cursor: pointer; }
.blog-wrapper:hover .blog .slick-arrow { opacity: 1; }
.blog .slick-prev { left: 10px; }
.blog .slick-next { right: 10px; }
.blog .slick-arrow i { color: #fff; font-size: 1.5rem; }
.blog .slick-prev::before,
.blog .slick-next::before { display: none; }

/* review --------------------- */
.review-wrapper { position: relative; max-width: 1200px; margin: auto; }
.review { margin: 0 -10px; }
.review .slick-slide { padding: 0 10px; }
.review img { max-width: 100%; height: auto; display: inline-block; border-radius: 8px;  }

/* Arrows */
.review .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: green;
border: none; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center;
justify-content: center; z-index: 10; opacity: 0; transition: opacity 0.3s ease; cursor: pointer; }
.review-wrapper:hover .review .slick-arrow { opacity: 1; }
.review .slick-prev { left: 10px; }
.review .slick-next { right: 10px; }
.review .slick-arrow i { color: #fff; font-size: 1.5rem; }
.review .slick-prev::before,
.review .slick-next::before { display: none; }
/* available ---------------------------------- */
.available-wrapper { position: relative; max-width: 1200px; margin: auto; }
.available { margin: 0 -10px; }
.available .slick-slide { display: flex !important; height: auto; display: flex !important; align-items: center; justify-content: center; }
.available img { max-width: 100%; max-width: 100%; height: auto; display: block; }
.available .slick-track { display: flex !important; justify-content: center; /* center when fewer items */ align-items: center; }
/* Arrows */
.available .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: green; border: none;
border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; z-index: 10;
opacity: 0; transition: opacity 0.3s ease; cursor: pointer; }
.available-wrapper:hover .available .slick-arrow { opacity: 1; }
.available .slick-prev { left: 10px; }
.available .slick-next { right: 10px; }
.available .slick-arrow i { color: #fff; font-size: 1.5rem; }

/* Remove default slick arrows */
.available .slick-prev::before,
.available .slick-next::before { display: none; }

.btn-beautiful { background-color: #28a745; /* Solid green */ color: white; border: none; border-radius: 50px;
	padding: 0.6rem 1.5rem; font-size: 1rem; font-weight: 500; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; }
.btn-beautiful:hover { color: white; background-color: #28a745; /* Solid green */ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); transform: translateY(-2px); }

.my-btn { color: #036034; border-color: #036034; border-radius: 50px; background-color: #036034; color: white; text-decoration: none; }
.my-btn:hover, .my-btn:focus { background-color: #28a745; color: white; border-color: #28a745; }

.caption-text { text-align: center; font-size: 1rem; font-weight: bold; }
.dropdown-submenu { position: relative; }
.dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-left: 0.1rem; margin-right: 0.1rem; }
.dropdown-menu a.dropdown-item:hover { background-color: #d4edda; font-weight: bold; }

.header-banner { background-image: url('imgs/bgr_head.jpg'); background-size: cover; background-position: center;
height: 100px; width: 100%; position: relative; display: flex; align-items: center; justify-content: center; }
.banner-text { color: black; font-size: 36px; font-weight: bold; text-align: center;
/* Embossed effect using multiple shadows */
text-shadow:  1px 1px 0 #aaa, -1px -1px 0 #333, 2px 2px 2px green; /* Extra soft shadow */}

@media (max-width: 600px) { .header-banner { height: 80px; } .banner-text { font-size: 24px; } }

div.sticky { position: sticky;  top: 145px; height: 50px; position: -webkit-sticky;
position: fixed; background-color: #eff8f3; font-size: 20px; width: 100%; z-index: 1; display: flex;
overflow-x: auto; white-space: nowrap; scrollbar-width: thin; 
-webkit-backface-visibility: hidden; z-index: 1000; /* Improves rendering on some mobile browsers */ }	

.mobile-card { padding: 5px; }

/* sticky sidebar ------------- */
/*.sticky-sidebar:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); } */

.sticky-sidebar { position: sticky; top: 105px; /* adjust based on your header */ transition: transform 0.3s ease, box-shadow 0.3s ease; z-index: 10; }
.sticky-sidebar .list-group-item a { text-decoration: none; color: inherit; display: block; padding: 8px 16px; transition: background-color 0.3s ease; }
.sticky-sidebar .list-group-item:hover { background-color: darkgreen; color: white; }
/* Active state */
.sticky-sidebar .list-group-item.active { background-color: #28a745; font-weight: bold; color: white; border-top: none !important; border-bottom: none !important; outline: none; box-shadow: none; }

/* Optional: improve hover on active */
.sticky-sidebar .list-group-item.active:hover { background-color: #32a852; /* slightly darker green */ }

.error-message { position: relative; padding: 15px 20px 15px 50px; margin: 20px auto; width: 90%; color: #721c24;
background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }

.underline { width: 100%; text-align: left; height: 1px; border-radius: 2px; background: linear-gradient(to right, lightgreen 20%, #ccc 20%); }
.login-container { max-width: 500px; margin: 30px auto; padding: 30px; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.form-control:focus { box-shadow: none; border-color: #86b7fe; }

@media (max-width: 480px) { .login-container { margin-top: 140px; } }
@media (max-width: 480px) { .contactus { margin-top: 90px; } }
@media (max-width: 480px) { .faq { margin-top: 190px; } }

.image-stack { position: relative; width: 90%; max-width: 600px; margin: 100px auto 50px auto; }
.img-bottom { width: 90%; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); position: relative; top: -140px; /* moves the back image up */ z-index: 1; }
.img-top { position: absolute; width: 40%; max-width: 250px; border-radius: 12px; top: 260px; left: 80%; transform: translateX(-50%); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); z-index: 2; }

/* accord -------------- */
.accordion-button { background-color: #eff8f3; }
.accordion-button:not(.collapsed) { background-color: #14532d; /* Dark green */ color: white; }
.accordion-button:focus { box-shadow: none; }
.accordion-button:hover { background-color: #166534; /* Slightly lighter dark green */ color: white; }
.accordion-item { border-radius: 8px; margin-bottom: 1rem; border: 1px solid #dee2e6; overflow: hidden; font-weight: 400; }
.accordion-body { background-color: #ffffff; color: #495057; font-size: 18px; } 
.accordion { display: flex; /* or: display: grid; */ flex-direction: column; /* grid auto-flow column; works too*/ gap: .01rem; /* the space between items */ }

.map-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0; }
.map-responsive iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; }

.footer-social a i { transition: transform 0.2s ease; }
.footer-social a:hover i { transform: scale(1.2); }

.blog-card { border: none; border-radius: 15px; overflow: hidden; transition: transform 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.blog-card:hover { transform: translateY(-5px); }
.blog-card img { height: 220px; object-fit: cover; }
.blog-sidebar { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); }

.category-badge { background-color: #e0f2f1; color: #00796b; font-size: 0.8rem; margin-right: 0.25rem; }

/* view item page -------------- */
.main-slider img { width: 100%; height: auto; object-fit: contain; }

.thumbs-desktop .thumb-img { width: 100%; height: 80px; object-fit: cover; margin-bottom: 10px; border: 2px solid transparent;
border-radius: 4px; cursor: pointer; }
.slick-current .thumb-img { border-color: #0d6efd; }
.thumbs-mobile .thumb-img { width: 60px; height: 60px; object-fit: cover; margin-right: 10px; border: 2px solid transparent;
border-radius: 4px; cursor: pointer; }
.slick-current .thumb-img { border-color: #0d6efd; }

/* Desktop layout */
@media (min-width: 768px) { 
.layout { display: flex; gap: 1rem; }
.thumbs-desktop .thumb-img { width: 80px; height: 80px; }
.thumbs-desktop .slick-slide { margin-bottom: 10px; }
.thumbs-mobile { display: none !important; }
}

/* Mobile layout */
@media (max-width: 767.98px) {
.thumbs-desktop { display: none !important; }
.thumbs-mobile .thumb-img { width: 60px; height: 60px; }
.thumbs-mobile .slick-slide { margin-right: 10px; }
}

/* -- */
.bg-light { background-color:red; background :red;}

.social-icons a { color: #343a40; /* Default dark */ transition: color 0.3s ease; }
.social-icons a.facebook:hover { color: #3b5998; /* Facebook Blue */ }
.social-icons a.pinterest:hover { color: #E60023; /* pinterest red */ }
.social-icons a.instagram:hover { color: #e1306c; /* Instagram Pink */ }
.social-icons a.youtube:hover { color: #ff0000; /* YouTube Red */ }

div.stickycart { position: -webkit-sticky; background-color:#04934e; color:white; position:fixed;  text-align: center; z-index:1050; width: 100%; bottom:0; }

input[type="radio"] { appearance: none; width: 15px; height: 15px; border: 2px solid black; border-radius: 50%; outline: none;
background-color: white; cursor: pointer; }
input[type="radio"]:checked { background-color: green; }
.required { color :red; position: relative; top: -0.5em; font-size: 80%;}

@media (min-width: 768px) { .ralign { text-align: right; } }
@media (min-width: 768px) { .calign { text-align: center; } }

#voiceBtn { cursor: pointer; }

/* Show mic only on mobile */
@media (max-width: 768px) {
	#voiceBtn { display: inline-flex !important; align-items: center; justify-content: center; }
}