@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Bold.eot');
    src: url('fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSans-Bold.woff2') format('woff2'),
        url('fonts/OpenSans-Bold.woff') format('woff'),
        url('fonts/OpenSans-Bold.ttf') format('truetype'),
        url('fonts/OpenSans-Bold.svg#OpenSans-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Light.eot');
    src: url('fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSans-Light.woff2') format('woff2'),
        url('fonts/OpenSans-Light.woff') format('woff'),
        url('fonts/OpenSans-Light.ttf') format('truetype'),
        url('fonts/OpenSans-Light.svg#OpenSans-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-ExtraBold.eot');
    src: url('fonts/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSans-ExtraBold.woff2') format('woff2'),
        url('fonts/OpenSans-ExtraBold.woff') format('woff'),
        url('fonts/OpenSans-ExtraBold.ttf') format('truetype'),
        url('fonts/OpenSans-ExtraBold.svg#OpenSans-ExtraBold') format('svg');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular.eot');
    src: url('fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSans-Regular.woff2') format('woff2'),
        url('fonts/OpenSans-Regular.woff') format('woff'),
        url('fonts/OpenSans-Regular.ttf') format('truetype'),
        url('fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-SemiBold.eot');
    src: url('fonts/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSans-SemiBold.woff2') format('woff2'),
        url('fonts/OpenSans-SemiBold.woff') format('woff'),
        url('fonts/OpenSans-SemiBold.ttf') format('truetype'),
        url('OpenSans-SemiBold.svg#OpenSans-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}



/*=== Heading style====*/


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

h1{
	font-size: 32px;
    font-weight: 700;
    margin-bottom: 0;
    color: #222;
}


h2 {
	font-size: 28px;
    font-weight: 600;
    margin-bottom: 0;
    color: #222;
}

h3 {
	font-size: 24px;
    font-weight: 500;
    margin-bottom: 0;
    color: #222;
}



h4 {
	font-size: 20px;
    font-weight: 400;
    margin-bottom: 0;
    color: #222;
}

h5 {
	font-size: 18px;
    font-weight: 300;
    margin-bottom: 0;
    color: #222;
}

h6 {
	font-size: 16px;
    font-weight: 100;
    margin-bottom: 0;
    color: #222;
}





/*=== Heading style====*/


/*=== General Paragraph style====*/


p{
	font-family: "Inter",sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
	color: #595959;
}


/*=== General Paragraph style ====*/


/*=== General ancor tag style====*/
a {
	color: #444;
    font-weight: 400;
	font-family: "Inter",sans-serif;
	font-size: 14px;
    font-weight: normal;
}

a:hover{
	text-decoration: none;
}

/*=== General ancor tag style ====*/


/*-- ======= Top Bar css ======= */
.top-header {
    background-color: #262626;
    padding-top: 6px;
    padding-bottom: 6px;
    
}

.right-phone{
    text-align: right;
}
.top-header p{
    color: #fff;
    margin-bottom: 0px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}

.top-header a{
    color: #fff;
   font-family: 'Lato', sans-serif;
   font-size: 16px;
}

.top-header a i{
    margin-right: 3px;
}

.top-logo {
    width: 190px;
}
#header {
     background: #099bc0;
    color: #fff;
    position: relative;
    width: 100%;
    z-index: 9;
    font-family: 'Inter', sans-serif;
    top: 0;
    transition: all 0.4s ease;
}

#header.sticky {
    position:fixed;
    background-color: #000;
}

#header .header-top{
	    background: #0da0b4;
}

#header .header-top .contact-link-ft {
	line-height: 40px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
}

#header .header-top .right-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
#header .header-top .right-nav div{
     margin-right: 20px;
	line-height: 40px;
}

#header .header-top .right-nav div a{
	color:  #fff;
	font-size: 14px;
	font-family: 'Inter', sans-serif;
}

#header .header-top .right-nav #dropdownSearchButton {
	background-color: #00bbd3;
	width: 40px;
    height: 40px;
    line-height: 40px;
	text-align: center;
	margin-right: 4px;
	font-family: 'Inter', sans-serif;
	cursor: pointer;
}

#header .header-top .right-nav .dropdown{
	margin-right: 4px;
}

#header .header-top .search_query_top_ft {
	width: 84%;
    float: left;
    margin-right: 0 !important;
}

#header .header-top .search_query_top_ft .search_query {
	border: 0px;
}

