
:root { --bg: #ddd;     --text: #333;     --nav-bg: #2c3e50;     --sidebar-bg: #e9ecef;     --card-bg: #fff;     --border: #ddd;     --accent: #fff; }

.dark-mode {    --bg: #666;    --text: #e0e0e0;    --nav-bg: #0d1b2a;   --sidebar-bg: #1e1e1e;    --card-bg: #1e1e1e;   --border: #444;
    --accent: #6b8cbc;}
*{margin:0;padding:0;box-sizing:border-box}
body{font-size:clamp(17px,4vw,20px);font-weight:400;line-height:1.8;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,Arial,sans-serif;background:var(--bg);color:var(--text)}
h1,h2,h3{margin:20px 0 12px}
ol{    padding-left: 25px;
	border-left: 2px solid #0f0;
	border-radius: 10px;}
ol li::marker{color:#00f;}
ol li {
  text-indent: -1em;
  padding-left: 1em;
}
p {
	text-indent: 1em;
	margin: 1em 0;   
	border-left: 2px solid #3498db;
	border-radius: 10px;
	padding-left: 5px;
	margin-bottom: 25px;     
}

strong {
 font-style: italic;
  padding-bottom: 0.1em;
  font-weight: 600;
  border-radius:8px;
}
.c01{border-bottom:2px solid #f00; }
.c02{border-bottom:2px solid #0c0}
.c04{border-bottom:2px solid #00f}
.red{color:#f00}
.green-border{border:3px solid #0b0}
.blue-border{border:3px solid #00f}
.brown-border{border:3px solid #e91}
.red01{background:#fcc}
.yellow02{background:#ff9}
.green01{background:#9f9}
.container2{display:flex;margin-top:40px;min-height:calc(100vh - 50px);background:#adf;position:relative;z-index:0}
.top-nav{position:fixed;top:0;left:0;width:100%;height:40px;background:#a4c0fb;color:#fff;align-items:center;padding:0 15px;z-index:1000}
.nav-controls{margin-left:auto;display:flex;gap:10px}
.theme-toggle,.mobile-menu-btn{background:#090;border:none;color:#fff;cursor:pointer;padding:5px}
.mobile-menu-btn{display:none}
.sidebar{width:250px;height:calc(100vh - 50px);overflow-y:auto;transition:transform .3s;position:fixed;z-index:15;top:100px}
.sidebar h3{padding:10px 15px;border-bottom:1px solid var(--border);margin-bottom:8px}
.sidebar ul{list-style:none}
.sidebar li{padding:8px 15px;border-bottom:1px solid var(--border);cursor:pointer}
.sidebar li:hover{background:var(--accent);color:#fff}
.dark-mode aside,.dark-mode [class*="sidebar"],.dark-mode [class*="menu"],.dark-mode [style*="fixed"]{background:var(--sidebar-bg)!important}
.main-content{flex:1;margin-left:250px;padding:2px}
.content-card{background:var(--card-bg);padding:15px;margin-bottom:20px;border-radius:20px;top:50px;position:relative}

.img2,.img3{max-width:100%}
.img2{margin:2px}
.img3{max-width:96%;width:190px;margin:4px}
.active_menu,.inactive_menu{display:block;padding:10px 5px;margin:3px;text-decoration:none;line-height:1;background:#555;top:-40px;position:relative;}
.active_menu{background:#afa}
.inactive_menu{background:#eef}
.sid_menu{display:block!important;margin:0 5px}
.header01{display:block}
.c06{display:inline-block}
.Article01{width:100%;height:3px;background:#0b0}
.div01{height:89px;width:89px;top:-60px;position:relative;z-index:8;float:right}
.div02{position:relative;z-index:5}
.centered{overflow:auto;display:inline;position:absolute;left:0;text-align:center}
.NavClass{position:fixed;top:0;right:0;z-index:50;background:#a4c0fb}
.NavClass2{left:260px;position:fixed;bottom:0;z-index:100;background:#a4c0fb;padding:0 5px}
.NavClass3{z-index:1}
.BreadcrumbList{background:#fefeff;border:6px solid #7aa}
.link01{margin:2px;padding:0 3px;border-radius:15px;height:35px;line-height:30px;}
.link02{display:inline;background:#fee;border:3px solid #f77;text-decoration:none;}
.link03{background:#afa;border:3px solid #0a4}
.form-control{position:relative;margin:0 8px}
.sett01{width:35px;height:35px;}
.func-tour1{top:10px;position:relative;width:35px;height:35px}
.func-tour4{width:120px;height:35px;margin:15px;background:#bfe}
.func-tour6{width:100%;height:300px;padding:3px;background:#fef;color:#000;box-sizing:border-box}
.func-tour8{display:none;position:fixed;top:50px;right:50px;padding:10px;z-index:51;background:#caf}
.note1{
	display: inline-block;padding:5px 10px;background:#fffff5;border-width:2px 2px 2px 7px;border-style:solid;border-color:#ca0;border-radius:10px
	}
.exam1,.exam3{max-width:100%;margin:10px 1%;padding:10px 1%;border-width:2px 2px 2px 7px;border-style:solid;border-radius:20px}
.exam1{background:#fafffa;border-color:#0c0}
.exam3{background:#faffff;border-color:#4cc}
.question{color:#2c3e50;margin-bottom:20px}
.quiz-container{max-width:600px;margin:20px auto;padding:20px}
.question-container{margin-bottom:30px}
.custom-radio{display:none}
.radio-label{display:block;margin:12px 0;padding:8px;cursor:pointer;border-radius:5px;width:fit-content;transition:all .3s}
.radio-label.disabled{cursor:not-allowed}
.radio-circle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid #3498db;border-radius:50%;margin:0 10px;transition:all .3s}
.custom-radio:checked+.radio-circle{background:#3498db;color:#fff}
.custom-radio:disabled+.radio-circle{border-color:#bdc3c7;background:#ecf0f1;color:#7f8c8d}
.custom-radio:disabled:checked+.radio-circle{background:#95a5a6;border-color:#95a5a6}
.correct-answer{background:#d4edda;border:2px solid #28a745}
.wrong-answer{background:#f8d7da;border:2px solid #dc3545}
.explanation-box{margin:15px 0 25px;padding:16px;background:#f8f9fa;border:2px solid #e9ecef;border-radius:12px;box-shadow:0 2px 8px #00000014;transition:all .3s}
.explanation-title{margin-bottom:8px;color:#495057}
.explanation-text{color:#6c757d}
.btn-container{text-align:center;margin-top:30px}
.submit-btn,.retry-btn{padding:15px 30px;border:none;border-radius:8px;cursor:pointer;text-align:center;background:#3498db;color:#fff;margin:5px 0 0 0}
.submit-btn:hover,.retry-btn:hover{background:#2980b9;transform:translateY(-2px)}
.submit-btn:disabled,.retry-btn:disabled{background:#bdc3c7;cursor:not-allowed;transform:none}
.clear-btn{margin-left:50px;background:var(--bg,#ddd);border:2px solid #bbb}
.select01{width:100%;height:3px;margin-bottom:10px;background:#33f}
.ans01{display:inline-block;padding:10px;margin:0 0 10px}
.ques01{background:#fdd;display:inline-block;padding:5px;margin:5px;}
.ques02{background:#dfd;display:inline-block;padding:5px;margin:5px;}
.ques03{background:#ddf}
.content01{padding:10px 1%;border-radius:20px}
.faq{margin-top:10px;background:var(--card-bg);border:6px solid #e91}
.color04{padding-left:10px;border-left:4px solid #e91;border-radius:8px}
table tr:nth-child(even){background:#aff;color:#000}
table tr:nth-child(odd){background:#afb;color:#000}
.hidden{display:none}
.tf{background:#004E89;text-align:center;border-top:3px solid #FF6B35;color:#fff;padding:20px 15px}
.tl{display:inline-flex;align-items:center;gap:10px;margin-bottom:15px}
.ti{color:#FFA726}
.tb{color:#FF6B35}
.tbl{color:#fff}
.tt{color:#B3E0FF;margin-top:10px}
.tti{color:#FFA726;margin-right:5px}
.tinf{color:#4FC3F7;margin-bottom:10px}
.tii{color:#FFA726}
.tc{color:#B3E0FF;margin-top:15px}
.tcb{color:#FF6B35}
button,input[type="button"],input[type="submit"],input[type="reset"],.btn{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4}
.btn{background:#3498db;color:#fff;border:none;padding:4px;border-radius:6px;cursor:pointer;transition:background .3s}
.btn4,.btn5{background:#f00;color:#fff;border-radius:6px;cursor:pointer}
.btn4{position:relative;right:0;padding:4px}
.btn5{position:fixed;bottom:0;right:1px;z-index:2;padding:0 5px;width:25px}
.box01b{background:#ccc;margin:8px 1px;border-radius:50px/20px}
.box01c{background:#fffff5;color:#000;margin:2px;border-radius:25px/15px}
.box01d{background:#f5ffff;margin:5px 25px 1px 5px;border-radius:25px/15px}
.box01{padding:10px}
.sidebar-top{background:#ccf;width:250px;position:fixed;padding-right:10px;top:20px;color:#f00;margin-right:-10px;float:left;z-index:0;bottom:0px;}
.inactive{display:flex;max-width:30%!important}
.st01 {
  display: inline-block;

}
.st01:hover,
.st01:hover ~ .st01 {
  background-image: url('/include-en/active.svg');
}

.icon{background-image:url('/include-en/active.svg')}
.style01{width:20px;height:20px}
.breadcrumb{padding:0 .5rem}
.breadcrumb ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.breadcrumb li:not(:last-child)::after{display:inline-block;margin:0 .25rem;content:"►"}
.dark-mode{background-color:#000;color:#fff}
.munu02{position:relative; top:40px;}
.back01{background:none;}
.font-c{font-size:40px;}
.font16{font-size:16px}
.font19{font-size:19px}
.font22{font-size:22px}
.font28{font-size:28px}
.head01{clear: both}
.hide04{position:relative;left:20px;}
.hide05{position:relative;left:-30000px;}
/* فقط ۴ خط! */
.skip-link {
    position: fixed;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    background: #2c3e50;
    color: white;
    padding: 8px 20px;
    z-index: 1000;
    transition: top 0.2s;
}
.skip-link:focus {top: 40px;}

.learning-objectives {
    background: #def;
    border-left: 5px solid #0369a1;
    padding: 20px;
    margin: 25px 0;


    padding-left: 25px;

    border-radius: 8px;
}
.width01{width:50px;float:right;height:35px;}
@media(max-width:768px){.NavClass2{left:2px;}.active_menu,.inactive_menu{top:20px}.sidebar-top{top:-20px;position:fixed}.mobile-menu-btn{display:block}.sidebar{top:45px;position:fixed;transform:translateX(-100%);width:40%}.sidebar.active{transform:translateX(0)}.main-content{margin-left:0}}
/*---------کدهای  وابسته به زبان  سایت انگلیسی------------*/
.img2 {float: right;}
.img3 {float: left;}
.movt01 {top:-60px;float: right;overflow: hidden;display: inline-block;color: #f00;animation: example 10s infinite linear;position: relative;line-height:30px;}
@keyframes example {0%, 100% {left: -200px;}50% {left: -20px;}}
.form-control {float: right;}