:root {
    --color-primary: #e200e2;
    --color-text-secondary: rgb(108, 0, 108);
    --color-text-third: #707070;
    --color-primary-background: hsla(300, 100%, 44%, 0.15);
    --color-sub-title: #686868;
    --color-black: #000000;
    --color-white: #ffffff;
    --section-padding: 12rem calc(2rem + 2vw) 0;
}
.close,
.dots-wrapper,
.language,
.user,
button {
    cursor: pointer;
}
a {
    text-decoration: none;
    color: inherit;
}
ol,
ul {
    list-style: none;
}
*,
::after,
::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
    -webkit-tap-highlight-color: #fff0;
}
:root {
    --base-font-size: 62.5%;
    --content-scale: 1.6;
}
html {
    font-size: var(--base-font-size);
    scroll-behavior: smooth;
}
body {
    overflow-x: hidden;
    min-width: 380px;
    position: relative;
    margin: 0 auto;
    font-family: "Poppins", sans-serif;
}
.hero {
    padding: 6rem calc(2rem + 4vw) 0;
}
.hero .ctawrp .recent-destinations {
    max-width: 910px;
    margin: 8rem auto 0;
    display: flex;
    align-items: center;
    gap: 2.2rem;
    flex-wrap: wrap;
    padding: 0 2.2rem;
}
.hero .ctawrp .recent-destinations p {
    position: relative;
    font-size: 1.6rem;
    font-weight: 400;
    color: #454545;
    margin: 0;
    flex-shrink: 0;
}
.hero .ctawrp .recent-destinations .recent-destinations-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    color: var(--color-text-secondary);
    max-width: 100%;
}
.hero .ctawrp .recent-destinations .recent-destinations-list .item {
    font-size: 1.4rem;
    font-weight: 500;
    padding: 0.5rem 1.6rem;
    border-radius: 4rem;
    background-color: #e200e21a;
}
@media (max-width: 540px) {
    .hero .ctawrp .recent-destinations .recent-destinations-list {
        font-size: 1.7rem;
    }
}
.hero .ctawrp .recent-destinations .recent-destinations-icon {
    position: absolute;
    left: -11%;
    bottom: 56%;
}
.hero .ctawrp .recent-destinations ul {
    font-size: 2rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.hero .ctawrp .recent-destinations .destination a {
    display: inline-block;
}
.hero .ctawrp .recent-destinations .destination a:hover {
    color: var(--color-primary);
}
@media (max-width: 590px) {
    .hero .ctawrp .recent-destinations {
        gap: 1rem;
        padding: 0;
        margin-top: 7rem;
    }
    .hero .ctawrp .recent-destinations p {
        font-size: 1.4rem;
    }
    .hero .ctawrp .recent-destinations .recent-destinations-icon {
        width: 18px;
        height: 18px;
        left: -20px;
    }
    .hero .ctawrp .recent-destinations ul {
        font-size: 1.6rem;
    }
    .hero .ctawrp .recent-destinations .recent-destinations-list .item {
        font-size: 1.2rem;
        font-weight: 600;
    }
}
.hero .wrapper {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 1rem;
}
.hero .wrapper .ttwrp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4rem;
}
@media (max-width: 740px) {
    .hero {
        padding-top: 4rem;
    }
    .hero .wrapper {
        gap: 2rem;
        grid-template-columns: 110%;
    }
    .hero .wrapper .ttwrp {
        gap: 5px;
        width: 92%;
    }
}
.hero .wrapper .ttwrp .tt {
    font-size: 4.4rem;
    font-weight: 600;
    color: var(--color-black);
    line-height: 1.2;
}
@media (max-width: 590px) {
    .hero .wrapper .ttwrp .tt {
        font-weight: 700;
        line-height: 1.3;
        font-size: 3.4rem;
    }
}
.hero .wrapper .ttwrp .tt .hlfir {
    color: var(--color-text-secondary);
}
.hero .wrapper .ttwrp .subtt {
    margin-top: 1rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-sub-title);
}
.hero .wrapper .imgwrp {
    display: none;
}
.hero .ctawrp {
    margin-top: 4rem;
}
.hero .ctawrp .wrpcnt {
    max-width: 910px;
    margin: 4.2rem auto 0;
    gap: 6rem;
}
@media (max-width: 740px) {
    .hero .ctawrp .wrpcnt {
        margin: 2.6rem auto 0;
    }
}
.hero .ctawrp .wrpcnt .tt {
    font-size: 3.6rem;
    font-weight: 300;
}
.hero .ctawrp .wrpcnt .actions {
    display: flex;
    gap: 3rem;
    flex-direction: column;
}
.hero .ctawrp .wrpcnt .actions .acwrp {
    position: relative;
    align-self: flex-start;
}

#destinationTrigger {
    width: 100%;
}
#calendarTrigger {
    width: 100%;
}

#destinationTrigger::after {
    content: "";
    background-color: #777777;
    position: absolute;
    bottom: -1rem;
    left: 0;
    width: 100%;
    height: 1px;
}
#calendarTrigger::after {
    content: "";
    background-color: #777777;
    position: absolute;
    bottom: -1.1rem;
    left: 0;
    width: 100%;
    height: 1px;
}
.hero .ctawrp .wrpcnt .actions .acwrp .icottwrp {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.hero .ctawrp .wrpcnt .actions .acwrp .actt {
    font-size: 1.9rem;
    font-weight: 500;
}
.hero .ctawrp .wrpcnt .actions .acwrp .date-wrapper {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
}
.hero .ctawrp .wrpcnt .actions .acwrp .dest {
    color: #7e7e7e;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
}
.hero .ctawrp .wrpcnt .actions .acwrp .dest .dest-display {
    font-size: 1.6rem;
    font-weight: 500;
    color: #7e7e7e;
}
.hero .ctawrp .wrpcnt .actions .acwrp .dest .destinationInput {
    border: none;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-black);
    width: 100%;
}

.hero .ctawrp .wrpcnt .actions .acwrp .dest .location-picker__results {
    position: absolute;
    top: 104%;
    left: 0;
    right: 0;
    background: #ffffff;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 8px;
}
.hero .ctawrp .wrpcnt .actions .acwrp .dest .location-picker__item {
    padding: 1.4rem 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid #222;
    background-color: #000000;
    color: #fff;
}
.hero .ctawrp .wrpcnt .actions .acwrp .dest .location-picker__item:hover {
    background-color: #222;
    color: #fff;
}
.hero .ctawrp .wrpcnt .actions .acwrp .dest .location-picker__item-icon {
    width: 2.4rem;
    height: 2.4rem;
    color: #fff;
    flex-shrink: 0;
}
.hero .ctawrp .wrpcnt .actions .acwrp .dest .location-picker__item-info {
    flex: 1;
}
.hero .ctawrp .wrpcnt .actions .acwrp .dest .location-picker__item-city {
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 4px;
    font-family: "Poppins", sans-serif;
}
.hero .ctawrp .wrpcnt .actions .acwrp .dest .location-picker__item-country {
    font-size: 12px;
    color: #ccc;
    font-family: "Poppins", sans-serif;
}
.hero .ctawrp .wrpcnt .actions .acwrp .dest .location-picker__message {
    padding: 2rem;
    text-align: center;
    color: #ffffff;
    font-size: 1.4rem;
    background-color: #000000;
}
.hero
    .ctawrp
    .wrpcnt
    .actions
    .acwrp
    .dest
    .location-picker__message--no-results {
    color: #ffffff;
}
.hero .ctawrp .wrpcnt .actions .acwrp .date {
    color: var(--color-black);
    font-size: 1.6rem;
    font-weight: 500;
}
.hero .ctawrp .wrpcnt .inputwrp {
    margin-top: 3rem;
    display: flex;
    justify-content: flex-end;
    width: fit-content;
    width: 100%;
}
.hero .ctawrp .wrpcnt .inputwrp .inputsrch {
    width: 100%;
    padding: 1.4rem 1rem 1.4rem 2.2rem;
    background: none;
    border: 1px solid transparent;
    color: var(--color-white);
    background-color: #6c006c;
    font-size: 1.6rem;
    font-weight: 500;
    display: flex;
    gap: 5px;
    color: var(--color-white);
    height: 4.4rem;
    border-radius: 3px;
    padding: 1.3rem 0.9rem 1.3rem 2.1rem;

    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
    box-shadow: none;
}

