/* CSS Document */
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, 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%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
.pageloader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('../imges/loading.gif') 50% 50% no-repeat rgb(255, 255, 255);
  opacity: 1;
}
body {
	margin: 0px;
    font-family: "Open Sans", sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 1;
    font-weight: 400;
}
body, html {
    width: 100%;
    height: 100%;
}
html {
  scroll-behavior: smooth;
}
.smcur {
    cursor: pointer;
}
a {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #333;
        transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #561B1F;
}
a:active {
	text-decoration: none;
}

.wrapper {
    max-width: 1450px;
    width: 96%;
    margin: auto;
}
.split {
    clear: both;
}
#vbg {
    opacity: 0.4;
}
.fheader {
    width: 100%;
    position: fixed !important;
    top: 0;
    width: 100%;    
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(40px);
    box-shadow: 0 2px 3px #ccc;
}
.fheader .menubar {
    box-shadow: 1px 3px 4px #ccc;
}
.fheader .faq {
    color: #333;
}
.fheader .faq h3 {
    color: #333;
}
.fheader .faq span {
    color: #333;
}
.fheader .talk {
    color: #333;
}
.fheader .talk h3 {
    color: #333;
}
/*
.fheader .home .toplogo {
    display: block;
    float: left;
    width: 200px;
    margin: 20px 0px 0 20px;
}
.fheader .home .toplogo img {
    width: 100%;
}
.home .toplogo {
    display: none;
}
*/
.home .fheader .hhlogo {
    display: block;
    float: left;
    width: 200px;
    margin: 20px 0px 0 20px;
}
.home .hhlogo {
    display: none;
   
}
.toplogo {
   
    float: left;
    width: 200px;
    margin: 20px 0px 0 20px;
}
.toplogo img {
    width: 100%;
}
.quickaccess {
    position: fixed;
    right: 0px;
    top: 25%;
    z-index: 888;
    text-align: center;
}
.quickaccess a {
    font-size: 33px;
    background-color: #000;
    color: #fff;
    padding: 10px 10px;
    box-sizing: border-box;
    border-radius: 16px 0px 0px 16px;
    box-shadow: 0 1px 2px #333;
    display: block;
    margin-bottom: 5px;
}
.whatsapp {
    background-color: #22d466 !important;
}
.callus {
    background-color: #c21500 !important;
}
.quote {
    background-color: #333 !important;
}

header {
    width: 100%;
    position: absolute;
    z-index: 999;
    top: 0px;
    height: 90px;
/*
    background: rgba(255,255,255,0.9);
    box-shadow: 0 2px 3px #ccc;
*/
}
.menubar {
    color: #fff;
    background-color: #c21500;
    font-size: 33px;
    padding: 8px 10px;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    float: left;
    margin: 18px 0 0 0px;
    cursor: pointer;
    box-shadow: 1px 3px 4px #ccc;
}
.estimate {
    float: left;
    color: #333;
    margin: 24px 0 0 30px;
}
.estimate span {
    font-size: 15px;
    font-style: italic;
}
.estimate h3 {
    font-size: 22px;
    font-weight: 600;
    color: #c21500;
}
.socialtop {
    float: left;
    color: #333;
    margin: 24px 0 0 30px;
}
.socialtop span {
    font-size: 12px;
    font-style: italic;
    display: block;
    color: #999;
    padding: 0 0 5px 0px;
    text-transform: uppercase;
}
.socialtop a {
    font-size: 22px;
    font-weight: 600;
    color: #c21500;
    float: left;
    padding: 2px 8px 2px 0px;
    display: block;
}
.socialtop a img {
    width: 25px;
}
.fr {
    float: right;
}
.port {
    width: 100%;
}
/* Style the tab */
.port .tab {
  overflow: hidden;
  border-top: 1px solid #ccc;    
  border-left: 1px solid #ccc;        
  border-right: 1px solid #ccc;    
  border-bottom: 1px solid #fff;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.port .tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 28px;
  transition: 0.3s;
  font-size: 18px;
    letter-spacing: 1px;
    color: #999;
}

/* Change background color of buttons on hover */
.port .tab button:hover {
  background-color: #eee;
    color: #333;
}

/* Create an active/current tablink class */
.port .tab button.active {
  background-color: #fff;
    color: #000;
}

/* Style the tab content */
.port .tabcontent {
  display: none;
  padding: 0;
  border: 1px solid #ccc;
  border-top: none;
    background-color: #fff;
}
.faq {
    float: left;
    color: #fff;
    margin: 24px 0 0 30px;
    text-align: right;
}
.faq a {
    color: #fff;
}
.faq span {
    font-size: 15px;
    font-style: italic;
}
.faq h3 {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
}
.talk {
    float: left;
    color: #fff;
    margin: 24px 0 0 30px;
    text-align: right;
}
.talk span {
    font-size: 15px;
    font-style: italic;
}
.talk h3 {
    font-size: 22px;
    font-weight: 400;
    color: #fff;
}
.close {
    position: absolute;
    top: 5%;
    right: 3%;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}
.olsocial {
    position: absolute;
    top: 2%;
    left: 23%;
    color: #fff;
    font-size: 22px;
}
.olsocial a {
    font-size: 33px !important;
    font-weight: 600;
    color: #fff;
    float: left;
    padding: 10px;
    display: block;
}
.olsocial a:hover {
    opacity: 0.5;
}
#navoverlay {
    background: rgba(51,51,51,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 7777;
    display: none;
     backdrop-filter: blur(5px);
}
/* 75% read oversized against the link list once the panel came down to 280px */
.navlogo {
    width: 68%;
    margin: auto;
    padding: 20px 0px 0px 0px;
}
.navlogo img {
    width: 100%;
}
.services {
    display: none;
}
.partnerslogo {
    width: 100%;
}
.partnerslogo ul {
    width: auto;
}
.partnerslogo ul li {
    width: 19%;
    margin: 0.5%;
    float: left;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 1px 4px #ccc;
    text-align: center;
}
.partnerslogo ul li img {
    width: 75%;
}
.partnerslogo ul li h4 {
    font-size: 16px;
}
.company {
    display: none;
}
/* The panel used to be wider than anything in it - the longest label ("Website
   Speed Optimization") ends around 241px, so 350px left a dead column down the
   right. Sized to the content instead. */
.navigation {
    position: fixed;
    width: 280px;
    height: 100%;
    overflow-y: scroll;
    background: rgba(255,255,255, 0.9);
    z-index: 99999;
    left: -450px;
    backdrop-filter: blur(20px);
    box-shadow: 1px -4px 100px #181818;
        transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
   
   
}
/* Three levels of side padding used to stack (outer ul 25px + sub ul 15px +
   link 10px), so a submenu label began ~78px in with a wide empty gutter on
   both sides. Trimmed at the two outer levels. */
.navigation ul {
    width: auto;
    padding: 5px 12px;
    box-sizing: border-box;
}
.navigation ul li {
    width: 100%;
}
.navigation ul li a {
    width: 100%;
    padding: 10px;
    display: block;
    color: #333;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
}
.navigation ul li a:hover {
    text-decoration: none;
    color: #c21500;
    
}
.navigation ul li span {
    width: 100%;
    padding: 10px;
    display: block;
    color: #333;
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
    font-weight: 600;
}
.navigation ul li span:hover {
    color: #c21500;
    
}
.navigation ul li div {
    width: 100%;
    padding: 15px 10px 15px 10px;
    display: block;
    color: #999;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}
.navigation ul ul {
    width: auto;
    padding: 0px 4px 15px 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
    border-bottom: solid 1px rgba(0,0,0,0.1);
 
}
.navigation ul ul li {
    width: 100%;
}
.navigation ul ul li a {
    width: 100%;
    padding: 8px 10px;
    display: block;
    color: #333;
    text-transform: capitalize;
    font-size: 14px;
    border-bottom: solid 1px rgba(255,255,255,0.2);
}
.navigation ul ul li a:hover {
    color: #c21500;
    text-decoration: none;
    border-bottom: solid 1px rgba(255,255,255,0.3);
    background-color: rgba(255,255,255,0.7);
}

#mainscreen {
    width: 100%;
    height: 100%;
    background-color: #000;
}
#mainscreen video {
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 100%;
    min-width: 100%;
    min-height: 100%;
    opacity: 0.4;
    width: auto;
    height: auto;
    -ms-transform: translateX(-100%) translateY(-100%);
    -moz-transform: translateX(-100%) translateY(-100%);
    -webkit-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
}
@media screen and (max-width: 780px) {
#mainscreen {
    width: 100%;
    height: 100%;
    float: none;
    background-color: #000;
    overflow: hidden;
}    
#mainscreen video {
    position: fixed;
    z-index: 1;
    top: 100%;
    left: 100%;
    min-width: 100%;
    min-height: 100%;
    opacity: 0.5;
    width: auto;
    height: auto;
    -ms-transform: translateX(-100%) translateY(-100%);
    -moz-transform: translateX(-100%) translateY(-100%);
    -webkit-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
}
}


