@font-face {
    font-family: 'product_sans_blackregular';
    src: url('assets/fonts/productsans-black-webfont.woff2') format('woff2'),
        url('assets/fonts/productsans-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'product_sans_blackitalic';
    src: url('assets/fonts/productsans-blackitalic-webfont.woff2') format('woff2'),
        url('assets/fonts/productsans-blackitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'product_sansbold';
    src: url('assets/fonts/productsans-bold-webfont.woff2') format('woff2'),
        url('assets/fonts/productsans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'product_sansbold_italic';
    src: url('assets/fonts/productsans-bolditalic-webfont.woff2') format('woff2'),
        url('assets/fonts/productsans-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'product_sansitalic';
    src: url('assets/fonts/productsans-italic-webfont.woff2') format('woff2'),
        url('assets/fonts/productsans-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'product_sans_lightregular';
    src: url('assets/fonts/productsans-light-webfont.woff2') format('woff2'),
        url('assets/fonts/productsans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'product_sans_lightitalic';
    src: url('assets/fonts/productsans-lightitalic-webfont.woff2') format('woff2'),
        url('assets/fonts/productsans-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'product_sans_mediumregular';
    src: url('assets/fonts/productsans-medium-webfont.woff2') format('woff2'),
        url('assets/fonts/productsans-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'product_sans_mediumitalic';
    src: url('assets/fonts/productsans-mediumitalic-webfont.woff2') format('woff2'),
        url('assets/fonts/productsans-mediumitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'product_sansregular';
    src: url('assets/fonts/productsans-regular-webfont.woff2') format('woff2'),
        url('assets/fonts/productsans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'product_sans_thinregular';
    src: url('assets/fonts/productsans-thin-webfont.woff2') format('woff2'),
        url('assets/fonts/productsans-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'product_sans_thinitalic';
    src: url('assets/fonts/productsans-thinitalic-webfont.woff2') format('woff2'),
        url('assets/fonts/productsans-thinitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'icomoon';
    src: url('assets/fonts/icomoon.woff?ean4x5') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    /* speak: never; */
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-crown:before {
    content: "\e900";
    
}

:root {
    --dark-blue: #222b42;
    --white : #FFFFFF;
    --white-transparent: #FFFFFF14;
    --primary-btn: #ff9a06;
    --grey-text: #6E6E6E;
    --black-color: #000000;
    --bluish-grey: #393E5C;
    --icon-bg-bluish: #00D7FF14;
    --purple: #5551EF;
    --section-bg-grey: #F9F9FF;
    --yellow-rating: #ffd643;
    --bg: #f6f6f6;
}
/* Generals */

body {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.content-container {
    position: relative;
    top: 150px;
}

.p {
    padding-bottom: 32rem;
}

/***********************************************************
                    Navbar top seciton
************************************************************/
nav {
    background-color: var(--dark-blue);
}

@media (min-width: 992px) {
    .navbar {
        height: 75px;
    }
}

@media (max-width: 991px) {
    .navbar .custom-width {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

.navbar .navbar-toggler i {
    color: var(--primary-btn);
    margin-right: 3rem;
}

.navbar .custom-width {
    position: relative;
    min-height: 100px;
}

.navbar .navbar-nav .nav-item {
    margin-right: 2.5rem;
}

@media (min-width: 1200px) {
    .navbar .navbar-nav .nav-item:not(:last-of-type) {
        margin-right: 4rem;
    }
}

.navbar .navbar-nav .nav-link {
    color: #ffffff85;
    font-weight: 400;
    font-family: 'product_sansregular';
    letter-spacing: 1.6px;
    font-size: 20px;
}

.navbar .navbar-nav .nav-item.login .nav-link {
    color: #FFFFFF;
    background-color: var(--primary-btn);
    border-radius: 3px;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:active,
.navbar .navbar-nav .nav-link:focus {
    color: var(--primary-btn);
}

.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
    color: var(--primary-btn);
}

nav {
  background-color: var(--dark-blue);
  .btn-dark:active,
  .btn-dark:focus {
    box-shadow: none;
  }
  #js-login-btn {
    display: none;
    border-radius: 8px;
    background: var(--primary-btn);
    padding: 4px 15px;
    font-weight: 600;
    font-size: 22px;
  }
  .profile .circle {
    position: relative;
    background-color: #ffe6c1;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-block;
    justify-items: center;
    margin-right: 5px;
    p {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: var(--primary-btn);
      font-weight: 700;
      font-size: 20px;
      margin: 0;
      padding: 0;
      text-transform: uppercase;
    }
  }
  .dropdown-toggle {
    border: none;
  }
  .dropdown-toggle::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-top: 0.5em solid;
    border-right: 0.5em solid transparent;
    border-left: 0.5em solid transparent;
  }
  .dropdown-menu {
    width: 300px;
    .row p{
      margin: 0;
    }
    #js-username {
      color: var(--dark-blue);
      font-weight: 700;
      font-size: 20px;
    }
    #js-email {
      color: #5C5958;
      font-weight: 400;
      font-size: 14px;
    }
    button {
      background-color: transparent;
      border: none;
      outline: none;
      text-decoration: underline;
    }
  }
}

/***********************************************************/
/***********************************************************
                    Header section section
************************************************************/
/* .header-section,.pricing, .contact-section */

.services-section,
#app {
    background-color: var(--bg);
    min-height: 100vh;
    padding-bottom: 2px;
}
#header .container .row {
    padding-bottom: 4rem;
}

#header .img-fluid {
    margin-top: -50px;
    /* height: 460px; */
    float: right;
}

#header .header-bg-img .container {
    max-width: 1350px;
}

.header-section .container {
    padding-top: 10rem;
}

.header-section .container .row {
    padding-top: 5rem;
}

.header-section .left-col {
    position: relative;
}

.header-section .left-col p,
.header-section .left-col h2:not(:first-of-type) {
    color: var(--dark-blue);
}

.one-click {
    color: var(--primary-btn);
}

.header-section .left-col p {
    font-size: calc(1rem + 0.5vw);
    font-weight: 600;
    font-family: 'product_sansbold';
    margin-bottom: 2rem;
}

.header-section .left-col h2 {
    font-family: 'product_sansbold', serif;
    font-size: calc(1rem + 2.1vw);
    font-weight: 700;
}

.header-section .left-col .p-container p {
    color: var(--dark-blue);
    font-family: 'product_sans_mediumregular';
    line-height: 1.666em;
    letter-spacing: 1.6px;
}

.header-section .left-col .p-container {
    margin: 0px 0px 25px 0px;
    padding: 0px 0px 0px 8px;
}

.header-section .left-col .btn-wraper {
    position: relative;
    display: inline-block;
}

.header-section .left-col .btn-wraper button {
    border: none;
    position: relative;
    background-color: var(--primary-btn);
    border-radius: 5px;
    text-align: center;
    color: var(--white);
    padding: 15px 30px;
    font-size: 1.7rem;
    letter-spacing: 1.6px;
    font-family: 'product_sansbold';
    transition: ease-in-out 500ms;
}

.header-section .left-col .btn-wraper button:hover {
    background-color: var(--dark-blue);
    color: var(--primary-btn);
    transition: ease-in-out 500ms;
}

.header-section .right-col img {
    vertical-align: middle;
    height: auto;
}

.header-section .say h1 {
    font-family: 'product_sansbold';
    font-size: 3rem;
    color: var(--dark-blue);
    letter-spacing: 1.4px;
}

.header-section .say p {
    font-family: 'product_sans_mediumitalic';
    font-size: 1.2rem;
    color: var(--dark-blue);
    letter-spacing: 1.6px;
}

/***********************************************************
                    Services section
************************************************************/
#services .payment-gateway .payment .fa-google-pay {
    border: 1px solid; color: white; background-color: #6e6e6e; border-radius: 10px; font-size: 3.5rem; padding: 0 0.5rem;
    transform: translateY(-3px);
}

/***********************************************************
                    Pricing section
************************************************************/
#pricing .container {
    max-width: 1430px;
}

#pricing .services-title {
    margin-bottom: 7rem;
    margin-top: 2rem;
}

.pricing .services-title span {
    font-family: 'product_sansbold';
    font-size: 3rem;
    letter-spacing: 1.6px;
    word-spacing: 8px;
}

.pricing .basic-card:hover,

.pricing .premium-card:hover {
    box-shadow: 8px 9px 20px -7px rgba(0,0,0,0.75);
    -webkit-box-shadow: 8px 9px 20px -7px rgba(0,0,0,0.75);
    -moz-box-shadow: 8px 9px 20px -7px rgba(0,0,0,0.75);
    transform: scale(1.2);
    background-color: var(--white);
    transition: ease-in-out 320ms;
}

.pricing .basic-card:hover ~ .text-center span .one, 
.pricing .standard-card:hover ~ .text-center span .two, 
.pricing .premium-card:hover ~ .text-center span .three {
    color: var(--primary-btn);
}

.pricing .basic-card:hover .crown,

.pricing .premium-card:hover .crown {
    color: var(--dark-blue);
    transition: ease-in-out 320ms;
}

.pricing .basic-card:hover h2,
.pricing .basic-card:hover h3,
.pricing .basic-card:hover p, 
.pricing .premium-card:hover h2,
.pricing .premium-card:hover h3,
.pricing .premium-card:hover p {
    color: var(--dark-blue);
    transition: ease-in-out 320ms;
}

.pricing .single-price {
    padding: 54px 0 0px;
    margin-bottom: 30px;
    background-color: var(--dark-blue);
    box-shadow: 10px 10px 60px #00000012;
    border-radius: 15px;
    z-index: 2;
    overflow: hidden;
    position: relative;
    transition: ease-in-out 320ms;
}

.pricing .standard-card {
    padding: 54px 0 0px;
    margin-bottom: 30px;
    background-color: var(--white);
    box-shadow: 10px 10px 60px #00000012;
    border: 0.5px solid var(--primary-btn);
    z-index: 2;
    overflow: hidden;
    position: relative;
    transition: ease-in-out 320ms;
    transform: scale(1.2);
}
@media (max-width: 991px) {
    .pricing .standard-card {
        transform: scale(1);
    }
}
.standard-card .pricing-head h2,
.standard-card .pricing-head .price h3 {
color: var(--dark-blue);
font-family: 'product_sansbold';
transition: ease-in-out 320ms;
letter-spacing: 1.6px;
}
.standard-card .crown {
    color: var(--dark-blue);
}
.standard-card .btn-wrap p {
    color: var(--dark-blue);
    
}

.pricing-head {
    padding-bottom: 30px;
    position: relative;
    margin-bottom: 10px;
    line-height: 1;
}

.pricing-head h2,
.pricing-head .price h3 {
color: var(--white);
font-family: 'product_sansbold';
transition: ease-in-out 320ms;
letter-spacing: 1.6px;
}

.pricing-head h2 {
    font-size: 1.8rem;
}

.pricing-head .price h3:not(:first-of-type) {
    font-size: 0.938rem;
}

.pricing-head .price h3 {
    font-size: 3.5rem;
}
.pricing-head .price p {
    font-size: 0.938rem;
}

.btn-wrap button {
    display: inline-block;
    position: relative;
    border-radius: 5px;
    background-color: var(--primary-btn);
    padding: 15px 30px;
    font-family: 'product_sans_mediumregular';
    border: none;
    margin-bottom: 1.5rem;
}

.btn-wrap a {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    letter-spacing: 1.6px;
}

.btn-wrap p {
    font-family: 'product_sansbold';
    font-size: 18px;
    letter-spacing: 1.6px;
    color: var(--white);
    transition: ease-in-out 320ms;
}

.ribbon {
    background-color: var(--primary-btn);
    position: absolute;
    height: 50px;
    color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    top: 28px;
    left: -53px;
    transform: rotate(311deg);
}

.crown {
    position: absolute;
    height: 50px;
    color: var(--primary-btn);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    top: 20px;
    right: 15px;
    transition: ease-in-out 320ms;
}

.pricing .text-center .one,
.pricing .text-center .two,
.pricing .text-center .three {
    font-size: 2rem;
}

.pricing .pf .col-lg-3 span,
.pricing .pf .col-lg-4 span {
    display: block;
    font-family: 'product_sans_mediumregular';
    font-size: 20px;
    color: var(--dark-blue);
    line-height: 4rem;
}

.pricing .pf .fa-lock-open {
    color: var(--primary-btn);
    margin-right: 20px;
}

.pricing .ppf .services-title {
    margin-bottom: 5rem;
}

.pf {
    padding-bottom: 5rem;
}

/***********************************************************
                    Services section
************************************************************/
#services {
    padding-top: 3rem;
}
.services-section .services-title p {
    font-family: 'product_sansbold';
    color: var(--dark-blue);
    letter-spacing: 1.5px;
    font-size: 2rem;
}

.services-section .title-container::before {
    background-color: var(--purple);
}

.services-section .service-col-wrap {
    padding: 30px 15px;
    margin-bottom: 30px;
}

.services-section .service-icon {
    border-radius: 100%;
    width: 100px;
    height: 100px;
    position: relative;
    margin-bottom: 30px;
    transition: ease-in-out 320ms;
}

.services-section .service-icon:hover {
    transform: scale(1.3);
    box-shadow: 0px 0px 13px 2px var(--primary-btn);
    -webkit-box-shadow: 0px 0px 13px 2px var(--primary-btn);
    -moz-box-shadow: 0px 0px 13px 2px var(--primary-btn);
    transition: ease-in-out 320ms;
}

.services-section .service-icon img {
    height: auto;
    max-width: 100%;
    position: absolute;
}

.services-section .service-content h4 {
    font-family: 'product_sansbold';
}

.services-section .service-content p {
    font-family: 'product_sansregular';
    letter-spacing: 1.4px;
    font-weight: 600;
}

.services-section .payment-gateway {
    margin-bottom: 5rem;
}

.services-section .payment-gateway h3 {
    font-family: 'product_sansbold';
    font-size: 2rem;
    color: var(--primary-btn);
    letter-spacing: 1.4px;
    padding-bottom: 2.1rem;
}

.services-section .payment-gateway span {
    font-size: 4rem;
    margin-left: 2rem;
    color: var(--grey-text);
}

.services-section .payment {
    display: inline-block;
}
/***********************************************************
                    Mobile-app-section section
************************************************************/

.mobile-app-section,
.extension-section {
    background-color: var(--white);
}

.mobile-app-section .container {
    padding: 0px;
}

.extension-section .container{
    padding-top: 40px;
    padding-bottom: 40px;
}

.mobile-app-section .content-wraper 
.extension-section .content-wraper{
    padding: 115px 15px;
}

.mobile-app-section .col-title::after, 
.extension-section .col-title::after{
    background-color: var(--white);
}

.mobile-app-section .col-title::before,
.extension-section .col-title::before {
    left: 6%;
}

.mobile-app-section .img-wrap img,
.mobile-app-section .minisec img,
.extension-section .img-wrap img, 
.extension-section .minisec img {
    height: auto;
    max-width: 100%;
}

.mobile-app-section .content-wraper h3,
.extension-section .content-wraper h3 {
    font-weight: 700;
    line-height: calc(2.5rem + 1.5vw);
    color: var(--primary-btn);
    font-family: 'product_sansbold';
    font-size: calc(0.8rem + 1.9vw);

}

.mobile-app-section .content-wraper ol {
    font-weight: 600;
}

.mobile-app-section .content-wraper ol,
.extension-section .content-wraper ul {
    position: relative;
    margin-top: 4rem;
    color: var(--dark-blue);
    font-family: 'product_sans_mediumregular';
    letter-spacing: 1.5px;
    font-size: calc(1rem + 0.6vw);
}


.extension-section .content-wraper ul li {
    color: #5C6977;
    font-weight: 200;
    margin-top: 40px;
}
.extension-section .content-wraper ul li span i {
    color: var(--primary-btn);
    margin-right: 12px;
}

.mobile-app-section .minisec .container, 
.extension-section .minisec .container {
    padding: 0;
    margin: 1rem 0;
}

.mobile-app-section .minisec .container img {
    vertical-align: middle;
    display: inline-block;
    margin-right: 2rem;
    width: 50%;
}

.extension-section .minisec .container .get-qoute {
    color: white;
    background-color: var(--primary-btn);
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 20px;
    margin-bottom: 50px;
}

/***********************************************************
                    contact-section section
************************************************************/
.contact-section {
    padding: 120px 0 ;
    
}

.contact-section .container {
    padding: 20px 15px;
} 

.contact-section .contact-img {
    padding: 10px;
}

.contact-section .contact-img img {
    height: auto;
    width: 100%;

}

.contact-section .title-wrap h3 {
    font-family: 'product_sansbold';
    color: var(--primary-btn);
    font-size: 2.656rem;
    letter-spacing: 1.6px;
}

.contact-section i {
    color: var(--primary-btn);
    margin-right: 8px;
}

.contact-section .title-wrap p {
    color: var(--dark-blue);
    line-height: 2rem;
    font-family: 'product_sans_mediumregular';
    letter-spacing: 1.4px;
    font-size: 1.25rem;
}

.contact-section .form-wrap input,
.contact-section .form-wrap textarea,
.contact-section .form-wrap button {
    display: block;
    margin-top: 25px;
    border-radius: 5px;
    border: 1px solid black;
    padding-left: 8px;
} 

.contact-section .form-wrap input,
.contact-section .form-wrap textarea {
    width: calc(13vw + 13rem);
}

.contact-section .form-wrap button {
    background-color: var(--primary-btn);
    color: white;
    font-family: 'product_sansbold';
    letter-spacing: 1.5px;
    font-size: 1.5rem;
    border: none;
    padding: 5px 40px;
}
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: green; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
  }
#snackbarfail {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: var(--primary-btn); /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}
  
  /* Show the snackbar when clicking on a button (class added with JavaScript) */
  #snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }

  #snackbarfail.showfail {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }
  
  /* Animations to fade the snackbar in and out */
  @-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }
  
  @keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }
  
  @-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }
  
  @keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }
  .spinner-border {
    width: 25px;
    height: 25px;
  }
  .hide-spinner {
    display: none;
  }
/***********************************************************
                    Footer section
************************************************************/

.footer-sec-bg {
    padding: 30px 0;
    background-color: var(--dark-blue);
}

.footer-section .custom {
    color: white;
    transition: ease-in-out 320ms;
}

.footer-section .custom:hover {
    color: var(--primary-btn)!important;
    transition: ease-in-out 320ms;
}


.footer-section .policy-col .col-content .text-white,
.footer-section .general-col .col-content .text-white {
    transition: ease-in-out 320ms;
}

.footer-section .policy-col .col-content a:hover {
    color: var(--primary-btn)!important;
    transition: ease-in-out 320ms;
}

.footer-section .general-col .col-content a:hover {
    color: var(--primary-btn)!important;
    transition: ease-in-out 320ms;
}

.footer-section .copyrights {
    border-top: 2px solid #ffffff4a;
    background-color: var(--black-color);
}

.content-footer {
    bottom: 0px;
    width: 100%;
}

.fix-footer {
    bottom: 0px;
    width: 100%;
}

.p-cont {
    margin-bottom: 12rem;
}