@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Droid+Serif:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
/*@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');*/


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
.row-container {
    display: flex;
    flex-direction: column;
    margin-left: 10px; /* Adjust as needed */
	background-color:white;
}
.row {
    height: 22px; /* Same height as the site name */
    background-color: white; /* Adjust color as needed */
    margin-bottom: 5px; /* Adjust spacing between rows */
	font-size:24px;
	color: #142740;
}

.header-text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 900; /* Extra Bold */
    font-size: 70px;
   letter-spacing: 2px;
}

body {
  background-color: #353836;
  /*color: white;*/
  font-family: "Poppins", sans-serif;
  padding: 0;
  max-width: 1400px;
  margin: 0 auto;  
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size:1rem;
  width:100%;
  -webkit-font-smoothing: antialiased;
}

header {
    background-color: #333;
    /*color: white;
    padding: 10px;*/
    display: flex;
    align-items: center;
    justify-content: center;
	padding:25px;
}

header a {
  text-decoration: none;
}

header , footer{
  
  background-color: white;/*#1d1f1d;*/
  /*height: 50px;
  justify-content: space-between;*/
  height: fit-content;
  flex : 0 0 auto;
  
}


/*h1 {
    font-size: 15pt;
    font-weight: bold;
    margin: 0;
}*/


header h1 {
  margin: 0;
  text-align:left;
  /*padding: 10px;*/
  padding-bottom:0px;
  /*font-size:3.6rem;
  font-weight:100;
  font-family:Helvetica;*/
  font-size:3.5rem;
  font-weight:500;
  font-family:Raleway, Sans-serif, Helvetica;
 /* background-image: url('bannerfin.png');*/
  background-size: cover;
 /* background: url('https://images.squarespace-cdn.com/content/v1/57575d1907eaa03affd2fb2b/1669939002129-0PZNY8EPWXQZ6G91R7G4/HERO_Web%2BDots%2BImage_MASTER.jpg') 0 0 repeat-x;*/
}

.image-container {
    background-image: url('https://images.squarespace-cdn.com/content/v1/57575d1907eaa03affd2fb2b/1669939002129-0PZNY8EPWXQZ6G91R7G4/HERO_Web%2BDots%2BImage_MASTER.jpg'); /* Replace with the path to your image */
    background-size: cover; /* Adjust the size to cover the container */
 /*   background-position: -50px -100px;  Adjust the position to show the desired part */
}


.imgcontainer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
	background-color:white;
}

.imgcolumn {
	display: flex; /* Use flexbox for column content alignment */
    flex-direction: column; /* Align content vertically */
    align-items: flex-start; /* Ensure content starts at the beginning of each column */
	width: 100vw;
}
.imgleft-column {
    flex: 0 0 auto; /* Set width to auto */
}

img {
    max-width: 100%;
    height: auto;
	align-self: flex-start; /* Ensure image stays at the top */
	
}

imgAd {
    max-width: 100%;
    height: auto;
	align-self: flex-start; /* Ensure image stays at the top */
	max-width: 380px !important;
}

p {
    margin: 0;
    padding: 10px;
    font-size: 16px;
    line-height: 1.5;
	align-self: flex-start; /* Ensure paragraph stays at the top */
}

header img {
  width: 300px;
  height: 110px;
}
/*
header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
 }
*/
 footer {
  position: fixed;
  bottom: 0;
  width: -webkit-fill-available;
  max-width: 1400px;
}
/*
footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
 }
 */
 footer a {
  text-decoration: none;
}
 
.image10px {
    height: 17px;
	width: 17px;
	vertical-align:middle;
}

.footernonbld {
    color: #C8C8C8;
    font-size: 0.9em;
    padding-top: 3px;
    padding-left: 3px !important;
	background-color:#142740;
}

.main {
  /*padding: 12px;*/
  /*height:100%;*/
  flex:1;
 /* overflow-y: auto; */
}

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  background-color: #f7f7f7;
  overflow-y: auto;
}

/*
.scrollable-body {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
*/
.hrow {
  display: flex;
}


.hcolumn1 {
  flex: 90%;
}
.hcolumn2 {
  flex: 10%;
  align-items:center;
  background-color:white;
}

#brand {
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
}

#brand a {
  color: #09c372;
}

ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

ul a {
  color: #142740; /*white;*/
}

ul li {
  flex:1;
  text-align:center;
  padding: 10 0px;
  margin: 0 auto;
  background-color: #142740; /*green;5da660  468cc2*/
 /* width:300px;
  border-right:1px solid white;*/
}
/* remove the right border from the last menu item */
/**/
ul li:last-child {
  /*border-right: 1px solid #ecf0f1; */
}

.ulli {
  flex:1;
  text-align:left;
  padding: 10px;
  margin: 0 auto;
  background-color: white; /*#6b8791;*/
  border-left:0;
  /*color:white;*/
}


li + li{
	/*border-left: 1px solid white;*/
	
}

ul li:hover {
  /*transform: scale(1.1);*/
  color:gray;
  transition: 0.3s;
}

#hamburger-icon {
  margin: auto 0;
  display: none;
  cursor: pointer;
  text-align: -webkit-right;
  padding: 10 15 0 0px;
}

