.view-faq-views .views-row {
  margin-bottom: 1rem;
}

.ui-accordion-header {
  background: var(--light);
  border: none;
  padding: 1rem 2rem !important;
  border-radius: 20px;
}

.ui-accordion-header.ui-state-active {
  background: var(--color-primary);
  border: none;
  padding: 1rem 2rem !important;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ui-accordion .ui-accordion-content {
  padding: 1em 2.2em;
  border-top: 0;
  overflow: auto;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.ui-state-active a {
  color: var(--color-primary);
  text-decoration: none;
}

img.footer-logo-img {
  width: auto;
  height: 80px;
}

.ui-dialog-titlebar {
  background: var(--color-primary-light);
  border: none;
  padding: 1rem 2rem;
}

.ui-dialog-title {
  color: var(--color-primary);
}

.ui-widget.ui-widget-content {
  border: none;
  box-shadow: var(--shadow);
  border-radius: 1rem;
  overflow: hidden;
}

.ui-dialog .ui-dialog-content {
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  overflow: auto;
  /* Enable scrolling with scrollbar */
  scrollbar-width: thin;
  /* For Firefox */
  scrollbar-color: #ccc transparent;
  /* Custom colors for Firefox */
}

.ui-dialog .ui-dialog-content::-webkit-scrollbar {
  width: 6px;
  /* Set scrollbar width */
  height: 6px;
  /* Set scrollbar height for horizontal scrollbars */
}

.ui-dialog .ui-dialog-content::-webkit-scrollbar-thumb {
  background-color: #ccc;
  /* Color of the scrollbar thumb */
  border-radius: 10px;
  /* Rounded corners for the scrollbar thumb */
}

.ui-dialog .ui-dialog-content::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
  /* Darker color on hover for better visibility */
}

.ui-dialog .ui-dialog-content::-webkit-scrollbar-track {
  background-color: transparent;
  /* Transparent track for aesthetic appeal */
}


.bi-bg::before {
  background: var(--color-primary-light);
  padding: 8px;
  box-shadow: var(--shadow-inner);
  border-radius: 8px;
  color: var(--color-primary);
}

.bi.rounded::before {
  border-radius: 50% !important;
}

.modal-body {
  padding: 1rem;
}

input[type="search"] {
  border: none !important;
}

.webform-submission-contact-add-form {
  background: var(--light);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.js-form-required {
  margin-bottom: 8px;
}

.ui-widget-overlay {
  background: none;
  opacity: 1;
  backdrop-filter: blur(3px);
}

.swiper-slide img {
  padding: 30px 30px;
  height: 450px !important;
  width: auto !important;
}

.slider-wrap {
  background-color: var(--light);
  border-radius: 20px;
  overflow: hidden;
}

.swiper-button-next {
  color: var(--color-primary) !important;
}

.swiper-button-prev {
  color: var(--color-primary) !important;
}

.silder-button-area {
  padding: 20px 20px;
}

.slider-icon {
  margin-right: 20px;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: var(--color-primary) !important;
}

.pos {
  background-color: var(--color-primary-light);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.order-summary {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

#edit-email {
  padding: 9px 6px;
}

.cookiesjsr-banner.active {
  background: var(--color-primary);
}

button.cookiesjsr-btn.cookiesjsr-settings {
  background: var(--color-secondary);
  border: var(--color-secondary);
}

.cookiesjsr-btn.important {
  color: var(--color-primary);
}

.cookiesjsr-service-group.active .cookiesjsr-service-group--content {
  background: var(--color-primary);
  color: #fff;
}

.cookiesjsr-service-group.active .cookiesjsr-service-group--tab {
  background: var(--color-primary);
  color: var(--color-primary-light);
}


.dialog-class-small{
  width: 400px !important;
}
@media only screen and (max-width: 768px) {
  .dialog-class-small {
    width: 300px !important;
  }
}

@media only screen and (max-width: 600px) {
  .dialog-class-small {
    width: 200px !important;
  }
}

.dialog-class {
  width: 1000px !important;
}

@media only screen and (max-width: 768px) {
  .dialog-class {
    width: 500px !important;
  }
}

@media only screen and (max-width: 600px) {
  .dialog-class {
    width: 300px !important;
  }
}