:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-brown: #f0846c;
  --color-orange: #ffbc14;
  --color-pink-main: #f6a1bb;
  --color-pink-secon: #f48cac;
  --color-pink-third: #f3769c;
  --color-pink-dark: #ec546c;
  --color-pink-dark-light: #ea516f;
  --color-pink-light: #f4bccc;
}

.card-container {
  display: flex;
  flex-direction: column;
}
.card-heading {
  display: flex;
  flex-direction: column;
  padding: 1rem 0 0 1.5rem;
  max-width: 90%;
}

.card-img {
  z-index: 99;
  align-self: right;
  max-width: 100%;
}

.card-carousel {
  z-index: 100;
  grid-area: 2 / 1 / 3 / 3;
}
.card-carousel .owl-stage {
  padding-bottom: 2rem !important;
}

.owl-stage {
  padding-right: 0 !important;
}

.card-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 1rem;
  border-radius: 10px;
  height: 100%;
  background-color: var(--color-white);
}
.card-item-num {
  z-index: 999;
  position: absolute;
  font-size: 70px;
  font-weight: bold;
  color: var(--color-white);
}
.card-item-num {
  right: -2%;
  top: -9%;
}
.card-item-icon-wrap {
  position: absolute;
  padding: 1rem;
  border-radius: 50%;
  right: -5%;
  top: -7%;
  background-color: var(--color-pink-dark);
}
.card-item-icon {
  max-width: 5rem;
}

.card-item-trsatko {
  transform: scaleX(-1);
  width: 8rem !important;
  position: absolute;
  right: -10%;
  top: -8%;
  filter: invert(40%) sepia(61%) saturate(4450%) hue-rotate(320deg)
    brightness(93%) contrast(96%);
}
.card-item p {
  max-width: 95%;
}
.card-product-img-wrap {
  margin: 0 auto;
}
.card-product-img {
  width: 100% !important;
}
.card-btn-container {
  margin-top: auto;
  padding-bottom: 0.5rem;
}

.card-container .corousel-loop .owl-stage .owl-item:first-child .card-item-num {
  right: 2%;
}

.card-container-bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 768px) {
  .card-item {
    min-height: 37rem;
  }
  .card-item h3 {
    max-width: 60%;
  }
  .card-carousel {
    margin-top: -1rem;
  }
  .card-carousel .owl-stage {
    padding-left: 0.5rem !important;
  }
  .card-heading h2 {
    order: 2;
  }
  .card-heading p {
    order: 2;
  }
  .card-img {
    max-width: 80%;
    float: right;
    order: -1;
    padding-bottom: 1rem;
  }
  .card-item-num {
    right: 4% !important;
    top: -9%;
  }
}
@media (min-width: 768px) {
  .card-container {
    display: grid;
    grid-template-columns: 0.7fr 1fr;
    grid-template-rows: repeat(2, auto);
  }
  .card-carousel {
    margin-top: -2%;
  }
  .card-carousel .owl-item {
    padding-right: 0.5rem;
  }
  .card-item-icon {
    max-width: 5rem;
  }
}
@media (min-width: 1000px) {
  .card-carousel {
    margin-top: -2%;
  }
}
@media (min-width: 1200px) {
  .card-carousel {
    margin-top: -5%;
  }
}
@media (min-width: 1400px) {
  .card-carousel {
    margin-top: -2%;
  }
}