header.header {
    box-sizing: border-box;
    background-color: #ffffff !important;
    background-image:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0) 8.25vw,
            #ffffff 8.45vw),
        url("https://hani2m.com/wp-content/uploads/2026/06/Sadu-landscape.png") !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    background-size: 100% 100%, 100% auto !important;
    padding: calc(8.4% + 44px) 2em 0.75em !important;
}

header.header img {
    max-height: 110px;
}

@media (max-width: 767px) {
    header.header img {
        max-height: 90px;
    }
}

header.header,
header.header h1,
header.header p {
    color: #334455 !important;
}

header.header h1 {
    transform: scale(0.85);
    transform-origin: center bottom;
}

.vs-nav li a {
    color: #4a4a4a;
}

.vs-nav li a:hover {
    color: #1a1a1a;
}

.vs-nav li.current_page_item a,
.vs-nav .vs-nav-current a {
    color: #334455 !important;
}

.single-page-layout .vs-nav li i,
.vs-nav li i {
    color: #334455 !important;
    background: #ffffff !important;
    border: 2px solid #c8d2d6 !important;
}

.single-page-layout .vs-nav li i:hover,
.single-page-layout .vs-nav li i.active,
.vs-nav li i:hover {
    color: #ffffff !important;
    background: #334455 !important;
    border-color: transparent !important;
}

header.header:before {
    content: "" !important;
    display: block;
    width: 130px;
    height: 130px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: url("https://hani2m.com/wp-content/uploads/2026/06/bedwin.jpg") center / cover no-repeat !important;
    border: 4px solid #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

@media (max-width: 767px) {
    header.header:before {
        width: 100px;
        height: 100px;
    }
}

/* ---------- 2. RTL + CENTERING ---------- */

html,
body {
    direction: rtl;
    text-align: right;
}

html {
    overflow-x: clip;
}

#container,
.container {
    direction: rtl;
}

.content {
    box-sizing: border-box;
    text-align: right;
}

.vs-triplelayout .wrapper > section {
    left: 0;
    right: auto;
}

.vs-triplelayout .wrapper > section.vs-left {
    left: -100%;
    right: auto;
}

.vs-triplelayout .wrapper > section.vs-right {
    left: 100%;
    right: auto;
}

@media screen and (min-width: 1200px) {
    .vs-triplelayout .wrapper > section {
        left: 0;
        right: auto;
        margin-left: auto;
        margin-right: auto;
    }
}

header.header,
#nav,
.vs-nav,
.vs-nav li {
    direction: rtl;
}

header.header {
    text-align: center;
}

.row {
    direction: rtl;
}

.row > [class*="col-"] {
    float: right;
}

.widget-twitter,
#latest-tweets,
.widget,
.widget-area {
    direction: rtl;
    text-align: right;
}

.content ul,
.content ol,
.content ul ul,
.content ul ol,
.content ol ul,
.content ol ol {
    padding-right: 1.5em;
    padding-left: 0;
}

.content blockquote {
    padding-right: 2em;
    padding-left: 0;
}

.content blockquote:before {
    left: auto;
    right: 0;
}

.content blockquote cite {
    text-align: left;
    padding-right: 0;
    padding-left: 1em;
}

.content input[type="text"],
.content input[type="email"],
.content input[type="search"],
.content textarea,
#search-form #search {
    direction: rtl;
    text-align: right;
}

.fa,
[class^="icon-"],
[class*=" icon-"],
.vs-nav li i {
    direction: ltr !important;
}

.fa::before,
[class^="icon-"]::before,
[class*=" icon-"]::before {
    direction: ltr !important;
}

img,
.header img,
.media-box img,
.wp-post-image {
    direction: ltr;
}

#wpadminbar,
#wpadminbar * {
    direction: ltr !important;
    text-align: left !important;
}

#wpadminbar [dir="rtl"] {
    direction: rtl !important;
    text-align: right !important;
}

code,
pre,
.prettyprint {
    direction: ltr !important;
    text-align: left !important;
}

/* ---------- 3. FOOTER ---------- */

body::after {
    content: "";
    display: block;
    clear: both;
    width: 100%;
    height: 0;
    padding-top: 8.4%;
    margin-top: 48px;
    background-image: url("https://hani2m.com/wp-content/uploads/2026/06/Sadu-landscape.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

/* ---------- 4. MOTION ---------- */

@keyframes vsFadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes vsFadeRight {
    from { opacity: 0; transform: translateX(46px); }
    to   { opacity: 1; transform: translateX(0); }
}

.timeline > h2,
.section-title,
.section-title + p,
.section-title + ul,
.content > p,
.content > ul,
.service,
.fun-fact,
.process-box,
.client,
.testimonial,
.media-cell,
a.button {
    animation: vsFadeUp 1.2s ease backwards;
}

.timeline .event {
    animation: vsFadeRight 1.2s ease backwards;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.section-title:nth-of-type(2) { animation-delay: 0.25s; }
.section-title:nth-of-type(3) { animation-delay: 0.50s; }
.section-title:nth-of-type(4) { animation-delay: 0.75s; }

.section-title + p,
.section-title + ul { animation-delay: 0.3s; }

a.button { animation-delay: 0.6s; }

.timeline .event:nth-of-type(1) { animation-delay: 0.20s; }
.timeline .event:nth-of-type(2) { animation-delay: 0.45s; }
.timeline .event:nth-of-type(3) { animation-delay: 0.70s; }
.timeline .event:nth-of-type(4) { animation-delay: 0.95s; }
.timeline .event:nth-of-type(5) { animation-delay: 1.20s; }
.timeline .event:nth-of-type(6) { animation-delay: 1.45s; }
.timeline .event:nth-of-type(7) { animation-delay: 1.70s; }
.timeline .event:nth-of-type(8) { animation-delay: 1.95s; }

.service:nth-of-type(2),
.fun-fact:nth-of-type(2),
.process-box:nth-of-type(2) { animation-delay: 0.25s; }

.service:nth-of-type(3),
.fun-fact:nth-of-type(3),
.process-box:nth-of-type(3) { animation-delay: 0.50s; }

.service:nth-of-type(4),
.fun-fact:nth-of-type(4),
.process-box:nth-of-type(4) { animation-delay: 0.75s; }

@supports (animation-timeline: view()) {
    .wrapper {
        overflow: clip;
    }

    .no-touch .container {
        overflow-x: clip;
    }

    .timeline > h2,
    .section-title,
    .section-title + p,
    .section-title + ul,
    .content > p,
    .content > ul,
    .service,
    .fun-fact,
    .process-box,
    .client,
    .testimonial,
    .media-cell,
    a.button,
    .timeline .event {
        animation-delay: 0s;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
    }
}

.timeline .event:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.10);
}

.timeline .event .date {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.service,
.testimonial {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service:hover,
.testimonial:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
}

a.button {
    transition: transform 0.2s ease, background-color 0.2s, color 0.1s, border-color 0.2s;
}

a.button:hover {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .timeline > h2,
    .section-title,
    .section-title + p,
    .section-title + ul,
    .content > p,
    .content > ul,
    .service,
    .fun-fact,
    .process-box,
    .client,
    .testimonial,
    .media-cell,
    a.button,
    .timeline .event,
    .timeline .event .date {
        animation: none !important;
    }
}