.therapy-hero {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      600px 400px at 8% 10%,
      rgb(249, 219, 228) 0%,
      rgba(249, 219, 228, 0) 70%
    ),
    radial-gradient(
      700px 450px at 95% 15%,
      rgb(220, 239, 230) 0%,
      rgba(220, 239, 230, 0) 70%
    ),
    radial-gradient(
      600px 500px at 85% 95%,
      rgb(230, 222, 244) 0%,
      rgba(230, 222, 244, 0) 70%
    ),
    radial-gradient(
      500px 400px at 15% 90%,
      rgb(219, 231, 244) 0%,
      rgba(219, 231, 244, 0) 70%
    ),
    rgb(255, 255, 255);
}


/* GŁÓWNY GRID */

.therapy-hero__grid {
  padding: 72px 48px 88px;

  display: grid;
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap: 56px;
  align-items: center;
}


/* TEKST */

.therapy-hero__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}


.therapy-hero__location {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: #fff;
  border-radius: 999px;

  padding: 8px 16px;

  box-shadow:
    0 4px 14px rgba(43, 43, 51, 0.08);

  font-weight: 700;
  font-size: 14px;

  color: rgb(199, 106, 134);
}


.therapy-hero__location i {
  font-size: 17px;
}

.therapy-hero .therapy-title{
  max-width: 551px;
  width: 100%;
}

.therapy-hero .therapy-title h1,h2 {
  margin: 0;

  font-family: "Baloo 2", sans-serif;
  font-weight: 700;

  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.12;

  text-wrap: pretty;
}


.therapy-hero .therapy-title h1 span {
  color: rgb(199, 106, 134);
}
.therapy-hero .therapy-title h2 span {
  color: rgb(199, 106, 134);
}


.therapy-hero__text p {
  margin: 0;

  max-width: 54ch;

  font-size: 18px;
  line-height: 1.6;
}
.therapy-hero__text p span{
  font-weight: 700;
}


.therapy-hero__text strong {
  font-weight: 700;
}

.therapy-hero .sensoryka {
  color: rgb(169, 79, 108);
}

.therapy-hero .logopedia {
  color: rgb(71, 121, 95);
}

.therapy-hero .psychologia {
  color: rgb(68, 106, 146);
}

.therapy-hero .tus {
  color: rgb(97, 83, 154);
}

.therapy-hero .pedagogika {
  color: rgb(150, 112, 47);
}


/* ZDJĘCIE */

.therapy-hero__photo {
  position: relative;
  height: 440px;
}


.therapy-hero__photo-bg {
  position: absolute;
  inset: 24px -20px -20px 24px;
  background: linear-gradient(
    135deg,
    rgb(242, 201, 214),
    rgb(230, 222, 244)
  );
  border-radius: 62% 38% 54% 46% / 48% 55% 45% 52%;
}

.therapy-hero__image {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 58% 42% 55% 45% / 45% 52% 48% 55%;
  overflow: hidden;
}

.therapy-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.therapy-hero__image figure {
  margin: 0;
  width: 100%;
  height: 100%;
}

/* BADGE */

.therapy-hero__badge {
  position: absolute;

  bottom: 40px;
  right: -18px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 20px;

  background: rgba(255, 255, 255, 0.95);

  border-radius: 18px;

  box-shadow:
    0 12px 30px rgba(43, 43, 51, 0.16);

  pointer-events: none;
  .text{
    max-width: 142px;
    width: 100%;
  }
}


.therapy-hero__badge > i {
  font-size: 28px;
  color: rgb(95, 156, 130);
}


.therapy-hero__badge span {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}


.therapy-hero__badge small {
  font-weight: 400;
  font-size: 13px;
  color: rgb(107, 107, 118);
}


/* OZDOBNE KÓŁKA */

.therapy-hero__circle {
  position: absolute;

  display: grid;
  place-items: center;

  background: #fff;

  border-radius: 50%;

  pointer-events: none;

  animation:
    therapyFloatSpin 4.5s ease-in-out infinite;
}


.therapy-hero__circle i {
  line-height: 1;
}


.therapy-hero__circle--puzzle {
  top: -22px;
  right: 40px;

  width: 78px;
  height: 78px;

  box-shadow:
    0 8px 22px rgba(124, 110, 180, 0.3);

  animation-delay: 0s;
}


.therapy-hero__circle--puzzle i {
  font-size: 40px;
  color: rgb(124, 110, 180);
}


.therapy-hero__circle--heart {
  bottom: 60px;
  left: -26px;

  width: 78px;
  height: 78px;

  box-shadow:
    0 8px 22px rgba(199, 106, 134, 0.3);

  animation-delay: 1.4s;
}


