@charset "utf-8";

/* CSS Document */

/*

+ General css 
+ Space css
+ Background & Block color 
+ Buttons
+ Input Form
+ Bullet
+ Icon
+ Navigation CSS

+ HOME
  - Home
  - Home-1
  - Home-2
+ LOAN PRODUCT
  - Loan Image Listing
  - Loan Icon Listing
  - Car Loan Single
  - Personal Loan Single
  - Home Loan Single
  - Education Loan Single
+ ABOUT US 
  - About us
  - Team
+ BLOG
  - Blog Listing
  - Blog Single
  - Two Column Masonry
  - Three Column Masonry
+ FEATURES
  - Compare Loan
  - Faq page
  - Testimonial
  - 404 Error
    - Gallery
      - Filterable Gallery 2 column
      - Filterable Gallery 3 column
      - Masonry Gallery
      - Zoom Gallery
    - Shortcodes
      - Tab
      - Accordion
      - Alert       

- CONTACT US
    
*/

/*-----------------------------------
General css class
-----------------------------------*/

body {
   font-size: 15px;
   font-family: 'Poppins', sans-serif;
   line-height: 1.4;
   color: #778191;
   background-color: #f4f6f8;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0px 0px 10px 0px;
   color: #3c4d6b;
   font-weight: 500;
}

h1 {
   font-size: 32px;
   line-height: 44px;
   letter-spacing: -1px;
}

h2 {
   font-size: 24px;
   line-height: 32px;
}

h3 {
   font-size: 20px;
   line-height: 28px;
}

h4 {
   font-size: 16px;
   line-height: 1.6;
}

h5 {
   font-size: 14px;
}

h6 {
   font-size: 14px;
}

p {
   margin: 0 0 26px;
   line-height: 1.6;
   font-weight: 400;
}

ul,
ol {}

ul li,
ol li {
   line-height: 1.8
}

a {
   color: #001f3f;
   text-decoration: none;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}

a:focus,
a:hover {
   text-decoration: none;
   color: Gray;
}

strong {
   font-weight: 600;
}

blockquote {
   padding: 10px 20px;
   margin: 0 0 0px;
   font-size: 21px;
   border-left: 5px solid #eff1f4;
   color: #414346;
   font-style: italic;
   line-height: 35px;
   font-family: 'Merriweather', serif;
   font-weight: 700;
}

blockquote.alignright {
   max-width: 50%;
}

blockquote.alignleft {
   max-width: 50%;
}

p:last-child {
   margin-bottom: 0px;
}

::selection {
   background: #ffecb3;
   color: #333;
}

*,
*::before,
*::after {
   transition: all .3s ease-in-out;
}

.text-highlight {
   color: #ffecb3;
}

.highlight {
   color: #001f3f;
}

.italic {}

.small-text {}

.listnone {
   list-style: none;
   margin: 0px 0px 20px 0px;
   padding: 0;
}

.required {
   color: gray
}

.lead {
   color: #3c4d6b;
   line-height: 30px;
   font-size: 15px;
   text-align: justify;
}

.lead-strong {}

.section-title {}

.text-white {
   color: #fff;
}

.title-white {
   color: #fff;
}

.title {
   color: #3c4d6b;
   font-size: 17px;
}

.text-bold {
   font-weight: 600;
}

.text-black {
   color: #000000 !important;
}

.text-light {
   color: #a1a4a8 !important;
}

.text-dark {
   color: #414855 !important;
}

.text-light-blue {
   color: #cce4ff;
}

.border-primary {
   border-color: #15549a !important;
}

.text-primary {
   color: gray !important;
}

.border-default {
   border-color: #f51f8a !important;
}

.border-top-default {
   border-top: 3px solid #f51f8a;
}

/*-----------------------------------
Space css class
-----------------------------------*/

/*----------------
margin space
-----------------*/

.mb0 {
   margin-bottom: 0px;
}

.mb5 {
   margin-bottom: 5px;
}

.mb10 {
   margin-bottom: 10px;
}

.mb20 {
   margin-bottom: 20px;
}

.mb30 {
   margin-bottom: 30px;
}

.mb40 {
   margin-bottom: 40px;
}

.mb60 {
   margin-bottom: 60px;
}

.mb80 {
   margin-bottom: 80px;
}

.mb100 {
   margin-bottom: 100px;
}

.mt0 {
   margin-top: 0px;
}

.mt10 {
   margin-top: 10px;
}

.mt20 {
   margin-top: 20px;
}

.mt30 {
   margin-top: 30px;
}

.mt40 {
   margin-top: 40px;
}

.mt60 {
   margin-top: 60px;
}

.mt80 {
   margin-top: 80px;
}

.mt100 {
   margin-top: 100px;
}

.mr0 {
   margin-right: 0px;
}

.mr10 {
   margin-right: 10px;
}

.mr20 {
   margin-right: 10px;
}

.ml0 {
   margin-left: 0px;
}

.ml10 {
   margin-left: 10px;
}

.ml20 {
   margin-left: 20px;
}

/*----------------
less margin space from top
-----------------*/
.mt-20 {
   margin-top: -20px;
}

.mt-40 {
   margin-top: -40px;
}

.mt-60 {
   margin-top: -60px;
}

.mt-80 {
   margin-top: -80px;
}

/*---------------
Padding space
-----------------*/
.nopadding {
   padding: 0px;
}

.nopr {
   padding-right: 0px;
}

.nopl {
   padding-left: 0px;
}

.pinside10 {
   padding: 10px;
}

.pinside20 {
   padding: 20px;
}

.pinside30 {
   padding: 30px;
}

.pinside40 {
   padding: 40px;
}

.pinside50 {
   padding: 50px;
}

.pinside60 {
   padding: 60px;
}

.pinside80 {
   padding: 80px;
}

.pinside100 {
   padding: 100px;
}

.pdt10 {
   padding-top: 10px;
}

.pdt20 {
   padding-top: 20px;
}

.pdt30 {
   padding-top: 30px;
}

.pdt40 {
   padding-top: 40px;
}

.pdt60 {
   padding-top: 60px;
}

.pdt80 {
   padding-top: 80px;
}

.pdb10 {
   padding-bottom: 10px;
}

.pdb20 {
   padding-bottom: 20px;
}

.pdb30 {
   padding-bottom: 30px;
}

.pdb40 {
   padding-bottom: 40px;
}

.pdb60 {
   padding-bottom: 60px;
}

.pdb80 {
   padding-bottom: 80px;
}

.pdl10 {
   padding-left: 10px;
}

.pdl20 {
   padding-left: 20px;
}

.pdl30 {
   padding-left: 30px;
}

.pdl40 {
   padding-left: 40px;
}

.pdl60 {
   padding-left: 60px;
}

.pdl80 {
   padding-left: 80px;
}

.pdl120 {
   padding-left: 120px;
}

.pdr10 {
   padding-right: 10px;
}

.pdr20 {
   padding-right: 20px;
}

.pdr30 {
   padding-right: 30px;
}

.pdr40 {
   padding-right: 40px;
}

.pdr60 {
   padding-right: 60px;
}

.pdr80 {
   padding-right: 80px;
}

.x {}

.y {
   padding-top: 220px;
}

/*---------------
Section Space
* Section space help to create top bottom space. 
*
-----------------*/
.section-space20 {
   padding-top: 20px;
   padding-bottom: 20px;
}

.section-space40 {
   padding-top: 40px;
   padding-bottom: 40px;
}

.section-space60 {
   padding-top: 60px;
   padding-bottom: 60px;
}

.section-space80 {
   padding-top: 80px;
   padding-bottom: 80px;
}

.section-space100 {
   padding-top: 100px;
   padding-bottom: 100px;
}

.section-space120 {
   padding-top: 120px;
   padding-bottom: 120px;
}

.section-space140 {
   padding-top: 140px;
   padding-bottom: 140px;
}

/*-----------------------------------------
Background & Block color 
------------------------------------------*/
.bg-light {
   background-color: #fafcfd;
}

.bg-primary {
   background-color: #eff1f4 !important;
   color: #778191;
}

.bg-default {
   background-color: #001f3f;
   color: #87c0ff;
}

.bg-white {
   background-color: #fff;
}

.outline {
   border: 1px solid #dee4ee;
}

.link-title {}

.small-title {
   font-size: 14px;
   color: #778191;
   font-weight: 500;
}

.big-title {
   font-size: 36px;
   font-weight: 600;
   color: #15549a;
}

.capital-title {
   text-transform: uppercase;
   font-size: 16px;
   font-weight: 600;
}

.bdr-btm {}

.green-text {}

.bg-boxshadow {
   -webkit-box-shadow: 0px 4px 16px 3px rgba(213, 221, 234, .5);
   -moz-box-shadow: 0px 4px 16px 3px rgba(213, 221, 234, .5);
   box-shadow: 0px 4px 16px 3px rgba(213, 221, 234, .5);
}

.bg-gradient {
   position: relative;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1f2b70+0,1f2b70+47,943a9e+100&0.9+0,0.9+100 */
   background: -moz-linear-gradient(-45deg, rgba(31, 43, 112, 1) 0%, rgba(31, 43, 112, 1) 47%, rgba(148, 58, 158, 1) 100%);
   /* FF3.6-15 */
   background: -webkit-linear-gradient(-45deg, rgba(31, 43, 112, 0.9) 0%, rgba(31, 43, 112, 0.9) 47%, rgba(148, 58, 158, 0.9) 100%);
   /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(135deg, rgba(31, 43, 112, 0.9) 0%, rgba(31, 43, 112, 0.9) 47%, rgba(148, 58, 158, 0.9) 100%);
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e61f2b70', endColorstr='#e6943a9e', GradientType=1);
   /* IE6-9 fallback on horizontal gradient */
}

.well-box {
   background-color: #fff;
   padding: 30px;
   border-radius: 4px;
}

.bg-yellow-light {
   background-color: #fff9e0;
}

.bg-pink {
   background-color: #f51f8a !important;
}

.bg-dark {
   background-color: #4e5257 !important;
}

.bg-dark-blue {
   background-color: #023975;
}

.bg-light-blue {
   background-color: #15549a;
}

.text-pink {
   color: #f51f8a;
}

.card {
   border-color: #d3dbea;
   background-color: #f7fafd;
   border-radius: 3px;
   margin-bottom: 30px;
}

.card-body {
   padding: 30px;
}

.card-header {
   background-color: #f7fafd;
}





/* Update 16 june 2017*/

/*-----------------------------------------
Buttons
------------------------------------------*/

.btn {
   font-size: 14px;
   border-radius: 2px;
   line-height: 12px;
   letter-spacing: 1px;
   text-transform: uppercase;
   padding: 20px 30px;
   border: none;
   font-weight: 600;
}

.btn-default {
   background-color: gray;
   color: #fff;
   border-color: #172777;
}

.btn-default:hover {
   color: #fff;
   background-color: #001f3f;
   border-color: #2B3FA8;
}

.btn-default.focus,
.btn-default:focus {
   color: #fff;
   /* background-color: #d5504f;
  border-color: #c64241; */
}

.btn-primary {
   background-color: gray;
   color: #fff;
}

.btn-primary:hover {
   color: #fff;
   background-color: #001f3f;
}

.btn-primary.focus,
.btn-primary:focus {}

.btn-secondary {
   background-color: #001f3f;
   color: #fff;
}

.btn-secondary:hover {
   background-color: gray;
   color: #fff;
}

.btn-outline {
   border: 2px solid #dee4ee;
   color: #9aa9c3;
   background-color: transparent;
   padding: 17px 28px;
}

.btn-outline:hover {
   border: 2px solid #dee4ee;
   color: #6a7a94;
   background-color: #dee4ee;
}

.btn-lg {
   padding: 25px 50px;
   font-size: 18px;
   text-align: center;
}

.btn-sm {
   padding: 15px 20px;
   font-size: 12px;
   text-align: center;
}

.btn-xs {
   padding: 4px 8px;
   font-size: 10px;
}

.btn-link {
   color: gray;
   font-weight: 500;
   padding-bottom: 4px;
   border-bottom: 2px solid #15549a;
   display: inline-block;
   text-decoration: none;
}

.btn-link:hover {
   color: #001f3f;
   font-weight: 500;
   padding-bottom: 4px;
   border-bottom: 2px solid #001f3f;
   text-decoration: none;
}

.btn-link.focus,
.btn-link:focus {
   text-decoration: none;
   border-color: #001f3f;
   box-shadow: none;
   color: #001f3f;
}

.btn-link-white {
   color: #fff;
   font-weight: 500;
   padding-bottom: 4px;
   border-bottom: 2px solid #fff;
   display: inline-block;
   text-decoration: none;
}

.btn-link-white:hover {
   border-color: #657bf9;
   color: #657bf9;
}

.btn-link-orange {}

.btn-link-white:hover {}

.btn-default-link {
   color: #001f3f;
   font-weight: 500;
   text-decoration: none;
}

.btn-default-link:hover {
   color: #15549a;
}

/*-----------------------------------------
Input Form
------------------------------------------*/
label {}

.control-label {
   text-transform: uppercase;
   color: #3c4d6b;
   font-size: 13px;
   font-weight: 600;
}

.form-control {
   width: 100%;
   height: 52px;
   padding: 6px 16px;
   font-size: 14px;
   line-height: 1.42857143;
   color: #555;
   background-image: none;
   background-color: #fff;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
   box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
   margin-bottom: 10px;
   border: 2px solid #e6ecef;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
   background-color: #fff;
}

.form-control:focus {}

.required {
   color: red
}

textarea.form-control {
   border-radius: 2px;
   height: auto;
}

select {
   -webkit-appearance: none;
   background-color: #fff;
}

.input-group-text {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   padding: .375rem .75rem;
   margin-bottom: 0;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #555;
   text-align: center;
   white-space: nowrap;
   background-color: #ffffff;
   border: 2px solid #e6ecef;
   border-radius: .25rem;
   margin-right: -1px;
}

/*-----------------------------------------
content
------------------------------------------*/
.content {
   padding-bottom: 100px;
   padding-top: 100px;
}

.content-area {}

.sidebar-area {}

.wrapper-content {
   margin-top: 15px;
   margin-bottom: 100px;
   position: relative;
}

/*-----------------------------------------
Bullet
------------------------------------------*/
.bullet {
   position: relative;
   padding-left: 25px;
   line-height: 32px;
}

.bullet-arrow-circle-right li:before {
   font-family: 'FontAwesome';
   display: block;
   position: absolute;
   left: 0;
   font-size: 15px;
   color: #919297;
   content: "\f18e";
}

.bullet-arrow-right li:before {
   font-family: 'FontAwesome';
   display: block;
   position: absolute;
   left: 0;
   font-size: 15px;
   color: #747474;
   content: "\f101";
}

.bullet-check-circle li:before {
   font-family: 'FontAwesome';
   display: block;
   position: absolute;
   left: 0;
   font-size: 15px;
   color: #15549a;
   content: "\f058";
}

.bullet-check-circle-default li:before {
   font-family: 'FontAwesome';
   display: block;
   position: absolute;
   left: 0;
   font-size: 15px;
   color: #10a874;
   content: "\f05d";
   padding-right: 4px;
}

/* update 16 june 2017 */
.list-pdf-file li:before {
   font-family: 'FontAwesome';
   display: block;
   position: absolute;
   left: 0;
   font-size: 15px;
   color: #ec4e10;
   content: "\f1c1";
   padding-right: 4px;
}

.list-pdf-file li a {
   color: #104b8c;
   text-decoration: underline;
   font-weight: 500;
}

.list-pdf-file li a:hover {
   color: #f51f8a;
}

/*-----------------------------------------
icon
------------------------------------------*/
.icon {}

.icon-1x {
   font-size: 24px;
}

/* default icon size of font*/
.icon-2x {
   font-size: 48px;
}

.icon-4x {
   font-size: 68px;
}

.icon-6x {
   font-size: 88px;
}

.icon-8x {
   font-size: 108px;
}

.icon-default {
   color: #001f3f;
}

.icon-primary {
   color: #15549a;
}

.icon-secondary {
   color: #bcbcbc;
}

.dark-line {
   border-top: 2px solid #2b2e35;
}

/*-------- updated v 1.0.2 -------*/
.fa-primary {}

.fa-default {
   color: #f51f8a;
}

.fa-success {
   color: #6eb232;
}

/*-----------------------------------------
top bar
------------------------------------------*/
.top-bar {
   background-color: #001f3f;
   padding: 8px 0;
   font-size: 15px;
}

.top-text {
   padding-left: 20px;
   line-height: 1.6;
}

.top-bar a {
   color: #fff;
   text-decoration: none;
   display: flex;
   align-items: center;
   gap: 6px;
}

.top-bar i {
   color: gray;
   font-size: 16px;
}

.location-text {
   color: #fff;
}

/* Right section */
.top-right {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 18px;
   flex-wrap: wrap;
}

/* Social icons */
.social-links {
   display: flex;
   gap: 10px;
}

.social-links a i {
   font-size: 18px;
}

/* Hover effect */
.top-bar a:hover i,
.social-links a:hover i {
   color: #ffffff;
}

/* Mobile view */
@media (max-width: 991px) {
   .top-right {
      justify-content: center;
      text-align: center;
   }
}

.search-nav {
   margin-top: 10px;
   text-align: center;
}

.search-btn {
   border-radius: 50%;
   width: 30px;
   height: 30px;
   padding: 5px 0px 0px 0px;
   margin-top: 7px;
   color: #7e93ae;
   background-color: #eff3f8;
   display: inline-block;
}

.searchbar {}

.search-area {
   padding: 30px;
}

.header {
   background-color: #fff;
   padding-top: 20px;
   padding-bottom: 20px;
   position: relative;
   z-index: 99;
   -webkit-box-shadow: 0px 5px 9px 1px rgba(144, 161, 180, 0.2);
   box-shadow: 0px 5px 9px 1px rgba(144, 161, 180, 0.2);
   -moz-box-shadow: 0px 5px 9px 1px rgba(144, 161, 180, 0.2);
}

.logo {}

.logo img {
   max-height: 55px;
   object-fit: contain;
}

.navigation-wide {
   background-color: #15549a
}

.navigation-wide #navigation {
   margin-top: 0px;
   float: left;
   background-color: #15549a;
}

#navigation,
#navigation ul,
#navigation ul li,
#navigation ul li a,
#navigation #menu-button {
   margin: 0;
   padding: 0;
   border: 0;
   list-style: none;
   line-height: 1;
   display: block;
   position: relative;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

#navigation:after,
#navigation>ul:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

#navigation #menu-button {
   display: none;
}

#navigation {
   float: right;
   margin-top: 8px;
   position: relative;
   z-index: 99;
}

#navigation>ul>li {
   float: left;
}

li.active a {
   color: gray !important;
   /* background-color: gray !important; */
}


#navigation.align-center>ul {
   font-size: 0;
   text-align: center;
}

#navigation.align-center>ul>li {
   display: inline-block;
   float: none;
}

#navigation.align-center ul ul {
   text-align: left;
}

#navigation.align-right>ul>li {
   float: right;
}

#navigation>ul>li>a {
   padding: 16px 10px;
   font-size: 13px;
   text-decoration: none;
   color: #172777;
   font-weight: 600;
   text-transform: uppercase;
}

#navigation>ul>li:hover>a {
   color: #7A7A7A;
}

#navigation>ul>li.has-sub>a {
   padding-right: 26px;
}

/*#navigation > ul > li.has-sub > a:after {position: absolute; top: 22px; right: 11px; width: 8px; height: 2px;
display: block; background: #dddddd; content: '';}*/
#navigation>ul>li.has-sub>a:before {
   position: absolute;
   right: 14px;
   font-family: FontAwesome;
   content: "\f107";
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -ms-transition: all .25s ease;
   -o-transition: all .25s ease;
   transition: all .25s ease;
}

#navigation ul ul li a .badge {
   font-size: 10px;
   background: #001f3f;
   padding: 1px 7px;
   color: #fff;
}

/*#navigation > ul > li.has-sub:hover > a:before {top: 23px; height: 0;}*/
#navigation ul ul {
   position: absolute;
   left: -9999px;
}

#navigation.align-right ul ul {
   text-align: right;
}

#navigation ul ul li {
   height: 0;
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -ms-transition: all .25s ease;
   -o-transition: all .25s ease;
   transition: all .25s ease;
}

#navigation li:hover>ul {
   left: auto;
}

#navigation.align-right li:hover>ul {
   left: auto;
   right: 0;
}

#navigation li:hover>ul>li {
   height: 45px;
}

#navigation ul ul ul {
   margin-left: 100%;
   top: 0;
}

#navigation.align-right ul ul ul {
   margin-left: 0;
   margin-right: 100%;
}

#navigation ul ul li a {
   border-bottom: 1px solid rgba(222, 231, 242, 1);
   padding: 15px 15px 16px 15px;
   width: 220px;
   font-size: 13px;
   text-decoration: none;
   color: #66707f;
   font-weight: 500;
   background: #fff;
}

#navigation ul ul li:last-child>a,
.navigation ul ul li.last-item>a {
   border-bottom: 0;
}

#navigation ul ul li:hover>a,
#navigation ul ul li a:hover {
   color: #001f3f;
   background-color: #f4f6f8;
}

#navigation ul ul li.has-sub>a:after {
   position: absolute;
   top: 20px;
   right: 11px;
   width: 8px;
   height: 2px;
   display: block;
   background: #66707f;
   content: '';
}

#navigation.align-right ul ul li.has-sub>a:after {
   right: auto;
   left: 11px;
}

#navigation ul ul li.has-sub>a:before {
   position: absolute;
   top: 17px;
   right: 14px;
   display: block;
   width: 2px;
   height: 8px;
   background: #66707f;
   content: '';
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -ms-transition: all .25s ease;
   -o-transition: all .25s ease;
   transition: all .25s ease;
}

#navigation.align-right ul ul li.has-sub>a:before {
   right: auto;
   left: 14px;
}

#navigation ul ul>li.has-sub:hover>a:before {
   top: 17px;
   height: 0;
}

#navigation.small-screen {
   width: 100%;
}

#navigation.small-screen ul {
   width: 100%;
   display: none;
}

#navigation.small-screen.align-center>ul {
   text-align: left;
}

#navigation.small-screen ul li {
   width: 100%;
   border-top: 1px solid rgba(223, 229, 237, 0.9);
}

#navigation.small-screen ul ul li,
#navigation.small-screen li:hover>ul>li {
   height: auto;
}

#navigation.small-screen ul li a,
#navigation.small-screen ul ul li a {
   width: 100%;
   border-bottom: 0;
}

