/*
Theme Name: Candeller
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Candeller is a candle shop ecommerce Bootstrap 5 website template by TemplatesJungle.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:
1. VARIABLES
2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.3 Background Color
  2.4 Section
    - Section Paddings
    - Section Margins
  2.5 Buttons
  2.6 Forms
3. SITE STRUCTURE
  3.1 Header
  3.2 Billboard
  3.3 Services
  3.4 Video
  3.5 Footer
4. PAGES
  4.1 About Us Page
  4.2 Shop Page
  4.3 Single Product Page
  4.4 Cart Page
  4.5 Blog Page
  4.6 Single Post Page

/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  --accent-color: #1B4D3E;
  /* Royal green */
  --black-color: #2E2E2E;
  --light-dark: #36332F;
  --gray-color: #FDFDFC;
  --gray-color-300: #F7F7F7;
  --gray-color-400: #EFEFEF;
  --gray-color-500: #d1d1d1;
  --gray-color-600: #999999;
  --gray-color-800: #3A3A3A;
  --light-gray-color: #D7DDDF;
  --primary-color: #1B4D3E;
  /* Royal green */
  --bs-primary-rgb: 27, 77, 62;
  --light-color: #FFF;
  --dark-color: #212529;
  --light-blue-color: #EDF1F3;
  --navbar-color-color: #131814;
  --swiper-theme-color: #1B4D3E;
  --swiper-pagination-color: #1B4D3E;
  --text-color: #2C2C2C;
  --background-color: #F5F5F5;
  --transition-speed: 0.3s;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}

/* Fonts */
:root {
  --body-font: "Jost", sans-serif;
  --heading-font: "Cormorant", serif;
}

/*----------------------------------------------*/
/* 2. GENERAL TYPOGRAPHY */
/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}

body {
  background-color: var(--background-color);
  font-family: var(--body-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.8;
  margin: 0;
  color: var(--text-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  text-transform: uppercase;
  color: var(--black-color);
  letter-spacing: 1.5px;
  line-height: 1.2;
}

h1 {
  font-size: 5.5rem;
}

h2 {
  font-size: 4.5rem;
}

h3 {
  font-size: 3rem;
}

h4 {
  font-size: 2rem;
}

h5 {
  font-size: 1.75rem;
}

p {
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--light-dark);
  margin-bottom: 1.5em;
}

ul {
  color: var(--light-dark);
  margin-bottom: 1.5em;
}

ul.inner-list li {
  font-size: 1.125rem;
  margin-bottom: 0.5em;
}

a {
  color: var(--dark-color);
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1.7px;
  transition: 0.3s color ease-out;
}

a.light {
  color: var(--light-color);
}

a:hover {
  text-decoration: none;
  color: var(--primary-color);
}

.fs-1 {
  font-size: 2rem !important;
}

.fs-2 {
  font-size: 1.75rem !important;
}

.fs-3 {
  font-size: 1.5rem !important;
}

.fs-4 {
  font-size: 1.25rem !important;
}

.fs-5 {
  font-size: 1.125rem !important;
}

.fs-6 {
  font-size: 1rem !important;
}

/* 2.3 Background Color
/*----------------------------------------------*/
.bg-gray {
  background: var(--gray-color);
}

.bg-dark {
  background: var(--dark-color);
}

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

/* 2.3 Shadow
/*----------------------------------------------*/
.shadow {
  box-shadow: 0 4px 15px rgba(0, 0, 0, .08) !important;
}

@media (min-width: 1600px) {
  .container {
    max-width: 1540px;
  }
}

/* 2.4 Section
--------------------------------------------------------------*/
/* - Section Padding
--------------------------------------------------------------*/
.padding-xsmall {
  padding-top: 1em;
  padding-bottom: 1em;
}

.padding-small {
  padding-top: 3em;
  padding-bottom: 3em;
}

.padding-medium {
  padding-top: 5em;
  padding-bottom: 5em;
}

.padding-large {
  padding-top: 8em;
  padding-bottom: 8em;
}

.padding-xlarge {
  padding-top: 10em;
  padding-bottom: 10em;
}

/* - Section Margin
--------------------------------------------------------------*/
.margin-xlarge {
  margin-top: 10em;
  margin-bottom: 10em;
}

/** 2.5 Buttons
--------------------------------------------------------------*/
button {
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1.7px;
  transition: 0.3s color ease-out;
}

.btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 1rem 2.5rem;
  transition: all var(--transition-speed) ease;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
}

