html {scroll-behavior: smooth;}
* {margin:0px; padding:0px; box-sizing: border-box; font-family: "Roboto", sans-serif;}
.mr-t-8 {margin-top:8px !important;} .mr-t-16 {margin-top: 16px;} .mr-r-4 {margin-right:4px;} .mr-t-0 {margin-top:0px !important;} .mr-b-8 {margin-bottom:8px !important;} .mr-b-12 {margin-bottom:12px !important;} .mr-b-16 {margin-bottom: 16px;} .mr-t-24 {margin-top: 24px;} .mr-b-24 {margin-bottom: 24px;} .mr-t-32 {margin-top: 32px;}
.pd-l-10 {padding-left:10px !important;} .pd-l-16 {padding-left:16px !important;} .pd-l-24 {padding-left:24px !important;} .pd-l-32 {padding-left:32px !important;}
body {color: #000; background-color: #fff; overflow-x: hidden;}
header {width: 100%; height: auto; position:sticky; top: 0; display: flex; justify-content: center; z-index:99; padding:0px 0px 0px 16px; background-color:#355454; background-color:#0f4180; box-shadow:0px 1px 10px #103939;}
header nav .logo-container a {position:relative; color:#fff; text-decoration:none; float:left; padding:10px 8px 14px 8px; border: none; outline: none;}
header nav .logo-container a img {height:32px;}
header nav .logo-container a span.logoTag {position:absolute; bottom:0px; width:100%; left: 62px; font-size:12px;}
header nav {width: 100%; display: flex; justify-content: space-between;}
header nav ul li{list-style: none; float: left; margin-right: 1px;}
header nav ul li a {text-decoration: none; position:relative; color: #fff; padding:24px 16px; transition: 1s; display: inline-block; font-size: 14px; text-transform: uppercase;}
header nav ul li a.quickContact {border:solid 1px #fff;}
/* header nav ul li a.active {background-color: #227b94; color: #ffe427;} */
header nav ul li a:hover {background-color: #fff; color: #333;}
header nav div.m-navigatior {display: none;}
header nav .contact-text {padding:8px 16px; color:#fff; display: block;}
header nav .contact-text span {display:block; margin-top:4px; white-space:nowrap; color: #fff;}
header nav .contact-text span i {font-size:16px; margin-right:4px; color: #fff;}
header nav .contact-text {padding:8px 16px; color:#fff;}
.home-section {width:100%; height:calc(100vh - 60px); float:left; background-color:#fff; position: relative; display: flex; padding:50px; justify-content: space-between; align-items: center; overflow: hidden;}
.home-section .icon-container {font-size:280px; color:#000;  position:fixed; top:50%; left:50%; transform: translate(-50%, -50%); scale: 1;}
.home-section .icon-container i {opacity: 1;}
.home-section .banner-img {position: relative; animation: bannerAnimateUpDown 5s infinite linear;}
.home-section .banner-img img {height:250px;}
.home-section .banner-text {max-width:40%; height: auto; margin-bottom:70px; padding-right: 32px;}
.home-section .banner-text h1 {color:#0f4180; font-size:22px; line-height: 28px; margin:8px 0px; animation: slideLeft 1.5s ease forwards; animation-delay: 3s; text-transform: uppercase;}
.home-section .banner-text h1 .dark-orange {color:#ff5e00;}
.home-section .banner-text p.berief-text {color: #333; font-size:16px; line-height: 24px; margin:16px 0px; animation: slideRight 2s ease forwards; animation-delay: 3s;}
.home-section .banner-text button {animation: slideTop 1s ease forwards; animation-delay: 3s;}
/* .animatedBoxfadeOut {width: 100vw; height: 100vh; position: fixed; top:0; left: 0; animation: fadeOut 6s linear forwards; background-color: #fff; z-index:9; display: none;} */
.welcome-msg {width: 100vw; height: 100vh; position: fixed; top:0; left: 0; background-color:#081b29; display:flex; flex-direction: column; justify-content: center; align-items: center; z-index:9999; animation: welcomeNotes 4s linear forwards; overflow: hidden;}
.welcome-msg p .welcome-icon{font-size:94px; color: #fff; position: relative; animation: upDownAnimate 2s infinite; display:block; text-align:center;}
.welcome-msg p .welcome-icon i {position: relative; top:-20px;}
.welcome-msg p {animation: welcomeNotestext 2s; position: relative; margin-top:16px; font-size: 30px; font-style: italic; text-align: center; color:#fff;}
.welcome-msg p .logo-container {position:relative; font-size:74px; letter-spacing:2px; display:block; margin-top:8px; margin-left:8px; font-weight:600;}
.welcome-msg p .logo-container span.logoTag {position:absolute; bottom:-6px; width:100%; left:110px; font-size:20px;}
.welcome-msg p .logo-container img {height:80px;}
.welcome-msg p .dot-container {font-size: 16px;}
.welcome-msg p .dot-container .dot-1 {animation:blinking 0.8s linear infinite; color: #FF6600;}
.welcome-msg p .dot-container .dot-2 {animation:blinking 1s linear infinite; color: #fff; margin:0 8px;}
.welcome-msg p .dot-container .dot-3 {animation:blinking 1.5s linear infinite; color: #6EC207;}

/* EMI Calculator Class start from here */
.calculator-form {background-color:#f1f1f1; max-width:350px; position: relative; border-radius:8px;}
.calculator-form h2 {color:#fff; text-align: center; font-size:14px; text-transform: uppercase; letter-spacing:2px; font-weight: normal; padding:16px 12px;  background: #424242; border-radius:8px 8px 0px 0px;}
.calculator-form .inputFieldContainer {padding:0px 12px;}
.calculator-form label {font-size:13px; color:#333; margin-bottom:4px; margin-top:16px; text-transform: uppercase; display:inline-block;}
.calculator-form input {border:solid 1px #dcdcdc; outline: none; text-transform: uppercase; width:100%; padding:14px 10px; background: #fff; color:#333; font-size:13px; letter-spacing:0px; margin-bottom: 0.5rem; border-radius:4px;}
.calculator-form input::placeholder {color:#a7a7a7;}
.calculator-form p.totalEMI {text-transform: uppercase; padding:8px 0px;}
.calculator-form p.totalEMI #output {font-weight:bold; color:#0d407f;}
.calculator-form .calculate {display: inline-block; text-transform: uppercase; cursor: pointer; padding:14px 60px; width:100%; letter-spacing:2px; transition: 0.5s; background:#0f4180; font-size:16px; color: #fff; text-decoration: none; margin-top:24px; margin-bottom: 24px; border: solid 1px #0f4180;}
.calculator-form .calculate:hover {background-color:#ff5e00; border:solid 1px #ff5e00; color: #fff; cursor: pointer;}

/* Contact form calculator start from here */
.contact-form {background-color:transparent; box-shadow:0px 0px 10px #c5c5c5; padding:24px; max-width:350px; position: relative;}
.contact-form .form-icon-head {font-size:32px; color: #0f4180; position:absolute; left:50%; transform:translateX(-50%); top: -32px; background-color:#fff; box-shadow:0px -6px 4px #e6e6e6; height:60px; width:60px; text-align:center; border-radius: 50%; padding-top: 12px;}
.contact-form form h2 {color:#0f4180; text-align: center; font-size:16px; text-transform: uppercase; letter-spacing:1px;}
.contact-form form input, form textarea {border: solid 1px #333; outline: none; width:100%; padding:14px 10px; padding-left: 42px; background: #fff; color:#333; font-size:14px; letter-spacing: 1px; margin-bottom: 0.5rem; border-radius:4px;}
.contact-form form .input-group {position: relative; display: block;}
.contact-form form .input-group i {position: absolute; top:16px; left: 16px; color: #878787;}
.contact-form form input::placeholder, form textarea::placeholder {color: #8d8d8d;}
.contact-form textarea {resize: none; height:100px;}
.contact-form form .send {display: inline-block; cursor: pointer; padding: 14px 60px; width:100%; letter-spacing: 1px; transition: 0.5s; background:#0f4180; font-size: 18px; color: #fff; text-decoration: none; margin-top:8px; border: solid 1px #0f4180;}
.contact-form form .send:hover {background-color: #333; color: #fff; cursor: pointer;}

.services-form {background-color:transparent; border: solid 2px #333; padding:24px; max-width:350px; position: relative;}
.services-form form input, form textarea, form select {border: solid 1px #333; outline: none; width:100%; padding:14px 10px; padding-left: 42px; background: #fff; color:#333; font-size:14px; letter-spacing: 1px; margin-bottom: 0.5rem; border-radius:4px;}
.services-form form select {padding-left:10px !important;}
.services-form form .input-group {position: relative; display: block;}
.services-form form .input-group i {position: absolute; top:16px; left: 16px; color: #878787;}
.services-form form input::placeholder, form textarea::placeholder {color: #8d8d8d;}
.services-form textarea {resize: none; height:100px;}
.services-form form .send {display: inline-block; cursor: pointer; padding: 14px 60px; width:100%; letter-spacing: 1px; transition: 0.5s; background:#333; font-size: 18px; color: #fff; text-decoration: none; margin-top:8px; border: solid 1px #333;}
.services-form form .send:hover {background-color: #333; color: #fff; cursor: pointer;}
.btn-white-transparent {padding:12px 16px; width: auto; float: left; border:solid 2px #fff; border-radius: 4px; font-size: 14px; color: #fff; letter-spacing: 1px; cursor: pointer; background-color: transparent;}
.btn-white-transparent .icon-container {opacity: 0; font-size:0px; top:-1px; color: #fff; vertical-align: middle; position: relative; left:-10px; transition: 0.2s linear;}
.btn-white-transparent .icon-container i {opacity: 1;}
.btn-white-transparent:hover .icon-container {opacity: 1; left:5px; font-size:10px;}
.btn-secondary {padding:12px 16px; border:solid 1.5px #333; border-radius: 4px; text-decoration: none; display: inline-block; font-size: 14px; color: #333; cursor: pointer; background-color: transparent;}
.btn-secondary .icon-container {opacity: 0; font-size:0px; top:-1px; color: #333; vertical-align: middle; position: relative; left:-10px; transition: 0.2s linear;}
.btn-secondary:hover .icon-container {opacity: 1; left:5px; font-size:10px;}
section.about {width:100%; height:auto; padding: 32px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #0f4180; background-color:#ffeadd; float: left;  overflow: hidden;}
section.about .about-container {z-index:9; width:100%; text-align: left; display: flex; justify-content: center; align-items: center;}
section.about .about-container .img-container {width:40%; height:100%; background-color: #fff; display: flex; justify-content: center; align-items: center; padding: 100px 24px; border-radius: 62px 211px 62px 128px; border-bottom: 10px solid #ff5e00;}
section.about .about-container .img-container img {height:280px;}
section.about .about-container .text-container {width:100%; height:100%; padding:0 60px;}
section.about .about-container h2 {color:#0f4180; text-align: left;}
section.about .about-container p {color: #333; font-size: 16px; line-height: 24px; text-align: left;}
section.social {background-color:#ff5e00; padding:32px 8px; display: flex; justify-content: center; align-items: center; color: #fff;}
section.social .container h2 {font-size:16px; text-transform:uppercase; letter-spacing: 1.5px; font-weight: normal; padding-right:16px;}
section.social .container .left-section {display: inline-flex; width: auto; padding-right:64px; align-items:center;}
section.social .container .left-section .social-icon a {color: #fff;}
section.social .container .left-section .social-icon i {font-size:36px; margin-right: 16px; transition: 0.5s;}
section.social .container .left-section .social-icon i:hover {color: #fff; cursor: pointer; scale:1.2;}
section.social .container .right-section {display: inline-flex; width: auto; padding-left:64px; align-items: center;}
section.social .container .right-section .input-container {width:auto; min-width: 250px; position:relative;}
section.social .container .right-section .input-container input[type="email"] {width:calc(100% - 50px); height:40px; border: none; border: none; padding:0 10px; border-radius: 4px 0px 0px 4px;}
section.social .container .right-section .input-container input[type="email"]:focus {border: none; outline: none;}
section.social .container .right-section .input-container button#send {width: 50px; height: 40px; display: inline-block; transition: 0.5s; position: absolute; right: 0px; top:0px; background-color:#0a81a2; text-align: center; border: solid 1px #fff; color: #fff; border-radius: 0px 4px 4px 0px;}
section.social .container .right-section .input-container button#send:hover {cursor: pointer; opacity: 0.8;}
section.social .container .right-section .input-container button#send i {font-size: 20px;}
section.service {width: 100%; height:auto; position: relative; display: flex; justify-content: center; background-color: #fff; float: left; padding-bottom: 32px; overflow: hidden;}
section.service .container {width: 100%; text-align: center;}
section.service .container h2 {color: #227b94;}
section.service .container .box-container {width:100%; display:flex;}
section.service .container .box-container .box {width: 25%; min-height:300px; transition: 0.5s; height:auto; padding:32px; position: relative; background-color:#fff; border:solid 1px #ecf2f9;}
section.service .container .box-container .box:hover {transform: scale(1.01); background-color: #fff; box-shadow:0px 10px 10px #c8c8c8; z-index: 9;}
section.service .container .box-container .box.box-2 {background-color:#ecf2f9;}
section.service .container .box-container .box h3{color: #227B94;}
section.service .container .box-container .box p{color: #4c4c4c; font-size: 14px; margin-bottom: 16px;}
section.service .container .box-container .box a {padding:10px 16px; border: solid 1px #227b94; text-decoration: none; font-size: 14px; background-color: #227b94; color: #fff; display:inline-block; font-size: 14px; letter-spacing: 1px; border-radius:4px; margin: 0 auto;}
section.service .container .box-container .box a i {transform: rotate(90deg); margin-right:4px;}
section.service .container .box-container .box a:hover {background-color:#ff5e00; border:solid 1px #ff5e00;}
section.service .container .box-container .box a + .service-content-modal {opacity:0;  transform: scale(0); transition:0.5s; position: absolute; top:0; left: 0; background-color: #227b94; color:#fff; z-index:9; text-align: left; font-size: 12px; padding:12px 24px; box-shadow:0px 0px 10px #c8c8c8;}
section.service .container .box-container .box.box-2 a + .service-content-modal {background-color:#0f4180;}
section.service .container .box-container .box a + .service-content-modal .close-icon {position:absolute; right:12px; top:8px; font-size:20px; cursor:pointer;}
section.service .container .box-container .box a + .service-content-modal h2 {text-align: left; margin-bottom: 8px; color: #fff;}
section.service .container .box-container .box a + .service-content-modal div {margin-bottom:8px; font-size:13px; line-height: 20px;}
section.service .container .box-container .box a + .service-content-modal div ul {padding-left:22px; margin:0; padding-top:0px;}
section.service .container .box-container .box:has(a:focus) {z-index: 9;}
section.service .container .box-container .box a:focus + .service-content-modal {opacity:1; transform: scale(1);}
section.service .container .box-container .box .icon-container {display: inline-block; transition: 0.5s; background-color: #eef6ff; width:90px; height:90px; position:relative; border-radius: 50%; margin-bottom:24px;}
section.service .container .box-container .box.box-2 .icon-container {background-color: #fff;}
section.service .container .box-container .box .icon-container i {font-size:36px; color:#227B94; position:absolute; top:50%; left: 50%; transform: translate(-50%, -50%);}
section.service .container .button-container {display:flex; justify-content:center; margin-top:32px;}

section.blog {width: 100%; height: auto; position: relative; display: flex; background-color:#355454;}
section.blog .container {background-color:#355454;}
section.blog .container h2 {text-align: center; color: #fff;}
section.blog .container .slider-wrapper {overflow: hidden; max-width:100%; margin:52px 70px 120px 70px;}
section.blog .container .slider-wrapper .card-list .card-item {color: #fff; user-select: none; padding:35px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius:8px; backdrop-filter: blur(30px); background:rgba(255,255,255,0.2); border:solid 1px rgba(255,255,255,0.5) }
section.blog .container .slider-wrapper .card-list .card-item .user-image  {width: 150px; height:150px; border-radius: 50%; margin-bottom: 40px; border:solid 3px #fff; padding:4px;}
section.blog .container .slider-wrapper .card-list .card-item .user-profession {font-size:1.15rem; color:#e3e3e3; font-weight: 500; margin:14px 0 40px;}
section.blog .container .slider-wrapper .card-list .card-item .message-button {font-size: 1.25rem; padding:10px 35px; color:#fff; border-radius: 6px; font-weight: 500; cursor: pointer; background:transparent; border:1px solid #fff; transition:0.2s ease;}
section.blog .container .slider-wrapper .card-list .card-item .message-button:hover {background: rgba(255,255,255,0.1); border:solid 1px #fff; color: #fff;;}
section.blog .container .slider-wrapper .swiper-pagination-bullet {background:#fff; height:15px; width: 15px;}
section.blog .container .slider-wrapper .swiper-slider-button { color: #fff; transition: 0.2s;}
section.blog .container .slider-wrapper .swiper-slider-button:hover { color: #6b6b6b;}
section.blog .container .slider-wrapper .swiper-pagination {bottom: 40px;}

section.testimonial {width: 100%; height: auto; position: relative; display: flex; background-color:#355454; display: none;}
section.testimonial .container {background-color:#355454;}
section.testimonial .container h2 {text-align: center; color: #fff; text-transform: uppercase; letter-spacing: 1px;}
section.testimonial .container .slider-wrapper {overflow: hidden; max-width:100%; margin:52px 70px 120px 70px;}
section.testimonial .container .slider-wrapper .card-list .card-item {color: #fff; user-select: none; padding:0px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius:8px; min-height:300px; backdrop-filter: blur(30px); background:rgba(255,255,255,0.1); }
section.testimonial .container .slider-wrapper .card-list .card-item i.quote-left {position: absolute; left: 16px; top: 10px;font-size:24px;opacity: 0.8;}
section.testimonial .container .slider-wrapper .card-list .card-item i.quote-right {position: absolute;right: 16px;bottom: 10px;font-size:24px;opacity: 0.8;}
section.testimonial .container .slider-wrapper .card-list .card-item .user-image  {width:80px; height:80px; display: flex; justify-content: center; align-items: center; border-radius:50%; margin-bottom:10px; border:solid 3px #fff; padding:4px;}
section.testimonial .container .slider-wrapper .card-list .card-item .user-image i {font-size:42px;}
section.testimonial .container .slider-wrapper .card-list .card-item .review-text {font-size:14px; line-height:20px; text-align: center; letter-spacing: 1px; color:#fff; font-weight: 500; margin:10px 0 24px; padding:0px 32px;}
section.testimonial .container .slider-wrapper .card-list .card-item .reviewer-name {display: inline-block; margin-top:8px; letter-spacing: 1px; text-transform: uppercase;}
section.testimonial .container .slider-wrapper .swiper-pagination-bullet {background:#fff; height:15px; width: 15px;}
section.testimonial .container .slider-wrapper .swiper-slider-button { color: #fff; transition: 0.2s;}
section.testimonial .container .slider-wrapper .swiper-slider-button:hover { color: #6b6b6b;}
section.testimonial .container .slider-wrapper .swiper-pagination {bottom: 40px;}

section.footer {width: 100%; display: flex; justify-content:space-between; align-items: center; background-color: #2d2d2d; position:relative; height: auto; padding:12px 24px;}
section.footer .container {position: relative; z-index:9; color: #fff;}
section.footer .heading-text h2 {text-transform: uppercase; color: #fff;font-size:24px; text-align: center; margin-bottom:60px;}
section.footer .left {width:65%; display: inline-block;}
section.footer .left .icon-container {display:block; width:100%; font-size:14px; margin-bottom:16px;}
section.footer .left .icon-container i {margin-right:6px;}
section.footer .right {width:30%; display: inline-block;}
section.footer .right h3 {text-transform: uppercase; color: #fff; font-size:18px; text-align: left; margin-bottom:16px;}
section.footer .right .input-container {width: 100%; position:relative; margin-bottom:42px;}
section.footer .right .social-icon i {font-size:36px; margin-right: 16px; transition: 0.5s;}
section.footer .right .social-icon i:hover {color: #00a4d9; cursor: pointer;}
section.footer .copyright {width: 100%; display: flex; justify-content: center;}
section.footer .copyright span.copyright-text {color: #fff; font-size:12px;}
section.footer .social-icon-container {display: flex;}
section.footer .social-icon-container h3 {color:#fff; margin-right:12px; font-weight: normal; font-size:16px; line-height:26px;}
section.footer .social-icon-container a {color: #fff; font-size: 24px; margin:0px 4px;}
section.footer .social-icon-container a:hover {color:#feccac;}

.animated-hand i { font-size: 20px; animation:animateUpDown 2s infinite; position: relative;}
.footBall {position: absolute; bottom: 4px; left: 10%; font-size: 250px; color: #fff; opacity:0.05; animation: runFootball 12s 1 linear;}
.slideAnimate {position: absolute; bottom:-40px; left: 10%; font-size:180px; color: #fff; opacity:0.1; animation: runSlide 6s infinite linear;}
.reveal {position:relative; transform: translateY(150px); opacity: 0; transition: all 1s ease; padding-top:50px !important;}
.reveal.active {transform: translateY(0px); opacity:1; background:none;}
#myBtn {display:none; position:fixed; bottom:58px; right:15px; z-index:99; background-color: transparent; border: none; font-size:32px; font-weight: 600; transition: 0.5s; color:white; cursor:pointer;}
#myBtn span i {text-shadow: 0px 0px 3px #000; transition: 1s linear;}
.blinkIcon {animation: blinking 1.5s linear infinite;}
.modal {display:none; position:fixed; z-index: 999; padding-top: 100px; left:0; top: 0; width: 100%; height: 100%; padding: 0 16px; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9);}
.modal.active {display: block;}
.modal-content {margin: auto;display: block; width: 80%; max-width: 700px;}

/* Add Animation */
.modal-content, #caption {-webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s;}
/* The Close Button */

#myModal .contact-form {border: none; max-width: 430px;}
#myModal .content-wrapper {width:fit-content; background-color:#fff; height:auto; margin:auto; position:relative; top:40%; transform:translateY(-50%);}
#myModal .content-wrapper .header {width:100%; height:auto; padding:14px 12px; background-color:#0f4180; color:#fff;}
#myModal .content-wrapper .header h2 {font-size:14px; font-weight:normal; text-transform:uppercase; letter-spacing:1px;}
#myModal .content-wrapper .header .close-modal {position:absolute; top:0px; right:15px; color:#fff; font-size: 32px; transition:0.3s; cursor: pointer;}
.clear-both {clear:both}
.loan-wrapper {width: 100%; height: 100%; position:relative; display: flex; padding: 50px; justify-content: space-between; background-color:#ecf2f9; padding-top:0px;} .bg-white {background-color:#fff; overflow: visible; height: 100%; align-items:flex-start;}
.loan-wrapper .content-container {width:calc(100% - 400px); background-color: #fff; margin-top:32px;}
.loan-wrapper .content-container h1 {background-color: #0f4180; color: #fff; font-weight: normal; letter-spacing: 1px; padding:12px 16px; font-size: 16px;} 
.loan-wrapper .content {padding:8px 16px; display:block; background-color:transparent; box-shadow: 0px 0px 10px #ccc;}
.loan-wrapper .content h2 {font-size:16px; color:#333;}
.loan-wrapper .content h3 {font-size:14px; font-weight: normal;}
.loan-wrapper .content p {margin-top:16px; margin-bottom:4px; font-size:14px; line-height:20px; color:#333;}
.loan-wrapper .content p.mr-t-0 {margin-top:0px;}
.loan-wrapper .content ul {padding-left:16px;list-style:decimal; font-size: 14px; line-height: 20px;} ul.list-style-disc {list-style: disc !important;}
.loan-wrapper .content .text-container ul li {margin-bottom: 12px;}
.loan-wrapper .content .text-container ul li span {font-size:14px; display:inline-block; margin-top:4px;}
.loan-wrapper .contact-form {top:132px; position: sticky;}
.alert {position:relative; padding:12px 8px; background: #fff; color: #000; text-align: center; margin-top: 6px;}
.alert .closebtn {position:absolute; top:6px; right:8px; font-size:24px; color:#fff;}
.alert.alert-success {background-color:#19ce00; color: #fff;}
.alert.alert-error {background-color:#ff6600; color: #fff;}
.contact-section {width: 100%; height: auto;}
.contact-section .banner-section {width: 100%; height:200px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color:#355454;}
.contact-section .banner-section h2 {color: #fff; font-size: 42px; letter-spacing: 2px;}
.contact-section .banner-section p {color: #fff; font-size: 16px; margin-top:4px; font-style: italic;}
.contact-section .contact-form {background-color:#fff; width: 33.33%; max-width: none; box-shadow: none; position: relative; height: 500px; background-color: #ebebeb;}
.contact-section .contact-detail-container {display:flex; justify-content:center; padding:80px 64px;}
.contact-section .contact-detail-container .inner-container {width: 100%; display: flex; justify-content: center; align-items: center;}
.contact-section .contact-detail-container .text-detail {width:33.33%; font-size:14px; padding:24px; background-color:#0f4180; color: #fff; height: 400px;}
.contact-section .contact-detail-container .text-detail .icon-container {width: 100%;display: block; margin: 16px 0px;}
.contact-section .contact-detail-container .text-detail .icon-container a {color: #fff; text-decoration: none;}
.contact-section .contact-detail-container .text-detail .social-icon a:first-child {padding-left: 0px;}
.contact-section .contact-detail-container .text-detail .social-icon a {color: #fff; font-size:32px; padding:0px 8px;}
.contact-section .contact-detail-container .map-section {width: 33.33%;} .fs13 {font-size:13px;} .fs14 {font-size:14px;}

/* Blog css strat from here */
.blog-container .blog-header .box {width:100%; height:350px; overflow:hidden; position: relative;}
.blog-container .blog-header .box img {width:100%; height:auto;}
.blog-container .blog-header .box .text {width:100%; height:160px; position: absolute; left: 0; bottom: 0; padding-left:32px; color: #fff; background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.8) 100%);}
.blog-container .blog-header .box .text h1 {position: absolute; bottom:24px; font-style: italic;}
.blog-container .blog-header .box .text h1::after {content:''; height:2px; width: 100%; display: block; margin-top:6px; background-color:#ff8b00;}
.blog-container .blog-wrapper {display:grid; grid-template-columns:auto auto; gap: 16px; padding:32px; background:#e7e7e7;}
body#themeColorMode.active .blog-container .blog-wrapper {background:#fff;}
.blog-container .blog-wrapper .blog-box {width: auto; display:flex; background-color:#fff; padding:8px; border-radius:8px;}
.blog-container .blog-wrapper .blog-box .img-contain {width:220px; height:110px; display:block; overflow:hidden; box-shadow:0px 0px 2px #a3a3a3;}
.blog-container .blog-wrapper .blog-box .img-contain img {width: 100%; height: auto;}
.blog-container .blog-wrapper .blog-box .text-contain {width:100%; position:relative; color: #000; padding-left: 8px;}
.blog-container .blog-wrapper .blog-box .text-contain h2 {margin-bottom:6px; line-height:18px;}
.blog-container .blog-wrapper .blog-box .text-contain h2 a {color:#017ec1; text-decoration:none; font-size:16px;}
.blog-container .blog-wrapper .blog-box .text-contain h2 a:hover {text-decoration:underline;}
.blog-container .blog-wrapper .blog-box .text-contain .txt {color: #848484; font-size:13px; text-decoration:none;}
.blog-container .blog-wrapper .blog-box .text-contain .txt:hover {text-decoration: underline; cursor: pointer;}
.blog-container .blog-wrapper .blog-box .text-contain .text-footer {width: 100%; position:absolute; bottom:-2px;}
.blog-container .blog-wrapper .blog-box .text-contain .text-footer .date {font-size:11px; color:#898989;}
.blog-container .blog-wrapper .blog-box .text-contain .text-footer a.readMorebtn {background-color:#fff; border:solid 1px #dadada; border-radius:4px; padding:4px 8px; margin-right:12px; float: right; font-size:11px; color:#848484; text-decoration: none;}
.blog-container .blog-wrapper .blog-box .text-contain .text-footer a.readMorebtn:hover {background:#0182c1; color:#fff; border:solid 1px #0182c1; cursor: pointer;}
/* Blog css end here */

/* Blog css strat from here */
.blogs-container .blogs-header .box {width:100%; height:400px; overflow:hidden; position: relative;}
.blogs-container .blogs-header .box img {width:100%; height:auto;}
.blogs-container .blogs-header .box .text {width:100%; height:160px; position: absolute; left: 0; bottom: 0; padding-left:16px; color: #fff; background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.8) 100%);}
.blogs-container .blogs-header .box .text h1 {display: inline-block; margin-top:94px; font-size: 20px;}
.blogs-container .blogs-header .box .text h1::after {content:''; height:2px; width: 100%; display: block; margin-top:6px; background-color:#ff8b00;}
.blogs-container .blogs-header .box .text p.date-text {display:block; margin-top:8px; font-style: italic; font-size:11px;}
.blogs-container .blogs-wrapper {display:grid; grid-template-columns:68.5% 30%; gap:24px; padding:32px;}
.blogs-container .blogs-wrapper .blogs-box {width: auto; display:flex; background-color:#fff; padding:8px; border:solid 2px #d8d8d8; border-radius:0px;}
.blogs-container .blogs-wrapper .blogs-box .blogs-box-container {position: relative;}
.blogs-container .blogs-wrapper .blogs-box .img-contain {width:220px; max-height:94px; display:block; overflow:hidden;}
.blogs-container .blogs-wrapper .blogs-box .img-contain img {width: 100%; height: auto;}
.blogs-container .blogs-wrapper .blogs-box .text-contain {width:100%; position:relative; color: #000; padding:8px;}
.blogs-container .blogs-wrapper .blogs-box .text-contain h2.blog-heading {font-size:20px; color:#333; margin-top:8px; margin-bottom:14px;}
.blogs-container .blogs-wrapper .blogs-box .text-contain p.blog-pragraph-text {font-size:14px; line-height:20px; margin-bottom:8px; color:#555;}
.blogs-container .blogs-wrapper .blogs-box .text-contain h2 {margin-bottom:4px; line-height:16px; font-size: 16px;}
.blogs-container .blogs-wrapper .blogs-box .text-contain h2 a {color:#017ec1; text-decoration:none; font-size:13px;}
.blogs-container .blogs-wrapper .blogs-box .text-contain h2 a:hover {text-decoration:underline;}
.blogs-container .blogs-wrapper .blogs-box .text-contain h3 {font-size:14px; line-height:24px; color:#4b4b4b; font-weight:bold;}
.blogs-container .blogs-wrapper .blogs-box .text-contain h4 {font-size:16px; line-height:24px; color:#000; font-weight:normal;}
.blogs-container .blogs-wrapper .blogs-box .text-contain .txt {color: #848484; font-size:12px;}
.blogs-container .blogs-wrapper .blogs-box .text-contain .txt:hover {text-decoration: underline; cursor: pointer;}
.blogs-container .blogs-wrapper .blogs-box .text-contain .text-footer {width: 100%; position:relative; top:2px;}
.blogs-container .blogs-wrapper .blogs-box .text-contain .text-footer .date {font-size:12px; font-style:italic; color:#a1a1a1;}
.blogs-container .blogs-wrapper .blogs-box .text-contain .text-footer a.readMorebtn {background-color:#fff; border:solid 1px #fff; padding:2px 4px; float:right; margin-right:12px; font-size:11px; color:#848484;}
.blogs-container .blogs-wrapper .blogs-box .text-contain .text-footer a.readMorebtn:hover {background:#0182c1; color:#fff; border:solid 1px #0182c1; cursor: pointer;}
.blogs-container .blogs-wrapper .blogs-box .text-contain ul {font-size:14px; line-height:24px; margin-bottom:16px; list-style: none;}
.blogs-container .blogs-wrapper .blogs-box .text-contain ul li {font-size:14px; line-height:24px; margin-bottom:4px; color:#555;}
.blogs-container .blogs-wrapper .blogs-box .text-contain ul li b {color:#555;}
.blogs-container .blogs-wrapper .blogs-box .blogs-box-container:hover .tint-bg {opacity:1;}
.blogs-container .blogs-wrapper .blogs-box .blogs-box-container .tint-bg {opacity:0; position:absolute; top:0px; left: 0px; transition: all 0.5s; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8);}
.blogs-container .blogs-wrapper .blogs-box .blogs-box-container .tint-bg a.readMorebtn {background-color:#0182c1; color:#fff; cursor: pointer; padding:10px 24px; border-radius:24px; position: absolute; text-decoration: none; top: 50%; font-size:12px; left: 50%; transform: translate(-50%, -50%);}
.d-flex {display: flex;} .flex-dc {flex-direction: column;} .border {border: solid 1px #ccc;} .mt-12 {margin-top:12px;} .mb-16 {margin-bottom:16px;} .b-shadow {box-shadow:0px 0px 7px #bebebe}
/* Blog css end here */

table.custom-table {width:100%; border:solid 1px #ccc; border-collapse: collapse; font-size:13px; text-align: left;}
table.custom-table thead tr th, table.custom-table tbody tr td {border:solid 1px #ccc; padding:8px;}
ul.list-style-dot {list-style: disc !important;}
.latest-blog-txt {color:#333; padding:5px 0px 10px 0px; border-bottom:solid 2px #ff8b00; margin-bottom:16px;}

.h2 {font-size:22px;}
.h2 {font-size:16px;}
.h3 {font-size:14px; color:#4b4b4b; }
.p-text {font-size:14px; line-height:20px;}
.pd-tb-32 {padding-top:32px; padding-bottom:32px;}
.pd-lr-32 {padding-left:32px; padding-right:32px;}
.listStyleNone {list-style:none;} .text-white {color:#fff;}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}
@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

@keyframes animateUpDown {
    0% {top:0px; opacity: 0.5; font-size: 14px;} 50% {top:10px; opacity: 1; font-size: 16px;} 100% {top:0px; opacity: 0.5; font-size: 14px;}
}

@keyframes welcomeNotes {
    0% {height:20vh;} 5% {height:100vh;} 10% {height:100vh;} 15% {height:100vh;} 20% {height: 100vh; opacity:1;} 25% {height: 100vh; opacity:1;} 30% {height: 100vh; opacity:1;} 35% {height: 100vh; opacity:1;} 40% {height: 100vh; opacity:1;} 45% {height: 100vh; opacity:1;} 50% {height: 100vh; opacity:1;} 55% {height: 100vh; opacity:1;} 60% {height:100vh; opacity:1;} 65% {height: 100vh; opacity:1;} 70% {height: 100vh; opacity:1;} 75% {height: 80vh;} 80% {height: 0vh;} 85% {height: 0vh;} 90% {height: 0vh;} 100% {height: 0vh;}
}
@keyframes upDownAnimate {
    0% {top:-10px; color:#FF6600;} 50% {top:0px; color:#FF6600;} 100% {top:-10px; color:#FF6600;}
}
@keyframes welcomeNotestext {
    0% {top:100px; opacity: 0; display: none;} 100% {top:0px; opacity: 1; display: block;}
}

@keyframes fadeOut {
    0% {display: block;} 20% {display: block;} 60% {display: block;} 95% {display: block;} 100% {display: block;}
}

@keyframes blinking {
    0% {transform: scale(1);} 50% { transform: scale(0.6);} 100% { transform: scale(1);}
}

@keyframes bannerAnimateUpDown {
    0% {top:0px} 20% {top:-10px}  40% {top:0px;} 60% {top:10px} 100% {top:0px}
}

@keyframes slideRight {
    0% {transform: translateX(-100px); opacity: 0;}
    100% {transform: translateX(0px); opacity: 1;}
}
@keyframes slideTop {
    0% {transform: translateY(100px); opacity: 0;}
    100% {transform: translateY(0px); opacity: 1;}
}
@keyframes slideBottom {
    0% {transform: translateY(-100px); opacity: 0;}
    100% {transform: translateY(0px); opacity: 1;}
}
@keyframes slideLeft {
    0% {transform: translateX(100px); opacity: 0;}
    100% {transform: translateX(0px); opacity: 1;}
}
.footer-sticky {display: none;} .mr-t-42 {margin-top:42px;} .mr-l-8 {margin-left:8px;} .mr-l-minus-8{margin-left:-8px;} .d-inline-block {display:inline-block;}

@media(max-width:1080px) {
    .home-section {height: auto; padding:60px 16px; flex-direction:column;}
    .home-section .banner-text {max-width: 100%; text-align: center; padding: 32px 0px;}
    header {padding: 0; z-index: 999;}
    header nav {flex-direction: column; justify-content: flex-start;}
    header nav:has(div.m-navigatior.active) {height: 100vh;}
    header nav .contact-text {display: none;}
    header nav ul {width: 100%; display: none;}
    header .m-navigatior.active ~ ul {display: block;}
    header .m-navigatior.active ~ .contact-text {display: block; text-align: center;}
    header nav ul li {width: 100%;}
    header nav ul li a {width:100%; text-align: center; padding:18px 16px;}
    header nav div.m-navigatior {display: inline-block; position: absolute; color: #fff; right:0px; top:0px; padding:12px 16px; background-color: transparent; width: auto; font-size:32px; z-index:99;}
    header nav div.m-navigatior span.close {display: none;}
    header nav div.m-navigatior.active span.close {display: block;}
    header nav div.m-navigatior.active span.humberger {display: none;}
    header nav div.m-navigatior.active ~ div {height: 100vh; overflow-y:auto ;}
    header nav div.m-navigatior.active ~ div a {display: block; position: relative; border-radius: 0px;border-bottom: solid 1px #0089b6;}
    header nav div.m-navigatior + span a img {height: 30px;}
    header nav div.m-navigatior + span a img + span {font-size: 20px !important; margin-top:5px !important;}
    header nav .logo-container a span.logoTag {bottom:4px; font-size:11px !important;}
    section.about {height: auto; padding:0px 16px 32px 16px;}
    section.about .about-container {width:100%; flex-direction: column;}
    section.about .about-container h2 {margin-top:32px; margin-bottom:8px;}
    section.about .about-container .img-container {width: 100%; padding:32px; border-radius:62px 62px 62px 62px;}
    section.about .about-container .img-container img {height:200px;}
    section.about .about-container .text-container {width: 100%; padding:0px; text-align: center;}
    section.social .container .left-section {display: flex; flex-direction: column; padding: 0px; padding-bottom: 32px;}
    section.social .container .right-section {display: flex; flex-direction: column; padding:0px;}
    section.social .container h2 {margin-bottom: 8px;}
    section.service {height: auto; padding-bottom: 50px;}
    section.service .container {padding:0px 12px;}
    section.service .container .box-container {flex-direction: column;}
    section.service .container .box-container .box {width: 100%; padding:16px; transform: scale(1); box-shadow:0px 4px 10px #dbdbdb; border: solid 1px #dedede; margin-bottom:12px; border-radius:8px;}
    section.service .container .box-container .box:hover {transform: scale(1); box-shadow: 0px 4px 10px #c8c8c8;}
    section.service .container .box-container .box a {width: auto; padding:10px 12px;}
    section.service .container .box-container .box h3 {margin-bottom: 8px;}
    section.service .container .box-container .box .icon-container {margin-bottom: 12px;}
  .contact.reveal {margin-top:0px; padding-top: 100px;}
  .contact .contact-form form {display: flex; justify-content: center; flex-direction: column;}
  .btn-white-transparent {float: none;}
  section.testimonial .container .slider-wrapper .card-list .card-item {min-height: 360px;}
  .welcome-msg p span.logo-text {font-size:32px;}
  .welcome-msg p .logo-container img {height:36px;}
  .welcome-msg p .logo-container span.logoTag {position:absolute; bottom:4px; width:100%; left:30px; font-size:9px;}
  .home-section .banner-img img {height:200px;}
  .home-section .banner-text h2 {font-size: 22px;}
  section.testimonial .container h2 {font-size: 20px;} 
  .footer-sticky {position: fixed; bottom: 0px; left: 0px; background-color:#0f4180; width: 100%; height:56px; color: #fff; z-index: 9; display: flex; justify-content: center;}
  .footer-sticky .nav {width: 100%;}
  .footer-sticky .nav .m-social-contact-icon {position: absolute; width: 100%; display: flex; justify-content: center; height: 100%;}
  .footer-sticky .nav .m-social-contact-icon a {display: inline-block; text-align: center; width: auto; text-decoration: none; font-size:20px; padding:4px 16px 0px 16px; color: #fff;}
  .footer-sticky .nav .m-social-contact-icon a i {padding:6px; border-radius:50%; position:relative; top:3px;}
  .footer-sticky .nav .m-social-contact-icon a i + span{ display: block; font-size:10px;font-weight: bold; letter-spacing: 1px; margin-top:1px;}
  .footer-sticky .nav .m-social-contact-icon:has(+ .m-navigatior.active) {display: none;} 
  section.footer {padding:16px 0px 80px 0px; flex-direction: column;}
  section.footer .copyright {margin-top:6px;}
  #myBtn {right:12px;}
  .loan-wrapper {flex-direction: column; padding:8px 16px 164px 16px;}
  .loan-wrapper .content-container {width:100%;}
  .loan-wrapper .contact-form {top:64px; position: relative;}
  .loan-wrapper .contact-form {min-width:100%;}
  .contact-section .contact-detail-container {padding:24px;}
  .contact-section .contact-detail-container .inner-container {flex-direction:column;}
  .contact-section .contact-detail-container .text-detail {width:100%; height: auto;}
  .contact-section .contact-form {width:100%; height:auto;}
  .contact-section .contact-detail-container .map-section {width:100%; height:auto;}

  .blog-container .blog-header .box .text {padding-left:12px;}
  .blog-container .blog-wrapper {padding:12px;}
  .blog-container .blog-header .box {height: 150px;}
  .blog-container .blog-wrapper .blog-box {flex-direction: column;}
  .blog-container .blog-wrapper .blog-box .img-contain {width: 100%;}
  .blogs-container .blogs-wrapper {padding:8px}
  .blogs-container .blogs-header .box {height: auto;}
  .blogs-container .blogs-header .box .text h1 {font-size:14px;}
  .blogs-container .blogs-header .box .text {padding-left: 8px; padding-right: 8px;}
  .blog-container .blog-wrapper {grid-template-columns:auto;}
  .blog-container .blog-wrapper .blog-box .img-contain {box-shadow: none;}
  .blog-container .blog-wrapper .blog-box .text-contain {padding-top:8px; padding-bottom:32px;}
  .blogs-container .blogs-wrapper {grid-template-columns:100%;}
  .blogs-container .blogs-wrapper .blogs-box {padding:4px;}
  .blogs-container .blogs-wrapper .blogs-box .text-contain h2 {line-height:18px; font-size:14px;}
  .blog-container .blog-wrapper .blog-box .img-contain {height: 140px;}
}