@font-face {
  font-family: 'HouschkaRoundedAlt 3';
  src: url('/static/fonts/HouschkaRoundedAlt-Regular10.eot');
  src: local('HouschkaRoundedAlt Regular 10'), local('HouschkaRoundedAlt-Regular10'),
    url('/static/fonts/HouschkaRoundedAlt-Regular10.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/HouschkaRoundedAlt-Regular10.woff2') format('woff2'),
    url('/static/fonts/HouschkaRoundedAlt-Regular10.woff') format('woff'),
    url('/static/fonts/HouschkaRoundedAlt-Regular10.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HouschkaRoundedAlt 2';
  src: url('/static/fonts/HouschkaRoundedAlt-Regular11.eot');
  src: local('HouschkaRoundedAlt Regular 11'), local('HouschkaRoundedAlt-Regular11'),
    url('/static/fonts/HouschkaRoundedAlt-Regular11.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/HouschkaRoundedAlt-Regular11.woff2') format('woff2'),
    url('/static/fonts/HouschkaRoundedAlt-Regular11.woff') format('woff'),
    url('/static/fonts/HouschkaRoundedAlt-Regular11.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'HouschkaRoundedAlt';
  src: url('/static/fonts/HouschkaRoundedAlt-Regular12.eot');
  src: local('HouschkaRoundedAlt Regular 12'), local('HouschkaRoundedAlt-Regular12'),
    url('/static/fonts/HouschkaRoundedAlt-Regular12.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/HouschkaRoundedAlt-Regular12.woff2') format('woff2'),
    url('/static/fonts/HouschkaRoundedAlt-Regular12.woff') format('woff'),
    url('/static/fonts/HouschkaRoundedAlt-Regular12.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HouschkaRoundedAlt 7';
  src: url('/static/fonts/HouschkaRoundedAlt-Regular6.eot');
  src: local('HouschkaRoundedAlt Regular 6'), local('HouschkaRoundedAlt-Regular6'),
    url('/static/fonts/HouschkaRoundedAlt-Regular6.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/HouschkaRoundedAlt-Regular6.woff2') format('woff2'),
    url('/static/fonts/HouschkaRoundedAlt-Regular6.woff') format('woff'),
    url('/static/fonts/HouschkaRoundedAlt-Regular6.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HouschkaRoundedAlt 9';
  src: url('/static/fonts/HouschkaRoundedAlt-Regular4.eot');
  src: local('HouschkaRoundedAlt Regular 4'), local('HouschkaRoundedAlt-Regular4'),
    url('/static/fonts/HouschkaRoundedAlt-Regular4.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/HouschkaRoundedAlt-Regular4.woff2') format('woff2'),
    url('/static/fonts/HouschkaRoundedAlt-Regular4.woff') format('woff'),
    url('/static/fonts/HouschkaRoundedAlt-Regular4.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HouschkaRoundedAlt 4';
  src: url('/static/fonts/HouschkaRoundedAlt-Regular9.eot');
  src: local('HouschkaRoundedAlt Regular 9'), local('HouschkaRoundedAlt-Regular9'),
    url('/static/fonts/HouschkaRoundedAlt-Regular9.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/HouschkaRoundedAlt-Regular9.woff2') format('woff2'),
    url('/static/fonts/HouschkaRoundedAlt-Regular9.woff') format('woff'),
    url('/static/fonts/HouschkaRoundedAlt-Regular9.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'HouschkaRoundedAlt 5';
  src: url('/static/fonts/HouschkaRoundedAlt-Regular8.eot');
  src: local('HouschkaRoundedAlt Regular 8'), local('HouschkaRoundedAlt-Regular8'),
    url('/static/fonts/HouschkaRoundedAlt-Regular8.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/HouschkaRoundedAlt-Regular8.woff2') format('woff2'),
    url('/static/fonts/HouschkaRoundedAlt-Regular8.woff') format('woff'),
    url('/static/fonts/HouschkaRoundedAlt-Regular8.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HouschkaRoundedAlt 8';
  src: url('HouschkaRoundedAlt-Regular5.eot');
  src: local('HouschkaRoundedAlt Regular 5'), local('HouschkaRoundedAlt-Regular5'),
    url('/static/fonts/HouschkaRoundedAlt-Regular5.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/HouschkaRoundedAlt-Regular5.woff2') format('woff2'),
    url('/static/fonts/HouschkaRoundedAlt-Regular5.woff') format('woff'),
    url('/static/fonts/HouschkaRoundedAlt-Regular5.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'HouschkaRoundedAlt 6';
  src: url('/static/fonts/HouschkaRoundedAlt-Regular7.eot');
  src: local('HouschkaRoundedAlt Regular 7'), local('HouschkaRoundedAlt-Regular7'),
    url('/static/fonts/HouschkaRoundedAlt-Regular7.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/HouschkaRoundedAlt-Regular7.woff2') format('woff2'),
    url('/static/fonts/HouschkaRoundedAlt-Regular7.woff') format('woff'),
    url('/static/fonts/HouschkaRoundedAlt-Regular7.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'HouschkaRoundedAlt 10';
  src: url('/static/fonts/HouschkaRoundedAlt-Regular3.eot');
  src: local('HouschkaRoundedAlt Regular 3'), local('HouschkaRoundedAlt-Regular3'),
    url('/static/fonts/HouschkaRoundedAlt-Regular3.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/HouschkaRoundedAlt-Regular3.woff2') format('woff2'),
    url('/static/fonts/HouschkaRoundedAlt-Regular3.woff') format('woff'),
    url('/static/fonts/HouschkaRoundedAlt-Regular3.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'HouschkaRoundedAlt 11';
  src: url('/static/fonts/HouschkaRoundedAlt-Regular2.eot');
  src: local('HouschkaRoundedAlt Regular 2'), local('HouschkaRoundedAlt-Regular2'),
    url('/static/fonts/HouschkaRoundedAlt-Regular2.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/HouschkaRoundedAlt-Regular2.woff2') format('woff2'),
    url('/static/fonts/HouschkaRoundedAlt-Regular2.woff') format('woff'),
    url('/static/fonts/HouschkaRoundedAlt-Regular2.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HouschkaRoundedAlt';
  src: url('/static/fonts/HouschkaRoundedAlt-MediumItalic.eot');
  src: local('HouschkaRoundedAlt-MediumItalic'),
    url('/static/fonts/HouschkaRoundedAlt-MediumItalic.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/HouschkaRoundedAlt-MediumItalic.woff2') format('woff2'),
    url('/static/fonts/HouschkaRoundedAlt-MediumItalic.woff') format('woff'),
    url('/static/fonts/HouschkaRoundedAlt-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}


:root {
  --main-bg-color: #121215;
  --blue-bg-color: #0b1821;
  --cst-blue: #008dd2;
  --cst-red: #e06966;
  --milk: #cde7f4;
}

/* COLORS */
.white {
  color: #fff !important;
}

.bg-white {
  background-color: #fff !important;
}

.black {
  color: #000 !important;
}

.bg-black {
  background-color: #000 !important;
}

.bg-milk {
  background-color: var(--milk) !important;
}

.custom-blue {
  color: var(--cst-blue) !important;
  border: solid 1px var(--cst-blue) !important;
}

.custom-red {
  color: var(--cst-red) !important;
  border: solid 1px var(--cst-red) !important;
}

.custom-blue-color {
  color: var(--cst-blue) !important;
}

.custom-blue-border {
  border: solid 1px var(--cst-blue) !important;
}

/* BUTTON */
.oval-btn {
  background-color: transparent;
  font-size: 24px;
  padding: 19px 20px 19px;
  min-width: 457px;
  cursor: pointer;
  border-radius: 40px;
  color: #fff;
  border: solid 1px #fff;
  text-align: center;
}

.custom-btn {
  background-color: transparent;
  border-radius: 40px;
  font-size: 16px;
  padding: 5px 20px;
}

.sqr-btn {
  text-align: center;
  cursor: pointer;
}

.oval-btn.custom-blue:hover,
.md-oval-btn.custom-blue:hover,
.sm-oval-btn.custom-blue:hover,
.sqr-btn.custom-blue:hover,
.custom-btn.custom-blue:hover,
.oval-btn.custom-blue.selected,
.md-oval-btn.custom-blue.selected,
.sm-oval-btn.custom-blue.selected,
.sqr-btn.custom-blue.selected,
.custom-btn.custom-blue.selected {
  background: rgb(1, 49, 73);
}

.oval-btn.custom-blue--covered,
.md-oval-btn.custom-blue--covered,
.sm-oval-btn.custom-blue--covered {
  color: white !important;
  background: var(--cst-blue);
  border: solid 1px var(--cst-blue) !important;
}

.oval-btn.custom-blue:focus,
.md-oval-btn.custom-blue:focus,
.sm-oval-btn.custom-blue:hover,
.sqr-btn.custom-blue:focus,
.custom-btn.custom-blue:focus,
.custom-blue.selected {
  background: rgb(1, 76, 114);
}

.oval-btn:focus,
.md-oval-btn:focus,
.sm-oval-btn:hover,
.sqr-btn:focus,
.custom-btn:focus {
  outline: none;
}

.sm-oval-btn {
  background-color: transparent;
  font-size: 18px;
  font-weight: 400;
  padding: 0 30px 0;
  min-width: 165px;
  cursor: pointer;
  border-radius: 40px;
  color: #fff;
  text-align: center;
}

.md-oval-btn {
  background-color: transparent;
  font-size: 18px;
  font-weight: 400;
  padding: 5px 30px 5px;
  min-width: 165px;
  cursor: pointer;
  border-radius: 40px;
  color: #fff;
  text-align: center;
}

.sqr-btn {
  position: relative;
  min-width: 150px;
  border-radius: 0.25rem;
  padding: 7px 20px;
  background: var(--main-bg-color);
}

.btn-link {
  background-color: transparent;
  border: none;
  color: var(--cst-blue);
}

.link-btn:focus {
  outline: none;
  text-decoration: unset;
}

.link-btn:hover {
  color: #25b7ff !important;
  outline: none;
  text-decoration: unset;
}

/* LINKS  */
.blue-link {
  color: var(--cst-blue) !important;
}

.blue-link:hover {
  color: #25b7ff !important;
}

.white-link {
  color: #fff !important;
}

.red-link {
  color: var(--cst-red) !important;
}

.red-link:hover {
  color: #dd8e8c !important;
}

/* FORM-CONTROL */
.form-control {
  border-radius: unset;
  height: unset;
  appearance: auto;
  -moz-appearance: auto;
  -webkit-appearance: auto;
}

/* COSMETIC */
.dot {
  margin: auto;
  box-sizing: content-box;
  width: 0;
  height: 0;
  border: calc(var(--fc-daygrid-event-dot-width, 10px) / 2) solid var(--fc-event-border-color, #3788d8);
  border-radius: calc(var(--fc-daygrid-event-dot-width, 10px) / 2);
}

.dot.green {
  border-color: #21A038 !important;
}

.dot.red {
  border-color: var(--cst-red) !important;
}

.dot.yellow {
  border-color: #d8d514 !important;
}

/* LABEL  */
label {
  color: rgb(228, 225, 225);
  opacity: 0.4;
  font-size: 20px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 0;
  bottom: 3px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

/* active state */
input:focus~label,
input:valid~label,
input[readonly]~label,
select:valid~label,
select[readonly]~label,
label.active {
  top: 0;
  font-size: 14px;
  color: rgb(204, 202, 202);
}

select[multiple]~label {
  top: 0px;
}

textarea~label {
  top: 35px;
  left: 10px;
}

input[type="checkbox"]~label {
  left: 20px;
  top: -10px;
  font-size: 20px;
}

textarea:focus~label,
textarea:valid~label,
textarea[readonly]~label {
  top: 0px;
  left: 3px;
  font-size: 14px;
  color: rgb(204, 202, 202);
}

label.error {
  display: none;
}

label.checkbox {
  position: relative;
  pointer-events: all;
  opacity: 1;
}

/* Layer over the natural checkbox: we can not style input[checkbox] directly */
.checkbox__label:before {
  content: " ";
  display: block;
  height: 2rem;
  width: 2rem;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--main-bg-color);
}

/* Faux checkbox: we can not style input[checkbox] directly */
.checkbox__label:after {
  content: " ";
  display: block;
  height: 2rem;
  width: 2rem;
  border: 0.35rem solid #fff;
  transition: 200ms;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--main-bg-color);
}

/* Animation
---------
*/
.checkbox__label:after {
  transition: 100ms ease-in-out;
}

/* Look after animation finishes
-----------------------------
*/
.checkbox__input:checked~.checkbox__label:after {
  border-top-style: none;
  border-right-style: none;
  -ms-transform: rotate(-45deg);
  /* IE9 */
  transform: rotate(-45deg);
  height: 1.25rem;
  border-color: #fff;
}

.old-ie .checkbox__label:before,
.old-ie .checkbox__label:after {
  display: none;
}

/* Not so important:
-----------------
*/
.checkbox {
  position: relative;
  display: flex;
  cursor: pointer;
  /* Mobile Safari: */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.checkbox__label:after:hover,
.checkbox__label:after:active {
  border-color: #044161;
}

.checkbox__label {
  margin-left: 2rem;
  line-height: 1.2;
  font-size: 28px;
  text-transform: uppercase;
  font-weight: 600;
  text-align: left;
  color: #fff;
  border-bottom: 1px solid #fff;
  padding-bottom: 3px;
  margin-bottom: 10px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
  -webkit-transition-delay: 9999s;
  -webkit-transition: background-color 9999s ease-out;
  -webkit-text-fill-color: #fff !important;
}

@media (max-width: 768px) {
  .checkbox__label {
    font-size: 22px;
    margin-bottom: 0;
  }

  /* Layer over the natural checkbox: we can not style input[checkbox] directly */
  .checkbox__label:before {
    top: 0;
    bottom: 0;
    margin: auto 0;
  }

  /* Faux checkbox: we can not style input[checkbox] directly */
  .checkbox__label:after {
    top: 0;
    bottom: 0;
    margin: auto 0;
  }

}

/* FLEX */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex.column {
  flex-direction: column;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row {
  flex-direction: row !important;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.justify-spase-between {
  justify-content: space-between;
}

.gap-5 {
  gap: 5px !important;
}

.gap-10 {
  gap: 10px !important;
}

.gap-15 {
  gap: 15px !important;
}

.gap-20 {
  gap: 20px !important;
}

.gap-30 {
  gap: 30px !important;
}

.gap-75 {
  gap: 75px !important;
}

.width-100 {
  width: 100%;
}

/* BORDER */
.none-border {
  border: none !important;
}

/* TABLE */
table {
  width: 100%;
  color: #fff;
}

table td,
table th {
  padding-right: 20px;
  padding-bottom: 10px;
}

@media (max-width: 768px) {

  table td,
  table th {
    padding-right: 10px;
    font-size: 14px;
  }
}

table.table-condensed {
  width: unset;
}

table.table-condensed td,
table.table-condensed th {
  padding: 0;
}

.scroll-table {
  overflow-x: auto;
}

.scroll-table::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.scroll-table::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(211, 201, 201, 0.3);
  border-radius: 6px;
}

.scroll-table::-webkit-scrollbar-thumb {
  border-radius: 6px;
  -webkit-box-shadow: inset 0 0 6px rgba(235, 227, 227, 0.5);
}

.mis-table {
  margin: auto;
  max-width: 1260px;
  color: #fff;
  background-color: var(--blue-bg-color);
  padding: 20px;
  border-radius: 30px;
}

.mis-table__buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.mis-table__buttons button {
  font-size: 16px;
  padding: 5px;
  min-width: 157px;
}

.mis-table table {
  width: 100%;
}

.mis-table table td {
  padding-right: 20px;
  padding-bottom: 10px;
}

#mis-table__create-modal-window .fields-wrapper {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

#mis-table__create-modal-window .field-wrapper {
  flex: 20%;
}

@media (max-width: 768px) {
  #mis-table {
    padding: 0;
  }

  .mis-table table td {
    padding-right: 10px;
    font-size: 14px;
  }
}


/* PAGINATION */
.pagination {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
  margin: auto;
  margin-bottom: 40px;
  padding: 20px 40px 0 40px;
  list-style: none;
}

.pagination__items {
  display: flex;
  gap: 5px;
}

.pagination__item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--cst-blue);
  border-radius: 50%;
  background: #000;
}

.pagination__btn {
  display: flex;
  flex-direction: row;
  gap: 10px;
  text-decoration: none;
  font-size: 14px;
  border: 2px solid var(--cst-blue);
  border-radius: 6px;
  padding: 10px;
  color: var(--cst-blue);
}

.pagination__btn:hover {
  text-decoration: none;
  color: #00a8fc;
}

.pagination__btn i {
  margin-top: auto;
  margin-bottom: auto;
}

.pagination__item.active {
  background: var(--milk);
}

.pagination__item.pagination__item--dots {
  background: transparent;
  border: none;
  align-items: flex-end;
}

.pagination__item.pagination__item--prev,
.pagination__item.pagination__item--next {
  background: transparent;
  border: none;
  font-size: 30px;

}

.pagination__item.pagination__item--prev a,
.pagination__item.pagination__item--next a {
  color: var(--cst-blue);
}

.pagination__item a {
  color: var(--cst-blue);
  text-decoration: unset;
}

@media (max-width: 768px) {
  .pagination__btn span {
    display: none;
  }
}

@media (max-width: 425px) {
  .pagination {
    padding: 20px 20px 0 20px;
  }

}

/* Main */
body {
  width: 100%;
  height: 100vh;
  font-family: "Inter", sans-serif;
  background-color: var(--main-bg-color);
  padding: 0;
  margin: 0;
}

.page-content {
  margin-top: 70px;
}

.text-center {
  text-align: center;
}

.help-tooltip {
  cursor: help;
  width: 16px;

}

.bootstrap-datetimepicker-widget {
  background-color: var(--blue-bg-color) !important;
  background: var(--blue-bg-color) !important;
}

.bootstrap-datetimepicker-widget td:hover {
  color: #000 !important;
}

.bootstrap-datetimepicker-widget .datepicker-days thead tr {
  color: #fff !important;
}

/* .bootstrap-datetimepicker-widget .datepicker-days thead tr th {
  color: #fff !important;
  background: none !important;
  background-color: unset !important;
} */

.bootstrap-datetimepicker-widget .datepicker-days thead tr th:hover,
.bootstrap-datetimepicker-widget .datepicker-months thead tr th:hover {
  color: #000 !important;
}


.bootstrap-datetimepicker-widget td:hover .datepicker-months span {
  color: #fff;
}

.bootstrap-datetimepicker-widget .datepicker-months span {
  color: #fff;
}

.bootstrap-datetimepicker-widget .datepicker-months span:hover {
  color: #000;
}


i {
  cursor: pointer;
}

.content-wrapper {
  min-height: 100vh;
  position: relative;
  padding-bottom: 300px;
}

/* Navbar */
#navbar {
  justify-content: flex-end;
  background-color: var(--main-bg-color);
  height: 60px;
}

#navbarCollapse,
.navbar {
  background-color: var(--main-bg-color);
}

.navbar-expand-custom {
  padding: 10px 40px;
}

.fa.fa-navicon {
  color: #fff;
}

.container-collapse-navbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.navbar-toggler {
  float: right;
  padding: 0;
}

.navbar-toggler:focus {
  outline: none;
}

.navbar-brand.logo {
  padding: 0.5rem 0;
}

.navbar-brand.logo img {
  width: 117px;
  height: 40px;
}

#navbar-links {
  display: flex;
  justify-content: flex-end;
}

.nav-item {
  display: flex;
  justify-self: center;
  align-items: center;
}

.nav-item__column {
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-items: center;
  padding: 0 15px;
  color: #fff;
}

.nav-item i {
  color: #fff;
}

.nav-link {
  color: #ffffff;
  font-size: 20px;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: var(--cst-red);
}

.nav-link.phone {
  font-size: 16px;
  padding-bottom: 0;
}

.nav-item__column.phone span {
  font-size: 14px;
}


.nav-link .nav-basket__counter {
  padding: 3px;
  border-radius: 50%;
  background-color: var(--cst-blue);
  font-size: 16px;
  font-weight: 400;
  font-family: "Inter";
  width: 30px;
  height: 30px;
  text-align: center;
}

.nav-basket {
  display: flex;
}

.site-search__icon {
  margin: auto;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}

.nav-basket a {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.nav-basket__icon {
  width: 26px;
  height: 26px;
  margin-right: 8px;
}

.nav-basket__counter span {
  margin: auto;
}

.fa.fa-navicon {
  color: var(--cst-red);
  font-size: 28px;
}

.navbar-links__main-links,
.navbar-links__search-and-phone {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.dropdown-menu {
  background: var(--main-bg-color);
  border: none;
  min-width: unset;
  /* padding: 10px; */
}

@media (max-width: 1510px) {
  .nav-item a {
    font-size: 18px;
  }
}

@media (max-width: 1390px) {
  .navbar-links__main-links {
    gap: 0;
  }

  .nav-basket {
    position: absolute;
    top: 14px;
    right: 80px;
  }

  #navbarNav {
    background: var(--main-bg-color);
    box-shadow: 0px 4px 40px rgba(173, 228, 255, 0.3);
    border-radius: 40px;
  }

  .navbar-nav {
    display: flex;
    flex-direction: column-reverse;
  }

  .nav-item {
    align-self: center;
  }

  .navbar-links__main-links {
    flex-direction: column;
  }

  .navbar-links__search-and-phone {
    flex-direction: column-reverse;
  }

  .main-navbar .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
}

@media (min-width: 1390px) {
  .main-navbar {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .main-navbar .navbar-nav {
    flex-direction: row;
  }

  .main-navbar .dropdown-menu {
    position: absolute;
  }

  .main-navbar .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .main-navbar>.container {
    flex-wrap: nowrap;
  }

  .main-navbar .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .main-navbar .navbar-toggler {
    display: none;
  }
}


@media (max-width: 1560px) {
  #accountNavbar .navbar-nav {
    display: flex;
  }

  #accountNavbar .nav-item {
    align-self: center;
  }

  #accountNavbar .navbar-links__main-links {
    flex-direction: column;
  }

  #accountNavbar .navbar-links__search-and-phone {
    flex-direction: column-reverse;
  }
}

@media (min-width: 1560px) {
  .account-navbar {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .account-navbar .navbar-nav {
    flex-direction: row;
  }

  .account-navbar .dropdown-menu {
    position: absolute;
  }

  .account-navbar .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .account-navbar>.container {
    flex-wrap: nowrap;
  }

  .account-navbar .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .account-navbar .navbar-toggler {
    display: none;
  }
}

/* @media (max-width: 768px) {
  .navbar-nav {
    margin-top: 60px;
  }
} */

@media (max-width: 425px) {
  .navbar-toggler {
    float: right;
  }

  .nav-basket {
    right: 60px;
  }

  .navbar-expand-custom {
    padding: 10px 20px;
  }

  .nav-item {
    padding: 0 5px;
  }

  .nav-link {
    font-size: 16px;
  }
}

.messages {
  position: absolute;
  width: 100%;
  margin-top: 70px;
  z-index: 3;
}

.messages .close {
  color: #000;
}

.alert-error {
  background-color: var(--cst-red);
  color: #fff;
}

/* PAGE HEADER */
.page-header {
  background-image: url("/static/img/black_mramor_big.png");
}

.page-header__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1920px;
  margin: auto;
  padding: 60px 90px;
}

.page-header__title h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  color: #fff;
  margin-bottom: 0;
}

@media (max-width: 1440px) {
  .page-header__title {
    padding: 50px 40px;
  }

  .page-header__title h1 {
    font-size: 32px;
  }
}

@media (max-width: 1024px) {
  .page-header__title {
    padding: 40px;
  }

  .page-header__title h1 {
    font-size: 30px;
  }
}

@media (max-width: 768px) {
  .page-header__title {
    font-size: 24px;
    padding: 30px 20px;
  }

  .page-header__title h1 {
    font-size: 24px;
  }
}

/* FOOTER */
footer {
  position: absolute;
  height: 210px;
  opacity: 0.8;
  bottom: 0;
  width: 100%;
}

footer .fp-container,
footer .fp-container .footer-items {
  height: 100%;
}

.footer-items {
  display: flex;
  flex-wrap: wrap;
  padding: 40px 40px;
  background-color: #0b0b0f;
}

.logo-and-copyright,
.documents,
.address,
.icons {
  flex: 1;
  padding: 0 20px;
}

.footer-items .logo-and-copyright .logo img {
  height: 46px;
}

.logo-and-copyright .copyright {
  padding-top: 13px;
}

.footer-items .logo-and-copyright .copyright p {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #d9d9d9;
  margin-bottom: 0;
}

.footer-items .documents,
.footer-items .address {
  display: flex;
  flex-direction: column;
}

.footer-items .documents a {
  font-weight: 400;
  font-size: 14px;
  line-height: 27px;
  text-decoration-line: underline;
  color: #d9d9d9;
}

.footer-items .address span {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #d9d9d9;
}

.footer-items .icons {
  display: flex;
  justify-content: flex-end;
}

.footer-items .icons .icon {
  width: 40px;
  height: 40px;
}

.footer-items .icons .icon img {
  width: 100%;
}

.footer-item.icons {
  gap: 6px;
}

.footer-item.icons i {
  font-size: 40px;
  color: white;
}


@media (max-width: 1024px) {

  footer .fp-container,
  footer .fp-container .footer-items {
    height: unset;
  }
}

@media (max-width: 768px) {
  .footer-item {
    flex: 50%;
    padding: 20px;
    justify-content: flex-start;
  }

  .footer-items .icons {
    display: flex;
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .footer-items {
    flex-direction: column;
  }
}

/* PARALLAX-ELLIPSE */
.parallax-ellipse {
  z-index: -1;
}

.fp-parallax-ellipse-1 {
  position: absolute;
  width: 710px;
  height: 710px;
  left: -267px;
  top: 1476px;

  background: var(--cst-blue);
  opacity: 0.1;
  filter: blur(100px);
}

.fp-parallax-ellipse-2 {
  position: absolute;
  width: 416px;
  height: 416px;
  left: 279px;
  top: 1873px;

  background: var(--cst-red);
  opacity: 0.1;
  filter: blur(100px);
}

.footer-parallax-ellipse-1 {
  position: absolute;
  width: 501.42px;
  height: 250.42px;
  left: -69px;
  bottom: 0px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;

  background: var(--cst-blue);
  opacity: 0.3;
  filter: blur(100px);
}

.footer-parallax-ellipse-2 {
  position: absolute;
  width: 527.49px;
  height: 300.49px;
  right: 100px;
  bottom: 0px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;

  background: var(--cst-blue);
  opacity: 0.6;
  filter: blur(100px);
}

.footer-parallax-ellipse-3 {
  position: absolute;
  width: 557.82px;
  height: 557.82px;
  right: 0;
  bottom: 60px;

  background: var(--cst-red);
  opacity: 0.3;
  filter: blur(100px);
}

.fp-parallax-ellipse-6 {
  position: absolute;
  width: 448px;
  height: 448px;
  left: 50%;
  transform: translate(-50%, 0);
  background: var(--cst-blue);
  opacity: 0.3;
  filter: blur(100px);
}

.fp-parallax-ellipse-7 {
  position: absolute;
  width: 348px;
  height: 348px;
  bottom: 0;
  right: 0;

  background: var(--cst-red);
  opacity: 0.25;
  filter: blur(100px);
}

.basket-parallax-ellipse-1 {
  position: absolute;
  width: 348px;
  height: 348px;
  top: 0;
  left: 0;

  background: var(--cst-blue);
  opacity: 0.25;
  filter: blur(100px);
}

@media (max-width: 1024px) {
  .fp-parallax-ellipse-1 {
    position: absolute;
    width: 710px;
    height: 710px;
    left: -267px;
    top: 1200px;

    background: var(--cst-blue);
    opacity: 0.1;
    filter: blur(100px);
  }

  .fp-parallax-ellipse-2 {
    position: absolute;
    width: 416px;
    height: 416px;
    left: 279px;
    top: 1873px;

    background: var(--cst-red);
    opacity: 0.3;
    filter: blur(100px);
  }

  .fp-parallax-ellipse-3 {
    position: absolute;
    width: 350.42px;
    height: 175.42px;
    left: -69px;
    bottom: 0px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;

    background: var(--cst-blue);
    opacity: 0.3;
    filter: blur(100px);
  }

  .fp-parallax-ellipse-4 {
    position: absolute;
    width: 400.49px;
    height: 200.49px;
    right: 100px;
    bottom: 0px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;

    background: var(--cst-blue);
    opacity: 0.6;
    filter: blur(100px);
  }

  .fp-parallax-ellipse-5 {
    position: absolute;
    width: 400.82px;
    height: 200.82px;
    right: 0;
    bottom: 274px;

    background: var(--cst-red);
    opacity: 0.6;
    filter: blur(100px);
  }

  .fp-parallax-ellipse-6 {
    position: absolute;
    width: 0px;
    height: 0px;
    left: 50%;
    transform: translate(-50%, 0);

    background: var(--cst-blue);
    opacity: 0.3;
    filter: blur(100px);
  }
}

@media (max-width: 768px) {
  .fp-parallax-ellipse-1 {
    position: absolute;
    width: 400px;
    height: 400px;
    left: -125px;
    top: 1000px;

    background: var(--cst-blue);
    opacity: 0.1;
    filter: blur(100px);
  }

  .fp-parallax-ellipse-2 {
    position: absolute;
    width: 150px;
    height: 416px;
    left: 279px;
    top: 1673px;

    background: var(--cst-red);
    opacity: 0.3;
    filter: blur(100px);
  }

  .footer-parallax-ellipse-1 {
    position: absolute;
    width: 150px;
    height: 175.42px;
    left: -69px;
    bottom: 0px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;

    background: var(--cst-blue);
    opacity: 0.3;
    filter: blur(100px);
  }

  .footer-parallax-ellipse-2 {
    position: absolute;
    width: 150px;
    height: 200.49px;
    right: 100px;
    bottom: 0px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;

    background: var(--cst-blue);
    opacity: 0.6;
    filter: blur(100px);
  }

  .footer-parallax-ellipse-3 {
    position: absolute;
    width: 150px;
    height: 200.82px;
    right: 0;
    bottom: 274px;

    background: var(--cst-red);
    opacity: 0.6;
    filter: blur(100px);
  }

  .fp-parallax-ellipse-6 {
    position: absolute;
    width: 0px;
    height: 0px;
    left: 50%;
    transform: translate(-50%, 0);

    background: var(--cst-blue);
    opacity: 0.3;
    filter: blur(100px);
  }

  .fp-parallax-ellipse-7 {
    position: absolute;
    width: 150px;
    height: 348px;
    bottom: 500px;
    left: 0;

    background: var(--cst-red);
    opacity: 0.25;
    filter: blur(100px);
  }

  .fp-parallax-ellipse-8 {
    position: absolute;
    width: 348px;
    height: 348px;
    top: -100px;
    left: 50%;
    transform: translate(-50%, 0);

    background: var(--cst-blue);
    opacity: 0.6;
    filter: blur(100px);
  }
}

@media (max-width: 425px) {
  .fp-parallax-ellipse-1 {
    position: absolute;
    width: 150px;
    height: 400px;
    left: 0;
    top: 1400px;

    background: var(--cst-blue);
    opacity: 0.1;
    filter: blur(100px);
  }

  .fp-parallax-ellipse-2 {
    position: absolute;
    width: 150px;
    height: 416px;
    left: 120px;
    top: 1673px;

    background: var(--cst-red);
    opacity: 0.3;
    filter: blur(100px);
  }

  .footer-parallax-ellipse-1 {
    position: absolute;
    width: 150px;
    height: 175.42px;
    left: -69px;
    bottom: 0px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;

    background: var(--cst-blue);
    opacity: 0.3;
    filter: blur(100px);
  }

  .footer-parallax-ellipse-2 {
    position: absolute;
    width: 150px;
    height: 200.49px;
    right: 100px;
    bottom: 0px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;

    background: var(--cst-blue);
    opacity: 0.6;
    filter: blur(100px);
  }

  .footer-parallax-ellipse-3 {
    position: absolute;
    width: 150px;
    height: 200.82px;
    right: 0;
    bottom: 274px;

    background: var(--cst-red);
    opacity: 0.6;
    filter: blur(100px);
  }

  .fp-parallax-ellipse-6 {
    position: absolute;
    width: 0px;
    height: 0px;
    left: 50%;
    transform: translate(-50%, 0);

    background: var(--cst-blue);
    opacity: 0.3;
    filter: blur(100px);
  }

  .fp-parallax-ellipse-7 {
    position: absolute;
    width: 150px;
    height: 348px;
    bottom: 300px;
    left: 0;

    background: var(--cst-red);
    opacity: 0.25;
    filter: blur(100px);
  }

  .fp-parallax-ellipse-8 {
    position: absolute;
    width: 150px;
    height: 348px;
    top: -100px;
    left: 50%;
    transform: translate(-50%, 0);

    background: var(--cst-blue);
    opacity: 0.6;
    filter: blur(100px);
  }

  .basket-parallax-ellipse-1 {
    position: absolute;
    width: 250px;
    height: 200px;
    top: 0;
    left: 0;

    background: var(--cst-blue);
    opacity: 0.25;
    filter: blur(100px);
  }
}

/* MAIN PAGE */
/* MAIN PAGE SECTIONS */

#fp-services {
  padding: 53px 0 152px 0;
}

#fp-discount {
  padding-top: 53px;
}

#advantages {
  padding: 0;
  margin-bottom: 80px;
}

#bone-marrow-donation {
  padding: 0px 0 133px 0;
}

#health-store {
  position: relative;
  padding: 0px 0 133px 0;
}

.container .header {
  padding: 0px 0 58px 0;
}

.fp-container .header {
  padding: 0px 0 31px 0;
}

.fp-container .header h2,
.container .header h2 {
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
}

.fp-container .header .description {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  text-align: center;
  color: #fff;
}

/* TAGLINE AND LOGO */
#fp-tagline {
  background: url("/static/img/leaves.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  padding: 172px 0 0 0;
}

#fp-tagline .logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 531px;
  margin-bottom: 38px;
}

.fp-tagline {
  text-align: center;
  padding: 0 100px;
  margin-bottom: 38px;
}

.fp-tagline h1 {
  font-size: 80px;
  font-weight: 300;
  color: #fff;
  line-height: 97px;
}

.fp-copr-link {
  display: flex;
  justify-content: center;
  padding-bottom: 63px;
}

.fp-copr-link a {
  text-decoration: none;
}

.fp-flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media (max-width: 1440px) {
  #fp-services {
    padding: 50px 0 90px 0;
  }
}

