@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Manrope:wght@200..800&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Patua+One&display=swap');

/* font-family: "Manrope", sans-serif;
font-family: "Inria Serif", serif; */
*{box-sizing: border-box;}
#nav {
    display: flex;
    justify-content: space-between;
    /* align-content: space-between; */
    flex-wrap: wrap;
    font-family: "manrope" , sans-serif;
    color: black;
    background-color: #54798C;
    padding: 20px;
    align-items: center;
}


#nav a {
    text-decoration: none;
    font-size: 16px;
    color:black;
}

#nav img {
    height:70px;
}




#header {
     font-family: "Manrope", sans-serif;
    color: black;
    background-color:#F5F5F5 ;

}

.hero {
    width: 100%;
}

#header {
    /* display:flex; */
}
#header span {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    
}

#header div img {
    flex-grow: 1;
}

#header div p {
    align-items: center;
}

#header button {
   
        background-color: #B6CAD4;
        color: black;
        padding: 10px 33px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }







#one {
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    color: black;
     background-color: #C95430;
     padding-top: 25px;
     padding-bottom: 25px;
     padding-left: 60px;
     padding-right: 60px;
}

#one p {
    padding-left: 500px;
    padding-right: 500px;

}
#one span {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}

#one img {
    height: 80px;
}

#one h1 {
    font-family: "Inria Serif", serif;
    font-size: 80px;
    color: rgb(255, 255, 255);
    text-align: center;

}

#one div {

    justify-content: center;
    align-items: center;
    width:  300px;
    text-align: center;
    width: 400px;
}

#one img {
    justify-content: center;
    align-items: center;
}
#one h2 {
    font-family: "Inria Serif", serif;
    font-size: 32px;
    color:black
    
}



#two {
    font-family: "Manrope", sans-serif;
    font-size: 26px;
    color: black;
    background-color: #B6CAD4;
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: center;   
    
}

#two p {
    padding-left: 100px;
    padding-right: 100px;

}

#two span {
    align-items: center;
}

#two img {
    padding-top: 50px;
}

#two {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}




#three h1 {
    font-family: "Inria Serif", serif;
    font-size: 80px;
    color: rgb(0, 0, 0);
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

#three p {   
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    color: black;
  
}
   

#three span {
    display: flex;
    padding-top: 100px;
    padding-bottom: 50px;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

#three div {
    align-items:center;
    height: 567px;
    justify-content: center;
    width: 400px;
    gap: 50px;  display: flex;
    flex-direction: column;
    background-color: #B6CAD4;
    justify-content: space-between;
    /* padding-left: 30px;
    padding-right: 30px; */
    text-align: left;
}
#three div article {
      padding-left: 30px;
    padding-right: 30px;
}

#three h2 {
font-family: "Inria Serif", serif;
    font-size: 32px;
    color:black;
    text-align: left;
}

#three img {
    align-items: center;
    height: 200px;
}

.center {
    text-align: center;
}



#four {
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    color: black;
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;

}

#four h1 {
    font-family: "Inria Serif", serif;
    font-size: 80px;
    color: rgb(0, 0, 0);

}

.staff {
    text-align: left;
    width: 600px;
}

.staff div {
    display:flex;
    gap: 10px;
    margin-bottom: 50px;
    flex-wrap: wrap;

}

.staff img {
    align-self: flex-start;
}
#four img div {
    height: 300px;
    padding-top: 40px;
}

#four {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: space-between;
    flex-wrap: wrap;
}

#four button {
    background-color: #ED9479;
    color: black;
    padding: 10px 33px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* #four span {
    display: flex;
    padding-top: 100px;
    padding-bottom: 50px;
    align-items: center;
    justify-content: center;
} */

.p {
    text-align: center;
}



#footer {
    background-color: #C44E2B;
    padding: 40px 80px;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    color: black;
}

/* Top navigation */
.footer-nav ul {
    display: flex;
    justify-content: center;
    gap: 40px;
    list-style: none;
    padding: 0;
}

.footer-nav a {
    text-decoration: none;
    color: black;
}

/* Bottom section */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

/* Legal links */
.legal-links {
    display: flex;
    gap: 30px;
    list-style: none;
    padding: 0;
}

.legal-links a {
    color: black;
    text-decoration: none;
}

.footer-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.footer-logo img {
    height: 140px;
}