/*Animação suave de transição entre seções*/
html{
    scroll-behavior: smooth;
}

/*Alterando tamanho da barra de rolagem*/
::-webkit-scrollbar {
    width: 9px;
}

/*Cor padrão da barra de rolagem*/
::-webkit-scrollbar-thumb {
    background: #a18afd;
    border-radius: 10px;
}

/*Cor ao usuário passar o mouse por cima*/
::-webkit-scrollbar-thumb:hover {
    background: #7252f4;
}       

/*Geral*/
body, ul, li, p{
    margin: 0px;
    padding: 0px;
    list-style: none; /*Retira a marcação de lista*/
    background-color: #FDFDFF;
    font-family: 'Poppins', Arial, Verdana, sans-serif; /*Seleciona a fonte*/
}

/*Links*/
a{
    text-decoration: none; /*Retira o sublinhado*/
    color: black;
    font-weight: 500;
    font-size: 16px;
}

/*Header*/
header{
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5.4px); /*Filtro que determina a intensidade do blur*/
    -webkit-backdrop-filter: blur(5.4px);
    box-shadow: 0px -5px 30px #1d0e6213;
    position: fixed; /*Deixa o elemento fixo na tela*/
    width: 100%;
    height: 7em;
    z-index: 1000; /*Garante que o elemento sempre vai estar na frente de tudo*/
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

/*Logos da empresa*/
header .logo{
    display: flex;
    align-items: center;
}

header .logo img{
    margin: 4px;
}

header #title{
    width: 10em;
}

/*Ícone da Home*/
header #icon{
    width: 2.25em;
}

header #home-icon{
    width: 1.5em;
}

#home-icon:hover{
    content: url('homepagehover.png'); /*Substitui a imagem presente no site, por essa*/
    transition: 400ms;
    opacity: 0.5;
}

#home-icon:not(:hover){
    transition: 1000ms;
    opacity: 1;
}

header .menu{
    display: flex;
    background-color: rgba(0, 0, 255, 0);
}

header .menu li{
    margin-left: 25px;   
    background-color: rgba(0, 0, 255, 0);
}

header .menu li a{
    display: block;
    padding: 10px;
    transition-property: all;
    transition-duration: .2s;
}

header .menu li a:hover{
    text-shadow: 0px -5px 20px #1d0e6213; /*Sombra no texto*/
    color: #7252f4;
    transition: 400ms;
}

header .menu li a:not(:hover){
    text-shadow: 0px -5px 20px #1d0e6213; /*Sombra no texto*/
    color: #000000;
    transition: 400ms;
}

@media (min-width: 311px)and (max-width: 509px){
    header .logo img{
        padding-top: .8em;
    }
    header .menu li a{
        padding: 4px;
    }
    header .menu li{
        margin-left: 5px;   
        background-color: rgba(0, 0, 255, 0);
    }
    a{
        font-size: 12px;
    }
}

@media (max-width: 509px){
    header .logo img{
        padding-top: .8em;
    }
    header .menu li a{
        padding: 15px;
    }
    header .menu li{
        margin-left: 5px;   
        background-color: rgba(0, 0, 255, 0);
    }
    a{
    font-size: 14px;
    }
}

@media (min-width: 510px) and (max-width: 968px){
    header .logo img{
        padding-top: .8em;
    }
    header .menu li a{
        padding: 4px;
    }
    
}

/*Home*/
#Home{
    width: 100%;
    height: 140vh; /*Unidade relativa ao height, altura*/
    display: flex;
    justify-content: center;
    align-items: center;
}

/*Container com o vídeo dentro*/
#Home .container{
    width: 85%;
    height: 80%;
    border-radius: 2em;
    box-shadow: 0px -5px 20px #1d0e6213;
    display: flex;
    flex-direction: column; /*Dispõe os containeres em coluna*/
    justify-content: center; /*Centraliza*/
    overflow: hidden; /*Faz com que a barra de rolagem suma*/
    position: relative;
    margin-top: 4em;
}

#Home .container:hover{
    transform: translateY(-1%); /*Ao passar o mouse, eleva 1% o elemento*/
    transition: 400ms; /*Tempo de transição*/
}

#Home .container:not(:hover){
    transition: 400ms; /*Tempo de transição*/
}


