@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/Inter_24pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/Inter_24pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}


* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  box-sizing: border-box;
  font-family: "Inter";
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #434549;
  /* outline: 1px solid blue; */
}

::-webkit-scrollbar {
  height: 0px;
}

strong {
  font-weight: 700;
}

body {
  background-color: #FFFFFF;
  margin:0px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

button {
  outline: none;
  border: none;
  cursor: pointer;
  background: transparent;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 26px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 70px 1px #11244912;
  border-radius: 0px 0px 24px 24px;
  /* margin-top: 24px; */
  margin-bottom: -24px;
  position: sticky;
  z-index: 2;
  top: 0px;
}

.header-logo {
  display: flex;
  object-fit: contain;
  width: 70px;
  height: 37px;
}

.header-menu {
  width: 24px;
  height: 24px;
  display: flex;
}

.halo {
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-shadow: 0px 0px 70px 1px #11244912;
  border-radius: 50px;
  background-color: #fff;
  padding: 60px 20px;
  background-image: url("../images/halo-bg.svg");
  background-position: center;
  background-repeat: no-repeat;
}

.halo-nav {
  display: none;
}

.halo-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.halo-left-column {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.highlight {
  color: #FF6B00;
}

.normal-color {
  color: #434549;
}

.container-title .highlight {
  font-weight: 700;
}


.halo-title {
  font: 700 30px/36px 'Inter';
  color: #FF6B00;
  display: block;
}

.halo-title span {
  font-weight: 700;
}

.halo-description {
  display: flex;
  text-align: left;
  font: 400 18px/22px 'Inter';
}

.driver-offer-text {
  height: 96px;
}

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 46px;
  background: #2854AE;
  color: white;
  border-radius: 50px;
  font: 400 12px/14px 'Inter';
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s ease-in-out;
}

.btn-primary:hover {
  background: #FF6B00;
}

.halo-image-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.halo-image {
  display: flex;
  position: relative;
  width: 231px;
  max-height: 231px;
  height: 100%;
}

.halo-main-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: flex;
  width: 231px;
}

.halo-main-driver {
  width: 80px;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  right:14px;
  bottom: 14px;
}

.halo-image-row {
  display: flex;
  gap: 12px;
}

.halo-image-item {
  display: flex;
  position: relative;
  width: 33%;
}

.halo-small-image {
  width: 100%;
  height: auto;
  object-fit: cover;

}

.halo-small-driver {
  width: 30px;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  right: 4px;
  bottom: 4px;
}

section,
.container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 8px 16px;
  width: 100%;
}

.container section {
  padding: 8px 0px;
}

