/**
* Template Name: Nexa
* Template URL: https://bootstrapmade.com/nexa-bootstrap-agency-template/
* Updated: Aug 19 2025 with Bootstrap v5.3.7
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Vazirmatn",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Vazirmatn",  sans-serif;
  --nav-font: "Vazirmatn",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444d4d; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #003a36; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #018880; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --bs-pagination-active-bg:#018880;
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #0b0b0b;               /* desktop link color (black) */
  --nav-hover-color: var(--accent-color); /* hover & active use your brand green */  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #444d4d; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #018880; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f1f8f7;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #005751;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --accent-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #018880;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

.gslide-title{
  font-family: var(--heading-font) !important;
  text-align: center;
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Styles from Instant
--------------------------------------------------------------*/
.hero .hero-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--heading-color);
  line-height: 1;
  margin-bottom: 25px;
  letter-spacing: -0.02em;
}

.hero .hero-title .typed::after {
  content: "";
  position: absolute;
  bottom: -5px;
  right: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #8b5cf6 50%) 100%);
  border-radius: 2px;
}

.hero .hero-title .typed {
  background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #8b5cf6 50%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  text-decoration: none !important;

}

.hero .hero-title .typed {
  background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #8b5cf6 50%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.hero .hero-title .typed::after {
  content: "";
  position: absolute;
  bottom: +5px;
  right: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #8b5cf6 50%) 100%);
}

@media (max-width: 768px) {
  .hero .hero-title {
    font-size: 36px;
  }
}

@media (max-width: 575px) {
  .hero .hero-title {
    font-size: 28px;
  }
}

/*--------------------------------------------------------------
#  WooCommerce Mini-Cart.php Style
--------------------------------------------------------------*/
/* Container */
.mini-cart .mini-cart-body{ max-height: 340px; overflow:auto; padding: 6px 0; }
.mini-cart .mini-cart__empty{ margin: 6px 0 10px; opacity:.8; }

/* List + items */
.mini-cart .mini-cart__list{ list-style:none; margin:0; padding:0; }
.mini-cart .mini-cart__item{
  display:grid;
  grid-template-columns: 56px 1fr 20px; /* thumb | meta | remove */
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.mini-cart .mini-cart__item:last-child{ border-bottom: 0; }

/* Thumb */
.mini-cart .mini-cart__thumb img{
  width:56px; height:56px; object-fit:cover;
  border-radius:10px; display:block;
}

/* Title + qty/price */
.mini-cart .mini-cart__title{
  display:block;
  color: var(--heading-color, #0b2d2b);
  font-size:14px; font-weight:700; line-height:1.35;
  text-decoration:none;
  margin-bottom:4px;
}
.mini-cart .mini-cart__qtyprice{
  font-size:12px; color:#657; display:flex; gap:6px;
}

/* Remove */
.mini-cart .mini-cart__remove{
  text-decoration:none; color:#b23; font-size:20px; line-height:1;
  opacity:.75; transition:opacity .2s, transform .2s;
  margin-left: 5px;
}
.mini-cart .mini-cart__remove:hover{ opacity:1; transform:scale(1.06); }

/* Total + footer */
.mini-cart .mini-cart__total{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:10px; margin-top:10px; border-top:1px solid rgba(0,0,0,.08);
  font-weight:700;
}
.mini-cart .mini-cart__footer{ margin-top:10px; display:flex; justify-content:flex-start; }

/* Scrollbar polish (optional) */
.mini-cart .mini-cart-body::-webkit-scrollbar{ width:8px; }
.mini-cart .mini-cart-body::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--accent-color, #0b7a71), transparent 70%);
  border-radius: 8px;
}


/*--------------------------------------------------------------
#   Mini Cart button  
--------------------------------------------------------------*/

/* Keep the cart icon aligned like the socials */
.header-social-links > .mini-cart,
.header-social-links > .mini-cart .cart-btn { display: inline-flex; align-items: center; padding-right: 10px; }

.bi-person-circle{
  line-height: 0 !important;
}

.mini-cart .cart-btn{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--nav-color); text-decoration: none;
  font-size: 22px; line-height: 0; padding: 5px;
  transition: color .18s ease, transform .18s ease;
}
.mini-cart .cart-btn:hover{ color: var(--accent-color); transform: translateY(-1px); }

/* small red badge */
.mini-cart .cart-count{
  position: absolute;
  top: -3px; right: -5px;        /* default (RTL & most LTR cases) */
  min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 9999px; display: grid; place-items: center;
  background: #dc3545; color: #fff;
  font: 600 9px/1 Vazirmatn, system-ui, sans-serif;
  box-shadow: 0 6px 14px rgba(220,53,69,.30);
}

/* Dropdown panel */
.mini-cart{ position: relative; z-index: 1100; } /* above header blur */
.mini-cart .mini-cart-dropdown{
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 100%;              /* NO GAP under the icon */
  margin-block-start: 0;                /* keep 0 so hover doesn't break */
  width: min(88vw, 360px);
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.12);
  padding: 12px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

/* open on hover (desktop) */
@media (hover:hover){
  .mini-cart:hover .mini-cart-dropdown{
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }
}

/* dropdown internals */
.mini-cart .mini-cart-head{ font-weight: 700; margin: 2px 0 8px; color:#0b0b0b; }
.mini-cart .mini-cart-body{ max-height: 48vh; overflow:auto; }
.mini-cart .mini-cart-empty{ margin: 10px 0 6px; color:#667; opacity:.8; }

/* icon-only action row */
.mini-cart .mini-cart-actions{
  display: flex;
  width: 100%;
}
.mini-cart .mini-cart-actions .icon-btn{
  width: 40px; height: 40px;
  margin-inline-start: auto;
  border-radius: 12px;
  display: grid;                 /* center both axes */
  place-items: center;
  padding: 0;                    /* avoid extra offset */
  line-height: 0;                /* remove font baseline space */
  background: var(--accent-color);
  color: #fff;
  transition: filter .18s ease, transform .18s ease;
}

.mini-cart .mini-cart-actions .icon-btn i{
  display: block;                /* no inline baseline */
  font-size: 20px;
  line-height: 1;
  /* optional micro-nudge if you still see a hairline offset */
  /* transform: translateY(-0.5px); */
}
.mini-cart .mini-cart-actions .icon-btn:hover{
  background: color-mix(in srgb, var(--accent-color), transparent 78%);
  transform: translateY(-1px);
}

/* Optional: hide the dropdown on very small screens (tap goes to cart) */
@media (max-width: 575.98px){
  .mini-cart .mini-cart-dropdown{ display: none; }
}

.toast-minicart,
.toast-copylink{
  position: fixed;
  inset-inline-start: 16px; inset-block-end: 16px; /* RTL-safe */
  background: var(--accent-color); color: #fff;
  padding: 10px 14px; border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(-24px);
  transition: opacity .25s, transform .25s;
  z-index: 2000;
}
.toast-minicart.show{ opacity:1; transform:none; }

.toast-minicart.show,
.toast-copylink.show{
  opacity:1; transform:none;
}

.toast-copylink{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.toast-copylink i.bi{
  font-size: 1.1rem;
  line-height: 1;
}




/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  padding: 15px 0;
  box-sizing: border-box;                 
  border-bottom: 1px solid transparent;
  transition: background-color .5s, border-color .5s, color .5s, backdrop-filter .5s;
  z-index: 1061;
}

.scrolled .header {
  background-color: color-mix(in srgb, var(--background-color) 70%, transparent 30%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: color-mix(in srgb, var(--default-color), transparent 90%);
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 46px;
  margin-left: 8px;
}

.header .logo h1 {
  font-size: 26px;
  margin: 0;
  font-weight: 800;
  color: var(--default-color);
}

.header .header-social-links {
  padding-left: 5px;
 
}
.telegram {
  line-height: 0;
}
.instagram {
  line-height: 0;
}
.whatsapp {
  line-height: 0;
}

.header .header-social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding-right: 6px;
  display: inline-block;
  transition: 0.3s;
  font-size: 14px;
}


.bi-cart4{
  font-size: 24px;
}

.bi-person-bounding-box{
  font-size: 24px;
}

.header .header-social-links a:hover {
  color: var(--accent-color);
}

.header .header-social-links a i {
  line-height: 0px;
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .header-social-links {
    order: 2;
  }

  .header .navmenu {
    order: 3;
  }
}


/* Price slider look: minimal, matches the theme accent */
.js-price-filter .ui-slider{
  position: relative;
  height: 8px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
}

.js-price-filter .ui-slider-range{
  background: var(--accent-color);
  border-radius: inherit;
}

.js-price-filter .ui-slider-handle{
  top: -.45rem;                 /* centers the 1.1rem knob on 8px track */
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent-color);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  outline: none;
}

.js-price-filter .ui-slider-handle:hover{
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-color) 25%, transparent);
}

.js-price-filter .ui-slider-handle:focus-visible{
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent-color) 35%, transparent);
}

/* prevent any parent from clipping the focus ring */
.js-price-filter, .js-price-filter *{ overflow: visible; }


.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle{
  background-color: var(--accent-color);
}

/* Kill jQuery-UI blue focus/active styles on the price slider */
.js-price-filter .ui-slider-handle,
.js-price-filter .ui-slider-handle:focus,
.js-price-filter .ui-slider-handle:active,
.js-price-filter .ui-slider-handle.ui-state-hover,
.js-price-filter .ui-slider-handle.ui-state-focus,
.js-price-filter .ui-slider-handle.ui-state-active{
  background: #fff !important;
  border: 2px solid var(--accent-color) !important;
  outline: none !important;
  box-shadow: none !important; /* we'll add our own ring below */
}

/* Keep an accessible, accent-colored ring for keyboard focus only */
.js-price-filter .ui-slider-handle:focus-visible{
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent-color) 35%, transparent) !important;
}

/* Optional: remove mobile tap highlight */
.js-price-filter .ui-slider-handle{
  -webkit-tap-highlight-color: transparent;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 18px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-right: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-left: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    right: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    right: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    right: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-left: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    left: 15px;
    margin-left: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Carousel
--------------------------------------------------------------*/

/* Desktop: ~21:9   Mobile: ~4:5   (tweak to taste) */
.hero-ratio { --bs-aspect-ratio: 30%; }          /* ≈ 21:9 */

/* Phones: keep slides wide, not tall */
@media (max-width: 767.98px){
  .hero-ratio { --bs-aspect-ratio: 56.25%; } /* 16:9 instead of 125% */

  /* Smaller caption + buttons inside top-carousel */
  #top-carousel .carousel-caption h1 { font-size: clamp(18px, 6vw, 24px); }
  #top-carousel .carousel-caption p  { font-size: clamp(12px, 4vw, 16px); }
  #top-carousel .btn { padding: 8px 14px; font-size: .875rem; }

  /* Slightly tighter frame on mobile to save vertical space */
  .hero-carousel__frame { width: min(96vw, 520px); padding: 10px; }
}


.container h1{
  color: var(--background-color);
  font-size: 24px;
  line-height: 0;
}

.container .btn:not(#loginbuttons){
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.container .btn:hover:not(#loginbuttons){
  box-shadow: 0 20px 40px color-mix(in srgb, var(--accent-color), transparent 80%);

  background-color: var(--heading-color);
  border-color: var(--heading-color);
}


#hero {
  padding: 0px !important;
}

.hero-carousel__frame{
  /* 70% viewport width, capped for big screens */
  width: min(80vw, 1100px);
  margin-inline: auto;

  /* same visual language as .hero .hero-image-showcase .image-wrapper */
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  padding: 15px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 88%);
}

/* soften the inner media corners */
.hero-carousel__frame .ratio,
.hero-carousel__frame .ratio > picture,
.hero-carousel__frame .ratio > img {
  overflow: hidden;
}

/* kill the forced tall slide height used elsewhere */
.hero-carousel__frame #myCarousel .carousel-item{
  min-height: 0 !important;   /* overrides #myCarousel .carousel-item { min-height:80dvh } */
  height: auto;                /* overrides demo 38rem height */
}

/* keep object-position focal control */
.hero-carousel__frame #myCarousel .carousel-item img{
  object-position: var(--focal, center) !important;
}

/* remove the global dark gradient only inside the frame */
.hero-carousel__frame #top-carousel .carousel-item::before,
.hero-carousel__frame #myCarousel .carousel-item::before{
  content: none !important;
}

/* indicators tucked nicely */
.hero-carousel__frame .carousel-indicators [data-bs-target]{
  background-color: color-mix(in srgb, var(--background-color), transparent 60%);
}
.hero-carousel__frame .carousel-indicators .active{
  background-color: var(--background-color);
  width: 25px;
  border-radius: 5px;
}

.hero-content span{
  margin-top: 5px !important;
}

/*--------------------------------------------------------------
# Floating Card
--------------------------------------------------------------*/
.hero .hero-image-showcase .floating-card {
  position: absolute;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  backdrop-filter: blur(10px);
}

.hero .hero-image-showcase .floating-card.card-1 {
  top: 20%;
  left: -60px;
  animation: float 3s ease-in-out infinite;
}

.hero .hero-image-showcase .floating-card.card-2 {
  bottom: 15%;
  right: -60px;
  animation: float 3s ease-in-out infinite reverse;
}

.hero .hero-image-showcase .floating-card .card-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.hero .hero-image-showcase .floating-card .card-content .card-icon {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.hero .hero-image-showcase .floating-card .card-content .card-icon i {
  color: var(--accent-color);
  font-size: 20px;
}

.hero .hero-image-showcase .floating-card .card-content .card-info h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--heading-color);
  margin: 0;
  line-height: 1;
}

.hero .hero-image-showcase .floating-card .card-content .card-info p {
  margin: 5px 0 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 0.85rem;
  white-space: nowrap;
}

.hero .hero-image-showcase {
  position: relative;
  margin-bottom: 30px;
}

.hero .hero-image-showcase .image-wrapper {
  
  max-width: 1200px; 
  margin-inline: auto;
  position: relative;
  background: var(--surface-color);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 88%);
  transition: all 0.6s ease-out;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.hero .hero-image-showcase .image-wrapper img {
  transition: all 0.6s ease-out;
  border-radius: 15px;
  width: 100%;
  height: auto;
}

/* Keep the floating cards inside on smaller screens */
@media (max-width: 991.98px){
  .hero .hero-image-showcase .floating-card.card-1{ left: -30px; top: 12%; }
  .hero .hero-image-showcase .floating-card.card-2{ right: -30px; bottom: 12%; }
}

@media (max-width: 430px){
  .hero .hero-image-showcase .floating-card{
    display: block;
  }
  /*.hero .hero-image-showcase .image-wrapper{ padding-inline: 0; }*/
}

@media (max-width: 991px) {

  .hero .floating-card.card-1 {
    left: -30px;
    top: 10%;
  }

  .hero .floating-card.card-2 {
    right: -30px;
    bottom: 10%;
  }

  .hero .hero-actions {
    margin-bottom: 40px;
  }
}
@media (max-width: 991.98px) {
  .call-to-action {
    padding: 2rem;
  }

  .call-to-action .content-right {
    width: 100%;
    margin-top: 2rem;
  }

  .call-to-action .content-right .floating-card {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: -3rem;
    margin-right: 1rem;
    z-index: 1;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}


/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding: 40px 0 0 0;
  position: relative;
}

.footer .icon {
  color: var(--accent-color);
  margin-left: 15px;
  font-size: 24px;
  line-height: 0;
}

.footer h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}

.footer .address p {
  margin-bottom: 0px;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-left: 10px;
  transition: 0.3s;                
  line-height: 0;                
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer .copyright {
  padding: 25px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 5px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  left: 15px;
  bottom: -15px;
  z-index: 2004;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}



.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom:15px;
  line-height: 0;
}

@media (max-width: 468px) {
  .scroll-top.active,
  .scroll-top{
      bottom: 75px !important;
      width: 34px;
      height: 34px;
  }
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 25px 0;
  position: relative;
}

.page-title h1 {
  font-size: 24px;
  font-weight: 700;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-right: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 90px;
  overflow: clip;
}

.main .hero-carousel .section {

  padding: 0px 0 !important;

}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding: 30px 0;
  margin-bottom: 30px;
  position: relative;
}

.section-title h2,
.section-title span{
    margin-top: 30px;
}


.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 0;
  position: relative;
  z-index: 2;
}

.section-title span {
  position: absolute;
  top: 4px;
  color: color-mix(in srgb, var(--heading-color), transparent 95%);
  left: 0;
  right: 0;
  z-index: 1;
  font-weight: 700;
  font-size: 52px;
  text-transform: uppercase;
  line-height: 1;
}

.section-title p {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
  color: #818589;
}

@media (max-width: 575px) {
  .section-title h2 {
    font-size: 18px !important;
    margin-bottom: 15px;
  }

  .section-title span {
    font-size: 38px;
  }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  position: relative;
  min-height: 0vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero .hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 0%, color-mix(in srgb, var(--heading-color), transparent 97%) 100%);
  z-index: -2;
}

.hero .hero-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/bg/abstract-bg-3.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  z-index: -1;
}

.hero .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent-color), transparent 90%) 0%, transparent 50%);
  z-index: -1;
}

.hero .hero-content {
  margin-bottom: 4rem;
}

.hero .hero-content h1 {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--heading-color);
  letter-spacing: -0.02em;
}

@media (max-width: 992px) {
  .hero .hero-content h1 {
    font-size: 3rem;
  }
}

@media (max-width: 768px) {
  .hero .hero-content h1 {
    font-size: 2.5rem;
  }
}

@media (max-width: 576px) {
  .hero .hero-content h1 {
    font-size: 2rem;
  }
}

.hero .hero-content p {
  font-size: 1.25rem;
  margin-bottom: 2.5rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .hero .hero-content p {
    font-size: 1.1rem;
  }
}

.hero .hero-content .hero-btns {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}

@media (max-width: 576px) {
  .hero .hero-content .hero-btns {
    flex-direction: column;
    gap: 1rem;
  }
}

.hero .hero-content .hero-btns .btn {
  padding: 15px 35px;
  font-weight: 600;
  border-radius: 50px;
  transition: all 0.3s ease;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 576px) {
  .hero .hero-content .hero-btns .btn {
    width: 100%;
    max-width: 280px;
  }
}

.hero .hero-content .hero-btns .btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 70%);
  margin-top: 25px;
}