#imainscreen {
    width: 100%;
    height: 90px;
    background-color: #fff;
/*    border-bottom: solid 8px #f1f1f1;*/
    position: relative;
    z-index: 666;
    border-radius: 0px;
/*    background-attachment: fixed;*/
    background-position: top -150px center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.lefthead {
    width: 50%;
    float: left;
    margin: 10% 0 0 0px;
}


.mheading {
    padding: 10% 0 0 0px;
    text-align: center;
    display: none;
}
.mheadingleft {
    padding: 14% 0 0 0px;
    
}
#imainscreen h1 {
    color: #fff;
    font-size: 33px;
    box-sizing: border-box;
    margin-bottom: 5px;
    font-weight: 700;
    
    text-transform: uppercase;
}
#imainscreen h2 {
    color: #fff;
    font-size: 20px;
    line-height: 25px;
    font-weight: 400;
    box-sizing: border-box;
    letter-spacing: 2px;
}
#imainscreen ul {
    width: auto;
    margin: 25px 0 0 0px;
}
#imainscreen ul li {
    margin: 20px 0 20px 0px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}
.colm2l {
    width: 49%;
    float: left;
}
.colm2r {
    width: 49%;
    float: right;
}
@media screen and (max-width: 780px) {
#imainscreen {
    width: 100%;
    float: none;
    background-color: #000;
    height: auto;
    padding-top: 80px;
    padding-bottom: 20px;
}    

}

#imain .wbar {
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
    height: 90px;
    background-image: url('../imges/worldmap.jpg');
    background-repeat: no-repeat;
    background-position: bottom right;
    border-radius: 0 0px 0px 0px;
    background-color: #fff;
    overflow: hidden;
    z-index: 777 !important;
}
#main .wbar {
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-image: url('../imges/worldmap.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    overflow: hidden;
    z-index: 777 !important;
    border-radius: 0px 0px 40px 0px;
}
.sq_blackboxes {
    position: absolute;
    top: 15px;
    right: -15px !important;
}
.play {
    width: 100%;
    padding: 150px 0px 0 0px;
    box-sizing: border-box;
    text-align: center;
    color: #333;
    font-family: "Montserrat", sans-serif;
}
.play a {
    font-family: "Montserrat", sans-serif;
}
.play a i {
    font-size: 50px;
    color: #c21500;
}
.play a h4 {
    font-size: 20px;
    color: #666;
    font-weight: 500;
}
.webclixs {
    width: 75%;
    margin: auto;
    padding: 50px 0px;
}
.webclixs img {
    width: 100%;
}
.developer {
    width: 40%;
    margin: auto;
    padding-top: 60px;
}
.developer img {
    width: 100%;
}
.bbar {
    position: absolute;
    top: 50%;
    right: 0;
    width: 50%;
}
.subservices {
    width: 100%;
}
.subservices ul {
    width: auto;
}
.subservices ul li {
    width: 24%;
    margin: 0.5%;
    float: left;
    min-height: 575px;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0 2px 3px #ccc;
}
.subservices ul li img {
    width: 100%;
}
.subservices ul li h2 {
    font-size: 25px !important;
    margin: 0px;
    padding:  0 0 10px 0px !important;
}
.subservices ul li p {
    font-size: 16px;
    margin: 0px 0 20px 0px;
    line-height: 24px;
}
.subservices ul li .subtab {
    padding: 8px 20px;
    color: #fff;
    background-color: #000;
    font-weight: 600;
    text-transform: uppercase;
}
.breadcrumbs {
    font-size: 12px;
    text-transform: uppercase;
    color: #666;
    padding: 20px 0px;
}
.breadcrumbs a {
    font-size: 12px;
    text-transform: uppercase;
    color: #333;
}
.picr {
    float: right;
    padding-left: 15px;
    padding-bottom: 10px;
    max-width: 700px;
    width: 100%;
}
.padbox {
    padding: 25px 25px 35px 25px;
}
.maincontent {
  padding: 30px;
  box-sizing: border-box;
  position: absolute;
   width: 100%;
  transform: translateY(-50%) ;
  -webkit-transform: translateY(-50%) ;
  -moz-transform: translateY(-50%) ;
  -ms-transform: translateY(-50%) ;
  -o-transform: translateY(-50%) ;
  top: 50%;
    font-family: "Montserrat", sans-serif;
    z-index: 777;
}
.shead {
   font-size: 40px;
   display: block;
   color: #fff;
}
.bhead {
    font-size: 80px;
    display: block;
    font-weight: 800;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(to right, #c21500, #fff);
    border-image-slice: 1;
    padding-bottom: 6px;
    margin-bottom: 12px;
    color: #fff;
}
.bhead span {
   color: #c21500;
}
.maincontent h1 {
  font-size: 20px;
    font-weight: 300;
    margin: 0 0 30px 0px; 
    color: #fff;
}
.maincontent h1 span {
    font-weight: 500;
}
.mtab {
   font-size: 18px;
    background-color: #fff;
    color: #c21500;
    padding: 8px 24px;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-weight: 800;
    box-shadow: 0 1px 3px #666;
}
:hover.mtab {
    background: rgb(68,33,33);
    background: linear-gradient(90deg, rgba(68,33,33,1) 0%, rgba(126,27,27,1) 46%, rgba(255,0,0,1) 100%);
    color: #fff;

}
.mact {
   font-size: 18px;
    background: rgb(68,33,33);
    background: linear-gradient(90deg, rgba(68,33,33,1) 0%, rgba(126,27,27,1) 46%, rgba(255,0,0,1) 100%);
    color: #fff;
    
    padding: 8px 24px;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-weight: 800;
    box-shadow: 0 1px 3px #333;
}
:hover.mact {
    background: rgb(245,245,245);
    color: #c21500;

}
.fpic {
    width: 100%;
    margin-bottom: 8px;
    border-radius: 16px 16px 0px 0px;
}
#intro {
    width: 100%;
/*    min-height: 500px;*/
    background-color: #fff;
    position: relative;
    z-index: 666;
}
.wsqboxes {
    position: absolute;
    margin-left: 43.5%;
    margin-top: -25px;
}
/*
#intro .lbar {
    width: 50%;
    float: right;
    height: 530px;
    overflow: hidden;
    border-radius: 0px 0 0 0px;
    background-repeat: no-repeat;
    background-position:  center top;
    background-size: cover;
}
*/
#intro .rbar {
    width: 50%;
    float: left;
    overflow: hidden;
    padding: 50px 50px;
    border-radius: 0 40px 40px 0px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position:  center top;
    background-size: cover;
}
#intro .rbar h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 30px;
    font-weight: 600;
    font-style: italic;
    color: #333;
    line-height: 30px;
    margin: 20px 0 50px 0px;
}
#intro .rbar h2 span {
    font-size: 20px;
    display: block;
    font-weight: 400;
    padding-left: 50px;
    color: #666;
        
}
#intro .rbar ul {
    width: auto;
    padding: 25px 0px;
}
#intro .rbar ul li {
    width: 20%;
    float: left;
    padding: 10px;
    box-sizing: border-box;
}
#intro .rbar ul li img {
    width: 75%;
}
#intro .rbar ul li h3 {
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    font-family: "Montserrat", sans-serif;
    color: #333;
}
.animiconone {
    animation: 2s mupdown;
	animation-iteration-count: infinite;
}
.animicontwo {
    animation: 3s mupdown;
	animation-iteration-count: infinite;
}
.animiconthree {
    animation: 5s mupdown;
	animation-iteration-count: infinite;
}
.animiconsix {
    animation: 5s mupdown;
	animation-iteration-count: infinite;
}
@keyframes mupdown {
	0% {
		margin-top: 0px;
		opacity: 1;
	}
	50% {
		margin-top: -25px;
		opacity: 1;
	}
	100% {
		margin-top: 0px;
		opacity: 1;
	}
	
}
.shadow {
    width: 100%;
    padding: 25px 0px;
}
.shadow img {
    width: 100%;
    opacity: 0.3;
}
.mtop {
    margin-top: 50px;
}
#intro .wbarhome {
    width: 50%;
   float: right;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
    padding: 40px 80px 0px 80px;
    box-sizing: border-box;
}
#intro .wbarhome h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 30px;
    line-height: 40px;
    font-weight: 550;
    color: #333;
    padding:0px 0px 0px 0px;
}
#intro .wbarhome h4 {
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 450;
    color: #666;
    padding:0px 0px 10px 0px;
}
#intro .wbarhome h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: #c21500;
    padding: 20px 0px 20px 0px;
}
#intro .wbarhome .slogo {
    margin-top: 20px;
}
#intro .wbarhome img {
    float: right;
    max-width: 440px;
    border-radius: 40px;
    margin-left: 20px;
}
#intro .wbarhome p {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color:#333;
    margin-bottom: 20px;
    
}




#intro .wbar {
    width: 100%;
