.partner-main-container {
    width: 100%;
    position: relative;
}

.partner-hero-img-box {
    width: 100%;
}

.partner-hero-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.partner-main-title {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%);
    color: #fff;
    font-family: var(--kh-bold);
    font-size: 3rem;
    max-width: var(--default-max-spacing);
    text-align: center;
    width: 100%;
}

/*#region Partner Section*/
.sh-kh-partner-sctn2-container {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
    width: min(var(--default-spacing), var(--default-max-spacing));
    margin-inline: auto;
    margin-top: 50px;
}

.sh-kh-partner-sctn2-img-box {
    width: 100%;
    height: 520px;
}

.sh-kh-partner-sctn2-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.sh-kh-partner-sctn2-content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
    direction: rtl;
    text-align: center;
}

.sh-kh-partner-sctn2-main-title {
    font-family: var(--kh-bold);
    font-size: 2.2rem;
    width: 45%;
}

.sh-kh-partner-sctn2-para-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 15px;
   }

.sh-kh-partner-sctn2-p {
    font-family: var(--kh-reg);
    width: 50%;
    line-height: 30px;
    font-size: 1.05rem;
}

/*#endregion*/


/*#region City Partner*/

.sh-kh-city-partner-container {
    display: flex;
    column-gap: 40px;
    align-items: center;
    width: min(var(--default-spacing), var(--default-max-spacing));
    margin-inline: auto;
    margin-top: 100px;
}

.sh-kh-city-partner-content-container {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    text-align: right;
    direction: rtl;
}

.sh-kh-cp-main-title {
    font-size: 2rem;
    font-family: var(--kh-bold);
    width: 60%;
}

.sh-kh-cp-subtitle {
    font-family: var(--kh-reg);
    font-size: 1.05rem;
    width: 80%;
    line-height: 30px;
}

.sh-kh-city-partner-img-box {
    width: 45%;
}

.sh-kh-city-partner-img-box img {
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}


/*#endregion*/


/*#region Partner Form*/

.sh-kh-partner-form-outer-container {
    width: min(var(--default-spacing), var(--default-max-spacing));
    margin-inline: auto;
    margin-top: 100px;
    margin-bottom: 70px;
}

.sh-kh-partner-form-inner-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 30px;
    padding-inline: 20px;
    padding-block: 45px;
    background-color: #f7f7f7;
    text-align: right;
    align-items: center;
    direction: rtl;
    border-radius: 20px;
}

.sh-kh-partner-form-title {
    font-family: var(--kh-bold);

}

.sh-kh-partner-form-btn {
    border: none;
}

.sh-kh-partner-form-btn:hover {
    color: #000;
}

.sh-kh-partner-form-placholder-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    row-gap: 30px;
}

.sh-kh-partner-form-inputs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    column-gap: 15px;
}

.sh-kh-partner-input {
    border: none;
    border-bottom: 2px solid #f0f0f0;
    padding: 8px;
    background-color: #F9F9F9;
    outline: none;
    color: #1a1a1a;
}

.sh-kh-partner-input::placeholder {
    color: #b9c1c0;
}

.sh-kh-partner-textarea {
    height: 200px;
}

.sh-kh-partner-input:focus {
   background-color: #f0f0f0;
}

/* خط أخضر تحت الحقل وقت التركيز */
.sh-kh-partner-input:focus-visible {
    border-bottom-color: var(--pr-color);
}

/*#endregion*/


/*#region TimeLine*/



/*#endregion*/

/*#region Media Query*/

/*#region 1255px*/

@media(max-width: 1255px) {

    .partner-main-title {
        /*font-size: 2.5rem;*/
    }

    /*#region Partner Section*/


    .sh-kh-partner-sctn2-main-title {
        width: 60%;
    }

    .sh-kh-partner-sctn2-p {
        width: 70%;
    }

    /*#endregion*/

    /*#region City Partner*/


    .sh-kh-cp-main-title {
        width: 75%;
    }

    .sh-kh-cp-subtitle {
        width: 95%;
    }

    .sh-kh-city-partner-img-box  {
        width: 55%;
    }

    /*#endregion*/

    /*#region Partner Form*/


    /*#endregion*/
}


