body { 
  margin: 0; 
  background: #f3f2f2; 
  font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color:#14153E;
  text-align: center; 
} 

  @font-face {
    font-family: 'Quantify Bold';
    font-style: normal;
    font-weight: normal;
    font-size: 80px;
    src: local('Quantify Bold'), url('images/quantify-webfont/Quantify Bold.woff') format('woff');
    }
#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:100%;
}

#heading-banner { 
  width: 100%; 
   margin-left:auto;
    margin-right:auto;
  height: 120px;
  padding: 20px 0; 
  background-color: rgb(250, 250, 250);
  text-align: left;
  position: sticky;
  top:0;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 40px;
} 



#banner-logo{
    display:inline-flex;
    flex-direction: row;
    margin-left: 0px;
    align-items: center;
    max-height: 30px;
}

#banner-logo img{
    height: 120px; 
    width: auto;
    
}
a, a:hover, a:visited, a:active {
  color: inherit;
  text-decoration: none;
 }

#navigation {
    font-family: "avenir", sans-serif;
    font-size: 20px;
    color: #14153E;
    display: inline-flex;
    gap: 120px;
    align-items: center;
    margin-top: 50px;
    margin-left: auto;
}

#donate-button {
    background-color: #4B61D1;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: 50px;
}

#logos{
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
}

#logos img {
    max-height: 40px;
    width: auto;
}


.container {
  display: flex;
  align-items: center;
  margin-top: 100px;
  margin-bottom: 50px;
}

.container div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

.container2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 24px;
    margin-bottom: 20px;
    background-color: #14153E;
    

}

#quote {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color:#14153E;
    
}

#h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color:#14153E;
}

#image {
    max-width: 800px;
    width: 90vw;
    margin: 0 auto;
    background-color: #3a3c81;
}
#image img{
   width: 100%;
   height: auto;
   display: block;
}

#image2 {
    max-width: 800px;
    width: 90vw;
    margin: 0 auto;
    background-color: #3a3c81;
}
#image2 img{
   width: 100%;
   height: auto;
   display: block;
}
#mission-statement {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color:#14153E;
    
    align-items: center;
    margin-top: 50px;
    margin-bottom: 0px;
    margin-left: 60px;
     margin-right: 60px;
}

#box-logo {
    max-width: 200px;
    width: 90vw;
    margin: 0 auto;
    display: block;
}

#box-logo img{
    width: 100%;
   height: auto;
   display: block;
}
#main-content h1{
    font-family: Arial, Helvetica, sans-serif;
    align-items:center;
    color:#14153E
}

h1 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    align-items:center;
    color:#14153E
}
.instructions-containers {
    display: flex;
    flex-direction: row; 
     
     justify-content: center;
     margin-bottom: 0px;

}
.instructions-containers div{
    width: 512px;
    height: 384px;
    border: 1px solid black;
   
}
#box-1 img{
    width: 100%;
    height: 100%;
}
#box-2 img{
    width: 100%;
    height: 100%;
}

#box-3 img{
    width: 100%;
    height: 100%;
}

#box-4 img{
    width: 100%;
    height: 100%;
}
.instructionsinfo-containers {
    display: flex;
    flex-direction: row; 
     
     justify-content: center;
     margin-bottom: 200px;
     

}
.instructionsinfo-containers div{
    width: 512px;
    height: 20px;
    border: 1px solid black;
   background-color:#14153E;
}

.instructionsinfo-containers div p{
    font-family: Arial, Helvetica, sans-serif;
    align-items:center;
    color:#f8f8fa;
    font-size: 18px;
}
#box1 {
    width: 100%;
    height: 100%;
}
#box2 {
    width: 100%;
    height: 100%;
}

#box3 {
    width: 100%;
    height: 100%;
}

#box4 {
    width: 100%;
    height: 100%;
}
.partenership-container {
    display: flex;
    flex-direction: row; 
     gap: 100px;
   margin-bottom: 150px;
    
   

}

#explanation {
    width: 1000px;
    height: 500px;
    border-right-color: #14153E;
    border-right-width: 5px;
    border-right-style: solid;
    margin-top: 60px;  
}

