@font-face {
    font-family: Vazirmatn;
    src: url('../fonts/webfonts/Vazirmatn-FD-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: Vazirmatn;
    src: url('../fonts/webfonts/Vazirmatn-FD-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: Vazirmatn;
    src: url('../fonts/webfonts/Vazirmatn-FD-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: Vazirmatn;
    src: url('../fonts/webfonts/Vazirmatn-FD-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
:root {
    --description: #808080;
    --black: #333333;
    --primary: #00332E;
    --border: #E6E6E6;
    --secondary: #DC9A50;
    --primary-bg: #EBF0F0;
    --secondary-bg-2: #FAFAFA;
    --secondary-bg: #FCF5EE;
    --primary-text: #06796E;
}

::-webkit-scrollbar {
  width: 0px;
}

  .baorex-services {
      border-radius: 15px;
      padding: 30px;
  }

  .baorex-card {
      background: white;
      border-radius: 12px;
      padding: 15px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease-in-out;
      height: 100%;
  }

  .baorex-card img {
      width: 60px;
      height: auto;
      margin-bottom: 10px;
      position: relative;
      z-index: 2;
  }

  .baorex-card p {
      font-weight: bold;
      color: #fff;
      margin: 0;
      position: relative;
      z-index: 2;
  }

  .baorex-hover-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to top, #B22222, transparent);
      transition: opacity 0.4s ease-in-out;
      opacity: 1;
      z-index: 1;
  }

  .baorex-card:hover .baorex-hover-overlay {
      opacity: 0;
  }

  .baorex-card:hover p {
      color: #333;
  }

  .baorex-title {
      color: #B22222;
      font-weight: bold;
      font-size: 28px;
      z-index: 2;
      position: relative;
  }

  .baorex-bg-text {
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 50px;
      font-weight: bold;
      color: #000;
      white-space: nowrap;
      z-index: 1;
      -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%);
      mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(1,1,1,1) 80%);
      opacity: 0.1;
  }

  .background-white {
      background-color: white;
  }
  .bg-blue {
      background-color: #f4f8fc; /* رنگ مشابه تصویر */
      border-radius: 12px;
      padding: 40px 30px;
  }

  .baorex-bg-text-sm {
      top: -10px;
  }

  #topBanner {
      margin-top: 70px;  /* فاصله از بالا */
      margin-left: 20px; /* فاصله از چپ */
      margin-right: 20px; /* فاصله از راست */
  }
  .navbar{
      z-index: 2000;

  }
  .banner-sticky {
      position: sticky;
      top: 0;
      z-index: 1050;
      transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .banner-hidden {
      transform: translateY(-100%);
      opacity: 0;
  }

.bg-red{
    color:#B22222;
}
  .bg-yellow{
      color:#FFC107;
  }
.btn-red {
  background-color: #B22222;
  color: white;
    border-color: #B22222 !important;

    transition: all 0.3s ease; /* انیمیشن برای تغییرات */
}
  .text-red2 {
      color: #B22222;
      font-weight: bold;
      font-size: 28px;
      z-index: 2;
      position: relative;
  }

  .bg-text2 {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 50px;
      font-weight: bold;
      color: #000;  /* رنگ اصلی */
      white-space: nowrap;
      z-index: 1;

      /* افکت محو شدن از پایین */
      -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%);
      mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(1,1,1,1) 80%);

      opacity: 0.1; /* تنظیم شفافیت */
  }

.btn-red:hover {
  color: #B22222;
    border-color: #B22222 !important;
}
  .btn-yellow {
      background-color: #FFC107;
      color: white;
      transition: all 0.3s ease; /* انیمیشن برای تغییرات */
  }

  .btn-yellow:hover {
      color: #FFC107;
  }
  .btn-outline-yellow {
      color: #FFC107;
      border-color: #FFC107 !important;
  }

  .btn-outline-yellow:hover {
      background-color: #FFC107;
      color: white; /* متن سفید در هنگام هاور */
      border-color: #FFC107;
  }