#hamburger-icon div {
  width: 35px;
  height: 3px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}
 .ht70{
	min-height:calc(100vh - 260px);
	/*height: 2100px;*/
	/*height: calc(100vh + 20em);*/
	overflow-y: auto;
 }
 
.ht755{
	min-height:calc(100vh - 755px);
	/*height: 2100px;*/
	/*height: calc(100vh + 20em);*/
	overflow-y: auto;
}
.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
  opacity: 0;
}

.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}

.open .mobile-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.mobile-menu {
  display: none;
  position:fixed;
  top: 60px;
  right:20px;
  
  /*
  position: absolute;
  left: 0;
  height: calc(100vh - 50px);
  width: 100%;
  */
}

.mobile-menu li {
  margin-bottom: 10px;
}

/* Use media queries to apply different styles at different viewport sizes */
@media (min-width: 769px) {
  .hrow{
	  display:none !important;
  }
  .adWdth{	
	width:50%;
	display:block;  /* check if other thing does not work*/
	padding: 20px;
    border: 1px solid grey;
  }
  #show-divFP{
    display: block; /* Ensure the default display is set to block */
	}
 
}

@media (min-width: 1024px) {
	#show-div {
    display: block; /* Ensure the default display is set to block */
	}
	
}

@media only screen and (max-width: 320px) 
{
	header h1 {
	padding-top:0px;
	font-size:1.6rem !important;
	font-weight:600;
	}

	.hrow {
	display: flex;
	padding: 0px !important;
	align-items: center;
	background-color:white;
	}
	
	.row{
		font-size:12px;
	}	
	
	#show-div {
        display: none; /* Hide the navigation on mobile devices */
    }
	
	#show-divFP{
    display: none; /* Ensure the default display is set to block */
	}
	
	#show-divH{
    display: none; /* Ensure the default display is set to block */
	}
		
	.pad25s {
		padding: 15 5px !important;
	}
	
	 body {
		max-width: 100% !important; /* This will ensure content doesn't exceed the viewport width */
		overflow-x: hidden !important; /* This hides horizontal scrollbar */
		font-size:	0.9rem !important;
	}
		
	.font11em{
		font-size:	1.0rem !important;
	}
	
	.font20em{
		font-size:	1.5rem !important;
	}
	  
	/*  header nav {
		display: none;
	  }*/

	  #hdrSmess{
		  display:none;
	  }

	  h2{
		  font-size:1.1rem;
	  }
	  
	 /* footer nav {
		display: none;
	  }*/
	  
	  	  
	  #hamburger-icon {
		margin: auto 0;
		display: block;
		cursor: pointer;
		text-align: -webkit-right;
		padding: 3 15 0 0px !important;
	  }
	  
	  #hamburger-icon div {
		  background-color: gray !important;
		}
	  
	  .container {
		gap: 10px;
	  }
	  
	  .ltbox {
		width: 80vw; /* This will make the text box take up the full width on screens smaller than 600px wide */
		/*width: 80vw;  This will make the text box take up 80% of the viewport width */
		max-width:240px;
	  }
	  .mtbox {
		width: 40vw;
		max-width: 180px
	  }
	  .stbox {
		width: 20vw;
		max-width: 90px
	  }

	  .main {
	  /*padding: 10px;*/
	  }
	  
	  .adWdth{	
		width:100%;
		display:block;
		padding: 20px;
		border: 1px solid grey;
		}
		
		ul li {
		  flex:1;
		  text-align:center;
		  padding: 10px;
		  margin: 0 auto;
		  background-color: #6395b8; /*green;5da660  468cc2*/
		  width:150px;
		  /*border-right:1px solid white;*/
		}
		ul{
			z-index:999;
		}
		.wdth68{
			width:100%;
		}
		
		.ht70
		 {
		 height:85vh;
		}
		
		.ccPad
		{
			float:left; 
			width:45%; 
			border:0px; 
			padding:0px;
		}
		
		.modal {
		  display: none;
		  position: fixed;
		  z-index: 20;
		  left: 0 !important;
		  top: 300;
		 width: 90vw !important;
		   height: 50vh !important;
		/*  overflow: auto;
		  background-color: rgba(0,0,0,0.4);*/
		}
		
		.modal-content {
			padding: 6px !important;
		 }
		 
		.box {
			width:90vw !important;
			border: 1px solid black;
			border-radius: 25px;
			padding: 20px !important;
			margin: 0px auto;
			height: fit-content;
		}
		
		.box.left {
			float: right;
			margin: 7px !important;
			background-color: lightgray;
		}
		
		.box.right {
			float: left;
			margin: 10px;
			background-color: lightgray;
		}

		.pc-tab section div {
		  padding: 15 12 80 12px !important;
		  /*width: 100%;*/
		  border: 1px solid #ddd;
		  background: white /*#f6faf8;  #fff;*/
		  line-height: 1.5rem;
		  letter-spacing: 0.3px;
		  color: #444;
		 /* height:100%;   need to open so that body covers all area*/
		}
		
		.pc-tab section div h2 {
			margin-bottom: 10px !important;
		}
		
		.pc-tab section div div {
			padding: 5px !important; 
		}
		
		.columns {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding:0px !important;
		}
		
		.font10em{
			font-size:	0.8rem !important;
		}
		.font11em{
			font-size:	0.9rem !important;
		}
		.font12em{
			font-size:	1.0rem !important;
		}
		.font15em{
			font-size:	1.2rem !important;
			padding-bottom: 5px;
		}
		.font08em{
			font-size:	0.7rem !important;
		}
		.font09em{
			font-size:	0.8rem !important;
		}
		
		label[for=comments]
		{
		   color:#848884;
		   font-size:0.8em !important;
		   background-color:lightcyan; /* lemonchiffon */
		}

		label[for=required]
		{
		   color:lightred;
		   font-size:0.8em !important;
		}

		label[for=labName]
		{
		   color:darkslategrey;
		   font-size:0.8em  !important;
		   font-weight:500;
		}

		label[for=info]
		{
		   color:#696969;
		   font-size:1.0em !important;
		   font-weight:600;
		}
		label[for=subinfo]
		{
		   padding-left:20px;
		}
		
		 .label-width 
		{
			width: 120px; /* Adjust the width as needed */
			display: inline-block; /* This ensures that width is applied */
		}
		
		.accordion button {
		font-size: 1.0rem !important;
		}
		
		select{
		  font-size:0.8rem !important;
		}
		
		input {
		 font-size:0.8rem !important;
		}
		
		.ltbox {
			width: 17em !important;
		}
		
		.button-15 {
			font-size: 15px !important;
			padding: 3px 12px !important;
			width: 90px !important;
		}
		
		.popup {
			min-width: 150px !important;
			max-width: 200px !important;
		}
		
		table {
			font: 12px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif !important;
		}
		
		.section.middle {
			padding: 0 10px !important;
		}
		
		iframe {
			width: 100vw !important; /* Full viewport width for smaller screens */
		}
		
		 .bAdColumn {
		/*flex: 1;
		padding: 20px 10px;*/
		border: 0px solid #ccc;
		text-align:left;
		width:100% !important;
	  }
}

