@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
  --main-padding: 2rem;
}

body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.btn1-theme {
  background-color: #9e005d;
  color: #fff;
}

.btn1-theme:hover {
  background-color: #770046;
  color: #fff;
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 1020;

  background-color: #fff;

  .navbar-nav {
    .nav-item {
      .nav-link {
        color: #c4391a;
      }

      .nav-link:hover {
        color: #000;
      }

      .nav-link.active {
        color: #000;
      }

      .nav-link.highlight-text {
        font-weight: bold;
      }
    }
  }

  .navbar-brand {
    width: 40%;
  }
}

.main-cont {
  background-color: #c4391a;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*background-color: #ccc;
     background-image: url(img/home-bg.png); */
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;

  #animation-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .main-text-cont {
    position: relative;
    top: 0;
    height: 100%;
    z-index: 3;
    margin-top: -90%;

    .hero-sec {
      color: #fff;
      display: flex;
      align-items: end;
      /* height: 50svh; */
      padding: 0;
      margin-bottom: 3rem;
      position: relative;
      z-index: 1;

      h2 {
        font-size: 3.75rem;
        line-height: 3.625rem;
        font-weight: bold;
        letter-spacing: -2%;
        width: 100%;
      }
    }

    .intro-txt {
      width: 100%;
      position: relative;
      z-index: 1;

      p {
        font-size: 1.25rem;
        font-weight: bold;
        line-height: normal;
        color: #fff;
        /* text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
        margin-bottom: 2rem;
      }
    }

    .intro-txt-p2 {
      width: 100%;
      margin-bottom: 4.5rem;
      position: relative;
      z-index: 1;

      p {
        font-size: 1.375rem;
        line-height: 1.625rem;
        letter-spacing: -2%;
        color: #fff;
      }

      p:last-child {
        font-weight: bold;
        font-size: 1.375rem;
        line-height: 1.625rem;
        letter-spacing: -2%;
      }
    }

    .four-pillers {
      padding-bottom: 4rem;
      position: relative;
      z-index: 1;

      .piller-itm {
        margin-bottom: 3rem;

        h3 {
          font-weight: 700;
          font-size: 2rem;
          line-height: 2.125rem;
          color: #fff;
          margin-bottom: 1rem;
        }

        p {
          font-size: 1.375rem;
          line-height: 1.625rem;
          letter-spacing: -2%;
          color: #fff;
        }
      }
    }
  }
}

.three-things-cont {
  background-color: #9e005d;
  color: #fff;
  padding: 2rem 0;

  h4 {
    font-size: 1.5rem;
    font-weight: normal;
  }

  h2 {
    font-weight: bold;
    font-size: 3.75rem;
    line-height: 3.625rem;
    margin-bottom: 0.85rem;
  }

  h5 {
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 1.75rem;
  }

  .fact-row {
    .fact-itm {
      font-size: 1.375rem;
      line-height: 1.625rem;
      font-weight: bold;
      letter-spacing: -2%;
      padding: 0.1rem 0;

      p {
        margin-bottom: 0;
      }
    }
  }
}

.schedule-discovery-session-cont {
  background-color: #fff;
  border-bottom: 0.313rem solid #9e005d;

  .title-col {
    a {
      text-decoration: none;
      color: #9e005d;
      transition: all 0.5s ease;
    }

    a:hover {
      color: #000000;
      text-decoration: underline;
      transition: all 0.5s ease;
    }

    h2 {
      font-size: 2rem;
      line-height: 3.625rem;
      margin-top: 2rem;
      margin-bottom: 2rem;
      font-weight: bold;
    }
  }

  .award-col {
    img {
      margin-bottom: 1rem;
    }
  }
}

footer {
  background-color: #fff;
  padding: 2.5rem 0;
  margin-bottom: 5%;

  a {
    text-decoration: none;
    color: #9e005d;
    transition: all ease 500ms;
  }

  a:hover {
    color: #000000;
  }

  ul {
    margin: 0;
    padding: 0;

    li {
      list-style: none;
      margin-bottom: 1rem;
      font-weight: bold;
    }
  }

  img {
    display: block;
  }

  .socialies {
    display: none;

    a {
      color: #9e005d;
      transition: all ease 500ms;

      i {
        font-size: 2rem;
      }
    }

    a:hover {
      color: #000000;
    }
  }

  .socialies.socialies-mobile {
    display: block;
  }

  .footer-logo-cont {
    display: none;
    margin-bottom: 2.5rem;

    img {
      width: 40%;
    }

    h6 {
      margin-top: 0;
      color: #9e005d;
      font-size: 1.4rem;
      font-weight: bold;
    }
  }

  .footer-logo-cont.flc-mobile {
    display: block;
  }

  .copyright-txt {
    font-size: 0.7rem;
  }

  .title-row {
    margin-bottom: 0;
    font-size: 1rem;

    h4 {
      font-size: 1.5rem;
      font-weight: bold;
      color: #9e005d;
    }
  }
}

.about-inner {
  .about-cont {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(img/about-bg-part1.png);
    background-color: #a0015d;
    color: #fff;
    margin-bottom: 0.375rem;
    padding: 2rem 0 3rem 0;

    h1 {
      font-size: 3.75rem;
      font-weight: bold;
      line-height: 3.625rem;
      margin-bottom: 2.75rem;
      width: 100%;
    }

    h6 {
      font-weight: bold;
      font-size: 2rem;
      line-height: 2.125rem;
      margin-bottom: 2rem;
    }

    p {
      margin-bottom: 2rem;
      font-size: 1.375rem;
      line-height: 1.625rem;
      letter-spacing: -2%;
    }

    p.opening-para {
      font-size: 2rem;
      line-height: 2.125rem;
    }

    h3 {
      font-size: 2rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
      color: #fff;
    }
  }

  .about-cont-3e {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2rem 0;
    background-image: url(img/about-bg-part2.png);
    color: #fff;

    .about-3e-itm {
      padding-right: 0;
      margin-bottom: 3rem;

      h4 {
        font-style: normal;
        font-weight: bold;
        font-size: 2rem;
        line-height: 2.25rem;
        margin-bottom: 1rem;
      }

      .big-para {
        font-size: 2rem;
        line-height: normal;
      }

      .small-para {
        font-size: 1.375rem;
        line-height: 1.625rem;
        letter-spacing: -2%;
      }
    }
  }

  .schedule-discovery-session-cont {
    background-color: #fff;

    border-bottom: 0.313rem solid #9e005d;

    .title-col {
      display: block;

      padding-left: 1rem;
      padding-bottom: 1rem;

      a {
        text-decoration: none;
        transition: all 0.5s ease;
        color: #c4391a;
        transition: all 0.5s ease;
      }

      a:hover {
        text-decoration: underline;
        color: #000;

        h2 {
          color: #000;
        }
      }

      h2 {
        font-size: 2rem;
        margin-bottom: 0;
        /* line-height: 3.625rem; */
        font-weight: bold;
        color: #c4391a;
      }
    }
  }
}

