@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url(styles/header.css);
@import url(styles/home.css);
@import url(styles/intro.css);
@import url(styles/sobremim.css);
@import url(styles/projetos.css);
@import url(styles/processo.css);
@import url(styles/testemunho.css);
@import url(styles/contato.css);

:root{
    --verde-logo: #017a80;
    --branco: #FFFFFF;
    --preto: #000000;
    --verde-escuro: #004e52;
    --verde: #439484;
    --verde-claro: #74cfb7;
    --font-principal: 'Montserrat', sans-serif;
    --font-texto: 'Inter', sans-serif;
    --font-diferente: 'Playfair Display', serif;
    --fundo-gradiente: linear-gradient(90deg, #74cfb7, #5d90dd);
}

body{
    font-family: var(--font-texto);
    background: #000000;
    margin: 0;
}

.gradient-text {
  font-family: var(--font-principal);
  font-size: 3rem;
  font-weight: 700;
  text-align: center;

  background: linear-gradient(90deg, #6f7e94, #d1ffd9);
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  background-clip: text;
  color: transparent;
    
  text-shadow: 0 0 15px rgba(0, 255, 204, 0.2);
}

.gradient{
     font-family: var(--font-principal);
  font-size: 3rem;
  font-weight: 700;
  text-align: center;

    background: linear-gradient(90deg, #135bc7, #66ff7f,#ffffff9f);
     -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    background-clip: text;
    color: transparent;
}

.cursor-blob {
    position: fixed; 
    pointer-events: none; 
    width: 80px; 
    height: 80px;
    border-radius: 50%; 
    
    background: radial-gradient(circle, rgba(0, 255, 191, 0.459) 0%, transparent 70%);
    
    filter: blur(40px); 
    opacity: 0; 
    transform: translate(-50%, -50%); 
    z-index: 9999; 
    transition: opacity 0.5s ease; 

}

body:hover .cursor-blob {
    opacity: 1; 
}

.dot-navigation {
    position: fixed;
    right: 20px;    
    top: 50%;        
    
    transform: translateY(-50%); 
    
    z-index: 1000; 
}

.dot-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; 
    gap: 18px; 
}

.dot-navigation li a {
    display: block;
    width: 10px;
    height: 10px;
    
    background-color: rgba(255, 255, 255, 0.3);
    
    border-radius: 50%; 
    cursor: pointer;
    
    transition: all 0.3s ease;
}

.dot-navigation li a.active {
    background-color: #00e6d2; 
    
    transform: scale(1.4);
    
    box-shadow: 0 0 15px rgba(0, 255, 192, 0.7);
}

.dot-navigation li a:hover {
    background-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.2);
}

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

html, body {
  max-width: 100%;
  overflow-x: hidden; 
}
    .cursor-blob {
        display: none; 
    }

    .dot-navigation {
        display: none; 
    }

}