/*! Generated by Font Squirrel (https://www.fontsquirrel.com) */

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

}
@font-face {
    font-family: 'robotolight';
    src: url('font/roboto-light-webfont.woff2') format('woff2'),
         url('font/roboto-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotomedium';
    src: url('font/roboto-medium-webfont.woff2') format('woff2'),
         url('font/roboto-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotoregular';
    src: url('font/roboto-regular-webfont.woff2') format('woff2'),
         url('font/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotothin';
    src: url('font/roboto-thin-webfont.woff2') format('woff2'),
         url('font/roboto-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotoblack';
    src: url('font/roboto-black-webfont.woff2') format('woff2'),
         url('font/roboto-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body { font-family: 'robotoregular', sans-serif; font-size: 18px; letter-spacing: .4px; }
@media (min-width: 1355px){
    .container {
	max-width: 1320px;
    }
}
@media (min-width: 1600px){
    .container {
	max-width: 1554px;
    }
}
 @media (min-width: 1920px){
    .container {
	max-width: 1750px;
    }
}
 @media (min-width: 2200px){
    .container {
	max-width: 2000px;
    }
}

/*Header*/
@media (min-width: 1200px) {
   .logo-mob {display: none;}
}
@media (max-width: 1199px) {
   .logo-desk { display: none;}
}
.miannav { background: #fff;}
img { max-width: 100%;}
nav a { text-decoration: none;}
strong {font-family: 'robotobold';}
nav ul { margin: 0; padding: 0;}
nav.page-topnav ul li { display: inline-block;}
nav ul li { list-style: none;}
nav ul li a { color: #fff; white-space: nowrap;}
.nav-link.n-drop:hover,
.nav-link.n-drop:active,
.nav-link.n-drop:focus,
#offcanvasMainNav .dropdown-item:hover,
#offcanvasMainNav .dropdown-item:focus,
#offcanvasMainNav .dropdown-item:active { background: #4d4995!important; color: #fff!important; }
.page-topnav {background: #97d0ee; padding: 0; font-size: 15px; }
.p-site li a { padding-left: 25px; padding-right: 25px; }
.p-site li a.p-site-active, nav ul li a:hover { background: #4d4995; color: #fff;}
.p-nav a, .p-contacts a { padding-left: 15px; padding-right: 15px;}
.p-site a, .p-nav a, .p-contacts a  {line-height: 45px; display: inline-block;}
.applynow a, .btn-2nd {background: #4d4995; border-radius: 30px; transition: all 0.5s ease; color: #fff;}
.btn-apply-back {border-radius: 30px;}
.applynow a { display: inline-block;  padding-left: 15px; padding-right: 10px; line-height: 40px;}
.applynow a img { filter: brightness(100000%);transition: all 0.5s ease;}
.applynow a:hover {background: #d1923d;}
.applynow a:hover, .btn-2nd:hover {background: #d1923d;transition: all 0.5s ease; color: #fff;}
.applynow a:hover img {transform: translateX(10px);transition: all 0.5s ease;}
.dropdown-toggle, .nav-link.n-drop { text-transform: uppercase;}
#offcanvasMainNav .nav-link, #offcanvasMainNav .dropdown-item { color: #111;}
/* / Header*/
/*Banner*/
.home-banner { position: relative;}
.owl-next, .owl-prev { position: absolute; top: 0; width: 100px; height: 100%; font-size: 50px!important; padding: 0!important; margin: 0!important; border-radius: 0!important;}
.owl-next:hover, .owl-prev:hover { background: rgba(0,0,0,.3)!important}
.owl-prev {   
    left: 0;    
}
.owl-next {   
    right: 0;    
}
.home-banner.owl-theme .owl-nav {
    margin-top: 0;
}
/* / Banner*/
.h-section { padding-top: 100px; padding-bottom: 100px;}
.h-section-sm { padding-top: 50px; padding-bottom: 50px;}
/*Home page */

.btn-main {}
.home-welcome { background: #2a2850; color: #fff;}
.home-welcome h3 { text-transform: uppercase;}
.home-welcome .phead { font-size: 4rem;font-family: 'robotoblack';}
.home-welcome .phead span { color: #fdca7c;}
.home-welcome h1 { color: #918cf7;}
.home-welcome p { color: #91c7e4;}
.btn-main { background: #fecb7c; border-radius: 30px; padding-left: 30px; padding-right: 20px;}
.btn-main img { transition: all 0.5s ease;}
.btn-main:hover img {transform: translateX(10px);transition: all 0.5s ease;}
/*--*/
.show-d {}
.show-m {}
@media (max-width: 991px) {
 .show-d { display: none!important;}
}
@media (min-width: 992px) {
.show-m { display: none!important;}
}

/*--*/
.home-mainsvc {}
.home-mainsvc .phead { font-size: 4rem;font-family: 'robotoblack'; color: #4d4995;}
.home-mainsvc-ops { height: 100%; border-radius: 18px 18px 15px 15px;}
.home-mainsvc-ops figcaption { padding: 25px; height: 100%;}
.home-mainsvc-ops figcaption img { height: 40px;}
.home-mainsvc-ops img { border-radius: 15px 15px 0 0; }
.home-mainsvc-ops h2 { font-size: 24px;font-family: 'robotobold';}
.home-mainsvc-ops.op1 { background: #4d4995; color: #97d0ee;}
.home-mainsvc-ops.op2 { background: #97d0ee; color: #4d4995;}
.home-mainsvc-ops.op1 figcaption h2 { color: #fff;}
.home-mainsvc-ops.op2 figcaption h2 { color: #242048;}
.home-mainsvc-ops.op1 figcaption img { filter: brightness(100000%);}
/*--*/
.home-whychoose { background: #2a2850; color: #fff;}
.home-whychoose .phead { font-size: 4rem;font-family: 'robotoblack';}
.whychoosepoints-h { background: #4d4995; padding: 8px 25px; display: inline-block; margin-bottom: 15px; font-size: 26px; font-family: 'robotolight'; text-transform: uppercase;}
.home-whychoose-fimg img { border-radius: 100%; max-width: 80%;
-webkit-box-shadow: 10px -7px 13px 0px rgba(29,26,69,1);
-moz-box-shadow: 10px -7px 13px 0px rgba(29,26,69,1);
box-shadow: 10px -7px 13px 0px rgba(29,26,69,1);
}
/*--*/
.home-whyfinance {background: #4d4995; color: #fff;}
.home-whyfinance h3 {font-family: 'robotobold';}
.home-whyfinance h2 {font-size: 52px; }
.home-whyfinance h2 span { color: #ffc476;}
.home-whyfinance-img img { border-radius: 20px;}
/*--*/
.home-whyvalue .form-control { padding: 20px 40px; font-size: 26px; text-align: center;}
.home-whyvalue .form-control::placeholder { color: #d6d4d4;}
.home-whyvalue .form-control::-ms-input-placeholder { /* Edge 12 -18 */ color: #eee;}
.home-whyvalue .btn { padding: 20px 40px; font-size: 26px; background: #97d0ee; border-color: #97d0ee; text-align: center;font-family: 'robotobold'; color: #2a2850;}
.home-whyvalue .btn img { margin-left: 5px;transition: all 0.5s ease;}
.home-whyvalue .btn:hover img {transform: translateX(10px);transition: all 0.5s ease;}
/*--*/
.home-testimo {background: #ffd89f; color: #0f2733;}
.home-testimo h2 { font-size: 4rem;font-family: 'robotoblack';  color: #2a2850;}
.home-testimo h3 { font-size: 52px;  color: #2a2850;}
.home-testimo h5 { font-family: 'robotobold'; }
.testimonials img { width: 200px!important; margin: 0 auto;}
/*--*/
.home-speciality { background: #97d0ee; color: #2a2850;}
.home-speciality h2 {font-size: 3rem;font-family: 'robotoblack'; background: #2a2850; padding: 15px 50px; display: inline-block; color:  #fff; border-radius: 50px; text-transform: uppercase;}
.home-speciality h3 {font-size: 52px;}
/*--*/
.home-footer { background: #2a2850; color: #fff;}
.home-footer h2 { border-bottom: solid 4px #fff; padding-bottom: 15px; text-transform: uppercase; display: inline-block; margin-bottom: 20px;}
.home-footer ul { margin: 0; padding: 0 0 0 20px;}
.home-footer ul li a  { color: #fff; line-height: 36px; text-decoration: none;}
.home-footer ul li a:hover  { color: #fecb7c; }
.foot-bot { color: #9d98f6;}
.foot-bot h4 { text-transform: uppercase;font-family: 'robotomedium';}
.copyright { background: #4d4995; text-align: center; color: #8d87e7; padding-top: 30px; padding-bottom: 30px;}
/*/Home page */
/*Inner page*/
.inner-heading { padding-top: 100px; padding-bottom: 100px;text-align: center; ;}
.inner-heading h2 {font-size: 72px;font-family: 'robotobold'}
.inner-heading p {font-size: 14px; margin: 0;}
.inner-heading p a { text-decoration: none; color: #fff;}
.inner-heading p a:hover {color: #d1923d;}
.head-1 { background: #2a2850 url(../images/bg-inner-banner-1.jpg) no-repeat; color:  #fff; background-size: cover;}

.inner-content .extrabox article { padding: 30px; border-radius: 20px; height: 100%; }
.inner-content .extrabox article h2 { font-family: 'robotobold'; margin-bottom: 20px;}

.inner-content .extrabox article .hotline { background: #111; padding: 20px; display: inline-block; border-radius: 100px;}
.inner-content .extrabox article .hotline img { width: 60px;}
.inner-content .extrabox article .hotlinephone { font-size: 32px; line-height: 80px;}
.inner-content .extrabox article .hotlinephone a { color: #111; text-decoration: none;}

/*Apply now*/
.apply-form-hold { width: 100%; max-width: 550px; margin: 0 auto; border: solid 1px #d1d1d1; padding: 40px; border-radius: 30px; }
.apply-form-holdin {overflow: hidden;}
.apply-form { width: 2340px; display: inline-block; }
.apply-step-1, .apply-step-2, .apply-step-3, .apply-step-4, .apply-step-5 {
    width: 468px; float: left;
}






@media (min-width: 1200px) and (max-width: 1600px) {
    #offcanvasMainNav a {      
        padding-left: 8px!important;
        padding-right: 8px!important;
        font-size: 16px;
    }
    .applynow a {font-size: 16px;}
    
}

@media (max-width: 1199px) {
   .logo-mob img { width: 80px;}
   #offcanvasMainNav .nav-link { padding-left: 15px; padding-right: 15px;}
   .dropdown-item:active, .n-drop:active {
       color: #fff!important;   
       background-color: #111;
   }
   .offcanvas-header { padding-left: 30px; padding-right: 30px;}
   .offcanvas-body { padding-left: 15px; padding-right: 30px;}
   #offcanvasMainNav .nav-item.dropdown .dropdown-menu {
      display: block!important;
      border: 0;
    
   }
   #offcanvasMainNav .nav-link, #offcanvasMainNav .dropdown-item {
      font-family: 'robotomedium';      
   }
   #offcanvasMainNav .dropdown-item {
      padding-top: 8px;
      padding-bottom: 8px;
   }
   .applynow { margin-right: 10px;}
   /*--*/
   .page-topnav { font-size: 18px; }
   .p-contacts li { margin: 0 5px;}
   .p-site a, .p-nav a, .p-contacts a { line-height: 60px;}
   .p-contacts .c-email a, .p-contacts .c-phone a, .p-contacts .c-fax a { font-size: 0; display: inline-block; width: 50px; height: 50px; border-radius: 50px;}
   .p-contacts .c-email a { background: #97d0ee url(../images/ico-email.svg) center ;background-size: contain;background-size: 70%;background-repeat: no-repeat;}
   .p-contacts .c-phone a { background: #d1923d url(../images/ico-call.svg) center ;background-size: contain;background-size: 70%;background-repeat: no-repeat;}
   .p-contacts .c-fax a { background: #4d4995 url(../images/ico-fax.svg) center ;background-size: contain;background-size: 70%;background-repeat: no-repeat;}
   .page-topnav .p-contacts { display: none;}
   .p-contacts.mainnav { margin-left: auto;}
   .p-contacts.mainnav li { float: left;}
   .home-footer h2 { width: 100%; border-width: 1px;}
   .fblock-1, .fblock-2 { padding-bottom: 50px;}
   .fblock-3 { text-align: center;}
}
@media (max-width: 767px) {
.logo-mob img { width: 50px;}
.p-nav { display: none;}
.owl-next, .owl-prev { width: 50px;}
.p-site { margin: 0 auto;}

.p-contacts li { margin: 0 1px;}
.p-contacts .c-email a, .p-contacts .c-phone a, .p-contacts .c-fax a { width: 40px; height: 40px; float: left; }
.applynow { margin-right: 6px; margin-left: 5px;}
 .applynow a { font-size: 16px;}
 .applynow a img { display: none;}
 
 .home-welcome .phead,
 .home-mainsvc .phead,
 .home-whychoose .phead,
 .home-testimo h2, .inner-heading h2 { font-size: 2.75rem;}
 .home-testimo h3,
 .home-whyfinance h2,
 .home-speciality h3 { font-size: 32px;}

 .h-section, .inner-heading { padding-top: 30px; padding-bottom: 30px;}
 
}
@media (max-width: 575px) {
.home-whyvalue .form-control {padding: 15px 15px 15px 40px; font-size: 18px;}
.home-whyvalue .btn {padding: 15px 15px; font-size: 18px;}
.home-whyvalue .ico-pound { height: 20px; top: 20px; left: 20px; }
.home-speciality h2 { font-size: 2rem;}

.inner-content .extrabox article .hotline { padding: 10px;}
.inner-content .extrabox article .hotline img { width: 40px;}
.inner-content .extrabox article .hotlinephone { font-size: 26px; line-height: 60px;}
.apply-form-hold { max-width: 365px; border: 0; padding: 0;}
.apply-step-1, .apply-step-2, .apply-step-3, .apply-step-4, .apply-step-5 {width: 365px;}
}
@media (min-width: 768px) {   
.applynow a {  line-height: 45px;  padding-left: 30px; padding-right: 20px; }

}
@media (min-width: 1200px) {
   .logo-desk img { width: 150px;}
   .miannav a, .navbar-expand-lg .navbar-nav .nav-link { border-radius: 30px; }
   #offcanvasMainNav a { line-height: 30px; padding-left: 20px; padding-right: 20px; }
   #offcanvasMainNav a:hover { color: #fff; }   
   nav ul li { display: inline-block; }
   nav .dropdown ul li { width: 100%; padding-left: 5px; padding-right: 5px;}
   .p-contacts.mainnav { display: none;}
}
@media (min-width: 1400px) {
   .logo-desk img { width: 180px;}
}
@media (min-width: 1600px) {
   .logo-desk img { width: 220px;}
   .inner-content .extrabox article { padding: 50px;}
}

/*PROGRESS BAR*/
.home-progressbar ul { margin: 0; padding: 0;}
.home-progressbar li { list-style: none;}
.home-progressbar p {font-size: 22px;font-family: 'robotobold';}
/* Styling an indeterminate progress bar */

progress:not(value) {
	/* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
  /* Get rid of the default appearance */
  appearance: none;
  
  /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
  border: none;
  
  /* Add dimensions */
  width: 100%; height: 20px;
  
  /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
  
  /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
  color: royalblue;
  
  position: relative;
  margin: 0 0 1.5em; 
}

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar {
  background-color: whiteSmoke;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}

progress[value]::-webkit-progress-value {
  position: relative;
  
  background-size: 35px 20px, 100% 100%, 100% 100%;
  border-radius:3px;
  
  /* Let's animate this */
  animation: animate-stripes 5s linear infinite;
}

@keyframes animate-stripes { 100% { background-position: -100px 0; } }

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after {
  /* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
  content: '';
  position: absolute;
  
  width:5px; height:5px;
  top:7px; right:7px;
  
  background-color: white;
  border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
  /* Gradient background with Stripes */
  background-image:
  -moz-linear-gradient( 135deg,
  transparent,
  transparent 33%,
  rgba(0,0,0,.1) 33%,
  rgba(0,0,0,.1) 66%,
  transparent 66%),
  -moz-linear-gradient( top,
  rgba(255, 255, 255, .25),
  rgba(0,0,0,.2)),
  -moz-linear-gradient( left, #09c, #f44);
  
  background-size: 35px 20px, 100% 100%, 100% 100%;
  border-radius:3px;
  
  /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar {
  background-color: whiteSmoke;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

  /* Dimensions should be similar to the parent progress element. */
  width: 100%; height:20px;
}

.progress-bar span {
  background-color: royalblue;
  border-radius: 3px;
  
  display: block;
  text-indent: -9999px;
}

p[data-value] { 
  
  position: relative; 
}

/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

p[data-value]:after {
  content: attr(data-value) '%';
  position: absolute; right:0;
}
.html5::-webkit-progress-value,
.python::-webkit-progress-value  {
  /* Gradient background with Stripes */
  background-image:
  -webkit-linear-gradient( 135deg,
  transparent,
  transparent 33%,
  rgba(0,0,0,.1) 33%,
  rgba(0,0,0,.1) 66%,
  transparent 66%),
  -webkit-linear-gradient( top,
  rgba(255, 255, 255, .25),
  rgba(0,0,0,.2)),
  -webkit-linear-gradient( left, #09c, #f44);
}

.css3::-webkit-progress-value,
.php::-webkit-progress-value 
{
  /* Gradient background with Stripes */
  background-image:
  -webkit-linear-gradient( 135deg,
  transparent,
  transparent 33%,
  rgba(0,0,0,.1) 33%,
  rgba(0,0,0,.1) 66%,
  transparent 66%),
  -webkit-linear-gradient( top,
  rgba(255, 255, 255, .25),
  rgba(0,0,0,.2)),
  -webkit-linear-gradient( left, #09c, #ff0);
}

.jquery::-webkit-progress-value,
.node-js::-webkit-progress-value 
{
  /* Gradient background with Stripes */
  background-image:
  -webkit-linear-gradient( 135deg,
  transparent,
  transparent 33%,
  rgba(0,0,0,.1) 33%,
  rgba(0,0,0,.1) 66%,
  transparent 66%),
  -webkit-linear-gradient( top,
  rgba(255, 255, 255, .25),
  rgba(0,0,0,.2)),
  -webkit-linear-gradient( left, #09c, #690);
}

/* Similarly, for Mozillaa. Unfortunately combining the styles for different browsers will break every other browser. Hence, we need a separate block. */

.html5::-moz-progress-bar,
.php::-moz-progress-bar {
  /* Gradient background with Stripes */
  background-image:
  -moz-linear-gradient( 135deg,
  transparent,
  transparent 33%,
  rgba(0,0,0,.1) 33%,
  rgba(0,0,0,.1) 66%,
  transparent 66%),
  -moz-linear-gradient( top,
  rgba(255, 255, 255, .25),
  rgba(0,0,0,.2)),
  -moz-linear-gradient( left, #09c, #f44);
}

.css3::-moz-progress-bar,
.php::-moz-progress-bar {
{
  /* Gradient background with Stripes */
  background-image:
  -moz-linear-gradient( 135deg,
  transparent,
  transparent 33%,
  rgba(0,0,0,.1) 33%,
  rgba(0,0,0,.1) 66%,
  transparent 66%),
  -moz-linear-gradient( top,
  rgba(255, 255, 255, .25),
  rgba(0,0,0,.2)),
  -moz-linear-gradient( left, #09c, #ff0);
}

.jquery::-moz-progress-bar,
.node-js::-moz-progress-bar {
  /* Gradient background with Stripes */
  background-image:
  -moz-linear-gradient( 135deg,
  transparent,
  transparent 33%,
  rgba(0,0,0,.1) 33%,
  rgba(0,0,0,.1) 66%,
  transparent 66%),
  -moz-linear-gradient( top,
  rgba(255, 255, 255, .25),
  rgba(0,0,0,.2)),
  -moz-linear-gradient( left, #09c, #690);
}
/* Now we are good to duplicate html code for other skills and then add the css code for the new skill based on data-skill */
  
/* THE END PROGRESS BAR*/