@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i');

body {
    font-family: 'Raleway', sans-serif;
    font-size: small;
}
p.edu_desc.mt-3.mb-0.text-muted {
    color: #5a5a5a;
    font-size: 15px;
    font-family: 'Open Sans';
}

.row.footer_details {
    display: flex;
    justify-content: space-evenly;
}
a {
  color: #018e7e;
  text-decoration: none;
}

a:hover {
  color: #018e7e;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif;
}

/*--------------------------------------------------------------
# add new css
--------------------------------------------------------------*/
.img-fluid {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(2px 2px 3px #8c8c8c);
}
.block p:last-child{
  font-size: 15px;
        font-weight: 300;
        color: #000;
}

a#strt-a-prjct {
  color: #fff !important;
  background-color: #018e7e !important;
  border-radius: 6px;
  padding: 8px 15px;
}
.text-justify {
  text-align: center;
}

/* ---------read more-------- */
.see-more-btn {
  margin-top: 2rem;
}
.btn {
  display: inline-block;
  border: 2px solid transparent;
  white-space: pre-wrap;
  letter-spacing: .5px;
  line-height: inherit;
  border-radius: 0;
  text-transform: uppercase;
  width: auto;
  font-family: Raleway !important;
  font-weight: 600;
  outline: none !important;
}

.btn.btn-small {
  font-size: 11px;
  padding: 4px 24px;
}
.btn.btn-transparent-dark-gray {
  background: transparent;
  border-color: #232323;
  color: #232323;
}
.btn.btn-rounded {
  border-radius: 50px;
}
.btn.btn-rounded.btn-small {
  padding: 5px 29px;
}

.align-items-stretch {
  align-items: stretch !important;
}

img.marketplace-img {
  max-width: 80%;
}
img#mrktplc2 {
  padding: 2.3rem 0;
}
.social-links.text-center.text-md-right.pt-3.pt-md-0 {
  text-align: justify !important;
  margin-top: 1.5rem ;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #018e7e;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #018e7e;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

/* a#ui-id-15 {
        background-color: #fff !important;
        color: #000 !important;
        padding: 0px 18px !important;
        border-radius: 100px;
        font-weight: 600 !important;
        font-size: 12px !important;
        box-shadow: 2px 3px 6px #00000030;
} */

a#ui-id-11 {
        background-color: #fff !important;
        color: #000 !important;
        padding: 0px 18px !important;
        border-radius: 100px;
        font-weight: 600 !important;
        font-size: 12px !important;
        box-shadow: 2px 3px 6px #00000030;
}

.submenu-inner.before-ves-submenu-inner {
        width: 290px;
        padding: 23px 0px !important;
}
a.nav-anchor {
        font-size: 12px;
}


a#ui-id-1, a#ui-id-2, a#ui-id-3, a#ui-id-4, a#ui-id-5, a#ui-id-6, a#ui-id-7, a#ui-id-8, a#ui-id-9, a#ui-id-10, a#ui-id-11, a#ui-id-12, a#ui-id-13, a#ui-id-15 {
        color: #fff;
        font-size: 13px !important;
        font-weight: 400 !important;
        margin: 0px 20px;
        padding: 0px;
}

ul#nav1732098523673db9db09087 {
        display: flex;
        align-items: center;
        justify-content: space-between;
}

ul#nav1731942930673b5a12f3925 {
        display: flex;
        align-items: center;
        justify-content: space-between !important;
}
header.page-header {
        background-image: url(/media/wysiwyg/happy-client-bg.jpg);
        background-position: top;
}
.nav-sections-item-content .ves-megamenu {
        background-color: #ed5600 !important;
}

a#ui-id-1 {
        background-color: #ed5600 !important;
        color: #fff;
}
.logo img {
        max-height: inherit;
        filter: none;
        width: 200px !important;
}

.nav-sections-item-content .ves-megamenu,
.ves-megamenu .navigation .level0 > a {
  background-color: #ed5600 !important;
  color: #FFF !important;
  transition: none !important;
}

@media (min-width: 768px), print {
  .ves-megamenu .navigation .level0.current > a {
    background-color: #ed5600 !important;
    color: #FFF !important;
  }
}

.ves-megamenu .navigation .level0 > a:hover {
  background-color: #ed5600 !important;
  color: #FFF !important;
}

@media screen and (min-width: 768px), print {
    .ves-megamenu.top-navigation > .navigation {
        padding: 0px 209px !important;

    }
}

ul > li,
ol > li {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
}

table > thead > tr > th,
table > tbody > tr > th,
table > tfoot > tr > th,
table > thead > tr > td,
table > tbody > tr > td,
table > tfoot > tr > td {
    padding: 0px 0px !important;
}


/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/


/* ------banner slider css here!----- */

/* ================================= */

.slider-container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.banner-section-block.col-md-12 {
  margin-top: 4.5rem;
}
.slider {
  display: flex;
  /* transition: transform 0.5s ease; */
  transition: transform 0.5s ease-in-out;
}

/* .slide {
  flex: 0 0 100%;
} */

.slide {
  min-width: 100%;
  box-sizing: border-box;
}

.slide img {
  width: 100%;
  height: auto;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #018e7e;
  color: white;
  border: none;
  cursor: pointer;
  padding: 5px 15px;
  font-size: 20px;
  border-radius: 50px;
  box-shadow: 0px 2px 6px #00000078;
  margin: 0 10px;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}
/* -------------- */
/* a#ui-id-15 {
        color: #000000 !important;
        background-color: #ffffff !important;
        border-radius: 6px;
        padding: 0px 20px;
        box-shadow: 0px 2px 5px #00000073;
        font-size: 14px;
        font-weight: 500;
        text-transform: capitalize;
} */


/* #top-menu-1726047533 {
        background-color: #018e7e !important;
} */




/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
}

/* .section-bg {
  background-color: #f7fbfe;
} */


.section-title h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}



.section-title p {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 2;
}

/*--------------------------------------------------------------
# What We Do
--------------------------------------------------------------*/

.what-we-do .icon-box {
  text-align: center;
  padding: 50px 15px;
  transition: all ease-in-out 0.3s;
  background: #fff;
  display: flex;
  flex-direction: column;
  margin: 3rem 3rem;
  border-radius: 10px;

}
span.text-extra-dark-gray {
  font-size: 16px;
  color: #000;
  padding: 10px 0px 20px 0px;
  font-weight: 600;
}
a.btn-btn-small {
  display: inline-block;
  border: 2px solid black;
  border-radius: 50px;
  font-weight: 500;
  color: #000;
  margin: 0rem 5rem;
  padding: 7px;
}
.what-we-do .icon-box .icon {
  width: 10rem;
  height: 10rem;
  background: #e26242;
  border-radius: 100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: ease-in-out 0.3s;
}


.what-we-do .icon-box .icon i {
  color: #018e7e;
  font-size: 28px;
}

.what-we-do .icon-box h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 24px;
}

.what-we-do .icon-box h4 a {
  color: #384046;
  transition: ease-in-out 0.3s;
}

.what-we-do .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.what-we-do .icon-box:hover {
  border-color: #fff;
  box-shadow: 0px 0 25px 0 rgb(0 0 0 / 23%);
}

.what-we-do .icon-box:hover h4 a,
.what-we-do .icon-box:hover .icon i {
  color: #018e7e;
}

/*--------------------------------------------------------------
# project showcash
--------------------------------------------------------------*/
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
figure.snip1110 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;

  text-align: left;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1110 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
figure.snip1110 img {
  max-width: 100%;
  position: relative;
}
figure.snip1110 figcaption {
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 20px;
  right: 40%;
  padding: 15px 20px;
  background-color: #ffffff;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.6);
  z-index: 1;
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
  opacity: 0;
}
figure.snip1110 h3 {
  color: #000000;
  margin: 0;
  text-transform: uppercase;
  font-weight: 400;
  border-bottom: 1px solid #ddd;
  padding: 7px;
}
figure.snip1110 h3 span {
  font-weight: 800;
}
figure.snip1110 p {
  font-size: 0.8em;
  font-weight: 500;
}
figure.snip1110:after {
  background: #000000;
  width: 60px;
  height: 100%;
  position: absolute;
  left: -40px;
  top: 0;
  content: '';
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
figure.snip1110 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.snip1110.blue h3 {
  color: #1b557a;
}
figure.snip1110.blue:after {
  background-color: #0a212f;
}
figure.snip1110.red h3 {
  color: #81261d;
}
figure.snip1110.red:after {
  background-color: #36100c;
}
figure.snip1110.yellow h3 {
  color: #b06f09;
}
figure.snip1110.yellow:after {
  background-color: #583804;
}
figure.snip1110.green h3 {
  color: #19703e;
}
figure.snip1110.green:after {
  background-color: #082514;
}
figure.snip1110.navy h3 {
  color: #19232d;
}
figure.snip1110.navy:after {
  background-color: #000000;
}
figure.snip1110:hover img,
figure.snip1110.hover img {
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
}
figure.snip1110:hover:after,
figure.snip1110.hover:after {
  left: 0;
}
figure.snip1110:hover figcaption,
figure.snip1110.hover figcaption {
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  opacity: 1;
}

.class.project-show {
  display: flex;
  justify-content: center;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0px;
  padding: 0px 20px;
}

.container.projects {
/*        margin: 8rem 0;*/
}
.projects-show1 {
        margin-bottom: 12rem;
}


a.view-all-text-img {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 4rem;
}
img.img-img11 {
        max-width: 25%;
}







/* text line slide  section   */

.loop-holder {
  display: flex;
  white-space:nowrap;
  overflow-x:hidden;

  }

  .loop-holder__text {
    animation: textLoop 10s linear infinite;
    font-size: 10vw;
    font-weight:500;
    padding-right: .35em;
  }
  .loop-holder__text1 {
  animation: textLoop 10s linear infinite;
  font-size: 10vw;
  font-weight: 500;
  padding-right: .35em;
  -webkit-text-stroke: 2px #070707;
  color: #fff;
}
.tetx-slide {
  background-image: url(/pub/media/wysiwyg/text-slide-bg.png);
  background-repeat: no-repeat;
  object-fit: cover;
}

  @keyframes textLoop {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0)
    }
    100% {
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-15%, 0, 0)
    }
  }

  /* text line slide  section   */

/*--------------------------------------------------------------
# youtube video section
--------------------------------------------------------------*/


.vc_row.wpb_row.vc_inner.vc_row-fluid.vc_custom_1643870531753 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  background-color: #fff !important;
}
.wpb_wrapper1 {
  background-color: #fff !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 4rem 2rem 4rem 4.2rem;
}*/
.wpb_wrapper2 {
  background-color: #fff !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 4rem 4.2rem 4rem 2rem;
}
iframe#fitvid0 {
  border: 0;
  width: 32rem;
  height: 18rem;
}
.text-wcu {
  color: #018e7e;
  font-family: Raleway;
  font-weight: 500;
  font-style: normal;
  text-align: left;
  font-size: 3rem;
  padding: 2rem 0 0.5rem 0;
}
.text-wcu1 {
  color: #074cbb !important;
  font-family: Raleway;
  font-weight: 500;
  font-style: normal;
  text-align: left;
  font-size: 4rem;
  line-height: 1;
  padding-bottom: 1rem;
  width: 100%;
}


/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
  padding: 30px;
  border-radius: 6px;
  /* background: #fff; */
  transition: ease-in-out 0.3s;
}

a.knowmore {
  margin-left: 70px;
  font-size: 13px;
  font-weight: 700;
  color: #384046;
  font-family: monstrate;
  border: 1px solid black;
  border-radius: 25px;
  padding: 14px 40px;
}
.services .icon-box i {
  float: left;
  color: #3498db;
  font-size: 40px;
  line-height: 0;
}

.col-md-6.imgbx {
  padding: 0px;
}
.section-title {
  text-align: center;
  padding-bottom: 10rem;
  margin-top: 5rem;
}
.services .icon-box h4 {
  margin-left: 70px;
  font-weight: 700;
  margin-bottom: 25px;
  font-size: 4rem;
  font-family: "Kanit";
  color: #27272f;
}
.services .icon-box p {
  margin: 30px 70px;
  margin-bottom: 2rem;
  line-height: 30px;
  font-size: 16px;
}
.row.srvc-sctn {
  margin-bottom: 10rem;
}
img.srvc-img {
  max-width: 95%;
}

