/* start bot */


/* HFC Elite Assistant - Professional Stylesheet 
   Gradient: linear-gradient(66deg, rgb(63 94 251) 0%, rgb(0 188 212) 100%)
*/

:root {
    --main-gradient: linear-gradient(66deg, rgb(63 94 251) 0%, rgb(0 188 212) 100%);
    --accent-blue: rgb(63, 94, 251);
    --bot-bg: #f2f5f9;
    --shadow-deep: 0 15px 35px rgba(0, 0, 0, 0.2);
}








/* اللغة الإنجليزية */
body.lang-en,
body:not(.lang-ar) { /* افتراضي */
    font-family: 'Poppins', sans-serif;
}

/* اللغة العربية */
body.lang-ar {
    font-family: 'Almarai', sans-serif;
}

/* (اختياري) تحسين اتجاه العناوين في RTL */
body.lang-ar h1,
body.lang-ar h2,
body.lang-ar h3,
body.lang-ar p,
body.lang-ar a,
body.lang-ar span,
body.lang-ar div,
body.lang-ar button {
    font-family: 'Almarai', sans-serif;
}








/* 1. أيقونة الشات مع تأثير النبض */
#chat-icon { 
    position: fixed; bottom: 25px; left: 25px; z-index: 99999;
    background: var(--main-gradient);
    color: #fff; border-radius: 50%; width: 65px; height: 65px; 
    display: flex; align-items: center; justify-content: center; 
    cursor: pointer; font-size: 28px; box-shadow: var(--shadow-deep); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

#chat-icon::before {
    content: ''; position: absolute; width: 100%; height: 100%;
    background: var(--main-gradient); border-radius: 50%; z-index: -1;
    animation: pulseBorder 2s infinite; opacity: 0.6;
}

@keyframes pulseBorder {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* 2. نافذة الشات والأنيميشن الجذاب */
#chat-window { 
    position: fixed; bottom: 105px; left: 25px; width: 380px; 
    height: 70vh; max-height: 580px; background: #fff; 
    border-radius: 24px; display: none; flex-direction: column; 
    box-shadow: var(--shadow-deep); overflow: hidden; z-index: 99998;
    border: 1px solid rgba(0,0,0,0.05);
}

/* أنيميشن الدخول (النافذة + المحتوى) */
#chat-window.active {
    display: flex !important;
    animation: entranceAnim 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#chat-window.active #chat-box, 
#chat-window.active #chat-header,
#chat-window.active #chat-input {
    animation: contentReveal 0.8s ease-out 0.2s both;
}

@keyframes entranceAnim {
    0% { opacity: 0; transform: scale(0.5) translateY(100px) rotate(-5deg); filter: blur(15px); }
    100% { opacity: 1; transform: scale(1) translateY(0) rotate(0); filter: blur(0); }
}

@keyframes contentReveal {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 3. الهيدر */
#chat-header { 
    background: var(--main-gradient); color: #fff !important; 
    padding: 20px; font-weight: 800; display: flex; 
    justify-content: space-between; align-items: center; font-size: 17px;
}

#chat-header button { 
    border: none; background: rgba(255,255,255,0.2); 
    color: #fff !important; width: 35px; height: 35px; 
    border-radius: 12px; cursor: pointer; transition: 0.3s;
}

/* 4. صندوق الرسائل */
#chat-box { flex: 1; padding: 20px; overflow-y: auto; background: #fff; display: flex; flex-direction: column; gap: 15px; }

.bot-message, .user-message { 
    padding: 12px 18px; border-radius: 18px; max-width: 85%; 
    font-size: 14.5px; line-height: 1.6; position: relative;
    animation: messagePop 0.3s ease-out;
}

@keyframes messagePop {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.bot-message { background: var(--bot-bg); color: #2c3e50; align-self: flex-start; border-bottom-left-radius: 4px; }
.user-message { background: var(--main-gradient); color: #fff !important; align-self: flex-end; border-bottom-right-radius: 4px; }

/* 5. زر Go to Source المحسن */
.source-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 20px;
    background: rgba(63, 94, 251, 0.08);
    color: var(--accent-blue) !important;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    border: 1.5px solid var(--accent-blue);
    cursor: pointer !important; /* التأكد من ظهور شكل اليد */
    transition: all 0.3s ease;
}

.source-link:hover {
    background: var(--main-gradient);
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(63, 94, 251, 0.3);
}

/* 6. أزرار الاقتراحات (حل مشكلة الالتصاق) */
.suggestions { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; /* مسافة أفقية ورأسية بين الأزرار */
    margin-top: 15px;
    padding: 5px;
}

.suggestions button {
    padding: 10px 18px;
    border: 1.5px solid var(--accent-blue);
    border-radius: 25px;
    background: #fff;
    color: var(--accent-blue) !important;
    cursor: pointer !important;
    font-size: 13px;
    font-weight: 600;
    transition: 0.3s;
    white-space: nowrap; /* منع انقسام النص داخل الزر */
}

.suggestions button:hover {
    background: var(--main-gradient);
    color: #fff !important;
    border-color: transparent;
    transform: scale(1.05);
}

/* 7. منطقة الإدخال */
#chat-input { padding: 15px; background: #fff; border-top: 1px solid #eee; display: flex; gap: 10px; }
#chat-input input { 
    flex: 1; padding: 12px 18px; border: 2px solid #f0f0f0; 
    outline: none; border-radius: 14px; transition: 0.3s;
}
#chat-input input:focus { border-color: var(--accent-blue); }

#chat-input button { 
    background: var(--main-gradient); color: #fff !important; 
    width: 48px; height: 48px; border: none; border-radius: 14px; 
    cursor: pointer !important; transition: 0.3s;
}

/* محو الألوان الإضافية */
#wc { background: transparent !important; color: inherit !important; }
.status-dot { width: 10px; height: 10px; background: #00e676; border-radius: 50%; margin-right: 8px; }


/* end */









/* ========= Theme variables ========== */
:root{
  --color-bg: #ffffff;
  --color-text-primary: #1b1b1b; /* dark navy */
  --color-text-secondary: #5c6a85;
  --color-accent: #3f5efb;
  --color-accent-light: #00BCD4;
  --hero-overlay: rgba(10,20,40,0.45);
  --max-width: 1200px;
  --header-h: 80px;
  --footer-bg: #0f1b2a;
}




/* ===========================
       ANIMATION (Typing Effect)
    ============================ */
    .typing span {
      display: inline-block;
      opacity: 0;
      transform: translateY(10px);
      animation: fadeInUp 0.05s forwards;
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    } 



/* end */



























/* ========== Reset & base ========== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;color:var(--color-text-primary);background:var(--color-bg);line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* ========== Header/Nav ========== */
header.header{
  position:sticky;top:0;z-index:12000;height:var(--header-h);
  display:flex;align-items:center;background:rgba(255,255,255,0.98);
  border-bottom:1px solid rgba(26,42,64,0.06);
  /* direction: ltr; */
}
.nav-container{display:flex;align-items:center;justify-content:space-between;width:100%; position:relative;}
.logo-group{max-width: 300px;}
.logo-square{
width: 180px;
    height: 41px;
    border-radius: 6px;
    background: url(img/logo.png);
    background-size: 100% 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}
.logo-text h1{font-size:1.05rem;margin:0;font-weight:700}
.nav-menu ul{display:flex;gap:22px;list-style:none;align-items:center}
.nav-menu a{padding:8px 6px;border-radius:6px;transition: .2s;}
.nav-menu a:hover{background:rgba(63,94,251,0.06);color:var(--color-accent)}

/* Mobile menu button */
.menu-toggle{
  display:none;
  background:transparent;
  border:0;
  font-size:1.6rem;
  line-height:1;
  padding:8px;
  color:var(--color-text-primary);
  border-radius:8px;
  cursor:pointer;
}
.menu-toggle:focus{ outline:2px solid rgba(63,94,251,0.3); outline-offset:2px; }

/* ========== HERO ========== */
#home{
  position:relative;min-height:100vh;padding-top:calc(var(--header-h) + 20px);
  display:flex;align-items:center;overflow:hidden;color:#fff;background:#0f2030;
}
.video-background{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover;z-index:0;
  filter:brightness(0.45) contrast(0.98) saturate(0.96);
}
#techCanvas{ position:absolute;inset:0;z-index:1;pointer-events:none; }
.hero-overlay{ position:absolute;inset:0;background:var(--hero-overlay);z-index:2;pointer-events:none; }
.hero-content{position:relative;z-index:3;width:100%}
.hero-row{display:flex;gap:48px;align-items:center}
.hero-left{flex:1;padding:24px;min-width:280px}
.hero-right{flex:1;display:flex;justify-content:center;padding:24px;min-width:280px}
.hero-title{font-size:1.4rem;font-weight:800;line-height:1.25;margin-bottom:18px;color:#ffffff; text-shadow:0 8px 30px rgba(10,20,40,0.6)}
.hero-title .accent{color:var(--color-accent-light)}
.hero-desc{color:rgba(255,255,255,0.92);font-size:1.12rem;margin-bottom:20px; max-width:700px}
.hero-actions{display:flex;gap:14px;margin-bottom:20px}
.btn{display:inline-block;padding:9px 9px;border-radius:8px;font-weight:600;cursor:pointer}
.btn-primary{background:linear-gradient(66deg,var(--color-accent) 0%,var(--color-accent-light)100%);color:#fff;border:0}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.18);color:#fff}

.hero-visual{width:80%;max-width:520px;border-radius:12px;overflow:hidden;}
.hero-visual img{width:100%;height:100%;object-fit:cover;display:block}

.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.06)}





