/*--------------
All Contents
--------------*/

/*-----------------
1. Reset.css
2. Helper Classes
3. Main and Hero Section Stylings
4. Services Styling
5. Features Split
6. Feature with BG
7. Feature Big
8. Testimonial Stling
9. Pricing Section
10. Call To Action Subscribe
11. Download Section
12. Back to top
------------------*/


/*----- 1. Reset.css -----*/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
.js-cookie-consent {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    position: fixed;
    bottom: 0;
    background: #1f6fb2;
    padding: 40px;
}

.js-cookie-consent-agree {
    background: white;
    border: none;
    padding: 10px;
    font-family: monospace;
}

.cookie-consent__message {
    color: white;
    font-family: monospace;
    margin-right: 10px;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* --- Common Styles ---*/

h1 {
    font-family: Poppins;
    font-size: 16px;
}

/*----- Helper Classes -----*/

html * {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
::-webkit-scrollbar {
	display: none;
}
*/

::-moz-selection {
    color: #3b5de7;
    background: #FFFFFF;
}

::selection {
    color: #3b5de7;
    background: #FFFFFF;
}

.nopadding {
    padding: 0;
}

.custom-padding {
    padding-left: 10px;
    padding-right: 10px;
}

.no-margin {
    margin-right: 0;
    margin-left: 0;
}


.sup-title {
    display: inline-block;
    font-size: 1em;
    padding: 4px;
    text-transform: uppercase;
    font-weight: bold;
    color: #FFFFFF;
    background: #000000;
    margin: 0 0 20px 0;
}

.spacer {
    width: 100%;
    height: 50px;
}

#loading {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    opacity: 1;
    background-color: #F2F2F2;
    z-index: 9999;
    text-align: center;
}

#loading-image {
    display: inline;
    top: 40%;
    position: relative;
    z-index: 9999;
}

.spacer {
    width: 100%;
    height: 50px;
}

.spacer-big {
    width: 100%;
    height: 100px;
}

.error-message {
    color: #FF3333;
    font-family: Roboto;
    margin-top: 5px;
}

.success-message {
    color: #33cc33;
    font-family: Roboto;
    margin-top: 5px;
}


.btn-fill {
    background: #FFFFFF;
    color: #3b5de7;
    border: 2px solid #3b5de7;
    -webkit-transition: 200ms;
    -moz-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;
}

.btn-fill:hover, .btn-fill:focus {
    color: #3b5de7;
    background: transparent;
    border: 2px solid #3b5de7;
}


/* ------ Navbar Styling Starts ----- */


.navbar {
    font-size: 14px;
    font-family: Poppins;
    font-weight: 500;
    text-transform: uppercase;
    padding-top: 25px;
    letter-spacing: 1px;
    height: 80px;
}

.navbar-default {
    transition: all 0.6s ease;
    border-color: transparent;
    background-color: transparent;
}

.navbar-default .navbar-toggle {
    border-radius: 0px;
    border-color: transparent;
}

.navbar-default .navbar-toggle:hover {
    background-color: transparent;
}

.navbar-default .navbar-toggle:focus {
    background-color: transparent;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: transparent;
}

.navbar-default .navbar-brand .navbar-toggle .collapsed {
    padding: 4px 6px;
    font-size: 16px;
    color: #111111;
}

/* .navbar-nav{
    position: relative;
    left: 110px;
} */

.navbar-default .navbar-brand {
    padding: 0 0;
    -webkit-transition: 200ms;
    -moz-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;
}
.navbar-brand img {
    position: relative;
    /* right: 90px; */
}
.navbar-default .navbar-brand:hover {
    transition: 1s;
}

.navbar-default .navbar-nav > li > a {
    color: #0a163e;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5;
    transition: all 0.5s;
}

.navbar-default .navbar-nav > li > a:hover {
    color: #000000;
}

.navbar-default .navbar-nav > .active > a {
    background: transparent;
    color: #FFFFFF;
}


.navbar-default .navbar-nav > .active > a:hover {
    background: transparent;
    color: #FFFFFF;
}

.navbar-default .navbar-nav > .active > a:focus {
    background: transparent;
    color: #FFFFFF;
}

.navbar-default .navbar-collapse {
    border-color: transparent;
    background-color: transparent;
}

.navbar-default .navbar-nav .open .dropdown-toggle {
    color: #111111;
}

