/*
Theme Name: NAD
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Tags: translation-ready,accessibility-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce
Version: 1.4.2.1764452883
Updated: 2025-11-29 21:48:03

*/
/* =========================================
   ACCESSIBILITY & CONTRAST (FINAL VERSION)
   ========================================= */

/* 1. Gold Links & Headings */
.sub-heading-gold,
.text-gold,
a.svc-link,
.area-cta,
.naf-content-centered p a,
.area-content-page p a {
    color: #f5a524 !important;
    text-decoration: none;
}

.naf-content-centered p a:hover,
.area-content-page p a:hover {
    text-decoration: underline;
}

/* 2. Gold Buttons (Dark Text for Contrast) */
.btn-solid-gold,
.btn-large {
    background-color: #d4af37;
    color: #2b2005 !important;
    font-weight: 700;
}

/* 3. General Text Contrast (Dark Grey) */
.section-desc,
.lead-text,
.reviewer-loc,
.date,
.case-details p {
    color: #4a4a4a !important;
}

/* 4. Comparison Cards (Force Dark Text) */
.compare-card p,
.compare-card li,
.compare-card strong,
.compare-card h3,
.card-solution,
.card-solution p,
.card-solution strong,
.card-solution li,
.card-solution h3 {
    color: #000000 !important;
}

.card-solution .icon-check {
    color: #075E54 !important;
}

/* 5. Bold Text Highlighting */
.result-text strong,
.case-details strong {
    color: #000000 !important;
}

/* 6. WhatsApp Button (Darker Green) */
.btn-whatsapp-green {
    background-color: #075E54 !important;
    color: #ffffff !important;
}

/* 7. Footer Text (Light Grey on Dark) */
.site-footer .copyright,
.footer-bottom-bar {
    color: #cccccc !important;
}

/* 8. Skip Link (Screen Readers) */
.skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
    background: #000000;
    color: #FFFFFF;
    padding: 15px;
    z-index: 99999;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #f5a524;
}