.feature-item {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-direction: column;
    align-content: center;
}
.feature-item i{font-size:3.15rem;color:#fff}
.feature-item h4{font-size:1rem;color:#fff;margin-bottom:6px}
.feature-item p{color:rgba(255,255,255,0.86);font-size:0.95rem}

/* ========== SECTIONS (light background) ========== */
section{padding:80px 0}
#about,#services-intro,#join,#employers,#contact{background:var(--color-bg)}
.section-heading{font-size:2rem;font-weight:700;color:var(--color-text-primary);margin-bottom:12px;}
.muted{color:var(--color-text-secondary);
  

margin-bottom: 40px;

}



/* About two-column layout */
.about-row{display:flex;gap:36px;align-items:center}
.about-left{flex:1}
.about-right{flex:1}
.slider-container { position: relative; width:100%; max-width:520px; margin:0 auto;}
.slider-viewport { overflow:hidden; border-radius:10px; }
.slider-track { display:flex; transition:transform 0.35s cubic-bezier(.22,.9,.3,1); will-change:transform; }
.slide { min-width:100%; flex-shrink:0; height:420px; background-size:cover; background-position:center; }
.slider-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; background:rgba(0,0,0,0.35); color:#fff; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; }
.slider-arrow.left { left:12px;  background-color: #1b1b1b; color: #ffffff;}
.slider-arrow.right { right:12px; background-color: #1b1b1b; color: #ffffff; }

.dots { display:flex; gap:8px; justify-content:center; margin-top:12px; }
.dot { width:10px; height:10px; border-radius:50%; background:rgba(26,42,64,0.12); cursor:pointer; }
.dot.active { background:var(--color-accent); }

/* typing element */
.typing-element{ border-right:0.15em solid #000; animation:blinking-cursor .5s step-end infinite; }
@keyframes blinking-cursor { from,to{border-color:transparent} 50%{border-color:#000} }

/* services grid */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:22px}
.card{background:#fff;padding:20px;border-radius:10px;border:1px solid rgba(26,42,64,0.06);box-shadow:0 6px 18px rgba(12,20,30,0.03);text-align:center}
.card i{font-size:3.2rem;color:var(--color-accent);margin-bottom:12px}

/* team */
.team-grid{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.team-card{background:#fff;padding:14px;border-radius:10px;min-width:220px;border:1px solid rgba(26,42,64,0.06);text-align:left}
.team-card img{width:100%;height:140px;object-fit:cover;border-radius:8px;margin-bottom:10px}

/* partners marquee */
.partners{
    
    
        display: flex;
    gap: 18px;
    align-items: center;
    overflow: hidden;
    justify-content: center;
    
    
}



@media(max-width:768px)
{
    .partners-inner
    {
            display: block;

    }
}
.partners img{opacity:0.9;filter:grayscale(0.1);width:320px;}
@keyframes marquee{0%{transform:translateX(0)}
50%{transform:translateX(-50%)}

100%{transform:translateX(0)}}

/* forms */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.input,textarea{padding:10px 12px;border-radius:8px;border:1px solid rgba(26,42,64,0.08);font-size:0.95rem}
textarea{min-height:120px;resize:vertical}
.file-preview{font-size:0.9rem;color:var(--color-text-secondary);margin-top:6px}

/* contact map */
.map-wrap iframe{width:100%;height:280px;border:0;border-radius:8px}


/* start footer */

        /* --- بداية تنسيق الفوتر الاحترافي --- */
   :root {
            --footer-bg: #0a0f18; 
            --accent-blue: #3b82f6;
            --text-white: #ffffff;
            --text-dim: #94a3b8;
        }


        .footer {
            position: relative;
            background: var(--footer-bg);
            color: var(--text-white);
            padding: 40px 5% 40px;
            margin-top: 100px;
            transition: .6s all !important;
        }

        /* الأمواج مدمجة من نفس خامة الفوتر */
        .waves-container {
            position: absolute;
            top: -99px; left: 0; width: 100%; height: 100px; line-height: 0; pointer-events: none;
        }
        .waves { width: 100%; height: 100px; }
        .parallax > use { animation: move-forever 20s cubic-bezier(.55,.5,.45,.5) infinite; }
        .parallax > use:nth-child(1) { animation-duration: 7s; fill: rgba(10, 15, 24, 0.3); }
        .parallax > use:nth-child(2) { animation-duration: 10s; fill: rgba(10, 15, 24, 0.5); }
        .parallax > use:nth-child(3) { animation-duration: 13s; fill: rgba(10, 15, 24, 0.7); }
        .parallax > use:nth-child(4) { animation-duration: 18s; fill: var(--footer-bg); }

        @keyframes move-forever {
            0% { transform: translate3d(-90px,0,0); }
            100% { transform: translate3d(85px,0,0); }
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 0.5fr;
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 5;
        }

        /* العناوين باللون الأبيض الصريح */
        .footer h4, .quick-links h4, .contact-col h4 {
            color: var(--text-white) !important;
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 25px;
            position: relative;
        }

        .footer-logo img { max-width: 200px; margin-bottom: 15px; border-radius: 10px; }

        .company-name { font-size: 1.2rem; font-weight: bold; margin-bottom: 10px; color: #fff; }
        .address, .commercial { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 8px; }

        /* تمييز الجزء القانوني */
        .legal-note {
            font-size: 0.85rem;
            line-height: 1.6;
            color: #cbd5e1;
            margin: 20px 0;
            padding: 12px 15px;
            background: rgba(59, 130, 246, 0.1);
            border-left: 3px solid var(--accent-blue);
            border-radius: 4px;
        }

        /* قسم إسباسيس والزر الموسط */
        .espaces-footer-section {
            margin-top: 25px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            text-align: center;
        }

        .espaces-title { color: var(--text-white); font-weight: bold; margin-bottom: 5px; }
        .espaces-desc { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 15px; }

        .btn-espaces {
            display: inline-flex;
            align-items: center;
            background: var(--accent-blue);
            color: #fff;
            padding: 12px 30px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: 0.3s;
        }
        .btn-espaces:hover { background: #2563eb; transform: translateY(-2px); }

        /* الروابط */
        .quick-links p { margin-bottom: 12px; }
        .quick-links a { color: var(--text-dim); text-decoration: none; transition: 0.2s; }
        .quick-links a:hover { color: var(--text-white); padding-left: 5px; }

        /* تواصل معنا */
        .social-icons { display: flex; gap: 15px; margin-top: 15px; }
        .social-icons a {
            width: 42px; height: 42px;
            background: rgba(255,255,255,0.08);
            display: flex; align-items: center; justify-content: center;
            border-radius: 50%; color: #fff; transition: 0.3s;
        }
        .social-icons a:hover { background: var(--accent-blue); transform: scale(1.1); }

        /* تكبير العلم */
        .flag-col { text-align: right; }
        .flag-col img { 
            width: 100px; /* تم التكبير */
            opacity: 0.9; 
            border-radius: 6px;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
        }

        @media (max-width: 992px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 600px) {
            .footer-grid { grid-template-columns: 1fr; text-align: center; }
            .social-icons { justify-content: center; }
            .flag-col { text-align: center; }
            .legal-note { border-left: none; border-top: 3px solid var(--accent-blue); }
        }
    /* ennd */






/* ====== Mobile Nav adjustments ====== */
@media (max-width:1024px){
  .hero-row,.about-row{flex-direction:column}
  .slides img{height:320px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .menu-toggle{ display:block; }
  .nav-menu{
    position:absolute;
    top:calc(var(--header-h) - 2px);
    left:0; right:0;
    background:#fff;
    border-bottom:1px solid rgba(26,42,64,0.06);
    box-shadow:0 10px 24px rgba(12,20,30,0.06);
    display:none; padding:10px 12px; z-index:12001;
  }
  .nav-menu.open{ display:block; animation:dropdownIn .18s ease-out; }
  .nav-menu ul{ flex-direction:column; gap:10px; align-items:stretch; }
  .nav-menu a{ padding:12px 10px; display:block; border-radius:8px; }
  .nav-menu a.btn.btn-primary{ text-align:center; }
  @keyframes dropdownIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }
}
@media (max-width:600px){
  .slides img{height:220px}
  .services-grid{grid-template-columns:1fr}
  .typewriter{font-size:0.98rem}
  /* .hero-title{font-size:2rem} */
  .logo-text h1{font-size:0.95rem}
  .hero-right{order:-1}
}
@media (max-width:420px){
  .logo-text h1{ font-size:0.9rem }
  .hero-title{ font-size:1.8rem }
  .hero-desc{ font-size:1rem }
}

/* Contact grid: single column on mobile */
@media (max-width: 900px){
  #contact .container > div{
    grid-template-columns: 1fr !important;
  }
  #contact .map-wrap iframe{ height:360px; }
}



/* ======================================================= */



/* page 1  */


/* ====== Intro Slider under Hero ====== */



/* glery new */



:root {
        --reveal-speed: 1.2s !important;
        --accent-line: #0047ab;
    }

    .home-intro-slider { padding: 60px 0; overflow: hidden; background: #fff ; }
    
    /* الحاوية الرئيسية */
    .home-intro-wrap { 
        display: flex; 
        align-items: center; 
        gap: 40px; 
    }

    .home-intro-left { flex: 1; }

    /* حاوية الصور مع إصلاح الموبايل */
    .home-intro-right {
        flex: 1.2;
        position: relative;
        height: 550px;
        border-radius: 25px;
        overflow: hidden;
        cursor: grab;
    }

    .img-slide {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        clip-path: circle(0% at 50% 50%) !important;
        transition: clip-path var(--reveal-speed) cubic-bezier(0.77, 0, 0.175, 1) !important;
        z-index: 1;
    }

    .img-slide.active { clip-path: circle(150% at 50% 50%) !important; z-index: 2; }
    .img-slide img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }

    /* نصوص فوق الصور مع نظام التراجم */
    .slide-content-overlay {
        position: absolute;
        bottom: 0; left: 0; width: 100%;
        padding: 40px 30px;
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
        color: #fff;
        transform: translateY(20px);
        opacity: 0;
        transition: all 0.6s ease 0.6s;
        pointer-events: none;
    }

    .img-slide.active .slide-content-overlay {
        transform: translateY(0);
        opacity: 1;
    }

    .slide-content-overlay h4 {
        font-size: 1.5rem; margin-bottom: 5px; font-weight: 800;
        border-left: 4px solid var(--accent-line);
        padding-left: 15px;
    }

    .slide-content-overlay p { font-size: 1rem; opacity: 0.9; padding-left: 19px; }

    /* التحكم والأسهم */
    .slider-nav {
        position: absolute; top: 50%; width: 100%;
        display: flex; justify-content: space-between;
        padding: 0 20px; transform: translateY(-50%);
        z-index: 10; pointer-events: none;
    }

    .nav-btn {
        width: 50px; height: 50px; background: rgba(255,255,255,0.9);
        border-radius: 50%; border: none; cursor: pointer; pointer-events: auto;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: 0.3s;
    }
    .nav-btn:hover { background: #fff; transform: scale(1.1); }

    .dots-overlay {
            position: absolute;
    bottom: 5px;
    right: 37px;
    display: flex;
    gap: 18px;
    z-index: 10;
    }
    .dot { width: 12px; height: 4px; background: rgba(255,255,255,0.3); cursor: pointer; border-radius: 2px; transition: 0.3s; }
    .dot.active { background: #fff; width: 25px; }

    /* Lightbox */
    #lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: none; justify-content: center; align-items: center; z-index: 9999; }
    #lightbox img { max-width: 90%; max-height: 80%; border-radius: 10px; }

    /* إصلاح وضع الهاتف (Mobile Fix) */
    @media (max-width: 991px) {
        .home-intro-wrap { flex-direction: column !important; gap: 30px; }
        .home-intro-right { 
            width: 100% !important; 
            height: 400px !important; /* ضمان الطول في الموبايل */
/*            min-height: 400px !important;
*/            order: 1 !important; /* الصورة أولاً */
        }
        .home-intro-left { order: 2 !important; text-align: center; }
        .slide-content-overlay { padding: 20px; }
        .slide-content-overlay h4 { font-size: 1.2rem; }


                .lang-toggle-btn{margin:auto}

    }





/* end */








    .home-intro-slider{
      padding:48px 0 18px;
      /* background:linear-gradient(66deg, rgba(63,94,251,.04), rgba(0,188,212,.035)); */
      /* border-bottom:1px solid rgba(26,42,64,0.06); */
    }
    .home-intro-wrap{
      display:flex; gap:36px; align-items:center; justify-content:space-between; flex-wrap:wrap;
    }
    .home-intro-left{ flex:1; min-width:300px }
    .home-intro-right{ flex:1; min-width:300px }

    /* Slider (reusing base styles from site) */
    .slider-container { position: relative; width:100%; max-width:520px; margin:0 auto;}
    .slider-viewport { overflow:hidden; border-radius:12px; }
    .slide { height:420px; position:relative; }
    .slide-caption{
      position:absolute; left:14px; right:14px; bottom:14px;
      background:linear-gradient(0deg, rgba(10,20,40,.55), rgba(10,20,40,.08));
      color:#fff; padding:10px 12px; border-radius:10px; backdrop-filter: blur(2px);
    }
    .slide-caption h4{ font-size:1.05rem; margin-bottom:4px }
    .slide-caption p{ font-size:.92rem; opacity:.9 }

    /* ====== Video Showcase (Showreel) ====== */
    
.video-card {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.video-container video {
    width: 100%;
    display: block;
}



.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.video-controls {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.play-btn {
    background: #3f5efb;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s transform;
}

.play-btn:hover {
    transform: scale(1.1);
    background: #3f5efb;
}

.play-btn i {
    color: #ffffff; /* لون أيقونة التشغيل */
    position: relative
    ;
    left: 7px;
}









/* تأكدي أن هذا الملف محفوظ باسم style.css */

:root {
    --main-color: #00d2ff;
}



.showreel-container {
    position: relative;
    width: 95%;
    max-width: 850px;
    background: #000;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

video {
    width: 100%;
    display: block;
}

/* الطبقة الشفافة فوق الفيديو */
.overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
    transition: 0.4s;
}

.playing .overlay {
    background: transparent;
    pointer-events: none;
}

/* زر التشغيل المركزي */
.center-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    width: 80px; height: 80px;
    border-radius: 50%;
    color: white;
    font-size: 28px;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.playing .center-btn {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(1.3);
}

/* شريط التحكم السفلي */
.custom-controls {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 15px 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    z-index: 10;
    opacity: 0;
    transform: translateY(10px);
    transition: 0.3s;
}

.showreel-container:hover .custom-controls {
    opacity: 1;
    transform: translateY(0);
}

/* شريط التقدم */
.progress-area {
    height: 5px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    margin-bottom: 12px;
    cursor: pointer;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: var(--main-color);
    border-radius: 5px;
    position: relative;
}

/* الأزرار والتحكم */
.controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    direction: ltr;
}

.left-controls, .right-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;
}

button:hover {
    color:#000;
}

.volume-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

input[type="range"] {
    width: 60px;
    accent-color: var(--main-color);
    cursor: pointer;
}

.time-display {
    color: white;
    font-size: 13px;
    font-family: 'Courier New', Courier, monospace;
}





























    .showreel-points{ 
      
      list-style:none; line-height:1.9;
    
    
    }
    .showreel-points i{ 
 color: var(--color-accent);
margin: 0px 11px;
    font-size: 1.1rem;
    background: rgba(63, 94, 251, 0.1);
    padding: 6px;    
    border-radius: 50%;
    }

    /* ====== Quick KPIs under hero ====== */
    .home-kpis{background:#fff;border-top:1px solid rgba(26,42,64,0.06);border-bottom:1px solid rgba(26,42,64,0.06);padding:14px 0}
    .kpis-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .kpis-wrap .kpi{background:#fff;border:1px solid rgba(26,42,64,0.06);border-radius:12px;padding:12px;text-align:center;box-shadow:0 6px 18px rgba(12,20,30,0.03)}
    .kpi i{font-size:3.2rem;color:var(--color-accent);margin-bottom:4px;
        
        background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
        
        
        
        
    }
    .kpi h4{font-size:1.1rem}
    @media(max-width:800px){.kpis-wrap{grid-template-columns:1fr}}

    /* ====== Partners trust strip title ====== */
    .trust-title{ text-align:center; margin:18px 0 8px; color:var(--color-text-secondary) }

    /* ====== Testimonial ====== */
    .home-quote{padding:20px 0}
    .quote-card{
      background:#fff;border:1px solid rgba(26,42,64,0.08);
      border-radius:14px;padding:16px;box-shadow:0 8px 24px rgba(12,20,30,0.04);
      text-align:center; max-width:900px; margin:0 auto;
    }
    .quote-card i{color:var(--color-accent); font-size:1.2rem}
    .quote-card p{margin:8px 0}




/*new*/
@media(max-width:768px;)
{
    .lz
{
    font-size: 3rem;
}
}



@media(max-width:480x;)
{
    .lz
{
    font-size: 3rem;
}
}


 .content-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 90%;
            margin: 200px auto; /* مسافات كبيرة لإجبار المستخدم على التمرير */
            padding: 20px;
            background-color: #383c4a;
            border-radius: 8px;
        }

    
        /* تنسيق المؤشر (الـ Cursor) */
        .cursor {
            display: inline-block;
            background-color: #fff;
            width: 2px;
            height: 1.2em;
            margin-right: 5px;
            animation: blink 0.75s step-end infinite; 
        }

        /* الرسوم المتحركة للوميض */
        @keyframes blink {
            from, to { background-color: transparent; }
            50% { background-color: #fff; }
        }





.cx {
  background: url(img/cx5.png);
  position: relative;
  top: -149px;
  z-index: 2;
  width: 100%;
  height: 160px;
  background-size: contain;
  background-repeat: repeat-x;
}

/* الشادو بياخد نفس شكل المباني */
.cx::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 140px;
  background: url('img/cx5.png') repeat-x bottom;
  background-size: contain;
  transform: scaleY(-1);
  opacity: 0.25;
  filter: blur(8px);
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0)); /* تلاشي انعكاس */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0));
}



.cx {
  background: url(img/cx5.png) repeat-x bottom;
  position: relative;
  top: -149px;
  z-index: 2;
  width: 100%;
  height: 160px;
  background-size: contain;
      overflow-x: clip;
}

/* انعكاس المباني + أنيميشن المياه */
.cx::after {
  content: "";
  position: absolute;
  bottom: -150px;
  left: 0;
  width: 200%; /* علشان الحركة تكون سلسة */
  height: 150px;
  background: url(img/cx5.png) repeat-x bottom;
  background-size: contain;
  
  transform: scaleY(-1);
  opacity: 0.30;
  filter: blur(3px);
  
  animation: waterFlow 15s linear infinite;
  
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));
}

/* الحركة (موج خفيف يمين ويسار) */
@keyframes waterFlow {
  0%   { transform: scaleY(-1) translateX(0); }
  50%  { transform: scaleY(-1) translateX(-50px); }
  100% { transform: scaleY(-1) translateX(0); }
}



@media(max-width:768px)
{


  .res
  {
    font-size: 2rem;
  }

  .hero-row
  {
    display: block;
  }

}

 /* CSS العام لحاوية الهيرو
        .hero-container {
            position: relative;
            width: 100%;
            min-height: 100vh;
            overflow: hidden;
            background: transparent;
        } */
        .hero-canvas {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 1;
        }
        /* .hero-content {
            position: relative;
            z-index: 10;
            color: white;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding: 50px;
        } */
        
        /* الكود المخصص */
                .hero-canvas { display: block; position: absolute; top: 0; left: 0; }



    /* ========  end  ============ */







/*align*/

.all-center

{
  text-align: center;
}


.all-left

{
  text-align: left;
}

.all-right

{
  text-align: right;
}

/*end*/







/* زر عائم ارسال السيرة الذاتية  */

 .floating-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background:linear-gradient(66deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
            color: white;
            padding: 15px 25px;
            border-radius: 50px;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 5px 15px rgba(63, 94, 251, 0.3);
            z-index: 1000;
            
            /* Animation */
            animation: floatUpDown 2s ease-in-out infinite;
        }
        
        @keyframes floatUpDown {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        
        .floating-btn:hover {
            background: #2a4df5;
            animation-play-state: paused; /* يوقف الأنيميشن عند الـ hover */
        }


        #recruitment, #about
        {
          text-align: center;
          width: 70%;
          margin: auto;
        }

        .ree
        {
              height: 15px;
    width: 51%;
    margin: auto;
        }





/* الكلاس الأساسي */




/* ===================== */












/*زر للكل  */

    .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        border-radius: 20px;
            font-weight: 700;
        font-size: 1rem;
        background: linear-gradient(66deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
        color: #fff;
        border: 0;
        /* box-shadow: 0 12px 30px rgba(63, 94, 251, 0.25); */
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer;
                    padding: 10px 17px;

            text-decoration: none;

                    transition: all .5s !important;






    }







    










  /* ================Home  index ============ */







    /* Espaces Section - New Styles */
    .espaces-section {
         background: linear-gradient(135deg, rgba(63, 94, 251, 0.02) 0%, rgba(0, 188, 212, 0.02) 100%); 
        border-top: 1px solid rgba(26, 42, 64, 0.06);
        border-bottom: 1px solid rgba(26, 42, 64, 0.06);
        padding: 4rem 0;
        margin: 3rem 0;
    }
    .espaces-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
            align-items: stretch;
    }
    @media (max-width: 900px) {
        .espaces-grid {
            grid-template-columns: 1fr;
            gap: 2rem;
        }
    }
    
    .espaces-content h3 {
        color: var(--color-text-primary);
        margin-bottom: 1rem;
    }
    .espaces-benefits {
        background: #fff;
        /* padding: 1.2rem; */
        /* border-radius: 10px; */
        margin-top: 1.5rem;
        /* border-left: 4px solid var(--color-accent); */
        font-size: 0.95rem;
    }
    
    /* تنسيقات حاوية السلايدر لـ Espaces */
    .espaces-slider3d-container {
        position: relative;
        background: #fff;
        border-radius: 16px;
        padding: 20px;
        /* box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        border: 1px solid rgba(26,42,64,0.06); */
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .espaces-slider-header {
        text-align: center;
        margin-bottom: 20px;
        display: none;
    }
    
    .espaces-slider-header h4 {
        color: var(--color-accent);
        margin-bottom: 5px;
    }
    
    /* تنسيقات السلايدر 3D الكاملة - من الملف الأساسي */
    .espaces-slider-wrapper {
        position: relative;
        width: 100%;
        height: 350px;
        margin: 0 auto 20px;
        perspective: 800px;
        overflow: visible;
        touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .espaces-slider-container {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform: translateZ(-250px);
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .espaces-slide {
        position: absolute;
        width: 85vw;
        max-width: 300px;
        height: 380px;
        border-radius: 16px;
        overflow: hidden;
        transform-style: preserve-3d;
        transition: all 0.5s cubic-bezier(0.84, -0.69, 0.45, 0.94);
        box-shadow: 
            0 10px 25px rgba(0, 0, 0, 0.1),
            inset 0 0 0 1px rgba(255, 255, 255, 0.8);
        cursor: pointer;
        backface-visibility: hidden;
        background: white;
        touch-action: pan-y;
        z-index: 1;
    }
    
    .espaces-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
        pointer-events: none;
    }
    
    .espaces-slide.active {
        transform: rotateY(0deg) translateZ(120px) scale(1.05);
        z-index: 100;
        box-shadow: 
            0 20px 40px rgba(63, 94, 251, 0.15),
            0 0 0 1px rgba(63, 94, 251, 0.1),
            inset 0 0 20px rgba(255, 255, 255, 0.5);
    }
    
    .espaces-slide.prev {
        transform: rotateY(-25deg) translateZ(60px) translateX(-120px) scale(0.85);
        opacity: 0.8;
        z-index: 50;
    }
    
    .espaces-slide.next {
        transform: rotateY(25deg) translateZ(60px) translateX(120px) scale(0.85);
        opacity: 0.8;
        z-index: 50;
    }
    
    .espaces-slide.far-prev,
    .espaces-slide.far-next {
        opacity: 0.3;
        transform: rotateY(±35deg) translateZ(20px) translateX(±180px) scale(0.7);
        z-index: 1;
        display: none;
    }
    
    .espaces-slide-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 15px;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.5) 70%,
            transparent 100%
        );
        color: white;
        text-align: center;
        z-index: 2;
        backdrop-filter: blur(2px);
    }
    
    .espaces-slide-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 4px;
        color: #fff;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }
    
    .espaces-slide-description {
        font-size: 0.8rem;
        opacity: 0.9;
        line-height: 1.4;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
    
    /* مؤشر التوقيت */
     .espaces-timer-container {
        width: 90%;
        max-width: 320px;
        margin: 20px auto;
        background: #f8f9fa;
        border-radius: 10px;
        padding: 12px 15px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
        border: 1px solid #e9ecef;
        display: none;

    } 
    
    .espaces-timer-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 0.85rem;
        color: #555;
        font-weight: 500;
    }
    
    .espaces-timer-bar {
        width: 100%;
        height: 5px;
        background: #e9ecef;
        border-radius: 3px;
        overflow: hidden;
    }
    
    .espaces-timer-progress {
        width: 0%;
        height: 100%;
        background: linear-gradient(66deg, rgb(63 94 251) 0%, rgb(0 188 212) 100%);
        border-radius: 3px;
        transition: width 0.1s linear;
    }
    
    /* عناصر التحكم */
    .espaces-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin: 20px 0;
        width: 100%;
    }
    
    .espaces-control-btn {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: none;
        background: linear-gradient(66deg, rgb(63 94 251) 0%, rgb(0 188 212) 100%);
        color: white;
        font-size: 22px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        box-shadow: 0 6px 20px rgba(63, 94, 251, 0.2);
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    .espaces-control-btn:active {
        transform: scale(0.9);
        box-shadow: 0 3px 10px rgba(63, 94, 251, 0.3);
    }
    
    /* المؤشرات */
    .espaces-indicators {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin: 15px 0;
        flex-wrap: wrap;
        padding: 0 10px;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .espaces-indicator {
        width: 12px;
        height: 12px;
        min-width: 12px;
        border-radius: 50%;
        background: #e0e0e0;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 2px solid transparent;
        position: relative;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }
    
    .espaces-indicator::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(66deg, rgb(63 94 251) 0%, rgb(0 188 212) 100%);
        transform: scale(0);
        transition: transform 0.2s ease;
        border-radius: 50%;
    }
    
    .espaces-indicator.active::before {
        transform: scale(1);
    }
    
    .espaces-indicator.active {
        border-color: rgba(63, 94, 251, 0.3);
    }
    
    /* العداد */
    .espaces-counter {
        margin: 10px 0;
        font-size: 0.95rem;
        color: #555;
        font-weight: 500;
        background: #f8f9fa;
        display: inline-block;
        padding: 6px 15px;
        border-radius: 18px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
        text-align: center;
    }
    
    /* إرشادات السحب */
    .espaces-swipe-hint {
        margin: 10px 0 5px;
        font-size: 0.8rem;
        color: #888;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    
    .espaces-swipe-hint i {
        color: rgb(63, 94, 251);
        animation: espacesSwipeHint 2s infinite;
        font-size: 1.2rem;
    }
    
    @keyframes espacesSwipeHint {
        0%, 100% { transform: translateX(0); opacity: 1; }
        25% { transform: translateX(-5px); opacity: 0.7; }
        50% { transform: translateX(0); opacity: 1; }
        75% { transform: translateX(5px); opacity: 0.7; }
    }
    
    /* معرض الصور - منتصف تماماً */
    .espaces-gallery-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.98);
        display: none;
        z-index: 2000;
        opacity: 0;
        transition: opacity 0.3s ease;
        touch-action: pan-y pinch-zoom;
        justify-content: center;
        align-items: center;
    }
    
    .espaces-gallery-container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        text-align: center;
    }
    
    .espaces-gallery-img-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: relative;
        top: 40px;
    }
    
    .espaces-gallery-img {
        max-width: 95vw;
        max-height: 80vh;
        object-fit: contain;
        border-radius: 8px;
        transform: scale(0.95);
        transition: transform 0.3s ease;
        touch-action: pan-y pinch-zoom;
        margin: 0 auto;
        display: block;
    }
    
    .espaces-gallery-img.zoomed {
        transform: scale(1);
    }
    
    .espaces-gallery-close {
        position: absolute;
        top: 15px;
        right: 15px;
        background: rgba(255, 255, 255, 0.15);
        color: white;
        border: none;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
        transition: all 0.2s ease;
        z-index: 2001;
        -webkit-tap-highlight-color: transparent;
    }
    
    .espaces-gallery-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.15);
        color: white;
        border: none;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
        transition: all 0.2s ease;
        z-index: 2001;
        -webkit-tap-highlight-color: transparent;
    }
    
    .espaces-gallery-prev {
        left: 10px;
        right: auto;
    }
    
    .espaces-gallery-next {
        right: 10px;
        left: auto;
    }
    
    .espaces-gallery-counter {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 0.95rem;
        background: rgba(0, 0, 0, 0.5);
        padding: 8px 18px;
        border-radius: 20px;
        backdrop-filter: blur(5px);
        text-align: center;
        min-width: 80px;
    }
    
    /* تحسينات خاصة للموبايل */
    @media (max-width: 768px) {
        .espaces-slider-wrapper {
            height: 320px;
        }
        
        .espaces-slide {
            width: 80vw;
            max-width: 260px;
            height: 340px;
        }
        
        .espaces-slide.active {
            transform: rotateY(0deg) translateZ(100px) scale(1.05);
        }
        
        .espaces-slide.prev {
            transform: rotateY(-22deg) translateZ(50px) translateX(-100px) scale(0.85);
        }
        
        .espaces-slide.next {
            transform: rotateY(22deg) translateZ(50px) translateX(100px) scale(0.85);
        }
        
        .espaces-controls {
            gap: 15px;
        }
        
        .espaces-control-btn {
            width: 48px;
            height: 48px;
            font-size: 20px;
        }
    }
    
    @media (max-width: 480px) {
        .espaces-slider-wrapper {
            height: 300px;
        }
        
        .espaces-slide {
            width: 75vw;
            max-width: 220px;
            height: 320px;
        }
        
        .espaces-slide.active {
            transform: rotateY(0deg) translateZ(80px) scale(1.05);
        }
        
        .espaces-slide.prev {
            transform: rotateY(-20deg) translateZ(40px) translateX(-80px) scale(0.85);
        }
        
        .espaces-slide.next {
            transform: rotateY(20deg) translateZ(40px) translateX(80px) scale(0.85);
        }
        
        .espaces-slide-content {
            padding: 12px;
        }
        
        .espaces-slide-title {
            font-size: 1rem;
        }
        
        .espaces-slide-description {
            font-size: 0.75rem;
        }
        
        .espaces-gallery-nav {
            width: 42px;
            height: 42px;
            font-size: 18px;
        }
        
        .espaces-gallery-close {
            width: 40px;
            height: 40px;
            font-size: 18px;
        }
    }
    
    @media (max-width: 360px) {
        .espaces-slider-wrapper {
            height: 280px;
        }
        
        .espaces-slide {
            width: 70vw;
            max-width: 200px;
            height: 300px;
        }
        
        .espaces-slide.active {
            transform: rotateY(0deg) translateZ(60px) scale(1.05);
        }
        
        .espaces-slide.prev {
            transform: rotateY(-18deg) translateZ(30px) translateX(-70px) scale(0.85);
        }
        
        .espaces-slide.next {
            transform: rotateY(18deg) translateZ(30px) translateX(70px) scale(0.85);
        }
        
        .espaces-controls {
            gap: 12px;
        }
        
        .espaces-control-btn {
            width: 44px;
            height: 44px;
            font-size: 18px;
        }
    }
















    /* سلايدر الشهادة */

/* CSS - التصميم المتجاوب */
.home-quote {
  padding: 60px 20px;
  background: #fdfdfd;
  text-align: center;
  overflow: hidden;
}

.testimonial-wrapper {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  min-height: 300px; /* يحافظ على ثبات المحتوى */
}

.testimonial-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  transform: translateY(20px);
}