@media (max-width: 1200px) {
  #fp-services {
    padding: 50px 0 70px 0;
  }

  #fp-tagline {
    padding: 107px 0 0px 0;
  }

  #fp-tagline .logo {
    max-width: 400px;
    margin-bottom: 25px;
  }

  .fp-tagline {
    text-align: center;
    padding: 0 100px;
    margin-bottom: 40px;
  }

  .fp-tagline h1 {
    font-size: 60px;
    color: #fff;
    line-height: 70px;
  }

  .fp-copr-link .oval-btn {
    border: 1px solid #ffffff;
    border-radius: 50px;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    min-width: 281px;
  }

  .fp-copr-link {
    padding-bottom: 30px;
  }
}

@media (max-width: 1024px) {
  #fp-tagline {
    padding: 107px 0 0px 0;
  }

  #fp-tagline .logo {
    max-width: 350px;
    margin-bottom: 25px;
  }

  .fp-tagline {
    text-align: center;
    padding: 0 65px;
    margin-bottom: 40px;
  }

  .fp-tagline h1 {
    font-size: 50px;
    color: #fff;
    line-height: 50px;
  }

  .fp-copr-link {
    padding-bottom: 30px;
  }
}

@media (max-width: 768px) {
  #fp-services {
    padding: 46px 0 62px 0;
  }

  #fp-tagline {
    padding: 107px 0 0px 0;
  }

  #fp-tagline .logo {
    max-width: 255px;
    margin-bottom: 25px;
  }

  .fp-tagline {
    text-align: center;
    padding: 0 20px;
    margin-bottom: 40px;
  }

  .fp-tagline h1 {
    font-size: 40px;
    color: #fff;
    line-height: 48px;
  }

  .fp-copr-link .oval-btn {
    border: 1px solid #ffffff;
    border-radius: 50px;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    min-width: 281px;
  }

  .fp-copr-link {
    padding-bottom: 30px;
  }

  .fp-container .header h2,
  .container .header h2 {
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
  }
}

@media (max-width: 425px) {
  #fp-services .fp-container .header {
    padding: 0 0 10px 0;
  }

  .fp-copr-link .oval-btn {
    min-width: 250px;
  }
}

/* DISCOUNT */
#discount-slider .card-bg-image img {
  opacity: 0.3;
}

#discount-slider .card-description {
  color: #fff;
}


/* SUBSCRIPTIONS */
#fp-subscriptions {
  margin: 0 40px;
  margin-bottom: 80px;

}

.fp-subscription-list {
  display: flex;
  justify-content: center;
  gap: 100px;
}

.fp-subscription {
  max-width: 470px;
  background: #2E2E3A;
  border-radius: 20px;
  padding: 20px;
}

.fp-subscription__header {
  font-size: 25px;
  font-weight: 600;
  line-height: 44px;
  color: #fff;
  margin-bottom: 10px;
}

.fp-subscription__price {
  display: flex;
  margin-bottom: 20px;
  padding: 0 10px;
}

.fp-subscription__price--cost {
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  color: var(--cst-blue);
}

.fp-subscription__price--duration {
  font-size: 14px;
  font-weight: 700;
  line-height: 30px;
  color: var(--cst-blue);
  align-self: flex-end;
}

.fp-subscription__description {
  font-size: 19px;
  font-weight: 400;
  line-height: 23px;
  color: #fff;
  margin-bottom: 20px;
}

.fp-subscription__advantages {
  margin-block: 0;
  padding: 0;
  margin-bottom: 40px;
}

.fp-subscription__advantages li {
  color: #fff;
  font-size: 19px;
  font-weight: 500;
  line-height: 23px;
  margin-bottom: 10px;
}

.fp-subscription__advantages li i {
  font-size: 14px;
  color: var(--cst-red);
}

.fp-subscription__advantages li i.empty {
  font-size: 14px;
  color: transparent;
}

.fp-subscription__advantages li::marker {
  content: ""
}

.fp-subscription__button a {
  display: block;
  min-width: 315px;
  max-width: 315px;
  margin: auto;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
}

@media (max-width: 1440px) {
  .fp-subscription-list {
    flex-wrap: wrap;
    gap: 50px;
  }

  .fp-subscription__header {
    font-size: 22px;
    line-height: 44px;
  }

  .fp-subscription__price--cost {
    font-size: 32px;
    line-height: 40px;
  }

  .fp-subscription__price--duration {
    font-size: 14px;
    line-height: 30px;
  }

  .fp-subscription__description {
    font-size: 18px;
    line-height: 20px;
  }

  .fp-subscription__advantages li {
    font-size: 18px;
    line-height: 20px;
  }
}

@media (max-width: 768px) {
  #fp-subscriptions {
    margin: 0 20px;
    margin-bottom: 60px;
  }

  .fp-subscription-list {
    align-items: center;
    flex-direction: column;
    gap: 40px;
  }

  .fp-subscription__header {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 5px;
  }

  .fp-subscription__price--cost {
    font-size: 26px;
    line-height: 40px;
  }

  .fp-subscription__price--duration {
    font-size: 14px;
    line-height: 30px;
  }

  .fp-subscription__description {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 10px;
  }

  .fp-subscription__advantages li {
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 5px;
  }
}


/* ADVANTAGES */
.advantages {
  display: flex;
  flex-wrap: wrap;
}

.advantage {
  flex: 15%;
  padding: 35px 30px;
}

.advantage__image {
  margin-bottom: 42px;
}

.advantages .advantage:nth-child(1) .advantage__image img {
  margin: auto;
  display: block;
  width: 113px;
  height: 99px;
}

.advantages .advantage:nth-child(2) .advantage__image img {
  margin: auto;
  display: block;
  width: 111px;
  height: 91px;
}

.advantages .advantage:nth-child(3) .advantage__image img {
  margin: auto;
  display: block;
  width: 112px;
  height: 112px;
}

.advantages .advantage:nth-child(4) .advantage__image img {
  margin: auto;
  display: block;
  width: 111px;
  height: 106px;
}

.advantages .advantage:nth-child(5) .advantage__image img {
  margin: auto;
  display: block;
  width: 111px;
  height: 106px;
}

.advantage__title {
  margin-bottom: 16px;
}

.advantage__title h2 {
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  text-align: center;
  color: #ffffff;
}

.advantage__description h3 {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #d9d9d9;
}

@media (max-width: 1440px) {
  .advantage__image {
    margin-bottom: 35px;
  }

  #advantages .fp-container {
    max-width: 980px;
    margin: auto;
  }

  .advantage {
    flex: 50%;
    padding: 35px 40px;
  }
}

@media (max-width: 1024px) {
  #advantages {
    margin-bottom: 70px;
  }
}

@media (max-width: 768px) {
  #advantages {
    margin-bottom: 50px;
  }

  #advantages .fp-container .header {
    padding: 0 0 20px 0;
  }

  .advantage__image {
    margin-bottom: 19px;
  }

  .advantage {
    padding: 20px 20px;
  }

  .advantage__title h2 {
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
  }

  .advantage__description h3 {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
  }
}

@media (max-width: 600px) {
  .advantages {
    flex-direction: column;
  }
}

/* BONE MARROW DONATION */
.bone-marrow-donation__image,
.bone-marrow-donation__content {
  display: flex;
  flex-wrap: wrap;
  max-width: 650px;
}

.bone-marrow-donation__image {
  padding: 25px 25px 25px 40px;
}

.bone-marrow-donation__content {
  padding: 25px 40px 25px 25px;
}

.bone-marrow-donation__content {
  flex-direction: column;
}

.bone-marrow-donation__content .header h2 {
  justify-content: flex-start;
  color: #fff;
  line-height: 44px;
}

.bone-marrow-donation__content .content p {
  color: #d9d9d9;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.bone-marrow-donation__content .content {
  padding-bottom: 38px;
}

.bone-marrow-donation__image {
  justify-content: flex-end;
}

.bone-marrow-donation__image img {
  border-radius: 50%;
  width: 533px;
  height: 533px;
}

@media (max-width: 1100px) {
  #bone-marrow-donation .fp-flex {}

  .bone-marrow-donation__image {
    justify-content: center;
  }

  .bone-marrow-donation__image img {
    width: 434px;
    height: 434px;
  }
}

@media (max-width: 1000px) {
  .bone-marrow-donation__content .header h2 {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
  }

  .bone-marrow-donation__image img {
    width: 400px;
    height: 400px;
  }

  .bone-marrow-donation__button .oval-btn {
    min-width: 300px;
    padding: 6px 5px 6px;
  }
}

@media (max-width: 900px) {
  .bone-marrow-donation__content .content {
    padding-bottom: 13px;
  }

  .bone-marrow-donation__content .header h2 {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
  }

  .bone-marrow-donation__content .content p {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
  }

  .bone-marrow-donation__image img {
    width: 334px;
    height: 334px;
  }

  .bone-marrow-donation__button .oval-btn {
    min-width: 300px;
    padding: 6px 5px 6px;
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  #bone-marrow-donation {
    padding: 0 0 100px 0;
  }

  #bone-marrow-donation .fp-flex {
    flex-wrap: wrap;
  }

  .bone-marrow-donation__content .content {
    padding-bottom: 13px;
  }

  .bone-marrow-donation__content .header h2 {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
  }

  .bone-marrow-donation__content .content p {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
  }

  .bone-marrow-donation__image img {
    width: 334px;
    height: 334px;
  }

  .bone-marrow-donation__button {
    margin: auto;
  }
}

@media (max-width: 425px) {
  #bone-marrow-donation {
    padding: 0 0 60px 0;
  }

  .bone-marrow-donation__image img {
    width: 250px;
    height: 250px;
  }

  .bone-marrow-donation__image {
    padding: 0;
  }

  .bone-marrow-donation__button .oval-btn {
    min-width: 250px;
  }
}

/* HEALTH-STORE */
.health-store__image,
.health-store__content {
  display: flex;
  max-width: 650px;
}

.health-store__content {
  padding: 25px 25px 25px 40px;
}

.health-store-wrapper {
  display: flex;
  flex-direction: column;
  padding: 25px 40px 25px 25px;
}

.health-store__content {
  flex-direction: column;
}

.health-store__content .header {
  justify-content: flex-start;
  color: #fff;
}

.health-store__content a {
  color: var(--cst-blue);
  text-decoration-line: underline;
}

.health-store__content .content {
  color: #d9d9d9;
  font-size: 16px;
  font-weight: 400;
}

.health-store-wrapper .health-store__image {
  margin-bottom: 50px;
}

.health-store__image img {
  border-radius: 50%;
  width: 533px;
  height: 533px;
}

.health-store-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.health-store-buttons button {
  margin-bottom: 20px;
}

.health-store-buttons a {
  color: var(--cst-blue);
  align-items: center;
  text-align: center;
  text-decoration-line: underline;
}

@media (max-width: 1100px) {
  .health-store__image img {
    width: 434px;
    height: 434px;
  }
}

@media (max-width: 1000px) {
  .health-store__content .header h2 {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
  }

  .health-store__image img {
    width: 400px;
    height: 400px;
  }

  .health-store-buttons .oval-btn {
    min-width: 300px;
    padding: 6px 5px 6px;
  }
}

@media (max-width: 900px) {
  .health-store__content .content {
    padding-bottom: 13px;
  }

  .health-store__content .header h2 {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
  }

  .health-store__content .content p,
  .health-store__content .content li {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
  }

  .health-store__image img {
    width: 334px;
    height: 334px;
  }

  .health-store-buttons .oval-btn {
    min-width: 300px;
    padding: 6px 5px 6px;
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  #health-store {
    padding: 0 0 100px 0;
  }

  #health-store .fp-flex {
    flex-wrap: wrap;
  }

  .health-store__content .content {
    padding-bottom: 13px;
  }

  .health-store__content .header h2 {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
  }

  .health-store__content .content p,
  .health-store__content .content li {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
  }

  .health-store__image img {
    width: 334px;
    height: 334px;
  }

  .health-store__button {
    margin: auto;
  }
}

@media (max-width: 425px) {
  #health-store {
    padding: 0 0 60px 0;
  }

  .health-store__content,
  .health-store-wrapper {
    padding: 20px;
  }

  .health-store__image img {
    width: 250px;
    height: 250px;
  }

  .health-store-buttons .oval-btn {
    min-width: 250px;
  }
}

/* ADDRESSES */
#address {
  min-width: 300px;
}

#address .map {
  display: flex;
  justify-content: center;
}

#address .map .card__card-content {
  padding: 30px 20px;
}

#address .map {
  position: relative;
  margin: auto;
  width: 80%;
  height: 689px;
}

.map iframe {
  width: 100%;
  border-radius: 20px;
  height: auto;
}

.map .card {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: var(--main-bg-color);
  width: 440px;
  border-radius: 16px;
}

.map .card h3 {
  font-weight: 700;
  font-size: 24px;
  color: #fff;
}

.map .card p {
  font-weight: 400;
  font-size: 16px;
  color: #fff;
}

.card__card-content button {
  margin-top: 10px;
}

@media (max-width: 1440px) {
  #address .map {
    position: relative;
    margin: auto;
    width: 100%;
    height: 689px;
    padding: 0 40px 0 40px;
  }

  .map .card {
    top: 20px;
    right: 60px;
    background-color: var(--main-bg-color);
    width: 440px;
    height: 200px;
    border-radius: 16px;
  }

  .map .card__button button {
    padding: 0 30px 0;
  }
}

@media (max-width: 1024px) {
  .map .card {
    top: 20px;
    right: 60px;
    background-color: var(--main-bg-color);
    width: 280px;
    height: 220px;
    border-radius: 16px;
  }

  .map .card h3 {
    font-weight: 700;
    font-size: 16px;
  }

  .map .card p {
    font-weight: 400;
    font-size: 14px;
  }

  .map .card__button button {
    width: 100%;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .map .card {
    top: unset;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 250px;
  }
}

@media (max-width: 425px) {
  #address .map {
    padding: 0 20px 120px 20px;
  }
}

/* PARTNERS */
#partners {
  margin-top: 140px;
  position: relative;
}

.partners-content-wrapper {
  padding: 50px 0;
}

#partners .rounded-wrapper {
  width: 80%;
  margin: auto;
  border-radius: 20px !important;
}

.partners {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.partner {
  flex: 1;
  padding: 15px 35px;
}

.partner-logo {
  width: 100%;
  margin-bottom: 15px;
}

.partner-logo img {
  display: block;
  margin: auto;
  max-height: 160px;
}

.partner .partner-name h3 {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

.partner .partner-description p {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}

@media (max-width: 1440px) {
  #partners .fp-container {
    padding: 0 40px 0 40px;
  }

  #partners .rounded-wrapper {
    position: relative;
    margin: auto;
    width: 100%;
    padding: 0 40px 0 40px;
  }

  .partner {
    flex: 50%;
    padding: 15px 35px;
  }
}

@media (max-width: 1200px) {
  .partner-logo img {
    display: block;
    margin: auto;
    max-height: 120px;
  }
}

@media (max-width: 1000px) {
  #partners {
    margin-bottom: 100px;
  }

  #partners .rounded-wrapper {
    padding: 0 20px 0 20px;
  }

  .partner {
    padding: 15px 15px;
  }

  .partner-logo img {
    display: block;
    margin: auto;
    max-height: 120px;
  }
}

@media (max-width: 800px) {
  .partners {
    flex-direction: column;
  }

  .partner-logo img {
    max-width: 100%;
    height: auto;
  }

  .partner .partner-name h3 {
    font-size: 20px;
    font-weight: 700;
  }

  .partner .partner-description p {
    font-size: 14px;
    font-weight: 400;
  }
}

@media (max-width: 425px) {
  #partners .fp-container {
    padding: 0 20px 0px 20px;
  }
}

/* TEAM PAGE */
/* TEAM IMAGE */
#team-image {
  padding-top: 40px;
}

.team-container {
  position: relative;
}

.team-image__image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.team-image__image img {
  width: 100%;
}

.team-image__header {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  padding: 104px 0;
}

.team-image__header h1 {
  position: relative;
  font-size: 80px;
  font-weight: 300;
  color: #fff;
  line-height: 97px;
  z-index: 1;
}

.team-image__parallax-ellipse {
  position: absolute;
  width: 885px;
  height: 304px;
  background: var(--cst-red);
  opacity: 0.6;
  filter: blur(75px);
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 0;
}

@media (max-width: 1440px) {
  .team-image__header {
    padding: 80px 0;
  }

  .team-image__header h1 {
    font-size: 80px;
    line-height: 97px;
  }
}

@media (max-width: 1200px) {
  .team-image__header {
    padding: 70px 0;
  }

  .team-image__header h1 {
    font-size: 60px;
    line-height: 80px;
  }

  .team-image__parallax-ellipse {
    width: 450px;
    height: 120px;
  }
}

@media (max-width: 1024px) {
  .team-image__header {
    padding: 60px 0;
  }

  .team-image__header h1 {
    font-size: 50px;
    line-height: 70px;
  }
}

@media (max-width: 768px) {
  .team-image__header {
    padding: 40px 0;
  }

  .team-image__header h1 {
    font-size: 40px;
    line-height: 48px;
  }
}

@media (max-width: 568px) {
  .team-image__header {
    padding: 30px 0;
  }

  .team-image__header h1 {
    font-size: 35px;
    line-height: 48px;
  }

  .team-image__parallax-ellipse {
    width: 300px;
    height: 80px;
  }
}

@media (max-width: 425px) {
  .team-container {
    padding-bottom: 0px;
  }

  .team-image__header {
    position: relative;
    margin-bottom: 0px;
    padding: 30px 20px;
  }

  .team-image__header h1 {
    font-size: 35px;
    line-height: 48px;
  }

  .team-image__parallax-ellipse {
    width: 280px;
    height: 150px;
    background: var(--cst-blue);
  }
}

/* JUST ASK */
#just-ask {
  padding-top: 53px;
  padding-bottom: 94px;
  position: relative;
}

.just-ask-container {
  position: relative;
  padding: 10px 0;
}

.just-ask__title {
  padding-bottom: 30px;
}

.just-ask__title h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #ffffff;
}

.just-ask__description {
  padding-bottom: 53px;
}

.just-ask__description p {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  color: #ffffff;
}

.just-ask__button {
  display: flex;
  justify-content: center;
}

.just-ask__button a {
  text-align: center;
  text-decoration: none;
}

.just-ask__parallax-ellipse {
  position: absolute;
  width: 500px;
  height: 200px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: var(--cst-red);
  opacity: 0.3;
  filter: blur(100px);
  top: 0;
  right: 0;
  z-index: 0;
}

@media (max-width: 1440px) {
  .just-ask-container {
    margin: auto;
    max-width: 700px;
  }

  .just-ask__title h2 {
    font-size: 34px;
    line-height: 44px;
  }

  .just-ask__description p {
    font-size: 23px;
    line-height: 32px;
  }
}

@media (max-width: 1024px) {
  #just-ask {
    padding-bottom: 60px;
  }

  .just-ask-container {
    margin: auto;
    max-width: 700px;
  }

  .just-ask__title h2 {
    font-size: 30px;
    line-height: 44px;
  }

  .just-ask__description {
    padding-bottom: 45px;
  }

  .just-ask__description p {
    font-size: 20px;
    line-height: 32px;
  }
}

@media (max-width: 768px) {
  #just-ask {
    padding: 53px 20px 44px 20px;
  }

  .just-ask-container {
    max-width: 450px;
  }

  .just-ask__title {
    padding-bottom: 16px;
  }

  .just-ask__title h2 {
    font-size: 20px;
    line-height: 24px;
  }

  .just-ask__description {
    padding-bottom: 32px;
  }

  .just-ask__description p {
    font-size: 14px;
    line-height: 18px;
  }

  .just-ask__button a {
    min-width: 334px;
    padding: 11px 20px;
  }

  .just-ask__parallax-ellipse {
    width: 400px;
  }
}

@media (max-width: 425px) {
  #just-ask {
    padding: 0px 20px 60px 20px;
  }

  .just-ask__button a {
    min-width: 280px;
    padding: 6px 20px;
    font-size: 18px;
  }

  .just-ask__parallax-ellipse {
    width: 300px;
  }
}

/* TEAM LIST */
#team-list {
  position: relative;
  padding-bottom: 123px;
  max-width: 1440px;
  margin: auto;
  padding: 20px;
}

.team-list__parallax-ellipse {
  position: absolute;
  width: 600px;
  height: 600px;
  background: var(--cst-blue);
  opacity: 0.1;
  filter: blur(100px);
  top: 0;
  left: 0;
  z-index: -1;
}

.team-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
}

.team-member {
  display: flex;
  flex: 31%;
  gap: 30px;
}

.team-member__photo img {
  width: 208px;
  height: 208px;
  border-radius: 50%;
  /* обрезаем изображение так, чтобы оно было круглым */
  overflow: hidden;
}

.team-member__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team-member__info__fullname {
  margin-bottom: 23px;
}

.team-member__info__fullname h3 {
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  color: #ffffff;
  margin-bottom: 0;
}

.team-member__info__position {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 11px;
}

.team-member__info__position span {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #d9d9d9;
}

@media (max-width: 1440px) {
  .team-member {
    flex: 45%;
  }
}

@media (max-width: 1024px) {

  .team-member__photo img {
    width: 150px;
    height: 150px;
  }

  .team-member__info__fullname {
    margin-bottom: 8px;
  }

  .team-member__info__fullname h3 {
    font-size: 20px;
    line-height: 29px;
  }

  .team-member__info__position span {
    font-size: 14px;
    line-height: 19px;
  }
}

