@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700&display=swap'); /* ===== Scrollbar CSS ===== */ /* Firefox */ * { scrollbar-width: thin; scrollbar-color: #1c5631 #f8f8f8; } /* Chrome, Edge, and Safari */ *::-webkit-scrollbar { width: 5px; } *::-webkit-scrollbar-track { background: #f8f8f8; } *::-webkit-scrollbar-thumb { background-color: #1c5631; border-radius: 10px; border: 0px solid #f8f8f8; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; max-width: 100%; } html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* css start */ body, button, input, select, textarea { color: #000; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; } html, body { height: 100%; width: 100%; } *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="file"], textarea, select { border: 1px solid #54545d; height: 50px; padding: 10px 15px; color: #333333; width: 100%; font-size: 15px; outline: 0; background-color: transparent; } input[type="text"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="tel"]:hover, textarea:hover { border-color: #54545d; } input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="tel"]:focus, textarea:focus { border-color: #999; } input.datepicker { background-image: url('images/icon-calendar.png'); background-repeat: no-repeat; background-position: right 10px center; padding-right: 40px; } textarea { height: 100px; resize: none; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url('../images/dropdown-arrow.png'); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; } a { color: #000; text-decoration: none; -webkit-transition: 0.3s linear all; transition: 0.3s linear all; } img { max-width: 100%; display: block; } a:focus { outline: 0; } a:hover, a:active { outline: 0; } a:active, a:hover { color: #333; } ul, li { list-style: none; margin: 0; padding: 0; } h2 { font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: 0; color: #000; text-align: center; text-transform: capitalize; } h2 span { font-weight: 200; color: #1a1a1a; } h3 { font-size: 20px; line-height: 1.1; color: #313131; font-weight: 400; margin-bottom: 20px; text-transform: uppercase; } h3 strong { font-weight: 800; font-size: 24px; } h4 { color: #1d5633; font-size: 20px; font-weight: 800; text-transform: uppercase; margin-bottom: 15px; position: relative; } h5 { color: #fff; text-transform: uppercase; margin-bottom: 55px; position: relative; font-weight: 400; font-size: 18px; letter-spacing: 1.5px; } h5:before { width: 90%; height: 2px; background-color: #FFFFFF; position: absolute; left: 0; top: 45px; content: ""; } h5:after { width: 118px; height: 4px; background-color: #FFFFFF; position: absolute; left: 0; top: 44px; content: ""; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } p { font-size: 22px; line-height: 1.6; font-weight: 400; color: var(--dark); margin-bottom: 30px; } :root { --dark: #000; --green: #35cc75; } .form-group { margin-bottom: 10px; } .form-group label { font-size: 12px; line-height: 18px; color: #6d6d6d; display: block; margin: 0px 0px 3px; padding-left: 20px; text-align: left; } .form-group .custom-checkbox label { font-size: 13px; line-height: 20px; text-transform: none; padding: 0px; margin: 0px; } .custom-checkbox .custom-control-label:before { width: 14px; height: 14px; border-color: #6d6d6d; border-radius: 0px; } .custom-checkbox .custom-control-input:checked ~ .custom-control-label:before { border-color: #f1705e; background-color: #fff; } .custom-control-input:focus ~ .custom-control-label:before { box-shadow: none; } .custom-checkbox .custom-control-label:after { width: 14px; height: 14px; background-position: 0px 0px; background-size: 100%; } .custom-checkbox .custom-control-input:checked ~ .custom-control-label:after { background-image: url('../images/icon-checked.png'); } .form-group .custom-radio { display: inline-block; vertical-align: top; margin-left: 20px; } .form-group .custom-radio:first-of-type { margin-left: 0px; } .form-group .custom-radio label { font-size: 14px; line-height: 28px; font-weight: 600; color: #000000; padding: 0px; margin: 0px; } .custom-radio .custom-control-label:before { background-color: transparent; width: 20px; height: 20px; border: #dedede solid 2px; top: 1px; } .custom-radio .custom-control-input:checked ~ .custom-control-label::before { color: #fff; border-color: #dedede; background-color: transparent; } .custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-image: none; background-color: #35cc75; width: 10px; height: 10px; border-radius: 50%; left: -19px; top: 6px; } .custom-switch { padding-left: 56px; } .custom-switch .custom-control-label::before { width: 56px; height: 24px; border-radius: 20px; left: -56px; top: 0px; } .custom-switch .custom-control-input:checked ~ .custom-control-label::before { border-color: #35cc75; background-color: #35cc75; } .custom-switch .custom-control-label::after { top: -3px; left: -56px; width: 30px; height: 30px; border: 2px solid #dedede; background-color: #dedede; border-radius: 50%; } .custom-switch .custom-control-input:checked ~ .custom-control-label::after { -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } .ui-datepicker { z-index: 9; } /*header*/ .header { position: relative; z-index: 99; } .main-header { z-index: 2; max-width: 1100px; margin: 0 auto; background-color: #1c5631; border-radius: 0 0 30px 30px; padding: 15px 70px; display: flex; justify-content: space-between; align-items: center; } .header_inner { display: flex; justify-content: space-between; align-items: center; } .header .navbar { padding: 0; } .logo-block { width: 45px; line-height: 0px; } .logo { width: 100%; display: inline-block; } .header .language { margin-right: 160px; } .header .language button, .header .language a { font-size: 14px; line-height: 22px; color: #FFF; border: none; padding: 0px; background-color: transparent; cursor: pointer; text-decoration: underline; } .header .navbar-light .navbar-nav .nav-link { color: #fff; font-size: 14px; font-weight: 400; text-transform: uppercase; margin: 0 20px; position: relative; padding-left: 0; padding-right: 0; } .header .navbar-light .navbar-nav .nav-link:before { content: ''; display: inline-block; height: 3px; position: absolute; bottom: 3px; left: 50%; right: 50%; opacity: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #fff; } .header .navbar-light .navbar-nav .nav-link:hover::before, .header .navbar-light .navbar-nav .nav-link.active::before { opacity: 1; left: 0; right: 0; } .header .apply-loan { font-size: 1rem; line-height: 1; padding: 14px 25px; background-color: #fff; border: 0; color: #1d5633; text-transform: uppercase; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; font-weight: 500; display: inline-block; text-decoration: none; margin-left: 20px; } .header .apply-loan:hover { background-color: var(--green); color: #fff; } .header .navbar-collapse { justify-content: flex-end; } .header .navbar-collapse .navbar-nav { align-items: center; } .header .sticky-logo { display: none; } .header.relative-header .main-header { background-color: #eee; padding: 10px 0px; } .header.relative-header .main-header .row { align-items: center; } .header.relative-header .header-logo { display: none; } .header.relative-header .sticky-logo { display: block; } .header.relative-header .navbar-light .navbar-nav .nav-link { color: #000; } .header.relative-header .main-header .apply-loan { background-color: var(--green); color: #fff; } .login_btn { width: 170px; background-color: #fff; padding: 9px 20px; border-radius: 5px; display: block; text-align: center; font-size: 14px; color: #1c5631; font-weight: 400; } .login_btn:hover { text-decoration: none; } .header .nav-block { display: flex; align-items: center; } .login_btn_hold { margin-left: 20px; } .header .dropdown { margin-left: 20px; } .header .dropdown-toggle { max-width: 170px; background-color: #fff; padding: 9px 20px; padding-right: 40px; border-radius: 5px; display: block; text-align: center; font-size: 16px; line-height: 22px; color: #1c5631; font-weight: 400; border: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header .dropdown-toggle::after { border-top: 8px solid #1c5631; border-right: 8px solid transparent; border-left: 8px solid transparent; position: absolute; right: 10px; top: 15px; } .header .dropdown-menu { min-width: 264px; border-radius: 10px; background-color: #FFF; top: 46px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .header .dropdown-menu li { border-bottom: 1px solid #ddd; } .header .dropdown-menu li:last-child { border-bottom: none; } .header .dropdown-menu li a { display: inline-block; vertical-align: middle; width: 100%; padding: 5px 12px; text-decoration: none; font-size: 16px; color: #000000; } .header .dropdown-menu li img { width: 20px; margin-right: 12px; display: inline-block; vertical-align: middle; } .header .dropdown-menu li a:hover { background-color: #ddd; color: #000000; text-decoration: none; } @media only screen and (min-width: 992px) { .header.fixed { position: fixed; left: 0px; top: 0px; width: 100%; } } @media only screen and (max-width:1099.98px) { .header .language { margin-right: 100px; } } @media only screen and (max-width:991.98px) { .main-header { border-radius: 0px; padding: 10px 30px; } .header .language { margin-left: auto; margin: 0px; border-bottom: 1px solid #1a4a2b; padding: 0px 30px; } .header .language button, .header .language a { padding: 8px 0px; width: 100%; text-align: left; } .header .navbar { justify-content: flex-end; margin: 0; position: inherit; } .login_btn_hold { margin: 0px; padding: 0px 30px; } .login_btn { color: #fff; font-size: 14px; font-weight: 400; text-transform: uppercase; padding: 8px 0px; width: 100%; text-align: left; background: none; } .header .navbar-toggler { background-color: #1c5631; border: 1px solid #1c5631; padding: 6px 9px; position: relative; width: 45px; height: 40px;right: 0px;z-index: 2; } .header .nav-block { position: inherit; } .header .navbar-collapse { position: absolute; left: 0; top: 100%; width: 100%; background-color: #1c5631;} .header .nav-block .navbar-collapse .navbar-nav { align-items: flex-start; } .header .navbar .navbar-toggler i { position: absolute; margin-top: 10px; left: 9px; top: 0; width: 60%; height: 3px; background: #FFF; opacity: 1; transition: background-color .35s, opacity 175ms cubic-bezier(.215, .61, .355, 1), -webkit-transform 175ms cubic-bezier(.215, .61, .355, 1); transition: background-color .35s, transform 175ms cubic-bezier(.215, .61, .355, 1), opacity 175ms cubic-bezier(.215, .61, .355, 1); transition: background-color .35s, transform 175ms cubic-bezier(.215, .61, .355, 1), opacity 175ms cubic-bezier(.215, .61, .355, 1), -webkit-transform 175ms cubic-bezier(.215, .61, .355, 1); -webkit-transform: translateY(0) translateZ(0); transform: translateY(0) translateZ(0) } .header .navbar .navbar-toggler i:nth-child(1) { top: 0; } .header .navbar .navbar-toggler i:nth-child(2) { top: 8px; } .header .navbar .navbar-toggler i:nth-child(3) { top: 16px; } .header .navbar .navbar-toggler:focus { outline: 0; box-shadow: none; } .header .navbar .navbar-toggler[aria-expanded="true"] i:nth-child(1) { -webkit-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); } .header .navbar .navbar-toggler[aria-expanded="true"] i:nth-child(2) { opacity: 0; } .header .navbar .navbar-toggler[aria-expanded="true"] i:nth-child(3) { -webkit-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); } .header .navbar-light .navbar-collapse .navbar-nav .nav-link.active:before { display: none; } .header .navbar-light .navbar-collapse .navbar-nav .nav-link.active { color: #35cc75; } .header .navbar-light .navbar-nav .nav-link::before { display: none; } .header .navbar {order: 2;} .header .navbar-light .navbar-nav .nav-item { width: 100%; padding: 0px 30px; border-bottom: 1px solid #1a4a2b; } .header .navbar-light .navbar-nav .nav-link { margin: 0px; } .header .dropdown { margin-left: 0px; padding: 0px 30px; } .header .dropdown-toggle { max-width: 100%; width: 100%; background-color: transparent; text-align: left; color: #fff; font-size: 14px; font-weight: 400; text-transform: uppercase; padding: 8px 30px 8px 0px; position: relative; } .header .dropdown-toggle::after { border-top: 8px solid #FFFFFF; } .header .dropdown-menu { min-width: 264px; width: 100%; border-radius: 0px; background-color: #cbdfd4; top: auto; left: auto; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; position: relative; margin-bottom: 10px; } .header .dropdown-menu li { border-bottom-color: #1a4a2b; } .header .dropdown-menu li a { font-size: 14px; } .header .dropdown-menu li img { width: 20px; margin-right: 12px; display: inline-block; vertical-align: middle; } .header .dropdown-menu li a:hover { background-color: transparent; } } @media only screen and (min-width:480px) and (max-width:767px) { .header .phone-number { width: 40%; text-align: right; } .header .email-account { width: 60%; text-align: left; } } @media only screen and (max-width:767px) { .main-header { padding: 10px 15px; } .header .navbar-light .navbar-nav .nav-item { padding: 0px 15px; } .header .language { margin-right: 15px; } .login_btn { width: 150px; } .header .language { padding: 0px 15px; } .login_btn_hold { padding: 0px 15px; } .header .dropdown { padding: 0px 15px; } } @media only screen and (max-width:399px) { .header .language { margin-right: 10px; } .header .language button, .header .language a { font-size: 12px; line-height: 20px; } .login_btn_hold { margin-right: 10px; } .login_btn { width: 140px; padding: 9px 16px; } } /*button -----------------------------------------*/ .btn-outline { font-size: 14px; line-height: 1; padding: 12px 25px 8px; border-color: var(--dark); color: var(--dark); text-transform: uppercase; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; font-weight: 400; } .btn-outline:hover { background-color: var(--green); border-color: var(--green); } .btn-outline:focus { box-shadow: none; } .btn-green { font-size: 14px; line-height: 1; padding: 12px 25px 8px 45px; background-color: var(--green); border-color: var(--green); color: var(--white); text-transform: uppercase; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; font-weight: 400; } .btn-green:hover { background-color: var(--dark); border-color: var(--dark); } .btn-green:focus { box-shadow: none; } .btn-phone, .btn-email { font-size: 1rem; line-height: 1; font-weight: 300; color: var(--dark); display: inline-block; } .btn-phone:hover, .btn-email:hover { text-decoration: none; color: var(--dark); } .top-header-r ul { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: flex-end; } .top-header-r ul li { margin-left: 15px; } .phone-icon { display: inline-block; vertical-align: middle; margin-right: 12px; } .email-icon { display: inline-block; vertical-align: middle; margin-right: 20px; } .login-icon { background-image: url(../images/black-login-icon.png); background-repeat: no-repeat; background-position: 15px 50%; padding: 12px 25px 8px 45px; } .login-icon:hover { background-image: url(../images/white-login-icon.png); } .register-icon { background-image: url(../images/white-register-icon.png); background-repeat: no-repeat; background-position: 15px 50%; } .register-icon:hover { background-color: #fff; border-color: var(--dark); color: #000; background-image: url(../images/black-register-icon.png); } @media only screen and (min-width:992px) and (max-width:1199px) { .btn-phone, .btn-email { font-size: 15px; } .email-icon { margin-right: 6px; } .phone-icon { margin-right: 6px; } } @media only screen and (min-width:768px) and (max-width:991px) { .btn-phone, .btn-email { font-size: 14px; } .email-icon { margin-right: 5px; } .phone-icon { margin-right: 5px; } .top-header-r ul li { margin-left: 10px; } } @media only screen and (max-width:767px) { .top-header-r ul { justify-content: center; margin-top: 15px; } .header .top-header-l .pay-online { margin-bottom: 5px; text-align: center; } .email-icon { margin-right: 10px; } .phone-icon { margin-right: 5px; } } @media only screen and (max-width:575.98px) { .btn-outline { font-size: 12px; padding: 10px 18px 7px; } .login-icon, .btn-green { font-size: 12px; padding: 10px 18px 7px 35px; background-position: 10px center; } } @media only screen and (max-width:479px) { .header .phone-number { text-align: center; } .header .email-account { text-align: center; } .btn-phone, .btn-email { font-size: 12px; } } /* Banner -----------------------------------------*/ .banner-slider { padding: 70px 0px; } .banner-slider .banner-row { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; position: relative; } .banner-slider aside { width: 50%; display: flex; flex-flow: wrap; flex-direction: row; } .banner-slider aside:first-child { justify-content: flex-end; } .banner-slider .max-length { width: 100%; max-width: 570px; padding-left: 15px; height: 100%; background-image: url('../images/dotted_shape.png'); background-repeat: no-repeat; background-position: 0px 0px; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; } .banner-slider aside ul { min-height: 220px; height: auto; } .banner-slider h1, .banner-slider h2 { font-size: 50px; line-height: 1.2; font-weight: 400; color: #000; text-align: left; } .banner-slider h1 span, .banner-slider h2 span { color: #1c5631; display: block; } @media only screen and (max-width: 1199px) { .banner-slider aside ul { min-height: 200px; } .banner-slider h1, .banner-slider h2 { font-size: 40px; } } @media only screen and (max-width: 991px) { .banner-slider aside ul { min-height: 120px; } .banner-slider h1, .banner-slider h2 { font-size: 30px; } .banner-slider .btn-outline { padding: 12px 30px 9px; color: #1c5631; border: 1px solid #1c5631; background-color: transparent; border-radius: 10px; } } @media only screen and (max-width: 639px) { .banner-slider { padding: 50px 0px 70px; } .banner-slider aside { width: 100%; } .banner-slider aside:first-child { position: relative; order: 2; } .banner-slider aside:last-child { order: 1; } .banner-slider .max-length { background: none; } .banner-slider .max-length { max-width: 100%; height: auto; padding: 10px 20px 0px; } .cb-slideshow li { width: 100%; } } @media only screen and (max-width: 479px) { .banner-slider { padding: 20px 0px 70px; } .banner-slider h1, .banner-slider h2 { font-size: 24px; line-height: 1.4; } .banner-slider aside ul { min-height: 84px; } } @media only screen and (max-width: 359px) { .banner-slider aside ul { min-height: 110px; } } /*product block*/ .product-block { margin: 0px 0 100px; } .product-block h2 { margin-bottom: 25px; text-align: left; } .product-block p { font-size: 16px; line-height: 26px; text-align: left; opacity: 0.7; } .product-block ul { margin: 0 0 60px 0; width: 100%; } .product-block ul li { text-align: center; } .product-block ul li img { display: inline-block; vertical-align: middle; margin-bottom: 30px; } .product-block ul li .mar-rt { margin-right: 5px; } .product-block ul li .mar-lt { margin-left: 5px; } .vehicle_image_holder h3 { font-size: 16px; color: #000; font-weight: 500; margin-bottom: 0px; text-transform: none; opacity: 0.7; margin-top: 5px; text-align: center; } .vehicle_image_holder { text-align: center; margin-bottom: 35px; } .vehicle_image_holder figure { height: 168px; display: inline-flex; margin-bottom: 8px; } .vehicle_image_holder img { display: inline-block; max-width: 100%; } .border_btn { border: 2px solid #1c5631; border-radius: 5px; display: inline-block; font-size: 16px; color: #1c5631; padding: 8px 33px; position: relative; background-color: #1c5631; transition: 0.3s linear all; } .border_btn span { z-index: 2; position: relative; color: #1c5631; } .border_btn:after { width: 100%; height: 100%; background-color: #fff; content: ''; position: absolute; left: 0; top: 0; z-index: 1; border-radius: 4px; -webkit-transform: scaleY(1); transform: scaleY(1); transition: -webkit-transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity .4s; transition: transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity; } .border_btn:hover:after { -webkit-transform: scaleY(.1); transform: scaleY(.1); opacity: 0; transition: all .3s; } .border_btn:hover { text-decoration: none; } .border_btn:hover span { color: #fff; text-decoration: none; } @media only screen and (min-width:992px) and (max-width:1199px) { h3 strong { font-weight: 800; font-size: 19px; } h3 { font-size: 19px; } } @media only screen and (max-width:991px) { h2 { font-size: 40px; } p { font-size: 18px; } .product-block h3 { font-size: 18px; } .product-block h3 strong { font-size: 18px; } .product-block ul li img { margin-bottom: 20px; } .product-block ul li { margin-bottom: 10px; } .product-block ul { margin-bottom: 30px; } .product-block h2 { margin-bottom: 30px; } .product-block { margin: 0px 0 50px; } } @media only screen and (max-width:767px) { h2 { font-size: 36px; } p { font-size: 16px; } h4 { font-size: 16px; } .product-block h2 { margin-bottom: 30px; } .product-block ul { margin-bottom: 20px; } .product-block p { font-size: 16px; line-height: 26px; } } @media only screen and (max-width:479.98px) { h2 { font-size: 30px; } } @media only screen and (min-width:361px) and (max-width:640px) { .product-block h3 { font-size: 14px; } .product-block h3 strong { font-size: 14px; } } @media only screen and (max-width:360px) { .product-block h3 { font-size: 13px; } .product-block h3 strong { font-size: 13px; } h2 { font-size: 26px; } h2 em { font-size: 18px; } } /*featured block*/ .features-block { padding: 90px 0; } .features-block h2 { margin-bottom: 80px; } .features-block ul { margin: 0; width: 100%; display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; } .features-block ul li { width: 22%; } .features-block ul li h4 { color: #000; font-size: 20px; font-weight: 700; font-family: 'Roboto', sans-serif; margin-bottom: 10px; } .features-block ul li p { font-size: 16px; color: #000; margin-bottom: 0; font-family: 'Roboto', sans-serif; } .features-block ul li .icon { text-align: center; margin-bottom: 15px; min-height: 86px; display: flex; align-items: center; justify-content: center; } .features-block ul li .icon img { display: inline-block; } .features-block ul li .content { text-align: center; padding: 0 14px; } @media only screen and (max-width:1199.98px) { .features-block ul li { width: 23%; } } @media only screen and (max-width:991px) { .features-block ul li { width: 46%; margin-bottom: 30px; } .features-block { padding: 55px 0 30px; } .features-block h2 { margin-bottom: 50px; } } @media only screen and (max-width:767px) { .features-block { padding: 40px 0 0; } .features-block h2 { margin-bottom: 45px; } .features-block ul li { margin-bottom: 30px; } .features-block ul li:last-child { margin-bottom: 0px; } .features-block ul li h4::before { top: 33px; } } @media only screen and (max-width:575px) { .features-block ul li { width: 100%; } } /*how-it-works*/ .image-block img { margin-right: -100px; } .how-it-works-block { display: inline-block; width: 100%; vertical-align: top; } .how-it-works-block h2 { margin-bottom: 55px; text-align: left; } .how-it-works-block .row { align-items: center; } .how-it-works-block .content-block ul { display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: wrap; position: relative; margin: 0px; } .how-it-works-block .content-block ul li { padding: 0px; margin: 0px; margin-bottom: 30px; width: 100%; height: auto; text-indent: inherit; border: none; opacity: 1; } .how-it-works-block .content-block ul li a { display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: wrap; width: 100%; } .how-it-works-block .content-block ul li .icon { width: 80px; margin-right: 2%; } .how-it-works-block .content-block ul li .content { width: 74%; position: relative; } .how-it-works-block .content-block ul li .content h4 { font-size: 20px; font-weight: 400; margin-bottom: 6px; color: #000; text-decoration: inherit; position: relative; transition: all .04s ease-in; text-transform: none; } .how-it-works-block .content-block ul li a:hover { text-decoration: none; } .how-it-works-block .content-block ul li a:hover .content h4, .how-it-works-block .content-block ul li.active a .content h4 { text-decoration: none; padding-left: 15px; color: #1c5631; font-weight: 700; } .how-it-works-block .content-block ul li a:hover .content h4:after, .how-it-works-block .content-block ul li.active a .content h4:after { content: ''; position: absolute; left: 0; top: 10px; height: 8px; width: 8px; border-radius: 50%; background-color: #1c5631; } .how-it-works-block .content-block ul li a:hover .content p { text-decoration: none; } .how-it-works-block .content-block ul li .content p { font-size: 16px; margin-bottom: 0; color: rgba(0, 0, 0, 0.5); } .how-it-works-block .content-block ul li .content span { position: absolute; left: 0px; top: -30px; font-size: 100px; color: #E9E9E9; font-weight: 800; line-height: 1; z-index: -1; } .how-it-works-block .content-block ul li:nth-child(2n) { margin-right: 0px; } @media only screen and (min-width:768px) and (max-width:991px) { .how-it-works-block .image-block img { margin: 0 auto; } .how-it-works-inner-block { background-size: 200px; } .how-it-works-block h2 { margin-bottom: 40px; } .how-it-works-block .content-block ul li { margin-bottom: 30px; } } @media only screen and (max-width:991.98px) { .how-it-works-block .content-block ul { margin-top: 40px; padding-left: 0px; } .how-it-works-block .content-block ul li .content { width: 67%; } .content-block { margin-bottom: 30px; } } @media only screen and (max-width:767px) { .how-it-works-block .content-block ul { margin-top: 30px; padding: 0 15px; } .how-it-works-block .content-block ul li { margin-bottom: 30px; width: 100%; margin-right: 0; } .how-it-works-block h2 { margin-bottom: 30px; } .how-it-works-inner-block { background-size: 80px; } .how-it-works-block .content-block ul li .content h4 { margin-bottom: 10px; } /* .how-it-works-inner-block { padding: 70px 0 20px; } */ .how-it-works-block .content-block ul li .content span { font-size: 80px; top: -25px; } } @media only screen and (max-width:480px) { .how-it-works-block .content-block ul li .content h4 { font-size: 16px; } .how-it-works-block .content-block ul li .content p { font-size: 14px; line-height: 20px; } .how-it-works-block .content-block ul li a:hover .content h4:after { top: 6px; } } /*loan calculator block*/ .loan-calculator-block { padding: 0px 0 80px; } .loan-calculator-block h2 { margin-bottom: 20px; } .loan-calculator-block p { text-align: center; margin-bottom: 70px; } .loan-calculator-block .row { align-items: center; } .payment-block { padding: 70px 80px; text-align: center; -webkit-box-shadow: 0px 0px 15px #e6e6e6; -moz-box-shadow: 0px 0px 15px #e6e6e6; box-shadow: 0px 0px 15px #e6e6e6; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; background-color: #fff; overflow: hidden; } .payment-block h3 { font-size: 30px; margin-bottom: 60px; text-transform: inherit; } .payment-block h3 strong { font-weight: 600; font-size: 30px; } .loan-calculator-inner { padding: 40px 25px; } .loan-calculator-inner h2 { font-size: 48px; text-align: left; } .loan-calculator-inner h2 em { font-weight: 400; position: inherit; } .loan-calculator-inner h2 em small { font-size: 24px; } .loan-calculator-inner h6 { font-size: 18px; font-weight: 700;color: #1c5631; border: none; background-color: transparent; border-bottom: 3px solid #1c5631; padding: 8px; margin-bottom: 40px; } .loan-calculator-inner .interest-block { width: 46%; float: left; margin-top: 30px; } .loan-amount-block.tenure-block label, .loan-amount-block.interest-block label { font-size: 18px; } .range-block { position: relative; width: 70px; } .range-block .amount-sign { position: absolute; top: 3px; color: #000; font-size: 18px; font-weight: 600; left: 0px; } .range-block .range-box { border: 1px solid #848484; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-size: 14px; color: #000; padding: 3px; height: 30px; padding-left: 25px; font-weight: 600; } .range-block .range-box.number-box { border: none; padding: 3px; text-align: center; } .loan-amount-block label { font-weight: 600; font-size: 16px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; color: #000; font-family: 'Roboto', sans-serif; } .loan-amount-block .ui-slider-horizontal { height: 2px; border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .loan-amount-block .ui-widget-content { background-color: #dedede; } .loan-amount-block .ui-widget-header { background-color: #1c5631 } .loan-amount-block .ui-slider-horizontal .ui-slider-handle { top: -6px; width: 12px; height: 12px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #1c5631; border: 0; margin-left: 0; } .loan-amount-block .range-slap-data { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-between; margin-top: 10px; } .loan-amount-block.tenure-block { margin-top: 30px; } .loan-amount-block .range-slap-data .amount { font-size: 14px; font-weight: 500; color: #999; } .loan-calculator-block .payment-block h3 { margin-bottom: 30px; } .loan-calculator-block .emitext > div { display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 15px; } .loan-calculator-block .emitext > div:last-child { margin-bottom: 0px; } .loan-calculator-block .emitext h6, .loan-calculator-block .emitext p { font-size: 20px; line-height: 26px; color: #333; font-weight: 600; } .loan-calculator-block .emitext p { color: #1d5633; margin: 0px; } .emi_calculation_portion { border: 2px solid #707070; height: 272px; border-radius: 5px; } @media only screen and (min-width:992px) and (max-width:1199px) { .loan-calculator-inner { padding: 40px; } } @media only screen and (min-width:768px) and (max-width:991px) { .loan-calculator-block { padding: 30px 0 50px; } .loan-calculator-block p { margin-bottom: 10px; } .loan-calculator-inner { padding: 30px; } .range-block { margin-top: 10px; } .loan-amount-block .range-slap-data { margin-top: 12px; } .loan-calculator-inner .interest-block { margin-top: 15px; } .loan-calculator-inner .tenure-block { margin-top: 15px; } .loan-calculator-inner h2 { font-size: 34px; margin-bottom: 15px; } .loan-calculator-inner h2 em { font-size: 34px; } } @media only screen and (max-width:991.98px) { .loan-calculator-inner { width: 100%; } } @media only screen and (max-width:767px) { .loan-calculator-block { padding: 40px 0 50px; } .loan-calculator-block .left-block { padding-right: 15px !important; } .loan-calculator-block .right-block { padding-left: 15px !important; } .loan-calculator-block p { margin-bottom: 0px; } .loan-calculator-inner { padding: 30px; } .loan-calculator-inner h2 em { font-size: 24px; } .loan-calculator-inner h6 { margin-bottom: 30px; } .payment-block { padding: 30px; } .payment-block h3 { font-size: 20px; } .payment-block h3 strong { font-size: 20px; } .loan-calculator-block .emitext h6, .loan-calculator-block .emitext p { font-size: 16px; line-height: 22px; } } /* talk to expert */ .talk_to_expert_inner { box-shadow: 8px 6px 25px rgb(0 0 0 / 10%); padding: 40px; position: relative; z-index: 1; border-radius: 10px; } .talk_to_expert_inner h2 { text-transform: capitalize; margin-bottom: 10px; text-align: left; font-weight: 400; } .talk_to_expert_inner p { line-height: 25px; color: #000; margin-bottom: 25px; font-size: 16px; max-width: 405px; } .call_image_holder { width: 257px; position: absolute; right: 8px; top: -13px; } .wp_talk_btn { background-color: #1c5631; color: #fff; font-size: 20px; font-family: 'Roboto', sans-serif; padding: 4px 10px; display: flex; align-items: center; width: 148px; border-radius: 5px; } .wp_talk_btn span { display: inline-block; width: 24px; margin-right: 5px; } .wp_talk_btn:hover { background-color: #0d953e; color: #fff; text-decoration: none; } @media only screen and (max-width:991px) { .call_image_holder { width: 210px; } .talk_to_expert_inner { box-shadow: 8px 6px 25px rgb(0 0 0 / 10%); padding: 20px; } } @media only screen and (max-width:767px) { .call_image_holder { display: none; } .talk_to_expert_inner p { max-width: 100%; } } /* customer part */ .quote { width: 35px; display: block; margin: 0 auto 35px; } .customer_item { padding: 50px 30px; border-radius: 5px; box-shadow: 0 5px 13px rgb(0 0 0 / 12%); margin: 0 10px; } .customer_slider .owl-stage-outer { padding: 14px 5px; } .rating { text-align: center; display: block; } .customer_item p { font-size: 14px; color: #000; text-align: center; line-height: 25px; } .customer_details figure { width: 55px; height: 55px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; } .customer_details { display: flex; align-items: center; } .customer_details_inner { padding-left: 10px; } .customer_details_inner h6 { font-size: 13px; line-height: 100%; margin-bottom: 5px; font-weight: 500; } .customer_details_inner p { font-size: 11px; line-height: 100%; margin-bottom: 0px; opacity: 0.5; text-align: left; } .rating img { display: inline-block !important; } .why_customer_love_us h2 { margin-bottom: 15px; } .why_customer_love_us { padding: 100px 0 0; } @media only screen and (max-width:991px) { .why_customer_love_us { padding: 70px 0 0; } } @media only screen and (max-width:767px) { .customer_item p { font-size: 13px; line-height: 22px; } } @media only screen and (max-width:480px) { .customer_item { padding: 30px 15px; } .quote { margin: 0 auto 30px; } } /* blog part */ .our_blogs { padding: 50px 0 80px; } .inner_blog_part { margin-bottom: 30px; } .inner_blog_part figure { overflow: hidden; margin-bottom: 15px; border-radius: 5px; } .inner_blog_part figure img { -webkit-transition: 0.3s linear all; -moz-transition: 0.3s linear all; transition: 0.3s linear all; } .inner_blog_part figure:hover img { transform: scale(1.1); } .inner_blog_part h3 { text-align: left; font-size: 19px; font-weight: 700; margin-bottom: 5px; color: #000; text-transform: capitalize; } .inner_blog_part p { font-size: 14px; line-height: 20px; font-weight: 400; margin-bottom: 0px; text-align: left; } .our_blogs h2 { margin-bottom: 30PX; } .read_all { font-size: 15px; color: #1c5631; font-weight: 500; } .read_all:hover { text-decoration: none; font-weight: 700; color: #1c5631; } @media only screen and (max-width:991px) { .inner_blog_part h3 { font-size: 16px; } .inner_blog_part p { font-size: 13px; line-height: 18px; } } @media only screen and (max-width:575px) { .our_blogs { padding: 35px 0; } } /* perpituity block */ .perpituity_logo_part { width: 117px; background-color: #1c5631; text-align: center; padding: 10px; border-radius: 5px; height: 117px; display: flex; justify-content: center; } .perpituity_logo_part img { width: 77px; } .perpituity_inner { display: flex; position: relative; padding: 50px 30px; border-radius: 10px; box-shadow: 0 5px 25px rgb(0 0 0 / 10%); overflow: hidden; } .perpituity_text_part { padding-left: 30px; } .perpituity_text_part h4 { color: #000; font-size: 25px; font-weight: 700; text-transform: inherit; margin-bottom: 5px; } .perpituity_text_part p { color: #000; font-size: 16px; font-weight: 400; text-transform: inherit; margin-bottom: 10px; } .download_btns { display: flex; } .download_btns a { width: 137px; } .download_btns a:hover { opacity: 0.8; } .download_btns a + a { margin-left: 5px; } .ph_image_box { position: absolute; top: -16px; right: 20px; width: 233px; z-index: -1; } @media only screen and (max-width:991px) { .perpituity_logo_part img { width: auto; } .perpituity_logo_part { width: 90px; height: 80px; } .perpituity_text_part h4 { font-size: 18px; } .perpituity_text_part p { font-size: 14px; } .download_btns a { width: 100px; } .perpituity_text_part { padding-left: 15px; } .ph_image_box { top: -8px; right: 5px; width: 196px; } } @media only screen and (max-width:767px) { .perpituity_inner { padding: 30px 15px; } .perpituity_logo_part { width: 70px; height: 65px; } .perpituity_text_part h4 { font-size: 15px; } .perpituity_text_part { width: 55%; } .ph_image_box { top: -4px; width: 165px; } } @media only screen and (max-width:480px) { .ph_image_box { display: none; } .perpituity_text_part { width: 83%; } .perpituity_inner { padding: 20px 15px; } } @media only screen and (max-width:370px) { .perpituity_text_part { width: 100%; padding-left: 0; margin-top: 10px; } .perpituity_inner { flex-wrap: wrap; } .perpituity_logo_part { margin: 0 auto; } .download_btns { justify-content: center; } .perpituity_text_part { text-align: center; } } /*contact block*/ .contact-block { padding: 100px 0; } .contact-block h2 { margin-bottom: 50px; } .contact-block .contact-white-bg { padding: 0px 15px; } .contact-details h4 { color: #000; font-weight: 700; display: -webkit-flex; display: -moz-flex; display: flex; align-items: center; margin-bottom: 20px; font-size: 40px; text-transform: inherit; } .contact-details p { font-size: 20px; line-height: 30px; color: #000; margin-left: 0; font-weight: 400; font-family: 'Roboto', sans-serif; margin-bottom: 5px; } .contact-details p span { display: inline-block; width: 80%; } .contact-details p a { color: #000; text-decoration: none; font-weight: 400; font-family: 'Roboto', sans-serif; width: 70%; display: inline-block; } .contact-details .icon { width: 76px; margin-right: 5px; text-align: center; display: inline-block; } .contact-details .icon img { display: inline-block; } .contact-details .contact-location-details { display: flex; display: -webkit-flex; display: -moz-flex; margin-left: 0px; } .contact-details .contact-location-details .icon { width: 76px; margin-right: 5px; } .map-block { padding-right: 20px; } .contact_inner { padding: 20px 0; border-radius: 5px; background-color: #efefef; margin: 0; } @media only screen and (max-width:991px) { .map-block { padding-right: 0; } } @media only screen and (min-width:768px) and (max-width:991px) { .contact-block { padding: 60px 0; } .contact-details .contact-location-details { font-size: 16px; margin-bottom: 15px; } .contact-details p, .contact-details p a { font-size: 16px; } .map-block .map { height: 300px; } } @media only screen and (max-width:767px) { .contact-block { padding: 40px 0; } .contact-block h2 { margin-bottom: 30px; } .contact-block .contact-white-bg { padding: 0px; margin-bottom: 25px; } .contact-details p { font-size: 16px; line-height: 26px; } .map-block .map { height: 300px; } .contact-details h4 { font-size: 36px; } } @media only screen and (max-width:480px) { .contact-details h4 { font-size: 30px; } .contact-details p { font-size: 14px; line-height: 22px; } .contact-details p a { width: 65%; } } /*footer*/ .footer { background-color: #1c5631; padding: 55px 0 0; position: relative; } .footer:before { content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-image: url(../images/footer-bg.jpg); background-size: cover; background-position: left top; background-repeat: no-repeat; opacity: 0.3; } .footer .copyright { font-size: 16px; line-height: 1.2; text-align: center; padding: 22px 0; margin: 40px 0 0 0; color: #fff; border-top: 1px solid #245238; } .footer .copyright img { display: inline-block; vertical-align: middle; } .footer .copyright small { font-size: 10px; } .footer .footer-link li { margin-bottom: 14px; } .footer .footer-link li a { color: #fff; font-size: 16px; line-height: 1.2; font-weight: 400; text-decoration: none; } .footer .footer-link li a:hover { color: #ccc; } .footer .share-us { display: flex; display: -webkit-flex; display: -moz-flex; } .footer .share-us li { margin-right: 20px; } .footer .share-us li a { display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: wrap; justify-content: center; align-content: center; width: 46px; height: 46px; border: 2px solid #fff; font-size: 20px; color: #FFFFFF; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -webkit-transition: 0.3s linear all; -moz-transition: 0.3s linear all; transition: 0.3s linear all; } .footer .share-us li a:hover { background-color: #FFFFFF; color: #1c5631; text-decoration: none; } .footer .footer-logo { margin-bottom: 30px; } .google-store-image { display: flex; display: -webkit-flex; display: -moz-flex; } .google-store-image img, .google-store-image a { margin-right: 10px; } .google-store-image img:last-child, .google-store-image a:last-child { margin-right: 0; } .footer .footer-logo img { width: 100px; } @media only screen and (max-width:767px) { h5 { font-size: 16px; text-align: center; margin-bottom: 45px; } h5::before { width: 100%; top: 39px; } h5::after { top: 40px; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .footer { padding: 40px 0 20px; } .footer .footer-logo { text-align: center; } .footer .footer-logo img { margin: 0 auto; } .google-store-image { justify-content: center; margin-bottom: 40px; } .footer .footer-link { margin-bottom: 25px; } .footer .footer-link li { text-align: center; } .footer .share-us li:last-child { margin-right: 0; } .footer .share-us { justify-content: center; } .footer .footer-link li a { font-size: 14px; } .footer .copyright { margin-top: 30px; padding: 20px 0 0; } } /*contact map*/ .map-block .map { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); position: relative; } /*Signpu/Login Popup --------------------------------------------*/ .modal { z-index: 999999; } .modal-backdrop.show { opacity: 0.7; } .modal-dialog { width: 94%; max-width: 390px; max-height: 98%; margin: 0px auto; border-radius: 30px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) !important; -moz-transform: translate(-50%, -50%) !important; -ms-transform: translate(-50%, -50%) !important; -o-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; } .modal-content { border-radius: 10px; padding: 35px 25px 50px; border: none; } button.close { position: absolute; right: 10px; top: 20px; width: 25px; height: 25px; border: none; border-radius: 50%; opacity: 1; outline: none !important; } .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus { opacity: 1; } .modal-body { padding: 0px; } .create-account { display: flex; flex-flow: wrap; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .create-account h3 { font-size: 28px; line-height: 34px; font-weight: 600; color: #1d5633; text-transform: none; width: 100%; margin-bottom: 25px; } .create-account h4 { font-size: 28px; line-height: 34px; width: 100%; margin-bottom: 10px; } .create-account h5 { color: #333; text-transform: none; margin: 0px; } .create-account h5:before, .create-account h5:after { display: none; } .create-account h6 { margin-bottom: 5px; } .create-account span { width: 100%; display: block; font-size: 14px; line-height: 20px; color: #1b1b1b; margin-bottom: 10px; } .create-account form { width: 100%; display: block; margin-top: 25px; margin-bottom: 40px; } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"], .form-group input[type="number"], .form-group input[type="date"], .form-group input[type="file"], .form-group input[type="time"], .form-group select, .form-group textarea { width: 100%; height: 36px; border: 2px solid #dedede; border-radius: 30px; padding: 0px 20px; font-size: 14px; line-height: 32px; color: #313131; outline: none !important; box-shadow: none !important; } .form-group input[type="file"] { padding: 0px 20px 0px 0px; } .form-group input[type="file"]::-webkit-file-upload-button { background: #ddd; border: none; border-radius: 20px; color: #000; cursor: pointer; font-size: 12px; outline: none; padding: 2px 15px; text-transform: uppercase; transition: all 1s ease; height: 32px; } .create-account input[type="submit"], .create-account input[type="button"], .create-account .btn { display: inline-block; vertical-align: top; font-size: 14px; line-height: 20px; color: #35cc75; text-transform: uppercase; letter-spacing: 4px; padding: 8px 45px 6px; background-color: transparent; border: 2px solid #35cc75; border-radius: 30px; outline: none !important; box-shadow: none !important; margin-top: 10px; } .create-account input[type="submit"]:hover, .create-account input[type="button"]:hover, .create-account input[type="submit"]:focus, .create-account input[type="button"]:focus, .create-account .btn:hover { background-color: #35cc75; border-color: #35cc75; color: #FFFFFF; } .create-account .alternet-login { width: 100%; margin: 25px 0px; } .create-account .alternet-login a { display: inline-block; vertical-align: top; width: 100%; border: 2px solid #ddd; border-radius: 30px; padding: 6px 20px; text-align: left; font-size: 16px; line-height: 16px; text-transform: capitalize; font-weight: 600; } .create-account .alternet-login img { width: 24px; display: inline-block; vertical-align: middle; margin-right: 10px; } .create-account .alternet-login a:hover { background-color: #ddd; color: #1d5633; text-decoration: none; } .create-account .or { width: 100%; max-width: 70%; margin: 0 auto; position: relative; font-size: 16px; line-height: 22px; color: #333; text-transform: uppercase; text-align: center; } .create-account .or:before { content: ""; width: 100%; height: 1px; position: absolute; left: 0px; top: 7px; background-color: #DDD; } .create-account .or span { display: inline-block; vertical-align: middle; width: auto; margin: 0px; padding: 0px 10px; background-color: #FFF; position: relative; z-index: 2; } .create-account p { width: 100%; margin: 0px; font-size: 14px; line-height: 20px; color: #1b1b1b; font-weight: 600; } .create-account p a { color: #35cc75; } .create-account p a:hover { text-decoration: underline; } .create-account .digit-group { display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; margin: 40px 0px 25px; } .create-account .digit-group input { padding: 0px 2px; width: 38px; height: 56px; border-radius: 20px; text-align: center; font-size: 24px; line-height: 52px; font-weight: 600; color: #1b1b1b; } .create-account .digit-group input::-webkit-outer-spin-button, .create-account .digit-group input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .create-account .digit-group input[type=number] { -moz-appearance: textfield; } @media only screen and (max-width:767.98px) { .create-account form { margin-top: 20px; } .create-account .alternet-login { margin: 20px 0px; } .create-account h4 { font-size: 24px; line-height: 30px; } } @media only screen and (max-width:375.98px) { /* .modal-content { min-height: 570px; border-radius: 80px; padding: 30px 40px; } */ button.close { right: 10px; top: 15px; } } @media only screen and (max-width:359.98px) { /* .modal-content { min-height: 468px; } */ .create-account .digit-group input { width: 30px; height: 46px; border-radius: 10px; font-size: 20px; line-height: 44px; } } /* Inner Page Banner -------------------------------------*/ .inner-page-banner .banner { height: auto; } .inner-page-banner .container { display: flex; flex-flow: wrap; position: relative; z-index: 4; } .inner-page-banner .banner-content { margin-top: 280px; margin-bottom: 140px; } @media only screen and (max-width:1199.98px) { .inner-page-banner .banner-content { margin-top: 240px; margin-bottom: 100px; } .banner-content h2 { font-size: 40px; line-height: 55px; } .banner_image { margin-right: 0px; } } @media only screen and (max-width:991.98px) { .inner-page-banner .banner { padding-bottom: 70px; } .inner-page-banner .banner-content { margin: 40px auto 0px; } .banner .row { height: auto; } .banner { height: auto; } .banner .text_part { order: 2; } .banner .image_part { order: 1; } .banner_image { margin-top: 0; margin-bottom: 30px; } } @media only screen and (max-width:767.98px) { .banner-content h2 { font-size: 36px; line-height: 42px; } } @media only screen and (max-width:575.98px) { .inner-page-banner .banner { padding-bottom: 50px; } .inner-page-banner .banner-content { margin-top: 30px; } .banner-content h2 { font-size: 30px; } .banner-content h2 br { display: none; } .banner_image { margin-bottom: 15px; } } @media only screen and (max-width:420px) { .banner-content h2 { font-size: 28px; line-height: 36px; } } /* Apply For Loan -------------------------------------*/ .apply-loan { padding: 90px 0px; } .apply-loan h1, .apply-loan h2 { font-size: 16px; line-height: 22px; padding: 0 63px; color: #313131; font-weight: 400; letter-spacing: 0; text-transform: none; margin-bottom: 25px; text-align: left; } .application-steps { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; max-width: 500px; margin: 0 auto 50px; } /* ul.application-steps li { width: 11%; height: 4px; border-radius: 20px; background-color: #deede4; } */ .application-steps li.comleted { background-color: #1d5633; } .application-steps li.active { background-color: #35cc75; } .application-steps li a { display: inline-block; vertical-align: top; width: 100%; height: 100%; } .application-form { max-width: 500px; margin: 0px auto; } .application-form .form-group { display: flex; flex-flow: wrap; flex-direction: row; position: relative; } .application-form .form-group label { width: 100%; } .application-form .form-group .block { width: 49%; } .application-form .form-group { margin-bottom: 0; } .application-form .form-group + .form-group { margin-top: 25px; } .application-form .loan-amount-block .ui-widget-content { max-width: calc(100% - 20px); margin: 0 auto; } .application-form .form-group label i { display: inline-block !important; } .application-form .form-group .custom-radio label { line-height: 28px; } .application-form .buttons { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 30px; } .application-form input[type="submit"], .application-form input[type="button"], .buttonCurb { background-color: #1d5633; border: none; color: #FFFFFF; padding: 10px 35px 8px; font-size: 14px; line-height: 20px; text-transform: uppercase; border-radius: 5px; } .application-form input[type="submit"]:hover, .application-form input[type="button"]:hover, .application-form input[type="submit"]:focus, .application-form input[type="button"]:focus, .application-form input[type="submit"]:active, .application-form input[type="button"]:active, .buttonCurb:hover { background-color: #35cc75; color: #fff; } .application-form .prev, .application-form .next { font-size: 12px; line-height: 18px; color: #1d5633; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; min-width: 81px; } .application-form .prev:hover, .application-form .next:hover { color: #35cc75; } .application-form .prev i { margin-right: 5px; } .application-form .next { text-align: right; } .application-form .next i { margin-left: 5px; } .application-form .loan-amount-block label { font-size: 12px; line-height: 18px; color: #6d6d6d; margin-bottom: 20px; } .application-form .range-block { margin-top: 10px; } .application-form .range-block .amount-sign { top: 8px; font-size: 18px; left: 12px; } .application-form .loan-amount-block .ui-slider-horizontal .ui-slider-handle { top: -10px; width: 20px; height: 20px; } .application-form .loan-amount-block .range-slap-data { margin-top: 10px; } /* .application-form .loan-amount-block .amount { font-size: 14px; } */ .application-form .loan-amount-block .amount { font-size: 14px; width: 10px; border-radius: 50%; height: 10px; background-color: #dedede; } .application-form .loan-amount-block .range-slap-data { margin-top: -6px; position: relative; } .application-form .form-group .verify { display: inline-block; vertical-align: top; background-color: #35cc75; color: #FFF; padding: 2px 10px 1px; border-radius: 5px; font-size: 10px; line-height: 18px; text-transform: uppercase; text-decoration: none; position: absolute; right: 6px; top: 19px; } .application-form .btn { background-color: #35cc75; border: none; color: #FFFFFF; padding: 10px 25px; font-size: 14px; line-height: 20px; text-transform: uppercase; border-radius: 0px; } .application-form .btn:hover { background-color: #1d5633; color: #FFFFFF; } @media only screen and (max-width:991.98px) { /* .apply-loan h1, .apply-loan h2 { font-size: 24px; line-height: 30px; } */ } @media only screen and (max-width:767.98px) { .apply-loan { padding: 55px 0px; } } @media only screen and (max-width:479.98px) { /* .apply-loan h1, .apply-loan h2 { font-size: 20px; line-height: 26px; } */ .application-steps { margin-bottom: 36px; } .application-form .prev, .application-form .next { min-width: inherit; font-size: 11px; } .application-form input[type="submit"], .application-form input[type="button"] { padding: 10px 25px 8px; } .application-form .form-group .block { width: 100%; margin-bottom: 15px; } .application-form .form-group .block:last-child { margin-bottom: 0px; } .apply-loan h1, .apply-loan h2 { padding: 0 24px; } } @media only screen and (max-width:374.98px) { /* .apply-loan h1, .apply-loan h2 { font-size: 18px; line-height: 24px; } */ } /*Profile Banner --------------------------------------------*/ .profile-banner { background-color: #1c563124; padding-top: 170px; position: relative; margin-top: -132px; } /* .profile-banner:before { content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } */ .profile-banner .container { display: flex; flex-flow: wrap; flex-direction: row; align-items: center; position: relative; } .profile-banner label { width: 190px; margin-right: 30px; display: block; } .profile-banner figure { width: 190px; height: 190px; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .profile-banner figure { width: 190px; height: 190px; border-radius: 50%; background-image: url('../images/icon-user-large.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .profile-banner figure span { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .profile-banner figure img { min-width: 100%; min-height: 100%; } .profile-banner figure .btn-file { display: inline-block; vertical-align: top; width: 50px; height: 50px; border-radius: 50%; padding: 0px; background-color: #eee; background-image: url('../images/icon-camera.png'); background-repeat: no-repeat; background-position: center; background-size: 24px; position: absolute; right: 0px; bottom: 10px; overflow: hidden; cursor: pointer; margin: 0px; z-index: 11; } .profile-banner .btn-file input[type="file"] { position: absolute; top: 0; right: -40px; min-width: 100%; min-height: 100%; font-size: 10px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } .ripple-container { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; pointer-events: none; } .profile-banner .user-details { width: calc(100% - 220px); position: relative; margin-left: 30px; } .profile-banner .user-details h3 { font-weight: 700; color: #000; text-transform: capitalize; margin-bottom: 5px; } .profile-banner .user-details h5 { font-size: 16px; line-height: 22px; font-weight: 400; color: #000; text-transform: capitalize; margin: 0px 0px 10px; } .profile-banner .user-details h5:before, .profile-banner .user-details h5:after { display: none; } .profile-banner .user-details h5 img { margin-right: 10px; display: inline-block; } .profile-banner .user-details .logout { display: inline-block; vertical-align: top; font-size: 12px; line-height: 18px; color: #ff0000; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .profile-banner .user-details .logout img { margin-right: 10px; display: inline-block; } @media only screen and (max-width:991.98px) { .profile-banner { padding-top: 200px; padding-bottom: 50px; margin-bottom: 0px; } .profile-banner .container { margin-top: 0px; bottom: 0px; align-items: center; } .profile-banner figure { margin: 0px; } } @media only screen and (max-width:767.98px) { .profile-banner .user-details { width: 100%; padding: 0px; margin: 15px 0px 0px; text-align: center; } .profile-banner figure { width: 150px; height: 150px; margin: 0px auto; } } @media only screen and (max-width:480px) { .profile-banner { padding-top: 165px; } } /*Account Details --------------------------------------------*/ .account-details { padding: 70px 0px; } .account-details .cintainer { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; } .account-details .nav-tabs { width: 100%; display: inline-flex; flex-direction: row; justify-content: center; white-space: nowrap; overflow-x: auto; overflow-y: hidden; border: none; position: relative; } .account-details .nav-tabs .nav-item { margin: 0px; margin-right: 60px; } .account-details .nav-tabs .nav-item:last-child { margin-right: 0px; } .account-details .nav-tabs .nav-link { font-size: 14px; line-height: 20px; color: #1b1b1b; text-transform: uppercase; font-weight: 600; background-color: transparent; border: none; border-radius: 0px; padding: 0px 0px 10px; margin: 0px; position: relative; z-index: 3; } .account-details .nav-tabs .nav-link:hover, .nav-tabs .nav-link.active { color: #35cc75; border: none; background-color: transparent; } .account-details .nav-tabs .nav-link:after { content: ""; position: absolute; left: 0px; bottom: 0px; width: 0px; height: 2px; background-color: #35cc75; opacity: 0; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; } .account-details .nav-tabs .nav-link.active:after { opacity: 1; width: 100%; } .account-details .tab-content { padding-top: 50px; text-align: left; } .account-details .form-edit { margin-bottom: 15px; } .account-details .details .edit, .account-details .details .editable { font-size: 14px; line-height: 20px; color: #1d5633; text-transform: capitalize; display: inline-block; vertical-align: top; } .account-details .details .edit img, .account-details .details .editable img { display: inline-block; vertical-align: top; margin-right: 8px; } .account-details .details .edit:hover, .account-details .details .editable:hover { color: #35cc75; } .account-details .details .row { margin-top: 50px; } .popup-number { display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; width: 100%; } .popup-number span { width: 60px; height: 36px; border: 2px solid #dedede; background-color: #eee; color: #333333; font-size: 14px; line-height: 32px; text-align: center; border-radius: 30px; } .popup-number input { width: calc(100% - 66px) !important; } .account-details .homeloan { text-align: center; } .account-details .homeloan .loan-tab-outer { max-width: 850px; margin: 0 auto; } .loan-options { text-align: center; width: 100%; border: none; border-collapse: separate; border-spacing: 0 15px; } .loan-options th { font-size: 12px; line-height: 18px; color: #666; text-transform: uppercase; text-align: center; padding: 0px 15px; } .loan-options th:first-child { text-align: left; } .loan-options tbody tr:hover { background-color: #e9e9e9; } .loan-options td { border: 1px solid #dddddd; border-left: none; border-right: none; padding: 15px; font-size: 16px; line-height: 22px; color: #313131; font-weight: 600; vertical-align: middle; } .loan-options td:first-child { border-left: 1px solid #dddddd; text-align: left; } .loan-options td:first-child img { max-height: 70px; } .loan-options td:last-child { border-right: 1px solid #dddddd; } .loan-options td span { font-size: 14px; line-height: 18px; color: #313131; display: block; } .loan-options td a { font-size: 12px; line-height: 18px; color: #1d5633; text-transform: uppercase; font-weight: 600; } @media only screen and (max-width:1199.98px) { .account-details { padding: 60px 0px; } .account-details .tab-content { padding-top: 40px; } .account-details .details .row { margin-top: 30px; } } @media only screen and (max-width:991.98px) { .account-details { padding: 50px 0px; } } @media only screen and (max-width:767.98px) { .account-details .tab-content { padding-top: 20px; } .account-details .details .row { margin-top: 20px; } .loan-options, .loan-options tbody, .loan-options tr, .loan-options td { display: block; width: 100%; position: relative; } .loan-options thead { display: none; } .loan-options tr { margin-bottom: 30px; } .loan-options tbody tr:hover { background-color: #fff; } .loan-options tr:last-child { margin-bottom: 0px; } .loan-options td { border: 1px solid #e6e6e6; border-top: none; padding: 10px; text-align: right; padding-left: 50%; } .loan-options td:first-child { border-left: none; border-right: none; text-align: left; padding: 10px 0px 15px; } .loan-options td:first-child:before { display: none; } .loan-options td:last-child { border-left: none; border-right: none; border-bottom: none; padding: 10px 0px 0px; } .loan-options td:last-child:before { display: none; } .loan-options tr:last-child td:last-child { border-bottom: none; } .loan-options td:before { content: attr(data-th); width: 50%; height: 100%; padding: 10px; font-size: 13px; line-height: 19px; color: rgba(49, 49, 49, 0.7); text-transform: uppercase; text-align: left; position: absolute; left: 0px; top: 0px; display: inline-flex; flex-flow: column; justify-content: center; } .loan-options td a { color: #ffffff; font-weight: 600; background-color: #1d5633; padding: 10px 30px; border-radius: 30px; display: inline-block; } } /*Success --------------------------------------------*/ .product-block .success, .product-block .error { text-align: center; } .product-block .success h2, .product-block .error h2 { font-size: 40px; line-height: 46px; text-transform: none; margin-bottom: 40px; } .product-block .success .btn, .product-block .error .btn { padding: 10px 30px; min-width: 200px; } @media only screen and (max-width:991.98px) { .product-block .success h2, .product-block .error h2 { font-size: 36px; line-height: 42px; } } @media only screen and (max-width:767.98px) { .product-block .success h2, .product-block .error h2 { font-size: 30px; line-height: 36px; margin-bottom: 25px; } } @media only screen and (max-width:479.98px) { .product-block .success h2, .product-block .error h2 { font-size: 24px; line-height: 30px; } } /*Pay Loan EMI --------------------------------------------*/ .pay-loan-emi { padding: 70px 0px; } .pay-loan-emi p a { color: var(--green); text-decoration: underline; } .pay-loan-emi p a:hover { text-decoration: none; } @media only screen and (max-width:1199.98px) { .pay-loan-emi { padding: 60px 0px; } } @media only screen and (max-width:1199.98px) { .pay-loan-emi { padding: 50px 0px; } } /*Loan Details Section --------------------------------------------*/ .loan-details-section { padding: 70px 0px; } .loan-details-section h2 { margin: 0px; } .loan-details-section .aside { height: 100%; padding: 40px; border-radius: 20px; -webkit-box-shadow: 0px 0px 12px 2px #ddd; -moz-box-shadow: 0px 0px 12px 2px #ddd; -ms-box-shadow: 0px 0px 12px 2px #ddd; -o-box-shadow: 0px 0px 12px 2px #ddd; box-shadow: 0px 0px 12px 2px #ddd; } .loan-details-section .block { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; font-size: 18px; line-height: 24px; font-weight: 400; color: var(--dark); margin-bottom: 20px; } .loan-details-section .block:last-child { margin-bottom: 0px; } .loan-details-section .block strong { font-family: 'Roboto', sans-serif; font-weight: 600; text-transform: capitalize; width: 80px; } .loan-details-section .block span, .loan-details-section .block address { font-family: 'Roboto', sans-serif; width: calc(100% - 100px); word-break: break-all; } .loan-details-section h6 { font-family: 'Roboto', sans-serif; font-size: 50px; line-height: 1.2; font-weight: bold; } .loan-details-section h6 small { font-family: 'Roboto', sans-serif; font-size: 24px; text-transform: uppercase; } @media only screen and (max-width:1199.98px) { .loan-details-section { padding: 60px 0px; } } @media only screen and (max-width:1199.98px) { .loan-details-section { padding: 50px 0px; } .loan-details-section h6 { font-size: 40px; } .loan-details-section h6 small { font-size: 20px; } } @media only screen and (max-width:767.98px) { .loan-details-section .aside { padding: 30px; } .loan-details-section h6 { font-size: 30px; line-height: 36px; } .loan-details-section h6 small { font-size: 18px; } .loan-details-section .block { font-size: 16px; line-height: 22px; margin-bottom: 15px; } } /* Terms & Condition ------------------------------------------*/ .terms-condition { padding: 60px 0px 50px; } .terms-condition h5 { font-weight: 600; margin-bottom: 15px; color: #333; text-transform: none; text-align: left; } .terms-condition h5:before, .terms-condition h5:after { display: none; } .terms-condition h5 span { display: inline-block; margin-right: 10px; } .terms-condition ul { padding-left: 30px; padding-bottom: 25px; margin-bottom: 30px; border-bottom: 1px solid #ddd; } .terms-condition ul:last-child { padding-bottom: 0px; margin-bottom: 0px; border: none; } .terms-condition li { margin-bottom: 10px; font-size: 16px; line-height: 22px; color: #666; list-style: decimal; } @media only screen and (max-width:767px) { .terms-condition li { font-size: 14px; line-height: 20px; } } /* our blog page */ .faq { padding: 50px 0; } .faq h1 { color: #1C5631; margin-bottom: 30px; font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: 0; text-align: center; text-transform: capitalize; } .faq .breadcrumb-item + .breadcrumb-item::before { content: ">"; color: #000; font-weight: 500; padding-right: 5px; } .global_breadcrumb { background-color: transparent; border-radius: 0; } .global_breadcrumb li { display: inline-block; vertical-align: middle; } .global_breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 5px; } .global_breadcrumb .breadcrumb-item a { font-size: 14px; font-weight: 400; } .global_breadcrumb .breadcrumb-item.active { color: #000; } .our_blogs_section .inner_blog_part p { margin-bottom: 10px; } .our_blogs_section .inner_blog_part { text-align: left; } .global_breadcrumb .breadcrumb-item a:hover { text-decoration: none; color: #1c5631; } @media only screen and (max-width:991px) { .our_blogs_section { padding: 100px 0; } } @media only screen and (max-width:767px) { .global_breadcrumb { padding: 0; } } /* faq page */ .faq_search { max-width: 485px; margin: 0 auto 40px; } .faq_search input { width: 100%; border-radius: 5px; border: 1px solid #707070; padding: 10px 25px; background-repeat: no-repeat; background-position: center right 20px; background-image: url(../images/magnifying-glass.png); background-size: 35px; font-size: 20px; color: #000; padding-right: 60px; } .faq_search input::placeholder { color: #000; font-size: 20px; opacity: 1; } .faq_search input:-ms-input-placeholder { color: #000; font-size: 20px; opacity: 1; } .faq_search input::-ms-input-placeholder { color: #000; font-size: 20px; opacity: 1; } .faq_block .btn { padding: 0; font-size: 20px; color: #000; font-weight: 600; width: 100%; text-align: left; position: relative; background-image: url(../images/minus-sign.png); background-repeat: no-repeat; background-position: top right; padding-right: 95px; } .faq_block .btn:hover, .btn:focus { text-decoration: none; color: #000; box-shadow: none; } .faq_block .btn.collapsed { background-image: url(../images/plus.png); background-repeat: no-repeat; background-position: top right; } .faq_block .card-header { padding: 20px 15px; margin-bottom: 0; background-color: transparent; border-bottom: 0; padding-right: 100px; } .faq_block .card { border: 0; margin-bottom: 15px; } .faq_block .card:last-child { margin-bottom: 0px; } .faq_block .card-body { padding: 0 15px 15px; font-size: 18px; color: #000; padding-right: 135px; } @media only screen and (max-width:991px) { .faq h1 { margin-bottom: 20px; font-size: 30px; } .faq_block .card-header { padding-right: 15px; } .faq_block .btn { font-size: 18px; background-size: 24px; } .faq_block .card {margin-bottom: 0px; } .faq_block .card-body { font-size: 16px; padding-right: 40px; } } @media only screen and (max-width:767px) { .faq h1 { font-size: 24px; line-height: 30px; } .faq_search { margin-bottom: 25px; } .faq_search input { height: 40px; padding: 5px 25px; padding-right: 36px; background-size: 20px; background-position: right 10px center; } .faq_block .btn { background-size: 16px; background-position: right 16px; padding-right: 30px; } .faq_block .btn.collapsed { background-position: right center; background-size: 16px; } } @media only screen and (max-width:480px) { .faq_block .card-body { font-size: 14px; padding: 0 0 15px; } .faq_block .btn { font-size: 16px; } .faq_block .card-header { padding: 10px 0; } .faq_search input { font-size: 16px; } } /* loan progress step*/ .loan_progessbar { display: flex; width: 100%; counter-reset: step; margin-bottom: 50px; display: flex; align-items: center; } .loan_progessbar li { width: calc(100% / 3); text-align: center; counter-increment: step; position: relative; display: flex; flex-direction: column; align-items: center; color: #747d8c; } .loan_progessbar li:before { content: ''; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 20px; border-radius: 50%; background-color: #dedede; font-weight: bold; } .loan_progessbar li:after { content: ""; height: 2px; width: 100%; background-color: #dedede; position: absolute; left: -50%; top: 50%; z-index: -2; } .loan_progessbar li:first-child:after { display: none; } .loan_progessbar li.active:before { width: 32px; height: 32px; background-color: #1c5631; background-image: url(../images/tick.png); background-repeat: no-repeat; background-position: center center; background-size: 10px; } .loan_progessbar li.active::after { background-color: #1c5631; } .form_row_icon { width: 20px; } .form_row_details { padding-left: 8px; width: 95%; position: relative; } .progress_form .form-group label { font-size: 14px; line-height: 20px; color: #000000; text-transform: none; display: block; margin: 0; padding-left: 0px; text-align: left; } .progress_form .form-group input[type="text"], .progress_form .form-group input[type="email"], .progress_form .form-group input[type="password"], .progress_form .form-group input[type="number"], .progress_form .form-group input[type="date"], .progress_form .form-group input[type="file"], .progress_form .form-group input[type="time"] { width: 100%; height: 27px; border-radius: 0; padding: 0; font-size: 14px; line-height: 32px; color: #000000; outline: none !important; box-shadow: none !important; border: 0; border-bottom: 1px solid #333333; } .progress_form .form-group input[type="text"]:focus, .progress_form .form-group input[type="email"]:focus, .progress_form .form-group input[type="password"]:focus, .progress_form .form-group input[type="number"]:focus, .progress_form .form-group input[type="date"]:focus, .progress_form .form-group input[type="file"]:focus, .progress_form .form-group input[type="time"]:focus { border-color: #000000; color: #000000; } .progress_form .form-group .ph_number { width: 88% !important; } input:-ms-input-placeholder { font-size: 12px; color: #313131; } input::-webkit-input-placeholder { font-size: 12px; color: #313131; } input:-moz-placeholder { font-size: 12px; color: #313131; } input::-moz-placeholder { font-size: 12px; color: #313131; } .progress_form .form-group select { width: 100%; height: 30px; border-radius: 0; padding: 0; font-size: 12px; line-height: 32px; color: #6d6d6d; outline: none !important; box-shadow: none !important; border: 0; border-bottom: 2px solid #dedede; } .progress_form { padding: 24px; border-radius: 10px; box-shadow: 0 1px 15px rgba(0, 0, 0, 0.2); } .progress_heading { text-align: center; margin-bottom: 20px; position: relative; } .progress_heading a { position: absolute; left: 20px; top: 10px; display: block; width: 10px; z-index: 2; } .progress_heading p { font-size: 12px; line-height: initial; font-weight: 400; color: #000000; margin-bottom: 0; text-align: center; } .progress_heading h1 { color: #000000; font-size: 24px; line-height: 30px; font-weight: 600; text-transform: capitalize; text-align: center; position: relative; margin-bottom: 10px; } .apply-loan .loan-description { display: block; font-size: 16px; line-height: 22px; color: #313131; font-weight: 400; letter-spacing: 0; text-transform: none; margin-bottom: 25px; text-align: center; } .continue_btn { padding: 10px 20px; color: #fff; font-size: 16px; line-height: 22px; background-color: #1C5631; border-radius: 5px; display: inline-block; text-align: center; min-width: 130px; } .continue_btn:hover { text-decoration: none; background-color: #000; color: #fff; } .step_btn_holder { padding: 30px 0px 0px; } .step_btn_holder p { font-size: 12px; line-height: initial; font-weight: 400; color: #000000; margin-bottom: 20px; text-align: center; } .progress_form + .progress_form { margin-top: 25px; } .dob_block { display: flex; max-width: 70%; flex-wrap: wrap; } .progress_form .form-group .dob_block input { width: 31%; text-align: center; } .dob_block input + input { margin-left: 10px; } .dob_block em { font-size: 10px; color: #6d6d6d; font-style: normal; margin-top: 5px; width: 100%; } .duel_input_holder { display: flex; justify-content: space-between; } .duel_input { width: 48.5%; } .full_progress .form_row_details { padding-left: 0; width: 100%; } .full_progress .flex-box { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; align-items: center; } .full_progress .flex-box .lable-div { width: calc(100% - 150px); } .application-form .loan-amount-block .range-slap-data .amount:last-child { left: -4px; position: relative; } .progress_form .form-group .range-box { border: none !important; text-align: center; margin-top: 10px; height: 20px !important; font-weight: 600; } .progress_form .loan-amount-block.tenure-block { margin-top: 20px; } .input_file_holder { position: relative; background-color: #FFFFFF; border-radius: 5px; font-size: 14px; max-width: 155px; color: #1C5631; border: 1px solid #1C5631; background-image: url(../images/upload-green.png); background-repeat: no-repeat; background-position: 15px center; padding: 8px 16px 8px 40px; background-size: 16px; } .input_file_holder input { position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: 100% !important; opacity: 0; z-index: 3; cursor: pointer; } .form_row_details em { display: block; font-size: 10px; line-height: 10px; color: #6d6d6d; font-style: normal; margin-top: 5px; width: 100%; } .custom_radio { display: block; position: relative; margin-bottom: 0px; cursor: pointer; font-size: 14px; font-weight: 600; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-top: 30px; } .custom_radio input { position: absolute; opacity: 0; cursor: pointer; } .checkmark { position: absolute; top: 0; left: 50%; height: 22px; width: 22px; background-color: transparent; border-radius: 50%; transform: translateX(-50%); border: 1px solid #6d6d6d; opacity: 0.3; } .custom_radio .text { opacity: 0.3; } .custom_radio:hover input ~ .checkmark { background-color: #84958a; } .custom_radio input:checked ~ .checkmark { background-color: transparent; border-color: #1C5631; opacity: 1; } .checkmark:after { content: ""; position: absolute; display: none; } .custom_radio input:checked ~ .checkmark:after { display: block; } .custom_radio .checkmark:after { top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #1C5631; } .custom_radio input:checked ~ .text { opacity: 1; } .radio_holder { display: flex; justify-content: space-evenly; align-items: center; } #first, #second { display: none; } .activeTab { display: block !important; } .radio_short { padding-top: 30px; } .progress_form .loan-amount-block .ui-widget-header { background-color: transparent; } .progress_form .loan-amount-block .ui-slider-horizontal .ui-slider-handle { top: -12px; width: 24px; height: 24px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #1C5631; border: 0; margin-left: -.75em; } @media only screen and (max-width:575px) { .dob_block { max-width: 80%; } .form-group .dob_block input { width: 28%; } } @media only screen and (max-width:480px) { .form_row_details { width: 94%; } .progress_form .form-group .dob_block input { width: 29%; } .input_file_holder { font-size: 12px; max-width: 120px; background-position: center left 15px; padding: 7px 10px 7px 35px; background-size: 12px; } .custom_radio { font-size: 12px; } } @media only screen and (max-width:420px) { .form_row_details { width: 92%; } } /* sign up / login */ .signup_inner h4 { text-align: center; color: #1C5631; font-weight: 700; font-family: 'Roboto', sans-serif; margin-bottom: 25px; } .signup_inner h4 span { display: block; font-size: 16px; font-weight: 400; text-transform: none; color: #000; margin-top: 10px; } .signup_inner .form-group { margin-bottom: 25px; display: flex; } .signup_inner .form-group label { font-size: 14px; color: #333; padding-left: 0; } .signup_inner .form-group input { height: 28px; border: 0; border-radius: 0; padding: 0; font-size: 12px; border-bottom: 2px solid #dedede; font-family: 'Roboto', sans-serif; } .green_btn { font-size: 16px; color: #fff; text-align: center; text-transform: uppercase; font-family: 'Roboto', sans-serif; background-color: #1c5631; display: block; padding: 10px 25px; border-radius: 5px; font-weight: 400; max-width: 140px; outline: 0; border: 0; } .green_btn:hover { color: #fff; background-color: #129341; text-decoration: none; } .signup_inner .green_btn { margin: 0 auto; } .signup_inner p { margin-top: 10px; margin-bottom: 0; font-size: 16px; text-align: center; font-family: 'Roboto', sans-serif; } .signup_inner p a { color: #1C5631; font-weight: 500; margin-left: 5px; } .signup_inner p a:hover { color: #129341; text-decoration: none; } .full_country { padding-left: 0; width: 100%; display: flex; justify-content: space-between; } .country_code { width: 10% !important; } .signup_inner .full_country input { width: 88%; } .signup_inner .digit-group { text-align: center; } .signup_inner .digit-group input { padding: 0px 2px; width: 38px; height: 56px; border-radius: 10px; text-align: center; font-size: 24px; line-height: 52px; font-weight: 600; color: #1b1b1b; } .signup_inner h6 { font-size: 15px; text-align: center; padding: 10px 0; font-weight: 600; } .signup_inner h5 { color: #333; text-transform: none; margin: 0px; font-family: 'Roboto', sans-serif; letter-spacing: 0; margin-bottom: 15px; } /* loan calculator block */ .loan-calculator-inner .custom_radio + .loan-calculator-inner .custom_radio { margin-left: 50px; } .loan-calculator-inner .custom_radio { padding-top: 0; padding-left: 30px; } .loan-calculator-inner .checkmark { left: 0; transform: none; } .loan-calculator-inner .custom_radio .checkmark:after { background: url(../images/tick.png) #1c5631; background-repeat: no-repeat; background-size: 9px; background-position: center center; width: 100%; height: 100%; top: 0; left: 0; } .loan-calculator-inner .radio_holder { margin-bottom: 20px; } .loan_form_row { position: relative; height: 50px; overflow: hidden; } .loan_form_row input { width: 100%; height: 100%; color: #000; font-weight: 500; padding-top: 20px; outline: none; font-size: 14px; border-radius: 6px; padding-bottom: 2px; background: transparent; position: relative; z-index: 2; border: 2px solid #f2f3f5; } .loan_form_row label { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; font-size: 12px; background-color: #f2f3f5; font-weight: 500; border-radius: 6px; } .content-name { position: absolute; bottom: 15px; left: 15px; transition: all 0.3s ease; } .loan_form_row input:focus + .label-name .content-name, .loan_form_row input:valid + .label-name .content-name { transform: translateY(-58%); font-size: 12px; color: #1c5631; } .loan_form_row input:focus + .label-name, .loan_form_row input:valid + .label-name { background-color: #fff; } .loan_form_row input:focus, .loan_form_row input:hover { border: 2px solid #f2f3f5; } .loan_form_row { margin-bottom: 15px; } .payment_value_block h2 { color: #1c5631; padding-bottom: 20px; border-bottom: 1px dotted; text-align: left; } .payment_value_block h2 small { font-size: 18px; font-weight: 500; } .interest_rate_holder label { font-size: 12px; color: #000; } .interest_rate_holder { position: relative; width: 82px; } .input_calculate_rate input[type="text"] { padding: 5px; border: 0; height: 30px; width: 50px; padding-right: 14px; } .input_calculate_rate span { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 13px; } .input_calculate_rate { width: 47px; position: relative; } .reload_interest { background: transparent; border: 0; position: absolute; right: 3px; top: 64%; transform: translateY(-50%); height: 22px; } .LoanEmiForm_bottomContainer { background: #FFFFFF; padding: 10px; font-size: 12px; position: absolute; bottom: 0; left: 0; border-top: 1px solid #dedede; } .LoanEmiForm_bottomContainer sup { top: -5px; } .loan_breakup { background: transparent; border: 0; color: #1c5631; font-size: 14px; font-weight: 600; margin-top: 15px; } .loan_breakup:hover { text-decoration: underline; } .payment_value_block { padding: 50px; } .loan-calculator-block .row { align-items: inherit; } .emi_calculator_full { -webkit-box-shadow: 0 5px 13px rgb(0 0 0 / 12%); -moz-box-shadow: 0 5px 13px rgb(0 0 0 / 12%); -ms-box-shadow: 0 5px 13px rgb(0 0 0 / 12%); -0-box-shadow: 0 5px 13px rgb(0 0 0 / 12%); box-shadow: 0 5px 13px rgb(0 0 0 / 12%); border-radius: 10px; } .payment_value_block { padding: 25px; height: 100%; border-left: 1px solid #dedede; position: relative; } .max-emi { width: 50%; } .loan-calculator-block .max-emi p { text-align: left; font-size: 15px; margin-bottom: 0; font-weight: 500; } .interesty_btn_holder { display: flex; } .loan_breakup svg { vertical-align: -1px; margin-right: 2px; } @media only screen and (max-width:991px) { .LoanEmiForm_bottomContainer { position: static; margin-top: 30px; } .loan-calculator-block .left-block { padding-right: 15px !important; } .loan-calculator-block .right-block { padding-left: 15px !important; } .payment_value_block { border-left: 0; } } @media only screen and (max-width:575px) { .loan-calculator-block .left-block { padding: 0 15px; } .loan-calculator-block .right-block { padding: 0 15px; } .loan-calculator-block .row { box-shadow: none; } .loan-calculator-inner { padding: 30px 10px; } .payment_value_block { padding: 0 10px; } .loan-calculator-block .nav-tabs .nav-link { font-size: 15px; } .loan-calculator-inner .checkmark { top: -2px; } .loan-calculator-block .nav-tabs { padding-top: 15px; } .LoanEmiForm_bottomContainer { margin: 0px -10px } } /* loan breakup modal */ .loan_breakup_modal .modal-header .close { padding: 0; margin: 0; } .loan_breakup_modal .modal-title { color: #000; font-weight: 600; letter-spacing: 0; font-size: 18px; } .loan_breakup_modal .modal-content { padding: 0; } .loan_breakup_modal .graph { margin: 0 auto 50px; width: 350px; } .loan_breakup_modal .graph img { width: 100%; } .loan_breakup_modal .modal-dialog { max-width: 740px; } .loan_breakup_modal .modal-body { padding: 30px 0 0; } .amount_calc_row { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; } .amount_calc_row p { margin: 0; font-size: 15px; font-weight: 600; } .amount_calc_row h4 { margin: 0; font-size: 16px; font-weight: 600; } .amount_total_payale { display: flex; align-items: center; justify-content: space-between; background: #efefef; padding: 14px 10px; border-radius: 0 0 10px 10px; } .amount_total_payale p { margin: 0; font-size: 16px; font-weight: 700; } @media only screen and (max-width:480px) { .loan_breakup_modal .graph { width: 250px; } .amount_calc_row p { font-size: 13px; } .amount_calc_row h4 { font-size: 14px; } .amount_total_payale p { font-size: 14px; } } /* profile page new design */ /* pfofile header */ .dashbrd_tggle_btn { width: 24px; min-width: 24px; display: none; } .dashbrd_tggle_btn a { display: block; width: 34px; text-align: right; font-size: 26px; color: #fff; background: #1C5631; padding-right: 6px; border-radius: 0 4px 4px 0; } .header_left { display: flex; justify-content: space-between; align-items: center; width: 317px; min-width: 317px; border-right: 1px solid #707070; padding-top: 30px; } .header_left .logo { width: 60px; } .header_right { width: calc(100% - 400px); } .header_right .language button, .header_right .language a { font-size: 14px; line-height: 22px; color: #000000; border: none; padding: 0px; background-color: transparent; cursor: pointer; text-decoration: underline; } .header_outer_dashboard .header_inner { padding-right: 8%; } .header_outer_dashboard .navbar-nav .nav-link { color: #000; font-size: 14px; font-weight: 500; text-transform: uppercase; margin: 0 20px; position: relative; padding-left: 0; padding-right: 0; } .header_outer_dashboard .navbar-nav .nav-link:hover { color: #1c5631; font-weight: 600; } .header_outer_dashboard .navbar-nav .nav-link:before { content: ''; display: inline-block; height: 3px; position: absolute; bottom: 3px; left: 50%; right: 50%; opacity: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #1c5631; } .header_outer_dashboard .navbar-nav .nav-link:hover::before, .header_outer_dashboard .navbar-nav .nav-link.active::before { opacity: 1; left: 0; right: 0; } .header_outer_dashboard .navbar-nav li:last-child .nav-link { margin-right: 0px; } .header_outer_dashboard nav { padding: 0; } .header_outer_dashboard .navbar-nav { margin-left: auto; } .header_outer_dashboard .navbar-toggler { display: none; } @media only screen and (max-width:1440px) { .header_outer_dashboard .header_inner { padding-right: 10px; } } @media only screen and (max-width:991px) { .header_outer_dashboard .header_inner { padding-right: 0; } .header_outer_dashboard .header_left { width: 150px; min-width: 150px; border-right: 0; padding: 10px 0px; } .header_outer_dashboard { border-bottom: 1px solid #707070; padding: 0px; position: relative; } .dashbrd_tggle_btn { display: block; } .header_outer_dashboard .navbar-nav .nav-link { font-size: 13px; margin: 0px 10px; } .header_right { width: auto; } .header_right .language { margin-right: 50px; } } @media only screen and (max-width:575px) { .header_outer_dashboard .navbar-toggler { display: block; } .header_right .language { padding: 0px 30px; } .header_outer_dashboard nav { position: absolute; left: 0; right: 0; top: 100%; background-color: #1c5631; z-index: 9; } .header_outer_dashboard .nav-item { border-bottom: 1px solid #1a4a2b; padding: 0px 15px; } .header_outer_dashboard .navbar-nav .nav-link { font-size: 14px; color: #fff; margin: 0px; } .header_outer_dashboard .navbar-nav .nav-link:hover { color: #fff; } .header_outer_dashboard .navbar-toggler { background-color: transparent; border: 1px solid transparent; padding: 6px 9px; position: relative; width: 45px; height: 40px; z-index: 2; } .header_outer_dashboard .navbar-toggler i { position: absolute; margin-top: 10px; left: 9px; top: 0; width: 60%; height: 3px; background: #1C5631; opacity: 1; transition: background-color .35s, opacity 175ms cubic-bezier(.215, .61, .355, 1), -webkit-transform 175ms cubic-bezier(.215, .61, .355, 1); transition: background-color .35s, transform 175ms cubic-bezier(.215, .61, .355, 1), opacity 175ms cubic-bezier(.215, .61, .355, 1); transition: background-color .35s, transform 175ms cubic-bezier(.215, .61, .355, 1), opacity 175ms cubic-bezier(.215, .61, .355, 1), -webkit-transform 175ms cubic-bezier(.215, .61, .355, 1); -webkit-transform: translateY(0) translateZ(0); transform: translateY(0) translateZ(0); } .header_outer_dashboard .navbar-toggler i:nth-child(1) { top: 0; } .header_outer_dashboard .navbar-toggler i:nth-child(2) { top: 8px; } .header_outer_dashboard .navbar-toggler i:nth-child(3) { top: 16px; } .header_right .language { margin-right: 25px; } .header_right .language { padding: 0px 15px; border-bottom: 1px solid #1a4a2b; } .header_right .language button, .header_right .language a { font-size: 13px; line-height: 20px; padding: 0.5rem 0px; margin: 0px; color: #FFF; } } /* pofile left pannel */ .dashbord_left_panel { width: 332px; height: 100%; position: fixed; top: 100px; left: 0; transition: 0.3s ease; overflow: hidden; border-right: 1px solid #707070; } .user_outer { display: flex; padding: 15px; max-width: 260px; border-radius: 10px; background: #1C5631; margin: 20px 15px 35px; } .user_inner { width: 80%; } .user_inner h3 { font-size: 24px; color: #fff; font-family: 'Roboto', sans-serif; font-weight: 400; text-transform: none; } .user_inner h3 span { display: block; font-size: 16px; line-height: 24px; } .user_inner a { font-size: 12px; color: #fff; font-family: 'Roboto', sans-serif; font-weight: 400; } .user_inner a span { font-size: 16px; vertical-align: middle; } .progress_pie h6 { font-size: 10px; color: #fff; text-align: center; font-family: 'Roboto', sans-serif; font-weight: 400; } .progress-circle { position: relative; display: inline-block; width: 50px; height: 50px; border-radius: 50%; background-color: transparent; z-index: 2; } .progress-circle:after { content: ''; display: inline-block; width: 100%; height: 100%; border-radius: 50%; -webkit-animation: colorload 2s; animation: colorload 2s; } .progress-circle span { font-size: 13px; color: #fff; font-weight: 700; font-family: 'Roboto', sans-serif; position: absolute; left: 50%; top: 50%; display: block; width: 40px; height: 40px; line-height: 45px; margin-left: -20px; margin-top: -20px; text-align: center; border-radius: 50%; background: #1C5631; z-index: 1; } .progress-circle span:after { content: "%"; font-weight: 600; color: #fff; } .progress-circle.progress-67:after { background-image: linear-gradient(270deg, #fff 50%, transparent 50%, transparent); } .progress-circle:before { content: ""; border: 1px solid #FFFFFF; position: absolute; width: 94%; height: 94%; border-radius: 50%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; } @keyframes colorload { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .dashbord_left_panel .apply-loan-outer { max-width: 260px; margin: 20px 15px 15px; } .dashbord_left_panel .apply-loan { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; border-radius: 10px; padding: 15px; background: #1C5631; font-size: 16px; line-height: 22px; color: #FFF; } .dashbord_left_panel .apply-loan:hover { text-decoration: none; } .dashbord_left_panel .side_menu { border-bottom: 1px solid #707070; border-top: 1px solid #707070; flex-wrap: wrap; max-height: calc(100% - 267px); overflow-x: hidden; overflow-y: auto; } .dashbord_left_panel .side_menu li { width: 100%; } .dashbord_left_panel .side_menu li + li { border-top: 1px solid #707070; } .dashbord_left_panel .side_menu a { margin-bottom: 0; border: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding: 20px 30px; display: flex; align-items: center; font-size: 16px; color: #000; font-family: 'Roboto', sans-serif; position: relative; } .dashbord_left_panel .side_menu a span { width: 20px; margin-right: 12px; } .dashbord_left_panel .side_menu a:hover { color: #000; border: none; background-color: #F8F8F8; text-decoration: none; } .dashbord_left_panel .side_menu a.active { color: #000; border: none; background-color: #F8F8F8; } .dashbord_left_panel .side_menu a.active:after { left: 0; width: 10px; border-radius: 0 7px 7px 0; position: absolute; content: ''; height: 100%; background-color: #1C5631; } .dashbord_left_panel .side_menu a:hover:after { left: 0; width: 10px; border-radius: 0 7px 7px 0; position: absolute; content: ''; height: 100%; background-color: #1C5631; } /* profile right pannel */ .dashboard_rightpnnl { margin-left: 332px; background-color: #fff; transition: 0.3s ease; padding: 20px 8% 0px 25px; height: 100%; } .dashbord_outer { height: calc(100vh - 100px); } .dashboard_rightpnnl .my_loans { height: calc(100vh - 280px); } .dashboard_footer { padding: 40px 0px 20px; } .dashboard_footer p { font-size: 16px; line-height: 22px; text-align: right; color: #1C5631; margin: 0px; } .dashboard_footer img { display: inline-block; vertical-align: middle; } .dashboard_top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 60px; } .dashboard_breadcrumb .breadcrumb { padding: 0px; margin-bottom: 0; background-color: #fff; border-radius: 0; } .dashboard_breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #000; content: ">"; font-size: 16px; font-weight: 400; line-height: 100%; } .dashboard_breadcrumb .breadcrumb li a { font-size: 12px; font-family: 'Roboto', sans-serif; text-transform: uppercase; } .dashboard_breadcrumb .breadcrumb li a:hover { text-decoration: none; } .dashboard_breadcrumb .breadcrumb li { font-size: 12px; font-family: 'Roboto', sans-serif; text-transform: uppercase; } .dashboard_breadcrumb .breadcrumb-item.active { font-weight: 600; color: #1C5631; } .logout a { font-size: 14px; color: #000; font-family: 'Roboto', sans-serif; } .logout a span { font-size: 22px; margin-right: 10px; vertical-align: middle; color: #1C5631; } .logout a:hover { color: #1C5631; text-decoration: none; } @media only screen and (max-width:1440px) { .dashboard_rightpnnl { padding: 20px 25px 0px 25px; } } @media only screen and (max-width:991px) { .dashbord_outer { height: calc(100vh - 171px); } .dashbord_left_panel .side_menu { max-height: calc(100% - 252px); } .dashbord_left_panel .side_menu a { padding: 15px 30px; } .dashboard_rightpnnl { margin-left: 0; } .dashboard_footer { z-index: 7; } .dashboard_top { margin-bottom: 25px; } .dashbord_left_panel { position: fixed; left: 0; width: 290px; background-color: #fff; transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0); z-index: 100; margin-right: 0; overflow: visible; height: 100vh; top: 0px; } .dashbrd_tggle_btn { display: block; position: absolute; right: -25px; top: 50%; cursor: pointer; } .dashbord_left_panel.bar_only { transform: translate(0, 0); } .dashboard_footer { height: auto; padding: 25px 15px; } .dashbord_left_panel .apply-loan-outer { margin-bottom: 20px; } .dashboard_rightpnnl .my_loans { height: auto; } } /* profile part */ .profile_head { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-bottom: 2px solid #E2E2E2; } .profile_head h3 { font-size: 24px; color: #000; margin-bottom: 0; font-weight: 600; font-family: 'Roboto', sans-serif; text-transform: capitalize; opacity: 0.6; } .profile_head .edit_info a { font-size: 16px; color: #000; font-family: 'Roboto', sans-serif; opacity: 0.6; } .profile_head .edit_info a:hover { color: #1C5631; opacity: 1; text-decoration: none; } .edit_info p { font-size: 12px; color: #D86B76; font-family: 'Roboto', sans-serif; margin: 0; } .profile_head .save { padding: 8px 22px; background-color: #1C5631; border-radius: 5px; font-size: 16px; line-height: 22px; color: #fff; text-transform: capitalize; } .profile_head .save:hover { background-color: #0d953e; color: #fff; text-decoration: none; } .profile_details { border: 2px solid #E2E2E2; border-radius: 10px; background: #f8f8f8; } .profile_body { padding: 20px; height: calc(100vh - 378px); } .profile_body .form-group { display: flex; flex-flow: wrap; flex-direction: row; position: relative; margin-bottom: 0; padding-right: 30px; } .profile_body .form-group label { font-family: 'Roboto', sans-serif; padding: 0; } .profile_body .form-group input { width: 100%; height: 27px; border-radius: 0; padding: 0; font-size: 18px; line-height: 22px; color: #313131; font-family: 'Roboto', sans-serif; outline: none !important; box-shadow: none !important; border: 0; border-bottom: 2px solid #dedede; font-weight: 500; } /* .form-group input#datepicker { background-image: url('../images/calender.svg'); background-repeat: no-repeat; background-position: right center; background-size: 20px; padding-right: 24px; } */ .profile_body [class*=col-] { margin-bottom: 30px; } .profile_body .dob_block { display: flex; max-width: 75%; flex-wrap: wrap; } .profile_body .form-group .dob_block input { width: 31%; text-align: center; } .profile_inner { overflow-y: auto; display: block; height: 100%; padding: 0 15px; margin: 0 -15px; } @media only screen and (max-width:1440px) { .profile_body .dob_block { max-width: 80%; } } @media only screen and (max-width:1365px) { .form_row_details { width: 91%; } .profile_body .form-group { padding-right: 0px; } .profile_body .form-group .dob_block input { width: 29%; } } @media only screen and (max-width:991px) { .dashbord_outer { height: auto; } .profile_body { padding: 20px; height: auto; } } @media only screen and (max-width:575px) { .profile_head h3 { font-size: 20px; } .profile_body { padding: 20px 10px; } .profile_body [class*=col-] { margin-bottom: 20px; } .edit_info { width: 100%; margin-top: 5px; } .profile_inner { margin: 0 -10px; } .profile_body .form-group input { font-size: 16px; } .dashboard_footer p { font-size: 14px; line-height: 20px; } } @media only screen and (max-width:375px) { .profile_head { flex-wrap: wrap; } .profile_head .save { margin-top: 10px; } } .loan_details_holder { padding: 27px 20px; background: #F8F8F8; height: 100%; border-radius: 0 10px 10px 10px; } .loan_details_holder.box-border { border: 2px solid #E2E2E2; border-radius: 10px; } .loan_details_holder .tab-content { height: 100%; overflow: auto; margin: 0 -15px; } .loan_details_holder .tab-pane { padding: 0 15px; } .loan_body .tab-content [class*=col-] { margin-bottom: 20px; } .loan_item { border-radius: 10px; border: 1px solid #E3E3E3; padding: 15px 13px; background: #fff; } .loan_head { display: flex; justify-content: space-between; margin-bottom: 20px; } .loan_item .loan_head { margin-bottom: 0px; } .loan_head.due-popup { background-color: rgba(212, 91, 103, 0.1); padding: 30px; align-items: center; margin: 0px; } .loan_number { text-align: center; max-width: 49%; } .loan_number span { display: block; font-size: 12px; color: #000; font-family: 'Roboto', sans-serif; } .loan_number figure { width: 50px; display: inline-block; margin: 0; } .loan_head h4 { color: #000; font-size: 16px; font-weight: 400; text-transform: none; margin-bottom: 0; font-family: 'Roboto', sans-serif; line-height: 20px; } .loan_head h4 span { display: block; } .loan_amount_outer { display: flex; justify-content: space-between; align-items: end; } .loan_amount_outer h3 { font-size: 22px; line-height: 1.1; color: #313131; font-weight: 500; margin-bottom: 0; text-transform: none; font-family: 'Roboto', sans-serif; } .loan_amount_outer h3 span { display: block; font-size: 14px; font-weight: 400; color: #707070; margin-bottom: 5px; } .view_more_btn { border-radius: 5px; background: transparent; border: 1px solid #1C5631; font-size: 13px; color: #1C5631; font-family: 'Roboto', sans-serif; line-height: 20px; padding: 6px 16px; text-align: center; } .view_more_btn:hover { background-color: #1C5631; color: #fff; } .loan_head h3 { font-size: 24px; color: #000; margin-bottom: 0; font-weight: 600; font-family: 'Roboto', sans-serif; text-transform: capitalize; opacity: 0.6; } .total_due { text-align: right; } .total_due h6 { font-size: 14px; color: #000; font-weight: 400; margin-bottom: 5px; opacity: 0.7; font-family: 'Roboto', sans-serif; } .total_due h2 { font-size: 34px; font-weight: 600; color: #D45B67; } .loan_body { height: calc(100vh - 355px); } .nav-tabs { border-bottom: 0; } .nav-tabs .nav-link.active { color: #474747; border: 1px solid transparent; background-color: #F8F8F8; } .nav-tabs .nav-link { margin-bottom: -1px; font-size: 16px; font-family: 'Roboto', sans-serif; font-weight: 500; color: #474747; border: 1px solid #D5D5D5; border-bottom: 1px solid transparent; } .nav-tabs .nav-link:hover { border: 1px solid #D5D5D5; border-bottom: 1px solid transparent; } .status { text-align: right; } .status span { font-size: 14px; font-family: 'Roboto', sans-serif; } .review { height: 24px; line-height: 24px; border-radius: 5px; text-align: center; color: #000; font-family: 'Roboto', sans-serif; min-width: 95px; background: #FBCC71; } .loan_details_holder .due-list { overflow-x: hidden; overflow-y: auto; height: 100%; } .loan_details_holder .due-list li { display: flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; align-items: center; background-color: #FFFFFF; border: 1px solid #E3E3E3; border-radius: 10px; padding: 16px; margin-bottom: 16px; } .loan_details_holder .due-list li:last-child { margin-right: 0px; } .loan_details_holder .due-list h6 { font-size: 16px; line-height: 22px; color: #000000; text-transform: capitalize; } .loan_details_holder .due-list span { font-size: 12px; line-height: 14px; color: #707070; text-transform: capitalize; } .loan_details_holder .due-list h4 { font-size: 22px; line-height: 28px; color: rgba(216, 107, 118, 0.7); font-weight: 500; margin: 0px; } .loan_details_holder .due-list button { background-color: #1C5631; border: none; border-radius: 5px; font-size: 13px; line-height: 20px; color: #FFFFFF; padding: 12px 33px; cursor: pointer; } .loan_details_holder .due-list .progress_pie { background-color: #F3F3F3; display: inline-flex; align-items: center; border-radius: 10px; padding: 4px 10px; margin-right: 10px; font-size: 14px; line-height: 20px; color: #000000; } .loan_details_holder .due-list .progress-circle { margin-right: 6px; } .loan_details_holder .due-list .progress-circle:after { background-image: linear-gradient(270deg, transparent 50%, #1C5631 50%, #1C5631); } .loan_details_holder .due-list .progress-circle:before { border-color: #a6bfae; } .loan_details_holder .progress-circle span { background-color: #F3F3F3; line-height: 40px; text-align: center; font-size: 16px; font-weight: 700; color: #000; } .loan_details_holder .progress-circle span:after { display: none; } @media only screen and (max-width:991px) { .loan_body { height: auto; } .loan_details_holder { height: auto; } .total_due h2 { font-size: 28px; } } @media only screen and (max-width: 767.98px) { .loan_details_holder .due-list li { padding: 0px; overflow: hidden; } .loan_details_holder .due-list h6 { width: 100%; padding: 16px 16px 8px; } .loan_details_holder .due-list li > div { max-width: 49%; margin: 0px 15px; } .loan_details_holder .due-list button { width: 100%; text-align: center; margin-top: 16px; border-radius: 0px; padding: 10px; } } @media only screen and (max-width:480px) { .dashboard_rightpnnl { padding: 20px 15px 0px; } .loan_details_holder { padding: 20px 15px; } .loan_head h4 { font-size: 14px; } .loan_amount_outer h3 { font-size: 16px; } .loan_head h3 { font-size: 20px; } .total_due h2 { font-size: 22px; } .loan_body .tab-content [class*=col-] { margin-bottom: 15px; } } /* loan modal */ .loan_modal .modal-content { background: #F8F8F8; position: relative; padding: 0; } .loan_modal .modal-dialog { width: 94%; max-width: 550px; } .loan_modal .modal-body .loan_head h4 { font-size: 18px; line-height: 24px; } .loan_modal .modal-body .due-popup h4 { font-size: 16px; line-height: 22px; color: #000000; } .loan_modal .modal-body { padding: 25px; background: #F8F8F8; border-radius: 10px; overflow-x: hidden; overflow-y: auto; height: 90vh; max-height: 610px; } .loan_modal .modal-body.no-padding { padding: 0px; overflow: hidden; } .loan_modal .loan_head figure { width: 100px; } .loan_modal .due-popup h6 { font-size: 16px; line-height: 22px; color: rgba(0, 0, 0, 0.5); } .loan_modal .modal-body .loan_number span { font-size: 22px; } .loan_modal .modal-body .loan_amount_outer h3 span { font-size: 12px; } .loan_modal .modal-body .loan_amount_outer h3 { font-size: 24px; color: #D45B67; margin-top: 20px; } .loan_modal .modal-body .due-popup h3 { font-size: 30px; line-height: 36px; color: rgba(212, 91, 103, 0.9); text-align: right; opacity: 1; } .loan_modal .modal-body .due-popup h3 span { font-size: 14px; line-height: 20px; color: #101010; font-weight: 400; } .loan_modal .modal-body .loan_amount_outer { display: block; max-width: 49%; } .loan_accordian .card { background-color: #fff; border-radius: 8px !important; } .loan_accordian > .card:not(:last-of-type) { border-bottom: 1px solid #E3E3E3; } .loan_accordian .card-header { padding: 0; background-color: transparent; border-bottom: 0; } .loan_accordian .card + .card { margin-top: 20px; } .loandetails_row { display: flex; justify-content: space-between; align-items: center; padding-bottom: 5px; border-bottom: 1px solid #E3E3E3; margin-bottom: 10px; } .loandetails_row:last-child { padding-bottom: 0px; border-bottom: 0; margin-bottom: 0px; } .loandetails_row label { font-size: 14px; font-family: 'Roboto', sans-serif; } .loandetails_row p { font-size: 14px; margin-bottom: 0; font-family: 'Roboto', sans-serif; } .loan_accordian .card-header .btn-link { font-weight: 600; color: #000; font-size: 16px; position: relative; padding: 10px 20px; font-family: 'Roboto', sans-serif; } .loan_accordian .card-header .btn-link:hover { text-decoration: none; } .loan_accordian .card-header .btn-link:after { content: '\f139'; font-size: 18px; color: #1C5631; font-family: 'Font Awesome 5 Free'; font-weight: 600; position: absolute; right: 20px; top: 9px; } .loan_accordian .card-header .btn-link.collapsed:after { content: '\f13a'; } .loan_modal button.close { background: #373737; color: #aaaaaa; border-radius: 0 20px 20px 0; top: 50%; right: -45px; width: 140px; height: 44px; line-height: 44px; text-align: right; padding-right: 15px; transform: translateY(-50%); font-size: 14px; font-weight: 400; font-family: 'Roboto', sans-serif; -webkit-text-shadow: none; -moz-text-shadow: none; text-shadow: none; letter-spacing: 1px; display: inline-block; vertical-align: middle; -webkit-transition: 0.3s linear all; -moz-transition: 0.3s linear all; transition: 0.3s linear all; } .loan_modal button.close span { margin-left: 20px; font-size: 40px; font-weight: 300; color: #FFFFFF; line-height: 36px; display: inline-block; vertical-align: top; } .loan_modal button.close:hover { right: -116px; } .emi_box { margin-bottom: 25px; } .emi_box.due-box { padding: 30px; margin-bottom: 0px; } .emi_row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #E3E3E3; padding-bottom: 5px; } .emi_row label { font-size: 12px; color: #313131; font-family: 'Roboto', sans-serif; text-transform: capitalize; } .emi_row p { font-weight: 600; color: #000; font-size: 16px; position: relative; font-family: 'Roboto', sans-serif; margin: 0; } .emi_row p span { font-weight: 400; font-size: 12px; } .emi_row + .emi_row { margin-top: 10px; } .red_color { color: #D45B67 !important; } .dark_green_color { color: #1C5631 !important; } .emi_box.due-box h6 { font-size: 16px; line-height: 22px; color: #000000; font-weight: 600; margin-bottom: 16px; } .emi_box.due-box .payment { background-color: #1C5631; border: none; border-radius: 5px; padding: 10px 50px; font-size: 16px; line-height: 22px; color: #FFFFFF; display: block; margin: 20px auto 0px; cursor: pointer; } .emi_box.due-box .emi_row:last-of-type { border: none; } .loan_modal .buttons { display: inline-flex; flex-flow: wrap; flex-direction: row; justify-content: space-between; width: 100%; margin-top: 20px; } .loan_modal .buttons button, .loan_modal .buttons a { display: inline-block; vertical-align: middle; width: 48%; border: none; font-size: 15px; line-height: 22px; font-weight: 500; padding: 10px; background-color: #FFFFFF; border-radius: 6px; } .loan_modal .buttons button.download, .loan_modal .buttons a.download { color: #000000; } .loan_modal .buttons button.payment, .loan_modal .buttons a.payment { background-color: #1C5631; color: #FFFFFF; } .loan_modal .buttons button img, .loan_modal .buttons a img { display: inline-block; vertical-align: middle; max-height: 100%; margin-right: 8px; } @media only screen and (max-width:767px) { .loan_modal button.close { border-radius: 50%; height: 36px; text-align: center; justify-content: center; padding-right: 5px; top: 0px; right: 0; font-size: 0; width: 36px; padding: 0px; text-align: center; z-index: 9; } .loan_modal button.close span { margin-left: 0; width: 100%; font-size: 30px; line-height: 32px; position: absolute; left: 1px; } .loan_modal button.close:hover { right: 0px; } .loan_modal .modal-body { padding: 20px; } .loan_head.due-popup { padding: 20px; } .loan_modal .modal-body .due-popup h3 { font-size: 24px; line-height: 30px; } .loan_modal .due-popup h6 { font-size: 14px; } .emi_box.due-box { padding: 20px; } .loan_modal .modal-body .loan_number span { font-size: 16px; margin-bottom: 5px; } .loan_modal .modal-body .loan_amount_outer h3 { margin-top: 12px; } .loan_modal .modal-body .loan_head h4 { font-size: 16px; line-height: 22px; } } @media only screen and (max-width:575px) { .loan_modal .buttons button, .loan_modal .buttons a { width: 49%; font-size: 13px; line-height: 20px; padding: 10px; } .loan_modal .buttons button img, .loan_modal .buttons a img { max-height: 20px; } } @media only screen and (max-width:479px) { .loan_modal .buttons button, .loan_modal .buttons a { width: 100%; } .loan_modal .buttons button.payment, .loan_modal .buttons a.payment { margin-top: 12px; } } .progress { width: 50px; height: 50px; font-size: 30px; color: #fff; border-radius: 50%; position: relative; background: #F3F3F3; border: 1px solid #a6bfae; text-align: center; line-height: 50px; margin-right: 6px } .progress .title { position: relative; z-index: 100; } .progress .overlay { width: 50%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-color: #F3F3F3; } .progress .left, .progress .right { width: calc(50% + 2px); height: calc(100% + 2px); position: absolute; top: -2px; left: -2px; border: 4px solid #1C5631; border-radius: 100px 0px 0px 100px; border-right: 0; transform-origin: right; } .progress .left { animation: load1 1s linear forwards; } .progress:nth-of-type(2) .right, .progress:nth-of-type(3) .right { animation: load2 .5s linear forwards 1s; } .progress:last-of-type .right, .progress:first-of-type .right { animation: load3 .8s linear forwards 1s; } @keyframes load1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } @keyframes load2 { 0% { z-index: 100; transform: rotate(180deg); } 100% { z-index: 100; transform: rotate(270deg); } } @keyframes load3 { 0% { z-index: 100; transform: rotate(180deg); } 100% { z-index: 100; transform: rotate(315deg); } }