@import url('https://use.typekit.net/vrp2tco.css');
@import url('https://use.typekit.net/lls8xdn.css');

@font-face {
    font-family: 'Romelio Sans';
    src: url('../fonts/RomelioSans.woff2') format('woff2'), url('../fonts/RomelioSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html,
body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
    flex: 0;
}

.mainContent {
    flex: 1;
    display: flex;
    flex-direction: column;
}

a {
    color: #005F7F !important;
    text-decoration: underline
}

    a:hover {
        color: #005F7F !important;
        text-decoration: none
    }

:root {
    --font-body: "proxima-nova", sans-serif;
    --font-display: "Romelio Sans", serif;
    --font-weight-normal: 400;
    --black: #000000;
    --white: #ffffff;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: start;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-weight: normal;
    color: var(--black);
    line-height: 1.1;
}

p {
    color: #000;
    line-height: 1.4;
    margin-bottom: 20px;
}

.arcilla-text-color {
    color: #d66e45;
}

.market-place {
    margin-top: 50px;
}

.navbar .nav-link,
.header-right-top .details a {
    font-family: var(--font-body);
    color: #000 !important;
}

.section-title h1 {
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-weight: normal;
    color: var(--black);
    line-height: 1.1;
    font-size: 24px;
}

.section-title hr {
    display: none;
}

.z-9 {
    z-index: 9;
}

.panel-intro--26 {
    padding-top: 30px;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.title-section h1,
.title-section h4 {
    font-size: 24px;
    font-family: var(--font-display);
    font-weight: normal;
    line-height: 1.1;
}

title-section h4 {
    font-size: 18px;
}

.banner-content h3,
.login-card h4 {
    font-family: var(--font-display);
}

.body-content p {
    font-size: 1rem;
    margin-bottom: 20px;
}

.welcome-to-loscabos {
    padding: 20px 20px 20px 0;
    position: relative;
}

    .welcome-to-loscabos img {
        width: 100%;
        height: auto;
    }

    .welcome-to-loscabos::before {
        position: absolute;
        inset: 0 0 0 28px;
        z-index: -1;
        display: block;
        content: '';
        background: #9DD4CA;
    }

.header-top-area {
    padding-left: 36px;
    padding-right: 36px;
}

.home-page .header-section {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
}

.home-banner .home-inner {
    padding-top: 0;
    min-height: auto;
}

.home-banner .home-inner-section {
    padding-top: 140px;
    min-height: 90vh;
}

.home-page .navbar .nav-link,
.home-page .header-right-top .details a.link-bar:first-child,
.home-page .selected-display,
.home-page .selected-display a,
.home-page .header-right-top .details a,
.announcementPopup .popup-content h2,
.announcementPopup .popup-content h3 {
    color: #fff !important;
}

.header-right-top .details a.link-bar:first-child {
    color: #005F7F !important;
}

.header-section {
    background-color: #fff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
}

.home-page .header-section {
    background-color: transparent;
    box-shadow: none;
}

.home-page .arrow-section svg path {
    stroke: #fff;
}

.bg-image {
    background: no-repeat center top #fff;
    background-size: cover;
}

.autoplayer-pro {
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;
    aspect-ratio: 1.5 / 1;
    height: 100vh;
}

.video {
    position: absolute;
    transform: translate(-50%, -50%);
    width: auto;
    opacity: 1;
    z-index: 2;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transition: opacity 300ms cubic-bezier(0, 0, 0.3, 1);
}

.service-section--26 img {
    width: 100%;
}

.service-content-26 {
    position: relative;
    padding: 20px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .service-content-26 h4,
    .service-content-26 h5,
    .service-content-26 p,
    .service-content-26 h6,
    .loyalty-content-26 {
        color: #fff;
    }

    .service-content-26 h6 {
        font-size: 1.125rem;
        font-weight: 700;
    }

    .service-content-26::before {
        position: absolute;
        inset: 0;
        z-index: -1;
        display: block;
        content: '';
        background: url('../images/Rectangle_510.jpg') no-repeat center center / cover;
        pointer-events: none;
    }

.bg-transparent::before {
    display: none !important;
}

.loyalty-content-26 p span,
.loyalty-content-26 h6 span,
.loyalty-content-26 h5 span {
    font-weight: 700;
}

.loyalty-content-26 h4 {
    margin-bottom: 20px;
}

.loyalty-content-26 {
    font-size: 1rem;
    margin-bottom: 20px;
}

.Logincard {
    background: url('../images/Rectangle_510.jpg') no-repeat center center / cover;
    border: none;
}

.button,
.btn-cookies-pr,
.popup-content .btn-primary,
.simple.admin .primary-btn,
.simple.admin input[type='submit'],
#booking-form input[type='submit'] {
    position: relative;
    display: inline-block;
    padding: 10px 30px;
    margin: 0;
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none !important;
    background-color: #005f7f !important;
    border: 2px solid transparent;
    color: #fff !important;
    border-radius: 0;
    transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

    .button:hover,
    .login-card .button:hover,
    .btn-cookies-pr:hover,
    .popup-content .btn-primary:hover {
        border-color: #fff;
        background-color: transparent !important;
        color: #fff !important;
    }

    .card.register .button:hover,
    .simple.admin .primary-btn:hover,
    .simple.admin input[type='submit']:hover,
    .point-requests .button:hover,
    #booking-form .button:hover,
    .simple.admin a:hover,
    #booking-form input[type='submit']:hover,
    #signInModal .buttons-align .button:hover,
    .booking-section .booking-block .form--section .button:hover,
    .resources-section #nav-tabContent .add-button .button:hover,
    #SecurityQuestion .form--section .button:hover {
        border-color: #005f7f !important;
        background-color: #ffffff !important;
        color: #005f7f !important;
    }

body .simple.admin .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
body .booking-history #nav-tabContent .table-wrapper .dataTables_paginate .paginate_button.current {
    background-color: #005f7f !important;
    border-color: #005f7f !important;
    background: none;
    color: #fff !important;
}

body .simple.admin .dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body .booking-history #nav-tabContent .table-wrapper .dataTables_paginate .paginate_button.disabled {
    background-color: #fff !important;
    border-color: #005f7f !important;
    color: #005f7f !important;
}

    body .simple.admin .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
    body .booking-history #nav-tabContent .table-wrapper .dataTables_paginate .paginate_button {
        background: #005f7f !important;
        border-color: #005f7f !important;
        color: #fff !important;
    }

