/* Google fonts import */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600&family=Nunito:wght@200;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Julius+Sans+One&family=Libre+Baskerville&display=swap');
 * {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}
body {
    width: 100vw;
    background: #ffffff;
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    color: #141204;
    overflow-x: hidden;
}
/* generic rule for all buttons */
button, #reset-btn {
    font-family: 'Lora', serif;
    text-transform: uppercase;
    background: #141204;
    color: #E2C372;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.2rem;
    padding: 1.2rem 1.8rem;
    cursor: pointer;
}
button>a {
    text-decoration: none;
    color: inherit;
}
/* Header styling */
header {
    width: 100vw;
    height: 16vh;
    background: #311247;
    font-size: 1rem;
    padding: 0 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: absolute;
}
header * {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-family: 'Lora', serif;
    text-align: center;
}
/* Logo styling */
#cat-logo h1 {
    font-size: 2.8rem;
    color: #E2C372;
    font-weight: lighter;
}
#cat-logo hr {
    border-bottom: 1.8px solid;
    width: 100%;
    margin: 0.15rem auto;
}
#cat-logo p {
    letter-spacing: 0.1rem;
    color: #E2C372;
}

/* Navigation bar styles */
.nav-flex-container {
    display: flex;
    gap: 4rem;
}
.nav-flex-item {
    list-style-type: none;
    text-transform: uppercase;
}
.active {
    padding: 0.2rem;
    box-shadow: rgba(255, 255, 255, 0.2) -3px 3px, rgba(255, 255, 255, 0.1) -6px 6px;
}
nav a:hover {
    color: #E2C372;
    box-shadow: 0 12px 16px 0 rgba(44, 52, 60, 0.24), 0 17px 50px 0 rgba(44, 52, 60, 0.19);
}
/* Hide hamburger menu for screen size over 666px */
.hamburger {
    display: none;
}
/* Styles for hamburger menu for screen sizes 666px and down */
/* Adapted to the tutorial found on https://dev.to/devggaurav/let-s-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript-4gci */
.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: rgb(255, 255, 255);
}
/* hero image styles */
.hero-outer {
    width: 100vw;
    height: 100vh;
    /* margin-bottom: 4rem; */
    background: url(../images/hero.jpg) no-repeat 40% 37%;
    background-size: cover;
}
.hero-content {
    /* background-color: rgba(44, 52, 60, .6); */
    background-size: 100%;
    color: rgb(255, 255, 255);
    padding: 3rem;
    height: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-end;
}
.hero-content-text {
    max-width: 60%;
    background-color: rgba(33, 26, 29, .8);
    border: 1px solid white;
    color: #fbfbfb;
    padding: 2rem;
    align-self: center;
}
.hero-content-text h2 {
    font-weight: 400;
    font-size: 2.5rem;
    color: #fff;
}
.hero-content-text h2 span {
    font-weight: bold;
    font-size: 2rem;
    margin-top: 0;
}
.hero-content-text span {
    font-family: 'Lora', serif;
    font-weight: lighter;
    font-style: italic;
    display: block;
    margin-top: 2rem;
}

/* Book a session button styles */
.book-btn {
    margin-top: 2rem;
    background-color: rgba(33, 26, 29, .9);
    color: #E2C372;
    box-shadow: 0 12px 16px 0 rgba(197, 192, 185, 0.24), 0 17px 50px 0 rgba(197, 192, 185, 0.19);
    align-self: center;
}
.book-btn:hover {
    background-color: #311247;
    color: #E2C372;
    box-shadow: 0 12px 16px 0 rgba(44, 52, 60, 0.24), 0 17px 50px 0 rgba(44, 52, 60, 0.19);
}

.book-btn-circle {
    margin-top: 2rem;
    background-color: #141204;
    color: #E2C372;
    box-shadow: 0 12px 16px 0 rgba(197, 192, 185, 0.24), 0 17px 50px 0 rgba(197, 192, 185, 0.19);
    align-self: center;
    border-radius: 90px;
}
.book-btn-circle:hover {
    background-color: #311247;
    color: #E2C372;
    box-shadow: 0 12px 16px 0 rgba(44, 52, 60, 0.24), 0 17px 50px 0 rgba(44, 52, 60, 0.19);
}

