@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
  --swiper-theme-color: #ff4931;
}

/* Mobile-first styles */

* {
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
  font-family: "Kanit", sans-serif;
  --swiper-theme-color: rgb(211, 145, 3);
}

.main_signup_space {
  display: flex;
  align-items: center;
  justify-content: start;
  position: fixed;
  width: 100%;
  height: 100%;
  gap: 0.1rem;
}

.form_tone {
  width: 100%;
  height: auto;
  background-color: rgb(253, 253, 253);
  padding-top: 0rem;
  padding-left: 1rem;
}

.form_tone h2 {
  color: #000;
  font-size: 20px;
  font-weight: 400;
}

.name input {
  width: 93%;
  border-radius: 30px;
  height: 3.5rem;

  margin-top: 1rem;

  color: #000;
  padding-left: 2rem;
  font-size: 13px;
  border: solid 1.5px rgb(0, 0, 0, 0.4);
}

.name input::placeholder {
  color: #000;
  font-size: 13px;
}

.name_sake {
  display: flex;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2rem;
}

.name_input input {
  width: 86%;
  height: 3.5rem;
  padding-left: 2rem;
  font-size: 13px;
  border-radius: 30px;
  border: solid 1.5px rgb(0, 0, 0, 0.4);
}

.name_input input::placeholder {
  color: #000;
  font-size: 13px;
}

.div_signUp {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  gap: 0.5rem;
  grid-template-columns: repeat(2, 1fr);
}

.div_signUp button {
  filter: grayscale(0.35) contrast(0.9);
  background-color: #111111;
  color: #ffffff;
  height: 3.5rem;
  width: 9.6rem;
  border-radius: 30px;
  cursor: pointer;
}

.div_signUp button:last-child {
  background-color: transparent;

  border: solid 1.5px rgb(0, 0, 0, 0.4);
}

.div_signUp button:last-child a {
  color: #000;
  font-size: 13px;
}

#form_tone a {
  color: #111111;
  margin-top: 1rem;
  position: relative;
  top: 1rem;
}


.form_tone p{
    font-size: 14px;
    color: #111111;
    margin-top: 2rem;
}

.image_tone {
  width: 61%;
  height: 93vh;
  display: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.4);
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
}

@media (min-width: 375px) {
}

