/* @import url('../font-files/Inter-Thin.woff');

:root {
    font-family: 'Inter' ,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji !important;
}
  
@supports (font-variation-settings: normal) {
    :root {
        font-family: 'Inter var',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji !important;
    }
} */

/*-------------------------------------
 *  Start Home Page Style here
 * ------------------------------------- */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

@font-face {
  font-family: inter;
  src: url(../font-files/Inter-Thin.woff);
}

/*-------------------------------------
  *  Start Home Page Style here
  * ------------------------------------- */
body {
  font-smooth: auto;
  color: #222 !important;
}

html {
  scroll-behavior: smooth;
}

/*-------------------------------------
 *  Start Home Page Style here
 * ------------------------------------- */

.scroll {
  animation-name: scroll;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
  animation-iteration-count: infinite;
}

@keyframes scroll {
  0% {
    opacity: 0;
  }

  10% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(15px);
    opacity: 0.5;
  }
}

/*-------------------------------------
 *  Start Home Page button Style
 * ------------------------------------- */

.effect {
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  line-height: 45px;
  background-color: #222;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  border-radius: 5px;
}

.effect2 {
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-size: 19px;
  font-weight: 500;
  line-height: 45px;
  max-width: 160px;
  word-spacing: 1px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  border-radius: 5px;
  border: none;
}

.effect:hover {
  text-decoration: none;
}

.effect1 {
  overflow: hidden;
  position: relative;
}

.effect1 span {
  z-index: 20;
}

.effect1:after {
  background: rgb(255, 255, 255);
  content: "";
  height: 155px;
  left: -75px;
  opacity: 0.2;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: -10;
}

.effect1:hover:after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

.effect-2 {
  overflow: hidden;
  position: relative;
}

.effect-2 span {
  z-index: 20;
}

.effect-2:after {
  background: rgb(247, 179, 232);
  content: "";
  height: 155px;
  left: -75px;
  opacity: 0.2;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: -10;
}

.effect-2:hover:after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

.effect-3 {
  overflow: hidden;
  position: relative;
}

.effect-3 span {
  z-index: 20;
}

.effect-3:after {
  background: #a29af9;
  content: "";
  height: 155px;
  left: -75px;
  opacity: 0.2;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: -10;
}

.effect-3:hover:after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

.effect-sm {
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-size: 19px;
  font-weight: 500;
  line-height: 45px;
  background-color: #222;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  border-radius: 5px;
}

.triptropimg {
  -webkit-animation: mover 2s infinite alternate !important;
  animation: mover 2s infinite alternate !important;
}

@-webkit-keyframes mover {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-30px);
  }
}

@keyframes mover {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-30px);
  }
}

/*-------------------------------------
 *  End Home page button Style
 * ------------------------------------- */

/*-------------------------------------
 *  Start Testimonail Style
 * ------------------------------------- */
.testimonail {
  width: 600px !important;
}

.testimonial1 i {
  font-size: 40px !important;
  right: 36px;
  top: -18px;
}

@media (min-width: 40em) {
  #tns2>.tns-item {
    padding-right: 43px !important;
  }
}

@media (min-width: 56.25em) {
  #tns2 {
    width: calc(768%) !important;
  }
}

@media (min-width: 43.75em) {
  #tns2 {
    width: calc(1525%) !important;
  }
}

@media (min-width: 40em) {
  #tns2 {
    width: calc(1558%);
  }
}

.slider-dots1 button {
  cursor: pointer;
  width: 35px;
  height: 10px;
  border-radius: 8px;
  background-color: lightgray;
  border-width: 0;
  margin-left: 5px;
  margin-right: 5px;
}

.slider-dots1 button:first-child {
  margin-left: 0;
}

.slider-dots1 button:last-child {
  margin-right: 0;
}

.slider-dots1 button.tns-nav-active {
  background-color: #419dd1;
  width: 35px;
  height: 10px;
  border-radius: 12px;
}

.tns-outer [data-action] {
  display: none;
}

@media (max-width: 639px) {
  #tns2>.tns-item {
    margin: 20px;
  }
}

/*-------------------------------------
 *  End Testimonail Style
 * ------------------------------------- */

