* {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Arial', sans-serif;
	width:100%;
}

.container {
	margin: 0 auto;
	padding: 0 10px;
	max-width: 800px;
}

/* original version
.container {
width: 95vw;
margin: 0 auto;	
height: auto;	
overflow: auto;    
white-space: nowrap;
}
*/


.topBar {
	/* background: #263238; */
	color: rgba(255, 255, 255, 0.3);
	font-size: 22px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 20px 0;
	text-align: center;
}

.navBar {
	background: #6495ED;
}

.nav {
	margin: 0 -10px;
	padding: 0 10px;
	list-style: none;
	display: flex;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
}

.nav > li > a {
	padding: 14px 16px;
	display: block;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1rem;
}

.nav > li > a.active {
	border-bottom: 2px solid #E64A19;
}

.nav li a:hover {
	color: #ffd700;
	/* Change the color on hover */
}


.btn {
	background-color: #7CFC00;
	color: white;
	font-size: 1rem;
	font-weight:bold;
	border: none;
	padding: 2px 2px;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.3s ease-in-out;
}

/*
@media (max-width: 767px) {
*/
@media screen and (max-width: 600px) {
	.btn {
		background-color: #7CFC00;
		color: white;
		font-size: .75rem;
		font-weight:bold;
		border: none;
		padding: 1px 1px;
		border-radius: 2px;
		cursor: pointer;
		transition: background-color 0.3s ease-in-out;
	}
}

.btn:hover {
	background-color: #006400;
	/* Change the background color on hover */
	color: white;
}

.outer {
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: flex-start;
  height: 20%;           /* Required for vertical alignment */
}

.outer span {
	max-width: 60%;
}

@media screen and (max-width: 600px) {
	.outer span {
	max-width: 90%;
	}
}

img {
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 600px) {
	.mobile_resizer50 {
		width: 50%; /* Resizes image to 50% of its container on mobile */
		margin: 0 auto; /* Centers the image */
		display: block;
	}
}

.flex-container {
/* border: 2px solid green; */
display: flex;
/* display: inline-flex; */
/* width: 80%; */
flex-direction: column;
justify-content: center;
align-items: flex-start;
}

.flex-containerX {
/* border: 2px solid green; */
display: flex;
/* display: inline-flex; */
/* width: 80%; */
flex-direction: column;
justify-content: center;
align-items: center;
}

.flex-containerY {
/* border: 2px solid green; */
/* display: flex; */
display: inline-flex;
/* width: 80%; */
flex-direction: column;
justify-content: center;
align-items: center;
}

.flex-align-center {
justify-content: center; /* Centers horizontally (Main Axis) */
align-items: center;     /* Centers vertically (Cross Axis) */
}

.flex-ht {
height: auto;
/* height: 15vh; */
}

.flex-width-80 {
width: 80%;
}
.flex-width-70 {
width: 70%;
}
.flex-width-60 {
width: 60%;
}

.flex-row-2col {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 1px;
margin: 1px 0;
}

.flex-row-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 1px;
place-content: center;
margin: 1px 0;
}

.flex-row-cell {
padding: 1px;
/* border: 2px solid yellow; */
}

.cell-align-left {
justify-content: center;
}

.cell-align-center {
justify-content: center;
}

/* 
Main page: index.html
*/

a {
}

.constant-color, 
.constant-color:visited, 
.constant-color:hover, 
.constant-color:active {
    color: blue; /* Replace with your desired color */
    text-decoration: underline; 
}

a.leftnav {
	/* font-family: 'Brush Script MT', cursive; */
	font-family: Verdana, sans-serif;
	color: #729B59;
	font-size: 1.5rem;
	line-height: 1.2;
	padding-bottom:2%;
	font-weight: bold;
	text-decoration:underline;
}

.home2nd {
/* border:1px solid black; */
display: flex;
justify-content: center;
align-items: center;
/* width: 30%; */
margin: 1px;
/* margin-left:12%; */
}

.home4th {
float:left;
margin-left:15%;
font-weight:bolder;
font-size:20px;
}

p,h1,pre {
	margin:0px 30px 10px 60px;
	/* line-height: 2.6; */
}

span {
	/* margin:60px 0px 0px 0px; */
	/* line-height: 2.6; */
}

p.serve_provide {
	font-family: Tahoma, sans-serif;
	font-size: 25px;
	font-weight: bold;
	color: #61B440;
	/* text-decoration: underline; */
}

.serve_provideX {
	font-family: Tahoma, sans-serif;
	font-size: 1.25rem;
	font-weight: bold;
	color: #61B440;	
}

span.motto {	
	padding-top:2%;
	font-family: Tahoma, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #61B440;
	/* text-decoration: underline; */
}

p.motto {
	float:left;
	padding-top:2%;
	font-family: Tahoma, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #61B440;
	/* text-decoration: underline; */
}

p.serve_list_p {
	font-family: Tahoma, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #D78434;
	/* text-decoration: underline; */
}

h1 {
	font-size:14px;
	padding-top:10px;
}