/*#endregion*/


/*#region 1040px*/

@media(max-width: 1040px) {

    .partner-main-title {
        font-size: 2.3rem;
    }

    .partner-hero-img-box {
        height: 40vh;
    }

}

/*#endregion*/


/*#region 1010px*/

@media(max-width: 1010px) {

    /*#region Partner Section*/


    .sh-kh-cp-main-title {
        font-size: 1.8rem;
    }

    /*#endregion*/

    /*#region Partner Form*/


    .sh-kh-partner-input {
        font-size: 0.9rem;
    }

    /*#endregion*/

}

/*#endregion*/


/*#region 978px*/

@media(max-width: 978px) {

    .partner-main-title {
        font-size: 2.5rem;
    }

    .partner-hero-img-box {
        height: 50vh;
    }

}
/*#endregion*/


/*#region 875px*/

@media(max-width: 875px) {

    /*#region Partner Section*/


    /*#endregion*/

    /*#region City Partner*/

    .sh-kh-city-partner-container {
        margin-top: 80px;
    }

    .sh-kh-city-partner-img-box {
        width: 70%;
    }

    .sh-kh-cp-main-title {
        width: 80%;
    }

    .sh-kh-cp-main-title {
        font-size: 1.6rem;
    }

    /*#endregion*/

    /*#region Partner Form*/


    .sh-kh-partner-input {
        font-size: 1rem;
    }

    .sh-kh-partner-form-inputs {
        grid-template-columns: repeat(2, 2fr);
        row-gap: 25px;
    }

    /*#endregion*/

}

/*#endregion*/


/*#region 820px*/

@media(max-width: 820px) {

    .partner-main-title {
        width: 100%;
        text-align: center;
    }
}
/*#endregion*/


/*#region 768px*/

@media(max-width: 768px) {

    .partner-main-title {
        font-size: 2.5rem;
    }

    /*#region Partner Section*/


    /*#endregion*/

    /*#region City Partner*/

    .sh-kh-city-partner-container {
        column-gap: 30px;
    }

    .sh-kh-city-partner-img-box {
        width: 90%;
    }

    .sh-kh-cp-main-title {
        width: 100%;
    }

    .sh-kh-city-partner-content-container {
        row-gap: unset;
    }

    .sh-kh-cp-main-title {
        font-size: 1.5rem;
    }

    /*#endregion*/

    /*#region Partner Form*/


    /*#endregion*/

}
/*#endregion*/


/*#region 678px*/

@media(max-width: 678px) {

    .partner-main-title {
        font-size: 2.4rem;
    }

    .partner-hero-img-box {
        height: 70vh;
    }

    /*#region Partner Section*/


    /*#endregion*/

    /*#region City Partner*/

    .sh-kh-city-partner-container {
        flex-direction: column-reverse;
        row-gap: 25px;
    }

    .sh-kh-city-partner-img-box {
        width: 100%;
    }

    /*#endregion*/

    /*#region Partner Form*/


    .sh-kh-partner-form-inputs {
        grid-template-columns: 1fr;
    }

    /*#endregion*/

}
/*#endregion*/


/*#region 578px*/

@media(max-width: 578px) {

    .partner-main-title {
        font-size: 2.5rem;
    }

    .partner-hero-img-box {
        height: 60vh;
    }


    /*#region Partner Section*/


    .sh-kh-partner-sctn2-main-title {
        width: 90%;
        font-size: 2rem;
    }

    .sh-kh-partner-sctn2-p {
        width: 85%;
    }

    /*#endregion*/

    /*#region City Partner*/


    .sh-kh-cp-main-title {
        width: 75%;
    }

    /*#endregion*/

    /*#region Partner Form*/


    /*#endregion*/

}
/*#endregion*/


/*#region 420px*/

