/* ── Elementor wrapper: overflow only, no height changes ── */
.elementor-widget-omar_expertise_cards,
.elementor-widget-omar_expertise_cards > .elementor-widget-container {
    overflow: visible !important;
    width: 100% !important;
}

.omar-expertise-widget-instance { overflow: visible; width: 100%; }
.omar-expertise-widget-instance * { box-sizing: border-box; }

/* ── main_container: fill full viewport ── */
.omar-expertise-widget-instance .main_container {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    background-color: var(--omar-section-bg, #f0f0f0);
    overflow: visible;
    padding: 120px 24px 60px;
}

.omar-expertise-widget-instance .head-container { font-family: 'Inter', sans-serif; font-size: clamp(36px, 4.2vw, 70px); line-height: 1.05; font-weight: 700; position: relative; z-index: 99999; color: var(--omar-heading-color, #121358); text-align: center; margin: 0; padding: 0 20px; pointer-events: none; flex: 0 0 auto; }
.omar-expertise-widget-instance .projects-container { width: 1320px; max-width: 90vw; background-color: transparent; display: flex; flex-direction: column; border-radius: 64px; padding: 40px; justify-content: center; align-items: center; transform-origin: center center; overflow: visible; position: relative; z-index: 2; }
.omar-expertise-widget-instance .projects-bg { position: absolute; inset: 0; background-color: var(--omar-box-bg, #121358); background-image: url('../../../uploads/2026/07/BACKGROUND-in-png-multi-size-and-multi-colors-FILE-01-1-1.png'); background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 64px; z-index: -1; transform-origin: center center; pointer-events: none; }
/* Elementor lazy-load blanks background-images with `background-image:none !important`
   until a container is flagged .e-lazyloaded. The GSAP pinning on this widget stops
   that flag from being set reliably, so force this decorative background to always
   render over the red box (high specificity + !important beats the lazy-load rule). */
.omar-expertise-widget-instance.omar-expertise-widget-instance.omar-expertise-widget-instance .projects-bg.projects-bg.projects-bg { background-image: url('../../../uploads/2026/07/BACKGROUND-in-png-multi-size-and-multi-colors-FILE-01-1-1.png') !important; }
.omar-expertise-widget-instance .projects-row1, .omar-expertise-widget-instance .projects-row2 { width: auto; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: nowrap; overflow: visible; }
.omar-expertise-widget-instance .projects-row1 { margin-top: 78px; }
.omar-expertise-widget-instance .projects-row2 { margin-top: 16px; }

/* Card sizes are controlled by Elementor widget controls — these are fallback defaults only */
.omar-expertise-widget-instance .project-card { min-height: 0; height: 364px; width: 328px; flex: 0 0 328px; font-size: clamp(26px, 2.5vw, 48px); line-height: 1.12; font-weight: 600; color: #fff; text-align: center; display: flex; position: relative; z-index: 2; border-radius: 24px; align-items: center; justify-content: center; text-decoration: none; padding: 20px; background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: var(--omar-card-bg); overflow: hidden; }
.omar-expertise-widget-instance .project-card .project-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; pointer-events: none; }
.omar-expertise-widget-instance .project-card::before { content: ""; position: absolute; inset: 0; width: 100%; z-index: 1; height: 100%; background-color: rgba(0, 0, 0, var(--omar-overlay, 0.5)); border-radius: 24px; }
.omar-expertise-widget-instance .project-card span { position: relative; z-index: 2; }
.omar-expertise-widget-instance .projects-row1 .card1 { z-index: 10; }

@media (max-height: 900px) and (min-width: 1025px) { .omar-expertise-widget-instance .main_container { padding-top: 90px; padding-bottom: 90px; } .omar-expertise-widget-instance .project-card { height: clamp(280px, 32vh, 364px); } }

/* ── Viewport-height responsive: compact spacing so Row 2 always fits ── */
/* These override Elementor's padding/margin controls with !important       */
@media (max-height: 1100px) and (min-width: 768px) {
    .omar-expertise-widget-instance .main_container { padding-top: 60px !important; padding-bottom: 40px !important; }
    .omar-expertise-widget-instance .projects-row1 { margin-top: 40px !important; }
    .omar-expertise-widget-instance .projects-container { padding: 24px !important; }
}
@media (max-height: 900px) and (min-width: 768px) {
    .omar-expertise-widget-instance .main_container { padding-top: 40px !important; padding-bottom: 30px !important; }
    .omar-expertise-widget-instance .projects-row1 { margin-top: 24px !important; }
    .omar-expertise-widget-instance .projects-container { padding: 16px !important; }
    .omar-expertise-widget-instance .projects-row2 { margin-top: 12px !important; }
}

@media (max-width: 1400px) { .omar-expertise-widget-instance .projects-container { max-width: calc(100vw - 96px); } }
@media (max-width: 1024px) { .omar-expertise-widget-instance .main_container { padding: 60px 16px; } .omar-expertise-widget-instance .projects-container { width: 100%; max-width: 100%; border-radius: 36px; padding: 24px; } .omar-expertise-widget-instance .projects-bg { border-radius: 36px; } .omar-expertise-widget-instance .projects-row1, .omar-expertise-widget-instance .projects-row2 { width: 100%; gap: 14px; } .omar-expertise-widget-instance .project-card { width: calc((100% - 42px) / 4); flex-basis: calc((100% - 42px) / 4); height: 240px; max-width: none; } }
@media (max-width: 767px) { .elementor-widget-omar_expertise_cards, .elementor-widget-omar_expertise_cards > .elementor-widget-container { min-height: 0 !important; } .omar-expertise-widget-instance .main_container { height: auto !important; min-height: auto !important; padding: 40px 12px !important; overflow: visible !important; } .omar-expertise-widget-instance .head-container { font-size: 34px !important; } .omar-expertise-widget-instance .projects-container { padding: 16px !important; border-radius: 24px !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; } .omar-expertise-widget-instance .projects-bg { border-radius: 24px !important; } .omar-expertise-widget-instance .projects-row1, .omar-expertise-widget-instance .projects-row2 { flex-direction: column !important; flex-wrap: nowrap !important; gap: 12px !important; width: 100% !important; overflow: visible !important; } .omar-expertise-widget-instance .projects-row1 { margin-top: 24px !important; } .omar-expertise-widget-instance .projects-row2 { margin-top: 12px !important; } .omar-expertise-widget-instance .project-card { width: 100% !important; flex: 0 0 auto !important; flex-basis: auto !important; height: 200px !important; min-height: 200px !important; font-size: 20px !important; border-radius: 18px !important; padding: 16px !important; margin-left: 0 !important; } .omar-expertise-widget-instance .project-card::before { border-radius: 18px !important; } }