.page-template-template-act-toolkit {
    --primary-color: #11244B;
    --secondary-color: #18479F;

    main {
        padding: 0 !important;

        .container {
            padding-inline: 1.875rem;
            max-width: calc(var(--site_width) + 3.75rem);
            overflow-x: clip !important;
            overflow-y: visible;

            p {
                margin-top: 0;

                &:last-child, &:last-of-type {
                    margin-bottom: 0 !important;
                }
            }
        }

        > .fusion-row {
            max-width: unset !important;
        }
    }
}

.hero-act-toolkit {
    padding-block: 5rem;
    background-size: cover;
    background-position: center;

    .hero-act-toolkit__search-input-wrapper {
        position: relative;
        margin-top: 2.5rem;

        &:has(input:placeholder-shown) {
            .hero-act-toolkit__search-btn-clear {
                opacity: 0;
                visibility: hidden;
            }
        }

        .hero-act-toolkit__search-btn-clear {
            display: grid;
            place-content: center;
            position: absolute;
            padding: 0;
            top: 50%;
            width: 1.5rem;
            height: 1.5rem;
            right: 1rem;
            translate: 0 -50%;
            border: none;
            border-radius: 100vmax;
            background-color: rgb(17 36 75 / 0.10);
            transition: all 0.1s ease;
            cursor: pointer;

            svg {
                width: 1rem;
                height: 1rem;
            }

            &:hover {
                background-color: rgb(17 36 75 / 0.20);

            }
        }

        .hero-act-toolkit__search-input {
            height: auto;
            padding: 1rem 3.3rem 1rem 3rem;
            box-shadow: 0 0 0.5rem 0 rgb(0 0 0 / 0.10);
            border-radius: 100vmax;
            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNSAxNkM3LjY4MzMzIDE2IDYuMTQ2IDE1LjM3MDcgNC44ODggMTQuMTEyQzMuNjMgMTIuODUzMyAzLjAwMDY3IDExLjMxNiAzIDkuNUMyLjk5OTMzIDcuNjg0IDMuNjI4NjcgNi4xNDY2NyA0Ljg4OCA0Ljg4OEM2LjE0NzMzIDMuNjI5MzMgNy42ODQ2NyAzIDkuNSAzQzExLjMxNTMgMyAxMi44NTMgMy42MjkzMyAxNC4xMTMgNC44ODhDMTUuMzczIDYuMTQ2NjcgMTYuMDAyIDcuNjg0IDE2IDkuNUMxNiAxMC4yMzMzIDE1Ljg4MzMgMTAuOTI1IDE1LjY1IDExLjU3NUMxNS40MTY3IDEyLjIyNSAxNS4xIDEyLjggMTQuNyAxMy4zTDIwLjMgMTguOUMyMC40ODMzIDE5LjA4MzMgMjAuNTc1IDE5LjMxNjcgMjAuNTc1IDE5LjZDMjAuNTc1IDE5Ljg4MzMgMjAuNDgzMyAyMC4xMTY3IDIwLjMgMjAuM0MyMC4xMTY3IDIwLjQ4MzMgMTkuODgzMyAyMC41NzUgMTkuNiAyMC41NzVDMTkuMzE2NyAyMC41NzUgMTkuMDgzMyAyMC40ODMzIDE4LjkgMjAuM0wxMy4zIDE0LjdDMTIuOCAxNS4xIDEyLjIyNSAxNS40MTY3IDExLjU3NSAxNS42NUMxMC45MjUgMTUuODgzMyAxMC4yMzMzIDE2IDkuNSAxNlpNOS41IDE0QzEwLjc1IDE0IDExLjgxMjcgMTMuNTYyNyAxMi42ODggMTIuNjg4QzEzLjU2MzMgMTEuODEzMyAxNC4wMDA3IDEwLjc1MDcgMTQgOS41QzEzLjk5OTMgOC4yNDkzMyAxMy41NjIgNy4xODcgMTIuNjg4IDYuMzEzQzExLjgxNCA1LjQzOSAxMC43NTEzIDUuMDAxMzMgOS41IDVDOC4yNDg2NyA0Ljk5ODY3IDcuMTg2MzMgNS40MzYzMyA2LjMxMyA2LjMxM0M1LjQzOTY3IDcuMTg5NjcgNS4wMDIgOC4yNTIgNSA5LjVDNC45OTggMTAuNzQ4IDUuNDM1NjcgMTEuODEwNyA2LjMxMyAxMi42ODhDNy4xOTAzMyAxMy41NjUzIDguMjUyNjcgMTQuMDAyNyA5LjUgMTRaIiBmaWxsPSIjMTEyNDRCIi8+Cjwvc3ZnPg==');
            background-position: 1rem center;
            background-repeat: no-repeat;
            font-size: 1rem;
            text-overflow: ellipsis;
            color: var(--primary-color);
            border: 0;

            &::placeholder {
                color: color-mix(in srgb, var(--primary-color) 50%, transparent);
            }
        }
    }

    .hero-act-toolkit__go-to {
        display: grid;
        gap: 1rem;
        margin-top: 2rem;

        b {
            font-weight: 700;
            text-box: trim-both cap alphabetic;

        }

        .hero-act-toolkit__go-to__links {
            display: flex;
            gap: 0.5rem;

            a {
                padding: 0.75rem 1rem;
                border: 1px solid var(--secondary-color);
                color: var(--secondary-color);
                font-weight: bold;
                border-radius: 100vmax;
                text-overflow: ellipsis;
                line-height: 1;
                text-box: trim-both cap alphabetic;
                backdrop-filter: blur(0.5rem);
                transition: background-color 0.1s ease;

                &:hover {
                    background-color: rgb(24 71 159 / 0.1);
                }

            }
        }
    }

    h1 {
        margin-block: 0 2rem;
        font-size: 3rem;
        line-height: 1.1;
        text-box: trim-both cap alphabetic;
        color: var(--primary-color);
    }

    p {
        font-size: 1.25rem;
    }
}

.act-toolkit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-block: 5rem;

    &:before, &:after {
        content: none !important;
    }

    .act-toolkit__category {
        display: grid;
        padding: 1.5rem;
        gap: 1.5rem;
        border-radius: 0.5rem;
        box-shadow: 0 0 0.5rem 0 rgb(0 0 0 / 0.08);
        background-color: #fff;

        h2 {
            color: var(--primary-color);
            font-size: 1.5rem;
            line-height: 1.1;
            text-box: trim-both cap alphabetic;

        }

        .act-toolkit__tools {
            display: grid;
            gap: 0.5rem;

            .act-toolkit__tool {
                display: flex;
                gap: 1rem;

                .act-toolkit__tool__details {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    flex-grow: 1;

                    i {
                        display: grid;
                        width: 1.5rem;
                        height: 1.5rem;
                        background-color: var(--primary-color);
                        border-radius: 100vmax;
                        place-content: center;
                    }
                }
            }
        }
    }
}