/* Start custom CSS for html, class: .elementor-element-c9684ed *//* =========================================================
HDLS PREMIUM HEADER
HARNAM DAS LOAN SERVICE
========================================================= */
#hdls-main-header {
--hdls-header-light: #E3F2FD;
--hdls-header-soft: #90CAF9;
--hdls-header-blue: #2196F3;
--hdls-header-dark: #0D47A1;
--hdls-header-navy: #082D63;
--hdls-header-text: #233B57;
width: 100%;
position: sticky;
top: 0;
z-index: 99999;
background: rgba(255,255,255,.97);
border-bottom:
1px solid rgba(33,150,243,.12);
box-shadow:
0 8px 35px rgba(8,45,99,.08);
font-family:
Arial,
Helvetica,
sans-serif;
}
/* =========================================================
HEADER WRAPPER
========================================================= */
#hdls-main-header .hdls-header-wrap {
width:
min(1440px, calc(100% - 60px));
margin: 0 auto;
min-height: 88px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
/* =========================================================
LOGO
========================================================= */
#hdls-main-header .hdls-logo {
flex-shrink: 0;
width: 86px;
height: 76px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition:
transform .3s ease;
}
#hdls-main-header .hdls-logo img {
display: block;
width: 82px;
height: 82px;
max-width: none;
object-fit: contain;
transition:
transform .3s ease,
filter .3s ease;
}
#hdls-main-header .hdls-logo:hover {
transform:
translateY(-1px);
}
#hdls-main-header .hdls-logo:hover img {
transform:
scale(1.035);
}
/* =========================================================
NAVIGATION
========================================================= */
#hdls-main-header .hdls-navigation {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 32px;
flex: 1;
}
#hdls-main-header .hdls-nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
gap: 6px;
}
#hdls-main-header .hdls-nav-item {
position: relative;
list-style: none;
}
#hdls-main-header .hdls-nav-link {
position: relative;
display: flex;
align-items: center;
gap: 7px;
padding:
33px 14px;
text-decoration: none;
color:
var(--hdls-header-text);
font-size: 14px;
font-weight: 700;
letter-spacing: .1px;
transition:
color .3s ease,
background .3s ease;
}
/* =========================================================
NAVIGATION UNDERLINE
========================================================= */
#hdls-main-header
.hdls-nav-link::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 22px;
height: 2px;
border-radius: 20px;
background:
linear-gradient(
90deg,
var(--hdls-header-blue),
var(--hdls-header-dark)
);
transform:
scaleX(0);
transform-origin: center;
transition:
transform .3s ease;
}
#hdls-main-header
.hdls-nav-link:hover {
color:
var(--hdls-header-dark);
}
#hdls-main-header
.hdls-nav-link:hover::after {
transform:
scaleX(1);
}
/* =========================================================
DROPDOWN ARROW
========================================================= */
#hdls-main-header .hdls-arrow {
font-size: 17px;
line-height: 1;
color:
var(--hdls-header-blue);
transition:
transform .3s ease;
}
#hdls-main-header
.hdls-mega-parent:hover
.hdls-arrow {
transform:
rotate(180deg);
}
/* =========================================================
MEGA MENU
========================================================= */
#hdls-main-header .hdls-mega-menu {
position: absolute;
top:
calc(100% - 1px);
left: 50%;
width:
min(1040px, 90vw);
transform:
translateX(-50%)
translateY(15px);
padding: 0;
background:
#ffffff;
border:
1px solid rgba(33,150,243,.14);
border-radius:
0 0 22px 22px;
box-shadow:
0 25px 70px rgba(8,45,99,.16);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .28s ease,
visibility .28s ease,
transform .28s ease;
}
/* SHOW MEGA MENU */
#hdls-main-header
.hdls-mega-parent:hover
.hdls-mega-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translateX(-50%)
translateY(0);
}
/* =========================================================
MEGA MENU INNER
========================================================= */
#hdls-main-header .hdls-mega-inner {
padding: 32px;
}
/* =========================================================
MEGA MENU HEADING
========================================================= */
#hdls-main-header .hdls-mega-heading {
padding-bottom: 23px;
margin-bottom: 22px;
border-bottom:
1px solid rgba(33,150,243,.12);
}
#hdls-main-header .hdls-mega-eyebrow {
display: block;
margin-bottom: 7px;
color:
var(--hdls-header-blue);
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
#hdls-main-header .hdls-mega-heading h3 {
margin:
0 0 7px;
color:
var(--hdls-header-navy);
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 27px;
line-height: 1.2;
}
#hdls-main-header .hdls-mega-heading p {
max-width: 650px;
margin: 0;
color: #687B8E;
font-size: 13px;
line-height: 1.7;
}
/* =========================================================
LOAN GRID
========================================================= */
#hdls-main-header .hdls-loan-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 12px;
}
/* =========================================================
LOAN ITEM
========================================================= */
#hdls-main-header .hdls-loan-item {
position: relative;
min-height: 78px;
display: flex;
align-items: center;
gap: 15px;
padding:
13px 14px;
text-decoration: none;
border-radius: 13px;
background:
#F8FBFE;
border:
1px solid rgba(33,150,243,.08);
overflow: hidden;
transition:
transform .3s ease,
background .3s ease,
border-color .3s ease,
box-shadow .3s ease;
}
#hdls-main-header
.hdls-loan-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background:
linear-gradient(
180deg,
var(--hdls-header-blue),
var(--hdls-header-dark)
);
transform:
scaleY(0);
transform-origin: bottom;
transition:
transform .3s ease;
}
#hdls-main-header
.hdls-loan-item:hover {
transform:
translateY(-4px);
background:
#ffffff;
border-color:
rgba(33,150,243,.22);
box-shadow:
0 12px 28px rgba(8,45,99,.10);
}
#hdls-main-header
.hdls-loan-item:hover::before {
transform:
scaleY(1);
}
/* =========================================================
LOAN ICON
========================================================= */
#hdls-main-header .hdls-loan-icon {
width: 48px;
height: 48px;
flex:
0 0 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background:
linear-gradient(
145deg,
#E3F2FD,
#F6FBFF
);
transition:
transform .3s ease,
background .3s ease;
}
#hdls-main-header
.hdls-loan-icon img {
width: 31px;
height: 31px;
object-fit: contain;
transition:
transform .3s ease;
}
#hdls-main-header
.hdls-loan-item:hover
.hdls-loan-icon {
transform:
rotate(-4deg);
background:
linear-gradient(
145deg,
#D9EEFF,
#EEF8FF
);
}
#hdls-main-header
.hdls-loan-item:hover
.hdls-loan-icon img {
transform:
scale(1.1);
}
/* =========================================================
LOAN CONTENT
========================================================= */
#hdls-main-header
.hdls-loan-content {
min-width: 0;
}
#hdls-main-header
.hdls-loan-content h4 {
margin: 0;
color:
var(--hdls-header-navy);
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 15px;
line-height: 1.3;
font-weight: 700;
}
#hdls-main-header
.hdls-loan-content span {
display: block;
margin-top: 5px;
color:
var(--hdls-header-blue);
font-size: 10px;
font-weight: 700;
letter-spacing: .3px;
opacity: 0;
transform:
translateX(-5px);
transition:
opacity .25s ease,
transform .25s ease;
}
#hdls-main-header
.hdls-loan-item:hover
.hdls-loan-content span {
opacity: 1;
transform:
translateX(0);
}
/* =========================================================
PHONE CONTACT
========================================================= */
#hdls-main-header
.hdls-header-contact {
display: flex;
align-items: center;
gap: 15px;
padding-left: 24px;
border-left:
1px solid rgba(33,150,243,.15);
}
#hdls-main-header .hdls-phone {
display: flex;
align-items: center;
gap: 8px;
color:
var(--hdls-header-navy);
text-decoration: none;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
transition:
color .3s ease;
}
#hdls-main-header
.hdls-phone:hover {
color:
var(--hdls-header-blue);
}
#hdls-main-header
.hdls-phone small {
display: block;
margin-bottom: 3px;
color: #8293A5;
font-size: 8px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 1px;
}
#hdls-main-header
.hdls-phone-icon {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color:
var(--hdls-header-blue);
background:
var(--hdls-header-light);
font-size: 13px;
transition:
background .3s ease,
transform .3s ease;
}
#hdls-main-header
.hdls-phone:hover
.hdls-phone-icon {
color: #ffffff;
background:
var(--hdls-header-blue);
transform:
rotate(-10deg);
}
/* =========================================================
MOBILE TOGGLE
========================================================= */
#hdls-main-header
.hdls-menu-toggle {
display: none;
width: 44px;
height: 44px;
border: 0;
border-radius: 10px;
background:
var(--hdls-header-light);
cursor: pointer;
padding: 10px;
}
#hdls-main-header
.hdls-menu-toggle span {
display: block;
width: 100%;
height: 2px;
margin: 5px 0;
border-radius: 10px;
background:
var(--hdls-header-dark);
transition:
transform .3s ease,
opacity .3s ease;
}
/* ACTIVE MOBILE ICON */
#hdls-main-header
.hdls-menu-toggle.hdls-toggle-active
span:nth-child(1) {
transform:
translateY(7px)
rotate(45deg);
}
#hdls-main-header
.hdls-menu-toggle.hdls-toggle-active
span:nth-child(2) {
opacity: 0;
}
#hdls-main-header
.hdls-menu-toggle.hdls-toggle-active
span:nth-child(3) {
transform:
translateY(-7px)
rotate(-45deg);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1250px) {
#hdls-main-header
.hdls-header-wrap {
width:
min(100% - 35px, 1180px);
}
#hdls-main-header
.hdls-navigation {
gap: 14px;
}
#hdls-main-header
.hdls-header-contact {
gap: 9px;
padding-left: 14px;
}
#hdls-main-header
.hdls-phone {
font-size: 10px;
}
#hdls-main-header
.hdls-phone-icon {
display: none;
}
}
/* =========================================================
MOBILE / TABLET
========================================================= */
@media (max-width: 1050px) {
#hdls-main-header
.hdls-header-wrap {
min-height: 76px;
}
#hdls-main-header
.hdls-logo {
width: 72px;
height: 66px;
}
#hdls-main-header
.hdls-logo img {
width: 68px;
height: 68px;
}
#hdls-main-header
.hdls-menu-toggle {
display: block;
}
#hdls-main-header
.hdls-navigation {
position: absolute;
top: 100%;
left: 0;
right: 0;
display: block;
padding:
12px 20px 25px;
background:
#ffffff;
border-top:
1px solid rgba(33,150,243,.1);
box-shadow:
0 20px 40px rgba(8,45,99,.12);
max-height:
calc(100vh - 76px);
overflow-y: auto;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform:
translateY(-10px);
transition:
opacity .3s ease,
visibility .3s ease,
transform .3s ease;
}
#hdls-main-header
.hdls-navigation.hdls-mobile-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translateY(0);
}
#hdls-main-header
.hdls-nav-list {
display: block;
}
#hdls-main-header
.hdls-nav-item {
width: 100%;
border-bottom:
1px solid rgba(33,150,243,.08);
}
#hdls-main-header
.hdls-nav-link {
width: 100%;
padding:
16px 8px;
justify-content:
space-between;
}
#hdls-main-header
.hdls-nav-link::after {
display: none;
}
/* MOBILE MEGA MENU */
#hdls-main-header
.hdls-mega-menu {
position: static;
width: 100%;
transform: none !important;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
display: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#hdls-main-header
.hdls-mega-parent.hdls-mega-open
.hdls-mega-menu {
display: block;
}
#hdls-main-header
.hdls-mega-inner {
padding:
5px 0 18px;
}
#hdls-main-header
.hdls-mega-heading {
padding:
12px 8px 18px;
margin-bottom: 15px;
}
#hdls-main-header
.hdls-loan-grid {
grid-template-columns:
repeat(2, 1fr);
gap: 9px;
}
#hdls-main-header
.hdls-loan-item {
min-height: 70px;
}
/* MOBILE PHONE NUMBERS */
#hdls-main-header
.hdls-header-contact {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 10px;
margin-top: 18px;
padding:
18px 0 0;
border-left: 0;
border-top:
1px solid rgba(33,150,243,.12);
}
#hdls-main-header
.hdls-phone {
white-space:
normal;
}
#hdls-main-header
.hdls-phone-icon {
display: flex;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 600px) {
#hdls-main-header
.hdls-header-wrap {
width:
calc(100% - 28px);
}
#hdls-main-header
.hdls-logo {
width: 65px;
height: 62px;
}
#hdls-main-header
.hdls-logo img {
width: 64px;
height: 64px;
}
#hdls-main-header
.hdls-navigation {
padding-left: 14px;
padding-right: 14px;
}
#hdls-main-header
.hdls-loan-grid {
grid-template-columns:
1fr;
}
#hdls-main-header
.hdls-loan-item {
min-height: 65px;
}
#hdls-main-header
.hdls-mega-heading h3 {
font-size: 23px;
}
#hdls-main-header
.hdls-header-contact {
grid-template-columns:
1fr;
}
#hdls-main-header
.hdls-phone {
padding:
5px 0;
}
}
/* =========================================================
EXTRA SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
#hdls-main-header
.hdls-logo {
width: 58px;
height: 58px;
}
#hdls-main-header
.hdls-logo img {
width: 58px;
height: 58px;
}
#hdls-main-header
.hdls-loan-icon {
width: 42px;
height: 42px;
flex-basis: 42px;
}
#hdls-main-header
.hdls-loan-icon img {
width: 27px;
height: 27px;
}
}/* End custom CSS */