*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#D6D9DC;color:#2F343A;min-height:100vh;display:flex;flex-direction:column;line-height:1.7}
header{background:#C8CDD2;text-align:center;padding:16px 20px;border-bottom:3px solid #7D858D}
header h1{margin:0;font-size:30px;color:#1A1A1A}
header p{margin:5px 0 0;font-size:14px}
nav{background:#555D65;text-align:center;padding:10px 15px}
.nav-wrap{display:flex;justify-content:center;align-items:center;gap:35px;flex-wrap:wrap}
.menu-area a,.dropbtn{color:#1A1A1A;text-decoration:none;margin:0 10px;font-weight:bold;cursor:pointer}
.menu-area a:hover,.dropbtn:hover{color:#37404A}
.dropdown{display:inline-block;position:relative}
.dropdown-content{display:none;position:absolute;background:#C8CDD2;border:1px solid #8E969E;min-width:260px;z-index:10;text-align:left}
.dropdown-content a{display:block;padding:10px;margin:0}
.dropdown:hover .dropdown-content{display:block}
.lang-box{position:relative;display:inline-block}
.lang-btn{background:#666E76;color:#1A1A1A;border:0;padding:7px 12px;border-radius:6px;font-weight:bold;cursor:pointer}
.lang-options{display:none;position:absolute;right:0;top:38px;background:#C8CDD2;border:1px solid #8E969E;min-width:130px;z-index:20;border-radius:6px;overflow:hidden}
.lang-options button{display:block;width:100%;background:#555D65;color:#1A1A1A;border:0;padding:10px;cursor:pointer}
.lang-options button:hover{background:#666E76}
.lang-options.open{display:block}
main{max-width:1100px;margin:auto;padding:24px 30px;flex:1;width:100%}
.card{background:#ECEEEF;padding:24px;border-left:5px solid #7D858D;border-radius:10px;margin-bottom:22px}
h1,h2,h3{color:#37404A}
footer{text-align:center;background:#C8CDD2;color:#333333;padding:16px;margin-top:auto}
.hidden{display:none!important}
.rtl{direction:rtl;text-align:right}
.rtl .card{border-left:0;border-right:5px solid #7D858D}
.ltr{direction:ltr;text-align:left}
@media(max-width:760px){
 header{padding:12px 10px}
 header h1{font-size:24px}
 header p{font-size:12px}
 .nav-wrap{display:block}
 .menu-area a,.dropbtn{display:block;margin:0;padding:11px}
 .dropdown{display:block}
 .dropdown-content{position:static;width:100%;min-width:0}
 .lang-box{display:block;margin-top:10px}
 .lang-options{position:static;width:100%}
 main{padding:15px 10px}
 .card{padding:18px}
}

/* ===== Programs dropdown fix ===== */

.dropdown-content{
    background:#555D65 !important;
    border:1px solid #444B52 !important;
    box-shadow:0 4px 12px rgba(0,0,0,0.25) !important;
}

.dropdown-content a{
    color:#FFFFFF !important;
    font-weight:600 !important;
}

.dropdown-content a:hover{
    background:#444B52 !important;
    color:#FFFFFF !important;
}


/* ===== Programs dropdown fix ===== */

.dropdown-content{
    background:#555D65 !important;
    border:1px solid #444B52 !important;
    box-shadow:0 4px 12px rgba(0,0,0,0.25) !important;
}

.dropdown-content a{
    color:#FFFFFF !important;
    font-weight:600 !important;
}

.dropdown-content a:hover{
    background:#444B52 !important;
    color:#FFFFFF !important;
}


/* ===== Navigation and dropdown readability fix ===== */

nav,
nav *{
    color:#FFFFFF !important;
}

.menu-area a,
.dropbtn{
    color:#FFFFFF !important;
}

.dropdown-content{
    background:#555D65 !important;
    border:1px solid #3F464D !important;
}

.dropdown-content a{
    color:#FFFFFF !important;
    background:#555D65 !important;
}

.dropdown-content a:hover{
    background:#444B52 !important;
    color:#FFFFFF !important;
}

.lang-btn{
    color:#FFFFFF !important;
    background:#666E76 !important;
}

.lang-options{
    background:#555D65 !important;
    border:1px solid #3F464D !important;
}

.lang-options button{
    color:#FFFFFF !important;
    background:#555D65 !important;
}

.lang-options button:hover{
    background:#444B52 !important;
    color:#FFFFFF !important;
}


/* ===== Mobile menu fix ===== */

.mobile-menu-btn{
    display:none;
}

@media(max-width:760px){

    .nav-wrap{
        display:flex !important;
        justify-content:space-between !important;
        align-items:center !important;
        gap:10px !important;
    }

    .mobile-menu-btn{
        display:inline-block !important;
        background:#555D65 !important;
        color:#FFFFFF !important;
        border:0 !important;
        padding:9px 14px !important;
        border-radius:6px !important;
        font-weight:bold !important;
        cursor:pointer !important;
    }

    .menu-area{
        display:none !important;
        width:100% !important;
        margin-top:10px !important;
        background:#555D65 !important;
        border-radius:8px !important;
        overflow:hidden !important;
    }

    .menu-area.mobile-open{
        display:block !important;
    }

    .menu-area a,
    .dropbtn{
        display:block !important;
        color:#FFFFFF !important;
        padding:12px !important;
        margin:0 !important;
        text-align:center !important;
        border-bottom:1px solid rgba(255,255,255,0.15) !important;
    }

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

    .dropdown-content a{
        background:#444B52 !important;
        color:#FFFFFF !important;
        font-size:14px !important;
    }

    .lang-box{
        display:inline-block !important;
        margin:0 !important;
        position:relative !important;
    }

    .lang-options{
        position:absolute !important;
        right:0 !important;
        top:42px !important;
        width:140px !important;
        background:#555D65 !important;
        z-index:9999 !important;
    }

    .lang-options button{
        color:#FFFFFF !important;
        background:#555D65 !important;
    }
}


/* ===== Final clean mobile menu ===== */

.mobile-topbar,
.mobile-panel{
    display:none;
}

@media(max-width:760px){

    nav .nav-wrap > .menu-area{
        display:none !important;
    }

    nav .nav-wrap{
        display:flex !important;
        justify-content:space-between !important;
        align-items:center !important;
    }

    .mobile-menu-btn{
        display:none !important;
    }

    .mobile-topbar{
        display:flex !important;
        justify-content:space-between !important;
        align-items:center !important;
        width:100% !important;
        gap:10px !important;
    }

    .mobile-topbar button{
        background:#555D65 !important;
        color:#FFFFFF !important;
        border:0 !important;
        padding:10px 14px !important;
        border-radius:6px !important;
        font-weight:bold !important;
        cursor:pointer !important;
    }

    .mobile-panel{
        display:none !important;
        width:100% !important;
        margin-top:10px !important;
        background:#555D65 !important;
        border-radius:8px !important;
        overflow:hidden !important;
    }

    .mobile-panel.open{
        display:block !important;
    }

    .mobile-panel a,
    .mobile-panel button{
        display:block !important;
        width:100% !important;
        color:#FFFFFF !important;
        background:#555D65 !important;
        text-align:center !important;
        padding:12px !important;
        border:0 !important;
        border-bottom:1px solid rgba(255,255,255,0.15) !important;
        text-decoration:none !important;
        font-weight:600 !important;
    }

    .mobile-sub{
        background:#444B52 !important;
        padding:0 !important;
    }

    .mobile-sub a{
        background:#444B52 !important;
        font-size:14px !important;
    }

    .lang-box{
        display:none !important;
    }
}


/* ===== Mobile final stable menu ===== */

.mobile-topbar,
.mobile-panel{
  display:none;
}

@media(max-width:760px){

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

  nav .menu-area,
  nav .lang-box{
    display:none !important;
  }

  .mobile-topbar{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    width:100% !important;
    gap:10px !important;
  }

  .mobile-topbar button{
    background:#555D65 !important;
    color:#FFFFFF !important;
    border:0 !important;
    padding:10px 14px !important;
    border-radius:6px !important;
    font-weight:bold !important;
    cursor:pointer !important;
    min-width:120px !important;
  }

  .mobile-panel{
    display:none !important;
    width:100% !important;
    margin-top:10px !important;
    background:#555D65 !important;
    border-radius:8px !important;
    overflow:hidden !important;
  }

  .mobile-panel.open{
    display:block !important;
  }

  .mobile-panel a,
  .mobile-panel button{
    display:block !important;
    width:100% !important;
    color:#FFFFFF !important;
    background:#555D65 !important;
    text-align:center !important;
    padding:12px !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,0.18) !important;
    text-decoration:none !important;
    font-weight:600 !important;
  }
}