@charset "UTF-8";

/*configs gerais*/
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
/* // */

/*variaveis de cor*/
:root{
    --corFundoGeral: #282a29;
    --corFundoSecundaria: #1c1d1ce1;
    --Branco: white;
    --Tops: #8030C8;

}
/* // */

/*Fonts*/

@font-face {
    font-family: 'Orbitron';
    src: url(../Fonts/Orbitron/Orbitron-VariableFont_wght.ttf);
}

/* // */

/*animacoes*/
@keyframes btnorcamento{
    0%{transform: translateY(0);}
    50%{transform: translateY(-10px);}
    100%{transform: translateY(0px);}
}

/* // */

body{
    background-color: var(--corFundoGeral) !important;
}


/*Icone do whatsapp fixado*/
#whatsappFix{
    position: fixed;
    bottom: 0;
    right: 0;

    margin: 10px;

    width: 70px;

    z-index: 2;

    transition: .5s;
}

#whatsappFix:hover{
    bottom: 5px;
    right: 5px;
}
/*fim Icone do whatsapp fixado*/


/*Começo elementos do header*/
header{
    position: relative;

    background-image: linear-gradient(to top, var(--corFundoGeral) 8%, transparent);
}

video{
    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: -1;

    position: absolute;
}

#conteinerConteudoHeader{
    width: 80%;

    margin-top: 50px;
    margin-bottom: 50px;
}

#conteudosHeader{
    width: 100%;

    justify-content: space-between;
}

.frasesHeaderL{
    padding: 10px;
}

.frasesHeaderR{
    padding: 10px;
}

.h2Header{
    color: var(--Branco);

    font-weight: 700;
    font-size: 1.6em;
}

.pHeader{
    color: var(--Branco);
    
    font-weight: 200;
    font-size: 1.4em;
}

#orcamento{
    color: var(--Branco);
    background-color: var(--corFundoGeral);

    padding: 10px;

    border-radius: 5px;

    box-shadow: 1px 1px 8px var(--Branco);

    text-decoration: none;

    font-weight: 500;

    align-self: self-start;
}

#orcamento:hover{
    animation: btnorcamento infinite 3s;

    box-shadow: 1px 1px 12px var(--Branco);
}

/*fim dos elementos do header*/

/*inicio section swiper serviços*/

#servicos, #tops5{
    padding: 20px;

    border-bottom: 1px solid var(--Branco);
}

.card-wrapper{
    max-width: 1200px;

    padding: 10px 0px;

    overflow: hidden;
}

.card-list .card-item, .card-list-clientes .card-item-clientes{
    list-style-type: none;
}

.card-list .card-item .card-link{
    user-select: none;

    display: block;

    background-color: var(--corFundoSecundaria);

    padding: 5px;

    border-radius: 12px;
    border: 2px solid transparent;

    text-decoration: none;
    
    box-shadow: 0px 10px 10px rgba(0,0,0,0.05);

    transition: 0.2s ease;

    height: 500px;

    width: 300px;
}

.card-list .card-item .card-link:hover{
    border: 2px solid var(--Branco);
}

.card-list .card-item .card-link:active, .card-list-clientes .card-item-clientes .card-link-clientes:active{
    cursor: grabbing;
}

.card-list .card-link .card-image{
    width: 100%;
    height: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    border-radius: 10px;
}


.card-wrapper .swiper-slide-button, .card-wrapper-clientes .swiper-slide-button, .card-wrapper-tops .swiper-slide-button-tops{
    color: var(--Branco);
    background-color: black;

    width: 70px;
    height: 70px;

    border-radius: 50%;
    border: 2px solid var(--Branco);

    top: 30px;
    right: 30px;
}

.card-wrapper .swiper-slide-button:hover, .card-wrapper-clientes .swiper-slide-button:hover, .card-wrapper-tops .swiper-slide-button-tops:hover{
    box-shadow: 0px 1px 5px var(--Branco);
}
/*fim section swiper serviços*/

/*inicio section swiper clientes*/
#clientes{
    margin-top: 20px;
    padding-left: 30px;

    border-bottom: 1px solid var(--Branco);
}

.card-wrapper-clientes, .card-wrapper-tops{
    max-width: 1200px;

    padding: 20px 0px;

    overflow: hidden;
}

.card-list-clientes .card-item-clientes .card-link-clientes{
    user-select: none;

    display: block;
    
    text-decoration: none;

    transition: 0.2s ease;

    width: 200px;
    height: 200px;

    border-radius: 50%;

    background-size: cover;
}

/*Customização das imagens das capas de clientes*/

#ClienteDM{
    background-image: url(../IMAGENS/Clientes/ClienteDMFT.png);
}

#ClienteDM:hover{
    background-image: url(../IMAGENS/Clientes/ClienteDMFR.png);
}

/* // */

#ClienteGracie{
    background-image: url(../IMAGENS/Clientes/ClienteGracieBarraFT.png);
}

#ClienteGracie:hover{
    background-image: url(../IMAGENS/Clientes/ClienteGracieBarraFR.png);
}

/* // */

#ClienteSavassiFar{
    background-image: url(../IMAGENS/Clientes/ClienteSavassiFarFT.png);
}