.hero .hero-content .hero-btns .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 15%);
  border-color: color-mix(in srgb, var(--accent-color), #000 15%);
  transform: translateY(-2px);
  box-shadow: 0 12px 35px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.hero .hero-content .hero-btns .btn-outline {
  background-color: transparent;
  border: 2px solid var(--default-color);
  color: var(--default-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero .hero-content .hero-btns .btn-outline i {
  font-size: 1.2rem;
}

.hero .hero-content .hero-btns .btn-outline:hover {
  transform: translateY(-2px);
}

.hero .hero-image-container {
  margin-bottom: 4rem;
  position: relative;
}

.hero .hero-image-container .hero-image {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 25px 60px color-mix(in srgb, var(--default-color), transparent 85%);
}

.hero .hero-image-container .hero-image img {
  width: 100%;
  height: auto;
  border-radius: 25px;
  transition: transform 0.6s ease;
}

.hero .hero-image-container .hero-image img:hover {
  transform: scale(1.05);
}

.hero .hero-image-container .hero-image .image-decoration {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #fff 30%));
  border-radius: 50%;
  opacity: 0.8;
  z-index: 1;
}

.hero .hero-image-container .hero-image .image-decoration::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid var(--contrast-color);
  border-radius: 50%;
}

@media (max-width: 768px) {
  .hero .hero-image-container .hero-image .image-decoration {
    width: 60px;
    height: 60px;
    top: -15px;
    right: -15px;
  }

  .hero .hero-image-container .hero-image .image-decoration::before {
    width: 30px;
    height: 30px;
  }
}

.hero .hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
}

@media (max-width: 768px) {
  .hero .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 576px) {
  .hero .hero-stats {
    grid-template-columns: 1fr;
  }
}

.hero .hero-stats .stat-item {
  padding: 2rem 1rem;
  background-color: var(--surface-color);
  border-radius: 15px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.hero .hero-stats .stat-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px color-mix(in srgb, var(--default-color), transparent 85%);
}

.hero .hero-stats .stat-item .stat-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #fff 20%));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  line-height: 0;
}

.hero .hero-stats .stat-item .stat-icon i {
  font-size: 1.5rem;
  color: var(--contrast-color);
}

.hero .hero-stats .stat-item h3 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
  line-height: 1;
}

@media (max-width: 768px) {
  .hero .hero-stats .stat-item h3 {
    font-size: 2rem;
  }
}

.hero .hero-stats .stat-item p {
  font-size: 0.95rem;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-weight: 500;
}

@media (max-width: 992px) {
  .hero {
    /*padding: 100px 0 60px;*/
    min-height: auto;
  }

  .hero .hero-content {
    margin-bottom: 3rem;
  }

  .hero .hero-content h1 {
    margin-bottom: 1.5rem;
  }

  .hero .hero-content p {
    margin-bottom: 2rem;
  }

  .hero .hero-image-container {
    margin-bottom: 3rem;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .image-wrapper {
  position: relative;
}

.about .image-wrapper .image-box {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.about .image-wrapper .image-box img {
  transition: 0.5s transform;
}

.about .image-wrapper .image-box:hover img {
  transform: scale(1.05);
}

.about .image-wrapper .experience-box {
  position: absolute;
  bottom: -30px;
  right: 30px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 25px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.about .image-wrapper .experience-box .years {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  font-family: var(--heading-font);
}

.about .image-wrapper .experience-box .text {
  font-size: 0.9rem;
  margin-top: 5px;
  line-height: 1.2;
}

.about .content {
  padding-left: 2rem;
}

@media (max-width: 991.98px) {
  .about .content {
    padding-left: 0;
    margin-top: 10px;
  }
}

.about .content .section-header {
  margin-bottom: 2rem;
}

.about .content .section-header .subtitle {
  display: inline-block;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  padding: 5px 15px;
  border-radius: 50px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.about .content .section-header h2 {
  font-size: 2.5rem;
  margin-bottom: 0;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .about .content .section-header h2 {
    font-size: 2rem;
  }
}

.about .content .highlight-text {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
  margin-bottom: 2rem;
  font-weight: 500;
}

.about .content .features-list {
  margin-bottom: 2.5rem;
}

.about .content .features-list .feature-item {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.about .content .features-list .feature-item:last-child {
  margin-bottom: 0;
}

.about .content .features-list .feature-item .icon-box {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: 0.3s;
  line-height: 0;
}

.about .content .features-list .feature-item .icon-box:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-5px);
}

.about .content .features-list .feature-item .text h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.about .content .features-list .feature-item .text p {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.about .content .cta-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.about .content .cta-buttons .btn-get-started {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 12px 32px;
  border-radius: 50px;
  font-weight: 500;
  transition: 0.3s;
  display: grid;
  place-items: center;
}

.about .content .cta-buttons .btn-get-started:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  transform: translateY(-3px);
}

.about .content .cta-buttons .btn-learn-more {
  background-color: transparent;
  color: var(--accent-color);
  padding: 12px 32px;
  border-radius: 50px;
  font-weight: 500;
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  transition: 0.3s;
}

.about .content .cta-buttons .btn-learn-more:hover {
  border-color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  transform: translateY(-3px);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .services-container {
  margin-bottom: 60px;
  padding: 60px 0;
}

.services .services-container .service-item {
  display: flex;
  background-color: var(--surface-color);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-color), transparent 92%);
  transition: all 0.4s ease;
  height: 100%;
}

.services .services-container .service-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px color-mix(in srgb, var(--accent-color), transparent 85%);
}

.services .services-container .service-item:hover .service-icon {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.services .services-container .service-item:hover .service-link {
  color: var(--accent-color);
}

.services .services-container .service-item:hover .service-link i {
  transform: translateX(-5px);
}

.services .services-container .service-item .service-icon {
  flex: 0 0 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  font-size: 2rem;
  transition: all 0.3s ease;
}

.services .services-container .service-item .service-content {
  padding: 30px;

}
@media (max-width: 991px) {
  .services .services-container .service-item .service-content {
    position: relative;
  }
}

.services .services-container .service-item .service-number {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 4rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--heading-color), transparent 90%);
  line-height: 1;
  opacity: 0.5;
  z-index: 1;
}

.services .services-container .service-item .service-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--heading-color);
  position: relative;
  z-index: 2;
}

.services .services-container .service-item .service-text {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  position: relative;
  z-index: 2;
}

.services .services-container .service-item .service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--accent-color), transparent 20%);
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.services .services-container .service-item .service-link i {
  transition: transform 0.3s ease;
}

.services .cta-wrapper .cta-box {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 15%), color-mix(in srgb, var(--accent-color), transparent 5%));
  border-radius: 20px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px color-mix(in srgb, var(--default-color), transparent 85%);
}

.services .cta-wrapper .cta-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  opacity: 0.05;
  z-index: 1;
}

.services .cta-wrapper .cta-box .cta-image {
  position: relative;
  z-index: 2;
}

.services .cta-wrapper .cta-box .cta-image img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 5px solid color-mix(in srgb, var(--contrast-color), transparent 15%);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

@media (max-width: 991px) {
  .services .cta-wrapper .cta-box .cta-image img {
    margin-bottom: 30px;
  }
}

.services .cta-wrapper .cta-box .cta-content {
  position: relative;
  z-index: 2;
}

.services .cta-wrapper .cta-box .cta-content h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--contrast-color);
}

.services .cta-wrapper .cta-box .cta-content p {
  color: color-mix(in srgb, var(--contrast-color), transparent 15%);
  margin-bottom: 25px;
  font-size: 1rem;
  line-height: 1.6;
}

.services .cta-wrapper .cta-box .cta-content .primary-btn {
  display: inline-block;
  background-color: var(--contrast-color);
  color: var(--accent-color);
  padding: 12px 25px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.services .cta-wrapper .cta-box .cta-content .primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

@media (max-width: 991px) {
  .services .cta-wrapper .cta-box .cta-content {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .services {
    padding: 60px 0;
  }

  .services .services-container .service-item {
    flex-direction: column;
  }

  .services .services-container .service-item .service-icon {
    flex: 0 0 auto;
    height: 80px;
    width: 100%;
  }

  .services .cta-wrapper .cta-box {
    padding: 30px 20px;
  }
}

/*--------------------------------------------------------------
# Steps Section
--------------------------------------------------------------*/
.steps .process-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 0;
}

.steps .process-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-bottom: 2.5rem;
}

.steps .process-item:last-child {
  padding-bottom: 0;
}

.steps .process-item .content {
  width: 100%;
  position: relative;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-color), transparent 95%), var(--surface-color));
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  border-radius: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  line-height: 0;
}

.steps .process-item .content:hover {
  transform: translateX(10px);
  box-shadow: -8px 8px 25px rgba(0, 0, 0, 0.1);
}

.steps .process-item .content:hover .step-icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 15%), var(--accent-color));
  transform: rotate(10deg);
}

.steps .process-item .content:hover .step-number {
  transform: translateX(-5px);
  opacity: 1;
}

.steps .process-item .step-number {
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 4rem;
  font-weight: 800;
  color: var(--accent-color);
  font-family: var(--heading-font);
  line-height: 1;
  opacity: 0.2;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.steps .process-item .card-body {
  padding: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.steps .process-item .step-icon {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  background-color: var(--accent-color);
  border-radius: 15px;
  display: grid;
  place-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.steps .process-item .step-icon i {
  font-size: 2rem;
  color: var(--contrast-color);
}

.steps .process-item .step-content h3 {
  color: var(--heading-color);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.steps .process-item .step-content p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.steps .process-item .arrow {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  margin: 1rem 0;
  width: 100px;
  height: 100px;
  opacity: 0.7;
}

@media (max-width: 767.98px) {
  .steps .process-container {
    padding: 1rem 0;
  }

  .steps .process-item {
    padding-bottom: 2rem;
  }

  .steps .process-item .content {
    border-width: 1px;
  }

  .steps .process-item .content:hover {
    transform: translateY(-5px);
  }

  .steps .process-item .step-number {
    font-size: 3rem;
    left: 50%;
    top: -1.5rem;
    transform: translateX(-50%);
  }

  .steps .process-item .step-number:hover {
    transform: translateX(-50%);
  }

  .steps .process-item .card-body {
    padding: 2rem 1.5rem 1.5rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  .steps .process-item .step-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
  }

  .steps .process-item .step-icon i {
    font-size: 1.75rem;
  }

  .steps .process-item .step-content h3 {
    font-size: 1.25rem;
  }

  .steps .process-item .arrow {
    height: 60px;
    margin: 0.5rem 0;
  }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .swiper-wrapper {
  height: auto !important;
}

.testimonials .testimonial-card {
  background: var(--surface-color);
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
}

.testimonials .testimonial-card:hover {
  border-color: var(--accent-color);
}

.testimonials .testimonial-content {
  padding: 40px 30px 30px;
  position: relative;
  flex-grow: 1;
}

.testimonials .testimonial-content p {
  font-size: 16px;
  line-height: 1.7;
  position: relative;
  z-index: 1;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

.testimonials .testimonial-content .quote-icon {
  position: absolute;
  top: 15px;
  left: 30px;
  font-size: 42px;
  color: color-mix(in srgb, var(--accent-color), transparent 85%);
  z-index: 0;
  opacity: 0.8;
}

.testimonials .testimonial-profile {
  padding: 20px 30px;
  background-color: color-mix(in srgb, var(--heading-color), transparent 95%);
  border-top: 1px solid color-mix(in srgb, var(--heading-color), transparent 90%);
}

.testimonials .rating {
  margin-bottom: 15px;
}

.testimonials .rating i {
  color: #ffc107;
  margin-right: 3px;
  font-size: 14px;
}

.testimonials .profile-info {
  display: flex;
  align-items: center;
}

.testimonials .profile-info img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--background-color);
  margin-left: 15px;
}

.testimonials .profile-info div {
  flex: 1;
}

.testimonials .profile-info h3 {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 700;
  color: var(--heading-color);
}

.testimonials .profile-info h4 {
  margin: 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-weight: 500;
}

.testimonials .swiper-pagination {
  margin-top: 30px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 60%);
  opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
  width: 25px;
  border-radius: 5px;
}

@media (max-width: 767px) {
  .testimonials .testimonial-content {
    padding: 30px 20px 20px;
  }

  .testimonials .testimonial-content p {
    font-size: 15px;
  }

  .testimonials .testimonial-content .quote-icon {
    font-size: 36px;
    left: 20px;
  }

  .testimonials .testimonial-profile {
    padding: 15px 20px;
  }

  .testimonials .profile-info img {
    width: 45px;
    height: 45px;
  }
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters-wrapper {
  text-align: center;
  margin-bottom: 80px;
}

.portfolio .portfolio-filters {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

.portfolio .portfolio-filters::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 0;
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
}

.portfolio .portfolio-filters li {
  position: relative;
  cursor: pointer;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: all 0.4s ease-out;
  letter-spacing: 0.5px;
}

@media (max-width:468px){
#sales.portfolio .portfolio-filters li {
  font-size: 10px;
}
}

.portfolio .portfolio-filters li::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-color);
  transition: all 0.4s ease-out;
  transform: translateX(-50%);
}

.portfolio .portfolio-filters li:hover {
  color: var(--default-color);
}

.portfolio .portfolio-filters li.filter-active {
  color: var(--default-color);
}

.portfolio .portfolio-filters li.filter-active::after {
  width: 100%;
}

@media (max-width: 768px) {
  .portfolio .portfolio-filters {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }
}

.portfolio .portfolio-card {
  background: var(--surface-color);
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 20px;
  transition: all 0.4s ease-out;
  overflow: hidden;
}

.portfolio .portfolio-card:hover {
  transform: translateY(-8px);
}

.portfolio .portfolio-card:hover .image-container img {
  transform: scale(1.05);
}

.portfolio .portfolio-card:hover .overlay {
  opacity: 1;
  visibility: visible;
}

.portfolio .portfolio-card:hover .content h3 {
  color: var(--accent-color);
}

.portfolio .image-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  border-radius: 8px;
  line-height: 0;
}

.portfolio .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease-out;
}

.portfolio .image-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--accent-color), transparent 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-out;
  backdrop-filter: blur(2px);
}

.portfolio .image-container .overlay-content {
  display: flex;
  gap: 20px;
  transition: transform 0.4s ease-out 0.1s;
}

.portfolio-card:hover .portfolio .image-container .overlay-content {
  transform: translateY(0);
}

.portfolio .image-container .overlay-content a {
  width: 50px;
  height: 50px;
  background: var(--surface-color);
  color: var(--heading-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  font-size: 18px;
}

.portfolio .image-container .overlay-content a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: scale(1.1);
}

.portfolio .content {
  padding: 30px 0;
  text-align: center;
}

.portfolio .content h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
  transition: color 0.3s ease;
  letter-spacing: 0.5px;
}

.portfolio .content p {
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0.3px;
}

@media (min-width: 992px) {
  .portfolio .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .portfolio .portfolio-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
  }
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  position: relative;
  background-color: var(--surface-color);
  border-radius: 20px;
  overflow: hidden;
  transition: 0.4s;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
}

.team .team-member:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--accent-color), transparent 80%);
  border-color: var(--accent-color);
}

.team .team-member:hover .member-image:before {
  opacity: 1;
}

.team .team-member:hover .member-image img {
  transform: scale(1.1);
}

.team .team-member:hover .social-overlay {
  transform: translateY(0);
  opacity: 1;
}

.team .team-member:hover .member-info h4 {
  color: var(--accent-color);
}

.team .member-image {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.team .member-image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), transparent 50%) 100%);
  opacity: 0;
  transition: 0.4s;
  z-index: 1;
}

.team .member-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.team .social-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 30px 20px 20px;
  transform: translateY(100%);
  opacity: 0;
  transition: 0.4s;
  z-index: 2;
}

.team .social-icons {
  display: flex;
  justify-content: center;
  gap: 12px;
  line-height: 0;
}

.team .social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: var(--contrast-color);
  font-size: 18px;
  transition: 0.3s;
}

.team .social-icons a:hover {
  background-color: var(--contrast-color);
  color: var(--accent-color);
  transform: scale(1.1);
}

.team .member-info {
  padding: 25px 20px 30px;
  text-align: center;
  position: relative;
}

.team .member-info:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), transparent 60%) 100%);
  border-radius: 2px;
}

.team .member-info h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--heading-color);
  transition: 0.3s;
}

.team .member-info span {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent-color);
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.team .member-info p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

@media (max-width: 768px) {
  .team .team-member {
    margin-bottom: 30px;
  }

  .team .team-member .member-image {
    height: 250px;
  }

  .team .team-member .member-info {
    padding: 20px 15px 25px;
  }

  .team .team-member .member-info h4 {
    font-size: 20px;
  }

  .team .team-member .member-info p {
    font-size: 14px;
  }
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-card {
  background-color: var(--surface-color);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  transition: all 0.3s ease;
  height: 100%;
}

.pricing .pricing-card:hover {
  transform: translateY(-10px);
}

.pricing .pricing-card.featured {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border: 2px solid var(--accent-color);
}

.pricing .pricing-card.featured .pricing-header h3 {
  color: var(--accent-color);
}

.pricing .pricing-card .pricing-header {
  text-align: center;
  margin-bottom: 2rem;
}

.pricing .pricing-card .pricing-header h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.pricing .pricing-card .pricing-header .price {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--accent-color);
}

.pricing .pricing-card .pricing-header .price .currency {
  font-size: 1.5rem;
  vertical-align: super;
}

.pricing .pricing-card .pricing-header .price .period {
  font-size: 1rem;
  font-weight: 400;
  margin-left: -4px;
  color: var(--default-color);
  opacity: 0.7;
}

.pricing .pricing-card .features-list {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.pricing .pricing-card .features-list li {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.pricing .pricing-card .features-list li i {
  margin-right: 0.5rem;
  color: var(--accent-color);
}

.pricing .pricing-card .features-list li.disabled {
  opacity: 0.5;
}

.pricing .pricing-card .features-list li.disabled i {
  color: var(--default-color);
}

.pricing .pricing-card .btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 0.75rem 2rem;
  font-weight: bold;
  transition: all 0.3s ease;
  border-radius: 50px;
}

.pricing .pricing-card .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 20%);
  border-color: color-mix(in srgb, var(--accent-color), black 20%);
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 1rem;
}

.faq .section-header .lead {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  line-height: 1.6;
}

.faq .faq-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.faq .faq-item {
  border-left: 4px solid transparent;
  border-radius: 10px;
  background: var(--surface-color);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
  overflow: hidden;
}

