/* Hero section */
.section-container-hero {
  background-color: #0954f6;
  background-image: url('/public/assets/noise-light.png');
  display: flex;
  justify-content: center;
  align-items: center;
  padding: auto 16px;
}

.hero-left-content {
  margin: 32px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-content {
  width: fit-content;
}

.hero-description {
  width: 100%;
}

.hero-tagline p {
  margin: 40px auto 0; /* Centered margin for responsiveness */
  color: var(--Content, #121212);
  font-size: 48px;
  font-family: Cal Sans;
  letter-spacing: 0.01em;
  flex-wrap: wrap;
  box-sizing: border-box; /* Added */
  color: #FFF;
  text-align: center;
  white-space: pre-line; /* Allow text to wrap within the container */
}

.hero-tagline {
  display: flex;
  margin-bottom: 40px;
}

span {
  color: #042772;
  margin-left: 4px;
}

.hero-button {
  margin: 0 0 56px 0;
  box-sizing: border-box; /* Added */
  display: flex;
  justify-content: center;
}

.pricing-button {
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-family: Cal Sans;
  letter-spacing: 0.045em;
  line-height: 24px; /* 100% */
  text-decoration: none;
  width: fit-content;
  background:#f60954;
  padding: 16px 40px;
  box-sizing: border-box;
  border-radius: 8px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.pricing-button:hover {
  opacity: 90%;
}

.hero-right-image {
  width: 100%;
  margin: 0;
  background-color: #0954f6;
  background-image: url('/public/assets/noise-light.png');
  padding: 0 0 56px;
}


/* Strip section */

.strip-section-container {
  margin: 32px 0 0 0;
}

.strip-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 0;
  
}

.strip-copy {
  width: 170px;
  color: #121212;
  font-size: 18px;
  font-family: Cal Sans;
  letter-spacing: 0.045em;
  line-height: 24px; /* 150% */
  margin: 0 80px 0 0;
}  

.strip-copy-4 {
  margin: 0;
  width: 170px;
  color: #121212;
  font-size: 18px;
  font-family: Cal Sans;
  line-height: 24px; /* 150% */
}

@media screen and (max-width: 768px) {
  .strip-content {
    flex-direction: column; /* Stack elements vertically for small screens */
    text-align: center; /* Center-align text for small screens */
    box-sizing: border-box;
  
  }

  .strip-copy, .strip-copy-4 {
    width: auto; /* Allow text to flow naturally */
    margin: 0 0 20px 0; /* Adjust margin for small screens */
    box-sizing: border-box;

  }
}  


/* How it works section */
.section-title {
  text-align: center;
  margin: 64px 0;
  max-width: 100%;
}

.title-container {
  display: inline-block;
  position: relative;
}

.title-container p {
  color: #121212;
  font-size: 56px;
  font-family: Cal Sans;
  margin: 40px 0 24px 0;
  text-wrap: balance;
}

.title-doodle {
  display: block;
  margin: 0 auto;
  position: absolute;
  width: fit-content;
  bottom: 0;
  left: 0;
  right: 0;
}

.content-container .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px,1fr));
  gap: 16px;
  justify-content: center;
}

.content-container .grid-container .box {
  border: 2px solid #0954f6;
  border-left: 12px solid #0954f6;
  background: #Fff;
  border-radius: 16px;
}

.img-box {
    background-color: #fff;
    padding: 48px 0 0 86px;
    border-bottom: 2px dashed #0954f6; 
    overflow: hidden;
    margin-bottom: -2px; /* Remove the gap */
    border-radius: 16px 16px 0 0;
}

.how-it-works-img {
  margin-bottom: -4px; /* Remove the gap */
  width: fit-content;
}

.how-it-works-content {
  padding: 24px 24px 32px 24px;
}

.how-it-works-title {
  color: #121212;
  font-size: 24px;
  font-family: Cal Sans;
  letter-spacing: 0.02em;
  line-height: 32px; /* 133.333% */
  padding: 0 0 12px 0;
}

.how-it-works-description {
  color: var(--Content, #121212);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px; /* 150% */
  margin: 0;
}

/* Quote section */
.quote-card p {
  margin: 0 auto;
  width: fit-content;
  color: #0954f6;
  text-align: center;
  font-size: 48px;
  font-family: Cal Sans;
  line-height: 60px; /* 125% */
}

.quote-card {
  border: 2px dashed #0954f6;
  background: #fff;
  padding: 48px 100px 32px 100px;
  margin: 100px 0 0 0;
}

/* Media query for smaller screens (adjust max-width as needed) */
@media screen and (max-width: 768px) {
  .quote-card {
    padding: 32px 20px; /* Adjust padding for smaller screens */
    margin: 40px 0 0 0; /* Adjust margin for smaller screens */
  }

  .quote-card p {
    font-size: 32px; /* Adjust font size for smaller screens */
    line-height: 40px; /* Adjust line height for smaller screens */
  }
}

.forget-about-img {
  width: 98px;
  height: 98px; 
  margin: 0 0 4px -16px;
}

.content-container .forget-about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px,1fr));
  gap: 8px;
  justify-content: center;
}

