@font-face {
  font-family: 'JosefinSans Regular';
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/JosefinSans-Regular.ttf);
  }

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width:768px) {
    .container {
        width: 750px
    }
}

@media (min-width:992px) {
    .container {
        width: 970px
    }
}

@media (min-width:1200px) {
    .container {
        width: 1170px
    }
}

body {
    float: left;
    width: 100%
}

.column p,
p {
    font-size: 15px;
    line-height: 1.7
}

.heading-1 {
    max-width: 420px
}

nav a {
    font-size: 15px;
    cursor: pointer;
    color:#fff!important;
}

.heading-1 h1 {
    font-size: 40px;
    line-height: 1.2;
    padding-bottom: 30px
}

.heading-1 h1 span {
    font-size: 46px;
    line-height: 1.2
}

.heading-1 p {
    font-size: 15px;   
    font-family: JosefinSans Regular;
    color: #fff;
    font-weight: 100;
    padding-left: 0!important
}
.background:{background-position: center bottom!important;}
.patternBg {
    float: left;
    width: 100%;
    background: url(../images/Pattern.png);
    background-size: 75%;
    background-position: bottom;
    margin-top: -40px;
    padding-top: 80px
}

.flexStyle {
    display: flex;
    align-items: center
}

.col-4 {
    text-align: center
}

.featureSection {
    padding: 100px 0
}

.sneakPeak {
    float: left;
    width: 100%;
    background-image: url(../images/Pattern.png);
    background-size: 75%;
    background-position: top;
    position: relative;
    overflow: hidden;
}

.sneakPeak:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: #4016d0;
    z-index: -1;
    left: 0;
    top: 1px;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    transform: scaleX(4);
}

.featuresWrapper {
    float: left;
    width: 100%;
    background-image: url(../images/Pattern.png);
    background-size: 75%;
    background-position: bottom;
    position: relative
}

.featuresWrapper:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: #4016d0;
    z-index: -1;
    left: 0;
    top: 0
}

.footer {
    float: left;
    width: 100%
}

.screenshots {
    padding: 100px 0 40px 0
}

.row-3 {
    display: flex;
    align-items: center
}

.slick-slide {
    text-align: center;
    margin: 0 20px;
    transform: scale(.85);
    transition: all .3s
}

.slick-slide.slick-center {
    transform: scale(1)
}

.slick-slide:focus {
    outline: 0!important
}

.slick-slide img {
    margin: auto
}

.sliderWrapper {
    max-width: 950px;
    margin: auto;
    position: relative
}

.rightArr {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    right: -30px;
    z-index: 99999;
    cursor: pointer
}

.leftArr {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    left: -30px;
    z-index: 99999;
    cursor: pointer
}

.screenshots h2 {
    padding-bottom: 0
}

.screenshots p {
    font-family: JosefinSans Regular;
    font-weight: 100;
    font-size: 15px;
    line-height: 1.7
}

.featuresWrapper {
    padding: 80px 0;
    float: left;
    width: 100%
}

.flexFeature {
    display: flex;
    align-items: center;
    padding: 40px 0
}

.flexFeature img {
    max-height: 480px;
    max-width: 500px
}

.textSectionLeft {
    padding-right: 50px
}

.column-3 p,
.column-4 p,
.column-5 p {
    text-align: left
}

.col-md-6 {
    width: 59%;
    float: left
}

.abtTxt {
    padding-left: 50px
}

.abtTxt p {
    text-align: left!important
}

.flexFeature p {
    text-align: left!important;
    line-height: 1.7!important;
    font-size: 14px
}

.features h2 {
    padding-bottom: 40px
}

.footer {
    float: left;
    width: 100%;
    text-align: center;
    background-color: #5710fe;
    padding: 80px 0 40px 0
}

.footerMenu {
    padding-top: 70px;
    padding-bottom: 70px;
    padding-left: 0px!important
}

.footerMenu li {
    list-style: none;
    display: inline-block;
    margin: 0 30px
}

.footerMenu li a {
    color: #fff;
    font-weight: 100;
    padding: 10px;
    font-family: JosefinSans Regular;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}
.footerMenu li a:hover{
	color: #11e8ff;
}

.copyright {
    float: left;
    width: 100%;
    padding: 40px 0 0 0
}

.hr-rule {
    width: 100%;
    position: static!important
}

.footer h3 {
    font-size: 13px;
    font-family: JosefinSans Regular
}
.tcbg{
	background: url(../images/tcbg.png)!important;
	background-position: -1px bottom!important;
	background-size: cover!important;
	border-radius: inherit!important;
}


#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 9px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 18px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 22px;
  left: 8px;
}

#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
  width: 35px;
  height: 45px;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
