@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200&display=swap');


.ancor-position{
    position: relative;
    left: 15rem;   
}

*{
    /* font-family: 'Noto Sans', sans-serif; */
}

html{
    font-size: 62.5%;
}

.d-flex.justify-content-center.align-items-start.flex-row {
    background-color: #700303;
    margin-bottom: -8px;
margin-top: -8px;
      }


.about_img{
    padding-right: .5rem;
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
}

.title_text{
    position: relative;
    
}

/* .title_text .my-5{
    font-size: 3.2vw;
    
} */

.title_text p{
    font-family: 'Kanit', sans-serif;
    font-size: 4em;
    letter-spacing: .1rem;
    text-shadow: 0 0 3px #0a0909, 0 0 5px #232324;
    font-weight: bolder;
}

.sub-title{
    padding-top: 5px;
    position:absolute;
    top: 7.4rem;
    font-size: 1em!important;
    color: #9f9f9f;
}

.numbers {
    color: white;
    padding-top: 23px;
    
}

.numbers p{
    font-size: 1.6rem; 
}

.container .navbar-nav  li a {
    font-size: 15px;
    font-weight: 600;
}


.carousel-caption h5{
    z-index: 6;
    /* flex-wrap: wrap; */
    font-size: 7vw;
    line-height:15rem;
    font-weight: 400;
    color: rgb(255, 255, 255);
    font-family: "Libre Baskerville";
    text-transform: uppercase;
    visibility: inherit;
    transition: none 0s ease 0s;
    text-align: center;
    border-width: 0px;
    margin: 0px;
    padding: 0px;
    letter-spacing: 0px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    opacity: 1;
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 49.9911, 0, 1);
    transform-origin: 50% 50% 0px;
}

.animate__animated.animate__fadeInUp {
    --animate-duration: 3s;
  }

/* .marquee */
.marquee-tag{
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bolder;
    font-size: x-large;
    background-color: #3573df;  
      
}

.marquee-tag a{
    color: rgb(255, 247, 0);
    text-decoration: none;
    line-height: 2;
}


.marquee-tag a:hover{
    color: red;
}
/* marquee */

/* about */
.container .about_text{
    font-size: 1.5rem;
    text-shadow: 0 0 3px #edb9b9, 0 0 5px #c1c1d2;
    text-align: justify;
}
/* about */

.container .card-text{
    font-size: 1.5rem;
}

/* notice */
.notice{
    margin-left: 23rem;
}

.card-body a{
    font-size: 1.2rem;
}

.card-notice{
    position: relative;
    overflow: hidden;
}

.card-notice::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 150%;
    background-color: rgb(50 45 47 / 70%);
    top: -150%;
    left: 0;
    z-index:1;
    transition: 1.5s;
}


.card-notice:hover:before{
    top: 0;
      
  }
  
.notice_img{
    margin-left: 27%;
    border: 1px solid;
   padding: 10px;
   box-shadow: 5px 10px #888888;
}

.text-notice{
    width: 100%;
    padding: 0 20px;
    position:absolute;
    top: -120%;
    color: #fff;
    left: 35%;
    z-index: 2;
    transition: 1.1s;
} 

.text-notice a{
    text-decoration: none;
    color: #fff;
}

.text-notice a:hover{
    color: rgb(206, 42, 42);
}

.card-notice:hover .text-notice {
   top: 50%;
}

/* notice */

/* form */
section label{
    font-size: 17px;
}

.form-control{
    font-size: 1.7rem;
}
/* form */

/* abs campus */
.item {
    transition: 0.5s ease-in-out;
  }

  .item:hover {
    filter: brightness(80%);
  }
/* abs campus */

/* footer */

footer{
    font-size: 1.8rem;
}

.font_to_contact_footer{
    font-family: 'Work Sans', sans-serif;
}

.follow-icon{
    font-size: 3rem;
}

/* footer */

/* responsivve ness */

@media only screen and (max-width: 1112px) {

    

}


@media only screen and (max-width: 700px) {

    .carousel-caption h5{
        font-size: 5vw;
        line-height: 1;
    }
}

@media only screen and (max-width: 722px) {
    
    .numbers{
        display: none;
    }
   
}

@media only screen and (max-width: 605px) {
    .d-flex {
        flex-wrap: wrap;
    }

    .title p{
        text-align: center;
     }

}

@media only screen and (max-width: 592px) {
    .title_text {
        margin-top: -53px;
    }
}

@media only screen and (max-width: 493px) {
    .title_text  {
        font-size: 2vw;
        
    }

}

@media only screen and (max-width: 427px) {
    .title_text{
        padding-top: 23px;
        line-height:30px;
    }
    
    
    .sub-title{
        display: none;
    }
}