@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;600;700&display=swap');
*{box-sizing:border-box}
body{
    margin:0;
    background:#f4f8ff;
    color:#24364b;
    font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;
    line-height:2
}
.hero{
    padding:38px 20px;
    background:linear-gradient(135deg,#0b4ea2,#0d6ec7);
    color:#fff;
    text-align:center
}
.hero h1{margin:0;font-size:34px}
.hero p{margin:7px 0 0;color:#deefff}
.wrap{
    width:min(900px,calc(100% - 24px));
    margin:24px auto 50px
}
.card{
    background:#fff;
    border:1px solid #d7e5f3;
    border-radius:20px;
    padding:25px;
    margin-top:15px;
    box-shadow:0 10px 28px rgba(31,66,103,.06)
}
h2{color:#0b5dac;margin:0 0 8px}
a{color:#0d6ec7}
.links{
    text-align:center;
    margin-top:20px
}
.links a{
    display:inline-block;
    margin:4px;
    padding:8px 12px;
    background:#eaf3ff;
    border-radius:10px;
    text-decoration:none;
    font-weight:700
}
.note{
    background:#fff7df;
    border:1px solid #f1dfaa;
    color:#735600
}