body .simple.admin .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #005f7f !important;
}

.button-secondary {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.15;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none !important;
    color: #000 !important;
    background-color: transparent;
    border: none;
    transition: color 0.4s ease, background-color 0.4s ease;
}

    /* Bottom + Left border */
    .button-secondary::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-left: 2px solid #005F7F;
        border-bottom: 2px solid #005F7F;
        transform: scaleX(1);
        transform-origin: left;
        transition: transform 0.4s ease;
        pointer-events: none;
    }

    /* Top + Right border */
    .button-secondary::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-top: 2px solid #005F7F;
        border-right: 2px solid #005F7F;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.4s ease;
        pointer-events: none;
    }

    /* Hover animation */
    .button-secondary:hover::before {
        transform: scaleX(1);
    }

    .button-secondary:hover::after {
        transform: scaleX(1);
    }

    .button-secondary:hover {
        color: #000 !important;
    }



.btn-cookies-pr,
.popup-content .btn-primary {
    font-size: 13px;
}

.card.register {
    margin-top: 40px;
}

.popup-content .btn-primary {
    margin-top: 10px;
}

.footer-top-area {
    position: relative;
}

    .footer-top-area .background-img img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .footer-top-area::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        pointer-events: none;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
        opacity: 0.6;
    }

.foot-right ul li a {
    color: #fff !important;
    text-decoration: none;
}

.background-img {
    position: absolute;
    inset: 0;
}

.footer-top-area .circle-wrapper .icon a {
    animation: none;
    background: #F1A240;
    border: 1px solid #F1A240;
    width: 40px;
    height: 40px;
    color: #fff !important;
    display: block;
    border-radius: 40px;
    text-align: center;
    transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
    line-height: 40px;
}

.footer-top-area .social-icons .icon a:hover {
    color: #F1A240 !important;
    background-color: transparent;
}

    .footer-top-area .social-icons .icon a:hover i {
        color: #F1A240 !important;
    }

.cookieConsentPopup,
.announcementPopup .popup-content {
    background: #242F44;
}

.resources {
    background-color: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 50px;
    position: relative;
}

    .resources h5 > a {
        position: absolute;
        bottom: -22px;
        padding: 12px 14px;
        left: 0px;
        z-index: 2;
        width: 80%;
        max-width: max-content;
        margin: -20px 0 0;
        font-family: var(--font-display);
        font-weight: 400;
        font-size: 0.875rem;
        line-height: 1.15;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: inherit;
        background: #f7f7f7;
        text-decoration: none;
    }

        .resources h5 > a:hover {
            color: inherit !important;
        }

.resources-section {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
}

/*    .resources-section::before {
        position: absolute;
        inset: 120px auto 0 50%;
        z-index: -1;
        translate: -50% 0;
        display: block;
        width: 100%;
        content: '';
        background: url('../images/Cards_4Across_BG.jpg') no-repeat center center / cover;
        pointer-events: none;
    }*/

.Logincard .form-check-label,
.Logincard .forgot a {
    color: #fff !important
}

.service-section--26 {
    box-shadow: 0px 4px 50px 0px rgba(0, 0, 0, 0.25);
    margin-bottom: 30px;
}

