/*
==============================================
FONTS & GENERAL STYLES
==============================================
*/

@font-face {
    font-family: 'Runalto';
    src: url('Runalto.otf') format('opentype');
}

/* --- CSS Custom Properties for Theming --- */
:root {
    --primary-bg: #eae6e5;
    --secondary-bg: #e1dbdb;
    --contrast-bg: #dbd2cb;
    --accent: #C58940;
    --heading: #935824;
    --text: #5c4b3c;
    --nevada-font: "Nevada Serial", sans-serif;
    --amiri-font: "Amiri", serif;
}

/* Base Body Styles */
body {
  font-family: 'Runalto', sans-serif;
    background-color: var(--primary-bg);
    color: var(--text);
    font-size: 1.05rem; /* Increased base font size */
    line-height: 1.6;
}

/* Arabic Body Styles */
html[dir="rtl"] body {
    font-family: var(--amiri-font);
}

/* --- Font Definition for Custom Font --- */
@font-face {
    font-family: 'Nevada Serial Regular';
    src: url('../fonts/NevadaSerial-Regular.woff2') format('woff2'),
         url('../fonts/NevadaSerial-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: var(--primary-bg);
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal overflow */
}

/* --- Apply English & Turkish Font --- */
html[lang="en"] body,
html[lang="tr"] body {
  font-family: 'Runalto', sans-serif;
}

/* --- Apply Arabic Font --- */
html[lang="ar"] body {
    font-family: 'Amiri', serif;
}


/* WebKit-specific scrollbar pseudo-elements */
body::-webkit-scrollbar {
    width: 11px; /* عرض شريط التمرير الرأسي */
    height: 10px; /* ارتفاع شريط التمرير الأفقي */
}

/* Track */
body::-webkit-scrollbar-track {
    background: #ffffff1f; 
    border-radius: 2px; /* تقويس حواف المسار */
}

/* Handle (the draggable part) */
body::-webkit-scrollbar-thumb {
    background: #C58940; /* لون المقبض */
    border-radius: 1px; /* تقويس حواف المقبض */
    border: 1px solid #C58940; /* حدود حول المقبض تتطابق مع لون المسار لخلق تأثير هامش */
}

/* Handle on hover */
body::-webkit-scrollbar-thumb:hover {
    border: 1px solid #935824;
    background: #935824; /* لون المقبض عند التحويم */
}

/* Corner (if both horizontal and vertical scrollbars are present) */
body::-webkit-scrollbar-corner {
    background: #ffffff1f;  /* لون الزاوية */
}

/* --- Footer Styles --- */
.copyright-bar {
    background-color: #856a49;
    color: #ffffff;               /* لون الخط الأبيض */
    text-align: center;            /* توسيط النص */
    padding: 0px 10px;            /* مساحة داخلية */
    font-size: 14px;               /* حجم الخط */
    width: 35%;                   /* تأكد من أنه يملأ عرض الشاشة */
    /* ✅ *** هذا هو الجزء الجديد لقص الأطراف بشكل مستقيم *** */
    /* نستخدم clip-path لرسم شكل مضلع */
    clip-path: polygon(
        0% 100%,     /* النقطة السفلية اليسرى */
        100% 100%,    /* النقطة السفلية اليمنى */
        100% 65px,   /* النقطة العلوية اليمنى (مع إزاحة للأسفل) */
        calc(100% - 65px) 0%, /* النقطة العلوية اليمنى (بعد القص) */
        65px 0%,      /* النقطة العلوية اليسرى (قبل القص) */
        0% 65px      /* النقطة العلوية اليسرى (مع إزاحة للأسفل) */
    );
    
}

.copyright-bar p {
    margin: 0; /* إزالة أي هوامش إضافية */
}

.copyright-bar .credit-link {
    text-decoration: none;        /* إزالة الخط تحت الرابط */
    font-weight: bold;            /* جعل الخط عريضًا */
    transition: color 0.3s ease;  /* تأثير انتقال ناعم */
}

    .copyright-bar .credit-link:hover {
        color: #d3945c; /* تغيير لون الرابط عند مرور الماوس */
    }
    footer{
        padding-bottom: 0!important;
    }
    @media(max-width:375px){
        .copyright-bar {
                width: 100%;
                padding: 0px 10px;            /* مساحة داخلية */
                font-size: 10px; 
                width: 100%;
                clip-path: polygon(
                0% 100%,     /* النقطة السفلية اليسرى */
                100% 100%,    /* النقطة السفلية اليمنى */
                100% 30px,   /* النقطة العلوية اليمنى (مع إزاحة للأسفل) */
                calc(100% - 15px) 0%, /* النقطة العلوية اليمنى (بعد القص) */
                15px 0%,      /* النقطة العلوية اليسرى (قبل القص) */
                0% 30px      /* النقطة العلوية اليسرى (مع إزاحة للأسفل) */
            );
        }
        
    }
@media(max-width:625px){
    .copyright-bar {
        clip-path: polygon(
            0% 100%,     /* النقطة السفلية اليسرى */
            100% 100%,    /* النقطة السفلية اليمنى */
            100% 45px,   /* النقطة العلوية اليمنى (مع إزاحة للأسفل) */
            calc(100% - 30px) 0%, /* النقطة العلوية اليمنى (بعد القص) */
            30px 0%,      /* النقطة العلوية اليسرى (قبل القص) */
            0% 45px      /* النقطة العلوية اليسرى (مع إزاحة للأسفل) */
        );
   }
}
@media(max-width:1023px){
    .copyright-bar {
        width: 100%;
        padding: 5px 0;
    }

}
@media(min-width:1024px) and (max-width:1300px){
    .copyright-bar {
        width: 55%;
        padding: 5px 0;
    }
        
}
/*
==============================================
COLOR & THEME DEFINITIONS
==============================================
*/
.bg-primary { background-color: var(--primary-bg); }
.bg-secondary { background-color: var(--secondary-bg); }
.bg-contrast { background-color: var(--contrast-bg); }
.text-heading { color: var(--heading); }
.accent-color { color: var(--accent); }
.bg-accent { background-color: var(--accent); }
.border-accent { border-color: var(--accent); }

/*
==============================================
HEADER & NAVIGATION STYLES
==============================================
*/
header {
    transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.header-scrolled {
    background-color: var(--contrast-bg);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.nav-link {
    color: white;
    transition: color 0.2s ease-in-out;
    font-size: 1rem;
    padding: 0.5rem 0;
}
.header-scrolled .nav-link {
    color: var(--heading);
}
.header-scrolled .nav-link:hover {
    color: var(--accent);
}
.nav-link:hover {
    color: #f0f0f0;
}
.header-scrolled #mobile-menu-button {
     color: var(--heading);
}
.header-scrolled img {
    filter: brightness(0.5);
}

/* Desktop Dropdown & Submenus */
.dropdown-menu {
    position: absolute;
    top: 100%;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    min-width: 220px; /* Increased width */
    padding: 0.5rem 0;
}
.dropdown-link {
    display: block;
    padding: 0.75rem 1.5rem; /* Increased padding */
    color: var(--text);
    transition: all 0.2s;
    font-size: 0.95rem;
    white-space: nowrap;
}
.dropdown-link:hover {
    background-color: var(--primary-bg);
    color: var(--accent);
}

html[dir="ltr"] .dropdown-menu { left: 0; }
html[dir="rtl"] .dropdown-menu { right: 0; }

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

/* Submenu Specifics */
.submenu {
    top: -0.5rem; /* Align with parent item */
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px) translateY(0);
}
html[dir="ltr"] .submenu { left: 100%; }
html[dir="rtl"] .submenu { right: 100%; transform: translateX(-10px) translateY(0); }

.group\/submenu:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) translateY(0);
}

