.text-arkan-navy { color: var(--arkan-navy) !important; }
.text-arkan-orange { color: var(--arkan-orange) !important; }
.text-arkan-navy\/70 { color: rgba(19, 51, 92, 0.7) !important; }
.text-arkan-orange\/20 { color: rgba(244, 127, 32, 0.2) !important; }

.bg-arkan-navy { background-color: var(--arkan-navy) !important; }
.bg-arkan-blue { background-color: var(--arkan-blue) !important; }
.bg-arkan-orange { background-color: var(--arkan-orange) !important; }
.bg-arkan-blue\/10 { background-color: rgba(29, 75, 117, 0.1) !important; }
.bg-arkan-blue\/20 { background-color: rgba(29, 75, 117, 0.2) !important; }
.bg-arkan-blue\/30 { background-color: rgba(29, 75, 117, 0.3) !important; }
.bg-arkan-orange\/20 { background-color: rgba(244, 127, 32, 0.2) !important; }
.bg-arkan-teal\/10 { background-color: rgba(35, 166, 154, 0.1) !important; }
.bg-arkan-teal\/15 { background-color: rgba(35, 166, 154, 0.15) !important; }
.bg-arkan-teal\/20 { background-color: rgba(35, 166, 154, 0.2) !important; }

.border-arkan-navy { border-color: var(--arkan-navy) !important; }
.border-arkan-orange { border-color: var(--arkan-orange) !important; }
.border-arkan-teal { border-color: var(--arkan-teal) !important; }
.border-arkan-navy\/20 { border-color: rgba(19, 51, 92, 0.2) !important; }
.border-arkan-blue\/30 { border-color: rgba(29, 75, 117, 0.3) !important; }
.border-arkan-teal\/20 { border-color: rgba(35, 166, 154, 0.2) !important; }
.border-arkan-teal\/25 { border-color: rgba(35, 166, 154, 0.25) !important; }

.ring-arkan-navy { --tw-ring-color: var(--arkan-navy) !important; }
.ring-arkan-orange { --tw-ring-color: var(--arkan-orange) !important; }

.from-arkan-navy {
    --tw-gradient-from: var(--arkan-navy) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(19, 51, 92, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-arkan-navy\/50 {
    --tw-gradient-from: rgba(19, 51, 92, 0.5) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(19, 51, 92, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-arkan-navy\/70 {
    --tw-gradient-from: rgba(19, 51, 92, 0.7) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(19, 51, 92, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-arkan-navy\/80 {
    --tw-gradient-from: rgba(19, 51, 92, 0.8) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(19, 51, 92, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-arkan-orange {
    --tw-gradient-from: var(--arkan-orange) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(244, 127, 32, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-arkan-blue { --tw-gradient-to: var(--arkan-blue) var(--tw-gradient-to-position); }
.to-arkan-blue\/50 { --tw-gradient-to: rgba(29, 75, 117, 0.5) var(--tw-gradient-to-position); }
.to-arkan-blue\/80 { --tw-gradient-to: rgba(29, 75, 117, 0.8) var(--tw-gradient-to-position); }
.to-arkan-navy { --tw-gradient-to: var(--arkan-navy) var(--tw-gradient-to-position); }

.shadow-arkan-navy\/10 { --tw-shadow-color: rgba(19, 51, 92, 0.1); --tw-shadow: var(--tw-shadow-colored); }
.shadow-arkan-navy\/20 { --tw-shadow-color: rgba(19, 51, 92, 0.2); --tw-shadow: var(--tw-shadow-colored); }
.shadow-arkan-navy\/30 { --tw-shadow-color: rgba(19, 51, 92, 0.3); --tw-shadow: var(--tw-shadow-colored); }
.shadow-arkan-navy\/40 { --tw-shadow-color: rgba(19, 51, 92, 0.4); --tw-shadow: var(--tw-shadow-colored); }
.shadow-arkan-orange\/30 { --tw-shadow-color: rgba(244, 127, 32, 0.3); --tw-shadow: var(--tw-shadow-colored); }

.hover\:bg-arkan-navy:hover { background-color: var(--arkan-navy) !important; }
.hover\:bg-arkan-blue:hover { background-color: var(--arkan-blue) !important; }
.hover\:bg-arkan-blue\/10:hover { background-color: rgba(29, 75, 117, 0.1) !important; }
.hover\:bg-arkan-blue\/30:hover { background-color: rgba(29, 75, 117, 0.3) !important; }
.hover\:bg-arkan-teal\/10:hover { background-color: rgba(35, 166, 154, 0.1) !important; }
.hover\:text-arkan-navy:hover { color: var(--arkan-navy) !important; }
.hover\:text-arkan-orange:hover { color: var(--arkan-orange) !important; }
.hover\:border-arkan-navy:hover { border-color: var(--arkan-navy) !important; }
.group:hover .group-hover\:text-arkan-orange { color: var(--arkan-orange) !important; }
.group:hover .group-hover\:border-arkan-orange { border-color: var(--arkan-orange) !important; }
.group:hover .group-hover\:bg-arkan-blue { background-color: var(--arkan-blue) !important; }
.group:hover .group-hover\:border-arkan-orange { border-color: var(--arkan-orange) !important; }
.group:hover .group-hover\:opacity-100 { opacity: 1 !important; }

body {
    font-variant-ligatures: contextual common-ligatures;
}

a,
button,
input,
select,
textarea {
    letter-spacing: inherit;
}

button,
.btn,
[class*="rounded-full"].font-bold,
[class*="rounded-xl"].font-bold {
    line-height: 1.15;
}

.uppercase {
    letter-spacing: 0.045em;
}

html[dir="rtl"] .uppercase {
    letter-spacing: 0;
}

.mobile-menu-open {
    transform: translateX(0%);
}

.desktop-nav {
    display: none !important;
}

@media (min-width: 1024px) {
    .desktop-nav {
        display: flex !important;
    }
}

@media (max-width: 1023px) {
    header .desktop-nav,
    header .desktop-nav *,
    header .desktop-nav .absolute {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

.mobile-menu-closed {
    transform: translateX(100%);
}

html[dir="rtl"] .mobile-menu-closed {
    transform: translateX(-100%);
}

html[dir="rtl"] .mobile-menu-open {
    transform: translateX(0%);
}

.rotate-180 {
    transform: rotate(180deg);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes moveLeftToRight {
    from { left: -100%; }
    to { left: 0%; }
}

.animate-move {
    animation: moveLeftToRight 2s linear forwards;
}

.no-scroll-bar::-webkit-scrollbar {
    display: none;
}

/* Gallery Swiper Linear Transition */
.gallery-swiper .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}

/* ---------------------------------------------------- */
/* PAGINATION STYLES */
/* ---------------------------------------------------- */

/* 1. Hero Slider Pagination (White for Dark Background) */
.mySwiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
}
.mySwiper .swiper-pagination-bullet-active {
    background: #ffffff !important;
    width: 20px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease;
}

/* 2. Testimonial Slider Pagination (Blue/Gray for Light Background) */
.testimonial-swiper .swiper-pagination-bullet {
    background: #cbd5e1 !important;
    opacity: 1 !important;
}
.testimonial-swiper .swiper-pagination-bullet-active {
    background: var(--arkan-navy) !important;
    width: 20px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease;
}

/* Performance Fixes */
.swiper-slide video, .swiper-slide img {
    will-change: transform;
}