.navbar-default .nav-white > li > a {
    color: #FFFFFF;
}

.navbar-default .nav-white > li > a:hover {
    color: #999999;
}

/*---------- Media Queries ---------*/

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

    .navbar {
        padding-top: 5px;
        height: 60px;
    }

    .navbar-default {
        border: 0px;
        background-color: transparent;
    }

    .navbar-default .navbar-collapse {
        text-align: center;
        border-color: transparent;
        background-color: #FFFFFF;
    }

    .navbar-default .navbar-collapse {
        border: 0;
        border-color: transparent;
    }

    .navbar-default .navbar-nav > li > a {
        color: #222222;
        margin-top: 10px;
    }

    .navbar-default .navbar-nav > li > a:hover {
        color: #222222;

    }

    .navbar-default .navbar-brand {
        color: #FFFFFF;
        padding: 8px 8px !important;
    }

    .navbar-default .navbar-toggle .icon-bar {
        background-color: white;
    }
}

@media only screen and (min-width: 240px) {

    .navbar.past-main {
        transition: all 0.6s ease;
        height: 50px;
        background-color: rgba(255, 255, 255, 0.99);
    }

    .navbar.effect-main:active {
        -webkit-transition: height 0.6s; /* For Safari 3.1 to 6.0 */
        transition: height 0.6s;
        height: 60px;
    }

    .navbar.past-main {
        font-size: 14px;
        padding-top: 5px;
        height: 60px;
        -webkit-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
        -moz-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
        box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
        -webkit-transition: height 0.6s; /* For Safari 3.1 to 6.0 */
        transition: height 0.6s;
    }

    .navbar-default.past-main .navbar-brand {
        padding: 8px 0;
    }

    .navbar-default.past-main .navbar-toggle .icon-bar {
        background-color: #111111;
    }

    .navbar-default.past-main .navbar-nav > li > a {
        color: #606060;
        -webkit-transition: color 0.5s;
        transition: color 0.5s;
    }

    .navbar-default.past-main .navbar-nav > li > a:hover {
        color: #111111;
    }

    .navbar-default.past-main .navbar-nav > .active > a {
        background: transparent;
        color: #3b5de7;
    }


    .navbar-default.past-main .navbar-nav > .active > a:hover {
        background: transparent;
        color: #222222;
    }

    .navbar-default.past-main .navbar-nav > .active > a:focus {
        background: transparent;
        color: #222222;
    }

}


/* ------ Navbar Styling Ends ----- */

#main {
    height: 100%;
    margin-top: 100px; 
}

.promo-banner {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100; /* This ensures the banner stays on top of other elements */
}

.promo-banner img {
    width: 100%;
}


/* ----- Hero Section Styling Starts ----- */

.hero-section {
    background-image: none;
    /* linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1)), url("../images/hero3.jpg"); */
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    background-position: 50% 60%;
    padding-left:40px;
    /* position: relative; */
    /* right: 100px; */
}

.jarallax-container {
    display: flex;
    flex-wrap: wrap; /* Change this to wrap so the items can wrap onto the next line on smaller screens */
    padding: 0 20px 50px; /* top right/left bottom */
}

.jarallax-left {
    width: 60%;
    position: relative;
    /* Adjust the width as needed */
    background-size: cover;
    background-repeat: no-repeat;
}

.jarallax-right {
    width: 40%;
    position: relative;
    /* Adjust the width as needed */
    background-size: cover;
    background-repeat: no-repeat;
}

.jarallax-right img {
    width: 100%; /* Make the image take up the full width of its container */
    object-fit: cover;

    padding-top: 105px; /* Adjust this value as needed */
     padding-right: 40px; 

    /* object-position: center bottom; This will align the image to the bottom of its container, effectively cropping the top when the image is resized */
    /* This will make the image cover the full width/height of its container while maintaining its aspect ratio */
}



.hero-content {
    width: 100%;
    padding: 200px 0 100px 0;
    overflow: hidden;

}

.hero-content h1 {
    font-family: Poppins;
    font-size: 34px;
    color: #3b5de7;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -1px;
    margin-bottom: 20px;
 
}

.hero-content p {
    font-family: Poppins;
    font-size: 14px;
    color: #3b5de7;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 1px;
    margin-bottom: 30px;
 
}