#header .header-top .search_query_top_ft .search_query:focus{
	box-shadow: 0 0 0 0rem rgb(0 123 255 / 25%);
}

#header .header-top .button-search {
	color: #fff;
    float: left;
    background-color: #000;
}

#header .header-top .button-search:focus{
	box-shadow: 0 0 0 0rem rgb(0 123 255 / 25%);
}

#header .header-top .right-nav .dropdown-toggle::after{
	display: none;
}

#header .header-top .right-nav #dropdownSearchButton .dropdown-menu{
	width: 300px;
    left: -258px !important;
    border: 0px;
}

#header .header-top .right-nav  .ab-iconcart{
	background-color: #00bbd3;
	width: 40px;
    height: 40px;
    line-height: 40px;
	text-align: center;
	font-family: 'Inter', sans-serif;
	margin-right: 0px;
	
}

#header .header-top .right-nav .cart-products-count {
	background-color: transparent!important;
    top: -8px;
    right: 0px;
    position: relative;
	
}

.navbar-toggler {
	background-color: #fff !important;
	padding: .10rem .16rem !important;
}

.top-phone {
	display: flex;
    align-items: center;
    margin: 0px;
}

.top-phone li{
	list-style: none;
}

.top-phone li a{
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Lato', sans-serif;		
	
}

.top-phone li a i{
   margin-right: 10px;
}

.navbar-collapse {
	justify-content: left;
}

.mobile-tab {
	display: none;
	color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Lato', sans-serif;
}


/*=== side cart css===*/


.cart-box {
   visibility: hidden;
    height: 100%;
    width: 300px;
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    background-color: #fff;
    overflow-x: hidden;
    padding-top: 60px;
    padding-left: 20px;
	transform: translateX(100%);
	-webkit-transition: all .35s cubic-bezier(0.46,0.01,0.32,1);
    -o-transition: all .35s cubic-bezier(0.46,0.01,0.32,1);
    transition: all .35s cubic-bezier(0.46,0.01,0.32,1);
	
}

.cart-box a {
  padding: 0px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.cart-box .closebtn {
     position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
}

.overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 30;;
 
}


/*-- ======= Nav bar css ======= */


.navbar-light {
	    background-color: transparent !important;
}

.navbar-nav li a {
	 color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Lato', sans-serif;
}

.navbar-nav .dropdown-menu  .dropdown-item {
	color: #000 !important;
	font-size: 16px;
}

.navbar-nav .dropdown-menu .dropdown-item:active {
	background-color: #fff;
}


/*-- ======= Nav bar css ======= */


/*-- ======= Top Bar css ======= */


/*-- ======= home slider css======= */
section.homeslider {
  padding: 0px 0px 0px 0px;
}
section.homeslider h3 {
  font-size: 40px;
}
@media (max-width: 639px) {
  section.testimonials h3 {
    font-size: 30px;
  }
}
section.homeslider p.text-center.gray {
  max-width: 900px;
  margin: 0 auto;
}
section.homeslider .slider1 {
  padding: 0px;
  margin-bottom: 0px;
}
section.homeslider .slider1 .owl-prev {
    left: 7px;
	font-size:30px;
}

section.homeslider .owl-nav button img {
	    width: 70px;
}

section.homeslider .slider1 .owl-next {
    right: 7px;
	font-size:30px;
}
section.homeslider .slider1 .owl-prev, .owl-next {
    position: absolute;
    top: 50%;
    height: 100px;
	
}

section.homeslider .slider1 .owl-prev, .owl-next:focus{
	outline: none;
}

section.homeslider .owl-thumbs {
    text-align: right;
    position: relative;
    margin-top: -145px;
    z-index: 10;
}
section.homeslider .owl-thumbs button {
  background-color: transparent;
  border: none;
  opacity: 0.5;
  display: inline-block;
  margin-right: 10px;
}
section.homeslider .owl-thumbs button .userimg {
  width: 70px;
  height: 70px;
  margin: 0 auto;
  transition: 0.3s;
  border: 4px solid transparent;
  position: relative;
  top: 0px;
}
@media (max-width: 639px) {
  section.homeslider .owl-thumbs button .userimg {
    width: 80px;
    height: 80px;
  }
}
section.homeslider .owl-thumbs button .userimg img {
  width: 100%;
  
  height: 100%;
  object-fit: cover;
  object-position: center;
}
section.homeslider .owl-thumbs button.owl-thumb-item.active {
  transition: 0.3s;
  opacity: 1;
}
section.homeslider .owl-thumbs button.owl-thumb-item.active .userimg {
  border: 4px solid #d1d1d1 !important;
}

