/*
Kevin Jacobsen
Web150, ASN 6
Business Name: Salon Saloon
*/

* {
    box-sizing: border-box;
}

body {
    /* responsive font size setting from class: max font size is 19px */
    font-size: calc(16px + (19 - 16) * ((100vw - 400px) / (800 - 400)));

    /* default font color for text */
    color: #fff8ea;

    background-color: #fcf3e2;

    /* changed the font I chose, I felt like this one was more easily readable */
    font-family: 'BioRhyme', serif;

    /* for positioning footer at bottom, but still able to see the background image of the section before it */
    position: relative;
    min-height: 100vh;
    margin: 0;
    padding-bottom: 100px;
}

/* ------------------------------ NAV BAR PROPERTIES ------------------------------ */

/* flex container holding a small logo linking to the home page called "nav_logo"
and  links to "services" "drinks" "products" and "contact"*/
nav {
    /* nav bar layout settings */
    font-family: 'Hammersmith One', sans-serif;
    text-align: center;
    background-color: #fcbaa7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 8px 20px;
}

/* properties of container holding the small hat logo */
nav .nav_logo {
    background-color: #fcf3e2;
    height: 55px;
    width: 55px;
    min-width: 55px;
    padding: 8px;
    border-radius: 50%;
}

/* set small logo image to fit into container in nav bar */
nav .nav_logo img {
    object-fit: contain;
    height: 100%;
    width: 100%;
}

nav .cta {
    background-color: #93c0b2;
    display: flex;
    align-items: center;
    height: 55px;
    padding: 8px;
    border-radius: 10px;
}

/* hyperlink properties for nav bar*/

nav a:link,
nav a:visited {
    color: #fff8ea;
    text-decoration: none;
}

nav a:hover {
    color: #e09485;
    border-bottom: 3px solid #e09485;

    transform: scale(1.1);
    transition: .2s;
}

nav a:active {
    color: #4b6468;
    border-bottom: solid #4b6468;
}

nav a.current_page {
    color: #e09485;
    border-bottom: 3px solid #e09485;
    transform: scale(1.05);

}

nav .cta.current_page {
    box-shadow: 0 0 10px 10px #e09485;

}

nav .cta.current_page a {
    color: #fcf3e2;
    border: none;
}

.nav_logo a:hover,
.nav_logo a.current_page {
    border-bottom: 0;

}

.nav_logo:hover,
div.nav_logo.current_page {
    background-color: #fff8ea;
    box-shadow: 0 0 10px 10px #e09485;
    transform: scale(1.05);

}


/* ------------------------------ HOME PAGE MAIN PROPERTIES ------------------------------ */

/* hero section that is a flex item holding two flex items: "logo_area" and "cta_area" */
.hero_section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    background-image: url(../images/bg_home.png);
    background-size: cover;
    background-position: center 55%;
}

/* set size for each of the two flexbox items*/
.hero_section .logo_area,
.hero_section .arch_area {
    height: 500px;
    width: 50%;
    min-width: 300px;
    padding: 10px;
}

/* properties for logo image */
.logo {
    display: block;
    max-height: 400px;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
}

.arch_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 70%;
    max-width: 425px;
    left: 0;
    right: 0;
    margin: auto;
}

.arch_container * {
    width: 100%;
    margin: 0;
}

