@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

:root {
    --purple: #a473ff;
    --green: #79ff58;
}

body {
    font-family: sans-serif;
    overflow-x: hidden;
    overflow-y: visible;
    transition: 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dark-mode {
    background-color: #202020;
}

/*----------HEADER----------*/
header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 99%;
    height: auto;
    padding: 20px;
    box-shadow: 0px 10px 50px #64646435;

    img {
        width: 50px;
        height: 50px;
        transition: 1s;
        -webkit-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);

        box-shadow: 10px 10px 20px #d1c4e9,
            -10px -10px 20px #ccdea0;


        &:hover {
            box-shadow: 10px 10px 20px #a473ff,
                -10px -10px 20px #79ff58;
            cursor: pointer;
            -webkit-transform: rotate3d(1, -1, 0, 70deg);
            transform: rotate3d(1, -1, 0, 50deg);
        }
    }

    img:nth-child(2) {
        display: none;
    }

    nav {

        display: flex;
        gap: 1rem;
        height: 50px;

        ul {
            display: flex;
            align-items: center;
            gap: 1rem;
            list-style: none;

            li {
                border: solid 1px #d1c4e9;
                padding: 5px;
                width: auto;
                height: 18px;

                &:hover {
                    border: solid 1px;
                    cursor: pointer;
                }
            }
        }

        /*-------------BTN-------------*/
        button {
            border: none;
            font-size: 15px;
            padding: 10px;
            transition: 2s cubic-bezier(0.075, 0.82, 0.165, 1);

            &:hover {
                box-shadow: 1px 1px 10px black,
                    2px 2px 20px #010057;
                background-color: #202020;
                color: aliceblue;
                cursor: pointer;
            }

            /*light-mode*/
            .lm {
                display: none;
            }

            /*dark-mode*/
            .dm {
                display: inline;
            }
        }

        /*-------------/BTN-------------*/


    }

}

/* ------------------header dark-mode------------------ */
.dark-mode header {
    color: white;
    backdrop-filter: blur(1px);

    /* logos */
    img:nth-child(2) {
        display: block;
        width: 50px;
        height: 50px;
        transition: 1s;
        -webkit-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);

        box-shadow: 10px 10px 20px #d1c4e955,
            -10px -10px 20px #cddea038;


        &:hover {
            box-shadow: 10px 10px 20px #a473ff,
                -10px -10px 20px #79ff58;
            cursor: pointer;
            -webkit-transform: rotate3d(1, -1, 0, 70deg);
            transform: rotate3d(1, -1, 0, 50deg);
        }
    }

    img:nth-child(1) {
        display: none;
    }

    nav {

        li {
            border: solid 1px #d1c4e9;

            &:hover {
                border: solid 1px #717171;
                cursor: pointer;
                box-shadow: 1px 1px 10px #80808030,
                    2px 2px 20px #ffffff53;
            }
        }


        /*-------------BTN-------------*/
        button {
            background-color: #2c2c2c;
            color: aliceblue;

            &:hover {
                box-shadow: 1px 1px 10px grey,
                    2px 2px 20px white;
                background-color: aliceblue;
                color: black;
            }

            /*light-mode*/
            .lm {
                display: inline;
            }

            /*dark-mode*/
            .dm {
                display: none;
                visibility: hidden;
            }
        }

        /*-------------/BTN-------------*/


    }

}

/* ------------------header para dispositivos movéis------------------ */
@media all and (max-width: 880px) {
    header{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 90%;
        gap: 2rem;

        nav ul li{
            height: auto;
        }
    }
}
/*----------/HEADER----------*/


/*----------MAIN----------*/
main {
    display: flex;
    justify-content: center;
    gap: 2rem;
    scroll-behavior: smooth;



    .intro {
        display: grid;
        padding: 3rem;

        h1 {
            font-size: 50px;
            color: var(--purple);

            span {
                color: #000000;
            }
        }

        p {
            width: 400px;
        }

        button {
            width: 120px;
            height: 40px;
            border: 1px solid;
            transition: .5s;
            background-color: #ffffff;
            box-shadow: 2px 2px;
            display: flex;
            overflow: hidden;



            &:hover {
                color: #ffffff;
                border: 1px solid #ffffff;
                box-shadow: 2px 2px 10px #c19fff,
                    2px 2px 5px #dfceff;

                cursor: pointer;

                div {
                    transform: translate(0px);
                    background-color: var(--purple);

                }

            }




            span {
                position: absolute;
                font-size: 20px;
                transform: translate(15px, 7px);
                font-weight: bold;
            }

            div {
                width: 100%;
                height: 40px;
                transform: translate(-120px);
                background-color: #ffffff;
                transition: 1s ease;
            }
        }
    }

    .animacao {
        width: 450px;
        height: 420px;
        overflow: hidden;

        img {
            width: 100px;
        }

        .circle {
            width: 350px;
            animation: circleMotion alternate-reverse infinite 15s;
        }

        .grade {
            width: 300px;
            transform: translate(100px, -250px);
            animation: gradeMotion infinite 17s;
        }

        .cursor {
            width: 50px;
            transform: translate(-130px, -100px);
            animation: cursorMotion infinite 10s;
        }

        .lupa {
            transform: translate(10px, -470px);
            animation: lupaMotion alternate-reverse infinite 15s;
        }


    }
}

