/* CSS Document */
.main-img img {
  margin-bottom: 5rem; }

#header-img {
  background-image: url("../img/08-header-img.png"); }

#activity .cms-box {
  background-color: #fff; }

#blog .row {
  margin: 0 -1.5rem 1rem; }
  #blog .row > div {
    padding: 0 1.5rem;
    margin-bottom: 3rem; }
  #blog .row .blog-box {
    display: block;
    color: #4d4d4d;
    background-color: #fff8e5;
    height: 100%;
    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: 0.3s;
    overflow: hidden; }
    #blog .row .blog-box .blog-img {
      height: 220px;
      overflow: hidden; }
      @media screen and (max-width: 1199px) {
        #blog .row .blog-box .blog-img {
          height: 180px; } }
      @media screen and (max-width: 991px) {
        #blog .row .blog-box .blog-img {
          height: 160px; } }
      #blog .row .blog-box .blog-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.5s; }
    #blog .row .blog-box .blog-text {
      height: 90px;
      padding: 1rem 2rem; }
      @media screen and (max-width: 991px) {
        #blog .row .blog-box .blog-text {
          height: 80px; } }
      #blog .row .blog-box .blog-text p {
        color: #808080;
        font-size: 14px;
        font-size: 1.4rem;
        margin-bottom: 0;
        transition: 0.3s;
        margin-bottom: 0.5rem; }
      #blog .row .blog-box .blog-text h4 {
        font-size: 20px;
        font-size: 2rem;
        font-weight: 500;
        height: 26px;
        overflow: hidden; }
        @media screen and (max-width: 991px) {
          #blog .row .blog-box .blog-text h4 {
            height: 22px; } }
    #blog .row .blog-box:hover {
      background-color: #FF9150;
      color: #fff; }
      #blog .row .blog-box:hover .blog-img img {
        transform: scale(1.08); }
      #blog .row .blog-box:hover .blog-text p {
        color: #fff; }
      #blog .row .blog-box:hover .blog-text h5 {
        color: #fff; }

#volunteer ul {
  margin-top: 6rem; }
  @media screen and (max-width: 1199px) {
    #volunteer ul li {
      width: 500px;
      margin: auto;
      margin-bottom: 1.5rem; } }
  @media screen and (max-width: 575px) {
    #volunteer ul li {
      width: 100%; } }

.volunteer-img {
  margin-top: 6rem; }