.testimonial-item.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.quote-card i {
  font-size: 2rem;
  color: #007bff;
  margin-bottom: 20px;
}

.quote-card p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #444;
  font-style: italic;
  margin-bottom: 20px;
}

.quote-card .muted {
  font-weight: 700;
  color: #888;
  font-size: 0.9rem;
  text-transform: uppercase;
}

/* Dots Navigation */
.slider-nav {
  margin-top: 30px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background: #007bff;
  width: 25px;
  border-radius: 10px;
}

/* الاستجابة للشاشات الصغيرة */
@media (max-width: 600px) {
  .quote-card p {
    font-size: 1rem;
  }
  .testimonial-wrapper {
    min-height: 350px;
  }
}









/* تحسين intro slider */
.home-intro-slider {
    padding: 80px 0;
    background: #fff;
}

.home-intro-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 900px) {
    .home-intro-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.section-heading {
    /*text-align: center;*/
/*    margin-bottom: 20px;
*/    font-size: 2.2rem;
    background: linear-gradient(66deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgb(65 64 64 / 85%);
    background-clip: text;
    position: relative;
    padding-bottom: 15px;
}


.section-heading  ::after {
    content: '';
    
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
    border-radius: 2px;
}




.all-center .section-heading {
    text-align: center;
}

.all-center .section-heading::after {
    left: 50%;
    transform: translateX(-50%);
}

/* تحسين showreel-points */
.showreel-points {
    list-style: none;
    line-height: 1.9;
    margin: 20px 0;
    padding: 0;
}

.showreel-points li {
    margin-bottom: 12px;
    padding-left: 0;
    color: var(--color-primary);
    font-weight: 500;
    display: flex;
    align-items: flex-start;
}

.showreel-points i {
    color: var(--color-accent);
    font-size: 1.1rem;
    background: rgba(63, 94, 251, 0.1);
    padding: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}

/* تحسين slider */
.slider-container {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(12, 20, 30, 0.12);
}

.slider-viewport {
    width: 100%;
    overflow: hidden;
}

.slider-track {
       display: flex;
    transition: transform 0.5s ease;
    flex-direction: row-reverse;
}

.slide {
    flex: 0 0 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
}





/* التنسيق عند اختيار اللغة العربية */
.slider-track {
    display: flex;
    flex-direction: row-reverse; /* الاتجاه للعربي */
    transition: flex-direction 0.3s ease; /* نعومة في التبديل */
}

/* التنسيق عند اختيار اللغة الإنجليزية */
.slider-track.is-ltr {
    flex-direction: row !important; /* الاتجاه للإنجليزي */
}





.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    color: white;
}

.slide-caption h4 {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.slide-caption p {
    opacity: 0.9;
    font-size: 1rem;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--color-primary);
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.slider-arrow:hover {
    background: var(--color-accent);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.slider-arrow.left {
    left: 20px;
}

.slider-arrow.right {
    right: 20px;
}

.dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 10;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    width: 30px;
    border-radius: 5px;
    background: white;
}

/* تحسين cards في expertise وservices-intro */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 30px;
}

@media (max-width: 1100px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.card {
    background: #fff;
    border: none;
    border-radius: 16px;
    padding: 30px 25px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(12, 20, 30, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(26, 42, 64, 0.06);
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(12, 20, 30, 0.12);
    border-color: rgba(63, 94, 251, 0.15);
}

.card i {
    font-size: 2.8rem;
    color: var(--color-accent);
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card h3 {
    margin: 15px 0;
    color: var(--color-primary);
    font-size: 1.3rem;
}

.card p.muted {
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* تحسين showreel section */
.showreel {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(248, 250, 253, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
}

.showreel-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 40px;
}

@media (max-width: 900px) {
    .showreel-wrap {
        grid-template-columns: 1fr;
        gap: 40px;

        display: flex;
        flex-direction: column-reverse;
    }
}

.showreel-card {
    background: #fff;
    border-radius: 20px;
    padding: 35px 30px;
    box-shadow: 0 20px 60px rgba(12, 20, 30, 0.08);
    border: 1px solid rgba(63, 94, 251, 0.08);
}

.showreel-card h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--color-primary);
    display: flex;
    align-items: center;
}

.showreel-card h3 i {
    margin-right: 10px;
    color: var(--color-accent);
}

.video-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(12, 20, 30, 0.15);
}

.video-card video {
    width: 100%;
    height: auto;
    display: block;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
}

.video-controls {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.play-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: none;
    color: var(--color-accent);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

#showreelToggle
{
    direction: ltr;
}

.play-btn:hover {
    background: var(--color-accent);
    color: white;
    transform: scale(1.1);
}

/* تحسين recruitment section */
#recruitment {
    width: 100%;
    padding: 80px 0;
    text-align: center;
    color: rgb(0, 0, 0);
}

#recruitment .section-heading {
    background: transparent;
    text-align: center;
}

#recruitment .section-heading::after {
    left: 50%;
    transform: translateX(-50%);
    background: white;
}

