/*-----------# General-------------------*/
body { font-family: 'Calibri', serif; color: #4d4643;padding:0;margin:0; }
a { color: #ff4500;}
a:hover {color: #ff4500; text-decoration: none; }
h1, h2, h3, h4, h5, h6 {font-family: 'Philosopher', sans-serif; }

/*-----------------# Back to top button--------------------*/
.back-to-top { position: fixed;  display: none; width: 40px; height: 40px; border-radius: 3px; right: 15px; bottom: 15px; background: blue; color: #fff; transition: display 0.5s ease-in-out; z-index: 99999; }
.back-to-top i { font-size: 24px; position: absolute; top: 8px; left: 8px; }
.back-to-top:hover { color: #fff; background: #ff4500; transition: 0.3s ease-in-out; }

/*-----------------# Disable AOS delay on mobile--------------------------*/
@media screen and (max-width: 768px) { [data-aos-delay] { transition-delay: 0 !important; }}

/*---------------# Header-----------------------*/
#header { background: #fff; transition: all 0.5s; z-index: 997; padding: 5px 0; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);}
#header .logo {font-size: 28px; margin: 0; padding: 0; line-height: 1; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;}
#header .logo a {color: #111;}
#header .logo img { max-height: 60px;}
@media (max-width:600px){#header .logo img { max-height: 40px;} }

/*# Navigation Menu---------------------*/
/* Desktop Navigation */
.nav-menu ul {margin: 0; padding: 0; list-style: none;}
.nav-menu > ul { display: flex;}
.nav-menu > ul > li { position: relative;  white-space: nowrap;  padding: 10px 0 10px 28px;}
.nav-menu a {  display: block;  position: relative;  color: #111;  transition: 0.3s;  padding: 5px 0px;  font-size: 15px;  text-transform: uppercase;  font-weight: 600;  font-family: 'Calibri', sans-serif;  border-top: #fff solid 2px;}
.nav-menu li:hover > a { color: #ff4500; border-top: #ff4500 solid 2px; }
.nav-menu .drop-down ul { display: block; position: absolute; left: 15px; top: calc(100% + 30px); z-index: 99; opacity: 0; visibility: hidden; padding: 10px 0; background: #fff; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);  transition: 0.3s; }
.nav-menu .drop-down:hover > ul { opacity: 1; top: 100%; visibility: visible;}
.nav-menu .drop-down li { min-width: 180px; position: relative;}
.nav-menu .drop-down ul a { padding: 10px 20px; font-size: 15px; font-weight: 700; text-transform: none; color: #111;}
.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a { color: #ff4500;}
.nav-menu .drop-down > a:after { content: "\ea99"; font-family: IcoFont; padding-left: 5px;}
.nav-menu .drop-down .drop-down ul { top: 0; left: calc(100% - 30px);}
.nav-menu .drop-down .drop-down:hover > ul { opacity: 1; top: 0; left: 100%;}
.nav-menu .drop-down .drop-down > a { padding-right: 35px;}
.nav-menu .drop-down .drop-down > a:after { content: "\eaa0"; font-family: IcoFont; position: absolute; right: 15px;}
@media (max-width: 1366px) { .nav-menu .drop-down .drop-down ul {  left: -90%; }
 .nav-menu .drop-down .drop-down:hover > ul { left: -100%;}
  .nav-menu .drop-down .drop-down > a:after { content: "\ea9d"; }}
/* Mobile Navigation */
.mobile-nav-toggle {position: fixed; right: 15px; top: 15px; z-index: 9998; border: 0; background: none; font-size: 24px; transition: all 0.4s; outline: none !important; line-height: 1; cursor: pointer; text-align: right;}
.mobile-nav-toggle i { color: #ff4500;}
.mobile-nav { position: fixed; top: 55px; right: 15px; bottom: 15px; left: 15px; z-index: 9999; overflow-y: auto; background: #fff; transition: ease-in-out 0.2s; opacity: 0; visibility: hidden; border-radius: 10px; padding: 10px 0;}
.mobile-nav * { margin: 0; padding: 0; list-style: none;}
.mobile-nav a { display: block; position: relative; color: #111; padding: 10px 20px; font-weight: 500; outline: none;}
.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a { color: #ff4500; text-decoration: none;}
.mobile-nav .drop-down > a:after { content: "\ea99"; font-family: IcoFont; padding-left: 10px; position: absolute; right: 15px;}
.mobile-nav .active.drop-down > a:after { content: "\eaa1";}
.mobile-nav .drop-down > a {padding-right: 35px;}
.mobile-nav .drop-down ul { display: none; overflow: hidden;}
.mobile-nav .drop-down li { padding-left: 20px;}
.mobile-nav-overly { width: 100%; height: 100%; z-index: 9997; top: 0; left: 0; position: fixed; background: rgba(0, 0, 0, 0.6); overflow: hidden; display: none; transition: ease-in-out 0.2s;}
.mobile-nav-active { overflow: hidden;}
.mobile-nav-active .mobile-nav { opacity: 1; visibility: visible;}
.mobile-nav-active .mobile-nav-toggle i { color: #fff;}

/*# Header Social Links*/
.header-social-links {padding-left: 14px;  margin-left: 20px;  border-left: 1px solid #c4c4c4;}
.header-social-links a {  color: #a0a0a0;  padding-left: 6px;  display: inline-block;  line-height: 1px;  transition: 0.3s;}
.s2{ padding-left: 8%;  padding-right: 8%;}
.header-social-links a:hover { color: #ff4500;}
@media (max-width: 768px) { .header-social-links {  padding: 0 28px 0 0; border-left: 0; }}

/*# Hero Section*/
#hero { width: 100%; height: 100vh; background: rgba(255, 255, 255); overflow: hidden; position: relative;}
#hero .carousel, #hero .carousel-inner, #hero .carousel-item, #hero .carousel-item::before { background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; top: 0; right: 0; left: 0; bottom: 0;}
#hero .carousel-container { display: flex; align-items: flex-end; justify-content: center;  position: absolute; bottom: 60px; top: 70px; left: 55px; right: 55px;}
#hero .carousel-content { background: rgba(4, 4, 4, 0.7); padding: 20px;color: #fff; -webkit-animation-duration: .5s; animation-duration: .5s;  border-top: 5px solid #ff4500;}
#hero .carousel-content h2 { color: #fff; margin-bottom: 20px;font-size: 28px; font-weight: 700;}
#hero .btn-get-started {font-weight: 500;font-size: 14px;letter-spacing: 1px; display: inline-block; padding: 12px 32px; border-radius: 4px; transition: 0.5s; line-height: 1; margin: 10px; color: #fff; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; border: 2px solid #ff4500;}
#hero .btn-get-started:hover {background: #ff4500; color: #fff; text-decoration: none;}
#hero .carousel-inner .carousel-item { transition-property: opacity; background-position: center top;}
#hero .carousel-inner .carousel-item, #hero .carousel-inner .active.carousel-item-left, #hero .carousel-inner .active.carousel-item-right { opacity: 0;}
#hero .carousel-inner .active, #hero .carousel-inner .carousel-item-next.carousel-item-left, #hero .carousel-inner .carousel-item-prev.carousel-item-right { opacity: 1; transition: 0.5s;}
#hero .carousel-inner .carousel-item-next, #hero .carousel-inner .carousel-item-prev, #hero .carousel-inner .active.carousel-item-left, #hero .carousel-inner .active.carousel-item-right {left: 0; transform: translate3d(0, 0, 0);}
#hero .carousel-control-prev, #hero .carousel-control-next { width: 10%; opacity: 1;}
#hero .carousel-control-next-icon, #hero .carousel-control-prev-icon { background: none; font-size: 36px; line-height: 1; width: auto; height: auto; background: rgba(255, 255, 255, 0.2); border-radius: 50px; padding: 10px; transition: 0.3s; color: rgba(255, 255, 255, 0.5);}
#hero .carousel-control-next-icon:hover, #hero .carousel-control-prev-icon:hover { background: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.8);}
#hero .carousel-indicators li { cursor: pointer; background: #fff; overflow: hidden; border: 0; width: 12px; height: 12px; border-radius: 50px; opacity: .6; transition: 0.3s;}
#hero .carousel-indicators li.active { opacity: 1; background: #ff4500;}
@media (min-width: 1024px) { #hero .carousel-content { width: 60%; }
  #hero .carousel-control-prev, #hero .carousel-control-next {  width: 5%;}}
@media (max-width: 992px) { #hero .carousel-container { top: 58px; }
 #hero .carousel-content h2 { margin-bottom: 15px; font-size: 22px; }
  #hero .carousel-content p { font-size: 15px; }}
@media (max-height: 500px) { #hero { height: 120vh; }}

/*# Sections General--*/
section { padding: 60px 0; overflow: hidden;}
.section-bg { background-color: #f7f7f7;}
.section-title { text-align: center; padding-bottom: 30px;}
.section-header h3 { font-size: 32px; color: #111; text-transform: uppercase; text-align: center; font-weight: 700; padding-bottom: 5px;}
.section-title h2 { font-size: 32px; font-weight: bold; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 10px; }
.under-line {position: relative; text-align:center; display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #ff4500; }
.under-line:after { position: absolute; top: 5px; left: 16px; content: ''; width: 60px; border-bottom: 2px solid blue; }
.under-line:before { position: absolute; top: 5px; right: 16px; content: ''; width: 60px; border-bottom: 2px solid blue;}
.section-title p { text-align: center; margin-bottom: 0;}
@media(max-width:600px){.section-header h3{font-size:20px; font-weight:500;}}
@media(max-width:600px){.section-header h2{font-size:20px; font-weight:500;}}

/*-# Breadcrumbs*/
.breadcrumbs { padding: 15px 0;background: linear-gradient(to top,#fff, #c4c4c4, #fff); min-height: 40px; margin-top: 0px;}
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; font-weight: bold; color: #000000;}
.breadcrumbs ol a {color: #000;font-weight: bold;}
.breadcrumbs ol li + li { padding-left: 10px;}
.breadcrumbs ol li + li::before { display: inline-block; padding-right: 10px;font-weight: bold; color: #fff; content: "/";}
@media (max-width: 991px) { .breadcrumbs { margin-top: 75px;}
  .breadcrumbs .d-flex { display: block !important; }
  .breadcrumbs ol { display: block;  }
  .breadcrumbs ol li {display: inline-block; }}
  @media (max-width: 524px) { .breadcrumbs { margin-top: 130px;}
  .breadcrumbs .d-flex { display: block !important; }
  .breadcrumbs ol { display: block;  }
  .breadcrumbs ol li {display: inline-block;}}
  /*----parallax-----*/
.parallax-abt {background: url("../img/abt.jpg");margin-top: 70px; min-height: 500px; background-attachment: inherit; background-position: center; background-repeat: no-repeat; background-size: cover;}
.parallax-port {background: url("../img/port.jpg");margin-top: 70px; min-height: 500px; background-attachment: initial; background-position: center; background-repeat: no-repeat; background-size: cover;}
.parallax-price {background: url("../img/price.jpg"); margin-top: 70px; min-height: 500px; background-attachment: initial; background-position: center; background-repeat: no-repeat; background-size: cover;}
.parallax-cont {background: url("../img/contact.jpg");margin-top: 70px; min-height: 500px; background-attachment: initial; background-position: center; background-repeat: no-repeat; background-size: cover;}
.parallax-webdev {background: url("../img/webdev.png");margin-top: 70px; min-height: 500px; background-attachment: initial; background-position: center;background-repeat: no-repeat; background-size: cover;}
.parallax-softdev {background: url("../img/service/softdev.png");margin-top: 70px; min-height: 500px; background-attachment: initial; background-position: center;background-repeat: no-repeat; background-size: cover;}
.parallax-tech {background: url("../img/tech-back.png");margin-top: 70px; min-height: 500px; background-attachment: initial; background-position: center;background-repeat: no-repeat; background-size: cover;}
.parallax-androiddev {background: url("../img/service/android-dev.png");margin-top: 70px; min-height: 500px; background-attachment: initial; background-position: center;background-repeat: no-repeat; background-size: cover;}
.parallax-hardser {background: url("../img/service/hard-ser.png");margin-top: 70px; min-height: 500px; background-attachment: initial; background-position: center;background-repeat: no-repeat; background-size: cover;}
.parallax-itout {background: url("../img/service/it-out.png");margin-top: 70px; min-height: 500px; background-attachment: initial; background-position: center;background-repeat: no-repeat; background-size: cover;}
.parallax-seo {background: url("../img/service/seo-market.jpg");margin-top: 70px; min-height: 500px; background-attachment: initial; background-position: center;background-repeat: no-repeat; background-size: cover;}
.parallax-invite {background: url("../img/invite.jpg");margin-top: 70px; min-height: 500px; background-attachment: initial; background-position: center;background-repeat: no-repeat; background-size: cover;}
.parallax-ser {background: url("../img/ser.jpg");margin-top: 70px; min-height: 500px; background-attachment: initial; background-position: center;background-repeat: no-repeat; background-size: cover;}
.hero-text {padding: 15px 0;background:rgba(0, 0, 0,0.7); font-weight:bold;font-size:40px; font-family: 'Philosopher', sans-serif; padding:0px 30px; text-align: center; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); color: white;}

  /* About Us Section---*/
  #about { background: url("../img/about-bg.jpg") center top no-repeat fixed;  background-size: cover;  padding: 60px 0 40px 0;  position: relative;}
  #about::before { content: ''; position: absolute; left: 0;  right: 0;  top: 0; bottom: 0;  background: rgba(255, 255, 255, 0.92);  z-index: 9;}
  #about .container { position: relative;  z-index: 10;}
  #about .about-col {  background: #fff;  border-radius: 0 0 4px 4px;  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);  margin-bottom: 20px;}
  #about .about-col .img { position: relative;}
  #about .about-col .img img { border-radius: 4px 4px 0 0;}
  #about .about-col .icon { width: 90px;  height: 90px; text-align: center;  position: absolute;  background-color: #fff;  border-radius: 10%;  text-align: center;  border: 2px solid #ff4500;  left: calc( 50% - 45px);  bottom: -40px; transition: 0.3s;}
  .img-mission { padding-top: 5px;  transition: 0.3s;  height: 85px; }
  #about .about-col:hover .icon { background-color: #eee;}
  #about .about-col h2 { color: #000; text-align: center; font-weight: 700; font-size: 20px; padding-top: 10px; margin: 40px 0 12px 0;}
  #about .about-col h2:hover { color:blue; cursor: pointer;}
  #about .about-col p { font-size: 16px;  line-height: 24px;  color: #333;  margin-bottom: 0;  text-align: justify;  padding: 0 20px 20px 20px;}
  

/* Services*/
.services .icon-box {text-align: center; padding: 70px 20px 80px 20px; transition: all ease-in-out 0.3s; background: #fff;}
.services .icon-box .icon  {margin: 0 auto; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; transition: ease-in-out 0.3s; position: relative;}
.icon-img{padding:10px; border:2px orangered solid; height:95px; border-radius: 10px; transition: 0.5s;}
.icon-img:hover{border:2px orangered solid; border-radius: 10px; background: #ff44006c;}
.services .icon-box h4 { font-weight: 600; margin: 10px 0 15px 0; font-size: 22px;}
.services .icon-box h4 a { color: #111; transition: ease-in-out 0.3s;}
.services .icon-box p { line-height: 24px; font-size: 15px; margin-bottom: 0; text-align: justify;}
.services .icon-box:hover { border-color: #fff; box-shadow: 0px 0 35px 0 rgba(0, 0, 0, 0.08);}

/* Call To Action Section---*/
#call-to-action { background: url(../img/w-back1.jpg) fixed center center; background-color: rgba(0, 0, 0, 1); background-size: cover;  padding: 60px 0;}
#call-to-action h3 { color: #fff;  font-size: 28px;  font-weight: 700;}
#call-to-action p {  color: #fff;}
#call-to-action .cta-btn { font-family: "Montserrat", sans-serif; text-transform: uppercase; font-weight: 500; font-size: 16px; letter-spacing: 1px; display: inline-block; padding: 8px 28px; border-radius: 25px; transition: 0.5s; margin-top: 10px;  border: 2px solid #fff; color: #fff;}
#call-to-action .cta-btn:hover { background: #ff4400e1; border: 2px solid #ff4500;}

/* skills--------*/
#skills { padding: 60px 0;}
#skills .progress { height: 35px; margin-bottom: 10px;}
#skills .progress .skill {line-height: 35px;  padding: 0;  margin: 0 0 0 20px;  text-transform: uppercase;}
#skills .progress .skill .val {  float: right;  font-style: normal;  margin: 0 20px 0 0;}
#skills .progress-bar { width: 1px;  text-align: left;  transition: .9s;}

/* Facts Section
--------------------------------*/
#facts { background: url("../img/facts-bg.jpg") center top no-repeat fixed;  background-size: cover;  padding: 60px 0 0 0;  position: relative;}
#facts::before {  content: '';  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;  background: rgba(255, 255, 255, 0.88);  z-index: 9;}
#facts .container { position: relative; z-index: 10;}
#facts .counters span { font-weight: bold;  font-size: 48px;  display: block;  color: #ff4500;}
#facts .counters p { padding: 0; margin: 0 0 20px 0; font-size: 14px; color: #111;}
#facts .facts-img { text-align: center; padding-top: 30px;}

/*Laptop Open*/
.containerlap {  text-align: center;}
.mockup { display: inline-block; position: relative; z-index: 3;  text-align: center; font-size: 0;  perspective: 2400px; perspective-origin: 50% 100%;  opacity: 0;  transition: 500ms opacity;}
.mockup.loaded { opacity: 1;}
.mockup .part .top, .mockup .part .bottom { position: absolute; top: 0; left: 0;}
.mockup .part.top {  transform: translate3d(0, 0, 0) rotateX(-90deg);}
.mockup:hover .part.top { transform: translate3d(0, 0, 0) rotateX(0deg);}
.mockup .part { display: inline-block; position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform-origin: 50% 100%; transition: 900ms;}
.mockup.opened .part .top { transform: translate3d(0, 0, -11px) rotateX(90deg) scale(1, 1);}
.mockup .part .top { transform-origin: 50% 0; transform: translate3d(0, 0, -11px) rotateX(90deg); transition: 900ms;}
.mockup img { display: block; max-width: 100%; backface-visibility: hidden;}
.mockup .part .cover { position: relative;}
.mockup video { display: block; position: absolute; top: 8%; left: 4%; width: 92%; border-radius: 6px; backface-visibility: hidden; transform: translate3d(0, 0, 1px);}
.mockup .part.bottom { position: absolute; top: 0; left: 0; transform: translate3d(0, 0, 0) rotateX(-90deg);}
.mockup .part .bottom { transform-origin: 50% 0; transform: translate3d(0,0,0) rotateX(90deg);}

/* Portfolio Section
--------------------------------*/
#portfolio { padding: 60px 0;}
#portfolio #portfolio-flters { padding: 0; margin: 5px 0 35px 0; list-style: none; text-align: center;}
#portfolio #portfolio-flters li { cursor: pointer; margin: 15px 15px 15px 0; display: inline-block; padding: 10px 20px; font-size: 12px; line-height: 20px; color: #666666; 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: #ff4500; color: #fff;}
#portfolio #portfolio-flters li:last-child { margin-right: 0;}
#portfolio .portfolio-item { position: relative; height: 350px; overflow: hidden;}
#portfolio .portfolio-item figure { background: #000; overflow: hidden; height: 260px; position: relative; border-radius: 4px 4px 0 0; margin: 0;}
#portfolio .portfolio-item figure::before {	position: absolute;	top: 0;	left: -75%;	z-index: 2;	display: block;	content: '';	width: 50%;	height: 100%;	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);	-webkit-transform: skewX(-25deg);	transform: skewX(-25deg);}
#portfolio .portfolio-item figure:hover::before {	-webkit-animation: shine .75s;	animation: shine .75s;}
@-webkit-keyframes shine {	100% {		left: 125%;	}}
@keyframes shine {	100% {		left: 125%;	}}
#portfolio .portfolio-item .portfolio-info {  background: #fff; text-align: center;  padding: 30px;  height: 50px;  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:hover { color: #ed3c0d; cursor: pointer;}

/* Portfolio Details
--------------------------------*/
.portfolio-details { padding-top: 30px;}
.portfolio-details .portfolio-details-container { position: relative;}
.portfolio-details .portfolio-details-carousel { position: relative; z-index: 1;}
.portfolio-details .portfolio-details-carousel .owl-nav, .portfolio-details .portfolio-details-carousel .owl-dots { margin-top: 5px; text-align: left;}
.portfolio-details .portfolio-details-carousel .owl-dot { display: inline-block;  margin: 0 10px 0 0;  width: 12px;  height: 12px;  border-radius: 50%;  background-color: #ddd !important;}
.portfolio-details .portfolio-details-carousel .owl-dot.active { background-color: #18d26e !important;}
.portfolio-details .portfolio-info { padding: 30px;  position: absolute;  right: 0; bottom: -70px; background: #fff; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); z-index: 2;}
.portfolio-details .portfolio-info h3 { font-size: 22px; font-weight: 700;  margin-bottom: 20px;  padding-bottom: 20px;  border-bottom: 1px solid #eee;}
.portfolio-details .portfolio-info ul { list-style: none; padding: 0; font-size: 15px;}
.portfolio-details .portfolio-info ul li + li { margin-top: 10px;}
.portfolio-details .portfolio-description { padding-top: 50px;}
.portfolio-details .portfolio-description h2 { width: 50%;  font-size: 26px;  font-weight: 700;  margin-bottom: 20px;}
.portfolio-details .portfolio-description p { padding: 0 0 0 0;}
@media (max-width: 768px) { .portfolio-details .portfolio-description h2 {   width: 100%; }
  .portfolio-details .portfolio-info {  position: static;  margin-top: 30px; }}

/*Clients-*/
.clients .clients-wrap { border-top: 1px solid #ececec; border-left: 1px solid #ececec;}
.clients .client-logo {padding: 10px; display: flex; justify-content: center; align-items: center; border-right: 1px solid #ececec; border-bottom: 1px solid #ececec; overflow: hidden; background: #fff; height: 100px;}
.clients .client-logo img { transition: all 0.3s ease-in-out; height: 60px; -webkit-filter: grayscale(100%); filter: grayscale(100%);}
.clients .client-logo:hover img {-webkit-filter: none; filter: none; transform: scale(1.1);}

/* Testimonials Section*/
#testimonials { padding: 60px 0;}
#testimonials .section-header { margin-bottom: 40px;}
#testimonials .testimonial-item { text-align: center;}
#testimonials .testimonial-item .testimonial-img { width: 120px; border-radius: 50%; border: 2px solid #fff; margin: 0 auto;}
#testimonials .testimonial-item .testimonial-img:hover { border: 2px solid #ff5400;}
#testimonials .testimonial-item h3 { font-size: 20px; font-weight: bold; margin: 10px 0 5px 0; color: #111;}
#testimonials .testimonial-item h4 { font-size: 14px; color: #999; margin: 0 0 15px 0;}
#testimonials .testimonial-item .quote-sign-left { margin-top: -15px; padding-right: 10px; display: inline-block; width: 37px;}
#testimonials .testimonial-item .quote-sign-right { margin-bottom: -15px;  padding-left: 10px;  display: inline-block;  max-width: 100%;  width: 37px;}
#testimonials .testimonial-item p { font-style: italic;  margin: 0 auto 15px auto;}
@media (min-width: 992px) {  #testimonials .testimonial-item p {   width: 80%; }}
#testimonials .owl-nav, #testimonials .owl-dots { margin-top: 5px;  text-align: center;}
#testimonials .owl-dot { display: inline-block; margin: 0 5px; width: 12px; height: 12px; border-radius: 50%; background-color: #ddd;}
#testimonials .owl-dot.active { background-color: #18d26e;}

/* Frequently Asked Questions---*/
.faq .faq-list { padding: 0 100px;}
.faq .faq-list ul { padding: 0; list-style: none;}
.faq .faq-list li + li { margin-top: 15px;}
.faq .faq-list li { padding: 20px; background: #fff; border-radius: 4px; position: relative;}
.faq .faq-list a { display: block;  position: relative;  font-family: "Poppins", sans-serif;  font-size: 16px;  line-height: 24px;  font-weight: 500;  padding: 0 30px;  outline: none;}
.faq .faq-list .icon-help { font-size: 24px;  position: absolute;  right: 0;  left: 20px;  color: lightgray;}
.faq .faq-list .icon-show, .faq .faq-list .icon-close { font-size: 24px;  position: absolute;  right: 0;  top: 0;}
.faq .faq-list p {margin-bottom: 0;  padding: 10px 0 0 0;}
.faq .faq-list .icon-show { display: none;}
.faq .faq-list a.collapsed { color: #343a40;  transition: 0.3s;}
.faq .faq-list a.collapsed:hover {color: #1bbd36;}
.faq .faq-list a.collapsed .icon-show { display: inline-block;}
.faq .faq-list a.collapsed .icon-close { display: none;}
@media (max-width: 1200px) { .faq .faq-list {  padding: 0; }}


/* Features----*/
.features .icon-box { display: flex; align-items: center; padding: 20px; background: #fff; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); transition: ease-in-out 0.3s;}
.features .icon-box i { font-size: 32px; padding-right: 10px; line-height: 1;}
.features .icon-box h3 {font-weight: 700; margin: 0; padding: 0; line-height: 1; font-size: 16px;}
.features .icon-box h3 a { color: #111; transition: ease-in-out 0.3s;}
.features .icon-box h3 a:hover { color: #1bbd36;}

/* Featured Services Section---*/
#featured-services { background: #000;}
#featured-services .box { padding: 30px 20px;}
#featured-services .box-bg { background-image: linear-gradient(0deg, #000000 0%, #242323 50%, #000000 100%);}
#featured-services i { color: #18d26e;  font-size: 48px;  display: inline-block;  line-height: 1;}
#featured-services h4 { font-weight: 400;  margin: 15px 0;  font-size: 18px;}
#featured-services h4 a {color: #fff;}
#featured-services h4 a:hover { color: #18d26e;}
#featured-services p { font-size: 14px;  line-height: 24px;  color: #fff;  margin-bottom: 0;}

/* Team Section
--------------------------------*/
#team { background: #f2f2f2; padding: 60px 0;}
#team .member { text-align: center; margin-bottom: 20px; background: #000; position: relative;}
#team .member .member-info { opacity: 0; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; top: 0; left: 0; right: 0; transition: 0.2s;}
#team .member .member-info-content { margin-top: -50px; transition: margin 0.2s;}
#team .member:hover .member-info { background: rgba(0, 0, 0, 0.7); opacity: 1; transition: 0.4s;}
#team .member:hover .member-info-content { margin-top: 0; transition: margin 0.4s;}
#team .member h4 { font-weight: 700; margin-bottom: 2px; font-size: 18px;  color: #fff;}
#team .member span { font-style: italic; display: block; font-size: 13px; color: #fff;}
#team .member .social { margin-top: 15px;}
#team .member .social a { transition: none; color: #fff;}
#team .member .social a:hover { color: #ff4500;}
#team .member .social i { font-size: 18px; margin: 0 2px;}

/*contact----------*/
#contact {width:80%;padding-left: 10%; padding-right: 10%;margin:0 auto;text-align:center;}
#contact .contact-info {margin-bottom: 10px; text-align: center;}
#contact .contact-info i { font-size: 38px; display: inline-block; margin-bottom: 10px; color: #ff4500;}
#contact .contact-info address, #contact .contact-info p { margin-bottom: 0; text-align: center; font-size: 18px; font-weight: 900; color: #000;}
#contact .contact-info h3 { font-size: 18px; margin-bottom: 10px; font-weight: bold; text-transform: uppercase; color: blue}
#contact .contact-info a {font-size: 18px; font-weight: 900; color: #000;}
#contact .contact-info a:hover { color: blue;}
#contact .contact-address, #contact .contact-phone, #contact .contact-email { margin-bottom: 15px;}
@media (min-width: 768px) { #contact .contact-address, #contact .contact-phone, #contact .contact-email { padding: 10px 0; }}
@media (min-width: 768px) { #contact .contact-phone { border-top: 1px solid blue; border-bottom: 1px solid blue; }}
@-webkit-keyframes animate-loading {  0% {    transform: rotate(0deg);  }  100% {    transform: rotate(360deg);  }}
@keyframes animate-loading { 0% {    transform: rotate(0deg);  }  100% {    transform: rotate(360deg);  }}
.contact-form .input-block { border: solid 1px blue; width: 100%; height: 40px; padding: 25px; position: relative; margin-bottom: 20px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
  .contact-form .input-block.focus {  border: solid 1px #ff4500;}
  .contact-form .input-block.textarea {height:80px;padding:25px 20px;color:#0a1d3e;border:1px solid blue;}
  .contact-form .input-block.textarea.focus { border: solid 1px #ff4500;}
  .contact-form .input-block.textarea .form-control { height: auto; resize: none;}
  .contact-form .input-block label { padding: 0 10px; background: #fff; position: absolute; left: 8px; top: 20px; display: block; margin: 0; font-weight: 300; color: #999; font-size: 18px; line-height: 10px;}
  .contact-form .input-block .form-control { background-color: transparent; border: medium none; border-radius: 0; box-shadow: none; color: #333; font-size: 18px; height: 40px; padding: 0; position: relative; top: -20px; z-index: 2;}
  .contact-form .input-block .form-control:focus label { top: 0;}  

.hire-container{max-width:1470px;width:100%;margin:0}
.hireform{width:80%;background:#fff!important;border:2px blue solid; border-radius:10px;padding:40px 30px;margin:20px 0 0 auto;text-align:center;position:relative}
.hireform:before{content:'';width:123px;height:121px;position:absolute;z-index:9;left:-55px;top:-50px;background:url(../img/quality.png)repeat;background-size:100%;display:block}
.hireform h3{font:32px;color:blue;margin:0 0 10px}
.hireform p{font:18px;color:#0a1d3e}
.hireform form button{border:none;width:100%;display:block;font-size:20px;height:65px;text-transform:capitalize;border-radius:8px;font:22px;padding:10px 20px;color:#fff;background:blue}
.hireform form button:hover{background:#ff4500;cursor:pointer}

.c-container{max-width:1470px;width:100%;margin:0}
.cform{width:80%;background:#fff!important;border:2px blue solid; border-radius:10px;padding:40px 30px;margin:20px 0 0 auto;text-align:center;position:relative}
.cform:before{content:'';width:123px;height:121px;position:absolute;z-index:9;left:-55px;top:-50px;background:url(../img/question.png)repeat;background-size:100%;display:block}
.cform h3{font:32px;color:blue;margin:0 0 10px}
.cform p{font:18px;color:#0a1d3e}
.cform form button{border:none;width:100%;display:block;font-size:20px;height:65px;text-transform:capitalize;border-radius:8px;font:22px;padding:10px 20px;color:#fff;background:blue}
.cform form button:hover{background:#ff4500;cursor:pointer}

@media (max-width:1440px){
  .hireform{width:90%;padding:10px 30px}
.hireform h3{font:24px;margin:0 0 3px}
.hireform p{font:16px;}
.hireform form{margin:10px 0 0}
.hireform form button{font:18px}}
@media (max-width:1399px){.services-from .hireform{padding:15px 30px;margin:0 auto}
.services-from .hireform form .textarea{margin:0 0 15px}}
@media (max-width:899px){
  .hire-container{max-width:960px}.hireform{padding:20px}
  .hireform:before{width:80px;height:80px;left:40%;top:-45px}
  .hireform h3{font:24px;padding-top:20px}
  .hireform p{font:14px}}
/* Footer-*/
#footer {color: #fff;  font-size: 15px;  font-weight: 600;  background: #111;}
#footer .footer-top { padding: 60px 0 30px 0;  background: #1e1e1e;}
#footer .footer-top .footer-contact { margin-bottom: 30px;}
#footer .footer-top .footer-contact h3 {  font-size: 22px; margin: 0 0 10px 0; padding: 2px 0 2px 0; line-height: 1; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: #fff;}
#footer .footer-top .footer-contact p { font-size: 15px; line-height: 24px; text-align: justify; margin-bottom: 0; color: rgba(255, 255, 255, 0.9);}
#footer .footer-top .footer-contact p a { font-size: 15px; line-height: 24px; text-align: justify; margin-bottom: 0; font-family: 'Philosopher', sans-serif; color: rgba(255, 255, 255, 0.9);}
#footer .footer-top h4 { font-size: 16px; font-weight: bold; color: #fff; position: relative; padding-bottom: 12px;}
#footer .footer-top .footer-links { margin-bottom: 30px;}
#footer .footer-top .footer-links ul { list-style: none;padding: 0; margin: 0;}
#footer .footer-top .footer-links ul i { padding-right: 2px;  color: #ff4500;  font-size: 18px;  line-height: 1;}
#footer .footer-top .footer-links ul li {padding: 10px 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: rgba(255, 255, 255, 0.8);  transition: 0.3s;  display: inline-block;  line-height: 1;}
#footer .footer-top .footer-links ul a:hover { text-decoration: none;  color: #fff;}
#footer .footer-newsletter .cta-btn1 {  font-family: 'Calibri', sans-serif; text-transform: uppercase; font-weight: 600; font-size: 20px; letter-spacing: 1px; display: inline-block; background: #ff4500 ; opacity: 0.8; padding: 8px 28px; border-radius: 25px; transition: 0.3s; margin-top: 10px;  border: 0; color: #fff;}
#footer .footer-newsletter .cta-btn1:hover { background: #ff4400e1; opacity: 1;}
#footer .credits { padding-top: 5px; font-size: 15px; color: #fff;}
footer .credits a { padding-top: 5px; font-size: 15px; color: #fff;}
#footer .social-links a {font-size: 18px; display: inline-block;  background: #333; color: #eee; line-height: 1; border: #ff4500 solid 2px; padding: 8px 0; margin-right: 4px; border-radius: 50%; text-align: center; width: 36px; height: 36px; transition: 0.3s;}
#footer .social-links a:hover { background: #ff4500; color: #fff;}
.testslide{height: 500px; width:100%; border:none;}
  @media screen and (max-width: 900px) {.testslide {min-height: 1900px;}}

  
/*-----hardware items ------*/
  #portfolio1 { padding: 20px 0;}
#portfolio1 .portfolio-item { position: relative; height: 350px; width:100%; padding-left: 5%;margin-bottom: 3%; overflow: hidden;}
#portfolio1 .portfolio-item figure { background: #fff; align-items: center; align-content: center; overflow: hidden; height: 300px; width:100%; position: relative; border-radius: 4px 4px 0 0; margin:0;}
#portfolio1 .portfolio-item figure::before {	position: absolute;	top: 0;	left: -75%;	z-index: 2;	display: block;	content: '';	width: 50%;	height: 100%;	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);	-webkit-transform: skewX(-25deg);	transform: skewX(-25deg);}
#portfolio1 .portfolio-item figure:hover::before {	-webkit-animation: shine .75s;	animation: shine .75s;}
@-webkit-keyframes shine {	100% {		left: 125%;	}}
@keyframes shine {	100% {		left: 125%;	}}
#portfolio1 .portfolio-item .portfolio-info {  background: #fff; text-align: center;  padding: 30px;  height: 50px;  border-radius: 0 0 3px 3px;}
#portfolio1 .portfolio-item .portfolio-info h4 {  font-size: 18px;  line-height: 1px;  font-weight: 700;  margin-bottom: 18px;  padding-bottom: 0;}
#portfolio1 .portfolio-item .portfolio-info h4:hover { color: #ed3c0d; cursor: pointer;}

  .serv1 p{font-size:17px; text-align: justify;}
   .web-dev1{font-size: 18px; font-weight: 600; color:rgb(29, 11, 129)}
  .img-tech{ width: 22.3%;margin:30px 5px 50px 5px;}
  .img-tech:hover{ box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.9);border-radius: 50%;}
  @media (max-width:598px){.img-tech{ width: 20%;margin:20px 5px 30px 5px;}}
.serv-img{width:450px;display: block; margin-left: auto; margin-right: auto;}
@media (max-width:598px){.serv-img{width:95vw;}}
.ptext {text-align:left;font-size: 25px; font-weight: 800; color:#0a1d3e;line-height: 40px; }
.ptext img{height:30px;}
@media (max-width:598px) {
  .ptext {text-align:left;font-size: 15px; font-weight: 600; color:#0a1d3e; } 
  .ptext img{height:20px;}}