.signal-inner {
  .signal-cont {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(img/signal-bg.png);
    padding: 2rem 0 3rem 0;
    color: #fff;
    margin-bottom: 0.375rem;

    h1 {
      font-size: 3.5rem;
      font-weight: bold;
      line-height: 3.625rem;
      margin-bottom: 2.75rem;
      width: 100%;
    }

    h4 {
      font-weight: bold;
      margin-bottom: 2rem;
      color: #fff;
    }

    .scan-row {
      h2 {
        font-size: 5rem;
        font-weight: bold;
        line-height: 5.375rem;
        margin-bottom: 0;
      }

      h6 {
        font-weight: regular;
        font-size: 1.25rem;
        line-height: 1.625rem;
        letter-spacing: -2%;
        margin-bottom: 1.625rem;
      }

      h4 {
        font-weight: bold;
        margin-bottom: 2.5625rem;
        color: #ffffff;
      }

      .first-para {
        padding-right: 0;

        p {
          font-size: 2rem;
          letter-spacing: -0.02em;
          line-height: 2.125rem;
        }
      }

      .list-itm {
        padding-right: 0;

        h6 {
          font-weight: bold;
          font-size: 1.375rem;
          line-height: 1.625rem;
          letter-spacing: -2%;
        }

        ul {
          margin: 0;
          padding: 0 0 0 1.5rem;

          li {
            font-size: 1.375rem;
            line-height: 1.625rem;
            letter-spacing: -2%;
          }
        }
      }

      .last-para {
        padding-right: 0;

        h6 {
          font-weight: bold;
          font-size: 1.375rem;
          line-height: 1.625rem;
          letter-spacing: -2%;
        }

        P {
          font-size: 1.375rem;
          line-height: 1.625rem;
          letter-spacing: -2%;
        }
      }
    }
  }

  .signal-cont-repeat {
    padding: 2rem 0 3rem 0;
    background-color: #c4391a;
    color: #fff;
    margin-bottom: 0.375rem;

    .signal-cont-repeat-row {
      h2 {
        font-size: 3.5rem;
        font-weight: bold;
        line-height: 3.625rem;
        margin-bottom: 0;
      }

      h6 {
        font-weight: regular;
        font-size: 1.25rem;
        line-height: 1.625rem;
        letter-spacing: -2%;
        margin-bottom: 1.625rem;
      }

      h4 {
        font-weight: bold;
        margin-bottom: 2.5625rem;
        color: #ffffff;
      }

      .first-para {
        padding-right: 0;

        p {
          font-size: 2rem;
          letter-spacing: -0.02em;
          line-height: 2.125rem;
        }
      }

      .list-itm {
        padding-right: 0;

        h6 {
          font-weight: bold;
          font-size: 1.375rem;
          line-height: 1.625rem;
          letter-spacing: -2%;
        }

        ul {
          /* margin: 0; */
          padding: 0 0 0 1.5rem;

          li {
            font-size: 1.375rem;
            line-height: 1.625rem;
            letter-spacing: -2%;
          }
        }
      }

      .last-para {
        padding-right: 7rem;

        h6 {
          font-weight: bold;
          font-size: 1.375rem;
          line-height: 1.625rem;
          letter-spacing: -2%;
        }

        P {
          font-size: 1.375rem;
          line-height: 1.625rem;
          letter-spacing: -2%;
        }
      }
    }
  }

  .signal-cont-repeat.detect-cont {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(img/signal-bg2.png);
  }

  .about-cont-3e {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2rem var(--main-padding);
    background-image: url(img/about-bg-part2.png);
    color: #fff;

    .about-3e-itm {
      padding-right: 5.313rem;

      h4 {
        font-style: normal;
        font-weight: bold;
        font-size: 2rem;
        line-height: 2.25rem;
        margin-bottom: 2rem;
      }

      p {
        font-size: 2rem;
        line-height: 2.25rem;

        small {
          font-size: 1.25rem;
          line-height: 1.625rem;
        }
      }
    }
  }

  .schedule-discovery-session-cont {
    background-color: #fff;

    border-bottom: 0.313rem solid #9e005d;

    .title-col {
      display: block;
      padding-left: 1rem;
      padding-bottom: 1rem;

      a {
        color: #c4391a;
        transition: all 0.5s ease;

        h2 {
          font-size: 2rem;
          margin-bottom: 0;
          font-weight: bold;
          color: #c4391a;
          margin-bottom: 0.5rem;
          letter-spacing: -0.02em;
          transition: all 0.5s ease;
        }
      }

      a:hover {
        color: #000;

        h2 {
          color: #000;
        }
      }

      a:last-child {
        color: #c4391a;

        h2 {
          color: #c4391a;
          letter-spacing: -0.02em;
        }
      }

      a:last-child:hover {
        color: #000;

        h2 {
          color: #000;
        }
      }
    }
  }
}