.therapy-hero__circle--heart i {
  font-size: 40px;
  color: rgb(199, 106, 134);
}


.therapy-hero__circle--star {
  top: 120px;
  left: -20px;

  width: 60px;
  height: 60px;

  box-shadow:
    0 8px 22px rgba(95, 156, 130, 0.28);

  animation-delay: 2.6s;
}


.therapy-hero__circle--star i {
  font-size: 30px;
  color: rgb(234, 181, 77);
}


.therapy-hero__circle--chat {
  top: 30px;
  right: 4px;

  width: 60px;
  height: 60px;

  box-shadow:
    0 8px 22px rgba(91, 131, 173, 0.28);

  animation-delay: 0.7s;
}


.therapy-hero__circle--chat i {
  font-size: 30px;
  color: rgb(91, 131, 173);
}


/* MAŁE KROPKI */

.therapy-hero__dot {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  animation:
    therapyFloat 5s ease-in-out infinite;
}


.therapy-hero__dot--green {
  top: 210px;
  right: -8px;

  width: 26px;
  height: 26px;

  background: rgb(220, 239, 230);

  animation-delay: 1s;
}


.therapy-hero__dot--pink {
  bottom: 8px;
  left: 90px;

  width: 18px;
  height: 18px;

  background: rgb(242, 201, 214);

  animation-delay: 2s;
}


.therapy-hero__dot--purple {
  top: -6px;
  left: 60px;

  width: 22px;
  height: 22px;

  background: rgb(230, 222, 244);

  animation-delay: 3s;
}


/* CTA */

.therapy-hero__cta {
  display: flex;

  gap: 14px;

  flex-wrap: wrap;
}


.therapy-hero__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  border-radius: 999px;

  font-weight: 700;
  font-size: 17px;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.therapy-hero__cta .buttons .btn{
  text-transform: none;
  margin: 0;
}
.therapy-hero__cta .buttons .btn:hover{
  color: rgb(255,255,255);
}

.therapy-hero__cta .buttons{
  gap: 14px;
  margin-top: 4px;
}
.therapy-hero__button .ph-fill{
  font-size: 20px;
}
/* PIERWSZY PRZYCISK */

.therapy-hero__button--primary {
  padding: 14px 28px;

  background: rgb(199, 106, 134);
  color: #fff;
}


.therapy-hero__button--primary:hover {
  box-shadow:
    0 8px 20px rgba(199, 106, 134, 0.25);
  background-color: rgb(169, 79, 108) ;
}


/* DRUGI PRZYCISK */

.therapy-hero__button--secondary {
  padding: 14px 28px;

  background:
    linear-gradient(
      135deg,
      rgb(230, 222, 244),
      rgb(219, 231, 244)
    );

  border: 2px solid rgb(124, 110, 180);

  color: rgb(97, 83, 154);

  box-shadow:
    0 4px 14px rgba(124, 110, 180, 0.25);
    width: 233px;
}
.therapy-hero__button--secondary:hover{
  background: rgb(124, 110, 180);
}


/* ANIMACJE */

@keyframes therapyFloatSpin {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-8px) rotate(4deg);
  }
}


@keyframes therapyFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}


/* RESPONSYWNOŚĆ */

@media (max-width: 900px) {

  .therapy-hero__grid {
    grid-template-columns: 1fr;

    gap: 40px;

    padding: 56px 32px 70px;
  }

  .therapy-hero__photo {
    height: 400px;
  }

}


@media (max-width: 600px) {

  .therapy-hero__grid {
    padding: 40px 20px 55px;
  }

  .therapy-hero__photo {
    height: 320px;
  }

  .therapy-hero__badge {
    right: -8px;
    bottom: 20px;

    padding: 11px 14px;
  }

  .therapy-hero__badge > i {
    font-size: 23px;
  }

  .therapy-hero__badge span {
    font-size: 13px;
  }

  .therapy-hero__badge small {
    font-size: 11px;
  }

  .therapy-hero__circle--star,
  .therapy-hero__circle--chat {
    display: none;
  }

  .therapy-hero__circle--puzzle {
    width: 60px;
    height: 60px;
  }

  .therapy-hero__circle--puzzle i {
    font-size: 30px;
  }

  .therapy-hero__circle--heart {
    width: 60px;
    height: 60px;

    left: -10px;
  }

  .therapy-hero__circle--heart i {
    font-size: 30px;
  }

  .therapy-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .therapy-hero__button {
    justify-content: center;
  }

}