:root {

 --shadow-color:0deg 0% 0%;
   --shadow-scale: 1;
  --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);
    --modern-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
    --modern-shadow-low: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
    --radius-sm: 6px;
    --radius-lg: 12px;
    --main-green: rgba(0, 83, 36, 0.8);
}
*, *::before, *::after {
    box-sizing: border-box;
}

strong {
  color: #007a34;
}
:target {
    scroll-margin-top: 120px; 
}
@media (min-width: 768px) {
    :target {
           scroll-margin-top: 95px; 
    }
}
@media (min-width: 1200px) {
    :target {
        scroll-margin-top: 93px;
    }
}
.column {
  display: flex;
  flex-direction: column;
}

.threed {
  color: #f2fff7 !important;
}

.threed:hover {
  transform:translateY(-2px);
}


.index-intro-h1 {
 font-size:  clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
 color: #d6b85d; text-decoration: none; text-shadow: #161616 0px 0px 3px;
  font-weight: normal;
 margin-top: 0;
 border-bottom: 1px inset #f7d97565;
  padding-bottom: 5px;
font-family: 'Barlow', 'Montserrat', sans-serif; letter-spacing: 5px;
}
.index-intro-h2 {
  font-weight: 100;  color:#f2fff7; text-decoration: none;
  font-size: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
 text-shadow: none;
}
h2.fancy-title {
  letter-spacing: -1px;
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }}
.index-intro-sbad {
  display: flex; flex-direction: row; flex-wrap: wrap; padding: 0px; justify-content: space-around; gap: 10px;
}
.index-header-column {
  flex: 70%; 
  align-items: center; 
  flex-direction: column; 
  padding: 5px;
padding-right: 15px;
}
.index-header-column p {
  text-align: center;
  color: #f2fff7;
}
.index-header-column .hr-gold {
  height: 1px; margin: auto; box-shadow: none;
}
.faq-section {
 background-color: #f2fff7;
    border: 1px solid #009a44;
    padding: 15px 3%;
    margin: 20px;
    border-radius: var(--radius-sm);
    text-align: center;
    max-width: 1000px;
    justify-self: center;
    width: 80%;
 }
 .faq-section > .qa:last-child {
  margin-bottom: 25px;
 }
.qa h3 {
  text-decoration: none;
  margin: 0px;
   font-size: clamp(0.75rem, 0.6848rem + 0.3261vw, 0.9375rem);
}

.qa {
 max-width: 900px;
   margin: auto;
   margin-bottom: 10px;
div {
  background-color: #f2fff7;
  padding: 5%;
  color: #547763;
  border-top: 1px solid #eee;
text-align: left;
}

  summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  font-weight: bold;
  min-height: 27px;
  h3{
     margin-top: 0px;
  }
 
}

summary::after {
  content: '+';
    transition: 0.2s;

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

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

summary::-webkit-details-marker {
  display: none;
}

summary {
   border-radius: 5px;
  }
summary h3 {

  font-weight: normal;
  
}

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

details {
  padding: 5px;
  border-radius: var(--radius-lg);
    border: 1px solid #e0e0e09a;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    
    }
}
details[open] {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: #009a44;
}
.guide-nav-div {
  position: fixed; bottom: 95px; right: 0px; z-index: 1000;   text-align: center; padding: 2px 0px;         background-color: rgba(0, 83, 36, 0.4);
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.2); border-top-left-radius: 25px; border-bottom-left-radius: 25px;
}

.guide-nav-div select {
   padding: 7px; background: none; color: #f2fff7; border-radius: 25px; padding-left: 25px; font-size: 12px;
  box-shadow: var(--modern-shadow); backdrop-filter: blur(1.5px); width: 99%; max-width: 700px; font-weight: bold;
  option {
  background-color: rgba(0, 83, 36, 0.4);
    color: #f2fff7;
  }
}
.guide-nav-div optgroup {
  font-size: larger;
  background-color: rgba(0, 83, 36, 0.4);
  color: #F7D875;
}
body{
    font-family: 'Roboto', sans-serif;
    padding: 0px;
    margin: 0px;
    text-size-adjust: 100%;
    font-size: clamp(0.75rem, 0.663rem + 0.4348vw, 1rem);
   
   font-weight: normal;
   overflow-x: hidden;
}

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

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


.index-aat-logo-div {
  max-width: 340px; flex: 1 1 300px;
    align-content: center;
    margin:auto; justify-self: center;padding: 0px 20px;
}

@media (max-width: 600px) {
  .index-aat-logo-div {
    margin-top: 25px; 
   }
  
}
.index-aat-logo {
  width: 100%;  height: auto; 
}
.index-aat-wording {
  font-size: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);; max-width: 550px; line-height: 1.0 !important; margin-top: 0;
}
.index-cloud-software {
  width: 100%;  height: auto;  margin: auto;
  border-radius: 25px; border: 1px outset; box-shadow: var(--modern-shadow); justify-self: center;
}

.image-crop-container {
  max-width: 250px;
    width: 100%;
  
    padding-top: 23%;
    position: relative;
    overflow: hidden;
}


.cropped-image {
  margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}
small {
  line-height: 1px;
}

footer {
  background: var(--main-green);
    color: #f2fff7; 
    text-align: center;
    padding: 20px 20px;
    position: relative;
    bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.25);
    margin-top: 50px;
}



input[type="range"]{
color: #d5b555;
accent-color: #d5b555;
}

