@font-face {
    font-family: "Trajan Pro Regular";
    font-style: normal;
    font-weight: normal;
    src: local("Trajan Pro Regular"),
        url("../fonts/trajanpro/trajanpro-regular.woff") format("woff");
}

@font-face {
    font-family: "Trajan Pro Bold";
    font-style: normal;
    font-weight: normal;
    src: local("Trajan Pro Bold"),
        url("../fonts/trajanpro/trajanpro-bold.woff") format("woff");
}

@font-face {
    font-family: "Baskerville Old Face";
    font-style: normal;
    font-weight: normal;
    src: local("Baskerville Old Face"),
        url("../fonts/baskerville-old-face.ttf") format("ttf");
}

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    background-color: rgb(255, 255, 255);
    font-family: Baskerville Old Face;
}

/* video hero home */
.gradient {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    width: 100%;
    height: 80vh;
    max-height: 758px;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.video-header {
    background: rgba(255, 255, 255, 0.1);
    margin-top: 125px;
    position: absolute;
    text-align: center;
}
.video-header,
.video-header video,
.video-header .viewport-header {
    width: 100vw;
    height: 80vh;
    position: absolute;
    top: 0;
    left: 0;
}
.video-header video {
    background: #ba9c60;
    object-fit: cover;
}
.video-header .viewport-header {
    display: flex;
    align-items: center;
    justify-content: center;
}
.viewport-header h1 {
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.3vw;
    line-height: 1.2;
    font-size: 3vw;
    text-align: center;
    width: 70%;
    font-family: "Trajan Pro Bold";
    z-index: 1;
}
.viewport-header h1 span {
    display: block;
    font-size: 10vw;
    letter-spacing: -0.6rem;
}
/* end video hero home */

.hero-careers {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("../img/careers/hero-careers-2950.jpg");
    height: 60vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-loyalty {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("../img/loyalty/hero-loyalty.jpg");
    height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-premier {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("../img/premier/hero-premier.jpg");
    height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.hero-medan {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("../img/medan/hero-medan.jpg");
    height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.hero-pekanbaru {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("../img/pekanbaru/hero-pekanbaru.jpg");
    height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.hero-cpz {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("../img/cpz/hero-cpz.jpg");
    height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.hero-text button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 10px 25px;
    color: black;
    background-color: #ddd;
    text-align: center;
    cursor: pointer;
}

.hero-text button:hover {
    background-color: #555;
    color: white;
}

.gcg-title {
    font-family: "Trajan Pro Regular";
    font-weight: 700;
}
.con-top {
    height: 65px;
    background-color: #ba9c60;
}
.con-top img {
    margin-left: 70px;
}
.con-top2 {
    height: 60px;
    background: linear-gradient(
        90deg,
        rgba(12, 12, 12, 1) 0%,
        rgba(32, 32, 32, 1) 35%,
        rgba(40, 40, 40, 1) 100%
    );
    border-bottom: 1px solid rgb(255, 255, 255);
}
.top-section {
    padding: 0px;
}
.top-section img {
    width: 64px;
}
.top-section a {
    text-decoration: none;
    padding: 10px;
}

.topsec-left {
    padding-top: 15px;
    float: left;
}
.topsec-left a {
    color: #ffffff;
}
.topsec-left a:hover {
    color: rgb(223, 223, 223);
}

.topsec-right {
    padding-top: 15px;
    float: right;
}
.topsec-right a {
    color: rgb(223, 223, 223);
}
.topsec-right a:hover {
    color: #ffffff;
}

.brand {
    font-family: "Trajan Pro Bold";
    color: #ffffff;
}
.navbar {
    background-color: #000000;
}

.navbar-nav {
    margin-left: 40px;
}
.nav-item {
    margin-left: 20px;
}
.nav-link {
    color: #ffffff;
}
.nav-link:hover {
    color: #d7d4d4;
}
.navbar-bgcolor {
    background: linear-gradient(
        90deg,
        rgba(12, 12, 12, 1) 0%,
        rgba(32, 32, 32, 1) 35%,
        rgba(40, 40, 40, 1) 100%
    );
}

.reserve a {
    text-decoration: none;
    color: black;
    font-family: "Trajan Pro Bold";
}
.reserve .dropdown {
    font-family: "Trajan Pro Bold";
}

.carousel .carousel-indicators button {
    width: 20px;
    height: 20px;
    border-radius: 100%;
}

#content-1 {
    background: url(../img/backgroundPattern-1.jpg);
    margin-top: 700px;
    position: relative;
}

#content-1 h3 {
    font-family: "Trajan Pro Bold";
    text-align: right;
}

#content-discover h3 {
    font-family: "Trajan Pro Bold";
}

#content-topoffers {
    font-family: "Trajan Pro Bold";
}

.faq {
    background: linear-gradient(
        90deg,
        rgba(12, 12, 12, 1) 0%,
        rgba(32, 32, 32, 1) 35%,
        rgba(40, 40, 40, 1) 100%
    );
    color: rgb(160, 158, 158);
}

.faq .container-fluid h1 {
    padding-bottom: 20px;
}
.faq h5 {
    margin: 20px;
}

.faq a {
    text-decoration: none;
    color: whitesmoke;
}

.faq .card-body {
    color: black;
}

.sec-text {
    background: url(../img/backgroundPattern-1.jpg);
}

#content-grouplogo {
    margin-top: 40px;
    padding: 20px;
}

#content-grouplogo .container {
    background-color: #000000;
    border-radius: 30px;
}
#content-grouplogo h1 {
    display: flex;
    flex-direction: row;
}
#content-grouplogo h1:before,
#content-grouplogo h1:after {
    content: "";
    flex: 1 1;
    border-bottom: 2px solid #d6b67a;
    margin: auto;
}
#content-grouplogo h1:before {
    margin-right: 10px;
}
#content-grouplogo h1:after {
    margin-left: 10px;
}