.services .icon-box h4 a {
  color: #384046;
  transition: 0.3s;
}


/* .services .icon-box:hover {
  box-shadow: 0px 2px 22px rgba(0, 0, 0, 0.08);
} */

.services .icon-box:hover h4 a {
  color: #3498db;
}





/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/


.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 0 35px 0;
  list-style: none;
  text-align: center;
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  margin: 0 15px 15px 0;
  display: inline-block;
  padding: 10px 20px;
  font-size: 12px;
  line-height: 20px;
  color: #444444;
  border-radius: 4px;
  text-transform: uppercase;
  background: #fff;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  background: #018e7e;
  color: #fff;
}

.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

.portfolio .portfolio-wrap {
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

.portfolio .portfolio-wrap:hover {
  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
}

.portfolio .portfolio-item {
  position: relative;
  height: 360px;
  overflow: hidden;
}

.portfolio .portfolio-item figure {
  background: #000;
  overflow: hidden;
  height: 240px;
  position: relative;
  border-radius: 4px 4px 0 0;
  margin: 0;
}

.portfolio .portfolio-item figure:hover img {
  opacity: 0.4;
  transition: 0.4s;
}

.portfolio .portfolio-item figure .link-preview,
.portfolio .portfolio-item figure .link-details {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  line-height: 0;
  text-align: center;
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  transition: all 0.2s linear;
  overflow: hidden;
  font-size: 20px;
}

.portfolio .portfolio-item figure .link-preview i,
.portfolio .portfolio-item figure .link-details i {
  color: #384046;
  line-height: 0;
}

.portfolio .portfolio-item figure .link-preview:hover,
.portfolio .portfolio-item figure .link-details:hover {
  background: #018e7e;
}

.portfolio .portfolio-item figure .link-preview:hover i,
.portfolio .portfolio-item figure .link-details:hover i {
  color: #fff;
}

.portfolio .portfolio-item figure .link-preview {
  left: calc(50% - 38px);
  top: calc(50% - 18px);
}

.portfolio .portfolio-item figure .link-details {
  right: calc(50% - 38px);
  top: calc(50% - 18px);
}

.portfolio .portfolio-item figure:hover .link-preview {
  opacity: 1;
  left: calc(50% - 44px);
}

.portfolio .portfolio-item figure:hover .link-details {
  opacity: 1;
  right: calc(50% - 44px);
}

.portfolio .portfolio-item .portfolio-info {
  background: #fff;
  text-align: center;
  padding: 30px;
  height: 90px;
  border-radius: 0 0 3px 3px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  line-height: 1px;
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 0;
}

.portfolio .portfolio-item .portfolio-info h4 a {
  color: #333;
}

.portfolio .portfolio-item .portfolio-info h4 a:hover {
  color: #018e7e;
}

.portfolio .portfolio-item .portfolio-info p {
  padding: 0;
  margin: 0;
  color: #b8b8b8;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
}


/*--------------------------------------------------------------
# home page hero slider banner
--------------------------------------------------------------*/


.owl-carousel .owl-item img {
        display: block;
        width: 100%;
        height: 820px;
}



/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/


img.testimonial-img {
        max-width: 100%;
        height: 100% !important;
}

.owl-nav {
        display: none !important;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  box-sizing: content-box;
  padding: 30px 30px 0 30px;
  margin: 30px 15px;
  text-align: center;
  min-height: 350px;
  box-shadow: 0px 2px 12px rgb(0 0 0 / 10%);
  background: #fff;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  border: 4px solid #fff;
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #111;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #999;
  margin: 0;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: #e1f0fa;
  font-size: 26px;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #018e7e;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #018e7e;
}



/*how can help you section*/


.cover-background {
        background-size: cover;
        background-position: center center !important;
        padding-top: 130px;
        padding-bottom: 130px;
}

.cover-background, .fix-background {
        position: relative;
        background-repeat: no-repeat !important;
        overflow: hidden;
}


span.button-type-text {
        color: #fff;
        font-size: 18px;
        border: 1px solid #fff;
        border-radius: 30px;
        padding: 10px 30px;
        margin-bottom: 12px;
}
h1.main-ftrr-txt-bold1 {
        color: #fff;
        font-size: 6rem;
        line-height: 4.375rem;
        letter-spacing: -2px !important;
        font-weight: 500 !important;
        text-align: center;
        line-height: 1.2;
        padding: 2rem;
}
span.main-ftrr-txt-bold {
        color: #fff;
        font-size: 20px;
        padding-bottom: 3rem;
}


.btn.btn-big {
        font-size: 18px;
        background: linear-gradient(60deg, #e77d13, #fa4722, #ee2370, #a23cb3, #2c5cba, #007dab);
        background-size: 200% 200%;
        color: var(--white);
        -webkit-animation: footeranimatedgradient 10s ease infinite alternate;
        animation: footeranimatedgradient 10s ease infinite alternate;
        padding: 20px 50px;
        border-radius: 50px;
        text-decoration: none;
        color: #fff;
}

.col-xl-9.col-lg-10.col-md-12.appear.anime-child.anime-complete {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 3rem 0;
}

.btn.btn-switch-text .btn-double-text {
        transition: opacity .65s, transform .85s;
        transition-timing-function: cubic-bezier(.15,.85,.31,1);
}



/*how can help you section*/



/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/

p.call-number {
        color: #000000 !important;
}
span.lets-talk {
        color: #000000 !important;
}
p.webarian-mail {
        color: #000000 !important;
}

.form {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
}
.contact-form {
        background-color: #000;
        position: relative;
        padding: 10.3rem 5rem;
        width: 500px;
}

p.fll-add {
        color: #fff !important;
        font-weight: 300;
}
p.fll-add1 {
        color: #fff !important;
        font-weight: 300 !important;
}
span.email-txt {
        color: #000 !important;
}
span.lets-talk {
        color: #000;
}


.contact .info-wrap {
  padding: 30px;
  background: #fff;
  border-radius: 4px;
}

.contact .info i {
  font-size: 20px;
  color: #018e7e;
  float: left;
  width: 44px;
  height: 44px;
  background: #fceae5;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}

.contact .info h4 {
  padding: 0 0 0 60px;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #384046;
}

.contact .info p {
  padding: 0 0 0 60px;
  margin-bottom: 0;
  font-size: 14px;
  color: #65747f;
}

.contact .info:hover i {
  background: #018e7e;
  color: #fff;
}

.contact .php-email-form {
  width: 100%;
  padding: 30px;
  background: #fff;
  border-radius: 4px;
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

.contact .php-email-form .validate {
  display: none;
  color: #018e7e;;
  margin: 0 0 15px 0;
  font-weight: 400;
  font-size: 13px;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #018e7e;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .error-message br+br {
  margin-top: 25px;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
}

.contact .php-email-form input {
  height: 44px;
}

.contact .php-email-form textarea {
  padding: 10px 12px;
}

.contact .php-email-form button[type=submit] {
  background: #018e7e;
  border: 0;
  padding: 10px 24px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: #018e7e;
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


/*-----------inner sec page css -------------*/
section.inner-page {
        padding: 9rem 0;
}
/*----------------------------------------*/



/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 40px 0;
  margin-top: 70px;
}

.breadcrumbs h2 {
  font-size: 26px;
  font-weight: 300;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
}

.breadcrumbs ol li+li {
  padding-left: 10px;
}

.breadcrumbs ol li+li::before {
  display: inline-block;
  padding-right: 10px;
  color: #4f5a62;
  content: "/";
}

@media (max-width: 768px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }

  .breadcrumbs ol {
    display: block;
  }

  .breadcrumbs ol li {
    display: inline-block;
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/


/*logo slider ----------*/
.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/*logo slider ----------*/






#footer {
  color: #444444;
  font-size: 14px;
  background: #f7fbfe;
}

#footer .footer-top {
  padding: 40px 56px 2px 46px;
  background: #fff;
}

#footer .footer-top .footer-contact {
  margin-bottom: 30px;
}

#footer .footer-top .footer-contact h4 {
  font-size: 22px;
  margin: 0 0 30px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-weight: 700;
}
.footer-container footer .container.d-md-flex.py-4 {
  text-align: center;
  font-size: 16px;
}

#footer .footer-top .footer-contact p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Raleway", sans-serif;
  color: #777777;
}

#footer .footer-top h4 {
  font-size: 16px;
  font-weight: bold;
  color: #444444;
  position: relative;
  padding-bottom: 12px;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
  display: inline-grid;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #018e7e;
  font-size: 18px;
  line-height: 1;
}

#footer .footer-top .footer-links ul li {
  padding: 7px 0;
  display: flex;
  align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-top .footer-links ul a {
  color: #777777;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}

#footer .footer-top .footer-links ul a:hover {
  text-decoration: none;
  color: #018e7e;
}

#footer .footer-newsletter {
  font-size: 15px;
}

#footer .credits {
  padding-top: 5px;
  font-size: 13px;
  color: #444444;
}

#footer .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #018e7e;
  color: #fff;
  line-height: 1;
  padding: 10px 11px;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .social-links a:hover {
  background: #d8411b;
  color: #fff;
  text-decoration: none;
}



/*--------------------------------------------------------------
# extra css---
--------------------------------------------------------------*/

img.abt-icon {
  max-width: 120%;
  margin-top: 15px;
  margin-left: 15px;
  filter: drop-shadow(1px 2px 3px #00000066);
}

/*--------------------------------------------------------------
# how can help you css---
--------------------------------------------------------------*/

.wpb_how-can-help-you {
  background-color: #0064fb;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 7rem 0;
}
.ml2txt {
  font-weight: 600;
  font-size: 45px;
  transition: all .9s ease-in;
  color: #fff;
  margin-bottom: 15px;
}
.btn.btn-rounded.btn-large {
  padding: 9px 38px;
}
.btn.btn-rounded {
  border-radius: 50px;
}
.btn.btn-transparent-white {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
.btn.btn-large {
  font-size: 13px;
  padding: 9px 34px;
  line-height: 25px;
}
span.text-extra-large111 {
  color: #ffffff;
  text-align: center;
  font-size: 25px;
  margin-bottom: 25px;
}

section {
  padding: 0px 0;
}
img.contact-main-banner {
  max-width: 100%;
}


.row-full-width-inner {
        max-width: 100% !important;
}
section#testimonials {
        padding: 6rem 0;
        margin: 14rem 0 10rem 0;
        background-image: url(/media/wysiwyg/footer-bgg.png);
        background-color: #F6F7F9;

}

/*logo slider section---------------*/

#logo-slider {
        padding: 3rem;
        background-color: #f3f3f3a1;
}
/*.owl-carousel .owl-item img {
        display: block;
        width: 70%;
}*/
.owl-stage {
       display: flex;
       align-items:center;
       flex-direction: row;
       justify-content: center;
}

img.mini-logo11 {
        max-width:25%;
        height: 100% !important;
}

/*logo slider section---------------*/




/*call us now section --------------------*/



.call-us-now-section {
  background: url(/media/wysiwyg/happy-client-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #02231f;
  padding-top: 80px;
}
img.owner-img {
  max-height: 585px;
}
.call-us-now-text-area {
  text-align: center !important;
}
.address-item1 {
  margin-bottom: 40px;
}
.address-item1 .address-icon1 {
  display: inline-block;
  position: relative;
  height: 75px;
  width: 75px;
  line-height: 70px;
  border-radius: 100%;
  text-align: center;
  background: #ffffff;
}
img.calling-animation {
        position: absolute;
        left: 12px;
        bottom: 13px;
}

.address-item1 .address-icon1:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  animation: pulse-border 1500ms ease-out infinite;
  background: #ffffff;
}
.address-item1 .address-icon1 i {
  text-align: center;
  color: #106eea;
  border-radius: 100%;
  font-size: 25px;
  position: relative;
  line-height: 70px;
  z-index: 9;
  width: 100%;
  vertical-align: middle;
  margin-left: 0;
  height: auto;
}
.sec-title33 .sub-text1 {
  font-size: 25px;
  line-height: 1.4;
  font-weight: 700;
  color: #ffffff;
  display: block;
  margin-bottom: 20px;
}
.sec-title33 .title-txt {
  font-size: 50px;
  font-weight: 700;
  color: #fff;
  line-height: 40px;
  margin-bottom: 50px;
}
.sec-title33 .desc11 {
  font-size: 19px;
  font-weight: 500;
  color: #fff;
  margin: 0;
}
.btn-part11 {
  margin-top: 40px;
}
.readon.lets-talk {
  padding: 14px 40px 14px 40px;
  background-color: #fff;
  border-radius: 30px 30px 30px 30px;
  text-decoration: none;
  color: #000;
}

