html {
    scroll-behavior: smooth;
}

body {
    font-family: "Crimson Pro", serif;
    margin: 0;
    background-color: #fff;
    text-transform: uppercase;
    height: 100vh;
    overflow: hidden;
}

body.loaded {
    height: auto;
    overflow: auto;
}

.preloader {
    position: absolute;
    z-index: 5;
    height: 100vh;
    width: 100%;
    background-color: #000;
    visibility: visible;
    opacity: 1;
    transition: opacity 1s ease, visibility 1s ease;
}

.preloader.hidden {
    visibility: hidden;
    opacity: 0;
}

.navbar {
    display: flex;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: transparent;
    width: 80%;
    padding: 0vh 10%;
}

.navbar .left, .navbar .right {
    flex: 1;
    display: flex;
    align-items: center;
}

.navbar .left {
    justify-content: flex-end;
}

.navbar .right {
    justify-content: flex-start;
}

.navbar .left a, .navbar .right a {
    display: block;
    font-size: 1.75vh;
    font-weight: 300;
    border-right: .2vh solid #2e2e2e;
    text-decoration: none;
    color: #fff;
    padding: 1.5vh 1.5vw;
}

.navbar .left a:last-child, .navbar .right a:last-child {
    border-right: none;
}

.navbar .right .contact {
    text-align: center;
    margin-left: 3vw;
}

.navbar .right .contact p.tag {
    font-size: 1.75vh;
    color: #fff;
    font-weight: 300;
    margin: 0;
}

.navbar .right .contact p.number {
    font-size: 2.5vh;
    color: #fff;
    font-weight: 600;
    margin: 0;
}

.navbar .logo {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    background-color: #fff;
    width: auto;
    padding: 1vh 1.5% 0vh 1.5%;
    margin: 0 5vw;
}

.navbar .logo::after {
    position: absolute;
    z-index: 1;
    content: '';
    top: 11vh;
    left: 0;
    width: 100%;
    height: 10vh;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='94'><path fill-rule='evenodd' fill='rgb(255,255,255)' d='M-0,0 C156.154,60.177 321.657,91.678 489.011,92.1 C663.743,94.38 836.959,62.823 1000,0 C666.667,0 333.333,0 -0,0 Z'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
}

.navbar .logo .logoScale {
    position: relative;
    z-index: 2;
    height: 10vh;
    width: auto;
}

.navbar .logo .logoText {
    position: relative;
    z-index: 2;
    height: 2vh;
    width: auto;
    padding-left: 1vw;
}

.header {
    display: flex;
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: #000;
    background-image: url("../images/bg1.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.header::before {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 75%);
    background-color: rgba(0, 0, 0, .75);
}

.header .headshot {
    position: absolute;
    bottom: -3vh;
    left: 7vw;
    height: 70vh;
}

.header .content {
    position: relative;
    bottom: 0;
    z-index: 2;
    padding: 0 10vw;
    text-align: center;
    margin-top: 10vh;
}

.header .content .tagline {
    text-align: center;
    position: relative;
    margin-bottom: 7vh;
}

.header .content .tagline::before {
    display: block;
    content: '';
    width: 75%;
    height: .2vh;
    margin-left: 12.5%;
    margin-bottom: 3vh;
    background-color: #4d4d4d;
}

.header .content .tagline::after {
    content: '';
    display: block;
    position: absolute;
    left: 12.5%;
    bottom: -3vh;
    width: 75%;
    height: .2vh;
    background-color: #4d4d4d;
}

.header .content .tagline h1 {
    font-size: 5vh;
    color: #fff;
    margin: 0 0 1.5vh 0;
    font-weight: 500;
}

.header .content .tagline h2 {
    font-family: "Roboto", sans-serif;
    font-size: 3vh;
    color: #fff;
    margin: 0;
    font-weight: 400;
}

.header .content .experience {
    font-family: "Roboto", sans-serif;
    font-size: 1.6vh;
    color: #fff;
    margin: 0 0 5vh 0;
    font-weight: 400;
    text-transform: none;
}

.header .content a {
    display: inline-flex;
    position: relative;
    font-family: "Roboto", sans-serif;
    font-size: 2vh;
    text-decoration: none;
    color: #2e2e2e;
    background-color: #fff;
    padding: 1vh 1vw;
    margin-right: 2vw;
    align-items: center;
}

.header .content a::after {
    display: flex;
    position: absolute;
    right: -2.8vw;
    height: 100%;
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 2vh;
    color: #333;
    padding: 0vh 1vw;
    background-color: #fff;
    border-top-right-radius: 1vh;
    border-bottom-right-radius: 1vh;
    align-items: center;
}

.section {
    width: 60%;
    padding: 0 20%;
    text-align: center;
    margin: 8vh 0%;
}

.section .title {
    display: inline-flex;
    position: relative;
    font-size: 4vh;
    color: #000;
    font-weight: 400;
    margin: 0 0 3vh 0;
    align-items: center;
    justify-content: center;
}

.section .title::before {
    content: '';
    position: absolute;
    left: -3vw;
    background-color: #000;
    height: .2vh;
    width: 2vw;
    margin-top: 1vh;
}

.section .title::after {
    content: '';
    position: absolute;
    right: -3vw;
    background-color: #000;
    height: .2vh;
    width: 2vw;
    margin-top: 1vh;
}

.section.about p {
    font-size: 1.6vh;
    text-transform: none;
    text-align: justify;
    text-align-last: center;
    tab-size: 0;
    margin: 0 0 1.5vh 0;
}

.section.attorneys .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5vw;
}

.section.attorneys .grid .item img {
    height: 20vh;
    width: auto;
    border-radius: 50%;
}

.section.attorneys .grid .item h1 {
    font-size: 2.5vh;
    color: #000;
    margin: 1.5vh 0 0 0;
}

.section.attorneys .grid .item h2 {
    font-family: "Roboto", sans-serif;
    font-size: 1.5vh;
    color: #000;
    margin: 1vh 0 0 0;
}

.footer {
    width: 60%;
    padding: 5vh 20%;
    background-color: #2e2e2e;
    text-align: center;
}

.footer p {
    font-size: 1.6vh;
    color: #fff;
    margin: 0;
}

@media screen and (max-width: 600px), (orientation : portrait) {
    .navbar {
        width: 100%;
        padding: 0vh 0%;
    }

    .navbar .left, .navbar .right {
        display: none;
    }

    .navbar .logo {
        display: flex;
        flex: 1;
        margin: 0;
        align-items: center;
        justify-content: center;
    }

    .header .headshot {
        display: none;
    }

    .header .content a {
        padding: 1vh 3vw;
        margin-right: 9vw;
    }

    .header .content a::after {
        right: -9.5vw;
        padding: 0vh 3vw;
    }

    .section {
        width: 80%;
        padding: 0 10%;
    }

    .section.attorneys .grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 5vw;
    }

    .footer {
        width: 80%;
        padding: 5vh 10%;

    }
}