.services-inner {
  .services-cont {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(img/services-bg.png);
    background-color: #ff00ff;
    padding: 2rem 0 3rem 0;
    color: #fff;
    margin-bottom: 0.375rem;

    h1 {
      font-size: 3.5rem;
      font-weight: bold;
      line-height: 3.625rem;
      margin-bottom: 2.75rem;
      width: 100%;
    }

    h4 {
      font-weight: bold;
      margin-bottom: 5rem;
      color: #fff;
    }

    .strategy-discovery-row {
      h2 {
        font-size: 3.5rem;
        font-weight: bold;
        line-height: 3.625rem;
        margin-bottom: 5rem;
      }

      h6 {
        font-weight: bold;
        font-size: 2rem;
        line-height: 2.125rem;
        letter-spacing: -2%;
        margin-bottom: 2rem;
      }

      h4 {
        font-weight: bold;
        margin-bottom: 2.5625rem;
        color: #ffffff;
        width: 50%;
      }

      .black-text {
        h6 {
          font-size: 1.375rem;
          line-height: 1.625rem;
          letter-spacing: -2%;
        }
        p {
          font-size: 1.375rem;
          line-height: 1.625rem;
          letter-spacing: -2%;
          margin-bottom: 3rem;
        }
      }
    }
  }

  .services-cont-repeat.detect-cont {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(img/services-bg2.png);
  }

  .services-cont-repeat {
    padding: 2rem 0 3rem 0;
    background-color: #ff00ff;
    color: #fff;
    margin-bottom: 0.375rem;

    .strategy-discovery-row {
      h2 {
        font-size: 2rem;
        font-weight: bold;
        line-height: 3.625rem;
        margin-bottom: 5rem;
      }

      h6 {
        font-weight: bold;
        font-size: 1.375rem;
        line-height: 1.625rem;
        letter-spacing: -2%;
        margin-bottom: 1.625rem;
      }

      h4 {
        font-weight: bold;
        margin-bottom: 2.5625rem;
        color: #ffffff;
        width: 50%;
      }

      .black-text {
        color: #000;
        font-size: 1.375rem;
        line-height: 1.625rem;
        letter-spacing: -2%;
      }
    }
  }

  .schedule-discovery-session-cont {
    background-color: #fff;

    border-bottom: 0.313rem solid #9e005d;

    .title-col {
      display: block;

      h2 {
        font-size: 2rem;
        margin-bottom: 0;
        font-weight: bold;
        color: #ff00ff;
        margin-bottom: 0.3rem;
        letter-spacing: -0.02em;
      }

      h2:last-child {
        color: #9e005d;
        letter-spacing: -0.02em;
        transition: all 0.5s ease;
      }

      h2:last-child:hover {
        color: #000;
      }
    }
  }
}

