* {
   margin: 0%;
   padding: 0%;
   box-sizing: border-box;
}

.container {
   width: 100%;
   min-height: 100vh;
   
   background-size: cover;
   position: relative;
   opacity: 0.8;
}

/* .background {
   width: 100%;
   height: 100vh;
} */

.background img {
   width: 100%;
   height: 100vh;
   position: absolute;
   z-index: -9999;
   opacity: 0.8;
}

.reg1 {
   width: 100%;
   height: 100vh;
   padding-top: 15px;
}

.reg2 {
   margin-left: 18%;
   margin-top: 0%;
   font-size: x-large;
   font-weight: bolder;
   padding: 9px;
   color: white;
   
}

.border {
   width: 40%;
   border: 2px solid white;
   /* margin-left: 30%; */
   height: 95vh;
   padding-left: 0%;
   margin-left: 29%;
   border-radius: 2rem 2rem;
   background-color: rgba(0, 0, 0, 10);
   box-shadow: 6px 7px 2px 2px rgba(219, 16, 16, 0.7);
}

.inbox {
   margin-left: 14%;
   gap: 10px;
   color: white;
   font-weight: bolder;
  

}

.inbox input {
   padding: 9px 9px;
   border-radius: 0.5rem;
   margin-top: 4px;
   outline: none;
   border-color: #CD113B;

}

.inbox1 {
   display: flex;
   flex-wrap: wrap;
   margin-left: 14%;
   gap: 5px;
   outline: none;
   color: white;
   margin-top: 2%;
   font-weight: bolder;
}

.inbox1 input {
   padding: 9px 9px;
   border-radius: 0.5rem;
   outline: none;
   border-color: #CD113B;
}

.gender {
   display: flex;
   margin-left: 14%;
   gap: 10px;
   font-size: larger;
   color:white;
   outline: none;
   font-weight: bolder;
}

.inbox2 {
   margin-left: 14%;
   gap: 11px;
   justify-content: space-around;
   margin-top: 2%;
   color:white;
   font-weight: bolder;
   
}

.inbox2 input {
   padding: 9px 9px;
   border-radius: 0.5rem;
   margin-top: 4px;
   border-color: #CD113B;
   
   outline: none;
}

.inbox3 {
   margin-left: 14%;
   color: white;
   font-weight: bolder;
  
}

.fee {
   margin-left: 14%;
   padding-bottom: 10px;
   
}

.inbox2 .in1 {
   width: 88%;
   outline: none;

}

.ind {
   width: 43%;
   padding: 9px 10px;
   margin-top: 4px;
   border-radius: 0.5rem;
   outline: none;
   border-color: #CD113B;
}
 /* .inbox2 section .ind option {
   background-color: red;
} */

.ind :hover{
   background-color: #FF616D;
}


.inbox3 input {
   padding: 9px 9px;
   
   border-color: #CD113B;
   border-radius: 0.5rem;
   /* margin-top: 4px; */
   outline: none;
}

.sub {
   margin-left: 45%;
   width: 40%;
   outline: none;


}

.sub a {
   /* width: 400%; */
   padding: 9px 9px;
   cursor: pointer;
   text-decoration: none;
   border-radius: 0.5rem;
   color: black;
   background-color: #FF616D;

}

.sub :hover {
   background-color: #7A86B6;
   font-size: 18px;
}

/* ________________________________________- */
@media screen and (max-width: 1020px) {
   
   .background img {
      width: 100%;
      height: 110vh;
      position: absolute;
      z-index: -9999;
      opacity: 0.8;
   }   .border {
      width: 53%;
      border: 2px solid black;
      margin-left: 20%;
      height: 103vh;
      padding-left: 0%;
      margin-left: 29%;
      border-radius: 2rem 2rem;
      background-color: rgba(0, 0, 0, 0.3);
      box-shadow: 6px 7px 2px 2px rgba(219, 16, 16, 0.3);
   }

   .gender {
      display: flex;
      margin-left: 14%;
      gap: 10px;
      font-size: larger;
      color: white;
      font-weight: bolder;
   }

}

@media screen and (max-width: 900px) {
   .background img {
      width: 100%;
      height: 110vh;
      position: absolute;
      z-index: -9999;
      opacity: 0.8;
   }
   .border {
      width: 58%;
      border: 2px solid black;
      margin-left: 20%;
      height: 105vh;
      padding-left: 0%;
      margin-left: 22%;
      border-radius: 2rem 2rem;
      background-color: rgba(0, 0, 0, 0.3);
      box-shadow: 6px 7px 2px 2px rgba(219, 16, 16, 0.3);
   }

   .gender {
      display: flex;
      margin-left: 14%;
      gap: 10px;
      font-size: larger;
      color: white;
      font-weight: bolder;
   }
}