@media (max-width: 768px) {
  #team-list {
    padding-bottom: 80px;
  }

  .team-list__parallax-ellipse {
    width: 500px;
    height: 400px;
  }

  .team-list {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .team-list__parallax-ellipse {
    width: 400px;
    height: 300px;
  }

  .team-member {
    flex: 100%;
  }

  .team-member__info__fullname {
    margin-bottom: 0px;
  }

  .team-member__info__fullname h3 {
    font-size: 16px;
    line-height: 19px;
  }

  .team-member__info__position span {
    font-size: 14px;
    line-height: 18px;
  }

  .team-member__info__modal img {
    width: 9px;
    height: 14px;
  }
}

@media (max-width: 425px) {
  .team-list__parallax-ellipse {
    width: 300px;
    height: 300px;
    top: 120px;
  }

  .team-member {
    gap: 10px
  }

  .team-member__info__fullname h3 {
    font-size: 16px;
    line-height: 17px;
  }

  .team-member__info__position span {
    font-size: 14px;
    line-height: 17px;
  }

  .team-member__info__modal img {
    width: 9px;
    height: 14px;
  }
}

/* MEDICAL SPECIALISTS PAGE */
#medical-specialists {
  position: relative;
  max-width: 1440px;
  margin: auto;
  padding: 0 20px;

}

#medical-specialists .medical-specialists-filter {
  margin-bottom: 30px;
}

#medical-specialists .medical-specialists-filter .select2-container {
  display: block;
}

/* MEDICAL SPECIALISTS PAGE END*/

/* MEDICAL SPECIALIST PAGE */
#medical-specialist {
  padding: 100px 40px 0 40px;
  position: relative;
  max-width: 1920px;
  margin: auto;
}

.medical-specialist {
  display: flex;
  flex-direction: column;
  gap: 30px
}

.medical-specialist__wrapper {
  display: flex;
  flex-direction: column;
  background-image: url("/static/img/black_mramor_big.png");
  background-size: cover;
  border-radius: 20px;
}

.medical-specialist__info {
  display: flex;
}

.medical-specialist__info__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex: 55%;
}

.medical-specialist__info__image {
  flex: 45%;
  display: flex;
  justify-content: center;
  position: relative;
}

.medical-specialist__info__image img {
  max-width: 550px;
  padding: 10px;
  border-radius: 20px;
}

.medical-specialist__info__image .video-link {
  position: absolute;
  bottom: 25px;
}

.medical-specialist__info__image .video-link .oval-btn {
  min-width: 239px;
  font-size: 20px;
  font-weight: 700;
  padding: 0;
}

.medical-specialist__info__fullname {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
}

.medical-specialist__info__specialties {
  color: #D9D9D9;
  font-size: 25px;
  font-weight: 500;
}

.medical-specialist__info__experience {
  color: #fff;
  font-size: 22px;
  font-weight: 500;
}

.medical-specialist__info__qualification {
  color: #D9D9D9;
  font-size: 22px;
  font-weight: 500;
}

.medical-specialist__info__places {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.medical-specialist__info__places__header {
  color: #D9D9D9;
  font-size: 20px;
  font-weight: 500;
}

.medical-specialist__info__places__place {
  display: flex;
  align-self: baseline;
  gap: 8px;
  font-size: 20px;
  color: #fff;
}

.medical-specialist__info__appointment-btn {
  display: flex;
  gap: 65px;
  margin-top: 50px;
}

.medical-specialist__info__appointment-btn a {
  min-width: 301px;
  font-size: 22px;
  padding: 10px 45px;
  text-decoration: none;
}

.medical-specialist__description {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  padding: 0 48px;
}

.medical-specialist__description h1 {
  color: var(--cst-blue);
  font-size: 40px;
  font-weight: 800;
}

.medical-specialist__medical-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  padding: 0 34px;
}

.medical-tag {
  color: #fff;
  font-size: 20px;
  border-radius: 20px;
  border: 1px solid #fff;
  padding: 5px 10px;
}

.medical-specialist__services,
.medical-specialist__subscriptions {
  padding-top: 40px;
}

.medical-specialist__services .header,
.medical-specialist__subscriptions .header {
  color: #fff;
  font-size: 24px;
  text-align: center;
}

.medical-specialist__services__specialties {
  max-width: 1224px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0;
  margin: auto;
}

@media (max-width: 1440px) {
  .medical-specialist__info__image img {
    max-width: 400px;
  }

  .medical-specialist__info__wrapper {
    padding: 20px;
  }

  .medical-specialist__info__fullname {
    font-size: 24px;
  }

  .medical-specialist__info__specialties {
    font-size: 20px;
  }

  .medical-specialist__info__experience,
  .medical-specialist__info__qualification,
  .medical-specialist__info__places__header,
  .medical-specialist__info__places__place {
    font-size: 18px;
  }

  .medical-specialist__info__appointment-btn {
    margin-top: 30px;
  }

  .medical-specialist__info__appointment-btn a {
    min-width: 200px;
    font-size: 18px;
    padding: 8px 35px;
  }

  .medical-specialist__description {
    padding: 0 30px;
  }

  .medical-specialist__description h1 {
    font-size: 28px;
  }

  .medical-specialist__medical-tags {
    padding: 0 24px;
  }

  .medical-tag {
    color: #fff;
    font-size: 18px;
  }

  .medical-specialist__services__specialties {
    max-width: 1130px;
    padding: 20px 40px;
  }
}


@media (max-width: 1024px) {
  .medical-specialist__info {
    flex-direction: column;
    gap: 30px;
  }

  .medical-specialist__info__image img {
    max-width: 300px;
  }

  .medical-specialist__info__image .video-link {
    bottom: 15px;
  }

  .medical-specialist__info__image .video-link .oval-btn {
    min-width: 200px;
    font-size: 14px;
    font-weight: 700;
    padding: 0;
  }

  .medical-specialist__info__fullname {
    font-size: 24px;
  }

  .medical-specialist__info__specialties {
    font-size: 16px;
  }

  .medical-specialist__description {
    padding: 0 24px;
  }

  .medical-specialist__medical-tags {
    padding: 0 10px;
    gap: 20px;
  }

  .medical-tag {
    font-size: 16px;
  }

  .medical-specialist__services {
    padding-top: 30px;
  }

  .medical-specialist__services__specialties {
    gap: 15px;
  }

}

@media (max-width: 768px) {
  #medical-specialist {
    padding: 100px 20px 0 20px;
  }

  .medical-specialist__info {
    flex-direction: column;
    gap: 20px;
  }

  .medical-specialist__info__wrapper {
    padding-top: 0;
  }

  .medical-specialist__info__image {
    align-self: center;
  }

  .medical-specialist__info__appointment-btn {
    display: flex;
    align-self: center;
    margin-top: 20px;
    gap: 20px;
  }

  .medical-specialist__description {
    font-size: 15px;
    padding: 0 5px;
  }

  .medical-specialist__info__appointment-btn a {
    font-size: 16px;
    padding: 8px 10px;
    min-width: 165px;
  }

  .medical-specialist__medical-tags {
    padding: 0px;
    gap: 15px;
  }

  .medical-tag {
    font-size: 14px;
  }

  .medical-specialist__services__specialties {
    padding: 20px;
  }

  .medical-specialist__services__specialty button {
    font-size: 14px;
    padding: 5px 15px 5px;
  }
}

@media (max-width: 425px) {
  #medical-specialist {
    padding: 50px 10px 0 10px;
  }

  #medical-specialists {
    padding: 0 10px;
  }

  .medical-specialist__info__image img {
    max-width: 100%;
  }

  .medical-specialist__info__fullname {
    font-size: 16px;
  }

  .medical-specialist__info__specialties {
    font-size: 14px;
  }

  .medical-specialist__info__experience,
  .medical-specialist__info__qualification,
  .medical-specialist__info__places__header,
  .medical-specialist__info__places__place {
    font-size: 14px;
  }


  .medical-specialist__info__appointment-btn a {
    min-width: 150px;
    font-size: 14px;
    padding: 8px 10px;
  }

  .medical-specialist__description {
    font-size: 14px;
  }

  .medical-specialist__description h1 {
    font-size: 20px;
  }

  .medical-specialist__medical-tags {
    gap: 6px;
  }

  .medical-tag {
    font-size: 12px;
  }
}

/* MEDICAL SPECIALIST PAGE END */

/* ABOUT PROJECT */
.about-project {
  max-width: 991px;
  margin: auto;
  padding: 0 40px;
}

.about-project h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #ffffff;
  padding-bottom: 20px;
}

.about-project p,
.about-project li {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
}

.about-project h3 {
  padding-top: 10px;
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  color: #fff;
}

@media (max-width: 1440px) {
  .about-project {
    max-width: 750px;
  }
}

@media (max-width: 768px) {
  .about-project {
    max-width: 512px;
    padding: 0 30px;
  }

  .about-project h2 {
    font-size: 20px;
    line-height: 24px;
  }

  .about-project p,
  .about-project li {
    font-size: 14px;
    line-height: 18px;
  }

  .about-project h3 {
    padding-top: 7px;
    font-size: 16px;
    line-height: 19px;
    color: #fff;
  }
}

@media (max-width: 425px) {
  .about-project {
    padding: 0 20px;
    margin: 0;
  }

  .about-project ul {
    padding: 0 10px;
  }
}

/* ABOUT US PAGE */
#about-us-image {
  padding-top: 40px;
  padding-bottom: 40px;
}

.about-us-container {
  position: relative;
}

.about-us-image__image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.about-us-image__image img {
  width: 100%;
  max-height: 1200px;
}

.about-us-image__header {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  padding: 104px 0;
}

.about-us-image__header h1 {
  position: relative;
  font-size: 80px;
  font-weight: 300;
  color: #fff;
  line-height: 97px;
  z-index: 1;
}

.about-us-image__parallax-ellipse {
  position: absolute;
  width: 885px;
  height: 304px;
  background: var(--cst-red);
  opacity: 0.6;
  filter: blur(75px);
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 0;
}

@media (max-width: 1440px) {
  .about-us-image__header {
    padding: 80px 0;
  }

  .about-us-image__header h1 {
    font-size: 80px;
    line-height: 97px;
  }
}

@media (max-width: 1200px) {
  .about-us-image__header {
    padding: 70px 0;
  }

  .about-us-image__header h1 {
    font-size: 60px;
    line-height: 80px;
  }

  .about-us-image__parallax-ellipse {
    width: 450px;
    height: 120px;
  }
}

@media (max-width: 1024px) {
  .about-us-image__header {
    padding: 60px 0;
  }

  .about-us-image__header h1 {
    font-size: 50px;
    line-height: 70px;
  }
}

@media (max-width: 768px) {
  .about-us-image__header {
    padding: 40px 0;
  }

  .about-us-image__header h1 {
    font-size: 40px;
    line-height: 48px;
  }
}

@media (max-width: 568px) {
  .about-us-image__header {
    padding: 30px 0;
  }

  .about-us-image__header h1 {
    font-size: 35px;
    line-height: 48px;
  }

  .about-us-image__parallax-ellipse {
    width: 300px;
    height: 80px;
  }
}

@media (max-width: 425px) {
  .about-us-container {
    padding-bottom: 0px;
  }

  .about-us-image__header {
    position: relative;
    margin-bottom: 0px;
    padding: 30px 20px;
  }

  .about-us-image__header h1 {
    font-size: 35px;
    line-height: 48px;
  }

  .about-us-image__parallax-ellipse {
    width: 280px;
    height: 150px;
    background: var(--cst-blue);
  }
}

/* REVIEWS PAGE */
#reviews {
  margin-bottom: 80px;
}

.reviews-content-wrapper {
  height: 100%;
  width: 70%;
  max-width: 100rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-top: 70px;
}

.medical-service-wrapper .reviews-content-wrapper {
  margin-top: 0;
}

.reviews-content-wrapper .header {
  color: #fff;
  font-size: 36px;
}

.reviews-content-wrapper .send-review {
  padding-bottom: 15px;
}

.blue-line {
  height: 0.3rem;
  width: 6rem;
  background-color: rgb(79, 143, 226);
  margin-bottom: 30px;
}

.wrapper-for-arrows {
  position: relative;
  width: 70%;
  border-radius: 2rem;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.review-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: calc(2rem + 1vmin);
  width: 100%;
}

#imgDiv {
  border-radius: 50%;
  width: calc(6rem + 4vmin);
  height: calc(6rem + 4vmin);
  position: relative;
  box-shadow: 5px -3px #008dd2;
  background-size: cover;
  margin-bottom: calc(0.7rem + 0.5vmin);
}

#imgDiv::after {
  content: "''";
  font-size: calc(2rem + 2vmin);
  font-family: sans-serif;
  line-height: 150%;
  color: #fff;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: #008dd2;
  position: absolute;
  top: 10%;
  left: -10%;
  width: calc(2rem + 2vmin);
  height: calc(2rem + 2vmin);
}

#personName {
  margin-bottom: calc(0.7rem + 0.5vmin);
  font-size: calc(1rem + 0.5vmin);
  letter-spacing: calc(0.1rem + 0.1vmin);
  font-weight: bold;
  color: #fff;
}

#profession {
  font-size: calc(0.8rem + 0.3vmin);
  margin-bottom: calc(0.7rem + 0.5vmin);
  color: rgb(79, 143, 226);
}

#description {
  font-size: calc(0.8rem + 0.3vmin);
  width: 70%;
  max-width: 40rem;
  text-align: center;
  margin-bottom: calc(1.4rem + 1vmin);
  color: #fff;
  line-height: 2rem;
}

.arrow-wrap {
  position: absolute;
  top: 50%;
}

.arrow {
  width: calc(1.4rem + 0.6vmin);
  height: calc(1.4rem + 0.6vmin);
  border: solid #008dd2;
  border-width: 0 calc(0.5rem + 0.2vmin) calc(0.5rem + 0.2vmin) 0;
  cursor: pointer;
  transition: transform 0.3s;
}

.arrow:hover {
  transition: 0.3s;
  transform: scale(1.15);
}

.left-arrow-wrap {
  left: 5%;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.right-arrow-wrap {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  right: 5%;
}

.surprise-me-btn {
  border: 2px solid rgb(79, 143, 226);
  background-color: rgb(224, 238, 255);
  color: rgb(79, 143, 226);
  border-radius: 2rem;
  padding: calc(0.5rem + 0.2vmin) 0;
  width: calc(7rem + 5vmin);
  text-align: center;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  margin-bottom: calc(1.4rem + 1vmin);
}

.surprise-me-btn:hover {
  transition: background-color 0.3s, transform 0.3s;
  background-color: rgb(255, 255, 255);
  transform: rotate(5deg);
}

.move-head {
  animation: moveHead 1.55s infinite;
  animation-delay: -0.8s;
}


@keyframes moveHead {
  0% {}

  25% {
    transform: translate(0.5rem, 1rem) rotate(5deg);
  }

  100% {
    transform: translate(0, 0) rotate(-5deg);
  }
}

@media (max-width: 1200px) {
  .reviews-content-wrapper {
    width: 80%;
  }

  .wrapper-for-arrows {
    width: 90%;
  }
}


@media (max-width: 1024px) {
  #reviews {
    margin-bottom: 70px;
  }

  .reviews-content-wrapper .header {
    font-size: 24px;
  }
}


@media (max-width: 768px) {
  #reviews {
    margin-bottom: 50px;
  }

  .reviews-content-wrapper {
    width: 90%;
  }
}


@media (max-width: 425px) {
  .reviews-content-wrapper {
    width: 100%;
    padding: 0 10px;
  }

  .wrapper-for-arrows {
    width: 100%;
  }

  #description {
    line-height: 1.8rem;
  }

}

/* SERVICES PAGE */
/* SERVICES HEADER */
#services-header {
  padding: 160px 0 74px 0;
}

#services-header h1 {
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #ffffff;
}

@media (max-width: 1024px) {
  #services-header h1 {
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
  }
}

@media (max-width: 768px) {
  #services-header {
    padding: 160px 0 48px 0;
  }

  #services-header h1 {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
  }
}

/* SERVICES SEARCH */
#services-search {
  padding-bottom: 117px;
}

.services-search-wrapper {
  position: relative;
  margin: auto;
  max-width: 951px;
  max-height: 127px;
  background: var(--main-bg-color);
  border-radius: 20px;
}

.services-search__parallax-ellipse {
  position: absolute;
  width: 943px;
  height: 137px;
  background: var(--cst-red);
  opacity: 0.8;
  filter: blur(100px);
  top: 0;
  left: 0;
  z-index: -1;
}

.services-search {
  display: flex;
  align-items: stretch;
  padding: 20px;
  height: 100%;
}

.services-search__input {
  position: relative;
  min-height: 100%;
  width: 100%;
  margin-right: 15px;
}

.services-search__input__clear {
  position: absolute;
  right: 0;
  top: 30px;
}

.services-search__input__clear .clear-btn {
  color: var(--milk);
  font-size: 35px;
  font-weight: bold;
}

.services-search__input__clear .clear-btn:hover,
.services-search__input__clear .clear-btn:focus {
  color: red;
  cursor: pointer;
}

.services-search__input input {
  min-height: 100%;
  min-width: 100%;
  padding: 35px 25px 0 25px;
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--cst-blue);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #bdbdbd;
  caret-color: white;
}

.services-search__input input::placeholder {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #bdbdbd;
}

.services-search__input input:focus {
  outline: transparent;
}

.services-search__button {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

.services-search__button button {
  min-width: 210px;
  max-height: 81px;
  font-weight: 400;
  font-size: 24px;
  line-height: 29px;
  padding: 25px 0px;
}

@media (max-width: 1440px) {
  .services-search-wrapper {
    max-width: 939px;
  }

  .services-search__parallax-ellipse {
    width: 939px;
  }
}

@media (max-width: 1024px) {
  .services-search-wrapper {
    max-width: 730px;
    height: 116px;
  }

  .services-search__parallax-ellipse {
    width: 730px;
    height: 116px;
  }

  .services-search__input input {
    font-weight: 400;
    font-size: 19px;
    line-height: 25px;
    color: #bdbdbd;
  }

  .services-search__input__clear {
    top: 28px;
  }

  .services-search__input input::placeholder {
    font-weight: 400;
    font-size: 19px;
    line-height: 25px;
    color: #bdbdbd;
  }

  .services-search__button button {
    padding: 15px 0px;
    min-width: 180px;
  }
}

@media (max-width: 768px) {
  .services-search-wrapper {
    max-width: 610px;
    height: 116px;
  }

  .services-search__parallax-ellipse {
    width: 610px;
    height: 116px;
  }

  .services-search__input input {
    font-weight: 400;
    font-size: 19px;
    line-height: 25px;
    color: #bdbdbd;
  }

  .services-search__input input::placeholder {
    font-weight: 400;
    font-size: 19px;
    line-height: 25px;
    color: #bdbdbd;
  }

  .services-search__button {
    align-self: flex-end;
  }

  .services-search__button button {
    padding: 15px 0px;
    min-width: 159px;
    max-height: 60px;
  }
}

@media (max-width: 640px) {
  .services-search {
    flex-direction: column;
  }

  .services-search-wrapper {
    max-width: 100%;
    max-height: unset;
    height: unset;
    margin: 0 20px;
  }

  .services-search__parallax-ellipse {
    max-width: 100%;
    height: 116px;
  }

  .services-search__input {
    margin-bottom: 27px;
  }

  .services-search__input__clear {
    top: 20px;
  }

  .services-search__input input {
    font-weight: 400;
    font-size: 19px;
    line-height: 25px;
    color: #bdbdbd;
  }

  .services-search__input input::placeholder {
    font-weight: 400;
    font-size: 19px;
    line-height: 25px;
    color: #bdbdbd;
  }

  .services-search__button {
    align-self: center;
    max-height: 40px;
  }

  .services-search__button button {
    padding: 15px 0px;
    min-width: 159px;
    font-size: 16px;
    line-height: 19px;
    padding: 10px;
  }
}

@media (max-width: 425px) {
  .services-search__input {
    margin-bottom: 27px;
  }

  .services-search__input input {
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #bdbdbd;
    padding: 25px 20px 5px 10px;
  }

  .services-search__input__clear {
    top: 10px;
  }

  .services-search__input__clear .clear-btn {
    font-size: 30px;
  }

  .services-search__input input::placeholder {
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #bdbdbd;
  }

  .services-search__button button {
    padding: 15px 0px;
    min-width: 159px;
    font-size: 16px;
    line-height: 19px;
    padding: 10px;
  }
}

/* MEDICAL SERVICES */
#medical-services,
#coworking-services {
  padding-bottom: 35px;
}

.medical-services {
  margin: auto;
  max-width: 1224px;
}

.medical-services__header {
  display: flex;
}

.medical-services__header h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  color: #fff;
  padding-right: 15px;
}

.medical-services__header img {
  width: 21px;
  height: 13px;
  margin-top: auto;
  margin-bottom: auto;
}

.medical-services__filter-btn {
  font-size: 18px;
  padding: 5px;
  min-width: 180px;
  text-decoration: none;
}

.medical-services__specialty {
  color: #fff;
  font-weight: 500;
  font-size: 32px;
  line-height: 39px;
  text-decoration: none;
  margin-top: 20px;
}

.medical-services .medical-service {
  display: flex;
  padding: 20px 10px 20px 10px;
  border-bottom: 1px solid rgba(244, 228, 252, 0.1);
}

.medical-services .medical-service:hover {
  background-color: #10212c;
}

.medical-services .medical-service__price_and_button {
  display: flex;
  flex-direction: row;
  min-width: 340px;
}

.medical-services .medical-service__name {
  width: 100%;
}

.medical-services .medical-service__name a {
  color: #fff;
}

.medical-services .medical-service__name span,
.medical-services .medical-service__price span {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #fff;
}

.medical-services .medical-service__price {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0 25px;
  margin: auto;
  flex: 0 0 190px;
}

.medical-services .medical-service__price i.fa-regular.fa-star {
  /* position: absolute; */
  top: 0;
  right: 30px;
  color: var(--cst-red);
}

.medical-services .medical-service__button {
  display: flex;
  flex: 0 0 150px;
  margin-top: auto;
  margin-bottom: auto;
}

.medical-services .medical-service__button button,
.medical-services .medical-service__button a {
  min-width: 145px;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  padding: 8px 20px;
}

@media (max-width: 1440px) {
  .medical-services {
    max-width: 1130px;
    padding: 0 40px;
  }
}

@media (max-width: 1024px) {
  .medical-services {
    max-width: 1130px;
  }

  .medical-services__header h2 {
    font-weight: 700;
    font-size: 28px;
    line-height: 30px;
    color: #fff;
  }

  .medical-services__specialty {
    color: #fff;
    font-weight: 500;
    font-size: 26px;
    line-height: 30px;
    text-decoration: none;
  }

  .medical-services .medical-service__price_and_button {
    min-width: 340px;
  }

  .medical-services .medical-service__name span,
  .medical-services .medical-service__price span {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (max-width: 768px) {
  .medical-services {
    padding: 0 20px;
  }

  .medical-services__header img {
    width: 14px;
    height: 9px;
  }

  .medical-services__header h2 {
    font-size: 20px;
    line-height: 24px;
  }

  .medical-services__filter-btn {
    font-size: 16px;
    padding: 5px;
    min-width: 157px;
    text-decoration: none;
  }

  .medical-services__specialty {
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    text-decoration: none;
  }

  .medical-services .medical-service__name span {
    font-size: 14px;
    line-height: 28px;
  }

  .medical-services .medical-service__price_and_button {
    justify-content: flex-end;
  }

  .medical-services .medical-service__price {
    flex: 0 0 120px;
    padding: 0 10px;
    margin: unset;
    margin-top: auto;
    margin-bottom: auto;
  }

  .medical-services .medical-service__price span {
    font-size: 18px;
    line-height: 32px;
  }

  .medical-services .medical-service__price i.fa-regular.fa-star {
    right: 15px;
  }

  .medical-services .medical-service__button {
    flex: 0 0 120px;
  }

  .medical-services .medical-service__button button,
  .medical-services .medical-service__button a {
    min-width: 118px;
  }
}

@media (max-width: 640px) {

  #medical-services,
  .medical-specialist__services__specialties {
    padding: 10px;
  }

  .medical-services {
    padding: 0;
  }

  .medical-services .medical-service {
    flex-direction: column;
  }

  .medical-services__header h2 {
    font-size: 20px;
    line-height: 24px;
  }

  .medical-services .medical-service__price_and_button {
    min-width: 300px;
    justify-content: space-between;
  }

  .medical-services .medical-service__price {
    flex: 0 0 100px;
    margin-top: auto;
    justify-content: flex-start;
    padding: 0;
  }

  .medical-services .medical-service__price i.fa-regular.fa-star {
    right: 45px;
  }

  .medical-services .medical-service__button button,
  .medical-services .medical-service__button a {
    min-width: 118px;
  }

  .medical-services .medical-service__button {
    flex: 0 0 100px;
  }

  .medical-services .medical-service__button button,
  .medical-services .medical-service__button a {
    padding: 8px 15px;
    min-width: 100px;
    font-size: 14px;
    line-height: 17px;
  }
}

@media (max-width: 425px) {
  .medical-services .medical-service__price_and_button {
    min-width: unset;
  }
}

/* MEDICAL SERVICE DETAIL */
.medical-service-wrapper {
  max-width: 1920px;
  margin: auto;
  margin-top: 100px;
}

.banner {
  padding: 0 40px;
}

.banner img {
  width: 100%;
}

#medical-service-info {
  margin-top: 30px;
  padding: 0 40px;
}

#medical-service-info .header {
  padding-bottom: 30px;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #ffffff;
}

.medical-service-info {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 63px;
  margin: auto;
  background-image: url("/static/img/black_mramor_big.png");
  background-size: cover;
  border-radius: 20px;
}

#medical-service-info .breadcrumbs {
  margin-bottom: 20px;
  padding: 0 5px;
}

#medical-service-info .breadcrumbs a {
  font-weight: 600;
  font-size: 20px;
}

.medical-service-info__image {
  flex: 60%;
  margin-top: auto;
  margin-bottom: auto;
}

.medical-service-info__image img {
  width: 100%;
}

.medical-service-info__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  min-width: 500px;
  flex: 40%;
  padding: 20px 0;
  gap: 20px;
}

.medical-service-info__description,
.medical-service-info__price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  padding: 0 43px;
}

.medical-service-info__description span {
  font-size: 24px; 
  font-weight: 700;
}

.medical-service-info__description h1 {
  font-weight: 900;
  font-size: 40px;
  line-height: 24px;
  color: var(--cst-blue);
  padding-bottom: 15px;
}

.medical-service-info__description ul {
  padding: 15px;
}

.medical-service-info__price {
  display: flex;
  justify-content: center;
  color: #fff;
  font-size: 44px;
}

.medical-service-info__add-to-basket-button {
  padding: 10px 43px 0 43px;
}

.medical-service-info__add-to-basket-button a {
  min-width: 301px;
  font-size: 22px;
  padding: 10px 45px;
  text-decoration: none;
}

.medical-service-info__add-to-basket-button button {
  min-width: 301px;
  font-size: 22px;
  padding: 7px 45px;
  text-decoration: none;
}

.medical-service-description {
  padding: 68px 54px 0 54px;
  color: #fff;
}

.medical-service-description h1 {
  color: var(--cst-blue);
  font-size: 40px;
  font-weight: 900;
}

.medical-cerivce-parallax-ellipse-1 {
  position: absolute;
  width: 527px;
  height: 200px;
  right: 0px;
  bottom: 150px;
  background: var(--cst-red);
  opacity: 0.2;
  filter: blur(100px);
}

.medical-cerivce-parallax-ellipse-2 {
  position: absolute;
  width: 527px;
  height: 200px;
  left: 0px;
  bottom: -50px;
  background: var(--cst-blue);
  opacity: 0.2;
  filter: blur(100px);
}

