:root {

 --shadow-color:0deg 0% 0%;
  --shadow-elevation-low:
    0.3px 0.5px 0.9px hsl(var(--shadow-color) / 0),
    0.5px 1px 1.7px hsl(var(--shadow-color) / 0.26),
    1.1px 2.1px 3.6px hsl(var(--shadow-color) / 0.52);
  --shadow-elevation-medium:
    0.3px 0.5px 0.9px hsl(var(--shadow-color) / 0),
    1.3px 2.6px 4.4px hsl(var(--shadow-color) / 0.2),
    2.6px 5.2px 8.7px hsl(var(--shadow-color) / 0.41),
    5.3px 10.6px 17.8px hsl(var(--shadow-color) / 0.61);
  --shadow-elevation-high:
    0.3px 0.5px 0.9px hsl(var(--shadow-color) / 0),
    2.9px 5.8px 9.7px hsl(var(--shadow-color) / 0.09),
    5.1px 10.3px 17.2px hsl(var(--shadow-color) / 0.19),
    7.5px 15.1px 25.3px hsl(var(--shadow-color) / 0.28),
    10.5px 21px 35.2px hsl(var(--shadow-color) / 0.38),
    14.6px 29.2px 49px hsl(var(--shadow-color) / 0.47),
    20.3px 40.5px 68px hsl(var(--shadow-color) / 0.56),
    28px 56px 93.9px hsl(var(--shadow-color) / 0.66);
}
.threed{
  box-shadow: var(--shadow-elevation-low), inset 3px 3px 3px 0px rgb(255 255 255 / 50%);
}
.index-intro-hr {
  background-color: #f7d875; width: 90%; max-width: 99%; height: 3px; border-radius: 25px; margin-left: auto;
}

.index-intro-h1 {
 font-size:  clamp(1rem, 0.8043rem + 0.9783vw, 1.5625rem);
 color: #f7d875; text-decoration: none;
 margin-top: 0;
 font-weight: normal;

}
.index-intro-h2 {
  font-weight: 100;  color:#f2fff7; text-decoration: none;
  font-size: clamp(1rem, 0.8043rem + 0.9783vw, 1.5625rem);
  margin-bottom: 0px;
}

.index-intro-div {
  display: flex; flex-direction: column; background-color: #009a44;
}
.index-intro-div h2 {
   color: #f7d875; font-weight: 100; margin-top: auto; margin-bottom: auto; text-decoration: none;
}

.index-header-column {
  flex: 50%; 
  align-items: center; 
  flex-direction: column; 
  padding: 5px;
}

.qa h3 {
  text-decoration: none;
  margin: 0px;
  font-size: clamp(0.75rem, 0.5761rem + 0.8696vw, 1.25rem);
}

.qa {
 max-width: 900px;
   margin: auto;
   margin-bottom: 10px;
article {
  background-color: #f2fff7;
  padding: 5%;
  color: #009a44;

}

  summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 15px;
  font-weight: bold;
  text-shadow: #f2fff7 1px 1px 1px;
   
}

summary::after {

  content: '';
  width: 0; 
  height: 0; 
  border-top: 15px solid #009a44;
  border-inline: 10px solid transparent;
  transition: 0.2s;

}

details[open] > summary {border-bottom: 2px solid #f2fff7;}

details[open] > summary::after {
  transform: rotate(-180deg);
}

summary::-webkit-details-marker {
  display: none;
}
summary::marker {
  color:#009a44;
}
summary {
  color: #009a44;
  border-radius: 5px;
}

details[open] summary {border-radius: 5px 5px 0 0;}

details {
  background: #d5b555;
  padding: 10px;
  border-radius: 15px;
  border: #009a44 1px solid;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: var(--shadow-elevation-low), inset 5px 5px 5px 0px rgb(255 255 255 / 50%);
    cursor: pointer;
}



}

body{
    font-family: 'Montserrat', sans-serif;
    padding: 0px;
    margin: 0px;
    text-size-adjust: 100%;
    font-size: clamp(0.75rem, 0.663rem + 0.4348vw, 1rem);
   background-color: #f2fff7;
  
}

.menu-logo-image {
max-width: 50%; 
height: auto;
 padding-bottom: 10px;
}

.header-logo-image {
  max-width: 100%; 
  margin: auto; 
}