.contact-box{
  border-radius: 18px; padding: 5px 15px; justify-items: center; margin: auto; box-shadow:  var(--modern-shadow-low); text-align: center; max-width: 500px; justify-self: center; max-width: 1000px; width: 90%;
  justify-content: space-evenly;
  display: flex;
  flex-direction: column;
  background-color: #ffffff79;
  h3 {
   margin-top: 0.7em;
  }

  
}

.contact-box:hover {
  box-shadow:  var(--shadow-elevation-medium), inset 1px 1px 1px 0px rgb(255 255 255 / 50%);
  transform: translateY(-2px);
  transition: all .3s ease-in-out;

}


.content-div-green  .fancy-title{
    border-image: linear-gradient(to right, #009a44, #d5b555) 1;
    text-decoration: none;
    margin:5px auto;
      text-align: center;
      display: block;
      width:fit-content;
}


  
.included-header {
  display: flex;
      align-items: center;
      justify-content: space-between;
    text-align: left;
    width: 100%;
    gap: 5px;
    margin-bottom: 10px;
}
.included-header svg {
  
    flex: 0 0 auto; 
}
.included-header p {
      flex-grow: 1; 
       flex-shrink: 1; 
    min-width: 0; 
}
.included-header .fancy-title {
 
  flex-grow: 1; 
  flex-shrink: 1;
  min-width: 0; 
  margin: 0; 
}
.service-header {
  display: flex;
      align-items: center;
      justify-content: space-between;
    text-align: end;
    width: 100%;
    min-height: 3.5em;
}
.service-header svg {
    margin-left: 15px;
        flex: 0 0 auto; }
.service-header h3 {
      flex-grow: 1; 
       flex-shrink: 1; 
       min-width: 0;
      text-align: center; }


.content-div-right {
  flex: 1 1 500px; align-content: center; 
}


.about-profile{
  text-align: center;
    border-radius: 25px;
  width: fit-content;
  flex: content;
  margin: auto;
  padding: 15px;

}
.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: var(--main-green);
   color: white; 
   padding: 5px 10px; 
      gap:5px; 
   justify-content: center;
  border-bottom: 1px groove;
  z-index: 500;
  backdrop-filter: blur(3px);    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.header-sticky {
       position: sticky; 
        top: 0;           
     z-index: 1000;    
        width: 100%;
    border-bottom: none;
    box-shadow: none;
}
.header-container-index {
  display: flex; 
   max-width: 100%; 
   background: var(--main-green); 
   color: white; 
   padding: 5px; 
   flex-wrap: wrap; 
   gap: 7px; 
   justify-content: space-between;
  padding-left: 5%;
  padding-right: 5%;  border-bottom: 1px groove;   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.header-title-container {
  align-content: center; 
  flex: 3 3 300px;
  text-align: center;
}
.header-title-container::before {
    content: "";
    flex: 1 1 150px; 
}
h1{
  font-size:  clamp(1.0625rem, 0.5625rem + 2.5vw, 2.5rem);
  color: #009a44; text-align: center; text-decoration: underline;
   font-family: 'Montserrat', sans-serif;
   
}
h2{
  margin: auto;
  font-size:  clamp(1.125rem, 0.8207rem + 1.5217vw, 2rem);
  color: #007a34; text-align: center;
 font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  margin-top: 1em;
  margin-bottom: 0.9em; 
text-decoration: none;
text-transform: uppercase;
max-width: 1000px;
letter-spacing: 4%;
color: rgba(0, 83, 36, 0.9);
padding: 0 15px;
}
h3{
  text-align: center;
 font-size: clamp(0.875rem, 0.7228rem + 0.7609vw, 1.3125rem);
 color: rgba(0, 83, 36, 0.9);
 padding-left: 2%;
 padding-right: 2%;
  font-family: 'Barlow', 'Montserrat', sans-serif;
    margin-top: 0.5em;
   margin-bottom: 0.5em;
        letter-spacing: 0.01em;
color: rgba(0, 122, 53,0.9)
    }

.sub-hone{
font-family: 'Barlow', 'Montserrat', sans-serif;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
   color: #d5b555;
   vertical-align: middle;
  text-decoration: none;
  font-weight: normal;
   letter-spacing: -1px; 
   margin-top: 5px;
   margin-bottom: 5px;
  }



.fancy-title {
margin: auto;
   border-bottom: #007a34 2px solid;
  border-image: linear-gradient(to left, #f2fff7, #007a34) 1;
  padding-left: 5px;
  display: inline-block;
   
     max-width: 1200px;
}
a{
  color: #007a34;
   transition: color 0.3s ease;
}

p{
  margin: auto;
  max-width: 1000px;
  margin-bottom: 1em;
  margin-top: 5px;
color:#4a6958
  }
.center {
    text-align: center;
  }

ul {
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
  padding-left: 30px;
  text-align: left;
}
ul ul {
  padding-left: 0px;
}
@media (max-width: 600px) {
  ul {
    padding-left: 20px;
   }
  
}
.index-logo {
 width: 60%; height: 100%; margin-top: -15px; margin-bottom: -15px;
}

.logo-image-index{
  text-align: center;
width: 100%;
margin: auto;
    backdrop-filter: blur(10px);
    box-shadow: var(--modern-shadow-low);
    border-radius: 25px;
    background: rgba(0, 83, 36, 0.3);
}
@media (min-width: 1400px) {
  .logo-image-index {
    display: none;
  }
  .logo-image {
    display: none;
  }
}
.logo-image{
flex: 40%;
max-width: 40%;
min-width: 50px;
margin: auto;
border-radius: 15px;
max-width: 6%; 
flex: 1 1 150px;background: rgba(0, 83, 36, 0.3);backdrop-filter: blur(10px); 
    box-shadow: var(--modern-shadow-low); padding: 8px;
}
@media (max-width: 800px) {
  .logo-image{
    flex: 100%;
  }
}


.footer-base-link1 {
  color: #f2fff7;
  text-decoration: none;
  transition: color 0.2s ease;
    padding: 2px 0;
}
.footer-base-link:hover {
  background-color: #007a34;
  color: #f7d875;
  text-shadow: #161616 1px 1px;
  text-decoration: underline;
}
.content-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: center;
 }
.content-row-start {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 15px;
 }
.contact-method-box {
  box-shadow: var(--modern-shadow);
  flex: 0 1 150px;
  padding: 0;
  border-radius: 9px;
  height: 100%;
  p {
    width: 100%;
    background-color: #009a430a;
    margin: 0;
  }
}
.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-column {
  flex: 1 1 250px; 
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align content to the left */
    padding: 0;
    gap: 3px;
}
.footer-badges-column {
  align-items: flex-end;
  padding: 5px 0px;
}
.footer-links-column {
  padding: 9px 0px
}
.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: 5px 0px; 
  gap: 5px;
  font-weight: 100;
  font-size: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
}
.dropdown-trigger {
  text-decoration: none;
  color: #009a44;
  background-color: #009a44;
  border: #000000 1px solid;
}
.dropdown-menu {
  display: none; 
}

.dropdown-trigger:hover + .dropdown-menu,
.dropdown-menu:hover {
  display: block; /* Show menu on hover (or use JavaScript) */
}
.footer-h3{
  color: #d5b555;
  font-weight: 100;
    padding-bottom: 5px;
    border-bottom: 2px solid #f7d875;
}

button  {
    background: none;
    backdrop-filter: blur(2px);
  color: #2e7d32;
margin-bottom: 5px;
    border: none;
    padding: 10px 29px 10px 29px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 25px;
    transition: background-color 0.3s ease, color 0.3s ease;  
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  }
.button-link {
    background: none;
    backdrop-filter: blur(2px);
  color: var(--main-green);
margin-bottom: 5px;
    border: none;
    padding: 10px 29px 10px 29px;
    font-size: 1em;
    cursor: pointer;
    border-radius: var(--radius-lg);
    transition: background-color 0.3s ease, color 0.3s ease;  
        box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
        display: inline-block;
        text-decoration: none;
}
.button-link:hover{
   transform:translateY(-2px);
}
button:hover {
    background-color: #007a34;
    color: #f7d875;
    text-shadow: none;
     transform:translateY(-2px);
}
.service-div {
  flex: 1 1 500px;
  text-align: center;
  display: flex;  
  flex-direction: column;
  max-width: 93%; 
  background-color:   #ffffff; 
  color  : #007a34; 
  padding: 15px; 
  flex-wrap: wrap;


  border-radius: var(--radius-lg);
     transition:  0.2s ease;
max-width: 500px;
   box-shadow: var(--modern-shadow);  border: 1px solid #f0f0f0;box-shadow: 0 10px 30px rgba(0,0,0,0.05);
.highlight {
  background-image: linear-gradient(transparent, transparent 90%);
}
}
.service-card-link {
  display: flex;
      text-decoration: none;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card-link1 {
     text-decoration: none;
      transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex;
}
.service-div .pill  {
color: white;
    text-shadow: 0 0 1px black;border: 1px solid rgba(255, 255, 255, 0.2);
}
.service-div p{
  line-height: 1;
  color: #547763;
  flex-shrink: 0;
  margin-bottom: 5px;
}
.service-div > p {
    flex-grow: 1;
    display: flex;
    align-items: center; 
    margin-bottom: 10px;
    line-height: 1.2;
        text-align: left;
    padding: 5px 5%;
}
.service-div > div:not(.service-header):not(.service-footer-div) {
    min-height: 220px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
 }


.service-container ul.checks-service {
  margin: auto;  
  margin-top: 5px;
    flex-grow: 1;
    width: 100%;
    gap: 1px;
    li {
      padding: 2px
    }
    }
.service-div:hover {
transform: scale(1.03);
}
.feature-item2:hover {
transform: scale(1.03);
}
.service-div:hover .service-div-icon-2{
 animation: rotate-slow 1s ease-out; background-color: #d5b555; border: 1px ridge #d5b55544;
}
.feature-item2:hover .service-div-icon-2{
 animation: rotate-slow 1s ease-out; ;
} 

.service-div-icon-2 {
  border: 1px ridge #009a4344;
  border-radius: 30px; 
  padding: 7px;
aspect-ratio: 1 /1;
width: 50px;
height: 48px;
  margin: auto;
  stroke-width: 1.5;
  stroke:#09a44a; fill:none;
  background-color: #fefffe;
  stroke:#ffffff; fill:none;
  background-color: var(--main-green);
  margin: 0 auto 0px !important;
  flex-shrink: 0;
    }  
 .service-div-icon-2a {
 
  border-radius: 30px; 
  padding: 7px;
aspect-ratio: 1 /1;
width: 45px;
height: 43px;
  margin: auto;
  stroke-width: 1.5;
  stroke:#009a430a; fill:#009a44;
  background-color: none;
  box-shadow: var(--modern-shadow);
  } 

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes rotate-slow {
  from { transform: rotatey(0deg); }
  to { transform: rotatey(360deg); }
}
@media (max-width: 800px) {
  .service-div-icon-2{
    width: 35px;
    height: 35px;
    padding: 5px;
  }
}
.service-div .hr-green-ns {
  margin-top: 2px;
  margin-bottom: 2px;
}
.service-div b {
  color: rgba(0, 122, 53,0.9); font-size: clamp(0.875rem, 0.788rem + 0.4348vw, 1.125rem);;
}

.service-container {
  display: flex;  
    color  : white; 
  flex-wrap: wrap;
 padding: 10px;
  gap: 20px;
  margin: auto;
  justify-content: center;
  position: relative;
  align-items: stretch;
   max-width: 99%;
}
@media (max-width: 600px) {
  .service-container {
    padding-left: 7%;
    padding-right: 7%;
   }
  
}

.service-container h3 {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: clamp(0.9375rem, 0.8071rem + 0.6522vw, 1.3125rem);
  border-bottom: 1px solid #13a55040;
  color: var(--main-green); text-transform: uppercase;padding-bottom: 2%;
 }
.service-container h4 {
  margin: 0px;
       color: rgba(0, 122, 53,0.9);
   width: 95%;
   margin: auto;
   margin-top: 5px;
  border-radius: 2px;
    font-size:  clamp(0.75rem, 0.663rem + 0.4348vw, 1rem);
  }
.package-card h4 {
  margin: 0px;
       color: rgba(0, 122, 53, 0.9);
   padding-left: 5%;
   width: 95%;
      margin-top: 12px;
  border-radius: 2px;
  font-size: clamp(0.75rem, 0.663rem + 0.4348vw, 1rem); text-transform: uppercase; margin-bottom: 5px;
  }
.service-container ul {
 margin-left: 15px;
font-size: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
}
.service-container ul li ul {
  margin-left: 5px;
}
.service-list {
  border: #d5b555 1px solid; max-width: 80%; margin: auto; padding: 0; margin-bottom: 15px;
  width: 80%;
  box-shadow: var(--modern-shadow);
  flex-grow: 1;
  padding-bottom: 5px;
  border-radius: 5px;
  
}
@media (max-width: 600px) {
  .service-list {
    width: 90%; max-width: 90%;
   }
  
}
.service-list li {
  border-bottom: 1px dotted #ccccccd8;
}
.service-div:hover .service-list {
border: #F7D875 1px solid;
}

.content-div-green {

  background-color:   #009a430c; 
  color  : #547763; 
 border-top: 1px groove #009a44;
  border-bottom: 1px groove #009a44;
 
 }
 .content-div-green b {
  color: #005d29;
  font-weight: 600;
 }


 .content-div-green h3{
color: #007a34;
  text-shadow: #f2fff7 1px 1px 2px;
  
  margin-top: 0.3em;  
 }
.guide-action-bar {
  display: flex;  
  justify-content: center;
  background-color:   #009a44; 
  color  : white; 
  padding: 5px; 
  flex-wrap: wrap;
gap: 10px;
 
}
.guide-action-bar button {
  color: #f2fff7;
  padding: 5px 15px 5px 15px;
}
.guide-action-bar a {
  color: #f2fff7;
}

.content-div-white {
  display: flex;  
  color  : #547763; 
  padding-left: 5%;
  padding-right: 5%;
  flex-wrap: wrap;
  padding-bottom: 1em;
padding-top: 1em;
align-items: flex-start; margin: auto; max-width: calc(1000px + 10%);
}

.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: auto;
  margin-top: 1em;
  margin-bottom: 1em;
  border: none;
  box-shadow: 1px 1px 1px 0px #33333373;
}
.hr-green-ns {
  background-color: #009a44; 
  width: 95%; 
  height: 1.5px; 
  border-radius: 25px;
  margin: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border: none;

}
.hr-gold {
  background-color: #f7d875; 
  width: 95%; 
  height: 1.5px; 
  border-radius: 25px;
  margin: 0.5em 0; 
  border: none;
  box-shadow: 1px 1px 3px 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;
  padding-top: 10px;
}
.service-footer-div button {
  width: 85%;
  border-radius: 15px;
  
}
.service-footer-div button:hover {
transform: translateY(-2px);
}
@media (max-width: 600px) {
  .service-footer-div button {
    width: 95%;
    padding: 10px 10px 10px 10px;
  }
}

.flex-content {
  display: flex; 
  flex-direction: row; 
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 100%; 
  padding: 20px;
}

.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-fit, 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;

}
.footer-sgl-info-right {
  flex: 1 1 49%; text-align: left; line-height: 0.85;
  font-weight: lighter;
  color: #f2fff7;
text-align: right;
text-wrap: balance;
}
.footer-legal-text{
  color: #f2fff7;
}
@media (max-width: 800px) {
  .footer-sgl-info{
    text-align: center;
  }
   .footer-sgl-info-right{
    text-align: center;
  }
  .aat-licensed-container{
    align-items: center;
  }
  .aat-license-wording{
    text-align: center;
  }
  .footer-row{
    justify-content: center;
    flex-direction: column;
  }
  .footer-column {
    align-items: center;
  }
  .footer-links-column {
    gap:5px;
    flex: 1 0;
  }
  .footer-info-column {
    flex: 1 0;
  }
  .footer-badges-column {
    flex: 1 0;
  }

 }
