:root {
    --dark-blue: #2b2b5e;
    --light-blue: #00bcec;
}

body {
    position: relative;
}

.color-dark-blue {
    color: var(--dark-blue);
}

.bg-dark-blue {
    background: var(--dark-blue);
}

.color-light-blue {
    color: var(--light-blue);
}

.btn-info {
    background: var(--light-blue);
}

.btn-outline-info {
    border-color: var(--light-blue);
    color: var(--light-blue);
    background-image: linear-gradient(to left,
    transparent,
    transparent 50%,
    var(--light-blue) 50%,
    var(--light-blue));
    background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;
}

.btn-outline-info:hover {
    color: #fff;
    background-position: 0 0;
    background-color: transparent;
    border-color: var(--light-blue);
}

.btn-outline-info:hover .bi {
    color: #fff;
}

.header {
    z-index: 2;
}

.header .navbar-nav .nav-item {
    padding: 8px 22px;
}

.header .navbar-nav .nav-item .nav-link {
    padding: 0;
    color: var(--dark-blue);
    font-weight: 600;
}

.header .navbar-nav .nav-link.active {
    color: var(--light-blue);
}




.header .navbar-nav .active .nav-link::before,
.header .navbar-nav .active .nav-link::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
}

.header .navbar-nav .nav-item .nav-link:before {
    content: "";
    position: absolute;
    z-index: 9;
    left: 0;
    right: 100%;
    bottom: -5px;
    background: var(--light-blue);
    /*** COLOR OF THE LINE ***/
    height: 3px;
    /*** THICKNESS OF THE LINE ***/
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.header .navbar-nav .nav-item .nav-link:hover,
.header .navbar-nav .nav-item .nav-link.active {
    opacity: 1 !important;
}

.header .navbar-nav .nav-item .nav-link:hover:before,
.header .navbar-nav .nav-item .nav-link.active:before {
    right: 0;
}

.header .navbar-nav .nav-item li .nav-link:before,
.header .navbar-nav .nav-item li .nav-link.active:before {
    bottom: 10%;
}


.banner {
    background: url('./img/banner-img-1.jpg') no-repeat center center;
    background-size: cover;
    color: #fff;
    height: calc(100vh - 96px);
    display: flex;
    align-items: center;
}


.banner h1 {
    font-size: 54px;
    margin-bottom: 30px;
    text-shadow: 0 2px 2px var(--dark-blue);
}

.banner p{
    font-size: 24px;
    color: #e9eced;/* var(--light-blue);*/
    margin-bottom: 60px;
    text-shadow: 0 2px 2px var(--dark-blue);
}

.banner .carousel-control-next,
.banner .carousel-control-prev {
    width: 8%;
}

.banner .carousel-control-prev {
    left: -15%;
}

.banner .carousel-control-next {
    right: -15%;
}

.banner .carousel-indicators {
    justify-content: left;
    margin: 0;
    bottom: -52px;
}

.section-2 {
    background-color: #f4f4f6;
}

.section-2 .left-bg {
    background: url("./img/section-2-left-bg.jpg") no-repeat left bottom;
}

.section-2 .right-bg {
    padding: 115px 0;
    background: url("./img/section-2-right-bg.jpg") no-repeat right bottom;
}

.section-2 h2 {
    font-size: 42px;
    color: var(--dark-blue);
}

.section-2 p {
    color: #82828a;
    font-size: 18px;
}

.section-2 .bi {
    color: var(--light-blue);
}

.section-2-list {
    font-size: 18px;
    color: var(--dark-blue);
    font-weight: 600;
}

.working-process {
    padding: 100px 0;
}

.working-process h2 {
    font-size: 42px;
    color: var(--dark-blue);
}

.working-process h3 {
    font-size: 20px;
    color: var(--dark-blue);
}

.working-process p {
    color: #82828a;
}

.section-4 {
    background: url("./img/section4-bg.jpg") no-repeat center center;
    padding: 150px 0 114px 0;
    background-size: cover;
    font-size: 14px;
}

.section-4 h2 {
    font-size: 42px;
}

.section-4 .nav-pills .nav-link {
    border: 1px solid var(--light-blue);
    font-size: 14px;
}

.section-4 .nav-pills .nav-link.active {
    background-color: var(--light-blue);
}

.section-4 .call-us-text {
    font-size: 14px;
}

.section-4 .phone-number {
    font-size: 14px;
}

.about-us {
    background: #f6f6f8 url('./img/about-us-bg.jpg') repeat-y left top;
}

.about-us h2 {
    font-size: 42px;
    color: var(--dark-blue);
}

.about-us h3 {
    font-size: 48px;
    font-weight: 700;
}

.about-us h4 {
    font-size: 24px;
}

.partners-logo {
    background: #fff;
    border-radius: 12px;
    box-shadow: 2px 4px 10px #ccc;
}

.client-finenced {
    background: #19ae02 url('./img/./clients-financed-bg.png') no-repeat left top;
    background-size: cover;
    height: 208px;
    color: #fff;
}

.loans-disbursed {
    background: #0097ba url('./img/./loan-disbursed-bg.png') no-repeat left top;
    background-size: cover;
}

.lending-partners {
    background: #001d4b url('./img/./lending-partners-bg.png') no-repeat right top;
    background-size: cover;
}


.team {
    padding: 120px 0;
}

.team h2 {
    font-size: 42px;
    color: var(--dark-blue);
}

.team .pic-area {
    background-color: #f4f4f6;
}

.team .pic-area {
    position: relative;
	overflow: hidden;
}

.team .pic-area .profile-info {
    position: absolute;
    /* opacity: 0; */
    -webkit-transition:all 0.45s ease-in-out;
    -moz-transition:all 0.45s ease-in-out;
    -o-transition:all 0.45s ease-in-out;
    -ms-transition:all 0.45s ease-in-out;
    transition:all 0.45s ease-in-out;
    background-color: rgba(0, 0, 0, 0.65);
    width: 100%;
    color: #fff;
}

.team .pic-area .profile-info .name {
    font-size: 19px;
    font-weight: 600;
}

.team .pic-area .profile-info .designation {
    font-size: 16px;
    color: var(--light-blue);
}

/* .team .pic-area:hover .profile-info{
    opacity: 1;
    transform: translateY(-64px);
    -webkit-transform:translateY(-64px);
    -moz-transform:translateY(-64px);
    -ms-transform:translateY(-64px);
    -o-transform:translateY(-64px);
} */

.team .pic-area .profile-info{
    opacity: 1;
    transform: translateY(-64px);
    -webkit-transform:translateY(-64px);
    -moz-transform:translateY(-64px);
    -ms-transform:translateY(-64px);
    -o-transform:translateY(-64px);
}

.quick-easy-flexible {
    background: #003972 url('./img/quick-easy-flexible-bg.jpg') repeat-x left top;
    background-size: contain;
}

.accordion-button {
    font-weight: 600;
    font-size: 18px;
}

.accordion-body {
    border-left: 4px solid var(--light-blue);
}

.footer {
    background: url("./img/footer-bg.jpg") no-repeat right center;
    background-size: cover;
    color: #8db5e7;
}

.footer-inner {

    /* background: linear-gradient(to right,  rgba(255,255,255,1) 22%,rgba(255,255,255,0.9) 27%,rgba(255,255,255,0) 70%);  */

    padding: 100px 0 50px 0;
}

.footer h3 {
    background: url(./img/border.png) no-repeat left bottom;
}

.email {
    color: #8db5e7;
    text-decoration: none;
}

.footer-bottom {
    border-top: 1px solid #2d588d;
    color: #667692;
    font-size: 14px;
}

.footer-bottom .social-btn {
    border: 1px solid #2d588d;
    color: #fff;
    width: 34px;
    height: 34px;

    background-image: linear-gradient(to left,
    transparent,
    transparent 50%,
    var(--light-blue) 50%,
    var(--light-blue));
    background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;

}

.footer-bottom .social-btn:hover {
    background-position: 0 0;
}

@media only screen and (max-width: 991.98px) {
    .banner {
        background-position: right top;
        height: auto;
        padding: 56px 0;
    }
    .banner h1 {
        font-size: 26px;
        margin-bottom: 16px;
    }
    .banner p {
        font-size: 18px;
        margin-bottom: 24px;
    }
    .banner .carousel-indicators {
        justify-content: center;
    }
    .banner .carousel-control-prev {
        left: -35px;
    }
    .banner .carousel-control-next {
        right: -35px;
    }
    .banner  .carousel-inner {
        background: rgba(1, 44, 97, .7);
        border-radius: 8px;
        min-height: 330px;
    }
    .section-2 .left-bg {
        background-size: contain;
    }
    .section-2 .right-bg {
        background-size: contain;
    }
}
@media only screen and (max-width: 767.98px) {
    .client-finenced {
        height: auto;
    }
    .banner .carousel-control-prev {
        left: -20px;
    }
    .banner .carousel-control-next {
        right: -20px;
    }
}