/*================================================
OHC About Area CSS
=================================================*/
.ohc-about-area {
  background-color: #FFF6E9;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.ohc-about-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--OHCwhiteColor);
  z-index: -1;
  height: 100px;
}

.ohc-about-area::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--OHCwhiteColor);
  z-index: -1;
  height: 100px;
}

.ohc-about-content {
  padding-left: 85px;
}

.ohc-about-content b {
  font-size: var(--OHCfontSize);
  color: var(--OHCmainColor);
  display: inline-block;
  margin-bottom: 15px;
  font-weight: 400;
}

.ohc-about-content h3 {
  font-size: 36px;
  margin-bottom: 15px;
}

.ohc-about-content p {
  margin-bottom: 0;
}

.ohc-about-content .funfacts-box {
  margin-top: 35px;
}

.ohc-about-content .funfacts-box h3 {
  line-height: 1;
  font-size: 42px;
  margin-bottom: 8px;
  color: var(--OHCmainColor);
}

.ohc-about-content .funfacts-box h3 .sign {
  position: relative;
  top: 2px;
}

.ohc-about-content .funfacts-box p {
  font-size: 15px;
  font-weight: 400;
}

.ohc-about-image {
  position: relative;
}

.ohc-about-image .ohc-image-shape {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: -110px;
}

.ohc-about-image .ohc-image-shape img {
  -webkit-animation-name: rotateme;
          animation-name: rotateme;
  -webkit-animation-duration: 60s;
          animation-duration: 60s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

.ohc-about-shape {
  position: absolute;
  right: 0;
  top: 0;
  -webkit-animation: movebounce 25s linear infinite;
          animation: movebounce 25s linear infinite;
}

/* Max width 767px */
@media only screen and (max-width: 767px) {
    .ohc-about-area::before {
        display: none;
    }
    .ohc-about-area::after {
        display: none;
    }
    .ohc-about-content {
        padding-left: 0;
        margin-top: 30px;
        text-align: center;
    }
    .ohc-about-content b {
        font-size: 15px;
    }
    .ohc-about-content h3 {
        font-size: 25px;
    }
    .ohc-about-content .funfacts-box {
        margin-top: 25px;
    }
    .ohc-about-content .funfacts-box h3 {
        font-size: 30px;
    }
    .ohc-about-content .funfacts-box p {
        font-size: 14px;
    }
    .ohc-about-area {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .ohc-about-image {
        text-align: center;
    }
    .ohc-about-image .ohc-image-shape {
        display: none;
    }
    .ohc-about-shape {
        display: none;
    }
}

/* Min width 768px to Max width 991px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ohc-about-area::before {
        display: none;
    }
    .ohc-about-area::after {
        display: none;
    }
    .ohc-about-content {
        padding-left: 0;
        margin-top: 30px;
        text-align: center;
    }
    .ohc-about-area {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .ohc-about-image {
        text-align: center;
    }
    .ohc-about-image .ohc-image-shape {
        display: none;
    }
    .ohc-about-shape {
        display: none;
    }
}

/* Min width 992px to Max width 1199px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ohc-about-area::before {
        height: 28px;
    }
    .ohc-about-area::after {
        height: 35px;
    }
    .ohc-about-image .ohc-image-shape {
        left: -20px;
    }
    .ohc-about-shape {
        max-width: 110px;
    }
    .ohc-about-content {
        padding-left: 20px;
    }
    .ohc-about-content h3 {
        font-size: 30px;
    }
    .ohc-about-content .funfacts-box h3 {
        font-size: 32px;
    }
}