/* Helper function to scale clamp values */
.cost-box, .cta {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cost-box:hover, .cta:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/*
Small screens: 0px to 767px
Medium screens: 768px to 1199px
Large screens: 1200px and up
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #FFF1FF;
  font-family: "Roboto", sans-serif;
}

.main-container {
  position: relative;
  text-align: center;
}

h1 {
  font-size: clamp(3rem, 6vw, 4rem);
  font-weight: bold;
  color: #000;
  margin: clamp(3rem, 6vw, 4rem) auto;
}

h2 {
  font-size: clamp(2.4rem, 4.8vw, 3.2rem);
  color: #000;
  margin: clamp(3rem, 6vw, 4rem) auto;
}

h3 {
  font-size: clamp(1.95rem, 3.9vw, 2.6rem);
  color: #000;
  margin: clamp(3rem, 6vw, 4rem) auto;
}

.fontsize-p-s {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
}

.font-color-gray {
  color: #5d5d5d;
}

.font-color-white {
  color: #FFFFFF;
}

.font-color-fg {
  color: #000;
}

p {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #5d5d5d;
}

.gradient {
  background: linear-gradient(to right, #0A0099, #FF00FB);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta {
  width: clamp(22.5rem, 45vw, 30rem);
  background: linear-gradient(to right, #0A0099, #FF00FB);
  color: #FFFFFF;
  border: none;
  border-radius: clamp(1.2rem, 2.4vw, 1.6rem);
  font-size: clamp(1.95rem, 3.9vw, 2.6rem);
  text-align: center;
  cursor: pointer; /* Pointer cursor on hover */
  max-width: 100%;
  display: block;
  margin: 0 auto;
  padding: clamp(0.3rem, 0.6vw, 0.4rem);
}

/* Optional: Add hover effect */
.cta:hover {
  background: linear-gradient(to right, #060066, #CC00CA);
}

.cost-container {
  display: flex; /* Flexbox layout for side-by-side alignment */
  gap: 10px; /* 10px gap between the boxes */
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .cost-container {
    flex-direction: row;
  }
}

.cost-box {
  width: clamp(22.5rem, 45vw, 30rem); /* Box width */
  max-width: 100%;
  border-radius: clamp(0.45rem, 0.9vw, 0.6rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  background-color: #d3d0d3; /* Box background color */
  text-align: center; /* Center the text horizontally */
  display: flex; /* Flexbox for centering text vertically */
  align-items: center; /* Vertically align text */
  justify-content: center; /* Horizontally align text */
  border: 1px solid black; /* Optional: Border for visual clarity */
  cursor: pointer; /* Pointer cursor on hover */
}

.cost-box:hover {
  background: #c3c0c3;
}

.image-container {
  display: flex; /* Flexbox layout for alignment */
  justify-content: center; /* Center content horizontally */
  align-items: center;
  margin: clamp(3rem, 6vw, 4rem) 0;
}

.image-box {
  width: clamp(400px, 90vw, 712px); /* Responsive width using clamp */
  max-width: 712px; /* Prevents overflowing the screen */
  border-radius: clamp(0.45rem, 0.9vw, 0.6rem);
  background-color: #f0f0f0; /* Light grey background */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black; /* Border for clarity */
}

.image-box img {
  max-width: 100%; /* Ensure the image is fully contained */
  border-radius: inherit; /* Match border radius */
}

.feature-left-row {
  width: 100%;
  display: flex;
  margin: clamp(0.75rem, 1.5vw, 1rem) 0;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2rem);
}
@media only screen and (min-width: 1200px) {
  .feature-left-row {
    flex-direction: row;
    align-items: center;
  }
}
@media only screen and (max-width: 400px) {
  .feature-left-row {
    padding: 0;
  }
}

.feature-left-box {
  width: clamp(15rem, 30vw, 20rem);
  background-color: #FF00FB; /* Box background color */
  border-radius: clamp(0.45rem, 0.9vw, 0.6rem);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  color: #FFFFFF;
  padding: clamp(0.75rem, 1.5vw, 1rem);
}

.feature-left-description {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  color: #000;
  text-align: start;
}

.feature-right-row {
  width: 100%;
  display: flex;
  margin: clamp(0.75rem, 1.5vw, 1rem) 0;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  flex-direction: column;
  align-items: flex-end;
  padding: clamp(1.5rem, 3vw, 2rem);
}
@media only screen and (min-width: 1200px) {
  .feature-right-row {
    flex-direction: row-reverse;
    align-items: center;
  }
}
@media only screen and (max-width: 400px) {
  .feature-right-row {
    padding: 0;
  }
}

.feature-right-box {
  width: clamp(15rem, 30vw, 20rem);
  background-color: #0A0099; /* Box background color */
  border-radius: clamp(0.45rem, 0.9vw, 0.6rem);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  color: #FFFFFF;
  padding: clamp(0.75rem, 1.5vw, 1rem);
}

.feature-right-description {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  color: #000;
  text-align: end;
}

.black-section {
  background-color: #000;
  text-align: center;
  padding-top: clamp(3rem, 6vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 4rem);
}
.black-section h1 {
  font-size: clamp(3rem, 6vw, 4rem);
  color: #FFFFFF;
  margin-top: clamp(3rem, 6vw, 4rem);
  margin-bottom: clamp(3rem, 6vw, 4rem);
}

/*# sourceMappingURL=styles.css.map */