@font-face {

  font-family: "Google Sans";

  src: url("../fonts/GoogleSans-Bold.woff2") format("woff2"),

    url("../fonts/GoogleSans-Bold.woff") format("woff");

  font-weight: bold;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Google Sans";

  src: url("../fonts/GoogleSans-Italic.woff2") format("woff2"),

    url("../fonts/GoogleSans-Italic.woff") format("woff");

  font-weight: normal;

  font-style: italic;

  font-display: swap;

}



@font-face {

  font-family: "Google Sans";

  src: url("../fonts/GoogleSans-BoldItalic.woff2") format("woff2"),

    url("../fonts/GoogleSans-BoldItalic.woff") format("woff");

  font-weight: bold;

  font-style: italic;

  font-display: swap;

}



@font-face {

  font-family: "Google Sans";

  src: url("../fonts/GoogleSans-Medium.woff2") format("woff2"),

    url("../fonts/GoogleSans-Medium.woff") format("woff");

  font-weight: 500;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Google Sans";

  src: url("../fonts/GoogleSans-Regular.woff2") format("woff2"),

    url("../fonts/GoogleSans-Regular.woff") format("woff");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Google Sans";

  src: url("../fonts/GoogleSans-MediumItalic.woff2") format("woff2"),

    url("../fonts/GoogleSans-MediumItalic.woff") format("woff");

  font-weight: 500;

  font-style: italic;

  font-display: swap;

}



:root {

  --primaryClr: #1bc6a8;

  --txtClr: #294076;

  --deepblueClr: #6858e0;

  --greenClr: #00af86;

}





*:focus,

button:focus {

  outline: none;

}

html,

body {

  height: 100%;

}

body {

 font-family: 'Poppins', sans-serif;

 font-weight: 400 ;

  color: var(--txtClr);

  background-color: #fff;

}

h1,

h2,

h3,

h4,

h5,

h6,

p,

ul,

figure,

label {

  margin: 0;

  padding: 0;

}

ul {

  list-style: none;

}

textarea {

  resize: none;

}



/* UTILITIES */



.para {

  font-size: 16px;

  font-family: "Lato";

}

.txt__xs {

  font-size: 12px;

}

.txt__sm {

  font-size: 13px;

}

.txt__md {

  font-size: 15px;

}

.txt__lg {

  font-size: 18px;

}

.txt__primary {

  color: var(--primaryClr);

}

.bg__primary {

  background-color: var(--primaryClr);

}

.txt__black {

  color: #000;

}

.txt__light {

  color: #8d99b6;

}

.font-weight-medium {

  font-weight: 500;

}



/* END UTILITIES */



/* COMPONENTS */

.button {

  font-size: 13px;

  display: inline-block;

  font-weight: 600;

  padding: 12px 25px;

  border: 1px solid rgb(239, 239, 239);

  background-color: rgb(239, 239, 239);

  border-radius: 5px;

}

.button:focus {

  outline: none;

}

.button:hover {

  text-decoration: none;

}

.button-white {

    background-color: #a80000;

    border-color: #a80000;

    color: #fff;

    font-size: 15px;

    border-radius: 50px;

    padding: 8px 33px;

    font-weight: 400;

}

.button-white:hover {

  background-color:#000;

  color: #fff;

   border-color: #000;

}

.button-white-outline {

  background-color: transparent;

  color: #fff;

}

.button-white-outline:hover {

  background-color: #fff;

  border-color: #fff;

  color: var(--primaryClr);

}

.button-green {

  background-color: var(--greenClr);

  border-color: var(--greenClr);

  color: #fff;

}

.button-green:hover {

  background-color: transparent;

  border-color: var(--greenClr);

  color: var(--greenClr);

}

.section-header {

  font-size: 50px;

  font-weight: 700;

  margin-bottom:10px;

  color: #a80000;

}

/* END COMPONENTS */



/* LAYOUT */

.main {

  max-width: 1920px;

  margin: 0 auto;

}

@media (min-width: 1200px) {

  .container,

  .container-lg,

  .container-md,

  .container-sm,

  .container-xl {

    max-width: 1200px;

  }

}

/* END LAYOUT */



/* NAVBAR */

.mainNav.navbar {

  transition: all ease-in-out 0.3s;

  padding: 0.6rem 1rem;

}

.mainNav.navbar .navbar-toggler-icon {

  width: 26px;

    height: 19px;

  background-image: url("../images/menu.png");

}

.show .navbar-nav{background: #f6edaa; padding: 10px 15px;}

.mainNav.not-fixed {

  background-color: #fff;

}

.mainNav.navbar.sticky {

  background-color:#f6edaa;

  padding: 0.4rem 1rem;

  box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);

}

.mainNav.navbar .nav-item {

  margin-right:22px;

}

.mainNav.navbar .nav-item:last-child {

  margin-right: 0;

}

.mainNav.navbar .nav-item .nav-link {

  font-size: 18px;

  color: #000;

  font-weight: 700;

  font-family: 'Nunito', sans-serif;

}

.navbar-expand-lg .navbar-nav .nav-link{padding-right: 0px; padding-left: 0px;}



.mainNav.navbar .nav-item .nav-link.active,

.mainNav.navbar .nav-item .nav-link:hover {

  color:#a80000;

}

.mainNav.navbar .nav-item .nav-link.active {

  font-weight: bold;

}

.mainNav.navbar .navbar-toggler {

      padding: 8px 0.5rem;

    border-color: #222;

    position: absolute;

    right: 14px;

    top: 13px;

}

.navbar-action-button {

  display: flex;

  align-items: center;

  padding-left: 15px;

}

.navbar-action-item {

  margin-right: 8px;

}

.navbar-action-item:last-child {

  margin-right: 0;

}

/* END NAVBAR */



/* BANNER */

.banner {

  /* height: 1000px; */

  /* background: url(../images/banner_bg.jpg) 0 0 / cover no-repeat; */

  position: relative;

}

