@charset "utf-8";
html {font-family:  var(--light);-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
body {margin: 0; padding:0;font-family:  var(--light);font-size:14px;letter-spacing: -0.02em;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;}
audio, canvas, progress, video {display: inline-block;vertical-align: baseline;}
audio:not([controls]) {display: none;height: 0;}
[hidden], template {display: none;}
a {background-color: transparent; text-decoration:none !important;}
a:active, a:hover{outline: 0; text-decoration:none;}
abbr[title] {border-bottom: 1px dotted;}
b, strong {font-weight: bold;}
dfn {font-style: italic;}
h1 {font-size: 2em;margin: 0.67em 0;}
mark {background: #ff0;color: #000;}
small {font-size: 80%;}
sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
img {border: 0;}
svg:not(:root) {overflow: hidden;}
figure {margin: 1em 40px;}
hr {-moz-box-sizing: content-box;box-sizing: content-box;height: 0;}
pre {overflow: auto;}
code, kbd, pre, samp {font-family: monospace, monospace;font-size: 1em;}
button, input, optgroup, select, textarea {color: inherit; font: inherit;margin: 0;}
button {overflow: visible;}
button, select {text-transform: none;}
button, html input[type="button"],
input[type="reset"],
input[type="submit"] {-webkit-appearance: button;cursor: pointer;}
button[disabled], html input[disabled] {cursor: default;}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0;padding: 0;}
input {line-height: normal;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box;padding: 0;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {height: auto;}
input[type="search"] {-webkit-appearance: textfield;-moz-box-sizing: content-box;-webkit-box-sizing: content-box;box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;}
legend {border: 0;padding: 0;}
textarea {overflow: auto;}
optgroup {font-weight: bold;}
table {border-collapse: collapse;border-spacing: 0;}
td, th {padding: 0;}
ul, li{ list-style:none;}
*:focus{ outline:0;}
.trans{transition: all 0.5s ease;}
::selection {background: var(--yellow); color: var(--blue);}
.fixheader{ position:absolute; left:0px; top:0; right:0px; z-index:9995;transition: all 0.5s ease; padding: 0;}
.header{ position:relative;padding:0;}
.header > h1{display:block; margin:0;width:140px; height:85px; position:absolute; left:0px;top:25px; z-index:9997;transition: all 0.5s ease;}
.header > h1 > a{ display:block; height:100%; }
.header > h1 > a > img{ max-width: 100%; width: 100%; height: auto;}
.fullmenubg{ position:relative;}
.topbg{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;display: flex;flex-direction: row;align-items: center;justify-content: center; z-index: -1;}
.blob-rec {background: #F1F1F1;height: 400px;width: 400px;border-radius: 30% 70% 20% 40%;animation: transformm 20s ease-in-out infinite both alternate, movement_one 40s ease-in-out infinite both;opacity: .6;position: absolute;right: 85%;top: 50%;}
.blob-rec.one {background: #F1F1F1;height: 900px;width: 900px;right: -200px;top: -250px;transform: rotate(-180deg);
	animation: transformm 30s ease-in-out infinite both alternate, movement_two 60s ease-in-out infinite both;
}
@keyframes transformm
{
    0%,
  100% { border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%; } 
   20% { border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%; } 
   40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%; } 
   60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%; } 
   80% { border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%; } 
}

@keyframes movement_one
{
    0%,
  100% { transform: none; }
   50% { transform: translate(10%, 20%) rotateY(10deg) scale(1.3); }
}

@keyframes movement_two
{
    0%,
  100% { transform: none; }
   50% { transform: translate(50%, 20%) rotate(-200deg) scale(1.2);}
}

.herotxt{ position: relative;display: flex;flex-direction: row;align-items: center;justify-content: center; height: 100vh;}
.herotxt h3{ font-size: 60px; line-height: 70px; margin: 0; padding: 0; color: var(--blue); font-family: var(--regular); margin-bottom: 10px; padding-top: 50px;}
.herotxt h1{ font-size: 85px; line-height: 88px; margin: 0; padding: 0; color: var(--blue); font-family: var(--bold);}
.herotxt p{ font-size: 30px; line-height: 40px; color: #000; margin-top: 10px; margin-bottom: 0; font-family: var(--extlight);}

.txtanimate {background-size: 100%;-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation: move infinite 2s;animation-timing-function: steps(4, end);background-image: url(../images/txtbg.jpg);}
 @keyframes move {
     0% {
         background-position: 0 0;
    }
     25% {
         background-position: -200px -200px;
    }
     75% {
         background-position: 0px -200px;
    }
     100% {
         background-position: 0 0;
    }
	  
   
}
.servicessec{ background-color: #ffffff; padding: 100px 0; position: relative;display: flex;align-items: center;justify-content: center; min-height: 100vh;}
.shead{ color: var(--blue); position: relative; z-index: 5; }
.shead h2{ font-size: 55px; line-height:56px;  font-family: var(--bold);}
.shead h4{ font-size: 38px; line-height:40px;  font-family: var(--light);}

@keyframes hover-in {
  0% {
    transform: translate(-103%, 0%);

  }
  100% {
    transform: translate(-90%, 0%);
  }
}
@keyframes hover-out {
  0% {
    transform: translate(-90%, 0%);
  }
  100% {
    transform: translate(103%, 0%);

  }
}

ul.solutions{ margin: 0; padding: 0; position: relative;z-index: 5;}
ul.solutions li{ margin: 10px 0; padding: 0; position: relative;}
ul.solutions li > a{ display:inline-block; font-size: 30px; padding: 8px 35px 8px 0; color: var(--blue); line-height: 34px; overflow: hidden; position: relative;transition: all 0.5s ease;}
ul.solutions li > a:after{ content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; animation: hover-out 0.8s ease;transform: translate(103%, 0%);border-top: 1px solid var(--yellow); border-bottom: 1px solid var(--yellow);}
ul.solutions li > a > i{ font-style: normal; position: relative; z-index: 2;}
ul.solutions li:hover > a, ul.solutions li > a.active,ul.solutions li:hover > a.active{  color: var(--yellow);}
ul.solutions li:hover > a:after{animation: hover-in 0.8s ease forwards;}
ul.solutions li p {display: none;padding: 10px 3px;color: var(--blue); font-family: var(--extlight); margin-bottom: 0; font-size: 18px; line-height: 32px;}
ul.solutions a:before {width: 12px;height: 12px;border-right: 2px solid #c5c5c5;border-bottom: 2px solid #c5c5c5;position: absolute;right: 5px;content: "";top: 18px;
transform: rotate(-45deg);-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
ul.solutions a.active:before {transform: rotate(45deg);-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}

.about{display: flex;align-items: center;justify-content: center; color: #ffffff; text-align: center; position: relative; top: 0; background-color: #171740;min-height: 100vh;overflow: hidden;}
.bgtxt{ position: absolute; left: 300px; z-index: 2; font-size: 500px; width: 4200px;opacity: 0.03; font-family: var(--bold);}
.about h2{font-size: 32px; line-height: 55px; padding: 50px 0; position: relative; z-index: 10; font-family: var(--extlight);  }
.connect{ position: relative;background-color: #f5f5f5; overflow: hidden; padding:80px 0; display: flex;align-items: center;justify-content: center;}
.connect h2{font-size: 50px; line-height:52px;  font-family: var(--bold); color: var(--blue); padding-bottom: 40px;}
.connect h2 b{ display: block;}
.connect a{ display: inline-block; padding: 15px 20px; font-size: 25px; color: var(--blue); font-family: var(--regular); position: relative;transition: all 0.5s ease;}
.connect a b{ font-style: normal; position: relative; z-index: 5;}
.connect a span{ display: block; width: 40px; height: 40px; background-color: var(--yellow); position: absolute; left: 0; top: 10px;animation: transformm 10s ease-in-out infinite both alternate, movement_one 20s ease-in-out infinite both;}
.connect a em{transition: all 0.5s ease; display: block; position: absolute; left: 0; top: 0; bottom: 0; }
.connect a:hover em{transform: scale(1.5);}

.mouse_body {border-style: solid;border-width: 1px;border-color:var(--blue);border-radius: 32px;height: 43px;width: 24px;margin: 0 auto; position: absolute; bottom: 50px; left: 50%; margin-left:-12px; opacity: 0.5; }
.mouse_wheel {border-style: solid;border-width: 1px;border-color: var(--blue);border-radius: 8px;background-color: var(--blue);position: relative;height: 3px;width: 3px;margin: 0 auto;animation: wheel_animation 1.5s linear infinite;}
@keyframes wheel_animation {
  0% {
    opacity: 0;
    top: 4px;
  }
  50% {
    opacity: 1;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 28px;
  }
}

.bganimate {position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;overflow: hidden;}
.bgShape {position: absolute;pointer-events: none;opacity: 0.2;transition: opacity 0.2s linear;}
.bgone {bottom: 50%;right: 50%;margin-bottom: -300px;margin-right: -400px;animation: shape1 20s infinite alternate linear;}
.bgtwo {top: 50%;left: 50%;margin-top: -600px;margin-left: -475px;transform: rotate(15deg);animation: shape2 20s infinite alternate linear;}

@keyframes shape1 {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(20%) rotate(20deg);
    }
}

@keyframes shape2 {
    0% {
        transform: translateY(0) rotate(15deg);
    }
    100% {
        transform: translateY(-20%) rotate(25deg);
    }
}

.workssec{position: relative; z-index: 4; padding-top: 100px;}
.workssec h2{ text-align: center;font-size: 55px; line-height:56px;  font-family: var(--bold); color: var(--blue);}
.workssec h6{font-size: 22px; line-height:30px;  font-family: var(--extlight); text-align: center; max-width: 1000px; margin: 0 auto 30px;}
a.wslide{ display: block; margin: 20px; background-color: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.16); min-height: 200px;transition: all 0.5s ease;  position: relative; overflow: hidden;}
a.wslide:hover{ transform: scale(1.02);}
a.wslide > img{ width: 100%; height: auto; max-width: 100%;}
.wtxt{ padding: 20px; position: relative;z-index: 5;}
.wtxt > b{ display:block; font-family: var(--bold); color: var(--blue); font-size: 18px;}
.wtxt > i{ color: #6C6C6C; font-size: 12px; display: block; font-style: normal; min-height: 40px;}


/*=========== Preloader ============*/
.ctn-preloader {-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: default;display: -webkit-box;display: -ms-flexbox;display: flex;height: 100%;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;position: fixed;left: 0;top: 0;width: 100%;z-index: 9998;}
.ctn-preloader .lodinglogo{ z-index: 1000; }
.ctn-preloader .loader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;font-size: 0;z-index: 1;pointer-events: none; background-color: #fff;}
.ctn-preloader .loader .row {height: 100%;}
/*====================================================*/