#ClienteSavassiFar:hover{
    background-image: url(../IMAGENS/Clientes/ClienteSavassiFarFR.png);
}

/* // */

#ClienteSavassiNutri{
    background-image: url(../IMAGENS/Clientes/ClienteSavassiNutFT.png);
}

#ClienteSavassiNutri:hover{
    background-image: url(../IMAGENS/Clientes/ClienteSavassiNutFR.png);
}

/* // */

#ClienteZebu{
    background-image: url(../IMAGENS/Clientes/ClienteZebuFT.png);
}

#ClienteZebu:hover{
    background-image: url(../IMAGENS/Clientes/ClienteZebuFR.png);
}

/* // */

#ClienteLiga{
    background-image: url(../IMAGENS/Clientes/ClienteLigaGamesFT.png);
}

#ClienteLiga:hover{
    background-image: url(../IMAGENS/Clientes/ClienteLigaGamesFR.png);
}

/* // */

#ClienteCovenant{
    background-image: url(../IMAGENS/Clientes/ClienteCovenantFT.png);
}

#ClienteCovenant:hover{
    background-image: url(../IMAGENS/Clientes/ClienteCovenantFR.png);
}

/* // */

#ClienteSilvana{
    background-image: url(../IMAGENS/Clientes/ClienteSilvanaFT.png);
}

#ClienteSilvana:hover{
    background-image: url(../IMAGENS/Clientes/ClienteSilvanaFR.png);
}

/* fim capa clientes*/

/* inicio top 5 trabalhos*/

/*o id #tops5 está na mesma linha do id se serviços*/

.containerTops{
    position: relative;

    width: 300px;
}

.linkTops{
    font-size: 1em;

    color: var(--corFundoGeral);
}

.linkTops:hover{
    font-size: 1.2em;

    color: var(--Tops);
}

#h2Top1{
    left: 42px;
}

.h2Top3{
    font-family: 'Orbitron', sans-serif;
    font-size: 9em;

    position: absolute;

    z-index: 0;
    bottom: 0px;
    left:0px;

    -webkit-text-stroke: 2px var(--Tops);
    text-shadow: 0 0 2px var(--Tops), 0 0 2px var(--Tops);

    cursor: pointer;
    transition: .5s ease;
}

.h2Top3:hover{
    -webkit-text-stroke: 2px;
    text-shadow: none;
}

.linkImgTops{
    z-index: 1;
    width: 250px;
}

.imgTop3{
    z-index: 1;
    
    margin-left: 100px;

    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.836);

    border-radius: 10px;

    width: 200px;
}

.card-wrapper-tops .swiper-slide-button-tops{
    top: 50px;
}

/* fim top 5 trabalhos*/

/* inicio parte de outros serviços */
#outrosServicos{
    border-radius: 10px;

    margin-bottom: 20px;

    padding: 20px;
}

.cardOutrosServicos{
    background-color: var(--corFundoSecundaria);

    width: 400px;

    height: 500px;

    border-radius: 10px;

    position: relative;

    margin-top: 20px;

    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.836);

    border-bottom: 10px solid white;
}

.cardOutrosServicos:hover{
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.836);
}

.imgCardOutrosServicos{
    background-color: var(--Branco);

    border-radius: 50%;

    position: absolute;
    top: 3%;
    left: 50%;
    transform: translate(-50%,-50%);

    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.836);
}

.paragrafoOutrosServicos{
    font-size: 1.5em;
}
/* fim parte de outros serviços */

/*inicio section frase*/

#secFrase1{
    background-image: url(../IMAGENS/Fundo/FUNDO\ PONTILHADO.png);

    height: 400px;

    margin-top: 50px;
    margin-bottom: 20px;
}

.fundoFrase{
    background-color: var(--corFundoGeral);

    width: 600px;
    height: auto;
}

/*fim section frase*/

/* inicio section dos colaboradores*/

#sectionColaboradores{
    margin-bottom: 50px;
}

.cardColaboradores{
    width: 300px;

    margin: 0px 10px 20px 10px;
}

.imgColaboradores{
    width: 300px;

    border-radius: 10px;

    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.726);
}

.descricaoColaboradores{
    color: var(--Branco);

    font-size: 1.5em;
    font-weight: 300;

    text-align: center;

    border-bottom: 1px solid var(--Branco);
}

/* fim section dos colaboradores*/

/* inicio section de solicitação de orçamento*/

#containerSolicitacaoOrcamento{
    background-image: url(../IMAGENS/Fundo/bordaCircular.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    width: 400px;
    height: 200px;
}

#solicitacaoOrcamentoLink{
    font-size: 1.6em;
}

#solicitacaoOrcamentoLink:hover{
    font-size: 1.7em;

    text-shadow: 1px 1px 10px black;
}

/* fim section de solicitação de orçamento*/

/* inicio footer*/

footer{
    background-color: black;
}

footer h4{
    color: var(--Branco);
    font-size:0.8em;
    text-transform: uppercase;
}

footer ul{
    list-style: none;
}

footer ul li{
    float: right;
    padding: 0px 10px;
}

#tituloFooter{
    font-weight: 300;
}

/* fim footer*/

/* inicio direitos reservados*/

#direitosReservados{
    background-color: var(--Branco);
}

/*fim direitos reservados*/