/*----------------------------------------------------------------------------------------*/
/* 1. Global Styles */
/*----------------------------------------------------------------------------------------*/
body 
{
    /*====================================================================================*/
    font-family: 'Poppins', sans-serif;
    background-color: #f4f6f9; /* Light gray background for contrast */
    color: #444;
    line-height: 1.6;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
/* 2. Header & Branding */
/*----------------------------------------------------------------------------------------*/
.header-section 
{
    /*====================================================================================*/
    background: #fff;
    padding: 40px 0 20px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
.brand-logo 
{
    /*====================================================================================*/
    width: 120px;
    height: auto;
    margin-bottom: 15px;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
.brand-title 
{
    /*====================================================================================*/
    font-size: 32px;
    font-weight: 700;
    color: #001f4d; /* DMSF Navy */
    letter-spacing: -1px;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
.brand-accent 
{
    /*====================================================================================*/
    color: #c9302c; /* Red accent */
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
.brand-subtitle 
{
    /*====================================================================================*/
    font-size: 16px;
    color: #777;
    font-weight: 300;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
/* 3. Login Cards - The Hero Feature */
/*----------------------------------------------------------------------------------------*/
.role-card 
{
    /*====================================================================================*/
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Soft shadow */
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    border-top: 4px solid transparent;
    margin-bottom: 30px;
    height: 100%;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
.role-card:hover 
{
    /*====================================================================================*/
    transform: translateY(-10px); /* Lifts up on hover */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
.role-icon 
{
    /*====================================================================================*/
    font-size: 48px;
    margin-bottom: 15px;
    display: inline-block;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
.role-title 
{
    /*====================================================================================*/
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 10px;
    display: block;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
.role-desc 
{
    /*====================================================================================*/
    font-size: 13px;
    color: #888;
    margin-bottom: 20px;
    min-height: 60px; /* Keeps buttons aligned */
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
/* Card Colors */
/*----------------------------------------------------------------------------------------*/
.card-instructor { border-top-color: #337ab7; }
.card-instructor .role-icon { color: #337ab7; }
/*----------------------------------------------------------------------------------------*/
.card-student { border-top-color: #5cb85c; }
.card-student .role-icon { color: #5cb85c; }
/*----------------------------------------------------------------------------------------*/
.card-staff { border-top-color: #d9534f; }
.card-staff .role-icon { color: #d9534f; }
/*----------------------------------------------------------------------------------------*/
.btn-custom 
{
    /*====================================================================================*/
    border-radius: 50px; /* Pill shaped buttons */
    padding: 10px 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
/* 4. Info Section (Guidelines) */
/*----------------------------------------------------------------------------------------*/
.info-section 
{
    /*====================================================================================*/
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    margin-top: 20px;
    margin-bottom: 50px;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
.section-heading 
{
    /*====================================================================================*/
    font-weight: 600;
    color: #001f4d;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
.list-custom li 
{
    /*====================================================================================*/
    margin-bottom: 10px;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
/* 5. Footer */
/*----------------------------------------------------------------------------------------*/
.footer-dark 
{
    /*====================================================================================*/
    padding: 60px 0;
    color: #f0f9ff;
    background-color: #001f4d;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
.footer-dark h3 
{
    /*====================================================================================*/
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 20px;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
.footer-dark ul a 
{
    /*====================================================================================*/
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: color 0.2s;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
.footer-dark ul a:hover 
{
    /*====================================================================================*/
    color: #fff;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
.social-icons a 
{
    /*====================================================================================*/
    font-size: 24px;
    margin-right: 15px;
    color: #fff;
    opacity: 0.7;
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/
.social-icons a:hover { opacity: 1; }
/*----------------------------------------------------------------------------------------*/
/* Utility */
/*----------------------------------------------------------------------------------------*/
.no-highlight { user-select: none; }
.watermark 
{ 
    /*====================================================================================*/
    background-image: url('images/DMSF_Seal.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: 500px; 
    /*====================================================================================*/
    /* We use a pseudo-element overlay in body to fade this, but strictly via CSS logic here to keep it simple */
    /*====================================================================================*/
}
/*----------------------------------------------------------------------------------------*/