@media (min-width: 1400px) {
    & footer {
        & .main {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: row;
            margin-top: -10vh;
        }
    }

    & .site {
        & .aligin {
            & img {
                width: 70%;
            }

            & form {
                width: 90vw;
            }
        }
    }

    & .home {
        & .home-body {
            & .text {
                padding: 4rem 4rem;
                height: 100%;

                & button {
                    width: 15vw;
                }
            }

            & img {
                width: 90%;
            }

        }
    }

    & .products {
        & .list {
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 15px;
            row-gap: 8rem;
        }
    }
}

@media (max-width: 1400px) {
    & .home {
        & .home-body {
            & .text {
                padding: 4rem 2rem;
                height: 100%;

                & button {
                    width: 17vw;
                }
            }

            & img {
                width: 90%;
            }

        }
    }

    main {
        & .about {
            & .body-modal-1 {
                & text {
                    & h3 {
                        font-size: 2em;
                    }
                }

                & img {
                    width: 40%;
                }
            }

            & .body-modal-2 {
                & text {
                    & h3 {
                        font-size: 2em;
                    }
                }

                & img {
                    width: 40%;
                }
            }
        }

    }
    & .products {
        & .list {
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 15px;
            row-gap: 8rem;
        }
    }

    
    & footer {
        & .main {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: row;
            margin-top: -6vh;
        }
    }

    & .site {

        & .site-body {
            & .advantagens {
                & img {
                    width: 50%;
                }
            }
        }

        & .aligin {
            & img {
                width: 30%;
            }

            & form {
                width: 100vw;
            }
        }
    }

}