@media (max-width: 1440px) {
  .medical-cerivce-parallax-ellipse-1 {
    width: 527px;
    height: 200px;
    right: 100px;
    bottom: 150px;
  }

  .medical-cerivce-parallax-ellipse-2 {
    width: 527px;
    height: 200px;
    left: 100px;
    bottom: 150px;
  }

  .medical-service-info {
    gap: 20px;
  }

  .medical-service-info__text {
    min-width: 450px;
  }

  .medical-service-info__description,
  .medical-service-info__add-to-basket-button {
    padding: 0 23px;
  }

  .medical-service-info__description h1,
  .medical-service-description h1 {
    font-size: 28px;
  }

  .medical-service-info__description span {
    font-size: 20px; 
    font-weight: 700;
  }

  .medical-service-description {
    padding: 38px 40px 0 40px;
  }

  .medical-service-info__add-to-basket-button a {
    min-width: 275px;
    font-size: 18px;
    padding: 8px 35px;
  }
}

@media (max-width: 1024px) {
  .medical-cerivce-parallax-ellipse-1 {
    width: 400px;
    height: 200px;
    left: 100px;
    bottom: 300px;
  }

  .medical-cerivce-parallax-ellipse-2 {
    width: 400px;
    height: 200px;
    left: 100px;
    bottom: 150px;
  }

  #medical-service-info {
    margin-bottom: 20px;
  }

  #medical-service-info .header {
    font-size: 24px;
    line-height: 30px;
  }

  .medical-service-info {
    flex-direction: column;
  }

  .medical-service-info__text {
    min-width: 400px;
  }

  .medical-service-info {
    gap: 30px;
  }

  .medical-service-info__price {
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 30px;
  }

  .medical-service-info__add-to-basket-button button {
    min-width: 275px;
    font-size: 18px;
    padding: 10px;
  }

  .medical-service-info__add-to-basket-button a {
    min-width: 275;
    font-size: 18px;
    padding: 8px 35px;
  }

  .medical-service-info__add-to-basket-button button {
    min-width: 275px;
    font-size: 18px;
    padding: 5px 35px;
    text-decoration: none;
  }

  .medical-service-info__description h1,
  .medical-service-description h1 {
    font-size: 32px;
  }

  .medical-service-description {
    padding: 30px 24px 0 24px;
  }
}

@media (max-width: 768px) {
  .medical-cerivce-parallax-ellipse-1 {
    width: 300px;
    height: 200px;
    right: 0;
    left: unset;
    bottom: 200px;
  }

  .medical-cerivce-parallax-ellipse-2 {
    width: 300px;
    height: 200px;
    left: 100px;
    bottom: 150px;
  }

  .banner {
    padding: 0 20px;
  }

  #medical-service-info .breadcrumbs a {
    font-size: 16px;
  }

  #medical-service-info {
    margin-bottom: 10px;
    padding: 0 20px;
  }

  #medical-service-info .header {
    font-size: 20px;
    line-height: 26px;
  }

  .medical-service-info__text {
    min-width: 270px;
    font-size: 14px;
  }

  .medical-service-info {
    flex-direction: column;
    gap: 20px;
  }

  .medical-service-info__description h1,
  .medical-service-description h1 {
    font-size: 28px;
  }

  .medical-service-info__price {
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 30px;
  }

  .medical-service-description {
    padding: 30px 5px 0 5px;
  }
}

@media (max-width: 425px) {
  .medical-cerivce-parallax-ellipse-1 {
    width: 180px;
    height: 200px;
    left: 100px;
    bottom: 150px;
  }

  .medical-cerivce-parallax-ellipse-2 {
    width: 180px;
    height: 200px;
    left: 100px;
    bottom: 150px;
  }

  .banner {
    padding: 0 10px;
  }

  #medical-service-info .breadcrumbs a {
    font-size: 14px;
  }

  #medical-service-info {
    padding: 0 10px;
  }

  #medical-service-info .header {
    font-size: 20px;
    line-height: 26px;
  }

  .medical-service-info {
    padding: 0;
  }

  .medical-service-info__text {
    padding: 10px 0;
  }

  .medical-service-info__description,
  .medical-service-info__add-to-basket-button {
    padding: 0 13px;
  }

  .medical-service-info__add-to-basket-button {
    margin: auto;
  }

  .medical-service-info__description h1,
  .medical-service-description h1 {
    font-size: 24px;
  }

  .medical-service-description p,
  .medical-service-description li {
    font-size: 14px;
  }

  .medical-service-info__price {
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    text-align: center;
  }

  .medical-service-info__add-to-basket-button button {
    min-width: 250px;
    font-size: 18px;
    padding: 5px 25px;
  }
}

/* DISCOUNTED MEDICAL SERVICES */
/* PARALLAX */
.top-parallax-1 {
  z-index: 0;
  position: absolute;
  background: var(--cst-red);
  opacity: 0.3;
  filter: blur(100px);
  width: 410px;
  height: 310px;
  left: -50px;
  top: 0px;
}

.top-parallax-2 {
  z-index: 0;
  position: absolute;
  background: var(--cst-blue);
  opacity: 0.3;
  filter: blur(100px);
  width: 310px;
  height: 210px;
  left: -100px;
  top: 150px;
}

.top-parallax-3 {
  z-index: 0;
  position: absolute;
  background: var(--cst-red);
  opacity: 0.3;
  filter: blur(100px);
  width: 410px;
  height: 310px;
  right: 100px;
  top: 500px;
}

.top-parallax-4 {
  z-index: 0;
  position: absolute;
  background: var(--cst-blue);
  opacity: 0.3;
  filter: blur(100px);
  width: 310px;
  height: 210px;
  right: 100px;
  top: 750px;
}

@media (max-width: 1024px) {
  .top-parallax-1 {
    width: 310px;
    height: 250px;
    left: -300px;
    top: 0px;
  }

  .top-parallax-2 {
    width: 310px;
    height: 210px;
    left: -200px;
    top: 150px;
  }

  .top-parallax-3 {
    width: 250px;
    height: 250px;
    right: 0px;
    top: 500px;
  }

  .top-parallax-4 {
    width: 250px;
    height: 210px;
    right: 0px;
    top: 750px;
  }
}

@media (max-width: 768px) {
  .top-parallax-1 {
    width: 210px;
    height: 200px;
    left: -100px;
    top: 0px;
  }

  .top-parallax-2 {
    width: 210px;
    height: 200px;
    left: -100px;
    top: 150px;
  }

  .top-parallax-3 {
    width: 210px;
    height: 200px;
    right: 0px;
    top: 500px;
  }

  .top-parallax-4 {
    width: 210px;
    height: 210px;
    right: 0px;
    top: 750px;
  }
}

/* PARALLAX END */
#discounted-services {
  padding-top: 70px;
  padding-bottom: 40px;
}


.discounted-services-wrapper {
  margin: auto;
  max-width: 1140px;
  padding: 0 20px;
}

.discounted-services {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.discounted-service {
  display: flex;
  flex-direction: column;
  flex-basis: calc(33% - 12px);
  /* background-color: var(--blue-bg-color); */
}

.discounted-service__image img {
  width: 100%;
}

.discounted-service__content {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  height: 100%;
  padding: 20px 0;
  gap: 15px;
}

.discounted-service__content .title a {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
}

.discounted-service__content .price {
  color: var(--cst-red);
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
}

.discounted-service__content .description {
  color: #B0B0B0;
  font-size: 16px;
}

.discounted-service__content .description p {
  margin: 0;
}

.discounted-service__content .button a {
  background-color: transparent;
  color: #fff;
  padding: 10px 30px;
  border-radius: 0;
  transition: all 0.3s ease-in 0s;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
}

.discounted-service__content .button a:focus {
  color: #ddd;
  box-shadow: none;
}

.discounted-service__content .button a {
  border: 1px solid #4e595f;
}

.discounted-service__content .button a:hover,
.discounted-service__content .button a:focus {
  background-color: #02293d;
  color: #fff;
}

@media (max-width: 1440px) {
  .discounted-service__content .title a {
    font-size: 20px;
  }

  .discounted-service__content .description {
    font-size: 16px;
  }

}

@media (max-width: 1024px) {
  .discounted-service {
    flex-basis: calc(50% - 20px);
  }

  .discounted-services-wrapper {
    max-width: 720px;
  }
}

@media (max-width: 768px) {
  .discounted-service {
    flex-basis: 100%;
  }

  .discounted-services-wrapper {
    max-width: 510px;
  }

}

@media (max-width: 425px) {
  .discounted-services-wrapper {
    padding: 0 10px;
  }

  .discounted-service__content .title a {
    font-size: 16px;
  }

  .discounted-service__content .price {
    font-size: 16px;
  }

  .discounted-service__content .description {
    font-size: 14px;
  }

}

/* DISCOUNTED MEDICAL SERVICES END */

/* COWORKING SERVICES */
#coworking-services {
  padding-bottom: 35px;
}

.coworking-services {
  margin: auto;
  max-width: 1224px;
}

.coworking-services__header {
  display: flex;
}

.coworking-services__header h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  color: #fff;
  padding-right: 15px;
}

.coworking-services__header img {
  width: 21px;
  height: 13px;
  margin-top: auto;
  margin-bottom: auto;
}

.coworking-services .coworking-service {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid rgba(244, 228, 252, 0.1);
}

.coworking-services .coworking-service:hover {
  background-color: #10212c;
}

.coworking-services .coworking-service__price_and_button {
  display: flex;
  flex-direction: row;
  min-width: 320px;
}

.coworking-services .coworking-service__name {
  width: 100%;
}

.coworking-services .coworking-service__name a {
  color: #fff;
}

.coworking-services .coworking-service__name span,
.coworking-services .coworking-service__price span {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #fff;
}

.coworking-services .coworking-service__price {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0 25px;
  margin: auto;
  flex: 0 0 170px;
}

.coworking-services .coworking-service__price i.fa-regular.fa-star {
  /* position: absolute; */
  top: 0;
  right: 30px;
  color: var(--cst-red);
}

.coworking-services .coworking-service__button {
  display: flex;
  flex: 0 0 150px;
  margin-top: auto;
  margin-bottom: auto;
}

.coworking-services .coworking-service__button button {
  min-width: 145px;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  padding: 8px 20px;
}

@media (max-width: 1440px) {
  .coworking-services {
    max-width: 1130px;
    padding: 0 40px;
  }
}

@media (max-width: 1024px) {
  .coworking-services {
    max-width: 1130px;
  }

  .coworking-services__header h2 {
    font-weight: 700;
    font-size: 28px;
    line-height: 30px;
    color: #fff;
  }

  .coworking-services .coworking-service__price_and_button {
    min-width: 320px;
  }

  .coworking-services .coworking-service__name span,
  .coworking-services .coworking-service__price span {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (max-width: 768px) {
  .coworking-services__header img {
    width: 14px;
    height: 9px;
  }

  .coworking-services__header h2 {
    font-size: 20px;
    line-height: 24px;
  }

  .coworking-services .coworking-service__name span {
    font-size: 14px;
    line-height: 28px;
  }

  .coworking-services .coworking-service__price_and_button {
    justify-content: flex-end;
  }

  .coworking-services .coworking-service__price {
    flex: 0 0 120px;
    padding: 0 10px;
    margin: unset;
  }

  .coworking-services .coworking-service__price span {
    font-size: 18px;
    line-height: 32px;
  }

  .coworking-services .coworking-service__price i.fa-regular.fa-star {
    right: 15px;
  }

  .coworking-services .coworking-service__button {
    flex: 0 0 120px;
  }

  .coworking-services .coworking-service__button button {
    min-width: 118px;
  }
}

@media (max-width: 640px) {
  .coworking-services {
    padding: 0 20px;
  }

  .coworking-services .coworking-service {
    flex-direction: column;
  }

  .coworking-services__header h2 {
    font-size: 20px;
    line-height: 24px;
  }

  .coworking-services .coworking-service__price_and_button {
    min-width: 300px;
    justify-content: space-between;
  }

  .coworking-services .coworking-service__price {
    flex: 0 0 100px;
    margin-top: auto;
    justify-content: flex-start;
    padding: 0;
  }

  .coworking-services .coworking-service__price i.fa-regular.fa-star {
    right: 45px;
  }

  .coworking-services .coworking-service__button button {
    min-width: 118px;
  }

  .coworking-services .coworking-service__button {
    flex: 0 0 100px;
  }

  .coworking-services .coworking-service__button button {
    padding: 8px 15px;
    min-width: 100px;
    font-size: 14px;
    line-height: 17px;
  }
}

@media (max-width: 425px) {
  .coworking-services .coworking-service__price_and_button {
    min-width: unset;
  }
}


/* ASSAYS */
#assays {
  padding-bottom: 35px;
  position: relative;
}

.assays {
  margin: auto;
  max-width: 1224px;
}

.assays__parallax-ellipse {
  position: absolute;
  width: 500px;
  height: 500px;
  left: 0;
  top: -100px;
  background: var(--cst-blue);
  opacity: 0.1;
  filter: blur(100px);
  z-index: -1;
}

.assays__header {
  display: flex;
}

.assays__header h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  color: #fff;
  padding-right: 15px;
}

.assays__header img,
.assays_category__header__icon {
  width: 21px;
  height: 13px;
  margin-top: auto;
  margin-bottom: auto;
}

li.assay-category {
  list-style-type: none;
  margin: 15px 0;
}

ul.category_assays {
  padding-inline-start: 0;
}

.assay-category a {
  color: #fff;
  font-weight: 500;
  font-size: 32px;
  line-height: 39px;
  text-decoration: none;
}

.assay {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid rgba(244, 228, 252, 0.1);
}

.assay:hover {
  background-color: #10212c;
}

.assay__price_and_button {
  display: flex;
  flex-direction: row;
  min-width: 320px;
}

.assay .assay__name {
  width: 100%;
}

.assay .assay__name span,
.assay__price span {
  position: relative;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #fff;
}

.assay__price {
  display: flex;
  justify-content: center;
  padding: 0 25px;
  margin: auto;
  flex: 0 0 170px;
}

.assay__price span {
  padding-right: 20px;
}

.assay__price i.fa-regular.fa-star {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--cst-red);
  font-size: 16px;
}

.assay__button {
  display: flex;
  flex: 0 0 150px;
  margin-top: auto;
  margin-bottom: auto;
}

.assay__button button {
  min-width: 145px;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  padding: 8px 20px;
}

@media (max-width: 1440px) {
  .assays {
    max-width: 1130px;
    padding: 0 40px;
  }
}

@media (max-width: 1024px) {
  .assays__parallax-ellipse {
    width: 400px;
    height: 400px;
  }

  .assays {
    max-width: 1130px;
  }

  li.assay-category {
    margin: 12px 0;
  }

  ul.assays__list,
  ul.children {
    padding-inline-start: 20px;
  }

  .assay-category a {
    color: #fff;
    font-weight: 500;
    font-size: 26px;
    line-height: 30px;
    text-decoration: none;
  }

  .assays__header h2 {
    font-weight: 700;
    font-size: 28px;
    line-height: 30px;
    color: #fff;
  }

  .assay__price_and_button {
    min-width: 320px;
  }

  .assay .assay__name span,
  .assay__price span {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (max-width: 768px) {
  .assays__parallax-ellipse {
    width: 300px;
    height: 300px;
  }

  .assays__header h2 {
    font-size: 20px;
    line-height: 24px;
  }

  .assays__header img,
  .assays_category__header__icon {
    width: 14px;
    height: 9px;
  }

  li.assay-category {
    margin: 7px 0;
  }

  .assay-category a {
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    text-decoration: none;
  }

  .assay .assay__name span {
    font-size: 14px;
    line-height: 28px;
  }

  .assay__price_and_button {
    justify-content: flex-end;
  }

  .assay__price {
    flex: 0 0 100px;
    padding: 0 10px;
    margin: unset;
  }

  .assay__price span {
    font-size: 18px;
    line-height: 32px;
  }

  .assay__button {
    flex: 0 0 120px;
  }

  .assay__button button {
    min-width: 118px;
  }
}

@media (max-width: 640px) {
  .assays__parallax-ellipse {
    width: 250px;
    height: 250px;
  }

  .assays {
    padding: 0 20px;
  }

  .assay {
    flex-direction: column;
  }

  .assays__header h2 {
    font-size: 20px;
    line-height: 24px;
  }

  .assay__price_and_button {
    min-width: 320px;
    justify-content: space-between;
  }

  .assay__price {
    flex: 0 0 100px;
    margin-top: auto;
    justify-content: flex-start;
    padding: 0;
  }

  .assay__button button {
    min-width: 118px;
  }

  .assay__button {
    flex: 0 0 100px;
  }

  .assay__button button {
    padding: 8px 15px;
    min-width: 100px;
    font-size: 14px;
    line-height: 17px;
  }
}

@media (max-width: 425px) {
  .assay__price_and_button {
    min-width: unset;
  }

  ul.assays__list,
  ul.children {
    padding-inline-start: 10px;
  }
}


/* MEDICAL SERVICE DETAIL */
#assay-info {
  margin-top: 100px;
  margin-bottom: 50px;
}

#assay-info .header {
  padding-bottom: 30px;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #ffffff;
}

.assay-info {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 63px;
  margin: auto;
  padding: 0 40px;
}

.assay-info__image {
  max-width: 785px;
  max-height: 785px;
}

.assay-info__image img {
  width: 100%;
}

.assay-info__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  min-width: 500px;
  gap: 20px;
}

.assay-info__text__item {
  display: flex;
  flex-direction: column;
}

.assay-info__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.assay-info__description ul {
  padding: 15px;
}

.assay-info__price {
  display: flex;
  justify-content: center;
  color: #fff;
  font-size: 44px;
}

.assay-info__add-to-basket-button {
  display: flex;
  justify-content: center;
  padding: 30px 0;
}


@media (max-width: 1024px) {
  #assay-info .header {
    font-size: 24px !important;
    line-height: 30px !important;
  }

  .assay-info__text {
    min-width: 400px;
  }

  .assay-info {
    gap: 30px;
  }

  .assay-info__price {
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 30px;
  }

  .assay-info__add-to-basket-button button {
    min-width: 275px;
    font-size: 18px;
    padding: 10px;
  }
}

@media (max-width: 768px) {
  #assay-info .header {
    font-size: 20px !important;
    line-height: 26px !important;
  }

  .assay-info__text {
    min-width: 270px;
    font-size: 14px;
  }

  .assay-info {
    flex-direction: column;
    gap: 20px;
  }

  .assay-info__price {
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 30px;
  }

  .assay-info__add-to-basket-button button {
    min-width: 275px;
    font-size: 18px;
    padding: 10px;
  }
}

@media (max-width: 425px) {
  #assay-info .header {
    font-size: 20px !important;
    line-height: 26px !important;
  }

  .assay-info {
    padding: 0 20px;
  }

  .assay-info__price {
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 30px;
  }

  .assay-info__add-to-basket-button button {
    min-width: 275px;
    font-size: 18px;
    padding: 10px;
  }
}

/* DOCTORS BOOKING SLOTS */
.booking-parallax-ellipse-1 {
  position: absolute;
  width: 300px;
  height: 100px;
  left: 50px;
  top: 500px;
  background: var(--cst-red);
  opacity: 0.1;
  filter: blur(100px);
}

.booking-parallax-ellipse-2 {
  position: absolute;
  width: 300px;
  height: 100px;
  right: 50px;
  top: 120px;
  background: var(--cst-blue);
  opacity: 0.1;
  filter: blur(100px);
}

#booking {
  margin: auto;
  max-width: 1200px;
  margin-bottom: 80px;
  position: relative;

}

.booking {
  display: flex;
  max-width: 1190px;
  padding: 0 40px;
  margin-left: auto;
  margin-right: auto;
}

.booking-wrapper {
  display: flex;
  flex-direction: column;
}

.booking-specialist-filter {
  max-width: 1190px;
  padding: 0 40px 20px 40px;
  margin: auto;
}

#booking .header,
#FAQ .header,
#subscription-advantages .header {
  padding-bottom: 30px;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #fff;
}

.booking__date {
  position: relative;
  top: -10px;
}

#booking-slots {
  display: flex;
}

#booking-slots .doctors {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 40px;
}

#booking-slots .doctor {
  display: flex;
  flex: 1 0 calc(40%);
  /* 50% ширины с отступами между элементами */
  flex-direction: column;
  max-width: 364px;
  gap: 10px;
}

#booking-slots .doctor__photo {
  padding-right: 10px;
}

#booking-slots .doctor__photo img {
  width: 70px;
}

#booking-slots .doctor__fullname {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

#booking-slots .doctor__fullname span {
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 22px;
}

#booking-slots .doctor__info-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background-image: url("/static/img/black_mramor_mini.png");
  background-size: cover;
  border-radius: 20px;
  padding: 14px;
}

#booking-slots .doctor__specialties span,
#booking-slots .medical_service__price span {
  color: #D9D9D9
}

#booking-slots .doctor__qualifications span {
  color: #fff
}

#booking-slots .slots {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
}

#booking-slots .slots span {
  color: #aaa;
  font-size: 14px;
  line-height: 25px;
}

#booking-slots .slots__time {
  background-color: var(--main-bg-color);
  border: 1px solid #008dd2;
  border-radius: 50px;
  width: 71px;
  height: 40px;
  line-height: 35px;
  margin: 4px;
  text-align: center;
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  cursor: pointer;
}

#booking-slots .slots__time.active {
  background: var(--milk) !important;
  border: 1px solid #008dd2 !important;
  border-radius: 50px !important;
  color: #000 !important;
}

#FAQ,
#subscription-banner {
  padding: 0px 94px 0 94px;
  /* padding: 0px 54px 0 54px; */
  color: #fff;
  margin-bottom: 80px;
}

.faq {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  border: 4px solid var(--cst-blue);
  border-radius: 15px;
}

.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 22px;
  padding: 2px 30px;
}

.faq__question__button img {
  cursor: pointer;
  width: 60px;
  line-height: 60px;
}

.faq__answer {
  padding: 20px 30px 10px 30px;
  display: none;
  border-top: 4px solid var(--cst-blue);
}

@media (max-width: 1440px) {

  #FAQ,
  #subscription-banner {
    padding: 0px 80px 0 80px;
  }
}


@media (max-width: 1024px) {

  #booking,
  #FAQ {
    margin-bottom: 70px;
  }

  #FAQ,
  #subscription-banner {
    padding: 0px 56px 0 56px;
  }

  #booking-slots .doctor {
    display: flex;
    flex: 1 0 calc(70% - 10px);
    /* 50% ширины с отступами между элементами */
    flex-direction: column;
    max-width: 364px;
    gap: 10px;
  }

}

@media (max-width: 810px) {
  .booking {
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
  }

  #booking-slots .doctors {
    justify-content: center;
  }

  .booking-parallax-ellipse-1 {
    width: 300px;
    height: 100px;
    left: 0px;
    top: 500px;
    opacity: 0.1;
  }

  .booking-parallax-ellipse-2 {
    width: 300px;
    height: 100px;
    right: 0px;
    top: 80px;
    opacity: 0.1;
  }

  .booking-specialist-filter {
    padding: 0 20px 20px 20px;
  }

  #FAQ,
  #subscription-banner {
    padding: 0px 20px 0 20px;
    margin-bottom: 50px;
  }

  .faq__question {
    padding: 2px 20px;
  }

  .faq__question__name {
    font-size: 20px;
  }

  .faq__answer {
    padding: 20px 20px 10px 20px;
  }
}


@media (max-width: 768px) {

  #FAQ {
    margin-bottom: 50px;
  }

  #booking .header,
  #FAQ .header,
  #advantages .header {
    font-size: 24px;
    line-height: 30px;
    padding-bottom: 15px;
  }
}

@media (max-width: 425px) {
  .booking-parallax-ellipse-1 {
    width: 200px;
    height: 100px;
    left: 0px;
    top: 500px;
    opacity: 0.1;
  }

  .booking-parallax-ellipse-2 {
    width: 200px;
    height: 100px;
    right: 0px;
    top: 80px;
    opacity: 0.1;
  }

  #FAQ {
    padding: 30px 10px 0 10px;
  }

  .faq__question__name {
    font-size: 16px;
  }

  .faq__question__button img {
    cursor: pointer;
    width: 50px;
    line-height: 50px;
  }
}

/* CORPORATE SUBSCRIPTIONS PAGE */
/* CORPORATE TAGLINE */
/* #corporate-tagline {
  background: url("/static/img/cop10.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  padding: 172px 0 0 0;
  min-height: 700px;
} */

#corporate-tagline {
  position: relative;
  background: #39363c;
  padding: 172px 0 0 0;
  min-height: 700px;
}

.corporate-tagline__image {
  position: absolute;
  top: 68px;
  left: 50%;
  transform: translate(-50%, 0);
}

.corporate-tagline__image img {
  height: 705px;
}

#corporate-tagline .container {
  position: relative;
}

.corporate-tagline-parallax-ellipse {
  position: absolute;
  width: 1200px;
  height: 300px;
  left: 0;
  top: 200px;
  background: var(--cst-blue);
  opacity: 0.6;
  filter: blur(100px);
  z-index: 1;
}

.corporate-tagline-parallax-ellipse-1 {
  position: absolute;
  width: 400px;
  height: 300px;
  left: 0;
  top: 0;
  background: var(--cst-blue);
  opacity: 0.6;
  filter: blur(100px);
  z-index: 1;
}

.corporate-tagline-parallax-ellipse-2 {
  position: absolute;
  width: 400px;
  height: 300px;
  left: 150px;
  top: 200px;
  background: var(--cst-red);
  opacity: 0.6;
  filter: blur(100px);
  z-index: 1;
}

.corporate-tagline-parallax-ellipse-3 {
  position: absolute;
  width: 400px;
  height: 300px;
  right: 0;
  bottom: 0;
  background: var(--cst-blue);
  opacity: 0.6;
  filter: blur(100px);
  z-index: 1;
}

.corporate-tagline-parallax-ellipse-4 {
  position: absolute;
  width: 400px;
  height: 300px;
  right: 150px;
  bottom: 200px;
  background: var(--cst-red);
  opacity: 0.6;
  filter: blur(100px);
  z-index: 3;
}

#corporate-tagline .logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 531px;
  margin-bottom: 38px;
}

.corporate-tagline {
  position: relative;
  text-align: center;
  padding: 200px 100px 0;
  margin-bottom: 100px;
}

.corporate-tagline h1 {
  position: relative;
  font-size: 80px;
  font-weight: 300;
  color: #fff;
  line-height: 97px;
  z-index: 2;
  text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000,
    -1px -1px 0 #000;
}

.corporate-copr-link {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 63px;
}

.corporate-copr-link a {
  text-decoration: none;
}

@media (max-width: 1440px) {
  #corporate-tagline {
    min-height: 600px;
  }

  .corporate-tagline-parallax-ellipse {
    top: 100px;
    width: 900px;
    height: 300px;
  }

  .corporate-tagline-parallax-ellipse-1 {
    position: absolute;
    width: 250px;
    height: 200px;
    left: 0;
    top: 0;
    background: var(--cst-blue);
    opacity: 0.6;
    filter: blur(100px);
    z-index: 1;
  }

  .corporate-tagline-parallax-ellipse-2 {
    position: absolute;
    width: 250px;
    height: 200px;
    left: 150px;
    top: 200px;
    background: var(--cst-red);
    opacity: 0.6;
    filter: blur(100px);
    z-index: 1;
  }

  .corporate-tagline-parallax-ellipse-3 {
    position: absolute;
    width: 250px;
    height: 200px;
    right: 0;
    bottom: 0;
    background: var(--cst-blue);
    opacity: 0.6;
    filter: blur(100px);
    z-index: 1;
  }

  .corporate-tagline-parallax-ellipse-4 {
    position: absolute;
    width: 250px;
    height: 200px;
    right: 150px;
    bottom: 200px;
    background: var(--cst-red);
    opacity: 0.6;
    filter: blur(100px);
    z-index: 3;
  }
}

