.service-page {
  background-color: rgb(209, 196, 196);
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
}

.service-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90vw;
}

.service-page-title {
  color: white;
  font-size: 50px;
  padding-bottom: 50px;
}

.service-page-content {
  display: flex;
  flex-direction: row;
  height: fit-content;
  column-gap: 10px;
  object-fit: contain;
  overflow: visible;
  row-gap: 50px;
  color: rgb(238, 235, 231);
  align-items: center;
}

.service-card {
  transition: 0.7s;

  height: 320px;
  width: 320px;
  background-color: rgb(170, 158, 158);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  box-shadow: 2px 2px 3px 1px rgba(51, 39, 51, 0.38);
}

.service-card:hover {
  background-color: rgba(125, 102, 125, 0.949);
  width: 330px;
  height: 330px;
  transition: 0.7s;

  .service-title {
    transition: 0.7s;
    color: rgb(255, 137, 1);
    font-size: large;
  }

  .service-content {
    transition: 0.2s;
    color: rgba(37, 22, 37, 0.949);
  }

  .image {
    transition: 0.7s;
    width: 330px;
  }
}

.service-card:active {
  background-color: rgba(42, 27, 42, 0.949);
  transition: 0.2s;

  .service-content {
    transition: 0.2s;
    color: rgba(189, 165, 189, 0.949);
  }
}

.service-card-selected {
  background-color: rgb(255, 255, 255);;
  width: 330px;
  height: 330px;
  transition: 0.2s;
}

.image {
  transition: 0.7s;
  width: 330px;
  height: 200px;
}

.image-selected {
  width: 320px;
}

.image {
  opacity: 80%;
}

.service-title {
  transition: 0, 7s;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  font-size: medium;
  color: rgb(51, 41, 41);
  text-align: center;
}

.service-content {
  padding-left: 10px;
  padding-right: 10px;
  color: rgb(112, 97, 97);
  font-size: small;
  text-align: center;
  
}

.square-purple {
  height: 50px;
  width: 50px;
  background-color: rgb(255, 255, 255);
}

.purple-grid {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.offer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(251, 247, 255);
  padding: 50px;
  padding-bottom: 20px;
  transition: 1s;
}

.offer-card-display {
  position: relative;
  left: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(255, 255, 255);
  padding: 50px;
  padding-top: 100px;
  padding-bottom: 20px;
  transition: 1s;
}

.offer-title {
  padding-bottom: 20px;
  font-size: x-large;
}

.offer-subtitle {
  font-size: large;
}

.offer-table {
  width: 80vw;
  border: none;
  border-width: 1px;
  border-radius: 0px;
  padding: 30px;
  margin-bottom: 20px;
  background-color: rgb(209, 196, 196);
  font-size: small;
}

.table-title {
  padding-bottom: 20px;
}

.offer-paragraph {
  color: black;
  padding-bottom: 20px;
}

.offer-text {
  font-size: x-small;
  text-align: justify;
  font-size: medium;
  width: 80vw;
 
}

.offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding-top: 40px;
  padding-bottom: 20px;
  width: 80vw;
}

.offer-content-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(170, 158, 158, 0.467);
  border: solid;
  border-width: 0.5px;
  border-color: rgb(201, 201, 200);
  padding: 20px;
  transition: 1s;
}

.offer-heading {
  text-align: center;
  font-weight: bold;
  color: rgb(59, 51, 71);
}

.offer-content {
  text-align: center;
  color: rgb(93, 85, 102);
  
}

.offer-heading {
  padding: 20px;
}

@media (max-width: 1000px) {
  .service-page {
    height: fit-content;
    padding: 50px;
    align-items: center;
    justify-content: center;
  }

  .service-container {
    justify-content: center;
    align-items: center;
    height:fit-content;
  }
  .service-page-content {
    flex-direction: column;
    height: fit-content;
    width: fit-content;
    padding-bottom: 0px;
  }


  .service-card:hover {
    width: 330px;
    height: 330px;
    

    .image {
      transition: 0.7s;
      height: 230px;
      width: 330px;
    }

    .service-title {
      transition: 0.7s;
      color: rgb(246, 143, 26);
      font-size: medium;
    }

    .service-content {
   
      color: rgb(25, 8, 52);
      font-size: small;
      text-align: center;
      padding-bottom: 5px;
    }
  }
  .service-title {
 
    font-size: medium;
    padding: 3px;
    color: rgb(51, 41, 41);
    text-align: center;
  }

  .service-content {
   
    color: rgb(112, 97, 97);
    font-size: small;
    text-align: center;
  }
  .image {
    width: 320px;
  }

  .project-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

}

@media (max-width: 600px) {
  .service-page-content {
    grid-template-columns: 1fr;
    width: fit-content;
    height: fit-content;
  }

  .service-card {
    height: 70vw;
    width: 70vw;

    padding-bottom: 20px;
  }

 
  .service-content {
   
    color: rgb(112, 97, 97);
    font-size: 15px;
    text-align: center;
  }

  .image {
   height: 50vw;
   width: 70vw;
  }

  .project-grid {
    grid-template-columns: 1fr 1fr;
  }

  .service-card:hover {
    height: 70vw;
    width: 70vw;

    padding-bottom: 20px;

    .image{
      height: 50vw;
      width: 70vw;
    }
  }
  .offer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    
  }
}

@media (max-width: 410px) {
  .project-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    height: 80vw;
    width: 80vw;
    padding-bottom: 20px;
  }

  .service-content {
   
    color: rgb(112, 97, 97);
    font-size: small;
    text-align: center;
  }

  .image {
    height: 55vw;
    width: 80vw;
  }

  .service-card:hover {
    height: 82vw;
    width: 82vw;
    .image {
      height: 62vw;
      width: 82vw;
    }
  }


}