/* Introduction section */
intro h2 {
    text-align: center;
    font-size: 200%;
    padding: 30px 0px;
}

#intro-wrapper {
    width: 100%;
    font-size: 120%;
}

#intro-wrapper h3 {
    padding-bottom: 10px;

}

.intro-left {
    display: flex;
    justify-content: space-evenly;
    height: auto;
    margin-bottom: 50px;
}

.intro-right {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row-reverse;
    height: auto;
    margin-bottom: 50px;
}

.text-left {
    text-align: center;
    line-height: 40px;
    width: 40%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 20px;
}

.text-right {
    text-align: center;
    line-height: 40px;
    width: 40%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 20px;
}

.image-left {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 500px;
    width: 50vw;
}

.image-right {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 500px;
    width: 50vw;
}

/* Quotes breaking up the home page */
.qoute {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 50px;
}

.qoute-text {
    text-align: center;
    line-height: 40px;
    display: inline-block;
    justify-content: center;
    flex-direction: column;
    margin: 20px;
}

.quote-container {
    font-family: 'Julius Sans One', sans-serif;
    padding: 5rem 1rem;
    height: 100%;
    width: 100%;
    text-align: center;
    display: block;
    flex-direction: column;
    align-content: center;
    justify-content: space-evenly;
}
/* Offer details from therapist */
.offer {
    display: flex;
    justify-content: space-evenly;
    width: 90%;
    font-size: 2rem;
    text-align: center;
}
.offer-content {
    padding: 2rem;
    height: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-end;
    }
.list-inline {
    list-style: none;
    text-align: initial !important;
    margin: auto;
}

/* Styles for buttons */
btn-bg {
    background-color: #141204;
    color: #E2C372;
    box-shadow: 0 12px 16px 0 rgba(197, 192, 185, 0.24), 0 17px 50px 0 rgba(197, 192, 185, 0.19);
}
btn-bg:hover {
    background-color: #311247;
    color: #E2C372;
    box-shadow: 0 12px 16px 0 rgba(44, 52, 60, 0.24), 0 17px 50px 0 rgba(44, 52, 60, 0.19);
}
.classes-btn {
    text-align: center;
    margin-top: 3.5rem;
}

/* Location styling */
#location {
    text-align: center;
    margin: 3rem auto;
}
iframe {
    width: 100%;
    margin-top: 2rem;
}
/* Scroll back to top button styles*/
/* Tutorial followed on https://stackoverflow.com/questions/57847734/stopping-scrolling-back-to-top-button-above-the-footer-at-all-times-pure-css-and */
#myBtn {
    display: none;
    position: fixed;
    bottom: 80px;
    left: 10px;
    z-index: 99;
    border: 1px solid rgb(255, 255, 255);
    outline: none;
    background-color: #141204;
    color: #E2C372;
    cursor: pointer;
    padding: 7px 7px 7px 10px;
}
#myBtn:hover {
    background-color: #311247;
    color: #E2C372;
}
.google-map1 {
    width:45vw;
    margin:2%;
    display:inline-block
}

.google-map2 {
    width:45vw;
    margin:2%;
    float: right;
}
/* this stops the foat function disrution the footer below it */ 
.clearfix{
    clear:both
}

