/* // --------------- BRIAN'S CSS --------------- // */

/* Mobile Layout Styling */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/*//Typography Styling//*/	

    /* Unset Astra Font Sizes */
    .entry-content {
        h1, h2, h3, h4, h5, h6 {
            font-size: inherit;
            margin-bottom: 1.5em;
        }
    }

    /* Headings Letter Spacing */
    h1, h2, h3, h4, h5, h6 {
        letter-spacing: -0.02em;
    }


    /* Defining Fluid Font Sizes */
    .entry-content h1 { 
        font-size: clamp(2.25rem, calc(1.5rem + 3vw), 3.75rem); 
        line-height: 1.25;
    }

    .entry-content h2 { 
        font-size: clamp(26px, calc(20.86px + 1.61vw), 44px); 
        line-height: 1.25;
    }

    .entry-content h3 { 
        font-size: clamp(1.5rem, calc(1.2rem + 1.8vw), 2.3125rem); 
        line-height: 1.3;
    }

    .entry-content h4 { 
        font-size: clamp(1.25rem, calc(1.1rem + 1.4vw), 2rem); 
        line-height: 1.3;
    }

    .entry-content h5 { 
        font-size: clamp(1.1875rem, calc(1.05rem + 1vw), 1.75rem); 
        line-height: 1.3;
    }

    .entry-content h6 { 
        font-size: clamp(1.0625rem, calc(1rem + 0.6vw), 1.5625rem); 
        line-height: 1.35;
    }

    p, li, .elementor-icon-list-text {
        font-size: clamp(14px, 0.82rem + 0.28vw, 17px);
        line-height: 1.8;
    }
    
    /* Remove Leading from Text */
    .entry-content h1,
    .entry-content h2 {
        &::before {
            content: "";
            display: table;
            margin-bottom: -0.27em;
        }
            
        &::after {
            content: "";
            display: table;
            margin-top: -0.26em;
        }
    }

    .entry-content h3,
    .entry-content h4,
    .entry-content h5 {
        &::before {
            content: "";
            display: table;
            margin-bottom: -0.27em;
        }
            
        &::after {
            content: "";
            display: table;
            margin-top: -0.28em;
        }
    }

    .entry-content h6 {
        &::before {
            content: "";
            display: table;
            margin-bottom: -0.28em;
        }
            
        &::after {
            content: "";
            display: table;
            margin-top: -0.33em;
        }
    }

    .entry-content p {
        &::before {
            content: "";
            display: table;
            margin-bottom: -0.45em;
        }
            
        &::after {
            content: "";
            display: table;
            margin-top: -0.5em;
        }
    }

    /*Elementor Text Widget - No space after last paragraph*/
    .elementor-widget-text-editor {
        h1, h2, h3, h4, h5, h6, p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }


/*//Bulleted Lists//*/

    .bulletlist ul {
        margin: 0;
        padding-left: 0;

        li {
            position: relative;
            padding-left: 35px;
            padding-bottom: 12px;
            list-style: none;
            line-height: 1.45em;
            margin: 0; 

            @media (min-width: 768px) and (max-width: 1024px) {
                padding-left: 29px;
                padding-bottom: 11px;
            }

            @media (max-width: 767px) {
                padding-left: 24px;
                padding-bottom: 11px;
            }

            &:last-child {
                padding-bottom: 0;
            }

            &:before {
                content: "";
                width: 12px;
                height: 12px;
                background-color: #9CBDD4;
                border-radius: 50%;
                position: absolute; 
                left: 0;
                top: 0.35em; 

                @media (min-width: 768px) and (max-width: 1024px) {
                    width: 11px;
                    height: 11px;
                }

                @media (max-width: 767px) {
                    width: 10px;
                    height: 10px;
                }
            }
        }
    }



