Workforce Access | Qont Merchandise, Tools and Machinery Requests

/* 1. Base Footer Container */
.site-footer {
background-color: #EA4214 !important;
color: #ffffff;
width: 100%;
box-sizing: border-box;
padding: 4rem 0; /* Vertical padding only, 0 side padding as requested */
font-family: 'Inter', sans-serif;
}

/* 2. Desktop Layout: LOGO LEFT, COLUMNS RIGHT */
.footer-inner {
max-width: 1200px;
margin: 0 auto;
display: flex !important;
flex-direction: row !important;
align-items: flex-start;
justify-content: flex-start;
gap: 6rem;
}

/* 3. Logo Container */
.footer-logo {
flex: 0 0 150px;
width: 150px;
}

.footer-logo img {
display: block;
width: 100%;
height: auto;
}

/* 4. Column Grid */
.footer-columns {
flex: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}

.footer-col {
display: flex;
flex-direction: column;
gap: 0.6rem;
}

/* 5. TYPOGRAPHY */
.footer-col h4 {
margin: 0 0 0.8rem 0;
color: #ffffff !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important; /* Inter Semibold */
font-size: 1.1rem !important;
text-transform: none;
}

.footer-col a {
text-decoration: none;
color: #9ca3af !important; /* Grey text */
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important; /* Inter Medium */
font-size: 0.95rem !important;
line-height: 1.5;
transition: color 0.2s ease;
}

.footer-col a:hover {
color: #ffffff !important;
}

/* --- RESPONSIVE ADJUSTMENTS --- */

/* Tablet */
@media (max-width: 1024px) {
.footer-inner {
gap: 3rem;
padding: 0 2rem;
}
.footer-columns {
grid-template-columns: repeat(2, 1fr);
}
}

/* Mobile: Double Column Left Aligned */
@media (max-width: 768px) {
.footer-inner {
flex-direction: column !important;
gap: 3rem;
padding: 0 1.5rem;
}

.footer-logo {
flex: none;
width: 120px;
}

.footer-columns {
width: 100%;
grid-template-columns: repeat(2, 1fr); /* Double column mobile */
gap: 2.5rem 1rem;
}

.site-footer {
padding: 3rem 0;
}
}

Menu