.faq .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-left-color: color-mix(in srgb, var(--accent-color), transparent 50%);
}

.faq .faq-item.faq-active {
  border-left-color: var(--accent-color);
}

.faq .faq-item.faq-active .faq-header .faq-icon {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.faq .faq-item.faq-active .faq-header h4 {
  color: var(--accent-color);
}

.faq .faq-item.faq-active .faq-header .faq-toggle {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.faq .faq-item.faq-active .faq-header .faq-toggle i.bi-plus {
  display: none;
}

.faq .faq-item.faq-active .faq-header .faq-toggle i.bi-dash {
  display: block;
}

.faq .faq-item.faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
}

.faq .faq-item:not(.faq-active) .faq-header .faq-toggle i.bi-plus {
  display: block;
}

.faq .faq-item:not(.faq-active) .faq-header .faq-toggle i.bi-dash {
  display: none;
}

.faq .faq-item .faq-header {
  display: flex;
  align-items: center;
  padding: 25px;
  cursor: pointer;
  gap: 20px;
}

.faq .faq-item .faq-header .faq-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  font-size: 20px;
  transition: all 0.3s ease;
  line-height: 0;
}

.faq .faq-item .faq-header h4 {
  flex: 1;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading-color);
  transition: color 0.3s ease;
  line-height: 1.4;
}

.faq .faq-item .faq-header .faq-toggle {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--default-color), transparent 85%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-color);
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
  line-height: 0;
}

.faq .faq-item .faq-header .faq-toggle i {
  position: absolute;
  transition: all 0.3s ease;
}

.faq .faq-item .faq-header .faq-toggle:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.faq .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-item .faq-content .content-inner {
  padding: 0 25px 25px 25px;
  overflow: hidden;
}

.faq .faq-item .faq-content .content-inner p {
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
  font-size: 0.95rem;
  overflow: hidden;
}

@media (max-width: 768px) {
  .faq .faq-item .faq-header {
    padding: 20px;
    gap: 15px;
  }

  .faq .faq-item .faq-header .faq-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .faq .faq-item .faq-header h4 {
    font-size: 1rem;
  }

  .faq .faq-item .faq-header .faq-toggle {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .faq .faq-item .faq-content .content-inner {
    padding: 0 20px;
  }

  .faq .faq-item.faq-active .faq-content .content-inner {
    padding-bottom: 20px;
  }
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .container {
  max-width: 1280px;
}

.contact .contact-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 60px 0;
}

@media (min-width: 992px) {
  .contact .contact-wrapper {
    grid-template-columns: 38% 62%;
    gap: 30px;
  }
}

.contact .contact-info-panel {
  background: linear-gradient(145deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #1a4372 40%));
  color: var(--contrast-color);
  border-radius: 20px;
  padding: 40px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.contact .contact-info-panel .contact-info-header {
  margin-bottom: 30px;
}

.contact .contact-info-panel .contact-info-header h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--contrast-color);
}

.contact .contact-info-panel .contact-info-header p {
  font-size: 15px;
  opacity: 0.85;
  line-height: 1.6;
}

.contact .contact-info-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: auto;
}

@media (min-width: 576px) and (max-width: 991px) {
  .contact .contact-info-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact .info-card {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.contact .info-card:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
}

.contact .info-card .icon-container {
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.contact .info-card .icon-container i {
  font-size: 20px;
  color: var(--contrast-color);
}

.contact .info-card .card-content h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--contrast-color);
}

.contact .info-card .card-content p {
  font-size: 14px;
  margin-bottom: 0;
  opacity: 0.8;
}

.contact .social-links-panel {
  margin-top: 35px;
  line-height: 0;
}

.contact .social-links-panel h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--contrast-color);
}

.contact .social-links-panel .social-icons {
  display: flex;
  gap: 12px;
}

.contact .social-links-panel .social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--contrast-color);
  font-size: 18px;
  transition: all 0.3s ease;
}

.contact .social-links-panel .social-icons a:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-5px);
}

.contact .contact-form-panel {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contact .map-container {
  width: 100%;
  height: 280px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.contact .form-container {
  background-color: var(--surface-color);
  border-radius: 20px;
  padding: 35px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
}

.contact .form-container h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--heading-color);
  background: linear-gradient(120deg, var(--heading-color), color-mix(in srgb, var(--heading-color), var(--accent-color) 30%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.contact .form-container p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 25px;
}

.contact .form-container .form-floating {
  margin-bottom: 20px;
}

.contact .form-container .form-floating .form-control {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  padding: 24px 20px 8px 20px;
  height: calc(3.5rem + 3px);
  background-color: var(--surface-color);
  color: var(--default-color);
  transition: all 0.3s ease;
}

.contact .form-container .form-floating .form-control:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 85%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 40%);
  background-color: var(--surface-color);
}

.contact .form-container .form-floating .form-control::placeholder {
  color: transparent;
}

.contact .form-container .form-floating label {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 1rem 1.25rem 2.5rem 1.25rem;
}

.contact .form-container .form-floating label::after {
  background-color: transparent;
}

.contact .form-container .btn-submit {
  background: linear-gradient(145deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #1a4372 30%));
  color: var(--contrast-color);
  border: none;
  padding: 15px 25px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact .form-container .btn-submit .ms-2 {
  margin-left: .5rem !important;
}

.contact .form-container .btn-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent-color), transparent 75%);
}

.contact .form-container .btn-submit i {
  transition: transform 0.3s ease;
}

.contact .form-container .btn-submit:hover i {
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .contact .contact-info-panel {
    padding: 30px 25px;
  }

  .contact .form-container {
    padding: 30px 25px;
  }
}

@media (max-width: 576px) {
  .contact .social-links-panel .social-icons {
    flex-wrap: wrap;
  }
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.portfolio-details .portfolio-info h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  right: 0;
  bottom: 0;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

.portfolio-details .portfolio-info ul strong {
  text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.portfolio-details .portfolio-info .btn-visit {
  padding: 8px 40px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  transition: 0.3s;
}

.portfolio-details .portfolio-info .btn-visit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

.portfolio-details .portfolio-description .testimonial-item {
  padding: 30px 30px 0 30px;
  position: relative;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  margin-bottom: 50px;
}

.portfolio-details .portfolio-description .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.portfolio-details .portfolio-description .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 5px 0;
  padding-top: 20px;
}

.portfolio-details .portfolio-description .testimonial-item h4 {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left,
.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.portfolio-details .portfolio-description .testimonial-item p {
  font-style: italic;
  margin: 0 0 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-hero {
  position: relative;
  margin-bottom: 40px;
  border-radius: 12px;
  overflow: hidden;
}

.service-details .service-hero img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.service-details .service-hero .service-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
}

.service-details .service-content .service-header {
  margin-bottom: 40px;
}

.service-details .service-content .service-header h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--heading-color);
}

.service-details .service-content .service-header .service-intro {
  font-size: 18px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.service-details .service-content h4 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 30px;
  color: var(--heading-color);
}

.service-details .service-features {
  margin-bottom: 50px;
}

.service-details .service-features .feature-item {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  background: var(--surface-color);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
}

.service-details .service-features .feature-item:hover {
  box-shadow: 0 8px 25px color-mix(in srgb, var(--default-color), transparent 90%);
  transform: translateY(-2px);
}

.service-details .service-features .feature-item .feature-icon {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.service-details .service-features .feature-item .feature-icon i {
  font-size: 24px;
  color: var(--accent-color);
}

.service-details .service-features .feature-item .feature-content h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--heading-color);
}

.service-details .service-features .feature-item .feature-content p {
  font-size: 14px;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.service-details .service-process {
  margin-bottom: 50px;
}

.service-details .service-process .process-steps .process-step {
  display: flex;
  margin-bottom: 30px;
  position: relative;
}

.service-details .service-process .process-steps .process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 60px;
  width: 2px;
  height: 40px;
  background: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.service-details .service-process .process-steps .process-step .step-number {
  background: var(--accent-color);
  color: var(--contrast-color);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-right: 25px;
  flex-shrink: 0;
  font-size: 16px;
}

.service-details .service-process .process-steps .process-step .step-content h5 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--heading-color);
}

.service-details .service-process .process-steps .process-step .step-content p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.service-details .service-gallery {
  margin-bottom: 30px;
}

.service-details .service-gallery img {
  transition: transform 0.3s ease;
}

.service-details .service-gallery img:hover {
  transform: scale(1.05);
}

.service-details .service-sidebar .service-menu {
  background: var(--surface-color);
  padding: 30px;
  border-radius: 10px;
  margin-bottom: 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .service-sidebar .service-menu h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 25px;
  color: var(--heading-color);
}

.service-details .service-sidebar .service-menu .menu-list .menu-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-details .service-sidebar .service-menu .menu-list .menu-item:last-child {
  border-bottom: none;
}

.service-details .service-sidebar .service-menu .menu-list .menu-item:hover,
.service-details .service-sidebar .service-menu .menu-list .menu-item.active {
  color: var(--accent-color);
  padding-left: 10px;
}

.service-details .service-sidebar .service-menu .menu-list .menu-item:hover i,
.service-details .service-sidebar .service-menu .menu-list .menu-item.active i {
  color: var(--accent-color);
}

.service-details .service-sidebar .service-menu .menu-list .menu-item i {
  margin-right: 12px;
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: color 0.3s ease;
}

.service-details .service-sidebar .service-menu .menu-list .menu-item span {
  font-weight: 500;
}

.service-details .service-sidebar .service-info {
  background: var(--surface-color);
  padding: 30px;
  border-radius: 10px;
  margin-bottom: 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .service-sidebar .service-info h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 25px;
  color: var(--heading-color);
}

.service-details .service-sidebar .service-info .info-list .info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .service-sidebar .service-info .info-list .info-item:last-child {
  border-bottom: none;
}

.service-details .service-sidebar .service-info .info-list .info-item .info-label {
  font-weight: 500;
  color: var(--default-color);
}

.service-details .service-sidebar .service-info .info-list .info-item .info-value {
  font-weight: 600;
  color: var(--accent-color);
}

.service-details .service-sidebar .contact-card {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 20%));
  padding: 30px;
  border-radius: 10px;
  color: var(--contrast-color);
}

.service-details .service-sidebar .contact-card .contact-content h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--contrast-color);
}

.service-details .service-sidebar .contact-card .contact-content p {
  margin-bottom: 20px;
  opacity: 0.9;
  font-size: 14px;
  line-height: 1.6;
}

.service-details .service-sidebar .contact-card .contact-content .contact-info {
  margin-bottom: 25px;
}

.service-details .service-sidebar .contact-card .contact-content .contact-info .contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.service-details .service-sidebar .contact-card .contact-content .contact-info .contact-item i {
  margin-right: 10px;
  opacity: 0.8;
}

.service-details .service-sidebar .contact-card .contact-content .contact-info .contact-item span {
  font-size: 14px;
}

.service-details .service-sidebar .contact-card .contact-content .btn {
  background: var(--contrast-color);
  color: var(--accent-color);
  border: none;
  padding: 12px 25px;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.service-details .service-sidebar .contact-card .contact-content .btn:hover {
  background: color-mix(in srgb, var(--contrast-color), transparent 10%);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .service-details .service-hero img {
    height: 250px;
  }

  .service-details .service-hero .service-badge {
    top: 15px;
    right: 15px;
    padding: 6px 15px;
    font-size: 12px;
  }

  .service-details .service-content .service-header h2 {
    font-size: 24px;
  }

  .service-details .feature-item {
    padding: 15px !important;
  }

  .service-details .feature-item .feature-icon {
    width: 50px !important;
    height: 50px !important;
    margin-right: 15px !important;
  }

  .service-details .feature-item .feature-icon i {
    font-size: 20px !important;
  }

  .service-details .service-sidebar {
    margin-top: 30px;
  }
}

.bi-telephone {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

@media (max-width: 1199.98px){
  /* adjust #navmenu to your actual selector for the mobile panel */
  .mobile-nav-active #navmenu{
    position: fixed;
    inset: 0;                 /* top/right/bottom/left: 0 */
    height: 100dvh;           /* full screen height */
    z-index: 2000;            /* above header */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* prevent the page behind from scrolling */
  .mobile-nav-active { overflow: hidden; }
}

/* Hide Woo's default "added_to_cart" link that appears after AJAX add */
.added_to_cart.wc-forward { display: none !important; }

/*=========================================================
/* Let Isotope control the landing shop layout 
====================================================== */

#shop .isotope-container {            /* the row that holds cards */
  display: block !important;
  margin: -12px;                      /* gutters via padding on children */
}
#shop .portfolio-item {               /* each card column */
  padding: 12px;
  flex: none !important;              /* neutralize Bootstrap flex widths */
}

@media (min-width: 1200px){
  #shop .portfolio-item { width: 25% !important; }   /* 4 per row */
}

/* Sale ribbon */
.image-container { position: relative; }

.sale-ribbon{
  position: absolute;
  inset-block-start: 10px;          /* top */
  inset-inline-start: 10px;         /* logical "start" */
  z-index: 6;
  display: inline-block;
  background: #e10600;             /* red */
  color: #fff;
  padding: 8px 12px 8px 16px;
  font: 700 18px/1 Vazirmatn, system-ui, sans-serif;
  border-radius: 8px;
  box-shadow: 0 0px 10px rgba(225,6,0,.35);
  transition: all 0.3s ease;

}

.sale-ribbon::before{
  content: "";
  position: absolute;
  border: 10px solid transparent;
  transition: all 0.3s ease;
}

.sale-ribbon__text { letter-spacing: .5px; }

/* Put it on the right in RTL if you prefer */
[dir="rtl"] .sale-ribbon{
  inset-inline-end: 22px;
  inset-inline-start: auto;
}
#shop .portfolio-card .sale-ribbon{
  inset-block-start:22px;
}
.badge > a {
  color: inherit;
}

.badge {
  font-size: 16px;
  float: left; 
  z-index: 100 !important;
  border-radius: 8px 0px 8px 0px;
}

/* Stack the logo text under the image */
.header .logo {
            /* keep the link shrink-to-fit */
  flex-direction: column;          /* vertical stack */
  align-items: center;             /* center horizontally */
  justify-content: center;
  text-align: center;
  gap: 4px;                        /* space between image and text */
}

.header .logo img {
  margin: 0 !important;            /* cancel the old margin-left */
  display: block;                  /* remove inline baseline gap */
}

/* optional tidy-up for the title */
.header .logo h1 {
  margin: 0;        
  margin-top: 5px;               /* rely on `gap` above */
  line-height: 1.1;
}

/* === Nav Search – minimal, RTL-safe === */
:root{
  /* If you don’t already have it */
  --accent-color: #0a8b7d;
}

/* shared shell */
.ali-search {
  position: relative;
  width: clamp(220px, 26vw, 420px);
}
.ali-searchform { margin: 0; }

/* input */
.ali-search__input{
  border-radius: 9999px;
  padding-inline: 3rem 1rem; /* room for the icon at start (RTL-safe) */
  height: 42px;
  border: 1px solid rgba(0,0,0,.12);
  background-color: rgba(255,255,255,.06);
  color: inherit;
}
.ali-search__input::placeholder{ color: rgba(0,0,0,.45); }

/* focus ring in accent */
.ali-search__input:focus{
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-color) 25%, transparent);
}
.ali-search__input:hover{
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 .1rem color-mix(in srgb, var(--accent-color) 25%, transparent);
}

/* button (white icon) */
.ali-search__btn{
  position: absolute;
  inset-inline-start: 5px;   /* put icon inside the pill (RTL-safe) */
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  width: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--accent-color);
  display: grid;
  place-items: center;
  cursor: pointer;
  line-height: 0;
}
.ali-search__btn i{ color: #fff; font-size: 1rem; }

/* Desktop alignment helpers */
.ali-search-desktop{ flex: 0 0 auto; }

/* Make it full-width inside the mobile drawer */
@media (max-width: 991.98px){
  .ali-search-mobile .ali-search{ width: 90%; margin: 5px; padding: 0;}
}

@media (max-width: 991.98px){
  .ali-search-mobile .ali-search ::placeholder{font-size: 10px;}
}

@media (max-width: 1200px) {
    .header .logo {
     order: 0;
    }
  }
@media (max-width: 1200px) {
    .header .logo h1 {
     font-size: 14px;
     margin: 5px;
    }
  }
@media (max-width: 1200px) {
    .header .logo img {
  max-height: 28px;
  margin-left: 8px;
}
}

/* Container styles to stack text & icon perfectly */
.btn-animate {
  position: relative;
  display: inline-grid;
  place-items: center;
  /* Keep button width stable (prevents layout shift) */
  grid-auto-rows: 1fr;
  overflow: hidden;
}

/* Stack both layers in the same grid cell */
.btn-animate .btn-layer {
  grid-area: 1 / 1;
  transition: transform .32s ease, opacity .32s ease;
  will-change: transform, opacity;
}

/* Initial states */
.btn-animate .btn-text {
  opacity: 1;
  font-size: 24px;
  transform: translateY(0);
}

.btn-animate .btn-icon {
  opacity: 0;
  transform: translateY(100%); /* ready to slide up */
  font-size: 3rem; /* a touch bigger looks nice */
  line-height: 1;
}

/* On hover / keyboard focus / active tap: swap them */
.btn-animate:hover .btn-text,
.btn-animate:focus-visible .btn-text,
.btn-animate:active .btn-text {
  opacity: 0;
  transform: translateY(-100%);
}

.btn-animate:hover .btn-icon,
.btn-animate:focus-visible .btn-icon,
.btn-animate:active .btn-icon {
  opacity: 1;
  transform: translateY(0);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-animate .btn-layer {
    transition: none;
  }
  .btn-animate .btn-icon { opacity: 1; transform: none; }
  .btn-animate .btn-text { opacity: 0; transform: none; }
}
/* Only this section should have no padding */
section#top-carousel { 
  padding: 60px !important; 
  overflow: hidden;  
}

#top-carousel .hero-carousel__frame{
/* soft, top-only shadow (same color) */
box-shadow: 0 -18px 36px -16px rgba(0,0,0,.08) !important;
}

/* 1) Make the slider caption small on phones (≈14–16px) */
@media (max-width: 767.98px){
  #top-carousel .carousel-caption h1{
    font-size: clamp(12px, 3vw, 14px) !important;
    line-height: 1.3 !important;
    margin: 0 0 .25rem !important;
  }
  #top-carousel .carousel-caption p{
    font-size: clamp(10px, 3vw, 10px) !important;
    line-height: 2;
    margin: 0;
  }
  #top-carousel .carousel-caption .btn{
    font-size: .6rem;
    padding: 4px 6px;
    margin-top: 5px;
  }

}