.btn-action {
    font-family: Roboto;
    background-color: #3b5de7;
    border: 2px solid #3b5de7;
    border-radius: 0;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 400;
    height: 38px;
    letter-spacing: 2px;
    line-height: 3;
    padding: 0 21px;
    text-transform: uppercase;
    outline: none;
    -webkit-transition: 200ms;
    -moz-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;
    -webkit-text-fill-color: #FFFFFF;

}

.hero-content .btn-action:hover, .hero-content .btn-action:focus,
.hero-content .btn-action:active, .hero-content .btn-action:active:focus {
    background: transparent;
    outline: none;
    color: #3b5de7;
    border-color: #3b5de7;
}

.btn-action:hover, .btn-action:focus, .btn-action:active, .btn-action:active:focus {
    background: transparent;
    outline: none;
    color: #3b5de7;
    border-color: #3b5de7;
}

.txt-white h1 {
    color: #FFFFFF;
}

.txt-white p {
    color: #FFFFFF;
}

.txt-primary h1 {
    color: #252b5b;
}

.txt-primary p {
    color: #252b5b;
}

.app-hero {
    background: #F3F3F3;
}

.app-hero-content {
    overflow: hidden;
    padding: 150px 0 0 0;
}

.app-hero-content h1 {
    color: #111111;
}

.app-hero-content p {
    color: #111111;
}

.app-hero-content img {
    margin-top: 50px;
}

.app-sub {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 200, 0.1)), url(../images/feature_bg.jpg) no-repeat center center;
    background-size: cover;
}

.app-sub-inner {
    width: 100%;
    height: 100%;
    padding: 100px 0 100px 0;
    overflow: hidden;
}

.app-sub-content {
    padding: 100px 0 0 0;
}

.app-sub-content h1 {
    font-family: Poppins;
    font-size: 42px;
    font-weight: 700;
    color: #111111;
    line-height: 1.2;
    margin-bottom: 30px;
}


.app-sub-content p {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 100;
    color: #111;
    line-height: 1.4;
    margin-bottom: 30px
}

.app-sub-content .subs-form {
    text-align: left;
}


/* ----- Hero Section Styling Ends ----- */


/* ----- About Section Styling Starts ----- */


.services-section {
    background: #FFFFFF;
}

.services-content {
    padding-top: 100px;
    padding-bottom: 75px;
}

.services-content h1 {
    font-family: Poppins;
    font-size: 24px;
    color: #111111;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    margin-bottom: 10px;
}

.services-content p {
    font-family: Poppins;
    font-size: 14px;
    color: #444444;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.4;
    margin-top: 0px;
}

.services {
    overflow: hidden;
    padding-top: 50px;
    padding-bottom: 50px;
}

.services .services-icon {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid;
    border-color: transparent;
    background: #F6F6F6;
    margin: 0 auto;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.services .services-icon img {
    position: absolute;
    top: 10%;
    left: 11%;
    font-size: 42px;
}

.services .services-description {
    margin-bottom: 50px;
}

.services .services-description h1 {
    font-family: Poppins;
    font-size: 18px;
    color: #111111;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    margin-top: 20px;
    margin-bottom: 20px;
}

.services .services-description p {
    font-family: Poppins;
    font-size: 13px;
    color: #444444;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 1.5;
    margin-top: 0;
}

.services .col-sm-4:hover .services-icon {
    border-color: #3b5de7;
}

/* ----- Service Section Styling Ends ----- */


/* -----------------------------------------------
----------- Flex Features Styling Starts ---------
-------------------------------------------------*/


.flex-features {
    background: #F3F3F3;
    padding-top: 0;
    padding-bottom: 50px;
}

.flex-split {
    padding-top: 50px;
    padding-bottom: 0;
    background: #F3F3F3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.flex-split .f-left {
    flex: 1 0 50%;
    background: #F3F3F3;
    padding: 10px;
}

.flex-split .f-left img {
    margin-top: 30px;
    margin: 0 auto;
}

.flex-split .f-right {
    flex: 1 0 50%;
    background: #F3F3F3;
}

.flex-split .f-right {
    padding: 30px 20px 20px 20px;
}

.flex-split .f-right h2 {
    font-family: Poppins;
    font-size: 28px;
    color: #111111;
    font-weight: 600;
    line-height: 1.2;
}

.flex-split .f-right p {
    font-family: Poppins;
    font-size: 14px;
    color: #111111;
    line-height: 1.4;
    margin: 20px 0 20px 0;
}

.flex-split .f-right ul {
    margin-bottom: 20px;
}

.flex-split .f-right ul i {
    margin-right: 10px;
}

.flex-split .f-right li {
    font-family: Poppins;
    font-size: 14px;
    color: #111111;
    line-height: 2;
}


/* -----------------------------------------------
----------- Flex Features Styling Ends -----------
-------------------------------------------------*/


/* ----- Features Section Styling Starts ----- */


.features-section {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.features-section .f-left {
    flex: 1 0 50%;
    background: #F3F3F3;
}

.features-section .f-right {
    flex: 1 0 50%;
    background: url(../images/iphone_hand_1.jpg);
    background-position: 50% 50%;
    background-size: cover;
}

.features-section .f-right img {
    margin-top: 0;
}

.features-section .f-left {
    padding: 30px;
}

.features-section .f-left h2 {
    font-family: Poppins;
    font-size: 28px;
    color: #111111;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 40px;
}

.features-section .f-left p {
    font-family: Poppins;
    font-size: 14px;
    color: #111111;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 1px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.features-section .btn-action {
    margin-bottom: 20px;
}


/*----- Features Section Styling Ends ----- */


/* ----- Features Section 2 Styling ----- */

.features-section-2 {
    padding-top: 30px;
    padding-bottom: 30px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0)), url(../images/features_section_2_new.png) no-repeat center center;
    background-size: cover;
}