#recruitment .muted {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 30px;
}

#recruitment .btn-primary {
    color:#fff;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    transition: all .5s !important;
}

#recruitment .btn-primary:hover {
    /* background: rgba(255, 255, 255, 0.9); */
    transform: translateY(-3px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* تحسين partners section */
#partners {
    padding: 60px 0;
    background: #fff;
}

.trust-title {
    text-align: center;
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-bottom: 30px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.partners {
    overflow: hidden;
    position: relative;
}

.partners-inner {
    display: flex;
    gap:28px;
    width: max-content;
    
}


@media(max-width:768px)
{
    .partners-inner {
    display: flex;
    gap:28px;
    width: max-content;
    flex-direction: column;
}
}







.partners-inner img {
    height: auto;
    /* margin: 0 40px; */
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.partners-inner img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes scrollPartners {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* تحسين testimonial slider */
.home-quote {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(248, 250, 253, 0.8) 0%, rgba(255, 255, 255, 1) 100%);
}

.testimonial-wrapper {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    min-height: 300px;
}

.testimonial-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    transform: translateY(20px);
}

.testimonial-item.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.quote-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(12, 20, 30, 0.08);
    text-align: center;
}

.quote-card i {
    font-size: 2.5rem;
    color: var(--color-accent);
    margin-bottom: 25px;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.quote-card p {
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--color-primary);
    font-style: italic;
    margin-bottom: 25px;
}

.quote-card .muted {
    font-weight: 700;
    color: var(--color-text-secondary);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.slider-nav {
    margin-top: 30px;
    text-align: center;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 8px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--color-accent);
    width: 35px;
    border-radius: 10px;
    background: linear-gradient(66deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
}

/* تحسين responsive */
@media (max-width: 768px) {
    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .hero-actions .btn-primary,
    .hero-actions .btn-outline {
        width: 100%;
        justify-content: center;
    }
    
    .services-grid {
        gap: 20px;
    }
    
    .card {
        padding: 25px 20px;
    }
    
    .quote-card {
        padding: 30px 20px;
    }
    
    .quote-card p {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        /* font-size: 2rem; */
    }
    
    .hero-desc {
        font-size: 1rem;
    }
    
    .section-heading {
        font-size: 1.8rem;
    }
    
    .showreel-points li {
        font-size: 0.95rem;
    }
}


.opa
{
    opacity: 0 !important;
}







  /* end  */

























/* كود تنسيق   زر تبديل اللغة  ت */



/* الحاوية الأساسية */
.lang-switch-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  user-select: none;
  direction: ltr;
}



.lang-label {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  transition: color 0.3s ease;
}

/* إخفاء الـ Checkbox الأصلي */
.theme-switch input {
  display: none;
}

/* جسم المفتاح */
.theme-switch {
  display: inline-block;
  height: 28px;
  position: relative;
  width: 54px;
}

.slider-round {
  background-color: #e0e0e0; /* لون الخلفية في وضع EN */
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
  border-radius: 30px;
  border: 1px solid #ccc;
}