@media (min-width: 1277px) {
    main {
        & .dashboard {
            & .list {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        & .manager {
            & .list {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        & .orders {
            & .list {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    }
}

@media (max-width: 1277px) {
    main {
        & .dashboard {
            & .list {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        & .manager {
            & .list {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    }
}

@media (max-width: 1277px) {
    & .orders {
        & .list {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

@media (min-width: 1200px) {
    & .site {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;

        & .site-body {
            & .advantagens {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-direction: row;

                & h2 {
                    font-size: 3em;
                }
            }
        }

        & .aligin {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 5vh;

            & img {
                width: 20%;
            }

            & form {
                width: 90vw;
            }
        }

    }
}

@media (max-width: 1200px) {
    & .home {
        & .home-body {
            & .text {
                padding: 4rem 2rem;
                height: 100%;

                & button {
                    width: 20vw;
                }
            }

            & img {
                width: 90%;
            }

        }

        & .scope {
            display: none;
        }
    }

    main {

        & .title {
            margin-top: 4vh;
        }

        & .benefit {

            & .waves,
            .waves-one {
                fill: #0f0f0f;
                margin-bottom: -5vh;
            }

            & .list {
                margin-top: 2vh;

                & p {
                    font-size: .9em;
                }
            }
        }
    }

    & .site {

        & .site-body {
            & .advantagens {
                display: flex;
                align-items: center;
                justify-content: center;

                & h2 {
                    font-size: 2.4em;
                }

                & img {
                    width: 50%;
                }
            }
        }

        & .aligin {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 5vh;

            & img {
                display: none;
            }

            & form {
                width: 60vw;
            }
        }
    }

}

@media (min-width: 1000px) {
    & main {
        & .about {

            & svg:nth-child(2) {
                fill: #151515;
                margin-bottom: -4vh;
            }

            & svg:nth-child(4) {
                fill: #151515;
                margin-top: -7vh;
            }

            & svg:nth-child(6) {
                fill: #151515;
            }

            & .body-modal-1 {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-direction: row;

                & text {
                    & h3 {
                        font-size: 2em;
                    }
                }

                & img {
                    width: 40%;
                }
            }

            & .body-modal-2 {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-direction: row;

                & text {
                    & h3 {
                        font-size: 2em;
                    }
                }

                & img {
                    width: 40%;
                }
            }
        }

        & .about-us {
            & .body {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: row;
            }

        }
    }
}

@media (max-width: 1000px) {
    & .lagout {
        & .logo img {
            display: none;
        }
    }

    & main {
        & .about {

            & svg:nth-child(2) {
                fill: #151515;
                margin-bottom: -1vh;
            }

            & svg:nth-child(4) {
                fill: #151515;
                margin-top: -2vh;
            }

            & svg:nth-child(6) {
                fill: #151515;
                margin-bottom: -1vh;
            }

            & .body-modal-1 {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column-reverse;

                & text {
                    & h3 {
                        font-size: 2em;
                    }
                }

                & img {
                    width: 40%;
                }
            }

            & .body-modal-2 {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                & text {
                    & h3 {
                        font-size: 2em;
                    }
                }

                & img {
                    width: 40%;
                }
            }
        }

        & .about-us {
            & .body {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }

            & .desc {
                & h5 {
                    font-size: 1em;
                }
            }
        }
    }
}

@media (min-width: 990px) {
    & header {
        & .navbar-brand {
            width: 5%;
    
            & img {
                width: 70%;
                height: 5%;
            }
        }
    }

    main {
        & .benefit {
            & .list {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    }

    main {

        & .form {
            & .org {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-direction: row;
                gap: 50px;
            }
        }
    }

    & .product:hover {
        transition: 0.7s ease;
        transform: translate(0, -25px);
    }
}

@media (max-width: 990px) {

    & header {
        & .navbar-brand {
            width: 5%;
    
            & img {
                width: 100%;
                height: 5%;
            }
        }
    }

    & .home {
        & .home-body {
            & .text {
                padding: 4rem 2rem;
                height: 100%;

                & button {
                    width: 25vw;
                }
            }

        }
    }


    & .products {
        height: 100%;

        & .list {
            grid-template-columns: repeat(2, 1fr);
            column-gap: 25px;
            row-gap: 90px;
        }
    }

    & .product:hover {
        transition: 0.7s ease;
        transform: translate(0, -25px);
    }

    & .site {
        & .site-body {
            & .advantagens {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-direction: column;

                & .card-1, .card-2 {
                    margin-top: 7vh;
                }

                & img {
                    display: none;
                }

                & h2 {
                    text-align: center;
                    font-size: 3em;
                }

                & h6 {
                    text-align: center;
                }
            }
        }
    }

}

@media (max-width: 990px) {
    main {
        & .title {
            margin-top: 4vh;
        }

        & .form {
            & .org {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-direction: column;
                gap: 50px;
            }
        }

        & .benefit {

            & .waves,
            .waves-one {
                fill: #0f0f0f;
                margin-bottom: -5vh;
            }

            & .list {
                grid-template-columns: repeat(2, 1fr);
                margin-top: 2vh;

                & p {
                    font-size: .9em;
                }
            }
        }

        & .portifolio {
            & .modal .carousel-item {
                height: 40vh;
            }
        }
    }
}

@media (max-width: 825px) {
    main {
        & .dashboard {
            & .list {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        & .manager {
            & .list {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }
}

@media (max-width: 800px) {
    & footer {
        & .main {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
            gap: 20px;
            margin-top: -2vh;
        }
    }
}

@media (min-width: 797px) {
    main {
        & .faq {
            & .list {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }
}

@media (max-width: 797px) {
    main {
        & .faq {
            & .list {
                grid-template-columns: repeat(1, 1fr);

                & .card .card-body {
                    height: 100%;
                }
            }
        }

        & .orders {
            & .list {
                grid-template-columns: repeat(1, 1fr);
            }
        }
    }
}

@media (min-width: 765px) {
    & .home {
        & .home-body {
            & .text {

                & h1 {
                    font-size: 4em;
                }
            }
        }
    }


    & .portifolio {
        & .list {
            grid-template-columns: repeat(4, 1fr);
        }
    }
}

@media (max-width: 765px) {
    & .home {
        & .home-body {
            & .text {
                padding: 4rem 2rem;
                height: 100%;

                & h1 {
                    font-size: 3em;
                }

                & button {
                    width: 50vw;
                }
            }

        }
    }

    main {
        & .benefit {
            & .list {
                grid-template-columns: repeat(1, 1fr);
            }
        }

        & .portifolio {
            & .modal .carousel-item {
                height: 30vh;
            }
        }

    }

    & .products {
        & .list {
            grid-template-columns: repeat(1, 1fr);
            row-gap: 25vh;
        }
    }

    & .product:hover {
        transition: 0.7s ease;
        transform: translate(0, -25px);
    }

    & .portifolio {
        & .list {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    & .site {

        & .site-body {
            & .advantagens {
                & .card-1, .card-2 {
                    margin-top: 7vh;
                }
    
                & h2 {
                    text-align: center;
                    font-size: 2.2em;
                }
    
            }
        }

        & .aligin {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 5vh;

            & img {
                display: none;
            }

            & form {
                width: 100%;
            }
        }
    }
}

@media (max-width: 565px) {
    & .home {
        & .home-body {
            & .text {
                padding: 4rem 2rem;
                height: 100%;

                & h1 {
                    font-size: 2.3em;
                }

                & button {
                    width: 100%;
                }
            }

        }
    }

    main {
        & .dashboard {
            & .list {
                grid-template-columns: repeat(1, 1fr);
            }
        }

        & .manager {
            & .list {
                grid-template-columns: repeat(1, 1fr);
            }
        }
    }

    & .portifolio {
        & .list {
            grid-template-columns: repeat(2, 1fr);
        }

        & .modal .carousel-item {
            height: 20vh;
        }
    }
}

@media (min-width: 470px) {
    & .site {
        & .categories {
            width: 35%;
        }

        & .site-body {
            & .advantagens {
                & .card-1, .card-2 {
                    margin-top: 7vh;
                }
    
                & h2 {
                    text-align: center;
                    font-size: 2.2em;
                }
    
            }
        }

        & .aligin {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 5vh;

            & img {
                display: none;
            }

            & form {
                & button {
                    width: 15vw;
                }
            }
        }
    }
}

@media (max-width: 470px) {
    & .site {

        & .categories {
            width: 75%;
        }

        & .site-body {
            & .advantagens {
                & .card-1, .card-2 {
                    margin-top: 7vh;
                }
    
                & h2 {
                    text-align: center;
                    font-size: 2.2em;
                }
    
            }
        }

        & .aligin {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 5vh;

            & img {
                display: none;
            }

            & form {
                & button {
                    width: 30vw;
                }
            }
        }
    }
}

@media (max-width: 400px) {
    & .portifolio {
        & .list {
            grid-template-columns: repeat(1, 1fr);
        }
    }
}





/* new update */






@media (max-width: 1400px) {
    & .navbar .collapse,
    .navbar-nav {
        padding-bottom: 1rem;
    }
}

@media (min-width: 1200px) {
    & .advantegens {
        & .list {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    & .home {
        & .home-content {
            flex-direction: row;

            & .home-body {
                width: 60%;
            }

            & .home-img {
                width: 50%;

                & img {
                    margin-left: auto;
                    width: 50%;
                }
            }
        }
    }
}

@media (max-width: 1200px) {
    & .advantegens {
        & .list {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    & .home {
        & .home-content {
            flex-direction: column-reverse;

            & .home-body {
                width: 100%;
                text-align: center;
            }


            & .home-img {
                width: 100%;

                & img {
                    margin: auto;
                    width: 40%;
                }
            }
        }
    }
}

@media (min-width: 1024px) {
    .carrossel-card {
        flex: 0 0 33.333%;
    }
}

@media (max-width: 1024px) {
    .carrossel-card {
        flex: 0 0 50%;
    }
}

@media (min-width: 990px) {
    & .modal-body {
        & .line {
            flex-direction: row;
        }
    }

    & .home {
        & .home-content {
            padding: 0 8rem;
        }
    }

    & .about {
        & .card {
            flex-direction: row;

            & img {
                width: 45%;
            }
        }
    }

    & .activity-body {
        & .item {
            flex-direction: row;

            & img {
                width: 50%;
            }
        }
    }

    & .FAQs .accordion {
        width: 60%;
    }
}

@media (max-width: 990px) {
    & .modal-body {
        & .line {
            flex-direction: column;
        }
    }

    & .home {
        & .home-content {
            padding: 0;
        }
    }

    & .about {
        & .card {
            flex-direction: column;

            & img {
                width: 100%;
            }

            &:nth-child(2) {
                flex-direction: column-reverse;

            }
        }
    }

    & .activity-body {
        & .item {
            flex-direction: column;

            & img {
                width: 100%;
            }
        }
    }

    & .FAQs .accordion {
        width: 100%;
    }
}

@media (min-width: 768px) {
    & .home {
        & .home-body {
            & h2 {
                font-size: 3.4em;
            }

            & h6 {
                font-size: 1.3em;
            }
        }
    }
}

@media (max-width: 768px) {
    & .home {
        & .home-body {
            & h2 {
                color: #fff;
                font-size: 2em;
                font-family: "Audiowide", sans-serif;
            }

            & h6 {
                font-size: 1em;
            }
        }
    }

    & .advantegens {
        & .list {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    .carrossel-card {
        flex: 0 0 100%;
    }
}