/* ------------------main dark-mode------------------ */
.dark-mode main {

    .intro {
        display: grid;
        padding: 3rem;

        h1 {
            font-size: 50px;
            color: #8752e9;


            span {
                color: #ffffff;
                text-shadow: none;
            }
        }

        p {
            width: 400px;
            color: #ffffff;
        }

        button {
            width: 120px;
            height: 40px;
            border: 1px solid;
            transition: .5s;
            background-color: #7e44e8;
            box-shadow: 2px 2px;
            display: flex;
            overflow: hidden;



            &:hover {
                color: #ffffff;
                border: 1px solid #ffffff;
                box-shadow: 2px 2px 10px #c19fff,
                    2px 2px 5px #dfceff;

                cursor: pointer;

                div {
                    transform: translate(0px);
                    background-color: var(--purple);

                }

            }




            span {
                position: absolute;
                font-size: 20px;
                transform: translate(15px, 7px);
                font-weight: bold;
            }

            div {
                width: 100%;
                height: 40px;
                transform: translate(-120px);
                background-color: #ffffff;
                transition: 1s ease;
            }
        }
    }

}

/* ------------------main para dispositivos movéis------------------ */
@media all and (max-width: 880px) {
    main{
        display: flex;
        flex-direction: column;

        .intro{
            position: absolute;
            z-index: 20;
            display: grid;
            height: 300px;
            width: 100%;

            p{
                width: 70%;
            }
        }
    }

    .dark-mode main{
        .intro{
            background-color: #000000de;
            width: 100%;

            p{
                width: 70%;
            }
        }
    }
}

@keyframes cursorMotion {
    20% {
        transform: translate(1px, -80px);
    }

    30% {
        transform: translate(-50px);
    }

    50% {
        transform: scale(1.5);
    }
}

@keyframes lupaMotion {
    10% {
        transform: translate(40px, -400px) scale(1.3);
    }

    30% {
        transform: translate(-200px, -360px)
    }
}

@keyframes gradeMotion {
    20% {
        transform: translate(-40px, 0px);
    }

    30% {
        transform: translate(10px, 0px);
    }

    40% {
        transform: rotateZ(30deg);
    }
}

@keyframes circleMotion {
    20% {
        transform: translate(140px, 30px);
    }

    30% {
        transform: translate(-10px, 70px);
    }

    40% {
        transform: rotateZ(30deg);
    }
}

/*----------/MAIN----------*/



