/* ==========================================================
   1. Variables & Reset
   ========================================================== */
:root{
    --primary:#3e5268;
    --secondary:#00ab9e;
    --accent:#ff6b6b;
    --text:#333;
    --background:#fff;
    --light-bg:#f8f9fa;
    --header-bg:#fff;
    --header-text:#3e5268;
    --header-hover:#00ab9e;
    --footer-bg:#3e5268;
    --footer-text:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:'Tajawal',sans-serif;line-height:1.6;color:var(--text);background:var(--background);direction:rtl}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}

/* ==========================================================
   2. Header & Navigation
   ========================================================== */
.site-header{position:fixed;top:0;left:0;right:0;background:var(--header-bg);box-shadow:0 2px 20px rgba(0,0,0,.1);z-index:1000;transition:all .3s ease}
.site-header.scrolled{background:rgba(255,255,255,.95);backdrop-filter:blur(10px)}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:15px 0}
.site-branding img{height:64px;width:auto}
.main-navigation ul{display:flex;list-style:none;gap:30px}
.main-navigation a{color:var(--header-text);font-weight:600;text-decoration:none;padding:10px 0;position:relative;transition:color .3s ease}
.main-navigation a:hover{color:var(--header-hover)}
.main-navigation a::after{content:'';position:absolute;bottom:0;right:0;width:0;height:2px;background:var(--header-hover);transition:width .3s ease}
.main-navigation a:hover::after{width:100%}
.menu-toggle{display:none;background:none;border:none;font-size:1.5rem;color:var(--header-text);cursor:pointer}

/* dropdown desktop */
.main-navigation li{position:relative}
.main-navigation ul ul{display:none;position:absolute;top:100%;right:0;background:#fff;min-width:250px;padding:8px 0;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.15);z-index:1000}
.main-navigation ul ul ul{top:0;right:100%}
.main-navigation li:hover>ul{display:block;animation:fadeInDown .3s ease}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.menu-item-has-children>a::after{content:'▼';margin-right:5px;font-size:.7em;opacity:.7;transition:transform .3s ease}
.main-navigation li:hover>.menu-item-has-children>a::after{transform:rotate(180deg)}


/*
.hero-section{height:405px;min-height:405px;margin-top:80px;position:relative;overflow:hidden}
.hero-slider,#main-hero-slider{position:relative;width:100%;height:100%}
.hero-slide{position:absolute;top:0;right:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease}
.hero-slide.active{opacity:1}
.hero-background{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%)}
.hero-background img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-content{position:relative;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;z-index:2}
.hero-text{max-width:800px;padding:0 20px}
.hero-title{font-size:2.5rem;font-weight:800;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.5)}
.hero-description{font-size:1.2rem;margin-bottom:2rem;text-shadow:1px 1px 2px rgba(0,0,0,.5)}
.hero-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero-controls{position:absolute;bottom:20px;right:50%;transform:translateX(50%);display:flex;gap:1rem;z-index:3}
.slider-prev,.slider-next{background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.5);color:#fff;width:45px;height:45px;border-radius:50%;cursor:pointer;backdrop-filter:blur(10px);transition:all .3s ease}
.slider-prev:hover,.slider-next:hover{background:var(--secondary);border-color:var(--secondary)}
.hero-dots{position:absolute;bottom:15px;right:50%;transform:translateX(50%);display:flex;gap:10px;z-index:3}
.dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:all .3s ease}
.dot.active{background:var(--secondary);transform:scale(1.2)}
*/
/*.hero-section{height:405px;min-height:405px;margin-top:80px;position:relative;overflow:hidden}
.hero-slider,#main-hero-slider{position:relative;width:100%;height:100%}
.hero-slide{position:absolute;top:0;right:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease}
.hero-slide.active{opacity:1}
.hero-background{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%)}
.hero-background img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-content{position:relative;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;z-index:2}
.hero-text{max-width:800px;padding:0 20px}
.hero-title{font-size:2.5rem;font-weight:800;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.5)}
.hero-description{font-size:1.2rem;margin-bottom:2rem;text-shadow:1px 1px 2px rgba(0,0,0,.5)}
.hero-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero-controls{position:absolute;bottom:20px;right:50%;transform:translateX(50%);display:flex;gap:1rem;z-index:3}
.slider-prev,.slider-next{background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.5);color:#fff;width:45px;height:45px;border-radius:50%;cursor:pointer;backdrop-filter:blur(10px);transition:all .3s ease}
.slider-prev:hover,.slider-next:hover{background:var(--secondary);border-color:var(--secondary)}
.hero-dots{position:absolute;bottom:15px;right:50%;transform:translateX(50%);display:flex;gap:10px;z-index:3}
.dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:all .3s ease}
.dot.active{background:var(--secondary);transform:scale(1.2)}*/
/* ==========================================================
   Hero Slider - CSS مع تأثير Fade سلس
   ========================================================== */
.hero-section {
    height: 405px !important;
    min-height: 405px;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}

.hero-slider,
#main-hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none; /* منع التفاعل مع الشرائح المخفية */
    transition: opacity 1s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
    pointer-events: auto; /* تفعيل التفاعل للشريحة النشطة */
    z-index: 1;
}