/* start header button*/

.btn {
  background-color: #3196ce;
  border: 2px solid #3196ce;
}

.btn:hover {
  border: 2px solid blue;
  background: none;
  color: black;
}

/* end header button*/

.text1 a {
  color: #000000;
}

/* Add an italic font style to all quotes */

q {
  font-style: italic;
}

/* Add a blue color to the author */

.author {
  color: cornflowerblue;
}

.nav_scroll {
  top: -70px;
  display: hidden;
}

.nav_scroll1 {
  top: -70px;
  display: hidden;
}

/*portfolio navbar */

.nav_scroll3 {
  top: 0px;
  transition: all;
  display: visible;
}

/*portfolio navbar */

.sidenav {
  height: 100%;
  width: 350px;
  position: fixed;
  z-index: 40;
  top: 0;
  right: 0;
  background-color: #1c2a39;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
  transform: translateX(100%);
  max-width: 100%;
}

/* The navigation menu links */

.sidenav a {
  text-decoration: none;
  font-size: 26px;
  color: #bfbfbf;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */

/* Position and style the close button (top right corner) */

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px !important;
  margin-left: 50px;
  color: white;
}

.sidenav1 .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px !important;
  margin-left: 50px;
  color: white;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */

#main {
  transition: margin-left 0.5s;
  padding: 20px;
}

.sidenav {
  right: 0;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }

  .sidenav a {
    font-size: 18px;
  }
}

.sidenav {
  right: 0;
}

.social i {
  color: white;
  font-size: 25px;
}

.f-social i {
  color: #3196ce;
  font-size: 33px;
}

.f-social:hover i {
  color: white;
}

