*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/********************** Utility Components **********************************/

:root {
    
    font-size: 62.5;
    /* Custom Properties */

    /* Main Color */
    --primary-color: #1b3c53;
    --secondary-color: #456882;
    --secondary-color-o: rgba(69, 104, 130, .75);
    --tertiary-color: #d2c1b6;
   --onPrimary-color: #f9f3ef; 

    --accent-color: #456882;  /* (icons) Austin changed for white backgroud
                                    in contact section. */
}



body {
    font-family:'Courier New', Courier, monospace;
    line-height: 1.8;
    display: flex;
    position: relative;
}

/* List Items */
li {
    list-style: none;
}

a:link,
a:visited {
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
    font-family: 'Public Sans', sans-serif;
    text-shadow: 2px 2px 0px black; 
}

/* ****************** Main Styling **********************************/

/* All content container => main element */
main{
    flex: 1;
}

header#header{
    background-color: var(--secondary-color);
    height: calc(2vw + 2vh);
    z-index: 2;
}

nav#header__main-nav{
    height: 100%;
}

ul.header__main-nav--links{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: var(--onPrimary-color);
}

ul.header__main-nav--links li {
    padding-right: 3vw;
}

ul.header__main-nav--links li a {
    position: relative;
    padding: 0.1rem 0.1rem;
    /* font-size: calc(0.75rem + 0.66667vw); */
    font-size: 2.5vmin;

}

ul.header__main-nav--links li a:link::before,
ul.header__main-nav--links li a:visited::before, 
ul.header__main-nav--links li a:link::after,
ul.header__main-nav--links li a:visited::after{
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.25rem;
    background-color: var(--tertiary-color);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(1,0,0,1);
    border-radius: 5px;
}

ul.header__main-nav--links li a:link::before,
ul.header__main-nav--links li a:visited::before {
    top: 0;
    transform-origin: left;

}

ul.header__main-nav--links li a:link::after,
ul.header__main-nav--links li a:visited::after{
    bottom: 0;
    transform-origin: right;
}

ul.header__main-nav--links li a:hover::before,
ul.header__main-nav--links li a:active::before, 
ul.header__main-nav--links li a:hover::after,
ul.header__main-nav--links li a:active::after {
    transform: scaleX(1);
}

/*-- *_*_*_*_*_*_*_*_  Hero Section  *_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*__*_*_*/

section#showcase {
    height: 100vh;
    /* background-image: url('../images/courthouse.jpg'); */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* #courthouse {
    height: 100vh;
    width: 100vw;
} */

div.showcase__content{
    background-color: var(--secondary-color-o);
    padding: calc(1rem + 2vw);
    height: calc(5rem + 7vmax);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.showcase__content--title {
    /* font-size: calc(1rem + 1vw); */
    font-size: 4vmin;
    color: white;
    font-family: 'Public Sans', sans-serif;
    text-shadow: 2px 1px 0px black;
}

.showcase__content--name {
    /* font-size: calc(0.6rem + 0.8vw); */
    font-size: 3.5vmin;
    color: #fff;
    font-weight: bold;
    font-family: 'Public Sans', sans-serif;
    text-shadow: 2px 2px 0px black;
}

.showcase__content--assessor {
    font-size: calc(0.6rem + 0.8vw);
    color: var(--onPrimary-color);
}

.breakline{
    display: flex;
    align-self: start;
    height: 2px;
    width: 50%;
    text-align: left;
    border-width: 2px;
}


/*-- *_*_*_*_*_*_*_*_  About Section Main  *_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*__*_*_*/
section#about {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--secondary-color);
}


.about__content {
    max-width: 60rem;
    /* flex-basis: 40rem; */
    padding: 2rem;
    /* flex-grow: 1; */


    display: flex;
    flex-direction: column;
    align-items: center;   /* centers title + paragraph */
    text-align: center;    /* centers text */


}