@media (min-width: 390px) {
  .main_signup_space {
    display: flex;
    align-items: center;
    justify-content: start;
    position: fixed;
    width: 100%;
    height: 100%;
    gap: 0.1rem;
  }

  .form_tone {
    width: 100%;
    height: auto;
    background-color: rgb(253, 253, 253);
    padding-top: 0rem;
    padding-left: 1rem;
  }

  .form_tone h2 {
    color: #000;
    font-size: 20px;
    font-weight: 400;
  }

  .name input {
    width: 93%;
    border-radius: 30px;
    height: 3.9rem;

    margin-top: 1rem;

    color: #000;
    padding-left: 2rem;
    font-size: 13px;
    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .name input::placeholder {
    color: #000;
    font-size: 13px;
  }

  .name_sake {
    display: flex;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
  }

  .name_input input {
    width: 86%;
    height: 3.9rem;
    padding-left: 2rem;
    font-size: 13px;
    border-radius: 30px;
    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .name_input input::placeholder {
    color: #000;
    font-size: 13px;
  }

  .div_signUp {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    gap: 0.5rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .div_signUp button {
    height: 3.9rem;
    width: 10.6rem;
    border-radius: 30px;
    cursor: pointer;
  }

  .div_signUp button:last-child {
    background-color: transparent;

    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .div_signUp button:last-child a {
    color: #000;
    font-size: 13px;
  }
}

@media (min-width: 412px) {
  .main_signup_space {
    display: flex;
    align-items: center;
    justify-content: start;
    position: fixed;
    width: 100%;
    height: 100%;
    gap: 0.1rem;
  }

  .form_tone {
    width: 100%;
    height: auto;
    background-color: rgb(253, 253, 253);
   
    padding-left: 1rem;
  }

  .form_tone h2 {
    color: #000;
    font-size: 23px;
    font-weight: 400;
  }

  .name input {
    width: 95%;
    border-radius: 30px;
    height: 4rem;

    margin-top: 1rem;

    color: #000;
    padding-left: 2rem;
    font-size: 13.5px;
    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .name input::placeholder {
    color: #000;
    font-size: 13.5px;
  }

  .name_sake {
    display: flex;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
  }

  .name_input input {
    width: 89%;
    height: 4rem;
    padding-left: 2rem;
    font-size: 13.5px;
    border-radius: 30px;
    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .name_input input::placeholder {
    color: #000;
    font-size: 13.5px;
  }

  .div_signUp {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    gap: 0.5rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .div_signUp button {
    height: 4rem;
    width: 11.5rem;
    border-radius: 30px;
    cursor: pointer;
  }

  .div_signUp button:last-child {
    background-color: transparent;

    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .div_signUp button:last-child a {
    color: #000;
    font-size: 13.5px;
  }
}

@media (min-width: 414px) {
}

@media (min-width: 428px) {
  .main_signup_space {
    display: flex;
    align-items: center;
    justify-content: start;
    position: fixed;
    width: 100%;
    height: 100%;
    gap: 0.1rem;
  }

  .form_tone {
    width: 100%;
    height: auto;
    background-color: rgb(253, 253, 253);
    padding-top: 0rem;
    padding-left: 1rem;
  }

  .form_tone h2 {
    color: #000;
    font-size: 23px;
    font-weight: 400;
  }

  .name input {
    width: 97%;
    border-radius: 30px;
    height: 4rem;

    margin-top: 1rem;

    color: #000;
    padding-left: 2rem;
    font-size: 13.5px;
    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .name input::placeholder {
    color: #000;
    font-size: 13.5px;
  }

  .name_sake {
    display: flex;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
  }

  .name_input input {
    width: 99%;
    height: 4rem;
    padding-left: 2rem;
    font-size: 13.5px;
    border-radius: 30px;
    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .name_input input::placeholder {
    color: #000;
    font-size: 13.5px;
  }

  .div_signUp {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    gap: 0.5rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .div_signUp button {
    height: 4rem;
    width: 12rem;
    border-radius: 30px;
    cursor: pointer;
  }

  .div_signUp button:last-child {
    background-color: transparent;

    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .div_signUp button:last-child a {
    color: #000;
    font-size: 13.5px;
  }
}

@media (min-width: 430px) {
}

@media (min-width: 500px) {
  .main_signup_space {
    display: flex;
    align-items: center;
    justify-content: start;
    position: fixed;
    width: 100%;
    height: 100%;
    gap: 0.1rem;
  }

  .form_tone {
    width: 100%;
    height: auto;
    background-color: rgb(253, 253, 253);
    padding-top: 0rem;
    padding-left: 1rem;
  }

  .form_tone h2 {
    color: #000;
    font-size: 23px;
    font-weight: 400;
  }

  .name input {
    width: 97%;
    border-radius: 30px;
    height: 4rem;

    margin-top: 1rem;

    color: #000;
    padding-left: 2rem;
    font-size: 13.5px;
    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .name input::placeholder {
    color: #000;
    font-size: 13.5px;
  }

  .name_sake {
    display: flex;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;

    gap: 1rem;
  }

  .name_input input {
    width: 14rem;
    height: 4rem;
    padding-left: 2rem;
    font-size: 13.5px;
    border-radius: 30px;
    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .name_input input::placeholder {
    color: #000;
    font-size: 13.5px;
  }

  .div_signUp {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    gap: 0.5rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .div_signUp button {
    height: 4rem;
    width: 14rem;
    border-radius: 30px;
    cursor: pointer;
  }

  .div_signUp button:last-child {
    background-color: transparent;

    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .div_signUp button:last-child a {
    color: #000;
    font-size: 13.5px;
  }
}

@media (min-width: 540px) {
  .name_sake {
    display: flex;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;

    gap: 1rem;
  }

  .name_input input {
    width: 15.3rem;
    height: 4rem;
    padding-left: 2rem;
    font-size: 13.5px;
    border-radius: 30px;
    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .name_input input::placeholder {
    color: #000;
    font-size: 13.5px;
  }

  .div_signUp {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    gap: 0.5rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .div_signUp button {
    height: 4rem;
    width: 15.3rem;
    border-radius: 30px;
    cursor: pointer;
  }

  .div_signUp button:last-child {
    background-color: transparent;

    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .div_signUp button:last-child a {
    color: #000;
    font-size: 13.5px;
  }
}

@media (min-width: 640px) {
  html {
    font-size: 10px;
  }




      
  .main_signup_space {
    display: flex;
    align-items: center;
    justify-content: start;
    position: fixed;
    width: 100%;
    height: 100%;
    gap: 0.1rem;
  }

  .form_tone {
    width: 100%;
    height: auto;
    background-color: rgba(236, 236, 236, 0);
    padding-top:3rem;
    padding-left: 3rem;
  }



    .form_tone h2{
        color: #000;
        font-size: 35px;
        font-weight:500;
    }

    .name input{
        width:58rem;
        border-radius: 30px;
        height: 5.5rem;
            
            margin-top: 1rem;

              color: #000;
              padding-left: 2rem;
            font-size: 15px;
            border: solid 1.5px rgb(0, 0, 0, 0.4);
    }


        .name input::placeholder{
            color: #000;
            font-size: 15px;
        }




  .name_sake{
    display: flex;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
       gap: 3rem;

  }



  .name_input input{
      width:27rem;
   height: 5rem;
      padding-left: 2rem;
    font-size: 15px;
            border-radius: 30px;
            border: solid 1.5px rgb(0, 0, 0, 0.4);
  }




        .name_input input::placeholder{
            color: #000;
            font-size: 15px;
        }





        .div_signUp{
             display: flex;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
     grid-template-columns: repeat(2, 1fr);
        }



            .div_signUp button{
                
                height: 5rem;
                width: 12.4rem;
                border-radius: 30px;
                cursor: pointer;
            }




                 .div_signUp button:last-child{
                    background-color: transparent;
                        
                            border: solid 1.5px rgb(0, 0, 0, 0.4);
                 }



                  .div_signUp button:last-child a{
                    color: #000;
                    font-size: 13px;
                
                  }

}

@media (min-width: 768px) {


    
  .main_signup_space {
    display: flex;
    align-items: center;
    justify-content: start;
    position: fixed;
    width: 100%;
    height: 100%;
    gap: 0.1rem;
  }

  .form_tone {
    width: 100%;
    height: auto;
    background-color: rgba(236, 236, 236, 0);
    padding-top:3rem;
    padding-left: 3rem;
  }



    .form_tone h2{
        color: #000;
        font-size: 35px;
        font-weight:500;
    }

    .name input{
        width:70rem;
        border-radius: 30px;
        height: 5.8rem;
            
            margin-top: 1rem;

              color: #000;
              padding-left: 2rem;
            font-size: 15px;
            border: solid 1.5px rgb(0, 0, 0, 0.4);
    }


        .name input::placeholder{
            color: #000;
            font-size: 15px;
        }




  .name_sake{
    display: flex;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
       gap: 3rem;

  }



  .name_input input{
      width:34rem;
   height: 6rem;
      padding-left: 2rem;
    font-size: 15px;
            border-radius: 30px;
            border: solid 1.5px rgb(0, 0, 0, 0.4);
  }




        .name_input input::placeholder{
            color: #000;
            font-size: 15px;
        }





        .div_signUp{
             display: flex;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
     grid-template-columns: repeat(2, 1fr);
        }



            .div_signUp button{
             
                height: 5rem;
                width: 12.4rem;
                border-radius: 30px;
                cursor: pointer;
            }




                 .div_signUp button:last-child{
                    background-color: transparent;
                        
                            border: solid 1.5px rgb(0, 0, 0, 0.4);
                 }



                  .div_signUp button:last-child a{
                    color: #000;
                    font-size: 13px;
                
                  }
}

@media (min-width: 820px) {
}

@media (min-width: 853px) {
  html {
    font-size: 14px;
  }


    
  .main_signup_space {
    display: flex;
    align-items: center;
    justify-content: start;
    position: fixed;
    width: 100%;
    height: 100%;
    gap: 0.1rem;
  }

  .form_tone {
    width: 100%;
    height: auto;
    background-color: rgba(236, 236, 236, 0);
    padding-top:3rem;
    padding-left: 3rem;
  }



    .form_tone h2{
        color: #000;
        font-size: 35px;
        font-weight:500;
    }

    .name input{
        width:59rem;
        border-radius: 30px;
        height: 5.5rem;
            
            margin-top: 1rem;

              color: #000;
              padding-left: 2rem;
            font-size: 15px;
            border: solid 1.5px rgb(0, 0, 0, 0.4);
    }


        .name input::placeholder{
            color: #000;
            font-size: 15px;
        }




  .name_sake{
    display: flex;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
       gap: 3rem;

  }



  .name_input input{
      width:28rem;
   height: 5rem;
      padding-left: 2rem;
    font-size: 15px;
            border-radius: 30px;
            border: solid 1.5px rgb(0, 0, 0, 0.4);
  }




        .name_input input::placeholder{
            color: #000;
            font-size: 15px;
        }





        .div_signUp{
             display: flex;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
     grid-template-columns: repeat(2, 1fr);
        }



            .div_signUp button{
             
                height: 5rem;
                width: 12.4rem;
                border-radius: 30px;
                cursor: pointer;
            }




                 .div_signUp button:last-child{
                    background-color: transparent;
                        
                            border: solid 1.5px rgb(0, 0, 0, 0.4);
                 }



                  .div_signUp button:last-child a{
                    color: #000;
                    font-size: 13px;
                
                  }
}

@media (min-width: 980px) {
  html {
    font-size: 16px;
  }



  
  
  .main_signup_space {
    display: flex;
    align-items: center;
    justify-content: start;
    position: fixed;
    width: 100%;
    height: 100%;
    gap: 0.1rem;
  }

  .form_tone {
    width: 100%;
    height: auto;
    background-color: rgba(236, 236, 236, 0);
    padding-top:3rem;
    padding-left: 3rem;
  }



    .form_tone h2{
        color: #000;
        font-size: 35px;
        font-weight:500;
    }

    .name input{
        width:54rem;
        border-radius: 30px;
        height: 5.5rem;
            
            margin-top: 1rem;

              color: #000;
              padding-left: 2rem;
            font-size: 15px;
            border: solid 1.5px rgb(0, 0, 0, 0.4);
    }


        .name input::placeholder{
            color: #000;
            font-size: 15px;
        }




  .name_sake{
    display: flex;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
       gap: 3rem;

  }



  .name_input input{
      width:25rem;
   height: 5rem;
      padding-left: 2rem;
    font-size: 15px;
            border-radius: 30px;
            border: solid 1.5px rgb(0, 0, 0, 0.4);
  }




        .name_input input::placeholder{
            color: #000;
            font-size: 15px;
        }





        .div_signUp{
             display: flex;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
     grid-template-columns: repeat(2, 1fr);
        }



            .div_signUp button{
             
                height: 5rem;
                width: 12.4rem;
                border-radius: 30px;
                cursor: pointer;
            }




                 .div_signUp button:last-child{
                    background-color: transparent;
                        
                            border: solid 1.5px rgb(0, 0, 0, 0.4);
                 }



                  .div_signUp button:last-child a{
                    color: #000;
                    font-size: 13px;
                
                  }
}

@media (min-width: 1024px) {
}

@media (min-width: 1280px) {
  .main_signup_space {
    display: flex;
    align-items: center;
    justify-content: start;
    position: fixed;
    width: 100%;
    height: 100%;
    gap: 0.1rem;
  }

  .form_tone {
    width: 38%;
    height: 99.6vh;
    background-color: rgb(253, 253, 253);
    padding-top: 3rem;
    padding-left: 3rem;
  }

  .form_tone h2 {
    color: #000;
    font-size: 35px;
    font-weight: 600;
  }

  .name input {
    width: 90%;
    border-radius: 30px;
    height: 3.5rem;

    margin-top: 1rem;

    color: #000;
    padding-left: 2rem;
    font-size: 15px;
    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .name input::placeholder {
    color: #000;
    font-size: 15px;
  }

  .name_sake {
    display: flex;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
    gap: 0rem;
  }

  .name_input input {
    width: 95%;
    height: 3.5rem;
    padding-left: 2rem;
    font-size: 15px;
    border-radius: 30px;
    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .name_input input::placeholder {
    color: #000;
    font-size: 15px;
  }

  .div_signUp {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .div_signUp button {
    filter: grayscale(0.35) contrast(0.9);
    background-color: #111111;
    height: 3.5rem;
    width: 12.4rem;
    border-radius: 30px;
    cursor: pointer;
    color: #ffffff;
  }

  .div_signUp button:last-child {
    background-color: transparent;

    border: solid 1.5px rgb(0, 0, 0, 0.4);
  }

  .div_signUp button:last-child a {
    color: #000;
    font-size: 13px;
  }

  #form_tone a {
    color: #111111;
    margin-top: 1rem;
    position: relative;
    top: 1rem;
  }

  .image_tone {
    width: 61%;
    height: 93vh;
    display: block;
    box-shadow: 0 0 2px rgb(0, 0, 0, 0.4);
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
  }

  .div_text_space {
    position: absolute;
    width: 61%;
    height: 93vh;
    background: linear-gradient(
      to top,
      #161616b9 65%,
      /* Greenish color */ rgba(231, 39, 5, 0) 80%,
      /* Lighter green fading out */ rgba(231, 39, 5, 0) 100%
        /* Shadow effect on the right */
    );
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;

    padding-top: 20rem;
    padding-left: 2rem;
  }

  .div_text_space h1 {
    color: aliceblue;
    font-weight: 400;
    font-size: 30px;
    text-shadow: 1px 1px 1px #000;
  }

  .div_text_space b {
    color: rgba(211, 145, 3, 0.966);
    font-weight: 400;
  }

  .div_text_space p {
    font-size: 14px;
    color: aliceblue;
  }

  .more_about_us {
    height: 3rem;
    width: 12rem;
    background-color: rgb(211, 145, 3);

    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
  }

  .more_about_us a {
    color: aliceblue;
    font-size: 14px;
  }
  .image_tone img {
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    width: 100%;
    height: 100%;
  }
}