.features-section-2 .features-content {
    padding: 0;
}

.features-section-2 .features-content h2 {
    font-family: Poppins;
    font-size: 21px;
    color: #111111;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    margin-top: 20px;
}

.features-section-2 .features-content h4 {
    font-family: Poppins;
    font-size: 18px;
    color: #111111;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 1px;
    margin-top: 10px;
    margin-bottom: 50px;
}

.features-section-2 .features-content p {
    font-family: Roboto;
    font-size: 14px;
    color: #111111;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 1px;
    margin-top: 10px;
    margin-bottom: 20px;
}


/* ----- Features Section 2 Styling ----- */

/* ----- Features Section Styling Ends ----- */


/* ----- Counter Section Styling Starts -----*/

.counter-section {
    width: 100%;
    padding-top: 100px;
    padding-bottom: 50px;
    background: #FFFFFF;
}

.counter-section h3 {
    font-family: Poppins;
    font-size: 28px;
    font-weight: 400;
    color: #303030;
}

.counter-icon {
    padding: 15px;
}

.counter-icon i {
    font-size: 42px;
    color: #3b5de7;
}

.counter-text {
    margin-top: 10px;
    margin-bottom: 20px;
}

.counter-text h4 {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    padding: 0.5em;
    color: #111111;
}

/* -------- Counter Section Styling Ends --------- */


/*------ Feature Big Section Styling Starts ------ */


.feature_huge {
    padding-top: 100px;
    padding-bottom: 100px;
    background: #F3F3F3;
}

.feature_huge img {
    margin: 0 auto;
    margin-bottom: 50px;
}

.feature_huge .feature_list {
    margin: 0 auto;
    margin-top: 30px;
}

.feature_huge .feature_list img {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
}

.feature_huge .feature_list h1 {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 600;
    padding: 0.5em;
    color: #111111;
}

.feature_huge .feature_list p {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 400;
    padding: 0.5em;
    color: #606060;
    letter-spacing: 1px;
    line-height: 1.3;
    margin-bottom: 20px;
}

/*------ Feature Big Section Styling Ends ------ */


/* -------- Testimonials Section Starts --------- */

.testimonial-section {
    background: #FFFFFF;
    padding-top: 50px;
}

.testimonial-section h1 {
    font-family: Poppins;
    font-size: 34px;
    font-weight: 500;
    color: #111111;
    margin-top: 3em;
}

.testimonial-section .sub {
    font-family: Roboto;
    font-size: 16px;
    font-weight: 300;
    color: #111111;
    line-height: 1.5;
    margin-top: 30px;
    letter-spacing: 1px;
}

.testimonials {
    margin-top: 4em;
    width: 100%;
    margin-bottom: 4em;
}

.testimonials-2 {
    margin-bottom: 5em;
}

.testimonial-single img {
    width: 80px;
    height: 80px;
}

