@font-face {
    font-family: 'Impact';
    src: url('../fonts/Impact.woff2') format('woff2'),
        url('../fonts/Impact.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root {
    --tdl-yellow: #FBED24;
    --tdl-yellow-transparent-50: #FBED2480;
    --tdl-black: #000000;
    --tdl-black-transparent-75: #1E1E1EBF;
    --tdl-black-transparent-70: #000000B2;
    --tdl-red: #FF0000;
    --tdl-white: #ffffff;
    --tdl-white-transparent-90: #FFFFFFE5;
    --tdl-light-grey: #F3F5F6;
    --tdl-dark-grey: #838383;
    --tdl-form-border-color: #D9D9D9;

    /* Base Layout Variables */
    --base-width: 100%;
    --base-max-width: 100%;

    --container-1440: 1440px;
    --container-1310: 1310px;
    --container-1200: 1200px;
    --container-1024: 1024px;
    --container-960: 960px;
    --container-800: 800px;
    --fluid-90: 90%;

    /* Font Families Variables */
    --font-roboto-condensed: "Roboto Condensed", sans-serif;
    --font-anton: "Anton", sans-serif;
    --font-impact: "Impact", sans-serif;
    
    /* Font weight and sizes */
    --base-font-size: 16px;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-900: 900;

    /* Margin and Padding Variables */
    --margin-padding-xsmall: calc(var(--base-font-size) / 2); /* 8px */
    --margin-padding-small: calc(var(--base-font-size) * 0.625); /* 10px */
    --margin-padding-medium: calc(var(--base-font-size) * 1.25); /* 20px */
    --margin-padding-large: calc(var(--base-font-size) * 2.5); /* 40px */
    --margin-padding-xlarge: calc(var(--base-font-size) * 3.5); /* 56px */
    --margin-padding-xxlarge: calc(var(--base-font-size) * 5); /* 80px */
    --margin-padding-xxxlarge: calc(var(--base-font-size) * 6.0625); /* 97px */

    /* Text Alignments */
    --text-align-left: left;
    --text-align-center: center;
    --text-align-right: right;

    /* Borders and Styles */
    --base-border: 1px solid var(--tdl-black);
    --base-border-4px: 4px solid var(--tdl-black);
    --base-radius: 27.5px;

    /* Transitions and Animations */
    --base-transition: all 0.25s ease-in-out 0s;

    /*Custom Variables*/
    --slider-image-default-large: 332px;
    --slider-image-default-small: 250px;
    --iphone-frame-width: 500px;
    --iphone-frame-height: 580px;
    --iphone-frame-width-mobile: 286px;
    --iphone-frame-height-mobile: 585px;

}
/* Genesis Style Resets */
*, *::before, *::after{ box-sizing: unset; margin: unset; padding: unset; }
body{ position: static !important; }
embed, iframe, img, object, video, .wp-caption{ max-width: unset; height: unset; }
header.site-header, footer.site-footer{ display: none; }
h1, h2, h3, h4, h5, h6, p { font-family: unset; font-size: unset;  margin: unset; padding: unset; }
p, div, body > div { font-size: var(--base-font-size); }
/* WildCard Styles and Body */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}
html{ scroll-behavior: smooth; }
body {
    background-color: var(--tdl-light-grey);
    color: var(--tdl-black);
    font-family: var(--font-roboto-condensed);
    font-size: var(--base-font-size);
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: var(--font-weight-400);
    line-height: normal;
}
/* Form PlaceHolder Styles */
::placeholder,
::-moz-placeholder,
::-webkit-input-placeholder{
    font-size: var(--base-font-size) !important;
    color: var(--tdl-dark-grey) !important;
}
/* Elements Based Styles */
a { 
    color: inherit; cursor: pointer; text-decoration: none;
    &:hover,
    &:focus,
    &:active{
        color: unset;
        text-decoration: unset;
        outline: none;
    }
}
strong { font-weight: var(--font-weight-700); }
hr {
    border: 0;
    border-collapse: collapse;
    border-top: var(--base-border);
    clear: both;
    margin: 0;
}
h1 {
    font-family: var(--font-impact);
    font-size: calc(var(--base-font-size) * 5.625); /* 90px */
    line-height: calc(var(--base-font-size) * 6); /* 96px */
    letter-spacing: calc(var(--base-font-size) * 0.05625);
    text-transform: uppercase;
    font-weight: inherit;
}
h2 {
    font-family: var(--font-anton);
    font-size: calc(var(--base-font-size) * 3.125); /* 50px */
    line-height: calc(var(--base-font-size) * 3.625); /* 58px */
    text-transform: uppercase;
    font-weight: inherit;
    &.line-heading{
        span{
            position: relative;
            &::after {
                content: "";
                position: absolute;
                width: 100%;
                height: calc(var(--base-font-size) * 0.3125); /* 5px */
                bottom: 0;
                left: 0;
                z-index: 0;
                background: url('../images/heading-line.png');
                background-size: cover;
                background-repeat: no-repeat;
                transform: translateY(-100%);
            }
        }
    }
    &.line-heading-long{
        span{
            position: relative;
            &::after {
                content: "";
                position: absolute;
                width: 100%;
                height: calc(var(--base-font-size) * 3);
                bottom: 0;
                left: 0;
                z-index: 0;
                background: url(../images/long-under-line.png);
                background-size: contain;
                background-repeat: no-repeat;
                transform: translateY(65%);
            }
        }
    }
    &.checkmark{
        & img{
            display: inline-block;
            transform: translate(-10px, 10px);
        }
    }
    &.color-white{
        color: var(--tdl-white);
    }
    &.color-yellow{
        color: var(--tdl-yellow);
    }
}
h3 {
    font-family: var(--font-anton);
    font-size: calc(var(--base-font-size) * 1.875); /* 30px */
    line-height: calc(var(--base-font-size) * 1.875);;
    text-transform: uppercase;
    font-weight: inherit;
    &.checkmark-empty{
        & img{
            display: inline-block;
            transform: translate(-10px, 8.5px);
        }
    }
}
h4 {
    font-size: calc(var(--base-font-size) * 1.25); /* 20px */
    font-weight: var(--font-weight-700);
    line-height: normal;
    & .no-bold{
        font-weight: var(--font-weight-400);
    }
    &.impact-family{
        font-family: var(--font-impact);
        text-transform: uppercase;
    }
}
/* Global Layout Styles */
.container-fluid {
    width: var(--base-width);
    max-width: var(--base-max-width);
    margin: 0 auto;
    &.container-1440{
        max-width: var(--container-1440);
    }
    &.container-1310{
        max-width: var(--container-1310);
    }
    &.container-1200{
        max-width: var(--container-1200);
    }
    &.container-1024{
        max-width: var(--container-1024);
    }
    &.container-960{
        max-width: var(--container-960);
    }
    &.container-800{
        max-width: var(--container-800);
    }
    &.fluid-90{
        max-width: var(--fluid-90);
    }
    /* Row and Column Layout */
    .row {
        width: var(--base-width);
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        &.grid{
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            align-items: stretch;
            &.grid4{
                grid-template-columns: repeat(4, 1fr);
                gap: var(--margin-padding-medium);
            }
        }
    }
    .col2 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 2);
    }
    .col3 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 3);
    }
    .col4 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 4);
    }
    .col5 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 5);
    }
    .col6 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 6);
    }
    .col{
        width: var(--base-width);
        &.w10 {
            width: calc(var(--base-width) / 100 * 10);
            max-width: calc(var(--base-width) / 100 * 10);
        }
        &.w15 {
            width: calc(var(--base-width) / 100 * 15);
            max-width: calc(var(--base-width) / 100 * 15);
        }
        &.w20 {
            width: calc(var(--base-width) / 100 * 20);
            max-width: calc(var(--base-width) / 100 * 20);
        }
        &.w25 {
            width: calc(var(--base-width) / 100 * 25);
            max-width: calc(var(--base-width) / 100 * 25);
        }
        &.w30 {
            width: calc(var(--base-width) / 100 * 30);
            max-width: calc(var(--base-width) / 100 * 30);
        }
        &.w35 {
            width: calc(var(--base-width) / 100 * 35);
            max-width: calc(var(--base-width) / 100 * 35);
        }
        &.w40 {
            width: calc(var(--base-width) / 100 * 40);
            max-width: calc(var(--base-width) / 100 * 40);
        }
        &.w45 {
            width: calc(var(--base-width) / 100 * 45);
            max-width: calc(var(--base-width) / 100 * 45);
        }
        &.w50 {
            width: calc(var(--base-width) / 100 * 50);
            max-width: calc(var(--base-width) / 100 * 50);
        }
        &.w55 {
            width: calc(var(--base-width) / 100 * 55);
            max-width: calc(var(--base-width) / 100 * 55);
        }
        &.w60 {
            width: calc(var(--base-width) / 100 * 60);
            max-width: calc(var(--base-width) / 100 * 60);
        }
        &.w65 {
            width: calc(var(--base-width) / 100 * 65);
            max-width: calc(var(--base-width) / 100 * 65);
        }
        &.w70 {
            width: calc(var(--base-width) / 100 * 70);
            max-width: calc(var(--base-width) / 100 * 70);
        }
        &.w75 {
            width: calc(var(--base-width) / 100 * 75);
            max-width: calc(var(--base-width) / 100 * 75);
        }
        &.w80 {
            width: calc(var(--base-width) / 100 * 80);
            max-width: calc(var(--base-width) / 100 * 80);
        }
        &.w85 {
            width: calc(var(--base-width) / 100 * 85);
            max-width: calc(var(--base-width) / 100 * 85);
        }
        &.w90 {
            width: calc(var(--base-width) / 100 * 90);
            max-width: calc(var(--base-width) / 100 * 90);
        }
        &.w100 {
            width: var(--base-width);
            max-width: var(--base-width);
        }
    }
}

