/* GLOBAL STYLES */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  font-family: "Merriweather Sans", sans-serif;
}

html {
  font-size: 62.5%;
  --h1FontSize: calc(1.75rem + 1vw);
  --h3FontSize: calc(1.5rem + 1vw);
  --navLinkFontSize: calc(1rem + 1vw);
  --navLinkMargin: 2rem;
  --fontColor: #b204fb;
  --darkPink: #9c014f;
  --darkPinkTwo: #b500fd;
  --hoverGreenColor: rgb(22, 143, 18);
  --purple: #4343ad;
  --logo-id-fontsize: calc(2.75rem + 1vw);
  --aestheticFacialColor: #0e54af;
  --needlingColor: var(--fontColor);
  --botoxColor: #de5499;
  --b12Color: #009879;
  --massagesColor: #a00765;
  --facialsColor: rgb(43, 165, 159);
  --waxingColor: rgb(148, 84, 0);
  --threadingColor: var(--darkPink);
  --tintingColor: #5f02e0;
  --handsAndFeetColor: #e2251f;
}

section {
  width: 90%;
  margin: auto;
}

.burger-menu,
.menu-check {
  display: none;
}

h1 {
  font-size: var(--h1FontSize);
  color: black;
}

.logo-header {
  font-family: "Tangerine", cursive;
  font-size: var(--logo-id-fontsize);
}

h2 {
  font-size: var(--logoFontSize);
}

h3 {
  font-family: "Merriweather", serif;
  font-size: var(--h3FontSize);
  font-weight: 700;
}

h1,
h3 {
  margin-top: 3rem;
}

li,
button {
  font-size: var(--navLinkFontSize);
}

button {
  background: none;
  border: none;
}

span {
  font-size: 2rem;
}

/* Nav Bar */

header {
  background-color: var(--purple);
  color: white;
  position: sticky;
  top: 0;
  z-index: 3;
}

nav {
  min-height: 10vh;
  display: flex;
  width: 90%;
  margin: auto;
  align-items: center;
}

nav ul {
  display: flex;
  flex: 2 1 40rem;
  justify-content: flex-end;
  align-items: center;
  text-decoration: none;
  color: white;
}

nav ul li {
  margin-left: var(--navLinkMargin);
  font-size: var(--navLinkFontSize);
  cursor: pointer;
  color: white;
}

button a {
  display: block;
}

a {
  color: white;
  text-decoration: none;
}

nav ul li a:hover {
  color: #212156;
}

/* Main Section */

.main-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#strapline {
  text-align: center;
}

#slogan {
  margin-bottom: 3rem;
  color: var(--darkPinkTwo);
}

.image-container {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 1rem;
}

.abha-image {
  height: 65vh;
}

button {
  width: 30%;
  padding: 0.75rem 1.25rem;
  white-space: nowrap;
  text-align: center;
  border-radius: 2.5rem;
  background: var(--darkPinkTwo);
  color: white;
  cursor: pointer;
  transition: background 0.15s ease-in-out;
}

button a {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  white-space: normal;
}

button:hover {
  background-color: var(--hoverGreenColor);
  color: white;
}

/* Testimonials */

.testimonials {
  background-color: #c6c6e6;
  width: 100%;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5rem;
}

.testimonials h1 {
  color: black;
  margin-bottom: 3rem;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  margin-top: 1rem;
}

/* Caption text */
.text {
  color: black;
  font-size: 1.85rem;
  padding: 8px;
  margin-top: 1rem;
  position: absolute;
  width: 100%;
  text-align: center;
}

.customer-image {
  height: 57vh;
  width: 25vw;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 3s;
  animation-name: fade;
  animation-duration: 3s;
}

@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

/* Contact Section */

.contact-section {
  display: flex;
  flex-direction: column;
}

.contact-section h1 {
  display: flex;
  justify-content: center;
  color: var(--fontColor);
}

.contact-row-one,
.contact-row-two {
  display: flex;
  margin-top: 3rem;
}

.contact-card {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  align-items: center;
  margin-bottom: 3rem;
  width: 100%;
}

