@font-face {
    font-family: 'OpunMai-Regular';
    src:  url('font/Opun-Mai-Lite-Regular-WebOnly.woff2') format('woff2');
}

@font-face {
    font-family: 'OpunMai-SemiBold';
    src:  url('font/Opun-Mai-Lite-SemiBold-WebOnly.woff2') format('woff2');
}


.f-OpunMai-Regular{
    font-family: OpunMai-Regular;
}

.f-OpunMai-SemiBold{
    font-family: OpunMai-SemiBold;
}

@font-face {
    font-family: 'Chula-reg';
    src:  url('font/CHULALONGKORNReg.woff2') format('woff2');
    src:  url('font/CHULALONGKORNReg.ttf') format('truetype');
}

@font-face {
    font-family: 'Chula-bold';
    src:  url('font/CHULALONGKORNBold.woff2') format('woff2');
    src:  url('font/CHULALONGKORNBold.ttf') format('truetype');
}

.f-Chula-reg{
    font-family: Chula-reg;
}

.f-Chula-bold{
    font-family: Chula-bold;
}

.bg-navbar{
    background-image: url('img/bg_navbar.jpg');
    background-size: cover;
    background-position: top center;
    box-shadow: 0px 5px 10px #2125299c;
}

.bg-section-header{
    background-image: url('img/bg_index-01.jpg');
    background-size: cover;
    background-position: center bottom;
}


.bg-grass{
    background: url('img/bg-grass-3.jpg') center /cover no-repeat; 
    background-attachment: fixed;
}



.bg-compet{
    background: url('img/4884840.jpg') center /cover no-repeat; 
    background-attachment: fixed;
}

.bg-blue-dark{
    background-color: rgba(2, 2, 48, 0.589);
}

.bg-count{
    background: url('img/banner_minecraft.jpg') center /cover no-repeat; 
}


/*THA*/
.f-IBM{
    font-family: IBM Plex Sans Thai;
}

/*THA*/
.f-Kanit{
    font-family: Kanit;
}

/*ENG*/
.f-ReadexPro{
    font-family: Readex Pro;
}


.bg-purple{
    background-color: rgb(24, 6, 64);
}

.btn-spc {
    
    padding: 8px 32px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    border-radius: 50px;
    color: rgb(256,256,256);
}
  
.btn-spc:hover {
    transition: all 0.3s ease;
    color: rgb(256,256,256);
}

.btn-gradient {
    background-image: linear-gradient(to right, rgb(1 134 218), rgb(182 49 167));
    border: 0;
    color: rgb(256,256,256);
}

.btn-glow:hover {
    box-shadow: rgba(111, 76, 255, 0.5) 0px 0px 20px 0px;
}


.bg-section-footer{
    background: url('img//footer2.jpg') center /cover no-repeat; 
}
.bg-box{
    background: url('img/back_box2.jpg') bottom center /cover no-repeat; 
}

.bg-section-spatial{
    background: url('img/2351185.jpg') center /cover no-repeat;
    background-attachment: fixed;
}

.bg-section-about{
    background: url('img/4884450.jpg') center /cover no-repeat;
    background-attachment: fixed;
    
}

.bg-fifa{
    background-color: rgba(29, 29, 29, 0.514);
}


.bg-footter{
    background-image: url('img/bg_footer.svg');
    background-size: cover;
    background-position: center top;
    
}

.bg-glass{
    background-color: rgba(255, 255, 255, 0.171);
    border-radius: 10px;
    box-shadow: rgba(36, 35, 35, 0.315) 0px 0px 20px 0px;
    
}

.bg-glass-dark{
    background-color: rgba(255, 255, 255, 0.342);
    border-radius: 10px;
    box-shadow: rgba(255, 255, 255, 0.315) 0px 0px 20px 0px;
    
}

.bg-minecraft{
    background: url('img/bg_minecraft_low.svg') top /cover no-repeat;
    background-attachment: fixed;
}



.carousel-item{
    height: 400px;
}

.carousel-image1{
    background-image: url('img/slide4.svg');
    background-size: cover;
    background-position: center center;
}

.carousel-image2{
    background-image: url('img/slide2.svg');
    background-size: cover;
    background-position: center center;
}

.carousel-image3{
    background-image: url('img/slide3.svg');
    background-size: cover;
    background-position: center center;
}

.img-center{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.bg-container-fluid-footter{
    background: url('footter.svg') center /cover no-repeat;
}

.bg-container-fluid-AJ{
    background: url('img/back_AJ.svg') center /cover no-repeat;
}


.dark-overlay{
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.288);
    width: 100%;
    height: 100%;
}

.img-center{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}



.login-page{
    height: 1000px;
    background: #fff url("");
    background-size: cover;
    position: relative;
}

.card-login{
    border-radius: 8px;
    background: rgba(242, 248, 255, 0.85);
    margin: 0px;
    color: rgb(255, 255, 255);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
}