/* ===================================
   Critical Above-the-Fold CSS
   للتحميل الفوري - أقل من 14KB
   =================================== */

/* Reset & Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
html,body{overflow-x:hidden;max-width:100%;width:100%}
body{font-family:'Zain',sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;position:relative;margin:0;padding:0}

/* Header - Critical */
.header{position:fixed;top:0;left:0;right:0;width:100%;z-index:1000;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1);padding:15px 0;transition:all .3s ease}
.header .container-xl{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 15px}
.logo{text-decoration:none;color:#000}
.sitename{font-size:1.5rem;font-weight:800;color:#d4af37;margin:0}
.navmenu ul{list-style:none;margin:0;padding:0;display:flex;gap:20px}
.navmenu a{color:#333;text-decoration:none;font-weight:600;padding:8px 15px;transition:color .3s}
.navmenu a:hover,.navmenu a.active{color:#d4af37}
.btn-getstarted{background:#d4af37;color:#000;padding:10px 25px;border-radius:50px;text-decoration:none;font-weight:700;border:2px solid #d4af37;transition:all .3s}
.btn-getstarted:hover{background:#c29d2e;transform:translateY(-2px)}

/* Hero Section - Critical */
.main{margin-top:80px;overflow-x:hidden;max-width:100%}
.professional-carousel-section{position:relative;width:100%;max-width:100%;height:650px;overflow:hidden;margin:0;padding:0;background:#f8fbfc}
.carousel-container{width:100%;max-width:100%;height:100%;overflow:hidden}
.professional-carousel{width:100%;max-width:100%;height:100%;overflow:hidden}
.swiper-slide{width:100%;max-width:100%;height:100%;overflow:hidden}
.carousel-slide-content{position:relative;width:100%;max-width:100%;height:100%;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;overflow:hidden}
.carousel-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(248,251,252,.95);z-index:1}
.carousel-text{position:relative;z-index:2;text-align:center;color:#000;padding:40px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:100%;overflow:hidden}
.carousel-title{font-size:clamp(1.5rem,4vw,3rem);font-weight:800;margin-bottom:20px;color:#000;line-height:1.3;font-family:'Zain',sans-serif;text-align:center;max-width:100%;word-wrap:break-word}
.carousel-description{font-size:clamp(.9rem,2vw,1.5rem);font-weight:400;margin-bottom:30px;color:#333;max-width:800px;margin-left:auto;margin-right:auto;line-height:1.8;text-align:center;font-family:'Zain',sans-serif;word-wrap:break-word;padding:0 15px}
.typewriter-main{margin:30px 0;text-align:center;max-width:100%;overflow:hidden;padding:0 15px}
.typewriter-title{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:600;color:#666;margin-bottom:15px;font-family:'Zain',sans-serif;max-width:100%;word-wrap:break-word}
.typewriter-text{font-size:clamp(2rem,4vw,3.5rem);font-weight:900;color:#d4af37;margin:0;font-family:'Zain',sans-serif;text-align:center;min-height:80px;display:flex;align-items:center;justify-content:center;position:relative;max-width:100%;word-break:break-word}
.carousel-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;max-width:100%;padding:0 15px}
.btn-carousel-primary,.btn-carousel-secondary{padding:15px 40px;font-size:1.1rem;font-weight:700;font-family:'Zain',sans-serif;border-radius:50px;text-decoration:none;transition:all .3s ease;display:inline-block;box-shadow:0 4px 15px rgba(212,175,55,.3)}
.btn-carousel-primary{background:#d4af37;color:#000;border:2px solid #d4af37}
.btn-carousel-secondary{background:transparent;color:#000;border:2px solid #d4af37}

/* Responsive - Critical */
@media(max-width:768px){
.professional-carousel-section{height:500px}
.carousel-title{font-size:1.8rem}
.carousel-description{font-size:1rem}
.typewriter-text{font-size:2.5rem;min-height:60px}
.btn-carousel-primary,.btn-carousel-secondary{padding:10px 25px;font-size:.95rem}
.navmenu{display:none}
}
@media(max-width:576px){
.professional-carousel-section{height:480px}
.carousel-title{font-size:1.5rem}
.typewriter-text{font-size:2rem;min-height:50px}
.carousel-buttons{flex-direction:column;gap:10px}
.btn-carousel-primary,.btn-carousel-secondary{width:100%;max-width:250px}
}