.btn:hover {
  background-color: #153D31;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn:focus {
  box-shadow: none;
}

/* Filters Buttons */
#filters .btn {
  border: solid 1px var(--gray-color-500);
  background-color: white;
  color: var(--text-color);
  transition: all 0.3s ease;
}

#filters .btn:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background: none;
}

#filters .btn.is-checked {
  border: solid 1px var(--primary-color);
  color: var(--primary-color);
}

/* Dark Buttons */
.btn-dark {
  color: var(--light-color);
  padding: 10px 22px;
  border: 0;
  transition: 0.3s ease;
}

.btn-dark:hover {
  background-color: var(--primary-color);
  color: var(--light-color);
  border: 0;
}

/* Primary Buttons */
.btn-primary {
  background-color: var(--primary-color);
  color: var(--light-color);
  padding: 10px 22px;
  border: 0;
  transition: 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--black-color);
  color: var(--light-color);
  border: 0;
}

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: none;
}

.form-check-input:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: none;
}

/** 2.6 Forms
--------------------------------------------------------------*/
label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

textarea,
select,
input {
  padding: 8px 0;
  background: none;
  border-top: none;
  border-right: none;
  border-left: none;
  border-image: initial;
  border-bottom: 1px solid var(--black-color);
  outline: none;
}

.form-control {
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-color-500);
  font-size: 1rem;
}

.form-control::placeholder {
  color: var(--gray-color-600);
}

.form-control:focus {
  border-bottom-color: var(--primary-color);
  box-shadow: none;
}

/* - Image Hover Effects
------------------------------------------------------------- */
.zoom-effect {
  background-color: #f5f3ef;
  overflow: hidden;
}

img.zoom-in {
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
}

.zoom-effect:hover img.zoom-in {
  opacity: 0.8;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* Link Effect
 - Place anywhere you want your link to animate
 - Add data-after="Any text" to the link within the class
 - Use span within the anchor tag for the effect to work
------------------------------------------------------------- */
.link-effect a {
  position: relative;
  padding: 0;
  overflow: hidden;
  transition: 0.2s ease-in;
  display: block;
}

.link-effect a::after {
  content: attr(data-after);
  display: inline-block;
  transform: translateY(100%);
  position: absolute;
  left: 0;
  right: 0;
  text-align: inherit;
  transition: inherit;
}

.link-effect a>span {
  display: inline-block;
  transform: translateY(0%);
  transition: inherit;
}

.link-effect:hover a>span {
  transform: translateY(-100%);
}

.link-effect:hover a::after {
  transform: translateY(0%);
}

/* - Preloader
------------------------------------------------------------- */
#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#preloader.hide-preloader {
  opacity: 0;
  visibility: hidden;
}

#loader {
  position: relative;
  left: -9999px;
  width: 24px;
  height: 24px;
  border-radius: 90px;
  background-color: var(--accent-color);
  color: var(--accent-color);
  box-shadow: 9999px 0 0 0 var(--accent-color);
  animation: loader 2s infinite linear;
  animation-delay: 0.2s;
}

#loader::before,
#loader::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}

#loader::before {
  width: 24px;
  height: 24px;
  border-radius: 90px;
  background-color: var(--accent-color);
  color: var(--accent-color);
  animation: loader-before 2s infinite linear;
  animation-delay: 0s;
}

