* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      font-family: 'Livvic', 'Inter', sans-serif;
      overflow: hidden;
      background: #000;
      color: #fff;
  }

  .scroll-container {
      height: 100vh;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
  }

  .scroll-container::-webkit-scrollbar {
      display: none;
  }

  .sections-wrapper {
      display: flex;
      height: 100vh;
      width: 500vw;
  }

  .section {
      min-width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 2rem;
      position: relative;
  }

  .background-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: -1;
      overflow: hidden;
  }

  .background-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      filter: brightness(0.4) blur(0.5px) contrast(1.1);
  }

  .background-image:nth-child(2) {
      background-position: center 20%;
      filter: brightness(0.5) blur(0.3px) contrast(1.2) saturate(0.9);
  }

  .background-image.active {
      opacity: 1;
  }

  .background-image::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg,
              rgba(0, 0, 0, 0.6) 0%,
              rgba(16, 23, 42, 0.4) 30%,
              rgba(30, 41, 59, 0.3) 70%,
              rgba(0, 0, 0, 0.7) 100%);
      z-index: 1;
  }

  .background-image:nth-child(2)::before {
      background: linear-gradient(135deg,
              rgba(0, 0, 0, 0.7) 0%,
              rgba(16, 23, 42, 0.5) 40%,
              rgba(30, 41, 59, 0.4) 60%,
              rgba(0, 0, 0, 0.8) 100%);
  }

  .background-image:nth-child(1) {
      background-image: url('https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=1920&h=1080&fit=crop&crop=center');
  }

  .background-image:nth-child(2) {
      background-image: url('perfil.webp');
  }

  .background-image:nth-child(3) {
      background-image: url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=1920&h=1080&fit=crop&crop=center');
  }

  .background-image:nth-child(4) {
      background-image: url('https://images.unsplash.com/photo-1553877522-43269d4ea984?w=1920&h=1080&fit=crop&crop=center');
  }

  .background-image:nth-child(5) {
      background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&h=1080&fit=crop&crop=center');
  }

  .background-image:nth-child(6) {
      background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&h=1080&fit=crop&crop=center');
  }


  .section {
      background: transparent;
      position: relative;
      z-index: 2;
  }

  .section * {
      position: relative;
      z-index: 3;
  }

  .nav-dots {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 1rem;
      z-index: 50;
  }

  .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
  }

  .dot.active {
      background: #6366f1;
      transform: scale(1.2);
  }

  .dot:hover {
      background: rgba(255, 255, 255, 0.6);
  }

  .hero-title {
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      font-weight: 700;
      margin-bottom: 1.5rem;
      line-height: 1.2;
      text-align: center;
      opacity: 0;
      transform: translateY(50px);
      text-shadow:
          2px 2px 0px rgba(99, 102, 241, 0.8),
          4px 4px 0px rgba(99, 102, 241, 0.6),
          6px 6px 0px rgba(99, 102, 241, 0.4),
          8px 8px 0px rgba(99, 102, 241, 0.2),
          10px 10px 20px rgba(0, 0, 0, 0.8),
          0px 0px 30px rgba(99, 102, 241, 0.3);
  }

  .hero-subtitle {
      font-size: clamp(1.1rem, 3vw, 1.5rem);
      margin-bottom: 2rem;
      color: #a1a1aa;
      max-width: 40rem;
      text-align: center;
      opacity: 0;
      transform: translateY(30px);
      text-shadow:
          2px 2px 4px rgba(0, 0, 0, 0.8),
          0px 0px 10px rgba(161, 161, 170, 0.2);
  }

  .cta-button {
      background: #6366f1;
      color: white;
      padding: 0.75rem 2rem;
      border-radius: 9999px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
      opacity: 0;
      transform: translateY(20px);
      text-shadow:
          1px 1px 2px rgba(0, 0, 0, 0.8);
      box-shadow:
          0px 4px 15px rgba(99, 102, 241, 0.4),
          inset 0px 1px 2px rgba(255, 255, 255, 0.2);
  }

  .cta-button:hover {
      background: #5855eb;
      transform: translateY(-2px);
      box-shadow:
          0px 10px 25px rgba(99, 102, 241, 0.5),
          inset 0px 1px 2px rgba(255, 255, 255, 0.3);
  }

  .section-title {
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 700;
      margin-bottom: 2rem;
      text-align: center;
      opacity: 0;
      transform: translateY(30px);
      text-shadow:
          2px 2px 0px rgba(167, 139, 250, 0.8),
          3px 3px 0px rgba(167, 139, 250, 0.6),
          4px 4px 0px rgba(167, 139, 250, 0.4),
          5px 5px 0px rgba(167, 139, 250, 0.2),
          6px 6px 15px rgba(0, 0, 0, 0.7),
          0px 0px 20px rgba(167, 139, 250, 0.3);
  }

  .section-content {
      color: #a1a1aa;
      font-size: clamp(1rem, 2.5vw, 1.25rem);
      max-width: 48rem;
      text-align: center;
      line-height: 1.6;
      opacity: 0;
      transform: translateY(20px);
      text-shadow:
          1px 1px 3px rgba(0, 0, 0, 0.7),
          0px 0px 8px rgba(161, 161, 170, 0.1);
  }

  .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      max-width: 80rem;
      width: 100%;
      margin-top: 3rem;
  }

  .service-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      background: rgba(31, 41, 55, 0.8);
      padding: 2rem;
      border-radius: 1rem;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
      opacity: 0;
      transform: translateY(30px);
      box-shadow:
          0px 8px 32px rgba(0, 0, 0, 0.4),
          inset 0px 1px 2px rgba(255, 255, 255, 0.05);
  }

  .service-card:hover {
      transform: translateY(-5px);
      box-shadow:
          0px 20px 40px rgba(0, 0, 0, 0.5),
          0px 0px 30px rgba(99, 102, 241, 0.2),
          inset 0px 1px 2px rgba(255, 255, 255, 0.1);
      border-color: #6366f1;
  }

  .service-title {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 1rem;
      color: #a78bfa;
      text-shadow:
          1px 1px 0px rgba(167, 139, 250, 0.8),
          2px 2px 0px rgba(167, 139, 250, 0.5),
          3px 3px 5px rgba(0, 0, 0, 0.6),
          0px 0px 15px rgba(167, 139, 250, 0.2);
  }

  .progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 4px;
      background: linear-gradient(90deg, #6366f1, #a78bfa);
      z-index: 100;
      transform-origin: left;
      transform: scaleX(0);
      box-shadow:
          0px 2px 10px rgba(99, 102, 241, 0.5),
          0px 0px 20px rgba(167, 139, 250, 0.3);
  }

  .floating-elements {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      pointer-events: none;
  }

  .floating-element {
      position: absolute;
      background: rgba(99, 102, 241, 0.1);
      border-radius: 50%;
      animation: float 6s ease-in-out infinite;
      box-shadow:
          0px 0px 20px rgba(99, 102, 241, 0.2),
          inset 0px 2px 5px rgba(255, 255, 255, 0.1);
  }

  .floating-element:nth-child(1) {
      width: 100px;
      height: 100px;
      top: 20%;
      left: 10%;
      animation-delay: 0s;
  }

  .floating-element:nth-child(2) {
      width: 60px;
      height: 60px;
      top: 60%;
      right: 20%;
      animation-delay: 2s;
  }

  .floating-element:nth-child(3) {
      width: 80px;
      height: 80px;
      bottom: 30%;
      left: 70%;
      animation-delay: 4s;
  }

  @keyframes float {

      0%,
      100% {
          transform: translateY(0px) rotate(0deg);
      }

      50% {
          transform: translateY(-20px) rotate(180deg);
      }
  }

  /* Efeito especial para destacar título com cor */
  .hero-title span {
      color: #fff;
      text-shadow:
          2px 2px 0px rgba(255, 255, 255, 0.3),
          4px 4px 0px rgba(255, 255, 255, 0.2),
          6px 6px 0px rgba(255, 255, 255, 0.1),
          8px 8px 0px rgba(255, 255, 255, 0.05),
          10px 10px 20px rgba(99, 102, 241, 0.8),
          0px 0px 30px rgba(99, 102, 241, 0.6),
          0px 0px 50px rgba(99, 102, 241, 0.4);
  }

  /* Efeito hover para títulos */
  .hero-title:hover,
  .section-title:hover {
      transform: scale(1.02);
      transition: all 0.3s ease;
  }

  .hero-title:hover {
      text-shadow:
          3px 3px 0px rgba(99, 102, 241, 0.9),
          6px 6px 0px rgba(99, 102, 241, 0.7),
          9px 9px 0px rgba(99, 102, 241, 0.5),
          12px 12px 0px rgba(99, 102, 241, 0.3),
          15px 15px 30px rgba(0, 0, 0, 0.9),
          0px 0px 40px rgba(99, 102, 241, 0.5);
  }

  .section-title:hover {
      text-shadow:
          3px 3px 0px rgba(167, 139, 250, 0.9),
          5px 5px 0px rgba(167, 139, 250, 0.7),
          7px 7px 0px rgba(167, 139, 250, 0.5),
          9px 9px 0px rgba(167, 139, 250, 0.3),
          11px 11px 25px rgba(0, 0, 0, 0.8),
          0px 0px 30px rgba(167, 139, 250, 0.4);
  }

  @media (max-width: 768px) {
      .services-grid {
          grid-template-columns: 1fr;
          gap: 1.5rem;
      }

      .section {
          padding: 1rem;
      }

      /* Reduzir intensidade das sombras em mobile */
      .hero-title {
          text-shadow:
              1px 1px 0px rgba(99, 102, 241, 0.8),
              2px 2px 0px rgba(99, 102, 241, 0.6),
              3px 3px 0px rgba(99, 102, 241, 0.4),
              4px 4px 10px rgba(0, 0, 0, 0.7),
              0px 0px 20px rgba(99, 102, 241, 0.3);
      }

      .section-title {
          text-shadow:
              1px 1px 0px rgba(167, 139, 250, 0.8),
              2px 2px 0px rgba(167, 139, 250, 0.6),
              3px 3px 0px rgba(167, 139, 250, 0.4),
              4px 4px 10px rgba(0, 0, 0, 0.7),
              0px 0px 15px rgba(167, 139, 250, 0.3);
      }

      .service-title {
          text-shadow:
              1px 1px 0px rgba(167, 139, 250, 0.8),
              2px 2px 3px rgba(0, 0, 0, 0.6),
              0px 0px 10px rgba(167, 139, 250, 0.2);
      }
  }


