/* FAZER: */

/* GERAL: */
/* MUDAR COR DE FUNDO(PARA UM CINZA AZULADO)
/* MUDAR COR DOS CARDS(AZUL MAIS CONFORTÁVEL) */
/* CRIAR VARIÁVEIS DE CORES */
/* VERIFICAR REPETIÇÃO DE ESTADOS(BELO HORIZONTE SE REPETE 2 VEZES) */
/* HEADER: 

- aplicar animação de entrada dos elementos quando a página carregar
- Alinhar melhor texto do header
- colocar sombra na div do header e no footer, para trazer profundidade 
- sombra nos elementos do menu☑️
- estilizar menu(crescer ao passar mouse);☑️
- aplicar funcionalidade ao clicar nos elementos do menu, para levar até a sessão da página, deixar scroll mais lento(jquery)☑️
- aumentar a altura do espaço que o header ocupa.☑️
- criar texto para essa área, alinhar e separar melhor texto☑️
- colocar img fundo ☑️
- escolher fonte título principal ☑️
- trocar cores fonte ☑️


/* MAIN: 

- ALINHAR MELHOR CARDS EM TELAS PEQUENAS ☑️
- TROCAR SETAS (talvez embaixo dos cards), COLOCAR COR
- COLOCAR HOVER NAS SETAS
- ORGANIZAR TAMANHO E DESIGN DE CARDS(C/ RESPONSIVIDADE)☑️
- DECIDIR CORES FINAIS
- CRIAR VARIÁVEIS DAS CORES
- TIRAR SCROLL DOS CARDS
- COLOCAR ANIMAÇÃO NOS CARDS AO PASSAR MOUSE(CRESCER, APLICAR SOMBRA)☑️
- ESTILIZAR MELHOR TÍTULOS DE REGIÕES☑️

- FAZER SESSÃO DE INFORMAÇÕES DO CLIMA; BUSCAR IDEIAS ☑️
- ALINHAR E POSICIONAR MELHOR ELEMENTOS DOS CLIMAS ☑️
- BUSCAR IMAGENS ☑️
- SEPARAR RESUMOS P/ CADA CLIMA ☑️
- COLOCAR SOMBRA NOS CLIMAS ☑️
- DESTACAR ESTADOS NO TEXTO DOS CLIMAS(cores)
- COLOCAR SOMBRAS NOS TEXTOS E TÍTULOS DOS CARDS DOS CLIMAS
- APLICAR NOMES DE REGIÕES NAS IMAGENS DOS CLIMAS(IGUAL AO ESCOPO NO CANVA) ☑️
- MELHORAR TÍTULO E SUBTÍTULO INTRODUTÓRIOS HARMÔNICOS
- ESCOLHER CORES(PÁGINA, CARDS, TEXTOS, TÍTULOS)
- APLICAR ALGUMA ANIMAÇÃO NOS CARDS DOS CLIMAS

- BUSCAR MAIS IDEIAS
- COLOCAR ANIMAÇÃO AO DESCER A PÁGINA 



/* FOOTER: 
- CRIAR LAYOUT FOOTER
- ESCOLHER CORES

/* ALTERAÇÕES: */
/* - Coloquei tamanho fixo no "containerCards" para não passar dos limites com o flex; tirei position:absolute das arrows para não quebrar; coloquei uma arrow no início de "divArrows" e outra no fim, com a ajuda do tamanho fixo do "containerCards" permite ver elas no antese depois dos cards; 



/* import */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


/* @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap'); */

/* TÍTULO */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    font-weight: normal;
}

/* configuração para scroll da página */
/* html {
    scroll-behavior: smooth;
} */

body {
    /* gradiente */
    /* background-image: linear-gradient(180deg, #332f62, #3c276a, #261e43); */

    /* cor igual fundo bandeira */
    
    /* background-color: #a8b5c5;  */

    /* cor padrão */
    background-color: #ebebeb;


    background-color: #F5EFEB;
    /* background-color: #99b7d2; */
}

/* header */

.headerTag {
    display: flex;
    flex-direction: column;
    /* align-items: center; */

    /* height header com a bandeira no tamanho perfeito, mas mt curto  */
    /* height: 390px; */

    height: 640px; 
    gap: 120px;
    background-image: url("img/img bandeira 2.jpg");
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;

    /* mudança no design do header */
    margin: 118px 19px;
    border-radius: 18px;

}


.menuTag {
    display: flex;
    justify-content: center;
    /* padding: 38px 0 0px 0; */

    /* mudança no menu do header */
    padding: 20px 0 123px 0;
    margin: -85px 0;
   
}



.listTag {
    display: flex;
    justify-content: center;
    gap: 29px;
    

}

.linkItemMenu {
     display: flex;
    justify-content: center;
    list-style: none;
    text-decoration: none;
    gap: 68px;
    color: #8788d0d6;
    font-size: 20px;
    flex-wrap: wrap;
    padding: 0 5px;
}

.itemList {
    transition: all 0.3s;
    scale: 1;
    box-shadow: 1px 1px 13px #6a727f12;    
    border: 1px solid #00000017;
    border-radius: 17px;
    padding: 6px 11px;
}

.itemList:hover {
    color:white;
    background-color: #8ca9f7c2;
    cursor: pointer;
    scale: 1.04;
    transition: all 0.3s;
    
}

.homeArea {
    text-align: initial;
    color: white;
    max-width: 500px;
    padding: 0 0px 80px 14px;
}

.titleHome {
    
    font-size: 40px;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 600;
    text-shadow: 1px 1px 10px #4d5f798a;
}

.homeArea p {
    font-size: 17px ;
    line-height: 20px;
    margin-bottom: 7px;
    text-shadow: 1px 1px 10px #4d5f798a;
}


.linhaHoriz {
    /* border: 0.1px solid white;
    margin: -1px 0 11px 0;
        width: 97%; */
    border: 0.1px solid white;
        margin: 10px 0px 15px -13px;
        width: 60%;
}


/* main area*/

.mainArea {
    /* background-image: linear-gradient(180deg, #332f62, #3c276a, #261e43); */
    /* padding: 10px 0 115px 0; */
}

.divTituloAzul {
    padding: 0px 0 75px;
    text-align: center;
    margin: 140px 0 -8px;

}

.subtituloAzul {
    color: #4e6375;
    font-weight: 500;
}

.tituloAzul {
    color: #1D2A62;
}


.divTituloVerde {
    margin: -233px 0 85px;
    padding: 0 0 100px;
    
}

.subtituloVerde {
    color: #577646f0; 
    font-weight: 500;
}

.tituloVerde {
    color: #437118;
   
}

