ul li:after {
  background-color: transparent;
}
ul li {
  background-color: transparent;
}

.hs-search-field {
  position: relative;
}
.hs-search-field__input {
  box-sizing: border-box;
  width: 150%;
  border: none !important; 
  outline: none;
  padding: 10px;
  border-radius: 25px 0 0 25px;
  flex-grow: 1;
}
.hs-search-field__bar button svg {
  height: 10px;
}
.hs-search-field__suggestions {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hs-search-field--open .hs-search-field__suggestions {
  border: 1px solid #000;
}
.hs-search-field__suggestions li {
  display: block;
  margin: 0;
  padding: 0;
  padding-left: 5px;
}
.hs-search-field__suggestions #results-for {
  font-weight: bold;
}
.hs-search-field__suggestions a,
.hs-search-field__suggestions #results-for {
  display: block;
}
.hs-search-field__suggestions a:hover,
.hs-search-field__suggestions a:focus {
  background-color: rgba(0, 0, 0, 0.1);
  outline: none;
}

.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}
.search-icon {
    padding: 5px;
}

.search-icon .fa-magnifying-glass {
    font-size: 20px;
    color: #c6becc;
}
form {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 16px;
    padding:5px;
    height:3em;
    width: 200%;
    margin:10px;
    padding:1em;
    flex-grow: 1;
  margin-bottom: 10px;
  
}
.searchbar{

}

.searchButton{
  color:white;
  cursor: pointer;
  text-align: center !important;
  background-color: #308138 !important;
  border-radius:10px;
  border:none !important;
  width: auto !important;
  height:2em !important;
  min-width: 30% !important;
  font-weight:bold;
  align-items: center !important;
  text-align: center !important;
  flex-grow:1;
  padding: 0 !important;
  font-size: 16px !important;
  font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
  margin-left: 10px;
}
.button-row {
  display: flex;
  align-items: center;
  gap: 10%;
  padding: 10px;
  margin: -20px 10px 10px 10px;  
}

.button-1:hover {
  transform: scale(1.05);
}

.button-2:hover {
  transform: scale(1.05);
}

.button-5:hover {
  transform: scale(1.05);
}
.arrowIconWhite{
     filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(87deg) brightness(119%) contrast(119%);
     width: 25px;
     margin-left: 10px;
}

.buttonRow {
  padding: 0px 5px;
  text-decoration: none;
  border-radius: 5px;
  margin:3px !important;
  width:45em  !important;
  height:3em !important;
  text-align: center;
  vertical-align: middle;
  line-height: 3em;
  display:flex;
  
}


/* Custom styles for each button for catergories*/
.button-1 {
  background-color: #308138;
  color: white;
  font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
  padding-left: 20px;
  justify-content:space-between;
}
.button-1:hover{
 color:white;
}

.button-2 {
  background-color: #7f4896 !important;
  color: white;
  font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
  padding-left: 20px;
  gap: 28%;
  justify-content:space-between;
  

}
.button-2:hover{
 color:white;
}

.button-3 {
  background-color: #7b4c91 !important;
  color: white;
  font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
  padding-left: 20px;
  justify-content:space-between;
}

.button-4 {
  background-color: #45a1b3 !important;
  color: white;
  font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
  padding-left: 20px;
  justify-content:space-between;
}

.button-5 {
  background-color:#5669c4 !important;
  color: white !important;
  border: solid 2px #5669c4 !important;
  font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
  padding-left: 20px;
  gap: 24%;
  justify-content:space-between;
 

  
}
@media (max-width: 1183px)
{
  .button-row{
  gap:0%
  }
}
@media (min-width: 1750px)
{
  .button-row{
  gap:30% !important;
  }
  
  form {
    width: 170%;
  }
  
}
@media (min-width: 1457px){
    .button-row{
  gap:15%
  }
}
@media (min-width: 1620px){
    .button-row{
  gap:20%
  }
}

@media (min-width: 1600px)(max-width:1800)
{
  .button-row{
  gap:20%
  }
  
  form {
    width: 190%;
  }
  
}

@media (min-width: 900px) {
 
.searchbar {
 
 width:30%; 
 padding-right:15%
  }
       
}

@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    src: url('fonts/NeueHaasGroteskDisplayPro-Regular.woff2') format('woff2'),
         url('fonts/NeueHaasGroteskDisplayPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@media (max-width: 1024px) {
  .button-row{
    display: flex;
    flex-direction: column-reverse;
    align-items: self-start;
    padding-bottom: 0px;
    margin-bottom: 5em;
    gap:0px;
    width:90%;
  } 

  .button-1 {
  width:100% !important;
  gap: 25%;
  }
  .button-2 {
  width:100% !important;
    gap: 42%;
  }
  .button-5 {
  width:100% !important;
    gap: 39%;
  }
  form{
    width:300%;
    margin:3;
    margin-bottom:10px;
  }
  .searchButton{
    min-width: 0% !important;
    width:80% !important;    
  }
  .mobile-mod{
  flex-direction: column !important;
  display:flex;
  text-align:left;
  }
  .buttonRow{
  width: 70% !important;
  height:10em !important;
  
}
}
  @media (max-width: 900px) {  
  form{
    width:100% !important;
  }
  .arrowIconWhite{
     width: 2em;
 }
 }

}
@media (max-width: 800px) {
  .button-row{
    display: flex;
    flex-direction: column-reverse;
    align-items: self-start;
    padding-bottom: 0px;
    margin-bottom: 5em;
    gap:0px;
  } 

  .button-1 {
  width:100% !important;
  gap: 22%;
  }
  .button-2 {
  width:100% !important;
    gap: 42%;
  }
  .button-5 {
  width:100% !important;
    gap: 38%;
  }
  form{
    width:100%;
    margin:3;
    margin-bottom:10px;
  }
  .searchButton{
    min-width: 0% !important;
    width:80% !important;    
  }
  .mobile-mod{
  flex-direction: column !important;
  display:flex;
  text-align:left;
  }
  .buttonRow{
  width: 100% !important;
  height:10em !important;
  
}
}
@media (max-width: 760px) {
    .buttonRow {
        width: 100% !important;
    }
  .button-row{
    margin-bottom: 0em !important;
    max-width:25em;
  }
}
  
@media (max-width: 390px) {
      .buttonRow {
        height: 3em !important;
    }
  .button-1 {
        gap: 20%; 
    }
  .button-2 {
        gap: 38%;
  }
  .button-5 {
        gap: 35%;
    }
   .button-row{
    margin-bottom: 5em !important;}
    }
@media (max-width: 360px) {

  .button-1 {
        gap: 8%; 
    }
  .button-2 {
        gap: 30%;
  }
  .button-5 {
        gap: 25%;
    }
    
  }