/* Footer styles*/
footer {
    background:#311247; 
    position: relative;
    color: rgb(255, 255, 255);
    font-size: 1.2rem;
/* Flexbox for making the blocks equal in size and positioned on a single row */
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
footer>* {
    flex: 1;
}
footer h2 {
    font-family: 'Lora', serif;
    color: #E2C372;
    margin-bottom: 1rem;
}
footer a {
    color: rgb(255, 255, 255);
    text-decoration: none;
}
.footer-flex-item {
    flex-grow: 1;
    margin: 2rem;
}
.footer-flex-item:nth-child(2), .footer-flex-item:nth-child(3) {
    text-align: center;
}
.footer-flex-item:nth-child(3) {
    align-self: center;
}
/* Grid on social media div into footer to distribute 2 links on 1 row */
#social-container {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 6rem;
    height: 100%;
    align-items: center;
}
#social-container>* {
    list-style: none;
}
#social-container i {
    font-size: 2.5rem;
    color: #E2C372;
}
#social-container i:hover {
    font-size: 2.6rem;
    color: #ffffff;
}

.nav-footer:hover {
    color: #E2C372;
}

#copyright {
    position: absolute;
    width: 100%;
    color: rgb(255, 255, 255);
    line-height: 40px;
    font-size: 0.7em;
    text-align: center;
    bottom:0;
}
/* Styles for about.html */
/* hero content styles */
.hero-about {
    background: url(../images/paint.jpg) no-repeat 80% 67%;
}
.hero-shortened {
    background-size: cover;
    max-height: 60vh;
}

#about-hero-text {
    min-width: fit-content;
    font-family: 'Lora', serif;
    font-size: 2rem;
    border-radius: 90px;
}
/* Styles for each paragraph on the about page */
.about-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 1rem 1rem;
}
.about-2, .about-4 {
    flex-direction: row-reverse;
    background-color: rgb(49, 18, 71);
    color: #fff;
}
.about-specifics h3 {
    font-family: 'Lora', serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.about-details p {
    max-width: 70vw;
    margin-top: 1rem;
}
.bold-specifics {
    font-weight: 600;
}
.italic-specifics {
    font-style: italic;
}
.about-box img {
    border-radius: 50%;
    width: 300px;
    height: 300px;
}
/* About page buttons styles */
.buttons-section {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.buttons-section button {
    margin-top: 0;
}

/* book-now.html and booking-confirmation.html styles */
#booking-main {
    background: url(../images/palette.jpg) no-repeat center center;
    background-size: cover;
    padding: 25vh 0 3rem;
}
#booking-form, #booking-confirmation {
    max-width: 70vw;
    text-align: center;
    margin: 0 auto;
    background-color: rgba(44, 52, 60, .9);
    color: rgb(255, 255, 255);
}
.booking-confirmation-main {
    padding-bottom: 4rem;
}
#booking-confirmation {
    padding: 2rem;
}
#booking-form h2, #booking-form legend, #booking-confirmation {
    font-family: 'Lora', serif;
}
#booking-form h2, #booking-confirmation p {
    margin-top: 2rem;
}
#booking-confirmation h2 {
    margin-top: 2rem;
}
#booking-confirmation p {
    font-family: 'Nunito', sans-serif;
    margin-top: 6rem;
}
.booking-confirmation-btns {
    margin-top: 6rem;
}
/* Booking form styles */
form {
    /* display: flex; */
    flex-direction: column;
    flex-wrap: wrap;
    gap: 3rem;
}
label, fieldset {
    font-size: 1.5rem;
}
fieldset legend {
    margin-bottom: 1rem;
}
#grid-inputs {
    margin: 3rem auto 0;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 3rem;
    justify-content: flex-start;
}
.grid-item {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.grid-item input{
    height: 40px;
    max-width: 50%;
    cursor: pointer;
    border-radius: 10px;
    font-size: 1.5rem;
    text-align: center;
}

#flex-form-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
#flex-form-btns button, #flex-form-btns input {
    margin: 1rem auto 1rem;
    border-radius: 10px;
}
#flex-form-btns button{
    background-color: #211a1d;
    color: #E2C372;
    border-radius: 10px;
}
#flex-form-btns button:hover, #flex-form-btns input:hover{
    background-color: #311247;
    color: #E2C372;
}
#email {
    width: 230px;
}

textarea{width: auto;}

#message {
    border-radius: 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    display: grid;
    margin: 2%;
}

