.pl-32 {
  margin-left: 32px;
}

.groom-card-img {
  height: 269px;
  object-fit: cover;
  border-radius: 8px;
}

.card-pr-40 {
  padding-right: 40px;
}
.card-pl-40 {
  padding-left: 40px;
}

.grooming-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grooming-card-grid.reverse {
  direction: rtl;
}

.grooming-card-grid.reverse > * {
  direction: ltr;
}

.grooming-img {
  height: 400px;
  object-fit: cover;
}

.grooming-table .table-container {
  overflow-x: auto;
  background: white;
}

.grooming-table table {
  width: 100%;
  border-collapse: collapse;
}

.grooming-table th,
.grooming-table td {
  padding: 8px 16px;
  text-align: left;
  border: 1px solid var(--gray);
  text-align: center;
}

.grooming-table th {
  background-color: var(--gray);
  color: #333;
}

.grooming-table .col-name {
  width: 40%;
}

.grooming-table .col-shampoo,
.grooming-table .col-cut1,
.grooming-table .col-cut2 {
  width: 20%;
}
.hotel-pet-table .col-name {
  width: 25%;
}

.hotel-pet-table .col-shampoo,
.hotel-pet-table .col-cut1,
.hotel-pet-table .col-cut2 {
  width: 25%;
}

.grooming-table .col-shampoo {
  background-color: var(--aqua);
}

.grooming-table .col-cut1 {
  background-color: var(--light-red);
}

.grooming-table .col-cut2 {
  background-color: var(--light-yellow);
}

.grooming-table tbody tr:hover {
  background-color: #f5f5f5;
}

.grooming-gray-box {
  padding: 32px 40px;
  border-radius: 8px;
  background: var(--light-white-2);
  border-radius: 8px;
}
.grooming-details-box {
  padding: 32px 40px;
  border-radius: 8px;
  background: var(--light-white);
  min-height: 240px;
  justify-content: space-between;
}

.grooming-details-box-plus {
  left: 0;
  border-radius: 50%;
  border: 1px solid #c4e7ea;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  background: var(--white);
  height: 56px;
  width: 56px;
  top: 50%;
  transform: translate(-50%, -50%);
}

.grooming-details-divider {
  width: 100%;
  height: 1px;
  background: var(--white);
}

.grooming-details-img {
  height: 160px;
  width: 160px;
  object-fit: cover;
  border-radius: 50%;
}

.details-img-position {
  position: absolute;
  top: 40px;
  left: -94px;
}

.telephone-box-big {
  border: 1px solid var(--gray);
}

.telephone-box-big .telephone-box-left {
  min-width: 214px;
  background: var(--light-white-2);
}
.telephone-box-big .telephone-box-right {
  padding: 32px 40px;
}

.feature-slide-button {
  height: 64px;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 100%;
  border: 1px solid var(--aqua);
  cursor: pointer;
}

.grooming-slide-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 8px;
}

.grooming-slide-button-container {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
}
.grooming-slide-prev {
  transform: translateX(-50%);
}
.grooming-slide-next {
  transform: translateX(50%);
}
.grooming-swiper {
  width: 100% !important;
}
.grooming-swiper-container,
.swiper {
  width: 100% !important;
}
.grooming-swiper .swiper-slide {
  width: 100% !important;
}

/* training page */

.puppy-information-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
}

.puppy-top {
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--primary);
}

.puppy-steps {
  position: relative;
  background: var(--light-yellow);
  padding: 14px 20px;
  border-radius: 24px;
}

.puppy-right .puppy-steps:not(:last-child)::after,
.puppy-left .puppy-steps:not(:last-child)::after {
  content: "";
  position: absolute;
  display: block;
  width: 18px;
  height: 10px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -22px;
  margin: 0 auto 0; /* center and add spacing */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18.249' height='10' viewBox='0 0 18.249 10'><path fill='%23d8d8d8' d='M411.1-612.591a1.108,1.108,0,0,1-.773-.3,1.024,1.024,0,0,1-.328-.793v-16.063a1.019,1.019,0,0,1,.331-.793,1.113,1.113,0,0,1,.773-.3,3.372,3.372,0,0,1,.766.339l7.624,7.625a1.757,1.757,0,0,1,.384.543,1.542,1.542,0,0,1,.121.617,1.544,1.544,0,0,1-.121.618,1.758,1.758,0,0,1-.384.543l-7.624,7.625a1.237,1.237,0,0,1-.353.248A.97.97,0,0,1,411.1-612.591Z' transform='translate(-612.591 -410) rotate(90)'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.puppy-no {
  border-radius: 100%;
  background: var(--golden);
  height: 24px;
  width: 24px;
  top: 14px;
  left: 20px;
}
.puppy-steps-magenta {
  background: var(--light-magenta);
}
.puppy-steps-magenta .puppy-no {
  background: var(--magenta);
}
.training-iframe-video {
  width: 100%;
  height: 441px;
  object-fit: cover;
}

.hospital-strip {
  border: 1px solid var(--gray);
}

.hospital-strip-left {
  background: var(--light-white-2) !important;
  min-width: 214px;
  max-width: 214px;
  padding: 0px 28px;
}
.hospital-strip-left-bottom {
  padding: 32px 28px;
}
.hospital-strip-right {
  padding: 34px 40px;
}

.training-grid-img {
  height: 198px;
  object-fit: cover;
}

