/* Necessary Fonts */
@font-face {
	font-family: 'Ethnocentric';
	src: url('fonts/ethnocentric%20rg.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Exo 2';
	src: url('fonts/Exo2-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* Styling for body */
body {
	background: linear-gradient(0deg, #F3F3F3, #F3F3F3), #FFFFFF;
	margin: 0;
}

/* Styling for header section */
header {
	position: relative;
	width: 100%;
	height: 9.444vw;
	left: 0vw;
	top: 0vw;
	background: #E7E7E7;
	box-shadow: 0vw 0.069vw 0vw rgba(0, 0, 0, 0.16), inset 0vw -0.069vw 0vw rgba(255, 255, 255, 0.16);
	height: 9.444vw;
}

#logo-text {
	position: relative;
	left: 0.556vw;
	top: 0.833vw;
	opacity: 0.5;
	font-family: 'Ethnocentric';
	font-weight: 600;
	font-size: 1.111vw;
	text-transform: uppercase;
}

#lang {
	box-sizing: border-box;
	position: absolute;
	height: 1.389vw;
	left: 95vw;
	top: 0.556vw;
	background: #FFFFFF;
	border: none;
	border-radius: 0.278vw;
	font-family: 'Arial';
	font-style: normal;
	font-weight: 400;
	font-size: 0.924vw;
	line-height: 1.042vw;
	cursor: pointer;
	outline: none;
}

#file {
	position: absolute;
	height: 4.444vw;
	left: 41.041vw;
	top: 2.778vw;
}

#header-cont {
	position: absolute;
	height: 3.167vw;
	width: 13.889vw;
	left: 45.11vw;
	top: 4.056vw;
	font-family: 'Arial';
	font-style: normal;
	font-weight: 700;
	font-size: 1.111vw;
	line-height: 1.25vw;
	display: flex;
	flex-direction: column;
	color: #333333;
}

#file-text {
	font-family: Arial;
	font-weight: 400;
	font-size: 0.833vw;
	line-height: 100%;
	color: rgba(119, 119, 119, 1);
}

#bluetext {
	color: rgba(60, 112, 229, 1);
}

#container {
	position: relative;
	width: 31.111vw;
	left: 50%;
	top: 1.111vw;
	background: #F3F3F3;
	border-radius: 0.556vw;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.111vw;
}

.formdiv {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.divtext {
	position: absolute;
	top: 1.11vw;
	width: 21.181vw;
	font-family: 'Arial';
	font-style: normal;
	font-weight: 700;
	font-size: 1.111vw;
	line-height: 1.25vw;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#mobilediv {
	box-sizing: border-box;
	position: absolute;
	height: 3.694vw;
	width: 22.222vw;
	top: 4.778vw;
	background: rgba(239, 239, 239, 0.83);
	border: 0.069vw solid #0172E5;
	box-shadow: 0vw 0.069vw 0vw #FFFFFF, inset 0vw 0.069vw 0.139vw 0.069vw rgba(0, 0, 0, 0.25);
	border-radius: 0.556vw;
}

#flag {
	position: absolute;
	width: 2.083vw;
	height: 1.389vw;
	left: 0.398vw;
	top: 1.042vw;
}

#inital {
	position: absolute;
	height: 1.25vw;
	left: 0.8333vw;
    top: 1.181vw;
	font-family: 'Arial';
	font-style: normal;
	font-weight: 700;
	font-size: 1.25vw;
	line-height: 1.25vw;
	display: flex;
	align-items: center;
	text-align: center;
}

#mob-input {
	position: absolute;
	left: 4.583vw;;
	box-sizing: border-box;
	width: 17.361vw;
	height: 3.694vw;
	background: transparent;
	border: none;
	outline: none;
	text-align: left;
	font-family: 'Arial';
	font-style: normal;
	font-weight: 700;
	font-size: 1.25vw;
	line-height: 1.25vw;
}

#mob-input::placeholder {
	font-family: 'Arial';
	font-style: normal;
	font-weight: 400;
	font-size: 1.222vw;
	line-height: 1.389vw;
	color: #757575;
}

