/* CSS Variables & Theme Setup */
:root {
    --bg-primary: #050B1D;
    /* Deep Navy */
    --bg-secondary: #0F162B;
    /* Lighter Navy for cards */
    --accent-color: #2880b2;
    /* New Blue */
    --accent-hover: #1c6591;
    /* Darker Blue */
    --text-primary: #FFFFFF;
    --text-secondary: #B4B5B9;
    --border-color: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(5, 11, 29, 0.8);
    --font-main: 'Cairo', sans-serif;
    --container-width: 1200px;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    direction: rtl;
    /* Enforce RTL */
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.highlight {
    color: var(--accent-color);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 50px;
    /* Pill shape */
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    border: 2px solid transparent;
}

.btn-primary {
    background-color: var(--accent-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(216, 50, 123, 0.4);
}

.btn-text {
    background: transparent;
    color: white;
}

.btn-text:hover {
    color: var(--accent-color);
}

.btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.btn-outline:hover {
    border-color: white;
    background: rgba(255, 255, 255, 0.05);
}

.btn-lg {
    padding: 15px 35px;
    font-size: 1.1rem;
}

/* Header */
.header {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-menu {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links li a {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.nav-links li a:hover {
    color: white;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mobile-only {
    display: none;
}

.hamburger {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */
.hero {
    padding: 160px 0 100px;
    /* Top padding for fixed header */
    position: relative;
    overflow: hidden;
}

.hero-bg-glow {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(40, 128, 178, 0.15) 0%, rgba(5, 11, 29, 0) 70%);
    border-radius: 50%;
    z-index: -1;
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.hero-content {
    flex: 1;
    max-width: 600px;
}

.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.badge-pill .dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-color);
}

.sub-headline {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.hero-features {
    margin-bottom: 40px;
}

.hero-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 1.05rem;
    color: white;
}

.hero-features li i {
    color: var(--accent-color);
}

.hero-cta {
    display: flex;
    gap: 15px;
}

/* Hero Image Area */
.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.image-wrapper {
    position: relative;
}

.placeholder-img {
    width: 450px;
    height: 450px;
    background: linear-gradient(135deg, #1e2a4a 0%, #0F162B 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

.floating-card {
    position: absolute;
    background: rgba(25, 35, 60, 0.9);
    backdrop-filter: blur(5px);
    padding: 15px 20px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.card-1 {
    bottom: 50px;
    right: -20px;
    animation: float 4s ease-in-out infinite;
}

.card-1 i {
    background: #4CD964;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Trust Bar */
/* Trust Bar */
.trust-bar {
    padding: 30px 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.logos-slider {
    height: 80px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.logos-slider::before,
.logos-slider::after {
    background: linear-gradient(to right, var(--bg-secondary) 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2;
}

/* Adjust gradient for RTL */
.logos-slider::before {
    left: 0;
    top: 0;
    transform: rotate(180deg);
}

.logos-slider::after {
    right: 0;
    top: 0;
}

.logos-slide-track {
    -webkit-animation: scroll 30s linear infinite;
    animation: scroll 30s linear infinite;
    display: flex;
    width: calc(200px * 15);
    /* 200px width * 15 items (5 logos * 3 sets) */
}

.client-logo {
    height: 80px;
    /* height of container */
    width: 200px;
    /* slide width */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
}

.client-logo img {
    max-height: 40px;
    /* Make logos smaller as requested */
    width: auto;
    opacity: 0.6;
    transition: all 0.3s ease;
    filter: grayscale(100%) brightness(1.2);
}

.client-logo img:hover {
    opacity: 1;
    filter: none;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(200px * 8));
    }

    /* Move positive X for RTL (right to left flow visually in RTL context may differ, but let's try standard logic first. Actually for RTL doc, standard negative translateX moves left. infinite loop needs correct direction.) */
}

/* Override direction for RTL naturally? Or force LTR for marquee? 
   Usually marquees just slide regardless. 
   If we want it to slide Right to Left (natural reading), it moves -X.
   If we want Left to Right, it moves +X.
*/
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(200px * 8));
    }

    /* Moving right? */
}

/* Let's try standard LTR-like movement logic adapted */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(200px * -5));
        /* Move LEFT by 1 set of 5 items */
    }
}

/* Features */
.features {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background: var(--bg-secondary);
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.icon-box {
    width: 60px;
    height: 60px;
    background: rgba(40, 128, 178, 0.1);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    font-size: 1.5rem;
    margin-bottom: 25px;
}

/* Footer */
.footer {
    padding: 50px 0 20px;
    background: #02050e;
    border-top: 1px solid var(--border-color);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: var(--text-secondary);
    font-size: 1.2rem;
}

.social-links a:hover {
    color: var(--accent-color);
}

/* Responsive */
@media (max-width: 992px) {

    .nav-links,
    .nav-actions {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .nav-menu.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--bg-secondary);
        padding: 20px;
        border-bottom: 1px solid var(--border-color);
    }

    .nav-menu.active .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
    }

    .nav-menu.active .mobile-only {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        align-items: stretch;
    }

    .hero-container {
        flex-direction: column;
        text-align: center;
        padding-top: 50px;
    }

    .hero-bg-glow {
        right: 50%;
        transform: translateX(50%);
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-features li {
        justify-content: center;
    }
}

/* Extra Features Section */
.extra-features {
    padding: 80px 0;
    background: linear-gradient(to bottom, var(--bg-primary), #02050e);
}

.extra-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.extra-card {
    background: rgba(15, 22, 43, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 30px 20px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Align content to the right for RTL */
    position: relative;
    overflow: hidden;
}

.extra-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: var(--accent-color);
    opacity: 0;
    transition: opacity 0.3s;
}

.extra-card:hover {
    background: rgba(15, 22, 43, 0.9);
    transform: translateY(-5px);
    border-color: rgba(40, 128, 178, 0.3);
}

.extra-card:hover::before {
    opacity: 1;
}

.card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 15px;
    text-align: right;
}

.extra-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #e0e0e0;
    margin: 0;
    line-height: 1.4;
    flex: 1;
}

.card-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    /* Soft square like image */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: all 0.3s;
}

/* On hover, light up the icon with the accent color */
.extra-card:hover .card-icon {
    color: var(--accent-color);
    background: rgba(40, 128, 178, 0.1);
}

.extra-cta-container {
    text-align: center;
    margin-top: 40px;
}

/* Responsive Grid for Extra Features */
@media (max-width: 992px) {
    .extra-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .extra-features-grid {
        grid-template-columns: 1fr;
    }

    .card-content {
        flex-direction: row-reverse;
        /* Icon left, text right on mobile if preferred, or keep as is */
    }
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-toggle i {
    font-size: 0.8rem;
    margin-right: 5px;
    transition: transform 0.3s;
}

.dropdown:hover .dropdown-toggle i {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    /* RTL alignment */
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    width: 220px;
    border-radius: 12px;
    padding: 15px 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    display: block;
    /* Ensure it's block for vertical list */
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    display: block;
    margin: 0;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    transition: all 0.3s;
}

.dropdown-menu li a:hover {
    background: rgba(40, 128, 178, 0.1);
    color: var(--accent-color);
    padding-right: 25px;
    /* Slight movement effect */
}

/* Mobile Dropdown */
@media (max-width: 992px) {
    .dropdown-menu {
        position: static;
        width: 100%;
        background: rgba(0, 0, 0, 0.2);
        box-shadow: none;
        border: none;
        display: none;
        /* Hidden by default on mobile */
        opacity: 1;
        visibility: visible;
        transform: none;
        padding-right: 20px;
    }

    .dropdown.active .dropdown-menu {
        display: block;
    }
}