/* .about__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

.about__content--title {
    font-size: 4vmin;
    padding: 0.5rem;
    color: var(--onPrimary-color);
    text-transform: uppercase;
    font-weight: bolder;
    position: relative;


    color: white;
    font-family: 'Public Sans', sans-serif;
    text-shadow: 2px 2px 0px black; 
    

}

.about__content--title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 0.3rem;
    width: 30%;
    background-color: var(--primary-color);
}

.about__content--title,
.about__content--para{
    margin-bottom: 1rem;
    letter-spacing: 0.1rem;
}

.about__content--para {
    font-size: 1.6rem;
    color: white;
    font-family: 'Public Sans', sans-serif;
    text-shadow: 2px 1px 0px black;

}

/*-- *_*_*_*_*_*_*_*_  Info Section Main  *_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*__*_*_*/
/* section#info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 6rem 2rem 2rem;
    background-color: var(--onPrimary-color);
    
} */

/* .info {
    padding: 4rem;
    margin: 0 2rem 4rem;
    flex-basis: 40rem;
    flex-grow: 1; 
    background-color: var(--primary-color);
    border-bottom: 0.2rem solid var(--primary-color);
    border-right: 0.2rem solid var(--primary-color);
    border-left: 0.2rem solid var(--primary-color);
    cursor: pointer;
    position: relative;
    z-index: 1;
} */

/* .info::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--secondary-color);
    transform: scaleX(0);
    transition: transform 0.45s cubic-bezier(1,0,0,1);
    z-index: -1;
} */

/* .info:hover::after,
.info:active::after {
    transform: scaleX(1);
    
} */

/* .info i,
.info .info--title {
    margin-bottom: 2rem;
} */

/* .info i {
    font-size: 3rem;
    color: var(--accent-color);
} */

/* .info--title {
    font-size: 3rem;
    text-transform: uppercase;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: var(--onPrimary-color);
} */

/* .info--para {
    color: var(--onPrimary-color);
    
} */

/*-- *_*_*_*_*_*_*_*_  Contact Section Main  *_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*__*_*_*/

section#contact {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 2rem;
    background-color: white;
}

.outer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.outer-photo--title  {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-basis: 40rem;
    padding: 2rem;
    flex-grow: 1;
}

.photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#Facebook a{
    font-size: 2vmin;
    color: var(--primary-color);
    text-shadow: none;
}

.list {
    /* Contact info List */
    font-size: 2vmin;
    padding: 0.5rem;
    color: var(--onPrimary-color);
    
    font-weight: bolder;
    position: relative;
    color: #000;
    font-family: 'Public Sans', sans-serif;
    
}

.fa-ul i {
    font-size: 2vmin;
    color: var(--accent-color);
}

.photo--title {
    font-size: 2vmin;
    color: var(--primary-color) !important;
    font-weight: bold;
    text-decoration: none !important;
    text-align: center;

    
}


.outer-photo--title  img { 
    max-width: 250px;
    height: auto;
    border-radius: 20%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

#contact a[href^="tel"] {
    font-size: 2vmin;
    text-shadow: none;
    
    color: #000000 !important; /* Forces black */
    text-decoration: none !important;
}




/*-- *_*_*_*_*_*_*_*_  Max Width 1000px  *_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*__*_*_*/

@supports (-webkit-touch-callout: none) {
  .problem-text {
    font-variant-numeric: normal;
  }
}


