* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: "Google Sans", "DM Sans", Arial, sans-serif;
background: #ffffff;
}
/* =========================================================
DEMO WHITE AREA
REMOVE THIS FROM YOUR EXISTING WEBSITE
========================================================= */
.demo-space {
height: 150px;
background: #fff;
}
/* =========================================================
FOOTER
========================================================= */
.ngo-footer {
position: relative;
overflow: hidden;
color: #ffffff;
padding: 42px 0 22px;
min-height: 405px;
background:
radial-gradient(
circle at 73% 25%,
rgba(151, 225, 178, .25) 0%,
rgba(68, 169, 146, .15) 25%,
transparent 48%
),
linear-gradient(
105deg,
#003d3e 0%,
#004b48 20%,
#00685f 42%,
#168071 63%,
#12675f 80%,
#034340 100%
);
}
/* container */
.ngo-footer .container-fluid {
position: relative;
z-index: 5;
padding-left: 65px;
padding-right: 65px;
}
/* =========================================================
BACKGROUND CURVE
========================================================= */
.footer-curve {
position: absolute;
left: -8%;
top: 30px;
width: 70%;
height: 280px;
border-radius:
45% 55% 60% 40% /
30% 35% 65% 70%;
border-top:
19px solid rgba(29, 172, 147, .11);
transform: rotate(7deg);
pointer-events: none;
}
.footer-curve-2 {
position: absolute;
left: 1%;
top: 55px;
width: 60%;
height: 220px;
border-radius: 50%;
border-top:
5px solid rgba(71, 201, 176, .07);
transform: rotate(6deg);
pointer-events: none;
}
/* =========================================================
BACKGROUND LEAF
========================================================= */
.bg-leaf {
position: absolute;
left: 60px;
top: 28px;
width: 120px;
height: 62px;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
rgba(18, 159, 134, .22),
rgba(22, 180, 150, .05)
);
transform: rotate(-27deg);
}
/* =========================================================
GLOW
========================================================= */
.footer-glow {
position: absolute;
width: 400px;
height: 400px;
right: 23%;
top: -150px;
border-radius: 50%;
background:
rgba(157, 231, 180, .15);
filter: blur(90px);
animation:
glowAnimation 5s ease-in-out infinite;
}
.footer-glow-2 {
position: absolute;
width: 280px;
height: 280px;
right: 3%;
top: 50px;
border-radius: 50%;
background:
rgba(79, 185, 153, .13);
filter: blur(75px);
}
@keyframes glowAnimation {
0%,
100% {
opacity: .55;
}
50% {
opacity: .9;
}
}
/* =========================================================
PLANT GRAPHIC
========================================================= */
.plant-graphic {
position: absolute;
right: 12%;
top: 5px;
width: 500px;
height: 230px;
opacity: .45;
pointer-events: none;
}
/* ground */
.plant-ground {
position: absolute;
left: 130px;
bottom: 3px;
width: 260px;
height: 75px;
border-radius: 50%;
background:
radial-gradient(
ellipse at center,
rgba(10, 44, 35, .95),
rgba(11, 61, 48, .10) 70%
);
filter: blur(2px);
}
/* stem */
.plant-stem {
position: absolute;
left: 51%;
bottom: 25px;
width: 4px;
height: 115px;
border-radius: 10px;
background:
linear-gradient(
#8cdb63,
#318b5c
);
}
/* leaves */
.plant-leaf {
position: absolute;
width: 63px;
height: 30px;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#90dc61,
#319a60
);
box-shadow:
inset 0 0 8px
rgba(255,255,255,.15);
}
.plant-leaf.one {
left: 205px;
top: 32px;
transform: rotate(43deg);
}
.plant-leaf.two {
left: 254px;
top: 24px;
transform:
scaleX(-1)
rotate(35deg);
}
.plant-leaf.three {
left: 194px;
top: 75px;
transform:
rotate(24deg);
}
.plant-leaf.four {
left: 264px;
top: 68px;
transform:
scaleX(-1)
rotate(24deg);
}
.plant-leaf.five {
left: 228px;
top: 2px;
width: 47px;
height: 24px;
transform:
rotate(62deg);
}
/* =========================================================
MAIN FOOTER ROW
========================================================= */
.footer-main {
min-height: 245px;
display: flex;
align-items: center;
}
/* =========================================================
BRAND
========================================================= */
.footer-brand {
display: flex;
align-items: center;
justify-content: flex-start;
padding-right: 30px;
border-right:
1px solid rgba(255,255,255,.48);
}
/* =========================================================
LOGO
========================================================= */
.footer-logo-wrap {
width: 175px;
min-width: 175px;
margin-right: 18px;
}
.footer-logo-circle {
position: relative;
width: 155px;
height: 155px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: #f6f7f3;
overflow: hidden;
box-shadow:
0 15px 35px
rgba(0,0,0,.13),
inset 0 0 0 2px
rgba(255,255,255,.8);
}
/* =========================================================
SAMPLE LOGO
========================================================= */
.sample-logo {
position: relative;
width: 125px;
height: 125px;
}
.logo-hand {
position: absolute;
width: 105px;
height: 37px;
left: 9px;
bottom: 18px;
border:
8px solid #073f3c;
border-top-color: transparent;
border-left-color: transparent;
border-radius:
0 0 60px 60px;
transform: rotate(-8deg);
}
.logo-person {
position: absolute;
width: 14px;
height: 47px;
left: 60px;
top: 39px;
border-radius: 20px;
background: #07504a;
}
.logo-person::before {
content: "";
position: absolute;
left: -2px;
top: -20px;
width: 19px;
height: 19px;
border-radius: 50%;
background: #a7dc34;
}
.logo-person::after {
content: "";
position: absolute;
width: 54px;
height: 9px;
top: 9px;
left: -21px;
border-radius: 20px;
background: #77ca35;
transform: rotate(-37deg);
}
.logo-green-leaf {
position: absolute;
right: 3px;
top: 39px;
width: 48px;
height: 25px;
border-radius:
100% 0 100% 0;
background: #1eb889;
transform: rotate(-39deg);
}
.logo-orange {
position: absolute;
left: 18px;
top: 67px;
width: 26px;
height: 20px;
border-radius:
80% 20% 80% 20%;
background: #ff941b;
}
/* =========================================================
BRAND / SLOGAN
========================================================= */
.brand-text {
line-height: 1.03;
text-align: left;
}
.brand-line {
display: block;
font-size: 31px;
font-weight: 400;
letter-spacing: -.5px;
}
.brand-green {
color: #b7dd3a;
}
.brand-tagline {
display: block;
margin-top: 13px;
font-size: 11px;
font-weight: 500;
letter-spacing: 3.5px;
color:
rgba(255,255,255,.75);
white-space: nowrap;
}
/* =========================================================
NAVIGATION
========================================================= */
.footer-nav {
padding:
0 35px;
}
.footer-nav ul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
}
.footer-nav li {
display: flex;
align-items: center;
}
.footer-nav li:not(:last-child)::after {
content: "";
width: 1px;
height: 22px;
margin:
0 18px;
background:
rgba(255,255,255,.42);
}
.footer-nav a {
color:
rgba(255,255,255,.94);
font-size: 18px;
font-weight: 400;
text-decoration: none;
white-space: nowrap;
transition:
.3s ease;
}
.footer-nav a:hover {
color: #c2eb51;
transform:
translateY(-2px);
}
/* =========================================================
SOCIAL
========================================================= */
.social-area {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 17px;
}
.social-icon {
width: 57px;
height: 57px;
flex: 0 0 57px;
display: inline-flex;
align-items: center;
justify-content: center;
border:
1.5px solid
rgba(255,255,255,.72);
border-radius: 50%;
color: #fff;
font-size: 22px;
text-decoration: none;
background:
rgba(0,50,49,.12);
transition:
.3s ease;
}
.social-icon:hover {
color: #c5ef55;
border-color: #c5ef55;
background:
rgba(0,46,45,.50);
transform:
translateY(-4px);
}
/* handwritten text */
.small-actions {
position: absolute;
right: 18px;
top: -115px;
color:
rgba(255,255,255,.25);
font-family:
"Segoe Script",
"Brush Script MT",
cursive;
font-size: 25px;
line-height: .98;
text-align: center;
transform:
rotate(-8deg);
}
/* =========================================================
DIVIDER
========================================================= */
.footer-divider {
width: 100%;
height: 1px;
background:
rgba(255,255,255,.55);
}
/* =========================================================
FOOTER BOTTOM
========================================================= */
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-top: 22px;
}
.copyright {
margin: 0;
font-size: 18px;
letter-spacing: .4px;
color:
rgba(255,255,255,.75);
}
.bottom-slogan {
display: flex;
align-items: center;
gap: 14px;
color:
rgba(255,255,255,.72);
font-size: 16px;
letter-spacing: 4px;
white-space: nowrap;
}
.bottom-leaf {
width: 22px;
height: 13px;
flex: 0 0 22px;
border-radius:
100% 0 100% 0;
background: #b7df3c;
transform:
rotate(-25deg);
animation:
leafMove
3s ease-in-out infinite;
}
@keyframes leafMove {
0%,
100% {
transform:
translateY(0)
rotate(-25deg);
}
50% {
transform:
translateY(-5px)
rotate(-18deg);
}
}
/* =========================================================
LARGE LAPTOP
========================================================= */
@media (max-width: 1399.98px) {
.ngo-footer .container-fluid {
padding-left: 40px;
padding-right: 40px;
}
.footer-logo-wrap {
width: 135px;
min-width: 135px;
}
.footer-logo-circle {
width: 125px;
height: 125px;
}
.sample-logo {
transform:
scale(.80);
}
.brand-line {
font-size: 25px;
}
.footer-nav {
padding:
0 20px;
}
.footer-nav li:not(:last-child)::after {
margin:
0 11px;
}
.footer-nav a {
font-size: 16px;
}
.social-area {
gap: 11px;
}
.social-icon {
width: 49px;
height: 49px;
flex-basis: 49px;
font-size: 19px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1199.98px) {
.ngo-footer {
min-height: auto;
padding-top: 48px;
}
.footer-main {
min-height: auto;
}
.footer-brand {
border-right: 0;
border-bottom:
1px solid
rgba(255,255,255,.22);
padding:
0 0 28px;
margin-bottom: 26px;
}
.footer-nav {
padding: 0;
margin-bottom: 27px;
}
.footer-nav ul {
flex-wrap: wrap;
justify-content: flex-start;
row-gap: 15px;
}
.social-area {
justify-content: flex-start;
margin-bottom: 28px;
}
.small-actions {
display: none;
}
.plant-graphic {
right: -8%;
opacity: .18;
}
}
/* =========================================================
MOBILE
IMPORTANT:
LOGO LEFT + SLOGAN RIGHT
EVERYTHING LEFT ALIGNED
========================================================= */
@media (max-width: 767.98px) {
.ngo-footer {
min-height: auto;
padding:
32px 0 22px;
background:
radial-gradient(
circle at 90% 8%,
rgba(112,207,163,.16),
transparent 35%
),
linear-gradient(
145deg,
#003c3d 0%,
#006159 53%,
#034b48 100%
);
}
.ngo-footer .container-fluid {
padding-left: 20px;
padding-right: 20px;
}
/* ---------------------------------------------
BRAND ROW
LEFT LOGO / RIGHT TEXT
--------------------------------------------- */
.footer-brand {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
text-align: left;
border-right: 0;
border-bottom:
1px solid
rgba(255,255,255,.18);
padding:
0 0 23px;
margin:
0 0 22px;
}
/* logo left */
.footer-logo-wrap {
width: 92px;
min-width: 92px;
margin:
0 15px 0 0;
}
.footer-logo-circle {
width: 88px;
height: 88px;
min-width: 88px;
}
.sample-logo {
transform:
scale(.56);
}
/* slogan right */
.brand-text {
flex: 1;
min-width: 0;
text-align: left;
line-height: 1.02;
}
.brand-line {
font-size: 22px;
line-height: 1.04;
text-align: left;
}
.brand-tagline {
margin-top: 9px;
font-size: 7.5px;
letter-spacing: 1.7px;
text-align: left;
white-space: normal;
}
/* ---------------------------------------------
MENU - ALL LEFT
--------------------------------------------- */
.footer-nav {
width: 100%;
padding: 0;
margin:
0 0 23px;
}
.footer-nav ul {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
gap: 0;
text-align: left;
}
.footer-nav li {
width: 33.333%;
display: block;
text-align: left;
margin-bottom: 12px;
}
.footer-nav li:not(:last-child)::after {
display: none;
}
.footer-nav a {
display: inline-block;
padding: 0;
font-size: 14px;
text-align: left;
}
/* ---------------------------------------------
SOCIAL ICONS LEFT
--------------------------------------------- */
.social-area {
width: 100%;
justify-content: flex-start;
gap: 10px;
margin:
0 0 25px;
}
.social-icon {
width: 43px;
height: 43px;
flex-basis: 43px;
font-size: 16px;
}
.small-actions {
display: none;
}
/* background */
.plant-graphic {
right: -150px;
top: 0;
opacity: .10;
}
.footer-curve {
opacity: .50;
}
.footer-curve-2 {
opacity: .40;
}
.bg-leaf {
left: 15px;
opacity: .30;
}
/* ---------------------------------------------
BOTTOM LEFT ALIGN
--------------------------------------------- */
.footer-divider {
margin-top: 0;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
text-align: left;
gap: 11px;
padding-top: 17px;
}
.copyright {
width: 100%;
font-size: 13px;
text-align: left;
}
.bottom-slogan {
width: 100%;
justify-content: flex-start;
font-size: 11px;
letter-spacing: 1.8px;
white-space: normal;
text-align: left;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.ngo-footer .container-fluid {
padding-left: 16px;
padding-right: 16px;
}
/*
IMPORTANT
Do NOT change to column.
Logo always stays LEFT.
Text always stays RIGHT.
*/
.footer-brand {
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.footer-logo-wrap {
width: 78px;
min-width: 78px;
margin-right: 12px;
}
.footer-logo-circle {
width: 74px;
height: 74px;
min-width: 74px;
}
.sample-logo {
transform:
scale(.47);
}
.brand-line {
font-size: 19px;
}
.brand-tagline {
margin-top: 7px;
font-size: 6.5px;
letter-spacing: 1.2px;
}
.footer-nav li {
width: 50%;
margin-bottom: 13px;
}
.footer-nav a {
font-size: 14px;
}
.social-icon {
width: 41px;
height: 41px;
flex-basis: 41px;
font-size: 15px;
}
.bottom-slogan {
font-size: 10px;
letter-spacing: 1.3px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 340px) {
.footer-logo-wrap {
width: 68px;
min-width: 68px;
}
.footer-logo-circle {
width: 64px;
height: 64px;
min-width: 64px;
}
.sample-logo {
transform:
scale(.40);
}
.brand-line {
font-size: 17px;
}
.brand-tagline {
font-size: 6px;
letter-spacing: .8px;
}
.social-area {
gap: 7px;
}
.social-icon {
width: 38px;
height: 38px;
flex-basis: 38px;
}
}