body {  font-family: 'Poppins', sans-serif; /* text-align: center; */}
.error-message{ color: red;  font-size:12px; }
#pass{ width: 100%;float: left;}
.btn-new{ background: linear-gradient(275deg, #f32925, #f78f36);}
.box {width: 700px; margin: 0 auto; display: block;border: 0px solid #ccc;}
.box img{     width: 100%;}
#pass-area {  position: relative;  width: 700px;  height: 1055px; margin: 0 auto;     border: 1px solid #e65f2f;  background-image: url('libf-new-img-31.jpg'); background-size: cover; background-position: center top;  top:0}
#profile-wrapper{ position: absolute; top: 280px; left:auto;width:265px;height:335px;background-image:url('lifb-bg-new.jpg');cursor:pointer;overflow:hidden; display: flex ; align-items: center;
 justify-content: center;text-align: center;     padding: 12px 12px 0 12px; background-size: contain;   background-repeat: no-repeat;   right: 23px;}
#profile-pic { width: 100%;  height: 100%;  object-fit: cover;  display: none;}
#profile-placeholder { font-size: 16px;  color: #000;   padding: 10px;    pointer-events: none; }
#name-input, #designation-input { position: absolute; left: auto; transform: translateX(-50%); color: white;  text-shadow: 1px 1px 2px black;font-family: "Poppins", sans-serif;
text-align: center; background:#e3502b; background-size: cover;  width: 260px; right: -103px; height: 50px;  padding: 5px 5px; }
#stall-input { position: absolute;left:auto;/*transform: translateX(-50%);*/color:#000;/* text-shadow: 1px 1px 2px black;*/font-family: "Poppins", sans-serif;text-align:center;background: #eaeaea;
    background-size: cover;    width: 200px;    left: 40px;    height: 60px;    padding: 5px 5px; }
#name-input {      top: 605px;    /*  background: #f22426;*/      font-size: 14px;      font-weight: 600;}
#stall-input {     top: 690px;    font-size: 17px;    font-weight: normal;}
#designation-input {      top: 655px;      font-size: 12px;      font-weight: normal;}
#name-input:empty::before,    #designation-input:empty::before  {      content: attr(data-placeholder);      color: white;}
 #stall-input:empty::before{      content: attr(data-placeholder);      color: #000;}
#download-btn { margin-top: 20px; padding: 10px 20px;background: linear-gradient(275deg, #f32925, #f78f36);color: white;border: none;border-radius: 5px; font-size: 16px;cursor: pointer;      margin:15px auto 0;        width: fit-content;        float: none;        display: block; }
#hidden-file { display: none;}
.fw-semibold {      font-weight: 600 !important; font-size: 18px;  }  
#contact_section { padding: 60px 0; width: 100%;float: left; /* margin-top: 5%; */}
.form-wrapper { background: #ffffff;  border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);  padding: 40px; width: 100%;}
.divider_profile { width: 100px;  height: 3px; background: #000; margin: 0 auto;}
.form-label {  font-size: 14px;}

#brand-wrapper {
    width: 200px;
    height: 97px;
    background: #efefef;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    top: 276px;
    left: 38px;}

#brand-wrapper img {
    max-width: 100%;
    max-height: 120%;
  display: none;
  
}

#brand-placeholder {
  font-size: 17px;
  color: #777;
  text-align: center;
}

#brand-file{
  display: none;
}



@media only screen and (min-width: 601px) and (max-width: 650px){
.form-label { font-size: 14px;}
.box{   width: 100%;}
#pass-area {   width: 100%; height: 980px;}
#stall-input {  top: 650px;}
#brand-wrapper{top: 256px;
  left: 35px;
}
}

@media only screen and (min-width: 551px) and (max-width: 600px){
.form-label {font-size: 14px;}
.box{ width: 100%;}
#pass-area {    width: 100%;height: 905px;}
#name-input {   right: -87px;top: 495px;    width: 220px;}
  #stall-input {  top: 580px;}
 #profile-wrapper { position: absolute;   top: 230px;  left: auto; width: 220px;  height: 275px; padding: 12px 12px 0 12px;     right: 23px;}  
  #designation-input { top: 545px;    right: -87px;    width: 220px;}
    #brand-wrapper { width: 173px;
    height: 84px;
    top: 236px;
    left: 32px;}
  #brand-placeholder {  font-size: 14px;}
  }
  