/* settings for top of arch with image of people in background and text in front  */
.arch_img {
    height: 65%;
    background-image: url(../images/western_ppl.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 0;
    border: thick solid #fcf3e2;
    border-radius: 50% 50% 0 0;
}

/* properties for text in front of people image */
.arch_container h1 {
    font-size: .95em;
    text-align: center;
    background-color: #fcf3e261;
    padding: 4px;
}

/* this is a flexbox container holding the "snip it" and "sip it" div buttons */
.btn_container {
    font-family: 'Hammersmith One', sans-serif;
    background-color: #fcf3e261;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 8px 8px 8px;
    border-radius: 0 0 10px 10px;
}

/* style properties for "snip it" and "sip it" buttons */
.btn_container .btn {
    font-size: 1.2em;
    background-color: #fcf3e2c7;
    width: 45%;
    text-align: center;
    border: thick solid #e09485;
    border-radius: 10px;
    padding: 8px;
}

.book_it.btn_container {
    background-color: transparent;
    padding: 8px 0;

}

.book_it .btn {
    width: 100%;
    border: none;
    margin-top: 8px;
    box-shadow: 0 0 8px 8px #e094859b;

}

/* hyperlink settings for cta buttons */
.btn:link,
.btn:visited {
    color: #e09485;
    text-decoration: none;
}

.btn:hover {
    background-color: #fff8ea;
    transform: scale(1.05);
}

.btn:active {
    color: #fcf3e2;
    background-color: #e09485;
}

/* ---------- end of hero section ---------- */

h2 {
    color: #e09485;
    font-family: 'Hammersmith One', sans-serif;
    text-align: center;
    font-size: 1.8em;
    margin: 16px 35px 0 35px;
    ;
}

/* heading that floats in center a little bit above the paragraph content */
.about_us_sections h3 {
    font-family: 'Hammersmith One', sans-serif;
    background-color: #fcbaa7;
    position: relative;
    top: 16px;
    left: 5px;
    right: 0;
    margin: auto;
    width: fit-content;
    padding: 10px 10px;
    text-align: center;
    border-radius: 10px;
    box-shadow: -8px 6px #e09485;
}

.about_salon,
.about_saloon {
    margin: 0 35px;
    border-radius: 10px;
}

.about_us_text_container {
    background-color: #93c0b2;
    height: fit-content;
    padding: 10px 15%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-align: center;
}

/* flexbox container of image that holds 4 circles */
.about_us_image_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    height: 400px;
    background-size: cover;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* background image of salon for "about_salon" flexbox container */
.about_salon .about_us_image_container {
    background-image: url(../images/salon_img.png);
    background-position: center 60%;
}

/* background image of bar for "about_saloon" flexbox container */
.about_saloon .about_us_image_container {
    background-image: url(../images/saloon_img.png);
    background-position: center 70%;
}

/* these are the circle flexbox items */
.about_us_image_container p {
    color: #fff;
    font-family: 'Hammersmith One', sans-serif;
    background-color: #93c0b2c6;
    height: 8.2em;
    width: 8.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 6px solid #a5d2c3;
    border-radius: 50%;
    text-align: center;
    text-shadow: -1.5px 1.5px #4b6468;
}

/* change the circles to a pink color for the saloon section*/
.about_saloon .about_us_image_container p {
    background-color: #fcb9a7b9;
    text-shadow: -1.5px 1.5px #b77a6d;
    border: 6px solid #fcbaa7;
}

/* --------------------  HOME PAGE STYLISTS AND MERCH SECTION -------------------- */

/* flexbox container that holds the stylists and merch section with a desert background */
.stylists_and_merch {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    width: 100%;
    padding: 70px 35px 0 35px;
    gap: 35px;
    margin-bottom: 60px;
}

/* flex items with images set as background */
.stylist_image,
.merch_image {
    background-image: url("../images/stylists.jpg");
    height: 400px;
    width: 50%;
    background-size: cover;
    background-position: top;
    border-radius: 20px;
    position: relative;
}

/* to change the image of the merch section */
.merch_image {
    background-image: url("../images/tshirts.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

/* settings for the text box that is under the image */
.stylists_and_merch p {
    font-family: 'Hammersmith One', sans-serif;
    background-color: #93c0b2;
    position: absolute;
    bottom: -16px;
    left: 0;
    right: 0;
    margin: auto;
    width: 60%;
    padding: 10px 10px;
    border-radius: 10px;
    box-shadow: -8px 6px #4b6468;
    text-align: center;
}

/* settings for hyperlinks */
.stylists_and_merch a:link,
.stylists_and_merch a:visited {
    color: #fff;
}

.stylist_image:hover p,
.merch_image:hover p {
    color: #fff;
    background-color: #a5d2c3;
    transform: scale(1.05);
    transition: .3s;

}

/* settings to make the text look like the button is being pressed down */
.stylist_image:active p,
.merch_image:active p {
    background-color: #93c0b2;
    box-shadow: -6px 4px #4b6468;
    bottom: -20px;
}

/* ------------------------------ DRINK MENU PAGE PROPERTIES ------------------------------ */
.drinks header {
    display: flex;
    height: 500px;
    width: 100%;
    background: url(../images/drink_menu/header_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.drinks header div {
    width: 45%;
    height: 100%;
}


.drinks header div img {
    object-fit: scale-down;
    height: 100%;
    width: 100%;
}

.drinks header div:last-child {
    display: flex;
    flex-direction: column;
    width: 55%;
}

.drinks header h1 {
    font-family: 'Pacifico', cursive;
    font-size: 2.5em;
    font-weight: 100;
    height: 15%;
    margin: 6px;
    text-align: center;
    text-shadow: 3px 3px #b77a6d;
    z-index: 2;
}

.drinks div:last-child img {
    height: 83%;
}

section.drink_container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.drinks h2 {
    font-family: 'Pacifico', cursive;
    color: #fcbaa7;
    font-weight: 100;
}

.drinks .spacer {
    margin-bottom: 35px;
}
.drinks .spacer .line,
.drinks .spacer .square {
    background-color: #fcbaa7;
    height: 5px;
}

.drinks .spacer .square {
    height: 15px;
    width: 15px;
}

/* flex item holding the drink image, drink text, and header */
.drink_item {
    width: 45%;
    max-width: 800px;
    height: 150px;
    margin-bottom: 60px;
    display: flex;
    justify-content: flex-end;
    position: relative;
}

/* drink name */
.drink_item h3 {
    font-family: 'Hammersmith One', sans-serif;
    background-color: #fcbaa7;
    font-size: 1.3em;
    width: 55%;
    min-width: 150px;
    position: absolute;
    top: -25%;
    left: 0;
    right: 0;
    margin: auto;
    padding: 8px 0;
    text-align: center;
    border-radius: 10px;
    box-shadow: -6px 5px #e09485;
}

/* drink price */
.drink_item div.price {
    color: #4b6468;
    font-size: 1.4em;
    position: absolute;
    bottom: -25px;
    right: 20px;
    padding: 5px 5%;
    background-color: #ffe8c8;
    border-radius: 10px;
    box-shadow: -4px 4px #e09485;
}

.drink_item_image_container {
    align-self: center;
    z-index: 2;
}

.drink_item_image_container img {
    height: 150px;
    width: 150px;
    object-fit: cover;
    border: thick solid #e09485;
    border-radius: 50%;
}

.drink_item_text_container {
    position: relative;
    align-self: center;
    display: flex;
    z-index: 1;
    background-color: #93c0b2;
    font-size: .55em;
    height: 120px;
    width: 90%;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* blue background behind the text container and the drink image */
.drink_bg {
    background-color: #93c0b2;
    position: absolute;
    z-index: -2;
    top: 0;
    left: -45px;
    height: 100%;
    width: 100%;
}

.drink_item_text_container p {
    align-self: center;
    padding: 0 1em;
}


/* ------------------------------ CONTACT PROPERTIES ------------------------------ */

.contact h1 {
    font-family: 'Pacifico', cursive;
    color: #e09485;
    font-size: 2.2em;
    font-weight: 100;
    text-align: center;
    margin: 0;
}

.contact .phone {
    display: flex;
    width: 60%;
    justify-content: space-between;
}

.contact .outer_container {
    background-color: #fcbaa7;
    margin: 0 35px;
    padding-bottom: 20px;
    border-radius: 30px;
}

/* top part of form: contact info / hours section */
form .info {
    display: flex;
    width: 100%;
    font-size: .85em;
}

form .info * {
    margin: 0;
}

form .info h3 {
    font-family: 'Hammersmith One', sans-serif;
    font-size: 2.4em;
    align-self: center;
    text-align: center;
    padding-bottom: 10px;
}

form .info h4 {
    font-size: 1.4em;
}

div.contact_info_container,
div.hours_container {
    padding: 10px;
}

div.contact_info_container {
    width: 60%;
    color: #fcbaa7;
}

div.contact_info_container .inner_container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #fcf3e2;
    padding: 10px;
    border-radius: 20px;
}

div.contact_info_container .inner_container * {
    width: 100%;
}

div.contact_info_container .inner_container div {
    display: flex;
    width: 70%;
}

div.contact_info_container .inner_container div label {
    font-family: 'Hammersmith One', sans-serif;
    width: 100px;
    align-self: center;
    text-align: center;
    color: #e09485;
}

div.contact_info_container input.text {
    font-family: 'Hammersmith One', sans-serif;
    color: #b77a6d;
    font-size: 1.2em;
    background-color: #ffffe7;
    border: 0;
    border-radius: 10px;
    padding: 4px 8px;
    margin: 10px;
    outline: none;
    text-align: center;
}

input.text:focus {
    outline: 3px solid #fcbaa7;
    background-color: #fffff4;
}

.contact_info_container p {
    text-align: center;
    font-size: 1.2em;
    padding: 10px;
}

.inner_container div.radio {
    display: flex;
    justify-content: space-evenly;
}

.subscribe_option div.button_option {
    display: flex;
    justify-content: center;
}

.subscribe_option label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 110px;
}

.subscribe_option label:hover,
.subscribe_option input:checked+label {
    transform: scale(1.1);

}

/* radio button style I liked that I found online */
/* I changed the code a little bit to make it more styled to my site */
/* https://www.sliderrevolution.com/resources/styling-radio-buttons/ */
.subscribe_option input {
    display: none;
}

.subscribe_option label:before {
    content: '';
    display: inline-block;
    height: 30px;
    width: 30px;
    background: #a5d2c3;
    border-radius: 50%;
    z-index: 2;
    transition: box-shadow .4s ease,
        background .3s ease;
}

.subscribe_option input:checked+label:before {
    box-shadow: inset 0px 3px 0 2px #4b6468;
    background: #93c0b2;
}

/* end radio button styling */



/* properties for hours section */
div.hours_container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: stretch;
    width: 40%;
    text-align: center;
    margin-top: 10px;
}

.hours_container h2 {
    font-family: 'Hammersmith One', sans-serif;
    font-size: 2.2em;
    align-self: center;
}

.hours_container .phone {
    width: 100%;
}

.phone h2 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 1.65em;
}

.phone svg {
    color: #fcf3e2;
}


div.hours_container ul {
    padding: 0;
}

div.hours_container li {
    list-style-type: none;
    padding: 4px;
}


/* properties for line spacer in hours section */
.spacer {
    height: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spacer .line {
    height: 1px;
    width: 90%;
    background-color: #fff;
    position: relative;
}

.spacer .square {
    height: 9px;
    width: 9px;
    background-color: #fff;
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    margin: auto;
    transform: rotate(45deg);
}

/* end  contact info / hours section */


/* zig zag divider */
.divider {
    height: 40px;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.divider div {
    margin: 0 10px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.divider span {
    display: inline-block;
    flex: 0 0 40px;
    height: 40px;
    width: 40px;
    transform: rotate(45deg);
    box-shadow: -6px -6px #b77a6d inset;
    margin: -8px 4px 0 4px;
}


/* properties for both salon / event booking sections */
div.booking_options {
    background-color: #fcbaa7;
    display: flex;
    padding: 10px;
}

div.booking_options .option_outer_container {
    width: 60%;
}


/* large checkbox sections for booking options */
.option_top_container {
    width: 100%;
}

.checkbox_container {
    width: 100%;
    padding-left: 8px;
}

.checkbox_container label {
    font-size: 1.2em;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 20px;
    padding: 8px 0;
    border-radius: 20px;
    box-shadow: -8px 6px #4b6468;
    background-color: #93c0b2;
    cursor: pointer;
}

.checkbox_container span {
    width: 70%;
}

.checkbox_container input {
    accent-color: #b77a6d;
    transform: scale(3);
}

/* pop up menu for stylist / event choices */
.option_choice_container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    position: relative;
    margin-top: 20px;
    background-color: #fcf3e2;
    border-radius: 40px;
}

.option_choice_container .blocker {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #fcf3e2af;
    z-index: 1;
    border-radius: 40px;
}

.choose_text {
    font-family: 'Hammersmith One', sans-serif;
    color: #b77a6d;
    font-size: 1.3em;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
}

.option_selection_container {
    background-color: #a5d2c377;
    position: relative;
    width: 60%;
    max-width: 60%;
    height: 80px;
    overflow: hidden;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #4b6468;
}

.option_selection_container:hover {
    overflow: visible;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 80px;
    z-index: 11;
}

.options_menu {
    position: absolute;
    width: 100%;
    bottom: 80px;
    font-size: .9em;
    background-color: #def9f095;
    border-radius: 30px;
    display: block;
}

.options_menu input {
    display: none;
}

.options_menu input+div {
    display: inline-block;
}

.options_menu input:checked+span {
    position: absolute;
    bottom: -80px;
    width: 100%;
    height: 80px;
    background-color: #a5d2c3;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 0 4px 4px #d3fcee inset;
}

.options_menu label {
    box-sizing: border-box;
    display: block;
    background: #a5d2c3;
    width: 100%;
    border-radius: 40px;
    margin: 15px 0;
    text-align: right;
    cursor: pointer;
}

.options_menu label .option {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 8px;
    gap: 8px;
}

.options_menu label:hover {
    box-shadow: 0 0 4px 4px #d3fcee inset;
    transform: scale(1.05);
}

.option span:first-child {
    display: inline-block;
    height: 70px;
    width: 70px;
    margin-left: 5px;
}

.option img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

.option img:last-of-type {
    background-color: #fcbaa7;
}

.option span {
    margin-right: 10px;
}

/* multiple checkbox container for salon services / guest numbers */
.multi_check_outer_container {
    background-color: #fcf3e2;
    width: 40%;
    margin-left: 10px;
    border-radius: 20px;
    max-height: 200px;
    color: #e09485;
}

.salon .multi_check_outer_container {
    overflow-y: scroll;
}

.multi_check_outer_container h4 {
    margin: 10px 0 20px 0;
    font-size: 1.1em;
    text-align: center;
}

.multi_check_container {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    position: relative;
}

.multi_check_container .blocker {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #fcf3e2af;
    z-index: 1;
}

.multi_check_container div {
    display: flex;
    align-items: center;
    height: 50px;
    width: 50%;
    padding-left: 20px;
}

.multi_check_container label {
    font-size: .95em;
    display: block;
    padding-left: 4px;
    cursor: pointer;
}

.multi_check_container input {
    display: block;
    width: 20px;
    accent-color: #b77a6d;
    transform: scale(1.7);
    cursor: pointer;
}

/* properties for date and time selection */
div.date_and_time {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #93c0b2;
    border-bottom: 6px solid #4b6468;
}

label[for="booking_time"] {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 20px;
    font-size: 1.1em;
}

input#booking_time {
    font-family: 'Hammersmith One', sans-serif;
    font-size: 1.1em;
    color: #b77a6d;
    background-color: #fcf3e2;
    border-radius: 15px;
    border: none;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}


/* start of text area section */
.comments {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0 0 0;
    gap: 30px;
}

.comments label {
    font-size: 1.2em;
    width: 60%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    gap: 10px;
}

.comments label span {
    font-family: 'Hammersmith One', sans-serif;
    text-transform: uppercase;
    width: 70%;
}

.comments input {
    accent-color: #b77a6d;
    transform: scale(3);
}

textarea {
    display: block;
    height: 150px;
    width: 60%;
    resize: none;
    overflow-y: auto;
    font-family: 'BioRhyme', serif;
    font-size: 1em;
    color: #e09485;
    background-color: #fcf3e2;
    padding: 0 10px;
    border-radius: 20px;
    border: 6px solid #b77a6d;
}

textarea:focus {
    outline: none;
}

form>.spacer {
    margin: 10px 0;
}

input[type="submit"] {
    display: block;
    height: 60px;
    width: 150px;
    margin: 0 auto;
    background-color: #a5d2c3;
    color: #4b6468;
    font-family: 'Hammersmith One', sans-serif;
    font-size: 1.4em;
    border-radius: 20px;
    border: none;
    box-shadow: -8px 6px #4b6468;
    cursor: pointer;
}

input[type="submit"]:hover {
    transform: scale(1.05);

}

.location h2 {
    font-family: 'Pacifico', cursive;
    font-size: 2.4em;
    font-weight: 100;
}

.location .outer_container {
    background-color: transparent;
    margin: 35px 10px 140px 10px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.location img {
    height: 200px;
}

.location ul {
    color: #e09485;
    padding: 0;
    margin: 0;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.location li {
    color: #e09485;
    list-style-type: none;
}

iframe {
    outline: 6px solid #e09485;
    border-radius: 20px;
}

/* ------------------------------ FOOTER PROPERTIES ------------------------------ */
footer div.footer-background {
    position: absolute;
    bottom: 0;
    z-index: -10;
    width: 100%;
    height: 600px;
    background-image: url(../images/desert_bg.png);
    background-size: cover;
    background-position: bottom;
}

footer {
    /* for positioning footer at bottom relative to body */
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: .7em;
}

footer .footer_flex_item {
    width: 33.33%;
    text-align: center;
    padding: 8px;
}

footer .phone_number {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

footer .address {
    display: flex;
    flex-direction: column;
}

footer .sm_icons {
    display: flex;
    justify-content: space-evenly;
}

footer .icon {
    height: 30px;
    width: 30px;
}

/* properties for footer hyperlinks - gives the icons a blue glow when hovered over, and a darker blue when clicked on */
footer a {
    display: inline-block;
    z-index: 2;
}

footer a:link,
footer a:visited {
    color: #fff8ea;
    text-decoration: none;
}

footer .sm_icons .icon:hover {
    border-radius: 50%;
    background-color: #93c0b2;
    box-shadow: 0 0 6px 6px #93c0b2;
}

footer .sm_icons .icon:active {
    border-radius: 50%;
    background-color: #4b6468;
    box-shadow: 0 0 6px 6px #4b6468;
}

/* ------------------------------ MEDIA QUERY SETTINGS ------------------------------ */

/* tablet */
@media (max-width: 1024px) {

    .hero_section {
        flex-direction: column;
    }

    .hero_section .logo_area,
    .hero_section .arch_area {
        width: 100%;
    }

    .hero_section .logo_area {
        height: 250px;
    }

    .hero_section .arch_area {
        height: 450px;
    }

    .logo {
        max-height: 250px;
        max-width: 90%;
    }

    .stylists_and_merch {
        flex-direction: column;
        align-items: center;
        height: fit-content;
        gap: 70px;
    }

    .stylist_image,
    .merch_image {
        width: 75%;
        height: 400px;
    }

    .merch_image {
        height: 250px;
    }

    div.booking_options {
        flex-direction: column;
    }

    div.booking_options .option_outer_container {
        width: 100%;
    }

    .multi_check_outer_container {
        width: 100%;
        margin-top: 10px;
        margin-left: 0;
    }

    .location .outer_container {
        flex-direction: column-reverse;
        margin-bottom: 60px;
    }

    iframe {
        width: 90%;
        max-width: 600px;
    }

    .location img {
        width: 200px;
        height: auto;
    }
}


/* mobile */
@media (max-width: 640px) {

    nav {
        padding: 8px;
        font-size: .9em;
    }

    .arch_container {
        width: 90%;
    }

    .stylist_image,
    .merch_image {
        width: 100%;
        height: 275px;
    }

    .merch_image {
        height: 175px;
    }

    .drinks header {
        height: 725px;
        flex-direction: column;
        background-position: -500px center;
    }

    .drinks header div {
        width: 100%;
        height: 50%;
    }

    .drinks header div:last-child {
        width: 100%;
    }

    .drink_container {
        flex-direction: column;
        align-items: center;
    }

    .drink_item {
        height: 150px;
        width: 92%;
    }

    .drink_item_image_container img {
        height: 150px;
        width: 150px;
    }

    .drink_item_text_container {
        font-size: .72em;
        height: 130px;
    }

    .drink_item_text_container h3 {
        width: 85%;
        font-size: 1.24em;
    }

    form .info {
        flex-direction: column-reverse;
    }

    .flexbox_hours_for_mobile {
        display: flex;
        position: relative;
    }

    div.hours_container {
        width: 100%;
    }

    .hours {
        width: 50%;
        font-size: .8em;
    }

    .flexbox_hours_for_mobile .spacer {
        position: absolute;
        bottom: -15px;
    }

    .hours_container .phone {
        margin-top: 20px;
    }

    div.contact_info_container {
        width: 100%;
    }

    .contact_info_container .inner_container {
        width: 100%;
    }

    div.contact_info_container .inner_container div {
        width: 100%;
    }

    .outer_container {
        margin: 0 10px;
    }

    .option_top_container,
    .option_choice_container {
        width: 100%;
    }

    .comments label {
        width: 100%;
    }

    textarea {
        width: 90%;
    }
}