:root{
      --main-color:#e0e621;
      --secondary-accent:#3c3c3c;
      --primary-bg-color:#fff;
      --secondary-bg-color:#f8fafc;
      --primary-text-color:#1e293b;
      --secondary-text-color:#64748b;
      --border-color:#e2e8f0;
      --shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);
      --shadow-md:0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.07);
      --shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
      --nav-height:70px; --icon-size:22px; --pill-w:50px;
    }
    body.dark-mode{
      --primary-bg-color:#111827;
      --secondary-bg-color:#1f2937;
      --primary-text-color:#f9fafb;
      --secondary-text-color:#9ca3af;
      --border-color:#374151;
      --shadow-md:none; --shadow-lg:none;
    }

    *{font-family:"Tajawal",sans-serif;margin:0;padding:0;box-sizing:border-box;text-transform:capitalize;outline:none;border:none;text-decoration:none;transition:all .3s ease-in-out}
    *::selection{background-color:var(--main-color);color:#fff}
    html{font-size:62.5%;overflow-x:hidden;scroll-behavior:smooth}
    body{background:var(--secondary-bg-color);color:var(--primary-text-color)}
    .container{width:90%;max-width:1100px;margin:0 auto}

    section{min-height:100vh;padding:12rem 8% 2rem}

    .btn{display:inline-block;padding:.9rem 3.5rem;font-size:2rem;color:#fff;border-radius:.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.1);margin-top:1rem;z-index:0;position:relative;overflow:hidden;border:.2rem solid var(--main-color);background:none}
    .btn::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:.5rem;background:var(--main-color);height:85%;width:95%;z-index:-1;transition:.2s linear}
    .btn:hover:before{top:100%;transform:translate(-50%,100%)}
    .btn:hover{color:var(--primary-text-color)}
    .heading{font-size:5rem;color:var(--primary-text-color);text-align:center;padding:1rem;margin-bottom:2rem;text-transform:uppercase}
    .heading span{color:var(--main-color)}

    .home{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
    .home .image{flex:1 1 40rem;padding:1rem;text-align:center}
    .home .image img{height:50rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.3);border-top:3rem solid var(--primary-bg-color);border-right:3rem solid var(--primary-bg-color);border-bottom:3rem solid var(--main-color);border-left:3rem solid var(--main-color);border-radius:.5rem}
    .home .content{flex:1 1 40rem;padding:1rem}
    .home .content .hello{display:inline-block;padding:1rem 0;font-size:2.6rem;color:var(--secondary-text-color)}
    .home .content h3{color:var(--primary-text-color);font-size:5rem}
    .home .content h3 span{color:var(--main-color)}
    .home .content p{padding:1rem 0;color:var(--secondary-text-color);font-size:2rem;line-height:1.8}

    .about .row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
    .about .row .box{flex:1 1 40rem;background:var(--primary-bg-color);border-radius:.5rem;box-shadow:var(--shadow-md);padding:.5rem 1.5rem;margin:1.5rem}
    .about .row .box .title{color:var(--primary-text-color);font-size:2.5rem;padding:1rem 0;text-align:right}
    .about .row .box .exp-box{padding:0 1.8rem;margin-top:1rem;margin-bottom:2rem;border-right:.2rem solid var(--main-color);position:relative;text-align:right}
    .about .row .box .exp-box h3{color:var(--main-color);font-size:2rem}
    .about .row .box .exp-box p{color:var(--secondary-text-color);font-size:1.5rem;padding:1rem 0}
    .about .row .box .exp-box::before{content:"";position:absolute;top:0;right:-1rem;border-radius:50%;height:2rem;width:2rem;background:var(--main-color)}

    .services .box-container{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap}
    .services .box-container .box{background:var(--primary-bg-color);border-radius:.5rem;box-shadow:var(--shadow-md);margin:1rem;padding:2rem;width:35rem;text-align:center;position:relative;z-index:0;display:flex;flex-direction:column}
    .services .box-container .box .number{position:absolute;top:1.5rem;left:2rem;font-size:2rem;color:var(--primary-text-color)}
    .services .box-container .box .service-icon{font-size:6rem;color:var(--main-color);margin:1rem auto 2rem auto}
    .services .box-container .box h3{font-size:2.2rem;color:var(--main-color)}
    .services .box-container .box p{font-size:1.6rem;color:var(--secondary-text-color);padding:1rem;flex-grow:1}
    .services .box-container .box::before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background:var(--main-color);z-index:-1;clip-path:circle(25% at 0 0);opacity:.1;transition:.3s}
    .services .box-container .box:hover::before{clip-path:circle(100%)}
    .btn-service{display:inline-block;padding:.6rem 2.5rem;font-size:1.6rem;color:var(--primary-text-color);border-radius:.5rem;margin-top:auto;z-index:0;position:relative;border:.2rem solid var(--main-color);background:none;align-self:center}
    .btn-service:hover{background-color:var(--main-color);color:#fff}

    .portfolio .button-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:1rem 0}
    .portfolio .button-container .btn{margin:1rem;cursor:pointer}
    .portfolio .image-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:1rem 0}
    .portfolio .image-container .box{width:35rem;margin:1rem;border-radius:.5rem;box-shadow:var(--shadow-md);overflow:hidden;height:25rem;position:relative;border:1.5rem solid var(--primary-bg-color);cursor:pointer}
    .portfolio .image-container .box img{height:100%;width:100%;object-fit:cover}
    .portfolio .image-container .box .info{position:absolute;top:0;left:0;height:100%;width:100%;background:var(--primary-bg-color);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;opacity:.9;transform:scale(0)}
    .portfolio .image-container .box:hover .info{transform:scale(1)}
    .portfolio .image-container .box .info h3{font-size:2.5rem;color:var(--primary-text-color)}

    /* آراء الطلاب — تصميم احترافي بسيط */
    #testimonials{background-color:var(--primary-bg-color)}
    .t-wrap{width:90%;max-width:1100px;margin:0 auto}
    .testimonial-card{background:var(--secondary-bg-color);border:1px solid var(--border-color);border-radius:20px;padding:28px;display:flex;flex-direction:column;height:100%}
    .testimonial-text{font-size:1.7rem;line-height:1.85;color:var(--primary-text-color)}
    .testimonial-author{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border-color)}
    .testimonial-author img{width:46px;height:46px;border-radius:50%}
    .author-meta{display:flex;flex-direction:column}
    .author-name{font-weight:800;font-size:1.6rem}
    .rating-stars{color:#f59e0b;font-size:1.4rem;margin-top:4px}
    .swiper-pagination-bullet-active{background-color:var(--main-color)!important}
    .swiper-container{padding-bottom:4rem!important}

    .contact .box-container{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;margin-bottom:2rem}
    .contact .box-container .box{flex:1 1 30rem;margin:1rem;padding:3rem 1rem;background:var(--primary-bg-color);box-shadow:var(--shadow-md);border-radius:.5rem;text-align:center}
    .contact .box-container .box i{height:6rem;width:6rem;line-height:6rem;border-radius:50%;font-size:3rem;background:var(--secondary-bg-color);color:var(--main-color)}
    .contact .box-container .box h3{color:var(--primary-text-color);padding:1rem 0;font-size:2rem}
    .contact .box-container .box p{font-size:1.5rem;color:var(--secondary-text-color)}
    .contact .row{display:flex;justify-content:center;flex-wrap:wrap}
    .contact .row form{flex:1 1 40rem;background:var(--primary-bg-color);padding:2rem;margin:1rem;box-shadow:var(--shadow-md);border-radius:.5rem}
    .contact .row .map{flex:1 1 40rem;margin:1rem;box-shadow:var(--shadow-md);border-radius:.5rem;border:2rem solid var(--primary-bg-color);width:100%}
    .contact .row form .inputBox{display:flex;justify-content:space-between;flex-wrap:wrap}
    .contact .row form input,.contact .row form textarea{padding:1rem 0;margin:1rem 0;font-size:1.7rem;border-bottom:.1rem solid var(--secondary-text-color);text-transform:none;background:none;color:var(--main-color);width:100%}
    .contact .row form .inputBox input{width:49%}
    .contact .row form textarea{height:15rem;resize:none}
    .contact .row form .btn{cursor:pointer}

    .footer{padding:2.5rem 1rem;text-align:center;font-size:2rem;color:var(--primary-text-color);background:var(--primary-bg-color);margin-top:1rem;border-top:1px solid var(--border-color)}
    .footer span{color:var(--main-color)}

    /* شريط التنقل السفلي يأخذ من nav_bar.php، لذا لا نكرر أنماطه هنا */

    @media (max-width:991px){ html{font-size:55%} section{padding:12rem 3% 2rem} }
    @media (max-width:768px){ .home{flex-direction:column-reverse;text-align:center} .home .image img{width:100%;height:auto} }
    @media (max-width:400px){ html{font-size:50%} .contact .row form .inputBox input{width:100%} }