/* Abu Namous v2.3.1 — move hero watermark logo to the lower-right text side */

/* Put the logo under the right-side text, inside the decorative circle/border area. */
.anm-hero-slider{
    position:relative;
    overflow:hidden;
}

.anm-hero-watermark{
    position:absolute;
    z-index:1;
    inset-inline-end:clamp(30px, 6vw, 90px);
    inset-block-end:clamp(36px, 8vw, 110px);
    inset-inline-start:auto;
    top:auto;
    left:auto;
    transform:none;
    width:clamp(190px, 22vw, 300px);
    max-height:none;
    opacity:.12;
    filter:brightness(0) invert(1);
}

.anm-hero-watermark__image{
    width:100%;
    height:auto;
    object-fit:contain;
}

/* Keep text readable and above the decorative logo. */
.anm-hero-copy,
.anm-slider-controls,
.anm-slider-track,
.anm-hero-visual{
    position:relative;
    z-index:3;
}

/* On RTL we want it visually bottom-right under the text block. */
html[dir="rtl"] .anm-hero-copy{
    position:relative;
    z-index:4;
}

/* Tablet: still keep it on the text side, just slightly smaller. */
@media (max-width: 980px){
    .anm-hero-watermark{
        inset-inline-end:24px;
        inset-block-end:54px;
        width:clamp(160px, 20vw, 230px);
        opacity:.11;
    }
}

/* Mobile: place it lower and centered behind the CTA/text area so it doesn't collide. */
@media (max-width: 820px){
    .anm-hero-watermark{
        inset-inline-end:50%;
        inset-block-end:26px;
        transform:translateX(50%);
        width:clamp(145px, 34vw, 200px);
        opacity:.10;
    }
}

@media (max-width: 640px){
    .anm-hero-watermark{
        inset-block-end:18px;
        width:min(38vw, 170px);
        opacity:.095;
    }
}