.container-row {
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.container-small {
  width: 100%;
  padding: 0px !important;
  gap: 20px;
}


.container-title {
  font: 700 28px/34px 'Inter';
  color: #343D4D;
  display: inline;
  text-align: center;
  width: 100%;
  justify-content: center;
  /* position: sticky; */
  /* top: 60px; */
  /* z-index: 1; */
  /* background-color: #FFFFFF; */
}

.features-container {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.feature {
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0px 0px 86.15px 1.23px #11244912;
  border-radius: 24px;
  background-color: #fff;
  position: relative;
  padding: 0px 0px 24px 0px;
  background-color: #FFFFFF;
  border: 1.23px solid;
  border-image-source: linear-gradient(115.72deg, #EAEAEA -18.08%, #F6F6F6 129.74%);


}

.feature-image {
  display: flex;
  object-fit: cover;
  border-radius: 25px;
  height: 196px;
  width: 100%;

}

.feature-label {
  display: flex;
  flex-wrap: nowrap;
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%) rotateZ(-3deg);
  min-width: max-content;
  background: linear-gradient(182.37deg, #F5F5F5 7.97%, #E4EDFF 246.79%);
  border: 1.23px solid;
  border-image-source: linear-gradient(115.72deg, #EAEAEA -18.08%, #F6F6F6 129.74%);
  padding: 16px 22px;
  border-radius: 50px;

}

.feature-description {
  font: 400 16px/20px 'Inter';
  padding: 0px 24px;
}

.feature-description strong {
  font-weight: 700;
}

.drivers-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.driver-filters {
  display: flex;
  flex-wrap: wrap;
  overflow-x: scroll;
  margin-left: -8px;
  margin-right: -8px;
}

.driver-filters-container {
  display: flex;
  gap: 6px;
}

.btn-filter {
  display: flex;
  align-items: center;
  padding: 12px 30px 12px 12px;
  gap: 8px;
  border-radius: 50px;
  border: 0.86px solid;
  border-image-source: linear-gradient(115.72deg, #EAEAEA -18.08%, #F6F6F6 129.74%);
  background: linear-gradient(182.37deg, #F5F5F5 7.97%, #E4EDFF 246.79%);
  width: max-content;
  flex-wrap: nowrap;
  height: min-content;
}

.btn-filter > img {
  transition: transform 0.3s ease-in-out;
}

.btn-filter.active > img{
  transform: rotateZ(180deg);
}

.drivers-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.driver {
  box-shadow: 0px 0px 70px 1px #11244912;
  border-radius: 46px;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  /* gap: 16px; */
  width: 100%;
  transition: box-shadow 0.3s ease-in-out;
}

.driver:hover {
  box-shadow: 0px 0px 20px 1px #11244966;
}

.driver-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 46px 46px 0px 0px;
  height: 100%;
}

.driver-container.type-1,
.driver-container.type-2,
.driver-container.type-9 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.driver-container.type-1 {
  background-image: url('../images/gruz_back.webp');
}

.driver-container.type-2 {
  background-image: url('../images/pass_back.webp');
}
.driver-container.type-9 {
  background-image: url('../images/zoo_back.jpg');
}

.driver-rating-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.driver-rating-see {
  font: 400 14px/20px 'Inter';
  text-decoration: none;
  cursor: pointer;
}

.driver-name-container {
  display: flex;
  flex-direction: column;
  gap: 14px; 
}

.driver-name {
  font: 700 18px/22px 'Inter';
}

.driver-price {
  font: 400 14px/16px 'Inter';
}

.offer-parameters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: 400 12px/14px 'Inter';
}

.comments-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 100vw;
}



.comment-container-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
  padding: 12px;
}

.comment {
  display: flex; 
  flex-direction: column;
  gap: 24px;
  border-radius: 8px;
  background-color: #fff;
  width: 100%;
  box-shadow: 0px 0px 30px 0px #11244912;
  padding: 16px 8px;
}

.comment-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.container-wide {
  margin-left: -4px;
  /* margin-right: -4px; */
}

.comment-rating-container {
  display: flex;
  justify-content: flex-end;
}

.comment-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.offer-comment-form-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.comment-title {
  font: 700 18px/22px 'Inter';
}

.comment-body {
  font: 400 14px/18px 'Inter';
}

.comment-author {
  font: 400 16px/22px 'Inter';
}

.comment-date {
  font: 400 12px/22px 'Inter';
}

.faq-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-left-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.faq-item {
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 70px 1px #11244912;
  border-radius: 16px;
  background-color: #FFFFFF;
  padding: 24px;
  gap: 12px;
  font: 400 14px/18px 'Inter';
  cursor: pointer;
}

.faq-title {
  display: flex;
  align-items: center;
  padding-right: 32px;
  position: relative;
}

.btn-toggler {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0px;
  cursor: pointer;
  top:50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  transform-origin: 45% 25%;
}


.footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  box-shadow: 0px 0px 70px 1px #11244912;
  background-color: #FFFFFF;
  border-radius: 30px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font: 400 14px/16px 'Inter';
}

.modal {
  background: #00000066;
  display: flex;
  align-items: flex-start;
  position: fixed;
  min-height: 100vh;
  min-width: 100vw;
}

.modal-content {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 48px;
  border-radius: 50px;
  width: 100%;
  margin: 24px;
  padding: 56px 48px;
  position: relative;
}

.mainMenu-logo {
  /* width: 124px; */
  height: 66px;
}

.modal-content .btn-close {
  position: absolute;
  right: 36px;
  top: 36px;
}

.modal-nav  {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.modal-nav button {
  font: 400 18px/22px 'Inter';
}

.faq-body {
  display: none;
}

.faq-item.active .faq-body {
  display: block;
}

.faq-item.active .btn-toggler {
  transform: rotate(180deg);
}

.btn-seeMore {
  font: 400 20px/28px 'Inter';
  margin-bottom: 48px;
}

.driver-filter-selector {
  display: none;
}

.driver-filter-selector.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0px 16px;
}

.filter-field {
  display: flex;
  gap: 8px;
}

.filter-item {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.halo-driver-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.halo-driver-params,
.halo-driver-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gap-tiny {
  gap: 26px;
}

.offer-container {
  box-shadow: 0px 0px 86.15px 1.23px #11244912;
  padding: 46px 24px;
  /* padding: 46px 0px; */
  background-color: #ffffff;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.offer-main-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.offer-main-block .offer-container {
  margin-left: -16px;
  margin-right: -16px;
}

.offer-car-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.offer-title {
  font: 700 20px/24px 'Inter';
}

.offer-price {
  font: 400 20px/24px 'Inter';
  margin-bottom: 16px;
}

.offer-car-title {
  font: 700 18px/22px 'Inter';
  margin-top: 16px;
}
.offer-car-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: max-content;
}
.offer-car-params {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  /* display: grid;
  grid-template-columns: 1fr; */
  gap: 25px;
  
}

.offer-car-param {
  display: flex;
  gap: 24px;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  font: 400 15px/18px 'Inter';
}

.offer-main-image {
  display: none;
  object-fit: cover;

}

.photo-slider {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-x: hidden;
}

.photo-slider-items {
  display: flex;
  flex-direction: row;
}

.photo-slider-item {
  margin: 0 10px; /* 10px отступы с каждой стороны */
}

.container-order {
  box-shadow: 0px 0px 70px 1px #11244912;
  background-color: #FFFFFF;
  padding: 60px 16px;
  border-radius: 50px;
  position: relative;
}

#order-warn {
  display: flex;
  justify-content: center;
  color: red;
  font: 700 12px/16px 'Inter';
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 350ms ease-in-out;
}