@media only screen and (min-width: 1024px) and (max-width: 1032px) 
{
	.imgcontainer {
		height: calc(100vh - 360px);
	}
	
	.htab {
    padding: 0 6px !important;
    border: 0;
    background-color: #142740;
    color: white;
    margin-right: 8px;
    justify-content: center;
    font-size: 14px !important;
	}
}

@media only screen and (min-width: 820px) and (max-width: 900px) 
{
	.imgcontainer {
		height: calc(100vh - 360px);
	}
	
	.htab {
    padding: 0 5px !important;
    border: 0;
    background-color: #142740;
    color: white;
    margin-right: 8px;
    justify-content: center;
    font-size: 11px !important;
	}
}

@media only screen and (min-width: 901px) and (max-width: 932px) 
{
	.imgcontainer {
		height: calc(100vh - 360px);
	}
	
	.htab {
    padding: 0 5px !important;
    border: 0;
    background-color: #142740;
    color: #C8C8C8;
    margin-right: 8px;
    justify-content: center;
    font-size: 13px !important;
	}
}

@media only screen and (min-width: 321px) and (max-width: 1024px) 
{
	#show-div {
        display: none; /* Hide the navigation on mobile devices */
    }	
	
	
	.blue-div {
		background-color: #142740;
		height: calc(100vh - 110px);
		color: #C8C8C8;
		text-align: center;
		padding: 25px !important;
		/* border: 0 !important;*/
	}
}

@media only screen and (min-width: 431px) and (max-width: 768px) 
{
	.row br{
	display:none !important;	
	}
	.row{
		font-size:16px !important;
		height: 20px; /* Same height as the site name */	
	}
}

@media only screen and (min-width: 1100px) and (max-width: 1200px) 
{
	.ltheadAd{
		text-decoration:none;
		height: 9vw !important;
		position:absolute;
		bottom:0px;
		left:0px;
		width: auto;
		max-width: 100%;
	}
}

@media only screen and (max-width: 1100px) 
{
	.ltheadAd{
		display:none !important;
    }
}
@media only screen and (min-width: 321px) and (max-width: 768px) 
{
	body {
	max-width: 100% !important; /* This will ensure content doesn't exceed the viewport width */
	overflow-x: hidden !important; /* This hides horizontal scrollbar */
	font-size:	0.9rem !important;
	}

	/*  header nav {
	display: none;
	}*/

	#show-div {
	display: none; /* Hide the navigation on mobile devices */
	}

	#show-divH{
	display: none; /* Ensure the default display is set to block */
	}

	.font11em{
	font-size:	1.0rem !important;
	}

	.font20em{
	font-size:	1.5rem !important;
	}

	#hdrSmess{
	display:none;
	}

	.hrow {
	display: flex;
	/*padding: 10 0px !important;*/
	align-items: center;
	background-color:white;
	}
	header {
	justify-content:left;
	padding: 18 0 18 10px;
	}
	header h1 {
	padding-top:0px;
	font-size:2.2rem;
	font-weight:600;
	}

	h2{
	font-size:1.1rem;
	}

	/* footer nav {
	display: none;
	}*/

	#hamburger-icon {
	display: block;
	text-align:-webkit-right;
	padding: 5 15 0 0px !important;
	}

	#hamburger-icon div {
	background-color: gray !important;
	}
	.container {
	gap: 10px;
	}

	.ltbox {
	width: 80vw; /* This will make the text box take up the full width on screens smaller than 600px wide */
	/*width: 80vw;  This will make the text box take up 80% of the viewport width */
	max-width:240px;
	}
	.mtbox {
	width: 40vw;
	max-width: 180px
	}
	.stbox {
	width: 20vw;
	max-width: 90px
	}

	.main {
	/*padding: 10px;*/
	}

	.adWdth{	
	width:100%;
	display:block;
	padding: 20px;
	border: 1px solid grey;
	}

	ul li {
	flex:1;
	text-align:center;
	padding: 10px;
	margin: 0 auto;
	background-color: #6395b8; /*green;5da660  468cc2*/
	width:150px;
	/*border-right:1px solid white;*/
	}
	ul{
	z-index:999;
	}
	.wdth68{
	width:100%;
	}

	.ht70
	{
	height:85vh;
	}

	.ccPad
	{
	float:left; 
	width:45%; 
	border:0px; 
	padding:0px;
	}

	.modal {
	display: none;
	position: fixed;
	z-index: 20;
	left: 0 !important;
	top: 300;
	width: 90vw !important;
	height: 50vh !important;
	/* overflow: auto;
	background-color: rgba(0,0,0,0.4);*/
	}

	.modal-content {
	padding: 6px !important;
	}

	.box {
	width:90vw !important;
	border: 1px solid black;
	border-radius: 25px;
	padding: 25px !important;
	margin: 0px auto;
	height: fit-content;
	}

	.box.left {
	float: right;
	margin: 7px !important;
	background-color: lightgray;
	}

	.box.right {
	float: left;
	margin: 10px;
	background-color: lightgray;
	}

	.pc-tab section div {
	padding: 15 12 80 12px !important;
	/*width: 100%;*/
	border: 1px solid #ddd;
	background: white /*#f6faf8; #fff;*/
	line-height: 1.5rem;
	letter-spacing: 0.3px;
	color: #444;
	/* height:100%;   need to open so that body covers all area*/
	}

	.pc-tab section div h2 {
	margin-bottom: 10px !important;
	}

	.pc-tab section div div {
	padding: 5px !important; 
	}

	.columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding:0px !important;
	}

	.pad25s{
	padding:16px !important;
	}

	footer {
	bottom: 0;
	width: 100% !important;
	max-width: 1400px;
	position: fixed;
	}

	.font10em{
	font-size:	0.9rem !important;
	}
	.font11em{
	font-size:	1.0rem !important;
	}
	.font12em{
	font-size:	1.0rem !important;
	}
	.font15em{
	font-size:	1.3rem !important;
	padding-bottom: 5px;
	}
	.font08em{
	font-size:	0.7rem !important;
	}
	.font09em{
	font-size:	0.8rem !important;
	}

	label[for=comments]
	{
	color:#848884;
	font-size:0.8em !important;
	background-color:lightcyan; /* lemonchiffon */
	}

	label[for=required]
	{
	color:lightred;
	font-size:0.8em !important;
	}

	label[for=labName]
	{
	color:darkslategrey;
	font-size:0.8em  !important;
	font-weight:500;
	}

	label[for=info]
	{
	color:#696969;
	font-size:1.0em !important;
	font-weight:600;
	}
	label[for=subinfo]
	{
	padding-left:20px;
	}

	.label-width 
	{
	width: 120px; /* Adjust the width as needed */
	display: inline-block; /* This ensures that width is applied */
	}

	.accordion button {
	font-size: 1.0rem !important;
	}

	select{
	font-size:0.8rem !important;
	}

	input {
	font-size:0.8rem !important;
	}
	.ltbox {
	width: 22em !important;
	}
	.button-15 {
	font-size: 15px !important;
	padding: 3px 12px !important;
	width: 180px !important;
	}

	.popup {
	min-width: 175px !important;
	max-width: 200px !important;
	}

	.section.middle {
	padding: 0 10px !important;
	}

	iframe {
	width: 100vw !important; /* Full viewport width for smaller screens */
	}

	.row-container {
	display: flex;
	flex-direction: column;
	margin-left: 10px; /* Adjust as needed */
	background-color:white;
	}

	.row {
	height: 18px; /* Same height as the site name */
	background-color: white; /* Adjust color as needed */
	margin-bottom: 3px; /* Adjust spacing between rows */
	font-size:14px;
	color: #353836;
	}

	.header-text {
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 2px;
	}
	
	 .bAdColumn {
    /*flex: 1;
    padding: 20px 10px;*/
    border: 0px solid #ccc;
	text-align:left;
	width:100% !important;
  }
}
@media (max-width: 800px) {
	/* Adjust layout for smaller screens */
	.ccleft-content,
	.ccright-content {
		float: none;
		width: 100% !important;
	}
	.ccimg-container {
		left: 0; /* Reset left position */
		text-align: center; /* Center align the image */
	}
	.bAdColumn {
    /*flex: 1;
    padding: 20px 10px;*/
    border: 0px solid #ccc;
	text-align:left;
	width:100% !important;
  }
}