.skip-link:focus {
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    clip: auto;
    outline: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
/* =========================================
   FOOTER STYLES (Add to style.css)
   ========================================= */

/* 1. Main Footer Container */
.site-footer {
    background-color: #1f4c83; /* Theme Color */
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

.footer-main {
    padding-top: 80px;
    padding-bottom: 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr; /* Col 1 is wider for text/map */
    gap: 40px;
}

/* 2. Column Styles */
.footer-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    color: #eebb5d; /* Gold Accent */
    margin-bottom: 25px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Brand & Text */
.footer-logo-link { text-decoration: none; }
.footer-about {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin: 20px 0;
}
.footer-about strong { color: #ffffff; }

/* Integrated Map */
.footer-map-integrated {
    border: 3px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 180px;
}

/* Links List */
.footer-links, .footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li { margin-bottom: 12px; }

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: #eebb5d;
    padding-left: 5px;
}

/* Contact List */
.footer-contact li {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}
.footer-contact a { color: #ffffff; text-decoration: none; }
.footer-contact .icon { color: #eebb5d; }

/* Social Icons */
.footer-socials {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.social-link {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    transition: 0.3s;
}

.social-link:hover {
    background: #eebb5d;
    color: #215a5d;
    transform: translateY(-3px);
}

/* 3. Bottom Bar & Developer Credit */
.footer-bottom-bar {
    background-color: rgba(0, 0, 0, 0.2); /* Slightly darker shade */
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Light horizontal line */
}

.bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.developer a {
    color: #eebb5d;
    text-decoration: none;
    font-weight: 700;
}
.developer a:hover { text-decoration: underline; }

/* =========================================
   4. FLOATING BUTTONS (Pulsing Glow)
   ========================================= */
.float-btn {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    /* Pulse Animation */
    animation: pulse-glow 2s infinite;
}

/* WhatsApp (Left Bottom or Right Bottom? Usually Right) */
.float-whatsapp {
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
}

/* Phone (Left Bottom - Mobile Only) */
.float-phone {
    bottom: 30px;
    left: 30px;
    background-color: #eebb5d; /* Gold */
    display: none; /* Hidden on Desktop */
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* =========================================
   5. RESPONSIVE MEDIA QUERIES
   ========================================= */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-map-integrated { height: 250px; }
    
    .bottom-flex {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    /* Show Phone Button on Mobile */
    .float-phone {
        display: flex;
    }
    
    /* Adjust WhatsApp position slightly to balance */
    .float-whatsapp {
        right: 20px;
        bottom: 20px;
    }
    .float-phone {
        left: 20px;
        bottom: 20px;
    }
}

/* =========================================
   FOOTER PREMIUM SEPARATOR & LOGO FIX
   ========================================= */

/* 1. The Container */
.site-footer {
    background-color: #1f4c83; /* Brand Teal */
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    position: relative; /* Required for the separator line */
    
    /* Optional: Deep Shadow to lift content above it */
    box-shadow: 0 -10px 30px rgba(0,0,0,0.15); 
}

/* 2. THE GOLDEN SEPARATOR LINE */
/* This prevents the footer from merging with the CTA above it */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px; /* Thickness of the line */
    
    /* The Magic: A Gradient from Teal to Gold and back */
    background: linear-gradient(
        90deg, 
        #215a5d 0%, 
        #eebb5d 50%, 
        #215a5d 100%
    );
    
    z-index: 10;
}

/* 3. LOGO SIZING (Crucial since you switched to Image) */
.footer-logo {
    max-width: 180px; /* Prevents it from being huge */
    height: auto;
    display: block;
    margin-bottom: 20px;
    
    /* Optional: Brightness filter if your logo is dark */
    /* filter: brightness(0) invert(1); */ 
}

/* 4. Social Icons Fix (Ensures alignment) */
.footer-socials {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    align-items: center;
}

.social-link svg {
    display: block; /* Removes weird gaps inside the circle */
}

/* 5. Mobile Adjustment for the Line */
@media (max-width: 768px) {
    .site-footer::before {
        height: 4px; /* Slightly thinner on mobile */
    }
}

/* FORCE FOOTER CONTAINMENT */
.site-footer .container {
    max-width: 1240px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important; /* Safety Gap Left */
    padding-right: 24px !important; /* Safety Gap Right */
    box-sizing: border-box;
}

/* Ensure the grid doesn't overflow */
.footer-grid {
    width: 100%;
    max-width: 100%;
}
/* ============================================
   SINGLE POST SIDEBAR — MATCH ARCHIVE DESIGN
   ============================================ */

/* Sidebar widget card */
.single-post .widget {
    background: #fff;
    padding: 25px 30px;
    border-radius: 8px;
    border: 1px solid #eee;
    margin-bottom: 30px;
}

/* Title + top decorative line */
.single-post .widget-title,
.single-post .widgettitle {
    font-size: 1.2rem;
    font-weight: 700;
    color: #215a5d;
    margin-bottom: 10px;
    position: relative;
}

.single-post .widget-title::before,
.single-post .widgettitle::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: #215a5d;
    margin-bottom: 12px;
}

/* List items */
.single-post .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.single-post .widget ul li {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.single-post .widget ul li:last-child {
    border-bottom: none;
}

.single-post .widget ul li a {
    color: #333;
    font-weight: 600;
    text-decoration: none;
    transition: 0.25s;
}

.single-post .widget ul li a:hover {
    color: #215a5d;
}
/*Language Switcher*/
/* =========================================
   NAF MOVERS: LANGUAGE TOGGLE (CLICK FIXED)
   ========================================= */

/* --- 1. THE CONTAINER (Teal Background) --- */
.lang-toggle-wrapper {
    position: relative;
    width: 100px;        
    height: 36px;
    background: #f5a524; /* Theme Teal */
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
    overflow: hidden; /* Keeps the toggle clean */
}

/* --- 2. THE KNOB (White Circle) --- */
.naf-knob {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 28px;
    height: 28px;
    background: #ffffff;
    border-radius: 50%;
    z-index: 10000; /* Visible above text */
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    pointer-events: none; /* KEY: Clicks pass through the knob to the link below */
}

/* Knob Movement Logic (When Arabic is Active) */
html[lang="ar"] .naf-knob {
    transform: translateX(64px); /* Slides to the right */
}

/* --- 3. TEXT LABELS (EN / AR) --- */
.lang-toggle-wrapper::before {
    content: "EN";
    position: absolute;
    left: 14px;
    color: #ffffff; /* Dimmed when inactive */
    font-size: 11px;
    font-weight: 800;
    z-index: 1;
    transition: 0.3s;
    pointer-events: none;
}

.lang-toggle-wrapper::after {
    content: "AR";
    position: absolute;
    right: 14px;
    color: #ffffff; /* Dimmed when inactive */
    font-size: 11px;
    font-weight: 800;
    z-index: 1;
    transition: 0.3s;
    pointer-events: none;
}

/* Highlight Active Text */
html[lang="en-US"] .lang-toggle-wrapper::before,
html[lang="en-GB"] .lang-toggle-wrapper::before { color: #fff; }

html[lang="ar"] .lang-toggle-wrapper::after { color: #fff; }


/* --- 4. THE CLICK ENGINE (The Fix) --- */

/* A. Target the TranslatePress container */
.lang-toggle-wrapper .trp-language-switcher {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 50 !important; /* Highest Layer */
    opacity: 0; /* Invisible but present */
    display: flex !important;
}

/* B. Hide the "Current Language" text (It blocks clicks) */
.lang-toggle-wrapper .trp-ls-shortcode-current-language {
    display: none !important;
}

/* C. Force the "Other Languages" list to fill the space */
.lang-toggle-wrapper .trp-ls-shortcode-language {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* D. EXPAND THE LINK TO COVER EVERYTHING */
/* This makes the invisible link cover the whole button */
.lang-toggle-wrapper .trp-ls-shortcode-language a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0;
    left: 0;
    cursor: pointer !important;
    font-size: 0 !important; /* Hides any text generated by plugin */
}

/*services area style*/
/* =========================================
   AREA CONTENT PAGE (Simple Text Layout)
   ========================================= */

/* Main Container Card Styling */
.area-content-page {
    max-width: 1000px;
    margin: 60px auto;
    padding: 60px;
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    font-family: system-ui, -apple-system, sans-serif;
    color: #444444;
}

/* Headings: Dark Blue with Gold Accent */
.area-content-page h2 {
    font-size: 2.2rem;
    color: #1F4C88;
    margin-top: 0;
    margin-bottom: 30px;
    font-weight: 800;
    line-height: 1.2;
    padding-left: 24px;
    border-left: 6px solid #F4C430;
    position: relative;
}

/* Optional: The dark blue decorative block next to H2 */
.area-content-page h2::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 10%;
    height: 80%;
    width: 12px;
    background-color: #0D2B4D;
    border-radius: 0 4px 4px 0;
}

/* Sub-headings: Dark Blue */
.area-content-page h3 {
    font-size: 1.4rem;
    color: #1F4C88;
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Paragraphs: Clean Readable Text */
.area-content-page p {
    font-size: 1.125rem;
    color: #555555;
    line-height: 1.7;
    margin-bottom: 24px;
}

/* Lists Styling */
.area-content-page ul {
    margin-bottom: 35px;
    padding-left: 0;
    list-style: none;
}

/* List Items */
.area-content-page ul li {
    font-size: 1.05rem;
    color: #444444;
    margin-bottom: 12px;
    padding-left: 20px;
    border-left: 3px solid #E0E0E0;
    margin-left: 5px;
}

/* Divider */
.area-content-page hr {
    border: 0;
    height: 1px;
    background: #E5E5E5;
    margin: 60px 0;
}

/* Strong/Bold Text Accent */
.area-content-page strong {
    color: #1F4C88;
    font-weight: 700;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .area-content-page { padding: 20px; margin: 20px; border-radius: 16px; }
    .area-content-page h2 { font-size: 1.65rem; padding-left: 15px; border-left-width: 4px; }
    .area-content-page h2::before { display: none; }
    .area-content-page h3 { font-size: 1.2rem; }
    .area-content-page p, .area-content-page ul li { font-size: 1rem; }
}

/* =========================================
   GLOBAL RTL SUPPORT (ARABIC FLIP)
   ========================================= */

/* 1. Base Flip: Sets direction to Right-to-Left and aligns text right */
body.rtl {
    direction: rtl;
    text-align: right;
}

/* 2. Fix Lists: Moves bullet points from Left to Right side */
body.rtl ul, 
body.rtl ol {
    padding-left: 0;
    padding-right: 20px;
}

/* 3. Fix Icons: Flips margins for icons (like checkmarks in your lists) */
body.rtl .icon-check, 
body.rtl .icon-x,
body.rtl .btn-text-arrow svg,
body.rtl .why-icon {
    margin-right: 0; /* Remove English margin */
    margin-left: 10px; /* Add Arabic margin */
}

/* 4. PROTECT CENTERED CONTENT 
   (Ensures headings and centered sections do NOT shift right) */
body.rtl .text-center,
body.rtl .section-header,
body.rtl .naf-content-centered,
body.rtl .naf-service-card,  /* Cards usually look better centered/balanced */
body.rtl .why-item {
    text-align: center;
}

/* 5. Flip Float/Flex Logic if needed */
body.rtl .naf-grid-2, 
body.rtl .naf-grid-3, 
body.rtl .naf-grid-4 {
    /* CSS Grid handles RTL automatically if direction is set to rtl */
    direction: rtl;
}