.containerMain {
    padding: 50px 17px 90px 27px;
    position: relative;
    /* background: #ffffffab; */
    margin: 0px 19px 0px;
    border-radius: 10px;

    /* alinha os elementos no centro ajudando o titulo e as setas ficarem no centro */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.headerRegion {
    display: flex;
    justify-content: space-between;
    /* width: 81%; */
    /* margin: 0 180px 0 169px; */
    gap: 753px;
}

.titleRegion {
    color: #545e90;
    padding: 0 0 0px 9px;
}

.subtituloTitleRegion {
        color: #80808082;
        font-size: 19px;
        margin: 4px 0 0 5px;
}

/* arrow */

    .arrowsControls {
        display: flex;
    }

    span.material-symbols-outlined.arrow-left.arrow1.fa-solid, span.material-symbols-outlined.arrow-right.arrow1.fa-solid, span.material-symbols-outlined.arrow-left.arrow2.fa-solid, span.material-symbols-outlined.arrow-right.arrow2.fa-solid, span.material-symbols-outlined.arrow-left.arrow3.fa-solid, span.material-symbols-outlined.arrow-right.arrow3.fa-solid, span.material-symbols-outlined.arrow-left.arrow4.fa-solid, span.material-symbols-outlined.arrow-right.arrow4.fa-solid, span.material-symbols-outlined.arrow-left.arrow5.fa-solid, span.material-symbols-outlined.arrow-right.arrow5.fa-solid {
        font-size: 48px;
        color: rgb(64, 64, 126);
    }

.divArrows {
    display: flex;
    align-items: center;
    margin: 0px -31px;
    position: relative;
    justify-content: center
}

.fa-solid {
    /* position: absolute; */
    font-size: 42px;
    color: white;
    cursor: pointer;

}

.arrow-left, .arrow-right {
    font-size: 36px;
  
}

.arrow-right {
  /* rotate: 180deg; */
}



.containerCards {
    display: flex;
    gap: 24px;
    /* flex-wrap: wrap; */
    padding: 10px 20px 10px 4px;
    overflow-x: scroll;

    -ms-overflow-style: none;
    scrollbar-width:none;

    /* justify-content: center; */
    margin: 0 0 0 2px;
    width: 262px;
    height: 194px;
}

.card {
    background-color: white;
    padding: 0px 32px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 33px;
    box-shadow: 3px 1px 12px #36323254;;
    transition: all 0.4s;
    cursor: pointer;
}

.card:hover {
    scale: 1.02;
    box-shadow: 3px 1px 12px #3632329c;

    
}

.purple {
    /* cor roxa  */
    /* background: #4725cf; */

    /* azul */
    background: #5170ff;

    background: #1D2A62;

    color: #ffffffeb ;
}

.titleCityCard {
    text-align: center;
    font-size: 22px;
    padding: 7px 0px 0 0;
    font-weight: 500;
    width: 167px;
}

.purple .iconUmidity, .iconWind {
    color: white;
}

.gray {
    /* cor cinza */
    /* background: rgb(213, 213, 213); */

    background: #87AECE;

    /* cor branca */
    /* background: #d6e4eb; */

    /* color: #4725cf; */

    /* cor padrão */
    color: #5170ff;

    color:#1D2A62;
}

.gray .iconWind, .iconUmidity {
    color: #1D2A62;
}

.temperaturaCity {
    display: flex;
    align-items: center;
    height: 83px;
    gap: 15px;
    margin-top: -6px;
    margin-bottom: 6px;
    width: 139px

}

.numTemperatura {
    font-size: 34px;
    margin: 19px 0 0 0;
}

.imgTemperaturaEDescDiv img {
    width: 66px;

    

}

.imgTemperaturaEDescDiv p {
    margin: -18px 0 0 0;
    text-align: center;
    font-weight: 300;
    font-size: 13px;
}

.infosExtrasDiv {
    display: flex;
    gap: 30px;
    margin: 5px 0 0 0;
}

.windInfo, .umidityInfo {
    text-align: center;
}

.iconUmidity, .iconWind {
    font-size: 17px;
}

.numVento, .numUmidade {
    font-weight: 500;
    margin: 4px 0 0 0;
    font-size: 11px;
}



    .info {
        display: flex;
        justify-content: center;
        align-items: center;
        /* margin: 206px 0 0; */
        padding: 72px 0 72px;
        flex-direction: column;
        background: #cdd2de6b;
        
        
        /* alteração no design do background */
        margin: 206px 19px 58px;
        border-radius: 10px;
    }

    .tituloAreaClima {
        padding: 0 0 94px;
        
        text-align: center;
        
    }

    .subtituloSectionClima {
        /* color: #577646f0; */
        font-weight: 500;
    }
    .tituloSectionClima {
        /* color: #437118; */
        font-weight: 600;
        font-size: 28px;
    }

    .containerAreaClima {
        /* width: 50%; */
        /* display: flex; */
        /* flex-direction: column; */
        display: grid;
        /* grid-template-columns: 0fr 0fr; */
        gap: 32px;
        /* margin: 0 27px; */
        grid-template-areas: "clima1 "
                             "clima2 "
                             "clima3 "
                             "clima4 "  
                             "clima5 "
                             "clima6 ";

    }

    .climaBr {
        
        display: flex;
        /* flex-direction: column; */
        align-items: center;
        /* box-shadow: 1px 1px 10px #46503066; */
        border-radius: 31px;
        transition: all 0.4s;

    }

    .climaBr:hover {
        box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.49);
        /* transition: all ease 3ms; */
        scale: 1.02; 
        cursor: pointer;
    }