section.homeslider .owl-item.active .slider-text-info{
  animation: 1s .2s fadeInUp both;
}

.slider-text-info {
	position: absolute;
    width: 100%;
    top: 36%;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
}

.slider-text-info h2{
	color: #fff;
	font-size: 60px;
	font-family: 'Mark';
	font-weight: 700;
}

.slider-text-info {
	color: #fff;
	font-size: 16px;
	font-family: 'Lato', sans-serif;
}

.slider-text-info p{
	color: #fff;
	font-size: 16px;
	font-family: 'Lato', sans-serif;
}


.slider-text-info a{
	color: #fff;
    background-color: #000000;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 600;
    display: inline-block;
    width: 200px;
    height: 46px;
    line-height: 46px;
    border-radius: 0;
    text-align: center;

}

.slider-text-info a:hover{
	background-color: #39393b;
}

.banner-text {
    position: absolute;
    width: 100%;
    top: 45%;
    text-align: center;
}
.banner-text h1{
     font-family: 'Inter', sans-serif;
    font-size: 50px;
    font-weight: 700;
    color: #000;
}

/*-- ======= end of home slider ======= */



/*-- ======= Process Section css ======= */

.our-process-title {
	color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 36px;
}

.orange {
  background-color: #3f3f3f;
  color: white;
}

/* new styles for process section */

.orange { padding: 60px 0 100px; }

.row { max-width: 100%; }

#process { padding: 125px 0 0 0; }

.processBlock::before {
  content: '';
  position: relative;
  top: -5px;
  left: 93px;
  height: 4px;
  width: 109%;
  background: #ecf0f1;
}

.processBlock:before, .processBlock:after {
  content: " ";
  display: table;
}

.processDot {
  position: relative;
  top: -17px;
  left: 75px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  opacity: 0;
  background: #EEA630;
}

.processDot.lastDot { top: -14px; }

.processBlock .topProcess { position: relative; top: -94px; }

.processText {
    opacity: 0;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 21px;
    padding-left: 15px;
    font-family: "Inter",sans-serif;
    text-align: left;
}

