@media only screen and (max-width : 480px)
{
	.login-section{background-position: right!important;}
	.login-heading{padding: 30px 0!important;}
	.login-heading h1{letter-spacing: 2.5px!important; text-shadow: 1px 2px 3px #000!important; font-weight: 400!important; font-size: 25px;}
	.login-section-form{padding: 15px!important; width: 100%!important;}
	.form-heading h3{letter-spacing: 0.5px!important; margin: 25px!important; font-size: 20px;}
	.form-check label{letter-spacing: 0.5px!important; font-size: 14px;}
	.forgot-password a{letter-spacing: 0.5px!important; font-size: 14px;}
	.login-button{margin: 10px 0!important; text-align: center!important;}
	.login-button button{padding: 5px 20px!important; font-size: 13px!important;}
	.footer{margin: 60px 0 0 0!important;}
	.footer p a{color: #000!important;}
	.footer p a:hover{color: #ffffff!important;}
	#id-user{width: 100%;}
	.footer p{font-size: 13px!important; letter-spacing: 0.5px!important; color: #000!important; text-shadow: none!important;}    	
	.input-field-uname{text-align: center;}
	.input-field-uname select{margin-bottom: 15px;}
	.s-p-r-login{padding: 10px!important; font-size: 16px!important; letter-spacing: 0.5px!important;}
	.s-reg{padding: 10px 20px!important; font-size: 16px!important; letter-spacing: 0.5px!important;}
	.slogin{padding: 10px 53px!important; font-size: 16px!important; letter-spacing: 0.5px!important;}
	.mlogin{padding: 10px 35px!important; font-size: 16px!important; letter-spacing: 0.5px!important;}
	.icons i{padding: 13px!important; font-size: 18px!important;}
	#pass-user{width: 100%!important; padding: 15px 20px 15px 40px; font-size: 17px!important;}	
	.next-to-dob{padding: 8px 25px!important; font-size: 17px!important; letter-spacing: 0.5px!important;}
}
body{font-family: 'PT Serif', serif;}
.login-section{background-image: url('https://www.gokhalecollegekolkata.edu.in/images/slider/2023/GMGC.jpg'); height: 100vh; background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover;}
.login-heading{padding: 50px 0;}
.login-heading h1{color: #ffffff; text-transform: capitalize; letter-spacing: 3px; text-shadow: 2px 4px 8px #000; font-weight: 700;}
.login-section-form{padding: 35px; width: 100%; height: 400px;}
.form-heading h3{color: #000; text-align: center; text-transform: capitalize; letter-spacing: 1px; margin: 20px 0; text-shadow: 0.5px 1px 2px rgba(0,0,0,0.4);}
.input-field-uname i{position: absolute; padding: 53px 17px;}
.input-field-uname input:focus{outline: none;}
.input-field-uname #pass-user{margin-top: 30px;}
#pass-user{width: 50%; border: 1px solid #ffffff; background: #ffffff; padding: 15px 20px 15px 40px; letter-spacing: 1px; margin: 0 0 17px; font-size: 20px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); font-weight: 700;}
#id-user{border: 1px solid #ffffff; background: #ffffff; padding: 15px 10px 15px 40px; letter-spacing: 1px; margin: 0 0 17px; font-size: 17px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.2)}
.form-check label{color: #ffffff; text-transform: capitalize; letter-spacing: 1px; cursor: pointer; user-select: none;}
.input-field-uname select{padding: 16px 7px 15px; border: 1px solid #ffffff; box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);}
.input-field-uname select:focus{outline: none;}
.input-field-uname select option{font-size: 20px;}
.forgot-password a{text-transform: capitalize; color: #000; font-size: 19px; letter-spacing: 1px;}
.forgot-password a:hover{text-decoration: none;}
.login-button{margin: 20px 0;}
.footer{margin: 60px 0 0 0;}
.footer p{text-align: center; font-size: 13px; color: #ffffff; letter-spacing: 1px; text-shadow: 0.5px 1px 2px #000; text-transform: capitalize;} 
.footer p a{color: #ffffff;}
.footer p a:hover{color: #ffffff; text-decoration: none;}
.top-margin{margin-top: 25px;}
.s-login-button{margin: 20px 0 0 0;}
.s-login{padding: 12px 40px; color: #ffffff; font-size: 18px; text-transform: capitalize; background: #0099CC; border: 1px solid #0099CC; letter-spacing: 2px; text-shadow: 1px 2px 3px rgba(0,0,0,0.4); border-radius: 3px;}
.s-login:focus{outline: none;}
.s-login:hover{cursor: pointer;}
.icons i{background: #0099CC; padding: 20px 14px 17px; margin-right: 5px; font-size: 20px; color: #ffffff; border-radius: 10px 0 0 10px; box-shadow: 0 0 5px 0 #000;}
.s-login-button a{padding: 13px 25px; color: #ffffff; font-size: 18px; text-transform: capitalize; background: #0099CC; border: 1px solid #0099CC; letter-spacing: 2px; text-shadow: 1px 2px 3px rgba(0,0,0,0.4); border-radius: 3px;}
.s-login-button a:focus{outline: none;}
.s-login-button a:hover{cursor: pointer; text-decoration: none; color: #ffffff;}
.s-p-r-login{padding: 13px 50px; color: #ffffff; font-size: 22px; text-transform: uppercase; background: #0099CC; border: 1px solid #0099CC; letter-spacing: 2px; text-shadow: 1px 2px 3px rgba(0,0,0,0.4); border-radius: 0 7px 7px 0; box-shadow: 0 0 5px 0 rgba(0,0,0,1);}
.s-p-r-login:hover{text-decoration: none; color: #ffffff;}
.s-p-r-login:focus{outline: none;}
.s-reg{padding: 13px 50px; color: #ffffff; font-size: 22px; text-transform: uppercase; background: #0099CC; border: 1px solid #0099CC; letter-spacing: 2px; text-shadow: 1px 2px 3px rgba(0,0,0,0.4); border-radius: 0 7px 7px 0; box-shadow: 0 0 5px 0 rgba(0,0,0,1);}
.s-reg:hover{text-decoration: none; color: #ffffff;}
.s-reg:focus{outline: none;}
.slogin{padding: 13px 118.9px; color: #ffffff; font-size: 22px; text-transform: uppercase; background: #0099CC; border: 1px solid #0099CC; text-shadow: 1px 2px 3px rgba(0,0,0,0.4); border-radius: 0 7px 7px 0; box-shadow: 0 0 5px 0 rgba(0,0,0,1);}
.slogin:hover{text-decoration: none; color: #ffffff;}
.slogin:focus{outline: none;}
.mlogin{padding: 13px 21px; color: #ffffff; font-size: 22px; text-transform: uppercase; background: #0099CC; border: 1px solid #0099CC; letter-spacing: 2px; text-shadow: 1px 2px 3px rgba(0,0,0,0.4); border-radius: 0 7px 7px 0; box-shadow: 0 0 5px 0 rgba(0,0,0,1);}
.mlogin:focus{outline: none;}
.mlogin:hover{cursor: pointer; text-decoration: none; color: #ffffff;}
.xtra-margin{margin-top: 50px;}
.next-to-dob{padding: 12px 35px; font-size: 20px; color: #ffffff; background: #0099CC; border: 1px solid #0099CC; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0.5px 1px 2px #000; font-weight: 700; border-radius: 3px;}
.next-to-dob:hover{text-decoration: none; color: #ffffff;}
.next-to-dob:focus{outline: none;}
.create-space{margin-top: 50px;}