/*--------------------- Responsive (Start) ---------------------*/
@media (max-width: 991px){

    html{
        font-size: 75%;
    }

    .portfolio-item {
        width: 50%;
    }

    body {
        padding-left: 7rem;
    }

    .sidebar {
        width: 7rem;
        padding: 4rem 1rem;
    }

    .sidebar.active {
        width: 25rem;
    }
    
    #menu {
        display: block;
    }

    .sidebar .logo h2,
    .sidebar .social {
        opacity: 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .sidebar.active .logo h2,
    .sidebar.active .social {
        opacity: 1;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .sidebar .navbar li a {
        padding: 0.6rem;
        gap: 1.5rem;
    }

    .sidebar .navbar li a span {
        opacity: 0;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -o-transition: 0.4s;
        transition: 0.4s;
        pointer-events: none;
    }

    .sidebar.active .navbar li a span {
        opacity: 1;
        pointer-events: auto;
    }

}

@media (max-width: 768px){

    html{
        font-size: 65%;
    }

    section{
        padding: 3rem 2rem;
    }

    .home{
        min-height: 60rem;
    }

}

@media (max-width: 450px){

    html{
        font-size: 50%;
    }

    .sidebar.active {
        width: 100%;
    }

    .sidebar.active .navbar{
        margin: 0 auto;
    }

    .home{
        min-height: 100vh;
    }

    section{
        padding: 3rem 1rem;
    }

    .portfolio-item{
        width: 100%;
    }

    .testi-item {
        padding: 2rem 3rem;
        padding-bottom: 10rem;
    }
    
}

/*--------------------- Responsive (End) ---------------------*/