body{

	font-family: poppins, sans-serif;

}


/*--------------------------------------------------------------
# menu navbar
--------------------------------------------------------------*/

.menu #thinking{

text-align: center;
margin-top: -40px;
font-size: 13px;


}


@media only screen and (max-width:497px){
#thinking{
margin-left: 23px !important;
font-size: 1rem;

}



.main h6{

	text-align: center;
	font-size:23px !important;
}



}



.nav_signup{

font-size: 13px;

color: black;

}


.nav_login{


font-size: 13px;

color: white !important;

background-color: skyblue;

padding: 5px;


}


#signin-form{

  margin-top: 18px;
}



#signin-form p{

  margin-top: 10px;
}









.nav_signup{


border:1px solid none;
border-left:1px solid white;
border-left-color: rgba(192,192,192,1);
padding-left:8px;

}

.menu {

position: relative;
padding: 0px 10px;
width: 100%;
}




.back-button-container {
    position:absolute; /* Fixed position to stay at the top */
    top: 50px;
    left: 0;
    width: 100%;
    padding: 10px; /* Padding around the button */
    z-index: 1000; /* Ensure it's above other content */
}

.back-button {
    text-decoration: none;
    color: #333; /* Text color of the button */
    font-weight: bold;
    padding: 8px 12px;
    border: 1px solid white !important; /* Border style */
    border-radius: 4px; /* Rounded corners */
}

.back-button:hover {
    background-color: #333; /* Background color on hover */
    color: white !important; /* Text color on hover */
}





/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/


.footer{

  margin-top: 80px;
}




.footer h6{

  font-weight: bold;

  font-size: 16px;

  margin-bottom: 10px;
}


.footer p{

  font-size: 13px;
}


.footer{
  padding: 10px 20px;

  background-color: rgba(192,192,192,0.5);
}


.footer img{

width: 140px;

}

.footer button{

  font-size: 13px;

  border:1px solid transparent;

  background-color: rgba(0,0,0,0.6);

  color: white;

  margin-bottom: 8px;


}



/*--------------------------------------------------------------
# main
--------------------------------------------------------------*/
.wrap{
padding: 10px;
	}




/*--------------------------------------------------------------
# main
--------------------------------------------------------------*/

.main

{
	width:70%;
	padding: 10% 10%;
	border:1px solid transparent;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
	margin-top: 50px;



	margin-left: 0;

	margin-right: 0;

	margin: auto;
	

}
@media only screen and (min-width:300px) and (max-width:390px){



.main

{
  width:98% !important;
  padding: 10% 2%;
  border:1px solid transparent;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.6) !important;
  margin-top: 100px;
  

}


  .main p{

  color:skyblue;
  font-weight: bold;
  font-size: 14px;
}



  .main small{

  text-align: center;
  font-size: 14px;
  margin-bottom: 10px;

}


}





@media only screen and (min-width:415px) and (max-width:430px){



.main

{
  width:98%  !important;
  padding: 10% 2%;
  border:1px solid transparent;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.6) !important;
  margin-top: 100px;
  

}

  .main p{

  color:skyblue;
  font-weight: bold;
  font-size: 14px;
}



  .main small{

  text-align: center;
  font-size: 14px;
  margin-bottom: 10px;

}



}







@media only screen and (min-width:400px) and (max-width:414px){


.main

{
  width:95%  !important; 
  padding: 10% 2%;
  border:1px solid transparent;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
  margin-top: 100px;
  

}

  .main p{

  color:skyblue;
  font-weight: bold;
  font-size: 13px;
}



  .main small{

  text-align: center;
  font-size: 14px;
  margin-bottom: 10px;

}


}
















.main p{

	color:skyblue;
	font-weight: bold;
	font-size: 13px;
}


.main p span{

float: right;

}

.main input{

border:1px solid transparent;

box-shadow:0px 0px 3px rgba(0,0,0,0.3);
font-size: 13px;

}


.main select{

border:1px solid transparent;

box-shadow:0px 0px 3px rgba(0,0,0,0.3) !important;
font-size: 13px;

}


.main button{

font-size: 13px;


}

.main h6{

	text-align: center;
	font-weight: bold;
}



#loader{

width:50px;
height:50px;


}






@media only screen and (min-width:430px) and (max-width:767px){

	.main p{

	color:skyblue;
	font-weight: bold;
	font-size: 11px;
}



	.main small{

	text-align: center;
	font-size: 14px;
  margin-bottom: 10px;

}

.main

{
	width:75%;
	padding: 10% 3%;
	border:1px solid transparent;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
	margin-top: 100px;
	

}








.main h6{

	text-align: center;
	font-size:23px !important;
}






}