#navigation.small-screen>ul>li {
   float: none;
}

#navigation.small-screen ul ul li a {
   padding-left: 25px;
}

#navigation.small-screen ul ul ul li a {
   padding-left: 35px;
}

#navigation.small-screen ul ul li a {
   color: #66707f;
   background: none;
}

#navigation.small-screen ul ul li:hover>a,
#navigation.small-screen ul ul li.active>a {
   color: #001f3f;
}

#navigation.small-screen ul ul,
#navigation.small-screen ul ul ul,
#navigation.small-screen.align-right ul ul {
   position: relative;
   left: 0;
   width: 100%;
   margin: 0;
   text-align: left;
}

#navigation.small-screen>ul>li.has-sub>a:after,
#navigation.small-screen>ul>li.has-sub>a:before,
#navigation.small-screen ul ul>li.has-sub>a:after,
#navigation.small-screen ul ul>li.has-sub>a:before {
   display: none;
}

#navigation.small-screen #menu-button {
   display: block;
   padding: 16px 0px;
   color: #001f3f;
   cursor: pointer;
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 700;
   border-top: 1px solid #e2e7ee
}

#navigation.small-screen #menu-button:after {
   position: absolute;
   top: 22px;
   right: 0px;
   display: block;
   height: 8px;
   width: 20px;
   border-top: 2px solid #001f3f;
   border-bottom: 2px solid #001f3f;
   content: '';
}

#navigation.small-screen #menu-button:before {
   position: absolute;
   top: 16px;
   right: 0px;
   display: block;
   height: 2px;
   width: 20px;
   background: #001f3f;
   content: '';
}

#navigation.small-screen #menu-button.menu-opened:after {
   top: 23px;
   border: 0;
   height: 2px;
   width: 15px;
   background: #333;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
}

#navigation.small-screen #menu-button.menu-opened:before {
   top: 23px;
   background: #333;
   width: 15px;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

#navigation.small-screen .submenu-button {
   position: absolute;
   z-index: 99;
   right: 0;
   top: 0;
   display: block;
   border-left: 1px solid rgba(223, 229, 237, 0.9);
   height: 46px;
   width: 46px;
   cursor: pointer;
}

#navigation.small-screen .submenu-button.submenu-opened {
   background: #15549a;
}

#navigation.small-screen ul ul .submenu-button {
   height: 34px;
   width: 34px;
}

#navigation.small-screen .submenu-button:after {
   position: absolute;
   top: 22px;
   right: 19px;
   width: 8px;
   height: 2px;
   display: block;
   background: #bcc6d3;
   content: '';
}

#navigation.small-screen ul ul .submenu-button:after {
   top: 15px;
   right: 13px;
}

#navigation.small-screen .submenu-button.submenu-opened:after {
   background: #ffffff;
}

#navigation.small-screen .submenu-button:before {
   position: absolute;
   top: 19px;
   right: 22px;
   display: block;
   width: 2px;
   height: 8px;
   background: #bcc6d3;
   content: '';
}

#navigation.small-screen ul ul .submenu-button:before {
   top: 12px;
   right: 16px;
}

#navigation.small-screen .submenu-button.submenu-opened:before {
   display: none;
}

#navigation.small-screen.select-list {
   padding: 5px;
}


#sub-nav {
   position: relative;
}

#sub-nav #menu-button {
   display: none;
}

#sub-nav.small-screen #menu-button {
   display: block;
   padding: 16px;
   color: #001f3f;
   cursor: pointer;
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 700;
   border-top: 1px solid #e2e7ee
}

#sub-nav.small-screen #menu-button:after {
   position: absolute;
   top: 22px;
   right: 10px;
   display: block;
   height: 8px;
   width: 20px;
   border-top: 2px solid #f51f8a;
   border-bottom: 2px solid #f51f8a;
   content: '';
}

#sub-nav.small-screen #menu-button:before {
   position: absolute;
   top: 16px;
   right: 10px;
   display: block;
   height: 2px;
   width: 20px;
   background: #f51f8a;
   content: '';
}

#sub-nav.small-screen #menu-button.menu-opened:before {
   top: 23px;
   background: #333;
   width: 15px;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

#sub-nav.small-screen #menu-button.menu-opened:after {
   top: 23px;
   border: 0;
   height: 2px;
   width: 15px;
   background: #333;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
}

/*-----------------------------------------
     Slider
------------------------------------------*/
#slider {}

.slider {
   position: relative;
}

.slider-img img {
   position: relative;
   z-index: -1;
   width: 100%;
}

.slider-img {
   background: -moz-linear-gradient(top, rgba(16, 75, 149, 0.8) 0%, rgba(16, 75, 149, 0.8) 100%);
   background: -webkit-linear-gradient(top, rgba(16, 75, 149, 0.8) 0%, rgba(16, 75, 149, 0.8) 100%);
   background: linear-gradient(to bottom, rgba(16, 75, 149, 0.8) 0%, rgba(16, 75, 149, 0.8) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc1b2429', endColorstr='#cc1b2429', GradientType=0);
   position: relative;
}

.slider-captions {
   position: absolute;
   bottom: 147px;
   /* 👈 Text thoduk niche laavse */
}


.slider-title {
   color: #fff;
   font-size: 52px;
   font-weight: 700;
   line-height: 62px;
}

.slider-text {
   color: #fff;
}

.slider .owl-prev {
   position: absolute;
   left: 0px;
   top: 40%;
   left: 20px;
}

.slider .owl-next {
   position: absolute;
   right: 0px;
   top: 40%;
   right: 20px;
}

#slider .owl-next,
#slider .owl-prev {
   background-color: transparent !important;
   border: 2px solid #fff;
   color: #fff;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   transition: all 0.3s;
}

#slider .owl-next:hover,
#slider .owl-prev:hover {
   background-color: #001f3f !important;
   border: 2px solid #fff;
   color: white;
}

#slider .owl-pagination {
   margin: 0px;
   bottom: 40px;
   position: relative;
}

#slider .owl-page span {
   border-radius: 2px;
   width: 98%;
   height: 1px;
   background-color: #fff;
   margin: 0px;
}

#slider .owl-page {
   width: 5%
}

/* ================================
   SLIDER RESPONSIVE FIX
================================ */

/* Tablet (≤ 991px) */
@media (max-width: 991px) {
   .slider-captions {
      bottom: 100px;
      padding: 0 20px;
   }

   .slider-title {
      font-size: 18px;
      line-height: 48px;
   }

   .slider-text {
      font-size: 12px;
   }

   .slider .owl-prev,
   .slider .owl-next {
      top: 45%;
   }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
   .slider-captions {
      position: absolute;
      bottom: 70px;
      text-align: center;
      width: 100%;
      padding: 0 15px;
   }

   .slider-title {
      font-size: 28px;
      line-height: 36px;
   }

   .slider-text {
      font-size: 15px;
   }

   .slider .owl-prev,
   .slider .owl-next {
      display: none;
      /* hide arrows on mobile */
   }
}

/* Small Mobile (≤ 480px / 430px) */
@media (max-width: 480px) {
   .slider-captions {
      bottom: 50px;
   }

   .slider-title {
      font-size: 22px;
      line-height: 30px;
   }

   .slider-text {
      font-size: 14px;
   }
}


/*-----------------------------------------
index-1
------------------------------------------*/
.mail-text {
   border-right: 2px solid #1b5ca5;
}

.rate-table {
   position: relative;
   background-color: #001f3f;
   border-top: 1px solid #dee7f2;
   border-bottom: 1px solid #dee7f2;
   /* margin-top: 50px; */
   overflow: hidden;
   /* Important: background stays inside */
}

/* Animated dotted background layer */
.rate-table::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 200%;
   height: 200%;
   background-image: radial-gradient(#ffffff40 2px, transparent 2px);
   background-size: 40px 40px;
   animation: zoomDots 8s infinite ease-in-out;
   z-index: 0;
}

/* Content stays above animation */
.rate-table * {
   position: relative;
   z-index: 1;
}

/* Zoom animation */
@keyframes zoomDots {
   0% {
      transform: scale(1);
      opacity: 0.5;
   }

   50% {
      transform: scale(1.2);
      opacity: 0.7;
   }

   100% {
      transform: scale(1);
      opacity: 0.5;
   }
}

/* Responsive improvements */
@media (max-width: 768px) {
   .rate-table::before {
      background-size: 25px 25px;
      opacity: 0.4;
   }
}


.loan-rate {
   font-size: 32px;
   color: #ffffff !important;
   margin-bottom: 0px;
   font-weight: 600;
   line-height: 1;
}

.rate-counter-block {
   border-right: 1px solid rgba(255, 255, 255, 0.2);
   padding-top: 20px;
   padding-bottom: 20px;
}

@media(max-width: 768px) {
   .rate-counter-block {
      border-right: none;
   }
}


.rate-counter-block:first-child {}

.rate-icon {
   float: left;
   padding-top: 5px;
   padding-right: 20px;
   padding-left: 20px;
}

.rate-box {}

.rate-title {
   text-transform: uppercase;
   font-size: 14px;
   color: #dbe4ff !important;
   /* soft light blue */

}

.cta {
   background-size: cover;
   margin: 0;
   min-height: 410px;
   border: none;
   padding: 100px 0px;
   background: linear-gradient(rgba(16, 75, 149, 0.8), rgba(16, 75, 149, 0.8)), rgba(16, 75, 149, 0.8) url(../images/cta-img.jpg) no-repeat center;
}

.testimonial-img-1 {}

.testimonial-name-1 {
   color: #15549a;
   font-size: 14px;
   text-transform: uppercase;
   font-weight: 500;
   margin-bottom: 0px;
}

/*------------------------------------
 index-3 (updated: 16 june 2017)
-------------------------------------*/
.header-transparent {
   background-color: rgba(255, 255, 255, .1);
   padding-top: 19px;
   padding-bottom: 19px;
   border-bottom: 1px solid rgba(255, 255, 255, .08);
   position: fixed;
   z-index: 9;
   width: 100%;
}

.header-transparent #navigation>ul>li.has-sub>a {
   padding-right: 30px;
}

.header-transparent #navigation>ul>li>a {
   padding: 16px 10px;
   font-size: 13px;
   text-decoration: none;
   color: #fff;
   font-weight: 600;
   text-transform: uppercase;
}

.header-transparent #navigation {
   float: right;
   margin-top: 0px;
   position: relative;
   z-index: 99;
}

.top-nav-collapse {
   background-color: #15549a;
}

.lender-logo-section {
   margin-top: -20px;
}

.lender-box {
   margin-bottom: 8px;
   margin-top: 8px;
}

.slider-gradient-img img {
   position: relative;
   z-index: -1;
   width: 100%;
}

.slider-gradient-img {
   position: relative;
   background: -moz-linear-gradient(-45deg, rgba(31, 43, 112, 0.9) 0%, rgba(31, 43, 112, 0.9) 47%, rgba(148, 58, 158, 0.9) 100%);
   background: -webkit-linear-gradient(-45deg, rgba(31, 43, 112, 0.9) 0%, rgba(31, 43, 112, 0.9) 47%, rgba(148, 58, 158, 0.9) 100%);
   background: linear-gradient(135deg, rgba(25, 46, 167, 0.9) 0%, rgba(24, 40, 134, 0.9) 47%, rgba(148, 58, 158, 0.9) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e61f2b70', endColorstr='#e6943a9e', GradientType=1);
}

.service-block-v3 {
   background-color: #fff;
   padding: 40px 0px 0px 0px;
   text-align: center;
   margin-bottom: 30px;
}

.service-block-v3 .service-content {
   padding: 5px 30px;
}

.service-block-v3 .service-title {
   margin-bottom: 20px;
   line-height: 24px;
}

.service-rate-block {
   margin-bottom: 30px;
}

.service-rate-block .product-rate {
   color: #f51f8a;
   margin-bottom: 6px;
   font-size: 18px;
}

.rate-text {
   font-size: 12px;
}

.customer-block {
   background-color: #fff;
   padding: 30px;
}

.customer-img {
   position: relative;
   margin-bottom: 30px;
}

.customer-content {}

.customer-text {
   color: #3c4d6b;
   font-size: 21px;
   margin-bottom: 30px;
   font-family: 'Merriweather', serif;
   letter-spacing: -1px;
   font-style: italic;
   line-height: 36px;
   font-weight: normal;
}

.customer-name {
   font-size: 14px;
   font-weight: 600;
   color: #f51f8a;
}

.customer-meta {}

.customer-quote-circle {
   background-color: #f51f8a;
   border-radius: 100%;
   padding: 10px;
   position: absolute;
   width: 40px;
   height: 40px;
   top: 20px;
   left: 30px;
   color: #fff;
   text-align: center;
   z-index: 1;
}

.how-it-block {
   background-color: #fff;
   padding: 30px;
   min-height: 320px;
}

.how-it-no {
   font-size: 76px;
   line-height: 86px;
   color: #15549a;
}

.how-it-content {}

/*------------------------------------
 index-4 Students Home page
-------------------------------------*/
.students-slider-img {}

.students-slider-img img {
   width: 100%;
}

.student-slider-img .slider-captions {}

.fee-charges-table {}

.fee-charges-table .list-group-item.active {
   z-index: 2;
   color: #414855;
   background-color: #ccd8e5;
   border-color: #ccd8e5;
}

.fee-charges-table .list-group-item {
   position: relative;
   display: block;
   padding: 10px 15px;
   margin-bottom: -1px;
   background-color: #eff4f9;
   border: 1px solid #d1deeb;
}

.education-rate-box {
   background-color: #eff4f9;
   padding: 20px;
   border-radius: 4px;
   margin-bottom: 5px;
}

.education-rate-number {
   font-size: 32px;
   margin-bottom: 0px;
}

/*------------------------------------
 index-5 Business Loan Home Page
-------------------------------------*/
.business-loan-products {
   background-color: #fff;
   padding: 40px;
   border: 1px solid #dee4ee;
   text-align: center;
   margin-bottom: 30px;
}

.loan-products-icon {
   margin-bottom: 20px;
}

.loan-products-content {}

.video-play {
   position: absolute;
   top: 24%;
   left: 41%;
}

.section-about-video {}

.about-img {
   position: relative;
}

.business-request-form {
   margin-bottom: -180px;
}

.business-request-form h3 {
   margin-bottom: 30px;
}

.business-request-form .form-group {
   margin-bottom: 0px;
}

.lender-block {
   padding: 80px 40px;
   background-color: #fff;
   border: 1px solid #dee4ee;
   border-radius: 4px;
   text-align: center;
}

.rate-badge {
   background: #104b8c;
   display: inline-block;
   padding: 4px 10px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 600;
   color: #fff;
}

/*------------------------------------
 index-6 Lead Genrator
-------------------------------------*/
.header-wide {}

.header-wide .lead {
   font-size: 21px;
   color: #778191;
   margin-top: 12px;
}

.lead-hero-wrapper {
   background: url(../images/lead-hero-img.jpg)no-repeat;
   background-size: cover;
   padding-top: 80px;
   padding-bottom: 80px;
}

.lead-hero-caption {
   color: #fff;
   padding-top: 50px;
   margin-bottom: 20px;
}

.rating-list {
   color: #f99d31;
   margin-top: 25px;
   font-size: 14px;
}

.lead-hero-title {
   font-size: 48px;
   color: #fff;
   line-height: 58px;
}

.lead-calculator {
   background: #15549a;
   color: #fff;
   border-radius: 6px;
}

.lead-calculator .ui-widget.ui-widget-content {
   border: 1px solid #064489;
}

.lead-calculator .ui-widget-header {
   border: 1px solid #61a6f2;
   background: #61a6f2;
}

.lead-calculator .ui-widget-content {
   border: 1px solid #61a6f2;
   background: #61a6f2;
}

.lead-cal-small-text {
   font-size: 12px;
   color: #70adf0;
}

.pink-circle {}

.pink-circle.circle {
   background-color: transparent;
   width: 60px;
   height: 60px;
   border: 2px solid #f51f8a;
   border-radius: 100px;
   color: #f51f8a;
   text-align: center;
   padding: 10px;
   margin: 0px auto 30px auto;
   line-height: 1.7;
   display: inline-block;
}

.highlight-outline {
   border-radius: 2px;
}

.highlight-outline.outline:hover {
   border-color: #15549a;
   -webkit-box-shadow: 1px 1px 9px 2px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 1px 1px 9px 2px rgba(0, 0, 0, 0.2);
   box-shadow: 1px 1px 9px 2px rgba(0, 0, 0, 0.2);
}

.counter-wrapper {
   background: url(../images/counter-wrapper.jpg)no-repeat;
   background-size: cover;
   padding-top: 150px;
   padding-bottom: 150px;
   text-align: center;
}

.counter-block {
   text-align: center;
   display: inline-block;
   margin-bottom: 20px;
}

.counter {
   display: inline-block;
   font-size: 46px;
   border-radius: 50%;
   color: #fff;
   font-weight: 600;
   margin-bottom: 20px;
}

.lead-testimonial .customer-quote-circle {
   position: initial;
   margin-bottom: 20px;
}

.lead-testimonial .testimonial-text {
   font-size: 18px;
   font-style: italic;
   font-family: 'Poppins', sans-serif;
   line-height: 28px;
}

.about-lead-text {
   font-size: 19px;
   line-height: 30px;
}

.loan-block {
   background-color: #286ab3;
   padding: 40px 50px;
   color: #b0ceef;
   text-align: center;
   margin-bottom: 30px;
}

.loan-icon {
   margin-bottom: 30px;
}

.loan-content {}

.lead-calculator .slider .ui-widget-content .ui-state-default {
   background-color: #f51f8a !important;
   border-radius: 100%;
}

.percentage-text {
   position: relative;
   bottom: 28px;
   left: 32px;
}

.counter-small-text {
   font-size: 48px;
   font-weight: 600;
   margin-left: 10px;
   color: #fff;
}

/*------------------------------------
 index-7 homepage tab (11 June, 2018)
-------------------------------------*/
.header-regular {}

.header-regular.header {
   background-color: #15549a;
   color: #fff;
   padding-bottom: 13px;
   padding-top: 13px;
}

.header-regular.header #navigation>ul>li>a {
   color: #fff;
}

.nav-call-info {
   padding-top: 17px;
}

.header-regular .logo {
   line-height: 3.3;
}

.header-regular #navigation.small-screen #menu-button {
   color: #fff;
}

.header-regular #navigation.small-screen #menu-button:before {
   background: #fff;
}

.header-regular #navigation.small-screen #menu-button:after {
   border-top: 2px solid #fff;
   border-bottom: 2px solid #fff;
}

.hero-section {
   background: url(../images/hero-img-1.jpg)no-repeat;
   background-size: cover;
   background-position-x: center;
}

.hero-tab-block {
   padding-top: 241px;
   padding-bottom: 100px;
}

.hero-tab-block .st-tabs .nav-link {
   padding: 18px 25px;
   text-align: center;
   margin-right: -1px;
   margin-left: -1px;
}

.loan-form {}

.hero-tab-block .st-tabs a {
   text-transform: capitalize;
}

.hero-tab-block .st-tabs .nav-tabs .nav-item.show .nav-link,
.hero-tab-block .nav-tabs .nav-link.active {
   color: #f51f8a;
   background-color: white;
   border-color: #ffffff #ffffff #ffffff #ffffff;
}

.hero-tab-block .nav-tabs {
   border-bottom: transparent;
}

.hero-tab-block .btn-default {
   color: #fff;
}

.hero-tab-block .btn-default:hover {
   color: #fff;
}

.hero-tab-block .st-tabs .tab-content {
   border: transparent;
}

.hero-tab-block .tab-content {
   border: transparent;
}

/* Nice Select 
-------------------------------------------------------------- */
.nice-select {
   -webkit-tap-highlight-color: transparent;
   background-color: #f3f7fa;
   border-radius: 2px;
   border: solid 2px #d5e0e8;
   box-sizing: border-box;
   clear: both;
   cursor: pointer;
   display: block;
   float: left;
   font-family: inherit;
   font-size: 14px;
   font-weight: normal;
   height: 64px;
   line-height: 40px;
   outline: none;
   padding: 9px 14px;
   position: relative;
   text-align: left !important;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
   width: auto;
   color: #3c4d6b;
}

.nice-select:hover {
   border-color: #dbdbdb;
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
   border-color: #15549a;
}

.nice-select:after {
   border-bottom: 2px solid #3c4d6b;
   border-right: 2px solid #3c4d6b;
   content: '';
   display: block;
   height: 7px;
   margin-top: -4px;
   pointer-events: none;
   position: absolute;
   right: 14px;
   top: 50%;
   -webkit-transform-origin: 66% 66%;
   -ms-transform-origin: 66% 66%;
   transform-origin: 66% 66%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   width: 7px;
}

.nice-select.open:after {
   -webkit-transform: rotate(-135deg);
   -ms-transform: rotate(-135deg);
   transform: rotate(-135deg);
}

.nice-select.open .list {
   opacity: 1;
   pointer-events: auto;
   -webkit-transform: scale(1) translateY(0);
   -ms-transform: scale(1) translateY(0);
   transform: scale(1) translateY(0);
}

.nice-select.disabled {
   border-color: #ededed;
   color: #999;
   pointer-events: none;
}

.nice-select.disabled:after {
   border-color: #cccccc;
}

.nice-select.wide {
   width: 100%;
}

.nice-select.wide .list {
   left: 0 !important;
   right: 0 !important;
}

.nice-select.right {
   float: right;
}

.nice-select.right .list {
   left: auto;
   right: 0;
}

.nice-select.small {
   font-size: 12px;
   height: 36px;
   line-height: 34px;
}

.nice-select.small:after {
   height: 4px;
   width: 4px;
}

.nice-select.small .option {
   line-height: 34px;
   min-height: 34px;
}

.nice-select .list {
   border: 1px solid #999999;
   background-color: #fff;
   border-radius: 2px;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
   box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
   box-sizing: border-box;
   margin-top: 0px;
   opacity: 0;
   overflow: hidden;
   padding: 0;
   pointer-events: none;
   position: absolute;
   top: 100%;
   left: 0;
   -webkit-transform-origin: 50% 0;
   -ms-transform-origin: 50% 0;
   transform-origin: 50% 0;
   -webkit-transform: scale(0.75) translateY(-21px);
   -ms-transform: scale(0.75) translateY(-21px);
   transform: scale(0.75) translateY(-21px);
   -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
   transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
   z-index: 9;
}

.nice-select .list:hover .option:not(:hover) {
   background-color: transparent !important;
}