.group-logo {
    padding-bottom: 20px;
}

.group-logo img {
    width: 120px;
    margin: 15px;
}

.card-offers {
    border-radius: 30px;
    box-shadow: 5px 10px #efb630;
    text-align: right;
    padding-top: 20px;
}

.flex-container {
    display: flex;
    justify-content: space-between;
}
.left-heading {
    align-self: flex-start;
}
.right-heading {
    align-self: flex-end;
}

/* .premier-c1 {
    margin-top: 40px;
} */
.premier-c1 h1 {
    font-family: "Trajan Pro Bold";
}

#premier-room-type {
    background-color: rgb(241, 241, 239);
}
/* .premier-room-type {
    margin-top: 40px;
} */
.premier-room-type h1 {
    font-family: "Trajan Pro Bold";
}
h1 {
    font-family: "Trajan Pro Bold";
}
.premier-room-type .card {
    border-radius: 50px;
    margin: 20px;
}
.premier-room-type .card img {
    border-radius: 50px 50px 0 0;
}
.premier-room-type a {
    text-decoration: none;
    color: #d7d4d4;
}
.btn-more a {
    text-decoration: none;
    color: #d7d4d4;
}

.room-type-row {
    border: solid 1px rgb(146, 143, 143);
    padding: 5px;
    border-radius: 20px;
}

#premier-group h1 {
    font-family: "Trajan Pro Bold";
}
.amore-img img {
    width: 350px;
}
.bistronomix-img img {
    width: 350px;
}
.amavi-img img {
    width: 350px;
}

.aves h1,
.mamalian h1,
.reptile h1,
.fish h1 {
    background-color: #d09307;
    border-radius: 20px;
}

/* cpz carousel */
.gallery {
    --anim-time--hi: 266ms;
    --anim-time--med: 400ms;
    --anim-time--lo: 600ms;
    display: flex;
    place-content: center;
    max-width: clamp(30rem, 95%, 50rem);
    width: max(22.5rem, 100%);
    min-height: 20vh;
    margin-inline: auto;
    padding: clamp(0px, (30rem - 100vw) * 9999, 1rem);
}

