/* <uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 100 to 900 */

.roboto-condensed {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: auto;
  font-style: normal;
  font-display: swap;
  font-display: smooth;
}
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Condensed", sans-serif;
    font-display: swap;
}
html{
  font-size: 70%;
  overflow-x: hidden;
}
body{
  font-family: "Roboto Condensed", sans-serif;
  line-height: inherit;
  font-weight: 400;
  color: #2c2c2c;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.puap-google-tag-submit{
  line-height: 3.025rem;
  border: unset;
  background-color:#2d2c83;
  width: 100%;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  font-size: 2.2rem;
  padding: 5px; 
}
/* Header-one */
.top-header-section{
  background-color:#183864 ;
}
.top-header{
  max-width: 115rem;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #FFFF;
  padding: 1rem;
  margin: 0 auto;
  font-size: 1.4rem;
  font-weight: 450;
  row-gap: 5px;
}
.header-sub-div{
  display: flex;
  gap: 1rem;
  align-items: center;
}
.header-sub-div a {
  color: #FFFF;
  text-decoration: none;
}
/* Header-Two */
.second-header{
  max-width: 115rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  margin: 0 auto;
}
/* main navigation bar */
.main-nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5rem;
}
.main-nav-list:link,
.main-nav-list:visited{
  text-decoration: none;
  font-size: 2.2rem;
  font-weight: 500;
  color: #333;
  transition: all 0.3s;
  display: inline-block;
}
.main-nav-list:hover,
.main-nav-list:active{
  color: #f84639;  
}

/* ******************************************** */
/* hero section */
.hero-section{
 /* background-color: hsla(0, 0%, 0%, 0.450); */
 background-repeat: no-repeat;
 background-position: right center;

  background-image:linear-gradient(hsla(0, 0%, 0%, 0.450),hsla(0, 0%, 0%, 0.450) ),url('/img/engine-background.jpg');
}
.hero{
  max-width: 115rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding:20px 10px;
  gap: 5rem;
}
.form-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 100%;
}
.leadformtitle {
  padding: 1rem 5rem;
  background-color: #183864;
  color: white;
  width: 100%;
  border-radius: solid white 1px;
  font-weight: 500;
  margin-bottom: 1rem;
  line-height: 3rem;
  font-size: 2rem;
  text-align: center;
}

select {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 20px;
  
  border-radius: 4px;
  color: black;
  border: 1px solid #000;
    background-color: #ecedee;
    height: 50px;
    font-size:24px;
    appearance: none;
}



input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: black;
  border: 1px solid #000;
    background-color: #ecedee;
    height: 50px;
    font-size:24px;
}


.btn {
  width: 100%;
  padding: 10px;
  background-color: #183864;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size:24px;
}
.btn2 {
  background-color: #ff2f00;
}

.btn:hover {
  background-color: #183864;
}
.hero-paragraph{
  text-align: center;
  padding: 20px;
  /* background-image: url('./img/engine-background.jpeg');
  background-position: right;
  background-repeat: no-repeat; 
  background-size: cover; */
 
}

.background-hero-img{
 display: grid;
  grid-template-rows: 1fr 1fr 1fr;
 align-items: center;
 gap: 2rem;
}
.primary-heading{
  color: #fff;
  font-size: 3.5rem;
  font-weight: 600;
  padding-top: 15px;
}
.hero-images{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  justify-content: center;
}
.bbb{
  height: 60px;
  width: auto;
}
/* NOTE: selector is misspelled on the live site (.warrenty vs the .warranty
   class used in markup), so it never applies and the warranty badge renders at
   its natural 156x100. Preserved verbatim for pixel fidelity with production. */
