/* ========================================================= YUDHRA COMPLETE RESPONSIVE CSS ========================================================= */ /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1400px) { .site-header { position: sticky !important; top: 0 !important; z-index: 9999 !important; } } /* ========================================================= LAPTOP 1200px - 1399px ========================================================= */ @media (max-width: 1399px) and (min-width: 1200px) { .navbar { padding-left: 40px !important; padding-right: 40px !important; } .brand { width: 180px; min-width: 180px; } .yudhra-logo { width: 145px; height: auto; } .header-actions { width: 300px; min-width: 300px; } .nav-pill { width: min(700px, 100%); } .hero-section > .container-fluid { padding-left: 40px !important; padding-right: 40px !important; } .hero-grid { grid-template-columns: 43% 57%; column-gap: 25px; } .hero-copy h1 { font-size: 50px; line-height: 48px; } .dashboard-image-wrap { width: 56%; } .portrait-card { width: 40%; } .feature-bar { width: calc(100% - 80px); } } /* ========================================================= TABLET LANDSCAPE 992px - 1199px ========================================================= */ @media (max-width: 1199px) and (min-width: 992px) { /* HEADER */ .site-header { height: 82px !important; } .navbar { width: 100% !important; height: 82px !important; min-height: 82px !important; padding-left: 28px !important; padding-right: 28px !important; display: flex !important; align-items: center !important; } .brand { width: 155px; min-width: 155px; } .yudhra-logo { width: 132px; } .nav-pill { flex: 1; width: auto; height: 50px; } .nav-pill .nav-link { padding-left: 12px !important; padding-right: 12px !important; font-size: 12px; } .header-actions { width: 220px; min-width: 220px; gap: 8px; } .header-cta { width: 130px; min-width: 130px; } /* HERO */ .hero-section { min-height: auto; padding: 35px 0 30px; } .hero-section > .container-fluid { padding-left: 28px !important; padding-right: 28px !important; } .hero-grid { grid-template-columns: 44% 56%; column-gap: 20px; min-height: 540px; } .hero-copy h1 { font-size: 44px; line-height: 43px; } .hero-copy h2 { font-size: 17px; } .hero-description { font-size: 14px; } .hero-buttons { flex-direction: column; align-items: stretch; } .hero-buttons .btn-orange, .hero-buttons .btn-watch { width: 100%; min-width: 0; } /* VISUAL */ .hero-visual { height: 540px; min-height: 540px; } .dashboard-image-wrap { width: 58%; top: 20px; } .portrait-card { width: 40%; height: 430px; top: 35px; } .pill-match { bottom: 105px; } .pill-portfolio { bottom: 20px; } /* FEATURES */ .feature-bar { width: calc(100% - 56px); } .feature-item { padding-left: 12px; padding-right: 12px; } } /* ========================================================= TABLET / MOBILE BELOW 992px ========================================================= */ @media (max-width: 991px) { html, body { width: 100%; max-width: 100%; overflow-x: hidden; } /* ===================================================== STICKY HEADER ===================================================== */ .site-header { position: sticky !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 72px !important; z-index: 9999 !important; background: #ffffff !important; } .navbar { position: relative !important; width: 100% !important; height: 72px !important; min-height: 72px !important; padding: 0 20px !important; display: flex !important; align-items: center !important; background: #ffffff !important; } /* ===================================================== LOGO LEFT ===================================================== */ .brand { width: auto !important; min-width: 0 !important; margin: 0 auto 0 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; } .yudhra-logo { width: 125px !important; height: auto !important; } /* ===================================================== HAMBURGER RIGHT ===================================================== */ .navbar-toggler { display: flex !important; width: 42px !important; height: 42px !important; margin: 0 0 0 auto !important; padding: 0 !important; align-items: center !important; justify-content: center !important; border: 1px solid #e5eaf0 !important; border-radius: 10px !important; background: #ffffff !important; color: #334155 !important; box-shadow: none !important; z-index: 10001 !important; } .navbar-toggler:focus, .navbar-toggler:active { outline: none !important; box-shadow: none !important; } .navbar-toggler i { font-size: 19px !important; } /* ===================================================== HIDE DESKTOP HEADER ACTIONS ===================================================== */ .header-actions { display: none !important; } /* ===================================================== MOBILE MENU LEFT ALIGNED ===================================================== */ .navbar-collapse { position: absolute !important; top: 72px !important; left: 0 !important; right: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 10px 16px 16px !important; background: #ffffff !important; border-top: 1px solid #edf0f3 !important; border-radius: 0 0 16px 16px !important; box-shadow: 0 12px 30px rgba(16, 36, 60, 0.10) !important; text-align: left !important; z-index: 10000 !important; } .navbar-collapse.collapsing { height: auto !important; overflow: hidden !important; } .navbar-collapse.show { display: block !important; } .navbar-collapse .nav-pill { width: 100% !important; height: auto !important; margin: 0 !important; padding: 4px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 2px !important; background: #ffffff !important; border: 0 !important; box-shadow: none !important; text-align: left !important; } .navbar-collapse .nav-item { width: 100% !important; display: block !important; margin: 0 !important; } .navbar-collapse .nav-link { width: 100% !important; height: 44px !important; margin: 0 !important; padding: 10px 14px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 600 !important; white-space: nowrap !important; } .navbar-collapse .nav-link:hover, .navbar-collapse .nav-link.active { background: var(--orange-light, #fff4ec) !important; color: var(--orange-dark, #f97316) !important; } /* ===================================================== HERO ===================================================== */ .hero-section { width: 100% !important; height: auto !important; min-height: 0 !important; padding: 38px 0 30px !important; overflow: visible !important; } .hero-section > .container-fluid { width: 100% !important; padding-left: 24px !important; padding-right: 24px !important; overflow: visible !important; } .hero-grid { width: 100% !important; height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: 1fr !important; row-gap: 0 !important; } /* ===================================================== HERO CONTENT ===================================================== */ .hero-copy { width: 100% !important; max-width: 720px !important; margin: 0 auto !important; padding: 0 !important; position: relative !important; text-align: center !important; z-index: 50 !important; } .eyebrow { margin-left: auto !important; margin-right: auto !important; } .hero-copy h1 { max-width: 700px !important; margin: 24px auto 18px !important; font-size: 47px !important; line-height: 46px !important; } .hero-copy h2 { font-size: 18px !important; } .hero-description { max-width: 650px !important; margin-left: auto !important; margin-right: auto !important; } /* ===================================================== BUTTONS ===================================================== */ .hero-buttons { width: 100% !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 12px !important; } .hero-buttons .btn-orange, .hero-buttons .btn-watch { width: 230px !important; min-width: 230px !important; } /* ===================================================== STATS ===================================================== */ .mini-stats { width: 100% !important; max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; } /* ===================================================== VISUAL CONTAINER ===================================================== */ .hero-visual { position: relative !important; width: 100% !important; max-width: 600px !important; height: auto !important; min-height: 0 !important; margin: 30px auto 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; z-index: 10 !important; } /* ===================================================== DASHBOARD ===================================================== */ .dashboard-image-wrap { position: relative !important; width: 94% !important; max-width: 500px !important; height: auto !important; margin: 0 auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; z-index: 10 !important; } .dashboard-image { display: block !important; width: 100% !important; height: auto !important; object-fit: contain !important; margin: 0 !important; border-radius: 17px !important; box-shadow: 0 14px 35px rgba(16, 36, 60, 0.12) !important; } /* ===================================================== LARGE GIRL PORTRAIT ===================================================== */ .portrait-card { position: relative !important; width: 92% !important; max-width: 390px !important; height: 440px !important; margin: 18px auto 0 !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; overflow: hidden !important; border-radius: 19px !important; background: #f1f3f4 !important; z-index: 30 !important; } .portrait-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; border-radius: 19px !important; z-index: 1 !important; } .portrait-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; margin: 0 !important; } /* ===================================================== JOB MATCH OVER GIRL IMAGE ===================================================== */ .hero-visual > .pill-match { position: absolute !important; width: 80% !important; max-width: 320px !important; height: auto !important; top: 380px !important; left: 50% !important; right: auto !important; bottom: auto !important; margin: 0 !important; transform: translateX(-50%) !important; z-index: 100 !important; } /* ===================================================== PORTFOLIO OVER GIRL IMAGE ===================================================== */ .hero-visual > .pill-portfolio { position: absolute !important; width: 75% !important; max-width: 300px !important; height: auto !important; top: 485px !important; left: 50% !important; right: auto !important; bottom: auto !important; margin: 0 !important; transform: translateX(-50%) !important; z-index: 101 !important; } /* ===================================================== FLOATING CARDS ===================================================== */ .hero-visual > .pill-match .floating-pill, .hero-visual > .pill-portfolio .floating-pill { width: 100% !important; min-height: 62px !important; padding: 9px 13px !important; display: flex !important; align-items: center !important; gap: 9px !important; background: #ffffff !important; border: 0 !important; border-radius: 15px !important; box-shadow: 0 8px 25px rgba(18, 32, 48, 0.16) !important; } .hero-visual > .pill-match .pill-icon, .hero-visual > .pill-portfolio .pill-icon { width: 35px !important; height: 35px !important; min-width: 35px !important; flex: 0 0 35px !important; border-radius: 10px !important; } .hero-visual > .pill-match .floating-pill b, .hero-visual > .pill-portfolio .floating-pill b { display: block !important; margin: 0 !important; font-size: 11px !important; line-height: 14px !important; } .hero-visual > .pill-match .floating-pill small, .hero-visual > .pill-portfolio .floating-pill small { display: block !important; margin: 2px 0 0 !important; font-size: 7.5px !important; line-height: 10px !important; } .hero-visual > .pill-match .floating-pill > i, .hero-visual > .pill-portfolio .floating-pill > i { margin-left: auto !important; flex-shrink: 0 !important; font-size: 11px !important; color: #a5afba !important; } /* ===================================================== REMOVE OLD ORDER ===================================================== */ .pill-match, .pill-portfolio { order: initial !important; } /* ===================================================== DECORATION ===================================================== */ .orbit-a, .orbit-b, .dotted-path { pointer-events: none !important; z-index: 1 !important; } /* ===================================================== FEATURE BAR TABLET ===================================================== */ .feature-bar { position: relative !important; width: calc(100% - 36px) !important; max-width: 700px !important; height: auto !important; min-height: 0 !important; margin: 25px auto 0 !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; transform: none !important; overflow: hidden !important; border-radius: 18px !important; z-index: 200 !important; } .feature-item { min-height: 68px !important; padding: 9px 11px !important; display: flex !important; align-items: center !important; gap: 8px !important; border-right: 1px solid #edf0f2 !important; } .feature-item:nth-child(2) { border-right: 0 !important; } .feature-item:nth-child(n + 3) { border-top: 1px solid #edf0f2 !important; } .feature-item:last-child { grid-column: span 2 !important; justify-content: center !important; border-right: 0 !important; } } /* ========================================================= MOBILE BELOW 768px ========================================================= */ @media (max-width: 767px) { /* HEADER */ .site-header { height: 68px !important; } .navbar { height: 68px !important; min-height: 68px !important; padding-left: 16px !important; padding-right: 16px !important; } .yudhra-logo { width: 116px !important; } .navbar-toggler { width: 40px !important; height: 40px !important; } .navbar-collapse { top: 68px !important; } /* HERO */ .hero-section { padding: 27px 0 22px !important; } .hero-section > .container-fluid { padding-left: 18px !important; padding-right: 18px !important; } /* TEXT */ .eyebrow { height: 32px !important; padding: 5px 10px !important; font-size: 9px !important; } .hero-copy h1 { margin: 19px auto 15px !important; font-size: 37px !important; line-height: 38px !important; letter-spacing: -0.8px !important; } .hero-copy h2 { font-size: 15px !important; } .hero-description { font-size: 12.5px !important; line-height: 1.55 !important; } /* BUTTONS */ .hero-buttons { flex-direction: column !important; gap: 9px !important; } .hero-buttons .btn-orange, .hero-buttons .btn-watch { width: 100% !important; max-width: 390px !important; min-width: 0 !important; height: 51px !important; } /* STATS */ .mini-stats { margin-top: 20px !important; } /* VISUAL */ .hero-visual { width: 100% !important; max-width: 430px !important; margin-top: 23px !important; } /* DASHBOARD */ .dashboard-image-wrap { width: 94% !important; max-width: 405px !important; } .dashboard-image { border-radius: 13px !important; } /* ===================================================== GIRL ===================================================== */ .portrait-card { width: 92% !important; max-width: 390px !important; height: 420px !important; margin-top: 16px !important; border-radius: 17px !important; } .portrait-image { border-radius: 17px !important; } /* JOB */ .hero-visual > .pill-match { width: 82% !important; max-width: 320px !important; top: 362px !important; } /* PORTFOLIO */ .hero-visual > .pill-portfolio { width: 77% !important; max-width: 300px !important; top: 460px !important; } /* FLOATING CARDS */ .hero-visual > .pill-match .floating-pill, .hero-visual > .pill-portfolio .floating-pill { min-height: 58px !important; padding: 8px 11px !important; gap: 8px !important; border-radius: 14px !important; } .hero-visual > .pill-match .pill-icon, .hero-visual > .pill-portfolio .pill-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; flex-basis: 32px !important; border-radius: 9px !important; } .hero-visual > .pill-match .floating-pill b, .hero-visual > .pill-portfolio .floating-pill b { font-size: 10px !important; line-height: 13px !important; } .hero-visual > .pill-match .floating-pill small, .hero-visual > .pill-portfolio .floating-pill small { font-size: 6.8px !important; line-height: 9px !important; } /* ===================================================== FEATURE BAR FIXED GAP ===================================================== */ .feature-bar { width: calc(100% - 22px) !important; margin-top: 20px !important; display: flex !important; flex-direction: column !important; border-radius: 15px !important; } .feature-item { width: 100% !important; min-height: 59px !important; padding: 8px 10px !important; border-right: 0 !important; border-top: 1px solid #edf0f2 !important; } .feature-item:first-child { border-top: 0 !important; } .feature-item:last-child { grid-column: auto !important; justify-content: flex-start !important; } .feature-icon { width: 34px !important; height: 34px !important; flex: 0 0 34px !important; } .feature-item strong { font-size: 10.5px !important; } .feature-item span { font-size: 8px !important; line-height: 11px !important; } /* DECORATION */ .orbit-a { width: 370px !important; height: 370px !important; right: -95px !important; top: 55px !important; } .orbit-b { width: 285px !important; height: 285px !important; right: -48px !important; top: 100px !important; } .dotted-path { width: 275px !important; height: 92px !important; left: -9% !important; top: 12px !important; } } /* ========================================================= SMALL MOBILE BELOW 480px ========================================================= */ @media (max-width: 480px) { /* HEADER */ .site-header { height: 64px !important; } .navbar { height: 64px !important; min-height: 64px !important; padding-left: 13px !important; padding-right: 13px !important; } .yudhra-logo { width: 105px !important; } .navbar-toggler { width: 37px !important; height: 37px !important; border-radius: 9px !important; } .navbar-collapse { top: 64px !important; padding: 8px 11px 13px !important; } .navbar-collapse .nav-link { height: 41px !important; padding-left: 12px !important; padding-right: 12px !important; font-size: 12px !important; } /* HERO */ .hero-section { padding-top: 21px !important; padding-bottom: 17px !important; } .hero-section > .container-fluid { padding-left: 13px !important; padding-right: 13px !important; } /* TEXT */ .eyebrow { height: 29px !important; padding: 4px 8px !important; font-size: 7.8px !important; } .hero-copy h1 { margin-top: 16px !important; margin-bottom: 13px !important; font-size: 30px !important; line-height: 31px !important; } .hero-copy h2 { font-size: 12.5px !important; } .hero-description { font-size: 11px !important; line-height: 1.5 !important; margin-bottom: 15px !important; } /* BUTTONS */ .hero-buttons { gap: 7px !important; } .hero-buttons .btn-orange, .hero-buttons .btn-watch { height: 47px !important; font-size: 11.5px !important; } /* STATS */ .mini-stats { margin-top: 17px !important; } .mini-stat { min-height: 48px !important; padding-top: 6px !important; } .mini-stat strong { font-size: 9.5px !important; } .mini-stat span { font-size: 6.7px !important; } /* VISUAL */ .hero-visual { width: 100% !important; max-width: 390px !important; margin-top: 18px !important; } /* DASHBOARD */ .dashboard-image-wrap { width: 96% !important; max-width: 370px !important; } .dashboard-image { border-radius: 11px !important; } /* ===================================================== GIRL ===================================================== */ .portrait-card { width: 94% !important; max-width: 365px !important; height: 400px !important; margin-top: 15px !important; border-radius: 16px !important; } .portrait-image { border-radius: 16px !important; } /* ===================================================== JOB MATCH ===================================================== */ .hero-visual > .pill-match { width: 87% !important; max-width: 320px !important; top: 344px !important; } /* ===================================================== PORTFOLIO ===================================================== */ .hero-visual > .pill-portfolio { width: 80% !important; max-width: 295px !important; top: 438px !important; } /* FLOATING CARDS */ .hero-visual > .pill-match .floating-pill, .hero-visual > .pill-portfolio .floating-pill { min-height: 57px !important; padding: 8px 10px !important; gap: 7px !important; border-radius: 13px !important; } .hero-visual > .pill-match .pill-icon, .hero-visual > .pill-portfolio .pill-icon { width: 31px !important; height: 31px !important; min-width: 31px !important; flex-basis: 31px !important; } .hero-visual > .pill-match .floating-pill b, .hero-visual > .pill-portfolio .floating-pill b { font-size: 9px !important; line-height: 12px !important; } .hero-visual > .pill-match .floating-pill small, .hero-visual > .pill-portfolio .floating-pill small { font-size: 6.3px !important; line-height: 8px !important; } /* ===================================================== FEATURE BAR SMALL GAP ===================================================== */ .feature-bar { width: calc(100% - 10px) !important; margin-top: 18px !important; border-radius: 12px !important; } .feature-item { min-height: 55px !important; padding: 7px 8px !important; gap: 7px !important; } .feature-icon { width: 31px !important; height: 31px !important; flex: 0 0 31px !important; border-radius: 8px !important; } .feature-item strong { font-size: 9.5px !important; } .feature-item span { font-size: 8px !important; line-height: 10px !important; } /* DECORATION */ .orbit-a { width: 300px !important; height: 300px !important; right: -78px !important; top: 40px !important; } .orbit-b { width: 230px !important; height: 230px !important; right: -38px !important; top: 78px !important; } .dotted-path { width: 215px !important; height: 72px !important; left: -14% !important; top: 6px !important; } } /* ========================================================= VERY SMALL PHONE BELOW 360px ========================================================= */ @media (max-width: 360px) { /* HEADER */ .site-header { height: 62px !important; } .navbar { height: 62px !important; min-height: 62px !important; padding-left: 11px !important; padding-right: 11px !important; } .yudhra-logo { width: 97px !important; } .navbar-toggler { width: 35px !important; height: 35px !important; } .navbar-collapse { top: 62px !important; } /* HERO TEXT */ .hero-copy h1 { font-size: 27px !important; line-height: 29px !important; } .hero-copy h2 { font-size: 11.5px !important; } .hero-description { font-size: 10.5px !important; } /* VISUAL */ .hero-visual { max-width: 340px !important; margin-top: 15px !important; } /* DASHBOARD */ .dashboard-image-wrap { width: 97% !important; } /* ===================================================== GIRL ===================================================== */ .portrait-card { width: 94% !important; height: 350px !important; margin-top: 13px !important; border-radius: 14px !important; } .portrait-image { border-radius: 14px !important; } /* ===================================================== JOB MATCH ===================================================== */ .hero-visual > .pill-match { width: 88% !important; top: 302px !important; } /* ===================================================== PORTFOLIO ===================================================== */ .hero-visual > .pill-portfolio { width: 82% !important; top: 387px !important; } /* ===================================================== CARDS ===================================================== */ .hero-visual > .pill-match .floating-pill, .hero-visual > .pill-portfolio .floating-pill { min-height: 50px !important; padding: 6px 8px !important; gap: 6px !important; border-radius: 11px !important; } .hero-visual > .pill-match .pill-icon, .hero-visual > .pill-portfolio .pill-icon { width: 27px !important; height: 27px !important; min-width: 27px !important; flex-basis: 27px !important; border-radius: 8px !important; } .hero-visual > .pill-match .floating-pill b, .hero-visual > .pill-portfolio .floating-pill b { font-size: 8px !important; line-height: 10px !important; } .hero-visual > .pill-match .floating-pill small, .hero-visual > .pill-portfolio .floating-pill small { font-size: 5.5px !important; line-height: 7px !important; } /* ===================================================== FEATURE BAR VERY SMALL GAP ===================================================== */ .feature-bar { width: calc(100% - 6px) !important; margin-top: 16px !important; } .feature-item { min-height: 52px !important; padding: 6px 7px !important; } .feature-icon { width: 29px !important; height: 29px !important; flex: 0 0 29px !important; } .feature-item strong { font-size: 9px !important; } .feature-item span { font-size: 7px !important; line-height: 9px !important; } /* DECORATION */ .orbit-a { width: 270px !important; height: 270px !important; right: -68px !important; top: 30px !important; } .orbit-b { width: 210px !important; height: 210px !important; right: -34px !important; top: 63px !important; } .dotted-path { width: 195px !important; height: 65px !important; left: -17% !important; top: 5px !important; } } /* ========================================================= FIX — MOBILE STICKY NAVBAR ========================================================= */ /* Do NOT use overflow-x:hidden on html/body with sticky header */ html { width: 100%; margin: 0; padding: 0; overflow-x: clip !important; scroll-behavior: smooth; } body { width: 100%; max-width: 100%; margin: 0; padding: 0; overflow-x: clip !important; } /* ========================================================= STICKY HEADER — ALL SCREEN SIZES ========================================================= */ .site-header { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 99999 !important; background: rgba(255, 255, 255, 0.98) !important; border-bottom: 1px solid #edf0f3 !important; box-shadow: 0 2px 12px rgba(16, 36, 60, 0.05) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Important for sticky */ align-self: flex-start !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 991px) { .site-header { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 72px !important; min-height: 72px !important; z-index: 99999 !important; background: #ffffff !important; } .navbar { position: relative !important; width: 100% !important; height: 72px !important; min-height: 72px !important; padding: 0 20px !important; display: flex !important; align-items: center !important; background: #ffffff !important; } /* LOGO */ .brand { width: auto !important; min-width: 0 !important; margin: 0 auto 0 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; } .yudhra-logo { width: 125px !important; height: auto !important; display: block !important; } /* HAMBURGER */ .navbar-toggler { display: flex !important; width: 42px !important; height: 42px !important; margin: 0 0 0 auto !important; padding: 0 !important; align-items: center !important; justify-content: center !important; border: 1px solid #e5eaf0 !important; border-radius: 10px !important; background: #ffffff !important; color: #334155 !important; box-shadow: none !important; z-index: 100000 !important; } .navbar-toggler:focus, .navbar-toggler:active { outline: none !important; box-shadow: none !important; } .navbar-toggler i { font-size: 19px !important; } /* MOBILE MENU */ .navbar-collapse { position: absolute !important; top: 72px !important; left: 0 !important; right: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 10px 16px 16px !important; background: #ffffff !important; border-top: 1px solid #edf0f3 !important; border-radius: 0 0 16px 16px !important; box-shadow: 0 12px 30px rgba(16, 36, 60, 0.10) !important; text-align: left !important; z-index: 99998 !important; } .navbar-collapse.show { display: block !important; } .navbar-collapse .nav-pill { width: 100% !important; height: auto !important; margin: 0 !important; padding: 4px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 2px !important; background: #ffffff !important; border: 0 !important; box-shadow: none !important; } .navbar-collapse .nav-item { width: 100% !important; display: block !important; margin: 0 !important; } .navbar-collapse .nav-link { width: 100% !important; height: 44px !important; margin: 0 !important; padding: 10px 14px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 600 !important; white-space: nowrap !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 767px) { .site-header { height: 68px !important; min-height: 68px !important; position: -webkit-sticky !important; position: sticky !important; top: 0 !important; z-index: 99999 !important; } .navbar { height: 68px !important; min-height: 68px !important; padding-left: 16px !important; padding-right: 16px !important; } .yudhra-logo { width: 116px !important; } .navbar-toggler { width: 40px !important; height: 40px !important; } .navbar-collapse { top: 68px !important; } } /* ========================================================= Home - TwoPath card employees ========================================================= */ /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1200px) { .two-paths-section { padding: 90px 28px 60px; } .two-paths-header { margin-bottom: 60px; } .two-paths-header h2 { font-size: 50px; } .two-paths-header p { font-size: 18px; } .two-paths-grid { gap: 25px; } .path-card-content { width: 68%; padding-left: 30px; } .path-card-image, .path-card-learners .path-card-image, .path-card-employers .path-card-image { width: 60%; } .path-card h3 { font-size: 27px; } .path-description { font-size: 14px; } .path-feature { font-size: 13px; } .path-button { width: 215px; } } /* ========================================================= TABLET / SMALL LAPTOP ========================================================= */ @media (max-width: 991px) { .two-paths-section { padding: 80px 24px 55px; } .two-paths-header { max-width: 720px; margin-bottom: 50px; } .two-paths-badge { font-size: 12px; } .two-paths-header h2 { font-size: 44px; letter-spacing: -1.5px; } .two-paths-header p { font-size: 17px; } .two-paths-grid { grid-template-columns: 1fr; gap: 28px; } .path-card { min-height: 520px; } .path-card-content { width: 62%; min-height: 520px; padding: 35px 0 28px 35px; } .path-card-image, .path-card-learners .path-card-image, .path-card-employers .path-card-image { width: 55%; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .two-paths-section { padding: 55px 16px 45px; } /* ===================================================== HEADER ===================================================== */ .two-paths-header { width: 100%; margin-bottom: 34px; } .two-paths-badge { min-height: 29px; margin-bottom: 16px; padding: 6px 12px; font-size: 10px; letter-spacing: .2px; } .two-paths-header h2 { font-size: 32px; line-height: 1.1; letter-spacing: -1.1px; } .two-paths-header p { width: 100%; max-width: 500px; margin: 12px auto 0; font-size: 13px; line-height: 1.55; } /* ===================================================== CARDS GRID ===================================================== */ .two-paths-grid { width: 100%; display: grid; grid-template-columns: 1fr; gap: 24px; } /* ===================================================== CARD ===================================================== */ .path-card { width: 100%; min-height: 0 !important; height: auto !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; border-radius: 18px !important; background: #ffffff !important; } /* ===================================================== IMAGE Image is now a normal block at the TOP. No absolute positioning. ===================================================== */ .path-card-image, .path-card-learners .path-card-image, .path-card-employers .path-card-image { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; height: 185px !important; flex: 0 0 185px !important; order: 1 !important; overflow: hidden !important; z-index: 1 !important; opacity: 1 !important; } .path-card-image::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient( to bottom, rgba(255,255,255,0) 0%, rgba(16,36,60,.02) 55%, rgba(16,36,60,.14) 100% ) !important; } .path-card-image img { width: 100% !important; height: 100% !important; display: block; object-fit: cover !important; object-position: center center !important; transform: none !important; filter: brightness(.95) saturate(.98) !important; } /* ===================================================== CONTENT ===================================================== */ .path-card-content { position: relative !important; order: 2 !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 22px 20px 18px !important; display: flex !important; flex-direction: column !important; background: #ffffff !important; z-index: 5 !important; } /* ===================================================== LABEL ===================================================== */ .path-label { width: fit-content !important; min-height: 28px !important; padding: 5px 11px !important; font-size: 10px !important; line-height: 15px !important; } /* ===================================================== TITLE ===================================================== */ .path-card h3 { margin: 14px 0 9px !important; font-size: 22px !important; line-height: 1.2 !important; letter-spacing: -.4px !important; } /* ===================================================== DESCRIPTION ===================================================== */ .path-description { width: 100% !important; max-width: 100% !important; margin: 0 0 17px !important; font-size: 12px !important; line-height: 1.55 !important; color: #52637c !important; } /* ===================================================== FEATURES ===================================================== */ .path-features { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 11px !important; margin: 0 0 19px !important; } .path-feature { width: 100% !important; min-height: 28px !important; display: flex !important; align-items: flex-start !important; gap: 9px !important; font-size: 11.5px !important; line-height: 1.45 !important; white-space: normal !important; } .path-feature-icon { width: 28px !important; height: 28px !important; min-width: 28px !important; flex: 0 0 28px !important; border-radius: 50% !important; } .path-feature > span:last-child { flex: 1 1 auto !important; min-width: 0 !important; padding-top: 4px !important; line-height: 1.45 !important; } /* ===================================================== BUTTON ===================================================== */ .path-button { width: 190px !important; height: 47px !important; min-height: 47px !important; margin: 0 !important; padding: 0 17px !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; flex: 0 0 auto !important; border-radius: 10px !important; font-size: 12px !important; } .path-button i { font-size: 16px !important; } /* ===================================================== STATS ===================================================== */ .path-stat { width: 100% !important; height: auto !important; min-height: 42px !important; margin: 15px 0 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 9px !important; background: transparent !important; position: relative !important; z-index: 10 !important; } /* ===================================================== AVATARS ===================================================== */ .path-avatars { display: flex !important; align-items: center !important; flex: 0 0 auto !important; } .path-avatars span { width: 28px !important; height: 28px !important; min-width: 28px !important; flex: 0 0 28px !important; margin-left: -6px !important; display: block !important; overflow: hidden !important; border: 2px solid #ffffff !important; border-radius: 50% !important; } .path-avatars span:first-child { margin-left: 0 !important; } .path-avatars img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; } /* ===================================================== STAT TEXT ===================================================== */ .path-stat-text { min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 1px !important; text-align: left !important; } .path-stat-text strong { display: block !important; margin: 0 !important; color: #10243c !important; font-size: 12px !important; line-height: 14px !important; font-weight: 800 !important; white-space: nowrap !important; } .path-stat-text small { display: block !important; margin: 0 !important; color: #64748b !important; font-size: 9px !important; line-height: 11px !important; font-weight: 500 !important; white-space: nowrap !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .two-paths-section { padding: 50px 14px 40px; } .two-paths-header { margin-bottom: 32px; } .two-paths-badge { font-size: 9px; padding: 6px 11px; } .two-paths-header h2 { font-size: 29px; line-height: 1.1; letter-spacing: -1px; } .two-paths-header p { font-size: 12.5px; line-height: 1.55; } /* CARD */ .path-card { border-radius: 17px !important; } /* IMAGE */ .path-card-image, .path-card-learners .path-card-image, .path-card-employers .path-card-image { height: 175px !important; flex: 0 0 175px !important; } /* CONTENT */ .path-card-content { padding: 21px 18px 18px !important; } /* LABEL */ .path-label { min-height: 27px !important; padding: 5px 10px !important; font-size: 9.5px !important; } /* TITLE */ .path-card h3 { margin: 13px 0 8px !important; font-size: 21px !important; } /* DESCRIPTION */ .path-description { margin-bottom: 16px !important; font-size: 11.5px !important; line-height: 1.55 !important; } /* FEATURES */ .path-features { gap: 10px !important; margin-bottom: 18px !important; } .path-feature { min-height: 27px !important; gap: 8px !important; font-size: 11px !important; line-height: 1.45 !important; } .path-feature-icon { width: 27px !important; height: 27px !important; min-width: 27px !important; flex-basis: 27px !important; } .path-feature > span:last-child { padding-top: 4px !important; } /* BUTTON */ .path-button { width: 185px !important; height: 45px !important; min-height: 45px !important; font-size: 11px !important; } /* STATS */ .path-stat { margin-top: 14px !important; gap: 8px !important; } .path-avatars span { width: 27px !important; height: 27px !important; min-width: 27px !important; flex-basis: 27px !important; margin-left: -6px !important; } .path-stat-text strong { font-size: 11.5px !important; line-height: 14px !important; } .path-stat-text small { font-size: 8.5px !important; line-height: 11px !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .two-paths-section { padding-left: 12px; padding-right: 12px; } .two-paths-header h2 { font-size: 27px; } .two-paths-header p { font-size: 12px; } /* IMAGE */ .path-card-image, .path-card-learners .path-card-image, .path-card-employers .path-card-image { height: 160px !important; flex: 0 0 160px !important; } /* CONTENT */ .path-card-content { padding: 19px 16px 17px !important; } .path-card h3 { font-size: 20px !important; margin-top: 12px !important; } .path-description { font-size: 10.8px !important; line-height: 1.5 !important; margin-bottom: 15px !important; } .path-features { gap: 9px !important; margin-bottom: 17px !important; } .path-feature { font-size: 10.3px !important; line-height: 1.45 !important; } .path-feature-icon { width: 25px !important; height: 25px !important; min-width: 25px !important; flex-basis: 25px !important; } .path-feature > span:last-child { padding-top: 3px !important; } .path-button { width: 178px !important; height: 43px !important; min-height: 43px !important; font-size: 10.5px !important; } .path-stat { margin-top: 13px !important; gap: 7px !important; } .path-avatars span { width: 25px !important; height: 25px !important; min-width: 25px !important; flex-basis: 25px !important; margin-left: -5px !important; } .path-stat-text strong { font-size: 10.5px !important; line-height: 13px !important; } .path-stat-text small { font-size: 8px !important; line-height: 10px !important; } } /* ========================================================= HOW IT WORKS SECTION ========================================================= */ /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1100px) { .how-it-works-section { padding: 70px 25px 65px; } .how-it-works-header { margin-bottom: 65px; } .how-it-works-header h2 { font-size: 38px; } .how-it-works-header p { font-size: 17px; } .steps-wrapper { column-gap: 10px; } .steps-line { left: 10%; right: 10%; } .step-icon { width: 54px; height: 54px; flex-basis: 54px; } .step-icon i { font-size: 20px; } .step-number { margin-top: 15px; font-size: 12px; } .step-item h3 { font-size: 13px; } .step-item p { max-width: 180px; font-size: 12px; line-height: 1.5; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .how-it-works-section { padding-left: 20px; padding-right: 20px; } .how-it-works-header h2 { font-size: 34px; } .how-it-works-header p { font-size: 16px; } .steps-wrapper { column-gap: 5px; } .steps-line { left: 9%; right: 9%; } .step-icon { width: 50px; height: 50px; flex-basis: 50px; border-width: 3px; } .step-icon i { font-size: 18px; } .step-number { margin-top: 14px; font-size: 11px; } .step-item h3 { margin-top: 8px; font-size: 12px; } .step-item p { max-width: 155px; font-size: 10.5px; line-height: 1.45; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .how-it-works-section { padding: 60px 18px 55px; } /* ----------------------------------------------------- HEADER ----------------------------------------------------- */ .how-it-works-header { width: 100%; margin-bottom: 45px; } .how-it-works-badge { min-height: 29px; margin-bottom: 18px; padding: 6px 14px; font-size: 10px; } .how-it-works-header h2 { font-size: 30px; line-height: 1.13; letter-spacing: -1px; } .how-it-works-header h2 br { display: none; } .how-it-works-header p { margin-top: 13px; font-size: 14px; line-height: 1.55; } /* ----------------------------------------------------- STEPS ----------------------------------------------------- */ .steps-wrapper { width: 100%; display: flex; flex-direction: column; gap: 28px; padding-left: 8px; padding-right: 0; } /* ----------------------------------------------------- VERTICAL LINE ----------------------------------------------------- */ .steps-line { top: 29px; bottom: 29px; left: 37px; right: auto; width: 2px; height: auto; background: linear-gradient( 180deg, #286db1 0%, #4c8cf2 25%, #f47716 50%, #3ca39b 75%, #e07a00 100% ); } /* ----------------------------------------------------- STEP ----------------------------------------------------- */ .step-item { width: 100%; min-height: 75px; display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 18px; align-items: center; text-align: left; } /* ----------------------------------------------------- ICON ----------------------------------------------------- */ .step-icon { grid-column: 1; grid-row: 1 / span 3; width: 58px; height: 58px; flex: none; } .step-icon i { font-size: 21px; } /* ----------------------------------------------------- NUMBER ----------------------------------------------------- */ .step-number { grid-column: 2; grid-row: 1; margin: 0 0 3px; font-size: 11px; } /* ----------------------------------------------------- TITLE ----------------------------------------------------- */ .step-item h3 { grid-column: 2; grid-row: 2; margin: 0 0 4px; font-size: 14px; line-height: 1.2; } /* ----------------------------------------------------- DESCRIPTION ----------------------------------------------------- */ .step-item p { grid-column: 2; grid-row: 3; width: 100%; max-width: none; margin: 0; font-size: 12px; line-height: 1.5; } .step-item p br { display: none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .how-it-works-section { padding: 15px 15px 45px; } .how-it-works-header { margin-bottom: 40px; } .how-it-works-header h2 { font-size: 27px; line-height: 1.15; } .how-it-works-header p { font-size: 13px; line-height: 1.55; } .steps-wrapper { gap: 25px; padding-left: 5px; } .steps-line { left: 32px; top: 27px; bottom: 27px; } .step-item { grid-template-columns: 50px minmax(0, 1fr); column-gap: 15px; } .step-icon { width: 50px; height: 50px; } .step-icon i { font-size: 18px; } .step-number { font-size: 10px; } .step-item h3 { font-size: 13px; } .step-item p { font-size: 11.5px; line-height: 1.5; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .how-it-works-section { padding-left: 12px; padding-right: 12px; } .how-it-works-header h2 { font-size: 25px; } .how-it-works-header p { font-size: 12px; } .steps-wrapper { gap: 23px; padding-left: 4px; } .steps-line { left: 29px; top: 25px; bottom: 25px; } .step-item { grid-template-columns: 46px minmax(0, 1fr); column-gap: 13px; } .step-icon { width: 46px; height: 46px; } .step-icon i { font-size: 16px; } .step-number { font-size: 9.5px; } .step-item h3 { font-size: 12px; } .step-item p { font-size: 10.5px; line-height: 1.45; } } /* ========================================================= PROGRAMS SECTION ========================================================= */ /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1100px) { .programs-section { padding: 70px 28px 60px; } .programs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .programs-heading h2 { font-size: 34px; } .program-card { min-height: 265px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .programs-section { padding: 55px 18px 45px; } /* ===================================================== HEADER - CENTER ALIGNED ===================================================== */ .programs-header { width: 100%; margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; } .programs-heading { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } .programs-heading h2 { width: 100%; max-width: 370px; margin: 0 auto; font-size: 29px; line-height: 1.12; letter-spacing: -.8px; text-align: center; } .programs-heading p { width: 100%; max-width: 330px; margin: 9px auto 0; font-size: 13px; line-height: 1.5; text-align: center; } /* ===================================================== VIEW ALL BUTTON ===================================================== */ .programs-view-btn { width: 175px; height: 42px; margin: 0 auto; display: inline-flex; align-items: center; justify-content: space-between; font-size: 12px; } /* ===================================================== GRID ===================================================== */ .programs-grid { width: 100%; grid-template-columns: 1fr; gap: 16px; } /* ===================================================== CARD ===================================================== */ .program-card { min-height: 0; padding: 21px; border-radius: 15px; } .program-top { margin-bottom: 20px; } .program-icon { width: 44px; height: 44px; flex-basis: 44px; font-size: 17px; } .program-duration { font-size: 10px; padding: 5px 9px; } .program-card h3 { font-size: 17px; margin-bottom: 8px; } .program-card p { font-size: 13px; line-height: 1.55; } .program-link { padding-top: 18px; font-size: 12px; } /* ===================================================== ENTERPRISE ===================================================== */ .program-enterprise-card { min-height: 250px; padding: 22px 21px; border-radius: 15px; } .enterprise-shape { width: 65px; height: 65px; } .program-enterprise-card h3 { font-size: 18px; } .program-enterprise-card p { max-width: 90%; font-size: 12.5px; } .enterprise-button { height: 44px; margin-top: 18px; font-size: 11.5px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .programs-section { padding: 48px 14px 40px; } /* ===================================================== HEADER ===================================================== */ .programs-header { margin-bottom: 28px; gap: 15px; text-align: center; } .programs-heading { width: 100%; align-items: center; text-align: center; } .programs-heading h2 { width: 100%; max-width: 340px; margin: 0 auto; font-size: 27px; line-height: 1.12; text-align: center; } .programs-heading p { width: 100%; max-width: 310px; margin: 9px auto 0; font-size: 12.5px; text-align: center; } .programs-view-btn { width: 170px; height: 41px; margin: 0 auto; font-size: 11.5px; } /* ===================================================== GRID ===================================================== */ .programs-grid { gap: 14px; } /* ===================================================== CARD ===================================================== */ .program-card { padding: 19px; border-radius: 14px; } .program-top { margin-bottom: 18px; } .program-icon { width: 42px; height: 42px; flex-basis: 42px; } .program-duration { font-size: 9.5px; padding: 5px 8px; } .program-card h3 { font-size: 16px; } .program-card p { font-size: 12px; line-height: 1.55; } .program-link { font-size: 11.5px; } /* ===================================================== ENTERPRISE ===================================================== */ .program-enterprise-card { min-height: 235px; padding: 20px 19px; } .enterprise-shape { width: 58px; height: 58px; } .enterprise-badge { font-size: 9px; } .program-enterprise-card h3 { font-size: 17px; margin-top: 11px; } .program-enterprise-card p { font-size: 12px; line-height: 1.5; } .enterprise-button { height: 42px; font-size: 11px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .programs-section { padding-left: 12px; padding-right: 12px; } /* ===================================================== HEADER ===================================================== */ .programs-heading h2 { max-width: 300px; font-size: 25px; line-height: 1.12; text-align: center; } .programs-heading p { max-width: 290px; font-size: 12px; text-align: center; } .programs-view-btn { width: 165px; height: 40px; font-size: 11px; } /* ===================================================== CARD ===================================================== */ .program-card { padding: 17px; } .program-duration { font-size: 9px; } .program-card h3 { font-size: 15.5px; } .program-card p { font-size: 11.5px; } /* ===================================================== ENTERPRISE ===================================================== */ .program-enterprise-card { padding: 18px 17px; } } /* ========================================================= WHY CHOOSE YUDHRA SECTION ========================================================= */ /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1100px) { .why-yudhra-section { padding: 70px 28px 75px; } .why-yudhra-header { margin-bottom: 48px; } .why-yudhra-header h2 { font-size: 35px; } .why-yudhra-header p { font-size: 15px; } .why-yudhra-grid { gap: 20px; } .why-card { padding: 20px; gap: 13px; } .why-card-icon { width: 50px; height: 50px; min-width: 50px; flex-basis: 50px; font-size: 19px; } .why-card h3 { font-size: 15px; } .why-card p { font-size: 12px; } .why-side-note { display: none; } .why-dots { left: 20px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 767px) { .why-yudhra-section { padding: 55px 18px 55px; } .why-yudhra-header { margin-bottom: 35px; } .why-yudhra-badge { min-height: 27px; margin-bottom: 15px; padding: 5px 14px; font-size: 10px; } .why-yudhra-header h2 { font-size: 29px; line-height: 1.13; letter-spacing: -.9px; } .why-yudhra-header p { margin-top: 12px; font-size: 13px; line-height: 1.55; } /* GRID */ .why-yudhra-grid { grid-template-columns: 1fr; gap: 14px; } /* CARD */ .why-card { min-height: 0; padding: 19px; gap: 14px; border-radius: 14px; } /* ICON */ .why-card-icon { width: 48px; height: 48px; min-width: 48px; flex-basis: 48px; border-radius: 11px; font-size: 18px; } /* TITLE */ .why-card h3 { margin: 1px 0 6px; font-size: 15px; line-height: 1.3; } /* DESCRIPTION */ .why-card p { font-size: 12px; line-height: 1.55; } .why-dots, .why-side-note { display: none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .why-yudhra-section { padding: 48px 14px 45px; } .why-yudhra-header { margin-bottom: 30px; } .why-yudhra-header h2 { max-width: 350px; margin-left: auto; margin-right: auto; font-size: 27px; line-height: 1.14; } .why-yudhra-header p { max-width: 330px; font-size: 12.5px; } .why-yudhra-grid { gap: 12px; } .why-card { padding: 17px; gap: 12px; } .why-card-icon { width: 44px; height: 44px; min-width: 44px; flex-basis: 44px; border-radius: 10px; font-size: 17px; } .why-card h3 { font-size: 14.5px; margin-bottom: 5px; } .why-card p { font-size: 11.5px; line-height: 1.5; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .why-yudhra-section { padding-left: 12px; padding-right: 12px; } .why-yudhra-header h2 { font-size: 25px; } .why-yudhra-header p { font-size: 12px; } .why-card { padding: 15px; gap: 11px; } .why-card-icon { width: 42px; height: 42px; min-width: 42px; flex-basis: 42px; font-size: 16px; } .why-card h3 { font-size: 14px; } .why-card p { font-size: 11px; } } /* ========================================================= SKILL VERIFICATION SECTION ========================================================= */ /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1100px) { .skill-verification-section { padding: 65px 28px 35px; } .skill-verification-container { max-width: 950px; } .verification-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 35px; } .verification-content h2 { max-width: 100%; font-size: 34px; line-height: 1.08; } .verification-description { max-width: 100%; font-size: 14px; } /* PROCESS */ .verification-process { width: 100%; max-width: 100%; } .verification-process-item { padding-left: 9px; padding-right: 9px; font-size: 11px; } .verification-process-active { margin-left: 6px; padding-left: 13px; padding-right: 13px; } /* ACTIONS */ .verification-actions { width: 100%; } .verification-primary-btn { width: 210px; } .verification-watch-btn { font-size: 12px; } /* CERTIFICATE */ .certificate-frame { width: 100%; padding: 25px 20px; box-sizing: border-box; } .verification-visual-tag { margin-right: 5px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .skill-verification-section { padding: 60px 25px 35px; } .verification-main { grid-template-columns: 1fr; gap: 45px; } .verification-content { width: 100%; max-width: 700px; } .verification-content h2 { max-width: 650px; font-size: 36px; } .verification-description { max-width: 650px; } /* PROCESS */ .verification-process { width: 100%; max-width: 695px; } /* ACTIONS */ .verification-actions { width: 100%; margin-top: 30px; } /* VISUAL */ .verification-visual { width: 100%; max-width: 700px; margin: 0 auto; } .certificate-frame { width: 100%; padding: 30px 25px; } .verification-visual-note { right: 5px; } /* BOTTOM */ .verification-bottom { margin-top: 40px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .skill-verification-section { width: 100%; padding: 50px 18px 35px; box-sizing: border-box; } .skill-verification-container { width: 100%; max-width: 100%; } /* ===================================================== MAIN ===================================================== */ .verification-main { width: 100%; display: flex; flex-direction: column; gap: 38px; } /* ===================================================== CONTENT ===================================================== */ .verification-content { width: 100%; max-width: 100%; padding: 0; } /* ===================================================== BADGE ===================================================== */ .verification-badge { min-height: 29px; padding: 5px 12px 5px 7px; gap: 7px; font-size: 10px; } .verification-badge-icon { width: 16px; height: 16px; flex: 0 0 16px; font-size: 8px; } /* ===================================================== HEADING ===================================================== */ .verification-content h2 { width: 100%; max-width: 100%; margin: 21px 0 15px; font-size: 29px; line-height: 1.12; letter-spacing: -.8px; } .verification-content h2 span { display: block; } /* ===================================================== DESCRIPTION ===================================================== */ .verification-description { width: 100%; max-width: 100%; margin: 0; font-size: 13px; line-height: 1.6; } /* ===================================================== PROCESS BAR ===================================================== */ .verification-process { width: 100%; max-width: 100%; height: 50px; min-height: 50px; margin-top: 23px; padding: 4px 5px; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .verification-process::-webkit-scrollbar { display: none; } /* PROCESS ITEMS */ .verification-process-item { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 10px; white-space: nowrap; box-sizing: border-box; } .verification-process-item i { flex: 0 0 auto; font-size: 12px; } /* DIVIDER */ .verification-divider { width: 1px; height: 18px; flex: 0 0 1px; } /* ACTIVE */ .verification-process-active { flex: 0 0 auto; width: auto; min-width: max-content; height: 40px; margin-left: 5px; margin-right: 0; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; white-space: nowrap; box-sizing: border-box; } /* ===================================================== ACTIONS — FULL WIDTH / SAME LINE ===================================================== */ .verification-actions { width: 100%; margin-top: 25px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; box-sizing: border-box; } /* PRIMARY BUTTON */ .verification-primary-btn { width: 165px; min-width: 165px; flex: 0 0 165px; height: 46px; margin: 0; padding: 0 13px; display: inline-flex; align-items: center; justify-content: space-between; box-sizing: border-box; font-size: 10px; } .verification-primary-btn i { font-size: 14px; } /* WATCH BUTTON */ .verification-watch-btn { width: auto; min-width: 0; flex: 0 1 auto; margin: 0; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; font-size: 10px; } .verification-play-icon { width: 32px; height: 32px; min-width: 32px; flex: 0 0 32px; } .verification-play-icon i { font-size: 11px; } /* ===================================================== VISUAL ===================================================== */ .verification-visual { width: 100%; max-width: 100%; padding-top: 0; margin: 0; } .verification-visual-note { display: none; } /* ===================================================== CERTIFICATE ===================================================== */ .certificate-frame { position: relative; width: 100%; max-width: 100%; height: auto; padding: 18px 12px; box-sizing: border-box; background: #f5f6f8; } .certificate-frame img { width: 100%; height: auto; display: block; object-fit: contain; } /* VISUAL TAG */ .verification-visual-tag { margin: 10px 4px 0 auto; min-height: 32px; padding: 5px 11px; font-size: 10px; } /* ===================================================== BOTTOM ===================================================== */ .verification-bottom { width: 100%; margin-top: 32px; padding-top: 21px; } .verification-guarantees { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 10px; } .verification-guarantee-label { white-space: normal; } .verification-bottom-divider { display: none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .skill-verification-section { padding: 45px 14px 30px; } /* HEADING */ .verification-content h2 { font-size: 26px; line-height: 1.12; letter-spacing: -.7px; } /* DESCRIPTION */ .verification-description { font-size: 12px; line-height: 1.58; } /* PROCESS */ .verification-process { height: 47px; min-height: 47px; padding: 4px; } .verification-process-item { height: 37px; padding: 0 6px; font-size: 9px; } .verification-process-item i { font-size: 11px; } .verification-process-active { height: 37px; margin-left: 4px; padding: 0 11px; font-size: 9px; } /* ===================================================== ACTIONS — BALANCED FULL WIDTH ===================================================== */ .verification-actions { width: 100%; margin-top: 23px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; } .verification-primary-btn { width: 150px; min-width: 150px; flex: 0 0 150px; height: 44px; padding: 0 11px; font-size: 9.5px; } .verification-primary-btn i { font-size: 13px; } .verification-watch-btn { flex: 0 1 auto; gap: 5px; font-size: 9px; white-space: nowrap; } .verification-play-icon { width: 29px; height: 29px; min-width: 29px; flex: 0 0 29px; } .verification-play-icon i { font-size: 10px; } /* CERTIFICATE */ .certificate-frame { padding: 13px 8px; } .verification-visual-tag { min-height: 30px; padding: 5px 9px; font-size: 9px; } /* BOTTOM */ .verification-bottom { margin-top: 28px; padding-top: 19px; } .verification-guarantees { font-size: 9.5px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .skill-verification-section { padding-left: 12px; padding-right: 12px; } /* HEADING */ .verification-content h2 { font-size: 24px; } /* DESCRIPTION */ .verification-description { font-size: 11.5px; } /* PROCESS */ .verification-process-item { padding: 0 5px; font-size: 8.5px; } .verification-process-active { margin-left: 3px; padding: 0 9px; font-size: 8.5px; } /* ===================================================== ACTIONS ===================================================== */ .verification-actions { width: 100%; justify-content: space-between; gap: 5px; } .verification-primary-btn { width: 140px; min-width: 140px; flex: 0 0 140px; height: 42px; padding: 0 9px; font-size: 8.5px; } .verification-primary-btn i { font-size: 12px; } .verification-watch-btn { flex: 0 1 auto; gap: 4px; font-size: 8px; white-space: nowrap; } .verification-play-icon { width: 27px; height: 27px; min-width: 27px; flex: 0 0 27px; } .verification-play-icon i { font-size: 9px; } /* CERTIFICATE */ .certificate-frame { padding: 10px 6px; } } /* ========================================================= EMPLOYER SECTION ========================================================= */ /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1100px) { .employer-section { padding: 70px 28px 65px; } .employer-container { column-gap: 40px; } .employer-content h2 { font-size: 39px; letter-spacing: -1.4px; } .employer-description { font-size: 15px; } .employer-benefits { gap: 18px; } .employer-image-wrap { max-width: 620px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .employer-container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; } .employer-content h2 { font-size: 34px; letter-spacing: -1.2px; } .employer-description { font-size: 14px; line-height: 1.6; } .employer-primary-btn { width: 220px; font-size: 12px; } .employer-watch-btn { font-size: 12px; } .employer-benefits { gap: 12px; } .employer-benefit-icon { width: 42px; height: 42px; font-size: 16px; } .employer-benefit-content h3 { font-size: 12px; } .employer-benefit-content p { font-size: 10px; } .employer-image-wrap { max-width: 520px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .employer-section { padding: 55px 18px 50px; } /* CONTAINER */ .employer-container { display: flex; flex-direction: column; gap: 42px; } /* ===================================================== CONTENT ===================================================== */ .employer-content { width: 100%; text-align: left; } /* BADGE */ .employer-badge { min-height: 29px; padding: 5px 12px 5px 8px; font-size: 10px; } /* HEADING */ .employer-content h2 { max-width: 100%; margin: 20px 0 14px; font-size: 30px; line-height: 1.1; letter-spacing: -.9px; } /* DESCRIPTION */ .employer-description { max-width: 100%; font-size: 13px; line-height: 1.6; } /* ===================================================== ACTIONS ===================================================== */ .employer-actions { width: 100%; margin-top: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } .employer-primary-btn { width: 190px; min-width: 190px; height: 46px; padding: 0 14px; font-size: 10px; } .employer-primary-btn i { font-size: 14px; } .employer-watch-btn { gap: 7px; font-size: 9px; white-space: nowrap; } .employer-play { width: 32px; height: 32px; flex: 0 0 32px; } .employer-play i { font-size: 11px; } /* ===================================================== BENEFITS ===================================================== */ .employer-benefits { margin-top: 34px; grid-template-columns: 1fr; gap: 13px; } .employer-benefit { display: grid; grid-template-columns: 40px 1fr; column-gap: 10px; align-items: center; } .employer-benefit-icon { width: 40px; height: 40px; margin: 0; border-radius: 10px; font-size: 15px; } .employer-benefit-content h3 { margin-bottom: 2px; font-size: 12px; } .employer-benefit-content p { max-width: 100%; font-size: 10px; } /* ===================================================== IMAGE ===================================================== */ .employer-visual { width: 100%; padding: 0; box-sizing: border-box; } .employer-image-wrap { width: 100%; max-width: 100%; margin: 0 auto; } .employer-main-image { width: 100%; height: auto; display: block; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .employer-section { padding: 48px 14px 43px; } .employer-container { gap: 35px; } .employer-content h2 { font-size: 27px; line-height: 1.1; } .employer-description { font-size: 12px; line-height: 1.55; } /* ACTIONS */ .employer-actions { gap: 8px; } .employer-primary-btn { width: 165px; min-width: 165px; height: 43px; padding: 0 12px; font-size: 9px; } .employer-primary-btn i { font-size: 13px; } .employer-watch-btn { gap: 5px; font-size: 8px; } .employer-play { width: 29px; height: 29px; flex: 0 0 29px; } .employer-play i { font-size: 10px; } /* BENEFITS */ .employer-benefits { margin-top: 27px; gap: 11px; } .employer-benefit-icon { width: 38px; height: 38px; font-size: 14px; } .employer-benefit-content h3 { font-size: 11.5px; } .employer-benefit-content p { font-size: 9.5px; } /* IMAGE */ .employer-image-wrap { width: 100%; max-width: 100%; } .employer-main-image { width: 100%; height: auto; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .employer-section { padding-left: 12px; padding-right: 12px; } .employer-content h2 { font-size: 25px; } .employer-description { font-size: 11.5px; } .employer-actions { gap: 6px; } .employer-primary-btn { width: 150px; min-width: 150px; height: 41px; font-size: 8.5px; padding-left: 11px; padding-right: 11px; } .employer-watch-btn { font-size: 7.5px; gap: 4px; } .employer-play { width: 27px; height: 27px; flex-basis: 27px; } .employer-play i { font-size: 9px; } .employer-benefit-icon { width: 36px; height: 36px; } .employer-benefit-content h3 { font-size: 11px; } .employer-benefit-content p { font-size: 9px; } .employer-image-wrap { width: 100%; } } /* ========================================================= WHY WE STARTED SECTION ========================================================= */ /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1100px) { .why-started-section { padding: 65px 28px 65px; } .why-started-header h2 { font-size: 35px; } .why-started-header > p { font-size: 15px; } .why-started-grid { gap: 20px; } .why-started-card { padding: 24px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .why-started-header h2 { max-width: 800px; font-size: 32px; } .why-started-header > p { font-size: 14px; } .why-started-card { min-height: 145px; padding: 22px; gap: 15px; } .why-started-icon { width: 50px; height: 50px; flex-basis: 50px; font-size: 20px; } .why-started-card-content h3 { font-size: 17px; } .why-started-card-content p { font-size: 13px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .why-started-section { padding: 55px 18px 50px; } /* HEADER */ .why-started-header { text-align: left; } .why-started-badge { min-height: 28px; padding: 6px 13px; font-size: 10px; } .why-started-header h2 { max-width: 100%; margin: 18px 0 12px; font-size: 29px; line-height: 1.12; letter-spacing: -.8px; } .why-started-header > p { max-width: 100%; font-size: 13px; line-height: 1.55; } /* CARDS */ .why-started-grid { margin-top: 28px; grid-template-columns: 1fr; gap: 14px; } .why-started-card { min-height: 0; padding: 20px; border-radius: 16px; gap: 15px; align-items: flex-start; } .why-started-icon { width: 46px; height: 46px; flex: 0 0 46px; font-size: 18px; } .why-started-card-content h3 { margin-bottom: 6px; font-size: 16px; } .why-started-card-content p { font-size: 12px; line-height: 1.55; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .why-started-section { padding: 48px 14px 42px; } .why-started-header h2 { font-size: 27px; line-height: 1.12; } .why-started-header > p { font-size: 12px; line-height: 1.55; } .why-started-grid { margin-top: 24px; gap: 12px; } .why-started-card { padding: 18px; border-radius: 14px; gap: 13px; } .why-started-icon { width: 42px; height: 42px; flex-basis: 42px; font-size: 17px; } .why-started-card-content h3 { font-size: 15px; } .why-started-card-content p { font-size: 11.5px; line-height: 1.5; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .why-started-section { padding-left: 12px; padding-right: 12px; } .why-started-header h2 { font-size: 25px; } .why-started-header > p { font-size: 11.5px; } .why-started-card { padding: 16px; gap: 11px; } .why-started-icon { width: 39px; height: 39px; flex-basis: 39px; font-size: 15px; } .why-started-card-content h3 { font-size: 14px; } .why-started-card-content p { font-size: 10.5px; } } /* ========================================================= BOTTOM CTA SECTION ========================================================= */ /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1100px) { .bottom-cta-section { padding: 35px 28px 45px; } .bottom-cta-container { padding: 35px 40px; grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr); gap: 35px; } .bottom-cta-content h2 { font-size: 33px; } .bottom-cta-content p { font-size: 14px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .bottom-cta-container { padding: 32px; grid-template-columns: 1fr; gap: 25px; } .bottom-cta-content h2 { max-width: 650px; font-size: 32px; } .bottom-cta-content p { max-width: 650px; } .bottom-cta-form { max-width: 600px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .bottom-cta-section { padding: 45px 18px 40px; } .bottom-cta-container { min-height: auto; padding: 28px 22px; border-radius: 18px; gap: 23px; } /* CONTENT */ .bottom-cta-content h2 { margin-bottom: 11px; font-size: 27px; line-height: 1.1; letter-spacing: -.8px; } .bottom-cta-content p { font-size: 13px; line-height: 1.55; } /* FORM */ .bottom-cta-form { max-width: 100%; } .bottom-cta-form form { flex-direction: column; align-items: stretch; gap: 10px; } .bottom-cta-input-wrap { width: 100%; height: 48px; } .bottom-cta-button { width: 100%; height: 48px; flex: none; justify-content: center; gap: 15px; } .bottom-cta-note { justify-content: center; margin-top: 9px; font-size: 9.5px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .bottom-cta-section { padding: 40px 14px 35px; } .bottom-cta-container { padding: 25px 18px; border-radius: 16px; gap: 20px; } .bottom-cta-content h2 { font-size: 25px; line-height: 1.1; } .bottom-cta-content p { font-size: 12px; line-height: 1.55; } .bottom-cta-input-wrap { height: 46px; } .bottom-cta-input-wrap input { font-size: 12px; padding-left: 40px; } .bottom-cta-button { height: 46px; font-size: 12px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .bottom-cta-section { padding-left: 12px; padding-right: 12px; } .bottom-cta-container { padding: 22px 16px; } .bottom-cta-content h2 { font-size: 23px; } .bottom-cta-content p { font-size: 11.5px; } .bottom-cta-note { font-size: 9px; } } /* ========================================================= PROGRAM PAGE HERO ========================================================= */ @media (max-width: 767px) { .program-hero-section { padding-left: 22px; padding-right: 22px; min-height: auto; overflow: hidden; } .program-hero-container { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: auto; row-gap: 0; } /* ===================================================== CONTENT ===================================================== */ .program-hero-content { width: 100%; max-width: 100%; padding-top: 28px; } .program-hero-badge { min-height: 27px; padding: 6px 11px; gap: 6px; font-size: 8.5px; } .program-hero-content h1 { width: 100%; max-width: 100%; margin: 20px 0 18px; font-size: 34px; line-height: 1.08; letter-spacing: -1.2px; } .program-hero-description { width: 100%; max-width: 100%; font-size: 13px; line-height: 1.65; } /* ===================================================== ACTIONS ===================================================== */ .program-hero-actions { width: 100%; margin-top: 25px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; } .program-hero-primary-btn { width: 100%; min-width: 0; height: 49px; padding: 0 16px; border-radius: 9px; font-size: 12.5px; } .program-hero-watch-btn { width: fit-content; gap: 10px; font-size: 12px; } .program-hero-play { width: 36px; height: 36px; flex: 0 0 36px; } /* ===================================================== TRUST — ONE LINE ===================================================== */ .program-hero-trust { width: 100%; margin-top: 25px; margin-bottom: 5px; display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; font-size: 8.7px; line-height: 1.4; white-space: nowrap; overflow: hidden; } .program-hero-trust > * { flex-shrink: 0; white-space: nowrap; } .program-trust-icon { flex: 0 0 auto; font-size: 11px; } .program-trust-dot { width: 3px; height: 3px; flex: 0 0 3px; } /* ===================================================== IMAGE AREA ===================================================== */ .program-hero-visual { position: relative; width: 100%; min-height: 440px; height: 440px; margin-top: 18px; display: flex; align-items: flex-end; justify-content: center; overflow: visible; } .program-hero-image-wrap { position: relative; width: 100%; max-width: 430px; height: 440px; display: flex; align-items: flex-end; justify-content: center; } .program-hero-image { position: relative; z-index: 2; width: 100%; max-width: 430px; height: auto; max-height: none; object-fit: contain; object-position: center bottom; /* Keep face higher */ transform: translateY(-8px); } /* ===================================================== GLOW ===================================================== */ .program-hero-glow { width: 320px; height: 320px; right: 50%; top: 54%; transform: translate(50%, -50%); } /* ===================================================== VERIFICATION CARD ACROSS CHEST — NOT FACE ===================================================== */ .program-floating-card { display: flex; } .program-verified-card { position: absolute; z-index: 30; left: 50%; top: 48%; transform: translateX(-50%); width: 285px; min-width: 0; padding: 12px 14px; display: flex; align-items: center; gap: 12px; border-radius: 15px; box-sizing: border-box; } .program-floating-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; font-size: 19px; } .program-verified-card strong { font-size: 13.5px; line-height: 1.15; } .program-verified-card span { margin-top: 5px; font-size: 9.5px; line-height: 1.3; } /* ===================================================== GROWTH CARD MOVE TO BOTTOM RIGHT ===================================================== */ .program-growth-card { position: absolute; z-index: 35; display: flex; right: 0; bottom: 8px; width: 125px; padding: 12px; box-sizing: border-box; border-radius: 14px; } .program-growth-icon { width: 31px; height: 31px; margin-bottom: 7px; font-size: 14px; } .program-growth-card span { font-size: 9px; line-height: 1.35; } .program-growth-card strong { margin-top: 5px; font-size: 22px; } .program-growth-card small { font-size: 8px; } /* Hide desktop decorations */ .program-hero-script, .program-orange-mark-top, .program-orange-mark-middle { display: none; } } /* ========================================================= 480px AND BELOW ========================================================= */ @media (max-width: 480px) { .program-hero-section { padding-left: 20px; padding-right: 20px; } .program-hero-content { padding-top: 25px; } .program-hero-content h1 { margin-top: 19px; margin-bottom: 17px; font-size: 30px; line-height: 1.1; letter-spacing: -.9px; } .program-hero-description { font-size: 12.3px; line-height: 1.67; } .program-hero-actions { margin-top: 24px; gap: 12px; } .program-hero-primary-btn { height: 48px; font-size: 12px; } .program-hero-watch-btn { font-size: 11.5px; } /* TRUST */ .program-hero-trust { margin-top: 24px; margin-bottom: 4px; gap: 5px; font-size: 7.8px; white-space: nowrap; overflow: hidden; } /* IMAGE */ .program-hero-visual { min-height: 400px; height: 400px; margin-top: 18px; } .program-hero-image-wrap { height: 400px; max-width: 400px; } .program-hero-image { max-width: 400px; /* Face slightly higher */ transform: translateY(-12px); } /* ===================================================== VERIFICATION ===================================================== */ .program-verified-card { width: 285px; left: 50%; top: 47%; transform: translateX(-50%); padding: 12px 14px; } /* ===================================================== GROWTH ===================================================== */ .program-growth-card { right: 0; bottom: 5px; width: 120px; padding: 11px; } .program-growth-icon { width: 30px; height: 30px; margin-bottom: 6px; } .program-growth-card span { font-size: 8.5px; } .program-growth-card strong { font-size: 21px; } .program-growth-card small { font-size: 7.5px; } /* GLOW */ .program-hero-glow { width: 280px; height: 280px; top: 55%; } } /* ========================================================= 360px AND BELOW ========================================================= */ @media (max-width: 360px) { .program-hero-section { padding-left: 16px; padding-right: 16px; } .program-hero-content { padding-top: 22px; } .program-hero-content h1 { font-size: 27px; line-height: 1.1; } .program-hero-description { font-size: 11.7px; } /* TRUST */ .program-hero-trust { margin-top: 20px; font-size: 7px; gap: 4px; } /* IMAGE */ .program-hero-visual { min-height: 370px; height: 370px; margin-top: 16px; } .program-hero-image-wrap { height: 370px; } .program-hero-image { transform: translateY(-12px); } /* VERIFICATION */ .program-verified-card { width: 260px; top: 46%; padding: 10px 11px; gap: 9px; } .program-floating-icon { width: 36px; height: 36px; flex-basis: 36px; font-size: 16px; } .program-verified-card strong { font-size: 12px; } .program-verified-card span { font-size: 8px; } /* GROWTH */ .program-growth-card { width: 108px; right: 0; bottom: 3px; padding: 9px; } .program-growth-icon { width: 27px; height: 27px; font-size: 12px; } .program-growth-card span { font-size: 7.5px; } .program-growth-card strong { font-size: 19px; } .program-growth-card small { font-size: 6.5px; } /* GLOW */ .program-hero-glow { width: 225px; height: 225px; } } /* ========================================================= PROGRAM SEARCH & FILTER SECTION ========================================================= */ /* ========================================================= 1200px - 1399px ========================================================= */ @media (max-width: 1399px) { .program-filter-section { padding-left: 45px; padding-right: 45px; } .program-filter-row { grid-template-columns: minmax(0, 1fr) 250px 270px; } .program-filter-container { padding-left: 20px; padding-right: 20px; } } /* ========================================================= 992px - 1199px ========================================================= */ @media (max-width: 1199px) { .program-filter-section { padding-left: 40px; padding-right: 40px; } .program-filter-row { grid-template-columns: minmax(0, 1fr) 220px 240px; gap: 10px; } .program-search-box input, .program-filter-select { font-size: 13px; } .program-category-tab { padding: 0 17px; font-size: 13px; } } /* ========================================================= 768px - 991px ========================================================= */ @media (max-width: 991px) { .program-filter-section { padding-left: 30px; padding-right: 30px; padding-bottom: 30px; } .program-filter-container { padding: 18px; border-radius: 20px; } .program-filter-row { grid-template-columns: 1fr 1fr; } .program-search-box { grid-column: 1 / -1; } .program-category-tabs { margin-top: 16px; } } /* ========================================================= 576px - 767px ========================================================= */ @media (max-width: 767px) { .program-filter-section { padding-left: 20px; padding-right: 20px; padding-bottom: 25px; } .program-filter-container { padding: 15px; border-radius: 18px; } .program-filter-row { grid-template-columns: 1fr; gap: 9px; } .program-search-box, .program-filter-select { height: 46px; } .program-search-box { grid-column: auto; } .program-search-box { padding: 0 14px; } .program-search-box input { font-size: 12px; } .program-filter-select { padding: 0 14px; font-size: 12px; } .program-filter-select-left { gap: 9px; } .program-category-tabs { margin-top: 14px; gap: 8px; padding-bottom: 2px; } .program-category-tab { height: 34px; padding: 0 15px; font-size: 11.5px; } } /* ========================================================= 480px AND BELOW ========================================================= */ @media (max-width: 480px) { .program-filter-section { padding-left: 18px; padding-right: 18px; padding-bottom: 22px; } .program-filter-container { padding: 13px; border-radius: 16px; } .program-search-box, .program-filter-select { height: 44px; } .program-search-box i { margin-right: 10px; font-size: 14px; } .program-search-box input { font-size: 11px; } .program-filter-select { font-size: 11.5px; } .program-filter-select-left i { font-size: 14px; } .program-filter-select > i { font-size: 11px; } .program-category-tabs { gap: 7px; } .program-category-tab { height: 32px; padding: 0 13px; font-size: 10.5px; } } /* ========================================================= 360px AND BELOW ========================================================= */ @media (max-width: 360px) { .program-filter-section { padding-left: 14px; padding-right: 14px; } .program-filter-container { padding: 11px; border-radius: 14px; } .program-search-box input { font-size: 10px; } .program-filter-select { font-size: 10.5px; } .program-category-tab { padding: 0 11px; font-size: 10px; } } /* ========================================================= PROGRAM CATALOG SECTION ========================================================= */ /* ========================================================= 1400px - 1599px ========================================================= */ @media (max-width: 1599px) and (min-width: 1400px) { .program-catalog-section { padding-left: 55px; padding-right: 55px; } .program-catalog-content h2 { font-size: 37px; } } /* ========================================================= 1200px - 1399px ========================================================= */ @media (max-width: 1399px) and (min-width: 1200px) { .program-catalog-section { padding-left: 45px; padding-right: 45px; } .program-catalog-content h2 { font-size: 35px; } .program-catalog-content p { font-size: 14px; } } /* ========================================================= 992px - 1199px ========================================================= */ @media (max-width: 1199px) and (min-width: 992px) { .program-catalog-section { padding-left: 40px; padding-right: 40px; padding-top: 38px; } .program-catalog-container { gap: 25px; } .program-catalog-content h2 { font-size: 32px; } .program-catalog-content p { font-size: 13.5px; } .program-catalog-explore-icon { width: 38px; height: 38px; font-size: 17px; } } /* ========================================================= 768px - 991px ========================================================= */ @media (max-width: 991px) and (min-width: 768px) { .program-catalog-section { padding: 35px 30px 28px; } .program-catalog-container { align-items: flex-end; gap: 25px; } .program-catalog-content { max-width: 650px; } .program-catalog-badge { font-size: 11px; margin-bottom: 9px; } .program-catalog-content h2 { font-size: 30px; line-height: 1.13; letter-spacing: -1px; } .program-catalog-content p { margin-top: 10px; font-size: 13px; } .program-catalog-explore { font-size: 13px; } .program-catalog-explore-icon { width: 37px; height: 37px; font-size: 16px; } } /* ========================================================= 576px - 767px ========================================================= */ @media (max-width: 767px) { .program-catalog-section { padding: 32px 22px 25px; } .program-catalog-container { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .program-catalog-content { width: 100%; max-width: 100%; } /* BADGE */ .program-catalog-badge { margin-bottom: 9px; font-size: 9px; letter-spacing: .45px; } /* HEADING */ .program-catalog-content h2 { width: 100%; font-size: 28px; line-height: 1.13; letter-spacing: -.8px; } /* DESCRIPTION */ .program-catalog-content p { width: 100%; margin-top: 11px; font-size: 12.5px; line-height: 1.6; } /* EXPLORE */ .program-catalog-explore { margin-bottom: 0; gap: 8px; font-size: 12px; } .program-catalog-explore-icon { width: 36px; height: 36px; font-size: 15px; } } /* ========================================================= 480px AND BELOW ========================================================= */ @media (max-width: 480px) { .program-catalog-section { padding: 28px 20px 22px; } .program-catalog-container { gap: 17px; } .program-catalog-badge { margin-bottom: 8px; font-size: 8.5px; } .program-catalog-content h2 { font-size: 25px; line-height: 1.14; letter-spacing: -.65px; } .program-catalog-content p { margin-top: 10px; font-size: 11.7px; line-height: 1.62; } .program-catalog-explore { font-size: 11.5px; } .program-catalog-explore-icon { width: 34px; height: 34px; font-size: 14px; } } /* ========================================================= 360px AND BELOW ========================================================= */ @media (max-width: 360px) { .program-catalog-section { padding: 25px 16px 20px; } .program-catalog-content h2 { font-size: 23px; line-height: 1.15; } .program-catalog-content p { font-size: 11px; } .program-catalog-explore { font-size: 11px; } .program-catalog-explore-icon { width: 32px; height: 32px; font-size: 13px; } } /* ========================================================= PROGRAM CARDS SECTION ========================================================= */ /* ========================================================= 1400px - 1599px ========================================================= */ @media (max-width: 1599px) and (min-width: 1400px) { .program-cards-section { padding-left: 55px; padding-right: 55px; } .program-card { padding-left: 22px; padding-right: 22px; } } /* ========================================================= 1200px - 1399px ========================================================= */ @media (max-width: 1399px) and (min-width: 1200px) { .program-cards-section { padding-left: 45px; padding-right: 45px; } .program-cards-container { gap: 40px 16px; } .program-card { padding: 22px 19px; } .program-card h3 { font-size: 19px; } .program-card-description { font-size: 11.5px; } .program-card-duration { padding: 0 8px; font-size: 10.5px; } .program-focus-list span { font-size: 9.5px; padding: 5px 8px; } } /* ========================================================= 992px - 1199px ========================================================= */ @media (max-width: 1199px) and (min-width: 992px) { .program-cards-section { padding-left: 40px; padding-right: 40px; } .program-cards-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .program-card { min-height: 400px; } } /* ========================================================= 768px - 991px ========================================================= */ @media (max-width: 991px) and (min-width: 768px) { .program-cards-section { padding: 18px 30px 55px; } .program-cards-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .program-card { min-height: 400px; padding: 22px 20px; } .program-card h3 { font-size: 20px; } .program-card-description { font-size: 12px; } } /* ========================================================= 576px - 767px ========================================================= */ @media (max-width: 767px) { .program-cards-section { padding: 15px 22px 45px; } .program-cards-container { grid-template-columns: 1fr; gap: 18px; } .program-card { min-height: 0; padding: 21px 19px 20px; border-radius: 16px; } .program-card-top { margin-bottom: 18px; } .program-card-icon { width: 45px; height: 45px; flex-basis: 45px; font-size: 18px; } .program-card-duration { height: 26px; font-size: 10.5px; } .program-card h3 { margin-bottom: 9px; font-size: 20px; } .program-card-description { font-size: 12px; line-height: 1.6; } .program-focus-list { margin-top: 13px; } .program-focus-list span { font-size: 9.5px; padding: 6px 9px; } .program-card-actions { padding-top: 20px; } .program-card-actions a { height: 39px; font-size: 11px; } .program-popular-badge { height: 24px; padding: 0 12px; top: -12px; font-size: 9px; } .enterprise-details { margin-top: 20px; } } /* ========================================================= 480px AND BELOW ========================================================= */ @media (max-width: 480px) { .program-cards-section { padding-left: 18px; padding-right: 18px; } .program-cards-container { gap: 16px; } .program-card { padding: 19px 17px 18px; } .program-card-icon { width: 43px; height: 43px; flex-basis: 43px; font-size: 17px; } .program-card-duration { height: 25px; padding: 0 8px; font-size: 9.5px; } .program-card h3 { font-size: 19px; } .program-card-description { font-size: 11.5px; } .program-focus-list span { font-size: 9px; padding: 5px 8px; } .program-card-actions { gap: 7px; } .program-card-actions a { height: 37px; font-size: 10.5px; } .program-popular-badge { font-size: 8px; } .enterprise-details { grid-template-columns: 1fr; gap: 8px; } .enterprise-btn { height: 42px; font-size: 11px; } } /* ========================================================= 360px AND BELOW ========================================================= */ @media (max-width: 360px) { .program-cards-section { padding-left: 14px; padding-right: 14px; } .program-card { padding: 17px 14px; } .program-card h3 { font-size: 18px; } .program-card-description { font-size: 11px; } .program-focus-list span { font-size: 8.5px; padding: 5px 7px; } .program-card-actions { grid-template-columns: 1fr 1fr; gap: 6px; } .program-card-actions a { font-size: 10px; } .enterprise-btn { font-size: 10px; } } /* ========================================================= PROGRAM CARDS SECTION ========================================================= */ /* ========================================================= 1400px - 1599px ========================================================= */ @media (max-width: 1599px) and (min-width: 1400px) { .program-cards-section { padding-left: 55px; padding-right: 55px; } .program-card { padding-left: 22px; padding-right: 22px; } } /* ========================================================= 1200px - 1399px ========================================================= */ @media (max-width: 1399px) and (min-width: 1200px) { .program-cards-section { padding-left: 45px; padding-right: 45px; } .program-cards-container { gap: 40px 16px; } .program-card { padding: 22px 19px; } .program-card h3 { font-size: 19px; } .program-card-description { font-size: 11.5px; } .program-card-duration { padding: 0 8px; font-size: 10.5px; } .program-focus-list span { font-size: 9.5px; padding: 5px 8px; } } /* ========================================================= 992px - 1199px ========================================================= */ @media (max-width: 1199px) and (min-width: 992px) { .program-cards-section { padding-left: 40px; padding-right: 40px; } .program-cards-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .program-card { min-height: 400px; } } /* ========================================================= 768px - 991px ========================================================= */ @media (max-width: 991px) and (min-width: 768px) { .program-cards-section { padding: 18px 30px 55px; } .program-cards-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .program-card { min-height: 400px; padding: 22px 20px; } .program-card h3 { font-size: 20px; } .program-card-description { font-size: 12px; } } /* ========================================================= 576px - 767px ========================================================= */ @media (max-width: 767px) { .program-cards-section { padding: 15px 22px 45px; } .program-cards-container { grid-template-columns: 1fr; gap: 18px; } .program-card { min-height: 0; padding: 21px 19px 20px; border-radius: 16px; } .program-card-top { margin-bottom: 18px; } .program-card-icon { width: 45px; height: 45px; flex-basis: 45px; font-size: 18px; } .program-card-duration { height: 26px; font-size: 10.5px; } .program-card h3 { margin-bottom: 9px; font-size: 20px; } .program-card-description { font-size: 12px; line-height: 1.6; } .program-focus-list { margin-top: 13px; } .program-focus-list span { font-size: 9.5px; padding: 6px 9px; } .program-card-actions { padding-top: 20px; } .program-card-actions a { height: 39px; font-size: 11px; } .program-popular-badge { height: 24px; padding: 0 12px; top: -12px; font-size: 9px; } .enterprise-details { margin-top: 20px; } } /* ========================================================= 480px AND BELOW ========================================================= */ @media (max-width: 480px) { .program-cards-section { padding-left: 18px; padding-right: 18px; } .program-cards-container { gap: 16px; } .program-card { padding: 19px 17px 18px; } .program-card-icon { width: 43px; height: 43px; flex-basis: 43px; font-size: 17px; } .program-card-duration { height: 25px; padding: 0 8px; font-size: 9.5px; } .program-card h3 { font-size: 19px; } .program-card-description { font-size: 11.5px; } .program-focus-list span { font-size: 9px; padding: 5px 8px; } .program-card-actions { gap: 7px; } .program-card-actions a { height: 37px; font-size: 10.5px; } .program-popular-badge { font-size: 8px; } .enterprise-details { grid-template-columns: 1fr; gap: 8px; } .enterprise-btn { height: 42px; font-size: 11px; } } /* ========================================================= 360px AND BELOW ========================================================= */ @media (max-width: 360px) { .program-cards-section { padding-left: 14px; padding-right: 14px; } .program-card { padding: 17px 14px; } .program-card h3 { font-size: 18px; } .program-card-description { font-size: 11px; } .program-focus-list span { font-size: 8.5px; padding: 5px 7px; } .program-card-actions { grid-template-columns: 1fr 1fr; gap: 6px; } .program-card-actions a { font-size: 10px; } .enterprise-btn { font-size: 10px; } } /* ========================================================= TRACK DEEP-DIVE SECTION ========================================================= */ /* ========================================================= 1400px - 1599px ========================================================= */ @media (max-width: 1599px) and (min-width: 1400px) { .track-deep-dive-section { padding-left: 55px; padding-right: 55px; } .track-deep-dive-container { gap: 50px; } } /* ========================================================= 1200px - 1399px ========================================================= */ @media (max-width: 1399px) and (min-width: 1200px) { .track-deep-dive-section { padding-left: 45px; padding-right: 45px; } .track-deep-dive-container { grid-template-columns: minmax(0, 1fr) 430px; gap: 40px; } .track-deep-dive-content h2 { font-size: 35px; } } /* ========================================================= 992px - 1199px ========================================================= */ @media (max-width: 1199px) and (min-width: 992px) { .track-deep-dive-section { padding-left: 40px; padding-right: 40px; } .track-deep-dive-container { grid-template-columns: minmax(0, 1fr) 390px; gap: 30px; } .track-deep-dive-content h2 { font-size: 32px; } .track-deep-dive-content p { font-size: 14px; } .track-deep-dive-delivers { padding: 24px; } } /* ========================================================= 768px - 991px ========================================================= */ @media (max-width: 991px) and (min-width: 768px) { .track-deep-dive-section { padding: 45px 30px; } .track-deep-dive-container { grid-template-columns: 1fr; gap: 28px; } .track-deep-dive-content h2 { font-size: 31px; } .track-deep-dive-content p { font-size: 14px; } .track-deep-dive-delivers { width: 100%; } } /* ========================================================= 576px - 767px ========================================================= */ @media (max-width: 767px) { .track-deep-dive-section { padding: 40px 22px; } .track-deep-dive-container { grid-template-columns: 1fr; gap: 24px; } .track-deep-dive-content h2 { font-size: 29px; line-height: 1.12; letter-spacing: -.9px; } .track-deep-dive-content p { margin-top: 13px; font-size: 12.5px; line-height: 1.6; } .track-deep-dive-delivers { padding: 22px 20px; border-radius: 16px; } .track-deep-dive-delivers h3 { margin-bottom: 14px; font-size: 16px; } .track-delivers-list { gap: 7px; } .track-delivers-list span { padding: 8px 10px; font-size: 10px; } } /* ========================================================= 480px AND BELOW ========================================================= */ @media (max-width: 480px) { .track-deep-dive-section { padding: 34px 20px; } .track-deep-dive-container { gap: 20px; } .track-deep-dive-content h2 { font-size: 25px; letter-spacing: -.7px; } .track-deep-dive-content p { margin-top: 11px; font-size: 11.7px; } .track-deep-dive-delivers { padding: 19px 17px; border-radius: 14px; } .track-deep-dive-delivers h3 { font-size: 15px; } .track-delivers-list span { padding: 7px 9px; font-size: 9px; } } /* ========================================================= 360px AND BELOW ========================================================= */ @media (max-width: 360px) { .track-deep-dive-section { padding: 30px 16px; } .track-deep-dive-content h2 { font-size: 23px; } .track-deep-dive-content p { font-size: 11px; } .track-deep-dive-delivers { padding: 17px 14px; } .track-deep-dive-delivers h3 { font-size: 14px; } .track-delivers-list span { font-size: 8.5px; } } /* ========================================================= HOME RESPONSIVE ========================================================= */ @media (max-width: 1199px) { .programs-section .programs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .programs-section .program-card { min-height: 270px; } } @media (max-width: 767px) { .programs-section .programs-grid { grid-template-columns: 1fr; } .programs-section .program-card { min-height: 270px; padding: 22px 20px; } } /* ========================================================= PROGRAM PAGE RESPONSIVE ========================================================= */ @media (max-width: 991px) { .program-cards-section .program-card { min-height: 400px; } } @media (max-width: 767px) { .program-cards-section .program-card { min-height: 0; padding: 21px 19px 20px; } } @media (max-width: 480px) { .program-cards-section .program-card { min-height: 0; padding: 19px 17px 18px; } } @media (max-width: 360px) { .program-cards-section .program-card { min-height: 0; padding: 17px 14px; } } /* ========================================================= PROGRAM CURRICULUM RESPONSIVE CSS ========================================================= */ /* ========================================================= LARGE TABLET / SMALL DESKTOP ========================================================= */ @media (max-width: 1200px) { .program-curriculum-layout { grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; } .program-curriculum-title-area h3 { font-size: 18px; } .program-mentorship-card h3, .program-credential-card h3 { font-size: 21px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .program-curriculum-layout { grid-template-columns: 1fr; gap: 28px; } .program-curriculum-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .program-mentorship-card { min-height: auto; } .program-credential-card { min-height: auto; } .program-curriculum-heading { display: none !important; } .program-curriculum-main, .program-curriculum-sidebar { padding-top: 0 !important; margin-top: 0 !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .program-curriculum-layout { width: 100%; padding: 0 20px; box-sizing: border-box; display: block; } .program-curriculum-item { margin-bottom: 14px; border-radius: 16px; } .program-curriculum-item-header { min-height: 88px; padding: 18px; gap: 13px; } .program-curriculum-number { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; font-size: 15px; } .program-curriculum-title-area h3 { font-size: 15px; line-height: 1.35; } .program-curriculum-title-area span { margin-top: 4px; font-size: 11px; } .program-curriculum-body { padding: 0 18px 25px; } .program-curriculum-body > p { font-size: 13px; line-height: 1.65; } .program-curriculum-points { grid-template-columns: 1fr; gap: 12px; } .program-curriculum-points > div { font-size: 12px; } .program-curriculum-footer { align-items: flex-start; flex-direction: column; } .program-curriculum-tags { gap: 8px 15px; } .program-curriculum-tags span { font-size: 11px; } .program-curriculum-details { width: 100%; } .program-curriculum-sidebar { display: flex; flex-direction: column; gap: 18px; margin-top: 30px; } .program-mentorship-card, .program-credential-card { min-height: auto; padding: 27px 22px; border-radius: 16px; } .program-mentorship-card h3, .program-credential-card h3 { font-size: 20px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .program-curriculum-layout { padding: 0 16px; } .program-curriculum-item-header { padding: 16px; } .program-curriculum-number { flex: 0 0 40px; width: 40px; height: 40px; font-size: 13px; } .program-curriculum-title-area h3 { font-size: 14px; } .program-curriculum-title-area span { font-size: 10px; } .program-curriculum-body { padding: 0 16px 22px; } .program-curriculum-body > p { font-size: 12px; } .program-curriculum-points > div { font-size: 11px; } .program-mentorship-card h3, .program-credential-card h3 { font-size: 19px; } .program-mentorship-card p, .program-credential-card > p { font-size: 13px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .program-value-strip { width: 100%; max-width: 100%; margin: 30px auto; padding: 18px 0; grid-template-columns: 1fr 1fr; min-height: auto; background: #ffffff !important; overflow: visible !important; } .program-value-strip::before { width: 100vw; background: #ffffff !important; } .program-value-item { min-height: 80px; padding: 14px 18px; } .program-value-item:nth-child(1), .program-value-item:nth-child(2) { border-bottom: 1px solid #dfe7ee; } .program-value-item:nth-child(2), .program-value-item:nth-child(4) { border-right: none; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .program-value-strip { width: 100%; max-width: 100%; display: flex; flex-direction: column; margin: 25px auto; padding: 12px 0; min-height: auto; background: #ffffff !important; } .program-value-strip::before { width: 100vw; background: #ffffff !important; } .program-value-item { width: 100%; min-height: 72px; padding: 12px 18px; border-right: none !important; border-bottom: 1px solid #dfe7ee; } .program-value-item:last-child { border-bottom: none; } .program-value-icon { width: 44px; height: 44px; flex: 0 0 44px; font-size: 17px; } .program-value-content h3 { font-size: 14px; } .program-value-content p { font-size: 11px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .program-value-strip { margin: 20px auto; padding: 10px 0; background: #ffffff !important; } .program-value-strip::before { width: 100vw; background: #ffffff !important; } .program-value-item { min-height: 68px; padding: 10px 16px; } .program-value-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; font-size: 15px; } .program-value-content h3 { font-size: 13px; } .program-value-content p { font-size: 10.5px; } } /* ========================================================= NOT SURE WHICH TRACK FITS ========================================================= */ /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .track-fit-section { padding: 20px 28px; } .track-fit-container { min-height: auto; padding: 55px 45px; border-radius: 30px; } .track-fit-content { max-width: 620px; } .track-fit-content h2 { font-size: 32px; } .track-fit-description { font-size: 15px; } .track-fit-actions { margin-top: 27px; } .track-fit-value-row { width: 100%; max-width: 575px; margin-top: 34px; } .track-fit-value:not(:last-child) { margin-right: 25px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .track-fit-section { padding: 16px 18px; } .track-fit-container { padding: 40px 25px; border-radius: 25px; } .track-fit-content { max-width: 100%; } .track-fit-content h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.7px; } .track-fit-description { margin-top: 14px; font-size: 13px; line-height: 1.55; } .track-fit-actions { flex-direction: column; align-items: stretch; gap: 11px; margin-top: 25px; } .track-fit-primary-btn, .track-fit-secondary-btn { width: 100%; min-width: 0; } .track-fit-value-row { display: grid; grid-template-columns: 1fr; gap: 14px; width: 100%; margin-top: 27px; padding-top: 17px; } .track-fit-value:not(:last-child) { margin-right: 0; } .track-fit-value-icon { flex-basis: 36px; width: 36px; height: 36px; margin-right: 10px; border-radius: 9px; } .track-fit-value-icon i { font-size: 15px; } .track-fit-value-text strong { font-size: 13px; } .track-fit-value-text span { font-size: 10px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .track-fit-section { padding: 12px 14px; } .track-fit-container { padding: 32px 20px; border-radius: 22px; } .track-fit-content h2 { font-size: 24px; line-height: 1.22; } .track-fit-description { margin-top: 12px; font-size: 12px; line-height: 1.6; } .track-fit-actions { margin-top: 22px; } .track-fit-primary-btn, .track-fit-secondary-btn { height: 49px; border-radius: 13px; font-size: 13px; } .track-fit-value-row { gap: 12px; margin-top: 24px; padding-top: 15px; } .track-fit-value-icon { flex-basis: 34px; width: 34px; height: 34px; } .track-fit-value-text strong { font-size: 12px; } .track-fit-value-text span { font-size: 9px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .track-fit-container { padding: 28px 17px; border-radius: 20px; } .track-fit-content h2 { font-size: 22px; } .track-fit-description { font-size: 11px; } .track-fit-primary-btn, .track-fit-secondary-btn { height: 46px; font-size: 12px; } .track-fit-value-text strong { font-size: 11px; } .track-fit-value-text span { font-size: 8.5px; } } /* ========================================================= JOBS HERO ========================================================= */ /* ========================================================= TABLET 992px - 1199px ========================================================= */ @media (max-width: 1199px) and (min-width: 992px) { .jobs-hero-container { padding: 0 40px; } .jobs-hero-grid { grid-template-columns: 46% 54%; column-gap: 10px; min-height: 540px; } .jobs-hero-copy h1 { font-size: 43px; line-height: 1.05; } .jobs-hero-description { font-size: 14px; } .jobs-hero-buttons { flex-direction: column; align-items: stretch; max-width: 390px; } .jobs-btn { width: 100%; } .jobs-pillars { grid-template-columns: 1fr; gap: 12px; max-width: 450px; } .jobs-pillar { padding: 0 !important; border-left: 0 !important; } /* ===================================================== TABLET VISUAL ===================================================== */ .jobs-hero-visual { width: 100%; min-height: 540px; position: relative; display: flex; align-items: flex-end; justify-content: center; } .jobs-hero-image { position: relative; width: 410px; height: 470px; overflow: hidden; border-radius: 0; z-index: 5; } .jobs-hero-image img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center top; } .jobs-hero-glow { width: 430px; height: 430px; right: 0; top: 30px; } .jobs-callout-panel { left: 0; top: 55px; z-index: 20; } .jobs-momentum { right: 0; bottom: 55px; z-index: 20; } } /* ========================================================= TABLET BELOW 992px ========================================================= */ @media (max-width: 991px) { .jobs-hero-section { min-height: auto; padding: 45px 0 35px; } .jobs-hero-container { padding-left: 24px; padding-right: 24px; } .jobs-hero-grid { display: grid; grid-template-columns: 1fr; min-height: 0; row-gap: 30px; } /* ===================================================== CONTENT ===================================================== */ .jobs-hero-copy { width: 100%; max-width: 720px; margin: 0 auto; padding: 0; text-align: center; } .jobs-hero-copy h1 { max-width: 700px; margin-left: auto; margin-right: auto; font-size: 44px; line-height: 1.08; } .jobs-hero-description { max-width: 650px; margin-left: auto; margin-right: auto; } .jobs-hero-buttons { justify-content: center; } .jobs-pillars { margin-left: auto; margin-right: auto; text-align: left; } /* ===================================================== VISUAL ===================================================== */ .jobs-hero-visual { width: 100%; max-width: 600px; min-height: 540px; margin: 0 auto; position: relative; display: flex; align-items: flex-start; justify-content: center; } .jobs-hero-image { position: relative; width: 440px; height: 500px; margin: 0 auto; overflow: hidden; border-radius: 0; z-index: 5; } .jobs-hero-image img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center top; } .jobs-hero-glow { width: 470px; height: 470px; top: 10px; left: 50%; right: auto; transform: translateX(-50%); } .jobs-callout-panel { left: 0; top: 75px; z-index: 20; } .jobs-momentum { right: 0; bottom: 55px; z-index: 20; } } /* ========================================================= MOBILE BELOW 768px ========================================================= */ @media (max-width: 767px) { .jobs-hero-section { min-height: auto; padding: 30px 0 25px; } .jobs-hero-container { padding-left: 18px; padding-right: 18px; } .jobs-hero-grid { row-gap: 24px; } /* ===================================================== HEADING ===================================================== */ .jobs-hero-copy h1 { max-width: 100%; font-size: 36px; line-height: 1.08; letter-spacing: -.9px; } .jobs-hero-description { margin-top: 15px; font-size: 12.5px; line-height: 1.6; } /* ===================================================== BUTTONS ===================================================== */ .jobs-hero-buttons { flex-direction: column; align-items: center; gap: 9px; margin-top: 23px; } .jobs-btn { width: 100%; max-width: 390px; height: 50px; margin-left: auto; margin-right: auto; font-size: 13px; } /* ===================================================== PILLARS ===================================================== */ .jobs-pillars { width: 100%; grid-template-columns: 1fr; gap: 10px; margin-top: 26px; padding-top: 15px; } .jobs-pillar { width: 100%; padding: 0 !important; border: 0 !important; } .jobs-pillar-icon { width: 35px; height: 35px; flex: 0 0 35px; font-size: 13px; } .jobs-pillar-content strong { font-size: 11px; } .jobs-pillar-content span { font-size: 8.5px; line-height: 1.4; } /* ===================================================== HERO VISUAL ===================================================== */ .jobs-hero-visual { width: 100%; max-width: 340px; height: 400px; min-height: 400px; margin: 5px auto 0; position: relative; display: flex; align-items: flex-start; justify-content: center; } /* ===================================================== PERSON IMAGE ===================================================== */ .jobs-hero-image { position: relative; width: 340px; max-width: 100%; height: 400px; margin: 0 auto; overflow: hidden; border-radius: 0; z-index: 5; } .jobs-hero-image img { width: 100%; height: 100%; display: block; /* * IMPORTANT: * Do NOT use cover here. * contain keeps the complete head/face visible. */ object-fit: contain; object-position: center top; } /* ===================================================== IMAGE GLOW ===================================================== */ .jobs-hero-glow { position: absolute; width: 340px; height: 340px; top: 0; left: 50%; right: auto; transform: translateX(-50%); z-index: 1; } /* ===================================================== VERIFIED SKILLS CALLOUT ===================================================== */ .jobs-callout-panel { position: absolute; top: 105px; left: -3px; width: 175px; min-height: 60px; padding: 8px 9px; display: flex; align-items: center; gap: 8px; border-radius: 11px; z-index: 30; } .jobs-callout-icon { width: 29px; height: 29px; flex: 0 0 29px; font-size: 10px; } .jobs-callout-text { display: flex; flex-direction: column; gap: 2px; } .jobs-callout-text strong { font-size: 8.5px; line-height: 1.2; } .jobs-callout-text span { font-size: 6.5px; line-height: 1.3; } /* ===================================================== BUILDING OUR OPENING ROSTER ===================================================== */ .jobs-momentum { position: absolute; right: -3px; bottom: 20px; width: 175px; padding: 9px 10px; border-radius: 11px; z-index: 30; } .jobs-momentum strong { font-size: 8.5px; line-height: 1.2; } .jobs-momentum span { font-size: 6.5px; line-height: 1.3; } } /* ========================================================= SMALL MOBILE BELOW 480px ========================================================= */ @media (max-width: 480px) { .jobs-hero-section { padding: 24px 0 20px; } .jobs-hero-container { padding-left: 13px; padding-right: 13px; } /* ===================================================== HEADING ===================================================== */ .jobs-hero-copy h1 { font-size: 29px; line-height: 1.1; letter-spacing: -.6px; } .jobs-hero-description { margin-top: 12px; font-size: 11px; line-height: 1.6; } /* ===================================================== BUTTONS ===================================================== */ .jobs-btn { height: 47px; font-size: 12px; border-radius: 11px; } /* ===================================================== PILLARS ===================================================== */ .jobs-pillars { margin-top: 23px; gap: 9px; } .jobs-pillar-icon { width: 32px; height: 32px; flex-basis: 32px; } .jobs-pillar-content strong { font-size: 10px; } .jobs-pillar-content span { font-size: 8px; } /* ===================================================== HERO VISUAL ===================================================== */ .jobs-hero-visual { width: 100%; max-width: 320px; height: 370px; min-height: 370px; margin-top: 4px; } /* ===================================================== IMAGE ===================================================== */ .jobs-hero-image { width: 320px; max-width: 320px; height: 370px; } .jobs-hero-image img { width: 100%; height: 100%; object-fit: contain; object-position: center top; } /* ===================================================== GLOW ===================================================== */ .jobs-hero-glow { width: 320px; height: 320px; top: 0; } /* ===================================================== CALLOUT ===================================================== */ .jobs-callout-panel { top: 98px; left: -4px; width: 165px; min-height: 56px; padding: 7px 8px; border-radius: 10px; } .jobs-callout-icon { width: 27px; height: 27px; flex-basis: 27px; font-size: 9px; } .jobs-callout-text { gap: 2px; } .jobs-callout-text strong { font-size: 8px; line-height: 1.2; } .jobs-callout-text span { font-size: 6px; line-height: 1.3; } /* ===================================================== MOMENTUM ===================================================== */ .jobs-momentum { right: -4px; bottom: 17px; width: 165px; padding: 8px 9px; border-radius: 10px; } .jobs-momentum strong { font-size: 8px; line-height: 1.2; } .jobs-momentum span { font-size: 6px; line-height: 1.3; } } /* ========================================================= VERY SMALL MOBILE BELOW 360px ========================================================= */ @media (max-width: 360px) { .jobs-hero-section { padding: 20px 0 18px; } .jobs-hero-container { padding-left: 10px; padding-right: 10px; } /* ===================================================== HEADING ===================================================== */ .jobs-hero-copy h1 { font-size: 26px; line-height: 1.1; } .jobs-hero-description { font-size: 10px; line-height: 1.6; } /* ===================================================== BUTTON ===================================================== */ .jobs-btn { height: 44px; font-size: 11px; } /* ===================================================== VISUAL ===================================================== */ .jobs-hero-visual { width: 290px; max-width: 290px; height: 340px; min-height: 340px; } /* ===================================================== IMAGE ===================================================== */ .jobs-hero-image { width: 290px; max-width: 290px; height: 340px; } .jobs-hero-image img { width: 100%; height: 100%; object-fit: contain; object-position: center top; } /* ===================================================== GLOW ===================================================== */ .jobs-hero-glow { width: 290px; height: 290px; top: 0; } /* ===================================================== CALLOUT ===================================================== */ .jobs-callout-panel { top: 88px; left: -4px; width: 150px; min-height: 52px; padding: 6px 7px; border-radius: 9px; } .jobs-callout-icon { width: 25px; height: 25px; flex-basis: 25px; font-size: 8px; } .jobs-callout-text strong { font-size: 7.5px; } .jobs-callout-text span { font-size: 5.7px; } /* ===================================================== MOMENTUM ===================================================== */ .jobs-momentum { right: -4px; bottom: 12px; width: 150px; padding: 7px 8px; border-radius: 9px; } .jobs-momentum strong { font-size: 7.5px; } .jobs-momentum span { font-size: 5.7px; } } /* ========================================================= TABLET BELOW 992px ========================================================= */ @media (max-width: 991px) { .popular-tracks-section { padding: 30px 0 36px; } .popular-tracks-container { width: 100%; padding: 0 28px; } .popular-tracks-chips { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .popular-track-chip { width: 100%; min-height: 44px; padding: 9px 12px; font-size: 12px; line-height: 1.3; white-space: normal; } } /* ========================================================= MOBILE BELOW 768px ========================================================= */ @media (max-width: 767px) { .popular-tracks-section { width: 100%; padding: 25px 0 30px; } .popular-tracks-container { width: 100%; padding: 0 18px; } .popular-tracks-chips { width: 100%; display: grid; /* * Two equal columns. * This keeps every row aligned. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .popular-track-chip { width: 100%; min-width: 0; min-height: 42px; padding: 8px 10px; font-size: 11px; line-height: 1.25; white-space: normal; text-align: center; border-radius: 999px; } } /* ========================================================= SMALL MOBILE BELOW 480px ========================================================= */ @media (max-width: 480px) { .popular-tracks-section { padding: 22px 0 27px; } .popular-tracks-container { padding: 0 14px; } .popular-tracks-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .popular-track-chip { width: 100%; min-height: 39px; padding: 7px 8px; font-size: 10px; line-height: 1.25; } } /* ========================================================= VERY SMALL MOBILE BELOW 360px ========================================================= */ @media (max-width: 360px) { .popular-tracks-section { padding: 20px 0 24px; } .popular-tracks-container { padding: 0 10px; } .popular-tracks-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .popular-track-chip { min-height: 37px; padding: 6px 6px; font-size: 9px; line-height: 1.25; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .jobs-hiring-section { padding: 75px 28px; } .jobs-hiring-container { grid-template-columns: 1fr; gap: 45px; } .jobs-hiring-content { max-width: 720px; text-align: center; margin: 0 auto; } .jobs-hiring-content h2 { font-size: 38px; } .jobs-hiring-subtitle { max-width: 680px; margin-left: auto; margin-right: auto; font-size: 16px; } .jobs-hiring-btn { margin-top: 27px; } .jobs-hiring-tracks { max-width: 760px; margin: 0 auto; } .jobs-hiring-track { min-height: 95px; } .jobs-hiring-track-name { font-size: 15px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .jobs-hiring-section { padding: 55px 18px; } .jobs-hiring-container { gap: 32px; } .jobs-hiring-badge { padding: 7px 13px; font-size: 10px; } .jobs-hiring-content h2 { margin-top: 17px; font-size: 31px; line-height: 1.18; letter-spacing: -.8px; } .jobs-hiring-subtitle { margin-top: 15px; font-size: 13px; line-height: 1.65; } .jobs-hiring-btn { width: 100%; min-height: 51px; margin-top: 24px; font-size: 13px; } .jobs-hiring-tracks { grid-template-columns: 1fr; gap: 10px; } .jobs-hiring-track { min-height: 72px; padding: 16px 18px; border-radius: 13px; } .jobs-hiring-track-number { margin-bottom: 6px; font-size: 9px; } .jobs-hiring-track-name { font-size: 14px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .jobs-hiring-section { padding: 45px 14px; } .jobs-hiring-container { gap: 27px; } .jobs-hiring-badge { padding: 6px 11px; font-size: 9px; } .jobs-hiring-content h2 { margin-top: 14px; font-size: 27px; line-height: 1.2; } .jobs-hiring-subtitle { margin-top: 13px; font-size: 12px; line-height: 1.65; } .jobs-hiring-btn { min-height: 48px; margin-top: 21px; font-size: 12px; border-radius: 11px; } .jobs-hiring-track { min-height: 67px; padding: 14px 16px; border-radius: 11px; } .jobs-hiring-track-number { font-size: 8px; } .jobs-hiring-track-name { font-size: 12px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .jobs-hiring-section { padding: 38px 10px; } .jobs-hiring-content h2 { font-size: 24px; } .jobs-hiring-subtitle { font-size: 11px; } .jobs-hiring-btn { min-height: 45px; font-size: 11px; } .jobs-hiring-track { min-height: 61px; padding: 12px 14px; } .jobs-hiring-track-name { font-size: 11px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .unlock-matches-section { padding: 70px 0; } .unlock-matches-container { padding: 0 28px; grid-template-columns: 1fr; gap: 40px; } /* * Content first on tablet */ .unlock-matches-content { grid-column: auto; grid-row: auto; order: 1; } .unlock-matches-panel { grid-column: auto; grid-row: auto; order: 2; } .unlock-matches-content h2 { max-width: 700px; font-size: 38px; } .unlock-matches-description { max-width: 700px; font-size: 16px; } .unlock-matches-panel { width: 100%; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .unlock-matches-section { padding: 55px 0; } .unlock-matches-container { padding: 0 18px; gap: 30px; } .unlock-matches-badge { padding: 6px 11px; font-size: 10px; } .unlock-matches-content h2 { margin: 16px 0 14px; font-size: 29px; line-height: 1.18; letter-spacing: -0.7px; } .unlock-matches-description { font-size: 14px; line-height: 1.65; } .unlock-matches-actions { width: 100%; margin-top: 24px; gap: 10px; } .unlock-matches-primary-btn, .unlock-matches-secondary-btn { min-height: 44px; padding: 10px 15px; font-size: 11px; } /* Value panel */ .unlock-matches-panel { padding: 20px 18px; border-radius: 14px; } .unlock-matches-panel::before { width: 3px; border-radius: 14px 0 0 14px; } .unlock-value-item { gap: 12px; padding: 17px 2px; } .unlock-value-icon { flex-basis: 38px; width: 38px; height: 38px; font-size: 15px; border-radius: 8px; } .unlock-value-text { font-size: 12px; line-height: 1.4; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .unlock-matches-section { padding: 45px 0; } .unlock-matches-container { padding: 0 14px; gap: 25px; } .unlock-matches-content h2 { font-size: 25px; } .unlock-matches-description { font-size: 13px; line-height: 1.6; } .unlock-matches-actions { flex-direction: column; align-items: stretch; } .unlock-matches-primary-btn, .unlock-matches-secondary-btn { width: 100%; } .unlock-matches-panel { padding: 17px 14px; } .unlock-value-item { padding: 15px 0; } .unlock-value-icon { flex-basis: 35px; width: 35px; height: 35px; font-size: 14px; } .unlock-value-text { font-size: 11px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .unlock-matches-section { padding: 40px 0; } .unlock-matches-container { padding: 0 10px; } .unlock-matches-content h2 { font-size: 23px; } .unlock-matches-description { font-size: 12px; } .unlock-matches-primary-btn, .unlock-matches-secondary-btn { min-height: 42px; font-size: 10px; } .unlock-value-text { font-size: 10px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .verified-credential-section { padding: 65px 0; } .verified-credential-container { width: calc(100% - 56px); min-height: 280px; padding: 45px 45px; border-radius: 24px; } .verified-credential-content h3 { font-size: 32px; } .verified-credential-content p { font-size: 15px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .verified-credential-section { padding: 50px 0; } .verified-credential-container { width: calc(100% - 36px); min-height: 280px; padding: 38px 25px; border-radius: 20px; } .verified-credential-badge { padding: 6px 11px; font-size: 10px; } .verified-credential-content h3 { margin: 16px 0 13px; font-size: 27px; line-height: 1.18; } .verified-credential-content p { font-size: 13px; line-height: 1.65; } .verified-credential-btn { min-height: 43px; margin-top: 22px; padding: 10px 16px; font-size: 11px; } .verified-credential-container::before { width: 300px; height: 300px; right: -150px; top: -100px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .verified-credential-section { padding: 42px 0; } .verified-credential-container { width: calc(100% - 28px); min-height: 270px; padding: 32px 20px; border-radius: 18px; } .verified-credential-content h3 { font-size: 24px; } .verified-credential-content p { font-size: 12px; line-height: 1.6; } .verified-credential-btn { width: fit-content; min-height: 41px; font-size: 10px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .verified-credential-section { padding: 38px 0; } .verified-credential-container { width: calc(100% - 20px); padding: 28px 17px; border-radius: 16px; } .verified-credential-content h3 { font-size: 22px; } .verified-credential-content p { font-size: 11px; } .verified-credential-btn { min-height: 39px; padding: 9px 14px; font-size: 10px; } } /* ========================================================= HIRE TALENT HERO ========================================================= */ /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .hire-talent-hero-visual-panel { min-height: 395px; border-radius: 22px; background-size: cover; background-position: center; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 991px) { .hire-talent-hero-visual-panel { display: none; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .hire-talent-skill-badge { top: 55px; left: -30px; width: 220px; min-height: 68px; padding: 10px 13px; gap: 11px; border-radius: 13px; } .hire-talent-skill-badge-icon { flex-basis: 40px; width: 40px; height: 40px; border-radius: 10px; font-size: 19px; } .hire-talent-skill-badge-title { font-size: 11px; } .hire-talent-skill-badge-subtitle { font-size: 8px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .hire-talent-skill-badge { top: 35px; left: -8px; width: 205px; min-height: 64px; padding: 9px 11px; gap: 10px; border-radius: 12px; } .hire-talent-skill-badge-icon { flex-basis: 38px; width: 38px; height: 38px; border-radius: 10px; font-size: 18px; } .hire-talent-skill-badge-title { font-size: 10px; } .hire-talent-skill-badge-subtitle { margin-top: 3px; font-size: 8px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .hire-talent-skill-badge { top: 28px; left: -5px; width: 190px; min-height: 60px; padding: 8px 10px; gap: 9px; border-radius: 11px; } .hire-talent-skill-badge-icon { flex-basis: 35px; width: 35px; height: 35px; border-radius: 9px; font-size: 16px; } .hire-talent-skill-badge-title { font-size: 9px; } .hire-talent-skill-badge-subtitle { font-size: 7px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .hire-talent-skill-badge { top: 25px; left: -3px; width: 175px; min-height: 56px; padding: 7px 9px; gap: 8px; } .hire-talent-skill-badge-icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 15px; } .hire-talent-skill-badge-title { font-size: 8px; } .hire-talent-skill-badge-subtitle { font-size: 6.5px; } } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1100px) { .hire-talent-hero-container { grid-template-columns: 1.1fr 0.75fr 0.8fr; gap: 18px; } .hire-talent-hero-content h1 { font-size: 43px; } .hire-talent-hero-content p { font-size: 15px; } .hire-talent-hero-image-wrap { height: 410px; } .hire-talent-hero-image { height: 410px; border-radius: 23px; } .hire-talent-hero-visual-panel { min-height: 395px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .hire-talent-hero-section { padding: 40px 0 60px; } .hire-talent-hero-container { padding: 0 28px; grid-template-columns: 1fr 0.75fr; gap: 30px; } .hire-talent-hero-content { grid-column: 1; grid-row: 1; } .hire-talent-hero-image-wrap { grid-column: 2; grid-row: 1; height: 400px; } .hire-talent-hero-image { width: 100%; height: 400px; border-radius: 22px; } .hire-talent-hero-image img { object-fit: cover; object-position: center center; } .hire-talent-hero-visual-panel { display: none; } .hire-talent-hero-content h1 { font-size: 42px; letter-spacing: -1.5px; } .hire-talent-hero-content p { font-size: 14px; line-height: 1.6; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .hire-talent-hero-section { padding: 25px 0 50px; } .hire-talent-hero-container { width: 100%; padding: 0 18px; display: flex; flex-direction: column; gap: 25px; } .hire-talent-hero-content { width: 100%; padding: 0; order: 1; } .hire-talent-hero-content h1 { max-width: 100%; font-size: 34px; line-height: 1.02; letter-spacing: -1px; } .hire-talent-hero-content p { max-width: 100%; margin-top: 18px; font-size: 13px; line-height: 1.6; } .hire-talent-hero-actions { width: 100%; margin-top: 22px; gap: 9px; } .hire-talent-primary-btn, .hire-talent-secondary-btn { min-height: 42px; padding: 9px 14px; font-size: 11px; } /* IMAGE */ .hire-talent-hero-image-wrap { width: 100%; height: 390px; order: 2; } .hire-talent-hero-image { width: 100%; height: 390px; border-radius: 20px; } .hire-talent-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .hire-talent-hero-section { padding: 20px 0 42px; } .hire-talent-hero-container { padding: 0 14px; gap: 22px; } .hire-talent-hero-content h1 { font-size: 29px; line-height: 1.04; } .hire-talent-hero-content p { margin-top: 15px; font-size: 12px; line-height: 1.6; } .hire-talent-hero-actions { width: 100%; flex-direction: column; align-items: stretch; margin-top: 20px; } .hire-talent-primary-btn, .hire-talent-secondary-btn { width: 100%; min-height: 42px; font-size: 10px; } /* IMAGE */ .hire-talent-hero-image-wrap { width: 100%; height: 340px; } .hire-talent-hero-image { width: 100%; height: 340px; border-radius: 17px; } .hire-talent-hero-image img { object-fit: cover; object-position: center center; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .hire-talent-hero-container { padding: 0 10px; } .hire-talent-hero-content h1 { font-size: 26px; } .hire-talent-hero-content p { font-size: 11px; } .hire-talent-hero-image-wrap { height: 310px; } .hire-talent-hero-image { height: 310px; border-radius: 16px; } .hire-talent-primary-btn, .hire-talent-secondary-btn { min-height: 40px; font-size: 9px; } } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1100px) { .building-toward-section { padding: 70px 0; } .building-toward-header { margin-bottom: 38px; } .building-toward-header h2 { font-size: 36px; } .building-toward-grid { gap: 16px; } .building-toward-card { min-height: 225px; padding: 24px 22px; } .building-toward-card h3 { font-size: 17px; } .building-toward-card p { font-size: 12px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .building-toward-section { padding: 60px 0; } .building-toward-container { padding: 0 28px; } .building-toward-header { max-width: 650px; } .building-toward-header h2 { font-size: 34px; } .building-toward-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } .building-toward-card { min-height: 220px; padding: 22px 18px; } .building-toward-icon { width: 42px; height: 42px; margin-bottom: 20px; font-size: 17px; } .building-toward-card h3 { font-size: 15px; } .building-toward-card p { font-size: 11px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .building-toward-section { padding: 48px 0; } .building-toward-container { padding: 0 18px; } .building-toward-header { margin-bottom: 30px; } .building-toward-badge { min-height: 27px; padding: 5px 12px; margin-bottom: 13px; font-size: 10px; } .building-toward-header h2 { font-size: 28px; line-height: 1.12; letter-spacing: -0.7px; } .building-toward-grid { grid-template-columns: 1fr; gap: 12px; } .building-toward-card { min-height: auto; padding: 22px 20px; border-radius: 15px; } .building-toward-number { top: 18px; right: 19px; font-size: 11px; } .building-toward-icon { width: 40px; height: 40px; margin-bottom: 17px; border-radius: 10px; font-size: 16px; } .building-toward-card h3 { font-size: 16px; line-height: 1.3; } .building-toward-card p { margin-top: 9px; font-size: 11px; line-height: 1.5; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .building-toward-section { padding: 42px 0; } .building-toward-container { padding: 0 14px; } .building-toward-header { margin-bottom: 25px; } .building-toward-header h2 { font-size: 24px; } .building-toward-card { padding: 19px 17px; } .building-toward-icon { width: 37px; height: 37px; margin-bottom: 15px; font-size: 15px; } .building-toward-card h3 { font-size: 14px; } .building-toward-card p { font-size: 10px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .building-toward-container { padding: 0 10px; } .building-toward-header h2 { font-size: 22px; } .building-toward-card { padding: 17px 15px; } .building-toward-card h3 { font-size: 13px; } .building-toward-card p { font-size: 9px; } } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1100px) { .approach-works-section { padding: 70px 0; } .approach-works-header h2 { font-size: 36px; } .approach-works-problems { gap: 12px; } .approach-problem-card { padding: 23px 18px; } .approach-problem-card h3 { font-size: 16px; } .approach-problem-card p { font-size: 11px; } .approach-works-solution { padding: 28px 23px; } .approach-works-solution p { font-size: 14px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .approach-works-section { padding: 60px 0; } .approach-works-container { padding: 0 28px; } .approach-works-header { margin-bottom: 35px; } .approach-works-header h2 { font-size: 33px; } .approach-works-layout { grid-template-columns: 1fr; gap: 16px; } .approach-works-solution { min-height: 180px; } .approach-works-solution p { max-width: 600px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .approach-works-section { padding: 48px 0; } .approach-works-container { padding: 0 18px; } .approach-works-header { margin-bottom: 28px; } .approach-works-badge { min-height: 27px; padding: 5px 12px; margin-bottom: 13px; font-size: 10px; } .approach-works-header h2 { font-size: 28px; line-height: 1.12; letter-spacing: -0.7px; } .approach-works-problems { grid-template-columns: 1fr; gap: 11px; } .approach-problem-card { min-height: auto; padding: 20px; border-radius: 14px; } .approach-problem-number { top: 17px; right: 18px; font-size: 10px; } .approach-problem-icon { width: 39px; height: 39px; margin-bottom: 16px; border-radius: 10px; font-size: 16px; } .approach-problem-card h3 { font-size: 15px; } .approach-problem-card p { margin-top: 8px; font-size: 10.5px; line-height: 1.55; } .approach-works-solution { min-height: auto; padding: 25px 20px; border-radius: 14px; } .approach-solution-icon { width: 41px; height: 41px; margin-bottom: 15px; border-radius: 10px; font-size: 18px; } .approach-solution-line { margin-bottom: 14px; } .approach-works-solution p { font-size: 13px; line-height: 1.55; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .approach-works-section { padding: 42px 0; } .approach-works-container { padding: 0 14px; } .approach-works-header h2 { font-size: 24px; } .approach-problem-card { padding: 18px; } .approach-problem-card h3 { font-size: 14px; } .approach-problem-card p { font-size: 10px; } .approach-works-solution { padding: 22px 18px; } .approach-works-solution p { font-size: 11px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .approach-works-container { padding: 0 10px; } .approach-works-header h2 { font-size: 22px; } .approach-problem-card h3 { font-size: 13px; } .approach-problem-card p { font-size: 9px; } .approach-works-solution p { font-size: 10px; } } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1100px) { .talent-network-section { padding: 70px 0; } .talent-network-header h2 { font-size: 36px; } .talent-network-grid { gap: 13px; } .talent-network-card { min-height: 135px; padding: 22px; } .talent-network-card h3 { font-size: 15px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .talent-network-section { padding: 60px 0; } .talent-network-container { padding: 0 28px; } .talent-network-header { margin-bottom: 32px; } .talent-network-header h2 { font-size: 33px; } .talent-network-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .talent-network-card { min-height: 130px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .talent-network-section { padding: 48px 0; } .talent-network-container { padding: 0 18px; } .talent-network-header { margin-bottom: 27px; } .talent-network-badge { min-height: 27px; padding: 5px 12px; margin-bottom: 13px; font-size: 10px; } .talent-network-header h2 { font-size: 28px; line-height: 1.12; letter-spacing: -0.7px; } .talent-network-grid { grid-template-columns: 1fr; gap: 10px; } .talent-network-card { min-height: 105px; padding: 18px; border-radius: 14px; } .talent-network-number { top: 15px; right: 17px; font-size: 10px; } .talent-network-icon { width: 38px; height: 38px; margin-bottom: 13px; border-radius: 9px; font-size: 15px; } .talent-network-card h3 { font-size: 14px; } .talent-network-cta { margin-top: 25px; } .talent-network-btn { min-height: 42px; padding: 9px 17px; font-size: 11px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .talent-network-section { padding: 42px 0; } .talent-network-container { padding: 0 14px; } .talent-network-header h2 { font-size: 24px; } .talent-network-card { min-height: 95px; padding: 16px; } .talent-network-icon { width: 36px; height: 36px; margin-bottom: 11px; font-size: 14px; } .talent-network-card h3 { font-size: 13px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .talent-network-container { padding: 0 10px; } .talent-network-header h2 { font-size: 22px; } .talent-network-card h3 { font-size: 12px; } .talent-network-btn { font-size: 10px; } } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .verification-showcase-section { padding: 70px 0; } .verification-showcase-intro { margin-bottom: 40px; } .verification-showcase-intro h2 { font-size: 37px; } .verification-showcase-row { grid-template-columns: 52px minmax(0, 1fr) 40px; gap: 18px; min-height: 115px; padding: 18px 23px; } .verification-showcase-row:hover { padding-left: 27px; } .verification-showcase-icon { width: 47px; height: 47px; border-radius: 13px; font-size: 18px; } .verification-showcase-content h3 { font-size: 15px; } .verification-showcase-content p { font-size: 11px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .verification-showcase-section { padding: 55px 0; } .verification-showcase-container { padding: 0 18px; } .verification-showcase-intro { margin-bottom: 30px; } .verification-showcase-badge { padding: 5px 11px; margin-bottom: 13px; font-size: 9px; } .verification-showcase-intro h2 { font-size: 29px; line-height: 1.15; letter-spacing: -0.8px; } .verification-showcase-intro p { margin-top: 13px; font-size: 13px; line-height: 1.55; } .verification-showcase-box { border-radius: 18px; } /* Panel heading */ .verification-showcase-heading { padding: 17px 18px; } .verification-showcase-heading span { font-size: 8px; letter-spacing: 1px; } /* Rows */ .verification-showcase-row { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; min-height: 105px; padding: 17px 16px; } .verification-showcase-row:hover { padding-left: 18px; } .verification-showcase-icon { width: 42px; height: 42px; border-radius: 11px; font-size: 17px; } .verification-showcase-content h3 { font-size: 13px; line-height: 1.35; } .verification-showcase-content p { margin-top: 5px; font-size: 10px; line-height: 1.5; } /* Hide row arrow on mobile */ .verification-showcase-arrow { display: none; } /* CTA */ .verification-showcase-footer { padding: 22px 16px; } .verification-showcase-btn { width: 100%; min-height: 43px; padding: 8px 9px 8px 15px; gap: 8px; border-radius: 9px; font-size: 10px; } .verification-showcase-btn i { width: 23px; height: 23px; font-size: 10px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .verification-showcase-section { padding: 45px 0; } .verification-showcase-container { padding: 0 14px; } .verification-showcase-intro h2 { font-size: 25px; } .verification-showcase-intro p { font-size: 12px; } .verification-showcase-row { grid-template-columns: 40px minmax(0, 1fr); gap: 11px; min-height: 100px; padding: 15px 13px; } .verification-showcase-icon { width: 39px; height: 39px; border-radius: 10px; font-size: 15px; } .verification-showcase-content h3 { font-size: 12px; } .verification-showcase-content p { font-size: 9.5px; } .verification-showcase-footer { padding: 19px 13px; } .verification-showcase-btn { font-size: 9.5px; } } /* ========================================= PROOF IN THE OUTPUT ========================================= */ /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .proof-output-section { padding: 70px 0; } .proof-output-header { margin-bottom: 42px; } .proof-output-header h2 { font-size: 39px; } .proof-output-header p { font-size: 16px; } .proof-output-comparison { gap: 18px; } .proof-traditional-panel, .proof-yudhra-panel { padding: 26px; border-radius: 19px; } .proof-traditional-panel > h3, .proof-yudhra-panel > h3 { font-size: 21px; margin-bottom: 22px; } .proof-comparison-item, .proof-verification-item { padding: 17px 0; } .proof-comparison-item h4, .proof-verification-item h4 { font-size: 14px; } .proof-comparison-item p, .proof-verification-item p { font-size: 12px; line-height: 1.55; } .proof-comparison-icon, .proof-verification-icon { width: 40px; height: 40px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .proof-output-section { padding: 55px 0; } .proof-output-container { padding: 0 18px; } .proof-output-header { margin-bottom: 32px; } .proof-output-badge { padding: 6px 12px; margin-bottom: 14px; font-size: 9px; } .proof-output-header h2 { font-size: 31px; line-height: 1.15; letter-spacing: -0.9px; } .proof-output-header p { margin-top: 14px; font-size: 14px; line-height: 1.6; } /* Stack panels */ .proof-output-comparison { grid-template-columns: 1fr; gap: 17px; } .proof-traditional-panel, .proof-yudhra-panel { padding: 23px 19px; border-radius: 17px; } .proof-traditional-panel > h3, .proof-yudhra-panel > h3 { font-size: 19px; margin-bottom: 19px; } /* Traditional */ .proof-comparison-item { grid-template-columns: 42px minmax(0, 1fr); gap: 13px; padding: 16px 0; } .proof-comparison-icon { width: 39px; height: 39px; border-radius: 10px; font-size: 15px; } .proof-comparison-item h4, .proof-verification-item h4 { font-size: 14px; line-height: 1.4; } .proof-comparison-item p, .proof-verification-item p { margin-top: 6px; font-size: 12px; line-height: 1.55; } /* Yudhra */ .proof-verification-item { grid-template-columns: 42px minmax(0, 1fr) 23px; gap: 12px; padding: 16px 0; } .proof-verification-icon { width: 39px; height: 39px; border-radius: 10px; font-size: 15px; } .proof-check { width: 21px; height: 21px; font-size: 10px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .proof-output-section { padding: 45px 0; } .proof-output-container { padding: 0 15px; } .proof-output-header { margin-bottom: 27px; } .proof-output-header h2 { font-size: 27px; line-height: 1.15; } .proof-output-header p { font-size: 13px; line-height: 1.55; } .proof-traditional-panel, .proof-yudhra-panel { padding: 20px 16px; border-radius: 15px; } .proof-traditional-panel > h3, .proof-yudhra-panel > h3 { font-size: 17px; margin-bottom: 17px; } .proof-panel-label { font-size: 8.5px; } .proof-comparison-item { grid-template-columns: 38px minmax(0, 1fr); gap: 11px; padding: 15px 0; } .proof-comparison-icon { width: 36px; height: 36px; font-size: 14px; } .proof-verification-item { grid-template-columns: 38px minmax(0, 1fr) 21px; gap: 10px; padding: 15px 0; } .proof-verification-icon { width: 36px; height: 36px; font-size: 14px; } .proof-comparison-item h4, .proof-verification-item h4 { font-size: 13px; } .proof-comparison-item p, .proof-verification-item p { margin-top: 6px; font-size: 11px; line-height: 1.55; } } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .hiring-cta-section { padding: 70px 0; } .hiring-cta-panel { padding: 55px 40px; border-radius: 22px; } .hiring-cta-content h2 { font-size: 36px; } .hiring-cta-content > p { font-size: 15px; } .hiring-cta-form { max-width: 620px; } .hiring-cta-trust { gap: 18px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .hiring-cta-section { padding: 55px 0; } .hiring-cta-container { padding: 0 18px; } .hiring-cta-panel { padding: 45px 22px; border-radius: 18px; } .hiring-cta-badge { padding: 6px 12px; margin-bottom: 15px; font-size: 9px; } .hiring-cta-content h2 { font-size: 29px; line-height: 1.15; letter-spacing: -0.8px; } .hiring-cta-content > p { margin-top: 14px; font-size: 13px; line-height: 1.55; } /* Form */ .hiring-cta-form { grid-template-columns: 1fr; gap: 9px; margin-top: 25px; } .hiring-cta-input-wrap input { height: 47px; font-size: 12px; } .hiring-cta-btn { width: 100%; height: 47px; font-size: 12px; } /* Trust */ .hiring-cta-trust { flex-direction: column; align-items: flex-start; gap: 11px; margin-top: 25px; } .hiring-cta-trust-item { font-size: 10px; } .hiring-cta-trust-item i { font-size: 12px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .hiring-cta-section { padding: 45px 0; } .hiring-cta-container { padding: 0 14px; } .hiring-cta-panel { padding: 38px 17px; border-radius: 16px; } .hiring-cta-content h2 { font-size: 26px; } .hiring-cta-content > p { font-size: 12px; } .hiring-cta-input-wrap input { height: 45px; padding: 0 14px; font-size: 11px; } .hiring-cta-btn { height: 45px; font-size: 11px; } .hiring-cta-trust { gap: 9px; } .hiring-cta-trust-item { font-size: 9.5px; } } /* ========================================================= ABOUT PAGE HERO MATCHED WITH MAIN PAGE LEFT / RIGHT SPACING ========================================================= */ /* ========================================================= LARGE TABLET / SMALL LAPTOP ========================================================= */ @media (max-width: 1200px) { .about-hero-container { padding-left: 45px; padding-right: 45px; grid-template-columns: 43% minmax(0, 1fr); column-gap: 35px; } .about-hero-content h1 { font-size: 44px; } .about-hero-content p { font-size: 14px; } .about-hero-image-wrap { width: 430px; height: 460px; } .about-hero-visual { min-height: 500px; } .about-hero-callout-top { left: calc(50% - 270px); top: 95px; } .about-hero-callout-bottom { right: calc(50% - 285px); bottom: 38px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .about-hero-section { padding: 45px 0 65px; } .about-hero-container { grid-template-columns: 1fr; padding-left: 35px; padding-right: 35px; gap: 45px; } .about-hero-content { text-align: center; } .about-hero-content h1 { max-width: 700px; margin: 0 auto; font-size: 42px; line-height: 1.08; } .about-hero-content p { max-width: 680px; margin-left: auto; margin-right: auto; font-size: 15px; } .about-hero-actions { justify-content: center; } .about-hero-visual { min-height: 480px; } .about-hero-image-wrap { width: 440px; height: 460px; } .about-hero-callout-top { left: calc(50% - 325px); top: 85px; } .about-hero-callout-bottom { right: calc(50% - 325px); bottom: 25px; } /* Pattern */ .about-hero-section::before { width: 430px; height: 430px; top: -350px; right: 0; } .about-hero-section::after { width: 520px; height: 520px; top: -400px; right: -50px; } .about-hero-visual::before, .about-hero-visual::after { opacity: .65; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .about-hero-section { padding: 35px 0 55px; } .about-hero-container { padding-left: 20px; padding-right: 20px; gap: 40px; } .about-hero-content h1 { font-size: 32px; line-height: 1.12; letter-spacing: -1px; } .about-hero-content p { margin-top: 17px; font-size: 13px; line-height: 1.6; } .about-hero-actions { margin-top: 24px; gap: 9px; } .about-hero-primary-btn, .about-hero-secondary-btn { min-height: 44px; padding: 9px 16px; border-radius: 8px; font-size: 11px; } /* Visual */ .about-hero-visual { min-height: 410px; } .about-hero-image-wrap { width: 100%; max-width: 400px; height: 390px; border-radius: 20px; } /* Top Callout */ .about-hero-callout-top { top: 65px; left: -8px; width: 230px; min-height: 76px; padding: 10px 12px; gap: 10px; border-radius: 13px; } .about-hero-callout-icon { width: 37px; height: 37px; flex-basis: 37px; border-radius: 10px; font-size: 16px; } .about-hero-callout-content h3 { font-size: 10px; } .about-hero-callout-content p { margin-top: 3px; font-size: 8px; } .about-hero-callout-arrow { font-size: 10px; } /* Bottom Callout */ .about-hero-callout-bottom { right: -5px; bottom: 20px; width: 225px; min-height: 70px; padding: 9px 11px; gap: 9px; border-radius: 13px; } .about-hero-round-arrow { width: 28px; height: 28px; flex-basis: 28px; font-size: 11px; } /* Mobile pattern */ .about-hero-section::before { width: 300px; height: 300px; top: -245px; right: -15px; border-color: rgba(244, 119, 22, .18); } .about-hero-section::after { width: 370px; height: 370px; top: -285px; right: -55px; border-color: rgba(244, 119, 22, .14); } .about-hero-visual::before, .about-hero-visual::after { display: none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .about-hero-section { padding: 30px 0 45px; } .about-hero-container { padding-left: 15px; padding-right: 15px; gap: 34px; } .about-hero-content h1 { font-size: 27px; letter-spacing: -.7px; } .about-hero-content p { font-size: 12px; } .about-hero-actions { flex-direction: column; width: 100%; } .about-hero-primary-btn, .about-hero-secondary-btn { width: 100%; max-width: 220px; } /* Image */ .about-hero-visual { min-height: 350px; } .about-hero-image-wrap { max-width: 100%; height: 335px; border-radius: 17px; } /* Top Callout */ .about-hero-callout-top { top: 45px; left: -4px; width: 195px; min-height: 62px; padding: 8px 9px; gap: 8px; border-radius: 11px; } .about-hero-callout-icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 8px; font-size: 14px; } .about-hero-callout-content h3 { font-size: 8.5px; } .about-hero-callout-content p { font-size: 7px; } /* Bottom Callout */ .about-hero-callout-bottom { right: -3px; bottom: 12px; width: 190px; min-height: 58px; padding: 7px 9px; gap: 8px; border-radius: 11px; } .about-hero-callout-bottom .about-hero-callout-icon { width: 31px; height: 31px; flex-basis: 31px; } .about-hero-round-arrow { width: 25px; height: 25px; flex-basis: 25px; font-size: 10px; } /* Pattern */ .about-hero-section::before { width: 250px; height: 250px; top: -205px; right: -20px; } .about-hero-section::after { width: 310px; height: 310px; top: -240px; right: -55px; } } /* ========================================================= EXTRA SMALL ========================================================= */ @media (max-width: 360px) { .about-hero-content h1 { font-size: 24px; } .about-hero-content p { font-size: 11px; } .about-hero-image-wrap { height: 305px; } .about-hero-visual { min-height: 320px; } .about-hero-callout-top { width: 175px; top: 35px; } .about-hero-callout-bottom { width: 170px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .about-foundation-section { padding: 70px 0; } .about-foundation-container { max-width: 900px; padding-left: 35px; padding-right: 35px; grid-template-columns: 1fr; gap: 50px; } .about-foundation-intro { max-width: 700px; margin: 0 auto; text-align: center; } .about-foundation-intro h2 { font-size: 40px; letter-spacing: -1.3px; } .about-foundation-intro p { margin-left: auto; margin-right: auto; font-size: 15px; } .about-foundation-content { max-width: 760px; margin: 0 auto; } .about-foundation-heading { font-size: 15px; } .about-foundation-item-content h3 { font-size: 17px; } .about-foundation-item-content p { font-size: 13px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .about-foundation-section { padding: 55px 0; } .about-foundation-container { padding-left: 20px; padding-right: 20px; gap: 38px; } .about-foundation-badge { min-height: 28px; padding: 5px 12px; margin-bottom: 15px; font-size: 10px; } .about-foundation-intro h2 { font-size: 32px; line-height: 1.15; letter-spacing: -1px; } .about-foundation-intro p { margin-top: 17px; font-size: 13px; line-height: 1.65; } .about-foundation-heading { margin-bottom: 17px; font-size: 14px; } .about-foundation-item { grid-template-columns: 32px 44px minmax(0, 1fr); gap: 12px; padding: 18px 0; } .about-foundation-number { padding-top: 3px; font-size: 10px; } .about-foundation-icon { width: 44px; height: 44px; border-radius: 11px; font-size: 17px; } .about-foundation-item-content h3 { font-size: 15px; line-height: 1.3; } .about-foundation-item-content p { margin-top: 6px; font-size: 12px; line-height: 1.55; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .about-foundation-section { padding: 45px 0; } .about-foundation-container { padding-left: 15px; padding-right: 15px; gap: 32px; } .about-foundation-intro h2 { font-size: 29px; letter-spacing: -0.8px; } .about-foundation-intro p { font-size: 12.5px; } .about-foundation-heading { font-size: 13px; } .about-foundation-item { grid-template-columns: 26px 42px minmax(0, 1fr); gap: 10px; } .about-foundation-icon { width: 42px; height: 42px; border-radius: 11px; } .about-foundation-item-content h3 { font-size: 14px; } .about-foundation-item-content p { font-size: 11.5px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .about-foundation-container { padding-left: 12px; padding-right: 12px; } .about-foundation-intro h2 { font-size: 27px; } .about-foundation-intro p { font-size: 12px; } .about-foundation-item { grid-template-columns: 22px 38px minmax(0, 1fr); gap: 8px; } .about-foundation-icon { width: 38px; height: 38px; font-size: 15px; } .about-foundation-item-content h3 { font-size: 13px; } .about-foundation-item-content p { font-size: 11px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .about-framework-section { padding: 70px 0; } .about-framework-container { max-width: 900px; padding-left: 35px; padding-right: 35px; } .about-framework-header { max-width: 700px; margin-bottom: 42px; } .about-framework-header h2 { font-size: 40px; letter-spacing: -1.3px; } .about-framework-header p { font-size: 15px; } .about-framework-grid { gap: 18px; } .about-framework-panel { min-height: 455px; padding: 28px; } .about-framework-panel-content h3 { font-size: 20px; } .about-framework-panel-content p { font-size: 13px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .about-framework-section { padding: 55px 0; } .about-framework-container { padding-left: 20px; padding-right: 20px; } .about-framework-header { margin-bottom: 35px; } .about-framework-badge { min-height: 28px; padding: 5px 12px; margin-bottom: 15px; font-size: 10px; } .about-framework-header h2 { font-size: 32px; line-height: 1.15; letter-spacing: -1px; } .about-framework-header p { margin-top: 16px; font-size: 13px; line-height: 1.65; } .about-framework-grid { grid-template-columns: 1fr; gap: 16px; } .about-framework-panel { min-height: auto; padding: 25px; border-radius: 18px; } .about-framework-panel-top { margin-bottom: 30px; } .about-framework-icon { width: 45px; height: 45px; border-radius: 11px; font-size: 18px; } .about-framework-number { font-size: 10px; } .about-framework-panel-label { margin-bottom: 12px; font-size: 10px; } .about-framework-panel-content h3 { font-size: 18px; line-height: 1.35; letter-spacing: -0.3px; } .about-framework-panel-content p { margin-top: 14px; font-size: 12px; line-height: 1.6; } .about-framework-btn { min-height: 42px; padding: 9px 17px; margin-top: 25px; font-size: 11.5px; } .about-framework-btn i { width: 23px; height: 23px; font-size: 10px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .about-framework-section { padding: 45px 0; } .about-framework-container { padding-left: 15px; padding-right: 15px; } .about-framework-header { margin-bottom: 30px; } .about-framework-header h2 { font-size: 29px; letter-spacing: -0.8px; } .about-framework-header p { font-size: 12.5px; } .about-framework-panel { padding: 22px; border-radius: 17px; } .about-framework-panel-top { margin-bottom: 26px; } .about-framework-icon { width: 42px; height: 42px; font-size: 17px; } .about-framework-panel-content h3 { font-size: 16px; } .about-framework-panel-content p { font-size: 11.5px; } .about-framework-btn { font-size: 11px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .about-framework-container { padding-left: 12px; padding-right: 12px; } .about-framework-header h2 { font-size: 27px; } .about-framework-header p { font-size: 12px; } .about-framework-panel { padding: 20px; } .about-framework-panel-content h3 { font-size: 15px; } .about-framework-panel-content p { font-size: 11px; } .about-framework-btn { min-height: 40px; padding: 8px 14px; font-size: 10.5px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .about-priority-section { padding: 70px 0; } .about-priority-container { max-width: 900px; padding-left: 35px; padding-right: 35px; } .about-priority-panel { padding: 60px 45px; } .about-priority-content h2 { font-size: 40px; letter-spacing: -1.3px; } .about-priority-content > p { font-size: 15px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .about-priority-section { padding: 55px 0; } .about-priority-container { padding-left: 20px; padding-right: 20px; } .about-priority-panel { padding: 45px 25px; border-radius: 20px; } .about-priority-badge { min-height: 28px; padding: 6px 12px; margin-bottom: 15px; font-size: 10px; } .about-priority-content h2 { font-size: 32px; line-height: 1.15; letter-spacing: -1px; } .about-priority-content > p { margin-top: 16px; font-size: 13px; line-height: 1.65; } .about-priority-form { grid-template-columns: 1fr; gap: 10px; margin-top: 25px; } .about-priority-input-wrap input { height: 48px; font-size: 12px; } .about-priority-btn { width: 100%; height: 48px; font-size: 12px; } .about-priority-values { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 25px; text-align: left; } .about-priority-value { font-size: 11px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .about-priority-section { padding: 45px 0; } .about-priority-container { padding-left: 15px; padding-right: 15px; } .about-priority-panel { padding: 38px 20px; border-radius: 18px; } .about-priority-content h2 { font-size: 29px; letter-spacing: -0.8px; } .about-priority-content > p { font-size: 12.5px; } .about-priority-value { font-size: 10.5px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .about-priority-container { padding-left: 12px; padding-right: 12px; } .about-priority-panel { padding: 32px 17px; } .about-priority-content h2 { font-size: 27px; } .about-priority-content > p { font-size: 12px; } .about-priority-value { font-size: 10px; } } /* ========================================================= CONTACT PAGE HERO ========================================================= */ /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .contact-hero-section { padding: 65px 0 40px; } .contact-hero-container { max-width: 900px; padding-left: 35px; padding-right: 35px; } .contact-hero-content { max-width: 760px; margin-left: 45px; } .contact-hero-content h1 { font-size: 40px; letter-spacing: -1.2px; } .contact-hero-content p { font-size: 15px; } .contact-trust-row { max-width: 100%; padding: 10px 22px; gap: 14px; } .contact-trust-item { gap: 7px; } .contact-trust-text strong { font-size: 10px; } .contact-trust-icon { width: 27px; height: 27px; flex-basis: 27px; font-size: 15px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .contact-hero-section { padding: 52px 0 35px; } .contact-hero-container { padding-left: 20px; padding-right: 20px; } .contact-hero-content { max-width: 100%; margin-left: 0; } .contact-hero-badge { margin-bottom: 13px; font-size: 10px; } .contact-hero-badge i { width: 25px; margin-left: 10px; } .contact-hero-content h1 { max-width: 600px; font-size: 32px; line-height: 1.12; letter-spacing: -1px; } .contact-hero-content p { margin-top: 16px; font-size: 13px; line-height: 1.65; } /* TRUST ROW */ .contact-trust-row { min-height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 27px; padding: 7px 18px; border-radius: 15px; } .contact-trust-item { min-height: 48px; gap: 10px; } .contact-trust-text strong { font-size: 11px; white-space: normal; } .contact-trust-icon { width: 28px; height: 28px; flex-basis: 28px; font-size: 16px; } .contact-trust-divider { width: 100%; height: 1px; flex: none; background: #e6ebf0; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .contact-hero-section { padding: 45px 0 30px; } .contact-hero-container { padding-left: 15px; padding-right: 15px; } .contact-hero-content h1 { font-size: 29px; line-height: 1.13; letter-spacing: -0.8px; } .contact-hero-content p { font-size: 12.5px; } .contact-trust-row { margin-top: 24px; padding: 6px 15px; border-radius: 14px; } .contact-trust-item { min-height: 46px; } .contact-trust-text strong { font-size: 10.5px; } .contact-trust-icon { width: 26px; height: 26px; flex-basis: 26px; font-size: 15px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .contact-hero-container { padding-left: 12px; padding-right: 12px; } .contact-hero-content h1 { font-size: 27px; } .contact-hero-content p { font-size: 12px; } .contact-trust-row { padding-left: 13px; padding-right: 13px; } .contact-trust-text strong { font-size: 10px; } } /* ========================================================= WHO YOU'RE TRYING TO REACH ========================================================= */ /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .contact-route-section { padding: 70px 0; } .contact-route-container { max-width: 900px; padding-left: 35px; padding-right: 35px; } .contact-route-header { margin-bottom: 42px; } .contact-route-header h2 { font-size: 40px; letter-spacing: -1.3px; } .contact-route-grid { gap: 16px; } .contact-route-card { min-height: 445px; padding: 28px; } .contact-route-card-top { margin-bottom: 35px; } .contact-route-number { font-size: 13px; } .contact-route-category { font-size: 12px; } .contact-route-card-content h3 { font-size: 23px; } .contact-route-card-content p { font-size: 14px; } .contact-route-email { font-size: 12px; } .contact-route-email i { font-size: 14px; } .contact-route-btn { min-height: 48px; font-size: 12px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .contact-route-section { padding: 55px 0; } .contact-route-container { padding-left: 20px; padding-right: 20px; } .contact-route-header { margin-bottom: 35px; } .contact-route-badge { margin-bottom: 14px; font-size: 10px; } .contact-route-badge i { width: 25px; margin-left: 10px; } .contact-route-header h2 { font-size: 32px; line-height: 1.15; letter-spacing: -1px; } .contact-route-grid { grid-template-columns: 1fr; gap: 16px; } .contact-route-card { min-height: auto; padding: 27px; border-radius: 18px; } .contact-route-card-top { margin-bottom: 30px; } .contact-route-number { font-size: 13px; } .contact-route-category { margin-bottom: 12px; font-size: 11px; } .contact-route-card-content h3 { font-size: 21px; } .contact-route-card-content p { max-width: none; margin-top: 14px; font-size: 13px; line-height: 1.65; } .contact-route-card-bottom { margin-top: 27px; } .contact-route-email { margin-bottom: 14px; font-size: 11.5px; } .contact-route-email i { font-size: 14px; } .contact-route-btn { min-height: 46px; font-size: 12px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .contact-route-section { padding: 45px 0; } .contact-route-container { padding-left: 15px; padding-right: 15px; } .contact-route-header { margin-bottom: 30px; } .contact-route-header h2 { font-size: 29px; letter-spacing: -0.8px; } .contact-route-card { padding: 24px; border-radius: 17px; } .contact-route-card-top { margin-bottom: 27px; } .contact-route-category { font-size: 10.5px; } .contact-route-card-content h3 { font-size: 19px; } .contact-route-card-content p { font-size: 12.5px; } .contact-route-email { font-size: 11px; } .contact-route-btn { min-height: 44px; font-size: 11.5px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .contact-route-container { padding-left: 12px; padding-right: 12px; } .contact-route-header h2 { font-size: 27px; } .contact-route-card { padding: 21px; } .contact-route-card-content h3 { font-size: 18px; } .contact-route-card-content p { font-size: 12px; } .contact-route-email { font-size: 10.5px; } .contact-route-btn { min-height: 42px; font-size: 11px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .contact-form-section { padding: 70px 0; } .contact-form-container { max-width: 900px; padding-left: 35px; padding-right: 35px; } .contact-form-layout { grid-template-columns: 1fr; gap: 25px; } .contact-form-card { padding: 40px 34px; } .contact-form-header h2 { font-size: 38px; } .contact-direct-card { padding: 42px 34px; } .contact-direct-card h2 { font-size: 36px; } .contact-map-wrapper { height: 300px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .contact-form-section { padding: 55px 0; } .contact-form-container { padding-left: 20px; padding-right: 20px; } .contact-form-card { padding: 32px 25px; border-radius: 19px; } .contact-form-header { margin-bottom: 26px; } .contact-form-badge { font-size: 10px; } .contact-form-badge i { width: 25px; margin-left: 10px; } .contact-form-header h2 { font-size: 32px; line-height: 1.14; letter-spacing: -1px; } .contact-form-header p { margin-top: 15px; font-size: 13px; } .contact-main-form { grid-template-columns: 1fr; gap: 16px; } .contact-form-field-full { grid-column: auto; } .contact-checkbox, .contact-submit-btn, .contact-privacy-note { grid-column: auto; } .contact-form-field label { font-size: 11px; } .contact-input-wrap input, .contact-input-wrap select { height: 46px; font-size: 12px; } .contact-textarea-wrap textarea { min-height: 110px; font-size: 12px; } .contact-checkbox-text { font-size: 11px; } .contact-submit-btn { height: 48px; font-size: 13px; } .contact-privacy-note { font-size: 10.5px; } /* ===================================================== DIRECT CARD ====================================================== */ .contact-direct-column { gap: 18px; } .contact-direct-card { padding: 36px 26px; border-radius: 20px; } .contact-direct-badge { font-size: 10px; } .contact-direct-badge i { width: 26px; margin-left: 10px; } .contact-direct-card h2 { font-size: 32px; letter-spacing: -1px; } .contact-direct-details { margin-top: 30px; } .contact-direct-item { padding: 18px 0; } .contact-direct-icon { width: 43px; height: 43px; flex-basis: 43px; font-size: 18px; } .contact-direct-label { font-size: 10.5px; } .contact-direct-value { font-size: 15px; } /* ===================================================== MAP ====================================================== */ .contact-map-wrapper { width: 100%; height: 240px; border-radius: 18px; } .contact-map-link { top: 11px; right: 11px; min-height: 36px; padding: 7px 11px; font-size: 11px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .contact-form-container { padding-left: 15px; padding-right: 15px; } .contact-form-card { padding: 29px 20px; border-radius: 18px; } .contact-form-header h2 { font-size: 29px; letter-spacing: -0.8px; } .contact-form-header p { font-size: 12.5px; } .contact-direct-card { padding: 31px 21px; border-radius: 18px; } .contact-direct-card h2 { font-size: 29px; } .contact-direct-value { font-size: 14px; } .contact-map-wrapper { height: 210px; border-radius: 16px; } .contact-map-link { top: 10px; right: 10px; min-height: 33px; padding: 6px 10px; font-size: 10px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .contact-form-container { padding-left: 12px; padding-right: 12px; } .contact-form-card { padding: 25px 17px; } .contact-form-header h2 { font-size: 27px; } .contact-form-header p { font-size: 12px; } .contact-input-wrap input, .contact-input-wrap select { font-size: 11px; } .contact-textarea-wrap textarea { font-size: 11px; } .contact-direct-card { padding: 27px 18px; } .contact-direct-card h2 { font-size: 26px; } .contact-direct-value { font-size: 13px; } .contact-map-wrapper { height: 190px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .contact-talk-section { padding-bottom: 70px; } .contact-talk-container { max-width: 900px; padding-left: 35px; padding-right: 35px; } .contact-talk-panel { padding: 60px 45px; border-radius: 23px; } .contact-talk-content h2 { font-size: 40px; letter-spacing: -1.3px; } .contact-talk-content > p { font-size: 15px; } .contact-talk-values { gap: 22px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .contact-talk-section { padding-bottom: 55px; } .contact-talk-container { padding-left: 20px; padding-right: 20px; } .contact-talk-panel { padding: 45px 25px; border-radius: 20px; } .contact-talk-badge { margin-bottom: 15px; font-size: 10px; } .contact-talk-badge i { width: 26px; margin-left: 10px; } .contact-talk-content h2 { font-size: 32px; line-height: 1.15; letter-spacing: -1px; } .contact-talk-content > p { margin-top: 16px; font-size: 13px; line-height: 1.65; } .contact-talk-btn { min-height: 46px; margin-top: 25px; padding: 9px 18px; font-size: 12px; } .contact-talk-values { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 26px; text-align: left; } .contact-talk-value { font-size: 11px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .contact-talk-section { padding-bottom: 45px; } .contact-talk-container { padding-left: 15px; padding-right: 15px; } .contact-talk-panel { padding: 38px 20px; border-radius: 18px; } .contact-talk-content h2 { font-size: 29px; letter-spacing: -0.8px; } .contact-talk-content > p { font-size: 12.5px; } .contact-talk-btn { font-size: 11px; } .contact-talk-value { font-size: 10.5px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .contact-talk-container { padding-left: 12px; padding-right: 12px; } .contact-talk-panel { padding: 32px 17px; } .contact-talk-content h2 { font-size: 27px; } .contact-talk-content > p { font-size: 12px; } .contact-talk-btn { min-height: 43px; padding: 8px 15px; font-size: 10.5px; } .contact-talk-value { font-size: 10px; } } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width: 1200px) { .reference-hero-visual { height: 650px !important; min-height: 650px !important; } .reference-portrait { width: 520px !important; height: 650px !important; right: -15px !important; top: 0 !important; } .reference-portrait-glow { width: 610px !important; height: 610px !important; right: -30px !important; top: -35px !important; } .reference-dotted-path { width: 610px !important; height: 480px !important; left: -65px !important; top: 45px !important; } .reference-step-learn { top: 115px !important; left: 45px !important; } .reference-step-build { top: 255px !important; left: -5px !important; } .reference-step-verified { top: 395px !important; left: -13px !important; } .reference-step-hired { top: 535px !important; left: 95px !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .reference-hero-visual { width: 100% !important; max-width: 600px !important; height: 570px !important; min-height: 570px !important; margin: 30px auto 0 !important; } .reference-portrait-glow { width: 430px !important; height: 430px !important; top: 15px !important; right: 50% !important; transform: translateX(50%) !important; } .reference-portrait { width: 390px !important; height: 520px !important; top: 0 !important; right: 50% !important; transform: translateX(50%) !important; } .reference-dotted-path { width: 470px !important; height: 360px !important; left: 0 !important; top: 50px !important; transform: none !important; } .reference-step { width: 150px !important; min-width: 150px !important; height: 52px !important; padding: 7px 9px !important; } .reference-step-icon { width: 30px !important; height: 30px !important; min-width: 30px !important; flex-basis: 30px !important; font-size: 12px !important; } .reference-step b { font-size: 10px !important; line-height: 13px !important; } .reference-step small { font-size: 7px !important; line-height: 9px !important; } .reference-step-learn { top: 65px !important; left: 10px !important; } .reference-step-build { top: 175px !important; left: 0 !important; } .reference-step-verified { top: 285px !important; left: 0 !important; } .reference-step-hired { top: 400px !important; left: 25px !important; } .reference-skills { top: 30px !important; right: 0 !important; font-size: 18px !important; } .reference-opportunities { top: 90px !important; right: 0 !important; font-size: 15px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .reference-hero-visual { width: 100% !important; max-width: 430px !important; height: 520px !important; min-height: 520px !important; margin: 25px auto 0 !important; } .reference-portrait-glow { width: 350px !important; height: 350px !important; top: 10px !important; right: 50% !important; transform: translateX(50%) !important; } .reference-portrait { width: 320px !important; height: 440px !important; top: 15px !important; right: 50% !important; transform: translateX(50%) !important; } .reference-dotted-path { width: 390px !important; height: 300px !important; left: 0 !important; top: 45px !important; } .reference-step { width: 140px !important; min-width: 140px !important; height: 46px !important; padding: 6px 8px !important; gap: 7px !important; border-radius: 11px !important; } .reference-step-icon { width: 27px !important; height: 27px !important; min-width: 27px !important; flex-basis: 27px !important; border-radius: 7px !important; font-size: 10px !important; } .reference-step b { font-size: 9px !important; line-height: 11px !important; } .reference-step small { font-size: 7px !important; line-height: 9px !important; } .reference-step-learn { top: 60px !important; left: 0 !important; } .reference-step-build { top: 145px !important; left: 0 !important; } .reference-step-verified { top: 235px !important; left: 0 !important; } .reference-step-hired { top: 335px !important; left: 15px !important; } .reference-skills { top: 25px !important; right: 0 !important; font-size: 15px !important; } .reference-opportunities { top: 75px !important; right: 0 !important; font-size: 12px !important; } .reference-accent.accent-one { width: 7px !important; height: 7px !important; left: 45px !important; top: 195px !important; } .reference-accent.accent-two { width: 25px !important; height: 2px !important; left: 30px !important; top: 290px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .reference-hero-visual { height: 480px !important; min-height: 480px !important; } .reference-portrait { width: 285px !important; height: 405px !important; } .reference-portrait-glow { width: 315px !important; height: 315px !important; } .reference-step { width: 127px !important; min-width: 127px !important; height: 44px !important; padding: 5px 7px !important; } .reference-step-learn { top: 55px !important; left: 0 !important; } .reference-step-build { top: 135px !important; left: 0 !important; } .reference-step-verified { top: 215px !important; left: 0 !important; } .reference-step-hired { top: 305px !important; left: 15px !important; } } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width: 1400px) { .verification-visual { width: 53% !important; height: 520px !important; background: transparent !important; box-shadow: none !important; } .certificate-frame { width: 600px !important; height: 500px !important; right: -10px !important; top: -5px !important; background: transparent !important; box-shadow: none !important; } .certificate-frame img { filter: none !important; box-shadow: none !important; } .verification-visual-note { top: -20px !important; right: 35px !important; font-size: 22px !important; } .verification-visual-tag { right: 0 !important; bottom: -5px !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1199px) { .verification-visual { width: 50% !important; height: 440px !important; background: transparent !important; box-shadow: none !important; } .certificate-frame { width: 480px !important; height: 410px !important; right: -20px !important; top: 10px !important; box-shadow: none !important; } .certificate-frame img { filter: none !important; box-shadow: none !important; } .verification-visual-note { top: -5px !important; right: 10px !important; font-size: 18px !important; } .verification-visual-tag { right: 0 !important; bottom: 0 !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 991px) { .verification-visual { width: 100% !important; height: 420px !important; margin: 25px auto 0 !important; display: block !important; background: transparent !important; box-shadow: none !important; } .certificate-frame { width: 430px !important; height: 360px !important; top: 20px !important; right: 50% !important; transform: translateX(50%) !important; box-shadow: none !important; } .certificate-frame img { filter: none !important; box-shadow: none !important; } .verification-visual-note { top: 0 !important; right: 25px !important; font-size: 17px !important; } .verification-visual-tag { right: 20px !important; bottom: 5px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 575px) { .verification-visual { height: 340px !important; } .certificate-frame { width: 350px !important; height: 295px !important; top: 10px !important; right: 50% !important; transform: translateX(50%) !important; box-shadow: none !important; } .certificate-frame img { filter: none !important; box-shadow: none !important; } .verification-visual-note { top: -5px !important; right: 10px !important; font-size: 15px !important; } .verification-visual-tag { padding: 6px 10px !important; font-size: 9px !important; right: 5px !important; bottom: 0 !important; } } /* ========================================================= FINAL LEARNER IMAGE — SHOW GIRL'S FACE ========================================================= */ @media (max-width: 767px) { .path-card-learners .path-card-image { width: 100% !important; height: 185px !important; overflow: hidden !important; } .path-card-learners .path-card-image img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; /* Position girl's face in the visible area */ object-position: center 38% !important; transform: none !important; } .path-card-employers .path-card-image img { object-position: center 30% !important; } } @media (max-width: 480px) { .path-card-learners .path-card-image { height: 175px !important; } .path-card-learners .path-card-image img { object-position: center 30% !important; } .path-card-employers .path-card-image img { object-position: center 30% !important; } } @media (max-width: 360px) { .path-card-learners .path-card-image { height: 160px !important; } .path-card-learners .path-card-image img { object-position: center 38% !important; } .path-card-employers .path-card-image img { object-position: center 30% !important; } } /* ========================================================= YUDHRA — FINAL MOBILE FEATURE BAR POSITION ========================================================= */ @media (max-width: 480px) { .feature-bar { width: calc(100% - 18px) !important; margin-top: -60px !important; margin-left: auto !important; margin-right: auto !important; border-radius: 13px !important; } }