/* ============================================
   Contact Template Styles
   Converted from SCSS to CSS
   ============================================ */

/* Breadcrumbs Section */
.breadcrumbs-section {
  background-color: #d1d2d4;
}

/* Contact Section */
.contact {
  background-color: #d1d2d4;
}

.contact-wrapper .sidebar-wrapper .info {
  background-color: #68706f;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 24px;
}

.contact-wrapper .sidebar-wrapper .info .open-hours {
  margin-bottom: 1rem;
}

.contact-wrapper .sidebar-wrapper .info .open-hours b {
  color: #dedc4b;
  font-weight: 400;
  margin-bottom: 1rem;
}

.contact-wrapper .sidebar-wrapper .info .open-hours p {
  color: #fff;
  margin-bottom: 0;
}

.contact-wrapper .sidebar-wrapper .info .phone-number p {
  color: #fff;
}

.contact-wrapper .sidebar-wrapper .info .current-time b {
  color: #dedc4b;
  font-weight: 400;
  margin-bottom: 1rem;
}

.contact-wrapper .sidebar-wrapper .info .current-time p {
  color: #fff;
  margin-bottom: 0;
}

.contact-wrapper .sidebar-wrapper .sidebar-links .sidebar-link {
  margin-bottom: 1rem;
  background-color: #68706f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s ease;
  padding: 0.75rem 1.333rem;
  border-radius: 24px;
}

.contact-wrapper .sidebar-wrapper .sidebar-links .sidebar-link p {
  margin-bottom: 0;
  color: #fff;
  font-weight: 600;
  font-size: 1.2rem;
}

.contact-wrapper .sidebar-wrapper .sidebar-links .sidebar-link i {
  color: #dedc4b;
  font-size: 2rem;
}

.contact-wrapper .sidebar-wrapper .sidebar-links .sidebar-link:hover {
  text-decoration: none;
  color: #5a6362;
  transition: 0.3s ease;
}

/* ============================================
   Contact Form Styles
   Converted from SCSS to CSS
   ============================================ */

.contact {
  padding-top: 64px;
}

@media (min-width: 992px) {
  .contact-wrapper .form-wrapper {
    padding: 0 2rem;
  }
}

.contact-wrapper .form-wrapper .intro {
  margin: 1rem 0 8px;
}

.contact-wrapper .form-wrapper .intro p {
  margin-bottom: 0 !important;
}

.contact-wrapper .form-wrapper .by-phone,
.contact-wrapper .form-wrapper .by-email {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

.contact-wrapper .form-wrapper .by-phone a {
  color: #000;
  font-size: 1.3rem;
}

/* Contact Form 7 Styles */
.contact-wrapper .form-wrapper .wpcf7 {
  margin-top: 1rem !important;
  max-width: 100%;
}

.contact-wrapper .form-wrapper .wpcf7 .marketing-consent .wpcf7-list-item {
  margin-left: 0;
}

.contact-wrapper .form-wrapper .wpcf7 .interested label {
  display: flex;
  align-items: center;
  gap: 8px;
}




.contact-wrapper .form-wrapper .wpcf7 .interested input[type="checkbox"] {
  width: 32px;
  min-width: 32px;
  height: 32px;
  border-radius: 9999px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #b4b5b4;
  background-color: #fff;
  transition: all 0.3s ease;
}

#contact-us .testing-bags .wpcf7-list-item input {
  position: relative;
  opacity: 1;
}

#contact-us .testing-bags .wpcf7-list-item input+span:before, #contact-us .testing-bags .wpcf7-list-item input+span:after {
  display: none;
}

.generic-hero {
  top: 0;
}
.contact-wrapper .form-wrapper .wpcf7 .multi-select label input[type="radio"], .contact-wrapper .form-wrapper .wpcf7 .multi-select .row .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label input[type="checkbox"] {
  width: 32px;
  min-width: 32px;
  height: 32px;
  border-radius: 9999px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #b4b5b4;
  background-color: #fff;
  transition: all 0.3s ease;
  position: relative;
  opacity: 1;
}


.contact-wrapper .form-wrapper .wpcf7 .interested input[type="checkbox"]:checked {
  background-color: #dedc4b;
}

.contact-wrapper .form-wrapper .wpcf7 .consent-row {
  margin: 24px 0;
}

