/* Global Body Styling */
/* main page */

/* end main page styling */

body {
    background-color: #000; /* Black background for the page */
    color: #fff; /* White text for contrast */
    font-size: 16px;
	margin: 0;
    position: relative;
	min-height: 100vh; /* Ensures the body spans the full viewport height */
   /* padding-bottom: 60px;  20px Ensure space for the footer */
    display: flex;
    flex-direction: column;
	overflow: auto; /* No scroll bar on the main page */
}

/* Wrapper Styling */
.content-wrapper {
    flex: 1; /* Pushes footer to the bottom */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: flex-start; /* Align content at the top */
    align-items: center; /* Center horizontally */
    padding: 0; /* Ensure no extra spacing */
    width: 100%; /* Full width */
	height: auto; /* Adjust dynamically to content */
    box-sizing: border-box;
}
.social {
		text-align: center; /* Align text below the line */
		font-size: 1.1rem; /* Adjust as needed */
		line-height: 1.5; /* Improve readability */
		margin: 0 auto; /* Center the text */
		max-width: 80%; /* Optional: Limit text width for better readability */
}
/* Container for centering icons */
.social-icons-container {
	    display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center; /* Center icons horizontally */
		margin: 1.25rem;
 /*   display: flex;
    flex-direction: column; /* Stack icons vertically */
 /*   
 /*   margin-top: 1.25rem; /* 20px / 16px = 1.25rem */
}

/* Social Media Icons */
.social-icon-main {
    width: 5.25rem; /* 36px / 16px = 2.25rem */
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-decoration: none;
    margin: 0.625rem 0; /* 10px / 16px = 0.625rem */
}

.social-icon-main img {
    width: 5.25rem; /* 36px / 16px = 2.25rem */
    height: 5.25rem; /* 36px / 16px = 2.25rem */
    margin-bottom: 0.3125rem; /* 5px / 16px = 0.3125rem */
}

.social-icon-main:hover {
    transform: scale(1.2);
    opacity: 0.8;
}


/* Banner Styling */
.banner {
    width: calc(100% - 40px); /* Full width with padding */
    max-width: 1200px; /* Restrict max width */
    height: 50px; /* Fixed height */
    border-radius: 8px;
    border: 2px solid #fff; /* Debugging */
    position: relative;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 55px auto 10px auto;
	top: 0px;
	
}
.banner-sched {
	margin: 0px auto;
}
/* Banner Text */
.banner-text {
    position: absolute; /* Position relative to the banner */
    top: 50%; /* Vertically center the text */
    left: 50%; /* Horizontally center the text */
    transform: translate(-50%, -50%); /* Adjust positioning to exact center */
    color: #fff; /* White text for contrast */
	font-family: 'Verdana',sans-serif;
 	font-size: clamp(16px, 5vw, 36px); /* Dynamically adjust font size */ /* font-size: min(5vw, 60px);  Responsive font size */
    text-align: center;
    font-weight: bold;
/*    text-shadow: 0 0 10px #3b78ee, 0 0 20px #3b78ee, 0 0 30px #3b78ee, 
                 0 0 40px #0746c1, 0 0 50px #0746c1, 0 0 60px #0746c1;
    animation: glow-pulse 2s infinite;  Infinite pulsing glow 
	-webkit-text-stroke: 2px #fee500;
*/				   
padding-bottom:0px;
}
.banner-text-college {
position: relative;
font-family: 'Verdana',sans-serif;
 	font-size: clamp(16px, 5vw, 24px); /* Dynamically adjust font size */ /* font-size: min(5vw, 60px);  Responsive font size */
    text-align: center;
    font-weight: bold;
background-color:#79001F;
color: #FFDD00;
border:.2rem solid #FFDD00;
    align-items:center; /* Horizontally center the text */
  /*transform: rotate(-45deg);*/
/*  width: 450px;
  height: 30px;
  top: 50%;  Vertically center the text */
padding: 10px;
margin: 5px;
}