/* 
    .climaBr:hover {
        box-shadow: 1px 1px 10px black;
    } */
    .divImgClima {
        width: 289px;
        height: 363px;
        /* margin: -41px 0 0 0; */
        border-radius: 33px;
        overflow: hidden;
        box-shadow: 3px 1px 12px #36323254;
        position: relative;

    }

    

    .imgClima {
        width: 100%;
        height: 100%;
        filter: brightness(0.80);
        border-radius: 33px;
    }

    .imgClimaSecundario {
        filter: brightness(0.60);
    }
    


    .tropical .divImgClima, .semiarido .divImgClima, .altitude .divImgClima, .litoraneo .divImgClima{
        /* height: 193px; */
        /* width: 260px; */
    }

     /* conteúdo nos cards imagens: */

    /* icone seta */

    .div-icone-seta {
        background: #e2e2e2f5;
    }

    .div-icone-seta:hover {
        background: #e2e2e2c0;
    }

    .div-icone-seta-imagem-grande-clima {
        position: relative;
        bottom: 350px;
        left: 230px;
        border: 1px solid #ffffff00;
        padding: 18px;
        width: 2px;
        border-radius: 23px;

    }

    .div-icone-seta-imagem-pequena-clima {
        position: relative;
        bottom: 350px;
        left: 230px;
        border: 1px solid #ffffff00;
        padding: 18px;
        width: 2px;
        border-radius: 23px;
       
    }
    

    .icone-seta-clima-grande {
        rotate: -40deg;
        position: absolute;
        top: 7px;
        left: 5px;
        font-size: 21px;
        color: #626262;
    }

    .icone-seta-clima-pequena {
        rotate: -40deg;
        position: absolute;
        top: 7px;
        left: 5px;
        font-size: 21px;
        color: #626262;
    }

    
    .div-icone-fechar {
        position: relative;
        /* bottom: 94px; */
        /* left: 115px; */
        border: 1px solid #ffffff00;
        padding: 18px;
        width: 2px;
        /* width: 93px; */
        /* height: 32px; */
        /* border-radius: 16px; */
        border-radius: 23px;
        background: #e2e2e2f5;
        visibility: hidden;
       
    }

    .div-icone-fechar:hover {
        background: #e2e2e2c0;
    }

    .div-icone-fechar-imagem-grande-clima {
        bottom: 96px;
        left: 229px;
    }
        .div-icone-fechar-imagem-pequena-clima {
        bottom: 96px;
        left: 229px;
    }

    .icone-fechar-clima-grande {
        rotate: 0deg;
        position: absolute;
        top: 10px;
        left: 7px;
        color: #626262;
        font-size: 17px;
    }


    /* texto padrão  */
    .texto-padrao-imagem-clima {
        font-size: 10px;
        position: absolute;
        color: white;
        transition: transform 0.8s ease;
    }

    .texto-padrao-imagem-clima1 {
        top: 228px;
        left: 25px;
    }

     .texto-padrao-imagem-clima2 {
        top: 201px;
        left: 25px;
    }

     .texto-padrao-imagem-clima3{
        top: 201px;
        left: 25px;
    }

     .texto-padrao-imagem-clima4 {
         top: 212px;
        left: 25px;
     }

     .texto-padrao-imagem-clima5 {
        top: 212px;
        left: 25px;
    }

      .texto-padrao-imagem-clima6 {
        top: 212px;
        left: 25px;
    }


    .texto-secundario-imagem-clima {
        font-size: 10px;
        position: absolute;
        color: white;
        opacity: 0;
        transform: translateY(20px);
        max-height: 0;
        transition: opacity 0.4s ease, transform 1.4s ease, max-height 0.4s ease;
    }

    
    .texto-secundario-imagem-clima1, .texto-secundario-imagem-clima6 {
        top: 50px;
        left: 25px;
    }

    .texto-secundario-imagem-clima2, .texto-secundario-imagem-clima3, .texto-secundario-imagem-clima4, .texto-secundario-imagem-clima5 {
        top: 103px;
        left: 25px;
    }

/* 

    .div-icone-seta-imagem-grande-clima, .div-icone-seta-imagem-pequena-clima {
        position: relative;
        bottom: 341px;
        left: 232px;
        border: 1px solid #ffffff00;
        padding: 15px;
        width: 2px;
        border-radius: 23px;
        background: #e2e2e2e6;
    } */

    .div-icone-seta-imagem-grande-clima/* , .div-icone-seta-imagem-pequena-clima */:hover {
        /* background: rgb(161, 161, 249); */
    }

    .div-icone-seta-imagem-pequena-clima:hover {
        /* background: rgb(161, 161, 249); */
    }

        .texto-secundario-imagem-clima {
        font-size: 10px;
        position: absolute;
        color: white;
        opacity: 0;
        transform: translateY(20px);
        max-height: 0;
        transition: opacity 0.4s ease, transform 1.4s ease, max-height 0.4s ease;
    }

        .activeTextoS {
        opacity: 1;
        transform: translateY(0);
        max-height: 300px;
    }

    .hiddeTextoP {
        opacity: 0;
        transform: translateY(20px);
        max-height: 0;
        transition: opacity 0.4s ease, transform 1.4s ease, max-height 0.4s ease;
    }

    /* .div-icone-seta-imagem-pequena-clima {
        position: relative;
        bottom: 305px;
        left: 290px;
        border: 1px solid #ffffff00;
        padding: 15px;
        width: 2px;
        border-radius: 23px;
        background: #e2e2e2e6;
    } */

    /* .subtropical .div-icone-seta-imagem-grande-clima {
        bottom: 305px;
    } */
/* 
    .icone-seta-clima-grande, .icone-seta-clima-pequena{
        rotate: 30deg;
        position: absolute;
        top: 3px;
        left: 3px;
        color: #626262;
    } */

    /* .icone-seta-clima-pequena  {
        rotate: 30deg;
        position: absolute;
        top: 3px;
        left: 3px;
        color: #626262;
    } */

/*     
    .activeTextoS {
        opacity: 1;
        transform: translateY(0);
        max-height: 300px;
    }

    .hiddeTextoP {
        opacity: 0;
        transform: translateY(20px);
        max-height: 0;
        transition: opacity 0.4s ease, transform 1.4s ease, max-height 0.4s ease;
    } */

/* 
    .texto-padrao-imagem-clima {
        font-size: 10px;
        position: absolute;
        color: white;
        width: 195px;
    } */

     /* .texto-padrao-imagem-clima1, .texto-padrao-imagem-clima2, .texto-padrao-imagem-clima3,  .texto-padrao-imagem-clima4,  .texto-padrao-imagem-clima5,  .texto-padrao-imagem-clima6 {
        top: 228px;
        left: 21px;
        
    } */
/* 
    .texto-padrao-imagem-clima1 {
        top: 228px;
        left: 24px;
        
    }

    .texto-padrao-imagem-clima2 {
        top: 182px;
        left: 24px;
        
    }

    .texto-padrao-imagem-clima3 {
        top: 182px;
        left: 24px;
    }

    .texto-padrao-imagem-clima4 {
        top: 185px;
        left: 24px;
    }

    .texto-padrao-imagem-clima5 {
        top: 173px;
        left: 24px;
    }

    .texto-padrao-imagem-clima6 {
        top: 207px;
        left: 24px;
    } */

    .legendaImagemClimas {
        position: absolute;    
        color: #ffffffc7;
        /* font-size: 14px; */
        /* padding: 0 5px; */
        text-shadow: 1px 1px 9px #120202;
        width: 197px;
    }


    .legendaClima1, .legendaClima2, .legendaClima3, .legendaClima4, .legendaClima5, .legendaClima6 {
        font-size: 12px;
        padding: 3px 0px;
        margin: 0 3px 0 -3px;

    }

     .legendaClima6 {
        /* top: 223px; */
        /* left: 15px; */
    }

    .legendaClima2 {
        /* top: 191px; */
        /* left: 15px; */

    }

    .legendaClima3, .legendaClima4, .legendaClima5 {
        /* top: 209px; */
        /* left: 15px; */
    }

    .iconLocationImg {
        font-size: 16px;
        color: #e31b1bed;
    }
/* 
    .legendaClima4 {
        top: 209px;
        
    } */