/*    float: right;*/
/*    height: 100%;*/
    background-color: #fff;
    overflow: hidden;
    padding: 40px 80px 0px 80px;
    box-sizing: border-box;
}
#intro .wbar h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 30px;
    line-height: 40px;
    font-weight: 550;
    color: #333;
    padding:0px 0px 0px 0px;
}
#intro .wbar h4 {
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 450;
    color: #666;
    padding:0px 0px 10px 0px;
}
#intro .wbar h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: #c21500;
    padding: 20px 0px 20px 0px;
}
#intro .wbar .slogo {
    margin-top: 20px;
}
#intro .wbar img {
    float: right;
    max-width: 440px;
    border-radius: 40px;
    margin-left: 20px;
}

/* Payment page QR only. The artwork is a square, transparent-background phone
   mockup, so it keeps the shared 440px width (the old landscape banner needed
   1.5x) and drops the rounded corners that would clip the cutout. */
#intro .wbar img.payqr {
    max-width: 440px;
    height: auto;
    border-radius: 0;
}
#intro .wbar p {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color:#333;
    margin-bottom: 20px;
    
}
/* Payment page gateway blocks. Each logo sits on its own line with its button
   directly underneath it, the way the live site lays them out. The image rules
   here undo the shared "#intro .wbar img" float/radius/gutter.
   overflow:hidden (not clear:both) so the block sits alongside the floated QR
   instead of being pushed below it, while still keeping its divider out from
   under the float. */
.payways {
    overflow: hidden;
}
.payway {
    padding: 5px 0 25px 0;
}
#intro .wbar .payway img {
    float: none;
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0;
    margin: 0 0 18px 0;
}
.payway .mtab {
    display: inline-block;
    border-radius: 4px;
}

.db {
    float: left !important;
    margin-right: 15px;
    margin-top: -2px;
}
.cta {
    margin-left: 0px !important;
}
.coreteam {
    width: 100%;
}
.coreteam ul {
    width: auto;
}
.coreteam ul li {
    width: 24%;
    margin: 1.5% 0.5%;
    float: left;
}
.coreteam ul li img {
    width: 90%;
    margin:  0 0 20px 0px;
}
.coreteam ul li h3 {
    color: 333;
    font-size: 700;
    font-size: 22px;
    margin:  0 0 5px 0px ;
    padding: 0px;
}
.coreteam ul li h4 {
    color: #666;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 2px;
    margin: 0px ;
}

/* ---------- Core team cards : glass hover ---------- */
.coreteam ul li {
    position: relative;
    z-index: 0;
    padding: 24px 16px 28px 16px;
    box-sizing: border-box;
    border-radius: 22px;
    transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease;
}
/* colour wash that sits behind the frosted pane */
.coreteam ul li::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 22px;
    background:
        radial-gradient(closest-side at 18% 14%, rgba(194,21,0,.55), rgba(194,21,0,0)),
        radial-gradient(closest-side at 86% 32%, rgba(255,138,0,.40), rgba(255,138,0,0)),
        radial-gradient(closest-side at 52% 94%, rgba(60,110,220,.36), rgba(60,110,220,0));
    opacity: 0;
    transform: scale(.8);
    transition: opacity .5s ease, transform .7s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
}
/* the frosted glass pane */
.coreteam ul li::after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
    box-sizing: border-box;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255,255,255,.70);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}
/* photo and captions stay above the glass */
.coreteam ul li img,
.coreteam ul li h3,
.coreteam ul li h4 {
    position: relative;
    z-index: 3;
}
.coreteam ul li img {
    width: 100%;
    transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease;
}
.coreteam ul li h3 {
    transition: color .4s ease;
}
/* pointer devices only - stops the glass sticking after a tap on touch screens */
@media (hover: hover) {
    .coreteam ul li:hover {
        transform: translateY(-10px);
        box-shadow: 0 22px 45px rgba(40,20,15,.18);
    }
    .coreteam ul li:hover::before {
        opacity: 1;
        transform: scale(1);
    }
    .coreteam ul li:hover::after {
        opacity: 1;
    }
    .coreteam ul li:hover img {
        transform: scale(1.03);
        box-shadow: 0 14px 30px rgba(40,20,15,.35);
    }
    .coreteam ul li:hover h3 {
        color: #c21500;
    }
}
@media (prefers-reduced-motion: reduce) {
    .coreteam ul li,
    .coreteam ul li::before,
    .coreteam ul li::after,
    .coreteam ul li img,
    .coreteam ul li h3 {
        transition: none;
    }
    .coreteam ul li:hover {
        transform: none;
    }
    .coreteam ul li:hover img {
        transform: none;
    }
}
.more {
    margin: 40px 0 0 0;
    text-align: center;
}
.redtab {
    font-size: 18px;
    background-color: #c21500;
    color: #fff; 
    padding: 7px 20px;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    border: solid 1px #fff;
}
 
:hover.redtab {
    background-color: #fff;
    color: #c21500;
    border: solid 1px #c21500;
}
.rsqboxes {
    position: absolute;
    right: 25px;
    margin-top: -100px;
}
.govlogo {
    max-width: 300px;
}
.stats {
    width: 100%;
    background-color: #fff;
    padding: 50px 0px 50px 0px;
    position: relative;
    z-index: 777;
}
.stats h2{
    font-size: 18px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    padding: 0px 5px 30px 5px;
    }

.stats h2 span{
    font-size: 30px;
    font-family: "Montserrat", sans-serif;
    display: block;
    color: #c21500;
    font-weight: 300;
    line-height: 40px;
    text-transform: none;
}
.stats h2 span strong{
    font-weight: 600;
}
.stats ul {
    width: auto;
}
.stats ul li {
    width: 24%;
    margin: 0.5%;
    float: left;
    padding: 25px;
    box-sizing: border-box;
    border-radius: 16px;
    
    color: #000;
    transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
}
.stats ul li:hover {
   box-shadow: 0 0px 4px #ccc;
    transform: scale(1.1);
    background-color: #fff;
}
.reversestatbox {
    background-color: #d0000d !Important;
    
}
.reversestatbox h3 {
    color: #fff !Important;
}
.reversestatbox h4 {
    color: #fff !Important;
}
.stats ul li img {
    height: 150px;
    margin-left: -20px;
}
.stats ul li h3 {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -1px;
    color: #333;
    margin-bottom: 10px;
}
.stats ul li h4 {
    font-size: 20px;
    font-weight: 400;
    color: #000;
    margin-bottom: 5px;
}
#ibody {
    width: 100%;
    background-color: #f7f7f7;
    min-height: 200px;
    padding:  0 0 50px 0px;
    position: relative;
    z-index: 777;
}

.midcontent h2{
    font-size: 20px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    padding: 30px 5px 30px 5px;
    }

.midcontent h2 span{
    font-size: 33px;
    font-family: "Montserrat", sans-serif;
    display: block;
    color: #c21500;
    font-weight: 700;
    line-height: 44px;
    text-transform: none;
}
.midcontent h3{
    font-size: 20px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    padding: 0px 0px 10px 0px;
    }
.midcontent h4{
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    padding: 0px 0px 10px 0px;
    }
.midcontent p{
    font-size: 16px;
    padding: 0px 0px 20px 0px;
    line-height: 26px;
    }

.imidcontent h2{
    font-size: 20px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    padding: 30px 5px 30px 5px;
    }

.imidcontent h2 span{
    font-size: 33px;
    font-family: "Montserrat", sans-serif;
    display: block;
    color: #c21500;
    font-weight: 700;
    line-height: 44px;
    text-transform: none;
}
.imidcontent h3{
    font-size: 20px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    padding: 0px 0px 10px 0px;
    }
.imidcontent h4{
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    padding: 0px 0px 10px 0px;
    }
.imidcontent p{
    font-size: 14px;
    padding: 0px 0px 20px 0px;
    line-height: 26px;
    }
.imidcontent ul{
    width: auto;
    margin:  0 0 0 10px;
    }
.imidcontent ul li{
    list-style: disc;
    margin:  5px 0 5px 10px;
    font-size: 14px;
    }
