@charset "utf-8";
/* CSS Document */

<style>
#mainwrapper {
	/* Container of all content */
	width: 100%;
	overflow: auto;
	text-align: center;
	margin:0;
} 

/*New Navbar*/

 .navbar {
      overflow: hidden;
      background-color: #FFFFFF;
    }

    .navbar a {
      float: left;
      display: block;
      color: #FFFFFF;
      text-align: center;
      padding: 8px 8px;
      text-decoration: none;
      background-color: #53BAD0; /* Background color for the link */
      font-family: arial;
	  font-size: 16px;
}

    .navbar a:hover {
      background-color: #ddd;
      color: black;
    }

    .navbar a.active {
      background-color: #A04CAF;
      color: white;
    }

    .navbar-container {
      display: flex;
      justify-content: center;	  
    }
.navAdj {
padding-top: 1.2%;		
}
.navAdj_a {
padding-top: 2.2%;
padding-right: .7%;
}
.grid-container {
    display: grid;
    grid-template-columns: 34% 66%; /* Adjust column widths here */
    grid-template-rows: auto;
    grid-gap: 0;
    padding: none;
}
.grid-item {
     /* Semi-transparent white background to improve readability */
    padding: 0px;
    border-radius: 5px;
}


h1 {
	font-size: 33px; 
	font-weight: normal;
}

/*Bottom Videos Grid*/
.grid-v {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Example grid layout */
  grid-gap: 10px;
  justify-content: center; /* Center the grid items horizontally */
  align-items: center; /* Center the grid items vertically */
  }

.grid-item-v {
  max-width: 100%; /* Ensures the grid item doesn't exceed its container */
}

.video-container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 aspect ratio (height / width * 100) */
  }

.video-container iframe {
    position: absolute;
    top: 0;
    left: 10%;
	right: 10%;
    width: 80%;
    height: 80%;
}
   
.column {
    padding-top: 0px;
	padding-left: 25px;
	padding-right: 5px;
    border: 0px solid #ccc;
	font-family: candara;
	font-size: 22px;
	text-align: justify;
    color: #ffffff;
}

.single-column {
    grid-column: 1;
	text-align: center;
}

/*Books Grid*/
.grid-container-a {
   display: grid;
      grid-template-columns: 1fr 1fr; /* Two columns with equal width */
      gap: 35px; /* Gap between columns */
      max-width: 800px; /* Maximum width for responsiveness */
      margin: 0 auto;/* Center the grid container */
	  padding-left:40px;
	  text-align: center;
	  background-color: none;
}

.grid-item-a {
      padding: 20px;
      text-align: center;
	  font-family: arial;
	  background-color: none;
}

.hidden-div-a {
      display: block; /* Set the default display property */
    }
.hidden-div-a {
		  display: none; /* Hide the div at or below 768px width */} 

/*Bottom Navbar*/

 .navbar-a {
      overflow: hidden;
      background-color: #FFFFFF;
    }

    .navbar-a a {
      display: block;
      text-align: center;
      padding: 5px 5px;
      text-decoration: none;
      font-family: arial;
	  font-size: 14px;
	  color:#3B9AB0;
	}
.navbar-container-a {
      display: flex;
      justify-content: center;
    }

.container {
position: relative;
width: 97%; /* Make container responsive */
max-width: 1200px; /* Set max-width if desired */
margin: 0 auto; /* Center container horizontally */
margin-top: 0; 
background-image: url('images/QuotesMobile.png'); 
background-size: 100% auto; background-position: top; background-repeat: no-repeat; 
text-align: center; 
padding-top: 0; 
border: 6px solid #E199E4; 
padding: 0;
border-radius: 75px;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("images/Quotes.png"); /* Replace 'your-image.jpg' with the path to your image */
    background-size: contain; /* Ensure the background image fits within the space */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent background image from repeating */
    z-index: -1; /* Place background behind content */
}

.content {
	padding-top: 7%;
	padding-bottom: 60px;
	padding-left: 5%;
    padding-right: 5%;
    text-align: left;
	font-family: arial;
	font-size: 14px;
    color: #D211D0; /* Set text color for better contrast with background image */
} 
.vidTxt {
	font-family: arial;
	font-weight: bold;
	font-size: 20px;
	color:#3FA4BC;
	line-height: 1.8;
}

a {
	text-decoration: none;
	color:#3FA4BC;
}
.txtSm {
	font-size:16px; text-align:center; font-weight:normal;
	font-family:arial;
	color:#3B9AB0;
}
.auto-resize {
margin-top: -4%;
width: 60%;
height: auto;
}
/*About*/
.auto-resize-c {
 margin-top: 4.3%;   
}
.auto-resize-d {
margin-top: -1.3%;
width: 35%;
height: auto;
}
.auto-resize-e {
margin-top: -1%;	
}
/*Home*/
.auto-resize-f {
margin-top: 1.6%;
}
.auto-resize-g {
margin-top: 4.3%;
width: 17%;
height: auto;
}
/*Media*/
.auto-resize-i {
margin-top: 4.3%;
width: 39%;
height: auto;
}
/*Registration*/
.auto-resize-j {
margin-top: -1.8%;
width: 10%;
height: auto;
}
.auto-resize-k {
margin-top: 0%;
width: 70%;
height: auto;
}
.imgLogo_a {
margin-top: 2%; 
margin-left: 2%;
}

	.txt-mob-b {
		 font-size: 16px;
		 margin-left: 25%;
		 margin-right: 25%;
}