.testimonial-text h3 {
    font-family: Roboto;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.5;
    color: #000000;
}

.testimonial-text .ion {
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
    color: #ff8000;
}

.testimonial-text p {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 300;
    padding: 20px 10px 20px 10px;
    letter-spacing: 1px;
    line-height: 1.5;
    color: #111111;
}


/* -------- Testimonials Section -------- */


/* ------ Download Section Styling------------ */

.download {
    width: 100%;
    height: 100%;
    background: #F3F3F3;
}

.app-img {
    display: inline-block;
    margin-top: 5em;
}

.app-info {
}

.app-info h3 {
    font-family: Poppins;
    font-size: 34px;
    font-weight: 500;
    color: #404040;
    margin-top: 20px;
}

.app-info h4 {
    font-family: Roboto;
    font-size: 18px;
    font-weight: 300;
    color: #3C4B5D;
    margin-top: 20px;
}

.app-info ul {
    margin-top: 20px;
}

.app-info span {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 400;
    color: #222222;
}

.app-info .ion {
    font-size: 1em;
    color: #ff8000;
}

.download-buttons {
    margin-top: 3em;
    margin-bottom: 5em;
}

.download-buttons img {
    height: 50px;
    width: 160px;
}


/*------ Download Section Styling Ends ------ */


/* ----- Pricing Section Styling Starts ----- */

.pricing-section {
    width: 100%;
    height: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    background: #F3F3F3;
}

.pricing-intro {
    padding-bottom: 20px;
}

.pricing-intro h1 {
    font-family: Poppins;
    font-size: 28px;
    color: #252b5b;
    font-weight: 600;
    line-height: 1.4;
}


.pricing-intro p {
    font-family: Roboto;
    font-size: 15px;
    color: #303030;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 1px;
    margin-top: 10px;
    margin-bottom: 50px;
}

.pricing-section .table-left, .pricing-section .table-right {
    padding: 20px 30px 50px 30px;
    margin: 0 auto;
    /* margin-bottom: 30px; */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #EFEFEF;
    max-width: 400px;
    /* height: 100%; */
    /* height: 400px; */
    background-color: white;
}

.old-price span {
    text-decoration: line-through;
    color: #999;
    margin-right: 10px;
}

.table-left .icon, .table-right .icon {
    padding: 30px 50px 40px 70px;
    order: 2;
}

