body{
    color: #39464e;
    font-family:'Palatino', serif;
    font-size: 100%;
    animation: fadeInFromNone 1s ease-in-out;
    margin: 0px;
}
root{
  font-family:'Palatino', serif;

}
table{
  font-size:1.5em;
  font-family:'Palatino', serif;
}
p{
  font-size:1.5em;
}
H1{
  font-size: 3em;
}
H2{
  font-size: 2.5em;
}
/* remove hyperlink underling and colour change on buttons */
a{
  color: var(--bs-btn-color); 
  text-decoration: none;
  }
  .row{
    margin-right: calc(0.5 * var(--bs-gutter-x));
    margin-left: calc(0.5 * var(--bs-gutter-x));
}
Spaegie_color{
color: #46487e;  /*Spaegie color*/
}
Massage_therapy_color{
  color: #64c6c4;  /*Massage therapy*/
  }
image_color{
  color:#4f347c;/*image*/
}

/* remove hyperlink underling and colour change on buttons */
a{
color: var(--bs-btn-color); 
text-decoration: none;
}

li {
  font-size: 1.5em;
    margin: 0;

}
.navbar{
  background-color: white;
}


.nav-item-p:after {
  content: ""; /* This is necessary for the pseudo element to work. */ 
  top: 30%;
  display: block;
  position: absolute;
    align-items: center;
    justify-content: center;
  margin: 0 auto; /* This will center the border. */
  height: 40%; /* Change this to whatever width you want. */
  padding-top: 20px; /* This creates some space between the element and the border. */
  border-right-color:#4f347c;
border-right-width: 2px;
border-right-style: solid; 
 /* This creates the border. Replace black with whatever color you want. */
}

.nav-item-b:after {
  content: ""; /* This is necessary for the pseudo element to work. */ 
  top: 30%;
  display: block;
  position: absolute;
    align-items: center;
    justify-content: center;
  margin: 0 auto; /* This will center the border. */
  height: 40%; /* Change this to whatever width you want. */
  padding-top: 20px; /* This creates some space between the element and the border. */
  border-right-color:#64c6c4;
border-right-width: 2px;
border-right-style: solid; 
 /* This creates the border. Replace black with whatever color you want. */
}

main{
  margin-top: 72pt;
}


.website-logo {
  width: 120px;
  height: 120px;
}
.website-logo img {
  width: 100%;
}

.tab{
  margin: 16px;
}
.website-cover-image {
  width: 100%;
  max-width: 1080px;
  /* position: relative;
  z-index: 0;
  display:inline-block; */
  margin: 3px 5% 10px 5%  ;
}

.book_Now{
  background-size: 162px 40px;
  background-color:#64c6c4;
  width: 162px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px;
  font-family:'Palatino', serif;
  border-radius: .5em;
  border-color: #64c6c4;
  font-weight: bold;

}

.book_Now:hover{
  animation: backgroundIMG 1s  ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes backgroundIMG {
  100% { 
    background-color:#46487e;
    border-color:#46487e;
   }
}

.bottom-section{
  background-color: #64c6c4;

  height: 100px;
  max-width: 100%;
}

/* .container-fluid{
  margin:16px;
} */

  /* Hide the nested list */
  .nested {
    display: none;
    animation: fadeOutFromFull 1s ease-in-out;
    transition-delay: animation 1s;
  }
  
  /* Show the nested list */
  .unnested {
    display: block;
    animation: fadeInFromNone 1s ease-in-out;

  }

.timely-list__item{
  margin: 16px 0px;
  border-style: solid;
  border-color: #4f347c;
  border-radius: .5em;
  padding:1em;
}

.timely-list__item_DEAL{
  margin: 16px 0px;
  border-style: solid;
  border-color: greenyellow;
  border-radius: .7em;
  padding:1em;
}
.timely-list__heading{
  display: flex;

}
#termsconditions h3{
  color: #4f347c;
}
.rightbox {
  display: flex;
  float:right;
  margin-right: 0;
  margin-left: auto;

}

.headshot{
  width: 30%;
}


@keyframes fadeInFromNone {
  0% {
      visibility:hidden;
      opacity: 0;
  }
  1% {
    visibility:visible;
      opacity: 0;
  }
  100% {
    visibility:visible;
      opacity: 1;
  }
}
  @keyframes fadeOutFromFull {
    0% {
        visibility:visible;
        opacity: 1;
    }
    1% {
      visibility:visible;
        opacity: 1;
    }
    100% {
      visibility:hidden;
        opacity: 0;
    }
  }

@keyframes ExpandborderfromTop{
0%{
  height: 0px;
}
  
  100%{
  height:220px
  }
}


  .PageSelection a:hover:not(.active) {background-color: #ddd;}

  .footerimage {
   object-fit: contain;
   height:80px;
   width: 80px;
   margin-top:8px;
  }
  .interest{
    width:10px;
    background-image: linear-gradient(#64c6c4,#46487e);
      height: 0px;
      background-color: #46487e;
    animation: ExpandborderfromTop 1s ease-in;
    animation-fill-mode: forwards;

  }