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

/*NAV BAR*/
nav {
    background-color: black; 
    height: 11vh; 
    display: flex;  
    align-items: center; 
    justify-content: space-around; 
    position: sticky;  
    top: 0px; 
    z-index: 1;
    width: 100vw;
    max-width: 100%; 
}

.burger-menu {
    display: flex; 
    flex-direction: column; 
    cursor: pointer; 
}

.burger .line {
    background-color: #f8f8ff; 
    height: 3px; 
    width: 25px; 
    margin: 3px; 
    cursor: pointer; 
}

/*--- NAV LINKS SECTION ---*/
.nav-links {
    display: flex; 
    flex-direction: column; 
    list-style: none; 
    position: absolute; 
    width: 75%;  
    background-color: black;
    opacity: 0.85; 
    height: 100vh; 
    top: 11vh; 
    left: 0; 
    align-items: center; 
    transform: translateX(-100%);  
    transition: 1s; 
}

.nav-links li {
    margin-top: 5%; 
    border-bottom: #f8f8ff solid 2px; 
    padding: 5%; 
    width: 100%;
    text-align: center; 
}


.nav-links li a {
    text-decoration: none; 
    color: #f8f8ff; 
    font-size: 18px; 
}

.link::after {
    content: ''; 
    display: block; 
    width: 0; 
    height: 2px; 
    background: #fff; 
    transition: width .3s; 
    margin-top: 3px; 
}

.link:hover::after {
    width: 100%; 
    transition: width .3s; 
}

.nav-active { 
    transform: translateX(0%); 
}

.logo {
    display: flex; 
    flex-direction: column; 
    text-decoration: none; 
    color: white; 
    font-family: 'Playfair Display', serif;
    text-align: center;
      
}

.logo h1 {
    font-size: 48px; 
    letter-spacing:2px; 
    
}

.logo h4 {
    font-weight: 400; 
    font-size: 22px;
    text-transform: uppercase; 
}
/*--- ^^^ END NAV LINKS SECTION ^^^ ---*/

/*--- HERO BANNER ---*/
.banner {
    height: 75vh; 
    background-image: url("banner2.jpg");  
    background-size: cover; 
    background-attachment: fixed; 
    background-position: center; 
}

    /* CTA BUTTON */
.cta {
    display: flex;  
    justify-content: center;  
    position: relative; 
    bottom: 2vh; 
}

#cta-btn {
    color: #f8f8ff; 
    font-weight: 100; 
    letter-spacing: 5px; 
    font-size: 22px; 
    text-align: center; 
    font-family: 'Roboto', sans-serif;
    
    padding: 2vh;
    background-color: black; 
    width: 350px; 
    border: black solid 1px;
    border-radius: 15px; 
    color: white; 
    text-decoration: none; 
}

#cta-btn:hover {
    background: #c0c0c0;   
    color: black; 
    border: #c0c0c0 solid 1px; 
    transition: .6s; 
}
    /* CALL BTN */
.phone-link {
    position: fixed; 
    bottom: 7vh; 
    right: 20px;
    font-size: 50px; 
}

.phone-link i {
    color: #1db954; 
}
/*--- ^^^ END HERO BANNER ^^^ ---*/

/*--- PAGE LAYOUT ---*/
main {
    margin: 30px 10px;   
    font-family: 'Roboto', sans-serif;
    display: flex; 
    flex-direction: column; 
}

/*--- ^^^ END PAGE LAYOUT ^^^ ---*/

/*--- DESCRIPTION SECTION ---*/
p {
    line-height: 2; 
    font-size: 16px;
    opacity: 0.7; 
}
/*--- ^^^ END DESCRIPTION SECTION ^^^ ---*/


/*--- WHAT WE DO SECTION ---*/
    /* WHAT WE DO/ WHO WE ARE - LAYOUT*/
.services, 
.who-we-are {
    display: flex; 
    flex-direction: column; 
    margin-top: 60px;
}

.services h1 {
    background-color: black; 
    color: #f8f8ff; 
    height: 7vh; 
    font-size: 30px; 
    padding: 10px;  
    position: absolute; 
    opacity: 0.9; 
    letter-spacing: 3px; 
    font-weight: 100; 
    display: flex; 
    align-items: center; 
}

.hair-photo {
    background-image: url("service-photo.jpg"); 
}
    /* WHAT WE DO/WHO WE ARE - PHOTOS*/
.hair-photo, 
.team-photo {
    height: 30vh; 
    background-repeat: no-repeat; 
    background-position: center; 
    margin-top: 40px; 
    background-size: cover; 
}
    
    /* READ MORE BTNS */
.services h3 a { 
    background-color: #343434;
    width: 150px; 
    height: 50px; 
    text-align: center; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #fff; 
    border-radius: 10px; 
    cursor: pointer; 
    text-decoration: none; 
}

.services h3 a:hover {
    background-color: black; 
}

    /* WHAT WE DO - LAYOUT */
