@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;700;900&display=swap");

header {
    height: 100px
}

.header-wrapper {
    gap: 30px
}

.header-wrapper .logo {
    gap: 10px;
    font-family: "Jost", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 100%;
    color: #FFFFFF;
    text-decoration: none
}

main {
    all: initial;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box
}

.main-wrapper {
    all: initial;
    display: flex;
    max-width: 80rem;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 80px;
    gap: 30px
}

.main-wrapper .breadcrumbs {
    align-self: flex-start;
    gap: 10px;
    font-family: "Jost", sans-serif;
    font-size: 18px
}

.main-wrapper .breadcrumbs a {
    line-height: 100%;
    transition: .5s all;
    text-decoration: none;
    color: #282639
}

.main-wrapper .breadcrumbs a:hover {
    color: #47C134
}

.main-wrapper .breadcrumbs span {
    line-height: 100%;
    color: #329423
}

.main-wrapper .breadcrumbs span a {
    color: #329423
}

.main-wrapper h2 {
    font-family: "Jost", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 100%;
    color: #282639;
    text-transform: uppercase;
    align-self: flex-start
}

.main-wrapper h3 {
    font-family: "Jost", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    text-transform: uppercase;
    color: #282639
}

.main-wrapper .card-wrapper {
    width: 100%;
    display: grid;
    gap: 30px;
    grid-template-columns: minmax(0, 880px) minmax(350px, 370px);
    justify-items: end
}

.main-wrapper .card-information {
    width: 100%;
    gap: 20px
}

.main-wrapper .card-information-title {
    gap: 30px
}

.main-wrapper .card-information-title .address {
    gap: 20px;
    font-family: "Jost", sans-serif;
    font-size: 18px;
    line-height: 100%;
    color: #282639
}

.main-wrapper .card-information-slider {
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    position: relative
}

.main-wrapper .card-information-slider .arrows {
    width: 95%;
    position: absolute;
    align-self: center;
    bottom: 6%
}

.main-wrapper .card-information-slider .white-next, .main-wrapper .card-information-slider .white-prev {
    width: 36px !important;
    height: 36px !important;
    background-color: rgba(255, 255, 255, .4)
}

.main-wrapper .card-information-slider .white-next::after, .main-wrapper .card-information-slider .white-prev::after {
    content: " ";
    width: 7px !important;
    height: 12px !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.main-wrapper .card-information-slider .white-next::after {
    background-image: url(../images/arrow-next-green.svg)
}

.main-wrapper .card-information-slider .white-prev::after {
    background-image: url(../images/arrow-prev-green.svg)
}

.main-wrapper .card-information-slider .green-next, .main-wrapper .card-information-slider .green-prev {
    width: 32px !important;
    height: 32px !important;
    background-color: #329423
}

.main-wrapper .card-information-slider .green-next::after, .main-wrapper .card-information-slider .green-prev::after {
    content: " ";
    width: 7px !important;
    height: 12px !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.main-wrapper .card-information-slider .green-next::after {
    background-image: url(../images/arrow-right-white.svg)
}

.main-wrapper .card-information-slider .green-prev::after {
    background-image: url(../images/arrow-left-white.svg)
}

.main-wrapper .card-information-slider .mySwiper2 {
    width: 100%;
    height: -moz-fit-content;
    height: fit-content
}

.main-wrapper .card-information-slider .mySwiper2 .swiper-wrapper {
    max-width: 880px;
    max-height: 520px !important
}

.main-wrapper .card-information-slider .mySwiper2 .swiper-wrapper .swiper-slide {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden
}

.main-wrapper .card-information-slider .mySwiper2 .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: 100%
}

.main-wrapper .card-information-slider .mySwiper {
    margin-top: 20px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 75%;
    align-self: center
}

.main-wrapper .card-information-slider .mySwiper .swiper-wrapper {
    max-width: 684px;
    max-height: 100%;
}

.main-wrapper .card-information-slider .mySwiper .swiper-wrapper .swiper-slide {
    border-radius: 20px;
    overflow: hidden;
    margin-right: 13px;


}

.main-wrapper .card-information-slider .mySwiper .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: 100%
}

.main-wrapper .card-information-slider .mySwiper .swiper-wrapper .swiper-slide-thumb-active {
    border: 2px solid #329423
}