/* 2) Under the slider (#hero): keep H1 and H2 to ONE LINE, then the button */
@media (max-width: 767.98px){
  #hero .hero-content{ margin-bottom: .75rem !important; }

  /* one-line headings with ellipsis, smaller size */
  #hero .hero-content h1,
  #hero .hero-content .hero-title{
    font-size: clamp(14px, 4vw, 14px) !important;
    line-height: 1.25 !important;
    margin: 0 0 .35rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-decoration: none !important;
  }
  /* keep the typed span from wrapping too */
  #hero .hero-content .hero-title .typed{ white-space: nowrap !important; text-decoration: none !important;}

  /* tighter spacing before the CTA */
  #hero .hero-content .hero-btns{ gap: .5rem; }
  #hero .hero-content .hero-btns .btn{ padding: 12px 22px; }
  #hero .hero-content .hero-btns .btn-primary{ margin-top: 10px; }
}
@media (max-width: 767.98px){
  /* 2) CTA BELOW SLIDER (عینکت رو انتخاب کن!): smaller */
  #hero .hero-btns .btn{
    padding: 10px 16px !important;
    font-size: .9rem !important;
    box-shadow: 0 5px 8px color-mix(in srgb, var(--accent-color), transparent 70%);

  }
  .btn-animate .btn-text{            /* your animated label */
    font-size: 16px !important;
  }
  .btn-animate .btn-icon{
    font-size: 1.5rem !important;
  }
}

/* === Isotope item widths – mobile first === */
#shop .isotope-container,
#sales .isotope-container {
  margin: -10px;                 /* slightly tighter gutters on mobile */
}

#shop .portfolio-item,
#sales .portfolio-item {
  padding: 10px;
  width: 49.99% !important;         /* default: 2 columns on phones */
  flex: none !important;         /* keep Bootstrap out of the way */
}

@media (min-width: 768px) {
  #shop .portfolio-item,
  #sales .portfolio-item { width: 33.333% !important; } /* 3 columns */
}

@media (max-width: 468px) {
  #sales .portfolio .portfolio-card h3 { font-size: clamp(12px, 3vw,14px) !important; } 
}

@media (max-width: 468px) {
  #sales .portfolio .content p { font-size: clamp(12px, 3vw,14px) !important; } 
}

@media (max-width: 468px) {
  #shop .portfolio-card h3 { font-size: clamp(10px, 3vw,14px) !important; } 
}

@media (max-width: 468px) {
  #shop .content p { font-size: clamp(12px, 3vw,14px) !important; } 
}

@media (min-width: 1200px) {
  #shop .portfolio-item,
  #sales .portfolio-item { width: 25% !important; }     /* 4 columns */
}

/* Optional: tiny phones, force single column */
@media (max-width: 360px) {
  #shop .portfolio-item,
  #sales .portfolio-item { width: 100% !important; }
}


/*-------------------------------------------------------------
# NAV BAR
--------------------------------------------------------------*/
/* ===== Mobile Bottom Nav (sticky) ===== */
.mobile-bottom-nav{
  --nav-h: 60px;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.06);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 1040; /* above page, below offcanvas (z=1050) */
}

/* Each item: icon over label */
.mobile-bottom-nav .nav-link{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--nav-color, #222);
}
.mobile-bottom-nav .nav-link i{ font-size: 20px; line-height: 1; }
.mobile-bottom-nav .nav-link:focus,
.mobile-bottom-nav .nav-link:hover{ color: var(--accent-color, #0b7a71); }

/* Small red count on bottom-cart icon (consistent with header badge size) */
.mobile-bottom-nav .cart-badge{
  position: absolute;
  inset-inline-end: 14px;
  inset-block-start: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center;
  font: 600 10px/1 Vazirmatn, system-ui, sans-serif;
  box-shadow: 0 6px 14px rgba(220,53,69,.30);
}

/* Dropup menu: make sure it opens above the bar cleanly */
.mobile-bottom-nav .dropup .dropdown-menu{
  margin-bottom: 0px;         /* small gap from the bar */
  text-align: center;
}

/*******************************************
 * OFFCANVAS (BOTTOM) — OVERRIDE BOOTSTRAP
 *******************************************/

/*******************************************
 * OFFCANVAS (BOTTOM) — dynamic + rounded
 *******************************************/

/* 1) Dynamic height (auto) but cap it so large carts scroll inside.
      2) Beautiful rounded top edges.
      3) Above any scroll-to-top button.
*/
#btmCartOffcanvas{
  --bs-offcanvas-height: auto;                 /* instead of a fixed vh */
  --bs-offcanvas-padding-x: 0;
  --bs-offcanvas-padding-y: 0;
  max-height: min(85vh, 560px);                /* cap the size */
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  overflow: hidden;                            /* clip corners */
  z-index: 2005 !important;                               /* above scroll-top */
  box-shadow: 0 -22px 48px rgba(0,0,0,.12);
}

#btmCartOffcanvas .offcanvas-header{
  padding: 15px !important;
  font-size: 600 18px !important;
}

#btmCartOffcanvas .btn-primary{
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}

#btmCartOffcanvas .btn-primary::after{
  background-color: var(--nav-dropdown-hover-color);
}

/* internal spacing */
#btmCartOffcanvas .offcanvas-body{ padding: 12px 16px; }

/* Make the list area scroll when content is tall; keep small when empty */
#btmCartOffcanvas #btmcart-body{
  position: relative;
}
#btmCartOffcanvas .mini-cart__list{
  list-style: none;
  margin: 0; padding: 0;
  max-height: 55vh; /* only kicks in when there are many items */
  overflow: auto;
}

/* If cart is empty, hide the action buttons row right after the body to keep the panel short */
#btmCartOffcanvas #btmcart-body:has(.mini-cart-empty) + .d-flex{ display: none; }

/* ---- compact row layout (matches your header look) ---- */
#btmCartOffcanvas .mini-cart__item{
  display: grid !important;
  grid-template-columns: 56px 1fr 24px; /* thumb | meta | × */
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
#btmCartOffcanvas .mini-cart__item:last-child{ border-bottom: 0; }

/* thumb */
#btmCartOffcanvas .mini-cart__thumb{ grid-column: 1; display: block; }
#btmCartOffcanvas .mini-cart__thumb img{
  width: 56px !important; height: 56px !important;
  max-width: none !important; max-height: none !important;
  object-fit: cover; border-radius: 10px; display: block;
}

/* title + qty×price */
#btmCartOffcanvas .mini-cart__meta{ grid-column: 2; min-width: 0; }
#btmCartOffcanvas .mini-cart__meta a{
  color: var(--heading-color, #0b2d2b);
  text-decoration: none; font-weight: 700;
  font-size: 14px; line-height: 1.35; display: inline-block;
}
#btmCartOffcanvas .mini-cart__meta .quantity,
#btmCartOffcanvas .mini-cart__meta small{
  display: block; margin-top: 2px; font-size: 12px; color: #667;
}

/* remove (×) */
#btmCartOffcanvas .mini-cart__remove{
  grid-column: 3; justify-self: end;
  color: #b23; text-decoration: none; font-size: 18px; line-height: 1;
  opacity: .75; transition: opacity .2s, transform .2s;
}
#btmCartOffcanvas .mini-cart__remove:hover{ opacity: 1; transform: scale(1.06); }

/* mini-cart totals/buttons at bottom of Woo output */
#btmCartOffcanvas .mini-cart__total,
#btmCartOffcanvas .woocommerce-mini-cart__total{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; margin-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08); font-weight: 700;
}
#btmCartOffcanvas .mini-cart__footer .button,
#btmCartOffcanvas .woocommerce-mini-cart__buttons .button{
  border-radius: 10px; font-size: .95rem;
}


/* Make bottom bar slide away while scrolling, return when user stops/scrolls up */
.mobile-bottom-nav { transition: transform .25s ease; }
.mobile-bottom-nav.nav-hidden { transform: translateY(100%); }


@media (max-width: 468px) {
  .hero .hero-image-showcase .floating-card .card-content .card-info h4,
  .hero .hero-image-showcase .floating-card .card-content .card-info p,
  .hero .hero-image-showcase .floating-card .card-content,
  .hero .hero-image-showcase .floating-card
  
  {
    font-size: 12px !important;
    line-height: 0.5;
    padding: 5px !important;
    gap: 0;
  }
}

@media (max-width: 468px) {
.hero .hero-image-showcase .floating-card .card-content .card-icon{
    width: 30px;
    height: 30px;
}
}

@media (max-width: 468px) {
    .hero .hero-image-showcase .floating-card.card-1 {
        left: 20px;
        top: -15%;
    }
}

@media (max-width: 468px) {
    .hero .hero-image-showcase .floating-card.card-2 {
        right: 20px;
        bottom: -15%;
    }
}

@media (max-width: 468px) {
    .ali-search-mobile .ali-search {

      width: 70%;
      margin: 0 auto;
      display: block;

    }
  }

  

/*--------------------------------------------------------------
# BRANDS
--------------------------------------------------------------*/ 
/* Container spacing handled by Bootstrap utilities */
.brands-masonry .brand-card {
  border: 0;
  background: transparent !important;  
  margin: 5px;
  padding: 0px 5px 0px 5px;
}

.brands-masonry .brand-img-wrap {
  padding: .75rem;                  /* space around logo */
  border-radius: 3rem;
  background:  transparent !important;   /* looks good in light/dark */
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
}

/* Logos: support PNG transparency; contain keeps proportions */
.brands-masonry img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: grayscale(1);
  transition: filter .6s ease, transform .25s ease;
  will-change: filter, transform;
  background: transparent !important; 
}

.brands-masonry a:hover img,
.brands-masonry a:focus img {
  filter: grayscale(0);
  transform: translateY(-3px);
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .brands-masonry img { transition: none; }
}

/* Optional: if you’d prefer uniform tiles instead of classic Masonry,
   uncomment to force consistent aspect ratios (Masonry effect will be subtler) */

.brands-masonry .brand-img-wrap {
  aspect-ratio: 1 / 1;           
  display: flex; align-items: center; justify-content: center;
}
.brands-masonry img { max-height: 100%; }


.shop-toolbar { box-shadow: 0 6px 18px rgba(0,0,0,.06); }
#filtersOffcanvas { width: min(92vw, 420px); }
/* give bottom space so mobile bottom navbar doesn't cover last row */
@media (max-width: 991.98px){
  #shop .container { padding-bottom: calc(var(--mobile-nav-h, 64px) + 14px); }
}

.bi-x-circle{
  line-height: 0 !important;
}

.bi-check2{
  line-height: 0 !important;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  position: relative;
  top: 0px;
  z-index: 1;
  width: 14px;
  height: 14px;
  cursor: pointer;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
  background-color: var(--accent-color);

}

input[type="range"]:hover ~ #rangevalue,
input[type="range"]:active ~ #rangevalue {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  top: -75px;
}

.form-check-input:checked {
    background-color: var(--nav-dropdown-hover-color);
    border-color: var(--nav-dropdown-hover-color);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--accent-color);
}

/* WooCommerce → Bootstrap pagination: use theme accent color */
.woocommerce nav.woocommerce-pagination .pagination .page-link{
  color: var(--accent-color);
}

.woocommerce nav.woocommerce-pagination .pagination .page-link:hover,
.woocommerce nav.woocommerce-pagination .pagination .page-link:focus{
  color: var(--accent-color);
  background: rgba(0,0,0,.02); /* subtle hover; optional */
}

.woocommerce nav.woocommerce-pagination .pagination .page-item.active .page-link{
  color: #fff;                       /* readable on accent bg */
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

/* Optional: tone down disabled state so accent pops */
.woocommerce nav.woocommerce-pagination .pagination .page-item.disabled .page-link{
  color: #9aa3ae;
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
  border: 0 !important;
  margin-top: 10px;
  font-size: 18px;
}

/* kill the glow */
nav.woocommerce-pagination .page-link:focus{ box-shadow: none; }

/* accessible outline on keyboard focus */
nav.woocommerce-pagination .page-link:focus-visible{
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}


/* Filters: make all checks/radios use your accent */
#shop-filters-desktop .form-check-input{
  /* base */
  --bs-form-check-bg: var(--bs-body-bg);
  --bs-form-check-border-color: rgba(0,0,0,.2);

  /* when checked */
  --bs-form-check-checked-bg-color: var(--accent-color);
  --bs-form-check-checked-border-color: var(--accent-color);
  --bs-form-check-checked-color: #fff; /* tick color */

  /* focus ring (matches your accent) */
  --bs-form-check-focus-box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-color) 35%, transparent);
}

/* Fallback in case your Bootstrap build doesn’t expose the CSS vars above */
#shop-filters-desktop .form-check-input:checked{
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}
#shop-filters-desktop .form-check-input:focus{
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-color) 35%, transparent);
  border-color: var(--accent-color);
}

/* Card-like header to match sidebar */
.shop-header{
  background: var(--bs-body-bg);
  box-shadow:0 -18px 36px -16px rgba(0,0,0,.08) !important;
  margin-top: 60px;
}
.shop-header h1{
  font-size: 24px;
}

/* Center title; lock breadcrumbs to the physical left */
.shop-header-inner{ min-height: 64px;  } /* keeps nice vertical rhythm */
.shop-header .page-title{ text-shadow: none; }

/* Breadcrumbs pinned to left even in RTL */
.shop-header .page-breadcrumb{
  position: absolute;
  left: 1rem;             /* physical left */
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;    /* avoid wrapping */
}

/* Breadcrumb look + accent hover, no underline */
.shop-header .breadcrumb{
  --bs-breadcrumb-divider: "›";
  margin: 0;
}
.shop-header .breadcrumb a{
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
.shop-header .breadcrumb a:hover{
  color: var(--accent-color);
  text-decoration: none;
}
.shop-header .breadcrumb .breadcrumb-item.active{
  color: var(--bs-secondary-color);
}

/* Small screens: place breadcrumbs under the title, centered */
@media (max-width: 576px){
  .shop-header .page-breadcrumb{
    position: static;
    transform: none;
    margin-top: .5rem;
    text-align: center;
  }
}


/* Toolbar + Sidebar + Offcanvas buttons with icon + text */
.shop-toolbar .btn,
#shop-sidebar .btn,
#filters-offcanvas-mount .btn,   /* if you used my mount id */
#filtersOffcanvas .btn {         /* or your offcanvas id */
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* centers icon+text as a group */
  gap: .3rem;
  text-align: center;        /* keeps label centered */
  --bs-btn-line-height: 1.2; /* keep normal text line-height */
  font-size: 18px;
}

/* Icon alignment only (don’t collapse text line-height) */
.shop-toolbar .btn .bi,
.shop-toolbar .btn svg,
#shop-sidebar .btn .bi,
#shop-sidebar .btn svg,
#filters-offcanvas-mount .btn .bi,
#filters-offcanvas-mount .btn svg,
#filtersOffcanvas .btn .bi,
#filtersOffcanvas .btn svg{
  line-height: 0;
  vertical-align: -0.125em;
  display: inline-block;
}


/* Accent the tabs and buttons */
.nav-pills .nav-link{
  border-radius: 12px;
  color: var(--accent-color);
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}
.nav-pills .nav-link.active{
  color: #fff;
  background: var(--accent-color);
  border-color: var(--accent-color);
}

/* Card look like Bootstrap example */
.woocommerce-account .card{
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* Floating labels spacing (Bootstrap form-floating) */
.form-floating > label{ left: auto; right: .75rem; }      /* RTL hint */
.form-floating > .form-control{ padding-right: 1rem; }    /* RTL hint */

/* Error/notice spacing */
.woocommerce-error, .woocommerce-message, .woocommerce-info{
  margin-bottom: 1rem;
}


/* Modal look */
/* Modal card */
#authModal .modal-content{
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  border-radius: 1rem;
}

/* Tabs: segmented look */
#authModal .nav-pills .nav-link{
  border-radius: 999px;
  color: var(--accent-color);
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}
#authModal .nav-pills .nav-link.active{
  color: #fff;
  background: var(--accent-color);
  border-color: var(--accent-color);
}

/* Accent button (no Bootstrap blue) */
.btn-accent{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent-color) 88%, #000 12%);
  --bs-btn-hover-border-color: var(--accent-color);
  --bs-btn-active-bg: var(--accent-color);
  --bs-btn-active-border-color: var(--accent-color);
}

/* Accent button already defined; add icon sizing + alignment */
#authModal .btn-accent{
  display: inline-flex;           /* keep text + icon aligned */
  align-items: center;
  justify-content: center;
  gap: .5rem;                     /* space between icon and text */
}

#authModal .btn-accent .bi{
  font-size: 1.25em;              /* bigger icon */
  line-height: 0;                 /* don't affect Farsi baseline */
  vertical-align: -0.125em;       /* tiny optical nudge */
}

/* Tabs (keep your accent) */
#authModal .nav-pills .nav-link{
  border-radius: 999px;
  color: var(--accent-color);
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}
#authModal .nav-pills .nav-link.active{
  color: #fff;
  background: var(--accent-color);
  border-color: var(--accent-color);
}

/* Floating labels RTL tweaks */
#authModal .form-floating>label{ right:.75rem; left:auto; }
#authModal .form-floating>.form-control{ padding-right:1rem; }

/* Remove blue glow on inputs (keep clean) */
#authModal .form-control:focus{
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-color) 25%, transparent);
  border-color: var(--accent-color);
}

/* Page login/register buttons: same icon alignment as modal */
.woocommerce-account .btn-accent{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
}
.woocommerce-account .btn-accent .bi{ font-size:1.25em; line-height:0; vertical-align:-.125em; }

/* Floating labels RTL tweaks */
.woocommerce-account .form-floating>label{ right:.75rem; left:auto; }
.woocommerce-account .form-floating>.form-control{ padding-right:1rem; }

/* Keep the header tight (no extra gap) */
.site-main .container > header[style]{ margin-bottom:0 !important; }


/* Remove the big top/bottom gap on Woo pages that still have .my-5 */
.woocommerce-account .site-main > .container.my-5,
.woocommerce .site-main > .container.my-5{
  margin-top: 0 !important;
  /* optionally also */
  /* margin-bottom: 0 !important; */
}