/* --- Habilidades Técnicas --- */
.skills-grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem; /* Espaçamento entre as bolhas */
    padding: 2.5rem 1rem; /* Mais padding para os lados */
    max-width: 900px; /* Limita a largura para melhor leitura */
    margin: 0 auto; /* Centraliza o container */
}

.skill-bubble {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-color, #f0f0f0);
    padding: 0.7rem 1.4rem; /* Ajustado para acomodar ícone e texto */
    border-radius: 40px;
    font-size: 1rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: default;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;

    /* Estilo para layout interno com ícone */
    display: flex; /* Transforma a bolha em um flex container */
    align-items: center; /* Alinha ícone e texto verticalmente */
    gap: 0.5rem; /* Espaçamento entre o ícone e o texto */

    /* Animação de flutuação */
    animation: float-subtle 4s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.15s);
}

.skill-bubble:hover {
    transform: translateY(-4px) scale(1.05);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.skill-bubble i {
    font-size: 1.5rem; /* Tamanho do ícone */
    line-height: 1; /* Alinha o ícone corretamente */
}

/* Para o caso de "HTML5 & CSS3" que tem dois ícones */
.skill-bubble i + i {
    margin-left: 0.25rem; /* Pequeno espaçamento entre dois ícones */
}

@keyframes float-subtle {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Garanta que o section-title e section-content estejam estilizados no seu style.css geral */
.section-title {
    font-family: 'Oswald', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    text-align: center;
    margin-bottom: 2.5rem;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

.svg-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.animate-icon {
    width: 100%;
    height: 100%;
    transform-origin: center;
    animation: floaty 4s ease-in-out infinite;
}

@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}