.nice-select .option {
   cursor: pointer;
   font-weight: 400;
   line-height: 40px;
   list-style: none;
   min-height: 40px;
   outline: none;
   padding-left: 18px;
   padding-right: 29px;
   text-align: left;
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
   color: #3c4d6b;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
   background-color: #f3f7fa;
}

.nice-select .option.selected {
   font-weight: bold;
}

.nice-select .option.disabled {
   background-color: transparent;
   color: #343031;
   cursor: default;
}

.no-csspointerevents .nice-select .list {
   display: none;
}

.no-csspointerevents .nice-select.open .list {
   display: block;
}

.process-section {
   position: relative;
}

.process-section .circle {
   background-color: #fff;
   border: 3px solid #f51f8a;
   color: #f51f8a;
   margin: -32px auto 18px auto;
   position: relative;
}

.process-img {}

.rating-testimonials {}

.rating-testimonials .lead {
   font-size: 20px;
   font-weight: 600;
   line-height: 28px;
   margin-bottom: 18px;
}

.rating-testimonials .testimonial-text {
   font-family: inherit;
   color: #414855;
   font-style: normal;
   line-height: 27px;
   font-size: 18px;
}

.rating-testimonials .testimonial-name-1 {
   color: #585f66;
   font-size: 14px;
   text-transform: uppercase;
   font-weight: 600;
   margin-bottom: 0px;
}

/*---------------------------------------------------
 index-8 homepage student-refinance (11 June, 2018)
-----------------------------------------------------*/
.header-wide {
   padding-top: 10px;
   padding-bottom: 10px;
}

.refinance-hero-section {
   background: url(../images/hero-img-2.jpg)no-repeat;
   background-size: cover;
   position: relative;
   background-position-x: center;
}

.refinance-hero-block {
   padding-top: 164px;
   padding-bottom: 164px;
}

.refinance-hero-block h1 {
   font-size: 48px;
   line-height: 58px;
}

.refinance-rate-section {
   background-color: rgba(21, 84, 154, 0.8);
   color: #fff;
   padding: 20px 25px;
   position: absolute;
   bottom: 0;
   border-bottom: 5px solid #0a4b94;
}

.refinance-rate-block {
   display: inline-block;
   margin-right: 20px;
   line-height: 2;
}

.refinance-rate-block-title {
   letter-spacing: 0px;
   font-weight: 600;
   font-size: 32px;
   margin-bottom: 0px;
   color: #fff;
}

.how-it-section {
   color: #fff;
}

.how-it-section .how-it-block {
   background-color: transparent;
   padding: 0px;
   min-height: inherit;
   margin-bottom: 30px;
}

.how-it-section .how-it-no {
   float: left;
   color: #fff;
   font-size: 30px;
   height: 67px;
   width: 67px;
   background-color: #276ebc;
   border-radius: 100%;
   display: block;
   line-height: 1;
   padding: 20px 26px;
}

.how-it-section .how-it-content {
   padding-left: 100px;
}

.benifits-feature {
   margin-bottom: 30px;
}

.benifits-feature ul {}

.benifits-feature ul li {
   padding-left: 20px;
   margin-bottom: 35px;
}

.benifits-feature .bullet-check-circle-default li:before {
   font-size: 20px;
}

.loan-rate-table {}

.loan-rate-table .table-light {
   background-color: #eff5ff;
   margin-bottom: 30px;
}

.loan-rate-table .table thead {
   background-color: #e6f0ff;
}

.loan-rate-table .table>thead>tr>th {
   text-align: center;
   color: #15549a;
   font-size: 18px;
   border-top: transparent;
   border-bottom: transparent;
   padding: 20px 43px 20px;
}

.loan-rate-table .table tbody tr td {
   text-align: center;
   font-size: 16px;
   color: #414855;
   font-weight: 600;
   border-top: transparent;
   padding: 20px 0px;
}

.loan-half-img {}

.loan-half-section {
   padding: 100px;
}

/*---------------------------------------------------
compare card table
-----------------------------------------------------*/
.compare-table {}

.compare-card-title {
   font-size: 18px;
   font-weight: 600;
}

.compare-table .table>thead>tr>th {
   padding: 12px 0px 10px 29px;
   text-align: left;
   font-weight: 500;
}

.compare-table .table>tbody>tr>td {
   border-top: transparent;
   padding: 30px;
   vertical-align: middle;
}

.compare-table .table {
   margin-bottom: 0px;
}

.expandable-info {
   background-color: #fafafb;
   padding: 0px !important;
}

.expandable-collapse {
   padding: 30px;
}

.expandable-info ul li {
   font-size: 14px;
   line-height: 24px;
}

.expandable-info .card {
   min-height: 285px;
}

.expandable-info .card-body {
   padding: 20px 20px 5px;
}

.card-tag {}

.card-name {}

.anuual-fees {}

.reward-rate {}

.compare-table .btn-link {
   font-size: 13px;
   padding-bottom: 0px;
}

/*---------------------------------------------------
compare personal loan table
-----------------------------------------------------*/
.compare-personal-loan-table {}

.compare-personal-loan-title {
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 0px;
   color: #414855;
}

.compare-personal-loan-table .table>thead>tr>th {
   background-color: #f3f7fc;
   padding: 20px 0px 20px 29px;
   text-align: left;
   font-weight: 500;
}

.compare-personal-loan-table .table>tbody>tr>td {
   border-top: transparent;
   padding: 30px;
   vertical-align: middle;
}

.compare-personal-loan-table .table {
   margin-bottom: 0px;
}

.compare-personal-loan-table .list-group-item {
   position: relative;
   display: block;
   padding: 16px;
   margin-bottom: -1px;
   background-color: #fff;
   border: 1px solid rgba(222, 227, 235, 1);
   font-size: 15px;
   color: #414855;
   font-weight: 600;
}

.lender-tag {}

.estimate-tex {}

.credit-score {}

.terms {}

.monthly-payment {}

/*---------------------------------------------------
compare Student loan table
-----------------------------------------------------*/
.compare-student-loan-table {}

.compare-student-loan-title {
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 0px;
   color: #414855;
}

.compare-student-loan-table .table>thead>tr>th {
   background-color: #f3f7fc;
   padding: 20px 0px 20px 29px;
   text-align: left;
   font-weight: 500;
}

.compare-student-loan-table .table>tbody>tr>td {
   border-top: transparent;
   padding: 30px;
   vertical-align: middle;
}

.compare-student-loan-table .table {
   margin-bottom: 0px;
}

.compare-student-loan-table .list-group-item {
   position: relative;
   display: block;
   padding: 16px;
   margin-bottom: -1px;
   background-color: #fff;
   border: 1px solid rgba(222, 227, 235, 1);
   font-size: 15px;
   color: #414855;
   font-weight: 600;
}

.lender-tag {}

.fixed-text {}

.variable-apr {}

.terms {}

/*---------------------------------------------------
    Card Landing Page
-----------------------------------------------------*/
.header-wide {
   padding-top: 10px;
   padding-bottom: 10px;
}

.card-hero-section {
   padding-top: 100px;
   padding-bottom: 100px;
   background: rgba(19, 88, 144, 1);
   background: -moz-linear-gradient(-45deg, rgba(19, 88, 144, 1) 0%, rgba(19, 88, 144, 1) 37%, rgba(59, 64, 160, 1) 57%, rgba(59, 64, 160, 1) 77%, rgba(59, 64, 160, 1) 100%);
   background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(19, 88, 144, 1)), color-stop(37%, rgba(19, 88, 144, 1)), color-stop(57%, rgba(59, 64, 160, 1)), color-stop(77%, rgba(59, 64, 160, 1)), color-stop(100%, rgba(59, 64, 160, 1)));
   background: -webkit-linear-gradient(-45deg, rgba(19, 88, 144, 1) 0%, rgba(19, 88, 144, 1) 37%, rgba(59, 64, 160, 1) 57%, rgba(59, 64, 160, 1) 77%, rgba(59, 64, 160, 1) 100%);
   background: -o-linear-gradient(-45deg, rgba(19, 88, 144, 1) 0%, rgba(19, 88, 144, 1) 37%, rgba(59, 64, 160, 1) 57%, rgba(59, 64, 160, 1) 77%, rgba(59, 64, 160, 1) 100%);
   background: -ms-linear-gradient(-45deg, rgba(19, 88, 144, 1) 0%, rgba(19, 88, 144, 1) 37%, rgba(59, 64, 160, 1) 57%, rgba(59, 64, 160, 1) 77%, rgba(59, 64, 160, 1) 100%);
   background: linear-gradient(135deg, rgba(19, 88, 144, 1) 0%, rgba(19, 88, 144, 1) 37%, rgba(59, 64, 160, 1) 57%, rgba(59, 64, 160, 1) 77%, rgba(59, 64, 160, 1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#135890', endColorstr='#3b40a0', GradientType=1);
}

.card-hero-block {}

.card-benefit-tabs .st-tabs .tab-content {
   padding: 0px;
   border: none;
   background-color: transparent;
   margin-top: 30px;
}

.card-benefit-tabs .nav-tabs {
   border-bottom: 0px;
}

.card-benefit-tabs .st-tabs .nav-link {
   display: block;
   padding: 16px 49px;
   border: 1px solid #f6f9ff;
   border-radius: 5px;
   background-color: #f6f9ff;
   margin-bottom: -1px;
   margin-right: 10px;
}

.card-benefit-tabs .st-tabs a {
   font-size: 14px;
   font-style: initial;
   text-transform: capitalize;
   font-weight: 500;
   color: #7e93ae;
}

.card-benefit-tabs .st-tabs .nav-tabs .nav-item.show .nav-link,
.card-benefit-tabs .st-tabs .nav-tabs .nav-link.active {
   color: #ffffff;
   background-color: #15549a;
   border-color: #15549a;
}

.card-rate-info .list-group-item {
   position: relative;
   display: block;
   padding: 19px 30px;
   margin-bottom: 2px;
   background-color: #e8f0f9;
   border: transparent;
   font-size: 14px;
   border-radius: 0px;
}

/*---------------------------------------------------
    Card Landing Page
-----------------------------------------------------*/
.header-standard {}

.header-standard.header {
   padding-bottom: 0px;
   padding-top: 0px;
}

.top-header {
   padding-top: 22px;
   padding-bottom: 22px;
}

.quick-info {
   float: right;
   font-size: 16px;
   color: #414855;
   font-weight: 600;
   padding-top: 9px;
}

.header-standard .search-btn {
   border-radius: 2px;
   width: 46px;
   height: 42px;
   padding: 10px 0px 0px 0px;
   margin-top: 0px;
   color: #ffffff;
   background-color: #15549a;
   display: inline-block;
}

.header-standard #navigation {
   float: inherit;
   margin-top: -1px;
}

.header-standard #navigation>ul>li>a {
   padding: 22px 35px;
   color: #ffffff;
   font-weight: 400;
}

.slider-second .slider-img {
   background: none;
}

.slider-second#slider {
   margin-bottom: -1px;
}

.slider-second#slider .owl-pagination {
   display: none;
}

.overlay-section {
   margin-top: -60px;
}

.hover-tabs {}

.hover-tabs.st-tabs .nav-link {
   display: block;
   padding: 16px 68px 16px 0px;
   border: none;
   border-radius: 0px;
   background-color: transparent;
   margin-bottom: 10px;
}

.hover-tabs.st-tabs .tab-content {
   padding: 30px;
   border: 1px solid #ffffff;
   background-color: #fff;
   margin-top: -1px;
   border-radius: 5px;
}

.hover-tabs.st-tabs a {
   font-size: 16px;
   font-style: initial;
   text-transform: capitalize;
   font-weight: 500;
   color: #15549a;
}

.post-caption-block {
   position: relative;
}

.post-caption-img {}

.post-caption-img img {
   border-radius: 3px;
}

.post-caption-content {
   position: absolute;
   bottom: 0px;
   padding: 27px;
}

.post-caption-block .meta {
   text-transform: capitalize;
}

.cta-section-app {
   background: url(../images/cta-img-4.jpg)no-repeat;
   background-size: cover;
   background-position-x: 50%;
}


/*---------------------------------------------------
    borrow-life-saving
-----------------------------------------------------*/
.bank-account-tabs {}

.bank-account-tabs.st-tabs .nav-link {
   background-color: #f4f6f8;
   border-color: #f4f6f8;
}

.bank-account-tabs.st-tabs .tab-content {
   background-color: #eff1f3;
   border-color: #eff1f3;
}

.bank-account-tabs.st-tabs .nav-tabs .nav-item.show .nav-link,
.bank-account-tabs.st-tabs .nav-tabs .nav-link.active {
   color: #f51f8a;
   background-color: #eff1f3;
   border-color: #eff1f3;
}


.bank-account-tabs .tab-content .table>thead>tr>th {
   line-height: 1.42857143;
   vertical-align: top;
   border-top: 0px;
   padding: 18px 10px;
   text-align: left;

}










/*-----------------------------------------------------------------------
Service Page & Block Css
----------------------------------------------------------------------*/
#service {}

#service .owl-next,
#service .owl-prev {
   background-color: transparent !important;
   border: 2px solid #a3b1c1;
   color: #a3b1c1;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   transition: all 0.3s;
}

#service .owl-next:hover,
#service .owl-prev:hover {
   background-color: #001f3f !important;
   border: 2px solid #001f3f;
   color: #fff;
}

.service-block {
   transition: box-shadow .5s;
}

.service-block:hover {
   -webkit-box-shadow: 0px 4px 26px 3px rgba(213, 221, 234, 1);
   -moz-box-shadow: 0px 4px 26px 3px rgba(213, 221, 234, 1);
   box-shadow: 0px 4px 26px 3px rgba(213, 221, 234, 1);
}

.service-block:hover i {
   color: #f51f8a;
}

#service .owl-controls {
   text-align: center;
   margin-top: 10px;
}

.icon-svg-2x {
   width: 80px;
}

.icon-svg-1x {
   width: 60px;
}

.service-block {
   min-height: 420px;
   /* 🔹 Adjust this number to control box height */
   max-height: 420px;
   /* 🔹 Locks the height so all boxes stay equal */
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   text-align: center;
   overflow: hidden;
   /* hides overflow text if any */
}


/*--------------------------------
Service-img
---------------------------------*/
.service-img-box {
   transition: box-shadow .5s;
}

.service-img-box:hover {
   -webkit-box-shadow: 0px 4px 26px 3px rgba(213, 221, 234, 1);
   -moz-box-shadow: 0px 4px 26px 3px rgba(213, 221, 234, 1);
   box-shadow: 0px 4px 26px 3px rgba(213, 221, 234, 1);
}

.service-img {
   position: relative;
}

.service-content {}

.service-content>h2 {
   margin-bottom: 0px;
}

.circle {
   background-color: #e3f0fe;
   width: 60px;
   height: 60px;
   border: 1px solid #15549a;
   border-radius: 100px;
   color: #15549a;
   margin: -70px auto 40px auto;
   padding: 10px;
   text-align: center;
   line-height: 1.7;
}

.number {
   font-size: 24px;
   font-weight: 500;
}

.number-block {
   text-align: center;
}

.number-title {
   margin-bottom: 20px;
}

.circle-large {
   width: 100px;
   height: 100px;
   border-radius: 100%;
   line-height: 2;
   padding: 10px;
   text-align: center;
   font-size: 42px;
}

.circle-default {
   background-color: #f51f8a;
   color: #fff;
}

/*--------------------------------
testimonial
---------------------------------*/
.testimonial-block {
   position: relative;
}

.testimonial-text {
   font-family: 'Merriweather', serif;
   color: #414855;
   font-style: italic;
   line-height: 32px;
}

.testimonial-autor {
   padding-top: 15px;
   padding-bottom: 12px;
}

.testimonial-name {
   color: #fff;
   line-height: 1;
   margin-bottom: 5px;
}

.testimonial-autor-box {}

.testimonial-title {
   color: #f51f8a;
   margin-bottom: 0px;
}

.testimonial-img {
   float: left;
   padding-right: 29px;
}

.testimonial-meta {
   font-size: 12px;
}

.testimonial-simple {}

.testimonial-name-inverse {
   color: #15549a;
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 600;
}

.client-rating {
   margin-bottom: 10px;
}

.rate-done {
   color: #f9b218;
   letter-spacing: 3px;
}

.rate-remain {
   color: #c7ced5;
}

/*--------------------------------
footer
---------------------------------*/
.newsletter-form {
   margin-bottom: 30px;
}

.newsletter-title {
   color: #778191;
   margin-top: 10px;
}

.footer {
   background-color: #1e2127;
}

.footer-logo {
   margin-bottom: 30px;
}

.widget-footer {}

.widget-footer ul {}

.widget-footer ul li {
   line-height: 1.6;
   margin-bottom: 8px;
}

.widget-footer ul li a {
   color: #778191;
}

.widget-footer ul li a:hover {
   color: white;
}

.tiny-footer {
   background-color: #16191e;
   font-size: 12px;
   padding-top: 10px;
   padding-bottom: 10px;
}

.widget-footer {
   position: relative;
   padding-left: 20px;
   line-height: 32px;
}

.widget-footer ul li:before {
   font-family: 'FontAwesome';
   display: block;
   position: absolute;
   left: 0;
   font-size: 15px;
   color: #778191;
   content: "\f105";
}

.widget-social {}

.widget-social ul {}

.widget-social ul li {
   line-height: 1.6;
   margin-bottom: 8px;
}

.widget-social ul li a {
   color: #778191;
   text-transform: uppercase;
   font-weight: 500;
}

.widget-social ul li a i {
   width: 30px;
}

.widget-social ul li a:hover {
   color: white;
   text-decoration: underline;
}

.address-text {}

.call-text {}

.call-text span {
   padding-right: 10px;
   vertical-align: -webkit-baseline-middle;
}

/*--------------------------------
Page header 
---------------------------------*/
.page-header {
   margin: 0;
   padding: 175px 0px 80px;
   min-height: 410px;
   border: none;
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(0, 0, 0, 0.2) url(../images/page-header.jpg) no-repeat center;
   background-size: cover;
}

.page-title {
   margin-bottom: 0px;
   font-size: 36px;
   color: white;
}

.rate-block {
   text-align: right;
}

.rate-number {
   margin-bottom: 0px;
   line-height: 1;
   color: #f51f8a;
}

.btn-action {
   text-align: right;
}

.sub-nav {
   background-color: #eff3f8;
   border-top: 1px solid #dee7f2;
}

.is-sticky .sub-nav {
   position: relative;
   z-index: 9;
   top: 120px;
}

.sub-nav>.nav {}

.sub-nav>.nav li a {
   padding: 16px;
   font-size: 14px;
   text-transform: uppercase;
   color: #7e93ae;
   font-weight: 500;
   border-right: 1px solid #dee7f2;
}

.sub-nav>.nav li a:hover {
   background-color: #fff;
   color: #f51f8a;
}

.sub-nav>.nav li a:focus {
   background-color: #fff;
   color: #f51f8a;
}

.sub-nav>.nav li.active a {
   color: red;
   background-color: #fff;
   color: #f51f8a;
}

.page-breadcrumb {}

.page-breadcrumb .breadcrumb {
   background-color: transparent;
   padding: 0px;
   font-size: 12px;
   text-transform: uppercase;
   color: #15549a;
   font-weight: 700;
}

.page-breadcrumb .breadcrumb>li {}

.page-breadcrumb .breadcrumb>.active {
   color: #fff;
   font-weight: 700;
}

.page-breadcrumb .breadcrumb>li a {
   color: #15549a;
   font-weight: 700;
}

.page-breadcrumb .breadcrumb>li a:hover {
   color: #f51f8a;
}

.page-breadcrumb .breadcrumb>li+li:before {
   padding: 0 5px;
   color: #15549a;
   content: "/\00a0";
}

/*--------------------------------
Blog  
---------------------------------*/
.post-holder {
   border-bottom: 1px solid #e8eaec;
   margin-bottom: 29px;
}

.post-header {
   border-bottom: 1px solid #dee4ee;
   margin-bottom: 20px;
   padding-bottom: 19px;
}

.post-block {}

.post-img {
   margin-top: 20px;
}

.meta {
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 600;
   color: #a4a7ac;
   margin-bottom: 14px;
   margin-top: 14px;
}

.meta span {
   margin-right: 0px;
}

.meta span:after {
   margin-left: 15px;
   margin-right: 15px;
   color: #b0b0b0;
   content: "|";
}

.meta span:last-child:after {
   margin-left: 0px;
   margin-right: 0px;
   content: "";
}

/*----- Related Post-----*/
.post-related {
   border-bottom: 1px solid #e8eaec;
}

.post-related-title {}

.post-related-content {}

.related-title {
   font-size: 18px;
   color: #4b5565;
}

.related-img {}

/*----- prev-next-----*/
.post-navigation {
   border-bottom: 1px solid #e8eaec;
   margin-bottom: 29px;
   padding-bottom: 30px;
}

.nav-links {}

.nav-previous {}

.prev-link,
.next-link {
   color: #778191;
   margin-bottom: 10px;
   display: block;
   text-decoration: underline;
   text-transform: uppercase;
   font-weight: 600;
   font-size: 14px;
   letter-spacing: 1px;
}

.nav-next {}

.next-link {}

.prev-link {}

.prev-link:hover,
.next-link:hover {
   color: #f51f8a
}

.meta-date {
   color: #001f3f;
   font-weight: 600;
}

.meta-author {}

.meta-comments {}

#post-gallery {}

.quote-block {}

.meta-link {
   color: #a4a7ac;
}

/*--------------------------------
Blog-sidebar  
---------------------------------*/
.widget {
   padding: 30px;
   margin-bottom: 30px;
}

.widget-title {
   border-bottom: 1px solid #e8eaec;
   margin-bottom: 19px;
   padding-bottom: 20px;
}

.widget-search {}

.widget-category {}

.widget-category li a,
.widget-archives li a {
   padding-top: 10px;
   padding-bottom: 10px;
   display: block;
   line-height: 14px;
   color: #797b80;
   font-size: 14px;
}

.widget-category li a:hover,
.widget-archives li a:hover {
   color: #f51f8a;
}

.widget-tags {}

.widget-tags a {
   text-transform: uppercase;
   border: 2px solid #c3c7d1;
   padding: 9px 16px;
   display: inline-block;
   margin-bottom: 5px;
   font-weight: 700;
   font-size: 12px;
   line-height: 12px;
   color: #9a9fab;
   border-radius: 4px;
   letter-spacing: 1px;
}

.widget-tags a:hover {
   background-color: #f51f8a;
   color: #fff;
   border-color: #f51f8a;
}

