@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    font-family: 'Poppins';
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 10vh;
    scrollbar-gutter: stable;
}

.mobile-navbar {
    position: fixed !important;
    right: 0 !important;
    height: 100%;
    width: 230px;
    z-index: 20 !important;
    background: rgba(0, 0, 0, 0.9) !important;
    border-radius: 69px 0px 0px 0px;
    padding: 30px 20px;

    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}



.active-mobile-nav {
    background: linear-gradient(120.95deg, #856220 14.44%, #F4E683 35.13%, #BF923D 52.05%, #F1EA82 89.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-emphasis-color: transparent;
    font-weight: 600 !important;
}

a {
    text-decoration: none;
}

.active-link {
    background: linear-gradient(120.95deg, #856220 14.44%, #F4E683 35.13%, #BF923D 52.05%, #F1EA82 89.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-emphasis-color: transparent;
}


::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(120.95deg, #856220 14.44%, #F4E683 35.13%, #BF923D 52.05%, #F1EA82 89.67%);
    border-radius: 10px;
    border: 3px solid #2a2a2a;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(120.95deg, #9b7428 14.44%, #fff191 35.13%, #d5a344 52.05%, #fff88c 89.67%);
}

body {
    background: #151515;
    color: #fff;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    position: relative;
}

.blog-body {
    background-image: url('../images/blog-cover.png');
    background-size: cover;
    background-position: left center;
    width: 100%;
    height: 100%;
}

.blogs-cover {
    background-image: url('../images/blogs-cover.png');
    background-size: cover;
    background-position: left center;
    width: 100%;
    height: 100%;
}


.btn-gold {
    padding: 10px 20px;
    border-radius: 30px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    outline: none;
    border: none;
    box-shadow: none;
    background: linear-gradient(120.95deg, #856220 14.44%, #F4E683 35.13%, #BF923D 52.05%, #F1EA82 89.67%);
}

.btn-outline {
    border: 2px solid transparent;

    background-image: linear-gradient(#000, #000),
        linear-gradient(to right, #856220 0%, #F4E683 28%, #BF923D 50%, #F1EA82 100%);

    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: #fff;
    padding: 9px 20px;
    border-radius: 30px;

}


.burger-icon {
    text-align: end;
    width: 30px !important;
    height: auto !important;
    display: none;
}

.mobile-navbar.open {
    transform: translateX(0);
}

.mobile-navbar ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 0;
    padding: 30px 20px;

}


.mobile-navbar ul li a {
    color: #fff;
}


header {
    position: fixed;
    width: 100%;
    z-index: 10;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(99, 96, 96, 0.3);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}


.header-wrapper ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.header-wrapper ul li a {
    text-decoration: none;
    color: #fff;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
}

.header-wrapper ul li a:hover {
    background: linear-gradient(120.95deg, #856220 14.44%, #F4E683 35.13%, #BF923D 52.05%, #F1EA82 89.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-emphasis-color: transparent;
}

.header-wrapper img {
    width: 200px;
    height: auto;
}


.section-hero {
    padding-top: 10rem;
    padding-bottom: 5rem;
}

.limitless-blogs-title {
    font-weight: 500;
    font-size: 30px;
    text-align: center;
    color: #FFFFFF;
    text-shadow: 0px 104.384px 28.9063px rgba(0, 0, 0, 0.01), 0px 66.6451px 26.4974px rgba(0, 0, 0, 0.07), 0px 37.7388px 22.4827px rgba(0, 0, 0, 0.25), 0px 16.862px 16.862px rgba(0, 0, 0, 0.43), 0px 4.01476px 8.83248px rgba(0, 0, 0, 0.49);
}

.blog-cards-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.blog-card {
    display: flex;
    justify-content: center;
    height: 100%;
    min-height: 380px;
}

.blog-card .card {
    border-radius: 20px;
    /* max-width: 380px; */
    border: 2px solid transparent;
    background:
        linear-gradient(#0B0B0B, #0B0B0B) padding-box,
        linear-gradient(to right, #856220 0%, #F4E683 28%, #BF923D 50%, #F1EA82 100%) border-box;
    overflow: hidden;
}

.blog-card .card h5 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 27px;
}

.blog-card .card .card-img-top {
    /* border-radius: 20px 20px 0px 0px; */
    width: 100%;
    height: 100%;
}

.blog-card .card-body {
    margin-top: -8rem;
    color: #fff;
    padding: 0px 25px 25px 25px;
}

.blog-card .card-body a {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    transition: transform 0.3s ease;
}

.blog-card .card-body a:hover {
    transform: translateX(4px);
}

.blog-card .card-body a span {
    background: linear-gradient(120.95deg, #856220 14.44%, #F4E683 35.13%, #BF923D 52.05%, #F1EA82 89.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-emphasis-color: transparent;
}

.content-blogs-img {
    border-radius: 40px;
}



.horizontal-line {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, #856220 0%, #F4E683 28%, #BF923D 50%, #F1EA82 100%);
    opacity: 1;
    margin: 20px 0;
    width: 25%;
}


.footer-contact {
    background: rgba(8, 8, 7, 0.55);
    border-top: 1px solid #BF923D;
    position: relative;
    z-index: 2;
}

.contact-wrapper {
    margin-top: 30px;
}

.contact-wrapper h6 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    /* identical to box height */
    letter-spacing: 0.11em;
    background: linear-gradient(120.95deg, #856220 14.44%, #F4E683 35.13%, #BF923D 52.05%, #F1EA82 89.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-emphasis-color: transparent;
}

.hover-link {
    color: #ffffff;
}

.hover-link:hover {
    color: #BF923D;
}

.link-email {
    text-decoration: none;
    color: #fff;
}

.head-office-title {
    background: linear-gradient(175.95deg, #856220 14.44%, #F4E683 35.13%, #BF923D 52.05%, #F1EA82 89.67%) !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-emphasis-color: transparent !important;
}


@media (max-width: 1200px) {


    .header-wrapper {
        padding: 10px 10px;
    }


    .header-wrapper ul li a {
        font-size: 16px;
    }


    .header-wrapper .btn-gold {
        padding: 7px 20px;
        font-size: 14px;
    }

    .header-wrapper img {
        width: 150px;
    }



}


@media (max-width: 992px) {
    .section-hero {
        padding-top: 8rem;
        padding-bottom: 4rem;
    }

    .horizontal-line {
        display: none;
    }

    .limitless-blogs-title {
        font-size: 25px;
    }

    .header-wrapper {
        padding: 10px 15px;
    }

    .burger-icon {
        display: block !important;
    }

    .blogs-img-wrapper {
        text-align: center;
    }

    .content-blogs-img {
        width: 22rem;
    }

    .for-mobile-design {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }


    .header-wrapper div:nth-child(2),
    .header-wrapper div:nth-child(3) {
        display: none;
    }


    footer .unlimited-coffee-pass-card {
        margin-top: 40px;
        height: 100%;
        padding: 0px;
        background: #000000 !important;
        border: 1px solid #BF923D;
        overflow: hidden;
    }

    footer .testimonial-card {
        margin-bottom: 20px;
    }

    .luxury-card-wrapper {
        text-align: center;
    }

    .luxury-card-wrapper img {
        margin-bottom: 20px;
    }



}

@media (max-width: 768px) {

    .contact-wrapper {
        text-align: center;
    }
}

@media (max-width: 362px) {
    .link-email {
        font-size: 15px;
    }
}

.abs-cbn-link {
    padding: 15px 20px;
    border-radius: 10px;
    border: 3px solid transparent;
    background:
        linear-gradient(#000000, #000000) padding-box,
        linear-gradient(to right, #856220 0%, #F4E683 28%, #BF923D 50%, #F1EA82 100%) border-box;
}

.abs-cbn-link a {
    color: #fff;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: inline-block;
    max-width: 100%;
}

.abs-cbn-link a:hover {
    color: #BF923D;
}

.blogs-title {
    margin-bottom: 20px;

}

.blogs-title span {
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
    background: linear-gradient(120.95deg, #856220 14.44%, #F4E683 35.13%, #BF923D 52.05%, #F1EA82 89.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-emphasis-color: transparent;

}

.blog-published-date {
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
}

.blog-description-title {
    margin: 0px 0px 20px 0px;
}

.blog-description-title span {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    background: linear-gradient(120.95deg, #856220 14.44%, #F4E683 35.13%, #BF923D 52.05%, #F1EA82 89.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-emphasis-color: transparent;
}



.blog-description {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 27px;
}

.luxury-card-wrapper {
    align-items: center;
    margin-top: 55px;
}

.luxury-card-wrapper img {
    width: 7rem;
    height: auto;
}

.luxury-card-wrapper h5 {
    font-weight: 600;
    background: linear-gradient(183deg, #856220 14.44%, #F4E683 35.13%, #BF923D 52.05%, #F1EA82 89.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-emphasis-color: transparent;
}

.opening-gallery-wrapper {
    margin-top: 30px;
    margin-bottom: 50px;
}

.opening-gallery-wrapper .gallery-images-wrapper {
    scroll-snap-align: center;
}

.opening-gallery-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 30px;
}

.gold-content-text {
    font-weight: 700;
    background: linear-gradient(120.95deg, #856220 14.44%, #F4E683 35.13%, #BF923D 52.05%, #F1EA82 89.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-emphasis-color: transparent;
}

.mobile-scroll-row {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    
    scroll-snap-type: x mandatory; 
    scroll-behavior: smooth; 
}

/* .mobile-scroll-row::-webkit-scrollbar {
    display: none;
} */

@media (max-width: 992px) {
    .opening-gallery-wrapper {
        margin-top: 40px !important;
        margin-bottom: 20px !important;
    }
}