html, body{height:100%;}
body{ font-family: 'open_sanslight';}
.noscroll{ overflow:hidden;}
a, img, header, button, #services-sec a span, header, .circle, .ser, .desc, .timeline-panel, #product-sec .products .box{
	transition:all 0.25s ease-in-out 0s;
	-webkit-transition: all 0.25s ease-in-out 0s;
	-moz-transition: all 0.25s ease-in-out 0s;
	-o-transition: all 0.25s ease-in-out 0s;
	-ms-transition: all 0.25s ease-in-out 0s;
}

.tnone, .ser, #intro a{
	transition:none;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	-ms-transition:none;
}

.wow{visibility:hidden;}
/*#intro .wow {
  visibility: visible !important;
}*/

.tooltip{z-index:9999;}

  /*-----------------------------------*\
  $ANIMATIONS
\*-----------------------------------*/

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }

  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}


@font-face {
    font-family: 'Harabara';
    src: url('../fonts/Harabara.eot');
    src: url('../fonts/Harabara.eot') format('embedded-opentype'),
         url('../fonts/Harabara.woff2') format('woff2'),
         url('../fonts/Harabara.woff') format('woff'),
         url('../fonts/Harabara.ttf') format('truetype'),
         url('../fonts/Harabara.svg#Harabara') format('svg');
}

