/*
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 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:             #DCC69D;
  --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:            #DCC69D;
  --bs-primary-rgb:           220,198,157;
  --light-color:              #FFF;
  --dark-color:               #212529;
  --light-blue-color:         #EDF1F3;
  --navbar-color-color:       #131814;
  --swiper-theme-color:       #4A4A4A;
  --swiper-pagination-color:  #4A4A4A;
}

/* 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(--gray-color);
  font-family: var(--body-font);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--heading-font);
  text-transform: uppercase;
  color: var(--black-color);
  letter-spacing: 0.96px;
}
h1{
  font-size: 5rem;
}
h2{
  font-size: 4rem;
}
h3{
  font-size: 2.625rem;
  line-height: 127%;
}
h4{
  font-size: 1.75rem;
  line-height: 127%;
}
h5{
  font-size: 1.5rem;
}
p {
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--light-dark);
}
ul {
  color: var(--light-dark);
}
ul.inner-list li {
  font-size: 1.2em;
}
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: 1.75rem !important;
}
.fs-2{
  font-size: 1.625rem !important;
}
.fs-3{
  font-size: 1.375rem !important;
}
.fs-4{
  font-size: 1.25rem !important;
}
.fs-5{
  font-size: 1.125rem !important;
}
.fs-6{
  font-size: 0.875rem !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 .5rem 1rem rgba(0,0,0,.05)!important;
}

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

/* 2.4 Section
--------------------------------------------------------------*/
/* - Section Padding
--------------------------------------------------------------*/
.padding-xsmall {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.padding-small {
  padding-top: 2em;
  padding-bottom: 2em;
}
.padding-medium {
  padding-top: 4em;
  padding-bottom: 4em;
}
.padding-large {
  padding-top: 7em;
  padding-bottom: 7em;
}
.padding-xlarge {
  padding-top: 9.5em;
  padding-bottom: 9.5em;
}

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

/** 2.5 Buttons
--------------------------------------------------------------*/
button{
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1.7px;
  transition: 0.3s color ease-out;
}
.btn {
  border: solid 1px var(--black-color);
  padding: 6px 30px;
  border-radius: 0;
  transition: 0.3s ease-in;
}
.btn:hover {
  color: var(--accent-color);
  background-color: var(--dark-color);
}
.btn:focus {
  box-shadow: none;
}

/* Filters Buttons */
#filters .btn{
  border: solid 1px var(--gray-color-500);
}
#filters .btn:hover {
  color: var(--dark-color);
  border: solid 1px var(--black-color);
  background: none;
}
#filters .btn:hover {
  color: var(--dark-color);
  border: solid 1px var(--black-color);
  background: none;
}
#filters .btn.is-checked{  
  border: solid 1px var(--black-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(--accent-color);
  border-color: var(--accent-color);
  box-shadow: none;
}
.form-check-input:focus {
    border-color: var(--accent-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 {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.5;
  color: var(--black-color);
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
.form-control::placeholder {
  color: var(--gray-color-600);
}
.form-control:focus {
  background: none;
  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;
}
@media only screen and (max-width: 564px) {
  .cart-dropdown .dropdown-menu {
    min-width: fit-content;
  }
}

.nav-link{
  color: var(--black-color);
  font-weight: 400;
  text-transform: uppercase;
}
.nav-link.active{
  color: var(--accent-color);
}
.nav-link:focus, .nav-link:hover {
  color: var(--accent-color);
}
.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(--gray-color-500);
  transition: 0.3s ease;
}
.social-links svg:hover {
  color: var(--primary-color);
}
.social-links li {
  padding-right: 30px;
}
#footer-bottom a{
  letter-spacing: normal;
}

/* 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);
}
/* Blog card image wrapper */
#blog-posts .card-image {
  height: 260px;          /* uniform height */
  overflow: hidden;
}

/* Blog images */
#blog-posts .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* magic line */
}
#newsletter1::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

#newsletter1::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.85);
}

#newsletter1:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.85);
}

.filter-btn.active {
  background-color: #000;
  color: #fff;
}

.input-box {
  border: 2px solid #000;
  border-radius: 10px;
  padding: 6px;
  background: #fff;
}

.input-box .form-control {
  border: none;
  box-shadow: none;
  background: transparent;
}

.input-box:focus-within {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
}

textarea.form-control {
  resize: vertical;
}



/* Fix clickable image links */
.image-link {
  all: unset;
  display: inline-block;
  cursor: pointer;
}

.blog-image {
  pointer-events: auto;
}



