body {
  margin: 0;
  background-color: #F5F4EE;
  font-family: Poppins;
  overflow-x: hidden; /* Prevent horizontal scroll */
  padding: 0;
}

h1 {
  margin: 0;
}

h3 {
  margin: 0;
}

p {
  padding: 0;
  color: #181819;
  font-family: Poppins;
  margin: 0;
}

ul {
  margin: 0;
}

li {
  margin: 0;
}

.container {
  width: 90%; /* Start with 90% for smaller screens */
  margin: 0 auto; /* Center the container */
  box-sizing: border-box; /* Include padding in the width calculation */
  margin-bottom: 8rem;
}

.nav-container {
  display: flex;
  padding: 1rem 0rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 4rem;
}

.hero-section {
  display: flex;
  flex-wrap: wrap; /* Allow content to wrap on smaller screens */
  justify-content: center; /* Center content for all screen sizes */
  max-width: 1200px; /* Sets a maximum width for the hero section */
  margin: auto; /* Center the hero-section */
  gap: 24px; /* Adjust the gap between .content-left and .content-right */
}

.content-left {
  padding-top: 0; /* Minimal padding for mobile screens */
}

.content-left, .content-right, .tagline, .download-button, .first-year-price, .avatar, .social-proof-copy {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content horizontally */
  text-align: center; /* Center text */
}

.plugin-img {
  width: 80%; /* Adjust width to scale images nicely on mobile */
  max-width: 600px; /* Limit the size to not overflow the viewport */
  height: auto; /* Maintain aspect ratio */
}

/* Base styles for mobile-first approach */
.tagline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Center align flex items */
  text-align: center; /* Center align text */
  width: 100%; /* Ensure full width for alignment */
  margin-bottom: 3.5rem;
  margin-top: 0;
}

.tagline .heading, .tagline .description {
  width: 100%; /* Ensure full width for text alignment */
  text-align: center; /* Explicitly center-align text */
}

/* Ensure the rest of your base styles are mobile-friendly and centered as needed */

.tagline .heading {
  font-size: 3.5rem;
  font-weight: 600;
  line-height: normal;
  margin: 0 0 .60rem 0; /* Add bottom margin to create space */
}