/* Keyframes for More Intense Pulsing Glow */
@keyframes enhanced-glow-pulse {
    0% {
        text-shadow: 0 0 10px #3b78ee, 0 0 20px #3b78ee, 0 0 30px #3b78ee, 
                     0 0 40px #0746c1, 0 0 50px #0746c1, 0 0 60px #0746c1;
    }
    50% {
        text-shadow: 0 0 40px #3b78ee, 0 0 80px #3b78ee, 0 0 120px #3b78ee, 
                     0 0 160px #0746c1, 0 0 200px #0746c1, 0 0 240px #0746c1;
    }
    100% {
        text-shadow: 0 0 10px #3b78ee, 0 0 20px #3b78ee, 0 0 30px #3b78ee, 
                     0 0 40px #0746c1, 0 0 50px #0746c1, 0 0 60px #0746c1;
    }
}
/*  Main section of page for content */
/*************************************/



/* White Rectangle Styling */
.white-rectangle {
    background-color: #fff;
    color: #000;
    width: 100%; /* Scale for smaller screens */
	max-width: 1200px;
    height: auto; /* Adjust dynamically to content */
    margin-top: 20px; /* Space below banner */
	padding: 0px; /*0px 0px 20px 0px;*/
    border-radius: 8px;
    border: 2px solid #3b78ee; /* Debugging */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
	font-size: min(5vw, 16px); /* Responsive font size */
	font-weight: 500;
	line-height: 1.5em;
	text-align: center; /* Align text to the center */
    font-family: 'Verdana', sans-serif;
 /*   max-height: calc(100vh - 150px);  Adjust to viewport */
    overflow-y: auto; /* Enable scrolling when content exceeds max height */
    box-sizing: border-box;
	
	

}


/* END white rectangle scheduling page formatting */

.white-rectangle,p {
	color: #000000; /* Subtle gray for paragraph text */
	
    font-size: clamp(13px, 0.90vw, 16px);
	text-align: left;
	

	}
.white-rectangle starter {
	  color: #000000; /* black paragraph text */
	  font-size: min(5vw, 18px); /* Adjust as needed */
	  font-weight: bold;
	}
.inner-format {
		max-width: fit-content;
		margin-left: auto;
		margin-right: auto;
	    justify-content: center;
		max-width: fit-content;
		margin-left: auto;
		margin-right: auto ;
}
.vertical-ul {
  align-items: left !important;
  padding: 0 !important;
}
	/* Styling for the White Rectangle */
.inner-section , p{
    background-color: #fff; /* White background */
    padding: 0px; /* Padding inside the rectangle */
    margin: 10px ; /* Center the rectangle and add spacing around it */
    max-width: 100%; /* Limit rectangle width for better layout */
	height: auto;
    border-radius: 10px; /* Rounded corners for visual appeal */
 /*   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  Subtle shadow for depth */
	text-align: center;
}
.inner-section-pay {
	background-color: #fff; /* White background */
    padding: 5px; /* Padding inside the rectangle */
    margin: 0px auto; /* Center the rectangle and add spacing around it */
    max-width: 100%; /* Limit rectangle width for better layout */
    border-radius: 10px; /* Rounded corners for visual appeal */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
	text-align: center;
	overflow-y: auto;
}

.hours p {
	font-size: min(3.5vw, 20px);
}
.inner-section h1, .inner-section-sched h1, .inner-section-pay h1 {
		font-size: min(4vw, 24px);
}
.about {
		font-size: min(9vw, 36px);
		margin: 10px;
}

.inner-section-sched {
    background-color: #fff; /* White background */
    padding: 0px; /* Padding inside the rectangle */
    margin: 0px auto; /* Center the rectangle and add spacing around it */
    max-width: 100%; /* Limit rectangle width for better layout */
    border-radius: 10px; /* Rounded corners for visual appeal */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
	text-align: center;
	overflow-y: auto;
}