#loader::after {
  width: 24px;
  height: 24px;
  border-radius: 90px;
  background-color: var(--accent-color);
  color: var(--accent-color);
  animation: loader-after 2s infinite linear;
  animation-delay: 0.3s;
}

@keyframes loader {
  0% {
    box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);
  }

  25%,
  50%,
  75% {
    box-shadow: 9999px 0 0 0 var(--accent-color);
  }

  100% {
    box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);
  }
}

@keyframes loader-before {
  0% {
    box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);
  }

  25%,
  50%,
  75% {
    box-shadow: 9984px 0 0 0 var(--accent-color);
  }

  100% {
    box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);
  }
}

@keyframes loader-after {
  0% {
    box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);
  }

  25%,
  50%,
  75% {
    box-shadow: 10014px 0 0 0 var(--accent-color);
  }

  100% {
    box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);
  }
}

/* - Swiper arrows
------------------------------------------------------------- */
.swiper-buttons .swiper-prev,
.swiper-buttons .swiper-next {
  color: var(--black-color);
  border: none;
  background: none;
  transition: 0.3s ease;
}

.swiper-prev.swiper-button-disabled,
.swiper-next.swiper-button-disabled {
  color: var(--gray-color-500);
  background: none;
}

.swiper-buttons span {
  color: var(--gray-color-500);
}

/*----------------------------------------------*/
/* 3. SITE STRUCTURE */
/*----------------------------------------------*/

/* 3.1 Header
/*----------------------------------------------*/
/* - Search Bar
------------------------------------------------------------- */
#search-bar {
  position: relative;
}

#search-bar input[type="text"] {
  color: var(--dark-gray-color);
  height: 40px;
  display: inline-block;
  border: none;
  outline: none;
  padding-right: 74px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}

#search-bar input[type="text"]:focus:hover {
  border-bottom: 1px solid var(--black-color);
}

#search-bar input[type="text"]:focus {
  width: 200px;
  z-index: 1;
  border-bottom: 1px solid var(--black-color);
  cursor: text;
}

#search-bar button {
  background: transparent;
  border: none;
}

/* cart dropdown */
.cart-dropdown .dropdown-menu {
  min-width: 21rem;
  border: 1px solid var(--gray-color-400);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

@media only screen and (max-width: 564px) {
  .cart-dropdown .dropdown-menu {
    min-width: fit-content;
  }
}

.nav-link {
  color: var(--text-color) !important;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.nav-link.active {
  color: var(--primary-color) !important;
}

.nav-link:focus,
.nav-link:hover {
  color: var(--primary-color) !important;
}

/* Subtle underline hover effect for nav links */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--primary-color);
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
}

.nav-link:hover::after {
  transform: translateX(0);
}

.nav-link.dropdown-toggle::after {
  display: none;
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover {
  color: var(--black-color);
  background-color: var(--gray-color-400);
}

/* 3.2 Billboard
/*----------------------------------------------*/
.swiper-slide .banner-content {
  max-height: fit-content;
  margin: auto;
  margin-left: 10%;
  padding: 6%;
}

#billboard .main-slider-pagination {
  z-index: 999;
  bottom: 62px;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  background-color: var(--light-color);
  opacity: 0.5;
  width: 18px;
  height: 18px;
  margin: 0 13px !important;
  transition: 0.3s ease;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--light-color);
  opacity: 1;
}

/* 3.3 Services
/*----------------------------------------------*/
.icon-box-icon {
  width: fit-content;
  height: fit-content;
  padding: 25px;
}

/* 3.4 Video
/*----------------------------------------------*/

/* overide */
.modal-dialog {
  max-width: 800px;
  margin: auto;
  height: 100vh;
  display: flex;
  align-items: center;
}

.modal-content {
  padding: 0;
  background-color: #f5f3ef;
  border: none;
  border-radius: 0
}