.index-logo {
  max-width: 100%; width: 100%; min-width: 150px;  height: auto;
}
.index-aat-logo-div {
  max-width: 400px; flex: 1 1 300px;
}
.index-aat-logo {
  width: 100%;  height: auto; 
}
.index-aat-wording {
  text-align: center; font-size: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);; max-width: 550px;
}

small {
  line-height: 1px;
}

footer {
  background-color: #007a34;
  color: #f7d875;
  text-align: center;
  padding: 20px;
  position: relative;
  bottom: 0;
  
}
.about-profile{
  text-align: center;
  border: #F7D875 1px solid;
  border-radius: 25px;
  width: fit-content;
  flex: content;
  margin: auto;
  padding: 15px;
  box-shadow: var(--shadow-elevation-medium), inset 5px 5px 5px 0px rgb(255 255 255 / 50%);
}
.about-profile h4{
  margin: 5px;
}
.about-image {
  max-width: 100%; 
  height: auto; 
  margin: auto;
  border-radius: 25px; 
  box-shadow: inset 5px 5px 20px 2px rgb(255 255 255 / 50%), inset -5px -5px 20px 2px rgb(0 0 0 / 50%), 1px 1px 20px 1px rgb(0 0 0 / 33%), -1px -1px 20px 1px rgb(0 0 0 / 27%);
    box-shadow: var(--shadow-elevation-low), inset 5px 5px 5px 0px rgb(255 255 255 / 50%);
}

.header-container {
  display: flex; 
   max-width: 100%; 
   background-color: #009a44; 
   color: white; 
   padding: 10px; 
   flex-wrap: wrap; 
   gap: 7px; 
   justify-content: space-between;
  border-bottom: 4px groove;
}
.header-container-index {
  display: flex; 
   max-width: 100%; 
   background-color: #009a44; 
   color: white; 
   padding: 10px; 
   flex-wrap: wrap; 
   gap: 7px; 
   justify-content: space-between;
  
}
.header-title-container {
  align-content: center; 
  flex: 3 3 300px;
}

h1{
  font-size:  clamp(1.0625rem, 0.4538rem + 3.0435vw, 2.8125rem);
  color: #009a44; text-align: center; text-decoration: underline;
}
h2{
  font-size:  clamp(1rem, 0.6522rem + 1.7391vw, 2rem);
  color: #009a44; text-align: center; text-decoration: underline;
  font-weight: normal;

}
.sub-hone{
  color: #f7d875;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-weight: normal;
  text-shadow: 1px 1px 2px #000000;
  
}
h3{
 font-size: clamp(0.875rem, 0.7228rem + 0.7609vw, 1.3125rem);
 color: #007a34;
 margin-bottom: 0px;
}
a{
  color: #007a34;
 
  transition: color 0.3s ease;
}

p{
  margin-top: 5px;
}

ul {
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
  padding-left: 35px;
  text-align: left;
}

.hero{
  margin: auto;
  margin-top: 30px;
  text-align: center;
  border: #F7D875 1px outset;
  border-radius: 25px;
  padding: 15px;
  box-shadow: inset 5px 5px 20px 2px rgb(255 255 255 / 50%), inset -5px -5px 20px 2px rgb(0 0 0 / 50%), 1px 1px 20px 1px rgb(0 0 0 / 33%), -1px -1px 20px 1px rgb(0 0 0 / 27%);
  background: #009a44;
 cursor: pointer;
  color: white;
  width: 75%;
  max-width: 800px;
  box-shadow: var(--shadow-elevation-medium), inset 5px 5px 5px 0px rgb(255 255 255 / 50%);
   text-shadow: #000000 1px 1px 2px;
   line-height: 1.2;
}
.hero a{
  text-decoration: none;
  color: #fff9f1;

}
.hero-header{
  color: #d5b555; 
  text-decoration: none; 
  margin: 0px; 
  font-size:  clamp(0.75rem, 0.4674rem + 1.413vw, 1.5625rem);
  text-shadow: 1px 1px 2px #000000;
  font-weight: normal;
}
.logo-image-index{
flex: 40%;
max-width: 40%;
min-width: 200px;
margin: auto;
padding: 10px;
max-width: 20%; 
flex: 1 1 150px;
}
.logo-image{
flex: 40%;
max-width: 40%;
min-width: 130px;
margin: auto;
padding: 10px;
max-width: 10%; 
flex: 1 1 150px;
}
@media (max-width: 800px) {
  .logo-image{
    flex: 100%;
  }
}