/* الدائرة المتحركة */
.slider-round:before {
  background-color: #fff;
  bottom: 3px;
  content: "";
  height: 20px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 20px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* التنسيق عند التفعيل (اللغة العربية) */
input:checked + .slider-round {
  background-color: #007bff; /* لون أزرق مميز */
  border-color: #0056b3;
}

input:checked + .slider-round:before {
  transform: translateX(24px);
}

/* تأثير بسيط عند التمرير بالماوس */
.theme-switch:hover .slider-round {
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}


/* النهاية  */
























/* ===========2 start page about============= */


    .page-hero{
      padding:60px 0 28px;background:linear-gradient(135deg, rgba(248, 250, 253, 0.9) 0%, rgba(255, 255, 255, 1) 100%);
      border-bottom:1px solid rgba(26,42,64,0.06)
    }
    .page-hero h1{font-size:2.2rem}
    .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
    .kpis .kpi{background:#fff;border:1px solid rgba(26,42,64,0.06);border-radius:12px;padding:16px;text-align:center;box-shadow:0 6px 18px rgba(12,20,30,0.03)}
    .kpi i{font-size:3.2rem;color:var(--color-accent);margin-bottom:6px}
    @media(max-width:800px){ .kpis{grid-template-columns:1fr} }

    .mv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
    .mv-card{background:#fff;border:1px solid rgba(26,42,64,0.06);border-radius:12px;padding:18px;box-shadow:0 8px 24px rgba(12,20,30,0.04)}
    .mv-card i{font-size:2.4rem;color:var(--color-accent);margin-right:8px}
    @media(max-width:900px){ .mv-grid{grid-template-columns:1fr
    
    
    
    } 



}

    .who-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:center}
    @media(max-width:900px){ .who-wrap{grid-template-columns:1fr} }
    .who-media{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .who-media img{border-radius:12px;box-shadow:0 10px 24px rgba(12,20,30,0.06)}
    .who-media img.tall{grid-row:span 2;height:100%;object-fit:cover}

    .leader-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
    @media(max-width:700px){ .leader-grid{grid-template-columns:1fr} }
    .leader-card{
      background:#fff;border:1px solid rgba(26,42,64,0.06);border-radius:12px;padding:20px;box-shadow:0 6px 18px rgba(12,20,30,0.03);
      display:flex; flex-direction:column;
    }
    .leader-card .leader-image-container {
      width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 15px;
    background: url(img/bb.png);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 0.9rem;
    }













/* كارت الشخصية */
.leader-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* ظل خفيف وعصري */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(0,0,0,0.03);
}

.leader-card:hover {
    transform: translateY(-10px); /* حركة خفيفة عند الوقوف بالماوس */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* حاوية الصورة الدائرية */
.leader-image-container {
    width: 160px;
    height: 160px;
    margin: 0 auto 25px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    position: relative;
}

.leader-image-container img {
    width: 35%;
    object-fit: cover;
    transition: transform 0.5s ease;
    border-radius: 50%;
    border: 4px solid #fff;
}

.leader-card:hover .leader-image-container img {
    transform: scale(1.1); /* زووم بسيط للصورة عند الـ hover */
}

/* النصوص داخل الكارت */
.leader-card h4 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #333;
}

.leader-card .muted {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center; /* لجعل النص متناسق */
}

















/* تحسين page-hero */
.page-hero {
    padding: 100px 0 50px;
    background: linear-gradient(135deg, rgba(248, 250, 253, 0.9) 0%, rgba(255, 255, 255, 1) 100%);
    position: relative;
    overflow: hidden;
    border-bottom: none;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(63, 94, 251, 0.05) 0%, transparent 70%);
    z-index: 0;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.page-hero h1 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    background: linear-gradient(66deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgb(65 64 64 / 85%);
    background-clip: text;
}

.page-hero p.muted {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 40px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    text-align: center;
}

/* تحسين KPIs */
.kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 30px;
}

@media (max-width: 800px) {
    .kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .kpis {
        grid-template-columns: 1fr;
    }
}

.kpi {
    background: #fff;
    border: none;
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(12, 20, 30, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(26, 42, 64, 0.06);
}

.kpi:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(12, 20, 30, 0.12);
    border-color: rgba(63, 94, 251, 0.15);
}

.kpi i {
    font-size: 3.5rem;
    color: var(--color-accent);
    margin-bottom: 15px;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.kpi h4 {
    margin: 15px 0 10px;
    color: var(--color-primary);
    font-size: 1.3rem;
}

.kpi p.muted {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* تحسين Mission/Vision/Values */
section:nth-of-type(2) {
    padding: 80px 0;
    background: #fff;
}

.mv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

@media (max-width: 900px) {
    .mv-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.mv-card {
    background: #fff;
    border: none;
    border-radius: 20px;
    padding: 35px 30px;
    box-shadow: 0 15px 40px rgba(12, 20, 30, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(26, 42, 64, 0.06);
}

.mv-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(12, 20, 30, 0.12);
    border-color: rgba(63, 94, 251, 0.15);
}

.mv-card h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    color: var(--color-primary);
    font-size: 1.4rem;
}

.mv-card i {
    font-size: 2.2rem;
    color: var(--color-accent);
    background: rgba(63, 94, 251, 0.1);
    padding: 12px;
    border-radius: 12px;
    min-width: 56px;
    text-align: center;
}

.mv-card p.muted {
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-size: 1rem;
    margin: 0;
}

/* تحسين Who We Are Section */
section:nth-of-type(3) {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(248, 250, 253, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
}

.who-wrap {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 900px) {
    .who-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.who-wrap .section-heading {
    margin-bottom: 20px;
    font-size: 2.2rem;
    background: linear-gradient(66deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgb(65 64 64 / 85%);
    background-clip: text;
    position: relative;
    padding-bottom: 15px;
}



.who-wrap p.muted {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 25px;
}

/* تحسين القوائم */
.who-wrap ul {
    list-style: none;
    line-height: 1.9;
    margin: 20px 0;
    padding: 0;
}

.who-wrap li {
    margin-bottom: 12px;
    padding-left: 0;
    color: var(--color-primary);
    font-weight: 500;
    display: flex;
    align-items: flex-start;
}

.who-wrap i {
    color: var(--color-accent);
    margin-right: 12px;
    font-size: 1.1rem;
    background: rgba(63, 94, 251, 0.1);
    padding: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 0px 5px 0px 5px;
}

/* تحسين who-media */
.who-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 15px;
    height: 100%;
}

.who-media img {
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(12, 20, 30, 0.12);
    transition: all 0.4s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.who-media img:hover {
    transform: scale(1.02);
    box-shadow: 0 25px 70px rgba(12, 20, 30, 0.18);
}

.who-media img.tall {
    grid-row: span 2;
    grid-column: 1;
}

/* تحسين Leadership Section (بدون تعديل الصور) */
#team {
    padding: 80px 0;
    background: #fff;
}

#team .section-heading {
    text-align: center;
    margin-bottom: 20px;
    font-size: 2.2rem;
    background: linear-gradient(66deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgb(65 64 64 / 85%);
    background-clip: text;
    position: relative;
    padding-bottom: 15px;
}

#team .section-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
    border-radius: 2px;
}

#team > .container > .muted {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* تحسين leader-grid */
.leader-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 30px;
}

@media (max-width: 700px) {
    .leader-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* تحسين leader-card (بالحفاظ على الصور الحالية) */
.leader-card {
    background: #fff;
    border: none;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 20px 60px rgba(12, 20, 30, 0.08);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(26, 42, 64, 0.06);
    text-align: center;
}

.leader-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(12, 20, 30, 0.15);
    border-color: rgba(63, 94, 251, 0.2);
}

/* تحسين النصوص */
.leader-card h4 {
    font-size: 1.5rem;
    margin: 0 0 8px 0;
    color: var(--color-primary);
    line-height: 1.3;
}

.leader-card span {
    display: block;
    color: var(--color-accent);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 20px;
}

.leader-card .muted {
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-size: 1rem;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* تحسين linkedin-link */
.linkedin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #0077b5;
    font-weight: 600;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    background: rgba(0, 119, 181, 0.1);
    transition: all 0.3s ease;
    margin-top: 10px;
}

.linkedin-link:hover {
    background: #0077b5;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 119, 181, 0.2);
}

.linkedin-link i {
    font-size: 1.2rem;
}

/* تحسين responsive */
@media (max-width: 768px) {
    .page-hero h1 {
        font-size: 2.2rem;
    }
    
    .page-hero p.muted {
        font-size: 1rem;
        padding: 0 15px;
    }
    
    .mv-card {
        padding: 30px 20px;
    }
    
    .mv-card h3 {
        font-size: 1.3rem;
    }
    
    .mv-card i {
        font-size: 1.8rem;
        padding: 10px;
    }
    
    .who-wrap .section-heading {
        font-size: 1.9rem;
    }
    
    #team .section-heading {
        font-size: 1.9rem;
    }
    
    .leader-card {
        padding: 30px 20px;
    }
    
    .leader-card h4 {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .page-hero h1 {
        font-size: 1.9rem;
    }
    
    .kpi {
        padding: 25px 20px;
    }
    
    .kpi i {
        font-size: 3rem;
    }
    
    .who-media {
        gap: 10px;
    }
    
    .leader-grid {
        gap: 20px;
    }
    
    .linkedin-link {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}


















/* جديد  */





    /* -----------------------------------------------------------
       إبداعات التنسيق الجديد (The New Engineering Grid Design)
    ----------------------------------------------------------- */
    :root {
        --primary-gradient: linear-gradient(135deg, #3f5efb 0%, #00bcd4 100%);
        --glass-bg: rgba(255, 255, 255, 0.95);
    }

    body {
        /* خلفية شبكة هندسية دقيقة لإعطاء طابع هندسي */
        /* background-image: 
            linear-gradient(rgba(63, 94, 251, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(63, 94, 251, 0.03) 1px, transparent 1px) !important; */
        background-size: 30px 30px !important;
    }

    /* التقسيمة الرئيسية للمحتوى (Two Columns Grid) */
    .contact-container-grid {
        display: grid !important;
        grid-template-columns: 400px 1fr !important; /* عمود المعلومات ثم الفورم */
        gap: 30px !important;
        margin-top: 50px !important;
    }

    @media (max-width: 1100px) {
        .contact-container-grid {
            grid-template-columns: 1fr !important;
        }
    }

    /* الجانب الأيسر: كارت المعلومات الزجاجي */
    .contact-sidebar-pro {
        background: var(--primary-gradient) !important;
        border-radius: 30px !important;
        padding: 40px !important;
        color: white !important;
        box-shadow: 0 25px 50px -12px rgba(63, 94, 251, 0.25) !important;
        position: sticky;
        top: 100px;
        height: fit-content;
    }

    @media(max-width: 768px)
    {

.contact-sidebar-pro 
{
    position: relative;
    top: 0;
}


.contact-container-grid
{

display:flex !important;
flex-direction: column-reverse;


}



    }

    .info-item-pro {
        display: flex !important;
        gap: 20px !important;
        margin-bottom: 30px !important;
    }

    .info-icon-pro {
        width: 50px !important;
        height: 50px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.3rem !important;
        flex-shrink: 0 !important;
        animation: pulse-aura 2s infinite;
    }

    @keyframes pulse-aura {
        0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); }
        70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    }

    .info-content-pro h4 { color: #fff !important; margin: 0 0 5px 0 !important; font-weight: 700 !important; font-family: 'Poppins', sans-serif;}
    .info-content-pro p { color: rgba(255, 255, 255, 0.9) !important; font-size: 0.9rem !important; margin: 0 !important; }

    /* خريطة المقر - Sporting, Alexandria */
    .location-map-wrap {
        border-radius: 20px !important;
        overflow: hidden !important;
        margin-top: 25px;
        height: 200px !important;
        border: 2px solid rgba(255,255,255,0.2);
    }

    /* الجانب الأيمن: الفورم الفاخر */
    .form-container-pro {
        background: var(--glass-bg) !important;
        border-radius: 30px !important;
        padding: 50px !important;
        border: 1px solid #fff !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.05) !important;
    }

    /* سنترة الأيقونات داخل الحقول */
    .pro-form .field { position: relative !important;  align-items: center !important; }
    
    .pro-form .field i {
        position: absolute !important;
        left: 20px !important;
/*        top: 50% !important;
*/        transform: translateY(-50%) !important;
        color: #3f5efb !important;
        transition: 0.3s !important;
        font-size: 1.1rem !important;
        pointer-events: none;
    }

    [direction="rtl"] .pro-form .field i, body.rtl .pro-form .field i {
        left: auto !important; right: 20px !important;
    }

    .pro-form .input {
        width: 100% !important;
        height: 60px !important;
        padding-left: 55px !important;
        border-radius: 15px !important;
        border: 2px solid #edf2f7 !important;
        background: #f8fafc !important;
        transition: 0.3s !important;
    }

    [direction="rtl"] .pro-form .input, body.rtl .pro-form .input {
        padding-left: 20px !important; padding-right: 55px !important;
    }

    .pro-form .input:focus {
        border-color: #3f5efb !important;
        background: #fff !important;
        box-shadow: 0 10px 25px rgba(63, 94, 251, 0.05) !important;
    }

    /* زر الإرسال المهندس */
    .btn-submit-engineering {
        width: 100% !important;
        height: 60px !important;
        background: var(--primary-gradient) !important;
        border: none !important;
        border-radius: 15px !important;
        color: white !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        cursor: pointer !important;
        transition: 0.4s !important;
        font-family: 'Poppins', sans-serif;
    }

    .btn-submit-engineering:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 15px 30px rgba(63, 94, 251, 0.3) !important;
    }

    .progress { height: 6px !important; background: #eee !important; border-radius: 10px !important; margin-bottom: 25px !important; overflow: hidden !important;}
    .progress .bar { background: var(--primary-gradient) !important; transition: 0.4s ease; }











/* ennnd */



















/* ==============start page join page3======== */



    /* Improved main section */
    #join {
        padding: 80px 0;
        background: linear-gradient(135deg, rgba(248, 250, 253, 0.8) 0%, rgba(255, 255, 255, 1) 100%);
        position: relative;
        /* overflow: hidden; */
            overflow-x: clip;
    }

    #join::before {
        content: '';
        position: absolute;
        top: -30%;
        right: -15%;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(63, 94, 251, 0.05) 0%, transparent 70%);
        z-index: 0;
    }

    /* Enhanced section heading */
    #join .section-heading {
        text-align: center;
        margin-bottom: 20px;
        font-size: 2.5rem;
        background: linear-gradient(66deg, var(--color-primary) 0%, var(--color-accent) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgb(65 64 64 / 78%);
        background-clip: text;
        position: relative;
        padding-bottom: 20px;
    }

    #join .section-heading::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
        border-radius: 2px;
    }

    #join .muted {
        text-align: center;
        max-width: 700px;
        margin: 0 auto 40px;
        font-size: 1.1rem;
        line-height: 1.6;
        color: var(--color-text-secondary);
    }

    /* Improved grid layout */
    .join-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 40px;
        align-items: start;
        margin-top: 30px;
        position: relative;
        z-index: 1;
    }

    @media (max-width: 900px) {
        .join-grid {
            grid-template-columns: 1fr;
            gap: 30px;
        }
    }

    /* Enhanced cards */
    .join-card, .form-card {
        background: #fff;
        border: none;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 20px 60px rgba(12, 20, 30, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .join-card:hover, .form-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 70px rgba(12, 20, 30, 0.12);
    }

    /* Join card specific */
    .join-card h3 {
        margin-bottom: 20px;
        color: var(--color-primary);
        font-size: 1.6rem;
        display: flex;
        align-items: center;
        gap: 12px;
        padding-bottom: 15px;
        border-bottom: 2px solid rgba(63, 94, 251, 0.1);
    }

    .join-card ul {
        list-style: none;
        padding: 0;
        margin-bottom: 30px;
    }

    .join-card ul li {
        padding: 12px 0;
        border-bottom: 1px solid rgba(26, 42, 64, 0.05);
        color: var(--color-text-secondary);
        font-size: 1rem;
        line-height: 1.5;
        position: relative;
        padding-left: 24px;
    }

    .join-card ul li:before {
        content: '✓';
        position: absolute;
        left: 0;
        color: var(--color-accent);
        font-weight: bold;
    }

    .join-card ul li strong {
        color: var(--color-primary);
        font-weight: 700;
    }

    .intro-img {
        margin-top: 25px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 15px 40px rgba(12, 20, 30, 0.1);
        transition: transform 0.3s ease;
    }

    .intro-img:hover {
        transform: scale(1.02);
    }

    .intro-img img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        display: block;
    }

    /* Form header improvements */
    .form-header {
   display: flex;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(63, 94, 251, 0.1);
    flex-direction: column;
    align-items: stretch;
    }

    .form-card h3 {
        margin: 0;
        color: var(--color-primary);
        font-size: 1.8rem;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .apply-fast-badge {
        background: linear-gradient(66deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
        color: white;
        padding: 12px 24px;
        border-radius: 30px;
        font-weight: 700;
        font-size: 0.95rem;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 8px 25px rgba(63, 94, 251, 0.25);
        border: 2px solid rgba(255, 255, 255, 0.2);
    }

    /* Enhanced form fields */
    .pro-form .row {
     display: flex;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
    justify-content: center;
    align-items: flex-end;
    }

    .pro-form .field {
        position: relative;
        margin-bottom: 24px;
    }

    .pro-form label {
        display: block;
        margin-bottom: 10px;
        font-weight: 600;
        color: var(--color-primary);
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .pro-form .field i {
        position: absolute;
        left: 16px;
        /* top: 50%; */
        transform: translateY(-50%);
        color: var(--color-accent);
        font-size: 1rem;
        z-index: 2;
    }

    .pro-form .input,
    .pro-form select.input {
        width: 100%;
        background: #fff;
        border: 2px solid rgba(26, 42, 64, 0.1);
        border-radius: 12px;
        padding: 16px 16px 16px 48px;
        font-size: 1rem;
        font-family: 'Poppins', sans-serif;
        transition: all 0.3s ease;
        color: var(--color-primary);
    }

    .pro-form .input:focus,
    .pro-form select.input:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 8px 24px rgba(63, 94, 251, 0.15);
        background: #fff;
    }

    .pro-form select.input {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%233F5EFB' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 16px;
        padding-right: 40px;
    }

    /* Enhanced file upload area */
    .upload-wrap {
        margin-top: 25px;
        padding: 20px;
        background: linear-gradient(135deg, rgba(248, 250, 253, 0.8) 0%, rgba(255, 255, 255, 1) 100%);
        border-radius: 16px;
        border: 2px solid rgba(63, 94, 251, 0.05);
    }

    .upload-area {
        border: 3px dashed rgba(63, 94, 251, 0.25);
        border-radius: 16px;
        padding: 50px 20px;
        text-align: center;
        background: #fff;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .upload-area:hover {
        border-color: var(--color-accent);
        background: rgba(63, 94, 251, 0.02);
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(63, 94, 251, 0.1);
    }

    .upload-area.dragover {
        border-color: var(--color-accent);
        background: rgba(63, 94, 251, 0.05);
        border-style: solid;
    }

    .upload-area .icon {
        font-size: 52px;
        color: var(--color-accent);
        margin-bottom: 20px;
        transition: transform 0.3s ease;
    }

    .upload-area:hover .icon {
        transform: scale(1.1);
    }

    .upload-area p {
        color: var(--color-primary);
        font-size: 1.05rem;
        line-height: 1.6;
        margin: 0 0 8px 0;
    }

    .upload-area p span {
        color: var(--color-accent);
        font-weight: 700;
    }

    .upload-area p small {
        color: var(--color-text-secondary);
        font-size: 0.9rem;
    }


    /* File info display */
    .file-info {
        margin-top: 20px;
        padding: 15px 20px;
        background: #fff;
        border-radius: 10px;
        border-left: 4px solid var(--color-accent);
        font-size: 0.95rem;
        color: var(--color-primary);
        box-shadow: 0 4px 15px rgba(12, 20, 30, 0.05);
    }

    .file-info i {
        color: var(--color-accent);
        margin-right: 10px;
    }

    /* Progress bar */
    .progress {
        height: 8px;
        background: rgba(238, 243, 255, 0.5);
        border-radius: 999px;
        overflow: hidden;
        margin: 20px 0 10px 0;
        border: 1px solid rgba(63, 94, 251, 0.1);
    }

    .bar {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
        transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        border-radius: 999px;
    }

    /* Status messages */
    .status {
        display: none;
        padding: 20px;
        border-radius: 12px;
        margin: 20px 0;
        font-weight: 600;
        font-size: 0.95rem;
        border-left: 4px solid;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .status.show {
        display: block;
    }

    .status.ok {
        background: linear-gradient(135deg, rgba(212, 237, 218, 0.2) 0%, rgba(195, 230, 203, 0.1) 100%);
        color: #155724;
        border-left-color: #28a745;
    }

    .status.err {
        background: linear-gradient(135deg, rgba(248, 215, 218, 0.2) 0%, rgba(245, 198, 203, 0.1) 100%);
        color: #721c24;
        border-left-color: #dc3545;
    }

    /* Form validation styles */
    .form-group.error label {
        color: #dc3545;
    }

    .form-group.error .input,
    .form-group.error select.input {
        border-color: #dc3545 !important;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);
        background: rgba(220, 53, 69, 0.02);
    }

    .form-group.error {
        animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }

    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        20%, 60% { transform: translateX(-8px); }
        40%, 80% { transform: translateX(8px); }
    }

    /* Enhanced submit button */
    .actions {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 30px;
        flex-wrap: wrap;
        padding-top: 20px;
        border-top: 2px solid rgba(63, 94, 251, 0.05);
    }

    .actions .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 16px 32px;
        border-radius: 12px;
        font-weight: 800;
        font-size: 1rem;
        background: linear-gradient(66deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
        color: #fff;
        border: 0;
        box-shadow: 0 12px 30px rgba(63, 94, 251, 0.25);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .actions .btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
    }

    .actions .btn-primary:hover::before {
        left: 100%;
    }

    .actions .btn-primary:hover {
        transform: translateY(-3px);
    }

    #joinMsg {
        color: var(--color-text-secondary);
        font-size: 0.9rem;
        padding: 12px 20px;
        background: rgba(248, 250, 253, 0.8);
        border-radius: 8px;
        border-left: 3px solid var(--color-accent);
    }

    /* Required star styling */
    .required-star {
        color: #ff4444;
        font-weight: bold;
        margin-left: 3px;
    }

    /* Hint text */
    .hint {
        font-size: 0.86rem;
        color: var(--color-text-secondary);
        margin-top: 15px;
        text-align: center;
        padding: 10px;
        background: rgba(248, 250, 253, 0.5);
        border-radius: 8px;
    }

    /* Responsive improvements */
    @media (max-width: 768px) {
        #join {
            padding: 50px 0;
        }

        #join .section-heading {
            font-size: 2rem;
            margin-bottom: 15px;
        }

        .join-card, .form-card {
            padding: 30px 25px;
        }
        
        
        .pro-form .row {

            display: flex;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
        }

        .form-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
        }

        .apply-fast-badge {
            align-self: flex-start;
        }

        .upload-area {
            padding: 30px 15px;
        }

       

        .actions {
            flex-direction: column;
            gap: 15px;
        }

        .actions .btn-primary {
            width: 100%;
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        #join .section-heading {
            font-size: 1.8rem;
        }

        .join-grid {
            margin-top: 20px;
        }

        

        .upload-area p {
            font-size: 0.95rem;
        }
    }



    /* انيميشان */



        /* تحسين أنيميشن الكارد عند الظهور */
    .join-card, .form-card {
        animation: cardAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes cardAppear {
        0% {
            opacity: 0;
            transform: translateY(30px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* أنيميشن للأيقونة في منطقة رفع الملف */
    .upload-area .icon {
        animation: floatIcon 3s ease-in-out infinite;
    }

    @keyframes floatIcon {
        0%, 100% {
            transform: translateY(0) scale(1);
        }
        50% {
            transform: translateY(-10px) scale(1.05);
        }
    }

    /* أنيميشن للنص في منطقة رفع الملف */
    .upload-area p span {
        display: inline-block;
        animation: pulseText 2s ease-in-out infinite;
        position: relative;
    }

    @keyframes pulseText {
        0%, 100% {
            color: var(--color-accent);
            transform: scale(1);
        }
        50% {
            color: var(--color-accent-light);
            transform: scale(1.05);
            text-shadow: 0 0 10px rgba(63, 94, 251, 0.3);
        }
    }

    /* أنيميشن لتأثير النقطة المتحركة تحت النص */
    .upload-area p::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
        animation: lineMove 4s ease-in-out infinite;
    }

    @keyframes lineMove {
        0% {
            width: 0;
            opacity: 0;
            left: 50%;
        }
        50% {
            width: 100px;
            opacity: 1;
        }
        100% {
            width: 0;
            opacity: 0;
            left: 50%;
        }
    }


    /* أنيميشن للحقول عند التركيز */
    .pro-form .input:focus,
    .pro-form select.input:focus {
        animation: inputFocus 0.5s ease-out;
    }

    @keyframes inputFocus {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.01);
        }
        100% {
            transform: scale(1);
        }
    }

    /* أنيميشن لشريط التقدم */
    .bar {
        animation: progressPulse 2s ease-in-out infinite;
    }

    @keyframes progressPulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.7;
        }
    }




