:root{
  --form-bg:rgba(255, 255, 255, 0.08);
}
.bg-black{background:#000}
.text-white{color: #fff}
.text-black{color:#000}
.relative{position: relative}
.absolute{position:absolute}
.text-center{text-align: center}
.text-left{text-align: left}
.text-right{text-align: right}
.fs-1{font-size: 96px !important}
.fs-2{font-size: 46px !important}
.fs-3{font-size: 36px !important}
.fs-4{font-size: 26px !important}
.text-black{color:#000}
.italic{font-style: italic}
.bold{font-weight: bold}
.flex{display:flex}
.flex-column{flex-direction: column}
.flex-wrap{flex-wrap: wrap}
.flex-nowrap{flex-wrap: nowrap}
.items-center{align-items: center}
.content-centent{justify-content: center}
.text-color-ldp{
          background-image: linear-gradient(180deg, #000000 0%, #FFFFFF 100%);
        background-size: cover;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
        display: inline-block;
}
.caption-text {position: absolute;bottom:10%;display: flex;flex-direction: column;gap: 10px 0}
.caption-text h1{}
.caption-text p{font-size: 18px;color:#fff;line-height: 1}

.ldp-header img{width:100%;height: auto;}

.section-text{padding:180px 0}
.section-text p{color:#fff;font-size: 16px;line-height: 1.4}
.section-note{}
.section-note h4{font-size: 18px}
.section-note p{font-size: 14px;color:#7a7a7a}

#frmRegister{width:100%;max-width: 260px;margin-bottom: 15px}
#frmRegister form{display: flex;flex-direction: column;gap:15px}
#frmRegister .input-inline{background: #2C2C2E;display: flex;align-items: center; border:1px solid rgba(166, 170, 181, 0.30);
                          border-radius: 8px;padding:0 5px;width:100%;
                          }
#frmRegister .input-inline .icon{margin-right: 12px;display: flex;align-items: center}
#frmRegister .input-inline .icon svg{width:20px;height:20px;display: block}
#frmRegister .input-inline input{
  width: 100%;
    background: transparent;
    border: none;
  
    outline: none;
    color: #E7CAAC;
    font-size: 16px;
    padding: 18px 0;
}
#frmRegister .input-inline input,#frmRegister .input-inline button,.form-preorder__inner button{
  height:40px;
}
.separator {
    width: 1px;
    height: 24px;
    background: #4D4E52;
    margin-right: 12px;
}
#frmRegister button,.form-preorder__inner button{background-color: #E9E9EA;
    color: #000000;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex
;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: 100%;
    transition: opacity 0.3s 
ease;
    flex-shrink: 0;
                   padding: 10px 30px;
                   }
#frmRegister button .submit-icon{display: flex;margin-right: 8px;align-items: center;}


.form-preorder{background:var(--form-bg);padding:15px;border:1px solid rgba(255, 255, 255, 0.3);border-radius: 8px;
               max-width: 640px;margin:30px auto;text-align: left}

.form-preorder__inner{}
.form-preorder__inner p{margin: 0 0 20px}
.form-preorder__inner p label{display: block;color:#fff;font-weight: normal}
.form-preorder__inner p input,.form-preorder__inner p textarea{

  display: block;
    width: 100%;
    padding: 8px 0;
    text-indent: 2%;color:#fff;
  background:rgba(255, 255, 255, 0.1);height:40px;
  font-size: 13px
  
}
.form-preorder__inner p textarea{height: 100px}
.form-preorder__inner p sup{color:#f00}
.font-note {text-align: right;font-size: 12px;color:#b8b8b8}
.error-msg {
  color: #ff5555;
  font-size: 13px;
  margin-top: 4px;
}
@media screen and (min-width:1024px){

  .col-md-6{width:50%}
  .col-md-7{width:60%}
  .col-md-5{width:40%}
  .flex-md-wrap{flex-wrap: wrap}
.flex-md-nowrap{flex-wrap: nowrap}
.image-for-mobile{display:none}
   .image-for-desktop{display:block}
}
@media screen and (max-width:991px){
  .fs-1{font-size: 56px !important}
  .fs-2 {
    font-size: 26px !important;
}
  .col-sm-12{width:100%}
  .col-sm-6{width:100%}
  .flex-sm-wrap{flex-wrap: wrap}
.flex-sm-nowrap{flex-wrap: nowrap}
  .image-for-desktop{display:none}
  .image-for-mobile{display:block}
  .caption-text{position: relative;text-align: center}
  .ldp-header{}

  .section-note .note-text{text-align: center}
  #frmRegister{margin-left: auto;margin-right: auto}
  .section-text{padding:60px 0}
  
}