/*************************************************************
  1) Imports + Global Resets
**************************************************************/
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&family=Outfit:wght@700;800&display=swap");

html {
  font-size: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #1d1d1d;
  color: #fff;
  font-family: "Nunito", sans-serif;
  line-height: 1.6;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/*************************************************************
  2) Universal Section Width + Padding (Mobile First)
     - Hero, challenge-solution, value-prop, how-it-works, etc.
**************************************************************/
.hero,
.challenge-solution-section,
.value-proposition-section,
.how-it-works-section,
.detailed-features,
.faq-section,
.meet-section,
.contact-us-section,
.videos-section,
.publications-section,
#testimonials,
section {
  width: 98%; /* Nearly full width */
  margin: 0 auto 1.5rem; /* Center + bottom space */
  padding: 1rem; /* Uniform inner padding */
  border-radius: 0.75rem;
  box-sizing: border-box;
  background-color: #1d1d1d;
}

/*************************************************************
  3) Headings & Global Typography
**************************************************************/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Outfit", sans-serif;
  margin: 0 0 0.5em;
  font-weight: 700;
  color: #fff;
}

h1 {
  font-size: 1.8rem;
}
h2 {
  font-size: 1.4rem;
}
h3 {
  font-size: 1.2rem;
}

p {
  margin-bottom: 1em;
  font-size: 1rem;
  line-height: 1.5;
}

.highlight {
  color: #b4e925;
}

/*************************************************************
  4) Header & Navigation
**************************************************************/
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #1d1d1d;
  padding-top: 1rem;
  width: 94%;
  margin: 0 auto 0.75rem auto;
  border-radius: 0.75rem;
}

.logo {
  height: 60px; /* smaller for mobile */
}

.navbar {
  position: relative;
}

.menu-toggle {
  font-size: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.3s ease;
}

.menu-toggle .menu-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

.menu {
  display: none;
  position: absolute;
  top: 3rem;
  right: 0;
  background-color: #2a2a2a;
  border-radius: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  width: auto;
  min-width: 160px;
  z-index: 1010;
}

.menu-open {
  display: block !important;
}

.menu li {
  white-space: nowrap; /* Prevent text from wrapping to the next line */
}

.menu li a {
  display: block;
  padding: 0.75rem;
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
}

.menu li a:hover {
  background-color: #333;
  color: #b4e925;
}

.menu-toggle .menu-icon.rotate {
  transform: rotate(90deg); /* Rotate when the menu is open */
}

/*************************************************************
  5) Basic Icon Class
**************************************************************/
.icon {
  font-size: 1.5rem;
  color: #b4e925;
}

/*************************************************************
  6) Scroll-to-Top Floating Button
     - Ensure fully visible in mobile view
**************************************************************/
.scroll-to-top {
  position: fixed;
  display: flex;
  bottom: 0.2rem; /* Keeps the button at the bottom with enough space */
  left: 50%; /* Centers horizontally relative to the viewport */
  transform: translateX(
    -50%
  ); /* Offsets it by 50% of its own width to center */
  width: 2rem;
  height: 2rem;
  background-color: #b4e925;
  color: #1d1d1d;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-size: 1.25rem;
  display: none; /* Initially hidden, shown via JS when user scrolls */
  align-items: center;
  justify-content: center;
  z-index: 9999; /* Ensures it stays above other elements */
}

.scroll-to-top:hover {
  background-color: #a4d414;
}

/*************************************************************
  7) Hero Section
**************************************************************/
.hero {
  width: 94%;
  text-align: center; /* center text on mobile */
  background: url("hero_bg.png") center/cover no-repeat;
  margin: 0 auto 1.5rem;
  padding: 1rem 1rem;
  border-radius: 0.75rem;
}

.hero .hero-content {
  margin: 0 auto 1rem;
  max-width: 600px; /* Avoid super-wide text lines */
}

.hero h1 {
  margin-bottom: 0.5rem;
}

.hero p {
  font-size: 1rem;
}

