@font-face{


font-family:"SchoolFont";

src:url("../../assets/font/B Titr Bold_0.ttf")
format("truetype");

font-weight:normal;

font-style:normal;


}

*{


margin:0;

padding:0;

box-sizing:border-box;

font-family:"SchoolFont", Tahoma, sans-serif;


}

body{


background:#f4f6f9;

direction:rtl;

min-height:100vh;

padding:30px 15px;

color:#333;


}

/* =========================
Container
========================= */

.container{


width:100%;

max-width:900px;

margin:0 auto;


}

/* =========================
Back Button
========================= */

.top-actions{


margin-bottom:25px;


}

.back-btn{


display:inline-block;

background:#053734;

color:white;

text-decoration:none;

padding:11px 20px;

border-radius:9px;

transition:.3s;


}

.back-btn:hover{


background:#D4AF37;

transform:translateY(-2px);


}

/* =========================
Page Header
========================= */

.page-header{


background:#fff;

text-align:center;

padding:35px 20px;

border-radius:16px;

margin-bottom:25px;

box-shadow:0 7px 25px rgba(0,0,0,.07);


}

.page-header .icon{


width:70px;

height:70px;

margin:0 auto 15px;

border-radius:50%;

background:#053734;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;


}

.page-header h1{


color:#053734;

font-size:28px;

margin-bottom:8px;


}

.page-header p{


color:#777;

font-size:14px;


}

/* =========================
FAQ List
========================= */

.faq-list{


display:flex;

flex-direction:column;

gap:12px;


}

/* =========================
FAQ Item
========================= */

.faq-item{


background:#fff;

border-radius:12px;

overflow:hidden;

box-shadow:0 4px 15px rgba(0,0,0,.06);

border:1px solid #eee;

transition:.3s;


}

.faq-item:hover{


box-shadow:0 7px 20px rgba(0,0,0,.09);


}

/* =========================
Question
========================= */

.faq-question{


width:100%;

border:none;

background:white;

padding:20px;

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

text-align:right;

direction:rtl;

color:#053734;

font-size:16px;

font-weight:bold;

cursor:pointer;

transition:.3s;


}

.faq-question:hover{


background:#f8faf9;


}

/* =========================
Arrow
========================= */

.arrow{


flex-shrink:0;

color:#D4AF37;

font-size:16px;

transition:.3s;


}

/* =========================
Answer
========================= */

.faq-answer{


max-height:0;

overflow:hidden;

background:#fafafa;

transition:max-height .35s ease;


}

.faq-answer p{


padding:0 20px 20px;

color:#555;

line-height:2.2;

font-size:15px;


}

/* =========================
Active
========================= */

.faq-item.active{


border-color:#D4AF37;


}

.faq-item.active .faq-question{


background:#f8faf9;


}

.faq-item.active .faq-answer p{


padding-top:15px;


}

/* =========================
Empty
========================= */

.empty{


background:white;

border-radius:12px;

padding:50px 20px;

text-align:center;

color:#777;

box-shadow:0 5px 20px rgba(0,0,0,.06);


}

/* =========================
Mobile
========================= */

@media(max-width:600px){


body{

    padding:15px 10px;

}


.container{

    width:100%;

}


.back-btn{

    display:block;

    text-align:center;

}


.page-header{

    padding:28px 15px;

}


.page-header h1{

    font-size:23px;

}


.page-header p{

    font-size:13px;

}


.page-header .icon{

    width:60px;

    height:60px;

    font-size:27px;

}


.faq-question{

    padding:16px 14px;

    font-size:14px;

    gap:10px;

}


.faq-answer p{

    padding-left:15px;

    padding-right:15px;

    font-size:14px;

    line-height:2;

}


}

/* =========================
Small Mobile
========================= */

@media(max-width:400px){


.page-header h1{

    font-size:21px;

}


.faq-question{

    font-size:13px;

}


.faq-answer p{

    font-size:13px;

}


}