.readon {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: all 0.4s;
  z-index: 1;
  background-color: transparent;
}


/*button animation css*/

/*  ----- video css here  end ---- */


/*=============== animation button ===============*/


/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --body-color: #393937;
  --accent-color: #fff;
  --white-color: #fff;
  --font-color: #fff;
  --box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
    0 0 100px #03e9f4;
  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Montserrat", sans-serif;
  --normal-font-size: 1rem;
  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-semi-bold: 600;
  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}


.button-animation {
  position: relative;
  display: inline-block;
  padding: 16px 40px;
  color: #010101;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: 2px;
  transition: 0.5s;
  text-decoration: none;
  background-color: #ff5d00;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  font-family: monospace;
  margin-top: 2rem;
  border-radius: 50px;
}
  .button-animation span {
  position: absolute;
  display: block;
  }
  .button-animation span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-color));
  animation: btn-anim1 1s linear infinite;
  }
  @keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
  }
  .button-animation span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--accent-color));
  animation: btn-anim2 1s linear infinite;
  animation-delay: 0.25s;
  }
  @keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%, 100% {
    top: 100%;
  }
  }
  .button-animation span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 3px;
  background: linear-gradient(270deg, transparent, var(--accent-color));
  animation: btn-anim3 1s linear infinite;
  animation-delay: 0.5s;
  }
  @keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%, 100% {
    right: 100%;
  }
  }
  .button-animation span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(360deg, transparent, var(--accent-color));
  animation: btn-anim4 1s linear infinite;
  animation-delay: 0.75s;
  }
  @keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%, 100% {
    bottom: 100%;
  }
  }
  .fa {
  float: inline-end;
  font-weight: 200 !important;
  font-size: 16px;
}

@keyframes infiniteScroll {
  from {transform: translateX(0)}
  to {transform: translateX(-50%)}
  }

  .horizontal-scrolling-items {
  display: flex;
  width: 150px;
  animation-name: infiniteScroll;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }
/*button animation css*/


.rs-counter {
  margin-top: -78px;
  position: absolute;
  min-width: 860px;
  right: 100px;
}
.counter-top-area {
  background: url(/media/wysiwyg/counter-bg.png);
  background-color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: -1px 21px 25px 0px rgba(0, 0, 0, 0.12);
  border-radius: 10px 10px 10px 10px;
  padding: 40px 40px 40px 40px;
  z-index: 10;
}
.rs-counter .counter-top-area .counter-list .counter-text .count-number {
  margin-bottom: 7px;
  text-align: center;
}
.rs-counter .counter-top-area .counter-list .counter-text .count-number .rs-count.k {
  padding-right: 30px !important;
}
.rs-counter .counter-top-area .counter-list .counter-text .count-number .rs-count {
  color: #ff5d00;
  font-size: 48px;
  font-weight: 900;
  position: relative;
}
.rs-counter .counter-top-area .counter-list .counter-text .count-number .rs-count.k:before {
  content: 'k';
  position: absolute;
  right: 0;
}
.rs-counter .counter-top-area .counter-list .counter-text .title-title {
  font-size: 19px;
  line-height: 29px;
  color: #333333;
  font-weight: 600;
  margin: 0;
  text-align: center;
}
.rs-counter .counter-top-area .counter-list .counter-text .count-number .rs-count.plus {
  padding-right: 30px !important;
}

.rs-counter .counter-top-area .counter-list .counter-text .count-number .rs-count.plus:before {
  content: '+';
  position: absolute;
  right: 0;
}



/*working process --------------------*/

.our-work-process {
        padding-top: 180px;
}
.process-wrap3 {
        background: url(/media/wysiwyg/process-bg.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #03228F;
        margin: 0px 31px 0px 0px;
        padding: 80px 40px 75px 40px;
        transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
        border-radius: 10px 10px 10px 10px;
}

.sub-text.new {
        color: #ffffff;
        font-size: 15px;
        padding-left: 0;
                padding-bottom: 20px;
}

.working-process-tab-txt {
        font-size: 34px;
        font-weight: 700;
        line-height: 46px;
        color: #fff;
        margin: 0;
                padding-bottom: 30px;
}

.readon.learn-more.contact-us {
        border-radius: 8px 8px 8px 8px !important;
}
.readon.learn-more {
        padding: 14px 40px 14px 40px;
        background-color: #fff;
        border-radius: 30px 30px 30px 30px;
        color: #000;
        text-decoration: none;
}

.number-area {
        display: block;
        font-size: 50px;
        font-weight: 700;
        line-height: 1.4;
        color: #ff5d00 !important;
}
.rs-process .rs-addon-number .number-text .number-title .title {
        font-size: 24px;
        line-height: 34px;
        font-weight: 600;
        color: #101010;
        margin-bottom: 10px;
}
.title-wrkg-prcs {
        font-size: 24px;
        line-height: 34px;
        font-weight: 600;
        color: #101010;
        margin-bottom: 10px;
}
.number-txt {
        margin: 0;
        padding-right: 44px;
        font-size: 16px !important;
}

.mb-11 {
  padding-bottom: 40px;
}
.pl-11.md-pl-11 {
        padding-left: 40px;
}


/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/


.sec-title2 {.rs-pricing .pricing-table
        position: relative;
        margin-bottom: 45px;
        text-align: center !important;
}
.rs-pricing {
        margin-top: 30px;
        position: relative;
        padding-top: 30px;
        background: #ffffff;
        padding-bottom: 145px;
}
.rs-pricing .pricing-table {
        padding: 27px 40px 0px 40px;
        box-shadow: 0 0 30px #e7e5e5;
        background: #ffffff;
        border-radius: 12px;
        position: relative;
        text-align: center;
        margin: 0px 25px 0px 25px;
}
.rs-pricing .pricing-table .pricing-badge {
        top: 30px;
        left: 0px;
        padding: 10px 23px 11px 23px;
        background-color: #1273EB;
        border-radius: 0px 30px 30px 0px;
        font-size: 13px;
        font-weight: 500;
        text-transform: uppercase;
        position: absolute;
        color: #fff;
        line-height: 1;
        z-index: 1;
}
.rs-pricing .pricing-table .pricing-icon {
        margin-bottom: 30px;
}
.rs-pricing .pricing-table .pricing-icon img {
        width: 110px;
}   /*  pricing-sec1 --- change img class*/

.rs-pricing .pricing-table .pricing-table-price {
        margin-bottom: 30px;
}
.rs-pricing .pricing-table .pricing-table-price .pricing-table-bags .pricing-currency {
        font-size: 25px;
        font-weight: 600;
        color: #101010;
}
.rs-pricing .pricing-table .pricing-table-price .pricing-table-bags .table-price-text {
        font-size: 52px;
        font-weight: 600;
        color: #101010;
}
.rs-pricing .pricing-table .pricing-table-price .pricing-table-bags .table-period {
        color: #435761;
        font-size: 16px;
        font-weight: 500;
        display: block;
}
.rs-pricing .pricing-table .pricing-table-body {
        margin-bottom: 10px;
        border-style: solid;
        border-width: 1px 0px 0px 0px;
        border-color: #EBEBEB;
        padding: 18px 15px 4px 15px;
}
.rs-pricing .pricing-table .pricing-table-body li {
        text-align: left;
        padding: 9px 0px 9px 0px;
        margin-bottom: 0px;
        font-size: 15px;
        font-weight: 400;
}
.rs-pricing .pricing-table .pricing-table-body li i {
        float: right;
        margin-right: 0;
        color: #106eea;
}
.readon.buy-now {
        padding: 10px 40px 10px 40px;
        background-image: linear-gradient(170deg, #03228f 0%, #4e95ed 100%);
        border-radius: 30px 30px 30px 30px;
        text-transform: capitalize;
        position: relative;
        top: 25px;
        text-decoration: none;
}
.rs-pricing .pricing-table.primary-bg {
        background-image: linear-gradient(70deg, #0b70e1 0%, #03228f 100%);
}

/*center blue section */

.rs-pricing .pricing-table.primary-bg .pricing-table-price .pricing-table-bags .pricing-currency {
        color: #ffffff;
}
.rs-pricing .pricing-table.primary-bg .pricing-table-price .pricing-table-bags .table-price-text {
        color: #ffffff;
}
.rs-pricing .pricing-table.primary-bg .pricing-table-price .pricing-table-bags .table-period {
        color: #ffffff;
}
.rs-pricing .pricing-table.primary-bg .pricing-table-body {
        border-color: #1F71C1;
}
.rs-pricing .pricing-table.primary-bg .pricing-table-body li {
        color: #ffffff;
}
.rs-pricing .pricing-table.primary-bg .pricing-table-body li i {
        color: #ffffff;
}




/* why choose us section css */

button.collapsiblee:hover {
        background: none;
        border: none;
        color: #000;
}

div#why-choos-us {
        display: flex;
        align-items: center;
}
img.foc-main-img {
        max-width: 100%;
        float: inline-end;
}

img.foc-main-imgg {
        max-width: 100%;
}
.text-area-focc {
        display: flex;
        justify-content: flex-start;
}
h1.heading-txt-focc {
        font-size: 35px;
                font-weight: 600;
}

.future-of-copy {
        padding: 5rem 0 10rem 24rem;
        display: flex;
        align-items: center;
        background-image: url(/media/wysiwyg/crafto-landing-page-bg-03.png);
        background-repeat: no-repeat;
        background-color: #f1f1fa;
}

h1.heading-txt-foc {
  text-align: justify;
  font-size: 50px;
  font-weight: 600;
  font-family: "Space Grotesk";
  color: #000;
  padding: 5px 12rem 6rem 0;
}

p.moni-txt-foc {
  text-align: justify;
  font-size: 15px;
  font-weight: 600;
  font-family: "Space Grotesk";
  color: #000000;
  background-color: #cdf780;
  width: 185px;
  padding: 5px 20px;
}

/* collaps- css */
.collapsiblee {
  background-color: #77777700;
  cursor: pointer;
  padding: 28px 28px 28px 2px;
  width: 80%;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  font-family: "Space Grotesk";
  color: #000000;
  border-bottom: 1px solid #00000040 !important;
  border: none;
}
p.collapsible-body-txt {
  font-size: 14px;
  padding: 12px 8rem 12px 1px;
  margin-bottom: 0px;
  font-weight: 500;
  color: #5a5a5a;
  font-family: "Space Grotesk";
}

  .button:hover {
        background: none !important;
        border: none !important;
        color: none !important;
}
.button:active {
        background: none!important;
        border: none !important;
        color: none !important;
}
/* The future of copy section */


/* youtube section */

.youtube-video-img {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
}

img.happy-customer-utub-vid {
        max-width: 100%;
        margin: 0 4rem;
        box-shadow: 5px 6px 5px #9191911f;
        border-radius: 12px;
}


div#video-sec1 {
        margin-bottom: 5rem !important;
        margin-top: 4rem !important;
}


div#service-upr-section1 {
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        align-items: center;
/*        border-bottom: 0.3px solid #d3d3d3;*/
        margin-top: 5rem 0;
}
.txt-wth-img1 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        padding: 5rem 0 15px 0;
}
p.btn-txt-mini1 {
        font-weight: 500;
        margin-bottom: 20px;
        color: #060606;
        font-size: 11px;
        font-family: monospace;
        background-color: #cdf683;
        padding: 4px 20px;
        border-radius: 5px;
}
h1.text-wt-img1 {
        text-align: justify;
        font-size: 40px;
        font-weight: 700;
        font-family: "Space Grotesk";
        color: #000060;
        padding: 1% 3rem 25px 0rem;
}
div#border1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
}
.btn-wth-img {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
}
img.free-img {
        padding: 0 2rem;
}

.youtube-sec11 {
  background-color: #F6F7F9;
  padding-bottom: 3rem;
}