.cta {
  display: inline-block;
  background-color: #b4e925;
  color: #1d1d1d;
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 1.25rem;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.cta:hover {
  transform: scale(1.05);
  background-color: #fff;
  color: #1d1d1d;
}

.hero-image .hero-image {
  max-width: 80%;
  height: auto;
  margin: auto;
}

/* Animal stats in hero */
.animal-stats {
  display: block;
  margin: 1rem auto 0;
  max-width: 80%;
  height: auto;
}

.animal-group {
  margin-bottom: 0.5rem;
}
.animal-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  margin-left: -0.8rem;
}

.animal-text {
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}
.big-number {
  font-size: 1.2rem;
  color: #b4e925;
}

/*************************************************************
  8) Generic Cards
**************************************************************/
.cards {
  display: flex;
  flex-direction: column; /* stack on mobile */
  gap: 1rem;
  margin-top: 1rem;
}

.card {
  background: url("hero_bg.png") center/cover no-repeat;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.card:hover {
  transform: scale(1.05);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}
.card-icon {
  margin-bottom: 0.5rem;
}
.card-content h4 {
  font-family: "Outfit", sans-serif;
  font-size: 1.2rem;
  margin-bottom: 0.5em;
  color: #fff;
}
.card-content p {
  font-size: 1rem;
  color: #ccc;
  margin: 0;
}

/*************************************************************
  9) Value Proposition Section
     - Single-column so text doesn't stretch
**************************************************************/
.value-proposition-cards {
  display: flex;
  flex-direction: column; /* stack on mobile */
  gap: 1rem;
  margin-top: 1rem;
}

.value-proposition-card {
  background: url("hero_bg.png") center/cover no-repeat;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.value-proposition-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

/*************************************************************
  10) Testimonial Section
     - Single-column so text doesn't stretch
**************************************************************/
#testimonials {
  background-color: #1d1d1d;
  padding: 1rem;
}

/* Arrows */
.testimonial-topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}
.arrow-button {
  background: none;
  border: 2px solid #b4e925;
  color: #b4e925;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  margin-left: 0.5rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.arrow-button:hover {
  background-color: #b4e925;
  color: #1d1d1d;
}

/* Single-column for mobile */
.testimonial-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: scroll; /* keep scrolling logic, but hide scrollbar 
  visually */
  scrollbar-width: none; /* For Firefox: hide scrollbar */
  width: 100%;
  scroll-behavior: smooth;
}

.testimonial-row::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Edge: hide scrollbar */
}

.testimonial-card {
  position: relative;
  background-color: #292929;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  padding: 2rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 280px;
}

.testimonial-quote-icon {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1d1d1d;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonial-quote-icon i {
  color: #b4e925;
  font-size: 1rem;
}

.testimonial-text {
  font-size: 1rem;
  color: #ccc;
  margin-top: 1rem;
  line-height: 1.4em;
  font-style: italic;
  text-align: center;
}

.testimonial-title {
  font-size: 1.05rem;
  font-weight: 600;
  font-family: "Outfit", sans-serif;
  color: #ccc;
  margin-top: 1.2rem;
  line-height: 1.4em;
  text-align: center;
}

/*************************************************************
  11) Videos Section
**************************************************************/
.videos-section {
  padding: 1rem;
  border-radius: 0.75rem;
  background-color: #1d1d1d;
  text-align: center;
  max-height: 900px;
}

.video-item {
  flex: 1;
  width: 100%;
  background: url("hero_bg.png") center/cover no-repeat;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  margin-bottom: 1rem;
}
.video-item h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* Maintain 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  max-width: 1200px; /* Limit the maximum size of the video */
  max-height: 675px;
  margin-left: auto; /* Center the video horizontally */
  margin-right: auto;
  width: 100%; /* Allow it to scale down to fit smaller screens */
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 1200px; /* Limit the maximum size of the video */
  max-height: 675px;
}

/*************************************************************
  12) How It Works Section
**************************************************************/
.how-it-works-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.how-it-works-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("hero_bg.png") center/cover no-repeat;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.how-it-works-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}
.how-it-works-card .card-content h4 {
  font-size: 1.2rem;
  text-align: left;
  margin-bottom: 0.5rem;
  color: #fff;
}
.how-it-works-card .card-content p {
  font-size: 1rem;
  color: #ccc;
  text-align: left;
}
.how-it-works-card .card-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}