/* Global Class and ID + Button Styles */
.btn {
    width: var(--base-width);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--margin-padding-small) var(--margin-padding-medium);
    border: var(--base-border);
    border-radius: var(--base-radius);
    color: var(--tdl-black);
    cursor: pointer;
    transition: var(--base-transition);
    font-family: var(--font-roboto-condensed);
    font-weight: var(--font-weight-900);
    font-size: calc(var(--base-font-size) * 1.25); /* 20px */
    text-transform: uppercase;
    &.btn-primary {
        width: fit-content;
        background-color: var(--tdl-white);
        &:hover {
            background-color: var(--tdl-yellow);
        }
        &.yellow{
            background-color:  var(--tdl-yellow);
            &:hover {
                background-color: var(--tdl-black);
                color: var(--tdl-white);
            }
        }
        &.black{
            background-color:  var(--tdl-black);
            color: var(--tdl-white);
            &:hover {
                background-color: var(--tdl-yellow);
                color: var(--tdl-black);
            }
        }
    }
    &.btn-secondary {
        width: fit-content;
        color: var(--tdl-white);
        background-color: var(--tdl-red);
        border-radius: calc(var(--base-radius) * 0.7454);
        font-size: calc(var(--base-font-size) * 1.125); /* 18px */
        &:hover {
            background-color: var(--tdl-black);
        }
    }
    &.btn-text-link{
        padding: 0;
        margin: 0;
        font-size: inherit;
        font-weight: inherit;
        text-transform: inherit;

    }
    
}
.horizontal-list{
    gap: var(--margin-padding-medium);
    & li{
        position: relative;
        width: fit-content;
        &::after {
            content: "|";
            position: absolute;
            color: white;
            right: 0;
            top: 0;
            transform: translateX(calc(var(--base-width) + 10px));
        }
        &:last-of-type::after{
            content: "";
            gap: 0px;
        }
    }
}
.vertical-list{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    &.two-columns{
        grid-template-columns: repeat(2, 1fr);
    }
    &.six-columns{
        grid-template-columns: repeat(6, 1fr);
    }
    & li{
        text-align: var(--text-align-left);
        & a{
            line-height: calc(var(--base-font-size) * 1.875);
            &.weight-700{
                font-weight: var(--font-weight-700);
            }
            &:hover{
                text-decoration: underline;
            }
        }
    }
}
.small-text{
    font-size: calc(var(--base-font-size) * 0.75); /* 12px */
    &.dark-grey{
        color: var(--tdl-dark-grey);
    }
}
.small-text14{
    font-size: calc(var(--base-font-size) * 0.875); /* 14px */
}
.medium-text{ font-size: calc(var(--base-font-size) * 1.125); } /* 18px */
.large-text{ font-size: calc(var(--base-font-size) * 1.25); } /* 20px */
.spacer{
    width: var(--base-width);
    padding: var(--margin-padding-small) 0;
    &.half{
        padding: calc(var(--margin-padding-small) / 2) 0;
    }
    &.x2 {
        padding: calc(var(--margin-padding-small) * 2) 0; 
    }
    &.x3 {
        padding: calc(var(--margin-padding-small) * 3) 0; 
    }
    &.x4 {
        padding: calc(var(--margin-padding-small) * 4) 0; 
    }
    &.x5 {
        padding: calc(var(--margin-padding-small) * 5) 0; 
    }
    &.x6 {
        padding: calc(var(--margin-padding-small) * 6) 0; 
    }
    &.x8 {
        padding: calc(var(--margin-padding-small) * 8) 0; 
    }
}
.james-badge {
    width: max-content;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(-50%, -50%);
    background-color: var(--tdl-white-transparent-90);
    padding: var(--margin-padding-small) var(--margin-padding-medium);
    border: var(--base-border);
    border-color: var(--tdl-yellow);
    border-radius: calc(var(--base-radius) / 2);
    text-align: center;
    & p{
        font-weight: var(--font-weight-600);
    }
}
.color-yellow { color: var(--tdl-yellow); }
.color-white { color: var(--tdl-white); }

