/* ------------------- START Main HTML styles ------------------- */
        body,
        html {
            margin: 0;
            padding-right: 0;
            font-family: 'Raleway', sans-serif;
            font-size: 18px;
            line-height: 1.4;
            background: #f1f1f1;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        a {
            text-decoration: none;
        }

        :visited{
            color: inherit;
            /* font-weight: normal; */
        }

        h1{
            font-size: 2em;
            font-weight: bolder;
            color: #ee5a24;
            margin-top: 2.5rem;
        }
        
        h2 {
                font-size: 24px;
                margin-top: 2.5em;
                /*  line-height: 80%; */
                font-weight: bolder;
                display: block;
                /* height: auto; */
        }

        h4 {
            /*   font-size: 35px; */
            margin-bottom: -0.3em;
        }

        footer {
            padding: 2em 0;
            background: #ee5a24;
            color: #fff;
        }

        footer h3 {
            margin-top: .25em;
        }

        footer a {
            color: #fff;
        }

        footer small {
            display: block;
            margin-top: 2em;
        }

        .flex {
            display: flex;
        }

        .flex.column {
            flex-direction: column;
        }

        .flex.spaced {
            justify-content: space-between;
        }

        .section {
            /* width: 55%; */
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
            margin: 0 auto;
            padding-top: 3em;
            padding-bottom: 1em;
        }

        .text-center {
            text-align: center;
        }

        .hidden {
            visibility: hidden;
        }

        .not-displayed {
            display: none;
        }

        .invert-color {
            filter: invert(1);
        }

        /* ------------------- START Header section ------------------- */

        .hero {
            color: #fff;
              height: 350px;
             /*min-height: 100%; */
            margin-left: 0;
            margin-right: 0;
             /*background: center / cover no-repeat url(https://uk2img.net/startersite/heros/hero-Massage.jpg); */
            background: center / cover no-repeat url(https://www.spaboxboutique.uk/images/spabox-dividelotus-lady-header-800.jpg);
            padding-bottom: 0%;
            padding-top: 0%;
            box-shadow: 0 500px rgba(0, 0, 0, 0.10) inset
        }

        .backstretch-item {
            background-position-x: 50%;
            background-position-y: 50%;
        }

        .logo img {
            width: 250px;
            padding: 10px 5px;
        }

        .hero-title {
            margin: 0;
            padding: 2.5em 0;
            font-size: 16px;
            font-weight: 100;
            text-transform: uppercase;
        }

        .hero-content {
            align-items: center;
            justify-content: center;
            height: 100%;
            max-width: 655px;
            margin: 0 auto;
        }

        .hero-content p {
            width: 100%;
            line-height: 1.75em;
        }

        .main-banner {
            width: 100%;
            /*   margin: 0; */
            margin-top: 10%;
            margin-bottom: 5px;
            font-size: 4em;
            font-weight: 600;
        }


        .nav-bar {
            display: flex;
            align-items: center;
        }

        .logo {
            height: 55px;
            padding: 10px;
            margin: 10px;
            width: 200px;
        }

        #mobile-menu-toggle input {
            display: none;
        }

        .nav-links {
            flex-grow: 3;
            padding-top: 1rem;
        }

        .error {
            color: red;
            display: block;
            padding-left: 2rem;
        }

        .nav-links ul {
            display: flex;
            list-style-type: none;
            justify-content: space-evenly;
        }

        .nav-links ul li {
            color: #fff;
            font-weight: 600;
            letter-spacing: 0.6px;
        }

        .nav-links.dark-text ul li {
            color: #36383f
        }

        .nav-links.dark-text2 ul li {
            color: #ee5a24
        }

        .spacer {
            flex-grow: 2;
        }


        /* ------------------- END Header styling ------------------- */

        /* ------------------- START Image-text block section ------------------- */

        #image_blocks .image_block_intro {
            text-align: center;
            margin-bottom: 40px;
        }

        #image_blocks .image_block {
            width: 48%;
            background-size: cover;
            background-position: center;
            border-style: solid;
            border-width: 9px;
            display: inline-block;
            border-color: #fff;
            -webkit-box-shadow: 5px 5px 5px 0px rgba(221, 221, 221, 1);
            -moz-box-shadow: 5px 5px 5px 0px rgba(221, 221, 221, 1);
            box-shadow: 5px 5px 5px 0px rgba(221, 221, 221, 1);
            margin-bottom: 20px;
        }

        #image_blocks .image_block img {
            width: 100%;
        }

        #image_blocks .text_block {
            width: 40%;
            display: inline-block;
            margin-left: 5%;
            vertical-align: top;
        }

        #image_blocks .text_block h2 {
            margin: 0;
        }

        #image_blocks {
            flex-direction: column;
        }

        .image_right_column {
            margin-left: 4%;
        }

        .row {
            display: flex;
            justify-content: space-between;
            padding-bottom: 2rem;
        }

        .text_block h1 {
            margin-top: 0;

        }

        /* ------------------- END Image-text block section ------------------- */

        /* ------------------- START Image-gallery section ------------------- */

        .gallery-container {
            text-align: center;
            background-color: #343434;
            color: #fff;
            padding: 20px;
        }

        .gallery-container ul {
            list-style-image: none;
            font-size: 0px;
            margin: 0 auto;
            padding: 0;
            max-width: 1000px;
        }

        .gallery-container .box {
            width: 23%;
            display: inline-block;
            margin: 1%;
            padding: 0;
        }

        .gallery-container .box a {
            display: block;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .gallery-container .box img {
            width: 100%;
            visibility: hidden;
        }

        /* ------------------- END Image-gallery section ------------------- */
        #inputbutton {
            display: inline-block;
            font-size: 1.05rem;
            font-weight: 600;
            text-transform: uppercase;
            padding: 12px 28px;
            border: solid 1px #f1f1f1;
            border-radius: 2px;
            margin: 10px 10px;
            color: #f1f1f1;
            background: #ee5a24;
            border: solid 1px #ee5a24;
        }

        /* ------------------- START Contact Us section ------------------- */

        #about_us p,
        #about_us ul,
        #about_us ol {
            text-align: left;
        }

        #contact_us.section {
            max-width: 980px;
            margin-left: auto;
            margin-right: auto;
            padding-top: 1em;
            padding-bottom: 6em;
        }

        /* WHITE BACK CARD */
        .card {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
            padding: 30px 0px;
            margin-top: 20px;
            background: #fff;
            box-shadow: #e7e5e5 0px 0px 20px 5px;
        }

        .card h3 {
            font-size: 22px;
        }

        /* ORANGE CARD */
        .card-highlight {
            min-width: 440px;
            box-sizing: border-box;
            padding: 30px 30px;
            /* margin-right: 20px; */
            color: #fff;
            background: #ee5a24;
            box-shadow: #ce8d50 10px 10px 15px 0px;
        }

        .card-highlight hr {
            width: 100%;
            border: #fff solid .5px;
        }

        .card-highlight p {
            margin: 10px 0;
            font-size: 14px;
        }

        .card-highlight .title {
            margin: 0;
            margin-bottom: .5em;
            text-align: center;
        }

        .card-content {
            width: 65%;
            min-width: 440px;
            max-width: 540px;
            box-sizing: border-box;
            padding: 0 0 0 50px;
            padding-top: 30px;
        }

        .card-content .title {
            margin: 0;
        }

        .contact-form input,
        .contact-form textarea {
            min-width: 82%;
            margin: 0 0px 15px;
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 0.85rem;
            line-height: 1.1rem;
            font-family: 'Raleway', sans-serif;
            background: #ecf7fe;
            display: inline-block;
            vertical-align: middle;
            /* border: #3bf40d solid 1px; */
        }

        .contact-icon {
            align-self: center;
            margin-right: 0.5em;
        }

        .contact-icon svg {
            opacity: .5;
            height: 1.75em;
        }

        .cta inputbutton {
            display: inline-block;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            padding: 12px 28px;
            border: solid 1px #f1f1f1;
            border-radius: 2px;
            margin: 10px 0;
            color: #f1f1f1;
            background: #ee5a24;
            border: solid 1px #ee5a24;
        }

        .contact-form .cta {
            border-radius: 3px;
        }

        .contact-highlight-details {
            justify-content: space-around;
        }

        #map {
            width: 100%;
            height: 424px;
            background-color: grey;
        }

        .social-icon {
            padding: 0 .5em;
        }

        .social-icon svg {
            width: 30px;
            height: 30px;
        }

        .info-msg div {
            display: none;
            position: fixed;
            bottom: 5%;
            left: 3%;
            z-index: 1000;
            background: #fff;
            padding: 1em 2em;
            border: 1px solid #ddd;
        }

        .info-msg div i {
            margin-right: .5em;
        }

        .info-msg div.closable {
            display: inline-block;
            position: relative;
            padding: 0;
            background: unset;
            border: none;
        }

        .info-msg div .close-x {
            display: inline-block;
            position: absolute;
            top: -12px;
            right: -5px;
            text-decoration: none;
        }

        .info-msg div .close-x i {
            color: #2c2c2c !important;
            margin-right: 0;
        }

        .info-msg .error {
            background: lightpink;
            color: black;
        }

        .info-msg .error i {
            color: red;
        }

        .info-msg .success {
            background: lightgreen;
        }

        .info-msg .success i {
            color: green;
        }

        .hours-list {
            list-style: none;
            margin: 0;
            padding: 10px 0;
        }

        .tbl-container {
            display: table;
        }

        .tbl-row {
            display: table-row;
            font-size: 15px;
        }

        .tbl-row.unusual {
            background-color: orange;
        }

        .tbl-row div {
            display: table-cell;
            padding: 2px 2px 5px 2px;
        }

        .tbl-row div:nth-child(odd) {
            padding-right: 2rem;
        }

        .tbl-row div:nth-child(even) {
            white-space: nowrap;
        }

        .contact-form label {
            display: inline-block;
            white-space: nowrap;
            width: 3%;
            color: black;
            font-size: 15px;
        }
