body {
  font-family: 'Nunito', sans-serif;
}
.card-wrapper {
  margin: 2% 0;
  padding: 0 2%;
}

/* You can adjust the image size by increasing/decreasing the width, height */
.custom-circle-image {
width: 12vw; /* note i used vw not px for better responsive */
height: 12vw;
}

.z-index-defined{
  z-index: 1;
}

.img-max-top{
    max-height: 300px;
}

.img-max-second{
    max-height: 150px;
}

.hocphi{
      width: 62px;
    text-align: center;
    position: fixed;
    background: red;
    color: #fff;
    bottom: 115px;
    animation: textColorChange 3s infinite;
    z-index: 1000;

}

@keyframes textColorChange {
  0%   { color: white; }
  25%  { color: #FFFF00; }
  50%  { color: #00FFFF; }
  75%  { color: #000000; }
  100% { color: #00FF00; }
}


.custom-circle-image img {
object-fit: cover;
}

.card-title {
  letter-spacing: 1.1px;
  font-size:1.3rem;
}

.card-text {
  font-family: MerriweatherRegular;
  font-size: 1.1rem;
  font-style: italic;
  line-height: initial;
}

.card:hover{
  background:#ececec;
  cursor: pointer;
}

.row-content{
  min-height: 380px;
}

.row-content img{
  max-width: 100%;
}

.divheader-fixed{
  position: fixed;
  top: 0;
  z-index: 2;
  width: 100%;
  transition: visibility 0s, opacity 0.5s linear;
  /* margin-bottom: 50px; */
}

.divbody{
  margin-top: 85px !important;
}

.mobile{
  display: none;
}

@media screen and (max-width: 1024px) {
  .menu-pc{
    display: none;
  }

  .mobile{
    display: block;
  }
}

@media screen and (max-width: 450px) {

  .menu-pc{
    display: none;
  }

  .logo-mobile img{
    height: 45px !important;
  }

  .mobile{
    display: block;
  }

  .custom-circle-image{
    width: 55vw;
    height: 55vw; 
  }
}