.wdth68{
		width:68%;
	}
	
.mrgb0{
		margin-bottom:0px;
	}

/* Use a responsive layout such as a grid or flexbox */
.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}



.ltbox {
  width: 60em;
  max-width: 360px;
 /* font-size-adjust:10;*/
}

.mtbox {
  width: 30em;
  max-width: 180px
}

.stbox {
  width: 15em;
  max-width: 90px
}

.xstbox{
	width:12em;
	max-width: 60px;
}

.font20em{
	font-size:	2rem;
}
.font10em{
	font-size:	1rem;
}
.font11em{
	font-size:	1.1rem;
}
.font12em{
	font-size:	1.2rem;
}
.font15em{
	font-size:	1.5rem;
	padding-bottom: 5px;
}
.font13em{
	font-size:	1.3rem;
	padding-bottom: 5px;
}
.font08em{
	font-size:	0.8rem;
}
.font09em{
	font-size:	0.9rem;
}

.pad10top{
	padding-top:10px;
}

.pad15top{
	padding-top:15px;
}

.pad20left{
	padding-left:20px;
}
.pad20right{
	padding-right:20px;
}
.pad20top{
	padding-top:20px;
}

.pad25top{
	padding-top:25px;
}

.pad15bot{
	padding-bottom:15px;
}

.pad10bot{
	padding-bottom:10px;
}
.pad05bot{
	padding-bottom:5px;
}

.pad10{
	padding:10px;
}
.pad20{
	padding:20px;
}

.pad25{
	padding:25px;
}

.pad25s{
	padding:25px;
}

.clrpnk{
	color:#ff21ff;
}

.clrskybl{
	color:#00aff0;
}
.clrred{
	color:red;
}

.clrlgray{
	color:#C0C0C0;
}

.clrpgreen{
	color:#98FB98;
}

.gray{
	color:gray;
}

.fntfmlyHelv{
	font-family: helvetica;
}
.bld{
	font-weight:600;
	color:#666;
}

.backclr{
	background-color:#00aff0;
}

.button-22:hover {
  color: 142740;
  text-decoration: none;
}

.button-22 {
  /*background-image: linear-gradient(#42A1EC, #6395b8);0070C9*/
  background-color: #00aff0;
  border: 4px solid white;
  border-radius: 22px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  direction: ltr;
  /*display: block;*/
  font-family: "Open Sans","SF Pro Text","SF Pro Icons","AOS Icons","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: -.022em;
  line-height: 1.47059;
  min-width: 30px;
  overflow: visible;
  padding: 4px 25px;
  text-align: center;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  width:212px;
  height: 46px;
}