.main-wrapper .card-information-description {
    margin-top: 10px;
    width: 100%;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #E8E8E8;
    gap: 20px
}

.main-wrapper .card-information-description .rooms {
    gap: 22px
}

.main-wrapper .card-information-description .rooms p {
    font-family: "Jost", sans-serif;
    font-size: 18px;
    line-height: 100%;
    color: #8A8A8F;
    font-style: italic;
    text-align: center
}

.main-wrapper .card-information-description .rooms .floor {
    font-style: normal
}

.main-wrapper .card-information-description .status {
    gap: 20px
}

.main-wrapper .card-information-description .text {
    width: 100%;
    height: 84px
}

.main-wrapper .card-information-description .text-information {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-family: "Jost", sans-serif;
    font-size: 16px;
    line-height: 130%;
    color: #282639
}

.main-wrapper .card-information-description .text-information.all {
    display: block;
    overflow: visible;
    height: -moz-fit-content;
    height: fit-content
}

.main-wrapper .card-information-description .text .watch-all {
    font-family: "Jost", sans-serif;
    font-size: 16px;
    line-height: 130%;
    color: #329423;
    transition: .5s all;
    cursor: pointer;
    align-self: flex-end
}

.main-wrapper .card-information-description .text .watch-all:hover {
    color: #47C134
}

.main-wrapper .card-information-description .text.all {
    height: -moz-fit-content;
    height: fit-content
}

.main-wrapper .card-information-description .beds {
    gap: 5px;
    font-family: "Jost", sans-serif;
    color: #282639
}

.main-wrapper .card-information-description .beds h3 {
    font-weight: 500;
    font-size: 18px;
    line-height: 100%
}

.main-wrapper .card-information-description .beds p {
    font-size: 16px;
    line-height: 130%
}

.main-wrapper .card-information-description .beds div {
    flex-wrap: wrap
}

.main-wrapper .card-information-recommend, .main-wrapper .card-information-service, .main-wrapper .card-information-best {
    width: 100%;
    padding: 18px 30px;
    gap: 15px;
    border-radius: 20px;
    border: 1px solid #7ED648
}

.main-wrapper .card-information-recommend img, .main-wrapper .card-information-service img, .main-wrapper .card-information-best img {
    width: 36px;
    height: auto
}

.main-wrapper .card-information-recommend p, .main-wrapper .card-information-service p, .main-wrapper .card-information-best p {
    font-family: "Jost", sans-serif;
    font-size: 18px;
    line-height: 100%;
    color: #282639
}

.main-wrapper .card-information-recommend p span, .main-wrapper .card-information-service p span, .main-wrapper .card-information-best p span {
    font-weight: 700
}

.main-wrapper .card-information-service {
    border: 1px solid #FBDC03
}

.main-wrapper .card-information-service img {
    width: 39px
}

.main-wrapper .card-information-best {
    border: 1px solid #039BE5
}

.main-wrapper .card-information-best img {
    width: 36px
}

.main-wrapper .card-information-rooles {
    gap: 20px;
    padding: 30px;
    border: 1px solid #E8E8E8;
    border-radius: 20px
}

.main-wrapper .card-information-rooles .time {
    flex-wrap: wrap;
    -moz-column-gap: 30px;
    column-gap: 30px;
    row-gap: 15px
}

.main-wrapper .card-information-rooles .time-item {
    gap: 8px;
    font-family: "Jost", sans-serif;
    font-size: 18px;
    line-height: 100%;
    color: #282639
}

.main-wrapper .card-information-rooles .time-item h3 {
    font-style: italic;
    color: #8A8A8F;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400
}

.main-wrapper .card-information-rooles .rooles-description {
    gap: 50px
}

.main-wrapper .card-information-rooles .rooles-description .can, .main-wrapper .card-information-rooles .rooles-description .dont {
    gap: 25px;
    max-width: 322px;
    width: 100%
}

.main-wrapper .card-information-rooles .rooles-description .can-child, .main-wrapper .card-information-rooles .rooles-description .can-smoke, .main-wrapper .card-information-rooles .rooles-description .can-pets, .main-wrapper .card-information-rooles .rooles-description .can-music, .main-wrapper .card-information-rooles .rooles-description .dont-child, .main-wrapper .card-information-rooles .rooles-description .dont-smoke, .main-wrapper .card-information-rooles .rooles-description .dont-pets, .main-wrapper .card-information-rooles .rooles-description .dont-music {
    gap: 10px;
    font-family: "Jost", sans-serif;
    font-size: 18px;
    line-height: 100%;
    color: #282639
}

