/* Viewports of 340px or less */

@media only screen and (max-width: 340px) {
    .header-area .main-menu .navbar,
    .header-area .main-menu .navbar .navbar-brand {
        padding: 4%;
        margin: 0;
    }

    .site-main .site-banner .site-title h1 {
        font-size: 4rem;
    }

    .site-main .site-banner .site-title h3 {
        font-size: 40px;
    }

}

/* Viewports of 450px or less */

@media only screen and (max-width: 450px) {

    .site-main .site-banner .site-title .site-title-contents {
        padding-top: 12vh;
    }
        
    .site-main .about-area .about-title h2 > span {
        font-size: 23px;
    }

    .site-main .about-area .about-title .paragraph > p {
        font-size: 1rem;
    }

}

/* Viewports between 450px and 792px */

@media only screen and (min-width: 451px) and (max-width: 792px) {
    
        .site-main .about-area .about-title h2 > span {
            font-size: 31px;
        }

}

/* Viewports of 792px or less */

@media only screen and (max-width: 792px) {

    .button {
        margin: 0.5rem 0;
    }

    .site-main .project-area .project-title {
        padding-top: 5rem;
    }

    .site-main .project-area .button-group button {
        font: normal 500 18px/40px "Montserrat";
    }

    .site-main .about-area .about-title p {
        padding: 0%;
    }

    .site-main .site-banner .site-title h1 {
        font-size: 4.5rem;
    }

    footer.footer-area .social a > i {
        font-size: 25px;
        padding: 0.5rem;
    }

}

/* Viewports of 991px or less */

@media only screen and (max-width: 991px) {
    
    .container {
        max-width: 90%;
    }

    .header-area .main-menu .navbar-default {
        padding: 1rem 20rem;
        position: fixed;
        top: -1px;
        left: 0;
        right: 0;
        z-index: 9999;
        width: 100vw;
        background: whitesmoke;
        box-shadow: var(--box-shadow);
        transition: background 1s ease;
    }

    .header-area .main-menu .nav-item .nav-link {
        padding-left: 0;
    }

    .nav-button {
        margin-left: 0;
    }

}

/* Viewports of 1440px or less */

@media only screen and (max-width: 1440px) {

    .header-area .main-menu .navbar {
        padding: 1rem;
    }

    .about-title h2 {
        text-align: center;
    }

    .about-area .about-title .paragraph > p {
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }

    footer.footer-area .social-menu {
        position: static;
        z-index: auto;
        bottom: auto;
        left: auto;
    }

    footer.footer-area .social-menu .social {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    footer.footer-area .social-menu .social a > i {
        font-size: 40px;
        padding: 2rem;
    }

    footer.footer-area .social-menu .social-header {
        display: block;
    }

}

/* Viewports of 1910px or less */

@media only screen and (max-width: 1910px) {

    .site-main .about-area {
        padding: 3% 4%;
    }

}