@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

@font-face {
    font-family: 'Kanit', sans-serif;
    src: url(../font/Kanit-Regular.ttf);
}

body {
    background-color: black;
    background-image: url(../image/bg-gold.jpg);
    background-size: cover; /* ขยายรูปภาพให้เต็มพื้นที่ */
    background-position: center center; /* จัดตำแหน่งให้รูปอยู่กลางจอ */
    background-repeat: no-repeat; /* ไม่ให้รูปซ้ำ */
    font-family: 'Kanit', sans-serif;
    color: #ffffff;
    height: 100vh; /* ใช้ความสูงของ viewport (จอ) */
    margin: 0; /* เอา margin ออก */
}

a {
    text-decoration: none !important;
}

p {
    font-size: 12px;
}

.link {
    color: #deaa1e;
}

.link:hover {
    color: #ffffff;
}

.tablink {
    font-size: 21px;
    color: #deaa1e;
}

.tablink:hover,
.tablink:visited {
    color: #ffffff;
}

.register {
    border-radius: 50px;
}

.sign {
    margin-top: 8px;
    margin-bottom: 8px;
    border-radius: 30px;
}

.sign:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* .site-header { */
    /* background-color: rgba(0, 0, 0, .85); */
    /* backdrop-filter: saturate(180%) blur(20px); */
/* } */

.navbarMobile {
    text-align: center;
    background: radial-gradient(ellipse farthest-corner at right bottom, #37d0fe 0%, #31d4fd 8%, #287d9f 30%, #2f6d8a 40%, transparent 80%),
        radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ace5ff 8%, #64c1d1 25%, #1f515d 62.5%, #1f4f5d 100%);
}

span {
    font-size: 18px;
}

.titleStep {
    font-size: 22px;
}

.padding {
    padding-top: 25px;
}

/* Animation */

@keyframes fadeInUp {
    from {
        transform: translate3d(0, 40px, 0)
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0, 40px, 0)
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.animated {
    text-align: center;
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}

.btn {
    text-align: center;
}

.logo {
    vertical-align: middle;
    width: 80%;
    /* -webkit-filter: grayscale(100);
    filter: grayscale(100); */
    transition: all 0.4s ease-in-out;
}

.logo:hover {
    -webkit-filter: none;
    filter: none;
    transform: scale(1.1);
}

.nav-item {
    width: 14%;
}

ul {
    padding-top: 100px;
}

.card {
    margin-top: 60px;
    background: hsl(0deg 0% 38% / 70%);
    border-radius: 10px;
    border: 1px solid #3a3a3a;
}

.description {
    display: inline-block;
    font-style: italic;
    color: #00befa;
}

.imageStepMobile {
    text-align: center;
}

.imageStepMobile img {
    width: 70px;
    margin-bottom: 20px;
    transition: all 0.4s ease-in-out;
}

.imageStepMobile img:hover {
    -webkit-filter: none;
    filter: none;
    transform: scale(1.1);
}

.imageStep img {
    width: 70px;
    margin-bottom: 20px;
    transition: all 0.4s ease-in-out;
}

.imageStep img:hover {
    -webkit-filter: none;
    filter: none;
    transform: scale(1.1);
}

.picture {
    visibility: hidden;
}

.lineEnd {
    margin-top: 24px;
    margin-bottom: 30px;
}

.logoNav {
    width: 300px;
}

.animation1,
.animation2,
.animation3 {
    position: absolute;
    z-index: 0;
}

.animation1 {
    right: 0;
    top: 8%;
    z-index: 0;
    opacity: 0.7;
    animation-name: myframes2;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

.animation2 {
    width: 500px;
    top: 30%;
    opacity: 0.6;
    animation-name: myframes;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

.animation3 {
    width: 60%;
    right: 10%;
    top: 10%;
    opacity: 0.5;
    animation-name: myframes3;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

@keyframes myframes {
    0% {
        top: 30%;
    }

    100% {
        top: 35%;
    }
}

@keyframes myframes2 {
    0% {
        right: 0;
    }

    100% {
        right: 5%;
    }
}

@keyframes myframes3 {
    0% {
        top: 10%;
    }

    100% {
        top: 15%;
    }
}


/* mobile */
@media screen and (max-width: 576px) {
    .logoImage {
        width: 350px;
    }

    .lineImg {
        width: 80%;
    }

    .lineEnd {
        width: 90%;
    }

    #footer img {
        margin: 8px;
        width: 30px;
        justify-content: center;
        -webkit-filter: grayscale(100);
        filter: grayscale(100);
        transition: all 0.4s ease-in-out;
    }

    .animation1 {
        width: 90%;
    }

    .animation2 {
        width: 250px;
    }

    .animation3 {
        width: 350px;
    }
}

/* medium */
@media screen and (min-width: 577px) {
    .logoImage {
        width: 380px;
    }

    .animation1 {
        width: 90%;
    }

    #footer img {
        margin: 10px;
        width: 40px;
        justify-content: center;
        -webkit-filter: grayscale(100);
        filter: grayscale(100);
        transition: all 0.4s ease-in-out;
    }
}

/* desktop */
@media screen and (min-width: 769px) {
    .logoImage {
        width: 450px;
    }

    #footer img {
        margin: 10px;
        width: 50px;
        justify-content: center;
        -webkit-filter: grayscale(100);
        filter: grayscale(100);
        transition: all 0.4s ease-in-out;
    }
}

#footer {
    background-color: black;
    padding-top: 40px;
    padding-bottom: 32px;
}

#footer img:hover {
    -webkit-filter: none;
    filter: none;
    transform: scale(1.1);
}

#tabStep {
    margin-bottom: 48px;
}

.modal-content {
    background-color: rgb(87, 87, 87);
}

.form-control,
.form-control:focus {
    background: hsla(0, 0%, 100%, .1);
    border-radius: 10px;
    border: 1px solid #2b2b2b;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color: #ffffff;
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.356);
    border-radius: 10px;
    border: 1px solid rgb(255, 230, 1);
    box-shadow: 0 4px 8px 0 rgb(255, 230, 1), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color: #ffffff;
    outline-offset: 0px !important;
    outline: none !important;
}

.form-control::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ffffff;
    opacity: 0.5;
    /* Firefox */
}

.dropdown-divider {
    color: #ffffff;
    opacity: 0.3;
}

.lineId {
    font-size: 12px;
    color: #1eff00;
}

.loginButton {
    background-color: #e91919;
    border-color: #fd1b1b;
    width: 100px;
}

.regisButton {
    background-color: #000000;
    border-color: #fd1b1b;
    width: 120px;
}

.blink_me {
    animation: blinker 1s linear infinite;
  }
  
  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }