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

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
	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;
	
}
		.tabs {			text-align: center;			background-color: #b0e0bb;			width: 100%;			letter-spacing: .75px;					}		.tab {		  overflow: hidden;		  background-color: #b0e0bb;		}		/* Style the buttons that are used to open the tab content */		.tab button {		  background: #27ae60;		  color: #ffffff;		  border: none;		  outline: none;		  cursor: pointer;		  padding: 11px 16px;		  transition: 0.3s;		  margin: .5em;		  letter-spacing: .5px;		  max-width: 24%;		  		}		/* Change background color of buttons on hover */		.tab button:hover {		  background-color: #969696;		}		/* Create an active/current tablink class */		.tab button.active {		  background-color: #008b45;		}		/* Style the tab content */		.tabcontent {		  display: none;		  padding: 6px 12px;		  border: none;		}

.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;
}



.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;
}
/*     FAQ       FAQ       FAQ           FAQ        */	.faq {		background-color: #b6d6fb;		width: 100%;		text-align: center;		padding: .75em;			}		/* Style the buttons that are used to open and close the accordion panel */		.accordion {		  background-color: #eee;		  color: #444;		  cursor: pointer;		  padding: 12px;		  width: 68%;		  max-width: 94%;		  text-align: left;		  border: none;		  outline: none;		  transition: 0.4s;		  margin-bottom: 3px;		}		/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */		.active, .accordion:hover {		}		/* Style the accordion panel. Note: hidden by default */		.panel {		  padding: 0 9px;		  background-color: white;		  display: none;		  overflow: hidden;		  width: 68%;		  margin-left: 16%;		  margin-bottom: 6px;				}				.panel2 {			text-align: left;						font-size: .8rem;			padding: .5em;					}				/*  ARROW TO TOP OF PAGE   */			.top1 {				width: 100%;				text-align: right;				padding: 8px;				background-color: #b6d6fb;				}
/* ===== Footer ===== */
.site-footer {
    background: #2c3e50;
    color: #ffffff;
    padding: 14px 20px;
    text-align: center;
    margin-top: 0;
}