{"version":3,"file":"component---src-pages-index-js-3730277e451b030b2798.js","mappings":"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","sources":["webpack://x-rd/./src/containers/WebApp/Banner/banner.style.js","webpack://x-rd/./src/containers/WebApp/Banner/index.js","webpack://x-rd/./src/containers/WebApp/GetInTouch/getintouch.style.js","webpack://x-rd/./src/containers/WebApp/Intro/intro.style.js","webpack://x-rd/./src/containers/WebApp/Intro/index.js","webpack://x-rd/./src/containers/WebApp/SectionSolutions/product.style.js","webpack://x-rd/./src/containers/WebApp/SectionSolutions/index.js","webpack://x-rd/./src/containers/WebApp/SectionServices/product.style.js","webpack://x-rd/./src/containers/WebApp/SectionServices/index.js","webpack://x-rd/./src/containers/WebApp/Expertise/expertise.style.js","webpack://x-rd/./src/containers/WebApp/Expertise/index.js","webpack://x-rd/./src/pages/index.js"],"sourcesContent":["import themeGet from \"@styled-system/theme-get\";\nimport BannerBg from \"../../../common/assets/image/webApp/banner-bg.svg\";\nimport styled from \"styled-components\";\nconst BannerArea = styled.section`\n  padding-top: 270px;\n  padding-bottom: 305px;\n  position: relative;\n  @media (max-width: 1600px) {\n    padding-top: 210px;\n    padding-bottom: 230px;\n  }\n  @media (max-width: 1024px) {\n    padding-top: 150px;\n    padding-bottom: 180px;\n    background-position: center center;\n  }\n  @media (max-width: 768px) {\n    padding-top: 110px;\n    padding-bottom: 140px;\n  }\n  @media (min-width: 768px) {\n    background: linear-gradient(180deg, #006be9 60%, #ffffff 95%);\n    background-repeat: no-repeat;\n    background-size: cover;\n    background-position: bottom left;\n  }\n  @media (max-width: 767px) {\n    padding-bottom: 0px;\n    background: linear-gradient(180deg, #006be9 80%, #ffffff 100%);\n    height: 550px;\n  }\n  .Container {\n    display: flex;\n    position: relative;\n    z-index: 10;\n  }\n  h2 {\n    font-weight: 500;\n    font-size: 62px;\n    line-height: 1.21;\n    letter-spacing: -2px;\n    color: #ffffff;\n    margin-bottom: 20px;\n    @media (max-width: 1600px) {\n      font-size: 40px;\n      max-width: 414px;\n    }\n    @media (max-width: 768px) {\n      font-size: 35px;\n      margin-left: auto;\n      margin-right: auto;\n      text-align: center;\n      max-width: 421px;\n    }\n    @media (max-width: 574px) {\n      font-size: 30px;\n      max-width: 100%;\n      line-height: 40px;\n      letter-spacing: normal;\n    }\n  }\n  p {\n    font-weight: normal;\n    font-size: 18px;\n    line-height: 2.11;\n    letter-spacing: -0.3px;\n    color: #ffffff;\n    margin-bottom: 0;\n    max-width: 515px;\n    opacity: 0.8;\n    @media (max-width: 1600px) {\n      font-size: 16px;\n      max-width: 466px;\n    }\n    @media (max-width: 1024px) {\n      max-width: 400px;\n    }\n    @media (max-width: 768px) {\n      max-width: 440px;\n      margin-left: auto;\n      text-align: center;\n      margin-right: auto;\n    }\n  }\n  .ButtonWrap {\n    display: flex;\n    margin-top: 35px;\n    align-items: center;\n    @media (max-width: 1600px) {\n      margin-top: 20px;\n    }\n    @media (max-width: 768px) {\n      justify-content: center;\n    }\n    @media (max-width: 575px) {\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n      padding-bottom: 40px;\n    }\n    span {\n      font-weight: 500;\n      font-size: 15px;\n      color: #ffffff;\n      opacity: 0.6;\n      line-height: 1;\n      margin-bottom: 0;\n      margin-left: 25px;\n      @media (max-width: 1600px) {\n        font-size: 14px;\n      }\n      @media (max-width: 768px) {\n        margin-left: 15px;\n      }\n      @media (max-width: 575px) {\n        margin-left: 0;\n        margin-top: 10px;\n      }\n    }\n  }\n  .Button {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 30px;\n    font-weight: bold;\n    font-size: 16px;\n    text-align: center;\n    line-height: 1;\n    color: #23374d;\n    padding: 21px 29px;\n    background-color: #ffffff;\n    transition: all 500ms ease;\n    &:hover {\n      background-color: #ffffff;\n      color: #23374d;\n      i {\n        transform: translateX(2px);\n      }\n    }\n    i {\n      margin-left: 10px;\n      position: relative;\n      top: 1px;\n      transition: transform 0.4s ease;\n    }\n    @media (max-width: 1600px) {\n      font-size: 14px;\n      padding: 16px 23px;\n    }\n    @media (max-width: 575px) {\n      width: 100%;\n    }\n  }\n  .bannerImage {\n    position: absolute;\n    top: 120px;\n    right: 0;\n    display: flex;\n    align-items: center;\n    @media (max-width: 1600px) {\n      top: 0px;\n      img {\n        transform: scale(0.8);\n        transform-origin: right center;\n      }\n    }\n    @media (max-width: 1300px) {\n      top: 100px;\n      max-width: 60%;\n    }\n    @media (max-width: 1024px) {\n      top: 0;\n      max-width: 85%;\n      img {\n        transform: scale(0.6);\n        transform-origin: right center;\n      }\n    }\n    @media (max-width: 768px) {\n      max-width: 100%;\n      position: relative;\n      top: auto;\n      right: auto;\n      margin-top: 40px;\n      img {\n        transform: scale(1);\n        transform-origin: center center;\n      }\n    }\n  }\n\n  .bannerImage img {\n    width: 730px;\n    margin-right: 140px;\n    margin-top: 30px;\n    @media (max-width: 1024px) {\n      margin-bottom: 0;\n      display: none;\n    }\n    @media (max-width: 574px) {\n      display: none;\n    }\n  }\n\n  .card {\n    max-width: 45ch;\n    max-height: 45ch;\n    width: 50%;\n    height: 50%;\n    background: grey;\n    border-radius: 5px;\n    background-image: url(https://drscdn.500px.org/photo/435236/q%3D80_m%3D1500/v2?webp=true&sig=67031bdff6f582f3e027311e2074be452203ab637c0bd21d89128844becf8e40);\n    background-size: cover;\n    background-position: center center;\n    box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.3);\n    transition: box-shadow 0.5s;\n    will-change: transform;\n    border: 15px solid white;\n  }\n\n  .card:hover {\n    box-shadow: 0px 30px 100px -10px rgba(0, 0, 0, 0.4);\n  }\n`;\n\nexport default BannerArea;\n\nexport const Col = styled.div`\n  flex: 0 0 50%;\n  max-width: 50%;\n  @media (max-width: 768px) {\n    flex: 0 0 100%;\n    max-width: 100%;\n  }\n`;\n\nexport const TypewriterWrapper = styled.div`\n  font-weight: 500;\n  font-size: 52px;\n  line-height: 1.21;\n  -webkit-letter-spacing: -2px;\n  -moz-letter-spacing: -2px;\n  -ms-letter-spacing: -2px;\n  letter-spacing: -2px;\n  color: #ffffff;\n  height: 160px;\n  margin-bottom: 20px;\n  @media (max-width: 1600px) {\n    font-size: 40px;\n    max-width: 414px;\n    text-align: initial;\n  }\n  @media (max-width: 1024px) {\n    font-size: 35px;\n    margin-bottom: 20px;\n    margin-top: 20px;\n    text-align: left;\n    max-width: 100%;\n  }\n  @media (max-width: 767px) {\n    font-size: 35px;\n    margin-bottom: 0;\n    margin-top: 20px;\n    text-align: center;\n    max-width: 100%;\n  }\n  @media (max-width: 575px) {\n    width: 100%;\n    margin-top: 50px;\n    margin-bottom: 10px;\n    font-size: 35px;\n  }\n`;\n","import Box from \"../../../common/components/Box\";\nimport Heading from \"../../../common/components/Heading\";\nimport Text from \"../../../common/components/Text\";\nimport Container from \"../../../common/components/UI/Container\";\nimport { BANNER_DATA } from \"../../../common/data/WebApp\";\n// import Image from \"next/image\";\n\nimport { Link } from \"gatsby\";\nimport React from \"react\";\nimport { Icon } from \"react-icons-kit\";\nimport { androidArrowForward } from \"react-icons-kit/ionicons/androidArrowForward\";\nimport Typewriter from \"typewriter-effect\";\nimport BannerArea, { Col, TypewriterWrapper } from \"./banner.style\";\n\nconst Banner = () => {\n  const { title, text, button, image, tagline } = BANNER_DATA;\n\n  return (\n    <BannerArea id=\"banner_section\">\n      <Container className=\"Container\">\n        <Col>\n          <TypewriterWrapper>\n            <Typewriter\n              className=\"typewriterLabel\"\n              options={{\n                strings: title,\n                autoStart: true,\n                loop: false,\n                cursor: \"_\",\n              }}\n            />\n          </TypewriterWrapper>\n          <Text as=\"p\" content={text} />\n        </Col>\n      </Container>\n      <Box className=\"bannerImage\">\n        {image.map(({ src }, index) => (\n          <img src={src} alt=\"\" key={`banner-image-key-${index}`} />\n        ))}\n      </Box>\n    </BannerArea>\n  );\n};\n\nexport default Banner;\n","import styled from \"styled-components\";\n\nconst GetInTouchArea = styled.section`\n  background-color: #00d4ff;\n  padding: 100px;\n  @media (max-width: 768px) {\n    padding-top: 70px;\n    padding-bottom: 50px;\n  }\n  .container {\n    text-align: center;\n  }\n  h4 {\n    margin: 0;\n    font-weight: normal;\n    font-size: 24px;\n    line-height: 1.75;\n    text-align: center;\n    letter-spacing: -0.015em;\n    color: #0f2137;\n    background-color: #f3f7fb;\n    display: inline-block;\n    padding-left: 30px;\n    padding-right: 30px;\n    position: relative;\n    top: -15px;\n  }\n  .imageWrap {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    opacity: 0.6;\n    margin-top: 45px;\n    @media (max-width: 851px) {\n      // justify-content: center;\n      // margin-left: -30px;\n      // margin-top: 25px;\n      // img {\n      //   margin-left: 30px;\n      //   margin-bottom: 20px;\n      // }\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      grid-gap: 20px;\n    }\n    @media (max-width: 767px) {\n      grid-template-columns: repeat(3, 1fr);\n      margin-top: 30px;\n      margin-bottom: 30px;\n      display: flex;\n      align-items: center;\n    }\n  }\n  .client-image-wrapper {\n    width: 170px;\n    cursor: pointer;\n    // &:hover {\n    //   animation: var(--wobbleVertical);\n    // }\n    @media (max-width: 767px) {\n      width: 80px;\n    }\n  }\n`;\n\nexport default GetInTouchArea;\n","import themeGet from \"@styled-system/theme-get\";\nimport styled from \"styled-components\";\n\nconst IntroArea = styled.section`\n  padding-top: 150px;\n  padding-bottom: 165px;\n  @media (max-width: 1600px) {\n    padding-top: 100px;\n    padding-bottom: 115px;\n  }\n  @media (max-width: 375px) {\n    padding-top: 70px;\n    padding-bottom: 95px;\n  }\n  .blockTitle {\n    text-align: center;\n    @media (max-width: 768px) {\n      flex: 0 0 100%;\n      padding-top: 50px;\n      max-width: 75%;\n      margin-left: auto;\n      margin-right: auto;\n      text-align: center;\n    }\n    @media (max-width: 480px) {\n      max-width: 100%;\n      text-align: center;\n    }\n    h2 {\n      font-weight: 500;\n      font-size: 40px;\n      line-height: 1.37;\n      text-align: center;\n      letter-spacing: -0.02em;\n      color: #006be9;\n      margin: 0;\n      max-width: 100%;\n      @media (max-width: 1600px) {\n        font-size: 32px;\n        line-height: 1.41;\n        max-width: 100%;\n      }\n      @media (max-width: 768px) {\n        max-width: 100%;\n      }\n      @media (max-width: 375px) {\n        font-size: 22px;\n      }\n    }\n    p {\n      margin: 0;\n      font-weight: normal;\n      font-size: 16px;\n      line-height: 2;\n      color: #0f2137;\n      max-width: 100%;\n      text-align: center;\n      margin-top: 30px;\n      margin-bottom: 30px;\n      @media (max-width: 1600px) {\n        font-size: 15px;\n        line-height: 1.87;\n        max-width: 100%;\n      }\n      @media (max-width: 768px) {\n        max-width: 100%;\n        text-align: left;\n      }\n    }\n\n    .button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      font-weight: 500;\n      color: #00D4FF;\n      font-size: 16px;\n      position: relative;\n      &:hover {\n        &:before {\n          opacity: 0;\n        }\n        span {\n          i {\n            transform: translateX(2px);\n          }\n        }\n      }\n      &:after,\n      &:before {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n        transition: opacity 0.4s ease;\n      }\n      &:before {\n        background-image: transparent;\n      }\n      &:after {\n        background-image: transparent;\n        );\n        z-index: -1;\n      }\n      i {\n        margin-left: 10px;\n        position: relative;\n        top: -1px;\n        transition: transform 0.4s ease;\n      }\n      span {\n        position: relative;\n        display: flex;\n        z-index: 2;\n      }\n    }\n  }\n\n  .postsWrap {\n    flex: 0 0 50%;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    @media (max-width: 768px) {\n      flex: 0 0 100%;\n      max-width: 79%;\n      margin-left: auto;\n      margin-right: auto;\n    }\n    @media (max-width: 480px) {\n      max-width: 100%;\n    }\n  }\n\n  .postsWrap img {\n    width: 490px;\n    @media (max-width: 575px) {\n      width: 250px;\n    }\n  }\n\n  .post {\n    width: calc(50% - 12.5px);\n    padding: 50px 40px;\n    background: #fff;\n    box-shadow: 0px 4px 6px rgba(132, 159, 184, 0.15);\n    border-radius: 10px;\n    margin-bottom: 25px;\n    @media (max-width: 768px) {\n      width: calc(50% - 20px);\n    }\n    @media (max-width: 425px) {\n      padding: 30px;\n      width: calc(50% - 12.5px);\n    }\n    p {\n      margin: 0;\n      font-size: 18px;\n      color: #0f2137;\n      line-height: 1;\n      @media (max-width: 1600px) {\n        font-size: 17px;\n      }\n      @media (max-width: 375px) {\n        font-size: 15px;\n      }\n    }\n    @media (min-width: 769px) {\n      &:nth-of-type(2) {\n        position: relative;\n        top: 40px;\n      }\n      &:nth-of-type(4) {\n        position: relative;\n        top: 40px;\n      }\n      &:nth-of-type(3) {\n        .postCount {\n          align-items: baseline;\n          span {\n            top: 0;\n          }\n        }\n      }\n    }\n    transition: transform 0.4s ease;\n    &:hover {\n      transform: translateY(-5px);\n    }\n  }\n  .postCount {\n    display: flex;\n    align-items: flex-start;\n    margin-top: 5px;\n    margin-bottom: 5px;\n    h3 {\n      margin: 0;\n      font-size: 80px;\n      line-height: 1;\n      letter-spacing: -0.02em;\n      color: #f47421;\n      font-weight: 400;\n      @media (max-width: 1600px) {\n        font-size: 70px;\n      }\n      @media (max-width: 768px) {\n        font-size: 60px;\n      }\n      @media (max-width: 375px) {\n        font-size: 48px;\n      }\n    }\n    span {\n      margin: 0;\n      font-weight: 500;\n      font-size: 40px;\n      line-height: 1;\n      letter-spacing: -0.02em;\n      color: #f47421;\n      position: relative;\n      top: 5px;\n      margin-left: 5px;\n      @media (max-width: 375px) {\n        font-size: 30px;\n      }\n    }\n  }\n`;\nexport default IntroArea;\n\nexport const Row = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  @media (max-width: 768px) {\n    flex-direction: column-reverse;\n  }\n`;\n\nexport const Col = styled.div`\n  flex: 0 0 40%;\n  @media (max-width: 1199px) {\n    flex: 0 0 100%;\n  }\n  &.image {\n    position: relative;\n    flex: 0 0 60%;\n    @media (min-width: 1850px) and (max-width: 2500px) {\n      position: absolute;\n      left: 0;\n      bottom: -5px;\n    }\n    @media (max-width: 1199px) {\n      flex: 0 0 100%;\n    }\n  }\n`;\n","import Box from \"../../../common/components/Box\";\nimport Heading from \"../../../common/components/Heading\";\nimport Text from \"../../../common/components/Text\";\nimport Container from \"../../../common/components/UI/Container\";\nimport { INTRO_DATA } from \"../../../common/data/WebApp\";\nimport { Link } from \"gatsby\";\n\nimport React from \"react\";\nimport { Icon } from \"react-icons-kit\";\nimport { androidArrowForward } from \"react-icons-kit/ionicons/androidArrowForward\";\nimport IntroArea, { Row, Col } from \"./intro.style\";\nconst Intro = () => {\n  const { blockTitle, image } = INTRO_DATA;\n  const { title, text, button } = blockTitle;\n  return (\n    <IntroArea>\n      <Container>\n        <Col>\n          <Box className=\"blockTitle\">\n            <Heading as=\"h2\" content={title} />\n            <Text as=\"p\" content={text} />\n            <Link className=\"button\" to={button.link}>\n              <span>\n                {button.label}\n                <Icon icon={androidArrowForward} size={16} />\n              </span>\n            </Link>\n          </Box>\n        </Col>\n      </Container>\n    </IntroArea>\n  );\n};\n\nexport default Intro;\n","import themeGet from \"@styled-system/theme-get\";\nimport styled from \"styled-components\";\n\nconst ProductArea = styled.section`\n  padding-top: 150px;\n  padding-bottom: 150px;\n  background-color: white;\n  @media (max-width: 1600px) {\n    padding-top: 50px;\n    padding-bottom: 50px;\n  }\n  @media (max-width: 375px) {\n    padding-top: 80px;\n    padding-bottom: 60px;\n  }\n  .Container {\n    max-width: 1170px;\n  }\n  .reusecore__switch {\n    margin-left: 10px;\n    margin-right: 10px;\n    input[type=\"checkbox\"] + div {\n      width: 66px;\n      height: calc(66px / 2);\n      background-color: #3fdbb1;\n      border-color: rgba(255, 255, 255, 0);\n      > div {\n        width: calc(66px / 2 - 8px);\n        height: calc(66px / 2 - 8px);\n      }\n    }\n    input[type=\"checkbox\"].switch:checked + div {\n      width: 66px;\n      background-color: #3fdbb1;\n      border-color: rgba(255, 255, 255, 0);\n    }\n    input[type=\"checkbox\"].switch:checked + div > div {\n      left: calc(66px / 2 + 3px);\n    }\n  }\n  .priceFilter {\n    margin-bottom: 70px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    @media (max-width: 575px) {\n      margin-bottom: 40px;\n    }\n    span {\n      font-weight: 500;\n      font-size: 16px;\n      line-height: 1;\n      text-align: center;\n      color: #0f2137;\n    }\n  }\n\n  @keyframes fadeIn {\n    0% {\n      opacity: 0;\n      transform: translateY(-50%);\n    }\n    100% {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes fadeIn2 {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n`;\nexport const TopHeading = styled.div`\n  text-align: center;\n\n  h2 {\n    font-weight: 500;\n    font-size: 28px;\n    text-align: left;\n    letter-spacing: -0.5px;\n    margin-bottom: 0;\n    color: #0f2137;\n    @media (max-width: 1600px) {\n      font-size: 1.5em;\n      padding-bottom: 34px;\n    }\n    @media (max-width: 575px) {\n      font-size: 22px;\n    }\n  }\n`;\nexport const Row = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n`;\nexport const Col = styled.div`\n  flex: 0 0 33.33%;\n  max-width: 32%;\n  padding-left: 0px;\n  padding-right: 0px;\n  border: 3px solid rgb(0, 109, 233);\n  border-radius: 12px;\n  margin-right: 10px; /* Creates spacing on the right */\n  box-shadow: 6px 11px 30px -15px rgba(0, 0, 0, 0.8);\n  @media (max-width: 667px) {\n    flex: 0 0 100%;\n    max-width: 100%;\n  }\n  @media (max-width: 575px) {\n    margin-bottom: 50px;\n  }\n`;\nexport const PriceCard = styled.div`\n  background-color: #ffffff;\n  border-radius: 15px;\n  padding-left: 40px;\n  padding-right: 40px;\n  @media (max-width: 575px) {\n    padding-left: 20px;\n    padding-right: 20px;\n    margin-bottom: 50px;\n  }\n  h3 {\n    font-weight: bold;\n    font-size: 40px;\n    text-transform: capitalize;\n    color: #0f2137;\n    margin-bottom: 0;\n    line-height: 1;\n    margin-top: -10px;\n  }\n  h4 {\n    font-weight: 500;\n    font-size: 30px;\n    letter-spacing: -0.55px;\n    line-height: 1;\n    margin-bottom: 0;\n    color: #0f2137;\n  }\n  .priceBtn {\n    width: 100%;\n    color: #1a1a1a;\n    border-radius: 8px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 15px;\n    font-weight: 700;\n    min-height: 60px;\n    margin-top: 50px;\n    transition: all 500ms ease;\n    i {\n      margin-left: 10px;\n      transition: transform 500ms ease;\n    }\n    &:hover {\n      color: #00d4ff;\n      &:before {\n        opacity: 0;\n      }\n      span {\n        i {\n          transform: translateX(5px);\n        }\n      }\n    }\n    span {\n      z-index: 1;\n    }\n    position: relative;\n    z-index: 1;\n    &:after,\n    &:before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n      transition: opacity 0.4s ease;\n    }\n    &:before {\n      background-image: transparent;\n    }\n    &:after {\n      background-image: transparent;\n      z-index: -1;\n    }\n  }\n  .productImage {\n    width: 230px;\n  }\n  .priceList {\n    height: 240px;\n    @media (max-width: 768px) {\n      padding: 20px;\n    }\n    li {\n      list-style-type: disc;\n      color: #0f2137;\n      font-size: 16px;\n      line-height: 1.75;\n      position: relative;\n      animation: fadeIn 0.8s linear;\n      + li {\n        margin-top: 10px;\n      }\n      i {\n        position: absolute;\n        left: 0;\n        top: 0;\n        color: #3fdbb1;\n      }\n    }\n  }\n  &.recommended {\n    background-image: linear-gradient(\n      145.76deg,\n      ${themeGet(\"colors.gradientPrimary\")} -94.95%,\n      ${themeGet(\"colors.gradientSecondary\")} 132.3%\n    );\n    @media (max-width: 667px) {\n      margin-top: 30px;\n    }\n    h3,\n    h4,\n    p,\n    span.pricingLabel {\n      color: #fff;\n    }\n    ul li,\n    ul li i {\n      color: #fff;\n    }\n    .priceBtn {\n      color: #132636;\n      &:before {\n        background-image: none;\n        background-color: #fff;\n      }\n      &:after {\n        display: none;\n      }\n      &:hover {\n        &:before {\n          opacity: 1;\n        }\n        color: #132636;\n      }\n    }\n  }\n`;\nexport const CardTop = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  animation: fadeIn2 0.8s linear;\n  padding-top: 50px;\n  margin-bottom: 50px;\n  height: 140px;\n  align-items: center;\n  justify-content: center;\n`;\nexport const CardBody = styled.div`\n  > span.pricingLabel {\n    display: block;\n    font-weight: bold;\n    font-size: 16px;\n    line-height: 1;\n    color: #0f2137;\n    margin-bottom: 30px;\n    animation: fadeIn2 0.8s linear;\n  }\n`;\nexport const CardFooter = styled.div`\n  animation: fadeIn2 0.8s linear;\n  padding-bottom: 50px;\n  @media (max-width: 575px) {\n    padding-bottom: 0px;\n  }\n`;\nexport const PricingAmount = styled.div`\n  text-align: right;\n  p {\n    margin-top: 5px;\n    font-size: 16px;\n    line-height: 19px;\n    letter-spacing: -0.5px;\n    color: #8d909c;\n    line-height: 1;\n  }\n`;\nexport default ProductArea;\n","import Heading from \"../../../common/components/Heading\";\nimport Container from \"../../../common/components/UI/Container\";\nimport { PRODUCTS_DATA } from \"../../../common/data/WebApp\";\nimport { Link } from \"gatsby\";\nimport React, { useState } from \"react\";\nimport { Icon } from \"react-icons-kit\";\nimport { androidArrowForward } from \"react-icons-kit/ionicons/androidArrowForward\";\nimport ProductArea, {\n  CardBody,\n  CardFooter,\n  CardTop,\n  Col,\n  PriceCard,\n  PricingAmount,\n  Row,\n  TopHeading,\n} from \"./product.style\";\n\nconst SectionSolutions = () => {\n  return (\n    <ProductArea id=\"product_section\">\n      <Container className=\"Container\">\n        <Row>\n          <TopHeading>\n            <Heading as=\"h2\" content=\"Solutions\" />\n          </TopHeading>\n        </Row>\n        <Row>\n          {PRODUCTS_DATA?.map(\n            (\n              {\n                product,\n                title,\n                image,\n                price,\n                tagline,\n                planLabel,\n                options,\n                button,\n              },\n              index\n            ) => (\n              <Col key={`key-${index}`}>\n                <PriceCard className={product === 1 ? \"recommended\" : \" \"}>\n                  <CardTop>\n                    {image !== \"\" ? (\n                      <img\n                        className=\"productImage\"\n                        src={image}\n                        alt=\"product-logo\"\n                      />\n                    ) : (\n                      <Heading as=\"h3\" content={title} />\n                    )}\n                  </CardTop>\n\n                  <CardFooter>\n                    <Link className=\"priceBtn\" to={button?.link}>\n                      <span>\n                        {button?.label}\n                        <Icon size={18} icon={androidArrowForward} />\n                      </span>\n                    </Link>\n                  </CardFooter>\n                </PriceCard>\n              </Col>\n            )\n          )}\n        </Row>\n      </Container>\n    </ProductArea>\n  );\n};\n\nexport default SectionSolutions;\n","import themeGet from \"@styled-system/theme-get\";\nimport styled from \"styled-components\";\n\nconst ProductArea = styled.section`\n  padding-top: 150px;\n  padding-bottom: 150px;\n  background-color: white;\n  @media (max-width: 1600px) {\n    padding-top: 50px;\n    padding-bottom: 50px;\n  }\n  @media (max-width: 375px) {\n    padding-top: 80px;\n    padding-bottom: 60px;\n  }\n  .Container {\n    max-width: 1170px;\n  }\n  .reusecore__switch {\n    margin-left: 10px;\n    margin-right: 10px;\n    input[type=\"checkbox\"] + div {\n      width: 66px;\n      height: calc(66px / 2);\n      background-color: #3fdbb1;\n      border-color: rgba(255, 255, 255, 0);\n      > div {\n        width: calc(66px / 2 - 8px);\n        height: calc(66px / 2 - 8px);\n      }\n    }\n    input[type=\"checkbox\"].switch:checked + div {\n      width: 66px;\n      background-color: #3fdbb1;\n      border-color: rgba(255, 255, 255, 0);\n    }\n    input[type=\"checkbox\"].switch:checked + div > div {\n      left: calc(66px / 2 + 3px);\n    }\n  }\n  .priceFilter {\n    margin-bottom: 70px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    @media (max-width: 575px) {\n      margin-bottom: 40px;\n    }\n    span {\n      font-weight: 500;\n      font-size: 16px;\n      line-height: 1;\n      text-align: center;\n      color: #0f2137;\n    }\n  }\n\n  @keyframes fadeIn {\n    0% {\n      opacity: 0;\n      transform: translateY(-50%);\n    }\n    100% {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes fadeIn2 {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n`;\nexport const TopHeading = styled.div`\n  text-align: center;\n  margin-bottom: 30px;\n  h2 {\n    font-weight: 500;\n    font-size: 28px;\n    text-align: left;\n    letter-spacing: -0.5px;\n    margin-bottom: 0;\n    color: #0f2137;\n    @media (max-width: 1600px) {\n      font-size: 1.5em;\n      padding-bottom: 34px;\n    }\n    @media (max-width: 575px) {\n      font-size: 22px;\n      text-align: center;\n    }\n  }\n`;\nexport const Row = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  .LearnMore {\n    width: 100%;\n    color: #1a1a1a;\n    border-radius: 8px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 15px;\n    font-weight: 700;\n    min-height: 60px;\n    margin-top: 50px;\n    transition: all 500ms ease;\n    i {\n      margin-left: 10px;\n      transition: transform 500ms ease;\n    }\n    &:hover {\n      color: #00d4ff;\n      &:before {\n        opacity: 0;\n      }\n      span {\n        i {\n          transform: translateX(5px);\n        }\n      }\n    }\n    span {\n      z-index: 1;\n    }\n    position: relative;\n    z-index: 1;\n    &:after,\n    &:before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n      transition: opacity 0.4s ease;\n    }\n    &:before {\n      background-image: transparent;\n    }\n    &:after {\n      background-image: transparent;\n      z-index: -1;\n    }\n  }\n`;\nexport const Col = styled.div`\n  flex: 0 0 25%;\n  max-width: 25%;\n  text-align: center;\n  @media (max-width: 667px) {\n    flex: 0 0 100%;\n    max-width: 100%;\n  }\n`;\nexport const PriceCard = styled.div`\n  background-color: #ffffff;\n  border-radius: 15px;\n  padding-left: 40px;\n  padding-right: 40px;\n  @media (max-width: 575px) {\n    padding-left: 20px;\n    padding-right: 20px;\n    margin-top: 20px;\n    margin-bottom: 70px;\n  }\n  h3 {\n    font-weight: bold;\n    font-size: 40px;\n    text-transform: capitalize;\n    color: #0f2137;\n    margin-bottom: 0;\n    line-height: 1;\n    margin-top: -10px;\n  }\n  h4 {\n    font-weight: 500;\n    font-size: 24px;\n    letter-spacing: -0.55px;\n    line-height: 1;\n    margin-bottom: 0;\n    color: #0f2137;\n  }\n\n  .priceBtn {\n    width: 100%;\n    color: #1a1a1a;\n    border-radius: 8px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 15px;\n    font-weight: 700;\n    min-height: 60px;\n    margin-top: 50px;\n    transition: all 500ms ease;\n    i {\n      margin-left: 10px;\n      transition: transform 500ms ease;\n    }\n    &:hover {\n      color: #00d4ff;\n      &:before {\n        opacity: 0;\n      }\n      span {\n        i {\n          transform: translateX(5px);\n        }\n      }\n    }\n    span {\n      z-index: 1;\n    }\n    position: relative;\n    z-index: 1;\n    &:after,\n    &:before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n      transition: opacity 0.4s ease;\n    }\n    &:before {\n      background-image: transparent;\n    }\n    &:after {\n      background-image: transparent;\n      z-index: -1;\n    }\n  }\n  .productImage {\n    margin-bottom: 60px;\n    width: 230px;\n  }\n  .priceList {\n    height: 240px;\n    @media (max-width: 768px) {\n      padding: 20px;\n    }\n    li {\n      list-style-type: disc;\n      color: #0f2137;\n      font-size: 16px;\n      line-height: 1.75;\n      position: relative;\n      animation: fadeIn 0.8s linear;\n      + li {\n        margin-top: 10px;\n      }\n      i {\n        position: absolute;\n        left: 0;\n        top: 0;\n        color: #3fdbb1;\n      }\n    }\n  }\n  &.recommended {\n    background-image: linear-gradient(\n      145.76deg,\n      ${themeGet(\"colors.gradientPrimary\")} -94.95%,\n      ${themeGet(\"colors.gradientSecondary\")} 132.3%\n    );\n    @media (max-width: 667px) {\n      margin-top: 30px;\n    }\n    h3,\n    h4,\n    p,\n    span.pricingLabel {\n      color: #fff;\n    }\n    ul li,\n    ul li i {\n      color: #fff;\n    }\n    .priceBtn {\n      color: #132636;\n      &:before {\n        background-image: none;\n        background-color: #fff;\n      }\n      &:after {\n        display: none;\n      }\n      &:hover {\n        &:before {\n          opacity: 1;\n        }\n        color: #132636;\n      }\n    }\n  }\n`;\nexport const CardTop = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  animation: fadeIn2 0.8s linear;\n  padding-top: 50px;\n  margin-bottom: 50px;\n  height: 140px;\n  align-items: center;\n  justify-content: center;\n`;\nexport const CardBody = styled.div`\n  > span.pricingLabel {\n    display: block;\n    font-weight: bold;\n    font-size: 16px;\n    line-height: 1;\n    color: #0f2137;\n    margin-bottom: 30px;\n    animation: fadeIn2 0.8s linear;\n  }\n`;\nexport const CardFooter = styled.div`\n  animation: fadeIn2 0.8s linear;\n  padding-bottom: 50px;\n`;\nexport const PricingAmount = styled.div`\n  text-align: right;\n  p {\n    margin-top: 5px;\n    font-size: 16px;\n    line-height: 19px;\n    letter-spacing: -0.5px;\n    color: #8d909c;\n    line-height: 1;\n  }\n`;\nexport default ProductArea;\n","// import Box from \"common/components/Box\";\nimport Heading from \"../../../common/components/Heading\";\n// import Switch from \"common/components/Switch\";\nimport Text from \"../../../common/components/Text\";\nimport Container from \"../../../common/components/UI/Container\";\nimport { SERVICES_DATA } from \"../../../common/data/WebApp\";\n// import Link from \"next/link\";\n// import Link from \"../../../components/Link\";\nimport { Link } from \"gatsby\";\nimport React, { useState } from \"react\";\nimport { Icon } from \"react-icons-kit\";\nimport { androidArrowForward } from \"react-icons-kit/ionicons/androidArrowForward\";\nimport { androidDone } from \"react-icons-kit/ionicons/androidDone\";\nimport ProductArea, {\n  CardBody,\n  CardFooter,\n  CardTop,\n  Col,\n  PriceCard,\n  PricingAmount,\n  Row,\n  TopHeading,\n} from \"./product.style\";\n\nconst SectionServices = () => {\n  return (\n    <ProductArea id=\"product_section\">\n      <Container className=\"Container\">\n        <TopHeading>\n          <Heading as=\"h2\" content=\"Services\" />\n        </TopHeading>\n\n        <Row>\n          {SERVICES_DATA?.map(\n            (\n              {\n                product,\n                title,\n                image,\n                price,\n                tagline,\n                planLabel,\n                options,\n                button,\n              },\n              index\n            ) => (\n              <>\n                <Col key={`pricing-card-key-${index}`}>\n                  <PriceCard className={product === 1 ? \"recommended\" : \" \"}>\n                    <CardTop>\n                      {image !== \"\" ? (\n                        <img\n                          className=\"productImage\"\n                          src={image}\n                          alt=\"product-logo\"\n                        />\n                      ) : (\n                        <Heading as=\"h3\" content={title} />\n                      )}\n                    </CardTop>\n                    <CardBody>\n                      <Heading as=\"h4\" content={title} />\n                    </CardBody>\n                  </PriceCard>\n                </Col>\n              </>\n            )\n          )}\n        </Row>\n        <Row>\n          <Link className=\"LearnMore\" to=\"/services\">\n            <span>\n              Learn More\n              <Icon size={18} icon={androidArrowForward} />\n            </span>\n          </Link>\n        </Row>\n      </Container>\n    </ProductArea>\n  );\n};\n\nexport default SectionServices;\n","import themeGet from \"@styled-system/theme-get\";\nimport styled from \"styled-components\";\n\nconst ExpertiseArea = styled.section`\n  position: relative;\n  background-color: #006be9;\n  padding-top: 70px;\n  padding-bottom: 50px;\n  @media (max-width: 1600px) {\n    padding-top: 80px;\n    padding-bottom: 80px;\n  }\n  @media (max-width: 1199px) {\n    padding-top: 50px;\n    padding-bottom: 40px;\n  }\n  @media (max-width: 375px) {\n    padding-top: 80px;\n    padding-bottom: 40px;\n  }\n  .expertiseTitle {\n    text-align: left;\n    font-weight: 500;\n    width: 100%;\n    color: white;\n    @media (max-width: 1199px) {\n      text-align: center;\n    }\n  }\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    font-weight: 500;\n    color: #00d4ff;\n    font-size: 16px;\n    position: relative;\n    z-index: 1;\n\n    &:hover {\n      &:before {\n        opacity: 0;\n      }\n      span {\n        i {\n          transform: translateX(2px);\n        }\n      }\n    }\n    &:after,\n    &:before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n      transition: opacity 0.4s ease;\n    }\n    &:before {\n      background-image: transparent;\n    }\n    &:after {\n      background-image: transparent;\n      z-index: -1;\n    }\n    i {\n      margin-left: 10px;\n      position: relative;\n      top: -1px;\n      transition: transform 0.4s ease;\n    }\n    span {\n      position: relative;\n      display: flex;\n      z-index: 2;\n    }\n  }\n  .sectionImage {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    max-width: none;\n    animation: var(--DashboardFadeIn) 0.8s linear;\n    @media (max-width: 1199px) {\n      max-width: 90%;\n      position: relative;\n      bottom: auto;\n      right: auto;\n      border-radius: 15px;\n      margin-left: auto;\n      margin-right: auto;\n    }\n  }\n  .postWrap,\n  .blockTitle {\n    margin-right: 30px;\n    @media (max-width: 1600px) {\n      padding-left: 0px;\n    }\n    @media (max-width: 1199px) {\n      padding-left: 0;\n      padding-top: 0px;\n    }\n    @media (max-width: 425px) {\n      padding-top: 20px;\n    }\n  }\n  .postWrap {\n    @media (max-width: 1199px) {\n      padding-top: 0;\n    }\n  }\n  .blockTitle {\n    @media (max-width: 1199px) {\n      max-width: 100%;\n      margin-left: auto;\n      text-align: center;\n      margin-right: auto;\n    }\n    @media (max-width: 480px) {\n      max-width: 100%;\n      text-align: left;\n    }\n    h2 {\n      font-weight: 500;\n      font-size: 40px;\n      line-height: 1.3;\n      letter-spacing: -0.02em;\n      color: #ffffff;\n      margin: 0;\n      margin-bottom: 20px;\n      @media (max-width: 1600px) {\n        font-size: 34px;\n        line-height: 1.21;\n      }\n      @media (max-width: 480px) {\n        font-size: 26px;\n      }\n      @media (max-width: 375px) {\n        font-size: 22px;\n      }\n    }\n    p {\n      font-weight: 500;\n      font-size: 16px;\n      line-height: 2;\n      color: #ffffff;\n      margin-bottom: 30px;\n      @media (max-width: 1600px) {\n        line-height: 1.625;\n      }\n    }\n  }\n  .postWrap {\n    padding-bottom: 80px;\n    @media (max-width: 1600px) {\n      padding-bottom: 100px;\n    }\n    @media (max-width: 1199px) {\n      max-width: 60%;\n      margin-left: auto;\n      margin-right: auto;\n    }\n    @media (max-width: 1024px) {\n      padding-bottom: 40px;\n    }\n    @media (max-width: 480px) {\n      max-width: 100%;\n    }\n  }\n  .post {\n    display: flex;\n    padding: 20px;\n    border: 2px solid rgba(255, 255, 255, 0.3);\n    border-radius: 15px;\n    cursor: pointer;\n    transition: all 500ms ease;\n    @media (max-width: 480px) {\n      // flex-direction: column;\n      padding: 10px;\n      border-radius: 10px;\n    }\n    &.active {\n      border: 2px solid rgba(255, 255, 255, 1);\n    }\n    + .post {\n      margin-top: 20px;\n    }\n    .image {\n      margin-right: 20px;\n      flex-shrink: 0;\n      @media (max-width: 480px) {\n        margin-right: 10px;\n        // margin-bottom: 20px;\n        max-width: 20%;\n        flex: 0 0 20%;\n      }\n      img {\n        width: 80px;\n        // @media (max-width: 425px) {\n        //   margin-left: auto;\n        //   margin-right: auto;\n        //   display: block;\n        // }\n      }\n    }\n    .postContent {\n      @media (max-width: 425px) {\n        // text-align: center;\n      }\n      h3 {\n        font-weight: 500;\n        font-size: 17px;\n        line-height: 1.76;\n        letter-spacing: -0.01em;\n        color: #ffffff;\n        margin: 0;\n        margin-bottom: 5px;\n        @media (max-width: 1600px) {\n          font-size: 16px;\n        }\n      }\n      p {\n        margin: 0;\n        font-weight: normal;\n        font-size: 16px;\n        line-height: 1.56;\n        color: #ffffff;\n        @media (max-width: 1600px) {\n          font-size: 15px;\n        }\n      }\n    }\n  }\n`;\n\nexport default ExpertiseArea;\n\nexport const Row = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n`;\nexport const Col = styled.div`\n  flex: 0 0 50%;\n  @media (max-width: 1199px) {\n    flex: 0 0 100%;\n  }\n  &.image {\n    position: relative;\n    flex: 0 0 60%;\n    @media (min-width: 1850px) and (max-width: 2500px) {\n      position: absolute;\n      left: 0;\n      bottom: -5px;\n    }\n    @media (max-width: 1199px) {\n      flex: 0 0 100%;\n    }\n  }\n`;\n","import Box from \"../../../common/components/Box\";\nimport Heading from \"../../../common/components/Heading\";\nimport Text from \"../../../common/components/Text\";\nimport Container from \"../../../common/components/UI/Container\";\nimport { EXPERTISE_DATA } from \"../../../common/data/WebApp\";\n// import Image from \"next/image\";\nimport React, { useState } from \"react\";\n// import Link from \"next/link\";\nimport { Icon } from \"react-icons-kit\";\nimport { androidArrowForward } from \"react-icons-kit/ionicons/androidArrowForward\";\n\nimport ExpertiseArea, { Col, Row } from \"./expertise.style\";\nconst Expertise = () => {\n  const [tab, setTab] = useState({\n    toggle: \"tab-1\",\n  });\n  const { sectionImage, blockTitle, posts, button } = EXPERTISE_DATA;\n  const { title, text, title2 } = blockTitle;\n  const handleClick = (tabName) => {\n    setTab({\n      ...tab,\n      toggle: tabName,\n    });\n  };\n  return (\n    <ExpertiseArea id=\"dashboard_section\">\n      <Container>\n        <Row>\n          <Heading className=\"expertiseTitle\" content={title} />\n        </Row>\n        <Row>\n          <Col className=\"content\">\n            <Box className=\"blockTitle\">\n              <Text as=\"p\" content={posts[0].text} />\n            </Box>\n          </Col>\n          <Col className=\"content\">\n            <Box className=\"blockTitle\">\n              <Text as=\"p\" content={posts[1].text} />\n              {/* <a href={button.link}>\n                <a className=\"button\">\n                  <span>\n                    {button.label}\n                    <Icon icon={androidArrowForward} size={16} />\n                  </span>\n                </a>\n              </a> */}\n            </Box>\n          </Col>\n        </Row>\n      </Container>\n    </ExpertiseArea>\n  );\n};\n\nexport default Expertise;\n","import Banner from \"../containers/WebApp/Banner\";\nimport GetInTouch from \"../containers/WebApp/GetInTouch\";\nimport Intro from \"../containers/WebApp/Intro\";\nimport SectionSolutions from \"../containers/WebApp/SectionSolutions\";\nimport SectionServices from \"../containers/WebApp/SectionServices\";\nimport Expertise from \"../containers/WebApp/Expertise\";\nimport SEO from \"../components/SEO\";\nimport ContactForm from \"../containers/WebApp/ContactForm/Section\";\n\nimport React from \"react\";\n\nconst WebApp = () => {\n  return (\n    <>\n      <SEO title=\"Home\" />\n      <Banner />\n      <Intro />\n      <Expertise />\n      <SectionSolutions />\n      <SectionServices />\n      <ContactForm />\n    </>\n  );\n};\n\nexport default WebApp;\n"],"names":["styled","section","withConfig","displayName","componentId","Col","div","TypewriterWrapper","Banner","title","text","button","image","tagline","BANNER_DATA","React","BannerArea","id","Container","className","Typewriter","options","strings","autoStart","loop","cursor","Text","as","content","Box","map","_ref","index","src","alt","key","Intro","blockTitle","INTRO_DATA","IntroArea","Heading","Link","to","link","label","Icon","icon","androidArrowForward","size","ProductArea","TopHeading","Row","PriceCard","themeGet","CardTop","CardFooter","SectionSolutions","PRODUCTS_DATA","product","price","planLabel","CardBody","SectionServices","SERVICES_DATA","Expertise","tab","setTab","useState","toggle","sectionImage","posts","EXPERTISE_DATA","title2","ExpertiseArea","WebApp","SEO","ContactForm"],"sourceRoot":""}