.banner-image {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  z-index: -1;

}

.banner-image img {

  width: 100%;

}

.banner-content-header {

  text-align: center;

}

.banner-content {

  padding-top: 140px;

  position: relative;

  z-index: 2;

}

.banner-content-header h1 {

  font-size: 50px;

  font-weight: 500;

  color: #fff;

  margin-bottom: 20px;

}

.banner-content-header p {

  font-size: 20px;

  color: #fff;

}

.banner-newsletter {

  max-width: 465px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  margin-top: 30px;

  box-shadow: 0px 16px 49px 0px rgba(0, 118, 99, 0.15);

}

.banner-newsletter-input {

  flex-grow: 1;

  background-color: #fff;

  border: 1px solid #fff;

  border-radius: 5px 0 0 5px;

  color: #8bc4c1;

  font-size: 18px;

  padding: 15px 10px;

  height: 58px;

}

.banner-newsletter-input::placeholder {

  color: #8bc4c1;

}

.banner-newsletter-submit {

  text-transform: uppercase;

  font-size: 15px;

  color: #fff;

  background-color: var(--deepblueClr);

  border: 1px solid var(--deepblueClr);

  padding: 15px 18px;

  height: 58px;

  border-radius: 0 5px 5px 0;

}

.banner-content-image {

  padding-top: 70px;

  text-align: center;

}

.banner-content-image img {

  max-width: 100%;

  box-shadow: 0px 0px 103px 0px rgba(90, 134, 99, 0.32);

}

.next-section-wheel {

  margin-top: 65px;

  text-align: center;

}

/* END BANNER */



/* DOWNTIME COST CALCULATOR */

.downtime-calculator {

  margin-top: 25px;

  position: relative;

  z-index: 2;

}

.daily-revenue {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 28px;

}

.daily-revenue-quantity {

  background-color: #eef2f5;

  padding: 12px 40px;

  border-radius: 5px;

  font-size: 22px;

  text-align: center;

  margin-left: 22px;

}

.downtime-ranges {

  display: flex;

  align-items: center;

  justify-content: center;

}

.downtime-range-box {

  border: 1px solid #cbd6de;

  padding: 35px 20px;

  border-radius: 10px;

  margin-right: 10px;

  display: flex;

  align-items: center;

  min-width: 380px;

}

.downtime-range-box:last-child {

  margin-right: 0;

}

.downtime-range-slider {

  flex-shrink: 0;

  flex: 0 0 190px;

  max-width: 190px;

  margin-left: 15px;

}

.irs--round .irs-bar {

  height: 5px;

  background-color: var(--primaryClr);

}

.irs--round .irs-handle {

  border-color: #fff;

  background-color: var(--primaryClr);

}

.irs--round .irs-handle.state_hover,

.irs--round .irs-handle:hover {

  background-color: var(--primaryClr);

}

.irs--round .irs-from,

.irs--round .irs-to,

.irs--round .irs-single {

  background-color: #fff;

  color: var(--txtClr);

  box-shadow: 0px 3px 8px 0px rgba(84, 101, 142, 0.21);

  font-size: 14px;

}

.irs--round .irs-from:before,

.irs--round .irs-to:before,

.irs--round .irs-single:before {

  border-top-color: #fff;

}

.downtime-result {

  text-align: center;

  margin-top: 35px;

}

.downtime-result p {

  margin-bottom: 10px;

}

/* END DOWNTIME COST CALCULATOR */



/*  FEATURES */

.features {

 position: relative;

    padding-top:240px;

    width: 100%;

    height: auto;

    float: left;

}

.feature-content {

  padding-bottom: 120px;

  position: relative;

  z-index: 2;

}



.feature-content-text {

  padding-top: 60px;

  padding-left: 30px;

  padding-right:0px;

}



