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

body {
max-width: 1200px;
margin: 0 auto;
color: #000;
background: #fafafa;
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: #fafafa;
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: #fafafa;
float: left
}

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

h2 {
font-family: tahoma, serif, sans-serif;
font-style: bold;
font-weight: 700;
font-size : 24px;
text-align :center;
color : #5b04b8;
line-height: 1.5;
padding: 2% 0;
text-shadow: none 1px 1px 1px #999 }

h3 {
font-family: tahoma, serif, sans-serif;
font-size : 22px;
font-style: bold;
font-weight: 700;
text-align :center;
color : #000;
line-height: 1.5;
padding: 2% 0;
text-shadow: none 1px 1px 1px #999 }

h4 {
font-family: tahoma, serif, sans-serif;
font-style: bold;
font-weight: 700;
font-size : 18px;
text-align :center;
color : #000;
line-height: 1.5;
padding: 2% 0;
text-shadow: none 1px 1px 1px #999 }

h5 {
font-family: tahoma, serif, sans-serif;	
font-weight:400;
font-size : 17px;
text-align :left;
color : #333;
line-height: 1.5;
padding: 1.3% 0;
text-shadow: none;}

/* third example */
.call-outs-container {
  max-width: 1400px;
  margin: 40px auto 0 auto;
  }

.call-out {
  padding: 4px;
  box-sizing: border-box;
  border:1px #999 solid;
  font-size :15px;
  color: #fff;
  margin-bottom: 4px;
  flex-basis: 30.66%;
}

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

.call-out-3c {
  padding: 10px;
  box-sizing: border-box;
  border:none #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: #f5ec42;}
.call-out:nth-child(2) {background-color: #b6f542;}
.call-out:nth-child(3) {background-color: #42f5e6;}

.call-out-2c:nth-child(1) {background-color:#FFF;}
.call-out-2c:nth-child(2) {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;}

.button {
  background-color: #008080;
  border: none;
  color: white;
  padding: 15px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.buttonBlack {
  background-color: white; 
  color: black; 
  border: 2px solid #000000;
}

.buttonBlack:hover {
  background-color: #000000;
  color: white;
}

/* Apply margin around all images in these sections */
section.left img,
section.right img,
section.single-column img {
    display: block; /* Ensures text flows above/below, not beside */
    margin: 2.5%;   /* Adds space outside the image */
    border: 1px solid #000000;
    box-shadow: 5px 5px 10px #2e2e2e;
    max-width: 100%;
}

.displayUnderline {
	text-decoration:underline;
}

.contact-button {
  display: inline-block;
  background-color: #007BFF; /* Bootstrap blue */
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 28px;
  transition: background-color 0.3s ease;
}
.contact-button:hover {
  background-color: #0056b3;
}

h1 a {color: #000; text-decoration: none; }
p a {color: #045BB8; text-decoration: none; } 
a {color: #0704B8; text-decoration: none; } 

hr {
color : #0033cc;
background-color : #00248f;
height: 1px;
width: 60%;
margin: 0 auto
}

p {
font-family:calibri, sans-serif;
font-size : 16px;
text-align : left;
text-indent : 0px ;
line-height: 1.5;
padding: 1% 0;
 }
 
p a {
color: #5b04b8
}

p a:visited {
color: #3e0491
}

p.clear {
clear: both
}

section.left img,  section.right img, section.single-column img {
margin: .5% 2.5%;
border: solid #000000 0px;
box-shadow:none 0px 0px 0px #000000; 
}

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

footer p a {
color: #434343}

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

/*  something  */

.image-row {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Align vertically */
  gap: 20px;               /* Space between images */
  flex-wrap: wrap;         /* Allows wrapping on small screens */
}

.image-row img {
  width: 200px;   /* Adjust width as needed */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.service-section {
  padding: 2rem;
  background-color: #fff;
}

.services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
}

.service-card {
  flex: 1 1 calc(33.333% - 1rem); /* 3 cards per row on desktop */
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  min-width: 250px;
}

.service-card h5 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.service-card p {
  margin: 0.3rem 0;
  color: #555;
}

.service-card span {
  display: block;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

/* Responsive: Stack on small screens */
@media (max-width: 768px) {
  .service-card {
    flex: 1 1 100%;
  }
}