.fixed-top {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1030;
        }

        #particles-js {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }

        .selection-banner {
            background-image: url('https://cdn.discordapp.com/attachments/1189468024135221390/1189474202412138548/maxresdefault.jpg?ex=659e4b2d&is=658bd62d&hm=bf5521dbb415809dd747869287e7f6d6ee23776d318e2fab25206f90e2a6be4e&');
            background-size: cover;
            background-position: center;
            height: 75vh;
            width: 100%;
            margin: auto;
            color: white;
            position: relative;
            z-index: 1;
        }

        .selection-login {
            background-image: url('https://cdn.discordapp.com/attachments/984898644392173578/1189136111080050718/bg2.jpg?ex=659d104d&is=658a9b4d&hm=1023ba68fb3516f0e82bfa0cba784cbce6ffefd85aadf77e5d29d38782a0688a&');
            background-size: cover;
            background-position: center;
            height: 75vh;
            width: 100%;
            margin: auto;
            color: white;
            position: relative; /* Set .bg-image to relative */
            z-index: 1; /* Make sure this is above particles-js */
        }

        .text-custom {
            color: white; /* เปลี่ยน #yourColor เป็นรหัสสีที่คุณต้องการ */
        }

        .home__page {
            margin-top: 18%;
        }
        .home--hero {
            background: transparent;
            border-bottom: none;
          }
          .home__content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            min-height: 400px;
            width: 100%;
            padding: 60px 0;
          }
          .home__content--center {
            align-items: center;
          }
          .home__content--center .home__title {
            text-align: center;
          }
          .home__content--center .home__text {
            text-align: center;
          }
          .home__content--center .home__btns {
            justify-content: center;
          }
          .glow {
            font-size: 80px;
            color: #fff;
            text-align: center;
            text-shadow: 0 0 20px #fff, 0 0 30px #252525, 0 0 40px #272727, 0 0 50px #131313, 0 0 60px #131313, 0 0 70px #131313, 0 0 80px #131313;
            /*animation: glow 1s ease-in-out infinite alternate;*/
          }
          .glow2{
            text-shadow: 0 0 10px #000000, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #1a1a1a, 0 0 60px #1a1a1a, 0 0 70px #000000;
          }
          
          @-webkit-keyframes glow {
            from {
              text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #292929, 0 0 40px #4b4b4b, 0 0 50px #313131, 0 0 60px #1a1a1a, 0 0 70px #000000;
            }
            
            to {
              text-shadow: 0 0 20px #fff, 0 0 30px #252525, 0 0 40px #272727, 0 0 50px #131313, 0 0 60px #131313, 0 0 70px #131313, 0 0 80px #131313;
            }
          }
          .home__title {
            position: relative;
            z-index: 2;
            color: #fff;
            font-weight: 400;
            font-size: 30px;
            font-family: 'Inter', sans-serif;
            margin-bottom: 0;
            line-height: 140%;
          }
          .home__title b {
            font-weight: 500;
          }
          .home__title span {
            color: #6164ff;
          }
          .home__text {
            position: relative;
            z-index: 2;
            color: #bdbdbd;
            font-size: 16px;
            line-height: 28px;
            margin-bottom: 0;
            margin-top: 15px;
          }
          .home__btns {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            width: 100%;
            margin-top: 10px;
          }
          .home__btn {
            width: auto;
            min-width: 140px;
            height: 50px;
            border-radius: 12px;
            background-color: #222227;
            display: inline-flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 14px;
            position: relative;
            z-index: 2;
            text-transform: uppercase;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            padding: 0 20px;
            margin-top: 20px;
            margin-right: 20px;
          }
          .home__btn svg {
            fill: #fff;
            width: 28px;
            height: auto;
            margin-right: 7px;
          }
          .home__btn:last-child {
            margin-right: 0;
          }
          .home__btn:hover {
            color: #6164ff;
          }
          .home__btn--clr {
            background-color: #6164ff;
            color: #fff;
          }
          .home__btn--clr:hover {
            background-color: #222227;
            color: #6164ff;
          }
          @media (min-width: 768px) {
            .home__content {
              padding: 250px 0;
            }
            .home__title {
              font-size: 36px;
            }
            .home__btn {
              margin-top: 30px;
              margin-right: 30px;
              min-width: 160px;
              padding: 0 25px;
            }
            .home__btn:last-child {
              margin-right: 0;
            }
          }
          @media (min-width: 1200px) {
            .home__title {
              font-size: 42px;
            }
            .home__btn {
              margin-top: 40px;
            }
          }

        .glow {
            text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5); /* เพิ่มเอฟเฟกต์แสงรอบตัวหนังสือ */
        }
        
        .carousel-item .row [class*="col-"] {
            display: flex;
            flex-direction: column;
          }
          
          .carousel-item .row .col-md-3 {
            flex: 0 0 25%;
            max-width: 25%;
          }

        /* Add additional CSS to customize your dropdown button */
        .dropdown-toggle {
            background-color: black;
            color: white; /* Text color */
            border-radius: 20px;
            padding: 10px 20px;
        }
        /* Customize the dropdown menu */
        .dropdown-menu {
            background-color: black;
            border-radius: 20px;
        }
        .dropdown-item {
            color: white; /* Text color */
        }
        /* Custom icon size and margin */
        .dropdown-icon {
            width: 30px; /* adjust as needed */
            margin-right: 10px;
        }
        .logo-image {
            width: 40px; /* หรือขนาดที่คุณต้องการ */
            height: auto; /* หรือขนาดที่คุณต้องการ, 'auto' จะรักษารูปแบบอัตราส่วนของรูปภาพ */
        }
        .dropdown-icon {
            width: 30px; /* หรือขนาดที่คุณต้องการ */
            height: auto; /* หรือขนาดที่คุณต้องการ, 'auto' จะรักษารูปแบบอัตราส่วนของรูปภาพ */
        }
        
        .bg-image2 {
            position: relative; /* This ensures that the positioning inside this div is relative to it */
            padding: 30px; /* This adds padding inside the bg-image2, you can adjust the value */
        }
        
        .custom-carousel-margin {
            margin-top: 20px; /* This adds margin to the top of the carousel container */
            margin-bottom: 20px; /* This adds margin to the bottom of the carousel container */
        }

        .card.custom-card {
            width: 250px;
            height: 100px;
            margin: 0 auto; /* Centers the card in the column */
        }

        #myCarousel {
            margin: 0 auto; /* This will center the carousel if it has a defined width */
        }
        
        .card {
            margin-top: 20px;
            border-radius: 16px;
            width: 100%;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            padding: 20px;
            border: 1px solid #ffffff;
            background-color: #ffffff;
        }
        
        .carousel-card-item {
            display: flex; /* Use flexbox for alignment */
            justify-content: center; /* This will center the card items horizontally */
            align-items: center; /* This will center the card items vertically */
            padding: 30px;
        }
        
        .navbar-custom {
            background-color: #000; /* Set the background to black */
        }

        .navbar-custom .navbar-nav .nav-link {
            color: #ffffff; /* Set the font color to a khaki-like color */
        }

        .navbar-custom .navbar-brand,
        .navbar-custom .navbar-toggler {
            color: #ffffff; /* Set the brand and toggler color */
        }

        .navbar-custom .btn-outline-light {
            border-color: #ffffff; /* Set border color for the sign-in button */
            color: #ffffff; /* Set text color for the sign-in button */
        }

        .navbar-custom .btn-outline-light:hover {
            background-color: #ffffff; /* Set background color on hover */
            color: #000; /* Set text color on hover */
        }
        
        .carousel-item .row {
            margin: 0;
          }
          
          .carousel-item .row .col-md-4 {
            flex: 0 0 auto;
            width: 33.333333%;
          }
          
          /* If you want to show 4 items instead, you can change the width to 25% */
          .carousel-item .row .col-md-4 {
            flex: 0 0 auto;
            width: 25%;
          }

          
        @media (max-width: 768px) {
            .carousel-inner .carousel-item>div {
                display: none;
            }
        
            .carousel-inner .carousel-item>div:first-child {
                display: block;
            }
        }
        
        .carousel-inner .carousel-item.active,
        .carousel-inner .carousel-item-start,
        .carousel-inner .carousel-item-next,
        .carousel-inner .carousel-item-prev {
            display: flex;
        }
        
        @media (min-width: 768px) {
        
            .carousel-inner .carousel-item-right.active,
            .carousel-inner .carousel-item-next,
            .carousel-item-next:not(.carousel-item-start) {
                transform: translateX(25%) !important;
            }
        
            .carousel-inner .carousel-item-left.active,
            .carousel-item-prev:not(.carousel-item-end),
            .active.carousel-item-start,
            .carousel-item-prev:not(.carousel-item-end) {
                transform: translateX(-25%) !important;
            }
        
            .carousel-item-next.carousel-item-start,
            .active.carousel-item-end {
                transform: translateX(0) !important;
            }
        
            .carousel-inner .carousel-item-prev,
            .carousel-item-prev:not(.carousel-item-end) {
                transform: translateX(-25%) !important;
            }
            .main {
                position: relative;
                margin-top: 70px;
                padding: 0 0 60px;
              }
              .main__title {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-end;
                flex-wrap: wrap;
                margin-bottom: 10px;
                margin-top: 60px;
              }
              .main__title h1 {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: flex-start;
                font-family: 'Inter', sans-serif;
                font-weight: 400;
                color: #fff;
                font-size: 30px;
                line-height: 140%;
                margin-bottom: 0;
                position: relative;
              }
              .main__title h1 b {
                font-weight: 500;
              }
              .main__title h1 a {
                color: #fff;
              }
              .main__title h1 a:hover {
                color: #6164ff;
              }
              .main__title h2 {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: flex-start;
                font-family: 'Inter', sans-serif;
                font-weight: 400;
                color: #fff;
                font-size: 26px;
                line-height: 150%;
                margin-bottom: 0;
                position: relative;
              }
              .main__title h2 svg {
                width: 26px;
                height: auto;
                fill: #6164ff;
                margin-right: 10px;
              }
              .main__title h2 b {
                font-weight: 500;
              }
              .main__title h2 a {
                color: #fff;
              }
              .main__title h2 a:hover {
                color: #6164ff;
              }
              .main__title h3 {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: flex-start;
                font-family: 'Inter', sans-serif;
                font-weight: 400;
                font-size: 24px;
                color: #fff;
                margin-bottom: 0;
                line-height: 100%;
                position: relative;
              }
              .main__title p {
                display: block;
                width: 100%;
                font-size: 16px;
                line-height: 26px;
                color: #bdbdbd;
                margin-top: 20px;
                margin-bottom: 0;
              }
              .main__title p b {
                font-weight: 600;
              }
              .main__title p a {
                color: #6164ff;
                text-decoration: underline;
              }
              .main__title p a:hover {
                text-decoration: none;
              }
              .main__title ol {
                padding-left: 0;
                list-style: none;
                counter-reset: li;
                margin-bottom: 0;
              }
              .main__title ol ol {
                padding-left: 15px;
                margin-top: 10px;
              }
              .main__title ol ol ol {
                margin-top: 10px;
                margin-bottom: 10px;
              }
              .main__title ol ol ol li {
                margin-top: 5px;
              }
              .main__title ol h4 {
                font-size: 16px;
                color: #fff;
                display: inline-block;
                margin-bottom: 0;
                margin-top: 20px;
                font-weight: 500;
                font-family: 'Inter', sans-serif;
              }
              .main__title ol li {
                font-size: 16px;
                line-height: 24px;
                color: #bdbdbd;
                position: relative;
              }
              .main__title ol li b {
                font-weight: 600;
                color: #bdbdbd;
              }
              .main__title ol li a {
                color: #eb5757;
              }
              .main__title ol li a:hover {
                color: #eb5757;
                text-decoration: underline;
              }
              .main__title ol li:last-child {
                margin-bottom: 0;
              }
              .main__title ol li:before {
                counter-increment: li;
                content: counters(li, ".") ". ";
              }
              .main__title--page {
                margin-bottom: 0;
                margin-top: 50px;
              }
              .main__title--border-top {
                padding-top: 55px;
                border-top: 1px solid #222227;
              }
              .main__title--center {
                justify-content: center;
                align-items: center;
              }
              .main__title--center h1,
              .main__title--center h2 {
                text-align: center;
                justify-content: center;
              }
        }