.button-15 {
  background-image: linear-gradient(#42A1EC, #6395b8);/*0070C9*/
  border: 1px solid #0077CC;
  border-radius: 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  direction: ltr;
  /*display: block;*/
  font-family: "SF Pro Text","SF Pro Icons","AOS Icons","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.47059;
  min-width: 30px;
  overflow: visible;
  padding: 4px 15px;
  text-align: center;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  width:120px;
}

.button-15:disabled {
  cursor: default;
  opacity: .3;
}

.button-15:hover {
  background-image: linear-gradient(#51A9EE, #147BCD);
  border-color: #1482D0;
  text-decoration: none;
}

.button-15:active {
  background-image: linear-gradient(#3D94D9, #0067B9);
  border-color: #006DBC;
  outline: none;
}

.button-15:focus {
  box-shadow: rgba(131, 192, 253, 0.5) 0 0 0 3px;
  outline: none;
}

@media (max-Height: 500px) {
  .container {
	gap: 10px;
  }
}

/* Add styles for the home page layout here */
.section {
width: 100%;
margin: 0 auto;
}
.section.middle {
column-count: 2;
justify-content: center;
display: flex;
padding: 0 0 0 10px;
}

.columns {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10 10 5 10px;
}
.column {
	/*width: 100%;*/
}
.box {
width:25rem;
border: 0; /*1px solid black;*/
border-radius: 25px;
padding: 20px;
margin: 20px auto;
height: fit-content;
}
.box.left {
float: right;
margin: 20px;
background-color: lightgray;  /*#e8e8e8; #e0e0e0; lightgray*/
}
.box.right {
float: left;
margin: 20px;
background-color: lightgray;  /*#e8e8e8; #e0e0e0;lightgray*/
}

a{
	text-decoration: none;	
}

a:hover { color: #00aff0; text-decoration: none; font-weight: none; }
/*a:visited { color: green; text-decoration: none; font-weight: normal; }*/

ul li a {
  display: block;
  /*width: 100%;*/
  text-decoration: none;
  padding: 4px;
}

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

input[type="checkbox"] {
  padding: 3px;
  vertical-align: middle;
  margin-right:5px;
}

label[for=comments]
{
   color:#848884;
   font-size:0.9em;
   background-color:lightcyan; /* lemonchiffon */
}

label[for=required]
{
   color:lightred;
   font-size:0.9em;
}

label[for=labName]
{
   color:darkslategrey;
   font-size:0.9em;
   font-weight:500;
}

label[for=info]
{
   color:#696969;
   font-size:1.1em;
   font-weight:600;
}
label[for=subinfo]
{
   padding-left:20px;
}
label[for=text]
{
   padding-top:5px;
}

label[for=radio]
{
   align-items: center;
}

.label-width 
{
	width: 120px; /* Adjust the width as needed */
	display: inline-block; /* This ensures that width is applied */
}
	
.lnspace{
	line-height: 1.6rem;
  letter-spacing: 0.4px;
}

.lnspace13{
	line-height: 1.3rem;
  letter-spacing: 0.4px;
}

.pc-tab > input,
.pc-tab section > div {
  /*display: none;*/
  
}
/*
#tab1:checked ~ section .tab1,
#tab2:checked ~ section .tab2,
#tab3:checked ~ section .tab3 {
  display: block;
}

#tab1:checked ~ nav .tab1,
#tab2:checked ~ nav .tab2,
#tab3:checked ~ nav .tab3 {
  color: red;
}
*/
/* Visual Styles */
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.pc-tab {
  width: 100%;
  /*max-width: 1200px;*/
  margin: 0 auto;
  /*height: calc(100vh + 20em); -- footer adjustment*/  
  background-color:white ; /*#f6faf8;*/
  
}
.pc-tab ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pc-tab ul li{
  list-style: none;
  margin: 0;
  padding: 0;
 /* background-color:#ecf0f1;*/
  width:100%;
}

.pc-tab ul li label {
  font-family: 'Raleway';
  float: left;
  padding: 15px;
  border: 1px solid #ddd;
  border-bottom: 0;
  background: #eeeeee;
  color: darkslategrey;
  width:100%;
  font-weight:550;
}
.pc-tab ul li label:hover {
  background: #dddddd;
  outline: 5px auto;
}
.pc-tab ul li label:active {
  background: #ffffff;
}
.pc-tab ul li:not(:last-child) label {
  border-right-width: 0;
}

.pc-tab ul li:last-child label {
  border-right-width: 0px;
}

.pc-tab section {
  font-family: 'Droid Serif';
  clear: both;
  background-color:	white; /*#f6faf8;*/
  min-height: calc(100vh - 210px);
}
.pc-tab section div {
  padding: 15 25 80 25px;
  /*width: 100%;*/
  border: 1px solid #ddd;
  background: white /*#f6faf8; #fff;*/
  line-height: 1.5rem;
  letter-spacing: 0.3px;
  color: #444;
 /* height:100%;   need to open so that body covers all area*/
}
.pc-tab section div h2 {
  margin: 0;
  font-family: 'Raleway';
  letter-spacing: 1px;
  color: #34495e;
  margin-bottom:15px;
}

.pc-tab section h2 {
  margin: 0;
  font-family: 'Raleway';
  letter-spacing: 1px;
  color: #00aff0;
  /*margin-bottom:15px;*/
  background-color:white;
  padding-left:25px;
}

.pc-tab section div input {
  padding: 3px;  
  margin-bottom:8px;
  font-size:1rem;
}

.pc-tab section div input[type="radio"] {
  margin-top: 3px;
  vertical-align: middle;
}

.pc-tab section div div.accordion {
	padding:0px;
	/*border:0px;*/
}
.pc-tab section div form div {
	padding:15px;
	/*border:0px;*/
}

.pc-tab section div div div.accordion-item {
	padding:10 10 10 10px;
	border:0px;
}
.pc-tab section div form div div{
	/*padding:0 10px;
	padding-bottom:3px;*/
}
.pc-tab section form div div{
	padding:15px;
	padding-bottom:10px;
}

.pc-tab section div div{
	padding:15px;
	padding-bottom:10px;
	line-height: 1.5;
}

/*
#tab1:checked ~ nav .tab1 label,
#tab2:checked ~ nav .tab2 label,
#tab3:checked ~ nav .tab3 label {
  background: white;
  color: green;
  position: relative;
}
#tab1:checked ~ nav .tab1 label:after,
#tab2:checked ~ nav .tab2 label:after,
#tab3:checked ~ nav .tab3 label:after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #ffffff;
  left: 0;
  bottom: -1px;
}
*/
select{
  border: 1px solid gray;
  padding: 3px;
  border-radius: 1px;
  margin-bottom:8px;
  font-size:1rem;
}

select:focus{
  outline:none;
}


/* Collapsible accordian
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
*/


.accordion {
  width: 100%;
  /*max-width: 1200px;*/
  margin: 0 auto;
}

.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e5;
}
.accordion .accordion-item button[aria-expanded=true] {
  border-bottom: 1px solid #03b5d2;
}

.accordion-item button[aria-expanded=false] {
  padding-top:5px;
}

.accordion button {
 /* position: relative;*/
  display: block;
  text-align: left;
  width: 100%;
  padding: 0px;/*1em 0 */
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}
.accordion button:hover, .accordion button:focus {
  cursor: pointer;
  color: #03b5d2;
}
.accordion button:hover::after, .accordion button:focus::after {
  cursor: pointer;
  color: #03b5d2;
  border: 1px solid #03b5d2;
}
.accordion button .accordion-title {
  padding: 1em 1.5em 1em 2em;
}
.accordion button .icon {
  display: inline-block;
  position: absolute;
  /*top: 0px;
  right: 0;
  left:5px;*/
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}
.accordion button .icon::before {
  display: block;
  position: absolute;
  content: "";
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}
.accordion button[aria-expanded=true] {
  color: #03b5d2;
  height:36px;
}
.accordion button[aria-expanded=true] .icon::after {
  width: 0;
  top:-20px;
}
.accordion button[aria-expanded=true] + .accordion-content {
  opacity: 1;
  max-height:none; /*9em;*/
  transition: all 200ms linear;
  will-change: opacity, max-height;
  position:sticky;
  width:100%;
}

.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
  display:inline-block;
}
.accordion .accordion-content p {
  font-size: 1rem;
  font-weight: 300;
  margin: 0px;
  /*height:100%;*/
}

/*  Table CSS */
table {
  border-collapse: separate;
  border-spacing: 0;
  color: #4a4a4d;
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
th,
td {
  padding: 4px 6px;
  vertical-align: middle;
}
thead {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
}
th:first-child {
  border-top-left-radius: 5px;
  text-align: left;
}
th:last-child {
  border-top-right-radius: 5px;
}
tbody tr:nth-child(odd) {
  /*background: #e6eaf0; e6eaf0 f0f0f0 #f0f0f2;*/
}
/*
td {
  border-bottom: 1px solid #cecfd5;
  border-right: 1px solid #cecfd5;
}
td:first-child {
  border-left: 1px solid #cecfd5;
}
*/
.book-title {
  color: #395870;
  display: block;
}
.text-offset {
  color: #7c7c80;
  font-size: 12px;
}
.item-stock,
.item-qty {
  text-align: left;
}
.item-price {
  text-align: right;
}
.item-multiple {
  display: block;
}
tfoot {
  text-align: right;
}
tfoot tr:last-child {
  background: #f0f0f2;
  color: #395870;
  font-weight: bold;
}
tfoot tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
tfoot tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}
tbody th {
  color: #a9b2b9;
  font-size: 14px;
  font-weight: 400;
  /* padding-top: 22px;
 text-transform: uppercase;*/
}
.hd2 {
  display: none;
}

.show-div:checked + .hd2 {
  display: block;
}

.modal {
  display: none;
  position: fixed;
  z-index: 20;
  left: 130;
  top: 200;
  width: 600px;
  height: 67vh;/*500px;*/
 /* overflow: auto;
  background-color: rgba(0,0,0,0.4);*/
}

#overlay {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none;
}

.modal-content {
  background-color: white;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 500px;
  position: relative;
}

.close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

.popup {
    display: none;
    position: absolute;
	min-width: 500px; /* Set a minimum width for the pop-up */
    max-width: 600px; /* Set a maximum width to prevent excessive width */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    padding: 15px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 8px;
    z-index: 1;
	top: 0px; /* Adjust this value as needed */
    left: 20px;
	color:gray;
}

/* Optional styling for the popup container */
.popup-container {
    position: relative;
    display: inline-block; /* To wrap the image and popup together */
}

.circle {
  width: 16px;
  height: 16px;
  background-color: rgba(52, 152, 219, 0.5);  /*#aad4f5;  #c5defe  #3498db; #f08080 #c1e6c7 Circle background color */
  border-radius: 50%; /* Create a circular shape */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

.circle i {
  color: #ffffff; /* Icon color */
  font-size: 10px; /* Icon size */
}

.rcircle {
  width: 16px;
  height: 16px;
  background-color: rgba(52, 152, 219, 0.5); ;  /*#aad4f5;  #c5defe  #3498db; #f08080 #c1e6c7 Circle background color */
  border-radius: 50%; /* Create a circular shape */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
  color: red;
}

.ispace{
	display: inline-block; 
	min-width: 180px; 
	white-space: nowrap;
}

.ispace1{
	display: inline-block; 
	min-width: 205px; 
	white-space: nowrap;
}

.ccPad{
	float:left; 
	width:55%; 
	border:0px; 
	padding:0px;
}
.tel-icon {
	font-size: 18px; /* Adjust the size as needed */
}

.fax-icon {
	font-size: 14px; /* Adjust the size as needed */
}

.ccwrapper::after 
{
	content: "";
	display: table;
	clear: both;
}

.ccleft-content {
	float: left;
	width: 45%;
	padding: 0px !important; /* Adjust padding as needed */
  /*  box-sizing: border-box;  Include padding and borders in width calculation */
}

.ccright-content {
	float: right;
	width: auto;
	padding: 0px !important; /* Adjust padding as needed */
	/*box-sizing: border-box;  Include padding and borders in width calculation */
}

.ccright-content .img-container {
	text-align: center; /* Center the image horizontally */
}

.imgcls {
	max-width: 100%;
	height: auto;
}

/*
.ccwrapper {
	overflow: hidden; 
}

.ccleft-content {
	float: left !important;
	width: 45% !important;
	border: 0;
	padding: 0;
}

.ccright-content {
	float:right !important;
	width:auto; 
	padding:0px; 
	border:0; 
	text-align:left; 
	position:relative; 
	left:-50px;
	
}
.ccimg-container {
	display: inline-block;
	position: relative;
	left: -50px;
}
.imgcls {
	width: 350px;
	max-width:100%;
	height: auto;
}
*/

.htbr {
  line-height: 10px;
}

.spacer {
    padding: 5px; /* Adjust the margin as needed for spacing */
}

.spacer2 {
    padding: 2px;
}

.spacer3 {
    padding: 3px;
}

.spacer8 {
    padding: 8px;
}
/* Style for camera icon */
#cameraIcon {
    width: 25px; /* Adjust icon size as needed */
    height: 20px;
    cursor: pointer;
}

.custom-file-input {
    display: flex;
    align-items: center;
}

.custom-file-input input[type=file] {
    display: none;
    /* Add additional styling as needed */
}
.algCenter{
	text-align:center;
}


.testimonial-slide {
    display: none;
	padding:25px;
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 10px;
    background-color: #142740; /*#bbb;*/
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.4s ease;
    cursor: pointer;
}



.slideshow-container {
    position: relative;  /*Add relative positioning */
	text-align: center;
	width:100%;
	padding-bottom:15px;
}

.navigation {
    /*position: absolute; */  /* Position arrows and dots relative to slideshow container */
    left: 0;
    right: 0;
    bottom: 10px; /* Adjust as needed */
    text-align: center;
}

.dot-container {
    display: inline-block; /* Make dot container inline-block */
    margin-right: 10px; /* Adjust spacing between dots and arrows */
	text-align: center;
}

.prev,
.next {
    display: inline-block;
    font-size: 20px;
    cursor: pointer;
}

.prev {
    margin-right: 10px; /* Adjust spacing between arrows */
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 15px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.active {
    background-color: #142740;
}
/*
.active {
    background-color: #142740;  #717171;
}
*/
.blue-div {
    background-color: #142740;
    
	color:#C8C8C8;
	text-align: center;
	padding:20px;
}

.selected 
{
   color:#00aff0 !important;
}

.htabs 
{
	display: flex;
	background-color: #142740;
	color: #C8C8C8;
	padding : 10px;
	justify-content:center;
	text-align: center;
}

.htab {
	padding: 0 12px; /* Adjust padding as needed */
	border: 0;
	background-color: #142740;
	color: white;
	margin-right: 10px; /* Adjust margin between tabs */
	justify-content:center;
}

.htab a{
	background-color: #142740;
	color: white;        
}

.htab a:hover { color: #00aff0; text-decoration: none; font-weight: none; }
.htab:last-child {
	margin-right: 0; /* Remove margin from the last tab */
}

.ltrspce{
	letter-spacing: 0.3px;
}

.clrdrkBl{
	color:#142740;
}

/*  Ad Container --- */

.bAdContainer {
        width: 100%;
        display: flex;
		padding:30px;
    }
    .left-column {
        width: 60%;
        display: flex;
        flex-direction: column;
    }
    .right-column {
        width: 40%;
        text-align: center;
    }
    .left-inner-row {
        display: flex;
        justify-content: space-between;
    }
    .left-inner-column {
        width: 48%; /* Adjusted width to accommodate for spacing */
        text-align: left;
    }
    .right-aligned {
        text-align: right;
    }

/* Style for the two columns */
  .adContainer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 30 30 10 30px;
  }
  
  .bAdColumn {
    /*flex: 1;
    padding: 20px 10px;*/
    border: 0px solid #ccc;
	text-align:left;
	/*width:33%;*/
  }
  
  /* Style for the ad */
  .ad {
    width: 100%; /* adjust as needed */
    height: 100%; /* adjust as needed */
    background-color: #142740;
    text-align: center;
    line-height: 250px;
  }

/* Hide the ad initially */
  .ad.hidden {
    opacity: 0;
  }

  .wselected {
    color: white !important;
}

.bAdColumn a:hover {
        color: #00aff0; /* Change this to the desired color */
    }
	
  .image-container1 {
  display: flex;
  justify-content: space-between; /* Distribute items evenly with equal space between them */
  align-items: center; /* Align items vertically in the center */
  background-color: #142740;
}

.image-container1 img {
  width: 30%; /* Adjust the width as needed */
  height: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Ensure images don't exceed container width */
}

 .pngimage 
 {
	width: 100px;
	height: 100px;
	margin-left: 10px;			
	position: absolute;
	/*top: 0;
	left: 280px;*/ /* Adjust this value to position the image */           
}


.column-80 {
  grid-column: 1 / span 1;
}

.column-20 {
  grid-column: 2 / span 1;
}

.ltheadAd{
	text-decoration:none;
	height: 11vh;
	position:absolute;
	bottom:0px;
	left:0px;
	width: auto;
	max-width: 100%;
}