/* 🎨 السلايدر الرئيسي */
    .custom-slider {
      position: relative;
      overflow: hidden;
      width: 100%;
      max-width: 950px; /* أقصى عرض */
      margin-top: 20px;
      border-radius: 15px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    }

    /* 📸 حاوية الصور */
    .custom-slides {
      display: flex;
      transition: transform 0.5s ease-in-out;
      width: 100%;
    }

    /* 🖼️ الصور داخل السلايدر */
    .custom-slides img {
      width: 100%;
      flex: 0 0 100%;
      max-width: 100%;
      object-fit: cover;
      display: flex;
    }

    /* ⚪ النقاط أسفل السلايدر */
    .custom-dots {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
    }

    .custom-dot {
      width: 12px;
      height: 12px;
      background: #bbb;
      border-radius: 50%;
      cursor: pointer;
      transition: background 0.3s;
    }

    .custom-dot.active {
      background: #222;
    }

/* تفاصيل ومكونات العطور*/


    /* حاوية رئيسية */
.perfume-card-container {
     
      padding: 20px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      font-family: "Tajawal", sans-serif;
      line-height: 1.8;
      animation: fadeIn 1.2s ease;
    }

    /* حركات */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
    }

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
  }

@keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-50px); }
      to { opacity: 1; transform: translateX(0); }
    }

    /* اسم الشركة */
.perfume-company {
      text-align: center;
      font-size: 22px;
      font-weight: bold;
      margin-top: 10px;
      margin-bottom: 15px;
      color: rgba(0,0,0,0.4);
      margin-bottom: 15px;
      animation: slideUp 1s ease;
    }

    /* اسم العطر */
.perfume-name-ar {
      text-align: center;
      font-size: 28px;
      font-weight: bold;
      margin: 5px 0;
      animation: slideUp 1.2s ease;
    }

.perfume-name-en {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: #555;
      margin-bottom: 20px;
      animation: slideUp 1.4s ease;
    }

    /* فاصل شفاف */
.perfume-divider {
      height: 1px;
      background: rgba(0,0,0,0.1);
      margin: 20px 0;
    }

    /* قسم الحجم والتوجه */
.perfume-details {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

.perfume-detail-box {
      padding: 15px 25px;
      border-radius: 12px;
      background: #f9f9f9;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      min-width: 120px;
    }

.perfume-size {
      animation: slideInRight 1.5s ease;
    }

.perfume-type {
      animation: slideInLeft 1.5s ease;
    }

    /* النص الترويجي */
.perfume-description {
      text-align: justify;
      padding: 0 15px;
      margin-bottom: 20px;
      color: #333;
      font-size: 16px;
      animation: fadeIn 2s ease;
    }

    /* العناوين */
.perfume-section-title {
      text-align: center;
      font-size: 22px;
      font-weight: bold;
      margin: 20px 0 10px;
      color: #222;
      animation: slideUp 1.8s ease;
    }

.perfume-subtitle {
      font-size: 18px;
      font-weight: bold;
      margin: 15px 0 8px;
      text-align: center;
      color: #444;
      animation: slideUp 2s ease;
    }

    /* أماكن المكونات */
.perfume-notes {
      text-align: center;
      padding: 11px;
      min-height: 40px;
      border: 2px dashed rgba(0,0,0,0.2);
      border-radius: 10px;
      margin-bottom: 10px;
      color: #666;
      font-size: 20px;
      animation: fadeIn 2.2s ease;
    }

    /* تجاوب */
@media (max-width: 600px) {
      .perfume-details {
        flex-direction: column;
        gap: 15px;
      }
    }