* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: Arial, sans-serif;

}

body {

  background: #f5f5f5;

}
.logo{
  position: relative;
  left: 10%;
}

.container {

  max-width: 1100px;

  margin: auto;

  padding: 20px;
  margin-top:5%;

}

/* CARD */
.card{
  display: flex;
  flex-direction: column;
}

.mainCard {

  display: flex;
  flex-direction: row;

  background: #FCFCF6;

  border-radius: 0 0 16px 16px;
height:450px;
  /*overflow: hidden;*/

  border: 1px solid #ddd;

}

/* LEFT */

.left {

  flex: 1;




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

.header1 {

  background: #f26522;

  color: #fff;

  padding: 15px;

  border-radius: 16px 16px 0 0;

}

.header1 h2 {

  color: #FFF;
  font-family: Mulish;
  font-size: 24px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;

}
.header1 p {
  color: #FFF;
  font-family: Mulish;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;

}

.badges {

  margin-top: 10px;

}

.badges span {

  background: #fff;

  color: #f26522;

  padding: 6px 10px;

  margin-right: 8px;

  border-radius: 6px;

  font-size: 12px;

}

.image {

  margin-top: 15px;
  width: 560px;

}

.image img {

  width: 100%;

  border-radius: 8px;

}

/* RIGHT */

.right {

  flex: 1;
  padding: 20px 20px 20px 0;

}

.right h3 {

  margin-bottom: 15px;
  color: var(--Greys-Grey-300, #444);
font-family: Mulish;
font-size: 20px;
font-style: normal;
font-weight: 900;
line-height: normal;

}
.right p {
  color: var(--Greys-Grey-300, #444);
  font-family: Mulish;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom:3%;

}

form {

  display: flex;

  flex-direction: column;
  border-radius: 20px;
border: 1px solid var(--Brand-Orange, #F58220);
background: #FFF;
backdrop-filter: blur(35px);
position: relative;
top: -30%;
right: 2%;;
z-index: 99;
padding:5%;



}



form input,

form select {

 

  padding: 10px;

  border-radius: 8px;
border: 1px solid var(--Pastels-High-Tangerine-HP, #FBCDBD);
background: #FFF;

}
.returnButton {

  border-radius: 27px;
  border: 1px solid var(--Border-Border-Primary, #F5F5F5);

  background: var(--Brand-Tangerine, #F15A22);

  padding: 12px;

  border-radius: 25px;
  color: #FFF;
  text-align: center;
  
  /* H4 CTA/title */
  font-family: Mulish;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;

}

button {

  border-radius: 27px;
  border: 1px solid var(--Border-Border-Primary, #F5F5F5);

  background: var(--Brand-Tangerine, #F15A22);

  padding: 12px;

  border-radius: 25px;
  color: #FFF;
  text-align: center;
  
  /* H4 CTA/title */
  font-family: Mulish;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;

}
/* Chrome, Safari, Edge */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}

button.disabled {

  background-color: #ccc;

  cursor: not-allowed;

}

.row {

  display: flex;

  gap: 12px;

}

.errorClass {

  flex: 1;

  position: relative;

}

.errorClass input {

  width: 100%;

  padding: 10px;

}

/* Error should NOT affect layout */

.error {

  position: absolute;

  left: 10px;

  top: 100%;

  font-size: 9px;

  color: red;

  margin-top: 4px;

}
.personalDetails{
  margin-bottom:4%;
}
 

.personalDetails,.userType, .disclosure{
  display: flex;
  justify-content: space-between;
  align-items: center;
 
}
.disclosure{margin-top:3%;}
.checkText{
  color: var(--Color-Greys-Grey-300, #444);
font-feature-settings: 'liga' off, 'clig' off;
font-family: Mulish;
font-size: 9px !important;
font-style: normal;
font-weight: 400;
line-height: 14px; /* 155.556% */
letter-spacing: 0.25px;
margin-left:1%;
}
.userType{
  width: 111%;
  background: var(--Pastels-Low-Pink-LP, #F9EEEE);

  padding: 3% 6%;
  position: relative;
  right: 23.5px;
}
.userType h2{
  color: var(--Greys-Grey-300, #444);
font-family: Mulish;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;

}
/* CONTACT BAR */

.contact-bar {
  margin-top: 10px;
background: #fff;
overflow: hidden;
  border-radius: 16px;
  border: 1px solid #EEE;
  background: var(--Pastels-Low-Ivory-LP, #FAFAFA);
  padding: 1% 3% 3%;
  position: relative;
  top: -35px;
  width: 95%;
  margin: 0 auto;
  z-index: 999;

}
.contact-bar p{
  color: var(--Greys-Grey-300, #444);
font-family: Mulish;
font-size: 24px;
font-style: normal;
font-weight: 900;
line-height: normal;
margin-bottom:1%;
}
.contact-bar1{
  display: flex;

}

.contact-bar1 div {
  flex: 1;
 padding: 12px;
text-align: center;
display:flex;

padding:1%;
  border-radius: 12px;
background: var(--Pastels-High-Orange-HP, #FCD9BC);border-right: 1px solid #eee;

}
.icon{
  background:var(--Pastels-Low-Pista-3-LP, #FCFCF6);;
  border-radius: 50%;
  height:36px;
  width:36px;
  padding: 2px;
  margin-right: 3%;

}
.contactDetails h3{
  color: var(--Greys-Grey-300, #444);
font-family: Mulish;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.contact-bar div:last-child {

  border-right: none;
 /* gap:15px;*/

}
.input{
  font-size: 14px;
  font-weight: 500;
 /* padding:2%;*/
  width:100%;
 /* margin-bottom: 3%;*/
  margin-left: 1%;
  border: 1px solid #FBCDBD;
  border-radius: 8px;

}
.gstClaim{
 
  padding: 3%;
  display: flex;
  justify-content: space-between;
  margin-top: 2%;
  width: 95%;

}
.gstClaim h4{
margin:0;
padding:0;
color: var(--Brand-Tangerine, #F15A22);
font-family: Mulish;
font-size: 24px;
font-style: normal;
font-weight: 900;
line-height: normal;
}
.gstClaim p{
  color: var(--Greys-Grey-300, #444);
  font-family: Mulish;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin:0;
}
.gstbox, .claimBox{
  border-radius: 12px;
border: 1px solid #F15A22;
background: #FFF;
padding:2%;
}
input::placeholder {
  color: var(--Greys-Grey-300, #444);
font-family: Mulish;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
select{
  border-radius: 8px;
  border: 1px solid var(--Pastels-High-Tangerine-HP, #FBCDBD);
  background: #FFF;
  padding:2%;
  color: var(--Greys-Grey-300, #444);
font-family: Mulish;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
width: 80%;
overflow:hidden; 
white-space:nowrap; 
text-overflow: ellipsis;
align-content: center;
}
input[type="checkbox"] {
  accent-color: #F15A22;
}

/* The Modal (background) */
#myModal {
display: none; 
position: fixed; 
z-index: 9999; 
left: 0;
top: 0;
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: rgb(0,0,0); 
background-color: rgba(0,0,0,0.4); 
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 25%; 
border-radius:16px;
text-align: center;
}

/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.returnButton
{
/* transform: translateX(20%);*/
font-family: mulish;
font-weight: 700;;
font-size:16px;
line-height:100%;
letter-spacing:0%;
color: #FFFFFF;
}
.modal-content a{
text-align: center;
margin: 0 auto;
}
.errorClass{
display: block;
width: 80%;
height: 100%;

}
input:focus{
outline: none;
}
.modal-content h4{
  margin-bottom:3%;
  font-weight: 900;;
  font-size:16px;
  line-height:100%;
  letter-spacing:0%;
  color: #393939;
  font-family: mulish;
  
}
.modal-content p{
  margin-bottom:3%;
  font-weight: 500;;
  font-size:14px;
  line-height:100%;
  letter-spacing:0%;
  color:#444444;
  font-family: mulish;
  
}
/*form Validation */

 input.error-border, select.error-border {
  border: 1px solid red;
 }
 .extra{
  margin-top:5px;
 }

/* 📱 MOBILE */

@media (max-width: 768px) {

  .modal-content {
    background-color: #fefefe;
    margin: auto auto;
    padding: 20px;
    border: 1px solid #888;
    width: 85%;
    border-radius: 16px;
    text-align: center;
    /* display: flex; */
    justify-content: center;
    /* align-items: center; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.personalDetails{
  margin-top:2%;
}

  .mainCard {

    flex-direction: column;
    height: 750px;

  }
  form{
      position: relative;
      top: -80px;
  left: 0%;
  border: none;
  border-radius: 0;
  background: #FCFCF6;
  
  backdrop-filter: none;
  }
  .card{
      border: 0.8px solid #F58220;
      border-radius: 16px;;
  }

  .left {

    padding: 15px;

  }

  .right {

    padding: 15px;

  }

  .contact-bar {

    flex-direction: column;

  }

  .contact-bar div {

    border-right: none;

    border-bottom: 1px solid #eee;

  }

  .contact-bar div:last-child {

    border-bottom: none;

  }
  .image {
margin-top:0;
    
      width: 100%;
    
    }
    button{    margin-top: 6%;}
    .contact-bar1 {
      display: flex;
      flex-direction: column;
    
  }
  .contactDetails h3{
      font-size:14px;
      
  }
  .contact-bar1 div {
      align-items: center;
  }
  .contact-bar p {
      font-size: 16px;
      margin-bottom: 4%;
  }
  .contact-bar{
      top: 20px;
      width: 100%;
  }
  .header1 h2 {
display: none;
  }
  .header1 p{
      font-size: 16px;
      font-style: normal;
      font-weight: 900;
      line-height: normal; 
      width: 60%;
  }
  .gstClaim h4{
      font-size: 16px;
font-style: normal;
font-weight: 900;
line-height: normal;
  }
  .gstClaim p{
      font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
  }
  .right h3{
      font-size: 18px;
font-style: normal;
font-weight: 900;
line-height: normal;
  }
  .right p{
      font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal
  }
  input::placeholder{
      font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
  }
  .userType{display: block;
      width: 109%;
      right: 16px;}
      .userType h2{
          margin-bottom: 3%;
  font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: norma
      }
  select{width:100%;}
  .checkText {
      font-size: 8px !important;
font-style: normal;
font-weight: 400;
  }
  .logo{left:0%;}
  .container {
      margin-top: 15%;
  }

}