.proof-inner {
  .proof-cont {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2rem 0 3rem 0;
    margin-bottom: 0.375rem;
    border-bottom: 0.313rem solid #9e005d;

    h1 {
      font-size: 3.5rem;
      font-weight: bold;
      line-height: 3.625rem;
      margin-bottom: 2.75rem;
      width: 85%;
      color: #9e005d;
    }

    .quotation {
      font-size: 2rem;
      line-height: normal;
      letter-spacing: normal;
      color: #9e005d;
      margin-top: 2.5rem;
    }

    p {
      font-size: 1.375rem;
      line-height: 1.625rem;
      letter-spacing: -2%;
    }
  }

  .schedule-discovery-session-cont {
    background-color: #fff;

    border-bottom: 0.313rem solid #9e005d;

    .title-col {
      display: block;

      a {
        color: #ff00ff;

        h2 {
          font-size: 2rem;
          margin-bottom: 0;
          font-weight: bold;
          color: #ff00ff;
          margin-bottom: 1.6rem;
          letter-spacing: -0.02em;
        }
      }

      a:hover {
        color: #000;

        h2 {
          color: #000;
        }
      }

      a:last-child {
        color: #9e005d;

        h2 {
          color: #9e005d;
          letter-spacing: -0.02em;
        }
      }

      a:last-child:hover {
        color: #000;

        h2 {
          color: #000;
        }
      }
    }
  }
}

