*{
    color: #ffff;
    font-family: var(--font-stack);
}

body{
    background-color: var(--cor_primaria);
}


.navbar{
    height: 90px;
}
.nav-link{
    color: white;
}
.nav-link:hover{
    color: var(--cor-secundaria) !important;
    cursor: pointer;
}
.logo{
    width: 190px;
}
.logo-min{
    max-width: 100px;
}


.container-main{
    height: 65vh;
    align-items: center;
}

.title-primari{
    font-size: 70px;
    max-width: 325px;
}
.text-title{
    margin-bottom: -15px;
    font-size: 28px;
}


.button-main-container {
    position: relative;
    width: 260px;
    height: 60px;
    color: #fff;
    background-image: linear-gradient(to right, var(--cor-secundaria), var(--cor-terciaria));
    display: flex;
    justify-content: center;
    align-items: center;
     border-radius: 10px;
    border: none;


}


.button-main-container::before, .button-main-container::after{
    content: '';
    position: absolute;
    z-index: -1;
    width: calc(100% + 5px);
    height: calc(100% + 5px);
    background-image: linear-gradient(45deg,  var(--cor-terciaria),var(--cor-secundaria),var(--cor-terciaria));
    border-radius: 10px;
    background-size: 300%;
    animation: spin 3s infinite linear;
}

.button-main-container::after{
    filter: blur(50px);
}
.presentation{
    max-width: 650px;
    letter-spacing: 1px;
    font-family: var(--font-code);
    background-color: rgba(0, 0, 0, 0.356);
}
.presentation::after {
  content: "|";
  animation: blink-caret 1s infinite;
}


.img-personal{
    position: relative;
    max-width: 300px;
    max-height: 400px;
    border-radius: 10px;
    z-index: 2;
}
.img-personal-container{
    position: relative;
    min-width: 340px;
}
.border-img-personal{
    width: 300px;
    height: 300px;
    border: 7px solid var(--cor-secundaria);
    position: absolute;
    left: 30px;
    top: 30px;
    border-radius: 10px;
}
.about-me-container{
    max-width: 650px;
}

.list-portfolios{
    text-decoration: none;
    list-style: none;
}
.line-project{
    display: none;
}
.container-project{
    height: calc(100% + 30px);
    margin-bottom: 100px;

}
.text-project{
    max-width: 580px;
}
.content-img-project{
    max-width: 400px;
}

.img-projeto{
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 10px;
    z-index: 2;
    object-fit: cover;

}
.img-project-container{
    position: relative;
    min-width: 340px;
}
.border-img-project{
    width: 300px;
    height: 300px;
    border: 7px solid var(--cor-secundaria);
    position: absolute;
    left: -30px;
    top: 30px;
    border-radius: 10px;
}
.card-services{
    position: relative;
    width: 350px;
    height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: none;
}
.card-services::before, .card-services::after{
    content: '';
    position: absolute;
    z-index: -1;
    width: calc(100% + 5px);
    height: calc(100% + 5px);
    background-image: linear-gradient(90deg,  var(--cor-terciaria),var(--cor-secundaria),var(--cor-terciaria));
    border-radius: 10px;
    background-size: 300%;
    animation: spin2 5s infinite linear;
}

.card-services::after{
    filter: blur(30px);
}

.img-experience{
    max-width: 40px;
    height: 50px;
}

footer{
    background-image: linear-gradient(to right,  var(--cor-terciaria-transparent),var(--cor-secundaria-transparent));
    border-radius: 120px 120px 0px 0px;
}

.container-contact{
    max-width: 500px;
}
.icons-contact{
    display: inline-flex;
    width: 45px;
    background-image: linear-gradient(to right, var(--cor-secundaria), var(--cor-terciaria));
    padding: 10px;
    border-radius: 5px;
}
.icons-sociais{
    display: inline-flex;
    width: 45px;
    background-image: linear-gradient(to right, var(--cor-secundaria), var(--cor-terciaria));
    padding: 10px;
    border-radius: 5px;
}
.icons-sociais:hover{
    cursor: pointer;
    transition: ease-in-out 0.2s;
    border: 1px solid var(--cor-secundaria);
}
.img-contact{
    max-width: 100%;
}

.form-contato{
    padding: 25px;
    border-radius: 10px;
    background-image: linear-gradient(144deg,var(--cor-secundaria-transparent), var(--cor-terciaria-transparent));
}
.form-input{
    background-color: var(--cor_primaria);
    border: none;
    color: #ffff;
    padding: 7px;
    border-radius: 5px;
}



@media (max-width:425px) {
    .title-primari{
        font-size: 32px;
    }
    .text-title{
        margin-bottom: -2px;
    }
    .button-main-container{
        width: 180px;
        margin-top: 20px;
        z-index: 100;
    }
    .presentation{
        text-align: start !important;
    }
    .about-me-container{
        margin-top: 55px;
    }
    .container-project{
        margin-bottom:30px;
    }
    .text-project{
        margin-top: 40px;
    }
    .img-project-container{
        margin-top: 20px;
    }
    .line-project{
        display: block;
        margin: 40px 0px;
    }
    .card-services{
        height:270px;
    }
    .icon-experience{
        margin-top: 20px;
    }
    footer{
        border-radius: 50px 50px 0px 0px;
    }
    .navbar-toggler-icon{
        filter: brightness(1000);
    }
    .navbar-collapse{
        border-radius: 0px 0px 10px 10px;
        z-index: 100000;
        background-color: var(--cor_primaria);
        border: 1px solid var(--cor-dark) ;
        border-top: none;
        width: 100%;
        height: 45vh;
        position: relative;
        padding: 25px;
    }
}
.whats-float{
    width: 60px;
    height: 60px;
    background-color: #2BF156;
    padding: 10px;
    border-radius: 100%;
    position: fixed;
    right: 20px;
    top: 90%;
}
.ico-whatsapp{
    width: 100%;
    height: 100%;
}



/* ================================================= */
/* PAGINA DETALHE DO PEOJETO
/* ================================================= */

.img-principal{
    max-width: 500px;
}

/* =============================================================== */

.img-principal-sobre{
    max-width: 350px;
}