@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap");
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Tajawal",sans-serif;background:linear-gradient(135deg,#0a2e1a 0%,#0d3d23 50%,#0a2e1a 100%);color:#e0e0e0;direction:rtl;min-height:100vh;line-height:1.8}
a{color:#4caf50;text-decoration:none;transition:color .3s}
a:hover{color:#81c784}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
header{background:rgba(10,46,26,.95);border-bottom:2px solid #1b5e20;padding:12px 0;position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.logo-area{display:flex;align-items:center;gap:12px}
.logo-area svg{width:40px;height:40px}
.logo-area h2{font-size:1.4rem;color:#4caf50;font-weight:700}
nav{display:flex;flex-wrap:wrap;gap:8px}
nav a{color:#c8e6c9;font-size:.9rem;padding:6px 14px;border-radius:20px;border:1px solid rgba(76,175,80,.2);transition:all .3s}
nav a:hover,nav a.active{background:#1b5e20;color:#fff;border-color:#4caf50}

/* Hero */
.hero{text-align:center;padding:50px 20px 30px}
.hero h1{font-size:2.2rem;color:#4caf50;margin-bottom:15px;font-weight:800;text-shadow:0 2px 10px rgba(76,175,80,.3)}
.hero p{font-size:1.15rem;color:#a5d6a7;max-width:700px;margin:0 auto;line-height:2}

/* Chat Frame */
.chat-section{padding:20px}
.chat-frame{border:3px solid #2e7d32;border-radius:20px;overflow:hidden;box-shadow:0 0 40px rgba(76,175,80,.15);background:#111}
.chat-frame iframe{width:100%;height:550px;border:none;display:block}

/* Content */
.content{padding:40px 20px}
.content h2{color:#66bb6a;font-size:1.5rem;margin:25px 0 12px;font-weight:700;border-right:4px solid #4caf50;padding-right:15px}
.content h3{color:#81c784;font-size:1.2rem;margin:20px 0 10px;font-weight:600}
.content p{color:#bdbdbd;font-size:1.05rem;margin-bottom:15px;line-height:2}

/* Related Pages */
.related{padding:30px 20px;background:rgba(27,94,32,.1);border-radius:15px;margin:30px 20px}
.related h2{color:#66bb6a;text-align:center;margin-bottom:20px;font-size:1.4rem}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.related-grid a{display:block;padding:12px 18px;background:rgba(76,175,80,.08);border:1px solid rgba(76,175,80,.2);border-radius:10px;color:#a5d6a7;font-size:.95rem;text-align:center;transition:all .3s}
.related-grid a:hover{background:rgba(76,175,80,.2);color:#fff;transform:translateY(-2px)}

/* Footer */
footer{background:rgba(10,46,26,.95);border-top:2px solid #1b5e20;padding:30px 20px;margin-top:40px;text-align:center}
footer .links{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;margin-bottom:15px}
footer .links a{color:#81c784;font-size:.9rem}
footer .copy{color:#666;font-size:.85rem}

@media(max-width:768px){
.hero h1{font-size:1.6rem}
.hero p{font-size:1rem}
.chat-frame iframe{height:450px}
.header-inner{flex-direction:column;text-align:center}
nav{justify-content:center}
.content h2{font-size:1.3rem}
}

/* Logo styling */
.logo-area a{display:flex;align-items:center}
.logo-area img{height:55px;width:auto}
.login-logo{display:block;margin:0 auto 20px;width:220px;height:auto;mix-blend-mode:screen}