*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.containertest{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width:1000px;
  height: 600px;
  background:#f5f5f5 ;
  box-shadow: 0 30px 50px #dbdbdb;
}

.item .content{
  position: absolute;
  top: 50%;
  left: 100px;
  width: 300px;
  text-align: left;
  color: #eee;
  transform: translate(0,-50%);
  font-family: system-ui;
  display: none;
}

.slider-container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}

.slider {
display: flex;
width: 100%;
height: 460px;
position: relative;
overflow: hidden;
}

.slide {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 1;
}

.slide.active {
opacity: 1;
z-index: 2;
}

.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}

.slide-content {
position: absolute;
top: 20%;  /* تغییر از bottom به top و تنظیم فاصله از بالا */
right: 10%; /* تغییر از left به right برای سمت راست */
left: auto; /* غیرفعال کردن left قبلی */
color: white;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
max-width: 500px;
text-align: right; /* راست‌چین کردن متن */
transform: none; 
}

.slider-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}

.slider-radio {
width: 15px;
height: 15px;
border-radius: 50%;
border: 2px solid #d8d2ba;
background: transparent;
cursor: pointer;
transition: background 0.3s ease;
}

.slider-radio.active {
background: #d8d2ba;
}

.slider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 15px;
cursor: pointer;
font-size: 18px;
z-index: 10;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}

.slider-nav.prev {
left: 20px;
}

.slider-nav.next {
right: 20px;
}

.slider-nav:hover {
background: rgba(0, 0, 0, 0.8);
}

.content .name{
  font-size: 40px;
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0;
  animation:animate 1s ease-in-out 1 forwards;
}
.content .des{
  margin-top: 10px;
  margin-bottom: 20px;
  opacity: 0;
  animation:animate 1s ease-in-out 0.3s 1 forwards;
}

.content button{
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  opacity: 0;
  animation:animate 1s ease-in-out 0.6s 1 forwards;
}
@keyframes animate{
  from{
      opacity: 0;
      transform: translate(0,100px);
      filter:blur(33px);
  }
  to{
      opacity: 1;
      transform: translate(0);
      filter:blur(0);

  }
}
.button{
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 20px;
}
.button button{
  width: 40px;
  height: 35px;
  border-radius: 8px;
  cursor: pointer;
  margin: 0 5px;
  border: 1px solid #000;
  transition: 0.3s;
}
.button button:hover{
  background: #ababab;
  color: #fff;
}

/* افزودن فونت آیکون */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');  

.infobox {
background-color: #dcd1a4;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
height: 200px; /* ارتفاع مربعی */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

.infobox:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.infobox h4 {
color: #5b4d3b;
margin-bottom: 15px;
font-weight: 700;
}

.infobox p {
color: #5b4d3b;

}

.icon-box {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}

.social-floating {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1000;
}

.social-main-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #eda900, #5b4d3b);
color: white;
border: none;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
position: relative;
z-index: 2;
}

.social-buttons {
position: absolute;
bottom: 0;
right: 0;
width: 60px;
height: 60px;
}

.social-btn {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
opacity: 0;
transform: translateY(0) scale(0.5);
right: 5px;
bottom: 5px;
}

.social-floating.active .social-btn {
opacity: 1;
transform: translateY(calc(-70px * var(--i))) scale(1);
}