#order-warn.show {
  opacity: 1;
}

.order-status {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-direction: column;
  padding: 24px;
}

.order-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.order-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.order-submit {
  display: flex;
  justify-content: center;
}

.order-form-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.order-btn-primary {
  font: 700 20px/24px 'Inter';
}

.order-form-item {
  position: relative;
  border-radius: 8px;
}

.order-form-item textarea,
.order-form-item input {
  padding: 12px 16px;
  border-radius: 8px;
  display: flex;
  width: 100%;
  outline: none;
  border: transparent;
  font: 400 16px/22px 'Inter';
  transition: border 0.3s ease-in-out;
  border: 1px solid #ddd;
  
}

.order-form-item textarea {
  resize: none;
}

.order-form-item textarea::placeholder,
.order-form-item input::placeholder {
  color: transparent;
}

.order-form-item label {
  position: absolute;
  font: 400 14px/20px 'Inter';
  left: 16px;
  top: 15px;
  background-color: #fff;
  transition: top 0.3s ease-in-out, color 0.3s ease-in-out;
}

.order-form-item textarea:focus + label,
.order-form-item textarea:not(:placeholder-shown) + label,
.order-form-item input:focus + label,
.order-form-item input:not(:placeholder-shown) + label {
  top: -9px;
  color: #2854AE;
}

.order-form-item textarea:focus,
.order-form-item textarea:not(:placeholder-shown),
.order-form-item input:focus,
.order-form-item input:not(:placeholder-shown) {
  border-color: #2854AE;
}

.input-group-append {
  position: absolute;
  right: 16px;
  top: 15px;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
  border: 1px solid #ddd;
  position: absolute;
  z-index: 1;
  background-color: #fff;
  padding: 24px !important;
  width: 100% !important;
  border-radius: 16px;
}


.offer-container li,
.offer-container p {
  font: 400 16px/22px 'Inter';
}

.offer-container ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.offer-container li {
  margin-left: 24px;
  list-style-type: disc;
}


.align-center {
  align-items: center;
}
.comments-container p,
.container-order p {
  font: 400 16px/22px 'Inter';
  max-width: 700px;
  margin: 0px auto;
}


.driver-image {
  width: 100%;
  border-radius: 0px 0px 46px 46px;
  aspect-ratio: 1/0.65;
  object-fit: cover;
}

