/* Add your custom styles here */

@import url('https://fonts.cdnfonts.com/css/satoshi');

:root {
    --brand-primary: #5a8465;
    --brand-primary-darker: #5a8465;
    --bs-primary: #89ac8a;
    --bs-secondary: #6c757d;
    --bs-danger: #5a8465;
  }

  .danger-btn-shadow {
    -webkit-box-shadow: 0 0.9375rem 1.875rem 0 #5a846574;
    box-shadow: 0 0.9375rem 1.875rem 0 #5a846574;
  }

  .bg-holder {
    filter: invert(50%) sepia(12%) saturate(1475%) hue-rotate(79deg) brightness(64%) contrast(86%);
  }

  .card-link {
    text-decoration: none;
  }
  
  .card-link .card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  
  .card-link:hover .card {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background-color: #89ac8a;
    color: white;
  }

  .card-link:hover .text-secondary {
    color: white !important;
  }

  h1, h2, h3, h4, h5, h6, .hero-title {
    color: #5a8465;
}

.hero-logo {
    height: 110px;
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
}

.hero-img{
    max-width: 550px;
}

@media (max-width: 767px) {
    .hero-img {
      width: 100% !important;  /* Ensures full responsiveness */
      max-width: 400px; /* Set a reasonable max width */
      display: block;
      margin: 0 auto !important;
      padding-top: 0 !important;
    }
}

body, h1, h2, h3, h4, h5{
    font-family: 'Satoshi', sans-serif !important;
}

.card-img-top{
    max-width: 450px;
}

  svg {
    display: block;
    inset-block-start: end;
  }

  .logo-link {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  
  .logo-link:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }

  .logo{
    height: 70px;
  }

  #Tranquilitree h4, h5, #Greenogram h4, #OfficeFern h4{
    color: white ;
  }

  #Tranquilitree{
    background-color: #5A8464;
  }

  #Greenogram{
    background-color: #89AC8A;
  }

  #OfficeFern{
    background-color: #A4C4A6;
  }

  #HeadFog{
    background-color: #FCFCFC;
  }

  #HeadFog h5{
    color: #5A8464;
  }

  #CleanSlate{
    background-color: #D9D9D9;
  }

  #CleanSlate h4, #CleanSlate h5{
    color: black;
  }

  #CalmStone{
    background-color: #ACACAA;
  }

  #CalmStone h4, #CalmStone h5{
    color: black;
  }

  #Poppins h4, #Poppins h5{
    font-family: "Poppins", sans-serif !important;
  }

  #Poppins h5, #Satoshi h5{
    color: #5A8464;
  }

  a:hover{
    text-decoration: none;
  }