/*
 Theme Name:   health&wellness
 Theme URI:    https://health-wellness-websites.com/
 Description:  WP Bootstrap Starter Child Theme
 Author:       Paul Jansen
 Author URI:   http://paul-jansen.co.uk
 Template:     wp-bootstrap-starter
 Version:      1.0.0
*/
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital@1&?family=League+Spartan:wght@500&family=Manrope:wght@400..800&family=Sanchez&display=swap');

/*--------------------------------------------------------------
# Global
--------------------------------------------------------------*/
:root {
  --text: 69, 68, 68;
  --highlight: 153, 132, 104;
}

html {
  overflow-x: hidden;
}

body {
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  font-size: 1.1em;
  color: var(--text);
  min-height: 100vh;
  background: rgb(48, 90, 163);
  background: #fff;
  background: linear-gradient(70deg, rgba(213, 207, 198, 0.1) 50%, rgba(213, 207, 198, 1) 70%);
  overflow-x: hidden;
}

strong {
  font-weight: 600;
}

a,
a:hover {
  color: var(--highlight);
}

a.underline {
  text-decoration: underline;
}

a.underline:hover {
  text-decoration: none;
}

@media (min-width: 576px) {
  .container {
    max-width: none;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: none;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: none;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1410px;
  }
}

/*--------------------------------------------------------------
# Header & Navigation
--------------------------------------------------------------*/
.navbar-brand {
  max-width: 250px;
}

.navbar-brand img {
  width: 100%;
}

.navbar-light .navbar-nav .nav-link {
  color: #000;
}

.navbar-light .navbar-nav .button a.nav-link {
  font-weight: 500;
  background: rgb(var(--highlight));
  color: #FFF;
  margin-left: 20px;
  padding: .5em 1em;
  text-transform: uppercase;
  transition: .25s;
}

.navbar-light .navbar-nav .button a.nav-link:hover {
  background: rgba(var(--highlight), .75);
  color: var(--highlight);
  transition: .25s;
}

.navbar-light .navbar-toggler:focus {
  outline: none;
  border: 0;
}

@media (max-width: 1200px) {
  .navbar-brand {
    max-width: 200px;
  }

  .navbar-brand img {
    width: 100%;
  }
}

@media (max-width: 991px) {
  .navbar-nav li {
    text-align: center;
  }

  .navbar-light .navbar-nav .button a.nav-link {
    width: max-content;
    margin: 0 auto;
  }
}

@media (max-width: 576px) {
  .navbar-light .navbar-nav .button a.nav-link {
    font-size: .9em;
    margin-top: 10px;
  }

  .navbar-brand {
    width: 50%;
  }
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1,
h2,
h3 {
  font-family: "Sanchez", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 2.5em;
}

h2 {
  font-size: 2.25em;
}

h3 {
  font-size: 1.5em;
}

@media (max-width: 1024px) {

  /* h1{
    font-size: 2.5em;
  } */
  h2 {
    font-size: 1.8em;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.5em;
  }

  h3,
  h4 {
    font-size: 1.25em;
  }
}

/* @media (max-width: 430px){
  h1{
    font-size: 1.5em;
  }
  h2{
    font-size: 1.3em;
  }
} */
/*--------------------------------------------------------------
# Home
--------------------------------------------------------------*/
.intro h1 {
  width: 90%;
  max-width: 750px;
  margin: 0 auto;
}

.intro p {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.25em;
  margin-top: 1.75rem;
}

body.page-template-template-templates .intro p {
  max-width: 780px;
}

.intro strong {
  margin-top: 50px;
  max-width: 600px;
  display: block;
  margin: 0 auto;
}

img.home-showcase {
  width: 100%;
  max-width: 1200px;
}

.mouse {
  display: none;
}

#themes-in-use {
  background: rgba(var(--highlight), .75);
}

.testimonial {
  width: 70%;
  float: left;
  padding: 30px 0 10px 0;
  position: relative;
  color: #FFF;
}

.testimonial blockquote {
  padding: 0 110px;
  font-size: 1.2em;
}

