/* Start custom CSS for html, class: .elementor-element-580690e *//* =====================================================
MADHUR WAVES MARKETING
ANIMATED FOOTER
===================================================== */
/* =====================================================
RESET
===================================================== */
.mw-footer,
.mw-footer * {
box-sizing: border-box;
}
/* =====================================================
MAIN FOOTER
===================================================== */
.mw-footer {
position: relative;
width: 100%;
min-height: 500px;
overflow: hidden;
background:
#020914;
color: #ffffff;
padding:
70px 30px 25px;
}
/* =====================================================
BACKGROUND
===================================================== */
.footer-background {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background:
radial-gradient(
circle at 20% 30%,
rgba(0, 90, 200, 0.15),
transparent 35%
),
radial-gradient(
circle at 80% 70%,
rgba(0, 130, 255, 0.12),
transparent 35%
),
#020914;
}
/* =====================================================
GALAXY
===================================================== */
.galaxy {
position: absolute;
border-radius: 50%;
filter: blur(70px);
pointer-events: none;
}
.galaxy-1 {
width: 600px;
height: 250px;
top: -80px;
left: -150px;
background:
rgba(0, 105, 255, 0.18);
transform:
rotate(-25deg);
animation:
galaxyMove1
14s
ease-in-out
infinite
alternate;
}
.galaxy-2 {
width: 550px;
height: 230px;
right: -150px;
bottom: -70px;
background:
rgba(0, 90, 255, 0.18);
transform:
rotate(25deg);
animation:
galaxyMove2
18s
ease-in-out
infinite
alternate;
}
.galaxy-3 {
width: 400px;
height: 180px;
left: 45%;
top: 35%;
background:
rgba(0, 120, 255, 0.10);
animation:
galaxyMove3
12s
ease-in-out
infinite
alternate;
}
@keyframes galaxyMove1 {
0% {
transform:
translate(0, 0)
rotate(-25deg)
scale(1);
}
100% {
transform:
translate(180px, 70px)
rotate(-5deg)
scale(1.3);
}
}
@keyframes galaxyMove2 {
0% {
transform:
translate(0, 0)
rotate(25deg)
scale(1);
}
100% {
transform:
translate(-150px, -70px)
rotate(5deg)
scale(1.25);
}
}
@keyframes galaxyMove3 {
0% {
transform:
translate(0, 0)
scale(1);
}
100% {
transform:
translate(100px, -40px)
scale(1.25);
}
}
/* =====================================================
STARS
===================================================== */
.stars {
position: absolute;
inset: 0;
}
.stars span {
position: absolute;
width: 2px;
height: 2px;
border-radius: 50%;
background:
#ffffff;
box-shadow:
0 0 7px
rgba(255,255,255,0.9);
animation:
starBlink
ease-in-out
infinite;
}
@keyframes starBlink {
0% {
opacity: 0.15;
transform:
scale(0.5);
}
50% {
opacity: 1;
transform:
scale(1.5);
}
100% {
opacity: 0.15;
transform:
scale(0.5);
}
}
/* =====================================================
SHOOTING STARS
===================================================== */
.shooting-star {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background:
#ffffff;
box-shadow:
0 0 8px #ffffff,
0 0 20px #1688ff,
0 0 35px #1688ff;
opacity: 0;
}
.shooting-star::after {
content: "";
position: absolute;
width: 160px;
height: 2px;
right: 0;
top: 2px;
transform:
rotate(-35deg);
transform-origin:
right center;
background:
linear-gradient(
90deg,
transparent,
rgba(22,136,255,0.15),
#ffffff
);
}
.shooting-star-1 {
left: 85%;
top: 10%;
animation:
shooting1
8s
linear
infinite;
}
.shooting-star-2 {
left: 70%;
top: 40%;
animation:
shooting2
11s
linear
infinite;
animation-delay:
3s;
}
.shooting-star-3 {
left: 95%;
top: 65%;
animation:
shooting3
13s
linear
infinite;
animation-delay:
6s;
}
@keyframes shooting1 {
0% {
opacity: 0;
transform:
translate(0,0);
}
5% {
opacity: 1;
}
20% {
opacity: 1;
transform:
translate(-600px,350px);
}
23% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes shooting2 {
0% {
opacity: 0;
transform:
translate(0,0);
}
5% {
opacity: 1;
}
18% {
opacity: 1;
transform:
translate(-500px,320px);
}
21% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes shooting3 {
0% {
opacity: 0;
transform:
translate(0,0);
}
5% {
opacity: 1;
}
20% {
opacity: 1;
transform:
translate(-650px,400px);
}
23% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* =====================================================
MOVING GLOW
===================================================== */
.moving-glow {
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
filter:
blur(80px);
background:
rgba(0,120,255,0.08);
}
.glow-1 {
left: 25%;
top: 20%;
animation:
glowMove1
10s
ease-in-out
infinite
alternate;
}
.glow-2 {
right: 20%;
bottom: 10%;
animation:
glowMove2
12s
ease-in-out
infinite
alternate;
}
@keyframes glowMove1 {
from {
transform:
translate(0,0);
}
to {
transform:
translate(150px,100px);
}
}
@keyframes glowMove2 {
from {
transform:
translate(0,0);
}
to {
transform:
translate(-150px,-80px);
}
}
/* =====================================================
CONTENT
===================================================== */
.mw-footer-content {
position: relative;
z-index: 20;
max-width:
1250px;
margin:
auto;
}
/* =====================================================
TOP LINE
===================================================== */
.footer-line {
position: relative;
width: 100%;
height: 1px;
margin-bottom:
45px;
background:
rgba(255,255,255,0.12);
overflow:
hidden;
}
.footer-line span {
position: absolute;
left: -20%;
top: 0;
width: 20%;
height: 2px;
background:
#1688ff;
box-shadow:
0 0 15px #1688ff;
animation:
lineMove
4s
linear
infinite;
}
@keyframes lineMove {
from {
left: -20%;
}
to {
left: 120%;
}
}
/* =====================================================
FOOTER GRID
===================================================== */
.footer-grid {
display:
grid;
grid-template-columns:
2.2fr
1fr
0.9fr
1.35fr;
gap:
55px;
}
/* =====================================================
ALL TEXT
===================================================== */
.mw-footer p,
.mw-footer h3,
.mw-footer a,
.mw-footer li,
.mw-footer span {
color:
#ffffff;
}
/* =====================================================
BRAND
===================================================== */
.footer-brand {
min-width:
0;
}
.footer-logo {
margin-bottom:
20px;
}
.footer-logo img {
width:
95px;
max-height:
65px;
object-fit:
contain;
display:
block;
filter:
drop-shadow(
0 0 10px
rgba(0,130,255,0.35)
);
transition:
transform 0.4s ease;
}
.footer-logo img:hover {
transform:
scale(1.08)
translateY(-3px);
}
/* =====================================================
DESCRIPTION
===================================================== */
.footer-description {
max-width:
520px;
margin:
0 0 25px;
color:
#ffffff !important;
opacity:
0.85;
font-size:
13px;
line-height:
1.7;
}
/* =====================================================
SOCIAL
===================================================== */
.footer-social {
display:
flex;
gap:
12px;
margin-bottom:
28px;
}
.footer-social a {
display:
flex;
align-items:
center;
justify-content:
center;
width:
38px;
height:
38px;
border:
1px solid
rgba(22,136,255,0.45);
border-radius:
50%;
background:
rgba(0,30,60,0.5);
color:
#ffffff !important;
text-decoration:
none;
font-size:
17px;
font-weight:
700;
transition:
all 0.35s ease;
}
.footer-social a:hover {
background:
#1688ff;
border-color:
#1688ff;
transform:
translateY(-6px)
rotate(8deg);
box-shadow:
0 8px 25px
rgba(22,136,255,0.4);
}
/* =====================================================
NEWSLETTER
===================================================== */
.newsletter {
width:
100%;
max-width:
530px;
}
.newsletter-box {
display:
flex;
width:
100%;
min-height:
42px;
border:
1px solid
rgba(255,255,255,0.20);
border-radius:
6px;
background:
#061321;
overflow:
hidden;
}
.newsletter-box input {
flex:
1;
min-width:
0;
border:
none;
outline:
none;
background:
transparent;
color:
#ffffff !important;
padding:
12px 14px;
font-size:
12px;
}
.newsletter-box input::placeholder {
color:
#ffffff;
opacity:
0.5;
}
.newsletter-box input:focus {
background:
rgba(22,136,255,0.05);
}
.newsletter-box button {
border:
none;
outline:
none;
padding:
0 25px;
background:
#1688ff;
color:
#ffffff !important;
cursor:
pointer;
font-size:
12px;
font-weight:
700;
transition:
all 0.3s ease;
}
.newsletter-box button:hover {
background:
#006fe6;
box-shadow:
0 0 25px
rgba(22,136,255,0.4);
}
.button-click {
transform:
scale(0.94);
}
.subscribe-message {
margin:
7px 0 0;
min-height:
15px;
color:
#4da3ff !important;
font-size:
11px;
opacity:
0;
transform:
translateY(-5px);
transition:
all 0.3s ease;
}
.subscribe-message.show {
opacity:
1;
transform:
translateY(0);
}
/* =====================================================
COLUMNS
===================================================== */
.footer-column h3 {
position:
relative;
display:
inline-block;
margin:
0 0 25px;
color:
#ffffff !important;
font-size:
15px;
font-weight:
700;
}
.heading-line {
width:
35px;
height:
2px;
background:
#1688ff;
box-shadow:
0 0 10px
rgba(22,136,255,0.6);
margin-top:
-18px;
margin-bottom:
25px;
transition:
width 0.4s ease;
}
.footer-column:hover
.heading-line {
width:
70px;
}
/* =====================================================
LINKS
===================================================== */
.footer-column ul {
padding:
0;
margin:
0;
list-style:
none;
}
.footer-column li {
margin-bottom:
15px;
}
.footer-column li a {
display:
flex;
justify-content:
space-between;
align-items:
center;
gap:
10px;
color:
#ffffff !important;
opacity:
0.75;
text-decoration:
none;
font-size:
12px;
transition:
all 0.3s ease;
}
.footer-column li a span {
color:
#1688ff !important;
opacity:
0;
transform:
translateX(-8px);
transition:
all 0.3s ease;
}
.footer-column li a:hover {
opacity:
1;
transform:
translateX(5px);
}
.footer-column li a:hover span {
opacity:
1;
transform:
translateX(0);
}
/* =====================================================
CONTACT
===================================================== */
.contact-row {
display:
flex;
align-items:
flex-start;
gap:
10px;
margin-bottom:
16px;
}
.contact-icon {
width:
22px;
min-width:
22px;
color:
#1688ff !important;
font-size:
13px;
text-align:
center;
}
.contact-row a,
.contact-text {
color:
#ffffff !important;
opacity:
0.78;
font-size:
12px;
line-height:
1.5;
text-decoration:
none;
word-break:
break-word;
transition:
all 0.3s ease;
}
.contact-row a:hover {
color:
#1688ff !important;
opacity:
1;
}
/* =====================================================
REVEAL ANIMATION
===================================================== */
.footer-item {
opacity:
0;
transform:
translateY(35px);
transition:
opacity 0.8s ease,
transform 0.8s ease;
}
.footer-item.visible {
opacity:
1;
transform:
translateY(0);
}
.footer-column:nth-child(2) {
transition-delay:
0.15s;
}
.footer-column:nth-child(3) {
transition-delay:
0.3s;
}
.footer-column:nth-child(4) {
transition-delay:
0.45s;
}
/* =====================================================
BOTTOM
===================================================== */
.footer-bottom {
margin-top:
50px;
}
.bottom-line {
width:
100%;
height:
1px;
background:
rgba(255,255,255,0.12);
}
.bottom-content {
display:
flex;
justify-content:
space-between;
align-items:
center;
gap:
20px;
padding:
20px 0 0;
}
.bottom-content p {
margin:
0;
color:
#ffffff !important;
opacity:
0.55;
font-size:
10px;
}
.bottom-links {
display:
flex;
align-items:
center;
gap:
10px;
}
.bottom-links a {
color:
#ffffff !important;
opacity:
0.55;
text-decoration:
none;
font-size:
10px;
transition:
all 0.3s ease;
}
.bottom-links a:hover {
color:
#1688ff !important;
opacity:
1;
}
.bottom-links span {
color:
#1688ff !important;
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 1050px) {
.footer-grid {
grid-template-columns:
1.5fr 1fr 1fr;
gap:
40px;
}
.footer-brand {
grid-column:
1 / -1;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 700px) {
.mw-footer {
padding:
55px 20px 20px;
}
.footer-grid {
grid-template-columns:
1fr;
gap:
35px;
}
.footer-brand {
grid-column:
auto;
}
.footer-description {
font-size:
12px;
}
.newsletter-box {
min-height:
44px;
}
.newsletter-box button {
padding:
0 15px;
}
.bottom-content {
flex-direction:
column;
align-items:
flex-start;
}
.bottom-links {
flex-wrap:
wrap;
}
.shooting-star::after {
width:
90px;
}
}
/* =====================================================
SMALL MOBILE
===================================================== */
@media (max-width: 420px) {
.mw-footer {
padding:
45px 15px 18px;
}
.newsletter-box input {
font-size:
11px;
}
.newsletter-box button {
padding:
0 12px;
font-size:
10px;
}
.footer-social a {
width:
34px;
height:
34px;
}
}
/* =====================================================
REDUCED MOTION
===================================================== */
@media (prefers-reduced-motion: reduce) {
.galaxy,
.stars span,
.shooting-star,
.moving-glow,
.footer-line span {
animation:
none !important;
}
}/* End custom CSS */