@media screen and (max-width: 800px) {
   .background img {
      width: 100%;
      height: 140vh;
      position: absolute;
      z-index: -9999;
      opacity: 0.8;
   }
   .border {
      width: 58%;
      border: 2px solid black;
      margin-left: 20%;
      height: 135vh;
      padding-left: 0%;
      margin-left: 22%;
      border-radius: 2rem 2rem;
      background-color: rgba(0, 0, 0, 0.3);
      box-shadow: 6px 7px 2px 2px rgba(219, 16, 16, 0.3);
   }

   .gender {
      display: flex;
      margin-left: 14%;
      gap: 3px;
      font-size: larger;
      color: white;
      font-weight: bolder;
   }

}
@media screen and (max-width: 750px) {
   .background img {
      width: 100%;
      height: 110vh;
      position: absolute;
      z-index: -9999;
      opacity: 0.8;
   }
}
@media screen and (max-width: 750px) {
   .border {
      width: 68%;
      border: 2px solid black;
      margin-left: 20%;
      height: 105vh;
      padding-left: 0%;
      margin-left: 20%;
      border-radius: 2rem 2rem;
      background-color: rgba(0, 0, 0, 0.3);
      box-shadow: 6px 7px 2px 2px rgba(219, 16, 16, 0.3);
   }

   .gender {
      display: flex;
      margin-left: 14%;
      gap: 3px;
      font-size: larger;
      color: white;
      font-weight: bolder;
   }
}

@media screen and (max-width: 700px) {
   .border {
      width: 75%;
      border: 2px solid black;
      margin-left: 20%;
      height: 107vh;
      padding-left: 0%;
      margin-left: 12%;
      border-radius: 2rem 2rem;
      background-color: rgba(0, 0, 0, 0.3);
      box-shadow: 6px 7px 2px 2px rgba(219, 16, 16, 0.3);
   }

   .gender {
      display: flex;
      margin-left: 14%;
      gap: 3px;
      font-size: larger;
      color: white;
      font-weight: bolder;
   }

}

@media screen and (max-width: 650px) {
   .border {
      width: 76%;
      border: 2px solid black;
      margin-left: 20%;
      height: 107vh;
      padding-left: 0%;
      margin-left: 10%;
      border-radius: 2rem 2rem;
      background-color: rgba(0, 0, 0, 0.3);
      box-shadow: 6px 7px 2px 2px rgba(219, 16, 16, 0.3);
   }

   .gender {
      display: flex;
      margin-left: 14%;
      gap: 10px;
      font-size: larger;
      color: white;
      font-weight: bolder;
   }
}

@media screen and (max-width: 600px) {
   .border {
      width: 83%;
      border: 2px solid black;
      margin-left: 20%;
      height: 107vh;
      padding-left: 0%;
      margin-left: 8%;
      border-radius: 2rem 2rem;
      background-color: rgba(0, 0, 0, 0.3);
      box-shadow: 6px 7px 2px 2px rgba(219, 16, 16, 0.3);
   }

   .gender {
      display: flex;
      margin-left: 14%;
      gap: 10px;
      font-size: larger;
      color: white;
      font-weight: bolder;
   }
}

@media screen and (max-width: 550px) {
   .background img {
      width: 100%;
      height: 140vh;
      position: absolute;
      z-index: -9999;
      opacity: 0.8;
   }
   .border {
      width: 88%;
      border: 2px solid black;
      margin-left: 20%;
      height: 135vh;
      padding-left: 0%;
      margin-left: 5%;
      border-radius: 2rem 2rem;
      background-color: rgba(0, 0, 0, 0.3);
      box-shadow: 6px 7px 2px 2px rgba(219, 16, 16, 0.3);
   }

   .gender {
      display: flex;
      margin-left: 14%;
      gap: 3px;
      font-size: larger;
      color: white;
      font-weight: bolder;
   }
}

@media screen and (max-width: 500px) {
   .background img {
      width: 100%;
      height: 140vh;
      position: absolute;
      z-index: -9999;
      opacity: 0.8;
   }
   .border {
      width: 92%;
      border: 2px solid black;
      margin-left: 20%;
      height: 137vh;
      padding-left: 0%;
      margin-left: 3%;
      border-radius: 2rem 2rem;
      background-color: rgba(0, 0, 0, 0.3);
      box-shadow: 6px 7px 2px 2px rgba(219, 16, 16, 0.3);
   }

   .gender {
      display: flex;
      margin-left: 14%;
      gap: 3px;
      font-size: larger;
      color: white;
      font-weight: bolder;
   }
}

