@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);
}






@media (min-width: 360px) {
    .header_start{
    width: 100%;
    height: 15rem;
    
     background-image: url("../assets/mar3.jpg");
       background-size: cover;      
    background-position: center; 
}



.vail_spare{
    width: 100%;
    height: 15rem;
overflow: hidden;
position: absolute;
z-index: 2;
     background: rgba(0, 0, 0, 0.856);

     padding-left: 0.9rem;
     padding-top: 3rem;


}


.vail_spare h2{
    color: #fff;
    font-weight: 500;
    font-size: 17px;
}


.vail_spare b{
    color: #ffcb05;
}

.vail_spare hr{
    width: 90%;
    border: solid 1.5px #ccc;
    margin-top: 1.4rem;
}


.vail_spare article{
    color: #ffffffb6;
    margin-top: 0.5rem;
    font-size: 12px;
} 






.form_container{    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}



.form_space{
    width: 95%;
    height: 31rem;
      box-shadow: 0 0 1px rgb(0, 0, 0, 0.4);
    margin-top: 2rem;
    border-radius: 5px;
}


#form_space1{
   height: 20rem; 
}


#form_space1 a{
    font-size: 13px;
    color: #242424;
    margin-top: 0.7rem;

    cursor: pointer;
}

.reg_h2{
    width: 100%;
    height: 4rem;
    
    justify-content: center;
    align-items: center;
    display: flex;
}


.reg_h2 h2{
    color: #242424;
    font-size: 20px;
    font-weight: 500;
}

.reg_h2 b{
    color: #ffcb05;
    font-weight: 500;
}

.reg_h3{

    width: 100%;
 
    
    justify-content: center;
    align-items: center;
    display: flex;


}


.reg_h3 p{
    color: #242424;
    font-size: 12px;
    text-align: center;
    

}

form {
    padding-left: 2rem;
}
.name input{
    width: 90%;
    height: 3rem;
    border-radius: 3px;
    padding-left: 1rem;
    margin-top: 1rem;
   border: solid 1px rgb(0, 0, 0, 0.4);
}


.name1{
     width: 90%;
    height: 3rem;
    border-radius: 3px;
    padding-left: 1rem;
    padding-top: 0.5rem;
    margin-top: 1rem;
       border: solid 1px rgb(0, 0, 0, 0.4);
}



.name1 button{
background-color: transparent;
color: #ffcb05;
font-weight: 400;
cursor: pointer;
  padding-top: 0.5rem;
}



.button{
    width: 90%;
    height: 3rem;
    border-radius: 3px;
    padding-left: 1rem;
    margin-top: 1rem;
      background-color: #ffcb05;
      color: #fff;
      font-weight: 500;
      display: flex;
      justify-content: center;
      align-items: center;
}



.button button{
width: 100%;
height: 100%;
  border-radius: 3px;
  font-size: 17px;
  background-color: transparent;
  cursor: pointer;
}




footer{
    background-color: #242424;
    height: 20rem;
    width: 100%;
    margin-top: 2rem;
}
} 


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


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


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

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

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

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


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

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


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




        .header_start{
    width: 100%;
    height: 15rem;
    
     background-image: url("../assets/mar3.jpg");
       background-size: cover;      
    background-position: center; 
}



.vail_spare{
    width: 100%;
    height: 15rem;
overflow: hidden;
position: absolute;
z-index: 2;
     background: rgba(0, 0, 0, 0.856);

     padding-left: 1.9rem;
     padding-top: 3rem;


}


.vail_spare h2{
    color: #fff;
    font-weight: 500;
    font-size: 17px;
}


.vail_spare b{
    color: #ffcb05;
}

.vail_spare hr{
    width: 90%;
    border: solid 1.5px #ccc;
    margin-top: 1.4rem;
}


.vail_spare article{
    color: #ffffffb6;
    margin-top: 0.5rem;
    font-size: 12px;
} 












.form_container{    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}



.form_space{
    width: 95%;
    height: 32rem;
      box-shadow: 0 0 1px rgb(0, 0, 0, 0.4);
    margin-top: 2rem;
    border-radius: 5px;
}


.reg_h2{
    width: 100%;
    height: 4rem;
    
    justify-content: center;
    align-items: center;
    display: flex;
}


