/* ================================================================
   Kahatein Brand — Color overrides for the Sopot template
   Load AFTER sopot.css and sopot-responsive.css
   ================================================================ */

/* Same Arabic face as organization Filament panel */
@font-face {
    font-family: 'Neo Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/NeoSansArabic.ttf') format('truetype');
}
@font-face {
    font-family: 'Neo Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/NeoSansArabicMedium.ttf') format('truetype');
}
@font-face {
    font-family: 'Neo Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/NeoSansArabicBold.ttf') format('truetype');
}

/* ── 1. Brand tokens ─────────────────────────────────────────── */
:root {
    /* Primary: Kahatein dark navy-teal (logo arch & Arabic text) */
    --sopot-base:     #1A3556;
    --sopot-base-rgb: 26, 53, 86;

    /* Dark headings: keep near-black but shift to brand navy */
    --sopot-black:     #1A3556;
    --sopot-black-rgb: 26, 53, 86;

    /* Gold accent (logo hand) */
    --kh-gold:  #C4935A;
    --kh-teal:  #4B8B7A;

    /* Aliases for the kh-lang dropdown component */
    --color-petrol-900: #1A3556;
    --color-ink:        #1A3556;
    --color-ink-mute:   #6b7a8d;
    --color-line:       rgba(26, 53, 86, 0.18);
    --color-cream:      #f5f3ef;
    --color-cream-soft: #faf8f5;
}

/* ── 2. Section taglines → gold instead of navy ──────────────── */
.section-title__tagline {
    color: var(--kh-gold) !important;
}
.section-title__tagline::before,
.section-title__tagline::after {
    background-color: var(--kh-gold) !important;
}

/* ── 3. Hover teal for links/icons ───────────────────────────── */
a:hover { color: var(--kh-teal); }
.main-menu__list > li > a:hover,
.main-menu__list > li.current > a {
    color: var(--kh-gold);
}

/* ── 4. Progress bar fill colour ─────────────────────────────── */
.bar-fill { background: var(--kh-teal) !important; }
.bar-inner { background: rgba(75, 139, 122, 0.15) !important; }

/* ── 5. Causes donate-btn strip colour ───────────────────────── */
.causes-one__donate-btn-box { background: var(--kh-teal); }

/* ── 6. Support-us section background strip ──────────────────── */
.support-us .thm-btn { background-color: var(--kh-teal); }
.support-us .thm-btn:hover { background-color: var(--kh-gold); }

/* ── 7. Skill bar fill ───────────────────────────────────────── */
.bar-fill { background: var(--kh-teal) !important; }

/* ── 8. Feature icon color ───────────────────────────────────── */
.feature-one__icon span { color: var(--kh-gold); }

/* ── kh-lang trigger: re-colour for white nav background ─────── */
.main-menu .kh-lang-trigger,
.stricky-header .kh-lang-trigger {
    color: var(--color-ink);
    background: rgba(26, 53, 86, 0.06);
    border-color: rgba(26, 53, 86, 0.18);
}
.main-menu .kh-lang-trigger:hover,
.stricky-header .kh-lang-trigger:hover {
    background: rgba(26, 53, 86, 0.12);
    border-color: rgba(26, 53, 86, 0.35);
}
.main-menu .kh-lang.is-open .kh-lang-trigger,
.stricky-header .kh-lang.is-open .kh-lang-trigger {
    background: rgba(26, 53, 86, 0.12);
    border-color: rgba(26, 53, 86, 0.4);
    box-shadow: 0 0 0 3px rgba(26, 53, 86, 0.1);
}
/* flag SVG shadow adapts to dark nav background */
.main-menu .kh-lang-flag-svg,
.stricky-header .kh-lang-flag-svg { box-shadow: 0 0 0 1px rgba(26,53,86,0.25); }

/* ================================================================
   kh-lang Language-Switcher Component
   Copied from resources/css/app.css and adapted for this context
   ================================================================ */
.kh-lang {
    position: relative;
    display: inline-flex;
    align-items: center;
    --kh-lang-menu-width: 12.5rem;
    margin-inline-start: 0.75rem;
    margin-inline-end: 1rem; /* space before Donate button */
}
.main-menu .main-header__btn,
.stricky-header .main-header__btn {
    margin-inline-start: 0.25rem;
}

.kh-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.1rem;
    padding: 0.25rem 0.5rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 9999px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    line-height: 1;
    user-select: none;
    color: #fff;
}
.kh-lang-trigger:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.6);
}
.kh-lang.is-open .kh-lang-trigger {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.7);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
}

.kh-lang-flag-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.kh-lang-flag-emoji .kh-lang-flag-svg {
    width: 1.15rem;
    height: auto;
    display: block;
    aspect-ratio: 2 / 1;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
}

/* Dropdown panel */
.kh-lang-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    inset-inline-end: 0;
    width: var(--kh-lang-menu-width);
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 0.85rem;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 18px 40px -12px rgba(26, 53, 86, 0.28),
        0 6px 16px -8px rgba(26, 53, 86, 0.14);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.96);
    transform-origin: top center;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1), visibility 0.18s;
    z-index: 9999;
}
.kh-lang.is-open .kh-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.kh-lang-menu-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.85rem 0.5rem;
    background: linear-gradient(180deg, var(--color-cream-soft) 0%, #fff 100%);
    border-bottom: 1px solid var(--color-line);
    color: var(--color-ink-mute);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.kh-lang-menu-header svg { color: var(--color-petrol-900); opacity: 0.7; }

.kh-lang-list {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
}

.kh-lang-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border-radius: 0.6rem;
    color: var(--color-ink);
    transition: all 0.18s ease;
    cursor: pointer;
    text-align: start;
    background: transparent;
    border: 0;
    appearance: none;
    font-family: inherit;
}
.kh-lang-option:hover { background: rgba(26, 53, 86, 0.06); }
.kh-lang-option.is-active {
    background: linear-gradient(135deg, rgba(26,53,86,0.07) 0%, rgba(75,139,122,0.05) 100%);
}