/* 
    .legendaClima5 {
        top: 226px;
        left: 15px;
    }

    .legendaClima6 {
        top: 226px;
        left: 15px;
    } */

    .divTextoClima {
        text-align: center;
        width: 300px;
        color: #f6f6f6;
        padding: 0 14px;
    }

    .tituloClimaBr {
        font-size: 18px;
        padding: 25px 0 7px;
        font-weight: 400;
        /* text-shadow: 1px 1px 10px black; */
    }

    .descricaoClima {
        line-height: 17px;
        font-size: 15px;
        width: 222px;
        margin: 0 0 2px 0;
        text-shadow: 1px 3px 5px #000000;
    }

    .equatorial .descricaoClima, .subtropical .descricaoClima {
        line-height: 17px;
        font-size: 15px;
        margin: 0 0 2px 0;
    }

    .estadosDescricaoClima {
        font-weight: 700;
        font-size: 14px;
    }
    
    .equatorial, .subtropical, .tropical, .semiarido, .altitude, .litoraneo {
        /* flex-direction: column; */
        /* background-color: #0000ff73; */
        /* max-width: 351px; */
        /* max-height: 362px; */
        /* min-width: 300px; */
        /* min-height: 320px; */
        /* padding: 18px 5px 74px 5px; */
        
    }

    .tropical, .semiarido, .altitude, .litoraneo {
        flex-direction: row;
        /* max-width: 100%; */
        /* max-height: 100%; */
        /* min-width: 100%; */
        /* min-height: 100%; */
        /* width: 398px; */
        /* padding: 18px 10px 2px 10px; */
        /* height: 290px; */
        gap: 10px;
        /* flex-direction: row; */
/*         
        width: 400px;
        padding: 18px 17px 2px 16px;
        height: 280px; */
    }

    .equatorial {
        /* background-color: #0000ff73;  */
        grid-area: clima1;
    }

    .tropical {
        grid-area: clima2;
        /* background-color: #b9d08f; */
        /* margin: 0 0 0 -102px; */
    }

    .semiarido {
        grid-area: clima3;
        /* background-color: #d0b372; */
        /* margin: 0 0 0 -102px; */
    }

    .altitude {
        /* background-color: #94963e; */
        grid-area: clima4;
        /* margin: 20px 0 0 0; */
    }

    .litoraneo {
        /* background-color: #cad0d7; */
        grid-area: clima5;
    }

    .subtropical {
        /* background-color: #a9aeae; */
        grid-area: clima6;
        /* margin: 20px 0 0 0; */
    }





/* footer: */
.Footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    background: #a8b7c7;
    padding: 66px 10px 60px;
    text-align: center;
}

.titleFooter {
    font-size: 21px;
    font-weight: 600;
    padding: 0 7px;
}

.descricaoFooter {
    font-size: 14px;
    padding: 12px 7px 20px;
    max-width: 357px;
    line-height: 19px;

}

.stackFooter {
    font-size: 14px;
    padding: 0 7px;

}



.divLinks {
    padding: 20px 0 25px;
}

.linkFooter {
    /* text-decoration: none;
    font-weight: 500; */
    font-size: 31px;
    color: #53578f;
}

.linkFooter:hover {
    color: #656996;
}

.infosCopyrightFooter {
    padding: 0 10px 7px;
    font-size: 14px;
}

/* @media screen and (min-width: 430px) {
    .divImgClima {
        width: 284px;
        height: 360px;
    }

    .div-icone-seta-imagem-grande-clima, .div-icone-seta-imagem-pequena-clima {
        bottom: 350px;
        left: 230px;
    }

    .texto-padrao-imagem-clima1 {
        top: 254px;
        left: 21px;
        
    }

    .texto-padrao-imagem-clima2 {
        top: 207px;
        left: 24px;
    }

    .texto-padrao-imagem-clima3 {
        top: 207px;
        left: 24px;
    }

    .texto-padrao-imagem-clima4 {
        top: 208px;
        left: 24px;
    }

    .texto-padrao-imagem-clima5 {
        top: 196px;
        left: 24px;
    }

    .texto-padrao-imagem-clima6 {
        top: 231px;
        left: 24px;
    }
} */
;

@media screen and (max-width: 750px) {
    .headerRegion {
        display: flex;
        /* justify-content: space-between; */
        width: 402px;
        margin: 0 39px 9px 28px;
        gap: 177px;

    }

    .headerRegion5 {
        gap: 117px; 
    }


    .titleRegion {
        padding: 0 0 17px 0px;
        font-weight: 500;
        margin: 0 7px 0 34px;
    }

    .info {
        margin: 270px 19px 114px;
    }
}