.simple.admin,
.myaccount--section-26 {
    margin-top: 50px;
}

    .simple.admin .nav.nav-tabs,
    .myaccount--section-26 .nav.nav-tabs {
        width: 100%;
        border: none;
        display: flex;
        justify-content: center;
        gap: 80px;
    }

        .simple.admin .nav.nav-tabs .nav-link,
        .myaccount--section-26 .nav.nav-tabs .nav-link {
            position: relative;
            display: inline-block;
            padding: 15px 30px;
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 0.8125rem;
            line-height: 1.15;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            text-decoration: none !important;
            color: #000 !important;
            background-color: transparent;
            border: none !important;
            transition: color 0.4s ease, background-color 0.4s ease;
            border-radius: 0;
        }

            .simple.admin .nav.nav-tabs .nav-link a,
            .myaccount--section-26 .nav.nav-tabs .nav-link a {
                color: #000 !important;
                background: none !important;
            }

            /* Bottom + Left border */
            .simple.admin .nav.nav-tabs .nav-link::before,
            .myaccount--section-26 .nav.nav-tabs .nav-link::before {
                content: "";
                position: absolute;
                inset: -2px;
                border-left: 2px solid #85AF9A;
                border-bottom: 2px solid #85AF9A;
                transform: scaleX(1);
                transform-origin: left;
                transition: transform 0.4s ease;
                pointer-events: none;
            }

            /* Top + Right border */
            .simple.admin .nav.nav-tabs .nav-link::after,
            .myaccount--section-26 .nav.nav-tabs .nav-link::after {
                content: "";
                position: absolute;
                inset: -2px;
                border-top: 2px solid #85AF9A !important;
                border-right: 2px solid #85AF9A !important;
                transform: scaleX(0);
                transform-origin: right;
                transition: transform 0.4s ease;
                pointer-events: none;
            }

            /* Hover animation */
            .simple.admin .nav.nav-tabs .nav-link:hover::before,
            .myaccount--section-26 .nav.nav-tabs .nav-link:hover {
                transform: scaleX(1);
            }

                .simple.admin .nav.nav-tabs .nav-link:hover::after,
                .myaccount--section-26 .nav.nav-tabs .nav-link:hover::after {
                    transform: scaleX(1);
                }

            .simple.admin .nav.nav-tabs .nav-link:hover,
            .simple.admin .nav.nav-tabs .nav-link.active,
            .myaccount--section-26 .nav.nav-tabs .nav-link.active {
                color: #000 !important;
                background: #85AF9A;
            }

            .simple.admin .nav.nav-tabs .nav-link.active,
            .myaccount--section-26 .nav.nav-tabs .nav-link.active {
                border: 2px solid #85AF9A !important;
            }

.myaccount--section-26 {
    box-shadow: none !important;
    border: none !important;
}

    .myaccount--section-26 .powered {
        margin-bottom: 30px;
    }

.home-page .header-section {
    background-color: transparent;
    box-shadow: none;
    background: #000000;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.50) 65%, rgba(0, 0, 0, 0) 100%);
    padding-bottom: 100px;
}

.resources-inner-section-26 {
    box-shadow: 0px 3px 20px 0px #0000001A;
    padding: 20px;
    text-align: left;
    height: auto;
    margin-bottom: 30px;
    margin-top: 0;
}

    .resources-inner-section-26 h4 {
        font-size: 1.1875rem;
        font-family: var(--font-body);
        text-align: left;
        margin-bottom: 15px;
    }

    .resources-inner-section-26 a {
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: normal;
        color: #005F7F !important;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        text-decoration: none;
    }

        .resources-inner-section-26 a > i {
            color: #F1A240
        }

body.modal-open .mainContent .header-section,
body.modal-open .mainContent .home-banner {
    filter: blur(5px);
    transition: 0.3s ease;
}

@media screen and (min-width:768px) {
    .title-section h1 {
        font-size: 28px;
    }
}

@media screen and (min-width:992px) {
    .header-top-area .logo img {
        width: 70%;
    }

    .home-page .header-top-area .logo img {
        width: 100%;
    }

    .title-section h1 {
        font-size: 33px;
    }

    .title-section h4 {
        font-size: 28px;
    }

    .section-title h1 {
        font-size: 36px;
    }

    .panel-intro--26 {
        padding-top: 50px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .welcome-to-loscabos {
        padding: 40px 40px 40px 0;
    }

    .service-content-26 {
        padding: 30px 30px;
    }

    .service-section--26 {
        margin-bottom: 50px;
    }
}

@media screen and (min-width:1200px) {
    .title-section h1 {
        font-size: 66px;
    }

    .title-section h4 {
        font-size: 32px;
    }

    .panel-intro--26 {
        padding-top: 100px;
        padding-bottom: 30px;
        margin-bottom: 40px;
    }

    .body-content p,
    .loyalty-content-26 {
        font-size: 1.125rem
    }

    .service-content-26 {
        padding: 40px 60px;
    }

    .button {
        padding: 20px 46px;
        font-size: 0.8125rem;
    }

    .resources h5 > a {
        font-size: 1.125rem;
    }

    .service-section--26 {
        margin-bottom: 90px;
    }
}