/* انيميشان  */

/* أنيميشن للكروت عند الظهور */
.join-card, .form-card,
.emp-card {
    animation: cardAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes cardAppear {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* أنيميشن للأيقونة في منطقة رفع الملف */
.upload-area .icon {
    animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

/* أنيميشن للنص في منطقة رفع الملف */
.upload-area p span {
    display: inline-block;
    animation: pulseText 2s ease-in-out infinite;
    position: relative;
}

@keyframes pulseText {
    0%, 100% {
        color: var(--color-accent, #3f5efb);
        transform: scale(1);
    }
    50% {
        color: var(--color-accent-light, #00bcd4);
        transform: scale(1.05);
        text-shadow: 0 0 10px rgba(63, 94, 251, 0.3);
    }
}

/* أنيميشن لتأثير النقطة المتحركة تحت النص */
.upload-area p {
    position: relative;
}

.upload-area p::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent, #3f5efb), var(--color-accent-light, #00bcd4));
    animation: lineMove 4s ease-in-out infinite;
}

@keyframes lineMove {
    0% {
        width: 0;
        opacity: 0;
        left: 50%;
    }
    50% {
        width: 100px;
        opacity: 1;
    }
    100% {
        width: 0;
        opacity: 0;
        left: 50%;
    }
}


/* أنيميشن للحقول عند التركيز */
.pro-form .input:focus,
.pro-form select.input:focus,
.pro-form textarea.input:focus {
    animation: inputFocus 0.5s ease-out;
}

@keyframes inputFocus {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.01);
    }
    100% {
        transform: scale(1);
    }
}

/* أنيميشن لشريط التقدم */
.bar {
    animation: progressPulse 2s ease-in-out infinite;
}

@keyframes progressPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* أنيميشن للاهتزاز عند السحب */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.upload-area.dragover {
    animation: shake 0.5s ease-in-out;
}





























/* جديد ونهائي  */


/* تنسيق الشبكة وتساوي الأعمدة */
.join-grid-modern {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0,0,0,0.08);
}

/* العمود الملون الأيسر */
.visual-side {
    flex: 1;
    min-width: 380px;
    background: linear-gradient(135deg, rgba(63, 94, 251, 0.96), rgba(0, 188, 212, 0.9)), 
                url('img/imjoin.webp') fixed;
    background-size: cover;
    background-position: center;
    padding: 50px 40px;
    color: #fff !important;
    display: flex;
    flex-direction: column;

        border-radius: 20px;
}

/* حاوية جديدة لجعل الكروت بجانب بعضها (التعديل المطلوب) */
.exp-row-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

/* كروت الخبرة الزجاجية بالأيقونات - تم تعديلها لتناسب العرض الأفقي */
.exp-glass-card {
    flex: 1;
    min-width: 150px;
    display: flex;
    flex-direction: column; /* جعل الأيقونة فوق النص للمساواة */
    align-items: center;
    text-align: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 15px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.exp-glass-card:hover {
    transform: translateY(-10px); /* الحركة للأعلى بدلاً من اليمين */
    background: rgba(255, 255, 255, 0.22);
}

.exp-icon {
    flex-shrink: 0;
    width: 55px;
    text-align: center;
    color: #fff;
}

.exp-text strong {
    display: block;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 4px;
}

.exp-text span {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
}










.visual-side {
    position: sticky ;
    top:-23px;                  /* عدلها حسب ارتفاع الهيدر + شوية فراغ */
    align-self: flex-start !important;      /* ← مهم جدًا مع flex */
    height: fit-content !important;
    flex-shrink: 0;                         /* يمنع التصغير */
}




.exp-row-container {
    flex-wrap: wrap;             /* رجّعه wrap بدل nowrap لو كان اتغير */
    width: 100%;
}

.exp-glass-card {
    max-width: 100%;             /* يضمن إن الكروت ما تخرجش بره */
}












/* العمود الأيمن (الفورم) */
.form-side {
    flex: 1.4;
    min-width: 380px;
    padding: 50px 45px;
    background: #fff;
}

.intro-img-wrapper {
    /* margin-top: auto;
    border-radius: 20px;
    overflow: hidden;
    height: 180px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); */

    text-align: center;
}
.intro-img-wrapper img {     max-width: 100%; }

/* للموبايل */
@media (max-width: 992px) {
    .join-grid-modern { flex-direction: column; }
    .visual-side { order: 0; border-radius: 0; 
    
    position: relative;
            top: 0;
    
    }


    /* .exp-row-container { flex-direction: column; }  */
    
    /* تعود عمودية في الموبايل لسهولة القراءة */
    .exp-glass-card { flex-direction: row; text-align: left; }
} 

/* الحاوية الرئيسية - سنترة عمودية كاملة */
.upload-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* سنترة أفقية */
    justify-content: center !important; /* سنترة رأسية */
    text-align: center !important;
    padding: 40px 20px !important;
    background: #f8fafc !important;
    border: 2px dashed #3f5efb !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* الديف الخاص بالأيقونة - سنترة داخلية */
.icon-wrapper {
    width: 70px !important;
    height: 70px !important;
    background: rgba(63, 94, 251, 0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 15px !important;
    transition: 0.3s ease !important;
    position: relative;
}

/* الأيقونة نفسها داخل الديف */
.upload-area .icon {
    font-size: 2rem !important;
    color: #3f5efb !important;
    margin: 0 !important; /* إلغاء أي مارجن قديم */
}

/* تأثير عند المرور بالماوس */
.upload-area:hover .icon-wrapper {
    background: #3f5efb !important;
    transform: scale(1.1) !important;
}

.upload-area:hover .icon {
    color: #fff !important;
}

/* سنترة النصوص */
.upload-area p {
    margin: 10px 0 5px 0 !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    display: block !important;
    width: 100% !important;
}

.upload-area p span {
    color: #3f5efb !important;
    text-decoration: underline !important;
}

.upload-area small {
    color: #64748b !important;
    display: block !important;
    width: 100% !important;
}

/* سنترة شريط المعاينة */
.file-info {
    justify-content: center !important; /* سنترة محتوى المعاينة */
    margin-top: 15px !important;
    border: none !important;
    background: #f1f5f9 !important;
    border-radius: 12px !important;
    padding: 10px !important;
}





.exp-glass-card {
    flex: 1;
    min-width: 0; /* دي اللي هتمنع الـ Overflow وتجبرهم يتقسموا على المساحة */
    display: flex;
    flex-direction: column; 
    align-items: center;
    text-align: center;
    gap: 8px; 
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 5px; /* صغرنا الـ Padding الجانبي جداً عشان الـ 3 كروت ياخدوا راحتهم */
    border-radius: 20px;
    transition: all 0.3s ease;
}

/* تصغير الخط شوية عشان المساحة في الصف الواحد */
.exp-text strong {
    font-size: 0.95rem; 
}
.exp-text span {
    font-size: 0.75rem;
}





.join-grid-modern {
    display: flex !important;               /* أو grid لو عايز */
    flex-wrap: nowrap;                      /* مهم لو عايز الاتجاه أفقي */
    align-items: flex-start !important;     /* ← الحل الرئيسي رقم 1 */
    overflow: visible !important;           /* ← الحل الرئيسي رقم 2 */
    min-height: 100vh;                      /* عشان يضمن وجود سكرول */
}














/* ennnnd  */





















/* ===========start page4  services=================== */


/* تحسين page-hero */
.page-hero {
    padding: 80px 0 40px;
    border-bottom: none;
    background: linear-gradient(135deg, rgba(248, 250, 253, 0.9) 0%, rgba(255, 255, 255, 1) 100%);
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(63, 94, 251, 0.05) 0%, transparent 70%);
    z-index: 0;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

/* تحسين services-quick */
.services-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}

@media (max-width: 1000px) {
    .services-quick {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .services-quick {
        grid-template-columns: 1fr;
    }
}

.quick-card {
    background: #fff;
    border: none;
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(12, 20, 30, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(26, 42, 64, 0.06);
}

.quick-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(12, 20, 30, 0.12);
    border-color: rgba(63, 94, 251, 0.15);
}

.quick-card i {
    font-size: 2.8rem;
    color: var(--color-accent);
    margin-bottom: 15px;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.quick-card h3 {
    margin: 10px 0;
    color: var(--color-primary);
    font-size: 1.3rem;
}

.quick-card p.muted {
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* تحسين svc-block */
.svc-block {
    padding: 80px 0;
    border-bottom: 1px solid rgba(26, 42, 64, 0.08);
    background: #fff;
    position: relative;
}

.svc-block:nth-child(even) {
    background: linear-gradient(135deg, rgba(248, 250, 253, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
}

/* تحسين svc-grid */
.svc-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 900px) {
    .svc-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* تحسين العناوين */
.svc-block .section-heading {
    margin-bottom: 20px;
    font-size: 2.2rem;
    background: linear-gradient(66deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgb(65 64 64 / 85%);
    background-clip: text;
    position: relative;
    padding-bottom: 15px;
        text-align: start;

}


/* تحسين النصوص */
.svc-block p.muted {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 25px;
    text-align: start;
}

/* تحسين القوائم */
.svc-list {
    list-style: none;
    line-height: 1.9;
    margin-top: 15px;
    padding: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.svc-list li {
    margin-bottom: 12px;
    padding-left: 0;
    color: var(--color-primary);
    font-weight: 500;
}

.svc-list i {
    color: var(--color-accent);
    margin-right: 12px;
    font-size: 1.1rem;
    background: rgba(63, 94, 251, 0.1);
    padding: 6px;
    border-radius: 50%;
}

/* تحسين الصور */
.svc-media {
    position: relative;
}

.svc-media img {
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(12, 20, 30, 0.12);
    transition: all 0.4s ease;
    width: 100%;
    height: auto;
    display: block;
}

.svc-media img:hover {
    transform: scale(1.02);
    box-shadow: 0 25px 70px rgba(12, 20, 30, 0.18);
}

/* تحسين زر CTA */
.svc-block + section {
    padding: 60px 0;
    background: linear-gradient(135deg, rgba(248, 250, 253, 0.8) 0%, rgba(255, 255, 255, 1) 100%);
    text-align: center;
}

.svc-block + section .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.05rem;
    background: linear-gradient(66deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 15px 40px rgba(63, 94, 251, 0.25);
    transition: all 0.3s ease;
            transition: all .5s !important;

}

.svc-block + section .btn-primary:hover {
    transform: translateY(-3px);
}

/* تأثيرات AOS إضافية */
[data-aos="fade-right"] {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s ease;
}

[data-aos="fade-left"] {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s ease;
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translateX(0);
}

/* تحسين responsive */
@media (max-width: 768px) {
    .page-hero {
        padding: 60px 0 30px;
    }
    
    .svc-block {
        padding: 60px 0;
    }
    
    .svc-block .section-heading {
        font-size: 1.9rem;
    }
    
    .quick-card {
        padding: 25px 15px;
    }
    
    .quick-card i {
        font-size: 2.4rem;
    }
}

@media (max-width: 480px) {
    .svc-block .section-heading {
        font-size: 1.7rem;
    }
    
    .svc-grid {
        gap: 30px;
    }
}




/* ennnd */
























/* ===============start page5  employers ============== */

    /* Improved main section */
    #employers {
        padding: 80px 0;
        background: linear-gradient(135deg, rgba(248, 250, 253, 0.8) 0%, rgba(255, 255, 255, 1) 100%);
        position: relative;
        overflow: hidden;
    }

    #employers::before {
        content: '';
        position: absolute;
        top: -30%;
        left: -15%;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(63, 94, 251, 0.05) 0%, transparent 70%);
        z-index: 0;
    }

    /* Enhanced section heading */
    #employers .section-heading {
        text-align: center;
        margin-bottom: 20px;
        font-size: 2.5rem;
        background: linear-gradient(66deg, var(--color-primary) 0%, var(--color-accent) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgb(65 64 64 / 78%);
        background-clip: text;
        position: relative;
        padding-bottom: 20px;
    }

    #employers .section-heading::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
        border-radius: 2px;
    }

    #employers .muted {
        text-align: center;
        max-width: 700px;
        margin: 0 auto 40px;
        font-size: 1.1rem;
        line-height: 1.6;
        color: var(--color-text-secondary);
    }

    /* Improved grid layout */
    .emp-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 40px;
        align-items: start;
        margin-top: 30px;
        position: relative;
        z-index: 1;
    }

    @media (max-width: 900px) {
        .emp-grid {
            grid-template-columns: 1fr;
            gap: 30px;
        }
    }

    /* Enhanced cards */
    .emp-card, .form-card {
        background: #fff;
        border: none;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 20px 60px rgba(12, 20, 30, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .emp-card:hover, .form-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 70px rgba(12, 20, 30, 0.12);
    }

    /* Employer card specific */
    .emp-card h3 {
        text-align: center;
        margin-bottom: 30px;
        color: var(--color-primary);
        font-size: 1.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding-bottom: 20px;
        border-bottom: 2px solid rgba(63, 94, 251, 0.1);
    }

    /* Improved benefits grid */
    .benefits {
        display: grid;
        grid-template-columns: repeat(1, fr);
        gap: 20px;
        margin-bottom: 30px;
    }

    @media (max-width: 768px) {
        .benefits {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    @media (max-width: 480px) {
        .benefits {
            grid-template-columns: 1fr;
        }
    }

    .benefit {
        background: #fff;
        border: none;
        border-radius: 16px;
        padding: 25px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(12, 20, 30, 0.06);
        transition: all 0.3s ease;
        border: 1px solid transparent;
    }

    .benefit:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(12, 20, 30, 0.1);
        border-color: rgba(63, 94, 251, 0.1);
    }

    .benefit i {
        font-size: 2.2rem;
        color: var(--color-accent);
        margin-bottom: 15px;
        display: block;
        height: 60px;
        width: 60px;
        line-height: 60px;
        background: linear-gradient(135deg, rgba(63, 94, 251, 0.1) 0%, rgba(0, 188, 212, 0.1) 100%);
        border-radius: 50%;
        margin: 0 auto 20px;
    }

    .benefit h4 {
        margin-bottom: 10px;
        color: var(--color-primary);
        font-size: 1.2rem;
        font-weight: 700;
    }

    .benefit p {
        color: var(--color-text-secondary);
        font-size: 0.95rem;
        line-height: 1.5;
        margin: 0;
    }

    /* Improved hero image */
    .emp-hero {
        border-radius: 16px;
        overflow: hidden;
        margin-top: 25px;
        box-shadow: 0 15px 40px rgba(12, 20, 30, 0.1);
        transition: transform 0.3s ease;
    }

    .emp-hero:hover {
        transform: scale(1.02);
    }

    .emp-hero img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        display: block;
    }

    /* Form header improvements */
    .form-card h3 {
        margin-bottom: 30px;
        color: var(--color-primary);
        font-size: 1.8rem;
        display: flex;
        align-items: center;
        gap: 12px;
        padding-bottom: 20px;
        border-bottom: 2px solid rgba(63, 94, 251, 0.1);
    }

    /* Enhanced form fields */
    .pro-form .row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }

    .pro-form .form-group {
        position: relative;
        margin-bottom: 24px;
    }

    .pro-form label {
        display: block;
        margin-bottom: 10px;
        font-weight: 600;
        color: var(--color-primary);
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .pro-form .form-group i {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-accent);
        font-size: 1rem;
        z-index: 2;
    }

    .pro-form .input,
    .pro-form select.input,
    .pro-form textarea.input {
        width: 100%;
        background: #fff;
        border: 2px solid rgba(26, 42, 64, 0.1);
        border-radius: 12px;
        padding: 16px 16px 16px 48px;
        font-size: 1rem;
        font-family: 'Poppins', sans-serif;
        transition: all 0.3s ease;
        color: var(--color-primary);
    }

    .pro-form textarea.input {
        min-height: 140px;
        resize: vertical;
        padding-top: 16px;
    }

    .pro-form .input:focus,
    .pro-form select.input:focus,
    .pro-form textarea.input:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 8px 24px rgba(63, 94, 251, 0.15);
        background: #fff;
    }

    /* Enhanced file upload area */
    .upload-wrap {
        margin-top: 25px;
        padding: 20px;
        background: linear-gradient(135deg, rgba(248, 250, 253, 0.8) 0%, rgba(255, 255, 255, 1) 100%);
        border-radius: 16px;
        border: 2px solid rgba(63, 94, 251, 0.05);
    }

    .upload-area {
        border: 3px dashed rgba(63, 94, 251, 0.25);
        border-radius: 16px;
        padding: 40px 20px;
        text-align: center;
        background: #fff;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .upload-area:hover {
        border-color: var(--color-accent);
        background: rgba(63, 94, 251, 0.02);
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(63, 94, 251, 0.1);
    }

    .upload-area.dragover {
        border-color: var(--color-accent);
        background: rgba(63, 94, 251, 0.05);
        border-style: solid;
    }

    .upload-area .icon {
        font-size: 48px;
        color: var(--color-accent);
        margin-bottom: 15px;
        transition: transform 0.3s ease;
    }

    .upload-area:hover .icon {
        transform: scale(1.1);
    }

    .upload-area p {
        color: var(--color-primary);
        font-size: 1.05rem;
        line-height: 1.6;
        margin: 0 0 8px 0;
    }

    .upload-area p span {
        color: var(--color-accent);
        font-weight: 700;
        display: block;
        margin-top: 5px;
    }

    /* Enhanced submit button */


    .btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
    }

    .btn-primary:hover::before {
        left: 100%;
    }

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 35px rgba(63, 94, 251, 0.35);
    }

    /* Progress bar */
    .progress {
        height: 8px;
        background: rgba(238, 243, 255, 0.5);
        border-radius: 999px;
        overflow: hidden;
        margin: 20px 0 10px 0;
        border: 1px solid rgba(63, 94, 251, 0.1);
    }

    .bar {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
        transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        border-radius: 999px;
    }

    /* Status messages */
    .status {
        display: none;
        padding: 20px;
        border-radius: 12px;
        margin: 20px 0;
        font-weight: 600;
        font-size: 0.95rem;
        border-left: 4px solid;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .status.show {
        display: block;
    }

    .status.ok {
        background: linear-gradient(135deg, rgba(212, 237, 218, 0.2) 0%, rgba(195, 230, 203, 0.1) 100%);
        color: #155724;
        border-left-color: #28a745;
    }

    .status.err {
        background: linear-gradient(135deg, rgba(248, 215, 218, 0.2) 0%, rgba(245, 198, 203, 0.1) 100%);
        color: #721c24;
        border-left-color: #dc3545;
    }

    /* Form validation styles */
    .form-group.error label {
        color: #dc3545;
    }

    .form-group.error .input,
    .form-group.error select.input,
    .form-group.error textarea.input {
        border-color: #dc3545 !important;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);
        background: rgba(220, 53, 69, 0.02);
    }

    .form-group.error .upload-area {
        border-color: #dc3545 !important;
    }

    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        20%, 60% { transform: translateX(-8px); }
        40%, 80% { transform: translateX(8px); }
    }

    .form-group.error {
        animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }

    /* Required star styling */
    .required-star {
        color: #ff4444;
        font-weight: bold;
        margin-left: 3px;
    }

    /* File info display */
    .file-info {
        margin-top: 15px;
        padding: 15px 20px;
        background: #fff;
        border-radius: 10px;
        border-left: 4px solid var(--color-accent);
        font-size: 0.95rem;
        color: var(--color-primary);
        box-shadow: 0 4px 15px rgba(12, 20, 30, 0.05);
        display: none;
    }

    .file-info.show {
        display: block;
    }

    /* Responsive improvements */
    @media (max-width: 768px) {
        #employers {
            padding: 50px 0;
        }

        #employers .section-heading {
            font-size: 2rem;
            margin-bottom: 15px;
        }

        .emp-card, .form-card {
            padding: 30px 25px;
        }

        .emp-card h3 {
            font-size: 1.6rem;
        }

        .form-card h3 {
            font-size: 1.6rem;
        }

        .benefit {
            padding: 20px;
        }

        .benefit i {
            font-size: 1.8rem;
            height: 50px;
            width: 50px;
            line-height: 50px;
            margin-bottom: 15px;
        }

        .emp-hero img {
            height: 200px;
        }

        .upload-area {
            padding: 30px 15px;
        }

        .btn-primary {
            width: 100%;
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        #employers .section-heading {
            font-size: 1.8rem;
        }

        .emp-grid {
            margin-top: 20px;
        }

        .pro-form .row {
            grid-template-columns: 1fr;
            gap: 15px;
        }

        .upload-area p {
            font-size: 0.95rem;
        }
    }

    /* Fix for icon position in textarea */
    .pro-form textarea.input + i {
        top: 42px;
        transform: none;
    }


