@charset "utf-8";
/* CSS Document */


	@font-face {
    font-family: 'otomanopee_oneregular';
    src: url("Fonts/OtomanopeeOne-Regular.ttf") format('woff2');
    font-weight: normal;
    font-style: normal;

	}

body {
	overflow: hidden;
}

#logoScreen,
#LandingScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

#LandingScreen {
    z-index: 1; 
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-image: url("Pics/bg.png");
  	background-repeat: no-repeat;
	background-size: cover;
	/* background-position: center;	*/
}


#logoScreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    background-color: white;
}




.logocontainer {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#logogreenoval {
	width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
	transform-origin: bottom center;
 
}

#mainlogo {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
 
}

#zoonegara {
	position: absolute;
    top: 52%;
}

.section {
  	opacity: 1;
  	transition: opacity 0.6s ease-in-out;
}

.section.fade-out {
  	opacity: 0;
  	pointer-events: none;
}

.section.fade-in {
  	opacity: 1;
  	pointer-events: auto;
}

.hidden {
  	display: none;
    opacity: 0;
    pointer-events: none; 
}


.section.hidden {
  	display: none;
}

.landingscreen {
    opacity: 0;
	position: relative;
    display: inline-block;
    animation: fade-in 2s ease-in-out forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



.loginpage {
	animation: fade-in 1s ease-in-out forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.btnexplore {
	position: absolute;
  	top: 62%;
  	left: 50%;
 	transform: translate(-50%, 191%);
	border-radius: 50px;
	width: 220px;
	padding: 5px 5px 5px 5px;
	font-family: 'Signika Negative';
	font-weight: medium;
	font-size: 20px;
	background-color: #484A2C;
	color: #DAD9CA;
}

.btnexplore:active{
	position: absolute;
  	top: 62%;
  	left: 50%;
 	transform: translate(-50%, 191%);
	border-radius: 50px;
	width: 220px;
	padding: 5px 5px 5px 5px;
	font-family: 'Signika Negative';
	font-weight: medium;
	font-size: 20px;
	background-color: #DAD9CA;
	color: #484A2C;
	border-color: #484A2C;
}


.btnmainlogin {
	position: absolute;
  	top: 69%;
  	left: 50%;
	width: 120px;
 	transform: translate(-50%, 330%);
  	padding: 5px 5px 5px 5px;
	border-radius: 50px;
	font-family: 'Signika Negative';
	font-weight: medium;
	font-size: 20px;
	background-color: #76805B;
	color: #DAD9CA;
}

.btnmainlogin:active {
	position: absolute;
  	top: 69%;
  	left: 50%;
	width: 120px;
 	transform: translate(-50%, 330%);
  	padding: 5px 5px 5px 5px;
	border-radius: 50px;
	font-family: 'Signika Negative';
	font-weight: medium;
	font-size: 20px;
	background-color: #DAD9CA;
	color: #76805B;
}


/*login page*/

.loginpage {
	
  	position: relative;
  	display: inline-block;

}

.logintext {
	display: flex;
    justify-content: space-between;
	text-align: center;
	
}

.loginpage h2 {
	text-align: left;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 30%;
  	left: 24%;
	font-family: 'Signika Negative';
	font-weight: 600;
	color: #122E26;
}

.loginpage h5 {
	text-align: right;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 34%;
  	left: 39%;
	font-family: 'Signika Negative';
	font-weight: bold;
	color: #76805B;
}

.input-group-text {
	background-color: #DAD9CA;
	border-radius: 17px;
	font-family: 'Signika Negative';
	font-weight: bold;
	padding: 2px;
	margin-right: 5px;
	width: 293px;
	display: flex;
  	align-items: center;
	justify-content: space-between;
}


.form-group1 {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 43%;
  	left: 50%;
	padding: 5px 5px 5px 5px;
	justify-content: center;
	display: flex;
  	align-items: center;
}


.form-group2 {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 51%;
  	left: 50%;
	padding: 5px 5px 5px 5px;
	justify-content: space-between;
	display: flex;
  	align-items: center;
	margin-left: auto;
}


.decreased-opacity {
  	opacity: 0.5;
}


#forgotpassword {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 55%;
  	right: -4%;
	font-family: 'Signika Negative';
  	font-weight: 600;
	opacity: 0.5;
	font-size: 0.9em;
	color: black;
}

.btn-primarylogin {
	position: absolute;
  	top: 63%;
  	left: 72%;
	width: 120px;
 	transform: translate(-50%, -50%);
  	padding: 5px 5px 5px 5px;
	border-radius: 50px;
	font-family: 'Signika Negative';
	font-weight: medium;
	font-size: 18px;
	background-color: #484A2C;
	color: #DAD9CA;
}

.btn-primarylogin:active {
	position: absolute;
  	top: 63%;
  	left: 72%;
	width: 120px;
 	transform: translate(-50%, -50%);
  	padding: 5px 5px 5px 5px;
	border-radius: 50px;
	font-family: 'Signika Negative';
	font-weight: medium;
	font-size: 18px;
	background-color: #DAD9CA;
	color: #484A2C;
	border-color: #484A2C;
}

#donthaveacc {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 74%;
  	right: 24%;
	font-family: 'Signika Negative';
  	font-weight: 600;
	font-size: 1em;
	color: #76805B;
}

#registernow {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 74%;
  	right: 6%;
	font-family: 'Signika Negative';
  	font-weight: 600;
	font-size: 1em;
	color: #B47441;
	text-decoration-line: underline;
}

#registernow:active {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 74%;
  	right: 6%;
	font-family: 'Signika Negative';
  	font-weight: 600;
	font-size: 1em;
	color: #B47441;
	text-decoration-line: none;
}