@media(max-width: 430px) {

    /*#region Partner Section*/

    .sh-kh-partner-sctn2-img-box {
        height: 390px;
    }


    .sh-kh-partner-sctn2-main-title {
        font-size: 1.8rem;
    }

    .sh-kh-partner-sctn2-p {
        width: 90%;
    }

    /*#endregion*/

    /*#region City Partner*/


    .sh-kh-cp-main-title {
        width: 85%;
    }

    /*#endregion*/

    /*#region Partner Form*/

    .sh-kh-partner-form-outer-container {
        margin-bottom: 40px;
    }

    .sh-kh-partner-form-title {
        font-size: 1.6rem;
    }

    .sh-kh-partner-form-btn {
        width: 100%;
    }

    /*#endregion*/

}

/*#endregion*/


/*#region 375px*/

@media(max-width: 375px) {

    /*#region Partner Section*/


    .sh-kh-partner-sctn2-main-title {
        font-size: 1.8rem;
    }

    .sh-kh-partner-sctn2-p {
        width: 90%;
    }

    /*#endregion*/

    /*#region City Partner*/


    .sh-kh-cp-main-title {
        width: 100%;
    }

    /*#endregion*/

    /*#region Partner Form*/


    .sh-kh-partner-form-title {
        text-align: center;
        font-size: 1.5rem;
    }



    /*#endregion*/

}

/*#endregion*/

/*#endregion*/


/*#region حركة لصفحة كن شريكنا (إضافة 23-10-2026، CSS بس)*/

/* كل شي هون محصور بصفحة كن شريكنا (الصفحة يللي فيها .sh-kh-partner-sctn2-container)، لأن الهيرو مشترك مع صفحات تانية */

/* الأقسام يللي بتدخل من الجنب ما لازم تعمل scroll أفقي وهي برّا الشاشة. clip (مش hidden) مشان ما يخرّب أي sticky */
.sh-page:has(.sh-kh-partner-sctn2-container) {
    overflow-x: clip;
}

.sh-page:has(.sh-kh-partner-sctn2-container) .partner-hero-img-box {
    overflow: hidden;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

@keyframes kh-p-hero-zoom {
    from {
        scale: 1.08;
    }

    to {
        scale: 1;
    }
}

@keyframes kh-p-hero-title {
    from {
        opacity: 0;
        translate: 0 24px;
    }

    to {
        opacity: 1;
        translate: none;
    }
}

@keyframes kh-p-rise {
    from {
        opacity: 0;
        translate: 0 30px;
    }

    to {
        opacity: 1;
        translate: none;
    }
}

@keyframes kh-p-from-right {
    from {
        opacity: 0;
        translate: 50px 0;
    }

    to {
        opacity: 1;
        translate: none;
    }
}

@keyframes kh-p-from-left {
    from {
        opacity: 0;
        translate: -50px 0;
    }

    to {
        opacity: 1;
        translate: none;
    }
}

@keyframes kh-p-img-open {
    from {
        clip-path: inset(8% 8% 8% 8% round 20px);
    }

    to {
        clip-path: inset(0 0 0 0 round 20px);
    }
}

@keyframes kh-p-img-drift {
    from {
        translate: 0 -4%;
    }

    to {
        translate: 0 4%;
    }
}

/* لمعة بتمرق على زر الإرسال كل شوي، مشان العين تروح عليه */
@keyframes kh-p-btn-shine {
    0%, 75% {
        left: -60%;
    }

    100% {
        left: 130%;
    }
}

/* زر الإرسال */
.sh-kh-partner-form-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.sh-kh-partner-form-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    z-index: -1;
    pointer-events: none;
}

.sh-kh-partner-form-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(91, 225, 30, 0.35);
}

/* الحقول: الخط الأخضر بيمتد من النص لما تكتب فيها */
.sh-kh-partner-input {
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.sh-kh-partner-input:focus-visible {
    box-shadow: 0 2px 0 0 var(--pr-color);
}

/* عنوان القسم التاني (شريك بمدينتك): الكلمة التانية بأخضر الهوية */
.sh-kh-cp-main-title span + span {
    color: #3BA811;
}

@media (prefers-reduced-motion: no-preference) {

    .sh-page:has(.sh-kh-partner-sctn2-container) .partner-hero-img-box img {
        animation: kh-p-hero-zoom 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .sh-page:has(.sh-kh-partner-sctn2-container) .partner-main-title {
        animation: kh-p-hero-title 0.9s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .sh-kh-partner-form-btn::after {
        animation: kh-p-btn-shine 4s ease-in-out infinite;
    }

    @supports (animation-timeline: view()) {

        /* الصورة الكبيرة بتنفتح من النص، وجوّاها الصورة بتتحرك أبطأ من الصفحة */
        .sh-kh-partner-sctn2-img-box {
            overflow: hidden;
            border-radius: 20px;
            animation: kh-p-img-open linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 40%;
        }

        .sh-kh-partner-sctn2-img-box img {
            scale: 1.1;
            animation: kh-p-img-drift linear both;
            animation-timeline: view(block);
            animation-range: cover 0% cover 100%;
        }

        /* العنوان والفقرات بيطلعوا ورا بعض */
        .sh-kh-partner-sctn2-main-title,
        .sh-kh-partner-sctn2-p,
        .sh-kh-partner-form-title,
        .sh-kh-partner-form-placholder-box,
        .sh-kh-partner-form-btn {
            animation: kh-p-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 80%;
        }

        /* قسم الشريك بالمدينة: النص من اليمين والصورة من اليسار */
        .sh-kh-city-partner-content-container {
            animation: kh-p-from-right linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 35%;
        }

        .sh-kh-city-partner-img-box {
            animation: kh-p-from-left linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 35%;
        }

        /* صندوق الفورم بيتعبّى بلون أفتح شوي وبيطلع */
        .sh-kh-partner-form-inner-container {
            animation: kh-p-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
    }
}

/*#endregion*/

/*#region إضافة جديدة 28-10-2026: طلب الشراكة على واتساب الإدارة (بدل فورم الإيميل)*/

.sh-kh-par-wa {
    width: min(var(--default-spacing), var(--default-max-spacing));
    margin: 100px auto 80px;
    direction: rtl;
    text-align: start;
}

.sh-kh-par-wa-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding: clamp(28px, 4vw, 56px);
    border-radius: 28px;
    background-color: var(--sec-color);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

/* توهج أخضر ونقش نقاط بالخلفية */
.sh-kh-par-wa-card::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -10%;
    width: 60%;
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(91, 225, 30, 0.2), transparent);
    z-index: -1;
    pointer-events: none;
}

.sh-kh-par-wa-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(to left, transparent 30%, #000);
    mask-image: linear-gradient(to left, transparent 30%, #000);
    z-index: -1;
    pointer-events: none;
}

.sh-kh-par-wa-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sh-kh-par-wa-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--sec-color);
    background-color: var(--pr-color);
    box-shadow: 0 0 0 8px rgba(91, 225, 30, 0.14), 0 0 30px rgba(91, 225, 30, 0.35);
    margin-bottom: 22px;
}

.sh-kh-par-wa-badge svg,
.sh-kh-par-wa-chat-avatar svg,
.sh-kh-par-wa-time svg {
    display: block;
}

.sh-kh-par-wa-eyebrow {
    margin: 0 0 8px;
    font-family: var(--kh-reg);
    font-size: 0.95rem;
    color: var(--pr-color);
}

.sh-kh-par-wa-title {
    margin: 0;
    font-family: var(--kh-bold);
    font-weight: normal;
    font-size: clamp(1.7rem, 2.6vw, 2.5rem);
    line-height: 1.35;
    color: #fff;
}

.sh-kh-par-wa-title span {
    color: var(--pr-color);
}

.sh-kh-par-wa-text {
    margin: 14px 0 0;
    max-width: 46ch;
    font-family: var(--kh-reg);
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.75);
}

.sh-kh-par-wa-actions {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
}