/* Media queries for large and medium devices (landscape tablets, laptops/desktops 1012 px and down) */
 @media only screen and (max-width: 1012px) {
     main {
         font-size: 1.3rem;
    }
    /* logo and nav styles */
     header {
         height: 25vh;
         flex-direction: column;
         justify-content: center;
         gap: 3rem;
    }
     .hero-outer {
         height: auto;
    }
    /* to contrast overlapping of hero content with header */
     .hero-content-text {
         margin-top: 45%;
         min-width: 80vw;
    }
     .hero-content button {
         min-width: 40%;
    }
    /* about page styles*/
     .medium-device-hero-content {
         max-height: 60vh;
         font-size: 1rem;
    }
     .about-specifics h3 {
         font-size: 2rem;
    }
     td {
         font-size: 0.8rem;
    }
    /* Booking page styles */
     form {
         margin-top: 15vh;
    }
     #grid-inputs {
         display: flex;
         flex-direction: column;
    }
     .grid-item {
         justify-content: space-between;
    }
     #booking-confirmation {
         margin-top: 12vh;
    }
     .booking-confirmation-btns {
         flex-wrap: nowrap !important;
         gap: 2rem;
    }
     .booking-confirmation-btns button {
         font-size: 1rem !important;
    }
    /*Sign Up Form Tablet View*/

    .signup-form {
        margin: 0 auto;
    }

    #join-button {
        margin: 0 auto;
        margin-top: 15px
    }
}
/* media queries for medium and small devices (portrait tablets and large phones, 768px and down) */
 @media only screen and (max-width: 768px) {
    /* Footer styles */
     footer {
        position: relative;
         display: grid;
         grid-template-columns: 1fr 1fr;
    }
     .footer-flex-item:nth-child(3) {
         grid-column-start: 1;
         grid-column-end: 3;
    }
     footer #social-container {
         display: flex;
         justify-content: space-around;
    }
    /* about.html styles */
     .buttons-section {
         display: flex;
         flex-direction: column;
         gap: 2rem;
    }
     #flex-form-btns button, #flex-form-btns input {
         padding: 0.5rem;
         font-size: 1.3rem;
    }
     label, fieldset {
         font-size: 1.5rem;
    }
}
/* Media queries for small/extra small devices (phones and large phones, 666px and down) */
 @media only screen and (max-width: 666px) {
     * {
         font-size: 1.1rem;
         line-height: 2rem;
    }
     button {
         font-size: 1rem;
         padding: 0.5rem 0.5rem;
         line-height: normal;
    }
     header {
         height: 14vh;
         flex-direction: row;
         justify-content: space-between;
         position: fixed;
         z-index: 1;
    }
    /* Logo styles */
     #cat-logo h1 {
         font-size: 1.5rem;
    }
     #cat-logo p {
         font-size: 0.8rem;
    }
    /* Nav bar styles */
    /* Change position to fixed */
     .nav-flex-container {
         position: fixed;
         left: -100%;
         top: 14vh;
         flex-direction: column;
         align-items: center;
         background-color:#311247;
         width: 100vw;
         transition: 0.3s;
         color: #ffffff;
         box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
    }
     .nav-flex-container.active {
         left: 0;
         padding: 1rem 0;
    }
     .nav-flex-item a {
         color: #E2C372;
         font-weight: 600;
    }
     .nav-flex-item .active {
         background-color: inherit !important;
    }
     nav a:hover {
         background-color: #E2C372;
         border-radius: 2px;
         padding: 0.2rem 1rem;
    }
    /* Display hamburger menu */
    /* Taken from https://dev.to/devggaurav/let-s-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript-4gci */
     .hamburger {
         display: block;
         cursor: pointer;
    }
     .hamburger.active .bar:nth-child(2) {
         opacity: 0;
    }
     .hamburger.active .bar:nth-child(1) {
         transform: translateY(8px) rotate(45deg);
    }
     .hamburger.active .bar:nth-child(3) {
         transform: translateY(-8px) rotate(-45deg);
    }
    /* Fix measures for avoiding hero background image to shrink until the section breaks */
     .hero-content-text {
         min-width: 90vw;
         padding: 2%;
         margin-top: 14vh;
         padding: 10%;
    }
     .hero-content-text h2 {
         font-size: 1.1rem;
         font-weight: 400;
    }
     .hero-content-text span {
         display: block;
         font-size: 1.2rem;
    }
     .hero-content button {
         max-width: 95vw;
    }
    /* Index.html sections styles */
     #location {
         margin: 1rem 0;
    }
    /* Footer styles */
     footer {
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
    }
     .footer-flex-item:nth-child(3) {
         align-self: stretch;
    }
    /* about page for therapist styles */
     .hero-about-therapist {
         margin-bottom: 0;
    }
     .about-box {
         display: flex;
         flex-direction: column;
         text-align: center;
    }
     .about-box img {
         width: 200px;
         height: 200px;
    }
     .about-specifics {
         display: flex;
         flex-direction: column;
         align-items: center;
    }
     .about-details p {
         min-width: 80vw;
    }
   
  
    /* Booking page styles*/
     #booking-main {
         padding-top: 25vh;
    }
     form {
         display: block !important;
         margin-top: 0;
         padding-top: 1rem;
         font-size: 1.2rem;
    }
     form *{
         font-size: 1.2rem;
    }
     .booking-form h2 {
         font-size: 1.5rem;
         margin: 2rem auto 3rem;
         max-width: 100%;
    }
     #grid-inputs {
         gap: 1rem;
         margin: 0 auto 1rem;
    }
     .grid-item {
         display: flex;
         flex-direction: column;
         gap: 1rem;
    }
     .grid-item label{
         margin: 0 auto;
    }
     .grid-item input{
         max-width: 90%;
         align-self: center;
    }
     fieldset{
         margin-bottom: 1rem;
    }
     fieldset legend{
         font-size: inherit;
    }
     #genre-radios label{
         margin-left: 0.8rem;
    }
     #flex-form-btns {
         flex-direction: column;
    }
     #email {
         font-size: 1.2rem;
         width: auto;
    }
    /* Booking confirmation page styles */
     #booking-confirmation {
         margin-top: 0;
    }
     .booking-confirmation-btns {
         margin-top: 2rem !important;
    }
     .booking-confirmation-btns button {
         margin: 1rem !important;
    }
}


