/*------------------------------
# General
--------------------------------*/


@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto-Bold.woff2') format('woff2'),
        url('../fonts/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Black';
    src: url('../fonts/Roboto-Black.woff2') format('woff2'),
        url('../fonts/Roboto-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-BlackItalic';
    src: url('../fonts/Roboto-BlackItalic.woff2') format('woff2'),
        url('../fonts/Roboto-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-BoldItalic';
    src: url('../fonts/Roboto-BoldItalic.woff2') format('woff2'),
        url('../fonts/Roboto-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Italic';
    src: url('../fonts/Roboto-Italic.woff2') format('woff2'),
        url('../fonts/Roboto-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Light';
    src: url('../fonts/Roboto-Light.woff2') format('woff2'),
        url('../fonts/Roboto-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-LightItalic';
    src: url('../fonts/Roboto-LightItalic.woff2') format('woff2'),
        url('../fonts/Roboto-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('../fonts/Roboto-Medium.woff2') format('woff2'),
        url('../fonts/Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-MediumItalic';
    src: url('../fonts/Roboto-MediumItalic.woff2') format('woff2'),
        url('../fonts/Roboto-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Thin';
    src: url('../fonts/Roboto-Thin.woff2') format('woff2'),
        url('../fonts/Roboto-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-ThinItalic';
    src: url('../fonts/Roboto-ThinItalic.woff2') format('woff2'),
        url('../fonts/Roboto-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}



body {
    font-family: 'Roboto-Regular';
    color: #2D2D2D;
    font-size: 16px;
    line-height: 1.2;
    position: relative;
    background: #112430;

}

#body:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100%;
}

/*--------------------------------------------------------------
# General Css Saart
--------------------------------------------------------------*/

a {
    color: #5846f9;
    transition: all 0.3s ease-in-out;
}

a:hover {
    color: #fff;
    text-decoration: none;

    }

h5{
font-size: 16px;
line-height: 19px;
color: #828C93;
text-transform: capitalize;
}
b{
    font-family: 'Roboto-Medium';
    font-weight: normal;
}
.inner-page-content h4 {
    font-size: 18px;
}
.inner-page-content p {
    line-height: 28px;
    color: #fff;
    margin-bottom: 30px;
}

.dash-list {
    padding: 0 0 0 20px;
    margin: 0 0 35px 0;
}

.dash-list li {
    color: #fff;
    margin: 0 0 6px 0;
    line-height: 28px;
    position: relative;
    list-style: none;
}
.dash-list li:before {
    content: "-";
    position: absolute;
    top: 1px;
    left: -18px;
}
.bullet-list, .roman-list {
    margin: 0 0 35px 0;
}
.bullet-list li {
    color: #fff;
    margin: 0 0 10px 0;
    line-height: 28px;
}


.roman-list {
    counter-reset: list;
    }

.roman-list > li {
    list-style: none;
    position: relative; 
}

.roman-list > li:before {
    counter-increment: list;
    content: counter(list,  lower-roman) ") ";
    position: absolute;
    left: -1.4em;
 }

.roman-list li, .roman-list li {
    margin: 0 0 10px 0;
    color: #fff;
    line-height: 28px;
}

.bullet-list li h4, .roman-list li h4{
    color: #fff;
    margin: 0 0 10px 0;
}




/*----- General Css End---*/



/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #fff;
    display: none;
}

#preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid #EF8318;
    border-top-color: #e7e4fe;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    -webkit-animation: animate-preloader 1s linear infinite;
    animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/

@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}

/*--------------------------------------------------------------
                        GENERAL CSS START
--------------------------------------------------------------*/
h1 {
    font-size: 42px;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-shadow: 0px 3px 6px #00000029;
    line-height: 49px;
    font-family: 'Roboto-Medium';
    margin: 25px 0 20px;
}

/*------GENERAL CSS END---*/

/*--------------------------------------------------------------
                        HOME PAGE START HERE
--------------------------------------------------------------*/

/*Home page header*/


#header {
    position: fixed;
    width: 100%;
    z-index: 99;
    padding: 4px 0;
    background: #112430;
    top: 0;
    box-shadow: 0px 1px 5px #0000006e;
}
.home-wrapper #header {
    background: transparent;
    box-shadow: none;
}
.home-wrapper .header-logo {
     visibility: hidden; 
     pointer-events: none; 
}
.header-logo {
    margin-top: 6px;
    display: inline-block;
}
.custom-navigation ul {
    padding: 0;
    list-style: none;
    margin: 0;
}
.custom-navigation ul li a {
    font-size: 24px;
    color: #fff !important;
    position: relative;
    padding: 10px 0;
    font-family: 'Roboto-Medium';
}

.custom-navigation ul li a:hover {
    color: #fff;
}
.custom-navigation ul li a:after, .home-header .custom-navigation ul li.active a:after {
    content: "";
    visibility: hidden;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    width: 0;
    display: block;
    background: #fff;
    margin: 0 auto;
    position: absolute;
    transition: all 0.2s ease-in-out;
}
.custom-navigation ul li a:hover:after, .home-header .custom-navigation ul li.active a:after{
    visibility: visible;
    width: 80%;
}

.home-page #section0{
    background: url('../img/home-bg-0.svg') no-repeat center center;
    background-size: cover;

}
.home-page #section1{
    background: url('../img/home-bg-1.svg') no-repeat center center;
    background-size: cover;
}
.home-page #section2{
    background: url('../img/home-bg-2.svg') no-repeat center center;
background-size: cover;
}
.home-page #section3{
    background: url('../img/home-bg-3.svg') no-repeat center center;
background-size: cover;
}
.home-right {
    position: absolute;
    bottom: 0;
    right: 10%;
}

.section{
    position: relative;
    overflow: hidden;
}
.home-left{ max-width: 450px;  position: relative;}
.head-section p{
        font-size: 20px;
        line-height: 20px;
        color: #fff !important;
}
.pattern-0 {
    position: absolute;
    left: -32%;
    top: -19%;
    max-width: 95%;
    z-index: 0;
}
.pattern-1 {
    position: absolute;
    right: -30%;
    top: -68%;
    max-width: 95%;
    z-index: 0;
}

.pattern-2 {
    position: absolute;
    left: -32%;
    top: -19%;
    max-width: 95%;
    z-index: 0;
}
.pattern-3 {
    position: absolute;
    right: -30%;
    top: -68%;
    max-width: 95%;
    z-index: 0;
}
.section .fp-tableCell > .content {
    z-index: 1;
    
}   
.app-store-bx {
    text-align: center;
    padding: 40% 0 0 0;
}
.app-store-bx p{
    font-size: 36px;
    line-height: 43px;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin: 0 0 30px 0;
    text-shadow: 0px 3px 6px #00000029;
}
.app-store-bx a{
    display: inline-block;
    margin: 0 5px ;
}
/*slider navigation button */
#fp-nav{
    z-index: 0;
}
#fp-nav.fp-right {
    right: 4%;
}
#fp-nav ul li, .fp-slidesNav ul li {
    display: block;
    width: 16px;
    min-height: 16px;
    margin: 10px;
    position: relative;
    height: auto;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span {
    border-radius: 50%;
    /* position: absolute; */
    z-index: 1;
    height: 16px;
    width: 16px;
    border: 0;
    background: transparent;
    left: 50%;
    top: 50%;
    margin: 0px 0 0 0px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    border: 2px solid #fff;
    display: block;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
     position: relative; 
    
    height: 16px !important;
    width: 16px !important;
    background: transparent;
    border: 2px solid #fff;
    display: block;
    margin: 0 !important;
}
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span {
    height: 32px !important;
    
    margin: 0px 0 0 0px;
    border-radius: 17px;
    background: #fff;
}
.fp-sr-only{
    display: none !important;
}
/*slider navigation button */
/*------HOME PAGE END HERE---*/




