/* Start custom CSS for html, class: .elementor-element-85ebd19 *//* =========================================================
HAMMAD ABBAS — PREMIUM FOOTER CSS
========================================================= */
/* =========================================================
FOOTER VARIABLES
========================================================= */
.site-footer {
--footer-navy: #0b1220;
--footer-navy-2: #101a2d;
--footer-blue: #2563eb;
--footer-blue-light: #60a5fa;
--footer-text: #cbd5e1;
--footer-muted: #94a3b8;
--footer-border: rgba(255,255,255,.09);
}
/* =========================================================
FOOTER RESET
========================================================= */
.site-footer,
.site-footer *,
.site-footer *::before,
.site-footer *::after {
box-sizing: border-box !important;
}
.site-footer a {
text-decoration: none !important;
}
.site-footer ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* =========================================================
MAIN FOOTER
========================================================= */
.site-footer {
width: 100% !important;
margin: 0 !important;
color: #ffffff !important;
background:
linear-gradient(
135deg,
#08111f 0%,
#0d1728 48%,
#101c32 100%
) !important;
font-family:
"Poppins",
sans-serif !important;
overflow: hidden !important;
}
/* =========================================================
FOOTER CONTAINER
========================================================= */
.site-footer .footer-container {
width:
min(1380px, calc(100% - 60px)) !important;
margin:
0 auto !important;
}
/* =========================================================
MAIN FOOTER AREA
========================================================= */
.site-footer .footer-main {
position: relative !important;
padding:
78px 0 65px !important;
}
/* =========================================================
SUBTLE BACKGROUND GLOW
========================================================= */
.site-footer .footer-main::before {
content: "" !important;
position: absolute !important;
top: -180px !important;
right: -150px !important;
width: 420px !important;
height: 420px !important;
border-radius: 50% !important;
background:
rgba(37,99,235,.10) !important;
filter:
blur(20px) !important;
pointer-events: none !important;
}
.site-footer .footer-main::after {
content: "" !important;
position: absolute !important;
bottom: -200px !important;
left: -180px !important;
width: 400px !important;
height: 400px !important;
border-radius: 50% !important;
background:
rgba(59,130,246,.06) !important;
filter:
blur(30px) !important;
pointer-events: none !important;
}
/* =========================================================
FOOTER GRID
========================================================= */
.site-footer .footer-main .footer-container {
position: relative !important;
z-index: 2 !important;
display: grid !important;
grid-template-columns:
2fr 1fr 1fr 1fr !important;
gap:
65px !important;
align-items:
start !important;
}
/* =========================================================
BRAND
========================================================= */
.site-footer .footer-brand {
max-width:
430px !important;
}
/* =========================================================
FOOTER LOGO
========================================================= */
.site-footer .footer-logo {
display:
inline-flex !important;
align-items:
center !important;
margin:
0 0 22px !important;
padding:
0 !important;
color:
#ffffff !important;
background:
transparent !important;
font-size:
31px !important;
font-weight:
800 !important;
line-height:
1 !important;
letter-spacing:
-1.7px !important;
}
.site-footer .footer-logo:hover {
background:
transparent !important;
}
.site-footer .footer-logo-hammad {
color:
#ffffff !important;
}
.site-footer .footer-logo-abbas {
color:
#60a5fa !important;
margin-left:
7px !important;
}
/* =========================================================
DESCRIPTION
========================================================= */
.site-footer .footer-description {
max-width:
410px !important;
margin:
0 !important;
color:
#94a3b8 !important;
font-size:
13px !important;
font-weight:
400 !important;
line-height:
1.9 !important;
}
/* =========================================================
SOCIAL ICONS
========================================================= */
.site-footer .footer-socials {
display:
flex !important;
align-items:
center !important;
gap:
10px !important;
margin-top:
27px !important;
}
.site-footer .footer-social {
width:
38px !important;
height:
38px !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
color:
#cbd5e1 !important;
background:
rgba(255,255,255,.055) !important;
border:
1px solid rgba(255,255,255,.09) !important;
border-radius:
10px !important;
font-size:
12px !important;
font-weight:
600 !important;
transition:
transform .25s ease,
color .25s ease,
background .25s ease,
border-color .25s ease !important;
}
.site-footer .footer-social:hover {
color:
#ffffff !important;
background:
#2563eb !important;
border-color:
#2563eb !important;
transform:
translateY(-4px) !important;
box-shadow:
0 8px 20px
rgba(37,99,235,.25) !important;
}
/* =========================================================
FOOTER COLUMNS
========================================================= */
.site-footer .footer-column {
position:
relative !important;
}
/* =========================================================
COLUMN HEADINGS
========================================================= */
.site-footer .footer-column h3 {
position:
relative !important;
margin:
3px 0 23px !important;
padding:
0 !important;
color:
#ffffff !important;
background:
transparent !important;
font-size:
13px !important;
font-weight:
700 !important;
line-height:
1.4 !important;
letter-spacing:
.2px !important;
}
.site-footer .footer-column h3::after {
content: "" !important;
display:
block !important;
width:
27px !important;
height:
2px !important;
margin-top:
9px !important;
border-radius:
50px !important;
background:
linear-gradient(
90deg,
#2563eb,
#60a5fa
) !important;
}
/* =========================================================
FOOTER LINKS
========================================================= */
.site-footer .footer-column li {
margin:
0 !important;
padding:
0 !important;
}
.site-footer .footer-column li a {
position:
relative !important;
display:
inline-block !important;
padding:
5px 0 !important;
color:
#94a3b8 !important;
background:
transparent !important;
font-size:
12px !important;
font-weight:
400 !important;
line-height:
1.7 !important;
transition:
color .2s ease,
transform .2s ease !important;
}
.site-footer .footer-column li a:hover {
color:
#ffffff !important;
background:
transparent !important;
transform:
translateX(4px) !important;
}
/* =========================================================
CTA SECTION
========================================================= */
.site-footer .footer-cta-wrap {
position:
relative !important;
padding:
0 0 48px !important;
}
/* =========================================================
CTA BOX
========================================================= */
.site-footer .footer-cta {
position:
relative !important;
display:
flex !important;
align-items:
center !important;
justify-content:
space-between !important;
gap:
30px !important;
min-height:
185px !important;
padding:
40px 48px !important;
overflow:
hidden !important;
border:
1px solid rgba(255,255,255,.10) !important;
border-radius:
22px !important;
background:
linear-gradient(
120deg,
#17284a 0%,
#1d4ed8 52%,
#2563eb 100%
) !important;
box-shadow:
0 25px 60px
rgba(0,0,0,.22) !important;
}
/* =========================================================
CTA GLOW
========================================================= */
.site-footer .footer-cta::before {
content: "" !important;
position:
absolute !important;
width:
270px !important;
height:
270px !important;
right:
80px !important;
top:
-190px !important;
border-radius:
50% !important;
background:
rgba(255,255,255,.12) !important;
pointer-events:
none !important;
}
.site-footer .footer-cta::after {
content: "" !important;
position:
absolute !important;
width:
180px !important;
height:
180px !important;
right:
-70px !important;
bottom:
-100px !important;
border-radius:
50% !important;
background:
rgba(255,255,255,.09) !important;
pointer-events:
none !important;
}
/* =========================================================
CTA CONTENT
========================================================= */
.site-footer .footer-cta-content {
position:
relative !important;
z-index:
2 !important;
}
.site-footer .footer-cta-label {
display:
block !important;
margin:
0 0 7px !important;
color:
#bfdbfe !important;
font-size:
11px !important;
font-weight:
600 !important;
text-transform:
uppercase !important;
letter-spacing:
1.4px !important;
}
.site-footer .footer-cta h2 {
margin:
0 !important;
padding:
0 !important;
color:
#ffffff !important;
background:
transparent !important;
font-size:
clamp(25px, 3vw, 38px) !important;
font-weight:
700 !important;
line-height:
1.25 !important;
letter-spacing:
-.7px !important;
}
.site-footer .footer-cta h2 span {
color:
#bfdbfe !important;
}
/* =========================================================
CTA BUTTON
========================================================= */
.site-footer .footer-cta-button {
position:
relative !important;
z-index:
2 !important;
min-width:
150px !important;
height:
52px !important;
flex-shrink:
0 !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
9px !important;
padding:
0 23px !important;
color:
#1d4ed8 !important;
background:
#ffffff !important;
border:
0 !important;
border-radius:
11px !important;
font-size:
13px !important;
font-weight:
700 !important;
box-shadow:
0 10px 28px
rgba(0,0,0,.18) !important;
transition:
transform .3s ease,
box-shadow .3s ease,
background .3s ease !important;
}
.site-footer .footer-cta-button:hover {
color:
#1d4ed8 !important;
background:
#eff6ff !important;
transform:
translateY(-4px) !important;
box-shadow:
0 17px 35px
rgba(0,0,0,.25) !important;
}
.site-footer .footer-cta-button span {
font-size:
17px !important;
transition:
transform .25s ease !important;
}
.site-footer .footer-cta-button:hover span {
transform:
translateX(4px) !important;
}
/* =========================================================
FOOTER BOTTOM
========================================================= */
.site-footer .footer-bottom {
border-top:
1px solid
var(--footer-border) !important;
background:
rgba(0,0,0,.12) !important;
}
.site-footer .footer-bottom .footer-container {
min-height:
70px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
space-between !important;
gap:
25px !important;
}
/* =========================================================
COPYRIGHT
========================================================= */
.site-footer .footer-copyright {
margin:
0 !important;
padding:
0 !important;
color:
#64748b !important;
font-size:
11px !important;
font-weight:
400 !important;
line-height:
1.5 !important;
}
/* =========================================================
BOTTOM LINKS
========================================================= */
.site-footer .footer-bottom-links {
display:
flex !important;
align-items:
center !important;
gap:
25px !important;
}
.site-footer .footer-bottom-links a {
color:
#64748b !important;
font-size:
11px !important;
font-weight:
400 !important;
transition:
color .2s ease !important;
}
.site-footer .footer-bottom-links a:hover {
color:
#ffffff !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
.site-footer .footer-container {
width:
calc(100% - 45px) !important;
}
.site-footer .footer-main
.footer-container {
grid-template-columns:
1.6fr 1fr 1fr !important;
gap:
45px !important;
}
.site-footer .footer-brand {
grid-column:
1 / -1 !important;
max-width:
600px !important;
}
}
/* =========================================================
TABLET / SMALL LAPTOP
========================================================= */
@media (max-width: 768px) {
.site-footer .footer-container {
width:
calc(100% - 32px) !important;
}
.site-footer .footer-main {
padding:
60px 0 45px !important;
}
.site-footer .footer-main
.footer-container {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap:
42px 30px !important;
}
.site-footer .footer-brand {
grid-column:
1 / -1 !important;
max-width:
100% !important;
}
.site-footer .footer-logo {
font-size:
29px !important;
}
.site-footer .footer-description {
max-width:
600px !important;
font-size:
12px !important;
line-height:
1.8 !important;
}
.site-footer .footer-cta-wrap {
padding:
0 0 38px !important;
}
.site-footer .footer-cta {
min-height:
auto !important;
padding:
34px 30px !important;
border-radius:
18px !important;
}
.site-footer .footer-cta h2 {
font-size:
26px !important;
}
.site-footer .footer-cta-button {
min-width:
135px !important;
}
.site-footer .footer-bottom .footer-container {
min-height:
80px !important;
flex-direction:
column !important;
justify-content:
center !important;
padding:
17px 0 !important;
gap:
10px !important;
text-align:
center !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 560px) {
.site-footer .footer-container {
width:
calc(100% - 28px) !important;
}
/* =====================================================
MAIN GRID
===================================================== */
.site-footer .footer-main
.footer-container {
grid-template-columns:
1fr 1fr !important;
gap:
36px 25px !important;
}
.site-footer .footer-brand {
grid-column:
1 / -1 !important;
}
/* =====================================================
BRAND
===================================================== */
.site-footer .footer-logo {
font-size:
27px !important;
letter-spacing:
-1.4px !important;
}
.site-footer .footer-description {
font-size:
12px !important;
line-height:
1.75 !important;
}
.site-footer .footer-socials {
margin-top:
22px !important;
}
.site-footer .footer-social {
width:
36px !important;
height:
36px !important;
}
/* =====================================================
COLUMNS
===================================================== */
.site-footer .footer-column h3 {
margin-bottom:
17px !important;
font-size:
12px !important;
}
.site-footer .footer-column li a {
padding:
4px 0 !important;
font-size:
11px !important;
}
/* =====================================================
CTA
===================================================== */
.site-footer .footer-cta {
flex-direction:
column !important;
align-items:
flex-start !important;
gap:
25px !important;
padding:
30px 24px !important;
}
.site-footer .footer-cta h2 {
font-size:
25px !important;
line-height:
1.3 !important;
}
.site-footer .footer-cta-button {
width:
100% !important;
height:
50px !important;
}
/* =====================================================
BOTTOM
===================================================== */
.site-footer .footer-bottom-links {
gap:
15px !important;
flex-wrap:
wrap !important;
justify-content:
center !important;
}
}
/* =========================================================
VERY SMALL PHONES
========================================================= */
@media (max-width: 380px) {
.site-footer .footer-container {
width:
calc(100% - 24px) !important;
}
.site-footer .footer-main
.footer-container {
gap:
30px 18px !important;
}
.site-footer .footer-column h3 {
font-size:
11px !important;
}
.site-footer .footer-column li a {
font-size:
10.5px !important;
}
.site-footer .footer-cta {
padding:
27px 20px !important;
}
.site-footer .footer-cta h2 {
font-size:
22px !important;
}
}
/* =========================================================
TRUE EDGE-TO-EDGE FOOTER
Removes WordPress / Theme side whitespace
========================================================= */
/* Prevent body horizontal restrictions */
html,
body {
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
/* =========================================================
FOOTER PARENT BREAKOUT
========================================================= */
body .site-footer {
position: relative !important;
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0 !important;
padding-right: 0 !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
}
/* =========================================================
FOOTER SECTIONS
========================================================= */
body .site-footer .footer-main,
body .site-footer .footer-cta-wrap,
body .site-footer .footer-bottom {
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* =========================================================
FOOTER CONTENT
========================================================= */
body .site-footer .footer-container {
width: calc(100vw - 80px) !important;
max-width: 1500px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* =========================================================
OVERRIDE COMMON WORDPRESS CONTAINERS
========================================================= */
body .site-footer {
box-sizing: border-box !important;
}
body .site-footer .footer-main,
body .site-footer .footer-cta-wrap,
body .site-footer .footer-bottom,
body .site-footer .footer-container {
box-sizing: border-box !important;
}
/* =========================================================
ELEMENTOR
========================================================= */
body .site-footer .elementor-container,
body .site-footer .e-con-inner {
max-width: none !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 768px) {
body .site-footer {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
body .site-footer .footer-container {
width: calc(100vw - 32px) !important;
max-width: none !important;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
body .site-footer .footer-container {
width: calc(100vw - 26px) !important;
}
}/* End custom CSS */