/* style.css */

/*CSS Reset*/
* {
	margin: 0px;
	padding: 0px;
}

/*Header Styling*/
#top {
        
        font-size: 50px;
    
	color: rgb(202, 114, 42);
    
	text-align:left;
	
	font-family: 'Ubuntu Mono', monospace;
}

#top::before {
	content: '';
	background: url('little.jpg') no-repeat center center/cover;
    filter: blur(10px);
    -webkit-filter: blur(100px);
    
    /* Full height */
    height: 80%; 
    
	width: 70vw;
	height: 100vh;
	position: absolute;
	top: 0px;
	left: 0px;
	margin-right: 45px;
	
	
	z-index: -1;
	opacity: 0.89;
	border: 2px solid black;
	border-bottom-left-radius: 100px;
}



/* Navigation bar styling*/
/*Navbar image styling*/
#navbar img {
	display: block;
	width: 80px;
	height: 80px;
    box-shadow: 2px 5px 5px 1px;
    border-radius: 30px;
	margin: auto;
	margin-bottom: 6px;
}

/*Navbar Functionality*/
#navbar {
	display: flex;
	flex-direction: column;
	background-color: gray;
    
	height: 14vh;
	width: 100vw;
	font-family: 'Ubuntu Mono', monospace;
	margin-top: 10px;
	border: 2px solid black;
	border-radius: 20px;
}

/*Navbar content functionality*/
#navcontent {
	display: flex;
	justify-content: center;
}

/*Navbar content styling*/
ul li {
	list-style: none;
	margin: 8px;
	border-radius: 20px;
}

ul li a {
	padding: 1px;
	color: white;
	text-decoration: none;
	border-radius: 10px;
    width: 20px;
    font-size: 20px;
	font-weight: bold;
}

ul li a:hover {
	background-color: rgb(119, 30, 53);
	border-radius: 10px;
}

/* website background image designing */
#container1 {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100vw;
	height: 63vh;
}

/*Setting the background image using before pseudo selector*/
#container1::before {
	content: '';
	background: url('1.jpg') no-repeat center center/cover;
    filter: blur(8px);
    -webkit-filter: blur(8px);
    
    /* Full height */
    height: 80%; 
    
	width: 100vw;
	height: 59vh;
	position: absolute;
	top: 0px;
	left: 0px;
	font-family: 'Ubuntu Mono', monospace;
	margin-right: 45px;
	font-weight: bold;
	z-index: -1;
	opacity: 0.89;
	border: 2px solid black;
	border-bottom-left-radius: 100px;
}

#row1 {
	color: black;
	font-weight: bold;
	font-size: 2rem;
	text-align: center;
	margin-top: 35px;
}
#bt {
    margin-top: 10px;
    font-size: 20px;
	font-weight: bold;
	font-family: 'Ubuntu Mono', monospace;



}

#log {
	flex-direction: row;
	display: flex;
	justify-content: space-evenly;
}
#loin{
	font-size: 15px;
	font-weight: bold;
	font-family: 'Ubuntu Mono', monospace;
    color:#000000;
	text-align: right;
	justify-content: center;
	margin-right: 10px;
	flex-direction: row;
	margin-top: 0px;
	margin-left: 50px;
    margin-bottom: 20px;
	width: 30vw;
	height: 0vh;
	
	
	
}
#locre{
	
	font-size: 15px;
	font-weight: bold;
	font-family: 'Ubuntu Mono', monospace;
    color:#000000;
	text-align: left;
	justify-content: center;
	margin-right: 30px;
	flex-direction: row;
	margin-top: 0px;
    margin-bottom: 20px;
	width: 30vw;
	height: 0vh;
	
}
/*Button Styling*/
.btn {
	margin-top: 20px;
	border: none;
    width: 300px;
    height: 30px;
	border-radius: 20px;
	background-color: rgb(204, 106, 15);
    box-shadow: 2px 2px 2px 2px;
	font-size: 20px;
	font-weight: bold;
	transition: transform 0.2s ease-in-out;
	font-family: 'Ubuntu Mono', monospace;
}


.btn:hover {
	cursor: pointer;
	background-color: rgb(156, 90, 36);

	transform: scale(1.1);
}

#container3 {
	display: flex;
	justify-content: space-evenly;
}

#row2 {
	width: 24vw;
	height: 21vh;
	box-shadow: 2px 7px 16px 19px;
	margin-top: 51px;
	margin-bottom: 51px;
	display: flex;
    flex-direction: row;
	justify-content: center;
	align-items: flex-end;
	position: relative;
	margin-right: 40px;
	border-radius: 40px;
}

#row2::before {
	content: '';
	background: url('login.png') no-repeat center/cover;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 25vw;
	height: 21vh;
    display: flex;

    /*background: url('arrow.png') no-repeat left/cover;*/
	z-index: -1;
	border-radius: 40px;
	transition: transform 0.2s ease-in-out;
}

#row2:hover{
	opacity: 0.5; /* or any desired opacity value */
	transform: scale(1.1);
}

#row3:hover{
	opacity: 0.5;
	transform: scale(1.1);
}
#row3 {
	position: relative;
	width: 24vw;
	height: 21vh;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	box-shadow: 2px 7px 16px 19px;
	margin-top: 51px;
	margin-bottom: 51px;
	transition: transform 0.2s ease-in-out;
	margin-left: 40px;
	border-radius: 40px;
}

#row3::before {
	content: '';
	background: url('login.png') no-repeat center center/cover;
	position: absolute;
	top: 0px;
	left: 0px;
   
	width: 25vw;
	height: 20vh;
	z-index: -1;
	border-radius: 40px;
    
    

}




#top3 {
	text-align: center;
	color: red;
	font-family: 'Ubuntu Mono', monospace;
}