/* Global Form Styles based on class */
form.cn-form{
    & .gf_progressbar_wrapper{
       & .gf_progressbar_title{
            font-size: var(--base-font-size);
            font-weight: var(--font-weight-700);
            color: var(--tdl-black);
            display: flex;
            align-items: center;
            gap: calc(var(--margin-padding-xsmall) / 2);
            white-space: nowrap;
            & .gf_step_page_name{
                font-size: calc(var(--base-font-size) + 4px);
                margin-left: auto;
                text-align: right;
                flex: 0 0 auto;
                padding-left: calc(var(--margin-padding-xsmall) / 2);
            }
       }
       & .gf_progressbar {
            background: var(--tdl-light-grey);
            height: calc(var(--base-font-size) / 2);
            & .gf_progressbar_percentage{
                height: inherit;
                & span{ display: none; }
            }
       }
    }
    & .gform-body{
        & .gform_page{
            & .gform_page_fields{
                & .gform_fields{
                    & .gfield{
                        & input[type="text"],
                        & input[type="email"],
                        & input[type="phone"],
                        & input[type="tel"],
                        & input[type="number"]
                        & select,
                        & textarea{
                            border-radius: calc(var(--base-radius) * 0.2909);
                            font-size: var(--base-font-size);
                            padding: var(--margin-padding-small);
                            &:hover,
                            &:active,
                            &:focus{
                                border: var(--base-border);
                                border-color: var(--tdl-yellow);
                            }
                        }
                        & .gfield_select{
                            border-radius: calc(var(--base-radius) * 0.2909);
                            font-size: var(--base-font-size);
                            padding: var(--margin-padding-small);
                            &:hover,
                            &:active,
                            &:focus{
                                border: var(--base-border);
                                border-color: var(--tdl-yellow);
                            }
                            & option {
                                background: var(--tdl-light-grey);
                                color: var(--tdl-black);
                                padding: var(--margin-padding-small);
                                &:hover {
                                    background: var(--tdl-yellow-transparent-50);
                                }
                            }

                        }
                    }
                    & .cn_form_checkbox{
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: flex-start;
                        gap: var(--margin-padding-xsmall);
                        cursor: pointer;
                        z-index: 999; /*Added z-index to fix checkbox issue*/
                        & .ginput_container_consent{
                            /* & label{ display: none; } */
                        }
                    }
                    & .cn_form_disclaimer,
                    & .gfield_consent_description{
                        font-family: var(--font-roboto-condensed);
                        margin: 0;
                        padding: 0;
                        border: 0;
                        text-align: var(--text-align-left);
                        font-size: calc(var(--base-font-size) * 0.70);
                        line-height: calc(var(--base-font-size) * 0.70);
                        color: var(--tdl-dark-grey);
                        overflow: visible;
                        outline: none;
                    }
                }
            }
            & .gform_page_footer{
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                gap: var(--margin-padding-small);
                & .gform-theme-button,
                & .gform_button{
                    width: calc(var(--base-width) - 20%);
                    margin: 0 auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: var(--margin-padding-small);
                    border: var(--base-border);
                    border-radius: var(--base-radius);
                    color: var(--tdl-black);
                    cursor: pointer;
                    transition: var(--base-transition);
                    font-family: var(--font-roboto-condensed);
                    font-weight: var(--font-weight-900);
                    font-size: calc(var(--base-font-size) * 1.25); /* 20px */
                    text-transform: uppercase;
                    background: var(--tdl-yellow);
                }
                & .gform_next_button{ 
                    order: 1;
                    &:hover{
                        background: var(--tdl-black);
                        color: var(--tdl-white);
                    }
                 }
                & .gform_previous_button{
                    order: 2;
                    padding: 0;
                    border: none;
                    color: var(--tdl-dark-grey);
                    font-weight: var(--font-weight-400);
                    font-size: var(--base-font-size);
                    background: transparent;
                    text-transform: capitalize;
                    text-decoration: underline;
                }
            }
        }
    }
}

