@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Momo+Trust+Display&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Sanchez:ital@0;1&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Syriac+Western:wght@100..900&display=swap');



    /*Seletor Geral*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


    /*ROOT COM FONTES E CORES*/
:root {
    /*CORES*/
    --fundo: #040b21;
    --botao: #733EB7;
    --degradê1: #431766; /*Essa tambem é a cor de fundo dos cards do depoimento!*/
    --degrade2: #7844D2;/*Essa cor tambem sera usada como cor de fundo nos cards do case de sucesso!!*/
    --degrade3: #7241C8;
    --degradê4: #29144D;
    /*Agora é o degradê serviço*/
    --degradê-serviço1: #FFFFFF;
    --degradê-serviço2:#B109FF;
    --degradê-serviço3: #3F0073; /*Essa cor tambem sera usada como cor de fundo, na parte case de sucesso!!*/
    /*FONTES*/
    --menu: "Public Sans", sans-serif;
    --h1: "Momo Trust Display", sans-serif;
    --h2:  "Kanit", sans-serif;
    --paragrafo: "Sanchez", serif;
    --paragrafo-do-depoimento: "Vollkorn", serif;
    --botão-fonte: "Noto Sans Syriac Western", sans-serif;
}


/*BODY*/
body  {
    background-color: var(--fundo);
}


/*HEADER PARTE DO CABEÇALHO, LOGO LINKS ETC*/
header {
    width: 100%;
    padding: 5px 7%;
}


/*HEADER NAV*/
header nav {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}


/*HEADER NAV IMG*/
header nav img {
    width: 100px;
    height: 100px;
}


/*PARTE DOS LINKS UL*/
header nav ul {
    display: flex;
    list-style: none;
}


/*PARTE DOS LINKS LI*/
header nav ul li {
    margin: 10px;
}


/*PARTE DOS LINKS (A)*/
header nav ul li > a {
    color: white;
    font-family: var(--menu);
    text-decoration: none;
    transition: .3s;
}


/*PARTE DOS LINKS (A) HOVER*/
header nav ul li > a:hover {
    color: rgb(144, 144, 144);
    text-decoration: underline;
}


/*PARTE DO BOTÃO CONTATO*/
header nav > a {
    color: white;
    background-color: var(--botao);
    text-decoration: none;
    padding: 13px;
    border-radius: 21px;
    font-weight: 600;
    font-family: var(--botão-fonte);
    transition: .3s;
}


/*PARTE DO BOTÃO CONTATO HOVER*/
header nav > a:hover {
    color: grey;
    background-color: #421c75;
}


/*MENU HAMBURGUER*/
header nav #burguer-menu {
    cursor: pointer;
    color: white;
    display: none;
}


/*PARTE DO MENU MOBILE*/
header #itens {
    display: flex;
    align-items: end;
    flex-direction: column;
    display: none;
}


/*MENU MOBILE (UL)*/
header #itens ul {
    list-style: none;
}


/*MENU MOBILE (LI)*/
header #itens ul > li {
    padding: 20px;
}


/*MENU MOBILE (A)*/
header #itens ul > li > a {
    color: white;
    font-family: var(--menu);
    text-decoration: none;
}


/*MENU MOBILE (BOTÃO)*/
header #itens > ul > li .btn-contato {
    color: white;
    background-color: var(--botao);
    text-decoration: none;
    padding: 13px;
    border-radius: 21px;
    font-weight: 600;
    font-family: var(--botão-fonte);
    transition: .3s;
} 


/*MENU MOBILE (BOTÃO) HOVER*/
header #itens > ul > li .btn-contato:hover {
    color: grey;
    background-color: #421c75;
}


/*PARTE DO MAIN, (CORPO)*/
main {
    padding: 0;
}