.gallery__content--flow {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.gallery__content--flow > * {
    flex-grow: 1;
    flex-basis: calc((30rem - 100% - 1rem) * 999);
}

figure {
    display: flex;
    min-width: 14rem;
    max-height: 16rem;
    position: relative;
    border-radius: 0.35rem;
    box-shadow: rgb(40, 40, 40, 0.1) 0px 2px 3px,
        rgb(20, 20, 20, 0.2) 0px 5px 8px, rgb(0, 0, 0, 0.25) 0px 10px 12px;
    overflow: hidden;
    transition: transform var(--anim-time--med) ease;
}

figure::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        hsla(0, 0%, 0%, 0.8) 0%,
        hsla(0, 0%, 0%, 0.7) 12%,
        hsla(0, 0%, 0%, 0.2) 41.6%,
        hsla(0, 0%, 0%, 0.125) 50%,
        hsla(0, 0%, 0%, 0.01) 59.9%,
        hsla(0, 0%, 0%, 0) 100%
    );
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: var(--anim-time--med), var(--anim-time--med);
    transition-timing-function: ease, ease;
    z-index: 4;
}

.header__caption {
    z-index: 10;
    position: absolute;
    display: inline-flex;
    flex-direction: column;
    align-self: flex-end;
    width: 100%;
    gap: 0.5rem;
    padding: 1rem;
    justify-content: center;
    text-align: center;
    transform: translateY(100%);
    transition: transform var(--anim-time--hi) linear,
        opacity var(--anim-time--hi) linear;
}

figure:hover::before {
    opacity: 0.8;
}

figure:hover .header__caption {
    transform: translateY(0);
    opacity: 1;
}
figure:hover img {
    transform: scale(1);
}
.title {
    color: #fff;
}

.title--primary {
    font-size: 1.25rem;
    font-weight: bold;
}

.title--secondary {
    text-transform: uppercase;
    font-weight: bold;
}

.gallery img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
    height: 100%;
    transform: scale(1.15);
    aspect-ratio: 16 / 13;
    transition: 400ms ease-in-out;
}

.hero-loyalty .btn {
    background-color: transparent;
    color: white;
    border: solid 2px white;
}

.hero-loyalty .btn:hover {
    background-color: white;
    color: rgb(17, 17, 17);
    border: solid 2px white;
}