.main-wrapper .card-information-rooles .deposit {
    width: 100%;
    padding: 20px 25px;
    background: #F8F8F8;
    border: 1px solid #E8E8E8;
    border-radius: 20px;
    gap: 30px;
    font-family: "Jost", sans-serif;
    font-size: 18px;
    line-height: 100%;
    color: #282639;
    position: relative
}

.main-wrapper .card-information-rooles .deposit-price {
    font-weight: 500
}

.main-wrapper .card-information-rooles .deposit .help-red {
    width: 24px;
    height: auto;
    margin-left: -15px
}

.main-wrapper .card-information-rooles .deposit-help {
    position: absolute;
    max-width: 370px;
    width: 100%;
    background-color: #FFFFFF;
    left: 180px;
    top: 78%;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 3px 3px 16px rgba(0, 0, 0, .1);
    font-family: "Jost", sans-serif;
    font-size: 16px;
    line-height: 130%;
    color: #282639;
    z-index: 1;
    display: none
}

.main-wrapper .card-information-rooles .deposit-help::after {
    content: " ";
    display: block;
    width: 22px;
    height: 19px;
    background-color: #FFFFFF;
    position: absolute;
    right: 20px;
    top: -15px;
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    box-shadow: inherit
}

.main-wrapper .card-information-rooles .deposit-help:hover {
    display: block
}

.main-wrapper .card-information-map {
    width: 100%;
    gap: 20px;
    padding: 30px;
    border: 1px solid #E8E8E8;
    border-radius: 20px
}

.main-wrapper .card-information-map #map-wrapper {
    width: 100%;
    height: 280px;
    border-radius: 20px;
    overflow: hidden
}

.main-wrapper .card-information-comfort {
    width: 100%;
    gap: 25px;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #E8E8E8
}

.main-wrapper .card-information-comfort .comfort-items {
    justify-content: space-between;
    width: 100%;
    row-gap: 25px;
    -moz-column-gap: 25px;
    column-gap: 25px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 190px))
}

.main-wrapper .card-information-comfort .comfort-items-wifi, .main-wrapper .card-information-comfort .comfort-items-towel, .main-wrapper .card-information-comfort .comfort-items-tv, .main-wrapper .card-information-comfort .comfort-items-isolation, .main-wrapper .card-information-comfort .comfort-items-hairdryer, .main-wrapper .card-information-comfort .comfort-items-linen, .main-wrapper .card-information-comfort .comfort-items-conditioner, .main-wrapper .card-information-comfort .comfort-items-balcony, .main-wrapper .card-information-comfort .comfort-items-microwave, .main-wrapper .card-information-comfort .comfort-items-electric-kettle, .main-wrapper .card-information-comfort .comfort-items-free-parking, .main-wrapper .card-information-comfort .comfort-items-washing-machine {
    gap: 10px;
    font-family: "Jost", sans-serif;
    font-size: 18px;
    line-height: 100%;
    color: #282639
}

.main-wrapper .card-information-reviews {
    width: 100%;
    padding: 35px 30px;
    border-radius: 20px;
    border: 1px solid #E8E8E8;
    gap: 30px
}

.main-wrapper .card-information-reviews-title {
    width: 100%;
    font-family: "Jost", sans-serif;
    font-size: 20px;
    font-style: italic;
    color: #282639;
    line-height: 100%
}

.main-wrapper .card-information-reviews-title div {
    gap: 20px
}

.main-wrapper .card-information-reviews-title div .card-house-title-rating-mark {
    font-style: normal
}

.main-wrapper .card-information-reviews-wrapper {
    width: 100%;
    gap: 40px
}

.main-wrapper .card-information-reviews-wrapper .review {
    width: 100%;
    gap: 15px
}

.main-wrapper .card-information-reviews-wrapper .review-title {
    width: 100%;
    gap: 10px
}

.main-wrapper .card-information-reviews-wrapper .review-title-text {
    gap: 5px;
    width: 100%;
    font-family: "Jost", sans-serif;
    color: #282639;
    line-height: 100%
}