.agreementModalBody {
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    color: #333 !important;
    overflow-y: scroll;
    height: 450px;
}
.agreementModalBody p {
    color: #333 !important;
}
.srpic {
    width: 99px;
    float: right;
    border-radius: 200px;
}
.contactvia {
    width: 100%;
}
.contactvia ul {
    width: auto;
}
.contactvia ul li {
    width: 31.2%;
    float: left;
    margin: 1%;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px #ccc;
    border-radius: 12px;
}
.contactvia ul li p {
   margin: 6px 0 0 0px;
    padding: 0px;
}
.contactvia ul li p a {
   font-size: 18px;
}
.contactvia ul li p span {
   font-size: 18px;
}
.features {
    width: 100%;
    margin:  0 0 40px 0px;
}
.features ul {
    width: auto;
}
.features ul li {
    width: 15.5%;
    float: left;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    margin: 1.5% 0.5%;
    text-align: center;
}
.qafaqser {
    width: 100%;
    margin: 25px 0px;
}
.qafaqser .accordion {
  background-image: linear-gradient(145deg, rgba(194, 21, 0, 0.6) 0%, #410801 100%);
  background-repeat: repeat-x;
  color: #fff;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
 
  transition: 0.4s;
    font-size: 16px;
    font-weight: 600;
}

.qafaqser .active, .accordion:hover {
  background-color: #ccc;
}
.qafaqser .accordion:after {
  content: '\002B';
  color: #fff;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.qafaqser .active:after {
  content: "\2212";
}
.qafaqser .panel {
  padding: 0 0px;
  margin: 2px 0px 6px 0px;
  background-color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  box-shadow: 0 2px 3px #ccc;
}

.qafaqser .padbox {
    padding: 14px 20px 0px 20px;
    box-sizing: border-box;
}
.rpic {
 float: right;
  max-width: 440px;
  border-radius: 40px;
  margin-left: 20px;
     margin-top: 3%;
}
.lpic {
    float: left;
    max-width: 440px;
  border-radius: 40px;
  margin-right: 20px;
  
    margin-top: 3%;
}
.lpic.pbot {
    padding-bottom: 12% !Important;
}
.mlr {
    margin-left: 5%;
    margin-right: 10%;
}
.pround {
    border-radius: 16px;
}
.pshadow {
    box-shadow: 0 3px 30px #666;
}
.tcenter {
    text-align: center;
}
.stands {
    width: 100%;
    margin: auto;
}
.stands ul {
    width: auto;
}
.stands ul li {
    width: 100%;
    list-style: none;
    text-align: center;
}
.stands ul li img {
    width: 90%;
    border-radius: 16px;
    margin-bottom: 12px;
}
.stands ul li h3 {
    margin: 0 0 10px 0px !important;
    padding: 0px;
    font-size: 22px;
}
.stands ul li p {
    font-size: 15px;
    line-height: 25px;
}
.whyus {
    width: 60%;
}
.whyus ul {
    width: auto;
}
.whyus ul li {
    list-style: disc;
    margin:  10px 0 10px 20px;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
}
.colm3 {
    width: 32.2% !important;
    float: left;
    margin: 0.5%;
    text-align: center;
}
.colm4 {
    width: 24% !important;
    float: left;
    margin: 0.5%;
    text-align: center;
}
.icongraph {
    width: 50%;
}
.circlepic {
    width: 50%;
    border-radius: 250px;
}
.mzero {
    margin: 0px !important;
    padding: 0px !important;
}
.mbot {
   margin: 0px 0 10px 0px !important;
}
.mtop {
    margin: 10px 0 0px 0px !important;
}
.ptop {
    padding-top: 50px !important;
}
#wbar {
    width: 100%;
    background-color: #fff;
    min-height: 200px;
    padding:  0 0 50px 0px;
    position: relative;
    z-index: 666;
}
.counter {
    font-style: normal;
}
#homebody {
    width: 100%;
    background-image: url(../imges/topbg.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    background-color: #f7f7f7;
      position: relative;
    z-index: 777;
    padding:  0 0 75px 0px;
}

#homebody .midcontent h2{
    font-size: 20px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    padding: 50px 5px 30px 5px;
    }

#homebody .midcontent h2 span{
    font-size: 44px;
    font-family: "Montserrat", sans-serif;
    display: block;
    color: #c21500;
    font-weight: 300;
    line-height: 60px;
    text-transform: none;
}
#homebody .midcontent h2 span strong{
    font-weight: 600;
}
#homebody .midcontent ul{
    width:100%;
    margin: 0px;
    
}
 
#homebody .midcontent ul li{
    width: 24%;
    margin:18px 0.5% 15px 0.5%;
    float: left;
    box-shadow: 0px 2px 3px #ccc;
    
    box-sizing: border-box;
    border-radius: 15px;
    transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    background-color: #fff;
}
#homebody .midcontent ul li:hover{
    margin-top: -25px;
    box-shadow: 0px 4px 30px #ccc;
}
#homebody .midcontent ul li div {
    padding: 15px;
    min-height: 165px;
}

#homebody .midcontent  h3{
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 20px;
}
#homebody .midcontent  p{
    font-weight: 100;
    font-size: 13px;
    color: #333;
    padding: 0px 5px 20px 5px;
    line-height: 17px;
    letter-spacing: 0.5px;
    min-height: 60px;
    text-align: left;
}

#homebody .midcontent .red{
   float: right;
   padding: 8px;
}

#homebody .midcontent .web{
   float:left;
}
#homebody .midcontent .weblink{
   float:left;
   color: #333;
   padding: 7px 12px;
   font-family: "Montserrat", sans-serif;
   font-size: 16px;
   font-weight: 700;
   text-transform: uppercase;
}




#homebody .midcontent ul li .down{
    width: 18%;
    margin:18px 0px 15px 15px;
    float: left;
    border: 1px solid #666;
    padding: 5px;
    border-radius: 15px;
    
    
/*    display: inline-block;*/
}

#homebody .midcontent .down
{
    margin-top: 50px !important;
}
#homebody .midcontent .down:hover
{
    margin-top: -10px !important;
}
#homebody .midcontent  h3 .down{
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #fff;
}
#homebody .midcontent  p .down{
    font-family: "Montserrat", sans-serif;
    font-weight: 100;
    font-size: 14px;
    color: #fff;
    padding: 20px 5px 20px 5px;
    line-height: 20px;
}



.govtabout {
    float:none !Important; 
    width: 260px !Important; 
    margin-left: -10px !Important;
}

#ihomebody {
    width: 100%;
    position: relative;
    z-index: 777;
    padding:  0 0 75px 0px;
}

#ihomebody .midcontent h2{
    font-size: 20px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    padding: 50px 5px 30px 5px;
    }

#ihomebody .midcontent h2 span{
    font-size: 33px;
    font-family: "Montserrat", sans-serif;
    display: block;
    color: #c21500;
    font-weight: 600;
    line-height: 60px;
    text-transform: none;
}
#ihomebody .midcontent h2 span strong{
    font-weight: 600;
}
#ihomebody .midcontent ul{
    width:100%;
    margin: 0px;
    
}
 
#ihomebody .midcontent ul li{
    width: 24%;
    margin:18px 0.5% 15px 0.5%;
    float: left;
    box-shadow: 0px 2px 3px #ccc;
    
    box-sizing: border-box;
    border-radius: 15px;
    transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    background-color: #fff;
}
#ihomebody .midcontent ul li:hover{
    transform: scale(1.1);
    box-shadow: 0px 4px 30px #ccc;
}
#ihomebody .midcontent ul li div {
    padding: 15px;
    min-height: 165px;
}

#ihomebody .midcontent  h3{
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 20px;
}
#ihomebody .midcontent  p{
    font-weight: 100;
    font-size: 13px;
    color: #333;
    padding: 0px 5px 20px 5px;
    line-height: 17px;
    letter-spacing: 0.5px;
    min-height: 60px;
    text-align: left;
}

#ihomebody .midcontent .red{
   float: right;
   padding: 8px;
}

#ihomebody .midcontent .web{
   float:left;
}
#ihomebody .midcontent .weblink{
   float:left;
   color: #333;
   padding: 7px 12px;
   font-family: "Montserrat", sans-serif;
   font-size: 16px;
   font-weight: 700;
   text-transform: uppercase;
}







.hline {
    border-bottom: solid 1px #ccc;
    margin-bottom: 20px;
}
.lowbar {
    position: relative;
    left: 0;

}
.ytvidframe {
    width: 100%;
    margin: 0px auto 20px auto;
   
   text-align: center;
}
/* 4:3 box. The old fixed 625px height made the frame taller than it was wide,
   so a 16:9 video sat as a thin strip with ~233px of black padding above and
   below it. aspect-ratio keeps the shape correct at every column width. */
.ytf {
    width: 95%;
    aspect-ratio: 4 / 3;
    height: auto;
    display: inline-block;
    margin: 0px 3%;
     box-shadow: 0 5px 25px #000;
}
.testi {
    width: 100%;
    background-color: #f7f7f7;
    padding: 50px 0px 50px 0px;
    position: relative;
    z-index: 777;
}
.testi h2{
    font-size: 20px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    padding: 0px 5px 25px 5px;
    text-align: center;
    }

.testi h2 span{
    font-size: 44px;
    font-family: "Montserrat", sans-serif;
    display: block;
    color: #c21500;
    font-weight: 700;
    line-height: 60px;
    text-transform: none;
}
.testi ul{
    width: auto;
}
.testi ul li {
    width: 98%;
/*    float: left;*/
    margin: 1%;
}
.testi ul li p {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 16px;
    background-color: #fff;
    height: 160px;
    padding: 25px;
    box-sizing: border-box;
    box-shadow: 0 1px 4px #ccc;
}
.testi ul li img {
    width: 100px;
    border-radius: 200px;
    float: right;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: -35px;
    background-color: #fff;
    padding: 5px;
    box-shadow: 0 2px 3px #ccc;
    box-sizing: border-box;
/*
    filter: blur(2px);
  -webkit-filter: blur(2px);
*/
    transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
}
.testi ul li h4 {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
    font-weight: 400;
    text-align: right;
}
.testi ul li h4 span {
    display: block;
    font-weight: 600;
}