/* ---- Containers (match the Shop card look) ---- */
.account-sidebar,
.account-content{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  border-radius:1rem;
}

/* ---- Woo account nav reset + pills look ---- */
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-MyAccount-navigation li{ margin:0 0 .4rem 0; }
.woocommerce-MyAccount-navigation a{
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem .85rem; border-radius:.75rem;
  text-decoration:none; background:#f8f9fa;
  color: var(--default-color, #1f2937);
}
.woocommerce-MyAccount-navigation a:hover{
  background:#eef1f4; color: var(--default-color, #1f2937);
}
.woocommerce-MyAccount-navigation li.is-active > a{
  background: var(--accent-color); color:#fff;
}

/* ---- Offcanvas container ---- */
.offcanvas-account{ border-radius:1rem 1rem 0 0; }
.offcanvas-account .woocommerce-MyAccount-navigation a{ background:#f5f7f8; }
.offcanvas-account .woocommerce-MyAccount-navigation li.is-active > a,
.offcanvas-account .woocommerce-MyAccount-navigation a:hover{
  background: var(--accent-color); color:#fff;
}

/* ---- Buttons (accent) shared with modal/page) ---- */
.btn-accent{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--accent-color);
  --bs-btn-border-color:var(--accent-color);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent-color) 88%, #000 12%);
  --bs-btn-hover-border-color:var(--accent-color);
}
.btn-accent .bi{ font-size:1.25em; line-height:0; vertical-align:-.125em; }

/* ---- Tame Woo default wrappers if any CSS slips through ---- */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register{
  margin:0 !important; padding:0 !important; border:0 !important;
  background:transparent !important; box-shadow:none !important;
}

/* Optional: small adjustments for endpoint content */
.woocommerce-account mark{ background:transparent; color:inherit; }
.woocommerce-Address address{ margin:0; }

/* Optional: tighter table style inside card */
.woocommerce-account table.shop_table{
  --bs-border-color:rgba(0,0,0,.08);
  border-color:var(--bs-border-color);
}

.woocommerce-account .row.g-4{ flex-direction: row-reverse; }



/* Woo buttons in My Account → our accent button */
.woocommerce-account .button,
.woocommerce-account button.button,
.woocommerce-account .woocommerce-Button {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem 1rem; border-radius:.75rem; border:0;
  background: var(--accent-color); color:#fff; text-decoration:none;
}
.woocommerce-account .button:hover{ filter:brightness(.95); }



/* Tidy Address cards */
.woocommerce-Addresses .woocommerce-Address{
  border:1px solid rgba(0,0,0,.06);
  border-radius:1rem; background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:1rem 1.25rem; margin-bottom:1rem;
}

/* Title row (h3 + edit link) */
.woocommerce-Address .title{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.75rem;
}
.woocommerce-Address .title h3{
  margin:0; font-weight:700; word-break:normal; white-space:normal;
}

/* Optional – edit link look */
.woocommerce-Address .edit{
  color:var(--accent-color); text-decoration:none;
}
.woocommerce-Address .edit:hover{ text-decoration:underline; }


/* ---------- Shells (match Shop cards) ---------- */
.account-sidebar,.account-content{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:1rem; box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* ---------- Forms: Bootstrap-like everywhere ---------- */
.woocommerce-account .woocommerce form .form-row{ margin-bottom:1rem; }
.woocommerce-account .woocommerce form .form-row label{
  display:block; margin-bottom:.35rem; font-weight:600; color:var(--default-color,#1f2937);
}
.woocommerce-account .woocommerce form input[type="text"],
.woocommerce-account .woocommerce form input[type="email"],
.woocommerce-account .woocommerce form input[type="password"],
.woocommerce-account .woocommerce form input[type="tel"],
.woocommerce-account .woocommerce form textarea,
.woocommerce-account .woocommerce form select,
.woocommerce-account .woocommerce .input-text{
  display:block; width:100%; padding:.625rem .875rem;
  border:1px solid rgba(0,0,0,.15); border-radius:.75rem; background:#fff;
}
.woocommerce-account .woocommerce form input:focus,
.woocommerce-account .woocommerce form textarea:focus,
.woocommerce-account .woocommerce form select:focus{
  outline:0; border-color:var(--accent-color);
  box-shadow:0 0 0 .2rem color-mix(in srgb, var(--accent-color) 18%, transparent);
}

/* Buttons → accent */
.woocommerce-account .button,
.woocommerce-account button.button,
.woocommerce-account .woocommerce-Button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem 1rem; border-radius:.75rem; border:0;
  background:var(--accent-color); color:#fff; text-decoration:none;
}
.woocommerce-account .button:hover{ filter:brightness(.96); }

/* ---------- Addresses (fix broken layout) ---------- */
.woocommerce-account .woocommerce-Addresses{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  align-items:stretch;
}
.woocommerce-account .woocommerce-Address{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:1rem; box-shadow:0 10px 30px rgba(0,0,0,.06);
  padding:1rem 1.25rem;
}
.woocommerce-account .woocommerce-Address .title{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.5rem;
}
.woocommerce-account .woocommerce-Address .title h3{
  margin:0; font-weight:800; white-space:normal; word-break:normal;
}
.woocommerce-account .woocommerce-Address .edit{
  color:var(--accent-color); text-decoration:none; font-weight:600;
}
.woocommerce-account .woocommerce-Address .edit:hover{ text-decoration:underline; }
.woocommerce-account .woocommerce-Address address{ margin:0; white-space:normal; }

/* ---------- Neutralize any leftover Woo wrappers ---------- */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register{
  margin:0 !important; padding:0 !important; border:0 !important;
  background:transparent !important; box-shadow:none !important;
}


/* 1) Nuke legacy two-column floats/widths */
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2,
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2{
  float:none !important;
  width:auto !important;
  margin:0 !important;
}

/* 2) Make the wrapper a responsive grid */
.woocommerce-account .woocommerce-Addresses{
  display:grid !important;
  gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  align-items:start;
}

/* 3) Make each address a proper card */
.woocommerce-account .woocommerce-Address{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  padding:1rem 1.25rem;
  min-width:320px;          /* safety so text never collapses */
  white-space:normal;       /* allow normal wrapping */
  word-break:normal;        /* avoid per-letter breaks in Farsi */
}

/* Title row (heading + edit link) */
.woocommerce-account .woocommerce-Address .title{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.65rem;
}
.woocommerce-account .woocommerce-Address .title h3{
  margin:0; font-weight:800; white-space:normal; word-break:keep-all;
}
.woocommerce-account .woocommerce-Address .edit{
  color:var(--accent-color); text-decoration:none; font-weight:600;
}
.woocommerce-account .woocommerce-Address .edit:hover{ text-decoration:underline; }

/* Address text */
.woocommerce-account .woocommerce-Address address{
  margin:0; line-height:1.9; white-space:normal; word-wrap:break-word;
}

.btn-close:hover{
  color: #fff !important;
}


/* Gallery */
#sp-main{ background:#fff; }
#sp-thumbs img{ object-fit:contain; aspect-ratio:1/1; }
#sp-thumbs .sp-thumb{ transition:transform .15s ease; }
#sp-thumbs .sp-thumb:hover{ transform:scale(1.03); }

/* Buttons (accent) */
.btn-accent{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--accent-color);
  --bs-btn-border-color:var(--accent-color);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent-color) 88%, #000 12%);
  --bs-btn-hover-border-color: var(--accent-color);
}

/* Rating icons color */
.rating-stars i,
.rating-input i{ color:#f4b400; } /* gold */

/* Woo add-to-cart forms slimline */
.single-product .variations td.label{ width: auto; padding-inline-start:0; }
.single-product .variations select{ min-width: 160px; }
.single-product .single_add_to_cart_button{ @supports (initial-value: initial) {} }

/* Related cards */
#related-grid .card h6{ line-height:1.35; }

/* LTR inputs for email/username/password in RTL */
html[dir="rtl"] .single-product input[type="email"],
html[dir="rtl"] .single-product input[type="password"],
html[dir="rtl"] .single-product input[name="username"]{
  direction:ltr; text-align:left;
}




/* Main box size and smooth fade */
.alioptic-gallery .ao-main{ height: 560px; }
@media (max-width: 991.98px){ .alioptic-gallery .ao-main{ height: 420px; } }
.alioptic-gallery .ao-main-img{
  object-fit: contain;
  background:#fff;
  transition: opacity .25s ease;
}

/* Fade for the main image */
.ao-main-img { transition: opacity .25s ease; display:block; width:100%; height:auto; object-fit:contain; }

/* Thumbs */
.ao-thumbs .ao-thumb { outline: none; border-radius: .625rem; }
.ao-thumbs .ao-thumb-img { width:72px; height:72px; object-fit:cover; display:block; }
.ao-thumbs .ao-thumb.is-active .ao-thumb-img,
.ao-thumbs .ao-thumb:focus-visible .ao-thumb-img {
  box-shadow: 0 0 0 3px var(--accent-color, #176d5a) inset, 0 0 0 1px rgba(0,0,0,.08);
  border-radius: .625rem;
}


/* Container + main image */
.ao-gallery { overflow: visible; }
.ao-main{
  overflow: visible;
  border-radius: 1rem;
  background: #fff;
  padding: 1rem;

  box-shadow: 0 1rem 3rem rgba(0,0,0,.06);

  /* make outline “exist” so its color/offset can animate */
  outline: 2px solid transparent;
  outline-offset: 0;

  /* no 'outline' here — only animatable parts */
  transition: box-shadow .2s ease,
              outline-color .2s ease,
              outline-offset .2s ease,
              filter .2s ease;
}

.ao-main:hover{
  box-shadow: 0 1rem 5rem rgba(0,0,0,.175);
  outline-color: var(--accent-color);  /* was 'outline: 2px solid …' */
  outline-offset: 4px;                 /* optional tasty lift */
}

.ao-main-link { display:block; border-radius: inherit; overflow: hidden; }
.ao-main-img  { width: 100%; height: auto; display:block; object-fit: contain; transition: opacity .2s ease; }

/* Thumbs row */
.ao-thumbs { display:flex; justify-content:center; gap:.75rem; margin: 3rem auto 1.25rem; overflow: visible; }

/* Thumb card */
.ao-thumb { display:block; border-radius: 1rem; background:#fff; padding:.5rem;
            box-shadow: 0 8px 24px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease; }
.ao-thumb:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.18); }

.ao-thumb img { width:84px; height:84px; object-fit:contain; display:block; }

/* Active ring */
.ao-thumb.is-active { outline: 2px solid var(--accent-color, #197a67); outline-offset: 0px; }


@media (max-width: 576px){
  .page-breadcrumb{
    position: static;
    transform: none;
    margin-top: .5rem;
    text-align: center;
  }
}

/* Put in your main stylesheet */
.ali-back-btn { box-shadow: 0 0 0 0 rgba(0,0,0,.0); transition: box-shadow .2s ease; }
.ali-back-btn:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); }



/* Back button inside the title header */
.shop-header-inner { position: relative; }

/* Place the button on the logical "start" side, vertically centered */
.shop-header-inner .ali-back-btn{
  position: absolute;
  inset-inline-start: .5rem;   /* RTL/LTR safe */
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .2s ease;
}

/* subtle hover elevation */
.shop-header-inner .ali-back-btn:hover{
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* keep the title perfectly centered on small screens */
@media (max-width: 576px){
  .shop-header-inner .page-title{
    padding-inline-start: 2.25rem; /* space for the button on the start side */
  }
}


/* Only this back button (in the page title header) */
#productBackBtn.btn {
  background-color: #f8f9fa !important;   /* light */
  color: #212529 !important;
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
  border-radius: .75rem;
  line-height: 1.1;
}
#productBackBtn.btn:hover{
  background-color: #e9ecef !important;
  border-color: #d3d7db !important;
  color: #212529 !important;
}
#productBackBtn .bi{
  line-height: 0;            /* align icon with Farsi text */
  font-size: 1.05rem;
}



/* ===== Global page width (one place to control everything) ===== */
:root{
  --page-max: 1600px;              /* overall cap on big screens */
  --page-span: 94vw;               /* how close to the edges we go */
  --page-gutter: clamp(12px, 2vw, 28px);
}

/* Make all standard Bootstrap containers wider */
.container,
.container-sm, .container-md, .container-lg, .container-xl, .container-xxl{
  max-width: min(var(--page-span), var(--page-max)) !important;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* Give fluid containers nice gutters without capping width */
.container-fluid{
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* Any custom “frames” should use the same width cap */
#top-carousel .hero-carousel__frame,
#sales .hero-image-showcase .image-wrapper,
#salesbanner .hero-image-showcase .image-wrapper{
  width: 100%;
  max-width: min(var(--page-span), var(--page-max)) !important;
  margin-inline: auto;
}

/* Phone comfort */
@media (max-width: 767.98px){
  :root{ --page-span: 96vw; }      /* a hair wider on phones */
}

/* Optional: look great on 4K/ultra-wide */
@media (min-width: 1600px){
  :root{ --page-max: 1800px; }
}





/* TOP CAROUSEL — wider on desktop, clean on mobile */
section#top-carousel{
  /* remove side gutters; keep vertical spacing */
  padding: clamp(24px, 4vw, 48px) 0 !important;
}

/* desktop/laptop: make the frame wider */
#top-carousel .hero-carousel__frame{
  width: min(94vw, 1600px) !important;  /* was 90vw / 1400px inline */
}

/* very wide screens (optional bump, looks great on 4K) */
@media (min-width: 1600px){
  #top-carousel .hero-carousel__frame{
    width: min(92vw, 1800px) !important;
  }
}

/* tablets */
@media (max-width: 1199.98px){
  #top-carousel .hero-carousel__frame{
    width: min(94vw, 1100px) !important;
  }
}

/* phones */
@media (max-width: 767.98px){
  #top-carousel .hero-carousel__frame{
    width: 96vw !important;          /* fill the screen nicely */
    max-width: 520px !important;     /* keep it tidy on small phones */
    padding: 10px !important;        /* matches your existing mobile style */
  }
}


/* place this AFTER the theme’s CSS */
#header button.btn.icon-btn[data-bs-target="#offcanvasMobileNav"]{
  background: transparent;   /* your styles here */
  border-color: var(--accent-color);
  font-size: 24px;
  color: #222;
  line-height: 0;
  box-shadow: none;
}


/* Off-canvas panel */
.offcanvas {
  position: fixed;      /* or absolute if you prefer, but fixed is typical */
  z-index: 1200;        /* > 1061 so it sits above the header */
}

/* Dim/backdrop layer */
.offcanvas-backdrop {
  position: fixed;
  inset: 0;
}



#sales,
#brands{
  background: var(--bs-body-bg);
  box-shadow: 0 -18px 36px -16px rgba(0, 0, 0, 0.1) !important;
  border-radius: var(--bs-border-radius-xl) !important;
  margin-top: 120px;

}

/* The container that holds the title+desc */
#sales.section-title,
#brands.section-title{
  position: relative;                 /* anchor for the absolute label   */
  text-align: center;
  --label-h: 56px;                    /* ≈ label height (tweak)          */
  margin-top: 120px;                      /* avoid theme margins pushing it  */
}

@media (max-width: 468px) {
  #sales.section-title,
  #brands.section-title {
  padding-top: calc(var(--label-h) + 24px); /* reserve space below label  */
  }
}

/* The hanging label – apply to your <span class="title-hang"> 
   or to <h2 class="tittle-hang"> (typo supported) */
#sales.section-title .title-hang,
#sales.section-title .tittle-hang,
#brands.section-title .title-hang,
#brands.section-title .tittle-hang,
#shop.container .section-title .title-hang,
#shop.container .section-title .tittle-hang{
  position: absolute;
  top: 0;                             /* stick to the top edge exactly   */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;

  display: inline-block;
  margin: 0;                          /* in case it’s an <h2>            */
  padding: 14px 28px;                 /* adjust to match your design     */
  background: var(--accent-color);
  color: #fff;
  line-height: 1.2;

  /* square top, rounded bottom => hanging tag illusion */
  border-radius: 0 0 18px 18px;

  /* depth similar to your mega menu */
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
}

.portfolio section{
  background: var(--accent-color);
}

/* Keep the main H2 from adding extra space above */
#sales.section-title h2,#brands.section-title h2{ margin-top: 0; }



/* ensure the section title is a positioning context */
#sales.section-title { position: relative; }

/* the small pill */
#sales.section-title .title-cta{
  --gap: 14px;                 /* space between small pill and big label */
  --offset: 170px;             /* horizontal shift left from center */
  position: absolute;
  top: 0;                      /* align with the hanging label's top */
  left: 40%;
  transform: translateX(calc(-50% - var(--offset))); /* sit to the LEFT */
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: .5rem;

  height: 48px;
  padding-inline: 10px;        /* compact when collapsed */
  border-radius: 0px 0px 10px 10px;
  background: #E62523;         /* dark pill (contrasts the accent tag) */
  color: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  text-decoration: none;
  line-height: 0;

  /* subtle entry + hover animation */
  transition: padding .25s ease, background-color .25s ease, box-shadow .25s ease;
}

/* icon lure */
#sales.section-title .title-cta i{
  font-size: 2rem;
  display: inline-block;
  transform-origin: 50% 60%;
  transition: transform .25s ease, filter .25s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

/* hidden label text; expand on hover/focus */
#sales.section-title .title-cta .title-cta-text{
  max-width: 0; 
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: max-width .35s ease, opacity .25s ease .05s;
  font-size: 18px;
}

/* on hover/focus: open the pill and reveal text */
#sales.section-title .title-cta:hover,
#sales.section-title .title-cta:focus-visible{
  padding-inline: 8rem; 
  background: color-mix(in srgb,#E62523    20%);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}
#sales.section-title .title-cta:hover .title-cta-text,
#sales.section-title .title-cta:focus-visible .title-cta-text{
  max-width: 260px;  /* enough for the Persian sentence */
  opacity: 1;
}
#sales.section-title .title-cta:hover i,
#sales.section-title .title-cta:focus-visible i{
  transform: rotate(-8deg) scale(1.08);
}