@media screen and (max-width: 1000px) {
    /*-- *_*_*_*_*_*_*_*_ Main Styling Media 1000 *_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*__*_*_*/
    header#header{
        position: absolute;
    }

    nav#header__main-nav {
        width: 30rem;
        height: 100%;
        position: fixed;
        top: 0;
        right: -30rem;
        background-color: var(--secondary-color);
        text-align: center;
    }

    .clicked {
        left: 55%;
    }

    .header__main-nav--hamburger {
        width: 5rem;
        height: 5rem;
        position: fixed;
        top: 2rem;
        right: 3rem;
        cursor: pointer;
        background-color: var(--secondary-color);
        padding: 1rem;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .line {
        width: 100%;
        height: 0.3rem;
        background-color: var(--onPrimary-color);
        border-radius: 0.2rem;
        transition: all 0.4s ease-in-out;
    }

    ul.header__main-nav--links{
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    ul.header__main-nav--links li {
        margin-bottom: 4vh;
        margin-left: 6vw;
    }

    ul.header__main-nav--links li a {
        font-size: 3vmin;
    }

    .clicked .line-1{
        transform: rotateZ(-45deg) translate(-0.8rem, 0.6rem);
        
    }

    .clicked .line-2{
        opacity: 0;
    }

    .clicked .line-3{
        transform: rotateZ(45deg) translate(-0.8rem, -0.6rem);
    }

    ul.header__main-nav--links li {
        opacity: 0;

    }

    ul.header__main-nav--links li:nth-child(1) {
        transition: all 0.5s ease-in-out 0.2s;
    }

    ul.header__main-nav--links li:nth-child(2) {
        transition: all 0.5s ease-in-out 0.4s;
    }

    ul.header__main-nav--links li:nth-child(3) {
        transition: all 0.5s ease-in-out 0.6s;
    }

    ul.header__main-nav--links li:nth-child(4) {
        transition: all 0.5s ease-in-out 0.8s;
    }

    ul.header__main-nav--links li:nth-child(5) {
        transition: all 0.5s ease-in-out 1.0s;
    }

    ul.header__main-nav--links li:nth-child(6) {
        transition: all 0.5s ease-in-out 1.2s;
    }

    ul.header__main-nav--links li.fade{
        opacity: 1;
    }
    /*-- *_*_*_*_*_*_*_*_  Hero Section Media 1000 *_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*__*_*_*/
    
    section#showcase {
        background-position: 100%;
        align-items: flex-end;
    }

    div.showcase__content{
        background-color: var(--secondary-color-o);
        padding: calc(1rem + 1vw);
        height: calc(5rem + 7vmax);
        width: 55vw;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .showcase__content--title {
        font-size: calc(4.5vmin);
        color: white;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

    .showcase__content--name {
        font-size: calc(4vmin);
        
    }

    .showcase__content--assessor {
        font-size: calc(3.5vmin);
        color: var(--onPrimary-color);
    }

    /*-- *_*_*_*_*_*_*_*_  About Section Media 1000 *_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*__*_*_*/
    .about__content--title {
        font-size: 7vmin;
    
    }
    
    .about__content--para {
        font-size: 4vmin;
        color: white;
    }

    /*-- *_*_*_*_*_*_*_*_  Section Info Media 1000 *_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*__*_*_*/

    section#info{
        padding: 6rem 3rem 2rem;
    }

    .info {
        padding: calc(1rem + 2vw);
        margin: 0 0 calc(1rem + 2vw);
    }

    .info--title {
        font-size: calc(1.2rem + 2vw);
    }

    .info--para {
        font-size: calc(0.8rem + 1.5vw);
    }



}

@media screen and (max-width: 750px) {
/*-- *_*_*_*_*_*_*_*_  About Section  *_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*__*_*_*/
    .about__content--title {
        font-size: 6vmin;
        
    }

    .about__content--para {
        font-size: 5vmin;
        color: white;
    }
}


@media screen and (max-width: 500px) {
    section#contact {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-shrink: 1;
        /* padding: 1rem; */
    }

    .outer {
        display: flex;
        flex-shrink: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* background-color: bisque; */
    }

    .outer-photo--title  {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        flex-basis: auto;
        padding: 1rem;
        
        /* background-color: aqua; */
    }

    .photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .list { /* Contact list phone media */
        
        font-size: 4vmin;
        padding: 0.5rem;
       /* color: var(--onPrimary-color);  Original Code */

        font-weight: bolder;
        position: relative;
        color: black;
        font-family: 'Public Sans', sans-serif;
        
        
        position: relative;
        /* background-color: aquamarine; */
    }

    #Facebook a{
        font-size: 4vmin;
        
    }

    #contact a[href^="tel"] {
        font-size: 4vmin;
        text-shadow: none;
        
        color: #000000 !important; /* Forces black */
        text-decoration: none !important;
    }

    .fa-ul i {
        font-size: 4vmin;
       color: var(--accent-color);
    }

    .photo--title {
        font-size: 5vmin;
        color: white;
    }
    
}