/* 3.5 Footer
/*----------------------------------------------*/
/*------------ Social Icon -----------*/
.social-links svg {
  width: 20px;
  height: 20px;
  color: var(--text-color);
  transition: transform 0.3s ease;
}

.social-links svg:hover {
  color: var(--primary-color);
  transform: translateY(-3px);
}

.social-links li {
  padding-right: 30px;
}

#footer-bottom a {
  color: var(--text-color);
}

#footer-bottom a:hover {
  color: var(--primary-color);
}

/* 4. PAGES
/*----------------------------------------------*/

/* 4.1 About Us Page
/*----------------------------------------------*/

/* BreadCrumbs */
.breadcrumbs a {
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: normal;
}

/* Newsletter */
#newsletter .form-control {
  font-size: inherit;
}

#newsletter form input {
  background: none;
}

#newsletter form input:focus {
  box-shadow: none;
}

/* 4.2 Shop Page
--------------------------------------------------------------*/
/* ----------- SideBar -----------*/
.sidebar input.search-field {
  background: none;
  border: none;
  outline: none;
  outline-offset: 0;
}

h5.widget-title {
  font-size: 1.4em;
  margin-bottom: 15px;
}

@media only screen and (max-width: 991px) {
  .widget-search-bar form {
    flex-wrap: wrap;
  }
}

/* ----------- Pagination -----------*/
.paging-navigation .pagination .page-numbers {
  color: var(--gray-color-500);
}

.paging-navigation .pagination .page-numbers:hover,
.paging-navigation .pagination .page-numbers.current {
  color: var(--primary-color);
}

/* 4.3 Single Product Page
/*----------------------------------------------*/
/*---- Single Product Image ----------*/
.single-product .large-swiper {
  padding-left: 0;
}

.product-preview .swiper-slide {
  height: fit-content;
  padding-bottom: 10px;
  transition: cubic-bezier(0.22, 0.78, 0.71, 1.01);
}

.swiper-slide-thumb-active img {
  border: 1px solid var(--accent-color);
}

/*---- Single Product Information ----------*/
.product-info del {
  color: var(--gray-color-500);
}

.product-info hr {
  color: var(--gray-color-500);
}

.rating-container .rating {
  display: flex;
  padding-right: 4px;
  color: var(--black-color);
}

.product-info .product-price strong {
  font-size: 1.6em;
  padding-right: 10px;
}

.product-info .select-item {
  margin-right: 8px;
}

.input-group {
  padding: 6px;
  background-color: var(--gray-color-400);
}

.input-group button {
  border: none;
}

/*---- Product Tabs ----------*/
.nav-tabs {
  border-bottom: 1px solid var(--black-color);
}

.nav-tabs .nav-link {
  color: var(--black-color);
  font-weight: 600;
}

.nav-tabs .nav-link:focus {
  box-shadow: none;
}

.nav-tabs .nav-link {
  background: none;
  border: none;
}

.nav-tabs button.nav-link.active {
  color: var(--primary-color);
  background: none;
}

.nav-tabs button.nav-link:hover {
  color: var(--primary-color);
}

.tabs-listing .tab-content {
  border-bottom: 1px solid var(--black-color);
  padding: 40px 0;
}

.product-tabs .review-item {
  width: 50%;
  margin-bottom: 20px;
}

.product-tabs .review-item .image-holder {
  margin-right: 10px;
}

@media screen and (max-width: 991px) {
  .product-tabs .review-item {
    width: 100%;
    flex-wrap: wrap;
  }

  .product-tabs .review-item .image-holder {
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 991px) {
  .cart-header {
    display: none;
  }
}

/* 4.4 Cart Page
-----------------------------------------------------*/
.shopify-cart .table th {
  width: 36%;
}

.table>:not(caption)>*>* {
  padding: 1.5rem;
}

.shopify-cart .cart-product-detail {
  min-width: 250px;
}

@media screen and (max-width: 775px) {
  .shopify-cart .table thead {
    display: none;
  }

  .shopify-cart .table tbody {
    border: none;
  }

  .shopify-cart .table tbody td {
    display: block;
  }

  .table>:not(caption)>*>* {
    padding: 1rem;
  }
}

/* 4.5 Blog Page
--------------------------------------------------------------*/
/*------------ Sidebar -----------*/
.widget.sidebar-recent-post .card-image {
  max-width: 120px;
}

.sidebar-post-item h4.card-title {
  font-size: 1.2em;
}

/* 4.6 Single Post Page
--------------------------------------------------------------*/
#single-post-navigation .post-navigation span.page-nav-title {
  font-size: 1.5em;
}

