@charset "UTF-8";
html {
    overflow-y: scroll;
}
 
/*
  Template Name: Grocee - Organic Food HTML Template
  Author Name: Hook theme
  Author URL: https://themeforest.net/user/hooktheme
  Version: 1.0.0

  ----------------------------
  [Table of contents CSS] 
  ----------------------------

    1. Base CSS
    2. Header css
    3. Slider css
    4. Banner css 
    5. Product card css 
    6. Categories css
    7. Shipping css
    8. Blog css
    9. Testimonial css
    10. Brand logo css
    11. Accordion css
    12. Footer css 
    13. Quickview css
    14. Small Product css
    15. Single Product css 
    16. Product details css 
    17. Shop page css 
    18. Search filter css
    19. Privacy policy css
    20. Preloader css 
    21. Portfolio css
    22. Newsletter css 
    23. Newsletter popup css
    24. My account page css 
    25. Login page css
    26. Faq page css 
    27. Counterup css here
    28. Contact page css
    29. Compare page css 
    30. Checkout Page Css
    31. Cart page css
    32. Breadcrumb css 
    33. Blog details css
    34. About page css
    35. Error 404 page css 
    36. new-mega

  
*/
/*


 
    1. Base CSS
*/
:root {
  --primary-color: #212121;
  --secondary-color: #ED1D24;
  --foreground-color: #121416;
  --foreground-sub-color: #898686;
  --body-text-color: #000000;
  --text-white-color: #fff;
  --body-background-color: #fff;
  --bg-offwhite-color: #F7F7F7;
  --bg-black-color: #000000;
  --bg-light-dark-color: #1a1818;
  --border-color: #E5E5E5;
  --open-sans-fonts: "IRANSans", Tahoma, sans-serif;
  --rubik-fonts: "IRANSans", Tahoma, sans-serif;
  --inter-fonts: "IRANSans", Tahoma, sans-serif;
  --body-font-size: 1.5rem;
  --body-font-weight: 400;
  --body-line-height: 2.8rem;
  --headings-weight: 700;
  --transition: all 0.3s ease 0s;
  --container-fluid-offset: 12rem;
}



