/* =========================================================
   HARAM SUDAIR - FINAL THEME & MOBILE OVERRIDES
   Dark mode is intentionally centralized here so every page
   follows the same theme instead of relying on page-specific CSS.
========================================================= */

/* ---------- DARK MODE: GLOBAL ---------- */
body.dark-theme{
    background:#0b1220;
    color:#d7deea;
    color-scheme:dark;
}

body.dark-theme .top-bar{background:#0a1020;color:#fff}
body.dark-theme #main-header{background:transparent}
body.dark-theme .header-container{
    background:#151f33;
    box-shadow:0 12px 35px rgba(0,0,0,.28);
}
body.dark-theme #main-header.scrolled{
    background:rgba(11,18,32,.92);
}
body.dark-theme .logo-text h2,
body.dark-theme .nav-links a{color:#f7f9fc}
body.dark-theme .tool-link,
body.dark-theme .mode-btn,
body.dark-theme .mobile-menu-btn{
    background:#202c42;
    color:#f7f9fc;
}
body.dark-theme .tool-link:hover,
body.dark-theme .mode-btn:hover,
body.dark-theme .mobile-menu-btn:hover{
    background:var(--secondary);
    color:#fff;
}

body.dark-theme .nav-links{background:#151f33}
body.dark-theme .nav-links a:hover,
body.dark-theme .nav-links a.active{color:#fff;background:rgba(212,160,23,.13)}

body.dark-theme section:not(.hero):not(.page-hero):not(.services-hero):not(.projects-hero):not(.project-hero):not(.contact-hero):not(.cta):not(.services-cta):not(.project-cta){
    background:#0f1728;
}

body.dark-theme .section-title h2,
body.dark-theme .about-content h2,
body.dark-theme .service-card h3,
body.dark-theme .project-content h3,
body.dark-theme .featured-content h2,
body.dark-theme .company-content h2,
body.dark-theme .vision-card h3,
body.dark-theme .why-card h3,
body.dark-theme .featured-card h3,
body.dark-theme .section-title p,
body.dark-theme .about-content p,
body.dark-theme .service-card p,
body.dark-theme .project-content p,
body.dark-theme .company-content p,
body.dark-theme .vision-card p,
body.dark-theme .why-card p,
body.dark-theme .featured-card p{
    color:#e8edf5;
}

body.dark-theme .about-features li,
body.dark-theme .service-card,
body.dark-theme .project-card,
body.dark-theme .vision-card,
body.dark-theme .why-card,
body.dark-theme .featured-card,
body.dark-theme .info-card,
body.dark-theme .featured-service,
body.dark-theme .contact-info-card,
body.dark-theme .contact-form-box,
body.dark-theme .contact-map-box,
body.dark-theme .company-cards .company-card,
body.dark-theme .partner-card{
    background:#182337;
    border-color:rgba(255,255,255,.07);
    color:#e8edf5;
}

body.dark-theme .about-features li,
body.dark-theme .service-card,
body.dark-theme .project-card,
body.dark-theme .vision-card,
body.dark-theme .why-card,
body.dark-theme .featured-card,
body.dark-theme .info-card{
    box-shadow:0 15px 40px rgba(0,0,0,.22);
}

body.dark-theme .project-filter,
body.dark-theme .projects-gallery,
body.dark-theme .featured-project,
body.dark-theme .project-gallery,
body.dark-theme .project-details,
body.dark-theme .project-navigation,
body.dark-theme .company,
body.dark-theme .vision,
body.dark-theme .partners,
body.dark-theme .services-section,
body.dark-theme .why-us,
body.dark-theme .featured-projects,
body.dark-theme .contact-section,
body.dark-theme .contact-map{
    background:#0f1728;
}

body.dark-theme .filter-btn,
body.dark-theme .projects-filter button{
    background:#202c42;
    color:#f1f5f9;
    box-shadow:none;
}
body.dark-theme .filter-btn.active,
body.dark-theme .projects-filter button.active{
    background:var(--secondary);
    color:#fff;
}

body.dark-theme .featured-content p,
body.dark-theme .featured-content ul li,
body.dark-theme .project-description p,
body.dark-theme .project-services li,
body.dark-theme .info-card p,
body.dark-theme .contact-info-card small,
body.dark-theme .contact-info>p,
body.dark-theme .form-note{
    color:#aeb9c9;
}

body.dark-theme .form-group input,
body.dark-theme .form-group select,
body.dark-theme .form-group textarea{
    background:#0e1626;
    color:#fff;
    border-color:#344258;
}
body.dark-theme .form-group label{color:#f4f7fb}

body.dark-theme .gallery-wrapper .main-image,
body.dark-theme .main-image{background:#182337}
body.dark-theme .thumbnail{opacity:.75}
body.dark-theme .thumbnail.active{opacity:1}

/* ---------- MOBILE NAV ---------- */
@media(max-width:768px){
    body.dark-theme .nav-links{
        background:#111a2c;
        box-shadow:-15px 0 40px rgba(0,0,0,.38);
    }
    body.dark-theme::before{background:rgba(0,0,0,.58)}
}

/* ---------- MOBILE TYPOGRAPHY / SPACING ---------- */
@media(max-width:768px){
    body{font-size:14px}
    section{padding:52px 0}
    .section-title{margin-bottom:30px}
    .section-title h2{font-size:27px;line-height:1.45}
    .section-title p{font-size:13px;line-height:1.9}

    .top-bar{padding:7px 0;font-size:11px}
    .top-container{width:calc(100% - 20px);gap:6px}
    .top-info,.top-social{gap:8px}
    .top-info a,.top-social a{font-size:11px}
    .top-info i,.top-social i{margin-left:3px}

    #main-header{padding:6px 0}
    .header-container{width:calc(100% - 16px);height:60px;min-height:60px;padding:0 9px;border-radius:17px}
    .logo-circle{width:42px;height:42px}
    .header-tools{gap:5px}
    .tool-link,.mode-btn,.mobile-menu-btn{width:36px;height:36px;font-size:13px}

    .hero{padding:86px 0 46px;min-height:auto}
    .hero-container{gap:22px;padding-top:0}
    .hero-content h4{font-size:12px;margin-bottom:8px}
    .hero-content h1{font-size:29px;line-height:1.42;margin-bottom:13px}
    .hero-content p{font-size:13px;line-height:1.9;margin-bottom:20px}
    .hero-buttons{gap:8px}
    .hero-buttons .btn{min-width:0;padding:11px 12px;font-size:12px;min-height:44px}
    .hero-image img{border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.25)}

    .about-grid,.company-grid,.vision-grid,.contact-grid{gap:24px}
    .about-image img,.company-image img{height:290px;border-radius:18px}
    .about-content h2,.company-content h2{font-size:27px}
    .about-content p,.company-content p{font-size:14px;line-height:1.9}
    .about-features{grid-template-columns:1fr;gap:10px;margin:22px 0}
    .about-features li{padding:13px;font-size:13px}

    .services-grid{grid-template-columns:1fr !important;gap:14px}
    .service-card{padding:25px 18px;border-radius:17px}
    .service-icon{width:62px;height:62px;font-size:25px;margin-bottom:15px}
    .service-card h3{font-size:19px}
    .service-card p{font-size:13px;line-height:1.85}
    .service-link{font-size:13px;margin-top:17px}

    .features-grid,.stats-grid{grid-template-columns:1fr 1fr !important;gap:10px}
    .feature-box,.stat-card{padding:17px 8px;border-radius:14px}
    .feature-box i,.stat-icon{width:50px;height:50px;font-size:20px;margin-bottom:9px}
    .feature-box h3{font-size:14px}
    .feature-box p{font-size:11px;line-height:1.7}
    .stat-card h2{font-size:27px}
    .stat-card span{font-size:11px}

    .projects-filter,.filter-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:22px}
    .projects-filter button,.filter-btn{width:100% !important;min-height:42px;padding:9px 8px;font-size:12px}
    .projects-grid{grid-template-columns:1fr !important;gap:14px}
    .projects .project-card img,.project-image{height:220px}
    .project-content{padding:16px}
    .project-content h3,.projects .project-info h3{font-size:18px}
    .project-content p,.projects .project-info span{font-size:12px}
    .project-overlay{opacity:1}

    .services-hero,.projects-hero,.project-hero,.contact-hero,.page-hero{min-height:auto;padding:92px 0 48px}
    .hero-grid{gap:20px}
    .hero-content h1,.projects-hero h1,.project-hero h1,.contact-hero h1,.page-hero h1{font-size:30px;line-height:1.4}
    .hero-content p,.projects-hero p,.project-hero p,.contact-hero p,.page-hero p{font-size:13px;line-height:1.9}
    .hero-image img{max-width:300px}

    .featured-service{grid-template-columns:1fr;gap:0}
    .featured-image img{height:230px}
    .featured-content{padding:24px 17px}
    .featured-content h2{font-size:25px}
    .featured-content p{font-size:13px;line-height:1.9}
    .why-grid,.featured-grid{grid-template-columns:1fr !important;gap:12px}
    .why-card{padding:22px 16px}
    .featured-card img{height:200px}
    .services-cta{padding:55px 0}
    .cta-inner h2{font-size:27px}
    .cta-inner p{font-size:13px}

    .featured-project{padding:52px 0}
    .featured-grid{grid-template-columns:1fr !important;gap:22px}
    .featured-image img{height:280px}
    .featured-content{text-align:center}
    .featured-content h2{font-size:27px}
    .featured-content p,.featured-content ul li{font-size:13px}
    .featured-content ul li{justify-content:center}

    .project-info-section{margin-top:-32px}
    .project-info-grid{grid-template-columns:1fr 1fr !important;gap:9px}
    .info-card{padding:18px 8px;border-radius:14px}
    .info-card i{width:48px;height:48px;font-size:19px;margin-bottom:10px}
    .info-card h4{font-size:14px;margin-bottom:5px}
    .info-card p{font-size:11px;line-height:1.7}
    .main-image{border-radius:15px}
    .main-image img{height:250px}
    .thumbnail-gallery{grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
    .thumbnail{height:68px;border-width:3px;border-radius:9px}

    .project-details-grid{grid-template-columns:1fr !important;gap:25px}
    .project-description h2,.project-services h2{font-size:25px}
    .project-description p,.project-services li{font-size:13px;line-height:1.9}
    .navigation-wrapper{grid-template-columns:1fr !important;gap:10px}

    .contact-info h2,.contact-form-box h2{font-size:25px}
    .contact-form-box{padding:20px 15px;border-radius:16px}
    .contact-info-card{padding:13px;gap:10px}
    .contact-icon{width:42px;height:42px;min-width:42px}
    .form-group input,.form-group select,.form-group textarea{font-size:14px;padding:12px}

    .footer{padding:48px 0 18px}
    .footer-grid{grid-template-columns:1fr !important;gap:25px;text-align:center}
    .footer-logo{justify-content:center}
    .footer-logo img{width:58px;height:58px}
    .footer-logo-text h2{font-size:20px}
    .footer p,.footer-links a,.footer-contact li{font-size:12px;line-height:1.8}
    .footer-social{justify-content:center}
    .footer-social a{width:36px;height:36px;font-size:14px}
    .footer-bottom{margin-top:25px;padding-top:18px;font-size:11px}

    #backToTop{left:10px;bottom:10px;width:42px;height:42px;font-size:15px}
    .floating-whatsapp{right:10px !important;bottom:10px !important;width:44px !important;height:44px !important}
}

@media(max-width:380px){
    .top-info a{font-size:10px}
    .top-social{gap:6px}
    .tool-link,.mode-btn,.mobile-menu-btn{width:34px;height:34px}
    .logo-circle{width:39px;height:39px}
    .hero-content h1,.projects-hero h1,.project-hero h1,.contact-hero h1,.page-hero h1{font-size:27px}
    .features-grid,.stats-grid{grid-template-columns:1fr !important}
    .projects-filter,.filter-wrapper{grid-template-columns:1fr}
    .project-info-grid{grid-template-columns:1fr 1fr !important}
    .main-image img{height:225px}
}

[hidden]{display:none !important}

/* Prevent AOS/hover effects from creating awkward blank spaces after filtering. */
.projects-grid.is-filtered-empty::after{
    content:"لا توجد مشاريع ضمن هذا التصنيف حاليًا";
    display:block;
    grid-column:1/-1;
    text-align:center;
    padding:35px 15px;
    color:var(--light);
}

body.dark-theme .projects-grid.is-filtered-empty::after{color:#aeb9c9}