.hero .ctawrp .wrpcnt .inputwrp .inputsrch:hover,
.hero .ctawrp .wrpcnt .inputwrp .inputsrch:focus,
.hero .ctawrp .wrpcnt .inputwrp .inputsrch:focus-visible {
    background: #ffffff;
    color: #222;
    border-color: var(--color-black);
    outline: none;
    box-shadow: none;
}
.hero .ctawrp .wrpcnt .inputwrp .inputsrch .ico svg path {
    transition: fill 0.25s ease;
}
.hero .ctawrp .wrpcnt .inputwrp .inputsrch:hover .ico svg path,
.hero .ctawrp .wrpcnt .inputwrp .inputsrch:focus .ico svg path,
.hero .ctawrp .wrpcnt .inputwrp .inputsrch:active .ico svg path,
.hero .ctawrp .wrpcnt .inputwrp .inputsrch:focus-visible .ico svg path {
    fill: #000;
}
.hero .ctawrp .wrpcnt .inputwrp .inputsrch:active {
    background: #f5e6f5;
    color: #1a001a;
    border: 1px solid var(--color-black);
    transform: translateY(1px);
    outline: none;
    box-shadow: none;
}
.hero .matters .wrapper {
    max-width: 920px;
    display: flex;
    align-items: center;
    justify-content: left;
    margin: 7rem auto 0;
}
.hero .matters .wrapper .line {
    height: 12rem;
    width: 1px;
    background-color: var(--color-text-secondary);
}
@media (max-width: 501px) {
    .hero .matters .wrapper .line {
        height: 17rem;
    }
}
.hero .matters .wrapper .benefits {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem;
    justify-content: space-between;
}
.hero .matters .wrapper .benefits .benefit {
    position: relative;
    display: flex;
}
.hero .matters .wrapper .benefits .benefit:hover {
    cursor: default;
    color: var(--color-text-secondary);
}
.hero .matters .wrapper .benefits .benefit .ico-exclamation svg {
    width: 1.2rem;
    height: auto;
    position: absolute;
    bottom: 70%;
}
.hero .matters .wrapper .benefits .benefit .ico-arrow {
    position: absolute;
    opacity: 0;
    left: 80%;
    top: 0;
    transition: all 0.2s linear;
}
.hero .matters .wrapper .benefits .benefit .content {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
}
.hero .matters .wrapper .benefits .benefit .content .benefit-icon {
    width: 1.6rem;
}
.hero .matters .wrapper .benefits .benefit .content .text {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.4px;
    justify-self: flex-start;
}
@media (min-width: 650px) {
    .hero .ctawrp .wrpcnt .actions {
        flex-direction: row;
    }
}
@media (min-width: 590px) {
    .hero .matters .wrapper .benefits {
        justify-content: space-between;
    }
    .hero .matters .wrapper .line {
        height: 7rem;
    }
}
@media (min-width: 740px) {
    .hero .wrapper {
        align-items: center;
        justify-content: space-between;
    }
    .hero .wrapper .ttwrp {
        display: flex;
        flex-direction: column;
        justify-content: left;
        gap: 0;
        flex: 1 1 auto;
    }
    .hero .wrapper .ttwrp .tt {
        font-size: 3.9rem;
        font-weight: 700;
        color: var(--color-black);
    }
    .hero .wrapper .ttwrp .subtt {
        text-align: left;
        margin-top: 1rem;
    }
    .hero .wrapper .ttwrp .tt .hlfir {
        color: var(--color-black);
    }
    .hero .wrapper .ttwrp .tt .hlsec {
        color: var(--color-primary);
    }
    .hero .wrapper .imgwrp {
        display: block;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        overflow: hidden;
        margin-left: auto;
    }
    .hero .wrapper .imgwrp picture {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    .hero .wrapper .imgwrp img {
        height: auto;
        width: 93%;
        padding-left: 2rem;
        object-fit: cover;
        display: block;
        justify-self: flex-end;
    }
    .hero .ctawrp .wrpcnt {
        grid-template-columns: 1fr 1fr;
    }
    .hero .ctawrp .wrpcnt .tt {
        align-self: center;
    }
    .hero .ctawrp .wrpcnt .inputwrp {
        width: 100%;
        margin-top: 3rem;
        display: flex;
        justify-content: flex-end;
    }
    .hero .ctawrp .wrpcnt .inputwrp .inputsrch {
        height: 4.4rem;
        width: 13.6rem;
        border-radius: 3px;
    }
    .hero .ctawrp .wrpcnt .actions .acwrp .actt {
        font-size: 2rem;
        font-weight: 400;
    }
}
@media (min-width: 940px) {
    .hero .wrapper .ttwrp .tt {
        font-size: 5.1rem;
        font-weight: 700;
        color: var(--color-black);
    }
    .hero .ctawrp .wrpcnt .inputwrp {
        margin-bottom: -1rem;
        width: fit-content;
    }
    .hero .wrapper .imgwrp img {
        width: 80%;
    }

    .hero .ctawrp .wrpcnt {
        display: flex;
        align-items: flex-end;
    }
    .hero .ctawrp .wrpcnt .actions {
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        width: 90%;
    }
    .hero .ctawrp .wrpcnt .actions .ln {
        height: 1px;
        width: 100%;
        background-color: var(--color-white);
    }
    .hero .ctawrp .wrpcnt .inputwrp .inputsrch {
    }
    .hero .matters .wrapper .benefits .benefit .content .title,
    .hero .matters .wrapper .benefits .benefit .content .description {
        font-size: 2rem;
    }
    #destinationTrigger {
        width: 54%;
    }
    #calendarTrigger {
        width: 41%;
    }
}
@media (min-width: 1029px) {
    .hero .matters .wrapper {
        justify-content: center;
        margin: 14rem auto 0;
    }
    .hero .matters .wrapper .line {
        display: none;
    }
}
@media (min-width: 1080px) {
    .hero .wrapper .ttwrp .tt {
        font-size: 5.6rem;
        line-height: 1.2;
    }
    .hero .ctawrp .wrpcnt {
    }
    .hero .ctawrp .wrpcnt .actions {
        flex-direction: row;
        gap: 6rem;
        width: 90%;
        justify-content: space-between;
    }
    .hero .ctawrp .wrpcnt .actions .ln {
        height: 4rem;
        width: 1px;
    }
    .hero .ctawrp .wrpcnt .tt {
        width: 7ch;
        line-height: 3.6rem;
    }
    .hero .ctawrp .wrpcnt .inputwrp {
        margin-bottom: -1rem;
        width: fit-content;
    }
    .hero .ctawrp .wrpcnt .inputwrp .inputsrch {
        width: 13.6rem;
    }
    .hero .matters {
        margin-top: 4.4rem;
    }
    .hero .matters .wrapper {
        padding: 0 1rem;
    }
    .hero .matters .wrapper .benefits {
        width: 100%;
        justify-content: space-between;
    }
    .hero .matters .wrapper .benefits .benefit .content {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .hero .matters .wrapper .benefits .benefit .content .benefit-icon {
        width: 3.2rem;
    }
    .hero .matters .wrapper .benefits .benefit:hover .ico-arrow {
        opacity: 1;
        left: 100%;
        bottom: 50%;
        fill: var(--color-text-secondary);
    }
    .hero .matters .wrapper .benefits .benefit .ico-exclamation {
        display: none;
    }
}
.destinations {
    padding: var(--section-padding);
}
.destinations .wrapper {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 3rem;
}
.destinations .wrapper .title-wrapper {
    align-self: left;
}
.destinations .wrapper .title-wrapper .title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-black);
}
.destinations .wrapper .title-wrapper .sub-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-sub-title);
}
.destinations .wrapper .container {
    display: grid;
    gap: 3rem;
}
.destinations .wrapper .container .category {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
}
.destinations .wrapper .container .category .ico-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center;
}
.destinations .wrapper .container .category .category-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    max-height: 3rem;
    overflow: hidden;
    -webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: visible;
}
.destinations .wrapper .container .category .category-list.active {
    max-height: 20rem;
    gap: 1rem;
}
.destinations .wrapper .container .category .category-list .category-item {
    position: relative;
    font-size: 1.6rem;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    margin: 0;
    padding: 0;
    transform: translateY(-10px);
    -webkit-transition:
        opacity 0.25s ease-out,
        transform 0.25s ease-out,
        max-height 0.35s ease-out,
        visibility 0.25s ease-out;
    -moz-transition:
        opacity 0.25s ease-out,
        transform 0.25s ease-out,
        max-height 0.35s ease-out,
        visibility 0.25s ease-out;
    -o-transition:
        opacity 0.25s ease-out,
        transform 0.25s ease-out,
        max-height 0.35s ease-out,
        visibility 0.25s ease-out;
    transition:
        opacity 0.25s ease-out,
        transform 0.25s ease-out,
        max-height 0.35s ease-out,
        visibility 0.25s ease-out;
}
.destinations
    .wrapper
    .container
    .category
    .category-list
    .category-item.loading::after {
    position: absolute;
    content: "";
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 10%;
    top: 100%;
    left: 0;
    --c: no-repeat linear-gradient(#900090 0 0);
    background: var(--c), var(--c), #d7b8fc;
    background-size: 60% 100%;
    animation: l16 3s infinite;
}
@keyframes l3 {
    20% {
        background-position:
            0% 0%,
            50% 50%,
            100% 50%;
    }
    40% {
        background-position:
            0% 100%,
            50% 0%,
            100% 50%;
    }
    60% {
        background-position:
            0% 50%,
            50% 100%,
            100% 0%;
    }
    80% {
        background-position:
            0% 50%,
            50% 50%,
            100% 100%;
    }
}
@keyframes l16 {
    0% {
        background-position:
            -150% 0,
            -150% 0;
    }
    66% {
        background-position:
            250% 0,
            -150% 0;
    }
    100% {
        background-position:
            250% 0,
            250% 0;
    }
}
.destinations
    .wrapper
    .container
    .category
    .category-list
    .category-item.active {
    color: var(--color-text-secondary);
    opacity: 1;
    visibility: visible;
    max-height: 3rem;
    margin: 0;
    padding: 0;
    transform: translateY(0);
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.destinations
    .wrapper
    .container
    .category
    .category-list.active
    .category-item {
    opacity: 1;
    visibility: visible;
    max-height: 3rem;
    margin: 0;
    padding: 0;
    transform: translateY(0);
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.destinations
    .wrapper
    .container
    .category
    .category-list.closing
    .category-item {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.destinations
    .wrapper
    .container
    .category
    .category-list
    .category-item:hover {
    color: var(--color-text-secondary);
}
.destinations
    .wrapper
    .container
    .category
    .category-list
    .category-item
    button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    outline: none;
}
.destinations
    .wrapper
    .container
    .category
    .category-list
    .category-item.active {
    color: var(--color-text-secondary);
    opacity: 1;
    visibility: visible;
    max-height: 3rem;
    margin: 0;
    padding: 0;
    transform: translateY(0);
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

.destinations .wrapper .container .category .ico {
    margin-top: 3px;
    cursor: pointer;
    transform-origin: center;
    -webkit-transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.destinations .wrapper .container .category .ico:hover {
    opacity: 0.7;
}
.destinations .wrapper .container .category .ico.open {
    transform: rotate(180deg);
    -webkit-transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.destinations .wrapper .container .destinations-list {
    min-width: 33rem;
    height: auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 33rem;
    gap: 3rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-align: start;
    margin: 0;
}
.destinations .wrapper .container .destinations-list p {
    font-size: 1.6rem;
    color: var(--color-text-secondary);
    font-weight: 400;
    height: 22rem;
}

.destinations .wrapper .container .destinations-list::-webkit-scrollbar {
    display: none;
}
.destinations .wrapper .container .destinations-list .destination-card .img {
    width: 33rem;
    height: 17rem;
    object-fit: cover;
}
.destinations
    .wrapper
    .container
    .destinations-list
    .destination-card
    .card-url {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.destinations .wrapper .container .destinations-list .destination-card .info {
    margin-top: -4.5rem;
    width: 30rem;
    height: 6rem;
    background-color: var(--color-black);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    justify-self: center;
}
.destinations
    .wrapper
    .container
    .destinations-list
    .destination-card
    .info
    .location {
    display: flex;
    flex-direction: column;
}
.destinations
    .wrapper
    .container
    .destinations-list
    .destination-card
    .info
    .location
    .country {
    font-size: 1.2rem;
    font-weight: 500;
    color: #999;
}
.destinations
    .wrapper
    .container
    .destinations-list
    .destination-card
    .info
    .location
    .city {
    margin-top: -4px;
    font-size: 1.4rem;
    font-weight: 600;
}

.destinations
    .wrapper
    .container
    .destinations-list
    .destination-card
    .info
    .activities {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    gap: 2rem;
}

.destinations
    .wrapper
    .container
    .destinations-list
    .destination-card
    .info
    .activities
    .data {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.destinations
    .wrapper
    .container
    .destinations-list
    .destination-card
    .info
    .activities
    .data
    .count {
    font-size: 2.4rem;
    font-style: italic;
    font-weight: 600;
}
.destinations
    .wrapper
    .container
    .destinations-list
    .destination-card
    .info
    .activities
    .data
    .label {
    margin-top: -8px;
    font-size: 1.2rem;
    font-weight: 500;
    color: #999;
    align-self: flex-end;
    padding-bottom: 6px;
}
.destinations .wrapper .container .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.8rem;
}
.destinations .wrapper .container .controls .prev {
    background: none;
    border: none;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}
.destinations .wrapper .container .controls .dot {
    width: 4px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 50%;
}
.destinations .wrapper .container .controls .next {
    background: none;
    border: none;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}
.destinations .wrapper .container .controls .prev:hover,
.destinations .wrapper .container .controls .next:hover,
.destinations .wrapper .container .controls .prev:focus-visible,
.destinations .wrapper .container .controls .next:focus-visible {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 10px rgba(108, 0, 108, 0.25));
    outline: none;
}
.destinations .wrapper .container .controls .prev:active,
.destinations .wrapper .container .controls .next:active {
    transform: scale(0.94);
    filter: drop-shadow(0 2px 4px rgba(108, 0, 108, 0.15));
}
.destinations .wrapper .container .controls .prev:hover svg circle,
.destinations .wrapper .container .controls .next:hover svg circle,
.destinations .wrapper .container .controls .prev:focus-visible svg circle,
.destinations .wrapper .container .controls .next:focus-visible svg circle {
    stroke: var(--color-primary);
    fill: rgba(108, 0, 108, 0.08);
    transition:
        stroke 0.25s ease,
        fill 0.25s ease;
}
.destinations .wrapper .container .controls .prev:hover svg path,
.destinations .wrapper .container .controls .next:hover svg path,
.destinations .wrapper .container .controls .prev:focus-visible svg path,
.destinations .wrapper .container .controls .next:focus-visible svg path {
    fill: var(--color-primary);
}
.destinations .wrapper .container .controls .prev:active svg path,
.destinations .wrapper .container .controls .next:active svg path {
    fill: #8a008a;
}
.destinations .wrapper .container .controls .prev:active svg circle,
.destinations .wrapper .container .controls .next:active svg circle {
    stroke: #8a008a;
}
.destinations .wrapper .container .controls .prev:active svg path,
.destinations .wrapper .container .controls .next:active svg path {
    fill: #8a008a;
}
@media (min-width: 590px) {
    .destinations .wrapper .container .category {
        justify-content: flex-start;
        align-items: center;
        grid-row: 1;
        grid-column: 1/2;
    }
    .destinations .wrapper .container .category .ico {
        display: none;
    }
    .destinations
        .wrapper
        .container
        .destinations-list
        .destination-card
        .info {
        margin-top: -1.5rem;
        width: 33rem;
        height: 6.5rem;
    }
    .destinations
        .wrapper
        .container
        .destinations-list
        .destination-card
        .info
        .activities {
        gap: 4rem;
    }
    .destinations .wrapper .container .category .category-list {
        flex-direction: row;
        max-height: none;
        overflow: visible;
        gap: 1rem;
    }
    .destinations .wrapper .container .category .category-list .category-item {
        display: flex;
        gap: 6px;
        opacity: 1;
        visibility: visible;
        max-height: none;
        margin: 0 1rem 0 0;
        transform: translateY(0);
        -webkit-transition: color 0.2s ease;
        -moz-transition: color 0.2s ease;
        -o-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }
    .destinations
        .wrapper
        .container
        .category
        .category-list
        .category-item.active {
        color: var(--color-text-secondary);
        opacity: 1;
        visibility: visible;
        max-height: none;
        margin: 0 1rem 0 0;
    }

    .destinations .wrapper .container .controls {
        justify-self: end;
        grid-row: 1/2;
        grid-column: 1/2;
    }
    .destinations .wrapper .container .controls .prev {
        scale: 1.1;
    }
    .destinations .wrapper .container .controls .dot {
        width: 6px;
        height: 6px;
    }
    .destinations .wrapper .container .controls .next {
        scale: 1.1;
    }
    .destinations
        .wrapper
        .container
        .destinations-list
        .destination-card
        .info {
        padding: 1rem 2rem;
        z-index: 1000;
    }
}
.first-program {
    padding: var(--section-padding);
}
.first-program .wrapper {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 4rem;
}
.first-program .wrapper .title-wrapper {
    align-self: left;
}
.first-program .wrapper .title-wrapper .title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-black);
}
.first-program .wrapper .title-wrapper .sub-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-sub-title);
}
.first-program .wrapper .container {
    max-width: 100%;
    height: 46rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-self: center;
    background-image: linear-gradient(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.4));
    background-size: cover;
    background-position: center;
    gap: 2rem;
}
.first-program .wrapper .container .promotion {
    color: var(--color-white);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 1.6rem;
    gap: 9rem;
}
.first-program .wrapper .container .promotion .promotion-title {
    font-size: 2.8rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
}
.first-program .wrapper .container .promotion .promotion-description {
    font-size: 1.2rem;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem 0 0;
}
.first-program .wrapper .container .promotion .promotion-description h4 {
    font-size: 1.2rem;
    font-weight: 400;
}
.first-program .wrapper .container .link-wrapper {
    background-color: rgb(0 0 0 / 0.2);
    backdrop-filter: blur(1rem);
    height: 6.6rem;
    padding: 1rem 3rem;
    display: flex;
    justify-content: flex-end;
}
.first-program .wrapper .container .link-wrapper .link .icon-arrow {
    display: none;
}
.first-program .wrapper .container .link-wrapper .link span {
    display: block;
    color: var(--color-white);
    font-size: 2.8rem;
    font-weight: 700;
}
@media (min-width: 540px) {
    .first-program .wrapper .container .promotion .promotion-description {
        font-size: 1.4rem;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
        font-weight: 400;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0 6rem 0rem;
    }
    .first-program .wrapper .container .promotion .promotion-description h4 {
        font-size: 2.2rem;
        font-weight: 400;
    }
    .first-program .wrapper .container .promotion {
        gap: 6rem;
    }
}
@media (min-width: 940px) {
    .first-program .wrapper .container {
        background-image: url(./imgs/first-program.png);
        position: relative;
        max-width: none;
        width: 50.1rem;
        height: 76rem;
        margin-left: 32rem;
    }
    .first-program .wrapper .container .promotion {
        position: absolute;
        left: -31.9rem;
        top: 0;
        justify-content: flex-start;
        background-color: var(--color-black);
        height: 67.4rem;
        width: 32rem;
        padding: 5rem 4rem;
        gap: 6rem;
    }
    .first-program .wrapper .container .promotion .promotion-title {
        font-size: 3.6rem;
    }
    .first-program .wrapper .container .promotion .promotion-title .highlight {
        color: var(--color-primary);
    }
    .first-program .wrapper .container .promotion .promotion-description {
        font-size: 1.4rem;
        font-weight: 500;
        padding: 0;
    }
    .first-program .wrapper .container .promotion .promotion-description h4 {
        font-size: 1.4rem;
        font-weight: 500;
    }
    .first-program .wrapper .container .link-wrapper {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 8.6rem;
        display: flex;
        justify-content: flex-end;
    }
    .first-program .wrapper .container .link-wrapper .link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
    }
    .first-program .wrapper .container .link-wrapper .link .icon-arrow {
        display: block;
    }
    .first-program .wrapper .container .link-wrapper .link span {
        font-size: 3.2rem;
    }
}
.reviews {
    padding: var(--section-padding);
}
.reviews .wrapper {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4rem;
}
.reviews .wrapper .title-wrapper {
    align-self: left;
}
.reviews .wrapper .title-wrapper .title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-black);
}
.reviews .wrapper .title-wrapper .sub-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-sub-title);
}
.reviews .wrapper .reviews-list-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
.reviews
    .wrapper
    .reviews-list-wrapper
    .reviews-list
    .review-card
    .img-wrapper {
    width: 6.7rem;
    height: 6.7rem;
    border: 2px solid var(--color-black);
}
.reviews
    .wrapper
    .reviews-list-wrapper
    .reviews-list
    .review-card
    .img-wrapper
    img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reviews
    .wrapper
    .reviews-list-wrapper
    .reviews-list
    .review-card:nth-child(even)
    .img-wrapper {
    border-color: var(--color-white);
}
.reviews .wrapper .reviews-list-wrapper .reviews-list {
    width: 100%;
    display: flex;
    align-self: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    row-gap: 4rem;
}
.reviews .wrapper .reviews-list-wrapper .reviews-list .review-card {
    width: 30rem;
    position: relative;
    background-color: #f6f6f6;
    padding: 2.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.8rem;
    color: var(--color-black);
    transition: transform 0.3s ease;
}
.reviews .wrapper .reviews-list-wrapper .reviews-list .review-card:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}
.reviews
    .wrapper
    .reviews-list-wrapper
    .reviews-list
    .review-card:nth-child(even) {
    background-color: var(--color-black);
    color: var(--color-white);
}
.reviews
    .wrapper
    .reviews-list-wrapper
    .reviews-list
    .review-card
    .review-text {
    font-size: 1.6rem;
    font-weight: 600;
}
.reviews .wrapper .reviews-list-wrapper .reviews-list .review-card .ico {
    position: absolute;
    top: 10%;
    right: 10%;
}
.reviews
    .wrapper
    .reviews-list-wrapper
    .reviews-list
    .review-card
    .author-info
    .review-author,
