.App {
  text-align: center;
  justify-content: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: white;
  min-height: 97vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* font-size: calc(8px + 2vmin); */
  color: black;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.foot {
  font-size: small;
  margin-bottom: 3px;
}

.separator {
  display: inline-block;
  width: 20px;
}

.roboosoft {
  padding: 30px;
  font-size: 50px;
  /* font-family: 'cursive', 'Brush Script MT', Tahoma, Geneva, Verdana, sans-serif; */
}

.app_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400;
  border: 2px;
  border-color: #61dafb;
  border-style: solid;
  border-radius: 10px;
  padding: 5px;
  background-color: white;
  margin: 5px;
  transition-duration: 0.8s;
}

.app_box:hover {
  transform: scale(1.08,1.08);
  transition-duration: 0.8s;
}


.app_desc {
  font-size: small;
  width: 120px;
}

.app_name {
  color: rgb(29, 216, 66);
}


.about {
  text-align: left;
  width: 70vw;
}

.heading {
  font-size: 18;
}

.title {
  font-size: medium;
  border-style: solid;
  border-radius: 5px;
  border-color: chartreuse;
  padding: 5px;
}

.desc {
  font-size: small;
}

.feature {
    font-size: small;
    color: #61dafb;
}

.how {
    font-size: small;
    color:rgb(170, 194, 239);
}

.how a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

/* .feature li {
    padding: 5px;
    cursor: pointer;
    font-weight: normal;
    font-size: 16px;
} */

.display_row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.essay {
  font-size: medium;
  text-align:justify;
  padding-left: 20px;
  padding-right: 20px;
  width: 70vw;
}

header {
  background-color: #1e3a8a;
  color: white;
  padding: 2rem;
  text-align: center;
}
header h1 {
  margin: 0;
  font-size: 2.5rem;
}

.intro {
  padding: 2rem;
  text-align: center;
  justify-content: center;
}

.intro p {
  font-size: 1.2rem;
  max-width: 800px;
  margin: auto;
  justify-content: center;
}

    .services {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2rem;
      padding: 2rem;
    }
    .row {
        display: flex;
        justify-content: center;
        gap: 2rem;
        flex-wrap: wrap;
    }
    .service {
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      max-width: 300px;
      padding: 1.5rem;
      text-align: center;
    }
    .service img {
      width: 100%;
      border-radius: 10px;
    }
    .service h3 {
      margin-top: 1rem;
      font-size: 1.3rem;
    }

    .pricing {
      text-align: center;
      padding: 2rem;
      background-color: #e0e7ff;
    }
    .pricing h2 {
      font-size: 2rem;
    }
    .contact {
      padding: 2rem;
      text-align: center;
    }
    .contact a {
      display: inline-block;
      margin-top: 1rem;
      padding: 0.75rem 1.5rem;
      background-color: #1e3a8a;
      color: white;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
    }
    .tools {
      width: 80%;
      padding: 2rem;
      text-align: center;
      justify-content: center;
        border: 2px;
        border-color: #13b718;
        border-style: solid;
        border-radius: 10px;

    }