body{-webkit-tap-highlight-color: transparent;}
#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.innerBg{
	    background: url(../images/Pattern.png);
    background-size: 75%;
    background-position: bottom;

}
.rtl{
    direction: rtl;
    text-align: right;
}
.rtl ul,.rtl p{text-align: right;font-size:19px;}
.sub-heading h3{font-size: 30px}
@media (max-width:1200px) {
    .device-1 img {
        max-width: 500px
    }
    .sliderWrapper {
        max-width: 80%
    }
    .navbar {
        margin-top: -50px
    }
    .logo {
        margin-top: 20px
    }
}

@media (max-width:992px) {
    .logo {
        margin-top: 20px;
        width: 200px;
        max-width: 200px
    }
    .device-1 img {
        max-width: 300px
    }
    .heading-1 {
        padding-top: 120px;
        padding-bottom: 80px
    }
    .device-1 {
        padding-top: 80px;
        padding-bottom: 100px
    }
    .background {
        background-size: contain;
        background-position: bottom;
        position: relative
    }
    .background:before {
        content: "";
        top: 0;
        left: 0;
        height: 50%;
        width: 100%;
        background-color: #5710fe;
        position: absolute;
        z-index: -1
    }
    header {
        text-align: left
    }
    .abtTxt {
        padding-left: 0
    }
    .col-4 h2 {
        font-size: 18px;
        padding-right: 20px;padding-left: 20px;
    }
    .flexFeature img {
        max-width: 330px
    }


}

@media (max-width:767px) {
    .heading-1 {
        text-align: center;
        padding: 60px 40px 20px 40px;
        width: 100%;
        max-width: 100%
    }
    .device-1 img{
        float:inherit;
    }
    .heading-TC{float: left;}
    .navbar{margin-top: 40px!important}
    .heading-1 h1 {
        font-size: 28px
    }
    .heading-1 h1 span {
        font-size: 26px
    }
    .background:before {
        height: 90%
    }
    .sub-heading h3{
    
    font-size:20px;
    
    }
    .device-1 {
        padding-bottom: 30px
    }
    .flexStyle {
        display: block
    }
    .scrolldown {
        display: none
    }
    .column h1 {
        font-size: 30px;
        text-align: center
    }
    .abtTxt p {
        padding-left: 0;
        padding-right: 0;
        text-align: justify!important
    }
    .flexFeature p {
        max-width: 100%
    }
    .featureSection {
        padding: 40px 0 10px 0
    }
    .col-4 {
        width: 100%;
        margin-bottom: 20px
    }
    .col-4 h2 {
        max-width: 300px;
        margin: auto;
        margin-top: 10px
    }
    .screenshots {
        padding: 40px 0
    }
    .screenshots h2 {
        font-size: 30px
    }
    .featuresWrapper {
        padding: 40px 0
    }
    .leftArr {
        max-width: 10px;
        left: -10px
    }
    .rightArr {
        max-width: 10px;
        right: -10px
    }
    .flexFeature {
        display: flex;
        flex-flow: wrap
    }
    .col-md-6 {
        width: 100%;
        text-align: center
    }
    .textSectionLeft {
        padding-right: 0
    }
    .flexFeature p {
        text-align: center!important
    }
    .flexFeature h2 {
        text-align: center!important
    }
    .flexFeature {
        padding: 0 0 40px 0
    }
    .features h2 {
        padding-bottom: 0;
        font-size: 30px
    }
    .mobOrder1 {
        order: 1
    }
    .mobOrder2 {
        order: 2
    }
    .footer h2 {
        font-size: 30px
    }
    .footerMenu {
        padding: 30px 0!important
    }
    .footerMenu li {
        margin: 0 20px;
        line-height: 3
    }
    .footer h3 {
        margin-left: 0;
        width: 100%;
        text-align: center
    }
    .copyright {
        padding: 20px 0 0 0
    }
    .footer {
        padding: 40px 0
    }
    nav ul {
        margin-left: 0;
        position: absolute;
        top: 50px;
        background: #5710fe;
        width: 100%;
        padding-left: 0;
        padding: 20px 0
    }
    nav li {
        margin-left: 0!important;
        margin-right: 0!important;
        border-top: 1px solid #430cc4;
        margin: 0!important;
        padding: 10px 0
    }
    nav li:last-child {
        border-bottom: 1px solid #430cc4
    }
    nav li a {
        display: block;
        padding: 10px;
        color:#fff!important;
    }
    .logo {
        position: relative;
        z-index: 99999
    }
    .nav-toggle-label {
        top: 30px
    }
    .tcbg{background-position: center bottom!important}
    .sub-heading{padding-top: 50px;line-height: 1.2}
}

@media (max-width:380px) {
    .heading-1 {
        text-align: center;
        padding: 60px 10px 20px 10px
    }
    .flexFeature img{
        max-width:280px!important;
    }
}