/* ===== Base Styles ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background: #fafafa;
    color: #333;
	letter-spacing: .5px; /* Increases spacing by half a pixel */
}



.bannerTop {
	
	padding: 30px 20px;
    background: #fff;
	background-image: url("./images/bg-lou-3.webp");
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
    text-align: center;
	min-height: 40vh;
	margin-top: 0px;
	
}

.bannerTopContact {
	padding: 30px 20px;
    background: #fff;
	background-image: url("./images/bg-form-01.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
    text-align: center;
	min-height: 65vh;
	max-height: 100vh;
	margin-top: 0px;
	align-items: center;
	
}


.cForm {
	min-width: 42%; 
	max-width: 53%; 
	background-color: #ffffff; 
	opacity: .8; 
	margin-left: 42%; 
	padding: .3em; 
	max-height: 100vh;
	border-radius: 10px;     /* curved border around contact form   */
	padding-bottom: 3em;
		
	
}

.form-group {
	  display: flex;
					/*   flex-wrap: wrap;  Allows wrapping to multiple rows */
	  gap: 15px;
		
	  width: 50%;  /* width of entire form via controling width of rows    */
	  margin-bottom: .3em;



	.form-group label,
	.form-group input {
		flex: 1 1 calc(100% - 15px); /* Forces two elements per row minus gap */
				/*     min-width: 400px;  Forces wrap on smaller screens */

		flex: 1;    /* each takes half width */
	}

}




.formLeft {
	width: 30%;
	min-width: 38%;
	margin-right: 10px;
	text-align: right;

}


.commentBox{
	width: 70%;
	min-width: 60%;
						
}


.captchaSubmit {
	margin-top: 24px;
	width: 60%;
	max-width: 80%;
	padding-left: 8%;

}




.leftRight {
	display: flex;	
	flex-wrap: wrap;
	padding: 18px;
}

/* Desktop layout: side-by-side */
.left {
    flex: 1 1 55%;
    padding: 20px;
	text-align: left;
}

.right {   
    padding: 10px;
}


.leftRight-2 {
	display: flex;	
	flex-wrap: wrap;
	padding: 18px;
}

/* Desktop layout: side-by-side */
.right2 {   
	flex: 1 1 55%;
	text-align: left;
    padding: 10px;
}

.left2 {    
    padding: 20px;
}



.top1 {
	width: 100%;
	text-align: right;
	padding: 8px;
	background-color: #ffffff;	
}


.videos {
	height: 60vh;
	max-height: 100vh;
	align-items: center;
	background-image: url("./images/bg-3816-e.png");
	background-attachment: fixed;
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
	width: 100%;
	text-align: center;
	padding: .5em;
}

.yt {
	padding: .8em;
	max-width: 420px;
}






		/* Mobile layout: stack vertically */
		
		
			@media (min-width: 1000px) {
						
			.videos {
				text-align: center;
				height: 60vh;
				
				display: flex;
				align-items: center;
				justify-content: center; 
				
				padding: .5em;
			
				
			}			
			
			.yt {
				padding: .5em;
				max-width: 420px
			}			
			
		}

		
		
		
			
			@media (min-width: 710px) and (max-width: 1100px) {
					
					.cForm {
						margin-left: 10%;
						min-width: 80%;
					}
					
					.form-group {
						width: 90%;
						min-width: 80%;
						
					}

					.formLeft {
						min-width: 46%;
						margin-right: 4px;							
						
					}
					
					.commentBox{
						width: 70%;
						min-width: 54%;
						
					}


			
				
				.videos {
					
					display: flex;
					align-items: center;
					justify-content: center; 
					
					padding: .5em;
					
					flex-direction: column;
					text-align: center;
					height: 84vh;
					max-height: 98vh;
				}
				
				
				.yt {
					max-height:41vh;
					max-width: 62%;
						
				}				
				
			}




					/* Mobile layout: stack vertically */
					@media (max-width: 710px) {
						
						
						.formLeft {
							min-width: 55%;
							margin-right: 4px;							
							
						}
						
						.commentBox{
							width: 82%;
							min-width: 85%;
							
						}
						
						.leftRight {
							flex-direction: column;
							text-align: center;
						}
						

						.leftRight-2 {
							flex-direction: column-reverse;
							
						}
						
						img {
						max-width: 300px; /* set your desired max width */
						}
						
						
						.videos {

							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center; 

							padding-top: 12px;
							padding-bottom: 12px;
							text-align: center;
							height: 78vh;
							max-height: 100vh;
						}
						
						
						.yt {
							max-height:32vh;
							max-width: 82%;
							
						}
						
						
						
						
						
						.cForm {
							max-width: 94%;
							min-width: 83%;
							margin: 0; 
							padding: .25em;
							text-align: center;
							
						}
						
					}








/* ===== Header + Navigation ===== */
.site-header {
    background-color: #ffffff;
	background-image: url("./images/bg-logo-03.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
    padding: 10px 0px 0px 0px;
	margin: 0;
    text-align: center;
}

.site-header .logo {
    font-size: 1rem;
}

.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.main-nav li {
    margin: 0 10px;
}

.main-nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 6px 10px;
}

.main-nav a:hover {
    background: #228b22;
    border-radius: 4px;
}

/* ===== Hero Section ===== */
.hero {
    padding: 40px 20px;
    text-align: center;
    background-color: #ffffff;
}

.hero h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.hero p {
    margin-bottom: 15px;
}

.hero .btn {
    display: inline-block;
    margin: 6px;
    padding: 10px 18px;
    background: #27ae60;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}

.hero .btn:hover {
    background: #228b22;
}

/* ===== Info & Newsletter ===== */

.info  {
    padding: 30px 20px;
    background: #fff;
    text-align: center;
	background-image: url("./images/bg-02.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


.info2 {
    padding: 20px;
	padding-top: 1em;
    background: #fff;
    text-align: center;
}




.newsletter {
    padding: 20px;
	padding-bottom: 30px;
    background: #e0e0e0;
    text-align: center;
}

.newsletter form {
    margin-top: 20px;
	margin-bottom: 0;
}

.newsletter input[type="email"] {
    padding: 8px;
    width: 240px;
    margin-right: 8px;
}

.newsletter button {
    padding: 8px 14px;
    background: #27ae60;
    color: #fff;
    border: none;
    cursor: pointer;
}

.newsletter button:hover {
    background: #ededed;
}

/* ===== Footer ===== */
.site-footer {
    background: #2c3e50;
    color: #fff;
    padding: 14px 20px;
    text-align: center;
    margin-top: 0;
}

.site-footer a {
    color: #fff;
    text-decoration: underline;
}