.testimonial blockquote strong {
  font-size: 1.4em;
  font-family: "Hanken Grotesk", sans-serif;
  display: block;
  margin-bottom: 20px;
  line-height: 1.25;
}

.testimonial blockquote::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 10px;
  width: 87px;
  height: 71px;
  background-size: 87px !important;
  background: url('https://www.health-wellness-websites.com/wp-content/uploads/2024/04/left-quote.svg') no-repeat;
}

.testimonial blockquote::after {
  content: '';
  position: absolute;
  bottom: 15px;
  right: 10px;
  width: 87px;
  height: 71px;
  background-size: 87px !important;
  background: url('https://www.health-wellness-websites.com/wp-content/uploads/2024/04/right-quote.svg') no-repeat;
}

.testimonial-img {
  width: 30%;
  float: left;
  text-align: center;
}

.testimonial-img img {
  border-radius: 50%;
  border: 10px solid rgba(var(--text), 0.1);
  ;
  width: 90%;
  max-width: 200px;
}

.carousel-indicators {
  bottom: -70px;
}

.carousel-control-next,
.carousel-control-prev {
  bottom: 60px;
  align-items: end;
}

.testimonial-person {
  margin-top: 25px;
  color: #FFF;
}

.testimonial-person h3 {
  font-size: 1.5em;
}

.cta {
  font-weight: 500;
  background: rgb(var(--highlight));
  color: #FFF;
  display: inline-block;
  padding: .5em 1em;
  text-transform: uppercase;
  transition: .25s;
}

.cta.grey {
  background: rgb(170, 166, 148);
}

.cta:hover {
  text-decoration: none;
  background: rgba(var(--highlight), .75);
  color: var(--highlight);
  transition: .25s;
  cursor: pointer;
}

.testimonial-person .cta,
.testimonial-person .cta:hover {
  text-decoration: none;
  background: rgba(var(--text), .75);
  color: #FFF;
}

#how-it-works h3 {
  font-size: 1.5rem;
  line-height: 1.5;
  margin-bottom: 10px;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
}

#how-it-works .small a {
  color: var(--highlight);
  text-decoration: underline;
}

#how-it-works h3 strong {
  font-weight: 800;
}

span.price {
  padding: 5px 10px;
  background: var(--highlight);
  font-weight: 500;
  color: #FFF;
}

.scrolling-card {
  /* background: #e7ecf4; */
  background: rgba(170, 166, 148, 0.2);
  border-radius: 10px;
  outline: 15px solid rgba(255, 255, 255, .1);
  /* position: absolute; */
  /* left: 0; */
}

.card {
  border: 0;
}

.card li {
  line-height: 1.2;
  margin-bottom: 10px;
}

.card-header {
  /* background: rgba(var(--text), .5); */
  background: rgb(170, 166, 148);
  color: #FFF;
  border-bottom: none;
}

.card-footer {
  background: none;
  border-top: none;
}

#clients {
  background: rgba(var(--text), .75);
}

#clients h2 {
  color: #FFF;
}

#clients img {
  width: 100%;
  max-width: 200px;
}

#themes-in-use .scrolling-card {
  margin: 10px;
  width: 100%;
  background: rgba(255, 255, 255, .7);
}

#themes-in-use .card li.list-group-item {
  background: transparent url('images/accept.png') 0px 12px no-repeat;
  background-size: 24px;
  border: 0;
  padding-left: 35px;
  margin-bottom: 0;
}

#themes-in-use .card li.list-group-item strong {
  font-weight: 800;
}

#themes-in-use .card li.list-group-item:last-child {
  padding-bottom: 4px;
}

