<style>
@import url("https://fonts.googleapis.com/css?family=Manjari");
    /* Custom CSS styles */
    body {
      /*font-family: Arial, sans-serif;*/
      font-family: Manjari;
	  font-size:18px;
      margin: 0;
      padding: 0;
    }

	 header {
      background-color: #f5f5f5;
      /*padding: 20px;
      text-align: center;*/
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 100;
    }
	/*
	@media (max-width: 768px) {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
  }
}*/


    .logo {
      /*max-width: 456px;*/
      max-width: 100%;
	  height:auto;
	  align:left;
	 }
	
	.am {
		max-width:100px;
	}
	
	.aud {
		max-width:120px;
	}

	
	


	
.menu {
  display: none; /* Hide the menu by default */
}

.menu-toggle {
  display: none; /* Hide the checkbox */
}



.menu-icon {
  display: none; /* Hide the hamburger icon by default */
  cursor: pointer;
  display: inline-block;
}

.menu-items {
  list-style: none;
  display:none;
}

nav {
	display:none;
}

/* Show the menu only on screens with a maximum width of 768 pixels */
@media (max-width: 768px) {
  
  .menu {
   display:block;
  }
  
  .menu-icon input[type="checkbox"] {
    display: none; /* Hide the checkbox */
  }

  .menu-icon::before {
    content: "\2630"; /* Use the hamburger icon unicode */
    /* Additional styles for the hamburger icon */
	  /* Set the icon size */
  font-size: 24px;
  
  /* Add padding or margin to adjust spacing */
  padding: 5px;
  
  /* Apply background color and border
  background-color: #ffffff;
  border: 1px solid #000000; */
  
  /* Add border-radius for rounded corners 
  border-radius: 50%;*/
  
  /* Add box-shadow for depth and dimension */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  /* Add transition for smooth animation */
  transition: all 0.3s ease;
  }
  
  .menu-icon:hover {
  /* Add hover effects */
  background-color: #e0e0e0;
}
  
  .menu-items {
    display: none;
  }
  
  .menu-items a{
	font-weight:bold;
}

	.menu-items li{
	padding-bottom:20px;
  }
  
  #menu-toggle:checked ~ .menu-items {
    display: block;
  }
}


/* Show the original menu for screens with a minimum width of 769 pixels */
@media (min-width: 769px) {
  .menu {
    display: none;
  }
  
  /* Add any additional styles for your original menu */

    nav {
		display:block;
      margin-top: 20px;
	  margin-right: 20px;
	  float:right;
    }

    nav ul {
      list-style: none;
      display: flex;
      justify-content:right;
    }

    nav ul li {
      margin-right: 20px;
    }

	nav a{
		font-weight:bold;
	}

}



	
	h1 {
		font-size:40px;
	}

	h2 {
		color:#ffff;
		font-size:30px;
	}
	
	h3 {
		color:#2e7b6c;
		padding:0;
		margin:0;
	}

	h4 {
		font-size:x-large;
		padding-top:0;
		margin-top:0;
	}

	.greentext {
		color:#2e7b6c;
	}

    .banner {
      max-width: 100%;
      height: auto;
    }
	
	p {
		line-height:1.6;
	}
	
	.intro {
		font-size:23px;
		text-align:left;
	}

    section {
	padding-left: 40px;
      padding-right: 40px;
      padding-top: 40px;
      text-align: center;
      margin-top: 60px; /* Add margin to the section to account for the fixed header */
	  scroll-margin-top: 60px; /* Add scroll margin to prevent header overlap */
    }   