.MT {
	display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}
#map {
	width:800px;
	height:600px; 
	border:0; 
}

.inner-section-sched h3 {
	font-weight: bold;
	}
.cal-embed {
    display: block; /* Prevent inline iframe margin issues */
    width: 100%;
    height: 85vh; /* Ensure this matches the desired viewport height */
    border: none; /* Remove default iframe borders */
    margin: 0; /* Ensure no margin is added */
    padding: 0;
    overflow: hidden; /* Ensure no internal scrollbars show */
}
	/* Styling for the Title */
	.inner-title {
		text-align: center;
		font-size: min(4vw, 40px); /* Adjust as needed */
		font-weight: bold;
		margin-bottom: 20px; /* Space between the title and the line */
		line-height: 1.25em;
	}

	/* Styling for Horizontal Line */
	.inner-line {
		width: 50%; /* 50% of the screen width */
		height: 5px; /* Thickness of the line */
		background-color: #3b78ee; /* Line color */
		margin: 0px auto 10px auto; /* Center the line and add space below */
		display: block; /* Ensure it behaves like a block element */
	}
	/* Styling for Mini Horizontal Line */
	.mini-line {
		width: 25%; /* 50% of the screen width */
		height: 5px; /* Thickness of the line */
		background-color: #3b78ee;  /* Line color */
		margin: 0px; /* Center the line and add space below */
		display: block; /* Ensure it behaves like a block element */
	}
	/* Styling for Text Section */
	.inner-text {
		text-align: left; /* Align text below the line */
		font-size: 1.2rem; /* Adjust as needed */
		line-height: 1.5; /* Improve readability */
		margin: 0 auto; /* Center the text */
		max-width: 80%; /* Optional: Limit text width for better readability */
	}

.instruct_bio {
		text-align: left; /* Align text below the line */
		font-size: 1.1rem; /* Adjust as needed */
		line-height: 1.5; /* Improve readability */
		margin: 0 auto; /* Center the text */
		max-width: 80%; /* Optional: Limit text width for better readability */
}
.lineage_div {
		text-align: left; /* Align text below the line */
		font-size: 1.1rem; /* Adjust as needed */
		line-height: 1.5; /* Improve readability */
		margin: 0 auto; /* Center the text */
		max-width: 80%; /* Optional: Limit text width for better readability */
}

.lineage_div li {
	font-size: 1.1rem;
    margin-left: 2px;
    list-style-type: disc;
	line-height: 1.5; /* Improve readability */
	margin: 0 auto; /* Center the text */
	max-width: 80%; /* Optional: Limit text width for better readability */
 }

	/* Button Container for Centering */
	.button-container {
		display: flex; /* Enable flexbox */
		justify-content: center; /* Center horizontally */
		margin-top: 20px; /* Add spacing above the button */
		margin-bottom: 20px;
	}

	/* Button Styling */
	.schedule-button {
		padding: 10px 20px; /* Button padding */
		background-color: #3b78ee; /* Button background color #0746c1 */
		color: #fff; /* Text color */
		text-decoration: none; /* Remove underline */
		font-size: 1rem; /* Font size */
		font-weight: bold;
		border-radius: 5px; /* Rounded corners */
		text-align: center; /* Center text */
		transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effects */
	}

	/* Button Hover Effect */
	.schedule-button:hover {
		background-color: #0746c1; /* Darker blue on hover */
		transform: scale(1.05); /* Slight zoom effect */
	}
		/* Button Styling */
	.payment-button {
		padding: 10px 20px; /* Button padding */
		background-color: #3b78ee; /* Button background color */
		color: #fff; /* Text color */
		text-decoration: none; /* Remove underline */
		font-size: 1rem; /* Font size */
		font-weight: bold;
		border-radius: 5px; /* Rounded corners */
		text-align: center; /* Center text */
		transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effects */
	}

	/* Button Hover Effect */
	.payment-button:hover {
		background-color: #0746c1; /* Darker blue on hover */
		transform: scale(1.05); /* Slight zoom effect */
	}
