*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#0b0f14;color:white;min-height:100vh;display:flex;flex-direction:column;line-height:1.7}
header{background:#111827;text-align:center;padding:30px;border-bottom:3px solid #00ff99}
h1,h2,h3{color:#00ff99}
nav{background:#0f172a;text-align:center;padding:15px}
nav a,.dropbtn{color:white;text-decoration:none;margin:8px;font-weight:bold;cursor:pointer}
nav a:hover,.dropbtn:hover{color:#00ff99}
.dropdown{display:inline-block;position:relative}
.dropdown-content{display:none;position:absolute;background:#111827;border:1px solid #00ff99;min-width:280px;z-index:10;text-align:left}
.dropdown-content a{display:block;padding:12px;margin:0}
.dropdown:hover .dropdown-content{display:block}
button{background:#00ff99;border:0;padding:8px 12px;margin:3px;border-radius:6px;font-weight:bold;cursor:pointer}
main{max-width:1100px;margin:auto;padding:30px;flex:1;width:100%}
.card{background:#111827;padding:30px;border-left:5px solid #00ff99;border-radius:12px;margin-bottom:20px}
footer{text-align:center;background:#111827;color:#aaa;padding:20px;margin-top:auto}
.hidden{display:none!important}
.rtl{direction:rtl;text-align:right}
ul{padding-left:25px}
.rtl ul{padding-right:25px;padding-left:0}
@media(max-width:760px){nav a,.dropbtn{display:block}.dropdown{display:block}.dropdown-content{position:static;display:block;border:0;background:#0b1220}}

/* Mobile optimization */
@media(max-width:760px){
  header{
    padding:24px 12px;
  }

  header h1{
    font-size:28px;
    line-height:1.3;
  }

  header p{
    font-size:14px;
    line-height:1.5;
  }

  nav{
    padding:10px;
  }

  nav a,
  .dropbtn{
    display:block;
    width:100%;
    margin:4px 0;
    padding:10px;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }

  .dropdown{
    display:block;
    width:100%;
  }

  .dropdown-content{
    display:block;
    position:static;
    width:100%;
    min-width:0;
    border:0;
    background:#0b1220;
    margin-top:4px;
    border-radius:8px;
  }

  .dropdown-content a{
    padding:10px;
    font-size:14px;
  }

  button{
    width:30%;
    min-width:90px;
    margin-top:8px;
  }

  main{
    padding:18px 12px;
  }

  .card{
    padding:20px;
    border-left:4px solid #00ff99;
    border-radius:10px;
  }

  body.rtl .card{
    border-left:0;
    border-right:4px solid #00ff99;
  }

  h2{
    font-size:24px;
  }

  h3{
    font-size:18px;
  }

  p, li{
    font-size:15px;
  }

  footer{
    font-size:13px;
    padding:16px;
  }
}

/* Better mobile menu */
.mobile-menu-title{
  display:none;
}

@media(max-width:760px){
  nav{
    text-align:left;
    padding:0;
  }

  nav:before{
    content:"☰ Menu";
    display:block;
    background:#00ff99;
    color:#07120d;
    font-weight:bold;
    padding:14px;
    text-align:center;
  }

  nav a,
  nav .dropbtn,
  nav button{
    display:block;
    width:100%;
    margin:0;
    padding:13px 18px;
    text-align:left;
    border-bottom:1px solid rgba(255,255,255,.12);
    background:#0f172a;
    color:white;
  }

  nav button{
    background:#111827;
    color:#00ff99;
  }

  .dropdown{
    display:block;
    width:100%;
  }

  .dropdown-content{
    display:block;
    position:static;
    width:100%;
    min-width:0;
    background:#0b1220;
    border:0;
    border-radius:0;
  }

  .dropdown-content a{
    padding-left:35px;
    font-size:14px;
  }

  body.rtl nav a,
  body.rtl nav .dropbtn,
  body.rtl nav button{
    text-align:right;
  }

  body.rtl .dropdown-content a{
    padding-right:35px;
    padding-left:18px;
  }

  header h1{
    font-size:26px;
  }

  header p{
    font-size:14px;
  }

  main{
    padding:15px 10px;
  }

  .card{
    padding:18px;
  }
}

#mobile-menu-btn{display:none}

.language-row{display:inline-block}

@media(max-width:760px){
  nav{
    padding:0!important;
    text-align:left!important;
  }

  #mobile-menu-btn{
    display:block!important;
    width:100%!important;
    background:#00ff99!important;
    color:#07120d!important;
    padding:14px!important;
    border:0!important;
    font-size:18px!important;
    font-weight:bold!important;
    text-align:center!important;
  }

  #menu-items{
    display:none;
  }

  #menu-items.open{
    display:block;
  }

  nav a,
  nav .dropbtn,
  nav .language-row button{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:13px 18px!important;
    background:#0f172a!important;
    color:white!important;
    text-align:left!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
  }

  nav .language-row{
    display:block!important;
    width:100%!important;
  }

  nav .language-row button{
    background:#111827!important;
    color:#00ff99!important;
  }

  .dropdown{
    display:block!important;
    width:100%!important;
  }

  .dropdown-content{
    display:block!important;
    position:static!important;
    width:100%!important;
    min-width:0!important;
    border:0!important;
    background:#0b1220!important;
  }

  .dropdown-content a{
    padding-left:35px!important;
    font-size:14px!important;
  }

  body.rtl nav a,
  body.rtl nav .dropbtn,
  body.rtl nav .language-row button{
    text-align:right!important;
  }

  body.rtl .dropdown-content a{
    padding-right:35px!important;
    padding-left:18px!important;
  }
}

/* Fix mobile submenu: closed until click */
@media(max-width:760px){
  .dropdown-content{
    display:none!important;
  }

  .dropdown-content.open{
    display:block!important;
  }

  .dropbtn{
    position:relative;
  }

  .dropbtn::after{
    content:" +";
    color:#00ff99;
  }
}

/* FINAL mobile submenu fix */
@media(max-width:760px){
  nav #menu-items .dropdown .dropdown-content,
  nav #menu-items .dropdown:hover .dropdown-content{
    display:none!important;
  }

  nav #menu-items .dropdown.open .dropdown-content{
    display:block!important;
  }
}