.experience-cta {
  text-align: center;
  margin-top: 1rem;
}

/*************************************************************
  13) Features Section
**************************************************************/
.feature-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.feature {
  background: url("hero_bg.png") center/cover no-repeat;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.feature:hover {
  transform: scale(1.05);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}
.feature h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: #fff;
}
.feature p {
  font-size: 1rem;
  color: #ccc;
}

/*************************************************************
  14) Publications Section
**************************************************************/
.publications-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

.publication-card {
  display: flex;
  flex-direction: column;
  background-color: #292929;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

.publication-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  opacity: 0.4;
}

.publication-content {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.publication-date {
  font-size: 0.9rem;
  color: #bbbbbb;
  margin-bottom: 0.5rem;
}

.publication-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 0.75rem;
}

.publication-link {
  font-size: 1rem;
  color: #b4e925;
  text-decoration: none;
  font-weight: 600;
}
.publication-link:hover {
  text-decoration: underline;
}

.hidden-publication {
  display: none;
}
.hidden-publication.show {
  display: flex;
}

/* Container for the "View More" Button */
.view-more-container {
  text-align: center;
  margin-top: 20px;
}

.view-more-btn {
  display: inline-block;
  background-color: #b4e925;
  color: #1d1d1d;
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 1.25rem;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.view-more-btn:hover {
  transform: scale(1.05);
  background-color: #fff;
  color: #1d1d1d;
}

/*************************************************************
  15) FAQ Section
**************************************************************/
.faq-container {
  background: #262626;
  border-radius: 0.5rem;
  padding: 1rem;
}

.faq-left,
.faq-right {
  width: 100%;
  margin-bottom: 1rem;
}

.faq-left h2 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}
.faq-left p {
  font-size: 1rem;
  color: #ccc;
}

.faq-item {
  background: #1d1d1d;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #333;
}
.faq-question {
  background: none;
  border: none;
  color: #fff;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
}
.faq-question:hover {
  background: #2a2a2a;
}
.faq-answer {
  display: none;
  padding: 0 1rem 1rem;
  font-size: 1rem;
  color: #ccc;
  line-height: 1.4em;
}
.faq-item.open .faq-answer {
  display: block;
}

.faq-answer a {
  color: #b4e925;
  text-decoration: none;
}

/*************************************************************
  16) Meet Us Section + Team Code
**************************************************************/
.meet-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.meet-item {
  background: url("hero_bg.png") center/cover no-repeat;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  padding: 1rem;
  text-align: center;
}
.meet-item .icon {
  font-size: 2rem;
  color: #b4e925;
  margin-bottom: 0.5rem;
}
.meet-line {
  width: 2rem;
  border: none;
  border-bottom: 3px solid #b4e925;
  margin: 0.5rem auto;
}
.meet-item h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.meet-item p {
  font-size: 1rem;
  color: #ccc;

  max-width: 800px; /* Limit the width of the paragraph text */
  margin-left: auto;
  margin-right: auto;
  text-align: center; /* Align the paragraph text to center */
}

/* Team code section */
.team-code-section {
  background-color: #1d1d1d;
  width: 98%;
  margin: 0 auto 1.5rem auto;
  padding: 1rem;
  border-radius: 0.75rem;
}
.team-code-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.team-snippet-card {
  background-color: #292929;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.snippet-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.team-snippet-icon {
  font-size: 1.5rem;
  color: #b4e925;
}
.snippet-title h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #fff;
  font-weight: 700;
}
.snippet-title p {
  margin: 0;
  font-size: 0.9rem;
  color: #ccc;
}
.team-snippet-card pre {
  background-color: #1d1d1d;
  color: #fff;
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-family: "Fira Code", "Consolas", monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 10rem;
  overflow: auto;
}
.team-snippet-card code::selection {
  background: #b4e925;
  color: #1d1d1d;
}