/* تنسيقات مخصصة لأيقونة الرفع مع الكلاس arr */
.arr {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: block !important;
    margin: 0 auto 15px !important;
    color: var(--color-accent) !important;
    font-size: 3rem !important;
    text-align: center;
    animation: uploadFloat 3s ease-in-out infinite;
}

/* أنيميشن خاص للكلاس arr */
@keyframes uploadFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        color: var(--color-accent);
    }
    50% {
        transform: translateY(-8px) scale(1.05);
        color: var(--color-accent-light);
    }
}

/* حالة التمرير */
.upload-area:hover .arr {
    animation: uploadFloatHover 1.5s ease-in-out infinite;
}

@keyframes uploadFloatHover {
    0%, 100% {
        transform: translateY(0) scale(1.1);
    }
    50% {
        transform: translateY(-10px) scale(1.15);
    }
}

/* تأثير عند السحب والإفلات */
.upload-area.dragover .arr {
    animation: uploadDrag 0.8s ease-in-out;
    color: #2f6bff !important;
}

@keyframes uploadDrag {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(15deg);
    }
    75% {
        transform: rotate(-15deg);
    }
}










    :root {
      --brand-gradient: linear-gradient(66deg, rgb(63 94 251) 0%, rgb(0 188 212) 100%);
      --dark-blue: #0f172a;
    }

    /* --- Floating Animation (خفيفة جداً) --- */
    @keyframes subtleFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-7px); }
    }
    .benefit-box-spectacular { animation: subtleFloat 5s ease-in-out infinite; }
    .benefit-box-spectacular:nth-child(2) { animation-delay: 1.5s; }
    .benefit-box-spectacular:nth-child(3) { animation-delay: 3s; }

    /* --- Benefits Section --- */
    .emp-grid-spectacular {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin: 40px 0 60px;
    }
    .benefit-box-spectacular {
        background: #fff; padding: 40px 25px; border-radius: 30px; text-align: center;
        border: 1px solid #f1f5f9; box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    }
    .icon-morph {
        width: 85px; height: 85px; margin: 0 auto 20px;
        background: #f8fafc; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        display: flex; align-items: center; justify-content: center; font-size: 2.3rem;
    }
    .icon-morph i { background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

    /* --- Split Form Design --- */
    .form-split-container {
        display: grid; grid-template-columns: 1fr 1.2fr;
        background: #fff; border-radius: 40px; overflow: hidden;
        box-shadow: 0 40px 80px rgba(0,0,0,0.08); border: 1px solid #f1f5f9;
        margin-bottom: 80px;
    }
    .form-visual-side {
        background: url('img/el.webp')center/cover;
        position: relative; display: flex; align-items: center; justify-content: center; padding: 40px;
    }
    .visual-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(63, 94, 251, 0.88), rgba(0, 188, 212, 0.6)); }
    .visual-text { position: relative; z-index: 2; color: #fff; text-align: center; }
    
    .form-content-side { padding: 45px; }

    /* --- Responsive Grid (وضع الهاتف عمود واحد) --- */
    @media (max-width: 992px) {
        .emp-grid-spectacular, .form-split-container { grid-template-columns: 1fr; }
        .row-desktop { grid-template-columns: 1fr !important; } /* تحويل الصفوف لعواميد */
        .form-visual-side { min-height: 200px; padding: 20px; }
        .footer-grid { text-align: center !important; }
        .footer-logo, .flag-col { display: flex; justify-content: center; margin-bottom: 20px; }
        .social-icons { justify-content: center; display: flex; gap: 15px; }
    }

    .row-desktop { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
    .form-group { position: relative; margin-bottom: 18px; }
    .form-group i:not(.arr) { position: absolute; left: 15px; top: 40px; color: #3f5efb; z-index: 2; }
    .input { width: 100%; padding: 12px 15px 12px 45px !important; border-radius: 10px !important; border: 2px solid #f1f5f9 !important; box-sizing: border-box; font-family: inherit; }
    .upload-area { border: 2px dashed #cbd5e1; padding: 20px; border-radius: 15px; background: #f8fafc; text-align: center; cursor: pointer; transition: 0.3s; }
    .upload-area:hover { border-color: #3f5efb; background: #fff; }
    .btn-submit-pro { width: 100%; padding: 18px; border-radius: 12px; border: none; background: var(--brand-gradient); color: white; font-weight: 800; cursor: pointer; transition: 0.3s; margin-top: 10px; }
    .btn-submit-pro:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(63, 94, 251, 0.2); }
  
  /* تأثير الهافر على الكارت بالكامل */
.benefit-box-spectacular:hover {
    border-color: #3f5efb;
    box-shadow: 0 20px 40px rgba(63, 94, 251, 0.12);
    transform: translateY(-12px); /* رفعة إضافية عند الهافر */
    animation-play-state: paused; /* إيقاف الحركة التلقائية لسهولة القراءة */
}

/* تحويل شكل خلفية الأيقونة ودورانها */
.benefit-box-spectacular:hover .icon-morph {
    background: var(--brand-gradient);
    border-radius: 50%; /* يتحول لدائرة منتظمة */
    transform: rotate(360deg); /* دوران كامل احترافي */
}

/* تحويل لون الأيقونة الداخلي للأبيض */
.benefit-box-spectacular:hover .icon-morph i {
    -webkit-text-fill-color: white; /* يجعل الأيقونة بيضاء تماماً */
}

/* تأكد من وجود هذه الخاصية في الكود الأساسي للـ .icon-morph لضمان السلاسة */
.icon-morph {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.icon-morph i {
    transition: all 0.3s ease;

}


















/* ennnd */























/* ========== start contact page6============ */




    /* Enhanced main section */
    #contact {
      padding: 80px 0;
      background: linear-gradient(135deg, rgba(248, 250, 253, 0.8) 0%, rgba(255, 255, 255, 1) 100%);
      position: relative;
      overflow: hidden;
    }

    #contact::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(63, 94, 251, 0.05) 0%, transparent 70%);
      z-index: 0;
    }

    /* Enhanced section heading */
    .section-heading {
      margin-bottom: 20px;
      font-size: 2.5rem;
      background: linear-gradient(66deg, var(--color-primary) 0%, var(--color-accent) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: rgb(65 64 64 / 78%);
      background-clip: text;
      position: relative;
      padding-bottom: 20px;
    }



    /* Improved contact grid */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 40px;
      align-items: start;
      margin-top: 30px;
      position: relative;
      z-index: 1;
    }

    @media (max-width: 900px) {
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
      }
    }

    /* Enhanced cards */
    .contact-card, .form-card {
      background: #fff;
      border: none;
      border-radius: 20px;
      padding: 40px;
      box-shadow: 0 20px 60px rgba(12, 20, 30, 0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .contact-card:hover, .form-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 25px 70px rgba(12, 20, 30, 0.12);
    }



    /* Contact info section */
    .contact-info {
      display: flex;
      flex-direction: column;
      gap: 30px;
    }

    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      padding: 20px;
      background: rgba(248, 250, 253, 0.5);
      border-radius: 16px;
      transition: all 0.3s ease;
      border: 1px solid transparent;
    }

    .contact-item:hover {
      background: white;
      border-color: rgba(63, 94, 251, 0.1);
      transform: translateX(5px);
    }

    .contact-icon {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.2rem;
      flex-shrink: 0;
    }

    .contact-details h4 {
      margin-bottom: 8px;
      color: var(--color-primary);
      font-size: 1.1rem;
    }

    .contact-details p {
      color: var(--color-text-secondary);
      margin: 4px 0;
      line-height: 1.5;
    }

    .contact-details a {
      color: var(--color-accent);
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .contact-details a:hover {
      color: var(--color-accent-dark);
      text-decoration: underline;
    }

    /* Improved map */
    .map-wrap {
      margin-top: 30px;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
      position: relative;
    }

    .map-wrap::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to bottom, transparent 95%, rgba(255, 255, 255, 0.8) 100%);
      pointer-events: none;
      z-index: 1;
    }

    .map-wrap iframe {
      width: 100%;
      height: 280px;
      border: 0;
      display: block;
      position: relative;
      z-index: 0;
    }

    /* Enhanced form styling */
    .form-card h3 {
      margin-bottom: 30px;
      color: var(--color-primary);
      font-size: 1.8rem;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* .pro-form .row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin-bottom: 20px;
    } */


.pro-form .row {
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
    flex-direction: column;
    align-items: stretch;
}



    .pro-form .form-group {
      position: relative;
      margin-bottom: 24px;
    }

    .pro-form label {
      display: block;
      margin-bottom: 10px;
      font-weight: 600;
      color: var(--color-primary);
      font-size: 0.95rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .pro-form .field {
      position: relative;
    }

    .pro-form .field i {
      position: absolute;
      left: 16px;
      /* top: 50%; */
      transform: translateY(-50%);
      color: var(--color-accent);
      font-size: 1rem;
      z-index: 2;
    }

    .pro-form .input,
    .pro-form select.input,
    .pro-form textarea.input {
      width: 100%;
      background: #fff;
      border: 2px solid rgba(26, 42, 64, 0.1);
      border-radius: 12px;
      padding: 16px 16px 16px 48px;
      font-size: 1rem;
      font-family: 'Poppins', sans-serif;
      transition: all 0.3s ease;
      color: var(--color-primary);
    }

    .pro-form textarea.input {
      padding-left: 48px;
      min-height: 180px;
      resize: vertical;
    }

    .pro-form .input:focus,
    .pro-form select.input:focus,
    .pro-form textarea.input:focus {
      outline: none;
      border-color: var(--color-accent);
      box-shadow: 0 8px 24px rgba(63, 94, 251, 0.15);
      background: #fff;
    }

    .pro-form select.input {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%233F5EFB' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      background-size: 16px;
      padding-right: 40px;
    }

    /* Enhanced submit button */
    .actions {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-top: 30px;
      flex-wrap: wrap;
    }



    .btn-primary::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.6s ease;
    }

    .btn-primary:hover::before {
      left: 100%;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 40px rgba(63, 94, 251, 0.35);
    }

    /* Status messages */
    .status {
      display: none;
      padding: 20px;
      border-radius: 12px;
      margin: 20px 0;
      font-weight: 600;
      font-size: 0.95rem;
      border-left: 4px solid;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .status.show {
      display: block;
    }

    .status.ok {
      background: linear-gradient(135deg, rgba(212, 237, 218, 0.2) 0%, rgba(195, 230, 203, 0.1) 100%);
      color: #155724;
      border-left-color: #28a745;
    }

    .status.err {
      background: linear-gradient(135deg, rgba(248, 215, 218, 0.2) 0%, rgba(245, 198, 203, 0.1) 100%);
      color: #721c24;
      border-left-color: #dc3545;
    }

    /* Progress bar */
    .progress {
      height: 6px;
      background: rgba(238, 243, 255, 0.5);
      border-radius: 999px;
      overflow: hidden;
      margin: 15px 0;
      width: 100%;
    }

    .bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
      transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 999px;
    }

    /* Form validation styles */
    .form-group.error label {
      color: #dc3545;
    }

    .form-group.error .input,
    .form-group.error select.input,
    .form-group.error textarea.input {
      border-color: #dc3545 !important;
      box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);
      background: rgba(220, 53, 69, 0.02);
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-8px); }
      40%, 80% { transform: translateX(8px); }
    }

    .form-group.error {
      animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }

    /* Contact hours badge */
    .contact-hours {
      display: inline-block;
      background: linear-gradient(135deg, #4CAF50, #45a049);
      color: white;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 0.9rem;
      font-weight: 600;
      margin-top: 10px;
      box-shadow: 0 4px 15px rgba(76, 175, 80, 0.2);
    }

    /* Responsive improvements */
    @media (max-width: 768px) {
      #contact {
        padding: 50px 0;
      }

      .section-heading {
        font-size: 2rem;
        margin-bottom: 0px;
      }

      .contact-card, .form-card {
        padding: 30px 25px;
      }

      .contact-item {
        padding: 15px;
      }

      .contact-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
      }

      .btn-primary {
        padding: 14px 28px;
        width: 100%;
        justify-content: center;
      }

      .pro-form .row {
        grid-template-columns: 1fr;
        gap: 15px;
      }
    }

    @media (max-width: 480px) {
      .section-heading {
        font-size: 1.8rem;
      }

      .contact-grid {
        margin-top: 20px;
      }

      .actions {
        flex-direction: column;
        gap: 15px;
      }
    }




    /* ennd */









/* الحالة العامة للعناصر التي سيتم ترجمتها */
[data-ar] {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* الكلاس الذي سنضيفه أثناء عملية التبديل */
.lang-switching {
    opacity: 0 !important;
    transform: translateY(5px); /* حركة خفيفة للأسفل أثناء الاختفاء */
}

/* لجعل اتجاه العناصر يتغير بنعومة (اختياري) */
body {
    transition: direction 0.5s ease;
    
}







/* lang button */

.lang-toggle-btn {
    background: linear-gradient(66deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    border: none;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 22px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    width: 120px;
    margin: 5px;
}