@media (min-width: 992px) {
  .home-intro {
    height: calc(100vh - 145px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .home-intro h1 {
    margin-bottom: 20px;
  }

  /* .scrolling-cards-container{
    height: 100vh;
  } */
  .mouse {
    display: block;
    position: absolute;
    bottom: 0px;
  }

  .mouse-new {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 100%;
  }

}

@media (max-width: 820px) {

  .testimonial,
  .testimonial-img {
    width: 100%;
  }

  .testimonial-img img {
    border: 5px solid #FFF;
    max-width: 300px;
  }

  .testimonial blockquote {
    padding: 0 20px;
    font-size: 1.1em;
  }

  .testimonial blockquote strong {
    font-size: 1.2em;
  }

  .testimonial blockquote::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0px;
    width: 40px;
    height: 33px;
    background-size: 40px !important;
    background: url('https://www.health-wellness-websites.com/wp-content/uploads/2024/04/left-quote.svg') no-repeat;
  }

  .testimonial blockquote::after {
    content: '';
    position: absolute;
    bottom: 0px;
    right: 10px;
    width: 40px;
    height: 33px;
    background-size: 40px !important;
    background: url('https://www.health-wellness-websites.com/wp-content/uploads/2024/04/right-quote.svg') no-repeat;
  }

  .testimonial-img {
    margin: 30px 0;
  }
}

@media (max-width: 768px) {
  #how-it-works h3 {
    font-size: 1.4rem;
  }
}

@media (max-width: 430px) {

  .home-intro p,
  .home-intro-new p {
    font-size: 1.15em;
  }
}

/*--------------------------------------------------------------
# Templates
--------------------------------------------------------------*/
.w-1100 {
  max-width: 1100px;
}

.template-thumb {
  /* background: rgba(255, 255, 255, .5); */
  background: rgba(170, 166, 148, 0.2);
  border-radius: 10px;
  padding: 30px;
}

.about {
  background: #d0ccc3;
  margin-top: -200px;
}

/*--------------------------------------------------------------
# Template features
--------------------------------------------------------------*/
#template-features {
  /* background: rgba(var(--highlight), .75); */
  background: rgba(170, 166, 148, 0.2);
}

/* #template-features .carousel-control-next, #template-features .carousel-control-prev{
  align-items: center;
  height: 100%;
  width: 50px;
} */
#template-features img {
  width: 100%;
}

/* #template-features .carousel-indicators{
  bottom: -40px;
} */
#template-features img {
  border-radius: 5px;
  margin: 0 auto;
  width: 90%;
  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.5));
}

#template-features ul {
  padding-left: 20px;
  margin-bottom: 0;
}

#template-features ul li:not(:last-child) {
  margin-bottom: 5px;
}

#template-features .divider {
  height: 3px;
  background: rgb(var(--highlight));
  background: rgba(255, 255, 255, .5);
}

@media (max-width: 768px) {
  .carousel-control-prev {
    left: -30px;
  }

  .carousel-control-next {
    right: -30px;
  }
}

/*--------------------------------------------------------------
# Template Editing Guide
--------------------------------------------------------------*/
#template-editing-guide .card-header {
  background: transparent;
}

#template-editing-guide .card {
  margin-bottom: 40px;
  /* background: #e7ecf4; */
  background: rgba(170, 166, 148, 0.2);
  border-radius: 10px;
  outline: 15px solid rgba(var(--highlight), .25);
}

#template-editing-guide .card h4 {
  font-family: "Sanchez", serif;
  font-weight: 500;
  font-style: normal;
  color: var(--text);
}
#template-editing-guide .card h4 .btn{
  font-size: 1.5rem;
  padding: 0;
}
#template-editing-guide .card h4 .btn:focus{
  box-shadow: none;
}
#template-editing-guide .card h5{
  font-weight: 600;
}
#template-editing-guide .card ul {
    padding-left: 20px;
}
.card-body img{
  border-radius: 5px;
  width: 90%;
  margin: 0 auto;
  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.5));
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.cky-show-desc-btn {
  color: #998468 !important;
}

.site-footer a {
  color: var(--text);
}

.site-footer a.cta {
  color: #FFF;
}

.site-footer a.cta:hover {
  color: var(--text);
}

@media (min-width: 576px) {
  #menu-footer-menu {
    flex-direction: row !important;
    justify-content: center;
  }

  #menu-footer-menu li {
    position: relative;
  }

  #menu-footer-menu li::after {
    content: "|";
    position: absolute;
    right: 0;
    top: 9px;
  }

  #menu-footer-menu li:last-child:after {
    content: "";
  }

  #menu-footer-menu li .nav-link:hover {
    text-decoration: underline;
  }
}