/*************************************************************
  17) Contact Us
**************************************************************/
.contact-info-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contact-item {
  display: flex;
  align-items: center;
  background-color: #292929;
  padding: 0.75rem;
  border-radius: 0.5rem;
  gap: 0.75rem;
}
.contact-item .icon {
  font-size: 1.5rem;
  color: #b4e925;
}
.contact-item span,
.contact-item a {
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  line-height: 1.4;
}

.map-container {
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  margin-top: 1rem;
}
.map-container iframe {
  width: 100%;
  height: 300px;
  border: 0;
}

/* Form Container */
.contact-form-container {
  background-color: #292929;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  margin-top: 1rem;
}

.contact-form-container h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #fff;
}

/* Form Styles */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Space between fields */
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 1rem;
  color: #fff;
  font-weight: 600;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form select {
  background-color: #1d1d1d;
  color: #fff;
  border: 1px solid #333;
  border-radius: 0.5rem;
  padding: 0.75rem;
  font-size: 1rem;
  outline: none;
  font-family: inherit; /* Matches form font */
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #999;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: #b4e925;
}

.contact-form textarea {
  resize: none; /* Prevent resizing */
}

/* Dropdown Style */
.contact-form select option {
  background-color: #1d1d1d;
  color: #fff;
  padding: 0.5rem;
}

/* Radio Button Styles */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 1rem;
  color: #fff;
}

.radio-group input[type="radio"] {
  accent-color: #b4e925; /* Modern browser highlight */
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

/* Submit Button */
.contact-form-btn {
  align-self: center; /* Aligns the button to the center */
  width: auto; /* Keeps the width to its content size */
  background-color: #b4e925;
  color: #1d1d1d;
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 1.25rem;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.contact-form-btn:hover {
  transform: scale(1.05);
  background-color: #fff;
  color: #1d1d1d;
}

.contact-form-btn:active {
  background-color: #92c31c;
  transform: translateY(0);
}

#otherCountry {
  margin-bottom: 1rem; /* Adds more space below */
}
#country {
  margin-bottom: 1rem; /* Adds more space below */
}




/*************************************************************
  18) Footer
**************************************************************/
/* Footer */
.footer {
  background-color: #1d1d1d; /* Match your dark theme */
  color: #fff;
  padding: 0.2rem;
  font-size: 0.9rem;
  text-align: center;
  position: relative;
}

.social-icons {
  margin-bottom: 0.2rem;
}

.social-icons h4 {
  margin-bottom: 0.2rem;
  color: #b4e925; /* Highlight color */
}

.social-icons a {
  color: #fff;
  font-size: 1.5rem;
  margin: 0 0.5rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #b4e925; /* Hover highlight color */
}

.footer-bottom {
  font-size: 0.8rem;
  border-top: 1px solid #333;
  padding-top: 1rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.footer-bottom a {
  color: #b4e925;
  text-decoration: none;
}

.footer-bottom a:hover {
  color: #a3d821;
}

/*************************************************************
  19) Reveal Animations (Optional)
**************************************************************/
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: transform 0.8s ease, opacity 0.8s ease;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/***********************************************************************
Responsivenes
*****************************************************************/
@media (min-width: 768px) {
  html {
    font-size: 110%; /* or 112.5%, etc. */
  }

  .logo {
    height: 70px;
  }

  .hero,
  .challenge-solution-section,
  .value-proposition-section,
  .how-it-works-section,
  .detailed-features,
  .faq-section,
  .meet-section,
  .team-code-section,
  .contact-us-section,
  .videos-section,
  .publications-section,
  #testimonials,
  section {
    width: 90%; /* Nearly full width */
    margin: 0 auto 1.5rem; /* Center + bottom space */
    padding: 1rem; /* Uniform inner padding */
    border-radius: 0.75rem;
    box-sizing: border-box;
    background-color: #1d1d1d;
  }

  .hero {
    padding: 1rem 1rem;
  }

  .how-it-works-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Allows wrapping to the next row */
    gap: 1rem; /* Adds spacing between the cards */
    margin-top: 1rem;
  }

  .how-it-works-card {
    flex: 0 0 calc(50% - 1rem); /* Makes each card 50% of the container width minus the gap */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: url("hero_bg.png") center/cover no-repeat;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .how-it-works-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  }

  .how-it-works-card .card-content h4 {
    font-size: 1.2rem;
    text-align: left;
    margin-bottom: 0.5rem;
    color: #fff;
  }

  .how-it-works-card .card-content p {
    font-size: 1rem;
    color: #ccc;
    text-align: left;
  }

  .how-it-works-card .card-image img {
    width: 65%;
    margin: auto;
    border-radius: 0.5rem;
  }
  .experience-cta {
    text-align: center;
    margin-top: 20px;
    margin: auto;
  }
}

