@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --black:#303037;
  --gray:#a7a9c0;
  --blue:#244db5;
  --darkBlue:#0e318b;
  --lightGray:#eff2f5;
  --sky:#00d7ff;
}


button:focus, input:focus {outline: none;}
body {font-size:14px;color: var(--black); font-family: 'Libre Franklin', sans-serif;}
h1,h2,h3,h4 {font-family: 'Libre Franklin', sans-serif; font-weight: 700;}
img {max-width: 100%;}
.wrapper {position: relative;}
.container {max-width:1170px;}
.middle {overflow: hidden; min-height: 500px;}
.logo a {display: inline-block;max-width: 100%;}

.header {padding:20px 0px 24px 0px; transition: all .1s linear; position: fixed;left: 0px; top: 0px; width: 100%;z-index: 11;}
.headerFix {box-shadow: 0px 0px 5px #0c6d4740; padding: 8px 0px 8px 0px;background: #0a203a; }
.headerFix + .middle {padding-top:50px;}
.headerFix .logo {max-width:160px;}

.blueBtn {border-radius:5px; background: var(--blue); border:none; color:#ffffff; font-size: 14px; padding: 16px 63px 16px 25px; display: inline-block; font-weight: 600; position: relative; text-transform: uppercase;}
.blueBtn:hover {text-decoration: none; color:#ffffff;background: var(--darkBlue);}
.blueBtn:after {content: ""; width: 36px; height: 21px; position: absolute; right: 20px; top: 15px; background:url(../images/sprite.png) no-repeat -14px -10px;transition: right 0.2s linear;}
.blueBtn:hover:after {right: 23px;}

.textLink {color:var(--blue); font-size: 14px; padding:2px 38px 2px 2px; display: inline-block; font-weight: 600; position: relative; text-transform: uppercase;}
.textLink:hover {color:var(--blue); text-decoration: none;}
.textLink:after {content: ""; width: 36px; height: 21px; position: absolute; right:0px; top:2px; background:url(../images/sprite.png) no-repeat -13px -44px;transition: right 0.2s linear;}
.textLink:hover:after {right:3px;}


.mainNav {position: relative; text-align: right;}
.mobileNavBtn:focus {outline: none;box-shadow: none;}
.mobileNavBtn {display: none; border: none; cursor: pointer; margin-top: 1px; float:right; width: 22px; height: 18px;border-radius: 0px; background: none; position: relative; z-index: 101;transition: right .3s linear;margin-right: 10px;}
.mobileNavBtn span { width: 100%; left: 0px; top: 7px; height: 2px; background:#fff; position: absolute; transition: all 0.3s linear;}
.mobileNavBtn span:nth-child(2) {top: 0px;}
.mobileNavBtn span:nth-child(3) {top: 14px;}
.openNav {overflow: hidden;}
/*.openNav .mobileNavBtn {right: 310px;}*/
/*.openNav .mobileNavBtn span {background: var(--blue);}*/
.openNav .mobileNavBtn span:nth-child(2){display: none;}
.openNav .mobileNavBtn span:nth-child(1){transform:rotate(45deg)}
.openNav .mobileNavBtn span:nth-child(3){transform:rotate(-45deg); top: 7px;}

@media (min-width: 1024px) {
	.navigation>ul {padding: 0px; margin:0px; list-style: none;}
	.navigation>ul>li {display: inline-block;  vertical-align: middle; }
	.navigation>ul>li>a {color:#ffffff; display: inline-block; font-size: 18px; padding: 5px 25px;}
	.navigation>ul>li>a:hover {color:var(--sky); text-decoration: none;}
	.overLay {display: none;}
  .navigation>ul>li>a.blueBtn {padding: 16px 63px 16px 25px;font-size: 14px; margin-left:40px;}
  .navigation>ul>li>a.blueBtn:hover {color: #ffffff;}

  .hasChild>a:after{content: "";width: 7px;height: 7px; display: inline-block;vertical-align:4px; margin-left:7px; border-right: solid 2px #ffffff; border-bottom: solid 2px #ffffff;transform: rotate(45deg);}
  .hasChild:hover>a:after {border-right-color: var(--sky);border-bottom-color: var(--sky);}
  .subMenu { display: block; left:-15px; top:10%;opacity: 0; position: absolute; visibility: hidden; width:190px; z-index: 15; text-align: left; padding-top:10px;}
  .subMenu ul {list-style: none;padding:10px 5px; margin: 0px;box-shadow:0 1px 16px rgba(37,35,40,.09);background:#ffffff;border-radius: 6px;}
  .subMenu li a {color: var(--balck); display: block; font-size: 16px;font-weight:500; padding:14px 12px 10px 12px;  transition: all .15s linear; text-decoration: none;}
  li.hasChild {position: relative;}
  li.hasChild:hover .subMenu {opacity: 1; visibility: visible; top:90%; transition: all 0.5s ease; }
  .subMenu li a:hover {color:var(--blue); }
}
@media (min-width: 1600px) {
  .navigation>ul>li {padding:0px 10px;}
}
.overLay {transition: all 0.3s linear;}
@media (max-width: 1025px) {
	.logo {max-width: 100px;}
  .headerFix .logo {max-width: 100px;}

	.mobileNavBtn {display: inline-block;}
	.navMain {text-align: right; position: relative;margin: 7px 15px 3px 0px;display: inline-block;width: 100%;}
  .navigation {position: fixed; right: 0px; top: 0px;width:100%;bottom: 0px;
    	 z-index: 100; max-height: 100%; overflow-y: auto;
    	right:-105%; transition: all .2s linear; height: 100%;display: flex; }
  .openNav .navigation {right: 0px;}	
  .navigation>ul {margin: 70px auto 30px auto;  padding:10px 0px 10px 0px; list-style: none;max-height: calc(100% - 100px); overflow-x: auto; text-align: left; width: 100%;}
  .navigation>ul>li {font-size:16px;border-bottom: solid 1px #4473a3;}
  .navigation>ul>li>a {padding:12px 20px 12px 20px; display: block; color:#ffffff; }
  .navigation>ul>li>a:hover {text-decoration: none;}
  .navigation>ul>li>a.blueBtn {border-radius: 0px;}
   

  .openNav .overLay {display: block; position: fixed; top: 0px; left: 0px;width: 100%;height: 100%;background:var(--blue);z-index: 11;}
  
  .logo a {position: relative; z-index:101;}

  li.hasChild {position: relative;}
  .subMenu {display: none; padding: 3px 5px; background:#3a62c8; }
  .subMenu  ul {list-style: none;padding: 0px; margin: 0px;}
  .subMenu li a {display: block; padding: 9px 16px; text-transform: capitalize; color:#ffffff;font-size: 15px;text-decoration: none; }
  li.hasChild > a:after {border: 1px solid #ffffff; border-width: 0 0 2px 2px; content: ""; position: absolute; width:8px; height:8px; transform: rotate(225deg); display: inline-block; right:20px; top:20px;transition: all 0.3s linear; }
  li.hasChild.openSubMenu > a:after {transform: rotate(314deg); }
}

.tagLine {color: var(--gray); font-size: 22px; font-weight: 700;margin: 0px 0px 5px 0px;}
.homeSection {padding: 80px 0px;}
.homeHeading {text-align: center;}
.homeHeading h2 {margin: 0px 0px 20px 0px; font-size: 48px; font-weight: 800; color: var(--black);}
.homeHeading .desc {margin: 0px auto 40px auto; font-size: 18px; max-width:950px; line-height: 1.6;}


.homeTopSec { padding:200px 0px 270px 0px; position: relative;}
.homeTopSec:before {content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: calc(100% + 90px); background: url(../images/top-bg.png) no-repeat bottom center;}
.homeTopSec .container {position: relative;}
.homeTopSecContent {max-width: 900px; margin: 0px auto; text-align: center;}
.homeTopSecContent .textA {color: var(--sky); font-size: 22px; font-weight: 800;}
.homeTopSecContent .textB {color:#ffffff; font-size: 60px; font-weight: 800; margin: 20px 0px 40px 0px;}
.homeTopSecContent .textC {color:#ffffff; font-size:20px; margin: 0px 0px 50px 0px;}

.homeAboutSec {padding-top: 90px;}
.homeAboutSec .container {max-width:1280px;}
.homeAboutText {position: relative; overflow: hidden; border-radius: 3px; padding: 2px 15px 0px 20px;}
.homeAboutText:before {background: #f1f4f6; content: ""; width: 380px; height: 380px; border-radius: 50%; position: absolute; right: -190px; top: -190px; z-index: 0;}
.homeAboutText .homeHeading {text-align: left; position: relative;}
.homeAboutImg {position: relative; margin: 0px; padding: 0px 10px 0px 120px;}
.homeAboutImg:before {content: ""; width: 410px; height: 410px; background: var(--sky); border-radius: 50%;position: absolute; top:90px; left: 0px;}
.homeAboutImg img {border-radius: 0px 50px 0px 0px; position: relative;}
.homeServiceSec {padding: 80px 0px 40px 0px;}
.homeServiceSec .btnRow {text-align: center; padding: 40px 0px;}
.homeServiceSec .container {max-width:1280px;}
.serviceBlock {position: relative; overflow: hidden;background: #000; margin: 0px 0px 30px 0px;}
.serviceBlock a {display: inline-block; max-width: 100%;}
.serviceBlock img {transition: all 0.2s linear; }
.serviceBlock:hover img {transform:scale(1.03);opacity: 0.7;}

.whatWeOffer { background: url(../images/offer-sec-bg.png) no-repeat top center; padding: 200px 0px 100px;}
.homeOfferBox {position: relative; text-align: center;max-width: 360px; margin: 0px auto;}
.homeOfferBox .img {margin: 0px 0px 25px 0px;background: #000; overflow: hidden; border-radius: 10px;}
.homeOfferBox .img a {display: inline-block;max-width: 100%;}
.homeOfferBox .img img {transition: all 0.2s linear; }
.homeOfferBox:hover .img img {transform:scale(1.03);opacity: 0.7;}
.homeOfferBox h3 {margin: 0px 0px 15px 0px; font-size: 24px; font-weight: 800;}

.homeTestmonialSec {position: relative; padding:60px 0px;}
.homeTestmonialSec .bg {background: #183c67; height:650px; position:absolute;top:0px; left: 0px; width: 100%; overflow: hidden;}
.homeTestmonialSec .bg:before {content: ""; width: 900px;height: 900px; border-radius: 50%; background: var(--blue); position: absolute; top: 50px; left: -300px;}
.homeTestmonialSec .bg:after {content: ""; width: 500px;height: 500px; border-radius: 50%; background: var(--blue); position: absolute; top: -100px; right: -150px;}
.homeTestmonialSec .container {position: relative;}
.textBlock {text-align: center;margin: 0px 0px 60px 0px;}
.textBlock .img {margin: 0px 0px 20px 0px;}
.textBlock .text {font-size: 32px;color: #ffffff; font-weight: 800; line-height: 1.1;}
.testmonialSliderBg {background: #ffffff; padding: 50px; text-align: center; border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.1);}

.testMonialItem .textDesc {position: relative; padding:45px 0px 40px 0px;line-height: 1.5; font-size: 18px; font-weight: 500;}
.testMonialItem .textDesc:before {content: ""; width: 30px; height: 30px; position: absolute; right:calc(50% - 20px); top:0px; background:url(../images/sprite.png) no-repeat -84px -6px;}
.testMonialItem .bottomText {line-height: 1.5; font-size: 16px;font-weight: 500;}


.footer {padding:50px 0px 30px 0px;}
.footerLogo { margin: 0px 0px 20px 0px;}
.footerLogo a {display: inline-block; max-width: 100%;}
.footer h3 {font-size: 16px; font-weight: 700; margin: 0px 0px 20px 0px;}
.footerLink {list-style: none; margin: 0px 0px 60px 0px; padding: 0px;}
.footerLink li {margin: 0px 0px 10px 0px; font-size: 16px;font-weight: 500;}
.footerLink li a {display: inline-block; color:var(--black);}
.footerLink li a:hover {color: var(--blue); text-decoration: none;}

.copyRight {font-size: 16px; text-align: center;}
.copyRight a {color:var(--gray);}

.socialLink {padding: 0px; margin: 0px;}
.socialLink li {display: inline-block; margin-right:10px;}
.socialLink li a {display: block; width:42px; height:42px; background: url(../images/sprite.png) no-repeat -46px -157px; text-decoration: none; border-radius: 50%; }
.socialLink li .twitter {background-position:-5px -156px;}
.socialLink li .linked {background-position:-86px -157px;}
.socialLink li a:hover {background-color: #efefef;}

.contactInfo p {font-size: 16px;font-weight: 600;margin-bottom: 5px;}
.contactInfo a {color: var(--black); font-weight: 400;}

.innerTopBg {background:url(../images/servicesTopBg.png) no-repeat top center; height: 520px; padding: 120px 0px 50px 0px;display: flex; align-items: center;}
.innerTopText {max-width: 900px; margin:0px auto; text-align: center; color: #ffffff;}
.innerTopText h1 {font-size: 60px; font-weight:900; margin: 0px 0px 20px 0px;}
.innerTopText .desc {font-size:20px;}

.servicesTabSec {position: relative; padding: 100px 0px; border-bottom: solid 1px #e0e4e8;}
.servicesTabNav {padding: 0px; margin: 0px 0px 20px 0px; list-style: none;}
.servicesTabNav li {margin-bottom: 10px;}
.servicesTabNav li a {display: block;font-size: 18px; font-weight: 500; padding: 10px 17px; color: var(--black);}
.servicesTabNav li a:hover, .servicesTabNav li a.active {background: var(--blue); color: #ffffff; text-decoration: none;border-radius: 5px;}

.servicesTabSec h2 {font-size:48px; font-weight:900; margin: 0px 0px 40px 0px;}
.servicesTabSec .desc {font-size:18px; line-height: 1.6;}
.servicesTabSec .desc p {margin-bottom: 20px;}
.servicesTabContainer {margin-left: 96px;}
.artA {position: relative;}
.artA:before {content: "";background: #eef1f3; width: 94px; height: 94px; border-radius: 50%; position: absolute; left: -36px; top: -47px; z-index: -1;}
.artB {position: relative; padding-top: 50px; display: inline-block;}
.artB:before {content: "";width:0px; height:0px; z-index: -1; border: solid 110px transparent; border-radius: 50%; display: inline-block; border-left-color: #eef1f3; transform: rotate(45deg); position: absolute; right: -120px; bottom: -115px;}
.blueCounBlock {background:#193b68; margin: 40px 0px; padding: 20px 20px 25px 30px; border-radius:20px 0px 20px 0px; color: #ffffff;}
.blueCounBlock .textA {font-weight: 800; font-size: 36px;}
.blueCounBlock .textB {font-size:16px;}


.contactTopBg {padding:170px 0px 30px 0px;position: relative; overflow: hidden;}
.contactTopBg:before {content: "";background: #09234d; position: absolute; top: -12%; left: -10%; width: 120%; transform: rotate(-6deg); height: 100%;}
.contactLeft {position: relative; margin-right: 100px;}
.contactHeading {color: #ffffff;}
.contactHeading h1 {font-size: 60px; font-weight:900; margin: 0px 0px 10px 0px;}
.contactHeading .desc {font-size: 20px; font-weight:500; margin: 0px 0px 40px 0px;}
.contactBlock {max-width: 460px; position: relative; z-index: 1;}
.contactBlock p {background: #0c2758;border:solid 1px #244db5; border-radius: 5px; padding:15px 15px 15px 65px; color: #ffffff; margin: 0px 0px 20px 0px; position: relative; font-size: 16px;}
.contactBlock p:before {content: ""; background: url(../images/sprite.png) no-repeat -10px -77px; width: 24px; height: 24px; position: absolute; top: 15px; left: 24px;}
.contactBlock p:nth-child(2):before {background-position:-52px -78px; }
.contactBlock p:nth-child(3):before {background-position:-93px -78px; }
.contactBlock p a {color: #ffffff; text-decoration: none;}
.contactBlock p a:hover {color: var(--sky);}

.contactLeft .socialLink {margin: 50px 0px 20px 0px;}
.contactLeft .socialLink li { margin-right:5px;}
.contactLeft .socialLink li a { background: url(../images/sprite.png) no-repeat -47px -120px;}
.contactLeft .socialLink li .twitter {background-position:-4px -119px;}
.contactLeft .socialLink li .linked {background-position:-85px -119px;}
.contactLeft .socialLink li a:hover {background-color:#052a6e;}

.contactRightBlock {position: relative;}
.contactRightBlock:before {content: ""; height: 400px; width: 400px; background: var(--sky); border-radius: 50%;position: absolute; right: -100px; top: -40px; }
.formBg {background: #ffffff; padding: 40px; border-radius: 10px;box-shadow:0 0 20px rgba(0,0,0,0.1); position: relative;}
.contactRightBlock h2 {font-size: 36px; font-weight: 800; margin: 0px 0px 20px 0px;}
.contactRightBlock .form-group {margin: 0px 0px 15px 0px;}
.contactRightBlock .form-label {margin: 0px 0px 3px 0px; font-weight: 600; font-size: 18px;}
.contactRightBlock .form-control:focus {outline: none; box-shadow: none;}
.contactRightBlock .form-control{height:54px; padding:10px 20px;}
.contactRightBlock textarea.form-control {height: auto;resize: none;}
.contactRightBlock .blueBtn {width: 100%;}
.contactRightBlock .blueBtn:after {display: none;}
.artC {position: relative; padding-top: 50px; display: inline-block;}
.artC:before {content: "";width:0px; height:0px; border: solid 110px transparent; border-radius: 50%; display: inline-block; border-top-color: #0c2852; transform: rotate(-137deg); position: absolute; right: -130px; bottom:0px;}
.artC span {position: relative;}


.owlNav.owl-carousel .owl-dots {padding-top: 15px;}
.owlNav.owl-carousel button.owl-dot {width: 8px; height: 8px; background: #c1c2c4; border-radius: 5px; margin: 5px 7px;}
.owlNav.owl-carousel button.owl-dot.active {background: var(--sky);}
.owlNav.owl-carousel .owl-dot:focus {outline: none;}
/*.owlNav.owl-carousel .owl-nav button {background:#fff url(../images/sprite.png) no-repeat -82px -41px;width: 48px; height: 48px; position: absolute; right:50px; top: 40%; border-radius: 50%; box-shadow: 0px 0px 5px rgba(0,0,0,0.3); opacity: 0.8;}
.owlNav.owl-carousel .owl-nav button.owl-prev {transform: rotate(180deg);left:50px; right: inherit;}
.owlNav.owl-carousel .owl-nav button span {display: none;}
.owlNav.owl-carousel .owl-nav button:hover {opacity: 1;}*/













.animation {opacity: 0;transform: translate(0px,20px); transition: all 0.5s linear;}
.animation.ani {opacity: 1;transform: translate(0px,0px);}

@media (max-width: 767px) {
  .header {padding:10px 0px 10px 0px;}
  .logo, .headerFix .logo {max-width:90px;}

  .tagLine {font-size: 14px;}
  .homeHeading h2 {margin: 0px 0px 15px 0px; font-size: 22px; }
  .homeHeading .desc {font-size:14px; margin: 0px auto 20px auto; }
  .homeSection {padding: 30px 0px;}
  
  .homeTopSec {padding:80px 0px 10px 0px; }
  .homeTopSec:before {background:#0a203a; height: calc(100% + 20px);}
  .homeTopSecContent .textA {font-size: 14px;}
  .homeTopSecContent .textB {font-size:26px; margin: 10px 0px 20px 0px;}
  .homeTopSecContent .textC {font-size:14px; margin: 0px 0px 30px 0px;}

  .homeAboutSec {padding-top:50px;}
  .homeAboutText {padding: 0px 10px 0px 0px;}
  .homeAboutImg {padding: 0px 0px 0px 0px; margin-bottom: 20px;}
  .homeAboutImg:before {display: none;}
  .homeServiceSec {padding:10px 0px 0px 0px; }
  .serviceBlock {margin: 0px 0px 20px 0px;}
  .homeServiceSec .btnRow {padding:15px 0px;}

  .whatWeOffer {padding:80px 0px 20px 0px; background-position: top -20px center;}
  .homeOfferBox {margin:0px auto 20px auto;}
  .homeOfferBox .img {margin: 0px 0px 15px 0px;}
  .homeOfferBox h3 { margin: 0px 0px 10px 0px; font-size:18px;}

  .homeTestmonialSec {position: relative; padding:20px 0px;}
  .homeTestmonialSec .bg {height: 100%;}
  .homeTestmonialSec .bg:before,
  .homeTestmonialSec .bg:after {display: none;}
  .textBlock {margin: 0px 0px 30px 0px; }
  .textBlock .text {font-size: 22px;}
  .testmonialSliderBg {padding:20px 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
  .testMonialItem .textDesc {padding:35px 0px 20px 0px;font-size: 14px;}
  .testMonialItem .bottomText {font-size: 14px;}

  .footer {padding: 30px 0px 10px 0px;text-align: center;}
  .footer .col {flex:0 0 100%;}
  .footer h3 { margin:0px 0px 10px 0px; font-size: 16px;}
  .footerLink {margin: 0px 0px 30px 0px;}
  .footerLink li {margin: 0px 0px 5px 0px; font-size: 14px;}
  .copyRight {text-align: center; margin:10px 0px 10px 0px;font-size: 14px;}
  .footerLogo {margin:0px auto 20px auto;}
  .footerLogo img {max-width: 150px;}
  .contactInfo {text-align: center; margin: 0px 0px 20px 0px;}
  .contactInfo p {font-size: 14px;}
  .socialLink {text-align: center;margin: 0px 0px 20px 0px;}




  .innerTopBg {height:auto; padding:70px 0px 30px 0px;}
  .innerTopText h1 {font-size:26px; }
  .innerTopText .desc {font-size:16px;}
  .servicesTabSec { padding:30px 0px;}
  .servicesTabNav {margin: 0px 0px 20px 0px;}
  .servicesTabNav li a {font-size: 16px; padding: 10px 15px;}

  .servicesTabSec h2 {font-size:24px; margin: 0px 0px 20px 0px;}
  .servicesTabSec .desc {font-size:14px;}
  .servicesTabSec .desc p {margin-bottom: 12px;}
  .servicesTabContainer {margin-left:0px;}
  .artA:before {display: none;}
  .artB { padding-top:0px; display:block;}
  .artB:before {display: none;}
  .blueCounBlock {background:#193b68; margin:20px 0px; padding:15px 10px 15px 20px; border-radius:10px 0px 10px 0px;}
  .blueCounBlock .textA {font-size:18px;}
  .blueCounBlock .textB {font-size:14px;}
  .blueCounBlock .col {margin: 0px 10px 15px 0px;}

  .contactTopBg:before {transform: rotate(-3deg);}
  .contactTopBg {padding:80px 0px 0px 0px;}
  .contactLeft {margin-right: 0px;}
  .contactHeading h1 {font-size: 26px; }
  .contactHeading .desc {font-size:16px; margin: 0px 0px 30px 0px;}
  .contactLeft .socialLink {margin:30px 0px 40px 0px;text-align: left;}

  .formBg { padding: 15px;}
  .contactRightBlock h2 {font-size:18px;}
  .contactRightBlock .form-label {font-size: 16px;}
  .contactRightBlock .form-control{height:44px;}
  .artC:before {display: none;}
  .artC {padding-top: 0px;}
}