/* Reset */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Poppins',sans-serif;background:#f5f7fb;overflow-x:hidden;padding-top:80px;}
html,body{width:100%;}

/* Navbar */
.navbar{position:fixed;top:0;left:0;width:100%;z-index:1000;display:flex;justify-content:space-between;align-items:center;padding:20px 40px;background:#0d2c6c;color:#fff;flex-wrap:wrap;}
.menu-toggle{display:none;font-size:24px;cursor:pointer;color:#fff;}
.logo{font-size:28px;font-weight:700;color:#fff;text-decoration:none;display:inline-block;}
.logo span{color:red;}
.logo:visited,.logo:hover,.logo:active{color:#fff;text-decoration:none;}
.nav-links{display:flex;gap:20px;flex-wrap:wrap;}
.nav-links a{color:#fff;font-size:14px;text-decoration:none;transition:0.2s;}
.nav-links a:hover{color:#ffd43b;}
.navbar-right{display:flex;align-items:center;gap:15px;}
.btn{background:#ffd43b;padding:10px 20px;border-radius:8px;font-weight:600;color:#000;text-decoration:none;white-space:nowrap;}

/* Language Switcher */
.lang-btn{background:transparent;border:1px solid rgba(255,255,255,0.4);color:#fff;padding:5px 10px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:0.2s;}
.lang-btn:hover,.lang-btn.active{background:#ffd43b;color:#000;border-color:#ffd43b;}

/* Hero */
.hero{position:relative;width:100%;min-height:500px;padding:60px 60px 60px 100px;display:flex;align-items:center;color:#fff;overflow:hidden;justify-content:flex-start;}
.slider{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1s ease;z-index:0;}
.slide.active{opacity:1;}
.slider::after{content:"";position:absolute;inset:0;background:rgba(13,44,108,0.6);z-index:1;}
.hero-text{position:relative;z-index:2;max-width:600px;display:flex;flex-direction:column;gap:20px; display: none; }
.hero-text.active{display:flex;}
.hero-text h1{font-size:48px;line-height:1.2;}
.hero-buttons{display:flex;gap:15px;flex-wrap:wrap;}
.hero-buttons a{padding:12px 25px;border-radius:8px;font-weight:600;text-decoration:none;}
.primary{background:#ffd43b;color:#000;}
.primary:hover{color:#fff;}
.secondary{background:transparent;border:2px solid #fff;color:#fff;transition:0.3s;display:inline-block;}
.secondary:hover{background:#fff;color:#0d2c6c;}

/* About */
.about{display:flex;justify-content:space-between;align-items:center;padding:80px;gap:40px;max-width:1200px;margin:auto;}
.about-image img{width:100%; height: auto; border-radius:15px;}
.about .about-text .about-btn{margin-top:30px;}
.about-image{width:40%;}

/* Services */
.services{padding:60px 40px;}
.services h2,.services p{text-align:center;}
.services>p{margin-bottom:10px;color:#666;}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0;margin-top:40px;}
.service{background:#fff;padding:25px;border-radius:15px;text-align:center;box-shadow:0 10px 20px rgba(0,0,0,0.08);transition:0.3s;}
.service:hover{transform:translateY(-8px);}
.service img{width:100%;height:160px;object-fit:cover;border-radius:10px;margin-bottom:15px;}
.service h3{font-size:15px;margin-bottom:8px;color:#0d2c6c;}
.service p{font-size:13px;color:#666;margin-bottom:15px;}
.service-btn{display:inline-block;padding:8px 16px;border:1.5px solid #0d2c6c;color:#0d2c6c;border-radius:6px;text-decoration:none;font-size:13px;font-weight:600;transition:0.3s;}
.service-btn:hover{background:#0d2c6c;color:#fff;}

/* Technology Stack Ticker */
.tech-stack{padding:60px 0 50px;background:#fff;overflow:hidden;}
.tech-stack h2,.tech-stack p{text-align:center;padding:0 40px;}
.tech-stack>p{color:#666;margin-bottom:30px;}
.ticker-wrapper{overflow:hidden;width:100%;position:relative;padding:20px 0;}
.ticker-wrapper::before,.ticker-wrapper::after{content:'';position:absolute;top:0;width:100px;height:100%;z-index:2;}
.ticker-wrapper::before{left:0;background:linear-gradient(to right,#fff,transparent);}
.ticker-wrapper::after{right:0;background:linear-gradient(to left,#fff,transparent);}
.ticker-track{display:flex;gap:40px;width:max-content;animation:ticker 18s linear infinite;}
.ticker-track:hover{animation-play-state:paused;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ticker-item{flex-shrink:0;display:flex;align-items:center;justify-content:center;height:70px;padding:0 20px;}
.ticker-item img{height:50px;max-width:120px;object-fit:contain;filter:grayscale(60%);opacity:0.7;transition:0.3s;}
.ticker-item img:hover{filter:grayscale(0);opacity:1;}
.ticker-placeholder{background:#f0f4ff;color:#0d2c6c;font-weight:700;font-size:14px;padding:12px 24px;border-radius:8px;border:2px solid #dde3f0;white-space:nowrap; text-align: center;}

/* Cards (legacy, hidden - replaced by tech-stack) */
.cards{display:none;}

/* Footer */
.footer{background:linear-gradient(to right,#0d2c6c,#081a40);color:#fff;padding:60px 80px;}
.footer-container{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;}
.footer-logo{font-size:28px;font-weight:700;margin-bottom:10px;}
.footer-logo span{color:red;}
.footer h4{margin-bottom:15px;}
.footer p,.footer a{color:#ccc;font-size:14px;margin-bottom:8px;display:block;text-decoration:none;}
.footer-bottom{margin-top:40px;border-top:1px solid rgba(255,255,255,0.2);padding-top:20px;display:flex;justify-content:space-between;font-size:13px;color:#aaa;}
.social-icons{display:flex;gap:15px;margin-top:15px;}
.social-icons a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-size:18px;text-decoration:none;transition:0.3s;}
.social-icons a:hover{transform:scale(1.1);opacity:0.9;}
.facebook{background:#1877f2;}.linkedin{background:#0a66c2;}.whatsapp{background:#25d366;}

/* ===== POPUPS ===== */
.popup-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9999;justify-content:center;align-items:center;padding:20px;}
.popup-overlay.active{display:flex;}
.popup-box{background:#fff;border-radius:16px;padding:40px;max-width:620px;width:100%;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.3);animation:popupIn 0.3s ease;}
@keyframes popupIn{from{transform:translateY(-30px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.popup-box h2{color:#0d2c6c;margin-bottom:20px;font-size:22px;}
.popup-close{position:absolute;top:15px;right:20px;background:none;border:none;font-size:28px;cursor:pointer;color:#888;line-height:1;}
.popup-close:hover{color:#0d2c6c;}
.popup-content p{color:#444;font-size:14px;line-height:1.8;margin-bottom:14px;}
.industries-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px;}
.industry-item{display:flex;align-items:center;gap:12px;background:#f0f4ff;border-radius:10px;padding:16px 20px;font-weight:600;color:#0d2c6c;font-size:15px;transition:0.2s;}
.industry-item:hover{background:#dde8ff;}
.industry-item i{font-size:20px;color:#0d2c6c;}
.service-detail-list{list-style:none;padding:0;}
.service-detail-list li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#333;}
.service-detail-list li:last-child{border-bottom:none;}
.service-detail-list li i{color:#0d2c6c;margin-top:3px;font-size:16px;}

/* Contact / Quote Form */
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:13px;font-weight:600;color:#0d2c6c;margin-bottom:6px;}
.form-group input,.form-group textarea{width:100%;padding:10px 14px;border:1.5px solid #dde3f0;border-radius:8px;font-family:inherit;font-size:14px;color:#333;outline:none;transition:border 0.2s;}
.form-group input:focus,.form-group textarea:focus{border-color:#0d2c6c;}
.form-group textarea{resize:vertical;}
.submit-btn{width:100%;padding:13px;background:#0d2c6c;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:background 0.2s;}
.submit-btn:hover{background:#1a3f8f;}
.submit-btn:disabled{opacity:0.6;cursor:not-allowed;}
.form-note{text-align:center;font-size:13px;margin-top:10px;min-height:20px;}

/* ===== RTL Support ===== */
[dir="rtl"] .hero{padding:60px 100px 60px 60px;justify-content:flex-start;}
[dir="rtl"] .popup-close{right:auto;left:20px;}
[dir="rtl"] .footer{direction:rtl;}
[dir="rtl"] .footer-bottom{direction:rtl;}
[dir="rtl"] .navbar{direction:rtl;}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
    .navbar{flex-wrap:wrap;padding:15px 20px;}
    .menu-toggle{display:block;margin-left:auto;}
    .navbar-right{width:100%;justify-content:flex-start;padding-top:10px;}
    .nav-links{display:none;flex-direction:column;width:100%;background:#0d2c6c;padding:10px 0;gap:10px;}
    .nav-links.active{display:flex;}
    .about{flex-direction:column;text-align:center;padding:40px 20px;}
    .service-grid{grid-template-columns:repeat(2,1fr);}
    .footer-container{grid-template-columns:1fr 1fr;gap:30px;}
    .footer{padding:40px 30px;}
}
@media(max-width:600px){
    body{padding-top:60px;}
    .hero{height:calc(100vh - 60px);min-height:calc(100vh - 60px);padding:20px;justify-content:center;text-align:center;}
    .hero-text{align-items:center;max-width:100%;}
    .hero-text h1{font-size:26px;}
    .hero-buttons{justify-content:center;}
    .service-grid{grid-template-columns:1fr;}
    .footer-container{grid-template-columns:1fr;gap:20px;}
    .footer{padding:30px 20px;}
    .footer-bottom{flex-direction:column;gap:10px;text-align:center;}
    .industries-list{grid-template-columns:1fr;}
    .popup-box{padding:25px 20px;}
}












/* FIX 1: Remove extra gap between navbar and hero for all non-Arabic languages */
/* The body already has padding-top:80px from style.css which is correct */
/* When RTL (Arabic) the navbar wraps differently, we handle that */
[dir="ltr"] body { padding-top: 80px; }
[dir="rtl"] body { padding-top: 80px; }


/* FIX: footer_legal as clickable links */
a.footer-legal-link { cursor: pointer; color: #aaa; text-decoration: underline; display: inline; }
a.footer-legal-link:hover { color: #ffd43b; }

/* Dynamic sections from admin */
.dynamic-section { background: #fff; padding: 60px 40px; }
.dynamic-section h2 { text-align: center; color: #0d2c6c; margin-bottom: 10px; }
.dynamic-section > p { text-align: center; color: #666; margin-bottom: 40px; }
.dynamic-clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; }
.dynamic-client-card { background: #f8faff; border-radius: 14px; padding: 24px; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.07); transition: 0.3s; }
.dynamic-client-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(13,44,108,0.13); }
.dynamic-client-card img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; margin-bottom: 14px; }
.dynamic-client-card .no-img { width: 100%; height: 130px; background: linear-gradient(135deg,#0d2c6c,#1a4fa0); border-radius: 8px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 36px; }
.dynamic-client-card h3 { color: #0d2c6c; font-size: 16px; margin-bottom: 8px; }
.dynamic-client-card p { color: #666; font-size: 13px; line-height: 1.6; }

/* Service card edit mode indicator */
.service-edited-badge { display: inline-block; background: #ffd43b; color: #000; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-left: 6px; vertical-align: middle; }




.lang-selected{
    cursor: pointer;
}

.lang-dropdown{
    display: none;
}

.lang-switcher {
    position: relative;
    display: inline-block;
    font-size: 14px;
}

.lang-selected {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    user-select: none;
    transition: background 0.15s;
}

.lang-selected:hover {
    background: rgba(0, 0, 0, 0.06);
}

.lang-chevron {
    font-size: 10px;
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-end: 0;
    min-width: 150px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 999;
    overflow: hidden;
}

.lang-dropdown.open {
    display: block;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    cursor: pointer;
    text-decoration: none;
    color: #888;
    transition: background 0.12s;
    font-size: 13px;
    font-weight: 500;
}

.lang-option:hover {
    background: rgba(0, 0, 0, 0.05);
}

.lang-option.active {
    background: rgba(0, 0, 0, 0.04);
    font-weight: 600;
}

.flag-img {
    width: 20px;
    height: auto;
    border-radius: 2px;
    flex-shrink: 0;
}

.lang-name {
    color: #888;
    font-weight: 400;
    margin-inline-start: auto;
    padding-inline-start: 8px;
}

.text-end{
    text-align: end !important;
}