/*
img {
    pointer-events: none; 
}
img.noclick { 
	pointer-events: none; 
} 
*/

/* 
About Us page: about.html
*/

#about_desc {
/* border:1px solid black; */	
white-space:normal;	
float:center;
width:85%;
margin-left:2%;
margin-top:1%;
font-family: Tahoma, sans-serif;
font-size: 15px;	
}

ul.error_li {
	font-family: Tahoma, sans-serif;
	font-size: 15px;    
	/* 
	list-style-type: circle;
	*/
}

.div-error-span > span > li {
    border: 1px solid red;
}

.about-bottom {
/* border: 1px solid red; */
display: flex;
justify-content: center; /* Centers horizontally (Main Axis) */
align-items: center;     /* Centers vertically (Cross Axis) */
height: 20vh;
}

/* 
Services page: services.html
*/

.list-container {
  display: flex;
  justify-content: space-between; /* Pushes items to opposite ends */
  align-items: flex-start;      /* Aligns lists to the top */
  padding: 20px;
  background-color: #f4f4f4;
}

.serve_2rd {
display: inline-block;
/* border:1px solid black; */
text-align: center;
margin-left: 10%;
width: 40%;
}

.serve_3rd {
/* border:1px solid black; */
display: inline-block;
margin-left: 5%;
text-align: center;
width: 30%;
}

.serve_5th {
/* border:1px solid black; */
display: inline-block;
margin-left: 13%;
width: 40%;
margin-bottom: 1%;
}

.serve_parent {
float:left;
/* border:1px solid black; */
margin: 1px;
padding: 1px 1px;
text-align: left;
width: 30%;
}

.serve_child {
display: inline-block;
/* border:1px solid black; */
vertical-align: top;
text-align: left;
margin-left: .1%;
margin-right: 1%;
}

ul.serve_li {
	font-family: Tahoma, sans-serif;
	font-size: 1rem;
	padding-bottom: 3%;
}

@media screen and (max-width: 600px) {
	ul.serve_li {
		font-family: Tahoma, sans-serif;
		font-size: .75rem;
		padding-bottom: 3%;
	}
}

/* 
Contact: contact.html & contact.aspx 
*/

/* style for form fields */
span input[type="text"] {
	font-size: 14px;
    border: 2px solid blue; 
}

span textarea {
	font-size: 14px;
    border: 2px solid blue;
    width: 50%; /* Default for large screens */
}

@media screen and (max-width: 600px) {
	span textarea {
    width: 100%; /* Switch to full width on mobile */
	}
}

p input[type="submit"] { 
    border: 2px solid blue;
    padding: 5px 5px;
  	font-size: 1rem;
  	background-color: #007BFF;
 	color: white;
 	border-radius: 5px;
  	cursor: pointer;
}

/* Mobile Adjustments (under 600px) */
@media screen and (max-width: 600px) {
	p input[type="submit"] { 
		border: 2px solid blue;
		padding: 5px 5px;
		font-size: 1rem;
		background-color: #007BFF;
		color: white;
		border-radius: 5px;
		cursor: pointer;
	}	
}

/* centers error msg */
.containErrMsg {  
  display: flex;
  justify-content: center;
}

.list-wrapper {
  /* This makes the border hug the UL */
  display: inline-block;
  
  /* Styling */
  border: 2px solid red;
  padding: 5px;
  border-radius: 8px;
}

.list-wrapper ul {
  /* Removes default bullet indenting so it's perfectly centered */
  margin: 0;
  padding-left: 1.5rem; 
}

#txtBody {
    resize: none;
}

#feedBack {
	display: inline-block;
	color: green;
  	border: 1px solid green;
  	width: 50%;
  	margin-left: 20%;
  	padding:5px 5px 5px 5px;  	
  	font-family: Tahoma, sans-serif;
	font-size: 15px;
}

span.feedback {	
	color: green;
	border: 1px solid green;
	width: 50%;
	margin-left: 20%;
	padding:5px 5px 5px 5px;  	
	font-family: Tahoma, sans-serif;
	font-size: 15px;
}


#submitError {
    display: inline-block;
	color: red;
  	border: 1px solid red;
  	width: 300px;
  	/* margin-left: 20%; */
  	padding:5px 5px 5px 5px;
  	font-family: Tahoma, sans-serif;
	font-size: 15px;
}

/* parent element has class="xyz" then <a> then <span>
.xyz-a-span > a > span {
    add styling: here;
}
 */

/*
https://stackoverflow.com/questions/20224268/vertically-align-link-next-to-image-with-css
see: Mohsen Safari
*/
#specialA img {
	margin-left: 25px;
	width:30px;
    height:30px;
    vertical-align: middle;
}

#specialA a {	    
    vertical-align: middle;
    text-decoration:none;
}

#specialB img {
	margin-left: 260px;
	width:30px;
    height:30px;
    vertical-align: middle;
}

#specialB a {	    
    vertical-align: middle;
    text-decoration:none;
}