@layer components {
    .panelblock {
        margin-top: 16px;
        margin-bottom: 16px;
        box-shadow: 0 7px 16px rgba(43, 93, 58, 0.5), 5px 7px 20px rgba(43, 93, 58, 0.5);
        padding: 8px;
        width: 100%;        
        
    }

    .card {
        box-shadow: 0 7px 16px rgba(67, 80, 71, 0.5), 5px 7px 20px rgba(60, 73, 64, 0.5);
        margin: auto;
        padding: 10px;
        width: fit-content;
        border: 4px solid rgb(67, 157, 171, .01);   
        box-sizing: border-box;
    }


    .center {
        margin: auto;
        text-align: center;
        display: block;
    }

    .code-stitch-core {


        .cs-topper {
            font-size: var(--topperFontSize);
            line-height: 1.2em;
            text-transform: uppercase;
            text-align: inherit;
            letter-spacing: .1em;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.25rem;
            display: block;
        }

        .cs-title {
            font-size: var(--headerFontSize);
            font-weight: 900;
            line-height: 1.2em;
            text-align: inherit;
            max-width: 43.75rem;
            margin: 0 0 1rem 0;
            color: var(--headerColor);
            position: relative;
        }

        .cs-text {
            font-size: var(--bodyFontSize);
            line-height: 1.5em;
            text-align: inherit;
            width: 100%;
            max-width: 40.625rem;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .raw-root {
            --primary: #65AB65;
            --primaryLight: #86F786;
            --secondary: #439DAB;
            --secondaryLight: #6DE5F7;
            --headerColor: #1a1a1a;
            --bodyTextColor: #4e4b66;
            --bodyTextColorWhite: #fafbfc;
            /* 13px - 16px */
            --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
            /* 31px - 49px */
            --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
            --bodyFontSize: 1rem;
            /* 60px - 100px top and bottom */
            --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
        }

    }

    .contact-box-validation {


        .invalid-feedback,
        .empty-feedback {
            display: none;
        }

        .was-validated :placeholder-shown:invalid~.empty-feedback {
            display: block;
        }

        .was-validated :not(:placeholder-shown):invalid~.invalid-feedback {
            display: block;
        }

        .is-invalid,
        .was-validated :invalid {
            border-color: #dc3545;
        }

    }

    #navbar {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        border-radius: 5px;
        border: #000 3px;
        background-color: rgb(101, 171, 101, .5);
        position: sticky;
        top: 0px;

    }

}