iframe#fitvid0 {
        padding: 20px;
        background: url(/media/wysiwyg/counter-bg.png);
        border-radius: 12px;
        box-shadow: 5px 6px 5px #00000024;
        background-color: #fff;
}
.youtube-sec11 {
        background-color: #F6F7F9;
        /* padding-bottom: 3rem; */
        background: url(/pub/media/wysiwyg/youutbe-bg.webp);
        background-repeat: no-repeat;
        background-position: right;
/*        background-color: #000060;*/
        padding-top: 20px;
        padding-bottom: 1rem;
        /* margin-bottom: 8rem; */
}


@media (max-width:767px) and (min-width:320px) {

img.owner-img{
  display: none;
}

.rs-counter {
                right: auto;
                position: relative;
                margin: 80px 30px 0;
                min-width: auto;
        }

        div#border1 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
}
div#service-upr-section1 {
        display: flex;
        flex-direction: column;
}
.class.project-show {
        display: flex;
        justify-content: center;
        flex-direction: column;
        justify-content: space-between;
}

img.foc-main-img {
        max-width: 90%;
        float: inline-start;
        margin-top: 4rem;
}
.future-of-copy {
        display: flex;
        flex-direction: column;
}
h1.heading-txt-foc {
        font-size: 30px;
        padding-bottom: 2rem;
}
div#projectss1 {
        padding-bottom: 3rem;
}
.our-work-process {
        padding-top: 60px;
}
.process-wrap3 {
        margin-bottom: 5rem;
}
section#testimonials {
        margin: 8rem 0 6rem 0;
}
.call-us-now-text-area {
        padding-bottom: 4rem;
}
#footer .social-links a {
        width: 30px;
        height: 30px;
        width: 30px;
        padding: 5px;
}
iframe#fitvid0 {
        border: 0;
        width: 100% !important;
        height: 30rem !important;
        margin-bottom: 4rem !important;
}
.testimonials .testimonial-item p {
        padding: 30px 0px 10px 0px;
}

.testimonials .testimonial-item {
        padding: 40px 35px 30px 35px;
        margin: 30px 50px 30px 15px;
}
}


@media (max-width:1200px) and (min-width:767px) {

  img.owner-img{
  display: none;
}

.rs-counter {
                right: auto;
                position: relative;
                margin: 80px 30px 0;
                min-width: auto;
        }
        .our-work-process {
        padding-top: 90px;
}
.btn-part11 {
        margin-top: 40px;
        margin-bottom: 4rem;
}
.process-wrap3 {
        margin: 0px 31px 40px 0px;
}


  }





/*  ====================================================================================
                                          start a project css ----
  ====================================================================================*/

.amcform-page-wrap {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
}


  label.fb-text-label.label {
        font-size: 15px;
}
input#phone_number {
        width: 64rem;
}
input#full_name {
        border: 1px solid #bcbcbc;
        width: 64rem;
}

input#email_text {
        border: 1px solid #b4b4b4;
        width: 64rem;
}
label.fb-number-label.label {
        font-size: 15px;
}
label.fb-select-label.label {
        font-size: 15px;
}
.rendered-form .fieldset .fields .field.form-group {
        margin: 20px 40px;
}
label.fb-time-label.label {
        font-size: 15px;
}
label.fb-textarea-label.label {
        font-size: 15px;
}
label.fb-file-label.label {
        font-size: 15px;
}
input#time {
        width: 64rem;
        height: 30px;
}
input#time {
        width: 64rem;
        height: 28px;
        font-size: 13px;
        padding: 0px 10px;
}
textarea#message {
        width: 64rem !important;
        height: 10rem !important;
}
.field.required.control.amcform-gdpr {
        font-size: 12px;
}
.field.required.control.amcform-gdpr {
        margin-left: 4rem;
}
button.amcform-submit.action.submit.primary {
        background-color: #ed5600;
}
.amcform-toolbar {
        margin-left: 4rem;
}
.amform-form {
        margin: 20px auto 30px;
        max-width: 1000px;
}
select#request {
        width: 64rem !important;
}
.amform-form-fieldset.fieldset {
        margin-bottom: 70px;
}






  /*--------------------------------------------------------------
#  start a project css end ---
--------------------------------------------------------------*/








/*  ====================================================================================
                                          About Us css ----
  ====================================================================================*/

  /*--------------------------------------------------------------
# about us page css here---
--------------------------------------------------------------*/

.about-us-ftr-cntnt {
        margin-top: 8rem;
        background-color: #f7f7f7;
        padding: 2rem;
                margin-bottom: 6rem;
}
p.edu_desc.mt-3.mb-0.text-muted {
        margin-top: 2rem !important;
        color: #000 !important;
        text-align: center;
        line-height: 1.8;
}

.section_all {
  position: relative;
  padding-top: 30px;
}
.section-title {
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 1px;
}

.section-subtitle {
  letter-spacing: 0.4px;
  line-height: 28px;
  max-width: 550px;
}

.section-title-border {
  background-color: #000;
  height: 1 3px;
  width: 44px;
}

.section-title-border-white {
  background-color: #fff;
  height: 2px;
  width: 100px;
}
.text_custom {
  color: #00bd2a;
}

.about_icon i {
  font-size: 30px;
  height: 65px;
  width: 65px;
  line-height: 65px;
  display: inline-block;
  background: #fff;
  border-radius: 35px;
  color: #000;
  box-shadow: 0 6px 7px 0px rgba(158, 152, 153, 0.5);
}
.about_icon {
        padding-bottom: 2rem;
}
h5.text-dark.text-capitalize.mt-3.font-weight-bold {
        font-size: 16px;
        font-weight: 600;
}

.about_header_main .about_heading {
  max-width: 450px;
  font-size: 24px;
}

.about_icon span {
  position: relative;
  top: -10px;
}

.about_content_box_all {
  padding: 28px;
}
img.abt-us-mini {
  max-width: 80%;
}
a.about-us-buttonn {
        margin: 1rem;
        padding: 12px 38px 12px 38px;
        background-color: #ed5600;
        box-shadow: 2px 2px 5px #00000050;
        border-radius: 30px 30px 30px 30px;
        text-decoration: none;
        color: #ffffff;
        font-size: 14px;
}
.fa-angellist:before {
        content: "\f209";
        color: #ed5600;
}
.fa-pencil:before {
        content: "\f040";
        color: #ed5600;
}
.fa-paper-plane:before {
        content: "\f1d8";
        color: #ed5600;
}
.about_detail.text-center {
        display: flex;
        flex-direction: column;
        align-items: center;
}
h2.webarian-txt {
        font-weight: 700;
        line-height: 1.4;
        color: #ed5600;
        max-width: 490px;
        margin: 0 auto;
        text-align: center;
        font-family: "Raleway", sans-serif;
}
p.text-abt {
  font-size: 15px;
  color: #5a5a5a;
  text-align: justify;
  margin: 2rem 0;
        line-height: 2;
        padding: 3rem;
}
.btn-abt-us {
  display: flex;
  justify-content: center;
}
.mt-5 {
  margin-top: 0rem !important;
  display: flex;
  flex-direction: row;
  align-items: center;

}
img.contact-main-banner {
  max-width: 100%;
}
/* end------------- */





   /* mini logo slider css ------------  */

   .card {
    border: none;
}
img.img-abt1 {
  max-width: 70%;
}

   @media (max-width: 767px) {
    .carousel-inner .carousel-item > div {
      display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
      display: block;
    }
  }

  .carousel-inner .carousel-item.active,
  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
    display: flex;
  }

  /* medium and up screens */
  @media (min-width: 768px) {

    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(25%);
    }

    .carousel-inner .carousel-item-start.active,
    .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
    }
  }

  .carousel-inner .carousel-item-end,
  .carousel-inner .carousel-item-start {
    transform: translateX(0);
  }

  /* end logo slider css ------ */










/*  ====================================================================================
                                          contact  css ----
  ====================================================================================*/

.form {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
}