/*//Miscellaneous Items Styling//*/

    /* Work Sample Grid Styling */
    #work-samples-loop-grid {

        /* Work Sample Grid Custom Breakpoints */
        .elementor-grid {

            @media (max-width: 1300px) {
                grid-template-columns: repeat(2, 1fr) !important;
            }

            @media (max-width: 992px) {
                grid-template-columns: 1fr !important;
            }

        }
        

        /* Work Sample Card Styling */
        .work-sample-card {

            /* Work Sample Image Styling */
            .work-sample-image {
                aspect-ratio: 1 / 1;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                    -ms-flex-pack: center;
                        justify-content: center;
                -webkit-box-align: center;
                -webkit-align-items: center;
                    -ms-flex-align: center;
                        align-items: center;

                img {
                    -webkit-box-shadow: 0 5px 15px 0 rgba(90, 50, 40, .15), 0 4px 8px 0 rgba(80, 40, 30, .1);
                            box-shadow: 0 5px 15px 0 rgba(90, 50, 40, .15), 0 4px 8px 0 rgba(80, 40, 30, .1); 

                    /* Image size on phone */
                    @media (max-width: 430px) {
                        max-width: 86%;
                    }
                }  
            }
                
            /* Work Sample Card Mouseover Effect */
            &:hover .work-sample-image img {
                -webkit-transform: translateZ(20px) scale(1.03);
                        transform: translateZ(20px) scale(1.03);
                -webkit-box-shadow: 0 5px 15px 0 rgba(100, 60, 50, .1), 0 15px 25px 0 rgba(100, 60, 50, .4);
                        box-shadow: 0 5px 15px 0 rgba(100, 60, 50, .1), 0 15px 25px 0 rgba(100, 60, 50, .4);
            }

            /* Sizing for Text Widgets at different screen sizes */
            @media (min-width: 1300px) {
                .work-sample-client-name {
                    width: calc(100% - 14ch - 10px);
                }

                .work-sample-deliverables {
                    width: 14ch;
                }
            }
            
            @media (max-width: 767px) {
                .work-sample-client-name {
                    width: calc(100% - 13ch - 6px);
                }

                .work-sample-deliverables {
                    width: 13ch;
                }
            } 
        }
    }

    /* Animated Background */

    #animated-background {
        background:
            radial-gradient(circle at 20% 30%, rgba(23, 13, 110, 0.8), transparent 40%),
            radial-gradient(circle at 80% 70%, rgba(115, 154, 225, 0.8), transparent 40%),
            -webkit-gradient(linear, left top, left bottom, from(#D41B90), color-stop(80%, #FFA84A));
        background:
            -webkit-radial-gradient(20% 30%, circle, rgba(23, 13, 110, 0.8), transparent 40%),
            -webkit-radial-gradient(80% 70%, circle, rgba(115, 154, 225, 0.8), transparent 40%),
            -webkit-linear-gradient(#D41B90 0%, #FFA84A 80%);
        background:
            radial-gradient(circle at 20% 30%, rgba(23, 13, 110, 0.8), transparent 40%),
            radial-gradient(circle at 80% 70%, rgba(115, 154, 225, 0.8), transparent 40%),
            linear-gradient(#D41B90 0%, #FFA84A 80%);
        background-size: 200% 200%;
        -webkit-animation: ambientMove 10s ease-in-out infinite;
                animation: ambientMove 10s ease-in-out infinite;

        @media (max-width: 767px) {
            -webkit-animation: ambientMove 6s ease-in-out infinite;
                    animation: ambientMove 6s ease-in-out infinite;
        }
    }

    @-webkit-keyframes ambientMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    @keyframes ambientMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    
    /* Elementor Accordion Styling */
    .accordion-simple {

        /* Horizontal Borders Styling */
        .elementor-accordion-item {
            border-top: 1px solid #2A63835C !important;

            /* Accordion Icon Styling */
            .elementor-tab-title .elementor-accordion-icon {
                @media (max-width: 767px) {
                    height: 100px;
                }

                svg {
                    width: 1.1em;
                    height: 2em;

                    @media (max-width: 767px) {
                        width: 14px;
                        height: 23px;
                    }
                }
            }

            /* Tab Content Styling */
            .elementor-tab-content {

                /* Shortening Space Above Content on Phone Sizes */
                @media (max-width: 767px) {
                    margin-top: -8px;
                }
                
                /* Removing horizontal border between title & content */
                -webkit-border-before: none;
                        border-block-start: none;
            }
        }
    }