@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=Saira+Extra+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    box-sizing: border-box;
}

body {
    
    color: white;
    margin: 0;
    background-color: #ececec;
}
    
ul {
 margin: 10px;
 padding: 0;
 list-style: none;
 text-decoration: none;
   
}

.top-nav img {
  width: 150px;
 /* padding-bottom: 2%;*/
    }

.top-nav {
   font-family: 'Saira Extra Condensed' , sans-serif;
    line-height: 1.6; 
     font-weight: 500;
    width: 1920px;
    background-color: #3a5954; 
    margin: 0 auto;
    padding: .5em 0;
    font-size: 23px;
 justify-content: center;
}

.top-nav, .main-nav {
 display: flex;
 align-items: center;
}

.main-nav{
 width: 850px;
 justify-content: space-around;
}


header {
    background-image: url("../images/crowd.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 1920px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
   justify-content: Center;
 text-align: center;
    padding: 300px 640px;
     font-size: 50px;
    line-height: 87px;
    font-family: 'Saira Extra Condensed' , sans-serif;
    text-shadow: 5px 5px #3a5954;
}

h1 {
 display:flex;
justify-content: center;
}

h2 {
    font-family: 'annie use your telescope';
    font-weight: 200;
    font-size: 35px;
    color: black;
}

p {
  font-family: 'carlito';
    font-weight: 200;
    font-size: 13px;
    color: black;  
 
}

.text {
 
 width: 50%;
}

.trio {
    width: 1920px;
 height: 900px;
    background-color: #F5e1d1;
    padding: 20px;
    margin: 0 auto;
     display: flex;
   justify-content: space-around;
 flex-direction: column;
    text-align: left;
    line-height: 1.2;
}

.trio-box {
    background-color: #F5e1d1;
   background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 300px;
   height: 200px; 
    padding: 0 0 0 200px;
    margin: 30px 600px 50px 0;
    border-radius: 10px;
 
   
}

.box-one {
    background-image: url("../images/bridge.jpg"); 
    height: 500px;
}

.box-two {
    background-image: url("../images/bridge.jpg"); 
    
}

.box-three {
   
    background-image: url("../images/bridge.jpg"); 
}

h3 {
    color: black;
    font-family: 'saira extra condensed' ;
    font-size: 23px;
    padding: 0;
 /*align-items: flex-start;*/
}

.headliner{
 width: 1920px;
 /* I took the hex code for this color straight from figma but it's displaying differently here*/
background-color: #b0bdbb;
 display: flex;
 justify-content: center;
 padding: 80px;
}

h4 {
    font-family: 'Annie use your telescope';
    font-size: 25px;
    color: black;

}

.card {
 margin: 40px;
 padding: 90px 0 0 0;
 width: 115px;
 height: 115px;
 background-repeat: no-repeat;
 background-size: cover;
 /*background-position: center;*/
 display: flex;
  justify-content: center;

}
/* I somehow lost the images I used in my comps for this section and cannot find them on unsplash again so for now I have placeholders*/
.card-one {
 background-image: url("../images/holder.jpg"); 
}

.card-two {
 background-image: url("../images/holder.jpg"); 
}

.card-three {
 background-image: url("../images/holder.jpg"); 
}

.card-four {
 background-image: url("../images/holder.jpg"); 
}



ul {
 text-align: center;
 list-style: none;
}

.info {

 text-align: center;
 display: flex;
 justify-content: space-around;
}
.address {  
    
}

.foot {
color: black;

}

.location {

}
.footer {
 width: 1920px;
 background-color: #3a5954;

}

.footer li {
    list-style: none;
    font-weight: bold;
    text-decoration: none;
}

.footer a {
    color: black;
}

.copy {
    font-size: 10px;
    text-align: center;
}