/*----- post-author-----*/
.post-author {
   border-bottom: 1px solid #e8eaec;
   margin-bottom: 29px;
   padding-bottom: 30px;
}

.author-img {}

.author-bio {}

.author-header {}

.author-header small {
   text-transform: uppercase;
   color: #de4526;
   font-weight: 700;
   margin-left: 15px;
}

.author-content {}

.author-social {}

.author-social a {
   color: #707070;
   display: inline-block;
   text-align: center;
   font-size: 13px;
   padding: 8px 12px;
}

.author-social a:hover {
   background-color: #de4526;
   color: #fff;
}

/*----- comments-----*/
.comments-area {
   border-bottom: 1px solid #e8eaec;
   padding-bottom: 40px;
}

.comments-title {
   margin-bottom: 40px;
}

.comment-list {}

.comment {}

.comment-body {
   margin-bottom: 60px;
}

.comment-author {}

.comment-author img {
   width: 120px;
   float: left;
}

.comment-info {
   padding-left: 160px;
}

.comment-header {}

.user-title {
   margin-bottom: 0px;
}

.comment-meta {
   margin-bottom: 20px;
   font-size: 13px;
   font-weight: 400;
   text-transform: uppercase;
}

.comment-meta-date {}

.comment-content {}

.reply {}

.reply-title {
   margin-bottom: 40px;
}

.childern {
   padding-left: 140px;
}

.leave-comments {
   background-color: #f3f5f5;
}

.widget-share {
   background-color: #fff;
   padding: 14px;
   position: absolute;
   top: 0px;
   right: -56px;
}

.btn-share {
   padding: 12px 16px;
   display: inline-block;
   line-height: 1;
   margin-bottom: 2px;
   font-size: 14px;
   width: 40px;
}

.btn-facebook {
   background-color: #3b5998;
   color: #fff;
}

.btn-facebook:hover {
   background-color: #3b5998;
   color: #fff;
}

.btn-twitter {
   background-color: #1da1f2;
   color: #fff;
}

.btn-twitter:hover {
   background-color: #1da1f2;
   color: #fff;
}

.btn-google {
   background-color: #dc483a;
   color: #fff;
}

.btn-google:hover {
   background-color: #dc483a;
   color: #fff;
}

.btn-linkedin {
   background-color: #0088b5;
   color: #fff;
}

.btn-linkedin:hover {
   background-color: #0088b5;
   color: #fff;
}

/*--------------------------------
Blog-single  
---------------------------------*/
.name {
   font-size: 14px;
   text-transform: uppercase;
   color: #f51f8a;
   font-weight: 600;
   padding-left: 30px;
}

/*--------------------------------
Pagination  
---------------------------------*/
.st-pagination {}

.st-pagination .pagination>li>a,
.pagination>li>span {
   position: relative;
   float: left;
   margin-left: -1px;
   line-height: 1.42857143;
   color: #9a9fab;
   text-decoration: none;
   font-size: 12px;
   border: 2px solid #c3c7d1;
   font-weight: 600;
   border-radius: 4px;
   text-transform: uppercase;
   margin-right: 3px;
   margin-bottom: 5px;
   background-color: #fff;
   padding: 8px 13px;
}

.st-pagination .pagination>li>a:focus,
.st-pagination .pagination>li>a:hover,
.st-pagination .pagination>li>span:focus,
.st-pagination .pagination>li>span:hover {
   z-index: 2;
   color: #fff;
   background-color: #001f3f;
   border-color: gray;
   border-radius: 4px;
}

.st-pagination .pagination>li:first-child>a,
.st-pagination .pagination>li:first-child>span {
   margin-left: 0;
   border-radius: 4px;
}

.st-pagination .pagination>li:last-child>a,
.st-pagination .pagination>li:last-child>span {
   border-radius: 4px;
}

.st-pagination .pagination>.active>a,
.st-pagination .pagination>.active>a:focus,
.st-pagination .pagination>.active>a:hover,
.st-pagination .pagination>.active>span,
.st-pagination .pagination>.active>span:focus,
.st-pagination .pagination>.active>span:hover {
   z-index: 3;
   color: #fff;
   cursor: default;
   background-color: #001f3f;
   border-color: gray;
   border-radius: 4px;
}

.st-accordion {}

.st-accordion .sign {
   color: #3c4d6b;
   padding: 0 2px;
   position: absolute;
   left: 0px;
   top: 5px;
   margin-left: -20px;
   font-size: 14px;
}

.st-accordion .accordion .panel-heading.active .sign {
   color: #95cd40;
}

.st-accordion .panel-title {
   margin-top: 0;
   margin-bottom: 0;
   font-size: 18px;
   color: inherit;
   position: relative;
   color: #3c4d6b;
}

.sign {
   color: #084988;
   padding: 0 2px;
   position: absolute;
   right: -10px;
   top: 6px;
}

.st-accordion .panel-heading.active .sign {
   color: #f51f8a;
}

.st-accordion .panel {
   margin-bottom: 20px;
   background-color: #fff;
   border: 1px solid transparent;
   border-radius: 0px;
   -webkit-box-shadow: none;
   box-shadow: none;
}

.st-accordion .panel-default {
   border-color: transparent;
   border-bottom: 1px solid #e0e7ea;
}

.st-accordion .panel-group .panel {
   margin-bottom: 10px;
   border-radius: 0px;
   -webkit-box-shadow: 0px 0px 0px 0px rgba(234, 234, 234, 1);
   -moz-box-shadow: 0px 0px 0px 0px rgba(234, 234, 234, 1);
   box-shadow: 0px 0px 0px 0px rgba(234, 234, 234, 1);
}

.st-accordion .panel-default>.panel-heading {
   color: #323734;
   background-color: #fff;
   border-bottom: 1px solid transparent;
   padding: 10px 0px 10px 30px;
}

.st-accordion .panel-group .panel-heading+.panel-collapse>.list-group,
.st-accordion .panel-group .panel-heading+.panel-collapse>.panel-body {}

.st-accordion .panel-body {
   padding: 30px;
}

.st-accordion .panel-group .panel-heading+.panel-collapse>.list-group,
.panel-group .panel-heading+.panel-collapse>.panel-body {
   border-top: 1px solid transparent;
}

/*--------------------------------
Extra Plugin CSS - Back to top  
---------------------------------*/
.cd-top {
   display: inline-block;
   height: 40px;
   width: 40px;
   position: fixed;
   bottom: 40px;
   right: 10px;
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
   visibility: hidden;
   border-radius: 5px;
   background: #001f3f url(../images/cd-top-arrow.svg) no-repeat center 50%;
   opacity: 0;
   -webkit-transition: opacity .3s 0s, visibility 0s .3s;
   -moz-transition: opacity .3s 0s, visibility 0s .3s;
   transition: opacity .3s 0s, visibility 0s .3s;
}

.cd-top.cd-is-visible,
.cd-top.cd-fade-out,
.no-touch .cd-top:hover {
   -webkit-transition: opacity .3s 0s, visibility 0s 0s;
   -moz-transition: opacity .3s 0s, visibility 0s 0s;
   transition: opacity .3s 0s, visibility 0s 0s;
}

.cd-top.cd-is-visible {
   /* the button becomes visible */
   visibility: visible;
   opacity: 1;
}

.cd-top.cd-fade-out {
   /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
   opacity: .5;
}

.no-touch .cd-top:hover {
   background-color: #cb2529;
   opacity: 1;
}

/*-------- filter gallery -------*/
.isotope-item {
   z-index: 2;
}

.isotope-hidden.isotope-item {
   pointer-events: none;
   z-index: 1;
}

.isotope,
.isotope .isotope-item {
   /* change duration value to whatever you like */
   -webkit-transition-duration: 0.8s;
   -moz-transition-duration: 0.8s;
   transition-duration: 0.8s;
}

.isotope {
   -webkit-transition-property: height, width;
   -moz-transition-property: height, width;
   transition-property: height, width;
}

.isotope .isotope-item {
   -webkit-transition-property: -webkit-transform, opacity;
   -moz-transition-property: -moz-transform, opacity;
   transition-property: transform, opacity;
}

.portfolioContainer {}

.portfolioFilter {
   margin-bottom: 30px;
   text-align: center;
}

.portfolioFilter a {
   text-transform: uppercase;
   background-color: #eff3f8;
   padding: 9px 26px;
   display: inline-block;
   color: #7e93ae;
   font-size: 12px;
   font-weight: 500;
   margin-bottom: 5px;
   border: 1px solid #dee7f2;
}

.portfolioFilter a:hover {
   color: #fff;
   background-color: #f51f8a;
   border: 1px solid #f51f8a;
}

.portfolioFilter a.current {
   color: #fff;
   text-decoration: none;
   background-color: #f51f8a;
   border: 1px solid #f51f8a;
}

/*---------- Thumbnail hover effect -------*/

/* ============================================================
GLOBAL
============================================================ */

.effects {}

.effects .img {
   position: relative;
}

.effects .img:nth-child(n) {}

.effects .img:first-child {
   margin-bottom: 20px;
}

.effects .img:last-child {
   margin-right: 0;
}

.effects .img img {
   display: block;
   margin: 0;
   padding: 0;
   max-width: 100%;
   height: auto;
}

.overlay {
   display: block;
   position: absolute;
   z-index: 20;
   background: rgba(246, 96, 171, 0.8);
   overflow: hidden;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
}

a.close-overlay {
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   z-index: 100;
   width: 45px;
   height: 45px;
   font-size: 20px;
   font-weight: 700;
   color: #fff;
   line-height: 45px;
   text-align: center;
   background-color: #de4526;
   cursor: pointer;
}

a.close-overlay.hidden {
   display: none;
}

a.expand {
   display: block;
   position: absolute;
   z-index: 100;
   width: 60px;
   height: 60px;
   border: solid 5px #fff;
   text-align: center;
   color: #fff;
   line-height: 50px;
   font-weight: 700;
   font-size: 30px;
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
   -ms-border-radius: 30px;
   -o-border-radius: 30px;
   border-radius: 30px;
}

/* ============================================================
EFFECT 6 - ICON BOUNCE IN
============================================================ */
#effect-6 .overlay {
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   opacity: 0;
}

#effect-6 .overlay a.expand {
   left: 0;
   right: 0;
   top: 0;
   margin: 0 auto;
   opacity: 0;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
}

#effect-6 .img.hover .overlay {
   opacity: 1;
}

#effect-6 .img.hover .overlay a.expand {
   top: 50%;
   margin-top: -30px;
   opacity: 1;
}

/*----------------- Gallery Wide ---------------*/
.gallery-thumbnail {}

.gallery-thumbnail img {
   width: 100%;
}

.gallery-img img {
   width: 100%;
}

.gallery-block {}

/*----------------- Image Hover Effect ---------------*/
img {
   width: auto;
   max-width: 100%;
   height: auto;
   margin: 0;
   padding: 0;
   border: none;
   line-height: normal;
   vertical-align: middle;
}

.imghover {
   display: block;
   position: relative;
   max-width: 100%;
}

.imghover::before,
.imghover::after {
   display: block;
   position: absolute;
   content: "";
   text-align: center;
   opacity: 0;
}

.imghover::before {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

.imghover::after {
   top: 50%;
   left: 50%;
   width: 50px;
   height: 50px;
   line-height: 50px;
   margin: -25px 0 0 -25px;
   content: "\f06e";
   /* fa-eye */
   font-family: "FontAwesome";
   font-size: 36px;
}

.imghover:hover::before,
.imghover:hover::after {
   opacity: 1;
}

.imghover:hover::before {
   background: rgba(34, 62, 92, .55);
}

.imghover:hover::after {
   color: #FFFFFF;
}

/*--------------------------------
Team  
---------------------------------*/
.team-block {}

.team-img {}

.team-content {}

.designation {
   font-size: 12px;
   color: gray;
   text-transform: uppercase;
   font-weight: 600;
}

/*--------------------------------
About us 
---------------------------------*/
.about-section {}

.counter-section {}

.why-choose-section {}

.testimonial-section {}

.cta-section {}

.cta-section-second {
   background: url(../images/cta-img-2.jpg)no-repeat;
   background-size: cover;
}

.cta-section-second h1 {
   font-size: 42px;
}

.text-big {
   font-size: 20px;
   color: #001f3f;
   font-weight: 500;
   margin-bottom: 0px;
}

/*--------------------------------
Contact us 
---------------------------------*/
.map {
   height: 400px;
}

.widget-contact {
   margin-top: 30px;
   margin-bottom: 30px;
}

.widget-contact li {
   margin-bottom: 10px;
   border-bottom: 1px solid #eff3f8;
   padding-bottom: 10px;
}

.widget-contact li span {
   width: 120px;
   display: inline-block;
}

/*----------------- Gallery Wide ---------------*/
.gallery-thumbnail img {
   width: 100%;
}

.gallery-img img {
   width: 100%;
}

.gallery-block {}

.slide-ranger .ui-widget-header {
   background-color: #f51f8a;
}

.slide-ranger .ui-state-default,
.ui-widget-content .ui-state-default {
   background-color: #fff !important;
}

.slide-ranger .ui-widget.ui-widget-content {
   border: 1px solid #f51f8a;
}

.slide-ranger .ui-slider .ui-slider-handle {
   border-radius: 100%;
   border: 3px solid #f51f8a;
}

/*--------------------------------
Product Single Sidebar
---------------------------------*/
.product-tabs {}

.product-tabs ul {
   position: relative;
   z-index: 9;
}

.product-tabs .nav>li {
   margin-top: -1px;
}

.product-tabs .nav>li.active a {
   border-right: 1px solid #f4f6f8;
   background: #eff3f8;
   color: #f51f8a;
}

.product-tabs .nav>li>a {
   background: #fff;
   border-bottom: 1px solid #dee7f2;
   border-right: 1px solid #dee7f2;
   border-left: 1px solid #dee7f2;
   border-top: 1px solid #dee7f2;
   color: #7e93ae;
}

.product-tabs .nav>li>a:hover {
   background: #eff3f8;
   border-bottom: 1px solid #dee7f2;
   border-right: 1px solid transparent;
   border-left: 1px solid #dee7f2;
   border-top: 1px solid #dee7f2;
   color: #f51f8a;
}

.product-tabs .nav>li>a i {
   padding-right: 10px;
}

.tab-content {
   background: #eff3f8;
   padding: 40px;
   border: 1px solid #dee7f2;
   position: relative;
   z-index: 8;
   margin-left: -1px;
   margin-top: -1px;
}

.fee-table {}

/*--------------------------------
EMI Calculator
---------------------------------*/
.loantable {
   margin-top: 40px;
}

.table-head {
   background: #eff3f8;
}

.loan-title {
   margin-bottom: 30px;
}

.table-bordered {
   border: 1px solid transparent;
   color: #333;
}

.table-bordered>thead>tr>th {
   color: #ffffff;
}

.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td {
   border: 1px solid #dee4ee;
   color: #3c4d6b;
}

.table-striped>tbody>tr:nth-of-type(odd) {
   background-color: #fafcfd;
}

.table>thead>tr>th {
   padding: 12px 43px 12px;
   line-height: 1.42857143;
   vertical-align: top;
   border-top: 1px solid #ddd;
   text-align: center;
}

/*--------------------------------
Card Listing Page
---------------------------------*/
.card-listing {
   padding: 26px;
   border: 1px solid #dee7f2;
   margin-bottom: 30px;
   background: #eff3f8;
}

.card-img {}

.card-img img {}

.card-content {
   margin-top: 20px;
}

.card-content .btn {
   margin-right: 30px;
}

.card-name {}

.card-features {
   margin-top: 20px;
}

.card-features ul li {
   border-bottom: 1px solid #eff3f8;
   padding-bottom: 10px;
   margin-bottom: 8px;
   line-height: 1.5;
}

.card-details {}

.card-head-sections {
   margin-bottom: 40px;
}

/*--------------------------------
Lender Listing Page
---------------------------------*/
.lender-listing {
   border: 1px solid #dee7f2;
   margin-bottom: 30px;
}

.lender-head {
   padding: 15px;
   background: #eff3f8;
   border-bottom: 1px solid #dee7f2;
}

.lender-logo {
   display: inline-block;
   width: 170px;
}

.lender-reviews {
   color: #ffb607;
   display: inline-block;
   float: right;
   padding-top: 15px;
}

.lender-rate-box {
   padding: 15px;
   border-bottom: 1px solid #dee7f2;
}

.lender-ads-rate {
   border-right: 1px solid #dee7f2;
}

.lender-ads-rate,
.lender-compare-rate {
   display: inline-block;
   text-align: center;
   width: 143px;
}

.lender-rate-value {
   font-size: 20px;
   font-weight: 600;
   margin-top: 6px;
}

.compare-rate {}

.lender-feature-list {
   padding: 20px;
   border-bottom: 1px solid #dee7f2;
}

.lender-feature-list ul {
   margin-bottom: 0px;
}

.lender-feature-list ul li {
   font-size: 14px;
   margin-bottom: 8px;
}

.lender-actions {
   text-align: center;
   padding: 20px;
}

.lender-actions .btn-link {
   margin-top: 30px;
   font-size: 14px;
}

.lender-details {}

.lender-head-sections {
   margin-bottom: 60px;
}

.lender-img {}

.lender-name {}

.lender-rates-list {
   background-color: #eff4f9;
   padding: 20px;
   border-radius: 4px;
}

.lender-loan-sections {}

.lender-apply {}

.lender-features {}

.lender-loan-sections,
.lender-apply,
.lender-features,
.lender-rates-list {
   margin-bottom: 60px;
}

/*--------------------------------
Loan Eligibility Page
---------------------------------*/
.loan-eligibility-block {
   padding: 30px;
   background: #eff3f8;
}

.loan-eligibility-form .input-group-addon {
   border-left: 2px solid #e6ecef;
   border-top: 2px solid #e6ecef;
   border-bottom: 2px solid #e6ecef;
   background: #fff;
}

.loan-eligibility-form .control-label {
   margin-bottom: 10px;
}

.loan-eligibility-info {}

.loan-eligibility-form .form-group {
   display: block;
}

.eligibility-amount {
   font-size: 52px;
   font-weight: 600;
   color: #15549a;
}

.eligibility-text {
   font-size: 21px;
}

/*-----------------------------------------
Shortcodes
------------------------------------------*/
.st-tabs {
   /*border: 1px solid #dee7f2; */
}

.st-tabs .nav-tabs {}

.st-tabs .nav-item {}

.st-tabs .tab-content {
   padding: 30px;
   border: 1px solid #e6e9eb;
   background-color: #fff;
   margin-top: -1px;
}

.st-tabs .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
   color: #f51f8a;
   background-color: transparent;
   border-color: #dee7f2 #dee7f2 #dee7f2 #dee7f2;
}

.st-tabs .nav-link {
   display: block;
   padding: 16px 64px;
   border: 1px solid #dee7f2;
   border-radius: 0px;
   background-color: #eff3f8;
   margin-bottom: -1px;
}

.st-tabs a {
   font-size: 14px;
   font-style: initial;
   text-transform: uppercase;
   font-weight: 500;
   color: #7e93ae;
}

.st-tabs a:hover {
   color: #f51f8a;
}

/*-----------------------------------------
Compare-Loan
------------------------------------------*/
.compare-title {}

.compare-block {}

.compare-row {}

.rate {}

.rate,
.fees,
.compare-rate,
.repayment {
   font-size: 18px;
   color: #4b5565;
   margin-bottom: 0px;
   margin-top: 15px;
   font-weight: 600;
}

.fees {}

.compare-rate {}

.repayment {}

.comapre-action {
   padding-top: 15px;
}

/*-----------------------------------------
Error-page
------------------------------------------*/
.error-img {
   text-align: center;
}

.error-title {
   font-size: 36px;
   color: #192139;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.msg {
   font-size: 24px;
   color: #f51f8a;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 1px;
}

/*-----------------------------------------
Header - 2
------------------------------------------*/
.header-2 {
   background-color: #fff;
   padding-top: 10px;
   position: relative;
   z-index: 9
}

.header-action {
   margin-top: 10px;
}

.header-2 .navigation-2 {
   background-color: #fff;
   border-top: 1px solid #dee7f2;
   margin-top: 20px;
   border-bottom: 1px solid #dee7f2;
}

.header-2 #navigation {
   float: left;
   margin-top: 0px;
   background-color: #fff;
}

.header-2 #navigation>ul>li>a {
   padding: 16px 30px;
   font-size: 13px;
   text-decoration: none;
   color: #66707f;
   font-weight: 600;
   text-transform: uppercase;
   border-left: 1px solid #dee7f2;
}

.header-2 #navigation>ul>li.has-sub>a {
   padding-right: 50px;
}

.header-2 #navigation>ul>li.has-sub>a:before {
   position: absolute;
   right: 28px;
   font-family: FontAwesome;
   content: "\f107";
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -ms-transition: all .25s ease;
   -o-transition: all .25s ease;
   transition: all .25s ease;
}

/*-----------------------------------------
Landing Page Template
------------------------------------------*/
.hero {
   position: relative;
   padding-top: 60px;
   padding-bottom: 100px;
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(0, 0, 0, 0.2) url(../images/lp-car-image.jpg) no-repeat center;
   background-size: cover;
}

.hero-home-loan {
   position: relative;
   padding-top: 60px;
   padding-bottom: 100px;
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(0, 0, 0, 0.2) url(../images/home-loan-lp.jpg) no-repeat center;
   background-size: cover;
}

.hero-title {
   font-size: 48px;
   line-height: 52px;
   color: #fff;
   font-weight: 800;
   letter-spacing: -1px;
   margin-bottom: 30px;
}

.hero-captions {
   padding-top: 80px;
}

.hero-text {
   color: #fff;
}

.request-form {
   background-color: #fff;
   padding: 30px;
   border-radius: 4px;
}

.form-title {
   color: #104b8c;
   font-size: 30px;
}

.price-rate {
   margin-top: 30px;
}

.price-big {
   font-size: 40px;
   color: #fff;
   font-weight: 800;
}

.price-rate small {
   color: #fff;
   text-transform: uppercase;
}

.new-price,
.old-price {
   margin-bottom: 30px;
}

/*--------------- Features block class --------------*/
.circle-outline-icon {
   font-size: 36px;
   height: 80px;
   width: 80px;
   border: 2px solid #85b6ee;
   border-radius: 100%;
   padding: 18px 19px;
   margin-bottom: 30px;
   color: #15549a;
   display: block;
   line-height: 1.2;
   text-align: center;
   transition: all 0.4s ease;
}