/* Image Grid Styling */						
.image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-item {
  flex: 0 1 calc(33.333% - 10px);
  margin-bottom: 20px;
  box-sizing: border-box;
  text-align: center;
}

.image-item img {
  width: 100%;
  height: auto;
  max-width: 400px;
}

.image-item p {
  width: 100%;
  box-sizing: border-box;
  font-size: min(1vw, 15px);
  font-weight: bold;
  text-align: center;
  color: #333;
  margin: 0 auto;
}
/* Contact form formatting on contact.php */
#frameCogCont {
	border:0;
	width:100%; 
/*	height: 574px; */
}
/* Waiver form formatting on waiver.php */
#frameCogWaiv {
	border:0;
	width:100%; 
/*	height:500;	*/
	}
/* schedule formatting */
#frameteam {
	border:0;
	width:100%; 
	height:1000px;
}
blockquote {
    color: #000000;
	margin: 10px;
	font-family: 'verdana', serif;
	font-size: clamp(16px, 2.5vw, 20px);
    font-weight: 400;
    line-height: normal;
    font-style: italic;
    text-align: center;
}	

/* Hamburger Menu */
.hamburger {
    display: none; /* Default: hidden on desktop */
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    padding: 10px;
}
.hamburger span {
    background-color: #fff;
    height: 3px;
    width: 25px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Show Hamburger Menu on Mobile */
@media screen and (max-width: 768px) {
    .hamburger {
        display: flex; /* Show on mobile */
    }

    /* Hide Main Menu by Default */
    .main-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 50px; /* Below header */
        left: 0;
        width: 100%;
        background-color: #333; /* Match site theme */
        z-index: 1000;
    }
    .social-icon-main {
        width: 18px; /* Reduce icon size */
        height: 18px;
        margin: 0; /* Remove unnecessary margin */
    }	

    /* Show Main Menu When Active */
    .main-menu.active {
        display: flex;
    }
    /* Adjust Submenus for Mobile */
    .submenu {
        display: none; /* Hidden by default */
        position: static; /* Inline with parent */
    }

    .has-submenu.open > .submenu {
        display: block; /* Show submenu on click */
    }

    .white-rectangle p {
        font-size: 0.9rem; /* Slightly smaller font */
        line-height: 1.4; /* Adjust line spacing */
    }
	
	/* NEW CHATGPT SUGGESTIONS */
	   .banner {
        margin: 10px auto; /* Reduce margin for smaller screens */
        height: auto; /* Allow height to adjust if necessary */
    }

		.content-wrapper {
        padding: 10px; /* Add some padding */
    }
	    .white-rectangle {
        max-width: 100%; /* Use full width */
        margin: 10px; /* Add spacing */
        padding: 10px; /* Reduce padding */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    }
	#map {
		height: 500px;
		width:100%;
	}
/* Mobile Override: Enforce font size of 12px on key elements */
    .banner-text,
    .banner-text-college,
    .white-rectangle p,
    blockquote {
        font-size: 12px !important;
    }
}
@media (max-width: 600px) {
  .social-icon-main img {
    width: 4rem;        /* e.g. 32px */
    height: 4rem;       /* e.g. 32px */
    margin-bottom: 0.25rem; /* e.g. 4px */
  }
  
  .image-item {
    flex: 0 1 100%;
    max-width: 100%;
  }
  .image-item img,
  .image-item p {
    width: 100%;
    max-width: 100%;
  }
  .image-item p {
    font-size: 15px;
  }
}

@media (max-width: 400px) {
  .social-icon-main img {
    width: 3.5rem;        /* e.g. 28px */
    height: 3.5rem;       /* e.g. 28px */
    margin-bottom: 0.2rem; /* e.g. 3px */
  }
}