.submenu-arrow, .submenu-arrow-rtl {
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform 0.2s;
}
.group\/submenu:hover .submenu-arrow { transform: translateX(2px); }
.group\/submenu:hover .submenu-arrow-rtl { transform: translateX(-2px); }

/* Mobile Accordion */
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0;
    font-size: 1.25rem;
    color: var(--heading);
}
.accordion-header:hover {
    color: var(--accent);
}
.accordion-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}
.accordion-header.active .accordion-icon {
    transform: rotate(180deg);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}
html[dir="ltr"] .accordion-content {
    padding-left: 1rem;
}
html[dir="rtl"] .accordion-content {
    padding-right: 1rem;
}
.accordion-content a {
    display: block;
    padding: 0.5rem 0;
    color: var(--text);
}
.accordion-content a:hover {
    color: var(--accent);
}

/*
==============================================
HERO SLIDER
==============================================
*/
.hero-slider {
    height: 100vh;
    position: relative;
}
.swiper-slide {
    background-size: cover;
    background-position: center;
}
.swiper-button-next, .swiper-button-prev {
    color: #ffffff;
    transition: transform 0.2s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    transform: scale(1.1);
}
.swiper-pagination-bullet-active {
    background-color: var(--accent);
}

.autoplay-progress {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--accent);
}
html[dir="rtl"] .autoplay-progress {
    right: auto;
    left: 16px;
}
.autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
    stroke: var(--accent);
}