.footer-fb-container{
max-width: 99%;
align-content: center;
justify-content: center;
overflow-x: hidden;
width: 200px;
}
.fb-container{
  margin: auto;
max-width: 99%;
align-content: center;
justify-content: center;
overflow-x: hidden;
width:500px;
}

.maincontent-guides {
  padding-left: 5%;
  padding-right: 5%;
  flex: 1;
}
.section-div {
  padding: 20px 5%;
}

.input-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
input[type="number"] {
  border-radius: 25px;
}
input[type="text"] {
  border-radius: 25px;
  padding: 10px;
}
b {
  color: #007a34;
}


.step {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}
.step h3 {
  margin-top: 5px;
}
.step.active {
    display: block;
}

.options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.option-btn {
    padding: 15px 25px;
    font-size: 1.1em;
      color: #fff;
    background-color: #009a43e1;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    flex: 1 1 200px;
    text-wrap: balance;
}

.option-btn:hover {
    background-color: #01863be1;
    transform: translateY(-2px);
}

.btn-back, .btn-primary {
    padding: 10px 10px;
    margin: 0;
    margin-top: 20px;
    font-size: 1em;
    border-radius: 15px;
    cursor: pointer;
}

.btn-back {
  margin: 0;
    background-color: #ffffff1f;
    backdrop-filter: blur(2px);
    color: #333;
    border: none;
    padding: 5px 10px;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
   
}

