아래 소스로 작업중인데요.  메인이미지가 자동으로 슬라이딩 되게 하고 싶은데요. 

지금은 오버롤시 생기는 nav 버튼을 눌러야만 다음 이미지로 넘어가네요.

일정 시간이 지나면 자동으로 슬라이딩 되는 부분을 추가하려면 어떻게 해야 할까요?

도움 부탁 드립니다.

 

아래에 메인이미지 슬라이느 부분의 소스 올립니다.

 

########### 메인이미지 (슬라이더) 부분 ##################

<div class="slider-area ">
    <div class="slider-active-2 owl-carousel nav-style-2">
        <div class="single-slider slider-height-3 bg-img pt-170" style="background-image:url(assets/img/slider/slider1-bg.jpg);">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9 col-md-7 col-12 col-sm-12">
                        <div class="slider-content slider-animated-1 pt-230">
                            <h1 class="animated">첫번째 타이틀</h1>
                            <p class="animated">첫번째설명</p>
                            <div class="slider-btn">
                                <a class="animated default-btn btn-green-color" href="/_html/intro1.php">ABOUT US</a>
                                <a class="animated default-btn btn-white-color" href="/bbs/board.php?bo_table=news4">CONTACT US</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="single-slider slider-height-3 bg-img pt-170" style="background-image:url(assets/img/slider/slider2.jpg);">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9 col-md-7 col-12 col-sm-12">
                        <div class="slider-content slider-animated-1 pt-230">
                            <h1 class="animated">두번째타이틀</h1>
                            <p class="animated">두번째설명</p>
                            <div class="slider-btn">
                                <a class="animated default-btn btn-green-color" href="/_html/intro1.php">ABOUT US</a>
                                <a class="animated default-btn btn-white-color" href="/bbs/board.php?bo_table=news4">CONTACT US</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>        

    </div>
</div>

################# 메인이미지 (슬라이더) CSS 부분 #####################

/*--------- Slider style ---------*/
.slider-height-1 {
  height: 844px; }
  @media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .slider-height-1 {
      height: 600px; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-height-1 {
      height: 600px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-height-1 {
      height: 500px; } }
  @media only screen and (max-width: 767px) {
    .slider-height-1 {
      height: 500px; } }

.slider-active {
  position: relative; }
  .slider-active .slider-single-img {
    width: 504px;
    position: absolute;
    right: 256px;
    bottom: 0; }
    @media only screen and (min-width: 1366px) and (max-width: 1600px) {
      .slider-active .slider-single-img {
        width: 430px;
        right: 50px; } }
    @media only screen and (min-width: 1200px) and (max-width: 1365px) {
      .slider-active .slider-single-img {
        width: 380px;
        right: 30px; } }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .slider-active .slider-single-img {
        width: 350px;
        right: 30px; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .slider-active .slider-single-img {
        width: 250px;
        right: 30px; } }
    @media only screen and (max-width: 767px) {
      .slider-active .slider-single-img {
        display: none; } }

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .slider-content {
    padding-top: 150px; } }

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider-content {
    padding-top: 120px; } }

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-content {
    padding-top: 100px; } }

@media only screen and (max-width: 767px) {
  .slider-content {
    padding-top: 50px; } }

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .slider-content {
    padding-top: 100px; } }