/*PRIMEIRO SECTION*/   
main .primeiro-conteudo {
    background-image: linear-gradient(to right,  #7844D2, #7241C8, #431766, #29144D);
    display: flex;
    padding: 20px;
}


/*PARTE DA BREVE INTRODUÇÃO DO TEXTO*/
main .primeiro-conteudo .container-txt-botao {
    width: 50%;
}


/*TEXTO*/
main .primeiro-conteudo .container-txt-botao > p {
    line-height: 35px;
    color: white;
    font-family: var(--paragrafo);
    font-size: 1.5rem;
    margin: 60px 60px;
}


/*PARTE DO BOTÃO */
main .primeiro-conteudo .container-txt-botao > a {
    padding: 12px;
    background-color: white;
    color: black;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    font-family: var(--botão-fonte);
    transition: .3s;
    margin: 25%;
}


/*PARTE DO BOTÃO HOVER*/
main .primeiro-conteudo .container-txt-botao > a:hover {
    background-color: var(--degradê1);
    color: rgb(255, 255, 255);
}


/*PARTE DO PRIMEIRO CONTEUDO IMG*/
main .primeiro-conteudo .img {
    width: 40%;
    height: auto;
    padding: 10px;
}


/*IMAGEM*/
main .primeiro-conteudo .img > img {
    height: 550px;
}


/*PARTE SOBRE A EMPRESA*/
main .sobre {
    background-color: white;
}


/*PARTE DO TEXTO SOBRE A EMPRESA*/
main .sobre #container-txt {
    padding: 20px;
  
}


/*PARTE SOBRE A EMPRESA H1*/
main .sobre #container-txt > h1 {
    text-align: center;
    padding: 15px;
    font-family: var(--h1);
    color: rgb(0, 0, 0);
}


/*PARTE SOBRE A EMPRESA PARAGRAFO*/
main .sobre #container-txt > p {
    line-height: 35px;
    font-size: 1.3rem;
    color: rgb(0, 0, 0);
    font-family: var(--paragrafo);
    margin: 15px;
}


/*SPANS*/
main .sobre #container-txt > p > span {
    color: blue;
}


/*PARTE DOS SERVIÇOS*/
main .servicos {
    padding: 30px;
    background-image: linear-gradient(25deg, #a84ad7, #3F0073, #B109FF);
} 

/*SERVIÇOS (H1)*/
main .servicos h1 {
    text-align: center;
    padding: 20px;
    color: white;
    font-family: var(--h1);
}

/*PARTE DO CONTAINER*/
main .servicos .container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 90px;
}

/*PARTE DAS DIVS DOS (CARDS)*/
main .servicos .container .container-servicos {
    max-width: 360px;
    max-height: 460px;
    padding: 20px;
    border-radius: 10px;
    background-color: white;
    text-align: center;
    animation:  subir 0.8s ease forwards;
}

/*PARTE DO H2*/
main .servicos .container .container-servicos h2 {
    padding: 10px;
    font-family: var(--h2);
}

/*PARTE DO PARAGRAFO*/
main .servicos .container .container-servicos p {
    font-size: 20px;
    font-family: var(--paragrafo);
    margin-bottom: 40px;
}

/*PARTE DO BOTÃO SAIBA MAIS*/
main .servicos .container .container-servicos > a {
    background: linear-gradient(90deg, #7b2ff7, #f107a3);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
    font-family: var(--botão-fonte);
}



/*BOTÃO SAIBA MAIS HOVER*/
main .servicos .container .container-servicos > a:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(241, 7, 163, 0.5);
}


/*DEPOIMENTOS*/
main .container-depoimentos {
    background-color: #D9D9D9;
    padding: 10px;
    height: auto;
}


/*DEPOIMENTOS H1*/
main .container-depoimentos > h1 {
    font-family: var(--h1);
    padding: 5%;
    text-align: center;
}


/*DEPOIMENTOS ARTICLE*/
main .container-depoimentos > article {
    display: flex;
    height: auto;
    align-items: center;
    flex-wrap: wrap;
    gap: 0px 90px;
}


/*PARTE DOS CARDS DO DEPOIMENTO*/
main .container-depoimentos > article > .depoimentos {
    max-width: 320px;
    border-radius: 10px;
    padding: 20px;
    background-color: var(--degradê1);
    margin: 20px;
    text-align: center;
    transition: .3s ease-in-out;
    cursor: pointer;
    animation:  subir 0.8s ease forwards;
}


/*PARTE DOS CARDS DO DEPOIMENTO HOVER*/
main .container-depoimentos > article > .depoimentos:hover {
    padding: 30px;
}


