@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Pangolin&family=Work+Sans:wght@400;500;600;700;800&display=swap');
/* CSS Document */


@font-face {
    font-family: 'Grotzec Cond';
    src: url('../assets/fonts/GrotzecCond-Bold.eot');
    src: url('../assets/fonts/GrotzecCond-Bold.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/GrotzecCond-Bold.woff2') format('woff2'),
        url('../assets/fonts/GrotzecCond-Bold.woff') format('woff'),
        url('../assets/fonts/GrotzecCond-Bold.svg#GrotzecCond-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Grotzec Cond';
    src: url('../assets/fonts/GrotzecCond-Regular.eot');
    src: url('../assets/fonts/GrotzecCond-Regular.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/GrotzecCond-Regular.woff2') format('woff2'),
        url('../assets/fonts/GrotzecCond-Regular.woff') format('woff'),
        url('../assets/fonts/GrotzecCond-Regular.svg#GrotzecCond-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'Helvetica Neue LT Pro';
    src: url('../assets/fonts/HelveticaNeueLTPro-MdEx.eot');
    src: url('../assets/fonts/HelveticaNeueLTPro-MdEx.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/HelveticaNeueLTPro-MdEx.woff2') format('woff2'),
        url('../assets/fonts/HelveticaNeueLTPro-MdEx.woff') format('woff'),
        url('../HelveticaNeueLTPro-MdEx.svg#HelveticaNeueLTPro-MdEx') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hellix';
    src: url('../assets/fonts/Hellix-Medium.eot');
    src: url('../assets/fonts/Hellix-Medium.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/Hellix-Medium.woff2') format('woff2'),
        url('../assets/fonts/Hellix-Medium.woff') format('woff'),
        url('../assets/fonts/Hellix-Medium.svg#Hellix-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hellix';
    src: url('../assets/fonts/Hellix-Bold.eot');
    src: url('../assets/fonts/Hellix-Bold.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/Hellix-Bold.woff2') format('woff2'),
        url('../assets/fonts/Hellix-Bold.woff') format('woff'),
        url('../assets/fonts/Hellix-Bold.svg#Hellix-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Hellix';
    src: url('../assets/fonts/Hellix-Regular.eot');
    src: url('../assets/fonts/Hellix-Regular.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/Hellix-Regular.woff2') format('woff2'),
        url('../assets/fonts/Hellix-Regular.woff') format('woff'),
        url('../assets/fonts/Hellix-Regular.svg#Hellix-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}






html, body {
     margin: 0;
     padding: 0;
}
/*==== font-family: 'Pangolin', cursive;
 font-family: 'Work Sans', sans-serif;
 ----*/
 body {
     font-family: 'Hellix';
     font-size: 18px;
     line-height: 1.5em;
}
 .container {
     max-width: 1280px 
}
 header.desk {
     background: url("../assets/img/header-bgop.jpg") no-repeat center -290px;
     background-size: cover;
     padding:40px 10px 120px;
     height:1000px;
}
 header.mobi {
     background: url("../assets/img/mobi-header.jpg") no-repeat center -150px;
     background-size: cover;
     padding:40px 10px 40px;
}
/*=========hero======*/
 header.desk .hero-txt h1 {
     font-size: 5.8em;
     font-weight: bold;
     color: #fff;
     line-height: 1.0em;
     margin-top:10px 
}
 header.desk .hero-txt h3 {
     font-size: 1.5em;
     font-weight: normal;
     color: #fff;
}
 header.desk .hero-cta img {
    margin-top:20px
}
 header.desk .top-cta {
    margin-top:40px
}
 header.desk .top-cta {
    text-align:right
}
 header.desk .top-img {
    text-align:center;
     margin-top:100px
}
 header.mobi .logo {
    text-align:center
}
 header.mobi .hero-txt {
    text-align:center
}
 header.mobi .hero-txt h1 {
     font-size: 3.8em;
     font-weight: bold;
     color: #fff;
     line-height: 1.0em;
     margin-top:10px 
}
 header.mobi .hero-txt h3 {
     font-size: 1.3em;
     font-weight: normal;
     color: #fff;
}
 header.mobi .hero-cta img {
    margin-top:20px
}
 header.mobi .top-cta {
    margin-top:40px
}
 header.mobi .top-cta {
    text-align:center
}
 header.mobi .top-img {
    text-align:center;
     margin-top:50px
}
 header.mobi .discount-wrap {
     background:#171719;
     color:#fff;
     padding:20px 20px 40px;
     border-radius:20px;
     font-family: 'Grotzec Cond';
}
 header.mobi .discount-wrap h2{
     text-align:center;
    font-size:2.2em;
     border-bottom:1px solid #fff 
}
 header.mobi .countdown {
    text-align:center;
     margin-bottom:30px
}
 header.mobi .countdown h3 {
    font-size:1.8em
}
 header.mobi .countdown p {
    font-size:2.5em
}
 header.mobi .ft-discount {
    background:#fece07;
     text-align:center;
     color:#171719;
    ;
     padding:10px;
     font-size:1.5em;
     border-radius:30px;
     margin-bottom:-60px 
}
/*=========buttons======*/
 .btn-main {
    background:#ffde00;
     padding:10px 50px 14px;
     color:#282727;
     text-decoration:none;
     font-weight:500;
     border-radius:60px;
    transition: all 0.5s ease
}
 .btn-main:hover {
    background:#282727;
     color:#FFF
}
 .btn-sm {
    font-size:1.5em
}
 .btn-nrm {
    font-size:1.8em
}
/*=========buttons======*/
 .btn-wrap {
    text-align: center
}
 .title-header {
    text-align: center;
    margin-bottom:40px 
}
 .title-header h2 {
    font-size:4em;
     font-weight:bold;
}
 .title-header p {
    font-size:1.7em;
     font-weight:500;
     line-height:1.5em
}
 .oth {
    margin-top:50px;
    padding:90px 10px
}
 .oth-info {
    margin-top:30px
}
 .oth-info h2{
    font-size:2.2em;
     font-weight:bold;
}
 .oth-info .btn-wrap {
    text-align:left;
    margin-top:50px
}
 .imp {
    margin-top:50px;
     background:#fbfbfb;
     padding:90px 10px 
}
 .imp-info {
    margin-top:30px
}
 .imp-img {
     box-shadow: 0px 0px 8px 4px rgba(173,173,173,0.30);
     border-radius:20px;
}
 .imp-img img {
    border-radius:20px;
    max-width:400
}
 .imp-info h2{
    font-size:2.2em;
     font-weight:bold;
}
 .imp-info .btn-wrap {
    text-align:left;
    margin-top:50px
}
 .imp-insight {
    margin-top:150px
}
 .imp-insight h2{
    font-size:2em;
     font-weight:600;
}
 .imp-insight p{
    font-size:1.4em;
     line-height:1.4em 
}
 .followers {
    padding:60px 10px 0px;
}
 .fl-wrap {
    padding:20px
}
 .fl-lists {
    border:1px solid #dbdbdb;
     box-shadow: 0px 0px 8px 4px rgba(173,173,173,0.30);
     border-radius:20px;
     margin-top:30px;
     margin-bottom:50px 
}
 .fl-title {
    border-bottom:1px solid #dbdbdb;
     margin-bottom:10px;
     padding:10px 20px;
    font-size:1.4em;
     font-weight:500;
     font-family: 'Helvetica Neue LT Pro';
}
 .fl1 {
    padding:6px 10px;
}
 .fl2 {
    color:#9441ce;
     background:#e9cffb;
     padding:6px 10px;
     border-radius:60px
}
 .fl-img {
    text-align:center
}
 .fl-img.star {
    margin-top:40px
}
 .fl-info h2{
    font-size:1.8em;
     margin-top:24px
}
 .fl-div {
    background:#fbfbfb;
     border:1px solid #dbdbdb;
     border-radius:80px;
     padding:10px 20px;
     margin-bottom:20px 
}
 .fl-pic {
    text-align:center;
}
 .fl-pic img {
    border-radius:50%;
     max-width:50px
}
 .fl-text {
    margin-top:8px;
     font-family: 'Hellix';
}
 .chk {
    text-align: center;
     margin-top: 20px;
}
/*=========countdown======*/
 .count-wrap{
     left:23%;
    position:absolute;
    margin-top:224px;
    width:300px;
    ;
    max-width:300px;
    ;
    font-family: 'Grotzec Cond';
}
 .count-wrap h3 {
    color:#fff;
     text-align:center;
}
 .countdown {
    color:#fff;
     font-size:70px;
     text-align:center;
     margin-top:10px
}
 .mobi .count-wrap{
     font-family: 'Grotzec Cond';
     position:relative;
     margin-top:0px;
     width:100%;
    max-width:100%;
    left:0 
}
 .mobi .count-wrap h3 {
    color:#fff;
     text-align:center !;
     font-size:30px !important 
}
 .mobi .countdown {
    color:#fff;
     font-size:70px;
     text-align:center;
     margin-top:10px
}
 .mobi .count-wrap table {
    display:none
}
/*=========Plans======*/
 .plans {
}
 .plans-wrap {
    border-radius:20px;
     overflow:hidden;
     box-shadow: 0px 0px 8px 4px rgba(173,173,173,0.30);
}
 .plans-inc {
     border-bottom:1px solid #d5246a;
     margin-bottom:20px
}
 .plans-inc h4 {
    font-size:1.4em
}
 .plans-inc p {
    font-size:1.1em
}
 .plans-inner {
    padding:24px
}
 .plans-title {
    background:#d5246a;
     padding:10px 20px
}
 .plans-title h3 {
    color:#fff
}
 .plans-feat {
     border-bottom:1px solid #d5246a;
     padding-bottom:10px
}
 .pl-div {
    display:inline-block;
     width:100%;
     margin-bottom:10px
}
 .pl-div img {
    max-width:24px;
     margin-right:5px
}
 .plans-price {
    text-align:center;
     padding:20px;
     margin-bottom:14px;
     font-family: 'Hellix' !important;
}
 .price-before {
    text-decoration:line-through;
     color:#d5246a;
     font-size:20px;
     font-family: 'Grotzec Cond' !important;
}
 .price-now {
    font-size:1.5em;
     font-weight:bold;
     margin-top:10px
}
 .plans-order {
    text-align:center
}
 .plans-order p{
     margin-top:30px;
     margin-bottom:0px;
     font-size:14px;
     font-weight:600;
     letter-spacing:2px
}
 .plans-order small{
     font-size:14px;
     font-weight:600;
     color:#04ab43
}
 .midrow {
    width:69%;
     margin:0 auto;
     margin-top:40px
}
/*=========how======*/
/*=========faq======*/
/*=========footer======*/
 footer.desk {
    background: url("../assets/img/footer-bgop.jpg") no-repeat center top;
     background-size: cover;
     padding:40px 10px 120px;
     height:900px;
}
 footer.desk .footer-logo {
    margin-top:450px
}
 footer.desk .footer-copy {
    color:#fff;
     font-size:1.7em
}
 footer.desk .footer-text {
    margin-top:310px;
     color:#fff
}
 footer.desk .footer-text h3 {
    font-size:2.5em;
     font-weight:500
}
 footer.mobi {
    background: url("../assets/img/mobi-footer.jpg") no-repeat center bottom;
     background-size: cover;
     padding:40px 10px 120px;
     height:900px;
}
 footer.mobi .footer-logo {
    margin-top:40px
}
 footer.mobi .footer-copy {
    color:#fff;
     font-size:18px;
     margin-top:20px
}
 footer.mobi .footer-text {
    margin-top:10px;
     color:#fff
}
 footer.mobi .footer-text h3 {
    font-size:2em;
     font-weight:600
}
 @media only screen and (min-width : 1280px) {
     header.mobi, footer.mobi {
        display:none
    }
}
 @media only screen and (min-width : 360px) and (max-width : 480px) {
     .discount-wrap h2 {
        font-size:32px !important 
    }
     header.mobi {
        display:block
    }
     header.desk {
        display:none
    }
     footer.mobi {
        display:block
    }
     footer.desk {
        display:none
    }
     .plans {
        padding:10px
    }
     .plans-wrap {
        margin-bottom: 20px
    }
     .plans .title-header h2{
        font-size:2em
    }
     .plans-inc h4, .plans-inc p{
        font-size:1em
    }
     .pl-div {
        font-size:.9em
    }
     .plans-title h3{
        margin-top:8px
    }
     .midrow {
        width:100%;
         margin-top:10px
    }
     .midrow .nocol {
        padding:0px
    }
     .oth {
        margin-top:0;
         padding:20px 10px
    }
     .oth .title-header h2{
        font-size:2em
    }
     .oth .title-header p{
        font-size:1.2em
    }
     .oth-img {
        margin-top:50px
    }
     .oth .oth-info h2{
        font-size:1.9em
    }
     .oth .btn-wrap {
        text-align:center
    }
     .imp {
        margin-top:0;
         padding:20px 10px
    }
     .imp .title-header h2{
        font-size:2em
    }
     .imp .title-header p{
        font-size:1.2em
    }
     .imp .imp-info h2 {
        font-size:1.8em
    }
     .imp .btn-wrap {
        text-align:center
    }
     .imp-insight {
        margin-top:50px
    }
     .followers {
        padding:10px 20px
    }
     .followers .fl-info h2 {
        text-align:center;
         font-size:1.5em
    }
     .fl1 {
         font-size:20px
    }
     .fl1 img {
        max-width:50px
    }
     .fl2 {
         font-size:20px
    }
     .fl2 img {
        max-width:50px
    }
     .fl-div {
        padding:10px;
         border-radius:20px
    }
     .fl-text {
        text-align:center
    }
     .bot-cta {
        padding:10px
    }
     .bot-cta .title-header h2{
        font-size:2.2em
    }
     .bot-cta .chk {
        display:none
    }
}
 @media only screen and (min-width:768px) and (max-width : 820px) {
     .plans .row > .brk {
        width:100% !important;
    }
     .midrow {
        width:100%;
         margin-top:10px
    }
     .midrow .nocol {
        padding:0px
    }
     header.mobi {
        display:block
    }
     header.desk {
        display:none
    }
     footer.mobi {
        display:block
    }
     footer.desk {
        display:none
    }
     .bot-cta .chk {
        display:none
    }
     .followers .fl-info h2 {
        text-align:left;
         font-size:1.5em
    }
     .plans {
        padding:10px
    }
     .plans-wrap {
        margin-bottom: 20px
    }
     .plans .title-header h2{
        font-size: 2.8em
    }
     .plans-inc h4, .plans-inc p{
        font-size:1em
    }
     .pl-div {
        font-size:.9em
    }
     .plans-title h3{
        margin-top:8px
    }
     .oth {
        margin-top:0;
         padding:20px 10px
    }
     .oth .title-header h2{
        font-size:2.8em
    }
     .oth .title-header p{
        font-size:1.2em
    }
     .imp {
        margin-top:0;
         padding:20px 10px
    }
     .imp .title-header h2{
        font-size:2.8em
    }
     .imp .title-header p{
        font-size:1.2em
    }
     .imp-insight {
        margin-top:50px
    }
     .imp-insight p {
        font-size:1.2em
    }
     header.mobi {
         background: url("../assets/img/mobi-header.jpg") no-repeat center -250px;
         background-size: cover;
         padding:40px 10px 40px;
    }
     footer.mobi {
        background: url("../assets/img/mobi-footer.jpg") no-repeat center top;
         background-size: cover;
         padding:40px 10px 120px;
         height:900px;
    }
     .bot-cta .title-header h2{
        font-size:2.2em
    }
}
 @media only screen and (min-width : 821px) and (max-width : 1180px) {
     header.mobi {
        display:block
    }
     header.desk {
        display:none
    }
     footer.mobi {
        display:block
    }
     footer.desk {
        display:none
    }
     .bot-cta .chk {
        display:none
    }
     .followers .fl-info h2 {
        text-align:left;
         font-size:1.5em
    }
     .plans {
        padding:10px
    }
     .plans-wrap {
        margin-bottom: 20px
    }
     .plans .title-header h2{
        font-size: 2.8em
    }
     .plans-inc h4, .plans-inc p{
        font-size:1em
    }
     .pl-div {
        font-size:.9em
    }
     .plans-title h3{
        margin-top:8px
    }
     .oth {
        margin-top:0;
         padding:20px 10px
    }
     .oth .title-header h2{
        font-size:2.8em
    }
     .oth .title-header p{
        font-size:1.2em
    }
     .imp {
        margin-top:0;
         padding:20px 10px
    }
     .imp .title-header h2{
        font-size:2.8em
    }
     .imp .title-header p{
        font-size:1.2em
    }
     .imp-insight {
        margin-top:50px
    }
     .imp-insight p {
        font-size:1.2em
    }
     header.mobi {
         background: url("../assets/img/mobi-header.jpg") no-repeat center -250px;
         background-size: cover;
         padding:40px 10px 40px;
    }
     footer.mobi {
        background: url("../assets/img/mobi-footer.jpg") no-repeat center top;
         background-size: cover;
         padding:40px 10px 120px;
         height:900px;
    }
}