/********* Hero *********/
#hero {
  width: 100%;
  height: 37vh;
  overflow: hidden;
  position: relative;
}

#hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;

  background-image: url("/resource/img/relax.jpg");
  background-color: #d9dcdf;
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
/********* End Hero *********/


/********* Main Elements *********/

html {
  background-color: #f8f9fa;
}

body {
  background-color: white;
}

header {
  background-color: #ececec;
}

main {
  background-color: white;
}

footer {
  background-color: #f8f9fa;
  /* margin-top: 3rem !important; /* Same as BS5 mt-5 */
}


/********* End Main Elements *********/






/* Site colours */

#about-me, #contact {
  background-color: #ecffff;
}

#clinical-hypnotherapy, #faq, footer {
   
   background-color: lightcyan;
}


/* .modal-content {
  background-color: #ecffff;
} */

#maincontact {
  /* background-color: #81cff4; */
  /* background-color: #d3eaea; */
  /* background-color:  #c0dabc; */

  background-color: #A9D6E5;
}


.modal-content {
  background-color: #d4eaf2;
}

/* #0d7be3 */


/********* Site copy *********/


.faq-head {
  font-weight: 600 !important;
}

.policyheader {
  font-weight: 700 !important;
}

section.copy {
  margin-top: 3rem !important; /* Same as BS5 mt-5 */
  /*padding: 3rem !important; /* Same as BS5   .p-5 */
  padding-top: 0.25rem !important;
  padding-bottom: 2rem !important;
  padding-right: 3rem !important;
  padding-left: 3rem !important;
  border-radius: var(--bs-border-radius-xl) !important; /* Same as BS5 rounded-4 */
}

div.intro {
  /* background-color: rgb(181, 11, 11); */
  text-align: left !important;
  margin-top: 1rem !important;     
  margin-bottom: 1.5rem !important; 
}


#faq {
  background-color: lightcyan;
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 15%; /* Resize the background image to cover the entire container */
  /* opacity: 0.5; */
}


.session-prices {
  text-indent: 3rem;
}

#review-list {
  /* background-color: rgb(192, 180, 204); */
  /* background-color: #F1FFFF; */
  /* background-color: #86FFFF; */
  background-color:  #F6FFFF;
  /* border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; */
  /* padding-top: 1rem !important;    /* .py-3 */
  /* padding-bottom: 1rem !important; /* .py-3 */
  border-radius: var(--bs-border-radius) !important; /* .rounded-2 */
}

/* <a href="https://www.flaticon.com/free-icons/quote" title="quote icons">Quote icons created by Icon Mela - Flaticon</a> */

.review-item {
background-color:  #F6FFFF;
font-style: italic !important;
/* border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; .border */
  /* margin: 0.25rem !important; /* .m-1 */
  /* margin: 0.5rem !important;  /* .m-2 */
  /* margin: 1rem !important;    /* .m-3 */
  /* margin: 1.5rem !important;  /* .m-4 */
  /* margin-left: 3rem !important;    /* .m?-5 */
  /* margin-right: 3rem !important;    /* .m?-5 */
  /* padding: 1rem !important; as BS5 p-2 */
   padding-right: 3.1rem !important; /* .px-n */
  padding-left: 3.5rem !important;  /* .px-n */
  padding-top: 1.5rem !important;    /* .py-2 */
  padding-bottom: 2rem !important; /* .py-2 */
}

.review-text {
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; /* .border-bottom */
}

/* .review-first::before {
  content: """
} */

/* .review-last::after {
} */


.reviewer-name {
  font-weight: 700 !important; /* as BS5 fw-bold */
  padding-top: 0.5rem !important;    /* .pt-1 */
  padding-bottom: 1rem !important; /* .pb-2 */
}


.message-error {
  /* display: none; */
  width: 100%;
  margin-top: 0.5rem;
  font-size: 1.2em;
  font-weight: 600 !important;
  color: red;
}

.message-ok  {
  /* display: none; */
  width: 100%;
  margin-top: 0.5rem;
  font-size: 1.2em;
  font-weight: 600 !important;
  color: var(--bs-form-valid-color);
}

.message-unsent  {
  visibility: hidden;
  width: 100%;
  margin-top: 0.5rem;
  font-size: 1.2em;
  font-weight: 600 !important;
  color: black;
}  


/********* End Site copy *********/





/********* Service Card **********/

.service-card {
            perspective: 1000px;
            height: 455px;
        }

        .service-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.8s;
            transform-style: preserve-3d;
            cursor: pointer;
        }

        .service-card:hover .service-card-inner {
            transform: rotateY(180deg);
        }

        .service-card-front,
        .service-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 15px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .service-card-front {
            /* background: linear-gradient(45deg, #6366f1, #8b5cf6); */
            /* background: linear-gradient(45deg, #9cb2b2, #6d7c7c); */
            background: linear-gradient(45deg, hsla(99, 76%, 31%, 1) 1%, hsla(165, 98%, 23%, 1) 100%);
            /* background: linear-gradient(45deg, hsla(198, 80%, 46%, 1) 33%, hsla(225, 89%, 47%, 1) 80%); */

            /* #f5ffff #e6ffff */
            /* #9cb2b2 */
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 2rem;
        }

        .service-card-back {
            background: white;
            color: #1f2937;
            transform: rotateY(180deg);
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .icon-wrapper {
            width: 80px;
            height: 80px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
        }

        .feature-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .feature-list li {
            padding: 0.5rem 0;
            border-bottom: 1px solid #e5e7eb;
        }

        .feature-list li:last-child {
            border-bottom: none;
        }

        .hover-lift {
            transition: transform 0.2s;
        }

        .hover-lift:hover {
            transform: translateY(-5px);
        }

/******** END service card *******/