@charset "utf-8";
/* CSS Document */


.threebloc_sec {
  padding: 120px 0;

  & .container {
    display: flex;
    flex-wrap: nowrap;
    width: calc(100% + 32px);

    & .blockbx {
      position: relative;
      width: calc(33.33% - 32px);
      margin: 0 16px;
      height: 500px;
      border-radius: 20px;
      overflow: hidden;

      & .blocinfobx {
        width: calc(100% - 80px);
        top: 40px;
        position: absolute;
        left: 40px;
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;
        background: rgba(255, 255, 255, 0.7);
        padding: 30px;
        backdrop-filter: blur(8px);

        &:hover {
          background: rgba(250, 245, 101, 0.8);
          backdrop-filter: blur(8px);
        }
        & > p {
          font-size: 14px;
          font-weight: 500;
          line-height: 1.5;
          margin-right: 20px;
        }

        & .bxtitle {
          font-size: 20px;
          font-weight: 700;
          color: #2d2d2d;
          width: 100%;
          display: block;
          margin: 0 0 10px 0;
          line-height: 1;
          position: relative;
          padding: 5px 0;

          &:before {
            /* position: absolute;
            content: '';
            height: 26px;
            width: 26px;
            right: 0;
            top: 0;
            bottom: 0;
            margin-block: auto;
            background: transparent url(../images/icon/arrow-right-circle.svg) no-repeat center;
            background-size: 100%; */
            position: absolute;
            content: '';
            height: 19px;
            width: 19px;
            right: 0;
            top: 0px;
            bottom: 0;
            margin-block: auto;
            background: transparent url(../images/icon/arrow-right-circle.svg) no-repeat center;
            background-size: contain;
            filter: brightness(0) invert(0);
          }
        }
      }
    }
  }
}

.blockbx:hover {
    & img { 
      transform: scale(1.1);
      transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
      -ms-transition: all   0.5s ease-in-out;
    }
} 

/* faq section styles  */
/*.faqsec_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .faqleft {
    width: 30%;
  }

  .faq_accordion {
    width: 50%;
  }
}

hr {
  width: 100%;
  height: 1px;
  border: 0px solid transparent;
  background: #e2e2e2;
  margin: 0;
}*/



@media (max-width: 1599.98px) {
  .threebloc_sec {
      padding: 100px 0;
  }
}

@media (max-width: 1439.98px) {

  .threebloc_sec {
    & .container {
      & .blockbx {
        & .blocinfobx {
          .bxtitle {
            padding: 5px 25px 5px 0;
          }
        }
      }
    }
  }
  .threebloc_sec {
      padding: 80px 0;
  }
}

@media (max-width: 1199.98px) {

  .threebloc_sec {
    padding: 80px 0;

    & .container {
      .blockbx {
        width: calc(33.33% - 10px);
        margin: 0 5px;

        .blocinfobx {
          width: calc(100% - 40px);
          top: 40px;
          left: 20px;
          padding: 20px;
        }
      }
    }
  }
}

@media (max-width: 991.98px) {

  .threebloc_sec {
    & .container {
      flex-wrap: wrap;

      .blockbx {
        width: 100%;
        margin: 0 0 10px 0;
        height: 240px;

        .blocinfobx {
          top: 20px;
        }
      }
    }
  }


}

@media (max-width: 575.98px) {

  .threebloc_sec {
    padding: 30px 0;

    & .container {
      width: 100%;

      & .blockbx {
        height: auto;

        .blocinfobx {
          top: 0;
          position: relative;
          width: 100%;
          left: 0;
        }
      }
    }
  }

}