@media (max-width: 1200px) {
  #corporate-tagline {
    padding: 107px 0 0 0;
  }

  .corporate-tagline__image img {
    height: 505px;
  }

  .corporate-tagline-parallax-ellipse {
    top: 100px;
    width: 800px;
    height: 300px;
  }

  .corporate-tagline-parallax-ellipse-1 {
    position: absolute;
    width: 180px;
    height: 180px;
    left: 0;
    top: 0;
    background: var(--cst-blue);
    opacity: 0.6;
    filter: blur(100px);
    z-index: 1;
  }

  .corporate-tagline-parallax-ellipse-2 {
    position: absolute;
    width: 180px;
    height: 180px;
    left: 100px;
    top: 200px;
    background: var(--cst-red);
    opacity: 0.6;
    filter: blur(100px);
    z-index: 1;
  }

  .corporate-tagline-parallax-ellipse-3 {
    position: absolute;
    width: 180px;
    height: 180px;
    right: 0;
    bottom: 0;
    background: var(--cst-blue);
    opacity: 0.6;
    filter: blur(100px);
    z-index: 1;
  }

  .corporate-tagline-parallax-ellipse-4 {
    position: absolute;
    width: 180px;
    height: 180px;
    right: 100px;
    bottom: 200px;
    background: var(--cst-red);
    opacity: 0.6;
    filter: blur(100px);
    z-index: 3;
  }

  #corporate-tagline .logo {
    max-width: 400px;
    margin-bottom: 25px;
  }

  .corporate-tagline {
    text-align: center;
    padding: 200px 100px 0;
    margin-bottom: 40px;
  }

  .corporate-tagline h1 {
    font-size: 60px;
    color: #fff;
    line-height: 70px;
  }

  .corporate-copr-link .oval-btn {
    border: 1px solid #ffffff;
    border-radius: 50px;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    min-width: 281px;
  }

  .corporate-copr-link {
    padding-bottom: 30px;
  }
}

@media (max-width: 1024px) {
  #corporate-tagline {
    padding: 107px 0 0px 0;
  }

  .corporate-tagline-parallax-ellipse {
    top: 100px;
    width: 700px;
    height: 300px;
  }

  #corporate-tagline .logo {
    max-width: 350px;
    margin-bottom: 25px;
  }

  .corporate-tagline {
    text-align: center;
    padding: 200px 65px 0;
    margin-bottom: 80px;
  }

  .corporate-tagline h1 {
    font-size: 50px;
    color: #fff;
    line-height: 50px;
  }

  .corporate-copr-link {
    padding-bottom: 30px;
  }
}

@media (max-width: 768px) {
  #corporate-tagline {
    padding: 107px 0 0px 0;
    min-height: 550px;
  }

  .corporate-tagline__image {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .corporate-tagline-parallax-ellipse {
    top: 100px;
    width: 400px;
    height: 300px;
  }

  .corporate-tagline-parallax-ellipse-1 {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 0;
    top: 0;
    background: var(--cst-blue);
    opacity: 0.9;
    filter: blur(100px);
    z-index: 1;
  }

  .corporate-tagline-parallax-ellipse-2 {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 100px;
    top: 100px;
    background: var(--cst-red);
    opacity: 0.9;
    filter: blur(100px);
    z-index: 1;
  }

  .corporate-tagline-parallax-ellipse-3 {
    position: absolute;
    width: 100px;
    height: 100px;
    right: 0;
    bottom: 0;
    background: var(--cst-blue);
    opacity: 0.9;
    filter: blur(100px);
    z-index: 1;
  }

  .corporate-tagline-parallax-ellipse-4 {
    position: absolute;
    width: 100px;
    height: 100px;
    right: 100px;
    bottom: 200px;
    background: var(--cst-red);
    opacity: 0.9;
    filter: blur(100px);
    z-index: 3;
  }

  #corporate-tagline .logo {
    max-width: 255px;
    margin-bottom: 25px;
  }

  .corporate-tagline {
    text-align: center;
    padding: 200px 20px 0;
    margin-bottom: 60px;
  }

  .corporate-tagline h1 {
    font-size: 40px;
    color: #fff;
    line-height: 48px;
  }

  .corporate-copr-link .oval-btn {
    border: 1px solid #ffffff;
    border-radius: 50px;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    min-width: 281px;
  }

  .corporate-copr-link {
    padding-bottom: 30px;
  }
}

@media (max-width: 550px) {
  .corporate-tagline__image img {
    height: 425px;
  }
}

@media (max-width: 425px) {
  .corporate-tagline__image img {
    height: 300px;
  }

  .corporate-tagline-parallax-ellipse {
    top: 100px;
    width: 250px;
    height: 300px;
  }

  .corporate-copr-link .oval-btn {
    min-width: 250px;
  }
}

/* CORPORATE BENEFITS */
#benefits {
  padding-top: 53px;
  padding-bottom: 150px;
}

.benefits {
  display: flex;
  flex-wrap: wrap;
}

#benefits .fp-container {
  max-width: 1100px;
  margin: auto;
}

.benefit {
  flex: 27%;
  padding: 35px 35px;
}

.benefit__image {
  margin-bottom: 42px;
}

.benefit__image img {
  margin: auto;
  display: block;
}

.benefit__title {
  margin-bottom: 16px;
}

.benefit__title h2 {
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  text-align: center;
  color: #ffffff;
}

.benefit__description h3 {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  color: #d9d9d9;
}

@media (max-width: 1440px) {
  #benefits {
    padding: 53px 0 120px 0;
  }

  .benefit__image {
    margin-bottom: 35px;
  }

  #benefits .fp-container {
    max-width: 980px;
    margin: auto;
  }

  .benefit {
    flex: 50%;
    padding: 35px 40px;
  }
}

@media (max-width: 1200px) {
  #benefits {
    padding: 53px 0 90px 0;
  }
}

@media (max-width: 768px) {
  #benefits {
    padding: 53px 0 70px 0;
  }

  #benefits .fp-container .header {
    padding: 0 0 20px 0;
  }

  .benefit__image {
    margin-bottom: 19px;
  }

  .benefit {
    padding: 20px 20px;
  }

  .benefit__title h2 {
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
  }

  .benefit__description h3 {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
  }
}

@media (max-width: 600px) {
  #benefits {
    padding: 53px 0 60px 0;
  }

  .benefits {
    flex-direction: column;
  }
}

/* HOW IT WORKS (CORPORATE) */
#about-project\ corporate {
  padding-bottom: 100px;
}

/* CORPORATE RATES */
#corporate-rates {
  height: 1300px;
  overflow: hidden;
  position: relative;
  padding-bottom: 200px;
}

#corporate-rates .header h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #fff;
  margin-bottom: 40px;
}

.rate-cards {
  width: 100%;
}

.card-carousel {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
}

.card-carousel .corporate-rate-card {
  height: 950px;
  width: 439px;
  position: relative;
  z-index: 1;
  -webkit-transform: scale(0.6) translateY(-2rem);
  transform: scale(0.6) translateY(-2rem);
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  background: #2e5266;
  background: linear-gradient(to top, #2e5266, #6e8898);
  transition: 1s;
  border-radius: 40px;
  padding: 0;
  margin: 0;
  padding-bottom: 300px;
}

.card-carousel .corporate-rate-card:nth-child(1) {
  background: #ff8080;
}

.card-carousel .corporate-rate-card:nth-child(1) .corporate-rate-card__footer {
  background: #ee6b6b;
  border-radius: 0px 0px 40px 40px;
}

.card-carousel .corporate-rate-card:nth-child(1):before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 3rem;
  font-weight: 300;
  color: #fff;
}

.card-carousel .corporate-rate-card:nth-child(2) {
  background: var(--cst-blue);
}

.card-carousel .corporate-rate-card:nth-child(2) .corporate-rate-card__footer {
  background: #0271a7;
  border-radius: 0px 0px 40px 40px;
}

.card-carousel .corporate-rate-card:nth-child(2):before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 3rem;
  font-weight: 300;
  color: #fff;
}

.card-carousel .corporate-rate-card:nth-child(3) {
  background: #1c9a6d;
}

.card-carousel .corporate-rate-card:nth-child(3) .corporate-rate-card__footer {
  background: #148059;
  border-radius: 0px 0px 40px 40px;
}

.card-carousel .corporate-rate-card:nth-child(3):before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 3rem;
  font-weight: 300;
  color: #fff;
}

.card-carousel .corporate-rate-card.active {
  z-index: 3;
  -webkit-transform: scale(1) translateY(0) translateX(0);
  transform: scale(1) translateY(0) translateX(0);
  opacity: 1;
  pointer-events: auto;
  transition: 1s;
}

.card-carousel .corporate-rate-card.prev,
.card-carousel .corporate-rate-card.next {
  z-index: 2;
  -webkit-transform: scale(0.8) translateY(-1rem) translateX(0);
  transform: scale(0.8) translateY(-1rem) translateX(0);
  opacity: 1;
  pointer-events: auto;
  transition: 1s;
}

.card-carousel .corporate-rate-card h2 {
  margin-top: 60px;
  margin-bottom: 40px;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #ffffff;
}

.card-carousel .corporate-rate-card__description {
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: #ffffff;
  padding: 0 40px 0 25px;
}

.card-carousel .corporate-rate-card__description li {
  margin-bottom: 25px;
}

.card-carousel .corporate-rate-card__footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 96px;
  width: 100%;
}

.card-carousel .corporate-rate-card__footer__price {
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #ffffff;
}

.corporate-rate-card__footer__button button {
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  padding: 12px 15px;
  min-width: 124px;
}

.corporate-rate-card__footer__button a {
  color: #fff;
  text-decoration: none;
}

.corporate-rate-card-1-parallax-ellipse,
.corporate-rate-card-2-parallax-ellipse,
.corporate-rate-card-3-parallax-ellipse {
  position: absolute;
  bottom: 300px;
  z-index: -2;
  width: 350px;
  height: 120px;
  opacity: 0.5;
  filter: blur(100px);
}

.corporate-rate-card-1-parallax-ellipse {
  background: #ff8080;
  left: 30px;
}

.corporate-rate-card-2-parallax-ellipse {
  background: #008cd2;
  left: 50%;
  transform: translate(-50%, 0);
}

.corporate-rate-card-3-parallax-ellipse {
  background: #1c9a6d;
  right: 30px;
}

@media (max-width: 1440px) {
  #corporate-rates {
    height: 1000px;
    overflow: hidden;
  }

  .card-carousel .corporate-rate-card {
    width: 334px;
    height: 700px;
  }

  .card-carousel .corporate-rate-card h2 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
  }

  .card-carousel .corporate-rate-card__description {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    padding: 0 20px 0 0;
  }

  .card-carousel .corporate-rate-card__description li {
    margin-bottom: 10px;
  }

  .card-carousel .corporate-rate-card__footer {
    height: 62px;
    width: 100%;
  }

  .card-carousel .corporate-rate-card__footer__price {
    font-size: 20px;
    line-height: 24px;
  }

  .corporate-rate-card__footer__button button {
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    padding: 6px 9px;
    min-width: 124px;
  }

  .corporate-rate-card-1-parallax-ellipse,
  .corporate-rate-card-2-parallax-ellipse,
  .corporate-rate-card-3-parallax-ellipse {
    bottom: 200px;
    width: 350px;
    height: 50px;
    opacity: 0.9;
  }
}

@media (max-width: 1024px) {
  .card-carousel .corporate-rate-card {
    position: absolute;
    z-index: 1;
    -webkit-transform: scale(0.6) translateY(-2rem);
    transform: scale(0.6) translateY(-2rem);
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
    background: #2e5266;
    background: linear-gradient(to top, #2e5266, #6e8898);
    transition: 1s;
    border-radius: 40px;
  }

  .card-carousel .corporate-rate-card:nth-child(1) {
    left: 0;
  }

  .card-carousel .corporate-rate-card:nth-child(2) {
    position: absolute;
  }

  .card-carousel .corporate-rate-card:nth-child(3) {
    right: 0;
  }
}

@media (max-width: 768px) {
  #corporate-rates {
    height: 700px;
    overflow: hidden;
  }

  .card-carousel .corporate-rate-card {
    width: 334px;
    height: 522px;
  }

  #corporate-rates .header h2 {
    font-size: 20px;
    line-height: 24px;
  }

  .card-carousel .corporate-rate-card h2 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
  }

  .card-carousel .corporate-rate-card__description {
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    color: #ffffff;
    padding: 0 20px 0 0;
  }

  .card-carousel .corporate-rate-card__description li {
    margin-bottom: 10px;
  }

  .card-carousel .corporate-rate-card__footer {
    height: 62px;
    width: 100%;
  }

  .card-carousel .corporate-rate-card__footer__price {
    font-size: 20px;
    line-height: 24px;
  }

  .corporate-rate-card__footer__button button {
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    padding: 6px 9px;
    min-width: 124px;
  }

  .corporate-rate-card-1-parallax-ellipse,
  .corporate-rate-card-2-parallax-ellipse,
  .corporate-rate-card-3-parallax-ellipse {
    bottom: 200px;
    width: 350px;
    height: 50px;
    opacity: 0.9;
  }
}

@media (max-width: 500px) {

  .card-carousel .corporate-rate-card.prev,
  .card-carousel .corporate-rate-card.next {
    z-index: 2;
    -webkit-transform: scale(0.95) translateY(0) translateX(0);
    transform: scale(0.95) translateY(0) translateX(0);
    opacity: 1;
    pointer-events: auto;
    transition: 1s;
  }
}

@media (max-width: 425px) {
  .card-carousel .corporate-rate-card {
    width: 280px;
  }

  .card-carousel .corporate-rate-card__description li {
    margin-bottom: 10px;
  }

  .card-carousel .corporate-rate-card__footer {
    height: 62px;
    width: 100%;
  }

  .card-carousel .corporate-rate-card__footer__price {
    font-size: 20px;
    line-height: 24px;
  }

  .corporate-rate-card__footer__button button {
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    padding: 6px 9px;
    min-width: 124px;
  }
}

/* BASKET AND ORDER DETAIL PAGE */
#basket,
#order {
  padding-top: 120px;
}

#order .order {
  position: relative;
}

.basket-container,
.order-container {
  max-width: 1300px;
  margin: auto;
  padding: 0 40px;
}

.basket-header h2,
.order-header h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #ffffff;
}

.basket-item,
.order-item {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  border-bottom: 1px solid rgba(244, 228, 252, 0.1);
}

.order-item.canceled {
  opacity: 0.3;
}

.basket-item__info,
.order-item__info {
  display: flex;
  flex-direction: row;
}

.products-type {
  margin-top: 50px;
  border-bottom: 1px solid #f4e4fc;
}

.products-type h3 {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  color: #ffffff;
}

.products-type h3 span {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #ffffff;
}

.basket-item__info__name,
.order-item__info__name {
  width: 100%;
}

.basket-item__info__name span,
.order-item__info__name span {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #ffffff;
}

.basket-item__info__price_and_button,
.order-item__info__price_and_button {
  display: flex;
  flex-direction: row;
  min-width: 200px;
}

.basket-item__info__price,
.order-item__info__price {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0 25px;
  margin: auto;
  flex: 0 0 170px;
}

.basket-item__info__price span.disabled,
.order-item__info__price span.disabled {
  opacity: 0.4;
}

.basket-item__info__delete,
.order-item__info__delete {
  display: flex;
  flex: 0 0 30px;
  margin-top: auto;
  margin-bottom: auto;
}

input.delete-product-btn {
  background: url("/static/img/delete_icon.png");
  border: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: block;
  height: 30px;
  width: 27px;
}

.basket-item__info__price span,
.order-item__info__price span {
  position: relative;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #ffffff;
  padding-right: 20px;
}

.basket-item__info__price i.fa-regular.fa-star,
.order-item__info__price i.fa-regular.fa-star {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--cst-red);
  font-size: 16px;
}

.basket-item__complex,
.order-item__complex {
  display: flex;
  gap: 20px;
  padding: 10px 0;
}

.basket-item__complex .specialist,
.basket-item__complex .datetime,
.order-item__complex .specialist,
.order-item__complex .datetime {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #ffffff;
}

.basket-item__complex button,
.order-item__complex button {
  min-width: 240px;
  padding: 7px 20px;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
}

.basket-create-order,
.pay-order {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: auto;
  max-width: 768px;
  /* height: 105px; */
  background: #121215;
  box-shadow: 0px 4px 40px rgba(173, 228, 255, 0.3);
  border-radius: 40px;
  margin-top: 80px;
}


.pay-order .field-wrapper {
  margin: auto;
}

.pay-order .agreement {
  color: #eee;
  font-size: 14px;
}

.basket-create-order__wrapper,
.pay-order__wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
}

.basket-create-order .total-price,
.pay-order .total-price {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #fff;
  margin-top: auto;
  margin-bottom: auto;
}

.basket-create-order__wrapper button,
.pay-order__wrapper button {
  min-width: 210px;
  min-height: 60px;
  padding: 4px 10px;
}

#saved-payment-methods {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

#saved-payment-methods .saved-payment-method {
  display: flex;
  justify-content: space-between;
  background: var(--blue-bg-color);
  padding: 20px 25px;
  border-radius: 20px;
}

#saved-payment-methods .saved-payment-method[selected] {
  border: 2px solid #008DD2;
}

#saved-payment-methods .saved-payment-method__info {
  display: flex;
  gap: 50px;
}

#saved-payment-methods .saved-payment-method__info--title {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #fff;
  width: 270px;
}

#saved-payment-methods .saved-payment-method__info--expired_at {
  align-self: center;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #fff;
}

#order_promo_code {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

#order_promo_code form {
  display: inline-flex;
  max-width: 320px;
  margin: auto;
}

#order_promo_code form .field-wrapper {
  padding-bottom: 0;
}

#order_promo_code input {
  min-height: 100%;
  min-width: 100%;
  padding: 35px 25px 0 25px;
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--cst-blue);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #bdbdbd;
  caret-color: white;
}

#order_promo_code input::placeholder {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #bdbdbd;
}

#order_promo_code input:focus {
  outline: none;
  box-shadow: none;
}

#order_promo_code input:focus~label {
  top: 15px;
}

#order_promo_code label {
  margin-bottom: 0;
}

#order_promo_code label:focus {
  margin-bottom: 0;
}


#order_promo_code .order_promo_code__button {
  align-self: flex-end;
}

#order_promo_code button {
  min-width: 133px;
  max-height: 40px;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  padding: 5px 0px;
}


#save_payment_data .switch {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: 50px;
  height: 25px;
  bottom: 0;
  margin-bottom: 0;
}

#save_payment_data label {
  pointer-events: all;
  opacity: 1;
  color: #008DD2;
}

#save_payment_data .switch input {
  display: none;
}

#save_payment_data .slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

#save_payment_data .slider:before {
  background-color: #fff;
  bottom: 2px;
  content: "";
  height: 21px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 21px;
}

#save_payment_data input:checked+.slider {
  background-color: var(--cst-blue);
}

#save_payment_data input:checked+.slider:before {
  transform: translateX(22px);
}

#save_payment_data .slider.round {
  border-radius: 34px;
}

#save_payment_data .slider.round:before {
  border-radius: 50%;
}

#save_payment_data span {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #fff;
}


.checkbox-block {
  padding: 0 20px 20px 20px;
}

.checkbox-block .switch {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: 50px;
  height: 25px;
  bottom: 0;
  margin-bottom: 0;
}

.checkbox-block label {
  pointer-events: all;
  opacity: 1;
  color: #008DD2;
}

.checkbox-block .switch input {
  display: none;
}

.checkbox-block .slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.checkbox-block .slider:before {
  background-color: #fff;
  bottom: 2px;
  content: "";
  height: 21px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 21px;
}

.checkbox-block input:checked+.slider {
  background-color: var(--cst-blue);
}

.checkbox-block input:checked+.slider:before {
  transform: translateX(22px);
}

.checkbox-block .slider.round {
  border-radius: 34px;
}

.checkbox-block .slider.round:before {
  border-radius: 50%;
}

.checkbox-block span {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #fff;
}

#medical-payment-certificate__first-block {
  padding: 0 20px 20px 20px;
}

#medical-payment-certificate__first-block .checkbox-block {
  padding: 0 0 20px 0;
}

.order__qr-code {
  text-align: center;
  padding-top: 70px;
}

@media (max-width: 1024px) {

  .basket-header h2,
  .order-header h2 {
    font-size: 28px;
    line-height: 30px;
  }

  .products-type h3 {
    font-size: 20px;
    line-height: 24px;
  }

  .products-type h3 span {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #ffffff;
  }

  .basket-item__info__price span,
  .order-item__info__price span {
    font-size: 20px;
    line-height: 24px;
  }

  .basket-item__info__name span,
  .order-item__info__name span {
    font-size: 20px;
    line-height: 24px;
  }

  .basket-item__info__price_and_button,
  .order-item__info__price_and_button {
    min-width: 180px;
  }

  .basket-item__info__price,
  .order-item__info__price {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;
    margin: auto;
    flex: 0 0 130px;
  }

  #saved-payment-methods .saved-payment-method__info--title {
    font-size: 20px;
  }

  .pay-order__wrapper button {
    min-width: 180px;
    min-height: 50px;
    padding: 4px 10px;
    font-size: 20px;
    line-height: 22px;
  }
}

@media (max-width: 768px) {

  .basket-container,
  .order-container {
    padding: 0 20px;
  }

  .basket-header h2,
  .order-header h2 {
    font-size: 20px;
    line-height: 24px;
  }

  .products-type h3 {
    font-size: 16px;
    line-height: 19px;
  }

  .basket-item,
  .order-item {
    padding: 10px 0;
  }

  .basket-item__info__price span,
  .order-item__info__price span {
    font-size: 16px;
    line-height: 19px;
  }

  .basket-item__info__name span,
  .order-item__info__name span {
    font-size: 16px;
    line-height: 19px;
  }

  .basket-item__info__delete img,
  .order-item__info__delete img {
    height: 28px;
  }

  .basket-item__complex button,
  .order-item__complex button {
    min-width: 195px;
    padding: 6px 20px;
    font-weight: 400;
    font-size: 16px;
    line-height: 17px;
  }

  .basket-item__complex .specialist,
  .basket-item__complex .datetime,
  .order-item__complex .specialist,
  .order-item__complex .datetime {
    font-size: 14px;
    line-height: 18px;
  }

  .basket-create-order,
  .pay-order {
    min-width: 90%;
  }

  #saved-payment-methods .saved-payment-method,
  #saved-payment-methods .saved-payment-method__info {
    flex-direction: column;
    gap: 10px;
  }

  #saved-payment-methods .saved-payment-method__info--expired_at {
    align-self: flex-start;
  }

  #saved-payment-methods .saved-payment-method__delete {
    align-self: flex-end;
  }

  .basket-create-order__wrapper button,
  .pay-order__wrapper button {
    min-width: 157px;
    min-height: 40px;
    padding: 4px 10px;
    font-size: 18px;
    line-height: 22px;
  }

  .pay-order {
    max-width: 300px;
  }

  .pay-order__wrapper {
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 640px) {

  .basket-item__info,
  .order-item__info {
    flex-direction: column;
  }

  .basket-item__info__price_and_button,
  .order-item__info__price_and_button {
    padding-top: 5px;
    justify-content: flex-end;
  }

  .basket-item__info__price,
  .order-item__info__price {
    margin: unset;
    margin-bottom: auto;
    margin-top: auto;
  }
}

@media (max-width: 425px) {

  .basket-item__info__price span,
  .order-item__info__price span {
    font-size: 14px;
    line-height: 18px;
  }

  .basket-item__info__name span,
  .order-item__info__name span {
    font-size: 14px;
    line-height: 18px;
  }

  .basket-item__info__price_and_button,
  .order-item__info__price_and_button {
    min-width: 180px;
  }

  .basket-item__complex,
  .order-item__complex {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
  }

  input.delete-product-btn {
    width: 18px;
    height: 20px;
  }

  .basket-create-order {
    height: 150px;
  }

  .basket-create-order__wrapper,
  .pay-order__wrapper {
    padding: 20px;
    flex-direction: column;
    gap: 15px;
  }

  #saved-payment-methods .saved-payment-method__info--title {
    font-size: 16px;
    line-height: 18px;
  }

  #saved-payment-methods .saved-payment-method__info--expired_at {
    font-size: 14px;
    line-height: 16px;
    color: #fff;
  }
}




/* LOGIN PAGE and RESET PASSWORD PAGE*/
#login,
#reset-password {
  margin-top: 68px;
}

.login__header .reset-password__header {
  margin-bottom: 30px;
}

.login__header h2,
.reset-password__header h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #ffffff;
}

.login__form,
.reset-password__form {
  background: var(--blue-bg-color);
  border-radius: 40px;
  width: 440px;
  margin: auto;
  padding: 40px;
}

.login__form .field-wrapper,
.reset-password__form .field-wrapper {
  position: relative;
  margin-bottom: 15px;
}

.login__form input,
.reset-password__form input {
  border: none;
  background: transparent;
  border-bottom: 1px solid var(--cst-blue);
  padding: 20px 0 4px 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #fff;
  caret-color: white;
  width: 100%;
}

.login__form input:focus,
.reset-password__form input:focus {
  outline: transparent;
}

#toggle-password {
  position: absolute;
  top: 15px;
  right: 0;
  color: #fff;
}

.login__form__button button,
.reset-password__form__button button {
  min-width: 230px;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  padding: 8px 10px;
}

.login__form__button,
.reset-password__form__button {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.login__form__links {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login__form__links a {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  color: var(--cst-blue);
}

.reset-done {
  max-width: 400px;
  margin: auto;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reset-done p {
  text-align: center;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #fff;
}

.reset-done a {
  margin: auto;
  min-width: 230px;
  padding: 8px 20px;
  font-size: 20px;
}

@media (max-width: 440px) {

  .login__form,
  .reset-password__form {
    width: 100%;
    padding: 40px;
  }
}

/* SIGNUP PAGE */
#signup {
  margin-top: 68px;
}

.signup-header h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #ffffff;
}

#signup .content {
  background: var(--blue-bg-color);
  border-radius: 40px;
  padding: 40px 20px;
  max-width: 1400px;
  margin: auto;
}

#signup .content__wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

.fields-wrapper {
  flex: 25%;
  min-width: 300px;
}

.field-wrapper {
  position: relative;
  padding-bottom: 15px;
}

.field-wrapper label {
  margin-bottom: 15px;
}

.field-wrapper span.label {
  font-size: 14px;
  color: rgb(204, 202, 202);
  opacity: 0.4;
}

.content__wrapper .field-wrapper input,
.content__wrapper .field-wrapper select {
  border: none;
  background: transparent;
  border-bottom: 1px solid var(--cst-blue);
  padding: 20px 0 4px 0;
  width: 100%;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #fff;
  caret-color: white;
}

.content__wrapper .field-wrapper textarea,
.content__wrapper .field-wrapper select[multiple] {
  border: 1px solid var(--cst-blue);
  background: transparent;
  padding: 4px 5px;
  width: 100%;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #fff;
  caret-color: white;
  margin-top: 30px;
}

.content__wrapper .field-wrapper input.no-padding,
.content__wrapper .field-wrapper select.no-padding {
  padding: 5px 0;
}

.content__wrapper .field-wrapper textarea:focus {
  box-shadow: none;
}

.content__wrapper .field-wrapper input[type="checkbox"] {
  width: unset;
  height: 15px;
}

.content__wrapper .field-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); /* Инвертирует цвета значка (делает его белым) */
}

.content__wrapper .field-wrapper select option {
  background-color: var(--blue-bg-color);
  border: 1px solid var(--cst-blue);
}

.content__wrapper .field-wrapper select[multiple] option {
  background-color: var(--main-bg-color);
  border: none;
  color: #fff;
}

.content__wrapper .field-wrapper select[multiple] option:hover,
.content__wrapper .field-wrapper select[multiple] option:focus,
.content__wrapper .field-wrapper select[multiple] option:active,
.content__wrapper .field-wrapper select[multiple] option:checked {
  background-color: var(--milk);
  color: #000;
}

