/*==========

Template Name: Shivaa

==========*/


/*==========
----- CSS INDEX -----
1.Fonts CSS
2.Common CSS
3.Loader CSS
4.Banner CSS
5.Perfect Demos CSS
6.Inner Pages Demos CSS
7.Perfect Design CSS
8.Core Feature CSS
9.Footer CSS
10.Scroll To Top CSS
11.Bubbles Animation CSS
12.Responsive CSS
==========*/

/*==========Fonts CSS Start==========*/
@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), 
    url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), 
    url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), 
    url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), 
    url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/*==========Fonts CSS End==========*/


/*==========Common CSS Start==========*/
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden !important;
    font-size: 15px;
    line-height: 24px;
    color: #777777;
}

.main {
    width: 100%;
    overflow-x: hidden !important;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}

input,
input:focus,
input:hover,
button,
button:hover,
button:focus {
    outline: none;
}

img {
    width: auto;
    max-width: 100%;
}

p {
    font-size: 15px;
    line-height: 24px;
    color: #777777;
    font-weight: normal;
    margin-bottom: 12px;
}

.h1-title {
    font-size: 80px;
    line-height: 90px;
    color: #ffffff;
    font-weight: 800;
    font-family: 'Jost', sans-serif;
    margin-bottom: 32px;
}

.h1-title span {
    display: block;
}

.sub-title {
    display: block;
    font-size: 22px;
    line-height: 28px;
    color: #7a5afc;
    font-weight: bold;
    font-family: 'Jost', sans-serif;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 10px;
}

.h2-title {
    font-size: 65px;
    line-height: 75px;
    font-weight: bold;
    color: #000025;
    font-family: 'Jost', sans-serif;
    margin-bottom: 24px;
    position: relative;
}

.h3-title {
    font-size: 25px;
    line-height: 35px;
    color: #777777;
    font-weight: bold;
    font-family: 'Jost', sans-serif;
    margin-bottom: 0;
}

.h4-title {
    font-size: 40px;
    line-height: 50px;
    color: #ffffff;
    font-weight: bold;
    font-family: 'Jost', sans-serif;
    margin-bottom: 17px;
}   

.sec-btn {
    width: 210px;
    height: 60px;
    display: inline-block;
    font-size: 15px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 500;
    text-transform: uppercase;
    padding: 15px 5px;
    background: linear-gradient(to right, #f56915, #f0a80e);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    text-align: center;
    border: none;
    outline: none;
    transition: 0.5s;
}

.sec-btn:hover {
    color: #ffffff;
}

.sec-btn:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, #f56915, #f0a80e);
    transition: 0.3s;
    z-index: 0;
}

.sec-btn:hover:before {
    top: 0;
}

.sec-btn span {
    position: relative;
    z-index: 1;
}

.sec-btn span img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.slick-list {
    padding: 0 !important;
}

.slick-slide {
    outline: none;
}

.slick-dots li.slick-active button:before,
.slick-dots li button:before,
.slick-dots li button:hover:before, 
.slick-dots li button:focus:before {
    display: none;
}

.slick-dots {
    bottom: -50px;
    font-size: 0;
    line-height: 1;
}

.slick-dots li {
    width: auto;
    height: auto;
    margin: 0 6px;
}

.slick-dots li button {
    width: 8px;
    height: 8px;
    background: #cccccc;
    border-radius: 50%;
    transition: 0.3s;
}

.slick-dots li button:hover, 
.slick-dots li.slick-active button {
    background: #ff5066;
}

.slick-arrow {
    position: absolute;
    bottom: -75px;
    left: calc(50% - 50px);
    transform: translate(-50%);
    width: 51px;
    height: 25px;
    background: transparent;
    border: none;
    outline: none;
    background-image: url('../images/left-arrow.png');
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.3s;
    z-index: 1;
}

.slick-arrow.next-arrow {
    background-image: url('../images/right-arrow.png');
    left: calc(50% + 50px);
}

.slick-arrow:hover {
    filter: brightness(10);
}

.back-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.form-box {
    display: block;
    position: relative;
    font-size: 0;
    line-height: 1;
    margin-bottom: 20px;
}

.form-box.submit-btn {
	margin-top: 10px;
}

.form-input {
    width: 100%;
    height: 60px;
    background: #ffffff;
    font-size: 15px;
    line-height: 24px;
    color: #777777;
    border: none;
    outline: none;
    padding: 12px 30px;
    border: 1px solid #b7b7b7;
    border-radius: 4px;
    box-shadow: none;
}