.contact-wrapper .form-wrapper .wpcf7 .consent-row .col-12 {
  padding: 0 !important;
}

.contact-wrapper .form-wrapper .wpcf7 .small-flex {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -32px;
}

@media only screen and (max-width: 830px) {
  .contact-wrapper .form-wrapper .wpcf7 .small-flex {
    margin-top: -16px;
  }
}

.contact-wrapper .form-wrapper .wpcf7 .small-flex .small-spacer {
  width: 32px;
}

.contact-wrapper .form-wrapper .wpcf7 .small-flex em {
  margin-left: 0;
}

.contact-wrapper .form-wrapper .wpcf7 .small-flex p {
  margin-bottom: 0 !important;
}

.contact-wrapper .form-wrapper .wpcf7 .basic-field,
.contact-wrapper .form-wrapper .wpcf7 .large-field {
  border-radius: 20px;
  border-color: transparent;
  background-color: #fff;
  margin-top: 13px;
  margin-bottom: 0;
}

.contact-wrapper .form-wrapper .wpcf7 .basic-field.bag-quantity-input,
.contact-wrapper .form-wrapper .wpcf7 .large-field.bag-quantity-input {
  margin-top: 0;
  margin-bottom: 13px;
}

.contact-wrapper .form-wrapper .wpcf7 .basic-field::placeholder,
.contact-wrapper .form-wrapper .wpcf7 .large-field::placeholder {
  color: #b4b5b4;
  font-weight: 600;
}

.contact-wrapper .form-wrapper .wpcf7 .basic-field {
  height: 50px;
}

