* {
    font-family: "Manrope"; /* Definir fonte global*/
    font-style: normal;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 16px;
    margin: 0 auto;  /* Margin 0 para a pagina toda*/
}

body {
    overflow-x: hidden; /* Ocultando barra horizontal melhorando a UX */
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100%;
}


/*   -----------  HEADER ------------ */

.header {
    display: flex; 
    justify-content: space-between;  /* Para espaçamento igual entre os itens */
    align-items: center; 
    width: 100vw; /* Largura total para o cabeçalho */
    z-index: 1;
    margin: 20px 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #393a3a1f;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.082); 
}

.header .logo{
    margin-left: 24%;    /* Ajustando posição da logo com margin*/
}

.header .logo > img {
    height: 30px;   
}

.header .menu{
    display: flex;
    text-align: center;
    justify-content: center;
    width: 100%;
}

.header .menu a {
    color: grey;
    text-decoration: none;
    margin: 0 15px;/* Espaçamento entre os links */
}

.header .menu a:hover{
    color: var(--fonte_azul);
}

.header .cta {
    background-color: var(--cor_botao);
    color: #fff;
    border: none;
    width: 550px;
    padding: 10px 35px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 25%; /* Ajustando posição do botao cta com margin*/
}

.mobile-menu-icon{
    display: none; /* Ocultando menu mobile no desktop */
    margin-right: 5%;
}

.mobile-menu-icon img{
    height: 35px;
}

