/*these are my fonts for my text imported from google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

body{
  background-image: url(../images/background.jpg);
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 overflow-x: hidden;
}


/*style for burger menu starts*/

*, *:before, *:after 
{ box-sizing: border-box; }


/*style for white circular background of menu*/
label .menu {
  position: absolute;
  left: -100px;
  top: -100px;
  z-index: 100;
  width: 200px;
  height: 200px;
  background: #FFF;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;
  
}

/*style for hamburger lines*/
label .hamburger {
  position: absolute;
  top: 135px;
  right: 50px;
  width: 30px;
  height: 3px;
  background: #0086AD;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

label .hamburger:after, label .hamburger:before {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #0086AD;
}

label .hamburger:before { top: -10px; }

label .hamburger:after { bottom: -10px; }

label input { display: none; }

/*style for close button and whitebackground of menu*/
label input:checked + .menu {
  box-shadow: 0 0 0 100vw #FFF,  0 0 0 100vh #FFF;
  border-radius: 0;
  
}

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  
}

label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
  
}

label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
  
}

label input:checked + .menu + ul { opacity: 1; }

/* link style */
label ul {
  font-family: 'Lexend', sans-serif; 
  color:#0086AD;
  font-size: 18pt;
  font-weight: bold;
  letter-spacing: 0.04em;
  z-index: 200;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out;

}

label a {
  margin-bottom: 1em;
  display: block;
  color: #0086AD;
  text-decoration: none;
  
}

/*style for burger menu ends*/

/* style for main content */
.content{
	box-sizing: border-box;
	background-color: white;
	padding: 15px 60px 25px;
	display: block;
	margin: 50px auto;
	width: 100%;
	max-width: 900px;
	height: 100%;
	position: relative;
}



/*style for headers start*/
h1{
	font-family: 'Lexend', sans-serif;
	font-weight: 600;
	color: #0C288C;
	font-size: 24pt;
	letter-spacing: 0.24em;
	text-align: center;
}	

h2{
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	color: #0086AD;
	font-size: 16pt;
	letter-spacing: 0.05em;
	line-height: 0.2em;
	text-align: center;
}	


h3{
	font-family: 'Lexend', sans-serif;
	font-weight: 600;
	color: #ffffff;
	font-size: 14pt;
	letter-spacing: 0.04em;
	text-align: center;
}	
/*style for headers ends*/

/*style for my paragraphs*/
p{
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	color: #0C288C;
	font-size: 11pt;
	line-height: 1.8em;
	letter-spacing: 0.01em;

}

p1{
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	color: #0C288C;
	font-size: 11pt;
	line-height: 1.8em;
	letter-spacing: 0.01em;
	display: none;
}

/*style for video*/
iframe{
 width: 100%;
 max-width: 770px;
 height: 500px;
 position: relative;
 border: 5px solid #0086AD;
 border-radius: 5px;
}  

/*style for footer*/
.footer{
	position: relative;
	background-color: #0C288C;
	height: 60px;
	margin: 50px auto;
	padding: 1px 0px ;
	width: 100%;
	max-width: 900px;
}