.itesti {
    width: 100%;
    background-color: #f7f7f7;
    padding: 50px 0px 50px 0px;
    position: relative;
    z-index: 777;
}
.itesti h2{
    font-size: 20px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    padding: 0px 5px 5px 5px;
    }

.itesti h2 span{
    font-size: 44px;
    font-family: "Montserrat", sans-serif;
    display: block;
    color: #c21500;
    font-weight: 700;
    line-height: 60px;
    text-transform: none;
}
.itesti ul{
    width: auto;
}
.itesti ul li {
    width: 49%;
    float: left;
    margin: 0.5%;
}
.itesti ul li p {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 16px;
    background-color: #fff;
    height: 160px;
    padding: 25px;
    box-sizing: border-box;
    box-shadow: 0 1px 4px #ccc;
}
.itesti ul li img {
    width: 100px;
    border-radius: 200px;
    float: right;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: -35px;
    background-color: #fff;
    padding: 5px;
    box-shadow: 0 2px 3px #ccc;
    box-sizing: border-box;
/*
    filter: blur(2px);
  -webkit-filter: blur(2px);
*/
    transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
}
.itesti ul li h4 {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
    font-weight: 400;
    text-align: right;
}
.itesti ul li h4 span {
    display: block;
    font-weight: 600;
}

.itechnology {
    width: 100%;
    background-color: #f1f1f1;
    padding: 50px 0px;
}
.itechnology h2{
    font-size: 20px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    padding: 0px 5px 30px 5px;
    }

.itechnology h2 span{
    font-size: 33px;
    font-family: "Montserrat", sans-serif;
    display: block;
    color: #c21500;
    font-weight: 700;
    line-height: 44px;
    text-transform: none;
}
.itechnology ul{
    width: auto;
}
.itechnology ul li {
    width: 10%;
    float: left;
    text-align: center;
}
.itechnology ul li img {
    width: 100%;
/*
    filter: blur(2px);
  -webkit-filter: blur(2px);
*/
    transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
}
.itechnology ul li img:hover {
    transform: scale(1.2);
    box-shadow: 0px 0px 30px #ccc;
}
.clients {
    width: 100%;
    background-color: #eee;
    padding: 50px 0px;
    position: relative;
    z-index: 777;
}
.clients h2{
    font-size: 20px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    padding: 0px 5px 30px 5px;
    }
.clients h2 span{
    font-size: 44px;
    font-family: "Montserrat", sans-serif;
    display: block;
    color: #c21500;
    font-weight: 700;
    line-height: 60px;
    text-transform: none;
}
.clients ul{
    width: auto;
}
.clients ul li {
    width: 11.2%;
    float: left;
    text-align: center;
    margin: 1.5% 1.5% 1.5% 1.5%;
}
.clients ul li img {
    width: 100%;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
    opacity: 1;
    border-radius: 12px;
    box-shadow: 0 2px 3px #ccc;
  transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.clients ul li img:hover {
    box-shadow: 0 1px 0px #ccc;
    transform: scale(0.9);
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
    opacity: 0.7;
}

.happyclients {
    width: 100%;
}

.happyclients ul{
    width: auto;
}
.happyclients ul li {
  width: 11.2%;
  flex: 0 0 11.2%;
  float: none;
  text-align: center;
  margin: 1.5% 1.5% 1.5% 1.5%;
}
.happyclients ul li img {
    width: 100%;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
    opacity: 1;
    border-radius: 12px;
    box-shadow: 0 2px 3px #ccc;
  transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.happyclients .hc-cat {
    width: 100%;
    clear: both;
    font-family: "Montserrat", sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #333;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 30px 0 25px 0;
    padding-bottom: 12px;
    position: relative;
}
.happyclients .hc-cat:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 70px;
    height: 3px;
    margin-left: -35px;
    background: #c21500;
}
/* Flex rather than floats: a logo even a few px taller than its neighbours
   used to snag the floats below it and leave a hole in the wall. */
.happyclients ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow: hidden;
}

.happyclients ul li img:hover {
    box-shadow: 0 1px 0px #ccc;
    transform: scale(0.9);
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
    opacity: 0.7;
}

/* Client wall tabs. Both groups sit in the markup with one tab and one panel
   already marked on, so the Indian wall is visible before the script runs -
   and stays visible if it never does. */
.hc-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 10px 0 35px 0;
}

.hc-tab {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 13px 30px;
    border-radius: 999px;
    border: solid 1px #e3e3e3;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.35s ease;
}

.hc-tab:hover {
    border-color: #c21500;
    color: #c21500;
    transform: translateY(-2px);
}

.hc-tab.hc-tab-on {
    background: #c21500;
    border-color: #c21500;
    color: #fff;
    box-shadow: 0 12px 26px rgba(194, 21, 0, 0.28);
}

.hc-panel {
    display: none;
}

.hc-panel.hc-panel-on {
    display: block;
}

#owork{
    width: 100%;
    position: relative;
    margin-top: -50px;
    background-image: url('../imges/particlesbg.jpg');
    background-repeat: no-repeat;
    background-position: center right;
}
    

#owork  h2{
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    margin: 0px;
    
}

#owork h2 span{
    font-size: 55px;
    font-family: "Montserrat", sans-serif;
    display: block;
    color: #c21500;
    text-align: center;
    font-weight: 700;
    line-height: 60px;
    text-transform: none;
}





#media {
/*
    background-image: url('../imges/layer.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    min-height: 600px;
*/
    width: 100%;
    position: relative;
    padding-bottom: 10px;
    background-color: #8a1919;
    z-index: 777;
    padding-top: 10px;
    
}
.home #media {
/*
    background-image: url('../imges/layer.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    min-height: 600px;
*/
    width: 100%;
    position: fixed;
    bottom: 0;
    padding-bottom: 10px;
    background-color: #8a1919;
    z-index: 777;
    padding-top: 10px;
    
}
#media h2{
    font-size: 15px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    margin: 0px 10px 0px 0px;
    padding-top: 5px;
    padding-bottom: 4px;
    float: left;
    color: #fff;
    width: 100px;
}

#media h2 span{
    font-weight: 900;
    display: block;
}
.scroller {
    float: left;
    width: 90%;
}
#scroller {
    width: 100%;
}
#scroller ul {
   width: auto;
}
/*
#scroller ul li {
    width: 98%;
    text-align: center;
    float: left;
    padding-top: 50px;
}
#scroller ul li img {
    width: 75%;
}
*/
.requirement {
    background: rgba(0,0,0,0.9);
    width: 100%;
    padding: 75px 0px;
    text-align: center;
}
.requirement h2 {
    color: #fff;
    font-size: 33px;
    font-weight: 600;
    letter-spacing: -1px;
    margin: 0 0 10px 0px;
}
.requirement h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: normal;
    margin: 0 0 30px 0px;
}
.requirement .link {
  padding: 8px 40px;
  color: #c21500;
  background-color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 20px;
}
.requirement .link:hover {
  color: #fff;
  background-color: #c21500;
}
.req {
    position: relative;
    z-index: 666;
    border: dashed 1px #ccc;
    padding: 25px 25px 50px 25px;
    box-sizing: border-box;
}
#quotef {
    cursor: pointer;
}
#requirement {
    cursor: pointer;
}
#contactf {
    cursor: pointer;
}
#close {  
  position: absolute;
  top: -15px;
  right: -25px;
  cursor: pointer;
  color: #333;
  background:  #fff;
  padding: 8px 10px 8px 10px;
  font-size: 15px;
  border-radius: 2px;
}
#overlayscreen {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  z-index: 1000000;
}
#popup {
z-index: 99999999;
 position: fixed;
 border-radius: 16px 16px 0 0px;
 padding: 20px;
 box-sizing: border-box;
 background-color: #c21500;
 box-shadow: 0 2px 40px #000;
 width: 40%;
 transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
left: 50%;
top: 50%;  
display: none;
   
}
#agreementModalBody {
z-index: 99999999;
 position: fixed;
 border-radius: 16px 16px 0 0px;
 padding: 20px;
 box-sizing: border-box;
 background-color: #eee;
 box-shadow: 0 2px 40px #000;
 width: 800px;
 transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
left: 50%;
top: 50%;  
display: none;  
}
#agreementModalBody h2 {
  font-size: 90px;
  text-transform: uppercase;
  margin-top: 0px;
  color: #fff;
  padding:  0px;
  font-family:Open Sans,'Helvetica Neue',Arial,sans-serif;
  font-weight: 900;
  letter-spacing: -2px;
}
#agreementModalBody h2 span {
    color: #8cc748;
    font-size: 22px;
    text-decoration: none;
    display: block;
    font-weight: 600;
    letter-spacing: normal;
}