.tagline .description {
  color: #534F4D;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

.download-button {
  display: flex;
  padding: 1.1rem;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: #BF4923;
  text-decoration: none;
  color: #ffffff;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  line-height: normal;
  max-width: fit-content;
}

.download-button:hover {
  background: #A33E1F; /* Darker shade when hovered */
  cursor: pointer; /* Changes the cursor to a pointer to indicate it's clickable */
}

.first-year-price {
  margin-bottom: 2rem;
}

.first-year-price p {
  color: #534F4D;
  font-size: .90rem;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}

.highlight {
  color: #BF4923;
  font-size: .90rem;
  font-weight: 600;
  line-height: normal;
}

.number {
  color: #BF4923;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: normal;
}
.social-proof {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

.avatar {
  position: relative;
  width: 156px; /* Adjust the width as necessary */
  height: 44px;
  flex-shrink: 0;
}

.avatar-style {
  border-radius: 30px;
  width: 44px;
  height: 44px;
  position: absolute;
}

.avatar-style:nth-child(5) { left: 108px; z-index: 5; }
.avatar-style:nth-child(4) { left: 81px; z-index: 4; }
.avatar-style:nth-child(3) { left: 54px; z-index: 3; }
.avatar-style:nth-child(2) { left: 27px; z-index: 2; }
.avatar-style:nth-child(1) { left: 0; z-index: 1; }

.social-proof-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  font-size: .90rem;
  font-weight: 500;
  margin-left: 1rem;
}

.social-proof-copy div p {
  margin: 0; /* Remove default paragraph margins */
}

.content-right {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;

}

.hero-image {
  width:fit-content;
  box-sizing: border-box;
  margin: auto 0;
}

.pas {
  margin-bottom: 8rem;
}

.grid-container {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap as needed */
  gap: 40px; /* Space between items, adjust as needed */
  justify-content: center; /* Center items in the container */
  align-items: center;
  margin: 0 auto; /* Center the container itself */
  max-width: 1000px; /* Adjust based on your design needs */
}

.problem, .agitate, .sub-content {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center-align the content vertically */
  text-align: center; /* Center-align text */
  width: 100%; /* Full width on mobile devices */
  font-size: 1rem;
  font-weight: 500;

  /* Ensure items can grow and have a base width */
  flex: 0 0 100%; /* Full width on mobile */
}

.sub-content {
  color: #534F4D;
}

.emoji {
  font-size: 2rem;
  margin-bottom: 0.50rem;
}

.emoji + p {
  margin-top: auto; /* Adds space between the emoji and the text below it */
}

/*Grid container*/

/*
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 40px; 
  max-width: 1000px; 
  margin: 0 auto; 
}


.problem, .agitate {
  display: flex;
  flex-direction: column;
  align-items: center; 
  text-align: center; 
}


.img-problem {
  max-width: 100%; 
  height: auto; 
}


.sub-content {
  display: flex;
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  font-style: italic; 
}


.img-problem {
  width: 300px;
}
*/

.solution {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center-aligns the content vertically */
  text-align: center; /* Centers the text within each flex item */
}

.better-way p, .rea-solution p, .list-benefits .benefit p, .fine-print p {
  margin: 0; /* Removes default margin from paragraphs for consistent spacing */
}

.better-way {
  color: #181819;
  text-align: center;
  font-size: .90rem;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 6rem;
}

.rea-solution {
  margin-bottom: 2rem; /* Keeps existing bottom margin */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center-aligns children if they're not already */
}

.section-heading {
  color: #181819;
  text-align: center;
  font-size: 2.3rem;
  font-weight: 500;
  line-height: normal;
}

.rea-solution .solution-heading {
  margin-bottom: 0.60rem; /* Increased specificity */
}

.solution-description {
  color: #BF4923;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  line-height: normal;
}  

.benefit {
  display: flex;
  align-items: center; /* Keeps the tick icon aligned with the text container */
  gap: 4px; /* Space between the tick icon and the text container */
  margin-bottom: 1rem;
}

.tick {
  width: 24px; /* Adjust as needed */
  height: auto; /* Maintains aspect ratio */
}

.text-container {
  display: flex;
  flex-direction: column; /* Stacks the main text and fine print vertically */
}

.benefit-copy {
  margin: 0; /* Removes default margin for a cleaner look */
  color: #181819;
  font-size: 1rem;
  font-weight: 500;
  line-height: normal;
}

.fine-print {
  text-align: left; /* Aligns the fine print to the left */
}

.fine-print p {
  margin: 0; /* Optional: Adjusts margin to ensure alignment */
  color: #BF4923;
  font-size: .85rem;
  font-weight: 500;
  line-height: normal;
}


.value-section {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center aligns flex children horizontally */
  text-align: center; /* Centers text within each child */
  width: 100%; /* Adjust width as necessary */
}

.value-heading {
  margin-bottom: 3rem;
}

.button {
  margin-bottom: 1rem;
}

.value-heading p, .first-year-price p, .social-proof-copy div p {
  margin: 0; /* Removes default margin for a cleaner look */
}

.avatar-style {
  width: 50px; /* Adjust based on your design */
  height: 50px; /* Adjust based on your design */
  border-radius: 50%; /* Makes images circular */
  object-fit: cover; /* Ensures images maintain aspect ratio */
}

.avatar {
  display: flex;
  gap: 10px; /* Space between avatar images */
}

.social-proof-copy {
  display: flex;
  flex-direction: column; /* Stacks heart emoji and number of people vertically */
  align-items: center; /* Center aligns these elements */
}

.value-heading {
  color: #181819;
  text-align: center;
  font-size: 3rem;
  font-weight: 600;
  line-height: normal;
}

.footer-section {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center-aligns the content vertically */
  text-align: center; /* Centers the text within each flex item */
}

.footer-logo img {
 width: 56px;
}

.footer-tagline p {
  color: #534F4D;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  margin: .2rem auto;
}

.links {
  margin-top: 2.5rem;
}

.privacy {
  margin-bottom: 0.5rem;
}

.privacy, .tc, a {
  color: #6D6A69;
  text-align: center;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
}

.privacy:hover, .tc:hover, a:not(.download-button):hover {
  color: #181819; /* Change color on hover */
  cursor: pointer; /* Change cursor to indicate clickable area */
}

/* Privacy policy and Terms and Conditions */

/*Privacy Policy*/
.top-heading, h1 {
  margin-top: 3rem;
  margin-bottom: .75rem;
}

.last-update {
  color: #534F4D;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 1rem;
}

.top-heading, p {
  margin: 2rem 0;
}

h3 {
  margin: 1rem 0;
  font-size: 18px;
  font-weight: 600;
}

h2 {
  color: #333;
}

ul {
  margin-top: -1rem;
  margin-bottom: 2rem;
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}
li:before {
  content: "• ";
  color: #181819; /* Adjust the color to match Rea's theme */
}

@media screen and (min-width: 768px) {
  .hero-section {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .content-left {
    padding-top: 2.5rem !important;
  }

  .content-left, .content-right, .tagline, .download-button, .avatar, .social-proof-copy {
    flex: 1;
    align-items: flex-start; /* Align content to the start (left) */
  }

  .first-year-price p {
    text-align: left; /* Align the text of first-year-price to the left */
  }

  .tagline, .tagline .heading, .tagline .description {
    /* Adjusts alignment for larger screens */
    align-items: flex-start;
    text-align: left;
  }

  .problem, .agitate, .sub-content {
    flex: 0 0 calc((100% - 80px) / 3); /* Adjusts to 3 columns on wider screens */
}

  .tagline .heading {
    font-size: 3.3rem !important;
  }

  .content-left {
    margin-bottom: 2rem;
  }

  .value-heading p {
    margin-bottom: 1rem; /* Adjust spacing as needed */
  }

  .download-button {
    padding: 1rem 1rem; /* Smaller padding for a smaller button */
    font-size: 0.9rem; /* Smaller font size for the text in the button */
  }

  .solution-heading {
    font-size: 2rem; /* Smaller font size for mobile */
  }

  .solution-description {
    font-size: 1rem; /* Smaller font size for mobile */
  }

  .social-proof-copy {
    flex-direction: column; /* Ensure social proof elements stack vertically */
  }

  .social-proof-copy div {
    text-align: center; /* Center-align social proof copy for consistency */
    width: 100%; /* Use full width to allow natural line break */
  }

  .hero-image {
    margin: auto;
  }
}

@media media and (min-width: 1400px) {
  .container {
    width: 70%;
  }
}