@import url('https://fonts.googleapis.com/css2?family=Freeman&display=swap');

#contact_section {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#contact_title {
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    text-align: center;
    position: absolute;
    font-size: 4.19rem;
    color: #4acbd9d0;
    background-color: black;
    padding: 0.5rem;
    left: 0px;
    height: 729px;
    font-family: 'Freeman', sans-serif;
    user-select: none;
}

.icon-circle {
  display: inline-flex; /* Alinha o ícone como um elemento inline com flexbox */
  justify-content: center; /* Centraliza o ícone horizontalmente */
  align-items: center; /* Centraliza o ícone verticalmente */
  width: 150px; /* Tamanho do círculo */
  height: 150px; /* Tamanho do círculo */
  border-radius: 50%; /* Forma um círculo */
  background-color: rgba(255, 255, 255, 0.377); /* Cor de fundo do círculo */
  font-size: 5rem; /* Ajuste o tamanho do ícone */
  color: #ffffffe7;; /* Cor do ícone */
  position: relative; /* Posicionamento relativo, caso precise de ajustes adicionais */
  cursor: pointer;
  transition: transform 0.5s ease;
}

.icons_row {
    right: -28rem;
    top: 16rem;
    gap: 10rem;
    display: flex;
    position: relative;
    width: 103rem;
}

.bi-whatsapp {
    color: white; /* Cor padrão do ícone */
    top: -0.2rem;
    position: relative;
}

#whatsapp_circle {
    background-color: rgba(211, 211, 211, 0.6); /* Cor de fundo padrão (cinza claro) */
    transition: transform 0.5s ease, background-color 0.3s ease;
}

#whatsapp_circle:hover {
    background-color: #ffffff; /* Cor de fundo ao passar o mouse */
    transform: scale(1.2); /* Efeito de escala */
}

#whatsapp_circle:hover .bi-whatsapp {
    color: #2AED63; /* Verde ao passar o mouse sobre o círculo */
}

#gmail_icon {
    width: 64px;
    height: 64px;
    filter: brightness(0) invert(1); /* Deixa o ícone branco */
    transition: filter 0.3s ease; /* Suaviza a transição */
}

#email_circle {
    background-color: rgba(211, 211, 211, 0.6); /* Cor de fundo padrão (cinza claro) */
    transition: transform 0.5s ease, background-color 0.3s ease;
}

#email_circle:hover #gmail_icon {
    filter: none;
}

#email_circle:hover {
    transform: scale(1.2);
    background-color: white;
}

#linkedin_circle:hover {
    transform: scale(1.2);
    transition: transform 0.5s ease, background-color 0.3s ease;
    background-color: #0077B5;
    color: white;
}

#github_icon { 
    filter: grayscale(1);
}

#github_circle:hover #github_icon {
    filter: none;
}

#github_circle:hover {
    transform: scale(1.2);
    transition: transform 0.5s ease, background-color 0.3s ease;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
}



/* #0077B5 */


.contact_text_row {
    right: -17rem;
    font-size: 1.8rem;
    color: white;
    top: 11rem;
    position: relative;
    font-family: 'Freeman', sans-serif;
    width: 100rem;
    display: flex;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 9rem;
}

.tooltip {
    visibility: hidden;
    width: 180px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    height: 35px;
}
  
.icon-circle:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

#popup {
    position: fixed; /* Para que ele siga o mouse na janela inteira */
    background-color: rgba(0, 0, 0, 0.8); /* Cor de fundo do popup */
    color: white; /* Cor do texto */
    padding: 5px 10px; /* Espaçamento interno */
    border-radius: 5px; /* Bordas arredondadas */
    font-size: 14px; /* Tamanho do texto */
    pointer-events: none; /* Garante que o popup não interfira no mouse */
    display: none; /* Esconde o popup por padrão */
    z-index: 1000; /* Para garantir que fique acima dos outros elementos */
}