.reviews
    .wrapper
    .reviews-list-wrapper
    .reviews-list
    .review-card
    .author-info
    .author-stat {
    font-size: 1.4rem;
    font-weight: 600;
}
.reviews
    .wrapper
    .reviews-list-wrapper
    .reviews-list
    .review-card
    .author-info
    .author-stat
    time {
    color: #6c006c;
}

.reviews
    .wrapper
    .reviews-list-wrapper
    .reviews-list
    .review-card:nth-child(even)
    .author-info
    .author-stat
    time {
    color: var(--color-white);
}
.latest-blog-posts {
    padding: var(--section-padding);
}
.latest-blog-posts .wrapper {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 4rem;
}
.latest-blog-posts .wrapper .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.latest-blog-posts .wrapper .title-wrapper {
    align-self: left;
}
.latest-blog-posts .wrapper .title-wrapper .title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-black);
}
.latest-blog-posts .wrapper .title-wrapper .sub-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-sub-title);
}
.latest-blog-posts .wrapper .control {
    width: 100%;
    max-width: 36rem;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: 2rem;
    padding: 3rem 0 3rem 3rem;
    background-color: var(--color-text-secondary);
}
.latest-blog-posts .wrapper .control .title-wrapper .title {
    color: var(--color-white);
    font-size: 2.8rem;
}
.latest-blog-posts .wrapper .control .title-wrapper .sub-title {
    color: var(--color-white);
}
.latest-blog-posts .wrapper .control .categories {
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 2rem;
}
.latest-blog-posts .wrapper .control .categories .selected-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    cursor: pointer;
}
.latest-blog-posts
    .wrapper
    .control
    .categories
    .selected-wrapper
    .selected-category {
    color: var(--color-white);
    font-size: 1.6rem;
    font-weight: 500;
    white-space: nowrap;
}
.latest-blog-posts .wrapper .control .categories .selected-wrapper .ico {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.latest-blog-posts .wrapper .control .categories .selected-wrapper.open .ico {
    transform: rotate(180deg);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.latest-blog-posts .wrapper .control .categories .selected-wrapper .line {
    width: 150%;
    height: 1px;
    background-color: var(--color-white);
}
.latest-blog-posts .wrapper .control .categories .categories-list {
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-left: 1.6rem;
}
.latest-blog-posts
    .wrapper
    .control
    .categories
    .selected-wrapper.open
    + .categories-list {
    opacity: 1;
    height: 24rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.latest-blog-posts
    .wrapper
    .control
    .categories
    .categories-list
    .categories-list-ul {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    color: var(--color-white);
    font-size: 1.6rem;
    font-weight: 500;
}
.latest-blog-posts
    .wrapper
    .control
    .categories
    .categories-list
    .categories-list-ul
    .category-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    cursor: pointer;
    width: fit-content;
}
.wrapper
    .control
    .categories
    .categories-list
    .categories-list-ul
    .category-item {
    width: 100%;
    white-space: nowrap;
}
.latest-blog-posts
    .wrapper
    .control
    .categories
    .categories-list
    .categories-list-ul
    .category-item.active {
    display: none;
}
.latest-blog-posts .wrapper .control .blog-go {
    padding-top: 4rem;
    padding-right: 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.latest-blog-posts .wrapper .control .blog-go .link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
}
.latest-blog-posts .wrapper .control .blog-go .link .text {
    color: var(--color-white);
    font-size: 1.6rem;
    font-weight: 700;
}
.latest-blog-posts .wrapper .control .blog-go .link .ico {
    display: flex;
    align-items: center;
}
.latest-blog-posts .wrapper .control .blog-posts-list {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 3rem;
}
.latest-blog-posts .wrapper .container .blog-posts-list {
    min-width: 36rem;
    height: auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 33rem;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-align: start;
    margin: 0;
}
.latest-blog-posts .wrapper .container .blog-posts-list::-webkit-scrollbar {
    display: none;
}
.latest-blog-posts .wrapper .container .blog-posts-list {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.latest-blog-posts .wrapper .container .blog-posts-list .blog-post {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
@media (max-width: 791px) {
    .latest-blog-posts .wrapper .container .blog-posts-list {
        display: flex;
        flex-direction: column;
        grid-auto-flow: unset;
        grid-auto-columns: unset;
        overflow-x: unset;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        max-height: calc(3 * 22.7rem);
        min-width: unset;
    }
    .latest-blog-posts .wrapper .container .blog-posts-list .blog-post {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .latest-blog-posts .wrapper .container .blog-posts-list .blog-post p {
        font-size: 1.4rem;
        font-weight: 500;
    }
}
.latest-blog-posts
    .wrapper
    .container
    .blog-posts-list
    .blog-post
    .blog-post-link
    .blog-post-content {
    max-width: 36rem;
    height: 22rem;
    padding: 3rem;
    background-color: #f4f4f4;
    border: 1px #cacaca solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}
.latest-blog-posts
    .wrapper
    .container
    .blog-posts-list
    .blog-post:not(:first-child)
    .blog-post-link
    .blog-post-content {
    border-top: none;
}
.latest-blog-posts
    .wrapper
    .container
    .blog-posts-list
    .blog-post
    .blog-post-link
    .blog-post-content
    .category {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}
.latest-blog-posts
    .wrapper
    .container
    .blog-posts-list
    .blog-post
    .blog-post-link
    .blog-post-content
    .blog-title {
    font-size: 1.6rem;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: calc(1.3em * 2);
}
.latest-blog-posts
    .wrapper
    .container
    .blog-posts-list
    .blog-post
    .blog-post-link
    .blog-post-content
    .blog-description {
    font-size: 1.4rem;
    font-weight: 400;
    color: #686767;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: calc(1.4em * 4);
}
.latest-blog-posts
    .wrapper
    .container
    .blog-posts-list
    .blog-post
    .blog-post-link
    .blog-post-content
    .rating {
    margin-top: 6px;
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.latest-blog-posts
    .wrapper
    .container
    .blog-posts-list
    .blog-post
    .blog-post-link
    .blog-post-content
    .rating
    .rating-value {
    font-size: 1.4rem;
    font-weight: 500;
}
.latest-blog-posts
    .wrapper
    .container
    .blog-posts-list
    .blog-post
    .blog-post-link
    .blog-post-content
    .rating
    .stars {
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.latest-blog-posts .wrapper .controls {
    display: none;
}
@media (min-width: 792px) {
    .latest-blog-posts .wrapper .container {
        gap: 2rem;
        flex-direction: row;
        align-items: flex-start;
    }
    .latest-blog-posts .wrapper .control {
        min-width: 31rem;
        margin: 0;
    }
    .latest-blog-posts
        .wrapper
        .control
        .categories
        .selected-wrapper
        + .categories-list {
        opacity: 1;
        height: 24rem;
        padding-left: 0;
    }
    .latest-blog-posts .wrapper .control .categories .selected-wrapper .ico {
        display: none;
    }
    .latest-blog-posts .wrapper .container .blog-posts-list {
        justify-content: flex-start;
        gap: 2.8rem;
        flex-direction: column;
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-auto-flow: column;
        overflow: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .latest-blog-posts .wrapper .container .blog-posts-list .blog-post {
        min-width: 24rem;
    }
    .latest-blog-posts .wrapper .container .blog-posts-list .blog-post p {
        font-size: 1.5rem;
        font-weight: 500;
    }
    .latest-blog-posts
        .wrapper
        .container
        .blog-posts-list
        .blog-post
        .blog-post-link
        .blog-post-content {
        padding: 2rem;
    }
    .latest-blog-posts
        .wrapper
        .container
        .blog-posts-list
        .blog-post:not(:first-child)
        .blog-post-link
        .blog-post-content {
        border-top: 1px solid #cacaca;
    }
    .latest-blog-posts .wrapper .controls {
        margin-top: -6rem;
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.8rem;
        align-self: flex-end;
    }
    .latest-blog-posts .wrapper .controls .prev {
        background: none;
        border: none;
        cursor: pointer;
        transition:
            transform 0.25s ease,
            filter 0.25s ease;
    }
    .latest-blog-posts .wrapper .controls .dot {
        width: 4px;
        height: 4px;
        background-color: var(--color-primary);
        border-radius: 50%;
    }
    .latest-blog-posts .wrapper .controls .next {
        background: none;
        border: none;
        cursor: pointer;
        transition:
            transform 0.25s ease,
            filter 0.25s ease;
    }
    .latest-blog-posts .wrapper .controls .prev:hover,
    .latest-blog-posts .wrapper .controls .next:hover,
    .latest-blog-posts .wrapper .controls .prev:focus-visible,
    .latest-blog-posts .wrapper .controls .next:focus-visible {
        transform: scale(1.08);
        filter: drop-shadow(0 4px 10px rgba(108, 0, 108, 0.25));
        outline: none;
    }
    .latest-blog-posts .wrapper .controls .prev:active,
    .latest-blog-posts .wrapper .controls .next:active {
        transform: scale(0.94);
        filter: drop-shadow(0 2px 4px rgba(108, 0, 108, 0.15));
    }
    .latest-blog-posts .wrapper .controls .prev:hover svg circle,
    .latest-blog-posts .wrapper .controls .next:hover svg circle,
    .latest-blog-posts .wrapper .controls .prev:focus-visible svg circle,
    .latest-blog-posts .wrapper .controls .next:focus-visible svg circle {
        stroke: var(--color-primary);
        fill: rgba(108, 0, 108, 0.08);
        transition:
            stroke 0.25s ease,
            fill 0.25s ease;
    }
    .latest-blog-posts .wrapper .controls .prev:hover svg path,
    .latest-blog-posts .wrapper .controls .next:hover svg path,
    .latest-blog-posts .wrapper .controls .prev:focus-visible svg path,
    .latest-blog-posts .wrapper .controls .next:focus-visible svg path {
        fill: var(--color-primary);
    }
    .latest-blog-posts .wrapper .controls .prev:active svg circle,
    .latest-blog-posts .wrapper .controls .next:active svg circle {
        stroke: #8a008a;
    }
    .latest-blog-posts .wrapper .controls .prev:active svg path,
    .latest-blog-posts .wrapper .controls .next:active svg path {
        fill: #8a008a;
    }
    .latest-blog-posts .wrapper .controls .prev svg path,
    .latest-blog-posts .wrapper .controls .next svg path {
        transition: fill 0.25s ease;
    }
}
@media (min-width: 940px) {
    .latest-blog-posts {
        padding: 10rem 1rem 0 0;
    }
    .latest-blog-posts .wrapper {
        max-width: 1430px;
        padding: 0 1rem;
    }
    /* .latest-blog-posts .wrapper .title-wrapper {
        padding-left: calc(2rem + 3vw);
    } */
    .latest-blog-posts .wrapper .container .title-wrapper {
        padding-left: 0;
    }
    .latest-blog-posts .wrapper .container {
        justify-content: center;
        width: 100%;
        justify-content: left;
        flex-direction: row;
        gap: 1.6rem;
    }
    .latest-blog-posts .wrapper .control {
        min-width: 43.6rem;
        margin: 0;
    }
    .latest-blog-posts .wrapper .container .blog-posts-list {
        margin-top: 5px;
        width: 100%;
        gap: 5rem;
        row-gap: 2rem;
    }
    .latest-blog-posts .wrapper .container .blog-posts-list .blog-post {
        min-width: 36rem;
    }
    .latest-blog-posts .wrapper .container .blog-posts-list .blog-post p {
        font-size: 1.6rem;
        font-weight: 500;
    }
    .latest-blog-posts .wrapper .container .blog-posts-list::-webkit-scrollbar {
        display: none;
    }
    .latest-blog-posts
        .wrapper
        .container
        .blog-posts-list
        .blog-post:nth-child(1n + 4)
        .blog-post-link
        .blog-post-content {
        background-color: var(--color-black);
        color: var(--color-white);
    }
    .latest-blog-posts
        .wrapper
        .container
        .blog-posts-list
        .blog-post
        .blog-post-link
        .blog-post-content {
        padding: 3rem 3rem 2rem;
    }
    .latest-blog-posts
        .wrapper
        .container
        .blog-posts-list
        .blog-post:nth-child(1n + 4)
        .blog-post-link
        .blog-post-content
        .category {
        color: var(--color-primary);
    }
    .latest-blog-posts
        .wrapper
        .container
        .blog-posts-list
        .blog-post:nth-child(1n + 4)
        .blog-post-link
        .blog-post-content
        .blog-description {
        color: #c3c3c3;
    }
    .latest-blog-posts
        .wrapper
        .container
        .blog-posts-list
        .blog-post
        .blog-post-link
        .blog-post-content {
        min-width: 36rem;
    }
    .latest-blog-posts
        .wrapper
        .container
        .blog-posts-list
        .blog-post:nth-child(1n + 4)
        .blog-post-link
        .blog-post-content
        .rating
        .star
        svg {
        stroke: var(--color-white);
        fill: var(--color-white);
    }
}
@media (max-width: 940px) {
    .hero .ctawrp .wrpcnt .inputwrp .inputsrch {
        justify-content: center;
        width: 100%;
    }
}
.tips {
    padding: var(--section-padding);
}
.tips .wrapper {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4rem;
}
.tips .wrapper .title-wrapper .title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-black);
}
.tips .wrapper .title-wrapper .sub-title {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-sub-title);
}
.tips .wrapper .tips-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tips .wrapper .tips-container .title-wrapper {
    background-color: var(--color-black);
    width: 20rem;
    height: 14rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}
.tips .wrapper .tips-container .title-wrapper .title {
    color: var(--color-white);
    font-size: 1.8rem;
    font-weight: 600;
}
.tips .wrapper .counter-wrapper {
    margin-right: calc((2rem - 13.4rem) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 14.3rem;
    height: 13.3rem;
    background-color: rgb(226 0 226 / 0.35);
    background-blend-mode: color-dodge;
    background-size: cover;
    background-position: center;
}
.tips .wrapper .counter-wrapper .counter-badge {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.tips .wrapper .counter-wrapper .counter-badge .counter-number {
    font-size: 9.6rem;
    text-decoration: underline;
    text-underline-offset: 1.4rem;
    text-decoration-thickness: 0.5rem;
    color: var(--color-white);
    font-weight: 300;
}
.tips .wrapper .links-wrapper {
    width: 26.7rem;
    color: var(--color-white);
    background-color: var(--color-black);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5.2rem;
    padding: 4rem 2.2rem;
}
.tips .wrapper .links-wrapper .links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.8rem;
    cursor: pointer;
}
.tips .wrapper .links-wrapper .links .link-item {
    list-style: decimal;
    font-size: 1.4rem;
    font-weight: 400;
    position: relative;
    text-decoration: underline;
}
.tips .wrapper .links-wrapper .links .link-item:hover {
    box-shadow: 0 1px 10px 0 rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.08);
}
.tips .wrapper .links-wrapper .links .link-item a {
    font-size: 1.4rem;
    font-weight: 400;
}
.tips .wrapper .links-wrapper .links .link-item .link-text {
    font-size: 1.3rem;
    font-weight: 500;
    position: relative;
    display: block;
    cursor: pointer;
}
.tips .wrapper .links-wrapper .links .link-item .tip-popup {
    display: none;
    width: 130%;
    position: absolute;
    left: -4.6%;
    top: 100%;
    background: #f4f4f4;
    color: var(--color-black);
    padding: 4rem;
    font-size: 1.3rem;
    font-weight: 400;
    white-space: normal;
    z-index: 20;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
    line-height: 1.5;
    border: 1px solid #cacaca;
}

.tips .wrapper .links-wrapper .links .link-item .tip-popup.is-open {
    display: block;
}
.tips .wrapper .links-wrapper .links .link-item .tip-popup__close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: #dc143c;
    border: none;
    color: var(--color-white);
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.tips .wrapper .links-wrapper .show-more {
    font-size: 1.2rem;
    font-weight: 300;
    align-self: flex-end;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 1000px) {
    .tips .wrapper .links-wrapper .links .link-item .tip-popup {
        left: -50%;
        width: 150%;
    }
    .tips .wrapper .links-wrapper .links .link-item .tip-popup__close {
        top: 1.4rem;
        right: 1.4rem;
    }
}

@media (max-width: 790px) {
    .tips .wrapper .links-wrapper .links .link-item .tip-popup {
        left: -33%;
        width: 160%;
    }
}
@media (min-width: 792px) {
    .tips .wrapper .tips-container {
        flex-direction: row;
        justify-content: center;
    }
    .tips .wrapper .counter-wrapper {
        margin: 0;
    }
    .tips .wrapper .tips-container .title-wrapper {
        align-self: flex-start;
        width: 26.5rem;
        height: 19rem;
        padding: 6rem;
    }
    .tips .wrapper .tips-container .title-wrapper .title {
        font-size: 3.6rem;
    }
    .tips .wrapper .links-wrapper {
        justify-content: space-between;
    }
    .tips .wrapper .links-wrapper .links .link-item a {
        font-size: 1.6rem;
        font-weight: 400;
        text-wrap: nowrap;
    }
    .tips .wrapper .counter-wrapper {
        height: 40rem;
        min-width: 14rem;
        width: 22rem;
        background-color: #fff0;
        background-color: rgb(226 0 226 / 0.35);
    }
    .tips .wrapper .links-wrapper {
        width: 39rem;
        height: 26.4rem;
        padding: 4rem 3rem 2rem;
    }
}
.trvls {
    padding: var(--section-padding);
}
.trvls .wrp {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.trvls .wrp .ttwrp .tt {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-black);
}
.trvls .wrp .sutt {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-sub-title);
}
.trvls .wrp .crdswrp .crdwrp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 4rem;
}
.trvls .wrp .crdswrp .crdwrp .crd {
    width: 33rem;
    align-self: flex-start;
    transition: transform 0.25s ease;
}
.trvls .wrp .crdswrp .crdwrp .crd:hover {
    transform: translateY(-1px);
}
.trvls .wrp .crdswrp .crdwrp .crd a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.7rem;
}
.trvls .wrp .crdswrp .crdwrp .crd a .cattt {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.trvls .wrp .crdswrp .crdwrp .crd a .crdtt {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-black);
}
.trvls .wrp .crdswrp .crdwrp .crd a .ls {
    height: 1px;
    width: 100%;
    font-weight: 500;
    background-color: var(--color-black);
}
.trvls .wrp .crdswrp .crdwrp .crd a .crdimg {
    padding-top: 0.5rem;
    width: 33rem;
    height: 14.5rem;
    object-fit: cover;
}
.trvls .wrp .crdswrp .crdwrp .crd a .crddesc {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-black);
}
.trvls .wrp .ctrls {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
}
.trvls .wrp .ctrls .btsgup {
    width: 19.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-black);
    padding: 1rem 2rem;
    color: var(--color-white);
    font-size: 1.4rem;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
    border: 1px solid #fff0;
}
.trvls .wrp .ctrls .btsgup:hover {
    cursor: pointer;
    background-color: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-black);
}
.trvls .wrp .ctrls .tofu {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-black);
    text-decoration: underline;
}
@media (min-width: 771px) {
    .trvls .wrp .crdswrp .crdwrp {
        gap: 2rem;
    }
}
.guides {
    padding: 12rem calc(2rem + 2vw);
}
.guides .wrapper {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.guides .wrapper .title-wrapper {
    align-self: left;
}
.guides .wrapper .title-wrapper .title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-black);
}
.guides .wrapper .title-wrapper .sub-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-sub-title);
}
.guides .wrapper .container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.guides .wrapper .container .control {
    display: flex;
    flex-direction: column;
    width: 29.4rem;
}
.guides .wrapper .container .control .head {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 4rem 0 2rem 2rem;
    display: flex;
    flex-direction: column;
}
.guides .wrapper .container .control .head .sub-title {
    font-size: 1.4rem;
    font-weight: 400;
}
.guides .wrapper .container .control .head .line {
    margin-top: 8px;
    width: 100%;
    height: 1px;
    background-color: var(--color-white);
}
.guides .wrapper .container .control .head .sub-title-sub {
    margin-top: 1.6rem;
    font-size: 2.4rem;
    font-weight: 700;
}
.guides .wrapper .container .control .body {
    background-color: #6c006c;
    color: var(--color-white);
    padding: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}
