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

*{
    font-family: "Kanit", sans-serif;
    font-weight: 400;
}
.nav-link.active{
    border-radius: 0.5vh;
    background: var(--web_main_theme_color);
    color: white!important;
}

.nav_container_size{
    margin: auto;
    width: 60%;
    background: #fff;
}
.text_web_main{
    color: var(--web_main_theme_color);
}
.border_color_main{
    border-color: var(--web_main_theme_color)!important;
}
.bg_web_main{
    background-color: var(--web_main_theme_color);
}
.font_bold{
    font-weight: 600;
}
.navbar-brand{
    font-size: 20px;
}
.nav-link{
    font-size: 14px!important;
}
.btn{
    transition: transform 0.3s ease-in;
}
.pd_container{
    width: 20%!important;
}
.bg_main_two_tone{
    background-color: var(--web_main_theme_color_opa_30);
    color: var(--web_main_theme_color);
    transition: 0.2s ease-in-out;
}
.bg_main_two_tone:hover{
    background-color: var(--web_main_theme_color_opa_30);
    color: var(--web_main_theme_color);
}
.btn.bg_web_main:hover{
    background-color: var(--web_main_theme_color);
    transform: scale(1.04);
}
.text_gradient{
    background: -webkit-linear-gradient(90deg, var(--web_main_theme_color), var(--web_secondary_theme_color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.menu_btn_active:hover{
    background-color: var(--web_main_theme_color);
    & .text_web_main{
        color: #fff!important;
    }
}
.navbar{
    position: fixed;
    top: 20px;
    width: 100%;
    z-index: 4;
}

.category_container {
    transition: 0.2s ease-in-out;

    &:hover {
        transform: scale(1.02);
    }
}
.modal-product-dialog{
    max-width: 80%; 
    width: fit-content; 
    min-width: 50%;
}
@media only screen and (max-width: 1400px) {
    .nav_container_size{
        width: 90%!important;
    }
}
@media only screen and (max-width: 992px) {
    .modal-product-dialog{
        max-width: 96.5%;
        width: 100%;
    }
    .margin_cr{
        margin-top: 60px!important;
    }
    .nav-link{
        padding-left: 10px;
    }
    .nav_container_size{
        width: 90%!important;
    }
    .pd_container{
        width: 50%!important;
    }
}