/* Hover glow on circle icons */
.circle-outline-icon:hover {
   background: #15549a;
   color: #fff;
   transform: scale(1.1);
   box-shadow: 0 0 18px rgba(21, 84, 154, 0.35);
}

/*---------- General feature block ----------*/
.feature {
   background: #ffffff;
   border-radius: 12px;
   padding: 35px 25px;
   text-align: center;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
   transition: all 0.4s ease;
   position: relative;
   overflow: hidden;
   animation: fadeUp 0.8s ease both;
}

/* Fade-in entrance animation */
@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(25px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Hover lift */
.feature:hover {
   transform: translateY(-8px);
   box-shadow: 0 12px 25px rgba(21, 84, 154, 0.15);
}

/*---------- Feature Icon ----------*/
.feature-icon-style {
   text-align: center;
}

.feature-icon-style .feature-icon {
   margin: 0 auto 25px auto;
   background-color: #f4f6f8;
   width: 90px;
   height: 90px;
   border-radius: 100px;
   padding: 24px;
   text-align: center;
   color: #15549a;
   font-size: 34px;
   transition: all 0.5s ease;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Icon hover effect - only zoom, no rotation */
.feature:hover .feature-icon {
   background: #15549a;
   color: #fff;
   transform: scale(1.15);
   box-shadow: 0 0 18px rgba(21, 84, 154, 0.3);
}

/*---------- Feature Title ----------*/
.feature-icon-style .feature-title {
   margin-bottom: 16px;
   font-size: 18px;
   font-weight: 600;
   color: #15549a;
   position: relative;
   transition: color 0.3s ease;
}

/* Underline animation */
.feature-icon-style .feature-title::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: -6px;
   transform: translateX(-50%) scaleX(0);
   width: 60%;
   height: 3px;
   background: white;
   border-radius: 2px;
   transition: transform 0.4s ease;
}

.feature:hover .feature-title::after {
   transform: translateX(-50%) scaleX(1);
}

/*---------- Feature Text ----------*/
.feature-content p {
   font-size: 15px;
   color: #666;
   line-height: 1.6;
   transition: all 0.4s ease;
   margin: 0 auto;
   max-width: 240px;
}

/* Text hover effect */
.feature:hover .feature-content p {
   color: #333;
   transform: translateY(-4px);
}

/*---------- Variations ----------*/
.feature-left .feature-icon {
   float: left;
   color: #15549a;
   font-size: 28px;
   line-height: 1;
}

.feature-left .feature-content {
   padding-left: 60px;
   text-align: left;
}

/* Circle type */
.feature-circle {
   background-color: #f4f6f8;
   width: 60px;
   height: 60px;
   border-radius: 100px;
   padding: 14px;
   color: #15549a;
   font-size: 26px;
   text-align: center;
}

/* Feature with background */
.feature-bg {
   background-color: #e3edf9;
   border-radius: 8px;
   padding: 60px;
   text-align: center;
}

.feature-bg .feature-icon {
   background-color: #bacadd;
   color: #3c4d6b;
   width: 120px;
   height: 120px;
   border-radius: 120px;
   font-size: 40px;
   text-align: center;
   line-height: 120px;
   margin: 0 auto 40px auto;
}

/* List-style bar */
.feature-list-bar {
   background: #e3edf9;
   padding: 16px 0;
   color: #3c4d6b;
}

/*---------- Responsive Adjustments ----------*/
@media (max-width: 992px) {
   .feature {
      margin-bottom: 25px;
   }

   .feature-icon-style .feature-icon {
      width: 70px;
      height: 70px;
      font-size: 26px;
      padding: 18px;
   }
}

@media (max-width: 576px) {
   .feature-content p {
      max-width: 100%;
   }
}

/*--------------- index - 8 -------------*/
.refinance-rate-block-title {
   letter-spacing: 0px;
   font-weight: 600;
   font-size: 27px;
}

.loan-half-section {
   padding: 50px;
}

/*--------------- card landing page  ---------- */
.card-benefit-tabs .st-tabs .nav-link {
   display: block;
   padding: 16px 27px;
}

/*--------------- borrow life saving   ---------- */
.bank-account-tabs.st-tabs .nav-link {

   padding: 16px 46px;
}


/*============= media query max-width: 768px; =============*/
@media only screen and (max-width:768px) {

   /* start query */
   .header {
      padding-top: 5px;
      padding-bottom: 5px;
   }

   .logo img {
      max-height: 15px;
      /* desktop */
      width: auto;
      object-fit: contain;
   }

   /* Tablet */
   @media (max-width: 991px) {
      .logo {
         justify-content: center;
         text-align: center;
      }

      .logo img {
         max-height: 15px;
      }
   }

   /* Mobile */
   @media (max-width: 575px) {
      .logo {
         justify-content: center;
         text-align: center;
      }

      .logo img {
         max-height: 45px;
      }
   }

   /*--------------- slider for mobile view ( for mobile view  )---------- */
   .slider-captions {
      position: absolute;
      bottom: 28px;
      text-align: center;
   }

   .slider-title {
      color: #fff;
      font-size: 22px;
      text-transform: uppercase;
      font-weight: 700;
      line-height: 26px;
   }

   .slider .owl-prev {
      position: absolute;
      left: 0px;
      top: 30%;
      left: 0px;
   }

   .slider .owl-next {
      position: absolute;
      right: 0px;
      top: 30%;
      right: 0px;
   }

   /*--------------- Page Header ( for mobile view  )---------- */
   .page-header {
      padding: 40px 0px 80px;
   }

   .page-title {
      font-size: 28px;
      margin-bottom: 14px;
   }

   .btn-action {
      text-align: center;
   }

   .btn-action .btn {
      padding: 10px;
      float: left;
      margin-left: 5px;
   }

   .sub-nav>.nav li a {
      border-bottom: 1px solid #dee7f2;
      margin-bottom: 0px;
   }

   .childern {
      padding-left: 0px;
   }

   .widget-share {
      background-color: #fff;
      padding: 14px;
      position: absolute;
      top: 0px;
      right: 0px;
   }

   .search-nav {
      display: none;
   }

   .rate-counter-block {
      text-align: center;
   }

   .rate-icon {
      float: none;
      margin-bottom: 10px;
   }

   .loan-rate {
      font-size: 24px;
   }

   /*--------------- index - 4 ()-------------*/
   .header-transparent {
      position: relative;
      background-color: #15549a;
   }

   .header-transparent #navigation.small-screen #menu-button {
      display: block;
      padding: 16px 0px;
      color: #f51f8a;
      cursor: pointer;
      font-size: 12px;
      text-transform: uppercase;
      font-weight: 700;
      border-top: 1px solid #0a4587;
      margin-top: 20px;
   }

   .header-transparent #navigation.small-screen ul li {
      width: 100%;
      border-top: 1px solid #0a4587;
   }

   .header-transparent #navigation.small-screen .submenu-button {
      position: absolute;
      z-index: 99;
      right: 0;
      top: 0;
      display: block;
      border-left: 1px solid #0a4587;
      height: 46px;
      width: 46px;
      cursor: pointer;
   }

   .header-transparent #navigation.small-screen ul ul li a {
      color: #fff;
      background: none;
   }

   .video-play {
      left: 39%;
      top: 45px;
   }

   .st-tabs .nav-link {
      padding: 16px 11px;
   }

   .lender-ads-rate,
   .lender-compare-rate {
      width: 123px;
   }

   .sub-nav>.nav li a {
      padding: 8px 0px;
      font-size: 11px;
   }

   .portfolioFilter a {
      text-transform: uppercase;
      background-color: #eff3f8;
      padding: 9px 23px;
   }

   /*--------------- index-6 ---------- */
   .lead-hero-caption {
      padding-top: 0px;
   }

   .header-wide .lead {
      font-size: 19px;
   }

   /*--------------- index-7 ---------- */

   /*--------------- index-8 ---------- */
   .refinance-hero-block {
      padding-top: 100px;
      padding-bottom: 160px;
   }

   .loan-half-section {
      padding: 66px;
   }

   /*--------------- compare credit card  ---------- */
   .expandable-info .card {
      min-height: inherit;
   }

   /*--------------- compare personal loan card  ---------- */
   .compare-personal-loan-table .table>tbody>tr>td {
      padding: 6px;
   }

   .compare-personal-loan-title {
      font-size: 13px;
      font-weight: 600;
      display: block;
      width: 148px;
   }

   .expandable-info .card {
      min-height: inherit;
   }

   /*--------------- compare student loan card  ---------- */
   .compare-student-loan-table .table>tbody>tr>td {
      padding: 6px;
   }

   .compare-student-loan-title {
      font-size: 13px;
      font-weight: 600;
      display: block;
      width: 148px;
   }

   .expandable-info .card {
      min-height: inherit;
   }

   /*--------------- card landing page  ---------- */
   .header-wide .lead,
   .header-wide .lead {
      font-size: 21px;
   }

   .card-benefit-tabs .st-tabs .nav-link {
      display: block;
      padding: 16px 8px;
   }

   .card-benefit-tabs .st-tabs a {
      font-size: 12px;
   }

   /*--------------- Index - 9 bank borrow  ---------- */
   .overlay-section {
      margin-top: 0px;
   }

   .overlay-section .card {
      margin-bottom: 20px;
   }

   .post-caption-content h3 {
      font-size: 12px;
      line-height: 18px;
   }
}

@media only screen and (max-width:460px) {

   /*--------------- slider for mobile view ( for mobile view  )---------- */
   .slider-captions {
      position: absolute;
      bottom: 10px;
      text-align: center;
      width: 100%;
   }

   .slider-title {
      color: #fff;
      font-size: 18px;
      text-transform: uppercase;
      font-weight: 700;
      line-height: 26px;
   }

   .slider .owl-prev {
      position: absolute;
      left: 0px;
      top: 30%;
      left: 0px;
   }

   .slider .owl-next {
      position: absolute;
      right: 0px;
      top: 30%;
      right: 0px;
   }

   .rate-icon {
      float: none;
   }

   .rate-counter-block {
      text-align: center;
   }

   .loan-rate {
      font-size: 24px;
   }

   .widget-share {
      background-color: #fff;
      padding: 14px;
      position: absolute;
      top: 0px;
      right: 0px;
   }

   .search-nav {
      display: none;
   }

   .top-text {
      padding-left: 14px;
   }

   .header-action {
      text-align: center;
   }

   .rate-badge {
      display: none;
   }

   .video-play {
      left: 39%;
   }

   /*--------------- index-6 ---------- */
   .lead-hero-caption {
      padding-top: 0px;
   }

   /*--------------- index-7 ---------- */
   #navigation {
      margin-top: 18px;
   }

   .hero-tab-block {
      padding-top: 91px;
      padding-bottom: 100px;
   }

   /*--------------- index-8 ---------- */
   .refinance-rate-block-title {
      font-size: 24px;
   }

   .refinance-hero-block {
      padding-top: 44px;
   }

   /*--------------- compare credit card  ---------- */
   .compare-table .table>tbody>tr>td {
      padding: 10px;
   }

   .compare-card-title {
      font-size: 13px;
      font-weight: 600;
      display: block;
      width: 148px;
   }

   .expandable-info .card {
      min-height: inherit;
   }

   /*--------------- compare personal loan card  ---------- */
   .compare-personal-loan-table .table>tbody>tr>td {
      padding: 10px;
   }

   .compare-personal-loan-title {
      font-size: 13px;
      font-weight: 600;
      display: block;
      width: 148px;
   }

   .expandable-info .card {
      min-height: inherit;
   }

   /*--------------- compare student loan card  ---------- */
   .compare-student-loan-table .table>tbody>tr>td {
      padding: 10px;
   }

   .compare-student-loan-title {
      font-size: 13px;
      font-weight: 600;
      display: block;
      width: 148px;
   }

   .expandable-info .card {
      min-height: inherit;
   }

   /*--------------- card landing page  ---------- */
   .card-benefit-tabs .st-tabs .nav-link {
      display: block;
      padding: 16px 58px;
      border: 1px solid #f6f9ff;
      border-radius: 5px;
      background-color: #f6f9ff;
      margin-bottom: 8px;
      margin-right: 10px;
   }

   .header-wide .lead,
   .header-wide .lead {
      font-size: 13px;
   }

   .card-hero-section {
      padding-top: 60px;
      padding-bottom: 60px;
   }

   /*--------------- Index - 9 bank borrow  ---------- */
   .overlay-section {
      margin-top: 0px;
   }

   .overlay-section .card {
      margin-bottom: 20px;
   }

   .hover-tabs.st-tabs .nav-link {
      display: block;
      padding: 0px 39px 3px 0px;
   }

   .quick-info span:nth-child(2) {
      display: none;
   }

   /*--------------- borrow-life-saving  ---------- */
   .bank-account-tabs.st-tabs .nav-link {

      padding: 16px 57px;
   }

}

@media only screen and (max-width:320px) {

   /*--------------- slider for mobile view ( for mobile view  )---------- */
   .slider-captions {
      position: absolute;
      bottom: 18px;
      text-align: center;
      width: 100%;
   }

   .slider-title {
      color: #fff;
      font-size: 18px;
      text-transform: uppercase;
      font-weight: 700;
      line-height: 26px;
   }

   .slider .owl-prev {
      position: absolute;
      left: 0px;
      top: 30%;
      left: 0px;
   }

   .slider .owl-next {
      position: absolute;
      right: 0px;
      top: 30%;
      right: 0px;
   }

   .rate-icon {
      float: none;
   }

   .rate-counter-block {
      text-align: center;
   }

   .loan-rate {
      font-size: 24px;
   }

   .widget-share {
      background-color: #fff;
      padding: 14px;
      position: absolute;
      top: 0px;
      right: 0px;
   }

   .search-nav {
      display: none;
   }
}

.heading {
   font-size: 38px;
   font-weight: 700;
   color: #001f3f;
   text-align: center;
   opacity: 0;
   transform: translateY(20px);
   animation: fadeUp 1s ease forwards;
}

.heading span {
   color: #007bff;
}

@keyframes fadeUp {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.timeline-section {
   padding: 80px 0;
   position: relative;
}

.timeline-title {
   text-align: center;
   margin-bottom: 60px;
}

.timeline-title h1 {
   font-size: 36px;
   color: #003366;
   font-weight: 700;
   position: relative;
}

/* Timeline Line */
.timeline {
   position: relative;
   max-width: 1100px;
   margin: auto;
}

.timeline::before {
   content: "";
   position: absolute;
   left: 50%;
   top: 0;
   transform: translateX(-50%);
   width: 4px;
   height: 0;
   background: linear-gradient(to bottom, #FFD700, #003366);
   border-radius: 10px;
   transition: height 1s ease;
}

/* Timeline Item */
.timeline-item {
   padding: 40px 30px;
   position: relative;
   width: 50%;
}

.timeline-item:nth-child(odd) {
   left: 0;
   text-align: right;
}

.timeline-item:nth-child(even) {
   left: 50%;
   text-align: left;
}

.timeline-content {
   background: #fff;
   padding: 25px;
   border-radius: 12px;
   position: relative;
   box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
   display: inline-block;
   transition: transform 0.4s ease;
}

.timeline-content:hover {
   transform: translateY(-5px);
}

/* Icons */
.timeline-icon {
   width: 60px;
   height: 60px;
   background: #FFD700;
   color: #003366;
   font-size: 26px;
   font-weight: bold;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 40px;
   right: -30px;
   z-index: 2;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.timeline-item:nth-child(even) .timeline-icon {
   left: -3px;
   right: auto;
}

.step-number {
   font-size: 18px;
   color: #003366;
   font-weight: 600;
   margin-bottom: 8px;
}

.timeline-content h3 {
   font-size: 20px;
   color: #FFD700;
   margin-bottom: 10px;
   font-weight: 700;
}

.timeline-content p {
   font-size: 15px;
   color: #555;
   line-height: 1.6;
}

/* Animation */
.timeline-item {
   opacity: 0;
   transform: translateY(50px);
   transition: all 0.8s ease-out;
}

.timeline-item.show {
   opacity: 1;
   transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
   .timeline::before {
      left: 20px;
   }

   .timeline-item {
      width: 100%;
      padding-left: 70px;
      padding-right: 25px;
      text-align: left !important;
   }

   .timeline-item:nth-child(even) {
      left: 0;
   }

   .timeline-icon {
      left: -10px !important;
      right: auto;
   }
}

.social-links a:hover {
   color: #001f3f;
   transition: 0.3s;
}

.top-text a:hover {
   color: #001f3f;
}

.rate-counter-block {
   display: flex;
   flex-direction: column;
   justify-content: center;
   /* vertical center */
   align-items: center;
   /* horizontal center */
   height: 150px;
   /* equal height */
   border-right: 3px solid #e5e5e5;
   padding: 10px;
}

.rate-counter-block:last-child {
   border-right: none;
}

.rate-counter-block {
   transition: transform .3s ease, background-color .3s;
}

.rate-counter-block:hover {
   /* transform: translateY(-5px); */
   /* background-color: #f9fbff; */
}


.rate-counter-block:hover {
   transform: translateY(-5px);
}

.rate-icon img {
   width: 50px;
   height: auto;
   margin-bottom: 10px;
}

.rate-box h1 {
   margin: 0;
   padding: 0;
   font-size: 2rem;
   font-weight: 700;
   color: white;
   text-align: center;
}

.rate-title {
   margin-top: 5px;
   text-align: center;
   font-size: 0.9rem;
   color: white;
}


@media (max-width: 768px) {
   .rate-counter-block {
      margin-bottom: 20px;
   }
}

.page-header {
   background: url('../images/page-header.jpg') center center/cover no-repeat;
   padding: 100px 0;
   color: #fff;
   position: relative;
}

.page-header::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   /* dark overlay */
}

.page-title {
   font-size: 42px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 15px;
   position: relative;
   z-index: 1;
}

.breadcrumb {
   background: transparent;
   padding: 0;
   margin: 0;
   position: relative;
   z-index: 1;
}

.breadcrumb li,
.breadcrumb a {
   color: #f1f1f1;
   font-weight: 500;
   font-size: 16px;
}

.breadcrumb li.active {
   color: #ffd700;
   /* gold highlight */
}


/* ===============================
   ABOUT SECTION BASE
================================ */
.about-success-section {
   padding: 100px 0;
   background: linear-gradient(180deg, #ffffff 0%, #f9fbfc 100%);
   overflow: hidden;
}

.about-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 80px;
   flex-wrap: wrap;
}

/* ===============================
   IMAGE CONTAINER
================================ */
.image-container {
   position: relative;
   width: 100%;
   max-width: 340px;
   margin: 0 auto;
   text-align: center;
}

.about-img {
   width: 100%;
   height: auto;
   border-radius: 18px;
   object-fit: cover;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
   position: relative;
   z-index: 3;
}

/* Animated Border */
.animated-border {
   position: absolute;
   top: -15px;
   left: -30px;
   right: -30px;
   bottom: 55px;
   border: 2px solid #001f3f;
   border-radius: 30px;
   z-index: 1;
   animation: border-rotate 18s linear infinite;
   opacity: 0.1;
}

/* Glow Ring */
.glow-ring {
   position: absolute;
   inset: -30%;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(39, 60, 150, 0.35) 0%, transparent 70%);
   filter: blur(35px);
   animation: glow-pulse 8s ease-in-out infinite;
   z-index: 0;
}

/* ===============================
   FOUNDER TEXT
================================ */
.founder-signature {
   font-family: 'Great Vibes', cursive;
   font-size: 34px;
   color: #001f3f;
   margin-top: 15px;
}

.founder-title {
   font-size: 15px;
   color: #666;
   margin-top: 4px;
}

/* ===============================
   TEXT CONTENT
================================ */
.text-content {
   flex: 1;
   max-width: 650px;
}

.text-content p {
   font-size: 16px;
   line-height: 1.8;
   color: #444;
}

/* ===============================
   STATS
================================ */
.about-stats {
   display: flex;
   gap: 40px;
   flex-wrap: wrap;
   margin-top: 45px;
}

.about-stats .stat {
   text-align: center;
}

.about-stats .stat strong {
   display: block;
   font-size: 22px;
   color: #001f3f;
}

/* ===============================
   ANIMATIONS
================================ */
@keyframes border-rotate {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

@keyframes glow-pulse {

   0%,
   100% {
      transform: scale(1);
      opacity: 0.6;
   }

   50% {
      transform: scale(1.2);
      opacity: 1;
   }
}

/* ===============================
   TABLET (≤991px)
================================ */
@media (max-width: 991px) {
   .about-content {
      flex-direction: column;
      text-align: center;
      gap: 50px;
   }

   .text-content {
      max-width: 100%;
   }

   .about-stats {
      justify-content: center;
   }
}

/* ===============================
   MOBILE (≤576px)
================================ */
@media (max-width: 576px) {
   .about-success-section {
      padding: 70px 0;
   }

   .founder-signature {
      font-size: 28px;
   }

   .text-content p {
      font-size: 15px;
   }

   .about-stats {
      gap: 25px;
   }

   .about-stats .stat strong {
      font-size: 20px;
   }
}

.vision-mission {
   position: relative;
   background: url('/images/banner/bg.jpeg') no-repeat center center/cover;
   height: 60vh;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
}

/* White transparent overlay for readability */
.vision-mission::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.88);
   z-index: 1;
}

.content {
   position: relative;
   z-index: 2;
   display: flex;
   justify-content: space-around;
   align-items: flex-start;
   width: 90%;
   max-width: 1000px;
   flex-wrap: wrap;
}

.box {
   width: 45%;
   min-width: 280px;
}

.box img {
   width: 100px;
   height: auto;
   margin-bottom: 15px;
}

.box h2 {
   font-size: 26px;
   color: #222;
   margin-bottom: 10px;
}

.box p {
   font-size: 15px;
   color: #555;
   line-height: 1.6;
}

/* Divider line between Vision & Mission */
.divider {
   width: 1px;
   background: #ccc;
   height: 150px;
   align-self: center;
}

/* Responsive for mobile */
@media (max-width: 768px) {
   .vision-mission {
      height: auto;
      padding: 60px 20px;
   }

   .content {
      flex-direction: column;
      gap: 60px;
   }

   .divider {
      display: none;
   }

   .box {
      width: 100%;
   }

   .box img {
      width: 80px;
   }

   .box h2 {
      font-size: 22px;
   }
}


.approach-section {
   padding: 0px 20px;
   text-align: center;
   /* background: #fff; */
   border-radius: 20px;
   max-width: 1300px;
   margin: 60px auto;
   /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); */
   overflow: hidden;
}

