@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap');
/*  -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; */

*{ font-family:"Roboto"; font-weight:300; font-size:16px; margin:0; padding:0;box-sizing: border-box;}
textarea:focus, input:focus{
    outline: none;
}
.homesection{ background:#f6f8fd; float:left; width:100%}
.menus li{ list-style:none; display:inline-block; margin-right:20px;}
.leftHeader{ float:left;  padding:20px 20px 0 20px;width: 280px;background-size: 100% auto;text-align: left;min-height: 100px;}
.rightHeader{ float:right}

.error-container{ color:red; font-size:14px; display:none !important}
.required.error{ border-color:red}

.header{ position:relative; float:left; width:100%; z-index:9}
.leftHeader a:link,.leftHeader a:visited,.leftHeader a:hover{ color:#fff; font-weight:normal; font-family:"Roboto"; text-decoration:none; font-weight:400}

.headerRight{ float:right; margin:30px}
.headerRight ul li{ display:inline-block; list-style:none; margin:0 5px}
.headerRight ul li a:link,.headerRight ul li a:visited{ color:#000; text-decoration:none; padding:0 10px; font-size:18px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
.headerRight ul li a:hover{color:#ff3838 !important;}

.getintouch:link,.getintouch:visited{ border-radius:50px; color:#fff !important; border:2px solid #ff3838; background:#ff3838; padding:7px 10px !important; text-transform:uppercase; font-weight:700; font-size:14px !important;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
.getintouch:hover{ color:#ff3838 !important; background:#fff !important}


.menus li a:link,.menus li a:visited,.menus li a:hover{ color:#fff; font-size:16px; font-weight:normal;  text-decoration:none}
.curveBg{ background:url(../images/curve1.png) no-repeat right top;width: 100%;height: 100%;background-size: 60%; float:left}
.intro{ width:100%}
.boxFifty{ width:50%; height:100%; display:table-cell; vertical-align:middle; padding:0 0px}
.boxFifty.img{ text-align: left; width:100%;  width:50%; padding-right:40px}
.leftB{ padding-left:80px}

h1.punchline,h2.punchline,h3.punchline,h4.punchline{ text-transform:uppercase; text-align:left; font-size:70px; font-weight:900;}
.subPunchline{ color:#fff; font-size:20px; text-align:left; font-weight:300 }
p.subPunchline{ color:#000}
.smHeading{ text-transform:uppercase; font-size:18px; color:#ff3838 !important; font-weight:700}
.section{ float:left; width:100%; padding:50px ; height:100%; background:#fff}
#what-we-do{ background:#f7faff url(../images/services-bg.png) no-repeat center center; padding:50px 0}
h1.heading,h1.heading span{ text-transform:none; text-align:center; font-size:42px; font-weight:700; color:#003399; margin:0; padding:0}
h1.heading span{ color:#ff3838}
h1{ background:url(../images/header-bg.png) no-repeat center bottom;}
.paraFirst{ width:60%; text-align:justify; float:left; margin:30px 0}
.cls{ clear:both}
.paraFirst{ padding:0 30px}
.subHeading{ text-align: center; font-weight:300; font-size:22px; padding:10px 15%; line-height:32px}
.paraSecond{ width:40%; text-align:justify; float:right;padding:0 15px;margin:30px 0}
.paraSecond p{ text-align:left; line-height:24px; padding-bottom:15px}
p{ padding:10px 0; line-height:26px}
.banner{ float:left; width:100%}
.whatwedoList{ list-style:none; display:inline-block}
.whatwedoList li{ float:left; width:50%; text-align:center; padding-bottom:30px; color:#003399; font-size:400}
.whatwedoList li span{ font-weight:900}
.whatwedoList li img{ margin-bottom:10px}
label .menu {
  position: absolute;
  right: -90px;
  top: -90px;
  z-index: 100;
  width: 180px;
  height: 180px;
  background: rgba(255,255,255,0.2);
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;
}

label .hamburger {
  position: absolute;
  top: 130px;
  left: 40px;
  width: 30px;
  height: 2px;
  background: #fff;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

label .hamburger:after, label .hamburger:before {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
}

label .hamburger:before { top: -10px; }

label .hamburger:after { bottom: -10px; }
label input:checked + .menu{ background:#fff}

label input:checked + label .hamburger:after, label input:checked + label .hamburger:before, label input:checked hamburger{background: #000; color:#000}

label input { display: none; }

label input:checked + .menu {
  box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;
  border-radius: 0;
}

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);background: #06a5f5; color:#06a5f5
}

label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;background: #06a5f5; color:#06a5f5
}

label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
}

label input:checked + .menu + ul { opacity: 1; }

label ul {
  z-index: 200;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out;
}

label a {
  margin-bottom: 1em;
  display: block;
  color: #000;
  text-decoration: none;
}

.cls{ clear:both}
.bx-pager.bx-default-pager{ display:block !important}
.bx-controls-direction{ display:none !important}
    .servicesBox{ width:33.33%; padding:50px 25px 5px 25px; float:left; text-align:center}
	.servicesIcon{ float:left; width:100%}
	.servicesIcon img{ height:70px}
	.servicesHeading{ color:#000; font-weight:600; font-size:20px; padding:10px 0 0 0; clear:both}
	.servicesTxt{color:#000; font-weight:300; text-align: center}
.outerTable{ display:table; width:100%}	

/* Slider */

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: auto; max-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: auto;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block; margin:0 auto;
}
.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;
}

.clients{ padding:50px 0 30px 0; color:#fff; font-size:16px; font-style:italic; text-align:center}

#contact-us .boxFifty { vertical-align:top}
.boxFifty input,.boxFifty textarea{ width:90%; color:#000; padding:10px 15px; border:0px solid #fff; background:#fff; border-radius:10px; margin-bottom:20px; border:3px solid #d9edf5}
.boxFifty input.captcha{ width:50%}

.boxFifty input[type="submit"]{ background:#fff; color:#003399; border-color:#003399; cursor:pointer; opacity:1;-webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out; text-transform:uppercase; font-weight:700; letter-spacing:2px}
.boxFifty input[type="submit"]:hover{ background:#003399; color:#fff; border-color:#003399; }

.boxFifty textarea{ height:105px}
#contact-form{ padding:30px 0 0 0}
::-webkit-input-placeholder { /* Edge */
  color: #999;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #999;
}

::placeholder {
  color: #999;
}
.clientLeft h1{ text-align:left; max-width: 215px;}
.clientLeft{ width:30%; float:left; position:relative; padding-top:150px}
.clientRight{ width:70%; float:left; }
.bxsliderClient li img{ margin:0 auto}
.bxsliderClient li{ text-align:center}

#contact-us{ background:#f7faff}

#message-sent{ display:none}

.contactBottom{ float:left; width:100%; background:url(../images/arrow-bg.png) no-repeat #003399}
.contactBottomLeft{ float: left;
width: 287px;
color: #fff;
font-size: 26px;
text-transform: uppercase;
padding: 50px 25px;
font-weight: 700;
letter-spacing: 1px;}
.contactBottomRight{ float:left; width:calc(100% - 287px);color:#fff; font-size:36px; text-align:center; padding:40px 0}
.contactBottomRight img{ vertical-align:middle; margin-right:10px}
.emailIcon{ margin-left:50px}

.footerBottom{float:left; width:100%; background:#032e86 url(../images/footer-bg.png); padding:30px; text-align:center}
.footerBottom ul{ margin:15px auto; list-style:none}
.footerBottom ul li{ display:inline-block; padding:0 20px; border-left:1px solid #fff}
.footerBottom ul li a:link,.footerBottom ul li a:visited{ text-decoration:none; color:#CCC;}
.footerBottom > ul:nth-child(1) > li:nth-child(1){ border:0}
.footerBottom ul li a:hover{ color:#fff}
.footerBottom p{ color:#fff; font-size:14px}

.clsmobile,.mobileMenus,.mobileHeader{ display:none}
#contact-loader{ display:none}
@media screen and (max-width:750px){
	*{ font-size:14px; font-weight:400}
	.servicesTxt{ font-weight:400}
	.mobileMenus{ display:block; float:right}
.paraFirst,.paraSecond,.clientLeft h1{ width:100%}	
	.contactBottomRight{ font-size:20px}
.section{ padding:30px 20px}
.section#services{ padding:30px 0}
.servicesBox{ width:100%; float:left}
.boxFifty{ width:100%; display:block}
.boxFifty.img{ width:100%; display:block}
.boxFifty.img img{ width:80%; margin:0 auto; text-align:center}
label .menu {
  position: absolute;
  right: 10px;
  top: -100px;}
h1.punchline,h2.punchline,h3.punchline,h4.punchline,p.heading{ text-transform:uppercase; text-align:center; font-size:30px; font-weight:700}
label .hamburger{ left:75px}
.subPunchline{ font-size:16px}
.bx-pager.bx-default-pager{ display:block !important}
.bx-controls-direction{ display:none !important}
.banner{ width:100%; margin:20px 0%}
.leftHeader{ width:200px; background-size: 100% auto; padding:15px 10px 0 20px; min-height:80px}
.leftHeader a:link, .leftHeader a:visited, .leftHeader a:hover{font-size: 38px;}
label .menu {
    position: absolute;
    right: 10px;
    top: 10px; width:60px; height:60px
}
label .hamburger {
    left: 15px;
}
label .hamburger {
    position: absolute;
    top: 30px;
    left: 15px;
    width: 30px;
    height: 2px;
    background: #fff;
    display: block;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    right: 20px !important;
}
.boxFifty input, .boxFifty textarea,.clientLeft,.clientRight,.contactBottomLeft,.contactBottomRight{ width:100%}
.boxFifty.img img{ margin: 0 auto}
.paraFirst p{ font-size:20px}
.paraSecond,.paraFirst{ padding:0}
.curveBg{ background:url(../images/curve1.png) no-repeat right top;width: 100%;height: 100%;background-size: 100% auto; float:left}
.subHeading{ padding:10px}
.clsmobile{ display:block; height:10px; width:100%; margin:5px 0}
.emailIcon{ margin-left:0} 
.contactBottom{ float:left; width:100%; background:url(../images/mobile-arrow-bg.png) center top no-repeat #003399;  text-align:center}
.footerBottom ul,.getintouch{ display:none}
.smHeading{ text-align:center}
.boxFifty.img,p.subPunchline{ padding-right:0; text-align:center}
.leftB{ padding-left:0}
h1.heading, h1.heading span{ font-size:36px;}
.subHeading {    font-size: 16px;
    line-height: 26px;
}
.paraFirst p{ font-size:14px}
h1.punchline, h2.punchline, h3.punchline, h4.punchline, p.heading{ font-size:28px}
.clientLeft h1{ max-width:100%; text-align:center}
.headerRight{ display:none}
.clientLeft p{ text-align:center}

.headerRight.mobileHeader{ background:#ef3e3e;  position: fixed; top:0; bottom:0; left:0; right:0; padding:0; margin:0; z-index:99999999}
.mobileHeader{ display:none}
.mobileMenus{ position:absolute; float:right; top:20px; right:20px; cursor:pointer; display:block; z-index:999}
.headerRight.mobileHeader ul{ margin-top:80px}
.headerRight.mobileHeader ul,.headerRight.mobileHeader ul li{ width:100%; float:left; text-align:center}
.headerRight.mobileHeader ul li{ margin:10px;}
.headerRight.mobileHeader ul li a:link,.headerRight ul li a:visited{ color:#fff; font-weight:300}
.headerRight.mobileHeader ul li a:hover{ color:#fff !important}

.clientRight .bx-wrapper .bx-controls-direction a,.banner .bx-wrapper .bx-controls-direction a{ bottom:0 !important; top:auto}
.clientLeft{ padding-top:0}
.bxsliderClient,.bxslider{ padding-bottom:50px !important}


}