/* Test contact us and form */
.child1{
   /* display: flex;  centre elements in container*/
    flex-wrap: wrap;
/* display: inline-block; */
    background-color: pink;
    border: solid 1px #f22606;
    /* height: 300px; */
    min-width: 30%;
    /* padding: 20px 40px; */
    height: auto;
    margin:0 20px;
    gap: 0px 0px;
    justify-content: center;
}
.child2a{
    display: block;
    background-color: rgb(233, 214, 10);
    border: solid 1px #8e13da;
    /* margin: 0px 0 1px -20px; */
    width: 350px;
    z-index: 5;
    color: #fff;
}
.child2b{
    display: block;
    background-color: rgb(176, 247, 247);
    border: solid 1px #3bf40d;
    margin: 10px;
    width: 380px;
}

        /* ------------------- END Contact Us section ------------------- */

        /* ------------------- START Social section ------------------- */

        .social-icon img {
            width: 32px;
        }

        .social-news-feed {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }

        .social-news-item {
            padding: 1rem;
            background-color: #fdfdfd;
            border: 2px black;
            border-radius: 2%;
        }

        .social-news-item iframe {
            background-color: #fdfdfd;
        }

        /* ------------------- END Social section ------------------- */

        /* ------------------- START Cookie consent section ------------------- */


        .cookie-consent {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: auto;
            max-width: 1300px;
            padding: 20px;
            border-radius: 3px;
            background: #fff;
            box-shadow: 0px 2px 2px 0px #00000040;
            margin: 15px auto;
            text-align: center;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .cookie-consent-text {
            margin-top: 13px;
            margin-bottom: 30px;
            color: #333333;
        }

        .cookie-consent-text p {
            margin: 0;
            font-size: 14px;

            &:first-of-type {
                margin-bottom: 30px;
            }
        }

        .cookie-consent-text a {
            color: #333;
        }


        .cookie-consent-image {
            background: url(https://admin-chi.uk2.net/static/cookie_uk2.png);
            background-size: 29px 23px;
            width: 29px;
            height: 23px;
        }


        .cookie-consent-button {
            background: linear-gradient(180deg, #FF913B 0%, #FF2525 100%);
            font-size: 18px;
            font-weight: 500;
            padding: 10px 30px;
            border-radius: 3px;
            border: none;
            color: #fff;
        }

        /* ------------------- END Cookie consent section ------------------- */

        /* ------------------- START Mobile styles ------------------- */

        /*
          ## Device = Desktops
          ## Screen = up to 1440
        */
        @media (max-width: 1440px) {
            .social-news-item iframe {
                width: 100%;
            }
        }

        /*
          ## Device = Desktops
          ## Screen = 1281px to higher resolution desktops
        */

        @media (min-width: 1281px) {
            .section {
                width: 85%;
                max-width: 900px;
            }
        }

        /*
          ## Device = Laptops, Desktops
          ## Screen = up to 1280px
        */

        @media (max-width: 1280px) {}

        @media only screen and (min-width: 1224px) and (max-width: 1280px) {
            .h-captcha {
                padding-right: 0 !important;
            }
        }

        @media (max-width: 1220px) {

            .contact-form input,
            .contact-form textarea {
                width: 86%;
            }
        }

        /*
          ## Device = Tablets, Ipads (portrait)
          ## Screen = up to 1024px
        */

        @media (max-width: 1024px) {
            .social-news-feed {
                flex-direction: column;
            }

            .social-news-item {
                margin-bottom: 1rem;
            }

        }

        /*
          ## Device = Tablets, Ipads (landscape)
          ## Screen = B/w 768px to 1024px
        */

        @media screen and (min-width: 768px) {

            .section {
                width: 95%;
                min-width: 0;
                max-width: 100%;
                box-sizing: border-box;
                margin: 0 auto;
                padding-top: 3em;
                padding-bottom: 1em;
            }

            img.discount-but2 {
                visibility: hidden;
                display: none;
            }

            .cookie-consent {
                flex-direction: row;
                text-align: left;
                padding: 10px 60px;
                margin: 15px auto;
            }

            .cookie-consent-text {
                margin: 0;
                margin-left: 12px;
                margin-right: 30px;
            }

            .cookie-consent-text p {
                margin: 0;
                margin-left: 12px;
                margin-right: 30px;
            }

            &:first-of-type {
                margin-bottom: 0;
            }
        }


        
        /*
          ## Device = Low Resolution Tablets, Mobiles (Landscape)
          ## Screen = up to 767px
        */

        /* |||  Contact Us: stack to column below 980px  ||| */
        @media (max-width: 980px) {
            #contact_us.section {
                margin-left: auto;
                margin-right: auto;
            }

            #contact_us .card.flex {
                flex-direction: column;
                align-items: center;
            }

            #contact_us .card-highlight {
                width: 85%;
                max-width: 85%;
                min-width: 0;
                margin-left: 0;
                box-sizing: border-box;
            }

            #contact_us .card-content {
                width: 85%;
                max-width: 85%;
                min-width: 0;
                padding: 20px 30px;
                box-sizing: border-box;
            }
        }

        /* |||  Contact Us: narrow phones below 488px  ||| */
        @media (max-width: 488px) {
            #contact_us.section {
                width: 100%;
                max-width: 100%;
                margin-left: auto;
                margin-right: auto;
                box-sizing: border-box;
            }

            #contact_us .card.flex {
                align-items: center;
            }

            #contact_us .card-highlight {
                width: 95%;
                max-width: 95%;
                min-width: 95%;
                box-sizing: border-box;
            }

            #contact_us .card-content {
                width: 95%;
                max-width: 95%;
                min-width: 95%;
                box-sizing: border-box;
            }
        }

        /* |||  Contact Us: very narrow phones below 380px  ||| */
        @media (max-width: 380px) {
            #contact_us.section {
                width: 100%;
                max-width: 100%;
                margin-left: auto;
                margin-right: auto;
                box-sizing: border-box;
            }

            #contact_us .card.flex {
                align-items: center;
            }

            #contact_us .card-highlight {
                width: 100%;
                max-width: 100%;
                min-width: 100%;
                box-sizing: border-box;
            }

            #contact_us .card-content {
                width: 100%;
                max-width: 100%;
                min-width: 100%;
                box-sizing: border-box;
            }
        }

        /* |||  Contact Us: very narrow phones below 365px  ||| */
        @media (max-width: 365px) {
            #contact_us.section {
                width: 100%;
                max-width: 100%;
                margin-left: auto;
                margin-right: auto;
                box-sizing: border-box;
            }

            #contact_us .card-highlight {
                min-width: 330px;
                box-sizing: border-box;
            }
        }

        @media (max-width: 767px) {
            header {
                overflow: hidden;
            }

            .header-contain {
                overflow: hidden;
                position: relative;
            }

            .logo {
                background-position: left;
                margin-left: 15px;
            }

            .spacer {
                display: none;
            }

            .nav-links {
                margin-right: 1em;
            }

            #mobile-menu-toggle {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                padding: 2rem 1rem;
            }

            #mobile-menu-toggle input {
                display: flex;
                width: 40px;
                height: 32px;
                position: absolute;
                cursor: pointer;
                opacity: 0;
                z-index: 3;
            }

            #mobile-menu-toggle span {
                display: flex;
                width: 29px;
                height: 2px;
                margin-bottom: 5px;
                position: relative;
                background: #ffffff;
                border-radius: 3px;
                z-index: 2;
                transform-origin: 5px 0;
                transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
            }

            #mobile-menu-toggle.darken span {
                background: #36383f;
            }

            #mobile-menu-toggle span:first-child {
                transform-origin: 0% 0%;
            }

            #mobile-menu-toggle span:nth-last-child(2) {
                transform-origin: 0% 100%;
            }

            #mobile-menu-toggle input:checked~span {
                opacity: 1;
                transform: rotate(45deg) translate(-3px, -1px);
                background: #36383f;
            }

            #mobile-menu-toggle input:checked~span:nth-last-child(3) {
                opacity: 0;
                transform: rotate(0deg) scale(0.2, 0.2);
            }

            #mobile-menu-toggle input:checked~span:nth-last-child(2) {
                transform: rotate(-45deg) translate(0, -1px);
            }

            .nav-links ul {
                position: absolute;
                top: 1%;
                right: -0.5%;
                flex-direction: column;
                justify-content: start;
                width: 180px;
                height: 100%;
                box-shadow: 0 0 10px #626569;
                margin: calc(100% - 110%) 0 0 calc(100% - 95%);
                padding: 90px 20px 10px 20px;
                background-color: #f5f6fa;
                -webkit-font-smoothing: antialiased;
                transform-origin: 0% 0%;
                transform: translate(70vw);
                transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
                z-index: 1;
            }

            .nav-links ul li {
                padding: 20px 0;
                transition-delay: 2s;
                color: #36383f;
                font-size: 120%;
            }

            #mobile-menu-toggle input:checked~ul {
                transform: none;
            }

            #image_blocks .image_block {
                width: 100%;
                display: block;
                margin: 0 auto;
            }

            #image_blocks .text_block {
                width: 100%;
                display: block;
                margin: 2rem 0 0 0;
            }

            #image_blocks .text_block h2 {
                font-size: 25px;
            }

            .row {
                flex-direction: column;
            }

            .row.reverse {
                flex-direction: column-reverse;
            }

            .section {
                width: auto;
                max-width: 100%;
                box-sizing: border-box;
                margin: 0 1em;
                min-width: 0;
            }

            .hero-content {
                margin: 0 50px;
            }

            .card {
                flex-direction: column;
            }

            .card-highlight {
                margin: 0;
                width: 100%;
                box-sizing: border-box;
            }

            .contact-highlight-details {
                margin: 0 auto;
            }

            .mobile-space-adjust.flex.spaced {
                justify-content: space-around;
            }

            .card-content {
                width: 100%;
                box-sizing: border-box;
                padding: 20px 25px;
                margin-right: 0;
            }

            .gallery-container .box {
                width: 48%;
                margin: 1%;
            }

            .main-banner {
                font-size: 2.5em;
            }

            #about_us h2 {
                font-size: 25px;
            }

            .card {
                min-width: 200px;
            }

            .card h3 {
                font-size: 20px;
            }

            .tbl-row div:nth-child(even) {
                white-space: unset;
            }

            .card-highlight {
                min-width: 300px;
                padding: 15px 25px;
                margin-left: -20px;
            }
            .contact-highlight-details {
                width: 100%;
                overflow: visible;
            }

            .contact-form input,
            .contact-form textarea {
                width: 89%;
            }

            .flex {
             padding-left: 5px;
             padding-right:5px;
            }
        }

        @media screen and (min-width: 768px) and (max-width: 1280px){

            .section768 {
                margin-left: 10%;
            }

        }


        @media screen and (min-width: 540px) and (max-width: 940px){

            .hero {
                height: 275px;
            }
            .hero-content {
                margin: 0 auto;
                height: 70%;
                padding-top: 5%;
            }
            .main-banner {
                width: 90%;
                margin-top: 15%;
                padding-bottom: 8%;
                }
                
            .contact-form input,
            .contact-form textarea {
                width: 86%;
            }
        }

        
        /*
          ##Device = Most of the Smartphones Mobiles (Portrait)
          ##Screen = up to 479px
        */

        @media (max-width: 399px) {
            .hero {
                height: 200px;
            }
            .hero-content {
                margin: 0 auto;
            }
            .main-banner {
                width: 100%;
                margin-top: 20%;
                }
            }

        @media (min-width: 400px) and (max-width: 439px){
        .hero {
            height: 210px;
        }
        .hero-content {
            margin: 0 auto;
        }
        .main-banner {
            margin-top: 15%;
            font-size: 1em;
            }
        }

        @media (min-width: 450px) and (max-width: 539px){
            .hero {
                height: 240px;
            }
       }    

        @media (max-width: 486px) {
            body {
                font-size: 16px;
                line-height: 1.4;
            }
            #about_us h2 {
                font-size: 20px;
            }
            .gallery-container .box {
                width: 100%;
                display: inline-block;
                margin: 10px 0;
            }
    
            .section {
                margin: 0 15px 0 15px;
                width: 85%;
                margin: 0 auto;
            }    

            .card {
                min-width: 70%;
            }

            .card-highlight {
                margin: 0 0 0 10px;
                margin-top: -55px;
                min-width: 80%;
                padding: 5px 5px;
            }
            .card-content {
                padding: 0 5px;
                padding-top: 30px;
            }
            .card h3{
                padding-right: 20px;
                padding-left: 20px;
                text-align: center;  
            }
            .contact-highlight-details {
                width: 80%;
                overflow:visible;
            }

            /* address-box {
                max-width: 45%;
                 border: 2px solid red;
            } */
    
            address-box > div {
                font-size: 0.85rem;
                /* border: #3bf40d solid 2px; */
            }

    
            img.discount-but {
                visibility: hidden;
                display: none;
            }
        
        .holistic-intro p{
            font-size: 16px;
            /* line-height: 130%; */
            /* text-align: center !important;
            max-width: 95%;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: -10px; */
            /* margin-top: -10px; */
            /* border: 1px red solid; */
         } 

         .natural{
            font-size: 0.45rem;
            line-height: 0.7rem; 
            text-align:center;
            font-weight: normal;
            /* margin-top:5px; */
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            margin-bottom: 1rem;
            width: 90%;
            /* border: #8e13da solid 1px; */
        }


        #about_us p,
         #about_us ol {
             text-align: center;
         } 
         #massage{
            font-size: 130%;
            margin: -3% 0;
         }
         #course{
            font-size: 190%;
            display: block;
            /* margin: -2px 0; */
         }
         #reviews{
            font-size: 190%;
            /* margin: -10% 0; */
         }
        div .bx{
            margin: 10px auto -15px auto;
            padding-top: 25px;
            font-size: 99%;
        }
        #terms ul{
            text-align: left;
            padding: 0.3rem 0;
        }            
        #contact_us.section {
            margin-left: -0.8rem;
            margin-right: -0.8rem;
        }

        .slideshow-container {
            position: relative;
            margin-top: 30px;
            margin-bottom: 30px;
            padding: 5px 0 10px 0;
        }

        .mySlides {
            display: block;
            padding: 10px 30px -10px 30px;
            text-align: center;
            /* margin: 0 20px -20px 20px; */
            /* border: 2px solid red; */
        }
        q {
            font-size: 110%;
            line-height: 130%;
        }

        p.author {
            font-size: 95% !important;
            margin-top: 10px;
        }

        .card {
            /* min-width: 290px; */
            padding: 30px 10px 30px 15px;
            margin-top: 20px;
            margin-right: 2%;
            margin-left: 2%; 
        }
        .card-highlight {
            /* min-width: 350px; */
            padding: 20px 0 30px 3px;
            margin-left: -20px;
            /* margin-right: 20px; */
        }
        .card h3{
            padding-right: 10px;
            padding-left: 25px;
            /* text-align: center;   */
        }
        .contact-highlight-details {
            width: 90%;
            /* overflow:visible; */
        }

        .tbl-row div:nth-child(odd) {
            padding-right: 10px;
        }

        .card-content {
            width: 55%;
            padding: 0 10px 0 20px;
            padding-top: 30px;
        }
        #form{
            min-width: 90%;
            margin-right: 0;
            /* background: #96f57c; */

        }

        .contact-form input,
        .contact-form textarea {
            min-width: 100%;
            margin: 0 0px 1px;
            padding: 12px 5px;
            /* border: none;
            border-radius: 5px; */
            font-size: 14px;
            line-height: 1.5em;
            /* font-family: 'Raleway', sans-serif;
            background: #ecf7fe;
            display: inline-block;
            vertical-align: middle; */
        }

        .treatment-grid {
            /* box-sizing: border-box;
          display: grid;
          grid-template-areas:
            'introd introd introd introd introd introd introd introd introd'
            'name name name name name name time price book'
            'description description description description description description description description description'; */
          /* gap: 1px;  */
          /* background-color: rgba(237, 235, 232, 0.93); */
          padding: 0;
          margin: auto;
          width: auto;
          font-size: 80%;
          text-align: center;
          /* border: red solid 1px; */
          /* display: block; */
        }
        
        .colour div{
          background-color: rgba(224, 222, 220, 0.93);
          padding-left: 1px;
          padding-bottom: 0.2rem;
          padding-right: 5px;
          /* margin-bottom: 10px; */
         /* display:inline-flexbox; */
           /* border: red solid 1px; */
        }
        
        .treatintro {
          /* grid-area: introd; */
         /* background-color: white; */
         font-size: 0.85rem;
          text-align: left;
          padding-bottom: 10px;
          margin-bottom: 10px;
          float: none;
        }
        
        .treatintro > p {
          margin-bottom: 0;
          color: #000;
        }
        
        .treatname {
          /* grid-area: name; */
          /* box-sizing: content-box; */
            /* border: green solid 1px; */
            margin-top: 0;
            float: left;
            width: 40%;
          }
        
          .treatname > span {
            /* grid-area: name; */
            /* box-sizing: content-box; */
              /* border: green solid 1px; */
              float: left;
              width: 40%;
            }  
        
        .treatname > h3 {
          font-size: 95%;
          text-align: left;
          line-height: 1.3em;
          margin-bottom: 0px;
          margin-top: 0 !important;
          padding-left: 1px;
          padding-top: 2px;
          /* width: 40%; */
            /* border: 1px solid #eeb02a; */
            /* box-sizing: content-box; */
        }
            
        .treattime {
          /* grid-area: time; */
          margin-top: 0;
          /* border: blue solid 1px; */
          font-style: italic;
          font-size: 98%;
          /* padding-right: 5px; */
          float: left;
          width: 20%;
        }
        
        .treatprice {
          /* grid-area: price; */
          /* border: 1px solid #0099cc; */
          /* background-color: lightyellow; */
          /* padding: 0; */
          /* vertical-align: middle; */
          margin-top: 0;
          color: #000000;
          float: left;
          width: 18%;
          text-align: right;
          font-weight: bold;
        }
        
        .treatbook {
          /* grid-area: book; */
          border: 1px solid #0099cc;
          /* background-color: white; */
          /* padding: 0; */
          /* text-align: right; */
          color: #999;
          vertical-align: middle !important;
          width: auto;
          float: inline-end;
          margin-left: 0;
          z-index: 2;
        }
        .treatbook > div {
          vertical-align: middle !important;
        }
        
        .treatdescrip {
          /* grid-area: description; */
          /* border: 1px solid #0099cc; */
          background-color: #fff;
          color: #000;
          text-align: left;
          /* margin-top: 5px; */
          /* margin-bottom: 0; */
          padding-bottom: 0;
          /* padding-right: 20px; */
          float: left;
          width: 20%;
        }
        .treatdescrip p {
            /* padding-bottom: 5px; */
            /* padding-right: 20%; */
            padding-left: 2px;
            margin-top: 0.1rem;
            background-color: yellow;
            float: none;
          }
 
          book {
            color: white;
            background-color: rgb(245, 103, 9);
            border-radius: 4px;
            padding-left: 8px;
            padding-right: 8px;
            padding-bottom: 2px;
            padding-top: 1px;
            font-size: 95%;
            vertical-align: text-bottom;
          }

          .service-card {
            flex-direction: column;
            align-items: stretch;
          }
    
          .service-price,
          .book-button {
            display: block;
            width: fit-content;
            margin-top: 1px;
          }
          .service-info {
            max-width: 100%;
            display: contents;
          }
          .service-header {
            max-width: 340px;
          }
          .service-header h3{
            margin-bottom: 0px;
            margin-top: 20px;
          }
          
       }


    @media (min-width: 487px) {

        img.discount-but2 {
            visibility: hidden;
            display: block;
        }
        body {
            margin:0% !important;
        }
    }




        /* @media screen and (max-width: 400px) {
       
            .topnav a:not(:first-child),
            .dropdown .dropbtn {
                display: none;
            }
       
            .topnav a.icon {
                float: right;
                display: block;
            }
        } */

        /* @media screen and (max-width: 600px) {
            .topnav.responsive {
                position: relative;
            }
            .topnav.responsive .icon {
                position: absolute;
                right: 0;
                top: 0;
            }
        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
            }
        } */


        /* ------------------- spbx styles ----------------- */

        h4b {
            font-size: 21px;
            margin-top: 2.5em;
            /*  line-height: 80%; */
            font-weight: bold;
            display: block;
        }

        h4c {
        color:grey;
        font-size:90%;
        font-weight: normal;
        font-style: italic;
        line-height: 70%;
    }

            
        address-box {
            display: flex;
            flex-flow: row wrap;
            /* align-items: center; */
            max-width: 95%;
            height: auto;
            margin: 0.8rem auto 3.5rem auto;
            /* padding: 0.1rem; */
            /* margin-bottom: 4rem; */
            /* gap: 20% 20%; */
            justify-content: space-between;
            text-align: center;
            /* border: 2px solid rgb(235, 17, 180); */
        }

        address-box > div {
            align-items: center;
            /* max-width: 33%; */
            /* height: auto; */
            margin: 0 auto;
            /* border: #3bf40d solid 2px; */
        }

        @media (max-width: 610px) {
        address-box {
            display: flex;
            flex-flow: column wrap;
            max-width: 95%;
            height: auto;
            margin: 0.8rem auto 3.5rem auto;
            /*gap: 20% 20%;*/
            justify-content: space-between;
            text-align: center;
        }
        address-box div {
            width: 100%;
            height: auto;
            /* margin: 0.8rem auto 3.5rem auto; */
            /* gap: 20% 20%; */
            /* justify-content: space-between; */
            text-align: center;
        }
    }



        .address {
            font-weight: normal;
            font-size: 90%;
            line-height: 95%;
            margin-top: 10px;
        }

        .address-head {
            font-size: 110%;
            font-weight: bold;
            /* line-height: 90%; */
         /* font-family: 'Roboto'; */
            color: #ee5a24 !important;
            text-decoration: underline;
            /* margin-top:15%; */
            /* padding-top: 1em; */
            /* border: 2px solid blue; */
        }

        .holistic-intro p{
           font-size: 105%;
           line-height: 130%;
           text-align: center !important;
           max-width: 90%;
           margin-left: auto;
           margin-right: auto;
           margin-bottom: -10px;
           /* margin-top: -10px; */
           /* border: 1px red solid; */
        }

        .natural{
            font-size: 0.8rem;
            line-height: 1rem; 
            text-align:center;
            font-weight: normal;
            /* margin-top:5px; */
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            margin-bottom: 2rem;
            width: 90%;
            /* border: #8e13da solid 1px; */
        }

        /* =========== Tooltip 1 ============= */
        .tooltip {
            position: relative;
            display: inline-block;
            /*  border-bottom: 1px dotted black;*/
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 170px;
            background-color: #ee5a24;
            opacity: 0.6;
            color: #fff;
            font-size: 70%;
            text-align: center;
            border-radius: 6px;
            padding: 3px 0;
            position: absolute;
            z-index: 1;
            top: -15px;
            left: -350%;
        }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent;
            /*  border-color: transparent transparent transparent #ee5a24; */
        }

        /* =========== Tooltip 2 ============= */
        .tooltip .tooltiptext2 {
            visibility: hidden;
            width: 100px;
            background-color: #ccc;
            opacity: 0.7;
            color: #fff;
            font-size: 80%;
            text-align: center;
            border-radius: 3px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            top: -2px;
            left: 110%;
        }

        .tooltip .tooltiptext2::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent #ccc transparent transparent;
        }

        .tooltip:hover .tooltiptext2 {
            visibility: visible;
        }


        /*  TOOLTIP 7 (same as vouchers) */