.table-left .icon img, .table-right .icon img {
    width: 50px;
    height: 50px;
    margin: 0 auto;
}
.pricing-details {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.table-left .pricing-details span, .table-right .pricing-details span {
    display: inline-block;
    font-family: Poppins;
    font-size: 34px;
    font-weight: 600;
    color: #3b5de7;
    margin-bottom: 20px;
}

.table-left .pricing-details h2, .table-right .pricing-details h2 {
    font-family: Poppins;
    font-weight: 600;
    color: #505050;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
}

.table-left .pricing-details p, .table-right .pricing-details p {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 300;
    color: #505050;
    letter-spacing: 1px;
    line-height: 1.4;
    margin-bottom: 20px;
}

.table-left .pricing-details ul, .table-right .pricing-details ul {
    margin-top: 30px;
    margin-bottom: 20px;
}


.table-left .pricing-details li, .table-right .pricing-details li {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    color: #505050;
    line-height: 1.4;
    margin-bottom: 10px;
}
.table-right .header {
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Adjust this value to move the plan name and icon up or down */

}

.table-right .header .plan-name {
    font-family: Poppins;
    font-weight: 600;
    color: #252b5b;
    margin-bottom: 20px;
    font-size: 24px;
  
}


.pricing-details .price {
    font-size: 36px;
    font-weight: bold;
    display: flex;
    align-items: baseline;
}

.pricing-details .price .currency {
    font-size: 18px; /* Reduced the font size */
    margin-right: 5px;
    position: relative;
    top: -25px; /* Adjust this value to move the dollar sign up or down */
}

.pricing-details .price .amount {
    font-size: 52px; /* Increased the font size */
}

.pricing-details .price .per-month {
    font-size: 18px; /* Adjust this value to your liking */
    margin-left: 5px;
    color: #505050;

}

.pricing-section .btn-action {
    /* padding: 15px 30px; */
    /* font-size: 18px; */
    align-self: center; /* Centers the price div */

}
.pricing-section .table-left:hover, .pricing-section .table-right:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.pricing-plans-container {
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.pricing-plans-container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}








/* ----- Pricing Section Styling Ends ----- */


/* ----- CTA Section Styling Starts ----- */


.cta-sub {
    padding-top: 100px;
    padding-bottom: 100px;
    background: #F3F3F3;
}

.cta-sub h1 {
    font-family: Poppins;
    font-size: 28px;
    color: #111111;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 10px;
    margin-bottom: 0;
}

.cta-sub p {
    font-family: Roboto;
    font-size: 16px;
    color: #303030;
    font-weight: 300;
    line-height: 1.5;
    margin-top: 20px;
    margin-bottom: 40px;
}

.subs-form {
    text-align: center;
}

.subs-form .mail {
    background-color: #F9F9F9;
    border: none;
    border-radius: 5px 0 0 5px;
    outline: none;
    height: 40px;
    padding: 0 150px 0 20px;
    box-shadow: none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    transition: all .3s;
}


.subs-form input {
    color: #222222;
    font-family: Poppins;
    padding: 0;
    font-size: 0.9em;
}

.subs-form .submit-button {
    font-size: 0.9em;
    height: 40px;
    border: 2px solid;
    border-radius: 0 5px 5px 0;
    margin: 0;
    padding: 0 25px 0 25px;
    border-color: #3b5de7;
    background-color: #3b5de7;
    color: #FFFFFF;
    box-shadow: 0 0 1px transparent;
    outline: none;
}

.subs-form .submit-button:hover {
    box-shadow: 0 0 10px #FFFFFF;
    -webkit-transition: 500ms;
    transition: 500ms;
}


/* ----- CTA Section Styling Ends ----- */


/* ----- Client Sectiion Styling ----- */

.client-section {
    background-color: #F3F3F3;
    padding-top: 30px;
}

.client-section h1 {
    font-family: Poppins;
    font-size: 28px;
    color: #4a4a4a;
    font-weight: 600;
    line-height: 1.4;
}

.clients ul li {
    display: inline;
}

.clients .single img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}


/* ------- Footer Section Styling Starts ------- */


.footer {
    background-color: #F3F3F3;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-top: 50px;
    padding-bottom: 50px;
}

.footer img {
    margin-bottom: 20px;
}

.footer-menu ul {
    list-style-type: none;
}

.footer-menu li {
    display: inline;
    line-height: 2;
    font-family: Roboto;
    font-size: 14px;
    padding-right: 15px;
    text-transform: uppercase;
}

.footer-menu li a {
    color: #707570;
    text-decoration: none;
}

#security-list, .modal-body ul li p {
    font-family: Roboto, serif;
    font-size: 14px;
    color: #707570;
    font-weight: 300;
    line-height: 2;
    letter-spacing: 5px;
}

.modal-body {
    font-family: Roboto;
    font-size: 14px;
    color: #707570;
    font-weight: 300;
    line-height: 2;
}

.footer-text p {
    font-family: Roboto;
    font-size: 14px;
    color: #707570;
    font-weight: 300;
    line-height: 2;
    letter-spacing: 1px;
    margin-top: 10px;
}

/* ------- Footer Section Styling Starts ------- */

.no-color {
    background: #FFFFFF;
}


/*---------------------------------------------------
----------- Contact Page Styling Starts -------------
---------------------------------------------------*/

.contact-section {
    width: 100%;
    height: 100%;
    padding: 150px 0 50px 0;
    background: #FFF;
}

.contact-section h1 {
    font-family: Poppins;
    font-size: 28px;
    font-weight: 600;
    color: #111111;
    line-height: 1.3;
    margin-bottom: 20px;
}

.contact-section p {
    font-family: Roboto;
    font-size: 14px;
    font-weight: 300;
    color: #111111;
    line-height: 1.4;
}


/* ------------ Contact Form Styling --------*/

.contact-form {
    padding-top: 50px;
}


label {
    display: block;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    text-align: left;
}

.form-control {
    border: 0px;
    border-radius: 0px;
    margin-top: 10px;
    background: transparent;
    margin-bottom: 40px;
    border-bottom: 1px solid #999999;
    -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
}

.form-control:focus {
    border-color: #3b5de7;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.form-control::-webkit-input-placeholder {
    font-family: Roboto;
    font-size: 13px;
    color: #999999;
}