/* keep a tidy gap from the main label visually (fine-tune with --offset) */
@media (max-width: 768px){
  /* on small screens, drop the pill under the big label to avoid overlaps */
  #sales.section-title .title-cta{
  top: 0;                      /* align with the hanging label's top */
  left: 60%;
  transform: translateX(calc(-50% - var(--offset))); /* sit to the LEFT */
  height: 32;
  font-size: 1rem;
  }
}
/* Mobile/touch: hide text, KEEP ICON & its animation */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  #sales.section-title .title-cta {
    padding-inline: 10px !important;   /* compact, no width growth */
    line-height: 1 !important;
  }
  #sales.section-title .title-cta .title-cta-text {
    display: none !important;          /* hide only the text */
    opacity: 0 !important;
    transform: none !important;
  }
  /* DO NOT override transform/opacity on the icon here */
  #sales.section-title .title-cta i {
    animation: cta-wink 3s ease-in-out infinite .8s; /* keep wink on mobile */
    will-change: transform;
  }
  /* Neutralize pill growth on touch without touching the icon */
  #sales.section-title .title-cta:hover,
  #sales.section-title .title-cta:focus-visible {
    padding-inline: 10px !important;
    background: #E62523;
  }
}


@keyframes cta-wink {
  0%, 100% { transform: rotate(0) scale(1); }
  50%      { transform: rotate(-8deg) scale(1.08); }
}
#sales.section-title .title-cta:not(:hover) i{
  animation: cta-wink 2.8s ease-in-out infinite;
  animation-delay: .8s;
}


/* Desktop only: swap icon↔text on hover/focus */
@media (hover:hover) and (pointer:fine){
  #sales.section-title .title-cta:hover .title-cta-text,
  #sales.section-title .title-cta:focus-visible .title-cta-text{
    opacity: 1;
    transform: translateY(0);
    color: #fff;
  }
  #sales.section-title .title-cta:hover i,
  #sales.section-title .title-cta:focus-visible i{
    opacity: 0;
    transform: translateY(-6px) scale(.9);
  }
}


#sales.section-title .title-cta:hover i,
#sales.section-title .title-cta:focus-visible i{
  opacity: 0;
  transform: translateY(-6px) scale(.9);
}

/* (optional) keep your width growth, but you can reduce it now */
#sales.section-title .title-cta:hover,
#sales.section-title .title-cta:focus-visible{
  /* you had: padding-inline: 8rem;  */
  padding-inline: 7rem;  /* enough room for the text without looking bloated */
}

#sales.section-title span{
  margin-top: 0px;
  padding: 10px;
  text-align: center;
}


/* Mobile/touch override: keep ICON visible, hide TEXT only */
@media (max-width: 768px), (hover:none) and (pointer:coarse){
  #sales.section-title .title-cta:hover i,
  #sales.section-title .title-cta:focus-visible i,
  #sales.section-title .title-cta:active i{
    opacity: 1 !important;
    transform: none !important;
  }
  #sales.section-title .title-cta:hover .title-cta-text,
  #sales.section-title .title-cta:focus-visible .title-cta-text,
  #sales.section-title .title-cta:active .title-cta-text{
    display: none !important;
    opacity: 0 !important;
    transform: none !important;
  }
  /* also stop the pill expanding on tap */
  #sales.section-title .title-cta:hover,
  #sales.section-title .title-cta:focus-visible,
  #sales.section-title .title-cta:active{
    padding-inline: 10px !important;
    background: #E62523;
  }
}


.noUi-connect {
    background: var(--accent-color) !important;
}

/* space around the noUi track */
.js-price-filter .price_slider,
.js-price-filter .noUi-target {
  margin-inline: 12px;   /* left & right gap */
  margin-block: 6px;     /* top & bottom gap */
}

/* (optional) slimmer track + rounded handles, purely visual */
.js-price-filter .noUi-handle { border-radius: 10px; }


.spacer{
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding-bottom: 10px;

}