.btn-primary {
    background-color: #009a43e1;
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow-elevation-low), inset 2px 2px 2px 1px rgb(255 255 255 / 50%), inset -1px -1px 3px 1px rgb(0 0 0 / 50%);
 }

.result {
    text-align: center;
}
.result h3 {
  margin-top: 5px;
}
#result-text {
    font-size: 1em;
    line-height: 1.2;
    margin-bottom: 20px;
    padding: 5px;
    border-top: 1px dashed;
}

.tooltip-icon {
    position: absolute;
  align-self: anchor-center;
    right: 5px;
    cursor: pointer;
    font-size: 12px;
    color: #d5b555;
    padding: 5px 11px; /* Add padding to make it easier to tap on mobile */
    border: 1px outset;
    border-radius: 25px;
    backdrop-filter: blur(5px);
}

/* Tooltip text container */
.tooltip-text {
    display: none;
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    font-size: 0.9em;
    z-index: 2;
    pointer-events: none;
    line-height: 1.4;
}

/* Style the arrow on the tooltip */
.tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Class to show the tooltip */
.tooltip-active .tooltip-text {
    display: block;
    pointer-events: auto;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


.mobile-bar {
  position: fixed;
  width: 100%;
  background-color: rgb(46, 46, 46);
  bottom: 0px;
  height: 50px;
  z-index: 1000;
  display: none;
  justify-content: space-evenly;
 text-align: center;
 gap: 2px;
  border-top: 2px groove;
}
.mobile-bar a {
  display: flex;
  font-size: 12px;
  color: #F7D875;
  text-decoration: none;
  flex: 1;
  text-align: center;
  border: 1px solid white;
  align-items: center;
  justify-content: center;
  
}
@media (max-width: 600px) {
  .mobile-bar{
    display: none;
  }
  
}
.fb-page {
  margin: auto;
  display: flex;
  max-width: 100%;
}

.info-btn {
  background-color: transparent;
  font: 12px;
  color: #2e7d32d5;
}

.close-btn {
  border-color: transparent;
  color: red;
  position: absolute;
  top: 10px;
  right: 10px;
}
.table-wrapper {
    overflow-x: auto; 
    max-width: 100%; 
}
.comparison-table {
overflow-x: auto;
  border: #0000001a 1px solid;
  border-collapse: collapse;
  font-size: 12px;
  width: 95%;
  margin: auto;

}
.comparison-table th {
  background-color: #009a430a;
  color: rgba(0, 122, 53, 0.9);
  padding: 10px;
  text-align: left;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
  margin: auto;
   }
.comparison-table td {
  padding: 10px;
  border: #0000001a 1px solid;
  text-align: center;
}
.comparison-table tr:nth-child(even) {
  background-color: #f2f2f269;
}
.comparison-table td:first-child {
  text-align: left;
  background-color: #009a4309;
}
.comparison-table tr:nth-child(3) {
  border-bottom: #00000079 2px solid;
}

.readMore {
  color:#007a34;
  text-decoration: underline;
  cursor: pointer;
}
:root:has(#transPopover:popover-open) {
    overflow: hidden;
}
.popover-content {
  max-width: 80%;
  padding: 15px;
  max-height: 95vh;
  overflow-y: auto;
  box-shadow: var(--modern-shadow);
  border: none;
   overscroll-behavior-y: none;
   border-radius: 25px; 
    box-shadow: var(--shadow-elevation-low);
    background: rgb(244 255 249 / 75%); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(9px);
    
}
.popover-content::backdrop {
  backdrop-filter: blur(3px);
}
.popover-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
   border-radius: 25px;
  background-color: transparent;
  border: none;
  color: #d9544f98;
  font-size: 15px;
  cursor: pointer;
}
.textNote {
  background: linear-gradient(90deg,rgba(0, 122, 53, 0.137) 0%,rgba(0, 122, 53, 0.062) 15%, rgba(255, 255, 255, 0) 95%);
  padding-left: 20px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;

}
.key-facts-list {
    list-style: none; 
    padding-left: 0;
}

