/* image styles */

.logo {
  width: 20rem
}

.pimage_1 {
  background-image: url('../images/profile-image-1.jpg');
}

  .pimage_2 {
    background-image: url('../images/profile-image-2.jpg');
  }


.profile-image {
  border-radius: 2rem;
  padding: 1.0rem;
  text-align: center;
  min-height: 30.0rem;
  background-position: center;
  background-size: cover;
}

/* background styles */

.gradient {
    background: linear-gradient(#badbdf, #9fc1d2);
}

/* signature font */
.signature {
  font-size: 2.0rem;
  letter-spacing: .01em;
  line-height: 1.6;
  margin-bottom: 1.0rem;
  margin-top: 1.0rem;
  text-align: center;
}

/* Fonts */
.alex-brush-regular {
  font-family: "Alex Brush", cursive;
  font-weight: 400;
  font-style: normal;
}

/* custom styles */
.textbox {
  background-color: #badbdf;
  border-radius: 2rem;
  padding: 1.0rem;
}

/* stat bar */
.stat-bar-row {
  background-color: #8c698a;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  min-height: 10rem;
  padding-bottom: 2rem;
}

.stat-bar-title {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 5rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
}

.stat {
    color: #FFF;
}

/* Card Styles */
.card-column{
  background-color: #8c698a;
  border-radius: 2rem;
  margin-bottom: inherit;
  padding-top: 0rem;
  padding-bottom: 2rem;
  overflow: hidden;
}
.card-icon{
  max-width: 120%;
  height: auto;
  margin-left: -2rem;
  margin-right: -2rem;
}

.card-heading{
  font-weight: 900;
  margin-top: 1.0rem;
  padding: 1.0rem;
  text-align: left;
  color: #FFF;
}
.card-content{
  font-weight: 500;
  padding: 1.0rem;
  text-align: left;
  color: #FFF;
}

.dark-purple-bg {
    background-color: #8c698a;
}

.checklist {
  border-radius: 2rem;
  padding: 1.5rem;
  padding-top: 2.0rem;
  text-align: left;
  margin-top: auto;
}

 .sage {
    background-color: #FFFFFF;
    border-radius: 2rem;
    max-width: 70%;
    margin-top: auto;
  }


  /* Increase the overall navbar height */
.navbar {
  min-height: 8rem; /* Change to your desired height */
}

/* Adjust the logo image size */
.navbar-brand .navbar-item img {
  max-height: 8rem !important; /* Set your desired logo height */
  width: auto;                /* Keeps aspect ratio */
}

.light-blue-background {
    background-color: #badbdf;
}

:root {
  --bulma-danger-h: 20deg;
  --bulma-danger-s: 99%;
  --bulma-danger-l: 72%;
}

/* Change the default button color globally */
.button {
  --bulma-button-background-color: #fe9e6f;
  --bulma-button-color: #434343;
}

/* Target all buttons or create a custom class modifier */
.button.is-custom-coral {
  --bulma-button-background-color: #fe9e6f !important;
  --bulma-button-color: #000;
  --bulma-button-border-color: #fe9e6f;
}

.button.is-danger {
    --bulma-button-h: var(--bulma-danger-h);
    --bulma-button-s: var(--bulma-danger-s);
    --bulma-button-l: var(--bulma-danger-l);
    --bulma-button-background-l: var(--bulma-danger-l);
    --bulma-button-border-l: var(--bulma-danger-l);
    --bulma-button-border-width: 0px;
    --bulma-button-color-l: var(--bulma-danger-invert-l);
    --bulma-button-outer-shadow-a: 0;
}

.button.is-active, .button:active {
    --bulma-button-background-l-delta: var(--bulma-button-active-background-l-delta);
    --bulma-button-border-l-delta: var(--bulma-button-active-border-l-delta);
    --bulma-button-outer-shadow-a: 0;
}

:root {
  /* This changes the fallback/default button color */
  --bulma-button-background-color: #fe9e6f;
  --bulma-button-color: #434343;
  --bulma-navbar-background-color: transparent;
}

/* navbar colors */
.navbar {
        --bulma-navbar-background-color: transparent;
}

.navbar-link, a.navbar-item {
    background-color: transparent;
    --bulma-navbar-background-color: transparent;
    font-weight: bold;
}


.navbar-link, a.navbar-item:hover {
    color: #fff;
}