/*.tooltip7 {*/
/*	border-bottom: 1px dotted #000000; */
/*	color: #333333; */
/*	outline: none;*/
/*	cursor: crosshair;*/
/*	text-decoration: none;*/
/*	position: relative;*/
/*	text-align: center;*/
/*	line-height: 120%;*/
/*}*/
/*.tooltip7 span {*/
/*	margin-left: -999em;*/
/*	position: absolute;*/
/*}*/
/*.tooltip7:hover span {*/
/*	border-radius: 5px 5px; */
/*	-moz-border-radius: 5px; */
/*	-webkit-border-radius: 5px; */
/*	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); */
/*	-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); */
/*	-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);*/
/*	font-family: Calibri, sans-serif;*/
/*	position: absolute;*/
/*	left: 1em; */
/*	bottom: 25px; */
/*	z-index: 99;*/
/*	margin-left: 0px; */
	/*width: 170px;*/
/*	}*/
/** html a:hover { */
/*	background: transparent;*/
/*}*/
/*.tip7 {*/
/*	background: #F2F2eF; */
/*	border: 1px solid #cccccc;*/
/*	padding: 3em 2em; */
/*	font-family: Calibri, sans-serif; */
/*	font-size: 0.8rem; */
/*	line-height: 1.1rem;*/
/*    color: #333;*/
/*    width: 250px;*/
/*}*/