.feature-content-text h3{font-family: "Google Sans"; font-size: 43px; color: #00000c;    font-weight: 600; margin-bottom: 10px;}



.feature-content-image img {

  max-width: 100%;

}

.feature-content-text p {

  color: #00000c;

  font-size: 18px;

  margin-bottom: 35px;

}

.feature-art-image {

  position: absolute;

  z-index: 1;

}

.feature-art-image-top-right-art {

  top: -250px;

  right: 0;

}

.feature-art-image-left-art {

  left: 0;

  top: 100px;

}

.feature-art-image-bottom {

  right: 0;

  bottom: 110px;

}

/*  END FEATURES */



/* VIDEO */

.video-section {

  padding-bottom: 110px;

  position: relative;

}

.video-section-image {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  z-index: -1;

}

.video-section-image img {

  width: 100%;

}

.plyr--video {

  border-radius: 10px;

}

.plyr__poster {

  background-size: cover;

}

.plyr__control--overlaid {

  background: rgba(255, 255, 255, 0.3);

}

.plyr--video .plyr__control.plyr__tab-focus,

.plyr--video .plyr__control:hover,

.plyr--video .plyr__control[aria-expanded="true"] {

  background-color: var(--primaryClr);

}

/* END VIDEO */



/* HOW IT WORKS */

.how-it-works {

  padding-bottom: 160px;

}

.how-it-works-header {

  padding-bottom: 80px;

  text-align: center;

}

.how-it-works-header p {

  color: #66769b;

  font-size: 18px;

}

.how-it-work-card {

  height: 100%;

  border-radius: 20px;

  text-align: center;

  background-image:url(../images/grafic-tt.png), url(../images/grafic-bt.png);

  background-color: #fff;

    background-position: top left, right bottom;

  background-repeat: no-repeat;

  padding: 75px 35px;

  box-shadow: 0px 10px 16px 0px rgba(123, 137, 150, 0.16);

}

.how-it-work-card-icon {

  height: auto; margin-bottom: 15px;

}

.how-it-work-card-text {

  margin-top: 22px;

}

.how-it-work-card-text h2{font-size: 18px; color: #000; margin-bottom: 15px; font-family: "Google Sans"; font-weight: 600; }



.how-it-work-card-text p {

  color: #000; font-size: 14px;

}



.red-more{width: 100%; height: auto; float: left;  margin-top: 18px; }

.red-more a{font-size: 16px; color:#f63236 ;}

.red-more .fa-arrow-right{font-size: 14px; color: #f63236; margin-right: 10px;}



/* NOTIFICATION */

.notification {

  margin-bottom: 150px;

}

.notification-header {

  text-align: center;

  margin-bottom: 50px;

}

.notification-header p {

  font-size: 18px;

  color: #66769b;

}

.notification-platform {

  height: 228px;

  position: relative;

}

.notification-platform-image {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  z-index: -1;

}

.notification-platform-image img {

  width: 100%;

}

.notification-platform-box {

  position: relative;

  height: 100%;

}

.notification-platform-icon {

  display: inline-block;

  text-align: center;

  background-color: #fff;

  padding: 8px 12px 8px 12px;

  box-shadow: 0px 10px 68px 0px rgba(123, 137, 150, 0.21);

  border-radius: 10px;

}

.notification-platform-icon p {

  font-size: 15px;

  text-transform: uppercase;

  color: #111111;

  font-weight: 500;

  margin-top: 8px;

}

.notification-platform-icon {

  position: absolute;

}

.notification-platform-email {

  left: 22%;

  top: -10px;

}

.notification-platform-slack {

  bottom: -25px;

  left: 48%;

}

.notification-platform-sms {

  right: 16%;

}

/* END NOTIFICATION */



/* SALES COUNT BOX */

.sales-count {

  position: relative;

}

.sales-count-box {

  position: relative;

  z-index: 2;

  border-radius: 15px;

  color: #fff;

  box-shadow: 0px 12px 43px 0px rgba(0, 0, 0, 0.44);

  padding: 67px 40px;

  text-align: center;

  background: rgb(0, 212, 163);

  background: linear-gradient(

    110deg,

    rgba(0, 212, 163, 1) 0%,

    rgba(40, 218, 212, 1) 100%

  );

}

.sales-count-box p {

  font-size: 18px;

}

.sales-count-image {

  position: absolute;

  z-index: 1;

}

.sales-left-count-image {

  left: 0;

  bottom: -110px;

}

.sales-right-count-image {

  right: 0;

  top: -100px;

}

/* END SALES COUNT BOX */



/* FOOTER */

.footer {

  width: 100%;

  height: auto;

  float: left;

  background-color: #111922;

  position: relative;

  margin-top: 150px;

}

.footer::before {

  content: "";

  position: absolute;

  top: 0;

  transform: translateY(-100%);

  left: 0;

  width: 100%;

  background: url(../images/footer-bg.png);

  background-size: 100% 100%;

  background-repeat: no-repeat;

  height: 135px;

}

.footer-top-header {

  padding-top:25px;

  padding-bottom: 50px;

}

.footer-header {

  font-size: 18px;

  color: #fff;

  margin-bottom: 15px;

  font-weight:400;

}

.footer-address {

  color: #fff;

  font-size: 14px;

}

.footer-ul li {

  margin-bottom: 7px;

  background: url(../images/red-arrow.png);

  background-repeat: no-repeat;

  background-position: 4px 6px;

  padding-left:20px;

}

.footer-ul li a {

  color: #fff;

  font-size: 14px;

}

.footer-ul li a:hover {

  color: var(--primaryClr);

}



.footer-contact li {

  color: #fff;

  font-size: 14px;

  margin-bottom: 10px;

}



.footer-contact li a:hover {

  color: var(--primaryClr);

}

.footer-contact li span {

  font-size: 13px;

  color: #fff;

    display: table;

    padding-bottom: 5px;

    margin-bottom: 5px;

    font-weight: 300;

}

.footer-contact li .fas, .footer-contact li .far{font-size: 16px; color: #720f13; float: left; margin-right: 8px;}







.footer-bottom-header {

  padding-bottom:0px; background: #19222c; padding: 8px 0px;

}

.footer-bottom-text {
 font-size: 13px;
    color: #fff;
    text-align: center;
    width: 100%;

}

.footer_social_icons {

  display: flex;

  align-items: center;

  height:auto;

      margin-left: 5px;

}

.footer_social_icons li {

  margin-right: 13px;

    width: 31px;

    height: 31px;

    line-height: 33px;

    text-align: center;

    background: #720f13;

    border-radius: 50px;

}

.footer_social_icons li:last-child {

  margin-right: 0;

}

.footer_social_icons li a {

  color: #fff;

  font-size: 15px;

}





.footer_social_icons_two {

  display: flex;

  align-items: center;

  height:auto;

   margin-top:15px;

}

.footer_social_icons_two li {

  margin-right: 13px;

    width: 31px;

    height: 31px;

    line-height: 33px;

    text-align: center;

    background: #720f13;

    border-radius: 50px;

}

.footer_social_icons_two li:last-child {

  margin-right: 0;

}

.footer_social_icons_two li a {

  color: #fff;

  font-size: 15px;

}







/* END FOOTER */



/* Slider

/*-----------------------------------------------------------------------------------*/

.slider_container{ width:100%; height:auto; margin:auto; clear:both; padding:0px 0 0 0;}

.flex-caption{ width:50%; position: absolute;

    left:0px;

    top: 205px;}

.caption_title_line{ width:100%; height:auto; padding:5px 110px 10px 0px;}

.flex-caption h3{ font-size:50px; font-weight: 600; padding:0px; margin:0px;color:#a80000;font-family: "Google Sans"; 

margin-bottom: 10px;}

.flex-caption h4{ font-size:50px; font-weight: 600; padding:0px; margin:0px;color:#2b383a;font-family: "Google Sans"; 

margin-bottom: 15px;}

.flex-caption p{ font-size:16px; font-weight:300; padding:0px; margin:0px;color:#212121;    font-family: 'Montserrat', sans-serif;margin-bottom: 15px;}



.flex-caption > a.btn-default{background: #ff8270;color: #fff;

    font-weight: 400;

    font-size: 16px;

    line-height: 15px;

    margin-right: 10px;

    text-align: center;

    padding: 12px 28px;

    border: 2px solid #ffa396 !important;

    white-space: nowrap;

    letter-spacing: 1px;

    display: inline-block;

    border: none;

    text-transform: uppercase;

    -webkit-animation-delay: 2s;

    animation-delay: 2s;

    -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;

    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;

}



.flex-caption >  a.btn-primary {

    color: #fff;

    cursor: pointer;

    font-weight: 400;

    font-size: 16px;

    line-height: 15px;

    margin-left: 10px;

    text-align: center;

    padding: 12px 28px;

    border: 2px solid #ff8270 !important;

    white-space: nowrap;

    letter-spacing: 1px;

    background: #ff8270;

    display: inline-block;

    text-decoration: none;

    text-transform: uppercase;

    border: none;

    -webkit-animation-delay: 2s;

    animation-delay: 2s;

    -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;

    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;

}



.flex-container a:active,

.flexslider a:active {outline: none;}

.slides,

.flex-control-nav,

.flex-direction-nav {margin: 0; padding: 0; list-style: none; } 

/*ul.flex-direction-nav {

    display: none;

}*/

/* FlexSlider Necessary Styles

*********************************/ 

.flexslider {width: 100%; height:auto; margin: 0; padding: 0 0 0px 0;background:url(images/shadow_bottom.png) no-repeat center bottom;}

.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides img {width: 100%; display: block;}

.flex-pauseplay span {text-transform: capitalize;}

.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 

html[xmlns] .slides {display: block;} 

* html .slides {height: 1%;}

.no-js .slides > li:first-child {display: block;}

.flexslider {position: relative; zoom: 1;}

.flexslider .slides {zoom: 1;}

.flexslider .slides > li {position: relative; padding-bottom: 0px;}

.flex-container {zoom: 1; position: relative;}



/* Direction Nav */

.flex-direction-nav li a {width:45px; height:56px; margin:0; display: block; position: absolute; right:11px; cursor: pointer; text-indent: -9999px; display: none;}

.flex-direction-nav li a.next {background:url(../images/next1.png) no-repeat center;top:39%;right: 8%; z-index: 9999}

.flex-direction-nav li a.prev {background:url(../images/prev1.png) no-repeat center; top:39%;left: 5%; z-index: 9999}

.flex-direction-nav li a.next:hover {background:url(../images/next_a.png) no-repeat center;}

.flex-direction-nav li a.prev:hover {background:url(../images/prev_a.png) no-repeat center;}

.flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}



/* Control Nav */

.flex-control-nav {width: 100%; position: absolute; bottom:0px; text-align: center; display: none;}

/*.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}

.flex-control-nav li:first-child {margin: 0;}

.flex-control-nav li a {width:35px; height: 10px; display: block; cursor: pointer; text-indent: -9999px; background: #b80294}

.flex-control-nav li a:hover {background-position: 0 -13px;}

.flex-control-nav li a.active {background-position: 0 -26px; cursor: default; background: #195ec8}

*/



.banner-deskstop{width:100%; height: auto; float: left; padding-top: 180px; padding-left: 10%; padding-right: 10%;}

.slid-1{width:50%; height: 580px; float: right;}

.slid-1 img{width: 100%; height: auto; float: left;}

.features-digital{width: 100%; height: auto; overflow: hidden; position: relative;}

.section-header-two {

  font-size:45px;

  font-weight: 600;

  margin-bottom:8px;

  color: #000;

}



.section-header-three {

  font-size:40px;

  font-weight: 600;

  margin-bottom:20px;

  color: #fff;

}





.sub-header{

  font-size: 35px;

  font-weight: 600;

  margin-bottom:10px;

  color: #990909;

}



.features-digital p{color: #666666;

    font-size: 16px;

    margin-bottom: 35px;}



.st-digital{width: 100%; height: auto; float: left; margin-top:27px;}

.st-digital ul{display: block; text-align: center;}

.st-digital ul li{width: 254px; height: 314px;  display: inline-block; background: url(../images/grafic-one.png); padding:0px; margin:0px 25px;}

.st-digital ul li:hover{background: url(../images/grafic-one_hover.png);}

.st-digital ul li .dentity{width: 100%; height: auto; padding: 0px 44px; margin-top: 100px;}

.st-digital ul li .dentity h2{ font-size: 20px; color: #fff;text-shadow: 2px 2px 4px #000000; margin-top: 15px;}

.st-digital ul li .dentity .icon-ft{width: 67px; height: 57px; margin: 0px auto;}

.st-digital ul li .dentity .number-poi{font-size: 35px; color: #fff; font-weight: 600; margin-top: 35px;display: inline-block;}

.st-digital ul li .dentity .number-poi-two{font-size: 35px; color: #fff; font-weight: 600; margin-top: 10px;display: inline-block;}

.features-service{width: 100%; height: auto; margin-top:100px; position: relative; background: url(../images/bg-cf-two.png); background-size: contain; padding: 100px 0px; background-repeat: repeat-x; background-position: left top;}







.heading-divider {

  position: relative;

  margin: 0px auto 55px;

  height: 5px;

  -webkit-border-radius: 30px;

  -moz-border-radius: 30px;

  border-radius: 30px;

  background-color: #c60411;

  width: 90px;

  overflow: hidden;

}



.eastern-blue .heading-divider {

  background-color: #1baaa0;

}



.orange .heading-divider {

  background-color: #FF5621;

}



.cornflower-blue .heading-divider {

  background-color: #634ded;

}



.heading-divider:after {

  content: '';

  position: absolute;

  left: 0;

  top: -1.1px;

  height: 7px;

  width: 8px;

  background-color: #ffffff;

  -webkit-animation-duration: 3s;

  animation-duration: 3s;

  -webkit-animation-timing-function: linear;

  animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;

  animation-iteration-count: infinite;

  -webkit-animation-name: infinite-move;

  animation-name: infinite-move;

}



.bg-gray .heading-divider:after {

  background-color: #f3f7fd;

}



.site-heading {

  margin-bottom: 60px;

  overflow: hidden;

  margin-top: -5px;

}



@keyframes infiUpDown {

  0% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

  }



  50% {

    -webkit-transform: translateY(-35px);

    transform: translateY(-35px);

  }



  100% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

  }

}



@-webkit-keyframes infiUpDown {

  0% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

  }



  50% {

    -webkit-transform: translateY(-35px);

    transform: translateY(-35px);

  }



  100% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

  }

}



@-webkit-keyframes infinite-move {

  from {

    -webkit-transform: translateX(0);

    transform: translateX(0);

  }



  to {

    -webkit-transform: translateX(88px);

    transform: translateX(88px);

  }

}



@-webkit-keyframes infinite-move {

  from {

    -ms-transform: translateX(0);

    transform: translateX(0);

  }



  to {

    -ms-transform: translateX(88px);

    transform: translateX(88px);

  }

}



@keyframes infinite-move {

  from {

    -webkit-transform: translateX(0);

    transform: translateX(0);

  }



  to {

    -webkit-transform: translateX(88px);

    transform: translateX(88px);

  }

}



.features-technology{width: 100%; height: auto; float: left; margin-top:145px; position: relative;}



.feature-graphic-image{width: 100%; height: auto; float: left;}

.feature-graphic-image img{width: 100%; height: auto;}



.feature-graphic-content {

    padding-top: 60px;

    padding-left: 30px;

    padding-right: 0px;

}

.section-header-graphic {

    font-size: 40px;

    font-weight: 600;

    margin-bottom: 10px;

    color: #0d0d0e;

}



.feature-graphic-content h3 {

    font-family: "Google Sans";

    font-size: 45px;

    color: #9f0a0b;

    font-weight: 600;

    margin-bottom: 10px;

}



.features-ourworks{width: 100%; height: auto; float: left; margin-top:170px; position: relative;    margin-bottom: 80px;}







.graphic-development{width: 100%; height: auto; float: left; margin-top:30px; padding-left: 35px;}



.graphic-development ul{display: block;}

.graphic-development ul li{width: 100%; float: left; margin-bottom: 38px;}

.graphic-development ul li .icc{width: 54px; height:auto; margin-right: 15px; float: left;}

.graphic-development ul li h3{font-size: 25px; color: #1d1c21; line-height:30px;}

.graphic-development ul li p{font-size: 20px; color: #747474; line-height:30px;}



/*-- Section One End --*/

#portfoliolist {

    margin-top: 35px;

    float: left;

    padding: 0px 37px;

    width: 100%;

}

#filters {

margin: 1% auto;

    padding: 0;

    list-style: none;

    width: auto;

    float: none;

    display: table;

    background: url(../images/blck-bg.png); background-repeat: repeat;

border-radius: 80px;

border: 2px solid #e3e3e3;



}



  #filters li {

    float:left;

    margin-right: 5px;

  }



#filters li:last-child{margin-right: 0px;}

  

  #filters li span {

  display: block;

  text-decoration:none;

  color:#fff;

  cursor: pointer;

  padding: 10px 28px;

  width: 180px;

  text-align: center;

  font-family: 'Roboto', sans-serif;

  font-weight: 400;

  font-size: 16px;

 text-shadow: 1px 1px 2px #000000;

  }

  

  #filters li span.active {

    color:#fff;

    background: url(../images/rad_bg_hover.png);

    background-repeat: repeat;

  }

#filters li:first-child span {

    border-radius: 30px 0px 0px 30px;

}

  #filters li:last-child span {

    border-radius: 0px 30px 30px 0px;

}

 

