*{
    padding:0 ;
    margin: 0;
}
.main{
    background-image: url(image/image1.jpg);
    background-position: center center;
    height: 115vh;
    position: relative;
    background-repeat: no-repeat;
}
.main .box{
    height: 152vh;
    width: 100%;
    opacity: 0.6;
    background-color: rgb(0, 0, 0);
    position: absolute;
    top: 0;
}
nav{
    max-width: 76.5vw;
    justify-content:space-between;
    margin: auto;
    display: flex;
    align-items: center;
    height: 92px;
}
nav{
    color: red;
    position: relative;
    z-index: 10;
}
.hero{
    height: 75%;
    display: flex;
    flex-direction: column;
    color: rgb(255, 255, 255);
    position: relative;
    gap: 15px;
    margin:0 35% 0 35%;
    text-align: center;
    background-color:rgba(0,0,0,0.62);
    padding:0 60px;
    
}
.hero-buttons{
    display: flex;
    align-items: center;
    border-radius: 2mm;
}
.main input{
    padding: 18px 150px 23px 14px;
    font-weight: 700;
    font-size: 14px;
    border-radius: 1mm;
    border-width: 0.2mm;
    background-color: rgba(67, 67, 99, 0.5);
    margin-right: 10px;
    border-style:double;
}

.checkbox-container {
  display: flex;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  padding-left: 30px;
  color: white;
  user-select: none;
  font-family: 'poppins',sans-serif
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  left: 0;
  top: 0;
  height: 15px;
  width: 8px;
  background-color: transparent;
  border: 2px solid white;
  border-radius: 3px;
}

.checkbox-container input:checked ~ .checkmark::after {
  content: "✓";
  position: absolute;
  left: -1px;
  top: -1px;
  font-size: 12px;
  color: rgb(0, 0, 0);
  background-color: white;
}
.term {
    width: 25%;
    padding: 20px;
    padding-bottom: 1px;
    padding-top: 15px;
    justify-content: left;
    color: rgb(201, 201, 201);
    text-decoration: underline;
    font-family: 'poppins',sans-serif;
    font-size: 90%;
}