.main-wrapper .card-information-reviews-wrapper .review-title-text-up {
    gap: 5px
}

.main-wrapper .card-information-reviews-wrapper .review-title-text-up .name {
    font-weight: 700;
    font-size: 18px
}

.main-wrapper .card-information-reviews-wrapper .review-title-text-up .rating {
    gap: 5px;
    font-weight: 500;
    font-size: 16px
}

.main-wrapper .card-information-reviews-wrapper .review-title-text-up .rating .time {
    font-family: "Jost", sans-serif;
    font-size: 15px;
    line-height: 100%;
    color: #8A8A8F;
    font-weight: 400;
    margin-left: 5px
}

.main-wrapper .card-information-reviews-wrapper .review-title-text-down {
    width: 100%;
    font-family: "Jost", sans-serif;
    font-size: 15px;
    line-height: 100%;
    color: #8A8A8F
}

.main-wrapper .card-information-reviews-wrapper .review-title-text-down .left {
    gap: 25px
}

.main-wrapper .card-information-reviews-wrapper .review-title-text-down .left .data, .main-wrapper .card-information-reviews-wrapper .review-title-text-down .left .guest {
    gap: 6px
}

.main-wrapper .card-information-reviews-wrapper .review-title-text-down .time {
    align-self: flex-end
}

.main-wrapper .card-information-reviews-wrapper .review-text {
    gap: 10px;
    font-family: "Jost", sans-serif;
    font-size: 16px;
    line-height: 130%;
    color: #282639
}

.main-wrapper .card-information-reviews-wrapper .review-text .like, .main-wrapper .card-information-reviews-wrapper .review-text .dislike {
    gap: 25px
}

.main-wrapper .card-booking {
    width: 100%;
    gap: 30px
}

.main-wrapper .card-booking .links {
    width: 100%;
    gap: 20px
}

.main-wrapper .card-booking-wrapper {
    width: 100%;
    padding: 0 30px;
    padding-top: 40px;
    padding-bottom: 30px;
    background-color: #F8F8F8;
    border: 1px solid #E8E8E8;
    border-radius: 20px;
    gap: 15px
}

.main-wrapper .card-booking-wrapper-data {
    width: 100%;
    gap: 15px
}

.main-wrapper .card-booking-wrapper-data .up {
    width: 100%;
    gap: 20px
}

.main-wrapper .card-booking-wrapper-data .enter, .main-wrapper .card-booking-wrapper-data .exit, .main-wrapper .card-booking-wrapper-data .people {
    max-width: 150px;
    width: 100%;
    height: 42px;
    background-color: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 6px;
    padding-left: 10px;
    color: #282639;
    font-family: "Jost", sans-serif;
    font-size: 18px;
    line-height: 100%;
    cursor: pointer
}

.main-wrapper .card-booking-wrapper-data .enter .day, .main-wrapper .card-booking-wrapper-data .exit .day, .main-wrapper .card-booking-wrapper-data .people .day {
    color: #8A8A8F;
    margin-left: 5px
}

.main-wrapper .card-booking-wrapper-data .people {
    max-width: none;
    gap: 5px;
    position: relative
}

.main-wrapper .card-booking-wrapper-data .people .children {
    color: #8A8A8F
}

.main-wrapper .card-booking-wrapper-data .people img {
    width: 14px;
    height: 7px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 18px
}

.main-wrapper .card-booking-wrapper-ok {
    width: 100%;
    gap: 15px;
    position: relative
}

.main-wrapper .card-booking-wrapper-ok .booking-help {
    position: absolute;
    max-width: 370px;
    width: 100%;
    background-color: #FFFFFF;
    right: -7%;
    top: 78%;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 3px 3px 16px rgba(0, 0, 0, .1);
    font-family: "Jost", sans-serif;
    font-size: 16px;
    line-height: 130%;
    color: #282639;
    z-index: 1;
    display: none
}

.main-wrapper .card-booking-wrapper-ok .booking-help::after {
    content: " ";
    display: block;
    width: 22px;
    height: 19px;
    background-color: #FFFFFF;
    position: absolute;
    right: 20px;
    top: -15px;
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    box-shadow: inherit
}

.main-wrapper .card-booking-wrapper-ok .booking-help:hover {
    display: block
}