/*#filters li:first-child span{ border-radius:30px 0px 0px 30px; }

#filters li:last-child span{ border-radius:0px 30px 30px 0px;}*/

/*#filters li span.active {

  background: #fff;

  color: #502686;

}*/



#portfoliolist .portfolio {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -o-box-sizing: border-box;

  width:25%;

      height: 278px;

  margin:0;

  display:none;

  float:left;

  overflow:hidden;

}



  .portfolio-wrapper {

    width:100%;

    margin-bottom: 20px;

    padding: 25px;

    border-radius: 15px;

    overflow:hidden;

      min-height:auto;

      position: relative;

  }



.pp-box{width: 100%; height: auto; float: left;    border-radius: 15px;

    overflow: hidden;}

.pp-box img{ width: 100%; height: auto; }







 /* .portfolio img {

    width:100%;

    position: relative;

    height: 100%;

    top:0;

    -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);

    transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);   

  }*/

  

  .portfolio .label {

    position: absolute;

    width: 100%;

    height:40px;

    bottom:-40px;

    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);

    transition:         all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);

  }



    .portfolio .label-bg {

      background: #e95a44;

      width: 100%;

      height:100%;

      position: absolute;

      top:0;

      left:0;

    }

  

    .portfolio .label-text {

      color:#fff;

      position: relative;

      z-index:500;

      padding:5px 8px;

    }

      

      .portfolio .text-category {

        display:block;

        font-size:9px;

      }

  

  .portfolio:hover .label {

    bottom:0;

  }

  /*.portfolio:hover img {

    top:-30px;

  }  */