.key-facts-list li {
    margin-top: 5px;
    padding-left: 25px;
    position: relative;

   }
   .key-facts-list > li > ul > li {
        background-color: #009a4327;
    border-radius: 15px;
    padding: 1px 25px;
    width: fit-content;
    max-width: 75%;
    margin: 5px auto;
   }
.key-facts-list li::marker {
  content: none;
}
.key-facts-list li::before {
    content: '→'; 
    position: absolute;
    left: 5px;
    color: #009a44;
    font-weight: bold;
}

.key-facts-row {
display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(max(250px, 34%), 1fr));
    gap: 25px;
    max-width: 1000px;
    margin: auto;
}
.key-facts-card {
  border: 1px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.checks {
    list-style: none; 
    padding-left: 0;
        display: flex;
    flex-direction: column;
    gap: 0.3em; 
  
}
.checks li {
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: var(--radius-sm);
   
}

.checks li::before {
    content: ''; 
      flex-shrink: 0; 
        margin-right: 8px;
       width: 20px; 
    height: 20px;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23009a44' d='M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320C528 205.1 434.9 112 320 112zM390.7 233.9C398.5 223.2 413.5 220.8 424.2 228.6C434.9 236.4 437.3 251.4 429.5 262.1L307.4 430.1C303.3 435.8 296.9 439.4 289.9 439.9C282.9 440.4 276 437.9 271.1 433L215.2 377.1C205.8 367.7 205.8 352.5 215.2 343.2C224.6 333.9 239.8 333.8 249.1 343.2L285.1 379.2L390.7 234z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain; 
}

li.checks-not::before {
    content: ''; 
    flex-shrink: 0; 
    margin-right: 8px;
        width: 20px; 
    height: 20px;background-size: 80%;
 
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='%23d9544f98' d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.19 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.19 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;background-position: center;
    background-size: contain; 
}

li.checks-not {
    color: #bdbcbc;
    }
.checks-white li::before {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23009a44' d='M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320C528 205.1 434.9 112 320 112zM390.7 233.9C398.5 223.2 413.5 220.8 424.2 228.6C434.9 236.4 437.3 251.4 429.5 262.1L307.4 430.1C303.3 435.8 296.9 439.4 289.9 439.9C282.9 440.4 276 437.9 271.1 433L215.2 377.1C205.8 367.7 205.8 352.5 215.2 343.2C224.6 333.9 239.8 333.8 249.1 343.2L285.1 379.2L390.7 234z'/%3E%3C/svg%3E");
}
.checks-service {
  padding-left: 15px;
 padding-top: 5px;
 color: #547763;
gap: 5px;
}
@media (max-width: 600px) {
  .checks-service {
   gap: 2px;
   }
  }
.upgrade-header {
        margin-left: -30px; 
    margin-top: 7px;
       font-size: 0.9rem;
    text-transform: uppercase;
    color: rgba(0, 122, 53, 0.9);
    letter-spacing: 1px;
    font-weight: bold;
    background-color: transparent !important;
}
li.upgrade-header::before {
  background-image: none;
}
.checks-service > li > ul > li::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23009a44'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12'/%3E%3C/svg%3E");
text-align: right;
align-content: center;
width: 20px;
}
.checks-service > li:has(ul)::before {
    content: none;
}
.checks-center {
    width: fit-content !important;
    margin-bottom: 15px !important;
    margin-top: 15px !important;
}
.service-div:hover, .pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevation-medium);
  transition: all 0.3s ease;
}
html {
  scroll-behavior: smooth;
}
.highlight {
      background-color: rgba(3, 107, 104, 0.055); 
       font-weight: 700;
    text-decoration: none;
      background-image: linear-gradient(
        transparent,
        transparent 90%, 
        rgba(3, 107, 104, 0.7) 90%, 
        rgba(3, 107, 104, 0.7) 100%
    );
    

    display: inline;
    

    padding: 0 2px;
}