.tg { background: linear-gradient(135deg, #0088cc, #0077b5); }
.insta { background: linear-gradient(135deg, #e1306c, #c13584); }
.whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); }
.twitter { background: linear-gradient(135deg, #1da1f2, #0d8ecf); }

/* Product Showcase Container */

.product-showcase-container {
padding: 1.8rem 0.8rem;
direction: rtl;
}

.product-showcase-box {
background:  #5b4d3b;
border-radius: 15px;
padding: 1.1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
max-width: 1170px;
max-height: 670px;
margin: 0 auto;
}

.section-title {
text-align: center;
font-size: 2.6rem;
margin-bottom: 0.3rem;
color: #d8d2ba;
font-weight: 700;
position: relative;
padding-bottom: 5px;
}

.section-title::after {
content: '';
position: absolute;
bottom: 0;
right: 50%;
transform: translateX(50%);
width: 150px;
height: 3px;
background: #d8d2ba;
}

/* Scroller Wrapper */
.product-scroller-wrapper {
position: relative;
padding: 0 40px;
}

.product-scroller {
overflow: hidden;
width: 100%;
position: relative;
}

.product-track {
display: flex;
gap: 1.5rem;
overflow-x: auto;
scroll-behavior: smooth;
padding: 1rem 0;
-ms-overflow-style: none;
scrollbar-width: none;
scroll-snap-type: x mandatory;
}

.product-track::-webkit-scrollbar {
display: none;
}

/* Product Card */
.product-card {
min-width: 225px;
max-width: 210px;
background: #d8d2ba;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
flex-shrink: 0;
scroll-snap-align: start;
display: flex;
flex-direction: column;
}

@media (max-width: 768px) {
.product-card {
min-width: 180px;
max-width: 180px;
}
}

.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.product-img {
width: 100%;
height: 225px;
object-fit: cover;
border-bottom: 1px solid #eee;
}

@media (max-width: 576px) {
.product-img {
height: 170px;
}
}

.product-info {
padding: 5px;
flex: 1;
display: flex;
flex-direction: column;
direction: ltr; /* راست‌چین کردن محتوا */
}

.product-info h3 {
font-size: 1.9rem;
margin-bottom: 3px;
color: #262626;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
position: relative;
padding-bottom: 3px;
}



.product-meta {
margin: 8px 0;
direction: ltr; /* جهت کلی راست به چپ */
font-weight: 600; /* پررنگ کردن متن‌ها */
font-size: 1.6rem;
color: #555;
min-height: 0;
flex-grow: 1;
}

.meta-item {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
position: relative;
}

.meta-label {
color: #333;
font-weight: 700;
padding-left: 10px;
background: #d8d2ba; /* رنگ پس زمینه برچسب */
position: relative;
z-index: 2;
}

.meta-value {
color: #1a1600;
font-weight: 700;
padding-right: 10px;
background: #d8d2ba; /* رنگ پس زمینه مقدار */
position: relative;
z-index: 2;
}

.meta-item::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
border-bottom: 2px dotted #666; /* خط نقطه‌چین */
z-index: 1;
}

.price-section {
font-size: 1.6rem;
direction: ltr;
margin-top: auto;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

.price-item {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
position: relative;
}

.price-item:only-child {
margin-top: auto;
}

.product-card:not(:has(.original-price)) .meta-item:last-child {
margin-bottom: 15px;
}

.price-label {
color: #333;
font-weight: 700;
padding-left: 10px;
background: #d8d2ba;
position: relative;
z-index: 2;
}

.price-value {
color: #1a1600;
font-weight: 800;
font-size: 1.8rem;
padding-right: 10px;
background: #d8d2ba;
position: relative;
z-index: 2;
}

.price-item::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
border-bottom: 2px dotted #666;
z-index: 1;
}

.discounted-price {
color: #d32f2f;
}

.original-price {
text-decoration: line-through;
color: #666;
font-size: 1.7rem;
}

.add-to-cart {
width: 100%;
padding: 0.8rem;
background: #c08a02;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
font-size: 1.5rem;
}

.add-to-cart:hover {
background: #725303;
}

/* Scroller Buttons */
.scroller-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: white;
border: none;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
color: #4e73df;
font-size: 1rem;
transition: all 0.3s;
opacity: 0.9;
}

.scroller-btn:hover {
background: #c08a02;
color: white;
opacity: 1;
transform: translateY(-50%) scale(1.1);
}

.scroller-left {
right: 0;
}

.scroller-right {
left: 0;
}

@media (max-width: 576px) {
.scroller-btn {
width: 30px;
height: 30px;
font-size: 0.8rem;
}

.product-scroller-wrapper {
padding: 0 30px;
}
}

/* View More Button */

.view-more-btn {
display: inline-block;
padding: 1rem 1.9rem;
background: #c08a02;
color: #d8d2ba;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
border: 2px solid  #5b4d3b;
font-size: 1.7rem;
}

.view-more-btn:hover {
color: #725303;
}

/* استایل‌های جدید بخش درباره ما */
.about-container {
max-width: 1450px; /* عرض کانتینر کوچکتر شده */
margin: 40px auto;
padding: 0 15px;
}

.about-row {
background-color: #d8d2ba;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.about-text-col {
padding: 40px;
display: flex;
align-items: center;
}

.about-content {
width: 100%;
}

.about-title {
font-size: 28px;
font-weight: 700;
color: #5b4d3b;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}

.about-title:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 80px;
height: 3px;
background: #5b4d3b;
}

.about-description {
font-size: 18px;
line-height: 1.8;
color: #5b4d3b;
text-align: justify;
margin-bottom: 30px;
}

.about-img-col {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}

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

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

.btn-more {
display: inline-block;
padding: 12px 30px;
background: linear-gradient(135deg, #5b4d3b 0%, #867257 100%);
color: #fff;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(237, 169, 0, 0.3);
border: none;
cursor: pointer;
}

.btn-more:hover {
background: linear-gradient(135deg, #867257 0%, #5b4d3b 100%);
transform: translateY(-3px);
box-shadow: 0 7px 20px rgba(237, 169, 0, 0.4);
color: #fff;
}

.btn-more i {
margin-right: 5px;
transition: all 0.3s ease;
}

.btn-more:hover i {
transform: translateX(-5px);
}

/* استایل‌های بخش محصولات ویژه */
.featured-products-section {
padding: 1rem 0.5rem;
background: linear-gradient(135deg, #e1dbc2 0%, #e8e1c8 100%);
position: relative;
overflow: hidden;
}

.featured-products-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: rgba(233, 214, 107, 0.1);
border-radius: 50%;
z-index: 0;
}

.featured-products-section::after {
content: '';
position: absolute;
bottom: -50px;
left: -50px;
width: 300px;
height: 300px;
background: rgba(233, 214, 107, 0.1);
border-radius: 50%;
z-index: 0;
}

.featured-products-container {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}

.featured-header {
text-align: center;
margin-bottom: 1.3rem;
}

.featured-title {
font-size: 3rem;
color:  #5b4d3b;
font-weight: 700;
margin-bottom: 0.5rem;
position: relative;
display: inline-block;
}

.featured-decoration {
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.5rem;
}

.decoration-line {
width: 80px;
height: 2px;
background:  #5b4d3b;
margin: 0 15px;
}

.featured-decoration i {
color:  #a98c66;
font-size: 1.5rem;
}

.featured-products-grid {
display: grid;
grid-template-columns: repeat(4, minmax(260px, 1fr));
gap: 0.4rem;
padding: 0.5rem;
width: 100%;
max-width: 1300px; /* افزایش عرض ماکزیمم */
margin: 0 auto;
justify-content: center;
}

.featured-product-card {
width: 100%; /* عرض کامل */
max-width: 280px; /* حداکثر عرض */
min-width: 0; /* حذف حداقل عرض */
background: #e9d66b;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
margin: 0 auto; /* وسط‌چین شدن */
display: flex;
flex-direction: column;
height: 100%; /* ارتفاع کامل */
}

.featured-product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.product-badges {
position: absolute;
top: 15px;
right: 15px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 2;
}

.badge-featured {
background: linear-gradient(135deg, #e9d66b 0%, #d4b647 100%);
color: #2c3e50;
padding: 5px 12px;
border-radius: 20px;
font-size: 1.3rem;
font-weight: 700;
box-shadow: 0 3px 8px rgba(233, 214, 107, 0.3);
}

.badge-discount {
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 1.3rem;
font-weight: 700;
box-shadow: 0 3px 8px rgba(231, 76, 60, 0.3);
}

.featured-product-image-container {
height: 275px; /* کاهش ارتفاع */
width: 100%; /* عرض کامل */
overflow: hidden;
position: relative;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
}

.featured-product-image {
width: 100%;
height: 100%;
object-fit: contain; /* یا cover بسته به نیاز */
padding: 10px; /* کاهش پدینگ */
transition: transform 0.5s ease;
}

.featured-product-card:hover .featured-product-image {
transform: scale(1.05);
}

.featured-product-info {
padding: 0.2rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
}

.featured-product-name {
font-size: 1.9rem;
color: #2c3e50;
margin-bottom: 0.5rem;
margin-top: 0.3rem;
font-weight: 600;
text-align: center;
}

.featured-product-name a {
color: inherit;
text-decoration: none;
transition: color 0.3s;
}

.featured-product-name a:hover {
color:  #5b4d3b;
}

.product-specs {
margin-bottom: 1rem;
}

.spec-item {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
font-size: 1.3rem;
}

.spec-label {
color: #071947;
font-weight: 500;
font-size: 1.5rem;

}

.spec-value {
color: #071947;
font-weight: 600;
font-size: 1.5rem;

}

.featured-product-pricing {
margin-bottom: 0.5rem;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

.featured-original-price {
font-size: 1.5rem;
color: #95a5a6;
text-decoration: line-through;
margin-bottom: 0.3rem;
}

.featured-discounted-price {
font-size: 1.9rem;
color: #e74c3c;
font-weight: 700;
}

.featured-current-price {
font-size: 1.5rem;
color: #2c3e50;
font-weight: 700;
}

.featured-price-item {
display: flex;
justify-content: space-between;
margin-bottom: 0.3rem;
position: relative;
}

.price-item::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
border-bottom: 2px dotted #666;
z-index: 1;
}

.product-actions {
display: flex;
gap: 8px;
margin-top: auto;
}

.add-to-cart-btn, .view-details-btn {
flex: 1;
padding: 0.5rem;
border-radius: 8px;
font-size: 1.6rem;
font-weight: 600;
text-align: center;
text-decoration: none;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}

.add-to-cart-btn {
background: linear-gradient(135deg, #b08415 0%, #bf901a 100%);
color: white;
border: none;
}

.add-to-cart-btn:hover {
background: linear-gradient(135deg, #906802 0%, #c08a02 100%);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3);
}

.view-details-btn {
background: white;
color: #5b4d3b;
border: 1px solid #e0e0e0;
}

.view-details-btn:hover {
background: #f8f9fa;
border-color: #e9d66b;
color: #e9d66b;
transform: translateY(-2px);
}

.no-products-message {
grid-column: 1 / -1;
text-align: center;
padding: 3rem;
background: white;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.no-products-message i {
font-size: 3rem;
color: #bdc3c7;
margin-bottom: 1rem;
}

.no-products-message p {
color: #7f8c8d;
font-size: 1.5rem;
}

.view-all-container {
text-align: center;
margin-top: 3rem;
}

.view-all-btn {
display: inline-block;
padding: 0.8rem 2rem;
background: #5b4d3b;
color: #d8d2ba;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
border: 2px solid #cdc4a0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.view-all-btn:hover {
background: #d8d2ba;
color: #5b4d3b;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(233, 214, 107, 0.3);
}

/* نسخه موبایل */
@media (max-width: 768px) {
.about-row {
    flex-direction: column-reverse;
}

.about-text-col {
    padding: 30px 20px;
}

.about-img-col {
    height: 300px;
}

.about-title {
    font-size: 24px;
}

.about-description {
    font-size: 15px;
}

.btn-more {
    padding: 10px 25px;
    font-size: 15px;
}
.featured-title {
  font-size: 2rem;
}

.featured-subtitle {
  font-size: 1rem;
}

.featured-products-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.featured-product-image-container {
height: 280px; /* ارتفاع ثابت */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 0; /* حذف پدینگ */
background: #f8f9fa;
border-bottom: 1px solid #eee;
}
}

@media (max-width: 576px) {
.featured-products-section {
  padding: 3rem 1rem;
}

.featured-title {
  font-size: 1.8rem;
}

.featured-products-grid {
  grid-template-columns: 1fr;
}

.product-actions {
  flex-direction: column;
}

.infobox {
  flex-direction: column;
  gap: 5px;
  margin-bottom: 15px;
}
}

@media only screen and (max-width: 767px) {
  body {
      background-color: #f0f0f0;
      font-size: 16px;
  }

  p {
      padding: 10px;
  }

  h1 {
      font-size: 24px;
  }
  .productsImg{
      width: 100%;
      height: auto;
  }
  .pProduct{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

  }
  
}