.contact-details {
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-size: 3rem;
  text-align: center;
}

.contact-details-2 {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--fontColor);
  font-weight: 700;
}

#email {
  word-break: break-all;
}

.contact-icon {
  margin-top: 2rem;
  height: auto;
  width: 10%;
  height: auto;
}

/* FOOTER */

footer {
  bottom: 0;
  display: flex;
  color: white;
  width: 100%;
  z-index: 3;
  background-color: var(--purple);
}

.footer-section {
  min-height: 10vh;
  display: flex;
  width: 90%;
  margin: auto;
  align-items: center;
}

footer ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  flex: 2 1 40rem;
  white-space: nowrap;
}

footer ul li {
  font-size: var(--navLinkFontSize);
  color: white;
  margin-left: 5rem;
}

/* AESTHETICS PAGE */

.treatments {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  margin: auto;
}

.treatments button {
  width: 30%;
  font-size: 2.25rem;
}

.section-header {
  color: var(--fontColor);
  text-decoration: underline;
  margin-bottom: 5rem;
}

.treatment {
  margin-bottom: 1rem;
}

h2.treatment {
  font-size: 3rem;
  text-align: center;
}

.green-text {
  color: #009879;
}

.treatment-summary {
  text-align: center;
  color: black;
  width: 90%;
  padding: 1rem;
  font-weight: 700;
  font-size: 2.5rem;
}

.treatment-benefits {
  text-align: center;
  width: 90%;
  padding: 1rem;
}

.treatments img {
  width: 10%;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Table Format */

.content-table {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 1.5rem;
  width: 100%;
  border-radius: 5px 5px 0 0;
}

.content-table thead tr {
  background-color: #0e54af;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
}

.content-table th,
.content-table td {
  padding: 12px 35px;
}

.content-table tbody tr {
  border-bottom: 1px solid #dddddd;
  text-align: center;
}

.content-table tbody tr:nth-of-type(even) {
  background-color: rgb(241, 244, 247);
}

.content-table tbody tr:last-of-type {
  border-bottom: 2px solid black;
}

.treatment-button {
  white-space: nowrap;
  margin-bottom: 10rem;
}

/* Aesthetic Facials */

#aesthetic-facial-color {
  color: var(--aestheticFacialColor);
}

#aesthetic-facial-button {
  background-color: var(--aestheticFacialColor);
}

#aesthetic-facial-button:hover {
  background-color: var(--hoverGreenColor);
}

#aesthetic-facial-table-color {
  background-color: var(--aestheticFacialColor);
  color: white;
}

#aesthetic-facial-highlighted-text {
  color: var(--aestheticFacialColor);
  font-weight: 700;
}

/* Microneedling and Mesotherapy */

#needling-color {
  color: var(--needlingColor);
}

#needling-button {
  background-color: var(--needlingColor);
}

#needling-button:hover {
  background-color: var(--hoverGreenColor);
}

#needling-table-color {
  background-color: var(--needlingColor);
  color: white;
}

#needling-highlighted-text {
  color: var(--needlingColor);
  font-weight: 700;
}

#post-care {
  padding-top: 1rem;
  padding-bottom: 3rem;
}

#right-align {
  text-align: right;
}

/* Botox  */

#botox-color {
  color: var(--botoxColor);
}

#botox-button {
  background-color: var(--botoxColor);
}

#botox-button:hover {
  background-color: var(--hoverGreenColor);
}

#botox-table-color {
  background-color: var(--botoxColor);
  color: white;
}

#botox-highlighted-text {
  color: var(--botoxColor);
  font-weight: 700;
}

/* Vitamin B-12 Shot  */

#b12-color {
  color: var(--b12Color);
}

#b12-button {
  background-color: var(--b12Color);
}

#b12-button:hover {
  background-color: var(--hoverGreenColor);
}

#b12-table-color {
  background-color: var(--b12Color);
  color: white;
}

#b12-highlighted-text {
  color: var(--b12Color);
  font-weight: 700;
}

/* BEAUTY TREATMENTS  */