@media (max-width: 768px) {	
	
	.banner{
	max-width:100%;
      margin-top: 40px; /* Add margin to the section to account for the fixed header */
	  scroll-margin-top: 60px; /* Add scroll margin to prevent header overlap */
	}

	.about_us {
	padding-left: 14px;
      padding-right: 14px;
      /*padding-top: 40px;*/
      text-align: center;
      margin-top: 40px; /* Add margin to the section to account for the fixed header */
	  scroll-margin-top: 40px; /* Add scroll margin to prevent header overlap */
    }
}
	
	.container {
		max-width:100%;
		padding-left:10%;
		padding-right:10%;
	}
	
	.greenbg{
		background-color:#7dd1cb;
	}
	
	 .grad {
		background-color:#7dd1cb;
		/*background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);*/
		background-image: linear-gradient(150deg, #497673,#049b85,#0a96b6,#3b78bc,#5f3c63);
		}
	.border-grad {
 	 background: linear-gradient(white, white) padding-box,
              linear-gradient(150deg, #497673,#049b85,#0a96b6,#3b78bc,#5f3c63) border-box;
 	 border-radius: 50em;
 	 border: 4px solid transparent;
	}
		
		

.ads-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 20px;
    }

    .ad {
      flex-basis: 35%; /* Adjust the width as needed */
      /*background-color: #f9f9f9;*/
      background-color: #ffff;
      padding: 20px;
      border-radius: 8px;
	  font-size:20px;
    }

.ad2 {
      flex-basis: 35%; /* Adjust the width as needed */
      /*background-color: #f9f9f9;
      background-color: #ffff;*/
      padding: 20px;
      /*Uborder-radius: 8px;*/
	  font-size:20px;
	
  background: linear-gradient(white, white) padding-box,
  		linear-gradient(to right, #3b78bc, darkblue) border-box;
  		/*linear-gradient(to right, #0a96b6, #3b78bc) border-box;
  		              linear-gradient(to right, darkblue, darkorchid) border-box;*/
  border-radius: 16px;
  border: 10px solid transparent;
}    

.ad3 {
      flex-basis: 35%; /* Adjust the width as needed */
      /*background-color: #f9f9f9;
      background-color: #ffff;*/
      padding: 20px;
      /*Uborder-radius: 8px;*/
	  font-size:20px;
	
  background: linear-gradient(white, white) padding-box,
  		/*linear-gradient(150deg, #3b78bc, #5f3c63) border-box;*/
  		              linear-gradient(to right, darkblue, darkorchid) border-box;
  border-radius: 16px;
  border: 10px solid transparent;
} 
/*
    .ad {
      margin-bottom: 20px;
	  /*background-color:transparent;
	  background: rgba(255, 255, 255, 0.3);
	  padding-left:5%;
	  padding-right:5%;
	  max-width:40%;
	  display:block;*/
	  /*float:left;
    }*/
	
	

	
	.coverart {
		max-width:100%;
	}	
	
	.large_icon {
		max-width:200px;
	}
	
	.btn {
		padding: 10px 20px;
      background-color: #3366cc;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
	 }
	 
	 .books {
		max-width:100%;
		text-align:center;
		padding-left:10%;
		padding-right:10%;
		clear:both;
	 }
	 
	 .new_line {
	 float:left;
	 }

  form {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #e8e8e8;
      padding: 20px;
      border-radius: 8px;
    }



    input[type="email"] {
      padding: 10px;
      border: none;
      border-radius: 4px;
      margin-right: 10px;
    }    
	
	select {
      padding: 10px;
	  background-color:#ffffff;
      border: none;
      border-radius: 4px;
      margin-right: 10px;
    }

    input[type="submit"] {
      padding: 10px 20px;
      background-color: #3366cc;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    input[type="submit"]:hover {
      background-color: #225599;
    }
	
	
	.col-aa-3 {
		flex-basis: 25%; /* Adjust the width as needed */
      /*background-color: #f9f9f9;
      background-color: #ffff;*/
      padding: 10px;
      /*border-radius: 8px;*/
	  font-size:20px;
	}
	
		.col-aa-8 {
		flex-basis: 53%; /* Adjust the width as needed */
		/*background-color: #f9f9f9;
      background-color: #ffff;*/
      padding: 10px;
      /*border-radius: 8px;*/
	  font-size:20px;
	}
	
			.col-aa-12 {
		flex-basis: 80%; /* Adjust the width as needed */
		/*background-color: #f9f9f9;
      background-color: #ffff;*/
      padding: 10px;
      /*border-radius: 8px;*/
	  font-size:20px;
	}
	
	
	.col-aa-2 {
		flex-basis: 10%; /* Adjust the width as needed */
		/*background-color: #f9f9f9;
      background-color: #ffff;*/
      padding: 10px;
      /*border-radius: 8px;*/
	  font-size:20px;
	}
	
	.width_fill{
		width:100%;
	}
	
	.disp_block{
			display: block;
	}
	
	
	
	.form-control {
		padding: 10px;
      border: none;
      border-radius: 4px;
      margin-right: 10px;
	}
  </style>
  