@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/opensans-light-webfont.eot');
    src: url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-light-webfont.woff') format('woff'),
         url('../fonts/opensans-light-webfont.ttf') format('truetype'),
         url('../fonts/opensans-light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/opensans-regular-webfont.eot');
    src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-regular-webfont.woff') format('woff'),
         url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('../fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/opensans-semibold-webfont.eot');
    src: url('../fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-semibold-webfont.woff') format('woff'),
         url('../fonts/opensans-semibold-webfont.ttf') format('truetype'),
         url('../fonts/opensans-semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/opensans-bold-webfont.eot');
    src: url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-bold-webfont.woff') format('woff'),
         url('../fonts/opensans-bold-webfont.ttf') format('truetype'),
         url('../fonts/opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

a:hover{text-decoration:none;}

.loop {
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}


.scrolltoTop{position:fixed; bottom:0px; right:10px; z-index:99999; padding:0px 10px; color:#008E00; display:none; font-size:25px;}
.fixednavs{position:fixed; right:0; top:40%;  z-index:99999;}
.fixednavs a{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin:10px 0; background:#FF0000; color:#fff; font-size:20px; border-radius:5px 0 0 5px; box-shadow:5px 5px 0 rgba(0,0,0,0.3); margin-bottom:5px; transition: background 0.3s;}
.fixednavs a:before{ font-family:'Font Awesome 5 Free';}
.fixednavs a.enquireBtn:before{content:"\f0e0";}
.fixednavs a.careerBtn{background:#008E00;}
.fixednavs a.careerBtn:before{content:"\f507"; font-weight:bold;}
.fixednavs a:hover{ background:#008E00; }
.fixednavs a.careerBtn:hover{ background:#FF0000; }


.popup{position:fixed; width:100%; height:100%; left:0; top:0; bottom:0; right:0; z-index:999999; background-color:rgba(0,0,0,0.9); display:none;  background: rgb(7,145,8); background: linear-gradient(214deg, rgba(7,145,8,0.8) 0%, rgba(108,150,101,0.8) 100%); }

.popup iframe{width:100%; height:100%; border:0; background:none;}
.formIframe{background:none;}

.popup.show{display:block;}
.popup a.closepop{width:40px; height:40px; border-radius:100px; background-color:#fff; position:absolute; right:-6px; top:-6px; display:flex; justify-content:space-around; align-items:center; color:#999; box-shadow:-3px 3px 0 rgba(0,0,0,0.6);}
.formCover{padding:25px 50px 0; background:#fff; position:absolute; bottom:0; width:600px; left:50%; margin-left:-300px; border-radius:40px 40px 0 0; box-shadow:0 0 50px rgba(0,0,0,0.5); background: rgb(7,145,8); background: linear-gradient(214deg, rgba(7,145,8,0.95) 0%, rgba(108,150,101,0.95) 100%); background-attachment:fixed;}
.formCover h4{ color:#fff; font-size:30px;  font-family: 'open_sanssemibold'; font-weight:normal; position:relative;}

.popup#careerpopup{ background: rgb(33,212,253);
background: linear-gradient(153deg, rgba(33,212,253,0.5) 0%, rgba(183,33,255,0.5) 100%); }
.formCover.career{ background: rgb(33,212,253);
background: linear-gradient(153deg, rgba(33,212,253,1) 0%, rgba(183,33,255,1) 100%); }

.formdiv{padding:10px 0 30px 0;}
.formdiv .form-control{ border:0; background:rgba(0,0,0,0.2);  margin-bottom:15px; font-size:14px; color:#fff;}
.formdiv textarea.form-control{resize:none;}
.formdiv input[type=file]{margin-bottom:10px;}
.formdiv .btn{ background:#008E00; color:#fff; transition: background 0.3s;}
.formdiv .btn:hover{ background:#FF0000; color:#fff;}
.formdiv .btn:before{content:"\f1d8"; font-family:'Font Awesome 5 Free'; margin-right:5px;}
.formdiv .form-control:focus{ box-shadow:0 0 0 2px rgba(0,0,0,.25);}
.formdiv ::-webkit-input-placeholder {color: #fff;}
.formdiv ::-moz-placeholder { color:  #fff;}
.formdiv :-ms-input-placeholder {color:  #fff;}
.formdiv :-moz-placeholder {color:  #fff;}

#puzzle{position:fixed; background:url(../img/logo-fade.png) no-repeat left center #fff; border-radius:30px; width:1000px; height:600px; left:50%; top:50%; margin-left:-500px; margin-top:-300px; z-index:999999;   background: rgb(7,145,8); background: linear-gradient(338deg, rgba(7,145,8,1) 0%, rgba(108,150,101,1) 100%); box-shadow:0 0 100px rgba(0,0,0,0.5); display:none;}
#puzzle.showing{display:block;}
#puzzle .occassion-bg{position:absolute; left:0; top:0; width:100%; height:100%;/* background:url(../img/occassion.png) no-repeat bottom center / 100% auto;*/}
#puzzle iframe{ width:100%; height:100%; border:0;}
#puzzle .skip{ color:#333; font-family: 'open_sansregular'; z-index:99; background:#e0e0e0; padding:6px 0; width:100px; text-align:center; margin-left:-50px; left:50%; bottom:0; position:absolute; border-radius:5px 5px 0 0;}

header{position:fixed; z-index:99999; width:100%; top:0; left:0;}
header.stick{ background: rgb(7,145,8); background: linear-gradient(214deg, rgba(7,145,8,0.95) 0%, rgba(108,150,101,0.95) 10%); background-attachment:fixed;}
header a.logo{ color:#fff; display:flex; flex:1; padding:5px 0;}
header a.logo img{height:50px; margin-right:10px;}
header a.logo span{font-family: 'Harabara'; font-size:31px; letter-spacing:2px; font-weight:normal; line-height:20px; padding-top:7px;}
header a.logo span.green { color: #008E00; }
header a.logo span.red { color: #FF0000; }
header.stick a.logo span.green { color: #fff; }
header.stick a.logo span.red { color: #FF0000; }
header a.logo small{ display:block; font-family: 'open_sansregular'; font-size:10.5px; letter-spacing:normal; font-weight:bold; text-transform:uppercase;}

nav{ float:right;}
nav ul{list-style:none;}
nav ul li{ float:left; text-transform:uppercase; font-size:12px; font-family: 'open_sanssemibold'; margin-left:5px;}
nav ul li a{display:block; color:#fff; padding:3px 15px; border-radius:25px;}
nav ul li:hover a{color:#fff; text-shadow:1px 1px 0 #222;}
nav ul li.active a{ background:#008E00; color:#fff; box-shadow:0 0 10px rgba(0,142,0,0.5);}



#intro{position: fixed; width: 100%; height: 100%; top: 0; left: 0; bottom:0; right:0; z-index:999999;  background: rgb(33,212,253);
background: linear-gradient(153deg, rgba(33,212,253,1) 0%, rgba(183,33,255,1) 100%);  background: rgb(7,145,8);
background: linear-gradient(338deg, rgba(7,145,8,1) 0%, rgba(108,150,101,1) 100%);/* background:url(../img/christmas-wallpaper.jpg) no-repeat center bottom #004195;  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/}
	
#intro .wow{}	

#box{ position:relative; background: rgb(33,212,253);
background: linear-gradient(153deg, rgba(33,212,253,1) 0%, rgba(183,33,255,0.8) 100%); height:85vh; box-shadow:0 -10px 30px rgba(0, 0, 0, 0.3); position:relative; z-index:999; border-radius:50px 50px 0 0; margin-bottom:0;}

#intro h2{ color:#fff; font-size:50px; font-family: 'open_sansregular'; font-weight:normal; line-height:80px; margin-bottom:0px; letter-spacing:-7px;}
#intro h2 span{display:inline-block;}
#intro h2 strong{font-family: 'open_sansbold'; display:block; font-size:100px;}
#intro a{display:inline-block; width:40px; height:40px; line-height:40px; border-radius:100px; color:#fff; font-size:20px; background:rgba(255, 255, 255, 0.2); position:relative;}
#intro a:after{ width:1px; height:60px; background:red; position:absolute;}
#intro .cover{position:relative; left:0; top:0; width:100%; height:100%; text-align:center;}
#intro .shape{display:none;}

.logoAnimation{ width:200px; margin:0 auto; position:relative; margin-top:30px; margin-bottom:20px;}
.logoAnimation img{width:100%;}
.logoAnimation img.logoBg{ position:relative; z-index:1;}
.logoAnimation img.logoOval, .logoAnimation img.logoOvalShade, .logoAnimation img.logoWhite, .logoAnimation img.logoA{ position:absolute; left:0; top:0;}

.logoAnimation img.logoOval{ z-index:2;}
.logoAnimation img.logoOvalShade{z-index:3;}
.logoAnimation img.logoWhite{z-index:4;}
.logoAnimation img.logoA{z-index:5;}



#banner{ height:100%; position:relative; overflow:hidden; display:flex; z-index:99; width:100%; background: rgb(7,145,8);
background: linear-gradient(338deg, rgba(7,145,8,1) 0%, rgba(108,150,101,1) 100%); background-attachment:fixed;

/* background: url(../img/banner-bg.jpg) bottom center no-repeat; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/
}


	

@keyframes move {
  0% {
    transform: translate3d(0, 0, -1000px);
  }
}


.shape{ position:absolute; bottom:0; left:0; z-index:9999; width:100%; height:140px; background:url(../img/shape.png) no-repeat center top;  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
#banner .overlay{position:absolute; z-index:99; width:100%; height:100%; left:0; top:0; background: rgb(33,212,253);
background: linear-gradient(153deg, rgba(33,212,253,0.8) 0%, rgba(183,33,255,0.5) 100%); background: rgb(76,159,87);
background: linear-gradient(309deg, rgba(183,11,19,0.8) 0%, rgba(18,136,26,0.5) 30%);


}
#banner video {position: absolute; top:0; left:0;  min-width: 100%;    min-height: 100%;    width: 100%;    height: auto;
    z-index: -100; /* background: url('http://demosthenes.info/assets/images/polina.jpg') no-repeat;*/  background-size: cover;}
.stopfade { 
   opacity: .5;
}



#slider .owl-carousel{ position:relative; margin-top:10%;}
#slider img{height:300px; width:auto; margin-right:20px;}
#slider h3{ color:#fff; font-size:50px;  font-family: 'open_sansregular';  font-weight:normal;}
#slider h4{ font-size:16px; color:#c1e1fc;}
#slider p{color:#fff; font-size:16px;}
#slider .desc{width:30%;}

.section{min-height:100%; position:relative;}

#product-sec{ background:#008E00; position:relative; z-index:9999;  background: rgb(0,142,0);
background: linear-gradient(338deg, rgba(7,145,8,1) 0%, rgba(108,150,101,1) 100%);  background:url(../img/product-bg.jpg) no-repeat center center;  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; background-attachment:fixed}
	
#product-sec .shape{ position:absolute; top:0; left:0; z-index:9; width:100%; height:140px; background:url(../img/shapedown.png) no-repeat center top;  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; }
	
#product-sec .circle{ background-color:transparent; border:6px solid #fff; width:400px; height:400px; border-radius:200px; position:absolute; right:-100px; top:50%; margin-top:-200px; opacity:0.1; display:none;}	
#product-sec .circle.two{ left:-100px; right:inherit; width:200px; height:200px; margin-top:-100px;}
#product-sec:hover .circle{ opacity:0.3;}
#product-sec h1{ color:#56feff; font-size:30px; font-family: 'Harabara'; letter-spacing:4px; font-weight:normal;  text-align:center; margin-bottom:30px;}	
#product-sec h1 strong{font-size:50px; display:block;  display:block;  font-family: 'open_sanslight'; font-weight:normal;}
#product-sec p{color:#999; font-size:13px;}



#product-sec h4{ font-size:100px;}
#product-sec .products{ width:100%;}
#product-sec .products figure{border-radius:8px; margin-bottom:15px; height:200px; display:flex; align-items:center; justify-content:center;}
#product-sec .products img{ max-width:50%;}
#product-sec .products h4{color:#28a1d7; font-size:30px; font-family: 'open_sanssemibold'; font-weight:normal;}
#product-sec .products h4 span{font-size:12px; display:block;}
#product-sec .products .container{ /*padding:0; position:relative; background:#fff; padding:30px 0; border-radius:15px; box-shadow:0 0 50px rgba(0, 0 ,0, 0.1);*/}


#product-sec .products p, #product-sec .products a{position:relative; z-index:9;}

#product-sec .products .item{ cursor:pointer; padding:15px;}
#product-sec .products .box{ border-radius:40px; overflow:hidden;/* background:rgba(255,255,255,0.5);*/ position:relative;}
#product-sec .products .box .desc{position:absolute; text-align:center; z-index:9; left:0; top:0; width:100%; height:100%; opacity:0; visibility:hidden; border-radius:10px; padding:15px; overflow:hidden; display:flex; flex-direction:column; justify-content:space-around;}
#product-sec .products .box p{color:#fff; font-size:13px; margin-bottom:5px; margin-top:66px; font-family: 'open_sansregular';}
#product-sec .products .box a{color:#fff; font-size:13px; display:block; margin-top:10px;}
#product-sec .products .box a i{margin-left:5px; font-size:13px;}

#product-sec .products .item:hover .box{box-shadow: 0 12px 10px rgba(0, 0, 0, .08);}
#product-sec .products .item:hover img{opacity:0; visibility:hidden;}
#product-sec .products .item:hover .desc{ opacity:1; visibility:visible;}

.wave {
  opacity: .4;
  position: absolute;
  background: #0af;
  width: 400px;
  height: 400px;
  left:50%;
  margin-left: -200px;
  bottom:-122%;
  border-radius: 43%;
  animation: drift 3000ms infinite linear;
  z-index:1;
}


.wave.-three {
  animation: drift 5000ms infinite linear;
}

.wave.-two {
  animation: drift 7000ms infinite linear;
  opacity: .1;
  background: yellow;
}

@keyframes drift {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}
#product-sec .owl-nav{width:100%; bottom:-55px;}
#product-sec .owl-nav button{color:#fff; font-size:15px; width:40px; height:40px; border-radius:100px;
  text-align:center; line-height:40px; opacity:0.7; position:absolute; top:40%;}
#product-sec .owl-nav button:hover{opacity:1; background:none; box-shadow:0 5px 5px rgba(0, 0 ,0, 0.3) inset;}
#product-sec .owl-nav button:focus{outline:none;}

#product-sec .owl-nav button.owl-prev{ left:-50px;}
#product-sec .owl-nav button.owl-next{ right:-50px;}

#product-sec .about-content{ text-align:center; padding:25px 0;}	
#product-sec .about-content h2{ color:#fff; font-size:50px; font-family: 'Harabara'; font-weight:normal; letter-spacing:4px;}
#product-sec .about-content p{color:#fff; font-size:18px;}
#product-sec .about-content .row{ justify-content:center;}

#careerSec{padding:50px 0; text-align:center; background:url(../img/logo-fade.png) no-repeat left center; background-attachment:fixed;}
#careerSec h3{font-family: 'Harabara'; text-align:center; letter-spacing:2px; color:#008E00;}
#careerSec p{font-size:16px; color:#444;}
#careerSec a{ padding:5px 20px; border-radius:3px; font-size:18px; color:#333; font-family: 'open_sanssemibold'; background:#e0e0e0; transition: background-color 0.3s, color 0.3s;}
#careerSec a:hover{ background-color:#FF0000; color:#fff;}

#valuesSec{ padding:80px 0 20px 0; min-height:700px; position:relative;  background: rgb(7,145,8);
background: linear-gradient(338deg, rgba(7,145,8,1) 0%, rgba(108,150,101,1) 100%);  background-attachment:fixed; background:#fff;  background:url(../img/values-bg.jpg) no-repeat center bottom;  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#valuesSec .branch{ width:1000px; padding:0; padding-right:100px; position:relative;}
#valuesSec h3{ color:#799f1c; font-size:40px; font-family: 'Harabara'; letter-spacing:3px; font-weight:normal; text-shadow:3px 3px 0 #ccc;}
#valuesSec p{color:#666;}
#valuesSec p strong{display:block; margin-bottom:10px;}
#valuesSec img{max-width:100%;}
#valuesSec .branch h3{ font-size:30px;  text-shadow:2px 2px 0 #ddd; position:absolute; left:20px; top:0;}
#valuesSec .values{font-family: 'open_sanssemibold'; font-size:12px; color:#666; line-height:16px; display:inline-block; width: 0;
  overflow: visible; border-left:3px solid #799f1c; padding-left:5px; position:absolute;}
  
.missionContent{}
  
#valuesSec .bg{ position:absolute; bottom:-2px; right:0; z-index:9; width:100%; height:150px; background:url(../img/redfort.png) no-repeat center bottom / auto 100%;}
	
.flag{ width:44px; height:70px; top:0; overflow:hidden; background:url(../img/flag.gif) no-repeat -8px top / 100% auto; position:absolute; left:50%; margin-left:0; top:0;  display:block;}	
.flag.day{ display:block;}

.txtAnim {
    color: #d0ddff;
    background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 60s infinite linear;
  }
  

#services-sec{ padding-top:25px; overflow:hidden; background:#f5f5f5; position:relative; text-align:center; background:url(../img/service-bg.jpg) no-repeat center bottom;  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 50%, rgba(176,202,221,1) 100%);}
#services-sec .container{position:relative; height:100%; max-width:950px;}
#services-sec h3{display:inline-block;}
#services-sec h3 span{  font-size:24px; font-family: 'Harabara'; letter-spacing:2px; font-weight:normal; color: #008E00;
/*background-image: -webkit-linear-gradient(360deg,#008E00,#FF0000); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ display:block;}	
#services-sec h3 strong{font-size:30px; display:block;  display:block;  font-family: 'open_sanslight';}
#svgContainer { z-index: 1; position: absolute; opacity:0.3;}

#services{ position:relative;}

#services-sec .item{position:relative;}

.servicesasimg{ padding:20px 0 100px; background: url(../img/services-shadow.png) no-repeat center bottom;}
.servicesasimg img{}
.servicesasimg .logoOnly{ position:relative; z-index:9999; width:100px; position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px;}
.servicesasimg .service{position:absolute; left:0; top:0; z-index:9; width:100%;}
.servicesasimg .service.baseimg{position:relative;}

.servicesasimg a{display:block; text-align:center;}
.servicesasimg a img{}
.servicesasimg a.show{z-index:99; opacity:1;}
.servicesasimg a.show img{}
.servicesasimg a.faded{opacity:0.4;}
.servicesasimg a.faded img{-webkit-filter: blur(10px);
  filter: blur(10px); }

.servicepageurl{position:absolute; width:100%; height:100%; left:0; top:0; z-index:999;}
.servicepageurl.hide{z-index:-1;}

.focusservice{ display:flex; justify-content:center;}
.focusservice a{ display:inline-block; padding:8px 15px; margin:0 1px; color:#999; font-size:12px; font-family: 'open_sanssemibold';  border-bottom:2px solid transparent;}
.focusservice a:hover{ color:#666;}
/*.focusservice a:first-child{border-radius:8px 0 0 8px;}
.focusservice a:last-child{border-radius:0 8px 8px 0;}*/
.focusservice a.active,.focusservice a:hover{ color:#008E00; border-bottom:2px solid #008E00;}

#services-sec .tab-content .subIcons{ color:#999; margin-top:10px;}
#services-sec .tab-content .subIcons span{ font-size:25px; display:inline-block; text-align:center;}
#services-sec .tab-content .subIcons span small{display:block; font-size:12px;}


.mobileContent{ display:none;}
.mobileContent a{ padding:10px 30px; background-color:#008E00; color:#fff; font-size:16px; margin-top:20px; display:inline-block; border-radius:6px; transition: background-color 0.3s;}
.mobileContent a:hover{ background-color:#FF0000; }


#devProcess{background:#e8f4f2; flex-direction:column; overflow:hidden;/* background:url(../img/vectorbg.jpg) no-repeat center top;  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/}
#devProcess h3{ font-size:30px; color:#008E00; text-align:center; font-family: 'open_sanssemibold';}
#devProcess h4{ font-size:15px; color:#333; text-align:center; line-height:28px;}
#devProcess .process{ padding:80px 0; position:relative;}
#devProcess .content{text-align:center;}
#devProcess .content img{width:400px;}
#devProcess [class*=col-]{ padding:0; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; z-index:999;}
#devProcess .process span{display:block; width:100%; text-align:center; font-size:14px; margin-top:15px; font-family: 'open_sanssemibold'; text-transform:uppercase;}
#devProcess .process span:after{content:"\f30b"; font-family:'Font Awesome 5 Free'; font-weight:bold; float:right;}
#devProcess .process .launch ~ span:after{ display:none; visibility:hidden;}
#devProcess figure{min-height:180px; display:flex; align-items:center; justify-content:center;}
#devProcess img.idea{width:80px; }
#devProcess img.planning{width:80px;}
#devProcess img.pencil{width:15px;}
.design{position:relative;}
.design div{ width:150px; height:150px; position:relative;}
.design img{position:absolute; width:80px;}
.design .one{ left:0; top:0;}
.design .two{ right:6px; top:16px;}
.design .three{ left:-17px; bottom:5px;}
.design .four{ right:24px; bottom:-11px;}

.dev .cardboard{position:relative; width:180px; height:170px; top:22px;}
.dev .cardboard .cloud{ width:100%; position:relative; z-index:99;}
.dev .cardboard .cloud.two{position:absolute; top:0; z-index:999;}
.dev .cardboard .inner{position:absolute; top:0; left:0; z-index:9;}
.dev .cardboard .outer{position:relative; z-index:999;}

.dev .platforms{ position:relative; z-index:9; margin-top:-50px;} 
.dev .codes{width:25px; position:absolute; z-index:99}
.dev .codes.html{ top:50px; left:15px;}
.dev .codes.css{top:50px; left:50px;}
.dev .codes.js{ top:50px; right:40px;}
.dev .codes.vuejs{ top:10px; right:10px;}
.dev .codes.angularjs{ top:25px; right:65px;}


.testing{ position:relative;}
#devProcess img.gear{ position:absolute; right:-15px; width:40px;/* -webkit-transform: scaleY(-1);
    transform: scaleY(-1);*/}
.testing img.sys{width:100px;}

.launch img{width:70px;}

#devProcess .belt{height:2px; background:rgba(0,0,0,0.1); color:rgba(0,0,0,0.1); position:absolute; width:100%; left:0; top:42%; z-index:1; }
#devProcess .belt small{display:inline-block; line-height:normal; position:absolute; top:-7px; -webkit-animation: move 5s infinite; /* Safari 4+ */
  -moz-animation:    move 5s infinite; /* Fx 5+ */
  -o-animation:      move 5s infinite; /* Opera 12+ */
  animation:         move 5s infinite; /* IE 10+, Fx 29+ */}
  
 
  #devProcess .belt .two{ -webkit-animation: move 7s infinite; /* Safari 4+ */
  -moz-animation:    move 7s infinite; /* Fx 5+ */
  -o-animation:      move 7s infinite; /* Opera 12+ */
  animation:         move 7s infinite; /* IE 10+, Fx 29+ */}
  
   #devProcess .belt .three{ -webkit-animation: move 3s infinite; /* Safari 4+ */
  -moz-animation:    move 9s infinite; /* Fx 5+ */
  -o-animation:      move 9s infinite; /* Opera 12+ */
  animation:         move 9s infinite; /* IE 10+, Fx 29+ */}

@-webkit-keyframes move{
  0%   { left: 0; }
  100% { left: 100%; }
}
@-moz-keyframes move {
  0%   { left: 0; }
  100% { left: 100%; }
}
@-o-keyframes move{
  0%   { left: 0; }
  100% { left: 100%; }
}
@keyframes move{
  0%   { left: 0; }
  100% { left: 100%; }
}

#devProcess .content a{ font-size:16px; color:#FF0000; font-family: 'open_sanssemibold'; letter-spacing:normal; display:flex; flex-direction:column; display:none;}
#devProcess .content a i{font-size:35px;}
#devProcess .content a:hover{color:#008E00;}
#devProcess .content a:hover i{font-weight:bold;}

.innerpages{background:#efefef;}
.innerpages{background:url(../img/vectorbg.jpg) no-repeat center top #fff;  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; background: rgb(130,184,196);
background: linear-gradient(180deg, rgba(130,184,196,1) 0%, rgba(255,255,255,1) 46%); background-attachment:fixed; background-repeat:no-repeat; background:#fff;}

.innerpages header{position:relative; background: rgb(7,145,8); background: linear-gradient(214deg, rgba(7,145,8,0.95) 0%, rgba(108,150,101,0.95) 100%); background-attachment:fixed;}

#contentSec{}
#contentSec h1{ color:#008E00; font-weight:normal;}
.pageTitleContent{ padding:50px 0 10px; margin-bottom:20px;}
.pageTitleContent .container{}
.pageTitleContent p{color:#444;}

.pageTitleContent .bedcrumb{ display:flex; align-items:center; justify-content:flex-end;}
.pageTitleContent .bedcrumb a{color:#008E00; font-size:12px; font-family: 'open_sanssemibold'; padding:0 10px;}
.pageTitleContent .bedcrumb a:hover{color:#FF0000;}
.pageTitleContent .bedcrumb a:after{content:"/"; margin-left:10px;}
.pageTitleContent .bedcrumb a:last-child:after{content:"";}

#serviceList{margin-bottom:25px;}
.servicesiconshape{ background:url(../img/service-page-vector.png) no-repeat center bottom / auto 100%; height:80px; margin-top:15px;}
#serviceList .logo{text-align:center;}
.timeline {
  list-style: none;
  padding: 50px 0 20px;
  position: relative;
}

.timeline .logo{text-align:center;}

.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eeeeee;
  left: 50%;
  margin-left: -1.5px;
}

.timeline > li {
  margin-bottom: 20px;
  position: relative;
}

.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}

.timeline > li:after {
  clear: both;
}

.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}

.timeline > li:after {
  clear: both;
}

.timeline > li > .timeline-panel {
  width: 46%;
  float: left;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  background:#fff;
  border-radius:10px;
}

.timeline > li > .timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 15px solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 15px solid transparent;
  content: " ";
}

.timeline > li > .timeline-panel:after {
  position: absolute;
  top: 27px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}

.timeline > li > .timeline-badge {
  color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 16px;
  left: 50%;
  margin-left: -25px;
  background-color: #5fc0f1;
  z-index: 100;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}

.timeline > li > .timeline-badge img{width:22px;}

.timeline > li:nth-child(even)  .timeline-panel {
  float: right;
}

.timeline > li:nth-child(even) > .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}

.timeline > li:nth-child(even) > .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}

.timeline > li > .timeline-badge.software {  background-color: #008E00;}
.timeline > li > .timeline-badge.network {  background-color: #FF0000;}
.timeline > li > .timeline-badge.telecom {  background-color: #008E00;}
.timeline > li > .timeline-badge.website {  background-color: #FF0000;}
.timeline > li > .timeline-badge.electronics {  background-color: #008E00;}
.timeline > li > .timeline-badge.mobileapp {  background-color: #FF0000;}

.timeline-title {  margin-top: 0;  color: #008E00;}

.timeline-body > p,.timeline-body > ul {  font-size:13px; color:#666;}

.timeline-body > ul li{margin-bottom:10px;}

.timeline-body > p + p {  margin-top: 5px;}

.timeline > li .timeline-panel a{color:#999; font-size:12px; padding:2px 10px; border-radius:4px;}
.timeline > li .timeline-panel a:hover{background:#efefef;}
.timeline > li .timeline-panel a:after{content:"\f0da"; font-family:'Font Awesome 5 Free'; font-weight:bold; margin-left:15px;}
.timeline > li:hover .timeline-panel{box-shadow:0 0 50px rgba(0,0,0,0.2);}



.subserivces{ padding-bottom:50px;}
.subserivces .row{ }
.subserivces [class*="col-"]{}

.subserivces .box{ margin:15px 0; display:flex; border-radius:10px; box-shadow:0 0 25px rgba(0,0,0,0.2); margin-bottom:30px;}
.subserivces .box:last-child{margin:0;}
.subserivces .box:hover{}
.subserivces .box .serIcon{ display:flex; flex-direction:column; align-items:center; justify-content:center; color:#008E00;  font-size:40px; padding:20px;}
.subserivces .box .content{padding:10px;}
.subserivces .box h3{ font-size:22px; color:#008E00; margin-top:10px; font-family: 'open_sansregular';}
.subserivces .box ul{list-style:none; padding-left:15px;}
.subserivces .box p, .subserivces .box li{color:#888; font-size:13px;}
.subserivces .box li{margin-bottom:10px;}
.subserivces .box li:before{content:"\f111"; font-family:'Font Awesome 5 Free'; margin-right:10px; font-size:12px;}
.subserivces .box p;last-child{margin:0;}
.subserivces .box a.readmore{ color:#FF0000; font-size:12px; }



#contactSec{ padding-bottom:30px;}

#contactSec address{ font-family: 'open_sansregular';}
#contactSec address a{color:#666;}

.group            { 
  position:relative; 
  margin-bottom:15px;
  padding-top:10px;
}
.form-input              {
  font-size:15px;
  padding:10px 10px 10px 5px;
  border-radius:0;
  display:block;
  width:100%;
  border:none;
  border-bottom:1px solid #008E00;
  color:#666;
  background:none;
}

textarea.form-input{ height:100px; resize:none;}

.form-input:focus         { outline:none; }

.form-submit{background:#008E00; padding:10px 20px; color:#fff; border:0; cursor:pointer; transition: background 0.3s;}
.form-submit:hover{background:#FF0000;}

/* LABEL ======================================= */
.group label                {
  color:#008E00; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:15px;
  top:20px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
.form-input:focus ~ label, .form-input:valid ~ label        {
  top:-6px;
  font-size:14px;
  color:#000;
}



/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:100%; }
.bar:before, .bar:after     {
  content:'';
  height:2px; 
  width:0;
  bottom:0px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
.form-input:focus ~ .bar:before, .form-input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.form-input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from { background:#5264AE; }
  to    { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#5264AE; }
  to    { width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#5264AE; }
  to    { width:0; background:transparent; }
}

#map{ overflow:hidden;}
#map iframe{ float:left;}


footer{ background:#008E00; padding:30px 0;}
footer h3{font-size:25px; color:#dbe3fb; font-family: 'open_sanssemibold'; font-weight:normal;}
footer ul{ padding:0; text-align:center;}
footer ul li{  list-style:none; margin:0 10px; display:inline-block;}
footer a, footer p{color:#dbe3fb;font-size:13px;}
footer a:hover{color:#fff;}

footer .contactSupport{ margin-bottom:20px; text-align:center;}
footer .contactSupport img{width:30px;}
footer .contactSupport span{color:#dbe3fb;}
footer .contactSupport a.phone{font-size:20px; }

footer address{color:#dbe3fb; font-size:14px; text-align:center; display:flex; align-items:flex-end; justify-content:center;}
footer address a{display:flex; align-items:flex-end;}
footer address img{width:35px; margin-bottom:4px; margin-right:5px; margin-left:10px;}

.socialMedia{ text-align:center;}
.socialMedia a{display:inline-block; margin:0 10px; font-size:18px;}
.socialMedia a:hover{ color:#56feff;}

footer small{color:#dbe3fb; font-size:11px; display:block; text-align:center; margin-top:20px;}

/* Folder 1 visual theme: neutral surfaces, Todus green/red accents, and a dark footer. */
:root {
  --todus-green: #008e00;
  --todus-red: #ff0000;
  --todus-ink: #222;
  --todus-text: #333;
  --todus-soft: #f5f5f5;
}

body { background: #fff; color: var(--todus-text); }

/* Header layout mirrors Folder 1 while preserving the existing navigation and links. */
header,
header.stick,
.innerpages header {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-attachment: initial;
}
header .container { padding-top: 10px; padding-bottom: 10px; }
header a.logo { padding: 0; align-items: center; }
header a.logo span { font-size: 36px; line-height: 1; padding-top: 0; }
header a.logo span.green,
header.stick a.logo span.green { color: var(--todus-green); }
header a.logo span.red,
header.stick a.logo span.red { color: var(--todus-red); }
nav ul li a { color: var(--todus-text); padding: 8px 15px; }
nav ul li:hover a { color: var(--todus-green); text-shadow: none; }
nav ul li.active a { background: transparent; color: var(--todus-green); box-shadow: none; }

/* Folder 1-inspired homepage hero. */
#banner {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  flex: 0 0 100dvh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 92px 8% 0;
  background: #f5f5f5;
}
#banner video {
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
}
#banner .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.7);
}
#banner .hero-text { position: relative; z-index: 3; max-width: 600px; }
#banner .hero-text h1 { color: var(--todus-green); font: normal 70px 'open_sanssemibold'; margin: 0; }
#banner .hero-text h2 { color: var(--todus-red); font: normal 55px 'open_sanssemibold'; margin: 0 0 20px; }
#banner .hero-text p { color: var(--todus-text); font-size: 22px; line-height: 1.6; margin: 0 0 30px; }
#banner .btn {
  display: inline-block;
  padding: 15px 35px;
  border-radius: 50px;
  background: var(--todus-green);
  color: #fff;
  font-family: 'open_sanssemibold';
  text-decoration: none;
}
#banner .btn:hover { background: var(--todus-red); color: #fff; }
#banner .billboard-wrapper {
  position: relative;
  z-index: 3;
  width: 916px;
  height: 599px;
  flex-shrink: 0;
  align-self: flex-end;
}
#banner .billboard-wrapper .billboard-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 916px;
  height: 599px;
  margin: 0;
  z-index: 1;
}
#banner .billboard-wrapper .billboard {
  position: absolute;
  inset: 0;
  width: 916px;
  height: 599px;
  margin: 0;
  z-index: 2;
}
#services-sec { margin-top: 0; }
#banner .billboard-wrapper .ad {
  position: relative;
  width: 800px;
  height: 336px;
  margin: 35px 0 0 61px;
  overflow: hidden;
}
.particle { position: absolute; z-index: 2; width: 9px; height: 9px; border-radius: 50%; background: rgba(0, 142, 0, 0.35); animation: todusFloat 8s ease-in-out infinite; }
.p1 { left: 12%; top: 20%; } .p2 { left: 35%; top: 72%; animation-delay: -2s; } .p3 { right: 38%; top: 20%; animation-delay: -4s; } .p4 { right: 15%; top: 65%; animation-delay: -6s; } .p5 { left: 55%; top: 42%; animation-delay: -3s; }
@keyframes todusFloat { 50% { transform: translateY(-24px); opacity: .35; } }
@media (max-width: 1500px) {
  #banner .billboard-wrapper { transform: scale(.8); transform-origin: right bottom; }
}
@media (max-width: 1250px) {
  #banner .billboard-wrapper { transform: scale(.65); transform-origin: right bottom; }
}
@media (max-width: 1050px) {
  #banner .billboard-wrapper { display: none; }
}

/* Apply Folder 1's restrained palette without altering the existing page content. */
#services-sec { background: var(--todus-soft); }
#services-sec h3 span,
#devProcess h3,
#careerSec h3,
#contentSec h1,
.pageTitleContent .bedcrumb a { color: var(--todus-green); }
#product-sec {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 16%, rgba(0, 0, 0, .07), transparent 27%),
    radial-gradient(circle at 88% 78%, rgba(0, 0, 0, .05), transparent 25%),
    linear-gradient(135deg, #cfd3cf 0%, #e1e3e1 52%, #c9cdca 100%);
}
#product-sec::before,
#product-sec::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .12);
}
#product-sec::before { top: -180px; right: -80px; }
#product-sec::after { bottom: -220px; left: -110px; border-color: rgba(0, 0, 0, .09); }
#product-sec .products { position: relative; z-index: 1; }
#product-sec h1,
#product-sec .about-content h2 { color: var(--todus-green); }
#product-sec .about-content p,
#product-sec .products .box p { color: var(--todus-text); }
#product-sec .products .box a { color: var(--todus-green); }
#product-sec .owl-nav button { color: var(--todus-green); }
#product-sec .products .box {
  /* background: rgba(255, 255, 255, .82); */
  /* border: 1px solid rgba(0, 142, 0, .1); */
  /* box-shadow: 0 12px 28px rgba(0, 0, 0, .08); */
}
#product-sec .products figure {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
#product-sec .products figure img { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); }
#product-sec .products .box .desc { background: #333; }
#product-sec .products .box .desc p,
#product-sec .products .box .desc a { color: #fff; }
#product-sec .wave { background: var(--todus-green); }
#product-sec .wave.-two { background: var(--todus-red); }
#devProcess { background: #fff; }
#valuesSec { background: #f5f5f5; }
#valuesSec h3 { color: var(--todus-green); text-shadow: none; }
#valuesSec .values { border-color: var(--todus-green); }
.focusservice a.active, .focusservice a.active:hover { color: var(--todus-green); border-color: var(--todus-green); }
.mobileContent a { background: var(--todus-green); }
.mobileContent a:hover { background: var(--todus-red); }

/* Anchor the Todus mark at the exact centre of the service illustration. */
.servicesasimg .logoOnly {
  width: 120px;
  height: 120px;
  margin: 0 !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Use redfort.png as an alpha mask so its silhouette is the same #222 as the footer. */
#valuesSec .bg { background: none; }
#valuesSec .bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--todus-ink);
  -webkit-mask-image: url(../img/redfort.png);
  -webkit-mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: auto 100%;
  mask-image: url(../img/redfort.png);
  mask-position: center bottom;
  mask-repeat: no-repeat;
  mask-size: auto 100%;
}
#valuesSec .bg .flag { z-index: 1; }

footer h3, footer a, footer p, footer .contactSupport span, footer address, footer small { color: #fff; }
footer a:hover, .socialMedia a:hover { color: var(--todus-green); }

/* Reference refresh: splash screen, enquiry/career popups, and products. */
#intro {
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  background: #fff;
  color: #1d2939;
}
#intro .wow {
  visibility: visible !important;
}
#intro .cover {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px 24px;
}
#intro .intro-content {
  display: flex;
  width: min(100%, 620px);
  align-items: center;
  flex-direction: column;
  text-align: center;
}
#intro .intro-mark {
  width: 185px;
  height: auto;
  margin-bottom: 22px;
}
#intro .intro-wordmark {
  font: normal 64px/1 'open_sanssemibold';
  letter-spacing: 1px;
}
#intro .intro-wordmark .green { color: var(--todus-green); }
#intro .intro-wordmark .red { color: var(--todus-red); }
#intro .intro-divider,
.form-metric .metric-divider {
  display: flex;
  width: 195px;
  align-items: center;
  gap: 14px;
  margin: 27px auto;
}
#intro .intro-divider span,
.form-metric .metric-divider::before,
.form-metric .metric-divider::after {
  height: 2px;
  flex: 1;
  background: var(--todus-green);
  content: "";
}
#intro .intro-divider b,
.form-metric .metric-divider i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--todus-red);
}
#intro .intro-tagline {
  margin: 0;
  color: #657184;
  font: normal 30px/1.4 'open_sansregular';
}
#intro .enter-site {
  display: flex;
  width: auto;
  height: auto;
  margin: 64px 0 0;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  color: #667386;
  background: none;
  font: normal 16px/1 'open_sansregular';
}
#intro .enter-site i {
  display: flex;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--todus-green);
  border-radius: 50%;
  color: var(--todus-green);
  font-size: 22px;
}

.popup {
  background: #007f1a;
  background-image: radial-gradient(circle at 7% 20%, rgba(255, 255, 255, .12) 0 2px, transparent 3px), radial-gradient(circle at 88% 76%, rgba(255, 255, 255, .12) 0 2px, transparent 3px), linear-gradient(135deg, #00942a, #006d12);
  background-size: 26px 26px, 26px 26px, cover;
}
.popup#careerpopup {
  background: #e90000;
  background-image: radial-gradient(circle at 7% 20%, rgba(255, 255, 255, .2) 0 2px, transparent 3px), radial-gradient(circle at 88% 76%, rgba(255, 255, 255, .2) 0 2px, transparent 3px), linear-gradient(135deg, #ff130b, #be0000);
  background-size: 26px 26px, 26px 26px, cover;
}
.popup iframe { background: transparent; }
.popup a.closepop {
  z-index: 2;
  top: 24px;
  right: 24px;
  color: #555;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .22);
}
.formIframe { background: transparent; }
.formCover,
.formCover.career {
  --form-accent: var(--todus-green);
  position: absolute;
  top: 50%;
  bottom: auto;
  left: 50%;
  width: min(620px, calc(100% - 40px));
  max-height: calc(100% - 40px);
  margin: 0;
  padding: 34px 48px 30px;
  overflow: auto;
  transform: translate(-50%, -50%);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .25);
}
.formCover.career { --form-accent: var(--todus-red); }
.formCover h4 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.form-metric { color: var(--form-accent); text-align: center; }
.form-metric > i { display: block; font-size: 46px; }
.form-metric strong { display: block; margin-top: 3px; color: #191d24; font: normal 74px/.95 'open_sansbold'; }
.form-metric > span { display: block; margin-top: 8px; font: normal 31px/1.1 'open_sanssemibold'; }
.form-metric .metric-divider { width: 280px; margin: 24px auto 25px; }
.form-metric .metric-divider::before,
.form-metric .metric-divider::after { background: var(--form-accent); opacity: .5; }
.form-metric .metric-divider i { background: var(--form-accent); }
.formdiv { padding: 0; }
.form-field { display: block; margin: 0 0 15px; color: #171a1f; font: normal 16px/1.2 'open_sanssemibold'; }
.input-shell { display: flex; min-height: 54px; margin-top: 8px; align-items: center; border: 1px solid #d3d6db; border-radius: 11px; background: #fff; }
.input-shell > i { width: 48px; color: var(--form-accent); text-align: center; font-size: 19px; }
.formdiv .form-control { height: 52px; margin: 0; padding: 0 14px 0 0; border: 0; border-radius: 0 11px 11px 0; background: transparent; color: #1d2128; font-size: 16px; box-shadow: none; }
.formdiv textarea.form-control { height: 92px; padding-top: 15px; resize: vertical; }
.textarea-shell { align-items: flex-start; }
.textarea-shell > i { padding-top: 17px; }
.file-shell input[type=file] { width: 100%; margin: 0; padding: 10px 14px 10px 0; color: #5b6470; font-size: 14px; }
.formdiv .btn { width: 100%; margin-top: 6px; padding: 15px 20px; border-radius: 10px; background: var(--form-accent); color: #fff; font: normal 18px/1 'open_sanssemibold'; text-transform: uppercase; }
.formdiv .btn:hover { background: #222; color: #fff; }
.formdiv .btn:before { content: none; }
.formdiv .form-control:focus { box-shadow: none; }
.formdiv .input-shell:focus-within { border-color: var(--form-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--form-accent) 18%, transparent); }
.formdiv ::-webkit-input-placeholder { color: #7a8290; }
.formdiv ::-moz-placeholder { color: #7a8290; }
.formdiv :-ms-input-placeholder { color: #7a8290; }
.formdiv :-moz-placeholder { color: #7a8290; }

#product-sec {
  background: linear-gradient(rgba(0, 110, 23, .91), rgba(0, 83, 16, .94)), url(../img/product-bg.jpg) center / cover;
  background-blend-mode: multiply;
}
#product-sec::before,
#product-sec::after { display: none; }
#product-sec h1 { color: #fff; font-size: 34px; letter-spacing: 3px; }
#product-sec h1 strong { color: #76de13; font-size: 54px; }
#product-sec .products .box { background: transparent; border: 0; box-shadow: none; }
#product-sec .products figure { height: 190px; padding: 0; background: transparent; }
#product-sec .products figure img { max-width: 58%; filter: brightness(0) invert(1); }
#product-sec .products figure img.pythagoras-logo { filter: none; }
#product-sec .products .box .desc { background: rgba(0, 47, 10, .88); }
#product-sec .products .box .desc p,
#product-sec .products .box .desc a { color: #fff; }
#product-sec .wave { background: #0c9a22; }
#product-sec .wave.-two { background: #76de13; }
#product-sec .about-content { padding-top: 35px; }
#product-sec .about-content h2 { color: #fff; font-size: 46px; }
#product-sec .about-content h2 span { color: #76de13; }
#product-sec .about-content p { color: #fff; font-size: 18px; }
#product-sec .owl-nav button { color: #fff; }

.tod-mb-200{margin-bottom: 200px;}