#software {
  height: 100%;
}
.software {
  position: relative;
  height: 100%;
  width: 100vw;
  background-color: var(--second-bg-color);
}
.software-holder {
  position: relative;
  z-index: 4;
  width: 80%;
  /* border: 1px solid rgb(15, 35, 0, 1); */
  border-radius: 0.9vw;
  /* background-color: rgb(252, 252, 252); */
}
.software-card {
  height: 55vh;
  border-radius: 0.9vw;
  border: 1px solid var(--main-bg-color);
  background-color: var(--second-bg-color);
  -webkit-box-shadow: 1px 1px 0px 1px rgba(18, 27, 252, 0.97);
  box-shadow: 1px 1px 0px 1px rgba(18, 27, 252, 0.97);
  width: 16vw;
}
.software-img-holder {
  width:8vw;
  height: 8vw;
  border-radius: 50%;
  border: 1px solid var(--main-bg-color);
  background-color: #ffffff;
}
.software-number{
  width:3vw;
  height: 3vw;
  border-radius: 50%;
    background-color: #ffffff;
      border: 1px solid var(--main-bg-color);
}
/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
    .software-holder {
  position: relative;
  z-index: 4;
  width: 90%;
  border: 1px solid transparent;
  border-radius: 0.9vw;
  /* background-color: rgb(252, 252, 252); */
}
  .software-card {
    height: 100%;
    border-radius: 0.9vw;
    border: 1px solid var(--main-bg-color);
    background-color: var(--second-bg-color);
    -webkit-box-shadow: 1px 1px 0px 1px rgba(18, 27, 252, 0.97);
    box-shadow: 1px 1px 0px 1px rgba(18, 27, 252, 0.97);
    width: 33%;
  }
}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
  .software-holder {
  position: relative;
  z-index: 4;
  width: 90%;
  border: 1px solid transparent;
  border-radius: 0.9vw;
  /* background-color: rgb(252, 252, 252); */
}
  .software-card {
    height: 100%;
    border-radius: 0.9vw;
    border: 1px solid var(--main-bg-color);
    background-color: var(--second-bg-color);
    -webkit-box-shadow: 1px 1px 0px 1px rgba(18, 27, 252, 0.97);
    box-shadow: 1px 1px 0px 1px rgba(18, 27, 252, 0.97);
    width: 33%;
  }
}
/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
.software-holder {
  position: relative;
  z-index: 4;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0.9vw;
  /* background-color: rgb(252, 252, 252); */
}
  .software-card {
    height: 75vh;
    border-radius: 0.9vw;
    border: 1px solid var(--main-bg-color);
    background-color: var(--second-bg-color);
    -webkit-box-shadow: 1px 1px 0px 1px rgba(18, 27, 252, 0.97);
    box-shadow: 1px 1px 0px 1px rgba(18, 27, 252, 0.97);
    width: 35%;
  }
  .software-img-holder {
   width: 13vw;
  height: 13vw;
  border-radius: 50%;
  border: 1px solid var(--main-bg-color);
  background-color: #ffffff;
}
.software-number{
  width:6vw;
  height: 6vw;
  border-radius: 50%;
    background-color: #ffffff;
      border: 1px solid var(--main-bg-color);
}
}
/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
#software {
  height:auto;
}
.software-holder {
  position: relative;
  z-index: 4;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0.9vw;
  /* background-color: rgb(252, 252, 252); */
}
.software-img-holder {
   width: 30vw;
  height: 30vw;
  border-radius: 50%;
  border: 1px solid var(--main-bg-color);
  background-color: #ffffff;
}
  .software-card {
    height: 44vh;
    border-radius: 1.9vw;
    border: 1px solid var(--main-bg-color);
    background-color: var(--second-bg-color);
    -webkit-box-shadow: 1px 1px 0px 1px rgba(18, 27, 252, 0.97);
    box-shadow: 1px 1px 0px 1px rgba(18, 27, 252, 0.97);
    width: 100%;
  }

.software {
  position: relative;
  height: auto;
  width: 100vw;
  background-color: var(--second-bg-color);
}
.software-number{
  width:10vw;
  height: 10vw;
  border-radius: 50%;
    background-color: #ffffff;
      border: 1px solid var(--main-bg-color);
}
}
/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {


}