.ali-filter-box{margin-block:1rem;padding:1rem;border:1px solid var(--bs-border-color,#e5e7eb);border-radius:12px}
.ali-filter-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.ali-filter-title{font-weight:700}
.ali-filter-search{inline-size:12rem;max-inline-size:45%}
.ali-filter-body{display:grid;gap:.5rem}
.ali-check input{margin-inline-end:.5rem}
.ali-pill input{display:none}
.ali-pill span{display:inline-block;padding:.25rem .6rem;border:1px solid #ddd;border-radius:9999px}
.ali-pill input:checked+span{border-color:#111}
.ali-swatch{display:flex;align-items:center;gap:.5rem}
.ali-swatch-dot{inline-size:1rem;block-size:1rem;border-radius:50%;border:1px solid rgba(0,0,0,.15);background:var(--swatch,#eee)}



:root{
    --bs-btn-color: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc3545;
    --bs-btn-hover-border-color: #dc3545;
    --bs-btn-focus-shadow-rgb: 220,53,69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #dc3545;
    --bs-btn-active-border-color: #dc3545;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #dc3545;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #dc3545;
    --bs-gradient: none;
}

#active-chips #clear-filters-btn:hover {
    color: var(--bs-btn-hover-color) !important;
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
    box-shadow: 0 20px 40px color-mix(in srgb, var(--bs-btn-color), transparent 80%) !important;
}

#active-chips #clear-filters-btn{
  background-color: var(--bs-btn-color) !important;
  border-color: var(--bs-btn-border-color) !important;
  color: #dc3545;
}

.brand-icon{
  width:24px; height:24px; object-fit:contain;
  flex: 0 0 24px; /* keep it from squishing */
  vertical-align:middle;
}


/* When a variation image is active, visually disable thumbs */
.ao-gallery.ao-gallery--variation .ao-thumb.ao-thumb--disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* --- Meta head & title --- */

.ao-meta-head {
  /* keeps category chip close to title */
}

.ao-product-title {
  /* a bit bigger than your old h3 */
  font-size: 32px !important;
  line-height: 1.3;
}

@media (max-width: 468px){
  .ao-product-title{
    font-size: 22px !important;
  }
}

/* --- Generic meta chips line --- */

.ao-meta-line--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --- Chips --- */

.ao-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.4rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color, #dee2e6);
  background-color: #f8f9fa;
  font-size: 0.8125rem;
  line-height: 0;
  color: var(--bs-secondary-color, #6c757d);
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.ao-chip--meta {
  background-color: #f8f9fa;
  color: #495057;
}
.ao-chip--brand:hover {
  border-color: #018880;
}

/* Category chip: small, gray, green on hover */
.ao-chip--cat {
  font-size: 0.75rem;
  color: #6c757d;
}

.ao-chip--cat:hover,
.ao-chip--cat:focus {
  color: #018880;
  border-color: #018880;
  text-decoration: none;
  text-shadow: 0 10px 24px color-mix(in srgb, var(--accent-color), transparent 80%);
}

/* Brand chip a bit stronger visually */
.ao-chip--brand,
.ao-chip--meta {
  font-weight: 600;
}

/* Icon spacing inside chips */
.ao-chip-icon {
  display: inline-block;
  font-size: 0.9em;
  margin-inline-start: 0.15rem;  /* RTL-friendly */
  margin-inline-end: 0.25rem;
}

/* fallback if you still use icons inside .ao-meta-label elsewhere */
.ao-meta-label .bi {
  margin-inline-end: 0.25rem;
}

/* ============================
   PRICE BLOCK (single product)
   ============================ */

/* Wrapper row */
.ao-price-row {
  display: flex;
  margin-top: 1.25rem;     
  justify-content: space-evenly;   
}

/* Pill / tag itself */
.ao-price-tag {
  direction: rtl;              /* keep icon + "قیمت" on the right */
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;

  padding: 0.55rem 1.60rem;     /* inner padding (top/bottom, left/right) */
  border-radius: 999px;
  border: 1px solid color-mix(
    in srgb,
    var(--accent-color, #018880),
    transparent 80%
  );
  background-color: #ffffff;
}

/* Price label + icon on the right side of the pill */
.ao-price-icon {
  font-size: 1.05rem;
  line-height: 0;
}

.ao-price-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
}

/* WooCommerce price inside the pill (normal + sale) */
.ao-price-tag .price {
  display: inline-flex;        /* keep del + ins on one row */
  align-items: baseline;
  margin: 0;                   /* remove default <p> margin */
  font-size: 1.3rem !important;           /* main amount size */
  font-weight: 800;
  color: var(--accent-color, #018880) !important;
  line-height: 1.2;
}

/* Regular (non-sale) amount */
.ao-price-tag .price .amount {
  white-space: nowrap;
}

/* Sale price: new price strong & green, old price small & grey,
   both stay inside the pill and aligned */
.ao-price-tag .price ins {
  order: 0;
  text-decoration: none !important;
  font-weight: 800 !important;
  color: var(--accent-color, #018880) !important;
}

.ao-price-tag .price del {
  order: 1;
  font-size: 0.9rem;
  color: #adb5bd;
  opacity: 1;
  text-decoration: line-through;
}

@media (max-width: 468px){
  .ao-price-tag .price {
  flex-wrap: wrap; 
  flex-direction: column-reverse;
  align-items: center; 
  }
}

/* Size guide chip — follows same style as other meta chips */
.ao-chip--sizeguide {
  /* optional: slightly lighter background so it feels “helper-ish” */
  background-color: #f8fafb;
}

.ao-chip--sizeguide .ao-chip-icon {
  font-size: 0.95em;
}



/* Hide the original dropdown only for color attribute,
   but keep it in DOM for WooCommerce JS */
.variations select.ao-variation-select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  height: 0;
  width: 0;
}

/* Wrap for swatches row inside variations table */
.ao-color-swatches {
  justify-content: flex-end; /* RTL: right-align in the cell */
}

/* Individual swatch wrapper */
.ao-color-swatch-wrap {
  cursor: pointer;
}

/* Reuse your facet swatch look, but allow extra states */
.ao-color-swatch {
  /* facet-swatch already sets size/shape on shop.
     If needed, uncomment these to enforce:
  width: 26px;
  height: 26px;
  border-radius: 999px;
  */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.12);
  transition: box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

/* Selected color */
.ao-color-swatch-wrap.is-selected .ao-color-swatch {
  box-shadow: 0 0 0 2px var(--accent-color, #018880);
  transform: translateY(-1px);
}

/* Disabled color (no valid variation with current choices) */
.ao-color-swatch-wrap.is-disabled {
  cursor: not-allowed;
}
.ao-color-swatch-wrap.is-disabled .ao-color-swatch {
  opacity: 0.35;
  box-shadow: none;
}



/* ====== Variables (accent fallback) ====== */
:root{
  --ao-accent: var(--accent-color, #6f42c1);               /* your theme accent if defined */
  --ao-accent-weak: color-mix(in srgb, var(--ao-accent) 15%, transparent);
  --ao-ring: color-mix(in srgb, var(--ao-accent) 30%, white);
}

/* ====== Fix the big gap: force left/start alignment ====== */
.ao-variations .variations td.value{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  justify-content: flex-start !important; /* kills any flex-end coming from elsewhere */
}

/* ====== Swatch container ====== */
.ao-attr-box{
  background: color-mix(in srgb, var(--ao-accent) 3%, #f6f7f9);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: .75rem;
}

.ao-swatches{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
}

/* ====== Individual swatch ====== */
.ao-swatch{
  --size: 36px;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
  display: inline-block;
}

/* Hover glow / stroke */
.ao-swatch:hover{
  box-shadow:
    0 0 0 4px var(--ao-accent-weak),
    inset 0 0 0 1px rgba(255,255,255,.7);
  border-color: var(--ao-ring);
  transform: translateY(-1px);
}

/* Selected state */
.ao-swatch.is-selected{
  box-shadow:
    0 0 0 3px var(--ao-accent-weak),
    0 6px 16px rgba(0,0,0,.08),
    inset 0 0 0 2px #fff;
  outline: 2px solid var(--ao-accent);
  outline-offset: 2px;
}

/* Disabled (if you ever add) */
.ao-swatch[aria-disabled="true"]{
  opacity: .5;
  cursor: not-allowed;
}

/* ====== Tooltip (uses data-title) ====== */
.ao-swatch[data-title]::after{
  content: attr(data-title);
  position: absolute;
  inset: auto auto calc(100% + 8px) 50%;
  translate: -50% 0;
  background: #111;
  color: #fff;
  padding: .25rem .5rem;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  transform: translateY(4px);
  direction: rtl; /* Farsi tooltips */
  z-index: 20;
}
.ao-swatch[data-title]:hover::after{ opacity: 1; transform: translateY(0); }
.ao-swatch[data-title]::before{
  content:"";
  position:absolute;
  bottom: calc(100% + 4px);
  left:50%;
  translate:-50% 0;
  border:6px solid transparent;
  border-top-color:#111;
  opacity:0; transition:opacity .15s;
}
.ao-swatch[data-title]:hover::before{ opacity:1; }


/* ============================
   Rating under product title
   ============================ */

.ao-rating-row {
  display: flex;
  gap: 0.5rem;
}

/* Woo star rating */
.ao-rating-stars .star-rating {
  margin: 0;
  font-size: 0.9rem;
}

/* tweak Woo default star color */
.ao-rating-stars .star-rating::before,
.ao-rating-stars .star-rating span::before {
  color: #f5b300;
}

.ao-rating-link {
  font-size: 0.85rem;
  color: #6c757d;
  text-decoration: none;
  white-space: nowrap;
}

.ao-rating-link:hover {
  color: var(--accent-color, #018880);
  text-decoration: underline;
}

/* ============================
   Divider under top buy section
   ============================ */

.ao-buy-divider {
  width: 100%;
  height: 1px;
  margin: 2rem 0 2rem;
  background: linear-gradient(
    to left,
    transparent,
    rgba(0, 0, 0, 0.12),
    transparent
  );
}

/* Disable state: cross-out & no click */
.ao-swatch.is-disabled{
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.ao-swatch.is-disabled::after{
  content:"";
  position:absolute;
  left:-6%;
  right:-6%;
  top:50%;
  height:2px;
  background: rgba(0,0,0,.38);
  transform: rotate(-24deg);
  border-radius:2px;
}
.ao-swatch-wrap input[disabled] + .ao-swatch{
  pointer-events: none; /* prevent selecting disabled */
}
/* Keep hover effects off for disabled */
.ao-swatch.is-disabled:hover{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  transform:none;
}


/* Chip look for availability ("۵ در انبار") */
.ao-stock-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .65rem;
  background:#f2f4f7;
  color:#111;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px !important;
  font-weight:700;
  line-height:1.1;
  font-size:.94rem;
  margin: .50rem 0;
}
.ao-stock-chip.out-of-stock{
  background:#fff1f1; color:#b42318; border-color:#ffd4d4;
}


/* Base: gray pill with black text+icon */
.woocommerce div.product form.cart .single_variation_wrap .single_add_to_cart_button,
.woocommerce div.product form.cart .single_variation_wrap .single_add_to_cart_button.button{
  appearance:none !important;
  text-decoration:none !important;
  border:0 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.6rem !important;

  --ao-green:#147d6f;          /* hover fill */
  --ao-green-dark:#0e665b;     /* hover ring */
  --ao-gray:#eef2f5;           /* base fill */

  background:var(--ao-gray) !important;
  color:#111 !important;

  padding:.85rem 1.4rem !important;
  border-radius:18px !important;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 var(--ao-green-dark) !important;

  font-weight:800 !important;
  font-size:1rem !important;
  line-height:1.1 !important;

  transition:
    transform .15s ease,
    box-shadow .2s ease,
    background-color .15s ease,
    color .15s ease !important;
}

/* Hover: turn green + ring + tiny jump — with maximal specificity */
.woocommerce div.product form.cart .single_variation_wrap .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_variation_wrap .single_add_to_cart_button.button:hover{
  background: linear-gradient(180deg, var(--ao-green) 0%, var(--ao-green-dark) 100%) !important;
  color:#fff !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 0 0 2px #fff,
    0 0 0 4px var(--ao-green-dark),
    0 12px 28px rgba(0,0,0,.12) !important;
}

/* Active */
.woocommerce div.product form.cart .single_variation_wrap .single_add_to_cart_button:active{
  transform:translateY(0) scale(.99) !important;
}

/* Disabled state (before a variation is selected) */
.woocommerce div.product form.cart .single_variation_wrap .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_variation_wrap .single_add_to_cart_button.button.disabled{
  opacity:.5 !important;
  cursor:not-allowed !important;
  filter:grayscale(.2);
}

/* Icon that follows text color (black → white) */
.woocommerce div.product form.cart .single_variation_wrap .single_add_to_cart_button::before{
  content:""; inline-size:1.1em; block-size:1.1em; margin-inline-end:.25rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A.5.5 0 0 1 .5 1H2l.5 2H14a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 12.5 10H4a.5.5 0 0 1-.485-.379L2.01 3H.5a.5.5 0 0 1-.5-.5M5.5 12a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m8 0a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A.5.5 0 0 1 .5 1H2l.5 2H14a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 12.5 10H4a.5.5 0 0 1-.485-.379L2.01 3H.5a.5.5 0 0 1-.5-.5M5.5 12a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m8 0a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0'/%3E%3C/svg%3E") no-repeat center/contain;
}


/* Put button + qty on one line with nice gaps */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem .75rem;         /* space between button & qty */
  justify-content:flex-start;
}

/* Single product pages: hide quantity box */
.woocommerce div.product form.cart .variations_button .quantity,
.woocommerce div.product form.cart .quantity { 
  display: none !important;
}


/* Chip variables */
:root{
  --ao-chip-bg:#f2f4f7;
  --ao-chip-fg:#111;
  --ao-chip-bd:rgba(0,0,0,.06);
  --ao-accent: var(--accent-color, #147d6f);
  --ao-accent-weak: color-mix(in srgb, var(--ao-accent) 20%, transparent);
}

.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th {
  line-height: 1rem;
}

.woocommerce div.product form.cart .variations {
  margin-bottom: 0;
}


/* Desktop width for the swatch/button block */
:root{ --ao-swatch-width: 620px; }

/* Merge-row tidy */
.ao-var-row .ao-var-cell{ padding:0; border:0; }

/* The rounded swatch box WITH title inside */
.ao-attr-box--with-title{
  /* same width we will give the button wrapper */
  width: min(100%, var(--ao-swatch-width));
  margin-inline: auto;
  background: color-mix(in srgb, var(--accent-color, #147d6f) 3%, #f6f7f9);
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:.8rem .9rem;
  display:flex;
  align-items:center;
  justify-content:space-between;  /* swatches left, label right */
  gap:.75rem;
}

/* Put swatches on the left and keep them aligned nicely */
.ao-attr-box--with-title .ao-swatches{
  display:flex; flex-wrap:wrap; gap:.5rem .6rem;
  justify-content:flex-start;
  flex:1 1 auto;
}

/* Title on the right; keep RTL text flow for the word “رنگ” */
.ao-attr-box--with-title .ao-attr-title{
  font-weight:800; color:#111; white-space:nowrap;
  direction: rtl;
}

/* Button wrapper below: exact same width & centered */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart.variations_button{
  display:block;
  width: min(100%, var(--ao-swatch-width));
  margin: .9rem auto 0;
  float:none !important; /* kill Woo float */
}

/* Make the button fill that width */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button{
  width:100% !important;
  justify-content:center;
}

/* Mobile: fluid width */
@media (max-width: 767.98px){
  .ao-attr-box--with-title,
  .woocommerce div.product form.cart .woocommerce-variation-add-to-cart.variations_button{
    width:100%;
    margin-inline:0;
  }
}

/* Keep your chosen desktop width the same */
:root{ --ao-swatch-width: 620px; }

/* Swatch box WITH title inside — use GRID, not flex */
.ao-attr-box--with-title{
  width: min(100%, var(--ao-swatch-width));
  margin-inline: auto;
  background: color-mix(in srgb, var(--accent-color, #147d6f) 3%, #f6f7f9);
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:.8rem .9rem;

  /* NEW: grid fixes the wrap-under-label issue */
  display:grid;
  grid-template-columns: 1fr auto;   /* swatches | label */
  gap:.75rem 1rem;
  align-items:center;                /* center label vertically */
}

/* Swatches live in the left column and can wrap freely */
.ao-attr-box--with-title .ao-swatches{
  display:flex; flex-wrap:wrap;
  gap:.5rem .6rem;
  justify-content:flex-start;
  min-width:0;                       /* allow wrapping properly */
}

/* Label is its own column on the right */
.ao-attr-box--with-title .ao-attr-title{
  grid-column: 2;
  font-weight:800; color:#111; white-space:nowrap;
  direction: rtl;                    /* keep “رنگ” correct in RTL */
}

/* Button wrapper below stays exactly same width as box */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart.variations_button{
  display:block;
  width: min(100%, var(--ao-swatch-width));
  margin: .9rem auto 0;
  float:none !important;
}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button{
  width:100% !important;
  justify-content:center;
}

/* Mobile: fluid */
@media (max-width: 767.98px){
  .ao-attr-box--with-title,
  .woocommerce div.product form.cart .woocommerce-variation-add-to-cart.variations_button{
    width:100%;
    margin-inline:0;
  }
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock {
  color: #000;
}

/* Put the Clear link inside the box corner and remove its layout footprint */
.ao-attr-box--with-title{ position: relative; }

.ao-attr-box--with-title .reset_variations{
  inset-inline-end: .75rem;  /* right in RTL, left in LTR */
  inset-block-end: .6rem;    /* bottom */
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent-color, #147d6f);
  text-decoration: none;
  background: transparent;
  padding: 0;
  border: 0;
}

/* When Woo keeps it “hidden”, actually remove it from layout */
.ao-attr-box--with-title .reset_variations[style*="visibility: hidden"]{
  display: none !important;
}

/* When Woo makes it visible, ensure it shows */
.ao-attr-box--with-title .reset_variations[style*="visibility: visible"]{
  display: inline-block !important;
  visibility: visible !important;
}

/* Hide Woo's old "Clear" link in the table so we don’t have two */
table.variations .reset_variations{ display:none !important; }

/* Row that holds price/stock and our صاف chip */
.ao-variation-header{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;      /* safe if price appears here too */
}

/* Make Woo’s show/hide (visibility:hidden) not take space here */
.ao-variation-header .reset_variations[style*="visibility: hidden"]{
  display:none !important;
}
.ao-variation-header .reset_variations[style*="visibility: visible"]{
  display:inline-flex !important;
  visibility:visible !important;
}

/* صاف chip style to match your gray chips */
.ao-clear-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .65rem;
  background:#f2f4f7;
  color:#475569;
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px;
  font-weight:700;
  line-height:1.1;
  font-size:.94rem;
  text-decoration:none;
  cursor:pointer;
}
.ao-clear-chip::before{
  content:"×";
  font-weight:900;
  line-height:1;
}

/* Kill Woo's built-in Clear link inside the variations table/swatches */
table.variations .reset_variations,
.ao-attr-box--with-title .reset_variations{
  display:none !important;
}




/* -------- Shared palette -------- */
:root{
  --ao-green:#147d6f;        /* hover fill */
  --ao-green-dark:#0e665b;   /* hover ring */
  --ao-gray:#eef2f5;         /* base fill */
  --ao-swatch-width:620px;   /* desktop width target */
}

/* -------- LIMIT WIDTH + CENTER -------- */
/* Variable products already use a width on .woocommerce-variation-add-to-cart.
   For SIMPLE products, constrain the form width so the button matches your design. */
.woocommerce div.product form.cart:not(.variations_form){
  width: min(100%, var(--ao-swatch-width));
  margin-inline: auto;
}
.woocommerce div.product form.cart:not(.variations_form) .single_add_to_cart_button{
  width: 100% !important;
  justify-content: center;
}

/* -------- UNIFIED BUTTON STYLE (simple + variable) -------- */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button.button{
  appearance:none !important;
  text-decoration:none !important;
  border:0 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.6rem !important;

  background:var(--ao-gray) !important; /* gray by default */
  color:#111 !important;

  padding:.85rem 1.4rem !important;
  border-radius:18px !important;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 var(--ao-green-dark) !important;

  font-weight:800 !important;
  font-size:1rem !important;
  line-height:1.1 !important;

  transition: transform .15s ease, box-shadow .2s ease,
             background-color .15s ease, color .15s ease !important;
}

/* Hover: turn green + outer ring + tiny lift */
.woocommerce div.product form.cart .single_add_to_cart_button:hover{
  background:linear-gradient(180deg, var(--ao-green) 0%, var(--ao-green-dark) 100%) !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
  box-shadow: inset 0 0 0 2px #fff,
              0 0 0 4px var(--ao-green-dark),
              0 12px 28px rgba(0,0,0,.12) !important;
}

/* Active + disabled */
.woocommerce div.product form.cart .single_add_to_cart_button:active{
  transform:translateY(0) scale(.99) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.button.disabled{
  opacity:.5 !important;
  cursor:not-allowed !important;
  filter:grayscale(.2);
}

/* Icon that inherits text color (black → white on hover) */
.woocommerce div.product form.cart .single_add_to_cart_button::before{
  content:""; inline-size:1.1em; block-size:1.1em; margin-inline-end:.25rem;
  background-color: currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A.5.5 0 0 1 .5 1H2l.5 2H14a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 12.5 10H4a.5.5 0 0 1-.485-.379L2.01 3H.5a.5.5 0 0 1-.5-.5M5.5 12a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m8 0a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A.5.5 0 0 1 .5 1H2l.5 2H14a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 12.5 10H4a.5.5 0 0 1-.485-.379L2.01 3H.5a.5.5 0 0 1-.5-.5M5.5 12a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m8 0a1.5 1.5 0 0 1-3 0a1.5 1.5 0 0 1 3 0'/%3E%3C/svg%3E") no-repeat center/contain;
}


/* Simple-product swatch is just informative */
.ao-simple-color-box .ao-swatch{ pointer-events:none; cursor:default; }

/* --- FORCE the container to be grid everywhere (kills the old flex rule) --- */
.ao-attr-box--with-title{
  display: grid !important;
  grid-template-columns: 1fr auto !important;  /* left = swatches | right = title */
  align-items: center !important;
  gap: .75rem 1rem !important;
}


/* OPTIONAL: keep VARIABLE product swatches centered while simple stays left */
.ao-attr-box--with-title:not(.ao-simple-color-box) .ao-swatches{
  justify-content: center !important;
}
/* Force grid on simple swatch box, kill old flex/centering rules */
body .ao-attr-box--with-title.ao-simple-color-box{
  display:grid !important;
  align-items:center !important;
  gap:.75rem 1rem !important;
  margin-bottom:.9rem !important;            /* space above button */
}
body .ao-simple-color-box .ao-swatches{
  grid-column:1 !important;
  display:flex !important;
  flex-wrap:wrap;
  justify-content:flex-start !important;     /* left align */
  min-width:0;
}
body .ao-simple-color-box .ao-attr-title{
  grid-column:2 !important;
  text-align:right !important;
  white-space:nowrap;
  direction:rtl;
}


/* OPTIONAL: keep variable swatches centered */
body .ao-attr-box--with-title:not(.ao-simple-color-box) .ao-swatches{
  justify-content:center !important;
}


/* ===== Sticky expanding flags ===== */
:root{
  --ao-flag-size: 44px;             /* square size when collapsed */
  --ao-flag-radius: 14px;
  --ao-flag-gap: .6rem;
  --ao-flag-bg: #f8f9fa;            /* collapsed color (red like your example) */
  --ao-flag-bg-hover: var(--accent-color, #147d6f); /* expand color */
}

/* container sticks to top of product column */
.ao-flagbar{
  position: sticky;
  top: .5rem;                       /* adjust to sit under your chips */
  z-index: 5;
  display: flex;
  justify-content: space-between;   /* brand on one side, flags on the other */
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .75rem;
}

/* group of red flags */
.ao-flagbar__flags{
  display: flex;
  gap: var(--ao-flag-gap);
}

/* brand box wrapper */
.ao-flagbar__brand{
  flex: 0 0 auto;
}

/* brand logo chip – same size / radius as flags */
.ao-flagbrand{
  width: var(--ao-flag-size);          /* 44px */
  height: var(--ao-flag-size);         /* 44px */
  border-radius: var(--ao-flag-radius);
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;                    /* hide anything overflowing */
}

/* Make the image FIT inside the chip, never crop */
.ao-flagbrand img{
  max-width: 80% !important;           /* leave some padding inside */
  max-height: 80% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;      /* keep full logo, no cutting */
  object-position: center center;
  display: block;
}


/* flag */
.ao-flag{
  position: relative;
  height: var(--ao-flag-size);
  min-width: var(--ao-flag-size);
  max-width: var(--ao-flag-size);
  border-radius: var(--ao-flag-radius);
  border: 1px solid rgb(108, 117, 125);
  background: var(--ao-flag-bg);
  color: #000000;
  display:flex;
  align-items:center;
  overflow:hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transition: max-width .25s ease, background .15s ease, transform .15s ease, box-shadow .2s ease;
}

/* expand on hover (or focus-visible) */
.ao-flag:hover, .ao-flag:focus-visible{
  max-width: 420px;                 /* grows horizontally */
  background: var(--ao-flag-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
  color: #fff;
}

/* icon */
.ao-flag__icon{
  inline-size: var(--ao-flag-size);
  block-size: var(--ao-flag-size);
  display:grid; place-items:center;
}
.ao-flag__icon svg,
.ao-flag__icon i{
  display: inline-block;
}

.ao-flag__icon i{
  font-size: 24px;   /* tweak size if you want bigger/smaller */
  line-height: 0;
}


/* text slides in */
.ao-flag__text{
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  padding-inline: 0;
  transition: max-width .25s ease, opacity .2s ease, padding .2s ease;
  font-weight: 800;
}
.ao-flag:hover .ao-flag__text,
.ao-flag:focus-visible .ao-flag__text{
  opacity: 1;
  max-width: 360px;
  padding-inline: .25rem .9rem;     /* (RTL) left padding bigger near edge */
}

/* small screens */
@media (max-width: 600px){
  :root{ --ao-flag-size: 40px; }
  .ao-flagbar{ top: .25rem; }
}


:root{
  --ao-bottom-tab-height: 44px;
}

/* Make the buy card a positioning context and add some bottom space
   so the hanging tabs don't collide with stuff below */
:root{
  --ao-bottom-tab-height: 44px;
}

/* Buy card: flex column so we can pin the tabs at the bottom */
.single-product .ao-summary-wrap{
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Summary content: just gets some breathing room above the tabs */
.single-product .ao-summary-wrap .ao-summary{
  padding-bottom: 1rem;
}

/* Bottom tabs: always at the bottom of the card, layout stable */
.single-product .ao-summary-wrap .ao-bottom-tabs{
  display: flex;
  flex-direction: row;
  gap: var(--ao-flag-gap);
  margin-top: auto;               /* pushes them down to card bottom */
}

/* Single label tab */
.ao-bottom-tab{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: var(--ao-bottom-tab-height);
  padding-inline: 1.25rem;
  margin: 5px;
  color: #212529;
  background-color: #f8f9fa;
  border: 1px solid #6c757d;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 400;
  border-radius: 10px;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, background .16s ease;
  white-space: nowrap;
}

/* Hover */
.ao-bottom-tab:hover,
.ao-bottom-tab:focus-visible{
  background: var(--ao-flag-bg-hover, #147d6f);
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0,0,0,.22);
  color: #fff;
}

/* Mobile: just keep them under the content with some margin */
@media (max-width: 600px){
  .single-product .ao-summary-wrap{
    display: block;
  }
  .single-product .ao-summary-wrap .ao-bottom-tabs{
    margin-top: 1rem;
  }
}


/* layout: icon + text */
.ao-bottom-tab{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;              /* space between icon and text */
}

/* Boxicons size + alignment */
.ao-bottom-tab i.bx{
  font-size: 1.35rem;
  line-height: 1;
  display: inline-block;
}
.ao-bottom-tab{
  flex-direction: row-reverse;  /* icon on the right, text next to it */
}

.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
  width: 100% !important;
}

.woocommerce div.product div.summary {
  margin-bottom: 3rem;
}


.ao-sharing{
  margin-top: 1rem;
}

.ao-share-buttons{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.ao-share-label{
  font-size: .85rem;
  color: #6b7280;
}

.ao-share-btn{
  width: 36px;
  height: 36px;
  line-height: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: #111827;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.ao-share-btn i{
  font-size: 1.2rem;
}

.ao-share-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

.ao-share-btn--telegram{ color:#0088cc; }
.ao-share-btn--whatsapp{ color:#25D366; }
.ao-share-btn--twitter{ color:#1DA1F2; }



/* ===== Sticky mini buy bar (top) ===== */
:root{
  --sticky-buy-nav-color: #fff;
}
.ao-sticky-buybar{
  position: fixed;
  inset-inline: 0;
  bottom: 0;              /* ⬅️ stick to bottom */
  top: auto;
  z-index: 2002;          /* below scroll-top (keep that higher), above mobile nav */

  background-color: color-mix(in srgb, var(--sticky-buy-nav-color) 70%, transparent 30%);
  backdrop-filter: blur(6px);
  box-shadow: 0 -6px 18px rgba(0,0,0,.12);  /* shadow upward now */
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: .75rem;

  transform: translateY(110%);   /* hide by sliding DOWN */
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}

/* On mobile, put sticky buy bar just ABOVE the mobile bottom nav */
@media (max-width: 768px){
  .ao-sticky-buybar{
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* visible state toggled by JS */
.ao-sticky-buybar.is-visible{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* thumbnail */
.ao-sticky-buybar__thumb{
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
  cursor: pointer;
}
.ao-sticky-buybar__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* text */
.ao-sticky-buybar__meta{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ao-sticky-buybar__title{
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ao-sticky-buybar__price{
  font-size: .85rem;
  font-weight: 800;
  color: var(--accent-color, #147d6f);
}

/* CTA button */
.ao-sticky-buybar__cta{
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  margin-left: 5%;
  font-size: .85rem;
  font-weight: 700;
  background: var(--accent-color, #147d6f);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ao-sticky-buybar__cta:hover{
  background: color-mix(in srgb, var(--accent-color, #147d6f), transparent 15%);
  transform: translateY(-1px);
}

/* small screens: slightly denser */
@media (max-width: 576px){
  .ao-sticky-buybar{
    padding: 4px 10px;
    gap: .5rem;
  }
  .ao-sticky-buybar__thumb{
    width: 48px;
    height: 48px;
  }
  .ao-sticky-buybar__title{
    font-size: .85rem;
  }
  .ao-sticky-buybar__price{
    font-size: .8rem;
  }
  .ao-sticky-buybar__cta{
    padding-inline: 10px;
    font-size: .8rem;
  }
}

/* ===== Size guide modal ===== */

.ao-sizeguide-modal .modal-content{
  border-radius: 24px;
}

.ao-sizeguide-modal .modal-title{
  font-size: 1.6rem;
  font-weight: 800;
}

.ao-sizeguide-list{
  margin: 0;
  padding-right: 1.5rem;
  padding-left: 0;
  list-style-type: disc;
  font-size: .95rem;
  line-height: 1.9;
}

.ao-sizeguide-list li{
  margin-bottom: .35rem;
}

/* table look */
.ao-sizeguide-table thead th{
  font-weight: 700;
  font-size: .95rem;
}

.ao-sizeguide-table tbody td{
  font-size: .9rem;
  padding-block: .75rem;
}

/* Put close button on the right, next to the title */
.ao-sizeguide-modal .modal-header{
  display: flex;
  flex-direction: row-reverse;   /* start from the right side */
  justify-content: flex-end;   /* keep both on the right */
  align-items: center;
  gap: .75rem;
}

/* remove the auto-margin trick from the close button */
.ao-sizeguide-modal .modal-header .btn-close{
  margin: 0 !important;
}


/* mobile tweaks */
@media (max-width: 576px){
  .ao-sizeguide-modal .modal-dialog{
    margin: .75rem;
  }
  .ao-sizeguide-modal .modal-title{
    font-size: 1rem;
  }
  .ao-sizeguide-table tbody td,
  .ao-sizeguide-table thead th{
    font-size: .85rem;
    padding-block: .5rem;
  }
}

@media (max-width: 476px){
  .ao-sizeguide-list li,
  .ao-sizeguide-table thead th,
  .ao-sizeguide-table tbody td{
    font-size: .50rem;
  }
}


/* Hide default variation availability below the form */
.single-product .woocommerce-variation-availability{
  display: none !important;
}

/* Swatch box as positioning context */
.single-product .ao-attr-box{
  position: relative;
}

/* Our custom stock chip inside the swatch box */
.single-product .ao-stock-chip-swatch{
  position: absolute;
  top: 3rem;
  right: 3rem;           /* top-right corner */
  z-index: 2;
  margin: 0;
}

/* Pill style for the text */
.single-product .ao-stock-chip-swatch .stock{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .15rem .9rem;
  min-height: 30px;
  border-radius: 999px;
  color: #111827;
  font-size: .6rem;
  font-weight: 600;
  white-space: nowrap;

}

/* Optional: tweak "out of stock" look */
.single-product .ao-stock-chip-swatch .stock.out-of-stock{
  color: #b42318 !important;
}

/* base hidden state – smooth open/close */
.ao-stock-chip-swatch{
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}

/* when JS sets ao-stock-visible */
.ao-stock-chip-swatch.ao-stock-visible{
  opacity: 1;
  transform: translateY(4px);
}

/* low stock (<=3) turns red-ish */
.ao-stock-chip-swatch.ao-stock-low .stock{
  color: #b91c1c;
}

/* critical (<=1) – stronger emphasis */
.ao-stock-chip-swatch.ao-stock-critical .stock{
  color: #b91c1c !important;
  font-weight: 400;
}


/* ===== Product bottom layout ===== */

.ao-product-bottom{
  margin-top: 2.5rem;
}

/* Section titles */
.ao-section-title{
  font-size: 1.25rem;
  font-weight: 800;
}

/* Divider under headers */
.ao-section-divider{
  margin: 1rem 0 1.25rem;
  border: 0;
  border-top: 1px solid rgba(148,163,184,.35);
}

/* Description body */
.ao-product-desc-content p{
  margin-bottom: .75rem;
  line-height: 1.9;
}

/* --- Description meta badges (brand + categories) --- */

.ao-desc-meta-badges{
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: flex-start;
}

.ao-desc-meta-badge{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .2rem .8rem;
  font-size: .8rem;
  background-color: #f1f5f9;
  color: #0f172a;
}

.ao-desc-meta-badge--brand{
  background-color: #dcfce7;
  color: #166534;
}

.ao-desc-meta-label{
  font-weight: 700;
  margin-inline-start: .25rem;
}

/* --- Additional info table --- */

.ao-attr-table th,
.ao-attr-table td{
  padding: .6rem .75rem;
  vertical-align: middle;
  border-bottom: 1px dashed rgba(148, 163, 184, .4);
}

.ao-attr-table th{
  width: 40%;
  font-weight: 700;
  font-size: .9rem;
}

.ao-attr-table td{
  font-size: .9rem;
}

/* Icon next to attribute label */
.ao-attr-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  margin-inline-start: .35rem;
  color: var(--accent-color, #147d6f);
  font-size: 1.1rem;
  vertical-align: middle;
}

/* --- Reviews card tweaks (Woo output) --- */

.ao-product-reviews-card .woocommerce-Reviews-title{
  display: none; /* we already have our own h3 */
}

.ao-product-reviews-card .commentlist{
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.ao-product-reviews-card .comment{
  padding-bottom: .75rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid rgba(148,163,184,.35);
}

.ao-product-reviews-card .comment:last-child{
  border-bottom: 0;
  margin-bottom: 0;
}

.ao-product-reviews-card #review_form_wrapper{
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(148,163,184,.4);
}

/* Related products card spacing */
.ao-product-related-wrap .card{
  overflow: hidden;
}

/* Responsive tweaks */
@media (max-width: 767.98px){
  .ao-product-bottom{
    margin-top: 1.75rem;
  }
  .ao-section-title{
    font-size: 1.1rem;
  }
}

.star-rating{
  color: #f5b300;
}

.woocommerce p.stars a {
  color: #f5b300 !important;
}

/* ===== Similar products (محصولات مشابه) ===== */

.ao-related-card{
  overflow: hidden;
}

.ao-related-header .ao-section-title{
  font-size: 1.25rem;   /* same as other section titles */
  font-weight: 800;
}

.ao-related-grid{
  margin-top: .25rem;
}



/* === Single-product similar products grid (محصولات مشابه) === */
/* same behavior as #shop/#sales: 2 cols on phones, 3 on tablets, 4 on large */

.single-product .ao-related-grid.isotope-container {
  margin: -10px; /* same gutters as shop */
}

/* Center related products grid inside its card */
.single-product .ao-related-card .ao-related-grid {
  justify-content: center;   /* center the portfolio-item cards in the row */
}

.single-product .ao-related-grid .portfolio-item {
  padding: 10px;
  width: 49.99% !important;   /* default: 2 columns on phones */
  flex: none !important;      /* keep Bootstrap cols out of the way */
}

@media (min-width: 768px) {
  .single-product .ao-related-grid .portfolio-item {
    width: 33.333% !important;  /* 3 columns on tablet / small desktop */
  }
}

@media (min-width: 1200px) {
  .single-product .ao-related-grid .portfolio-item {
    width: 25% !important;      /* 4 columns on large screens */
  }
}

/* Tiny phones: fall back to single column */
@media (max-width: 360px) {
  .single-product .ao-related-grid .portfolio-item {
    width: 100% !important;
  }
}
/* === Single product: related & recently viewed grid tweaks === */

/* 1) Desktop: make cards a bit smaller (5 per row on very wide screens) */
@media (min-width: 1200px) {
  .single-product .ao-related-grid .portfolio-item {
    width: 25% !important;      /* 4 per row on normal desktop */
  }
}

@media (min-width: 1400px) {
  .single-product .ao-related-grid .portfolio-item {
    width: 20% !important;      /* 5 per row on big screens so cards feel smaller */
  }
}

/* 2) Make typography lighter in the related cards on mobile */
@media (max-width: 768px) {
  .single-product .ao-related-card .content {
    padding: 16px 0 10px;
  }

  .single-product .ao-related-card .content h3 {
    font-size: 15px;
    line-height: 1.5;
  }

  .single-product .ao-related-card .content p {
    font-size: 13px;
    line-height: 1.6;
  }
}

/* Slightly tighten things on desktop too so cards don't feel huge */
.single-product .ao-related-card .content {
  padding: 20px 0 12px;
}

.single-product .ao-related-card .content h3 {
  font-size: 18px;
}

.single-product .ao-related-card .content p {
  font-size: 15px;
}

/* 3) Sale price: stack old/new price vertically so it doesn't overflow on mobile */
@media (max-width: 768px) {
  .single-product .ao-related-card .content p span.price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .single-product .ao-related-card .content p span.price del {
    font-size: 0.85em;
    opacity: 0.7;
  }

  .single-product .ao-related-card .content p span.price ins {
    text-decoration: none;
  }
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
  color: #000 !important;
}


/* ===== Pretty WooCommerce sale badge ===== */

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  position: absolute;
  inset-block-start: 20px;          /* top */
  inset-inline-start: 20px;         /* logical "start" – will flip in RTL rule */
  z-index: 15;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 14px;
  min-width: auto;
  min-height: auto;
  margin: 0;

  background: #e10600;              /* red like your sale ribbon */
  color: #fff;
  border-radius: 999px;              /* pill */
  box-shadow: 0 10px 22px rgba(225, 6, 0, .35);

  font: 700 14px/1.4 "Vazirmatn", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;

  text-transform: none;
  letter-spacing: 0.3px;

  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}


/* Nice little hover lift on product cards */
.woocommerce ul.products li.product:hover .onsale,
.woocommerce div.product:hover span.onsale {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(225, 6, 0, .45);
}

/* Optional: tiny percent sign bubble before text */
.woocommerce span.onsale::before,
.woocommerce ul.products li.product .onsale::before {
  display: inline-block;
  margin-inline-start: .25rem;
  font-size: 0.8em;
  opacity: .85;
}

/* Shop / archive – stack sale prices in isotope cards on mobile */
@media (max-width: 768px) {
  /* limit to Woo shop / category pages that use the portfolio cards */
  body.woocommerce-page .portfolio-card .content p span.price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  body.woocommerce-page .portfolio-card .content p span.price del {
    font-size: 0.85em;
    opacity: 0.7;
  }

  body.woocommerce-page .portfolio-card .content p span.price ins {
    text-decoration: none;   /* remove underline on the new price */
  }
}


/* =========================================
   WooCommerce – review / comment form
   ========================================= */

/* General card-like look */
#review_form_wrapper,
#review_form {
  border-radius: 24px;
  background: #f9fafb;
  padding: 1.75rem 1.5rem;
}

/* Inputs + textarea */
#review_form #commentform input[type="text"],
#review_form #commentform input[type="email"],
#review_form #commentform textarea {
  width: 100%;
  border-radius: 999px;                /* rounded like Bootstrap */
  border: 1px solid #d1d5db;
  background: #fff;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.4;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  text-align: right;                   /* RTL */
}

#review_form #commentform textarea {
  border-radius: 20px;
  min-height: 160px;
  resize: vertical;
}

/* Focus state */
#review_form #commentform input[type="text"]:focus,
#review_form #commentform input[type="email"]:focus,
#review_form #commentform textarea:focus {
  border-color: var(--accent-color, #147d6f);
  box-shadow: 0 0 0 .15rem rgba(20, 125, 111, .15);
}

/* Name + Email in one row on desktop */
#review_form #commentform .comment-form-author,
#review_form #commentform .comment-form-email {
  float: right;                        /* RTL order: name then email */
  width: 50%;
  padding: 0 .5rem;
  box-sizing: border-box;
}

/* Make labels smaller & cleaner */
#review_form #commentform .comment-form-author label,
#review_form #commentform .comment-form-email label,
#review_form #commentform label {
  display: block;
  margin-bottom: .25rem;
  font-weight: 600;
  font-size: .9rem;
}

/* Cookies checkbox row */
#review_form #commentform .comment-form-cookies-consent {
  display: flex;
  flex-direction: row-reverse;   /* RTL: checkbox on the right */
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
  font-size: .9rem;
  flex-wrap: wrap;               /* allow the label to wrap normally */
}


#review_form #commentform .comment-form-cookies-consent input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}

/* make the label take the line instead of being squeezed */
#review_form #commentform .comment-form-cookies-consent label {
  flex: 1 1 auto;       /* use remaining width */
  width: auto;
  text-align: right;
  font-weight: 400;
}

/* Submit button */
#review_form #commentform input[type="submit"] {
  border: none;
  border-radius: 999px;
  background-color: #f8f9fa;
  border: 1px solid #6c757d;
  color: #242424;
  padding: .75rem 2.5rem;
  font-weight: 400;
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease,
              box-shadow .15s ease;
}

#review_form #commentform input[type="submit"]:hover {
  background: var(--accent-color);
  transform: translateY(-1px);
  box-shadow: 0 12px 25px rgba(0,0,0,.12);
  color: #fff;
}

/* Mobile: stack fields full width */
@media (max-width: 768px) {
  #review_form #commentform .comment-form-author,
  #review_form #commentform .comment-form-email {
    width: 100%;
    padding: 0;
    float: none;
  }
}


#review_form #commentform .comment-form-cookies-consent{
  display: inline-flex;
  flex-direction: row;
  font-weight: 400 !important;
}   


.ao-blog-archive .row{
  justify-content: flex-end !important;
  
}

.shadow-sm{
  box-shadow:0 22px 60px rgba(0,0,0,.14)!important;
}

.ao-blog-archive .card{
  border: none !important;
  border-radius: 20px !important;
}


.post .post-card {
  position: relative;
  background-color: var(--surface-color);
  border-radius: 20px;
  overflow: hidden;
  transition: 0.4s;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
}

.post .post-card:hover {
  box-shadow: 0 20px 40px color-mix(in srgb, var(--accent-color), transparent 80%);
  border-color: var(--accent-color);
}

.post .post-card:hover .member-image:before {
  opacity: 1;
}

.post .post-card:hover .member-image img {
  transform: scale(1.1);
}

.post .post-card:hover .social-overlay {
  transform: translateY(0);
  opacity: 1;
}

.post .post-card:hover .member-info h4 {
  color: var(--accent-color);
}

/* Fixed-size thumbnails on blog archive */
.blog-archive-item .ao-archive-thumb-wrapper {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 3; /* change to 4 / 3 or 1 / 1 if you prefer */
}

.blog-archive-item .ao-archive-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.breadcrumb{
  justify-content:flex-end !important;
}

@media (max-width: 468px) {
  .breadcrumb {
    justify-content:flex-start !important;
  }
}


/* Blog sidebar list items – hover like shop filters */
#shop-sidebar .sidebar-list > li {
  margin-bottom: 0.25rem;
}

#shop-sidebar .sidebar-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem;
  border-radius: 0.9rem;       /* pill-like, like your brand facet */
  text-decoration: none;
  color: inherit;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.08s ease;
}

/* Hover / active state – light pill background */
#shop-sidebar .sidebar-list a:hover,
#shop-sidebar .sidebar-list a:focus,
#shop-sidebar .sidebar-list a.active,
#shop-sidebar .sidebar-list .current-menu-item > a,
#shop-sidebar .sidebar-list .current-cat > a {
  background-color: var(--ao-chip-bg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03);
}

/* Small tweak for the badge on the left side in RTL */
#shop-sidebar[dir="rtl"] .sidebar-list a .badge,
#shop-sidebar .sidebar-list a .badge {
  margin-right: 0.5rem;
  margin-left: 0;
  font-size: 0.75rem;
}


/* ===== Global AO pagination style (shop + blog) ===== */

.ao-pagination {
  margin: 2.5rem 0 3rem;
  display: flex;
  justify-content: center;
}

.ao-pagination .pagination {
  margin-bottom: 0;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
  background-color: #f5f7f8;
}

/* Base link style */
.ao-pagination .page-link {
  border: 1px solid #e2e6ea;
  border-right: 0;                 /* RTL: inner borders only */
  padding: 0.4rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  background-color: #ffffff;
  color: var(--ao-accent, #0b7463); /* same green as shop */
  line-height: 1.4;
}

/* Rounded corners for RTL order:
   first = rightmost (قبلی »), last = leftmost (بعدی «) */
.ao-pagination .page-item:first-child .page-link {
  border-radius: 0 999px 999px 0;
}

.ao-pagination .page-item:last-child .page-link {
  border-radius: 999px 0 0 999px;
  border-right: 1px solid #e2e6ea; /* close right border */
}

/* Active page (green block like shop) */
.ao-pagination .page-item.active .page-link,
.ao-pagination .page-link.active {
  background-color: var(--ao-accent, #0b7463);
  border-color: var(--ao-accent, #0b7463);
  color: #fff;
}

/* Disabled (قبلی on page 1, بعدی on last page) */
.ao-pagination .page-item.disabled .page-link {
  background-color: #edf0f3;
  color: #a0a6b3;
}

/* Hover / focus state */
.ao-pagination .page-link:hover,
.ao-pagination .page-link:focus {
  background-color: #f4faf9;
  color: var(--ao-accent, #0b7463);
  box-shadow: none;
}


/* Center the single post card + give it breathing room */
.ao-blog-single .blog-single-card {
  max-width: 1200px;         /* keeps the box narrow and centered */
}

/* On small screens, let it stretch but keep some space */
@media (max-width: 991.98px) {
  .ao-blog-single .blog-single-card {
    max-width: 100%;
  }
}

/* Optional: make the meta pill look nice */
.entry-meta-pill {
  border-radius: 999px;
}

/* More spacing between icon and text inside the meta pill */
.entry-meta-pill span i {
  margin: 0 0.35rem;  /* a bit of air on both sides of the icon */
}

/* Single post content: justify + comfy line-height */
.blog-single-article .entry-content,
.blog-single-article .entry-content p {
  text-align: justify;
  line-height: 2.4;   /* increase or decrease to taste */
}

/* Mobile: less vertical space so card isn't way down the page */
@media (max-width: 767.98px) {
  .ao-blog-single .blog-single-card {
    margin: 1.5rem auto 2.5rem;   /* was larger, now tighter */
  }

  /* So the label section doesn't push everything down */
  .ao-page-header {
    padding-top: 1.5rem;
    padding-bottom: 0;
  }

  .ao-page-header .section-title {
    margin-bottom: 1.25rem;
  }
}




/* Comments – AliOptic blog single */
.ao-comments {
  text-align: right;
}

.ao-comments .comment-list {
  padding: 0;
  margin: 0;
}

.ao-comments .ao-comment-box {
  background-color: #f8f9fa; /* light gray similar to product reviews */
  border-radius: 20px;
}

.ao-comments .comment-list .children {
  list-style: none;
  margin: 1rem 1.75rem 0 0;  /* indent replies to the right */
  padding-right: 1.5rem;
  border-right: 2px solid rgba(0, 0, 0, 0.05); /* reddit-style vertical line */
}

.ao-comments .comment-reply-link {
  text-decoration: none;
  font-weight: 500;
}

.ao-comments .comment-reply-link:hover {
  text-decoration: underline;
}



/* Floating filter button on shop (mobile) */
.shop-filter-fab {
  position: fixed;
  bottom: 5rem;              /* above bottom navbar */
  right: 1.25rem;            /* on the right side of the screen */
  width: 54px;
  height: 54px;
  border-radius: 999px;
  line-height: 0;
  border: 1px solid #6c757d;
  background: #f5f5f7;       /* light Apple-ish grey */
  color: #111;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1185;             /* above page content, below offcanvas/backdrop */
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
}

.shop-filter-fab i {
  font-size: 1.3rem;
}

/* When JS marks it as visible */
.shop-filter-fab.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Explicit hidden state */
.shop-filter-fab.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}

/* Desktop: hide the fab completely */
@media (min-width: 992px) {
  .shop-filter-fab {
    display: none !important;
  }
}
.bi-box-arrow-in-right,
.bi-box-arrow-in-right{
  line-height: 0 !important;
}
.btn-light:hover{
  color: #5c5c5c !important;
}


/* Checkout – order summary styling */
.ao-checkout-review-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.ao-checkout-review-table thead th {
  border-bottom: none;
  font-size: .85rem;
  font-weight: 600;
}

.ao-checkout-review-table tbody tr.cart_item td {
  border-top: none;
  padding: .75rem .5rem;
}

.ao-checkout-item {
  gap: .75rem;
}

.ao-checkout-thumb img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.ao-checkout-item-title {
  font-size: .9rem;
}

.ao-checkout-item-meta {
  font-size: .75rem;
}

.ao-checkout-item-footer .badge {
  font-size: .7rem;
  padding: .2rem .6rem;
}

.ao-checkout-item-qty {
  font-size: .75rem;
}

.ao-checkout-item-subtotal {
  font-size: .85rem;
}

/* Totals part */
.ao-checkout-review-table tfoot th,
.ao-checkout-review-table tfoot td {
  border-top: none;
  padding-top: .4rem;
  padding-bottom: .4rem;
  font-size: .85rem;
}

.ao-checkout-review-table tr.order-total th,
.ao-checkout-review-table tr.order-total td {
  font-weight: 700;
  padding-top: .6rem;
}


/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}