/* ==========================
      SLO PAGE MAIN
========================== */


.slo-main{

    margin-left:250px;

    margin-top:70px;

    padding:40px;

    background:#F8FAF9;

    min-height:100vh;

    font-family:'Nunito', sans-serif;

}



/* ==========================
      HEADER
========================== */


.slo-header{

    background:#14532D;

    color:white;

    padding:45px;

    border-radius:25px;

    margin-bottom:35px;

}



.slo-header span{

    background:white;

    color:#166534;

    padding:8px 18px;

    border-radius:20px;

    font-weight:700;

}



.slo-header h1{

    font-family:'Poppins',sans-serif;

    font-size:38px;

    margin:20px 0;

}



.slo-header p{

    font-size:18px;

}



/* ==========================
      CONTENT CARDS
========================== */


.learning-card,
.activity-box,
.question-card,
.paper-card,
.quiz-card{

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:0 6px 20px rgba(0,0,0,.08);

    margin-bottom:35px;

}



.learning-card h2,
.points-section h2,
.activity-section h2,
.mcq-section h2,
.paper-section h2,
.quiz-section h2{

    color:#166534;

    font-family:'Poppins',sans-serif;

    margin-bottom:20px;

}



.learning-card p{

    font-size:17px;

    line-height:1.8;

    color:#374151;

}





/* ==========================
      IMPORTANT POINTS
========================== */


.points-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

}



.point-card{

    background:white;

    padding:25px;

    border-radius:18px;

    box-shadow:0 5px 15px rgba(0,0,0,.07);

}



.point-card i{

    color:#166534;

    font-size:30px;

    margin-bottom:15px;

}



.point-card p{

    color:#475569;

}





/* ==========================
      BUTTONS
========================== */


button{

    background:#166534;

    color:white;

    border:none;

    padding:12px 25px;

    border-radius:25px;

    cursor:pointer;

    font-weight:600;

    margin:5px;

}



button:hover{

    background:#14532D;

}





/* ==========================
      MCQ BUTTONS
========================== */


.question-card button{

    display:block;

    width:100%;

    text-align:left;

    background:#F0FDF4;

    color:#166534;

    border:1px solid #BBF7D0;

}



.question-card button:hover{

    background:#DCFCE7;

}





/* ==========================
      RESPONSIVE
========================== */


@media(max-width:900px){


.slo-main{

    margin-left:0;

    padding:20px;

}


.slo-header h1{

    font-size:28px;

}


}
#paper-answer{

display:none;

margin-top:20px;

padding:20px;

background:#F0FDF4;

border-left:5px solid #166534;

border-radius:15px;

}


#paper-answer h4{

color:#166534;

font-family:'Poppins',sans-serif;

}


.answer-card{

background:#F0FDF4;

padding:20px;

border-radius:15px;

border-left:5px solid #166534;

}