#email-input {
	background-color: #DAD9CA;
	border-radius: 17px;
	opacity: 50%;
	width: 230px;
}


.placeholder-image {
  	position: absolute;
  	top: 50%;
  	left: 25px;
  	transform: translateY(-50%);
  	pointer-events: none; 
	opacity: 50%;
	
}

#password-input {
	background-color: #DAD9CA;
	border-radius: 17px;
	opacity: 50%;
	width: 155px;
	margin-left: 58px;
	margin-right: 5px;

}

.input-group-text1 {
	background-color: #DAD9CA;
	border-radius: 17px;
	font-family: 'Signika Negative';
	font-weight: bold;
	padding: 2px;
	width: 293px;
	display: flex;
  	align-items: center;
	justify-content: space-between;
	margin-right: 5px;
}

#viewicon {
	margin-right: 15px
}

.input-container {
  	flex: 1;
  	margin-right: 5px;
}




/*signup page*/
#SignupPage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* Ensure the sign-up page is on top */
    display: flex;
    justify-content: center;
    align-items: center;
  } 

.signuppage {
	position: relative;
  	display: inline-block;
	animation: fade-in 1s ease-in-out forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.signuptext {
	display: flex;
    justify-content: space-between;
	text-align: center;
	
}

.signuptext h2 {
	text-align: left;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 30%;
  	left: 42%;
	font-family: 'Signika Negative';
	font-weight: 600;
	color: #122E26;
	font-size: 22pt;
  	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}


.form-group3 {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 37.5%;
  	left: 50%;
	padding: 5px 5px 5px 5px;
	justify-content: center;
	display: flex;
  	align-items: center;
}

.input-group-text2 {
	background-color: #DAD9CA;
	border-radius: 17px;
	font-family: 'Signika Negative';
	font-weight: bold;
	padding: 2px;
	margin-right: 5px;
	width: 293px;
	display: flex;
  	align-items: center;
	justify-content: space-between;
}

#username-input {
	background-color: #DAD9CA;
	border-radius: 17px;
	opacity: 50%;
	width: 230px;
}

.form-group4 {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 44.5%;
  	left: 50%;
	padding: 5px 5px 5px 5px;
	justify-content: center;
	display: flex;
  	align-items: center;
}

.input-group-text3 {
	background-color: #DAD9CA;
	border-radius: 17px;
	font-family: 'Signika Negative';
	font-weight: bold;
	padding: 2px;
	margin-right: 5px;
	width: 293px;
	display: flex;
  	align-items: center;
	justify-content: space-between;
}

#email-input2 {
	background-color: #DAD9CA;
	border-radius: 17px;
	opacity: 50%;
	width: 230px;
}


.form-group5 {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 51.5%;
  	left: 50%;
	padding: 5px 5px 5px 5px;
	justify-content: space-between;
	display: flex;
  	align-items: center;
	margin-left: auto;
}

.input-group-text4 {
	background-color: #DAD9CA;
	border-radius: 17px;
	font-family: 'Signika Negative';
	font-weight: bold;
	padding: 2px;
	width: 293px;
	display: flex;
  	align-items: center;
	justify-content: space-between;
	margin-right: 5px;
}

#password-input2 {
	background-color: #DAD9CA;
	border-radius: 17px;
	opacity: 50%;
	width: 155px;
	margin-left: 58px;
	margin-right: 5px;

}

#viewicon2 {
	margin-right: 15px
}

.form-group6 {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 58.5%;
  	left: 50%;
	padding: 5px 5px 5px 5px;
	justify-content: space-between;
	display: flex;
  	align-items: center;
	margin-left: auto;
}

.input-group-text5 {
	background-color: #DAD9CA;
	border-radius: 17px;
	font-family: 'Signika Negative';
	font-weight: bold;
	padding: 2px;
	width: 293px;
	display: flex;
  	align-items: center;
	justify-content: space-between;
	margin-right: 5px;
}

#password-input3 {
	background-color: #DAD9CA;
	border-radius: 17px;
	opacity: 50%;
	width: 155px;
	margin-left: 58px;
	margin-right: 5px;

}

#viewicon3 {
	margin-right: 15px
}

.btn-primarysignup {
	position: absolute;
  	top: 66%;
  	left: 72%;
	width: 120px;
 	transform: translate(-50%, -50%);
  	padding: 5px 5px 5px 5px;
	border-radius: 50px;
	font-family: 'Signika Negative';
	font-weight: medium;
	font-size: 18px;
	background-color: #484A2C;
	color: #DAD9CA;
}

.btn-primarysignup:active {
	position: absolute;
  	top: 66%;
  	left: 72%;
	width: 120px;
 	transform: translate(-50%, -50%);
  	padding: 5px 5px 5px 5px;
	border-radius: 50px;
	font-family: 'Signika Negative';
	font-weight: medium;
	font-size: 18px;
	background-color:  #DAD9CA;
	color: #484A2C;
	border-color: #484A2C;
}

#haveacc {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 74%;
  	right: 15%;
	font-family: 'Signika Negative';
  	font-weight: 600;
	font-size: 1em;
	color: #76805B;
}

#login {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 74%;
  	right: 17%;
	font-family: 'Signika Negative';
  	font-weight: 600;
	font-size: 1em;
	color: #B47441;
	text-decoration-line: underline;
}

#login:active {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 74%;
  	right: 17%;
	font-family: 'Signika Negative';
  	font-weight: 600;
	font-size: 1em;
	color: #B47441;
	text-decoration-line: none;
}