/*
==============================================
YOUR JOURNEY - TICKER STYLES
==============================================
*/
.ticker-wrap {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.ticker {
    display: inline-flex;
    white-space: nowrap;
    animation: ticker-scroll 40s linear infinite;
}
html[dir="rtl"] .ticker {
    animation-name: ticker-scroll-rtl;
}
.ticker-wrap:hover .ticker {
    animation-play-state: paused;
}
.ticker-item {
    display: flex;
    flex-direction: column; /* Ensures vertical alignment */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 320px; /* Increased width */
    max-width: 80vw;
    margin: 0 1rem;
    padding: 2rem;
    background-color: #ffffff3a;
    border-radius: 1rem;
    text-align: center;
    white-space: normal; /* Allows text to wrap */
}
.ticker-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.step-number {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem auto;
    background-color: var(--accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    border: 4px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex-shrink: 0;
}
.step-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--heading);
    margin-bottom: 0.5rem;
}
.step-desc {
    font-size: 0.95rem;
    color: var(--text);
    flex-grow: 1;
}
@keyframes ticker-scroll {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
@keyframes ticker-scroll-rtl {
    0% { transform: translateX(0%); }
    100% { transform: translateX(50%); }
}

/*
==============================================
ANIMATION STYLES
==============================================
*/
.animate {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate.is-visible {
    opacity: 1;
    transform: none;
}
.slide-in-up { transform: translateY(40px); }
.fade-in { /* No transform, just fades in */ }
html[dir="ltr"] .slide-in-left { transform: translateX(0px); }
html[dir="ltr"] .slide-in-right { transform: translateX(0px); }
html[dir="rtl"] .slide-in-left { transform: translateX(0px); }
html[dir="rtl"] .slide-in-right { transform: translateX(0px); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

  .service-card-face {
            @apply bg-secondary rounded-xl shadow-lg overflow-hidden transition-all duration-300 ease-in-out;
        }
        .service-card-face:hover {
            @apply shadow-2xl transform scale-[1.03];
        }
        .service-card-face img {
             @apply w-full h-56 object-cover; /* Fixed height for consistency */
        }
        .service-card-face .content {
            @apply p-6 text-center;
        }
         .service-card-face .learn-more-link {
             @apply inline-block mt-4 font-semibold text-accent hover:text-accent-dark transition-colors;
         }
         /* Custom checkmark list */
        .checkmark-list li {
            position: relative;
            padding-left: 1.75rem; /* Space for checkmark */
            margin-bottom: 0.75rem;
        }
        .checkmark-list li::before {
            content: '✔'; /* Checkmark symbol */
            position: absolute;
            left: 0;
            color: var(--accent); /* Accent color for checkmark */
            font-weight: bold;
            font-size: 1.1em;
        }

/*
==============================================
FOOTER STYLES
==============================================
*/
.footer-link {
    color: var(--text);
    transition: color 0.3s ease;
}
.footer-link:hover {
    color: var(--accent);
}
.social-icon {
    height: 3rem;
    width: 3rem;
    background-color: var(--contrast-bg);
    color: var(--heading);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.3s ease;
}
.social-icon:hover {
    background-color: var(--accent);
    color: white;
    transform: scale(1.1);
}

/* ==============================================
   RTL SPECIFIC FIXES (ARABIC)
   ============================================== */
/*
 * RTL Fix for Tailwind's space-x-* utility.
 * This adds a margin to the first child of a flex container that uses space-x,
 * balancing the layout visually in right-to-left languages.
*/

/* Header Navigation for Arabic */
html[dir="rtl"] header nav .lg\:flex.space-x-6 > :first-child {
    margin-left: 1.5rem;
}

/* Footer Social Icons for Arabic */
html[dir="rtl"] footer .flex.space-x-4 > :first-child {
    margin-left: 1rem;
}

.mobile-accordion > div {
    overflow:scroll;
}
@media(min-width:1024px){
   section img{
        width: 50%!important;
        margin: auto;
    }
}

/* =========================================
   2. Typography & Direction
   ========================================= */
body {
    font-family: 'Plus Jakarta Sans', sans-serif; /* Default for EN/TR */
    color: var(--text);
    line-height: 1.6;
}

/* Override font specifically for Arabic pages */
html[lang="ar"] body {
    font-family: 'Amiri', serif;
}


/* =========================================
   3. Text & Lists (Prose)
   ========================================= */
.prose { color: var(--text); }
.prose h2, .prose h3, .prose h4 { color: var(--heading); margin-top: 1.5em; margin-bottom: 0.5em; }
.prose strong { color: var(--heading); }
.prose ul > li::marker { color: var(--accent); }

/* Smart Padding: Automatically flips based on LTR/RTL */
.prose ul, .prose ol {
    padding-inline-start: 1.5rem; 
    padding-inline-end: 0;
}

/* =========================================
   4. Features Grid (Icons)
   ========================================= */
.feature-icon-wrapper {
    transition: transform 0.2s ease-in-out;
    display: inline-block;
}
.feature-icon-wrapper:hover {
    transform: scale(1.1);
}
.feature-icon {
    color: var(--accent);
    background-color: var(--contrast-bg);
    border-radius: 50%;
    padding: 0.75rem;
    margin: 0 auto 1rem;
    display: inline-flex;
}

/* =========================================
   5. Comparison Cards
   ========================================= */
.comparison-card {
    background-color: var(--secondary-bg);
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
    
    /* Smart Border: Left for English, Right for Arabic automatically */
    border-inline-start: 4px solid var(--accent); 
}

.comparison-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--accent-dark);
}

/* =========================================
   6. FAQ Section (Accordion)
   ========================================= */
.faq-item {
    background-color: var(--secondary-bg);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    margin-bottom: 1rem;
}
.faq-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.faq-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.25rem;
    font-weight: bold;
    color: var(--heading);
    background-color: var(--secondary-bg);
    transition: background-color 0.3s;
    cursor: pointer;
    
    /* Smart Alignment: Left for EN, Right for AR */
    text-align: start; 
}
.faq-item-header:hover {
    background-color: rgba(var(--color-contrast-rgb), 0.1);
}
.faq-item-header svg {
    transition: transform 0.3s;
    flex-shrink: 0;
    
    /* Smart Margin: Adds space between text and icon automatically */
    margin-inline-start: 1rem; 
}
.faq-item-header.active svg {
    transform: rotate(180deg);
}
.faq-item-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    background-color: var(--secondary-bg);
}
.faq-item-content p {
    padding: 0 1.25rem 1.25rem;
    color: var(--text);
}

