:root {
    --primary-color: #007bff;
    /* Trustworthy Blue */
    --primary-dark: #0056b3;
    --accent-color: #28a745;
    /* Green for Whatsapp/Growth/Positive */
    --text-dark: #333333;
    --text-light: #666666;
    --bg-light: #f8f9fa;
    --white: #ffffff;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --radius: 8px;
    --font-family: 'Tajawal', sans-serif;
    /* Arabic Font */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--bg-light);
    padding-bottom: 70px;
    /* Space for sticky CTA */
    text-align: right;
    direction: rtl;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    padding: 0 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.btn-primary:active {
    transform: scale(0.98);
}

.btn-light {
    background-color: var(--white);
    color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-large {
    font-size: 1.2rem;
    padding: 16px 32px;
    width: 100%;
    /* Mobile full width */
    max-width: 350px;
}

/* Header */
.mobile-header {
    background: var(--white);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
}

.header-call-btn {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
    padding: 60px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-title {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 15px;
    color: var(--text-dark);
}

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

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 30px;
}

.availability-text {
    font-size: 0.9rem;
    color: var(--accent-color);
    margin-top: 15px;
    font-weight: 500;
}

.pulse-animation {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

/* Trust Section */
.trust-section {
    background: var(--white);
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.trust-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 15px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
}

.trust-item i {
    color: var(--accent-color);
    font-size: 1.1rem;
}

/* Services Section */
.services-section {
    padding: 60px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.8rem;
    color: var(--text-dark);
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.service-card {
    background: var(--white);
    padding: 30px;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-icon {
    width: 60px;
    height: 60px;
    background: #e3f2fd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--primary-color);
    font-size: 1.5rem;
}

.service-card h3 {
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.service-card p {
    font-size: 0.95rem;
    color: var(--text-light);
}

/* Benefits Section */
.benefits-section {
    background: var(--white);
    padding: 60px 0;
}

.benefits-list {
    max-width: 600px;
    margin: 0 auto;
}

.benefits-list li {
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 15px;
}

.benefits-list li i {
    color: var(--accent-color);
    font-size: 1.3rem;
}

/* Testimonials Section (Slider) */
.testimonials-section {
    background: #f1f8ff;
    /* Very light blue */
    padding: 60px 0;
}

.slider-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px 0;
}

.testimonials-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    direction: ltr;
    /* Force LTR for transform math */
}

.testimonial-slide {
    min-width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    flex-shrink: 0;
    direction: rtl;
    /* Content inside is RTL */
}

.testimonial-card {
    background: var(--white);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    border-right: 4px solid var(--primary-color);
    /* RTL: Border Right */
    border-left: none;
    margin: 0 auto;
    max-width: 600px;
}

.stars {
    color: #ffc107;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.testimonial-card p {
    font-size: 1.05rem;
    font-style: italic;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.client-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary-dark);
    display: block;
}

/* Slider Controls */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--white);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    color: var(--primary-color);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    z-index: 10;
}

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

.prev-btn {
    right: 10px;
    /* Logical "Previous" for LTR slider is Left, but visual placement... keep standard L/R for Prev/Next? */
    /* If next moves to left, next button should be on left? logic is confusing. 
       Standard: Prev on Left, Next on Right.
       Code has logic LTR. So next button slides track to left (showing right content).
       So Next button should be on right side physically? 
       Let's stick to standard physical locations: Prev Left, Next Right.
       But I flipped the icons in HTML? No, I flipped icons in CSS?
       HTML: prev-btn = chevron-right (because RTL "back" points right)
             next-btn = chevron-left (because RTL "forward" points left)
       CSS: prev-btn position? 
       If I use `prev-btn { left: 10px; }` it puts it on left.
       In RTL context, `left` means left side of screen.
       So: Prev Button (Left side, pointing Right) -> goes to previous slide.
           Next Button (Right side, pointing Left) -> goes to next slide.
       This seems intuitive for "browsing".
       Wait, in Arabic UI, "Next" (Forward) is usually Left. "Previous" (Back) is Right.
       Time flow is Right to Left.
       So: Start (Right) --> End (Left).
       Next slide should be on the Left. Previous slide (history) on the Right.
       So Next Button should be on Left. Prev Button on Right.
    */
    right: 10px;
    left: auto;
}

.next-btn {
    left: 10px;
    right: auto;
}

.slider-dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
}

/* CTA Section */
.cta-section {
    background: var(--primary-color);
    color: var(--white);
    padding: 60px 0;
    text-align: center;
}

.cta-section h2 {
    margin-bottom: 15px;
    font-size: 2rem;
}

.cta-section p {
    margin-bottom: 30px;
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Floating WhatsApp */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 90px;
    /* Above sticky bar */
    right: 20px;
    /* Keep on right side, easier for thumb on mobile usually? Or left for RTL? WhatsApp itself is LTR brand mostly, but in Arabic apps often FAB is left. Let's keep right for now to avoid drastic layout shift unless needed. */
    background-color: #25d366;
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatsapp-float:hover {
    background-color: #128c7e;
}

/* Sticky Mobile CTA */
.sticky-mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--white);
    padding: 10px 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 999;
}

.full-width {
    width: 100%;
    display: block;
}

/* Footer */
footer {
    background: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
    font-size: 0.9rem;
    margin-bottom: 60px;
}

/* Media Queries */
@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-title {
        font-size: 3rem;
    }

    .sticky-mobile-cta {
        display: none;
    }

    body {
        padding-bottom: 0;
    }

    .whatsapp-float {
        bottom: 40px;
    }
}

@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}