.driver-rating-stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.comment-rating-container .active path,
.driver-rating-stars .active path {
  fill: #2854AE;
}

.offer-main-image,
.offer-halo-image {
  /* border-radius: 40px; */
  border-radius: 8px;
}

.slick-track img {
  aspect-ratio: 1/0.65;
}


.backseat {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 40px;
  width: 100%;
  /* border: 1px solid #FF6B00; */
  border-radius: 8px;
  background-color: white;
  box-shadow: 3px 3px 40px 0px rgba(0,0,0,0.15);
}

.comment_form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment_form svg {
  cursor: pointer;
}


.slick-track img {
  border-radius: 8px;
  object-fit: cover;
}

.modal-sm {
  display: flex;
  /* width: 300px; */
  width: 100%;
  flex-direction: column;
  gap: 16px;
  background-color: #FFFFFF;
  min-height: 300px;
  border-radius: 24px;
  padding: 32px 16px;

}

.modal-sm-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.comment-rating-field {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
}

.modal-title {
  font: 700 20px/24px 'Inter';
  position: sticky;
  top:0px;
  background-color: white;
  z-index: 1;
}

.comment_form textarea {
  font: 400 16px/18px 'Inter';
  min-height: 200px;
}
.comment-rating-field svg {
  width: 20px;
  height: 20px;
}

#comment_send_success {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  align-items: center;
  text-align: center;

  padding: 24px;
}

#comment_send_success h3 {
  font: 700 24px/28px 'Inter';
  color: #FF6B00;
}

.faq-image {
  display: none;
}

.boolean-true {
  color: green;
}

.comment-form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  gap: 16px;
}
.offer-main-block .offer-container {
  background-image: url('/images/background-01.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
}

.halo-price {
  font-size: 22px;
}

.halo-price span {
  font-size: 24px;  
  font-weight: bold;
}

#anchor_faq {
  margin-top: 46px;
  margin-bottom: 46px;
}

.comments-pagination-container {
  display: flex;
  gap: 8px;
}

.comments-pagination-container button {
  font: 400 16px/22px 'Inter';
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
}

.comments-pagination-container button.active {
  background: #2854AE;
  color: white;
}

.driver-offer-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  /* background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(255,255,255,1)); */
}
.driver-offer-text {
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}

.mobile-menu {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.1);
  backdrop-filter: blur(3px);
  z-index: -1;
  opacity: 0;
  width: 100%;
  transition: opacity 250ms ease-in-out, z-index 250ms ease-in-out;
}

.mobile-menu-container {
  display: flex;
  padding: 16px;  
  width: 100%;
}

.mobile-menu-body {
  display: flex;
  flex-direction: column;
  gap: 42px;
  background-color: white;
  border-radius: 24px;
  width: 100%;
  padding: 32px;
}

.mobile-menu-content ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mobile-menu-content .header-nav button {
  text-decoration: none;
  font: 400 16px/22px 'Inter';
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
}

.close-modal {
  transform: rotateZ(45deg);
}
.modal-hide {
  display: none;
}

section p {
  margin-bottom: 8px;
}

section h2 {
  justify-content: center;
  display: flex;
}

section h3 {
  padding: 8px 0px;
  font-weight: 600;
}


.container-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