@media screen and (min-width: 695px) {
    
        span.material-symbols-outlined.arrow-left.arrow1.fa-solid, span.material-symbols-outlined.arrow-right.arrow1.fa-solid, span.material-symbols-outlined.arrow-left.arrow2.fa-solid, span.material-symbols-outlined.arrow-right.arrow2.fa-solid, span.material-symbols-outlined.arrow-left.arrow3.fa-solid, span.material-symbols-outlined.arrow-right.arrow3.fa-solid, span.material-symbols-outlined.arrow-left.arrow4.fa-solid, span.material-symbols-outlined.arrow-right.arrow4.fa-solid, span.material-symbols-outlined.arrow-left.arrow5.fa-solid, span.material-symbols-outlined.arrow-right.arrow5.fa-solid {
        font-size: 48px;
        color: rgb(64, 64, 126);
    }

    


     .headerRegion {
        display: flex;
        /* justify-content: space-between; */
        width: 415px;
        margin: 0 39px 0 0px;
        gap: 184px;

    }



    .titleRegion {
        padding: 0 0 0px 0px;
        font-weight: 500;
        margin: 0 7px 0 -20px;
    }

    
    .containerCards {
        width: 514px;
    }


    .info {
        display: flex;
        justify-content: center;
        margin: 270px 0 0;
        padding:75px 0 75px;
        flex-direction: column;
    }

    .tituloAreaClima {
        padding: 0 0 100px;
        text-align: center;
        
    }

    .subtituloSectionClima {
        
    }
    .tituloSectionClima {
        
    }

    .containerAreaClima {
        /* width: 50%; */
        display: grid;
        grid-template-columns: 17rem 17rem;
        grid-template-rows: 190px 190px 190px 190px;
        gap: 22px;
        margin: 0 14px;
        grid-template-areas: "clima1 clima2"
                             "clima1 clima3"
                             "clima4 clima6"
                             "clima5 clima6" ;

    }

    .climaBr {
        
        display: flex;
        /* flex-direction: column; */
        align-items: center;
    }

    .divImgClima {
        
        width: 100%;
        height: 100%;
    
    }


    .imgClima {
        /* width: 100%; */
        /* height: 100%; */
    }


    /* conteúdo nos cards imagens: */

    /* icone seta */
    .div-icone-seta-imagem-grande-clima {
        position: relative;
        bottom: 389px;
        left: 216px;
        border: 1px solid #ffffff00;
        padding: 17px;
        width: 2px;
        border-radius: 23px;
        
    }

    .div-icone-seta-imagem-pequena-clima {
        position: relative;
        bottom: 178px;
        left: 220px;
        border: 1px solid #ffffff00;
        padding: 17px;
        width: 2px;
        border-radius: 23px;
       
    }
    

    .icone-seta-clima-grande {
        rotate:-40deg;
        position: absolute;
        top: 5px;
        left: 4px;
        font-size: 21px;
        color: #626262;
    }

    .icone-seta-clima-pequena {
        rotate: -40deg;
        position: absolute;
        top: 5px;
        left: 4px;
        font-size: 21px;
        color: #626262;
    }

    
    .div-icone-fechar {
        position: relative;
        /* bottom: 94px; */
        /* left: 115px; */
        border: 1px solid #ffffff00;
        padding: 16px;
        width: 2px;
        /* width: 93px; */
        /* height: 32px; */
        /* border-radius: 16px; */
        border-radius: 23px;
        
        visibility: hidden;
    }


    .div-icone-fechar-imagem-grande-clima {
        bottom: 90px;
        left: 216px;
    }
        .div-icone-fechar-imagem-pequena-clima {
        bottom: 89px;
        left: 221px;
    }

    .icone-fechar-clima-grande {
        rotate: 0deg;
        position: absolute;
        top: 8px;
        left: 5px;
        color: #626262;
        font-size: 17px;
    }


    /* texto padrão  */
    .texto-padrao-imagem-clima {
        font-size: 10px;
        position: absolute;
        color: white;
        transition: transform 0.8s ease;
    }

    .texto-padrao-imagem-clima1 {
        top: 269px;
        left: 25px;
        
    }

     .texto-padrao-imagem-clima2 {
        top: 40px;
        left: 25px;
    }

     .texto-padrao-imagem-clima3{
        top: 46px;
        left: 25px;
    }

     .texto-padrao-imagem-clima4 {
         top: 46px;
        left: 25px;
     }

     .texto-padrao-imagem-clima5 {
        top: 46px;
        left: 25px;
    }

      .texto-padrao-imagem-clima6 {
        top: 257px;
        left: 25px;
    }


    .texto-secundario-imagem-clima {
        font-size: 10px;
        position: absolute;
        color: white;
        opacity: 0;
        transform: translateY(20px);
        max-height: 0;
        transition: opacity 0.4s ease, transform 1.4s ease, max-height 0.4s ease;
    }

    
    .texto-secundario-imagem-clima1, .texto-secundario-imagem-clima6 {
        top: 110px;
        left: 25px;
    }


    .texto-secundario-imagem-clima2, .texto-secundario-imagem-clima3 {
        top: -15px;
        left: 21px;
    }

     .texto-secundario-imagem-clima4, .texto-secundario-imagem-clima5 {
        top: -8px;
        left: 21px;
    }

    /* fim elementos p/ animação*/


    .legendaImagemClimas {
        font-size: 13px;
    }
    
    .legendaClima1 {
        font-size: 11px;
        padding: 2px 0px;
        margin: 0 3px 0 -3px;
    }

     .legendaClima6 {
        padding: 2px 0;
        margin: 0 3px 0 -3px;
        font-size: 12px;
    }

    .legendaClima2 {
        /* top: 112px; */
      

    }

    .legendaClima2, .legendaClima3, .legendaClima4, .legendaClima5 {
        /* top: 127px; */
        font-size: 11px;
        padding: 2px 0px;
        margin: 0 3px 0 -3px;
    }
/* 
    .legendaClima4 {
        top: 130px;
    }

    .legendaClima5 {
        top: 130px;
    } */

  

    .divTextoClima {
        text-align: center;
        width: 233px;
        color: #f6f6f6;
    }

    .tituloClimaBr {
        font-size: 16px;
        font-weight: 400;
        padding: 25px 0 7px;
        width: 195px;
    }

    .equatorial .descricaoClima, .subtropical .descricaoClima {
        line-height: 17px;
        font-size: 13px;
        margin: 0 0 2px 0;
    }

    .tropical .descricaoClima, .semiarido .descricaoClima, .altitude .descricaoClima, .litoraneo .descricaoClima, .estadosDescricaoClima {
        font-size: 13px;
    }
    
    .descricaoClima {
        line-height: 17px;
        margin: 0 0 2px 0;
        width: 222px;
    }

    .equatorial, .subtropical {
        flex-direction: column;
        /* background-color: #0000ff73; */
        max-width: 100%;
        max-height: 100%;
        min-width: 100%;
        min-height: 100%;
        /* padding: 18px 12px 74px 12px; */
        
    }

    .tropical, .semiarido, .altitude, .litoraneo {
        flex-direction: row;
        max-width: 100%;
        max-height: 100%;
        min-width: 100%;
        min-height: 100%;
        /* width: 398px; */
        /* padding: 18px 10px 2px 10px; */
        /* height: 290px; */
        gap: 10px;
    }

    .equatorial {
        /* background-color: #0000ff73;  */
        grid-area: clima1;
    }

    .tropical {
        grid-area: clima2;
        /* background-color: #b9d08f; */
        /* margin: 0 0 0 -126px; */
    }

    .semiarido {
        grid-area: clima3;
        /* background-color: #d0b372; */
        /* margin: 0 0 0 -126px; */
    }

    .altitude {
        /* background-color: #94963e; */
        grid-area: clima4;
        /* margin: 20px 0 0 0; */
    }

    .litoraneo {
        /* background-color: #cad0d7; */
        grid-area: clima5;
    }

    .subtropical {
        /* background-color: #a9aeae; */
        grid-area: clima6;
        /* margin: 20px 0 0 0; */
    }

    
    .activeTextoS {
        opacity: 1;
        transform: translateY(0);
        max-height: 300px;
    }

    .hiddeTextoP {
        opacity: 0;
        transform: translateY(20px);
        max-height: 0;
        transition: opacity 0.4s ease, transform 1.4s ease, max-height 0.4s ease;
    }

}

