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

/* v-btn {
    color: #0373DE;
    caret-color: #0373DE;
} */
.blur-effect {
    --colornav-backdrop-filter-opacity: 1;
    --colornav-bg-alpha: .8;
    backdrop-filter: blur(22px) saturate(1.86);
    -webkit-backdrop-filter: blur(15px) saturate(86%);
    backface-visibility: hidden;
    background: rgba(245, 245, 247, .82);
    opacity: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.top-item {
    padding-top: 75px !important;
}


@media screen and (max-width: 768px) {
    .top-item {
        padding-top: 85px !important;
    }

    #kmitl-text {
        display: none !important;
    }

    h2 {
        font-size: small !important;
    }
}

@media (max-width: 767px) {
    /* Adjust breakpoint as needed */
    .px-22 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .mx-22 {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    .tablet-full-width {
        width: 100% !important;
    }
}

.lightblue-background-light {
    background-color: #eef2f8 !important;
}

.main_container {
    max-width: 1380px;
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-radius: 32px;
}

.image-rounded {
    border-radius: 20px !important;
}

.img_background {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: clip;
    min-height: 100vh;
}

.blur-effect {
    background: rgba(245, 245, 247, .82);
    backdrop-filter: blur(22px) saturate(1.86);
    -webkit-backdrop-filter: blur(15px) saturate(86%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    --colornav-backdrop-filter-opacity: 1;
    --colornav-bg-alpha: 0.8;
    opacity: 1;
}

.main-container {
    background-color: transparent;
    /*justify-content: center;*/
    margin: 0 auto;
    padding: 52px 0;
    max-width: 1080px !important;
    min-height: 70vh
}

h2 {
    font-size: xx-large !important;
    font-weight: 600 !important;
}

.blue-text {
    color: rgb(3, 115, 222) !important;
}

.main-rounded {
    background-color: #fff;
    border-radius: 22px;
    /*margin: 0 12px;*/
    /* min-height: 500px; */
    padding: 22px 32px !important
}

.rounded {
    border-radius: 22px !important;
}

.blue_button {
    background-color: #0373DE !important;
    /*font-size: medium !important;*/
    font-weight: bold;
    color: white !important;
    border-radius: 12px;
    /*box-shadow: none !important;*/
    /*text-transform: none;*/
}

.bg-table {
    background: rgba(255, 255, 255, 0.35) !important;
}

.bg-table-items1 {
    background: rgba(255, 255, 255, 0.20) !important;
}

.topnav {
    /* background-color:; */
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}


.sook_header {
    width: 100%;
}

.sook_north {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    border-radius: 6px 6px 0 0;
    background: rgba(44, 83, 143, 0.88) !important;
    max-height: 57px !important;
}

.sook_south {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    border-radius: 0 0 6px 6px;
    background: rgba(232, 152, 55, 0.88) !important;
    height: 6px !important;
}

.sook_text {
    font-size: 100%;
    font-weight: 600;
    padding: 5px;
    text-align: right;
    color: white;
    height: 100%;
    /* margin-top: 0px; */
}

body {
    font-family: "Sarabun", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, "Roboto", sans-serif !important;
}

.text-h2 {
    font-family: "Sarabun", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, "Roboto", sans-serif !important;
    font-size: 95px !important;
    margin-bottom: 40px !important;
    text-wrap: none !important;
}

.text-h3 {
    font-family: "Sarabun", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, "Roboto", sans-serif !important;

}

.text-h4 {
    font-family: "Sarabun", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, "Roboto", sans-serif !important;
}

.text-h5 {
    font-family: "Sarabun", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, "Roboto", sans-serif !important;
}

.text-title1 {
    font-size: 47px;
    font-weight: 700;
}

.text-title2 {
    font-size: 16px;
    font-weight: 200;
}