.features-video{width: 100%; height: auto; margin-top: 50px; padding-top: 50px; float: left;}







/* #Tablet (Portrait) */

@media only screen and (min-width: 768px) and (max-width: 959px) {

  .container {

    width: 768px; 

  }

}





/*  #Mobile (Portrait) - Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {

 /* .container { 

    width: 100%; 

  }*/

  

  #portfoliolist .portfolio {

    width:100%;

    margin:0%;

  }   



  #ads {

    display:none;

  }



  

}





.feature-art-pattan-top-right-art img {

    width: 100%;

}



.features-testimonial {

width: 100%;

    height: auto;

    float: left;

    margin-top: 100px;

    padding-top: 80px;

    padding-bottom: 80px;

    position: relative;

    background-color: #720f13;

           

        }

 

.features-testimonial:before {

            content: "";

            position: absolute;

            top: -54px;

            left: 0;

            width: 100%;

            height:54px;

            background: url(../images/red-tob-bg.png);

                background-size: 100% 100%;

            background-repeat: no-repeat;

        }

.features-testimonial:after {

            content: "";

            position: absolute;

            bottom: -54px;

            left: 0;

            width: 100%;

            height:54px;

            background: url(../images/red-bt-bg.png);

                background-size: 100% 100%;

            background-repeat: no-repeat;

        }