/* Introduction */
@media screen and (max-width:1200px) {
    /* Introduction Tablet View*/

    .text-left {
        width:85%;
        margin:0 auto;
        padding-bottom: 10px;
    }

    .text-right {
        width:85%;
        margin:0 auto;
        padding-bottom: 10px;
    }
}

@media screen and (max-width: 950px) {

    /* Intro Mobile View*/

    .intro-left {
        display: block;
        margin-bottom: 0px;

    }

    .intro-right {
        display: block;
        margin-bottom: 0px;
    }

    .text-left {
        line-height: initial;
    }

    .text-right {
        line-height: initial;
    }

    .text-left p {
        font-size: 110%;
    }

    .text-right p {
        font-size: 110%;
    }

    .image-left {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 240px;
        width: 300px;
    }

    .image-right {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 240px;
        width: 300px;
    }
    .quote-container {
        font-family: 'Julius Sans One', sans-serif;
        padding: 2.5rem 1rem;
    }

}
@media (min-width:950px) and (max-width:1200px) {
    
    /*Workshop Goals Tablet View*/

    .text-left p {
        padding: 0 40px;
    }

    .text-right p {
        padding: 0 40px;
    }
    .image-left {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 400px;
        width: 530px;
    }

    .image-right {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 400px;
        width: 530px;
    }

}

@media (min-width:650px) and (max-width:950px) {

    /*Workshop Goals Mobile View*/

    .image-left {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 340px;
        width: 430px;
    }

    .image-right {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 340px;
        width: 430px;
    }
    .quote-container {
        font-family: 'Julius Sans One', sans-serif;
        padding: 1rem .5rem;
    }

}