/*-------------- Hero Area Start  ---- --------*/
.hero-area {
  padding-top: 80px;
  padding-bottom: 60px; }
  @media (min-width: 1400px) and (max-width: 1499px) {
    .hero-area {
      padding: 80px; } }
  @media (max-width: 991px) {
    .hero-area {
      padding: 50px 0;
      padding-top: 30px; } }
  .hero-area .hero__left {
    position: relative; }
    .hero-area .hero__left .hero_shp {
      position: absolute;
      width: 45px;
      top: -50px;
      left: 0; }
      @media (min-width: 768px) and (max-width: 991px) {
        .hero-area .hero__left .hero_shp {
          width: 30px;
          top: -40px; } }
      @media only screen and (max-width: 767px) {
        .hero-area .hero__left .hero_shp {
          width: 30px;
          top: -35px;
          margin-bottom: 15px; } }
    .hero-area .hero__left h1 {
      color: #231F20;
      font-size: 5.625rem;
      font-weight: 700;
      line-height: 103.75%;
      /*  */
      max-width: 700px; }
      .hero-area .hero__left h1 span {
        color: #0351A3; }
      @media (min-width: 1600px) and (max-width: 1699px) {
        .hero-area .hero__left h1 {
          font-size: 90px; } }
      @media (min-width: 1500px) and (max-width: 1599px) {
        .hero-area .hero__left h1 {
          font-size: 80px; } }
      @media (min-width: 1400px) and (max-width: 1499px) {
        .hero-area .hero__left h1 {
          font-size: 75px; } }
      @media (min-width: 1300px) and (max-width: 1399px) {
        .hero-area .hero__left h1 {
          font-size: 70px; } }
      @media (min-width: 1200px) and (max-width: 1299px) {
        .hero-area .hero__left h1 {
          font-size: 65px; } }
      @media (min-width: 992px) and (max-width: 1199px) {
        .hero-area .hero__left h1 {
          font-size: 60px; } }
      @media (min-width: 768px) and (max-width: 991px) {
        .hero-area .hero__left h1 {
          font-size: 70px; } }
      @media only screen and (max-width: 767px) {
        .hero-area .hero__left h1 {
          font-size: 45px; } }
    .hero-area .hero__left p {
      color: #231F20;
      font-size: 22px;
      font-weight: 400;
      line-height: 145.455%;
      max-width: 750px;
      font-family: "Gantari", sans-serif; }
      @media (min-width: 1600px) and (max-width: 1699px) {
        .hero-area .hero__left p {
          font-size: 21px; } }
      @media (min-width: 1500px) and (max-width: 1599px) {
        .hero-area .hero__left p {
          font-size: 20px; } }
      @media (min-width: 1400px) and (max-width: 1499px) {
        .hero-area .hero__left p {
          font-size: 19px; } }
      @media (min-width: 1300px) and (max-width: 1399px) {
        .hero-area .hero__left p {
          font-size: 18px; } }
      @media (min-width: 1200px) and (max-width: 1299px) {
        .hero-area .hero__left p {
          font-size: 18px; } }
      @media (min-width: 992px) and (max-width: 1199px) {
        .hero-area .hero__left p {
          font-size: 18px; } }
      @media (min-width: 768px) and (max-width: 991px) {
        .hero-area .hero__left p {
          font-size: 20px; } }
      @media only screen and (max-width: 767px) {
        .hero-area .hero__left p {
          font-size: 16px; } }
    .hero-area .hero__left .hero__btn {
      margin-top: 30px; }
    @media (min-width: 768px) and (max-width: 991px) {
      .hero-area .hero__left {
        margin-top: 100px; } }
    @media only screen and (max-width: 767px) {
      .hero-area .hero__left {
        margin-top: 80px; } }


.scroll-down-area {
  text-align: center; }
  .scroll-down-area .scroll__down a {
    display: inline-block; }
    .scroll-down-area .scroll__down a img {
      width: 110px; }
      @media (min-width: 1400px) and (max-width: 1499px) {
        .scroll-down-area .scroll__down a img {
          width: 90px; } }
      @media (min-width: 1300px) and (max-width: 1399px) {
        .scroll-down-area .scroll__down a img {
          width: 80px; } }
      @media (min-width: 1200px) and (max-width: 1299px) {
        .scroll-down-area .scroll__down a img {
          width: 80px; } }
      @media (min-width: 992px) and (max-width: 1199px) {
        .scroll-down-area .scroll__down a img {
          width: 70px; } }
      @media (min-width: 768px) and (max-width: 991px) {
        .scroll-down-area .scroll__down a img {
          width: 80px; } }
      @media only screen and (max-width: 767px) {
        .scroll-down-area .scroll__down a img {
          width: 80px; } }

/*-------------- Hero Area End  ---- --------*/