.subsBtn {
	position: absolute;
	top: 9.583vw;
	width: 22.222vw;
	height: 4.167vw;
	background: linear-gradient(180deg, #E8E8E8 0%, #B2B2B2 100%);
	box-shadow: 0vw 0.139vw 0vw #777777, inset 0vw 0.139vw 0vw rgba(255, 255, 255, 0.32);
	border-radius: 0.556vw;
	cursor: pointer;
	font-family: 'Arial';
	font-style: normal;
	font-weight: 700;
	font-size: 1.25vw;
	line-height: 1.458vw;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-transform: uppercase;
	color: #777777;
	border: none;
}

.subsBtn:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

#rate {
	position: absolute;
	top: 14.861vw;
	font-family: 'Arial';
	font-style: normal;
	font-weight: 400;
	font-size: 0.833vw;
	line-height: 0.972vw;
	display: flex;
	align-items: center;
	text-align: center;
	color: #999999;
}

#info-text {
	position: absolute;
	width: 100%;
	top: 20vw;
	font-family: 'Arial';
	font-style: normal;
	font-weight: 400;
	font-size: 0.833vw;
	line-height: 1.042vw;
	color: #999999;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
}

#new-list {
	padding: 0 1.39vw;
}

#otpbox {
	position: absolute;
	display: flex;
	flex-direction: row;
	gap: 1.38vw;
	top: 4.778vw;
}

.otp-input {
	box-sizing: border-box;
	height: 3.694vw;
	width: 3.694vw;
	background: rgba(239, 239, 239, 0.83);
	border: 0.069vw solid #0172E5;
	box-shadow: 0vw 0.069vw 0vw #FFFFFF, inset 0vw 0.069vw 0.139vw 0.069vw rgba(0, 0, 0, 0.25);
	border-radius: 0.556vw;
	outline: none;
	text-align: center;
	font-family: 'Arial';
	font-style: normal;
	font-weight: 700;
	font-size: 1.25vw;
	line-height: 1.25vw;
}

@media screen and (max-width: 431px) {
	header {
		height: 34.87vw;
	}

	#logo-text {
		left: 2.05vw;
		top: 3.08vw;
		font-size: 3.59vw;
	}

	#lang {
		height: 5.13vw;
		left: 81.54vw;
		top: 2.05vw;
		border-radius: 1.03vw;
		font-size: 3.41vw;
		line-height: 3.85vw;
	}

	#file {
		height: 16.41vw;
		left: 16.99vw;
		top: 10.26vw;
	}

	#header-cont {
		height: 11.69vw;
		left: 31.99vw;
		top: 14.97vw;
		font-size: 4.10vw;
		line-height: 4.62vw;
		width: 51.28vw;
	}

	#file-text {
		font-size: 3.08vw;
	}

	#container {
		width: 91.9vw;
		top: 4.10vw;
		border-radius: 2.05vw;
		gap: 4.10vw;
	}

	.divtext {
		width: 78.28vw;
		font-size: 4.10vw;
		line-height: 4.62vw;
	}

	#mobilediv {
		height: 13.64vw;
		width: 82.05vw;
		top: 13.54vw;
		border-radius: 2.05vw;
	}

	#flag {
		width: 7.69vw;
		height: 5.13vw;
		left: 1.47vw;
		top: 3.85vw;
	}

	#inital {
		height: 4.62vw;
		left: 3.85vw;
        top: 4.36vw;
		font-size: 4.62vw;
		line-height: 4.62vw;
	}

	#mob-input {
		left: 17.95vw;
        width: 62.82vw;
		height: 13.64vw;
		font-size: 4.62vw;
		line-height: 4.62vw;
	}

	#mob-input::placeholder {
		font-size: 4.51vw;
		line-height: 5.13vw;
	}

	.subsBtn {
		top: 35.38vw;
		width: 82.05vw;
		height: 15.38vw;
		border-radius: 2.05vw;
		font-size: 4.62vw;
		line-height: 5.38vw;
	}

	#rate {
		top: 54.87vw;
		font-size: 3.08vw;
		line-height: 3.59vw;
	}

	#info-text {
		top: 70.67vw;
		font-size: 3.08vw;
		line-height: 3.85vw;
	}

	#new-list {
		padding: 0 5.13vw;
	}
	
	#otpbox {
		gap: 4.62vw;
		top: 13.54vw;
	}

	.otp-input {
		height: 13.64vw;
		width: 13.64vw;
		border-radius: 2.05vw;
		font-size: 4.62vw;
		line-height: 4.62vw;
	}
}

