@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
    font-family: 'Daytona';
    background: #000;
}

.text-yellow {
    color: #E0B371;
}

.line-height-30 {
    line-height: 30px;
}

.btn {
    border: none;
    &:focus {
        box-shadow: none;
        outline: 0;
    }
}

.btn-yellow {
    color:#000;
    background: linear-gradient(180deg, #E0B371 0%, #EECD9B 100%);
}

.btn-common {
    padding: 1.2rem 2rem;
    border-radius: 30px;
    font-weight: 600;
}

.min-w238 {
    min-width: 238px;
}

.header-top {
    background: linear-gradient(90.01deg, #E1B472 36.98%, #EFCF9F 100%);
    min-height: 58px;
}

.header-mid {
    border-bottom: 1px solid #393939;
    padding: 1rem 0;

    .navbar-nav {
        .nav-link {
            padding: 0.5rem 1rem;
            color: #fff;
            text-align: center;
        }
        .apply-btn {
            border: solid 1px #ddb46e;
            border-radius: 10px;
        }
    } 
}

.marquee {
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .track {
    display: inline-block;
    width: max-content;

    padding-left: 100%;
    will-change: transform;
    animation: marquee 18s linear infinite;
  }

  @keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
  }

  .track:hover {
    animation-play-state: paused;
  }

  .marquee-list {
      display: flex;
      flex-wrap: nowrap;
      gap: 30px;

      span {
          font-size: 1.5rem;
          text-transform: uppercase;
          img {
              width: 23px;
              margin-top: -4px;
          }
      }
  }

  .creator-slider {
    border-bottom: 1px solid #393939;
    .owl-carousel {
        .owl-stage {
            .item {
                .create-box {
                    background: #E5BC80;
                    padding: 10px 10px;
                    min-height: 100px;
                }
                .create-img {
                    position: relative;

                    .create-img-tlt {
                        position:absolute;
                        bottom: 0;
                        left: 0;
                        color: #fff;
                        padding: 0 15px;
                    }
                }
                .create-social {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 10px;
                    font-size: 1.2rem;
                    font-weight: 600;
                    line-height: 0;
                }
            }
        }
        .owl-nav {
            position: absolute;
            top: 50%;
            left: 15px;
            right: 15px;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);

            button.owl-prev, button.owl-next {
                width: 50px;
                height: 50px;
                background: rgba(224, 179, 113, 0.75);
                border-radius: 50%;
                font-size: 2.2rem;

                &.disabled {
                    opacity: 0;
                }
            } 
        }
    }
  }

  .build-section {
    border-bottom: 1px solid #393939;
  }

//   .tech-box {
//     max-width: 297px;
//     min-height: 297px;
//     width: 100%;
//     background: rgba(0, 0, 0, 0.2);
//     text-align: center;
//     margin: 0 auto;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     flex-direction: column;
//     border-radius: 20px;
//   }

  .rwd-box {
    background: rgba(63, 62, 63, 1);
    border-radius: 34px;
    padding: 2.2rem 1.2rem;
    min-height: 285px;
  }

  .footer {
    background: linear-gradient(90.01deg, #FDF3E4 15.01%, #E1B472 45.98%, #EFCF9F 100%);

    .ftr-link {
        a {
            color: #000;
            display: block;
            text-decoration: none;
            padding-bottom: .5rem;

            &:hover {
                color: #000;
            }
        }
    }

    .social-link {
        a {
            color: #000;
            text-decoration: none;
            font-size: 1.3rem;
            display: inline-block;
            margin-right: .5rem;

            &:hover {
                color: #000;
            }
        }
    }
  }
  
  
@media (min-width: 1200px) {
    .bnr-txt {
        h2 {
            font-size: 4.188rem;
            line-height: 6.692rem;
        }
    }

    .btn-common {
        font-size: 1.5rem;
    }
}