.kh-lang-option-flag {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cream);
    border: 1px solid var(--color-line);
    border-radius: 0.45rem;
    line-height: 0;
}
.kh-lang-option-flag .kh-lang-flag-svg {
    width: 1.15rem;
    height: auto;
    display: block;
    aspect-ratio: 2 / 1;
    border-radius: 2px;
}
.kh-lang-option.is-active .kh-lang-option-flag {
    border-color: var(--color-petrol-900);
    background: rgba(26, 53, 86, 0.08);
}

.kh-lang-option-text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
}
.kh-lang-option-native {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.2;
}
.kh-lang-option.is-active .kh-lang-option-native { color: var(--color-petrol-900); }
.kh-lang-option-code {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--color-ink-mute);
    letter-spacing: 0.08em;
    padding: 0.1rem 0.38rem;
    border-radius: 0.28rem;
    background: rgba(26, 53, 86, 0.07);
    line-height: 1;
}

.kh-lang-option-tick {
    flex-shrink: 0;
    margin-inline-start: auto;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 9999px;
    background: var(--color-petrol-900);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ================================================================
   RTL overrides for the Sopot template
   Strategy:
   - Header / mobile nav: real RTL chrome (logo right, menu RTL).
   - Sections with shapes + WOW/slide motions: keep EN geometry
     (direction:ltr on rows) so animations match English exactly.
   - Copy blocks: direction:rtl + text-align:right.
   ================================================================ */
[dir="rtl"] body {
    font-family: 'Neo Sans Arabic', 'NeoSansArabic', 'Rubik', sans-serif;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .thm-btn, [dir="rtl"] .main-menu__list, [dir="rtl"] .section-title__title,
[dir="rtl"] .section-title__tagline {
    font-family: 'Neo Sans Arabic', 'NeoSansArabic', 'Rubik', sans-serif;
}

/* Preloader uses Kahatein logo */
.preloader__image {
    width: 220px !important;
    height: auto !important;
    max-width: 80vw;
}

[dir="rtl"] .scroll-to-top { left: 30px; right: auto; }

/* Button hover wipe — from the start edge in RTL */
[dir="rtl"] .thm-btn:after,
[dir="rtl"] .thm-btn:before { left: auto; right: -100%; }
[dir="rtl"] .thm-btn:hover:after,
[dir="rtl"] .thm-btn:hover:before { left: auto; right: 0; }

[dir="rtl"] .section-title.text-left,
[dir="rtl"] .section-title { text-align: right; }

/* ================================================================
   §1  HEADER — main-header__top + main-menu
   ================================================================ */

/* Top bar floats: contact strip on the right, links on the left */
[dir="rtl"] .main-header__top-left  { float: right; }
[dir="rtl"] .main-header__top-right { float: left; }

/* Blue shape: cover the contact block + extend to the RIGHT edge (RTL mirror of EN) */
[dir="rtl"] .main-header__top-left:before {
    left: 100%;
    right: -100vw;
}
[dir="rtl"] .main-header__top-left:after {
    left: 0;
    right: 0;
}

/* Flex already follows html[dir=rtl] — do NOT row-reverse (double-flip).
   Only fix physical margins written as margin-left in the template. */
[dir="rtl"] .main-header__top-address li+li {
    margin-left: 0;
    margin-right: 30px;
}
[dir="rtl"] .main-header__top-address li .text {
    margin-left: 0;
    margin-right: 10px;
}
[dir="rtl"] .main-header__top-right-content li+li {
    margin-left: 0;
    margin-right: 20px;
}
[dir="rtl"] .main-header__top-right-content li a i {
    padding-right: 0;
    padding-left: 7px;
}

/* Logo right, menu + CTA left */
[dir="rtl"] .main-menu-wrapper__left { float: right; }
[dir="rtl"] .main-menu-wrapper__logo { float: right; }
[dir="rtl"] .main-menu-wrapper__right { float: left; }
[dir="rtl"] .main-menu-wrapper__main-menu {
    margin-right: 0;
    margin-left: 50px;
}

/*
 * Tall brand mark: reclaim header padding so the logo can be larger
 * without growing the bar. Soft crop on the tagline; keep air under the wordmark.
 */
.main-menu-wrapper__logo {
    padding-top: 12px !important;
    padding-bottom: 14px !important;
}

.main-menu-wrapper__logo a {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 68px;
    overflow: hidden;
    line-height: 0;
}

.main-menu-wrapper__logo .kh-header-logo {
    display: block;
    height: 78px;
    width: auto;
    max-width: none;
    object-fit: cover;
    object-position: top center;
    transform: translateY(-1px);
}

.stricky-header .main-menu-wrapper__logo {
    padding-top: 10px !important;
    padding-bottom: 12px !important;
}

.stricky-header .main-menu-wrapper__logo a {
    height: 60px;
}

.stricky-header .main-menu-wrapper__logo .kh-header-logo {
    height: 70px;
}

/* Desktop / sticky only — NEVER float mobile-nav cloned list items */
[dir="rtl"] .main-menu .main-menu__list,
[dir="rtl"] .stricky-header .main-menu__list {
    direction: rtl;
}
[dir="rtl"] .main-menu .main-menu__list > li,
[dir="rtl"] .stricky-header .main-menu__list > li {
    float: right;
}
[dir="rtl"] .main-menu .main-menu__list > li+li,
[dir="rtl"] .stricky-header .main-menu__list > li+li {
    margin-left: 0;
    margin-right: 45px;
}

[dir="rtl"] .main-menu .main-menu__list > li > a::before,
[dir="rtl"] .stricky-header .main-menu__list > li > a::before {
    transform-origin: right center;
}
[dir="rtl"] .main-menu .main-menu__list > li.current > a::before,
[dir="rtl"] .main-menu .main-menu__list > li:hover > a::before,
[dir="rtl"] .stricky-header .main-menu__list > li.current > a::before,
[dir="rtl"] .stricky-header .main-menu__list > li:hover > a::before {
    transform-origin: left center;
}

[dir="rtl"] .main-menu .main-menu__list > li.dropdown > a:after {
    right: auto;
    left: -16px;
}
[dir="rtl"] .main-menu .main-menu__list li ul,
[dir="rtl"] .stricky-header .main-menu__list li ul {
    left: auto;
    right: 0;
}
[dir="rtl"] .main-menu .main-menu__list li li ul,
[dir="rtl"] .stricky-header .main-menu__list li li ul {
    left: auto;
    right: 100%;
}

.stricky-header .kh-lang-menu { z-index: 10000; }

/* ================================================================
   §2  MOBILE NAV — match template list layout in RTL
   ================================================================ */
[dir="rtl"] .mobile-nav__content {
    left: auto;
    right: 0;
    transform: translateX(100%);
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .mobile-nav__wrapper.expanded .mobile-nav__content,
[dir="rtl"] .mobile-nav__wrapper.nav-opened .mobile-nav__content {
    transform: translateX(0);
}

/* Close (X) on the left in RTL (template keeps it opposite the logo flow) */
[dir="rtl"] .mobile-nav__close {
    right: auto;
    left: 15px;
}

[dir="rtl"] .mobile-nav__content .logo-box {
    justify-content: flex-start;
}

/* Kill desktop float so items stack like the English template.
   Do NOT force display on nested ul — template keeps them display:none until toggled. */
[dir="rtl"] .mobile-nav__content .main-menu__list {
    display: block !important;
    float: none !important;
    width: 100%;
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .mobile-nav__content .main-menu__list ul {
    float: none !important;
    width: 100%;
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .mobile-nav__content .main-menu__list > li,
[dir="rtl"] .mobile-nav__content .main-menu__list li {
    float: none !important;
    display: block !important;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0 !important;
}
[dir="rtl"] .mobile-nav__content .main-menu__list li a {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    direction: rtl;
}
/* Orange dropdown square: keep template geometry; flip chevron for RTL */
[dir="rtl"] .mobile-nav__content .main-menu__list li a button {
    flex-shrink: 0;
    transform: rotate(90deg);
}
[dir="rtl"] .mobile-nav__content .main-menu__list li a button.expanded {
    transform: rotate(0deg);
}

/* Contact rows: icon + text on one line; phone digits never stack */
[dir="rtl"] .mobile-nav__contact li {
    flex-direction: row;
    align-items: center;
    gap: 0;
}
[dir="rtl"] .mobile-nav__contact li > i {
    margin-right: 0;
    margin-left: 10px;
    flex-shrink: 0;
}
[dir="rtl"] .mobile-nav__contact li a {
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    display: inline-block;
    text-align: left;
}
[dir="rtl"] .mobile-nav__social {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 1.75rem;
}
[dir="rtl"] .mobile-nav__social a,
[dir="ltr"] .mobile-nav__social a {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.mobile-nav__social {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.75rem;
}
.mobile-nav__social a + a {
    margin-left: 0 !important;
}

/* Extra LTR/RTL safety: never let desktop menu floats leak into the drawer */
.mobile-nav__content .main-menu__list > li,
.mobile-nav__content .main-menu__list li {
    float: none;
    padding-top: 0;
    padding-bottom: 0;
}
.mobile-nav__content .main-menu__list > li + li {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.mobile-nav__contact li a {
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}

/* Mobile drawer sits on navy — never use --sopot-base (also navy) for text/hover */
.mobile-nav__content .main-menu__list li a {
    color: #ffffff;
}
.mobile-nav__content .main-menu__list li a:hover,
.mobile-nav__content .main-menu__list li a.expanded {
    color: var(--kh-gold) !important;
}
.mobile-nav__content .main-menu__list li a button {
    background-color: var(--kh-gold);
    color: #ffffff;
}
.mobile-nav__content .main-menu__list li a button.expanded {
    background-color: #ffffff;
    color: var(--sopot-black);
}
.mobile-nav__contact li > i {
    background-color: var(--kh-gold);
}
.mobile-nav__contact li a {
    color: #ffffff;
}
.mobile-nav__contact li a:hover {
    color: var(--kh-gold) !important;
}
.mobile-nav__social a {
    color: #ffffff;
}
.mobile-nav__social a:hover {
    color: var(--kh-gold) !important;
}
.mobile-nav__close:hover {
    color: var(--kh-gold);
}

/* ================================================================
   §3  MAIN SLIDER — mirror shapes + keep entrance animations
   Content column sits on the right in RTL; shapes/arrow mirror EN.
   ================================================================ */
[dir="rtl"] .main-slider .container > .row {
    direction: rtl;
}
[dir="rtl"] .main-slider__content {
    direction: rtl;
    text-align: right;
    overflow: visible; /* don't clip arrow entrance */
}
[dir="rtl"] .main-slider h2,
[dir="rtl"] .main-slider p,
[dir="rtl"] .main-slider__btn {
    text-align: right;
}
[dir="rtl"] .main-slider h2 span:before {
    left: auto;
    right: -15px;
}

/* shape-1: EN left → RTL right, enter from outer (right) */
[dir="rtl"] .main-slider-shape-1 {
    left: auto;
    right: 280px;
    transform: translateX(500px) rotate(0deg);
}
[dir="rtl"] .main-slider .swiper-slide-active .main-slider-shape-1 {
    transform: translateY(0) translateX(0) rotate(75deg);
}

/* shape-2: EN right → RTL left, enter from outer (left) */
[dir="rtl"] .main-slider-shape-2 {
    right: auto;
    left: 350px;
    transform: translateX(-900px) rotate(0deg);
}
[dir="rtl"] .main-slider .swiper-slide-active .main-slider-shape-2 {
    transform: translateY(0) translateX(0) rotate(100deg);
}

/* dots */
[dir="rtl"] .main-slider-shape-3 {
    left: auto;
    right: 85px;
}
[dir="rtl"] .main-slider-shape-4 {
    left: auto;
    right: 1075px;
}

/* large graphic: EN right → RTL left */
[dir="rtl"] .main-slider-shape-5 {
    right: auto;
    left: 200px;
}

/* arrow beside content: sit toward center, slide in from the left */
[dir="rtl"] .main-slider-arrow {
    right: auto;
    left: 40px;
    transform: translateX(-120%);
}
[dir="rtl"] .main-slider .swiper-slide-active .main-slider-arrow {
    transform: translate(0);
    opacity: 1;
}
[dir="rtl"] .main-slider-arrow img.float-bob-x {
    animation-name: float-bob-x-rtl-flip;
}
@keyframes float-bob-x-rtl-flip {
    0%, 100% { transform: scaleX(-1) translateX(-30px); }
    50% { transform: scaleX(-1) translateX(-10px); }
}

[dir="rtl"] #main-slider-pagination {
    text-align: right;
}
[dir="rtl"] #main-slider-pagination .swiper-pagination-bullet+.swiper-pagination-bullet {
    margin-left: 0;
    margin-right: 10px;
}
[dir="rtl"] .main-slider__nav {
    /* Keep LTR flex math so alignment is physical, then pin to the left (mirror of EN right stack) */
    direction: ltr;
    align-items: flex-start;
    padding-left: 15px;
    padding-right: 15px;
}
[dir="rtl"] .main-slider__nav .swiper-button-next,
[dir="rtl"] .main-slider__nav .swiper-button-prev {
    left: auto !important;
    right: auto !important;
    margin-left: 0;
    margin-right: 0;
}
[dir="rtl"] .main-slider__nav .swiper-button-prev {
    margin-bottom: 10px;
}
/* Keep arrow icons semantic (prev ← / next →); no scaleX flip */
[dir="rtl"] #main-slider__swiper-button-next i,
[dir="rtl"] #main-slider__swiper-button-prev i {
    transform: none;
}

/* ================================================================
   §4  Lock EN geometry on motion / shape sections
   ================================================================ */
[dir="rtl"] .up-comming-events .row,
[dir="rtl"] .feature-one .row,
[dir="rtl"] .about-one > .container > .row,
[dir="rtl"] .causes-one .row,
[dir="rtl"] .support-us .row,
[dir="rtl"] .project-one .row,
[dir="rtl"] .brand-one .row,
[dir="rtl"] .skill-one,
[dir="rtl"] .skill-one__container,
[dir="rtl"] .team-one .row,
[dir="rtl"] .video-one .row,
[dir="rtl"] .testimonial-one .row,
[dir="rtl"] .blog-one .row,
[dir="rtl"] .counter-one .row,
[dir="rtl"] .help-the-causes .row,
[dir="rtl"] .two-section .row,
[dir="rtl"] .about-two .row,
[dir="rtl"] .donation-details > .container > .row {
    direction: ltr;
}

/* Footer: real RTL column order (About on the right, like mirrored EN) */
[dir="rtl"] .site-footer-one .row,
[dir="rtl"] .site-footer .row {
    direction: rtl;
}

/* Arabic copy inside those locked layouts */
[dir="rtl"] .up-comming-events__content,
[dir="rtl"] .up-comming-events__title,
[dir="rtl"] .up-comming-events__details,
[dir="rtl"] .feature-one__single,
[dir="rtl"] .about-one__right-content,
[dir="rtl"] .about-one__points,
[dir="rtl"] .about-one__bottom-video-box,
[dir="rtl"] .about-one__text,
[dir="rtl"] .causes-one__content,
[dir="rtl"] .causes-one__list,
[dir="rtl"] .support-us__content-box,
[dir="rtl"] .support-us__right-content,
[dir="rtl"] .project-one__content,
[dir="rtl"] .skill-one__content,
[dir="rtl"] .team-one__content,
[dir="rtl"] .video-one__inner,
[dir="rtl"] .video-one__content-box,
[dir="rtl"] .testimonial-one__single,
[dir="rtl"] .blog-one__content,
[dir="rtl"] .footer-widget__column,
[dir="rtl"] .section-title {
    direction: rtl;
}

[dir="rtl"] .up-comming-events__content,
[dir="rtl"] .up-comming-events__title,
[dir="rtl"] .up-comming-events__details,
[dir="rtl"] .feature-one__single,
[dir="rtl"] .about-one__right-content,
[dir="rtl"] .about-one__points,
[dir="rtl"] .about-one__bottom-video-box,
[dir="rtl"] .about-one__text,
[dir="rtl"] .causes-one__content,
[dir="rtl"] .causes-one__list,
[dir="rtl"] .support-us__right-content,
[dir="rtl"] .project-one__content,
[dir="rtl"] .skill-one__content,
[dir="rtl"] .video-one__inner,
[dir="rtl"] .video-one__content-box,
[dir="rtl"] .testimonial-one__single,
[dir="rtl"] .blog-one__content,
[dir="rtl"] .footer-widget__column,
[dir="rtl"] .section-title {
    text-align: right;
}

[dir="rtl"] .feature-one__single,
[dir="rtl"] .causes-one__content,
[dir="rtl"] .blog-one__content,
[dir="rtl"] .testimonial-one__single {
    text-align: right;
}

/* ================================================================
   §5  EVENTS
   ================================================================ */
[dir="rtl"] .up-comming-events__details {
    direction: rtl;
}
[dir="rtl"] .up-comming-events__details li+li {
    margin-left: 0;
    margin-right: 15px;
}
[dir="rtl"] .up-comming-events__details li p span {
    padding-right: 0;
    padding-left: 5px;
}

/* ================================================================
   §6  ABOUT — EN geometry; only text/icons RTL
   ================================================================ */
[dir="rtl"] .about-one,
[dir="rtl"] .about-one .col-xl-6,
[dir="rtl"] .about-one__left,
[dir="rtl"] .about-one__img-box {
    overflow: visible;
}
[dir="rtl"] .about-one__points li {
    padding-left: 0;
    padding-right: 35px;
}
[dir="rtl"] .about-one__points li .icon {
    left: auto;
    right: 0;
}
[dir="rtl"] .about-one__video-link {
    margin-left: 0;
    margin-right: 60px;
}

/* ================================================================
   §7  CAUSES / FEATURES / TEAM / BLOG — text + small UI only
   ================================================================ */

/* Causes progress: fill from the RIGHT in Arabic, % badge on the growing tip */
[dir="rtl"] .causes-one__progress {
    direction: ltr;
    unicode-bidi: isolate;
}
[dir="rtl"] .causes-one__progress .bar {
    direction: ltr !important;
    position: relative;
    overflow: visible;
}
[dir="rtl"] .causes-one__progress .bar-inner {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    float: none !important;
    margin: 0 !important;
    height: 4px;
    direction: ltr !important;
}
[dir="rtl"] .causes-one__progress .count-text {
    left: -40px !important;
    right: auto !important;
}
[dir="rtl"] .causes-one__progress .count-text:after {
    left: auto;
    right: 0;
    transform: none;
    border-right: none;
    border-left: 6px solid transparent;
    border-top: 4px solid var(--sopot-base);
}
[dir="rtl"] .causes-one__goals {
    direction: rtl;
}
[dir="rtl"] .causes-one__goals > p > span {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}
[dir="rtl"] .causes-one__list li+li {
    margin-left: 0;
    margin-right: 20px;
}
[dir="rtl"] .causes-one__list li .text {
    margin-left: 0;
    margin-right: 10px;
}
[dir="rtl"] .causes-one__read-more span {
    padding-left: 0;
    padding-right: 5px;
}

/* Team: keep centered card layout (EN); only use Arabic font via body */
[dir="rtl"] .team-one__content {
    direction: rtl;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    overflow: visible;
}
[dir="rtl"] .team-one__name,
[dir="rtl"] .team-one__title {
    text-align: center;
    overflow: visible;
    padding-inline: 8px;
}
[dir="rtl"] .team-one__social {
    direction: ltr;
    justify-content: center;
}
[dir="rtl"] .team-one__social a+a {
    margin-left: 15px;
    margin-right: 0;
}
[dir="rtl"] .blog-one__meta {
    direction: rtl;
}
[dir="rtl"] .blgo-one__date {
    margin-left: 0;
    margin-right: 20px;
}
[dir="rtl"] .blgo-one__date span {
    padding-right: 0;
    padding-left: 5px;
}

/* ================================================================
   §8  SUPPORT / DONATION form fields
   ================================================================ */
[dir="rtl"] .support-us__left {
    z-index: 2;
}
[dir="rtl"] .support-us__content-box {
    direction: rtl;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.97);
    isolation: isolate;
}
[dir="rtl"] .support-us__content-box:before {
    z-index: -1;
    background-color: #fff;
}
[dir="rtl"] .support-us__title,
[dir="rtl"] .support-us__text {
    text-align: center;
}
[dir="rtl"] .support-us__right {
    z-index: 0;
}
[dir="rtl"] .support-us__right-content {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] #support-us__donate-form .custon-box .icon {
    left: auto;
    right: 0;
}
[dir="rtl"] #support-us__donate-form .custon-box input[type="text"] {
    direction: rtl;
    text-align: right;
    padding-left: 30px;
    padding-right: 60px;
}
/* Amount chips stay LTR ($25) but flow neatly */
[dir="rtl"] .support-us__donate-form-select-box {
    direction: ltr;
    justify-content: center;
    flex-wrap: wrap;
}
[dir="rtl"] .support-us__donate-form-select-box li+li {
    margin-left: 5px;
    margin-right: 0;
}

/* ================================================================
   §9  SKILLS — label right, % left; fill grows from RIGHT (RTL)
   ================================================================ */
[dir="rtl"] .skill-one__content {
    text-align: right;
}
[dir="rtl"] .progress-levels .progress-box .inner .text {
    direction: rtl;
    text-align: right;
    padding-left: 55px;
    padding-right: 0;
}
[dir="rtl"] .progress-levels .progress-box .bar .bar-innner {
    direction: ltr;
}
[dir="rtl"] .progress-levels .progress-box .bar .bar-fill {
    left: auto !important;
    right: 0 !important;
}
[dir="rtl"] .progress-levels .progress-box .bar .bar-innner .skill-percent {
    right: auto;
    left: 0;
    width: auto;
    min-width: 48px;
    text-align: left;
    z-index: 2;
}
[dir="rtl"] .progress-levels .progress-box .inner .count-text,
[dir="rtl"] .progress-levels .progress-box .inner .percent {
    color: var(--sopot-white);
}

/* ================================================================
   §10  VIDEO / TESTIMONIALS (feedback) / BRANDS / FOOTER
   ================================================================ */
[dir="rtl"] .video-one__inner,
[dir="rtl"] .video-one__title,
[dir="rtl"] .video-one__text {
    text-align: right;
}

/* Feedback cards: quote badge mirrors to the left of the avatar */
[dir="rtl"] .testimonial-one__single {
    direction: rtl;
    text-align: center;
}
[dir="rtl"] .testimonial-one__text,
[dir="rtl"] .testimonial-one__client-name,
[dir="rtl"] .testimonial-one__client-title {
    direction: rtl;
    text-align: center;
}
[dir="rtl"] .testimonial-one__quote {
    right: auto;
    left: -15px;
}
[dir="rtl"] .testimonial-one__quote .fa-quote-left {
    display: inline-block;
    transform: scaleX(-1);
}
[dir="rtl"] .testimonial-one__img {
    direction: ltr; /* keep avatar geometry stable */
}

/* Owl already gets rtl:true from sopot.js */
[dir="rtl"] .owl-carousel { direction: rtl; }
[dir="rtl"] .footer-widget-one__twitter-feed-content.owl-carousel .owl-dots {
    text-align: right;
}
[dir="rtl"] .footer-widget-one__list li {
    display: flex;
    flex-direction: row;
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .footer-widget-one__list li .text {
    margin-left: 0;
    margin-right: 15px;
    text-align: right;
}
[dir="rtl"] .footer-widget-one__about-text,
[dir="rtl"] .footer-widget-one__title,
[dir="rtl"] .footer-widget-one__latest-works-title,
[dir="rtl"] .footer-widget-one__latest-works-date,
[dir="rtl"] .footer-widget-one__twitter-feed-text,
[dir="rtl"] .footer-widget-one__twitter-feed-name,
[dir="rtl"] .site-footer__bottom-text {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .footer-widget-one__twitter-feed-details {
    margin-left: 0;
    margin-right: 20px;
    text-align: right;
}
[dir="rtl"] .footer-widget-one__twitter-feed-name span {
    padding-left: 0;
    padding-right: 5px;
}
[dir="rtl"] .footer-widget-one__twitter-feed-bottom {
    direction: rtl;
}

/* Gallery: force same 3×3 grid as English (inline-block breaks under RTL) */
[dir="rtl"] .footer-widget-one__gallery .footer-widget-one__title {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .footer-widget-one__gallery-list {
    direction: ltr;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;
    unicode-bidi: isolate;
}
[dir="rtl"] .footer-widget-one__gallery-list li {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    display: block;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

/* ================================================================
   §  DONATION DETAILS — RTL text + progress animation
   ================================================================ */
[dir="rtl"] .donation-details__left,
[dir="rtl"] .donation-details__content,
[dir="rtl"] .donation-details__sidebar,
[dir="rtl"] .donation-details .comment-one,
[dir="rtl"] .donation-details .comment-form {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .donation-details__title,
[dir="rtl"] .donation-details__text-1,
[dir="rtl"] .donation-details__text-2,
[dir="rtl"] .donation-details__text-3,
[dir="rtl"] .donation-details__recent-donation-title,
[dir="rtl"] .donation-details .comment-one__title,
[dir="rtl"] .donation-details .comment-form__title,
[dir="rtl"] .donation-details .comment-one__content h3,
[dir="rtl"] .donation-details .comment-one__content p {
    text-align: right;
}

/* Category badge: mirror to the start edge (right in RTL) */
[dir="rtl"] .donation-details__category {
    left: auto;
    right: 40px;
}

/* Progress fill from the RIGHT (same approach as causes) */
[dir="rtl"] .donation-details__progress {
    direction: ltr;
    unicode-bidi: isolate;
}
[dir="rtl"] .donation-details__progress .bar {
    direction: ltr !important;
    position: relative;
    overflow: visible;
}
[dir="rtl"] .donation-details__progress .bar-inner {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    float: none !important;
    margin: 0 !important;
    height: 4px;
    direction: ltr !important;
    /* Override global .bar-inner tint so the fill animates visibly */
    background: var(--sopot-base) !important;
}
[dir="rtl"] .donation-details__progress .count-text {
    left: -40px !important;
    right: auto !important;
}
[dir="rtl"] .donation-details__progress .count-text:after {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 6px solid transparent;
    border-top: 4px solid var(--sopot-base);
}
[dir="rtl"] .donation-details__goals {
    direction: rtl;
}
[dir="rtl"] .donation-details__goals > p > span {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Points: icon on the right, text after it */
[dir="rtl"] .donation-details__points li {
    direction: rtl;
    flex-direction: row;
}
[dir="rtl"] .donation-details__points li .text {
    margin-left: 0;
    margin-right: 15px;
}

/* PDF strip */
[dir="rtl"] .donation-details__presentation {
    direction: rtl;
}
[dir="rtl"] .donation-details__presentation-icon-box {
    flex-direction: row;
}
[dir="rtl"] .donation-details__presentation-icon-box h4 {
    margin-left: 0;
    margin-right: 10px;
}

/* Recent donations sidebar */
[dir="rtl"] .donation-details__recent-donation {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .donation-details__recent-donation-list li {
    direction: rtl;
    flex-direction: row;
}
[dir="rtl"] .donation-details__recent-donation-content {
    margin-left: 0;
    margin-right: 20px;
    text-align: right;
}
[dir="rtl"] .donation-details__recent-donation-name span {
    letter-spacing: 0;
    text-transform: none;
    display: inline-block;
    margin-right: 6px;
}

/* Comments */
[dir="rtl"] .donation-details .comment-one__single {
    direction: rtl;
    flex-direction: row;
}
[dir="rtl"] .donation-details .comment-one__content {
    margin-left: 0;
    margin-right: 43px;
    text-align: right;
}
[dir="rtl"] .donation-details .comment-one__btn {
    right: auto;
    left: 0;
}
[dir="rtl"] .donation-details .comment-form__input-box input,
[dir="rtl"] .donation-details .comment-form__input-box textarea {
    text-align: right;
    direction: rtl;
}

/* LTR also: keep donation progress fill color solid (global .bar-inner was washed out) */
.donation-details__progress .bar-inner {
    background: var(--sopot-base) !important;
}
.causes-one__progress .bar-inner {
    background: var(--sopot-base) !important;
}

/* ── Organization pricing plans ──────────────────────────────── */
.kh-pricing {
    position: relative;
    padding: 100px 0 90px;
    background:
        radial-gradient(circle at top right, rgba(196, 147, 90, 0.12), transparent 42%),
        linear-gradient(180deg, #f7f4ef 0%, #ffffff 55%, #f3f6f8 100%);
    overflow: hidden;
}

.kh-pricing__intro {
    max-width: 640px;
    margin: 18px auto 0;
    color: #6b7a8d;
    font-size: 16px;
    line-height: 1.7;
}

.kh-pricing__billing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 28px auto 8px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(26, 53, 86, 0.06);
    border: 1px solid rgba(26, 53, 86, 0.08);
    width: fit-content;
    max-width: 100%;
}

.kh-pricing .section-title + .kh-pricing__billing,
.kh-pricing__billing {
    display: flex;
}

.kh-pricing__billing-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: #1A3556;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 12px 18px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.kh-pricing__billing-btn.is-active {
    background: #1A3556;
    color: #fff;
    box-shadow: 0 10px 24px rgba(26, 53, 86, 0.18);
}

.kh-pricing__save {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(196, 147, 90, 0.2);
    color: #9a6b2e;
    font-size: 11px;
    font-weight: 700;
}

.kh-pricing__billing-btn.is-active .kh-pricing__save {
    background: var(--kh-gold);
    color: #1A3556;
}

.kh-pricing__yearly-note {
    width: 100%;
    margin-top: 8px;
    color: var(--kh-teal);
    font-size: 12px;
    font-weight: 600;
}

.kh-pricing__card--featured .kh-pricing__yearly-note {
    color: rgba(255, 255, 255, 0.82);
}

.kh-pricing__grid {
    margin-top: 20px;
}

.kh-pricing__card {
    position: relative;
    height: 100%;
    margin-top: 30px;
    padding: 34px 28px 30px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(26, 53, 86, 0.08);
    box-shadow: 0 18px 40px rgba(26, 53, 86, 0.06);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    display: flex;
    flex-direction: column;
}

.kh-pricing__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 50px rgba(26, 53, 86, 0.12);
    border-color: rgba(196, 147, 90, 0.35);
}

.kh-pricing__card--featured {
    background: linear-gradient(180deg, #1A3556 0%, #243f63 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 24px 55px rgba(26, 53, 86, 0.28);
}

.kh-pricing__card--featured .kh-pricing__tagline,
.kh-pricing__card--featured .kh-pricing__range,
.kh-pricing__card--featured .kh-pricing__desc,
.kh-pricing__card--featured .kh-pricing__period {
    color: rgba(255, 255, 255, 0.78);
}

.kh-pricing__card--featured .kh-pricing__name,
.kh-pricing__card--featured .kh-pricing__price {
    color: #fff;
}

.kh-pricing__badge {
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--kh-gold);
    color: #1A3556;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.kh-pricing__header {
    margin-bottom: 18px;
    padding-inline-end: 70px;
}

.kh-pricing__name {
    margin: 0 0 8px;
    font-size: 26px;
    line-height: 1.2;
    color: var(--sopot-base);
}

.kh-pricing__tagline {
    margin: 0 0 10px;
    color: #6b7a8d;
    font-size: 14px;
}

.kh-pricing__range {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(75, 139, 122, 0.12);
    color: var(--kh-teal);
    font-size: 13px;
    font-weight: 600;
}

.kh-pricing__card--featured .kh-pricing__range {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.kh-pricing__price-box {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.kh-pricing__price {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--sopot-base);
}

.kh-pricing__period {
    color: #6b7a8d;
    font-size: 14px;
}

.kh-pricing__desc {
    margin: 0 0 18px;
    color: #6b7a8d;
    font-size: 14px;
    line-height: 1.7;
    min-height: 48px;
}

.kh-pricing__features {
    margin: 0 0 24px;
    padding: 0;
    flex: 1;
}

.kh-pricing__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
}

.kh-pricing__card--featured .kh-pricing__features li {
    color: rgba(255, 255, 255, 0.92);
}

.kh-pricing__features li.is-excluded {
    opacity: 0.45;
    text-decoration: line-through;
}

.kh-pricing__check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(75, 139, 122, 0.14);
    color: var(--kh-teal);
    font-size: 11px;
    margin-top: 1px;
}

.kh-pricing__features li.is-excluded .kh-pricing__check {
    background: rgba(148, 163, 184, 0.18);
    color: #94a3b8;
}

.kh-pricing__card--featured .kh-pricing__check {
    background: rgba(196, 147, 90, 0.22);
    color: var(--kh-gold);
}

.kh-pricing__cta {
    margin-top: auto;
}

.kh-pricing__btn {
    width: 100%;
    text-align: center;
    background: var(--sopot-base);
    border-color: var(--sopot-base);
}

.kh-pricing__btn:hover {
    background: var(--kh-gold);
    border-color: var(--kh-gold);
    color: #1A3556;
}

.kh-pricing__card--featured .kh-pricing__btn {
    background: var(--kh-gold);
    border-color: var(--kh-gold);
    color: #1A3556;
}

.kh-pricing__card--featured .kh-pricing__btn:hover {
    background: #fff;
    border-color: #fff;
    color: #1A3556;
}

.kh-pricing__card--free .kh-pricing__price {
    color: var(--kh-teal);
}

@media (max-width: 991px) {
    .kh-pricing {
        padding: 80px 0 70px;
    }

    .kh-pricing__header {
        padding-inline-end: 0;
    }

    .kh-pricing__badge {
        position: static;
        margin-bottom: 14px;
    }
}

/* ── Organization register (website template) ─────────────────── */
.kh-org-register {
    position: relative;
    padding: 70px 0 90px;
    overflow: hidden;
    min-height: calc(100vh - 180px);
}

.kh-org-register__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.kh-org-register__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(26, 53, 86, 0.42) 0%,
        rgba(26, 45, 68, 0.32) 50%,
        rgba(26, 53, 86, 0.5) 100%
    );
}

.kh-org-register__card {
    position: relative;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    border-radius: 22px;
    padding: 36px 34px 30px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 24px 55px rgba(26, 53, 86, 0.22);
}

.kh-org-register__card::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(90deg, #1A3556 0%, #C4935A 50%, #4B8B7A 100%);
}

.kh-org-register__intro {
    margin-bottom: 28px;
}

.kh-org-register__logo {
    height: 64px;
    width: auto;
    margin-bottom: 14px;
}

.kh-org-register__title {
    margin: 10px 0 8px;
    color: var(--sopot-base);
    font-size: 28px;
    line-height: 1.3;
}

.kh-org-register__subtitle {
    margin: 0 auto;
    max-width: 520px;
    color: #6b7a8d;
    font-size: 15px;
    line-height: 1.7;
}

.kh-org-register__section {
    margin-bottom: 22px;
}

.kh-org-register__section-title {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(26, 53, 86, 0.1);
    color: var(--sopot-base);
    font-size: 18px;
    font-weight: 700;
}

.kh-org-register .comment-form__input-box {
    margin-bottom: 18px;
}

.kh-org-register .comment-form__input-box input {
    width: 100%;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(26, 53, 86, 0.12);
    color: #1A3556;
}

.kh-org-register .comment-form__input-box input:focus {
    border-color: var(--kh-gold);
    background: rgba(255, 255, 255, 0.96);
    outline: none;
}

.kh-org-register__password {
    position: relative;
}

.kh-org-register__password input {
    padding-inline-end: 48px;
}

.kh-org-register__eye {
    position: absolute;
    top: 50%;
    inset-inline-end: 14px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #6b7a8d;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.kh-org-register__eye:hover {
    color: var(--sopot-base);
}

.kh-org-register__error {
    margin: 6px 0 0;
    color: #c0392b;
    font-size: 13px;
    font-weight: 600;
}

.kh-org-register__submit {
    min-width: 220px;
    background: var(--sopot-base) !important;
    border-color: var(--sopot-base) !important;
}

.kh-org-register__submit:hover {
    background: var(--kh-gold) !important;
    border-color: var(--kh-gold) !important;
    color: #1A3556 !important;
}

.kh-org-register__login-link {
    margin: 18px 0 0;
    color: #6b7a8d;
    font-size: 14px;
}

.kh-org-register__login-link a {
    color: var(--sopot-base);
    font-weight: 700;
}

.kh-org-register__login-link a:hover {
    color: var(--kh-gold);
}

@media (max-width: 767px) {
    .kh-org-register {
        padding: 60px 0 70px;
    }

    .kh-org-register__card {
        padding: 28px 18px 24px;
        border-radius: 16px;
    }

    .kh-org-register__title {
        font-size: 22px;
    }
}