#agreementModalBody h3 {
  font-size: 22px;
  margin-top: 10px;
  margin-bottom: 10px;
 
    color: #d11313;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
}
#agreementModalBody h4 {
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 10px;
    color: #fff;
    font-weight: 500;
    
    
}
#agreementModalBody p {
     color: #333;
    font-size: 16px;
    line-height: 26px;
    margin: 0 0 15px 0px;
    display: block;
}

#popup h2 {
  font-size: 90px;
  text-transform: uppercase;
  margin-top: 0px;
  color: #fff;
  padding:  0px;
  font-family:Open Sans,'Helvetica Neue',Arial,sans-serif;
  font-weight: 900;
  letter-spacing: -2px;
}
#popup h2 span {
    color: #8cc748;
    font-size: 22px;
    text-decoration: none;
    display: block;
    font-weight: 600;
    letter-spacing: normal;
}

#popup h3 {
  font-size: 22px;
  margin-top: 10px;
  margin-bottom: 10px;
 
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
}
#popup h4 {
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 10px;
    color: #fff;
    font-weight: 500;
    
    
}
#popup p {
     color: #fff;
    font-size: 14px;
    line-height: 18px;
    margin: 0 0 15px 0px;
    display: block;
}
#popup span {
     color: rgba(255,255,255,0.7);
    font-size: 14px;
    margin: 0 0 15px 0px;
    display: block;
}
#popup h3 {
     color: #fff;
    font-size: 25px;
    letter-spacing: -0.5px;
    margin: 0 0 15px 0px;
}
#popup form {
     width: 100%;
}
#popup form input[type="text"] {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    color: #000;
    font-size: 14px;
    outline: none;
    border: solid 1px #ddd;
    margin-bottom: 10px;
}
#popup form input[type="text"]:focus {
     background-color: #eee;
}
#popup form input[type="email"] {
     width: 100%;
    padding: 8px;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    color: #000;
    font-size: 14px;
    outline: none;
    border: solid 1px #ddd;
    margin-bottom: 10px;
}
#popup form input[type="email"]:focus {
     background-color: #eee;
}
#popup form input[type="tel"] {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    color: #000;
    font-size: 14px;
    outline: none;
    border: solid 1px #ddd;
    margin-bottom: 10px;
}
#popup form input[type="tel"]:focus {
     background-color: #eee;
}
#popup form textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    color: #000;
    font-size: 14px;
    outline: none;
    border: solid 1px #ddd;
    margin-bottom: 10px;
    resize: none;
}
#popup form textarea:focus {
    background-color: #eee;
}
#popup form button {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    color: #fff;
    background-color: #7e0101;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    outline: none;
    border: solid 1px #a90e0e;
    box-shadow: 0 1px 2px #000;
    margin-bottom: 10px;
    cursor: pointer;
}
@media screen and (max-width: 950px) {
#popup {

  z-index: 99999999;
 padding: 20px;
  box-sizing: border-box;
 width: 90%;
 transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
left: 50%;
top: 50%;  
}    
#agreementModalBody {
 width: 90%;
}
}
.fGroup {
    width: 100%;
    margin-bottom: 10px;
}
.fGroup .ft {
    margin-top: 10px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  border: solid 1px #ddd;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: #333;
    background-color: #fff;
    outline: none;
}
.fGroup .fta {
    margin-top: 10px;
  padding:10px;
  width: 100%;
  box-sizing: border-box;
  border: solid 1px #ddd;
  box-sizing: border-box;
  resize: none;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: #333;
     background-color: #fff;
    outline: none;
}
.fGroup .ftb {
  padding: 10px 20px;
  cursor: pointer;
  box-sizing: border-box;
  border: solid 1px #c21500;
  background-color: #c21500;
  color: #fff;
    font-family: "Open Sans", sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
}
.colm2 {
    width: 49%;
    margin: 0.5%;
    float: left;
}

.colm1 {
    width: 99%;
    margin: 0.5%;
}
#fh5co-main {
  padding-top: 5em;
}

#fh5co-board .item {
  margin: 20px 10px;
  background: #fff;
  
  overflow: hidden;
  -webkit-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.4);
}
#fh5co-board .item a {
  display: block;
}
#fh5co-board .item .fh5co-desc {
  padding: 20px;
  float: left;
  line-height: 24px;
}
#fh5co-board .item .fh5co-item-title {
  font-family: "Montserrat", arial, sans-serif;
  font-size: 17px;
  line-height: 24px;
  margin: 0;
  padding: 0;
}
#fh5co-board .item img {
  width: 100%;
    height: 260px;
    object-fit: cover;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
    object-position: 0% 0%;
}
#fh5co-board .item .fh5co-board-img {
  overflow: hidden;
}
#fh5co-board .item .image-popup:hover img {
  opacity: .5;
}

.js .animate-box {
  opacity: 0;
}

pre {
  background: #e9e9e9;
  border: 1px solid #ccc;
}
footer {
    width: 100%;
    background-color: #fff;
/*
    background: rgb(158,22,6);
    background: linear-gradient(180deg, rgba(158,22,6,1) 0%, rgba(0,0,0,1) 64%); 
*/
    padding:  0 0 50px 0px;
    position: relative;
    z-index: 666;
    border-top: solid 1px #ccc;
}
footer h2{
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 30px;
    padding:40px 0px;
    text-transform: uppercase;
    color: #9e1606;
}
footer .ig {
    width: 100%;
}
footer .ig ul {
    width: 90%;
    margin: auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}
/* Flex instead of 7 x 14.28% floats - on narrower laptops (~1280-1366px) the
   rounded-up percentages overflowed the row and pushed the last logos down. */
footer .ig ul li {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    float: none;
}
footer .ig ul li img {
    width: 90%;
    max-width: 100%;
    max-height: 55px;
    object-fit: contain;
}
/* Shiprocket mark reads high against the other partner logos - nudge it down on desktop only. */
@media screen and (min-width: 781px) {
    footer .ig ul li img[src*="shiprocket"] {
        position: relative;
        top: 3px;
    }
}
footer .menu ul{
    float: left;
    width: 20%;
}
footer .menu h5{
    color: #666;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 18px;
    padding-top: 50px;
    margin-bottom: 15px;
    text-transform: uppercase;
 
}

footer .menu ul li {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 35px;
}
footer .menu ul li a {
    color: #000;
}
footer .menu ul li a:hover {
    color: #9e1606;
}

.otherlinks {
   float: left;
    padding-top: 50px;
    color: #333;
    font-family: "Open Sans", sans-serif;
	font-size:15px;
    padding-bottom: 10px;
}
.otherlinks a {
    font-family: "Montserrat", sans-serif !important;
    font-size: 16px !important;
    text-transform: uppercase;
    font-weight: 600 !important;
}
.botsocial {
    float: right;
    color: #fff;
    font-family: "Open Sans", sans-serif;
	font-size:15px;
  
}
.botsocial a {
    font-size: 25px !important;
    font-weight: 600;
    color: #c21500;
    float: left;
    padding: 2px 15px 2px 0px;
    display: block;
}
.botsocial a img {
    width: 25px;
}
.botsocial a:hover {
    opacity: 0.5;
}
footer .sec .copyright{
    padding: 15px 0px 0px 0px;
    color: #333;
    font-family: "Open Sans", sans-serif;
	font-size:13px;
    letter-spacing: 0.5px;
    float: left;
    line-height: 22px;
}
footer .sec a{
    color: #333;
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
	font-size:13px;
    letter-spacing: 0.5px;
}

.last {
    width:100%;
    background: #8a1919;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    position: relative;
    z-index: 666;
}
.home .last {
    width:100%;
    background: #8a1919;
    padding-top: 20px;
    padding-bottom: 70px;
    text-align: center;
    position: relative;
    z-index: 666;
}
.last p{
    font-size: 12px;
    line-height: 18px;
    font-weight: 100;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.5px;
}
.mobview {
    display: none;
} 
@media screen and (max-width: 780px) { 
.mobview {
    display: block;
}    
#imain .wbar {
    width: 65%;
    position: absolute;
    top: 0;
    left: 0;
    height: 90px;
    background-image: url('../imges/worldmap.jpg');
    background-repeat: no-repeat;
    background-position: bottom right;
    border-radius: 0 0px 22px 0px;
    background-color: #fff;
    overflow: hidden;
    z-index: 777 !important;
}    
.home .toplogo {
    display: block;
    float: left;
}    
.menubar {
  color: #fff;
  background-color: #c21500;
  font-size: 33px;
  padding: 8px 10px;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  float: right;
  margin: 20px 0px 0 0px;
  cursor: pointer;
  box-shadow: 1px 3px 4px #333;
}    
.navigation {
  width: 280px;
 
}    
.quickaccess a {
  font-size: 20px;
  background-color: #000;
  color: #fff;
  padding: 5px 5px;
  box-sizing: border-box;
  border-radius: 16px 0px 0px 16px;
  box-shadow: 0 1px 2px #333;
  display: block;
  margin-bottom: 5px;
}    
.estimate {
  float: none;
  color: #333;
  margin: 17px 0 0 30px;
    display: none;
}    
.socialtop {
  float: left;
  color: #333;
  margin: 25px 0 0 0px;
  display: none;
      
}    
.fr {
  float: left;
  display: none;
}    

