/*DESKTOP*/


/*SMALL DESKTOP*/
@media (max-width: 1000px) {

    .footerContent {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .phoneContainer {
        padding-bottom: 4rem;
    }

    .entry {
        background-image: url(/img/headerwavemob.svg);
    }

    :root {
        --spaceEdge: 1.5rem; 
    }   

    input[type="text"] {
        width: 60%;
    }

    textarea {
        width: 80%;
    }
}

/*TABLET*/

@media (max-width: 767px) {

 /*-----REUSABLE-----*/

    .mobShow {
        display: block;
    }
    .desktopShow {
        display: none;
    }

    .flexWrap {
        flex-direction: column;
    }

    .reverse {
        flex-direction: column;
    }

    nav li:first-child {
        padding-left: 0;
    }

    
    footer {
        gap: 1.5rem;
        align-items: flex-start;
    }

    footer .textFlex {
        text-align: left;
        align-items: flex-start;
    }

    #hamburger {
        display: block;
    }

    nav ul {
        position: absolute;
        top: 75px;
        right: -200px;
        background: var(--background);
        padding: var(--spaceEdge);
        text-align: right;
        margin: 0;
        box-shadow: -4px 7px 10px rgb(0 0 0 / 25%);
        color: var(--linkonlight) !important;
        transition: all 750ms;
        flex-direction: column;
        gap: 1rem;
        z-index: 4;
        border-radius: 8px 0 0 8px;
        visibility: hidden;
        display: none;
    }

    .menuShow {
        right: -1px;
        visibility: visible;
    }

    .display {
        display: block;
    }

    nav a, nav a:visited {
        color: var(--linkonlight) !important;
    }

    nav li:last-child {
        padding-right: 0.75rem;
    }

    .bar1, .bar2, .bar3 {
        display: inline-block;
    }
    
    input[type="text"] {
        width: 100%;
    }

    textarea {
        width: 100%;
    }

    /*--- UNIQUES---*/

    #herotext {
        padding: 4rem 32px 2rem;
        background-image: none;
        background-color: var(--heroheadings);
    }

    #profileimg {
        position: static;
        width: 90%;
        margin-left: 10%;
        height: 360px;
        background-size: contain;
        margin-top: 30px;
    }

    #mobherowave {
        position: absolute;
        width: 100%;
        height: 20%;
    }

    .caseStudy {
        align-items: flex-start;
    }

    .phoneContainer {
        margin-top: 0rem;
    }

    .phone {
        position: relative;
        margin-top: -6rem;
    }

    .xp {
        padding-left: 1rem;
    }
   
}