@media only screen and (min-width: 501px) and (max-width: 550px){
  .form-label {font-size: 14px;}
.box{ width: 100%;}
#pass-area {    width: 100%;height:835px;}
#name-input {   right: -87px;top: 495px;    width: 220px;}
#stall-input {top: 540px;    left: 30px;}
 #profile-wrapper { position: absolute;   top: 230px;  left: auto; width: 220px;  height: 275px; padding: 12px 12px 0 12px;     right: 23px;}  
  #designation-input { top: 545px;    right: -87px;    width: 220px;}
      #brand-wrapper {  width: 160px;    height: 78px;    top: 218px;    left: 27px;}
  #brand-placeholder {  font-size: 14px;}
 
}

@media only screen and (min-width: 451px) and (max-width: 500px){
  .form-label {font-size: 14px;}
  .box{ width: 100%;}
  #pass-area {    width: 100%;height:755px;}
  #name-input {    right: -64px;    width: 167px;    top: 415px;    height: 40px;}
   #profile-wrapper {position: absolute;    top: 210px;    left: auto;    width: 167px;    height:210px;    padding: 9px 10px 0 9px;    right: 18px;}  
    #designation-input {top: 455px;   right: -64px;    width: 167px;  height: 45px;}
    #stall-input {top: 480px;    left: 30px;    width: 180px;    font-size: 15px;    height: 50px;}
      #brand-wrapper {  width: 145px;    height: 70px;    top: 197px;    left: 27px;}
  #brand-placeholder {  font-size: 14px;}
  }
  

@media only screen and (min-width: 401px) and (max-width: 450px){
  .form-label {font-size: 14px;}
  .box{ width: 100%;}
  #pass-area {    width: 100%;height: 685px;}
  #name-input {    right: -64px;    width: 167px;    top: 395px;    height: 40px;}
   #profile-wrapper {position: absolute;    top: 190px;    left: auto;    width: 167px;    height:210px;    padding: 9px 10px 0 9px;    right: 18px;}  
    #designation-input {top: 435px;   right: -64px;    width: 167px;  height: 45px;}
    #stall-input {top: 440px;    left: 20px;    width: 180px;    font-size: 15px;    height: 50px;}
    #brand-wrapper {  width: 130px;    height: 64px;    top: 178px;    left: 22px;}
  #brand-placeholder {  font-size: 14px;}
  
  
}

@media only screen and (min-width: 361px) and (max-width: 400px){
  .form-label {font-size: 14px;}
  .box{ width: 100%;}
  #pass-area {   width: 100%;height: 605px;} 
  #name-input {    right: -45px;    width: 127px;    top: 326px;height: 40px;}   
   #profile-wrapper {position: absolute;    top: 170px;    left: auto;    width: 127px;    height: 160px;    padding: 9px 10px 0 9px;    right: 18px;}  
    #designation-input {top:366px;  right: -45px;    width: 127px;   height: 40px;}
   #stall-input {top: 390px;    left: 20px;    width: 150px;    font-size: 14px;    height: 40px;}
    #brand-wrapper {  width: 115px;    height: 58px;    top: 158px;    left: 20px;}
  #brand-placeholder {  font-size: 14px;}
}

 @media only screen and (min-width: 321px) and (max-width: 360px){
  .form-label {font-size: 14px;}
  .box{ width: 100%;}
  #pass-area {   width: 100%;height:555px;}
  #name-input {   font-size: 11px;    right: -37px;    width: 110px;    top: 275px;    height: 40px;}
   #profile-wrapper { position: absolute;    top: 140px;    left: auto;    width: 110px;    height: 140px;    padding: 6px 6px 0 6px;    right: 18px;}  
    #designation-input {font-size: 11px;    right: -37px;    width: 110px;    top: 315px;    height: 40px;}
 #stall-input {top: 350px;    left: 16px;    width: 150px;    font-size: 14px;    height: 40px;} 
 #brand-wrapper {  width: 105px;    height: 53px;    top: 144px;    left: 16px;}
  #brand-placeholder {  font-size: 14px;}
}

@media only screen and (min-width: 0px) and (max-width: 320px){
  .form-label {font-size: 14px;}
  .box{ width: 100%;}
  #pass-area {    width: 100%;height:500px;}
#name-input { font-size: 11px;    right: -32px;    width: 100px;    top: 257px;    height: 35px;}
   #profile-wrapper {position: absolute;    top: 140px;    left: auto;    width: 100px;    height: 120px;    padding: 6px 6px 0 6px;    right: 18px;}  
    #designation-input {font-size: 11px;    right: -32px;    width: 100px;    top:292px;    height: 35px;}
 #stall-input {top: 320px;    left: 12px;    width: 120px;    font-size: 14px;    height: 35px;}
 #brand-wrapper {  width: 96px;  height: 47px;top: 130px;  left: 11px;}
  #brand-placeholder {  font-size: 14px;}
}