﻿#sectionPracticeArea {
    background-color: var(--primary);
    background: url(/img/default-home-footer-image.jpg);
    background-position: bottom center;
    background-size: cover;
    margin-top: -.5rem;
    padding: 10rem 2rem;
    text-align:center;
    /*
     background-image: url('/img/bkg_practice_areas-large.png');
    background-size: contain;
         padding:4rem 2rem;
   */
}
#practiceInner h2 {
    font-family: var(--headerFont);
    font-size: 1.8rem;
    font-size: clamp(1.8rem, 1.58rem + 1.0999999999999999vw, 2.9rem);
    color: var(--background);
    text-transform: uppercase;
    letter-spacing: 10px;
    line-height: 1.15;
    text-align: center;
    margin-bottom:4rem;
}
#practiceInner {
    width: 100%;
    /*min-height: 90vh;*/
    max-width: 76rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    padding: clamp(1rem, 0.4rem + 3vw, 4rem);
    background: rgba(9, 38, 51, .65);
    /*
        gap: clamp(3rem, 6vw, 4rem);
        background: rgba(var(--backgroundRGB), .95);
        background: rgba(9, 38, 51, .9);
         background: rgba(0,0,0, .35);
    */
}
.pa-middle-col {
    border-left: 1px solid var(--accentOne);
    border-right: 1px solid var(--accentOne);
}
#practiceCardContainer {
    width: 100%;
}

    #practiceCardContainer ul {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* Creates 3 equal columns */
        grid-gap: .5rem 2rem; 
        padding: 0;
        margin: 0;
        list-style: none;
        position: relative;
    }

    #practiceCardContainer ul::before,
    #practiceCardContainer ul::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 0px;
        background-color: var(--background);
        background-color: var(--accentOne);
    }

    #practiceCardContainer ul::before {
        left: 32.75%; /* Border between the first and second column */
    }

    #practiceCardContainer ul::after {
        left: 67%; /* Border between the second and third column */
    }

    #practiceCardContainer li {
        display: flex; /* Enables flexbox on the list items */
        align-items: center; /* Vertically aligns the content */
        justify-content: center; /* Horizontally aligns the content (optional) */
        padding: 1rem;
        text-align: center;
        text-shadow: 2px 2px 6px rgba(0, 0, 0, .8);
        /* background: rgba(9, 38, 51, .65);*/
    }

    #practiceCardContainer a {
        font-family: var(--headerFont);
        font-size: 1.15rem;
        font-size: clamp(1.15rem, 1.0799999999999998rem + 0.3500000000000001vw, 1.5rem);
        color: #FFF;
        text-transform: uppercase;
    }
    #practiceCardContainer a:hover {
        color:var(--secondary)
    }

@media screen and (max-width: 1024px) {
    /* For medium screens (up to 1024px), set 2 columns */
    #practiceInner {
        margin-top: 145px;
    }
    #practiceCardContainer ul {
        grid-template-columns: repeat(2, 1fr);
    }
    #practiceCardContainer ul::before {width:0;background-color:transparent;}
    #practiceCardContainer ul::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: var(--background);
    }

    #practiceCardContainer ul::before {
        left: 0; /* Border between the first and second column */
    }

    #practiceCardContainer ul::after {
        left: 50%; /* Border between the second and third column */
    }
}

@media screen and (max-width: 768px) {
    /* For small screens (up to 768px), set 1 column */
    #practiceCardContainer ul {
        grid-template-columns: 1fr;
    }
        #practiceCardContainer ul::after {
            width: 0;
            background-color: transparent;
            left: 0; /* Border between the second and third column */
        }
}