/*Vídeo*/
#Home .container video{
    transform: scale(1);
    filter: blur(3px); /*Diminuindo a transparência do vídeo*/
    overflow: hidden;
    width: 100%;
    height: auto; /*Torna a altura automática, se adequando conforme o tamanho dos elementos*/
}

#Home .container .container-elements{
    position: absolute;
    padding: 5vw; /*Unidade relativa ao width, largura*/
}

/*Título*/
#Home .container .container-elements > h3{
    font-size: 1.5vw;
    font-weight: 500; /*Negrito*/
    position: absolute;
    color: #FDFDFF;
    letter-spacing: 1px; /*Espaço entre cada letra*/
    line-height: 1.25em;
}

/*Título principal*/
#Home .container .container-elements h1{
    font-size: 4.1vw;
    width: 12em;
    height: 2em;
    font-weight: 500;
    color: #FDFDFF;
    letter-spacing: -1px;
    line-height: 1.25em;
}

/*Botão de contato*/
#Home .container .container-elements #call-button{
    background-color: #7252f4;
    box-shadow: 0px -5px 20px #1d0e6213;
    width: 15vw;
    height: 9vh;
    border-radius: .5em;
    border: 0; /*Retira a borda*/
    color: white;
    font-size: 1.7vw;
    font-weight: 600;
    letter-spacing: 1px;
    transition-property: all;
    transition-duration: .5s; /*Define o tempo de duração da transição*/
}

#Home .container .container-elements #call-button:hover{
    cursor: pointer; /*Adiciona o icone de mãozinha para o cursor*/
    background-color: #6146cf;
    width: 15.2vw;
}

#Home .container .container-elements #call-button:not(:hover){
    background-color: #7252f4;
}

/*Define a responsividade dependendo do tamanho de tela*/
@media (max-width: 509px) {
    #Home {
        width: 100%;
        height: 55vh;
    }

    #Home .container{
        margin-top: 7em;
        width: 85%;
        height: 65%;
    }
    
    #Home .container .container-elements {
        padding: 3vw;
    }

    #Home .container .container-elements > h3 {
        font-size: 2.5vw;
    }

    #Home .container .container-elements h1 {
        font-size: 7vw;
    }

    #Home .container .container-elements #call-button {
        width: 24vw;
        height: 4vh;
        font-size: 2.5vw;
    }

    #Home .container .container-elements #call-button:hover{
        cursor: pointer;
        background-color: #6146cf;
        width: 24.5vw;
    }
}

@media (min-width: 510px) and (max-width: 767px) {
    #Home {
        width: 100%;
        height: 75vh;
    }

    #Home .container{
        margin-top: 7em;
        width: 85%;
        height: 65%;
    }
    
    #Home .container .container-elements {
        padding: 3vw;
    }

    #Home .container .container-elements > h3 {
        font-size: 2.5vw;
    }

    #Home .container .container-elements h1 {
        font-size: 7vw;
    }

    #Home .container .container-elements #call-button {
        width: 22vw;
        height: 6vh;
        font-size: 2.5vw;
    }

    #Home .container .container-elements #call-button:hover{
        cursor: pointer;
        background-color: #6146cf;
        width: 22.5vw;
    }
}

@media (min-width: 768px) and (max-width: 968px){
    #Home {
        width: 100%;
        height: 110vh;
    }

    #Home .container{
        margin-top: 7em;
        width: 85%;
        height: 75%;
    }
    
    #Home .container .container-elements {
        padding: 3vw;
    }

    #Home .container .container-elements > h3 {
        font-size: 2vw;
    }

    #Home .container .container-elements h1 {
        font-size: 6vw;
    }

    #Home .container .container-elements #call-button {
        width: 22vw;
        height: 8vh;
        font-size: 2.5vw;
    }

    #Home .container .container-elements #call-button:hover{
        cursor: pointer;
        background-color: #6146cf;
        width: 22.5vw;
    }
}


/*Serviços*/
#Servicos{
    width: 100%;
    height: 50em;
    background: rgb(114,82,244);
    background: linear-gradient(130deg, rgba(114,82,244,1) 54%, rgba(97,70,207,1) 100%);
}

#services:hover{
    transform: translateY(-1%);
    transition: 400ms;
}

#services:not(:hover){
    transition: 400ms;
}

/*Título centralizado*/
#Servicos h2{
    display: flex;
    justify-content: center;
    padding-top: 2em;
    font-size: 2em; /*Tamanho de fonte*/
    color: #FDFDFF;
}