article {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
article ul {

  display: flex;
  flex-direction: column;
  gap: 8px;
}
article ul li {
  padding-left: 16px;
  margin-left: 16px;
  list-style-type: circle;
}

.articles-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.blog-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-image {
  display: flex;
  max-width: 300px;
  height: auto;
  margin: 0px auto;
}
.blog-item-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-title {
  /* text-align: center; */
  font: 400 22px/26px 'Inter';
  text-transform: uppercase;
  text-decoration: none;
}

.blog-description p {
  line-height: 22px;
}

.blog-title a {
  text-decoration: none;
}

.container.container-blog {
  border-radius: 50px;
  box-shadow: 0px 0px 70px 1px #11244912;
  padding: 60px 20px;
}

.partial-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.partial-type-buttons {
  display: flex;
  gap: 16px;
  width: 100%;
  margin: 0px auto;
  flex-direction: column;
}

.partial-type-buttons label {
  display: flex;
  border-radius: 8px;
  padding: 8px 16px;
  border: 1px solid #FF6B00;
  width: 100%;
  justify-content: center;
  cursor: pointer;
  transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
}
.partial-type-buttons input {
  display: none;
  
}
.partial-type-buttons input:checked + label {
  background-color: #FF6B00;
  color: white;
}

.partial-divider {
  margin: 24px 0px 0px 0px;
  border-top: 1px dotted #ddd;
  padding: 16px 0px;
}

.partial-divider span {
  font-weight: 600;
}

.partial-type-item {
  display: none;
}

.partial-type-item.show {
  display: flex;
}

.partial-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.partial-article {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
  font: 400 18px/24px 'Inter';
}

.partial-article .sub-title {
  margin-top: 44px;
}

.partial-article h2 {
  line-height: 32px;
  margin-bottom: 12px;
}

.partial-article ol,
.partial-article  ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.partial-article li {
  margin-left: 16px;
}

.partial-submit {
  padding: 16px;
  display: flex;
  width: 100%;
  justify-content: center;
  border: 1px solid #ddd;
  cursor: pointer;
  margin-top: 32px;
  border-radius: 8px;
  background-color: #ff6a00;
  color: white;
  text-transform: uppercase;
  transition: background-color 250ms ease-in-out;
}

.partial-submit:hover {
  background-color: #ff6a00e8;
}

.order-form-item-desc {
  font: 400 14px/18px 'Inter';
  padding: 8px;
  margin-bottom: 16px;
  border-radius: 8px;
  background-color: #ff6a0033;
  margin-top: 4px;
}

.partial-modal {
  display: none;
  position: fixed;
  align-items: center;
  justify-content: center;
  left: 0;top: 0;right: 0;bottom: 0;
  background-color: #00000066;
  z-index: 5;
}

.partial-modal.show {
  display: flex;
}

.modal-container {
  background-color: #fff;
  border-radius: 16px;
  max-width: 600px;
  width: calc(100% - 32px);
  padding: 24px 16px;
  gap: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 3px 3px 10px 0px #00000066;
}

.modal-header {
  font: 600 20px/24px 'Inter';
  justify-content: center;
  display: flex;
  color: #ff6a00;
}

.modal-body {
  font: 400 16px/20px 'Inter';
}

.modal-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
}

.modal-actions button {
  display: flex;
  width: 100%;
  padding: 15px;
  font: 400 16px/20px 'Inter';
  background-color: #ff6a00;
  color: white;
  justify-content: center;
  border-radius: 8px;
  transition: background-color 250ms ease-in-out;
  max-width: 250px;
}

.modal-actions button:hover {
  background-color: #ff6a00e8;
}

.field-error {
  border-color: red !important;
}

@media (min-width: 375px) {
  .container {
    padding: 0px 16px;
  }

  .container-order {
    padding: 60px 16px;
  }

  .offer-container {
    padding: 46px 16px;
  }

  .offer-main-block .offer-container {
    margin-left: 0px;
    margin-right: 0px;
  }
}

@media (min-width: 410px) {
  .partial-type-buttons {
    flex-direction: row;
    width: 320px;
  }
}

