/* Start custom CSS for html, class: .elementor-element-c656bb8 *//* =========================================
VPB FOOTER
========================================= */
.vpb-footer {
--maroon: #a91f2b;
--maroon-dark: #690d16;
--maroon-deep: #4d0a11;
--gold: #f5c542;
--gold-light: #f9dc78;
--cream: #fff8ed;
--white: #ffffff;
--text-light: #f7e9d8;
width: 100%;
color: var(--white);
font-family:
"Noto Sans Devanagari",
"Poppins",
sans-serif;
background:
linear-gradient(
135deg,
var(--maroon-deep),
var(--maroon-dark)
);
}
/* =========================================
MAIN FOOTER
========================================= */
.vpb-footer-main {
position: relative;
padding:
70px 20px 55px;
overflow: hidden;
}
/* Decorative Glow */
.vpb-footer-main::before {
content: "";
position: absolute;
width: 450px;
height: 450px;
top: -250px;
right: -180px;
background:
radial-gradient(
circle,
rgba(245,197,66,0.14),
transparent 65%
);
pointer-events: none;
}
.vpb-footer-main::after {
content: "";
position: absolute;
width: 350px;
height: 350px;
bottom: -220px;
left: -180px;
background:
radial-gradient(
circle,
rgba(255,255,255,0.06),
transparent 65%
);
pointer-events: none;
}
/* =========================================
CONTAINER
========================================= */
.vpb-footer-container {
width: min(1400px, 94%);
margin: auto;
display: grid;
grid-template-columns:
1.7fr
1fr
1fr
1.3fr;
gap: 55px;
position: relative;
z-index: 2;
}
/* =========================================
BRAND
========================================= */
.vpb-footer-brand {
max-width: 390px;
}
.vpb-footer-logo {
width: 115px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.vpb-footer-logo img {
width: 110px;
height: 75px;
object-fit: contain;
display: block;
}
.vpb-footer-brand h3 {
margin: 0 0 14px;
color: var(--gold-light);
font-family:
"Noto Serif Devanagari",
serif;
font-size: 21px;
line-height: 1.5;
}
.vpb-footer-brand p {
margin: 0;
color: var(--text-light);
font-size: 13px;
line-height: 1.9;
}
/* =========================================
SOCIAL
========================================= */
.vpb-footer-social {
display: flex;
gap: 9px;
margin-top: 23px;
}
.vpb-footer-social a {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
background:
rgba(255,255,255,0.08);
border:
1px solid rgba(245,197,66,0.25);
border-radius: 50%;
transition:
transform 0.25s ease,
background 0.25s ease,
color 0.25s ease;
}
.vpb-footer-social a:hover {
color: var(--maroon-dark);
background: var(--gold);
transform:
translateY(-4px);
}
/* =========================================
FOOTER COLUMNS
========================================= */
.vpb-footer-column h4 {
margin: 5px 0 10px;
color: var(--white);
font-family:
"Noto Serif Devanagari",
serif;
font-size: 17px;
}
/* GOLD LINE */
.vpb-footer-line {
display: block;
width: 38px;
height: 3px;
margin-bottom: 19px;
background:
linear-gradient(
90deg,
var(--gold),
transparent
);
border-radius: 5px;
}
/* =========================================
LINKS
========================================= */
.vpb-footer-column ul {
margin: 0;
padding: 0;
list-style: none;
}
.vpb-footer-column ul li {
margin-bottom: 10px;
}
.vpb-footer-column ul li a {
display: inline-flex;
align-items: center;
color:
rgba(255,255,255,0.78);
font-size: 13px;
transition:
color 0.25s ease,
padding-left 0.25s ease;
}
.vpb-footer-column ul li a::before {
content: "›";
color: var(--gold);
font-size: 17px;
margin-right: 7px;
transition:
transform 0.25s ease;
}
.vpb-footer-column ul li a:hover {
color: var(--gold-light);
padding-left: 5px;
}
.vpb-footer-column ul li a:hover::before {
transform:
translateX(3px);
}
/* =========================================
CONTACT
========================================= */
.vpb-contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
}
.vpb-contact-icon {
width: 35px;
height: 35px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
background:
rgba(245,197,66,0.09);
border:
1px solid rgba(245,197,66,0.2);
border-radius: 9px;
}
.vpb-contact-item strong {
display: block;
margin-bottom: 2px;
color: var(--white);
font-size: 12px;
}
.vpb-contact-item p,
.vpb-contact-item a {
margin: 0;
color:
rgba(255,255,255,0.72);
font-size: 12px;
line-height: 1.6;
}
.vpb-contact-item a:hover {
color: var(--gold-light);
}
/* =========================================
CTA SECTION
========================================= */
.vpb-footer-cta {
padding:
25px 20px;
background:
rgba(0,0,0,0.14);
border-top:
1px solid rgba(245,197,66,0.15);
border-bottom:
1px solid rgba(245,197,66,0.15);
}
.vpb-footer-cta-inner {
width: min(1400px, 94%);
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
.vpb-footer-cta span {
color: var(--gold);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
}
.vpb-footer-cta h3 {
margin: 5px 0 0;
color: var(--white);
font-family:
"Noto Serif Devanagari",
serif;
font-size: 20px;
}
.vpb-footer-cta-inner > a {
display: flex;
align-items: center;
gap: 9px;
padding:
11px 20px;
color: var(--maroon-dark);
background: var(--gold);
border-radius: 25px;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.vpb-footer-cta-inner > a:hover {
transform:
translateY(-2px);
box-shadow:
0 8px 20px rgba(0,0,0,0.2);
}
.vpb-footer-cta-inner > a i {
transition:
transform 0.25s ease;
}
.vpb-footer-cta-inner > a:hover i {
transform:
translateX(4px);
}
/* =========================================
BOTTOM BAR
========================================= */
.vpb-footer-bottom {
padding:
17px 20px;
background:
rgba(0,0,0,0.20);
}
.vpb-footer-bottom-inner {
width: min(1400px, 94%);
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.vpb-footer-bottom p {
margin: 0;
color:
rgba(255,255,255,0.62);
font-size: 11px;
}
.vpb-footer-bottom strong {
color:
rgba(255,255,255,0.85);
}
.vpb-footer-legal {
display: flex;
align-items: center;
gap: 10px;
}
.vpb-footer-legal a {
color:
rgba(255,255,255,0.62);
font-size: 11px;
transition:
color 0.2s ease;
}
.vpb-footer-legal a:hover {
color: var(--gold);
}
.vpb-footer-legal span {
color: var(--gold);
opacity: 0.5;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1000px) {
.vpb-footer-container {
grid-template-columns:
1.5fr 1fr 1fr;
gap: 40px;
}
.vpb-contact-column {
grid-column: span 3;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 700px) {
.vpb-footer-main {
padding:
50px 20px 40px;
}
.vpb-footer-container {
width: 100%;
grid-template-columns: 1fr;
gap: 35px;
}
.vpb-footer-brand {
max-width: 100%;
}
.vpb-contact-column {
grid-column: auto;
}
.vpb-footer-cta {
padding:
25px 20px;
}
.vpb-footer-cta-inner {
width: 100%;
flex-direction: column;
align-items: flex-start;
}
.vpb-footer-cta h3 {
font-size: 17px;
}
.vpb-footer-cta-inner > a {
width: 100%;
justify-content: center;
}
.vpb-footer-bottom-inner {
width: 100%;
flex-direction: column;
text-align: center;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 450px) {
.vpb-footer-brand h3 {
font-size: 18px;
}
.vpb-footer-brand p {
font-size: 12px;
}
.vpb-footer-bottom p {
line-height: 1.7;
}
}/* End custom CSS */