/* X-Small (less than 576px) */
@media (max-width: 1199.98px) {
    .show-on-desktop{ display: none !important; }
    .show-on-mobile{ display: block !important; }
    html{ margin-top: unset !important; }
    /* Global Layout Styles */
    .container-fluid {
        &.container-1440,
        &.container-1310,
        &.container-1200,
        &.container-1024,
        &.container-960,
        &.container-800,
        &.fluid-90{
            max-width: var(--base-max-width);
            padding: 0 var(--margin-padding-large);
        }
        [class^="col"].col,
        [class*=" col"].col,
        .col[class^="w"],
        .col[class*=" w"] {
            width: 100%;
            max-width: 100%;
        }
    }
    h1 {
        font-family: var(--font-anton);
        font-size: calc(var(--base-font-size) * 3.5); /* 56px */
        line-height: calc(var(--base-font-size) * 3.5); /* 56px */
        letter-spacing: calc(var(--base-font-size) * 0.05625);
        text-transform: uppercase;
        font-weight: inherit;
    }
    h2 {
        font-family: var(--font-anton);
        font-size: calc(var(--base-font-size) * 2.375); /* 38px */
        line-height: calc(var(--base-font-size) * 2.375); /* 38px */
        text-transform: uppercase;
        font-weight: inherit;
        &.line-heading{
            span{
                position: relative;
                &::after {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: calc(var(--base-font-size) * 0.3125); /* 5px */
                    bottom: 0;
                    left: 0;
                    z-index: 0;
                    background: url('../images/heading-line.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                    transform: translateY(-100%);
                }
            }
        }
        &.color-white{
            color: var(--tdl-white);
        }
        &.color-yellow{
            color: var(--tdl-yellow);
        }
    }
    h3 {
        font-family: var(--font-anton);
        font-size: calc(var(--base-font-size) * 1.375); /* 22px */
        line-height: normal;
        text-transform: uppercase;
        font-weight: inherit;
        text-decoration: underline;
    }
    h4 {
        font-size: calc(var(--base-font-size) * 1.25); /* 20px */
        font-weight: var(--font-weight-700);
        line-height: normal;
        & .no-bold{
            font-weight: var(--font-weight-400);
        }
        &.impact-family{
            font-family: var(--font-impact);
            text-transform: uppercase;
        }
    }
    /* Global Form Styles based on class */
    form.cn-form{
        & .gf_progressbar_wrapper{
            & .gf_progressbar_title{
                    font-size: calc(var(--base-font-size) - 2px);
                    & .gf_step_page_name{
                        font-size: calc(var(--base-font-size) + 2px);
                    }
            }
        }
    }
    .gform_wrapper.gravity-theme input:not([type=radio]):not([type=checkbox]):not([type=image]):not([type=file]){
        line-height: unset !important;
    }
    /* Cost Free Case Review Section */
    #cost-free-case-review{
        background: url('../images/BG-Photo-Free-Services.png');
        background-size: cover;
        background-position: center;
        padding: var(--margin-padding-large) 0 0 0;
        .container-fluid{ padding: 0; }
        & .cost-free-case-review-wrapper{
            align-items: stretch;
            text-align: center;
            & .cost-free-case-review-left{
                position: relative;
                margin: var(--margin-padding-large) 0;
                padding: 0 var(--margin-padding-large);
                & img{
                    position: static;
                    top: 50%;
                    left: 50%;
                    /* transform: translate(-65%, -50%); */
                }
            }
            & .cost-free-case-review-right{
                padding: 0 var(--margin-padding-large);
                & h2{
                    font-size: calc(var(--base-font-size) * 2.125);
                    line-height: calc(var(--base-font-size) * 2.25);
                }
                color: var(--tdl-white);
                & h4{
                    color: var(--tdl-yellow);
                }
                & .btn-holder{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    & .btn{ width: var(--base-width); text-align: var(--text-align-center); }
                }
                &:last-child{
                    padding-top: calc(var(--margin-padding-xxxlarge) * 1.5);
                    margin-top: calc(var(--margin-padding-xxxlarge) * -1.25);
                    background: var(--tdl-black);
                    text-align: left;
                }
            }
        }
    }
    /* Our Practice Section */
    #our-practice{
        padding: var(--margin-padding-large) 0;
        & .our-practice-wrapper{
            overflow: hidden;
            & .our-practice-overlay{
                width: var(--base-width);
                text-align: var(--text-align-center);
                & h2{
                    color: var(--tdl-black);
                    & span{
                        color: var(--tdl-black);
                    }
                }
                .spacer.x3{
                    padding: var(--margin-padding-medium);
                }
                & .icon-box-wrapper{
                    grid-template-columns: repeat(1, 1fr);
                    & .icon-box{
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        align-items: center;
                        background: var(--tdl-black);
                        border-radius: calc(var(--base-radius) / 2);
                        padding: var(--margin-padding-medium);
                        color: var(--tdl-white);
                        text-align: var(--text-align-left);
                        & .icon-holder{
                            width: calc(var(--base-font-size) * 3.5625);
                            height: calc(var(--base-font-size) * 3.5625);
                            margin-right: var(--margin-padding-small);
                            background: var(--tdl-white);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: var(--base-width);
                        }
                        & h3{
                            text-decoration: none;
                            position: relative;
                            &::after{
                                content: '';
                                width: calc(var(--base-font-size) * 1.625);
                                height: calc(var(--base-font-size) * 1.625);
                                background-image: url('../images/arrow-right-circle.png');
                                background-size: contain;
                                background-position: center;
                                position: absolute;
                                top: 50%;
                                transform: translate(40%, -50%);
                            }
                        }
                        & p{
                            width: var(--base-width);
                        }
                    }
                }
            }
        }
    }
}