.approach-section h2 {
   font-size: 32px;
   font-weight: 700;
   color: #111;
   margin-bottom: 15px;
}

.approach-section p.subtext {
   font-size: 16px;
   color: #666;
   max-width: 750px;
   margin: 0 auto 80px;
   line-height: 1.6;
}

/* .approach-section .btn {
  background: linear-gradient(135deg, #4b6bfb, #3d5af1);
  color: #fff;
  border: none;
  padding: 10px 30px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  margin-bottom: 70px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.approach-section .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(75, 107, 251, 0.3);
} */

/* DESKTOP GRID */
.steps {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
   max-width: 1100px;
   margin: auto;
   margin-top: 30px;
}

.step {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   /* heading starts at top */
   background: #fff;
   padding: 40px 30px;
   position: relative;
   border-radius: 16px;
   box-shadow: 0 6px 25px rgba(0, 0, 0, 0.05);
   overflow: hidden;
   transition: all 0.4s ease;
}

.step:hover {
   background: #001f3f;
   transform: translateY(-12px) scale(1.02);
   box-shadow: 0 12px 35px rgba(39, 60, 150, 0.35);
}

.step:hover .step-icon-img {
   background: #fff;
   transform: scale(1.08);
}

.step:hover .step-content h4,
.step:hover .step-content p {
   color: #fff;
}

.step:hover .step-number {
   color: rgba(255, 255, 255, 0.12);
}


/* IMAGE ICON – FIXED */
.step-icon-img {
   position: absolute;
   left: 30px;
   top: 40px;
   width: 80px;
   height: 80px;
   padding: 15px;
   background: #eef2ff;
   border-radius: 20%;
   object-fit: contain;
   transition: all 0.4s ease;
}

.step-content {
   display: flex;
   flex-direction: column;
   flex: 1;
   /* take remaining space */
   text-align: center;
   padding-top: 100px;
   /* leave space for icon */
}

.step-content h4 {
   font-size: 16px;
   font-weight: 600;
   color: #001f3f;
   /* margin-bottom: 10px; */

   /* Force min-height to align content start */
   min-height: 50px;
   /* adjust based on 1-3 lines max heading */
   display: flex;
   align-items: center;
   justify-content: center;
}

.step-content p {
   font-size: 15px;
   color: #555;
   line-height: 1.6;
   flex-grow: 1;
   /* fill remaining space so button is at bottom */
   margin-top: 15px;
}

/* NUMBER */
.step-number {
   position: absolute;
   right: 25px;
   top: 15px;
   font-size: 110px;
   font-weight: 800;
   color: rgba(0, 0, 0, 0.05);
   transition: all 0.4s ease;
}

/* ============================
    RESPONSIVE FIXES
============================ */

/* TABLET (Two Columns) */
@media (max-width: 992px) {
   .steps {
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
   }

   .step-content {
      padding-top: 95px;
   }

   .step-number {
      font-size: 90px;
   }
}

/* MOBILE (One Column) */
@media (max-width: 768px) {
   .steps {
      grid-template-columns: 1fr;
      gap: 25px;
   }

   .step {
      padding: 30px 20px;
   }

   /* FIXED ICON CENTERING */
   .step-icon-img {
      left: 15%;
      top: 25px;
      transform: translateX(-50%);
   }

   /* REDUCE NUMBER SIZE */
   .step-number {
      right: 15%;
      transform: translateX(50%);
      top: 5px;
      font-size: 75px;
   }

   /* FIX SPACING BELOW ICON */
   .step-content {
      padding-top: 80px;
   }

   .step-content h4 {
      font-size: 17px;
   }

   .step-content p {
      font-size: 14px;
   }
}

.customer-step-btn {
   width: 126px;
   margin-top: 10px;
   padding: 8px 18px;
   background: #dae64b;
   color: #000000;
   border: none;
   border-radius: 6px;
   font-size: 14px;
   cursor: pointer;
   transition: 0.3s ease;
   text-decoration: none;
   /* important for <a> button */
   display: inline-block;
}

.step:hover .customer-step-btn {
   background-color: #ffffff;
   /* white background */
   color: #001f3f;
   /* blue text */
}




/* builder section start */
.builder-section {
   padding: 100px 20px;
   max-width: 1300px;
   margin: 0 auto;
   text-align: center;
   /* background: #fff; */
   border-radius: 20px;
   /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05); */
}

.builder-section h5 {
   color: #001f3f;
   font-size: 14px;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   margin-bottom: 10px;
}

.builder-section h2 {
   font-size: 32px;
   font-weight: 700;
   color: #111;
   margin-bottom: 15px;
}

.builder-section p {
   color: #666;
   font-size: 16px;
   max-width: 750px;
   margin: 0 auto 50px;
   line-height: 1.6;
}

.service-icon {
   width: 55px;
   height: 55px;
   padding: 12px;
   background: #eef2ff;
   border-radius: 20%;
   display: inline-block;
   margin-bottom: 15px;
   object-fit: contain;
   transition: 0.3s ease-in-out;
}

.service-box:hover .service-icon {
   transform: scale(1.1);
}


/* CSS (Flexbox) */
.service-grid {
   display: flex;
   flex-wrap: wrap;
   /* allow items to wrap to next line */
   justify-content: center;
   /* center items on each row */
   gap: 25px;
   /* space between boxes */
   align-items: stretch;
   /* equal height columns if content differs */
   padding: 10px;
   box-sizing: border-box;
}

/* each box size control */
.service-box {
   background: #fff;
   border: 1px solid #e6e8ee;
   border-radius: 16px;
   padding: 28px 20px;
   transition: all 0.3s ease;
   text-align: center;
   box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   /* flex-basis controls how many fit per row:
     4 per row ~ 250-260px each (adjust as needed) */
   flex: 0 1 290px;
   /* don't grow, can shrink, base 250px */
   max-width: 800px;
   /* prevents boxes getting too wide */
   width: 100%;
   box-sizing: border-box;
}

/* Hover */
.service-box:hover {
   background: #001f3f;
   color: #fff;
   box-shadow: 0 10px 25px rgba(75, 107, 251, 0.3);
   transform: translateY(-5px);
}


.service-box i {
   font-size: 32px;
   color: #4b6bfb;
   margin-bottom: 20px;
   transition: color 0.3s;
}

.service-box:hover i {
   color: #fff;
}

.service-box h4 {
   font-size: 17px;
   font-weight: 600;
   color: #001f3f;
   margin-bottom: 10px;
   transition: color 0.3s;
   margin-bottom: 10px;
}

.service-box:hover h4 {
   color: #fff;
}

.service-box p {
   font-size: 14px;
   color: #666;
   line-height: 1.5;
   transition: color 0.3s;
   margin-top: 20px;
}

.service-box:hover p {
   color: #f1f1f1;
}

/* Special box (like "+4 More") */
.service-box.more {
   background: #155e4f;
   color: #fff;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.service-box.more h3 {
   font-size: 32px;
   margin-bottom: 8px;
}

.service-box.more p {
   font-size: 14px;
   color: #e0e0e0;
}

/* Responsive Design */
@media (max-width: 1024px) {
   .service-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media (max-width: 768px) {
   .service-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 576px) {
   .service-grid {
      grid-template-columns: 1fr;
   }
}

/* builder section end */



/* partners section start */
.partners-section {
   /* background: linear-gradient(135deg, #0c1f44, #143e7a); */
   padding: 0px 20px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.partners-container {
   /* background: #fff; */
   padding: 60px 40px;
   border-radius: 16px;
   max-width: 1100px;
   width: 100%;
   text-align: center;
   /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */
}

.partners-subtitle {
   color: #007bff;
   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: 8px;
}

.partners-title {
   font-size: 30px;
   font-weight: 700;
   color: #111;
   margin-bottom: 10px;
}

.partners-text {
   color: #555;
   margin-bottom: 40px;
   line-height: 1.6;
}

.partners-logos {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
   gap: 40px 50px;
   align-items: center;
   justify-items: center;
}

.partner {
   display: flex;
   flex-direction: column;
   align-items: center;
   transition: transform 0.3s ease;
}

.partner img {
   width: 100px;
   max-height: 60px;
   object-fit: contain;
   filter: grayscale(100%);
   opacity: 0.7;
   transition: all 0.3s ease;
}

.partner p {
   margin-top: 10px;
   font-size: 15px;
   font-weight: 500;
   color: #222;
}

.partner:hover img {
   filter: grayscale(0%);
   opacity: 1;
   transform: scale(1.08);
}

.partner:hover p {
   color: #001f3f;
}

/* Responsive */
@media (max-width: 768px) {
   .partners-container {
      padding: 40px 20px;
   }

   .partners-title {
      font-size: 24px;
   }

   .partners-logos {
      gap: 25px;
   }

   .partner img {
      width: 80px;
   }

   .partner p {
      font-size: 14px;
   }
}

/* partners section end */



section {
   padding: 80px 5%;
   text-align: center;
}

h2 {
   font-size: 2.5rem;
   font-weight: 700;
   color: #001f54;
   margin-bottom: 10px;
   position: relative;
   display: inline-block;
}

h2::after {
   content: "";
   display: block;
   width: 70%;
   height: 4px;
   background: gray;
   margin: 10px auto;
   border-radius: 2px;
   animation: underline 2s ease-in-out infinite alternate;
}

@keyframes underline {
   from {
      width: 40%;
   }

   to {
      width: 70%;
   }
}


.projects-section {
   padding: 80px 40px;
   max-width: 1300px;
   margin: 0 auto;
   /* background: #fff; */
   border-radius: 20px;
   /* box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05); */
}

.projects-header {
   text-align: center;
   margin-bottom: 50px;
}

.projects-header h2 {
   font-size: 36px;
   font-weight: 700;
   color: #002c73;
   margin-bottom: 10px;
}

.projects-header h2::after {
   content: "";
   display: block;
   width: 80px;
   height: 4px;
   background: #00a2ff;
   border-radius: 5px;
   margin: 10px auto 0;
}

.projects-header p {
   color: #555;
   font-size: 16px;
   max-width: 600px;
   margin: 10px auto 0;
}

/* Project Grid */
.projects-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 30px;
}

.project-card {
   position: relative;
   background: #fff;
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   transition: transform 0.4s ease, box-shadow 0.4s ease;
   cursor: pointer;
}

.project-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 10px 25px rgba(0, 162, 255, 0.2);
}

.project-card img {
   width: 100%;
   height: 220px;
   object-fit: cover;
   transition: transform 0.4s ease;
}

.project-card:hover img {
   transform: scale(1.1);
}

.project-info {
   padding: 20px;
   text-align: center;
}

.project-info h3 {
   font-size: 20px;
   color: #002c73;
   font-weight: 600;
   margin-bottom: 8px;
}

.project-info p {
   font-size: 14px;
   color: #666;
}

.status-tag {
   position: absolute;
   top: 15px;
   left: 15px;
   background: #001f3f;
   color: #fff;
   font-size: 13px;
   padding: 6px 12px;
   border-radius: 8px;
   font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
   .projects-section {
      padding: 60px 20px;
   }

   .projects-header h2 {
      font-size: 28px;
   }

   .project-card img {
      height: 180px;
   }
}

@media (max-width: 480px) {
   .projects-header p {
      font-size: 14px;
   }
}

.projects-container {
   margin-top: 50px;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
   gap: 30px;
}

.project-card {
   background: #fff;
   border-radius: 15px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   transition: all 0.4s ease;
   overflow: hidden;
   position: relative;
}

.project-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.project-img img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   transition: 0.5s ease;
}

.project-card:hover .project-img img {
   transform: scale(1.05);
}

.project-content {
   padding: 20px;
}

.project-content h3 {
   font-size: 1.3rem;
   font-weight: 600;
   color: #001f3f;
   margin-bottom: 10px;
}

.project-content p {
   font-size: 0.95rem;
   color: #666;
   line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
   h2 {
      font-size: 2rem;
   }

   .project-content h3 {
      font-size: 1.1rem;
   }

   section {
      padding: 60px 4%;
   }
}

/* =========================about section start============================ */

/* ---------- Outer wrapper centers the section ---------- */
.section-wrap {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0px 20px;
   background: #fff;
   margin-bottom: 50px;
   /* white page background */
}

/* ---------- Blue content box ---------- */
.about-box {
   width: 100%;
   max-width: 1200px;
   background: white;
   border-radius: 12px;
   padding: 5px;
   position: relative;
   /* box-shadow: 0 8px 30px rgba(30, 40, 40, 0.06); */
   overflow: visible;
   display: flex;
   gap: 32px;
   align-items: center;
   justify-content: space-between;
   transition: transform .45s ease;
   opacity: 0;
   transform: translateY(30px);
   margin-top: 50px;
   margin-left: auto;
   margin-right: auto;
   /* ✅ centers the blue box */
}

/* ---------- Text Column ---------- */
.about-text {
   flex: 1 1 520px;
   z-index: 1;
}

.about-kicker {
   display: block;
   text-transform: uppercase;
   font-size: 12px;
   color: #000000;
   letter-spacing: 2px;
   margin-bottom: 8px;

}

.title {
   color: #001f3f;
   font-size: 30px;
   font-weight: 700;
   margin-bottom: 16px;
   position: relative;
   line-height: 1.15;
}

.title::after {
   content: "";
   display: block;
   width: 64px;
   height: 4px;
   background: var(--gradient-accent) !important;
   border-radius: 3px;
   margin-top: 10px;
   transform-origin: left center;
   animation: lineStretch 2s ease-in-out infinite;
}

@keyframes lineStretch {

   0%,
   100% {
      transform: scaleX(1);
   }

   50% {
      transform: scaleX(1.5);
   }
}


.about-text p {
   font-size: 16px;
   color: gray;
   margin-bottom: 14px;
   text-align: justify;
   line-height: 1.8;
}

.about-text p {
   font-size: 16px;
   line-height: 1.8;
   color: #333;
}

.about-text strong {
   color: #001f3f;
}

/* ---------- Image Column ---------- */
.about-figure {
   flex: 0 0 auto;
   z-index: 2;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-left: 40px;
   margin-right: -100px;
   /* ✅ overlap image outside the blue box */
}

/* Image styling + continuous zoom animation */
.about-figure img {
   width: 420px;
   max-width: 100%;
   /* border-radius: 10px; */
   display: block;
   object-fit: cover;
   /* box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); */
   animation: zoomInOut 6s ease-in-out infinite;
   transition: transform 0.8s ease;
}

/* 🔄 Continuous zoom in/out animation */
@keyframes zoomInOut {

   0%,
   100% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.08);
   }
}

/* ---------- Appear Animation (optional, when in view) ---------- */
.about-box.show {
   opacity: 1;
   transform: translateY(0);
   transition: opacity .6s ease, transform .6s cubic-bezier(.2, .9, .3, 1);
}

/* small hover lift on desktop */
@media (hover: hover) and (pointer: fine) {
   .about-figure img:hover {
      transform: scale(1.12);
      /* box-shadow: 0 30px 65px rgba(0, 0, 0, 0.28); */
   }
}

/* ---------- Responsive Styles ---------- */
@media (max-width:1000px) {
   .about-box {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 44px 28px;
      margin: 0 auto;
   }

   .about-text {
      width: 100%;
   }

   .about-figure {
      order: 2;
      margin-left: 0;
      margin-right: 0;
      margin-top: 24px;
   }

   .about-figure img {
      max-width: 320px;
   }

   .title::after {
      margin: 10px auto 0;
   }
}

@media (max-width:480px) {
   body {
      padding: 30px 12px;
   }

   .about-box {
      padding: 28px 18px;
      border-radius: 10px;
   }

   .about-figure img {
      max-width: 240px;
   }

   .title {
      font-size: 24px;
   }

   .about-text p {
      font-size: 15px;
      line-height: 1.7;
   }
}

/* =========================about section end============================ */

/* ---------- Title Block (centered like About section) ---------- */
.service-kicker {
   display: block;
   text-transform: uppercase;
   font-size: 13px;
   color: gray;
   letter-spacing: 2px;
   margin-bottom: 8px;
   /* animation: fadeSlideIn 1s ease forwards; */
}

.service-title {
   color: #001f3f;
   font-size: 30px;
   font-weight: 700;
   margin-bottom: 16px;
   position: relative;
   line-height: 1.15;
}


/* animated underline for title */
.service-title::after {
   content: "";
   display: block;
   width: 70px;
   height: 4px;
   background: #1bb3a8;
   border-radius: 3px;
   margin: 10px auto 0;
   animation: lineFlow 2.5s infinite ease-in-out;
}

/* underline animation */
@keyframes lineFlow {
   0% {
      transform: scaleX(0);
      transform-origin: left;
      opacity: 0.2;
   }

   50% {
      transform: scaleX(1);
      opacity: 1;
   }

   100% {
      transform: scaleX(0);
      transform-origin: right;
      opacity: 0.2;
   }
}

.service-title::after {
   content: "";
   display: block;
   width: 64px;
   height: 4px;
   background: Gray;
   border-radius: 3px;
   margin-top: 10px;
   transform-origin: left center;
   animation: lineStretch 2s ease-in-out infinite;
}

@keyframes lineStretch {

   0%,
   100% {
      transform: scaleX(1);
   }

   50% {
      transform: scaleX(1.5);
   }
}

