@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body{
    margin: 0;
    padding:0;
    font-family: 'Montserrat';
    font-weight: normal;
    font-style: normal;
    line-height: 1.1 !important;
    font-size: 16px; 
    position: relative;
    min-height: 100vh;
}
a:hover {
  color: #000000;
}
#section-ads {
  padding: 0;
  background: #fff; 
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0%);
}

.nav {
  background-color: #f9f9f9;
  padding: 30px 0;
}

:root{
  --primaryColor: #152539;
  --secondaryColor: #f3d714;
  --terciaryColor: #c77910;
  --bgPosition: 100%;
}
#prelp{
    min-height: 100vh; 
}
.nav .position-absolute img{
  max-width: 150px;
  margin-top: 5px;
  filter: brightness(0) saturate(100%) invert(41%) sepia(73%) saturate(535%) hue-rotate(2deg) brightness(96%) contrast(92%);
}
.nav h5 { 
    color: var(--primaryColor);
    background-image: linear-gradient(to right, var(--secondaryColor) 50%, transparent 50%);
    background-color: #eae9e4;
    background-size: 201% 100%;
    background-position: 100%;
    padding: 15px 20px;
    min-width: 30%;
    font-size: 18px;
    border-radius: 25px;
    margin: 0 15px;
    text-align: center;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
} 
#midInformation, #finalInformation {
  transition: background-position 1s ease;
}
.nav h5:first-child{
  color: #fff;
  background-color: var(--secondaryColor);
}
.nav .col-12 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}  
.nav .col-12::before {
  content: '';
  position: absolute;
  width: 80%;
  top: 50%;
  left: 10%;
  right: 30%;
  height: 3px;
  background-image: linear-gradient(to right, var(--secondaryColor) 50%, transparent 50%);
  background-size: 201% 100%;
  background-position: var(--bgPosition, 100%);
  background-color: #eae9e4;
  /* Line color */
  z-index: 0;
}
#persona{
  width: 100px;
  display: block;
} 
body { 
  background: linear-gradient(180deg, #f3d5144b 0%, #c7781094 100%);
  background-size: cover; 
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  line-height: 1.3;    
}
#contactform{
  display: flex;
  justify-content: center;
}
#contactform h2{
  font-size: 28px;
}
h2 strong{
    color: var(--terciaryColor);
}
#contactform p{
  font-size: 16px;
}
 fieldset{
  display: none;
  max-width: 920px;
  transition: opacity 0.5s ease, transform 0.5s ease;
 }
 fieldset[data-step='1'] .option img{
  max-width: 80px ;
  margin: auto;
 }
 input[type="radio"]{
  display: none;
 }

 fieldset[data-step='1'] .option{
  display: flex;
  width: 150px;
  height: 150px;
  margin: 0 15px 0 0;
  flex-direction: column;
  background: linear-gradient(220deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(243,215,20,1) 50%, rgba(199,121,16,1) 100%);
    background-size: 320%;
    background-position: right;
  border-radius: 10px;
  padding: 15px;
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
 }
 .disclaimer{
  background-color: rgba(255, 255, 255, 0.61);
  padding: 24px 16px;
  border-radius: 15px;
}
.disclaimer h3{
   font-size: 20px;
   margin: 0 0 0 20px; 
 }
 .disclaimer img{
  width: 75px;
 } 

.fade-out-up {
  opacity: 0;
  transform: translateY(-20px);
}