.simple-contact-banner {
        display: flex;
        justify-content: center;
        margin-top: 4.5rem;
}


  .right_conatct_social_icon{
       background: linear-gradient(to top right, #1325e8 -5%, #8f10b7 100%);
  }
  .contact_us{
      background-color: #f1f1f1;
      padding: 120px 0px;
  }

  .contact_inner{
      background-color: #fff;
      position: relative;
      box-shadow: 20px 22px 44px #cccc;
      border-radius: 25px;
  }
  .contact_field{
      padding: 60px 340px 90px 100px;
  }
  .right_conatct_social_icon{
      height: 100%;
  }

  .contact_field h3{
     color: #000;
      font-size: 40px;
      letter-spacing: 1px;
      font-weight: 600;
      margin-bottom: 10px
  }
  .contact_field p{
      color: #000;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 1px;
      margin-bottom: 35px;
  }
  .contact_field .form-control{
      border-radius: 0px;
      border: none;
      border-bottom: 1px solid #ccc;
  }
  .contact_field .form-control:focus{
      box-shadow: none;
      outline: none;
      border-bottom: 2px solid #1325e8;
  }
  .contact_field .form-control::placeholder{
      font-size: 13px;
      letter-spacing: 1px;
  }

  .contact_info_sec {
      position: absolute;
      background-color: #2d2d2d;
      right: 1px;
      top: 18%;
      height: 340px;
      width: 340px;
      padding: 40px;
      border-radius: 25px 0 0 25px;
  }
  .contact_info_sec h4{
      letter-spacing: 1px;
      padding-bottom: 15px;
  }

  .info_single{
      margin: 30px 0px;
  }
  .info_single i{
      margin-right: 15px;
  }
  .info_single span{
      font-size: 14px;
      letter-spacing: 1px;
  }

  button.contact_form_submit {
      background: linear-gradient(to top right, #1325e8 -5%, #8f10b7 100%);
      border: none;
      color: #fff;
      padding: 10px 15px;
      width: 100%;
      margin-top: 25px;
      border-radius: 35px;
      cursor: pointer;
      font-size: 14px;
      letter-spacing: 2px;
  }
  .socil_item_inner li{
      list-style: none;
  }
  .socil_item_inner li a{
      color: #fff;
      margin: 0px 15px;
      font-size: 14px;
  }
  .socil_item_inner{
      padding-bottom: 10px;
  }

  .map_sec{
      padding: 50px 0px;
  }
  .map_inner h4, .map_inner p{
      color: #000;
      text-align: center
  }
  .map_inner p{
      font-size: 13px;
  }
  .map_bind{
     margin-top: 50px;
      border-radius: 15px;
      overflow: hidden;
  }


  /* contact form css---------- */

  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");


.container.block1 {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 1rem;
    background-color: #fafafa;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title {
  color: #fff;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 0.7rem;
}

.input-container {
 width: 100%;
        outline: none;
        border: 2px solid #fafafa !important;
        background: none;
        padding: 0.6rem 1.2rem;
        color: #fff;
        font-weight: 500;
        font-size: 0.95rem;
        letter-spacing: 0.5px;
        border-radius: 5px;
        transition: 0.3s;
                margin: 20px 0;
                        position: relative;
}

input[type="text"] {
        background: none;
        border: none;
}
input.input:not([disabled]):focus {
        box-shadow: none;
}

input.input {
        background: none;
        border: none;
        color: #fff;
}

textarea.input {
  padding: 0.8rem 1.2rem;
  min-height: 150px;
  border-radius: 5px;
  resize: none;
  overflow-y: auto;
  background: none;
  border: none;
  color: #fff;
}

.input-container label {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  padding: 0 0.4rem;
  color: #fafafa;
  font-size: 0.9rem;
  font-weight: 400;
  pointer-events: none;
  z-index: 1000;
  transition: 0.5s;
}

.input-container.textarea label {
  top: 1rem;
  transform: translateY(0);
}

.btnbtn {
padding: 1.1rem 1.3rem;
        background-color: #fff;
        border: 2px solid #fafafa;
        font-size: 18px;
        color: #000;
        line-height: 1;
        border-radius: 5px;
        outline: none;
        cursor: pointer;
        transition: 0.3s;
        margin: 0;
        width: 100%;
}

.btnbtn:hover {
  background-color: transparent;
  color: #fff;
}

.input-container span {
  position: absolute;
  top: 0;
  left: 25px;
  transform: translateY(-50%);
  font-size: 0.8rem;
  padding: 0 0.4rem;
  color: transparent;
  pointer-events: none;
  z-index: 500;
}

.input-container span:before,
.input-container span:after {
  content: "";
  position: absolute;
  width: 10%;
  opacity: 0;
  transition: 0.3s;
  height: 5px;
  background-color: #1abc9c;
  top: 50%;
  transform: translateY(-50%);
}

.input-container span:before {
  left: 50%;
}

.input-container span:after {
  right: 50%;
}

.input-container.focus label {
  top: 0;
  transform: translateY(-50%);
  left: 25px;
  font-size: 0.8rem;
}

.input-container.focus span:before,
.input-container.focus span:after {
  width: 50%;
  opacity: 1;
}

.contact-info {
  padding: 0rem 2.2rem;
  position: relative;
}

.contact-info .title {
  color: #1abc9c;
}

.text {
  color: #333;
  margin: 1.5rem 0 2rem 0;
}

.information {
  display: flex;
  color: #555;
  margin: 0.7rem 0;
  align-items: center;
  font-size: 0.95rem;
}

.information i {
  color: #1ABC9C;
}

.icon {
  width: 28px;
  margin-right: 0.7rem;
}

.social-media {
  padding: 2rem 0 0 0;
}

.social-media p {
  color: #333;
}

.social-icons {
  display: flex;
  margin-top: 0.5rem;
}

.social-icons a {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background: linear-gradient(45deg, #1abc9c, #149279);
  color: #fff;
  text-align: center;
  line-height: 35px;
  margin-right: 0.5rem;
  transition: 0.3s;
}

.social-icons a:hover {
  transform: scale(1.05);
}


.big-circle {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #1cd4af, #159b80);
  bottom: 50%;
  right: 50%;
  transform: translate(-40%, 38%);
}

.big-circle:after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  background-color: #fafafa;
  border-radius: 50%;
  top: calc(50% - 180px);
  left: calc(50% - 180px);
}

.square {
  position: absolute;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(181%, 11%);
  opacity: 0.2;
}

@media (max-width: 850px) {
  .form {
    grid-template-columns: 1fr;
  }

  .contact-info:before {
    bottom: initial;
    top: -75px;
    right: 65px;
    transform: scale(0.95);
  }

  .contact-form:before {
    top: -13px;
    left: initial;
    right: 70px;
  }

  .square {
    transform: translate(140%, 43%);
    height: 350px;
  }

  .big-circle {
    bottom: 75%;
    transform: scale(0.9) translate(-40%, 30%);
    right: 50%;
  }

  .text {
    margin: 1rem 0 1.5rem 0;
  }

  .social-media {
    padding: 1.5rem 0 0 0;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 1.5rem;
  }

  .contact-info:before {
    display: none;
  }

  .square,
  .big-circle {
    display: none;
  }

  form,
  .contact-info {
    padding: 1.7rem 1.6rem;
  }

  .text,
  .information,
  .social-media p {
    font-size: 0.8rem;
  }

  .title {
    font-size: 1.15rem;
  }

  .social-icons a {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }

  .icon {
    width: 23px;
  }

  .input {
    padding: 0.45rem 1.2rem;
  }

  .btnbtn {
    padding: 0.45rem 1.2rem;
  }
}

@media (min-width: 768px) {
    .offset-md-1 {
            margin-left: none;
    }
}


/* portfolio css here!--------- */

span.base.xhighlight {
        font-size: 30px;
        padding: 10px 0px;
}
.portfolio-container .portfolio-top-content {
        padding: 4rem 2rem;
}
ul.nav.linkitems {
        display: flex;
        align-items: center;
        margin: 0px 1rem;
}
.linkitem {
        font-size: 16px;
        color: #000 !important;
        text-decoration: none !important;
        margin: 0px 10px;
}

/* contact-ractangle css checking--------- */


.wpb_wrappercontc1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.wpb_wrappercontc2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.wpb_wrappercontc2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
img.contact-main-banner {
  max-width: 100%;
}
.contc11 {
        width: 33rem !important;
        height: 33rem !important;
    padding: 1.5rem 3rem;
    background-color: #000;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.contc22 {
        width: 33rem !important;
        height: 33rem !important;
    padding: 1.5rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
span.add-txt {
    font-size: 14px;
    font-weight: 600;
}
p.fll-add {
    font-size: 13px;
    text-align: center;
}

p.fll-add {
        font-size: 13px !important;
        text-align: center;
        font-weight: 400;
        padding-top: 1rem;
}
p.fll-add1 {
        font-size: 13px !important;
        text-align: center;
        font-weight: 400 !important;
        padding-top: 1rem;
}
img.contct-icons {
        padding-bottom: 2rem;
}
span.lets-talk {
        font-size: 13px !important;
        text-align: center;
        font-weight: 400 !important;
        padding-top: 1rem;
        color: #fff;
}
p.call-number {
        font-size: 13px !important;
        text-align: center;
        font-weight: 400 !important;
        padding-top: 1rem;
        color: #fff;
}
span.email-txt {
        font-size: 13px !important;
        text-align: center;
        font-weight: 400 !important;
        padding-top: 1rem;
        color: #fff;
}
p.webarian-mail {
        font-size: 13px !important;
        text-align: center;
        font-weight: 400 !important;
        padding-top: 1rem;
        color: #fff;
}



/*  ====================================================================================
                                          service  css ----
  ====================================================================================*/


.service-txt {
        margin: 8rem 0 8rem 0;
}
h2.srvc-txt {
        color: #000;
        font-size: 16px;
        font-weight: 300;
        text-align: center;
        margin: 3rem 0;
        line-height: 1.8;
}

.c-services__item:hover {
        background-image: linear-gradient(160deg, #03228f 0%, #0b70e1 77%);
}

.simple-contact-banner {
    margin-top: 4rem;
}

/* ------------- code pen css here!--------------- */



    :root {
    --color-brand-primary: hsl(var(--color-brand-primary-h), 43%, 43%);
    --color-brand-primary-h: 251;
    --color-brand-primary-s: 43%;
    --color-brand-primary-l: 43%;
    --color-brand-accent: hsl(var(--color-brand-accent-h), 96%, 61%);
    --color-brand-accent-h: 16;
    --color-brand-accent-s: 96%;
    --color-brand-accent-l: 61%;
    --color-brand-accent-bg: hsl(calc(var(--color-brand-accent-h) + 17), 100%, 96%);
    --ratio: 1.4;
    --s-6: calc(var(--s-5) / var(--ratio));
    --s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s0) / var(--ratio));
    --s0: calc(1.05rem + 0.333vw);
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    --s5: calc(var(--s4) * var(--ratio));
    --s6: calc(var(--s5) * var(--ratio));
    font-size: 62.5%;
    line-height: 1.6;
    box-sizing: border-box;
    }



    ul li {
    /* Remove li Bullets with zero-width space for accessability */
    list-style-type: none;
    }
    ul li:before {
    content: "\200B";
    /* add zero-width space */
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    position: absolute;
    }


    .c-section__title {
    padding: var(--s2) var(--s3) calc(var(--s6) * 1.8);
    margin: 0 calc(var(--s3) * -1);
    color: #fff;
    font-size: var(--s4);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-align: center;
    }


    .c-section span:after {
    content: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae accusamus eaque necessitatibus modi facilis aspernatur ut natus saepe!";
    display: block;
    font-size: 1.4rem;
    position: absolute;
    letter-spacing: 0;
    font-weight: 350;
    padding: 0 var(--s3);
    color: rgba(255, 255, 255, 0.85);
    left: 9px;
    }
    /*@media (min-width: 40.625em) {
    .c-section span:after {
        font-size: 23%;
    }
    }
    @media (min-width: 40.625em) {
    .c-section span:after {
        width: 47ch;
    }
    }
    @media (min-width: 48em) {
    .c-section span:after {
        width: 57ch;
    }
    }
    @media (min-width: 62em) {
    .c-section span:after {
        width: 67ch;
    }
    }*/

    .c-services {
    display: flex;
    gap: 4rem;
    margin: 4rem 0;
            margin-bottom: 8rem;

    }
    img.contact-main-banner {
        max-width: 100%;
}

    .c-services__item {
    background: #fff;
    padding: calc(var(--s2) - 0.6rem) var(--s1);
    border-radius: 25px;
    box-shadow: 0 7px 20px rgba(100, 28, 2, 0.135);
    -webkit-transition: all 300ms ease, -webkit-transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 300ms ease, -webkit-transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 300ms ease, transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 300ms ease, transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
    }
  /*  @media (min-width: 40.625em) {
    .c-services__item {
        -webkit-transform: translateY(-85px);
                transform: translateY(-85px);
    }
    }
    @media (min-width: 48em) {
    .c-services__item {
        -webkit-transform: translateY(-130px);
                transform: translateY(-130px);
    }
    }*/



    .c-services__item h3 {
    color: #000;
    font-size: var(--s1);
    letter-spacing: -.04em;
    line-height: 1.2;
    }
    .c-services__item:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    border-radius: 25px 0;
    cursor: pointer;
    -webkit-transition: inherit;
    transition: inherit;
    background-color: hsl(21.77deg 100% 46.47%);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjZmZmZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48dGl0bGU+NTI8L3RpdGxlPjxwYXRoIGQ9Ik04MS4zMDMyOSwzOC41MjkzOUExNC4wMTgsMTQuMDE4LDAsMSwwLDYxLjQ3NywxOC43MDY3MUw0Ny4wMDMxNSwzMy4xNzkxNGExNC4wMzAzNywxNC4wMzAzNywwLDAsMCwwLDE5LjgyMTcxLDQuODAxMTMsNC44MDExMywwLDAsMS02Ljc4OTc5LDYuNzg5ODcsMjMuNjQzMjcsMjMuNjQzMjcsMCwwLDEsMC0zMy40MDE0NUw1NC42ODcyMSwxMS45MTY4NEEyMy42MjAzLDIzLjYyMDMsMCwwLDEsODguMDkzMDgsNDUuMzE5MjdMODAuOTIzOCw1Mi40ODcxMWE0LjgwMTE0LDQuODAxMTQsMCwwLDEtNi43ODk4LTYuNzg5ODdaTTExLjkwNzQxLDg4LjA5MzlhMjMuNjUwNTMsMjMuNjUwNTMsMCwwLDAsMzMuNDA1ODYtLjAwMUw1OS43ODY2NCw3My42MjE0N2EyMy42MTU4MywyMy42MTU4MywwLDAsMCwwLTMzLjQwMTQ1LDQuODAxMTQsNC44MDExNCwwLDAsMC02Ljc4OTc5LDYuNzg5ODgsMTQuMDE1MzEsMTQuMDE1MzEsMCwwLDEsMCwxOS44MjI2OEwzOC41MjM0OCw4MS4zMDRBMTQuMDE4LDE0LjAxOCwwLDEsMSwxOC42OTcyLDYxLjQ4MTM1TDI1Ljg2Niw1NC4zMTM1YTQuODAxMTQsNC44MDExNCwwLDAsMC02Ljc4OTgtNi43ODk4N2wtNy4xNjg3OSw3LjE2Nzg1QTIzLjY0NDg5LDIzLjY0NDg5LDAsMCwwLDExLjkwNzQxLDg4LjA5MzlaIj48L3BhdGg+PC9zdmc+");
    }
    .c-services__item p {
    margin-top: var(--s-1);
    font-weight: 400;
    color: hsla(var(--color-brand-primary-h), var(--color-brand-primary-s), var(--color-brand-primary-l), 0.65);
    }
   .c-services__item:hover {
        background-image: linear-gradient(160deg, #ff3d00 0%, #ff5d00cf 77%);
    }
    @media (min-width: 40.625em) {
    .c-services__item:hover {
        -webkit-transform: translateY(-93px);
                transform: translateY(-93px);
    }
    }
    @media (min-width: 48em) {
    .c-services__item:hover {
        -webkit-transform: translateY(-138px);
                transform: translateY(-4px);
    }
    }
    .c-services__item:hover h3 {
    color: #fff;
    }
    .c-services__item:hover p {
    color: rgba(255, 255, 255, 0.8);
    }
    .c-services__item:hover:after {
    background-color: #fff;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjZmI2ZjNjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48dGl0bGU+NTI8L3RpdGxlPjxwYXRoIGQ9Ik04MS4zMDMyOSwzOC41MjkzOUExNC4wMTgsMTQuMDE4LDAsMSwwLDYxLjQ3NywxOC43MDY3MUw0Ny4wMDMxNSwzMy4xNzkxNGExNC4wMzAzNywxNC4wMzAzNywwLDAsMCwwLDE5LjgyMTcxLDQuODAxMTMsNC44MDExMywwLDAsMS02Ljc4OTc5LDYuNzg5ODcsMjMuNjQzMjcsMjMuNjQzMjcsMCwwLDEsMC0zMy40MDE0NUw1NC42ODcyMSwxMS45MTY4NEEyMy42MjAzLDIzLjYyMDMsMCwwLDEsODguMDkzMDgsNDUuMzE5MjdMODAuOTIzOCw1Mi40ODcxMWE0LjgwMTE0LDQuODAxMTQsMCwwLDEtNi43ODk4LTYuNzg5ODdaTTExLjkwNzQxLDg4LjA5MzlhMjMuNjUwNTMsMjMuNjUwNTMsMCwwLDAsMzMuNDA1ODYtLjAwMUw1OS43ODY2NCw3My42MjE0N2EyMy42MTU4MywyMy42MTU4MywwLDAsMCwwLTMzLjQwMTQ1LDQuODAxMTQsNC44MDExNCwwLDAsMC02Ljc4OTc5LDYuNzg5ODgsMTQuMDE1MzEsMTQuMDE1MzEsMCwwLDEsMCwxOS44MjI2OEwzOC41MjM0OCw4MS4zMDRBMTQuMDE4LDE0LjAxOCwwLDEsMSwxOC42OTcyLDYxLjQ4MTM1TDI1Ljg2Niw1NC4zMTM1YTQuODAxMTQsNC44MDExNCwwLDAsMC02Ljc4OTgtNi43ODk4N2wtNy4xNjg3OSw3LjE2Nzg1QTIzLjY0NDg5LDIzLjY0NDg5LDAsMCwwLDExLjkwNzQxLDg4LjA5MzlaIj48L3BhdGg+PC9zdmc+");
    }






/*  ====================================================================================
                                          magento dev  css ----
  ====================================================================================*/



.collapsible {
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* colps css here!------ */

.collapse {
  background-image: linear-gradient(160deg, #03228f 0%, #0b70e1 77%);
  border-bottom: 1px solid #eee;
  cursor: pointer;
  color: #fff;
  padding: 12px 40px;
  margin: 15px;
  max-height: 45px;
  overflow: hidden;
  transition: all 0.4s;
}
.collapse-section {
        margin: 4rem 0;
}

.collapse * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}
.collapse.active {
  box-shadow: 5px 4px 8px 2px #d0d0d0;
  z-index: 200;
  max-height:3000px;
  transition: all 0.2s,max-height 4.8s;
}
.collapse h2 {
  font-size: 16px;
  line-height: 20px;
  position: relative;
  color: #fff;
}
p.colp-txt {
  color: #fff;
  font-size: 14px;
  text-align: justify;
  padding: 0px 8px;
}
.slide{
  box-shadow:none !important;
  margin:0px !important;
  padding:10px !important
}
.transparent{
  background-color: rgba(255,255,255,0) !important;
  color:#fff !important;
  box-shadow:none !important;
  margin:0px !important;
  padding:10px !important
}
.collapse h2::after{
  content: "+";
  text-align: center;
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid #fff;
  border-radius: 50%;
  font-size: 14px;
  line-height: 20px;
  opacity: 0.5;
  right: 5px;
  top: 0px;
}

.collapse:hover h2::after{
  opacity:1
}

.collapse.active h2::after{
  content: "-";
}
.collapse:not(.show) {
  display: block !important;
}
p.magento-dev-content-txt {
        font-size: 15px;
        padding-right: 4rem;
        text-align: justify;
}
h2.magento-dev-txt {
        font-size: 14px;
        color: #5e5e5e;
        margin: 2rem 0;
        line-height: 1.8;
}
p.magento-dev-content-txt {
        font-size: 14px !important;
        padding-right: 4rem;
        text-align: justify;
        font-weight: 400 !important;
        line-height: 1.8;
}
img.web-devimgg {
        max-width: 100%;
        height: auto;
}
.service-txt11 {
        margin-bottom: 5rem;
}
.magento-dev-sec1 {
        padding-top: 2rem;
}
li.mgnt-dv-row-txt1 {
        font-size: 14px;
        font-weight: 400;
        padding-left: 1rem;
}
h2.mgnt-dv-ftr-txt1 {
        font-size: 15px;
        color: #5e5e5e;
        margin: 2rem 0;
}
h2.mgnt-dv-ftr-txt11 {
        font-size: 15px;
        color: #5e5e5e;
        margin: 2rem 0;
        line-height: 1.8;
}
h2.mgnt-dv-txt-hdng1 {
        font-size: 22px;
        font-weight: 500;
}
.space-null-area {
        padding: 22rem;
}


p#bottom-spc-orcl-int {
        padding-bottom: 12rem;
}




/*  ====================================================================================
                                          product-management  css ----
  ====================================================================================*/


.txt-with-image-product-mngmnt {
        background-color: #f3f3f3;
        margin: 6rem 0rem;
        padding: 4rem;
}
h2.product-mngmnt-txt {
        font-size: 24px;
        font-weight: 500;
        color: #000;
        padding-bottom: 1rem;
}
h2.product-mngmnt-txt-body-1 {
        font-size: 14px;
        text-align: justify;
        color: #767676;
        font-weight: 400;
        line-height: 1.8;
}
img.img-prdct-mngmnt1 {
        padding-top: 3rem;
        max-width: 70%;
                float: inline-end;
}
.prdct-mngmnt-body-txt-block {
        margin: 4rem 0;
}
h2.body-txt-hdng-txt {
        font-size: 18px;
        font-weight: 600;
        text-align: justify;
}
p.amazon-txt-1.mt-3 {
        font-size: 15px;
        color: #5f5f5f;
        text-align: justify;
        line-height: 1.6;
        padding: 4px 0 20px 0;
}
li.footer-list1 {
        font-size: 13px;
        text-align: justify;
        padding: 8px 2rem;
        color: #4a4a4a;
}





/*  ====================================================================================
                                          graphics designing page css ----
  ====================================================================================*/

h2.graphics-d-1 {
        font-size: 14px;
        padding-top: 5rem;
        text-align: justify;
        line-height: 1.5;
}
h2.gd-heading {
        font-size: 15px;
        font-weight: 600;
        padding-bottom: 0;
        padding-top: 3rem;
}
li.gd-lst11 {
        font-size: 14px;
        padding: 5px 0px;
}
.web-dev1-sec {
        padding: 3rem 0px;
        display: flex;
        align-items: center;
}
p.gd-txt-hdng {
        font-size: 18px;
        padding-bottom: 1rem;
}
p.gd-txt1 {
        font-size: 14px;
        line-height: 2;
}
h2.gd-heading1 {
        font-size: 19px;
        font-weight: 600;
        padding-bottom: 25px;
        padding-top: 0rem;
}
.web-devv11 {
        padding: 2rem !important;
}


/*  ====================================================================================
                                          training page css ----
  ====================================================================================*/


  .txt-with-image-training {
        background-color: #e8e8e8;
        padding: 8rem 5rem;
}
h2.training-txt {
        font-size: 20px;
        font-weight: 600;
        padding-bottom: 2rem;
}
h2.training-txt-1 {
        font-size: 16px;
        font-weight: 300;
        line-height: 1.8;
}
span.nmbr {
        font-size: 6rem;
        color: #ff006f;
        padding-right: 16px;
        font-weight: 600;
}
h2.nmbr-txt-1 {
        font-size: 20px;
        font-weight: 500;
        text-align: justify;
        padding-bottom: 2rem;
}
li.srvc-txt-1 {
        font-size: 14px;
}

/*------------------------- digital media training --*/

.digi-cntr-txt {
        margin: 5rem 0;
}
.frst-sec {
        padding-bottom: 3rem;
}





/*  ====================================================================================
                                          e-commerce-page css ----
  ====================================================================================*/


  h2.ecom-dev-top-txt1 {
        font-size: 15px;
        color: #5e5e5e;
        margin: 2rem 0;
        line-height: 1.8;
}
img.e-com-mini-img11 {
        max-width: 100%;
        height: auto;
        filter: drop-shadow(0px 1px 8px #8c8c8c);
}
p.ecom-txt11 {
        font-size: 15px;
        padding-right: 4rem;
        text-align: justify;
        line-height: 1.8;
        padding-left: 2rem;
        padding-bottom: 2rem;
}
h2.ecom-dev-hdng1 {
        font-size: 18px;
        margin: 2rem 0;
}
li.ecom1 {
        font-size: 16px;
}
.ecom-dev-footer1 {
        margin-bottom: 5rem;
}





/*  ====================================================================================
                                          amazone-page css ----
  ====================================================================================*/


  .txt-with-image-amazon {
        background-color: #f3f3f3;
        margin: 4rem 0;
        padding: 4rem;
}
h2.amazon-txt-1 {
        font-size: 14px;
        text-align: justify;
        color: #000 !important;
        font-weight: 400;
        line-height: 1.8;
}
h2.amazon-txt {
        font-size: 24px;
        font-weight: 500;
        color: #000 !important;
        padding-bottom: 2rem;
}
img.trng-hdr-img {
        padding-top: 3rem;
        max-width: 70%;
        float: inline-end;
}
p.amazon-txt-1 {
        font-size: 14px;
        color: #5f5f5f;
        text-align: justify;
        line-height: 2;
        padding-bottom: 1rem;
}
h2.amazon-hdng-txt {
        font-size: 18px;
        font-weight: 600;
        text-align: justify;
}
p.amazon-txt-1 {
        font-size: 14px !important;
                color: #5f5f5f !important;
        text-align: justify !important;
        line-height: 1.6 !important;
        padding: 4px 0 20px 0 !important;
        }

li.amazon-li.mt-3 {
        font-size: 14px;
        text-align: justify;
        color: #767676;
        font-weight: 400;
        line-height: 1.8;
}
.li-txt {
        padding-bottom: 2rem;
}


/*  ====================================================================================
                                         shopify development-page css ----
  ====================================================================================*/


  h2.shopify-dev1-txt {
        font-size: 15px;
        color: #5e5e5e;
        margin: 2rem 0;
        line-height: 1.8;
}
.nmbr-txt-section {
        margin: 4rem 0;
}
span.nmbr {
                font-size: 4.3rem;
        color: #ff006f;
        padding-right: 15px;
        font-weight: 600;
}
h2.nmbr-txt-1 {
        font-size: 18px;
        font-weight: 500;
        text-align: justify;
}
h2.shopify-dev1-nmbr-txt {
        font-size: 15px;
        color: #5e5e5e;
        margin: 2rem 0;
        line-height: 1.5;
}


/*  ====================================================================================
                                         web development-page css ----
  ====================================================================================*/




  h2.Web-dvlmnt-txt1 {
        font-size: 15px;
        color: #5e5e5e;
        margin: 2rem 0;
        line-height: 1.7;
}
p.Web-dvlmnt-txt-body1 {
        font-size: 15px;
        padding-right: 4rem;
        text-align: justify;
        font-weight: 300;
        line-height: 1.8;
}
p.Web-dvlmnt-txt-body1 {
        font-size: 15px !important;
        padding-right: 4rem;
        text-align: justify;
        line-height: 1.8;
}

.web-dev-box11 {
        padding-bottom: 12rem;
}




/*web-application-development extra css*/
.wb-app-btm {
        padding-bottom: 5rem;
}


/*mobile app-development extra css*/
.wb-app-btm1 {
        padding-bottom: 8rem;
}
p.mobile-app-heading-txt {
        font-size: 19px;
        font-weight: 500;
}

/*Digital marketing extra css*/
h2.digital-mrktng-txt-body1 {
        font-size: 15px;
        color: #5e5e5e;
        margin: 2rem 0;
        line-height: 1.7;
}

/*laravel-development-extra css*/
.ld-ftr-features {
        margin-bottom: 5rem;
        margin-top: 5rem;
}
div#ld-ftr-features {
          margin-bottom: 5rem;
        margin-top: 5rem;
}


 /*cdntr-development-extra css*/

div#cdntr1 {
        margin-top: 7rem;
}

/*php-development-extra css*/
.php-dev1 {
        margin-top: 7rem;
}

img.service-show-img {
        max-width: 100%;
        margin: 3rem 0 10rem 0;
}
h2.Web-development-btm-ftr-txt {
        font-size: 22px;
        font-weight: 600;
}




  /*  ====================================================================================
                                         career-page css ----
  ====================================================================================*/


.dropbtn {
    color: black;
    padding: 11px 30px;
    font-size: 14px;
    border: 1px solid #D0CFCE;
    border-radius: 2px;
    font-weight: 500;
    background-color: #fff !important;
}

  .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 138px;
    box-shadow: 0px 3px 4px 0px rgb(52 52 52 / 20%);
    z-index: 1;
    margin: 0px 24px;
    text-align: left;
        padding: 10px 0 10px 5px;
  }