.tooltip7 {
  border-bottom: 1px dotted #000000; 
  color: #333333; 
  outline: none;
  cursor: crosshair;
  text-decoration: none;
  position: relative;
  text-align: left;
  line-height: 120%;
}

/* tooltip content hidden by default */
.tooltip7 span {
  margin-left: -999em; 
  position: absolute;
}

/* show tooltip on hover (desktop) or focus (mobile tap) */
.tooltip7:hover span,
.tooltip7:focus span {
  border-radius: 5px; 
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); 
  font-family: Calibri, sans-serif;
  position: absolute;
  left: 50%; 
  transform: translateX(-50%);
  z-index: 99;
  margin-left: 0px; 
}

/* tooltip box style */
.tip7 {
  background: #F2F2EF; 
  border: 1px solid #cccccc;
  padding: 1em 1rem; 
  font-family: Calibri, sans-serif; 
  font-size: 0.8rem; 
  line-height: 1.1rem;
  color: #333333;
  min-width: 320px;
  text-align: center;
  white-space: normal;
  max-width: 120vw;   /* prevent overflow on narrow screens */
  box-sizing: border-box;
}

/* Default: show above */
.tooltip7:hover span,
.tooltip7:focus span {
  bottom: 125%;   /* position above trigger */
}

/* On small screens: show below and resize */
@media (max-height: 500px), (max-width: 480px) {
  .tooltip7:hover span,
  .tooltip7:focus span {
    top: 125%;    /* position below trigger */
    bottom: auto; /* reset above */
    }

  .tip7 {
    font-size: 0.7rem;
    line-height: 1rem;
    padding: 0.8em 0.8rem;
    width: auto;       /* allow flexible sizing */
    max-width: 100vw;   /* fit within viewport */
    }
}

        /* =========== Nav ============= */

        .topnav {
            overflow: hidden;
            /* background-color: #333; */
        }

        .topnav a {
            /* float: right; */
            display: block;
            /* color: #f2f2f2; */
            text-align: center;
            /* padding: 0 4px; */
            text-decoration: none;
            font-size: 17px;
        }

        .active {
            background-color: green;
            color: white;
        }

        .topnav .icon {
            display: none;
        }

        /* SERVICES  */
        .topnav a:hover,
        .dropdown:hover .dropbtn {
            /* background-color: #555; */
            color: lightblue;
        }

        .dropdown {
            /* float: left; */
            overflow: visible;
        }

        .dropdown .dropbtn {
            font-size: 17px;
            border: none;
            outline: none;
            color: yellow;
            padding: 0 16px;
            background-color: blue;
            font-family: inherit;
            margin: 0;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            /* background-color: brown; */
            background-color: #ee5a24;
            /* min-width: 160px; */
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 4;
            margin: 0px -4px;
        }

        .dropdown-content a {
            float: none;
            color: white;
            padding: 10px 12px;
            text-decoration: none;
            display: block;
            text-align: left;
            font-size: 14px;
        }

        .dropdown-content a:hover {
            /* background-color: #ddd; */
            background-color: white;
            color: #ee5a24;
        }

        .dropdown-content a:active {
            font-weight: bold;
            font-size: 110%;
            background-color: white;
            color: #ee5a24;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .topnav.responsive .dropdown {
            float: none;
        }

        .topnav.responsive .dropdown-content {
            position: relative;
        }

        .topnav.responsive .dropdown .dropbtn {
            display: block;
            width: 100%;
            text-align: left;
        }

        /* .div.backtop {
            background-color: silver;
            position: fixed;
            right: 0px;
            bottom: 20px;
            z-index: 0;
            width: 100px;
            padding-left: 5px;
            margin: 5px;
        } */

        tbacktop1 {
            font-size: 80%;
            color: #fff;
            text-align: right;
            /* padding: 4px; */
            padding: 6px 4px 1px 4px;
            border-radius: 10%;
            background-color: #ee5a24;
            position: fixed;
            top: 0px;
            right: 190px;
            z-index: 2;
            width: 25px;
            height: 25px;
            margin-top: 10px;
            margin-right: 20px;
        }

        tbacktop2 {
            font-size: 110%;
            text-align: center;
            padding: 7px 4px 1px 4px;
            border-radius: 10%;
            background-color: #ee5a24;
            position: fixed;
            top: 0px;
            right: 140px;
            z-index: 3;
            width: 25px;
            height: 25px;
            margin-top: 10px;
            margin-right: 10px;
        }

        tbacktop3 {
            font-size: 80%;
            text-align: center;
            padding: 5px 4px 1px 4px;
            border-radius: 10%;
            background-color: #ee5a24;
            position: fixed;
            top: 0px;
            right: 90px;
            z-index: 2;
            width: 25px;
            height: 25px;
            /*    padding-left: 4px; */
            margin-top: 10px;
            margin-right: 0px;
        }

        tbacktop4 {
            font-size: 80%;
            text-align: center;
            padding: 5px 4px 1px 4px;
            border-radius: 10%;
            background-color: #ee5a24;
            position: fixed;
            top: 0px;
            right: 30px;
            z-index: 2;
            width: 25px;
            height: 25px;
            /*    padding-left: 4px; */
            margin-top: 10px;
            margin-right: 0px;
        }

        .filter-white {
            filter: invert(100%);
        }

        backtop1 {
            font-size: 80%;
            color: #fff;
            text-align: right;
            padding: 4px;
            border-radius: 10%;
            background-color: silver;
            position: fixed;
            left: 0px;
            bottom: 60px;
            z-index: 1;
            width: 25px;
            height: 25px;
            margin-bottom: 95px;
        }

        backtop2 {
            font-size: 110%;
            text-align: center;
            padding: 6px 4px 1px 4px;
            border-radius: 10%;
            background-color: silver;
            position: fixed;
            left: 0px;
            bottom: 35px;
            z-index: 1;
            width: 25px;
            height: 25px;
            margin-bottom: 70px;
        }

        backtop3 {
            font-size: 80%;
            text-align: center;
            padding: 6px 4px 1px 4px;
            border-radius: 10%;
            background-color: silver;
            position: fixed;
            left: 0px;
            bottom: 10px;
            z-index: 1;
            width: 25px;
            height: 25px;
            /*    padding-left: 4px; */
            margin-bottom: 45px;
        }

        /* OLD NAV */
        /* .div.backtop {
            background-color: silver;
            position: fixed;
            right: 0px;
            bottom: 20px;
            z-index: 0;
            width: 80px;
            padding-left: 5px;
            margin: 5px;
        }

        backtop1 {
            font-size: 80%;
            color: #fff;
            text-align: right;
            padding: 4px;
            border-radius: 10%;
            background-color: silver;
            position: fixed;
            left: 0px;
            bottom: 60px;
            z-index: 1;
            width: 25px;
            height: 25px;
            margin-bottom: 45px;
        }

        backtop2 {
            font-size: 110%;
            text-align: center;
            padding: 6px 4px 1px 4px;
            border-radius: 10%;
            background-color: silver;
            position: fixed;
            left: 0px;
            bottom: 35px;
            z-index: 1;
            width: 25px;
            height: 25px;
            margin-bottom: 30px;
        }

        backtop3 {
            font-size: 80%;
            text-align: center;
            padding: 6px 4px 1px 4px;
            border-radius: 10%;
            background-color: silver;
            position: fixed;
            left: 0px;
            bottom: 10px;
            z-index: 1;
            width: 25px;
            height: 25px;
            padding-left: 4px;
        } */

        /* backtopT1 {
            font-size: 80%;
            color: #fff;
            text-align: right;
            padding: 4px;
            border-radius: 10%;
            background-color: #ee5a24;
            position: fixed;
            top: 0px;
            right: 110px;
            z-index: 0;
            width: 25px;
            height: 25px;
            margin-top: 10px;
        }

        backtopT2 {
            font-size: 110%;
            text-align: center;
            padding: 6px 4px 1px 4px;
            border-radius: 10%;
            background-color: #ee5a24;
            position: fixed;
            top: 0px;
            right: 70px;
            z-index: 0;
            width: 25px;
            height: 25px;
            margin-top: 10px;
        }

        backtopT3 {
            font-size: 80%;
            text-align: center;
            padding: 6px 4px 1px 4px;
            border-radius: 10%;
            background-color: #ee5a24;
            position: fixed;
            top: 0px;
            right: 30px;
            z-index: 0;
            width: 25px;
            height: 25px;
            /*    padding-left: 4px;
            margin-top: 10px;
        } */

        #treatments p{
            text-align: left;
        }
        /* =========== Slideshow reviews============= */
        /* Slideshow container */
        .slideshow-container {
            position: relative;
            margin-top: 0px;
            margin-bottom: 30px;
            padding: 5px 0 10px 0;
            /* background-color: #ee5a245d; */
            /*   height: 160px;*/
            /*  background: #fff; */
        }

        /* Slides */
        .mySlides {
            display: block;
            padding: 10px 30px -10px 30px;
            text-align: center;
            margin: 0 20px -20px 20px;
            /* border: 1px solid red; */
        }

        /* Next & previous buttons */
        .prev {
            cursor: pointer;
            position: absolute;
            left: 0;
            top: 50%;
            width: auto;
            margin-top: -10px;
            padding: 1px;
            color: #ccc;
            font-weight: bold;
            font-size: 20px;
            border-radius: 0 3px 3px 0;
            user-select: none;
        }

        /* Position the "next button" to the right */
        .next {
            cursor: pointer;
            position: absolute;
            right: 0;
            top: 50%;
            width: auto;
            margin-top: -10px;
            padding: 1px;
            color: #ee5a24;
            opacity: 0.6;
            font-weight: bold;
            font-size: 20px;
            border-radius: 0 3px 3px 0;
            user-select: none;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover,
        .next:hover {
            background-color: rgba(255, 120, 0, 0.4);
            color: white;
        }

        /* The dot/bullet/indicator container */
        .dot-container {
            text-align: center;
            padding: 10px;
            margin-top: 0px;
            margin-bottom: 30px;
            border-top: 1px solid;
            border-color: #ccc;
            /*    background: #ee5a24; */
        }

        /* The dots/bullets/indicators */
        .dot {
            cursor: pointer;
            height: 10px;
            width: 10px;
            margin: 0 20px;
            background-color: #ccc;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        /* Add a background color to the active dot/circle */
        .active,
        .dot:hover {
            background-color: #ee5a24;
            opacity: 0.6;
        }

        /* Add an italic font style to all quotes */
        q {
            font-style: italic;
            color: #000;
            line-height: 130%;
        }

        /* Add a color to the author */
        .author {
            color: Grey !important;
            font-size: 90% !important;
            text-align: center !important;
            text-decoration: none;
            margin-top: 5px;
        }

        .author-a {
            text-decoration: underline !important;
            font-weight: bolder;
            color: #ee5a24 !important;
        }

        .stars {
            color: #ee5a24;
            text-align: center !important;
            margin-bottom: 10px;
            font-size: 1.6em;
        }

        .bx {
            position: relative;
            border-style: solid;
            border-radius: 10px;
            border-width: 2px;
            border-color: #ccc;
            padding: 12px 20px;
            font-size: 16px;
            cursor: pointer;
            /* color: Silver;*/
            width: 80%;
            margin-left: 5%;
            margin-top: 30px;
        }

        .disc-bx {
            width: 90px;
            font-size: 20px;
            font-weight: 600;
            padding: 5px;
            position: absolute;
            left: -20px;
            top: -12px;
            text-align: center;
            border-radius: 10px;
            transform: rotate(-20deg);
            background-color: #ee5a24;
            color: white;
            box-shadow: #ce8d50 5px 5px 10px 0px;
        }

        #blink_text {
            animation-name: blink;
            width: 280px;
            animation-duration: 5s;
            animation-timing-function: ease-in;
            animation-iteration-count: Infinite;
        }

        @keyframes blink {
            60% {
                color: #FFFFE0;
            }

            40% {
                color: #f9c9b0;
            }

            100% {
                color: yellow;
            }
        }

            img.discount-but{
                /* position: fixed; */
                /* display: inline-block; */
                transform: rotate(40deg);
                right:8%;
                /* left: 80%; */
                /* padding-top:180px; */
                /* margin-bottom: -50px; */
                z-index: 1;
                /* float: right; */
                position: absolute;
                top: 25%;
                /* padding-right: 10px; */
                /* z-index: 2; */
                width: 120px;
                height: auto;
                /*    padding-left: 4px; */
                /* margin-top: 150px; */
                /* margin-right: 10px; */
                }
                
                img.discount-but2{
                    /* position: fixed; */
                    /* display: inline-block; */
                    transform: rotate(-15deg);
                    left:10px;
                    /* padding-top:180px; */
                    /* margin-bottom: -50px; */
                    z-index: 100;
                    /* float: right; */
                    position: absolute;
                    top: 190px;
                    /* padding-right: 10px; */
                    /* z-index: 2; */
                    width: 80px;
                    height: auto;
                    /*    padding-left: 4px; */
                    /* margin-top: 150px; */
                    /* margin-right: 10px; */
                    }
    
             .circle{
                        border-radius: 50%;
                        border: 0px solid silver;
                        color: white;
                        font-size: 10px !important;
                        background-color: #ee5a24;
                        height: 230px;
                        width: 230px;
                        text-align: center; 
                        padding:10px;  
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        float: right;
                        margin: 0px -5px 5px 5px;
                        transform: rotate(15deg);
                        overflow-wrap: normal;
             }
                    #terms h5 {
                        text-align: left;
                        margin: 0 1rem;
                    }            
                    .responsive {
            width: 100px;
              max-width: 40%;
              height: auto;
            }