.form-control:-moz-placeholder {
    font-family: Roboto;
    font-size: 13px;
    color: #999999;
}

.form-control::-moz-placeholder {
    font-family: Roboto;
    font-size: 13px;
    color: #999999;
}

.form-control:-ms-input-placeholder {
    font-family: Quicksand;
    font-size: 13px;
    color: #999999;
}

.text-muted {
    font-family: Roboto;
    font-size: 13px;
    color: #222;
}

.text-muted strong {
    color: #FF3333;
}

.btn-send {
    font-family: Poppins;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    border-radius: 0px;
    color: #FFFFFF;
    background: #3b5de7;
    border-color: #3b5de7;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
}

.btn-send:hover, .btn-send:focus {
    color: #FFFFFF;
    background: #000000;
    border-color: #111111;
    outline: none !important;
}

/* -------- Contact Section Styling Ends ---- */


/* -------------------------------------------------------
----------- Bact-to-Top Styling Starts Here --------------
---------------------------------------------------------*/


.back-to-top {
    background: #3b5de7;
    margin: 0;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    z-index: 90;
    display: none;
    text-decoration: none;
    color: #0E1729;
}

.back-to-top i {
    position: relative;
    left: 13px;
    top: 8px;
    font-size: 24px;
    color: #FFFFFF;
    -webkit-transition: 200ms;
    -moz-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;
}

.back-to-top:hover {
    background: #3b5de7;
    color: #FFFFFF;
}

.back-to-top:hover i {
    top: 6px;
}

.back-to-top:focus {
    color: #FFFFFF;
}


/*---------------------------------------------------
----------- Contact Page Styling Ends -------------
---------------------------------------------------*/


/*----------------------------------------------------
------------- All ------------------------------------
--------------------- Media --------------------------
------------------------------- Queries --------------
-----------------------------------------------------*/

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

    #left, #right {
        width: 25px;
    }

    #top {
        height: 25px;
    }

    #bottom {
        height: 25px;
    }

    .custom-padding {
        padding-left: 80px;
        padding-right: 80px;
    }


    .hero-content {
        width: 100%;
        padding: 260px 0 120px 0;
    }

    .hero-content h1 {
        font-size: 64px;
        font-weight: 600;
        line-height: 1.2;
        margin-top: 0;
        letter-spacing: -2px;
        margin-bottom: 25px;
    }

    .hero-content p {
        font-size: 14px;
    }

    .btn-action {
        border: 2px solid #3b5de7;
        font-weight: 500;
        height: 42px;
        padding: 0 24px;
    }

    .btn-fill {
        border: 2px solid #3b5de7;
        height: 38px;
    }

    .app-hero-content {
        padding: 150px 0 0 0;
    }

    .app-hero-content h1 {
        font-size: 42px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -1px;
        margin-top: 25px;
    }

    .app-hero-content p {
        font-size: 16px
    }

    .app-sub-inner {
        padding: 180px 0 100px 0;
    }

    .app-sub-content h1 {
        font-size: 64px;
        font-weight: 700;
        margin-bottom: 30px;
    }

    .app-sub-content p {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 30px;
    }

    .cta-small .cta-content span {
        position: absolute;
        left: -30px;
    }

    .cta-small .cta-content h2 {
        font-size: 14px;
    }

    .services-content h1 {
        font-size: 28px;
        line-height: 1.4;
    }

    .services-content p {
        font-size: 14px;
    }

    .services .services-description {
        margin-bottom: 75px;
    }

    .flex-features {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .flex-split {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .flex-split .f-right {
        padding: 50px 20px 20px 20px;
    }

    .features-section {
        -webkit-flex-direction: row;
        flex-direction: row;
    }

    .features-section .f-left h2 {
        font-size: 34px;
    }

    .features-section .f-left {
        padding: 60px;
    }

    .features-section .f-right {
        flex: 1 0 50%;
    }

    .features-section-2 {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .features-section-2 .features-content {
        padding: 50px;
    }

    .features-section-2 .features-content h2 {
        font-size: 34px;
        margin-top: 20px;
    }

    .features-section-2 .features-content h4 {
        font-size: 21px;
    }

    .features-section-2 .features-content p {
        font-size: 15px;
    }

    .counter-up {
        margin-bottom: 2em;
    }

    .counter-text {
        margin-bottom: 0;
    }

    .counter-section h3 {
        font-size: 34px;
    }

    .counter-text h4 {
        font-size: 18px;
    }

    .feature_huge .feature_list img {
        width: 65px;
        height: 65px;
    }

    .feature_huge .feature_list h1 {
        font-family: Poppins;
        font-size: 18px;
        font-weight: 600;
        padding: 0.5em;
        color: #232323;
    }

    .feature_huge .feature_list p {
        font-size: 14px;
    }


    .testimonial-section h1 {
        font-size: 2em;
    }

    .pricing-section .table-left, .pricing-section .table-right {
        margin: 0 auto;
    }

    .contact-section {
        padding: 200px 0 100px 0;
    }

    .contact-section h1 {
        font-size: 42px;
    }

    .contact-section p {
        font-size: 16px;
    }

    .contact-form {
        padding-top: 100px;
    }

}

@media screen and (min-width: 400px) and (max-width: 600px) {

    .subs-form .mail {
        padding: 0 30px 0 20px;
        border-radius: 5px 0 0 5px;
    }

    .subs-form .submit-button {
        padding: 0 5px 0 5px;
        border-radius: 0 5px 5px 0;
    }
}


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

    .subs-form .mail {
        text-align: center;
        padding: 0 0 0 0;
        border-radius: 5px 0 0 5px;
    }

    .subs-form .submit-button {
        padding: 0 5px 0 5px;
        border-radius: 0 5px 5px 0;
        margin-top: 15px;
    }

    .app-info {
        margin-bottom: 0em;
    }

    .download-buttons img {
        height: 40px;
        width: 120px;
    }

    .back-to-top {
        right: 10px;
    }
}


@media only screen and (min-width: 992px) {

    .pricing-section .table-left {
        padding: 20px;
    }

    .pricing-section .table-right {
        padding: 20px 30px 50px 30px;
        }
}


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

    .app-sub-content h1 {
        font-size: 34px;
        margin-bottom: 30px;
    }

    .app-sub-content p {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 30px;
    }

    .pricing-section .table-left {
        margin-right: 10px;
    }

    .pricing-section .table-right {
        margin-left: 10px;
    }
}


