/* import google font */
/*@import url('https://fonts.googleapis.com/css2?family=Kaisei+Tokumin:wght@400;500;700&family=Poppins:wght@300;400;500&display=swap');*/

@import url('my_font.css');

/* root */
:root {
    --urlImg_Logo: url("/image/logo.png");
    --imgURLLogoWhite: url("/image/logo_white.png");
    --lg-font: 'Kaisei Tokumin', serif;
    --sm-font: 'Poppins', sans-serif;
    --none: #393939;
}

body {
    font-family: var(--sm-font);
}


.imgURLLogo {
    content: var(--urlImg_Logo);
    width: 250px;
    margin-left:-8px;
}


.imgURLLogoWhite {
    content: var(--imgURLLogoWhite);
    width: 250px;
    margin-left: -8px;
}


/* navigation bar */ 

.navbar-brand span {
    letter-spacing: 2px;
    font-family: var(--lg-font);
}

/* navigation bar help */
.help-number {
    font-size: 16px;
}
 
 

 

    .iconsearch {
        border-radius: 25px;
        border: 1px solid;
    }

        .iconsearch:hover {
            background-color: var(--none) !important;
            border-color: var(--none) !important;
            color: #FFFFFF !important;
        }



    /* navigation bar 1 */
    .nav-link:hover {
        color: var(--none); 
        font-size:x-large;
    } 


    /* navigation bar 2 */
    .mobile-bar .row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 10px 0;
    }

    .mobile-bar .btn-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }





    /* header */

header {
    height: auto;
    /*margin-bottom: 7em;*/
    transition: all .3s ease; 
}



    .headerShadow {
        box-shadow: rgba(57, 57, 57, 0.1) 0px 0px 16px;
    }

    header.hide {
        display:none;
    }


    header nav ul li a {
        display: inline-block;
        color: #000;
        padding: 5px 0;
        margin: 0 10px;
        border: 3px solid transparent;
        text-transform: uppercase;
        transition: 0.2s;
    }

        header nav ul li a:hover,
        header nav ul li a.active {
            border-bottom-color: dodgerblue;
        }

    .hamburger {
        cursor: pointer;
        display: none;
    }

        .hamburger div {
            width: 30px;
            height: 3px;
            margin: 5px 0;
            background: #000;
        }


#linkMember { 
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}



   



    /*#header {
        background: url(/image/background_5.jpg) top/cover no-repeat; 
    }

        #header .btn {
            background-color: var(--none) !important;
            color: #FFFFFF !important;
            border: 2px solid black !important;
            padding: 10px;
        }

            #header .btn:hover {
                background-color: red !important;
                color: #FFFFFF !important;
                border: 2px solid black !important;
            }




        #header .input-group {
            max-width: 600px;
            margin: 0 auto;
        }

        #header .form-control {
            border-top-left-radius: 25px;
            border-bottom-left-radius: 25px;
        }

        #header #booking-form .form-control {
            padding: 10px;
        }*/

    /* media query */
    /*@media(max-width: 990px) {
        #header {
            padding-top: 100px;
        }

        #checkout .checkout-detail {
            margin-bottom: 2rem;
        }
    }*/


@media only screen and (max-width: 767.98px) {

    .hamburger {
        display: block;
    }

    /*header nav {
            position: absolute;
            width: 100%;
            left: -100%;
            top: 70px;
            width: 100%;
            background: #fff;
            padding: 30px;
            transition: 0.3s;
        }*/

    header #nav_check:checked ~ nav {
        left: 0;
    }

    header nav ul {
        display: block;
    }

        header nav ul li a {
            margin: 5px 0;
        }

    .imgURLLogo {
        width: 150px !important;
    }




    main {
        margin-top: 4em !important;
        padding-top: 0px !important;
    }

    .space-img-detail {
        margin-left: -1em;
    }
}



 



    main{
        margin-top:5em;
        padding-top:2em;
    }



    /* footer */
    footer {
        background-color: var(--none);
        color: white !important;
    }

        footer .brand {
            font-family: var(--lg-font);
            letter-spacing: 2px;
        }



        footer .linkpage {
            color: white !important;
        }






    .space-img-detail {
        position: relative;
        padding: 2em;
        width: 100%;
    }

.dv-space-img {
    margin: 0px 3px 0px 3px;
    padding: 1em 1em 1em 1em;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #EBEBEB;
}

.space-img-detail .dv-space-img .space-img {
    width: 100%;
    border-radius: 10px;
    transition-duration: 0.7s;
    box-shadow: 40px -40px 0px 4px #EBEBEB;
}