.dropdown-content a {
        color: #4e4e4e;
        padding: 12px 10px;
        text-decoration: none;
        display: block;
        font-size: 13px;
}
a#btn-clr {
  color: #018e7e;
}


  .dropdown:hover .dropdown-content {display: block;}


  .careerpg-drpdwn-sec {
        margin-top: 10rem 1.5rem 1rem 1.5rem;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly !important;
        align-items: center;
}

.search-container {
    /* width: 150px;
    display: block;
    margin-right: 6rem; */
}

  input#search-bar{
    padding: 20px 50px 20px 12px;
    font-size: 14px;
    border: 1px solid #D0CFCE;
    outline: none;
    color: #000;
    &:focus{
      border: 1px solid #008ABF;
      transition: 0.35s ease;
      color: #008ABF;
      &::-webkit-input-placeholder{
        transition: opacity 0.45s ease;
          opacity: 0;
       }
      &::-moz-placeholder {
        transition: opacity 0.45s ease;
          opacity: 0;
       }
      &:-ms-placeholder {
       transition: opacity 0.45s ease;
         opacity: 0;
       }
     }
   }

  .search-icon{

    width: 60px;
    height: 60px;
  }
  a.icn-link {
    margin-left: -70px;
}
  .careerpg-drpdwn-sec {
    margin-top: 10rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.job-sec {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 1rem 10rem  14rem 10rem;
}

.col-md-6.job-link {
    display: flex;
    flex-direction: column;
    padding: 5rem 3rem;
    border: 1px solid #b8b8b8;
    margin: 3rem 1rem;
    border-radius: 3px;
}
a.job1 {
  font-size: 18px;
  text-decoration: none;
  color: #3f3f3f;
  font-weight: 300;
  line-height: 2.3rem;
  text-align: justify;
  padding: 1rem 0 1rem 2rem;
}
.map_inner h4, .map_inner p {
        color: #000;
        text-align: center;
        font-size: 22px;
}





  /*  ====================================================================================
                                         portfolio css ----
  ====================================================================================*/

h1 .page-title {
        padding-top: 0;
        font-family: Georgia, serif;
}

.portfolio-container1 {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
}

.portfolio-col2 img {
  max-width: 100%;
  height: auto;
  /* border-radius: 8px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;

}

.portfolio-col2 img:hover {
  transform: scale(1.05);
  /* box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3); */
}

.page-title-wrapper p {
  font-size: 18px;  /* more balanced */
  line-height: 1.6; /* improves readability */
  font-family: Georgia, serif;
}






  /*  ====================================================================================
                                         media query css ----
  ====================================================================================*/




@media (max-width:1200px) and (min-width:767px) {

  .contact-form {
        background-color: #000;
        position: relative;
        padding: 10.3rem 5rem;
        width: 660px;
}
.form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
}
}





