.preloader, body { background: var(--bg); } .preloader, nav { top: 0; display: flex; } .loader-wrap, .logo, .preloader, nav { display: flex; } .btn-primary, .loader-track, body.loading { overflow: hidden; } .companies-label, .hero-badge, .section-label, .toggle-label-text { text-transform: uppercase; } .feature-list, .footer-section ul, .nav-links, .real-list, .topics-list { list-style: none; } .mentor-container, .video-container { scroll-behavior: smooth; scrollbar-width: none; } /* ── INLINED: moved to critical CSS in ─────────────────── */ /* *, ::after, ::before { box-sizing: border-box; margin: 0; padding: 0; } */ /* ── INLINED: moved to critical CSS in ─────────────────── */ /* :root { --bg: #0d0f14; --bg-alt: #111318; --card: #161920; --border: #2a2d36; --text: #f5f5f5; --muted: #888; --heading: #ffffff; --logo-color: #ffffff; --nav-bg: rgba(13, 15, 20, 0.92); --pro-accent: #f3bd00; --stu-accent: #f0845c; --green: #f3bd00; --green-glow: rgba(243, 189, 0, 0.25); --orange: #e8602f; --transition: 0.45s cubic-bezier(0.77, 0, 0.175, 1); --truly-real-bg: #000; --card-inner-bg: linear-gradient(to bottom, #000, #1e1e2f); --heading: #fff; --text: #ccc; --accent: #f3bd00; --shine-color: rgba(255, 255, 255, 0.35); --shine-soft: rgba(255, 255, 255, 0.08); --cursor-glow-color: rgba(243, 189, 0, 0.15); --cursor-follower-color: #f3bd00; } */ /* ── INLINED: moved to critical CSS in ─────────────────── */ /* ::selection { background-color: var(--accent); color: #000; } ::-moz-selection { background-color: var(--accent); color: #000; } */ /* ── INLINED: moved to critical CSS in ─────────────────── */ /* html.light-mode { --bg: #ffffff; --bg-alt: #f8f9fa; --card: #ffffff; --border: #e9ecef; --text: #1c1c1e; --muted: #6c757d; --heading: #0d0f14; --logo-color: #0d0f14; --nav-bg: rgba(255, 255, 255, 0.92); --green: #f3bd00; --truly-real-bg: #ffffff; --card-inner-bg: linear-gradient(to bottom, #ffffff, #f8f9fa); --shine-color: rgba(255, 255, 255, 0.75); --shine-soft: rgba(255, 255, 255, 0.2); --cursor-glow-color: rgba(243, 189, 0, 0.1); --cursor-follower-color: #e6a800; --hero-bg: #ffffff; --companies-bg: #ffffff; --table-bg: #fff8d6; --real-prefooter-bg: linear-gradient(180deg, #fff8d6 0%, #ffffff 100%); --problem-bg: #ffffff; --solution-bg: #fff8d6; --stats-bg: #ffffff; --contact-bg: #f3bd00; --testimonials-bg: #fff8d6; } */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd124 0, #f3bd00 60%, #e6a800 100%); border-radius: 10px; border: 2px solid #f1f1f1; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f3bd00 0, #e6a800 100%); } * { scrollbar-width: thin; scrollbar-color: #f3bd00 #f1f1f1; } /* ── INLINED: moved to critical CSS in ─────────────────── */ /* .preloader { position: fixed; left: 0; width: 100%; height: 100%; align-items: center; justify-content: center; z-index: 10000; transition: opacity 0.6s, visibility 0.6s; } .preloader.fade-out { opacity: 0; visibility: hidden; } .preloader-content { display: flex; flex-direction: column; align-items: center; gap: 2rem; } .preloader-logo img { width: 250px; } .loader-wrap { flex-direction: column; align-items: center; gap: 0.75rem; } .loader-track { width: 200px; height: 3px; background: rgba(243, 189, 0, 0.15); border-radius: 100px; } .loader-bar { height: 100%; width: 50%; background: linear-gradient( 90deg, transparent, var(--green) 40%, var(--green) 60%, transparent ); border-radius: 100px; animation: 1.6s ease-in-out infinite loaderSlide; } @keyframes loaderSlide { 0% { transform: translateX(-200%); } 100% { transform: translateX(500%); } } .loader-tagline { font-size: 0.75rem; color: rgba(128, 128, 128, 0.7); letter-spacing: 0.04em; margin: 0; } .loader-dots span { display: inline-block; animation: 1.4s ease-in-out infinite dotBounce; color: var(--green); } .nav-links a, body { color: var(--text); } .loader-dots span:nth-child(2) { animation-delay: 0.18s; } .loader-dots span:nth-child(3) { animation-delay: 0.36s; } @keyframes dotBounce { 0%, 100%, 60% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } */ /* [INLINED] body { font-family, min-height, overflow-x } moved to critical CSS */ body { transition: background-color 0.3s, color 0.3s; } /* [INLINED] nav { justify-content, align-items, padding, border-bottom, position, background, backdrop-filter, z-index } moved to critical CSS */ nav { transition: transform 0.3s ease-in-out, background-color 0.3s, border-color 0.3s; } /* ── INLINED: moved to critical CSS in ─────────────────── */ /* .logo, .nav-links { align-items: center; } */ nav.nav-hidden { transform: translateY(-100%); } /* ── INLINED: moved to critical CSS in ─────────────────── */ /* .logo { justify-content: center; } .logo img { width: 220px; } */ /* [INLINED] .logo-white, html.light-mode .logo-dark moved to critical CSS */ .modal-submit.loading .btn-spinner { display: block; } /* [INLINED] .logo-dark, html.light-mode .logo-white moved to critical CSS */ .audience-block, .fs-menu-close, .why-us-stats-scrollbar { display: none; } /* ── INLINED: moved to critical CSS in ─────────────────── */ /* .nav-links { display: flex; gap: 2rem; margin-left: auto; margin-right: 2.5rem; } */ /* ── INLINED: moved to critical CSS in ─────────────────── */ /* .nav-links a { text-decoration: none; font-size: 1rem; font-weight: 500; transition: color 0.2s; } */ .fs-dropdown-btn:hover, .fs-dropdown-content a:hover, .fs-link:hover, .hero-badge span, .nav-dropdown-content a:hover, .nav-links a:hover, .pro-block .section-label, .pro-block .solution-num, .table-section .section-label { color: var(--pro-accent); } .nav-dropdown { position: relative; display: inline-block; } .nav-dropdown:hover .nav-dropdown-content { opacity: 1; visibility: visible; top: calc(100% + 10px); } /* ── INLINED: moved to critical CSS in ─────────────────── */ /* .nav-dropbtn { display: flex; align-items: center; gap: 0.25rem; } */ .btn-outline, .btn-primary { font-size: 14px; font-weight: 600; gap: 0.5rem; font-family: Poppins, sans-serif; text-decoration: none; } /* ── INLINED: moved to critical CSS in ─────────────────── */ /* .nav-chevron { width: 16px; height: 16px; transition: transform 0.3s; } */ .fs-dropdown.active .chevron, .nav-dropdown:hover .nav-chevron { transform: rotate(180deg); } .nav-dropdown-content { position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); background-color: #fff; min-width: 350px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); border: 1px solid var(--border); border-radius: 12px; padding: 0.5rem; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 2000; } .nav-dropdown-content::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background-color: var(--nav-bg); border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .nav-dropdown-content a { padding: 0.85rem 1.25rem; font-size: 0.95rem; font-weight: 500; color: var(--text); display: block; transition: 0.25s; position: relative; z-index: 1; } /* ── INLINED: moved to critical CSS in ─────────────────── */ /* @media (min-width: 1025px) { .menu-toggle { display: none !important; } } */ @media (max-width: 1024px) { /* [INLINED] .nav-links { display: none !important } moved to critical CSS */ .fs-menu { display: flex; } } .btn-primary { color: #1c1c1e; background: var(--green); border: none; border-radius: 10px; padding: 10px; cursor: pointer; position: relative; transition: box-shadow 0.2s; box-shadow: 0 4px 20px rgba(243, 189, 0, 0.3); display: flex; align-items: center; justify-content: center; } /* [INLINED] .menu-toggle { background, cursor } moved to critical CSS */ .btn-outline { background: 0 0; cursor: pointer; } .btn-primary::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient( 120deg, transparent 0, rgba(255, 255, 255, 0.28) 50%, transparent 100% ); transform: skewX(-20deg); transition: left 0.5s; pointer-events: none; } .btn-primary:hover::after { left: 130%; } .btn-primary:hover { box-shadow: 0 6px 24px rgba(243, 189, 0, 0.4); } .btn-primary:active { transform: translateY(0); } .btn-outline { color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 9px 18px; transition: 0.2s; display: inline-flex; align-items: center; } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } /* ── INLINED: moved to critical CSS in ─────────────────── */ /* .menu-toggle { display: flex; flex-direction: column; gap: 6px; border: none; padding: 8px; margin-left: 1rem; z-index: 210; } */ .fs-menu, .fs-menu-content { width: 100%; display: flex; flex-direction: column; } /* ── INLINED: moved to critical CSS in ─────────────────── */ /* .menu-toggle span { display: block; width: 28px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } */ .fs-dropdown .chevron, .fs-menu-close svg { width: 24px; height: 24px; } .menu-toggle:hover span { background: var(--pro-accent); } .menu-toggle.active span:first-child { transform: translateY(8px) rotate(45deg); } .menu-toggle.active span:nth-child(2) { opacity: 0; transform: translateX(-10px); } .menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .fs-menu { position: fixed; top: var(--header-height, 73px); left: 0; height: calc(100vh - var(--header-height, 73px)); background: var(--nav-bg); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); z-index: 1000; align-items: flex-start; justify-content: flex-start; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); padding: 2rem 3rem; overflow-y: auto; } .fs-menu.active, .scroll-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .fs-menu-close:hover { transform: rotate(90deg); border-color: var(--pro-accent); color: var(--pro-accent); } .fs-menu-content { max-width: 600px; gap: 2.5rem; text-align: left; } .fs-dropdown, .fs-menu-links { flex-direction: column; display: flex; } /* [INLINED] .hero { text-align: center } moved to critical CSS */ .copyright, .footer-links { text-align: center; } .fs-menu-links { gap: 1.5rem; } .fs-dropdown-btn, .fs-link { font-size: 2rem; font-weight: 600; color: var(--heading); text-decoration: none; background: 0 0; border: none; cursor: pointer; font-family: Poppins, sans-serif; transition: 0.3s; display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; width: fit-content; } .divider, .fs-cta, section { width: 100%; } .fs-dropdown { gap: 1rem; } .fs-dropdown .chevron { transition: transform 0.3s; } .hero-badge::after, .program-card::after { position: absolute; width: 50%; content: ""; pointer-events: none; } .fs-dropdown-content { max-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.8rem; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .fs-dropdown.active .fs-dropdown-content { max-height: 600px; } .fs-dropdown-content a { font-size: 1.2rem; color: var(--muted); text-decoration: none; transition: color 0.2s; } .fs-cta { padding: 1.2rem !important; font-size: 1.1rem !important; margin-top: 1rem; } /* [INLINED] .hero { padding, max-width, margin, background } moved to critical CSS */ .hero { transition: background 0.5s; } /* ── INLINED: moved to critical CSS in ─────────────────── */ /* .hero > :not(.floating-icons) { max-width: 60rem; margin-left: auto; margin-right: auto; } */ /* ── INLINED: moved to critical CSS in ─────────────────── */ /* .hero-badge { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--pro-accent); border-radius: 100px; padding: 0.35rem 1rem; font-size: 0.75rem; color: var(--text); letter-spacing: 0.06em; margin-bottom: 2rem; overflow: hidden; } */ .pain-card, .toggle-pill { border: 1px solid var(--border); } /* ── INLINED: moved to critical CSS in ─────────────────── */ /* .hero-badge::after { inset: 0; left: -120%; background: linear-gradient( 110deg, transparent 0, var(--shine-soft) 40%, var(--shine-color) 50%, var(--shine-soft) 60%, transparent 100% ); transform: skewX(-18deg); animation: 3s linear infinite sweepShine; } */ /* ── INLINED: moved to critical CSS in ─────────────────── */ /* @keyframes sweepShine { from { left: -120%; } to { left: 140%; } } */ .blink-text { animation: 1.5s infinite blink; } /* [INLINED] h1 { font-family, font-size, font-weight, line-height, letter-spacing, margin-bottom, color } moved to critical CSS */ h1 { transition: color 0.3s; } /* ── INLINED: moved to critical CSS in ─────────────────── */ /* .hero-sub { font-size: 1.05rem; font-weight: 400; line-height: 1.75; color: var(--muted); max-width: 60rem; margin: 0 auto; } */ .toggle-section { display: flex; flex-direction: column; align-items: center; padding: 2rem 3rem 3rem; } .toggle-label-text { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 1.2rem; } .toggle-pill { display: flex; align-items: center; background: var(--card); border-radius: 100px; padding: 5px; gap: 4px; } .toggle-option { padding: 0.75rem 2rem; border-radius: 100px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.35s, color 0.35s; user-select: none; white-space: nowrap; } .toggle-option.active-pro, .toggle-option.active-stu { background: var(--pro-accent); color: #000; } .toggle-option:not(.active-pro):not(.active-stu) { background: 0 0; color: var(--muted); } .toggle-option:not(.active-pro):not(.active-stu):hover { color: #ccc; } .audience-block.active { display: block; animation: 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards fadeUp; } @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .truly-real-section { background: var(--truly-real-bg); padding-bottom: 5rem; } .section-inner { max-width: 1200px; margin: 0 auto; padding: 5rem 3rem; } .section-label { font-size: 0.72rem; letter-spacing: 0.16em; margin-bottom: 1rem; font-weight: 500; color: var(--pro-accent); } .pain-card h3, .section-heading { color: var(--heading); font-family: Poppins, serif; transition: color 0.3s; } .stu-block .section-label, .stu-block .solution-num { color: var(--stu-accent); } .section-heading { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 1rem; } .section-sub { font-size: 1rem; color: var(--muted); line-height: 1.75; max-width: 580px; margin-bottom: 3rem; } .divider { max-width: 960px; margin: 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); } .pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.2rem; } .pain-card { background: var(--card); border-radius: 16px; padding: 1.8rem; } .pain-icon { width: 8rem; height: 8rem; overflow: hidden; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; } .mentor-image-wrapper img, .pain-icon img, .t-avatar img { width: 100%; height: 100%; object-fit: cover; } .pain-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; } .pain-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.65; } .problem-section, .stats-section { background: var(--bg-alt); transition: background-color 0.3s; } .solution-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.5rem; } .solution-item { display: flex; gap: 1.1rem; align-items: flex-start; } .solution-num { font-family: Satisfy, serif; font-size: 2rem; font-weight: 700; line-height: 1; flex-shrink: 0; margin-top: 2px; } .solution-text h4 { font-family: Poppins, serif; font-size: 1rem; color: var(--heading); margin-bottom: 0.4rem; transition: color 0.3s; } .solution-text p { font-size: 0.84rem; color: var(--muted); line-height: 1.65; } .testimonials-section { overflow: hidden; padding: 5rem 0; } .testimonials-header { max-width: 1200px; margin: 0 auto 3rem; padding: 0 3rem; } .marquee-wrapper { display: flex; flex-direction: column; gap: 1.2rem; mask-image: linear-gradient( to right, transparent 0%, black 8%, black 92%, transparent 100% ); -webkit-mask-image: linear-gradient( to right, transparent 0%, black 8%, black 92%, transparent 100% ); } .marquee-track { display: flex; gap: 1.2rem; width: max-content; will-change: transform; } .marquee-track.row-1 { animation: 40s linear infinite marquee-left; } .marquee-track.row-2 { animation: 35s linear infinite marquee-right; } .companies-track:hover, .marquee-wrapper:hover .marquee-track { animation-play-state: paused; } @keyframes marquee-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes marquee-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } .t-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.6rem; width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1rem; } .stars { color: #f5c842; font-size: 1.1rem; letter-spacing: 2px; } .t-card blockquote { font-size: 0.88rem; color: var(--text); line-height: 1.7; font-style: italic; } .t-author { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; } .t-avatar { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--accent); overflow: hidden; background: rgba(243, 189, 0, 0.1); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .author-name { font-size: 0.85rem; color: var(--heading); font-weight: 500; } .author-role { font-size: 0.8rem; color: var(--muted); } .mentor-section .section-inner, .programs-section .section-inner { padding-bottom: 2rem; } .mentor-section { background: var(--bg-alt); padding-bottom: 5rem; } .programs-section { border-top: 1px solid rgba(243, 189, 0, 0.15); border-bottom: 1px solid rgba(243, 189, 0, 0.15); position: relative; padding-bottom: 5rem; } .view-more-container { display: flex; justify-content: center; align-items: center; margin-top: 2rem; position: relative; z-index: 10; } .btn-view-all { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 2.2rem; background: var(--pro-accent, #f3bd00); color: #1c1c1e; font-family: Poppins, sans-serif; font-weight: 600; font-size: 1rem; transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 4px 15px rgba(243, 189, 0, 0.3); } .carousel-wrapper { display: flex; align-items: center; gap: 1rem; max-width: 1250px; margin: 0 auto; } .btn-nav { border: none; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s, opacity 0.2s; } .btn-nav:hover, .mentor-scroll-btn:hover, .video-nav-btn:hover { background: #f3bd00; box-shadow: 0 4px 16px 0 #f3bd00; } .btn-nav:disabled { opacity: 0.25; cursor: default; pointer-events: none; } .btn-nav svg { pointer-events: none; } .programs-track-wrapper, .programs-viewport { overflow: hidden; flex: 1; min-width: 0; } .program-track, .programs-track { display: flex; gap: 1.25rem; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; padding: 0.3rem; } .program-card { flex: 0 0 calc(33.333% - 0.833rem); background: var(--surface, var(--card)); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; cursor: pointer; position: relative; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); -webkit-font-smoothing: subpixel-antialiased; } .program-card::after { top: 0; left: -150%; height: 100%; background: linear-gradient( to right, transparent 0, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 90%, transparent 100% ); transform: skewX(-25deg); transition: none; z-index: 5; } .program-card:hover { border-color: var(--pro-accent); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 20px rgba(243, 189, 0, 0.1); } .program-card:hover::after { left: 150%; transition: 0.7s ease-in-out; } .program-card-image-wrapper { position: relative; flex-shrink: 0; } .program-card .ne-img img, .program-card-image { width: 100%; height: 190px; object-fit: cover; display: block; } .program-card-image-badges { position: absolute; bottom: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 0.4rem; } .badge-cohort, .badge-seats-left { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 500; padding: 0.3rem 0.65rem; border-radius: 20px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); white-space: nowrap; color: #fff; } .badge-seats-left { background: rgba(239, 68, 68, 0.85); } .badge-cohort { background: rgba(99, 102, 241, 0.75); } .program-card-top-badges { display: inline-flex; align-items: flex-start; gap: 0.4rem; padding: 1rem 0.75rem 0; } .program-badge { gap: 0.3rem; font-size: 0.72rem; padding: 0.28rem 0.6rem; font-weight: 500; border-radius: 5px; line-height: 1; white-space: nowrap; } .footer-section h4, .program-card-title { font-weight: 600; color: var(--text); font-family: Poppins, sans-serif; } .badge-highlight { background: rgba(243, 189, 0, 0.1); color: var(--text); border: 1px solid rgba(243, 189, 0, 0.25); } .bottom-section, .footer-overlap, .program-card-footer { border-top: 1px solid var(--border); } .program-card-body { padding: 0.75rem 0.75rem 1.6rem; display: flex; flex-direction: column; flex: 1; position: relative; } .program-card-title { font-size: 1.05rem; line-height: 1.35; margin-bottom: 0.55rem; transition: color 0.3s; } .program-card-desc { font-size: 0.875rem; color: var(--muted); line-height: 1.75; flex: 1; } .brand-section, .meta-item-wrapper { display: flex; flex-direction: column; } .meta-item-wrapper { gap: 0.75rem; margin: 0.5rem 0; } .program-card-footer { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.75rem; padding-top: 1.1rem; } .btn-primary.program-cta, .program-card-footer a { flex: 1; justify-content: center; } @media (max-width: 767px) { .carousel-wrapper { flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 0 1.5rem; } .programs-section { padding-bottom: 2rem; } .programs-viewport { flex: 0 0 100%; order: -1; overflow: visible; min-width: 0; } .program-track { flex-direction: column; gap: 1rem; padding: 0.25rem 0 1.5rem; transform: none !important; transition: none; } .program-track::-webkit-scrollbar { display: none; } .program-card { width: 100%; } .program-card-image { height: 190px; } .program-card-body { padding: 1.25rem 1.35rem; } .program-card-title { font-size: 1rem; } .btn-nav { display: none; } } @media (min-width: 768px) and (max-width: 1100px) { .program-card { flex: 0 0 calc(50% - 0.625rem); } } .footer-overlap { background: var(--bg-alt); padding: 2rem 1.5rem; } .main-footer-content { display: grid; grid-template-columns: 1fr; gap: 32px; } .brand-section { gap: 5px; } .contact-info, .social-links { gap: 16px; display: flex; } .brand-section .logo-container { margin-bottom: 16px; } .brand-section .logo-container img { height: 32px; width: auto; } .footer-links a, .social-links a { color: var(--text); text-decoration: none; transition: color 0.3s; } .contact-item a:hover, .footer-links a:hover, .footer-section ul li a:hover, .social-links a:hover { color: var(--green); } .social-links i { font-size: 20px; cursor: pointer; } .footer-section h4 { font-size: 18px !important; margin-bottom: 24px; } .address-item address, .contact-item a, .copyright, .footer-section ul li a { font-size: 14px !important; } .footer-section ul li { margin-bottom: 12px; } .footer-section ul li a { color: var(--text); text-decoration: none; font-family: Poppins, sans-serif; transition: color 0.3s; display: block; } .contact-info { flex-direction: column; } .contact-item { display: flex; align-items: center; gap: 12px; } .contact-item a { color: var(--text); text-decoration: none; font-family: Poppins, sans-serif; transition: color 0.3s; display: flex; align-items: center; gap: 8px; } .address-item address i, .contact-item i { color: var(--green); margin-right: 8px; } .address-item address, .copyright, .footer-links { font-family: Poppins, sans-serif; color: var(--text); } .address-item { display: flex; align-items: flex-start; gap: 12px; } .address-item address { font-style: normal; } .bottom-section { margin-top: 1rem; padding-top: 1rem; } .bottom-content { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 16px; } .footer-links { font-size: 12px; } .wrapper { display: flex; gap: 2rem; width: 100%; border: 1px solid var(--border); padding: 1rem; border-radius: 30px; transition: border-color 0.3s; } .our-card { flex: 1; border-radius: 28px; padding: 2px; background: linear-gradient(145deg, var(--green), #a8e063 60%); box-shadow: 0 0 40px var(--green-glow), 0 4px 20px rgba(0, 0, 0, 0.08); animation: 3s ease-in-out infinite pulse-glow; } .others-card, .our-inner { background: var(--card); padding: 0.5rem 1.5rem; } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 30px var(--green-glow), 0 4px 20px rgba(0, 0, 0, 0.08); } 50% { box-shadow: 0 0 55px var(--green-glow), 0 4px 24px rgba(0, 0, 0, 0.1); } } .our-inner { border-radius: 26px; height: 100%; transition: background-color 0.3s; } .logo-area, .others-header { height: 62px; margin-bottom: 0.5rem; display: flex; } .logo-area { align-items: center; } .logo-area img { height: 44px; width: 220px; object-fit: contain; } .others-card { flex: 1; border: 1px solid var(--border); border-radius: 28px; position: relative; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transition: background-color 0.3s, border-color 0.3s; } .others-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse at top right, rgba(232, 96, 47, 0.04), transparent 65% ); pointer-events: none; } .others-header { align-items: center; gap: 1rem; } .others-header svg { color: var(--muted); flex-shrink: 0; } .others-header h2 { font-family: Lato, sans-serif; font-weight: 500; font-size: 2rem; color: var(--muted); letter-spacing: -0.02em; transition: color 0.3s; } .company-logo span, .why-us-counter-number { font-weight: 700; font-family: Poppins, sans-serif; } .feature { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); transition: background 0.2s; } .feature:last-child { border-bottom: none; } .feature p { font-size: 1.05rem; line-height: 1.45; color: var(--text); transition: color 0.3s; } .company-logo span, .others-card .feature p { color: var(--muted); } .icon-check, .icon-x { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .icon-check { background: rgba(34, 197, 94, 0.12); color: #15803d; border: 1.5px solid rgba(34, 197, 94, 0.35); } .icon-x { background: rgba(232, 96, 47, 0.08); color: var(--orange); border: 1.5px solid rgba(232, 96, 47, 0.3); } .icon-check svg, .icon-x svg { width: 13px; height: 13px; } .why-us-stats-grid { display: flex; flex-direction: row; gap: 1rem; } .why-us-counter-content { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } @media (min-width: 768px) { .why-us-stats-grid { display: flex; justify-content: space-between; align-items: stretch; flex-direction: row; } .why-us-stats-grid > div:not(:last-child) { border-right: 1px solid #e5e7eb; } } .why-us-counter-card { flex: 1; text-align: center; } .why-us-counter-icon { display: inline-flex; align-items: center; justify-content: center; background: rgba(243, 189, 0, 0.08); border: 1.5px solid rgba(243, 189, 0, 0.2); padding: 12px; border-radius: 12px; margin-bottom: 16px; font-size: 24px; width: 50px; height: 50px; } .why-us-counter-icon svg { width: 32px; height: 32px; fill: #000000; } .why-us-counter-icon-bg { font-size: 1.875rem; aspect-ratio: 1; padding: 0.5rem; border-radius: 0.75rem; background: var(--ed-primary-color); color: var(--ed-secondary-color); box-shadow: 0 4px 6px rgb(0 0 0 / 0.1); transition: transform 0.3s; } .why-us-counter-number { font-size: 1.9rem; color: #f3bd00; } .why-us-counter-suffix { color: var(--ed-primary-color); } .why-us-counter-title { font-size: 1rem; font-weight: 400; font-family: Poppins, sans-serif; line-height: 1.2; margin-bottom: 0; } @media (min-width: 640px) { .main-footer-content { grid-template-columns: repeat(2, 1fr); gap: 48px; } .footer-section h4 { font-size: 20px; } .address-item address, .contact-item a, .footer-section ul li a { font-size: 16px; } .bottom-content { flex-direction: row; gap: 0; } .copyright, .footer-links { text-align: left; } .why-us-counter-content { gap: 0.5rem; } .why-us-counter-icon-bg { padding: 1rem; } .why-us-counter-number { font-size: 2rem; } .why-us-counter-title { font-size: 1rem; } .why-us-counter-card { padding: 1.5rem 1rem; } } @media (max-width: 767.99px) { .why-us-stats-grid { display: flex; flex-direction: column; gap: 0.75rem; } .why-us-counter-card { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 1rem; text-align: left; } .why-us-counter-icon { flex-shrink: 0; margin-bottom: 0; } .why-us-counter-content { flex: 1; align-items: flex-start; text-align: left; gap: 0; } .why-us-counter-number { text-align: left; } } .companies-label, .country-code, .cta-inner, .mentor-card, .modal-privacy, .modal-success, .otp-input { text-align: center; } .video-slider-wrapper { position: relative; max-width: 1000px; margin: 0 auto; } .video-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); border: none; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; z-index: 10; transition: 0.3s; cursor: pointer; } .video-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; filter: grayscale(1); } .video-nav-btn.prev { left: -20px; } .video-nav-btn.next { right: -20px; } @media (max-width: 1100px) { .video-nav-btn.prev { left: 10px; } .video-nav-btn.next { right: 10px; } } .video-container { display: flex; max-width: 920px; margin: 2rem auto 0; padding: 0 20px; gap: 20px; -ms-overflow-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; } .video-wrapper { flex-shrink: 0; scroll-snap-align: start; width: 280px; height: 500px; overflow: hidden; } .video-loader { width: 280px; height: 500px; display: flex; align-items: center; justify-content: center; background: #000; border-radius: 10px; } .video-spinner { width: 40px; height: 40px; border: 4px solid rgba(243, 189, 0, 0.1); border-left-color: #f3bd00; border-radius: 50%; animation: 1s linear infinite video-spin; } @keyframes video-spin { to { transform: rotate(360deg); } } .video-container::-webkit-scrollbar { display: none; } .video-wrapper { flex-shrink: 0; border: 1px solid #f3bd00; border-radius: 10px; } .video-facade { position: relative; width: 280px; height: 500px; cursor: pointer; overflow: hidden; border-radius: 10px; background-color: #000; } .video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; } @media (hover: hover) { .video-facade:hover img { transform: scale(1.05); } } .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); cursor: pointer; transition: background 0.3s; } .play-btn:hover { background: #fff; } .play-btn::before { content: ""; position: absolute; left: 24px; top: 18px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #000; } .video-frame { display: block; border-radius: 10px; width: 280px; height: 500px; } .companies-section { padding: 2.5rem 0; overflow: hidden; position: relative; } .companies-label { font-size: 0.7rem; letter-spacing: 0.2em; color: var(--text); margin-bottom: 1rem; opacity: 0.7; } .companies-track-wrapper { position: relative; mask-image: linear-gradient( to right, transparent 0%, black 10%, black 90%, transparent 100% ); -webkit-mask-image: linear-gradient( to right, transparent 0%, black 10%, black 90%, transparent 100% ); } .companies-track { display: flex; align-items: center; gap: 0; width: max-content; animation: 30s linear infinite companies-scroll; margin-top: 2rem; } @keyframes companies-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .company-logo { display: flex; align-items: center; justify-content: center; padding: 0 3rem; border-right: 1px solid var(--border); flex-shrink: 0; transition: opacity 0.2s; cursor: default; height: auto; } .cards, .mentor-card { flex-direction: column; } .company-logo img { width: 120px; filter: grayscale(1) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1)); transition: 0.3s; } .company-logo img:hover { filter: grayscale(0) drop-shadow(0 6px 15px rgba(243, 189, 0, 0.3)); transform: translateY(-3px) scale(1.05); } html.dark-mode .company-logo img { filter: invert(1) brightness(1.5); } .company-logo:hover { opacity: 1 !important; } .company-logo svg { height: 22px; width: auto; fill: var(--muted); opacity: 0.45; transition: fill 0.3s, opacity 0.3s; } .company-logo:hover svg { fill: var(--pro-accent); opacity: 0.9; } .company-logo span { font-size: 1rem; opacity: 0.4; letter-spacing: -0.02em; white-space: nowrap; transition: color 0.3s, opacity 0.3s; } .company-logo:hover span { color: var(--pro-accent); opacity: 0.9; } .cards { display: flex; align-items: center; gap: 16px; max-width: 1200px; margin: 0 auto; } .card-border { width: 100%; clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%); background: linear-gradient(to bottom, transparent, var(--accent)); padding: 6px 6px 3px; transition: filter 0.3s; } .card-border:hover { filter: brightness(1.15); } .card-inner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%); background: var(--card-inner-bg); padding: 1.25rem 1.25rem 1.25rem 1.5rem; min-height: 140px; gap: 1rem; transition: background 0.3s; } .card-inner-text { flex: 1; min-width: 0; } .card-img { flex: 0 0 80px; display: flex; align-items: center; justify-content: center; } .card-img img { width: 100%; height: auto; max-width: 80px; object-fit: contain; } .card-inner-header { font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 600; color: var(--heading); font-family: Poppins, sans-serif; transition: color 0.3s; line-height: 1.2; } .card-desc { margin-top: 8px; font-size: clamp(0.8rem, 2vw, 0.9rem); font-weight: 300; color: var(--text); line-height: 1.6; text-transform: capitalize; transition: color 0.3s; } .cta-label, .info-badge, .modal-badge { text-transform: uppercase; } @media (min-width: 480px) { .card-border { clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%); } .card-inner { clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%); padding: 1.25rem 2rem 1.25rem 2.5rem; } .card-img { flex: 0 0 110px; } .card-img img { max-width: 110px; } } @media (min-width: 768px) { .why-us-counter-card { padding: 1.5rem; } .card-border { width: 92%; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); padding: 8px 8px 3px; } .card-inner { clip-path: polygon(0 0, 100% 0, 89% 100%, 11% 100%); padding: 1.5rem 5% 1.5rem 7%; min-height: 160px; } .card-img { flex: 0 0 130px; } .card-img img { max-width: 130px; } } @media (min-width: 1024px) { .main-footer-content { grid-template-columns: repeat(3, 1fr); } .footer-overlap { padding: 4rem 3rem 2.5rem; } .why-us-counter-number { font-size: 2rem; } .why-us-counter-title { font-size: 1rem; } .cards { gap: 20px; } .card-border { width: 90%; clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); padding: 10px 16px 3px; } .card-inner { clip-path: polygon(0 0, 100% 0, 81% 100%, 19% 100%); padding: 1.5rem 15% 1.5rem 20%; min-height: 180px; gap: 2rem; } .card-img { flex: 0 0 150px; } .card-img img { max-width: 140px; } .card-inner-header { font-size: 2.25rem; } .card-desc { font-size: 1rem; margin-top: 12px; } } @media (min-width: 1280px) { .card-inner-header { font-size: 3rem; } } .realwork-container { display: flex; flex-wrap: wrap; gap: 3rem; max-width: 1200px; margin: 0 auto 4rem; padding: 0 2rem; } .realwork-info { flex: 1 1 380px; } .realwork-visual { flex: 1 1 440px; min-width: 280px; } .info-badge { color: var(--accent); font-weight: 700; letter-spacing: 1.5px; font-size: 0.85rem; margin-bottom: 1rem; } .info-heading { font-size: 2.3rem; font-weight: 800; line-height: 1.2; font-family: Poppins, sans-serif; margin-bottom: 1.2rem; } .info-desc { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 1.8rem; } .list-check, .mentor-card:hover .mentor-name, .success-icon svg { color: var(--accent); } .real-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 1.5rem 0; } .real-list li { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; } .list-check { font-weight: 700; font-size: 1.3rem; } .info-footnote { margin-top: 2rem; font-style: italic; border-left: 4px solid var(--accent); color: var(--text-muted); } .mentor-card:hover, .mentor-card:hover .mentor-image-wrapper { border-color: var(--accent); } .feature-icon, .hero-carousel-nav { align-items: center; color: #1c1c1e; } .visual-carousel { position: relative; width: 100%; background: var(--card); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); height: 450px; border-radius: 1rem; overflow: hidden; } .carousel-slides-container { position: relative; height: 100%; } .carousel-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; } .carousel-slide.active, .modal-overlay.active { opacity: 1; visibility: visible; } .carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; background: #f5f5f5; border: none; border-radius: 50%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; display: flex; justify-content: center; opacity: 0.5; transition: 0.3s; } .mentor-container-wrapper:hover .mentor-scroll-btn, .visual-carousel:hover .hero-carousel-nav, body:hover .cursor-follower, body:hover .cursor-glow { opacity: 1; } .hero-carousel-nav:hover { background: #f3bd00; transform: translateY(-50%) scale(1.1); } .hero-carousel-nav.prev { left: 1rem; } .hero-carousel-nav.next { right: 1rem; } .hero-carousel-indicators { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.75rem; } .hero-indicator { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgb(245 245 245 / 0.5); border: none; cursor: pointer; transition: 0.3s; } .hero-indicator.active { background: #f3bd00; transform: scale(1.25); } .hero-indicator:hover:not(.active) { opacity: 0.75; } .feature-item { display: flex; align-items: flex-start; margin-bottom: 0.5rem; font-size: 1rem; line-height: 1.5; } .feature-icon { display: inline-flex; justify-content: center; width: 20px; height: 20px; background: #f3bd00; border-radius: 50%; margin-right: 1rem; margin-top: 2px; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; } .realwork-section-sub { font-size: 1rem; color: var(--muted); line-height: 1.75; max-width: 580px; margin-bottom: 1rem; } .custom-scrollbar { width: 10%; height: 6px; background-color: #e5e7eb; border-radius: 3px; margin: 30px auto; position: relative; cursor: pointer; margin-bottom: 0; } .scrollbar-thumb, .scrollbar-thumb:active, .scrollbar-thumb:hover { background-color: #f3bd00; } .scrollbar-thumb { height: 100%; border-radius: 3px; position: absolute; top: 0; left: 0; transition: background-color 0.2s; cursor: grab; } .scrollbar-thumb:active { cursor: grabbing; } @media screen and (max-width: 768px) { .custom-scrollbar { width: 30%; } } .mentor-container-wrapper { position: relative; max-width: 1200px; margin: 0 auto; } .mentor-scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); border: none; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; z-index: 10; opacity: 0; transition: 0.3s; cursor: pointer; } .mentor-scroll-btn-left { left: 10px; } .mentor-scroll-btn-right { right: 10px; } .mentor-container { display: flex; gap: 2rem; overflow-x: auto; justify-content: space-between; align-items: stretch; max-width: 1200px; margin: 0 auto; padding: 0.5rem 3rem; } .mentor-card { min-width: 350px; width: 100%; background: var(--bg); border: 2px solid var(--border); border-radius: 20px; display: flex; align-items: center; gap: 1rem; transition: 0.3s; } .mentor-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(243, 189, 0, 0.1); } .mentor-card-content { padding: 24px; text-align: center; display: flex; flex-direction: column; height: 100%; justify-content: space-between; } .mentor-image-container { position: relative; flex-shrink: 0; width: 96px; height: 96px; margin: 0 auto 16px; } .mentor-image-wrapper { width: 100px; height: 100px; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 4px solid var(--accent); transition: 0.3s; } .linkedin-badge { position: absolute; bottom: 0; right: 0; background: #0077b5; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 4px 8px rgb(0 0 0 / 0.2); cursor: pointer; transition: transform 0.2s; } .linkedin-badge:hover { transform: scale(1.1); } .linkedin-icon { width: 16px; height: 16px; fill: #fff; } .mentor-info { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; gap: 8px; flex-shrink: 0; } .mentor-info .mentor-position { margin-bottom: 0 !important; font-size: 1rem; font-weight: 500; color: var(--accent); } .mentor-name { font-size: 20px; font-weight: 700; color: var(--heading); transition: color 0.2s; } .mentor-description { color: var(--text); margin-bottom: 16px; font-size: 0.9rem; line-height: 1.5; flex-grow: 1; min-height: 60px; } .expertise-section { margin-bottom: 24px; flex-shrink: 0; } .expertise-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 8px; color: var(--text); } .badge, .connect-button, .tag { font-weight: 500; } .expertise-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 80px; align-items: flex-start; } .badge { background: rgb(243 189 0 / 0.1); color: #f3bd00; padding: 4px 12px; border-radius: 6px; font-size: 12px; transition: 0.2s; border: 1px solid #fff0; } .career-dot, .connect-button, .prog-nav-btn { transition: 0.3s; cursor: pointer; } .badge:hover { background: #f3bd00; color: #fff; } .connect-button { width: 100%; background: #f3bd00; color: #1c1c1e; border: none; padding: 12px 16px; border-radius: 6px; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; margin-top: auto; } .connect-button:hover { background: rgb(243 189 0 / 0.9); box-shadow: 0 4px 12px rgb(243 189 0 / 0.3); } .card:hover .connect-button { box-shadow: 0 8px 25px rgb(243 189 0 / 0.4); } @media (max-width: 768px) { .wrapper { flex-direction: column; } .others-card, .our-inner { padding: 1.5rem; } .video-slider-wrapper { margin-top: 40px; margin-bottom: 80px; margin-left: 20px; } .video-nav-btn { opacity: 1; top: auto; bottom: -70px; transform: none; } .video-nav-btn.prev { left: calc(50% - 60px); right: auto; } .video-nav-btn.next { right: calc(50% - 60px); } .mentor-container { gap: 1rem; padding: 0.5rem 3rem; } @media (max-width: 640px) { .mentor-container { padding: 0.5rem 1.5rem; } } .mentor-card { min-width: 350px; height: auto; min-height: 420px; } .mentor-card-content { padding: 20px; } .mentor-image-container { position: relative; flex-shrink: 0; width: 80px; height: 80px; margin: 0 auto 16px; } .mentor-image-wrapper { border: 3px solid; } .linkedin-badge { border: 1px solid #fff; width: 24px; height: 24px; } .linkedin-icon { width: 14px; height: 14px; fill: #fff; } .mentor-image-wrapper { width: 80px; height: 80px; } .mentor-name { font-size: 18px; } .mentor-description { font-size: 13px; } .expertise-tags { min-height: 70px; } .mentor-scroll-btn-left { left: 0; } .mentor-scroll-btn-right { right: 0; } } @media (max-width: 1024px) and (min-width: 769px) { .mentor-card { min-width: 350px; height: 500px; } } @media (max-width: 480px) { .mentor-card { min-width: min(350px, 80vw); min-height: auto; } } .programs-controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2rem; } .card-meta, .prog-nav-btn { display: flex; align-items: center; } .prog-nav-btn { width: 48px; height: 48px; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 50%; justify-content: center; } .prog-nav-btn:hover { background: var(--pro-accent); color: #000; border-color: var(--pro-accent); box-shadow: 0 4px 16px var(--green-glow); } .career-dots { display: flex; gap: 0.5rem; } .career-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); } .career-dot.active { background: var(--pro-accent); width: 20px; border-radius: 4px; } .ne-img, .select-wrapper { position: relative; } .program-card .ne-img .ne-scan { position: absolute; inset: 0; background: linear-gradient( 0deg, rgba(243, 189, 0, 0.03) 0, rgba(243, 189, 0, 0.03) 1px, transparent 1px, transparent 3px ); } .program-card .ne-img .ne-badge { position: absolute; top: 12px; left: 12px; font-family: Lato, sans-serif; font-size: 0.6rem; letter-spacing: 3px; text-transform: uppercase; border: 1px solid #f3bd00; padding: 3px 8px; background: #f3bd00; box-shadow: 0 0 10px rgba(243, 189, 0, 0.2); color: #000; } .card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; } .tag { font-size: 0.68rem; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(243, 189, 0, 0.15); padding: 3px 9px; border-radius: 6px; transition: background 0.2s; } .prog-card:hover .tag { background: rgba(243, 189, 0, 0.12); } .card-meta { gap: 1rem; font-size: 0.78rem; color: var(--muted); margin-bottom: 1.2rem; flex-wrap: wrap; } .meta-item, .seats-badge { display: flex; align-items: center; } .meta-item { gap: 0.5rem; font-size: 0.88rem; color: var(--text); } .meta-item svg { width: 16px; height: 16px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .seats-badge { position: absolute; bottom: 10px; right: 10px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; background: rgba(232, 96, 47, 0.92); color: #fff; padding: 4px 10px; border-radius: 6px; z-index: 2; gap: 0.35rem; backdrop-filter: blur(6px); } .seats-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; display: inline-block; animation: 1.2s ease-in-out infinite blink; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .interviews-pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; color: var(--green); background: rgba(243, 189, 0, 0.07); border: 1px solid rgba(243, 189, 0, 0.22); border-radius: 8px; padding: 5px 11px; margin-bottom: 1rem; width: fit-content; } .interviews-pill svg { width: 13px; height: 13px; stroke: var(--green); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } @media (min-width: 767px) { .fs-menu-cta { display: none; } } .cursor-follower, .cursor-glow { position: fixed; pointer-events: none; z-index: 99999999999; border-radius: 50%; transform: translate(-50%, -50%); transition: opacity 0.3s, transform 0.1s ease-out; opacity: 0; } .cursor-glow { width: 400px; height: 400px; background: radial-gradient( circle, var(--cursor-glow-color) 0, transparent 70% ); filter: blur(40px); } .cursor-follower { width: 20px; height: 20px; background: 0 0; border: 2px solid var(--cursor-follower-color); box-shadow: 0 0 10px var(--cursor-glow-color); } /* ── INLINED: moved to critical CSS in ─────────────────── */ /* .text-highlight { color: var(--green); position: relative; display: inline-block; } .text-highlight img { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 100%; height: 10px; overflow: clip; } */ .cta-inner { margin: 0 auto; background: #0d0f14; padding: 4rem; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; } .cta-inner::before { content: ""; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 300px; height: 300px; background: radial-gradient( circle, rgba(243, 189, 0, 0.12) 0, transparent 70% ); pointer-events: none; } .cta-label { font-size: 0.72rem; letter-spacing: 0.16em; font-weight: 500; color: var(--accent); margin-bottom: 1rem; } .cta-heading { font-family: Poppins, serif; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; color: #fff; margin-bottom: 1rem; line-height: 1.1; letter-spacing: -0.02em; } .cta-heading em, .modal-title em { font-style: italic; color: var(--accent); font-family: Satisfy; } .cta-sub { font-size: 1rem; color: #888; max-width: 500px; line-height: 1.7; margin-bottom: 2rem; } .cta-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .cta-note { margin-top: 1.5rem; font-size: 0.8rem; color: #888; } .cta-button-outline { color: #fff; } @media (max-width: 640px) { /* [INLINED] .nav-cta { display:none } moved to critical CSS */ .nav-links { display: none; } /* [INLINED] nav { padding: 1.2rem 1.5rem } moved to critical CSS */ .theme-toggle { margin-left: 0.5rem; } .fs-menu { padding: 1rem 1.5rem; align-items: flex-start; } .fs-menu-content { gap: 2rem; display: flex; flex-direction: column; } .fs-dropdown-btn, .fs-link { font-size: 1.5rem; width: 100%; } .section-inner { padding: 3.5rem 1.5rem; } .testimonials-header { padding: 0 1.5rem; } .cta-inner { padding: 2.5rem 1.5rem; } } .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; visibility: hidden; transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .modal-box { background: var(--card); border: 1px solid var(--border); border-radius: 28px; width: 100%; max-width: 520px; min-height: 546px; display: flex; flex-direction: column; position: relative; overflow: hidden; transform: translateY(28px) scale(0.97); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(243, 189, 0, 0.08); } .modal-overlay.active .modal-box { transform: translateY(0) scale(1); } @keyframes shimmerBar { 0% { background-position: 0 center; } 100% { background-position: 200% center; } } .modal-header { padding: 2rem 2rem 1.25rem; position: relative; z-index: 1; } .modal-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(243, 189, 0, 0.1); border: 1px solid rgba(243, 189, 0, 0.25); color: var(--accent); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; padding: 0.3rem 0.8rem; border-radius: 100px; margin-bottom: 1rem; } .modal-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; animation: 1.5s ease-in-out infinite pulseDot; } @keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } } .modal-title { font-family: Poppins, sans-serif; font-size: 1.45rem; font-weight: 700; color: var(--heading); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 0.4rem; } .modal-subtitle { font-size: 0.85rem; color: var(--muted); line-height: 1.6; } .modal-close { position: absolute; top: 1.25rem; right: 1.25rem; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-alt); border: 1px solid var(--border); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; z-index: 2; } .modal-close:hover { background: var(--border); color: var(--text); transform: rotate(90deg); } .modal-close svg { width: 16px; height: 16px; stroke: currentColor; } .modal-body { padding: 0 2rem 2rem; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; } .form-group { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.1rem; } .form-label { font-size: 0.78rem; font-weight: 600; color: var(--text); letter-spacing: 0.03em; } .country-code, .form-input, .form-select { background: var(--bg); font-size: 0.9rem; font-family: Poppins, sans-serif; } .form-label span { color: var(--accent); margin-left: 2px; } .form-input, .form-select { width: 100%; border: 1.5px solid var(--border); border-radius: 12px; color: var(--text); padding: 0.8rem 1rem; outline: 0; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; appearance: none; -webkit-appearance: none; } html.light-mode .country-code, html.light-mode .form-input, html.light-mode .form-select, html.light-mode .otp-input { background: #f8f9fa; } .form-input::placeholder { color: var(--muted); font-size: 0.85rem; } .form-input:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(243, 189, 0, 0.12); background: var(--bg-alt); } .form-input.error, .form-select.error { border-color: #e8602f; box-shadow: 0 0 0 3px rgba(232, 96, 47, 0.1); } .select-wrapper::after { content: ""; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--muted); pointer-events: none; transition: border-top-color 0.2s; } .select-wrapper:focus-within::after { border-top-color: var(--accent); } .form-select { padding-right: 2.5rem; cursor: pointer; } .form-select option { background: var(--card); color: var(--text); } .phone-group { display: grid; grid-template-columns: 80px 1fr; gap: 0.5rem; } .country-code { border: 1.5px solid var(--border); border-radius: 12px; color: var(--text); padding: 0.8rem 0.6rem; font-weight: 600; cursor: default; transition: border-color 0.3s; } .field-error { font-size: 0.74rem; color: #e8602f; display: none; align-items: center; gap: 0.3rem; } .field-error.show, .modal-success.show { display: flex; } .field-error svg { flex-shrink: 0; } .modal-submit { width: 100%; padding: 14px; font-size: 0.95rem; border-radius: 14px; position: relative; overflow: hidden; margin-top: auto; display: flex; align-items: center; justify-content: center; } .modal-submit .btn-text { display: flex; align-items: center; gap: 0.5rem; justify-content: center; } .modal-submit:disabled { opacity: 0.7; cursor: not-allowed; } .modal-submit .btn-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(0, 0, 0, 0.2); border-left-color: #1c1c1e; border-radius: 50%; animation: 0.7s linear infinite spin; } .modal-submit.loading .btn-text { display: none; } @keyframes spin { to { transform: rotate(360deg); } } .modal-success { display: none; flex-direction: column; align-items: center; padding: 2.5rem 2rem; gap: 1rem; } .success-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(243, 189, 0, 0.1); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; animation: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards popIn; } @keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .success-title { font-size: 1.35rem; font-weight: 700; color: var(--heading); } .success-msg { font-size: 0.88rem; color: var(--muted); line-height: 1.7; max-width: 320px; } .success-note { font-size: 0.78rem; color: var(--muted); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 1rem; width: 100%; } .otp-container { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; } .otp-input { width: 60px; height: 64px; background: var(--bg); border: 2.5px solid var(--border); border-radius: 16px; color: var(--heading); font-family: Poppins, sans-serif; font-size: 1.8rem; font-weight: 700; outline: 0; transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .otp-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(243, 189, 0, 0.15); transform: translateY(-2px); background: var(--bg-alt); } .otp-input.error { border-color: #e8602f; box-shadow: 0 0 0 4px rgba(232, 96, 47, 0.1); } .modal-privacy { margin-top: 0.85rem; font-size: 0.73rem; color: var(--muted); line-height: 1.6; } .modal-privacy a { color: var(--accent); text-decoration: none; } @media (max-width: 480px) { .toggle-section { padding: 2.5rem 1rem 2rem; } .toggle-pill { flex-direction: column; width: 100%; border-radius: 20px; padding: 8px; } .toggle-option { width: 100%; text-align: center; padding: 0.85rem 1rem; } .modal-overlay { padding: 1rem; align-items: center; } .modal-box { border-radius: 24px 24px 16px 16px; max-width: 100%; } .modal-header { padding: 1.5rem 1.5rem 1rem; } .modal-body { padding: 0 1.5rem 1.5rem; } } @media (max-width: 900px) { .mobile-break { display: none; } } .scroll-to-top { position: fixed; bottom: calc(var(--banner-height, 55px) + 16px); right: 0px; width: 50px; height: 50px; background-color: var(--accent); color: #1c1c1e; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); z-index: 1111; opacity: 0; visibility: hidden; transition: 0.3s; transform: translateY(20px); } .scroll-to-top:hover { box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); } @media (max-width: 768px) { .scroll-to-top { bottom: calc(var(--banner-height, 65px) + 12px); right: 20px; width: 40px; height: 40px; font-size: 16px; } } .company-card { max-width: 500px; width: 400px; } /* ════════════════════════════════════════ FLASH SALE POPUP v2 — image badge edition ════════════════════════════════════════ */ /* Box */ .flash-sale-box { max-width: 500px; min-height: auto; padding: 0; overflow: hidden; border-radius: 24px; border: 1px solid rgba(243, 189, 0, 0.2); box-shadow: 0 0 0 1px rgba(243, 189, 0, 0.08), 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 80px rgba(243, 189, 0, 0.06); } .flash-sale-box { line-height: 0; position: relative; } .flash-img-link { display: block; cursor: pointer; background: black; } .flash-img-fill { display: block; max-width: min(500px, 90vw); max-height: 88vh; width: auto; height: auto; border-radius: 24px; margin: auto; } /* ── Close button ── */ .flash-close-btn { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: white; border: 1px solid rgba(255, 255, 255, 0.18); color: #f5f5f5; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2000; } .flash-close-btn:hover { background: rgba(255, 255, 255, 0.22); color: #fff; transform: rotate(90deg); } html.light-mode .flash-close-btn { background: rgba(0, 0, 0, 0.07); border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.55); } html.light-mode .flash-close-btn:hover { background: rgba(0, 0, 0, 0.14); color: #000; } /* ── Hero Zone (dark strip) ── */ .flash-hero { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; } .flash-hero--pe { background: linear-gradient(135deg, #0d0f14 0%, #1a1c24 100%); padding: 2.2rem 2rem 1.8rem; gap: 0.75rem; } .flash-pe-icon { width: 80px; height: 80px; border-radius: 50%; background: rgba(243, 189, 0, 0.1); border: 1px solid rgba(243, 189, 0, 0.25); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .flash-pe-label { font-family: Poppins, sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; color: var(--accent); margin: 0; position: relative; z-index: 1; } /* ── Image Badge ── Overrides the old div-based .flash-badge rules completely */ img.flash-badge { position: relative; display: block; width: 180px; /* adjust to your actual image's natural ratio */ height: auto; object-fit: contain; /* strip any inherited box-model from the old div rules */ background: none; border: none; padding: 0; border-radius: 0; backdrop-filter: none; z-index: 1; } /* ── Content Zone ── */ .flash-content { background: var(--card); padding: 1.6rem 2rem 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; } /* Countdown — now lives in content zone, styled as a prominent pill */ .flash-countdown { display: inline-flex; align-items: center; gap: 0.45rem; background: rgba(243, 189, 0, 0.1); border: 1px solid rgba(243, 189, 0, 0.28); color: #1c1c1e; font-family: Poppins, sans-serif; font-size: 0.78rem; font-weight: 500; padding: 0.42rem 1.1rem; border-radius: 100px; letter-spacing: 0.02em; /* sits first in content zone, acts as the urgency hook */ order: -1; } .flash-timer-digits { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; font-size: 0.88rem; color: #1c1c1e; } /* Eyebrow */ .flash-eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } /* Headline */ .flash-headline { font-family: Poppins, sans-serif; font-size: 1.65rem; font-weight: 700; color: var(--heading); line-height: 1.2; letter-spacing: -0.03em; margin: 0; } .flash-headline em { font-style: normal; color: var(--accent); } /* Sub */ .flash-sub { font-size: 0.875rem; color: var(--muted); line-height: 1.65; margin: 0; } /* CTA button */ .flash-cta { width: 100%; padding: 15px 20px; font-size: 1rem; font-weight: 700; border-radius: 14px; gap: 0.55rem; justify-content: center; letter-spacing: 0.01em; margin-top: 0.2rem; box-shadow: 0 6px 24px rgba(243, 189, 0, 0.4); } .flash-cta:hover { box-shadow: 0 10px 36px rgba(243, 189, 0, 0.55); transform: translateY(-2px); } .flash-cta:active { transform: translateY(0); box-shadow: 0 4px 16px rgba(243, 189, 0, 0.35); } /* Trust row */ .flash-trust { display: flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; color: var(--muted); line-height: 1; } .flash-trust strong { color: var(--text); } .flash-trust-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; animation: 1.5s ease-in-out infinite blink; } /* Mobile */ @media (max-width: 480px) { .flash-sale-box { border-radius: 20px 20px 14px 14px; } .flash-hero { padding: 2rem 1.25rem 1.5rem; } .flash-content { padding: 1.4rem 1.5rem 1.75rem; } img.flash-badge { width: 140px; } .flash-headline { font-size: 1.35rem; } } /* ── Corporate CTA strip ── */ .corp-cta-strip { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; padding: 1.5rem 2rem; background: var(--card); border: 1px solid var(--border); border-radius: 16px; } .corp-cta-text { flex: 1 1 280px; } .corp-cta-desc { font-size: 0.88rem; color: var(--muted); line-height: 1.7; margin: 0; } .corp-cta-heading { color: var(--heading); } .corp-cta-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; flex-shrink: 0; } .corp-cta-btn { padding: 12px 24px; font-size: 0.92rem; font-weight: 700; gap: 0.6rem; } @media (max-width: 600px) { .corp-cta-strip { flex-direction: column; align-items: stretch; gap: 1.2rem; padding: 1.25rem; } .corp-cta-text { flex: 0; } .corp-cta-actions { flex-direction: column; } .corp-cta-btn { width: 100%; justify-content: center; text-align: center; } } /* ── AI Transformation CTA button ── */ .ai-transform-btn { display: inline-flex; padding: 14px 28px; font-size: 0.95rem; font-weight: 700; gap: 0.6rem; } @media (max-width: 600px) { .ai-transform-btn { width: 100%; justify-content: center; text-align: center; } } /* ── MASTERCLASS ANNOUNCEMENT BAR ── */ .mc-topbar { width: 100%; background: #0d0f14; border-bottom: 1px solid rgba(243, 189, 0, 0.15); display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.6rem 3rem 0.85rem; flex-wrap: wrap; } .mc-topbar-inner { max-width: 60rem; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .mc-topbar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pro-accent); flex-shrink: 0; animation: livePulse 1.5s ease-in-out infinite; } .mc-topbar-left { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; overflow-x: clip; } .mc-topbar-text { font-size: 0.82rem; color: #f5f5f5; font-family: Poppins, sans-serif; margin: 0; line-height: 1.5; text-align: center; white-space: nowrap; } .mc-topbar-text strong { color: var(--accent); font-weight: 600; } .mc-topbar-btn { padding: 7px 14px !important; font-size: 0.78rem !important; font-weight: 600 !important; gap: 0.4rem; white-space: nowrap; flex-shrink: 0; margin-left: 0.5rem; } .mc-topbar-btn:hover { box-shadow: 0 4px 14px rgba(243, 189, 0, 0.35); } @media (max-width: 640px) { .mc-topbar { gap: 0.5rem; padding: 0.55rem 1rem 0.8rem; } .mc-topbar-text { font-size: 0.72rem; } .mc-topbar-btn { padding: 5px 10px !important; font-size: 0.7rem !important; flex-shrink: 0; } }