/* entry animation for text */
@keyframes fadeSlideIn {
   0% {
      opacity: 0;
      transform: translateY(-20px);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

.whyus-kicker {
   display: block;
   font-size: 16px;
   font-weight: 600;
   color: #15549a;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 8px;
}

.whyus-section-title .whyus-heading {
   font-size: 36px;
   font-weight: 700;
   color: #222;
   margin-bottom: 10px;
}

.whyus-heading::after {
   content: "";
   display: block;
   width: 64px;
   height: 4px;
   background: #1bb3a8;
   border-radius: 3px;
   margin-top: 10px;
   transform-origin: left center;
   animation: lineStretch 2s ease-in-out infinite;
}

@keyframes lineStretch {

   0%,
   100% {
      transform: scaleX(1);
   }

   50% {
      transform: scaleX(1.5);
   }
}

/* animated underline for title */
.whyus-heading::after {
   content: "";
   display: block;
   width: 70px;
   height: 4px;
   background: #1bb3a8;
   border-radius: 3px;
   margin: 10px auto 0;
   animation: lineFlow 2.5s infinite ease-in-out;
}

/* underline animation */
@keyframes lineFlow {
   0% {
      transform: scaleX(0);
      transform-origin: left;
      opacity: 0.2;
   }

   50% {
      transform: scaleX(1);
      opacity: 1;
   }

   100% {
      transform: scaleX(0);
      transform-origin: right;
      opacity: 0.2;
   }
}

.whyus-heading::after {
   content: "";
   display: block;
   width: 64px;
   height: 4px;
   background: gray;
   border-radius: 3px;
   margin-top: 10px;
   transform-origin: left center;
   animation: lineStretch 2s ease-in-out infinite;
}

@keyframes lineStretch {

   0%,
   100% {
      transform: scaleX(1);
   }

   50% {
      transform: scaleX(1.5);
   }
}



/* Feature Box Styling */
.feature-box {
   background: #fff;
   padding: 50px 30px;
   text-align: center;
   border: 1px solid #e4e8f0;
   transition: all 0.4s ease;
   position: relative;
   z-index: 1;
   height: 100%;
}

.feature-box .icon {
   color: #15549a;
   font-size: 40px;
   margin-bottom: 20px;
   transition: transform 0.4s ease, color 0.3s ease;
}

/* Hover Effects */
.feature-box:hover {
   background: #f1f7ff;
   border-color: #cdddf4;
   transform: translateY(-8px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.feature-box:hover .icon {
   transform: scale(1.15);
   color: #003f91;
}

.feature-box h3 {
   font-size: 19px;
   font-weight: 600;
   color: #001f3f;
   margin-bottom: 12px;
}

.feature-box p {
   color: gray;
   font-size: 15px;
   line-height: 1.6;
   margin-top: 3px;
}

/* Responsive */
@media (max-width: 992px) {
   .feature-box {
      margin-bottom: 30px;
   }

   .section-title .whyus-heading {
      font-size: 28px;
   }
}

.project-view {
   padding: 80px 0;
   background: #f8fbff;
}

.project-card {
   background: #fff;
   border-radius: 0px;
   overflow: hidden;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   margin-bottom: 40px;
   transition: all 0.4s ease;
   transform: translateY(0);
   position: relative;
}

.project-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.project-img {
   overflow: hidden;
   position: relative;
}

.project-img img {
   width: 100%;
   height: 260px;
   object-fit: cover;
   transition: transform 0.6s ease;
}

.project-card:hover .project-img img {
   transform: scale(1.1);
}

.project-content {
   padding: 20px 25px 30px;
   text-align: center;
}

.project-name {
   font-size: 20px;
   font-weight: 700;
   color: #15549a;
   margin-bottom: 6px;
}

.builder-name {
   font-size: 15px;
   color: #555;
   margin-bottom: 8px;
}

.location {
   font-size: 14px;
   color: #333;
}

.location i {
   color: #15549a;
   margin-right: 6px;
}

/* Animation */
.fade-up {
   opacity: 0;
   transform: translateY(30px);
   animation: fadeUp 0.8s ease forwards;
}

@keyframes fadeUp {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Responsive Design */
@media (max-width: 992px) {
   .project-img img {
      height: 220px;
   }
}

@media (max-width: 768px) {
   .project-card {
      margin-bottom: 30px;
   }

   .project-content {
      padding: 18px;
   }
}

.btn-about {
   background-color: gray;
   color: #fff;
   border-color: white;
}

/* mission & vision SECTION BACKGROUND start */
.mv-section {
   background: url("../images/banner/bg.jpeg") center/cover no-repeat;
   padding: 0px 10px;
   position: relative;
}

.mv-overlay {
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, 0.80);
}

/* MAIN CONTAINER */
.mv-container {
   position: relative;
   z-index: 2;
   max-width: 1100px;
   margin: 0 auto;

   display: flex;
   align-items: stretch;
   /* equal height boxes */
   justify-content: center;
   gap: 40px;
}

/* BOX STYLE */
.mv-box {
   flex: 1;
   background: transparent;
   padding: 40px 20px;
   display: flex;
   flex-direction: column;
   /* align elements vertically */
   align-items: center;
}

/* IMAGE */
.mv-box img {
   width: 180px;
   height: auto;
   margin-bottom: 20px;
}

/* HEADING (Perfect alignment) */
.mv-title {
   position: relative;
   /* REQUIRED for ::after */
   color: #001f3f;
   font-size: 26px;
   font-weight: 700;
   text-align: center;

   height: 50px;
   /* Keep same height */
   display: flex;
   align-items: center;
   justify-content: center;

   margin-bottom: 30px;
   /* Give space for underline */
}

/* UNDERLINE EFFECT */
.mv-title::after {
   content: "";
   position: absolute;
   /* Make it appear below heading */
   bottom: -8px;
   /* Set distance below text */
   left: 30%;
   /* transform: translateX(-50%); */

   width: 60px;
   height: 4px;
   background: gray;
   border-radius: 3px;

   animation: lineStretch 2s ease-in-out infinite;
}

/* ANIMATION */
/* @keyframes lineStretch {
  0%   { width: 30px; opacity: 0.6; }
  50%  { width: 70px; opacity: 1; }
  100% { width: 30px; opacity: 0.6; }
} */


/* TEXT CONTAINER */
.mv-text {
   margin-top: auto;
   max-width: 360px;
   text-align: justify;

   height: 180px;
   /* FIXED HEIGHT → change based on your content */
   display: flex;
   align-items: flex-start;
}


.mv-text p {
   margin: 0;
   color: #555;
   font-size: 15px;
   line-height: 1.6;
}


.divider-line {
   width: 2px;
   height: 90%;
   background: #001f3f;
   align-self: center;
   position: relative;
   z-index: 5;
   flex-shrink: 0;
}

/* mission & vision SECTION BACKGROUND end */

/* RESPONSIVE */
@media (max-width: 992px) {
   .mv-container {
      flex-direction: column;
      gap: 0;
   }

   .divider-line {
      display: none;
   }

   .mv-title {
      height: auto;
      /* natural height on mobile */
   }

   .mv-box {
      padding: 25px 15px;
   }
}


/* Core Values Section */
.core-values {
   margin-top: 60px;
   text-align: center;
   position: relative;
   z-index: 2;
   background: #fff;
   padding: 40px 20px;
   border-radius: 12px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.core-values h3 {
   color: #004aad;
   font-size: 26px;
   margin-bottom: 15px;
}

.core-values p {
   color: #555;
   font-size: 15px;
   max-width: 800px;
   margin: 0 auto;
   line-height: 1.8;
}

/* Responsive Design */
@media (max-width: 768px) {
   .mv-container {
      flex-direction: column;
   }

   .divider-line {
      display: none;
   }

   .mv-box {
      width: 100%;
   }
}

/*========= cliental service start ========*/
.service-icon {
   width: 80px;
   height: 80px;
   object-fit: contain;
   transition: transform 0.4s ease;
}

.feature-card:hover .service-icon {
   transform: scale(1.1);
}


/* Make all cards same height */
.feature-card {
   height: 100%;
   display: flex;
   flex-direction: column;
   padding: 24px;
}


.feature-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
   background-color: #001f3f;
}

/* --- Animated Icon --- */
/* .animated-icon {
  /* width: 80px; */
/* height: 80px; */
/* margin: 0 auto 15px; */
/* background: linear-gradient(90deg, #001f3f, #9e9e9e, #007bff); */
/* background-size: 200% auto; */
/* mask: var(--icon) center/contain no-repeat; */
/* -webkit-mask: var(--icon) center/contain no-repeat; */
/* animation: colorShift 3s infinite linear; */



/* --- Gradient Animation --- */
/* @keyframes colorShift {
  0% {
    background-position: 0% center;
  }

  50% {
    background-position: 100% center;
  }

  100% {
    background-position: 0% center;
  }
} */

/* DEFAULT ICON (NO ANIMATION) */
.animated-icon path {
   stroke: #001f3f;
   /* Blue color */
   stroke-width: 1px;
   vector-effect: non-scaling-stroke;

   /* No animation */
   stroke-dasharray: none;
   stroke-dashoffset: 0;
   fill: none;
}

/* ICON SIZE */
.animated-icon {
   width: 80px;
   height: 80px;
}

@media (max-width: 600px) {
   .animated-icon {
      width: 60px;
      height: 150px;
   }
}

/* HOVER: change icon to white */
.feature-card:hover .animated-icon path {
   stroke: #ffffff !important;
}

.feature-title {
   font-size: 18px;
   font-weight: 600;
   color: #001f3f;
   margin-top: 15px;
   min-height: 56px;
   /* equal title space (2–3 lines) */
   margin-bottom: -15px;
}

/* Force same color on hover */
.feature-card:hover .feature-title {
   color: white !important;
}

.feature-card p {
   font-size: 14px;
   color: #666;
   min-height: 72px;
   /* equal description space */
   margin-bottom: 20px;
}

/* Force same color on hover */
.feature-card:hover p {
   color: white !important;
}

/* Push button to bottom */
.feature-card button {
   margin-top: auto;
   /* THIS pushes button automatically to bottom */
}

/*========= cliental service end ========*/

/* =========================
   Logo Carousel Section
========================= */
.section-space40 {
   padding: 20px 20px;
}

.logo-slider {
   overflow: hidden;
   position: relative;
   width: 100%;
   margin: 0 auto; 
}

.logo-track {
   display: flex;
   flex-wrap: nowrap;
   width: max-content;
   animation: scroll 25s linear infinite;
   gap: 20px;
   /* consistent spacing between logos */
}

.logo-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   flex: 0 0 auto;
   width: 250px;
   transition: transform 0.3s ease;
}

.logo-item img {
   max-width: 100px;
   height: auto;
   width: auto;
   object-fit: contain;
   display: block;
   margin-bottom: 1px;
   filter: drop-shadow();
   cursor: pointer;
   transition: all 0.3s ease;
}

.logo-item figcaption {
   font-size: 14px;
   color: gray;
   text-align: center;
   transition: color 0.3s ease;
}

/* Hover & Focus Effects */
.logo-item img:hover,
.logo-item img:focus {
   filter: grayscale(100%);
   transform: scale(1.5);
   outline: none;
   /* keep focus outline only if needed for accessibility */
}

.logo-item figcaption:hover {
   color: #001f3f;
   /* Blue hover color */
}

/* Smooth infinite scroll */
@keyframes scroll {
   from {
      transform: translateX(0);
   }

   to {
      transform: translateX(-50%);
   }
}

/* =========================
   Responsive
========================= */
@media (max-width: 992px) {
   .logo-item {
      width: 180px;
      /* slightly smaller for tablets */
   }

   .logo-item img {
      max-width: 80px;
   }
}

@media (max-width: 600px) {
   .logo-item {
      width: 140px;
      /* mobile */
   }

   .logo-item img {
      max-width: 60px;
   }

   .logo-item figcaption {
      font-size: 12px;
   }
}

/* ===========================
   Logo Carousel Section end
==============================*/

/* =======why-choose-section start====== */
.why-img {
   width: 60px;
}

@media (max-width: 768px) {
   .why-img {
      width: 50px;
   }
}

.feature-box {
   padding: 30px 20px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 100%;
   /* Equal height for all boxes */
}


/* TEXT */
.Why-Choose-Us-heading {
   font-size: 18px;
   color: white;
   font-weight: 800;
   text-align: center;
   margin-bottom: 15px;

   height: 48px;
   /* equal heading space on all boxes */
   display: flex;
   align-items: center;
   justify-content: center;
}


.Why-Choose-Us-text {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.95);
   text-align: center;
   line-height: 1.4;
   margin-top: auto;
   margin-bottom: 0;
}

@media (max-width: 768px) {
   .Why-Choose-Us-heading {
      height: auto;
      /* on mobile, allow natural height */
   }

   .feature-box {
      height: auto;
      padding: 25px 15px;
   }
}

/* =======why-choose-section end====== */

.core-values-section {
   padding: 80px 20px;
   background: #f9fafc;
   position: relative;
}

/* .core-values-section .service-kicker {
  font-size: 18px;
  text-transform: uppercase;
  color: #0077ff;
  letter-spacing: 1px;
} */

.core-values-section .service-title {
   font-size: 34px;
   color: #001f3f;
}

.core-values-section .section-subtext {
   color: #555;
   max-width: 750px;
   margin: 0 auto;
   font-size: 16px;
   line-height: 1.6;
}

.values-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 30px;
   margin-top: 50px;
}

.value-box {
   background: #fff;
   padding: 35px 25px;
   border-radius: 16px;
   box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
   text-align: center;
   transition: all 0.3s ease;
   position: relative;
}

.value-box img {
   width: 70px;
   margin-bottom: 20px;
   transition: transform 0.3s ease;
}

.value-box h3 {
   color: #001f3f;
   font-weight: 600;
   font-size: 20px;
   margin-bottom: 10px;
}

.value-box p {
   color: gray;
   font-size: 15px;
   line-height: 1.6;
}

.value-box:hover {
   transform: translateY(-8px);
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.value-box:hover img {
   transform: scale(1.1);
}

/* Fade-up animation */
.fade-up {
   opacity: 0;
   transform: translateY(40px);
   animation: fadeUp 1s forwards;
}

@keyframes fadeUp {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Responsive adjustments */
@media (max-width: 992px) {
   .core-values-section .service-title {
      font-size: 28px;
   }
}

@media (max-width: 576px) {
   .core-values-section {
      padding: 60px 15px;
   }

   .value-box {
      padding: 25px 20px;
   }

   .value-box img {
      width: 60px;
   }
}

.hover-effect {
   transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hover-effect:hover {
   transform: translateY(-5px);
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
   .author-box {
      text-align: center;
      justify-content: center;
   }
}

/* Newsletter Styling */
.newsletter-wrapper {
   text-align: right;
}

.newsletter-title {
   color: #0C3C78;
   font-weight: 600;
}

.newsletter-form {
   display: inline-block;
   max-width: 400px;
   width: 100%;
}

.newsletter-input {
   border: 1px solid #ccc;
   border-radius: 6px 0 0 6px;
   padding: 10px 15px;
   width: 70%;
   transition: 0.3s;
}

.newsletter-input:focus {
   border-color: #0C3C78;
   box-shadow: 0 0 6px rgba(12, 60, 120, 0.2);
   outline: none;
}

.newsletter-btn {
   background-color: #0C3C78;
   color: #fff;
   border: none;
   border-radius: 0 6px 6px 0;
   padding: 10px 20px;
   font-weight: 600;
   transition: 0.3s;
}

.newsletter-btn:hover {
   background-color: #082b5c;
}

/* Responsive */
@media (max-width: 992px) {
   .newsletter-wrapper {
      text-align: center;
      margin-top: 20px;
   }

   .newsletter-form {
      max-width: 100%;
   }

   .newsletter-input {
      width: 100%;
      border-radius: 6px;
      margin-bottom: 10px;
   }

   .newsletter-btn {
      width: 100%;
      border-radius: 6px;
   }
}

/* ---------- Carousel CSS (put in your main CSS if you prefer) ---------- */
.testimonial-section {
   padding: 60px 0;
}

.testimonial-inner {
   max-width: 1180px;
   margin: 0 auto;
   padding: 0 20px;
}

.testimonial-title {
   text-align: center;
   margin-bottom: 40px;
   color: #fff;
}

.testimonial-title h1 {
   margin: 0;
   font-size: 36px;
   font-weight: 700;
   color: #fff;
}

.testimonial-title p {
   margin: 8px 0 0;
   color: #cfe1fb;
}

/* carousel viewport */
.carousel-viewport {
   overflow: hidden;
   position: relative;
   width: 100%;
}

/* track (flex row of slides) */
.carousel-track {
   display: flex;
   gap: 30px;
   align-items: stretch;
   transition: transform 600ms cubic-bezier(.22, .9, .3, 1);
   will-change: transform;
}

/* each item */
.testimonial-item {
   flex: 0 0 calc(33.333% - 20px);
   /* show 3 on large by default */
   box-sizing: border-box;
   min-width: 240px;
   display: flex;
   flex-direction: column;
}

/* white testimonial card */
.testimonial-card {
   background: #fff;
   padding: 26px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   flex: 1;
   border-radius: 2px;
   min-height: 170px;
}

.testimonial-text {
   font-family: Georgia, "Times New Roman", serif;
   font-style: italic;
   color: #333;
   line-height: 1.7;
   margin: 0 0 14px;
   font-size: 16px;
}

/* author row (placed below card visually) */
.testimonial-author {
   display: flex;
   align-items: center;
   margin-top: 18px;
   color: #fff;
}

.testimonial-author img {
   width: 56px;
   height: 56px;
   object-fit: cover;
   border-radius: 4px;
   display: block;
}

.author-info {
   margin-left: 14px;
}

.author-info h4 {
   margin: 0;
   color: #fff;
   font-size: 16px;
   font-weight: 600;
}

.author-info span {
   font-size: 13px;
   color: #cfe1fb;
}

/* place author area on page background — we will make the track sit on transparent so section background shows */
.testimonial-items-wrapper {
   background: transparent;
   padding-top: 20px;
}

/* responsive */
@media (max-width:991px) {
   .testimonial-item {
      flex: 0 0 calc(50% - 15px);
   }

   .testimonial-card {
      min-height: 150px;
   }
}

@media (max-width:575px) {
   .testimonial-item {
      flex: 0 0 100%;
   }

   .testimonial-card {
      padding: 18px;
   }

   .testimonial-author img {
      width: 48px;
      height: 48px;
   }

   .section-title h1 {
      font-size: 28px;
   }
}

/* small niceties */
.carousel-viewport:focus {
   outline: none;
}

/* WhatsApp Button */
.whatsapp-btn {
   position: fixed;
   bottom: 90px;
   /* Go to top button upar */
   right: 20px;
   width: 55px;
   height: 55px;
   background: #25D366;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
   z-index: 999;
   transition: 0.3s;
}

.whatsapp-btn img {
   width: 30px;
}

.whatsapp-btn:hover {
   transform: scale(1.1);
}

/* Go to Top Button */
.top-btn {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 55px;
   height: 55px;
   background: #001f3f;
   color: #fff;
   font-size: 22px;
   border: none;
   border-radius: 50%;
   cursor: pointer;
   display: none;
   justify-content: center;
   align-items: center;
   z-index: 998;
   transition: 0.3s ease;
}

.top-btn:hover {
   background: #333;
   transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 480px) {

   .whatsapp-btn,
   .top-btn {
      width: 50px;
      height: 50px;
   }

   .whatsapp-btn img {
      width: 26px;
   }

   .top-btn {
      font-size: 20px;
   }
}

.project-card {
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   transition: 0.3s;
}

.project-card:hover {
   transform: translateY(-6px);
}

.project-img img {
   width: 100%;
   height: 240px;
   object-fit: cover;
}

.project-content {
   padding: 18px;
}

.project-name {
   font-size: 20px;
   font-weight: 600;
}

.location i {
   margin-right: 5px;
   color: #ff5722;
}


/* ---------- CONTAINERS ---------- */
.privacy-container {
   width: calc(100% - 40px);
   max-width: var(--max-width);
   margin: 0 auto;
}

/* ---------- LAYOUT ---------- */
.layout {
   display: flex;
   gap: 32px;
   align-items: flex-start;
   padding: 28px 0 80px;
}

/* Sidebar */
.toc {
   width: 280px;
   flex: 0 0 280px;
   position: sticky;
   top: 90px;
   align-self: flex-start;
   height: max-content;
   border-radius: var(--radius);
   padding: 8px;
   border: 1px solid var(--glass-border);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
}

.toc h4 {
   margin: 8px 12px;
   color: var(--muted);
   font-size: 13px
}

.toc ul {
   list-style: none;
   padding: 6px;
   margin: 0
}

.toc li {
   padding: 10px 12px;
   border-radius: 8px;
   margin: 6px 6px;
   cursor: pointer;
   color: #001f3f;
   font-size: 15px;
   transition: all .22s;
   display: flex;
   align-items: center;
   gap: 10px;
}

.toc li:hover {
   transform: translateX(6px);
   color: gray;
}

.toc li.active {
   color: #001f3f;
   background-color: gray;
   border-left: 3px solid var(--accent);
   transform: none;
}

/* Main content */
.content {
   flex: 1 1 auto;
   min-width: 0;
}

.card {
   background: var(--card-bg);
   border-radius: var(--radius);
   padding: 28px;
   margin-bottom: 18px;
   /* border: 1px solid var(--glass-border); */
   /* box-shadow: 0 6px 22px rgba(3, 6, 19, 0.45); */
}

.card h2 {
   margin: 0 0 8px;
   font-size: 20px;
   color: #001f3f;
}

.card p,
.card li {
   color: var(--muted);
   font-size: 15px;
   text-align: justify;
}

.card ul {
   padding-left: 18px;
   margin: 8px 0
}

/* small highlight box for metadata */
.meta-row {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 14px
}

.meta {
   font-size: 13px;
   color: var(--muted);
   background: rgba(255, 255, 255, 0.02);
   padding: 8px 10px;
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.02)
}

/* ---------- TAB/SLIDER variant (mobile) ---------- */
.tab-strip {
   display: none;
   gap: 8px;
   padding: 10px 0 20px;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
}

.tab-strip button {
   flex: 0 0 auto;
   padding: 8px 14px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.06);
   background: transparent;
   color: var(--muted);
   cursor: pointer;
   margin-right: 8px;
}

.tab-strip button.active {
   background: var(--accent);
   color: #fff;
   border-color: var(--accent)
}

/* ---------- FOOTER PLACEHOLDER ---------- */
.site-footer {
   padding: 32px 0;
   color: var(--muted);
   text-align: center;
   font-size: 14px;
   border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* ---------- ANIMATIONS (simple) ---------- */
.reveal {
   opacity: 0;
   transform: translateY(18px);
   transition: opacity .5s ease, transform .55s cubic-bezier(.2, .9, .2, 1)
}

.reveal.in {
   opacity: 1;
   transform: none
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
   .toc {
      position: relative;
      top: auto;
      width: 300px;
      flex: 0 0 300px
   }
}

@media (max-width: 900px) {
   .layout {
      gap: 18px
   }

   .hero {
      padding: 48px 0 24px
   }

   .hero h1 {
      font-size: 32px
   }
}

@media (max-width: 760px) {
   .layout {
      flex-direction: column
   }

   .toc {
      order: 2;
      display: block;
      width: 100%;
      position: relative;
      top: auto;
      padding: 6px 6px
   }

   .toc ul {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 6px
   }

   .toc li {
      white-space: nowrap;
      padding: 8px 12px;
      font-size: 14px
   }

   .tab-strip {
      display: flex
   }

   .toc h4 {
      display: none
   }

   .toc {
      border-left: none;
      border-radius: 8px
   }
}

@media (max-width:420px) {
   .hero h1 {
      font-size: 26px
   }

   .card {
      padding: 18px
   }
}

/* small accessibility */
.sr-only {
   position: absolute;
   left: -9999px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden
}

.email-section {
   padding: 60px 0;
}

.email-card {
   background: rgba(255, 255, 255, 0.04);
   padding: 30px;
   border-radius: 18px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   animation: fadeIn 1s ease;
}

label {
   color: #001f3f;
   margin-bottom: 5px;
   display: block;
   font-size: 14px;
}

.form-control {
   background: rgba(255, 255, 255, 0.07);
   border: 1px solid #001f3f;
   color: black;
   height: 48px;
   border-radius: 10px;
}

.form-control:focus {
   border-color: gray;
   /* box-shadow: ; */
   background: rgba(255, 255, 255, 0.1);
}

textarea.form-control {
   height: 140px;
}

.btn-send {
   background: gray;
   border: none;
   padding: 12px 25px;
   font-size: 16px;
   border-radius: 10px;
   font-weight: 600;
   width: 100%;
   transition: 0.3s;
   color: black;
}

.btn-send:hover {
   background: #001f3f;
   color: white;
}


.contact-info {
   margin-top: 30px;
   text-align: center;
   color: #bbb;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (max-width: 768px) {
   .email-hero h1 {
      font-size: 32px;
   }

   .email-card {
      padding: 20px;
   }
}

/* ---------------------------
   CLEAN FOOTER – RESPONSIVE
---------------------------- */

/* FOOTER WITH BACKGROUND IMAGE */
.clean-footer {
   background-image: url('../images/banner/footer.jpg');
   /* Your handshake image */
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   position: relative;
   padding: 70px 1px 0px 1px;
   color: #fff;
}

/* Dark overlay */
.clean-footer::before {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.40);
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
}

.clean-footer .container {
   position: relative;
   z-index: 2;
}

/* GRID */
.footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   /* Always 3 columns */
   gap: 40px;
   align-items: start;
}

/* Footer box */
.footer-box {
   color: #fff;
}

/* Logo */
.footer-logo {
   width: 180px;
   margin-bottom: 15px;
}

/* About text */
.footer-about {
   line-height: 1.7;
   opacity: 0.9;
   margin-bottom: 15px;
   color: var(--white) !important;
}

/* Lines with icons */
.footer-line {
   margin: 5px 0;
   opacity: 0.9;
   color: var(--white) !important;
}

/* Titles */
.footer-title {
   font-size: 20px;
   margin-bottom: 15px;
   font-weight: 600;
   color: #fff;
}

/* Links */
.footer-links {
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-links li {
   margin-bottom: 3px;
}

.footer-links a {
   color: var(--white) !important;
   text-decoration: none;
   transition: 0.3s;
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

/* Hover effect */
.footer-links a:hover {
   color: #fff;
   text-decoration: underline;
}

/* Responsive center alignment */
/* ===== MOBILE ONLY ===== */
@media (max-width: 767px) {
   .footer-grid {
      grid-template-columns: 1fr;
      text-align: center;
   }

   .footer-logo {
      margin: 0 auto 15px;
   }
}



/* APPLY BUTTON */
.csb-apply {
   margin-top: 12px;
   width: 25%;
   padding: 10px;
   background: #001f3f;
   color: white;
   border: none;
   border-radius: 6px;
   font-size: 14px;
   cursor: pointer;
   transition: 0.3s;
}

.csb-apply:hover {
   background: gray;
}

/* NORMAL BUTTON */
.customer-apply {
   padding: 10px 25px;
   background-color: #dae64b;
   color: #000000;
   border: none;
   border-radius: 6px;
   cursor: pointer;
   font-size: 14px;
   transition: background 0.3s;
   margin-top: auto;
   /* pushes button to bottom when card grows */
   align-self: center;
}

/* BUTTON HOVER */
.builder-services-card:hover .customer-apply {
   background: white;
   color: #001f3f;
}

/* WHEN CARD IS HOVERED → MAKE BUTTON VISIBLE */
.feature-card:hover .customer-apply {
   background: #fff !important;
   color: #001f3f !important;
   border: 1px solid #fff;
}


/* Explore Button */
.csb-explore {
   margin-top: 28px;
   background: #1f40a7;
   color: white;
   padding: 15px 25px;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   width: 100%;
   font-size: 16px;
   transition: 0.3s;
}

.csb-explore:hover {
   background: #0f2d7a;
}

/* ---------- MODAL ---------- */
.csb-modal {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.65);
   justify-content: center;
   align-items: center;
   padding: 20px;
   z-index: 9999 !important;
}

.csb-modal-box {
   background: white;
   padding: 25px;
   border-radius: 12px;
   width: 100%;
   max-width: 420px;
   animation: popup 0.35s ease-out;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

@keyframes popup {
   0% {
      transform: scale(0.5);
      opacity: 0;
   }

   100% {
      transform: scale(1);
      opacity: 1;
   }
}

.csb-close {
   float: right;
   font-size: 22px;
   cursor: pointer;
}

/* FIELDS */
.csb-modal-box label {
   display: block;
   margin-top: 12px;
   font-size: 14px;
}

.csb-modal-box input,
.csb-modal-box textarea {
   width: 100%;
   padding: 10px;
   border-radius: 6px;
   border: 1px solid #ccc;
   margin-top: 6px;
}

.csb-modal-box textarea {
   height: 80px;
}

/* DETAILS BUTTON */
.csb-details {
   margin-top: 15px;
   width: 100%;
   background: #1f40a7;
   padding: 12px;
   color: #fff;
   border: none;
   border-radius: 8px;
   cursor: pointer;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width: 900px) {
   .csb-wrapper {
      flex-direction: column;
   }

   .csb-customer,
   .csb-builder {
      width: 100%;
   }
}


/* =========================
   BUILDER SERVICES SECTION
========================= */
.builder-services-section {
   position: relative;
   background: #001f3f;
   padding: 0;
   color: #fff;
   overflow: hidden;
}

/* DOTTED ANIMATED BACKGROUND */
.builder-services-section::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 200%;
   height: 200%;
   background-image: radial-gradient(#ffffff40 2px, transparent 2px);
   background-size: 40px 40px;
   animation: dotZoom 6s infinite ease-in-out;
   z-index: 0;
}

/* OVERLAY CONTENT */
.builder-services-overlay {
   background: rgba(39, 60, 150, 0.5);
   padding: 50px 20px;
   position: relative;
   z-index: 1;
}

.builder-services-wrapper {
   display: flex;
   max-width: 1200px;
   margin: 0 auto;
   text-align: center;
   position: relative;
   z-index: 2;
   flex-direction: column;
   flex-wrap: wrap;
   gap: 20px;
   /* consistent spacing between elements */
}

.builder-services-title {
   font-size: 36px;
   margin-bottom: 50px;
   font-weight: bold;
   color: white;
}

/* =========================
   BUILDER SERVICES GRID
========================= */
.builder-services-grid {
   display: flex;
   flex-wrap: wrap;
   /* allow wrapping to new rows */
   justify-content: center;
   /* center each row including incomplete last row */
   gap: 30px;
   /* gap between cards (row and column) */
   align-items: stretch;
   /* make cards the same height if using min-height or flex children) */
   padding: 0 10px;
   /* small horizontal padding so centered rows don't touch edges */
   box-sizing: border-box;
}

/* =========================
   BUILDER SERVICE CARD
========================= */
.builder-services-card {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   /* distributes content evenly */
   align-items: center;
   /* center everything horizontally */
   width: 267px;
   min-height: 320px;
   /* adjust to your liking */
   padding: 20px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   box-sizing: border-box;
}

.builder-services-card {
   min-height: 350px;
   /* ensures tallest card fits */
}


.builder-services-card:hover {
   transform: translateY(-10px);
   background: rgba(255, 255, 255, 0);
}

.builder-service-card h3,
.builder-service-card p {
   margin: 0;
   /* remove extra default spacing */
   padding: 0;
}


/* ICON */
.builder-icon {
   width: 80px;
   height: 80px;
   margin: 0 auto 20px;
   /* center the icon inside card */
   display: block;
}

.builder-icon path {
   stroke: #ffffff;
   stroke-width: 1.5px;
   vector-effect: non-scaling-stroke;
   fill: none;
}

.builder-services-card:hover .builder-icon path {
   stroke: #ffffff !important;
}

.subtitle {
   color: rgba(255, 255, 255, 0.9);
   font-size: 18px;
}


/* TEXT */
.builder-services-heading {
   font-size: 16px;
   font-weight: 800;
   margin: 0 0 15px 0;
   /* consistent spacing */
   color: white;
   text-align: center;
}

.builder-services-text {
   font-size: 14px;
   line-height: 1.4;
   margin: 0 0 20px 0;
   /* consistent spacing */
   text-align: center;
   color: rgba(255, 255, 255, 0.95);
}

/* BUTTON */
.builder-services-btn {
   padding: 10px 25px;
   background-color: #dae64b;
   color: #000000;
   border: none;
   border-radius: 6px;
   cursor: pointer;
   font-size: 14px;
   transition: background 0.3s;
   margin-top: 5px;
   /* pushes button to bottom when card grows */
   align-self: center;
}

.builder-services-card:hover .builder-services-btn {
   background-color: white;
   color: #001f3f;
}

/* =========================
   ANIMATIONS
========================= */
@keyframes dotZoom {
   0% {
      transform: scale(1);
      opacity: 0.5;
   }

   50% {
      transform: scale(1.2);
      opacity: 0.7;
   }

   100% {
      transform: scale(1);
      opacity: 0.5;
   }
}

/* =========================
   RESPONSIVE
========================= */

.builder-services-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: flex-start;
   /* all cards start at top */
   gap: 30px;
}


/* Large desktops: allow more width, cards keep 260px each */
@media (min-width: 1400px) {
   .builder-services-grid {
      gap: 36px;
   }
}

/* 3 columns-ish */
@media (max-width: 1200px) {
   .builder-services-card {
      width: 300px;
      /* slightly wider on medium screens — optional */
   }
}

/* 2 columns */
@media (max-width: 992px) {
   .builder-services-card {
      width: calc(50% - 30px);
      /* two cards per row with gap considered */
      max-width: 420px;
   }
}

/* 1 column (mobile) */
@media (max-width: 600px) {
   .builder-services-grid {
      gap: 18px;
      padding: 0 12px;
   }

   .builder-services-card {
      width: 100%;
      max-width: 600px;
      padding: 22px;
   }

   .builder-icon {
      width: 150px;
      height: 124px;
      /* margin-bottom: 14px; */
   }

   .builder-services-title {
      font-size: 28px;
   }
}

/* ==============================
   BUILDER SERVICES SECTION end 
================================= */



/* MAIN WRAPPER */
.servicepage-wrapper {
   padding: 70px 0;
   background: #f8f9fc;
}

/* FLEX CONTAINER */
.servicepage-container {
   width: 85%;
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
   flex-wrap: wrap;
}

/* LEFT IMAGE */
.servicepage-image {
   flex: 1;
}

.servicepage-image img {
   width: 100%;
   border-radius: 12px;
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
}

/* RIGHT CONTENT */
.servicepage-content {
   flex: 1;
}

.servicepage-title {
   font-size: 34px;
   font-weight: 700;
   color: #001f3f;
   margin-bottom: 20px;
}

.servicepage-text {
   font-size: 16px;
   line-height: 1.7;
   margin-bottom: 20px;
   color: #444;
}

.servicepage-list {
   margin-bottom: 25px;
}

.servicepage-list li {
   margin-bottom: 10px;
   font-size: 16px;
   color: #333;
}

/* BUTTON */
.servicepage-btn {
   padding: 12px 26px;
   background: #001f3f;
   color: #fff;
   font-size: 16px;
   border-radius: 6px;
   display: inline-block;
   text-decoration: none;
   transition: 0.3s;
}

.servicepage-btn:hover {
   background: #495db7;
}

/* RESPONSIVE */
@media (max-width: 992px) {
   .servicepage-container {
      flex-direction: column;
      text-align: center;
   }

   .servicepage-content {
      margin-top: 20px;
   }

   .servicepage-title {
      font-size: 28px;
   }
}


/* MAIN SECTION */
.pla-home-loan-section {
   padding: 80px 0;
   /* background: #f4f7ff; */
}

.pla-container {
   width: 90%;
   max-width: 1300px;
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
   flex-wrap: wrap;
}

/* LEFT SIDE IMAGE */
.pla-image-wrapper {
   position: relative;
   width: 100%;
   max-width: 600px;
   margin: auto;
}

/* DOTTED SQUARE BEHIND THE IMAGE */
.pla-back-square {
   position: absolute;
   top: -30px;
   left: -30px;
   width: 80%;
   height: 80%;
   border-radius: 20px;
   z-index: 0;

   /* Dot Pattern */
   background-size: 18px 18px;
   background-image: radial-gradient(#001f3f 2px, transparent 2px);

   /* Continuous Animation */
   animation: zoomSquare 6s infinite linear;
}

@keyframes zoomSquare {
   0% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.1);
   }

   100% {
      transform: scale(1);
   }
}

/* IMAGE BOX */
.pla-image-box {
   position: relative;
   width: 100%;
   overflow: hidden;
   border-radius: 0px;
   z-index: 2;
}

.pla-image-box img {
   width: 100%;
   border-radius: 0px;
   display: block;
}

/* GRADIENT ANIMATION OVER IMAGE */
/* .pla-animated-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(39, 60, 150, 0.45),
        rgba(0, 198, 255, 0.35),
        rgba(144, 19, 254, 0.35)
    );
    animation: bgMove 10s infinite linear;
    mix-blend-mode: overlay;
    pointer-events: none;
}

@keyframes bgMove {
    0% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.2) translate(-25px, -25px); }
    100% { transform: scale(1) translate(0, 0); }
} */



/* ================= RIGHT CONTENT ================= */
.pla-right {
   flex: 1;
   padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

/* Title */
.pla-title {
   font-size: 42px;
   color: #001f3f;
   margin-bottom: 20px;
   font-weight: 700;
}

/* Description */
.pla-desc {
   font-size: 18px;
   line-height: 1.7;
   color: #333;
   margin-bottom: 25px;
   text-align: justify;
}

/* ================= BULLET POINTS ================= */
.pla-points {
   list-style: none;
   padding: 0;
   margin-bottom: 30px;
}

.pla-points li {
   position: relative;
   padding-left: 42px;
   /* space for icon */
   margin-bottom: 14px;
   font-size: 17px;
   line-height: 1.6;
   color: #444;
   text-align: left;
}

/* Loan-themed bullet */
.pla-points li::before {
   content: "₹";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);

   width: 26px;
   height: 26px;
   background: #001f3f;
   /* brand blue */
   color: #fff;

   border-radius: 50%;
   font-size: 14px;
   font-weight: 700;

   display: flex;
   align-items: center;
   justify-content: center;
}


/* ================= BUTTON ================= */
.pla-btn {
   padding: 14px 28px;
   background: #dae64b;
   color: #000000;
   text-decoration: none;
   font-size: 17px;
   border-radius: 0;
   transition: 0.3s;
   display: inline-block;
}

.pla-btn:hover {
   background: #001f3f;
   color: white;
}

/* ================= LAPTOP & TABLET ================= */
@media (max-width: 992px) {

   .pla-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
   }

   .pla-right {
      align-items: center;
      padding: 15px;
   }

   .pla-title {
      font-size: 34px;
   }

   .pla-desc {
      font-size: 16px;
      align-items: center;
   }

   .pla-points {
      text-align: left;
      max-width: 420px;
      margin: 0 auto 25px;
   }

   .pla-btn {
      margin-top: 10px;
   }
}