/* ------ Features Split Section Media Queries ----- */

@media only screen and (min-width: 769px) {
    .flex-split {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
    }

    .flex-split .f-right h2 {
        font-family: Poppins;
        font-size: 34px;
    }
}


@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .flex-split .f-left img {
        margin-top: 30px;
    }

    .flex-split .f-right {
        padding: 10px 20px 20px 20px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1180px) {
    .flex-split .f-left img {
        margin-top: 50px;
    }
}

@media only screen and (min-width: 1024px) {
    .flex-split .f-left {
        padding: 30px 10px 10px 10px;
    }

    .flex-split .f-right {
        padding: 40px 50px 50px 50px;
    }
}

/* ------ Features Split Section Media Queries Ends  ----- */

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

    .jarallax-container {
        flex-direction: column-reverse; /* Stack the children vertically and reverse the order */
    }

    .jarallax-left, .jarallax-right {
        width: 100%; /* Make the items take up the full width on smaller screens */
    }

    .hero-section{
        padding-left: 0px;
    }

    .hero-content {
        padding: 50px 0; /* Adjust the padding as needed */
    }

    .jarallax-right img {
        object-position: bottom center; /* Align the image to the top of its container */
        padding: 60px 20px;
    }
}
@media only screen and (max-width: 766px) {
    .features-section .f-right {
        flex: 1 0 50%;
        height: 360px;
    }
    .jarallax-container {
        flex-direction: column-reverse; /* Stack the children vertically and reverse the order */
    }

    .jarallax-left, .jarallax-right {
        width: 100%; /* Make the items take up the full width on smaller screens */
    }

    .hero-section{
        padding-left: 0px;
    }


    .hero-content {
        padding: 50px 0; /* Adjust the padding as needed */
    }

    .jarallax-right img {
        object-position: bottom center; /* Align the image to the top of its container */
        padding-right: 0px;
        padding-top: 50px;
    }

}

@media only screen and (max-width: 1142px) {
    .features-section-2 .features-content {
        padding: 0;
    }

    .features-section-2 .features-content {
        padding: 10px;
    }

    .features-section-2 .features-content h2 {
        margin-top: 10px;
    }
}