/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* IMPORTS: bootstrap icons, google fonts */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@500;700&family=Raleway:wght@300;400;600&display=swap");

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* GENERAL */
body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  line-height: 1.32em;
  letter-spacing: 0.85px;
  animation: transitionIn 0.75s;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Cormorant Infant", serif;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* PAGE TRANSITION */
@keyframes transitionIn {
  from {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  to {
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* IMAGES */
.img-shadow {
  border-radius: 2px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}
.img-fs {
  margin-right: 15px;
  margin-bottom: 10px;
}
.img-cover {
  object-fit: cover;
  object-position: center center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* BUTTONS */
.btn-outline-white {
  background-color: transparent;
  border: solid thin #fff;
  border-radius: 2px;
  color: #fff;
  transition: 0.3s;
}
.btn-outline-white:hover {
  background-color: #0d311d;
  border: solid thin #0d311d;
  transform: scale(1.05);
}
.btn-outline-gray {
  background-color: transparent;
  border: solid thin #ccc;
  border-radius: 2px;
  color: #7a7a7a;
  transition: 0.3s;
}
.btn-outline-gray:hover {
  background-color: #0d311d;
  border: solid thin #0d311d;
  color: #fff;
  transform: scale(1.05);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* HOME PAGE */
.home-top {
  width: 100%;
  height: 100vh;
  background-image: url("//journeyinwardcoaching.pages.dev/assets/img/bg/bg-forest-green-split-path-01.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: left;
  color: #fff;
}
.home {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
.page-9x {
  max-width: 900px;
}
.page-12x {
  max-width: 1200px;
}
.site-logo {
  width: 50%;
  max-width: 500px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ABOUT PAGE */
.hero-about-top {
  width: 100%;
  height: 300px;
  margin: 0;
  padding: 0;
  background-image: url("//journeyinwardcoaching.pages.dev/assets/img/bg/bg-nature-outlook-01.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}
.hero-about-mid {
  width: 100%;
  min-height: 300px;
  margin: 0;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.4);
}
.profile-pic {
  width: 300px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* CONTACT */
.hero-contact-top {
  width: 100%;
  height: 300px;
  margin: 0;
  padding: 0;
  background-image: url("//journeyinwardcoaching.pages.dev/assets/img/bg/bg-nature-journey-01.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}
.hero-contact-mid {
  width: 100%;
  min-height: 300px;
  margin: 0;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.4);
}
.contact-img {
  min-height: 400px;
  background-image: url("//journeyinwardcoaching.pages.dev/assets/img/bg/bg-plants-growth.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* THANK YOU PAGE */
.thankyou-top {
  width: 100%;
  height: 100vh;
  background-image: url("//journeyinwardcoaching.pages.dev/assets/img/bg/bg-nature-outlook-02.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: left;
  color: #fff;
}
.thankyou {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* FOOTER */
footer a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}
footer a:hover {
  color: #ccc;
}
.footer-top {
  width: 100%;
  min-height: 300px;
  background-color: #0d311d;
}
.site-logo-footer {
  width: 350px;
}
.site-logo-footer img {
  width: 100%;
}
.footer-btm {
  width: 100%;
  min-height: 75px;
  background-color: rgba(13, 49, 29, 0.75);
  color: #fff;
}
.copyright {
  font-size: 13px;
}
.developer {
  font-size: 10px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* MOBILE */
@media screen and (max-width: 420px) {
  .home-top,
  .home {
    height: auto;
  }
  .site-logo {
    width: 80%;
  }
}