/* GENERATED by scripts/build-our-teachers.mjs — do not edit; edit the source files instead. */
/* ---- style.css ---- */
/* ============================================
MPYPCP Official Website - Global Styles
============================================ */
/* CSS Variables - Theme Colors */
:root {
--primary-red: #c62828;
/* Black helpline strip above logo — not the main red nav */
--top-bar-bg: darkred;
--secondary-black: #0f0f0f;
--background-white: #ffffff;
--background-light-grey: #f9f9f9;
--text-dark: #333333;
--text-light: #666666;
--border-light: #e0e0e0;
}
/* Reset & Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-dark);
background-color: var(--background-white);
}
/* Container: see layout-system.css for full mobile-first and desktop master */
.container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 1024px) {
.container {
max-width: 1500px;
padding: 0 1.875rem;
}
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
color: var(--primary-red);
font-weight: 600;
margin-bottom: 15px;
}
/* Light-text sections: headings inherit parent color (fixes red on red/dark backgrounds) */
.top-bar h1, .top-bar h2, .top-bar h3, .top-bar h4, .top-bar h5, .top-bar h6,
.widget-head h1, .widget-head h2, .widget-head h3, .widget-head h4, .widget-head h5, .widget-head h6,
.stat-box h1, .stat-box h2, .stat-box h3, .stat-box h4, .stat-box h5, .stat-box h6,
.hero-slider h1, .hero-slider h2, .hero-slider h3, .hero-slider h4, .hero-slider h5, .hero-slider h6,
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4, .hero-section h5, .hero-section h6,
.hero-text h1, .hero-text h2, .hero-text h3, .hero-text h4, .hero-text h5, .hero-text h6,
.course-card-header h1, .course-card-header h2, .course-card-header h3, .course-card-header h4, .course-card-header h5, .course-card-header h6,
.brochure-course-card-header h1, .brochure-course-card-header h2, .brochure-course-card-header h3, .brochure-course-card-header h4, .brochure-course-card-header h5, .brochure-course-card-header h6,
.footer-cta h1, .footer-cta h2, .footer-cta h3, .footer-cta h4, .footer-cta h5, .footer-cta h6,
.student-welcome-banner h1, .student-welcome-banner h2, .student-welcome-banner h3, .student-welcome-banner h4, .student-welcome-banner h5, .student-welcome-banner h6,
.ideal-card-back h1, .ideal-card-back h2, .ideal-card-back h3, .ideal-card-back h4, .ideal-card-back h5, .ideal-card-back h6,
[style*="color: white"] h1, [style*="color: white"] h2, [style*="color: white"] h3, [style*="color: white"] h4, [style*="color: white"] h5, [style*="color: white"] h6,
[style*="color: #fff"] h1, [style*="color: #fff"] h2, [style*="color: #fff"] h3, [style*="color: #fff"] h4, [style*="color: #fff"] h5, [style*="color: #fff"] h6,
[style*="color:#fff"] h1, [style*="color:#fff"] h2, [style*="color:#fff"] h3, [style*="color:#fff"] h4, [style*="color:#fff"] h5, [style*="color:#fff"] h6 {
color: inherit;
}
[style*="color: white"] .heading-style,
[style*="color: #fff"] .heading-style,
[style*="color:#fff"] .heading-style {
color: inherit;
}
/* Utility Classes */
.text-center {
text-align: center;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* --- CAREER OPPORTUNITIES SECTION --- */
.career-opportunities-section {
background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
padding: 70px 0;
position: relative;
}
.career-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 30px;
margin-top: 40px;
}
.career-card {
background: white;
padding: 35px 25px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
text-align: center;
transition: all 0.4s ease;
border-bottom: 4px solid transparent;
position: relative;
overflow: hidden;
}
.career-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
border-bottom: 4px solid var(--primary-red);
}
.career-icon {
width: 70px;
height: 70px;
background: color-mix(in srgb, var(--primary-red) 10%, transparent);
color: var(--primary-red);
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
transition: all 0.4s ease;
}
.career-card:hover .career-icon {
background: var(--primary-red);
color: white;
transform: scale(1.1) rotate(5deg);
}
.career-card h4 {
font-size: 1.25rem;
color: var(--text-dark);
margin-bottom: 12px;
font-weight: 700;
}
.career-card p {
color: var(--text-light);
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}
/* Top helpline strip (.top-bar) — overrides per-page footer-black background */
.top-bar {
background: var(--top-bar-bg, darkred) !important;
}
/* ---- layout-system.css ---- */
/* ============================================
MPYPCP LAYOUT SYSTEM
Mobile-first • Desktop master container • No stretch above 1600px
Load after style.css; overrides .container and layout behavior.
============================================ */
/* ---------------------------------------------------------------------------
BREAKPOINTS (min-width) — CSS px (not monitor inches; OS scaling changes both).
Rough map: 768 tablet • 1024 laptop • 1280–1440 desktop • 1920 FHD • 2560 QHD/32"
See V3/_dev/RESPONSIVE-DESIGN-PLAN.md + responsive-viewports.css
--------------------------------------------------------------------------- */
:root {
--bp-mobile-sm: 320px;
--bp-mobile: 480px;
--bp-tablet: 768px;
--bp-laptop: 1024px;
--bp-desktop: 1280px;
--bp-desktop-lg: 1440px;
--bp-desktop-xl: 1600px;
--bp-wide: 1920px;
--bp-ultra: 2560px;
/* Desktop master: content never wider than this; centered above 1600px */
--container-max: 1500px;
--container-max-narrow: 1200px;
/* rem-based spacing (1rem = 16px at 100% zoom) */
--space-2: 0.125rem; /* 2px */
--space-4: 0.25rem; /* 4px */
--space-6: 0.375rem; /* 6px */
--space-8: 0.5rem; /* 8px */
--space-10: 0.625rem; /* 10px */
--space-12: 0.75rem; /* 12px */
--space-15: 0.9375rem; /* 15px */
--space-16: 1rem; /* 16px */
--space-20: 1.25rem; /* 20px */
--space-24: 1.5rem; /* 24px */
--space-30: 1.875rem; /* 30px */
--space-33: 2.0625rem; /* 33px */
--space-40: 2.5rem; /* 40px */
--space-50: 3.125rem; /* 50px */
--space-60: 3.75rem; /* 60px */
--space-80: 5rem; /* 80px */
/* Responsive typography (clamp: min, preferred, max) */
--text-xs: clamp(0.75rem, 2vw, 0.8125rem);
--text-sm: clamp(0.8125rem, 2.2vw, 0.875rem);
--text-base: clamp(0.875rem, 2.5vw, 1rem);
--text-lg: clamp(1rem, 2.8vw, 1.125rem);
--text-xl: clamp(1.125rem, 3vw, 1.25rem);
--text-2xl: clamp(1.25rem, 3.5vw, 1.5rem);
--text-3xl: clamp(1.5rem, 4vw, 2rem);
--text-4xl: clamp(1.75rem, 5vw, 2.5rem);
--touch-target: 2.75rem; /* 44px min */
--touch-target-lg: 3.5rem; /* 56px */
}
/* ---------------------------------------------------------------------------
GLOBAL LAYOUT FOUNDATION
--------------------------------------------------------------------------- */
html {
font-size: 100%;
width: 100%;
max-width: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: hidden;
margin: 0;
box-sizing: border-box;
}
/* ---------------------------------------------------------------------------
CONTAINER — Mobile-first, desktop master
Base: full width, internal padding only.
1024px+: max-width applied. 1600px+: never wider than --container-max.
--------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: var(--space-16);
padding-right: var(--space-16);
}
@media (min-width: 480px) {
.container {
padding-left: var(--space-20);
padding-right: var(--space-20);
}
}
@media (min-width: 768px) {
.container {
padding-left: var(--space-24);
padding-right: var(--space-24);
}
}
/* Desktop layout activates: content constrained */
@media (min-width: 1024px) {
.container {
max-width: var(--container-max);
padding-left: var(--space-30);
padding-right: var(--space-30);
}
}
@media (min-width: 1280px) {
.container {
padding-left: var(--space-40);
padding-right: var(--space-40);
}
}
/* Large screen rule: do NOT stretch; keep centered and controlled */
@media (min-width: 1600px) {
.container {
max-width: var(--container-max);
padding-left: var(--space-50);
padding-right: var(--space-50);
}
}
@media (min-width: 1920px) {
.container {
padding-left: var(--space-60);
padding-right: var(--space-60);
}
}
/* Optional: narrow content areas (e.g. text-heavy pages) */
.container--narrow {
max-width: var(--container-max-narrow);
}
/* Full-bleed sections: background edge-to-edge, content still in .container */
.section-full-width {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.section-full-width .container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
}
/* ---------------------------------------------------------------------------
SECTIONS — rem-based padding, no fixed heights
--------------------------------------------------------------------------- */
.section-padding {
padding-top: var(--space-40);
padding-bottom: var(--space-40);
}
@media (min-width: 768px) {
.section-padding {
padding-top: var(--space-60);
padding-bottom: var(--space-60);
}
}
@media (min-width: 1024px) {
.section-padding {
padding-top: var(--space-80);
padding-bottom: var(--space-80);
}
}
/* ---------------------------------------------------------------------------
MAIN LAYOUT (sidebar + content) — Flexbox, no fixed % widths
--------------------------------------------------------------------------- */
.main-wrapper {
width: 100%;
max-width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-24);
padding: var(--space-24) 0;
margin-top: var(--space-40);
}
@media (min-width: 1024px) {
.main-wrapper {
flex-direction: row;
gap: var(--space-30);
padding: var(--space-30) 0;
margin-top: var(--space-40);
}
}
.sidebar {
width: 100%;
min-width: 0;
flex-shrink: 0;
}
@media (min-width: 1024px) {
.sidebar {
width: min(25%, 320px);
max-width: 320px;
align-self: flex-start;
}
}
.content-area {
width: 100%;
min-width: 0;
flex-grow: 1;
}
@media (min-width: 1024px) {
.content-area {
min-width: 0; /* allow flex shrink */
}
}
.content-with-sidebar {
display: flex;
flex-direction: column;
gap: var(--space-24);
align-items: stretch;
}
@media (min-width: 1024px) {
.content-with-sidebar {
flex-direction: row;
gap: var(--space-30);
align-items: flex-start;
}
}
.full-width-content {
width: 100%;
max-width: 100%;
min-width: 0;
}
/* ---------------------------------------------------------------------------
HERO / BANNER — Fluid height, no fixed px
--------------------------------------------------------------------------- */
.hero-slider {
width: 100%;
max-width: 100%;
min-height: clamp(12.5rem, 50vw, 28rem);
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Home page hero: height/aspect come from index.html inline — avoid tall 16/9 + clamp() floor fighting mobile */
.hero-slider.home-hero-below-notification {
min-height: unset;
aspect-ratio: unset;
}
@media (max-width: 767px) {
/* Inner pages only — home hero uses index.html min-height + same image crop as desktop */
.hero-slider:not(.home-hero-below-notification) {
min-height: clamp(11rem, 45vw, 20rem);
aspect-ratio: 4 / 3;
background-attachment: scroll;
}
}
.hero-text {
position: relative;
z-index: 2;
}
/* ---------------------------------------------------------------------------
IMAGES & MEDIA — No overflow, no distortion
--------------------------------------------------------------------------- */
img,
video,
embed,
object {
max-width: 100%;
height: auto;
display: block;
vertical-align: middle;
}
/* iframes: do not force height:auto — it overrides width/height attrs (Facebook Page Plugin, maps, etc.) */
iframe {
max-width: 100%;
display: block;
vertical-align: middle;
}
img {
object-fit: contain;
}
/* Preserve aspect where needed */
.media-16-9 {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.media-4-3 {
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* ---------------------------------------------------------------------------
GRIDS — CSS Grid, no fixed column widths
--------------------------------------------------------------------------- */
.course-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-20);
width: 100%;
min-width: 0;
}
.stats-row .container,
.stats-row .stats-container {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-20);
width: 100%;
min-width: 0;
}
@media (min-width: 480px) {
.stats-row .container,
.stats-row .stats-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.course-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-24);
}
.stats-row .container,
.stats-row .stats-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.course-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-30);
}
.stats-row .container,
.stats-row .stats-container {
grid-template-columns: repeat(4, 1fr);
}
}
/* Cards: no fixed heights */
.course-card,
.card {
width: 100%;
min-width: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.course-img {
width: 100%;
aspect-ratio: 16 / 9;
background: var(--background-light-grey, #f9f9f9);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light);
overflow: hidden;
}
.course-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.course-body {
padding: var(--space-16);
flex-grow: 1;
}
.course-desc {
min-height: 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* ---------------------------------------------------------------------------
FOOTER GRID — Align with container, rem spacing
--------------------------------------------------------------------------- */
.footer-grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-24);
padding-bottom: var(--space-40);
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-16);
padding-right: var(--space-16);
}
@media (min-width: 768px) {
.footer-grid {
gap: var(--space-30);
padding-left: var(--space-24);
padding-right: var(--space-24);
}
}
@media (min-width: 1024px) {
.footer-grid {
gap: 40px;
padding-left: var(--space-30);
padding-right: var(--space-30);
}
}
.footer-col {
flex: 1 1 100%;
min-width: 0;
}
@media (min-width: 480px) {
.footer-col {
flex: 1 1 calc(50% - var(--space-24));
}
}
@media (min-width: 768px) {
.footer-col {
flex: 1 1 calc(25% - 30px);
min-width: min(200px, 100%);
}
}
/* About gets +20% of equal share from Quick Links → 30% / 20% / 25% / 25% */
@media (min-width: 1025px) {
footer .footer-grid {
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
gap: 1.5rem;
}
footer .footer-grid > .footer-col {
min-width: 0;
max-width: none;
box-sizing: border-box;
}
footer .footer-grid > .footer-col:nth-child(1) {
flex: 0 0 calc(30% - 1.125rem);
width: calc(30% - 1.125rem);
}
footer .footer-grid > .footer-col:nth-child(2) {
flex: 0 0 calc(20% - 1.125rem);
width: calc(20% - 1.125rem);
}
footer .footer-grid > .footer-col:nth-child(3),
footer .footer-grid > .footer-col:nth-child(4) {
flex: 0 0 calc(25% - 1.125rem);
width: calc(25% - 1.125rem);
}
}
/* ---------------------------------------------------------------------------
WELCOME / CONTENT SECTIONS — rem padding
--------------------------------------------------------------------------- */
.welcome-sec {
padding: var(--space-24);
margin-bottom: var(--space-30);
}
@media (min-width: 768px) {
.welcome-sec {
padding: var(--space-33);
}
}
/* ---------------------------------------------------------------------------
STATS ROW — Flexbox, no fixed widths
--------------------------------------------------------------------------- */
.stats-row .container,
.stats-row .stats-container {
display: flex;
flex-wrap: wrap;
gap: var(--space-20);
}
.stat-box {
flex: 1 1 100%;
min-width: 0;
padding: var(--space-30) var(--space-20);
}
@media (min-width: 480px) {
.stat-box {
flex: 1 1 calc(50% - var(--space-20));
}
}
@media (min-width: 768px) {
.stat-box {
flex: 1 1 calc(25% - var(--space-20));
}
}
/* ---------------------------------------------------------------------------
UTILITY: Prevent horizontal scroll & overflow
--------------------------------------------------------------------------- */
.layout-wrap {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-16);
padding-right: var(--space-16);
}
@media (min-width: 1024px) {
.layout-wrap {
padding-left: var(--space-30);
padding-right: var(--space-30);
}
}
/* Safe scaling: ensure no element forces overflow */
body * {
min-width: 0;
}
/* Tables: scroll on small screens instead of squashing */
.table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
width: 100%;
max-width: 100%;
}
@media (max-width: 767px) {
table {
min-width: 600px;
}
}
/* ---------------------------------------------------------------------------
DISPLAY SCALING (100%, 125%, 150%) — rem-based layout scales with zoom
--------------------------------------------------------------------------- */
/* All spacing and typography use rem; no changes needed for zoom. */
/* Logo section - compact height, logo size unchanged */
.main-header {
padding: 8px 0 !important;
}
/* Logo link - home page */
a.logo-img {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
/* ---- responsive.css ---- */
/* ============================================
MPYPCP Official Website - Enhanced Responsive Styles
Mobile-First Approach with Full Responsiveness
============================================ */
/* ============================================
1. HAMBURGER MENU FOR MOBILE - ENHANCED
============================================ */
/* Hamburger Menu Button - Enhanced */
.mobile-menu-toggle {
display: none;
background: var(--primary-red);
color: white;
border: none;
padding: 12px 15px;
font-size: 24px;
cursor: pointer;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
z-index: 1001;
border-radius: 6px;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
min-width: 48px;
min-height: 48px;
align-items: center;
justify-content: center;
}
.mobile-menu-toggle:hover {
background: var(--accent-red);
transform: translateY(-50%) scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.mobile-menu-toggle:active {
transform: translateY(-50%) scale(0.95);
}
.mobile-menu-toggle.active {
background: var(--footer-black);
}
.mobile-menu-toggle i {
transition: transform 0.3s ease;
}
.mobile-menu-toggle.active i.fa-bars {
transform: rotate(90deg);
}
/* Enhanced mobile + tablet navigation (matches mobile-first 1023px breakpoint) */
@media (max-width: 1023px) {
.mobile-menu-toggle {
display: flex;
}
.navbar {
position: relative;
padding: 0;
}
.navbar .container {
position: relative;
padding: 12px 15px;
min-height: 60px;
display: flex;
align-items: center;
}
.nav-menu {
display: none !important;
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 320px;
height: 100vh;
background: linear-gradient(180deg, var(--primary-red) 0%, var(--accent-red) 100%);
flex-direction: column;
box-shadow: 4px 0 20px rgba(0,0,0,0.3);
z-index: 9999;
overflow-y: auto;
overflow-x: hidden;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
padding: 80px 0 20px 0;
visibility: hidden;
opacity: 0;
}
.nav-menu.active {
display: flex !important;
transform: translateX(0);
visibility: visible;
opacity: 1;
}
/* Overlay element created by JavaScript */
#menu-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
z-index: 998; /* Well below .nav-menu (9999) so all menu items are clickable */
animation: fadeIn 0.3s ease;
}
#menu-overlay.active {
display: block;
}
/* Never block page clicks when menu is closed */
#menu-overlay:not(.active) {
pointer-events: none !important;
visibility: hidden !important;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Ensure menu items are clickable above the overlay */
.nav-menu li,
.nav-menu li a {
position: relative;
z-index: 1;
pointer-events: auto;
}
.nav-menu li {
width: 100%;
border-bottom: 1px solid rgba(255,255,255,0.15);
position: relative;
}
.nav-menu li:first-child {
border-top: 1px solid rgba(255,255,255,0.15);
}
.nav-menu li a {
padding: 18px 25px;
display: flex;
align-items: center;
width: 100%;
font-size: 16px;
font-weight: 600;
min-height: 56px; /* Enhanced touch target */
color: white;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.nav-menu li a i {
margin-right: 12px;
font-size: 18px;
width: 24px;
text-align: center;
transition: transform 0.3s ease;
}
.nav-menu li a:hover,
.nav-menu li a.active {
background: rgba(255,255,255,0.15);
padding-left: 30px;
color: var(--gold);
}
.nav-menu li a:hover i,
.nav-menu li a.active i {
transform: scale(1.2);
color: var(--gold);
}
/* Dropdown indicator */
.nav-menu li.dropdown > a::after {
content: '\f078';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-left: auto;
font-size: 12px;
transition: transform 0.3s ease;
}
.nav-menu li.dropdown.active > a::after {
transform: rotate(180deg);
}
/* Dropdown menu - Enhanced */
.dropdown-menu {
position: static;
display: none !important;
box-shadow: none;
background: rgba(0,0,0,0.2);
width: 100%;
margin: 0;
padding: 0;
border-top: 1px solid rgba(255,255,255,0.1);
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
}
to {
opacity: 1;
max-height: 500px;
}
}
.nav-menu li.dropdown.active > .dropdown-menu {
display: block !important;
}
.dropdown-menu li {
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.dropdown-menu li a {
padding-left: 50px !important;
font-size: 15px;
text-transform: none;
font-weight: 500;
background: rgba(0,0,0,0.1);
}
.dropdown-menu li a:hover {
background: rgba(255,255,255,0.2);
padding-left: 55px !important;
}
/* Nested dropdown — tap opens via .dropdown-sub.active (assets/js/script.js) */
.dropdown-menu-sub {
display: none !important;
position: static;
left: 0;
width: 100%;
background: rgba(0,0,0,0.3);
margin: 0;
padding: 0;
}
.dropdown-sub.active > .dropdown-menu-sub {
display: block !important;
}
.dropdown-menu-sub li a {
padding-left: 70px !important;
font-size: 14px;
}
.dropdown-menu-sub li a:hover {
padding-left: 75px !important;
}
/* Close button in menu - Hidden by default, shown via JavaScript */
.nav-menu::after {
display: none !important;
}
.menu-close-btn {
display: none !important;
}
.nav-menu.active .menu-close-btn {
display: flex !important;
}
}
/* ============================================
2. FLUID TYPOGRAPHY
============================================ */
/* Base font size with clamp for fluid typography */
html {
font-size: 16px;
}
@media (max-width: 1200px) {
html {
font-size: clamp(14px, 1.2vw, 16px);
}
}
@media (max-width: 768px) {
html {
font-size: clamp(14px, 4vw, 16px);
}
body {
font-size: 16px;
line-height: 1.6;
}
h1 {
font-size: clamp(24px, 6vw, 32px);
line-height: 1.3;
}
h2 {
font-size: clamp(20px, 5vw, 28px);
line-height: 1.3;
}
h3 {
font-size: clamp(18px, 4.5vw, 24px);
line-height: 1.4;
}
h4 {
font-size: clamp(16px, 4vw, 20px);
line-height: 1.4;
}
p {
font-size: clamp(14px, 3.5vw, 16px);
line-height: 1.6;
}
}
@media (max-width: 480px) {
html {
font-size: clamp(13px, 3.5vw, 15px);
}
h1 {
font-size: clamp(20px, 5.5vw, 24px);
}
h2 {
font-size: clamp(18px, 5vw, 22px);
}
h3 {
font-size: clamp(16px, 4.5vw, 20px);
}
}
/* ============================================
3. TOUCH-FRIENDLY BUTTONS AND LINKS
============================================ */
@media (max-width: 768px) {
/* Buttons - Minimum 44px touch target (exclude phone-mock + cert preview controls) */
.btn,
button:not(.mobile-chat-menu):not(.mobile-send-details-btn):not(.mobile-send-btn):not(.cert-preview-modal__close):not(.cert-preview-modal__backdrop):not(.cmsed-cert-modal__close):not(.cmsed-cert-modal__backdrop):not(.open-cta-btn):not(.open-cta-cancel):not(.open-sheet-close):not(.open-pick-back):not(.open-mini):not(.upi-direct-pay__pay-btn):not(.upi-direct-pay__id),
a.btn,
input[type="submit"],
input[type="button"] {
min-height: 44px;
min-width: 44px;
padding: 12px 24px !important;
font-size: 16px !important;
line-height: 1.5;
display: inline-flex;
align-items: center;
justify-content: center;
touch-action: manipulation;
}
/* Links - Touch-friendly (excluding nav-menu links which have their own styles) */
a:not(.nav-menu a) {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 8px 0;
}
/* Form inputs - Prevent zoom on iOS */
input,
select,
textarea {
font-size: 16px !important;
min-height: 44px;
padding: 12px 15px;
}
/* Widget links */
.widget-links li a {
min-height: 44px;
padding: 15px 20px !important;
font-size: 16px;
}
/* Footer links */
.footer-links li a {
min-height: 44px;
padding: 10px 0;
display: flex;
align-items: center;
}
}
/* ============================================
4. HEADER RESPONSIVE ADJUSTMENTS
============================================ */
@media (max-width: 900px) {
/* Top bar */
.top-bar {
padding: 8px 0;
font-size: 12px;
}
.top-bar .top-flex {
flex-direction: column;
gap: 8px;
text-align: center;
}
/* Phone + email + timing: single row (translation-friendly); scroll if needed */
.top-info {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.top-info span {
display: inline-flex;
align-items: center;
white-space: nowrap;
margin: 0 !important;
flex-shrink: 0;
font-size: 12px;
}
.social-icons {
margin-top: 5px;
}
.social-icons a {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
/* Header */
.main-header {
padding: 10px 0;
}
.header-flex {
flex-direction: column;
gap: 15px;
text-align: center;
position: relative;
}
.logo-img img {
max-width: 180px;
height: auto;
}
.header-actions {
justify-content: center;
flex-wrap: wrap;
gap: 8px;
}
.iso-badge {
font-size: 11px;
padding: 6px 10px;
}
}
@media (max-width: 768px) {
.header-actions {
display: none; /* Hide badges on mobile as per previous requirement */
}
.logo-img img {
max-width: 150px;
}
.top-info span {
font-size: 11px;
}
}
@media (max-width: 480px) {
.logo-img img {
max-width: 120px;
}
.top-bar {
font-size: 11px;
padding: 6px 0;
}
}
/* ============================================
5. NAVIGATION RESPONSIVE
============================================ */
@media (max-width: 1023px) {
.navbar {
position: relative;
padding: 0;
}
.navbar .container {
position: relative;
padding: 0;
}
.dropdown-menu {
position: static;
display: none !important;
box-shadow: none;
background: rgba(0,0,0,0.2);
width: 100%;
margin-left: 0;
}
.nav-menu li.dropdown.active > .dropdown-menu {
display: block !important;
}
.dropdown-menu li a {
padding-left: 40px !important;
min-height: 44px;
}
.dropdown-menu-sub {
display: none !important;
position: static;
left: 0;
width: 100%;
margin-left: 0;
}
.dropdown-sub.active > .dropdown-menu-sub {
display: block !important;
}
.dropdown-menu-sub li a {
padding-left: 60px !important;
}
}
/* ============================================
6. MAIN CONTENT RESPONSIVE
============================================ */
/* Stacked sidebar + main (≤1023px): tighter vertical rhythm; avoid stretched main column */
@media (max-width: 1023px) {
.content-with-sidebar {
gap: 12px;
}
.content-area {
flex-grow: 0 !important;
}
}
@media (max-width: 900px) {
/* Container: padding only; max-width from layout-system */
.container {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
/* Main wrapper - Stack sidebar and content */
.main-wrapper {
flex-direction: column !important;
gap: 20px;
padding: 0 15px !important;
margin-top: 20px;
}
.content-with-sidebar {
flex-direction: column;
}
.sidebar {
width: 100% !important;
order: 2;
min-width: auto;
}
.content-area {
width: 100% !important;
order: 1;
padding: 0 !important;
}
/* Welcome section */
.welcome-sec {
padding: 20px 15px !important;
margin-bottom: 20px;
}
/* Hero slider: fluid height (home page uses index.html .home-hero-below-notification rules) */
.hero-slider:not(.home-hero-below-notification) {
min-height: clamp(200px, 45vw, 300px);
background-attachment: scroll; /* Better performance on mobile */
}
.hero-text h2 {
font-size: clamp(24px, 6vw, 32px);
}
.hero-text p {
font-size: clamp(14px, 3.5vw, 18px);
}
/* Stats section: padding only here — column count at 600px / 2-col tablet in separate rules below */
.stats-row {
padding: 0 15px !important;
}
/* Course grid */
.course-grid,
[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
gap: 15px;
}
.course-card {
width: 100%;
}
/* Affiliation banner */
.affiliation-banner {
padding: 15px 0 !important;
}
.affiliation-banner > div {
flex-direction: column;
text-align: center;
gap: 15px;
padding: 15px !important;
}
.aff-text h3 {
font-size: clamp(18px, 4.5vw, 24px);
}
.aff-text p {
font-size: clamp(14px, 3.5vw, 16px);
}
.aff-btn .btn {
width: 100%;
max-width: 300px;
}
}
/* Stats: tablet (601px–1023px) — 2×2, two cards per row */
@media (max-width: 1023px) and (min-width: 601px) {
.stats-row .container,
.stats-row .stats-container {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
.stats-row .stat-box,
.stats-row .stats-container .stat-box {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
}
/* Stats: small phone — single column */
@media (max-width: 600px) {
.stats-row .container,
.stats-row .stats-container {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0.9375rem !important;
}
.stats-row .stat-box,
.stats-row .stats-container .stat-box {
width: 100% !important;
min-width: 100% !important;
padding: 25px 15px !important;
}
.stats-row .stat-box h3,
.stat-box h3 {
font-size: clamp(32px, 8vw, 42px) !important;
}
.stats-row .stat-box span,
.stat-box span {
font-size: clamp(12px, 3vw, 14px) !important;
}
}
@media (max-width: 768px) {
.main-wrapper {
padding: 0 0.625rem !important;
}
.welcome-sec {
padding: 1.125rem 0.75rem !important;
}
.hero-slider:not(.home-hero-below-notification) {
min-height: clamp(180px, 40vw, 250px);
}
}
@media (max-width: 480px) {
.main-wrapper {
padding: 0 0.5rem !important;
margin-top: 1rem;
}
.welcome-sec {
padding: 1rem 0.625rem !important;
}
.hero-slider:not(.home-hero-below-notification) {
min-height: clamp(160px, 38vw, 200px);
}
}
/* ============================================
7. IMAGES RESPONSIVE
============================================ */
/* Make all images responsive */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Home Patanjali layout: flex column on desktop (handled in index.html) */
@media (min-width: 769px) {
body.page-home .home-patanjali-figure img {
width: 100% !important;
max-width: 100% !important;
}
}
/* Prevent horizontal scroll from images */
@media (max-width: 768px) {
img:not(.leaflet-container img):not(.hero-bg-img):not(.logo-partners-item img):not(.logo-img img):not(.home-patanjali-figure img):not(.upi-qr-apps-bar__logo):not(.upi-pay-card__logo):not(.upi-pay-card__upi-logo):not(.upi-inline-logo):not(.country-flag):not(.student-upi-qr) {
width: 100%;
height: auto;
}
/* Banner images */
[style*="max-width: 1200px"],
[style*="max-width: 1440px"] {
max-width: 100% !important;
}
/* Patanjali banner */
.maharshi-patanjali-banner img,
[alt*="Maharshi Patanjali"] {
width: 100% !important;
height: auto !important;
}
/* Home: Facebook + Patanjali banner row – stack on small screens */
.home-fb-banner-inner {
grid-template-columns: 1fr !important;
}
.home-fb-banner-inner .home-fb-block {
order: 1;
}
.home-fb-banner-inner .home-patanjali-banner-block {
order: 2;
}
}
/* ============================================
8. FOOTER RESPONSIVE - CENTER ALIGNED
============================================ */
@media (max-width: 900px) {
footer {
padding-top: 30px;
text-align: center;
}
.footer-grid {
flex-direction: column;
align-items: center;
gap: 25px;
}
.footer-col {
width: 100%;
max-width: 100%;
margin-bottom: 25px;
text-align: center;
}
.footer-col h3 {
text-align: center;
margin: 0 auto 15px;
display: block;
}
.footer-links {
text-align: center;
}
.footer-links li {
text-align: center;
border-bottom: 1px solid #222;
padding-bottom: 8px;
margin-bottom: 8px;
}
.footer-links li a {
justify-content: center;
text-align: center;
}
.contact-list {
align-items: center;
text-align: center;
}
.contact-list li {
flex-direction: column;
align-items: center;
text-align: center;
gap: 5px;
}
.contact-list li i {
margin-bottom: 5px;
}
.copyright {
text-align: center;
padding: 15px 0;
font-size: 12px;
}
/* Social icons in footer */
footer .social-icons {
justify-content: center;
}
}
/* ============================================
9. TABLES RESPONSIVE
============================================ */
@media (max-width: 768px) {
/* Make tables scrollable on mobile */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
}
table {
font-size: 12px;
min-width: 600px;
}
table th,
table td {
padding: 10px 8px;
font-size: 12px;
}
}
@media (max-width: 480px) {
table {
font-size: 11px;
min-width: 500px;
}
table th,
table td {
padding: 8px 5px;
font-size: 11px;
}
}
/* ============================================
10. FORMS RESPONSIVE
============================================ */
@media (max-width: 768px) {
form {
width: 100%;
}
.form-group {
margin-bottom: 15px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
font-size: 16px; /* Prevents zoom on iOS */
min-height: 44px;
padding: 12px 15px;
border-radius: 4px;
}
.form-btn {
width: 100%;
min-height: 44px;
font-size: 16px;
padding: 12px;
}
/* Quick enquiry form in sidebar */
.quick-form {
padding: 15px;
}
}
/* ============================================
11. WIDGETS RESPONSIVE
============================================ */
@media (max-width: 900px) {
.widget {
margin-bottom: 20px;
}
.widget-head {
font-size: 16px;
padding: 12px 15px;
}
.widget-links li a {
font-size: 15px;
padding: 12px 15px;
}
/* Sidebar YouTube 16:9 box only — not Facebook Page Plugin */
.widget .home-sidebar-youtube-ratio iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 0;
}
}
/* ============================================
12. PREVENT HORIZONTAL SCROLL
============================================ */
* {
box-sizing: border-box;
}
body {
overflow-x: hidden;
width: 100%;
max-width: 100%;
}
@media (max-width: 768px) {
html,
body {
overflow-x: hidden;
width: 100%;
position: relative;
}
/* Avoid global max-width: 100% — use layout-system and targeted fixes */
}
/* ============================================
13. ACCESSIBILITY IMPROVEMENTS
============================================ */
/* Focus states for keyboard navigation */
@media (max-width: 768px) {
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
outline: 3px solid var(--primary-red);
outline-offset: 2px;
}
/* Skip to content link */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--primary-red);
color: white;
padding: 8px;
text-decoration: none;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
}
/* ============================================
14. PERFORMANCE OPTIMIZATIONS
============================================ */
/* Reduce animations on mobile for better performance */
@media (max-width: 768px) {
* {
animation-duration: 0.3s !important;
transition-duration: 0.3s !important;
}
/* Disable parallax on mobile */
.hero-slider {
background-attachment: scroll !important;
}
}
/* ============================================
15. LANDSCAPE ORIENTATION
============================================ */
@media (max-width: 900px) and (orientation: landscape) {
.hero-slider:not(.home-hero-below-notification) {
height: 200px;
}
.top-bar {
padding: 5px 0;
}
}
/* ============================================
16. PRINT STYLES
============================================ */
@media print {
.navbar,
.top-bar,
.mobile-menu-toggle,
footer,
.sidebar,
.social-icons {
display: none !important;
}
body {
font-size: 12pt;
line-height: 1.5;
}
a {
text-decoration: underline;
}
}
/* ---- mobile-global-fixes.css ---- */
/* Site-wide mobile fixes — load after page CSS stacks */
/* Course / Hindi lang-float above sticky bottom nav */
@media (max-width: 767px) {
html.mpypcp-mobile-nav-on .lang-float {
bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 10px) !important;
right: max(10px, env(safe-area-inset-right, 0px)) !important;
padding: 8px 14px !important;
font-size: 12px !important;
z-index: 9997 !important;
}
html.mpypcp-mobile-nav-on .lang-float i {
font-size: 0.95rem !important;
}
}
/* Prevent horizontal scroll from wide pre/code on mobile */
@media (max-width: 767px) {
pre,
code,
.table-responsive,
table {
max-width: 100%;
}
img,
video,
iframe {
max-width: 100%;
height: auto;
}
.container {
padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
}
}
/* Hindi reference home — hero typography on small phones */
@media (max-width: 767px) {
.hindi-hero {
padding: 36px 0 32px !important;
}
.hindi-hero h1 {
font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important;
line-height: 1.35 !important;
}
.hindi-hero .tagline {
font-size: clamp(0.9rem, 3.5vw, 1.05rem) !important;
padding: 0 8px;
}
}
/* 404 page — scale giant heading on phones */
@media (max-width: 767px) {
.err-404 {
padding: 48px 16px !important;
}
.err-404 h1 {
font-size: clamp(3.5rem, 18vw, 5rem) !important;
}
.err-404 p {
font-size: 1rem !important;
}
}
/* ---- mobile-first.css ---- */
/* ============================================
MPYPCP - MOBILE-FIRST RESPONSIVE FOUNDATION
Zero horizontal overflow, app-like mobile UI
============================================ */
/* Shared mobile stack fallback:
Pages that only include responsive.css + mobile-first.css
still receive complete mobile nav/footer/alignment styles. */
/* ============================================
STEP 1: GLOBAL FOUNDATION
============================================ */
/* Box-sizing reset for all elements */
*, *::before, *::after {
box-sizing: border-box;
}
/* Prevent horizontal overflow */
html {
width: 100%;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
width: 100%;
overflow-x: hidden;
position: relative;
margin: 0;
padding: 0;
}
/* Responsive media elements (iframe excluded — height:auto breaks fixed-height embeds) */
img, video, embed, object {
max-width: 100%;
height: auto;
display: block;
}
iframe {
max-width: 100%;
display: block;
}
/* Prevent content images from causing overflow - exclude logos/icons */
section img,
.course-img img,
.content img,
.motivation-section img,
.highlights-section img,
.benefits-section img,
.review-card img,
.alumni-section img {
width: 100%;
object-fit: cover;
}
/* Container: defined in layout-system.css; mobile base here for load order */
.container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding-left: 1rem;
padding-right: 1rem;
}
/* ============================================
STEP 2: MOBILE-FIRST BREAKPOINTS
Base: 0-479px (phones)
sm: 480-767px (large phones)
md: 768-1023px (tablets)
lg: 1024px+ (desktop)
============================================ */
/* Base styles (mobile-first) - 0-479px */
:root {
--spacing-xs: clamp(8px, 2vw, 12px);
--spacing-sm: clamp(12px, 3vw, 16px);
--spacing-md: clamp(16px, 4vw, 24px);
--spacing-lg: clamp(24px, 6vw, 40px);
--spacing-xl: clamp(32px, 8vw, 60px);
--font-size-base: clamp(14px, 3.5vw, 16px);
--font-size-sm: clamp(12px, 3vw, 14px);
--font-size-lg: clamp(16px, 4vw, 18px);
--font-size-xl: clamp(18px, 4.5vw, 24px);
--font-size-2xl: clamp(20px, 5vw, 28px);
--font-size-3xl: clamp(24px, 6vw, 36px);
--line-height-base: 1.6;
--line-height-tight: 1.4;
--line-height-loose: 1.8;
--touch-target: 44px;
--touch-target-lg: 56px;
}
/* Typography - Mobile First */
body {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
h1 {
font-size: var(--font-size-3xl);
line-height: var(--line-height-tight);
margin-bottom: var(--spacing-md);
}
h2 {
font-size: var(--font-size-2xl);
line-height: var(--line-height-tight);
margin-bottom: var(--spacing-md);
}
h3 {
font-size: var(--font-size-xl);
line-height: var(--line-height-tight);
margin-bottom: var(--spacing-sm);
}
h4 {
font-size: var(--font-size-lg);
line-height: var(--line-height-tight);
margin-bottom: var(--spacing-sm);
}
p {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
margin-bottom: var(--spacing-sm);
}
/* ============================================
SM: Large Phones (480px - 767px)
============================================ */
@media (min-width: 480px) {
.container {
padding-left: 20px;
padding-right: 20px;
}
}
/* ============================================
MD: Tablets (768px - 1023px)
============================================ */
@media (min-width: 768px) {
.container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
h1 {
font-size: clamp(28px, 4vw, 36px);
}
h2 {
font-size: clamp(24px, 3.5vw, 32px);
}
}
/* ============================================
LG: Desktop (1024px+)
============================================ */
@media (min-width: 1024px) {
.container {
max-width: 1500px;
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
/* ============================================
STEP 3: HEADER + MENU (Mobile-First)
============================================ */
/* Mobile Header - Base */
.main-header {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.header-flex {
width: 100%;
max-width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--spacing-sm);
}
.logo-img {
max-width: 100%;
flex-shrink: 0;
}
.logo-img img {
max-width: 100%;
height: auto;
}
/* Mobile + tablet navigation — drawer closed by default (desktop from 1024px) */
@media (max-width: 1023px) {
.navbar {
width: 100%;
max-width: 100%;
overflow: hidden;
position: sticky;
top: 0;
z-index: 1000;
}
.navbar .container {
position: relative;
padding: var(--spacing-sm) 15px;
min-height: var(--touch-target);
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-menu-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: var(--touch-target);
min-height: var(--touch-target);
background: var(--primary-red);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
z-index: 1001;
font-size: 20px;
transition: all 0.3s ease;
}
.nav-menu {
display: none !important;
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 320px;
height: 100vh;
background: linear-gradient(180deg, var(--primary-red) 0%, var(--accent-red) 100%);
flex-direction: column;
box-shadow: 4px 0 20px rgba(0,0,0,0.3);
z-index: 9999;
overflow-y: auto;
overflow-x: hidden;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
padding: 80px 0 var(--spacing-lg) 0;
visibility: hidden;
opacity: 0;
}
.nav-menu.active {
display: flex !important;
transform: translateX(0);
visibility: visible;
opacity: 1;
}
.nav-menu li {
width: 100%;
border-bottom: 1px solid rgba(255,255,255,0.15);
}
.nav-menu li a {
padding: var(--spacing-md) var(--spacing-lg);
min-height: var(--touch-target-lg);
display: flex;
align-items: center;
font-size: var(--font-size-base);
font-weight: 600;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.nav-menu li a:hover,
.nav-menu li a.active {
background: rgba(255,255,255,0.15);
padding-left: calc(var(--spacing-lg) + 10px);
}
}
/* Desktop Navigation (1024px+) — horizontal bar */
@media (min-width: 1024px) {
.mobile-menu-toggle {
display: none;
}
.nav-menu {
display: flex !important;
position: static;
transform: none;
visibility: visible;
opacity: 1;
}
}
/* ============================================
STEP 4: HERO SECTION
============================================ */
.hero-slider {
width: 100%;
max-width: 100%;
overflow: hidden;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-slider::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6));
z-index: 1;
}
.hero-text {
position: relative;
z-index: 2;
}
@media (max-width: 767px) {
/* Home hero: same full-bleed image as desktop — sizing from index / layout overrides */
.hero-slider:not(.home-hero-below-notification) {
height: clamp(250px, 50vh, 400px);
background-attachment: scroll;
}
.hero-text h2 {
font-size: var(--font-size-2xl);
}
.hero-text p {
font-size: var(--font-size-base);
}
}
/* ============================================
STEP 5: LAYOUT (Sections, Grids, Cards)
============================================ */
/* Remove fixed widths */
[style*="width:"] {
max-width: 100% !important;
}
/* Responsive Grids - Mobile First (Single Column) */
.course-grid,
[style*="grid-template-columns"] {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-md);
width: 100%;
max-width: 100%;
}
/* Tablet - 2 columns */
@media (min-width: 768px) {
.course-grid,
[style*="grid-template-columns: repeat(2"] {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop - 3-4 columns */
@media (min-width: 1024px) {
.course-grid,
[style*="grid-template-columns: repeat(3"] {
grid-template-columns: repeat(3, 1fr);
}
[style*="grid-template-columns: repeat(4"] {
grid-template-columns: repeat(4, 1fr);
}
}
/* Cards */
.course-card,
.card {
width: 100%;
max-width: 100%;
overflow: hidden;
}
/* Sections */
section {
width: 100%;
max-width: 100%;
overflow: hidden;
padding: var(--spacing-lg) var(--spacing-sm);
}
@media (min-width: 768px) {
section {
padding: var(--spacing-xl) var(--spacing-md);
}
}
/* Main Wrapper - Mobile First */
.main-wrapper {
width: 100%;
max-width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
gap: var(--spacing-md);
padding: var(--spacing-md) var(--spacing-sm);
}
@media (min-width: 768px) {
.main-wrapper {
flex-direction: row;
padding: var(--spacing-lg) var(--spacing-md);
}
}
.sidebar {
width: 100%;
max-width: 100%;
}
@media (min-width: 768px) {
.sidebar {
width: 25%;
max-width: 300px;
}
}
.content-area {
width: 100%;
max-width: 100%;
}
@media (min-width: 768px) {
.content-area {
width: 75%;
flex: 1;
}
}
/* Tables - Responsive */
@media (max-width: 767px) {
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
max-width: 100%;
}
table {
min-width: 600px;
width: 100%;
}
/* Alternative: Stacked table rows */
.table-stacked {
display: block;
}
.table-stacked thead {
display: none;
}
.table-stacked tr {
display: block;
margin-bottom: var(--spacing-md);
border: 1px solid #ddd;
border-radius: 4px;
}
.table-stacked td {
display: block;
text-align: right;
padding: var(--spacing-sm);
border-bottom: 1px solid #eee;
}
.table-stacked td::before {
content: attr(data-label) ": ";
font-weight: bold;
float: left;
}
}
/* ============================================
STEP 6: FOOTER (Mobile-Centered)
============================================ */
footer {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.footer-grid {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
text-align: center;
padding: var(--spacing-lg) var(--spacing-sm);
}
.footer-col {
width: 100%;
max-width: 100%;
text-align: center;
}
.footer-col h3 {
text-align: center;
margin: 0 auto var(--spacing-md);
display: inline-block;
}
.footer-links {
text-align: center;
list-style: none;
padding: 0;
}
.footer-links li {
text-align: center;
margin-bottom: var(--spacing-sm);
}
.footer-links li a {
display: inline-block;
min-height: var(--touch-target);
padding: var(--spacing-xs) 0;
text-align: center;
}
.contact-list {
text-align: center;
list-style: none;
padding: 0;
}
.contact-list li {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: var(--spacing-md);
gap: var(--spacing-xs);
}
.social-icons {
display: flex;
justify-content: center;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
.social-icons a {
min-width: var(--touch-target);
min-height: var(--touch-target);
display: flex;
align-items: center;
justify-content: center;
}
.copyright {
text-align: center;
padding: var(--spacing-md) var(--spacing-sm);
}
/* Desktop Footer */
@media (min-width: 768px) {
.footer-grid {
flex-direction: row;
flex-wrap: wrap;
text-align: left;
}
.footer-col {
flex: 1;
min-width: 200px;
text-align: left;
}
.footer-col h3 {
text-align: left;
}
.footer-links {
text-align: left;
}
.footer-links li {
text-align: left;
}
.contact-list li {
flex-direction: row;
align-items: flex-start;
text-align: left;
}
}
/* ============================================
STEP 7: FORMS + BUTTONS (Touch-Friendly)
============================================ */
/* Buttons - Touch Targets */
.btn,
button,
input[type="submit"],
input[type="button"],
a.btn {
min-height: var(--touch-target);
min-width: var(--touch-target);
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-base);
line-height: 1.5;
display: inline-flex;
align-items: center;
justify-content: center;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Forms - Mobile First */
form {
width: 100%;
max-width: 100%;
}
.form-group {
width: 100%;
max-width: 100%;
margin-bottom: var(--spacing-md);
}
input,
select,
textarea {
width: 100%;
max-width: 100%;
min-height: var(--touch-target);
padding: var(--spacing-sm) var(--spacing-md);
font-size: 16px; /* Prevents iOS zoom */
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
textarea {
min-height: 120px;
resize: vertical;
}
label {
display: block;
margin-bottom: var(--spacing-xs);
font-size: var(--font-size-base);
font-weight: 500;
}
/* ============================================
UTILITY CLASSES
============================================ */
/* Prevent overflow */
.no-overflow {
overflow: hidden;
max-width: 100%;
}
/* Full width on mobile */
.mobile-full {
width: 100%;
max-width: 100%;
}
@media (min-width: 768px) {
.mobile-full {
width: auto;
max-width: none;
}
}
/* Hide on mobile */
.mobile-hide {
display: none;
}
@media (min-width: 768px) {
.mobile-hide {
display: block;
}
}
/* Show only on mobile */
.mobile-only {
display: block;
}
@media (min-width: 768px) {
.mobile-only {
display: none;
}
}
/* ============================================
FIX COMMON OVERFLOW ISSUES
============================================ */
/* 100vw can cause horizontal scroll; prefer 100% */
[style*="100vw"] {
width: 100%;
max-width: 100%;
}
/* Fix absolute positioned elements */
[style*="position: absolute"] {
max-width: 100%;
}
/* Fix long words — no hyphens:auto (breaks Devanagari e.g. चिकित्सा as चिकि-सा) */
p, li, span, div {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Hindi / Devanagari: wrap at word boundaries, never soft-hyphen mid-cluster */
[lang="hi"],
[lang="hi"] p,
[lang="hi"] li,
[lang="hi"] span,
[lang="hi"] div {
hyphens: none;
word-break: normal;
overflow-wrap: break-word;
}
/* Fix pre/code blocks */
pre, code {
max-width: 100%;
overflow-x: auto;
word-wrap: break-word;
}
/* Fix iframes */
iframe {
max-width: 100%;
width: 100%;
}
/* Avoid blanket width override; layout-system handles containers */
/* ============================================
PERFORMANCE OPTIMIZATIONS
============================================ */
/* Reduce animations on mobile */
@media (max-width: 767px) {
* {
animation-duration: 0.3s !important;
transition-duration: 0.3s !important;
}
.marquee-scroll { animation-duration: 20s !important; }
/* Disable parallax on mobile */
[style*="background-attachment: fixed"] {
background-attachment: scroll !important;
}
}
/* Smooth scrolling */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* ============================================
ACCESSIBILITY
============================================ */
/* Focus states */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
outline: 3px solid var(--primary-red);
outline-offset: 2px;
}
/* Skip link */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--primary-red);
color: white;
padding: var(--spacing-sm);
text-decoration: none;
z-index: 10000;
}
.skip-link:focus {
top: 0;
}
/* ---- mobile-image-sections.css ---- */
/* ============================================
MOBILE UI/UX - IMAGE SECTIONS OPTIMIZATION
Mobile Only (max-width: 767px)
Desktop/Tablet: UNCHANGED
============================================ */
@media (max-width: 767px) {
/* ============================================
1. SPACING OPTIMIZATION - REDUCE EXCESSIVE GAPS
============================================ */
/* Reduce section margins */
section:not(.upi-pay-card__section),
[style*="margin-top: 40px"],
[style*="margin: 40px"] {
margin-top: clamp(20px, 4vw, 30px) !important;
margin-bottom: clamp(20px, 4vw, 30px) !important;
}
/* Reduce padding around image containers */
[style*="padding: 0 5%"],
[style*="padding: 20px 5%"] {
padding-left: 15px !important;
padding-right: 15px !important;
padding-top: clamp(15px, 3vw, 20px) !important;
padding-bottom: clamp(15px, 3vw, 20px) !important;
}
/* Compact spacing for image sections */
.image-section,
[style*="text-align: center"] {
margin-top: clamp(15px, 3vw, 25px) !important;
margin-bottom: clamp(15px, 3vw, 25px) !important;
padding-top: clamp(12px, 2.5vw, 18px) !important;
padding-bottom: clamp(12px, 2.5vw, 18px) !important;
}
/* Remove excessive gaps between elements */
.welcome-sec,
[class*="sec"] {
margin-bottom: clamp(20px, 4vw, 30px) !important;
padding: clamp(18px, 3.5vw, 25px) clamp(15px, 3vw, 20px) !important;
}
/* ============================================
2. IMAGE BEHAVIOR - FULL WIDTH, CONTROLLED HEIGHT
============================================ */
/* All images - full width, no overflow (exclude home hero + compact payment/UI logos) */
img:not(.leaflet-container img):not(.hero-bg-img):not(.home-patanjali-figure img):not(.upi-qr-apps-bar__logo):not(.upi-pay-card__logo):not(.upi-pay-card__upi-logo):not(.upi-inline-logo):not(.ot-card-photo img):not(.ot-profile-photo img):not(.country-flag):not(.student-upi-qr) {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
display: block;
margin: 0 auto;
}
.upi-qr-apps-bar__logo,
.upi-pay-card__logo,
.upi-pay-card__upi-logo,
.upi-inline-logo,
.upi-apps-strip__pill--logo img,
.student-upi-quick-pay__head img {
width: auto !important;
max-width: 92px !important;
height: auto !important;
display: inline-block !important;
margin: 0 !important;
}
/* Banner images - controlled height */
[alt*="banner"],
[alt*="Banner"],
[style*="maharshi-patanjali-banner"],
[style*="affiliation-banner"],
img[src*="banner"]:not(.student-upi-qr) {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: clamp(180px, 35vh, 260px) !important;
object-fit: cover;
object-position: center;
border-radius: 8px;
}
/* Hero slider - compact on mobile (home keeps same image + height rules as desktop/tablet) */
.hero-slider:not(.home-hero-below-notification) {
height: clamp(200px, 40vh, 300px) !important;
margin-top: 0 !important;
margin-bottom: clamp(15px, 3vw, 20px) !important;
}
/* Image containers - no overflow */
[style*="max-width: 1200px"],
[style*="max-width: 1440px"],
[style*="max-width: 100%"] {
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Decorative images - fixed height range */
img[src*="patanjali"],
img[src*="Patanjali"],
.decorative-image {
max-height: clamp(200px, 38vh, 280px) !important;
object-fit: cover;
}
/* ============================================
3. HEADING RULES - SINGLE LINE, CLEAN
============================================ */
/* Main section headings */
.heading-style,
h2.heading-style,
h2[class*="heading"] {
font-size: clamp(20px, 5vw, 24px) !important;
line-height: 1.2 !important;
margin-bottom: clamp(10px, 2vw, 15px) !important;
margin-top: clamp(8px, 1.5vw, 12px) !important;
text-align: center;
max-width: 100%;
padding: 0 clamp(10px, 2vw, 15px);
word-wrap: break-word;
hyphens: none;
letter-spacing: -0.01em;
}
/* Long headings - allow wrap on all pages including course detail */
h2.heading-style {
white-space: normal;
word-wrap: break-word;
hyphens: none;
}
/* Home welcome / about heading — must wrap on mobile */
body.page-home .content-area h2.heading-style {
white-space: normal;
overflow: visible;
text-overflow: unset;
word-wrap: break-word;
}
/* Sub-headings */
h3.heading-style,
h3[class*="heading"],
h3 {
font-size: clamp(18px, 4.5vw, 22px) !important;
line-height: 1.3 !important;
margin-bottom: clamp(8px, 1.5vw, 12px) !important;
text-align: center;
max-width: 100%;
padding: 0 clamp(10px, 2vw, 15px);
}
/* Prevent awkward line breaks (no auto hyphens — bad for Hindi) */
h2, h3, h4 {
word-break: normal;
hyphens: none;
letter-spacing: -0.02em;
}
/* Long headings - reduce font size to fit */
h2:has-text("Welcome to MPYPCP"),
h2:has-text("Our Popular Courses") {
font-size: clamp(18px, 4.5vw, 22px) !important;
}
/* ============================================
4. SUBTEXT / DESCRIPTION TEXT
============================================ */
/* Text blocks - readable width, proper spacing */
p,
.welcome-sec p,
[style*="text-align: justify"] {
font-size: clamp(14px, 3.5vw, 16px) !important;
line-height: 1.6 !important;
margin-bottom: clamp(12px, 2.5vw, 16px) !important;
max-width: 100%;
padding: 0 clamp(5px, 1.5vw, 10px);
text-align: left;
}
/* Center-aligned text sections */
[style*="text-align: center"] p,
.text-center p {
text-align: center;
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
/* Subtext under headings */
h2 + p,
h3 + p,
.heading-style + p {
margin-top: clamp(8px, 1.5vw, 12px) !important;
margin-bottom: clamp(12px, 2.5vw, 18px) !important;
}
/* ============================================
5. ALIGNMENT & STRUCTURE
============================================ */
/* Center-align image sections on mobile */
[style*="text-align: center"],
.image-section,
[style*="max-width: 100%; margin: 0 auto; text-align: center"] {
text-align: center !important;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 100%;
}
/* Image + heading groups */
img + h2,
img + h3,
[style*="text-align: center"] img {
margin-top: clamp(12px, 2.5vw, 18px) !important;
}
/* Ensure text doesn't touch edges */
.container,
[class*="container"] {
padding-left: clamp(15px, 3vw, 20px) !important;
padding-right: clamp(15px, 3vw, 20px) !important;
}
/* ============================================
6. SECTION STACKING LOGIC
============================================ */
/* Natural flow: Image → Heading → Text → CTA */
.image-section {
display: flex;
flex-direction: column;
gap: clamp(10px, 2vw, 15px);
}
.image-section img {
order: 1;
margin-bottom: clamp(10px, 2vw, 15px);
}
.image-section h2,
.image-section h3 {
order: 2;
margin-top: clamp(8px, 1.5vw, 12px);
}
.image-section p {
order: 3;
}
.image-section .btn,
.image-section a[class*="btn"] {
order: 4;
margin-top: clamp(12px, 2.5vw, 18px);
}
/* ============================================
7. BUTTONS / CTA
============================================ */
/* Full-width buttons on mobile (exclude phone-mock + cert preview controls) */
.btn,
a.btn,
button:not(.mobile-chat-menu):not(.mobile-send-details-btn):not(.mobile-send-btn):not(.cert-preview-modal__close):not(.cert-preview-modal__backdrop):not(.cmsed-cert-modal__close):not(.cmsed-cert-modal__backdrop):not(.open-cta-btn):not(.open-cta-cancel):not(.open-sheet-close):not(.open-pick-back):not(.open-mini):not(.upi-direct-pay__pay-btn):not(.upi-direct-pay__id),
[class*="btn"]:not(.mobile-send-details-btn):not(.mobile-send-btn):not(.cert-preview-modal__close):not(.cmsed-cert-modal__close):not(.open-cta-btn):not(.open-cta-cancel):not(.open-mini):not(.upi-direct-pay__pay-btn):not(.upi-direct-pay__id) {
width: 100%;
max-width: 100%;
min-height: 48px;
padding: clamp(12px, 2.5vw, 16px) clamp(20px, 4vw, 30px) !important;
font-size: clamp(15px, 3.5vw, 17px) !important;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-top: clamp(15px, 3vw, 20px) !important;
margin-bottom: clamp(10px, 2vw, 15px) !important;
}
/* CTA spacing from text */
p + .btn,
.welcome-sec .btn {
margin-top: clamp(18px, 3.5vw, 24px) !important;
}
/* ============================================
8. TYPOGRAPHY POLISH
============================================ */
/* Reduce heavy text */
strong,
b {
font-weight: 600;
}
/* Prevent long words overflow (no hyphens:auto — harms Devanagari) */
* {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: none;
}
/* Text width limit for readability */
p,
.welcome-sec p {
max-width: 100%;
}
/* ============================================
9. SPECIFIC SECTION FIXES
============================================ */
/* Patanjali Banner Section */
img[src*="maharshi-patanjali-banner"],
img[alt*="Maharshi Patanjali - View Our Courses"] {
margin-top: clamp(15px, 3vw, 25px) !important;
margin-bottom: clamp(15px, 3vw, 25px) !important;
padding: 0 !important;
max-height: clamp(200px, 38vh, 280px) !important;
object-fit: cover;
border-radius: 8px;
width: 100% !important;
}
/* Patanjali Banner Container - Reduce margins */
div[style*="width: 100%; margin: 40px 0"] {
margin-top: clamp(20px, 4vw, 30px) !important;
margin-bottom: clamp(20px, 4vw, 30px) !important;
}
div[style*="padding: 0 5%"] {
padding-left: clamp(15px, 3vw, 20px) !important;
padding-right: clamp(15px, 3vw, 20px) !important;
}
/* Quick Access Banners */
[style*="grid-template-columns: repeat(3"] {
gap: clamp(12px, 2.5vw, 18px) !important;
}
[style*="height: 270px"] {
height: clamp(180px, 35vh, 220px) !important;
}
/* Stats Section */
.stats-row {
margin-top: clamp(20px, 4vw, 30px) !important;
padding: clamp(15px, 3vw, 20px) clamp(10px, 2vw, 15px) !important;
}
.stat-box {
margin-bottom: clamp(12px, 2.5vw, 18px) !important;
padding: clamp(20px, 4vw, 28px) clamp(15px, 3vw, 20px) !important;
}
/* Course Cards */
.course-card {
margin-bottom: clamp(15px, 3vw, 20px) !important;
}
.course-img {
height: clamp(120px, 25vh, 150px) !important;
}
.course-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Affiliation Banner */
.affiliation-banner {
margin-top: clamp(10px, 2vw, 15px) !important;
margin-bottom: clamp(10px, 2vw, 15px) !important;
padding: clamp(15px, 3vw, 20px) clamp(12px, 2.5vw, 18px) !important;
}
.affiliation-banner h3 {
font-size: clamp(18px, 4.5vw, 22px) !important;
margin-bottom: clamp(6px, 1.2vw, 10px) !important;
line-height: 1.3 !important;
}
.affiliation-banner p {
font-size: clamp(13px, 3.2vw, 15px) !important;
margin-bottom: clamp(10px, 2vw, 15px) !important;
}
/* Welcome Section */
.welcome-sec {
padding: clamp(20px, 4vw, 28px) clamp(15px, 3vw, 20px) !important;
margin-bottom: clamp(20px, 4vw, 30px) !important;
margin-top: clamp(15px, 3vw, 25px) !important;
}
.welcome-sec h2 {
font-size: clamp(20px, 5vw, 24px) !important;
margin-bottom: clamp(12px, 2.5vw, 18px) !important;
margin-top: clamp(8px, 1.5vw, 12px) !important;
line-height: 1.2 !important;
}
/* About Patanjali Section */
.welcome-sec h3 {
font-size: clamp(18px, 4.5vw, 22px) !important;
margin-bottom: clamp(10px, 2vw, 15px) !important;
margin-top: clamp(8px, 1.5vw, 12px) !important;
line-height: 1.3 !important;
}
.welcome-sec img {
max-height: clamp(200px, 38vh, 280px) !important;
margin-bottom: clamp(15px, 3vw, 20px) !important;
margin-top: clamp(10px, 2vw, 15px) !important;
width: 100% !important;
max-width: 100% !important;
}
.home-patanjali-intro-row {
flex-direction: column !important;
}
.home-patanjali-figure {
flex: none !important;
width: 100% !important;
max-width: 100% !important;
order: -1;
}
.home-patanjali-figure img {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto 1rem !important;
}
body.page-home .home-patanjali-rest,
body.page-home .home-patanjali-rest p {
max-width: 100% !important;
width: 100% !important;
}
/* Welcome Section Flex Layout - Stack on Mobile */
.welcome-sec [style*="display: flex"] {
flex-direction: column !important;
gap: clamp(15px, 3vw, 20px) !important;
}
.welcome-sec [style*="flex: 1"] {
flex: 1 1 100% !important;
min-width: 100% !important;
width: 100% !important;
}
/* ============================================
10. NO HORIZONTAL SCROLL - FINAL CHECKS
============================================ */
/* Force no overflow (exclude home welcome + UPI pay widget logos/QR) */
*:not(.leaflet-container):not(.leaflet-container *):not(.welcome-sec):not(.welcome-sec *):not(.home-fb-banner-row):not(.home-fb-banner-row *):not(.upi-pay-card):not(.upi-pay-card *):not(.student-upi-quick-pay):not(.student-upi-quick-pay *):not(.ot-section):not(.ot-section *):not(.ot-bio-wrap):not(.ot-bio-wrap *):not(.filters):not(.filters *):not(.open-sheet):not(.open-sheet *) {
max-width: 100% !important;
}
body.page-home .welcome-sec,
body.page-home .home-fb-banner-row {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* Fix any remaining overflow sources */
[style*="width: 100vw"] {
width: 100% !important;
}
[style*="min-width"] {
min-width: auto !important;
}
/* Long text handling */
p, span, div, li {
word-break: normal;
overflow-wrap: break-word;
}
/* Tables - ensure scrollable */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
max-width: 100%;
}
}
/* ---- mobile-footer-contact.css ---- */
/* ============================================
MOBILE FOOTER - CONTACT US SECTION OPTIMIZATION
Mobile Only (max-width: 767px)
Desktop/Tablet: UNCHANGED
============================================ */
@media (max-width: 767px) {
/* ============================================
FOOTER SPACING REDUCTION
============================================ */
/* Reduce footer top padding */
footer {
padding-top: clamp(25px, 5vw, 35px) !important;
padding-bottom: clamp(15px, 3vw, 20px) !important;
margin-top: clamp(25px, 5vw, 35px) !important;
}
/* Reduce footer grid spacing */
.footer-grid {
padding-bottom: clamp(15px, 3vw, 20px) !important;
gap: clamp(20px, 4vw, 25px) !important;
}
/* Reduce footer column spacing */
.footer-col {
margin-bottom: clamp(20px, 4vw, 25px) !important;
padding-bottom: clamp(15px, 3vw, 20px) !important;
}
/* Reduce footer column heading spacing */
.footer-col h3 {
margin-bottom: clamp(12px, 2.5vw, 16px) !important;
padding-bottom: clamp(6px, 1.5vw, 8px) !important;
font-size: clamp(16px, 4vw, 18px) !important;
}
/* ============================================
CONTACT US SECTION - ORGANIZATION
============================================ */
/* Contact Us Column - Compact Layout (Last Column) */
.footer-col:last-child {
width: 100% !important;
margin-bottom: clamp(15px, 3vw, 20px) !important;
}
/* Contact Us Heading */
.footer-col:last-child h3 {
font-size: clamp(17px, 4.2vw, 19px) !important;
margin-bottom: clamp(10px, 2vw, 14px) !important;
text-align: center;
width: 100%;
}
/* Contact Us List - Organized Layout */
.footer-col:last-child ul,
.footer-col:last-child .contact-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: clamp(8px, 1.8vw, 12px) !important;
}
/* Contact Us List Items - Compact */
.footer-col:last-child li,
.footer-col:last-child .contact-list li {
margin-bottom: 0 !important;
padding-bottom: clamp(6px, 1.2vw, 8px) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
display: flex;
align-items: flex-start;
gap: clamp(8px, 2vw, 12px);
font-size: clamp(13px, 3.2vw, 14px) !important;
line-height: 1.5 !important;
}
/* Contact Us Icons - Smaller, Aligned */
.footer-col:last-child li i,
.footer-col:last-child .contact-list li i {
font-size: clamp(14px, 3.5vw, 16px) !important;
width: clamp(18px, 4.5vw, 22px) !important;
min-width: clamp(18px, 4.5vw, 22px) !important;
text-align: center;
color: var(--primary-red, #c62828) !important;
margin-top: 2px;
flex-shrink: 0;
}
/* Contact Us Text - Organized */
.footer-col:last-child li span,
.footer-col:last-child li a,
.footer-col:last-child .contact-list li span,
.footer-col:last-child .contact-list li a {
flex: 1;
word-wrap: break-word;
overflow-wrap: break-word;
color: #aaa;
text-decoration: none;
}
/* Contact Us Links - Touch Friendly */
.footer-col:last-child li a,
.footer-col:last-child .contact-list li a {
min-height: 44px;
display: flex;
align-items: center;
padding: clamp(4px, 1vw, 6px) 0;
}
/* Contact Us Links Hover */
.footer-col:last-child li a:hover,
.footer-col:last-child .contact-list li a:hover {
color: var(--primary-red, #c62828) !important;
padding-left: clamp(5px, 1.2vw, 8px);
transition: all 0.3s ease;
}
/* ============================================
CONTACT US - SPECIFIC ITEMS ORGANIZATION
============================================ */
/* Address - Multi-line Support */
.footer-col:last-child li:has(i.fa-map-marker-alt),
.footer-col:last-child li:has(i.fa-map-marker),
.footer-col:last-child .contact-list li:has(i.fa-map-marker-alt),
.footer-col:last-child .contact-list li:has(i.fa-map-marker) {
flex-direction: column;
align-items: flex-start;
gap: clamp(6px, 1.5vw, 8px);
}
.footer-col:last-child li:has(i.fa-map-marker-alt) i,
.footer-col:last-child li:has(i.fa-map-marker) i,
.footer-col:last-child .contact-list li:has(i.fa-map-marker-alt) i,
.footer-col:last-child .contact-list li:has(i.fa-map-marker) i {
align-self: flex-start;
margin-top: 4px;
}
.footer-col:last-child li:has(i.fa-map-marker-alt) span,
.footer-col:last-child li:has(i.fa-map-marker-alt) a,
.footer-col:last-child li:has(i.fa-map-marker) span,
.footer-col:last-child li:has(i.fa-map-marker) a,
.footer-col:last-child .contact-list li:has(i.fa-map-marker-alt) span,
.footer-col:last-child .contact-list li:has(i.fa-map-marker-alt) a,
.footer-col:last-child .contact-list li:has(i.fa-map-marker) span,
.footer-col:last-child .contact-list li:has(i.fa-map-marker) a {
width: 100%;
line-height: 1.6;
}
/* Phone - Multiple numbers support - Single Line */
.footer-col:last-child li:has(i.fa-phone-alt),
.footer-col:last-child li:has(i.fa-phone),
.footer-col:last-child .contact-list li:has(i.fa-phone-alt),
.footer-col:last-child .contact-list li:has(i.fa-phone) {
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: clamp(8px, 2vw, 12px) !important;
}
/* Phone Numbers - Single Line, compact (no stretch) - 2 spaces between numbers */
.footer-col:last-child li .phone-numbers,
.footer-col:last-child .contact-list li .phone-numbers {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 0 !important;
align-items: center !important;
justify-content: flex-start !important;
width: auto !important;
}
.footer-col:last-child li .phone-numbers a,
.footer-col:last-child .contact-list li .phone-numbers a {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
margin: 0 !important;
margin-right: 0 !important;
font-size: clamp(13px, 3.2vw, 14px) !important;
padding: 0 !important;
min-height: 28px !important;
text-decoration: none !important;
color: #aaa !important;
border-radius: 4px !important;
transition: all 0.3s ease !important;
}
.footer-col:last-child li .phone-numbers a:hover,
.footer-col:last-child .contact-list li .phone-numbers a:hover {
color: var(--primary-red, #c62828) !important;
background: rgba(198, 40, 40, 0.1) !important;
}
.footer-col:last-child li .phone-sep,
.footer-col:last-child .contact-list li .phone-sep {
margin: 0 0.25em !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
/* Phone Icon - No wrap */
.footer-col:last-child li:has(i.fa-phone-alt) i,
.footer-col:last-child li:has(i.fa-phone) i,
.footer-col:last-child .contact-list li:has(i.fa-phone-alt) i,
.footer-col:last-child .contact-list li:has(i.fa-phone) i {
flex-shrink: 0 !important;
margin: 0 !important;
}
/* Email - Row layout */
.footer-col:last-child li:has(i.fa-envelope),
.footer-col:last-child .contact-list li:has(i.fa-envelope) {
flex-direction: row;
align-items: center;
}
/* ============================================
ALL FOOTER COLUMNS - SPACING REDUCTION
============================================ */
/* Footer Links - Reduced Spacing */
.footer-links {
margin-top: clamp(8px, 2vw, 12px) !important;
}
.footer-links li {
margin-bottom: clamp(6px, 1.5vw, 10px) !important;
padding-bottom: clamp(4px, 1vw, 6px) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.footer-links li a {
font-size: clamp(13px, 3.2vw, 14px) !important;
line-height: 1.5 !important;
padding: clamp(4px, 1vw, 6px) 0;
min-height: 44px;
display: flex;
align-items: center;
}
/* ============================================
FOOTER COPYRIGHT - SPACING REDUCTION
============================================ */
.footer-bottom,
footer .container:last-child {
padding-top: clamp(15px, 3vw, 20px) !important;
padding-bottom: clamp(10px, 2vw, 15px) !important;
margin-top: clamp(15px, 3vw, 20px) !important;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom p,
footer .container:last-child p {
font-size: clamp(12px, 3vw, 13px) !important;
margin: 0;
padding: clamp(5px, 1.2vw, 8px) 0;
text-align: center;
line-height: 1.4;
}
/* ============================================
FOOTER SOCIAL ICONS - SPACING REDUCTION
============================================ */
/* Social Icons Container in Contact Us - Reduced spacing */
.footer-col:last-child > div[style*="margin-top: 20px"],
.footer-col:last-child > div[style*="border-top"] {
margin-top: clamp(6px, 1.5vw, 10px) !important;
padding-top: clamp(5px, 1.2vw, 8px) !important;
margin-bottom: clamp(5px, 1.2vw, 8px) !important;
padding-bottom: clamp(5px, 1.2vw, 8px) !important;
}
/* Reduce spacing between social icons div and copyright section */
.footer-grid + .copyright {
margin-top: clamp(5px, 1.5vw, 10px) !important;
padding-top: clamp(8px, 2vw, 12px) !important;
}
/* Reduce spacing after social icons container */
.footer-col:last-child > div[style*="display: flex"][style*="justify-content: center"] {
margin-bottom: clamp(3px, 1vw, 6px) !important;
}
/* Social Icons Flex Container */
.footer-col:last-child div[style*="display: flex"][style*="gap: 15px"],
.footer-col:last-child div[style*="justify-content: center"] {
gap: clamp(10px, 2.5vw, 15px) !important;
}
/* Social Icons Links */
.footer-col:last-child div[style*="display: flex"] a,
.footer-col:last-child a[href*="facebook"],
.footer-col:last-child a[href*="instagram"],
.footer-col:last-child a[href*="twitter"],
.footer-col:last-child a[href*="youtube"],
.footer-col:last-child a[href*="pinterest"] {
width: clamp(36px, 9vw, 40px) !important;
height: clamp(36px, 9vw, 40px) !important;
min-width: clamp(36px, 9vw, 40px) !important;
min-height: clamp(36px, 9vw, 40px) !important;
font-size: clamp(16px, 4vw, 18px) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
}
/* ============================================
VERY SMALL SCREENS (max-width: 480px)
============================================ */
@media (max-width: 480px) {
/* Further reduce spacing for social icons container */
.footer-col:last-child > div[style*="margin-top: 20px"],
.footer-col:last-child > div[style*="border-top"] {
margin-top: clamp(4px, 1vw, 8px) !important;
padding-top: clamp(4px, 1vw, 6px) !important;
margin-bottom: clamp(3px, 0.8vw, 5px) !important;
padding-bottom: clamp(3px, 0.8vw, 5px) !important;
}
/* Further reduce spacing between social icons and copyright */
.footer-grid + .copyright {
margin-top: clamp(3px, 1vw, 6px) !important;
padding-top: clamp(6px, 1.5vw, 10px) !important;
}
/* Further reduce spacing after social icons container */
.footer-col:last-child > div[style*="display: flex"][style*="justify-content: center"] {
margin-bottom: clamp(2px, 0.8vw, 4px) !important;
}
}
/* ---- mobile-footer-polish.css ---- */
/* ============================================
MOBILE FOOTER POLISH - COMPACT & CLEAN
Mobile Only (max-width: 767px)
Desktop/Tablet: UNCHANGED
============================================ */
@media (max-width: 767px) {
/* ============================================
1. FOOTER SPACING - TIGHT & COMPACT
============================================ */
footer {
padding-top: clamp(20px, 4vw, 28px) !important;
padding-bottom: clamp(12px, 2.5vw, 18px) !important;
margin-top: clamp(20px, 4vw, 28px) !important;
}
.footer-grid {
padding-bottom: clamp(12px, 2.5vw, 18px) !important;
gap: clamp(18px, 3.5vw, 22px) !important;
}
.footer-col {
margin-bottom: clamp(16px, 3vw, 20px) !important;
padding-bottom: clamp(12px, 2.5vw, 16px) !important;
}
.footer-col:last-child {
padding-bottom: 4px !important;
margin-bottom: 0 !important;
}
.footer-col h3 {
margin-bottom: clamp(10px, 2vw, 14px) !important;
padding-bottom: clamp(5px, 1.2vw, 7px) !important;
font-size: clamp(16px, 4vw, 18px) !important;
text-align: center !important;
}
/* ============================================
2. QUICK LINKS & COURSES - COMPACT LIST
============================================ */
/* All footer lists - reset spacing - CENTER ALIGNED */
.footer-links,
.footer-col ul:not(.contact-list) {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
margin-top: 1.2px !important;
text-align: center !important;
}
/* All footer list items - compact spacing (2px) - CENTER ALIGNED */
.footer-links li,
.footer-col ul:not(.contact-list) li {
margin: 0 !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
padding: 0 !important;
padding-block: 2px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
line-height: 1.3 !important;
text-align: center !important;
}
/* Quick Links section only - spacing 0.8px (typically 2nd footer-col) */
.footer-col:nth-child(2) .footer-links li,
.footer-col:nth-of-type(2) .footer-links li {
padding-block: 0.8px !important;
padding-top: 0.8px !important;
padding-bottom: 0.8px !important;
}
/* Remove bottom border from last item */
.footer-links li:last-child,
.footer-col ul:not(.contact-list) li:last-child {
border-bottom: none !important;
padding-bottom: 2px !important;
}
/* Quick Links last item - spacing 0.8px */
.footer-col:nth-child(2) .footer-links li:last-child,
.footer-col:nth-of-type(2) .footer-links li:last-child {
padding-bottom: 0.8px !important;
}
/* Remove any nested element spacing */
.footer-links li *,
.footer-col ul:not(.contact-list) li * {
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Footer links - compact, touch-friendly - CENTER ALIGNED */
.footer-links li a,
.footer-col ul:not(.contact-list) li a {
font-size: clamp(13px, 3.2vw, 14px) !important;
line-height: 1.3 !important;
padding: 0 !important;
padding-block: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin: 0 !important;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center !important;
text-align: center !important;
color: #aaa;
text-decoration: none;
transition: color 0.3s ease;
}
/* Remove any
or empty elements inside */
.footer-links li br,
.footer-col ul:not(.contact-list) li br {
display: none !important;
height: 0 !important;
line-height: 0 !important;
}
.footer-links li a:hover,
.footer-col ul:not(.contact-list) li a:hover {
color: var(--primary-red, #c62828);
padding-left: 0 !important;
transform: scale(1.05);
}
/* ============================================
3. CONTACT US - TIGHT SPACING, ONE ROW PER ITEM
============================================ */
.contact-list {
list-style: none;
padding: 0;
margin: 0;
margin-top: clamp(3px, 0.75vw, 5px) !important;
margin-bottom: 2px !important;
display: flex;
flex-direction: column;
gap: clamp(5px, 1vw, 6px) !important;
}
.contact-list li {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: none !important;
display: flex;
flex-direction: row;
align-items: center;
gap: clamp(4px, 1vw, 6px) !important;
font-size: clamp(13px, 3.2vw, 14px) !important;
line-height: 1.3 !important;
}
/* Contact Icons - No extra spacing */
.contact-list li i {
font-size: clamp(14px, 3.5vw, 16px) !important;
width: clamp(18px, 4.5vw, 22px) !important;
min-width: clamp(18px, 4.5vw, 22px) !important;
color: var(--primary-red, #c62828) !important;
margin: 0 !important;
margin-top: 0 !important;
padding: 0 !important;
flex-shrink: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
/* Contact Text/Links - Tight spacing */
.contact-list li a,
.contact-list li span {
flex: 1;
word-wrap: break-word;
overflow-wrap: break-word;
color: #aaa;
text-decoration: none;
margin: 0 !important;
padding: 0 !important;
line-height: 1.5 !important;
}
.contact-list li a {
min-height: 40px;
display: flex;
align-items: center;
transition: color 0.3s ease;
}
.contact-list li a:hover {
color: var(--primary-red, #c62828) !important;
}
/* Address - Multi-line support but still one row */
.contact-list li:has(i.fa-map-marker-alt) {
align-items: flex-start;
}
.contact-list li:has(i.fa-map-marker-alt) i {
margin-top: 3px;
}
.contact-list li:has(i.fa-map-marker-alt) a {
align-items: flex-start;
line-height: 1.6;
}
/* Phone Numbers - Single Line - compact, no stretch - 2 spaces between numbers */
.contact-list li .phone-numbers {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 0 !important;
align-items: center !important;
justify-content: flex-start !important;
width: auto !important;
}
.contact-list li .phone-numbers a {
flex: 0 0 auto !important;
min-height: 28px !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
font-size: clamp(13px, 3.2vw, 14px) !important;
padding: 0 !important;
margin: 0 !important;
text-decoration: none !important;
color: #aaa !important;
border-radius: 4px !important;
transition: all 0.3s ease !important;
}
.contact-list li .phone-numbers a:hover {
color: var(--primary-red, #c62828) !important;
background: rgba(198, 40, 40, 0.1) !important;
}
.contact-list li .phone-sep {
margin: 0 0.25em !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
/* Ensure phone icon and numbers stay on same line */
.contact-list li:has(i.fa-phone-alt),
.contact-list li:has(i.fa-phone) {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: clamp(8px, 2vw, 12px) !important;
}
.contact-list li:has(i.fa-phone-alt) i,
.contact-list li:has(i.fa-phone) i {
flex-shrink: 0 !important;
margin: 0 !important;
}
.contact-list li:has(i.fa-phone-alt) .phone-numbers,
.contact-list li:has(i.fa-phone) .phone-numbers {
flex: 0 0 auto !important;
min-width: 0 !important;
}
/* Email - Single row */
.contact-list li:has(i.fa-envelope) {
align-items: center;
}
/* ============================================
4. SOCIAL ICONS - MINIMAL SPACING, SAME LINE
============================================ */
.footer-col:last-child > div[style*="margin-top"] {
margin-top: 0 !important;
padding-top: 0 !important;
}
.footer-social-wrap {
flex-wrap: nowrap !important;
justify-content: center !important;
gap: clamp(4px, 1.2vw, 8px) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.footer-social-wrap::before {
font-size: clamp(12px, 3vw, 14px) !important;
}
.footer-social-wrap > div {
flex-wrap: nowrap !important;
gap: clamp(4px, 1.2vw, 8px) !important;
}
.footer-col:last-child div[style*="display: flex"][style*="gap"] {
gap: clamp(4px, 1.2vw, 8px) !important;
}
/* Footer icons - compact on mobile, same design */
.footer-col:last-child div[style*="display: flex"] a,
.footer-social-wrap .footer-social-link {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
font-size: 15px !important;
}
/* ============================================
5. FOOTER BOTTOM - COMPACT
============================================ */
.copyright,
footer .container:last-child {
padding-top: clamp(12px, 2.5vw, 16px) !important;
padding-bottom: clamp(8px, 1.8vw, 12px) !important;
margin-top: clamp(12px, 2.5vw, 16px) !important;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.copyright .container,
footer .container:last-child {
font-size: clamp(11px, 2.8vw, 12px) !important;
line-height: 1.4;
text-align: center;
}
/* ============================================
6. REMOVE ALL EXTRA SPACING
============================================ */
/* Remove any
spacing */
footer br {
display: none !important;
}
/* Remove empty paragraphs */
footer p:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Remove extra whitespace from text nodes */
footer * {
white-space: normal;
}
/* Remove any stray commas or punctuation spacing */
footer li::before,
footer li::after {
content: none !important;
}
/* ============================================
7. MOBILE BOTTOM NAV (sticky) + scroll clearance
Footer / last content hides behind bar — body padding fixes it
---
Height check (for Tawk / layout): total bar ≈ padding-top 5px + icon ~18–21px (clamp)
+ dot 4px + label ~7–8px + padding-bottom 6px + env(safe-area-inset-bottom).
Typical ~52–58px content + safe area → often ~62–88px full getBoundingClientRect().height.
JS sets --mpypcp-tawk-bottom from live nav rect (always above bar + 38px). Policy: _dev/TAWK-PLACEMENT.md
============================================ */
html.mpypcp-mobile-nav-on {
scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
html.mpypcp-mobile-nav-on body {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
box-sizing: border-box;
}
#mpypcp-mobile-bottom-nav {
display: none;
}
/* Very light blush / barely-there red tint */
html.mpypcp-mobile-nav-on #mpypcp-mobile-bottom-nav {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: none;
z-index: 9998;
justify-content: space-around;
align-items: stretch;
gap: 2px;
padding: 0 max(6px, env(safe-area-inset-left, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-right, 0px));
margin: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
background: #ffffff;
border-radius: 16px 16px 0 0;
border: none;
border-top: 1px solid rgba(198, 40, 40, 0.12);
box-shadow:
0 -4px 20px rgba(0, 0, 0, 0.08),
0 -1px 0 rgba(255, 255, 255, 0.9) inset;
}
#mpypcp-mobile-bottom-nav .mpypcp-mbn-item {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 0;
min-height: 58px;
padding: 6px 4px 5px;
margin: 4px 0 0;
text-decoration: none;
color: #795548;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: clamp(8px, 2vw, 9px);
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
border-radius: 10px;
position: relative;
transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
#mpypcp-mobile-bottom-nav .mpypcp-mbn-item:active {
transform: scale(0.96);
}
#mpypcp-mobile-bottom-nav .mpypcp-mbn-ico {
display: flex;
align-items: center;
justify-content: center;
width: clamp(34px, 9vw, 40px);
height: clamp(34px, 9vw, 40px);
line-height: 1;
border-radius: 10px;
background: rgba(121, 85, 72, 0.08);
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
#mpypcp-mobile-bottom-nav .mpypcp-mbn-ico i {
font-size: clamp(18px, 4.8vw, 22px);
color: #795548;
transition: color 0.2s ease;
}
#mpypcp-mobile-bottom-nav .mpypcp-mbn-item.mpypcp-mbn-active {
color: #c62828;
}
#mpypcp-mobile-bottom-nav .mpypcp-mbn-item.mpypcp-mbn-active::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 22px;
height: 3px;
background: #c62828;
border-radius: 0 0 3px 3px;
}
#mpypcp-mobile-bottom-nav .mpypcp-mbn-item.mpypcp-mbn-active .mpypcp-mbn-ico {
background: rgba(198, 40, 40, 0.12);
transform: translateY(-1px);
}
#mpypcp-mobile-bottom-nav .mpypcp-mbn-item.mpypcp-mbn-active .mpypcp-mbn-ico i {
color: #c62828;
}
#mpypcp-mobile-bottom-nav .mpypcp-mbn-txt {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
line-height: 1.1;
margin-top: 0;
}
/* ============================================
Tawk.to — mobile placement (see _dev/TAWK-PLACEMENT.md)
Bottom-right; JS sets bottom from nav geometry. Fallback = conservative bar+gap only.
============================================ */
html.mpypcp-mobile-nav-on #tawkchat-container,
html.mpypcp-mobile-nav-on #tawkchat-minimized,
html.mpypcp-mobile-nav-on #tawkchat-minimized-container,
html.mpypcp-mobile-nav-on #tawkchat-minimized-wrapper,
html.mpypcp-mobile-nav-on #tawkchat-minimized-iframe-container,
html.mpypcp-mobile-nav-on #tawkchat-iframe-container,
html.mpypcp-mobile-nav-on .tawk-min-container {
bottom: var(
--mpypcp-tawk-bottom,
calc(64px + env(safe-area-inset-bottom, 0px) + 38px)
) !important;
right: max(12px, env(safe-area-inset-right, 0px)) !important;
left: auto !important;
z-index: 10001 !important;
}
}
@media (min-width: 768px) {
html.mpypcp-mobile-nav-on body {
padding-bottom: 0 !important;
}
#mpypcp-mobile-bottom-nav {
display: none !important;
}
}
/* ---- footer-professional.css ---- */
/* ============================================
PROFESSIONAL FOOTER DESIGN
Modern, Clean, Professional Look
Desktop & Mobile Optimized
============================================ */
/* ============================================
1. FOOTER BASE - PROFESSIONAL FOUNDATION
============================================ */
footer {
background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
color: #b0b0b0;
padding-top: 60px;
font-size: 14px;
border-top: 4px solid var(--primary-red, #c62828);
margin-top: 60px;
position: relative;
overflow: hidden;
}
/* Subtle red gradient overlay on footer */
footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(198, 40, 40, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(198, 40, 40, 0.03) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
footer > * {
position: relative;
z-index: 1;
}
/* ============================================
2. FOOTER GRID - MODERN LAYOUT
============================================ */
.footer-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 2.5rem;
gap: 2.5rem;
max-width: min(1500px, 100%);
margin: 0 auto;
padding-left: 1rem;
padding-right: 1rem;
}
.footer-col {
flex: 1 1 100%;
min-width: 0;
}
@media (min-width: 480px) {
.footer-col {
flex: 1 1 calc(50% - 1.25rem);
}
}
@media (min-width: 768px) {
.footer-col {
flex: 1 1 calc(25% - 1.875rem);
min-width: min(12.5rem, 100%);
}
}
/* About gets +20% of equal share from Quick Links → 30% / 20% / 25% / 25% */
@media (min-width: 1025px) {
footer .footer-grid {
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
gap: 1.5rem;
}
footer .footer-grid > .footer-col {
min-width: 0;
max-width: none;
box-sizing: border-box;
}
/* 1st: About MPYPCP — wider */
footer .footer-grid > .footer-col:nth-child(1) {
flex: 0 0 calc(30% - 1.125rem);
width: calc(30% - 1.125rem);
}
/* 2nd: Quick Links — narrower (width moved to About) */
footer .footer-grid > .footer-col:nth-child(2) {
flex: 0 0 calc(20% - 1.125rem);
width: calc(20% - 1.125rem);
}
footer .footer-grid > .footer-col:nth-child(3),
footer .footer-grid > .footer-col:nth-child(4) {
flex: 0 0 calc(25% - 1.125rem);
width: calc(25% - 1.125rem);
}
}
/* ============================================
3. FOOTER COLUMN HEADINGS - ELEGANT
============================================ */
.footer-col h3 {
color: #ffffff;
margin-bottom: 25px;
font-size: 20px;
font-weight: 600;
padding-bottom: 15px;
border-bottom: 2px solid rgba(198, 40, 40, 0.3);
display: inline-block;
position: relative;
letter-spacing: 0.5px;
text-transform: uppercase;
font-family: 'Segoe UI', Arial, sans-serif;
}
/* Red gradient line under Quick Links, Our Courses, Contact Us */
.footer-col h3::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 50px;
height: 2px;
background: linear-gradient(90deg, var(--primary-red, #c62828) 0%, transparent 100%);
transition: width 0.3s ease;
}
.footer-col:hover h3::after {
width: 100%;
}
/* ============================================
4. ABOUT SECTION - ENHANCED TYPOGRAPHY
============================================ */
.footer-col p {
text-align: justify;
line-height: 1.8;
color: #ffffff;
font-size: 14px;
margin: 0;
padding: 0;
}
/* Footer About — single-image gallery slider */
.footer-gallery-slider {
margin: 0 0 14px;
overflow: hidden;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.25);
}
.footer-gallery-slider__link {
display: block;
position: relative;
overflow: hidden;
cursor: pointer;
text-decoration: none;
width: 100%;
height: 220px; /* +10% from 200px */
}
@media (min-width: 768px) {
.footer-gallery-slider__link {
height: 160px; /* +10% from 145px */
}
}
.footer-gallery-slider__link:focus-visible {
outline: 2px solid var(--primary-red, #c62828);
outline-offset: 2px;
}
.footer-gallery-slider__track {
position: absolute;
inset: 0;
}
.footer-gallery-slider__track img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transform: scale(1.03);
transition: opacity 0.55s ease, transform 0.55s ease;
pointer-events: none;
}
.footer-gallery-slider__track img.is-active {
opacity: 1;
transform: scale(1);
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.footer-gallery-slider__track img {
transition: none;
transform: none;
}
}
/* ============================================
5. FOOTER LINKS - PROFESSIONAL STYLING
============================================ */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-bottom: 12px;
transition: all 0.3s ease;
position: relative;
}
.footer-links li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.footer-links li::before {
content: '▸';
color: var(--primary-red, #c62828);
margin-right: 10px;
font-size: 12px;
opacity: 0.6;
transition: all 0.3s ease;
}
.footer-links li:hover::before {
opacity: 1;
transform: translateX(3px);
}
.footer-links li a {
color: #b0b0b0;
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
display: inline-block;
padding: 4px 0;
position: relative;
}
.footer-links li a:hover {
color: #ffffff;
padding-left: 8px;
text-shadow: 0 0 8px rgba(198, 40, 40, 0.5);
}
/* ============================================
6. CONTACT LIST - PROFESSIONAL LAYOUT
============================================ */
.contact-list {
list-style: none;
padding: 0;
margin: 0;
}
.contact-list li {
margin-bottom: 18px;
display: flex;
gap: 12px;
align-items: flex-start;
padding: 10px 0;
transition: all 0.3s ease;
}
.contact-list li:hover {
transform: translateX(5px);
}
.contact-list li i {
color: var(--primary-red, #c62828);
font-size: 16px;
margin-top: 3px;
min-width: 20px;
text-align: center;
flex-shrink: 0;
}
.contact-list li a,
.contact-list li span {
color: #b0b0b0;
text-decoration: none;
font-size: 14px;
line-height: 1.6;
flex: 1;
}
.contact-list li a:hover {
color: #ffffff;
text-shadow: 0 0 6px rgba(198, 40, 40, 0.4);
}
.phone-numbers {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Footer Contact Us: phone numbers in one line, no gap */
.contact-list .phone-numbers {
flex-direction: row;
flex-wrap: nowrap;
gap: 0 !important;
align-items: center;
}
.phone-numbers a {
display: inline-block;
}
/* Head Office – bold + gradient (footer: lighter for dark bg) */
.head-office-gradient {
font-weight: 700;
letter-spacing: 0.02em;
font-size: 0.95em;
background: linear-gradient(90deg, #8b0000, #b71c1c, #8b0000);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: headoffice-flash 1.5s ease-in-out infinite;
}
@keyframes headoffice-flash {
0%, 100% { opacity: 1; filter: brightness(1); }
50% { opacity: 0.85; filter: brightness(1.3); }
}
footer .head-office-gradient {
background: linear-gradient(90deg, #ef5350, var(--primary-red, #c62828), #ef5350);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: headoffice-flash 1.5s ease-in-out infinite;
}
.footer-contact-intro {
color: #b0b0b0;
font-size: 13px;
line-height: 1.5;
margin: 0 0 14px 0;
padding: 0;
}
.footer-contact-link {
color: #b0b0b0;
text-decoration: none;
transition: color 0.3s;
}
.footer-contact-link:hover {
color: var(--primary-red, #c62828);
}
/* Phone row: prevent flex growth - keep numbers close */
footer .contact-list li:has(i.fa-phone-alt) .phone-numbers,
footer .contact-list li:has(i.fa-phone) .phone-numbers {
flex: 0 0 auto !important;
max-width: fit-content !important;
}
footer .contact-list .phone-numbers {
display: inline-flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 0 !important;
justify-content: flex-start !important;
white-space: nowrap !important;
width: auto !important;
max-width: fit-content !important;
}
footer .contact-list .phone-numbers a {
white-space: nowrap !important;
flex: 0 0 auto !important;
flex-shrink: 0 !important;
padding: 0 !important;
margin: 0 !important;
font-size: inherit;
}
footer .contact-list .phone-sep {
color: #666;
font-weight: 300;
user-select: none;
margin: 0 2px !important;
padding: 0 !important;
}
/* Mobile: 2 spaces between phone numbers */
@media (max-width: 767px) {
footer .contact-list .phone-numbers {
gap: 0 !important;
}
footer .contact-list .phone-numbers a {
padding: 0 !important;
flex: 0 0 auto !important;
}
footer .contact-list .phone-sep {
margin: 0 0.25em !important;
}
}
footer .contact-list .phone-numbers,
footer .contact-list .phone-numbers a,
footer .contact-list .phone-numbers .phone-sep {
white-space: nowrap !important;
}
.footer-social-wrap {
display: flex !important;
align-items: center;
gap: 8px;
flex-wrap: nowrap !important;
margin-top: 6px !important;
margin-bottom: 0 !important;
padding-top: 6px !important;
padding-bottom: 0 !important;
}
.footer-social-wrap::before {
content: "Follow us:";
font-weight: 600;
color: #ffffff;
font-size: 14px;
white-space: nowrap;
flex-shrink: 0;
}
.footer-social-wrap > div {
display: flex !important;
flex-wrap: nowrap !important;
flex-shrink: 0;
gap: 6px;
}
.footer-social-link {
color: #b0b0b0;
font-size: 20px;
transition: color 0.3s;
}
.footer-social-link:hover { color: #1877f2; }
.footer-social-link[href*="instagram"]:hover { color: #e4405f; }
.footer-social-link[href*="twitter"]:hover,
.footer-social-link[href*="x.com"]:hover { color: #1da1f2; }
.footer-social-link[href*="youtube"]:hover { color: #ff0000; }
.footer-social-link[href*="pinterest"]:hover { color: #bd081c; }
/* ============================================
7. SOCIAL ICONS - REDESIGNED
Rounded square, clean minimal, brand accent
============================================ */
.footer-col:last-child > div[style*="margin-top"] {
margin-top: 10px !important;
padding-top: 10px !important;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-col:last-child div[style*="display: flex"] {
display: flex !important;
gap: 6px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
.footer-col:last-child div[style*="display: flex"] a,
.footer-social-wrap .footer-social-link {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 10px !important;
color: #b8b8b8 !important;
font-size: 17px !important;
transition: all 0.25s ease !important;
text-decoration: none !important;
position: relative !important;
overflow: hidden !important;
}
.footer-col:last-child div[style*="display: flex"] a i,
.footer-social-wrap .footer-social-link i {
position: relative;
z-index: 1;
transition: transform 0.25s ease;
}
.footer-col:last-child div[style*="display: flex"] a:hover,
.footer-social-wrap .footer-social-link:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(198, 40, 40, 0.25);
border-color: var(--primary-red, #c62828) !important;
color: #fff !important;
background: rgba(198, 40, 40, 0.2) !important;
}
.footer-col:last-child div[style*="display: flex"] a:hover i,
.footer-social-wrap .footer-social-link:hover i {
transform: scale(1.08);
}
/* Social Media Brand Colors on Hover */
.footer-col:last-child div[style*="display: flex"] a[href*="facebook"]:hover,
.footer-social-wrap a[href*="facebook"]:hover {
border-color: #1877f2 !important;
background: rgba(24, 119, 242, 0.25) !important;
box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3) !important;
}
.footer-col:last-child div[style*="display: flex"] a[href*="instagram"]:hover,
.footer-social-wrap a[href*="instagram"]:hover {
border-color: #e4405f !important;
background: rgba(228, 64, 95, 0.25) !important;
box-shadow: 0 4px 12px rgba(228, 64, 95, 0.3) !important;
}
.footer-col:last-child div[style*="display: flex"] a[href*="twitter"]:hover,
.footer-col:last-child div[style*="display: flex"] a[href*="x.com"]:hover,
.footer-social-wrap a[href*="twitter"]:hover,
.footer-social-wrap a[href*="x.com"]:hover {
border-color: #1da1f2 !important;
background: rgba(29, 161, 242, 0.25) !important;
box-shadow: 0 4px 12px rgba(29, 161, 242, 0.3) !important;
}
.footer-col:last-child div[style*="display: flex"] a[href*="youtube"]:hover,
.footer-social-wrap a[href*="youtube"]:hover {
border-color: #ff0000 !important;
background: rgba(255, 0, 0, 0.25) !important;
box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3) !important;
}
.footer-col:last-child div[style*="display: flex"] a[href*="pinterest"]:hover,
.footer-social-wrap a[href*="pinterest"]:hover {
border-color: #bd081c !important;
background: rgba(189, 8, 28, 0.25) !important;
box-shadow: 0 4px 12px rgba(189, 8, 28, 0.3) !important;
}
/* ============================================
8. COPYRIGHT - ELEGANT STYLING
============================================ */
/* ============================================
FOOTER SITEMAP - BOTTOM SECTION
============================================ */
.footer-sitemap {
background: rgba(0, 0, 0, 0.4);
padding: 25px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-sitemap .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.footer-sitemap h4 {
color: var(--primary-red, #c62828);
font-size: 13px;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.footer-sitemap-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px 20px;
}
.footer-sitemap a {
color: #aaa;
font-size: 12px;
text-decoration: none;
transition: color 0.3s;
}
.footer-sitemap a:hover {
color: var(--primary-red, #c62828);
}
/* ============================================
COPYRIGHT - FINAL BOTTOM
============================================ */
.copyright {
background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
padding: 25px 0;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: #888;
font-size: 13px;
position: relative;
}
.copyright::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(198, 40, 40, 0.3) 50%, transparent 100%);
}
.copyright .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.copyright i.fa-heart {
color: #c62828 !important;
animation: heartbeat 1.5s ease-in-out infinite;
margin: 0 4px;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
/* ============================================
9. RESPONSIVE DESIGN - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 1024px) {
.footer-col {
width: calc(50% - 20px);
min-width: 250px;
}
}
@media (max-width: 768px) {
footer {
padding-top: 40px;
margin-top: 40px;
}
.footer-grid {
flex-direction: column;
gap: 30px;
padding-bottom: 30px;
}
.footer-col {
width: 100%;
min-width: 100%;
}
.footer-col h3 {
font-size: 18px;
margin-bottom: 20px;
padding-bottom: 12px;
}
.footer-links li {
margin-bottom: 10px;
padding-bottom: 10px;
}
.contact-list li {
margin-bottom: 15px;
padding: 8px;
}
.copyright {
padding: 20px 0;
font-size: 12px;
}
}
@media (max-width: 480px) {
footer {
padding-top: 30px;
margin-top: 30px;
}
.footer-grid {
gap: 25px;
padding-bottom: 25px;
}
.footer-col h3 {
font-size: 16px;
margin-bottom: 15px;
}
.footer-links li a {
font-size: 13px;
}
.contact-list li {
font-size: 13px;
padding: 6px;
}
.copyright {
padding: 15px 0;
font-size: 11px;
}
}
/* ============================================
10. ACCESSIBILITY & PERFORMANCE
============================================ */
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
footer *,
footer *::before,
footer *::after {
animation: none !important;
transition: none !important;
}
}
/* Focus states for keyboard navigation */
.footer-links li a:focus,
.contact-list li a:focus,
.footer-col:last-child div[style*="display: flex"] a:focus {
outline: 2px solid var(--primary-red, #c62828);
outline-offset: 2px;
border-radius: 4px;
}
/* Print styles */
@media print {
footer {
background: #ffffff;
color: #000000;
border-top: 2px solid #000000;
}
.footer-col h3 {
color: #000000;
border-bottom: 1px solid #000000;
}
.footer-links li a,
.contact-list li a {
color: #000000;
}
}
/* ---- top-menu-social-icons.css ---- */
/* ============================================
TOP MENU SOCIAL ICONS - PROFESSIONAL STYLING
Modern, Clean, Professional Look
Desktop & Mobile Optimized
============================================ */
/* ============================================
1. TOP BAR SOCIAL ICONS - BASE STYLING
Sabhi pages par proper show — layout force
============================================ */
/* Ensure top bar row stays flex so icons show beside contact info */
.top-bar .top-flex {
display: flex !important;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
/* Helpline, email, timing — one line; horizontal scroll if text is long (e.g. Hindi) */
.top-bar .top-info {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
min-width: 0;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.top-bar .top-info span {
display: inline-flex;
align-items: center;
white-space: nowrap;
flex-shrink: 0;
margin-left: 0 !important;
}
.top-bar .social-icons {
display: flex !important;
align-items: center;
gap: 6px;
flex-wrap: wrap;
flex-shrink: 0;
}
.top-bar .social-icons::before {
content: "Follow us:";
font-weight: 600;
font-size: 13px;
color: rgba(255, 255, 255, 0.95);
margin-right: 4px;
}
/* Hide call/phone icon from social icons */
.top-bar .social-icons a[href^="tel:"],
.top-bar .social-icons a[aria-label="Call"] {
display: none !important;
}
/* Icon order: Facebook, Instagram, LinkedIn, Twitter, WhatsApp, Email, YouTube, Pinterest */
.top-bar .social-icons a[href*="facebook"] { order: 1; }
.top-bar .social-icons a[href*="instagram"] { order: 2; }
.top-bar .social-icons a[href*="linkedin"] { order: 3; }
.top-bar .social-icons a[href*="x.com"],
.top-bar .social-icons a[href*="twitter"] { order: 4; }
.top-bar .social-icons a[href*="wa.me"],
.top-bar .social-icons a[aria-label="WhatsApp"] { order: 5; }
.top-bar .social-icons a[href^="mailto:"],
.top-bar .social-icons a[aria-label="Email"] { order: 6; }
.top-bar .social-icons a[href*="youtube"] { order: 7; }
.top-bar .social-icons a[href*="pinterest"] { order: 8; }
.top-bar .social-icons a {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
margin: 0 !important;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: #ffffff;
font-size: 16px;
transition: all 0.3s ease;
text-decoration: none;
position: relative;
overflow: hidden;
backdrop-filter: blur(5px);
}
/* Hover background animation */
.top-bar .social-icons a::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: currentColor;
transform: translate(-50%, -50%);
transition: width 0.3s ease, height 0.3s ease;
opacity: 0.15;
z-index: 0;
}
.top-bar .social-icons a i {
position: relative;
z-index: 1;
transition: transform 0.3s ease;
}
/* Hover Effects */
.top-bar .social-icons a:hover {
transform: translateY(-2px) scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
border-color: currentColor;
}
.top-bar .social-icons a:hover::before {
width: 100%;
height: 100%;
}
.top-bar .social-icons a:hover i {
transform: scale(1.2);
}
/* Helpline No: label — text gradient + flash */
.top-bar .helpline-label {
font-weight: 700;
font-size: 0.95em;
letter-spacing: 0.02em;
margin-right: 6px;
background: linear-gradient(90deg, #c62828, #ff5722, #c62828);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: helpline-flash 1.5s ease-in-out infinite;
}
@keyframes helpline-flash {
0%, 100% { opacity: 1; filter: brightness(1); }
50% { opacity: 0.85; filter: brightness(1.3); }
}
/* ============================================
2. BRAND-SPECIFIC COLORS ON HOVER
============================================ */
/* Facebook */
.top-bar .social-icons a[href*="facebook"]:hover {
color: #1877f2 !important;
background: rgba(24, 119, 242, 0.15) !important;
border-color: #1877f2 !important;
}
/* Instagram */
.top-bar .social-icons a[href*="instagram"]:hover {
color: #e4405f !important;
background: rgba(228, 64, 95, 0.15) !important;
border-color: #e4405f !important;
}
/* LinkedIn — desktop: same default as other icons (white); brand on hover only */
.top-bar .social-icons a[href*="linkedin"]:hover,
.top-bar .social-icons a[aria-label="LinkedIn"]:hover {
color: #0a66c2 !important;
background: rgba(10, 102, 194, 0.15) !important;
border-color: #0a66c2 !important;
}
.top-bar .social-icons a[href*="linkedin"]:hover i,
.top-bar .social-icons a[aria-label="LinkedIn"]:hover i {
color: #0a66c2 !important;
}
/* Twitter / X */
.top-bar .social-icons a[href*="twitter"]:hover,
.top-bar .social-icons a[href*="x.com"]:hover {
color: #1da1f2 !important;
background: rgba(29, 161, 242, 0.15) !important;
border-color: #1da1f2 !important;
}
/* YouTube */
.top-bar .social-icons a[href*="youtube"]:hover {
color: #ff0000 !important;
background: rgba(255, 0, 0, 0.15) !important;
border-color: #ff0000 !important;
}
/* Pinterest */
.top-bar .social-icons a[href*="pinterest"]:hover {
color: #bd081c !important;
background: rgba(189, 8, 28, 0.15) !important;
border-color: #bd081c !important;
}
/* Call/Phone */
.top-bar .social-icons a[href^="tel:"]:hover,
.top-bar .social-icons a[aria-label="Call"]:hover {
color: #25d366 !important;
background: rgba(37, 211, 102, 0.15) !important;
border-color: #25d366 !important;
}
/* WhatsApp */
.top-bar .social-icons a[href*="wa.me"]:hover,
.top-bar .social-icons a[href*="whatsapp"]:hover,
.top-bar .social-icons a[aria-label="WhatsApp"]:hover {
color: #25d366 !important;
background: rgba(37, 211, 102, 0.2) !important;
border-color: #25d366 !important;
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4) !important;
}
/* Email */
.top-bar .social-icons a[href^="mailto:"]:hover,
.top-bar .social-icons a[aria-label="Email"]:hover {
color: #c62828 !important;
background: rgba(198, 40, 40, 0.2) !important;
border-color: #c62828 !important;
box-shadow: 0 4px 16px rgba(198, 40, 40, 0.4) !important;
}
/* ============================================
3. RESPONSIVE DESIGN - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 768px) {
.top-bar .social-icons {
gap: 3px;
flex-wrap: nowrap !important;
overflow-x: visible !important;
-webkit-overflow-scrolling: touch !important;
justify-content: center !important;
padding: 8px 10px !important;
margin-top: 0 !important; /* Reduced gap from top-info */
}
.top-bar .social-icons a {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
font-size: 14px;
flex-shrink: 0 !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.2) !important;
background: rgba(255, 255, 255, 0.1) !important;
}
}
@media (max-width: 480px) {
.top-bar {
padding: 8px 0;
font-size: 11px;
}
.top-bar .top-flex {
flex-direction: column;
gap: 10px;
align-items: center;
}
.top-bar .top-info {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 8px;
text-align: left;
font-size: 11px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.top-bar .top-info span {
margin-left: 0 !important;
white-space: nowrap;
flex-shrink: 0;
}
.top-bar .social-icons {
gap: 3px !important;
justify-content: center !important;
flex-wrap: nowrap !important;
overflow-x: visible !important;
-webkit-overflow-scrolling: touch !important;
padding: 8px 8px !important;
margin-top: 0 !important; /* Reduced gap from top-info */
}
.top-bar .social-icons a {
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
font-size: 13px;
flex-shrink: 0 !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.2) !important;
background: rgba(255, 255, 255, 0.1) !important;
}
}
/* ============================================
4. ACCESSIBILITY & FOCUS STATES
============================================ */
.top-bar .social-icons a:focus {
outline: 2px solid var(--primary-red, #c62828);
outline-offset: 2px;
border-radius: 50%;
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
.top-bar .social-icons a,
.top-bar .social-icons a::before,
.top-bar .social-icons a i {
transition: none !important;
animation: none !important;
}
.top-bar .social-icons a:hover {
transform: none;
}
}
/* ============================================
5. PRINT STYLES
============================================ */
@media print {
.top-bar .social-icons {
display: none;
}
}
/* ---- top-menu-mobile.css ---- */
/* ============================================
TOP MENU - MOBILE OPTIMIZATION
Phone & Email in Same Line
Mobile Only (max-width: 767px)
============================================ */
@media (max-width: 767px) {
/* ============================================
1. TOP BAR - MOBILE LAYOUT - PREMIUM STYLING
============================================ */
.top-bar {
padding: 2.5px 0 !important; /* Reduced by 50% from 5px to 2.5px */
font-size: 11px !important;
background: #1a1a1a !important; /* Simple dark background */
border: none !important; /* No red border */
box-shadow: none !important;
position: relative !important;
overflow: visible !important;
margin: 0 !important; /* Remove margins */
}
/* Removed animated gradient line */
.top-bar::before {
display: none !important;
}
/* Removed pattern overlay */
.top-bar::after {
display: none !important;
}
.top-bar .container {
padding: 0 8px !important; /* Reduced by 20% from 10px to 8px */
position: relative;
z-index: 1;
}
.top-bar .top-flex {
display: flex !important;
flex-direction: column !important;
gap: 2px !important; /* Reduced by 50% from 4px to 2px */
align-items: center !important;
}
/* ============================================
2. TOP INFO - PHONE & EMAIL SAME LINE
============================================ */
.top-info {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
padding: 0.3px 8px !important; /* Reduced by 60% from 0.75px to 0.3px (top/bottom) */
background: transparent !important; /* Background removed */
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
backdrop-filter: none !important;
transition: none !important;
margin: 0 !important; /* Minimum margin */
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.top-info span {
margin: 0 !important; /* Minimum margin */
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
font-size: clamp(13px, 3.2vw, 14px) !important; /* Increased font size for mobile numbers */
color: #ffffff !important;
flex-shrink: 0 !important;
padding: 0.4px 5px !important; /* Reduced by 60% from 1px to 0.4px (top/bottom) */
background: transparent !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
transition: none !important;
position: relative !important;
overflow: visible !important;
}
/* Phone number links - larger font */
.top-info span.phone-top,
.top-info span.phone-top a {
font-size: clamp(14px, 3.5vw, 15px) !important; /* Even larger for phone numbers */
font-weight: 500 !important;
}
/* Removed span::before animation */
/* Removed hover effects */
.top-info span i {
margin-right: 6px !important; /* Reduced margin */
color: #ffffff !important; /* White icon color */
font-size: clamp(11px, 2.8vw, 12px) !important; /* Smaller icon */
flex-shrink: 0 !important;
text-shadow: none !important; /* Removed text shadow */
transition: none !important; /* Removed transition */
}
/* Phone Top - Both Numbers Styled - Enhanced */
.top-info span.phone-top {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: nowrap !important;
padding: 1.6px 14px !important; /* Reduced by 60% from 4px to 1.6px (top/bottom) */
background: linear-gradient(135deg, rgba(198, 40, 40, 0.15) 0%, rgba(198, 40, 40, 0.08) 100%) !important;
border: 1px solid rgba(198, 40, 40, 0.3) !important;
margin: 0 !important; /* Minimum margin */
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.top-info span.phone-top:hover {
background: linear-gradient(135deg, rgba(198, 40, 40, 0.25) 0%, rgba(198, 40, 40, 0.15) 100%) !important;
border-color: rgba(198, 40, 40, 0.6) !important;
}
.top-info span.phone-top a {
color: #ffffff !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
padding: 3px 6px !important;
border-radius: 4px !important;
font-weight: 500 !important;
position: relative !important;
}
.top-info span.phone-top a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--primary-red, #c62828);
transition: width 0.3s ease;
}
.top-info span.phone-top a:hover {
color: #ff5252 !important;
background: rgba(198, 40, 40, 0.25) !important;
text-shadow: 0 0 8px rgba(255, 82, 82, 0.6) !important;
transform: scale(1.05);
}
.top-info span.phone-top a:hover::after {
width: 100%;
}
.top-info span.phone-top a:first-child::after {
content: ' |';
margin: 0 6px;
color: rgba(255, 255, 255, 0.4);
font-weight: 300;
}
/* Email link styling - Enhanced */
.top-info span a {
color: #ffffff !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
padding: 2px 4px !important;
border-radius: 4px !important;
position: relative !important;
}
.top-info span a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--primary-red, #c62828), #ff5252);
transition: width 0.3s ease;
}
.top-info span a:hover {
color: #ff5252 !important;
text-shadow: 0 0 8px rgba(255, 82, 82, 0.6) !important;
transform: scale(1.03);
}
.top-info span a:hover::after {
width: 100%;
}
/* Override inline margin-left styles */
.top-info span[style*="margin-left"] {
margin-left: 0 !important;
}
/* Phone & Email - Force Same Line (first two spans) */
.top-info span:nth-child(1),
.top-info span:nth-child(2) {
display: inline-flex !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
/* Clock/Time - Hide in mobile view (third span) */
.top-info span:nth-child(3) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
}
/* Hide spans with clock icon */
.top-info span:has(i.fa-clock) {
display: none !important;
}
/* Hide clock by content matching */
.top-info span:contains("10:00 AM"),
.top-info span:contains("05:00 PM") {
display: none !important;
}
/* Hide Email Address in Mobile View */
.top-info span:has(i.fa-envelope),
.top-info span:has(a[href^="mailto:"]),
.top-info span:nth-child(2) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
}
/* Also hide email link directly */
.top-info span a[href^="mailto:"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
}
/* ============================================
3. SOCIAL ICONS - MOBILE STYLING
============================================ */
.social-icons {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 3px !important;
flex-wrap: nowrap !important;
width: 100% !important;
padding: 1px 6px !important; /* Reduced by 50% from 2px to 1px */
background: #000000 !important; /* Black background like image */
border-radius: 0 !important;
border: none !important; /* No red border */
box-shadow: none !important;
backdrop-filter: none !important;
overflow-x: visible !important;
-webkit-overflow-scrolling: touch !important;
margin-top: 0 !important;
margin-bottom: 0 !important; /* Remove bottom margin */
}
.social-icons a {
width: 26px !important; /* Reduced size */
height: 26px !important;
min-width: 26px !important;
min-height: 26px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
color: #ffffff !important; /* White icon color */
font-size: 14px !important; /* Increased icon size for better visibility */
transition: none !important; /* Removed transition */
text-decoration: none !important;
position: relative !important;
overflow: visible !important;
box-shadow: none !important; /* Removed shadow */
flex-shrink: 0 !important;
border: 1.5px solid currentColor !important; /* Border matches icon color */
background: #ffffff !important; /* White background for all circles */
}
/* Default icon color - will be overridden by specific brand colors */
.social-icons a i {
color: #333333 !important; /* Default, will be overridden */
}
/* All circles have white background - Borders match icon colors */
/* Call/Phone - Green Icon */
.social-icons a[href^="tel:"],
.social-icons a[aria-label="Call"] {
background: #ffffff !important; /* White background */
border-color: #25d366 !important; /* Green border matching icon */
}
.social-icons a[href^="tel:"] i,
.social-icons a[aria-label="Call"] i {
color: #25d366 !important; /* Green icon color */
}
/* WhatsApp - Green Icon */
.social-icons a[href*="wa.me"],
.social-icons a[href*="whatsapp"],
.social-icons a[aria-label="WhatsApp"] {
background: #ffffff !important; /* White background */
border-color: #25d366 !important; /* Green border matching icon */
}
.social-icons a[href*="wa.me"] i,
.social-icons a[href*="whatsapp"] i,
.social-icons a[aria-label="WhatsApp"] i {
color: #25d366 !important; /* Green icon color */
}
/* Email - Red Icon */
.social-icons a[href^="mailto:"],
.social-icons a[aria-label="Email"] {
background: #ffffff !important; /* White background */
border-color: #c62828 !important; /* Red border matching icon */
}
.social-icons a[href^="mailto:"] i,
.social-icons a[aria-label="Email"] i {
color: #c62828 !important; /* Red icon color */
}
/* Facebook - Blue Icon */
.social-icons a[href*="facebook"] {
background: #ffffff !important; /* White background */
border-color: #1877f2 !important; /* Blue border matching icon */
}
.social-icons a[href*="facebook"] i {
color: #1877f2 !important; /* Blue icon color */
}
/* Instagram - Gradient Border with Pink Icon */
.social-icons a[href*="instagram"] {
background: #ffffff !important; /* White background */
border: 1.5px solid transparent !important; /* Transparent base for gradient */
position: relative !important;
}
.social-icons a[href*="instagram"]::before {
content: '' !important;
position: absolute !important;
inset: -1.5px !important;
border-radius: 50% !important;
padding: 1.5px !important;
background: linear-gradient(135deg, #fd1d1d 0%, #833ab4 50%, #fcb045 100%) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
mask-composite: exclude !important;
z-index: -1 !important;
}
.social-icons a[href*="instagram"] i {
color: #e4405f !important; /* Pink icon color */
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: #e4405f !important;
background-clip: unset !important;
}
/* LinkedIn - Brand Blue */
.social-icons a[href*="linkedin"],
.social-icons a[aria-label="LinkedIn"] {
background: #ffffff !important;
border-color: #0a66c2 !important;
}
.social-icons a[href*="linkedin"] i,
.social-icons a[aria-label="LinkedIn"] i,
.social-icons a i.fa-linkedin-in,
.social-icons a i.fa-linkedin {
color: #0a66c2 !important;
}
/* Twitter/X - Light Blue Icon */
.social-icons a[href*="twitter"],
.social-icons a[href*="x.com"] {
background: #ffffff !important; /* White background */
border-color: #1da1f2 !important; /* Light blue border matching icon */
}
.social-icons a[href*="twitter"] i,
.social-icons a[href*="x.com"] i {
color: #1da1f2 !important; /* Light blue icon color */
}
/* YouTube - Red Icon */
.social-icons a[href*="youtube"] {
background: #ffffff !important; /* White background */
border-color: #ff0000 !important; /* Red border matching icon */
}
.social-icons a[href*="youtube"] i {
color: #ff0000 !important; /* Red icon color */
}
/* Pinterest - Red Icon */
.social-icons a[href*="pinterest"] {
background: #ffffff !important; /* White background */
border-color: #bd081c !important; /* Red border matching icon */
}
.social-icons a[href*="pinterest"] i {
color: #bd081c !important; /* Red icon color */
}
/* Removed ::before and ::after animations */
.social-icons a::before,
.social-icons a::after {
display: none !important;
}
.social-icons a i {
position: relative;
z-index: 1;
transition: none !important; /* Removed transition */
filter: none !important; /* Removed filter */
color: #ffffff !important; /* White icon color inside circle */
font-size: inherit !important; /* Inherit from parent for proper sizing */
}
/* Ensure Instagram icon is white (override gradient) */
.social-icons a[href*="instagram"] i {
color: #ffffff !important; /* White icon color */
background: none !important; /* Remove gradient background from icon */
-webkit-background-clip: unset !important;
-webkit-text-fill-color: #ffffff !important;
background-clip: unset !important;
}
/* Simplified hover - just slight scale */
.social-icons a:hover {
transform: scale(1.1) !important;
opacity: 0.9 !important;
}
/* Social Media Specific Colors */
.social-icons a[href*="facebook"]:hover {
color: #1877f2 !important;
background: rgba(24, 119, 242, 0.15) !important;
border-color: #1877f2 !important;
}
.social-icons a[href*="instagram"]:hover {
color: #e4405f !important;
background: rgba(228, 64, 95, 0.15) !important;
border-color: #e4405f !important;
}
.social-icons a[href*="linkedin"]:hover {
color: #0a66c2 !important;
background: rgba(10, 102, 194, 0.15) !important;
border-color: #0a66c2 !important;
}
.social-icons a[href*="twitter"]:hover,
.social-icons a[href*="x.com"]:hover {
color: #1da1f2 !important;
background: rgba(29, 161, 242, 0.15) !important;
border-color: #1da1f2 !important;
}
.social-icons a[href*="youtube"]:hover {
color: #ff0000 !important;
background: rgba(255, 0, 0, 0.15) !important;
border-color: #ff0000 !important;
}
.social-icons a[href*="pinterest"]:hover {
color: #bd081c !important;
background: rgba(189, 8, 28, 0.15) !important;
border-color: #bd081c !important;
}
/* Call/Phone */
.social-icons a[href^="tel:"]:hover,
.social-icons a[aria-label="Call"]:hover {
color: #25d366 !important;
background: rgba(37, 211, 102, 0.2) !important;
border-color: #25d366 !important;
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.5), 0 0 20px #25d366 !important;
}
/* WhatsApp */
.social-icons a[href*="wa.me"]:hover,
.social-icons a[href*="whatsapp"]:hover,
.social-icons a[aria-label="WhatsApp"]:hover {
color: #25d366 !important;
background: rgba(37, 211, 102, 0.25) !important;
border-color: #25d366 !important;
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.6), 0 0 25px #25d366 !important;
}
/* Email */
.social-icons a[href^="mailto:"]:hover,
.social-icons a[aria-label="Email"]:hover {
color: #c62828 !important;
background: rgba(198, 40, 40, 0.25) !important;
border-color: #c62828 !important;
box-shadow: 0 8px 20px rgba(198, 40, 40, 0.5), 0 0 25px #c62828 !important;
}
}
/* ============================================
4. VERY SMALL SCREENS (max-width: 480px)
============================================ */
@media (max-width: 480px) {
.top-bar {
padding: 2.5px 0 !important; /* Reduced by 50% from 5px to 2.5px */
font-size: 10px !important;
margin: 0 !important; /* Remove margins */
}
.top-bar .top-flex {
gap: 2px !important; /* Reduced by 50% from 4px to 2px */
}
.top-info {
gap: 6px !important;
font-size: clamp(9px, 2.2vw, 10px) !important;
padding: 0.3px 8px !important; /* Reduced by 60% from 0.75px to 0.3px (top/bottom) */
background: transparent !important; /* Background removed */
margin: 0 !important; /* Minimum margin */
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.top-info span {
font-size: clamp(9px, 2.2vw, 10px) !important;
padding: 0.4px 5px !important; /* Reduced by 60% from 1px to 0.4px (top/bottom) */
}
.top-info span i {
font-size: clamp(10px, 2.5vw, 11px) !important;
margin-right: 4px !important;
}
.social-icons {
gap: 2px !important; /* Reduced gap */
flex-wrap: nowrap !important;
overflow-x: visible !important;
-webkit-overflow-scrolling: touch !important;
justify-content: center !important;
padding: 0.5px 6px !important; /* Reduced by 50% from 1px to 0.5px */
background: #000000 !important; /* Black background like image */
margin-top: 0 !important;
margin-bottom: 0 !important; /* Remove bottom margin */
}
.social-icons a {
width: 24px !important; /* Further reduced for small screens */
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
font-size: 13px !important; /* Increased icon size for better visibility */
flex-shrink: 0 !important;
border: 1.5px solid currentColor !important; /* Border matches icon color */
background: #ffffff !important; /* White background for all circles */
}
/* Default icon color for small screens - will be overridden */
.social-icons a i {
color: #333333 !important; /* Default, will be overridden */
}
/* All circles white - Borders match icon colors (Small Screen) */
/* Call/Phone - Green Icon */
.social-icons a[href^="tel:"],
.social-icons a[aria-label="Call"] {
background: #ffffff !important; /* White background */
border-color: #25d366 !important; /* Green border matching icon */
}
.social-icons a[href^="tel:"] i,
.social-icons a[aria-label="Call"] i {
color: #25d366 !important; /* Green icon color */
}
/* WhatsApp - Green Icon */
.social-icons a[href*="wa.me"],
.social-icons a[href*="whatsapp"],
.social-icons a[aria-label="WhatsApp"] {
background: #ffffff !important; /* White background */
border-color: #25d366 !important; /* Green border matching icon */
}
.social-icons a[href*="wa.me"] i,
.social-icons a[href*="whatsapp"] i,
.social-icons a[aria-label="WhatsApp"] i {
color: #25d366 !important; /* Green icon color */
}
/* Email - Red Icon */
.social-icons a[href^="mailto:"],
.social-icons a[aria-label="Email"] {
background: #ffffff !important; /* White background */
border-color: #c62828 !important; /* Red border matching icon */
}
.social-icons a[href^="mailto:"] i,
.social-icons a[aria-label="Email"] i {
color: #c62828 !important; /* Red icon color */
}
/* Facebook - Blue Icon */
.social-icons a[href*="facebook"] {
background: #ffffff !important; /* White background */
border-color: #1877f2 !important; /* Blue border matching icon */
}
.social-icons a[href*="facebook"] i {
color: #1877f2 !important; /* Blue icon color */
}
/* Instagram - Gradient Border with Pink Icon */
.social-icons a[href*="instagram"] {
background: #ffffff !important; /* White background */
border: 1.5px solid transparent !important; /* Transparent base for gradient */
position: relative !important;
}
.social-icons a[href*="instagram"]::before {
content: '' !important;
position: absolute !important;
inset: -1.5px !important;
border-radius: 50% !important;
padding: 1.5px !important;
background: linear-gradient(135deg, #fd1d1d 0%, #833ab4 50%, #fcb045 100%) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
mask-composite: exclude !important;
z-index: -1 !important;
}
.social-icons a[href*="instagram"] i {
color: #e4405f !important; /* Pink icon color */
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: #e4405f !important;
background-clip: unset !important;
}
/* LinkedIn - Brand Blue */
.social-icons a[href*="linkedin"],
.social-icons a[aria-label="LinkedIn"] {
background: #ffffff !important;
border-color: #0a66c2 !important;
}
.social-icons a[href*="linkedin"] i,
.social-icons a[aria-label="LinkedIn"] i,
.social-icons a i.fa-linkedin-in,
.social-icons a i.fa-linkedin {
color: #0a66c2 !important;
}
/* Twitter/X - Light Blue Icon */
.social-icons a[href*="twitter"],
.social-icons a[href*="x.com"] {
background: #ffffff !important; /* White background */
border-color: #1da1f2 !important; /* Light blue border matching icon */
}
.social-icons a[href*="twitter"] i,
.social-icons a[href*="x.com"] i {
color: #1da1f2 !important; /* Light blue icon color */
}
/* YouTube - Red Icon */
.social-icons a[href*="youtube"] {
background: #ffffff !important; /* White background */
border-color: #ff0000 !important; /* Red border matching icon */
}
.social-icons a[href*="youtube"] i {
color: #ff0000 !important; /* Red icon color */
}
/* Pinterest - Red Icon */
.social-icons a[href*="pinterest"] {
background: #ffffff !important; /* White background */
border-color: #bd081c !important; /* Red border matching icon */
}
.social-icons a[href*="pinterest"] i {
color: #bd081c !important; /* Red icon color */
}
}
/* ---- mobile-notification-menu.css ---- */
/* ============================================
NOTIFICATION SECTION (MARQUEE BOX)
Base styles - matches home page on all pages
============================================ */
.marquee-box {
background: lightyellow;
color: #222;
display: flex;
width: 100%;
align-items: stretch;
}
.marquee-title {
background: #c62828;
color: #ffffff;
padding: 8px 20px;
font-weight: bold;
font-size: 14px;
z-index: 2;
flex-shrink: 0;
display: flex;
align-items: center;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.marquee-content {
padding: 0 8px;
flex-grow: 1;
background: lightyellow;
color: #1a1a1a;
font-weight: 600;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
overflow: hidden;
position: relative;
min-width: 0;
height: 40px;
min-height: 40px;
max-height: 40px;
box-sizing: border-box;
}
/* Clip scrolling text; pause sits beside track so it never overlaps or hangs out */
.marquee-track {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
height: 100%;
display: flex;
align-items: center;
}
/* Accessible ticker — replaces deprecated