* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
 	background: url('bg.jpg') no-repeat top left fixed; 
 	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	font-family:"Open Sans",Arial,sans-serif;
	font-size: 1.1rem;
	line-height: 1.5;
	color: #444;
    }

table {
  background:none repeat scroll 0 0 #fff;
  border:1px solid #dfdfdf;
  border-spacing:0;
margin: 0 auto;
  width:90%;
}
table tr td, table tr th {padding:0.625rem;}
table tfoot, table thead,table tr:nth-of-type(2n) {background:none repeat scroll 0 0 #f0f0f0;}
th,table tr:nth-of-type(2n) td {border-right:1px solid #fff;}
td {border-right:1px solid #f0f0f0;}

a
{
	color: #ab3d34;
	text-decoration: none;
}
a:hover, a:after, a:active
{
	color: #a93d34;
	text-decoration: underline;
}
.size-960 .line,.size-1140 .line,.size-1280 .line,.size-1520 .line {
  margin:0 auto;
  padding:0 0.625rem;
}

.page_header{
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	position: relative;
	}
	
.homepage{
	min-height: 100vh;
}

.innerpage{
	min-height: 25vh;
}

.top_block{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 20px;
	}

.logo_block {
	background-color: rgba(255, 255, 255, .8);
	border-radius: 10px;
	border: 1px solid #ffffff;
	padding: 10px 15px 2px 10px;
}
.logo{
	height: 120px;
}

.main_top_nav_section {
	position: absolute;
	top: 50px;
	right: 30px;
	display: flex;
	justify-content: space-between;
	z-index: 1000;
}

/* Page Intro Section */
.page_intro {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.intro_left {
	flex: 1;
	
}
.intro_right {
	flex: 1;
}

.intro_content {
	padding: 2rem;
	margin-left: 20px;
	max-width: 750px;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 10px;
}
.intro_welcome h1 {
  	padding: 0;
	color: #3554d1;
	font-weight: bold;
	font-size: 3rem;
	margin-left: 2rem;
	margin-bottom: 0.5rem;
	line-height: 42px;
}

.society-name {
	color: #0f2480;
}
.society-loc {
	font-size: 1rem;
	color: #0f2480;
}
.caption h3 {
	font-family: 'Satisfy';
	font-size: 1.7rem;
	font-weight:400;
	color: #ab3d34;
	line-height: 35px;
	margin: 1rem 0;
    }
.right {
	display: block;
  	text-align: right;
}
.introtext p {
	max-width: 600px;
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.6;
	color: #444;
	text-align: center;
    }
#readmore {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
	margin-bottom: 10px;
}

.readmore button {
  padding: 7px 18px;
  background-color: #f8f0e6;
  border: none;
  color: #333;
  border-radius: 5px;
  font-size: 14px;
 letter-spacing: .5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.readmore button:hover {
  background-color: #ba9896;
 color: #ffffff;
} 

.email-subscribe {
  position: absolute;
  bottom: 20px;
  right: 50px;
  max-width: 480px;
  width: calc(100% - 100px); /* account for 50px left margin */
  background: rgba(200, 200, 200, 0.20);
  padding: 0.75rem;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Open Sans', sans-serif;
}

.email-subscribe form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.email-subscribe input[type="email"] {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.email-subscribe button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  background-color: #3554d1;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.email-subscribe button:hover {
  background-color: #ab3d34;
}

.contact .email-subscribe{
	width: 100%;
	bottom: auto;
	right: auto;
	padding: 2px;
	margin: 20px 0;
	position: relative;
	max-width: 300px;
	  border: 1px solid #ccc;
}
.contact .email-subscribe input[type="email"] {
	width: 80%;
	display: inline-block;
	padding: 5px;
	margin: 0 3px;
	border-radius: 5px;
	font-size: 1rem;
}

    /* Optional honeypot field hidden */
    .honeypot {
      display: none;
    }
  
 .form-message {
  position: fixed;
  bottom: 80px;
  left: 50px;
  background-color: #4CAF50;
  color: white;
  padding: 0.75rem 1.25rem;
  border-radius: 5px;
  font-size: 0.95rem;
  display: none;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.form-message.show {
  display: block;
  animation: fadein 0.5s ease-in-out;
}

/* Main Content */

.main_content {
	background-color: rgba(255, 255, 255, .95);
	position: relative;
	width: 100%;
	min-height: 27.5vw;
	margin: 0 auto;
	padding: 50px
}

.main_content h2 {
	padding: 15px 0 10px 10px;
	margin: 20px 0;
	line-height: 21px;
	border-left: 10px solid #3554d1;
	}

.main_content ul {
	line-height: 2rem;
	}

.welcome_content {
	position: relative;
	text-align: center;
	padding: 0;
	margin: 0;
}

.welcome_content::after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 20%; /* centers the 50% border */
	width: 60%;
	border-bottom: 1px solid #3554d1; /* adjust thickness and color as needed */
	}
	
.welcome_content h2 {
  	padding: 20px 0;
	margin: 0;
	color: #3554d1;
	font-weight: bold;
	font-size: 2rem;
	line-height: 25px;
	border-left: none;
}

.home_grid {
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem; /* space between grid boxes */
	position: relative;
	padding: 1rem;
	margin-bottom: 20px;
}
.home_grid a{
	text-decoration: none;
}

.grid-box {
	padding: .5rem 1.5rem 0.5rem 1rem;
	margin: 0 auto;
	text-align: center;
	position: relative;
	border-radius: 15px;
	box-sizing: border-box;
	filter: grayscale(50%);
}

.grid-box:hover {
	filter: grayscale(0%);
	background: linear-gradient(to top, transparent, #efefef);
	color: #1d3ae2;
}

.grid-head{
	padding-bottom: .25rem;
	font-size: 1.25rem;
	color: #44617d; /* or your preferred color */
	font-weight: 600;
	letter-spacing: -1px;
}

.grid-box img{
	padding: 5px;
}


/* Vertical line between boxes */
.grid-box:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 15%;
	right: -1.5rem; /* half of gap value to center */
	height: 70%;
	width: 2px;
	background-color: #dedede;
}

.grid-caption{
	position: relative;
	padding-left: 1rem;
	font-size: 1.10rem;
	color: #5a5a5a;
	max-width: 600px;
	margin: 0 auto;
	font-style: italic;
}
.quote-mark {
	font-size: 3rem;
	color: #4caf50; /* or your preferred color */
	font-family: Georgia, serif;
	line-height: 1;
}

/* Position opening quote to the left */
.quote-mark.open {
	position: absolute;
	top: -0.5rem;
	left: 0;
}

/* Closing quote inline and a bit lower */
.quote-mark.close {
	position: absolute;
	right: .5rem;
	bottom: -1.25rem;
}

.grid-icon-img{
	background-color: #ffffff;
	width: 120px;
	height: auto;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid #b9b9b9; /* Change color as needed */
	display: block;
	margin: 0px auto .25rem auto; /* Center the image and add bottom space */
}

.grid-icon img{
	width: 120px;
}

.grid-icon-name{
	font-size: 1.05rem;
	color: #666666; /* or your preferred color */
	font-weight: bold;
	line-height: 1;

}
.grid-head{
	padding-bottom: .25rem;
	font-size: 1.25rem;
	color: #44617d; /* or your preferred color */
	font-weight: 600;
	letter-spacing: -1px;
	border-bottom: 2px solid #ab3d34;
}

/* embeded google map */
.embed_googlemap{
	border: 1px solid #bcbcbc;
	margin: 0;
	padding: 0;
}
.map_container {
	/* 
	width: 90vw;
	 */
	height: 70vh;
	display: flex; /* This makes children align side by side */
	flex-direction: row;
    }

.map_container_google {
	position: relative;
	width: 75%;
	overflow: hidden;
}

.map_container iframe,
.map_container .fallback-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.map_container .fallback-image {
	width: 100%;
	background-image: url('googlemap.jpg');
	background-size: cover;
	background-position: left top;
	background-repeat: no-repeat;
}

.contact {
	background-color: #ecf0f4;
	width: 25%; /* Contact info takes 40% */
	padding: 30px;
	display: flex;
	text-align: center;
	flex-direction: column;
	justify-content: center;
	border-left: 1px solid #bcbcbc;
    }

.contact h2 {
	margin-bottom: 20px;
	color: #44617d; 
	border-left: none;
    }

.contact p {
      margin-bottom: 10px;
      line-height:1.5;
    }
footer {
	background-color: #34495e;
	font-size: .8rem;
	color: #d7d7d7; 
	letter-spacing: 1px;
	text-align: center;
	margin-top: 30px;
	padding: 15px;
}
.mc table th,
.mc table td{
	text-align: center;
}

.photoalbum_wrap{
	display: flex;
	align-items: center;
	justify-content: center;
}


@media (max-width: 768px) {
	.page_header{
		background: url('bg2.jpg') no-repeat top left; 
		background-size: 70% 100%;/* background-size: auto 100%; position: relative;*/
	}
	.homepage{
		min-height: 100vh;
	}

	.innerpage{
		min-height: 25vh;
	}
	
	.top_block{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.main_top_nav_section{
		position: relative;
		flex-direction: column;
		width: 100%;        /* Make nav full width */
		flex-wrap: wrap;    /* Optional: wrap links if needed */
		justify-content: flex-start; /* align nav items to left */
		right: 0;
		margin-bottom: 20px;
	}
	
	.page_intro {
		gap: 10px;
		margin-top: 10px;
		flex-direction: column;
		padding-top: 3.5rem; /* space between nav and content */
	}

	.intro_content {
		padding: 10px 1rem;
		margin: 0 auto;
		width: 90%;
		border: 1px solid #ecf0f4;
	}
   
.intro_welcome h1 {
	font-weight: bold;
	font-size: 2rem;
	margin-left: 1.2rem;
	margin-bottom: 0.5rem;
	line-height: 30px;
}

.caption h3 {
      font-size: 1.3rem;
   font-weight:100;
   line-height: 30px;
       margin: 1rem 0;
    }
.introtext p {
      font-size: .9rem;
      line-height: 1.6;
    }
#readmore {
	margin-top: 1rem;
    justify-content: flex-end; /* Keep the button on the right */
    margin-bottom: 10px;
}

 .email-subscribe {
	width: 90%;
  	left: 20px;
}

.main_content{
	position: relative;
	margin-top: 50px;
	flex-direction: column;
}
.main_content h2{
	margin-top: 20px;
}

.welcome_content h2 {
  	padding: 0;
	color: #3554d1;
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 25px;
}

	.home_grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	  gap: 2rem;
	  padding: 1rem;
	  margin-bottom: 20px;
	}
	
/* Vertical line between boxes */
	.grid-box:not(:last-child)::after {
		content: "";
		right: 0; /* half of gap value to center */
		width: 0;
		background: none;
	}
	.map_container {
	width: 100%;
	height: auto;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	text-align: center;
	flex-direction: column;
	justify-content: center;
    }

.map_container_google {
  position: relative;
  width: 100%;
height: 50vh;
  overflow: hidden;
}

.contact {
	background-color: #ecf0f4;
	width: 100%; /* Contact info takes 40% */
	height: 40vh;
	margin: 0;
	padding: 10px;
	text-align: center;
	justify-content: center;
	border: none;
	border-top: 1px solid #bcbcbc;
    }
 
.contact h2 {
	font-weight: bold;
	font-size: 1.2rem;
	margin: 0;
	padding: 0;
    }

.contact p {
	font-size: .9rem;
	margin: 0;
	padding: 0;
      line-height:1.5;
    }
}
  
 
@keyframes fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}