* {
margin: 0 0 0 0;
padding: 0 0 0 0
}

body {
	max-width: 1200px;
	margin: 0 auto;
	color: #000;
	background: #FFF;
	font-family:arial, tahoma, calibri, serif, sans-serif;
	font-style: normal;
	font-weight: normal;
	}

img, form input, form textarea {
	max-width: 100%;
	}
	

header {
	width: 100%;
	background: #ffffff;
	float: left;
	}

nav {
	width: 100%;
	background: #fff;
	float: left;
	display: table;
	}

header img {
	float: left;
	padding: 2% 2%;
	box-shadow:none
	}

section.content-background {
	width:100%;
	background: #ffffff;
	float: left;
	}
	
section.introduction {
	width: 90%;
	float: left;
	padding: 0 5%
	}

/* 2 column set up */
section.left {
	width: 42.5%;
	padding: 0 2.5% 0 5%;
	float: left;
	}

section.right {
	width: 42.5%;
	padding: 0 5% 0 2.5%;
	float: left;
	}

section.single-column {
	width: 90%;
	background: #ffffff;
	padding: 0 5%;
	float: left;
	}

footer {
	width: 100%;
	background: #9e9e9e;
	float: left
	}

h1 {
  font-family: Arial, sans-serif;
  font-weight: 300;
  font-style: oblique,
  font-size: 20px;
  text-align: center;
  color: #000;
  line-height: 1.5;
  padding: 2% 0%;
  text-shadow: none;
}

h2 {
  font-family: Tahoma, Calibri, serif, sans-serif;
  font-weight: 700;
  font-style: bold, 
  font-size: 26px;
  text-align: center;
  color: #000;
  line-height: 1.5;
  padding: 2% 0%;
  text-shadow: none;
}

h3 {
  font-family: Calibri, serif, sans-serif;
  font-weight: 500;
  font-style: bold;
  font-size: 24px;
  text-align: center;
  color: #000;
  line-height: 1.5;
  padding: 2% 0%;
  text-shadow: none;
}

h4 {
  font-family: Tahoma, Calibri, serif, sans-serif;
  font-weight: 400;
  font-style: bold;
  font-size: 22px;
  text-align: center;
  color: #000;
  line-height: 1.5;
  padding: 2% 0%;
  text-shadow: none;
}

h5 {
  font-family: Tahoma, Calibri, serif, sans-serif;
  font-weight: 400;
  font-style: bold;
  font-size: 18px;
  text-align: center;
  color: #000;
  line-height: 1.5;
  padding: 2% 0%;
  text-shadow: none;
}	
	
	/* Previous and Next Buttons Start */
a {
  text-decoration: none;
  display: inline-block;
  padding: 1px 2px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
}

.next {
  background-color: #04AA6D;
  color: white;
}	
/* Previous and Next Buttons End */
	
.displayUnderline
{
	text-decoration:underline;
}

/* third example */
.call-outs-container {
  max-width: 1400px;
  margin: 40px auto 0 auto;
  }
  
.call-out {
  padding: 20px;
  box-sizing: border-box;
  border:0px #FFF ;
  margin-bottom: 20px;
  flex-basis: 30%;
}

.call-out-2cborder{
  padding: 10px;
  box-sizing: border-box;
  border:0.5px #28FA02;
  margin-bottom: 10px;
  flex-basis:48%;
}	

.call-out-2c{
  padding: 10px;
  box-sizing: border-box;
  border:0px #FFF none;
  margin-bottom: 10px;
  flex-basis:48%;
}	

.call-out-3c {
  padding: 10px;
  box-sizing:border-box;
  border:0px #FFF none;
  margin-bottom: 10px;
  flex-basis: 30%;
}		

.call-out-4c{
	padding:8px;
	box-sizing:border-box;
	border:0.05px #E5E5E5 none;
	margin-bottom:8px;
	flex-basis:22%;
	}	
.call-out-5c{
	padding:5px;
	box-sizing:border-box;
	border:none #FFF none;
	margin-bottom:5px;
	flex-basis:18%;
	}	
.call-out-6c{
	padding:10px;
	box-sizing:border-box;
	border:0.3px #E5E5E5 solid;
	margin-bottom:10px;
	flex-basis:16%;
	}		

@media (min-width: 900px) {
  .call-outs-container {
    display: flex;
    justify-content: space-between;
  }
}
	