.footer-base-link {
  border: 1px solid #d5b555;
  padding: 2px;
  border-radius: 25px;
flex: 1 1 150px;
color:#f2fff7;
text-decoration: none;
  background-color: #009a44;
  transition: background-color 0.3s ease, color 0.3s ease;  
    box-shadow: var(--shadow-elevation-low), inset 3px 3px 3px 0px rgb(255 255 255 / 50%);
}
.footer-base-link:hover {
  background-color: #007a34;
  color: #f7d875;
  text-shadow: #161616 1px 1px;
}
.content-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: center;
 
}


.footer-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
   justify-content: space-between;
  text-align: center;
  padding: 20px;
  padding-bottom: 0px;
  padding: 0px; 
  gap: 10px;
}
.footer-row-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 20px;
  padding-bottom: 0px;
  padding: 0px; 
  gap: 5px;
  font-weight: 100;
  font-size: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
}
.footer-h3{
  color: #f2fff7;
  font-weight: 100;
  text-decoration: underline;
  padding-bottom: 5px;
}

button {
    background-color: #009a44;
    color: #f2fff7;

    border: 1px solid #009a44;
    padding: 10px 12px 10px 12px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 25px;
    transition: background-color 0.3s ease, color 0.3s ease;  
     box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 21%), -5px -5px 10px 0px rgb(0 0 0 / 21%);  
    box-shadow: var(--shadow-elevation-low), inset 3px 3px 5px 0px rgb(255 255 255 / 50%);
}

button:hover {
    background-color: #007a34;
    color: #f7d875;
    text-shadow: none;
}
.service-div {
  flex: 1 1 500px;
  text-align: center;
  display: flex;  
  flex-direction: column;
  max-width: 93%; 
  background-color:   #eafff2; 
  color  : #007a34; 
  padding: 15px; 
  flex-wrap: wrap;
  border: #f7d875 1px outset;
  border-radius: 25px;
  box-shadow: 1px 1px 20px 1px rgb(0 0 0 / 33%), -1px -1px 20px 1px rgb(0 0 0 / 27%);
   transition:  0.3s ease;
max-width: 500px;
   box-shadow: var(--shadow-elevation-medium), inset 5px 5px 5px 0px rgb(255 255 255 / 50%);

}
.service-div p{
  line-height: 1;
  color: #000000;
  flex-shrink: 0;
}
.service-div:hover {
background-color: #009a44;
color:#F7D875;
}
.service-div:hover .service-div-icon{
border: 1px solid #d5b555;
}
.service-div:hover .service-div-icon-2{
border: 1px solid #d5b555;
fill: #d5b555;
}
.service-div:hover hr {
  background-color: #f7d875;
}
.service-div:hover h2 {
  color: #f7d875;
}
.service-div:hover h3 {
  color: #f7d875;
}
.service-div:hover a {
  color: #f7d875;
}
.service-div-icon {
  border: #009a44 1px solid; 
  border-radius: 25px; 
  padding: 5px;
  font-size:  clamp(1rem, 0.3696rem + 3.1522vw, 2.8125rem) !important;
  margin: auto;
}
.service-div-icon-2 {
  border: #d5b555 1px ridge; 
  border-radius: 25px; 
  padding: 7px;
aspect-ratio: 1 /1;
width: 40px;
height: 40px;
  margin: auto;
  fill: #f2fff7;
  background-color: #009a44;
      box-shadow: 1px 1px 5px 0px rgb(0 0 0 / 21%), -1px -1px 5px 0px rgb(0 0 0 / 21%);
}
@media (max-width: 800px) {
  .service-div-icon-2{
    width: 25px;
    height: 25px;
    padding: 5px;
  }
}