.warning {
background: #fff4e5;
border-left: 4px solid #f39c12;
padding: 0.5rem;
margin: auto;
width: 90%;
}

.calculator-inputs {
    width: 90%;
    margin-top: 15px;
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }

.slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; 
    width: 100%;
    max-width: 500px;
    margin: 1rem auto;
}


.slider-controls input[type="range"] {
    flex: 1;
    cursor: pointer;
}


.btn-adjust {
    flex: 0 0 auto; 
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    color: #007a34; 
    padding: 0 5px;
}

.btn-adjust:hover {
    color: #d5b555;
}
.input-group {
    margin-bottom: 15px;
    text-align: left;
    width: 100%;
    flex: 1 1 200px;
    padding: 0px 15px;
}

.input-group label {
    display: block;
    font-weight: 600;
   color: #666;;
    margin-bottom: 5px;
}

.calc-select, .calc-input {
   width: 100%;
    padding: 9px;
  border: 2px solid #f0f0f0;
    border-radius: var(--radius-sm);
    background-color: #f9f9f9;
    font-size: 0.9rem;
   
    box-sizing: border-box; 
 }
.calc-select:focus {
    background-color: #ffffff;
    border-color: #007a34;
    outline: none;
}
.cost-output {
    text-align: center;
    margin: 20px auto 5px auto;
    padding: 30px;
  background-color: #f2fff7;
    width: 100%;
    align-self: center;
}
.costOutput {
  flex: 1;
  border: 1px solid #009a44;
  border-radius: var(--radius-sm);
}
.price-container {
    color: rgba(0, 122, 53, 0.9);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin: 10px 0;
}