/*--------------------------------------------------------------
                        FEATURES PAGE START
--------------------------------------------------------------*/
.features-page .section{
    background: #112430;
}
.features-page .container {
    display: flex;
    justify-content: space-between;
}

.features-header .custom-navigation ul li.active a  {
    background: transparent linear-gradient(90deg, #FC3947 0%, #FFA5A5 100%) 0% 0% no-repeat padding-box !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.features-header .custom-navigation ul li.active a:after {
    background: transparent linear-gradient(90deg, #FC3947 0%, #FFA5A5 100%) 0% 0% no-repeat padding-box !important;
    width: 80%;
    visibility: visible;
}

.features-left h2{
   background: transparent linear-gradient(90deg, #FC3947 0%, #FFA5A5 100%) 0% 0% no-repeat padding-box;
     -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    display: inline-block;
}



 h4 {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.48);
    margin: 20px 0 35px;
}
.features-page .features-left p {
    color: #fff;
    font-size: 20px;
    line-height: 40px;
    font-family: 'Roboto-Light';
}
.app-store-bx.hz-bx {
    padding: 0;
    display: flex;
    align-items: center;
    margin: 25% 0 0 0;
}

.app-store-bx.hz-bx p {
    margin: 0 30px 0 0;
    font-size: 20px;
    font-family: 'Roboto-Light';
}
.features-page .features-left {
    max-width: 44%;
}
.app-store-bx.hz-bx a {
    max-width: 156px;
}

.features-left p {    
    font-size: 20px;
    font-family: 'Roboto-Light';
}

.features-page .home-right {
    position: static;
}
.features-page #fp-nav ul li a.active span, .features-page #fp-nav ul li:hover a.active span, .features-page .fp-slidesNav ul li a.active span, .features-page .fp-slidesNav ul li:hover a.active span {
    background: transparent linear-gradient(
180deg
, #FC3947 0%, #FFA5A5 100%) 0% 0% no-repeat padding-box;
    border: 0;
}

/*# FEATURES END---*/


/*--------------------------------------------------------------
                        ABOUT US PAGE START
--------------------------------------------------------------*/

.about-header .custom-navigation ul li.active a, .about-header .custom-navigation ul li.active hover {
 background: transparent linear-gradient(270deg, #00D88F 0%, #00FF3C 100%) 0% 0% no-repeat padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.about-header .custom-navigation ul li.active a:after, .about-header .custom-navigation ul li.active:hover a:after{
background: transparent linear-gradient(270deg, #00D88F 0%, #00FF3C 100%) 0% 0% no-repeat padding-box !important;
 width: 80%;
    visibility: visible;
}
.about-us-section, .privacy-section, .terms-conditions
, .contact-section{
    margin: 112px 0 0;
    padding: 100px 0 160px 0;
}
.about-banner{
    margin-bottom: 80px;
}
.about-us-section  h2 {
    background: transparent linear-gradient( 
270deg
 , #00D88F 0%, #00FF3C 100%) 0% 0% no-repeat padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    font-size: 36px;
    display: inline-block;
    margin: 0 0 20px 0;
}
 .prar-text {
    font-size: 20px;
    color: #fff;
    line-height: 40px;
    margin-bottom: 80px;
}
.about-us-section  h4 {
    margin-top: 0;
}

.about-wrapper .footer-sec, .privacy-wrapper .footer-sec{
    position: relative;
}
/*#  ABOUT US END---*/

/*--------------------------------------------------------------
                        CONTACT US PAGE START
--------------------------------------------------------------*/

.contact-header .custom-navigation ul li.active a {
 background: transparent linear-gradient(270deg, #8757F8 0%, #8656F8 63%, #2727FF 100%) 0% 0% no-repeat padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.contact-header .custom-navigation ul li.active a:after{
background: transparent linear-gradient(270deg, #8757F8 0%, #8656F8 63%, #2727FF 100%) 0% 0% no-repeat padding-box;
 width: 80%;
    visibility: visible;
}
.contact-wrapper .footer-sec {
    position: fixed;
    bottom: 0;
}

.contact-addresss {
    max-width: 250px;
    background: transparent linear-gradient(  270deg, #8757F8 0%, #8656F8 29%, #2727FF 100%) 0% 0% no-repeat padding-box;
    border-radius: 10px;
    padding: 25px 20px 15px 30px;

}
.contact-row .contact-row-icon {
    display: inline-block;
    margin: 0 10px 0 0;
    flex: 0 0 24px;
}
.contact-row p {
    color: #fff;
    font-size: 12px;
    line-height: 18px;
}
.contact-row a {
    display: flex;
    margin: 0 0 11px 0;
    font-size: 12px;
    color: #fff;
    align-items: center;
}
.contact-left-bx .app-store-bx.hz-bx {
    margin: 113px 0 0 0 !important;
}


.contact-right-bx {
    padding-left: 40px;
}

.form-bx .form-control {
    height: 48px;
    background: #33444E 0% 0% no-repeat padding-box;
    border-radius: 100px;
    border: 0;
    font-size: 14px;
    padding: 0px 20px;
    color: #fff;
}
.form-bx .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
.form-bx .form-control::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
.form-bx .form-control:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
.form-bx .form-control:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}
.form-bx textarea {
    max-height: 232px !important;
    border-radius: 10px !important;
    padding-top: 15px !important;
    height: 100% !important;
}
.sm-button {
    min-width: 160px;
    height: 40px;
    background: transparent linear-gradient(
270deg
, #8757F8 0%, #8656F8 29%, #2727FF 100%) 0% 0% no-repeat padding-box;
    border-radius: 40px;
    border: 0;
    color: #fff;
    font-size: 14px;
}
/*#  CONTACT US END---*/



/*--------------------------------------------------------------
                        # FOOTER START 
--------------------------------------------------------------*/
.footer-sec {
    position: absolute;
    width: 100%;
    z-index: 1;
    bottom: 0;
    background: rgba(0,0,0, 0.33);
    padding: 30px 10px;
}
.footer-sec p {
    margin-bottom: 0;
    color: #fff;
    font-family: Roboto-Light;
}
.footer-left p a {
    color: #fff;
    font-size: 24px;
}

.footer-center .footer-social {
    display: flex;
    color: #fff;
    justify-content: center;
    align-items: center;
}
.footer-center .footer-social p {
    font-size: 24px;
}
.footer-center .footer-social ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-center .footer-social ul li {
    margin: 0 15px;
}
.footer-right p {
    font-size: 20px;
    text-align: right;
}

/*# FOOTER END---*/



/*Form validation css */
 .php-email-form .loading {
  display: none;
  background:transparent linear-gradient(  270deg, #8757F8 0%, #8656F8 29%, #2727FF 100%) 0% 0% no-repeat padding-box;
  text-align: center;
  padding: 15px;
  margin-top: -33px;
  margin-bottom: 5px;
  border-radius: 7px;
}

 .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.php-email-form .error-message {
    display: none;
    color: #fff;
    background: transparent linear-gradient( 90deg, #FC3947 0%, #ea0e0e 100%) 0% 0% no-repeat padding-box;
    text-align: left;
    padding: 15px;
    font-weight: 600;
    font-size: 14px;
    border-radius: 7px;
    margin-top: -32px;
    margin-bottom: 5px;
}

 .php-email-form .error-message br + br {
  margin-top: 25px;
}

 .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}
.php-email-form .validate {
  display: none;
      background: transparent linear-gradient(
90deg, #FC3947 0%, #FFA5A5 100%) 0% 0% no-repeat padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
  margin: 5px 0 0 20px ;
  font-weight: 400;
  font-size: 13px;
}
@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}