.fade-in-down {
  opacity: 1;
  transform: translateY(0);
}
.option{
  transition: all 0.3s ease; 
  padding: 15px;
  font-size: 20px;
  font-weight: 400;
  display: flex;
  align-items: center;
  border-radius: 15px;
  box-shadow: 3px 10px 15px 1px #00000052;
  background: linear-gradient(220deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(243,215,20,1) 50%, rgba(199,121,16,1) 100%);
  background-size: 320%;
background-position: right;
}
fieldset[data-step='2b'] .option{
  width: 30%;
  gap: 15px;
}
.option img{
  max-width: 45px;
}
 .option:hover { 
   background-position: left !important;
   color: #fff;
 }  
 .option:hover img{
  filter: brightness(0) invert(1);
 }
 .manyOptions{
  row-gap: 15px;
 }
 .manyOptions .option{
  width: 45%;
  gap: 15px;
 }
 .manyOptions .option.imgLabel,fieldset[data-step='3'] .manyOptions .option, fieldset[data-step='4'] .manyOptions .option{
  width: 30%;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
 .textInput input{ 
  font-size: 22px;
  height: 50px;
  border-radius: 15px;
  border: 1px solid #000;
  outline: none;
  padding-left: 15px;  
  margin: 0 5px;
  width: 100%;
 }
  
 fieldset button{
  border-radius: 10px;
  font-size: 22px;
  font-weight: 600;
  padding: 12px;
  border: none;
  margin: auto;
  outline: none;
  color: #fff;
  width: 200px;
  background-color: var(--terciaryColor);
  transition: all 0.3s ease;
 }
 fieldset button:hover{
  background-color: var(--secondaryColor);
  color: #fff;
  scale: 1.1;
 }
 
 .imgLabel img{
  width: 100%;
  max-width: 150px;
 }
 
/*Term animation */
.termContainer {
  width: 100%;
  max-width: 400px;
  font-size: 12px;
  color: #1E1E1E;
  margin: 20px auto 0 auto;
  cursor: pointer;
}
.termContainer a{
  color: #1E1E1E;
}
.termContainer input {
  display: none;
}
.termContainer a:hover {
  color: var(--primaryColor) !important;
}
.termContainer svg {
  overflow: visible;
  max-height: 15px;
  max-width: 15px;
  margin-right: 5px;
  margin-top: 1px;
  vertical-align: baseline;
  translate: 0 2px;
}

.path {
  fill: none;
  stroke: var(--primaryColor);
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease;
  stroke-dasharray: 241 9999999;
  stroke-dashoffset: 0;
}

.termContainer input:checked ~ svg .path {
  stroke-dasharray: 70.5096664428711 9999999;
  stroke-dashoffset: -262.2723388671875;
}
label.error{
  font-size: 14px;
  color: red;
  text-align: center;
  display: block;
  margin: 8px auto 0; 
}
.terms-box label.error{
  width: 100%;
}
@media (max-height: 1000px){
  #section-ads{
    position: relative;
    margin-top: 40px;
    width: 100%;
    padding: 15px 0;
    z-index: -100;
  }
}
@media (max-width: 992px){
  .nav {
      min-height: 80px;
    }
    .nav .position-absolute img {
      display: none;
    }
    .nav .position-absolute {
      left: 50%;
      transform: translate(-50%, 0%);
      width: auto;
    }
  #contactform h2{
    font-size: 22px;
  }
  
    #persona{
      width: 100px;
      margin-top: 25px !important;
    } 
}
@media only screen and (max-width: 992px) {
    .manyOptions .option.imgLabel,
      fieldset[data-step='4'] .manyOptions .option{
        text-align: left;
      }
      .disclaimer{
        margin: 10px 0 0 !important;
      }
}
@media (max-width: 768px){
  fieldset[data-step='1'] .option{
    width: 100%;
    height: auto;
    margin-top: 15px;
    flex-direction: row;
    justify-content: flex-start;
  }
  fieldset[data-step='1'] .option img{
    margin: 0; 
    width: 75px;
    height: 60px;
    object-fit: contain;
  }
  fieldset[data-step='1'] .d-flex.col-12.my-2{
    flex-wrap: wrap;
  }
   fieldset .d-flex.justify-content-around{
      flex-wrap: wrap; 
   }
     fieldset[data-step='2b'] .option{
      width: 100%;
      margin-top: 15px;
     }
  .manyOptions .option{
    width: 100%;
  }
}
@media (max-width: 450px){
  .manyOptions .option.imgLabel,
  fieldset[data-step='3'] .manyOptions .option,
  fieldset[data-step='4'] .manyOptions .option{
    width: 46%;
    height: 75px;
    gap: 0;
    font-size: 17px;
  } 
     fieldset[data-step='7'] .textInput input{
      width: 300px;
     }
  fieldset[data-step='4'] .textInput input{
    width: 100%;
  }
  label.error{
    text-align: center;
  }
  .imgLabel img{
    max-width: 120px;
  }
  .nav .position-absolute img{
    display: none;
  } 
    .nav h5{
      font-size: 14px;
      min-width: 25%;
    }
    fieldset[data-step='1'] .option{
      margin-right: 0;
    }
        .disclaimer{
          display: none;
        }
  .nav{
    min-height: 10vh;
  }
  .nav .position-absolute{ 
    left: 50%;
      transform: translate(-50%, 0%);
      width: auto;
  } 
  #contactform h2{
    font-size: 20px;
  }
  .disclaimer{
    padding: 12px 10px;
    gap: 0 !important;
  }
  .disclaimer h3{
    font-size: 14px;
  }
  #contactform h2,
  .disclaimer h3,
  #contactform p,
  #contactform h3 {
    text-align: center;
  }
    .d-flex.flex-column.flex-wrap.textInput.justify-content-around{
      align-items: center;
    }
  .termContainer{
    text-align: center;
    margin-top: 15px;
  }
}
@media (max-width: 380px){ 
  .manyOptions .option.imgLabel,
  fieldset[data-step='4'] .manyOptions .option{
    font-size: 13px;
  }
    .nav .col-12{
      gap: 0 !important;
    }
    .nav h5{
      min-width: 28%;
    }

            
}