/* Rare xSmall (≥320px) */
@media (min-width: 320px) and (max-width: 424.98px){
    #our-practice {
        & .our-practice-wrapper {
            & .our-practice-overlay {
                & .icon-box-wrapper {
                    & .icon-box {
                        & a.row{
                            & .icon-holder{
                                width: calc(var(--margin-padding-small) * 4);
                                height: calc(var(--margin-padding-small) * 4);
                                & img{
                                    max-width: var(--base-width);
                                    height: var(--base-width);
                                    object-fit: contain;
                                    transform: scale(0.75);
                                }
                            }
                            & h3 {
                                font-size: calc(var(--base-font-size) + 2px);
                                width: calc(var(--base-width) - 50px);
                                text-align: var(--text-align-left);
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Rare Mobile (≥525px) */
@media (min-width: 525px){
    .show-on-mobile{
        display: block;
        &.rare-mobile{ display: none; }
    }
}

/* Small (≥576px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    h1{
        font-size: calc(var(--base-font-size) * 3);
    }
}

/* Large (≥992px) */
@media (min-width: 992px) and (max-width: 1199.98px){
    /* Mobile CSS reset for Cost Free Case Review Section */
    #cost-free-case-review{
        /* GLobal Styles Reset */
        & .show-on-desktop{ display: block !important; }
        & .show-on-mobile{ display: none !important; }
        .container-fluid {
            width: var(--base-width);
            max-width: var(--base-max-width);
            margin: 0 auto;
            &.container-800{ max-width: var(--container-800); }
            /* Row and Column Layout */
            .row { flex-direction: row; }
            .col2 .col {
                width: var(--base-width);
                max-width: calc(var(--base-width) / 2);
            }
            .col{
                &.w35 {
                    width: calc(var(--base-width) / 100 * 35);
                    max-width: calc(var(--base-width) / 100 * 35);
                }
                &.w65 {
                    width: calc(var(--base-width) / 100 * 65);
                    max-width: calc(var(--base-width) / 100 * 65);
                }
            }
        }
        /* Mobile Section Specific Reset Starts */
        padding: unset;
        .container-fluid{ padding: unset; }
        & .cost-free-case-review-wrapper{
            text-align: unset;
            & .cost-free-case-review-left{
                margin: unset;
                padding: unset;
                & img{ position: unset; }
            }
            & .cost-free-case-review-right{
                padding: unset;
                & .btn-holder{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    & .btn{ width: fit-content; }
                }
                &:last-child{
                    padding-top: unset;
                    margin-top: unset;
                    background: unset;
                    text-align: unset;
                }
            }
        }
    }
    /* DESKTOP - Cost Free Case Review Section */
    #cost-free-case-review{
        padding: var(--margin-padding-xxxlarge) 0;
        background: url('../images/BG-Photo-Free-Services.png');
        background-size: cover;
        background-position: center;
        & .cost-free-case-review-wrapper{
            align-items: center; /*was stretch*/
            border-radius: calc(var(--base-font-size) - 4px); /*New Addition*/
            /* & .cost-free-case-review-left{
                position: relative;
                overflow: visible;
                &::before {
                    background-image: url(../images/phone-frame.png);
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                    content: '';
                    width: 100%;
                    height: 150%;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translate(-10%, -50%);
                    z-index: 1;
                }
                & img{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-65%, -50%);
                }
                & iframe,
                & video{
                    width: calc(var(--base-width) - 50px);
                    height: calc(159% - 50px);
                    overflow: hidden;
                    border-radius: var(--base-radius);
                    transform: translate(-5.5%, -15.5%);
                    top: 0;
                    margin-left: 10px;
                    margin-right: 10px;
                    position: relative;
                    z-index: 2;
                    outline: none;
                    background: var(--tdl-black);
                }
            } */
            & .cost-free-case-review-left {
                position: relative;
                width: 286px;
                height: 540px; /*was 585px;*/
                margin: 0 auto;

                &::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background-image: url(../images/phone-frame.png);
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                    z-index: 2;
                    pointer-events: none; 
                }

                & video {
                    position: absolute;
                    top: 14px; /*was 60px*/     
                    left: 18px;
                    width: 250px;   
                    height: 515px; /*was 465px*/ 
                    object-fit: cover;
                    border-radius: 24px;
                    z-index: 1;
                    outline: none;
                    background: var(--tdl-black);
                }
            }

            & .cost-free-case-review-right{
                color: var(--tdl-white);
                padding-right: var(--margin-padding-medium); /*was Large*/
                background: var(--tdl-black); /*New Addition*/
                padding-left: var(--margin-padding-large); /*New Addition*/
                margin-left: -16px; /*New Addition*/
                border-radius: 0 calc(var(--base-font-size) - 4px) calc(var(--base-font-size) - 4px) 0; /*New Addition*/
                & h4{
                    color: var(--tdl-yellow);
                }
                & .btn-holder{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
}

/* Extra Extra Large (≥1200px) - Actual Desktop Styles */
@media only screen and (min-width: 1200px){
    .show-on-desktop{ display: block !important; }
    .show-on-mobile{ display: none !important; }
    
    /* Cost Free Case Review Section */
    #cost-free-case-review{
        padding: var(--margin-padding-xxlarge) 0;
        background: url('../images/BG-Photo-Free-Services.png');
        background-size: cover;
        background-position: center;
        & .cost-free-case-review-wrapper{
            align-items: stretch;
            background: var(--tdl-black);
            border-radius: calc(var(--base-font-size) - 4px);
            & .cost-free-case-review-left{
                position: relative;
                overflow: visible;
                &::before {
                    background-image: url(../images/phone-frame.png);
                    background-size: 100%;
                    background-position: center;
                    background-repeat: no-repeat;
                    content: '';
                    width: 100%;
                    height: 150%;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translate(-10%, -50%);
                    z-index: 1;
                }
                & img{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-65%, -50%);
                }
                & iframe,
                & video{
                    width: calc(var(--base-width) - 25px);
                    height: calc(128% - 30px);
                    overflow: hidden;
                    border-radius: var(--base-radius);
                    transform: translate(-10%, -8.5%);
                    top: 0;
                    margin-left: 10px;
                    margin-right: 10px;
                    position: relative;
                    z-index: 2;
                    outline: none;
                    background: var(--tdl-black);
                }
            }
            & .cost-free-case-review-right{
                color: var(--tdl-white);
                padding-right: var(--margin-padding-large);
                & h4{
                    color: var(--tdl-yellow);
                }
                & .btn-holder{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    & a{
                        &:hover{
                            background: var(--tdl-white);
                            color: var(--tdl-black);
                        }
                    }
                }
            }
        }
    }
    
    /* Our Practice Section */
    #our-practice{
        padding: var(--margin-padding-xxlarge) 0;
        background-color: var(--tdl-yellow);
        & .our-practice-wrapper{
            background-image: url('../images/Practice-Areas-BG.png');
            background-size: cover;
            background-position: center;
            border-radius: calc(var(--base-radius) * 1.0909);
            overflow: hidden;
            & .our-practice-overlay{
                padding: var(--margin-padding-xlarge) var(--margin-padding-xxxlarge) var(--margin-padding-xxxlarge) var(--margin-padding-xxxlarge);
                background: var(--tdl-black-transparent-75);
                width: var(--base-width);
                text-align: var(--text-align-center);
                & .icon-box-wrapper{
                    & .icon-box{
                        display: grid;
                        background: var(--tdl-black-transparent-70);
                        border-radius: calc(var(--base-radius) / 2);
                        padding: var(--margin-padding-medium);
                        color: var(--tdl-white);
                        text-align: var(--text-align-left);
                        & .icon-holder{
                            width: calc(var(--base-font-size) * 3.5625);
                            height: calc(var(--base-font-size) * 3.5625);
                            background: var(--tdl-white);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: var(--base-width);
                        }

                        &:hover{
                            background: var(--tdl-yellow);
                            color: var(--tdl-black);
                            & h3{
                                position: relative;
                                &::after{/* Arrow on hover*/
                                    content: '';
                                    width: calc(var(--base-font-size) * 1.625);
                                    height: calc(var(--base-font-size) * 1.625);
                                    border: var(--base-border);
                                    border-radius: var(--base-width);
                                    background-image: url('../images/arrow-right.png');
                                    background-size: contain;
                                    background-position: center;
                                    position: absolute;
                                    top: 50%;
                                    transform: translate(40%, -50%);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Extra Large (≥1200px) */
@media (min-width: 1200px) and (max-width: 1439.98px) {
    .container-fluid {
        &.container-1440,
        &.container-1310,
        &.container-1200,
        &.container-1024,
        &.container-960,
        &.container-800,
        &.fluid-90{
            padding: 0 var(--margin-padding-large);
        }
    }
    .james-badge {
        transform: translate(-50%, -30%);
    }
    /* Cost Free Case Review Section */
    #cost-free-case-review{
        & .cost-free-case-review-wrapper{
            & .cost-free-case-review-left{
                position: relative;
                overflow: visible;
                &::before {
                    background-image: url(../images/phone-frame.png);
                    background-size: 100% 85%;
                    background-position: center;
                    background-repeat: no-repeat;
                    content: '';
                    width: 100%;
                    height: 150%;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translate(-10%, -50%);
                    z-index: 1;
                }
                & img{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-65%, -50%);
                }
                & iframe,
                & video{
                    width: calc(var(--base-width) - 25px);
                    height: calc(128% - 35px);
                    overflow: hidden;
                    border-radius: var(--base-radius);
                    transform: translate(-10%, -8.5%);
                    top: 0;
                    margin-left: 10px;
                    margin-right: 10px;
                    position: relative;
                    z-index: 2;
                    outline: none;
                    background: var(--tdl-black);
                }
            }
        }
    }
}