.f-social:hover {
  background: linear-gradient(to top right, #178cca, #004790);
}

.follow_us .f-social {
  box-shadow: 0 8px 20px rgb(0 0 0 / 0%), 0 0px 8px rgb(0 0 0 / 18%);
  border-radius: 15px;
}

.group:hover img {
  transform: scale(1.2);
}

.f-social:hover i {
  transform: scale(1.2);
}

.service-img {
  background-color: #3ddb85;
}

.service-img2 {
  background-color: #028be7;
}

.service-img3 {
  background-color: #0a84ff;
}

.service-img4 {
  background-color: #3d3d3d;
}

.service-img5 {
  background-color: #5a0fc8;
}

.service-img6 {
  background-color: #0a84ff;
}

/*portfolio*/

.slideshow-container {
  position: relative;
  margin: auto;
}

/* Caption text */

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* The dots/bullets/indicators */

.dot {
  height: 10px;
  width: 35px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 15px;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active1 {
  background-color: #419dd1;
}

/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .text {
    font-size: 11px;
  }
}

.slider-dots button {
  cursor: pointer;
  width: 35px;
  height: 10px;
  border-radius: 8px;
  background-color: lightgray;
  border-width: 0;
  margin-left: 5px;
  margin-right: 5px;
}

.slider-dots button:first-child {
  margin-left: 0;
}

.slider-dots button:last-child {
  margin-right: 0;
}

.slider-dots button.tns-nav-active {
  background-color: #419dd1;
  width: 35px;
  height: 10px;
  border-radius: 12px;
}

.tns-outer [data-action] {
  display: none;
}

.Slide button {
  display: visible;
}

/* Flutter page */

.Features:hover {
  box-shadow: 2px 2px 8px gray;
  border-radius: 15px;
}

.flutter-service {
  background-color: #3196ce;
}

/* contact icon */

.contact-icon i {
  font-size: 40px;
  color: #3196ce;
}

.calendly span {
  color: #3196ce;
}

/*-------------------------------------
 *  Start Whatsapp icon Style
 * ------------------------------------- */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #5ce578;
  color: #fff;
  text-align: center;
  border-radius: 15px;
  padding: 5px 0;
  position: fixed;
  z-index: 1;
  bottom: 30px;
  right: 85px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*-------------------------------------
 *  End Whatsapp icon Style
 * ------------------------------------- */

/*-------------------------------------
 *  Start Process Card Effect Style
 * ------------------------------------- */
.Process-card {
  box-shadow: 0 8px 20px rgb(0 0 0 / 0%), 0 0px 8px rgb(0 0 0 / 18%);
}

.Process-card .inline-table {
  background-color: #408cca1a;
}

/*-------------------------------------
 *  End Process Card Effect Style
 * ------------------------------------- */

/*footer services */

/* onscroll header services */

.nav_scroll {
  text-align: center;
  width: 100%;
  /* background: #bebebe; */
  padding: 0;
  margin: 0;
  height: 66px;
  /* position: relative; */
}

.nav_scroll ul {
  background: #ffffff;
  list-style: none;
  padding: 11px 20px;
  margin: 0;
  height: 60px;
  font-size: 20px;
}

.nav_scroll ul li {
  display: inline-block;
}

.nav_scroll ul li a {
  color: #333333;
  display: block;
  text-decoration: none;
  float: left;
  height: 60px;
}

.nav_scroll ul li:hover a {
  color: #335fff !important;
}

.nav_scroll ul li:hover ul {
  display: grid;
}

.nav_scroll ul ul {
  background: rgb(255, 255, 255);
  box-shadow: 0 0.6rem 1.2rem 0 rgb(0 0 0 / 15%);
  text-align: center;
  display: none;
  width: 100%;
  height: 286px !important;
  position: absolute;
  top: 60px;
  left: 0px;
}

.header-number {
  color: #4396ce;
}

.nav_scroll ul li {
  font-size: 19px;
  padding-right: 10px;
}

.show {
  display: grid;
}

/*portfolio navbar */
/* .dropdown-menu {
    background: white;
    color: black;
    cursor: pointer;
    height: 50px;
    line-height: 50px;
    position: relative;
    width: 200px;
    text-align: center;
    text-decoration: none;
    z-index: 1;
    transform: perspective(1000px);
     -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  }
  
  .dropdown-menu {
    background-color: #fff;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    opacity: 0;
    text-align: center;
    top: 0;
    visibility: hidden;
    z-index: -99999;
  }
  
  .dropdown-menu li:first-child {
    cursor: default;
  }
  
  .dropdown-menu a {
    color: #000;
    display: inline-block;
    width: 100%;
    text-decoration: none;
    -webkit-transition: all 1s;
    transition: all 1s;
  }
  
  .dropdown-menu a:hover {
    background: white;
    color: black;
  }
  
  .dropdown:hover .dropdown-menu {
    display: grid;
    grid-column: 4;
    background: white;
    opacity: 1;
    visibility: visible;
    top: 100%;
    width: 100%;
    -webkit-transition: all .5s;
    transition: all .5s;
  }
   */
.nav_scroll3 {
  text-align: center;
  width: 100%;
  background: #ffffff;
  padding: 0;
  margin: 0;
  height: 67px;
  z-index: 5000;
  /* position: relative; */
  /* z-index: 55; */
}

.nav_scroll3 ul {
  background: #ffffff;
  list-style: none;
  padding: 11px 20px;
  margin: 0;
  height: 60px;
}

.nav_scroll3 ul li {
  display: inline-block;
}

.dropdown-menu {
  z-index: -5;
}

.nav_scroll3 ul li a {
  color: #333333;
  display: block;
  text-decoration: none;
  float: left;
  height: 60px;
}

.nav_scroll3 ul li:hover ul {
  display: grid;
  animation: bounce-out-down 200ms ease-out;
  animation-iteration-count: 1;
  top: 30px;
  z-index: -1;
  box-shadow: 0 0.8rem 0.8rem 2px rgb(0 0 0 / 15%);
}

.nav_scroll3 ul ul {
  background: rgb(255, 255, 255, 1);
  box-shadow: 0 0.6rem 1.2rem 0 rgb(0 0 0 / 15%);
  text-align: center;
  visibility: visible;
  display: none;
  /* pointer-events: none; */
  /* opacity: 0; */
  width: 100%;
  height: 286px !important;
  position: absolute;
  top: -60px;
  left: 0px;
  transition: all 500ms ease;
}

/*portfolio navbar */

/*-------------------------------------
 *  Start Home Page Mouse Effect Style
 * ------------------------------------- */

.moving-mouse-holder {
  animation: bounce-out-down 500ms ease-in-out infinite;
}

@keyframes bounce-out-down {
  0% {
    transform: translateY(-35px);
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/*-------------------------------------
 *  ENd Home Page Mouse Effect Style
 * ------------------------------------- */

/* side navbar */

.dropdown-container1 {
  display: none;
  padding-left: 10px;
  padding-right: 10px;
  width: 250px;
  background-color: transparent !important;
}

.dropdown-container1 a {
  font-size: 20px !important;
}

.banner-text {
  min-height: calc(100vh - 16.75rem);
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: center;
}

@media (max-width: 74.9375em) {
  .banner-text {
    height: calc(70vh - 7.5rem);
    position: relative;
  }
}

@media (max-width: 61.9375em) {
  .banner-text {
    min-height: 100%;
    height: 100%;
  }
}

/*-------------------------------------
 *  Start Flutter Page Service Style
 * ------------------------------------- */
/* .features-ul {
  margin-left: 12px;
  line-height: 2.5;
}

.features-ul li {
  position: relative;
}

.features-ul li::before {
  content: "";
  position: absolute;
  left: -12px;
  height: 3px;
  width: 6px;
  border-radius: 30px;
  background: #178cca;
  top: 14px;
} */

.features-ol {
  margin-left: 12px;
}

.features-ol li {
  position: relative;
}

/*-------------------------------------
 *  End Flutter Page Service Style
 * ------------------------------------- */

/* start technologies we use */

.filterDiv {
  display: none;
}

.show {
  display: block;
}

.btn-tech {
  margin: 5px;
  outline: none;
  padding: 12px 16px;
  background-color: #ffffff;
  cursor: pointer;
  border: 1px solid gray;
  font-weight: 300 !important;
}

.btn-tech:hover {
  background-color: #7474742f;
}

.btn-tech.active {
  background-color: #222;
  color: #ffffff;
  border: none;
}

/* end technologies we use */

/* .banner-text1 h1 {
    background: linear-gradient(to right, #3196ce 10%, #034669 60%);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.banner-text1 h2 {
    background: linear-gradient(to right, #3196ce 10%, #034669 60%);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
} */

/* testimonal */
@keyframes ticker-kf {
  0% {
    transform: translate3d(10rem, 0, 0);
  }

  100% {
    transform: translate3d(-270rem, 0, 0);
  }
}

.img-ticker {
  animation: ticker-kf 130s linear infinite;
  transition: 0.3s ease-in-out;
}

.img-ticker .w-96 {
  width: 32rem;
}

@media (min-width: 1536px) {
  .container {
    max-width: 1440px !important;
  }
}

/* testimonail */

.swiper {
  padding: 1.5em;
}

.swiper .content-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  width: 100%;
  justify-items: center;
  align-items: center;
}

.swiper .content-wrapper .content {
  padding: 3em 1.5em;
  text-align: center;
  display: grid;
  justify-items: center;
  align-items: center;
  margin: 0 auto;
  color: #000;
}

.swiper .content-wrapper .content :first-child {
  margin: 0;
}

.swiper .content-wrapper .content .swiper-avatar {
  width: 100%;
  max-width: 125px;
  height: auto;
}

.swiper .content-wrapper .content .swiper-avatar img {
  border-radius: 500px;
}

.swiper .content-wrapper .content .cite {
  font-size: 14px;
  font-weight: bold;
}

.swiper .swiper-slide {
  margin: 0;
  height: auto;
  width: 100%;
  padding: 0;
  opacity: 1.2;
  margin-top: 20px;
  border-radius: 6px;
  transition: all 0.5s ease-in-out;
}

.swiper .swiper-slide.swiper-slide-active {
  opacity: 1;
  transform: scale(1.1);
}

.swiper .swiper-slide.swiper-slide-active .box {
  background-color: white;
  box-shadow: 0 8px 20px rgb(0 0 0 / 13%), 0 0px 8px rgb(0 0 0 / 0%);
}

.swiper .swiper-nav-wrapper {
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3px auto;
  width: auto;
  padding-top: 3em;
}

.swiper .swiper-nav-wrapper .swiper-button-next,
.swiper .swiper-nav-wrapper .swiper-button-prev {
  top: 0;
  top: auto;
  left: auto;
  right: auto;
  position: relative !important;
}

.swiper .swiper-nav-wrapper .swiper-button-next:after,
.swiper .swiper-nav-wrapper .swiper-button-prev:after {
  display: none;
}

.swiper .swiper-nav-wrapper .swiper-button-next,
.swiper .swiper-nav-wrapper .swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='9px' height='16px' viewBox='0 0 9 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='chevron-right' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M8.674805,7.066406 L1.924805,0.316406 C1.696288,0.105468 1.432619,0 1.133789,0 C0.834959,0 0.57129,0.105468 0.342773,0.316406 C0.114257,0.544923 0,0.808592 0,1.107422 C0,1.406251 0.114257,1.669921 0.342773,1.898438 L6.301758,7.857422 L0.342773,13.816406 C0.114257,14.044923 0,14.308592 0,14.607422 C0,14.906251 0.114257,15.169921 0.342773,15.398438 C0.465821,15.521485 0.584472,15.609375 0.69873,15.662109 C0.812989,15.714844 0.958007,15.741211 1.133789,15.741211 C1.309571,15.741211 1.454589,15.714844 1.568848,15.662109 C1.683106,15.609375 1.801757,15.521485 1.924805,15.398438 L8.674805,8.648438 C8.903321,8.419921 9.017578,8.156251 9.017578,7.857422 C9.017578,7.558592 8.903321,7.294923 8.674805,7.066406 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

.swiper .swiper-nav-wrapper .swiper-button-prev,
.swiper .swiper-nav-wrapper .swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='9px' height='16px' viewBox='0 0 9 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='chevron-right' transform='translate(4.508789, 7.870605) rotate(-180.000000) translate(-4.508789, -7.870605) translate(-0.000000, -0.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M8.674805,7.066406 L1.924805,0.316406 C1.696288,0.105468 1.432619,0 1.133789,0 C0.834959,0 0.57129,0.105468 0.342773,0.316406 C0.114257,0.544923 0,0.808592 0,1.107422 C0,1.406251 0.114257,1.669921 0.342773,1.898438 L6.301758,7.857422 L0.342773,13.816406 C0.114257,14.044923 0,14.308592 0,14.607422 C0,14.906251 0.114257,15.169921 0.342773,15.398438 C0.465821,15.521485 0.584472,15.609375 0.69873,15.662109 C0.812989,15.714844 0.958007,15.741211 1.133789,15.741211 C1.309571,15.741211 1.454589,15.714844 1.568848,15.662109 C1.683106,15.609375 1.801757,15.521485 1.924805,15.398438 L8.674805,8.648438 C8.903321,8.419921 9.017578,8.156251 9.017578,7.857422 C9.017578,7.558592 8.903321,7.294923 8.674805,7.066406 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

.swiper-pagination {
  margin: 0;
  padding: 0;
  width: auto;
  position: relative !important;
  display: block;
  width: auto;
}

.swiper-pagination .swiper-pagination-bullets {
  margin: 0;
}

.swiper-pagination .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0;
  background: #fff !important;
}

.swiper-pagination-bullet {
  background: #4396cd !important;
  transition: all 0.2s ease-in-out;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  bottom: 0;
  top: 0;
  bottom: 0;
  width: auto;
  padding: 0 1.5em;
}

.swiper-pagination-bullet-active {
  transform: scale(1.7);
}

.swiper-button-prev {
  --swiper-navigation-size: 20px;
  color: #fff !important;
  background-color: #3196ce;
  padding: 17px !important;
}

.card-with-slidein-animation {
  position: relative;
  overflow: hidden;
}

.card-with-slidein-animation::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  height: 50px;
  width: 50px;
  z-index: -1;
  border-radius: 100%;
  background-color: #0066ff;
  transition: all 300ms ease-out;
}

.card-with-slidein-animation:hover::before {
  height: 800px;
  width: 800px;
  border-radius: 0.75rem;
}

.card-with-slidein-animation:hover {
  color: white;
}

.card-with-slidein-animation:hover img {
  filter: brightness(0) invert(1);
}