/* Start custom CSS for html, class: .elementor-element-e2be050 *//* =========================================================
CADGURU CREATIVE FOOTER CSS
Prefix: cgf-
========================================================= */
.cgf-footer {
--cgf-blue: #0877c9;
--cgf-cyan: #42cfff;
--cgf-dark: #04121e;
--cgf-dark-2: #071d2d;
--cgf-text: rgba(255,255,255,.72);
--cgf-muted: rgba(255,255,255,.42);
position: relative;
color: #fff;
background:
radial-gradient(
circle at 15% 20%,
rgba(0,150,220,.12),
transparent 28%
),
radial-gradient(
circle at 90% 70%,
rgba(0,180,240,.08),
transparent 25%
),
linear-gradient(
135deg,
#03101a,
#061925 50%,
#04131f
);
overflow: hidden;
font-family:
Inter,
Arial,
Helvetica,
sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.cgf-container {
width: min(
1240px,
calc(100% - 50px)
);
margin: 0 auto;
position: relative;
z-index: 2;
}
/* =========================================================
GRID BACKGROUND
========================================================= */
.cgf-grid-bg {
position: absolute;
inset: 0;
opacity: .15;
background-image:
linear-gradient(
rgba(87,211,255,.15) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(87,211,255,.15) 1px,
transparent 1px
);
background-size: 65px 65px;
mask-image:
linear-gradient(
to bottom,
black,
transparent 85%
);
pointer-events: none;
}
/* =========================================================
GLOW
========================================================= */
.cgf-glow {
position: absolute;
border-radius: 50%;
filter: blur(70px);
pointer-events: none;
}
.cgf-glow-left {
width: 300px;
height: 300px;
left: -160px;
top: 25%;
background:
rgba(0,132,210,.12);
animation:
cgfGlowMove 8s ease-in-out infinite;
}
.cgf-glow-right {
width: 280px;
height: 280px;
right: -130px;
bottom: 10%;
background:
rgba(0,191,255,.1);
animation:
cgfGlowMove 10s ease-in-out infinite reverse;
}
/* =========================================================
TOP CTA
========================================================= */
.cgf-footer-cta {
min-height: 300px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
padding: 75px 0;
border-bottom:
1px solid
rgba(255,255,255,.1);
}
.cgf-mini-label {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
color: var(--cgf-cyan);
font-size: 10px;
font-weight: 900;
letter-spacing: 2px;
}
.cgf-mini-label span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cgf-cyan);
box-shadow:
0 0 0 7px
rgba(66,207,255,.08);
animation:
cgfPulse 2s infinite;
}
.cgf-cta-content h2 {
max-width: 650px;
margin: 0;
font-size:
clamp(40px, 5vw, 67px);
line-height: .98;
letter-spacing: -2.5px;
font-weight: 900;
}
.cgf-cta-content h2 strong {
display: block;
color: transparent;
background:
linear-gradient(
90deg,
#fff,
var(--cgf-cyan)
);
background-clip: text;
-webkit-background-clip: text;
}
.cgf-cta-content p {
max-width: 650px;
margin:
24px 0 0;
color:
var(--cgf-muted);
font-size: 15px;
line-height: 1.8;
}
/* CTA BUTTON */
.cgf-cta-button {
min-width: 220px;
min-height: 65px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
padding:
0 10px 0 25px;
border:
1px solid
rgba(66,207,255,.3);
color: #fff;
background:
rgba(255,255,255,.035);
transition:
.35s ease;
}
.cgf-cta-button span {
font-size: 13px;
font-weight: 800;
}
.cgf-cta-button b {
width: 45px;
height: 45px;
display: grid;
place-items: center;
color: #062033;
background:
var(--cgf-cyan);
font-size: 19px;
transition:
transform .35s ease;
}
.cgf-cta-button:hover {
color: #fff;
border-color:
var(--cgf-cyan);
background:
rgba(66,207,255,.08);
transform:
translateY(-5px);
box-shadow:
0 18px 45px
rgba(0,160,230,.15);
}
.cgf-cta-button:hover b {
transform:
rotate(45deg);
}
/* =========================================================
MAIN FOOTER
========================================================= */
.cgf-main {
display: grid;
grid-template-columns:
1.45fr
.8fr
.8fr
.8fr;
gap: 70px;
padding:
80px 0 70px;
}
/* =========================================================
BRAND
========================================================= */
.cgf-logo-wrap {
display: inline-flex;
align-items: center;
margin-bottom: 28px;
}
.cgf-logo {
width: 190px;
max-width: 100%;
height: auto;
object-fit: contain;
filter:
brightness(0)
invert(1);
}
.cgf-brand-description {
max-width: 350px;
margin: 0;
color:
var(--cgf-muted);
font-size: 14px;
line-height: 1.85;
}
.cgf-brand-line {
display: flex;
align-items: center;
gap: 12px;
margin-top: 28px;
color:
rgba(255,255,255,.28);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.8px;
}
.cgf-brand-line span {
width: 35px;
height: 1px;
background:
var(--cgf-cyan);
}
/* =========================================================
FOOTER COLUMNS
========================================================= */
.cgf-column h3 {
display: flex;
align-items: center;
gap: 10px;
margin:
5px 0 25px;
color: #fff;
font-size: 14px;
font-weight: 900;
letter-spacing: .5px;
}
.cgf-column h3 span {
width: 25px;
height: 1px;
background:
var(--cgf-cyan);
}
.cgf-column ul {
margin: 0;
padding: 0;
list-style: none;
}
.cgf-column li {
margin: 0;
}
.cgf-column li a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding:
8px 0;
color:
rgba(255,255,255,.48);
font-size: 13px;
line-height: 1.5;
transition:
color .25s ease,
padding .25s ease;
}
.cgf-column li a span {
color:
rgba(66,207,255,.0);
font-size: 12px;
transform:
translateX(-5px);
transition:
.25s ease;
}
.cgf-column li a:hover {
padding-left: 6px;
color:
var(--cgf-cyan);
}
.cgf-column li a:hover span {
color:
var(--cgf-cyan);
transform:
translateX(0);
}
/* =========================================================
CONTACT STRIP
========================================================= */
.cgf-contact-strip {
display: grid;
grid-template-columns:
1.35fr
.8fr
.8fr
.8fr;
border:
1px solid
rgba(255,255,255,.09);
background:
rgba(255,255,255,.025);
backdrop-filter:
blur(12px);
}
.cgf-contact-item {
min-height: 125px;
display: flex;
align-items: center;
gap: 17px;
padding: 25px;
border-right:
1px solid
rgba(255,255,255,.08);
}
.cgf-contact-item:last-child {
border-right: none;
}
.cgf-contact-icon {
width: 44px;
height: 44px;
flex-shrink: 0;
display: grid;
place-items: center;
border:
1px solid
rgba(66,207,255,.2);
color:
var(--cgf-cyan);
background:
rgba(66,207,255,.05);
font-size: 18px;
}
.cgf-contact-item small {
display: block;
margin-bottom: 7px;
color:
rgba(255,255,255,.3);
font-size: 8px;
font-weight: 900;
letter-spacing: 1.7px;
}
.cgf-contact-item a,
.cgf-contact-item strong {
display: block;
color:
rgba(255,255,255,.72);
font-size: 12px;
line-height: 1.6;
font-weight: 600;
}
.cgf-contact-item a:hover {
color:
var(--cgf-cyan);
}
/* =========================================================
BIG CADGURU BRAND
========================================================= */
.cgf-big-brand {
position: relative;
padding:
55px 0 30px;
text-align: center;
overflow: hidden;
white-space: nowrap;
user-select: none;
}
.cgf-big-brand::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 70%;
height: 1px;
transform:
translate(-50%, -50%);
background:
linear-gradient(
90deg,
transparent,
rgba(66,207,255,.25),
transparent
);
}
.cgf-big-brand span,
.cgf-big-brand strong {
position: relative;
z-index: 2;
font-size:
clamp(75px, 14vw, 190px);
line-height: .8;
letter-spacing:
-9px;
font-weight: 900;
}
.cgf-big-brand span {
color:
rgba(255,255,255,.035);
}
.cgf-big-brand strong {
color:
rgba(66,207,255,.07);
}
/* =========================================================
BOTTOM
========================================================= */
.cgf-bottom {
min-height: 75px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-top:
1px solid
rgba(255,255,255,.09);
}
.cgf-bottom p {
margin: 0;
color:
rgba(255,255,255,.3);
font-size: 10px;
}
.cgf-bottom-links {
display: flex;
align-items: center;
gap: 13px;
}
.cgf-bottom-links a {
color:
rgba(255,255,255,.35);
font-size: 10px;
transition:
color .25s ease;
}
.cgf-bottom-links a:hover {
color:
var(--cgf-cyan);
}
.cgf-bottom-links span {
color:
rgba(255,255,255,.15);
font-size: 9px;
}
.cgf-back-top {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border:
1px solid
rgba(255,255,255,.15);
color:
rgba(255,255,255,.6);
font-size: 17px;
transition:
.3s ease;
}
.cgf-back-top:hover {
color:
#061522;
border-color:
var(--cgf-cyan);
background:
var(--cgf-cyan);
transform:
translateY(-4px);
}
/* =========================================================
ANIMATIONS
========================================================= */
@keyframes cgfPulse {
0% {
box-shadow:
0 0 0 0
rgba(66,207,255,.3);
}
70% {
box-shadow:
0 0 0 10px
rgba(66,207,255,0);
}
100% {
box-shadow:
0 0 0 0
rgba(66,207,255,0);
}
}
@keyframes cgfGlowMove {
0%,
100% {
transform:
translate(0,0);
}
50% {
transform:
translate(30px,-25px);
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
.cgf-container {
width:
min(
92%,
900px
);
}
.cgf-main {
grid-template-columns:
1fr 1fr;
gap: 45px;
}
.cgf-contact-strip {
grid-template-columns:
1fr 1fr;
}
.cgf-contact-item:nth-child(2) {
border-right: none;
}
.cgf-contact-item:nth-child(-n+2) {
border-bottom:
1px solid
rgba(255,255,255,.08);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.cgf-container {
width:
calc(100% - 32px);
}
/* CTA */
.cgf-footer-cta {
align-items:
flex-start;
flex-direction:
column;
padding:
60px 0;
}
.cgf-cta-content h2 {
font-size:
43px;
letter-spacing:
-1.8px;
}
.cgf-cta-content p {
font-size:
14px;
}
.cgf-cta-button {
width: 100%;
}
/* Main */
.cgf-main {
grid-template-columns:
1fr;
gap: 40px;
padding:
60px 0;
}
.cgf-brand-column {
padding-bottom:
20px;
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.cgf-column h3 {
margin-bottom:
16px;
}
/* Contact */
.cgf-contact-strip {
grid-template-columns:
1fr;
}
.cgf-contact-item {
border-right: none;
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.cgf-contact-item:last-child {
border-bottom: none;
}
/* Big Brand */
.cgf-big-brand {
padding:
60px 0 40px;
}
.cgf-big-brand span,
.cgf-big-brand strong {
font-size:
76px;
letter-spacing:
-5px;
}
/* Bottom */
.cgf-bottom {
align-items:
flex-start;
flex-direction:
column;
padding:
25px 0;
}
.cgf-bottom-links {
flex-wrap:
wrap;
}
.cgf-back-top {
position:
absolute;
right: 0;
margin-top:
-5px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.cgf-cta-content h2 {
font-size:
37px;
}
.cgf-logo {
width:
165px;
}
.cgf-contact-item {
padding:
20px 5px;
}
.cgf-big-brand span,
.cgf-big-brand strong {
font-size:
58px;
letter-spacing:
-4px;
}
}/* End custom CSS */