/* Add the earlier provided CSS here for styling */
:root {
  --primary-purple: #6A0DAD;
  --accent-magenta: #FF2A7F;
  --text-black: #2D2D2D;
  --text-grey: #666666;
  --light-bg: #FAFAFA;
  --light-lavender: #F9F5FF;
  --white: #FFFFFF;
  --card-radius: 12px;
}

body {
  font-family: 'Circular Std', 'Google Sans', sans-serif;
  background-color: var(--light-bg);
  color: var(--text-black);
  margin: 0;
}

.hero {
  /* padding: 56px 0px 0px; */
  text-align: left;  
  background-color: var(--odido-color-mix-bg);
}

.hero h1 {
  font-size: 56px;
 /* color: var(--primary-purple);*/
  color:black;
  margin-bottom: 16px;
  margin-top: 100px;
}

.hero p {
  font-size: 18px;
  color: var(--text-black);
  margin-bottom: 32px;
  width:1013px;
}

.button-primary {
  background-color: var(--primary-purple);
  color: var(--white);
  padding: 14px 32px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  margin-right: 12px;
}

.button-primary:hover {
  background-color: var(--accent-magenta);
}

.button-link {
  background: none;
  border: none;
  color: var(--primary-purple);
  font-size: 16px;
  cursor: pointer;
}

.featured-apis {
 /* display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  display: grid;*/
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 60px 20px;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

/* Add responsive alignment for the "Featured APIs" heading */
.featured-apis-heading {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  max-width: 1200px; /* Match the width of the top menu container */
  padding-left: 15px; /* Adjust padding to align with the menu */
}

@media (max-width: 768px) {
  .featured-apis-heading {
    padding-left: 10px; /* Adjust for smaller screens */
  }
}

/* Update alignment for the "View API Catalog" link */
.catalog-link-wrapper {
  text-align: right;
  margin-top: 20px;
  padding-right: 15px; /* Match the padding of the top menu */
  max-width: 1200px; /* Align with the menu container */
  margin-left: auto;
  margin-right: auto;
}

/* Increase font size for the "View API Catalog" link */
.catalog-link-wrapper .link-call-to-action {
  font-size: 18px; /* Increase font size */
}

@media (max-width: 768px) {
  .catalog-link-wrapper {
    padding-right: 10px; /* Adjust for smaller screens */
  }
}

.api-card {
  background-color: var(--white);
  border-radius: var(--card-radius);
  padding: 24px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
  width: 300px;
 
 /* flex: 0 0 calc(33.33% - 20px);
  margin-bottom: 20px;*/
}

.api-card img {
  display: block;
  margin: 0 auto;
}

.api-card:hover {
  transform: translateY(-4px);
}

.api-card h3 {
  margin-top: 16px;
  color: var(--text-black);
  font-size: 20px;
}

.api-card p {
  color: var(--text-grey);
  font-size: 14px;
}

.get-started {
  background-color: var(--light-lavender);
  padding: 60px 20px;
  text-align: center;  
}

/* Add responsive alignment for the "get-started" heading */
.get-started-heading {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  max-width: 1200px; /* Match the width of the top menu container */
  padding-left: 15px; /* Adjust padding to align with the menu */
}

@media (max-width: 768px) {
  .get-started-heading {
    padding-left: 10px; /* Adjust for smaller screens */
  }
}
.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
  
}

.step-card {
  background-color: var(--white);
  border-radius: var(--card-radius);
  padding: 24px;
  width: 260px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}
.step-card img {
  display: block;
  margin: 0 auto;
}
.step-card h4 {
  font-size: 24px;
  color: var(--primary-purple);
  margin-bottom: 12px;
}

.step-card p {
  font-size: 14px;
  color: var(--text-grey);
}

.benefits {
  padding: 60px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.benefit-card {
  background-color: var(--white);
  border-radius: var(--card-radius);
  padding: 24px;
  text-align: center;
  width: 300px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.benefit-card img {
  display: block;
  margin: 0 auto;
}
.benefit-card h3 {
  margin-top: 16px;
  color: var(--text-black);
}

.benefit-card p {
  color: var(--text-grey);
  font-size: 14px;
}
/* Add responsive alignment for the "Benefit card" heading */
.benefit-card-heading {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  max-width: 1200px; /* Match the width of the top menu container */
  padding-left: 15px; /* Adjust padding to align with the menu */
}

@media (max-width: 768px) {
  .benefit-card-heading {
    padding-left: 10px; /* Adjust for smaller screens */
  }
}