.training-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* training class */
.hotel-pet-table {
  display: block;
  width: 100%;
  overflow-x: auto;
}
.hotel-pet-table .table-container {
  overflow-x: auto;
  background: white;
  border: 1px solid var(--gray);
  -webkit-overflow-scrolling: touch;
  min-width: 800px;
}

.hotel-pet-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.hotel-pet-table th,
.hotel-pet-table td {
  padding: 10px 12px;
  text-align: center;
  border: 1px solid var(--gray);
  vertical-align: center;
  color: #333;
}

.hotel-pet-table thead tr:first-child th {
  background-color: var(--light-white-2);
  color: #333;
  font-weight: bold;

  font-size: 16px;
}

.hotel-pet-table thead tr:nth-child(2) th {
  background-color: var(--light-white);
  color: #333;
  font-weight: 700;

  font-size: 16px;
}

.hotel-pet-table tbody td:first-child {
  font-weight: bold;

  padding-left: 20px;
}

/* Regular cells */
.hotel-pet-table tbody td {
  background-color: white;
}

.hotel-pet-table tbody td:empty {
  background-color: white;
}
.hotel-pet-table .pet-table-th-1 {
  width: 25%;
}

.hotel-pet-table .pet-table-th-2,
.hotel-pet-table .pet-table-th-3,
.hotel-pet-table .pet-table-th-4 {
  width: 25%;
}
.hotel-pet-table .pet-table-th-2 {
  background-color: var(--aqua) !important;
}
.hotel-pet-table .pet-table-th-3 {
  background-color: var(--light-yellow) !important;
}
.hotel-pet-table .pet-table-th-4 {
  background-color: var(--light-magenta) !important;
}
.hotel-images {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
.grooming-details-divider-two {
  height: 2px;
}
.pet-hotel-details-box {
  padding: 33px 40px 33px 56px;
  min-height: auto;
}
@media (max-width: 600px) {
  .pet-hotel-details-box {
    padding: 32px 40px;
  }
  .hospitals-section-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding-bottom: 80px;
  }
  .pl-32 {
    margin-left: 0;
  }
  .number-box-container {
    grid-template-columns: repeat(1, 1fr);
  }
  .pet-food-image {
    left: 50%;
    transform: translateX(-50%);
    right: unset;
    bottom: unset;
    top: -95%;
    width: 312px;
  }
  .orange-box {
    margin-top: 100px;
  }
  .nh-products-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    row-gap: 32px;
  }
  .orange-box-big {
    padding: 32px 40px;
  }
  .orange-box-big .pet-food-image {
    left: 50%;
    transform: translateX(-50%);
    right: unset;
    bottom: unset;
    top: -80%;
    width: 312px;
  }
  .grooming-card-grid,
  .grooming-card-grid.reverse {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .card-pr-40,
  .card-pl-40 {
    padding: 0;
  }

  /* .grooming-table table {
    min-width: 500px;
  } */
  .groom-card-img {
    width: 100%;
  }

  .details-img-position {
    position: relative;
    top: 0;
    left: 0;
  }
  .telephone-box-left {
    min-width: 100%;
  }

  .puppy-information-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 32px;
  }
  .hospital-strip-left {
    min-width: 100%;
    padding: 42px;
  }
  .training-image-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .grooming-details-img {
    height: 120px;
    width: 120px;
    object-fit: cover;
    border-radius: 50%;
  }
  /* pet hotel */
}

@media (min-width: 601px) and (max-width: 767px) {
  .pl-32 {
    margin-left: 0;
  }
  .pet-food-image {
    left: 50%;
    transform: translateX(-50%);
    right: unset;
    bottom: unset;
    top: -91%;
    width: 312px;
  }
  .orange-box {
    margin-top: 150px;
  }
  .nh-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    row-gap: 32px;
  }
  .orange-box-big {
    padding: 32px 40px;
  }
  .orange-box-big .pet-food-image {
    left: 50%;
    transform: translateX(-50%);
    right: unset;
    bottom: unset;
    top: -80%;
    width: 312px;
  }
  .grooming-card-grid,
  .grooming-card-grid.reverse {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .card-pr-40,
  .card-pl-40 {
    padding: 0;
  }

  /* .grooming-table table {
    min-width: 500px;
  } */
  .details-img-position {
    position: relative;
    top: 0;
    left: 0;
  }
  .telephone-box-left {
    min-width: 100%;
  }
  .puppy-information-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 32px;
  }
  .hospital-strip-left {
    min-width: 100%;
    padding: 42px;
  }
  .training-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .hotel-pet-table table {
    width: 800px;
    border-collapse: collapse;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .number-box-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .pet-food-image {
    right: 0;
    bottom: 0;
    width: 400px;
  }
  .nh-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    row-gap: 32px;
  }
  /* .details-img-position {
    position: absolute;
    bottom: 43px;
    left: -73px;
  } */
  .details-img-position {
    position: absolute;
    top: 40px;
    left: -68px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .details-img-position {
    position: absolute;
    top: 52px;
    left: -64px;
  }
  .number-box-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .pet-food-image {
    right: 0;
    bottom: 0;
    width: 275px;
  }
  .orange-box-big {
    padding: 32px 40px;
  }
  /* .details-img-position {
    position: absolute;
    bottom: 43px;
    left: -73px;
  } */
}
@media (min-width: 1200px) and (max-width: 1201px) {
}