@media screen and (min-width: 750px) {
    .headerTag {
        align-items: initial;

        height: 695px;
        background-position: right;
        margin: 92px 46px;

    }

    .menuTag {
        padding: 24px 0 78px 0;
    }

    .itemList {
        /* border: 1px solid #00000017;
        border-radius: 17px;
        padding: 6px 11px; */
    }
    
    .homeArea {
        padding: 129px 40px 80px 70px;
        text-align: initial;
    }

    .listTag {
        gap: 120px;
    }

    .titleHome {
        font-size: 45px;
        width: 530px;
    }


    .arrow-left, .arrow-right {
        font-size: 36px;
    }

    .containerMain {
        /* background: #ffffffab; */
        margin: 0px 61px 0px;
        border-radius: 10px;
    }


    .headerRegion {
        display: flex;
    /* justify-content: space-between; */
        /* width: 127%; */
    /* margin: 0 180px 0 169px; */
        gap: 368px;
    }

    .arrowsControls {
        display: flex;
    }



    /* melhorar */
    span.material-symbols-outlined.arrow-left.arrow1.fa-solid, span.material-symbols-outlined.arrow-right.arrow1.fa-solid,  span.material-symbols-outlined.arrow-left.arrow2.fa-solid, span.material-symbols-outlined.arrow-right.arrow2.fa-solid,  span.material-symbols-outlined.arrow-left.arrow3.fa-solid, span.material-symbols-outlined.arrow-right.arrow3.fa-solid,  span.material-symbols-outlined.arrow-left.arrow4.fa-solid, span.material-symbols-outlined.arrow-right.arrow4.fa-solid,  span.material-symbols-outlined.arrow-left.arrow5.fa-solid, span.material-symbols-outlined.arrow-right.arrow5.fa-solid{
    font-size: 48px;
    color: rgb(64, 64, 126);
}

    .divArrows {
        display: flex;
        align-items: center;
        margin: 0px -31px;
        position: relative;
        justify-content: center;
    }

        .headerRegion {
        display: flex;
        /* justify-content: space-between; */
        width: 769px;
        margin: 0 94px 19px 0px;
        gap: 394px;
    }


    .titleRegion {
        padding: 0 0 0px 0px;
        font-weight: 500;
        margin: 0 10px 0 56px;
    }


    .containerCards {
        justify-content: left;
        height: 182px;
        /* display: flex; */
        /* gap: 24px; */
        /* flex-wrap: wrap; */
        /* padding: 10px 0 10px 8px; */
        /* overflow-x: scroll; */
        /* -ms-overflow-style: none; */
        /* scrollbar-width: none; */
        /* justify-content: center; */
        /* margin: 0 0 0 2px; */
        width: 773px;
        /* height: 194px; */
    }

    .card {
        padding: 0px 32px 7px;
    }

    .titleCityCard {
        padding: 7px 0px 0 0;
        width: 167px;

    }

    .temperaturaCity {
        margin-top: -6px;
        height: 83px;
        margin-bottom: 6px;
    }

    .numTemperatura {
        font-size: 35px;
    }

    .imgTemperaturaEDescDiv img {
        width: 66px;
    }

    .imgTemperaturaEDescDiv p {
        margin: -18px 0 0 0;
        font-size: 13px;

    }

    .infosExtrasDiv {
        gap: 44px;
        margin: 5px 0 0 0;
    }
    .iconUmidity, .iconWind {
        font-size: 17px; 
    }

    .numVento, .numUmidade {
        font-weight: 500;
        margin: 4px 0 0 0;
        font-size: 11px;
    }


    .linhaHoriz {
        width: 74%;
    }


    
    .info {
        display: flex;
        justify-content: center;
        /* margin: 270px 0 0; */
        padding: 21px 0 21px;
        flex-direction: column;

        /* design do background climas */
        margin: 270px 54px 114px;
        border-radius: 10px;
    }

    .tituloAreaClima {
        padding: 0 0 67px;
        text-align: center;
        
    }

    .subtituloSectionClima {
        
    }
    .tituloSectionClima {
        
    }

    .containerAreaClima {
        /* width: 50%; */
        display: grid;
        grid-template-columns: 18rem 18rem;
        grid-template-rows: 190px 190px 190px 190px;
        gap: 24px;
        margin: 0px 27px;
        padding: 91px 14px 62px;
        /* 4 linhas, os cards maiores ocupam 2 linhas as menores ocupam 1  linhas */
        grid-template-areas:"clima1 clima2"
                            "clima1 clima3"
                            "clima4 clima6"
                            "clima5 clima6"


    }

    .climaBr {
        
        display: flex;
        /* flex-direction: column; */
        align-items: center;
    }

    
    .div-icone-seta-imagem-grande-clima {
        position: relative;
        bottom: 386px;
        left: 235px;
        border: 1px solid #ffffff00;
        padding: 17px;
        width: 2px;
        border-radius: 23px;

        
    }

    .div-icone-seta-imagem-pequena-clima {
        position: relative;
        bottom: 176px;
        left: 236px;
        border: 1px solid #ffffff00;
        padding: 17px;
        width: 2px;
        border-radius: 23px;
        
    }

    .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-size: 22px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}



    .icone-seta-clima-grande {
        rotate: -40deg;
        position: absolute;
        top: 6px;
        left: 5px;
        color: #626262;
        font-size: 20px;
        /* font-size: 15px; */
        /* border: 1px solid white; */
        /* border-radius: 50%; */
    /* /* padding: 7px 19px; */
    }

    .icone-seta-clima-pequena {
         rotate: -40deg;
        position: absolute;
        top: 7px;
        left: 5px;
        color: #626262;
        font-size: 20px;
    }

    .div-icone-fechar {
        position: relative;
        /* bottom: 94px; */
        /* left: 115px; */
        border: 1px solid #ffffff00;
        padding: 17px;
        width: 2px;
        /* width: 93px; */
        /* height: 32px; */
        /* border-radius: 16px; */
        border-radius: 23px;
        visibility: hidden;
    }


    .div-icone-fechar-imagem-grande-clima {
        bottom: 89px;
        left: 233px;
    }
        .div-icone-fechar-imagem-pequena-clima {
        bottom: 89px;
        left: 237px;
    }

    .icone-fechar-clima-grande {
        rotate: 0deg;
        position: absolute;
        top: 8px;
        left: 6px;
        color: #626262;
        font-size: 17px;
    }


    .divImgClima {
        width: 100%;
        height: 100%;
        /* margin: -41px 0 0 0; */
        border-radius: 33px;
        overflow: hidden;

    }


    .imgClima {
        /* width: 100%;
        height: 100%; */
    }


    .texto-secundario-imagem-clima {
        font-size: 10px;
        position: absolute;
        color: white;
        
        opacity: 0;
        transform: translateY(20px);
        max-height: 0;
        transition: opacity 0.4s ease, transform 1.4s ease, max-height 0.4s ease;
    }

    .texto-secundario-imagem-clima1, .texto-secundario-imagem-clima6 {
        top: 110px;
        left: 25px;
    }

    .texto-secundario-imagem-clima2, .texto-secundario-imagem-clima3 {
        top: -15px;
        left: 25px;
    }

     .texto-secundario-imagem-clima4, .texto-secundario-imagem-clima5 {
        top: -8px;
        left: 21px;
    }


    
    .activeTextoS {
        opacity: 1;
        transform: translateY(0);
        max-height: 300px;
    }

    .hiddeTextoP {
        opacity: 0;
        transform: translateY(20px);
        max-height: 0;
        transition: opacity 0.4s ease, transform 1.4s ease, max-height 0.4s ease;
    }

    .texto-padrao-imagem-clima1 {
        top: 270px;
        left: 25px;
    }

    .texto-padrao-imagem-clima6 {
        top: 253px;
        left: 25px;
    }

    .texto-padrao-imagem-clima2 {
        top: 34px;
        left: 25px;
    }

    .texto-padrao-imagem-clima3 {
        top: 44px;
        left: 25px;
    }

    .texto-padrao-imagem-clima4 {
        top: 44px;
        left: 25px;
    }

    .texto-padrao-imagem-clima5 {
        top: 44px;
        left: 25px;
    }

    .texto-padrao-imagem-clima {
        font-size: 10px;
        position: absolute;
        color: white;
        transition: transform 0.8s ease;
    }

    .legendaClima1 {
        font-size: 11px;
        padding: 2px 0px;
        margin: 0 3px 0 -3px;

    }

    .legendaClima6 {
        padding: 2px 0;
        margin: 0 3px 0 -3px;
        font-size: 12px;
        
    }

    .legendaClima2 {
        /* top: 130px; */

    }

    .legendaClima2, .legendaClima3, .legendaClima4, .legendaClima5 {
        /* top: 147px; */
        font-size: 11px;
        padding: 2px 0px;
        margin: 0 3px 0 -3px;
        
    }

    


    .tropical .divImgClima, .semiarido .divImgClima, .altitude .divImgClima, .litoraneo .divImgClima{
        /* height: 193px; */
        /* width: 268px; */
    }

    .divTextoClima {
        text-align: center;
        width: 285px;
        color: #f6f6f6;
        
    }

    .equatorial .divTextoClima, .subtropical .divTextoClima {
        padding: 0 12px;
    }
    .tituloClimaBr {
        font-size: 16px;
        font-weight: 400;
        padding: 25px 0 7px;
        width: 212px;
    }

    .descricaoClima {
        line-height: 17px;
        font-size: 13px;
        margin: 0 0 2px 0;
    }

    .equatorial  .descricaoClima, .subtropical .descricaoClima {
        font-size: 13px;
        margin: 0 0 2px 0;
        width: 201px;
 
   }

   .tropical .descricaoClima, .semiarido .descricaoClima, .altitude .descricaoClima, .litoraneo .descricaoClima, .estadosDescricaoClima {
        font-size: 13px;
    }

    .estadosDescricaoClima {
        font-size: 13px;
    }
    
    .equatorial, .subtropical {
        flex-direction: column;
        width: 100%;
        height: 100%;
        /* background-color: #0000ff73; */
        /* width: 300px; */
        /* padding: 18px 17px 74px 17px; */
        
    }

    .tropical, .semiarido, .altitude, .litoraneo {
        flex-direction: row;
        width: 100%;
        height: 100%;
        
        /* width: 400px; */
        /* padding: 18px 17px 2px 16px; */
        /* height: 280px; */
    }

    .equatorial {
        /* background-color: #0000ff73;  */
        grid-area: clima1;
    }

    .tropical {
        grid-area: clima2;
        /* background-color: #b9d08f; */
        /* margin: 0 0 0 -102px; */
    }

    .semiarido {
        grid-area: clima3;
        /* background-color: #d0b372; */
        /* margin: 0 0 0 -102px; */
    }

    .altitude {
        /* background-color: #94963e; */
        grid-area: clima4;
        /* margin: 20px 0 0 0; */
    }

    .litoraneo {
        /* background-color: #cad0d7; */
        grid-area: clima5;
    }

    .subtropical {
        /* background-color: #a9aeae; */
        grid-area: clima6;
        /* margin: 20px 0 0 0; */
    }

    .Footer {
        padding: 41px 10px 25px;
    } 



}