@media (min-width: 768px) {

  .modal-container {
    padding: 48px 32px;
  }

  .modal-header {
    font-size: 30px;
    line-height: 34px;
  }
  
  .modal-body {
    font-size: 18px;
    line-height: 24px;
  }

  #partial-form {
    max-width: 320px;
  }

  .partial-container {
    flex-direction: row;
    justify-content: flex-start;
  }

  .blog-item {
    flex-direction: row;
  }
  .blog-title {
    text-align: left;
  }
  .blog-image {
    margin: 0px;
  }

  .modal-hide {
    display: inherit;
  }

  .btn-primary {
    padding: 16px 32px;
    width: max-content;
  }
  body {
    gap: 56px;
  }
  .header {
    display: none;
  }
  .halo {
    flex-direction: column;
    align-items: center;
    padding-top: 16px;
    margin-top: 16px;
  }
  .halo-body {
    flex-direction: row;
    width: 100%;
  }
  .halo-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 48px);
  }

  .halo-nav ul {
    flex-direction: row;
    display: flex;
    gap: 24px;
  }
  .halo-description {
    text-align: left;
  }
  .halo-left-column {
    justify-content: center;
    width: 100%;
  }

  .container {
    padding: 0px 24px;
  }

  .features-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
  }

  .drivers-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 100vw;
  }

  .driver > img {
    width: 100%;
  }

  .faq-container {
    flex-direction: row;
    align-items: flex-start;
  }

  .faq-image {
    height: 300px;
    margin-top: 24px;    
  }

  .footer {
    align-items: center;
  }

  .footer .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .footer-nav {
    flex-direction: row;
  }

  .halo-driver-container {
    flex-direction: row;
    min-width: 400px;
  }

  /* .offers {
    flex-direction: row-reverse;
  } */

  .offer-container {
    min-width: 400px;
    width: 100%;
  }

  .offer-main-image {
    height: 300px;
    display: flex;
  }
  
  .offer-main-block {
    flex-direction: row-reverse;
    align-items: center;
  }

  .order-form {
    flex-direction: row;
    justify-content: center;
    gap: 46px;
  }

  .container-order {
    padding: 60px 32px;
  }

}

@media (min-width: 980px) {

  .offer-halo-image {
    border-radius: 30px;
  }

  .backseat {
    width: 400px;
    margin-top: 53px;
  }

  #anchor_comments {
    min-height: 460px;
  }

  .offer-empty-comments {
    margin-top: 20% !important;
  }

  .faq-image {
    display: flex;
  }

  .modal-sm {
    max-width: 400px;
    min-width: 300px;
    width: 100%;
  }

  .container-small {
    width: 50%;
  }

  .container-row {
    flex-direction: row;
    justify-content: space-between;
  }

  .notify-fixed {
    position: sticky;
    top: 8px;
    background-color: #FF6B0015;
    padding: 24px !important;
    border-radius: 16px;
    border: 1px dashed #aaa;
    width: 40%;
  }
  .drivers-list {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .halo {
    padding-right: 40px;
    padding-left: 40px;
  }

  .offer-container {
    padding: 60px 46px;
  }



  .offer-car-params {
    gap: 16px;
    
  }

  .halo-driver-params,
  .halo-driver-stats {
    gap: 18px;
  }

  .comments-container {
    padding: 0px;
  }

  .comment {
    padding: 16px;
  }

}

@media (min-width: 1200px ) {
  body {
    gap: 72px;
  }

  .offer-car-params {
    grid-template-columns: 1fr 1fr;
  }

  .halo-title {
    font: 700 36px/44px 'Inter';
  }
  .halo-description {
    font: 400 24px/ 32px 'Inter';
  }
  .container {
    max-width: 1200px;
    margin: 0px auto;
  }
  .features-container {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
  }

  .drivers-container {
    flex-direction: row;
  }

  .driver-filters {
    margin-left: inherit;
    margin-right: inherit;
    overflow-x: inherit;
    min-width: 160px;
  }

  .btn-filter {
    width: 100%;
  }

  .driver-filters-container {
    flex-direction: column;
  }

  .drivers-list {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .drivers-container > button {
    display: none;
  }

  .container-order {
    padding: 60px 40px;
  }
}

.article-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.article-body p,
.article-body li {
  line-height: 24px;
}
.wp-block-list {
  list-style-type: inherit;
  padding: inherit;
  margin: inherit;
}
.wp-block-list li {
  list-style-type: disc;
  padding: inherit;
  margin: 0px 0px 0px 24px;
}
h1.wp-block-heading {
  font: 700 36px/44px 'Inter';
  color: #FF6B00;
  margin: 24px 0px 0px !important;
}
h2.wp-block-heading {
  font: 400 24px/32px 'Inter';
  margin: 24px 0px 0px !important;
}

h3.wp-block-heading {
  font: 400 20px/28px 'Inter';
  margin: 24px 0px 0px !important;
}

.wp-block-separator {
  margin: 24px 0px !important;
  border-color: #eee;
  display: none;
}

.wp-block-image {
  display: flex;
  width: 100%;  
}

.wp-block-image > img {
  display: flex;
  width: 100%;
  object-fit: cover;
  height: auto;
}