@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
 text-decoration: none;
list-style: none;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
section{
  padding:1rem ;
}
body{
font-family: tahoma;
font-size: 1.1em;
}
.navbar{
background-color: #0f7cd4;
height: 80px;
width: 100%;
box-shadow: 5px 10px 30px #0f7cd4;
}
label.logo{
color: white;
font-size: 20px;
line-height: 80px;
padding: 0 30px;
font-weight: bold;
}
.navbar ul{
float: right;
margin-right: 20px;
}
.navbar ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
.navbar a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
}
span{
display: none;
}
.side {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
 right: 0%;
float: right;
overflow: hidden;
background-color: #3e65da;
box-shadow: #3e65da 0px 5px 15px;
 padding-top: 60px;
}
.side a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
}
.side .closebtn {
position: absolute;
top: 0;
color: white;
left: -20%;
font-size: 36px;
margin-left: 50px;
}

h1{
font-size: 50px; 
letter-spacing: -1px; 
margin: 10px 0 24px; 
text-align: center; 
}
.row{
display: flex;
justify-content: space-between;
align-items: center;
margin: 100px 0;
}
.col-1{
flex: 2;
position: relative;
margin-left: 50px;
}
.col-1 h2{
font-size: 2rem;
color:#1c3548;
margin:0px 0px 10px 0px;
}
.col-1 p{
font-size: 25px;
color: #707070;
margin: 20px 0 10px;
}
.col-2{
position: relative;
flex: 1;
display: flex;
text-align: center;
}
.col-2  .book{
width: 100%;
height: 100%;
}
input[type=text], input[type=name],textarea {
margin: 5px 0 22px 0;
background: #f1f1f1;
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
 font-weight: 400;
line-height: 1.5;
color: black;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
}

button {
  background-color: #219e43;
 color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
 cursor: pointer;
 font-size: 13px;
}
button:hover {
outline: 0;
box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%)
}

form {
width: 500px;
margin: auto;
max-width: 100%;
}
			

footer {
    background: #3e65da;
    padding: 20px;
    color: white;
    text-align: center;
}
@media only screen and (max-width: 700px){
span{
display: block;
font-size: 25px;
cursor: pointer;
 float: right;
 color: white;
 position: absolute;
top: 3%;
right: 2%;
}
.navbar a{
display: none;
}



@media only screen and (max-width: 700px){
section{
 padding:1rem ;
}
.row{
flex-direction: column-reverse;
margin: 50px 0;
}
.col-2{
flex: 1;
margin-bottom: 50px;
}
.col-2 .book{
width: 100%;
}
.content1{
 position: relative;
margin: 130px auto;
text-align: center;
padding: 0 20px;
}
.content1 .text{
font-size: 2.5rem;
 font-weight: 600;
color: #202020;
}
		
.content1 .p{
font-size: 2.1875rem;
font-weight: 600;
color: #202020;
}
button{
width: 50%;
}

}