.bg-description{
  background: var(--description) !important;
}
.color-description{
  color: var(--description) !important;
}
.bg-black{
  background: var(--black) !important;
}
*{
  border-color: var(--border) !important;
}
.color-black{
  color: var(--black) !important;
}
.bg-primary{
  background: var(--primary) !important;
}
.color-primary{
  color: var(--primary) !important;
}
.bg-border{
  background: var(--border) !important;
}
.color-border{
  color: var(--border) !important;
}
.bg-secondary{
  background: var(--secondary) !important;
}
.color-secondary{
  color: var(--secondary) !important;
}
.bg-primary-bg{
  background: var(--primary-bg) !important;
}
.color-primary-bg{
  color: var(--primary-bg) !important;
}
.bg-secondary-bg-2{
  background: var(--secondary-bg-2) !important;
}
.color-secondary-bg-2{
  color: var(--secondary-bg-2) !important;
}
.bg-secondary-bg{
  background: var(--secondary-bg) !important;
}
.color-secondary-bg{
  color: var(--secondary-bg) !important;
}
.bg-primary-text{
  background: var(--primary-text) !important;
}
.color-primary-text{
  color: var(--primary-text) !important;
}
.text-description-big,.text-description-medium,.text-description-small{
  font-weight: 400;
  line-height: 210%;
}
.text-description-big{
  font-size: 20px;
}
.text-description-medium{
  font-size: 18px;
}
.text-description-small{
  font-size: 16px;
}
body{
  font-family: Vazirmatn;
      color: var(--black);
    
}
  .custom-bg {
      width: 100%;
      height: 500px; /* ارتفاع را تنظیم کن */
      background: url("../image/patternhe.png") no-repeat center center;
      background-size: cover;
      position: relative;
      z-index: 0;
  }
  .position-absolute {
      z-index: 1; /* محتوا روی بک‌گراند قرار بگیرد */
  }
li{
  list-style: none;
}
a{
  text-decoration: none;
}
.max-content{
  width: max-content;
}
.h1{
    font-size: 32px;
    font-weight: 700;
}
.h2{
    font-size: 29px;
    font-weight: 700;
}
.h3{
    font-size: 26px;
    font-weight: 700;
}
.h4{
    font-size: 23px;
    font-weight: 700;
}
.h5{
    font-size: 20px;
    font-weight: 700;
}
.h6{
    font-size: 18px;
    font-weight: 700;
}
.p-tag{
    font-size: 16px;
    font-weight: 600;
}
.normal{
    font-size: 16px;
    font-weight: 400;
}

.ck-description img{
  margin: auto;
  display: flex;
}
.ck-description p{
  width: 100%;
}
@media (max-width: 576px) {
    
.ck-description img{
    width: 100% !important;
    height: unset !important;
}

input{
    font-size: 14px;
}
.h1{
    font-size: 24px;
    font-weight: 700;
}
.h2{
    font-size: 22px;
    font-weight: 700;
}
.h3{
    font-size: 20px;
    font-weight: 700;
}
.h4{
    font-size: 18px;
    font-weight: 700;
}
.h5{
    font-size: 16px;
    font-weight: 700;
}
.h6{
    font-size: 15px;
    font-weight: 700;
}
.p-tag{
    font-size: 14px !important;
    font-weight: 600;
}
.normal{
    font-size: 14px !important;
    font-weight: 400;
}
.container{
  padding-left: 24px;
  padding-right: 24px;
}
.category-slider .swiper-slide{
  width: 170px !important;
}
.product-slider .swiper-slide{
  width: 200px !important;
}
.search input::placeholder{
  font-size: 14px !important;
}
.text-description-small{
  font-size: 14px;
}
.login-page form{
  border: 0px !important;
}
.menu-open-bottom .content-menu{
border-radius: 20px 20px 0px 0px !important;
position: fixed;
bottom: 0%;
width: 100%;
background:#ffffff;
padding: 24px;
padding-top: 56px;
z-index: 99999;
animation: .4s menu-open-bottom;
animation-fill-mode: forwards;
-webkit-animation: .4s menu-open-bottom;
left: 0px;
right: 0px;
margin: auto;
}
.menu-open-bottom .content-menu::after{
content: '';
border-radius: 32px;
width: 68px;
left: 0px;
right: 0px;
margin: auto;
height: 6px;
background-color: var(--border);
position: absolute;
top: 24px;
-webkit-border-radius: 32px;
-moz-border-radius: 32px;
-ms-border-radius: 32px;
-o-border-radius: 32px;
}
.profile .box-icon{
    width: 50px;
    height: 50px;
}
#login_box{
  border: none !important;
}
}
@media (min-width: 576px) {
    .menu-open-bottom .content-menu{
        border-radius: 15px !important;
        position: fixed;
        inset: 0px;
        max-width: 400px;
        height: max-content;
        background:#ffffff;
        padding: 24px;
        z-index: 99999;
        margin: auto;
        padding-top: 30px;
        -webkit-border-radius: 15px !important;
        -moz-border-radius: 15px !important;
        -ms-border-radius: 15px !important;
        -o-border-radius: 15px !important;
    }
    .menu-open-lg .content-menu{
        max-width: 600px !important;
    }
}
.menu-open-bottom .background-open{
    position: fixed;
    inset: 0px !important;
    background:rgba(0, 0, 0, 0.40);
    z-index: 99998;
  }
