/* Desktop hero text rhythm. The eyebrow, logo (Elementor image widget e6700001), title and
   description sit together at the top with even spacing; the buttons sit alone at the bottom,
   level with the bottom of the image beside them. Phones and tablets keep their own layout. */
@media (min-width: 1025px) {
    /* Selectors match the hero's own Elementor custom CSS (post-18, also !important) and outrank it. */
    .elementor-18 .elementor-element.elementor-element-79712149 .elementor-element.hero-copy {
        gap: 0 !important;
    }

    .elementor-18 .elementor-element.elementor-element-79712149 .elementor-element.hero-copy > .elementor-element.hero-eyebrow {
        transform: none !important;
        margin: 0 !important;
    }

    .elementor-18 .elementor-element.elementor-element-79712149 .elementor-element.hero-copy > .elementor-element.hero-logo {
        margin: 22px 0 0 !important;
    }

    .elementor-18 .elementor-element.elementor-element-79712149 .elementor-element.hero-copy > .elementor-element.hero-title {
        margin: 14px 0 0 !important;
    }

    .elementor-18 .elementor-element.elementor-element-79712149 .elementor-element.hero-copy > .elementor-element.hero-description {
        margin: 8px 0 0 !important;
    }

    .elementor-18 .elementor-element.elementor-element-79712149 .elementor-element.hero-copy > .elementor-element.hero-actions {
        margin-top: auto !important;
        padding-top: 32px;
    }
}

/* The hero's top wave pattern is removed on every screen (desktop, tablet, phone). On desktop the
   top bar (inc/topbar.php) sits in its place. */
html body .elementor-18 .elementor-element.elementor-element-79712149::before,
html body .elementor-18 .elementor-element.elementor-element-bf652ff::before {
    display: none !important;
}

/* «نصنع تجارب تترك أثرًا»: larger on every screen. */
html body .elementor-18 .elementor-element.elementor-element-79712149 .elementor-element.hero-description :is(.elementor-widget-container, p) {
    font-size: clamp(21px, calc(1.2vw + 14px), 30px) !important; /* phone ~21 → desktop 30 */
    line-height: 1.7 !important;
    font-family: var(--sanam-font-heading) !important; /* Kufam, the same font as the title «إعلام يسمو» */
    font-weight: 400 !important;
}

/* The Sanam logo in the hero text column is hidden (every screen). */
html body .elementor-18 .elementor-element.elementor-element-79712149 .elementor-element.hero-logo {
    display: none !important;
}

/* Desktop: the text column sits in the vertical middle of the picture column (picture + client logos). */
@media (min-width: 1025px) {
    html body .elementor-18 .elementor-element.elementor-element-79712149 .hero-layout {
        align-items: center !important;
    }
    html body .elementor-18 .elementor-element.elementor-element-79712149 .elementor-element.hero-copy {
        align-self: center !important;
        height: auto !important;
        justify-content: center !important;
    }
    html body .elementor-18 .elementor-element.elementor-element-79712149 .elementor-element.hero-copy > .elementor-element.hero-title {
        margin: 18px 0 0 !important;
    }
    html body .elementor-18 .elementor-element.elementor-element-79712149 .elementor-element.hero-copy > .elementor-element.hero-actions {
        margin-top: 0 !important;
        padding-top: clamp(28px, 4vh, 44px);
    }
}

/* Phones: the text column is centred (eyebrow, title, description and buttons). */
@media (max-width: 767px) {
    html body .elementor-18 .elementor-element.elementor-element-79712149 .elementor-element.hero-copy {
        align-items: center !important;
        text-align: center !important;
    }
    html body .elementor-18 .elementor-element.elementor-element-79712149 .elementor-element.hero-copy > .elementor-element {
        align-self: center !important;
        text-align: center !important;
        margin-inline: auto !important;
    }
    html body .elementor-18 .elementor-element.elementor-element-79712149 .hero-copy :is(.elementor-heading-title, .elementor-widget-container, p) {
        text-align: center !important;
        justify-content: center !important;
    }
    html body .elementor-18 .elementor-element.elementor-element-79712149 .elementor-element.hero-actions {
        justify-content: center !important;
        width: 100% !important;
    }
}