.service-container {
  display: flex;  
   background-color:   #f2fff7; 
  color  : white; 
  padding: 15px; 
  flex-wrap: wrap;
 padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 50px;
  gap: 30px;
  margin: auto;
  justify-content: center;
  position: relative;
  align-items: stretch;
  
}
.service-container h3 {
  margin-top: 5px;
}
.service-container h4 {
  margin: 0px;
       color: #f2fff7;
     background: linear-gradient(227deg,rgba(213, 181, 85, 0.75) 0%, rgba(213, 181, 85, 1) 100%);
     text-shadow: #009a44 1px 1px 2px;
}
.service-container ul {
    margin: auto;
  padding-top: 3px;
padding-right: 7px;
padding-bottom: 3px;
list-style-type: "✔ ";
font-size: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
}
.service-list {
  border: #d5b555 1px solid; max-width: 75%; margin: auto; padding: 0; margin-bottom: 10px;
  width: 75%;
  box-shadow: 1px 1px 3px black;
  flex-grow: 1;
}
.service-div:hover .service-list {
border: #F7D875 1px solid;
}
.service-category {
    position: absolute;
    z-index: 100;
    right: 15px;
    top: 5px;
    background-color: #F7D875;
    padding: 3px 10px;
    border-radius: 25px;
  text-shadow: #000000 1px 1px 3px;
    
}
.content-div-green {

  display: flex;  

  background-color:   #009a44; 
  color  : white; 
  padding: 20px; 
  flex-wrap: wrap;
gap: 10px;
  padding-bottom: 40px;
}
.header-spacer-green {
  display: flex;  
  background-color:   #009a44; 
   padding: 15px; 
  flex-wrap: wrap;
gap: 10px;
 
}
.content-div-white {
  display: flex;  
  background-color:   #f2fff7; 
  color  : #007a34; 
  padding-left: 5%;
  padding-right: 5%;
  flex-wrap: wrap;
gap: 10px;
  padding-bottom: 40px;

}

.material-icons {
  font-size: clamp(1rem, 0.3696rem + 3.1522vw, 2.8125rem) !important;
  
}
.hr-green {
  background-color: #009a44; 
  width: 95%; 
  height: 1.5px; 
  border-radius: 25px;
  margin: 0.5em 0; 
  border: none;
  box-shadow: 1px 1px 6px 0px #333;
}
.hr-gold {
  background-color: #f7d875; 
  width: 95%; 
  height: 1.5px; 
  border-radius: 25px;
  margin: 0.5em 0; 
  border: none;
  box-shadow: 1px 1px 6px 0px #333;
}
.service-header-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.service-header-div h2 {
margin-top: 0px;
margin-bottom: 2px;
  padding-bottom: 0;
  text-shadow: black 0px 0px 1px;
}

.service-footer-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: auto;
  border-top: 1px dashed #ccc;
  margin-top: auto;
}
.service-footer-div button {
  width: 80%;
  border-radius: 10px;
}

.maincontent {
  background-color: #f2fff7;
  padding: 5%;
}

.aat-licensed-container {
  display: flex; 
  flex-direction: column; 
  flex: 1 1 55%; 
  align-items: end; 
  justify-content: center;
  max-width: 200px;
}

.aat-license-wording {
  text-align: center; 
  font-size: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem); 
  max-width: 250px; 
  color: #f2fff7;
  text-align: right;
  line-height: 0.95;
  font-weight:lighter;
}

.aat-logo-image {
  width: 100%; 
   height: auto; 
   max-width: 200px;

}
.badge-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); /* responsive grid */
  align-items: center; /* center badges vertically */
  flex-wrap: wrap; /* allow badges to wrap to the next line */
  width: 100%; /* set the width of the grid container */
  justify-content: center; /* center the badges */
  gap: 10px; /* space between badges */
}
.badge-badge {
 display: block;

  margin: 0 auto;
}
.badge-badge img {
  width: 100%;
  height: auto;

  display: block;
}
.guide-image {
    width: 95%;
    max-width: 450px;
    height: auto;
    margin: auto;
    align-self: center;
    
}
.footer-sgl-info {
  flex: 1 1 49%; text-align: left; line-height: 0.85;
  font-weight: lighter;
  color: #f2fff7;

}


@media (max-width: 800px) {
  .footer-sgl-info{
    text-align: center;
  }
  .aat-licensed-container{
    align-items: center;
  }
  .aat-license-wording{
    text-align: center;
  }
  .footer-row{
    justify-content: center;
  }
}
.footer-fb-container{
max-width: 99%;
align-content: center;
justify-content: center;
overflow-x: hidden;
}
footer {
  background: linear-gradient(145deg,rgba(0, 154, 68, 1) 0%, rgba(0, 122, 52, 1) 100%);
}