/* ============ TREATMENTS SECTION =============== */

.treatment-grid {
    /* box-sizing: border-box;
  display: grid;
  grid-template-areas:
    'introd introd introd introd introd introd introd introd introd'
    'name name name name name name time price book'
    'description description description description description description description description description'; */
  /* gap: 1px;  */
  /* background-color: rgba(237, 235, 232, 0.93); */
  /* padding: 10px; */
  margin: auto;
  width: auto;
  font-size: 90%;
  /* border: pink solid 1px; */
}

/* .treatment-grid > div {
padding: 10px;
font-size: inherit;
   width: auto;
} */

.colour > div{
  background-color: rgba(224, 222, 220, 0.93);
  padding-left: 10px;
  padding-bottom: 0.2rem;
  /* margin-bottom: 10px; */
 /* display: block; */
}
.colour-clear > div{
    background-color: #f1f1f1;
    padding-left: 10px;
    margin-top: -20px;
    margin-bottom: -0px;
    padding-bottom: 0.2rem;
   /* display: block; */
  }

.treatintro {
  /* grid-area: introd; */
 /* background-color: white; */
  text-align: left;
  /* font-weight: bold; */
  color: black;
  padding-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
  float: none;
}

.treatintro > p {
  margin-bottom: 1px;
}

.treatname {
  /* grid-area: name; */
  /* box-sizing: content-box; */
    /* border: green solid 1px; */
    float: left;
    width: 50%;
  }

  .treatname > span {
    /* grid-area: name; */
    /* box-sizing: content-box; */
      /* border: green solid 1px; */
      float: left;
      width: 50%;
    }  