.content__wrapper .field-wrapper input:focus,
.content__wrapper .field-wrapper select:focus {
  outline: transparent;
  box-shadow: none;
}

.content__wrapper .field-wrapper input.readonly,
.content__wrapper .field-wrapper select[readonly] {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.content__wrapper .field-wrapper select[readonly][multiple] {
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.content__wrapper .field-wrapper .form-control.error {
  border-color: var(--cst-red);
}

.content__wrapper .field-wrapper input:read-only,
/* .content__wrapper .field-wrapper select:read-only, */
.content__wrapper .field-wrapper textarea:read-only {
  border-color: rgba(255, 255, 255, 0.4);
}

.content__navigation {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 20px 0;
  border-top: 1px solid rgba(244, 228, 252, 0.1);
}

.content__navigation__buttons {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.content__navigation button {
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  min-width: 230px;
  min-height: 40px;
  padding: 8px 0;
}

.content__navigation a {
  color: var(--cst-blue);
}

.content__navigation a:hover {
  text-decoration: none;
}

.content__navigation .errors,
#alerts {
  display: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  display: flex;
  align-items: center;
  color: #e06966;
}

.content__navigation .errors p,
#alerts p {
  margin-top: auto;
}

.input-group-addon {
  background-color: transparent;
  border: unset;
  border-bottom: 1px solid var(--cst-blue);
  color: #fff;
}

.input-group-addon.readonly {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.input-group.dbdp input:focus {
  box-shadow: none;
}

.absolute-alert {
  display: none;
  position: absolute;
  top: 50px;
  width: 100%;
  margin: 0;
  padding: 0 5px;
  background-color: #000;
  box-shadow: 0px 0px 5px white;
  z-index: 1;
}

.absolute-alert.active {
  display: block;
}

.alert-close {
  color: var(--cst-red);
  font-size: 20px !important;
  opacity: 1;
  text-shadow: none;
}

.absolute-alert span {
  font-size: 14px;
  color: var(--cst-red);
  padding: 0 5px;
}

.absolute-alert.agrees {
  top: 30px;
}

.signup-docs {
  display: flex;
  flex-direction: column;
  color: rgba(228, 225, 225, 0.4);
}

.signup-docs a {
  font-weight: 400;
  line-height: 27px;
  text-decoration-line: underline;
  color: #d9d9d9;
}

@media (max-width: 1300px) {
  .fields-wrapper {
    flex: 40%;
  }
}

@media (max-width: 850px) {
  .absolute-alert.agrees {
    top: 50px;
  }
}

@media (max-width: 425px) {
  .fields-wrapper {
    min-width: 280px;
  }
}

/* ACCOUNT */
.content .information {
  margin: auto;
  max-width: 700px;
  color: #fff;
  text-align: center;
}

.account-parallax-ellipse-1 {
  position: absolute;
  width: 527px;
  height: 200px;
  left: 120px;
  top: -68px;
  background: var(--cst-blue);
  opacity: 0.3;
  filter: blur(100px);
}

@media (max-width: 1440px) {
  .account-parallax-ellipse-1 {
    width: 527px;
    height: 200px;
    left: 200px;
    top: -100px;
  }
}

@media (max-width: 1024px) {
  .account-parallax-ellipse-1 {
    width: 527px;
    height: 200px;
    left: 100px;
    top: -100px;
  }
}

@media (max-width: 768px) {
  .account-parallax-ellipse-1 {
    width: 300px;
    height: 200px;
    left: 100px;
    top: -100px;
  }
}

@media (max-width: 425px) {
  .account-parallax-ellipse-1 {
    width: 280px;
    height: 200px;
    left: 0px;
    top: -100px;
  }
}

/* ACCOUNT-HEADER */
.account-wrapper {
  position: relative;
  margin-top: 41px;
  padding: 0 40px;
}

.account-navbar {
  padding: 25px 0;
  background-color: transparent;
}

.navbar-toggler-icon .fas.fa-ellipsis-h {
  font-size: 35px;
  color: #fff;
}

.account-links {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 20px 0;
}

.account-link {
  display: flex;
  gap: 10px;
  padding: 0 16px;
}

.account-link .nav-link {
  padding: 0;
}

.account-link i {
  margin: auto;
}

.account-link form,
.account-link button {
  padding: 0;
  background: none;
  border: none;
  color: #fff;
}

.account-link form button {
  display: flex;
  gap: 10px;
}

.account-link form button:hover,
.account-link form button:focus {
  color: var(--cst-red);
  border: none;
}



.account-link:nth-child(1),
.account-link:nth-child(2),
.account-link:nth-child(3),
.account-link:nth-child(4),
.account-link:nth-child(5),
.account-link:nth-child(6),
.account-link:nth-child(7) {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.account-link a {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  display: flex;
  align-items: center;
  color: #fff;
}

.account-link i {
  color: #fff;
}

.account-link.active i,
.account-link.active a {
  color: var(--cst-red);
}

.account-avatar-and-fullname {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.account-avatar img {
  width: 70px;
}

.account-fullname {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.account-fullname span {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #fff;
}

.section-header h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #ffffff;
  margin: 25px 0 40px;
}

@media (max-width: 1560px) {
  .account-navbar {
    justify-content: flex-end;
  }

  .collapse-account-header {
    position: absolute;
    width: 100%;
    top: 90px;
    background: var(--main-bg-color);
    box-shadow: 0px 4px 40px rgb(173 228 255 / 30%);
    border-radius: 40px;
    z-index: 1;
  }

  .collapse-account-header .navbar-nav {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 25px;
  }

  .account-link:nth-child(1),
  .account-link:nth-child(2),
  .account-link:nth-child(3),
  .account-link:nth-child(4),
  .account-link:nth-child(5),
  .account-link:nth-child(6),
  .account-link:nth-child(7) {
    border: none;
  }

  .account-avatar-and-fullname {
    position: absolute;
    top: 10px;
  }
}

@media (max-width: 1024px) {
  .section-header h2 {
    font-weight: 700;
    font-size: 30px;
    line-height: 33px;
    text-align: center;
    color: #fff;
  }
}

@media (max-width: 768px) {
  .section-header h2 {
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
    color: #fff;
  }

  .account-fullname {
    max-width: 160px;
  }
}

@media (max-width: 425px) {
  .account-wrapper {
    padding: 0 20px;
  }

  .account-fullname {
    max-width: 120px;
  }
}

/* ACCOUNT PROFILE */
#profile .content {
  background: var(--blue-bg-color);
  border-radius: 40px;
  padding: 40px 20px;
  max-width: 1400px;
  margin: auto;
}

#profile .content__wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

#profile .field-wrapper input[type="file"] {
  color: var(--cst-blue);
  font-size: 16px;
}

/* ACCOUNT RESERVATIONS */
.reservations .content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

.reservations .content .appointment {
  position: relative;
  width: 450px;
  background: var(--blue-bg-color);
  border-radius: 20px;
  padding: 30px 25px;
}

.reservations .content .appointment__name {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #fff;
  margin-bottom: 20px;
}

.reservations .content .appointment__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 50px;
}

.reservations .content .appointment__info span {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #fff;
}

.appointment__notification {
  position: absolute;
  bottom: 20px;
}

@media (max-width: 1440px) {
  .reservations .content .appointment {
    width: unset;
    flex: 25%;
    max-width: 450px;
    min-width: 370px;
  }
}

@media (max-width: 1024px) {
  .reservations .content .appointment {
    width: 400px;
  }

  .reservations .content .appointment__name {
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    color: #fff;
    margin-bottom: 20px;
  }
}

@media (max-width: 840px) {
  .reservations .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .reservations .content .appointment {
    width: 450px;
  }

  .reservations .content .appointment__name {
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #fff;
    margin-bottom: 20px;
  }
}

@media (max-width: 530px) {
  .reservations .content .appointment {
    width: 100%;
    min-width: 280px;
  }
}

/* ACCOUNT CONSENT DOCUMENTS */
.document-list {
  margin: auto;
  max-width: 1440px;
  padding: 10px 0;
}

.document-list__content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.document-list__content.table {
  background: var(--blue-bg-color);
  padding: 10px;
  border-radius: 30px;
}

.document-list__content.table th,
.document-list__content.table td {
  border: none;
  padding: 5px 10px;

}

.document-list .document {
  position: relative;
  width: 350px;
  background: var(--blue-bg-color);
  border-radius: 20px;
  padding: 30px 25px;
}

.document-list .document__name {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #fff;
  margin-bottom: 60px;
}

.document-list .document__signs {
  display: flex;
  flex-direction: column;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #fff;
  margin-bottom: 10px;
}

.document-list .document__link a {
  position: absolute;
  bottom: 20px;
  color: var(--cst-blue);
}


.document-list .document__date {
  position: absolute;
  bottom: 20px;
  right: 30px;
  color: #fff;
}

.consent-documents .content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

.document-list__header {
  color: #fff;
  font-size: 28px;
}

#upload-files-form {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 15px;
}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

#upload-files-form .oval-btn {
  min-width: 230px;
  padding: 6px 5px 6px;
  font-size: 16px;
}

#upload-files-form .submit-btn {
  font-size: 24px;
}

#upload-files-form .errors {
  color: #e06966;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  padding-top: 10px;
}

.upload-btn-wrapper input[type="file"] {
  font-size: 20px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.upload-btn-wrapper .file-count {
  display: inline-block;
  margin-left: 10px;
  font-size: 14px;
  color: gray;
}

#upload-files-form .submit-btn {
  display: none;
}

.submit-btn .fa-solid.fa-upload {
  color: var(--cst-blue);
}

.submit-btn .fa-solid.fa-cancel {
  color: var(--cst-red);
}

#upload-files-form .fa-solid.fa-circle-question {
  padding: 0 5px;
  font-size: 24px;
  color: #fff;
}

.submit-btn .fa-solid.fa-upload:hover {
  color: #04adff;
}

.submit-btn .fa-solid.fa-cancel:hover {
  color: #ff5752;
}

#upload-files-form .fa-solid.fa-circle-question:hover {
  color: #bbbbbb;
}


@media (max-width: 1440px) {
  .document-list .document {
    width: unset;
    flex: 25%;
    max-width: 350px;
    min-width: 330px;
  }
}

@media (max-width: 1024px) {
  .document-list .document {
    width: 380px;
  }

  .document-list .document__name {
    font-weight: 400;
    font-size: 15px;
    line-height: 17px;
    color: #fff;
  }

  .document-list__header {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .document-list__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .document-list .document {
    width: 380px;
  }

  .document-list .document__name {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #fff;
  }

  .document-list__header {
    font-size: 20px;
    text-align: center;
  }
}

@media (max-width: 530px) {
  .document-list .document {
    width: 100%;
    min-width: 280px;
  }

  .document-list__header {
    font-size: 16px;
  }

  #upload-files-form .oval-btn {
    min-width: 180px;
    padding: 6px 5px 6px;
    font-size: 15px;
  }

  .disease-history,
  .document-list__content.table {
    overflow-x: scroll;
  }
}

/* ACCOUNT MEDICAL CARD */
.medical-card {
  max-width: 1530px;
  margin: auto;
}

.medical-card .data-types {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #ffffff;
  gap: 20px;
  margin-bottom: 20px;
}

.medical-card .data-types__type {
  position: relative;
}

.medical-card .data-types__type a {
  position: relative;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #ffffff;
  padding: 5px 0;
}

.medical-card .data-types__type a:hover {
  text-decoration: none;
}

.medical-card .data-types__type__selected {
  position: absolute;
  bottom: -8px;
  width: 100%;
  height: 8px;
  background-color: #fff;
}

.medical-card .filters-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.medical-card .filters-wrapper__sort select {
  background: var(--main-bg-color);
  border: none;
  color: var(--cst-blue);
}

.medical-card .filters-wrapper__sort select:focus {
  outline: transparent;
}

.medical-card .filters-wrapper__sort select option {
  background-color: var(--blue-bg-color);
  border: 1px solid var(--cst-blue);
}

.medical-card .filters-wrapper__filters {
  color: var(--cst-blue);
}

.medical-card .history {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* MEDICAL CARD MEDICAL SERVICES */
.medical-card .history .medical-service {
  display: flex;
  flex-direction: row;
  gap: 20px;
  background: var(--blue-bg-color);
  min-height: 80px;
  border-radius: 20px;
  padding: 20px;
}

.medical-card .history .medical-service__start-at,
.medical-card .history .medical-service__name {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #fff;
}

.medical-card .history .medical-service__complex--status {
  position: relative;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
}

.medical-card .history .medical-service__complex--status .status-icon {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
}

.medical-card .history .medical-service__complex--status .status-icon.red {
  background-color: var(--cst-red);
}

.medical-card .history .medical-service__complex--status .status-icon.yellow {
  background-color: #ffd064;
}

.medical-card .history .medical-service__complex--status .status-icon.green {
  background-color: #79cc52;
}

.medical-card .history .medical-service__name {
  display: flex;
}

.medical-card .history .medical-service__start-at {
  min-width: 136px;
}

.medical-card .history .medical-service__file {
  margin-left: auto;
  min-width: 110px;
}

.medical-card .history .medical-service__file a {
  color: var(--cst-blue);
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
}

.medical-card .history .medical-service__file a:hover {
  text-decoration: none;
}

/* MEDICAL CARD ASSAYS */
.medical-card .history .assay {
  display: flex;
  flex-direction: row;
  gap: 20px;
  background: var(--blue-bg-color);
  min-height: 80px;
  border-radius: 20px;
  padding: 20px;
}

.medical-card .history .assay__name {
  display: flex;
}

.medical-card .history .assay__created-at {
  min-width: 136px;
}

.medical-card .history .assay__created-at,
.medical-card .history .assay__name span {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #fff;
}

.medical-card .history .assay__file {
  margin-left: auto;
}

.medical-card .history .assay__file a {
  color: var(--cst-blue);
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
}

.medical-card .history .assay__file a:hover {
  text-decoration: none;
}

@media (max-width: 1024px) {
  .medical-card .data-types__type a {
    font-size: 20px;
    line-height: 26px;
  }

  .medical-card .history .medical-service__start-at,
  .medical-card .history .medical-service__name,
  .medical-card .history .medical-service__file a,
  .medical-card .history .assay__created-at,
  .medical-card .history .assay__name span,
  .medical-card .history .assay__file a {
    font-size: 15px;
    line-height: 18px;
  }
}

@media (max-width: 768px) {

  .medical-card .history .medical-service,
  .medical-card .history .assay {
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
  }

  .filters-wrapper {
    font-size: 15px;
  }

  .medical-card .data-types__type a {
    font-size: 16px;
    line-height: 18px;
  }

  .medical-card .history .medical-service__start-at,
  .medical-card .history .medical-service__name,
  .medical-card .history .medical-service__file a,
  .medical-card .history .assay__created-at,
  .medical-card .history .assay__name span,
  .medical-card .history .assay__file a {
    font-size: 14px;
  }

  .medical-card .history .medical-service__file {
    margin-left: auto;
  }
}

@media (max-width: 600px) {

  .medical-card .history .medical-service,
  .medical-card .history .assay {
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
  }

  .medical-card .history .medical-service__file,
  .medical-card .history .assay__file {
    margin-left: auto;
  }
}

/* ACCOUNT PAYMENT METHODS */
.payment-methods .content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

.payment-methods .content .payment-method,
.payment-methods .content .add-payment-method {
  position: relative;
  width: 350px;
  background: var(--blue-bg-color);
  border-radius: 20px;
  padding: 30px 25px;
}

.payment-methods .content .payment-method__info {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #fff;
  margin-bottom: 60px;
}

.payment-methods .content .payment-method__delete {
  position: absolute;
  bottom: 20px;
  color: var(--cst-blue);
}

.payment-methods .content .add-payment-method {
  display: flex;
  justify-content: center;
}

.add-payment-method__button {
  margin: auto;
}

.add-payment-method__button button {
  border: 1px solid var(--cst-blue);
  background-color: transparent;
  color: var(--cst-blue);
  padding: 60px 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 50%;
}

@media (max-width: 1440px) {

  .payment-methods .content .payment-method,
  .payment-methods .content .add-payment-method {
    width: unset;
    flex: 25%;
    max-width: 350px;
    min-width: 330px;
  }
}

@media (max-width: 1024px) {
  .payment-methods .content .payment-method {
    width: 380px;
  }

  .payment-methods .content .payment-method__info {
    font-weight: 400;
    font-size: 15px;
    line-height: 17px;
    color: #fff;
  }
}

@media (max-width: 768px) {
  .payment-methods .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .payment-methods .content .payment-method,
  .payment-methods .content .add-payment-method {
    width: 380px;
  }

  .payment-methods .content .payment-method__info {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #fff;
  }
}

@media (max-width: 530px) {

  .payment-methods .content .payment-method,
  .payment-methods .content .add-payment-method {
    width: 100%;
    min-width: 280px;
  }
}

/* ACCOUNT ORDERS */
.orders .content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

.orders .content .order {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 350px;
  background: var(--blue-bg-color);
  border-radius: 20px;
  padding: 30px 25px;
}

.orders .content .order__date-and-status {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.orders .content .order__date {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #ffffff;
  opacity: 0.4;
}

.orders .content .order__status {
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #ffffff;
}

.orders .content .order__short-info {
  display: flex;
  flex-direction: column;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #ffffff;
}

.orders .content .order__date-and-status .status-icon {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
}

.orders .content .order__date-and-status .status-icon.red {
  background-color: var(--cst-red);
}

.orders .content .order__date-and-status .status-icon.yellow {
  background-color: #ffd064;
}

.orders .content .order__date-and-status .status-icon.green {
  background-color: #79cc52;
}

.orders .filters-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.orders .filters-wrapper__sort select {
  background: var(--main-bg-color);
  border: none;
  color: var(--cst-blue);
}

.orders .filters-wrapper__sort select:focus {
  outline: transparent;
}

.orders .filters-wrapper__sort select option {
  background-color: var(--blue-bg-color);
  border: 1px solid var(--cst-blue);
}

.orders .filters-wrapper__filters {
  color: var(--cst-blue);
}

.order .order__link {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .orders .content {
    justify-content: center;
  }
}

/* ACCOUNT PERSONAL SUBSCRIPTION */
.personal-subscription .content {
  display: flex;
  flex-direction: column;
  max-width: 1538px;
  margin: auto;
}

.personal-subscription .content .personal-subscription__wrapper--first,
.personal-subscription .content .personal-subscription__wrapper--second {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}

.personal-subscription .subscription__name span {
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  color: #008dd2;
}

.personal-subscription .subscription__active-until,
.personal-subscription .subscription__company {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #fff;
}

.personal-subscription .subscription__description {
  background: #008dd2;
  border-radius: 40px;
  padding: 40px 20px 30px 0;
}

.personal-subscription .subscription__description ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 25px;
  column-gap: 55px;
}

.personal-subscription .subscription__description li {
  flex: 30%;
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: #fff;
}

.personal-subscription .subscription__statistic {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  align-items: center;
  color: #ffffff;
}

.personal-subscription .subscription__statistic .scroll-table {
  overflow-x: auto;
}

.personal-subscription .subscription__statistic table {
  margin: auto;
}

.personal-subscription .subscription__statistic table caption {
  caption-side: top;
  text-align: center;
}

.personal-subscription .subscription__statistic th,
.personal-subscription .subscription__statistic td {
  padding: 5px 10px;
  text-align: center;
}

@media (max-width: 1024px) {
  .personal-subscription .subscription__name span {
    font-size: 26px;
    line-height: 34px;
  }

  .personal-subscription .subscription__active-until,
  .personal-subscription .subscription__company {
    font-size: 15px;
    line-height: 18px;
  }

  .personal-subscription .subscription__description ul {
    row-gap: 15px;
  }

  .personal-subscription .subscription__description li {
    flex: 30%;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
  }
}

@media (max-width: 768px) {
  .personal-subscription .subscription__name span {
    font-size: 20px;
    line-height: 24px;
  }

  .personal-subscription .subscription__active-until,
  .personal-subscription .subscription__company {
    font-size: 14px;
  }

  .personal-subscription .subscription__description {
    padding: 25px 20px 10px 0;
  }

  .personal-subscription .subscription__description ul {
    row-gap: 10px;
    column-gap: 55px;
  }

  .personal-subscription .subscription__description li {
    font-size: 16px;
    line-height: 22px;
  }
}

@media (max-width: 600px) {
  .personal-subscription .content .personal-subscription__wrapper--first {
    flex-direction: column;
  }

  .personal-subscription .subscription__description li {
    flex: 100%;
    font-size: 16px;
    line-height: 22px;
  }
}

@media (max-width: 425px) {

  .personal-subscription .content .personal-subscription__wrapper--first,
  .personal-subscription .content .personal-subscription__wrapper--second {
    flex-direction: column;
    gap: 5px;
  }
}

/* BLOG PAGES */
.blog-wrapper {
  position: relative;
  margin-top: 70px;
}

.mini-navbar {
  margin: auto;
  max-width: 1920px;
  padding: 0 40px;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px;
}

/* ARTICLE LIST PAGE */
.section-header-background {
  background-image: url("/static/img/black_mramor_big.png");
}

#articles .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1920px;
  margin: auto;
  padding: 20px 40px;
}

#articles h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  color: #fff;
}

.article-search {
  width: 700px;
}

.article-search__input {
  position: relative;
  display: flex;
  border: 3px solid var(--cst-blue);
  border-radius: 10px;
}

.article-search__icon {
  padding: 14px 30px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background: var(--main-bg-color);
}

.article-search__icon i {
  font-size: 40px;
  color: #fff;
}

.article-search__input input {
  width: 100%;
  color: #fff;
  font-size: 26px;
  line-height: 24px;
  border: none;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background: var(--main-bg-color);
}

.article-search__input input:focus {
  outline: none;
}

.article-search__input #search {
  display: none;
  position: absolute;
  top: 75px;
  left: -75px;
  width: calc(100% + 75px);
  z-index: 5;
  background: var(--main-bg-color);
  border-radius: 20px;
}

.article-search__input .search-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 3px solid var(--cst-blue);
  border-radius: 20px;
  padding: 10px;
  max-height: 350px;
  overflow: auto;
}

.article-search__input .search-list::-webkit-scrollbar {
  background: transparent;
  height: 8px;
  width: 16px;
  border-radius: 100px;
}

.article-search__input .search-list::-webkit-scrollbar-thumb {
  background: #C8C2C238;
  border: 3px solid var(--cst-blue);
  border-radius: 100px;
  padding: 10px;

}

.article-search__input #search .search-result {
  padding: 15px 25px;
  background: #1A1A1B;
  border-radius: 20px;
}

.article-search__input .search-list a {
  text-align: left;
  width: 100%;
}


.articles_wrapper {
  display: flex;
  flex-direction: column;
  max-width: 1920px;
  margin: auto;
  margin-top: 43px;
  padding: 0 40px;
}

.articles_wrapper.category-articles {
  margin-top: 0 !important;
}

/* MAIN ARTICLE */
.main-article-and-categories {
  display: flex;
  gap: 57px;
  margin-bottom: 130px;
}

.main-article {
  display: flex;
  flex-direction: column;
  flex: 60%;
  margin-top: 27px;
}

.main-article .article__image {
  position: relative;
}

.main-article .article__image img {
  width: 100%;
  border-radius: 20px;
}

.main-article .article__image__category {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 30px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  padding: 30px;
  background-color: var(--cst-blue);
  border-radius: 10px;
}

.main-article .article__title {
  margin-top: 20px;
}

.main-article .article__title h3 {
  font-size: 40px;
  font-weight: 400;
  line-height: 32px;
  color: #fff;
}

.main-article .article__text,
.main-article .article__link {
  margin-top: 10px;
  font-size: 24px;
  font-weight: 400;
  line-height: 24px;
}

.main-article .article__text {
  color: #fff;
}

.articles-categories {
  display: flex;
  flex-direction: column;
  gap: 50px;
  flex: 35%;
}

.articles-categories h3 {
  font-size: 40px;
  font-weight: 600;
  line-height: 24px;
  color: #fff;
}

.articles-categories-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
}

.articles-categories .article-category {
  display: flex;
  align-items: center;
  border: 3px solid var(--cst-blue);
  border-radius: 20px;
  text-decoration: none;
  text-align: center;
}

.articles-categories .article-category__link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  padding: 15px;
}

.articles-categories .article-category__link:hover {
  background: rgb(1, 49, 73);
  border-radius: 20px;
}

/* DOCTORS ARTICLES */
.articles {
  margin-top: 50px;
  margin-bottom: 50px;
}

.articles-container {
  display: flex;
  flex-wrap: wrap;
}

.articles .article {
  flex-grow: 1;
  flex-basis: 25%;
  max-width: 25%;
  box-sizing: border-box;
  padding: 10px;
}

.articles .article__image {
  position: relative;
  display: flex;
  /* height: 222px; */
  margin-bottom: 27px;
}

.articles .article__image img {
  /* max-width: 400px; */
  width: 100%;
  /* height: 100%; */
  line-height: 0;
  border-radius: 20px;
}

.articles .article__title {
  margin-bottom: 7px;
}

.articles .article__title h3 {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #fff;
}

.articles .article__text {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}

.articles .article__link {
  padding-top: 10px;
}

.articles .article__image__category {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  padding: 10px 15px;
  background-color: var(--cst-blue);
  border-radius: 10px;
}

.articles .load-more-atricles-btn {
  text-align: center;
}


.section-footer-background {
  background-image: url("/static/img/black_mramor_big.png");
  background-size: cover;
  margin: auto;
}

.social-medias {
  max-width: 1920px;
  margin: auto;
  padding: 60px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 30px;
}

.instagram-info {
  max-width: 1920px;
  margin: auto;
  padding: 10px 40px;
  color: #fff;
  font-size: 12px;
}


.section-footer-background .icons {
  flex: none;
  display: flex;
  gap: 20px;
  padding: 0;
}

.section-footer-background .icons .icon img {
  width: 80px;
  height: 80px;
}



/* #articles .pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
}

#articles .pagination__item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--cst-blue);
  border-radius: 50%;
  background: #000;
}

#articles .pagination__item.active {
  background: var(--milk);
}

#articles .pagination__item.pagination__item--dots {
  background: transparent;
  border: none;
  align-items: flex-end;
}

#articles .pagination__item.pagination__item--prev,
#articles .pagination__item.pagination__item--next {
  background: transparent;
  border: none;
  font-size: 30px;
}

#articles .pagination__item.pagination__item--prev a,
#articles .pagination__item.pagination__item--next a {
  color: var(--milk);
}

#articles .pagination__item a {
  color: var(--cst-blue);
}

.articles .filters-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.articles .filters-wrapper__sort select {
  background: transparent;
  border: none;
  color: var(--cst-blue);
}

.articles .filters-wrapper__sort select:focus {
  outline: transparent;
  background: var(--main-bg-color);
}

.articles .filters-wrapper__sort select option {
  background-color: var(--blue-bg-color);
  border: 1px solid var(--cst-blue);
}

#filter-modal form select {
  background: #000;
  border: none;
  color: var(--cst-blue);
}

#filter-modal form select:focus {
  outline: transparent;
}

#filter-modal form select option {
  background-color: var(--blue-bg-color);
  border: 1px solid var(--cst-blue);
}

#filter-modal .filter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#filter-modal .filter-form input {
  padding: 3px 10px;
  min-width: 230px;
  font-size: 18px;
  margin-top: 10px;
}

.articles .filters-wrapper__sort,
.articles .filters-wrapper__filters {
  color: var(--cst-blue);
} */

