@font-face {
    font-family: FontPrompt;
    src: url(../fonts/Prompt-Regular.ttf);
    font-display: swap
}

body {
    font-family: FontPrompt!important
}

footer h3 {
    font-size: 1rem!important;
    color: #4e555a!important
}

footer h2 {
    font-size: 1.2rem!important
}

footer a {
    text-decoration: none
}

footer a:hover {
    opacity: .8
}

nav.navbar {
    background-color: #fff!important
}

p.text-nav-bottom {
    font-size: 9px!important;
    color: teal;
    margin-bottom: 0
}

.form-check-input:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffac00'/%3e%3c/svg%3e") !important;
}

.text-label {
    /* width: 100px; */
}

.form-check-input:checked {
    background-color: #ffffff !important;
    border-color: #00004b !important;
}

a.footer-navber-a {
    text-decoration: none;
    color: #000
}

.contact-sell {
    border-right: 3px solid #0c0c0c17;
    border-left: 3px solid #0c0c0c17;
    border-bottom: 3px solid #0c0c0c17;
}

.btn-rayong-menu {
    color: white !important;
    background-color: #00004b !important;
}

p.text-body {
    font-size: .9rem
}

.hr-line {
    background-color: #888682;
}

.p-line {
    background-color: white;
}

.icon-eye {
    display: flex;
    align-items: center;
    margin-left: -30px;
}

.btn-buy {
    background-color: rgb(0, 0, 75) !important;
    color: white !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    font-size: 20px !important;
}

.mh-responsive {
    min-height: 1026px
}

.product-option-input {}

.product-option-label {
    background-color: white;
    border: rgb(36, 36, 148) 2px solid;
    padding: 5px;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
}

.swal2-container.swal2-top-end,
.swal2-container.swal2-top-right {
    z-index: 1062
}

@media only screen and (min-width:320px) {
    .mh-carousel {
        min-height: 85.25px;
    }
    .mh-responsive {
        min-height: 172px
    }
    .custom-modal {
        margin-top: 60px;
        height: 400px
    }
    .navbar-brand img {
        width: 100%;
    }
    .product-review {
        letter-spacing: 0px;
        font-size: 2.5vw !important;
    }
}

@media only screen and (min-width:360px) {
    .mh-carousel {
        min-height: 97px;
    }
    .mh-responsive {
        min-height: 195px
    }
    .custom-modal {
        margin-top: 60px;
        height: 485px
    }
    .navbar-brand img {
        width: 100%;
    }
    .product-review {
        letter-spacing: 0px;
        font-size: 2.5vw !important;
    }
}

@media only screen and (min-width:375px) {
    .mh-carousel {
        min-height: 97px;
    }
    .mh-responsive {
        min-height: 203px
    }
    .custom-modal {
        margin-top: 60px;
        height: 655px
    }
}

@media only screen and (min-width:768px) {
    .mh-carousel {
        min-height: 101px;
    }
    .mh-responsive {
        min-height: 414px
    }
    .custom-modal {
        margin-top: 60px
    }
    .product-review {
        letter-spacing: -1px;
        font-size: 0.7vw !important;
    }
}

@media only screen and (min-width:1024px) {
    .mh-carousel {
        min-height: 270px;
    }
    .mh-responsive {
        min-height: 552px
    }
    .custom-modal {
        margin-top: 60px
    }
}

@media only screen and (min-width:1440px) {
    .mh-carousel {
        min-height: 373.38px;
    }
    .mh-responsive {
        min-height: 776px
    }
    .custom-modal {
        margin-top: 60px
    }
}

@media only screen and (min-width:2560px) {
    .mh-carousel {
        min-height: 373.38px;
    }
    .mh-responsive {
        min-height: 1381px
    }
    .custom-modal {
        margin-top: 60px
    }
}

.navbar-brand img {
    width: 100%;
}

.service h2 {
    color: rgb(0, 0, 75);
    font-weight: bolder;
    font-size: 20px !important;
}

.service h3 {
    color: rgb(49, 49, 49);
    margin: 0px;
    font-size: 16px !important;
}

.cat-row {
    color: white;
    text-align: center;
}

.cat-row h2 {
    font-size: 20px;
    font-weight: bolder;
}

.cat-row h3 {
    font-size: 16px;
}

.cat-row col {
    padding: 10px;
}

.cat-row img {
    padding: 2vw;
}

.cat-box-1 {
    padding-top: 20px;
    padding-bottom: 50px;
    background-color: rgb(255, 166, 0);
}

.cat-box-2 {
    padding-top: 20px;
    padding-bottom: 50px;
    background-color: rgb(0, 0, 75)
}

.product-body {
    padding: 10px;
}

.product-box {
    background-color: white;
}

.product-img {}

.product-box h2 {
    font-size: 18px;
    font-weight: bolder;
    height: 30px;
    overflow: hidden;
    line-height: 1.8;
}

.product-box {
    border: 1px solid gainsboro;
}

.product-box h3 {
    font-size: 14px;
    height: 45px;
    overflow: hidden;
    line-height: 1.7;
}

.product-footer .price-1 {
    font-size: 18px;
    font-weight: bolder;
    color: rgb(36, 36, 148);
}

.product-footer .price-2 {
    font-size: 14px;
    font-weight: bolder;
    color: gold;
}

.bi.bi-star-fill.active {
    color: gold;
}

.menu-3 .nav-item * {
    color: rgb(0, 0, 75)
}

.nav-cat .nav-item {
    width: 100%;
}

.nav-cat .nav-item.active {
    color: white !important;
}

.nav-cat .nav-item.active {
    background-color: rgb(36, 36, 148);
    color: white !important;
    font-weight: bolder;
}

.blog-share * {
    text-decoration: none !important;
}

.nav-cat .nav-item * {
    color: black !important;
}

.nav-cat .nav-item.active * {
    color: white !important;
}

.blog-box a {
    text-decoration: none !important;
    color: black;
    font-size: 18px;
}

.blog-box h2 {
    text-decoration: none !important;
    color: black;
    font-size: 18px;
}

.splide--nav>.splide__track>.splide__list>.splide__slide.is-active {
    border: rgb(36, 36, 148) 3px solid;
}

.splide__arrow {
    background-color: rgb(36, 36, 148) !important;
    color: rgb(255, 255, 255) !important;
}


/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
    .f-respone {
        font-size: 14px;
    }
}


/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
    .f-respone {
        font-size: 14px;
    }
}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
    .f-respone {
        font-size: 13px;
    }
}


/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
    .f-respone {
        font-size: 15px;
    }
}


/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
    .f-respone {
        font-size: 15px;
    }
}