*{
    max-width: 100%;
    outline: none;
    box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 body {
    
      background:white;
      margin: 0;
    }


header{
  display: flex;
 align-items:center;
 padding: 20px 0;
}

.logo{
    text-align: left;
  width:90%;
 
}

.right {
  display:flex;
  align-items:center;
  width: 10%;
}

.logo img{
 width:220px;
   margin-left: 0px;
    text-align: left; 
  padding:18px;

}

.right img{
width:24px;
}

.right a{
  text-decoration:none;
  color:#0076b6;
  margin-left:5px;
}

main{
  text-align: center;
 
}

.progress-container {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 700px;
      margin-top: 40px;
  margin-bottom:40px;
    }

    .progress-line {
      position: absolute;
      top: 20px;
      width: 100%;
      height: 4px;
      background-color: #ddd;
      z-index: 0;
    }

    .progress-step {
      position: relative;
      text-align: center;
      flex: 1;
      z-index: 1;
    }

    .progress-circle {
      width: 20px;
      height: 20px;
      background-color: white;
      border-radius: 50%;
      border: 3px solid #ccc;
      margin: 0 auto;
    }

    .progress-step.active .progress-circle {
      border-color: #0076b6;
      background-color: white;
    }

    .progress-line-filled {
      position: absolute;
      top: 20px;
      left: 0;
      height: 4px;
      background-color: #0076b6;
      z-index: 0;
      width: 33.3%; /* Update this based on progress */
    }

    .step-label {
      margin-top: 10px;
      font-weight: bold;
    }

    .step-status {
      color: #666;
      font-size: 14px;
    }

    .progress-step.active .step-status {
      color: #0076b6;
      font-weight: bold;
    }
    .form-container {
      background-color: #fff;
      width: 700px;
     display: inline-block;
      padding: 35px;
      border-radius: 17px;
      margin-top:10px;
      text-align:left;
      
    }
 
    h2 {
      text-align: center;
      margin-bottom: 30px;
      color: #fff;
      font-size: 22px;
    }
    label {
      display: block;
      margin-top: 15px;
      margin-bottom: 6px;
      font-weight: 400;
      color: #000;
      font-size: 14px;
    }
    input, select, textarea {
      width: 100%;
      padding: 11px;
      border-radius: 6px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      font-size: 15px;
      color: #000;
    }

input:hover{
  border: 1px solid #ccd7de;
      border-color: #ccd7de;
  
  background:#f2fbfe;
    box-shadow: 0 0 0 1px #104e75 inset, 0 0 8px #45657b99;
}
    .name-fields {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }
    .name-fields div {
      flex: 1;
    }

.but{
   text-align:left;
}
   .but button {
      margin-top: 30px;
     
      width: 40%;
      padding: 14px;
      background-color: #0076b6;
      color: white;
      font-size: 16px;
      font-weight: bold;
      border: solid 2px #0076b6;
      border-radius:28px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

footer{
  text-align:center;
  margin-top: 60px;
}

.fot{
  display:inline-block;
  width: 700px;
    text-align:left;
}
   
 .awt{
   display:flex;
   align-items:center;
   margin-top: 20px;
  
 } 

.awt a{
  margin-left:0px ;
  width: 25%;
  text-align: left;
  text-decoration:none;
  color:#0076b6;
}

.as{
  text-align:left;
  margin-top:20px;
}
.as a{
  color:#0076b6; 
}

.span{
  margin-top:20px;
  font-size:0.9em;
  color:#000000c2;
}

.span2{
  margin-top:20px;
    font-size:0.9em;
  color:#000000c2;
}

.span3{
  margin-top:20px;
    font-size:0.9em;
  color:#000000c2;
}

.img{
  margin-top:20px;
}
.img img{
  width:340px;
}

.log{
  display:none;
}

    @media (max-width: 600px) {
      .name-fields {
        flex-direction: column;
      }
    }


    @media screen and (max-width : 740px){

.progress-container {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 700px;
      margin-top: 40px;
  margin-bottom:40px;
    }

    .progress-line {
      position: absolute;
      top: 20px;
      width: 100%;
      height: 4px;
      background-color: #ddd;
      z-index: 0;
    }

    .progress-step {
      position: relative;
      text-align: center;
      flex: 1;
      z-index: 1;
    }

    .progress-circle {
      width: 20px;
      height: 20px;
      background-color: white;
      border-radius: 50%;
      border: 3px solid #ccc;
      margin: 0 auto;
    }

    .progress-step.active .progress-circle {
      border-color: #0076b6;
      background-color: white;
    }

    .progress-line-filled {
      position: absolute;
      top: 20px;
      left: 0;
      height: 4px;
      background-color: #0076b6;
      z-index: 0;
      width: 33.3%; /* Update this based on progress */
    }

    .step-label {
      margin-top: 10px;
      font-weight: bold;
    }

    .step-status {
      color: #666;
      font-size: 14px;
    }

    .progress-step.active .step-status {
      color: #0076b6;
      font-weight: bold;
    }
      
    .form-container {
      background-color: #fff;
      width: 700px;
     display: inline-block;
      padding: 10px;
      border-radius: 17px;
      margin-top:10px;
      text-align:left;
      
    }
 
     
    header{
  display: flex;
 align-items:center;
 padding: 20px 0;
}

      .logo{
        display:none;
      }

.log{
  display:block;
    text-align: left;
  width:74%;
 
}

.right {
  display:flex;
  align-items:center;
  width: 26%;
}

.logo img{
 width:220px;
   margin-left: 0px;
    text-align: left; 
  padding:18px;

}

.right img{
width:24px;
}

.right a{
  text-decoration:none;
  color:#0076b6;
  margin-left:5px;
}

    
      

.logo label{
  display:none;
}

.logo img{
 width:110px;
   margin-left: 0px;
    text-align: center; 
  padding:18px;

}


 
   






    .but button{
      width: 100%;
    }

      footer{
  text-align:center;
  margin-top: 60px;
        padding:20px;
}

.fot{
  display:inline-block;
  width: 700px;
    text-align:left;
}
   
 .awt{
   display:flex;
   align-items:center;
   margin-top: 20px;
  
 } 

.awt a{
  margin-left:0px ;
  width: 25%;
  text-align: left;
  text-decoration:none;
  color:#0076b6;
  font-size:0.7em;
}

.as{
  text-align:left;
  margin-top:20px;
}
.as a{
  color:#0076b6; 
  
}

.span{
  margin-top:20px;
  font-size:0.9em;
  color:#000000c2;
  
}

.span2{
  margin-top:20px;
    font-size:0.9em;
  color:#000000c2;
}

.span3{
  margin-top:20px;
    font-size:0.9em;
  color:#000000c2;
}

.img{
  margin-top:20px;
}
.img img{
  width:340px;
}

}