:root {
  --button-color: #ff7802;
  --button-hover-color: #fa4d3d;
}

.logo {
  width: 130px;
  padding: 10px;
}

.header-area .slicknav_btn {
  top: 28px;
}

.slicknav_nav {
  margin-top: 70px;
}

.online-cv .cv-caption .pera2 {
  font-size: 40px;
}

.online-cv .cv-caption .pera1 b {
  color: var(--button-color);
}

/* .tagline-list li i {
  color: #06d1a6
}

.tagline-list li {
  color: #06d1a6
} */


.social-buttons-wrapper {
  display: flex;
  align-items: center;
}

.social-buttons {
  width: 35px;
  height: 35px;
  line-height: 37px;
  background-color: #d4312c;
  text-align: center;
  color: #ffffff;
  border-radius: 50%;
  font-size: 14px;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(255, 251, 251, 0.1) inset;
}

.social-buttons.facebook {
  background-color: #3b5998;
}

.social-buttons.instagram {
  background-color: #F18644;
}

.social-buttons.twitter {
  background-color: #379CEB;
}

.social-buttons.linkedin {
  background-color: #2673AF;
}

.swiper-button-prev.tray-button-prev {
  top: 61%;
}

.swiper-button-next.tray-button-next {
  top: 61%;
}

@media (max-width: 992px) {
  .social-buttons-wrapper {
    margin-right: 60px;
  }
}

.swiper-container.tray-carousel {
  overflow: hidden;
}

.offer-banner {
  position: relative;
  z-index: 1;
  background-color: #fcfcfc;
  background-image: url(./agency-assets/img/offer-banner2.jpg);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 350px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  width: 100%;
}

.digital-card-banner {
  background-image: url(./img/b1.png);
}

.invitation-card-banner {
  background-image: url(./img/b2.png);
}

@media only screen and (max-width: 576px) {
  .offer-banner {
    min-height: 220px;
  }

  .digital-card-banner {
    background-image: url(./img/mb1.png);
  }

  .invitation-card-banner {
    background-image: url(./img/mb2.png);
  }

  .logo {
    width: 100px;
    padding: 3px 10px;
  }
}

@media only screen and (max-width: 767px) {
  .offer-banner {
    min-height: 220px;
  }
}

@media only screen and (max-width: 991px) {
  .offer-banner {
    min-height: 220px;
  }
}


/* Start banner carousal CSS */

.swiper-container.banner-carousel {
  width: 100%;
  height: 100%;
  margin-bottom: 30px;
}

.swiper-slide.banner-slide {
  text-align: center;
  font-size: 18px;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-button-next.banner-button-next {
  width: 35px;
  top: 45%;
  transform: translate(0, 16px);
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(12, 17, 27, 0.7)), to(rgba(12, 17, 27, 0.9)));
  background: -webkit-linear-gradient(left, transparent, rgba(12, 17, 27, 0.7), rgba(12, 17, 27, 0.9));
  background: -o-linear-gradient(left, transparent, rgba(12, 17, 27, 0.7), rgba(12, 17, 27, 0.9));
  background: linear-gradient(to right, transparent, rgba(12, 17, 27, 0.7), rgba(12, 17, 27, 0.9));
  right: 0;
  outline: none;
}

.swiper-button-next.banner-button-next::after {
  color: #fff;
  font-size: 32px;
}

.swiper-button-next.banner-button-next.swiper-button-disabled {
  display: none;
}

.swiper-button-prev.banner-button-prev {
  width: 35px;
  top: 45%;
  left: 0;
  transform: translate(0, 16px);
  background: -webkit-gradient(linear, right top, left top, from(transparent), color-stop(rgba(12, 17, 27, 0.7)), to(rgba(12, 17, 27, 0.9)));
  background: -webkit-linear-gradient(right, transparent, rgba(12, 17, 27, 0.7), rgba(12, 17, 27, 0.9));
  background: -o-linear-gradient(right, transparent, rgba(12, 17, 27, 0.7), rgba(12, 17, 27, 0.9));
  background: linear-gradient(to left, transparent, rgba(12, 17, 27, 0.7), rgba(12, 17, 27, 0.9));
  outline: none;
}

.swiper-button-prev.banner-button-prev::after {
  color: #fff;
  font-size: 32px;
}

.swiper-button-prev.banner-button-prev.swiper-button-disabled {
  display: none;
}

/* End banner carousal CSS */