.main-wrapper .card-booking-wrapper-ok.hidden {
    display: none
}

.main-wrapper .card-booking-wrapper-wrong {
    width: 100%;
    gap: 300px
}

.main-wrapper .card-booking-wrapper-wrong .alert {
    text-align: center;
    width: 100%;
    margin-top: 15px;
    border-radius: 6px;
    background-color: rgba(255, 0, 0, .05);
    padding: 15px 20px;
    gap: 10px;
    font-family: "Jost", sans-serif;
    line-height: 100%
}

.main-wrapper .card-booking-wrapper-wrong .alert img {
    width: 24px;
    height: 24px
}

.main-wrapper .card-booking-wrapper-wrong .alert h3 {
    font-weight: 500;
    font-size: 16px;
    color: #FF0000;
    text-transform: none
}

.main-wrapper .card-booking-wrapper-wrong .alert span {
    font-style: italic;
    font-size: 15px;
    color: #8A8A8F
}

.main-wrapper .card-booking-wrapper-wrong button {
    width: 100%
}

.main-wrapper .card-booking-wrapper-wrong button:disabled {
    cursor: auto;
    background-color: #E8E8E8;
    color: #F8F8F8
}

.main-wrapper .card-booking-wrapper-wrong button:disabled:hover {
    background-color: #E8E8E8;
    color: #F8F8F8
}

.main-wrapper .card-booking-wrapper-wrong.hidden {
    display: none
}

.main-wrapper .card-booking-wrapper-price {
    width: 100%;
    gap: 10px
}

.main-wrapper .card-booking-wrapper-price .price-item {
    gap: 15px;
    width: 100%;
    font-family: "Jost", sans-serif;
    color: #282639;
    font-size: 18px;
    line-height: 100%;
    padding-bottom: 10px;
    border-bottom: rgba(138, 138, 143, .5) dashed 1px
}

.main-wrapper .card-booking-wrapper-price .price-item div {
    gap: 20px
}

.main-wrapper .card-booking-wrapper-price .price-item div .discount {
    min-width: 48px;
    color: #FF0000;
    font-size: 16px;
    text-decoration: line-through
}

.main-wrapper .card-booking-wrapper-price .price-item.remains p {
    width: 100%
}

.main-wrapper .card-booking-wrapper-price .price-item.remains div {
    gap: 52px
}

.main-wrapper .card-booking-wrapper-price .price-item.remains div svg {
    width: 16px;
    height: 16px
}

.main-wrapper .card-booking-wrapper-total {
    width: 100%;
    gap: 20px;
    font-family: "Jost", sans-serif;
    line-height: 100%;
    color: #282639
}

.main-wrapper .card-booking-wrapper-total-left {
    gap: 5px
}

.main-wrapper .card-booking-wrapper-total-left h3 {
    width: 100%;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 500
}

.main-wrapper .card-booking-wrapper-total-left p {
    font-style: italic;
    font-size: 15px;
    color: #8A8A8F;
    width: 100%;
}

.main-wrapper .card-booking-wrapper-total-price {
    font-weight: 700;
    font-size: 20px
}

.main-wrapper .card-booking-wrapper-phone {
    gap: 5px;
    font-family: "Jost", sans-serif;
    color: #282639;
    font-size: 16px;
    line-height: 100%
}

.main-wrapper .card-booking-wrapper-phone input {
    width: 100%;
    padding: 0 10px;
    background-color: #FFFFFF;
    border-radius: 6px;
    border: 1px solid #E8E8E8;
    color: #282639;
}

.main-wrapper .card-booking-wrapper-phone input::-webkit-input-placeholder {
    color: #bbb;
}
.main-wrapper .card-booking-wrapper-phone input::-moz-placeholder {
    color: #bbb;
}
.main-wrapper .card-booking-wrapper-phone input:-moz-placeholder {
    color: #bbb;
}
.main-wrapper .card-booking-wrapper-phone input:-ms-input-placeholder {
    color: #bbb;
}

.main-wrapper .card-booking-wrapper-phone span {
    color: #8A8A8F;
    font-size: 15px;
    font-style: italic
}

.main-wrapper .card-booking-wrapper-icons {
    gap: 10px
}

.main-wrapper .card-booking-wrapper-icons .left {
    gap: 8px;
    font-family: "Jost", sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 100%;
    color: #282639
}

