
.hidden {
  opacity: 0;
  filter: blur(1px);
  transition: opacity 1s ease-in;
}

.show {
  opacity: 1;
  filter: blur(0);
}

@media (max-width: 1024px) {
  .mbh-600 {
    font-weight: 600;
  }
}


.second-content .grid-wrapper img,
.third-content-details img {
  border-radius: 10px;
}



.hide{
  display: none;
}

.showing{
  display: block;
}

.text-center{
  text-align: center;
}
.text-blue{
  color:  #0057A8 !important;
}

.text-grey{
  color: #999 !important;
}

.happiness-container {
  padding: 20px 0;
  margin: auto;
}

.happiness-container h2 {
  margin-bottom: 24px;
}

.happiness-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

  @media screen and (max-width: 767px){
    .happiness-grid{
      grid-template-columns: 1fr;
    }
  }

.happiness-item {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 0;
}

.happiness-icon {
  width: 80px;
  height: 80px;
}

.happiness-content {
  color: #333;
}
  .happiness-content strong{
    font-weight: 500;
  }
      


.tab-buttons{
  display: grid;
  gap: 30px;
  grid-template-columns: repeat( 5 , 1fr);
  margin: 30px 0 30px;
}  
  @media screen and (max-width: 767px){
    .tab-buttons{
      grid-template-columns: 1fr 1fr;
    }
  }

  .tab-buttons .tab-btn{
    display: block;
    appearance: none;
    border-radius: 8px 8px;
    background: #00B3F0;
    color: #FFF;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0.5em;
    line-height: 1em;
    min-height: 5rem;
  }
    .tab-buttons .tab-btn.active,
    .tab-buttons .tab-btn:hover{
      background: #0057A8;
    }

.tab-contents{
  margin: 30px 0;
}    

.grid-happy{
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 30px;
  margin: 0 0 30px;
}    
  @media screen and (max-width: 767px){
    .grid-happy{
      grid-template-columns: 1fr;
      gap: 15px;
    }
  }

  .grid-happy img{
    max-width: 100%;
    height: auto;
  }

  .grid-happy ul{
    padding-left: 1em;
  }

  .grid-happy b{
    font-weight: 500;
  }

.photo-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
  .photo-grid .span-2{
    grid-column: span 2;
  }