.faq {
  float: none;
  color: #fff;
  margin: 17px 0 0 0px;
  text-align: center;

}    
.talk {
  float: none;
  color: #fff;
  margin: 17px 0 0 0px;
  text-align: center;
}     
.maincontent {
  padding: 25px;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  bottom: 2%;
}    
#main .wbar {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  height: auto;
  background-image: url('../imges/worldmap.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #fff;
  overflow: hidden;
  z-index: 777 !important;
    display: none;
}
#intro .lbar {
  width: 100%;
  float: none;
  height: 430px;
  border-radius: 0px 0px 20px 20px;
    margin-bottom: 30px;
} 
#ibody {
  text-align: left;
    padding: 5%;
    box-sizing: border-box;
}    
.mact {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;    
}    
.mtab {
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 8px;  
   
}    
.itesti ul li {
  width: 100%;
  float: none;
  margin: 2.5% 0px; 
}    
.coreteam ul li {
  width: 100%;
  margin: 1.5% 0.0%;
  float: none;
  padding: 0px 0px 20px 0px;
}    
.happyclients ul li {
  width: 49%;
  flex: 0 0 49%;
  float: left;
  text-align: center;
  margin: 0.5% 0.5% 0.3% 0.5%;
}    
#ihomebody .midcontent ul li {
  width: 90%;
  margin: 18px auto;
  float: none;
  box-shadow: 0px 2px 3px #ccc;
  box-sizing: border-box;
  border-radius: 15px;
  transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  background-color: #fff;
}    
.lpic {
  float: none;
  width: 100%;
  margin-right: 0%;
  margin-top: 15%;
}    
.midcontent h2 span {
  font-size: 22px;
  line-height: 33px;
}    
.midcontent h2 {
  font-size: 15px;
  padding: 30px 5px 30px 5px;
}    
.midcontent h3 {
  font-size: 16px;
}    
.features ul li {
  width: 49% !Important;
  float: left;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  margin: 1.5% 0.5%;
  text-align: center;
} 
.features ul li img {
  width: 75% !Important;
  
}    
.colm3 {
  width: 100% !Important;
  float: none;
  margin: 2.5% 0px;
}     
.colm4 {
  width: 100% !Important;
  float: none;
  margin: 2.5% 0px;
}    
.colm2 {
  width: 100% !Important;
  margin: 2.5% 0px;
  float: none;
}    
#wbar {
  text-align: center;
}    
.qafaqser .accordion {
  padding: 10px;
  font-size: 14px;
  font-weight: 400;
}    
.midcontent h4 {
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  padding: 0px 0px 10px 0px;
}    
.rsqboxes {
  position: absolute;
  right: 25px;
  margin-top: -10px;
}    
.bbar {
  position: absolute;
  top: 50%;
  right: 0%;
  width: 100%;
}    
.shead {
  font-size: 20px;
  display: block;
  color: #fff;
}    
.bhead {
  font-size: 40px;
  display: block;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(to right, #c21500, #fff);
    border-image-slice: 100%;
  border-image-slice: 1;
  padding-bottom: 6px;
  margin-bottom: 12px;
  color: #fff;
}       
#intro .rbar {
  width: 100%;
  float: none;
/*  height: 430;*/
  overflow: hidden;
  padding: 25px;
  border-radius: 0px 0px 20px 20px;
  margin-bottom: 25px;
}    
    
#intro .wbar {
  width: 100%;
  float: none;
  height: auto;
  background-color: #fff;
  overflow: hidden;
  padding: 0px 25px 25px 25px;
  box-sizing: border-box;
}    

/* The payment QR is wider than a phone, and .wbar clips its overflow - left
   alone the float pushes half the code off-screen. Cap it to the column here;
   the desktop rule keeps the enlarged width. */
#intro .wbar img.payqr {
  float: none;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 20px 0;
}
    
#intro .wbarhome {
  width: 100%;
  float: none;
  height: auto;
  background-color: #fff;
  overflow: hidden;
  padding: 0px 25px 30px 25px;
  box-sizing: border-box;
}    
#intro .wbarhome h2 {
  font-size: 22px;
  line-height: 32px;
  padding: 0px 0px 0px 0px;
}    
#intro .wbarhome img {
  float: none;
  max-width: 100%;
  height: auto;
  border-radius: 0px;
  margin-left: 0px;
}    
#intro .wbarhome .slogo {
  display: inline-block;
  width: 110px;
  vertical-align: middle;
  margin: 0px 0px 0px 6px;
}    
#intro .wbarhome p {
  font-size: 15px;
  line-height: 25px;
  margin-bottom: 15px;
}    
#intro .wbarhome .redtab {
  display: inline-block;
  font-size: 15px;
  padding: 9px 18px;
  margin-top: 5px;
}    
#intro .wbarhome h3 {
  font-size: 17px;
  line-height: 27px;
  padding: 25px 0px 15px 0px;
}    
#intro .wbarhome .govlogo {
  display: block;
  width: 100%;
  max-width: 240px;
}    
#intro .wbarhome .rsqboxes {
  display: none;
}    
#intro .rbar h2 {
  font-size: 25px;
  color: #333;
    text-align: center;
    margin: 20px 0 0 0px;
}    
#intro .wbar h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 550;
  color: #333;
  padding: 0px 0px 0px 0px;
}    
#intro .rbar h2 span {
  font-size: 30px;
  display: block;
  font-weight: 600;
  padding-left: 0px;
}    
#intro .rbar ul li {
  width: 50% !important;
  float: left;
   height: 150px;
  padding: 10px;
  box-sizing: border-box;
    text-align: center;
}    
#intro .rbar ul li h3 {
  font-size: 16px;
 
}    
#intro .rbar ul li img {
  width: 50%;
}  
.coreteam ul li img {
  width: 100%;
  margin: 0 0 20px 0px;
}    
.whyus {
  width: 100%;
}    
.whyus ul li {
  list-style: disc;
  margin: 10px 0 10px 20px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}    
.rpic {
  float: none;
  width: 100%;
  margin-left: 0%;
  margin-top: 0%;
}    
.wsqboxes {
  right: 5%;
  margin-top: -25px;
}    
.shadow {
  display: none;
}    
@keyframes mupdown {
	0% {
		margin-top: 0px;
		opacity: 1;
	}
	50% {
		margin-top: 0px;
		opacity: 1;
	}
	100% {
		margin-top: 0px;
		opacity: 1;
	}
	
}     
.mtop {
  margin-top: 10px;
}    
.stats ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.stats ul li {
  width: auto;
  margin: 0;
  float: none;
  padding: 15px 12px;
  box-sizing: border-box;
  background-color: rgba(255,255,255,0.5);
  box-shadow: 0 3px 4px #ccc;
  color: #333;
}
.stats ul li:hover {
  transform: none;
}
.stats ul li img {
  height: 90px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  margin-left: 0;
}
.stats ul li h3 {
  font-size: 30px;
  margin-bottom: 6px;
}
.stats ul li h4 {
  font-size: 15px;
  line-height: 1.35;
}
#homebody .midcontent ul li {
  width: 100%;
  margin: 18px 0% 15px 0%;
  float: none;
  box-shadow: 0px 2px 3px #ccc;
  padding: 15px;
  min-height: 350px;
  box-sizing: border-box;
  border-radius: 15px;
  background-color: #fff;
}    
#homebody .midcontent p {
  min-height: 90px;
}   
.lowbar {
  position: relative;
  left: 0;
}
.lowbar img {
  width: 100%
}
.technology h2 span {
  font-size: 35px;
  line-height: 40px;
}    
.clients h2 span {
  font-size: 35px;
  
  line-height: 40px;
  text-transform: none;
}
.technology ul li {
  width: 50%;
  float: left;
  text-align: center;
}
.technology ul li img {
  width: 75%;
}  
.itechnology ul li {
  width: 50%;
  float: left;
  text-align: center;
}
.itechnology ul li img {
  width: 75%;
}
.clients ul li {
  width: 50%;
  float: left;
  text-align: center;
  margin: 0.1% 0% 0% 0%;
}   
   
.lefthead {
  width: 100%;
  float: none;
  margin: 10% 0 0 0px;
}    
#imainscreen h1 {
  color: #fff;
  font-size: 25px;
  box-sizing: border-box;
  margin-bottom: 15px;
  font-weight: 900;
}    
 
.requirement {
  padding: 25px 0px;
}    
.req {
  padding: 25px 15px 30px 15px;
}    
.requirement h2 {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 10px 0px;
}    
.requirement .link {
  padding: 8px 40px;
  color: #c21500;
  background-color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 15px;
}    
footer h2 {
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 20px;
  padding: 30px 20px;
  text-transform: uppercase;
  color: #333;
}
footer .ig ul {
  flex-wrap: wrap;
}
footer .ig ul li {
  flex: 0 0 33.33%;
  width: 33.33%;
  text-align: center;
  float: left;
}    
footer .ig ul li img {
  width: 85%;
  max-height: 40px;
  object-fit: contain;
}
.happyclients .hc-cat {
  font-size: 20px;
  margin: 20px 0 18px 0;
}
.hc-tabs {
  gap: 8px;
  margin: 5px 0 22px 0;
}
/* Tight enough that both pills still share one row on a 375px phone - they
   wrap to two centred rows below that, which is fine. */