.sec-title::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100px;

  height: 3px;

  background: #000;

}

.sec-title h2 {

  font-size: 60px;

  font-family: "Montserrat", sans-serif;

  font-weight: 900;

  letter-spacing: 0px;

  text-transform: uppercase;

  color: var(--blue);

}

.sec-title p {

  font-size: 18px;

  line-height: 28px;

}

.testimonial-area {

  background: var(--blue);

  position: relative;

  z-index: 2;

  padding: 50px 0;

}

.testimonial-area .owl-carousel {

  overflow: hidden;

  padding: 0 20px;

  margin: 0px -40px;

  padding-right: 40px;

}

.testimonial-area .owl-stage-outer {

  padding: 30px 50px;

  margin-left: -34px;

  width: calc(100% + 100px);

}

.single-testimonial {

  border: 7px solid #f5e477;

  text-align: center;

  border-radius: 45px;

  position: relative;

  z-index: 2;

}

.single-testimonial p {

  color: #fff;

  font-size: 15px;

  line-height: 24px;

  padding: 50px;

  padding-bottom: 30px;

  position: relative;

  z-index: 3;

  text-align: left;

}

.single-testimonial::before {

  content: "";

  position: absolute;

  left: -35px;

  top: -35px;

  background:#720f13 url(../images/quote.png) no-repeat;

  background-size: 60%;

  width:90px;

  height:80px;

  transform: rotate(180deg);

  background-position:6px 17px;

}

.single-testimonial::after {

  content: "";

  position: absolute;

  right: -35px;

  bottom: -34px;

  background:#720f13 url(../images/quote.png) no-repeat ;

  background-size: 60%;

    width: 96px;

    height: 80px;

background-position:11px 19px;

}

.round {

  width: 100%;

  height: 100%;

  position: absolute;

  z-index: 1;

}

.round-1::before {

  content: "";

  position: absolute;

  left: 88px;

  top: -7px;

  width: 50px;

  height: 7px;

  background: #f5e477;

  border-radius: 30px;

}

.round-1::after {

  content: "";

  position: absolute;

  left: -7px;

  top: 62px;

  width: 7px;

  height: 50px;

  background: #f5e477;

  border-radius: 30px;

}

.round-2::before {

  content: "";

  position: absolute;

  right: 87px;

  bottom: -7px;

  width: 50px;

  height: 7px;

  background: #f5e477;

  border-radius: 30px;

  z-index: 1;

}

.round-2::after {

  content: "";

  position: absolute;

  right: -7px;

  bottom: 62px;

  width: 7px;

  height: 50px;

  background: #f5e477;

  border-radius: 30px;

  z-index: 1;

}

.client-video {

  padding-right: 15px; float: left;

}

.client-info {

  position: relative;

  z-index: 3;

}

.client-info a {

  width: 40px;

  height: 40px;

  border-radius: 100px;

  display: flex;

  justify-content: center;

  align-items: center;

  box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);

  font-size: 22px;

}

.client-info {

  display: block;

  padding: 15px 45px 30px;

  align-items: center;

  justify-content: center;

  text-align: left;

  padding-bottom: 50px;

}

.client-info h6 {

  color: #000;

  font-weight:400;

  font-size: 18px;

  color: #fff;

}

.client-info span {

  display: inline-block;

  color: #fff;

  font-size: 12px;

}

.sec-title.white-title h2 {

  color: #fff;

}

.owl-dots button {

  background: #fff !important;

  width: 10px;

  height: 10px;

  border-radius: 26px;

  margin: 0 5px;

  transition: 0.3s;

}

.owl-dots {

  text-align: center;

  margin-top: 50px;

}

.owl-dots button.active {

  width: 30px;

}



.features-logo {

width: 100%;

    height: auto;

    float: left;

    margin-top: 100px;

    padding-top: 80px;

    padding-bottom: 80px;

    position: relative;

           

        }





.partner-logos .owl-nav {width: 100%;}



.our-partner-section .prtnr-logo img {filter: grayscale(100%);}

.our-partner-section .prtnr-logo:hover img{filter: grayscale(0%);}

.our-partner-section{padding-top: 0;}

.partner-logos .owl-dots{display: none;}



.logo-small {

    margin-bottom: 20px;

}





.feature-content-text-five {

  padding-top: 60px;

  padding-left: 30px;

  padding-right:0px;

}



.feature-content-text-six-A {

  padding-top: 0px;

  padding-left: 30px;

  padding-right:0px;

}



