.elementor-31731 .elementor-element.elementor-element-3f97c044{--display:flex;}.elementor-31731 .elementor-element.elementor-element-3c4b98c3{text-align:start;}/* Start custom CSS for text-editor, class: .elementor-element-3c4b98c3 *//* ===== GHALLA.MA — خلطات التوابل · Thème Épices & Feu ===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Tajawal:wght@300;400;500;700&display=swap');

:root {
  --spice-red:        #c0392b;
  --spice-red-light:  #e05c42;
  --spice-orange:     #d4580a;
  --spice-orange-lt:  #f07830;
  --spice-turmeric:   #d4a017;
  --spice-turmeric-lt:#f0c040;
  --spice-brown:      #7a3520;
  --spice-brown-soft: #a04830;
  --spice-cream:      #fff8f2;
  --spice-pale:       #fff2ea;
  --spice-text:       #3a1508;
  --spice-text-soft:  #7a3520;
}

/* ======== BOX PRINCIPALE ======== */
.ghalla-premium-box {
  background:
    radial-gradient(ellipse at 88% 8%,  rgba(208,88,10,0.09)  0%, transparent 48%),
    radial-gradient(ellipse at 12% 88%, rgba(192,57,43,0.07)  0%, transparent 48%),
    radial-gradient(ellipse at 50% 50%, rgba(212,160,23,0.04) 0%, transparent 70%),
    linear-gradient(150deg, #fffaf6 0%, #fff5ee 55%, #fffaf4 100%);
  border: 1.5px solid rgba(208,88,10,0.18);
  border-radius: 26px;
  padding: 50px 46px;
  max-width: 820px;
  margin: 40px auto;
  position: relative;
  overflow: hidden;
  font-family: 'Tajawal', sans-serif;
  box-shadow:
    0 4px 8px  rgba(122,53,32,0.07),
    0 24px 64px rgba(122,53,32,0.13),
    0 1px 0    rgba(255,255,255,0.95) inset;
  animation: boxReveal 0.9s cubic-bezier(0.16,1,0.3,1) both;
}

/* Bande feu animée en haut */
.ghalla-premium-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg,
    var(--spice-red),
    var(--spice-orange-lt),
    var(--spice-turmeric-lt),
    var(--spice-orange-lt),
    var(--spice-red)
  );
  background-size: 200% 100%;
  animation: topBarFlow 3.5s linear infinite;
  z-index: 2;
}

/* Orbe chaleur bas-gauche */
.ghalla-premium-box::after {
  content: '';
  position: absolute;
  bottom: -75px; left: -75px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(208,88,10,0.11) 0%,
    rgba(192,57,43,0.04) 40%,
    transparent 70%
  );
  animation: floatOrb 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Orbe curcuma haut-droit */
.ghalla-orb-top {
  position: absolute;
  top: -55px; right: -55px;
  width: 210px; height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(212,160,23,0.13) 0%,
    rgba(240,192,64,0.04) 40%,
    transparent 70%
  );
  animation: floatOrb 5.5s 1.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.ghalla-premium-box > * {
  position: relative;
  z-index: 1;
}

@keyframes boxReveal {
  from { opacity: 0; transform: translateY(32px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes topBarFlow {
  0%   { background-position: 0%   0%; }
  100% { background-position: 200% 0%; }
}

@keyframes floatOrb {
  0%, 100% { transform: translateY(0)    scale(1);    }
  50%       { transform: translateY(-18px) scale(1.07); }
}

/* ======== BADGE ======== */
.ghalla-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #fff0e6, #ffe4d2);
  color: var(--spice-orange);
  border: 1.5px solid rgba(208,88,10,0.22);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 8px 22px;
  border-radius: 50px;
  margin-bottom: 28px;
  box-shadow:
    0 4px 16px rgba(208,88,10,0.13),
    0 1px 0    rgba(255,255,255,0.8) inset;
  animation: badgeSlide 0.6s 0.2s cubic-bezier(0.16,1,0.3,1) both;
}

.ghalla-badge::before {
  content: '🌶️';
  font-size: 1rem;
}

@keyframes badgeSlide {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0);     }
}