#Servicos h2 span{
    color: #A3FDA1
}

/*Cards*/
#Servicos .containers {
    display: flex;
    justify-content: center;
    padding-left: 12.5%;
    padding-right: 12.5%;
    margin: 4em auto;
    gap: 4em; /*Espaçamento entre um e outro contâiner*/
}

/*Conteúdo dos cards*/
#Servicos .containers #services{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /*Dispõe os elementos em linhas*/
    gap: 20px;
    background-color: #FDFDFF;
    padding: 1.5em;
    border-radius: 2em;
    box-shadow: 0px -5px 20px #1d0e624b;
}

/*Imagens acima dos textos*/
#Servicos .containers #services > img{
    width: 4em;
}

/*Título*/
#Servicos .containers #services > h3{
    width: 9em;
    font-size: 25px;
}

#Servicos .containers #services > h3 span{
    color: #7252f4;
}

/*Texto*/
#Servicos .containers #services > p{
    background-color: #ffffff00;
    font-size: 20px;
    text-align: justify; /*Justifica o texto*/
    width: 15em;
    position: relative;
    bottom: 1.5em;
}

@media (max-width: 509px) {
    #Servicos {
        height: auto;
        padding-bottom: 1em;
    }

    #Servicos h2 {
        font-size: 1.5em;
    }

    #Servicos .containers {
        width: 70%;
        padding-left: 5%;
        padding-right: 5%;
        gap: 5em;
        flex-direction: column;
    }

    #Servicos .containers #services > h3 {
        width: auto;
        font-size: 20px;
    }

    #Servicos .containers #services > p {
        width: auto;
        font-size: 16px;
        padding-top: 1em;
    }
    #Servicos .containers #services > img{
        width: 4em;
        padding-top: 1em;
    }
}

@media (min-width: 510px) and (max-width: 767px) {
    #Servicos {
        height: auto;
        padding-bottom: 1em;
    }

    #Servicos h2 {
        font-size: 2em;
    }

    #Servicos .containers {
        width: 70%;
        padding-left: 5%;
        padding-right: 5%;
        gap: 5em;
        flex-direction: column;
    }

    #Servicos .containers #services > h3 {
        width: auto;
        font-size: 20px;
    }

    #Servicos .containers #services > p {
        width: auto;
        font-size: 16px;
        padding-top: 1em;
    }
}

@media (min-width: 768px) and (max-width: 1124px){
    #Servicos {
        height: 76em;
        padding-bottom: 1em;
    }
    
    #Servicos h2 {
        font-size: 22px;
    }

    #Servicos .containers {
        width: 70%;
        height: 1em;
        padding-left: 5%;
        padding-right: 5%;
        gap: 4em;
        display: flex;
        flex-wrap: wrap;
    }

    #Servicos .containers #services > img {
        width: 3em;
    }

    #Servicos .containers #services > h3 {
        font-size: 18px;
    }

    #Servicos .containers #services > p {
        font-size: 16px;
        padding-top: 3em;
    }
}


/*Sobre*/
#Sobre{
    width: 100%;
    height: auto;
    padding-top: 5em;
}

/*Contâiner com a imagem e os textos*/
#Sobre .asides{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly; /*Dispõe os elementos de forma espaçada igualmente e sem tocar nas bordas*/
    padding-left: 8%;
    padding-right: 8%;
}

/*Título*/
#Sobre .asides .content h2{
    width: 90%;
    margin: 0 auto; 
    margin-bottom: 1em;
}

#Sobre .asides .content h2 span{
    color: #7252f4; /*Cor da fonte*/
}

/*Texto*/
#Sobre .asides .content p{
    background-color: #ffffff00;
    text-align: justify;
    width: 80%;
    margin: 0 auto
}

/*Linha vertical dividindo o texto da imagem*/
#Sobre .asides hr{
    width: 10%;
    height: .05em;
    transform: rotate(90deg); /*Rotacionando a linha originalmente horizontal para vertical*/
    background-color: #7252f4;
}

/*Imagem à direita do texto*/
#Sobre .asides .image img{
    width: 31em;
}

#Sobre .asides .image img:hover{
    transform: translateY(-1%);
    transition: 400ms;
}

#Sobre .asides .image img:not(:hover){
    transition: 400ms;
}