@media (min-width: 1024px) {
  html {
    font-size: 115%; /* or 112.5%, etc. */
  }

  .logo {
    height: 80px;
  }

  /* Increase section width for larger screens */
  .header,
  .hero,
  .challenge-solution-section,
  .value-proposition-section,
  .how-it-works-section,
  .detailed-features,
  .faq-section,
  .meet-section,
  .team-code-section,
  .contact-us-section,
  .videos-section,
  .publications-section,
  #testimonials,
  section {
    width: 80%; /* Make sections more compact on wider screens */
  }

  .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .card {
    display: flex;
    flex-direction: column;
  }
  .card-content h4 {
    min-height: 3.8rem; /* still needed to ensure uniform heading space */
  }

  /* Testimonial Cards: Layout adjustment */
  .testimonial-row {
    gap: 2rem; /* Increase spacing between cards */
  }
  .testimonial-card {
    flex: 0 0 calc(100% / 2 - 1rem);
  }

  .how-it-works-card .card-content h4 {
    text-align: center;
  }

  .how-it-works-card .card-content p {
    text-align: center;
  }

  /* Detailed Features */

  .feature-details {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
  }

  .feature {
    flex: 1;
    min-width: 350px;

    padding: 20px;
  }

  .feature h3 {
    margin-bottom: 10px;
  }

  .publications-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three items per row */
  }

  .publication-card {
    display: flex;
    flex-direction: column;
    background-color: #292929;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  }

  .publication-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow this section to take available space */
    justify-content: space-between;
  }

  .hidden-publication {
    display: none; /* Initially hidden */
  }

  .hidden-publication.show {
    display: flex; /* Show hidden items when "View More" is clicked */
  }
}

/* ─────────────────────────────────────────
     5) Larger desktops (>= 1440px)
     ───────────────────────────────────────── */
@media (min-width: 1440px) {
  html {
    font-size: 120%; /* or 112.5%, etc. */
  }
  .logo {
    height: 90px;
  }

  /* Testimonial Cards: Layout adjustment */
  .testimonial-row {
    gap: 1.2rem; /* Increase spacing between cards */
  }
  .testimonial-card {
    flex: 0 0 calc(100% / 3 - 1rem);
  }

  .how-it-works-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Allows wrapping to the next row */
    gap: 1rem; /* Adds spacing between the cards */
    margin: auto;
    margin-top: 1rem;
  }

  .how-it-works-card {
    flex: 0 0 calc(33.3% - 1rem); /* Makes each card 50% of the container width minus the gap */
  }

  .how-it-works-card .card-content h4 {
    text-align: center;
  }

  .how-it-works-card .card-content p {
    text-align: center;
  }

  .meet-grid {
    flex-direction: row; /* Arrange items in a single row for larger screens */
    justify-content: space-between; /* Distribute items evenly */
    align-items: stretch; /* Ensure items align properly */
  }

  .meet-item {
    flex: 1; /* Allow items to grow equally */
    margin: 0 0.5rem; /* Add horizontal spacing between items */
  }
}

/* ─────────────────────────────────────────
     6) Extra-large / full HD or 4K (>= 1920px)
     ───────────────────────────────────────── */
@media (min-width: 1920px) {
  html {
    font-size: 140%; /* or 112.5%, etc. */
  }
  .logo {
    height: 100px;
  }
}