.guides .wrapper .container .control .body .sub-title {
    font-size: 1.4rem;
    font-weight: 400;
    color: #d5d5d5;
}
.guides .wrapper .container .control .body .button-join {
    border: 1px solid var(--color-white);
    width: fit-content;
    padding: 1rem 2rem;
    width: 21rem;
    border-left: 1rem solid var(--color-white);
    cursor: pointer;
}
.guides .wrapper .container .control .body .button-join .link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.guides .wrapper .container .control .body .button-join .link .content {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.25s ease;
}
.guides .wrapper .container .control .body .button-join {
    border: 1px solid var(--color-white);
    width: fit-content;
    padding: 1rem 2rem;
    width: 21rem;
    border-left: 1rem solid var(--color-white);
    cursor: pointer;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.guides .wrapper .container .control .body .button-join:hover,
.guides .wrapper .container .control .body .button-join:focus-visible {
    background: var(--color-white);
    color: #1a001a;
    border: 1px solid rgba(108, 0, 108, 0.2);
    border-left: 1rem solid rgba(108, 0, 108, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(108, 0, 108, 0.2);
    outline: none;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.guides .wrapper .container .control .body .button-join:hover .link .content,
.guides
    .wrapper
    .container
    .control
    .body
    .button-join:focus-visible
    .link
    .content {
    color: #1a001a;
}
.guides .wrapper .container .control .body .button-join:hover .ico svg path,
.guides
    .wrapper
    .container
    .control
    .body
    .button-join:focus-visible
    .ico
    svg
    path {
    stroke: #1a001a;
    transition: stroke 0.25s ease;
}
.guides .wrapper .container .control .body .button-join:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(108, 0, 108, 0.15);
    background: #f5e6f5;
}
.guides .wrapper .container .control .body .terms-link {
    margin-top: 2rem;
    position: absolute;
    top: 115%;
    left: 50%;
    transform: translateX(-10%);
}
.guides .wrapper .container .control .body .terms-link span {
    font-size: 1.2rem;
    font-weight: 400;
    color: #333;
    text-decoration: underline;
}
.guides .wrapper .container .shows {
    padding-left: 9px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
@media (max-width: 768px) {
    .guides .wrapper .container .shows {
        padding-left: 1.3rem;
    }
    .guides .wrapper .container .shows img {
        height: 37rem;
        width: 14rem;
        object-fit: cover;
    }
}
.guides .wrapper .container .shows .img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.guides .wrapper .container .shows .img-wrapper:first-child {
    display: none;
}
.guides .wrapper .container .shows .img-wrapper:nth-child(2) {
    align-self: flex-start;
}
.guides .wrapper .container .shows .img-wrapper:nth-child(3) .box {
    width: 100%;
    height: 9rem;
    background-color: var(--color-black);
    color: var(--color-white);
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    padding: 0 2rem 1rem;
    gap: 1rem;
}
.guides .wrapper .container .shows .img-wrapper:nth-child(3) .box .line {
    width: 1px;
    height: 70%;
    background-color: var(--color-white);
}
.guides .wrapper .container .shows .img-wrapper:nth-child(3) .box .content {
    font-size: 1.6rem;
    font-weight: 500;
}
.guides .wrapper .container .body .signin {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6rem;
    width: 29.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4rem;
}
.guides .wrapper .container .body .signin .button-signin {
    border: 1px solid var(--color-black);
    width: fit-content;
    padding: 1rem 2rem;
    width: 21rem;
    border-left: 1rem solid var(--color-text-secondary);
    cursor: pointer;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        border-left-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.guides .wrapper .container .body .signin .button-signin:hover,
.guides .wrapper .container .body .signin .button-signin:focus-visible {
    color: var(--color-white);
    border-color: var(--color-white);
    border-left-color: var(--color-white);
    box-shadow: 0 4px 10px rgba(108, 0, 108, 0.15);
    outline: none;
    background: var(--color-white);
    color: var(--color-black);
    transition: border 0.25s ease;
}
.guides .wrapper .container .body .signin .button-signin:hover .link .content,
.guides
    .wrapper
    .container
    .body
    .signin
    .button-signin:focus-visible
    .link
    .content {
    color: var(--color-black);
}

.guides .wrapper .container .body .signin .button-signin .link .content {
    font-size: 1.6rem;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.25s ease;
}
.guides .wrapper .container .body .signin .button-signin .link .content:hover {
    transition: border 0.25s ease;
}

.guides .wrapper .container .body .signin .button-signin .link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.guides .wrapper .container .body .signin .button-signin .link .content {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--color-black);
    text-decoration: none;
}
@media (min-width: 792px) {
    .guides .wrapper {
        gap: 8rem;
    }
    .guides .wrapper .container {
        flex-direction: row;
    }
    .guides .wrapper .container .control {
        align-self: flex-start;
    }
    .guides .wrapper .container .shows {
        padding: 0;
    }
    .guides .wrapper .container .shows .img-wrapper:first-child {
        display: block;
        align-self: flex-start;
    }
    .guides .wrapper .container .shows .img-wrapper img {
        object-fit: cover;
        width: 15rem;
        height: 41.7rem;
        overflow: hidden;
    }
    .guides .wrapper .container .shows .img-wrapper:nth-child(2) {
        order: 3;
        align-self: flex-end;
    }
    .guides .wrapper .container .shows .img-wrapper:nth-child(3) {
        order: 2;
        padding-top: 5rem;
    }
    .guides .wrapper .container .shows .img-wrapper:nth-child(3) .box {
        height: 13.2rem;
    }
    .guides .wrapper .container .control .body {
        padding: 2rem;
    }
    .guides .wrapper .container .body .signin {
        display: block;
        position: relative;
        margin-top: 0;
        width: 100%;
    }
    .guides .wrapper .container .body .signin .button-signin {
        margin-top: -1rem;
        border: none;
        width: auto;
        cursor: pointer;
    }
    .guides .wrapper .container .body .signin .button-signin .link {
        display: block;
        justify-self: center;
    }
    .guides .wrapper .container .body .signin .button-signin .link .content {
        font-size: 1.6rem;
        font-weight: 400;
        color: var(--color-white);
        text-decoration: none;
    }
    .guides .wrapper .container .body .signin .button-signin .link .ico {
        display: none;
    }
    .guides .wrapper .container .control .body .terms-link {
        position: inherit;
        top: auto;
        left: auto;
        margin-top: 0;
        align-self: flex-end;
    }
    .guides .wrapper .container .control .body .terms-link span {
        font-size: 1.2rem;
        font-weight: 400;
        color: #d5d5d5;
    }
}
.signup-email {
    display: flex;
    justify-content: center;
    padding: 16rem 2rem 5rem;
}
.signup-email .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    min-width: 33rem;
}
.signup-email .wrapper .title {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-black);
    text-align: center;
}
.signup-email .wrapper .signup-form {
    position: relative;
    display: flex;
    justify-content: center;
}
.signup-email .wrapper .signup-form .email-input {
    min-width: 28rem;
    width: 100%;
    height: 5rem;
    border: 0.5px solid var(--color-black);
    padding: 2rem 10rem 2rem 2rem;
}
.signup-email .wrapper .signup-form .email-input::placeholder {
    color: var(--color-text-third);
    font-size: 1.2rem;
    font-weight: 500;
}
.signup-email .wrapper .signup-form .signup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: absolute;
    top: 27%;
    right: 4%;
    border: none;
    border-radius: 30px;
    background-color: #fff0;
    color: var(--color-white);
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
}
.signup-email .wrapper .signup-form .signup-btn span {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-black);
}
.signup-email .wrapper .signup-form .signup-btn .ico {
    width: 2.4rem;
    height: 2.4rem;
    fill: var(--color-black);
}
@media (min-width: 740px) {
    .signup-email .wrapper .title {
        font-size: 3rem;
    }
    .signup-email .wrapper .signup-form .email-input {
        width: 50rem;
    }
}
@media (min-width: 792px) {
    .signup-email {
        padding: 10rem 2rem 6rem;
    }
}
@media (min-width: 740px) {
    body.active-search {
        overflow-y: scroll;
    }
    .latest-blog-posts .wrapper .control .categories .selector-wrapper::after {
        content: "▼";
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.8rem;
        color: var(--color-white);
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .latest-blog-posts
        .wrapper
        .control
        .categories
        .selector-wrapper:focus-within::after {
        transform: translateY(-50%) rotate(180deg);
    }
}
.calendar-container {
    position: fixed;
    width: 550px;
    height: auto;
    max-width: 90vw;
    padding: 2rem;
    box-shadow:
        0 8px 32px 0 rgb(120 0 120 / 0.45),
        0 1.5px 8px 0 rgb(0 0 0 / 0.7),
        0 0 0 2px #333;
    display: flex;
    flex-direction: column;
    gap: 4.5rem;
    background-color: #202020;
    color: #fff;
    z-index: 1000;
    border-radius: 0;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.3);
}
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5rem;
}
.calendar-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 0 2rem;
    width: 100%;
    box-sizing: border-box;
}
.calendar-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.6rem;
    font-weight: 600;
}
.calendar-buttons {
    display: flex;
    gap: 1rem;
}
.calendar-button {
    padding: 8px 16px;
    background-color: #fff0;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 0;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    font-weight: 500;
}
.calendar-button:hover {
    background-color: #fff;
    color: #000;
    box-shadow: 0 4px 12px rgb(255 255 255 / 0.3);
}
.calendar-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgb(255 255 255 / 0.2);
}
.calendar-body {
    padding: 1rem 0;
}
.calendar-days-of-week {
    list-style: none;
    font-size: 1.4rem;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    justify-items: center;
    width: 100%;
    gap: 0.5rem;
    padding: 0 0.5rem;
}
.calendar-days {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
    row-gap: 2.2rem;
    column-gap: 0.5rem;
    padding: 0 0.5rem;
}
.day {
    position: relative;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    min-height: 3.2rem;
    min-width: 3.2rem;
}
.day:hover {
    color: #000;
}
.day:hover::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.2rem;
    height: 3.2rem;
    background-color: #fff;
    border-radius: 50%;
    z-index: -1;
}
.day.prev-month,
.day.next-month {
    color: #e9dada;
    pointer-events: none;
    opacity: 0.7;
}
.day.disabled {
    color: #e9dada;
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.7;
}
.day.disabled:hover {
    color: #666;
}
.day.disabled:hover::before {
    display: none;
}
.day.today {
    color: #000;
    font-weight: 700;
    z-index: 2;
}
.day.today::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.2rem;
    height: 3.2rem;
    background-color: #fff;
    border-radius: 50%;
    z-index: -1;
    border: 1px solid #000;
}
.day.selected {
    color: #fff;
    font-weight: 700;
    z-index: 3;
    position: relative;
}
.day.selected::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.2rem;
    height: 3.2rem;
    background-color: #6c006c;
    border-radius: 50%;
    z-index: -1;
    opacity: 1;
}
.day.range-start,
.day.range-end {
    color: #fff;
    font-weight: 700;
    position: relative;
}
.day.range-start::before,
.day.range-end::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.2rem;
    height: 3.2rem;
    background-color: #6c006c;
    border-radius: 50%;
    z-index: -1;
}
.day.range-start:not(.in-range) {
    color: #fff;
    font-weight: 700;
}
.day.range-start:not(.in-range)::before {
    background-color: #6c006c;
    z-index: -1;
}
.day.in-range {
    color: #fff;
    font-weight: 700;
}
.day.in-range::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.2rem;
    height: 3.2rem;
    background-color: #6c006c;
    border-radius: 50%;
    z-index: -1;
}
.day.selected:hover,
.day.selected.range-start,
.day.selected.range-end,
.day.selected.in-range,
.day.selected.today {
    color: #fff;
}
.day.selected:hover::before,
.day.selected.range-start::before,
.day.selected.range-end::before,
.day.selected.in-range::before,
.day.selected.today::before {
    background-color: #6c006c;
    opacity: 1;
    border: none;
}
.day.in-range.today,
.day.range-start.today,
.day.range-end.today,
.day.selected.today {
    color: #fff;
    font-weight: 700;
}
.day.in-range.today::before,
.day.range-start.today::before,
.day.range-end.today::before,
.day.selected.today::before {
    background-color: #6c006c;
    border: none;
}
.day.current-month:hover {
    color: #000;
}
.day.current-month:hover::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.2rem;
    height: 3.2rem;
    background-color: rgb(255 255 255 / 0.8);
    border-radius: 50%;
    z-index: -1;
}
.day.selected:hover::before,
.day.range-start:hover::before,
.day.range-end:hover::before,
.day.in-range:hover::before {
    background-color: #8b1a8b;
}
.day.range-start {
    z-index: 2;
}
.day.in-range-other-month {
    color: #fff;
    font-weight: 400;
    opacity: 0.7;
}
.day.in-range-other-month::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.2rem;
    height: 3.2rem;
    background-color: #6c006c;
    border-radius: 50%;
    z-index: -1;
    opacity: 0.6;
    border: 1px dashed #fff;
}
.day.range-start.prev-month::before,
.day.range-start.next-month::before,
.day.range-end.prev-month::before,
.day.range-end.next-month::before {
    border: 2px dotted #fff;
    opacity: 0.6;
}
.day.in-range_other-month:hover::before {
    opacity: 0.8;
    background-color: #8b1a8b;
}
.calendar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    border-top: 1px solid #333;
    margin-top: 1rem;
}
.calendar-action-button {
    padding: 8px 16px;
    background-color: #fff0;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 0;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 500;
    transition: all 0.3s ease;
    flex: 0 0 auto;
    max-width: 120px;
    min-width: 80px;
}
.calendar-action-button:hover {
    background-color: #fff;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(255 255 255 / 0.3);
}
.calendar-action-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgb(255 255 255 / 0.2);
}
.calendar-action-button:disabled {
    background-color: #fff0;
    color: #666;
    border-color: #666;
    cursor: not-allowed;
    opacity: 0.5;
}
.calendar-action-button:disabled:hover {
    background-color: #fff0;
    color: #666;
    transform: none;
    box-shadow: none;
}
@media (min-width: 541px) and (max-width: 768px) {
    .calendar-container {
        width: 95vw;
        max-width: 95vw;
        padding: 1.5rem;
        gap: 3.5rem;
    }
    .calendar-header {
        gap: 4rem;
    }
    .calendar-controls {
        gap: 2rem;
        padding: 0 1.5rem;
    }
    .calendar-date {
        font-size: 1.4rem;
        gap: 6px;
    }
    .calendar-button {
        padding: 6px 12px;
        font-size: 1.1rem;
    }
    .calendar-body {
        padding: 0.8rem 0;
    }
    .calendar-days-of-week {
        font-size: 1.2rem;
        gap: 0.3rem;
        padding: 0 0.3rem;
    }
    .calendar-days {
        row-gap: 1.8rem;
        column-gap: 0.3rem;
        padding: 0 0.3rem;
    }
    .day {
        font-size: 1.3rem;
        min-height: 3rem;
        min-width: 3rem;
    }
    .day:hover::before,
    .day.selected::before,
    .day.range-start::before,
    .day.range-end::before,
    .day.in-range::before,
    .day.today::before,
    .day.current-month:hover::before,
    .day.in-range-other-month::before {
        width: 3rem;
        height: 3rem;
    }
    .calendar-footer {
        gap: 0.8rem;
        padding: 0.8rem 1.5rem;
    }
    .calendar-action-button {
        padding: 6px 12px;
        font-size: 1.1rem;
        max-width: 100px;
        min-width: 70px;
    }
}
@media (max-width: 540px) {
    .calendar-container {
        width: 100vw;
        max-width: 100vw;
        min-width: 380px;
        height: 100%;
        padding: 2rem 1rem;
        border-radius: 0;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        gap: 3rem;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .calendar-header {
        gap: 3rem;
    }
    .calendar-controls {
        gap: 1.5rem;
        padding: 0 1rem;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .calendar-date {
        font-size: 1.3rem;
        gap: 4px;
        margin-bottom: 1rem;
    }
    .calendar-button {
        padding: 8px 12px;
        font-size: 1rem;
        min-width: 70px;
    }
    .calendar-body {
        padding: 0.5rem 0;
    }
    .calendar-days-of-week {
        font-size: 1.1rem;
        gap: 0.2rem;
        padding: 0 0.2rem;
    }
    .calendar-days {
        row-gap: 1.5rem;
        column-gap: 0.2rem;
        padding: 0 0.2rem;
    }
    .day {
        font-size: 1.2rem;
        min-height: 2.8rem;
        min-width: 2.8rem;
    }
    .day:hover::before,
    .day.selected::before,
    .day.range-start::before,
    .day.range-end::before,
    .day.in-range::before,
    .day.today::before,
    .day.current-month:hover::before,
    .day.in-range-other-month::before {
        width: 2.8rem;
        height: 2.8rem;
    }
    .calendar-footer {
        gap: 0.8rem;
        padding: 0.8rem 1rem;
        flex-direction: row;
        justify-content: space-between;
    }
    .calendar-action-button {
        padding: 8px 12px;
        font-size: 1rem;
        max-width: 100px;
        min-width: 80px;
        flex: 0 0 auto;
    }
}
@media (max-width: 400px) {
    .calendar-days-of-week {
        font-size: 1.1rem;
        gap: 0.2rem;
        padding: 0 0.2rem;
    }
    .calendar-days {
        row-gap: 1.5rem;
        column-gap: 0.2rem;
        padding: 0 0.2rem;
    }
    .day {
        font-size: 1.2rem;
        min-height: 2.8rem;
        min-width: 2.8rem;
    }
    .day:hover::before,
    .day.selected::before,
    .day.range-start::before,
    .day.range-end::before,
    .day.in-range::before,
    .day.today::before,
    .day.current-month:hover::before,
    .day.in-range-other-month::before {
        width: 2.8rem;
        height: 2.8rem;
    }
}
.location-picker {
    position: absolute;
    background: #000;
    color: #fff;
    border-radius: 0;
    z-index: 1000;
    max-height: 350px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
    min-width: 300px;
    max-width: 90vw;
}
.location-picker--active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.location-picker--custom-position {
    position: absolute;
}
.location-picker--mobile-position {
    position: fixed;
    top: 20px;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%) translateY(-20px);
    max-width: calc(100vw - 40px);
    max-height: 60vh;
    margin: 0;
}
.location-picker--mobile-position.location-picker--active {
    transform: translateX(-50%) translateY(0);
}
.location-picker--top {
    bottom: 100%;
    left: 0;
    transform: translateY(-10px);
    margin-bottom: 8px;
}
.location-picker--top.location-picker--active {
    transform: translateY(0);
}
.location-picker--top-left {
    bottom: 100%;
    left: 0;
    transform: translateY(-10px);
    margin-bottom: 8px;
}
.location-picker--top-left.location-picker--active {
    transform: translateY(0);
}
.location-picker--top-right {
    bottom: 100%;
    right: 0;
    transform: translateY(-10px);
    margin-bottom: 8px;
}
.location-picker--top-right.location-picker--active {
    transform: translateY(0);
}
.location-picker--bottom {
    top: 100%;
    left: 0;
    transform: translateY(-10px);
    margin-top: 8px;
}
.location-picker--bottom.location-picker--active {
    transform: translateY(0);
}
.location-picker--bottom-left {
    top: 100%;
    left: 0;
    transform: translateY(-10px);
    margin-top: 8px;
}
.location-picker--bottom-left.location-picker--active {
    transform: translateY(0);
}
.location-picker--bottom-right {
    top: 100%;
    right: 0;
    transform: translateY(-10px);
    margin-top: 8px;
}
.location-picker--bottom-right.location-picker--active {
    transform: translateY(0);
}
@media (max-width: 768px) {
    .location-picker {
        position: fixed;
        top: 20px;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translateX(-50%) translateY(-20px);
        max-width: calc(100vw - 40px);
        max-height: 100%;
        margin: 0;
        z-index: 10000;
    }
    .location-picker--active {
        transform: translateX(-50%) translateY(0);
    }
}
@media (min-width: 769px) {
    .location-picker {
        position: absolute;
        max-width: 90vw;
        max-height: 350px;
        transform: translateY(-10px);
    }
    .location-picker--active {
        transform: translateY(0);
    }
}
.location-picker__search {
    padding: 2rem 2rem 1rem 2rem;
    border-bottom: 1px solid #333;
}
.location-picker__input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #333;
    border-radius: 0;
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background-color: #111;
    color: #fff;
}
.location-picker__input:focus {
    border-color: #555;
    background-color: #222;
}
.location-picker__input::placeholder {
    color: #ccc;
}
.location-picker__results {
    max-height: 250px;
    overflow-y: auto;
}
.location-picker__results::-webkit-scrollbar {
    width: 8px;
}
.location-picker__results::-webkit-scrollbar-track {
    background: #111;
}
.location-picker__results::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 0;
}
.location-picker__results::-webkit-scrollbar-thumb:hover {
    background: #888;
}
.location-picker__item {
    padding: 16px 2rem;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid #222;
    color: #fff;
}
.location-picker__item:hover {
    background-color: #111;
    color: #fff;
}
.location-picker__item:last-child {
    border-bottom: none;
}
.location-picker__item-icon {
    width: 16px;
    height: 16px;
    color: #fff;
    flex-shrink: 0;
}
.location-picker__item-info {
    flex: 1;
}
.location-picker__item-city {
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px;
    font-family: "Poppins", sans-serif;
}
.location-picker__item-country {
    font-size: 12px;
    color: #ccc;
    font-family: "Poppins", sans-serif;
}
.location-picker__message {
    padding: 2rem;
    text-align: center;
    color: #ccc;
    font-size: 14px;
    font-family: "Poppins", sans-serif;
}
.location-picker__message--no-results {
    color: #ccc;
}
.location-picker-trigger--active {
    border-radius: 8px;
}
.location-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 0.5);
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-color: rgb(90 88 88 / 0.4);
    z-index: 9999;
    backdrop-filter: blur(1px);
}
.location-picker-overlay--active {
    display: block;
    opacity: 1;
}
@media (max-width: 768px) {
    .location-picker-overlay--active {
        display: block;
    }
}
@media (min-width: 769px) {
    .location-picker-overlay,
    .location-picker-overlay--active {
        display: none;
    }
}
.location-picker-body-no-scroll {
    overflow: hidden;
}