#billboard .banner-content {
  position: absolute;
  left: 1%;
  top: 50%;
  transform: translateY(-50%);
  max-width: 500px;
}

#billboard h2 {
  color: #2b2b2b;
  line-height: 1.1;
}

#billboard h2 span {
  display: block;
  font-size: 0.6em;
  letter-spacing: 2px;
  margin-top: 0.5rem;
}

.hero-slide {
  background-image: url(images/frontpageIMG.png);
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 55vh;   /* 👈 THIS lets content below appear */
  position: relative;
}

#company-services {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

#brand-logo .main-logo {
  max-width: 400px;   /* try 240–300px */
  width: 100%;
  height: auto;
}

/* Mobile adjustments for hero section */
@media (max-width: 767px) {
  #billboard .banner-content h2 {
    font-size: 1.3rem;       /* smaller header font */
    text-align: left;       /* align text left */
    max-width: 90%;         /* prevent overlapping image */
  }

  #billboard .banner-content h2 span {
    display: block;
    font-size: 0.9rem;     /* smaller subtitle */
  }

  #billboard .banner-content .btn {
    font-size: 0.7rem;     /* smaller button text */
    padding: 0.2rem 1rem;  /* smaller button size */
  }
}
.product-grid {
  padding-top: 0.2rem; /* reduce top padding from section above */
}

#filters {
  padding-top: 0;    /* remove extra padding above buttons */
  padding-bottom: 1rem; /* optional: small space below */
}

/* Mobile styling for products */
@media (max-width: 767px) {
  /* Make each product take 50% width (2 per row) */
  .product-item {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 0.5rem;  /* optional spacing */
    padding-right: 0.5rem;
    margin-bottom: 1rem;    /* spacing between rows */
  }

  /* Shrink product images a little */
  .product-item .product-image {
    max-width: 90%;  /* shrink images slightly */
    height: auto;
    margin: 0 auto;  /* center image */
  }

  /* Center product titles under smaller images */
  .product-item h5,
  .product-item p {
    font-size: 0.9rem; /* smaller text */
    text-align: center;
  }

  /* Adjust add-to-cart button size */
  .product-item .btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
  }
}



/* Mobile adjustments for testimonials */
@media (max-width: 767px) {
  #testimonials blockquote {
    font-size: 1rem; /* smaller text for mobile */
    line-height: 1.4; /* optional: improves readability */
  }

  #testimonials .author-detail .name {
    font-size: 0.85rem; /* smaller author names on mobile */
  }

  #testimonials h3.text-center {
    font-size: 1.5rem; /* smaller section heading */
  }
}
/* Reduce space above Free Delivery section */
#company-services {
  padding-top: 1.5rem; /* reduce top space */
}
/* Make all filter buttons identical */
#filters .btn {
  padding: 10px 15px;
  border: 1px solid #000;
  background: transparent;
  color: #000;
  font-size: 12px;
  letter-spacing: 1px;
  border-radius: 0;
}

/* Active button style (All by default) */
#filters .btn.is-checked {
  background: #000;
  color: #fff;
}

/* Reduce space above product image */
.product-item {
  padding-top: 0.5rem !important;
}


/* Tighten spacing above Add to Cart */
.product-item p {
  margin-bottom: 0.4rem;
}

.product-item h5 {
  margin-bottom: 0.3rem;
}



/* Pull image closer to top */
.product-grid.padding-large {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

#about .about-content {
  padding-top: 3rem;
}
#products.padding-large {
  padding-top: 2rem !important;
  padding-bottom: 2.5rem !important;
}

.footer-menu img {
  max-width: 120px;
  height: auto;
}

@media (max-width: 800px) {
  .footer-logo {
    max-width: 90px;
  }
}

@media (max-width: 991px) {
  .navbar .form-control {
    display: none;
  }
}
.nav-link.active {
  font-weight: 400;
  border-bottom: 1px solid #000;
}

