body { font-family: 'Roboto', sans-serif; font-weight: normal; font-style: normal; font-size: 14px; color: #949494; }
a, .btn  { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }
a:focus { text-decoration: none !important; }
a:focus, a:hover { color: #8E54E9; text-decoration: none !important; }
a, button, input { outline: medium none !important; color: #8E54E9; }
.uppercase { text-transform: uppercase; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #2c2e3e; margin-top: 0px; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }
label { font-weight: normal; }

h1 { font-size: 36px; font-style: normal; font-weight: 700; line-height: 40px; }
h2 { font-size: 32px; font-style: normal; font-weight: 600; line-height: 38px; }
h3 { font-size: 28px; font-style: normal; font-weight: 600; line-height: 32px; }
h4 { font-size: 22px; font-style: normal; font-weight: 500; line-height: 26px; }
h5 { font-size: 18px; font-style: normal; font-weight: 600; line-height: 18px; }
h6 { font-size: 16px; font-style: normal; font-weight: 600; line-height: 18px; }

.container { max-width: 1400px; }

.page-section-ptb { padding: 70px 0; }
.page-section-pt { padding-top: 70px; }
.page-section-pb { padding-bottom: 70px; }

 .mb-30 { margin-bottom: 30px; }

/*bg-gradient*/
.bg-gradient { background: #8E54E9; background: -moz-linear-gradient(left, #8E54E9 0%, #4776E6 100%) !important; background: -webkit-gradient(linear, left, right, color-stop(0%, #8E54E9), color-stop(100%, #4776E6)) !important; background: -webkit-linear-gradient(left, #8E54E9 0%, #4776E6 100%) !important;  background: -o-linear-gradient(left, #8E54E9 0%, #4776E6 100%) !important;  background: -ms-linear-gradient(left, #8E54E9 0%, #4776E6 100%) !important; background: linear-gradient(to right, #8E54E9 0%, #4776E6 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ) !important; }
.bg-light { background: #faf8fd !important; }

/*button*/
.button {  padding: 14px 30px; border-radius: 50px; color: #ffffff; font-size: 16px; box-shadow: 0px 10px 40px rgba(142, 84, 233, 0.6); display: inline-block;
	background: #8E54E9; background: -moz-linear-gradient(left, #8E54E9 0%, #4776E6 100%); background: -webkit-gradient(linear, left, right, color-stop(0%, #8E54E9), color-stop(100%, #4776E6)); background: -webkit-linear-gradient(left, #8E54E9 0%, #4776E6 100%); background: -o-linear-gradient(left, #8E54E9 0%, #4776E6 100%);
    background: -ms-linear-gradient(left, #8E54E9 0%, #4776E6 100%);  background: linear-gradient(to right, #8E54E9 0%, #4776E6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); }
.button:hover, .button:active, .button:focus { color: #ffffff; }
.button.button-white { background: #ffffff; color: #8E54E9; }
.button.button-white:hover { background: #2c2e3e; color: #ffffff; }

/*text color*/
.text-primary { color: #8E54E9 !important; }
.text-gradient {  background: linear-gradient(135deg, #8E54E9 0%, #4776E6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-title { color: #876eea !important; }

/*header*/
.header { position: absolute; width: 100%; z-index: 999; padding: 40px 0; }
.header .container-fluid { padding: 0 260px; }
.header .nav .nav-item .nav-link  { font-size: 16px;  }

/*section-title*/
.section-title { position: relative; margin-bottom: 60px; }
.section-title .big-title { position: relative; }
.section-title .big-title span {  position: absolute; left: 0; right: 0; z-index: 0; display: block;  font-size: 160px; line-height: 160px; font-weight: 800; text-transform: uppercase; color: #faf8fd; }
.section-title .title { font-size: 40px; line-height: 40px;  display: inline-block;   position: relative; margin-top: 66px; }
.section-title .des {  margin-top: 50px; font-weight: 600; font-size: 16px; color: #2c2e3e; }

/*banner*/
.banner-main { margin-bottom: 120px; position: relative; }
.banner-main:before { background-image: url(../images/banner-bg.png); content: ""; width: 100%; height: 100%; position: absolute; }


.banner { width: 100%; height: 400px; position: relative; z-index: 5; }
.banner-content { padding: 100px 0 100px; }
.banner-content h1  { font-size: 44px; line-height: 44px; }
.banner-content span  { font-size: 18px;  }
.banner-content strong  { font-size: 22px;  }

/*animation*/
.parallax-banner { position: relative; z-index: 10; }
.parallax-banner .scene { padding: 0; margin: 0; height: 100%; }
.parallax-banner .banner-content h1 { display: block; margin-bottom: 15px; line-height: 55px; font-weight: 600; }
.parallax-banner .banner-content  strong { font-weight: 700; position: relative; }
.parallax-banner .layer:nth-child(1) { position: absolute; left:2%; bottom: -20%; }
.parallax-banner .layer:nth-child(2) { position: absolute; left: 10%; top: 10%; }
.parallax-banner .layer:nth-child(3) {  position: absolute; left:26%; bottom: -7%;}
.parallax-banner .layer:nth-child(4) { position: absolute; left: 0; right: 0; z-index: -1; width: 100%; text-align: center; }
.parallax-banner .layer:nth-child(5) { position: absolute; right: 26%; top: 18%; }
.parallax-banner .layer:nth-child(6) {  position: absolute; right: 7%; top: -8%; }
.parallax-banner .layer:nth-child(7) { position: absolute; right:6%; bottom: -20%;}

/*demo-item*/
.demo-item { box-shadow: 0px 5px 20px rgba(142, 84, 233, 0.05); background: #ffffff;  height: 100%; }
.demo-item .demo-image { padding: 30px 30px 0 30px; background: #ffffff; position: relative; overflow: hidden; }
.demo-item .demo-image img { position: relative; z-index: 1; width: 100%; }
.demo-item .demo-info { padding: 30px; background: #ffffff; }
.demo-item .demo-info a { font-size: 18px; font-weight: 600; margin-bottom: 6px; display: block; color: #2c2e3e; }
.demo-item .demo-info a:hover { color: #8E54E9; }
.demo-item .demo-info p { line-height: 24px; }
.demo-item .demo-image:before { position: absolute; content: ""; left: 0; right: 0; top: 0; width: 100%; height: 100%; transition: all 0.5s ease-in-out; opacity: 0;
	background: #8E54E9; background: -moz-linear-gradient(left, #8E54E9 0%, #4776E6 100%) !important;    background: -webkit-gradient(linear, left, right, color-stop(0%, #8E54E9), color-stop(100%, #4776E6)) !important;   background: -webkit-linear-gradient(left, #8E54E9 0%, #4776E6 100%) !important;  background: -o-linear-gradient(left, #8E54E9 0%, #4776E6 100%) !important; background: -ms-linear-gradient(left, #8E54E9 0%, #4776E6 100%) !important;  background: linear-gradient(to right, #8E54E9 0%, #4776E6 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ) !important; }
.demo-item:hover .demo-image:before { opacity: 1;  }
.demo-item:hover { box-shadow: 0px 5px 40px rgba(142, 84, 233, 0.1);}

.widgets { padding: 300px 0; background-position: center center; }

/*feature*/
.core-feature { box-shadow: 1px 1px 30px rgba(70, 64, 80, 0.07); padding: 50px 40px; background: #ffffff; margin-top: -80px; }
.feature .feature-icon {  display: table-cell; vertical-align: top; }
.feature .feature-icon i { font-size: 40px;  line-height: 40px; background: linear-gradient(135deg, #00c7b1 0%, #00de8c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.feature .feature-info { padding-left: 20px; display: table-cell; vertical-align: top;}

/*component*/
.component-main ul { padding: 0; margin: 0; }
.component-main ul li {  display: inline-block; list-style: inherit; width: 10.8%; }
.component { padding: 30px 10px; }
.component i { font-size: 30px; line-height: 30px; display: block; margin-bottom: 20px;  background: linear-gradient(to right, #8E54E9 0%, #4776E6 100%);  -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.component h6 { text-transform: uppercase; margin-bottom: 0; font-weight: 500; font-size: 14px; }

/*img-side*/
.img-side { padding: 0; position: absolute !important;top: 50px; height: 100%; overflow: hidden; z-index: 100; right: 0; }

/*media responsive*/
@media (max-width:1400px) {
.parallax-banner .layer:nth-child(1) { left: 0%; }
.parallax-banner .layer:nth-child(2) { left: 0%; }
.parallax-banner .layer:nth-child(3) { left: 17%; }
.parallax-banner .layer:nth-child(5) { right: 18%; }
.parallax-banner .layer:nth-child(6) { right: 2%; }
.parallax-banner .layer:nth-child(7) { right: 0%; }

}

@media (max-width:1199px) {
.parallax-banner .layer:nth-child(1) { left: 0%; }
.parallax-banner .layer:nth-child(2) { left: 0%; }
.parallax-banner .layer:nth-child(3) { left: 15%; }
.parallax-banner .layer:nth-child(5) { right: 18%; }
.parallax-banner .layer:nth-child(6) { right: -2%; }
.parallax-banner .layer:nth-child(7) { right: 0%; }

}


@media (max-width:1024px) {
.component-main ul li { width: 31.8%; }

}

@media (max-width:991px) {
.page-section-ptb { padding: 50px 0; }
.page-section-pt { padding-top: 50px; }
.page-section-pb { padding-bottom: 50px; }
.mt-md-30 { margin-top: 30px; }
.section-title .big-title span { font-size: 100px; line-height: 100px; }
.section-title .title { margin-top: 30px; }
.section-title .des  { margin-top: 30px; }
.core-feature { padding: 80px 40px 50px; }

.parallax-banner .layer:nth-child(1) { display: none !important; }
.parallax-banner .layer:nth-child(2) { display: none !important; }
.parallax-banner .layer:nth-child(3) { display: none !important; }
.parallax-banner .layer:nth-child(5) { display: none !important; }
.parallax-banner .layer:nth-child(6) { display: none !important; }
.parallax-banner .layer:nth-child(7) { display: none !important; }
.banner { height: 100%; }
.banner-main { margin-bottom: 20px; }
.parallax-banner .layer:nth-child(4) { position: relative; }

}

@media (max-width:767px) {
.page-section-ptb { padding: 40px 0; }
.page-section-pt { padding-top: 40px; }
.page-section-pb { padding-bottom: 40px; }
.mt-sm-20 { margin-top: 20px; }
.mt-sm-30 { margin-top: 30px; }
.section-title .big-title span { font-size: 80px; line-height: 80px; }
.section-title .title { font-size: 24px; line-height: 20px; margin-top: 26px; }
.section-title .des { margin-top: 30px; }
.banner-content { padding: 50px 0 50px; }
.banner-main { margin-bottom: 30px; }
.parallax-banner .banner-content h1 { line-height: 45px; font-size: 34px; }
.core-feature { padding: 60px 20px 50px; }
.button { padding: 10px 30px; }

}

@media (max-width:574px) {
h3 { font-size: 20px; }
.display-2 { font-size: 3rem; }
.core-feature {  padding: 40px 14px 40px; }
.section-title .big-title span { font-size: 50px; line-height: 50px;  }
.section-title .title { margin-top: 10px; }
.section-title .des { margin-top: 20px; }
.parallax-banner .banner-content h1 { line-height: 25px;  font-size: 20px; }

}