.content-container .forget-about-grid .forget-about-box {
  padding: 48px;
  border: 2px solid #121212;
  background-color: #FFF;
  border-radius: 16px;
}

.forget-about-box p {
  color: var(--Content, #121212);
  text-align: left;
  font-size: 21px;
  font-weight: 600;
  line-height: normal;
}

.forget-about-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 64px 0 0 0;
}

.forget-about-button .pricing-button {
  background-color: #0954f6;
}

/* Why you'll love section */

.love-us-card {
  display: flex;
  border: 2px solid #121212;
  background: #fff;
  padding: 56px 64px 0 64px; /* Adjust the right padding */
  width: 100%; /* Ensure the card takes the full width of its container */
  box-sizing: border-box;
  border-radius: 16px;
}

.love-us-illusration-content {
  margin: 0 40px 0 0; /* Adjust the right margin */
}

.love-us-illusration-content p {
  color: var(--Content, #121212);
  font-size: 48px;
  font-family: Cal Sans;
  line-height: 56px;
  width: fit-content;
  flex-wrap: wrap;
}

.love-us-illusration-content img {
  margin: -32px 0 0 -24px;
}

.love-us-content-card {
  margin: 72px 0 0 0;
}

.love-us-top-content,
.love-us-bottom-content {
  max-width: 100%; /* Maximum width on smaller screens */
  width: auto; /* Allow content to expand to full width */
  box-sizing: border-box;
}

 .love-us-top-content {
  background: #F7F8F9;
  height: fit-content;
  border-radius: 8px;
  padding: 32px 32px 16px 32px;
  width: 700px;
 }

.love-us-bottom-content {
  background: #0954f6;
  height: fit-content;
  padding: 32px 32px 32px 32px;
  width: 700px;
  margin: 12px 0 0 0;
  border-radius: 8px;
}

.love-us-story {
  color: var(--Content, #121212);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin: 0 0 16px 0;
}

.love-us-points-curves {
  color: #fff;
  font-size: 24px;
  font-family: Cal Sans;
  letter-spacing: 0.02em;
  line-height: 30px;
}

/* Media query for smaller screens */
@media (max-width: 1150px) {
  .love-us-card {
    flex-direction: column; /* Stack elements vertically on smaller screens */
    padding: 32px;
  }

  .love-us-illusration-content p {
    font-size: 48px; /* Adjust font size for smaller screens */
    line-height: 56px; /* Adjust line height for smaller screens */
    width: 100%; /* Ensure full width for the text */
    text-align: left; /* Left-align the text */
  }

  .love-us-illusration-content img {
    margin: 0 0 0 -38px; /* Center-align the image */
    box-sizing: border-box;
  }

  .love-us-content-card {
    margin: -16px 0 0; /* Adjust margin for responsiveness */
  }

  .love-us-top-content, .love-us-bottom-content {
    width: 100%; /* Ensure full width for content cards */
    box-sizing: border-box;
  }

  .love-us-points-curves {
    font-size: 24px; /* Adjust font size for smaller screens */
    line-height: 34px; /* Adjust line height for smaller screens */
  }
}

/* Service section */

.content-container .services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px,1fr));
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.content-container .services-grid .service {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px;
  border: 2px solid var(--Content, #121212);
  border-radius: 16px;
  background-color: #F7F8F9;
}

.service-name {
  color: #121212;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 12px;
}

.service-description {
  color: #565B66; /* You can adjust the color as needed */
  text-align: left;
  font-size: 16px; /* You can adjust the font size as needed */
  font-weight: 400;
  line-height: 22px; /* You can adjust the line height as needed */
}

/*Pricing section*/
.content-container .pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px,1fr));
  gap: 16px;
  justify-content: center;

}

.content-container .pricing-grid .pricing-card-box {
  border: 2px solid #0954f6;
  border-radius: 16px;
  background-color: #FFF;
}

.pricing-card-box {
  /*padding: 32px;*/
  text-align: left;
}

.top-price-details {
  padding: 32px 24px 40px 24px;
  border-bottom: dashed 2px #0954f6;
}