/* Massages */

#massages-highlighted-text {
  color: var(--massagesColor);
  font-weight: 700;
}

#massages-color {
  color: var(--massagesColor);
}

#massages-button {
  background-color: var(--massagesColor);
}

#massages-button:hover {
  background-color: var(--hoverGreenColor);
}

#massages-table-color {
  background-color: var(--massagesColor);
  color: white;
}

/* Facials */

#facials-highlighted-text {
  color: var(--facialsColor);
  font-weight: 700;
}

#facials-table-color {
  background-color: var(--facialsColor);
  color: white;
}

#facials-color {
  color: var(--facialsColor);
}

#facials-button {
  background-color: var(--facialsColor);
}

#facials-button:hover {
  background-color: var(--hoverGreenColor);
}

/* Waxing */

#waxing-color {
  color: var(--waxingColor);
}

#waxing-highlighted-text {
  color: var(--waxingColor);
  font-weight: 700;
}

#waxing-table-color {
  background-color: var(--waxingColor);
  color: white;
}

#waxing-button {
  background-color: var(--waxingColor);
}

#waxing-button:hover {
  background-color: var(--hoverGreenColor);
}

/* Threading */

#threading-color {
  color: var(--threadingColor);
}

#threading-highlighted-text {
  color: var(--threadingColor);
  font-weight: 700;
}

#threading-table-color {
  background-color: var(--threadingColor);
  color: white;
}

#threading-button {
  background-color: var(--threadingColor);
}

#threading-button:hover {
  background-color: var(--hoverGreenColor);
}

/* Tinting */

#tinting-color {
  color: var(--tintingColor);
}

#tinting-highlighted-text {
  color: var(--tintingColor);
  font-weight: 700;
}

#tinting-table-color {
  background-color: var(--tintingColor);
  color: white;
}

#tinting-button {
  background-color: var(--tintingColor);
}

#tinting-button:hover {
  background-color: var(--hoverGreenColor);
}

/* Hands & Feet */

#hands-and-feet-color {
  color: var(--handsAndFeetColor);
}

#hands-and-feet-highlighted-text {
  color: var(--handsAndFeetColor);
  font-weight: 700;
}

#hands-and-feet-table-color {
  background-color: var(--handsAndFeetColor);
  color: white;
}

#hands-and-feet-button {
  background-color: var(--handsAndFeetColor);
}

#hands-and-feet-button:hover {
  background-color: var(--hoverGreenColor);
}

/* MEDIA QUERIES */

/* Homepage */
@media only screen and (max-width: 1545px) {
  .customer-image {
    height: 55vh;
    width: 25vw;
  }
  .contact-icon {
    margin-top: 2rem;
    width: 15%;
    height: auto;
  }

  .contact-details {
    font-size: 2rem;
  }

  .contact-details-2 {
    font-size: 1.75rem;

    width: 100%;
  }
}

@media only screen and (max-width: 1330px) {
  .treatments button {
    width: 40%;
    font-size: 2rem;
  }

  #times-available {
    padding-bottom: 2.25rem;
  }

  /* Testimonials */

  .customer-image {
    height: 50vh;
    width: 30vw;
  }

  .testimonials-button {
    margin-bottom: 4rem;
  }

  #reviews {
    margin-bottom: 2rem;
    font-size: 2rem;
    white-space: nowrap;
  }
}

@media only screen and (max-width: 1023px) {
  .business-info {
    margin: 0 auto;
  }

  #qualification {
    white-space: nowrap;
  }

  .content-table {
    font-size: 1.25rem;
  }

  .treatments img {
    width: 17.5%;
    height: auto;
  }
}

@media only screen and (max-width: 935px) {
  .customer-image {
    height: 45vh;
    width: 35vw;
  }

  #times-available {
    padding-bottom: 0rem;
  }
}

@media only screen and (max-width: 879px) {
  .treatments button {
    width: 40%;
    font-size: 1.5rem;
  }
}

@media only screen and (max-width: 866px) {
  .abha-image {
    height: 60vh;
  }
}