.price-currency {
    font-size: 0.6em;
    vertical-align: top;
    margin-right: 1px;
}

.price-figure {
    font-size: 1em;
}

.small-print {
    font-size: 0.8rem;
    color: #888;
    margin-top: 10px;
}
.package-card-calc {
    max-width: 95%;
  background: #f2fff7;
  border: 1px outset #009a44;
  border-radius: 18px;
   padding: 15px 15px;
  flex: 1 1 300px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
    box-shadow: var(--modern-shadow);
   box-sizing: border-box;
   transition: ease-in-out 0.2s;
justify-content: space-between;

}
.package-title-calc {
  text-transform: uppercase;
  letter-spacing: 0.1em;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0.2em;
}


.calculator-section-wrap {
   
    margin: 10px auto;
    max-width: 900px;
    text-align: center;
}

.calc-intro-text {
    font-size: 1.1em;
    color: #333;
    margin-bottom: 10px;
    max-width: 500px;
}

.calculator-widget-card {
    background-color: #ffffff;
  backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
      padding: 20px 0px;
    margin: 20px auto;
    box-shadow: var(--modern-shadow);
 
    max-width: 570px; 
    justify-items: center;
    .left-paragraph {
      padding: 5px 25px;
      margin: 0;
  
    }
    input {
      text-align: center;
    }
    select {
      text-align: center;
     
    }
    .services-row {
      width: 90%;
    }
    .value-check-list {
      max-width: 90%;
              padding-left: 7%;
    }   
     .transaction-badge {
  margin: 0 auto;
  margin-bottom: 15px;
}
}
.cta-hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}

.services-row {
   display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 95%; justify-self: center; max-width: 1000px;align-items: stretch;
      }
 @media (max-width:600px) {
     .services-row {
    gap:5px;
    .section-card {
      margin: 5px auto;
    }
    }
  .cta-hero-buttons {
    gap:5px
     } 
     .button-link {
      width: 100%;
    }
  }
.section-card {
    background-color: #ffffff;
    color: #547763;
    border-left: 5px solid var(--main-green); 
    padding: 20px 3%;
    margin: 10px auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--modern-shadow-low); 
    max-width: 1000px;
     flex: 1 1 300px;
     display: flex;
    flex-direction: column;
    align-items: flex-start;
   
    h3 {
      margin-top: 0;
    }
   p {
    line-height: 1.5;flex-grow: 1;   }
   button, .button-container, .readMore {
      margin-top: auto;
      padding-top: 15px; /* Adds a little breathing room above the button */
    }
}
.section-card > a:last-child {
    margin-top: auto;
    padding-top: 15px;
    width: 100%; /* Ensures the container doesn't shrink */
}
.section-card > .content-div-white {
  padding: 0;
}
.contact-card {
    background-color: #ffffff;
    color: #547763;
    border-left: 5px solid var(--main-green); 
    padding: 20px;
    margin: 10px auto;
    border-radius: 4px;
    box-shadow: var(--modern-shadow); 
    max-width: 1000px;
     flex: 1 1 300px;
     display: flex;
    flex-direction: column;
 text-align: left;
    h3 {
      margin-top: 0;
    }
   p {
    line-height: 1.6;
   }
   .content-row-start {
    margin-top: auto;
    padding-top: 20px; /* Optional: adds breathing room above the buttons */
}
}
section {
    padding: 5%;
  padding-top: 3%;
  padding-bottom: 3%;
 margin-bottom: 1%;
 
      }

.package-nudge-box {
    background-color: #f2fff7; 
    color: #547763;
    border: 1px solid var(--main-green);
    padding: 15px 3%;
    margin: 35px auto;
    border-radius: var(--radius-sm);
    text-align: center;
        max-width: 1000px;
        
}
.package-nudge-box .nudge-title {
    color: var(--main-green);
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 0.5em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

.feature-list-modern {
    list-style: none;
    padding-left: 0;
}


.standalone-service-text {
    text-align: center;
    margin: 40px auto;
    max-width: 800px;
    font-style: italic;
    color: #666;
}


.package-features-section {
    padding: 10px 20px 30px 20px;
    margin: auto;
    max-width: 1200px;
    /*background-color: #ffffffea; 
    box-shadow: var(--modern-shadow);*/
    border-radius: var(--radius-lg);
    
    .fancy-title {
margin: 5px;
    }
    .sub-hone-secondary {
      margin-top: 7px;
      border-bottom: 1px solid #eee;
    }
    h2 {
    text-align: center;
    }
}


.sub-hone-secondary {
    text-align: center;
    color: #007a34;
    font-size: 1.4em;
    margin-bottom: 15px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(max(250px, 34%), 1fr));
    gap: 25px;
    max-width: 1000px;
    margin: auto;
 }
 @media (max-width: 500px) {
.features-grid {
  gap: 15px;
}

   .features-grid > .section-card {
    margin-top: 0;
   }
 }


.feature-item2 {
  display: flex;
  flex-direction: column;
  background-color: #ffffffea;
       backdrop-filter: blur(5px);
    padding: 15px;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.2);
    text-align: center;
    justify-content: flex-start;

     p {
      text-align: left;
      margin-left: 5px;
       flex: auto; padding: 0 5%;
    }
    h4 {
      color: #007a34;
          border-bottom: 1px solid #eee;
          letter-spacing: 0.01em;
          text-transform: uppercase;
    }
   }