.sh-kh-par-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 14px;
    background-color: var(--pr-color);
    color: var(--sec-color);
    font-family: var(--kh-bold);
    font-size: 1.05rem;
    text-decoration: none;
    box-shadow: 0 14px 30px -14px rgba(91, 225, 30, 0.8);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sh-kh-par-wa-btn:hover,
.sh-kh-par-wa-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -14px rgba(91, 225, 30, 1);
}

.sh-kh-par-wa-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.sh-kh-par-wa-phone {
    font-family: var(--kh-bold);
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    color: #fff;
    unicode-bidi: isolate;
}

/* شكل محادثة واتساب: الرسالة الجاهزة */
.sh-kh-par-wa-chat {
    border-radius: 22px;
    overflow: hidden;
    background-color: #EFEAE2;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
    transform: rotate(-1.5deg);
    transition: transform 0.4s ease;
}

.sh-kh-par-wa-card:hover .sh-kh-par-wa-chat {
    transform: rotate(0deg);
}

.sh-kh-par-wa-chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background-color: #0B3B37;
    color: #fff;
}

.sh-kh-par-wa-chat-avatar {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: var(--pr-color);
    color: var(--sec-color);
}

.sh-kh-par-wa-chat-name {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.sh-kh-par-wa-chat-name b {
    font-family: var(--kh-bold);
    font-weight: normal;
    font-size: 0.95rem;
}

.sh-kh-par-wa-chat-name small {
    font-family: var(--kh-reg);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    text-align: end;
    unicode-bidi: isolate;
}

.sh-kh-par-wa-chat-body {
    padding: 22px 16px 12px;
    background-image: radial-gradient(rgba(0, 34, 33, 0.06) 1px, transparent 1px);
    background-size: 16px 16px;
}

/* الفقاعة الخضرا (رسالة مرسلة) */
.sh-kh-par-wa-bubble {
    position: relative;
    margin-inline-start: auto;
    width: fit-content;
    max-width: 92%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 22px;
    border-radius: 0 14px 14px 14px;
    background-color: #D9FDD3;
    color: #111B21;
    font-family: var(--kh-reg);
    font-size: 0.95rem;
    line-height: 1.5;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.sh-kh-par-wa-bubble::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    border-top: 0 solid transparent;
    border-right: 8px solid #D9FDD3;
    border-bottom: 10px solid transparent;
}

.sh-kh-par-wa-bubble span:first-child {
    font-family: var(--kh-bold);
}

/* الحقول الفاضية يللي بيعبيها الزائر */
.sh-kh-par-wa-bubble span:not(:first-child)::after {
    content: "";
    display: inline-block;
    width: 90px;
    margin-inline-start: 6px;
    border-bottom: 1.5px dashed rgba(17, 27, 33, 0.3);
    transform: translateY(-3px);
}

.sh-kh-par-wa-time {
    position: absolute;
    left: 10px;
    bottom: 5px;
    color: #53BDEB;
}

.sh-kh-par-wa-chat-note {
    margin: 0;
    padding: 0 16px 16px;
    font-family: var(--kh-reg);
    font-size: 0.82rem;
    color: #54656F;
    text-align: center;
}

/* حركة ظهور خفيفة لما يوصل الزائر للسيكشن */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .sh-kh-par-wa-card {
            animation: sh-kh-par-wa-in linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 45%;
        }
    }
}

@keyframes sh-kh-par-wa-in {
    from { opacity: 0; transform: translateY(40px) scale(0.98); }
}

@media (max-width: 900px) {
    .sh-kh-par-wa-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .sh-kh-par-wa-chat {
        transform: none;
    }
}

@media (max-width: 600px) {
    .sh-kh-par-wa {
        margin-block: 70px 60px;
    }

    .sh-kh-par-wa-card {
        padding: 26px 18px;
        border-radius: 22px;
    }

    .sh-kh-par-wa-btn {
        width: 100%;
        justify-content: center;
    }

    .sh-kh-par-wa-actions {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-kh-par-wa-chat {
        transform: none;
        transition: none;
    }
}

/*#endregion*/