@media screen and (max-width: 1200px) {
    header nav ul li a { padding: 15px 30px; font-size: 25px; background-position: 100% 35%; }
    main { height: 500px; }
    #sec1 .cont { width: 90%; height: 60%; }
    #sec2 .about { width: 50%; height: 100%; }
    #sec2 .about p { padding: 30px 65px; }
}
@media screen and (max-width: 800px) {
    main { height: 400px; }
    #sec1 { height: 600px; }
    #sec1 .cont { width: 90%; height: 60%; }
    #sec1 .cont .art hr { margin: 25px auto 0; }
    #sec1 .cont .art h3 { padding: 20px 10px; }
    #sec1 .cont .art { width: 32%; }
    #sec2 .img1 { height: 70%; }
    #sec2 .about { height:70%; }
    #sec2 .about p { padding: 20px; }
}
@media screen and (max-width: 600px) {
    header nav ul li a { font-size: 20px; }
    main { height: 300px; }
    main h1 { font-size: 50px; }
    main h2 { font-size: 22px; }
    #sec1 { height: 950px; gap: 20px; }
    #sec1 .cont {
        width: 90%;
        height: 90%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    #sec1 .cont .art { width: 55%; height: 47%; }
    #sec2 { height: 600px; flex-direction: column; }
    #sec2 .img1 { width: 60%; height: 30%; }
    #sec2 .about { width: 80%; height: 50%; }
    #sec2 .about p { padding: 10px; }
    header nav ul li a { padding: 15px 30px; font-size: 25px; background-position: 100% 35%; }
}
@media screen and (max-width: 400px) {
    header nav { width: 100%; }
    header nav ul li a { font-size: 13px; }
    #sec2 .about p { font-size: 14px; }
}