.service-1, 
.service-2 {
    width: auto; 
    margin: 30px 0 10px 0; 
}

    /* HAIR & BEAUTY UNDERLINES*/
.service-1 h2::after {
    content: "";
    display: block;
    width: 45px; 
    height: 5px; 
    background-color: #c0c0c0; 
    position: relative;
    left: 12px; 
}

.service-2 h2::after {
    content: "";
    display: block;
    width: 80px; 
    height: 5px; 
    background-color: #c0c0c0; 
    position: relative;
    left: 16px; 
}

.service-1 ul, .service-2 ul {
    list-style: inside; 
    color: gray; 
    font-size: 18px; 
    line-height: 2.5; 
    opacity: 0.7; 
    margin-bottom: 10px; 
    margin-left: 10px; 
}

/*--- ^^^ END WHAT WE DO SECTION ^^^ ---*/


/*--- WHO WE ARE SECTION ---*/
.team-photo {
    background-image: url("alexandra-lammerink-IlPwZyz-Pl0-unsplash.jpg"); 
}

.who-we-are p {
    margin: 30px 0px; 
}
/*--- ^^^ END WHO WE ARE SECTION ^^^ ---*/


/*--- FOOTER SECTION ---*/
footer {
    background-color: black; 
    font-family: 'Roboto', sans-serif;
}

.footer-section {
    color: white; 
    padding: 5% 10% 10% 10%;
    letter-spacing: 3px; 
    display: flex; 
    flex-direction: column; 
}

.footer-section .section {
    margin-top: 20px; 
}

.contact h4 {
    font-size: 22px; 
}

.contact p {
    font-size: 16px; 
}

.address {
    font-size: 18px; 
    padding-top: 10px;  
}

.open {
    margin-bottom: 10px;  
}

.hours {
    padding-top: 10px; 
}

.hours h4 {
    font-size: 18px;  
}

.hours p {
    font-size: 16px; 
}
/*--- ^^^ END FOOTER SECTION ^^^ ---*/


/*--- COPYRIGHT SECTION ---*/
.copyright {
    font-family: 'Roboto', sans-serif;
    text-align: center; 
    margin: 50px 100px; 
}


/*--- PRICE LIST PAGE ---*/
    /* PRICE BANNER */

.price-section {
    height: 30vh; 
}

.price-photo {
    position: relative;
    height:100%; 
}

.price-photo::before {
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-image: url("price.jpg"); 
    background-position: center; 
    background-size: cover; 
    z-index: -1; 
    filter: grayscale(60%); 
}

.price-section h1 {
    font-family: 'Roboto', sans-serif; 
    display: flex;
    height: 100%; 
    justify-content: flex-start; 
    align-items: flex-end; 
    text-transform: uppercase; 
    font-size: 50px; 
    margin: 0px 30px; 
}

.price-section h1::after {
    content: ""; 
    background-color: gray; 
    height: 5px; 
    width: 3.2em;  
    display: block; 
    position: relative; 
    right: 5.5em;
    bottom: 1.25em; 
}
    /* PRICE TABLE */
#resp-table {
    width: 100%; 
    display: table;  
}

#resp-table-header {
    display: table-header-group; 
    background-color: gray; 
    font-weight: bold; 
    font-size: 25px; 
}

.table-header-cell {
    display: table-cell; 
    padding: 10px; 
    text-align: justify; 
    border-bottom: 1px solid black; 
}

#resp-table-body {
    display: table-row-group; 
}

.resp-table-row {
    display: table-row; 
}

.table-body-cell {
    display: table-cell; 
    
}


/*--- DESKTOP VERSION ---*/
@media only screen and (min-width: 1000px) {
    
    nav {
        flex-direction: row-reverse; 
        width: 100vw; 
    }
    
    .burger {
        display: none; 
    }
    
    .logo {
        width: 30%
    }
    
    .nav-links {
        display: flex; 
        flex-direction: row; 
        justify-content: space-between; 
        position: static; 
        width: 70%;  
        background-color: transparent;
        opacity: 1; 
        height: auto;   
        transform: translateX(0);  
    }

    .nav-links li {
        margin-top: 5%; 
        border-bottom: none;  
        padding: 5%; 
        width: auto;
        text-align: center; 
    }

    .hair-photo, 
    .team-photo {
        height: 60vh; 
        background-repeat: no-repeat; 
        background-position: center; 
        margin-top: 40px; 
        background-size: cover; 
    }
    
    .hair-and-beauty {
        display: flex;  
    }
    
    .service-1, .service-2 {
        margin: 0px auto; 
    }
    
    .list  {
        display: flex; 
        flex-direction: column; 
        height: 100%; 
        justify-content: space-between; 
    }
    
    .footer-section {
        flex-direction: row; 
        justify-content: space-between; 
        flex-wrap: wrap; 
    }
    
    .contact {
        width: 50%; 
    }
    
    .address {
        width: 50%; 
        text-align: center; 
    }

    
}