/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  /* padding-top: 3rem; */
  padding-bottom: 3rem;
  color: rgb(var(--bs-tertiary-color-rgb));
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 1rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

.carousel-dark .carousel-indicators [data-bs-target] {
  background-color: #4dc3c8;

}



    #owl-demo .item {
      margin: 3px;
    }

    #owl-demo .item img {
      display: block;
      width: 100%;
      height: auto;
    }




 

    /* news */
    .featured-carousel .owl-nav .owl-prev,
    .featured-carousel .owl-nav .owl-next {
        position: absolute;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-top: -10px;
        color: rgba(0, 0, 0, 0.2) !important;
        -webkit-transition: 0.7s;
        -o-transition: 0.7s;
        transition: 0.7s;
        opacity: 1;
    }

    @media (prefers-reduced-motion: reduce) {

        .featured-carousel .owl-nav .owl-prev,
        .featured-carousel .owl-nav .owl-next {
            -webkit-transition: none;
            -o-transition: none;
            transition: none;
        }
    }

    .featured-carousel .owl-nav .owl-prev span:before,
    .featured-carousel .owl-nav .owl-next span:before {
        font-size: 16px;
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
    }

    @media (prefers-reduced-motion: reduce) {

        .featured-carousel .owl-nav .owl-prev span:before,
        .featured-carousel .owl-nav .owl-next span:before {
            -webkit-transition: none;
            -o-transition: none;
            transition: none;
        }
    }

    .featured-carousel .owl-nav .owl-prev:hover span:before,
    .featured-carousel .owl-nav .owl-next:hover span:before {
        color: #b063c5;
    }

    .featured-carousel .owl-nav .owl-prev {
        left: 0;
        margin-right: 20px;
    }

    .featured-carousel .owl-nav .owl-next {
        left: 0;
    }

    .featured-carousel .owl-dots {
        text-align: center;
        margin-top: 10px;
    }

    .featured-carousel .owl-dots .owl-dot {
        width: 10px;
        height: 10px;
        margin: 5px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.1);
        position: relative;
    }

    .featured-carousel .owl-dots .owl-dot:hover,
    .featured-carousel .owl-dots .owl-dot:focus {
        outline: none !important;
    }

    .featured-carousel .owl-dots .owl-dot.active {
        background: var(--main-color);
    }

    .owl-carousel.owl-drag .owl-item {
        -ms-touch-action: pan-y;
        touch-action: pan-y;
    }

    .work {
        width: 100%;
    }

    .work .img {
        width: 100%;
        height: 400px;
        position: relative;
        border-radius: 15px;
        overflow: hidden;
        -webkit-box-shadow: 0px 20px 35px -30px rgba(0, 0, 0, 0.26);
        -moz-box-shadow: 0px 20px 35px -30px rgba(0, 0, 0, 0.26);
        box-shadow: 0px 20px 35px -30px rgba(0, 0, 0, 0.26);
        z-index: 0;
    }

    .work .img:after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: '';
        z-index: -1;
        background: rgba(255, 93, 177, 0);
        background: -moz-linear-gradient(top, rgba(255, 93, 177, 0) 0%, rgba(148, 54, 103, 0) 30%, black 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 93, 177, 0)), color-stop(30%, rgba(148, 54, 103, 0)), color-stop(100%, black));
        background: -webkit-linear-gradient(top, rgba(255, 93, 177, 0) 0%, rgba(148, 54, 103, 0) 30%, black 100%);
        background: -o-linear-gradient(top, rgba(255, 93, 177, 0) 0%, rgba(148, 54, 103, 0) 30%, black 100%);
        background: -ms-linear-gradient(top, rgba(255, 93, 177, 0) 0%, rgba(148, 54, 103, 0) 30%, black 100%);
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 93, 177, 0)), color-stop(30%, rgba(148, 54, 103, 0)), to(black));
        background: linear-gradient(to bottom, rgba(255, 93, 177, 0) 0%, rgba(148, 54, 103, 0) 30%, black 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5db1', endColorstr='#000000', GradientType=0);
        opacity: .6;
    }

    .work .text {
        padding: 35px;
        padding-top: 0;
    }

    .work .text h3 {
        font-size: 34px;
        font-weight: 400;
        margin-bottom: 0;
    }

    .work .text h3 a {
        color: #fff;
    }

    .work .text .cat {
        font-size: 12px;
        color: #000;
        font-weight: 400;
        background: rgba(255, 255, 255, 0.9);
        padding: 1px 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: inline-block;
        margin-bottom: 5px;
    }

    .img {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }



    /* service */
    .card-service .card .card-body .cat {
      font-size: 10px;
      color: #000;
      font-weight: 400;
      background: rgba(255, 255, 255, 0.9);
      padding: 1px 4px;
      text-transform: uppercase;
      letter-spacing: 1px;
      display: inline-block;
      margin-bottom: 5px;
  }

  .card-service .card {
      border: none;
      transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
      overflow: hidden;
      border-radius: 20px;
      min-height: 170px;
      box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);

      @media (max-width: 768px) {
          min-height: 170px;
      }

      @media (max-width: 420px) {
          min-height: 170px;
      }


      &.card-has-bg {
          transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
          background-size: 120%;
          background-repeat: no-repeat;
          background-position: center center;

          &:before {
              content: '';
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              background: inherit;
              -webkit-filter: grayscale(1);
              -moz-filter: grayscale(50%);
              -ms-filter: grayscale(50%);
              -o-filter: grayscale(50%);
              filter: grayscale(50%);
          }


          &.card-body,
          .card-body a,
          .card-body small {
              color: #fff;
              text-align: left;
              /*font-weight: bold;*/
          }

          &:hover {
              transform: scale(0.98);
              box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3);
              background-size: 130%;
              transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);

              .card-body,
              .card-body a,
              .card-body small {
                  color: #000;
              }

              .card-img-overlay {
                  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
                  background: rgb(35, 79, 109);
                  background: linear-gradient(0deg, rgba(190, 214, 049, 0.4) 0%, rgba(190, 214, 049, 1) 100%);
              }
          }
      }

      .card-footer {
          background: none;
          border-top: none;

          .media {
              img {
                  border: solid 3px rgba(255, 255, 255, 0.3);
              }
          }
      }


      .card-meta {
          color: #4dc3c8
      }

      .card-body {
          transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
      }

      &:hover {
          .card-body {
              margin-top: 10px;
              transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
          }

          cursor: pointer;
          transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
      }

      .card-img-overlay {
          transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
          background: rgb(241 89 46 / 87%);
          background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%);
      }
  }

  @media (max-width: 767px) {}




.ads {
    width: 100%;
    height: 200px;
    background: white;
    border-radius: 15px;
}

.adsimg {
    width: 100%;
    height: 200px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    -webkit-box-shadow: 0px 20px 35px -30px rgba(0, 0, 0, 0.26);
    -moz-box-shadow: 0px 20px 35px -30px rgba(0, 0, 0, 0.26);
    box-shadow: 0px 20px 35px -30px rgba(0, 0, 0, 0.26);
    z-index: 0;
}