@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Charm:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai+Looped:wght@500;600;800&display=swap');


*{
    font-family: 'Noto Sans Thai Looped', sans-serif;
    font-weight: 800;
}
body {
    background: url('image/bg2_2.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.container-fluid {
    justify-content: space-between;
}

.navbar {
    border: 2px solid rgba(29, 5, 5, 0.3);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.436);
    font-weight: 800;
}

.nav-link {
    display: inline-block;
    color: rgb(125, 78, 34);
    margin-left: 20px;
    font-size: 17px;
    box-shadow: inset 0 0 0 0 #a3690552;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
    border-radius: 5px;
    opacity: 0;
    animation: slidetop .5s ease forwards;
    animation-delay: calc(.2s * var(--i));
    font-weight: 800;
}

@keyframes slidetop {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.nav-link:hover {
    box-shadow: inset 150px 0 0 0 #a3690552;
}

.navbar .droppro i {
    font-size: 20px;
    cursor: pointer;

}

.dropdown-item {
    color: rgb(125, 78, 34);
}

.bi {
    font-size: 50px;
}

.cart_icon a i {
    font-size: 22px;
    cursor: pointer;
}


#logobrand {
    color: rgb(125, 78, 34);

}

.logobrand {
    padding-top: 10vh;
}

.services {
    padding-top: 20vh;
}

.service-box {
    height: 500px;
}

.card {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.893);
    border-radius: 10px;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.53);
    opacity: 0;
    animation: zoomin 1s ease forwards, updown 4s ease-in-out infinite;
    animation-delay: 1.1s, 2.1s;
}

/*===================LOGIN======================*/
@keyframes zoomin {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes updown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

.card h2,
.card h6,
.card p {
    text-shadow: 0px 2px 4px rgb(125, 78, 34);
    color: white;
}

/*==================Product=================*/