.treatname > h3 {
  font-size: inherit;
  text-align: left;
  margin-bottom: 0px;
  margin-top: 0 !important;
  /* width: 40%; */
    /* border: 1px solid #eeb02a; */
    /* box-sizing: content-box; */
}
    
.treattime {
  /* grid-area: time; */
  margin-top: 0;
  /* border: blue solid 1px; */
  font-style: italic;
  padding-right: 10px;
  float: left;
  width: 20%;
}

.treatprice {
  /* grid-area: price; */
  /* border: 1px solid #0099cc; */
  /* background-color: lightyellow; */
  /* padding: 0; */
  /* vertical-align: middle; */
  margin-top: 0;
  color: #000000;
  float: left;
  width: 15%;
}

.treatbook {
  /* grid-area: book; */
  /* border: 1px solid #0099cc; */
  /* background-color: white; */
  /* padding: 0; */
  /* text-align: right; */
  color: #999;
  vertical-align: middle !important;
  width: auto;
  float: inline-start;
  margin-left: 1.5rem;
}
.treatbook > div {
  vertical-align: middle !important;
}

.treatdescrip {
  /* grid-area: description; */
  /* border: 1px solid #0099cc; */
  /* background-color: #fff; */
  color: #000;
  text-align: left;
  /* margin-top: 5px; */
  margin-bottom: 0;
  padding-bottom: 0;
  /* padding-right: 20px; */
  float: left;
  width: 100%;
}
.treatdescrip p {
    /* padding-bottom: 5px; */
    padding-right: 20%;
    padding-left: 2px;
    margin-top: 0.1rem;
    /* background-color: yellow; */
    float: none;
  }

        book {
            color: white;
            background-color: rgb(245, 103, 9);
            border-radius: 4px;
            padding-left: 8px;
            padding-right: 8px;
            padding-bottom: 3px;
            padding-top: 2px;
            font-size: 95%;
            vertical-align: text-bottom;
        }
        book :visited {
            color: white;
        }

        book1 {
            color: #fff !important;
            font-weight: bold;
            font-size: 90%;
            background-color: #ee5a24;
            border-radius: 4px;
            border: 1px solid #ee5a24;
            /* line-height: 35px; */
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 0px;
            padding-bottom: 1px;
            margin-top: 0px;
            display: inline-flex;
            white-space: nowrap;
        }

        /* outline button */
        book2 {
            color: #ee5a24 !important;
            font-weight: bold;
            font-size: 90%;
            background-color: transparent;
            border-radius: 4px;
            border: 2px solid #ee5a24;
            /* line-height: 35px; */
            padding-left: 9px;
            padding-right: 9px;
            padding-top: 0px;
            padding-bottom: 1px;
            margin-top: 0px;
            display: inline-flex;
            white-space: nowrap;
        }

        /* =================== CHATGPT TEXT ===================== */
        
        .description {
            margin-bottom: 30px;
            font-size: 95%;
            line-height: 1.6;
          }
      
          .service-card {
            background: #fff;
            /* border: silver solid 2px; */
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            padding: 15px 16px 20px 16px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
            flex-wrap: wrap;
            text-align: left;
          }
      
          .service-info {
            flex: 1;
            /* min-width: 650px; */
                        /* background: yellow; */
            min-width: 75%;

          }
      
          .service-header  h3{
            background: #e0e0e0;
            padding: 4px 10px;
            border-radius: 4px;
            display: flexbox;
            justify-content: space-between;
            align-items: baseline;
            font-weight: bold;
            font-size: 16px;
            min-width: 100px;
            max-width: 100%;
            /* color: #3bf40d; */
            margin-top: 0;
          }
      
          .service-header em {
            font-weight: normal;
            font-style: italic;
            font-size: 14px;
            text-align: center;
          }

          .service-mins {
            align-self:stretch;
            display: inline;
            float: right;
            font-style: italic;
            font-weight: normal;
          }
      
          .service-description {
            font-size: 15px;
            margin-top: 6px;
            margin-bottom: 0;
            text-align: left !important;
            /* line-height: 1.3em; */
          }
      
          .service-price {
            background: #e0e0e0;
            display: inline-block;
            padding: 4px 10px;
            border-radius: 4px;
            font-weight: bold;
            font-size: 15px;
            /* margin-bottom: 10px; */
          }
      
          .book-button {
            background-color: #ee5a24;
            color: white;
            border: none;
            padding: 6px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bolder;
            font-size: 16px;
            line-height: 1em;
          }
          
          .book-button:hover {
            background-color: #aa3d07;
          }
          .book-button:link {
            color: #fff;
          }

          .service-pick {
            flex: 1;
            min-width: 200px;
            display: flex;
            justify-content: space-between;

          }

      
          /* Responsive Design */
          @media (max-width: 400px) {
            .service-card {
              flex-direction: column;
              align-items: stretch;
            }
      
            /* .service-price,
            .book-button {
              display: block;
              width: fit-content;
              margin-top: 1px;
              padding-top: 6px;
            } */
          }
      
        .comingsoon {
            opacity: 0.3;
            min-width: 65%;
            min-height: 65%;
            max-width: 70%;
            max-height: 70%;
            background-color: #FFFFff;
            border: rgba(192, 192, 192, 0.094) solid 2px;
            border-radius: 8px;
            box-shadow: 0 6px 10px rgba(0,0,0,0.2);
            padding: 10px 16px 15px 16px;
            margin-top: 15px;
        }
        /* service banner */

        .flex-servicesbanner {
            background-color: #ee5a24;
            opacity: 0.6;
            display: flex;
            flex-direction: row;
            justify-content:space-evenly;
            flex-wrap: wrap;
            padding: 10px 30px;
            font-weight: lighter;
            font-size: 90%;
            color: white;
            font-family: 'Raleway', sans-serif;
            gap: 10px 0;
            margin-bottom: 40px;
            margin-top: 0px;
            

            /* Make it span the full viewport width */
            position:inherit;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            width: 100%;
            max-width: 100%;
        }
    
        .flex-servicesbanner a {
            color: white;
            text-decoration: none;
        }
        .flex-servicesbanner a:hover {
        /* text-decoration: underline; */
        opacity: 1;
        color: #fff;
        font-weight: 800;
        font-size: 110%;
        }
        /* .flex-servicesbanner div {
            padding: 5px 10px;
        } */

#flex-servicebanner a:link { color: #fff; }
#flex-servicebanner a:visited { color: #fff; }
#flex-servicebanner a:hover { color: yellow; }
#flex-servicebanner a:active { color: #fff; }

        backtop-tab {
            /*font-size: 80%;*/
            /*color: #fff;*/
            /*text-align: right;*/
            /*padding: 4px;*/
            /*border-radius: 10%;*/
            /*background-color: silver;*/
            position: fixed;
            left: 0px;
            bottom: 95px;
            z-index: 1;
            /*width: 25px;*/
            /*height: 25px;*/
            margin-bottom: 180px;
        }