.powered-by-txt {
  font-size: 1.375rem;
  line-height: 1.625rem;
  letter-spacing: -2%;

  span {
    font-weight: bold;
  }
}

/* Scroll animation styles */

.contact-inner {
  .contact-cont {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2rem var(--main-padding) 3rem var(--main-padding);
    margin-bottom: 0.375rem;
    border-bottom: 0.313rem solid #9e005d;

    h1 {
      font-size: 2rem;
      font-weight: bold;
      /* line-height: 5.375rem; */
      margin-bottom: 2.75rem;
      width: 85%;
      color: #9e005d;
    }

    .quotation {
      font-size: 2rem;
      color: #9e005d;
      margin-top: 2.5rem;
    }

    .form-control {
      border-radius: 0;
      background-color: #e8e8e8;
    }
  }

  .schedule-discovery-session-cont {
    background-color: #fff;
    padding: 2.5rem 0;
    border-bottom: 0.313rem solid #9e005d;

    .title-col {
      display: block;
      padding-left: 3rem;

      h2 {
        font-size: 5rem;
        margin-bottom: 0;
        font-weight: bold;
        color: #ff00ff;
        margin-bottom: 1.6rem;
        letter-spacing: -0.02em;
      }

      h2:last-child {
        color: #9e005d;
        letter-spacing: -0.02em;
      }
    }
  }
}