.mobile-menu-icon button {
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.mobile-menu{ /* Ocultando menu mobile no desktop */
    display: none;
    padding-top: 10px;
}

@media (max-width: 768px) { /* Ativando propriedades do menu mobile com o @Media query*/

    .header{ /* Alterando propriedades do header para otimizar UX mobile */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .header .logo > img {
        height: 30px;
    }
    .header .logo{
        display: flex;
        align-items: center;
        margin-left: 5%;   
    }

    .header .cta{ /* Ocultando a exibição dos elementos desktop */
        display: none;
    }
    
    .header .menu {
        display: none;
    }

    .mobile-menu-icon{
        display: block;
        margin-top: -32px;
    }

    .mobile-menu a{
        display: block;
        padding-top: 7px;
        color: grey;
        text-decoration: none;        
    }

    .mobile-menu a:hover{
        color: var(--fonte_azul); 
    }

    .mobile-menu .cta{
        display: block;
        width: auto;
        margin: 0px;
    }

    .mobile-cta{
        padding-top: 20px;
    }

    .mobile-menu .mobile-cta .cta{
        margin: 0;
    }

    .open{ /* Propriedade que possibilita a utilização do menu hamburguer */
        display: block;
    }
}

/* ------------- CONTENT ------------- */

main {
    flex: 1;
    margin: 0 5vw;     /* Centralizar conteudo do site */
}

.banner{
    display: flex;
    justify-content: center;
    background-image: url('/src/images/waves.png'); /* Textura do layout*/
    background-size: contain;
    background-color: rgba(255, 255, 255, 0.692);
    background-blend-mode: overlay; /* Alterar cor da textura*/
    background-position: center;
    margin-left: calc(50% - 50vw); /* Esticando conteúdo do site, mantendo elementos no centro */
    margin-right: calc(50% - 50vw); 
}

.titles {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;    
    margin: 10% 5vw;
}

.title {
    font-size: 50px;
    font-weight: bold;
    color: var(--fonte_azul); /* Alterar cor do titulo 1 segundo layout */
    margin-bottom: 0;
    align-items: center;
}

.title_2 {
    font-size: 50px;
    font-weight: bold;
    margin-top: 0;
    align-items: center;
}


.search {
    display: flex;
    justify-content: space-between; /* Posicionando input e botão de pesquisa*/
    position: relative;
    margin-bottom: 2%;
}

input[type="text"] {
    width: 100%; /* Input ocupar todo espaço possível */
    padding: 0 9px;
    margin-right: 2%;
}

input[type="text"]:focus {
    outline: var(--cor_botao); /* Mudar cor quando acionando para melhorar UX */
}

/*---------- Posicionando label dentro do input ---------*/

input[type="text"]:placeholder-shown + label {
    opacity: 0;
}

label {
    position: absolute;
    top: 10px; 
    left: 10px; 
    pointer-events: none; /* A label não será clicável nem selecionável */
}

.search_button {
    background-color: var(--fonte_azul);
    color: white;
    border: none;
    padding: 10px 30px; /* Espaçamento interno do botão */
    border-radius: 4px;
    cursor: pointer;
}


.container{
    display: flex;
    flex-wrap: wrap; /* Manter elementos abaixo, quando não houver espaço*/
    flex-direction: row;
    margin-top: 3%;
    /* margin-left: 4vw;
    margin-right: 4vw; */
    justify-content: center;
    margin-bottom: 15%;
}

.catContainer{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    /* Definir tamanho para o container do card de gatos*/
    height: 590px; 
    width: 440px;
    margin: 15px 0px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.336); /* Borda ao container */
    border-radius: 5px;
}

.left{
    margin-right: 12px; /* Definir espaçamento entre o card da esquerda*/
}

.right{
    /* Definir espaçamento entre o card da direita*/
    margin-left: 12px;
}

@media (max-width: 768px) { /* Media query para posicionar os cards em mobile, alterando o tamanho e tirando as margens. */
    .catContainer{
        height: 590px;
        width: 380px;
    }
    .left{
        margin-right: 0;
    }
    
    .right{
        margin-left: 0;
    }
}


/* Definir tamanho e posicionamento das imagens da API*/
.catImage{
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8%;
}

/* Classe respectiva a tag IMG para posicionar imagem*/
.kittyImage{
    width: 100%;
    height: 100%;
    object-fit: cover; /* Manter proporçao das imagens*/
}

.services {
    display: flex;
    background-color: var(--background_cinza);
    color: white;
    justify-content: center;
    align-items: center;
    /* width: 100vw; */
    flex-wrap: wrap;
    flex-direction: column; /* Manter conteudo verticalmente*/
    /* Utilizar todo o espaço horizontal mantendo elementos centralizados*/
    margin-left: calc(50% - 50vw); 
    margin-right: calc(50% - 50vw); 
    padding-bottom: 10%;
}


.service_title{
    font-size: 30px;
    margin-top: 8%;
    margin-bottom: 3.5%;
}

.card_container{
    display: flex;
    flex-wrap: wrap; /*Responsividade dos cards*/
    justify-content: center;
    gap: 20px; /* Espaçamento entre os cards */
    max-width: 70%;  /*Responsividade dos cards, mantendo sempre 3 cards por linha de acordo com o layout*/
    margin: 0;
}

/*Propriedade dos cards*/
.card {
    background-color: white;
    height: 350px;
    width: 250px; 
    border-radius: 10px;
    margin: 10px; 
    padding: 30px;
}

.card:hover{
    background-color:var(--cor_amarela); /*Hover amarelo de acordo com layout*/
    cursor: pointer;
}

.card h3{
    display: flex;
    color: var(--fonte_cinza);
    font-size: 22px;
    font-weight: bold;   
    justify-content: center;
    margin-bottom: 15px;
}

.card p{
    font-size: 18px;
    color: var(--fonte_cinza);
    margin-bottom: 30px;
    text-align: center;
}

.card a.more{
    display: flex;
    color: var(--fonte_azul);
    font-weight: bold;   
    justify-content: center;
    text-decoration: none;
}

.card a.more:hover{
    color: var(--background_cinza);  
    cursor: pointer;
    text-decoration: none;
}
.card img { /* propriedade dos SVG's */
    display: flex;
    justify-content: center;
    max-width: 100%;
    height: auto;
    padding-top: 20px;
    padding-bottom: 40px;
}

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

footer {
    width: 100%;
}

.footer {
    text-align: center;
    padding: 100px 0;
    background-color: var(--fonte_azul);
    color: white;
}

/* Definindo uma variável de cores para reusabilidade*/
:root {
    --fonte_azul: #1649ff;  
    --fonte_cinza: #3d3d3d;
    --background_cinza: #171717;
    --cor_botao: #00bfa5;
    --cor_amarela:  rgb(226, 226, 88);
}

/*  ---------- MEDIA QUERY ----------- */

@media screen and (min-width: 1201px) and (max-width: 1440px) {
    .card_container {
        max-width: 80%; /* Manter responsabilidade para notebooks, mantendo 3 cards por linha de acordo com o layout */
    }

    .header .cta {
        margin-right: 18%; /* alterando posicionamento do botão de acordo com o dispositivo*/
    }

    .header .logo{
        margin-left: 13%; /* alterando posicionamento da logo de acordo com o dispositivo*/  
    }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
    .header .cta {
        width: auto; /* alterando tamanho do botão de acordo com o dispositivo*/
        margin-right: 5%; /* alterando posicionamento do botão de acordo com o dispositivo*/
    }

    .header .logo{
        margin-left: 5%;  /* alterando posicionamento da logo de acordo com o dispositivo*/
    }
}