.price-title p {
  color: var(--Content, #121212);
  font-size: 16px;
  font-family: Cal Sans;
  letter-spacing: 0.04em;
  line-height: 24px; /* 150% */
  margin: 0 0 12px 0;
}

.price-label {
  display: flex;
  margin: 0 0 16px 0;
}

.price {
  display: flex;
  color: var(--Content, #121212);
  font-size: 40px;
  font-weight: 700;
  line-height: 40px; /* 125% */
}

.month {
  margin: 16px 0 0 4px;
  color: #565B66;
}

.price-description {
  color: #565B66;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin: 0 0 72px 0;
}

.get-started a {
  text-decoration: none;
  color: #fff;
  display: block; /* Set display to block to take up full width */
}

.get-started-button {
  background: #0954f6;
  color: var(--Content, #121212);
  text-align: center;
  font-size: 18px;
  font-family: Cal Sans;
  letter-spacing: 0.045em;
  line-height: 24px;
  padding: 16px 0; /* Set padding-top and padding-bottom to adjust height */
  width: 100%; /* Make the button width 100% of its container */
  box-sizing: border-box; /* Ensure padding is included in the width */
  border-radius: 8px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.get-started-button:hover {
  opacity: 90%;
}

.get-started {
  margin: 0 0 24px 0;
}

.text-link {
  color: #121212;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.link a {
  color: #121212;
  text-decoration: underline;
}

.what-included {
  margin: 40px 24px 32px 24px;
}

.what-included p {
  color: var(--Content, #121212);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.list-included ul {
  color: var(--Content, #121212);
  font-size: 16px;
  font-weight: 400;
  line-height: 38px; /* 200% */
  margin: 8px 24px 0 -16px;
}

.two-task {
  color: #0954f6;
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;
}

.title {
  color: var(--Content, #121212);
  font-size: 24px;
  text-align: left;
  font-family: Cal Sans;
  letter-spacing: 0.02em;
  line-height: 32px; /* 133.333% */
  margin: 0 0 8px 0;
}

.description {
  color: #565B66;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin: 0 0 24px 0;
}

.refer-earn {
  padding: 32px 24px 40px 24px;
  
}

.link a {
  color: #121212;
  text-align: center;
  font-size: 16px;
  font-family: Cal Sans;
  letter-spacing: 0.04em;
  line-height: 24px;
  text-decoration: none;
}

.link a:hover {
  text-decoration: underline;
  opacity: 85%;
}


/*Faq section*/

.faq {
  /*
  display: flex;
  justify-content: space-between;
  align-items: center;
  */
  border-bottom: 1px solid #121212; /* Set border width to 1px */
  padding: 28px 0 21px 0; /* Increase vertical spacing for responsiveness */
  margin: 0 auto 0; /* Adjust margin for responsiveness */
  max-width: 700px; /* Set maximum card width to around 700px */
  width: 100%; /* Ensure full width on smaller screens */
  box-sizing: border-box;
  cursor: pointer;
  transition: 0.5s ease-in-out;
}

.question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #121212;
  font-size: 21px; /* Adjust the font size */
  font-family: Cal Sans;
  letter-spacing: 0.03em;
  line-height: normal;
  width: auto; /* Allow the text to adjust */
  flex-grow: 1; /* Allow text to grow and fill available space */
  text-align: left; /* Ensure text is left-aligned */
  margin: 0 0 12px 0;
  transition: 0.3s ease-in-out;
}

.faq-icon {
  width: 16px;
  flex-shrink: 0; /* Prevent icon from shrinking on smaller screens */
  transition: 0.6s ease-in-out;
}

.answer {
  color: var(--Content, #121212);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.faq-icon.active {
  transform: rotate(180deg);
  transition: 0.5s ease-in-out;
}

.answer.active {
  max-height: 500px; /* Adjust the maximum height based on your content */
  transition: 0.3s ease-in-out;
}

/*Footer section*/

/* Footer section-container with background color */
.footer-container-card {
  width: 100%; /* Full width of the viewport */
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box; /* Ensure padding is included in the width */
  margin-top: 80px;
  background-color: #0954f6;
  background-image: url('/public/assets/noise-light.png');
}

/* Footer content-container */
.footer-content-details {
  max-width: 1400px; /* Maximum width for the content container */
  width: 100%; /* Full width of the viewport */
  margin: 0 auto; /* Center the content horizontally */
  padding: 64px 16px 32px 16px;  /* Add padding to the content container (adjust as needed) */
  box-sizing: border-box; /* Ensure padding is included in the width */
  overflow: hidden; /* Prevent content from overflowing the container */
}

.footer-get-started {
  display: flex;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  font-family: Cal Sans;
  letter-spacing: 0.02em;
  line-height: normal;
  margin-bottom: 32px;
  text-align: center;
}

.footer-cta {
  border-bottom: 2px dashed #042772;
}

.footer-logo {
  width: 56px;
  margin: 32px 0 8px 0;
  box-sizing: border-box;
}

.footer-buenos-logo {
  height: 32px;
}

.footer-copyright p {
  color: #F7F8F9;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  margin: 0 auto 16px 0;
  box-sizing: border-box;
}

.socials {
  margin: 32px 0 8px 0;
}

.x-logo {
  height: 21px;
  margin-right: 12px;
}

.linkedin-logo {
  height: 21px;
}

.footer-tagline p {
  color: #F7F8F9;
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  width: 100%; /* Adjust width for responsiveness */
  margin-bottom: 40px; /* Reduce margin for responsiveness */
  box-sizing: border-box;
}

.footer-links {
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  line-height: normal;
  margin: 0 0 16px 0;
  display: flex;
  flex-wrap: wrap; /* Allow links to wrap on smaller screens */
}

.footer-links a {
  padding: 0 16px 0 0;
  color: #fff;
  font-weight: 400;
}

.footer-links a:hover {
  text-decoration: underline;
  opacity: 90%;
}

.footer-flex {
  display: flex;

}