* { margin: 0; padding: 0; box-sizing: border-box; }
header {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
header nav { width: 70%; height: 65%; }
header nav ul { display: flex; justify-content: space-around; list-style: none; }
header nav ul li { padding-top: 20px; }
header nav ul li a {
    text-decoration: none;
    padding: 20px 40px;
    background: url(img/linkImg.png) no-repeat 100% 25% / cover;
    color: #000;
    font-weight: bold;
    font-style: italic;
    font-size: 30px;
    text-shadow: 0 0 5px rgb(192, 192, 192);
}
main {
    width: 100%;
    height: 600px;
    background: url(img/1.webp) no-repeat center / cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}
main h1 { font-size: 70px; color: #333; letter-spacing: 8px; }
main h2 { color: #444; font-weight: normal; letter-spacing: 2px; }
#sec1 {
    width: 100%;
    height: 700px;
    background: #c3ff8799;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    color: #222;
}
#sec1 .cont { width: 80%; height: 80%; display: flex; justify-content: space-between; }
#sec1 .cont .art { width: 25%; height: 100%; box-shadow: 0 0 15px #000; transition: .5s; }
#sec1 .cont .art hr {margin: 80px auto 0;}
#sec1 .cont .art:hover { border-bottom-right-radius: 50%; }
#sec1 .cont .art .img { width: 100%; height: 50%; background: url(img/2.jpg) no-repeat center / cover; }
#sec1 .cont .art h3 { text-align: center; padding: 20px; font-weight: normal; font-style: italic; }
#sec1 .cont .art2 .img { background: url(img/3.jpg) no-repeat center / cover; }
#sec1 .cont .art3 .img { background: url(img/4.png) no-repeat center / cover; }
#sec2 { width: 100%; height: 600px; display: flex; align-items: center; justify-content: space-around; }
#sec2 .img1 { width: 50%; height: 100%; background: url(img/5.jpg) no-repeat center / cover; }
#sec2 .about {
    width: 50%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#sec2 .about h2 { color: #222; padding-bottom: 10px; }
#sec2 .about p { padding: 30px 200px; text-align: justify; line-height: 27px; color: #333; }
#sec3 {
    width: 100%;
    height: 500px;
    background: #c3ff8799;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}
#sec3 h2 { font-size: 37px; font-weight: normal; letter-spacing: 2px; color: #333; }
#sec3 h3 { font-weight: normal; letter-spacing: 1px; font-style: italic; font-family: cursive; }
#sec3 form input[type="email"] {
    display: block;
    padding: 15px 55px;
    text-align: center;
    border-radius: 70px 0 70px 0;
    box-shadow: 2px 5px 3px #50712f;
    border: none;
    outline: none;
    transition: .5s;
}
#sec3 form input[type="email"]:hover {
    border-radius: 0 70px 0 70px;
    box-shadow: 2px 5px 3px #50712f, -2px -5px 3px #50712f;
}
#sec3 form input[type="submit"] {
    margin: 30px auto;
    display: block;
    padding: 10px 40px;
    border: 1px solid #000;
    background: none;
    text-transform: uppercase;
    box-shadow: 2px 5px 3px #50712f;
    cursor: pointer;
    transition: .5s;
} 
#sec3 form input[type="submit"]:active {
    border-radius: 15px;
    background: #7fb649;
    box-shadow: 4px 6px 3px #50712f;
}
footer {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
footer a {
    padding: 10px;
    background: #222;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}