body {
          margin: 0;
          padding-top: 80px; /* altura do header fixo */
        }

html {
  scroll-behavior: smooth;
}


        main {
          padding-top: var(--header-height, 80px);
        }

        p, span, a {
          font-family: "Inter", sans-serif;
        }

        h1 {
          font-family: "Inter";
          color: black;
          font-size: 36px;
          font-weight: 600;
        }

        h2 {
          font-family: "Inter";
          color: black;
          font-size: 48px;
          font-weight: 600;
        }

        h3 {
          font-family: "Inter";
          color: black;
          font-size: 39px;
          font-weight: 600;
        }

        h4 {
          font-family: "Inter";
          color: black;
          font-size: 24px;
          font-weight: 600;
        }

        /* Header */
        .main-header {
          width: 100%;
          padding: 15px 40px;
          position: fixed;       /* fixed at top */
          top: 0;
          left: 0;
          z-index: 1000;
          display: flex;
          justify-content: center;
          transition: background-color 0.3s, box-shadow 0.3s;
          background-color: transparent; /* starts transparent */
        }

        /* Header after scrolling */
        .main-header.scrolled {
          background-color: #fff;          /* background when scrolling */
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        /* Container inside header */
        .nav-container {
          width: 100%;
          max-width: 1200px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        /* Logo */
        .logo {
          display: flex;
          align-items: center;
          gap: 10px; /* space between logo and name */
          font-size: 24px;
          font-weight: 700;
          text-decoration: none;
          color: #000;
        }

        .logo-img {
          height: 32px;   /* control size */
          width: auto;    /* keep proportions */
        }


        /* Navigation links */
        .nav-bar {
          display: flex;
          gap: 24px;
          align-items: center;
        }

        /* Regular nav links */
        .nav-link {
          text-decoration: none;
          font-weight: 600;
          font-size: 16px;
          color: #000;
          padding: 8px 12px;
          transition: all 0.2s ease;
        }

        .nav-link:hover {
          color: #0243C4;
        }

        /* Contact button */
        .contact-button {
          background-color: #006FEE;
          color: #fff;
          border-radius: 9999px;
          padding: 10px 20px;
        }

        .contact-button:hover {
          background-color: #0A1940;
          color: #fff;
        }

        /* Hamburger menu - hidden on desktop */
        .hamburger {
          display: none;
          font-size: 28px;
          cursor: pointer;
        }

        /* Responsive for smaller screens */
        @media (max-width: 768px) {
          .nav-bar {
           display: none;
            flex-direction: column;
            gap: 16px;
            position: absolute;
            top: 70px;   /* adjust based on header height */
            right: 40px;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
          }

          .nav-bar.active {
            display: flex;
          }

          .hamburger {
            display: block;
          }
        }


        .hero {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 50px;
          gap: 50px; 
          margin-top: 100px;
          margin-bottom: 100px;
        }

        .hero-text {
          flex: 1;
          max-width: 50%;
        }

        /* Responsividade */
          @media (max-width: 768px) {
          .hero {
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 20px;
            margin-right: 20px;
            padding: 0px;
          }

          .hero-text {
            flex: 1;
            max-width: 100%;
        }

          }

        /* Texto circular gira anti-horário */
        .circle-text {
          animation: rotateCircle 20s linear infinite reverse;
          transform-origin: 50% 50%;
          transform-box: fill-box;
        }

       @keyframes rotateCircle {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }

				.hero-compass {
          width: 300px;   /* tamanho da bússola */
          height: 300px;
        }

        #Star {
          transform-origin: 50% 50%;
          transform-box: fill-box;
          transition: transform 0.1s linear;
        }
       
        .About-me {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          column-gap: 20px;
          align-items: stretch;
          margin-left: 100px;
          margin-right: 100px;
         }

          /* Responsividade */
          @media (max-width: 768px) {
          .About-me {
            flex-direction: column;
            align-items: center;
            row-gap: 20px;
            margin-left: 20px;
            margin-right: 20px;
          }
          }

          .Left-column {
            display: flex;
            flex-direction: column;
            row-gap: 20px;
            justify-content: space-between;
            flex: 1; /* ocupa o mesmo espaço da direita */
          }

          .Left-top {
            background-color: #D9D9D9;
            border-radius: 10px;
            padding: 30px;
            flex: 1; /* 🔥 faz os dois blocos se expandirem igualmente */
            display: flex;
            flex-direction: column;
          }

          .Left-bottom {
            background-color: #D9D9D9;
            border-radius: 10px;
            padding-left: 30px;
            padding-right: 30px;
            padding-top: 20px;
            flex: 1; /* 🔥 faz os dois blocos se expandirem igualmente */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
     
          .Right-column {
            background-color: #D9D9D9;
            border-radius: 10px;
            display: flex;
            align-items: stretch;
            flex: 1;
            overflow: hidden;  /* importante para cortar a imagem nos cantos arredondados */
          }

          h1.Greeting {
            margin: 0;               /* remove espaço padrão */
            align-self: flex-start;  /* garante que fique à esquerda */
          }

          h1.Profession {
            margin-top: auto;   /* empurra pra baixo até o meio */
            margin-bottom: auto; /* equilibra pra ficar centralizado verticalmente */
            align-self: flex-start; /* garante alinhamento à esquerda */
          }

          .My-Picture {
            width: 100%;
            height: 100%;  
            object-fit: cover;
            border-radius: 10px;
          }

          .Career-Overview {
            font-size: 16px;
            font-weight: 600;
          }

          .CareerOverview-Text {
            font-size: 16px;
          }

          .timeline {
            position: relative;
            margin: 0;
            padding-left: 30px;
            display: flex;             /* ativa flexbox */
            align-items: center;       /* centraliza verticalmente o dot e o conteúdo */
            flex-direction: column;
            align-items: stretch;
            justify-content: space-between;
          }

          .Timeline-line {
            content: "";
            width: 2px;
            background: linear-gradient(to bottom, transparent, black, transparent);
            position: absolute;
            display: inline;
            top: 0;              /* começa no topo da timeline */
            bottom: 0;           /* termina no final da timeline */
            left: 12px;          /* ajusta a posição horizontal */
            z-index: 0;          /* mantém a linha atrás dos dots */
          }

          .timeline-item {
            position: relative;
            margin-bottom: 5px;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 10px;
            z-index: 1; /* garante que o conteúdo fique acima da linha */
            margin-left: 0;
          }

          .timeline-item:last-child {
            margin-bottom: 0;
          }

          .timeline-dot {
            position: absolute;
            left: -22px; /* alinha o dot com a linha */
            width: 5px;
            height: 5px;
            background: black;
            border: 3px solid #d9d9d9; /* espaço para não cortar a linha */
            border-radius: 50%;
          }

          .timeline-content {
            font-size: 14px;
            margin-left: 0px;
            
          }

          #LinkAboutMe {
            align-self: flex-end;
          }

          #My-Principles {
            align-self: flex-end;
            color: #d9d9d9;
          }

          .Link-Text {
          display: inline-flex;   /* text + arrow inline */
          align-items: center;
          gap: 4px;
          text-decoration: none;
          font-size: 15px;
          font-weight: 600;
          color: #000;
          margin-bottom: 24px; /* space below "View all" */ 
          }

        .Link-Text:hover {
          color: #0243C4;
        }

        /* Logo Carousel */

        .logo-carousel {
          position: relative;
          overflow: hidden;
          width: 100%;
          padding: 20px 0;
          background-color: #fff;
          margin-top: 100px;
          
        }

        /* Gradiente transparente nas extremidades */
        .logo-carousel::before,
        .logo-carousel::after {
          content: "";
          position: absolute;
          top: 0;
          width: 80px; /* largura do fade — pode ajustar */
          height: 100%;
          z-index: 2;
          pointer-events: none; /* deixa clicável o conteúdo embaixo */
        }

        .logo-carousel::before {
          left: 0;
          background: linear-gradient(to right, white 0%, transparent 100%);
        }

        .logo-carousel::after {
          right: 0;
          background: linear-gradient(to left, white 0%, transparent 100%);
        }

        .logo-track {
          display: flex;
          gap: 50px;
          white-space: nowrap;
          align-items: center
        }

        .logo-track img {
          height: 30px;
          object-fit: contain;
          flex-shrink: 0;
        }

        @media (max-width: 768px) {
          .logo-track img {
            height: 40px;
          }
         .logo-track {
            gap: 30px;
          }
          .logo-carousel::before,
          .logo-carousel::after {
            width: 50px;
          }
        }

        .logo-track img.logo-NEXT {
          height: 35px;
        }

        .logo-track img.logo-INT {
          height: 40px;
        }

        .logo-track img.logo-Squair {
          height: 25px;
        }

        .logo-track img.logo-Ferrero {
          height: 25px;
        }

        .logo-track img.logo-Kinder {
          height: 40px;
        }

        .logo-track img.logo-MDFItalia {
          height: 40px;
        }

        .logo-track img.logo-Rold {
          height: 40px;
        }

        .logo-track img.logo-ESA {
          height: 60px;
        }

        .logo-track img.logo-DeRucci {
          height: 60px;
        }

        .logo-track img.logo-SparkReply {
          height: 40px;
        }

        .logo-track img.logo-DeLonghi {
          height: 40px;
        }

        .logo-track img.logo-Braun {
          height: 40px;
        }

        .logo-track img.logo-Pepsico {
          height: 45px;
        }

        .logo-track img.logo-TotalTool {
         
        }

        .logo-track img.logo-Diwergo {
          
        }

        .Section-Opening {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .Section-Star {
          height: 40px;
        }


        .Section-Title {
          font-size: 39px;
          font-weight: 600;
          text-align: center;
        }

        .Skills-Section {
          margin-top: 100px;
          display: block;
          margin-left: 100px;
          margin-right: 100px;
        }

        .Skills-Grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */
          gap: 32px; /* espaço entre colunas */
          margin: 40px 0;
        }

        .Skill-Card {
          text-align: center;
        }

        .Skill-Card lord-icon {
          margin-bottom: 16px; /* espaço entre ícone e texto */
        }

        .Skill-Card p {
          font-family: "Inter", sans-serif;
          font-size: 16px;
          line-height: 1.6;
        }

        /* Responsividade: telas até 768px */
        @media (max-width: 768px) {
          .Skills-Section {
            margin-top: 100px;
            display: block;
            margin-left: 20px;
            margin-right: 20px;
        }
        .Skills-Grid {
          grid-template-columns: 1fr; /* apenas 1 coluna */
        }
        }

        .Project-Section {
          margin-left: 100px;
          margin-right: 100px;         
        }

        /* Responsividade: telas até 768px */
        @media (max-width: 768px) {
          .Project-Section {
            margin-left: 20px;
            margin-right: 20px;         
        }
        }

        .Project {
          margin-bottom: 40px;          
          margin-top: 50px;
        }

        .Project-Title {
          display: inline-block;
          margin-bottom: 0;
          font-size: 24px;
          font-weight: 600;
          margin-right: 8px;   
          text-decoration: none; 
          color: #000;
        }

        .Project-Title:hover {
          color: #0243C4;
        }

        .Project-Subtitle {
          display: inline-block;
          margin-bottom: 0;
          font-size: 24px;
          font-weight: 600;
          color: #7b7b7b;
          text-decoration: none;
        }

        .Project-Subtitle:hover {
          color: #006FEE;
        }

        .Project-Description {
          font-size: 16px;
          margin-top: 24px;
          margin-bottom: 24px;
        }

        .Tags {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
        }

        /* Estilo básico das tags */
        .tag {
          background-color: #d9d9d9; /* cinza claro */
          color: #000000;
          padding: 6px 14px;
          margin: 5px;
          border-radius: 9999px; /* totalmente arredondado */
          font-size: 14px;
          font-weight: 600;
          cursor: default;
          transition: all 0.2s ease;
          align-self: center;
        }

      /* Interação ao passar o mouse */
        .tag:hover {
        background-color: #333;
        color: white;
        transform: scale(1.05); /* leve zoom */
        }

        .Project-Hero { 
          margin-top: 24px;
          object-fit: cover;
          border-radius: 10px;
          display: flex;
          align-items: stretch;
          flex: 1;
          overflow: hidden;  /* importante para cortar a imagem nos cantos arredondados */
        }

        .Project-Image {
          width: 100%;
          height: 100%;  
          object-fit: cover;
          border-radius: 10px;
        }

        .Testimonials-Section {
          margin-top: 100px;
        }

         .Testimonial-Card {
          min-width: 400px;          
          padding: 30px;
          background-color: #D9D9D9;
          border-radius: 10px;
          display: flex;
          flex-direction: column;
        }       

        .Testimonial-Picture {
          border-radius: 50%;
	        width: 68px;
	        border: 2px solid #cec5c5;
          margin-right: 20px;
        }

        .Testimonial-Name {
          font-weight: 600;
          color: black;
          display: block;
          margin-bottom: 8px;
        }

        .Testimonial-Subtitle {
          display: block;
          margin-top: 0;
        }

        .Testimonials-UserDetails {
          display: flex;
          align-items: center;
        }

        .Testimonial-DetailsBox {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
        }
        
        /* -------------------- CAROUSEL TESTIMONIALS CONTAINER -------------------- */
        .Testimonials-Wrapper {
          position: relative;
          max-width: 100%;
          overflow: hidden;
          padding: 0 40px;
          margin-left: 50px;
          margin-right: 50px;
          margin-top: 100px;
        }

        .Testimonials-Container {
          display: flex;
          gap: 20px;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          padding-bottom: 20px;
          padding-left: 20px;
          padding-right: 20px;
          /* 🔽 esconde a barra de rolagem */
          scrollbar-width: none;       /* Firefox */
          -ms-overflow-style: none;    /* IE e Edge antigo */
        }

        .Testimonials-Container::-webkit-scrollbar {
          display: none;               /* Chrome, Safari */
        }

        /* -------------------- ARROWS -------------------- */
        .Arrow {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background: rgba(255, 255, 255, 0.3);
          border: none;
          cursor: pointer;
          padding: 10px 12px;
          border-radius: 50%;
          backdrop-filter: blur(5px);
          transition: all 0.3s ease;
          color: #333;
          font-size: 22px;
        }

        .Arrow:hover {
          background: rgba(255, 255, 255, 0.8);
          color: #000;
          transform: translateY(-50%) scale(1.1);
        }

        .Arrow.Left {
          left: 10px;
        }

        .Arrow.Right {
          right: 10px;
        }


        /* -------------------- RESPONSIVE -------------------- */
        @media (max-width: 900px) {
          .Testimonial-Card {
            flex: 0 0 90%;         /* ocupa 90% da largura da tela */
            min-width: unset;      /* remove o min-width fixo */
            margin: 0 auto;        /* centraliza o card */
          }

          .Testimonials-Wrapper {
            padding: 0 10px;
            margin: 40px 0;
          }

          .Arrow {
            top: 95%;              /* coloca as setas abaixo dos cards */
            transform: translateY(0);
            background: rgba(255, 255, 255, 0.8);
          }

          .Arrow.Left {
            left: 35%;
          }

          .Arrow.Right {
            right: 35%;
          }
        }

        @media (max-width: 480px) {
          .Testimonial-Card {
           flex: 0 0 100%;        /* ocupa toda a tela em telas bem pequenas */
            border-radius: 8px;
            padding: 20px;
          }

          .Arrow.Left {
            left: 25%;
          }

          .Arrow.Right {
            right: 25%;
          }
        }

        .CTA-Section {
          margin-top: 100px;
        }

        .CTA {
          display: flex;
          flex-direction: column; /* conteúdo em coluna */
          align-items: center;    /* centraliza horizontal */
          text-align: center;     /* deixa textos alinhados */
        }

        #CTA-Writing {
          margin-top: 0;
          margin-bottom: 20px;
        }

        .cta-animation {
          width: 100%;       /* ocupa até 100% do espaço disponível */
          max-width: 250px;  /* mas nunca passa de 250px */
          height: auto;      /* mantém a proporção */
          margin: 0 auto;    /* centraliza */
          display: block;    /* garante comportamento de bloco */
          margin-bottom: 30px;
        }

         /* CTA button */
        .CTA-Button {
          background-color: #006FEE;
          color: #fff;
          border-radius: 9999px;
          border-width: 0;
          padding: 10px 25px;
          font-weight: 600;
          font-size: 18px;
          cursor: pointer;
          margin-top: 30px;
          text-decoration: none;
        }

        .CTA-Button:hover {
          background-color: #0A1940;
          color: #fff;
        }

       .Footer-Wrapper {
          display: flex;
          flex-direction: row;
          gap: 32px; /* espaço entre colunas */
          justify-content: space-between;
          background-color: #d9d9d9;
          padding: 100px;
          padding-bottom: 0;
          margin-top: 100px;
          margin-bottom: 0;
        }

        .Footer-LogoAndName {
          display: flex;
          flex-direction: column;
          align-content: center;
        }

        .Footer-Logo {
          max-width: 200px;
          cursor: pointer;
        }

        .Footer-LogoLink {
          text-decoration: none;
        }
        

        .Footer-Rafaela {
          font-weight: 700;
          font-size: 27px;
          display: inline-block;
          margin-top: 10px;
          cursor: pointer;
          text-decoration: none;
          color: #000;
        }

        .Footer-WebsiteNavigation {
          display: flex;
          flex-direction: column;
          
        }

        .Footer-Social {
          display: flex;
          flex-direction: column;
        }

        .Footer-TermsCredits {
          display: flex;
          flex-direction: column;
        }

        .Footer-Links {
          font-size: 15px;
          font-weight: 600;
          cursor: pointer;
          display: block;
          line-height: 30px;
          text-decoration: none;
          color: #000;
        }

        .Footer-Links:hover {
          color: #0243C4;
        }

        .Footer-Email {
          font-size: 15px;
          font-weight: 600;
          display: block;
          margin-top: 0;
          
        }

        .SocialLinks_Wrapper {
          display: flex;
          flex-direction: row;
          gap: 5px;
          
        }

        .SocialLink {
          width: 31px;
          height: 31px;
          fill: #000;           /* VERY important */
          display: block;
        }

        .SocialLink:hover {
          fill: #0243C4;
        }

        .Footer-Copyright {
          background-color: #D9D9D9;
          padding: 100px;
          padding-top: 50px;
          padding-bottom: 50px;
          margin-top: 0px;
          text-align: center;
        }

        /* Mobile Behaviour */
      @media (max-width: 768px) {
        .Footer-Wrapper {
          display: flex;
          flex-direction: column;
          gap: 32px; /* espaço entre colunas */
          background-color: #d9d9d9;
          padding: 100px;
          padding-bottom: 0;
          margin-top: 100px;
          margin-bottom: 0;
          
          }

          .Footer-LogoAndName {
            display: flex;
            flex-direction: column;
          }

      }