.clickable {
  cursor: pointer;
}
.value-check-list {
  list-style: none; padding: 20px 5%; font-size: 0.9em; color: #555;  margin: auto; background: transparent;
     max-width: 1000px;border-top: 1px solid #eee;
    h4 {
      text-align: left; width: 100%;
      margin-top: 1px; margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.01em;
    }
}
.value-check-list-small {
  max-width: 700px;
}
/* Container for the comparison boxes */
.comparison-grid {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap; /* Ensures it stacks on mobile */
}


.choice-box {
    flex: 1;
    min-width: 200px;
    padding: 20px;
      border: 1px solid #eee;
    border-radius: 6px; 
    display: flex;
    flex-direction: column;
     background: #f0f9f4; 
}


.choice-box.highlight {
    border: 1.5px solid #009a44;
}

.choice-box h4, .choice-box h3 {
    margin-top: 0;
    color: #009a44;
    font-size: 1.1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    text-transform: uppercase;
}

.choice-box.highlight h4 {
    color: #009a44;
}

.choice-box ul {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    flex-grow: 1; 
}

.choice-box li {
    margin-bottom: 10px;
    font-size: 0.9rem;
    line-height: 1.4;
}


.choice-box .readMore {
    display: inline-block;
    margin-top: 10px;
    font-weight: bold;
    color: #009a44;
    text-decoration: none;
}
.search-section {
    padding: 20px 5%;
    background: #f9f9f9;
    border-bottom: 1px solid #eee;
}

.search-container {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

#guideSearch {
    width: 100%;
    padding: 12px 15px 12px 45px;
    font-size: 12px;
    border: 2px solid #ddd;
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    outline: none;
    transition: border-color 0.3s ease;
}

#guideSearch:focus {
    border-color: #2c3e50; /* Matches your header/nav color */
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}
.pill {
  border-radius: 25px;
  padding: 4px 15px;
background-color: rgb(214, 184, 93);

}
.page-section--tint {
  background-color: #009a4308;
}
.left-paragraph {
       margin: 35px auto; 
        max-width: 1000px; 
        text-align: left; 
      padding: 0 20px;
          h3 {
      padding-left: 0;
      margin-bottom: 0.5em;max-width: 80ch;
      text-align: left;
    text-transform: uppercase;
    }
        h4 {
      margin-bottom: 0.1em;
      color: rgba(0, 122, 53, 0.9);
    }
}
/* Container for the toggle alignment */
.toggle-container {
    display: flex;
    align-items: center;
    gap: 12px;
   }

.toggle-label-text {
    
    font-weight: bold;
    color: #333;
}

/* The switch container */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

/* Hide default checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

/* Color when active (Sage Green) */
input:checked + .slider {
    background-color: #009a44;
}

input:checked + .slider:before {
    transform: translateX(24px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}
.icon-no {
  fill: none;
   stroke:#e0e0e0;
    stroke-width:3;
    width: 20px;
    height: 20px;
}
.icon-yes {
  fill: none;
   stroke:#009a44;
    stroke-width:3;
    width: 20px;
    height: 20px;
}
.icon-nav {
   fill: none;
   stroke:#F7D875;
    stroke-width:1;
    width: 11px;
    height: 11px;
    margin-right: 5px;
}

.toggle-container {
    display: flex;
    width: fit-content;
    height: fit-content;
      border-radius: 50px;
    justify-self: center;
    justify-content: center;
   background: #f4faf6; 
    max-width: 600px;
}


.toggle-pill {
    position: relative;
    display: flex;
    border-radius: 50px;
    width: 95%;
    max-width: 300px;
    height: 50px;
    padding: 4px;
    overflow: hidden;
    box-shadow: none;
    box-sizing: border-box;
}

.toggle-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 15px);
    background: var(--main-green); 
    border-radius: 50px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.toggle-option {
    flex: 1;
    background: none;
    border: none;
    color: var(--main-green);
       cursor: pointer;
    z-index: 2;
    transition: color 0.3s;
    box-shadow: none;
  font-size: 12px;
  padding: 5px 15px;
}

.toggle-option.active {
    color: white;
    backdrop-filter: none;
}

.toggle-pill:has(#btn-ltd.active) .toggle-slider {
    transform: translateX(100%);
}


.account-view {
    animation: fadeIn 0.4s ease-out;
    width: 100%;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.additional-value-bar {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
    text-align: center;
    h4 {
      text-transform: uppercase;
      letter-spacing: 0.01em;
      color: #007a34;
    }
}

.additional-value-check-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    list-style: none;
    padding: 5px 0;
    margin-bottom: 0;
    @media (max-width: 500px) {
          justify-content: flex-start;
          margin-left : 15px;
    }
}

.additional-value-check-list li {
        font-weight: 700;
    color: #2e7d32; 
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-tiny {
    width: 18px;
    height: 18px;
        fill: none;
   stroke:#2e7d32;
    stroke-width:2;
}
.transaction-note {
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
    background: #009a4308;
    border-left: 4px solid var(--main-green);
    border-radius: 4px;
    font-size: 0.95em;
    color: #555;
    text-align: left; 
    h3 {
      text-align: left;
      padding-left: 0;
    }
}