@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
}

.header {
    background-color: #2E0051;
}

.header .navbar-nav {
    width: 70%;
}

.header .navbar-nav .nav-item {
    margin: 0% 3%;
}

.header .navbar-nav .nav-item .nav-link {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.header .navbar p {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.fa-bars {
    color: #fff;
}

@media(max-width:1199px) {
    .header .navbar-nav {
        width: 60%;
    }
}

/* -------------------banner------------------- */
.banner {
    background: linear-gradient(to top, #2e005191, #2e005187), url('../images/background/banner.png') no-repeat top center;
    background-size: cover;
}
.banner .main-heading{
    font-weight: bold;
    font-size: 50px;
    color: #E8C531;
    text-align: center;
}
.banner .heading-holder {
    margin: 15% 0;
}

.banner .heading-holder h3 {
    font-weight: bold;
    font-size: 50px;
    line-height: 80px;
    color: #fff;
}

.banner .heading-holder h3 span {
    color: #E8C531;

}

.banner .text-holder p {
    font-size: 16px;
    line-height: 35px;
    text-align: left;
    color: #fff;
}
@media(max-width:1199px){
    .banner .heading-holder h3 {
        font-size: 40px;
    }
}
@media(max-width:991px) {
    .banner .heading-holder h3 {
        font-size: 30px;
        line-height: 40px;
    }
    .banner .main-heading{
        font-weight: bold;
        font-size:38px;
    }
}

/* -----------------how-it-work----------------- */
.how-it-works {
    background: linear-gradient(to top, #2e00518c, #2e0051a1), url("../images/how-it-works.png") no-repeat top center;
    background-size: cover;
    background-attachment: fixed;
    padding: 5% 0;
}

.how-it-works .heading-holder h3 {
    font-weight: bold;
    font-size: 40px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    margin-bottom: 8%;
}

.how-it-works .icon-holder {
    border-radius: 100%;
    width: 150px;
    height: 150px;
    background: #0575E6;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #021B79, #0575E6);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #021B79, #0575E6);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    text-align: center;
    padding: 20px 0;
}

.how-it-works .icon-holder {
    font-size: 70px;
    color: #E8C531;
}

.how-it-works .text-holder h5 {
    font-size: 40px;
    color: #E8C531;
    font-weight: 600;
}

.how-it-works .text-holder p {
    font-size: 20px;
    color: #fff;
    font-weight: 600;
}
@media(max-width:1199px){
    .how-it-works .heading-holder h3 {
        font-size: 30px;
    }
    
    .how-it-works .text-holder h5 {
        font-size: 30px;
        color: #E8C531;
        font-weight: 600;
    }
    
    .how-it-works .text-holder p {
        font-size: 15px;
    }
}
@media(max-width:991px) {
    .how-it-works .heading-holder h3 {
        font-size: 30px;
        line-height: 20px;
    }

    .how-it-works .text-holder h5 {
        font-size: 25px;
    }

    .how-it-works .text-holder p {
        font-size: 14px;
        ;
    }
}

/* -----------------demo-account----------------- */
.demo-account {
    padding: 2% 0;
    background: linear-gradient(to top, #2e005191, #2e005187), url('../images/background/banner.png') no-repeat top center;
}

.demo-account .heading-holder h3 {
    font-weight: bold;
    font-size: 40px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    margin-bottom: 4%;
}

.demo-account .icon-holder {
    font-size: 70px;
    color: #E8C531;
}


.demo-account .text-holder p {
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    text-align: center;
}


.demo-account .text-holder h5 {
    font-size: 35px;
    color: #E8C531;
    font-weight: 600;
    text-align: center;

}

.demo-account .text-holder h5 span {
    display: block;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    margin: 1% 0;
}

.demo-account .form-holder {
    border-radius: 10px;
    background: transparent;
    border: 2px solid #0ff;
    filter: 7px;
    padding: 10%;
    background: #520c87;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.demo-account form .form-control {
    border-radius: 5px;
    background: #520c87;
    border: 1px solid #8216f2;
    font-size: 15px;
    line-height: 24px;
    color: #c8c8c8;

}

.demo-account form .form-control:focus {
    background: transparent;
    color: #c8c8c8;
}

.demo-account form .form-control::placeholder {
    font-size: 15px;
    line-height: 24px;
    color: #c8c8c8;
}

.demo-account form .btn {
    width: 100%;
    border-radius: 10px;
    background: linear-gradient(#ff9327 0%, #fcee07 74.89%, #f7ec77 100%);
    font-weight: 600;
    font-size: 19px;
    line-height: 23px;
    color: #000;
}
@media(max-width:1199px){
    .demo-account .heading-holder h3 {    
        font-size: 30px;
    }
        
    .demo-account .text-holder p {
        font-size: 15px;
    }

    .demo-account .text-holder h5 {
        font-size: 22px;
    }
    .demo-account .text-holder h5 span {
        font-size: 12px;
    }
    
}
@media(max-width:991px) {
    .demo-account .heading-holder h3 {
        font-size: 30px;
    }

    .demo-account .text-holder p {
        font-size: 15px;
        color: #fff;
        font-weight: 600;
        text-align: center;
    }

    .demo-account .text-holder h5 {
        font-size: 25px;
    }

    .demo-account .text-holder h5 span {
        font-size: 12px;
    }
}

/* ----------------Get App-------------------- */
.get-app {
    padding: 5%;
    background: linear-gradient(#400960 0%, #400960d9 15.54%, #400960 38.77%, #2f4b7b 59.69%, #3a226a 77.5%, #400960 91.51%, #42005c 100%);

}

.get-app .heading-holder h3 {
    font-weight: bold;
    font-size: 40px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    margin-bottom: 4%;
}

.get-app .icon-holder {
    font-size: 70px;
    color: #E8C531;
}


.get-app .text-holder p {
    font-size: 25px;
    color: #E8C531;
    font-weight: 600;
    text-align: center;
}

.get-app .text-holder ul {
    border-radius: 10px;
    background: transparent;
    border: 2px solid #0ff;
    filter: 7px;
    padding: 5%;
    background: #520c87;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

.get-app .text-holder ul li {
    font-size: 16px;
    color: #E8C531;
    font-weight: 600;
    margin-bottom: 3%;

}

hr.get-border {
    width: 50%;
    border: 2px solid #E8C531;

}

.get-in-touch .nav-item {
    border-radius: 10px;
    padding: 3px;
}

.get-in-touch .nav-item.facebook {
    background-color: #34518c;
}

.get-in-touch .nav-item.twitter {
    background-color: #00a7e7;
}

.get-in-touch .nav-item.youtube {
    background-color: #e50116;
}

.get-in-touch .nav-item.insta {
    background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888', GradientType=1);
}

.get-in-touch .nav-item .nav-link {
    font-size: 30px;
    color: #fff;
}

.disclaimer p {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    text-align: center;
}
@media(max-width:1199px){
    .get-app .heading-holder h3 {
        font-size: 30px;
    }
    .get-app .text-holder p {
        font-size: 20px;
    }
    .get-app .text-holder ul li {
        font-size: 14px;
    }
    .disclaimer p {
        font-size: 16px;
    }
}
@media(max-width:991px) {
    .get-app .heading-holder h3 {
        font-size: 30px;
    }


    .get-app .text-holder p {
        font-size: 20px;
    }

    .get-app .text-holder ul {
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
        padding: 8% 15%;
    }

    .get-app .text-holder ul li {
        font-size: 14px;
        ;

    }

}

/* -----------------whats app icon-------------------- */
.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}