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

html {
  scroll-behavior: smooth;
}

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

        p, span, a, button {
          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;
          }
        }


.Contact_Wrapper {
  display: flex;
  flex-direction: column;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 100px;
}

.Contact_TitleAndParagraphs {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  
}

.Contact-Title {
  font-family: "Inter";
  color: #000000;
  font-size: 48px;
  font-weight: 600;
  margin-top: 0;
}

.Contact_Paragraphs {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.Contact-Paragraph {
  font-family: "Inter";
  color: #000000;
  font-size: 16px;
  font-weight: 400;
}

.Contact-Paragraph2 {
  font-family: "Inter";
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  margin-top: 0;
}

.Postcard_Form {
  display: flex;
  flex-direction: column;
}


.Postcard_Wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #F3F3F3;
  border-radius: 10px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
  padding-top: 50px;
  position: relative; 
  margin-top: 50px;
}

/* Separating line */

.Postcard_Wrapper::after {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 50%;
  width: 1px;
  background-color: #BDBDBD;
}

.Postcard_LeftColumn {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.Faraway-So-Close {
  font-family: "Caveat";
  color: #A4A4A4;
  font-size: 67px;
  font-weight: 700;
  margin-top: 0;
}

.Postcard-WrittenText {
  font-family: "Inter";
  color: #000000;
  font-size: 23px;
  font-weight: 600;
}

.Postcard_RightColumn {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: 100px;
  
}

.Postcard-LogoWrapper {
  display: flex;
  flex-direction: row;
  justify-content: end;
}

.Postcard-Logo {
  max-width: 150px;
}

.Email_wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 0;
}

.CopyEmailBtn {
  background: #D9D9D9;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  color: #555;
  font-size: 20px;
  padding: 10px;
}

.CopyEmailBtn:hover {
  color: #006FEE;
}


.Destinatary_Wrapper {
  display: flex;
  flex-direction: column;
}

.Postcard-Input,
.Postcard-Textarea {
  width: 100%;
  border: none;
  border-bottom: 2px solid #A4A4A4;
  background: transparent;
  font-size: 20px;
  font-family: "Inter", sans-serif;
  padding: 8px 0;
  resize: none;
}

.Postcard-Textarea {
  margin-top: 20px;
  line-height: 1.6;
}

.Postcard-Input::placeholder,
.Postcard-Textarea::placeholder {
  color: #A4A4A4;
  font-weight: 400;
}

.Postcard-Input:focus,
.Postcard-Textarea:focus {
  outline: none;
  border-bottom-color: #006FEE;
}




.Compass_Wrapper {
  display: flex;
  margin-top: 20px;
}

.Compass {
  max-width: 200px;
}

/* Send It button */

.Send-It-Button_Wrapper {
  display: flex;
  flex-direction: row;
  align-self: flex-end;
}

.Send-It-Button {
  background-color: #006FEE;
  color: #fff;
  border-radius: 9999px;
  padding: 10px 20px;
  transition: all 0.2s ease;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  border-width: 0;
  margin-top: 20px;
}

.Send-It-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;
          }

      }