.contact-wrapper .form-wrapper .wpcf7 .delivery-info {
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-family: boldFont;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select {
  border: transparent;
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 12px;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .bag-type {
  color: #b4b5b4;
  border-bottom: 2px solid #b4b5b4;
  background-color: #fff;
  padding: 1rem;
  font-weight: bold;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row {
  padding: 1rem 2rem;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .wpcf7-form-control-wrap .wpcf7-form-control {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item {
  margin: 0px !important;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item .bag-qty {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  margin-top: 0;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item.is-selected .bag-qty {
  max-height: 80px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 8px;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item .bag-qty .bag-quantity-input:focus {
  outline: none;
  box-shadow: none;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item .bag-qty .bag-quantity-input {
  border: 1px solid #b4b5b4;
  height: 40px !important;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label input[type="radio"],
.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label input[type="checkbox"] {
  width: 32px;
  min-width: 32px;
  height: 32px;
  border-radius: 9999px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #b4b5b4;
  background-color: #fff;
  transition: all 0.3s ease;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label input[type="radio"]:checked,
.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label input[type="checkbox"]:checked {
  background-color: #dedc4b;
  border-color: #dedc4b;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .selects {
  display: flex;
  flex-direction: column;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .selects .wpcf7-list-item {
  margin-left: 0;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .selects .wpcf7-list-item label input[type="checkbox"] {
  border-radius: 9999px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #b4b5b4;
  background-color: #fff;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .selects .wpcf7-list-item label input[type="checkbox"]:checked {
  background-color: #dedc4b;
  border-color: #dedc4b;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row .selects .wpcf7-list-item.first {
  margin-top: 5px;
}

.contact-wrapper .form-wrapper .wpcf7 .multi-select .row.contact-lead-row .col-md-12 .wpcf7-form-control-wrap .wpcf7-form-control {
  border-radius: 20px;
  height: 80px;
}

.contact-wrapper .form-wrapper .wpcf7 .details {
  margin-top: 1rem;
}

.contact-wrapper .form-wrapper .wpcf7 .details-label {
  border: 2px solid #b4b5b4;
  background-color: #fff;
  margin-bottom: 0;
  border-bottom: none;
  padding: 1rem;
  color: #b4b5b4;
  font-weight: 600;
}

.contact-wrapper .form-wrapper .wpcf7 .details .large-field {
  background-color: #fff;
}

.contact-wrapper .form-wrapper .wpcf7 .accept-wrapper .wpcf7-list-item label {
  display: block;
}

.contact-wrapper .form-wrapper .wpcf7 .accept-wrapper .wpcf7-list-item label input {
  margin-right: 1rem;
  width: 25px;
  height: 25px;
  background: transparent;
  border-radius: 0;
}

.contact-wrapper .form-wrapper .wpcf7 .accept-wrapper .wpcf7-list-item label span {
  position: relative;
  top: -5px;
}

.contact-wrapper .form-wrapper .wpcf7 .accept-wrapper .wpcf7-list-item {
  display: block;
  margin: 0;
}

.contact-wrapper .form-wrapper .wpcf7 .wpcf7-submit {
  display: block;
  opacity: 1;
  cursor: pointer;
  width: fit-content;
  margin: 1rem 0;
  border: none;
  border-radius: 0;
  background: #60676b;
  color: #fff;
  border-radius: 20px;
}

@media (min-width: 992px) {
  .contact-wrapper .form-wrapper .wpcf7 .wpcf7-submit {
    margin: 1rem 0;
  }
}

.contact-wrapper .form br {
  display: none;
}

.contact-wrapper button {
  margin-top: 1rem;
  cursor: pointer;
  background-color: #61686B;
  color: #fff;
  text-align: left;
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

.contact-wrapper button img {
  margin-left: 15px;
}

#contact-us .styled-terms {
  position: absolute;
  opacity: 0;
}

#contact-us .styled-terms + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  display: block;
  margin-bottom: 5rem;
}

@media (min-width: 576px) {
  #contact-us .styled-terms + label {
    margin-bottom: 3rem;
  }
}

@media (min-width: 768px) {
  #contact-us .styled-terms + label {
    margin-bottom: 2rem;
  }
}

#contact-us .styled-terms + label span {
  position: absolute;
}

#contact-us .styled-terms + label:before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 30px;
  height: 30px;
  background: white;
  border: 1px solid #c6c6c6;
}

#contact-us .styled-terms:focus + label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

#contact-us .styled-terms:checked + label:before {
  background: #fff;
}

#contact-us .styled-terms:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}

#contact-us .styled-terms:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}

#contact-us .styled-terms:checked + label:after {
  content: '';
  position: absolute;
  left: 9px;
  top: 16px;
}

/* ============================================
   Contact Form 7 Base Styles
   Converted from SCSS to CSS
   ============================================ */

/*
 * Use existing Bootstrap 4 classes and
 * variables to extend - override CF7 style
 *
 * Useful CF7 classes:
 * .wpcf7 the wrapper element
 * .wpcf7-form
 * .wpcf7-form-control
 * .wpcf7-text
 * .wpcf7-email
 * .wpcf7-textarea
 * .wpcf7-submit
 */

/* keep a max width in case it is just the form and nothing else */
/* we do not want a form spanning whole page */
.wpcf7 {
  max-width: 600px;
  margin: 0 auto !important;
}

/* Note: The following selectors should have Bootstrap .form-control class applied */
/* all inputs except radios and checkboxes inherit from form-control */
/* In SCSS this was: @extend .form-control; */
/* .wpcf7 input[type=text], .wpcf7 input[type=search], .wpcf7 input[type=url], etc. should have Bootstrap .form-control styles applied */

/* Note: The following selector should have Bootstrap .btn and .btn-outline-primary classes applied */
/* submit button, inherit .btn and .btn-outline-primary classes. */
/* In SCSS this was: @extend .btn; @extend .btn-outline-primary; */
/* .wpcf7 input[type=submit] should have Bootstrap .btn and .btn-outline-primary classes applied */

/* set paragraphs to behave like divs with class .form-group */

.wpcf7 .wpcf7-form p {
  /* These should have Bootstrap .form-group styles applied (margin-bottom: 1rem) */
  /* In SCSS this was: @extend .form-group; */
  margin-bottom: 1rem;
}

/* let labels be 100% */
.wpcf7 .wpcf7-form label {
  width: 100%;
}

/* not valid tip for each control */
.wpcf7 .wpcf7-not-valid-tip {
  color: #dc3545; /* Bootstrap danger color */
}

/* validation errors output bottom of form */
.wpcf7 .wpcf7-validation-errors {
  /* These should have Bootstrap .form-control styles applied */
  /* In SCSS this was: @extend .form-control; */
  color: #dc3545; /* Bootstrap danger color */
  border: 1px solid #e9ecef; /* Bootstrap gray-200 */
  /* Additional Bootstrap .form-control styles should be applied here */
}