/* Importing Google font - Open Sans*/

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family:"Open Sans", sans-serif;
}
body{
	width:100%;
	height:100vh;
	background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url('img/background.jpg');
	background-position:center;
	background-size: cover;
	position:relative;
}
header{
	position:fixed;
	width:100%;
	left:0;
	top:0;
	padding:0 10px; 
}
.navbar{
	display:flex;
	padding:22px 0; 
	align-items:center;
	max-width:1200px;
	margin:0 auto;
	justify-content: space-between;
}
.navbar .logo{
	display: flex;
	gap:10px;
	text-decoration:none;
	align-items:center;
}
.navbar .logo img{
	width:60px;
	
}
.navbar .logo h2{
	color:#fff;
	font-size:1.7rem;
	font-weight:600;
	
}
.navbar .links{
	display:flex;
	list-style:none;
	gap:35px;
}
.navbar .links a{
	color:#fff;
	text-decoration:none;
	font-size:1.1rem;
	font-weight:500;
}
.navbar .links a:hover{
	color:#19e8ff;
}
.navbar .login-btn{
	border:none;
	outline:none;
	color:#275360;
	font-size:1rem;
	font-weight:600;
	padding:10px 18px;
	border-radius: 3px;
	cursor: pointer;
	background: #fff;
}
.blur-bg-overlay{
	position:fixed;
	top:0;
	left:0%;
	width:100%;
	height:100%;
	opacity:0;
	pointer-events:none;
	backdrop-filter: blur(5px);
	transition: 0.1s ease;
}

.show-popup .blur-bg-overlay{
	opacity:1;
	pointer-events: auto;
}

/* form pop up*/

.form-popup{
	position:fixed;
	top:50%;
	left:50%;
	max-width:720px;
	width:100%;
	opacity:0;
	pointer-events:none;
	background:#fff;
	border:2px solid #fff;
	transform:translate(-50%, -100%);
}
.show-popup .form-popup{
	opacity:1;
	pointer-events: auto;
	transform:translate(-50%, -50%);
	transition:transform 0.3s ease, opacity 0.1s;
}


.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
.form-popup .form-box{
	display:flex;
}
.form-popup .close-btn{
	position:absolute;
	top:12px;
	right:12px;
	color:#878484;
	cursor:pointer;
}

.form-box .form-details{
	max-width: 330px;
    width: 100%;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(img/logo.png);
    background-position: center;
    background-size: 65%;
    position: relative;
    background-repeat: no-repeat;


}
.form-box h2{
	text-align:center;
	margin-bottom:30px;
}
.form-box .form-content{
	width:100%;
	padding:35px;
}
form .input-field{
	height:50px;
	width:100%;
	margin-top: 20px;
	position:relative;
}
form .input-field input{
	height:100%;
	width:93%;
	outline:none;
	padding:0 15px;
	font-size:0.95rem;
	border-radius: 3px;
	border: 1px solid #717171;
}

form .input-field input:focus{
	border-color:#00bcd4;
}

form .input-field input:is(:focus, :valid){
	padding:16px 15px 0;
}

form .input-field label{
	position: absolute;
	top:50%;
	left:15px;
	color:#717171;
	pointer-events:none;
	transform: translateY(-50%);
	transition:0.2s ease;
}
.input-field input:is(:focus, :valid) ~ label{
	color: #00bcd4;
	font-size:0.75rem;
	transform: translateY(-120%);
}

.input-field select {
    height: 100%;
    width: 93%;
    outline: none;
    padding: 16px 15px 0;
    font-size: 0.95rem;
    border-radius: 3px;
    border: 1px solid #717171;
    background-color: #fff;
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none; /* For Safari */
    position: relative;
}
.input-field select:focus {
    border-color: #00bcd4;
}
.input-field select:is(:focus, :valid) ~ label {
    color: #00bcd4;
    font-size: 0.75rem;
    transform: translateY(-120%);
}

form button {
	width:93%;
	outline:none;
	border:none;
	font-size:1rem;
	font-weight:600;
	padding:14px 0;
	border-radius:3px;
	margin: 25px 0;
	color:#fff;
	cursor: pointer;
	background:#00bcd4;
}


@media(max-width: 700px){
	.form-popup{
		width:95%;
	}
	.form-box .form-details{
		display:none;
	}
	.form-box .form-content{
		padding:30px 20px;
		
	}
}
/* TEXT BOX */
.text-box{
	width:90%;
	color:#fff;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.text-box h1{
	font-size:62px;
}

.text-box p{
	margin:10px 0 40px;
	font-size:14px;
	color:#fff;
}