/*==================================================
GLOBAL.CSS
VoiceOfMohan LMS
==================================================*/


/*==================================================
1. RESET
==================================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size:16px;
line-height:1.6;
background:#F5F7FA;
color:#1F2937;
}


/*==================================================
2. TYPOGRAPHY
==================================================*/

h1,h2,h3,h4,h5,h6{
color:#0B2A4A;
font-weight:700;
line-height:1.3;
margin-bottom:15px;
}

h1{
font-size:40px;
}

h2{
font-size:32px;
}

h3{
font-size:26px;
}

h4{
font-size:22px;
}

h5{
font-size:18px;
}

h6{
font-size:16px;
}

p{
margin-bottom:18px;
color:#4B5563;
}

a{
color:#0B2A4A;
text-decoration:none;
transition:.25s;
}

a:hover{
color:#17406D;
}


/*==================================================
3. BUTTONS
==================================================*/

.masteriyo-btn,
button,
input[type="submit"]{

background:#0B2A4A;
color:#FFFFFF;
border:none;
border-radius:12px;
padding:14px 24px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:.25s;

}

.masteriyo-btn:hover,
button:hover,
input[type="submit"]:hover{

background:#17406D;
transform:translateY(-2px);

}


/*==================================================
4. INPUTS
==================================================*/

input,
select,
textarea{

width:100%;
padding:14px 16px;
border:1px solid #D6DCE5;
border-radius:12px;
background:#FFFFFF;
font-size:15px;
transition:.25s;

}

input:focus,
select:focus,
textarea:focus{

outline:none;
border-color:#0B2A4A;
box-shadow:0 0 0 4px rgba(11,42,74,.08);

}

::placeholder{
color:#9CA3AF;
}


/*==================================================
5. CARDS
==================================================*/

.masteriyo-card{

background:#FFFFFF;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.06);

}


/*==================================================
6. TABLES
==================================================*/

table{

width:100%;
border-collapse:collapse;

}

table th{

background:#F8FAFC;
padding:14px;
text-align:left;
font-weight:600;

}

table td{

padding:14px;
border-top:1px solid #EEF2F7;

}


/*==================================================
7. ALERTS
==================================================*/

.masteriyo-alert,
.masteriyo-notice,
.masteriyo-error{

padding:16px 20px;
border-radius:12px;
margin-bottom:20px;

}


/*==================================================
8. SPACING
==================================================*/

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}


/*==================================================
9. IMAGES
==================================================*/

img{

max-width:100%;
height:auto;
display:block;

}


/*==================================================
10. RESPONSIVE
==================================================*/

@media(max-width:767px){

body{
font-size:15px;
}

h1{
font-size:30px;
}

h2{
font-size:26px;
}

h3{
font-size:22px;
}

}
body{
    animation:pageFade .3s ease;
}

@keyframes pageFade{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}