@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap'); /* ============================================================= CSS VARIABLES ============================================================= */ :root { --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --primary-color: #667eea; --secondary-color: #764ba2; --accent-color: #f5576c; --dark: #1a1a2e; --white: #ffffff; --light-bg: #f8f9ff; --font-primary: 'Sora', sans-serif; --font-heading: 'Sora', sans-serif; --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); --shadow-sm: 0 2px 8px rgba(0,0,0,.08); --shadow-md: 0 4px 20px rgba(0,0,0,.12); --shadow-lg: 0 8px 32px rgba(0,0,0,.16); --shadow-xl: 0 12px 48px rgba(0,0,0,.20); --nav-height: 80px; /* * TOP-BAR HEIGHT used only for desktop body offset. * The top bar sits at top:20px and is ~46px tall → ~66px total footprint. * We expose this so the hero/first-section can push down correctly. */ --topbar-footprint: 66px; } /* ============================================================= RESET & BASE ============================================================= */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior: smooth; /* * On desktop the nav sits below the floating top bar, so anchor * targets need extra clearance. JS toggles .topbar-visible on * (see script section). Fallback: full offset. */ scroll-padding-top: calc(var(--nav-height) + var(--topbar-footprint)); } html.topbar-hidden { scroll-padding-top: var(--nav-height); } body { font-family: var(--font-primary); overflow-x: hidden; color: #333; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button { font-family: inherit; cursor: pointer; border: none; background: none; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } /* ============================================================= TOP ACTION BAR — desktop only, floats above everything ============================================================= */ .top-action-bar { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1003; /* above navbar (1000) */ display: flex; gap: 15px; align-items: center; transition: var(--transition-smooth); pointer-events: none; /* children re-enable below */ } .top-action-bar > * { pointer-events: auto; } /* Slide the bar up when page is scrolled */ .top-action-bar.scrolled { top: -120px; } /* ── Contact pill ── */ .contact-floating { background: rgba(255,255,255,.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.2); padding: 10px 20px; border-radius: 50px; display: flex; align-items: center; gap: 15px; box-shadow: var(--shadow-md); } .contact-floating a { color: var(--white); font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: var(--transition-smooth); } .contact-floating a:hover { transform: translateY(-2px); color: #f0f0f0; } /* ── WhatsApp button ── */ .whatsapp-float { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); padding: 12px 24px; border-radius: 50px; color: white; font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: 8px; box-shadow: 0 8px 24px rgba(37,211,102,.3); transition: var(--transition-smooth); } .whatsapp-float:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 32px rgba(37,211,102,.4); } /* ── Accreditation badges ── */ .accreditation-badges { background: rgba(255,255,255,.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.2); padding: 8px 16px; border-radius: 50px; display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow-md); } .accreditation-badges img { height: 32px; filter: brightness(0) invert(1); transition: var(--transition-smooth); } .accreditation-badges img:hover { transform: scale(1.15) rotate(5deg); filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255,255,255,.5)); } /* ============================================================= MAIN NAVBAR KEY FIX: always top:0. On desktop the top-bar floats OVER the page (z-index 1002) and the navbar sits UNDER it (z-index 1000). We compensate with body padding-top (see below), NOT by pushing the navbar down — that caused the collision. ============================================================= */ .main-navbar { position: fixed; top: calc(var(--topbar-footprint) + 10px); /* ← FIXED: was var(--topbar-footprint) */ left: 0; right: 0; z-index: 1000; background: rgba(255,255,255,.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: var(--transition-smooth); border-bottom: 1px solid rgba(102,126,234,.1); } .main-navbar.scrolled { top: 0; background: rgba(255,255,255,.98); box-shadow: 0 4px 20px rgba(0,0,0,.08); } /* * Desktop: push page content below BOTH bars. * hero-banner or the first full-bleed section should negate this * if it needs to sit flush. Override with margin-top: calc(-1 * ...) on * full-bleed sections, or simply apply to a wrapper div. * * We set this on body here; you can move it to a .page-content wrapper. */ body { padding-top: calc(var(--nav-height) + var(--topbar-footprint)); } /* First full-bleed section (hero) pulls back up */ .hero-banner, .page-hero { margin-top: calc(-1 * (var(--nav-height) + var(--topbar-footprint))); } /* ============================================================= NAVBAR CONTAINER ============================================================= */ .navbar-container { max-width: 1400px; margin: 0 auto; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); gap: 40px; } /* ============================================================= LOGO ============================================================= */ .navbar-logo-wrapper { display: flex; align-items: center; gap: 14px; text-decoration: none; transition: var(--transition-smooth); flex-shrink: 0; } .logo-initials { width: auto; height: 52px; /* control height, let width scale naturally */ border-radius: 0; /* remove box clipping */ background: transparent; box-shadow: none; /* remove the box shadow around image */ object-fit: contain; transition: var(--transition-smooth); flex-shrink: 0; } .logo-initials::before { display: none; } /* .navbar-logo-wrapper:hover .logo-initials { transform: translateY(-3px) rotate(-2deg); box-shadow: 0 8px 25px rgba(102,126,234,.45); } */ .navbar-logo-wrapper:hover .logo-initials::before { opacity: 1; } .logo-text-wrapper { display: flex; flex-direction: column; gap: 3px; } .logo-main-text { font-family: var(--font-heading); font-size: .90rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; background: linear-gradient(135deg, #1a1a2e 0%, #667eea 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .logo-sub-text { font-size: .72rem; font-weight: 600; color: #667eea; letter-spacing: .08em; text-transform: uppercase; } /* Scrolled logo shrink */ /* Scrolled state */ .main-navbar.scrolled .logo-initials { height: 44px; } /* .main-navbar.scrolled .logo-initials { width: 60px; height: 50px; font-size: .85rem; } */ .main-navbar.scrolled .logo-main-text { font-size: .88rem; } .main-navbar.scrolled .logo-sub-text { font-size: .60rem; } /* ============================================================= DESKTOP NAV MENU ============================================================= */ .navbar-menu { display: flex; align-items: center; gap: 4px; margin-left: auto; } /* ── KEY FIX: position:relative on every nav-item ── Without this, dropdown's position:absolute climbs to .navbar-container, so ALL dropdowns share the same horizontal anchor and land in the wrong place. */ .nav-item { position: relative; /* ← THE dropdown anchor */ } .nav-link { color: #2d3748; font-family: var(--font-heading); font-weight: 600; font-size: .92rem; padding: 10px 11px; display: inline-flex; align-items: center; gap: 4px; border-radius: 10px; transition: var(--transition-smooth); background: transparent; white-space: nowrap; cursor: pointer; } .nav-link:hover, .nav-link:focus-visible { background: rgba(102,126,234,.08); color: #667eea; transform: translateY(-1px); outline: none; } .nav-link.active { background: linear-gradient(135deg, rgba(102,126,234,.1), rgba(118,75,162,.1)); color: #667eea; } .nav-link.active::after { content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: var(--primary-gradient); border-radius: 10px; } .nav-link i { font-size: .75rem; transition: transform .3s ease; } .has-dropdown:hover .nav-link i, .has-dropdown:focus-within .nav-link i { transform: rotate(180deg); } /* ============================================================= DROPDOWN MENUS position:absolute now correctly anchors to .nav-item (relative) not to .navbar-container, so each menu opens under its own button. ============================================================= */ .dropdown-menu { position: absolute; top: calc(100% + 10px); /* just below the nav-item edge */ left: 50%; transform: translateX(-50%) translateY(-8px); background: #fff; border-radius: 16px; padding: 10px; min-width: 230px; opacity: 0; visibility: hidden; transition: var(--transition-smooth); box-shadow: 0 12px 40px rgba(0,0,0,.12); border: 1px solid rgba(102,126,234,.15); z-index: 999; /* Prevent gap between button and menu from collapsing hover */ pointer-events: none; } .has-dropdown:hover .dropdown-menu, .has-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; } /* Extra hit area so mouse doesn't lose hover while crossing the gap */ .has-dropdown::after { content: ''; position: absolute; bottom: -10px; left: 0; right: 0; height: 10px; } .dropdown-menu a { display: flex; align-items: center; gap: 10px; padding: 11px 16px; color: #2d3748; font-weight: 500; font-size: .9rem; border-radius: 10px; transition: var(--transition-smooth); } .dropdown-menu a:hover, .dropdown-menu a:focus-visible { background: linear-gradient(135deg, rgba(102,126,234,.1), rgba(118,75,162,.08)); color: #667eea; padding-left: 22px; outline: none; } /* ============================================================= APPLY NOW BUTTON ============================================================= */ .apply-now-btn { background: var(--primary-gradient); color: #fff; padding: 13px 30px; border-radius: 50px; font-family: var(--font-heading); font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition-smooth); box-shadow: 0 6px 20px rgba(102,126,234,.35); flex-shrink: 0; position: relative; overflow: hidden; white-space: nowrap; } .apply-now-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.25), transparent); opacity: 0; transition: opacity .3s ease; } .apply-now-btn:hover, .apply-now-btn:focus-visible { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 30px rgba(102,126,234,.5); outline: none; } .apply-now-btn:hover::before { opacity: 1; } /* ============================================================= MOBILE HAMBURGER TOGGLE ============================================================= */ .mobile-toggle { display: none; /* shown only in mobile breakpoint below */ background: var(--primary-gradient); width: 50px; height: 50px; border-radius: 14px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; transition: var(--transition-smooth); border: none; box-shadow: 0 4px 15px rgba(102,126,234,.3); flex-shrink: 0; } .mobile-toggle span { width: 26px; height: 3px; background: #fff; border-radius: 10px; transition: var(--transition-smooth); display: block; } .mobile-toggle:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(102,126,234,.4); } .mobile-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .mobile-toggle.active span:nth-child(2) { opacity: 0; transform: translateX(-10px); } .mobile-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ============================================================= MOBILE OVERLAY BACKDROP ============================================================= */ .mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 2000; opacity: 0; visibility: hidden; transition: var(--transition-smooth); } .mobile-overlay.active { opacity: 1; visibility: visible; } /* ============================================================= MOBILE SLIDE-OUT MENU ============================================================= */ .mobile-menu { position: fixed; top: 0; right: -100%; width: 100%; max-width: 390px; height: 100vh; background: linear-gradient(180deg, #fff 0%, #f8f9ff 100%); z-index: 2001; transition: right .4s cubic-bezier(.4,0,.2,1); overflow-y: auto; display: flex; flex-direction: column; box-shadow: -4px 0 30px rgba(0,0,0,.15); } .mobile-menu.active { right: 0; } /* ── Mobile header ── */ .mobile-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 2px solid rgba(102,126,234,.1); position: sticky; top: 0; background: #fff; z-index: 10; box-shadow: 0 2px 10px rgba(0,0,0,.05); gap: 12px; } .mobile-logo-wrapper { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .mobile-logo-initials { width: auto; height: 44px; border-radius: 0; background: transparent; box-shadow: none; object-fit: contain; flex-shrink: 0; } .mobile-logo-text { display: flex; flex-direction: column; gap: 2px; } .mobile-logo-text span:first-child { font-family: var(--font-heading); font-size: .9rem; font-weight: 800; color: #1a1a2e; line-height: 1; background: linear-gradient(135deg, #1a1a2e 0%, #667eea 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mobile-logo-text span:last-child { font-size: .62rem; font-weight: 600; color: #667eea; text-transform: uppercase; letter-spacing: .05em; } /* ── Mobile accreditation badges (replaces desktop top bar on mobile) ── */ .mobile-badges { display: flex; gap: 8px; align-items: center; flex: 1; justify-content: center; } .mobile-badges img { height: 26px; /* keep original logo colors — don't invert like the hero version */ filter: none; opacity: .8; object-fit: contain; } /* ── Mobile close button ── */ .mobile-close { background: linear-gradient(135deg, #ff6b6b, #ee5a6f); width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 1.3rem; transition: var(--transition-smooth); border: none; box-shadow: 0 4px 15px rgba(255,107,107,.3); flex-shrink: 0; } .mobile-close:hover { transform: rotate(90deg) scale(1.05); box-shadow: 0 6px 20px rgba(255,107,107,.4); } /* ── Mobile nav items ── */ .mobile-nav-items { flex: 1; padding: 20px 16px; } .mobile-nav-item { margin-bottom: 8px; } .mobile-nav-item > a, .mobile-nav-toggle { display: block; width: 100%; padding: 15px 18px; color: #1a1a2e; background: #fff; border-radius: 14px; font-size: 1rem; font-weight: 600; text-align: left; transition: var(--transition-smooth); border: 2px solid rgba(102,126,234,.1); box-shadow: 0 2px 8px rgba(0,0,0,.04); } .mobile-nav-item > a:hover, .mobile-nav-item > a:focus-visible, .mobile-nav-toggle:hover, .mobile-nav-toggle:focus-visible { background: linear-gradient(135deg, rgba(102,126,234,.08), rgba(118,75,162,.06)); border-color: rgba(102,126,234,.3); transform: translateX(5px); box-shadow: 0 4px 12px rgba(102,126,234,.15); outline: none; } .mobile-nav-toggle { display: flex; justify-content: space-between; align-items: center; } .mobile-nav-toggle i { font-size: .85rem; color: #667eea; transition: transform .3s ease; } .mobile-nav-item.open .mobile-nav-toggle { background: linear-gradient(135deg, rgba(102,126,234,.12), rgba(118,75,162,.08)); border-color: rgba(102,126,234,.4); color: #667eea; } .mobile-nav-item.open .mobile-nav-toggle i { transform: rotate(180deg); } /* ── Mobile submenu ── */ .mobile-submenu { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1); margin-top: 6px; padding-left: 8px; } .mobile-nav-item.open .mobile-submenu { max-height: 600px; } .mobile-submenu a { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 36px; color: #2d3748; font-size: .93rem; font-weight: 500; border-radius: 12px; transition: var(--transition-smooth); margin-bottom: 5px; position: relative; background: rgba(102,126,234,.03); } .mobile-submenu a::before { content: '→'; position: absolute; left: 16px; font-weight: 700; color: #667eea; opacity: 0; transform: translateX(-5px); transition: all .3s ease; } .mobile-submenu a:hover, .mobile-submenu a:focus-visible { background: rgba(102,126,234,.1); color: #667eea; padding-left: 42px; outline: none; } .mobile-submenu a:hover::before, .mobile-submenu a:focus-visible::before { opacity: 1; transform: translateX(0); } /* ── Mobile footer ── */ .mobile-footer { padding: 20px 16px; border-top: 2px solid rgba(102,126,234,.1); background: #fff; } .mobile-apply-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--primary-gradient); color: #fff; padding: 17px; border-radius: 16px; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; text-align: center; margin-bottom: 16px; transition: var(--transition-smooth); box-shadow: 0 6px 20px rgba(102,126,234,.35); position: relative; overflow: hidden; } .mobile-apply-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.25), transparent); opacity: 0; transition: opacity .3s ease; } .mobile-apply-btn:hover, .mobile-apply-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(102,126,234,.45); outline: none; } .mobile-apply-btn:hover::before { opacity: 1; } .mobile-contact { display: flex; flex-direction: column; gap: 10px; } .mobile-contact a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; color: #2d3748; background: #fff; border-radius: 12px; font-size: .93rem; font-weight: 600; transition: var(--transition-smooth); border: 2px solid rgba(102,126,234,.1); box-shadow: 0 2px 8px rgba(0,0,0,.04); } .mobile-contact a i { font-size: 1.1rem; width: 22px; text-align: center; color: #667eea; } .mobile-contact a:nth-child(3) i { color: #25D366; } /* WhatsApp green */ .mobile-contact a:hover, .mobile-contact a:focus-visible { background: linear-gradient(135deg, rgba(102,126,234,.08), rgba(118,75,162,.06)); border-color: rgba(102,126,234,.3); transform: translateX(4px); box-shadow: 0 4px 12px rgba(102,126,234,.15); outline: none; } /* ============================================================= RESPONSIVE BREAKPOINTS ============================================================= */ /* ── Tablet / Mobile (≤ 991px) ── */ @media (max-width: 991px) { /* * TOP BAR: hidden on mobile — its info lives in the slide-out menu. * No content is lost: phone links are in .mobile-contact, * badges are in .mobile-badges inside .mobile-header. */ .top-action-bar { display: none !important; } /* * Navbar needs no offset because the top bar is gone. * It stays at top:0 (already set above) which is correct. */ .main-navbar { top:0; background: rgba(255,255,255,.98); box-shadow: 0 2px 10px rgba(0,0,0,.08); } /* Reduce body padding — no top bar offset needed */ body { padding-top: var(--nav-height); } .hero-banner, .page-hero { margin-top: calc(-1 * var(--nav-height)); } /* Fix scroll-padding for mobile */ html { scroll-padding-top: var(--nav-height); } /* Show hamburger, hide desktop nav & apply button */ .mobile-toggle { display: flex; } .navbar-menu { display: none; } .apply-now-btn { display: none; } .navbar-container { padding: 0 20px; height: 70px; } --nav-height: 70px; /* override for mobile height */ .logo-initials { width: 68px; height: 48px; font-size: .75rem; } .logo-main-text { font-size: .85rem; } .logo-sub-text { font-size: .65rem; } } /* ── Small mobile (≤ 576px) ── */ @media (max-width: 576px) { .mobile-menu { max-width: 100%; } .logo-initials { width: 64px; height: 44px; font-size: .65rem; } .logo-main-text { font-size: .75rem !important; } .navbar-container { padding: 0 10px; } } /* ========================= HERO BANNER ========================= */ /* ========================= HERO VIDEO SECTION - PREMIUM VERSION ========================= */ .hero-banner { position: relative; height: 95vh; overflow: hidden; background-color: #000; } .hero-video-container { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover; scale: 1; /* Premium Visual Enhancements */ filter: contrast(1.08) saturate(1.12) brightness(1.02); image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; /* Hardware Acceleration for Smooth Playback */ transform: translate(-50%, -50%) translateZ(0); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Film Grain Overlay for Premium Cinematic Feel (Optional) */ .hero-video-container::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; mix-blend-mode: overlay; opacity: 0.15; } /* Enhanced Gradient Overlay with Vignette Effect */ .hero-overlay { position: absolute; inset: 0; background: /* Vignette effect */ radial-gradient( ellipse at center, rgba(8, 18, 38, 0.3) 0%, rgba(8, 18, 38, 0.7) 70%, rgba(8, 18, 38, 0.85) 100% ), /* Top-down gradient */ linear-gradient( 180deg, rgba(8, 18, 38, 0.75) 0%, rgba(12, 30, 60, 0.45) 40%, rgba(12, 30, 60, 0.55) 60%, rgba(8, 18, 38, 0.75) 100% ); z-index: 2; } /* Hero Content */ .hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 3; padding: 0px 20px; text-align: center; } .hero-title { padding-top: 150px; font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 5rem); font-weight: 800; color: var(--white); line-height: 1.1; margin-bottom: 25px; max-width: 1100px; /* Premium Text Effects */ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3), 0 16px 32px rgba(0, 0, 0, 0.2); /* Subtle text sharpening */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; animation: fadeInUp 1s ease 0.2s both; } .hero-subtitle { font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 400; color: rgba(255, 255, 255, 0.95); max-width: 720px; line-height: 1.8; margin-bottom: 40px; /* Premium text shadow */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.15); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; animation: fadeInUp 1s ease 0.4s both; } .hero-cta { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: center; animation: fadeInUp 1s ease 0.6s both; } .cta-primary { background: var(--white); color: var(--primary-color); padding: 18px 40px; border-radius: 50px; font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: center; gap: 10px; transition: var(--transition-smooth); /* Premium shadow */ box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2), 0 10px 30px rgba(255, 255, 255, 0.15), 0 20px 50px rgba(0, 0, 0, 0.3); } .cta-primary:hover, .cta-primary:focus-visible { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px rgba(255, 255, 255, 0.25), 0 15px 40px rgba(255, 255, 255, 0.2), 0 25px 60px rgba(0, 0, 0, 0.35); outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } .cta-secondary { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid var(--white); color: var(--white); padding: 16px 40px; border-radius: 50px; font-weight: 700; font-size: 1.05rem; transition: var(--transition-smooth); /* Premium glass effect */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .cta-secondary:hover, .cta-secondary:focus-visible { background: var(--white); color: var(--primary-color); transform: translateY(-5px) scale(1.02); outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3), 0 15px 40px rgba(0, 0, 0, 0.3); } /* Hero Stats */ .hero-stats { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); display: flex; gap: 60px; z-index: 3; flex-wrap: wrap; justify-content: center; padding: 0 20px; } .hero-banner .stat-item { text-align: center; color: var(--white); } .hero-banner .stat-number { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; display: block; line-height: 1; margin-bottom: 8px; /* Premium text shadow */ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 6px 12px rgba(0, 0, 0, 0.3), 0 12px 24px rgba(0, 0, 0, 0.2); } .hero-banner .stat-label { font-size: 0.9rem; font-weight: 500; opacity: 0.95; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.2); } /* Scroll Indicator */ .scroll-indicator { position: absolute; bottom: 40px; left: 40px; z-index: 4; animation: bounce 2s infinite; color: var(--white); font-size: 2rem; transition: var(--transition-smooth); } .scroll-indicator:hover, .scroll-indicator:focus-visible { transform: scale(1.2); outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 5px; border-radius: 50%; } .scroll-indicator i { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3)); } /* ========================= ANIMATIONS ========================= */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } /* ========================= RESPONSIVE DESIGN ========================= */ @media (max-width: 1200px) { .hero-stats { gap: 40px; } .hero-banner .stat-number { font-size: 2rem; } } @media (max-width: 991px) { :root { --nav-height: 70px; --topbar-height: 38px; } .top-action-bar { top: 15px; gap: 10px; flex-wrap: wrap; max-width: calc(100% - 40px); } .contact-floating { padding: 8px 16px; gap: 10px; } .contact-floating a { font-size: 0.8rem; } .whatsapp-float { padding: 10px 20px; font-size: 0.85rem; } .accreditation-badges { padding: 6px 12px; } .accreditation-badges img { height: 26px; } .navbar-menu, .apply-now-btn { display: none; } .mobile-toggle { display: flex; } .hero-stats { gap: 30px; bottom: 80px; } .hero-banner .stat-number { font-size: 1.75rem; } .hero-banner .stat-label { font-size: 0.8rem; } } @media (max-width: 768px) { .top-action-bar { flex-direction: column; gap: 8px; } .hero-cta { flex-direction: column; width: 100%; max-width: 320px; } .cta-primary, .cta-secondary { width: 100%; justify-content: center; } .hero-stats { flex-wrap: wrap; gap: 20px; bottom: 100px; } /* Reduce film grain on mobile for performance */ .hero-video-container::before { opacity: 0.08; } } @media (max-width: 576px) { :root { --nav-height: 60px; } .navbar-logo img { height: 50px; } .main-navbar.scrolled .navbar-logo img { height: 42px; } .cta-primary, .cta-secondary { padding: 14px 30px; font-size: 0.95rem; } .hero-banner .stat-item { min-width: 90px; } .hero-banner .stat-number { font-size: 1.5rem; } .hero-banner .stat-label { font-size: 0.75rem; } .scroll-indicator { left: 20px; bottom: 30px; font-size: 1.5rem; } .mobile-menu { max-width: 100%; } /* Disable film grain on small screens */ .hero-video-container::before { display: none; } } /* Performance Optimization for Video Playback */ @media (prefers-reduced-motion: reduce) { .hero-title, .hero-subtitle, .hero-cta, .scroll-indicator { animation: none; } } /* ========================= UTILITY CLASSES ========================= */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Focus visible styles for better accessibility */ *:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* ========================= ACHIEVEMENTS MARQUEE SECTION ========================= */ .achievements-section { position: relative; display: flex; align-items: stretch; height: 52px; overflow: hidden; background: var(--dark); border-top: 1px solid rgba(102, 126, 234, 0.2); border-bottom: 1px solid rgba(102, 126, 234, 0.2); } /* Left label pill */ .achievements-label { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 24px; background: var(--primary-gradient); color: var(--white); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; z-index: 2; } .achievements-label i { font-size: 0.85rem; opacity: 0.9; } /* Angled divider between label and track */ .achievements-divider { flex-shrink: 0; width: 0; height: 0; border-top: 52px solid transparent; border-left: 20px solid var(--secondary-color); z-index: 2; } /* Marquee track — fills remaining space */ .marquee-track { flex: 1; overflow: hidden; position: relative; /* Left fade */ -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%); } .marquee-content { display: flex; align-items: center; width: max-content; height: 52px; animation: marquee-scroll 18s linear infinite; } .marquee-content:hover { animation-play-state: paused; } /* Individual item */ .achievement-item { display: flex; align-items: center; gap: 10px; padding: 0 20px; white-space: nowrap; } .achievement-item i { font-size: 0.85rem; color: var(--primary-color); flex-shrink: 0; } .achievement-item p { margin: 0; font-family: var(--font-primary); font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.85); line-height: 1; white-space: nowrap; } /* Dot separator between items */ .achievement-dot { flex-shrink: 0; width: 4px; height: 4px; border-radius: 50%; background: rgba(102, 126, 234, 0.5); margin: 0 4px; } /* Scroll animation */ @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ========================= RESPONSIVE ========================= */ @media (max-width: 768px) { .achievements-section { height: 46px; } .achievements-label { padding: 0 16px; font-size: 0.72rem; gap: 6px; } .achievements-divider { border-top-width: 46px; border-left-width: 16px; } .achievement-item p { font-size: 0.85rem; } .achievement-item { padding: 0 14px; gap: 8px; } .marquee-content { height: 46px; animation-duration: 14s; } } @media (max-width: 480px) { .achievements-label span { display: none; /* Show icon only on very small screens */ } .achievements-label { padding: 0 14px; } .achievement-item p { font-size: 0.8rem; } } /* ========================= ABOUT & ENQUIRY SECTION ========================= */ /* ======================================== MODERN ABOUT SECTION ======================================== */ .modern-about-section { position: relative; background: linear-gradient(180deg, #f8f9fd 0%, #ffffff 100%); padding: 20px 20px; overflow: hidden; } /* ── ANIMATED BACKGROUND ── */ .about-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(102, 126, 234, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(102, 126, 234, 0.03) 1px, transparent 1px); background-size: 40px 40px; z-index: 0; } .about-floating-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.4; pointer-events: none; z-index: 0; animation: float 20s ease-in-out infinite; } .orb-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(102, 126, 234, 0.15), transparent 70%); top: -200px; left: -100px; animation-delay: 0s; } .orb-2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(118, 75, 162, 0.12), transparent 70%); bottom: -150px; right: 10%; animation-delay: -7s; } .orb-3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(237, 100, 166, 0.1), transparent 70%); top: 40%; right: -100px; animation-delay: -14s; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -30px) scale(1.05); } 50% { transform: translate(-20px, 20px) scale(0.95); } 75% { transform: translate(20px, 30px) scale(1.02); } } /* ── CONTAINER ── */ .about-container { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; /* gap: 80px; */ } /* ── HERO SECTION ── */ .about-hero { text-align: center; max-width: 900px; margin: 0 auto; } .about-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px 8px 12px; background: rgba(102, 126, 234, 0.08); border: 1px solid rgba(102, 126, 234, 0.15); border-radius: 50px; margin-bottom: 28px; animation: fadeInUp 0.6s ease-out; } .badge-pulse { width: 8px; height: 8px; background: var(--primary-color); border-radius: 50%; position: relative; animation: pulse 2s ease-in-out infinite; } .badge-pulse::before { content: ''; position: absolute; inset: -4px; border: 2px solid var(--primary-color); border-radius: 50%; opacity: 0; animation: ping 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes ping { 0% { transform: scale(0.8); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 0.4; } 100% { transform: scale(1.5); opacity: 0; } } .badge-text { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-color); } .about-main-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 5.5vw, 4.2rem); font-weight: 900; line-height: 1.1; color: #0f1419; margin-bottom: 24px; letter-spacing: -0.02em; animation: fadeInUp 0.6s ease-out 0.1s backwards; } .title-gradient { display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #ed64a6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; } .about-lead { font-family: var(--font-primary); font-size: clamp(1.05rem, 2vw, 1.2rem); font-weight: 400; line-height: 1.8; color: #556080; max-width: 720px; margin: 0 auto 40px; animation: fadeInUp 0.6s ease-out 0.2s backwards; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ── CTA BUTTONS ── */ .about-cta-group { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; animation: fadeInUp 0.6s ease-out 0.3s backwards; } .btn-primary-modern { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: linear-gradient(135deg, #667eea, #764ba2); color: #ffffff; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; border-radius: 12px; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 20px rgba(102, 126, 234, 0.35); position: relative; overflow: hidden; } .btn-primary-modern::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent); opacity: 0; transition: opacity 0.3s ease; } .btn-primary-modern:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(102, 126, 234, 0.45); } .btn-primary-modern:hover::before { opacity: 1; } .btn-primary-modern svg { transition: transform 0.3s ease; } .btn-primary-modern:hover svg { transform: translateX(4px); } .btn-secondary-modern { display: inline-flex; align-items: center; padding: 16px 32px; background: #ffffff; color: var(--primary-color); font-family: var(--font-heading); font-size: 1rem; font-weight: 700; border: 2px solid rgba(102, 126, 234, 0.2); border-radius: 12px; text-decoration: none; transition: all 0.3s ease; } .btn-secondary-modern:hover { background: rgba(102, 126, 234, 0.05); border-color: var(--primary-color); transform: translateY(-2px); } /* ── STATS GRID ── */ /* ── STATS GRID (Updated: More Compact + Perfectly Centered + Vibrantly Colorful) ── */ .about-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; /* Tighter gap → feels more compact */ animation: fadeInUp 0.6s ease-out 0.4s backwards; justify-content: center; /* Ensures the entire grid stays perfectly centered */ max-width: 1200px; margin: 0 auto; } .stat-card { position: relative; background: #ffffff; border: 1px solid rgba(102, 126, 234, 0.12); border-radius: 20px; padding: 26px 22px; /* Significantly more compact padding */ display: flex; flex-direction: column; align-items: center; /* Centers everything horizontally */ text-align: center; /* Perfect centered alignment for text + icon */ gap: 14px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.08); /* Soft colorful base shadow */ } .stat-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(102, 126, 234, 0.06), rgba(118, 75, 162, 0.05), rgba(237, 100, 166, 0.04)); /* More colorful overlay with pink accent */ opacity: 0; transition: opacity 0.4s ease; } .stat-card:hover { transform: translateY(-10px) scale(1.03); /* Bouncier, more lively hover */ box-shadow: 0 25px 50px rgba(102, 126, 234, 0.22); border-color: #667eea; } .stat-card:hover::before { opacity: 1; } .stat-highlight { background: linear-gradient(135deg, #083f6b, #083f6b); /* Extra vibrant with pink */ border: none; color: #ffffff; box-shadow: 0 10px 30px rgba(237, 100, 166, 0.3); /* Extra pop */ } .stat-highlight .stat-icon svg, .stat-highlight .stat-label, .stat-highlight .stat-sublabel { color: #ffffff; opacity: 0.98; } .stat-highlight .stat-number { color: #ffffff; } /* ── ICON (More colorful & compact) ── */ .stat-icon { width: 52px; /* Slightly smaller for compactness */ height: 52px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(237, 100, 166, 0.1)); border-radius: 14px; position: relative; z-index: 1; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15); } .stat-highlight .stat-icon { background: rgba(255, 255, 255, 0.22); } .stat-card:hover .stat-icon { transform: scale(1.15) rotate(2deg); /* More playful & colorful rotation */ box-shadow: 0 8px 20px rgba(237, 100, 166, 0.3); } .stat-icon svg { color: #667eea; stroke-width: 2.5; transition: all 0.3s ease; } .stat-card:hover .stat-icon svg { color: #ed64a6; /* Icon pops with pink on hover */ } /* ── TEXT STYLES (Centered + slightly more vibrant) ── */ .stat-content { position: relative; z-index: 1; width: 100%; } .stat-number { font-family: var(--font-heading); font-size: 2.85rem; /* Slightly smaller for compactness */ font-weight: 900; line-height: 1; background: linear-gradient(135deg, #667eea, #764ba2, #ed64a6); /* More colorful gradient */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; margin-bottom: 6px; } .stat-percent, .stat-plus { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 900; background: linear-gradient(135deg, #667eea, #ed64a6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-left: 2px; } .stat-highlight .stat-percent, .stat-highlight .stat-plus { color: #ffffff; background: none; -webkit-text-fill-color: #ffffff; } .stat-label { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: #0f1419; margin-bottom: 4px; display: block; } .stat-sublabel { font-size: 0.85rem; font-weight: 500; color: #667eea; /* Made sublabel more colorful */ display: block; } .stat-sparkle { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; background: radial-gradient(circle, rgba(237, 100, 166, 0.4), transparent 70%); /* Pink sparkle for extra color */ border-radius: 50%; opacity: 0.6; animation: sparkle 2.8s ease-in-out infinite; } @keyframes sparkle { 0%, 100% { transform: scale(0.7); opacity: 0.4; } 50% { transform: scale(1.25); opacity: 0.75; } } /* ── VISION SECTION ── */ .about-vision { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 60px 0; animation: fadeInUp 0.6s ease-out 0.6s backwards; } .vision-content { display: flex; flex-direction: column; gap: 20px; } .vision-label { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary-color); display: inline-flex; align-items: center; gap: 12px; } .vision-label::before { content: ''; width: 36px; height: 2px; background: linear-gradient(to right, var(--primary-color), transparent); } .vision-title { font-family: var(--font-heading); font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 900; line-height: 1.25; color: #0f1419; letter-spacing: -0.01em; } .vision-highlight { background: linear-gradient(135deg, #667eea, #764ba2, #ed64a6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .vision-text { font-family: var(--font-primary); font-size: 1.05rem; font-weight: 400; line-height: 1.8; color: #556080; } .vision-image { position: relative; } .vision-img-placeholder { width: 100%; aspect-ratio: 4/3; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(102, 126, 234, 0.25); transition: all 0.4s ease; } .vision-img-placeholder:hover { transform: scale(1.02); box-shadow: 0 30px 80px rgba(102, 126, 234, 0.35); } /* ======================================== RESPONSIVE ======================================== */ @media (max-width: 1024px) { .modern-about-section { padding: 80px 20px; } .about-container { gap: 60px; } .about-vision { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 768px) { .modern-about-section { padding: 60px 16px; } .about-container { gap: 50px; } .about-stats-grid { grid-template-columns: 1fr; } .about-features { grid-template-columns: 1fr; } .about-cta-group { flex-direction: column; align-items: center; } .btn-primary-modern, .btn-secondary-modern { width: 100%; max-width: 320px; justify-content: center; } .stat-number { font-size: 2.5rem; } } @media (max-width: 480px) { .about-badge { padding: 6px 16px 6px 10px; } .badge-text { font-size: 0.7rem; } .feature-number { font-size: 2rem; top: 20px; right: 20px; } } /* ── COUNTER ANIMATION ── */ @keyframes countUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ── PROGRAM SECTION v5 – More Compact + Light Box Shadow Separation ── */ .program-section { background: linear-gradient(180deg, #f8f9fd 0%, #ffffff 100%); padding: 80px 20px 90px; /* Much more compact vertically */ position: relative; overflow: hidden; } /* Soft friendly background (kept but lighter) */ .program-bg-journey { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(102,126,234,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(102,126,234,0.03) 1px, transparent 1px); background-size: 58px 58px; opacity: 0.55; z-index: 0; animation: gentleDrift 45s linear infinite; } @keyframes gentleDrift { from { background-position: 0 0; } to { background-position: 58px 58px; } } /* Container */ .program-container { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; } /* Title & subtitle (slightly tighter) */ .program-section__title { font-family: var(--font-heading); font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 800; line-height: 1.1; text-align: center; margin-bottom: 12px; color: #0f1419; letter-spacing: -0.02em; } .program-section__title span { background: linear-gradient(90deg, #667eea, #ed64a6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .program-subtitle { font-family: var(--font-primary); font-size: 1.18rem; color: #556080; text-align: center; max-width: 700px; margin: 0 auto 60px; /* Reduced bottom margin */ line-height: 1.75; } /* ── 2-PER-ROW GRID – Compact & Separated ── */ .program-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: 32px 28px; /* Significantly tighter gaps */ max-width: 1080px; margin: 0 auto; } /* Each program block – clean with light box shadow for separation */ .program-item { background: #ffffff; border-radius: 18px; padding: 32px 34px; /* Added internal padding for balance */ box-shadow: 0 6px 18px rgba(102, 126, 234, 0.08); /* Lite, soft shadow */ display: flex; flex-direction: column; gap: 14px; position: relative; transition: all 0.35s ease; } .program-item:hover { box-shadow: 0 12px 28px rgba(102, 126, 234, 0.14); /* Slightly stronger on hover */ transform: translateY(-3px); } /* Soft step number */ .program-item::before { content: attr(data-step); position: absolute; top: -8px; left: -10px; font-family: var(--font-heading); font-size: 2.9rem; font-weight: 900; line-height: 1; background: linear-gradient(90deg, #667eea, #ed64a6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.11; z-index: -1; transition: all 0.4s ease; } .program-item:hover::before { opacity: 0.20; transform: scale(1.08); } /* Level badge */ .program-level { font-size: 0.84rem; font-weight: 700; letter-spacing: 1.2px; color: #667eea; text-transform: uppercase; display: inline-block; } /* Title */ .journey-title { font-family: var(--font-heading); font-size: 1.78rem; font-weight: 700; color: #0f1419; line-height: 1.2; margin-bottom: 8px; } /* Description */ .journey-description { font-family: var(--font-primary); font-size: 1.06rem; line-height: 1.76; color: #556080; margin-bottom: 16px; } /* Student voice */ .journey-voice { font-size: 1.01rem; font-style: italic; color: #667eea; margin-bottom: 20px; padding-left: 22px; position: relative; } .journey-voice::before { content: '“'; position: absolute; left: 0; font-size: 2.1rem; line-height: 1; opacity: 0.25; top: -4px; } /* Friendly CTA */ .journey-cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 1.04rem; color: #667eea; text-decoration: none; padding: 12px 30px; border: 2px solid #667eea; border-radius: 50px; transition: all 0.4s ease; align-self: flex-start; } .journey-cta:hover { background: linear-gradient(90deg, #667eea, #ed64a6); color: #fff; border-color: transparent; transform: translateY(-2px); } /* Responsive – still 2 per row on large screens, stacks on smaller */ @media (max-width: 1100px) { .program-grid { grid-template-columns: 1fr; gap: 28px; } } /* ── CAMPUS LIFE SECTION – Premium Masonry with Multi-Image Sliders ── */ .campus-life-section { background: linear-gradient(180deg, #f8f9fd 0%, #ffffff 100%); padding: 70px 20px 80px; position: relative; overflow: hidden; } .campus-life-bg { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(102, 126, 234, 0.05) 1px, transparent 1px); background-size: 60px 60px; opacity: 0.6; z-index: 0; } .campus-life-container { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; } .campus-life-title { font-family: var(--font-heading); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.1; text-align: center; margin-bottom: 14px; color: #0f1419; } .campus-life-subtitle { font-family: var(--font-heading); font-size: 1.05rem; color: #556080; text-align: center; max-width: 620px; margin: 0 auto 40px; line-height: 1.7; } /* ── Masonry Grid ── */ .campus-moments-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; gap: 16px; max-width: 1280px; margin: 0 auto; } /* ── Base card ── */ .moment-card { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15); cursor: pointer; transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); grid-row: span 1; /* 1 row = 200px by default */ } .moment-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(102, 126, 234, 0.28); } /* ── Tall card: 2 rows ── */ .moment-card.tall { grid-row: span 2; /* 200px × 2 + 16px gap = 416px */ } /* ── Wide card: 2 columns ── */ .moment-card.wide { grid-column: span 2; } /* ── Slider ── */ .moment-slider { position: absolute; inset: 0; } .moment-slides { display: flex; width: 100%; height: 100%; transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); } .moment-slide { min-width: 100%; height: 100%; flex-shrink: 0; } .moment-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; display: block; } .moment-card:hover .moment-slide img { transform: scale(1.06); } /* ── Overlay ── */ .moment-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(15, 20, 25, 0.85)); display: flex; align-items: flex-end; padding: 22px 20px; z-index: 3; } .moment-caption { color: #ffffff; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; line-height: 1.3; text-shadow: 0 2px 10px rgba(0,0,0,0.6); } /* ── Full-Screen Modal ── */ .image-modal { display: none; position: fixed; inset: 0; background: rgba(15, 20, 25, 0.97); z-index: 9999; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(12px); } .image-modal.active { display: flex; } .modal-content { position: relative; max-width: 96%; max-height: 94vh; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7); } .modal-image { max-width: 100%; max-height: 88vh; display: block; object-fit: contain; } .modal-caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.82); color: #fff; text-align: center; padding: 18px 24px; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; } .close-modal { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; background: rgba(255,255,255,0.2); color: #fff; border: none; border-radius: 50%; font-size: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; z-index: 10; } .close-modal:hover { background: #ed64a6; transform: rotate(90deg); } /* ── Responsive ── */ /* Tablet */ @media (max-width: 1024px) { .campus-moments-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; } .moment-card.wide { grid-column: span 2; } .moment-card.tall { grid-row: span 2; } } /* Small tablet */ @media (max-width: 768px) { .campus-life-section { padding: 50px 16px 60px; } .campus-moments-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; gap: 12px; } .moment-card.wide { grid-column: span 2; } .moment-card.tall { grid-row: span 2; } .moment-caption { font-size: 0.95rem; } } /* Mobile */ @media (max-width: 480px) { .campus-moments-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; gap: 12px; } /* Reset span overrides on single column */ .moment-card.tall, .moment-card.wide { grid-column: span 1; grid-row: span 1; } } /* ── LEADERSHIP SECTION – Side-by-Side Story Layout ── */ /* ═══════════════════════════════════════════════════════ LEADERSHIP INNOVATIVE – Diagonal Split Design ═══════════════════════════════════════════════════════ */ .leadership-innovative { position: relative; min-height: 100vh; overflow: hidden; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); } /* ═══════════════════════════════════════════════════════ ANIMATED BACKGROUND ═══════════════════════════════════════════════════════ */ .leadership-bg-animated { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .floating-shape { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; animation: float 20s ease-in-out infinite; } .shape-1 { width: 500px; height: 500px; background: radial-gradient(circle, #667eea, transparent); top: -100px; left: -100px; animation-delay: 0s; } .shape-2 { width: 400px; height: 400px; background: radial-gradient(circle, #764ba2, transparent); bottom: -100px; right: 10%; animation-delay: -7s; } .shape-3 { width: 350px; height: 350px; background: radial-gradient(circle, #ed64a6, transparent); top: 40%; right: -100px; animation-delay: -14s; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -30px) scale(1.05); } 50% { transform: translate(-20px, 20px) scale(0.95); } 75% { transform: translate(20px, 30px) scale(1.02); } } /* ═══════════════════════════════════════════════════════ MAIN HEADER ═══════════════════════════════════════════════════════ */ .leadership-main-header { position: relative; z-index: 10; text-align: center; padding: 80px 20px 60px; } .header-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); padding: 10px 24px; border-radius: 50px; color: #fff; font-weight: 700; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 24px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .header-badge i { color: #fbbf24; } .main-heading { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -0.02em; margin: 0; } .gradient-text { background: linear-gradient(135deg, #667eea, #764ba2, #ed64a6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ═══════════════════════════════════════════════════════ DIAGONAL CONTAINER ═══════════════════════════════════════════════════════ */ .diagonal-container { position: relative; z-index: 5; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr 80px 1fr; min-height: 600px; gap: 0; } /* ═══════════════════════════════════════════════════════ DIAGONAL SIDES ═══════════════════════════════════════════════════════ */ .diagonal-side { position: relative; overflow: hidden; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .diagonal-side::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)); z-index: 1; transition: opacity 0.6s ease; } .left-side { clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); } .right-side { clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%); } /* Hover Effects */ .diagonal-side.hovered { transform: scale(1.02); } .diagonal-side.hovered::before { background: linear-gradient(135deg, rgba(102, 126, 234, 0.95), rgba(118, 75, 162, 0.9)); } .diagonal-side.dimmed { opacity: 0.6; transform: scale(0.98); } /* ═══════════════════════════════════════════════════════ SIDE CONTENT ═══════════════════════════════════════════════════════ */ .side-content { position: relative; height: 100%; min-height: 600px; } .content-wrapper { position: relative; z-index: 10; padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; height: 100%; } .side-image { position: absolute; inset: 0; z-index: 0; } .side-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; } .diagonal-side:hover .side-image img { transform: scale(1.05); } .image-overlay { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.85) 100% ); } .diagonal-side:hover .image-overlay { background: linear-gradient( 135deg, rgba(102, 126, 234, 0.88) 0%, rgba(118, 75, 162, 0.82) 100% ); } /* Leader Badge */ .leader-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); padding: 8px 20px; border-radius: 50px; color: #fff; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 24px; border: 1px solid rgba(255, 255, 255, 0.2); align-self: flex-start; } /* Leader Heading */ .leader-heading { font-family: var(--font-heading); font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 800; color: #fff; line-height: 1.1; margin: 0 0 28px; letter-spacing: -0.02em; } /* Leader Quote */ .leader-quote { position: relative; margin-bottom: 32px; } .quote-icon { font-size: 2.5rem; color: rgba(255, 255, 255, 0.2); margin-bottom: 12px; } .leader-quote p { font-family: var(--font-heading); font-size: 1.15rem; font-style: italic; color: rgba(255, 255, 255, 0.95); line-height: 1.6; margin: 0; padding-left: 20px; border-left: 3px solid rgba(255, 255, 255, 0.3); } /* Leader Stats */ .leader-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 32px; } .stat-item { display: flex; flex-direction: column; gap: 6px; } .stat-number { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 900; color: #fff; line-height: 1; } .stat-label { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.5px; } /* Read Message Button */ .read-message-btn { display: inline-flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.95); color: #0f172a; border: none; padding: 16px 32px; border-radius: 50px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); align-self: flex-start; } .read-message-btn:hover { background: #fff; transform: translateX(8px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); } .read-message-btn i { transition: transform 0.3s ease; } .read-message-btn:hover i { transform: translateX(4px); } /* ═══════════════════════════════════════════════════════ DIAGONAL DIVIDER ═══════════════════════════════════════════════════════ */ .diagonal-divider { position: relative; display: flex; align-items: center; justify-content: center; z-index: 20; } .divider-line { position: absolute; width: 2px; height: 100%; background: linear-gradient( 180deg, transparent 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.3) 80%, transparent 100% ); } .center-logo { width: 80px; height: 80px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 40px rgba(102, 126, 234, 0.6); border: 4px solid rgba(255, 255, 255, 0.2); z-index: 10; animation: pulse 2s ease-in-out infinite; } .center-logo i { font-size: 2rem; color: #fff; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 40px rgba(102, 126, 234, 0.6); } 50% { box-shadow: 0 0 60px rgba(102, 126, 234, 0.9); } } /* ═══════════════════════════════════════════════════════ MESSAGE MODAL ═══════════════════════════════════════════════════════ */ .message-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .message-modal.active { opacity: 1; visibility: visible; } .modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); } .modal-content { position: relative; background: white; border-radius: 28px; max-width: 700px; width: 90%; max-height: 85vh; overflow-y: auto; box-shadow: 0 25px 100px rgba(0, 0, 0, 0.5); transform: translateY(30px) scale(0.9); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .message-modal.active .modal-content { transform: translateY(0) scale(1); } .modal-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; background: rgba(0, 0, 0, 0.05); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; z-index: 10; } .modal-close:hover { background: rgba(0, 0, 0, 0.1); transform: rotate(90deg); } .modal-close i { font-size: 1.3rem; color: #64748b; } /* Message Container */ .message-container { padding: 50px 45px; } .message-header { margin-bottom: 32px; } .header-profile { display: flex; align-items: center; gap: 20px; padding-bottom: 24px; border-bottom: 2px solid rgba(102, 126, 234, 0.15); } .header-profile img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 4px solid rgba(102, 126, 234, 0.2); } .profile-text h4 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: #0f172a; margin: 0 0 6px; } .profile-text p { font-size: 1rem; color: var(--primary-color); font-weight: 600; margin: 0; } .message-body h3 { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: #0f172a; margin: 0 0 24px; } .message-body p { font-size: 1.05rem; line-height: 1.8; color: #475569; margin: 0 0 20px; } .message-body p:last-child { margin-bottom: 0; } /* ═══════════════════════════════════════════════════════ RESPONSIVE DESIGN ═══════════════════════════════════════════════════════ */ @media (max-width: 1200px) { .content-wrapper { padding: 50px 40px; } } @media (max-width: 992px) { .diagonal-container { grid-template-columns: 1fr; grid-template-rows: auto auto; } .left-side { clip-path: none; } .right-side { clip-path: none; } .diagonal-divider { display: none; } .side-content { min-height: 500px; } } @media (max-width: 768px) { .leadership-main-header { padding: 60px 20px 40px; } .content-wrapper { padding: 40px 30px; } .leader-heading { font-size: 2rem; } .leader-stats { grid-template-columns: 1fr; gap: 20px; } .message-container { padding: 40px 30px; } } @media (max-width: 480px) { .content-wrapper { padding: 35px 24px; } .leader-quote p { font-size: 1rem; } .stat-number { font-size: 2rem; } .read-message-btn { width: 100%; justify-content: center; } .message-container { padding: 35px 24px; } } /* Custom Scrollbar */ .modal-content::-webkit-scrollbar { width: 8px; } .modal-content::-webkit-scrollbar-track { background: rgba(102, 126, 234, 0.05); } .modal-content::-webkit-scrollbar-thumb { background: rgba(102, 126, 234, 0.3); border-radius: 10px; } .modal-content::-webkit-scrollbar-thumb:hover { background: rgba(102, 126, 234, 0.5); } /* ── WHY JIS IMS – The JIS Edge (Split Interactive Layout) ── */ .why-jis-section { background: #ffffff; padding: 60px 20px; position: relative; overflow: hidden; } .why-jis-wrapper { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; } /* Left Side */ .why-left { background: linear-gradient(135deg, #0f172a 0%, #1e2937 100%); position: relative; display: flex; align-items: center; justify-content: center; padding: 40px 40px; color: #fff; overflow: hidden; } .why-left::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgba(102,126,234,0.25) 0%, transparent 60%); } .why-left-content { max-width: 420px; position: relative; z-index: 2; } .why-left-content h2 { font-family: var(--font-heading); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800; line-height: 1.1; margin-bottom: 18px; } .why-left-content .highlight { background: linear-gradient(90deg, #a5b4fc, #c4b5fd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .why-left-content p { font-size: 1rem; line-height: 1.8; color: #cbd5e1; margin-bottom: 28px; } .why-left-content .cta { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #0f172a; padding: 12px 26px; border-radius: 60px; font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: all 0.4s ease; } .why-left-content .cta:hover { transform: translateX(8px); } /* Right Side */ .why-right { background: #ffffff; padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; } .why-right h3 { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; margin-bottom: 32px; color: #0f172a; } .highlight-list { display: flex; flex-direction: column; gap: 24px; } .highlight-item { display: flex; gap: 18px; align-items: flex-start; cursor: pointer; transition: all 0.4s ease; } .highlight-item:hover { transform: translateX(10px); } .highlight-icon { width: 52px; height: 52px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; flex-shrink: 0; box-shadow: 0 8px 20px rgba(102, 126, 234, 0.28); } .highlight-text h4 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; margin-bottom: 5px; color: #0f172a; } .highlight-text p { font-size: 0.9rem; line-height: 1.6; color: #64748b; } /* Responsive */ @media (max-width: 992px) { .why-jis-wrapper { grid-template-columns: 1fr; } .why-left { padding: 60px 30px; min-height: auto; } .why-right { padding: 50px 30px; } } @media (max-width: 576px) { .why-jis-section { padding: 0; } .why-left { padding: 50px 20px; } .why-right { padding: 40px 20px; } .why-right h3 { font-size: 1.35rem; } .highlight-icon { width: 44px; height: 44px; font-size: 20px; } .highlight-text h4 { font-size: 1rem; } } /* Footer Section */ .advanced-footer { background: linear-gradient(135deg, #0a0a0f 0%, #1a0b2e 100%); color: #f1f5f9; font-family: var(--font-heading); padding: 50px 20px 30px; position: relative; overflow: hidden; } .advanced-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(167,139,250,0.3), transparent); } .advanced-footer::after { content: ''; position: absolute; top: -40%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(219,39,119,0.08) 0%, transparent 60%); pointer-events: none; } .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 35px; position: relative; z-index: 1; } .footer-brand-section { display: flex; flex-direction: column; gap: 16px; } .footer-logo { font-size: 2.2rem; font-weight: 900; letter-spacing: -0.04em; background: linear-gradient(135deg, #c4b5fd, #f9a8d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; } .footer-tagline { font-size: 0.92rem; line-height: 1.6; color: #94a3b8; margin-bottom: 20px; } .footer-social-compact { display: flex; gap: 10px; } .social-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(167,139,250,0.1); border-radius: 10px; color: #94a3b8; font-size: 1.1rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; } .social-btn:hover { background: linear-gradient(135deg, #7c3aed, #db2777); color: white; transform: translateY(-3px); border-color: transparent; box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3); } .footer-section { display: flex; flex-direction: column; } .footer-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #e0e7ff; margin-bottom: 18px; position: relative; padding-bottom: 10px; } .footer-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: linear-gradient(90deg, #a78bfa, transparent); } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-link { color: #94a3b8; text-decoration: none; font-size: 0.92rem; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 6px; } .footer-link::before { content: '→'; opacity: 0; transform: translateX(-8px); transition: all 0.3s ease; color: #a78bfa; } .footer-link:hover { color: #e0e7ff; padding-left: 14px; } .footer-link:hover::before { opacity: 1; transform: translateX(0); } .contact-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; font-size: 0.9rem; } .contact-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(167,139,250,0.1); border-radius: 8px; color: #a78bfa; font-size: 0.9rem; flex-shrink: 0; } .contact-text { color: #cbd5e1; line-height: 1.5; } .contact-label { font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; } .newsletter-compact { margin-top: 10px; } .newsletter-input-group { display: flex; background: rgba(255,255,255,0.04); border: 1px solid rgba(167,139,250,0.15); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; } .newsletter-input-group:focus-within { border-color: rgba(167,139,250,0.4); box-shadow: 0 0 0 3px rgba(167,139,250,0.1); } .newsletter-input-group input { flex: 1; background: transparent; border: none; outline: none; padding: 12px 16px; color: #e2e8f0; font-size: 0.88rem; } .newsletter-input-group input::placeholder { color: #64748b; } .newsletter-btn { background: linear-gradient(135deg, #7c3aed, #db2777); color: white; border: none; padding: 12px 24px; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.3s ease; } .newsletter-btn:hover { background: linear-gradient(135deg, #6d28d9, #be185d); box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4); } .footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 25px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: #64748b; position: relative; z-index: 1; } .footer-legal { display: flex; gap: 20px; } .footer-legal a { color: #64748b; text-decoration: none; transition: color 0.2s ease; } .footer-legal a:hover { color: #94a3b8; } @media (max-width: 968px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px; } } @media (max-width: 640px) { .advanced-footer { padding: 40px 20px 25px; } .footer-grid { grid-template-columns: 1fr; gap: 30px; } .footer-bottom { flex-direction: column; gap: 15px; text-align: center; } .footer-legal { flex-direction: column; gap: 10px; } } /* Scroll to top button */ .scroll-top { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(167,139,250,0.2); border-radius: 12px; color: #a78bfa; font-size: 1.2rem; cursor: pointer; transition: all 0.3s ease; z-index: 2; } .scroll-top:hover { background: linear-gradient(135deg, #7c3aed, #db2777); color: white; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3); } /* Partner Slider */ .ps { background: #f8fafc; padding: 20px 0; overflow: hidden; position: relative; font-family: var(--font-sans); } .ps-head { text-align: center; margin-bottom: 20px; padding: 0 24px; } .ps-eyebrow { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: #64748b; margin-bottom: 12px; font-weight: 500; } .ps-title { font-size: 2.1rem; font-weight: 700; color: #1e2937; line-height: 1.2; } .ps-title span { background: linear-gradient(90deg, #6366f1, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ps-sub { font-size: 0.95rem; color: #64748b; margin-top: 12px; max-width: 420px; margin-left: auto; margin-right: auto; } .ps-count { display: inline-flex; align-items: center; gap: 8px; background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.15); border-radius: 9999px; padding: 6px 18px; font-size: 0.8rem; color: #6366f1; margin-top: 18px; font-weight: 500; } .ps-count-dot { width: 7px; height: 7px; border-radius: 50%; background: #6366f1; animation: blink 1.6s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .ps-track-wrap { position: relative; margin-bottom: 8px; overflow: hidden; padding: 20px 0; /* Extra padding to prevent cropping on hover */ } .ps-fade-l, .ps-fade-r { position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none; } .ps-fade-l { left: 0; background: linear-gradient(to right, #f8fafc 0%, transparent 100%); } .ps-fade-r { right: 0; background: linear-gradient(to left, #f8fafc 0%, transparent 100%); } .ps-track { display: flex; gap: 18px; width: max-content; align-items: center; padding: 10px 0; } .ps-track.ltr { animation: scrollLTR 40s linear infinite; } .ps-track.rtl { animation: scrollRTL 45s linear infinite; } .ps-track:hover { animation-play-state: paused; } @keyframes scrollLTR { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes scrollRTL { from { transform: translateX(-50%); } to { transform: translateX(0); } } .ps-logo { flex-shrink: 0; height: 78px; /* Enlarged a bit */ width: auto; max-width: 160px; object-fit: contain; padding: 14px 24px; background: white; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .ps-logo:hover { transform: translateY(-6px) scale(1.06); box-shadow: 0 12px 25px rgba(99, 102, 241, 0.12); border-color: #a5b4fc; } /* ============================================= INNER PAGE HERO SECTION ============================================= */ .inner-page-hero { margin-top:-150px; position: relative; min-height: 65vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); overflow: hidden; padding: 270px 20px 80px; } .inner-page-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(237, 100, 166, 0.12) 0%, transparent 50%); animation: pulseGlow 8s ease-in-out infinite; } @keyframes pulseGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .inner-page-hero-content { position: relative; z-index: 2; max-width: 900px; text-align: center; animation: fadeInUp 1s ease-out; } .about-hero-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); padding: 10px 24px; border-radius: 50px; color: #fff; font-weight: 700; font-size: 0.85rem; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 28px; } .about-hero-badge i { color: #fbbf24; } .inner-page-hero h1 { font-family: var(--font-heading); font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 24px; letter-spacing: -0.02em; } .inner-page-hero h1 .gradient-text { background: linear-gradient(135deg, #667eea, #764ba2, #ed64a6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .inner-page-hero-description { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.8; color: rgba(255, 255, 255, 0.9); margin-bottom: 20px; } .inner-page-hero-date { font-size: 0.95rem; color: rgba(255, 255, 255, 0.7); font-style: italic; } /* ============================================= RESPONSIVE DESIGN ============================================= */ /* ============================================= RESPONSIVE DESIGN ============================================= */ @media only screen and (max-width: 768px) { .inner-page-hero { padding: 250px 20px 60px; min-height: 55vh; } }