@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");

      *,
      html {
          padding: 0;
          margin: 0;
          font-family: "Lato", sans-serif;
      }

      .box-div {
          margin: 14px;
      }

      .subtitle {
          color: white;
          margin-top: 10px;
      }

      .text-font p {
          font-family: "noto sans", sans-serif;
      }

      .header-font {
          font-family: 'Nunito', sans-serif;
      }
      .font-16 {
        font-size: 16px;
        margin-top: 20px;
    }

      .shape-box {
          display: inline-block;
          position: relative;
          z-index: 1;
          /* max-width: 500px; */
          height: 430px;
          margin: 30px 10px 30px;
          box-shadow: 0 6px 30px 0 rgba(0, 0, 0, .12);
          overflow: hidden;
          width: 23.333%;
          height: 315px
      }

      .sub-nav-img {
          height: 540px;
          width: 100%;
      }

      .font-family {
          font-family: 'Nunito', sans-serif;
      }


      .text-font  {
          font-family: 'Nunito', sans-serif !important;
      }

      .icon-img {
          height: 42px !important;
      }

      .shape-box_half {
          overflow: hidden;
          text-align: left;
          box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
      }

      .shape-box_half:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          transform: skewY(53.5deg);
          transform-origin: top left;
          transition: \transform .4s;
          background: #fff;
          z-index: 1;
      }

      .shape-box>img {
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
          object-fit: cover;
      }

      .bg-black {
          background-color: #000;
      }

      .shape-box_half figcaption {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          padding: 0 30px 30px;
          transition: \transform .4s;
          transform: translateY(100%);
          z-index: 3;
      }

      .shape-box_half figcaption .show-cont {
          position: absolute;
          bottom: calc(100% + 30px);
          left: 30px;
          right: 30px;
          transition: bottom .4s;
      }

      .card-no {
          font-size: 36px;
          color: #ffc107;
          padding: 0;
          margin: 10px 0;
      }

      .card-main-title {
          margin-top: 8px;
          font-weight: 700;
          font-size: 24px;
          text-transform: capitalize;
          color: #292b2c;
      }

      .card-content {
          color: #9f9f9f;
          margin-top: 20px;
          line-height: 22px;
          font-size: 15px;
      }

      .read-more-btn {
          border: 2px solid #ffc107;
          font-size: 14px;
          cursor: pointer;
          padding: 10px 20px;
          display: inline-block;
          text-transform: uppercase;
          letter-spacing: .08em;
          font-weight: 600;
          position: relative;
          -webkit-transition: all 0.3s;
          -moz-transition: all 0.3s;
          transition: all 0.3s;
          background: #ffc107;
          color: #fff;
          border-radius: 2px;
          margin-top: 25px;
          text-decoration: none;
      }

      .read-more-btn:hover {
          background: transparent;
          color: #ffc107;

      }

      .shape-box_half>.after {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgb(158 217 251);
          opacity: 0;
          transition: opacity .4s;
      }

      /*On hover*/
      .shape-box_half:hover:before {
          transform: skewY(20deg);
      }

      .shape-box_half:hover figcaption {
          transform: translateY(0);
      }

      .shape-box_half:hover figcaption .show-cont {
          bottom: 100%;
      }

      .shape-box_half:hover>.after {
          opacity: 1;
      }

      .reveal {
          position: relative;
          transform: translateY(150px);
          opacity: 0;
          transition: 1s all ease;
      }

      .padding-top {
          padding-top: 132px !important;
      }

      .sub-nav-head {
          /* font-size: 55px; */
          font-weight: 600;
      }

      .reveal.active {
          transform: translateY(0);
          opacity: 1;
      }

      @media only screen and (max-width: 768px) {
        .shape-box {
            width: 95%;
        }

        .padding-top {
            padding-top: 70px !important;
        }
        .flex-center {
            flex-direction: column;
        }

        .sec-padding {
            padding: 10px !important;
        }

        .display-none {
            display: none;
        }

        .card-new {
            flex-direction: column;
        }

        .header-inner.two .overlay {
            height: 100% !important;
        }


        h1 {
            font-size: 24px !important;
        }

        h3 {
            font-size: 18px !important;
        }

        h5 {
            font-size: 16px !important;
        }

        p {
            font-size: 14px !important;
        }

        .text-center-mobile {
            text-align: center;
        }
        .strategy-div{
            margin-top: unset;
        }
        .card-content-new {
            padding: 1em 2em 2em;
        }



    }