/* Font */
@font-face {
    font-family: "courgette";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/courgette/v13/wEO_EBrAnc9BLjLQAUk1WPoK7Es.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Mogra";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/mogra/v19/f0X40eSs8c95TCokBPPWxg.woff2) format('woff2');
    unicode-range: U+0964-0965, U+0A80-0AFF, U+200C-200D, U+20B9, U+25CC, U+A830-A839;
}
.courgette {
    font-family: courgette, cursive;
}
.mogra {
    font-family: Mogra, serif;
}

/* List Style */
.no_list_style{
    list-style: none;
}
.hot_list_style{
    list-style: url("../image/icon/chili.png");
}
.phone_list_style{
    list-style: url("../image/icon/phone.png");
}
.address_list_style{
    list-style: url("../image/icon/address.png");
}
.time_list_style{
    list-style: url("../image/icon/time.png");
}

/* Back to Top Button*/
#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 0;
}

/*Screen size*/
@media screen and (max-width: 387px){
    .nav_logo{ /* Nav Logo 皇宫*/
        display: none;
    }
    .page_title_phone{ /* Nav Bar title*/
        font-size: 1.4rem;
        font-weight: 300;
    }
    .page_title_desktop{ /* Title overlay image*/
        display: none;
    }
    #about_title{
        font-size: large;
    }
    #about_text{
        font-size: small;
    }
    .subTitle{
        font-size: large;
    }
    .subText{
        font-size: small;
    }
    .desktop_button{ /* Three button overlay the image*/
        display: none;
    }
    .phone_button{ /* Three button above the "We Serve" */
        display: block;
        text-align: center;
    }
}
@media screen and (max-width: 511px) and (min-width: 388px){
    .nav_logo{
        display: none;
    }
    .page_title_phone{ /* Nav Bar title*/
        font-size: 1.8rem;
        font-weight: 300;
    }
    .page_title_desktop{ /* Title overlay image*/
        display: none;
    }
    #about_title{
        font-size: larger;
    }
    #about_text{
        font-size: medium;
    }
    .subTitle{
        font-size: larger;
    }
    .subText{
        font-size: medium;
    }
    .desktop_button{
        display: none;
    }
    .phone_button{
        display: block;
        text-align: center;
    }
}
@media screen and (max-width: 767px) and (min-width: 512px){
    .nav_logo{
        display: block;
    }
    .page_title_phone{ /* Nav Bar title*/
        display: none;
    }
    .page_title_desktop{ /* Title overlay image*/
        font-size: 2rem;
        font-weight: 300;
        display: block;
    }
    #about_title{
        font-size: x-large;
    }
    #about_text{
        font-size: large;
    }
    .subTitle{
        font-size: x-large;
    }
    .subText{
        font-size: large;
    }
    .desktop_button{
        display: block;
    }
    .phone_button{
        display: none;
    }
}
@media screen and (max-width: 991px) and (min-width: 768px) {
    .nav_logo{
        display: block;
    }
    .page_title_phone{ /* Nav Bar title*/
        display: none;
    }
    .page_title_desktop{ /* Title overlay image*/
        font-size: 4rem;
        font-weight: 300;
        display: block;
    }
    #about_title{
        font-size: xx-large;
    }
    #about_text{
        font-size: x-large;
    }
    .subTitle{
        font-size: xx-large;
    }
    .subText{
        font-size: larger;
    }
    .desktop_button{
        display: block;
    }
    .phone_button{
        display: none;
    }
}
@media screen and (max-width: 1499px) and (min-width: 992px) {
    .nav_logo{
        display: block;
    }
    .page_title_phone{ /* Nav Bar title*/
        display: none;
    }
    .page_title_desktop{ /* Title overlay image*/
        font-size: 4.5rem;
        font-weight: 300;
        display: block;
    }
    #about_title{
        font-size: xxx-large;
    }
    #about_text{
        font-size: xx-large;
    }
    .subTitle{
        font-size: xx-large;
    }
    .subText{
        font-size: large;
    }
    .desktop_button{
        display: block;
    }
    .phone_button{
        display: none;
    }

}
@media screen and (max-width: 3000px) and (min-width: 1500px) {
    .nav_logo{
        display: block;
    }
    .page_title_phone{ /* Nav Bar title*/
        display: none;
    }
    .page_title_desktop{ /* Title overlay image*/
        font-size: 5rem;
        font-weight: 300;
        display: block;
    }
    #about_title{
        font-size: xxx-large;
    }
    #about_text{
        font-size: xx-large;
    }
    .subTitle{
        font-size: xx-large;
    }
    .subText{
        font-size: x-large;
    }
    .desktop_button{
        display: block;
    }
    .phone_button{
        display: none;
    }

}