/* Start custom CSS for html, class: .elementor-element-90ad237 *//* =========================================================
P.E.S. POLYTECHNIC — ADVANCED FOOTER
========================================================= */
.pes-footer {
--navy: #071b46;
--navy-dark: #030d27;
--navy-light: #102b5d;
--gold: #f5b51b;
--gold-light: #ffd86b;
--white: #ffffff;
--text: #dce6f5;
--muted: #9eacc3;
width: 100%;
margin: 0;
padding: 0;
position: relative;
background:
radial-gradient(
circle at 15% 20%,
rgba(36,92,170,.18),
transparent 32%
),
radial-gradient(
circle at 90% 70%,
rgba(245,181,27,.07),
transparent 28%
),
linear-gradient(
135deg,
#06183e,
#091f4d 50%,
#06183b
);
color: var(--white);
font-family:
Arial,
Helvetica,
sans-serif;
overflow: hidden;
box-sizing: border-box;
}
/* =========================================================
RESET
========================================================= */
.pes-footer *,
.pes-footer *::before,
.pes-footer *::after {
box-sizing: border-box;
}
/* =========================================================
TOP DECORATIVE LINE
========================================================= */
.footer-top-line {
width: 100%;
height: 4px;
display: flex;
overflow: hidden;
background: var(--navy-dark);
}
.footer-top-line span:nth-child(1) {
width: 65%;
background:
linear-gradient(
90deg,
#0a2e69,
#174c91
);
}
.footer-top-line span:nth-child(2) {
width: 25%;
background:
linear-gradient(
90deg,
#e1a614,
#ffd75b
);
}
.footer-top-line span:nth-child(3) {
width: 10%;
background: #0a2857;
}
/* =========================================================
MAIN FOOTER
========================================================= */
.footer-main {
position: relative;
width: 100%;
padding:
65px 0
55px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.015),
transparent
);
}
/* decorative glow */
.footer-main::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
left: -300px;
top: -300px;
border-radius: 50%;
background:
rgba(36,103,190,.12);
filter: blur(80px);
pointer-events: none;
}
.footer-main::after {
content: "";
position: absolute;
width: 400px;
height: 400px;
right: -250px;
bottom: -250px;
border-radius: 50%;
background:
rgba(245,181,27,.06);
filter: blur(80px);
pointer-events: none;
}
/* =========================================================
CONTAINER
========================================================= */
.footer-container {
width:
min(
1450px,
calc(100% - 70px)
);
margin: 0 auto;
display: grid;
grid-template-columns:
1.35fr
.85fr
1fr
1fr;
gap: 65px;
position: relative;
z-index: 2;
}
/* =========================================================
GENERAL COLUMN
========================================================= */
.footer-column {
min-width: 0;
}
/* =========================================================
COLLEGE LOGO
========================================================= */
.footer-logo-box {
width: 125px;
height: 95px;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
margin-bottom: 18px;
border-radius: 16px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.035)
);
border:
1px solid
rgba(255,255,255,.12);
box-shadow:
0 15px 35px
rgba(0,0,0,.20),
inset 0 1px 0
rgba(255,255,255,.15);
transition:
.4s ease;
}
.footer-logo-box:hover {
transform:
translateY(-5px)
scale(1.03);
border-color:
rgba(245,181,27,.45);
box-shadow:
0 20px 45px
rgba(0,0,0,.30),
0 0 25px
rgba(245,181,27,.10);
}
.footer-logo-box img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* =========================================================
COLLEGE NAME
========================================================= */
.footer-college-name {
margin: 0 0 7px;
color: #ffffff;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 24px;
line-height: 1.2;
font-weight: 900;
letter-spacing: .5px;
}
/* =========================================================
LOCATION
========================================================= */
.footer-location {
margin: 0 0 18px;
color: var(--gold-light);
font-size: 13px;
font-weight: 700;
letter-spacing: .3px;
}
/* =========================================================
INTRO
========================================================= */
.footer-intro {
max-width: 390px;
margin: 0;
color: #b9c7dc;
font-size: 13px;
line-height: 1.85;
font-weight: 500;
}
/* =====================================================
SOCIAL ICONS
===================================================== */
.footer-socials {
display: flex;
align-items: center;
gap: 12px;
margin-top: 22px;
}
.footer-socials a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #ffffff !important;
background:
rgba(255,255,255,.06);
border: 1px solid
rgba(255,255,255,.20);
text-decoration: none !important;
font-size: 16px;
transition:
.35s ease;
position: relative;
overflow: hidden;
}
/* glossy effect */
.footer-socials a::before {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 80%;
height: 100%;
background:
linear-gradient(
100deg,
transparent,
rgba(255,255,255,.45),
transparent
);
transform: skewX(-20deg);
transition: .6s ease;
}
.footer-socials a:hover::before {
left: 140%;
}
.footer-socials a:hover {
transform:
translateY(-5px)
scale(1.08);
background:
linear-gradient(
135deg,
#f5b51b,
#ffca3a
);
color: #071936 !important;
border-color:
#f5b51b;
box-shadow:
0 10px 25px
rgba(245,181,27,.30);
}
/* Keep icon above glossy layer */
.footer-socials a i {
position: relative;
z-index: 2;
line-height: 1;
}
/* =========================================================
FOOTER HEADING
========================================================= */
.footer-heading {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
}
.footer-heading .heading-line {
width: 4px;
height: 25px;
border-radius: 10px;
background:
linear-gradient(
180deg,
#ffd55a,
#d89b00
);
box-shadow:
0 0 12px
rgba(245,181,27,.30);
}
.footer-heading h3 {
margin: 0;
color: #ffffff;
font-size: 16px;
font-weight: 900;
letter-spacing: 1.5px;
}
/* =========================================================
QUICK LINKS
========================================================= */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
display: inline-flex;
align-items: center;
gap: 8px;
color: #b7c5da;
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition:
.3s ease;
}
.footer-links a span {
color: var(--gold);
font-size: 18px;
line-height: 1;
transition:
.3s ease;
}
.footer-links a:hover {
color: #ffffff;
transform:
translateX(7px);
}
.footer-links a:hover span {
color: #ffd85d;
transform:
translateX(3px);
}
/* =========================================================
CONTACT
========================================================= */
.contact-list {
display: flex;
flex-direction: column;
gap: 18px;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
.contact-icon {
width: 31px;
height: 31px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
color: var(--gold);
background:
rgba(245,181,27,.09);
border:
1px solid
rgba(245,181,27,.18);
font-size: 13px;
transition:
.3s ease;
}
.contact-item:hover .contact-icon {
color: #071936;
background:
var(--gold);
transform:
scale(1.08);
}
.contact-item p {
margin: 0;
color: #b7c5da;
font-size: 12px;
line-height: 1.65;
font-weight: 500;
}
/* =========================================================
EXPLORE COURSES
========================================================= */
.explore-card {
position: relative;
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 16px;
border-radius: 15px;
text-decoration: none;
color: #ffffff;
background:
linear-gradient(
135deg,
rgba(255,255,255,.10),
rgba(255,255,255,.035)
);
border:
1px solid
rgba(255,255,255,.13);
overflow: hidden;
box-shadow:
0 12px 30px
rgba(0,0,0,.12);
transition:
.4s ease;
}
/* glossy sweep */
.explore-card::before {
content: "";
position: absolute;
top: 0;
left: -130%;
width: 80%;
height: 100%;
background:
linear-gradient(
100deg,
transparent,
rgba(255,255,255,.15),
transparent
);
transform:
skewX(-20deg);
transition:
.7s ease;
}
.explore-card:hover::before {
left: 150%;
}
.explore-card:hover {
transform:
translateY(-6px);
border-color:
rgba(245,181,27,.45);
box-shadow:
0 18px 40px
rgba(0,0,0,.25),
0 0 25px
rgba(245,181,27,.08);
}
/* =========================================================
COURSE ICON
========================================================= */
.explore-icon {
width: 47px;
height: 47px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
color: #071936;
background:
linear-gradient(
135deg,
#ffd75c,
#e9a800
);
box-shadow:
0 8px 20px
rgba(245,181,27,.20);
transition:
.4s ease;
}
.explore-icon svg {
width: 23px;
height: 23px;
}
.explore-card:hover .explore-icon {
transform:
rotate(-6deg)
scale(1.08);
}
/* =========================================================
EXPLORE CONTENT
========================================================= */
.explore-content {
flex: 1;
}
.explore-content strong {
display: block;
margin-bottom: 5px;
color: #ffffff;
font-size: 14px;
font-weight: 900;
}
.explore-content span {
display: block;
color: #aebdd3;
font-size: 11px;
font-weight: 500;
}
/* =========================================================
EXPLORE ARROW
========================================================= */
.explore-arrow {
font-size: 22px;
color: var(--gold);
transition:
.3s ease;
}
.explore-card:hover .explore-arrow {
transform:
translateX(6px);
color: #ffd75c;
}
/* =========================================================
DOWNLOAD TITLE
========================================================= */
.download-title {
display: flex;
align-items: center;
gap: 8px;
margin-top: 28px;
margin-bottom: 12px;
color: #ffffff;
font-size: 13px;
font-weight: 900;
letter-spacing: 1px;
}
.mini-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
color: #071936;
background: var(--gold);
font-size: 14px;
font-weight: 900;
}
/* =========================================================
DOWNLOAD LINKS
========================================================= */
.download-links {
list-style: none;
padding: 0;
margin: 0;
}
.download-links li {
margin-bottom: 8px;
}
.download-links a {
color: #b5c3d8;
text-decoration: none;
font-size: 11px;
font-weight: 600;
transition:
.3s ease;
}
.download-links a:hover {
color: var(--gold-light);
padding-left: 5px;
}
/* =========================================================
FOOTER BOTTOM
========================================================= */
.footer-bottom {
width: 100%;
border-top:
1px solid
rgba(255,255,255,.10);
background:
rgba(2,10,29,.35);
}
.footer-bottom-container {
width:
min(
1450px,
calc(100% - 70px)
);
min-height: 65px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.footer-bottom p {
margin: 0;
color: #8fa1bd;
font-size: 11px;
font-weight: 500;
}
.footer-bottom-links {
display: flex;
align-items: center;
gap: 9px;
}
.footer-bottom-links a {
color: #9daec6;
text-decoration: none;
font-size: 11px;
font-weight: 600;
transition:
.3s ease;
}
.footer-bottom-links span {
color: #435778;
font-size: 10px;
}
.footer-bottom-links a:hover {
color: var(--gold-light);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.footer-container {
grid-template-columns:
1.2fr
1fr
1fr;
gap: 45px;
}
.footer-about {
grid-column: span 3;
}
.footer-intro {
max-width: 600px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 750px) {
.footer-main {
padding:
45px 0
40px;
}
.footer-container {
width:
calc(100% - 30px);
grid-template-columns: 1fr;
gap: 38px;
}
.footer-about {
grid-column: auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.footer-logo-box {
width: 140px;
height: 105px;
}
.footer-college-name {
font-size: 25px;
}
.footer-location {
font-size: 12px;
}
.footer-intro {
max-width: 500px;
font-size: 13px;
line-height: 1.8;
}
.footer-heading {
margin-bottom: 18px;
}
.footer-heading h3 {
font-size: 15px;
}
.footer-links a {
font-size: 13px;
}
.contact-item p {
font-size: 12px;
}
.explore-content strong {
font-size: 14px;
}
.footer-bottom-container {
width:
calc(100% - 30px);
padding:
18px 0;
flex-direction: column;
text-align: center;
gap: 12px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 450px) {
.footer-main {
padding:
40px 0
35px;
}
.footer-container {
width:
calc(100% - 24px);
gap: 35px;
}
.footer-college-name {
font-size: 22px;
}
.footer-location {
font-size: 11px;
}
.footer-intro {
font-size: 12px;
}
.footer-heading h3 {
font-size: 14px;
}
.footer-bottom p {
font-size: 10px;
line-height: 1.6;
}
.footer-bottom-links {
flex-wrap: wrap;
justify-content: center;
}
}
/* =========================================================
🔥 TRUE FULL WIDTH FOOTER
========================================================= */
/* Footer itself */
footer,
.footer,
.site-footer,
.srttc-footer {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
position: relative !important;
}
/* =========================================================
REMOVE CONTAINER WIDTH LIMIT
========================================================= */
footer > .container,
footer .container,
.footer > .container,
.footer .container,
.site-footer > .container,
.site-footer .container,
.srttc-footer > .container,
.srttc-footer .container {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* =========================================================
FOOTER MAIN BACKGROUND
========================================================= */
.footer-main,
.footer-content,
.footer-wrapper,
.footer-top {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* =========================================================
FOOTER BOTTOM BAR
========================================================= */
.footer-bottom,
.footer-copyright {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* =========================================================
BODY / PAGE GAP REMOVE
========================================================= */
html,
body {
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
WORDPRESS COMMON WRAPPER FIX
========================================================= */
.wp-site-blocks,
.site,
.site-content,
.page,
.page-container {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* =========================================================
IF FOOTER IS INSIDE A CENTERED CONTAINER
========================================================= */
footer,
.site-footer,
.footer {
position: relative !important;
left: 50% !important;
width: 100vw !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
max-width: 100vw !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
footer,
.site-footer,
.footer {
width: 100vw !important;
max-width: 100vw !important;
left: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
}
}/* End custom CSS */