.hero-section {
  position: relative;
  width: 100%;
  height: 100vh; /* طول الشاشة بالكامل */
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 115%;
  object-fit: cover; /* يخلي الفيديو يغطي الشاشة */
  z-index: -2;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* تعتيم خفيف */
  z-index: -1;
}

.hero-content {
  color: #fff;
  text-align: center;
  z-index: 2;
}


  .hero-content h1 {
    font-size: 8rem;
    font-weight: 900;
  }

  .hero-content p {
    font-size: 1.5rem;
    max-width: 700px;
    margin: 20px auto;
  }

  .hero-buttons .btn {
    padding: 8px 60px;
    font-weight: 600;
    border-radius: 0;
    margin: 0 8px;
  }

  .btn-white {
    background-color: #fff;
    color: #000;
    border: 1px solid #fff;
  }

  .btn-outline-white {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
  }

  .btn-white:hover {
    background-color: #eaeaea;
    color: #000;
  }

  .btn-outline-white:hover {
    background-color: #fff;
    color: #000;
  }

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

    .hero-content p {
      font-size: 1rem;
      padding: 0 15px;
    }

    .hero-buttons .btn {
      display: block;
      width: 100%;
      margin: 10px 0;
    }
  }

  /* gallery */
  .gallery-section {
    padding: 50px 0;
  }

  .gallery-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 20px;
  }

  /* grid */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 أعمدة */
    gap: 15px;
  }
.gallery-grid .item{
  overflow: hidden;

}
.item {
      position: relative;
      
      background: #0169B2;
      border-radius: 10px;
      
      cursor: pointer;
    }

    .ripple {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      background: rgba(255, 255, 255, 0.658);
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(0);
      pointer-events: none;
      z-index: 2324;
    }

    .animate {
      animation: ripple-grow 2s ease-out forwards;
    }

    @keyframes ripple-grow {
      to {
        transform: translate(-50%, -50%) scale(100);
        opacity: 0;
      }
    }
  .gallery-img {
   
    /* object-fit: cover; */
    border-radius: 0;
transition: all .3s ease-in-out;
  }
.gallery-img:hover{
  transform: scale(1.2) rotate(8deg);
}
  /* products */

  .products-header h3 {
    font-weight: 700;
    font-size: 1.5rem;
  }

  .products-header p {
    color: #666;
    margin: 0;
    font-size: 0.9rem;
  }

  .product-card {

    
    position: relative;
    text-align: center;
    transition: box-shadow 0.3s;
  }
  .product-card:hover .overlay{
    opacity: 1;
    z-index: 3;
  }
   .product-card:hover .details-btn{
    opacity: 1;
    bottom: 80px;left: 0px;

  }
 
.product-card .image-box{
  display: block;
  height: fit-content;
aspect-ratio: .7/1;
  transition: all 0.3s ease-in-out;
}
.product-card .overlay{
  background:#00000040;
opacity: 0;
  transition: all 0.3s ease-in-out;
}
.details-btn{
  bottom: -20px;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  z-index: 32;
  height: 55px;
}
    .product-card .details-btn .btn-text{
   height: 100%;
   line-height: 45px;

  }
   .product-card .details-btn .icon,.details-response .icon{
line-height: .8;
   }
  .product-card .details-btn i,.details-response .icon{
    font-size: 10px;
  }
  .product-card .swiper-slide{
  aspect-ratio: .7/1;
}
  @media (max-width:991px) {
    .product-card .swiper-button-next,
.product-card .swiper-button-prev {
display: block !important;
height: 50px;
width: 50px;
border-radius: 50%;
background-color: #cecece2b;
}
    .product-card .swiper-button-next::after,
.product-card .swiper-button-prev::after {
font-size: 20px;
color: rgb(0, 0, 0);
line-height: 50px;
}
  }
.product-card .swiper-button-next,
.product-card .swiper-button-prev {
  color: #fcf8f8;
 z-index: 4;
  transition: 0.3s;
  position: absolute;
  display: none;
  font-size: 12px;
}

.product-card:hover .swiper-button-next,
.product-card:hover .swiper-button-prev {
  display: block;
}
.discount-box{
  background-color: #F44848;
  font-weight: bold;
  text-align: center;
    padding: 3px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 21;
}
.discount-box span{
  color: white;

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

  .product-name {
    font-size: 1rem;
    margin: 10px 0;
  }

  .price {
    font-size: 1rem;
    font-weight: bold;
    color: #000;
  }

  .old-price {
    text-decoration: line-through;
    color: #999;
    margin: 0 5px;
  }

  .discount {
    color: red;
    font-size: 0.9rem;
  }

  /* أيقونة الكارد */
  .product-icon {
    position: absolute;
    top: 34px;
    right: 32px;
    font-size: 1.2rem;
    color: #666;
    cursor: pointer;
    transition: color 0.3s;
  }

  .product-icon:hover {
    color: red;
  }

.product-header {
  display: flex;
  justify-content: space-between; /* يخليهم قصاد بعض */
  align-items: center; /* يظبطهم في النص */
}

.product-name {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.price {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.special-offers {
  background-color: #f7f7f7; /* نفس الخلفية الرمادية */
}

.offer-card .icon i {
  color: #000; /* لون الأيقونة أسود زي الصورة */
}

.our-promise {
  background-color: #f7f7f7; /* الخلفية الرمادية للقسم */
}

.our-promise p {
  font-size: 16px; /* حجم النص مثل الصورة */
  color: #676767;
  font-weight: 500;
}


.testimonials {
  background-color: #f7f7f7; /* الخلفية الرمادية */
}

.testimonial-item {
  min-height: 200px;
}
/* testmonials */
.swiper.opinions{
  height: fit-content;
}
.swiper-pagination-bullet-active {
  background: #869791 !important; 
}