html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; /* font: inherit; */ vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
html{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
*, *:before, *:after{-webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit;}

input[type=text]::-ms-clear { display: none; }

img {border:0; max-width: 100%; height: auto;}
:focus {outline:0;}
a{outline:none; text-decoration:none;}
textarea,
select,
input[type="search"],
input[type="text"],
input[type="button"],
input[type="submit"]{-webkit-appearance:none;}
.verticalCenter{display:table; width:100%; height:100%;}
.verticalInner{display:table-cell; vertical-align:middle;}
ul,li{ list-style:none;}

body{margin: 0; padding: 0; line-height: 22px; color: #000; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;   font-family: 'Work Sans', sans-serif; background: #ffffff; overflow-x: hidden;}

button:focus{outline:0;}
input:focus{ outline:0;}
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea{display:block;max-width:100%;height: 53px; border:1px solid #B2B2B2;border-radius:30px; padding:0 20px 0px 20px;font-size: 15px; line-height:30px;font-weight: 400;}
textarea{ resize:none;}

/* -------- common css ----------------- */



p{ font-family: 'Work Sans', sans-serif; font-size:15px; line-height:20px;  font-weight:400; margin-bottom:15px;}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{ margin-bottom:0;}

h1{ font-size:34px; line-height:39px; font-weight:700; color:#fff; }
h2{ font-size:28px; line-height:33px; font-weight:700; color:#000;     text-transform: uppercase; }
h3{ font-size:20px; line-height:25px; font-weight:700; color:#000; }

figure {margin:0;}


.container{ width:1130px; margin:0 auto;}

header{ float:left; width:100%; position:fixed; background:#fff; height:60px; display:flex;  top:0; z-index:999; border-bottom:1px solid #ddd;}
header .container {padding: 20px 0 20px 0;display: flex;    justify-content: space-between;     align-items: center;}
header .logo{ width:120px;}
header  nav{ width:80%;}
header  nav ul{ display:flex;}
header  nav ul li a{ color:#000; font-size:13px; padding:0 10px; font-weight:400;}
header  nav ul li a:hover{ color:#09bd7d;}

.snip1135 {

  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}
.snip1135 * {
  box-sizing: border-box;
}
.snip1135 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0 12px;
  padding: 0;
}
.snip1135 a {
  padding: 7px 0;
  color: #000;
  position: relative;
  text-decoration: none;
}
.snip1135 a:before,
.snip1135 a:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1135 a:before {
  bottom: 0;
  display: block;
  height: 3px;
  width: 0%;
  content: "";
  background-color: #000;
}
.snip1135 a:after {
  left: 0;
  top: 0;
  padding: 0.5em 0;
  position: absolute;
  color: #000;
  white-space: nowrap;
  max-width: 0%;
  overflow: hidden;
}
.snip1135 a:hover:before,
.snip1135 .active a:before {
  opacity: 1;
  width: 100%;
}
.snip1135 a:hover:after,
.snip1135 .active a:after {
  max-width: 100%;
}



header .right_btns{ position:relative; width:28%;}

/*header .right_btns a {
    display: inline-block;
    cursor: pointer;
    text-align: center;
    z-index: 10;
    padding: 9px 23px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    border: 1px solid rgba(144, 149, 153, 0.35);
    border-radius: 6px;
    background: rgb(255, 255, 255);
    color: rgb(33, 39, 46); margin-left:10px; transition:0.3s ease-in-out;
}
header .right_btns a:hover{ background:#000; color:#fff;}
*/

ul.main_menu {
    display: inline-block;
    margin-right: 35px;
    float: right;
}
ul.main_menu li{display:inline-block; text-transform:uppercase; padding:9px 10px 0;}
ul.main_menu li a{color:#a2a2a2; font-weight:400; font-size:14px;}
ul.main_menu li a:hover{color:#000}
ul.main_menu li span {
    position: absolute;
    top: 8px;
    left: 0;
    font-size: 16px;
    opacity: 0;
    width: 132px;
}
ul.main_menu li.show_number{position:relative}
ul.main_menu li.show_number:hover span, nav ul.main_menu li span.hr_number{opacity:1 }
ul.main_menu li.show_number:hover a{opacity:0}

nav ul.main_menu li span.hr_number{left:-20px; opacity:0}

.block{display:block;}

.hidden_menu{transition: all 0.6s ease-in-out 0s; right:40px; top: -20px; position: absolute; opacity:0}
.hidden_menu.open{top:-4px; opacity:1}
.hidden_menu li {padding-right:0; font-size:0; display:inline-block; text-transform:uppercase; padding:15px 10px 0 0;}
.hidden_menu li a{border-right:1px solid #a2a2a2; padding-right:10px; font-size:12px; color:#a2a2a2; font-weight:400; }
.hidden_menu li a:hover{color:#000}
.hidden_menu li:last-child a{border-right:none}

ul.main_menu{transition: all 0.6s ease-in-out 0s;}
ul.main_menu.hide{transform: translateY(20px); opacity:0}


.section1{ width:100%;
    margin: 0px auto;
    background-image: url(../images/Phones-&-Circles.jpg);
    background-repeat: no-repeat;
    background-position: right -120px top;
    background-size: 858px 965px;  margin-top:80px; padding-bottom:400px;
}


.first_section{display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 128px 0px 320px;
    position: relative;
    z-index: 2;}

.left_tag{ float:left; width:470px; }
.left_tag p{ font-size:13px; color:#909599; text-transform:uppercase;}
.left_tag h2{ font-size:26px; font-weight:700; line-height:30px; color:#000; text-transform:uppercase;}
.left_tag h3{ font-size:20px; font-weight:400; line-height:25px; text-transform:capitalize; color:#000;}

.red_btn{
    font-size: 15px;
    line-height: 19px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    border-radius: 8px;
    cursor: pointer;
    padding: 17px 45px;
    box-shadow: rgb(94 22 22 / 47%) 0px 14px 30px -8px;
    background: #000; transition:0.3s ease-in-out;
	margin-top: 30px;
    display: inline-block; position:relative; left:0;
}

.red_btn:hover{ left:10px;}


main{ position:relative; overflow:hidden;}


.dotted_lines{    width: 1440px;
    margin: 0px auto;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 47%;
    transform: translateX(-50%);
    background-image: url(../images/Lines_left.png), url(../images/Lines_right.png), url(../images/Lines_left.png), url(../images/Lines_right.png), url(../images/Lines_left.png), url(../images/Lines_right.png), url(../images/Lines_left.png), url(../images/Lines_right.png);
    background-position: 125px 600px, 130px 1313px, 152px 2026px, 157px 2739px, 179px 3452px, 184px 4165px, 206px 4878px, 211px 5591px;
    background-size: 577px 700px, 600px 700px;
    background-repeat: no-repeat;
    z-index: 0;
}

.middle_section{ text-align:center; margin-top:-400px;}
.middle_section p{ padding:30px 0; font-size:15px; line-height:22px;}
.middle_section h4{ text-transform:uppercase;}
.middle_section h2{ text-transform:uppercase;}
.middle_section .feature{ display:flex; flex-wrap:wrap;}
.middle_section .feature li{ flex-grow: 1;
  width: 25%; margin:20px 2%;}
.middle_section .feature li img{ width:190px; transition:0.3s ease-in-out;}
.middle_section .feature li img:hover{ transform:scale(1.1,1.1)}



.section2{ float:left; width:100%; padding:20px 0;}
.section2 h2, .section3 h2, .section5 h2{ text-align:center;  position:relative; top:-10px; opacity:0; transition:2s ease-in-out; }
.section2 .slider_box{ float:left; width:80%; margin:20px 10%; opacity:0; transition:2s ease-in-out;}
.section2 .slider_box .slick-initialized .slick-slide {display: flex !important;align-items: center;justify-content: space-between;}

.slider li{ background:#fff; border-radius:20px; box-shadow: rgb(0 0 0 / 20%) 0px 6px 14px -6px; margin:20px;}
.slider li .left_img{ float:left; width:48%;}
 .slider li .left_img img{ border-top-left-radius: 16px; border-bottom-left-radius: 16px;}
 .slider li .right_box{ float:right; width:48%;}
 .slider li .right_box h3{ text-transform:uppercase; padding-bottom:40px;}
  .slider li .right_box p{ line-height:30px;}



.section2.active h2, .section3.active h2, .section5.active h2{top:0; opacity:1;}
.section2.active .slider_box{ opacity:1;}


section .slick-dots {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 1rem 0;
  list-style-type: none;
  position: absolute;
    right: 157px;
    bottom: 50px;
}
section .slick-dots li {
  margin: 0 0.25rem;
}
section .slick-dots button {
  display: block;
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 100%;
  background-color:rgb(29 34 40 / 15%);
  text-indent: -9999px; cursor:pointer;
}
section .slick-dots li.slick-active button {
  background-color: #000;
}

section .slick-prev {
    position: absolute;
    left: -72px;
    top: 45%;
    text-indent: -9999px;
    border: 0;
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 0 10px #eee; cursor:pointer;
}


section .slick-prev:before {
	content:"";
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  left:15px; top:15px;
  position:absolute;
}



section .slick-next {
    position: absolute;
    right: -72px;
    top: 45%;
    text-indent: -9999px;
    border: 0;
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 0 10px #eee; cursor:pointer;
}


section .slick-next:before {
	content:"";
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
   transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  left:15px; top:15px;
  position:absolute;
}

.tab-description-right {
    float: left;
    width: 70%;
}

.company-block {
    margin: 30px 0;
}

.company-list {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: table;
    width: 100%;
}

.tab-description-left {
    float: left;
    width: 15%;
}

.company-list li {
    background-color: #f3f3f3;
    float: left;
    width: 31%;
    padding: 25px 0 10px;
    margin: 10px 15px 0 0;
    cursor: pointer;
    display: flex;
    height: 140px;
    position: relative;
    align-items: center;
    justify-content: center;
}

.company-list li span {
    position: absolute;
    left: 0;
    border-top: 1px solid red;
    border-bottom: 1px solid blue;
    top: 15px;
    transform: rotateZ(-45deg);
}

.company-list li img {
    /* width: 100%; */
    display: block;
    margin: 0 auto;
    filter: grayscale(100%);
    transition: all .3s;
    height: 55px;
    object-fit: contain;
}

/* .company-list li span {
    opacity: .4;
    font-family: Roboto;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: .4px;
    color: #212121;
    display: block;
    padding: 15px 0 0 20px;
    transition: all .3s;
}
*/

.logo_box ul{ 
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: table;
    width: 100%;

}

.logo_box ul li {
    background-color: #f3f3f3;
    float: left;
    width: 31%;
    padding: 25px 0 10px;
    margin: 10px 15px 0 0;
    cursor: pointer;
    display: inline-block;
    min-height: 140px;
}
.logo_box ul li img{     
    width: auto;
    display: block;
    margin: 0 auto;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: all .3s;
  }

.section3{ float:left; width:100%; text-align:center; padding:50px 0}
.section3 h2{ text-transform:uppercase; padding-bottom:10px;}
.phone_slider_box{ float:left; width:90%; position:relative; margin:100px 0; opacity:0; transition:1s ease-in-out;}

.section3.active .phone_slider_box{ opacity:1;}
.phone_slider_box .phone_slider li{ padding:100px 0;}
.phone_slider_box .left_img_box{ float:left; width:45%; position:relative;}
.phone_slider_box .left_img_box .img_box{ }
.phone_slider_box .left_img_box .mobile_bg {
    width: 389px;
    position: absolute;
    left: -114px;
    right: 0;
    top: -70px;
    margin: auto;
    z-index: 99;
}
.phone_slider_box .left_img_box .mobile {
    width: 230px;
    position: absolute;
    left: 0;
    right: 0;
    top: -42px;
    margin: auto;
    z-index: 999;
}
.phone_slider_box .right_phone{ float:right; width:40%;}


.section4{float:left; width:100%;  padding:50px 0;}
.center_box {
    display: flex;
    justify-content: space-between;     align-items: center;
}
.left_sec{ float:left; width:45%; position:relative; left:-100px; opacity:0; transition:0.5s ease-in-out;}
.right_sec{ float:right; width:65%; position:relative; right:-100px; opacity:0; transition:0.5s ease-in-out;}

.section4.active .left_sec{ left:0; opacity:1;}
.section4.active .right_sec{ right:0; opacity:1;}

.section5{float:left; width:100%;  padding:100px 0;}
.section5 .left_sec{ position:relative; text-align:center;}
.section5 .left_sec .threeimg_bg{ width:90%;}
.section5 .left_sec .threephone{ position:absolute; top:-50px;  left:0; right:0; margin:auto;}






.section5 h2{ text-align:center;}
.section5 p{ text-align:center;}


.heads_li { text-align:center; margin-top:50px;}
.heads_li li{ display: inline-block; width:20%; margin:0 20px; background:#ddd; text-align:center; border:1px solid #ddd; box-shadow: 0px 10px 50px 0px rgb(84 110 122 / 15%);border-radius: 0px;}
.heads_name_box{ background:#000; padding:10px 0;}
.heads_li .heads_name_box .heads_name{ font-weight:400; color:#fff; font-size:15px; padding:10px 10px;}
.heads_li .heads_name_box .group_des{ font-weight:400; color:#fff; font-size:12px; display:block;  padding:0 10px;}
.heads_li .head_photo{ float:left; width:100%; position:relative; overflow:hidden; }
.heads_li .head_photo > img{ width:100%; border-bottom:4px solid #000; display:block; transition:0.4s ease-in-out;}
.heads_li .head_photo > img:hover{ transform:scale(1.2,1.2);}
.heads_li .uppar_queto{ position:absolute; bottom:-3px; z-index:9999; left:10px;}

.heads_li .social-list{ text-align:center;}
.heads_li .social-list li {display: inline-block; width:20%; margin:10px 0;}
.heads_li .social-list li i{ font-size:12px;}
.heads_li .social-list li a {
    display: block;
    height: 34px;
    line-height: 34px;
    text-align: center;
    width: 34px;
    color: #000;
    font-size: 14px;
    background: #fff;
    border-radius: 50px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
}

.heads_li .social-list .facebook a:hover {
  background: #4867aa;
  color: #fff;
}

.heads_li .social-list .twitter a:hover {
  background: #1da1f2;
  color: #fff;
}

.heads_li .social-list .google-plus a:hover {
  background: #dd4d42;
  color: #fff;
}

.heads_li .social-list .linkedin a:hover {
  background: #007bb6;
  color: #fff;
}



.section6{float:left; width:100%; }
.section6.active .left_sec{ left:0; opacity:1;}
.section6.active .right_sec{ right:0; opacity:1;}

.section6 .right_sec li{ padding-bottom:20px; opacity:0;}
.section6 .right_sec li a{ display:inline-block; padding:0 5px; color:#000;}
.section6 .right_sec li h3{ color:#000;}
.section6 .right_sec li i{ font-size:13px; color:#000;}
.section6 .right_sec li p i{ font-size:20px;}

.section6.active .right_sec li:nth-child(1){animation-name: showcontact; animation-duration: 0.5s; animation-delay:0.5s; animation-fill-mode: both;}
.section6.active .right_sec li:nth-child(2){animation-name: showcontact; animation-duration: 0.5s; animation-delay:1s; animation-fill-mode: both;}
.section6.active .right_sec li:nth-child(3){animation-name: showcontact; animation-duration: 0.5s; animation-delay:1.5s; animation-fill-mode: both;}


footer{  width:100%; color:#000; padding:50px 0;}
footer .container{ display: flex;align-items: center;justify-content: space-between;}
footer .container .left_footer{  display: table;
    text-align: center;
    margin-left: auto;
    margin-right: auto;}
footer .container .left_footer p .lni{ font: normal normal normal 14px/1 'LineIcons' !important}
footer .container .left_footer ul li a{ color:#fff; padding:10px 20px;}


/* --------------animation ---------------------- */

.tag1.slick-active .line, .tag2.slick-active .line, .tag3.slick-active .line{-moz-animation: line 1s 1.3s ;  -webkit-animation: line 1s 1.3s;  animation: line 1s 1.3s ; height:2px; width:0; margin-top:20px;  background:#000; animation-fill-mode: forwards;}


.middle_section h2{ animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);}


.slick-dots li button{ position:relative; font-size:0;}
.slick-dots li button::before{content:"";width:6px;height:6px;border-radius:50%;background-color:rgba(33,39,46,0.15); display:block}
.slick-dots li.slick-active button::before{background-color:#21272E;box-shadow:0 0 0 rgba(33,39,46,0.4);-webkit-animation:pulse 2s infinite;animation:pulse 2s infinite;}


@keyframes lighthouse {
    0% {
        -webkit-transform: translate3d(5%, 0, 0) rotateZ(1deg);
        -moz-transform: translate3d(5%, 0, 0) rotateZ(1deg);
        transform: translate3d(5%, 0, 0) rotateZ(1deg)
    }
    100% {
        -webkit-transform: translate3d(-5%, 0, 0) rotateZ(-1deg);
        -moz-transform: translate3d(-5%, 0, 0) rotateZ(-1deg);
        transform: translate3d(-5%, 0, 0) rotateZ(-1deg)
    }
}

@keyframes line {
   from  {
       width:0;
    }
    to {
       width:200px;
    }
}


@keyframes showcontact {
   from  {
       right:-100px; opacity:0;
    }
    to {
       right:0; opacity:1;
    }
}



@keyframes showtext {
   from  {
       left:-100px; opacity:0;
    }
    to {
       left:0; opacity:1;
    }
}



@keyframes pulse{0%{-moz-box-shadow:0 0 0 0 rgba(33,39,46,0.4);box-shadow:0 0 0 0 rgba(33,39,46,0.4);}70%{-moz-box-shadow:0 0 0 10px rgba(33,39,46,0);box-shadow:0 0 0 10px rgba(33,39,46,0);}100%{-moz-box-shadow:0 0 0 0 rgba(33,39,46,0);box-shadow:0 0 0 0 rgba(33,39,46,0);}}



/* ------------------------------------------- mobile menu css ---------------------------------------- */

.top_click{ display:none;}

.top_click1 { position:absolute; right:0; top:-5px; }
.three_line { display:block; position:relative; overflow:hidden; margin:0; padding:0; width:40px; height:40px; font-size:0; text-indent:-9999px; -webkit-appearance:none; -moz-appearance:none; appearance:none; box-shadow:none; border-radius:none; border:none; cursor:pointer; -webkit-transition:background .3s; transition:background .3s }
.three_line:focus { outline:0 }
.three_line span { display:block; position:absolute; top:22px; left:5px; right:9px; height:2px; background:#000 }
.three_line span::after, .three_line span::before { position:absolute; display:block; left:0; width:100%; height:2px; background-color:#000; content:"" }

.three_line span::before { top:-7px }
.three_line span::after { bottom:-7px }
.three_line--htx { background-color:none }
.three_line--htx span { }
.three_line--htx span::after, .three_line--htx span::before { -webkit-transition-duration:.3s, .3s; transition-duration:.3s, .3s; -webkit-transition-delay:.3s, 0s; transition-delay:.3s, 0s }
.three_line--htx span::before { -webkit-transition-property:top, -webkit-transform; transition-property:top, transform }
.three_line--htx span::after { -webkit-transition-property:bottom, -webkit-transform; transition-property:bottom, transform }
.active .three_line--htx { z-index:999; }
.active .three_line--htx span { background:0 0 }
.active .three_line--htx span::before { top:0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); background-color:#000 }
.active .three_line--htx span::after { bottom:0; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); background-color:#000 }
.active .three_line--htx span::after, .active .three_line--htx span::before { -webkit-transition-delay:0s, .3s; transition-delay:0s, .3s }