/* ======== TITRE ======== */
.ghalla-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--spice-text);
  line-height: 1.35;
  margin-bottom: 20px;
  text-align: right;
  direction: rtl;
  animation: fadeUp 0.7s 0.35s ease both;
}

.ghalla-title::after {
  content: '';
  display: block;
  height: 3px;
  width: 70px;
  background: linear-gradient(90deg, var(--spice-red-light), var(--spice-turmeric-lt));
  margin: 12px 0 0 auto;
  border-radius: 4px;
  animation: lineGrow 0.9s 1s ease both;
}

@keyframes lineGrow {
  from { width: 0;    opacity: 0; }
  to   { width: 70px; opacity: 1; }
}

/* ======== INTRO ======== */
.ghalla-intro {
  color: var(--spice-text-soft);
  font-size: 1.04rem;
  line-height: 1.9;
  margin-bottom: 32px;
  text-align: right;
  direction: rtl;
  animation: fadeUp 0.7s 0.5s ease both;
}

/* ======== SOUS-TITRE ======== */
.ghalla-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--spice-orange);
  margin-bottom: 24px;
  text-align: right;
  direction: rtl;
  animation: fadeUp 0.7s 0.7s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ======== LISTE FEATURES ======== */
.ghalla-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ghalla-features li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  direction: rtl;
  background: linear-gradient(135deg,
    rgba(240,120,48,0.08) 0%,
    rgba(255,255,255,0.88) 100%
  );
  border: 1.5px solid rgba(208,88,10,0.16);
  border-radius: 14px;
  padding: 18px 20px;
  transition:
    transform     0.3s ease,
    box-shadow    0.3s ease,
    border-color  0.3s ease,
    background    0.3s ease;
  animation: itemSlide 0.65s ease both;
}

.ghalla-features li:nth-child(1) { animation-delay: 0.85s; }
.ghalla-features li:nth-child(2) { animation-delay: 1.00s; }
.ghalla-features li:nth-child(3) { animation-delay: 1.15s; }
.ghalla-features li:nth-child(4) { animation-delay: 1.30s; }

@keyframes itemSlide {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0);    }
}

.ghalla-features li:hover {
  transform: translateX(-5px) translateY(-2px);
  background: linear-gradient(135deg,
    rgba(240,120,48,0.16) 0%,
    rgba(255,248,240,0.97) 100%
  );
  border-color: var(--spice-orange-lt);
  box-shadow:
    0 8px 28px rgba(208,88,10,0.14),
    0 2px 8px  rgba(208,88,10,0.08);
}

/* ======== ICÔNE ✦ ======== */
.ghalla-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--spice-red), var(--spice-orange-lt));
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  box-shadow: 0 4px 14px rgba(192,57,43,0.32);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-top: 2px;
  animation: iconPop 0.5s ease both;
}

.ghalla-features li:nth-child(1) .ghalla-icon { animation-delay: 1.05s; }
.ghalla-features li:nth-child(2) .ghalla-icon { animation-delay: 1.20s; }
.ghalla-features li:nth-child(3) .ghalla-icon { animation-delay: 1.35s; }
.ghalla-features li:nth-child(4) .ghalla-icon { animation-delay: 1.50s; }

@keyframes iconPop {
  from { opacity: 0; transform: scale(0.4) rotate(-30deg); }
  to   { opacity: 1; transform: scale(1)   rotate(0deg);   }
}

.ghalla-features li:hover .ghalla-icon {
  transform: scale(1.18) rotate(12deg);
  box-shadow: 0 6px 22px rgba(224,92,66,0.5);
}

/* ======== TEXTE DES ITEMS ======== */
.ghalla-features li > div {
  color: var(--spice-text-soft);
  font-size: 0.97rem;
  line-height: 1.75;
  text-align: right;
}

.ghalla-features li > div strong {
  display: block;
  color: var(--spice-brown);
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 4px;
}

/* ======== RESPONSIVE ======== */
@media (max-width: 600px) {
  .ghalla-premium-box {
    padding: 34px 22px;
    border-radius: 20px;
  }
  .ghalla-title {
    font-size: 1.6rem;
  }
  .ghalla-features li {
    padding: 15px 15px;
  }
}/* End custom CSS */