@media (min-width: 992px) {
  .navbar {
    padding-top: 1.56rem;
    padding-bottom: 1.56rem;

    .navbar-nav {
      .nav-item {
        .nav-link {
          padding-right: 1rem;
          padding-left: 1rem;
        }
      }
    }

    .navbar-brand {
      width: 15%;
    }
  }

  .main-cont {
    /* background-color: #c4391a00; */
    padding: 0 var(--main-padding);

    #animation-container {
      position: absolute;
      inset: 0;
    }

    .main-text-cont {
      position: relative;
      margin-top: 0;

      .hero-sec {
        height: 80svh;

        h2 {
          font-size: 5rem;
          line-height: 5.325rem;
          width: 40%;
        }
      }

      .intro-txt {
        width: 56%;

        p {
          font-size: 2rem;
          line-height: 2rem;
        }
      }

      .intro-txt-p2 {
        width: 56%;
      }

      .four-pillers {
        .piller-itm {
          margin-bottom: 0;

          h3 {
            margin-bottom: 2rem;
          }
        }
      }
    }
  }

  .three-things-cont {
    padding: 2rem var(--main-padding);

    h4 {
      font-size: 2rem;
      font-weight: normal;
    }

    h2 {
      font-size: 4.5rem;
      line-height: normal;
    }

    h5 {
      font-size: 2rem;
      margin-bottom: 6.5rem;
    }

    .fact-row {
      .fact-itm {
        padding: 1rem;
      }
    }
  }

  .schedule-discovery-session-cont {
    padding: 2.5rem 0;

    .title-col {
      /* padding-left: 3rem;*/
      display: flex;
      align-items: center;
      /* justify-content: center; */

      h2 {
        /* font-size: 5rem; */
        line-height: normal;
        margin-top: 0;
        margin-bottom: 0;
      }
    }

    .award-col {
      img {
        margin-bottom: 0;
      }
    }
  }

  footer {
    .socialies {
      display: block;
    }

    .socialies.socialies-mobile {
      display: none;
    }

    .footer-logo-cont {
      display: block;
      margin-bottom: 0.5rem;
    }

    .footer-logo-cont.flc-mobile {
      display: none !important;
    }

    .title-row {
      margin-bottom: 2rem;
    }
  }

  .about-inner {
    .about-cont {
      padding: 2rem var(--main-padding) 3rem var(--main-padding);

      h1 {
        font-size: 5rem;
        line-height: 5.375rem;
        margin-bottom: 2.75rem;
        width: 85%;
      }
    }

    .schedule-discovery-session-cont {
      padding: 2.5rem 0;

      .title-col {
        /* padding-left: 3rem; */
        padding-bottom: 0;

        /* h2 {
          font-size: 5rem;
          line-height: 4.625rem;
        } */
      }
    }

    .about-cont-3e {
      padding: 2rem var(--main-padding);

      .about-3e-itm {
        /* padding-right: 5.313rem; */
        margin-bottom: 0;

        h4 {
          margin-bottom: 2rem;
        }
      }
    }
  }

  .signal-inner {
    .signal-cont {
      padding: 2rem var(--main-padding) 3rem var(--main-padding);

      h1 {
        font-size: 5rem;
        line-height: 5.375rem;
        width: 85%;
      }

      .scan-row {
        /* .first-para {
          padding-right: 7rem;
        } */

        /* .list-itm {
          padding-right: 7rem;
        } */

        /* .last-para {
          padding-right: 7rem;
        } */
      }
    }

    .schedule-discovery-session-cont {
      padding: 2.5rem 0;
    }

    .signal-cont-repeat {
      padding: 2rem var(--main-padding) 3rem var(--main-padding);

      .signal-cont-repeat-row {
        h2 {
          font-size: 5rem;
          font-weight: bold;
          line-height: 5.375rem;
          margin-bottom: 0;
        }

        /* .first-para {
          padding-right: 7rem;
        } */

        /* .list-itm {
          padding-right: 7rem;
        } */
      }
    }

    .schedule-discovery-session-cont {
      .title-col {
        /* padding-left: 3rem;
        padding-bottom: 0; */

        a {
          h2 {
            /* font-size: 5rem; */
            letter-spacing: -0.02em;
          }
        }
      }
    }
  }

  .services-inner {
    .services-cont {
      padding: 2rem var(--main-padding) 3rem var(--main-padding);

      h1 {
        font-size: 5rem;
        line-height: 5.375rem;
        width: 85%;
      }

      .strategy-discovery-row {
        h2 {
          font-size: 5rem;
          line-height: 5.375rem;
        }
      }
    }

    .services-cont-repeat {
      padding: 2rem var(--main-padding) 3rem var(--main-padding);

      .strategy-discovery-row {
        h2 {
          font-size: 5rem;
          font-weight: bold;
          line-height: 5.375rem;
          margin-bottom: 5rem;
        }
      }
    }

    .schedule-discovery-session-cont {
      padding: 2.5rem 0;

      /* .title-col {
        padding-left: 3rem;

        h2 {
          font-size: 5rem;
          line-height: 5.375rem;
        }
      } */
    }
  }

  .proof-inner {
    .proof-cont {
      padding: 2rem var(--main-padding) 3rem var(--main-padding);

      h1 {
        font-size: 5rem;
        line-height: 5.375rem;
      }
    }

    .schedule-discovery-session-cont {
      padding: 2.5rem 0;

      /* .title-col {
        padding-left: 3rem;

        a {
          h2 {
            font-size: 5rem;
          }
        }
      } */
    }
  }

  /* Scroll animation styles */
  .reveal {
    position: relative;
    opacity: 0;
  }

  .reveal.active {
    opacity: 1;
  }

  /* base style */
  .active.word {
    opacity: 0;
    display: inline-block;
    animation: fadeInWord 0.6s ease forwards;
  }

  /* delays (this creates the sequence) */
  .active.w1 {
    animation-delay: 0s;
  }

  .active.w2 {
    animation-delay: 0.6s;
  }

  .active.w3 {
    animation-delay: 1.2s;
  }

  .active.w4 {
    animation-delay: 1.8s;
  }

  .active.fade-left {
    animation: fade-left 1s ease-in;
  }

  .active.fade-right {
    animation: fade-right 1s ease-in;
  }

  .active.fade-bottom {
    animation: fade-bottom 1s ease-in;
  }

  .active.zoomIn {
    animation-name: zoomIn;
    animation-duration: 0.75s;
    animation-fill-mode: both;
  }
}

/* keyframe */
@keyframes fadeInWord {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes fade-bottom {
  0% {
    transform: translateY(200px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}