/* تعریف فونت‌های ایران‌سنس */
@font-face {
  font-family: "IRANSans";
  src: url("../fonts/IRANSansWeb.62ab68e2bb06.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IRANSans";
  src: url("../fonts/IRANSansWeb_Medium.5844ce61bab2.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IRANSans";
  src: url("../fonts/IRANSansWeb_Bold.152486348742.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IRANSans";
  src: url("../fonts/IRANSansWeb_Light.adcfec2882c2.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IRANSans";
  src: url("../fonts/IRANSansWeb_UltraLight.330a71785823.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}



/* Common Style */
*,
*::after,
*::before {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  min-height: 100%;
  margin: 0;
  font-size: 62.5%;
  padding: 0;
 
  
}

body {
  direction: rtl;       
  font-family: var(--open-sans-fonts);
  font-size: var(--body-font-size, 1.5rem);
  font-weight: var(--body-font-weight);
  font-style: normal;
  line-height: var(--body-line-height, 26px);
  position: relative;
  visibility: visible;
  overflow-x: hidden;
  color: var(--foreground-color);
  background-color: var(--background-color);
}

@media only screen and (max-width: 991px) {
  body {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}

[data-aos=fade-up] {
  transform: translate3d(0, 40px, 0);
  -webkit-transform: translate3d(0, 40px, 0);
  -moz-transform: translate3d(0, 40px, 0);
  -ms-transform: translate3d(0, 40px, 0);
  -o-transform: translate3d(0, 40px, 0);
}

.tooltip {
  font-size: 1.3rem;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: var(--headings-weight);
  margin: 0;
}

h1,
.h1 {
  font-size: 2.2rem;
  line-height: 3.2rem;
}

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

  h1,
  .h1 {
    font-size: 2.8rem;
    line-height: 3.7rem;
  }
}

@media only screen and (min-width: 576px) {

  h1,
  .h1 {
    font-size: 3rem;
    line-height: 3.8rem;
  }
}

@media only screen and (min-width: 768px) {

  h1,
  .h1 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
}

@media only screen and (min-width: 992px) {

  h1,
  .h1 {
    font-size: 4rem;
    line-height: 5rem;
  }
}

@media only screen and (min-width: 1200px) {

  h1,
  .h1 {
    font-size: 4.5rem;
    line-height: 5rem;
  }
}

@media only screen and (min-width: 1366px) {

  h1,
  .h1 {
    font-size: 5rem;
    line-height: 5.5rem;
  }
}

h2,
.h2 {
  font-size: 1.7rem;
  line-height: 2.4rem;
}

@media only screen and (min-width: 768px) {

  h2,
  .h2 {
    font-size: 1.8rem;
    line-height: 2.6rem;
  }
}

@media only screen and (min-width: 992px) {

  h2,
  .h2 {
    font-size: 1.9rem;
    line-height: 2.8rem;
  }
}

@media only screen and (min-width: 1200px) {

  h2,
  .h2 {
    font-size: 2rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 1366px) {

  h2,
  .h2 {
    font-size: 2.2rem;
  }
}

h3,
.h3 {
  font-size: 1.5rem;
  line-height: 2.4rem;
}

@media only screen and (min-width: 992px) {

  h3,
  .h3 {
    font-size: 1.6rem;
  }
}

h4,
.h4 {
  font-size: 1.6rem;
  line-height: 2.6rem;
}

@media only screen and (min-width: 1200px) {

  h4,
  .h4 {
    font-size: 1.7rem;
    line-height: 2.8rem;
  }
}

h5,
.h5 {
  font-weight: 400;
}

h6,
.h6 {
  font-weight: 400;
}

p,
.p {
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: var(--inter-fonts);
}

@media only screen and (min-width: 1200px) {

  p,
  .p {
    margin-bottom: 1.5rem;
  }
}

p:last-child {
  margin-bottom: 0;
}

a,
button {
  display: inline-block;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}

a,
button,
img,
input,
textarea {
  transition: var(--transition);
}

*:focus {
  outline: none;
  box-shadow: none;
}

:focus-visible {
  box-shadow: 0 0 5px 2px rgba(19, 19, 19, 0.15);
}

a:focus {
  text-decoration: none;
  outline: none;
}

a {
  color: var(--foreground-color);
}

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

button,
input[type=submit] {
  cursor: pointer;
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
}

input[type=number] {
  -moz-appearance: textfield;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

span {
  display: inline-block;
  transition: var(--transition);
}

label {
  transition: var(--transition);
  display: block;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  opacity: 1;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
}

ul {
  margin: 0;
  padding: 0;
}

ul:last-child {
  margin-bottom: 0;
}

li {
  list-style: none;
  line-height: 1;
}

hr {
  border-top-width: 2px;
}

@media only screen and (min-width: 576px) {
  .container {
    max-width: 576px;
  }
}

@media only screen and (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media only screen and (min-width: 992px) {
  .container {
    max-width: 992px;
  }
}

@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}

@media only screen and (min-width: 1366px) {
  .container {
    max-width: 1240px;
  }
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding-right: var(--bs-gutter-x, 1.5rem);
  padding-left: var(--bs-gutter-x, 1.5rem);
}

.container-fluid {
  --offset-fluid: 1.5rem;
  padding-right: var(--offset-fluid);
  padding-left: var(--offset-fluid);
}

@media only screen and (min-width: 992px) {
  .container-fluid {
    --offset-fluid: 3rem;
  }
}

@media only screen and (min-width: 1366px) {
  .container-fluid {
    --offset-fluid: calc(var(--container-fluid-offset) / 4.5);
  }
}

@media only screen and (min-width: 1600px) {
  .container-fluid {
    --offset-fluid: calc(var(--container-fluid-offset) / 2.5);
  }
}

@media only screen and (min-width: 1800px) {
  .container-fluid {
    --offset-fluid: var(--container-fluid-offset);
  }
}

.container-fluid.width-100 {
  --offset-fluid: 0;
}

.row {
  margin-right: -1rem;
  margin-left: -1rem;
}

@media only screen and (min-width: 992px) {
  .row {
    margin-right: -1.5rem;
    margin-left: -1.5rem;
  }
}

.row>* {
  padding-right: 1rem;
  padding-left: 1rem;
}

@media only screen and (min-width: 992px) {
  .row>* {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media only screen and (max-width: 1199px) {
  .col-lg-order {
    order: 1;
  }

  .d-lg-none {
    display: none;
  }
}

@media only screen and (max-width: 991px) {
  .d-md-none {
    display: none;
  }

  .d-md-flex {
    display: flex;
  }

  .col-md-order {
    order: 1;
  }

  .d-md-block {
    display: block;
  }

  .d-md-2-block {
    display: block !important;
  }
}

@media only screen and (max-width: 767px) {
  .d-sm-u-none {
    display: none;
  }

  .d-sm-block {
    display: block;
  }

  .d-sm-flex {
    display: flex;
  }

  .col-sm-order {
    order: 1;
  }
}

@media only screen and (max-width: 575px) {
  .d-sm-2-none {
    display: none;
  }

  .d-sm-2-block {
    display: block;
  }

  .d-sm-2-flex {
    display: flex;
  }

  .col-sm-2-order {
    order: 1;
  }
}

@media only screen and (max-width: 479px) {
  .d-sm-3-none {
    display: none;
  }
}

@media only screen and (max-width: 479px) {
  .custom-col {
    width: 100%;
  }
}

@media only screen and (max-width: 991px) {
  .row-md-reverse {
    flex-direction: column-reverse;
  }

  .row_md_reverse {
    flex-direction: column-reverse;
  }
}

@media only screen and (max-width: 767px) {
  .row_sm_reverse {
    flex-direction: column-reverse;
  }
}

/*
  Swiper navigation css
*/
.swiper__nav--btn.card__swiper--nav {
  opacity: 1;
  visibility: visible;
  top: -33px;
}

@media only screen and (min-width: 768px) {
  .swiper__nav--btn.card__swiper--nav {
    top: -38px;
  }
}

@media only screen and (min-width: 1200px) {
  .swiper__nav--btn.card__swiper--nav {
    top: -48px;
  }
}

@media only screen and (min-width: 1600px) {
  .swiper__nav--btn.card__swiper--nav {
    top: -60px;
  }
}

.swiper__nav--btn.card__swiper--nav.swiper-button-prev {
  right: 3.7rem;
  left: auto;
}

.swiper:hover .swiper__nav--btn {
  opacity: 1;
  visibility: visible;
}

.swiper__nav--btn {
  width: 3.5rem;
  height: 3.5rem;
  background: inherit;
  border: 1px solid var(--secondary-color);
  background: var(--body-background-color);
  color: var(--secondary-color);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 9;
}

@media only screen and (max-width: 479px) {
  .swiper__nav--btn {
    width: 3rem;
    height: 3rem;
  }
}

.swiper__nav--btn.swiper-button-disabled {
  background: inherit;
  color: var(--primary-color);
}

.swiper__nav--btn:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}

.swiper__nav--btn::after {
  display: none;
}

.swiper__nav--btn.swiper-button-prev {
  left: 0;
  right: auto;
}

.swiper__nav--btn.swiper-button-next {
  right: 0;
  left: auto;
}

.swiper__nav--btn.swiper-button-next::after {
  display: none;
}

/*
  Swiper pagination css
*/
.swiper-pagination {
  bottom: 0 !important;
}

.swiper-pagination-bullet {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--secondary-color);
  opacity: 1;
  vertical-align: middle;
  transition: var(--transition);
  background: inherit;
  margin: 0 4px !important;
  position: relative;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--secondary-color);
}

/*
  default css here
*/
.modal-backdrop.show {
  opacity: 0.7;
}

.switcher__mode--btn>.moon__icon {
  display: block;
}

.switcher__mode--btn .sun__icon {
  display: none;
}

.switcher__mode--btn.active>.moon__icon {
  display: none;
}

.switcher__mode--btn.active>.sun__icon {
  display: block;
}

.primary__btn {
  font-weight: 600;
  display: inline-flex;
  align-items: center;     /* مرکز کردن عمودی */
  justify-content: center;  /* مرکز کردن افقی */
  font-size: 1.3rem;
  line-height: 1;
  height: 3.8rem;
  padding: 0 2rem;
  letter-spacing: 0.2px;
  border-radius: 2.4rem;
  background: var(--secondary-color);
  color: var(--text-white-color);
  border: 0;
 
}

.primary__btn:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
}

@media only screen and (min-width: 768px) {
  .primary__btn {
    line-height: 4rem;
    height: 4rem;
    padding: 0 2.2rem;
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 992px) {
  .primary__btn {
    font-size: 1.5rem;
    line-height: 4.2rem;
    height: 4.2rem;
    padding: 0 2.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .primary__btn {
    line-height: 4.6rem;
    height: 4.6rem;
    padding: 0 3rem;
  }
}

.gradient__text--color {
  background: linear-gradient(to right, #1066E7 0%, #C81CC5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

select {
  word-wrap: normal;
  font-family: var(--font-lato);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
}

.section__heading {
  padding-bottom: 1.2rem;
  position: relative;
}

.section__heading::before {
  position: absolute;
  content: "";
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--secondary-color);
  left: auto;
  right: 0;
  top: 1px;
  border-radius: 50%;
}

@media only screen and (min-width: 768px) {
  .section__heading::before {
    top: 3px;
  }
}

.section__heading::after {
  position: absolute;
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  background: var(--secondary-color);
  left: auto;
  right: 7px;
  top: 8px;
  border-radius: 50%;
}

@media only screen and (min-width: 768px) {
  .section__heading::after {
    top: 10px;
  }
}

.section__heading--maintitle {
  text-transform: uppercase;
  padding-left: 0;
  padding-right: 3.4rem;
}

.section__heading--maintitle span {
  font-weight: 400;
}

.section__heading--flex {
  flex-wrap: wrap;
  gap: 2rem;
}

.section__heading--desc {
  margin-top: 1.2rem;
}

.section__heading.style2 {
  padding-bottom: 0;
}

.section__heading.style2 .section__heading--maintitle {
  padding-left: 0;
  text-transform: capitalize;
}

@media only screen and (min-width: 1200px) {
  .section__heading.style2 .section__heading--maintitle {
    font-size: 2.6rem;
    line-height: 3.5rem;
  }
}

@media only screen and (max-width: 767px) {
  .section__heading.style2 .section__heading--maintitle {
    font-size: 2rem;
    line-height: 2.6rem;
  }
}

.section__heading.style2::before {
  display: none;
}

.section__heading.style2::after {
  display: none;
}

#scroll__top {
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 99;
  outline: none;
  background-color: var(--secondary-color);
  color: var(--text-white-color);
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transform: translateY(50px);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  line-height: 1;
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scroll__top:hover {
  background: var(--primary-color);
}

@media only screen and (max-width: 991px) {
  #scroll__top {
    bottom: 75px;
  }
}

#scroll__top.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

#scroll__top svg {
  width: 25px;
  line-height: 1;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
}

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

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.overflow-hidden {
  overflow: hidden;
}

.break {
  word-break: break-word;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.text-ofwhite {
  color: var(--ofwhite-color);
}

.bg__primary {
  background: var(--primary-color);
}

.bg__secondary {
  background: var(--secondary-color);
}

.bg__black {
  background: #1d1c1c;
}

.text__primary {
  color: var(--primary-color);
}

.text__secondary {
  color: var(--secondary-color);
}

.position__relative {
  position: relative;
}

.border-bottom {
  border-bottom: 1px solid var(--border-color) !important;
}

.border {
  border: 1px solid var(--border-color) !important;
}

.border-0 {
  border: none;
}

.border-radius-5 {
  border-radius: 0.5rem;
}

.border-radius-10 {
  border-radius: 1rem;
}

.border-radius-20 {
  border-radius: 2rem;
}

.border-radius-30 {
  border-radius: 3rem;
}

.border-radius-50 {
  border-radius: 50%;
}

.width-100 {
  width: 100%;
}

@media only screen and (max-width: 991px) {
  .md-width-100 {
    width: 100%;
  }
}

.display-block {
  display: block;
}

/* Tab */
.tab_content {
  display: block;
}

.tab_pane {
  display: none;
  transition: var(--transition);
}

.tab_pane:not(.show) {
  opacity: 0;
}

.tab_pane.show {
  opacity: 1;
}

.tab_pane.active {
  display: block;
}

body.overlay__active,
.mobile_menu_open,
.predictive__search--box_active,
.offCanvas__minicart_active,
.offcanvas__filter--sidebar_active {
  overflow-y: hidden;
}

body.overlay__active::before,
.predictive__search--box_active::before,
.mobile_menu_open::before,
.offCanvas__minicart_active::before,
.offcanvas__filter--sidebar_active::before {
  position: absolute;
  content: "";
  background: #000;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 0.5;
  cursor: crosshair;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

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

.animate-fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/* Section padding */
.section--padding {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media only screen and (min-width: 768px) {
  .section--padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* Section margin */
.section--nargin {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

@media only screen and (min-width: 768px) {
  .section--nargin {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
}

/* Padding */
.p-0 {
  padding: 0;
}

.pt-0 {
  padding-top: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-15 {
  padding-bottom: 1.5rem;
}

.pb-20 {
  padding-bottom: 2rem;
}

/* Margin */
.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-60 {
  margin-bottom: 3.5rem;
}

@media only screen and (min-width: 768px) {
  .mb-60 {
    margin-bottom: 4rem;
  }
}

@media only screen and (min-width: 992px) {
  .mb-60 {
    margin-bottom: 6rem;
  }
}

.mb-55 {
  margin-bottom: 3.5rem;
}

@media only screen and (min-width: 992px) {
  .mb-55 {
    margin-bottom: 5.5rem;
  }
}

.mb-50 {
  margin-bottom: 2.5rem;
}

@media only screen and (min-width: 768px) {
  .mb-50 {
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mb-50 {
    margin-bottom: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mb-50 {
    margin-bottom: 5rem;
  }
}

.mb--n50 {
  margin-bottom: -2.5rem;
}

@media only screen and (min-width: 768px) {
  .mb--n50 {
    margin-bottom: -3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mb--n50 {
    margin-bottom: -4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mb--n50 {
    margin-bottom: -5rem;
  }
}

.mb-40 {
  margin-bottom: 3rem;
}

@media only screen and (min-width: 992px) {
  .mb-40 {
    margin-bottom: 4rem;
  }
}

.mb--n40 {
  margin-bottom: -3rem;
}

@media only screen and (min-width: 992px) {
  .mb--n40 {
    margin-bottom: -4rem;
  }
}

.mb-35 {
  margin-bottom: 2.5rem;
}

@media only screen and (min-width: 768px) {
  .mb-35 {
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mb-35 {
    margin-bottom: 3.5rem;
  }
}

.mb-30 {
  margin-bottom: 2rem;
}

@media only screen and (min-width: 992px) {
  .mb-30 {
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mb-30 {
    margin-bottom: 3rem;
  }
}

.mb--n30 {
  margin-bottom: -2rem;
}

@media only screen and (min-width: 992px) {
  .mb--n30 {
    margin-bottom: -2.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mb--n30 {
    margin-bottom: -3rem;
  }
}

.mb-28 {
  margin-bottom: 2rem;
}

@media only screen and (min-width: 992px) {
  .mb-28 {
    margin-bottom: 2.3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mb-28 {
    margin-bottom: 2.8rem;
  }
}

.mb--n28 {
  margin-bottom: -2rem;
}

@media only screen and (min-width: 992px) {
  .mb--n28 {
    margin-bottom: -2.3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mb--n28 {
    margin-bottom: -2.8rem;
  }
}

.mb--n25 {
  margin-bottom: -1.8rem;
}

@media only screen and (min-width: 992px) {
  .mb--n25 {
    margin-bottom: -2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mb--n25 {
    margin-bottom: -2.5rem;
  }
}

.mb-25 {
  margin-bottom: 1.8rem;
}

@media only screen and (min-width: 992px) {
  .mb-25 {
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mb-25 {
    margin-bottom: 2.5rem;
  }
}

.mb-20 {
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .mb-20 {
    margin-bottom: 2rem;
  }
}

.mb-18 {
  margin-bottom: 1.2rem;
}

@media only screen and (min-width: 768px) {
  .mb-18 {
    margin-bottom: 1.8rem;
  }
}

.mb-15 {
  margin-bottom: 1rem;
}

@media only screen and (min-width: 768px) {
  .mb-15 {
    margin-bottom: 1.5rem;
  }
}

.mb-12 {
  margin-bottom: 1rem;
}

@media only screen and (min-width: 992px) {
  .mb-12 {
    margin-bottom: 1.2rem;
  }
}

.mb-10 {
  margin-bottom: 0.8rem;
}

@media only screen and (min-width: 992px) {
  .mb-10 {
    margin-bottom: 1rem;
  }
}

.mb-5 {
  margin-bottom: 0.5rem;
}

.mb-8 {
  margin-bottom: 0.8rem;
}

.mr-30 {
  margin-right: 3rem;
}

/*
    2. Header css
*/
/*
    offcanvas header css
*/
.offcanvas__header--menu__open {
  line-height: 1;
  display: none;
}

@media only screen and (max-width: 991px) {
  .offcanvas__header--menu__open {
    display: block;
  }
}

.offcanvas__header--menu__open--svg {
  width: 32px;
}

.offcanvas__header--menu__open--btn>* {
  pointer-events: none;
}

.offcanvas__header {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  left: auto; 
  width: 100%;
  max-width: 300px;
  height: 100vh;
  transition: var(--transition);
  transform: translateX(100%);
  background-color: var(--body-background-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
}

@media only screen and (min-width: 480px) {
  .offcanvas__header {
    max-width: 320px;
  }
}

.offcanvas__header.open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.offcanvas__header.open~.offcanvas-overlay {
  visibility: visible;
  opacity: 0.75;
}

.offcanvas-overlay {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  transition: var(--transition);
  opacity: 0;
  background-color: var(--bg-black-color);
}

.offcanvas__inner {
  position: relative;
  height: 100%;
  padding-bottom: 5rem;
}

.offcanvas__logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 15px;
}

.offcanvas__close--btn {
  position: relative;
  align-self: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  text-indent: -9999px;
  border: none;
  background-color: transparent;
}

.offcanvas__close--btn::before,
.offcanvas__close--btn::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  content: "";
  transform: rotate(45deg);
  background-color: var(--bg-black-color);
}

.offcanvas__close--btn::after {
  transform: rotate(-45deg);
}

/* 
  offcanvas Menu css 
*/
.offcanvas__menu {
  overflow-y: auto;
  height: 100%;
}

.offcanvas__menu_ul {
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 300px;
}

.offcanvas__menu_li {
  position: relative;
  border-bottom: 1px solid var(--border-color);
}

.offcanvas__menu_li:first-child {
  border-top: 1px solid var(--border-color);
}

.offcanvas__menu_item {
  line-height: 1;
  display: block;
  padding: 15px 20px;
  text-transform: uppercase;
}

/* 
    offcanvas Sub Menu 
*/
.offcanvas__sub_menu {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offcanvas__sub_menu_li {
  position: relative;
  border-top: 1px solid var(--border-color);
}

.offcanvas__sub_menu_item {
  line-height: 1;
  display: block;
  padding: 15px 50px 15px 0;
}

.offcanvas__sub_menu_item~.offcanvas__sub_menu .offcanvas__sub_menu_item {
  padding-right: 60px;
  padding-left: 0;
}

.offcanvas__sub_menu_toggle {
  font-size: 20px;
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 4rem;
  height: 4.6rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;

  
}

.offcanvas__account--items__btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  border: 0 ;
  outline: 0 ;
  background: transparent ;
  box-shadow: none ;
  padding: 0;
  margin: 0 ;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}


.offcanvas__sub_menu_toggle::before,
.offcanvas__sub_menu_toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  content: "";
  transition: var(--transition);
  transform: translateX(-50%) translateY(-50%);
  background-color: var(--bg-black-color);
}

.offcanvas__sub_menu_toggle:not(.active)::after {
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}

.offcanvas__account--items {
  padding: 28px 17px 20px;
}

.offcanvas__account--items__icon {
  width: 3rem;
  height: 3rem;
  text-align: center;
  background: var(--secondary-color);
  line-height: 3.8rem;
  border-radius: 50%;
  color: var(--text-white-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.offcanvas__account--items__label {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 10px;
 
}

.offcanvas__account--wrapper {
  gap: 2.5rem;
  padding: 0 2.5rem;
}

.offcanvas__account--currency {
  position: relative;
}

.offcanvas__account--currency__menu {
  font-weight: 500;
  gap: 5px;
}

.offcanvas__account--currency__menu>* {
  pointer-events: none;
}

.offcanvas__account--currency__submenu {
  position: absolute;
  z-index: 9;
  width: 100px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  bottom: 100%;
  opacity: 0;
  visibility: hidden;
  margin-bottom: 15px;
  transition: var(--transition);
  background: var(--body-background-color);
}

.offcanvas__account--currency__submenu.active {
  opacity: 1;
  visibility: visible;
  margin-bottom: 8px;
}



/*
    Offcanvas mobile stikcy toolbar css here
*/
.offcanvas__stikcy--toolbar {
  position: fixed;
  bottom: 0;
  background: var(--body-background-color);
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.12);
  padding: 10px 20px;
  display: none;
}

@media only screen and (min-width: 500px) {
  .offcanvas__stikcy--toolbar {
    padding: 10px 40px;
  }
}

@media only screen and (min-width: 768px) {
  .offcanvas__stikcy--toolbar {
    padding: 10px 60px;
  }
}

@media only screen and (max-width: 991px) {
  .offcanvas__stikcy--toolbar {
    display: block;
  }
}

.offcanvas__stikcy--toolbar__btn {
  position: relative;
  text-align: center;
}

.offcanvas__stikcy--toolbar__btn:hover .offcanvas__stikcy--toolbar__icon {
  background: var(--secondary-color);
  color: var(--white-color);
}

.offcanvas__stikcy--toolbar__btn>* {
  pointer-events: none;
}

.offcanvas__stikcy--toolbar__btn.minicart__open--btn {
  flex-direction: column;
}

.offcanvas__stikcy--toolbar__icon {
  width: 3rem;
  height: 3rem;
  text-align: center;
  background: var(--theme-color);
  line-height: 3.8rem;
  border-radius: 50%;
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.offcanvas__stikcy--toolbar__label {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 6px;
}


/* ۱. کوچک‌تر کردن هاله انیمیشن برای تناسب با دکمه کوچک‌تر */
@keyframes sticky-pulse-orange {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(255, 123, 0, 0); /* از ۱۰ به ۷ کاهش یافت */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 123, 0, 0);
  }
}

/* ۲. کوچک‌تر کردن دایره نارنجی */
.phone-call .offcanvas__stikcy--toolbar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;             /* از ۳۸ به ۳۰ پیکسل کاهش یافت */
  height: 30px;            /* از ۳۸ به ۳۰ پیکسل کاهش یافت */
  border-radius: 50%;
  background: var(--secondary-color);
  animation: sticky-pulse-orange 2s infinite;
  margin-bottom: 2px;      /* فاصله کمتر */
}

/* ۳. کوچک‌تر کردن آیکون SVG داخل دایره */
.phone-call .offcanvas__stikcy--toolbar__icon svg {
  width: 14px;             /* از ۱۸ به ۱۴ پیکسل کاهش یافت */
  height: 14px;            /* از ۱۸ به ۱۴ پیکسل کاهش یافت */
}

/* ۴. تنظیم سایز متن زیر آیکون */
.phone-call .offcanvas__stikcy--toolbar__label {
  font-size: 11px;          /* از ۱۰ به ۹ پیکسل کاهش یافت */
  font-weight: 700;
  white-space: nowrap;
}



/*
    header sticky css here
*/
.header__sticky.sticky {
  position: fixed;
  width: 100%;
  top: 0;
  background: var(--body-background-color);
  left: 0;
  z-index: 99;
  padding: 1rem 0.5rem;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
  transition: 0.3s;
}

.header__sticky.sticky .header__menu.header__sticky--block {
  display: block !important;
  padding-left: 0;
}

@media only screen and (max-width: 991px) {
  .header__sticky.sticky .header__menu.header__sticky--block {
    display: none !important;
  }
}

.header__sticky.sticky .header__account.header__sticky--block {
  display: block;
}

.header__sticky.sticky .header__account.header__sticky--none {
  display: none;
}

.header__sticky.sticky .header__search--widget.header__sticky--none {
  display: none !important;
}




/*
   header topbar css here
*/
.header__topbar {
  padding: 8px 0;
}

@media only screen and (min-width: 768px) {
  .header__topbar {
    padding: 10px 0;
  }
}

@media only screen and (max-width: 991px) {
  .header__topbar--inner {
    justify-content: center !important;
  }
}

.header__topbar--info {
  gap: 2rem;
}

.header__info--list {
  position: relative;
}

.header__info--list::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 85%;
  background: var(--border-color);
  right: -11px;
  top: 50%;
  transform: translatey(-50%);
}

.header__info--list:first-child::before {
  display: none;
}

.header__info--link {
  font-size: 1.2rem;
  font-weight: 500;
  font-family: var(--inter-fonts);
  line-height: 1.8rem;
}

.header__info--link svg {
  margin-right: 0.2rem;
}

.header__info--link.text-white:hover {
  color: var(--secondary-color) !important;
}

.header__top--right {
  gap: 2rem;
}

@media only screen and (max-width: 575px) {
  .header__top--right {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.5rem 0;
  }
}

.header__top--link {
  gap: 2rem;
}

.social__share {
  gap: 1.5rem;
}

.header__link--menu {
  position: relative;
}

@media only screen and (max-width: 575px) {
  .header__link--menu:last-child::before {
    display: none;
  }
}

.header__link--menu::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 85%;
  background: var(--border-color);
  right: -11px;
  top: 50%;
  transform: translatey(-50%);
}

.header__link--menu__text {
  font-size: 1.3rem;
  font-weight: 500;
  font-family: var(--inter-fonts);
}

.header__link--menu__text svg {
  margin-right: 0.2rem;
}

.header__link--menu__text.text-white:hover {
  color: var(--secondary-color) !important;
}

/* اصلاح تاپ‌بار برای موبایل با حفظ جداکننده‌ها */
@media only screen and (max-width: 991px) {
    .header__topbar--info {
        display: flex !important; 
        flex-wrap: wrap;         /* اجازه می‌دهد اگر جا نشد، به خط بعد برود */
        justify-content: center; /* همه را وسط‌چین می‌کند */
        gap: 0.5rem 1.5rem;      /* فاصله افقی و عمودی را متناسب می‌کند */
        margin-bottom: 5px;
    }

    .header__info--list::before {
        right: -9px;            
        height: 70%;           
    }


    .header__info--list:first-child::before {
        display: none !important;
    }
}



/*
    main header css here
*/
.main__header {
  padding: 11px 0;
}

@media only screen and (min-width: 768px) {
  .main__header {
    padding: 12px 0;
  }
}

@media only screen and (min-width: 1600px) {
  .main__header {
    padding: 16px 0;
  }
}

.main__header--inner {
  gap: 3rem;
}

.main__logo--link {
  display: block;
}

.main__logo--img {
  max-width: 145px;
  display: block;
}

@media only screen and (min-width: 480px) {
  .main__logo--img {
    max-width: 160px;
  }
}

@media only screen and (min-width: 768px) {
  .main__logo--img {
    max-width: 100%;
  }
}

.main__logo--title {
  line-height: 1;
}




/*
    header account css here
*/
.header__account.header__sticky--block {
  display: none;
}

.header__account--items {
  margin-inline-start: 10px;
}

.header__account--items:last-child {
  margin-left: 0;
}

@media only screen and (min-width: 768px) {
  .header__account--items {
    margin-left: 15px;
  }
}

@media only screen and (min-width: 992px) {
  .header__account--search__items.mobile__d--block {
    display: none;
  }
}

.header__account--btn {
  position: relative;
}

.header__account--btn:hover {
  color: var(--secondary-color);
}

.header__account--btn>* {
  pointer-events: none;
}

@media only screen and (min-width: 576px) {
  .header__minicart--items {
    margin-left: 1.8rem;
  }
}

@media only screen and (min-width: 992px) {
  .header__minicart--items {
    margin-left: 25px;
  }
}

.minicart__open--btn {
  display: flex;
  align-items: center;
}

.items__count {
  position: absolute;
  left: 1.8rem;
  top: -4px;
  width: 1.7rem;
  height: 1.7rem;
  font-size: 1.1rem;
  line-height: 1.7rem;
  background: var(--secondary-color);
  text-align: center;
  border-radius: 50%;
  color: var(--text-white-color);
}

.minicart__btn--text {
  padding-left: 2rem;
  font-family: var(--rubik-fonts);
  font-size: 1.5rem;
  line-height: 1.6rem;
}

.minicart__btn--text__price {
  font-size: 1.2rem;
  color: var(--secondary-color);
}

@media only screen and (max-width: 991px) {
  .minicart__btn--text {
    display: none;
  }
}

/*
    main menu css here
*/
.header__menu {
  padding-left: 30px;
}

.header__menu.header__sticky--block {
  display: none !important;
}

.header__menu--wrapper {
  gap: 1.3rem;
}

@media only screen and (min-width: 1200px) {
  .header__menu--wrapper {
    gap: 2rem;
  }
}

.header__menu--items {
  position: relative;
}

.header__menu--items:last-child .header__menu--link::before {
  display: none;
}

.header__menu--items:hover .header__menu--link {
  color: var(--secondary-color) !important;
  border-color: var(--secondary-color);
}

.header__menu--items:hover .header__sub--menu {
  visibility: visible;
  margin-top: 1.4rem;
  opacity: 1;
}

.header__menu--items:hover .header__mega--menu {
  visibility: visible;
  margin-top: 2px;
  opacity: 1;
}

.header__menu--link {
  font-size: 1.4rem;
  line-height: 3.5rem;
  padding: 0 0.8rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 2rem;
  position: relative;
}

.header__menu--link::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 1.7rem;
  background: #CCCCCC;
  right: -11px;
  top: 50%;
  transform: translatey(-50%);
  opacity: 0.3;
}

.header__menu--link.active {
  color: var(--secondary-color) !important;
  border-color: var(--secondary-color);
}

@media only screen and (min-width: 1200px) {
  .header__menu--link {
    font-size: 1.5rem;
    padding: 0 1.2rem;
  }
}

.menu__arrowdown--icon {
  margin-left: 3px;
}

.header__sub--menu {
  position: absolute;
  z-index: 9;
  top: 100%;
  left: 0;
  visibility: hidden;
  width: 220px;
  margin: 0;
  margin-top: 25px;
  padding: 20px;
  list-style: none;
  transition: var(--transition);
  opacity: 0;
  background-color: var(--body-background-color);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.header__sub--menu__link {
  font-size: 1.5rem;
  display: block;
  padding: 10px 0;
  font-weight: 500;
}

.mega__menu--items {
  position: static;
}

.header__mega--menu {
  position: absolute;
  z-index: 9;
  top: 100%;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  margin-top: 20px;
  padding: 20px;
  list-style: none;
  transition: var(--transition);
  visibility: hidden;
  opacity: 0;
  background-color: var(--body-background-color);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.header__mega--menu__li {
  padding: 3px 15px;
  width: 25%;
}

.header__mega--menu__li.fullscreen__style {
  width: 100%;
  margin-top: 1.8rem;
  gap: 3rem;
}

.header__mega--menu__banner {
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}

.header__mega--menu__banner:hover .header__mega--menu__banner--img {
  transform: scale(1.03);
}

.header__mega--menu__banner--img {
  border-radius: 5px;
}

.header__mega--sub__menu--title {
  font-size: 1.5rem;
  padding: 1rem 0;
  font-weight: 500;
}






/* 
    7. Shipping css
*/
.shipping__inner {
  border: 1px solid var(--bg-light-dark-color);
  border-radius: 5px;
  margin-bottom: 5rem;
  
}

@media only screen and (max-width: 991px) {
  .shipping__inner {
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    padding: 10px 0;
  }
}

@media only screen and (max-width: 575px) {
  .shipping__inner {
    gap: 1rem;
  }
}

.shipping__items {
  gap: 1.5rem;
  justify-content: center;
  width: auto;
  padding: 1rem;
  position: relative;
  transition: var(--transition);
}

@media only screen and (min-width: 576px) {
  .shipping__items {
    padding: 1.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .shipping__items {
    width: 25%;
    padding: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .shipping__items {
    gap: 1.7rem;
    padding: 2rem;
  }
}

.shipping__items:not(:last-child)::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 48px;
  background: var(--bg-light-dark-color);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media only screen and (max-width: 991px) {
  .shipping__items::before {
    display: none;
  }
}




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

.shipping__content--title {
  margin-bottom: 4px;
}

.shipping__content--desc {
  color: var(--foreground-sub-color);
  font-size: 1.4rem;
  line-height: 2rem;
  font-family: var(--inter-fonts);
}

/*
    home two shipping css
*/
.shipping__inner.style2 {
  border: 1px solid var(--border-color);
}

.shipping__items.style2::before {
  background: var(--border-color);
}

.shipping__items.style2:hover {
  background: var(--bg-offwhite-color);
}







/* 
    12. Footer css 
*/
.footer__section {
  padding-top: 5.3rem;
}

@media only screen and (max-width: 991px) {
  .footer__section {
    padding-bottom: 70px;
  }
}

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

.main__footer {
  padding: 5.5rem 0 3.4rem;
}

@media only screen and (min-width: 768px) {
  .main__footer {
    padding: 5.5rem 0 5.7rem;
  }
}

.footer__social {
  gap: 1rem;
  margin-top: 1.5rem;
}

.social__share--icon__style2 {
  width: 3.8rem;
  height: 3.8rem;
  line-height: 3.6rem;
  background: var(--body-background-color);
  color: var(--foreground-sub-color);
  text-align: center;
  border-radius: 50%;
}

.social__share--icon__style2:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}

@media only screen and (min-width: 1200px) {
  .social__share--icon__style2 {
    width: 4.2rem;
    height: 4.2rem;
    line-height: 3.8rem;
  }
}

@media only screen and (max-width: 991px) {
  .footer__widget {
    margin-bottom: 3rem;
  }
}

@media only screen and (max-width: 767px) {
  .footer__widget {
    margin-bottom: 0;
  }
}

.footer__widget--desc {
  font-size: 1.4rem;
  margin-bottom: 0;
  color: var(--foreground-sub-color);
}

@media only screen and (min-width: 768px) {
  .footer__widget--desc {
    font-size: 1.5rem;
  }
}

.footer__widget--title {
  margin-bottom: 2.2rem;
  font-weight: 600;
  position: relative;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: var(--text-white-color);
  font-family: var(--rubik-fonts);
  text-transform: uppercase;
}

@media only screen and (min-width: 480px) {
  .footer__widget--title {
    font-size: 1.6rem;
  }
}

@media only screen and (min-width: 576px) {
  .footer__widget--title {
    font-size: 1.7rem;
  }
}

@media only screen and (min-width: 768px) {
  .footer__widget--title {
    font-size: 1.8rem;
    line-height: 2.4rem;
    margin-bottom: 1.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .footer__widget--title {
    line-height: 2.6rem;
    margin-bottom: 2rem;
  }
}

.footer__widget--title__arrowdown--icon {
  position: absolute;
  right: 0;
  top: 38%;
  transition: 0.3s;
  display: none;
}



@media only screen and (max-width: 767px) {
  .footer__widget--title {
    padding-right: 40px;
  }

  .footer__widget--title__arrowdown--icon {
    display: block;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}



.footer__widget.active {
  padding-bottom: 3rem;
}

.footer__widget.active .footer__widget--title__arrowdown--icon {
  transform: rotate(180deg);
}

.footer__widget--menu__list {
  margin-bottom: 0.6rem;
}

@media only screen and (min-width: 768px) {
  .footer__widget--menu__list {
    margin-bottom: 0.8rem;
  }
}

.footer__widget--menu__list:last-child {
  margin-bottom: 0;
}

.footer__widget--menu__text {
  line-height: 2.6rem;
  font-size: 1.4rem;
  color: var(--foreground-sub-color);
}

@media only screen and (min-width: 768px) {
  .footer__widget--menu__text {
    line-height: 2.8rem;
    font-size: 1.5rem;
  }
}

.footer__widget--button {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  content: "";
  color: transparent;
  border: 0;
  background-color: transparent;
}

@media only screen and (max-width: 767px) {
  .footer__widget--button {
    visibility: visible;
  }
}

@media only screen and (max-width: 767px) {
  .footer__widget--inner {
    display: none;
  }
}

.footer__bottom {
  border-top: 1px solid var(--bg-light-dark-color);
}

.footer__bottom--inenr {
  padding: 1.8rem 0;
}

@media only screen and (max-width: 991px) {
  .footer__bottom--inenr {
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center !important;
  }
}

.copyright__content {
  font-size: 1.6rem;
  font-family: var(--rubik-fonts);
  color: var(--text-white-color);
  
}

.copyright__content--link {
  color: var(--text-white-color);
}

.copyright__content--link:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}

@media only screen and (max-width: 767px) {
  .copyright__content {
    text-align: center;
  }
}




/* 
    32. Breadcrumb css 
*/
.breadcrumb__bg {
  background-color: var(--bg-offwhite-color);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  position: relative;
  padding: 2.5rem 0;
}

@media only screen and (min-width: 768px) {
  .breadcrumb__bg {
    padding: 3rem 0;
  }
}

.breadcrumb__content {
  position: relative;
}

.breadcrumb__content--title {
  margin-bottom: 12px;
  font-size: 2.2rem;
  line-height: 2.2rem;
}

@media only screen and (min-width: 768px) {
  .breadcrumb__content--title {
    margin-bottom: 15px;
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .breadcrumb__content--title {
    margin-bottom: 16px;
    font-size: 2.8rem;
    line-height: 2.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .breadcrumb__content--title {
    font-size: 3rem;
    line-height: 3rem;
  }
}

.breadcrumb__content--menu__items {
  position: relative;
  margin-left: 18px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 22px;
  
}

.breadcrumb__content--menu__items:last-child {
  margin-left: 0;
  padding-left: 0;

}

.breadcrumb__content--menu__items:last-child::before {
  display: none;
}



.breadcrumb__content--menu__items::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: #888;
  font-size: 20px;
  color: var(--secondary-color);
}

.breadcrumb__content--menu__items a {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 2px;
}







/* 
    35. Error 404 page css 
*/
.error__content--img {
  margin: 0 auto 4rem;
}

@media only screen and (max-width: 1199px) {
  .error__content--img {
    max-width: 600px;
  }
}

@media only screen and (max-width: 767px) {
  .error__content--img {
    max-width: 450px;
    margin: 0 auto 3rem;
  }
}

@media only screen and (max-width: 575px) {
  .error__content--img {
    max-width: 100%;
    padding: 0 3rem;
    margin: 0 auto 2.5rem;
  }
}

.error__content--title {
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  line-height: 2.6rem;
}

@media only screen and (min-width: 576px) {
  .error__content--title {
    margin-bottom: 1.5rem;
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}

@media only screen and (min-width: 768px) {
  .error__content--title {
    margin-bottom: 1.8rem;
    font-size: 2.8rem;
    line-height: 3.2rem;
  }
}

@media only screen and (min-width: 992px) {
  .error__content--title {
    font-size: 3rem;
    line-height: 3.5rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .error__content--title {
    font-size: 3.2rem;
    line-height: 4rem;
    margin-bottom: 2rem;
  }
}

.error__content--desc {
  color: var(--foreground-sub-color);
  font-size: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .error__content--desc {
    font-size: 1.6rem;
    line-height: 2.2rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .error__content--desc {
    font-size: 1.7rem;
    line-height: 2.3rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .error__content--desc {
    font-size: 1.8rem;
    line-height: 2.5rem;
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 992px) {
  .error__content--btn {
    font-size: 1.6rem;
  }
}






/* 
    23. Newsletter popup css
*/
/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-animation] .newsletter__popup--inner {
  background-color: var(--text-white-color); /* پس‌زمینه سفید برای پاپ‌آپ */
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); /* سایه مدرن‌تر */
  border-radius: 15px; /* گوشه‌های گردتر */
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}

[data-animation].newsletter__show .newsletter__popup--inner {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.2s;
}

.newsletter__popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: all 1s ease-in-out;
  z-index: 999;
}

.newsletter__popup.newsletter__show {
  visibility: visible;
  opacity: 1;
}

.newsletter__popup.newsletter__show .newsletter__popup--inner {
  transform: translateY(0);
}

.newsletter__popup--inner {
  position: relative;
  width: 88%;
  max-height: 80vh;
  border-radius: 10px;
  background: var(--body-background-color);
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.06);
  overflow: auto;
  cursor: default;
  transform: translateY(-50px);
}

@media only screen and (min-width: 576px) {
  .newsletter__popup--inner {
    width: 80%;
  }
}

@media only screen and (min-width: 768px) {
  .newsletter__popup--inner {
    width: 655px;
  }
}

@media only screen and (min-width: 992px) {
  .newsletter__popup--inner {
    width: 720px;
  }
}

@media only screen and (min-width: 1200px) {
  .newsletter__popup--inner {
    width: 760px;
  }
}

.newsletter__popup--close__btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--secondary-color);
  color: var(--text-white-color);
  line-height: 2.8rem;
  border: 0;
  text-transform: uppercase;
  font-size: 1.2rem;
  border-radius: 50%;
  padding: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.newsletter__popup--close__btn:hover {
  background: var(--primary-color);
}

@media only screen and (min-width: 992px) {
  .newsletter__popup--close__btn {
    width: 3.2rem;
    height: 3.2rem;
  }
}

.newsletter__popup--close__btn>* {
  pointer-events: none;
}

.newsletter__popup--thumbnail {
  width: 280px;
}

@media only screen and (min-width: 992px) {
  .newsletter__popup--thumbnail {
    width: 320px;
  }
}

@media only screen and (min-width: 1200px) {
  .newsletter__popup--thumbnail {
    width: 330px;
  }
}

@media only screen and (max-width: 767px) {
  .newsletter__popup--thumbnail {
    display: none;
  }
}

.newsletter__popup--box__right {
  width: 100%;
  padding: 3rem 2rem 2.2rem;
  text-align: center;
}

@media only screen and (min-width: 576px) {
  .newsletter__popup--box__right {
    padding: 3rem 2rem 3rem;
  }
}

@media only screen and (min-width: 768px) {
  .newsletter__popup--box__right {
    width: calc(100% - 280px);
    padding: 3rem 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .newsletter__popup--box__right {
    width: calc(100% - 320px);
    padding: 3rem 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .newsletter__popup--box__right {
    width: calc(100% - 330px);
    padding: 3rem 3rem;
  }
}

.newsletter__popup--title {
  margin-bottom: 1.3rem;
}

@media only screen and (min-width: 992px) {
  .newsletter__popup--title {
    margin-bottom: 2rem;
  }
}

.newsletter__popup--content--desc {
  color: var(--foreground-sub-color);
  display: inline-block;
  line-height: 2.4rem;
  font-size: 1.3rem;
  margin-bottom: 1.6rem;
}

@media only screen and (min-width: 768px) {
  .newsletter__popup--content--desc {
    line-height: 2.6rem;
    font-size: 1.5rem;
  }
}

.newsletter__popup--subscribe__input {
  width: 100%;
  height: 4rem;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 0 15px;
}

.newsletter__popup--subscribe__input:focus {
  border-color: var(--secondary-color);
}

@media only screen and (min-width: 768px) {
  .newsletter__popup--subscribe__input {
    height: 4.5rem;
  }
}

.newsletter__popup--subscribe__btn {
  width: 100%;
  height: 4rem;
  background: var(--secondary-color);
  color: var(--text-white-color);
  border: 0;
  padding: 0 2rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 5px;
  margin-top: 1.5rem;
}

.newsletter__popup--subscribe__btn:hover {
  background: var(--primary-color);
}

@media only screen and (min-width: 768px) {
  .newsletter__popup--subscribe__btn {
    height: 4.5rem;
  }
}

.newsletter__popup--footer {
  margin-top: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.newsletter__popup--footer input {
  vertical-align: middle;
  margin-right: 0.8rem;
}

.newsletter__popup--dontshow__again--text {
  color: var(--foreground-sub-color);
  cursor: pointer;
  font-size: 1.2rem;
}

@media only screen and (min-width: 768px) {
  .newsletter__popup--dontshow__again--text {
    font-size: 1rem;
  }
}




/* --- Benefits Box --- */
.newsletter__benefits-box {
  background-color: var(--benefit-box-bg); /* پس‌زمینه رنگی برای باکس */
  border-radius: 10px;
  padding: 20px 25px; /* padding داخلی */
  margin: 20px auto; /* مرکز کردن باکس */
  max-width: 400px; /* حداکثر عرض باکس */
  box-shadow: inset 0 2px 10px rgba(0, 128, 100, 0.05); /* سایه داخلی */
  text-align: right; /* راست‌چین کردن محتوا */
}

/* --- Benefits List Items --- */
.newsletter__popup--benefits-list {
  list-style: none;
  padding-right: 0;
  margin: 0; /* حذف margin اصلی */
  display: block; /* اطمینان از block بودن */
}

.newsletter__popup--benefits-list li {
  margin-bottom: 15px; /* فاصله بین آیتم‌های لیست */
  font-size: 1.5rem; /* اندازه فونت بزرگتر */
  color: var(--text-color);
  line-height: 1.9; /* فاصله خطوط بیشتر */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* آیکون در سمت چپ متن */
  text-align: right; /* متن اصلی راست‌چین */
}

.newsletter__popup--benefits-list li:last-child {
  margin-bottom: 0; /* حذف فاصله برای آخرین آیتم */
}

.newsletter__popup--benefits-list li .benefit-icon {
  margin-left: 15px; /* فاصله آیکون از متن */
  margin-right: 0; /* حذف margin راست */
  color: var(--benefit-icon-color); /* رنگ آیکون */
  font-weight: bold;
  font-size: 1.2rem; /* آیکون کمی بزرگتر */
  display: inline-flex; /* برای تراز بهتر */
}






/* ===================== Mega Menu / Single Column / Premium ===================== */
:root{
  --mm-bg: #ffffff;
  --mm-surface: #f8fafc;
  --mm-surface-hover: #ffffff;
  --mm-border: #e2e8f0;
  --mm-text: #0f172a;
  --mm-subtext: #64748b;
  --mm-muted: #94a3b8;
  --mm-accent: var(--secondary-color, #2563eb);
  --mm-radius-xl: 16px;
  --mm-radius-lg: 12px;
  --mm-shadow: 0 18px 48px rgba(2, 6, 23, .14);
}

.mega__menu--single{
  position: relative;
}

/* Toggle polish */
.mega__menu--toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.mega__menu--toggle .menu__arrowdown--icon{
  transition: transform .22s ease, opacity .22s ease;
  opacity:.8;
}
.mega__menu--single:hover .mega__menu--toggle .menu__arrowdown--icon,
.mega__menu--single:focus-within .mega__menu--toggle .menu__arrowdown--icon{
  transform: rotate(180deg);
  opacity:1;
}

/* Panel */
.mega__menu--single__panel{
  position:absolute;
  top: 100%;
  right: 0;
  width: 400px;                /* sweet spot for 7 items */
  z-index: 120;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform: translateY(8px) scale(.985);
  filter: blur(2px);
  transition:
    opacity .22s ease,
    transform .24s cubic-bezier(.22,.61,.36,1),
    filter .22s ease,
    visibility .22s ease;
}
.mega__menu--single:hover .mega__menu--single__panel,
.mega__menu--single:focus-within .mega__menu--single__panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Shell */
.mega__menu--single__inner{
  background: color-mix(in srgb, #fff 94%, #f8fafc 6%);
  border: 1px solid rgba(148,163,184,.28);
  border-radius: var(--mm-radius-xl);
  box-shadow: var(--mm-shadow);
  padding: 14px;
  backdrop-filter: blur(6px) saturate(1.05);
}

/* Header */
.mega__menu--single__head{
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.mega__menu--single__title{
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 800;
  color: var(--mm-text);
  line-height: 1.5;
}
.mega__menu--single__desc{
  margin:0;
  font-size: 12px;
  color: var(--mm-subtext);
  line-height: 1.65;
}

/* Single-column list */
.mega__menu--single__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Card */
.mega__menu--single__card{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:56px;
  padding:10px;
  text-decoration:none;
  background: var(--mm-surface);
  border:1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  transition:
    transform .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease;
}
.mega__menu--single__card:hover{
  transform: translateY(-1px);
  background: var(--mm-surface-hover);
  border-color: color-mix(in srgb, var(--mm-accent) 42%, #cbd5e1);
  box-shadow: 0 10px 20px rgba(15,23,42,.07);
}

/* Accent rail */
.mega__menu--single__card::before{
  content:"";
  position:absolute;
  right:0;            /* RTL */
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:3px 0 0 3px;
  background: transparent;
  transition: background-color .2s ease;
}
.mega__menu--single__card:hover::before{
  background: color-mix(in srgb, var(--mm-accent) 78%, white);
}

/* Icon */
.mega__menu--single__icon{
  flex:0 0 36px;
  width:36px;
  height:36px;
  border-radius:10px;
  background:#fff;
  border:1px solid #e2e8f0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#64748b;
  transition: transform .2s ease, border-color .2s ease;
}
.mega__menu--single__card:hover .mega__menu--single__icon{
  transform: scale(1.03);
  border-color:#cbd5e1;
}
.mega__menu--single__icon img{
  width:28px;height:28px;object-fit:contain;
}

/* Texts */
.mega__menu--single__body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.mega__menu--single__name{
  font-size:13px;
  font-weight:700;
  color:#1e293b;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mega__menu--single__meta{
  font-size:11px;
  font-weight:500;
  color:var(--mm-muted);
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Badge (optional) */
.model-badge{
  margin-inline-start:auto;
  font-size:10px;
  font-weight:700;
  line-height:1;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid transparent;
}
.model-badge--active{
  color:#027a48;background:#ecfdf3;border-color:#bbf7d0;
}
.model-badge--coming{
  color:#b45309;background:#fff7ed;border-color:#fed7aa;
}
.model-badge--out{
  color:#64748b;background:#f1f5f9;border-color:#e2e8f0;
}

/* Focus accessibility */
.mega__menu--single__card:focus-visible{
  outline:none;
  border-color: var(--mm-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--mm-accent) 18%, transparent),
    0 10px 20px rgba(15,23,42,.07);
}

/* Mobile */
@media (max-width: 520px){
  .mega__menu--single__panel{
    width:min(92vw, 400px);
    right:50%;
    transform: translate(50%, 8px) scale(.985);
  }
  .mega__menu--single:hover .mega__menu--single__panel,
  .mega__menu--single:focus-within .mega__menu--single__panel{
    transform: translate(50%, 0) scale(1);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mega__menu--single__panel,
  .mega__menu--single__card,
  .mega__menu--single__icon,
  .mega__menu--toggle .menu__arrowdown--icon{
    transition:none !important;
    transform:none !important;
    filter:none !important;
  }
}







/* ====================== phone ====================== */

.telephone__area {
  padding: 3.5rem 0 4rem 0;
  border-bottom: 1px solid var(--bg-light-dark-color);
}

.telephone__inner {
  gap: 3rem;
}


@media only screen and (max-width: 991px) {
  .telephone__inner {
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: center !important;
  }
}


@media only screen and (max-width: 991px) {
  .telephone__content {
    text-align: center;
  }
}

/* عنوان */
.telephone__title {
  font-size: 2rem;
  line-height: 3rem;
  color: var(--text-white-color);
  margin-bottom: 0.8rem;
}

@media only screen and (min-width: 480px) {
  .telephone__title {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 576px) {
  .telephone__title {
    font-size: 2.5rem;
    line-height: 3.2rem;
  }
}

@media only screen and (min-width: 992px) {
  .telephone__title {
    font-size: 3rem;
    line-height: 3.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .telephone__title {
    font-size: 3.4rem;
    line-height: 4rem;
  }
}


.telephone__desc {
  color: var(--foreground-sub-color);
}


.telephone__info {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* فاصله بین شماره تلفن‌ها */
  flex-wrap: wrap; /* اگر جا نبود به خط بعد برود */
}


@media only screen and (max-width: 575px) {
  .telephone__info {
    width: 100%;
    justify-content: center;
  }
}


.telephone__number {
  flex-direction: row-reverse;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  color: var(--text-white-color);
  font-size: 1.4rem;
  font-weight: 500;
  padding: 0 2rem;
  height: 4.5rem;
  border-radius: 5px;
  text-decoration: none;
  border: 1px solid var(--secondary-color);
  transition: 0.3s;
  white-space: nowrap; /* شماره تلفن در یک خط بماند */
}


.telephone__number:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}


@media only screen and (min-width: 480px) {
  .telephone__number {
    height: 4.8rem;
  }
}

@media only screen and (min-width: 992px) {
  .telephone__number {
    height: 5.5rem;
    padding: 0 2.5rem;
  }
}



.address__box {
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
}

.address__box svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.address__box span {
    flex: 1;
}



#phone__order__btn {
    position: fixed;
    bottom: 55px; /* هم‌راستا با دکمه اسکرول */
    left: 30px;   /* این باعث می‌شود در سمت چپ قرار بگیرد */
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #ff6a00; /* رنگ نارنجی برند */
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    animation: pulse-animation 2s infinite;
}

#phone__order__btn:hover {
    transform: translateY(-5px);
    background-color: #e65c00;
    color: #fff;
}

/* انیمیشن برای جلب توجه */
@keyframes pulse-animation {
    0% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 106, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0); }
}

/* در موبایل اگر فضا کم بود، فقط آیکون نشان داده شود */
@media (max-width: 575px) {
    #phone__order__btn span { display: none; }
    #phone__order__btn { padding: 12px; }
}


@media (max-width: 991px) {
  #phone__order__btn {
    display: none !important;
  }
}





/*
    Search box css here
*/
.select {
  position: relative;
}

.select::before {
  border-bottom: 2px solid #201e1e;
  border-right: 2px solid #201e1e;
  content: "";
  display: block;
  height: 7px;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px;
  transform-origin: 66% 66%;
  transform: rotate(45deg);
  opacity: 0.7;
}

.header__select--categories {
  position: relative;
}

.header__select--categories::after {
  position: absolute;
  content: "";
  background: var(--border-color);
  width: 0.2rem;
  height: 3rem;
  right: 0;
  top: 50%;
  transform: translatey(-50%);
}

.header__select--inner {
  border: 0;
  background: var(--body-background-color);
  height: 50px;
  padding: 0 32px 0 15px;
  border-radius: 5px 0 0 5px;
  -webkit-appearance: none;
  cursor: pointer;
  font-size: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .header__select--inner {
    padding: 0 35px 0 17px;
    font-size: 1.5rem;
  }
}

.header__search--form {
  border: 1px solid var(--border-color);
}

.header__search--box {
  position: relative;
  width: 330px;
}

@media only screen and (min-width: 1200px) {
  .header__search--box {
    width: 400px;
  }
}

@media only screen and (min-width: 1366px) {
  .header__search--box {
    width: 462px;
  }
}

.header__search--input {
  width: 100%;
  border: 0;
  height: 52px;
  border-radius: 0 5px 5px 0;
  padding: 0 70px 0 16px;
}

.header__search--input:focus::-webkit-input-placeholder {
  color: #000000;
}

.header__search--button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border: 0;
  padding: 0 20px;
  border-radius: 0 5px 5px 0;
}

.header__search--button:hover {
  background: var(--secondary-color);
}

@media only screen and (min-width: 1200px) {
  .header__search--button {
    padding: 0 22px;
  }
}



/* ============================
   HEADER SEARCH (MODAL VARIANT)
   ============================ */

.parts-search.header-search {
  width: 100%;
}

/* Modal container */


.predictive__search--box {
  background: var(--body-background-color);
  box-shadow: 0 -4px 27px rgba(62, 70, 120, 0.16);
  position: relative;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
  transition: all 0.3s ease 0s;
  transform: translateY(-100%);
}


.predictive__search--box.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.predictive__search--box__inner {
  max-width: 900px;
  margin: 20px auto 0;
  background: #fff;
  border-radius: 18px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 12px 34px rgba(0,0,0,.10);
}



@media only screen and (min-width: 576px) {
  .predictive__search--box__inner {
    padding: 22px 50px;
  }
}
@media only screen and (min-width: 768px) {
  .predictive__search--box__inner {
    padding: 30px 80px;
  }
}
@media only screen and (min-width: 992px) {
  .predictive__search--box__inner {
    padding: 30px 150px;
  }
}








/* Title */
.predictive__search--title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  color: #111827;
}

/* GRID FORM */
.header-search .parts-search-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  align-items: start;
}

/* Inputs */
.header-search .part-name-input,
.header-search .search-car-select {
  height: 48px;
  width: 100%;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 14px;
  box-sizing: border-box;
  appearance: none;
}

.header-search .predictive-input-wrapper {
  position: relative;
  width: 100%;
  display: block;
  height: auto;
}



/* Search button */
.header-search .search-button {
  grid-column: 1 / -1;
  width: 100%;
  height: 48px;
  border-radius: 12px;
  background: var(--primary-color);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border: 0;
  transition: .2s ease;
  margin-top: 4px;
}

.header-search .search-button:hover {
  background: var(--secondary-color);
}

/* Close button */

.predictive__search--close__btn {
  position: absolute;
  top: 20px;
  right: 40px;
  padding: 0;
  border: 0;
  background: inherit;
}
@media only screen and (max-width: 576px) {
  .predictive__search--close__btn {
    right: 15px;
  }
}
.predictive__search--close__btn:hover {
  color: var(--secondary-color);
  transform: scale(1.3);
}
.predictive__search--close__btn > * {
  pointer-events: none;
}


/* Suggestions */
.header-search .parts-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  animation: suggestFade .15s ease;
}

.parts-suggest-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.parts-suggest-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  color: #111827;
  transition: background .15s;
}

.parts-suggest-item:hover {
  background: #f3f4f6;
}

.parts-suggest-empty {
  padding: 12px 14px;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}

@keyframes suggestFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
  .header-search .parts-search-form {
    grid-template-columns: 1fr;
  }

  .header-search .predictive-input-wrapper {
    grid-column: 1 / -1;
  }
}





/* باکس توضیحات شاپ */
.shop__description--section {
    background-color: #f8f8f8;
   
}

.shop__description--section .container {
    padding-top: 4rem;
}


.shop__description--box {
    background: #fff;
    padding: 4rem;
    border-radius: 0.8rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    max-width: 90%;
    margin: 0 auto;
}


.shop__description--title {
    font-size: 2.6rem !important;
    font-weight: 700;
    margin-bottom: 2.5rem;
    color: #222;
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #f0f0f0;
}

.shop__description--content {
    line-height: 2;
    color: #444;
    font-size: 1.6rem !important;
}


.description__text p {
    margin-bottom: 1.8rem;
    text-align: justify;
    font-size: 1.6rem !important;
}

.extra-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

.extra-content.show {
    max-height: 100rem;
    opacity: 1;
}


.read-more-btn {
    background: transparent;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2.4rem;
    margin-top: 1.5rem;
    border-radius: 2.5rem;
    transition: var(--transition);
    font-size: 1.5rem !important;
}

.read-more-btn:hover {
    background: var(--secondary-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(237, 29, 36, 0.3);
}

.read-more-icon {
    transition: transform 0.3s ease;
}

.read-more-btn.active .read-more-icon {
    transform: rotate(180deg);
}

@media only screen and (max-width: 767px) {
    .shop__description--box {
        max-width: 100%;
        padding: 2rem;
    }
    .shop__description--title {
        font-size: 2.2rem !important;
    }
    .shop__description--content,
    .description__text p {
        font-size: 1.4rem !important;
        line-height: 2.4rem;
    }
    .read-more-btn {
        font-size: 1.4rem !important;
        width: 100%;
        justify-content: center;
    }
}





/* استایل عمومی برای تمام محتواهای خروجی از ادیتور */
.ck-content {
    line-height: 1.9;
    font-size: inherit; /* از font-size پدر استفاده می‌کنه */
    font-family: inherit; /* از IRANSans استفاده می‌کنه */
    text-align: justify;
    color: inherit;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* فاصله بین پاراگراف‌ها */
.ck-content p {
    margin-bottom: 1.5rem;
    line-height: inherit;
}

/* تیترها */
.ck-content h2,
.ck-content h3,
.ck-content h4 {
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
    font-weight: bold;
    color: inherit;
    line-height: 1.4;
    font-family: inherit;
    position: relative;
    padding-bottom: 0.5rem;
}

.ck-content h2::after,
.ck-content h3::after,
.ck-content h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to left,
        var(--secondary-color) 0%,
        var(--secondary-color) 20%,
        transparent 100%);
    transition: all 0.4s ease;
}

.ck-content h2::after {
    width: 60px;
}

.ck-content h3::after {
    width: 45px;
}

.ck-content h4::after {
    width: 30px;
}

.ck-content h2:hover::after {
    width: 120px;
}

.ck-content h3:hover::after {
    width: 90px;
}

.ck-content h4:hover::after {
    width: 60px;
}


/* لیست‌ها */
.ck-content ul,
.ck-content ol {
    margin-bottom: 1.5rem;
    padding-right: 2rem;
    padding-left: 0;
}

.ck-content ul li,
.ck-content ol li {
    display: list-item;
    margin-bottom: 0.8rem;
    line-height: 1.8;
}

.ck-content ul li {
    list-style: disc;
}

.ck-content ol li {
    list-style: decimal;
}

/* لینک‌ها */
.ck-content a {
    color: var(--secondary-color, #ED1D24);
    text-decoration: underline;
    transition: var(--transition);
}

.ck-content a:hover {
    color: var(--primary-color, #212121);
}
/* باکس بیشتر بخوانید */
.ck-content p a.learn-more-link{
    position: relative;
    display: block;
    width: 100%;
    margin: 2rem 0;
    padding: 14px 18px;

    text-align: center;
    color: #111;
    font-weight: 600;
    text-decoration: none;

    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.35);

    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(12px);

    box-shadow: 
        0 6px 18px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.4);

    transition: transform .22s ease, box-shadow .22s ease;
}

/* عنوان مقاله */
a.learn-more-link strong{
    color:#ED1D24;
    font-weight:700;
}

/* خط قرمز پایین */
.ck-content p a.learn-more-link::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;

    width:100%;
    height:2px;
    background:#ED1D24;

    transform:translateX(-50%) scaleX(.35);
    transform-origin:center;

    transition:transform .25s ease;
}

/* hover */
.ck-content p a.learn-more-link:hover{
    transform: translateY(-2px);
    box-shadow: 
        0 12px 28px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.45);
}

.ck-content p a.learn-more-link:hover::after{
    transform:translateX(-50%) scaleX(1);
}


/* تصاویر */
.ck-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border-radius: 8px;
}

/* کدها */
.ck-content code {
    background-color: var(--bg-offwhite-color, #F7F7F7);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.ck-content pre {
    background-color: var(--bg-offwhite-color, #F7F7F7);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    direction: ltr; /* برای کدها بهتره چپ‌چین باشه */
    text-align: left;
}

/* Blockquote */
.ck-content blockquote {
    position: relative;
    margin: 2rem 0;
    padding: 1.5rem 2rem 1.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(237, 29, 36, 0.2);
    border-right: 3px solid var(--secondary-color, #ED1D24);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: var(--foreground-sub-color, #898686);
    font-style: italic;
    transition: all 0.3s ease;
}

.ck-content blockquote::before {
    content: '"';
    position: absolute;
    top: -0.5rem;
    right: 1rem;
    font-size: 4rem;
    color: var(--secondary-color, #ED1D24);
    opacity: 0.15;
    font-family: Georgia, serif;
    line-height: 1;
}

.ck-content blockquote:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--secondary-color, #ED1D24);
    box-shadow: 
        0 12px 48px rgba(237, 29, 36, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.ck-content blockquote p {
    margin: 0;
}


/* جداول */
.ck-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.ck-content table th,
.ck-content table td {
    border: 1px solid var(--border-color, #E5E5E5);
    padding: 0.75rem;
    text-align: right;
}

.ck-content table th {
    background-color: var(--bg-offwhite-color, #F7F7F7);
    font-weight: bold;
}

/* موبایل */
@media (max-width: 768px) {
    .ck-content {
        line-height: 1.85;
    }
    
    .ck-content h1 { font-size: 1.75em; }
    .ck-content h2 { font-size: 1.5em; }
    .ck-content h3 { font-size: 1.35em; }
    .ck-content h4 { font-size: 1.15em; }
    
    .ck-content ul,
    .ck-content ol {
        padding-right: 1.5rem;
    }
    
    .ck-content table {
        font-size: 0.9em;
    }
}

/* تبلت */
@media (max-width: 1024px) and (min-width: 769px) {
    .ck-content {
        line-height: 1.88;
    }
}



.description__text{
  position:relative;
  transition:all .3s ease;
}

.description__text.clamped{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.description__text.clamped::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:40px;
  background:linear-gradient(to top,#fff,transparent);
}

.read-more-icon{
  transition:transform .3s ease;
}

.read-more-btn[aria-expanded="true"] .read-more-icon{
  transform:rotate(180deg);
}








/* ================================
   MG Models Modal
================================ */

.models-list-modal {
  border-radius: 12px;
  overflow: hidden;
}

/* header */
.models-list-modal .modal-header {
  position: relative;
  direction: rtl;
  background: #212121;
  color: #fff;
  justify-content: space-between;
  padding: 1.5rem 1rem; /* کمی پدینگ بیشتر برای جای‌گیری بهتر دکمه */
}

/* Close Button (Newsletter Style - Small + Modern) */
.models-list-modal .btn-close {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--secondary-color);
  color: var(--text-white-color) !important;
  opacity: 1;

  width: 2.6rem;
  height: 2.6rem;

  border-radius: 50%;
  border: none;
  padding: 0;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background-image: none !important; /* حذف X پیش‌فرض بوت‌استرپ */

  transition: 0.25s ease;
}

/* ساخت ایکس با CSS */
.models-list-modal .btn-close::before {
  content: "×";
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}

.models-list-modal .btn-close:hover {
  background: var(--primary-color);
  transform: translateY(-50%) scale(1.08);
}


/* ایجاد علامت ضربدر با استفاده از فونت یا محتوا */
.models-list-modal .btn-close::before {
  content: '\2715'; /* علامت ضربدر یونیکد */
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
}

.models-list-modal .btn-close:hover {
  background: var(--primary-color); /* تغییر رنگ هنگام هاور */
  transform: translateY(-50%) scale(1.1);
}

/* models list */
.models-list {
  margin: 0;
  padding: 0;
}

.models-list li {
  list-style: none;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f1f1;
  transition: background 0.2s ease, transform 0.15s ease;
}

.models-list li:last-child {
  border-bottom: none;
}

.models-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #121416;
  text-decoration: none;
  font-weight: 500;
}

.models-list li img {
  border-radius: 6px;
  object-fit: contain;
}

/* hover items */
.models-list li:hover {
  background-color: #f8f8f8;
  transform: translateX(-3px);
}

/* ================================
   Bottom Sheet (Mobile Only)
================================ */


@media (max-width:768px){

  .models-bottom-sheet{
    padding:0 !important;
  }

  .models-bottom-sheet .modal-dialog{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    margin:0;
    width:100%;
    max-width:100%;
    transform:translateY(100%);
    transition:transform .35s ease;
  }

  .models-bottom-sheet.show .modal-dialog{
    transform:translateY(0);
  }

  .models-bottom-sheet .modal-content{
    border-radius:20px 20px 0 0;
    border:none;
    max-height:85vh;
    overflow:hidden;
  }

  .models-bottom-sheet .modal-body{
    overflow-y:auto;
    max-height:65vh;
  }

  /* Handle bar */
  .models-bottom-sheet .modal-header::before{
    content:"";
    position:absolute;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    width:40px;
    height:4px;
    border-radius:10px;
    background:rgba(255,255,255,.25);
  }

}






/* === Header menu: make <button> look exactly like .header__menu--link === */
button.header__menu--link {
  -webkit-appearance: none;
  appearance: none;

  background: transparent;
  box-shadow: none;
  border: 1px solid transparent;
  outline: none;

  padding: 0 0.8rem;
  margin: 0;

  font: inherit;           
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 3.5rem;

  color: inherit;
  text-decoration: none;

  border-radius: 2rem;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* hover مثل لینک‌ها (مطابق رفتار منو در style.css:2533–2547) */
.header__menu--items:hover button.header__menu--link {
  color: var(--secondary-color) !important;
  border-color: var(--secondary-color);
}

/* حالت active مثل a (مطابق style.css:2578–2582) */
button.header__menu--link.active {
  color: var(--secondary-color) !important;
  border-color: var(--secondary-color);
}

/* جداکننده‌ی | بین آیتم‌ها (مطابق style.css:2561–2576) */
button.header__menu--link::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 1.7rem;
  background: #CCCCCC;
  right: -11px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.3;
}

/* مثل CSS خودت: آیتم آخر جداکننده نداشته باشد (مطابق style.css:2528–2530) */
.header__menu--items:last-child button.header__menu--link::before {
  display: none;
}

/* =========================================================
   Header controls normalization
   Make button-based controls look like link/icon controls
   ========================================================= */

/* common reset */
.header__account--btn,
.minicart__open--btn,
.offcanvas__header--menu__open--btn,
.search__open--btn,
.predictive__search--close__btn,
.minicart__close--btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  outline: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}

/* make inline icon buttons align nicely */
.header__account--btn,
.minicart__open--btn,
.offcanvas__header--menu__open--btn,
.search__open--btn,
.predictive__search--close__btn,
.minicart__close--btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* prevent svg/icon children from capturing pointer */
.header__account--btn > *,
.minicart__open--btn > *,
.offcanvas__header--menu__open--btn > *,
.search__open--btn > *,
.predictive__search--close__btn > *,
.minicart__close--btn > * {
  pointer-events: none;
}

/* hover states like the rest of header */
.header__account--btn:hover,
.minicart__open--btn:hover,
.offcanvas__header--menu__open--btn:hover,
.search__open--btn:hover,
.predictive__search--close__btn:hover,
.minicart__close--btn:hover {
  color: var(--secondary-color);
}

.offcanvas__stikcy--toolbar button.offcanvas__stikcy--toolbar__btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  box-shadow: none;
  outline: 0;
  font: inherit;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}





/* 
    20. Preloader css 
*/
.ctn-preloader {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
  pointer-events: none;
}

.ctn-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}

.ctn-preloader .animation-preloader .spinner {
  -webkit-animation: spinner 1s infinite linear;
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  border: 4px solid var(--border-color);
  border-top-color: var(--bg-light-dark-color);
  height: 9em;
  margin: 0 auto 3.5em auto;
  width: 9em;
}

.ctn-preloader .animation-preloader .txt-loading {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 900;
    text-align: center;
    user-select: none;
    color: var(--foreground-sub-color);
    font-size: 3.5rem;
    direction: ltr;

    /* بهبود و تضمین عدم شکست خط و رفع CLS */
    min-height: 4.2rem;
    line-height: 1.2;
    display: block;
    white-space: nowrap; /* جلوگیری قطعی از شکستن خط حروف */
    width: 100%;
    contain: layout; /* تغییر از size layout به layout جهت هماهنگی با محتوای داینامیک حروف */
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading {
    font-family: Arial, Helvetica, sans-serif !important;
    color: rgba(0,0,0,0.2);
    position: relative;

    /* تراز کردن حروف در یک خط */
    display: inline-block;
    width: 1.2ch;
    text-align: center;
    will-change: transform, opacity;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
  animation: letters-loading 5s infinite;
  color: var(--body-text-color);
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: rotateY(-90deg);
  -webkit-animation: letters-loading 5s infinite;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.ctn-preloader .loader-section {
  background: var(--body-background-color);
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}

.ctn-preloader .loader-section.section-left {
  left: 0;
}

.ctn-preloader .loader-section.section-right {
  right: 0;
}

.loaded .animation-preloader {
  opacity: 0;
  transition: 0.5s ease-out;
  -webkit-transition: 0.5s ease-out;
  -moz-transition: 0.5s ease-out;
  -ms-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
}

.loaded .loader-section.section-left {
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  transform: translateX(-101%);
}

.loaded .loader-section.section-right {
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  transform: translateX(101%);
}

/* انیمیشن‌ها */
@-webkit-keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}

@-webkit-keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

@keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

/* ریسپانسیو مانیتورهای کوچک و موبایل */
@media screen and (max-width: 767px) {
  .ctn-preloader .animation-preloader .spinner {
    height: 8em;
    width: 8em;
  }
  .ctn-preloader .animation-preloader .txt-loading {
    font-size: 2.5rem;
    min-height: 3rem; /* متناسب با سایز فونت جدید */
  }
}

@media screen and (max-width: 500px) {
  .ctn-preloader .animation-preloader .spinner {
    height: 7em;
    width: 7em;
  }
}

/* جلوگیری از CLS در زمان محو شدن */
.loaded .ctn-preloader {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
    pointer-events: none;
}