.reg_h2 h2{
    color: #242424;
    font-size: 20px;
    font-weight: 500;
}

.reg_h2 b{
    color: #ffcb05;
    font-weight: 500;
}


form {
    padding-left: 3rem;
}
.name input{
    width: 90%;
    height: 3rem;
    border-radius: 3px;
    padding-left: 1rem;
    margin-top: 1rem;
      border: solid 2px rgb(0, 0, 0, 0.4);
}


.name1{
     width: 90%;
    height: 3rem;
    border-radius: 3px;
    padding-left: 1rem;
    margin-top: 1rem;
    border: solid 2px rgb(0, 0, 0, 0.4);
}



.name1 button{
background-color: transparent;
color: #ffcb05;
font-weight: 400;
cursor: pointer;
}



.button{
    width: 90%;
    height: 3rem;
    border-radius: 3px;
    padding-left: 1rem;
    margin-top: 1rem;
      background-color: #ffcb05;
      color: #fff;
      font-weight: 500;
      display: flex;
      justify-content: center;
      align-items: center;
}



.button button{
width: 100%;
height: 100%;
  border-radius: 3px;
  font-size: 13px;
  background-color: transparent;
  cursor: pointer;
}

    }


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

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

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


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

  

          @media (min-width: 1280px) {
/*
      body {
    width: 100%;
    height: 100vh;
    margin: 0;
 
    

    background-image: url("../assets/mar1.jpg");
 
    background-size: cover;      
    background-position: center; 
    background-repeat: no-repeat;
    position: relative; 
}

*/


body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit; /* inherit background image */
  filter: brightness(24%); /* adjust brightness: 100% normal, <100 darker, >100 brighter */
  z-index: -1; /* keeps overlay behind content */
}



.header_start{
    width: 100%;
    height: 15rem;
    
     background-image: url("../assets/mar3.jpg");
       background-size: cover;      
    background-position: center; 
}



.vail_spare{
    width: 100%;
    height: 15rem;
overflow: hidden;
position: absolute;
z-index: 2;
     background: rgba(0, 0, 0, 0.856);

     padding-left: 6rem;
     padding-top: 5rem;


}


.vail_spare h2{
    color: #fff;
    font-weight: 500;
    font-size:35px;
}


.vail_spare b{
    color: #ffcb05;
}

.vail_spare hr{
    width: 80%;
    border: solid 1.5px #ccc;
    margin-top: 0.4rem;
}


.vail_spare article{
    color: #ffffffb6;
    margin-top: 0.5rem;
    font-size: 13px;
}




.form_container{    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}



.form_space{
    width: 50%;
    height: 31rem;
      box-shadow: 0 0 2px rgb(0, 0, 0, 0.4);
    margin-top: 2rem;
    border-radius: 5px;
}


#form_space1{
   height: 20rem; 
}


.reg_h2{
    width: 100%;
    height: 4rem;
    
    justify-content: center;
    align-items: center;
    display: flex;
}


.reg_h2 h2{
    color: #242424;
    font-size: 20px;
    font-weight: 500;
}

.reg_h2 b{
    color: #ffcb05;
    font-weight: 500;
}

.reg_h3 p{
    width: 100%;
}


form {
    padding-left: 3rem;
}
.name input{
    width: 90%;
    height: 3rem;
    border-radius: 3px;
    padding-left: 1rem;
    margin-top: 1rem;
    border: solid 1px rgb(0, 0, 0, 0.4);
      
}


.name1{
     width: 90%;
    height: 3rem;
    border-radius: 3px;
    padding-left: 1rem;
    margin-top: 1rem;
     
}



.name1 button{
background-color: transparent;
color: #ffcb05;
font-weight: 400;
cursor: pointer;
}



.button{
    width: 90%;
    height: 3rem;
    border-radius: 3px;
    padding-left: 1rem;
    margin-top: 1rem;
      background-color: #ffcb05;
      color: #fff;
      font-weight: 500;
      display: flex;
      justify-content: center;
      align-items: center;
}



.button button{
width: 100%;
height: 100%;
  border-radius: 3px;
  font-size: 17px;
  background-color: transparent;
  cursor: pointer;
}



footer{
    background-color: #242424;
    height: 20rem;
    width: 100%;
    margin-top: 2rem;
}
          
          }