.hero-area {
     position: relative;
}
 .intro-section {
     height: 720px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     background-position: center center;
     background-size: cover;
}
 .hero-content {
     position: relative;
     z-index: 1;
}
 .hero-content h1 {
     margin: 0 0 25px;
}
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .hero-content h1 {
         font-size: 56px;
    }
}
 @media only screen and (max-width: 767px) {
     .hero-content h1 {
         font-size: 29px;
         margin: 0 0 12px;
    }
}
 @media only screen and (min-width: 576px) and (max-width: 767px) {
     .hero-content h1 {
         font-size: 35px;
    }
}
 .hero-content p {
     margin: 0 0 40px;
}
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .hero-content p {
         font-size: 17px;
         margin: 0 0 30px;
    }
}
 @media only screen and (max-width: 767px) {
     .hero-content p {
         font-size: 16px !important;
         margin: 0 0 25px;
    }
   .hero-content p br {
         display: none;
    }
}
 @media only screen and (min-width: 576px) and (max-width: 767px) {
     .hero-content p {
         font-size: 18px;
         width: 100%;
    }
}
 .swiper-slide-active .intro-section .hero-animated * {
     -webkit-animation-duration: 1.3s;
     animation-duration: 1.3s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
}
 .swiper-slide-active .intro-section .hero-animated h1 {
     -webkit-animation-delay: 1.0s;
     animation-delay: 1.0s;
     -webkit-animation-name: fadeInUp;
     animation-name: fadeInUp;
}
 .swiper-slide-active .intro-section .hero-animated p {
     -webkit-animation-delay: 1.5s;
     animation-delay: 1.5s;
     -webkit-animation-name: fadeInUp;
     animation-name: fadeInUp;
}
 .swiper-slide-active .intro-section .hero-animated a {
     -webkit-animation-delay: 1.9s;
     animation-delay: 1.9s;
     -webkit-animation-name: fadeInUp;
     animation-name: fadeInUp;
}
 .hero-nav-wrap {
     position: absolute;
     top: 50%;
     right: 150px;
     z-index: 2;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
}
 .hero-nav {
     width: 70px;
     height: 70px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     border-radius: 100%;
     color: #222222;
     background-color: #ffffff;
     -webkit-transition: var(--transition);
     -o-transition: var(--transition);
     transition: var(--transition);
     margin: 10px 0;
}
 .hero-nav svg {
     width: 15px;
}
 .hero-nav svg path {
     fill: currentColor;
}
 .hero-nav:hover {
     color: #ffffff;
     background-color: var(--primary-color);
}

@media only screen and (min-width: 1366px) and (max-width: 1499px) {
  .hero-nav-wrap {
    right: 95px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .hero-nav-wrap {
    right: 16px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-nav-wrap {
    right: 29px;
  }
  .intro-section {
    height: 600px;
  }
  .hero-content h1 {
    font-size: 50px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
  .hero-nav-wrap {
    right: 35px;
  }
  .hero-content h1 {
    font-size: 40px !important;
  }
  .intro-section {
    height: 500px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-nav-wrap {
    display: none;
  }
  .hero-content h1 {
    font-size: 25px !important;
  }
  .intro-section {
    height: 420px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-content h1 {
    font-size: 30px !important;
  }
  .hero-content p br {
    display: none;
  }
}