@media (max-width: 767px) {
    #Sobre{
        padding-bottom: 1em;
    }

    #Sobre .asides .content h2 {
        width: 90%;
        text-align: center;
    }

    #Sobre .asides .content p {
        width: 90%;
        font-size: 1.2rem;
    }

    #Sobre .asides .image img {
        width: 25em;
    }

    #Sobre .asides hr{
        transform: rotate(0); /*Retornando ao original de uma hr, que é uma linha horizontal*/
        margin-top: 2.5em;
        width: 10%;
    }
}

@media (min-width: 768px) and (max-width: 1223px){
    #Sobre{
        padding-bottom: 1em;
    }

    #Sobre .asides .content h2 {
        width: 90%;
    }

    #Sobre .asides .content p {
        width: 90%;
        font-size: 1.2rem;
    }

    #Sobre .asides .image img {
        width: 30em;
        max-width: 35em;
    }

    #Sobre .asides hr{
        transform: rotate(0);
        margin-top: 2.5em;
        width: 20%;
    }
}

@media (min-width: 1224px){
    #Sobre{
        padding-bottom: 1em;
    }

    #Sobre .asides {
        flex-direction: row; /*Dispõe os elementos em linhas*/
    }

    #Sobre .asides .content h2 {
        font-size: 27px;
        width: 20em;
    }

    #Sobre .asides .content p {
        font-size: 20px;
        width: 26.75em;
    }

    #Sobre .asides .image img {
        width: 31em;
    }
}


/*Equipe*/
#Equipe {
    text-align: center;
    padding: 20px;
    overflow: hidden;
}

/*Configuração das fotos*/
.pictures {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 100%; /*Limita o tamanho para não exceder o tamanho da tela*/
}

/*Cards*/
.equipe-container {
    flex: 1 1 30%; /*Disposição dos elementos*/
    max-width: 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.equipe-container img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.equipe-container img:hover{
    transform: translateY(-1%);
    transition: 400ms;
}

.equipe-container img:not(:hover){
    transition: 400ms;
}


@media (max-width: 1200px) {
    .equipe-container {
        flex: 1 1 45%;
        max-width: 45%;
    }
}

@media (max-width: 800px) {
    .equipe-container {
        flex: 1 1 80%;
        max-width: 80%;
    }
}

@media (max-width: 500px) {
    .equipe-container {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/*Título*/
#Equipe h2 {
    font-size: 2rem; 
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0 auto;
    margin-bottom: 2em;
}

#Equipe h2 span{
    color: #7252f4;
}

#Equipe .pictures{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /*Espaçamento igual entre os elementos*/
}

#Equipe .pictures .equipe-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*Nome do integrante*/
#Equipe .pictures .equipe-container h3 span{
    color: #7252f4;
}

/*Função na empresa*/
#Equipe .pictures .equipe-container h4{
    position: absolute;
    margin-top: 19em;
}

#Equipe .pictures .equipe-container img{
    width: 16em;
    border-radius: 2em;
    box-shadow: 0px 9px 30px #1d0e621f;
}

@media (max-width: 1200px) {
    #Equipe h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 800px) {
    #Equipe h2 {
        font-size: 1.7rem;
    }
}

@media (max-width: 500px) {
    #Equipe h2 {
        font-size: 1.6rem;
    }
}


/*Clientes*/
#Clientes{
    width: 100%;
    height: 36em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*Título*/
#Clientes h2{
    width: 100%;
    padding-top: 2em;
    padding-right: 0em;
    margin-bottom: 3em;
    text-align: center; /*Centraliza o texto*/
}

#Clientes h2 span{
    color: #7252f4;
}

/*Cards*/
#Clientes .client-containers{
    display: flex;
    flex-wrap: wrap;
    gap: 5em;
    justify-content: center;
}

/*Health Treats*/
#Clientes .client-containers .client-1{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #93B6EE;
    width: 35em;
    height: 20em;
    border-radius: 2em;
    box-shadow: 0px 9px 20px #1d0e6241; /*Sombra do contâiner*/
}

/*Arriba*/
#Clientes .client-containers .client-2{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9e8cc;
    width: 35em;
    height: 20em;
    border-radius: 2em;
    box-shadow: 0px 9px 20px #1d0e6241;
}

/*Manipulando a animação das classes de forma conjunta*/
.client-containers .client-1:hover,
.client-containers .client-2:hover{
    transform: translateY(-1%);
    transition: 400ms;
}