.warrenty{
  height: 80px;
  width: auto;
}
.google-reviews{
  height:60px ;
  width: auto;
}
.hero-c-t-a{
  font-weight: 600;
  gap: 4px;
  display: inline-flex;
  align-items: center;
  background-color: #1e4986;
  color: white;
  padding: 8px 20px;
  text-decoration: none;
  font-size: 2.6rem;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.hero-c-t-a:hover {
  background-color: #2174e8; 
}
/* *********************************** */
/* features section */
.features{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  gap: 3rem;
  max-width: 120rem; 
  padding: 0 3.2rem;
  margin: 2rem auto;
}
.our-features{
  display:flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: #1e457b;
  color: #FFFFFF;
  border-radius: 1rem;
}
.features-icon{
  border-radius: 3rem;
  padding: 0.1rem;
   margin-bottom: -10px;
}
.features-text{
  font-size: 1.8rem;
  font-weight: 400;
   letter-spacing: -0.01rem;
}
/* product-section */
.product{
	max-width: 115rem;
 margin: 1rem auto;
 padding: 0rem 1rem;
}
.secondary-heading{
  color: #183864;
  font-size: 3.4rem;
  font-weight: 500;
  padding:  0.5rem;
}
.product-container{
  display: grid;
  grid-template-columns: 1.8fr 1fr;
    align-items: center;
}
.product-pragraph{
  color: #000000;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 2.6rem;
  text-align: justify;
}
.product-image{
  text-align: center;
}
.product-image1{
  height:auto;
  width:80%;
}

/* offer section */
.offer{
  background-image:linear-gradient(hsla(204, 100%, 37%, 0.433), hsla(204, 100%, 37%, 0.433)),url('/img/background.webp');
  margin: 1rem auto;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}
.offer-container{
  margin: 2rem auto;
  padding:0 1rem; 
}
.offer-text{
  text-align: center;
  font-size: 3rem;
  padding: 1rem 0;
}
.offer-text1{
  color: rgba(250, 199, 79, 0.974);
  margin-bottom: 20px;
}
.offer-text2{
  color: #FFFF;
  margin-bottom: 20px;
}
.offer-text3{
  color: #FFFF;
  margin-bottom: 20px;
}
.offer-cta{
  font-weight: 700;
  gap: 10px;
  display: inline-flex;
  align-items: center;
  background-color: rgba(253, 16, 59);
  color: #fff;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 2.5rem;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.offer-cta:hover {
  background-color: #FC345C; 
}
/* testimonial section */
.testimonial-subheadding{
  font-size: 3rem;
  font-weight: 600;
  color: #183864;
  text-align: center;
}
/* Styling for the testimonial container */
.testimonial-container {
  width: 100%;
  max-width:115rem;
  margin: 2rem auto;
  padding: 0 1rem;
  overflow: hidden;
  /* position: relative; */
}
/* Styling for the card container, enabling horizontal scrolling */
.testimonial-cards {
  display: flex;
  gap: 15px; /* 10px space between each card */
  transition: transform 0.5s ease;
  padding: 1rem 2rem;
}
/* Individual testimonial card styling */
.testimonial-card {
  flex: 0 0 calc(33.33% - 10px); /* Desktop default: 3 cards in the viewport */
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* Styling for the testimonial text */
.testimonial-card p {
  font-size: 1.8rem;
  font-weight: 400;
  color: #5b5959;
  /* text-align: justify; */
}
/* Styling for the customer's name */
.testimonial-card h4 {
  font-size: 2rem;
  margin-top: 10px;
  color: #183864;
}
/* Styling for the customer's star  */
.star{
  font-size: 3rem;
  color:rgb(255, 179, 0);
}

/* Navigation button styling */
.testimonial-navigation {
  display: flex;
  justify-content: center;
  margin-top: 5px;
  /* position: relative; */
  gap: 5px;
}
/* Styling for the navigation buttons */
.testimonial-navigation button {
  background-color: #fff;
  border: none;
  font-size: 3rem;
  cursor: pointer;
  color: #333;
  border: 1px solid rgb(52, 52, 52);
  padding: 1px 10px;
  border-radius: 50px;
}
/* Button hover effect */
.testimonial-navigation button:hover {
  background-color: #183864;
  color: #fff;
}
/* Responsive Styling */
/* For tablets (768px to 1024px), show 2 cards */
@media (max-width: 1024px) {
  .testimonial-card {
    flex: 0 0 calc(50% - 10px); /* 2 cards in the viewport */
  }
}
/* For mobile devices (below 768px), show 1 card */
@media (max-width: 768px) {
  .testimonial-card {
    flex: 0 0 calc(100% - 10px); /* 1 card in the viewport */
  }
  .testimonial-subheadding{
    margin-bottom: 10px;
    font-size: 2.8rem;
  }
}
/* FAQ section  */
.faq-section {
  max-width: 100rem;
  margin: 2rem auto;
  padding:0 1rem;   
}
.faq-section h4 {
  font-size: 2.8rem;
  font-weight: 600;
  color: #183864;
  text-align: center;
  margin-bottom: 1rem;
}
.faq-section details {
  margin-bottom: 15px;
  border-radius: 10px;
  border: 2px solid #ccc;
}
.faq-section summary {
  font-size: 2rem;
  font-weight: 500;
  cursor: pointer;
  padding: 1.5rem;
  transition: background-color 0.3s ease;
}
/* .faq-section details span {
  padding: 5px 10px ;
  font-size: 1.8rem;
  font-weight: 400;
} */
.faq-section details p {
  padding: 5px 10px;
  font-size: 2rem;
  font-weight: 400;
}
/* FOOTER-SECTION */
.footer-section{
background-color: #f9f9f9;
}
.footer{
  max-width: 115rem;
  margin: 0 auto;
  padding: 1rem ;
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr;
  gap: 1rem;
}

.footer-1-paragraph{
  font-size: 1.8rem;
  text-align: justify;
  font-weight: 400;
  margin-bottom: 0.5rem;
  color: #333;
}
.footer-1-images{
  display: flex;
  gap: 20px;
  align-items: center;
}
.footer-1-image1{
  height: 50px;
  width: 120px;
}
.footer-1-image2{
  height: 80px;
  width: 90px;
}
.footer-heading{
  font-size: 2.5rem;
  font-weight: 600;
  color: #183864;
  margin-bottom: 1rem;
}
.footer-2{
  padding-left: 5.6rem;
}
.list{
  list-style: none; 
}
.list a{
  font-size: 2rem;
  font-weight: 450;
  text-decoration: none;
  color: #393939;
  line-height: 1.8;
}
.d-flex{
  display: flex;
  align-items: center;
  gap: 1rem;
}
.address{
  line-height: 1.2 !important;
}
.timing{
  margin: 10px 0;
  font-size: 1.8rem;
}
.socialmedia{
  margin-left: 30px;
}
.socialmedia-icons{
  padding-right: 1rem;
}
.below-footer{
  text-align: center;
  font-size: 1.2rem;
  font-weight: 400;
  padding: 10px;
  line-height: 1.5;
  background-color: #eeeeee;
}
/* ***************************************************** */
/* MOBILE */
.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}
.icon-mobile-nav {
  font-size: 4.8rem;
  color: #333;
}
.icon-mobile-nav[name="close-outline"] {
  display: none;
}
.dropdown {
  float: center;
  overflow: hidden;
}
.dropdown .dropbtn {
  text-decoration: none;
  font-size: 2.2rem;
  font-weight: 500;
  color: #333;
  transition: all 0.3s;
  display: inline-block;
  border: none;
  outline: none;
  background-color: inherit;
}
.navbar a:hover, .dropdown:hover .dropbtn {
  color: #f84639;
}
.dropdown-content {
  display: none;
  position:absolute;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  /* z-index: -1; */
  margin-top: 1px;
}
.dropdown-content a {
  float: none;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 2.2rem;
  font-weight: 500;
  color: #333;
}
.dropdown-content a:hover {
  color: #f84639;
}
.dropdown:hover .dropdown-content {
  display: block;
  text-align: center;
  justify-content: center;
}
/* BELOW 768px (Landscape Tablets) */
@media (max-width: 48em) {
/* MOBILE NAVIGATION */
.logo{
  height: 60px;
  width: 120px;
}
.btn-mobile-nav {
  display: block;
}
.main-nav {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  display: flex;
  align-items: center;
  justify-content: center; 
  transition: all 0.5s ease-in;
  z-index: 5;
  /* 1) Hide it visually */
    opacity: 0;
  /* 2) Make it unaccessible to mouse and keyboard */
    pointer-events: none;
  /* 3) Hide it from screen readers */
    visibility: hidden;
}
.nav-open .main-nav {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(0);
}
.nav-open .icon-mobile-nav[name="close-outline"] {
  display: block;
  position: fixed;
  right: 20px;
   width: 25px;
  z-index: 5;
}
.nav-open .icon-mobile-nav[name="menu-outline"] {
  display: none;
}
.main-nav-list {
  flex-direction: column;
  gap: 2.5rem;
}
.main-nav-link:link,
.main-nav-link:visited {
  font-size: 10rem;
}
}
/* *********************************************************************************************************************************** */
/* style for static pages */
.static-h1{
  background-color: #0071BD9E;
}
.static-primary-h1{
  color: #FFFF;
  font-size: 3rem;
  font-weight: 500;
  margin: 1rem auto;
  padding: 2rem 0;
  text-align: center;
}
.policy-container{
  max-width: 115rem;
  margin: 1rem auto;
  padding: 1rem;
}
/* about us page  */
.about-policy-paragraph-h2{
  margin: 1rem 0;
}
.about-policy-paragraph-h2{
  font-size: 3rem;
  font-weight: 600;
  color: #002738;
}
.about-policy-paragraph{
  font-size: 2rem;
  font-weight: 400;
  color: #000000;
  line-height: 1.4;
  text-align: justify;
}
/* OUR PRIVACY POLICY  */
.privacy-policy-paragraph-h2{
  font-size: 3rem;
  font-weight: 600;
  text-align: center;
  /* margin: 1rem 0; */
}
.privacy-policy-paragraph1{
  margin: 1rem 0;
}
.privacy-policy-paragraph{
  font-size: 1.85rem;
  font-weight: 400;
  color: #000000;
  line-height: 1.5;
  text-align: justify;
}
/* RETURN & REFUND POLICY PAGE*/
.return-refund-policy-paragraph{
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
  padding-left: 20px;
  color: #000000;
  text-align: justify;
}
/* shipping policy */
.shipping-policy-paragraph{
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
  padding:1rem 0;
  color: #000000;
  text-align: justify;
}
.shipping-policy-phone{
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5; 
  /* padding: 0 1rem; */
}
/* terms and condition  */
.terms-condition-paragraph{
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  padding:1rem 0;
  text-align: justify;
}
/* warranty policy */
.warranty-paragraph-h2{
  font-size: 2.5rem;
  font-weight: 600;
  text-align: left;
  /* margin: 1rem 0; */
}
.warranty-paragraph{
  font-size: 2rem;
  font-weight: 400;
  color: #000000;
  line-height: 1.5;
  text-align: justify;
  padding-bottom: 1rem;
}
.warranty-list{
  padding-left: 20px;
}
.warranty-paragraph1{
  margin: 1.5rem 0;
}

/* contact us page*/
.contact-us-container{
  max-width: 115rem;
  margin: 1rem auto;
  padding: 0rem;

}
.contact-us{
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap:2rem;
} 

.contact-info-page{
  box-shadow: 0px 0px 10px 0px #C5C5C5;
    margin:1rem;
    padding: 1rem;
    font-size: 2rem;
    font-weight: 600;
  
}
.contact-info-a{
  text-decoration: none;
  color: #333;
  line-height: 1.5;
  font-size: 2rem;
  font-weight: 500;
}
.contact-info-span{
  display: flex;
    align-items: center;
}
/* BELOW 768px (Landscape Tablets) */
@media (max-width: 48em) {
.contact-us{
  display: grid;
  grid-template-columns: 1fr;
  gap:1rem;
}
.contact-info-page{
      padding: 1rem;
      font-size: 2rem;
      font-weight: 600;
  }
  .contact-info-a{
    font-size: 1.8rem;
    font-weight: 450;
  }
}


/* Contact-form */
.contact-us-form{
  display: flex;
  flex-direction: column;
}
.Contact-us-form-box{
box-shadow: 0px 0px 10px 0px #C5C5C5;
margin: 10px 10px 10px 10px;
--e-column-margin-right: 10px;
--e-column-margin-left: 10px;
   padding: 1.5rem;

}
.input-form {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  
  }
  .checkbox_div{
    display: flex;
    gap: 10px;
  }
  .custom-checkbox{
      margin-bottom: 15px;
      margin-left: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
  }
.Contact-us-form-box button{
padding: 10px;
background-color: #1a1c9a;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
font-size: 20px;
font-weight: bold;
width: 100%;
margin-bottom: 14px;
}
.puap_error_msg{
  color: red;
  font-size: 12px;
  padding-bottom: 10px;
}

/* call-icon */
.icon-container {
  margin: 16px;
}
.phone-icon, .phone-icon::before  {
  position: fixed;
  bottom: 0;
  overflow: hidden;
  color: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: rgb(219, 40, 53);
  display: flex;
  justify-content: center;
  align-items: center;
   z-index: 5;
  font-size: 30px;
    transition: all 0.3s;
    margin: 10px;
    animation: circle 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@keyframes circle {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

/* lead_form */
.lead_form_container{
  background-color: white;
}
.heading{
  background-color: #2d2c83;
  color: white;
  text-align: center;
  border: 4px solid white;
  padding: 6px;
  box-shadow: 1px 1px 5px 2px #101d456e;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;

}
.puap_lable{
  font-size: 1.8rem;
  font-weight: 500;
}

.puap_form{
  padding-top: 5px;
  padding-bottom: 10px;
  font-size: 1.6rem;
}  
.puap_error {
  margin-bottom: 0.5rem; 
   font-family:  sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.025rem;
  line-height: 1rem;
  color: red;
  -webkit-font-smoothing: antialiased;
  margin-left: 10px;
}
.puap_form_button {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  width: 100%;
}
.puap_form_button_in {
  line-height: 3.025rem;
  border: unset;
  background-color:#2d2c83;
  width: 100%;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  font-size: 2.2rem;
  padding: 5px; 
}
.circle{
  width: auto;
  height: auto;
  background-color: #00b901;
  border-radius: 50%;
  border: 1px solid #00b901;
  padding: 0.5px;
}
.selected_items{
  box-shadow: 1px 1px 5px 2px #101d4573;
  background-color: white;
  padding: 10px;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 10px;
  font-size: 16px;
}
.form_label_prl{
  display:flex;
  flex-direction: column;
}
.puap_input_box{
  width: 100%;
  padding: 8px 10px;
  margin: 6px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1.7rem;
}
.flex{
  padding-bottom: 16px;
}

/* thank you */
.thank-you-page{
  text-align: center;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.5px;
  padding: 16px 12px;
  max-width: 115rem;
  margin: 0 auto;
}

/* 404 page */

.error-page{
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 2rem;
  max-width: 115rem;
  margin: 1rem auto;
  padding: 1rem;
  align-items: center;
}
.errorh1{
  text-align: center;
  color: #DE3D49;
  font-size: 20rem;
}
.error-page2{
 line-height: 1.5;
 text-align: center;
}
.errorh2{
  font-size: 4.5rem;
}
.error-paragraph1{
  font-size: 2.4rem;
  font-weight: 400;
}
.error-paragraph2{
   font-size: 2.5rem;
   font-weight: 450; 
   margin-bottom: 1rem;
}
.error-anchortext{
  text-decoration: none;
  color: #fff;
  background-color: #1e457b;
  padding: 0.5rem 1rem;
  
  border-radius: 2rem;
  font-size: 2rem;
}
/* ==========================================================================
   Rebuild additions
   Purely additive helpers. Nothing here alters the production visual design.
   ========================================================================== */

/* Accessible labels for the lead-form controls, which show placeholders only. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard/touch equivalent of the CSS `:hover` dropdown. */
.dropdown.is-open .dropdown-content {
  display: block;
  text-align: center;
  justify-content: center;
}

/* Respect reduced-motion for the carousel slide and the floating call button. */
@media (prefers-reduced-motion: reduce) {
  .testimonial-cards {
    transition: none;
  }

  .phone-icon,
  .phone-icon::before {
    animation: none;
  }
}

/* Honeypot: off-screen rather than display:none, so bots that skip hidden
   inputs still fill it in. Never shown to real visitors. */
.hp-field {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Result of a Get Quote submission (api.php message / detail). */
.form-message {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 4px;
  font-size: 1.8rem;
  line-height: 1.4;
  background-color: #e7f4e9;
  border: 1px solid #b6dcbd;
  color: #1c5b28;
}

.form-message.is-error {
  background-color: #fdecea;
  border-color: #f5c2bd;
  color: #8c1d13;
}