.our-surgery-1__cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.4rem;
}

.our-surgery-1 > .title {
  margin-top: 2rem;
}

.our-surgery-1__cards > .card {
  height: 2.81rem;
  width: 8.27rem;
  background-color: rgba(255, 234, 242, 1);
  margin: 0.1rem;
  padding: 0.4rem;
  border-radius: 0.318rem;
  position: relative;
}

.our-surgery-1__cards > .card > h2 {
  font-size: var(--co-font-5);
  font-weight: 900;
  width: 3.3rem;
  line-height: 0.6rem;
  text-transform: capitalize;
}

.our-surgery-1__cards > .card > img {
  /* display: none; */
  height: 2.45rem;
  position: absolute;
  right: 0.2rem;
  bottom: 0;
}
.our-surgery-1__cards > .card > p {
  display: none;
}

.our-surgery-1__cards-popup {
  background-color: white;
  height: 26.36rem;
  display: flex;
  flex-direction: column;
  padding: 2rem 0.5rem;
  border-radius: 0.5rem;
  padding-top: 0;
  position: relative;
}

.our-surgery-1__cards-form {
  margin-top: auto;
  background-color: var(--brandClr);
  height: 9.9rem;
  width: 16.81rem;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  padding: 1.136rem;
  border-radius: 0.5rem;
}

.our-surgery-1__cards-form > input {
  height: 1.1818rem;
  width: 14.54rem;
  border: 1px solid white;
  background-color: transparent;
  margin-top: 0.7rem;
  border-radius: 0.2rem;
  padding-left: var(--co-font-1);
  color: white;
}

.our-surgery-1__cards-form > h3 {
  color: white;
  font-size: var(--co-font-3);
  font-weight: 500;
  text-align: left;
}

.our-surgery-1__cards-form ::placeholder {
  font-size: var(--co-font-1);
  color: white;
  margin-left: var(--co-font-1);
}

.our-surgery-1__cards-btn-box {
  display: flex;
  align-items: center;
  margin-top: 1.2rem;
}

.our-surgery-1__cards-btn-box > button {
  width: 2.78rem;
  height: 1rem;
  border-radius: 0.34rem;
  border: 0;
  font-size: var(--co-font-5);
  color: var(--brandClr);
  font-weight: 700;
}

.our-surgery-1__cards-btn-box > a {
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  margin-left: auto;
  font-size: var(--co-font-3);
  font-weight: 700;
}

.phoneCallPng {
  height: 1.3rem;
  width: 1.3rem;
  margin-right: 0.2rem;
}

.our-surgery-1__cards-popup-upper-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0.6rem 0.4rem;
  background: url("../assets/ourServices/popupSurgery.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  z-index: 10;
}

.our-surgery-1__cards-popup-upper-container > h3 {
  font-size: 1.3rem;
  font-weight: 700;
  text-align: left;
  color: rgba(212, 127, 161, 1);
  width: 8.5rem;
  line-height: 1.1rem;
  margin-top: 1rem;
}

.our-surgery-1__cards-popup-upper-container > p {
  font-size: var(--co-font-2);
  font-weight: 400;
  text-align: left;
  color: black;
  margin-top: auto;
}

.our-surgery-1__cards-popup-description {
  font-size: var(--co-font-2);
  font-weight: 500;
  text-align: left;
  color: black;
  margin: 1rem 0;
  /* margin-top: 0; */
  list-style: 0.6rem;
}

.our-surgery-1__cards-popup-close-btn {
  all: unset;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: transparent;
  width: 1rem;
  height: 1rem;
  z-index: 12;
}

.our-surgery-1__cards-popup-close-btn > img {
  width: 1rem;
  height: 1rem;
}

@media screen and (min-width: 768px) {
  .our-surgery-1__cards > .card {
    height: 3.94rem;
    width: 7.5rem;
    border-radius: 0.13rem;
  }

  .our-surgery-1__cards > .card > h2 {
    font-size: 0.62rem;
    font-weight: 600;
    width: 3.4rem;
    line-height: 0.56rem;
  }
}