.hero-background {
    position: absolute;
    //top: 0;
    //right: 0;
    width: 100%;
    //height: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.8s ease; /* تأثير تكبير خفيف عند الانتقال */
}

.hero-slide.active .hero-background img {
    transform: scale(1.05);
}

.hero-content {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    z-index: 2;
    transition: opacity 1s ease-in-out;
}

.hero-text {
    max-width: 800px;
    padding: 0 20px;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,.5);
}

.hero-description {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
	display:none;
}

.hero-controls {
    position: absolute;
    bottom: 20px;
    right: 50%;
    transform: translateX(50%);
    display: flex;
    gap: 1rem;
    z-index: 3;
}

.slider-prev,
.slider-next {
    background: rgba(255,255,255,.2);
    border: 2px solid rgba(255,255,255,.5);
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all .3s ease;
}

.slider-prev:hover,
.slider-next:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}

.hero-dots {
    position: absolute;
    bottom: 15px;
    right: 50%;
    transform: translateX(50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}

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

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

/* Responsive */
@media (max-width: 1024px){
    .hero-section{height: 350px; min-height: 350px;}
    .hero-title{font-size: 2.2rem;}
}

@media (max-width: 768px){
    .hero-section{height: 300px; min-height: 300px;}
    .hero-title{font-size: 1.8rem;}
    .hero-description{font-size: 1rem;}
}

@media (max-width: 480px){
    .hero-section{height: 250px; min-height: 250px;}
    .hero-title{font-size: 1.5rem;}
    .hero-buttons{flex-direction: column; align-items: center;}
}

/* ==========================================================
   4. Buttons
   ========================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 30px;border:none;border-radius:50px;font-weight:600;text-decoration:none;cursor:pointer;transition:all .3s ease;gap:8px}
.btn-primary{background:var(--secondary);color:#fff}
.btn-primary:hover{background:var(--primary);transform:translateY(-2px)}
.btn-secondary{background:transparent;color:#fff;border:2px solid #fff}
.btn-secondary:hover{background:#fff;color:var(--primary)}

/* ==========================================================
   5. About Section
   ========================================================== */
.about-section{padding:80px 0;background:var(--background)}
.about-content{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-image img{width:100%;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,.1)}
.about-text h2{font-size:2.5rem;color:var(--primary);margin-bottom:1.5rem;position:relative}
.about-text h2::after{content:'';position:absolute;bottom:-10px;right:0;width:80px;height:3px;background:var(--secondary)}
.about-description{line-height:1.8;color:#666;margin-bottom:2rem}

/* ==========================================================
   6. Services Section
   ========================================================== */
.services-section{padding:80px 0;background:var(--light-bg)}
.section-title{text-align:center;margin-bottom:60px}
.section-title h2{font-size:2.5rem;color:var(--primary);margin-bottom:1rem;position:relative}
.section-title h2::after{content:'';position:absolute;bottom:-15px;right:50%;transform:translateX(50%);width:100px;height:3px;background:var(--secondary)}
.section-title p{font-size:1.1rem;color:#666;max-width:600px;margin:2rem auto 0}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px}
.service-card{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,.1);transition:all .3s ease}
.service-card:hover{transform:translateY(-10px);box-shadow:0 15px 40px rgba(0,0,0,.15)}
.service-image{height:200px;overflow:hidden}
.service-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.service-card:hover .service-image img{transform:scale(1.1)}
.service-content{padding:25px}
.service-content h3{color:var(--primary);margin-bottom:.5rem}
.service-english{color:var(--secondary);font-weight:600;margin-bottom:1rem}
.service-link{color:var(--secondary);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:gap .3s ease}
.service-link:hover{gap:10px}

/* ==========================================================
   7. Clients Section
   ========================================================== */
.clients-section{padding:60px 0;background:#fff}
.clients-slider{overflow:hidden;position:relative}
.clients-track{display:flex;animation:scrollClients 30s linear infinite;gap:50px;padding:20px}
.client-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:20px;background:#fff;border-radius:10px;box-shadow:0 3px 15px rgba(0,0,0,.1)}
.client-logo{max-width:120px;max-height:60px;object-fit:contain;filter:grayscale(100%);opacity:.7;transition:all .3s ease}
.client-item:hover .client-logo{filter:grayscale(0);opacity:1}
@keyframes scrollClients{0%{transform:translateX(0)}to{transform:translateX(calc(-100px * 9 - 50px * 8))}}

/* ==========================================================
   8. Footer
   ========================================================== */
.site-footer{background:var(--footer-bg);color:var(--footer-text);padding:60px 0 0}
.footer-widgets-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px}
.footer-widget-area h4{color:var(--secondary);margin-bottom:1.5rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;text-align:center}

/* ==========================================================
   9. Responsive
   ========================================================== */
@media (max-width:1024px){
    .hero-section{height:350px;min-height:350px}
    .hero-title{font-size:2.2rem}
}
@media (max-width:768px){
    .menu-toggle{display:block}
    .main-navigation ul{display:none;position:absolute;top:100%;right:0;width:100%;background:#fff;flex-direction:column;padding:20px 0;box-shadow:0 5px 15px rgba(0,0,0,.1)}
    .main-navigation ul.active{display:flex}
    .main-navigation li{text-align:center}
    .main-navigation a{display:block;padding:15px 20px;border-bottom:1px solid #eee}
    /* dropdown mobile */
    .main-navigation ul ul{position:static;display:none;padding-right:2rem;background:#f8f9fa;box-shadow:none;width:100%}
    .main-navigation ul ul.active{display:block}
    .main-navigation ul ul a{padding-right:40px;border-bottom:1px solid #e9ecef}
    .main-navigation li:hover>ul{display:none}
    .menu-item-has-children>a::after{content:'◀';float:left;transition:transform .3s ease}
    .menu-item-has-children.menu-open>a::after{transform:rotate(90deg)}

    .hero-section{height:300px;min-height:300px}
    .hero-title{font-size:1.8rem}
    .hero-description{font-size:1rem}
    .about-content{grid-template-columns:1fr;gap:40px;text-align:center}
    .services-grid{grid-template-columns:1fr}
    .section-title h2{font-size:2rem}
}
@media (max-width:480px){
    .hero-section{height:250px;min-height:250px}
    .hero-title{font-size:1.5rem}
    .hero-buttons{flex-direction:column;align-items:center}
    .btn{width:100%;max-width:250px}
    .about-section,.services-section{padding:50px 0}
}

/* ==========================================================
   10. Utilities & Animations
   ========================================================== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeInUp .6s ease}
.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}
.mt-0{margin-top:0}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}
.p-0{padding:0}.p-1{padding:1rem}.p-2{padding:2rem}
.d-none{display:none}.d-block{display:block}.d-flex{display:flex}
/* ==========================================================
   11. إصلاح تداخل المحتوى مع الهيدر + إخفاء Breadcrumb
   ========================================================== */
.site-content                 { margin-top:100px; padding-top:20px; }
.entry-header,.page-header    { padding-top:40px; }

/* إخفاء أي مسار صفحة */
.breadcrumb,
.woocommerce-breadcrumb,
.ast-breadcrumbs,
.rank-math-breadcrumb,
.yoast-breadcrumb,
.breadcrumbs,
.breadcrumb-trail,
.site-breadcrumbs,
.page-breadcrumb,
[class*="breadcrumb"]        { display:none; }