/*Background behind text and images - all pages*/
body {
    background-color:rgb(149, 99, 12);
    font-family: "Cormorant Garamond", Garamond, serif;
}

.banner-container {
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 1.7em;
    display: flex;
    justify-content: center;
}

/* Global image styling - all pages */
img {
    max-width: 50%;
    height: auto;
}

/* rounded background (.Class) for text and images - all pages */
.rounded_background{
    background-color: rgb(241, 184, 240);
    border-radius: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    margin: 2em auto;
    max-width: 1200px;
    box-sizing: border-box;
    width:auto;
}
/* banner image # = ID */
#top_banner {
    outline: 0.75vw solid rgba(114, 245, 125);
    border-radius: 1vw;
}

/* logo image all pages */
#logo_image {
    border-radius: 10px;
    border: 10px solid rgba(114, 245, 125, 1);
}

/* Footer  (SELECTOR) */
footer {
    text-align: center;
}

/*  any images - all pages (CLASS) */
.rounded_img {
    border-radius: 0.5vw;
    display: block;
    margin: 0 auto;
}

/* Navigation bar (CLASS) */
.navContainer {
    margin-top: 20px;

    /*REQUIRED ADDITION */
    padding: 20px;
}

/* Navigation list (SELECTOR) */
nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;

    /*REQUIRED ADDITION */
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
/* Navigation list items (SELECTOR) */
nav ul li {
    background-color: rgb(171, 158, 141);
    border-radius: 10px;
    width: 187px;
    height: 50px;
    text-align: center;
    align-content: center;
    font-weight: bold;

    /*REQUIRED ADDITION */
        font-size: 1.2rem;
}

/* Navigation links (SELECTOR) */
nav li a {
    text-decoration: none;
}


/* css pg2 - Facial and Waxes */
.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 100px;
    row-gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* images in the grid (CLASS)*/
.image-grid img {
    width: 100%;
    display: block;
    object-fit: cover;
    
}

/* css pg3 - List styling for Lash Lifts and Brow Tint */
/* list items for the 5-step process and key facts (CLASS) */
.modify_icon ul {
    list-style-type: square;
    list-style-position: inside;
}

.modify_icon ol {
    list-style-type: decimal;
    list-style-position: inside;

}
/* listgeneric font color old(#eedec6)(ID) */
#listGeneric {
    list-style-position: inside;
    font-size: 1em;
    line-height: 1.8em;
    color: #111111;
    background-color: #b08f48;
    border-radius: 20px;
    padding: 1.2em 1.5em;
    counter-reset: item;
}
/* side by side dt list (CLASS) */
.side-by-side dt {
    float: left;
    width: 20%;
    font-weight: bold;
    clear: left;
}

/* side by side dd list (CLASS) */
.side-by-side dd {
    margin-left: 40%;
    padding-bottom: 0.5em;
    list-style-type: none;
}

/* css pg4 - Twist Team  */
/* Personnel Table (SELECTOR)font */
table {
    border-collapse: collapse;
    background-color: #e6a706;
    color: #110101;
    margin-bottom: 2em;
    border-radius: 20px;
    overflow: hidden;
    /*REQUIRED ADDITION */
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* Header row (SELECTOR)top */
table th {
    background-color: #74de10;
    color: #000;
    font-weight: bold;
    font-size: 1.1em;
    padding: 0.75em; 
    text-align: center;
    border-bottom: 2px solid #8d7751;
}
/* Data cells (SELECTOR) lines*/
table td {
    vertical-align: top;
    padding: 1em;
    border-top: 1px solid #b81b99bc;
}
/* Images in the table (SELECTOR) */
table img {
    border-radius: 8px;
}
/* Personnel names (SELECTOR)cell color */
table tr td[colspan="2"] {
    font-weight: bold;
    font-size: 1.1em;
    background-color: #e4f197;
    padding-top: 1em;
    padding-bottom: 0.5em;
}
/* Paragraphs in the table (SELECTOR) */
table p {
    margin: 0;
    line-height: 1.6em;
}

/* ***************** Responsive Additions **********************/
.banner-container {
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 1.7em;
    display: flex;
    justify-content: center;
}

img {
    max-width: 50%;
    height: auto;
}

/* ----------------NEW CODE FOR BUTTONS-------- */
.button-nav a button {

    width: 175px;
    height: 65px;
    font-family: 'Playpen Sans', cursive;
    font-size: 1rem;
    background-color: transparent;
    background-image: url(../images/buttons/buttonup.png);
    color: rgb(238, 218, 133);
    border: none;
    cursor: pointer;
}

.button-nav a button:hover {
    background-image: url("../images/buttons/buttonover.png");
    color: rgb(0, 0, 0);
    background-color: transparent;
}

.button-nav a button:active {
    background-image: url("../images/buttons/buttondown.png");
    color: rgb(255, 255, 255);
    background-color: transparent;
}

.button-nav a button:active span {
    top: 1px;
    left: 4px;
}

.ui-button {
    position: relative;

}

.ui-button span {
    position: relative;
    top: -3px;
}

.container{
    column-count: 3;
    column-gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 2em auto;
    box-sizing: border-box;
}

.column{
    background-color: rgb(238, 218, 133);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin-bottom: 20px;
    break-inside: avoid;
    box-sizing: border-box;
}

.bottom-img {
    border-radius: 1vw;
    width: 100%;
    height: auto;
    margin-top: auto;
}

.column p {
    width: 100%;
    padding: 0 10px;
    text-align: left;

}




/* Always put MEDIA QUERIES at the end of the CSS file. Also used to center/right/left justify */
/* SMALL SCREENS (Mobile Devices) */
@media only screen and (max-width: 767px) {
   .side-by-side dt {
        width: 100%;
    }
    .side-by-side dd {
        margin-left: 0;
     
    }
    
    .image-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #personnel_img {
        max-width: 128px;
        height: auto;
    }

/* Photoshop:  NEW CODE FOR BUTTONS - mobile */
.button-nav {
    display: flex;
    flex-direction: Column;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
}

    /*New Code for Columns*/
.container {

    column-count: 1;
}

}



/* MEDIUM SCREENS (Tablets)- personnel table */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.image-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

#personnel_img {
    max-width: 196px;
    height: auto;
}

/* NEW CODE FOR BUTTONS */
.button-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}

   /*New Code for Columns*/
.container {

    column-count: 2;
}

}

/* LARGE DEVICE SCREENS (Desktops) - personnel table */
@media only screen and (min-width: 1025px){

#personnel_img {
    max-width: 256px;
    height: auto;
}

/* NEW CODE FOR BUTTONS */
.button-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}

}