@media (min-width : 769px) and (max-width: 1080px) {
.grid-container {
    grid-template-columns: 32% 68%;
}
.navbar {
      overflow: hidden;
      background-color: #FFFFFF;
	  }
.navbar a {
      float: right;
      display: block;
      color: #FFFFFF;
      text-align: center;
      padding: 3.3px 3.3px;
      text-decoration: none;
	  margin-top: 0px;
      background-color: #53BAD0; /* Background color for the link */
      font-family: arial;
	  font-size: 12.5px;
	  font-weight: normal;
}	
	
.grid-container-a {
      display: grid;
      grid-template-columns: 1fr 1fr; /* Two columns with equal width */
     /*gap: 20px; /* Gap between columns */
      max-width: 100%; /* Maximum width for responsiveness */
      margin: 0 auto; /* Center the grid container */
	  text-align: center;
	  padding-right: 10%;
}
.imgLogo {
width: 95%;
height: auto; 
}	
.imgLogo_a {
width: 93%;
height: auto;
margin-top: 3.3%;
margin-left: 3.3%;
}	
	.navAdj {
padding-top: 2%;	
}
.navAdj_a {
padding-top: 3.5%;
padding-right: 1%;
}
	
	/*About*/
.auto-resize-c {
  width: 45%;
  height: auto;
  margin-top: 4.7%;
}	
	
	/*Joyful Wisdon*/
.auto-resize-d {
width: 40%;
height: auto;
margin-top: -4%;
}	
	
.auto-resize-e {
  width: 90%;
  height: 90%;
  }
	
.auto-resize-f {
  width: 70%;
  height: 70%;
  margin-top: 1%;
  }	
	
.auto-resize-g {
margin-top: 4.65%;
width: 22%;
height: auto;
}	
.auto-resize-h {
  width: 100%;
  height: auto;
  object-fit: cover;   
}
/*Media*/
.auto-resize-i {
margin-top: 4.7%;
width: 48%;
height: auto;
}		
	
/*Registration*/
.auto-resize-j {
margin-top: -5.3%;
width: 13%;
height: auto;
}
.auto-resize-k {
margin-top: 0%;
width: 90%;
height: auto;
}	
}



@media (max-width: 768px) {

	
.hidden-div {
display: none;
} 
	
.hidden-div-a {
      display: inline-block; /* Set the default display property */
    }
	
.grid-item-a img {
       margin: 0 auto; /* Center the grid container */
      /*text-align: center;*/
	  font-family: arial;	
	}
.container {
width: 93%; /* Make container responsive */
padding-top: 10px;
padding-left: 3%;
padding-right: 2%;
border: 3px solid #E199E4;
border-radius: 25px;
}	
	 .txt-mob {
		 font-size: 26px;
	 }
	
	.txt-mob-a {
		 font-size: 16px;
		 margin-left: 1%;
		 margin-right: 1%;
}
	
.txt-mob-b {
		 font-size: 16px;
		 margin-left: 1%;
		 margin-right: 1%;	
	}
	
	/*Books Grid*/
.grid-container-a {
   display: grid;
      grid-template-columns: 1fr; /* Two columns with equal width */
      gap: 20px; /* Gap between columns */
      max-width: 800px; /* Maximum width for responsiveness */
      margin: 0 auto; /* Center the grid container */
	  text-align: center;
	  padding-left: 1%;
	  padding-right: 1%;
}
	
	
	/* Videos Grid Box */
	.grid-v {
    grid-template-columns: 1fr; /* Make the grid stack into one column on screens less than 768px wide */
  }

.grid-item-a {
      padding: 0px;
      text-align: center;
	  font-family: arial;
	  max-width: 100%;
}
.imgLogo {
margin-top: 0px;
width: 140%;
height: auto; 
}
	/*About*/
.imgLogo_a {
padding-top: 3.2%;
padding-left: 3.2%;
width: 135%;
height: auto; 
}	
.auto-resize {
  width: 100%;
  height: 100%;
  object-fit: cover;   
}	
	
  .auto-resize-b {
   max-width:100%;
   text-align: center;
  }
	
	/*About*/
.auto-resize-c {
  width: 75%;
  height: 75%;
  margin-top: 3.6%;
}

/*Joyful Wisdom*/
.auto-resize-d {
  width: 50%;
  height: 50%;
  margin-top: -.18%;
}

	/*Home*/
.auto-resize-f {
  margin-top: -3%;  
}
	/*Projects*/
.auto-resize-g {
margin-top: 3.7%;
width: 22%;
height: auto;
}	
	/*Media*/
/*Bottom Navbar*/
/*Media*/
.auto-resize-i {
margin-top: 3%;
width: 58%;
height: auto;
}
	
/*Registration*/
.auto-resize-j {
margin-top: 0;
width: 20%;
height: auto;
}
.auto-resize-k {
margin-top: 0%;
width: 100%;
height: auto;
}	
 .navbar-a {
      overflow: hidden;
      background-color: #FFFFFF;
    }

    .navbar-a a {
      display: block;
      text-align: center;
      padding: 5px 5px;
      text-decoration: none;
      font-family: arial;
	  font-size: 14px;
	}
.navbar-container-a {
      display: flex;
      justify-content: center;
    }

.qintro	{
	font-size: 15px;	
}
	
	.content {
	 padding: 2%;
	 text-align: left;
}
	
.content p {
	font-family: arial;
	font-size: 13px;
	font-weight: normal;
    color: #A40DA3; /* Set text color for better contrast with background image */
}	
}	
</style>