.client-containers .client-1:not(:hover),
.client-containers .client-2:not(:hover){
    transition: 400ms;
}

@media (max-width: 767px) {
    #Clientes{
        height: 40em;
    }

    #Clientes h2 {
        width: 80%;
        padding-top: 0em;
    }
    
    #Clientes .client-containers {
        gap: 4em;
    }

    #Clientes .client-containers .client-1 img{
        width: 50%;
        height: 6em;
    }

    #Clientes .client-containers .client-2 img{
        width: 50%;
        height: 10em;
    }

    #Clientes .client-containers .client-1,
    #Clientes .client-containers .client-2{
        width: 80%;
        height: 17em;
    }

}

@media (min-width: 768px) and (max-width: 1224px){
    #Clientes{
        height: 40em;
    }
          
    
    #Clientes h2 {
        width: 60%;
        padding-top: 0em;
    }

    #Clientes .client-containers {
        gap: 4em;
    }

    #Clientes .client-containers .client-1,
    #Clientes .client-containers .client-2{
        width: 80%;
    }

    #Clientes .client-containers .client-1 img{
        width: 45%;
        height: 8em;
    }

    #Clientes .client-containers .client-2 img{
        width: 50%;
        height: 15em;
    }
}

/*Local*/
#Local {
    width: 100%;
    height: 46em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 5em;
}

/*Título*/
#Local h2 {
    font-size: 27px;
}

#Local h2 span {
    color: #7252f4;
}

/*Texto*/
#Local p {
    background-color: #ffffff00;
    font-size: 20px;
    text-align: center;
    width: 28em;
    padding-top: 1em;
    position: relative;
    bottom: 1.5em;
}

/*Mapa Google*/
#Local iframe{
    width: 80%;
    border-radius: 2em;
    box-shadow: 0px 9px 20px #1d0e6241;
}

/*Animação do mapa*/
#Local iframe:hover{
    transform: translateY(-1%);
    transition: 400ms; 
}

/*Animação do mapa*/
#Local iframe:not(:hover){
    transition: 400ms; 
}

@media (max-width: 767px) {
    #Local {
        height: auto;
        padding-bottom: 4em;
        padding-top: 16em;
    }

    #Local h2 {
        font-size: 24px;
    }

    #Local p {
        width: 90%;
        font-size: 18px;
    }
}

@media (min-width: 768px) and (max-width: 1224px){
    #Local {
        height: auto;
        padding-bottom: 4em;
        padding-top: 18em;
    }

    #Local h2 {
        font-size: 24px;
    }

    #Local p {
        width: 90%;
        font-size: 18px;
    }
}

/*Footer*/
footer {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px -10px 20px #1d0e6213;
    padding-top: 2em;
}

/*Contâiner*/
footer .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*Texto de copyright*/
footer .info .brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 0;
}

/*Logo Catlopers*/
footer .info .brand #logotipo {
    width: 100%;
    max-width: 20em;
}

/*Logo ponto e vírgula*/
footer .info .brand #logomarca {
    padding-top: 1.5em;
    padding-bottom: 1em;
    width: 100%;
    max-width: 4em;
}

/*Linha acima dos ícones*/
footer hr {
    background-color: #131414;
    width: 80%;
    margin:auto;
    max-width: 50em;
    margin-top: 1.5em;
    height: .07em;
}

/*Espaçamento entre a logo e os ícones*/
footer .redes {
    padding-top: 2em;
}

/*Contâiner dos ícones*/
footer .redes .menu {
    display: flex;
    justify-content: center;
}

/*Ícones*/
footer .redes .menu img {
    width: 100%;
    max-width: 4em; /*Limita o tamanho do elemento*/
    padding-right: .5em;
    padding-left: .5em;
    padding-bottom: 1em;
}

footer .redes .menu img:hover{
    transform: translateY(-1%);
    transition: 400ms;
}

footer .redes .menu img:not(:hover){
    transition: 400ms;
}

@media (min-width: 800px) {
    footer .redes .menu img {
        width: 100%;
        max-width: 4em;
        padding-right: 1em;
        padding-left: 1em;
        padding-bottom: 1em;
    }
    
    footer .info {
        flex-direction: row;
    }

    footer .info .brand {
        flex-direction: row;
    }
}