@media (max-width:767px) and (min-width:320px) {


  .owl-carousel .owl-item img {
        height: 100% !important;
}
.main-home-slider-img img {
        object-fit: contain !important;
        max-width: 100% !important;
}




  .careerpg-drpdwn-sec {
        margin-top: 5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
}

.form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
}
.contact-form {
        background-color: #000;
        position: relative;
        padding: 10.3rem 5rem;
        width: 91%;
}





.c-services {
        display: flex;
        gap: 4rem;
        margin: 4rem 0;
        flex-direction: column;
}

.web-dev2-sec {
        display: flex;
        flex-direction: column-reverse;
}
.space-null-area {
        padding: 3rem;
}
img.img-prdct-mngmnt1 {
        padding-top: 3rem;
        max-width: 70%;
        float: none;
}
.col-md-6.job-link {
        display: flex;
        flex-direction: column;
        padding: 5rem 2rem;
        border: 1px solid #b8b8b8;
        margin: 3rem 0rem;
        border-radius: 3px;
}
.job-sec {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 1rem 2rem 4rem 2rem;
}
.dropbtn {
        margin: 1.3rem 0;
        width: 20rem;
}
.wpb_wrappercontc2 {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
}
.wpb_wrappercontc1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
}



/*home page media qry---*/
.future-of-copy {
        padding: 3rem 0 5rem 2rem;
}
h1.heading-txt-foc {
        padding: 5px 0rem 6rem 0;
}
img.happy-customer-utub-vid {
        margin: 0 0rem;
        padding: 0px 5px;
}
.youtube-sec11 {
        padding-bottom: 5rem;
        margin-bottom: 0rem;
}
.loop-holder__text1 {
        -webkit-text-stroke: 0.5px #070707;
}
.projects-show1 {
        margin-bottom: 5rem;
}
img.img-img11 {
        max-width: 80%;
}
.testimonials .testimonial-item {
        padding: 40px 35px 30px 35px;
}
.working-process-tab-txt {
        font-size: 23px;
}
.sec-title33 .title-txt {
        font-size: 40px;
}

.testimonials .testimonial-item {
        padding: 40px 35px 20px 35px;
      }


}

@media (min-width:980px) and (max-width:1296px) {

  a#ui-id-15 {
        padding: 0px 8px;
        font-size: 10px;
}
a#ui-id-1, a#ui-id-2, a#ui-id-3, a#ui-id-4, a#ui-id-5, a#ui-id-6, a#ui-id-7, a#ui-id-8, a#ui-id-9, a#ui-id-10, a#ui-id-11, a#ui-id-12, a#ui-id-13, a#ui-id-15 {
        color: #fff;
        font-size: 10px !important;
        font-weight: 400 !important;
        margin: 0px 18px;
        padding: 0px;
}
a#ui-id-15 {
        color: #fff;
        font-size: 7px !important;
        font-weight: 400 !important;
        margin: 0px 5px;
        padding: -2px 2px !important;
}

  }

  @media (min-width:768px) and (max-width:980px) {
 a#ui-id-1, a#ui-id-2, a#ui-id-3, a#ui-id-4, a#ui-id-5, a#ui-id-6, a#ui-id-7, a#ui-id-8, a#ui-id-9, a#ui-id-10, a#ui-id-11, a#ui-id-12, a#ui-id-13, a#ui-id-15 {
        color: #fff;
        font-size: 8px !important;
        font-weight: 400 !important;
        margin: 0px 13px;
        padding: 0px;
}
a#ui-id-15 {
        color: #fff !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        background: none !important;
        box-shadow: none !important;
        padding: 0px !important;
        margin: 0px;
        margin-left: 15px;
}
.navigation.navitaion1732104928673dd2e09db9c {
        padding: 0px !important;
}
#top-menu {
        padding-right: 1px !important;
        padding-left: 2px !important;
}


  }






  a#ui-id-1, a#ui-id-2, a#ui-id-3, a#ui-id-4, a#ui-id-5, a#ui-id-6, a#ui-id-7, a#ui-id-8, a#ui-id-9, a#ui-id-10, a#ui-id-11, a#ui-id-12, a#ui-id-13, a#ui-id-15:hover {
    background-color0: none !important;
  }

  @media only screen and (max-width: 768px) {
  .header.content {
        padding-top: 10px;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
}
.nav-sections-item-content {
                box-sizing: border-box;
                float: right;
                margin-left: -100%;
                margin-top: 71px;
                width: 100%;
                padding: 25px 0;
                background-color: #ed5600;
        }
a#ui-id-1, a#ui-id-2, a#ui-id-3, a#ui-id-4, a#ui-id-5, a#ui-id-6, a#ui-id-7, a#ui-id-8, a#ui-id-9, a#ui-id-10, a#ui-id-11, a#ui-id-12, a#ui-id-13, a#ui-id-15 {
        background-color: #ed5600 !important;
}
.submenu-inner.before-ves-submenu-inner {
        width: 100%;
        padding: 0px !important;
}
a.nav-sections-item-switch {
        font-size: 14px;
        text-decoration: none;
        color: #000;
}
        form, .contact-info {
                padding: 0rem 1.6rem 1.7rem 1.6rem;
        }
}



.space-null-area {
        display: none;
}





  /*  ====================================================================================
                                         Vertical Image Slider css ----
  ====================================================================================*/



/*  ----- verticle image slider section ---- */
.cntr-txt-imgsldr {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logoListWrapper1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  }
  .vertical-slider-sec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #000;
          margin-top: 14rem;
  }
  h2.img-sldr-heading {
  text-align: center;
        font-size: 50px;
        color: #fff;
        font-weight: 700;
        padding: 1rem 0;
margin-bottom: 2rem;
  }
  img.contrass-line {
  max-width: 25%;
  filter: opacity(0.1);
  display: none;
  }
  p.content-txt-img-sldr {
  text-align: center;
  font-size: 24px;
  color: #fff;
  padding: 1rem 45px;
  font-weight: 400;
  }
  .text-area-center-img-sldr {
  width: 60rem;
  }

  .logoListWrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  }

  .logoList {
  position: relative;
  display: inline-block;
  margin: 0 90px 0 25px;
  width: 160px;
  height: 650px;
  padding-left: 0;
  }
  .logoList.-second .logoItem:first-of-type {
  animation: smoothscroll 15s linear infinite reverse;
  }

  .logoItem {
  padding: 18px 0;
  list-style: none;
  }
  .logoItem:first-of-type {
  animation: smoothscroll 15s linear infinite;
  }
  .logoItem img {
  width: 200px;
  height: 160px;
  overflow: hidden;
  background: #fff;
  object-fit: cover;
  box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.08);
  border-radius: 25px;
  }
  ul#first1 {
  position: relative;
  display: inline-block;
  margin: 0 30px 0 20px;
  width: 160px;
  height: 650px;
  padding-left: 0;
}
p#moving-body-txt {
        font-size: 15px;
        font-weight: 300;
        color: #ffffff;
}

  @keyframes smoothscroll {
  0% {
    margin-top: 0px;
  }
  100% {
    margin-top: -765px;
  }
  }
/*  ----- verticle image slider section end ---- */


/* ------arrow text block section---- */




@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }
  }
  @keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }
  }
  .slider {
  margin: auto;
  overflow: hidden;
  position: relative;
  }
  .slider::before,
  .slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
  }
  .slider::after {
  right: 0;
  top: 0px;
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
  }
  .slider::before {
  left: 0;
  top: 0px;
  }
  .slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
  animation: scroll 15s linear infinite;
  display: flex;
  width: calc(500px * 16);
  padding: 5rem 0;
  }

img.arrow-rtt1 {
        max-width: 18%;
        margin-right: 2.5rem;
}
  .slide {
  display: flex;
  align-items: center;
  }

p.arrow-txt11 {
        font-size: 50px !important;
        font-weight: 600 !important;
        font-family: "Space Grotesk";
        margin-top: 0px !important;
        margin-bottom: 0px !important;
}
.slide1 {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        margin: 0 2rem;
        width: 650px;
}

  /* ------arrow text block section---- */



 /*  ----- number text-section ---- */

  .nmbr-line-txt-sec {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}
