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

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

@font-face {
    font-family: 'BeautyDemo';
    /* Define your font family name */
    src: url('brook/landingpage/fonts/BeautyDemo.ttf') format('ttf');
}

body.template-font-1 .h1,
body.template-font-1 .h2,
body.template-font-1 .h3,
body.template-font-1 .h4,
body.template-font-1 .h5,
body.template-font-1 .h6,
body.template-font-1 .heading,
body.template-font-1 h1,
body.template-font-1 h2,
body.template-font-1 h3,
body.template-font-1 h4,
body.template-font-1 h5,
body.template-font-1 h6 {
    font-family: Raleway,
        sans-serif !important;
}


html {
    scroll-behavior: smooth;
}

.footer-hero-text {
    font-size: 6em !important;
    line-height: 1 !important;
    margin-bottom: 7vh;
    padding: none !important;
}

.logo-brand {
    width: 10vw;
}

.nv-menu-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 3vw 1vw !important;
}

.nv-menu-list li a {
    font-size: 2vw !important;
}

@media only screen and (max-width: 999px) {
    #bk-footer {
        text-align: left;
    }

    .footer-hero-text {
        font-size: 2.5em !important;
        margin-bottom: 1vh;
    }

    .link-navbar {
        margin-top: 12vw !important;
    }

    .nv-menu-list {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 3vw 1vw !important;
    }

    .nv-menu-list li a {
        font-size: 6vw !important;
    }

    .nv-contact-list {
        display: none !important;
    }
}

.tp-bgimg {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1)), url('/fleava/images/bg-smoke.jpg') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

body.template-color-2 .video-btn-2 .icon-gradient::after {
    background: rgb(0, 0, 0);
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.theme-creative {
    background-image: linear-gradient(-180deg, black 0, white 100%);
}

#section-about {
    background: black;
}

.service.service--2 .thumb img {
    width: 100px;
}

.brand-arrow .slick-btn i {
    color: white;
}

.brand-default .brand a img {
    opacity: 1;
}

#section-service {
    padding: 20px 80px 80px 80px;
    background: black;
}

.client-thumbnail {
    padding: 120px;
}

#myVideo {
    margin-left: -10vw !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    z-index: -100 !important;
    right: 10vw !important;
    bottom: 0 !important;
    overflow: hidden !important;
}

#blob {
    width: 100% !important;
    position: relative;

    canvas {
        width: 100% !important;
        margin-top: -7%;

        @media(max-width: 1200px) {
            margin-top: -10%;
            width: 100% !important;
        }

        @media(max-width: 600px) {
            width: 100% !important;
        }
    }
}

.providing-text {
    font-size: 100px;
    font-weight: 300;
    color: #ffffff;
    letter-spacing: 45px;
}

.secondary-font {
    font-family: 'BeautyDemo',
        serif !important;
    margin-top: 5vw;
    font-size: 30px;
    color: #ffff;
    font-style: italic;
}


@media only screen and (max-width: 999px) {
    body {
        text-align: center;
    }

    .secondary-font {
        line-height: 42px !important;
    }

    .providing-text {
        margin-top: 13vh;
        font-size: 40px;
        font-weight: 300;
        color: #ffffff;
        letter-spacing: 0px;
    }

    .social-icon.icon-border-rounded.icon-size-medium.social-vertical.text-center {
        margin-top: 7vh !important;
        margin-right: -3vw !important;
    }

    .retina-mouse {
        display: none !important;
    }


    #section-service {
        padding: 20px 20px 80px 20px;
        background: black;
    }

    .social-icon.social-vertical {
        display: flex;
        margin-top: -230px;
    }

    .about-image img {
        height: 400px !important;
    }

    .client-thumbnail {
        padding: 60px 20px 0 20px;
    }

    .section-title--between {
        justify-content: center !important;
    }

    .portofolio-thumb img {
        height: 200px !important;
    }
}

.mainmenu-wrapper .page_nav ul.mainmenu li.lavel-1 {
    display: inline-block;
    padding-top: 35px !important;
    padding-bottom: 35px !important;
    padding-left: 0;
    padding-right: 9px;
}

.header-default.header-transparent.position-from--top {
    padding-top: inherit !important;
}

p.bk_pra {
    font-weight: 200 !important;
}

.brand-default .brand a img {
    opacity: 0.9 !important;
}

.header-default.light-logo--version .mainmenu-wrapper .page_nav ul.mainmenu li a:hover {
    color: #7b7b7b
}

.blog.blog-style--2 .blog-content {
    background: #000 !important;
}

.back-text {
    color: white !important;
    font-weight: 600;
    text-decoration: underline;

}

.back-text:hover {
    text-decoration: underline;
    color: #7b7b7b !important;
}

.object-custom-menu>li a {
    color: white !important;
}

.portfolio.portfolio_style--2 .thumb img {
    width: 100vw !important;
    height: 100% !important;
}

.mainmenu-wrapper .page_nav ul.mainmenu li.lavel-1>a {
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-weight: 600;
    line-height: 1.18;
    font-size: 18px !important;
    font-family: 'Playfair',
        serif !important;
}

.messonry-button button span.filter-text {
    color: #ffffff !important;
}

body.template-color-29 .messonry-button button.is-checked span.filter-text {
    color: #e23636 !important;
}

.page-loading {
    background: #000 !important;
}