.post-navigation svg {
  width: 30px;
  height: 45px;
}

.post-navigation:hover svg,
.post-navigation:focus svg {
  fill: var(--primary-color);
}

/* Add or modify spacing for blog posts section */
#blog-posts {
  padding-top: var(--padding-large);
  padding-bottom: var(--padding-large);
}

#blog-posts .display-header h4 {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

/* Header styles */
.site-header {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-speed) ease;
}

.navbar-brand img {
  max-height: 50px;
  transition: transform var(--transition-speed) ease;
}

.navbar-brand:hover img {
  transform: scale(1.05);
}

/* Hero section */
#billboard {
  height: 90vh;
  position: relative;
  overflow: hidden;
}

.banner-content {
  background: rgba(255, 255, 255, 0.9);
  padding: 3rem;
  max-width: 500px;
  transform: translateY(0);
  transition: transform var(--transition-speed) ease;
}

.banner-content:hover {
  transform: translateY(-10px);
}

/* Product cards */
.product-item {
  transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
}

.product-item:hover {
  transform: translateY(-10px);
}

/* Disable transition for hidden Isotope items */
.product-item.isotope-hidden {
  transition: none !important;
}

/* Rule for items hidden by Isotope */
.isotope-hidden {
  opacity: 0;
  visibility: hidden !important;
  pointer-events: none !important;
}

.product-content {
  background: white;
  padding: 1.5rem;
  box-shadow: 0 4px 15px rgba(27, 77, 62, 0.1);
}

/* Buttons */
.btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 0.8rem 2rem;
  transition: all var(--transition-speed) ease;
}

.btn:hover {
  background-color: #153D31;
  /* Darker royal green */
  color: white;
  transform: translateY(-2px);
}

/* Newsletter section */
#newsletter {
  background: linear-gradient(rgba(27, 77, 62, 0.8), rgba(27, 77, 62, 0.8)), url('images/hero-img.jpg');
  background-size: cover;
  background-position: center;
  color: white;
}

/* Footer */
#footer {
  background-color: white;
  color: var(--text-color);
  border-top: 1px solid var(--gray-color-500);
}

#footer-bottom {
  background-color: white;
  color: var(--text-color);
}

.footer-menu h4 {
  color: var(--black-color);
}

.footer-menu a {
  color: var(--text-color);
}

.footer-menu a:hover {
  color: var(--primary-color);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease forwards;
}

/* Add slide-in green reveal animation */
.animate-reveal-green {
  position: relative;
  overflow: hidden;
}

.animate-reveal-green::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1B4D3E;
  /* Royal green background */
  z-index: 1;
  transform: translateX(-100%);
  /* Start off-screen to the left */
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  /* Smooth slide transition */
}

.animate-reveal-green.is-visible::before {
  transform: translateX(0);
  /* Slide in */
}

.animate-reveal-green .zoom-in,
/* Target images within zoom-effect */
.animate-reveal-green img

/* Target other direct images */
  {
  opacity: 0;
  transform: translateX(50px);
  /* Start slightly off-screen right */
  transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
  /* Fade and slide in after green reveal */
  position: relative;
  /* Add positioning */
  z-index: 2;
  /* Ensure image is above the green overlay */
}