/*----------QuemSomos----------*/
.quemSomos {
    box-shadow: -1px -40px 50px #3a3a3a28;
    height: 100vh;
    padding: 3rem 3rem 0rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;


    h2 {
        color: #418031;
    }

    p {
        width: 80%;
    }

    .carrossel {
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        /* Slideshow container */
        .slideshow-container {
            max-width: 1080px;
            position: relative;
            left: 50%;
            transform: translate(-50%);
        }

        /* Hide the images by default */
        .mySlides {
            display: none;


        }

        /* Next & previous buttons */
        .prev,
        .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: 5%;
            padding: 10px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;


        }

        /* Position the "next button" to the right */
        .prev {
            left: 0;
        }

        .next {
            right: 0;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover,
        .next:hover {
            background-color: #000000cc;
        }


        .mySlides {
            .secimg {
                width: 100%;
                height: auto;
                padding-top: 2rem;
                background: linear-gradient(var(--purple), #cddea000);
                backdrop-filter: blur(10px);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2rem;

                img {
                    width: 100px;
                }

                p {
                    width: 80%;
                }
            }
        }

        /* Caption text */
        .text {
            color: #f2f2f2;
            font-size: 15px;
            padding: 8px 12px;
            position: absolute;
            bottom: 0px;
            width: 100%;
            text-align: center;

        }

        /* Number text (1/3 etc) */
        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }

        /* The dots/bullets/indicators */
        .dot {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #b7b7b775;
            border-radius: 0%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .active,
        .dot:hover {
            background-color: #717171;
        }

        /* Fading animation */
        .fade {
            animation-name: fade;
            animation-duration: 1.5s;
        }

    }


}

/* ------------------QuemSomos dark-mode------------------ */
.dark-mode .quemSomos {
    h2 {
        color: #8bd678;
    }

    p {
        width: 80%;
        color: white;
    }

    .active,
    .dot:hover {
        background-color: #d2d2d2;
    }

}

/* ------------------main para dispositivos movéis------------------ */
@media all and (max-width: 880px){
    .quemSomos{
        padding: 3rem 2px 0px 2px;
    }
}

/* carrossel animation */
@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/*----------/QuemSomos----------*/


/*----------Serviços----------*/
.servicos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0rem 3rem 3rem 3rem;

    h2 {
        transform: translateY(-30px);
    }


    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3rem;
        margin-top: 2rem;


        .card {
            width: 200px;
            height: 250px;
            box-shadow: 2px 2px 20px #0000007f;
            padding: 10px;
            transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            text-align: center;


            &:hover {
                transform: translateY(-10px);

                hr {
                    width: 80%;
                }

                button {
                    transform: translateY(50px);
                    opacity: 1;
                }
            }


            hr {
                width: 30%;
                height: 2px;
                background-color: #000000;
                transition: 1s cubic-bezier(0.215, 0.610, 0.355, 1);
            }

            p {
                padding: 2px;

                span {
                    font-size: 18px;
                    font-weight: bold;
                }
            }

            button {
                position: absolute;
                bottom: 0;
                opacity: 0;
                transition: 1s cubic-bezier(0.19, 1, 0.22, 1);

                font-size: 16px;
                width: 120px;
                height: 40px;
                overflow: hidden;

                display: flex;
                border: 1px solid;
                transition: .5s;
                background-color: #ffffff;
                box-shadow: 2px 2px;

                &:hover {
                    color: #ffffff;
                    border: 1px solid #ffffff;
                    box-shadow: 2px 2px 10px #c19fff,
                        2px 2px 5px #dfceff;

                    cursor: pointer;

                    div {
                        width: 100%;
                        height: 100%;
                        background-color: var(--purple);
                        transform: translate(0px);

                    }

                }

                div {
                    width: 100%;
                    height: 100%;
                    transition: 1s ease;
                    transform: translate(-100px);
                }

                span {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 18px;
                    font-weight: bold;
                }
            }


        }
    }
}

.dark-mode .servicos {
    h2 {
        color: white;

    }

    .card {
        color: white;

        &:hover {
            box-shadow: 2px 2px 10px #c19fff,
                    -2px 2px 5px #dfceff;
            hr {
                box-shadow: 2px 2px 10px #c19fff,
                    -2px 2px 5px #dfceff;
            }
        }

        hr {
            background-color: white;
        }
    }
}

/* ------------------serviços para dispositivos movéis------------------ */
@media all and (max-width: 880px){
    .servicos{

        .container{
            display: flex;
            flex-direction: column;
            gap: 5rem;

            .card{

                &:hover{
                    transform: translateY(0);

                    button{
                        transform: translateY(0);
                    }
                }

                button{
                    height: 80px;
                    position: relative;
                    opacity: 1;
                    z-index: 20;
                }
            }
        }
    }
}

/*----------/Serviços----------*/


/*----------Trabalhos----------*/
.trabalhos {
    margin-top: 3rem;
    padding: 3rem;
    background-color: #494949;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
    color: white;

    p {
        width: 60%;
    }

    hr{
        width: 80%;
    }


    .clientes {

        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 4rem;
        width: 100%;

        img {
            width: 100px;
            opacity: 40%;
            transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

            &:hover {
                opacity: 1;
                transform: scale(1.1);
                cursor: pointer;
            }
        }
    }
}

/* ------------------trabalhos para dispositivos movéis------------------ */
@media all and (max-width: 880px){
    .trabalhos{
        padding: 3rem 1px 3rem 1px;
    }
}
/*----------/Trabalhos----------*/


/*----------FOOTER----------*/
footer {
    background-color: #000000;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 3rem;
    padding: 3rem;



    img {
        width: 250px;
        opacity: 90%;
    }

    ul {
        list-style: none;
        display: grid;
        gap: 2rem;

        h4 {
            font-size: 25px;
        }
    }
}

/* ------------------footer para dispositivos movéis------------------ */
@media all and (max-width: 880px){
    footer{
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
}

/*----------/FOOTER----------*/