/* processDot */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.animated .processDot, .animated .processText {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.processBlock.one .processText {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.processBlock.two .processDot {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay:0.8s;
  animation-delay: 0.8s;
}

.processBlock.two .processText {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  animation-delay: 1.2s;
}

.processBlock.three .processDot {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.processBlock.three .processText {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
}

.processBlock.four .processDot {
  -webkit-animation-delay: 2.4s;
  -moz-animation-delay: 2.4s;
  animation-delay: 2.4s;
}

.processBlock.four .processText {
  -webkit-animation-delay: 2.8s;
  -moz-animation-delay: 2.8s;
  animation-delay: 2.8s;
}

.processLast.five .processDot {
  -webkit-animation-delay: 3.2s;
  -moz-animation-delay: 3.2s;
  animation-delay: 3.2s;
}

.processLast.five .processText {
  -webkit-animation-delay: 3.6s;
  -moz-animation-delay: 3.6s;
  animation-delay: 3.6s;
}

/* process line */
@-webkit-keyframes mymove { from { width: 0; opacity: 0 } to { width: 115%; opacity: 1; } }
@-moz-keyframes mymove { from { width: 0; opacity: 0 } to { width: 110%; opacity: 1; } }
@keyframes mymove { from { width: 0; opacity: 0 } to { width: 110%; opacity: 1; } }

.animated .processBlock::before {
  width: 0;
  opacity: 0;
  -webkit-animation:mymove ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:mymove ease-in 1;
  animation:mymove ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.processBlock.one::before {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.processBlock.two::before {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay:1.5s;
  animation-delay: 1.5s;
}

.processBlock.three::before {
  -webkit-animation-delay: 2.3s;
  -moz-animation-delay: 2.3s;
  animation-delay: 2.3s;
}

.processBlock.four::before {
  -webkit-animation-delay: 3.1s;
  -moz-animation-delay: 3.1s;
  animation-delay: 3.1s;
  display: none;
}















/*===== by construction  section===*/

#about-section {
	padding-top: 60px;
	padding-bottom: 60px;
}

.about-img img {
	width: 100%;
}

#about-section h2{
	font-family: 'Inter', sans-serif;
	font-size: 28px;
    font-weight: 600;
    color: #222;
	margin-bottom: 20px;
}

.about-info {
    color: #000;
    font-size: 16px;
	font-family: 'Inter', sans-serif;
}

.askabout-text {
    color: #000;
    font-size: 20px;
	font-family: 'Inter', sans-serif;
}


/*=== collection  section css===*/

.remote-help-section {
    background-color: #ebebeb;
	padding-top: 50px;
	padding-bottom: 50px;
}

.computer-tech img{
	width: 100%;
	margin-bottom:10px;
}

.remote-help-section h2{
	font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #222;
    margin-bottom: 20px;
}


/*-- =======end of collection css ======= */


/*=== featured product ======*/

.calltoaction {
	padding-top: 50px;
	background-color: #099bc0;
	padding-bottom: 50px;
	text-align: center;
}

.calltoaction h2 {
	color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 36px;
	text-align: center;
}

.calltoaction a{
	background-color: #fff;
    padding: 10px 36px;
    display: inline-block;
    margin-top: 25px;
    font-size: 22px;
	
}

.calltoaction a:hover{
	background-color: #000;
	color: #fff;
}

.list-items {
	padding-left: 0px;
}

.list-items li{
	list-style: none;
	color: #000;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
	margin-top: 10px;
}


.list-items li i{
	color: #099bc0;
    margin-right: 6px;
}

/*=== contact us css======*/

.contact-sec {
    background-color: #ebebeb;
    padding-top: 50px;
    padding-bottom: 50px;
}

.contact-sec h3{
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #222;
    margin-bottom: 20px;
    text-align: center;
}

.contact-sec p{
    text-align: center;
    list-style: none;
    color: #000;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    margin-top: 10px;
    margin-bottom:0px;
}

.contact-form {
    position: relative;
    width: 72%;
    margin: 0px auto;
    margin-top: 24px;
}

.contact-form .form-field input {
    padding: 10px;
    border-radius: 0px;
    height: 38px;
    margin-top: 15px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #353434;
}

.contact-form textarea {
    padding: 10px;
    border-radius: 0px;
    height: 100px;
    margin-top: 15px;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #353434;
}

.contact-form .submit-btn {
   margin-top: 18px;
}

.contact-form .submit-btn .send-btn{
    background-color: #099bc0;
    color: #fff;
    font-family: 'Inter', sans-serif;
    border: 0px;
    font-size: 18px;
    padding: 6px 38px;
    border-radius: 32px;
}

.contact-form .submit-btn .send-btn:hover{
    background-color: #000;
}

/*=== contact us css ======*/



/*=====  footer css  section===*/

.footer-contact {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
}

.footer-contact p{
    color: #fff;
    margin-right: 30px;
    margin-bottom: 0px;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 18px;
}

.footer-contact a {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 300;
}

.footer-contact a  i {
    margin-right: 3px;
}

.footer-logo img{
    width: 200px;
}

.footer-section {
	padding: 32px 0;
    margin-top: -2px;
    background-color: #3f3f3f;
}

.footer-about-content {
	color: #fff;
    margin-top: 18px;
    width: 90%;
}

.footer-address {
	color: #fff;
}

.foot-address {
	margin-bottom: 26px !important;
}

.footer-bottom {
	background-color: #000000;
	padding-top: 10px;
    padding-bottom: 10px;
}

.copyright {
	margin-bottom: 0px;
	color: #fff;
	text-align: center;
}


.footer-address p{
	color: #fff;
	margin-bottom: 4px;
}

.footer-section h3{
	text-align: left;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
	margin-bottom: 30px;
}

.footer-links{
	padding-left: 0px;
	color: #fff;
	text-align: center;
	margin: 0px;
}

.footer-links a{
	font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #fff;
}

.footer-links li{
	text-align: left;
	list-style: none;
	margin-top: 10px;
}

.footer-links li a{
	font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #fff;
}

.footer-links li a:hover{
	color:  #fcb800;
}



.footer-section .footer-social{
	padding: 30px 0 ;
}

.footer-section .footer-social a{
	    color: #545353;
    font-size: 24px;
    margin: 0 10px;
}

.footer-section .footer-social a:hover{
	    color: #545353;
}



/*=====  footer css  section===*/