#explanation h2{
   font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    color:#14153E;
}

#explanation p{
    font-family: Arial, Helvetica, sans-serif;
    align-items:left;
    color:#14153E;
    font-size: 23px;
    word-spacing: 5px;
    margin-left: 30px;
    margin-right: 30px;

}


#partener-logos {
    display:flex;
    flex-direction: column;
    gap: 15px

}
#partener-logos img{
    max-height: 200px;
    width: auto;
}

.hsbc-container {
    display: flex;
    flex-direction: row; 
     gap: 100px;
   margin-bottom: 150px;
    
   

}

#hsbc-explanation {
    width: 1000px;
    height: 400px;
    border-right-color: #14153E;
    border-right-width: 5px;
    border-right-style: solid;
    margin-top: 60px;  

}

#hsbc-explanation h2{
   font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    color:#14153E;
}

#hsbc-explanation p{
    font-family: Arial, Helvetica, sans-serif;
    align-items:left;
    color:#14153E;
    font-size: 23px;
    word-spacing: 5px;
    margin-left: 50px;
    margin-right: 50px;

}


#hsbc-logos {
    display:flex;
    flex-direction: column;
    gap: 15px
    

}
#hsbc-logos img{
    max-height: 200px;
    width: auto;
    margin-top: 100px;
}

#findoutmore-button button{
    background-color: #14153E;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    align-items: center;
   
}

.meetings-container {
    display: flex;
    flex-direction: row; 
     gap: 100px;
   margin-bottom: 150px;
    
   

}

#meetings-explanation {
    width: 1000px;
    height: 500px;
    border-right-color: #14153E;
    border-right-width: 5px;
    border-right-style: solid;
    margin-top: 60px;  
}

#meetings-explanation h2{
   font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    color:#14153E;
}

#meetings-explanation p{
    font-family: Arial, Helvetica, sans-serif;
    align-items:left;
    color:#14153E;
    font-size: 23px;
    word-spacing: 5px;
    margin-left: 30px;
    margin-right: 30px;

}

#AA-button button{
    background-color: #14153E;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    align-items: center;
   
}
#NA-button button{
    background-color: #14153E;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    align-items: center;
   
}
#aa-na-logos {
    display:flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 100px;

}
#aa-na-logos img{
    max-height: 200px;
    width: auto;
}
#donation-quicklink{
    display:flex;
    flex-direction: column;
    gap:10px;
    background-color: #14153E;
    color: #ffffff;
    margin-left: 60px;
    margin-right: 60px;
    margin-bottom: 150px;
    padding: 10px 20px;
    border-radius: 10px;

}

#donation-quicklink h1{
    font-family: "avenir", sans-serif;
    color:#f8f8fa;
    font-size: 50px;

}

#donation-quicklink p{
    font-family: "avenir", sans-serif;
    color:#f8f8fa;
    font-size: 20px;
}

#amount-selection{
    display: flex;
    flex-direction: row;
    gap: 50px;
    justify-content: center;
    margin-bottom: 20px;
}

#amount-selection .amount-button {
    height: 80px;
    width:  100px;
    border: 10px solid #ffffff;
    padding: 10px 20px;
    font-size: 18px;
    color: #ffffff;
    background-color: #14153E;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

#amount-selection .amount-button:hover {
    background-color: #f8f9fa;
    border-color: #14153E;
    color: #14153E;
}
#map-container {
    background-color: #205283;

}

#map {
    /* Leaflet needs an explicit height to render the map */
    height: 500px;
    width: 70%;
   margin-bottom: 150px;
   margin-left: 15%;
}

#help-section {
    display: flex;
    flex-direction: row;
    gap: 50px;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 20px;
      margin-right: 20px;

}

#animation {
    margin-top: 100px;
}
#donation-explanation { 
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 100px;
      margin-right: 100px;
}

