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

    body{
      scroll-behavior:smooth;
    }

    :root{
      --bg:#070b14;
      --card:#111827;
      --card2:#151f31;
      --text:#f5f7ff;
      --gray:#9ca3af;
      --blue:#4f8cff;
      --cyan:#2dd4bf;
      --border:#ffffff14;
      --shadow:0 10px 40px #00000066;
    }

    body{
      font-family: Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow-x:hidden;
    }




    




    /* RESPONSIVE */

    @media(max-width:900px){

      .hero{
        grid-template-columns:1fr !important;
      }

      .hero-text h1{
        margin-top:20%;
        font-size:2.5rem !important;
      }

      .menu{
        gap:5% !important;
        font-size:.8rem !important;
      }

     .logo{
        display:none;
      }


        .timeline{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:22px;
    position:relative;
    padding:20px 0;
  }

  /* linha no fundo */
  .timeline::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:2px;
    height:100%;
    background:linear-gradient(
      to bottom,
      transparent,
      var(--blue),
      var(--cyan),
      transparent
    );
    opacity:.5;
    z-index:0;
  }

  /* RESET TOTAL DOS ITEMS */
  .timeline-item,
  .timeline-item.left,
  .timeline-item.right{
    position:relative;
    width:100%;
    left:0 !important;
    padding:0;
    margin:0;
    display:flex;
    justify-content:center;
  }

  /* remove bolinhas antigas */
  .timeline-item::after{
    display:none !important;
  }

  /* CARD */
  .timeline-content{
    width:min(92%, 420px);
    padding:18px;
    border-radius:18px;
    position:relative;
    z-index:2;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    overflow:hidden;
  }

  /* imagem */
  .timeline-image{
    width:100%;
    height:140px;
    border-radius:14px;
    overflow:hidden;
    margin-bottom:15px;
  }

  .timeline-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* data */
  .timeline-date{
    font-size:.75rem;
    display:block;
    margin-bottom:10px;
  }

  /* titulo */
  .timeline-content h3{
    font-size:1.1rem;
    line-height:1.3;
    margin-bottom:12px;

    word-break:break-word;
  }

  /* descrição */
  .timeline-content p{
    font-size:.92rem;
    line-height:1.6;
    margin-bottom:15px;

    word-break:break-word;
  }

  /* aprendido */
  .timeline-learned{
    padding:12px;
    font-size:.88rem;
    line-height:1.5;
    border-radius:14px;
  }
    }