.slider-content h1 {
  font-size: 60px;
  color: #fff;
  font-weight: bold;
  margin: 0;
  line-height: 1; }
  @media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .slider-content h1 {
      font-size: 65px; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-content h1 {
      font-size: 55px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-content h1 {
      font-size: 40px; } }
  @media only screen and (max-width: 767px) {
    .slider-content h1 {
      font-size: 28px; } }

.slider-content p {
  font-size: 18px;
  color: #fff;
  line-height: 30px;
  width: 90%;
  margin: 25px 0 47px; }
  @media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .slider-content p {
      width: 84%; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-content p {
      width: 78%; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-content p {
      width: 100%;
      margin: 15px 0 27px; } }
  @media only screen and (max-width: 767px) {
    .slider-content p {
      width: 100%;
      margin: 25px 0 30px; } }

.slider-content .slider-btn a {
  margin-right: 27px; }
  .slider-content .slider-btn a:last-child {
    margin-right: 0; }
  @media only screen and (max-width: 767px) {
    .slider-content .slider-btn a {
      padding: 12px 16px 12px;
      font-size: 14px;
      margin-right: 10px; } }

.slider-content .slider-btn a.btn-green-color {
  background-color: #00a651;
  color: #fff;
  border: 1px solid #00a651; }
  .slider-content .slider-btn a.btn-green-color:hover {
    background-color: #fff;
    border: 1px solid transparent;
    color: #00a651; }

.slider-content .slider-btn a.btn-white-color {
  background-color: #fff;
  color: #00a651;
  border: 1px solid #77d0a2; }
  .slider-content .slider-btn a.btn-white-color:hover {
    background-color: #00a651;
    border: 1px solid transparent;
    color: #fff; }

.owl-item .slider-content * {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.owl-item.active .slider-animated-1 h1 {
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }

.owl-item.active .slider-animated-1 p {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }

.owl-item.active .slider-animated-1 a {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }

.owl-item.active .slider-animated-1.slider-single-img img {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }

.owl-item.active .slider-animated-2.slider-single-img2 img {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

.owl-item.active .slider-animated-2 h1 {
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

.owl-item.active .slider-animated-2 p {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

.owl-item.active .slider-animated-2 a {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

/* slider style 2 home2*/
.slider-content.slider-content-2 {
  padding-top: 0px; }
  .slider-content.slider-content-2 p {
    width: 70%;
    margin: 25px auto 45px; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .slider-content.slider-content-2 p {
        width: 78%;
        margin: 25px auto 35px; } }
    @media only screen and (max-width: 767px) {
      .slider-content.slider-content-2 p {
        width: 100%;
        margin: 20px auto 30px; } }

.slider-overlay2-1.default-overlay::before {
  opacity: .39;
  background-color: #000; }

.slider-overlay2-2.default-overlay::before {
  opacity: .43;
  background-color: #000; }

.slider-overlay2-3.default-overlay::before {
  opacity: .70;
  background-color: #000; }

.slider-height-2 {
  height: 800px; }
  @media only screen and (min-width: 1366px) and (max-width: 1600px) {
    .slider-height-2 {
      height: 600px; } }
  @media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .slider-height-2 {
      height: 550px; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-height-2 {
      height: 550px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-height-2 {
      height: 480px; } }
  @media only screen and (max-width: 767px) {
    .slider-height-2 {
      height: 480px; } }

/*----------------- home 3 ----------------*/
.slider-height-3 {
  height: 800px; }
  @media only screen and (min-width: 1366px) and (max-width: 1600px) {
    .slider-height-3 {
      height: 600px; } }
  @media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .slider-height-3 {
      height: 550px; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-height-3 {
      height: 550px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-height-3 {
      height: 430px; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-height-3 {
      height: 450px; } }

@media only screen and (min-width: 1366px) and (max-width: 1600px) {
  .slider-height-3.pt-170 {
    padding-top: 80px; } }

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .slider-height-3.pt-170 {
    padding-top: 80px; } }

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider-height-3.pt-170 {
    padding-top: 50px; } }

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-height-3.pt-170 {
    padding-top: 50px; } }

@media only screen and (max-width: 767px) {
  .slider-height-3.pt-170 {
    padding-top: 30px; } }

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .slider-height-3.pt-170 {
    padding-top: 50px; } }

.slider-single-img2 {
  margin: 0 85px 0 15px; }
  @media only screen and (min-width: 1366px) and (max-width: 1600px) {
    .slider-single-img2 {
      width: 390px; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-single-img2 {
      margin: 0;
      width: 350px; } }
  @media only screen and (max-width: 767px) {
    .slider-single-img2 {
      margin: 0; } }

.slider-content-3.ml-55 {
  margin-left: 0; }

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .slider-content-3.pt-115 {
    padding-top: 100px; } }

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider-content-3.pt-115 {
    padding-top: 100px; } }

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-content-3.pt-115 {
    padding-top: 30px; } }

@media only screen and (max-width: 767px) {
  .slider-content-3.pt-115 {
    padding-top: 50px; } }

.slider-content-3 h1 {
  color: #00a651;
  font-size: 60px;
  font-weight: bold;
  margin: 0; }
  .slider-content-3 h1 span.text-blue {
    color: #0259cf; }
  .slider-content-3 h1 span.text-pink {
    color: #c42d88; }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-content-3 h1 {
      font-size: 50px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-content-3 h1 {
      font-size: 45px; } }
  @media only screen and (max-width: 767px) {
    .slider-content-3 h1 {
      font-size: 35px; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-content-3 h1 {
      font-size: 32px; } }

.slider-content-3 p {
  font-size: 18px;
  line-height: 30px;
  margin: 38px 0 36px; }
  @media only screen and (max-width: 767px) {
    .slider-content-3 p {
      margin: 15px 0 20px;
      font-size: 17px; } }

.nav-style-2.owl-carousel {
  position: relative; }
  .nav-style-2.owl-carousel .owl-nav div {
    background-color: #161616;
    color: #fff;
    font-size: 24px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 100%;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    -webkit-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
    -webkit-box-shadow: 0px 6px 12px 0.8px rgba(177, 177, 177, 0.38);
    box-shadow: 0px 6px 12px 0.8px rgba(177, 177, 177, 0.38);
    left: 117px;
    opacity: 0;
    visibility: hidden; }
    .nav-style-2.owl-carousel .owl-nav div:hover {
      background-color: #00a651; }
    @media only screen and (min-width: 1366px) and (max-width: 1600px) {
      .nav-style-2.owl-carousel .owl-nav div {
        width: 50px;
        height: 50px;
        line-height: 50px;
        left: 50px; } }
    @media only screen and (min-width: 1200px) and (max-width: 1365px) {
      .nav-style-2.owl-carousel .owl-nav div {
        width: 50px;
        height: 50px;
        line-height: 50px;
        left: 50px; } }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .nav-style-2.owl-carousel .owl-nav div {
        width: 50px;
        height: 50px;
        line-height: 50px;
        left: 20px; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .nav-style-2.owl-carousel .owl-nav div {
        width: 50px;
        height: 50px;
        line-height: 50px;
        left: 20px; } }
    @media only screen and (max-width: 767px) {
      .nav-style-2.owl-carousel .owl-nav div {
        width: 40px;
        height: 40px;
        line-height: 38px;
        left: 15px; } }
  .nav-style-2.owl-carousel .owl-nav div.owl-next {
    left: auto;
    right: 117px; }
    @media only screen and (min-width: 1366px) and (max-width: 1600px) {
      .nav-style-2.owl-carousel .owl-nav div.owl-next {
        right: 50px; } }
    @media only screen and (min-width: 1200px) and (max-width: 1365px) {
      .nav-style-2.owl-carousel .owl-nav div.owl-next {
        right: 50px; } }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .nav-style-2.owl-carousel .owl-nav div.owl-next {
        right: 20px; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .nav-style-2.owl-carousel .owl-nav div.owl-next {
        right: 20px; } }
    @media only screen and (max-width: 767px) {
      .nav-style-2.owl-carousel .owl-nav div.owl-next {
        right: 15px; } }
  .nav-style-2.owl-carousel:hover .owl-nav div {
    opacity: 1;
    visibility: visible; }

.section-padding-1 .container-fluid {
  padding-right: 100px;
  padding-left: 100px; }
  @media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .section-padding-1 .container-fluid {
      padding-right: 80px;
      padding-left: 80px; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .section-padding-1 .container-fluid {
      padding-right: 50px;
      padding-left: 50px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-padding-1 .container-fluid {
      padding-right: 40px;
      padding-left: 40px; } }
  @media only screen and (max-width: 767px) {
    .section-padding-1 .container-fluid {
      padding-right: 15px;
      padding-left: 15px; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .section-padding-1 .container-fluid {
      padding-right: 30px;
      padding-left: 30px; } }

.choose-bg-light-blue {
  background-color: #48a7d4; }

.choose-bg-yellow {
  background-color: #fdc735; }

.choose-bg-blue {
  background-color: #307ad5; }

.choose-bg-green {
  background-color: #10c45c; }

.choose-negative-mrg {
  margin-top: -102px;
  z-index: 9;
  position: relative; }

.single-choose-us {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 50px 48px 46px;
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s; }
  @media only screen and (min-width: 1366px) and (max-width: 1600px) {
    .single-choose-us {
      padding: 50px 15px 46px; } }
  @media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .single-choose-us {
      padding: 40px 15px 36px; } }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .single-choose-us {
      padding: 30px 10px 26px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-choose-us {
      padding: 30px 20px 26px; } }
  @media only screen and (max-width: 767px) {
    .single-choose-us {
      padding: 30px 10px 26px; } }
  .single-choose-us .choose-img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 60px;
    flex: 0 0 60px;
    margin-right: 20px;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s; }
    @media only screen and (min-width: 1366px) and (max-width: 1600px) {
      .single-choose-us .choose-img {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 45px;
        flex: 0 0 45px;
        margin-right: 10px; } }
    @media only screen and (min-width: 1200px) and (max-width: 1365px) {
      .single-choose-us .choose-img {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 35px;
        flex: 0 0 35px;
        margin-right: 10px; } }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .single-choose-us .choose-img {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 35px;
        flex: 0 0 35px;
        margin-right: 10px; } }
    @media only screen and (max-width: 767px) {
      .single-choose-us .choose-img {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 35px;
        flex: 0 0 35px;
        margin-right: 10px; } }
    .single-choose-us .choose-img img {
      width: 100%;
      -webkit-transition: all .3s ease 0s;
      -o-transition: all .3s ease 0s;
      transition: all .3s ease 0s; }
  .single-choose-us .choose-content h3 {
    font-weight: bold;
    font-size: 22px;
    color: #fff;
    margin: 0 0 12px; }
    @media only screen and (min-width: 1366px) and (max-width: 1600px) {
      .single-choose-us .choose-content h3 {
        font-size: 20px;
        margin: 0 0 10px; } }
    @media only screen and (min-width: 1200px) and (max-width: 1365px) {
      .single-choose-us .choose-content h3 {
        font-size: 18px;
        margin: 0 0 5px; } }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .single-choose-us .choose-content h3 {
        font-size: 18px;
        margin: 0 0 5px;
        line-height: 25px; } }
    @media only screen and (max-width: 767px) {
      .single-choose-us .choose-content h3 {
        font-size: 18px;
        margin: 0 0 5px;
        line-height: 25px; } }
  .single-choose-us .choose-content p {
    line-height: 26px;
    font-size: 16px;
    color: #fff; }
  .single-choose-us:hover .choose-img img {
    -webkit-animation: 500ms ease-in-out 0s normal none 1 running tada;
    animation: 500ms ease-in-out 0s normal none 1 running tada; }

.section-title {
  position: relative;
  margin-left: 32px; }
  @media only screen and (max-width: 767px) {
    .section-title {
      margin-left: 0px; } }
  .section-title:before {
    content: url(../../assets/img/icon-img/section-shape.png);
    position: absolute;
    left: -32px;
    top: 2px;
    bottom: auto; }
    @media only screen and (max-width: 767px) {
      .section-title:before {
        left: -5px; } }
  .section-title h2 {
    font-size: 48px;
    font-weight: bold;
    margin: 0 0 20px;
    line-height: 38px; }
    @media only screen and (max-width: 767px) {
      .section-title h2 {
        font-size: 27px;
        margin: 0 0 10px; } }
    .section-title h2 span {
      color: #00a651;
      font-weight: 400; }
  .section-title p {
    font-size: 16px;
    line-height: 26px; }
    @media only screen and (max-width: 767px) {
      .section-title p {
        font-size: 15px; } }

@media only screen and (max-width: 767px) {
  .section-title.mb-75 {
    margin-bottom: 35px; }
  .section-title.mb-75.mrg-bottom-small {
    margin-bottom: 95px; } }

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title.mb-75 {
    margin-bottom: 50px; } }

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title-3.mb-100 {
    margin-bottom: 80px; } }

.section-title.white-text h2 {
  color: #fff; }

.section-title-green p {
  color: #00a651; }

@media only screen and (max-width: 767px) {
  .section-title.section-title-green.mb-30 {
    margin-bottom: 20px; } }

.section-title-2 {
  position: relative;
  margin-left: 32px;
  z-index: 9; }
  @media only screen and (max-width: 767px) {
    .section-title-2 {
      margin-left: 0px; } }
  .section-title-2:before {
    content: url(../../assets/img/icon-img/section-shape-2.png);
    position: absolute;
    left: -32px;
    top: 2px;
    bottom: auto; }
    @media only screen and (max-width: 767px) {
      .section-title-2:before {
        left: -5px; } }
  .section-title-2 h2 {
    font-size: 48px;
    font-weight: bold;
    margin: 0 0 20px;
    line-height: 38px;
    color: #fff; }
    @media only screen and (max-width: 767px) {
      .section-title-2 h2 {
        font-size: 35px; } }
    .section-title-2 h2 span {
      font-weight: 400; }
  .section-title-2 p {
    font-size: 16px;
    line-height: 26px;
    color: #fff; }

.section-title-3 {
  position: relative; }
  .section-title-3:before {
    position: absolute;
    left: 0px;
    right: 0;
    margin: 0 auto;
    bottom: -29px; }
  .section-title-3 h2 {
    font-size: 48px;
    font-weight: bold;
    margin: 0 0 20px;
    line-height: 38px; }
    @media only screen and (max-width: 767px) {
      .section-title-3 h2 {
        font-size: 33px;
        margin: 0 0 10px; } }
    .section-title-3 h2 span {
      color: #00a651;
      font-weight: 400; }
  .section-title-3 p {
    font-size: 16px;
    line-height: 26px; }
    @media only screen and (max-width: 767px) {
      .section-title-3 p {
        font-size: 15px; } }

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title-3.ml-70 {
    margin-left: 0px;
    margin-top: 50px; } }

@media only screen and (max-width: 767px) {
  .section-title-3.ml-70 {
    margin-left: 0px;
    margin-top: 50px; } }

.section-title-3.white-text h2,
.section-title-3.white-text span,
.section-title-3.white-text p {
  color: #fff; }

.section-shape-hm2-1:before {
  content: url(../../assets/img/icon-img/section-shape-3.png); }

.section-shape-hm2-2:before {
  content: url(../../assets/img/icon-img/section-shape-4.png); }

.single-choose-us2 h4 {
  font-size: 18px;
  font-weight: bold;
  margin: 37px 0 16px;
  line-height: 1; }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .single-choose-us2 h4 {
      font-size: 16px; } }

.single-choose-us2 p {
  line-height: 23px;
  margin: 0; }

.single-choose-us2:hover img {
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running tada;
  animation: 500ms ease-in-out 0s normal none 1 running tada; }

.choose-padding {
  padding-right: 68px; }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .choose-padding {
      padding-right: 0px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .choose-padding {
      padding-right: 0px; } }
  @media only screen and (max-width: 767px) {
    .choose-padding {
      padding-right: 0px; } }

.choose-newsletter {
  padding: 35px 30px 50px;
  border: 1px solid #f6f6f6;
  -webkit-box-shadow: 0px 6px 12px 0.8px rgba(222, 222, 222, 0.22);
  box-shadow: 0px 6px 12px 0.8px rgba(222, 222, 222, 0.22); }
  @media only screen and (max-width: 767px) {
    .choose-newsletter {
      padding: 35px 20px 50px; } }
  .choose-newsletter h4 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0 0 19px; }
    @media only screen and (max-width: 767px) {
      .choose-newsletter h4 {
        font-size: 16px; } }
  .choose-newsletter p {
    font-size: 15px;
    line-height: 26px;
    margin: 0 0 42px; }
  .choose-newsletter form input,
  .choose-newsletter form textarea,
  .choose-newsletter form button {
    background: transparent;
    border: 1px solid #f6f6f6;
    height: 50px;
    padding: 2px 25px;
    font-size: 14px;
    color: #333;
    margin: 0 0 11px; }
  .choose-newsletter form textarea {
    height: 132px;
    padding: 20px 25px; }
  .choose-newsletter form button {
    width: 100%;
    text-align: left; }
    .choose-newsletter form button:hover {
      background-color: #00a651;
      border: 1px solid #00a651;
      color: #fff; }

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .choose-newsletter.ml-40 {
    margin-left: 0; } }

@media only screen and (max-width: 767px) {
  .choose-newsletter.ml-40 {
    margin-left: 0; } }

/*---------------- about us ----------------*/
.single-about-chose-us {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .single-about-chose-us .about-choose-img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 60px;
    flex: 0 0 60px;
    margin-right: 20px; }
    @media only screen and (max-width: 767px) {
      .single-about-chose-us .about-choose-img {
        margin-right: 10px; } }
  .single-about-chose-us .about-choose-content h3 {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 5px; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .single-about-chose-us .about-choose-content h3 {
        font-size: 18px; } }
    @media only screen and (max-width: 767px) {
      .single-about-chose-us .about-choose-content h3 {
        font-size: 20px; } }
  .single-about-chose-us .about-choose-content p {
    line-height: 25px;
    margin: 0; }
  .single-about-chose-us:hover .about-choose-img img {
    -webkit-animation: 500ms ease-in-out 0s normal none 1 running tada;
    animation: 500ms ease-in-out 0s normal none 1 running tada; }

.text-light-blue.about-choose-content h3 {
  color: #48a7d4; }

.text-yellow.about-choose-content h3 {
  color: #fdc735; }

.text-blue.about-choose-content h3 {
  color: #307ad5; }