.animate-reveal-green.is-visible .zoom-in,
.animate-reveal-green.is-visible img {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Also ensure product content is positioned correctly if needed */
.animate-reveal-green .product-content {
  opacity: 0;
  transform: translateX(50px);
  /* Start slightly off-screen right */
  transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
  /* Fade and slide in after green reveal */
  position: relative;
  /* Add positioning */
  z-index: 2;
  /* Ensure content is above the green overlay */
}

.animate-reveal-green.is-visible .product-content {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {

  /* General adjustments */
  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  h3 {
    font-size: 2rem;
  }

  h4 {
    font-size: 1.5rem;
  }

  .padding-large {
    padding-top: 3em;
    padding-bottom: 3em;
  }

  /* Header adjustments */
  .site-header .container {
    padding: 0 15px;
    /* Add some horizontal padding to the container */
  }

  .navbar-brand img {
    max-height: 40px;
    /* Slightly reduce logo size on mobile */
  }

  .navbar-toggler {
    font-size: 1rem;
    /* Adjust toggler text size */
  }

  /* Offcanvas menu adjustments */
  .offcanvas-body {
    padding: 20px;
    /* Add padding inside the offcanvas menu */
  }

  .offcanvas-body #navbar {
    padding: 0;
    border-bottom: none;
    /* Remove border in offcanvas */
  }

  .offcanvas-body .nav-item {
    margin: 0 0 15px 0;
    /* Add vertical spacing between menu items */
  }

  .offcanvas-body .nav-link {
    padding: 10px 0;
  }

  .offcanvas-header {
    padding: 15px;
  }

  /* Hide the search bar in the main header on mobile */
  #header-nav #search-bar {
    display: none;
  }

  /* Banner section adjustments */
  .banner-content {
    padding: 1.5rem;
    max-width: 100%;
    margin-left: 0;
    /* Center banner content on mobile */
    text-align: center;
    /* Center text */
  }

  #billboard {
    height: 70vh;
  }

  /* Services section adjustments */
  .icon-box {
    flex-direction: column;
    /* Stack icon and text vertically */
    text-align: center;
    /* Center text */
    align-items: center;
    /* Center items */
  }

  .icon-box-icon {
    margin-bottom: 1em;
    /* Add space between icon and text */
  }

  /* Add horizontal padding to royal green sections */
  #company-services,
  .product-grid,
  #blog-posts {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Product grid adjustments */
  .grid .product-item {
    width: 100%;
    /* Make product items full width */
  }

  /* Adjust filter button spacing on mobile */
  #filters .btn {
    margin-bottom: 0.5em;
    /* Add space between filter buttons */
    padding: 0.5rem 1rem;
    /* Adjust padding for mobile buttons */
  }

  /* Testimonials adjustments */
  .review-item {
    width: 100%;
    /* Make testimonial items full width */
  }

  /* Blog posts adjustments */
  #blog-posts .row>.col-lg-4 {
    width: 100%;
    /* Make blog post items full width */
    margin-bottom: 20px;
    /* Add vertical space between blog posts */
  }

  #blog-posts .row>.col-lg-4:last-child {
    margin-bottom: 0;
    /* Remove bottom margin for the last item */
  }

  /* Footer adjustments */
  .footer-menu {
    margin-bottom: 2em;
    /* Add space between footer columns */
  }

  .footer-menu ul.menu-list li.menu-item {
    margin-bottom: 5px;
    /* Reduce space between footer links */
  }

  .social-links {
    margin-top: 1em;
    /* Add space above social links in footer */
  }

  .social-links li {
    padding-right: 15px;
    /* Adjust social link spacing */
  }

  .copyright {
    flex-direction: column;
    /* Stack copyright text vertically */
    text-align: center;
  }

  .copyright p {
    margin-bottom: 0.5em;
    /* Add space between copyright lines */
  }
}

/* Remove cart-related styles */
.cart-dropdown,
.cart-header,
.shopify-cart,
.cart-section {
  display: none;
}