.hc-tab {
  padding: 12px 13px;
  font-size: 13px;
}
/* Mobile footer menu. Web Development is the longest column, so it gets its
   own centered full-width row; the remaining four pair up two per row. The
   clear on the row-starters stops a taller left column from snagging the
   next pair. */
footer .menu ul {
  float: left;
  width: 50%;
  text-align: left;
  margin: 0;
  padding: 0 2.5%;
  box-sizing: border-box;
}
footer .menu ul:nth-of-type(1) {
  float: none;
  width: 100%;
  text-align: center;
}
footer .menu ul:nth-of-type(2),
footer .menu ul:nth-of-type(4) {
  clear: left;
}    
footer .menu h5 {
  color: #eb968b;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 18px;
  padding-top: 20px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
footer .menu ul li {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 25px;
}    
.otherlinks {
  float: none;
  padding-top: 20px;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  padding-bottom: 10px;
}    
.botsocial {
  float: none;
    width: 90%;
    margin: auto;
  padding-top: 20px;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  padding-bottom: 10px;
    text-align: left;
}    
.botsocial a {
  font-size: 25px !important;
  font-weight: 600;
  color: #c21500;
  float: none;
  padding: 2px 15px 2px 0px;
  display: inline-block;
}
footer .sec .copyright {
  padding: 5px 0px 0px 0px;
  color: #666;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
    text-align: left;
    line-height: 18px;
    width: 90%;
    margin-left: 5% !important;
}    
.otherlinks a {
  font-family: "Montserrat", sans-serif !important;
  font-size: 16px !important;
  text-transform: uppercase;
  font-weight: 600 !important;
    display: block;
    text-align: center;
    padding: 10px 0px;
}   
.otherlinks span {
  display: none
}    
.home #media {
    position: relative;
}    
#media h2 {
  font-size: 20px;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  margin: 0px 0px 20px 0px;
  padding-top: 5px;
  float: none;
  color: #fff;
    text-align: center;
    width: 100%;
}    
.contactvia ul li {
  width: 100%;
  float: none;
  margin: 2% 0px;
  background-color: #fff;
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 0 1px 3px #ccc;
  border-radius: 12px;
}    
    
}
/* ===== Honeypot spam trap =====
   Hidden from humans, visible to bots. Kept off-screen rather than
   display:none, because some bots skip display:none fields. */
.wc-hp{
    position:absolute !important;
    left:-9999px !important;
    top:auto !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}

/* ===== Slide-in menu icons (all pages) =====
   includes/header.php is shared by every page, so nothing is added to the
   markup. The nav already carries a generic <i class="fa fa-angle-right"> on
   each link - here we just swap the glyph per destination with an attribute
   selector, and draw one for the three top level links that have no <i>.
   Moved out of css/service-v2.css so every page gets the same menu. */

/* the links set width:100% with padding but no box-sizing, so each one
   overflowed its parent - that is what put a horizontal scrollbar under the
   menu once the icons widened the labels. */
.navigation ul li a,
.navigation ul li span,
.navigation ul li div {
    box-sizing: border-box;
}

.navigation ul li a i,
.navigation ul li div i {
    width: 20px;
    text-align: center;
    margin-right: 6px;
    color: #c21500;
    font-size: 14px;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), color .3s ease;
}

.navigation ul li a:hover i {
    transform: scale(1.2);
}

/* section headings */
.navigation > ul > li > div i {
    color: #b9aeaa;
    font-size: 13px;
}

.navigation > ul > li:nth-child(1) > div i:before { content: "\f2c1"; } /* who we are  - id badge */
.navigation > ul > li:nth-child(3) > div i:before { content: "\f121"; } /* web development - code */
.navigation > ul > li:nth-child(5) > div i:before { content: "\f0a1"; } /* promotion - bullhorn */
.navigation > ul > li:nth-child(7) > div i:before { content: "\f1cd"; } /* web support - life ring */

/* who we are */
.navigation a[href*="about-us"] i:before        { content: "\f0f7"; } /* building */
.navigation a[href*="our-team"] i:before        { content: "\f0c0"; } /* users */
.navigation a[href*="clients"] i:before         { content: "\f2b5"; } /* handshake */
.navigation a[href*="media-coverage"] i:before  { content: "\f1ea"; } /* newspaper */

/* web development */
.navigation a[href*="ecommerce-website"] i:before { content: "\f07a"; } /* cart */
.navigation a[href*="corporate-website"] i:before { content: "\f0b1"; } /* briefcase */
.navigation a[href*="static-website"] i:before    { content: "\f1c9"; } /* file code */
.navigation a[href*="wordpress-website"] i:before { content: "\f19a"; } /* wordpress */
.navigation a[href*="shopify-website"] i:before   { content: "\f290"; } /* shopping bag */
.navigation a[href*="laravel-website"] i:before   { content: "\f233"; } /* server */
.navigation a[href*="react-website"] i:before     { content: "\f1b2"; } /* cube */
.navigation a[href*="landing-page"] i:before      { content: "\f108"; } /* desktop monitor */

/* promotion */
.navigation a[href*="digital-marketing"] i:before    { content: "\f201"; } /* line chart */
.navigation a[href*="social-media"] i:before         { content: "\f1e0"; } /* share */
.navigation a[href*="pr-media-management"] i:before  { content: "\f130"; } /* microphone */

/* web support */
.navigation a[href*="website-maintenance"] i:before        { content: "\f0ad"; } /* wrench */
.navigation a[href*="website-migration"] i:before          { content: "\f0ec"; } /* exchange */
.navigation a[href*="website-speed-optimization"] i:before { content: "\f0e4"; } /* tachometer */
.navigation a[href*="virus-removal"] i:before              { content: "\f132"; } /* shield */

/* top level links - these have no <i> in the shared markup */
.navigation > ul > li > a:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 20px;
    margin-right: 6px;
    text-align: center;
    color: #c21500;
    font-size: 14px;
    font-weight: 400;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.navigation > ul > li > a[href*="portfolio"]:before { content: "\f00a"; } /* grid */
.navigation > ul > li > a[href*="blog"]:before      { content: "\f09e"; } /* rss */
.navigation > ul > li > a[href*="contact"]:before   { content: "\f0e0"; } /* envelope */

/* icon pulled out of the text flow so a wrapping label stays aligned instead
   of tucking its second line under the icon. The shared rule above leaves
   these links on line-height 14px - the same as the font size - so a label
   that wraps ("Website Speed Optimization") gets two lines stuck together
   with no gap. 1.5 gives them room. */
.navigation ul ul li a {
    position: relative;
    padding-left: 34px;
    line-height: 1.5;
    transition: color .3s ease, padding-left .3s cubic-bezier(.22, .61, .36, 1);
}

.navigation ul ul li a i {
    position: absolute;
    left: 8px;
    top: 11px;
    margin: 0;
}

.navigation ul ul li a:hover {
    padding-left: 40px;
}

.navigation ul ul li a:hover i {
    left: 14px;
}

/* ===== Highlights carousel - video captions =====
   The heading under each YouTube embed. Needs to out-specify the older
   .testi ul li h4 rule (right aligned, 16px) that the commented-out text
   testimonial markup still uses. min-height keeps the four captions on a
   level baseline so the row does not look ragged.
   Width and side margin mirror .ytf exactly so the red bar sits flush under
   the player rather than a pixel or two off centre. */

/* .ytf is inline-block, so it sits on the text baseline and leaves a 2px
   sliver of page background between the player and the red bar. */
.testi .ytvidframe .ytf {
    vertical-align: bottom;
}

.testi .ytvidframe h4.ytftitle {
    display: block;
    width: 95%;
    margin: 0 3%;
    padding: 14px 12px;
    box-sizing: border-box;
    min-height: 82px;
    background-color: #c21500;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    text-transform: none;
}

@media screen and (max-width: 780px) {
    .testi .ytvidframe h4.ytftitle {
        min-height: 0;
        font-size: 15px;
        line-height: 22px;
        padding: 16px 14px;
    }
}

/* Payment page on small screens. Both gateway buttons are the primary action
   here, so they become full-width tap targets instead of the shared 30px-tall
   inline pill. The bank-detail rows also need real leading - the #ibody mobile
   line-height is 14px, which leaves the wrapped branch address with none. */
@media screen and (max-width: 780px) {
    .payway {
        padding: 5px 0 22px 0;
    }
    #intro .wbar .payway img {
        margin: 0 0 14px 0;
    }
    .payway .mtab {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 14px 16px;
        font-size: 15px;
        line-height: 20px;
        text-align: center;
    }
    #ibody .mbot {
        font-size: 15px;
        line-height: 24px;
        overflow-wrap: break-word;
    }
}