/*****************/
/* HTML ELEMENTS */
/*****************/
html {
  scroll-behavior: smooth !important;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}

img {
  opacity: .8;
}

form {
  width: 450px;
}

table {
  width: 80%; 
  margin: auto;
}

table tr td {
    padding: 15px;
    font-size: 20px;
}

/*******************/
/* CSS ID's        */
/*******************/
#emailMsg {
    color: green;
    font-weight: bold;
    font-size: larger;
    display: none; 
    text-align: center;
    margin-top: 10px;
}

#presentations {
    margin: 225px 225px;
}

/*******************/
/* CSS CLASSES     */
/*******************/
.corner-left {
    border-radius: 8px 0 0 8px;
}

.corner-right {
    border-radius: 0 8px 8px 0;
}

.red-hat-display-100 {
  font-family: "Red Hat Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.navbar-nav .nav-link {
    border-bottom: 2px solid transparent; /* keeps the height steady */
}

.navbar-nav .nav-link:hover {
    border-bottom: 2px solid hsl(42, 98%, 52%); /* Bootstrap’s primary blue, or your color */
}

.left-vh {
  /* Mobile-safe viewport height; fallback to 100vh */
  min-height: 100svh;
  min-height: 100vh;

  display: block;
  align-items: center;    /* vertical */
  justify-content: left;  /* horizontal */
  text-align: left;       /* optional */
}

.center-vh {
  /* Mobile-safe viewport height; fallback to 100vh */
  min-height: 100svh;
  min-height: 100vh;

  display: flex;
  align-items: center;      /* vertical */
  justify-content: center;  /* horizontal */
  text-align: center;       /* optional */
}

.header-top-padding {
    padding: 40px 50px;
}

.bottom-padding {
    padding-bottom: 40px;
}

.naturalhealing {
    color: rgb(225, 160, 7);
}

.ecotherapy {
    background-color: rgb(187, 170, 149);
}

.meaning-purpose {
    background-color: #1856A2;
}

.stress-anxiety {
    background-color: #40E0D0;
}

.traumatic-growth {
    background-color: #00B500;
}

.burnt-orange {
    color: rgb(16, 81, 16)
}

.client-height {
  height: 300px;
  padding: 20px 0 20px 0;
}

.no-left-space {
  margin-left: 0 !important;
  padding-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.tr-spacing {
  margin: 75px 150px
}

.slide-in-left {
  animation: slideInLeft 1s ease-out;  /* run animation once */
  text-align: center;              /* center the text */
}

@keyframes slideInLeft {
  from {
    transform: translateX(-99vw); /* start way left */
    opacity: 0;                    /* fade in */
  }
  to {
    transform: translateX(0);      /* end at natural spot */
    opacity: 1;
  }
}


.slide-in-right {
  animation: slideInRight 1s ease-out;  /* run animation once */
  text-align: center;                   /* center the text */
}

@keyframes slideInRight {
  from {
    transform: translateX(100vw);       /* start way right */
    opacity: 0;                         /* fade in */
  }
  to {
    transform: translateX(0);           /* end at natural spot */
    opacity: 1;
  }
}

.pop-in {
  opacity: 0;
  transform: scale(0.5);                /* start shrunken */
  animation: popIn 2s ease forwards;
  /* animation: popIn 0.8s ease forwards; */
}

@keyframes popIn {
  to {
    opacity: 1;
    transform: scale(1);               /* grow to normal size */
  }
}

@media screen and (max-width: 768px) {
  #dEcotherapy, #dStressAnxiety, #dTraumaticGrowth, #dMeaningPurpose {
    height: 330px;
    margin-bottom: 40px;
    padding: 20px 0 20px 0;
  }
  #presentations {
    margin: 50px 20px !important;
  }

  #specialties {
    margin: 50px 20px !important;    
  }

  #dMeaningPurpose {
    margin-top: 25px !important;
  }

  #consult {
    margin: 50px 20px !important;
  }
}