image-box – אופק אסטרין

				
					/* עיצוב המכולה הראשית של הבונוס */
.bonus-image-box .elementor-image-box-wrapper {
    position: relative; /* חשוב בשביל שכבות ותמונה */
    background: linear-gradient(135deg, #6d28d9 0%, #a855f7 100%); /* גרדיאנט סגול */
    border-radius: 25px; /* פינות מעוגלות */
    padding: 24px 24px 24px 0px;
    overflow: visible; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex; /* מאפשר לשלוט במיקום התמונה והטקסט */
    align-items: center; /* יישור אנכי למרכז */
}

/* תמונת הבונוס */
.bonus-image-box .elementor-image-box-img {
    flex-shrink: 0;
    z-index: 2;
            transform: translateX(-60px); /* הזזה שמאלה */
}

/* התמונה עצמה */
.bonus-image-box .elementor-image-box-img img {
    width: 560px; /* ניתן לשנות בהתאם לגודל התמונה שלכם */
    height: auto;
    filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.4));

}

/* תגית "בונוס #1" בפינה הימנית העליונה */
.bonus-image-box .elementor-image-box-wrapper::after {
    content: "בונוס #1";
    position: absolute;
    top: -12px;
    right: 24px;
    background-color: #fff;
    color: #6d28d9;
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    font-family: "Heebo", sans-serif;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* התאמה לנייד - שהתמונה תעבור למרכז למעלה */
@media (max-width: 767px) {
    .bonus-image-box .elementor-image-box-wrapper {
        flex-direction: column;
        text-align: center;
        padding-top: 60px;
    }
    .bonus-image-box .elementor-image-box-img img {
        transform: translateY(-50px); /* שומר את האפקט הקיים */
        margin-bottom: -30px;
        margin-left: 0; /* מבטל את ההזזה למובייל */
    }
    .bonus-image-box .elementor-image-box-content {
        text-align: center;
        padding-right: 0;
    }
}

				
					/* עיצוב המכולה הראשית של הבונוס */
.number-image-box .elementor-image-box-wrapper {
    position: relative; /* חשוב בשביל שכבות ותמונה */
    background: #FFF; /* גרדיאנט סגול */
    border-radius: 24px; /* פינות מעוגלות */
    padding: 12px 24px 24px 24px;
    overflow: visible; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.number-image-box .elementor-image-box-title {
    color: #E33122 !important;
}

.number-image-box .elementor-image-box-description {
    color: #000 !important;
}


/* תגית "בונוס #1" בפינה הימנית העליונה */
.number-image-box .elementor-image-box-wrapper::after {
    content: "1";
    position: absolute;
    top: -36px;
    right: 18px;
    color: #E33122;
    opacity: 0.3;
    font-size: 60px;
    font-weight: bold;
    font-family: "Heebo", sans-serif;
}

/* התאמה לנייד - שהתמונה תעבור למרכז למעלה */
@media (max-width: 767px) {
    .number-image-box .elementor-image-box-wrapper {
        flex-direction: column;
        text-align: center;
        padding-top: 60px;
    }
    .number-image-box .elementor-image-box-img img {
        transform: translateY(-50px); /* שומר את האפקט הקיים */
        margin-bottom: -30px;
        margin-left: 0; /* מבטל את ההזזה למובייל */
    }
    .number-image-box .elementor-image-box-content {
        text-align: center;
        padding-right: 0;
    }
}

				
					/* מכולה ראשית - הגדרות בסיסיות */
.slanted-value-card .elementor-image-box-wrapper {
    background-color: #ffffff;
    padding: 0px 24px 36px 24px; /* ריווח תחתון גדול עבור התגית */
    border-radius: 24px;
    transition: transform 0.3s ease;
}

.slanted-value-card .elementor-image-box-img {
transform: translatey(-80px); /* הזזה שמאלה */}

.slanted-value-card .elementor-image-box-content {
    margin-top: -96px;
}

/* עיצוב הכותרת */
.slanted-value-card .elementor-image-box-title {
    color: #333333 !important;
    margin-bottom: 12px !important;
}

/* עיצוב הטקסט (תיאור) */
.slanted-value-card .elementor-image-box-description {
    color: #666666 !important;
}

/* יצירת תגית "שווי הבונוס" בתחתית */
/* אנחנו משתמשים ב-before על תוכן התיבה כדי שהתגית לא תיחתך מה-clip-path */
.slanted-value-card .elementor-image-box-content::after {
    content: "שווי הבונוס: 1499₪"; /* שנו את המלל והמחיר כאן */
    position: absolute;
    bottom: 0;
    transform: translate(50%, 50%); /* ממרכז את התגית */
    background: linear-gradient(90deg, #ffb800 0%, #ff5c00 100%); /* גרדיאנט כתום-אדום */
    color: #ffffff;
    padding: 12px 36px;
    font-weight: bold;
        font-family: "Heebo", sans-serif;
    font-size: 18px;
    border-radius: 12px; /* עיגול קל רק למעלה */
    white-space: nowrap;
    box-shadow: 0 -5px 15px rgba(255, 92, 0, 0.3);
}

/* אפקט ריחוף עדין */
.slanted-value-card:hover .elementor-image-box-wrapper {
    transform: translateY(-5px);
}

/* התאמה לנייד */
@media (max-width: 767px) {
 
 .slanted-value-card .elementor-image-box-content::after {
    padding: 8px 24px;
    font-size: 14px;
    border-radius: 8px; /* עיגול קל רק למעלה */
    box-shadow: 0 -5px 15px rgba(255, 92, 0, 0.3);
}
   
   .slanted-value-card .elementor-image-box-img {
transform: translatey(-60px); /* הזזה שמאלה */}
}

				
					code

				
					/* הקופסה */
.image-box-hole .elementor-image-box-wrapper{
    position: relative;
    padding: 140px 60px 80px;
    text-align: center;
    z-index: 2;
}

/* הצורה של הכרטיס */
.image-box-hole .elementor-image-box-wrapper::before{
    content:"";
    position:absolute;
    inset:0;
    
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5100 2383' fill='none'%3E%3Cpath d='M5100 2133C5100 2271.07 4988.07 2383 4850 2383H250C111.929 2383 0 2271.07 0 2133V250C0 111.929 111.929 0 250 0H1700C1838.07 0 1945.25 116.658 2001.2 242.886C2094.44 453.252 2305.08 600 2550 600C2794.92 600 3005.56 453.252 3098.8 242.886C3154.75 116.658 3261.93 0 3400 0H4850C4988.07 0 5100 111.929 5100 250V2133Z' fill='%231B1B1B'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;

    filter: drop-shadow(0 0 0 1px #3a3a3a); /* מסגרת אפורה עדינה */
    
    z-index:-1;
}

/* כותרת */
.image-box-hole .elementor-image-box-title{
    color:#E33122 !important;
}

/* תיאור */
.image-box-hole .elementor-image-box-description{
    color:#d1d1d1 !important;
}

.image-box-hole .elementor-image-box-img img{
    margin-top: -140px;
    border-radius: 50px;
}

.image-box-hole .elementor-image-box-content{
    margin-top: -60px;
}

/* מובייל */
@media (max-width:767px){

.image-box-hole .elementor-image-box-wrapper{
    padding:100px 30px 60px;
}

.image-box-hole .elementor-image-box-img img{
    margin-top: -130px;
    border-radius: 50px;
}

/* התאמת התוכן */
.image-box-hole .elementor-image-box-content{
    margin-top:-90px;
}

.image-box-hole .elementor-image-box-wrapper::before{
    content:"";
    position:absolute;
    inset:0;
    
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5100' height='5638' viewBox='0 0 5100 5638' fill='none'%3E%3Cpath d='M5100 5388C5100 5526.07 4988.07 5638 4850 5638H250C111.929 5638 0 5526.07 0 5388V250C0 111.929 111.929 0 250 0H1700C1838.07 0 1945.25 116.658 2001.2 242.886C2094.44 453.252 2305.08 600 2550 600C2794.92 600 3005.56 453.252 3098.8 242.886C3154.75 116.658 3261.93 0 3400 0H4850C4988.07 0 5100 111.929 5100 250V5388Z' fill='%231B1B1B'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;

    filter: drop-shadow(0 0 0 1px #3a3a3a); /* מסגרת אפורה עדינה */
    
    z-index:-1;
}

}

				
					.img-box-under-bg .elementor-image-box-wrapper {
    display: flex !important;
    align-items: stretch !important;
    gap: 0;
}

.img-box-under-bg .elementor-image-box-img {
    flex: 0 0 30% !important; 
    max-width: 40% !important;
    margin: 0 !important;
    display: flex;
}

.img-box-under-bg .elementor-image-box-img img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover; 
    border-radius: 12px 0 0 12px;
}

.img-box-under-bg .elementor-image-box-content {
    flex: 1; 
    margin-left: -12px; /* מושך את כל תיבת הטקסט שמאלה מעל התמונה */
    background-color: #1B1B1B !important;
    padding: 24px;
    z-index: 2;
    border-radius: 12px; /* תיקון קל לעיגול הפינות לחיבור מושלם */
    border-right: 5px solid #E33122;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.img-box-under-bg .elementor-image-box-title {
    color: #E33122 !important;
}

/* התאמה למובייל (טאבלט וסמארטפון) */
@media (max-width: 767px) {
    /* 1. הפיכת המכולה לטור ויישור למרכז */
    .img-box-under-bg .elementor-image-box-wrapper {
        flex-direction: column !important;
        background-color: #1B1B1B !important;
        border-radius: 12px;
        padding: 0;
        overflow: hidden;
        align-items: center !important; /* מיישר את התמונה והטקסט לאמצע */
    }

    /* 2. הגדרות התמונה במובייל - למעלה ובמרכז */
    .img-box-under-bg .elementor-image-box-img {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        order: 2; /* תמונה ראשונה למעלה */
        display: flex;
        justify-content: center;
    }

    .img-box-under-bg .elementor-image-box-img img {
        height: 180px !important; /* גובה התמונה במובייל - ניתן לשינוי */
        width: 100% !important;
        object-fit: cover;
        /* פינות עגולות רק למעלה */
        border-radius: 12px 12px 0 0 !important;
        border-top: 5px solid #E33122; /* אופציונלי: פס אדום מפריד בין התמונה לטקסט */
    }

    /* 3. הגדרות הטקסט במובייל - מתחת לתמונה */
    .img-box-under-bg .elementor-image-box-content {
        order: 1; /* טקסט שני למטה */
        margin-left: 0 !important; /* ביטול ההסטה מהדסקטופ */
        width: 100%;
        padding: 30px 20px;
        text-align: center; /* אופציונלי: מרכז את הטקסט במובייל */
        background-color: transparent !important;
        border-right: none; /* מבטל את הפס האדום בצד או מעביר אותו למקום אחר */
        
    }
}

				
					.pill-image-box .elementor-image-box-wrapper {
    background-color: #d61a21;
    padding: 8px 8px 8px 28px; /* ריווח אחיד יותר */
    border-radius: 100px;
    color: #ffffff;
    transition: all 0.3s ease;
    display: inline-flex !important; /* גורם לתיבה להתכווץ לפי גודל התוכן ולא להימתח לכל הרוחב */
    flex-direction: row-reverse; 
    align-items: center;
    direction: rtl;
    min-width: 200px; /* מבטיח שהתיבה לא תהיה קטנה מדי */
}

.pill-image-box .elementor-image-box-img {
    margin: 0 !important;
    flex: 0 0 auto !important; /* מונע מהתמונה להימתח */
    display: flex;
}

.pill-image-box .elementor-image-box-img img {
    width: 45px; /* הקטנתי מעט להתאמה טובה יותר לקפסולה */
    height: 45px;
    object-fit: cover;
    border-radius: 50%;
}

.pill-image-box .elementor-image-box-content {
    padding-right: 10px; /* זה המרחק המדויק בין התמונה לטקסט */
    text-align: right;
    flex: 0 0 auto !important; /* מונע מהטקסט לתפוס את כל השטח הריק */
}

.pill-image-box .elementor-image-box-title {
    color: #ffffff !important;
    margin: 0 !important;
    font-size: 16px;
    font-weight: bold;
    line-height: 1; /* מצמצם רווח אנכי */
}

.pill-image-box .elementor-image-box-description {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px;
    margin: 0 !important;
    line-height: 1.2;
}

				
					code

				
					code

				
					code

				
					code

				
					code

				
					code

				
					code

				
					code

				
					code

תיבת תמונה בונוס

תיבת תמונה

תיבת תמונה

תיבת תמונה

תיבת תמונה עם חור

תיבת תמונה

תיבת תמונה

תיבת תמונה

תיבת תמונה

תיבת תמונה

תיבת תמונה

תיבת תמונה

תיבת תמונה

תיבת תמונה

תיבת תמונה