textarea.form-input {
    height: 106px;
    resize: none;
    padding: 18px 30px;
    margin-bottom: 0;
}

.form-input::placeholder {
    color: #5f656a;
}
/*==========Common CSS End==========*/


/*==========Loader CSS Start==========*/
.loader-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    z-index: 999;
}

.loader-design {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.gegga {
    width: 0;
}

.loader-design svg {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

.snurra {
    filter: url(#gegga);
}

.stopp1 {
    stop-color: #f56915;
}

.stopp2 {
    stop-color: #f0a80e;
}

.halvan {
    animation: Snurra1 10s infinite linear;
    stroke-dasharray: 180 800;
    fill: none;
    stroke: url(#gradient);
    stroke-width: 23;
    stroke-linecap: round;
}

.strecken {
    animation: Snurra1 3s infinite linear;
    stroke-dasharray: 26 54;
    fill: none;
    stroke: url(#gradient);
    stroke-width: 23;
    stroke-linecap: round;
}

.skugga {
    filter: blur(5px);
    opacity: 0.3;
    position: absolute;
    transform: translate(3px, 3px);
}

@keyframes Snurra1 {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -403px;
    }
}
/*==========Loader CSS End==========*/


/*==========Banner CSS Start==========*/
.main-banner {
    position: relative;
    padding-top: 100px;
    margin-bottom: 180px;
    background-attachment: fixed;
}

.banner-content {
    text-align: center;
    padding: 0 50px;
}

.banner-logo {
    margin-bottom: 40px;
}

.banner-logo img {
    width: 253px;
    height: auto;
}

.banner-img-box {
    text-align: center;
    margin-top: 130px;
    margin-bottom: -180px;
}

.banner-img {
    position: relative;
    display: inline-block;
}

.banner-img img {
    width: 831px;
    height: auto;
    position: relative;
    z-index: 0;
}

.banner-img-shape {
    position: absolute;
    width: 370px;
    height: 215px;
    background-position: top center;
    border-radius: 10px;
    box-shadow: 2px 2px 60px rgba(0,0,0,0.2);
    z-index: 1;
}

.banner-img-shape.shape1 {
    top: -65px;
    left: -204px;
    -webkit-animation: movedelement 5s linear infinite;
    animation: movedelement 5s linear infinite;
}

.banner-img-shape.shape2 {
    top: -138px;
    right: -169px;
    -webkit-animation: movedelement2 10s linear infinite;
    animation: movedelement2 10s linear infinite;
}

.banner-img-shape.shape3 {
    top: 165px;
    right: -204px;
    -webkit-animation: movedelement3 8s linear infinite;
    animation: movedelement3 8s linear infinite;
}

@keyframes movedelement {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
    25% {
        -webkit-transform: translate(10px, 10px);
        transform: translate(10px, 10px);
    }
    50% {
        -webkit-transform: translate(5px, 5px);
        transform: translate(5px, 5px);
    }
    75% {
        -webkit-transform: translate(10px, -5px);
        transform: translate(10px, -5px);
    }
    to {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}

@keyframes movedelement2 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
    25% {
        -webkit-transform: translate(-10px, -10px);
        transform: translate(-10px, -10px);
    }
    50% {
        -webkit-transform: translate(-5px, -5px);
        transform: translate(-5px, -5px);
    }
    75% {
        -webkit-transform: translate(-10px, 5px);
        transform: translate(-10px, 5px);
    }
    to {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}

@keyframes movedelement3 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
    25% {
        -webkit-transform: translate(15px, 15px);
        transform: translate(15px, 15px);
    }
    50% {
        -webkit-transform: translate(8px, 8px);
        transform: translate(8px, 8px);
    }
    75% {
        -webkit-transform: translate(15px, -8px);
        transform: translate(15px, -8px);
    }
    to {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}
/*==========Banner CSS End==========*/


/*==========Perfect Demos CSS Start==========*/
.main-demos {
    position: relative;
    padding: 91px 0 120px 0;
}

.center-title {
    text-align: center;
    margin-bottom: 45px;
}

.center-title p {
    display: block;
    width: 600px;
    max-width: 100%;
    margin: auto;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
}

.demos-list {
    margin-bottom: -47px;
}

.demo-box {
    position: relative;
    text-align: center;
    margin-bottom: 47px;
}

.demo-img {
    width: 100%;
    height: 700px;
    border-radius: 10px;
    box-shadow: 2px 2px 60px rgba(0,0,0,0.1);
    position: relative;
    background-size: 100%;
    background-position: top center;
    transition: 2s ease-in-out;
    overflow: hidden;
    margin-bottom: 22px;
}

.demo-img:hover {
    background-position: bottom center;
}

.demo-img:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #010f2e;
    border-radius: 10px;
    opacity: 0;
    transition: 0.3s;
    z-index: 0;
}

.demo-img:hover:before {
    opacity: 0.5;
}

.demo-img a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0;
    z-index: 1;
}

.demo-img:hover a {
    opacity: 1;
}
/*==========Perfect Demos CSS End==========*/


/*==========Inner Pages Demos CSS Start==========*/
.main-inner-demos {
    position: relative;
    padding: 113px 0 120px 0;
    background-attachment: fixed;
}

.inner-demos-title .h2-title,
.inner-demos-title p {
    color: #ffffff;
}

.inner-pages-box {
    width: 100%;
    height: 490px;
    background-size: 100%;
    background-position: top center;
    border-radius: 10px;
    box-shadow: 2px 2px 60px rgba(0,0,0,0.2);
    transition: 1s ease-in-out;
}

.inner-pages-box:hover {
    background-position: bottom center;
}

.main-inner-pages-slider {
    padding-bottom: 75px;
}

.inner-pages-slider .slick-list {
    overflow: visible;
}
/*==========Inner Pages Demos CSS End==========*/


/*==========Perfect Design CSS Start==========*/
.main-design {
    position: relative;
    padding: 113px 0 120px 0;
}

.design-img {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 2px 60px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.design-img:last-child {
    margin-bottom: 0;
}
/*==========Perfect Design CSS End==========*/


/*==========Core Feature CSS Start==========*/
.main-feature {
    position: relative;
    padding: 113px 0 120px 0;
    background: #f7f7f7;
}

.main-feature .container-fluid {
    padding: 0 100px;
}

.core-feature-list {
    margin-bottom: -30px;
}

.core-features {
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 1px 1px 60px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    padding: 20px 0;
    text-align: center;
    transition: all 0.5s;
    border: 1px solid #FF5166;
}
.core-features:hover{
    transition:all 0.5s;
    transform:scale(1.1); 
}
.core-features .circle img {
    display: table;
    height: 80px;
    margin: 0 auto;
    width: 80px;
}
.core-features h3 {
    color: #505c76;
    font-size: 14px;
    margin-top: 10px;
    text-transform: capitalize;
    margin-bottom: 0;
}
/*==========Core Feature CSS End==========*/


/*==========Footer CSS Start==========*/
.site-footer {
    position: relative;
    padding-top: 112px;
    background-attachment: fixed;
}

.footer-title .h2-title,
.footer-title p {
    color: #ffffff;
}

.footer-form {
    text-align: center;
    margin-bottom: 50px;
}

.footer-form form {
    position: relative;
    display: inline-block;
}

.footer-form input {
    width: 570px;
    height: 70px;
    background: #ffffff;
    border-radius: 4px;
    border: none;
    outline: none;
    padding: 10px 190px 10px 30px;
    font-size: 15px;
    color: #777777;
}

.footer-form .sec-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 180px;
}

.requirement-box {
    display: block;
    width: 640px;
    max-width: 100%;
    background: linear-gradient(to right, #7859fc, #a756f9);
    border-radius: 4px;
    margin: 0 auto 120px auto;
    text-align: center;
    padding: 37px 10px 48px 10px;
}

.requirement-box p {
    font-size: 25px;
    line-height: 35px;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 0;
}

.requirement-box p a {
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;
    transition: 0.3s;
}

.requirement-box p a:hover {
    color: #f0a80e;
}

.copy-right {
    background: #051b4c;
    text-align: center;
    padding: 18px 0;
}

.copy-right p {
    color: #ffffff;
    margin-bottom: 0;
}

.copy-right p a {
    color: #a756f9;
    transition: 0.3s;
}

.copy-right p a:hover {
    color: #f0a80e;
    text-decoration: underline;
}
/*==========Footer CSS End==========*/


/*==========Scroll To Top CSS Start==========*/
.scroll-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    background: linear-gradient(to right, #f56915, #f0a80e, #f0a80e, #f56915);
    background-size: 200% 100%;
    background-position: left center;
    font-size: 35px;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    border-radius: 4px;
    border: none;
    transition: 0.3s;
    z-index: 50;
    display: none;
}

.scroll-top:hover {
    background-position: right center;
    color: #ffffff;
}

.scroll-top i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    line-height: 10px;
}
/*==========Scroll To Top CSS End==========*/


/*==========Bubbles Animation CSS Start==========*/
.bubbles_wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 990;
    overflow: hidden;
    pointer-events: none;
}

@-webkit-keyframes animateBubble {
    0% {
        margin-top: 20%
    }
    to {
        margin-top: -30%
    }
}

@-moz-keyframes animateBubble {
    0% {
        margin-top: 20%
    }
    to {
        margin-top: -30%
    }
}

@keyframes animateBubble {
    0% {
        margin-top: 20%
    }
    to {
        margin-top: -30%
    }
}

@-webkit-keyframes sideWays {
    0% {
        margin-left: 0
    }
    to {
        margin-left: 25px
    }
}

@-moz-keyframes sideWays {
    0% {
        margin-left: 0
    }
    to {
        margin-left: 25px
    }
}

@keyframes sideWays {
    0% {
        margin-left: 0
    }
    to {
        margin-left: 25px
    }
}

.x1 {
    -webkit-animation: animateBubble 15s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 15s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 6%;
    top: 45%;
    background: #f56915;
}

.x2 {
    -webkit-animation: animateBubble 10s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 10s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 5%;
    top: 80%;
    background: #f0a80e;
}

.x3 {
    -webkit-animation: animateBubble 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 10%;
    top: 40%;
    background: #ff0000;
}

.x4 {
    -webkit-animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
    animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
    left: 20%;
    top: 0;
    background: #73f765;
}

.x5 {
    -webkit-animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 30%;
    top: 50%;
    background: #66d6ff;
}

.x6 {
    -webkit-animation: animateBubble 11s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 11s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 50%;
    top: 0;
    background: #bf3c80;
}

.x7 {
    -webkit-animation: animateBubble 10s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 10s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 65%;
    top: 70%;
    background: #73f765;
}

.x8 {
    -webkit-animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
    animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
    left: 80%;
    top: 10%;
    background: #ffb62b;
}

.x9 {
    -webkit-animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 90%;
    top: 50%;
    background: #c74889;
}

.x10 {
    -webkit-animation: animateBubble 16s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 16s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 80%;
    top: 80%;
    background: #66d6ff;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    box-shadow: none;
    width: 5px;
    height: 5px;
}
/*==========Bubbles Animation CSS End==========*/


/*==========Responsive CSS Start==========*/
@media screen and (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }
}

@media screen and (max-width: 1199px) {
    .h2-title {
        font-size: 60px;
        line-height: 70px;
    }
    .banner-content {
        padding: 0;
    }
    .banner-img img {
        width: 750px;
    }
    .banner-img-shape {
        width: 320px;
        height: 200px;
    }
    .banner-img-shape.shape1 {
        left: -180px;
    }
    .banner-img-shape.shape3 {
        right: -180px;
    }
    .inner-pages-box {
        height: 420px;
    }
    .main-feature .container-fluid {
        padding: 0 30px;
    }
}

@media screen and (max-width: 991px) {
    .h1-title {
        font-size: 60px;
        line-height: 75px;
    }
    .banner-img img {
        width: 600px;
    }
    .banner-img-shape {
        width: 250px;
        height: 150px;
    }
    .banner-img-shape.shape1 {
        left: -100px;
    }
    .banner-img-shape.shape2 {
        top: -100px;
        right: -100px;
    } 
    .banner-img-shape.shape3 {
        right: -130px;
    }
    .h2-title {
        font-size: 50px;
        line-height: 60px;
    }
    .main-demos {
        padding: 51px 0 80px 0;
    }
    .main-inner-demos,
    .main-design,
    .main-feature {
        padding: 73px 0 80px 0;
    }
    .demo-img {
        height: 450px;
    }
    .site-footer {
        padding-top: 72px;
    }
    .requirement-box {
        margin-bottom: 80px;
    }
}

@media screen and (max-width: 767px) {
    .main-banner {
        padding-top: 80px;
        margin-bottom: 100px;
    }
    .banner-logo {
        margin-bottom: 30px;
    }
    .banner-logo img{
        width: 204px;
    }
    .sub-title {
        font-size: 18px;
        line-height: 24px;
    }
    .h1-title {
        font-size: 42px;
        line-height: 55px;
    }
    .h2-title {
        font-size: 40px;
        line-height: 50px;
    }
    .h4-title {
        font-size: 30px;
        line-height: 40px;
    }
    .center-title {
        margin-bottom: 30px;
    }
    .center-title p {
        font-size: 16px;
        line-height: 26px;
    }
    .banner-img-box {
        margin-top: 100px;
        margin-bottom: -100px;
    }
    .banner-img img {
        width: 500px;
    }
    .banner-img-shape {
        width: 220px;
        height: 120px;
    }
    .banner-img-shape.shape1{
        top: -30px;
    } 
    .banner-img-shape.shape2 {
        top: -50px;
        right: -80px;
    }
    .banner-img-shape.shape3 {
        right: -100px;
        top: 130px;
    }
    .main-demos {
        padding: 51px 0 60px 0;
    }
    .demo-img {
        height: 400px;
    }
    .main-inner-demos, 
    .main-design, 
    .main-feature {
        padding: 53px 0 60px 0;
    }
    .site-footer {
        padding-top: 52px;
    }
    .footer-form form {
        display: block;
    }
    .footer-form input {
        width: 100%;
        padding: 10px 30px;
        text-align: center;
    }
    .footer-form .sec-btn {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 20px;
    }
    .requirement-box {
        margin-bottom: 60px;
    }
    .requirement-box p {
        font-size: 20px;
        line-height: 30px;
    }
}

@media screen and (max-width: 575px) {
    .loader-design {
        transform: translate(-50%,-50%) scale(0.6);
    }
    .container {
        padding: 0 30px;
    }
    .banner-img img {
        width: 310px;
    }
    .banner-img-shape {
        width: 150px;
        height: 90px;
    }
    .banner-img-shape.shape1 {
        left: -40px;
    }
    .banner-img-shape.shape2 {
        right: -40px;
    }
    .banner-img-shape.shape3 {
        right: -50px;
        top: 90px;
    }
}

@media screen and (max-width: 375px) {
    .container,
    .main-feature .container-fluid {
        padding: 0 15px;
    }
    .scroll-top {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
    .main-banner {
        padding-top: 60px;
        margin-bottom: 60px;
    }
    .banner-logo img {
        width: 190px;
    }
    .h1-title {
        font-size: 38px;
        line-height: 50px;
    }
    .h2-title {
        font-size: 35px;
        line-height: 45px;
    }
    .banner-img-box {
        margin-top: 80px;
        margin-bottom: -60px;
    }
    .sub-title {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 5px;
    }
    .demo-img,
    .inner-pages-box {
        height: 350px;
    }
    .core-feature-list .row {
        margin-right: -10px;
        margin-left: -10px;
    }
    .core-feature-list .row .col-6 {
        padding: 0 10px;
    }
    .footer-form input {
        padding: 10px 20px;
    }
    .requirement-box p {
        font-size: 16px;
        line-height: 26px;
    }
}
/*==========Responsive CSS End==========*/

.footer-form .dzSubscribeMsg p{
	width: 100%!important;
    margin: 10px 0 0!important;
}

/* Support and Buy Button */
.theme-btn{
	background-color: #ffffff;
    border-radius: 40px;
    bottom: 10px;
    color: #ffffff;
    display: table;
    height: 50px;
    left: 10px;
    min-width: 50px;
    position: fixed;
    text-align: center;
	z-index: 9999;
}
.theme-btn i{
	font-size: 22px;
    line-height: 50px;
}
.theme-btn.bt-support-now{
	background: #1ebbf0; /* Old browsers */
	background: -moz-linear-gradient(to right, #ff5066, #fc9d44, #fc9d44, #ff5066)); /* FF3.6-15 */
	background: -webkit-linear-gradient(to right, #ff5066, #fc9d44, #fc9d44, #ff5066)); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #ff5066, #fc9d44, #fc9d44, #ff5066); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background-size: 400% 100%;
	bottom: 70px;
}
.theme-btn.bt-buy-now{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1fdf61+0,88BA46+100 */
	background: #1fdf61; /* Old browsers */
	background: -moz-linear-gradient(top,  #A3D179 0%, #6e9c31 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #A3D179 0%,#6e9c31 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #A3D179 0%,#6e9c31 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1fdf61', endColorstr='#88BA46',GradientType=0 ); /* IE6-9 */
}
.theme-btn:hover{
	color:#fff;
	padding: 0 20px;
}
 .theme-btn span{
	display: table-cell;
	vertical-align: middle;
    font-size: 16px;
    letter-spacing: -15px;
    opacity: 0;
	line-height: 50px;
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	text-transform:uppercase;
}
.theme-btn:hover span{
	opacity:1;
	letter-spacing: 1px;
	padding-left:10px;
}
.at-expanding-share-button[data-position="bottom-left"]{
	bottom: 130px !important;
}
/* Support and Buy Button END */