@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
body {
	font-family: "Inter", sans-serif;
}
.inter-<uniquifier> {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.emphasis {
    font-style: italic;
}
.content {
		flex: 1;
	}
.bg-purple {
	background-color: #77129a; /* Roxo característico da Vivo */
}
/* Ícones de Redes Sociais */
.social-icons img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-icons img:hover {
    transform: scale(1.1); /* Aumenta o tamanho do ícone */
    opacity: 0.8;  /* Efeito de transparência */
}

/* Botões de Planos */
.text-center img {
    transition: transform 0.3s ease;
}

.text-center img:hover {
    transform: scale(1.1); /* Aumenta o tamanho ao passar o mouse */
}
/* Estilo para o nome das redes sociais */
.social-icons p {
    margin-top: 10px; /* Espaço entre o ícone e o nome */
    font-size: 1rem;  /* Tamanho da fonte */
    font-weight: bold; /* Deixa o nome mais destacado */
}

/* Efeito ao passar o mouse no ícone e nome */
.social-icons a:hover p {
    text-decoration: none;
	color:#09f;
}

/* Alinhamento e espaçamento adequado */
.social-icons a {
    display: inline-block;
    text-align: center;
    color: white;
	text-decoration:none;
}
.navbar-purple {
    background-color: #9a0dcb; /* Tom de roxo mais claro */	
}
.navbar-purple a{
	color:white;
}
.navbar-purple a:hover{
	color: #3cb4d6;
}
.text-purple {
    color: #77129a; /* Cor roxa que você está utilizando no seu site */
}
.text-purple:hover {
    color: #3cb4d6; /* Cor roxa que você está utilizando no seu site */
}
.navbar-purple .nav-link.active {
    color: #3cb4d6; /* Tom mais claro de roxo para o link ativo */
}
/* Cor roxa personalizada */
.btn-purple {
    background-color: #77129a;
    border-color: #77129a;
}

.btn-purple:hover {
    background-color: #6b006d;
    border-color: #6b006d;
}

/* Cor roxa personalizada para o botão de detalhes com borda */
.btn-outline-purple {
    color: #77129a;
    border-color: #6b006d;
}

.btn-outline-purple:hover {
    background-color: #77129a;
    color: white;
}
.via_mt .text-purple {
    color: #77129a; /* Cor roxa que você está utilizando no seu site */
}
.via_mt .text-purple:hover {
    color: #f4f4f4; /* Cor roxa que você está utilizando no seu site */
}
#contactInfo .bg-roxo{
	 background-color:transparent;
}
.custom-border {
    border: 2px solid #0700a0; /* Cor personalizada */
    border-radius: 15px; /* Aumento do arredondamento */
}

/* Fundo Purple */
.section-purple {
    background-color: #6a1b9a; /* Substitua por sua cor roxa */
    color: white; /* Define o texto padrão como branco */
    padding: 20px;
    border-radius: 10px;
}

/* Itens da lista com texto branco inicial */
.list-group-item {
    background-color: transparent; /* Mantém fundo inicial transparente */
    color: white; /* Define o texto inicial como branco */
    transition: background-color 0.3s, color 0.3s;
}

/* Hover nos itens da lista */
.list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Fundo claro translúcido */
    color: #3cb4d6; /* Cor do texto ao passar o mouse (amarelo) */
    cursor: pointer;
}

/* Velocimetro */
.progress-circle-wrapper {
  position: relative;
  display: inline-block;
  width: 200px; /* Define o tamanho do contêiner */
  height: 200px; /* Define o tamanho do contêiner */
}

.progress-circle {
  stroke-dasharray: calc(2 * Math.PI * 50); /* Circunferência do círculo */
  stroke-dashoffset: calc(2 * Math.PI * 50); /* Inicialmente, a linha está oculta */
  transition: stroke-dashoffset 0.5s ease; /* Animação suave */
}

.progress-background {
  stroke: #e6e6e6;
  stroke-width: 3;
}

.progress {
  stroke: #77129a;
  stroke-width: 3;
  stroke-linecap: round; /* Torna a linha do progresso arredondada */
  transition: stroke-dashoffset 0.5s ease;
}

/* CSS para centralizar o texto dentro do círculo */
.gauge-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px; /* Tamanho da fonte */
  font-weight: bold; /* Negrito */
  color: #333; /* Cor do texto */
  text-align: center;
}

/* Borda animada */
.border-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid #0099ff; /* Borda azul */
    border-radius: 50%; /* Faz a borda circular */
    animation: rotate 2s linear infinite; /* Animação de rotação */
    pointer-events: none; /* Garante que não interfira com a interação */
    border-top-color: #77129a; /* Cor do topo da borda */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    filter: brightness(1.1) contrast(1.2) saturate(1.2);
    transition: box-shadow 0.3s ease-in-out;
}

/* Animação de rotação */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}