@media only screen and (max-width: 826px) {
  .contact-details {
    font-size: 1.75rem;
  }

  .contact-details-2 {
    font-size: 1.5rem;
  }

  #times-available {
    padding-bottom: 1.85rem;
  }
}

@media only screen and (max-width: 802px) {
  .customer-image {
    height: 50vh;
    width: 45vw;
  }
  #times-available {
    padding-bottom: 0rem;
  }

  footer a {
    display: none;
  }
}

@media only screen and (max-width: 709px) {
  .contact-details {
    font-size: 1.5rem;
  }

  .contact-details-2 {
    font-size: 1.25rem;
  }

  #times-available {
    padding-bottom: 1.5rem;
  }
}

@media only screen and (max-width: 696px) {
  .treatments button {
    width: 50%;
    font-size: 1.5rem;
  }
}

@media only screen and (max-width: 669px) {
  #times-available {
    padding-bottom: 0rem;
  }
}

@media only screen and (max-width: 662px) {
  .customer-image {
    height: 50vh;
    width: 50vw;
  }

  button {
    width: 55%;
  }

  nav h2 {
    white-space: nowrap;
    font-size: 2.5rem;
  }

  #contact-link {
    display: none;
  }

  /* Nav Bar */
  .burger-menu {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
  }
  .burger-menu span {
    padding: 0.2rem 2rem;
    background-color: white;
    margin: 0.5rem 0rem;
    display: block;
  }

  nav ul {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: #4343ad;
    transform: translateX(100%);
    transition: transform 1s ease;
  }

  nav ul li a {
    font-size: 3rem;
  }

  .menu-check {
    padding: 0.2rem 2rem;
    background-color: white;
    float: right;
    position: fixed;
    display: block;
    right: 5%;
    transform: translate(40%, 5%);
    width: 15rem;
    height: 5rem;
    cursor: pointer;
    opacity: 0;
    z-index: 100;
    display: block;
  }

  .menu-check:checked + .nav-links {
    transform: translate(-100%);
  }

  .menu-check:checked ~ .burger-menu span {
    background-color: white;
  }
}

@media only screen and (max-width: 592px) {
  .abha-image {
    height: 55vh;
  }

  #times-available,
  #location-2 {
    padding-bottom: 1.5rem;
  }

  .content-table {
    font-size: 1rem;
  }

  .content-table td {
    padding: 3rem;
  }

  .treatments img {
    width: 20%;
    height: auto;
  }
}

@media only screen and (max-width: 550px) {
}

@media only screen and (max-width: 566px) {
  .treatments button {
    width: 75%;
  }
}

@media only screen and (max-width: 592px) {
  .abha-image {
    margin-top: 7rem;
  }

  #qualification {
    font-size: 1.25rem;
  }
}

@media only screen and (max-width: 504px) {
  .customer-image {
    height: 47.5vh;
    width: 60vw;
  }
  #location-2 {
    padding-bottom: 0rem;
  }

  .duration-column {
    display: none;
  }
}

@media only screen and (max-width: 460px) {
  .business-info {
    display: flex;
    margin: 0 auto;
  }

  .treatments img {
    width: 30%;
    height: auto;
  }
}

@media only screen and (max-width: 412px) {
  .abha-image {
    height: 45vh;
  }
  #times-available {
    padding-bottom: 0rem;
  }
}

@media only screen and (max-width: 377px) {
  .customer-image {
    height: 45vh;
    width: 65vw;
  }
  .contact-details {
    font-size: 1.25rem;
  }

  .contact-details-2 {
    font-size: 1rem;
  }

  #times-available {
    padding-bottom: 1.25rem;
  }

  .text {
    font-size: 1.25rem;
  }
}

@media only screen and (max-width: 373px) {
  .treatments button {
    width: 85%;
  }
}

@media only screen and (max-width: 331px) {
  .customer-image {
    height: 45vh;
    width: 65vw;
  }

  #times-available {
    padding-bottom: 0rem;
  }
}

@media only screen and (max-width: 315px) {
  .contact-details {
    font-size: 1.15rem;
  }
}