body{
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	font-family: 'Jost', sans-serif;
	background: url("../img/imageback.jpg") no-repeat center/ cover;
}
.main{
	width: 350px;
	height: 500px;
	background: red;
	overflow: hidden;
	background: linear-gradient(to bottom, #009cff, #265f7e, #010165);
	
	border-radius: 10px;
	box-shadow: 5px 20px 50px #000;
}
#chk{
	display: none;
}
.signup{
	position: relative;
	width:100%;
	height: 100%;
}
label{
	color: #fff;
	font-size: 2.3em;
	justify-content: center;
	display: flex;
	margin: 60px;
	font-weight: bold;
	cursor: pointer;
	transition: .5s ease-in-out;
}
input{
	width: 60%;
	height: 20px;
	background: #e0dede;
	justify-content: center;
	display: flex;
	margin: 20px auto;
	padding: 10px;
	border: none;
	outline: none;
	border-radius: 5px;
}
button{
	width: 66%;
	height: 40px;
	margin: 10px auto;
	justify-content: center;
	display: block;
	color: #fff;
	background: #010165;
	font-size: 1em;
	font-weight: bold;
	margin-top: 20px;
	outline: none;
	border: none;
	border-radius: 5px;
	transition: .2s ease-in;
	cursor: pointer;
}
button:hover{
	background: #142A87;
}
.login{
	height: 460px;
	background: #eee;
	border-radius: 60% / 10%;
	transform: translateY(-180px);
	transition: .8s ease-in-out;
}
.login label{
	color: #010165;
	transform: scale(.6);
}

#chk:checked ~ .login{
	transform: translateY(-500px);
}
#chk:checked ~ .login label{
	transform: scale(1);	
}
#chk:checked ~ .signup label{
	transform: scale(.6);
}
.social-icons {
    display: flex;
    justify-content: center;  /* Centers the icons horizontally */
    align-items: center;
    gap: 15px;  /* Space between icons */
    margin-top: 10px;
}

.social-login__icon {
    display: flex;
    align-items: center; /* Center icon vertically */
    justify-content: center; /* Center icon horizontally */
    width: 50px; /* Circle size */
    height: 50px; /* Circle size */
    border-radius: 50%; /* Makes the shape a circle */
    font-size: 24px; /* Icon size */
    text-decoration: none;
    color: white;
    transition: 0.3s ease;
}

/* Ensures Icons Are Properly Aligned */
.social-login__icon::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Background Colors */
.social-login__icon.fa-whatsapp {
    background-color: #25D366;
}

.social-login__icon.fa-facebook {
    background-color: #1877F2;
}

.social-login__icon.fa-instagram {
    background: linear-gradient(45deg, #F77737, #E1306C, #C13584);
}

.social-login__icon.fa-google {
    background-color: #DB4437;
}

/* Hover Effect */
.social-login__icon:hover {
    transform: scale(1.1);
    opacity: 0.8;
}
.contact-info {
    display: flex;
    flex-direction: column; /* Stack items in a column */
    align-items: center; /* Center align */
    gap: 10px;
    margin-top: 20px;
}

.contact-info a {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between icon & text */
    text-decoration: none;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    transition: 0.3s ease;
}

.contact-info a i {
    font-size: 18px;
    color: #ff6b6b; /* Icon color */
}

/* Hover Effect */
.contact-info a:hover {
    color: #ff6b6b;
}