*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

* {
    scroll-behavior: smooth;
}

:root {
    --grey-color: #333333;
    --whitesmoke6-color: #f5f5f5;
    --whitesmoke6-color: #F6F6F6;
    --Charcoal1-color: #434343;
    --charcoal2-color: #3F3F3F;
    --white-color: #fbfbfb;
    --bgwhite-color: #ffffff;
}

body {
    font-family: 'Kanit', sans-serif !important;
    font-weight: 400;
    color: var(--grey-color);
    font-size: 18px;
    line-height: 27px;
}

p {
    color: rgba(51, 51, 51, 0.50) ;
    font-size: 18px;
    font-family: "Kanit";
    font-weight: 400;
}

.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.auto {
    margin:auto
}

.no-margin-top {
    margin-top: 0
}
hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: .25;
}
.container-and {
    margin :auto !important;
}