/* =====================================
   GiantEdu Student Portal
   Professional Responsive CSS
===================================== */


/* GLOBAL */

*{
    box-sizing:border-box;
    font-family:'Segoe UI', Arial, sans-serif;
}


body{

    margin:0;

    background:#f4f7fb;

    color:#333;

}



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


.top-header{

    background:linear-gradient(135deg,#065f46,#10b981);

    color:white;

    padding:12px 20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.brand{

    display:flex;

    align-items:center;

    gap:12px;

}


.brand img{

    width:55px;

    height:55px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid white;

}


.brand h2{

    margin:0;

    font-size:22px;

}


.brand span{

    font-size:12px;

    opacity:.85;

}



.logout{

    color:white;

    text-decoration:none;

    background:rgba(255,255,255,.15);

    padding:8px 15px;

    border-radius:20px;

    font-size:14px;

}


.logout:hover{

    background:white;

    color:#065f46;

}




/* =====================================
   CONTAINER
===================================== */


.container{

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:15px;

}



/* =====================================
   STUDENT PROFILE
===================================== */


.student-profile{

    background:white;

    border-radius:18px;

    padding:18px;

    display:flex;

    align-items:center;

    gap:20px;

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

}



.avatar{

    width:80px;

    height:80px;

    background:#065f46;

    color:white;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:35px;

}


.student-profile h2{

    margin:0 0 10px;

    color:#065f46;

}



.student-profile p{

    margin:5px 0;

    font-size:14px;

}


.student-profile i{

    color:#065f46;

    margin-right:8px;

}



/* =====================================
   TOTAL BALANCE
===================================== */


.summary{

    margin-top:15px;

    background:linear-gradient(135deg,#065f46,#10b981);

    padding:25px;

    border-radius:20px;

    text-align:center;

    color:white;

}


.summary i{

    font-size:40px;

}


.summary h3{

    margin:8px;

}


.summary h1{

    margin:5px;

    font-size:32px;

}



.due,
.paid{

    display:inline-block;

    margin-top:10px;

    padding:7px 20px;

    border-radius:20px;

    font-weight:bold;

    font-size:13px;

}



.due{

    background:#fee2e2;

    color:#b91c1c;

}


.paid{

    background:#dcfce7;

    color:#166534;

}




/* =====================================
   SECTION TITLE
===================================== */


.section-title{

    margin-top:25px;

    color:#065f46;

    font-size:18px;

}


.section-title i{

    margin-right:8px;

}




/* =====================================
   FINANCE CARDS
   FIVE CARDS IN ONE ROW
===================================== */


.cards{


    display:grid;


    grid-template-columns:repeat(5,1fr);


    gap:10px;


}



.card{


    padding:14px;


    border-radius:15px;


    color:white;


    min-height:120px;


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


    transition:.3s;


}



.card:hover{


    transform:translateY(-5px);


}



.card i{


    font-size:25px;


    margin-bottom:8px;


}



.card h3{


    font-size:12px;


    margin:5px 0;


    text-transform:uppercase;


}



.card h2{


    font-size:15px;


    margin:0;


}




/* CARD COLORS */


.blue{

    background:#2563eb;

}


.green{

    background:#16a34a;

}


.orange{

    background:#ea580c;

}


.purple{

    background:#7c3aed;

}


.red{

    background:#dc2626;

}




/* =====================================
   QUICK LINKS
===================================== */


.quick{


    display:grid;


    grid-template-columns:repeat(4,1fr);


    gap:12px;


}



.quick a{


    background:white;


    padding:20px;


    border-radius:15px;


    text-align:center;


    text-decoration:none;


    color:#065f46;


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


}



.quick a:hover{


    transform:translateY(-3px);


}



.quick i{


    display:block;


    font-size:30px;


    margin-bottom:10px;


}




/* =====================================
   FOOTER
===================================== */


.footer{


    text-align:center;


    margin-top:25px;


    color:#777;


    font-size:13px;


}





/* =====================================
   TABLET
===================================== */


@media(max-width:1100px){


    .cards{

        grid-template-columns:repeat(3,1fr);

    }


}





/* =====================================
   MOBILE
===================================== */


@media(max-width:700px){


    .top-header{


        flex-direction:column;


        gap:10px;


        text-align:center;


    }



    .student-profile{


        flex-direction:column;


        text-align:center;


    }



    .cards{


        grid-template-columns:repeat(2,1fr);


    }



    .quick{


        grid-template-columns:repeat(2,1fr);


    }



}




@media(max-width:450px){


    .cards{


        grid-template-columns:1fr;


    }



    .quick{


        grid-template-columns:1fr;


    }



    .summary h1{


        font-size:24px;


    }


}