.main-wrapper .card-booking-wrapper-icons .left div {
    gap: 10px
}

.main-wrapper .card-booking-wrapper-icons svg {
    align-self: flex-end;
    width: 22px;
    height: 22px
}

.main-wrapper .card-booking-wrapper-button {
    width: 100%;
    gap: 15px
}

.main-wrapper .card-booking-wrapper-button p {
    text-align: center;
    font-family: "Jost", sans-serif;
    color: #8A8A8F;
    font-size: 14px;
    line-height: 100%;
    font-style: italic
}

.main-wrapper .card-booking-wrapper-button p a {
    color: #8A8A8F
}

.main-wrapper .card-booking-wrapper-button button {
    width: 100%
}

.main-wrapper .booking-line {
    width: 100%;
    /*padding: 20px 40px;
    background: #329423 url(../images/background-grid.svg);
    background-size: 45%;
    border-radius: 40px;*/
    position: relative;
}
.main-wrapper .booking-line-wrap {
    width: 100%;
    padding: 20px 40px;
    background: #329423 url(../images/background-grid.svg);
    background-size: 45%;
    border-radius: 40px;
    position: relative;
}
.stickyАFake{
    display: block;
    width: 100%;
    height: 82px;
}
.stickyАFake.none{
    display: none;
}
.main-wrapper .booking-line.sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    border-radius: 0;
    width: 100%;
}
.main-wrapper .booking-line.sticky .booking-line-wrap {
    border-radius: 0;

}
.blWrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/*.main-wrapper .booking-line::after {
    content: " ";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    top: 0;
    left: 0;
    background: rgba(50, 148, 35, .7) radial-gradient(50% 50% at 50% 50%, #53D743 0%, rgba(83, 215, 67, 0) 100%)
}*/
.main-wrapper .booking-line-wrap::after {
    content: " ";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    top: 0;
    left: 0;
    background: rgba(50, 148, 35, .7) radial-gradient(50% 50% at 50% 50%, #53D743 0%, rgba(83, 215, 67, 0) 100%)
}

.main-wrapper .booking-line-left {
    gap: 40px;
    font-family: "Jost", sans-serif;
    position: relative;
    z-index: 1
}

.main-wrapper .booking-line-left h4 {
    font-size: 20px;
    font-weight: 700;
    line-height: 100%;
    color: #FFFFFF
}

.main-wrapper .booking-line-left p {
    font-size: 20px;
    line-height: 100%;
    text-transform: uppercase;
    color: #FFFFFF
}

.main-wrapper .booking-line-left p span {
    font-weight: 700
}

.main-wrapper .booking-line .btn-booking {
    position: relative;
    z-index: 1;
    width: 240px
}

.start-now {
    margin-top: 0
}

.pop-up-map {
    max-width: 630px;
    width: 100%;
    height: 480px;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(232, 232, 232, .4);
    position: relative;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 112;
    background: linear-gradient(155.53deg, rgba(205, 205, 205, .4666666667) 4.05%, rgba(255, 255, 255, 0) 107.7%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    filter: drop-shadow(3px 3px 16px rgba(0, 0, 0, .4));
    gap: 20px;
    align-items: center
}

@media (max-width: 1023px) {
    .pop-up-map {
        top: 36%;
    }
}

.pop-up-map-cross {
    position: absolute;
    right: 30px
}

.pop-up-map h3 {
    color: #FFFFFF;
    font-size: 24px;
    font-family: "Jost", sans-serif;
    font-weight: 700;
    line-height: 100%;
    text-transform: uppercase;
    margin-top: 42px
}

.pop-up-map #map-pop-up {
    width: 100%;
    height: 334px;
    border-radius: 20px;
    overflow: hidden
}

.pop-up-map.hidden {
    display: none
}

.card-booking-wrapper-icons:has(.help-red:hover) .booking-help {
    display: block
}

.card-information-rooles .deposit:has(.help-red:hover) .deposit-help {
    display: block
}

.swiper-button-next, .swiper-button-prev {
    z-index: 8 !important
}

@media (max-width: 1023px) {
    header {
        height: 60px
    }

    .main-wrapper .card-wrapper {
        grid-template-columns: minmax(0, 1fr)
    }

    .main-wrapper .card-wrapper .card-information-rooles .rooles-description {
        gap: 20px
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    main {
        padding: 0 60px
    }
}

@media (max-width: 768px) {
    .booking-line-left{
        margin-bottom: 15px;
    }
    .booking-line-left h4{
        display: none;
    }
    .blWrap{
        display: block;
        text-align: center;
    }
    .main-wrapper .card-information-comfort .comfort-items {
        grid-template-columns: repeat(2, minmax(0, 190px))
    }

    /*.main-wrapper .booking-line {
        height: -moz-fit-content;
        height: fit-content;
        flex-direction: column;
        padding: 25px 30px;
        gap: 20px;
        justify-content: center
    }*/

    .main-wrapper .booking-line-wrap {
        height: -moz-fit-content;
        height: fit-content;
        flex-direction: column;
        padding: 25px 30px;
        gap: 20px;
        justify-content: center
    }

    .main-wrapper .booking-line-left {
        flex-direction: column;
        gap: 20px
    }
}

@media (max-width: 659px) {
    .main-wrapper .card-information-rooles .deposit-help {
        left: unset;
        right: 1%
    }
}

@media (max-width: 460px) {
    .main-wrapper .card-information-comfort .comfort-items {
        grid-template-columns: minmax(0, 190px)
    }
}

@media (max-width: 428px) {
    .main-wrapper h3 {
        font-size: 20px
    }

    .main-wrapper .card-information-title {
        flex-wrap: wrap
    }

    .main-wrapper .card-information-slider .mySwiper {
        margin-top: 10px
    }

    .main-wrapper .card-information-slider .mySwiper .swiper-wrapper .swiper-slide {
        border-radius: 10px
    }

    .main-wrapper .card-information-slider .green-next, .main-wrapper .card-information-slider .green-prev {
        width: 25px !important;
        height: 25px !important
    }

    .main-wrapper .card-information-slider .white-next, .main-wrapper .card-information-slider .white-prev {
        width: 30px !important;
        height: 30px !important
    }

    .main-wrapper .card-information-slider .arrows {
        width: 100%;
        bottom: 4%
    }

    .main-wrapper .card-information-description {
        padding: 30px 10px
    }

    .main-wrapper .card-information-description .rooms {
        gap: 8px
    }

    .main-wrapper .card-information-description .rooms p {
        font-size: 16px
    }

    .main-wrapper .card-information-description .status {
        -moz-column-gap: 20px;
        column-gap: 20px;
        row-gap: 5px;
        flex-wrap: wrap
    }

    .main-wrapper .card-information-recommend, .main-wrapper .card-information-service, .main-wrapper .card-information-best {
        padding: 20px 10px
    }

    .main-wrapper .card-information-recommend img, .main-wrapper .card-information-service img, .main-wrapper .card-information-best img {
        align-self: flex-start
    }

    .main-wrapper .card-information-rooles {
        padding: 30px 10px
    }

    .main-wrapper .card-information-rooles .rooles-description {
        flex-wrap: wrap
    }

    .main-wrapper .card-information-rooles .deposit {
        padding: 20px 10px;
        gap: 20px;
        position: relative
    }

    .main-wrapper .card-information-rooles .deposit svg {
        position: absolute;
        bottom: 12px;
        right: 10px
    }

    .main-wrapper .card-information-rooles .deposit-help {
        top: 100%;
        right: -10px
    }

    .main-wrapper .card-information-reviews {
        padding: 35px 10px
    }

    .main-wrapper .card-information-map {
        padding: 30px 10px
    }

    .main-wrapper .card-information-comfort {
        padding: 30px 10px
    }

    .main-wrapper .card-booking-wrapper {
        padding: 30px 20px
    }

    .main-wrapper .card-booking-wrapper-price .price-item {
        font-size: 16px
    }

    .main-wrapper .card-booking-wrapper-price .price-item p {
        max-width: 100px
    }

    .main-wrapper .card-booking-wrapper-price .price-item div .discount {
        font-size: 14px;
        min-width: 41px
    }

    .main-wrapper .card-booking-wrapper-price .price-item.remains p {
        max-width: none
    }

    .main-wrapper .card-booking-wrapper-price .price-item.remains div {
        gap: 47px
    }

    .main-wrapper .card-booking-wrapper-icons {
        gap: 0
    }
}