/* Donation page logo responsive scaling */
#donation-logo {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.donate-wrapper {
    display: flex;
    flex-direction: row;
    gap: 150px;
    margin-bottom: 50px;
    justify-content: center;
    margin-top: 50px;
}
.donation-explanation h3{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color:#14153E;

}

.recent-section h2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color:#14153E;
}
.donate-wrapper label {
     font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color:#ffffff;
}
.side-image {
    max-width: 600px;
    width: 100%;
    height: auto;
    display: block;
}


#donate-form {
    width: 300px;
    background-color: #14153E;
    padding-bottom:20px;
}

#job-explanation {
    margin-left: 30px;
    margin-left: 30px;
    margin-bottom: 100px;
    margin-top: 50px;


}
#page-title p{
    font-family: Quantify Bold;
    font-size: 80px;
    margin-bottom: 100px;
}
#job-section{
    display: flex;
    flex-direction: row;
    gap: 100px;
}
#job-form {
    width: 300px;
    background-color: #14153E;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
#footer {
    width: 100%; 
  padding: 20px 0; 
  background-color: rgb(250, 250, 250);

  position: relative;
    border-top: 8px solid #1D1F5D;
display: flex;
    flex-direction: row; 
     gap: 150px;
   
    justify-content: right;
    
}
#social-media-links img{
    max-height: 10px;
    width: auto;

}
#socialmedia-logos {
    display:flex;
    flex-direction: column;
    gap: 15px;
}
#footer {
     margin-left:auto;
    margin-right:auto;
    width:100%;
}
#footer p{
    font-family: Arial, Helvetica, sans-serif;
    align-items:center;
    color:#14153E;
    font-size: 16px;
}

#footer-logos img{
    max-height:50px;
    width: auto;
}

#social-media-logos img {
    max-height: 50px;
    width: auto;
    margin: 0 10px;
    margin-bottom: 20px;
}
#logo img{
    max-height: 200px;
    width: auto;

}

#employers-callout {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    background-color:#14153E;
    display: flex;
    align-items: center;
   

}

#employers-callout h1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    color:#f8f8fa;
    margin-bottom: 20px;
}

#employers-callout p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color:#f8f8fa;
    margin-left: 50px;
    margin-right: 50px;

}

#jobs-section { 
    display: flex;
    flex-direction: row;
    gap: 300px;
    margin-top: 50px;
    justify-content: center;
}

.employment-containers {
    display: flex;
    flex-direction: row; 
     
     justify-content: center;
     margin-bottom: 0px;

}
.employment-containers div{
   width: calc(100vw / 3);
    height: 384px;
    border: 1px solid black;
   
}
#TLA-logo img{
    width: 100%;
    height: 100%;
}
#SGC-logo img{
    width: 100%;
    height: 100%;
}

#Emmaus-logo img{
    width: 100%;
    height: 100%;
}


.employmentinfo-containers {
    display: flex;
    flex-direction: row; 
     
     justify-content: center;
     margin-bottom: 200px;
     width: 100%;
     

}
.employmentinfo-containers div{
    width: calc(100vw / 3);
    height: 50px;
    border: 1px solid black;
   background-color:#14153E;
}

.employmentinfo-containers div p{
    font-family: Arial, Helvetica, sans-serif;
    align-items:center;
    color:#f8f8fa;
    font-size: 18px;
}

.employmentinfo-containers div h3{
    font-family: Arial, Helvetica, sans-serif;
    align-items:center;
    color:#f8f8fa;
    
}
#TLA {
    width: 100%;
    height: 100%;
    padding-bottom: 21px;
}
#SGC {
    width: 100%;
    height: 100%;
    padding-bottom: 21px;
}

#Emmaus {
    width: 100%;
    height: 100%;
}

#tla-button button{
    background-color: white;
    color: #14153E;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    align-items: center;
    outline: none;
   
}

#SGC-button button{
    background-color: white;
    color: #14153E;
    border: none;    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;    padding: 10px 20px;
    font-size: 18px;
    align-items: center;
   
}

#emmaus-button button{
    background-color: white;
    color: #14153E;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 10px 20px;
    font-size: 18px;
    align-items: center;
   
}