/* Client logos in the hero (inc/hero-clients.php): a moving strip right under the big picture and
   exactly as wide as it, with a thin line over it. Cards: gold border only. */
html body .hero-photo:has(> .sanam-hero-clients),
html body .hero-photo:has(> .sanam-hero-clients) > .elementor-widget-container { flex-wrap: wrap !important; }

/* The picture column had a fixed height (desktop): let it grow so the strip isn't cut off. */
html body .elementor-18 .elementor-element.elementor-element-79712149 .hero-visual:has(.sanam-hero-clients) {
    height: auto !important;
    overflow: visible !important;
}
html body .elementor-18 .elementor-element.elementor-element-79712149 .hero-layout:has(.sanam-hero-clients) { overflow: visible !important; }

.sanam-hero-clients {
    position: relative;
    z-index: 3;
    flex: 0 0 100%;
    width: 100%;
    margin: clamp(10px, 1vw, 14px) 0 0;
    scroll-margin-top: 90px;
    line-height: normal;
}

.sanam-hero-clients__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 clamp(10px, 1vw, 14px);
    color: #fff;
    font: 400 clamp(17px, 1.25vw, 22px)/1.5 var(--sanam-font-accent);
}
html[dir="rtl"] .sanam-hero-clients__title { direction: rtl; } /* the picture column itself is left-to-right */
.sanam-hero-clients__title::before {
    content: "";
    flex: none;
    width: 30px;
    height: 2px;
    background: #e4aa58;
}

.sanam-hero-clients__viewport {
    overflow: hidden;
    direction: ltr; /* the track always starts at the left edge, whatever the page language */
    position: relative;
    padding-block: 2px; /* room for the card borders */
    border-radius: clamp(14px, 1.2vw, 18px); /* the logos go in and out through a rounded edge, like the cards */
    /* Both ends: the logos slide into the background, as if into a slot carved in it. */
    -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / .45), #000 12%, #000 88%, rgb(0 0 0 / .45));
    mask-image: linear-gradient(to right, rgb(0 0 0 / .45), #000 12%, #000 88%, rgb(0 0 0 / .45));
}
.sanam-hero-clients__slot {
    position: relative;
}
.sanam-hero-clients__slot::before,
.sanam-hero-clients__slot::after {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    z-index: 2;
    width: clamp(70px, 9vw, 130px);
    pointer-events: none;
    border-radius: clamp(14px, 1.2vw, 18px);
    /* Soft at the top and bottom too, so it reads as depth, not a dark box. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
/* A soft shadow inside each end: the logos sink into the background. */
.sanam-hero-clients__slot::before {
    left: 0;
    background: linear-gradient(to right, rgb(52 16 18 / .9), rgb(56 18 20 / .5) 35%, rgb(60 19 21 / .15) 70%, transparent);
}
.sanam-hero-clients__slot::after {
    right: 0;
    background: linear-gradient(to left, rgb(52 16 18 / .9), rgb(56 18 20 / .5) 35%, rgb(60 19 21 / .15) 70%, transparent);
}

.sanam-hero-clients__track {
    display: flex;
    width: max-content;
    animation: sanam-hero-clients-move var(--sanam-clients-time, 36s) linear infinite reverse; /* Arabic: moves right */
}
html:not([dir="rtl"]) .sanam-hero-clients__track { animation-direction: normal; } /* English: moves left */
.sanam-hero-clients:hover .sanam-hero-clients__track { animation-play-state: paused; }
/* With JavaScript: the script moves the track and it can be dragged. */
.sanam-hero-clients.is-js .sanam-hero-clients__track { animation: none; }
.sanam-hero-clients.is-js .sanam-hero-clients__viewport { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sanam-hero-clients.is-dragging .sanam-hero-clients__viewport { cursor: grabbing; }

@keyframes sanam-hero-clients-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.sanam-hero-clients__list {
    display: flex;
    gap: clamp(10px, 1vw, 14px);
    margin: 0;
    padding: 0;
    padding-right: clamp(10px, 1vw, 14px); /* same gap between the two halves */
    list-style: none;
}

.sanam-hero-clients__card {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    --w: clamp(88px, 6.6vw, 122px);
    width: var(--w);
    height: calc(var(--w) * .82);
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding: clamp(6px, .5vw, 9px);
    border: 1px solid #e4aa58; /* whole pixels: a 1.5px line breaks up while it moves */
    background-clip: padding-box;
    border-radius: clamp(14px, 1.2vw, 18px);
    background: transparent;
    transition: border-color .25s ease;
}
.sanam-hero-clients__card:hover { border-color: #e4aa58; }

/* Beats the hero's own picture rules (they size every <img> inside .hero-photo). */
html body .elementor-18 .elementor-element.elementor-element-79712149 .hero-photo .sanam-hero-clients__card img,
html body .hero-photo .sanam-hero-clients__card img {
    display: block !important;
    width: 100% !important; /* the logo fills its card (keeping its shape) */
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    transform: none !important;
    box-shadow: none !important;
    -webkit-user-drag: none;
    user-select: none;
}

@media (max-width: 767px) {
    .sanam-hero-clients { margin-top: 14px; }
    .sanam-hero-clients__card { --w: 82px; padding: 6px; border-radius: 13px; }
    .sanam-hero-clients__viewport, .sanam-hero-clients__slot::before, .sanam-hero-clients__slot::after { border-radius: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .sanam-hero-clients__track { animation: none; }
    .sanam-hero-clients__viewport { overflow-x: auto; }
}

/* Hero bottom pattern: one row only (the lower one). */
html body .elementor-18 .elementor-element.elementor-element-79712149::after {
    background-image: url("hero-bottom-pattern-one.svg?v=1") !important;
}

/* Room for the bottom pattern under the client logos: the hero grows a little at the bottom, so the
   pattern row sits below the cards instead of behind them. */
html body .elementor-18 .elementor-element.elementor-element-79712149:has(.sanam-hero-clients) {
    padding-bottom: 120px !important;
}

/* Desktop: the hero content starts right under the top bar (about one scroll step higher). */
@media (min-width: 1025px) {
    html body .elementor-18 .elementor-element.elementor-element-79712149:has(.sanam-hero-clients) { padding-top: 8px !important; }
    html body .elementor-18 .elementor-element.elementor-element-79712149:has(.sanam-hero-clients) .hero-layout { padding-top: 0 !important; }
}
@media (max-width: 767px) {
    html body .elementor-18 .elementor-element.elementor-element-79712149:has(.sanam-hero-clients) {
        padding-bottom: 92px !important;
    }
}