.search-input {
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
  background: transparent;
  font-size: 14px;
}
.hero-section h1 {
  letter-spacing: 2px;
}
.icon-box-icon svg {
  color: #000;
}
 

  /* Make hero title smaller */
  .about-hero h1 {
    font-size: 2.5rem;   /* desktop size */
    font-weight: 600;
  }

  /* Make it even smaller on mobile */
  @media (max-width: 500px) {
    .about-hero h1 {
      font-size: 1.4rem;
    }

    .about-hero p {
      font-size: 0.6rem;
    }
  }
  .hero-slide {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  /* shrink hero images safely */
  .hero-slide img {
    max-height: 320px;
    object-fit: cover;
  }
  
  /* ===== HEADLINE HIERARCHY ===== */
  .banner-content h2 {
    letter-spacing: 1px;
  }
  
  @media (max-width: 576px) {
    .banner-content h2 {
      font-size: 2.6rem; /* ~12% larger */
      letter-spacing: 0.5px;
    }
  
    .banner-content h2 span {
      font-size: 1.1rem;
      font-weight: 400;
    }
  }
  
  /* ===== SHOP NOW BUTTON STRONGER ===== */
  .banner-content .btn {
    background: #111;
    color: #fff;
    border: none;
    padding: 14px 22px;
  }
  
  .banner-content .btn:hover,
  .banner-content .btn:focus {
    background: #000;
    color: #fff;
    transform: translateY(-1px);
  }
  
  /* ===== HAMBURGER FIXES ===== */
  .navbar-toggler {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .navbar-toggler:focus,
  .navbar-toggler:hover {
    background: rgba(0,0,0,0.06);
    border-radius: 8px;
  }
  
  /* ===== PRODUCT IMAGE POLISH ===== */
  .product-image {
    padding: 6px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  }
  
  /* ===== TRUST BADGES SCANNABILITY ===== */
  #company-services .icon-box {
    margin-bottom: 22px;
  }
  
  #company-services .icon-box-icon svg {
    width: 25px;
    height: 25px;
  }
  
  #company-services .card-title {
    font-weight: 700;
  }
  
  #company-services p {
    max-width: 220px;
  }

  @media (max-width: 576px) {

    #billboard.container {
      padding-left: 12px;
      padding-right: 12px;
    }
  
    .hero-slide {
      padding: 28px 18px !important;
    }
  
    .banner-content {
      text-align: center;
    }
  
    .banner-content h2 {
      font-size: 2.4rem;
      letter-spacing: 0.5px;
      line-height: 1.1;
      margin-bottom: 10px;
    }
  
    .banner-content h2 span {
      font-size: 1.05rem;
      font-weight: 400;
      letter-spacing: 0.5px;
    }
  
    /* stronger CTA */
    .banner-content .btn {
      background: #111;
      color: #fff;
      border: none;
      padding: 14px 20px;
      width: 100%;
      max-width: 240px;
    }
  
    .banner-content .btn:active {
      transform: scale(.98);
    }
  
    /* shrink hero image if present in slide */
    .hero-slide img {
      max-height: 300px;
      object-fit: cover;
      margin-top: 14px;
      border-radius: 14px;
    }
  }
  
  /* =========================
     NAVBAR MOBILE FIX
  ========================= */
  
  .navbar-brand {
    display: flex;
    align-items: center;
  }
  
  .navbar-toggler {
    padding: 10px;
    border-radius: 10px;
  }
  
  .navbar-toggler:focus,
  .navbar-toggler:hover {
    background: rgba(0,0,0,.06);
  }
  
  /* =========================
     PRODUCT IMAGE POLISH
  ========================= */
  
  .product-image {
    padding: 6px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  }
  .icon-box-content{
    padding: 0px 0px;
  }

  @media (max-width: 576px) {

    #company-services .icon-box {
      gap: 6px;
    }
  
    #company-services .icon-box-icon {
      width: 36px;
      height: 36px;
      
    }
  
    #company-services h6 {
      font-size: 14px;
    }
  
    #company-services p {
      font-size: 12px;
    }
  
  }
  
 
/* Show 3 products per row */
.product-swiper .swiper-slide{
  width: 33.333%;
}

/* Product image styling */
.product-img{
  width: 100%;
  height: 230px;
  object-fit: contain;
  border-radius: 10px;
}

/* Center product text */
.product-item{
  text-align:center;
}

/* Product title */
.product-content h5 a{
  color:#111;
  text-decoration:none;
}

/* Hover effect */
.product-content h5 a:hover{
  color:#888;
}

.product-content h5 {
  font-size: 14px;   /* makes the title smaller */
  font-weight: 500;
  margin-top: 8px;
}

.product-content h5 a {
  font-size: 18px;
}




/* Ensure the icon container and SVG render correctly on mobile */
@media (max-width: 576px) {
  #company-services .icon-box-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto !important; /* prevent shrinking */
  }

  #company-services .icon-box-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    flex: 0 0 auto !important;  /* prevent flex shrink */
    visibility: visible;
    opacity: 1;
  }

  /* Ensure paths inherit color */
  #company-services .icon-box-icon svg path {
    fill: currentColor ;
  }
}