.containerlog {
	position: relative;
	
	background-color: #f2f2f2;
	
  }
  .modal {
	display: none; 
	/* Hidden by default */
	
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: scroll; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
  

  }
  
  
  .model-content {

	background: url('download.jpg') no-repeat center center/cover;
	
	
   border-radius: 30px;
    margin: 0% auto 10% auto; /* 5% from the top, 15% from the bottom and centered */
	border: 1px solid #888;
	padding-top: 40px;
padding-bottom: 40px;
	width: 950px;

	

	/* Could be more r less, depending on screen size */
  }
  
  




 
  #id01 {
        
	font-size: 20px;

color: rgb(231, 226, 222);

text-align:center;

font-family: 'Ubuntu Mono', monospace;

}

  
  .heading1{
	text-align: center;

	font-family: 'Ubuntu Mono', monospace;
	font-size: 30px;
	font-weight: bold;
    color: white;
  

  }
  .heading{
	text-align: center;
	margin-top:70px;
	margin-bottom: 0px;
	font-family: 'Ubuntu Mono', monospace;
	font-size: 30px;
	font-weight: bold;
    color: white;
	
  }

  .imgcontainer {
	text-align: center;
	margin: 24px 0 12px 0;
	position: relative;
  }
  img.avatar {
	width: 10%;
	border-radius: 65%;
	
  }
  .close {
	position: absolute;
	left: 25px;
	top: 0;
	color: #faf6f6;
	font-size: 35px;
	font-weight: bold;
	transition: transform 0.3s ease-in-out;
  }
  
  .close:hover,
  .close:focus {
	color: rgb(209, 141, 14);
	cursor: pointer;
	transform: scale(1.2);
  }
  



	.form-shape1{
		justify-content: center;
		margin-bottom: 60px;
		color: beige;
	    margin-left: 75px;
		font-weight: bold;
		
		  
	}


	.form-shape33{
		align-items: center;
		margin-top: 20px;
	border: none;
    width: 255px;
    height: 40px;
	border-radius: 20px;
	background-color: rgb(204, 106, 15);
    box-shadow: 2px 2px 2px 2px;
	font-weight: bold;
	font-size: 20px;
	font-family:  'Ubuntu Mono', monospace;
	margin-bottom: 30px;
		margin-left: 350px;
		transition: transform 0.2s ease-in-out;
	}
	.form-shape33:hover {
		transform: scale(1.1);
		cursor: pointer;
		background-color: rgb(156, 90, 36);
	}



	.form-shape3{
		
		margin-top: 20px;
	border: none;
    width: 255px;
    height: 40px;
	border-radius: 20px;
	background-color: rgb(204, 106, 15);
    box-shadow: 2px 2px 2px 2px;
	font-weight: bold;
	font-size: 20px;
	font-family:  'Ubuntu Mono', monospace;
	margin-bottom: 30px;
	transition: transform 0.2s ease-in-out;
	}
	.form-shape3:hover {
		cursor: pointer;
		background-color: rgb(156, 90, 36);
		transform: scale(1.1);
	}
.form-shape1 input
{
	width:250px;
	height: 40px;
	border-radius: 8px;
	padding: 0px;
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
	z-index: -1;
	box-shadow: 2px 2px 2px 2px;
	align-items: center;
	margin-left: 275px;
    
}
.jayam 
{
	color:rgb(119, 146, 255);
	font-family: 'Ubuntu Mono', monospace;
}
/*#row4 {
	width: 29vw;
	height: 360px;
	border: 2px solid black;
	background: url('a1.jpeg') no-repeat center center/cover;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	border-radius: 15px;
}

#row5 {
	width: 29vw;
	height: 360px;
	border: 2px solid black;
	background: url('a2.jpeg') no-repeat center center/cover;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	border-radius: 15px;
}

#row6 {
	width: 30vw;
	height: 360px;
	border: 2px solid black;
	background: url('a3.jpeg') no-repeat center center/cover;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	border-radius: 15px;
}*/

/*Designing the footer*/
footer {
	text-align: center;
}

/*Designing of Contact Us*/
#ContactUs {
    margin-top: 80px;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: gray;
}

.form-shape input,
.form-shape select,
.form-shape textarea {
	width: 92%;
	padding: 8px;
	border-radius: 5px;
}

/*Changing the color of placeholder*/
::placeholder {
	color: gray;
}

/*Making the webpage responsive using media queries*/
/*@media only screen and (max-width:1131px) {
	#row4 {
		width: 42vw;
	}

	#row5 {
		width: 45vw;
	}

	#row6 {
		margin-top: 20px;
		width: 90vw;
	}
}

/*@media only screen and (min-width:600px) and (max-width:781px) {
	#row4 {
		width: 84vw;
		margin: auto;
		margin-left: 22px;
	}

	#row5 {

		width: 84vw;
		margin: auto;
		margin-top: 20px;
		margin-left: 22px;
	}

	#row6 {
		width: 84vw;
		margin: auto;
		margin-top: 20px;
		margin-left: 22px;
	}
}*/
@media only screen and (max-width: 300px)
{
.model-content{
	display: block;
	align-content: center;
	
}
.modal{
	display: block;
	align-items: center;
	width: 100%;
}
}

@media only screen and (min-height:1000px) {
	#navbar {
		height: 10vh;
	}

	#container1::before {
		height: 39vh;
		
	}

	#container1 {
		height: 44vh;
		
	}
	#top{
		flex-direction: column;
		height: 44vh;
	}
	#log, #loin, #locre
	{
    flex-direction: row;
	display: flex;
	margin-left: 40px;
    
	}
	
}
@media only screen and (max-width: 300px){
.foot{
      margin-top: 100px;
	}
}