/
home
/
whiteglobeco
/
public_html
/
nexoratechsolutions.com
/
Upload File
HOME
/* ── CSS VARIABLES ─────────────────────────────────────────────────────────── */ :root { --navy: #0A1B2E; --navy2: #0F2342; --navy3: #162A44; --navy4: #1E3A55; --blue: #2563EB; --teal: #0F6E56; --amber: #92400E; --gold: #C9A84C; --goldd: #9A7A30; --goldl: #F5E6C3; --cream: #FAF6EF; --cream2: #F4EEE2; --offwh: #F8FAFC; --text: #0F172A; --mid: #3A4A5A; --sub: #64748B; --bord: #E2E8F0; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Outfit', system-ui, sans-serif; --r: 8px; --transition: 0.35s cubic-bezier(0.4,0,0.2,1); } /* ============================================================================ HEADER – Clean, Compact, Responsive ============================================================================ */ .header { width: 100%; padding: 10px 5%; display: flex; align-items: center; justify-content: space-between; background: #ffffff; height: 75px; position: fixed; top: 0; left: 0; z-index: 9999; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .logo-area { display: flex; align-items: center; } .logo-img { height: 55px; } /* ============================================================================ NAVIGATION MENU ============================================================================ */ .navbar .nav-links { display: flex; list-style: none; gap: 36px; align-items: center; } .navbar ul li { position: relative; } .navbar ul li a { text-decoration: none; font-size: 16px; font-weight: 600; color: #002D62; padding: 8px 0; transition: 0.25s; } .navbar ul li a:hover { color: #0096FF; } /* ============================================================================ STABLE DROPDOWN (DESKTOP) ============================================================================ */ .dropdown { position: relative; } .mega-menu { position: absolute; top: 55px; left: 0; width: 250px; padding: 20px 25px; background: #fff; border-radius: 14px; box-shadow: 0 12px 35px rgba(0,0,0,0.15); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; pointer-events: none; } .dropdown:hover .mega-menu, .dropdown.hover-active .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .dropdown::after { content: ""; position: absolute; top: 100%; left: 0; width: 250px; height: 25px; } .mega-col h4 { font-size: 15px; font-weight: 700; color: #002D62; margin-bottom: 10px; } .mega-menu a { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: #002D62; text-decoration: none; transition: 0.2s ease; } .mega-menu a:hover { color: #0096FF; padding-left: 5px; } /* ============================================================================ MOBILE MENU ICON ============================================================================ */ .mobile-menu-icon { display: none; font-size: 32px; cursor: pointer; } /* ============================================================================ MOBILE RESPONSIVE ============================================================================ */ @media (max-width: 900px) { .mobile-menu-icon { display: block; } .navbar .nav-links { position: absolute; top: 75px; left: 0; width: 100%; flex-direction: column; background: #ffffff; padding: 20px 0; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: all 0.35s ease; } .nav-links.nav-active { max-height: 700px; opacity: 1; pointer-events: auto; border-bottom: 1px solid #eee; } .dropdown:hover .mega-menu { display: none; } .dropdown.open .mega-menu { display: block !important; position: static; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto; padding: 12px 20px; background: #f4f8ff; border-radius: 10px; box-shadow: none; } } /* ── RESET + BASE ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--sans); background: var(--cream); color: var(--text); line-height: 1.65; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ── TYPOGRAPHY ────────────────────────────────────────────────────────────── */ h1,h2,h3,h4 { font-family: var(--serif); line-height: 1.15; } .serif { font-family: var(--serif); } .gold { color: var(--gold); } .teal { color: var(--teal); } .sub { color: var(--sub); font-size: .875rem; } /* ── LAYOUT ────────────────────────────────────────────────────────────────── */ .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } section { padding: 96px 0; } /* ── HERO ──────────────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100vh; background: var(--navy); display: flex; align-items: center; overflow: hidden; padding-top: 64px; } /* Decorative background geometry */ .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 70% 40%, rgba(37,99,235,.12) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 20% 70%, rgba(15,110,86,.1) 0%, transparent 60%); } .hero-grid-lines { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(201,168,76,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(201,168,76,.04) 1px, transparent 1px); background-size: 72px 72px; } .hero-content { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 420px; gap: 80px; align-items: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; } .hero-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); } .hero h1 { font-size: clamp(2.8rem, 5vw, 4.2rem); font-weight: 300; color: #fff; line-height: 1.08; margin-bottom: 28px; letter-spacing: -.01em; } .hero h1 em { font-style: italic; color: var(--gold); } .hero-body { font-size: 1.05rem; color: rgba(255,255,255,.65); line-height: 1.75; max-width: 520px; margin-bottom: 40px; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--navy); font-family: var(--sans); font-size: .875rem; font-weight: 600; padding: 14px 28px; border-radius: 2px; letter-spacing: .04em; border: none; cursor: pointer; transition: background var(--transition), transform var(--transition); } .btn-primary:hover { background: #d4b05a; transform: translateY(-1px); } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: rgba(255,255,255,.8); font-family: var(--sans); font-size: .875rem; font-weight: 500; padding: 14px 28px; border-radius: 2px; letter-spacing: .04em; border: 1px solid rgba(255,255,255,.2); cursor: pointer; transition: border-color var(--transition), color var(--transition); } .btn-ghost:hover { border-color: var(--gold); color: var(--gold); } /* Hero stats card */ .hero-card { background: rgba(255,255,255,.04); border: 1px solid rgba(201,168,76,.2); border-radius: var(--r); backdrop-filter: blur(8px); padding: 36px; } .hero-card-title { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid rgba(201,168,76,.2); } .hero-stat { margin-bottom: 28px; } .hero-stat:last-child { margin-bottom: 0; } .hero-stat-num { font-family: var(--serif); font-size: 2.4rem; font-weight: 600; color: #fff; line-height: 1; margin-bottom: 4px; } .hero-stat-num span { color: var(--gold); } .hero-stat-label { font-size: .8rem; color: rgba(255,255,255,.5); line-height: 1.4; } .hero-divider { height: 1px; background: rgba(201,168,76,.15); margin: 20px 0; } /* ── REGULATORY STRIP ──────────────────────────────────────────────────────── */ .reg-strip { background: var(--navy2); border-top: 1px solid rgba(201,168,76,.15); border-bottom: 1px solid rgba(201,168,76,.15); padding: 18px 0; } .reg-strip-inner { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); } .reg-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(201,168,76,.08); color: var(--goldl); padding: 4px 12px; border-radius: 2px; font-size: .68rem; letter-spacing: .08em; } .reg-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex-shrink: 0; } /* ── GAP / PROBLEM SECTION ─────────────────────────────────────────────────── */ .section-eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--goldd); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .section-eyebrow::before { content:''; width:24px; height:1px; background:var(--goldd); } .section-title { font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 400; line-height: 1.18; color: var(--navy); margin-bottom: 20px; } .section-title em { font-style: italic; color: var(--goldd); } .section-body { font-size: 1.05rem; color: var(--mid); line-height: 1.78; max-width: 600px; } .gap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 52px; } .gap-card { background: var(--offwh); border: 1px solid var(--bord); border-radius: var(--r); padding: 28px; position: relative; overflow: hidden; transition: border-color var(--transition), transform var(--transition); } .gap-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .gap-card.c-blue::before { background: var(--blue); } .gap-card.c-teal::before { background: var(--teal); } .gap-card.c-amber::before { background: var(--amber); } .gap-card:hover { border-color: var(--gold); transform: translateY(-3px); } .gap-num { font-family: var(--serif); font-size: 2.8rem; font-weight: 300; opacity: .12; position: absolute; top: 16px; right: 20px; line-height: 1; } .gap-title { font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: 10px; } .gap-body { font-size: .875rem; color: var(--mid); line-height: 1.65; } /* ── STAT ROW ───────────────────────────────────────────────────────────────── */ .stat-row { display: grid; grid-template-columns: repeat(3,1fr); background: var(--navy); border-radius: var(--r); overflow: hidden; margin-top: 52px; } .stat-item { padding: 36px 32px; text-align: center; border-right: 1px solid rgba(255,255,255,.06); } .stat-item:last-child { border-right: none; } .stat-big { font-family: var(--serif); font-size: 3rem; font-weight: 500; color: var(--gold); line-height: 1; margin-bottom: 8px; } .stat-label { font-size: .85rem; color: rgba(255,255,255,.5); line-height: 1.4; } /* ── PROGRAMME OVERVIEW ─────────────────────────────────────────────────────── */ .programme-section { background: var(--navy); } .programme-section .section-title { color: #fff; } .programme-section .section-body { color: rgba(255,255,255,.6); } .programme-section .section-eyebrow { color: var(--gold); } .programme-section .section-eyebrow::before { background: var(--gold); } .timeline { margin-top: 56px; } .timeline-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; } .timeline-row + .timeline-row { margin-top: 2px; } .month-card { position: relative; padding: 28px 24px 24px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); transition: background var(--transition); cursor: default; } .month-card:hover { background: rgba(255,255,255,.06); } .month-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; margin-bottom: 14px; } .m1 .month-badge { background: rgba(37,99,235,.25); color: #93C5FD; } .m2 .month-badge { background: rgba(37,99,235,.2); color: #93C5FD; } .m3 .month-badge { background: rgba(3,105,161,.25); color: #7DD3FC; } .m4 .month-badge { background: rgba(15,110,86,.25); color: #6EE7B7; } .m5 .month-badge { background: rgba(15,110,86,.2); color: #6EE7B7; } .m6 .month-badge { background: rgba(146,64,14,.3); color: #FCD34D; } .month-title { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 10px; } .month-items { list-style: none; } .month-items li { font-size: .82rem; color: rgba(255,255,255,.5); padding: 4px 0; padding-left: 14px; position: relative; line-height: 1.45; } .month-items li::before { content: '–'; position: absolute; left: 0; color: var(--gold); opacity: .5; } .deliverable-tag { display: inline-block; margin-top: 12px; font-size: .65rem; font-weight: 600; letter-spacing: .08em; color: var(--gold); opacity: .8; } /* ── CREDENTIALS / APARNA ────────────────────────────────────────────────────── */ .aparna-section { background: var(--cream2); position: relative; overflow: hidden; } .aparna-section::after { content: ''; position: absolute; top: -80px; right: -80px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,.06) 0%, transparent 70%); pointer-events: none; } .aparna-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .aparna-img-wrap { position: relative; } .aparna-img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top; border-radius: 4px; border: 1px solid rgba(201,168,76,.2); } .aparna-img-placeholder { width: 100%; aspect-ratio: 3/4; background: var(--navy); border-radius: 4px; border: 1px solid rgba(201,168,76,.2); display: flex; align-items: center; justify-content: center; } .aparna-img-placeholder span { color: rgba(201,168,76,.3); font-size: .8rem; } .aparna-credential-strip { position: absolute; bottom: -1px; left: 0; right: 0; background: var(--navy); padding: 16px 20px; border-top: 2px solid var(--gold); } .aparna-credential-strip p { font-size: .78rem; color: rgba(255,255,255,.6); line-height: 1.4; } .aparna-credential-strip strong { color: var(--gold); } .credential-list { margin: 28px 0; } .credential-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--bord); } .credential-item:first-child { padding-top: 0; } .credential-icon { width: 36px; height: 36px; border-radius: 2px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; } .credential-icon.blue { background: var(--blueM, #EFF6FF); color: var(--blue); } .credential-icon.teal { background: #ECFDF5; color: var(--teal); } .credential-icon.gold { background: var(--goldl); color: var(--goldd); } .credential-text strong { display: block; font-size: .9rem; font-weight: 600; color: var(--navy); margin-bottom: 2px; } .credential-text span { font-size: .82rem; color: var(--sub); } /* ── WHO IT'S FOR ───────────────────────────────────────────────────────────── */ .audience-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 48px; } .audience-card { display: flex; gap: 16px; padding: 24px; background: var(--offwh); border: 1px solid var(--bord); border-radius: var(--r); align-items: flex-start; transition: border-color var(--transition); } .audience-card:hover { border-color: var(--gold); } .audience-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 2px; display: flex; align-items: center; justify-content: center; background: var(--navy); font-size: 1.1rem; } .audience-title { font-size: .95rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; } .audience-body { font-size: .82rem; color: var(--mid); line-height: 1.55; } /* ── OUTCOMES ──────────────────────────────────────────────────────────────── */ .outcomes-section { background: var(--navy2); } .outcomes-section .section-title { color: #fff; } .outcomes-section .section-eyebrow { color: var(--gold); } .outcomes-section .section-eyebrow::before { background: var(--gold); } .outcomes-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 48px; } .outcome-card { padding: 24px; border: 1px solid rgba(255,255,255,.06); border-radius: var(--r); background: rgba(255,255,255,.03); text-align: center; } .outcome-check { width: 40px; height: 40px; border-radius: 50%; background: rgba(15,110,86,.25); color: #6EE7B7; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 1rem; font-weight: 700; } .outcome-title { font-size: .9rem; font-weight: 600; color: #fff; margin-bottom: 6px; } .outcome-body { font-size: .78rem; color: rgba(255,255,255,.45); line-height: 1.55; } /* ── DELIVERY TEAM ─────────────────────────────────────────────────────────── */ .team-section { background: var(--cream); } .team-card { display: grid; grid-template-columns: 220px 1fr; background: var(--offwh); border: 1px solid var(--bord); border-radius: var(--r); overflow: hidden; margin-bottom: 20px; transition: border-color var(--transition), box-shadow var(--transition); } .team-card:last-child { margin-bottom: 0; } .team-card:hover { border-color: rgba(201,168,76,.5); box-shadow: 0 6px 28px rgba(10,27,46,.06); } .team-card-left { padding: 28px 22px; display: flex; flex-direction: column; border-right: 1px solid var(--bord); position: relative; } .team-card-left::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; } .tc-gold .team-card-left { background: var(--navy); border-right-color: rgba(201,168,76,.15); } .tc-gold .team-card-left::before { background: var(--gold); } .tc-teal .team-card-left::before { background: var(--teal); } .tc-navy .team-card-left::before { background: var(--navy); } .tc-amber .team-card-left::before { background: var(--amber); } .tc-purp .team-card-left::before { background: var(--purp); } .team-badge { width: 52px; height: 52px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 800; color: #fff; letter-spacing: -.01em; margin-bottom: 16px; flex-shrink: 0; } .tc-gold .team-badge { background: linear-gradient(135deg,var(--goldd),var(--gold)); } .tc-teal .team-badge { background: var(--teal); } .tc-navy .team-badge { background: var(--navy2); } .tc-amber .team-badge { background: var(--amber); } .tc-purp .team-badge { background: var(--purp); } .team-name { font-size: .92rem; font-weight: 700; margin-bottom: 3px; line-height: 1.3; } .tc-gold .team-name { color: #fff; } .tc-teal .team-name, .tc-navy .team-name, .tc-amber .team-name, .tc-purp .team-name { color: var(--navy); } .team-role { font-size: .72rem; font-weight: 600; margin-bottom: 14px; line-height: 1.35; } .tc-gold .team-role { color: var(--gold); } .tc-teal .team-role { color: var(--teal); } .tc-navy .team-role { color: var(--blue); } .tc-amber .team-role { color: var(--amber); } .tc-purp .team-role { color: var(--purp); } .team-meta { list-style: none; } .team-meta li { font-size: .73rem; padding: 2px 0 2px 12px; position: relative; line-height: 1.45; } .tc-gold .team-meta li { color: rgba(255,255,255,.45); } .tc-teal .team-meta li, .tc-navy .team-meta li, .tc-amber .team-meta li, .tc-purp .team-meta li { color: var(--sub); } .team-meta li::before { content:'·'; position:absolute; left:0; color:var(--gold); } .team-card-right { padding: 28px 32px; } .team-card-label { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; } .tc-gold .team-card-label { color: var(--goldd); } .tc-teal .team-card-label { color: var(--teal); } .tc-navy .team-card-label { color: var(--navy); } .tc-amber .team-card-label { color: var(--amber); } .tc-purp .team-card-label { color: var(--purp); } .team-card-right p { font-size: .87rem; color: var(--mid); line-height: 1.72; margin-bottom: 14px; } .team-expertise { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .team-chip { font-size: .7rem; font-weight: 500; padding: 3px 10px; border-radius: 2px; background: var(--offwh); border: 1px solid var(--bord); color: var(--mid); } @media (max-width: 768px) { .team-card { grid-template-columns: 1fr; } .team-card-left { border-right: none; border-bottom: 1px solid var(--bord); padding: 20px; } } /* ── FAQ ───────────────────────────────────────────────────────────────────── */ .faq-list { max-width: 780px; margin: 48px auto 0; } .faq-item { border-bottom: 1px solid var(--bord); } .faq-question { width: 100%; text-align: left; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 22px 0; gap: 20px; font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--navy); transition: color var(--transition); } .faq-question:hover { color: var(--goldd); } .faq-icon { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--bord); display: flex; align-items: center; justify-content: center; font-size: .9rem; color: var(--sub); transition: all var(--transition); } .faq-item.open .faq-icon { background: var(--navy); border-color: var(--navy); color: var(--gold); transform: rotate(45deg); } .faq-answer { overflow: hidden; max-height: 0; transition: max-height 0.4s ease, padding 0.3s ease; font-size: .93rem; color: var(--mid); line-height: 1.75; } .faq-answer-inner { padding-bottom: 20px; } .faq-item.open .faq-answer { max-height: 400px; } /* ── CTA SECTION ───────────────────────────────────────────────────────────── */ .cta-section { background: var(--navy); text-align: center; padding: 120px 0; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(201,168,76,.06) 0%, transparent 70%); } .cta-rule { width: 48px; height: 1px; background: var(--gold); margin: 0 auto 28px; } .cta-section h2 { font-size: clamp(2rem,3.5vw,3rem); font-weight: 300; color: #fff; margin-bottom: 20px; line-height: 1.2; } .cta-section h2 em { color: var(--gold); font-style: italic; } .cta-section p { font-size: 1.05rem; color: rgba(255,255,255,.55); max-width: 520px; margin: 0 auto 40px; line-height: 1.7; } .cta-contact { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; margin-top: 32px; } .cta-contact a { font-size: .82rem; color: rgba(255,255,255,.45); letter-spacing: .04em; transition: color var(--transition); } .cta-contact a:hover { color: var(--gold); } /* ── FOOTER ────────────────────────────────────────────────────────────────── */ footer { background: #060F1A; padding: 48px 0 32px; border-top: 1px solid rgba(201,168,76,.1); } .footer-inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 32px; margin-bottom: 40px; } .footer-brand { max-width: 280px; } .footer-brand .logo { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: #fff; margin-bottom: 12px; } .footer-brand .logo span { color: var(--gold); } .footer-brand p { font-size: .82rem; color: rgba(255,255,255,.35); line-height: 1.65; } .footer-links h4 { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .footer-links ul { list-style: none; } .footer-links li { margin-bottom: 8px; } .footer-links a { font-size: .82rem; color: rgba(255,255,255,.4); transition: color var(--transition); } .footer-links a:hover { color: rgba(255,255,255,.8); } .footer-bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,.06); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-bottom p { font-size: .75rem; color: rgba(255,255,255,.25); } /* ── SCROLL REVEAL ─────────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.visible { opacity: 1; transform: none; } /* ── RESPONSIVE ────────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .hero-content { grid-template-columns: 1fr; } .hero-card { display: none; } .aparna-grid { grid-template-columns: 1fr; } .aparna-img-wrap { max-width: 400px; } .outcomes-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 768px) { section { padding: 72px 0; } .gap-grid, .timeline-row, .grid-3 { grid-template-columns: 1fr; } .stat-row { grid-template-columns: 1fr; } .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); } .audience-grid { grid-template-columns: 1fr; } .outcomes-grid { grid-template-columns: 1fr 1fr; } .nav-links { display: none; } .hero h1 { font-size: 2.4rem; } .timeline-row { grid-template-columns: 1fr; } } @media (max-width: 480px) { .outcomes-grid { grid-template-columns: 1fr; } .cta-section { padding: 80px 0; } } /* ============================================================================ FOOTER ============================================================================ */ .footer { background: #002D62; color: white; padding: 60px 12%; } .footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 40px; margin-top: 40px; } .footer-col h3 { margin-bottom: 20px; } .footer-social a { font-size: 20px; margin-right: 12px; } .footer-bottom { margin-top: 40px; opacity: 0.7; text-align: center; } /* ============================================================================ RESPONSIVE FIXES ============================================================================ */ @media (max-width: 900px) { .leadership-flex { flex-direction: column; } } .hero-buttons { display: flex; flex-direction: row; justify-content: center; gap: 16px; margin-top: 25px; } .hero-buttons a { display: inline-block; padding: 14px 24px; background: #007BFF; color: #fff; font-size: 18px; font-weight: 600; border-radius: 10px; text-align: center; text-decoration: none; min-width: 260px; } .hero-buttons a:nth-child(2) { background: #0066e6; } @media (max-width: 600px) { .hero-buttons { flex-direction: column; gap: 12px; width: 100%; max-width: 380px; margin: auto; } .hero-buttons a { width: 100%; min-width: unset; padding: 16px 20px; border-radius: 12px; } } /* ============================= */ /* FIX: Nexora Header Visibility */ .aparna-img { width: 100%; max-width: 420px; border-radius: 12px; overflow: hidden; background: #0b2239; /* fallback */ } .aparna-img img { width: 100%; height: auto; display: block; object-fit: cover; } .modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); } .modal-content { background: #fff; padding: 30px; max-width: 400px; margin: 10% auto; border-radius: 10px; text-align: center; } .modal-content input { width: 100%; padding: 10px; margin: 10px 0; } .modal-content button { background: #c8a95b; color: #000; padding: 12px; border: none; width: 100%; cursor: pointer; } .close-btn { float: right; font-size: 20px; cursor: pointer; } /* Remove default spacing */ body { margin: 0; padding: 0; } /* Fix header layout */ .header { background: #0b1f3a; /* dark blue */ display: flex; align-items: center; justify-content: space-between; padding: 15px 40px; position: relative; z-index: 999; } /* Fix menu alignment */ .nav-links { display: flex; gap: 30px; align-items: center; } .nav-links li { list-style: none; } .nav-links a { color: #0ea5ff; text-decoration: none; font-size: 14px; font-weight: 500; } .navbar { display: flex; align-items: center; } .nav-links { margin: 0; padding: 0; } /* FIX HEADER ALIGNMENT */ .header { padding: 0 5%; } /* MAKE NAV TAKE FULL SPACE */ .navbar { flex: 1; display: flex; justify-content: center; /* center menu */ } /* FIX MENU WIDTH + CENTER */ .navbar .nav-links { justify-content: center; } /* FIX LOGO POSITION */ .logo-area { min-width: 150px; } /* OPTIONAL: PERFECT SPACING */ .nav-links li a { white-space: nowrap; } .header { background: #ffffff !important; } .form-modal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); } .form-box { background: #fff; width: 350px; padding: 30px; border-radius: 8px; margin: 10% auto; position: relative; text-align: center; } .form-box input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; } .form-box button { width: 100%; padding: 12px; background: #C9A84C; border: none; color: #000; font-weight: bold; cursor: pointer; } .close-btn { position: absolute; right: 15px; top: 10px; cursor: pointer; font-size: 22px; } .form-modal { display: none; /* 🔴 hides it initially */ position: fixed; /* 🔴 makes it popup */ z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); justify-content: center; /* center horizontally */ align-items: center; /* center vertically */ } .form-box { background: #fff; width: 350px; padding: 30px; border-radius: 8px; } .aparna-section { background: #ffffff !important; } .aparna-section .section-title, .aparna-section .section-body, .aparna-section p, .aparna-section span { color: #000 !important; } .aparna-grid, .aparna-img-wrap, .aparna-credential-strip { background: #ffffff !important; } .aparna-credential-strip { background: #ffffff !important; border-top: 2px solid #C9A84C; /* optional gold line */ } .aparna-credential-strip p { color: #000 !important; } .aparna-credential-strip strong { color: #C9A84C !important; } .tc-gold .team-card-left { background: #ffffff !important; } .tc-gold .team-name, .tc-gold .team-meta li { color: #000 !important; } .tc-gold .team-role { color: #C9A84C !important; } h1, h2, h3, h4, h5, h6 { color: #000 !important; } /* FORCE ALL HEADINGS BLACK */ h1, h2, h3, h4, h5, h6, .section-title, .section-eyebrow, .team-card-label, .team-name, .month-title, .audience-title, .outcome-title { color: #000 !important; } /* ALSO FIX SPECIAL CASES */ .programme-section .section-title, .outcomes-section .section-title, .tc-gold .team-card-label, .tc-teal .team-card-label, .tc-navy .team-card-label, .tc-amber .team-card-label, .tc-purp .team-card-label { color: #000 !important; } .team-role { color: #000 !important; } .aparna-credential-strip p, .aparna-credential-strip strong { color: #000 !important; } .aparna-section * { color: #000 !important; } /* FORCE APARNA TEXT BLACK */ .aparna-credential-strip, .aparna-credential-strip p, .aparna-credential-strip strong { background: #ffffff !important; color: #000000 !important; } /* ONLY TEAM SECTION HEADINGS BLACK */ .team-section h1, .team-section h2, .team-section h3, .team-section h4, .team-section h5, .team-section h6 { color: #000 !important; } /* ALSO fix roles + labels */ .team-section .team-role, .team-section .team-card-label, .team-section .team-name { color: #000 !important; } /* FIX HERO HEADING (make visible on dark background) */ .hero h1 { color: #ffffff !important; } .hero h1 em { color: #C9A84C !important; } /* FIX PROGRAMME SECTION HEADING (dark background) */ .programme-section .section-title { color: #ffffff !important; } .programme-section .section-body { color: rgba(255,255,255,0.7) !important; } .programme-section .section-eyebrow { color: #C9A84C !important; } /* FIX SMALL HEADINGS INSIDE PROGRAMME CARDS */ .programme-section .month-title { color: #ffffff !important; } /* FIX OUTCOMES SECTION (dark background) */ .outcomes-section .section-title { color: #ffffff !important; } .outcomes-section .section-eyebrow { color: #C9A84C !important; } .outcomes-section .outcome-title { color: #ffffff !important; } .outcomes-section .outcome-body { color: rgba(255,255,255,0.7) !important; } /* FIX CTA SECTION (dark background) */ .cta-section h2 { color: #ffffff !important; } .cta-section h2 em { color: #C9A84C !important; } .cta-section p { color: rgba(255,255,255,0.7) !important; } .cta-section a { color: rgba(255,255,255,0.8) !important; } /* FOOTER TITLE STYLE (small & premium) */ .footer-links h4 { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: rgba(255,255,255,0.6) !important; margin-bottom: 12px !important; }