/* --------- This is webpage-specific --------- */ @media (min-width: 420px) { :root { --zato-hero-right-image:url("https://zatosource-production.b-cdn.net/static/img/hero/right/hero-right-education.webp"); } } div.hero-tile-right { background-color: transparent; background-size: contain; background-position: right center; background-repeat: no-repeat; margin-top: -64px; } @media (max-width: 991px) { div.hero-tile-right { display: none; } } /* -------------------------------------------- */ @media (max-width: 767px) { div.industry-education-1 { min-width: none; background-image:url("https://zatosource-production.b-cdn.net/static/img/industry/telco-index/business.webp"); } } @media (min-width: 768px) { div.industry-education-1 { background-image:url("https://zatosource-production.b-cdn.net/static/img/industry/telco-index/business.webp"); } } /* -------------------------------------------- */ @media (max-width: 767px) { div.industry-education-2 { min-width: none; background-image:url("https://zatosource-production.b-cdn.net/static/img/industry/education-index/academic-operations.webp"); } } @media (min-width: 768px) { div.industry-education-2 { min-height: 300px; background-image:url("https://zatosource-production.b-cdn.net/static/img/industry/education-index/academic-operations.webp"); } } /* -------------------------------------------- */ @media (max-width: 767px) { div.industry-education-3 { min-width: none; background-image:url("https://zatosource-production.b-cdn.net/static/img/industry/airports-index/cloud-hybrid.webp"); } } @media (min-width: 768px) { div.industry-education-3 { background-image:url("https://zatosource-production.b-cdn.net/static/img/industry/airports-index/cloud-hybrid.webp"); } } /* -------------------------------------------- */ @media (max-width: 767px) { div.industry-education-4 { min-width: none; max-height: 280px; background-image:url("https://zatosource-production.b-cdn.net/static/img/industry/telco-index/network2.webp"); } } @media (min-width: 768px) { div.industry-education-4 { max-height: 280px; background-image:url("https://zatosource-production.b-cdn.net/static/img/industry/telco-index/network2.webp"); } } /* -------------------------------------------- */ div.industry-education-5 { max-height: 280px; background-image:url("https://zatosource-production.b-cdn.net/static/img/industry/defense-index/cybersecurity-api2.webp"); } div.industry-education-6 { max-height: 280px; background-image:url("https://zatosource-production.b-cdn.net/static/img/industry/defense-index/digital-transformation.webp"); } .ind-stats { padding: 4rem 0 6rem; background: linear-gradient(180deg, #e8f4f8 0%, #fff 100%); text-align: center; } .ind-stats-wrap { max-width: 87.5rem; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 48rem) { .ind-stats-wrap { padding: 0 3rem; } } @media (min-width: 85.4375rem) { .ind-stats-wrap { padding: 0 6rem; } } .ind-stats-header { max-width: none; margin: 0 auto 3rem; } .ind-stats-eyebrow { font-family: ZatoMainFont, sans-serif; font-size: 0.875rem; font-weight: 600; color: #11567f; text-transform: uppercase; margin: 0 0 0.75rem; } .ind-stats-heading { font-family: ZatoMainFontBold, sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.1; color: #042130; margin: 0 0 1rem; } @media (min-width: 64rem) { .ind-stats-heading { font-size: 2.5rem; } } .ind-stats-desc { font-family: ZatoMainFont, sans-serif; font-size: 1.0625rem; line-height: 1.6; color: #535862; margin: 0; } .ind-stats-cards { display: grid; grid-template-columns: 1fr; gap: 40px; justify-items: center; } @media (min-width: 48rem) { .ind-stats-cards { grid-template-columns: repeat(3, 1fr); } } .ind-stats-card { text-align: center; width: 400px; } .ind-stats-card-inner { background: linear-gradient(160deg, #f2f8fb 0%, #f6fafc 30%, #fbfdfe 60%, #ffffff 100%); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; padding: 2rem 1.5rem; min-height: 252px; box-shadow: rgba(23, 23, 23, 0.08) 0px 2px 8px -2px, rgba(23, 23, 23, 0.16) 0px 8px 12px -2px; } .ind-stats-card-inner::before { content: ''; position: absolute; top: 0; left: 0; width: 60%; height: 60%; background-image: radial-gradient(circle, rgba(0, 74, 128, 0.25) 1px, transparent 1px); background-size: 6px 6px; mask-image: radial-gradient(ellipse at top left, rgba(0,0,0,0.6) 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at top left, rgba(0,0,0,0.6) 0%, transparent 70%); pointer-events: none; } .ind-stats-card-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .ind-stats-wave { position: absolute; top: 0; left: 0; width: 100%; height: 70%; } .ind-stats-wave path { fill: rgba(0, 74, 128, 0.02); } .ind-stats-wave path:last-child { fill: rgba(0, 74, 128, 0.01); } .ind-stats-card-number-wrap { display: flex; align-items: baseline; justify-content: center; margin-bottom: 0.75rem; position: relative; z-index: 1; } .ind-stats-card-prefix, .ind-stats-card-suffix { font-family: ZatoMainFontBold, sans-serif; font-size: 3rem; font-weight: 400; color: #032d60; line-height: 1; } .ind-stats-card-prefix { margin-right: 0.125rem; } .ind-stats-card-suffix { margin-left: 0.125rem; align-self: flex-start; margin-top: 0.5rem; } .ind-stats-card-number { font-family: ZatoMainFontBold, sans-serif; font-size: 5rem; font-weight: 400; color: #032d60; line-height: 1; } .ind-stats-card-caption { font-family: ZatoMainFontBold, sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.33; color: #032d60; margin: 0; position: relative; z-index: 1; } .ind-intro { padding: 4rem 0; background: #f6f9fa; position: relative; } .ind-intro::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle, rgba(0, 74, 128, 0.08) 1px, transparent 1px); background-size: 8px 8px; mask-image: linear-gradient(135deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 30%, transparent 60%); -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 30%, transparent 60%); pointer-events: none; } .ind-intro-wrap { max-width: 87.5rem; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 48rem) { .ind-intro-wrap { padding: 0 3rem; } } @media (min-width: 85.4375rem) { .ind-intro-wrap { padding: 0 6rem; } } .ind-intro-cols { display: flex; flex-direction: column; gap: 2.5rem; } @media (min-width: 64rem) { .ind-intro-cols { flex-direction: row; gap: 3rem; } } .ind-intro-left { flex: 0 0 40%; } .ind-intro-right { flex: 0 0 60%; display: flex; flex-direction: column; gap: 2rem; } .ind-intro-eyebrow { font-family: ZatoMainFont, sans-serif; font-size: 0.875rem; font-weight: 400; color: #535862; text-transform: uppercase; margin: 0 0 0.75rem; } .ind-intro-heading { font-family: ZatoMainFontBold, sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.2; color: #042130; margin: 0 0 2rem; } @media (min-width: 64rem) { .ind-intro-heading { font-size: 2.5rem; } } .ind-intro-list { list-style: none; padding: 0; margin: 0 0 1.5rem; } .ind-intro-list li { font-family: ZatoMainFont, sans-serif; font-size: 1.25rem; line-height: 1.5; color: #535862; padding-left: 1.5rem; position: relative; margin-bottom: 1.25rem; } .ind-intro-list li::before { content: '\27A4'; position: absolute; left: 0; color: #004a80; } .ind-intro-list li strong, .ind-intro-text strong { color: #000; } .ind-intro-text { font-family: ZatoMainFont, sans-serif; font-size: 1.25rem; line-height: 1.5; color: #535862; margin: 0 0 2rem; } .ind-intro-btn { display: inline-block; font-family: ZatoMainFontBold, sans-serif; font-size: 1rem; font-weight: 700; color: #fff !important; background: #006fbf; padding: 0.75rem 1.5rem; border-radius: 6px; text-decoration: none; transition: background 0.2s ease; } .ind-intro-btn:hover { background: #004a80; color: #fff !important; text-decoration: none; } .ind-intro-benefit { display: flex; gap: 1rem; background: #fff; border-radius: 12px; padding: 1.25rem; box-shadow: rgba(23, 23, 23, 0.08) 0px 2px 8px -2px, rgba(23, 23, 23, 0.12) 0px 4px 12px -2px; } .ind-intro-benefit-icon { flex-shrink: 0; display: flex; align-items: flex-start; } .ind-racing-triangle { font-size: 1.5rem; color: #004a80; line-height: 1.2; } .ind-intro-benefit-body { flex: 1; } .ind-intro-benefit-title { font-family: ZatoMainFontBold, sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: #042130; margin: 0 0 0.5rem; } .ind-intro-benefit-text { font-family: ZatoMainFont, sans-serif; font-size: 1.125rem; line-height: 1.5; color: #535862; margin: 0; }