/* REVAN | Responsive */

@media (max-width: 1080px) {

    nav {
        width: 36%;
        right: 32%;
    }

    .menu {
        width: 40%;
    }

    .hero .profil h2#nama {
        font-size: 33px;
    }

    .container-01 {
        width: 90%;
    }

    .container-02 a {
        width: 40%;
    }

    footer .left {
        width: 90%;
    }

}



@media (max-width: 768px) {

    .say {
        width: 70%;
        left: 15%;
    }

    nav {
        width: 40%;
        right: 15%;
    }

    .menu {
        width: 50%;
    }

    .hero .profil img {
        width: 275px;
    }

    .container-01 .logo-main {
        padding: 0 35%;
    }

    .container-02 a {
        width: 45%;
    }

    .container-02 .ruang-logo {
        width: 45%;
        padding: 7%;
    }

    .container-02 .ruang-photo {
        width: 45%;
    }

}



@media (max-width: 550px) {

    .say {
        width: 80%;
        left: 10%;
    }

    nav {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        background-color: black;
        padding: 5px 50px;
    }

    .container-01 .logo-main {
        padding: 0 30%;
    }

    .container-02 .ruang-logo {
        width: 75%;
        padding: 15%;
    }

    .container-02 .ruang-photo {
        width: 75%;
    }

    footer .left {
        width: 100%;
    }

    footer .right {
        justify-content: space-between;
    }

}



@media (max-width: 500px) {

    .menu {
        width: 60%;
    }

    .container-01 .logo-main {
        padding: 0 25%;
    }

    .container-02 a {
        width: 75%;
    }

    footer .right {
        flex-direction: column;
    }

    footer img {
        margin-bottom: 25px;
    }

}



@media (max-width: 450px) {

    .say {
        width: 86%;
        left: 7%;
    }

    nav {
        padding: 5px 30px;
    }

    header {
        padding: 5px 15px;
    }

    .menu {
        width: 70%;
    }

    .button-menu,
    .button-close {
        right: 15px;
    }

    .hero .profil h2#nama {
        font-size: 30px;
    }

    .hero .profil h2#status {
        font-size: 16px;
    }

    .container-02 .ruang-photo {
        width: 90%;
    }

    footer p#desainer {
        letter-spacing: 3px;
    }

}



@media (max-width: 375px) {

    .say img {
        width: 30px;
    }

    .welcome {
        font-size: 13px;
    }

    nav {
        padding: 5px 20px;
    }

    .hero .profil h2#nama {
        font-size: 28px;
    }

    .container-02 .text {
        padding: 0 15px;
    }

    .container-02 a {
        width: 80%;
    }

}



@media (max-width: 325px) {

    .menu h2 {
        font-size: 22px;
    }

    .menu-list a {
        font-size: 14px;
    }

    .container-02 a {
        width: 85%;
        font-size: 14px;
    }

    footer .left p {
        font-size: 14px;
    }

}