/*DEPOIMENTO IMG*/
main .container-depoimentos > article > .depoimentos > img {
    width: 100px;
    border-radius: 50%;
}


/*PARTE DOS SPANS*/     
main .container-depoimentos > article > .depoimentos > span {
    color: rgb(203, 203, 0);
}


/*PARTE DO H3*/
main .container-depoimentos > article > .depoimentos > h3 {
    color: white;
    font-family: var(--h2);
    padding: 20px;  
}


/*PARTE DO PARAGRAFO DOS DEPOIMENTOS*/
main .container-depoimentos > article > .depoimentos > p {
    color: white;
    font-family: var(--paragrafo-do-depoimento);
}


/* PARTE DO ENDEREÇO CONTAINER */
main .container-endereco {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--degradê-serviço3);
}


/*ENDEREÇO ARTICLE*/
main .container-endereco  article {
    padding: 40px;
    color: white;
}


/*ENDEREÇO PARTE DO H1*/
main .container-endereco  article h1 {
    font-family: var(--h1);
    padding: 30px;
    text-align: center;
}


/*ENDEREÇO PARTE DA IMAGEM*/
main .container-endereco  article h1 > span {
    color: white;
    animation: pulsar 1.5s infinite ;
}


/*ENDEREÇO PARTE DO IFRAME*/
main .container-endereco  article iframe {
    width: 90vw;
    height: 90vh;
    border-radius: 10px;
}


/*PARTE DO FOOTER*/
footer {
    text-align: center;
    background-color: white;
    padding: 100px;
}


/*FOOTER CONTAINER*/
footer .icones {
    margin: 50px;
}


/*FOOTER H1*/
footer .icones h2 {
    font-family: var(--h2);
    padding: 10px;
}


/*FOOTER IMG*/
footer .icones > a > img {
    padding: 10px;
    
}


/*FOOTER PARAGRAFO*/
footer > p {
    font-family: var(--paragrafo);
}


/*MEDIA QUERY VERSÃO PARA CELULAR E TELAS MENORES*/
 @media screen and (max-width: 798px){

    
    header {
        padding: 5px 0%;
    }

    /*HEADER NAV*/
    header nav ul {
        display: none;
    }

    /*HEADER NAV BOTÃO*/
    header nav a {
        display: none;
    }

    /*MENU HAMBURGUER*/
    header nav #burguer-menu {
        display: block;
    }

   
      /*PRIMEIRO SECTION*/   
    main .primeiro-conteudo {
    background-image: linear-gradient(to right,  #7844D2, #7241C8, #431766, #29144D);
    display: block;
    
    } 

    /*PARTE DA BREVE INTRODUÇÃO DO TEXTO*/
    main .primeiro-conteudo .container-txt-botao {
    width: 100%;
    }

    /*TEXTO*/
    main .primeiro-conteudo .container-txt-botao > p {
    width: 100%;
    line-height: 36px;
    color: white;
    font-family: var(--paragrafo);
    font-size: 1.5rem;
    margin: 50px auto;
    }

    /*PARTE DO BOTÃO */
    main .primeiro-conteudo .container-txt-botao > a {
    width: 100%;
    height: 100%;
    padding: 10px;
    margin: 0px;
    }


    /*PARTE DO PRIMEIRO CONTEUDO IMG*/
    main .primeiro-conteudo .img {
    width: 0%;
    }

    /*IMAGEM*/
    main .primeiro-conteudo .img > img {
    display: none;
    }

    /*ENDEREÇO ARTICLE*/
    main .container-endereco  article {
    padding: 10px;
    color: white;
    }

    /*ENDEREÇO PARTE DO IFRAME*/
    main .container-endereco  article iframe {
    width: 96vw;
    height: 40vh;
    }

    /*PARTE DOS ICONES*/
    footer .icones > a > img {
    padding: 5px;
    
    }
 }


 /*KEY FRAMES*/
 @keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }

    }

    /*SELECIONADOS PARA TER A ANIMAÇÃO*/
    section, header, footer, main {
  animation: aparecer 0.8s ease forwards;
}


/*PARTE DE KEY FRAMES DO ICONE*/
@keyframes pulsar {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.7; }
}


/*PARTE DOS CARDS*/
@keyframes subir {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}