.specialBanner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 60px 0;
    align-items: center;
}

.specialBanner .innerCard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100% - 40px);
    margin: auto;
}

.specialBanner .innerCard .title {
    font-size: 30px;
    color: var(--primary);
    font-weight: 700;
}

.specialBanner .innerCard .title.accent {
    color: var(--accent);
    font-weight: 700;
}

.specialBanner .innerCard img {
    width: 180px;
}

.specialBanner .innerCard img.big {
    width: 300px;
}

.specialBanner .innerCard .text {
    font-size: var(--largeFont);
    text-align: center;
    color: #656565;
}


.specialBanner .innerCard.promoCard {
  position: relative;
  border-radius: 22px;
  /* טריק: שכבת לבן בפנים + גרדיאנט בחוץ למסגרת */
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #6D5DF6 0%, #FA4AA2 50%, #FFB154 100%) border-box;
  border: 3px solid transparent;
  box-shadow:
    0 12px 28px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease, background-position .8s ease;
  background-size: 100% 100%, 200% 200%; /* לאנימציה עדינה ב-hover */
}

/* הילה רכה עדינה מאחור */
.specialBanner .innerCard.promoCard::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 26px;
  background: radial-gradient(60% 60% at 70% 20%, rgba(109,93,246,.20), transparent 60%),
              radial-gradient(50% 50% at 20% 80%, rgba(250,74,162,.16), transparent 60%);
  filter: blur(8px);
  z-index: -1;
}

/* נקודות נצנוץ קטנות בפינות – מוטיב תואם אייקונים */
.specialBanner .innerCard.promoCard::after {
  content: "";
  position: absolute;
  top: 10px; left: 10px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #FFE28A;
  box-shadow:
    18px 6px 0 0 #B6F1FF,
    36px -2px 0 0 #FFE28A;
  opacity: .9;
}

/* מצב הובר – שדרוג עדין */
.specialBanner .innerCard.promoCard:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 34px rgba(0,0,0,0.16),
    0 3px 10px rgba(0,0,0,0.08);
  background-position: 100% 0, 0% 0; /* נע ת׳גרדיאנט קלות */
}

.specialBanner .innerCard.creditInstallmentsBanner {
    display: flex;
    align-items: center;
    padding: 18px 22px;
    border-radius: 16px;

    /* גרדיאנט רקע */
    background: linear-gradient(
        135deg,
        rgba(2, 122, 202, 0.12),
        rgba(103, 47, 135, 0.12)
    );

    /* בורדר גרדיאנט */
    border: 2px solid transparent;
    background-image:
        linear-gradient(
            135deg,
            rgba(2, 122, 202, 0.12),
            rgba(103, 47, 135, 0.12)
        ),
        linear-gradient(
            135deg,
            #027ACA,
            #672F87,
            #f08d01
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;

    /* עומק עדין */
    box-shadow:
        0 8px 20px rgba(2, 122, 202, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}


.specialBanner .innerCard.creditInstallmentsBanner .title {
    font-weight: 700;
    color: white;
    text-align: center;
}

.specialBanner .innerCard.creditInstallmentsBanner .text {
    color: white;
    text-align: center;
}


/* Laptop Screen 1280px */
@media only screen and (min-width: 1280px) {
    .specialBanner {
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
    }
    .specialBanner .innerCard {
        margin: 0 20px;
        flex-direction: row;
        width: 922px;
    }
    .specialBanner .innerCard .textDiv {
        width: 550px;
        height: 120px;
        display: block;
    }
    .specialBanner .innerCard .title.big {
        font-size: 40px;
    }
}