/* =========================================================
   PSYCHOTHERAPIES PAGE BACKGROUND
========================================================= */

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

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(85, 171, 162, 0.16),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 15%,
            rgba(76, 125, 174, 0.13),
            transparent 27%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(255, 205, 110, 0.14),
            transparent 22%
        ),
        linear-gradient(
            135deg,
            #f7fcfb 0%,
            #f3f8fc 50%,
            #f9fcfa 100%
        );
}


/* Decorative psychotherapy symbols */

.kids-hero::before {
    content: "\f5dc   \f004   \f075   \f21e";

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    position: absolute;

    top: 65px;
    left: 3%;

    width: 94%;

    color: rgba(58, 132, 138, 0.055);

    font-size: 70px;

    letter-spacing: 110px;

    white-space: nowrap;

    pointer-events: none;

    transform: rotate(-5deg);

    z-index: 0;
}


/* Soft abstract therapeutic circle */

.kids-hero::after {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -180px;
    top: 70px;

    border-radius: 50%;

    border:
        65px solid
        rgba(75, 157, 150, 0.045);

    box-shadow:
        0 0 0 45px rgba(64, 110, 158, 0.025);

    pointer-events: none;

    z-index: 0;
}


/* Keep content above background */

.kids-shell {
    position: relative;
    z-index: 2;
}


/* Subtle decorative shapes behind left content */

.kids-copy {
    position: relative;
}


.kids-copy::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -110px;
    bottom: -40px;

    border-radius:
        60% 40% 65% 35%;

    background:
        linear-gradient(
            135deg,
            rgba(79, 167, 155, 0.07),
            rgba(72, 120, 171, 0.04)
        );

    transform: rotate(25deg);

    z-index: -1;
}


/* Make image area blend with psychotherapy theme */

.kids-visual::before {
    background:
        linear-gradient(
            135deg,
            rgba(75, 165, 153, 0.18),
            rgba(82, 130, 180, 0.12),
            rgba(255, 211, 125, 0.15)
        );
}


/* Bottom section background */

.kids-strip {
    position: relative;

}


/* Mobile */

@media(max-width: 768px) {

    .kids-hero::before {
        font-size: 45px;
        letter-spacing: 45px;
        opacity: .7;
    }

    .kids-hero::after {
        width: 280px;
        height: 280px;

        right: -150px;
        top: 100px;
    }

}