.form-control, .form-select{
  background-color: var(--secondary-bg-2) !important;
  border: none;
  padding: 13.5px 16px;
  border-radius: 8px;
  box-shadow: none !important;
}
.form-control::placeholder{
  color: var(--description);
  font-size: 14px;
  font-weight: 400;
}
.search input::placeholder{
  color: var(--description);
  font-size: 16px;
  font-weight: 300;
}
.iconsax{
  font-weight: 500 !important;
}
.mobile-container{
  padding: 0px 24px;
}
.shadow-for-box-fixed{
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
}
.breadcrumb-item+.breadcrumb-item::before{
  color: var(--description);
}
.border-dashed{
  border-bottom: 2px dashed var(--border);
}
.comment .box-icon{
  background:  var(--primary-bg);
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  display: flex;
}
.offcanvas{
  width: 300px !important;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-pagination-bullet{
  background-color: var(--description);
}
.swiper-pagination-bullet-active{
  background-color: var(--primary-text) !important;
}
.menu-open-bottom.hide{
  display: none;
}
@keyframes menu-open-bottom {
  0% {
    bottom: -100%;
  }
  100% { 
    bottom: 0%;
  }
}

.product-background-image{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.rounded-max{
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
}
.login-page{
  height: 100vh;
}
/* .login-page .bg-login{
  z-index: 0;
  position: absolute;
  inset: 0px;
  left: 50%;

  background-image: url("../image/blog-image.png");
  background-repeat:no-repeat;
  background-size: cover;
} */  
.profile{
  padding: 12px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}
.profile .box-icon{
  background:  var(--primary-bg);
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  display: flex;
}
.group-images-order{
  display: flex;
}
.group-images-order img{
  margin-left: -40px;
}
.tap-panel .tap-button{
  background: var(--secondary-bg-2);
  color: var(--primary);
  padding: 9px 15px;
  border-radius: 4px;
  transition: all .2s;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -ms-transition: all .2s;
  -o-transition: all .2s;
}
.tap-panel .tap-button.active{
  background: var(--primary);
  color: white;
}
.menu-open-bottom .btn-lg-mobile{
  padding: 15px 0px !important;
}
.accordion-button:not(.collapsed){
    background: var(--primary-bg);
    box-shadow: none;
    padding-right:24px !important;
    color: var(--primary);
}
.pagination{
  justify-content: center;
  margin-top: 16px;
}
.pagination * {
  color: var(--description);
}
.pagination .active *{
  color: var(--black) !important;
  font-weight: bold;
}
.loader-box{
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--primary-text);
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}


.vs__dropdown-toggle{
  border: 0px solid !important;
}