body {
      background: #eef3f7;
      font-family: 'Cairo', sans-serif;
      padding-bottom: 80px;
    }


    .hero-title {
      font-size: 26px;
      font-weight: bold;
      margin: 20px 0;
    }


    .fixed-bottom {
      font-size: 18px;
      font-weight: bold;
      padding: 14px;
      border: none;
    }

    .section-title {
      font-size: 20px;
      font-weight: 700;
      text-align: center;
      margin: 25px 0 15px;
      color: #0d6efd;
      position: relative;
    }

   
    .section-title::after {
      content: "";
      display: block;
      width: 60px;
      height: 3px;
      background: #0d6efd;
      margin: 8px auto 0;
      border-radius: 10px;
    }

  
    .section-title {
      animation: fadeInDown 0.6s ease-in-out;
    }

    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

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

    
    .price-banner {
      text-align: center;
      padding: 15px;
      margin-bottom: 15px;
      border-radius: 12px;
      background: #fff;
      border: 2px dashed #198754;
      animation: glow 2s infinite;
    }

    @keyframes glow {
      0% {
        box-shadow: 0 0 5px rgba(25, 135, 84, .3)
      }

      50% {
        box-shadow: 0 0 18px rgba(25, 135, 84, .6)
      }

      100% {
        box-shadow: 0 0 5px rgba(25, 135, 84, .3)
      }
    }

    .offer-text {
      color: #e74c3c;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .price {
      direction: rtl;
      display: flex;
      justify-content: center;
      gap: 10px;
      align-items: center;
    }

    .price .new {
      font-size: 26px;
      font-weight: bold;
    }

    .price .old {
      text-decoration: line-through;
      color: red;
      font-size: 14px;
    }


    .radio-group {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin: 15px 0;
    }

    .radio-box {
      position: relative;
      width: 110px;
      padding: 12px;
      border-radius: 12px;
      background: #f1f1f1;
      text-align: center;
      cursor: pointer;
      transition: .3s;
    }

    .radio-box input {
      display: none;
    }

    .radio-box:has(input:checked) {
      background: #198754;
      color: #fff;
      transform: scale(1.05);
    }

    .check {
      position: absolute;
      top: 6px;
      right: 8px;
      opacity: 0;
    }

    .radio-box:has(input:checked) .check {
      opacity: 1;
    }


    .input-icon {
      padding-right: 40px;
    }

    .icon-right {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
    }


    .gallery-img {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
      margin-bottom: 10px;
    }

    .faq-title {
      text-align: center;
      font-weight: bold;
      color: #0d6efd;
      margin-bottom: 20px;
      position: relative;
    }

    .faq-title::after {
      content: "";
      display: block;
      width: 60px;
      height: 3px;
      background: #0d6efd;
      margin: 8px auto;
      border-radius: 10px;
    }


    .faq-box {
      max-width: 700px;
      margin: auto;
    }


    .faq-item {
      background: #fff;
      border-radius: 12px;
      margin-bottom: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }

   
    .faq-question {
      width: 100%;
      text-align: right;
      padding: 15px;
      border: none;
      background: #f8f9fa;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s;
    }

    .faq-question:hover {
      background: #e9ecef;
    }


    .faq-answer {
      display: none;
      padding: 15px;
      color: #555;
      line-height: 1.7;
      animation: fadeIn 0.3s ease-in-out;
    }

  
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-5px);
      }

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


    .faq-item.active .faq-answer {
      display: block;
    }


    .gallery-img {
      width: 100%;
      border-radius: 12px;
      cursor: pointer;
      transition: 0.3s;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    }

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


    .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .lightbox img {
      max-width: 90%;
      max-height: 80%;
      border-radius: 12px;
    }


    .close {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 35px;
      color: #fff;
      cursor: pointer;
    }


    .nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      font-size: 40px;
      color: #fff;
      cursor: pointer;
    }

    .nav.left {
      left: 20px;
    }

    .nav.right {
      right: 20px;
    }

.flutter-btn {
  animation: flutter 2s infinite;
}

@keyframes flutter {
  0%   { transform: translateX(0); }

  10%  { transform: translateX(-6px); }
  20%  { transform: translateX(6px); }
  30%  { transform: translateX(-4px); }
  40%  { transform: translateX(4px); }

  50%  { transform: translateX(0); }

  60%  { transform: translateX(0); }
  70%  { transform: translateX(0); }

  80%  { transform: translateX(-5px); }
  90%  { transform: translateX(5px); }

  100% { transform: translateX(0); }
}
.shipping-bar {
  background: #ffffff;
  color: #0d6efd;
  text-align: center;
  font-weight: bold;
  padding: 8px;
  font-size: 14px;
  border-bottom: 2px solid #eaeaea;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

@keyframes shake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-8px); }
  30%  { transform: translateX(8px); }
  45%  { transform: translateX(-6px); }
  60%  { transform: translateX(6px); }
  75%  { transform: translateX(-3px); }
  90%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
.shake {
  animation: shake 0.5s ease;
}
		.floating {
  animation: floatUpDown 2s ease-in-out infinite;
}

@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* طالع لفوق */
  }
  100% {
    transform: translateY(0); /* راجع */
  }
}