.feature-content-text-six-A h2{font-size: 25px; color: #00000c;font-weight: 600; margin-bottom: 10px;    line-height: 41px;}

.feature-content-text-six-A p{font-size: 14px; color: #000; line-height: 20px;}

.three-sisty{width:100%;

    height:300px;

    margin: 28px auto;

    display: table; text-align: center;

}



.feature-content-text-five h2{font-size: 25px; color: #00000c;font-weight: 600; margin-bottom: 10px;}

.feature-content-text-five p{font-size: 14px; color: #000; line-height: 20px;}



.video-box{width: 100%; height: auto; float: left; border-radius: 35px; overflow: hidden;}



.feature-art-image {

  position: absolute;

  z-index: 1;

}

.feature-art-pattan-top-right-art{

  top: 115px;

  right: 0;

}

.feature-art-pattan-top-right-art img{width: 100%; height: auto;}





.feature-art-roket-top-right-art{

  top: 115px;

  right: 0;

}

.feature-art-roket-top-right-art img{width: 100%; height: auto;}





.feature-art-carcal-top-right-art{

  top:1px;

  right: 0;
z-index: -1;
}

.feature-art-carcal-top-right-art img{width: 100%; height: auto;}





.feature-art-social-top-left-art{

  top:1px;

  left: 0;

}



.feature-art-social-top-left-art img{width: 100%; height: auto;}



.feature-art-roket2-top-left-art{

      top: -183px;

    left: 22px;

}



.feature-art-roket2-top-left-art img{width: 100%; height: auto;

    transform: translatey(0px);

    animation: float 6s ease-in-out infinite;

}



@keyframes float {

    0% {

        transform: translatey(0px);

    }

    50% {

        transform: translatey(-40px);

    }

    100% {

        transform: translatey(0px);

    }

}





.icon-rocket {

    background-image:url(../images/facture-rc.png);

    background-repeat: no-repeat;

    height:486px;

  position: relative;

    width:249px;

  z-index: 10;



}



.icon {

  display: inline-block;

  position:absolute;

  right: 15px;

  z-index:1;

  top: 0px;

}



.icon-rocket {

    -webkit-animation-name: tada;

    -moz-animation-name: tada;

    -o-animation-name: tada;

    animation-name: tada;

}



@-webkit-keyframes line-1 {

  0%, 100% {

   left: 136px;

    top: 306px;

    -webkit-transform: scale(1) rotate(2deg);

    opacity: 0.6;

  }

  50% {

    -webkit-transform: scale(1) rotate(-2deg);

  }

}



@-webkit-keyframes line-2 {

  0%, 100% {

   left: 155px;

    top: 317px;

    -webkit-transform: scale(1) rotate(3deg);

  }

  50% {

    -webkit-transform: scale(1) rotate(-2deg);

  }

}







/*



.smoke {

  height: 7px;

  width: 7px;

  background: rgba(0,0,0,0.25);

  opacity: 0.6;

  position: absolute;

  border-radius: 30px;

  z-index: 1;

}



.line-1 {

  -webkit-animation-name: line-1;

  -moz-animation-name: line-1;

  animation-name: line-1;

   height:178px;

  width:113px;

  position: absolute;

  background: url(../images/fire2.png);

}



.line-2 {

  -webkit-animation-name: line-2 ;

  -moz-animation-name: line-2 ;

  animation-name:line-2 ;

   height:100px;

  width:61px;

  position: absolute;

  background: url(../images/fire3.png);

  background-repeat: no-repeat;

}











.line-1 {

  -webkit-transform: rotate(-362deg);

  -moz-transform: rotate(-362deg);

  transform: rotate(-362deg);

    left: 136px;

    top: 306px;

}



.line-2 {

  -webkit-transform: rotate(-359deg);

  -moz-transform: rotate(-359deg);

  transform: rotate(-359deg);

 left: 155px;

    top: 317px;

}



*/





.animated {

    -webkit-animation-duration: 1s;

       -moz-animation-duration: 1s;

         -o-animation-duration: 1s;

            animation-duration: 1s;

    -webkit-animation-fill-mode: both;

       -moz-animation-fill-mode: both;

         -o-animation-fill-mode: both;

            animation-fill-mode: both;

    -webkit-animation-iteration-count: infinite;

       -moz-animation-iteration-count: infinite;

         -o-animation-iteration-count: infinite;

            animation-iteration-count: infinite;

    -webkit-animation-direction: alternate;

       -moz-animation-direction: alternate;

         -o-animation-direction: alternate;

            animation-direction: alternate;

}



@-webkit-keyframes tada {

    0% {-webkit-transform: scale(1);}   

    10%, 20% {-webkit-transform: scale(1) rotate(-1deg);}

    30%, 50%, 70%, 90% {-webkit-transform: scale(1) rotate(2deg);}

    40%, 60%, 80% {-webkit-transform: scale(1) rotate(-1deg);}

    100% {-webkit-transform: scale(1) rotate(0);}

}



@-moz-keyframes tada {

    0% {-moz-transform: scale(1);}  

    10%, 20% {-moz-transform: scale(1) rotate(-1deg);}

    30%, 50%, 70%, 90% {-moz-transform: scale(1) rotate(2deg);}

    40%, 60%, 80% {-moz-transform: scale(1) rotate(-1deg);}

    100% {-moz-transform: scale(1) rotate(0);}

}



@keyframes tada {

    0% {transform: scale(1);}   

    10%, 20% {transform: scale(1) rotate(-1deg);}

    30%, 50%, 70%, 90% {transform: scale(1) rotate(2deg);}

    40%, 60%, 80% {transform: scale(1) rotate(-1deg);}

    100% {transform: scale(1) rotate(0);}

}





/*---------------------*/



.header {

  position:relative;

  text-align:center;

  /*background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);*/

}

 

.inner-header {

  height:65vh;

  width:100%;

  margin: 0;

  padding: 0;

}

 

.flex { /*Flexbox for containers*/

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

}

 

.waves {

  position:relative;

  width: 100%;

  height:15vh;

  margin-bottom:-7px; /*Fix for safari gap*/

  min-height:100px;

  max-height:150px;

}

 

.content {

  position:relative;

  height:20vh;

  text-align:center;

  background-color: white;

}

 

/* Animation */

 

.parallax > use {

  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;

}

.parallax > use:nth-child(1) {

  animation-delay: -5s;

  animation-duration: 20s;

}

.parallax > use:nth-child(2) {

  animation-delay: -10s;

  animation-duration: 5s;

}

.parallax > use:nth-child(3) {

  animation-delay: -15s;

  animation-duration: 20s;

}

.parallax > use:nth-child(4) {

  animation-delay: 0s;

  animation-duration: 10s;

}

@keyframes move-forever {

  0% {

   transform: translate3d(-90px,0,0);

  }

  100% { 

    transform: translate3d(85px,0,0);

  }

}

/*Shrinking for mobile*/

@media (max-width: 768px) {

  .waves {

    height:40px;

    min-height:40px;

  }

  .content {

    height:30vh;

  }

  h1 {

    font-size:24px;

  }

}



.features-about{

 position: relative;

    padding-top:140px;

    width: 100%;

    height: auto;

    float: left;

}

.feature-content {

  padding-bottom: 120px;

  position: relative;

  z-index: 2;

}





.feature-about-image{width: 100%; height: auto; padding: 5px; border: 2px solid #9a1118;}

.feature-about-image img{width: 100%; height: auto;}





.feature-content-slump{width: 100%; height: auto; float: left;}

.feature-content-slump h2{font-size: 35px; color: #a80000; font-weight: 600;}

.feature-content-text-twio {

  padding-top: 0px;

  padding-left: 30px;

  padding-right:0px;

}

.feature-content-slump-two{width: 100%; height: auto; float: left; padding-bottom: 50px;}

.feature-content-text-twio h3{font-family: "Google Sans"; font-size: 43px; color: #00000c;font-weight: 600; text-transform: uppercase; margin-bottom: 30px; position: relative;}

.feature-content-text-twio p{font-size: 16px; color: #222;}

.feature-content-text-twio h3:before{width: 150px; height: 3px; background: #c3151f; position: absolute;bottom: -8px; content: '';  }





.inner-bg{width: 100%; height:100%;float: left; position: relative;}

.inner-bg img{width: 100%; height: auto;}



.latest-overlay {

    height: 100%;

    position: absolute;

    top: 0;

    width: 100%;

    padding: 50px;

    z-index: 1;

}



.banner_content_two {

    width: 100%;

    height: auto;

    font-size: 35px;

padding: 0px 0px;

    text-align: center;

    margin-top: 100px;

    z-index: 999;

}



.banner_content_two h2 {

    font-family: "Google Sans"; 

    font-size: 55px;

    font-weight: 600;

    border: 0px;

    color: #096867;

}

.ss-service{width: 100%; height: auto; float: left; padding:0px 0px 55px; border-bottom: 1px solid #e0e0e0;}

.elementor-widget-wrap{width: 100%; height: auto; float: left; padding: 25px 0px;}



.elementor-widget-wrap h2{font-family: "Google Sans"; 

    font-size: 35px;

    font-weight: 600; margin-bottom: 20px; color: #a80000;}



.elementor-widget-wrap p{color: #222;}



.elementor-widget-wrap ul{display: block; float: left;}

.elementor-widget-wrap ul li{font-size: 16px; line-height: 25px; margin-bottom:8px; color: #222;}



.elementor-element-populated{width: 100%; height: auto; background: linear-gradient(

90deg, rgba(200,26,59,1) 0%, rgba(184,3,37,1) 75%); float: left; padding:25px 25px;}



.elementor-widget-wrap-two{width: 100%; height: auto; float: left; margin-bottom: 15px;}

.elementor-widget-wrap-two h2{font-size: 30px; color: #fae051;margin-bottom: 15px; font-family: "Google Sans"; font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid #fae051;}

.elementor-widget-wrap-two p{color: #fff; font-weight: 400; font-size: 16px; margin-bottom: 15px;}



.contact-form {

    width: 100%;

    background: #090808;

    border: 1px solid #f5f8fb;

    padding: 35px;

    margin-bottom: 25px;

}



.contact-form .contact-input {

    padding: 20px 20px;

    border: 1px solid #e2ecf9;

    border-radius: 2px;

    margin-bottom: 30px;

    box-shadow: unset;

    background: #fff;

}

.btn-send {

    background: linear-gradient(90deg, rgba(159,17,44,1) 0%, rgba(154,2,30,1) 75%);

    padding: 12px 35px;

    border-radius: 30px;

    color: #ffffff;

    font-size: 18px;

    font-weight: 400;

    margin-top: 15px;
    border: 0px;

}





.priPrivacy-st{width: 100%; height: auto; float: left; margin-top: 80px;}

.priPrivacy-st strong{color: #a80000; font-size: 16px; font-weight:600 ;}

.priPrivacy-st a{color: #a80000;}

.priPrivacy-st p{color: #a80000; font-size: 16px; color: #222; margin-bottom: 15px;}



.priPrivacy-map{width: 100%; height: auto; float: left; margin-top: 30px;}



.google-map{width: 100%; height: 260px; float: left; border: 1px solid #000; padding: 3px; margin-bottom: 25px;}

.google-map img{width: 100%; height: 100%; }

.st-52{width: 100%; height: auto; float: left; font-size: 16px; line-height: 25px; color: #222;margin-bottom: 35px;}





.pay-now1 {

    width: auto;

    height: auto;

    position: fixed;

    float: right;

    right: -25px;

    margin-top: 18em;

    padding: 10px 15px;

    z-index: 999999;

    top: 0px;

    border-radius: 10px 10px 0px 0px;

    background: #a80000;

    -webkit-transform: rotate(

-90deg

);

    -moz-transform: rotate(-90deg);

    -ms-transform: rotate(-90deg);

    -o-transform: rotate(-90deg);

}

.pay-now1 span a{font-size: 16px; color: #fff;}





.features-media{width: 100%; height: auto; padding: 100px 0px; float: left;}



.media-jk{ width: 100%; height:250px; border: 2px solid #9a021e; padding: 3px; overflow: hidden; margin-bottom: 25px; }

.media-jk img{width: 100%; height:auto;}



.play-now{width: auto; height: auto; float: left; background: #a80000; border-radius: 10px; font-size: 14px; padding:8px 15px; text-align: center;  color: #fff;}

a:hover.play-now{ text-decoration: none; color: #fff; }