/* Styling for Operator select Popup */
#otpOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9;
	display: none;
	justify-content: center;
	align-items: center;
}

#operatorDiv {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.389vw;
	isolation: isolate;
	position: relative;
	width: 27.778vw;
	height: auto;
	background: #FFFFFF;
	border: 0.208vw solid #005B11;
	backdrop-filter: blur(17.05px);
	box-shadow: 0vw 0vw 0.94vw #F3FDFF;
	border-radius: 2.431vw;
	padding: 1.389vw;
}

.otp-close {
  	font-size: 1.736vw;
  	font-weight: bold;
	position: absolute;
	width: 1.736vw;
	height: 1.736vw;
	right: 1.042vw;
	top: 1.042vw;
  	cursor: pointer;
  	transition: color 0.2s ease-in-out;
}

.otp-close:hover {
  	color: #ff4d4d;
}

#vertext {
	position: relative;
	width: max-content;
	height: 1.528vw;
	font-family: 'Exo 2';
	font-style: normal;
	font-weight: 700;
	font-size: 1.813vw;
	line-height: 1.528vw;
	letter-spacing: -0.43px;
	display: flex;
	align-items: center;
	text-align: center;	
}

.small-div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0vw;
	gap: 1.042vw;
	width: 17.361vw;
	height: auto;
}

.oprBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 17.361vw;
	height: 3.472vw;
	background: linear-gradient(180deg, #E8E8E8 0%, #B2B2B2 100%);
	box-shadow: 0vw 0.139vw 0vw #777777, inset 0vw 0.139vw 0vw rgba(255, 255, 255, 0.32);
	border-radius: 0.556vw;
	outline: none;
	text-transform: uppercase;
	font-family: 'Arial';
	font-style: normal;
	font-weight: 700;
	font-size: 1.25vw;
	line-height: 1.458vw;
	color: #777777;
	cursor: pointer;
	border: none;
}

@media screen and (max-width: 431px) {
	#operatorDiv {
		width: 89.74vw;
		border: 0.77vw solid #005B11;
    	box-shadow: 0vw 0vw 0.93vw #F3FDFF;
    	border-radius: 5.13vw;
    	padding: 5.13vw;
    	gap: 5.13vw;
	}
	
	.otp-close {
		font-size: 5.13vw;
        width: 5.13vw;
        height: 5.13vw;
        right: 2.56vw;
        top: 2.56vw;
	}
	
	#vertext {
		height: 5.64vw;
		font-size: 6.69vw;
		line-height: 5.64vw;
	}
	
	.small-div {
		gap: 3.85vw;
        width: 64.10vw;
	}
	
	.oprBtn {
		height: 12.5vw;
    	width: 64.10vw;
    	border-radius: 2.05vw;
    	font-size: 4.10vw;
    	line-height: 4.10vw;
	}
}

/* Pulse animation */
.pulse {
	animation: pulse 0.5s infinite ease-in-out alternate;
}

@keyframes pulse {
    from {
        transform: scale(0.9);
    }

    to {
        transform: scale(1);
    }
}

/* Animation for loader */
.loader {
	display: none;
	position: absolute;
    top: 10.1vw;
    box-sizing: border-box;
    width: 3.333vw;
    height: 3.333vw;
    border-radius: 50%;
    border: 0.278vw solid rgba(0,0,0,0.08);
    border-top-color: #1ABD00;
    animation: spin 0.9s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@media screen and (max-width: 431px) {
	.loader {
		top: 37vw;
		width: 12.31vw;
    	height: 12.31vw;
    	border: 1.03vw solid rgba(0,0,0,0.08);
    	border-top-color: #1ABD00;
	}
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.spinner { animation: none; }
}

.popload {
	position: relative;
	top: 0;
}

/* Styling for alert on screen */
.alert {
	position: fixed;
	top: -7vh;
	left: 50%;
	transform: translateX(-50%);
	padding: 1.5vh 1.75vw;
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
	border-radius: 1.17vh;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	font-size: 2.5vh;
	z-index: 10;
	width: auto;
	max-width: 90%;
	text-align: center;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

#alertDiv.show {
	opacity: 1;
}

@media screen and (max-width: 431px) {
	.alert {
		top: -4.5vh;
	}
}