@media (max-width: 1440px) {

  /* MAIN */
  .articles_wrapper {
    max-width: 1400px;
    margin: auto;
    margin-top: 40px;
    justify-content: space-between;
  }

  #articles .section-header {
    padding: 15px 40px;
  }

  #articles h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 32px;
    color: #fff;
  }

  .article-search {
    width: 600px;
  }

  .article-search__input #search {
    top: 70px;
  }

  .article-search__icon {
    padding: 14px 20px;
  }

  .article-search__icon i {
    font-size: 32px;
  }

  .article-search__input input {
    font-size: 20px;
  }

  .main-article-and-categories {
    gap: 30px;
    margin-bottom: 80px;
  }

  .main-article {
    flex: 55%;
  }

  .articles-categories {
    flex: 40%;
  }

  .main-article .article__image__category {
    font-size: 24px;
    padding: 25px;
  }

  .main-article .article__title h3 {
    font-size: 32px;
  }

  .main-article .article__text,
  .main-article .article__link {
    font-size: 20px;
  }

  .articles-categories {
    gap: 25px;
  }

  .articles-categories-wrapper {
    gap: 15px;
    font-size: 16px;
    font-weight: 400;

  }

  .articles-categories .article-category__link {
    padding: 10px;
  }

  /* ARTICLES */
  .articles {
    margin-top: 25px;
  }

  .articles .article {
    flex-grow: 1;
    flex-basis: 33.3%;
    max-width: 33.3%;
    box-sizing: border-box;
    padding: 10px;
  }

  .articles .article__image {
    margin-bottom: 20px;
  }

  .articles .article__title h3 {
    line-height: 28px;
  }

  .social-medias {
    padding: 40px 40px;
    font-size: 24px;
  }

  .section-footer-background .icons .icon img {
    width: 50px;
    height: 50px;
  }

}

@media (max-width: 1024px) {

  /* MAIN */
  .articles_wrapper {
    max-width: 1400px;
    margin: auto;
    margin-top: 0;
    justify-content: space-between;
  }

  #articles .section-header {
    padding: 15px 40px;
  }

  #articles h1 {
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
    color: #fff;
  }

  .article-search {
    width: 500px;
  }

  .article-search__input #search {
    top: 65px;
  }

  .article-search__icon {
    padding: 14px 20px;
  }

  .article-search__icon i {
    font-size: 28px;
  }

  .article-search__input input {
    font-size: 20px;
  }

  .main-article-and-categories {
    flex-direction: column;
    gap: 50px;
    margin-bottom: 80px;
  }

  .main-article {
    flex: 55%;
  }

  .articles-categories {
    flex: 40%;
  }

  .main-article .article__image__category {
    font-size: 24px;
    padding: 25px;
  }

  .main-article .article__title h3 {
    font-size: 28px;
  }

  .main-article .article__text,
  .main-article .article__link {
    font-size: 18px;
  }

  .articles-categories {
    gap: 25px;
  }

  .articles-categories-wrapper {
    gap: 15px;
    font-size: 16px;
    font-weight: 400;

  }

  .articles-categories .article-category__link {
    padding: 10px;
  }

  /* ARTICLES */
  .articles {
    margin-top: 25px;
  }

  .articles .article {
    flex-grow: 1;
    flex-basis: 50%;
    max-width: 50%;
    box-sizing: border-box;
    padding: 10px;
  }

  .articles .article__image {
    margin-bottom: 20px;
  }

  .articles .article__title h3 {
    line-height: 28px;
  }

  .social-medias {
    padding: 40px 40px;
    font-size: 24px;
  }

  .section-footer-background .icons .icon img {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 768px) {

  /* MAIN */
  .mini-navbar {
    padding: 0 20px;
    font-size: 16px;
  }

  .articles_wrapper {
    padding: 0 20px;
  }

  #articles {
    margin-top: 20px;
  }

  #articles .section-header {
    padding: 15px 20px;
    gap: 10px;
  }

  #articles h1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    color: #fff;
  }

  .article-search {
    width: 400px;
  }

  .article-search__input #search {
    top: 50px;
    left: -150px;
    width: calc(100% + 150px);
    z-index: 5;
    background: var(--main-bg-color);
    border-radius: 20px;
    font-size: 14px;
  }

  .article-search__input #search .search-result {
    padding: 5px 10px
  }

  .article-search__icon {
    padding: 8px 15px;
  }

  .article-search__icon i {
    font-size: 20px;
  }

  .article-search__input input {
    font-size: 16px;
  }

  .main-article-and-categories {
    flex-direction: column;
    gap: 50px;
    margin-bottom: 80px;
  }

  .main-article {
    flex: 55%;
  }

  .articles-categories {
    flex: 40%;
  }

  .main-article .article__image__category {
    font-size: 20px;
    padding: 20px;
  }

  .main-article .article__title h3 {
    font-size: 28px;
  }

  .main-article .article__text,
  .main-article .article__link {
    font-size: 18px;
  }

  .articles-categories {
    gap: 25px;
  }

  .articles-categories-wrapper {
    gap: 15px;
    font-size: 16px;
    font-weight: 400;

  }

  .articles-categories .article-category {
    border: 2px solid var(--cst-blue);
  }

  .articles-categories .article-category__link {
    padding: 10px;
  }

  /* ARTICLES */
  .articles {
    margin-top: 25px;
  }

  .articles .article {
    flex-grow: 1;
    flex-basis: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px;
  }

  .articles .article__image {
    margin-bottom: 20px;
  }

  .articles .article__title h3 {
    line-height: 28px;
  }

  .load-more-atricles-btn button {
    padding: 10px 15px;
    min-width: 300px;
    font-size: 20px;
  }

  .social-medias {
    padding: 40px 40px;
    font-size: 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .section-footer-background .icons .icon img {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 425px) {

  /* MAIN */
  .mini-navbar {
    padding: 0 20px;
    font-size: 16px;
  }

  .articles_wrapper {
    padding: 0 20px;
  }

  #articles {
    margin-top: 20px;
  }

  #articles .section-header {
    padding: 20px;
    gap: 10px;
  }

  #articles h1 {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #fff;
  }

  .article-search {
    width: 350px;
  }

  .article-search__icon {
    padding: 5px 10px;
  }

  .article-search__icon i {
    font-size: 16px;
  }

  .article-search__input input {
    font-size: 14px;
  }

  .main-article-and-categories {
    flex-direction: column;
    gap: 50px;
    margin-bottom: 40px;
  }

  .main-article {
    flex: 55%;
  }

  .articles-categories {
    flex: 40%;
  }

  .main-article .article__image__category {
    font-size: 18px;
    padding: 10px 15px;
  }

  .main-article .article__title h3 {
    font-size: 20px;
    line-height: 24px;
  }

  .main-article .article__text,
  .main-article .article__link {
    font-size: 16px;
  }

  .articles-categories {
    gap: 10px;
  }

  .articles-categories-wrapper {
    gap: 15px;
    font-size: 14px;
    font-weight: 400;

  }

  .articles-categories .article-category {
    border: 1px solid var(--cst-blue);
  }

  .articles-categories .article-category__link {
    padding: 10px;
  }

  /* ARTICLES */
  .articles {
    margin-top: 10px;
  }

  .articles .article {
    flex-grow: 1;
    flex-basis: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    padding-bottom: 15px;
  }

  .articles .article__image {
    margin-bottom: 20px;
  }

  .articles .article__title h3 {
    line-height: 24px;
    font-size: 20px;
  }

  .article .article__text,
  .article .article__link {
    font-size: 14px;
    line-height: 20px;
  }

  .load-more-atricles-btn button {
    padding: 10px 15px;
    min-width: 300px;
    font-size: 20px;
  }

  .social-medias {
    padding: 40px 40px;
    font-size: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ARTICLE DETAIL */
.article-wrapper {
  max-width: 1920px;
  padding: 70px 90px;
  margin: auto;
}

.article-wrapper .article__image img {
  width: 100%;
  border-radius: 40px;
}

.article-wrapper .article__preview {
  display: flex;
  border-bottom: 3px solid #fff;
  margin-top: 60px;
}

.article-wrapper .article__preview .article__description {
  display: flex;
  flex-direction: column;
  flex: 85%;
  gap: 30px;
  padding: 27px 30px;
  border-right: 3px solid #fff;
}

.article__author {
  display: flex;
  gap: 32px;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
}

.article__author:hover {
  color: #fff;
  text-decoration: none;
}

.article__author__image {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.article__author__image img {
  width: 111px;
  border-radius: 50%;
}

.article__author__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.article__author__fullname {
  font-size: 30px;
  font-weight: 500;
  line-height: 22px;
}

.article__author__specialties,
.article__author__qualification {
  font-size: 24px;
  font-weight: 500;
  line-height: 22px;
}

.article-wrapper .article__preview .article__category-and-date {
  display: flex;
  gap: 75px;
}

.article-wrapper h1 {
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  color: #fff;
}

.article-wrapper .article__description,
.article-wrapper .article__preview .article__time-to-read span {
  font-size: 24px;
  font-weight: 500;
  line-height: 29px;
  color: #fff;
}

.article-wrapper .article__preview .article__category-and-date .dot {
  margin: 0;
  margin-top: auto;
  margin-bottom: auto;
  border: calc(var(--fc-daygrid-event-dot-width, 15px) / 2) solid var(--fc-event-border-color, #3788d8);
  border-radius: calc(var(--fc-daygrid-event-dot-width, 15px) / 2);
}

.article-wrapper .article__preview .article__time-to-read {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: #fff;
  flex: 15%;
  padding: 27px 30px;
  text-align: center;
}

.article-wrapper .article__preview .article__time-to-read img {
  width: 56px;
}

.article-wrapper .article__content {
  margin-top: 70px;
  padding: 0 30px;
  color: #fff;
}

.article-wrapper .article__content a {
  color: var(--cst-blue) !important;
}

.article-wrapper .article__content a:hover {
  color: #25b7ff !important;
}

.article__content .article__doctors {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

.article__content .article__sources {
  margin-top: 40px;
  font-size: 14px;
}

@media (max-width: 1440px) {
  .article-wrapper {
    max-width: 1440px;
    padding: 50px 40px;
    margin: auto;
  }

  .article-wrapper .article__preview {
    margin-top: 30px;
  }

  .article-wrapper .article__preview .article__description {
    gap: 20px;
  }

  .article__author {
    display: flex;
    gap: 25px;
  }

  .article__author__info {
    gap: 10px;
  }

  .article__author__fullname {
    font-size: 24px;
  }

  .article__author__specialties,
  .article__author__qualification {
    font-size: 20px;
  }

  .article-wrapper .article__preview .article__time-to-read img {
    width: 40px;
  }

  .article-wrapper .article__description,
  .article-wrapper .article__preview .article__time-to-read span {
    font-size: 20px;
  }

  .article-wrapper .article__content {
    margin-top: 40px;
  }

}


@media (max-width: 1024px) {
  .article__author {
    display: flex;
    gap: 20px;
  }

  .article__author__image img {
    width: 80px;
    border-radius: 50%;
  }

  .article__author__info {
    gap: 7px;
  }

  .article__author__fullname {
    font-size: 18px;
  }

  .article__author__specialties,
  .article__author__qualification {
    font-size: 16px;
  }

  .article-wrapper .article__description,
  .article-wrapper .article__preview .article__time-to-read span {
    font-size: 18px;
  }

  .article-wrapper .article__preview .article__category-and-date {
    display: flex;
    gap: 50px;
  }

  .article-wrapper .article__preview .article__description {
    padding: 20px 20px;
  }

  .article-wrapper .article__content {
    padding: 0 20px;
  }
}

@media (max-width: 768px) {
  .article-wrapper {
    max-width: 1440px;
    padding: 35px 20px;
  }

  .article-wrapper .article__preview {
    flex-direction: column;
    margin-top: 20px;
  }

  .article-wrapper .article__preview .article__description {
    padding: 10px;
    border: none;
    gap: 10px;
  }

  .article__author {
    display: flex;
    gap: 20px;
  }

  .article__author__image img {
    width: 70px;
    border-radius: 50%;
  }

  .article__author__info {
    gap: 2px;
  }

  .article__author__fullname {
    font-size: 16px;
  }

  .article__author__specialties,
  .article__author__qualification {
    font-size: 14px;
  }

  .article-wrapper .article__preview .article__category-and-date {
    justify-content: space-between;
    gap: 20px;
  }

  .article-wrapper .article__preview .article__time-to-read {
    justify-content: flex-start;
    flex-direction: row;
    border-top: 3px solid #fff;
    padding: 10px 20px;
  }

  .article-wrapper .article__preview .article__time-to-read img {
    width: 30px;
  }

  .article-wrapper .article__description,
  .article-wrapper .article__preview .article__time-to-read span {
    font-size: 16px;
    line-height: 16px;
  }

  .article-wrapper .article__content {
    padding: 0 10px;
  }

  .article-wrapper .article__content h2 {
    font-size: 24px;
  }
}

@media (max-width: 425px) {
  .article-wrapper .article__preview {
    margin-top: 15px;
  }

  .article-wrapper .article__preview .article__description {
    gap: 10px;
  }

  .article__author__image img {
    width: 50px;
    border-radius: 50%;
  }

  .article__author__info {
    gap: 0;
  }

  .article__author__fullname {
    font-size: 14px;
  }

  .article__author__specialties,
  .article__author__qualification {
    font-size: 12px;
  }

  .article-wrapper .article__preview .article__category-and-date {
    gap: 5px;
  }

  .article-wrapper .article__description,
  .article-wrapper .article__preview .article__time-to-read span {
    font-size: 14px;
    line-height: 14px;
  }

  .article-wrapper .article__content {
    font-size: 14px;
    padding: 0;
  }

  .article-wrapper .article__content h2 {
    font-size: 16px;
  }
}

/* MIS */
.mis-wrapper {
  position: relative;
  padding: 0 40px;
}

#specialists-schedule .filter-form {
  padding: 15px 0;
}

#specialists-schedule .filter-form form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#specialists-schedule .filter-form form select {
  background: #000;
  border: none;
  color: var(--cst-blue);
  width: 100%;
  padding: 10px;
  border-radius: 10px;
}

#specialists-schedule .filter-form form select:focus {
  outline: transparent;
}

#specialists-schedule .filter-form form select option {
  background-color: var(--blue-bg-color);
  border: 1px solid var(--cst-blue);
}

#appointment_form .content__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#appointment_form .content__wrapper .fields-wrapper {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

#appointment_form .content__wrapper .field-wrapper {
  flex: 20%;
}

#appointment_form .content__wrapper .field-wrapper i {
  color: #fff;
}

.fixed-footer-menu {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: transparent;
  color: white;
  text-align: right;
  z-index: 1;
}

.fixed-footer-menu button {
  position: relative;
  min-width: 150px;
  border-radius: 0.25rem;
  padding: 7px 20px;
  bottom: 5px;
  right: 5px;
  background: var(--main-bg-color);
}

.create_report button {
  position: relative;
  min-width: 150px;
  border-radius: 0.25rem;
  padding: 7px 20px;
  background: var(--main-bg-color);
}

#mis-appointment .appointment-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

#mis-appointment .appointment-menu .dropdown {
  display: inline-block;
  position: relative;
}

#mis-appointment .appointment-menu .dropdown-content {
  display: none;
  position: absolute;
  width: 100%;
  overflow: auto;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);
  z-index: 9999999999999;
}

#mis-appointment .appointment-menu .dropdown:hover .dropdown-content {
  display: block;
}

#mis-appointment .appointment-menu .dropdown-content a {
  display: block;
  padding: 5px;
  text-decoration: none;
  text-align: center;
}

.label-header {
  color: #b3b2b2;
}

#mis-appointment .appointment-menu .sqr-btn {
  width: 270px;
}

@media (max-width: 1024px) {

  #mis-appointment .appointment-menu .sqr-btn,
  #mis-appointment .appointment-menu .reports,
  #mis-appointment .appointment-menu form {
    flex: 45%;
  }

  #mis-appointment .appointment-menu form #selective_report_create_btn,
  #mis-appointment .appointment-menu form #mini_report_create_btn,
  #mis-appointment .appointment-menu form #create_appointment_cda_btn,
  #mis-appointment .appointment-menu .dropdown,
  #mis-appointment .appointment-menu .dropdown .sqr-btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .mis-wrapper {
    position: relative;
    padding: 0 10px;
  }

  #mis-appointment .appointment-menu .sqr-btn,
  #mis-appointment .appointment-menu .reports,
  #mis-appointment .appointment-menu form {
    flex: 50%;
  }

  #mis-appointment .appointment-menu form #selective_report_create_btn,
  #mis-appointment .appointment-menu form #mini_report_create_btn,
  #mis-appointment .appointment-menu form #create_appointment_cda_btn,
  #mis-appointment .appointment-menu .dropdown,
  #mis-appointment .appointment-menu .dropdown .sqr-btn {
    width: 100%;
  }


  #appointment_form .content__wrapper .fields-wrapper {
    flex-direction: column;
    gap: 0;
  }
}

@media (max-width: 425px) {
  .mis-wrapper {
    position: relative;
    padding: 0 10px;
  }
}

/* QUESTIONNAIRE */
#questionnaire {
  padding: 40px 20px;
  max-width: 1400px;
  margin: auto;
}

.questionnaire-content input,
.questionnaire-content textarea {
  background-color: var(--blue-bg-color);
}

.questionnaire-content .other-input {
  height: 100%;
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.questionnaire-content h1 {
  color: #fff;
  font-size: 26px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.2;
  letter-spacing: normal;
  margin-bottom: 1rem;
}

.questionnaire-content h2 {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: normal;
}

.questionnaire-content .myButton {
  background-color: #044161;
  border-radius: 40px;
}

.questionnaire-content #backIcon svg {
  background-color: transparent;
  fill: var(--cst-blue);
}

.questionnaire-content #backIcon svg:hover {
  background-color: transparent;
  fill: #039ce9;
}

.questionnaire-content #forwardIcon svg {
  background-color: transparent;
  fill: var(--cst-blue);
  padding-left: 2px;
}

.questionnaire-content #wrap {
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  max-width: 1014px;
  padding: 30px;
  background-color: var(--blue-bg-color);
}

.questionnaire-content .navigation {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: baseline;
}

.questionnaire-content .test-btn,
.questionnaire-content #back {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  width: 43px;
  height: 43px;
  color: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--cst-blue) !important;
  background-color: transparent !important;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  border-radius: 50%;
}

.questionnaire-content #qBox #welcome {
  text-align: center;
}

.questionnaire-content .flexContainer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-top: 20px;
}

.questionnaire-content #aBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: space-around;
}

.questionnaire-content #back:hover,
.questionnaire-content #fwd:hover {
  color: #00a1e4;
  background-color: rgb(1, 49, 73) !important;
}

.questionnaire-content #welcome,
.questionnaire-content #end {
  margin-bottom: 30px;
  text-align: center;
}

.questionnaire-content .question {
  position: relative;
  color: #fff;
  padding-bottom: 0px;
  text-align: left;
  line-height: 1.1em;
  font-size: 30px;
}

.questionnaire-content .description {
  position: relative;
  color: #e7e7e7;
  padding-bottom: 0px;
  text-align: left;
  font-size: 0.8em;
}

.questionnaire-content .answers {
  flex: 0 1 49%;
  display: flex;
  margin-bottom: 1rem;
  border-radius: 5px;
  border: solid 1px #005a87;
  -webkit-box-align: center;
  box-sizing: inherit;
  color: #fff;
  text-align: left;
  list-style: none;
  font-size: 16px;
  cursor: pointer;

  transition: background-color 0.3s ease-out;
  -webkit-transition: background-color 0.3s ease-out;
  -o-transition: background-color 0.3s ease-out;
  -moz-transition: background-color 0.3s ease-out;
}

.questionnaire-content .answers.single:hover {
  box-shadow: 0 1px 3px var(--cst-blue);
}

.questionnaire-content .begin,
.questionnaire-content .end {
  min-width: 200px;
  max-width: 200px;
  font-size: 18px;
}

.questionnaire-content .inputNext,
.questionnaire-content .multipleDone,
.questionnaire-content .textNext {
  font-size: 16px;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}

.questionnaire-content .inputNext,
.questionnaire-content .multipleDone,
.questionnaire-content .textNext,
.questionnaire-content .end,
.questionnaire-content .begin {
  color: #fff;
  line-height: 1.5em;
  text-align: center;
  padding: 10px 6px;
  margin: left;
}

.questionnaire-content .begin,
.questionnaire-content .end {
  margin: auto;
}

.questionnaire-content .fa-square-o,
.questionnaire-content .fa-check-square-o {
  padding-right: 10px;
}

.questionnaire-content .inputNext:hover,
.questionnaire-content .textNext:hover,
.questionnaire-content .end:hover,
.questionnaire-content .begin:hover {
  background: #045683;
  color: #eee;
}

.questionnaire-content .inputNext:hover,
.questionnaire-content .multipleDone:hover,
.questionnaire-content .error:hover,
.questionnaire-content .end:hover,
.questionnaire-content .textNext:hover {
  transition: border 0.5s ease-out;
  -webkit-transition: border 0.5s ease-out;
  -o-transition: border 0.5s ease-out;
  -moz-transition: border 0.5s ease-out;
}

.questionnaire-content input[type="text"],
.questionnaire-content input[type="number"],
.questionnaire-content textarea {
  outline: none;
  position: relative;
  display: block;
  text-align: left;
  border: none;
  border-radius: 0.2em;
  font-size: 1rem;
  padding-left: 5px;
  width: 100%;
  height: 100%;
  color: #fff;
}

.questionnaire-content .textCounter {
  width: 95%;
  text-align: right;
  font-size: 0.6em;
  color: #9e988b;
}

.questionnaire-content .red {
  color: #fd3000;
}

.questionnaire-content #submitBox {
  display: flex;
  padding-left: 20px;
}

.questionnaire-content #errorBox {
  width: 70%;
  margin: auto;
}

.questionnaire-content #error {
  color: var(--cst-red);
  font-weight: bold;
  font-size: 0.8em;
  padding: 20px 0;
  text-align: center;
}

.questionnaire-content #startOver {
  color: #9e988b;
  cursor: pointer;
  font-size: 0.7em;
  text-align: center;
  transition: color 0.3s ease-out;
  -webkit-transition: color 0.3s ease-out;
  -o-transition: color 0.3s ease-out;
  -moz-transition: color 0.3s ease-out;
}

.questionnaire-content #startOver:hover {
  color: #fd3000;
}

.questionnaire-content #exit {
  position: relative;
  top: -25px;
  left: calc(100% + 5px);
  width: 30px;
  height: 30px;
  line-height: 30px;
  background-color: #e4e4e4;
  color: #777;
  padding: 0;
  border-radius: 30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  font-size: 16px;
  box-shadow: 0px 1px 3px #999;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s ease-out;
  -webkit-transition: background-color 0.3s ease-out;
  -o-transition: background-color 0.3s ease-out;
  -moz-transition: background-color 0.3s ease-out;
}

.questionnaire-content #exit:hover {
  background: #fd3000;
  color: #fff;
}

.questionnaire-content #qOpen {
  position: fixed;
  bottom: -50px;
  right: 0;
  width: 200px;
  height: 30px;
  padding: 10px;
  background: #00a1e4;
  color: #eee;
  cursor: pointer;
  text-align: center;
  -webkit-border-top-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  border-top-left-radius: 3px;
}

.questionnaire-content #qOpen:hover {
  background: #0084bb;
}

.questionnaire-content #verifyBox {
  position: absolute;
  width: 480px;
  max-width: 480px;
  padding: 30px 20px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  left: 0;
  right: 0;
  text-align: center;
  background: #444;
  color: #ededed;
  border: 3px solid #404040;
  box-shadow: 0px 2px 10px #999;
  z-index: 999;
  opacity: 0;
}

.questionnaire-content #verifyQ {
  margin-bottom: 30px;
}

.questionnaire-content #startOverNo,
.questionnaire-content #startOverYes {
  padding: 10px;
  cursor: pointer;
  width: 40%;
}

.questionnaire-content #startOverNo,
.questionnaire-content #startOverYes {
  background: #dedede;
  color: #444;
  transition: background 0.3s ease-out;
  -webkit-transition: background 0.3s ease-out;
  -o-transition: background 0.3s ease-out;
  -moz-transition: background 0.3s ease-out;
}

.questionnaire-content #startOverNo:hover {
  background: #fff;
}

.questionnaire-content #startOverYes:hover {
  background: #fd3000;
  color: #fff;
}

.questionnaire-content .blurred {
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

.questionnaire-content .paused .answers.single:hover,
.questionnaire-content .paused .inputNext,
.questionnaire-content .paused .multipleDone,
.questionnaire-content .paused .inputNext:hover,
.questionnaire-content .paused .multipleDone:hover {
  background-color: #fefefe;
  color: #403e30;
  cursor: default;
}

.questionnaire-content .paused #back:hover,
.questionnaire-content .paused #fwd:hover,
.questionnaire-content .paused #startOver:hover {
  color: #9e988b;
  cursor: default;
}

.questionnaire-content .paused .inputNext:hover {
  background: #00a1e4;
  color: #eee;
  cursor: default;
}

.questionnaire-content .paused #exit:hover {
  background-color: #e4e4e4;
  color: #777;
  cursor: default;
}

.questionnaire-content input::-webkit-outer-spin-button,
.questionnaire-content input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.questionnaire-content input[type="number"] {
  -moz-appearance: textfield;
}

.questionnaire-content .b-radio.radio {
  line-height: 1.5;
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  outline: none;
  margin: 0;
  padding: 20px;
  opacity: 1;
}

.questionnaire-content input[type="radio" i] {
  margin: 0;
}

.questionnaire-content .aInput {
  padding: 10px;
}

.questionnaire-content .question_text {
  display: flex;
  align-items: center;
  outline: none;
  position: relative;
  text-align: left;
  border: none;
  border-radius: 0.2em;
  font-size: 16px;
  padding-left: 5px;
  width: 100%;
  height: 100%;
}

.questionnaire-content .selected {
  box-shadow: 0 1px 3px 0 #d2e1e5;
  border: solid 1px #fff;
}

.questionnaire-content .b-radio.radio input[type="radio"]:checked+.check:before {
  border: 1px solid var(--cst-blue);
  background-size: 21px;
}

.questionnaire-content .b-radio.radio input[type="radio"]:checked+.check {
  border: 2px solid red;
}

.questionnaire-content .b-radio.radio input[type="radio"]:checked+.check {
  border-color: #044161;
}

.questionnaire-content .b-radio.radio input[type="radio"]+.check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  width: 1.25em;
  height: 1.25em;
  -webkit-transition: background 0.15s ease-out;
  transition: background 0.15s ease-out;
  border-radius: 50%;
  border: 2px solid var(--cst-blue);
}

.questionnaire-content .b-radio.radio input[type="radio"]+.check {
  border: 2px solid var(--cst-blue);
  background-color: transparent;
}

.questionnaire-content .b-radio.radio input[type="radio"]:checked+.check:before {
  background: #044161;
  background-size: 21px;
}

.questionnaire-content .b-radio.radio input[type="radio"]:checked+.check:before {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}

.questionnaire-content .b-radio.radio input[type="radio"]+.check:before {
  content: "";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  left: 50%;
  margin-left: -0.625em;
  bottom: 50%;
  margin-bottom: -0.625em;
  width: 1.25em;
  height: 1.25em;
  -webkit-transition: -webkit-transform 0.15s ease-out;
  transition: -webkit-transform 0.15s ease-out;
  transition: transform 0.15s ease-out;
  transition: transform 0.15s ease-out, -webkit-transform 0.15s ease-out;
  border-radius: 50%;
  -webkit-transform: scale(0);
  transform: scale(0);
  background-color: #044161;
}

.questionnaire-content .b-radio.radio input[type="radio"] {
  position: absolute;
  left: 0;
  opacity: 0;
  outline: none;
  z-index: -1;
  display: none;
}

@media (max-width: 1000px) {
  .questionnaire-content .answers {
    flex: 0 1 100%;
  }

  .questionnaire-content .question {
    position: relative;
    color: #fff;
    padding-bottom: 0px;
    text-align: left;
    line-height: 24px;
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  #questionnaire {
    padding: 20px;
  }

  .questionnaire-content #wrap {
    padding: 20px;
  }

  .questionnaire-content .question,
  .questionnaire-content .description,
  .questionnaire-content .flexContainer,
  .questionnaire-content .flexItem {
    margin-left: 0;
  }

  /* .questionnaire-content #content,
  .questionnaire-content footer {
    background-color: #f3f7f8;
  }
  .questionnaire-content #wrap {
    padding: 0;
    border: none;
  }
  .questionnaire-content .container-flex {
    padding: 0 10px 0px 15px;
  }
  .questionnaire-content #qBox #welcome {
    padding: 0 1rem 0 1rem;
    text-align: left;
  }
  .questionnaire-content .question,
  .questionnaire-content .description,
  .questionnaire-content .flexContainer,
  .questionnaire-content .flexItem {
    padding: 0 0 10px 0;
    margin-left: 0;
  } */
}