p.number {
  border: 1px solid #b0b0b0;
  border-radius: 10px;
  padding: 3px 10px;
  font-size: 14px;
  font-weight: 500;
}
h4.main-title1 {
  text-align: justify;
  font-size: 25px;
  font-weight: 600;
  font-family: "Space Grotesk";
  color: #141414;
  margin-bottom: 15px;
  margin-top: 0;
  padding-top: 0;
}
p.the-process-ttl1 {
  text-align: justify;
  font-size: 14px;
  font-weight: 600;
  font-family: "Space Grotesk";
  color: #5b5b5b;
  margin-top: 0;
  padding-right: 15rem;
}
.txt-area-nmbr-block {
  padding-left: 3rem;
  margin-bottom: 3rem;
}
h2.main-title {
  text-align: justify;
  font-size: 3rem;
  font-weight: 600;
  font-family: "Space Grotesk";
  color: #000000;
  margin-bottom: 15px;
}
p.the-process-ttl {
  background-color: #cdf780;
  width: 12rem;
  padding: 2px 10px;
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
}
.How-does-it-even-work-section {
        padding: 10rem 0;
        background-color: #f6fbff;
        background-image: url(https://aielegant.liquid-themes.com/wp-content/uploads/2023/04/shape-2.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-position-x: 58rem;
        background-position-y: 8rem;
        margin-bottom: 8rem;
}

.listt1 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
}

.form-typ-txt {
  display: flex;
  align-items: center;
  padding: 2rem 0;
}
.vl {
  border-left: 1px solid rgb(0, 0, 0);
  height: 50px;
  }

  p#frm-typ-txt1 {
  border: 1px solid #595959;
  border-radius: 8px;
}
p#frm-typ-txt3 {
  border: 1px solid #595959;
  border-radius: 8px;
}
p#frm-typ-txt5 {
  border: 1px solid #595959;
  border-radius: 8px;
}
p#frm-typ-txt7 {
  border: 1px solid #595959;
  border-radius: 8px;
}
p#frm-typ-txt9 {
  border: 1px solid #595959;
  border-radius: 8px;
}
a.price-section-btn {
  text-decoration: none;
  color: #000000;
  background-color: #cdf780;
  padding: 12px 28px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  font-family: monospace;
}
p#ftr-txt-of-price-dtls-area {
  margin-top: 1.2rem;
}
p.form-txt {
  text-align: justify;
  font-size: 14px;
  font-weight: 500;
  font-family: "Space Grotesk";
  color: #141414;
  padding: 12px 60px;
  margin-bottom: 0;
}
p#frm-typ-txt2 {
  color: #f6fbff;
}
p#frm-typ-txt4 {
  color: #f6fbff;
}
p#frm-typ-txt6 {
  color: #f6fbff;
}
p#frm-typ-txt8 {
  color: #f6fbff;
}
p#frm-typ-txt10 {
  color: #f6fbff;
}

/* line css */
.outer {
  width: 1px;
  height: 70%;
  margin: auto;
  position: relative;
  overflow: hidden;
  }
  .inner {
  position: absolute;
  width:100%;
  height: 40%;
  background: grey;
  top: 30%;
  box-shadow: 0px 0px 30px 20px grey;
  }
  /*  ----- number text-section end ---- */




/*  ----- service-section ---- */

.service-work {
        background-color: #000000;
        padding: 2rem;
        border-radius: 25px;
        margin: 0 15px;
}

.srvc-icn-sec {
        margin-bottom: 5px;
}
img.service-icon-img {
        max-width: 12%;
        padding-bottom: 20px;
}
h2.black-heading1 {
        color: #fff;
        font-size: 16px;
}
p.srvc-body-txt {
        font-weight: 500;
        margin: 25px 0 20px 0;
        color: #5c5c5c;
        font-size: 14px;
        font-family: "Space Grotesk";
        line-height: 20px;
        padding: 0 15px 0 0;
        line-height: 1.5;
}
.btn-area-ftr- {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #272727cf;
        padding: 1.5rem 2rem 0 0;
}
a.lrn-mr-srvc-btn {
        text-decoration: none;
        color: #cecece;
        font-size: 15px;
        font-weight: 500;
}
a.lrn-mr-srvc-btn {
        text-decoration: none;
        color: #cecece;
        font-size: 15px;
        font-weight: 500;
}
.first-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
}
.service {
        text-align: start;
        padding: 50px 35px 0px 35px;
        border-radius: 5px;
        font-size: 14px;
        cursor: pointer;
        background: transparent;
        transition: transform 0.5s, background 0.5s;
}




.service-section-block {
        background-color: #17191a;
        margin: 5rem 0 6rem 0;
        padding: 0 5rem;
}
div#service-four-sec {
        padding: 4rem 1px;
        display: flex;
        flex-direction: column;
        align-items: center;
}
p.testimonial-txt {
        font-weight: 600;
        margin-bottom: 25px;
        color: #ffffff;
        font-size: 10px;
        font-family: "Space Grotesk";
        background-color: #9887c0;
        text-align: center;
        padding: 5px 20px;
        border-radius: 5px;
}
h1.multiple-tb-sec-heading1 {
        text-align: center;
        font-weight: 600;
        margin-bottom: 20px;
        color: #ffffff;
        font-size: 50px;
        font-family: monospace;
}
p.multiple-tb-sec-p1 {
        text-align: center;
        font-weight: 200;
        margin-bottom: 20px;
        color: #ffffff;
        font-size: 16px;
        font-family: monospace;
        padding-bottom: 2rem;
}

  /*  ----- service-section end ---- */



/*  ----- wordpress-section ---- */


.txt-wth-img-111 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 0 2rem !important;
}
.foc-block {
        box-shadow: -3px 5px 15px #8c8c8c2e;
        padding: 1.5rem 2.5rem;
        margin-right: 50px;
        border-radius: 25px;
        width: 600px;
        height: 490px;
}
p.moni-txt-foc {
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        font-family: "Space Grotesk";
        color: #fff;
        background-color: #ed5600;
        width: 220px;
        padding: 12px 20px;
        margin-top: 1rem;
        border-radius: 25px;
        box-shadow: 0px 2px 3px #00000020;
}
h1.heading-txt-foc {
        text-align: left;
        font-size: 20px;
        line-height: 1.5;
        font-weight: 600;
        font-family: "Space Grotesk";
        color: #000000;
        padding: 2.7rem 3rem 8px 0;
}
p.ai-documents-body-txt {
        font-size: 14px;
        line-height: 1.6;
}
.foc-img {
        background-color: #000000;
        padding: 1.5rem 1.5rem 4rem 1.5rem;
        border-radius: 14px;
        width: 500px;
        height: 490px;
}
img.foc-main-img {
        max-width: 100%;
        border-radius: 14px;
        height: 420px;
        object-fit: cover;
}
p.img-btm-txt1 {
        text-align: center;
        padding: 10px 0;
        font-size: 14px;
        color: #fff;
}
.text-area-foc {
        display: flex;
        justify-content: flex-end;
}

.text-area-foc1 {
        display: flex;
        justify-content: flex-start;
}
.foc-block1 {
        box-shadow: -3px 5px 15px #8c8c8c2e;
        padding: 1.5rem 2.5rem;
        margin-left: -25px;
        border-radius: 25px;
        width: 600px;
        height: 490px;
}
div#ai-tab1 {
        margin: 8rem 0;
}
div#multiple-first-tab1 {
        margin-bottom: 10rem;
}
/*  ----- wordpress-section end ---- */



img.service-show-img {
        max-width: 100%;
        margin-top: 3rem;
}














  /*  ====================================================================================
                                         projects slider css ----
  ====================================================================================*/

.slick-dots {
  text-align: center;
  margin: 0 0 10px 0;
  padding: 0;
}
.slick-dots li {
  display: inline-block;
  margin-left: 4px;
  margin-right: 4px;
}
.slick-dots li.slick-active button {
  background-color: black;
}
.slick-dots li button {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  background-color: #999;
  border: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.slick-dots li :hover {
  background-color: black;
}

/* Custom Arrow */
.prev {
  color: #999;
  position: absolute;
  top: 38%;
  left: -2em;
  font-size: 1.5em;
}
.prev :hover {
  cursor: pointer;
  color: black;
}

.next {
  color: #999;
  position: absolute;
  top: 38%;
  right: -2em;
  font-size: 1.5em;
}
.next :hover {
  cursor: pointer;
  color: black;
}

@media screen and (max-width: 800px) {
  .next {
    display: none !important;
  }
}








.Web-development-top-txt {
        margin-top: 4rem;
}


/* shahzad khan css Start */

/* .post-post_content p {
  font-size: 20px;
  line-height: 1.6;
  color: #333;
  font-family: 'Segoe UI', sans-serif;
} */

.post-post_content p {
  font-size: 20px;
  line-height: 1.6;
  color: #333;
  font-family: 'Segoe UI', sans-serif;
  margin-bottom: 1em; /* adds spacing between paragraphs */
}



.menu-categories .category-item .list-categories {
  text-decoration: none;
  font-size: 18px;
}

.menu-categories .category-item .list-categories:hover {

  text-decoration: underline;
}


.menu-categories .category-item .list-categories i.fa {
  color: #888;
  font-size: 16px;
}


.mp-post-info span a.mp-info {
  text-decoration: none;
  font-weight: 500;
}

.mp-post-info span a.mp-info:hover {
  text-decoration: underline;
}

.mp-post-info span {
  font-size: 18px;
}


.col-xs-12 .menu-archives .archive-item .list-archives {
  color: #333;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.col-xs-12 .menu-archives .archive-item .list-archives:hover {
  color: #007BFF;
  text-decoration: underline;
}


.row .col-xs-12 .tags-list {
  font-size: 20px !important;
  background-color: #ed5600 !important;
  color: #333;
  padding: 4px 8px;
  margin: 2px 4px 4px 0;
  display: inline-block;
  border-radius: 6px !important;
  text-decoration: none;
  transition: background-color 0.2s ease;

}

.row .col-xs-12 .tags-list:hover {
  background-color: #ed5600 !important;
  color: #ed5600 !important;
}

.mpcss #sharing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.block-blog-related.about-admin h2 {
  font-size: 24px;
  color: #222;
  margin-bottom: 16px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 6px;
}


/* Start Project New Css Start Code  */

/* === Form Section Background === */
[data-pb-style="SHEV74R"] {
  background-image: url('https://www.webariansoftwares.com/media/backgrounds/form-bg.jpg'); /* Replace with your image URL */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 60px 20px;
}

/* === Form Container === */
.amform-form {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
}

/* === Fieldsets & Fields === */
.amform-form-fieldset {
  margin-bottom: 30px;
}

.amform-form .field {
  margin-bottom: 20px;
}

/* === Labels === */
.amform-form .label {
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  font-size: 16px;
  color: #333;
}

/* === Inputs, Textareas, Selects === */
.amform-form input[type="text"],
.amform-form input[type="number"],
.amform-form input[type="file"],
.amform-form textarea,
.amform-form select {
  width: 100%;

  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  background-color: #f9f9f9;
  transition: border-color 0.3s ease;
}

.amform-form input:focus,
.amform-form textarea:focus,
.amform-form select:focus {
  border-color: #007BFF;
  outline: none;
  background-color: #fff;
}

/* === Required Asterisk === */
.amform-form .required {
  color: #d9534f;
  font-weight: bold;
}

/* === GDPR Checkbox === */
.amform-form .amcform-gdpr {
  margin-top: 20px;
  font-size: 14px;
  color: #444;
}

/* === Submit Button === */
.amform-form .amcform-submit {
  background-color: #ed5600 !important;
  color: #ffffff;
  padding: 12px 30px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%;
  max-width: 220px;
  margin-top: 10px;
}

.amform-form .amcform-submit:hover {
  background-color: #0056b3;
}

@media (max-width: 768px) {
  input#phone_number,
  input#full_name,
  input#email_text,
  input#time,
  textarea#message,
  select#request {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Sandeep PAL css Code  */

/* css for form background */

.customform-bg {
    background-image: url('../assets/img/bg.avif'); /* Correct relative path */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 40px;
    border-radius: 10px;
}
.customform-heading {
    text-align: center;
    font-size: 36px;
    color: #333;
    margin-bottom: 30px;
    font-weight: 700;
    text-transform: uppercase;
}

.page-title-blog {
    color: #ED5600; /* Blue color */
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

/* css for blog page */

.post-list-content .post-view-image img {

    width: 100%;
    height: auto;
    display: block;

}
.author-content-image img {
    width: 100%;
    max-width: 135px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto; /* optional: center the image */
}