/* ================= MOBILE ================= */
@media (max-width: 576px) {

   .pla-title {
      font-size: 26px;
   }

   .pla-desc {
      font-size: 15px;
   }

   .pla-points li {
      font-size: 15px;
   }

   .pla-btn {
      font-size: 15px;
      padding: 12px 24px;
   }
}



/* MAIN SECTION */
.for-builder-section {
   padding: 80px 0;
   /* background: #f4f7ff; */
}

.for-builder-section-container {
   width: 90%;
   max-width: 1300px;
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
   flex-wrap: wrap;
}

/* LEFT SIDE IMAGE */
.for-builder-section-image-wrapper {
   position: relative;
   width: 100%;
   max-width: 600px;
   margin: auto;
}

/* DOTTED SQUARE BEHIND THE IMAGE */
.for-builder-section-back-square {
   position: absolute;
   top: -30px;
   left: -30px;
   width: 80%;
   height: 80%;
   border-radius: 20px;
   z-index: 0;

   /* Dot Pattern */
   background-size: 18px 18px;
   background-image: radial-gradient(#001f3f 2px, transparent 2px);

   /* Continuous Animation */
   animation: zoomSquare 6s infinite linear;
}

@keyframes zoomSquare {
   0% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.1);
   }

   100% {
      transform: scale(1);
   }
}

/* IMAGE BOX */
.for-builder-section-image-box {
   position: relative;
   width: 100%;
   overflow: hidden;
   border-radius: 0px;
   z-index: 2;
}

.for-builder-section-image-box img {
   width: 100%;
   border-radius: 0px;
   display: block;
}

/* GRADIENT ANIMATION OVER IMAGE */
/* .pla-animated-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(39, 60, 150, 0.45),
        rgba(0, 198, 255, 0.35),
        rgba(144, 19, 254, 0.35)
    );
    animation: bgMove 10s infinite linear;
    mix-blend-mode: overlay;
    pointer-events: none;
}

@keyframes bgMove {
    0% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.2) translate(-25px, -25px); }
    100% { transform: scale(1) translate(0, 0); }
} */

/* RIGHT CONTENT */
.for-builder-section-right {
   flex: 1;
   padding: 20px;

}

.for-builder-section-title {
   font-size: 42px;
   color: #001f3f;
   margin-bottom: 20px;
   font-weight: 700;
   margin-left: -95px;
}

.for-builder-section-desc {
   font-size: 18px;
   line-height: 1.7;
   color: #333;
   margin-bottom: 25px;
   text-align: justify;
}

/* BULLET POINTS */
.for-builder-section-points {
   list-style: none;
   padding: 0;
   margin: 0;
}

.for-builder-section-points li {
   position: relative;
   padding-left: 42px;
   margin-bottom: 14px;

   font-size: 17px;
   line-height: 1.6;
   color: #444;
   text-align: left;
}

/* Loan-style bullet */
.for-builder-section-points li::before {
   content: "₹";
   /* loan symbol */
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);

   width: 26px;
   height: 26px;
   background: #001f3f;
   color: #fff;

   border-radius: 50%;
   font-size: 14px;
   font-weight: 700;

   display: flex;
   align-items: center;
   justify-content: center;
}


/* BUTTON */
.for-builder-section-btn {
   padding: 20px 12px;
   background: gray;
   color: white;
   text-decoration: none;
   font-size: 17px;
   border-radius: 0px;
   transition: 0.3s;
   display: inline-block;
   margin-left: -415px;
}

.for-builder-section-btn:hover {
   background: #001f3f;
   color: white;
}

/* RESPONSIVE */
@media (max-width: 992px) {
   .for-builder-section-container {
      flex-direction: column;
      text-align: center;
   }

   .for-builder-section-back-square {
      top: -20px;
      left: -20px;
   }

   .for-builder-section-points {
      text-align: left;
      margin: auto;
      max-width: 350px;
   }

   .for-builder-section-title {
      font-size: 32px;
      left: 55px;
   }

   .for-builder-section-desc,
   .for-builder-section-points li {
      font-size: 16px;
   }
}

@media (max-width: 576px) {
   .for-builder-section-back-square {
      top: -15px;
      left: -15px;
   }
}

.step-btn {
   width: 126px;
   margin-top: 10px;
   padding: 8px 18px;
   background: #dae64b;
   color: #000000;
   border: none;
   border-radius: 6px;
   font-size: 14px;
   cursor: pointer;
   transition: 0.3s ease;
   text-decoration: none;
   /* important for <a> button */
   display: inline-block;
}

.service-box:hover .step-btn {
   background: white;
   color: #001f3f;
}

.compare-box,
.output-box,
.single-emi-box,
.difference-box {
   border-radius: 12px;
   padding: 20px;
   border: 1px solid #e3e3e3;
   background-color: #fff;
   min-height: 220px;
   min-width: 230px;
   /* wider box */
   max-width: 250px;
   padding: 25px;
   /* more space inside */
}

/* Titles */
.loan-section-title,
h5 {
   font-weight: 500;
   color: #666;
}

/* Difference Box */
.difference-box {
   background-color: #fff3f3;
   border: 1px solid #ffb3b3;
}

/* Inputs */
.compare-box input {
   border-radius: 8px;
   height: 40px;
   margin-bottom: 8px;
}

/* Responsive Stack */
@media (max-width: 992px) {
   .col-lg-2 {
      flex: 0 0 50%;
      max-width: 50%;
   }
}

@media (max-width: 576px) {

   .col-lg-2,
   .col-md-6 {
      flex: 0 0 100%;
      max-width: 115%;
   }
}

.row.five-boxes {
   display: flex;
   flex-wrap: wrap;
   gap: 47px;
   /* spacing between boxes */
   justify-content: center;
   /* center horizontally */
}

.five-boxes>div {
   flex: 1 1 18%;
   /* grow/shrink, base width 18% */
   min-width: 180px;
   /* minimum width for mobile */
}




.blog-title {
   font-size: 18px;
   font-weight: 700;
   color: #001f3f;
   position: relative;
   display: inline-block;
   transition: all 0.3s ease;
}

/* Hover Effect */
.blog-title:hover {
   color: gray;
   /* Blue hover color */
   transform: scale(1.03);
}

/* Underline Animation */
/* .blog-title::after {
    content: "";
    position: absolute;
    width: 0;
    height: 3px;
    background: #0d6efd;
    left: 0;
    bottom: -5px;
    transition: width 0.3s ease;
} */

.blog-title:hover::after {
   width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
   .blog-title {
      font-size: 22px;
   }
}

@media (max-width: 480px) {
   .blog-title {
      font-size: 18px;
   }
}


/* Blog Card Layout Fix */
.post-block {
   display: flex;
   flex-direction: column;
   height: 100%;
   background: #fff;
   /* border-radius: 10px; */
   overflow: hidden;
   transition: all 0.3s ease;
   margin-bottom: 20px;
   /* box-shadow: 0 2px 10px rgba(0,0,0,0.08); */
}

/* Image always fixed height */
.post-img img {
   width: 100%;
   height: 230px;
   object-fit: cover;
   /* border-radius: 10px 10px 0 0; */
}

/* Content area */
.outline {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   /* equal spacing */
   padding: 25px;
}

.blog-title {
   font-size: 20px;
   font-weight: 700;
   color: #001f3f;
   /* Your color */
   line-height: 1.4;
   display: inline-block;
   transition: none !important;
   /* No hover animation */
}

/* Remove hover effect completely */
.blog-title:hover {
   color: #001f3f;
   transform: none !important;
}


/* Read More Button */
.btn.btn-default {
   margin-top: 15px;
   background: var(--gradient-accent) !important;
}

/* Hover card effect */
.post-block:hover {
   /* transform: translateY(-5px); */
   /* box-shadow: 0 4px 18px rgba(0,0,0,0.15); */
}

/* Responsive Fix */
@media (max-width: 768px) {
   .post-img img {
      height: 200px;
   }

   .blog-title {
      font-size: 18px;
   }
}

@media (max-width: 480px) {
   .post-img img {
      height: 170px;
   }

   .outline {
      padding: 18px;
   }

   .blog-title {
      font-size: 17px;
   }
}


/* ICON */
.feature-icon {
   width: 80px;
   height: 80px;
   margin: 0 auto 20px;
   display: block;

   /* Add animation */
   transition: transform 0.3s ease;
}

.feature-icon:hover {
   transform: scale(1.1);
   /* Zoom icon */
}

/* On card hover */
.builder-services-card:hover .feature-icon {
   transform: scale(1.1);
}

.feature-icon path {
   stroke: #001f3f;
   stroke-width: 0.9px;
   vector-effect: non-scaling-stroke;
   fill: none;
}

/* Change icon stroke color on card hover */
.builder-services-card:hover .feature-icon path {
   stroke: #ffffff !important;
}

.subtitle {
   color: rgba(255, 255, 255, 0.9);
   font-size: 18px;
}

/* Equal height card */
.contact-card {
   height: 90%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 40px 40px;
}

/* Icon spacing */
.contact-card .icon-wrap {
   margin-bottom: 25px;
}

/* Title spacing */
.contact-card .capital-title {
   margin-bottom: 15px;
   font-weight: 700;
}

/* Content stays aligned */
.contact-card p,
.contact-card h5 {
   margin: 0;
}

/* Push content nicely */
.contact-card p,
.contact-card h5 {
   margin-top: auto;
}

@media (max-width: 991px) {
   .contact-card {
      padding: 45px 30px;
   }
}

@media (max-width: 991.98px) {
   #navigation {
      float: none;
      width: 100%;
   }
}

/* Center compare box on mobile */
@media (max-width: 575px) {
   .compare-box {
      margin-left: auto;
      margin-right: auto;
      max-width: 320px;
      /* optional – looks better on mobile */
   }
}

/* Center compare box on mobile */
@media (max-width: 575px) {
   .single-emi-box {
      margin-left: auto;
      margin-right: auto;
      max-width: 320px;
      /* optional – looks better on mobile */
   }
}

/* Center compare box on mobile */
@media (max-width: 575px) {
   .output-box {
      margin-left: auto;
      margin-right: auto;
      max-width: 320px;
      /* optional – looks better on mobile */
   }
}

/* Center compare box on mobile */
@media (max-width: 575px) {
   .difference-box {
      margin-left: auto;
      margin-right: auto;
      max-width: 320px;
      /* optional – looks better on mobile */
   }
}

.tiny-footer {
   padding: 15px 0;
}

.footer-text {
   font-size: medium;
}

.footer-link {
   /* color: #001f3f; */
   color: var(--white) !important;
   text-decoration: none;
}

.footer-link:hover {
   text-decoration: underline;
}

/* Social icon spacing */
.social-links {
   display: flex;
   justify-content: flex-end;
   gap: 15px;
   /* 👈 SPACE BETWEEN ICONS */
}

.social-links a {
   color: #fff;
   font-size: 18px;
   transition: 0.3s;
}

.social-links a:hover {
   color: #001f3f;
}

/* Mobile alignment */
@media (max-width: 991px) {
   .social-links {
      justify-content: center;
      margin-top: 8px;
      /* 👈 SPACE BETWEEN TEXT & ICONS */
   }
}