@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

/* Prevent extra right-side spacing */
html,
body {
  overflow-x: hidden;
  font-family: "IBM Plex Sans", sans-serif !important;
  background-color: #f8f9fa;
  padding: 0;
  margin: 0;
}

/* Ensure the container fits within the screen */
.container {
  padding-top: 4%;
  padding-bottom: 3%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Fix spacing issues inside .info */
.info {
  padding: 30px 10%;
  overflow-x: hidden;
}

/* Universal button styles */
.toolbutton {
  display: inline-block !important;
  padding: 12px 24px !important;
  border: 1px solid #4f4f4f !important;
  border-radius: 4px !important;
  transition: all 0.2s ease-in !important;
  position: relative !important;
  overflow: hidden !important;
  font-size: 19px !important;
  cursor: pointer !important;
  color: black !important;
  background: #ffffff !important;
  z-index: 1 !important;
}

.toolbutton:before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) scaleY(1) scaleX(1.25) !important;
  top: 100% !important;
  width: 140% !important;
  height: 180% !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
  border-radius: 50% !important;
  display: block !important;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1) !important;
  z-index: -1 !important;
}

.toolbutton:after {
  content: "" !important;
  position: absolute !important;
  left: 55% !important;
  transform: translateX(-50%) scaleY(1) scaleX(1.45) !important;
  top: 180% !important;
  width: 160% !important;
  height: 190% !important;
  background-color: #39bda7 !important;
  border-radius: 50% !important;
  display: block !important;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1) !important;
  z-index: -1 !important;
}

.toolbutton:hover {
  color: #ffffff !important;
  border: 1px solid #e74c3c !important;
}

.toolbutton:hover:before {
  top: -35% !important;
  background-color: #e74c3c !important;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8) !important;
}

/* Fix missing dot in selector */
.toolbutton:hover:after {
  top: -45% !important;
  background-color: #e74c3c !important;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8) !important;
}

/* Download link button */
#download-link {
  background-color: #28a745;
  color: white;
  border: 1px solid #218838;
  padding: 10px 20px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s, transform 0.2s;
}

#download-link:hover {
  background-color: #218838;
  color: white;
  transform: scale(1.05);
}

.navbar {
  background: linear-gradient(135deg, #1e1e2f, #2c2c44);
}

/* Styles for the step cards */
.step-card {
  border: 1px solid #ddd;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
  height: 250px;
  /* Set a fixed height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
  /* Prevent overflow */
}

.step-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.step-number {
  font-size: 3rem;
  color: #e74c3c;
  font-weight: bold;
}