@media screen and (max-width: 800px) {

    /* .headerRegion {
        display: flex;
        
        width: 653px;
        margin: 0 39px 0 0px;
        gap: 379px;

    } */

    .headerRegion {
        display: flex;
        /* justify-content: space-between; */
        width: 253px;
        margin: 0 39px 20px 33px;
        gap: 81px;
        align-items: center;

    }

    .headerRegion1 {
        margin: 0px 59px 20px 33px;
    }

    .headerRegion5 {
        gap: 6px; 
        width: 282px;
        margin: 0 38px 20px 33px;
    }

    .headerRegion5 .titleRegion {
        padding: 0 0 0 0;
    }

    .headerRegion5 .arrowsControls {
        margin: 0 -16px 0 0;
    }

    /* .titleRegion {
        padding: 0 0 17px 0px;
        font-weight: 500;
        margin: 0 7px 0 -31px;

    } */

    .titleRegion {
        /* padding: 0 0 17px 0px; */
        font-weight: 500;
        margin: 0 7px 0 -20px;
        font-size: 22px
    }


    .containerCards {
        /* justify-content: left; */
        height: 182px;
        /* display: flex; */
        /* gap: 24px; */
        /* flex-wrap: wrap; */
        /* padding: 10px 0 10px 8px; */
        /* overflow-x: scroll; */
        /* -ms-overflow-style: none; */
        /* scrollbar-width: none; */
        /* justify-content: center; */
        /* margin: 0 0 0 2px; */
        max-width: 512px;
        /* min-width: 500px; */
        /* height: 194px; */
    }
}


@media screen and (max-width: 890px) {
    .info {
        margin: 225px 19px 114px;
    }
}