/* MIS DETAIL */
#diagnosis_mkb10~label {
  top: 20px
}

/* MIS EMERGENCY APPEALS */
#emergency-appeals {
  padding: 0 20px;
}

.emergency-appeals {
  margin: auto;
  max-width: 1260px;
  color: #fff;
  background-color: var(--blue-bg-color);
  padding: 20px;
  border-radius: 30px;
}

.emergency-appeals__buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.emergency-appeals__buttons button {
  font-size: 16px;
  padding: 5px;
  min-width: 157px;
}

.emergency-appeals table {
  width: 100%;
}

.emergency-appeals table td {
  padding-right: 20px;
  padding-bottom: 10px;
}

#emergency-appeal-detail-modal-window .content__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#emergency-appeal-create-modal-window .fields-wrapper {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

#emergency-appeal-create-modal-window .field-wrapper {
  flex: 20%;
}

#emergency-appeal-create-modal-window .api-btn,
#emergency-appeal-update-modal-window .api-btn {
  padding-bottom: 10px;
}

@media (max-width: 768px) {
  #emergency-appeals {
    padding: 0;
  }

  .emergency-appeals table td {
    padding-right: 10px;
    font-size: 14px;
  }
}

/* MIS DISEASE HISTORY */
#disease-history {
  padding: 0 20px;
}

.disease-history {
  margin: auto;
  max-width: 1400px;
  color: #fff;
  background-color: var(--blue-bg-color);
  padding: 20px;
  border-radius: 30px;
}

.disease-history__buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.disease-history__buttons button {
  font-size: 16px;
  padding: 5px;
  min-width: 157px;
}

.disease-history table {
  width: 100%;
}

.disease-history table td {
  padding-right: 20px;
  padding-bottom: 10px;
}

#emergency-appeal-detail-modal-window .content__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#emergency-appeal-create-modal-window .fields-wrapper,
#emergency-appeal-update-modal-window .fields-wrapper {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

#emergency-appeal-create-modal-window .field-wrapper,
#emergency-appeal-update-modal-window .field-wrapper {
  flex: 20%;
}

#clinical_diagnosis__field select[multiple]~label,
#emergency-appeal-tags__field select[multiple]~label {
  top: 0;
}

#clinical_diagnosis__field select[multiple],
#emergency-appeal-tags__field select[multiple] {
  padding-top: 0;
}

@media (max-width: 768px) {
  #disease-history {
    padding: 0;
  }

  .disease-history table td {
    padding-right: 10px;
    font-size: 14px;
  }
}


/* MIS DOCUTMENT GENERATION */
#document-generation {
  padding: 0 20px;
}

#document-generation .content__wrapper {
  display: flex;
  flex-direction: column;
}

.document-generation {
  margin: auto;
  max-width: 960px;
  color: #fff;
  background-color: var(--blue-bg-color);
  padding: 20px;
  border-radius: 30px;
}


/* MIS PATIENT LIST */
#patient-list {
  padding: 0 20px;
}

.patient-list {
  margin: auto;
  max-width: 1260px;
  color: #fff;
  background-color: var(--blue-bg-color);
  padding: 20px;
  border-radius: 30px;
}

.patient-list__buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.patient-list__buttons button,
.patient-list__buttons a {
  font-size: 16px;
  padding: 5px;
  min-width: 157px;
  text-decoration: none;
}

.patient-list table {
  width: 100%;
  overflow-x: scroll;
}

.patient-list table .head_line__table {
  text-align: center;
}

.patient-list table td,
.patient-list table th {
  padding-right: 20px;
  padding-bottom: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--cst-blue);
}

.patient-list table td {
  font-size: 14px;
}

.patient-list table tr:first-child th {
  border: none;
}

.patient-list table td:nth-child(10),
.patient-list table td:nth-child(11),
.patient-list table td:nth-child(12),
.patient-list table td:nth-child(13),
.patient-list table td:nth-child(14) {
  min-width: 200px;
}

#patient-list-detail-modal-window .content__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#patient-list-create-modal-window .fields-wrapper {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

#patient-list-create-modal-window .field-wrapper {
  flex: 20%;
}

@media (max-width: 768px) {
  #patient-list {
    padding: 0;
  }

  .patient-list table td {
    padding-right: 10px;
    font-size: 14px;
  }
}

@media (max-width: 425px) {
  .patient-list__buttons {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
}

/* GOOGLE SEARCH */
#site-search {
  position: absolute;
  display: none;
  z-index: 1031;
  width: 100%;
}

#site-search .modal-content {
  background-color: black;
}

.gsc-completion-container table {
  color: black !important;
}

/* MIS TEMPLATES */

#content-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

#main-content {
  flex-basis: 0;
  flex-grow: 999;
  min-width: 40%;
}

#templates-content,
.templates-content {
  --offset: var(--space);
  flex-grow: 1;
  flex-basis: 35%;
  min-width: 300px;
  align-self: start;
  position: sticky;
  top: 80px;
  box-shadow: 1px 3px 10px 1px rgba(0, 0, 0, 0.1);
  margin-right: -1.5rem;
}

.templates-content {
  border-radius: 23px;
  border: solid 3px var(--cst-blue);
  padding: 15px 20px;
}

.templates-content span {
  color: #cfcece;
  cursor: pointer;
}

.templates-content a {
  color: #fff;
  cursor: pointer;
}

.component {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.component .content {
  max-height: calc(100vh - 330px);
  overflow-y: auto;
}

#templates-content .component,
.templates-content .component {
  max-height: calc(100vh - 330px);
}

#appointment-transcript .buttons {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 5px;
  gap: 16px;
}

#appointment-transcript .buttons i {
  font-size: 22px;
  color: var(--cst-blue);
  vertical-align: middle;
  cursor: pointer;
}

#appointment-transcript .buttons img {
  cursor: pointer;
}

#appointment-transcript .component .header {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  color: #fff;
  margin-bottom: 10px;
}

#appointment-transcript .content::-webkit-scrollbar {
  background: transparent;
  height: 8px;
  width: 16px;
  border-radius: 100px;
}

#appointment-transcript .content::-webkit-scrollbar-thumb {
  border: 3px solid var(--cst-blue);
  border-radius: 100px;
  padding: 10px;

}

#appointment-transcript .component .content .text {
  color: #fff;
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
  margin-bottom: 20px;
  background-color: #1f1f25;
  padding: 20px 10px 20px 20px;
  margin-right: 10px;
  border-radius: 10px;
}

#appointment-transcript .component .content .transcript {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#appointment-transcript .component .content .transcript .speaker {
  font-size: 12px;
}

#appointment-transcript .component .content .text._0 {
  background-color: var(--cst-blue);
}

@media (max-width: 1024px) {
  #content-container {
    flex-direction: column-reverse;
  }

  #templates-content,
  .templates-content {
    background: var(--blue-bg-color);
    flex-basis: 100%;
    min-width: 100%;
    top: 80px;
    margin-right: 0;
    align-self: stretch;
    max-height: calc(50vh - 100px);
  }

  .component .content {
    max-height: calc(30vh);
  }

}


/* SIGNATURES START */
.mis-content-wrapper {
  max-width: 1440px;
  margin: auto;
  color: #fff;
}

#certificates .add-button {
  margin-bottom: 20px;
}

#certificates .add-button a {
  padding: 5px 20px;
  min-width: 180px;
  font-size: 16px;
  border-radius: 40px;
  text-align: center;
  text-decoration: none;
}

.certificates {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.certificate {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  width: 400px;
  background: var(--blue-bg-color);
  border-radius: 20px;
  padding: 30px 25px;
}

.certificate span {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #fff;
}

.file-for-sign {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  width: 350px;
  background: var(--blue-bg-color);
  border-radius: 20px;
  padding: 30px 25px;
}

.file-for-sign-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.file-for-sign.checked {
  border: solid 1px var(--cst-blue) !important;
}

.file-for-sign__name,
.file-for-sign__signs {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #fff;
}

.file-for-sign__footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 5px;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #fff;
}

.file-for-sign__signs .fa-xmark {
  color: var(--cst-red)
}

.file-for-sign__signs .fa-check {
  color: green
}

#documents .signed-button {
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .certificates {
    flex-direction: column;
    align-items: center;
  }

  #certificates .add-button,
  #documents .signed-button {
    text-align: center;
  }
}

@media (max-width: 425px) {

  .certificate,
  .file-for-sign {
    width: unset;
    min-width: 280px;
  }
}

/* SIGNATURES END */

/* CONTACTS START */
#contacts {
  max-width: 1920px;
  padding: 0 90px;
  margin: auto;
  margin-top: 60px;
}

.clinics {
  display: flex;
  flex-direction: column;
}

.clinic {
  display: flex;
  flex-direction: row;
  padding: 40px;
  border: 3px solid var(--cst-blue);
  border-radius: 23px;
}

.clinic__info {
  display: flex;
  flex-direction: column;
  flex: 50%;
}

.clinic__info .name {
  display: flex;
  gap: 20px;
  font-size: 30px;
  font-weight: 700;
  line-height: 24px;
  color: #fff;
  margin-bottom: 20px;
}

.clinic__info .name .dot {
  margin: 0;
  margin-top: auto;
  margin-bottom: auto;
}

.clinic__info .address {
  font-size: 24px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  padding: 0;
  margin-bottom: 10px;
}

.clinic__info .additional-info {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  margin-bottom: 30px;
}

.clinic__info .opening-hours {
  font-size: 24px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  margin-bottom: 10px;
}

.clinic__info .phone {
  font-size: 24px;
  font-weight: 500;
  line-height: 24px;
  color: var(--cst-red);
  margin-bottom: 20px;
}

.clinic__info .phone a {
  text-decoration: unset;
  color: var(--cst-red);
  cursor: pointer;
}

.clinic__info .communication-methods {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  color: #fff;
  margin-bottom: 30px;
}

.clinic__info .communication-methods .icons img {
  width: 40px;
  height: 40px;
}

.clinic__info .buttons {
  display: flex;
  gap: 30px;
}

.clinic__info .buttons button,
.clinic__info .buttons a {
  min-width: 210px;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  border: 2px solid var(--cst-blue);
  text-decoration: unset;
  padding: 18px 10px;
}

.clinic__location {
  flex: 50%;
}

.clinic__location iframe {
  width: 100%;
  height: 100%;
}

#contact-form {
  max-width: 768px;
  padding: 0;
  margin: auto;
  margin-top: 60px;
  margin-bottom: 60px;
}

#contact-form form {
  max-width: 626px;
  margin: auto;
}

#contact-form h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
  color: #fff;
  margin-bottom: 40px;
}

#contact-form form span {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
}

#contact-form form input,
#contact-form form textarea,
#contact-form form select {
  margin-bottom: 24px;
  border-radius: 10px;
}

#contact-form form input:-webkit-autofill,
#contact-form form textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #696969 inset;
  -webkit-text-fill-color: black;
  /* Desired text color */
}

#contact-form form button {
  max-width: unset;
  width: 100%;
  width: Fill (626px)px;
  padding: 16px 32px 16px 32px;
  border-radius: 20px;
  border: 3px;
}

#contact-form .fields-wrapper {
  display: flex;
  gap: 20px
}

#contact-form .field-wrapper {
  width: 100%;
  padding: 0;
}

@media (max-width: 1440px) {
  #contacts {
    padding: 0 40px;
  }

  .clinic {
    padding: 15px;
  }

  .clinic__info,
  .clinic__location {
    padding: 10px;
  }

  .clinic__info .name {
    gap: 20px;
    font-size: 26px;
    line-height: 24px;
    margin-bottom: 20px;
  }

  .clinic__info .address {
    font-size: 20px;
    line-height: 20px;
  }

  .clinic__info .additional-info {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }

  .clinic__info .opening-hours {
    font-size: 20px;
    line-height: 20px;
  }

  .clinic__info .phone {
    font-size: 20px;
    line-height: 24px;
  }

  .clinic__info .communication-methods {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
  }

  .clinic__info .buttons button,
  .clinic__info .buttons a {
    min-width: 210px;
    font-size: 20px;
    line-height: 24px;
    padding: 10px 15px;
  }

  #contact-form {
    max-width: 626px;
    padding: 0;
    margin-top: 60px;
  }

  #contact-form h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    color: #fff;
    margin-bottom: 30px;
  }

  #contact-form form span {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #fff;
  }

  #contact-form form input,
  #contact-form form textarea {
    margin-bottom: 24px;
    border-radius: 10px;
  }

  #contact-form form button {
    max-width: unset;
    width: 100%;
    padding: 16px 32px 16px 32px;
    border-radius: 20px;
    border: 3px;
  }
}

@media (max-width: 1024px) {
  .clinic {
    flex-direction: column;
    padding: 15px;
  }

  .clinic__info,
  .clinic__location {
    padding: 10px;
  }

  .clinic__info .name {
    gap: 20px;
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 20px;
  }

  .clinic__info .address {
    font-size: 18px;
    line-height: 20px;
  }

  .clinic__info .additional-info {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
  }

  .clinic__info .opening-hours {
    font-size: 18px;
    line-height: 20px;
  }

  .clinic__info .phone {
    font-size: 18px;
    line-height: 24px;
  }

  .clinic__info .communication-methods {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
  }

  .clinic__info .buttons {
    flex-wrap: wrap;
  }

  .clinic__info .buttons button,
  .clinic__info .buttons a {
    min-width: 210px;
    font-size: 18px;
    line-height: 24px;
    padding: 10px 15px;
  }

  .clinic__location iframe {
    height: 400px;
  }

  #contact-form {
    max-width: 626px;
    padding: 0;
    margin-top: 60px;
  }

  #contact-form h1 {
    font-size: 30px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    color: #fff;
    margin-bottom: 30px;
  }

  #contact-form form span {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #fff;
  }

  #contact-form form input,
  #contact-form form textarea {
    margin-bottom: 24px;
    border-radius: 10px;
  }

  #contact-form form button {
    max-width: unset;
    width: 100%;
    padding: 14px 26px;
    border-radius: 20px;
    border: 3px;
  }
}

@media (max-width: 768px) {
  #contacts {
    padding: 0 20px;
    margin-top: 40px;
  }

  .clinic {
    padding: 5px;
  }

  .clinic__location iframe {
    height: 300px;
  }

  .clinic__info .name {
    gap: 20px;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 10px;
  }

  .clinic__info .address {
    font-size: 16px;
    line-height: 20px;
  }

  .clinic__info .additional-info {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
  }

  .clinic__info .opening-hours {
    font-size: 16px;
    line-height: 20px;
  }

  .clinic__info .phone {
    font-size: 16px;
    line-height: 24px;
  }

  .clinic__info .communication-methods {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }

  .clinic__info .buttons {
    gap: 15px;
  }

  .clinic__info .buttons button,
  .clinic__info .buttons a {
    min-width: 150px;
    font-size: 14px;
    line-height: 18px;
    padding: 10px 15px;
  }

  #contact-form {
    padding: 0 20px;
  }

  #contact-form h1 {
    font-size: 24px;
    margin-bottom: 15px;
  }

  #contact-form form button {
    min-width: unset;
    width: 100%;
    padding: 12px 20px;
    border-radius: 20px;
    border: 3px;
    font-size: 20px;
    max-width: 100%;
  }
}

@media (max-width: 425px) {
  .clinic__info .buttons {
    gap: 10px;
  }

  .clinic__info .buttons button,
  .clinic__info .buttons a {
    min-width: 150px;
    font-size: 14px;
    line-height: 18px;
    padding: 8px 10px;
  }
}

#doctors-with-qr {
  position: relative;
  max-width: 1040px;
  margin: auto;
}

#doctors-with-qr h1 {
  color: #fff;
  text-align: center;
  font-size: 82px;
  font-weight: 900;
  margin: 40px 0;
}

.doctors-with-qr {
  display: flex;
  max-width: 980px;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 25px;
}


.doctors-with-qr .doctor {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: calc(33.3% - 20px);
  max-width: calc(33.3% - 20px);
  box-sizing: border-box;
  background-image: url("/static/img/black_mramor_big.png");
  background-size: cover;
  padding: 20px 15px;
  margin: 10px;
  border-radius: 23px;
  gap: 10px;
  width: 290px;

}

.doctors-with-qr .doctor__images {
  display: flex;
  gap: 15px;
}

.doctors-with-qr .doctor__images .avatar,
.doctors-with-qr .doctor__images .avatar img {
  border-radius: 23px;
}

.doctors-with-qr .doctor__images .avatar,
.doctors-with-qr .doctor__images .qr-code {
  width: 128px;
}

.doctors-with-qr .doctor__images .avatar img,
.doctors-with-qr .doctor__images .qr-code img {
  width: 100%;
}

.doctors-with-qr .doctor__info {
  color: #fff;
}

.doctors-with-qr .doctor__info .fullname {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.doctors-with-qr .doctor__info .positions {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: #D9D9D9;
}

.doctors-with-qr .doctor__info .qualifications {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

/* CONTACTS END */

/* WORK WITH US START */
/* INFO */
#work-with-us--info,
#work-with-us--specialties,
#work-with-us--working-conditions {
  max-width: 1920px;
  margin: auto;
  margin-top: 80px;
  padding: 0 40px;
}

#work-with-us--info {
  margin-top: 0;
  padding-top: 80px;
  padding-bottom: 35px;
  border: 3px solid var(--cst-blue);
}

#work-with-us--info h1,
#work-with-us--specialties h1,
#work-with-us--working-conditions h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
  color: #fff;
  margin-bottom: 40px;
  max-width: 800px;
  margin: auto;
}

#work-with-us--info .description,
#work-with-us--specialties .description {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  max-width: 820px;
  color: #fff;
}

#work-with-us--info .btn button {
  min-width: 160px;
  font-size: 20px;
  border-radius: 20px;
  border: 2px;
  padding: 10px 20px;
}

#work-with-us--info .image {
  max-width: 460px;
}

#work-with-us--info .image img {
  width: 100%;
}

/* SPECIALTIES */
#work-with-us--specialties .specialties {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1024px;
  margin-top: 20px;
}

#work-with-us--specialties .specialty {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#work-with-us--specialties .specialty img {
  width: 100px;
  padding: 0 15px;
  margin: auto;
}

#work-with-us--specialties .specialty .name {
  color: #fff;
  font-size: 16px;
  text-align: center;
}

/* WORKING CONDITIONS */
#work-with-us--working-conditions .working-conditions {
  display: flex;
  flex-wrap: wrap;
  max-width: 1212px;
  gap: 40px;
  margin-top: 30px;
}

#work-with-us--working-conditions .working-condition {
  display: flex;
  gap: 30px;
  padding: 35px 20px;
  border-radius: 23px;
  border: 2px solid var(--cst-blue);
}

.working-condition.item-2,
.working-condition.item-3 {
  flex-direction: column;
  align-items: center;
}

.working-condition.item-1 {
  flex: calc(50% - 80px);
}

.working-condition.item-2,
.working-condition.item-3 {
  flex: calc(25% - 80px);
}

.working-condition.item-4 {
  flex: 100%;
}

.working-condition.item-5,
.working-condition.item-6 {
  flex: calc(50% - 40px);
}

.working-conditions__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.working-conditions__info .name {
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  color: #fff;
}

.working-conditions__info .description {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
}

.working-condition__image img {
  width: 145px;
}

.working-condition__image {
  align-self: center;
}

.custom-file-input {
  position: absolute;
  opacity: 0;
}

.file-field-imitator {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
}

#contact-form .file-field-imitator span {
  color: #828282;
  text-align: center;
}

#resume-file-field {
  margin-bottom: 20px;
}

@media (max-width: 768px) {

  #work-with-us--info h1,
  #work-with-us--specialties h1,
  #work-with-us--working-conditions h1 {
    font-size: 32px;
    line-height: 28px;
    margin-bottom: 20px;
  }

  #work-with-us--info {
    padding-top: 60px;
  }

  #work-with-us--specialties .specialty img {
    width: 80px;
  }

  #work-with-us--working-conditions .working-condition {
    gap: 20px;
    padding: 20px 20px;
  }

  .working-condition__image img {
    width: 110px;
  }
}

@media (max-width: 425px) {

  #work-with-us--info,
  #work-with-us--specialties,
  #work-with-us--working-conditions {
    padding: 0 20px;
  }

  #work-with-us--info {
    padding-top: 40px;
  }

  #work-with-us--info h1,
  #work-with-us--specialties h1,
  #work-with-us--working-conditions h1 {
    margin-bottom: 0px;
  }

  #work-with-us--specialties .specialty img {
    width: 80px;
  }

  #work-with-us--working-conditions .working-condition {
    gap: 20px;
    padding: 20px 20px;
  }

  .working-condition__image img {
    width: 80px;
  }
}

/* WORK WITH US END */

/* SUBSCRIPTION INFO PAGE START */
/* SUBSCRIPTION ADVANTAGES */
#subscription-advantages {
  padding: 0px 94px;
  margin-top: 80px;
  color: #fff;
}

#subscription-advantages .advantage {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 40px;
  border: 2px solid var(--cst-blue);
  border-radius: 16px;
  height: 100%;
}

#subscription-advantages .advantages--swiper {
  display: none;
}

#subscription-advantages .advantage-name {
  font-size: 31.25px;
  font-weight: 400;
  line-height: 32px;
}

#subscription-advantages .advantage-description {
  font-size: 17.3px;
  font-weight: 400;
  line-height: 21.6px;
}

#subscription-advantages .padding-wrapper {
  /* flex-grow: 1;
  flex-basis: 50%;
  max-width: 50%; */
  /* padding: 61px 88px; */
  box-sizing: border-box;
  width: calc((100% / 2) - (88px/2));
  margin-right: 88px;
  margin-bottom: 61px;
}

#subscription-advantages .padding-wrapper:nth-child(2n) {
  margin-right: 0;
}

/* SUBSCRIPTION BANNER */
#subscription-banner {
  margin-top: 40px;
}

#subscription-banner .banner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 25px 99px 33px 40px;
  background-color: #FBE1E0;
  border-radius: 16px;
}

#subscription-banner .banner-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 95px;
}

#subscription-banner .banner-image--inner {
  display: none;
}

#subscription-banner .banner-image.banner-image--outer {
  width: 220px;
  height: 220px;
}

#subscription-advantages .advantage-image img {
  max-width: 140px;
  max-height: 140px;
}

#subscription-banner .banner-image img {
  max-width: 220px;
  max-height: 220px;
}

#subscription-banner .banner .description {
  font-size: 31.38px;
  font-weight: 400;
  line-height: 32px;
  color: #000;
}

#subscription-banner .banner-info a {
  padding: 15px 40px;
  border-radius: 10px;
  color: #000;
  background-color: #FF8080;
}

#subscription-banner .banner-link {
  margin-bottom: 10px;
}

#subscription-banner .banner-link a {
  text-decoration: none;
}

#subscription-banner .banner-image {
  align-self: center;
}

/* SUBSCRIPTION REQUEST */
.subscription-request .patient-type {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.subscription-request .patient-type span {
  color: #fff;
  font-size: 18px;
}

@media (max-width: 1440px) {
  #subscription-advantages {
    padding: 0px 44px 0 44px;
  }

  #subscription-advantages .padding-wrapper {
    flex-grow: 1;
    flex-basis: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 20px 36px;
    margin: 0;
  }
}

@media (max-width: 1024px) {
  #subscription-advantages {
    padding: 0px 20px 0 20px;
  }

  #subscription-advantages .advantage {
    padding: 30px;
  }

  #subscription-advantages .advantage-name {
    font-size: 28px;
    line-height: 28px;
  }

  #subscription-advantages .advantage-description {
    font-size: 16px;
    line-height: 21.6px;
  }

  #subscription-banner .banner .description {
    font-size: 26px;
    line-height: 28px;
  }

}

@media (max-width: 768px) {
  #subscription-advantages {
    padding: 0;
  }

  #subscription-advantages .advantages--swiper {
    display: block;
  }

  #subscription-advantages .advantages--blocks {
    display: none;
  }

  #subscription-advantages .padding-wrapper {
    padding: 20px;
  }

  #subscription-advantages .advantage {
    flex-direction: column;
    padding: 20px;
    gap: 0;
  }

  #subscription-advantages .advantage-name {
    font-size: 24px;
    line-height: 24px;
  }

  #subscription-advantages .advantage-description {
    font-size: 14px;
    line-height: 21.6px;
  }

  #subscription-banner .banner {
    display: block;
    padding: 25px 40px;
    background-color: #FBE1E0;
    border-radius: 16px;
  }

  #subscription-banner .banner-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
  }

  #subscription-banner .banner-image--outer {
    display: none;
  }

  #subscription-banner .banner-image--inner {
    display: block;
  }

  #subscription-banner .banner .description {
    font-size: 22px;
    line-height: 20px;
  }

  #subscription-advantages .advantage-image img {
    max-width: 80px;
    max-height: 80px;
  }

  #subscription-banner .banner-image img {
    max-width: 140px;
    max-height: 140px;
  }

  #subscription-banner .banner-link a {
    text-decoration: none;
    display: block;
    text-align: center;
  }

  .subscription-request .patient-type span {
    font-size: 14px;
  }
}

/* SUBSCRIPTION INFO PAGE END */

/* SWIPER */
.swiper {
  width: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 0px !important;
}

.swiper-pagination-bullet {
  background: #fff !important;
}


/* SUBSCRIPTIONS PAGE START */
.subscriptions {
  margin: auto;
  max-width: 1224px;
}

.subscriptions .subscription {
  display: flex;
  justify-content: space-between;
  padding: 20px 10px 20px 10px;
  border-bottom: 1px solid rgba(244, 228, 252, 0.1);
}

.subscriptions .subscription__name {
  margin-top: auto;
  margin-bottom: auto;
}

.subscriptions .subscription__name a {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #fff;
}

.subscription__price-and-button {
  display: flex;
  gap: 20px
}

.subscriptions .subscription__price {
  align-self: flex-end;
  margin-top: auto;
  margin-bottom: auto;
}

.subscriptions .subscription__price span {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #fff;
}

.subscriptions .subscription__button {
  margin-top: auto;
  margin-bottom: auto;
}

.subscriptions .subscription__button a {
  display: block;
  min-width: 145px;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  padding: 8px 20px;
}


@media (max-width: 1440px) {
  .subscriptions {
    max-width: 1130px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 1024px) {
  .subscriptions {
    max-width: 1130px;
  }

  .subscriptions .subscription__name a {
    font-size: 20px;
    line-height: 28px;
  }

  .subscriptions .subscription__price span {
    font-size: 20px;
    line-height: 24px;
  }
}

@media (max-width: 768px) {
  .subscriptions {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 640px) {

  #subscriptions {
    padding: 10px;
  }

  .subscriptions {
    padding: 0;
  }

  .subscriptions .subscription {
    flex-direction: column;
  }

  .subscriptions .medical-service {
    flex-direction: column;
  }

  .subscriptions .subscription__name a {
    font-size: 16px;
    line-height: 28px;
  }

  .subscription__price-and-button {
    display: flex;
    justify-content: space-between;
    gap: 20px
  }

  .subscriptions .subscription__price {
    margin-bottom: unset;
  }

  .subscriptions .subscription__price span {
    font-size: 16px;
    line-height: 24px;
  }

  .subscriptions .subscription__button button,
  .subscriptions .subscription__button a {
    padding: 8px 15px;
    min-width: 100px;
    font-size: 14px;
    line-height: 17px;
  }
}

@media (max-width: 425px) {
  .subscriptions .subscription__button {
    min-width: unset;
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* SUBSCRIPTIONS PAGE END */