@media screen and (max-width: 450px) {
   .background img {
      width: 103%;
      height: 158vh;
      position: absolute;
      z-index: -9999;
      opacity: 0.8;
   }
   .inbox {
      margin-left: 14%;
      gap: 10px;
      color: white;
      font-weight: bolder;
      margin-top: 5%;
     
   
   }
   .inbox input {
      padding: 9px 9px;
      border-radius: 0.5rem;
      margin-top: 12px;
      outline: none;
      border-color: #CD113B;
   
   }
   .inbox1 {
      display: flex;
      flex-wrap: wrap;
      margin-left: 14%;
      margin-top: 5%;
      gap: 5px;
      outline: none;
      color: white;
      font-weight: bolder;
   }
   .inbox2 input {
      padding: 9px 9px;
      border-radius: 0.5rem;
      margin-top: 12px;
      border-color: #CD113B;
      
      outline: none;
   }
   .inbox3 input {
      padding: 9px 9px;
      
      border-color: #CD113B;
      border-radius: 0.5rem;
      margin-top: 12px;
      outline: none;
   }
  
   .border {
      width: 92%;
      border: 2px solid black;
      margin-left: 20%;
      height: 164vh;
      padding-left: 0%;
      margin-left: 1%;
      border-radius: 2rem 2rem;
      background-color: rgba(0, 0, 0, 0.3);
      box-shadow: 6px 7px 2px 2px rgba(219, 16, 16, 0.3);
   }

   .gender {
      display: flex;
      margin-left: 14%;
      gap: 1px;
      font-size: larger;
      color: white;
      font-weight: bolder;
   }

   .reg2 {
      margin-left: 8%;
      margin-top: 0%;
      font-size: x-large;
      font-weight: bolder;
      padding: 9px;
      color: white;
   }
}

@media screen and (max-width: 400px) {
   .background img {
      width: 103%;
      height: 168vh;
      position: absolute;
      z-index: -9999;
      opacity: 0.8;
   }
   .border {
      width: 100%;
      border: 2px solid black;
      margin-left: 20%;
      height: 164vh;
      padding-left: 0%;
      margin-left: 3%;
      border-radius: 2rem 2rem;
      background-color: rgba(0, 0, 0, 0.3);
      box-shadow: 6px 7px 2px 2px rgba(219, 16, 16, 0.3);
   }

   .gender {
      display: flex;
      flex-wrap: wrap;
      margin-left: 14%;
      gap: 1px;
      font-size: larger;
      color: white;
      font-weight: bolder;
   }

   .reg2 {
      margin-left: 4%;
      margin-top: 0%;
      font-size: x-large;
      font-weight: bolder;
      padding: 9px;
      color: white;
   }
}

@media screen and (max-width: 350px) {
   .background img {
      width: 108%;
      height: 176vh;
      position: absolute;
      z-index: -9999;
      opacity: 0.8;
   }
   .border {
      width: 105%;
      border: 2px solid black;
      margin-left: 20%;
      height: 172vh;
      padding-left: 0%;
      margin-left: 3%;
      border-radius: 2rem 2rem;
      background-color: rgba(0, 0, 0, 0.3);
      box-shadow: 6px 7px 2px 2px rgba(219, 16, 16, 0.3);
   }

   .gender {
      display: flex;
      flex-wrap: wrap;
      margin-left: 14%;
      gap: 0px;
      font-size: larger;
      color: white;
      font-weight: bolder;
   }

   .reg2 {
      margin-left: 4%;
      margin-top: 0%;
      font-size: x-large;
      font-weight: bolder;
      padding: 9px;
      color: white;
   }


}

@media screen and (max-width: 300px) {
   .border {
      width: 92%;
      border: 2px solid black;
      margin-left: 20%;
      height: 147vh;
      padding-left: 0%;
      margin-left: 3%;
      border-radius: 2rem 2rem;
      background-color: rgba(0, 0, 0, 0.3);
      box-shadow: 6px 7px 2px 2px rgba(219, 16, 16, 0.3);
   }

   .gender {
      display: flex;
      flex-wrap: wrap;
      margin-left: 14%;
      gap: 0px;
      font-size: larger;
      color: white;
      font-weight: bolder;
   }
}