/* Custom Loader Animation */
.loader {
    height: 4px;
    width: 130px;
    --c: no-repeat linear-gradient(#900090 0 0);
    background: var(--c), var(--c), #d7b8fc;
    background-size: 60% 100%;
    animation: l16 3s infinite;
}

@keyframes l16 {
    0% {
        background-position:
            -150% 0,
            -150% 0;
    }
    66% {
        background-position:
            250% 0,
            -150% 0;
    }
    100% {
        background-position:
            250% 0,
            250% 0;
    }
}

.popup-wrapper {
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
.popup,
.popup-wrapper {
    display: none;
    position: fixed;
    width: 100%;
}
.popup {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ededed;
    z-index: 1000;
    height: fit-content;
    padding: 2rem;
    align-items: center;
}
.popup-content {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: fit-content;
    margin: 0 auto;
    padding: 0 2rem 0 4rem;
}
#popup-title {
    margin: 0;
    font-size: 18px;
    color: #333;
    font-weight: 600;
    text-align: left;
}
#popup-message {
    margin: 0 auto;
    padding: 5px 8px;
    font-size: 1.6rem;
    color: #000;
    background-color: rgba(0, 191, 13, 0.22745098039215686);
}
.msg-btn {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
}
.popup-content button {
    color: #000;
    border: none;
    padding: 8px 10px;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.popup-content button:hover {
    background-color: #d9ebdc;
}

/* Favorite functionality */
.ico-hearth {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ico-hearth.favorited svg path {
    fill: var(--color-primary) !important;
    stroke: var(--color-primary) !important;
}

.ico-hearth.favorited path {
    fill: var(--color-primary) !important;
    stroke: var(--color-primary) !important;
}

.ico-hearth .favorite-tooltip,
svg.ico-hearth + .favorite-tooltip {
    position: absolute;
    top: -200%;
    left: -11%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 1.2rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
    pointer-events: none;
    z-index: 9999;
}

.ico-hearth .favorite-tooltip.show,
svg.ico-hearth + .favorite-tooltip.show {
    opacity: 1;
    visibility: visible;
}

/* Favorite functionality */
.ico-hearth {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ico-hearth.favorited svg path {
    fill: var(--color-primary) !important;
    stroke: var(--color-primary) !important;
}

.ico-hearth.favorited path {
    fill: var(--color-primary) !important;
    stroke: var(--color-primary) !important;
}

.ico-hearth .favorite-tooltip,
svg.ico-hearth + .favorite-tooltip {
    position: absolute;
    top: -200%;
    left: -11%;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 1.2rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;

    pointer-events: none;
    z-index: 9999;
}

.ico-hearth .favorite-tooltip.show,
svg.ico-hearth + .favorite-tooltip.show {
    opacity: 1;
    visibility: visible;
    top: -200%;
    left: -11%;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.first-program .wrapper .container.lazy-bg {
    background-image: none;
}

.tips .wrapper .counter-wrapper {
    background-image: url("/storage/media/tripvalory/chess.png");
}