@font-face {
    font-family: "Copperplate Gothic Std 33 BC";
    font-style: normal;
    font-weight: normal;
    src: local("Copperplate Gothic Std 33 BC"),
        url("../fonts/Copperplate-Gothic-Std-33-BC.woff") format("woff");
}

@font-face {
    font-family: 'MinervaModern W00 Regular';
    src: url('../fonts/MinervaModern.woff2') format('woff2'), url("../fonts/MinervaModern.woff") format("woff");
     font-weight: normal;
     font-style: normal;
}

body {
    font-family: 'MinervaModern W00 Regular', sans-serif;
}

/* --- logo ---*/
#hl-landingpage .logo {
    position: absolute;
    left: 0;
    right: 0;
    top: 37%;
    margin-left: auto;
    margin-right: auto;
    height: 20%;
    max-height: 110px;
}
/* --- end logo ---*/

/* --- btn ---*/
#hl-landingpage .btn {
    position: absolute;
    left: 0;
    right: 0;
    top: 60%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    color: #ffffff;
    width: 30%;
}
#hl-landingpage .btn-spa {
    background-color: #e1ab25;
}
#hl-landingpage .btn-resort {
    background-color: #917645;
}
#hl-landingpage .btn {
    box-shadow: 2px 2px 10px #000000;
}
#hl-landingpage .btn:hover {
    box-shadow: 4px 4px 15px #000000;
}
/* --- end btn --- */

/* --- bg ---*/
#hl-landingpage .bg {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100vh;
}
/* --- end bg ---*/

/* --- overlay --- */
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0.6;
    transition: 0.5s ease;
    background-color: #000000;
}
/* .overlay:hover {
    opacity: 0;
} */
.overlay2:hover .overlay {
    opacity: 0;
}
/* --- end overlay --- */

/* footer */
.footer-position {
    font-family: Nunito;
    position: absolute;
    bottom: 0%;
}
.footer {
    color: #464646;
    padding: 10px;
    text-align: center;
    background-color: #000000;
}
/* end footer */

@media (min-width: 0px) and (max-width: 767.9px) {
    #hl-landingpage .logo {
        top: 30%;
        height: 30%;
    }
    #hl-landingpage .btn {
        top: 60%;
        width: 55%;
        padding: 5px;
    }

    #hl-landingpage .bg {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 50vh;
        max-height: 175vh;
    }
    .footer-position {
        position: unset;
        bottom: 0% !important;
    }
    .footer {
        font-size: 10px;
        left: 0%;
        bottom: 0;
    }
}
@media (min-width: 768px) and (max-width: 1023.9px) {
    #hl-landingpage .bg {
        max-height: 180vh;
    }

    #hl-landingpage .btn {
        width: 30%;
        padding: 20px;
    }

    .footer-position {
        position: unset;
        bottom: 0% !important;
    }

    .footer {
        left: 0%;
        bottom: 0;
    }
}
@media (min-width: 1024px) and (max-width: 1024.9px) {
    #hl-landingpage .bg {
        max-height: 180vh;
    }

    #hl-landingpage .btn {
        width: 30%;
        padding: 20px;
    }

    .footer-position {
        position: unset;
        bottom: 0% !important;
    }

    .footer {
        left: 0%;
        bottom: 0;
    }
}