.call-out:nth-child(1) {background-color: #c0dbe2;}
.call-out:nth-child(2) {background-color: #cdf1c3;}
.call-out:nth-child(3) {background-color: #ccb9da;}

.call-out-2cborder:nth-child(1){background-color: #fff;}
.call-out-2cborder:nth-child(2){background-color: #fff;}
	
.call-out-2c:nth-child(1){background-color:#FFF;}
.call-out-2c:nth-child(2){background-color:#FFF;}

.call-out-3c-border:nth-child(1) {background-color: #fff;}
.call-out-3c-border:nth-child(2) {background-color: #fff;}
.call-out-3c-border:nth-child(3) {background-color: #fff;}

.call-out-3c:nth-child(1) {background-color: #fff;}
.call-out-3c:nth-child(2) {background-color: #fff;}
.call-out-3c:nth-child(3) {background-color: #fff;}

.call-out-4c:nth-child(1) {background-color: #FFF;}
.call-out-4c:nth-child(2) {background-color: #FFF;}
.call-out-4c:nth-child(3) {background-color: #FFF;}
.call-out-4c:nth-child(4) {background-color: #FFF;}

.call-out-5c:nth-child(1) {background-color: #FFF;}
.call-out-5c:nth-child(2) {background-color: #FFF;}
.call-out-5c:nth-child(3) {background-color: #FFF;}
.call-out-5c:nth-child(4) {background-color: #FFF;}
.call-out-5c:nth-child(5) {background-color: #FFF;}

.call-out-6c:nth-child(1) {background-color: #FFF;}
.call-out-6c:nth-child(2) {background-color: #FFF;}
.call-out-6c:nth-child(3) {background-color: #FFF;}
.call-out-6c:nth-child(4) {background-color: #FFF;}
.call-out-6c:nth-child(5) {background-color: #FFF;}
.call-out-6c:nth-child(6) {background-color: #FFF;}	


/* Two Two BTN End-Index */	

h1 a {color: #000; text-decoration: none; }
p a {color: #0057A3; text-decoration: none; } 
a {color: #0057A3; text-decoration: none; } 

hr {
	color:#9e9e9e;
	background-color:#dedede;
	height: 0.5px;
	width: 60%;
	margin: 0 auto
	}

p {
	font-family:Calibri, serif, sans-serif; 
	font-size: 16px;
	text-align: left;
	text-indent: 0.1px ;
	line-height: 1.5;
	text-indent : 0px ;
	padding:1% 0% 1% 0%;
	}

p a {
	color: #0029A3
	}

p a:visited {
	color: #001D75
	}

p.clear {
	clear: both
	}

	section.left img,  section.right img, section.single-column img {
	margin: 2% 2%;
	border: None solid #000000 1px;
	box-shadow: 0px 0px 0px #FFF;
	}

	footer p {
	color: #888;
	font-size: 16px;
	text-align: center;
	padding: 0 0 .5% 0
	} 

	footer p a {
	color: #999
	}

	pre {
	font-family: arial, verdana,  tahoma , serif;
	font-style: normal;
	font-weight: normal
	}

.site-header, footer {
background-color: #FFF;
color:  #777;
padding: 1em;
text-align: center;
}
main {
padding: 2em;
}
section {
margin-bottom: 3em;
}

nav a {
color: white;
margin: 0 0.5em;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}

  /*NEW button CSS*/	
   .my-button {
    /* Default appearance */
    background-color: #02A20C; /* Green background */
    border: none;
    color: white; /* White text */
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer; /* Changes mouse cursor to a hand */
    border-radius: 8px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition for the hover effect */
}

.my-button:hover {
    /* Appearance on hover */
    background-color: #02CF10; /* light green background on hover */
    /* You can add other hover effects here, for example: */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
}
     

	 
	  
	.btn {
  background-color: var(--btn-color);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
  background-color: var(--btn-hover);
  transform: scale(1.05);
}

.btn:active {
  transform: scale(0.97);
}  
	  
	  
	  /* Remove underline from the wrapping <a> tags */
a {
  text-decoration: none;
}

/* Add a little spacing between buttons */
.btn {
  margin: 4px;
}
	}  
	  
	/*  button favorite styled  */  
	  .styled {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px black;
  border-radius: 10px;
  background-color: tomato;
  background-image: linear-gradient(
    to top left,
    rgb(0 0 0 / 0.2),
    rgb(0 0 0 / 0.2) 30%,
    transparent
  );
  box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 0.6),
    inset -2px -2px 3px rgb(0 0 0 / 0.6);
}

.styled:hover {
  background-color: red;
}

.styled:active {
  box-shadow:
    inset -2px -2px 3px rgb(255 255 255 / 0.6),
    inset 2px 2px 3px rgb(0 0 0 / 0.6);
}
		/*  button favorite styled  */