.hero-careers .btn {
    background-color: transparent;
    color: white;
    border: solid 2px white;
}
.hero-careers .btn:hover {
    background-color: white;
    color: rgb(17, 17, 17);
    border: solid 2px white;
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.form-control {
    border-radius: 0;
    margin-right: 5px;
}

.card-item {
    padding: 20px;
}

.career-search a {
    text-decoration: none;
    color: #000000;
}

.career-search .row:hover {
    background-color: rgba(9, 9, 9, 0.159);
}

.content-title {
    padding: 10px;
}

.content-description {
    display: flex;
    margin: 5px;
    color: #949393;
}
.content-description p {
    margin: 5px;
}
.content-description a {
    text-decoration: none;
    color: rgb(111, 109, 109);
}
.content-description a:hover {
    text-decoration: underline;
}
.fa-circle,
.fa-circle-info {
    font-size: 10px;
    padding: 5px;
    color: #555;
}

.right-side {
    text-align: end;
}

.btn-career {
    background-color: black;
    color: #d7d4d4;
}
.btn-career:hover {
    background-color: #d09307;
}

.topoffers-container {
    width: 100%;
    overflow: hidden;
}

/* Styles for the topoffers */
.topoffers {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* Styles for individual images */
.topoffers img {
    flex: 0 0 auto;
    width: 250px; /* Adjust the width of each image as needed */
    height: auto;
    scroll-snap-align: start;
    margin: 20px;
    border-radius: 40px;
}

.topoffers img:hover {
    box-shadow: 5px 5px #efb630;
    border-radius: 200px;
}

/* Customize the scrollbar for webkit-based browsers */
.topoffers::-webkit-scrollbar {
    width: 10px;
}

.topoffers::-webkit-scrollbar-thumb {
    background-color: #252525; /* Scrollbar thumb color */
    border-radius: 5px;
}

.topoffers::-webkit-scrollbar-track {
    background-color: #e9e6e6; /* Scrollbar track color */
    border-radius: 5px;
}

.btn-close {
    box-sizing: content-box;
    width: 2em;
    height: 2em;
    padding: 1em 1em;
    color: #fff;
}

/* text animation - career */
.txt-animation p {
    text-shadow: 0 0 7px rgba(255, 255, 255, 0.3),
        0 0 3px rgba(255, 255, 255, 0.3);
}
.txt-animation {
    color: #282828;
    font-size: 4rem;
    text-transform: uppercase;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.animation {
    height: 10vh;
    overflow: hidden;
    margin-left: 1rem;
    margin-bottom: 2rem;
    /* background-color: #efb630; */
}
.animation > div > div {
    /* padding: 0.25rem 0.75rem; */
    height: 2.81rem;
    margin-bottom: 2.81rem;
    display: inline-block;
    /* text-decoration: underline; */
}
.animation div:first-child {
    animation: text-animation 8s infinite;
}
.first div {
    margin: auto;
    font-weight: 800;
    color: #e2c38e;
    font-family: "Trajan Pro Regular";
}

.second div {
    margin: auto;
    font-weight: 800;
    color: #e2c38e;
    font-family: "Trajan Pro Regular";
}
.third div {
    margin: auto;
    font-weight: 800;
    color: #e2c38e;
    font-family: "Trajan Pro Regular";
}
@keyframes text-animation {
    0% {
        margin-top: 0;
    }
    10% {
        margin-top: 0;
    }
    20% {
        margin-top: -5.62rem;
    }
    30% {
        margin-top: -5.62rem;
    }
    40% {
        margin-top: -11.8rem;
    }
    60% {
        margin-top: -11.8rem;
    }
    70% {
        margin-top: -5.62rem;
    }
    80% {
        margin-top: -5.62rem;
    }
    90% {
        margin-top: 0;
    }
    100% {
        margin-top: 0;
    }
}

/* quote career */
.quotationmark {
    font-family: Georgia, serif;
    font-size: 500%;
    font-weight: bold;
    color: #666666;
    margin-bottom: -40px;
}

.float {
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 50px;
    right: 15px;
    color: #fff;
    font-weight: 800;
    text-align: center;
    font-size: 30px;
    letter-spacing: 2px;
    text-align: right;
    box-shadow: 1px 2px 3px #383838;
    background-color: #ba9c60;
    border-radius: 50px;
    z-index: 100;
    display: flex;
    padding: 10px;
}
.float p {
    font-size: 18px;
}
.my-float {
    margin-top: 10px;
}
.float img {
    margin: auto;
    width: 50px;
}

.card a {
    text-decoration: none;
}

.modal.custom .modal-dialog {
    width: 72%;
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 0;
    height: 700px;
}

.modal-container {
    height: 700px;
}

/* #background-video {
    width: 500px;
    height: 250px;
} */
.video {
    width: 100%;
}

#message .modal-container .btn {
    background-color: #ba9c60;
    position: absolute;
    left: 50%; /* relative to nearest positioned ancestor or body element */
    top: 50%; /*  relative to nearest positioned ancestor or body element */
    transform: translate(-50%, -50%); /* relative to element's height & width */
}

.animate-bottom {
    position: relative;
    animation: animatebottom 0.4s;
}
.modal-footer .fa-solid {
    width: 82px;
    font-size: 28px;
    color: #413c3c;
}

.pointer {
    cursor: pointer;
}

@keyframes animatebottom {
    from {
        bottom: -200px;
        opacity: 0;
    }

    to {
        bottom: 0;
        opacity: 1;
    }
}

.col-1 img {
    width: 28px;
}
.p-bg {
    background-color: #ba9c60;
    border-radius: 10px;
    padding: 10px;
}

/* form */
.form-page {
    width: 600px;
    padding: 5% 0 0;
    margin: auto;
}
.form {
    position: relative;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(12, 12, 12, 1) 0%,
        rgba(32, 32, 32, 1) 35%,
        rgba(40, 40, 40, 1) 100%
    );
    max-width: 600px;
    margin: 0 auto 50px;
    padding: 45px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    border-radius: 20px;
}
.form h1 {
    color: #c7c4c4;
    /* font-family: Baskerville Old Face; */
}
.form input {
    font-family: "Roboto", sans-serif;
    outline: 0;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
}
.form button {
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #ba9c60;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #f0e6e6;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
}
.form button:hover,
.form button:active,
.form button:focus {
    background: #c7c4c4;
    color: #000000;
}
.form .message a {
    color: #af4c75;
    text-decoration: none;
}
.form .register-form {
    display: none;
}

.form-text-con {
    text-align: justify;
}

.form .check {
    font-family: "Roboto", sans-serif;
    outline: 0;
    width: auto;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
}
/* end form */

.thank-you-container {
    max-width: 600px;
    margin: 100px auto;
    padding: 20px;
    background: linear-gradient(
        90deg,
        rgba(12, 12, 12, 1) 0%,
        rgba(32, 32, 32, 1) 35%,
        rgba(40, 40, 40, 1) 100%
    );
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.thank-you-heading {
    color: #ba9c60;
}

.thank-you-message {
    margin-top: 20px;
    color: #c7c4c4;
}

.btn-back-home {
    margin-top: 20px;
}
.thank-you-container img {
    width: 120px;
}

.minus-margin {
    margin-top: -15px;
}

/* mobile */
/* mobile */
/* mobile */
/* mobile */
/* mobile */
/* mobile */
/* mobile */

@media only screen and (max-width: 990px) {
    .video-header {
        margin-top: 170px;
    }
    #content-1 {
        background: url(../img/backgroundPattern-1.jpg);
        margin-top: 600px;
    }
    #content-1 h3 {
        font-size: 14px;
        text-align: right;
    }
    .con-top {
        height: 110px;
    }
    .con-top img {
        margin-left: 150px;
        padding-top: 1px;
    }

    .group-logo img {
        width: 72px;
        margin: 10px;
    }
    .premier-c1 h1 {
        margin-top: 20px;
    }
    .topsec-right {
        padding-top: 15px;
    }
    .topsec-left {
        padding-top: 15px;
    }
    .brand {
        font-size: 12px;
    }
    .fa-brands {
        font-size: 12px;
    }
    .navbar-toggler-icon i {
        color: #ffffff;
    }
    .nav-home .fa-house {
        margin-left: 100px;
    }
    .hero-text {
        width: 100%;
    }
    .reserve button {
        font-size: 12px;
    }
    .right-side {
        text-align: start;
    }
    .topoffers img {
        width: 300px;
    }
    .modal.custom .modal-dialog {
        width: 100%;
    }
    .modal-footer .fa-solid {
        width: 72px;
        margin: 0;
    }
    .txt-animation {
        font-size: 1.5rem;
        height: 40vh;
    }
    .animation {
        height: 5vh;
        overflow: hidden;
        margin-left: 1rem;
        margin-bottom: 1.1rem;
        /* background-color: #efb630; */
    }
    .animation > div > div {
        /* padding: 0.25rem 0.75rem; */
        height: 3rem;
        margin-bottom: 2.8rem;
        display: inline-block;
        /* text-decoration: underline; */
    }

    .form-page {
        width: 360px;
    }
    .form {
        max-width: 360px;
    }
}

::-webkit-input-placeholder {
    font-style: italic;
}
:-moz-placeholder {
    font-style: italic;
}
::-moz-placeholder {
    font-style: italic;
}
:-ms-input-placeholder {
    font-style: italic;
}