/* =========================================
   7. Timeline (Vertical Steps)
   ========================================= */
.timeline-item {
    position: relative;
    /* Smart Padding: Left for EN, Right for AR */
    padding-inline-start: 2.5rem; 
    padding-bottom: 2rem;
}
.timeline-item:last-child {
    padding-bottom: 0;
}

/* The Vertical Line */
.timeline-item::before {
    content: '';
    position: absolute;
    /* Smart Position: Places line correctly for both languages */
    inset-inline-start: 0.5rem; 
    top: 0.5rem;
    bottom: -0.5rem;
    width: 2px;
    background-color: var(--contrast-bg);
    opacity: 0.75;
}
.timeline-item:last-child::before {
    display: none;
}

/* The Dot */
.timeline-dot {
    position: absolute;
    /* Smart Position: Places dot correctly for both languages */
    inset-inline-start: 0; 
    top: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: var(--accent);
    border: 4px solid var(--primary-bg);
    z-index: 10;
}

/* =========================================
   8. Checkmark List (Lists with Tick Icons)
   ========================================= */
.checkmark-list li {
    position: relative;
    /* Smart Padding for the icon space */
    padding-inline-start: 1.75rem; 
    margin-bottom: 0.75rem;
}
.checkmark-list li::before {
    content: '✔'; 
    position: absolute;
    /* Smart Position for the icon */
    inset-inline-start: 0; 
    color: var(--accent); 
    font-weight: bold;
    font-size: 1.1em;
}