.section{
    padding: 70px 0;
}
.section-35{
    padding: 35px 0;
}
.swiper-container.dots-closer .swiper-pagination {
    bottom: -1rem;
}
.developedby {
    position: absolute;
    z-index: -9;
    opacity: 0;
    bottom: 0;
}

/* service Box Css */
.service-box{
   position: relative;
   overflow: hidden; 
   border-radius: 6px;
   perspective:1000px;
   -webkit-perspective:1000px;
}
.service-icon{
   width: 100%;
   height: 220px;
   padding: 20px;
   text-align: center;
   transition: all .5s ease;
}

.service-content{
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   opacity: 0;
   width: 100%;
   height: 220px;
   padding: 20px;
   text-align: center;
   transition: all .5s ease;
   background-color: #474747;
   backface-visibility:hidden;
   transform-style: preserve-3d;
   -webkit-transform: translateY(110px) rotateX(-90deg);
   -moz-transform: translateY(110px) rotateX(-90deg);
   -ms-transform: translateY(110px) rotateX(-90deg);
   -o-transform: translateY(110px) rotateX(-90deg);
   transform: translateY(110px) rotateX(-90deg);
}
.service-box .service-icon .front-content{
   position: relative;
   top:80px;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
}

.service-box .service-icon .front-content i {
   font-size: 28px;
   /* color: #fff; */
   font-weight: normal;
}

.service-box .service-icon .front-content h3 {
   font-size: 15px;
   /* color: #fff; */
   text-align: center;
   margin-bottom: 15px;
   text-transform: uppercase;
}
.service-box .service-content h3 {
   font-size: 18px;
   font-weight: 700;
   color: #fff;
   margin-bottom:10px;
   text-transform: uppercase;
}
.service-box .service-content p {
   font-size: 14px;
   color: #b1b1b1;
   margin:0;
} 

.service-box:hover .service-icon{
   opacity: 0;
   -webkit-transform: translateY(-110px) rotateX(90deg);
   -moz-transform: translateY(-110px) rotateX(90deg);
   -ms-transform: translateY(-110px) rotateX(90deg);
   -o-transform: translateY(-110px) rotateX(90deg);
   transform: translateY(-110px) rotateX(90deg);
}
.service-box:hover .service-content {
   opacity: 1;
   -webkit-transform: rotateX(0);
   -moz-transform: rotateX(0);
   -ms-transform: rotateX(0);
   -o-transform: rotateX(0);
   transform: rotateX(0);
}


/* service Box style 1 Css */
.service-box.style-1 { 
    position: relative;
}
.service-box.style-1 .hidden { 
    position: absolute;
    bottom: 0;
    padding: 0;
    width: 100%;
    left: 0;
    transition: all .3s ease;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    background-color: #fff;
    padding: 10px;
}
.service-box.style-1:hover .hidden {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
} 


.service-box.style-2 .effect {
    --g: 4px;     /* the gap */
    --b: 4px;    /* border thickness*/
    --c: var(--bs-primary); /* the color */ 
    
    padding: calc(var(--g) + var(--b));
    --_c: #0000 0 25%, var(--c) 0 50%;
    --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
    --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
    background:
      var(--_g1) var(--_p, 25%) 0   ,var(--_g2) 0    var(--_p,125%),
      var(--_g1) var(--_p,125%) 100%,var(--_g2) 100% var(--_p, 25%);
    background-size: 200% var(--b),var(--b) 200%;
    cursor: pointer;
    filter: grayscale(50%);
    transition: .3s;
}
.service-box.style-2 .effect:hover {
    --_p: 75%;
    filter: grayscale(0%);
} 


/* service Box style 3 Css */
.service-box.style-3 .card {
    border-radius: 16px;
    margin: 0 auto;
    width: 500px;
    max-width: 100%;
    min-height: 500px;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
      0px 5px 8px 0px rgba(0, 0, 0, 0.14),
      0px 1px 14px 0px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    /* background-image: url(https://source.unsplash.com/collection/905011/1000x1000); */
    background-size: cover;
}
  
.service-box.style-3 .info {
    position: relative;
    width: 100%;
    height: 500px;
    background-color: #fff;
    transform: translateY(100%)
      translateY(-88px)
      translateZ(0);
    transition: transform 0.5s ease-out;
}
  
.service-box.style-3 .info:before {
    z-index: -1;
    display: block;
    position: absolute;
    content: ' ';
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* background-image: url(https://picsum.photos/id/1037/200/200); */
    filter: blur(10px);
    background-size: cover;
    opacity: 0.25;
    transform: translateY(-100%)
      translateY(88px)
      translateZ(0);
    transition: transform 0.5s ease-out;
}
  
.service-box.style-3.card:hover .info, .service-box.style-3.card:hover .info:before {
    transform: translateY(0) translateZ(0);
}
  
.service-box.style-3 .title {
    margin: 0;
    padding: 24px;
    font-size: 40px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.87);
}
  
.service-box.style-3 .description {
    margin: 0;
    padding: 0 24px 24px;
    font-size: 18px;
    line-height: 1.5;
}




/* Footer Css */
footer.footer.bg-navy .widget-title, footer.footer.bg-navy, footer.footer.bg-navy .link-body {
    color: #fff;
}


/* // X-Small devices (portrait phones, less than 576px) */
/* // No media query for `xs` since this is the default in Bootstrap */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { }

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { }

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    section.wrapper.services .card-body {
        min-height: 325px;
    }
    .process-wrapper.line [class*=col-]:after { 
        left: 10rem;
    }
}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { }

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { }



/* // X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { }

/* // Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { }

/* // Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 
    .section{
        padding: 35px 0;
    }
}

/* // Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) { }

/* // X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) { }

/* // XX-Large devices (larger desktops) */
/* // No media query since the xxl breakpoint has no upper bound on its width */