*{
	margin: 0;
	padding:0;
	/*font-family: 'Poppins', sans-serif;*/
	font-family: "Comfortaa", sans-serif;
	box-sizing: border-box;
}
html{
	scroll-behavior: smooth;
	font-size: 62.5%;
}

body{
	background-color: #1c85a1;
	background-size: cover;
	background-attachment: fixed;

}


.container{
	width: 100%;
	max-height: 25vh;
	background: #eee;
	/*background: linear-gradient(rgba(0, 0, 0,0.0),rgba(0, 0, 0,0.0)),url(images/white.jpg);*/
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	filter: drop-shadow(0px 1px 10px #2f2f2f);	
	position: sticky;
	top: 0;
}


.navbar{
	width:95%;
	margin: auto;
	padding: 1.8rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap:wrap;
	/*z-index: 5;*/
}

.navbar .navleft{
	display: flex;
	justify-content: space-around;
}

.navbar .logo{

	width:	12rem;
	height: 12rem;
	cursor: pointer;
	transition: 0.5s;
	color: #646548;
	border-radius: 50%;
}

.logo:hover{
	transform: scale(105%);
	filter: brightness(300%);
	filter: blur(50);
	filter: drop-shadow(10px 10px 7px #3f3f3f);	
}

.navbar .textlogo{

	width:	25rem;
	cursor: pointer;
	transition: 0.5s;
}

.textlogo:hover{
	transform: scale(105%);
	filter: brightness(300%);
	filter: blur(50);
	filter: drop-shadow(10px 10px 7px #3f3f3f);	
}

.navbar ul li{
	list-style: none;
	display: inline-block;
	margin: 0 1.5rem;
	position: relative;

}

.navbar ul li a{
	text-decoration: none;
	color: #3f3f3f;
	text-transform: uppercase;
	font-size: 1.5rem;
	transition: 0.3s ease;
}

.navbar ul li a:hover{
	font-size: 1.6rem;
	font-weight: bold;
}

.navbar ul li::after{
	content: '';
	height: 3px;
	width: 0;
	background: #1c85a1;
	position: absolute;
	left: 0;
	bottom: -8px;
	transition: 0.5s;


}

.navbar ul li:hover::after{
	width: 100%;
}

.navbar i{
  color: #1c85a1;
  font-size: 2.2rem;
  cursor: pointer;
  display: none;
  z-index: 4;
}

input[type="checkbox"]{
  display: none;
}


.languagebox{
	position: fixed;
	bottom: 0;
	width:100%;
	height: auto;
	padding: 1rem;
	margin: 2rem auto;
	text-align: center;
	z-index: 1;
	
}

.content{
	width: 100%;
	margin: 7rem auto;
	text-align: center;

}

.content .title h2{
	margin: 3rem auto;
	font-size: 2.6rem;
	color: #fff;
	text-transform: uppercase;
	

}

.content .title p{
	margin: 3rem auto;
	font-size: 2.2rem;
	color: #ddd;
}


.content .description{
	width: 95%;
	background-color: #eee;
	margin: 7rem auto;
	padding: 3rem;
	color: #2f2f2f;
	font-size: 2rem;

}

.imgcontainer{
	width: 100%;
	margin: 5rem auto;
	height: 40rem;
	background-color: #eee;
	background: linear-gradient(rgba(0, 0, 0,0.6),rgba(0, 0, 0,0.6)),url(images/background.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	filter: drop-shadow(0px 1px 10px #2f2f2f);	
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	padding: 20px;
}
.imgcontainer h2{
	font-size: 2.5rem;
	color: #1c85a1;

	letter-spacing: 0.2rem;
	word-spacing: 0.4rem;
	line-height: 6rem;
	font-weight: normal;
}


.imagebox{
	width: 95%;
	height: 30rem;
	margin: 1rem auto;
	background: linear-gradient(rgba(0, 0, 0,0.6),rgba(0, 0, 0,0.6)),url(images/prayer.jpeg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	display: flex;
	align-items:flex-end;
	text-align: center;
	justify-content: center;
}

.imagebox h2{
	font-size: 2rem;
	color: #eee;
	letter-spacing: 0.17rem;
	word-spacing: 0.2rem;
	line-height: 3rem;
	font-weight: normal;
}

.prayer_container{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	margin-top: 2rem;
	
}

.col2{
	width: 45%;
}


hr{
	margin: 2rem auto;
}

.pope{
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
}
.prayer_container img{
	width: 50%;
	height: 80%;
	object-fit: cover;	
	border-radius: 50%;
	transition: 0.6s ease;
	cursor: pointer;
}

.prayer_container img:hover{
	transform: scale(105%);
	filter: brightness(300%);
	filter: blur(50);
	filter: drop-shadow(10px 10px 7px #3f3f3f);
	
}

.bluetext{
	margin: 5rem;
	color: #1c85a1;
	font-size: 3rem;
	word-spacing: 0.3rem;
	

}

.greyboldtext{
	margin: 4rem;
	color: #3f3f3f;
	font-size: 3.4rem;
	word-spacing: 0.3rem;
	letter-spacing:0.2rem;

}

.creamtext{
	margin-top: 6rem;
	color: #2f2f2f;
	font-size: 2.6rem;
	word-spacing: 0.3rem;
	
}

.description p{
	font-family: "Open Sans", sans-serif;
 	font-optical-sizing: auto;
	margin: 2rem 0;
	color: #1f1f1f;
	font-size: 2.2rem;
	word-spacing: 0.3rem;
	text-align: justify;
	line-height: 4rem;
	letter-spacing: 0.05rem;
}

.cream{
	color: #ca7a4f;
}

.weblink{
	cursor: pointer;
	font-size: 3rem;
}

.weblink a{
	text-decoration: none;
	color: #009688;
}




/*      --------------------------------*/

/* -----------------------mobile----------------------------------*/
/* ---------------media queries-----------------*/

@media screen and (max-width: 480px) {

		.html{
			font-size: 35%;
		}

		

		.weblink{
			font-size: 1.6rem;
		}

		.container{
			max-height: 20vh;
			
			
		}
		.navbar{
			padding-top: 0.8rem;
			align-items: center;
			justify-content: space-around;			
		}

		.navleft{
			align-items: center;
		}
		.navbar .logo{
			width:	8rem;
			height: 8rem;
		}

		.navbar .textlogo{
			width:	17rem;
		}

		.navbar i{
		  display: block;
		}

		#click:checked ~ .menu-btn i:before{
		    content: "\f00d";
		  }

		.navbar ul{
		    position: fixed;
		    top: 15vh;
		    padding-top: 1rem;
		    left: -100%;
		    background: #eee;
		    height: 100vh;
		    width: 100%;
		    text-align: center;
		    display: block;

		    transition: all 0.3s ease;
		  }

		#click:checked ~ ul{
		    left: 0;
		  }		

		.navbar ul li{
		    width: 100%;
		    margin: 1.3rem 0;

		  }
		  .navbar ul li a{
		    width: 100%;
		    margin-left: -100%;
		    padding: 1rem 0;
		    display: block;
		    font-size: 1.6rem;

		    transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		  }
		  #click:checked ~ ul li a{
		    margin-left: 0px;
		  }


		.navbar ul li:hover::after{

			width: 0%;
		}

		.navbar ul li a:hover{
			background:#1c85a1;
			font-weight: bold;
			color: #eee;

		}

		.content{
			margin: 4rem auto;
			
		}

		.content .title h2{
			margin: 2rem auto;
			font-size: 1.8rem;
		}

		.content .title p{
			margin: 2rem auto;
			font-size: 1.2rem;
		}

		.content .imgcontainer{
			margin: 3rem auto;
			height: 30rem;
		}

		.imgcontainer h2{
			font-size: 1.6rem;
			word-spacing: 2px;
			letter-spacing: 1.2px;
		}

		.imagebox h2{
			font-size: 1.5rem;
			letter-spacing: 0.13rem;
			word-spacing: 0.15rem;
			line-height: 2.1rem;
			
		}

		.content .description{
			width: 100%;
			margin: 3rem auto;
			padding: 1.8rem;
			font-size: 1.5rem;
		}

		.bluetext{
			margin: 4rem;
			font-size: 1.8rem;
			word-spacing: 0.04rem;
			

		}
		.col2{
				width: 100%;
		}

		.prayer_container img{
			width: 60%;
			height: 60%;
			
		}

		.greyboldtext{
			margin: 4rem 0;
			font-size: 2rem;
			word-spacing: 0.04rem;
			letter-spacing: 0.02rem;
		}

		.creamtext{
			margin-top: 5rem;
			color: #009688;
			font-size: 1.6rem;
			word-spacing: 0.04rem;
			letter-spacing:0.02rem;
		}

		.description p{
			margin: 1.3rem 0;
			font-size: 1.5rem;
			word-spacing: 0.04rem;
			line-height: 3rem;

		}





}