/*Base styles (extra small devices - mobile)*/

@media screen and (max-width: 576px) {
    html {
      font-size: 16px;
    }
  
    .government {
      display: block;
       width: 50%; 
       height : 150px;
       text-align: center;
    }
    
    body{
      margin: 0;
      padding: 0;
      background-color: whitesmoke;
      font-family:'Roboto', sans-serif;
      font-weight: 100;
      font-size: 10px;
      color: #444444;
      
    } 
    #passport-form {
      margin-top: 5px;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: 'inter', sans-serif;
      font-weight: 600;
      color: #222;
    }
    
    h1 {font-size: 2.5rem;}
    h2 {font-size: 2rem;}
    h3 {font-size: 1.75rem;}
    h4 {font-size: 1.5rem;}
    h5 {font-size: 1.25rem;}
    h6 {font-size: 1rem;}
    
    #navbar{
      padding: 8px;
      margin: 0;
    }
    
    #banner{
      height: 100px; 
      width: 100%;
      object-fit: cover;
      }
    
      h1{
        text-align: center; 
        margin: 12px 0;
       }
    
       #about{
        display: flex;
        
        flex-direction: column;
        margin: 0 auto;
        padding: 10px;
        
      }
    
      #description{
       font-size: 1.25rem;
      }
    
      #team {
        
        display: block;
      
      }
    
      #team-image{
        height: 250px;
        width: 100%;
        object-fit: cover;
        margin-top: 24px;
      }
  
      #application{
        
        margin: 0 auto;
        padding: 0 8px;
      }
      #application-form input, section, textarea{
        padding: 4px;
        font-size: 1.25rem;
        margin-top: 4px;
        border-radius: 5px;
        border:1px solid cadetblue ;
      }
      #application-form label{
        font-weight: 200;
      
      }
      #application-form div{
        margin: 16px;
      }
      .form-group textarea{
        width: 80%;
        font-family: 'Roboto', sans-serif ;
      
      }
      
      .form-group input[type="checkbox"] {
        width: 24px;
        height: 24px;
      }
      .form-group input[type="submit"]{
        margin-top: 8px;
        background-color: lightblue;
        text-align: center;
        color: black;
        font-weight: 500;
        padding: 8px;
        cursor: pointer;
      } 
  
      .job-title {
        font-weight: 500;
        text-transform: uppercase;
        text-decoration: underline;
  }
  
  #footer-links{
    list-style-type: none;
    
   
    
  }
  #footer-links li {
    display: inline;
    margin: 8 16px;
    text-align: center;
    text-decoration: none;
  }
  .copyright{
    color: grey;
    text-align: center;
  }
  
  #footer{
    background-color: lightgrey;
    padding: 8px;
    margin-top: 32px;
    text-align: center;
    display: block;
  }
  #name {
    margin-top: 4px;
    
  }
  
  #logo{
    height: 50px;
    margin-top: 4px;
  text-align: center;
  }
  
  #footer-links li {
    display: block;
    
   
    text-decoration: none;
  }
  }
  
  
  
  /*small devices (tablets) */
  @media screen  and (max-width: 768px) {
    html {
      font-size: 16px;
    }
    .job-title {
      font-weight: 500;
      text-transform: uppercase;
      text-decoration: underline;
    }
    #banner{
  height: 120px;
  width: 100%;
    }
  
    .government {
      display: flex;
       width: 33%; 
       height : 250px;
       text-align: center;
    }
    h1 {
      margin: 16px 0;
    }
  
    body{
      margin: 10px;
      padding: 10px;
      background-color: whitesmoke;
      font-family:'Roboto', sans-serif;
      font-weight: 500;
      font-size: 16px;
      color: #444444;
      display: block;
      
    } 
  
    #about{
      
      flex-direction: row;
      justify-content: center;
      
      
    }
    #team-image{
      height: 180px;
      width: 50%;
      object-fit: cover;
      margin-top: 24px;
     
    }
  
    #application{
      max-width: 800px;
      margin: 0 auto;
      padding: 0 8px;
    }
    #application-form input, section, textarea{
      padding: 4px;
      font-size: 16px;
      margin-top: 14px;
      border-radius: 5px;
      border:1px solid cadetblue ;
    }
    #application-form label{
      font-weight: 200;
    
    }
    #application-form div{
      margin: 16px 16px;
    }
    .form-group textarea{
      width: 80%;
      font-family: 'Roboto', sans-serif ;
    
    }
    
    .form-group input[type="checkbox"] {
      width: 24px;
      height: 24px;
    }
    .form-group input[type="submit"]{
      margin-top: 8px;
      background-color:lightblue;
      text-align: center;
      color: black;
      font-weight: 500;
      padding: 4px;
      cursor: pointer;
    } 
  
    #footer-links{
      list-style-type: none;
      
     
      
    }
    #footer-links li {
      display: inline;
      margin: 8 16px;
      text-align: center;
      text-decoration: none;
      
    }
    .copyright{
      color: grey;
      text-align: center;
    }
  
    #footer{
      background-color: lightgrey;
      padding: 8px;
      margin-top: 32px;
      text-align: center;
    }
    #name {
      margin-top: 4px;
      
    }
  
    #logo{
      height: 50px;
      margin-top: 4px;
     text-align: center; 
    }
  
    #team {
      width: 100%;
      display: flex;
    }
  }
  
  
  
  
  /*Medium device (laptops)*/
  @media  screen and (max-width: 992px) {
   #banner {
      height: 1500px;
      width: 100%; 
    }
  
    .government {
      display: flex;
       width: 33%; 
       height : 250px;
       text-align: center;
    }
  
    .job-title {
      font-weight: 500;
      text-transform: uppercase;
      text-decoration: underline;
    }
  
    .job-detail-salary {
      color: green;
    }
  
    h1 {
      margin: 20px 32px;
      text-align: center;
    }
    #about{
      margin-left: 32px;
      flex-direction: row;
    
    
      
    }
  
    #description {
      width: 100%;
      padding-right: 0;
    }
  
    #team-image{
      height: 200px;
      border-radius: 10px;
      width: 50%;
      
      margin-top: 24px;
     
    }
  
    #team {
      width: 100%;
      display: flex;
    }
  
    body{
      margin: 0;
      padding: 0;
      background-color: whitesmoke;
      font-family:'Roboto', sans-serif;
      font-weight: 100;
      font-size: 16px;
      color: #444444;
      
      
    
    } 
  
    #jobs-list {
      text-align: center;
    }
  
    #application{
    max-width: fit-content;
      margin: 0 auto;
      padding: 0 8px;
      
    }
    #application-form input, section, textarea{
      padding: 4px;
      font-size: 1.25rem;
      margin-top: 14px;
      border-radius: 5px;
      border:1px solid cadetblue ;
    }
    #application-form label{
      font-weight: 200;
    
    }
    #application-form div{
      margin: 16px;
    }
    .form-group textarea{  
    
      width: 80%;
      font-family: 'Roboto', sans-serif ;
    
    }
    
    .form-group input[type="checkbox"] {
      width: 24px;
      height: 24px;
    }
    .form-group input [type="submit"] {
      background-color: lightskyblue;
      margin-top: 8px;
      text-align: center;
      color: black;
      font-weight: 500;
      padding: 8px;
      cursor: pointer;
      margin-top:8px ;
      
      
    } 
  
    #footer-links{
      list-style-type: none;
      
     
      
    }
    #footer-links li {
      display: inline;
      margin: 8 16px;
      text-align: center;
      text-decoration: none;
    }
    .copyright{
      color: grey;
      text-align: center;
    }
  
    #footer{
      background-color: lightgrey;
      padding: 8px;
      margin-top: 32px;
      text-align: center;
    }
    #name {
      margin-top: 4px;
  
  
    }
  
    #logo{
      height: 50px;
      margin-top: 4px;
   text-align: center;
    }
  }
  
  /*Large devices (desktops)*/
  @media screen and (max-width: 1200px) {
    #banner {
      height: 150px; 
      width: 100%;
    }
  
    .government {
      display: flex;
       width: 33%; 
       height : 250px;
       text-align: center;
    }
  
    .job-title {
      font-weight: 500;
      text-transform: uppercase;
      text-decoration: underline;
    }
  
    .job-detail-salary {
      color: green;
    }
  
    h1 {
      margin: 20px 32px;
      text-align: center;
    }
    #about{
      margin-left: 32px;
      flex-direction: row;
    
    
      
    }
  
    #description {
      width: 100%;
      padding-right: 0;
    }
  
    #team-image{
      height: 200px;
      border-radius: 10px;
      width: 50%;
      
      margin-top: 24px;
     
    }
  
    #team {
      width: 100%;
      display: flex;
    }
  
    body{
      margin: 0;
      padding: 0;
      background-color: whitesmoke;
      font-family:'Roboto', sans-serif;
      font-weight: 100;
      font-size: 16px;
      color: #444444;
      
      
    
    } 
  
    #jobs-list {
      text-align: center;
    }
  
    #application{
    max-width: fit-content;
      margin: 0 auto;
      padding: 0 8px;
      
    }
    #application-form input, section, textarea{
      padding: 4px;
      font-size: 1.25rem;
      margin-top: 14px;
      border-radius: 5px;
      border:1px solid cadetblue ;
    }
    #application-form label{
      font-weight: 200;
    
    }
    #application-form div{
      margin: 16px;
    }
    .form-group textarea{
      width: 80%;
      font-family: 'Roboto', sans-serif ;
    
    }
    
    .form-group input[type="checkbox"] {
      width: 24px;
      height: 24px;
    }
    .form-group input [type="submit"] {
      margin-top: 8px;
      background-color: #222;
      text-align: center;
      color: azure;
      font-weight: 600;
      padding: 8px;
      cursor: pointer;
      
    } 
  
    #footer-links{
      list-style-type: none;
      
     
      
    }
    #footer-links li {
      display: inline;
      margin: 8 16px;
      text-align: center;
      text-decoration: none;
    }
    .copyright{
      color: grey;
      text-align: center;
    }
  
    #footer{
      background-color: lightgrey;
      padding: 8px;
      margin-top: 32px;
      text-align: center;
    }
    #name {
      margin-top: 4px;
  
  
    }
  
    #logo{
      height: 50px;
      margin-top: 4px;
   text-align: center;
    }
  
    #payment {
      width: 40px;
      height: 24px;
    }
  }
  
  
  /*Extra large devices*/
  @media screen and (max-width: 2560px) {
   
    #banner {
      height: 150px; 
      width: 100%;
    }
  
    .government {
      display: flex;
       width: 33%; 
       height : 250px;
       text-align: center;
    }
  
    .job-title {
      font-weight: 500;
      text-transform: uppercase;
      text-decoration: underline;
    }
  
    .job-detail-salary {
      color: green;
    }
  
    h1 {
      margin: 20px 32px;
      text-align: center;
    }
    #about{
      margin-left: 32px;
      flex-direction: row;
    
    
      
    }
  
    #payment {
      width: 64px;
      height: 40px;
      display: flex;
  
    }
  
    #description {
      width: 100%;
      padding-right: 0;
    }
  
    #team-image{
      height: 200px;
      border-radius: 10px;
      width: 50%;
      object-fit: cover;
      margin-top: 24px;
     
    }
  
    #team {
      width: 100%;
      display: flex;
    }
  
    body{
      margin: 0;
      padding: 0;
      background-color: whitesmoke;
      font-family:'Roboto', sans-serif;
      font-weight: 100;
      font-size: 16px;
      color: #444444;
      
      
    
    } 
  
    #jobs-list {
      text-align: center;
    }
  
    #application{
    max-width: fit-content;
      margin: 0 auto;
      padding: 0 8px;
      
    }
    #application-form input, section, textarea{
      padding: 4px;
      font-size: 1.25rem;
      margin-top: 14px;
      border-radius: 5px;
      border:1px solid cadetblue ;
    }
    #application-form label{
      font-weight: 200;
    
    }
    #application-form div{
      margin: 16px;
    }
    .form-group textarea{
      width: 80%;
      font-family: 'Roboto', sans-serif ;
    
    }
    
    .form-group input[type="checkbox"] {
      width: 24px;
      height: 24px;
    }
    .form-group input [type="submit"] {
      margin-top: 8px;
      background-color: #222;
      text-align: center;
      color: azure;
      font-weight: 600;
      padding: 8px;
      cursor: pointer;
      
    } 
  
    #footer-links{
      list-style-type: none;
      
     
      
    }
    #footer-links li {
      display: inline;
      margin: 8 16px;
      text-align: center;
      text-decoration: none;
    }
    .copyright{
      color: grey;
      text-align: center;
    }
  
    #footer{
      background-color: lightgrey;
      padding: 8px;
      margin-top: 32px;
      text-align: center;
    }
    #name {
      margin-top: 4px;
  
  
    }
  
    #logo{
      height: 50px;
      margin-top: 4px;
   text-align: center;
    }
  
  
  
  }