@media screen and (min-width: 1000px) {

    .headerTag {
        height: 583px;
        max-height: 705px;
        display: flex;
        gap: 90px;

        background-position: right 30% center;
    }
    
    .homeArea {
        max-width: 542px;
        padding: 137px 1px 80px  70px;
    }

    .titleHome {
        font-size: 54px;
    }

    .homeArea p {
        font-size: 15px ;
    }

    .menuTag {
        padding: 21px 0 78px 0;
    }

    
    .headerRegion {
        display: flex;
        /* justify-content: space-between; */
        width: 766px;
        margin: 0 107px 19px 0px;
        gap: 393px;
    }
    
    .titleRegion {
        padding: 0 0 17px 0px;
        font-weight: 500;
        margin: 0 10px 0 56px;
    }

    .arrow-left, .arrow-right {
        font-size: 36px;
    }

       
      .arrow4 {
        visibility: hidden ;
    }

   

    .containerCards {
        /* display: flex; */
        /* gap: 24px; */
        /* flex-wrap: wrap; */
        /* padding: 10px 0 10px 8px; */
        /* overflow-x: scroll; */
        /* -ms-overflow-style: none; */
        /* scrollbar-width: none; */
        /* justify-content: center; */
        margin: 0 9px 0 9px;
        width: 776px;
        /* height: 194px; */
    }
    
        .windInfo, .umidityInfo {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* gap: 5px; */
    }

        
        /* .iconWindPurple {
            color: white;
        }

        .iconUmidityGray {
            color: #5170ff;
        } */

       

    .linhaHoriz {
        border: 0.1px solid white;
        margin: 10px 0px 15px -41px;
        width: 60%;
    }


    .info {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 21px 0 ;

        /* design background */
        margin: 285px 53px 124px;
        border-radius: 10px;
    }

    .containerAreaClima {
        /* width: 50%; */
        display: grid;
        grid-template-columns: 19rem 19rem;
        grid-template-rows: 196px 196px 196px 196px;
        padding: 91px 14px 62px;
        gap: 24px;
        grid-template-areas: "clima1 clima2"
                             "clima1 clima3"
                             "clima4 clima6"
                             "clima5 clima6";
    }

    .climaBr {
        
        display: flex;
        /* flex-direction: column; */
        align-items: center;
    }

    .divImgClima {
        width: 100%;
        height: 100%;
        /* margin: 15px 0 0 0; */
        border-radius: 33px;
        overflow: hidden;
        position: relative;

    }


    .imgClima {
        width: 100%;
        height: 100%;
    }

    .div-icone-seta-imagem-grande-clima {
        position: relative;
        bottom: 394px;
        left: 249px;
        border: 1px solid #ffffff00;
        padding: 16px;
        width: 4px;
        border-radius: 45px;
        height: 33px;
        
    }

    .div-icone-seta-imagem-pequena-clima {
        position: relative;
        bottom: 186px;
        left: 249px;
        border: 1px solid #ffffff00;
        padding: 16px;
        width: 4px;
        border-radius: 33px;
        
    }

    /* .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-size: 22px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
} */

    .icone-seta-clima-grande {
        rotate: -40deg;
        position: absolute;
        top: 7px;
        left: 5px;
        font-size: 18px;
        color: #626262;
        /* font-size: 15px; */
        /* border: 1px solid white; */
        /* border-radius: 50%; */
    /* /* padding: 7px 19px; */
    }

    .icone-seta-clima-pequena {
         rotate: -40deg;
        position: absolute;
        top: 8px;
        left: 5px;
        font-size: 18px;
        color: #626262;
    }

    .div-icone-fechar {
        position: relative;
        /* bottom: 94px; */
        /* left: 115px; */
        border: 1px solid #ffffff00;
        padding: 16px;
        width: 2px;
        /* width: 93px; */
        /* height: 32px; */
        /* border-radius: 16px; */
        border-radius: 23px;
        
        visibility: hidden;
    }

    .div-icone-fechar-imagem-grande-clima {

        bottom: 89px;
        left: 247px;
    }

    .div-icone-fechar-imagem-pequena-clima {
        bottom: 92px;
        left: 249px;
    }


    .icone-fechar-clima-grande {
        rotate: 0deg;
        position: absolute;
        top: 8px;
        left: 5px;
        color: #626262;
        font-size: 17px;
        
    }

    .texto-fechar-imagem-grande {
        position: absolute;
        top: 7px;
        left: 33px;
        font-size: 14px;
        color: #353535;
    }


    .texto-padrao-imagem-clima {
        font-size: 10px;
        position: absolute;
        transition: transform 0.8s ease;
        color: white;
    }

    .texto-padrao-imagem-clima1 {
        top: 275px;
        left: 25px;
    }

    .texto-padrao-imagem-clima2 {
        top: 34px;
        left: 25px;
    }

    .texto-padrao-imagem-clima3 {
        top: 24px;
        left: 25px;
        margin: 11px 0 0;
    }

    .texto-padrao-imagem-clima4 {
        top: 39px;
        left: 25px;
        margin: 11px 0 0;
    }

    .texto-padrao-imagem-clima5 {
        top: 55px;
        left: 25px;
        margin: -7px 0 0;
    }

    .texto-padrao-imagem-clima6 {
        top: 260px;
        left: 25px;
    }

    
    .legendaClima1 {
        font-size: 12px;
        padding: 2px 0px;
        margin: 0 3px 0 -3px;
    }
    
    .legendaClima2, .legendaClima3, .legendaClima4, .legendaClima5 {
        /* top: 143px; */
        font-size: 12px;
        padding: 2px 0px;
        margin: 0 3px 0 -3px;
        

    } 
 
    .legendaClima3, .legendaClima4 {
        /* top: 158px; */
        
    }

    .legendaClima5 {
        /* top: 158px; */
    }

    .legendaClima6 {
        padding: 2px 0px;
        margin: 0 3px 0 -3px;
        font-size: 12px;
    }

    .texto-secundario-imagem-clima {
        font-size: 10px;
        position: absolute;
        color: white;
        /* visibility: hidden; */
        opacity: 0;
        transform: translateY(20px);
        max-height: 0;
        transition: opacity 0.4s ease, transform 1.4s ease, max-height 0.4s ease;
    }

    .texto-secundario-imagem-clima1 {
        top: 100px;
        left: 25px;
    }

    .texto-secundario-imagem-clima2, .texto-secundario-imagem-clima3, .texto-secundario-imagem-clima4, .texto-secundario-imagem-clima5 {
        top: -12px;
        left: 21px;
    }

     .texto-secundario-imagem-clima6 {
        top: 82px;
        left: 25px;
     }

    .activeTextoS {
        opacity: 1;
        transform: translateY(0);
        max-height: 300px;
    }

    .hiddeTextoP {
        opacity: 0;
        transform: translateY(20px);
        max-height: 0;
        transition: opacity 0.4s ease, transform 1.4s ease, max-height 0.4s ease;
    }

    .tropical .divImgClima, .semiarido .divImgClima, .altitude .divImgClima, .litoraneo .divImgClima{
        /* height: 218px; */
        /* width: 346px; */
    }

    .divTextoClima {
        text-align: center;
        width: 300px;
        color: #f6f6f6;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .tituloClimaBr {
        font-size: 17px;
        font-weight: 400;
        padding: 25px 0 7px;
        width: 220px;
    }

    .descricaoClima {
        line-height: 17px;
        font-size: 13px;
        margin: 0 0 2px 0;
    }

    .equatorial .descricaoClima, .subtropical .descricaoClima { 
        font-size: 14px;
        margin: 0 0 2px 0;
    }
    
    .tropical .descricaoClima, .semiarido .descricaoClima, .altitude .descricaoClima, .litoraneo .descricaoClima, .estadosDescricaoClima {
        font-size: 14px;
    }


    .equatorial, .subtropical {
        flex-direction: column;
        width: 100%;
        height: 100%;
        /* background-color: #0000ff73; */
        /* width: 344px; */
        /* padding: 18px 5px 74px 5px; */
        
    }

    .tropical, .semiarido, .altitude, .litoraneo {
        flex-direction: row;
        width: 100%;
        height: 100%;
        
        /* width: 478px; */
        /* padding: 18px 17px 2px 0px; */
        /* height: 282px; */
    }

    .equatorial {
        /* background-color: #0000ff73;  */
        grid-area: clima1;
    }

    .tropical {
        grid-area: clima2;
        /* background-color: #b9d08f; */
        /* margin: -15px 0 0 -112px; */
    }

    .semiarido {
        grid-area: clima3;
        /* background-color: #d0b372; */
        /* margin: -122px 0 0 -112px; */
    }

    .altitude {
        /* background-color: #94963e; */
        grid-area: clima4;
        /* margin: -109px 0 0 -5px; */
    }

    .litoraneo {
        /* background-color: #cad0d7; */
        grid-area: clima5;
        /* margin: -100px 0 0 -5px; */
    }

    .subtropical {
        /* background-color: #a9aeae; */
        grid-area: clima6;
        /* margin: -95px 0 0 -112px; */
    }




}

@media screen and (min-width: 1060px) {
    
    .headerRegion {
        display: flex;
        /* justify-content: space-between; */
        width: 1004px;
        margin: 0 94px 19px 0px;
        gap: 554px;
    }
    
    .titleRegion {
        padding: 0 0 17px 0px;
        font-weight: 500;
        margin: 0 10px 0 56px;
    }

    .subtituloTitleRegion {
        color: #80808082;
        font-size: 19px;
        margin: 4px 0 0 5px;
    }

        .containerCards {
        /* display: flex; */
        /* gap: 24px; */
        /* flex-wrap: wrap; */
        /* padding: 10px 0 10px 8px; */
        /* overflow-x: scroll; */
        /* -ms-overflow-style: none; */
        /* scrollbar-width: none; */
        /* justify-content: center; */
        margin: 0 3px 0 1px;
        width: 1027px;
        /* height: 194px; */
    }
}

@media screen and (min-width: 1270px) {
    .arrow3, .arrow5 {
        visibility: hidden ;
    }
}