@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/assets/fonts/montserrat-normal.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('/assets/fonts/montserrat-italic.woff2') format('woff2'); } :root { --color-light: #DCD7C9; --color-brown: #A27B5B; --color-dark-gray: #3F4E4F; --color-light-gray: #BEBEBE; --color-dark-green: #142828; --color-white: #FFFFFF; --color-black: #000000; --font-family: 'Montserrat', sans-serif; } .my-0 { margin-top: 0; margin-bottom: 0; } .mb-0 { margin-bottom: 0px; } .mb-16 { margin-bottom: 16px; } .mt-16 { margin-top: 16px; } .mb-25 { margin-bottom: 25px; } .mb-60 { margin-bottom: 60px; } .mb-76 { margin-bottom: 76px; } .mb-100 { margin-bottom: 100px; } .mb-120 { margin-bottom: 120px; } .mb-140 { margin-bottom: 140px; } .font-light { font-weight: 300; } .text-light { color: var(--color-light); } .text-light-gray { color: var(--color-light-gray); } .text-dark-green { color: var(--color-dark-green); } .text-brown { color: var(--color-brown); } .text-dark-gray { color: var(--color-dark-gray); } .text-white { color: var(--color-white); } .bg-dark-gray { background: var(--color-dark-gray); } .bg-brown { background: var(--color-brown); } .bg-light { background: var(--color-light); } .bg-dark-green { background: var(--color-dark-green); } .primary-cta:hover { background-color: var(--color-dark-green); color: var(--color-white); } body { font-family: var(--font-family); margin: 0; box-sizing: border-box; } .container { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: 52px; padding-right: 52px; box-sizing: border-box; } a { text-decoration: none; } .text-left { text-align: left; } .section-head, .text-center { text-align: center; } .section-subheading { font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 16px; display: block; } .section-heading { font-weight: 300; font-size: 45px; line-height: 56px; letter-spacing: -0.02em; width: 100%; max-width: 1084px; margin-left: auto; margin-right: auto; margin-top: 0px; } .section-description { font-weight: 400; font-size: 16px; line-height: 24px; } .personal-note { font-weight: 300; font-size: 24px; line-height: 34px; letter-spacing: -0.01em; width: 100%; max-width: 780px; margin-left: auto; margin-right: auto; margin-top: 0px; } .primary-cta { font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.008em; color: var(--color-dark-gray); background-color: var(--color-light); padding: 16px 28px; border-radius: 100px; display: inline-block; text-align: center; transition: all 0.3s ease; } .heading-h3 { font-weight: 700; font-size: 24px; line-height: 32px; } .header-section { padding: 16px 0; } .header-section .logo img { width: 100%; max-width: 80px; } .header-section .header-wrapper { display: flex; justify-content: space-between; align-items: center; } .header-section .header-menu-wrapper { display: flex; align-items: center; } .header-section .header-menu-wrapper nav { margin-right: 22px; } .header-section .header-menu-wrapper nav ul { display: flex; list-style: none; margin: 0; padding: 4px; border-radius: 100px; background-color: #FFFFFF40; } .header-section .header-menu-wrapper nav ul li a { font-size: 14px; line-height: 24px; color: var(--color-dark-gray); font-weight: 400; letter-spacing: 0.7px; padding: 12px 24px; border-radius: 100px; display: block; transition: all 0.3s ease; } .header-section .header-menu-wrapper nav ul li a:hover, .header-section .header-menu-wrapper nav ul li a.active { background-color: #F0F0F0; } .header-section .header-btn { font-size: 14px; line-height: 24px; font-weight: 400; padding: 8px 27px; letter-spacing: 0.05em; background-color: var(--color-dark-gray); color: #EEEFEF; border-radius: 100px; transition: all 0.3s ease; } .header-section .header-btn:hover { background-color: var(--color-dark-green); color: var(--color-white); } .header-section .mobile-header { display: none; } section.banner-section { height: 740px; background: linear-gradient(211.45deg, #DCD7C9 9.63%, #DCD7C9 61.14%, #273939 141.9%); position: relative; overflow: hidden; } section.banner-section .banner-content-wrapper { padding-top: 38px; } section.banner-section .banner-content-wrapper h1 { font-family: 'Montserrat'; font-weight: 300; font-size: 55px; line-height: 65px; letter-spacing: -0.02em; color: var(--color-dark-gray); width: 100%; max-width: 637px; margin-bottom: 32px; } section.banner-section .banner-content-wrapper h1.mw-775 { max-width: 775px; } section.banner-section .banner-content-wrapper a img { height: 56px; width: 56px; transition: all 0.3s ease; } section.banner-section .banner-content-wrapper a img:hover { transform: translateY(-3px); filter: drop-shadow(0px 0px 8px #00000060); } section.banner-section .banner-image-wrapper img { width: 100%; max-width: 650px; position: absolute; right: 0; bottom: 0; mix-blend-mode: multiply; } section.product-section { padding: 70px 0px 99px 0px; } section.product-section .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 57px; row-gap: 34px; width: 100%; max-width: 1013px; margin: auto; } section.product-section .product-grid img, section.product-section .product-grid .progressive-img-wrap { height: 444px; width: 100%; object-fit: cover; } section.capabilities-section { padding: 80px 0px 126px 0px; } section.capabilities-section .capabilities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } section.capabilities-section .capabilities-grid .capabilities-card { width: 100%; padding: 13px; border-radius: 12px; background-color: #F3F3F3; display: flex; flex-direction: column; gap: 32px; box-sizing: border-box; } section.capabilities-section .capabilities-grid .capabilities-card img { height: 39px; width: 39px; } section.capabilities-section .capabilities-grid .capabilities-card h3 { margin: 0; } section.capabilities-section .capabilities-grid .capabilities-card p { font-weight: 400; font-size: 16px; line-height: 24px; color: #575757; margin: 0; } section.capabilities-section .capabilities-grid .capabilities-card a:not(.paper-meta-link) { background-color: var(--color-dark-gray); color: var(--color-white); margin-top: auto; } section.capabilities-section .capabilities-grid .capabilities-card a:not(.paper-meta-link):hover { background-color: var(--color-dark-green); color: var(--color-white); } section.capabilities-section .capabilities-grid .capabilities-card p a.paper-meta-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; } section.capabilities-section .capabilities-grid .capabilities-card p a.paper-meta-link:hover { border-bottom-style: solid; } footer.section-footer { padding: 52px 0px; } .footer-wrapper { display: flex; justify-content: space-between; } .footer-wrapper .footer-left a { width: fit-content; display: block; margin-bottom: 14px; } .footer-wrapper .footer-left img { width: 100%; max-width: 80px; } .footer-wrapper .footer-left span { font-weight: 600; font-size: 16px; line-height: 24px; color: var(--color-light-gray); } .footer-menu-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .footer-menu-wrapper ul { list-style: none; display: flex; flex-direction: column; gap: 14px; padding: 0; margin: 0; width: 236px; } .footer-menu-wrapper ul li a { font-weight: 400; font-size: 16px; line-height: 26px; color: var(--color-light-gray); transition: all 0.3s ease; } .footer-menu-wrapper ul li a:hover, .footer-bottom-wrapper a:hover { color: var(--color-white); text-decoration: underline; } .footer-bottom-wrapper { display: flex; justify-content: space-between; align-items: center; background-color: #ffffff0a; border-radius: 12px; padding: 16px; margin-top: 40px; } .footer-socials { display: flex; align-items: center; gap: 16px; } .footer-socials a, .footer-socials a img { height: 20px; width: 20px; transition: .3s; } .footer-socials a:nth-child(2), .footer-socials a:nth-child(2) img { height: 24px; width: 24px; } .footer-socials a:hover { transform: translateY(-3px); } .footer-bottom-wrapper p { font-weight: 400; font-size: 16px; line-height: 24px; color: var(--color-light-gray); margin: 0; transition: all 0.3s ease; } .nav-timing { font-family: 'Courier New', Courier, monospace; font-size: 11px; color: #ffffff40; margin-left: 10px; } .nav-timing:empty { display: none; } section.banner-section.bg-light { background: var(--color-light); } section.banner-section .product-banner-content-wrapper { width: 100%; max-width: 509px; } section.banner-section .pt-60 { padding-top: 60px; } section.banner-section .product-banner-content-wrapper h1, section.banner-section .product-banner-content-wrapper h2 { margin: 16px 0px; } section.banner-section .product-banner-content-wrapper h1, section.banner-section .product-banner-content-wrapper h2, section.banner-section .product-banner-content-wrapper p { color: #575757; } section.banner-section .product-banner-content-wrapper .section-description { margin-top: 32px; } section.banner-section .product-banner-image-wrapper img { width: 100%; max-width: 850px; margin: auto; left: 0; right: 0; bottom: 125px; } .inner-pages-arrow { position: absolute; bottom: 74px; } section.core-features-section, section.features-section { padding: 70px 0px; } section.core-features-section .core-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 120px; } section.core-features-section .core-feature-wrapper img, section.core-features-section .core-feature-wrapper .progressive-img-wrap { width: 100%; margin: 105px 0 120px 0; } section.core-features-section .core-feature-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 48px; } section.core-features-section .core-feature-box h3 { margin: 16px 0px; } section.features-section .features-head { display: flex; align-items: start; gap: 310px; } section.features-section .features-head-content { width: 100%; max-width: 610px; } section.features-section .features-row-flex { display: flex; gap: 24px; } section.features-section .features-small-col { padding: 15px 15px 45px 15px; border-radius: 24px; background-color: #F3F3F3; width: 100%; max-width: 436px; box-sizing: border-box; } section.features-section .features-small-col h3 { margin: 16px 0px 12px 0px; } section.features-section .features-small-col p { color: #575757; } section.features-section .features-small-col img, section.features-section .features-small-col .progressive-img-wrap { height: 220px; width: 100%; object-fit: cover; border-top-left-radius: 15px; border-top-right-radius: 15px; } section.features-section .features-large-col { width: 100%; max-width: 716px; position: relative; } section.features-section .features-large-col img, section.features-section .features-large-col .progressive-img-wrap { height: 100%; width: 100%; object-fit: cover; border-radius: 24px; box-sizing: border-box; } section.features-section .features-large-col p { font-weight: 300; color: #F3F3F3; } section.features-section .features-large-content { position: absolute; top: 32px; bottom: 32px; left: 32px; width: 100%; max-width: 318px; display: flex; flex-direction: column; justify-content: space-between; } .project-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; } .project-card-body { margin-top: 24px; } .project-card-body h3 { margin: 0 0 8px 0; } .project-card-body p { margin: 0 0 16px 0; } .thumb-card-list { display: flex; flex-direction: column; gap: 36px; max-width: 900px; margin: 0 auto; } .thumb-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "thumb title" "thumb authors" "thumb meta" "thumb desc" "thumb tags"; column-gap: 24px; row-gap: 8px; } .thumb-card-title-link { display: block; color: inherit; text-decoration: none; grid-area: title; } .thumb-card > .paper-authors, .thumb-card > .paper-meta, .thumb-card-desc { margin: 0 !important; } .thumb-card > .paper-authors { grid-area: authors; } .thumb-card-desc { grid-area: desc; } .thumb-card > .paper-meta { grid-area: meta; } .thumb-card > .category-pills { grid-area: tags; } .thumb-card-thumb { grid-area: thumb; display: block; width: 100px; align-self: center; } .thumb-card-thumb .progressive-img-wrap { height: 130px !important; padding-bottom: 0 !important; border-radius: 6px; } .thumb-card-thumb .progressive-img-blur, .thumb-card-thumb .progressive-img-real { object-position: top; } .thumb-card-thumb > img { display: block; width: 100%; height: 130px; object-fit: cover; object-position: top; border-radius: 6px; } .thumb-card-thumb.thumb-video > img { height: 90px; } .thumb-card-thumb.thumb-video { width: 160px; } .thumb-card-thumb.thumb-video .progressive-img-wrap { height: 90px !important; } .thumb-card-thumb.thumb-product { width: 130px; } .thumb-card-thumb.thumb-product .progressive-img-wrap { height: 130px !important; border-radius: 6px; overflow: hidden; } .thumb-card-thumb.thumb-product .progressive-img-blur, .thumb-card-thumb.thumb-product .progressive-img-real { object-fit: cover; object-position: center; } .thumb-card-title-link h3 { margin: 0; font-size: 20px; line-height: 1.3; } @media (max-width: 600px) { .thumb-card { grid-template-columns: 1fr; grid-template-areas: "title" "authors" "meta" "thumb" "desc" "tags"; row-gap: 12px; } .thumb-card-thumb, .thumb-card-thumb.thumb-video, .thumb-card-thumb.thumb-product { width: 50%; margin: 0 auto; } .thumb-card-thumb .progressive-img-wrap, .thumb-card-thumb.thumb-video .progressive-img-wrap, .thumb-card-thumb.thumb-product .progressive-img-wrap { height: 0 !important; padding-bottom: var(--pib, 56.25%) !important; } .thumb-card-thumb > img, .thumb-card-thumb.thumb-video > img, .thumb-card-thumb.thumb-product > img { height: auto; object-fit: contain; } .thumb-card-title-link { text-align: center; } .thumb-card-desc, .thumb-card > .paper-meta, .thumb-card > .paper-authors { text-align: left; } .category-pills.compact { justify-content: center; } } .paper-meta { font-size: 14px; color: var(--color-brown); text-transform: uppercase; letter-spacing: 0.05em; } .paper-meta-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; } .paper-meta-link:hover { border-bottom-style: solid; } .paper-summary { font-size: 15px; line-height: 1.5; margin: 0 0 8px 0 !important; } .paper-authors { font-size: 13px; line-height: 1.5; opacity: 0.7; margin-bottom: 0 !important; } section.banner-section .banner-content-wrapper h1.mw-780 { max-width: 780px; } section.videos-section { padding-bottom: 230px; } section.banner-section .banner-content-wrapper h1.mw-740 { max-width: 740px; } .contact-banner.banner-section.bg-light { height: 735px; } .contact-page section.banner-section .banner-content-wrapper h1.contact-hero-heading { max-width: 800px; } .contact-page section.banner-section .banner-image-wrapper img { max-width: 538px; } .contact-page .inner-pages-arrow { bottom: 50px; } section.contact-section { padding: 72px 0px; } section.contact-section .contact-copy { margin-bottom: 48px; } section.contact-section .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 548px); gap: 80px; align-items: start; } section.contact-section .contact-copy .section-heading { max-width: 548px; margin-left: 0; margin-right: 0; } section.contact-section .contact-detail-list { width: 100%; max-width: 548px; margin-top: 90px; } section.contact-section .contact-detail { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px 0; } section.contact-section .contact-detail+.contact-detail { border-top: 1px solid #ffffff1f; } section.contact-section .contact-detail:first-child { padding-top: 0; } section.contact-section .contact-detail-icon { width: 48px; height: 48px; border-radius: 50%; background-color: #ffffff12; color: var(--color-brown); display: flex; align-items: center; justify-content: center; } section.contact-section .contact-detail-icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } section.contact-section .contact-detail-label, section.contact-section .contact-form label { font-weight: 600; font-size: 12px; line-height: auto; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-light-gray); display: block; } section.contact-section .contact-detail a, section.contact-section .contact-detail-text { font-weight: 300; font-size: 16px; line-height: 24px; color: var(--color-light); overflow-wrap: anywhere; } section.contact-section .contact-detail a { transition: color 0.3s ease; } section.contact-section .contact-detail a:hover { color: var(--color-white); text-decoration: underline; } section.contact-section .contact-form { background-color: #2C3639; border-radius: 16px; padding: 40px; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; } section.contact-section .form-field { display: flex; flex-direction: column; gap: 8px; } section.contact-section .hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } section.contact-section .form-error { color: var(--color-brown); font-size: 14px; line-height: 20px; margin: 0; } section.contact-section .contact-form input, section.contact-section .contact-form textarea { width: 100%; border: 1px solid #ffffff30; border-radius: 8px; background-color: #ffffff0f; color: #BEBEBE; font-family: var(--font-family); font-weight: 400; font-size: 14px; line-height: 22px; padding: 13px 15px; box-sizing: border-box; outline: none; transition: border-color 0.3s ease, background-color 0.3s ease; height: 48px; } section.contact-section .contact-form textarea { min-height: 120px; resize: vertical; } section.contact-section .contact-form input::placeholder, section.contact-section .contact-form textarea::placeholder { color: #8A8D8E; } section.contact-section .contact-form input:focus, section.contact-section .contact-form textarea:focus { border-color: var(--color-brown); background-color: #ffffff14; } section.contact-section .contact-submit { width: 100%; border: 0; cursor: pointer; margin-top: 0; font-family: var(--font-family); } section.contact-section .contact-submit span { color: var(--color-brown); margin-left: 8px; } button.primary-cta.contact-submit { align-items: center; display: flex; justify-content: center; gap: 9px; } button.primary-cta.contact-submit img { position: relative; bottom: 2px; } section.capabilities-section .capabilities-grid-wrapper .capabilities-card { padding: 16px; } section.recognised-section { padding-top: 0px; } section.recognised-section .features-head { gap: 280px; } section.recognised-section .features-head-content { max-width: 100%; } section.recognised-section .recognised-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } section.recognised-section .recognised-matrix .recognised-matrix-box { display: flex; flex-direction: column; gap: 32px; } section.recognised-section .recognised-matrix .recognised-matrix-box img { height: 52px; width: 52px; } section.recognised-section .recognised-matrix .recognised-matrix-box h3 { color: #2C3639; } section.recognised-section .recognised-matrix .recognised-matrix-box p { font-weight: 400; font-size: 20px; line-height: 121%; color: #2C3639; margin: 0; } section.product-section .videos-grid { row-gap: 50px; } .experience-section { padding: 64px 0px; } .experience-section .writer-name, .writer-name { font-size: 16px; line-height: 24px; color: var(--color-brown); margin-top: 8px; } .writer-name a { color: inherit; text-decoration: none; } a.quote-link { color: inherit; text-decoration: none; display: inline; } .bg-brown .writer-name { color: var(--color-dark-green); } .curriculum-section { padding-top: 80px; padding-bottom: 150px; color: #D9D9D9; } .curriculum-grid { margin-top: 60px; } .curriculum-section .info-box-ciriculum { border-radius: 20px; box-shadow: 0px 5px 15px 0px #142828; padding: 30px 30px 45px 30px; text-align: left; flex: 1 1 0; min-width: 0; } .curriculum-section .container { max-width: 1144px; width: 100%; } .curriculum-grid { display: flex; flex-direction: column; gap: 28px; } .curriculum-section .curriculum-text-info { font-size: 16px; font-weight: 200; line-height: 24px; margin-top: 10px; letter-spacing: -2%; color: #DCD7C9; text-align: justify; } .curriculum-section .curriculum-text-info p { margin: 0 0 10px 0; } .curriculum-section .curriculum-text-info p:last-child { margin-bottom: 0; } .curriculum-section .curriculum-text-info a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(220, 215, 201, 0.5); } .curriculum-section .curriculum-text-info a:hover { border-bottom-style: solid; } .curriculum-section .curriculum-text-info ul { margin: 0 0 10px 0; padding-left: 20px; } .curriculum-section .curriculum-text-info ul:last-child { margin-bottom: 0; } .curriculum-section .curriculum-text-info li { margin-bottom: 4px; } .curriculum-section .curriculum-text-info li:last-child { margin-bottom: 0; } .curriculum-section .curriculum-text-desgination { font-size: 20px; font-weight: 200; line-height: 28px; letter-spacing: -2%; ; margin-top: 5px; margin-bottom: 5px; color: #DCD7C9; } .curriculum-section .curriculum-text-header { font-size: 24px; line-height: 40px; font-weight: 500; letter-spacing: -2%; ; } .curriculum-org-header { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; } a.curriculum-org-header:hover .curriculum-text-header { text-decoration: underline; } .curriculum-org-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; } .category-pill { border: 0.5px solid #D9D9D9; border-radius: 30px; padding: 9px 12px; color: inherit; text-decoration: none; transition: background-color 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1 1 auto; min-width: 133px; max-width: 148px; box-sizing: border-box; } a.category-pill:hover { background-color: rgba(217, 217, 217, 0.15); } .category-pill-text { font-size: 12px; font-weight: 500; line-height: 100%; margin: auto; color: #DCD7C9; } .category-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 90%; margin: 40px auto 0px auto; } .category-pill-icon { display: flex; justify-content: center; align-items: center; } .category-pills.compact { width: auto; justify-content: flex-start; margin: 0; gap: 6px; } .category-pills.compact .category-pill { flex: 0 0 auto; min-width: 0; max-width: none; padding: 5px 10px; } .category-pills.compact .category-pill-text { font-size: 11px; } .category-pills.compact .category-pill-icon img { max-width: 14px; } .curriculum-section .timeline-wrapper { display: flex; flex-direction: row; width: 100%; gap: 50px; } .curriculum-section .timeline-column { position: relative; width: 80px; flex-shrink: 0; display: flex; justify-content: center; top: 120px; } .curriculum-section .timeline-column::before { content: ''; position: absolute; top: 0; bottom: -28px; left: 50%; transform: translateX(-50%); width: 1px; background-color: #DCD7C9; z-index: 1; } .curriculum-section .timeline-wrapper:last-child .timeline-column::before { bottom: auto; height: 80px; } .curriculum-section .timeline-year { font-weight: 300; position: relative; top: 40px; color: #DCD7C9; background: #3F4E4F; font-size: 13px; letter-spacing: 4px; transform: rotate(-90deg); height: fit-content; white-space: nowrap; z-index: 2; font-size: 16px; line-height: 20px; letter-spacing: 50%; padding: 0px 60px; } .curriculum-section .section-head span { padding-left: 12.5%; color: #DCD7C9; } .recognised-section.pt-70 { padding-top: 70px; } .mobile-only { display: none; } .desktop-only { display: block; } @media (max-width: 768px) { .features-head { flex-direction: column; gap: 22px; } section.recognised-section .features-head { gap: 22px; } section.recognised-section .recognised-matrix .recognised-matrix-box p { font-size: 9.94px; line-height: 121%; } section.recognised-section .recognised-matrix .recognised-matrix-box h3 { font-size: 22px; } section.recognised-section .recognised-matrix .recognised-matrix-box { gap: 15px; } .section-heading.font-22px { font-size: 22px; line-height: 27.8px; letter-spacing: -2%; } section.recognised-section .recognised-matrix .recognised-matrix-box img { max-height: 25px; max-width: 25px; } section.recognised-section span.section-subheading.text-light { text-align: center; margin-bottom: 0px; margin: auto; } .curriculum-section .timeline-wrapper { gap: 14px; } .curriculum-section .timeline-column { width: 20px; } .curriculum-section .info-box-ciriculum { padding: 24px 17px 17px 20px; } .curriculum-section .curriculum-text-info { font-size: 14px; line-height: 20px; } .curriculum-section .curriculum-text-desgination { font-size: 15px; line-height: 22px; } .span.curriculum-text-header { font-size: 17px; } .curriculum-section .curriculum-text-header { font-size: 17px; line-height: 24px; } .curriculum-section .category-pill-text { font-size: 10px; } .curriculum-section .category-pill-icon img { max-width: 15px; object-fit: contain; } .curriculum-section .category-pill { border: 0.5px solid #D9D9D9; border-radius: 30px; padding: 5.5px 9px; display: flex; gap: 4px; box-sizing: border-box; flex: unset; max-width: none; min-width: 80px; } .curriculum-section .category-pills { width: 100%; gap: 4.5px; row-gap: 12px; } .curriculum-section .timeline-year { font-size: 10px; line-height: 12px; padding: 0px 28px; } section.core-features-section.products-page .core-feature-grid { grid-template-columns: auto; } section.core-features-section.products-page .core-feature-wrapper img, section.core-features-section.products-page .core-feature-wrapper .progressive-img-wrap { width: 100%; margin: 50px 0 50px 0; } section.core-features-section.products-page .core-feature-grid { gap: 20px; } section.core-features-section.products-page.mobile-padding { padding-bottom: 120px; } .products-page .mobile-none { display: none; } .products-page .features-head.mb-120.mobile-none { display: none; } section.features-section.products-page .features-row-flex { flex-direction: column; position: relative; bottom: 100px; } section.features-section.products-page .features-large-col { min-height: 400px; } section.features-section.products-page .features-large-col img, section.features-section.products-page .features-large-col .progressive-img-wrap { min-height: 400px; } section.features-section.products-page .section-heading.font-22px { font-size: 22px; } .products-page .section-description { font-size: 11px; line-height: 16px; } .products-page h3.heading-h3.text-white { font-size: 11px; line-height: 16px; } section.core-features-section.products-page .core-feature-box h3 { margin: 8px 0px; } .products-page .section-subheading { margin-bottom: 0px; } .products-page .inner-pages-arrow { display: none; } section.banner-section.products-page .banner-image-wrapper img { position: unset; margin-left: unset; margin-right: unset; display: block; margin-top: 20px; width: 100%; margin-bottom: 20px; max-width: 100%; } .banner-image-wrapper.product-banner-image-wrapper { height: auto; display: flex; justify-content: center; align-items: center; max-width: unset; } section#capabilities { padding-right: 0px; padding-left: 0px; } .curriculum-section .info-box-ciriculum { border-radius: 8px; box-shadow: 0px 1.79px 5.38px 0px #142828; } .videos-grid { padding-right: 10px; padding-left: 10px; } .videos-grid.pl-45px { padding-left: 0px; padding-right: 0px; } .pl-45px img { padding-right: 20px; padding-left: 20px; box-sizing: border-box; } .recognised-section.features-section.mobile-none { display: none; } section.core-features-section.products-page.mobile-padding { padding-right: 40px; padding-left: 40px; padding-top: 34px; } section.core-features-section.products-page .core-feature-wrapper img, section.core-features-section.products-page .core-feature-wrapper .progressive-img-wrap { margin-bottom: 50px 0 30px 0; } .products-page .small-font .section-description.my-0 { font-size: 16px; line-height: 24px; } .products-page .small-font h3.heading-h3.text-white { font-size: 24px; line-height: 32px; } section.banner-section.bg-light.products-page { padding-bottom: 30px; } section.capabilities-section.small-font .capabilities-grid .capabilities-card p { font-size: 10px; line-height: 15px; } p.writer-name.mb-0 { font-size: 8px; } .curriculum-section { padding-top: 52px; padding-bottom: 60px; } .curriculum-grid { margin-top: 28px; } .recognised-section.pt-70 { padding-top: 32px; } section#capabilities p { font-size: 10px; line-height: 15px; } section#capabilities .capabilities-grid .capabilities-card { padding: 10px 10px 25px 10px; } section#capabilities .capabilities-grid .capabilities-card { gap: 20px; } .inner-pages-arrow { top: auto; bottom: auto; } section#capabilities { padding: 77px 0px 140px 0px; } .experience-section { padding: 50px 0px } section.product-section .product-grid { box-sizing: border-box; } section.banner-section .banner-image-wrapper img { margin-top: -31px; } section.banner-section .banner-image-wrapper.home-banner img { margin-top: -50px; } section.contact-section { padding: 56px 0px 64px 0px; } section.contact-section .contact-grid { grid-template-columns: 1fr; gap: 44px; } section.contact-section .contact-copy .section-heading { max-width: 100%; } section.contact-section .contact-detail-list { max-width: 100%; margin-top: 40px; } section.contact-section .contact-form { padding: 24px; border-radius: 8px; gap: 18px; } section.contact-section .contact-form textarea { min-height: 112px; } .banner-image-wrapper.mobile-only.banner-videos img { margin-top: -58px; max-width: 90%; } .banner-image-wrapper.mobile-only.headshot-mobile img { max-width: 100%; } section.core-features-section.products-page.products-page .core-feature-wrapper img, section.core-features-section.products-page.products-page .core-feature-wrapper .progressive-img-wrap { margin: 30px 0 30px 0; } section.features-section .features-small-col { max-width: unset; } .products-page .heading-h3 { font-size: 24px; line-height: 32px; } section#capabilities .capabilities-card h3 { font-size: 15px; line-height: 20px; text-align: center; } section#capabilities .capabilities-card img { width: 24px; height: 24px; } .curriculum-section .category-pills { margin: 15px auto 0px auto; } section#curriculum-value .container { padding-left: 7px; } .features-row> :nth-child(1)> :nth-child(1) { order: 1; } .features-row> :nth-child(1)> :nth-child(2) { order: 2; } .features-row> :nth-child(2)> :nth-child(2) { order: 3; } .features-row> :nth-child(2)> :nth-child(1) { order: 4; } section#core-features p.section-description.text-light-gray.my-0 { font-size: 10px; line-height: 14px; } section#core-features .section-description.text-light-gray { font-size: 11px; line-height: 16px; } section.banner-section.products-page .banner-content-wrapper h1 { line-height: 38px; font-size: 32px; margin-bottom: 9.35px; } section#core-features .core-feature-card-grid { column-gap: 11px; row-gap: 24px; } section#core-features .container { padding-left: 23px; padding-right: 23px; } section#videos .product-grid.videos-grid { row-gap: 28px; } section#videos .mb-140 { margin-bottom: 65px; } section.videos-section { padding-bottom: 140px; } section#systems .product-grid.videos-grid.pl-45px { row-gap: 28px; } section.contact-section .contact-form label { font-weight: 400; font-size: 10px; line-height: 15px; } .contact-detail a { font-size: 13px; } .contact-banner.banner-section.bg-light { height: unset; } .contact-page .inner-pages-arrow { top: auto; bottom: auto; } } @media (max-width: 767px) { .section-subheading { font-size: 9.51px; line-height: 13.6px; } .section-heading { font-size: 29.2px; line-height: 34.5px; } .primary-cta { font-size: 10.87px; line-height: 16.3px; padding: 11px 19px; } .heading-h3 { font-size: 20.27px; line-height: 27px; } .header-section .mobile-menu-wrapper { width: 84%; } section.banner-section .banner-content-wrapper { padding-top: 6px; } section.banner-section .banner-content-wrapper h1 { font-size: 28px; line-height: 34px; margin: 0px 0px 15px 0px; } section.banner-section .banner-content-wrapper a img { height: 30px; width: 30px; } section.banner-section .section-subheading { font-size: 8.18px; line-height: 10.6px; } .products-page .section-subheading { margin-bottom: 9.35px; } section.banner-section.bg-light.products-page .section-description { font-size: 10px; line-height: 14px; } section.banner-section .banner-image-wrapper img { max-width: 86%; } section.capabilities-section { padding: 80px 24px 126px 24px; } section.product-section .product-grid { grid-template-columns: repeat(1, 1fr); row-gap: 34px; } section.capabilities-section .capabilities-grid { grid-template-columns: repeat(1, 1fr); gap: 15px; } section.capabilities-section .capabilities-grid .capabilities-card { gap: 27px; } section.capabilities-section .capabilities-grid .capabilities-card img { height: 32px; width: 32px; } section.capabilities-section .capabilities-grid .capabilities-card p { font-size: 13.52px; line-height: 20.3px; } section.capabilities-section .capabilities-grid .capabilities-card a:not(.paper-meta-link) { font-size: 13.52px; font-weight: 500; line-height: 20.3px; padding: 14px 19px; } .mb-15-mob { margin-bottom: 15px; } .mb-45-mob { margin-bottom: 45px; } .mb-60-mob { margin-bottom: 60px; } .banner-content-wrapper.font-29#home h1 { font-size: 29.2px; line-height: 34.5px; } } @media (min-width: 560px) and (max-width: 767px) { .header-section .mobile-menu-wrapper { width: 89%; } } @media (max-width: 991px) { body.menu-open { overflow: hidden; } .container { padding-left: 25px; padding-right: 25px; } .header-section { padding: 44px 12px 16px 0px; } .header-section .logo img { max-width: 74px; } .header-section .header-menu-wrapper { display: none; } .header-section .mobile-header { display: block; } .header-section .mobile-header button { appearance: none; background: transparent; border: 0; cursor: pointer; line-height: 0; padding: 0; } .header-section .mobile-header .mobile-menu-toggle img { height: 20px; width: 20px; } .header-section .mobile-header .mobile-menu-close { margin-left: auto; display: block; position: sticky; top: 0; z-index: 9; } .header-section .mobile-header .mobile-menu-close img { height: 18px; width: 18px; } .mobile-menu-wrapper { position: fixed; top: 0; left: 0; width: 91%; height: 85vh; background-color: var(--color-dark-gray); z-index: 9999; transform: translateX(-101%); transition: transform 0.4s ease; will-change: transform; overflow-y: auto; padding: 70px 25px 70px 25px; } .mobile-menu-wrapper.active { transform: translateX(0); } .header-section .mobile-menu-wrapper ul { list-style: none; padding: 0; width: fit-content; margin: 105px auto 66px auto; padding-left: 40px; display: flex; flex-direction: column; gap: 32px; } .header-section .mobile-menu-wrapper ul li a { font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: 0.05em; color: var(--color-light); } .header-section .mobile-menu-logo { margin-left: -10px; } .header-section .mobile-menu-logo img { width: 100%; max-width: 82px; display: block; margin: auto; } .header-section .mobile-menu-logo span { font-weight: 400; font-size: 5.75038px; line-height: 8px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-white); } section.banner-section { height: auto; background: var(--color-light); } section.banner-section .banner-content-wrapper h1 { max-width: 100%; } section.banner-section .banner-content-wrapper h1.mw-740, section.banner-section .banner-content-wrapper h1.mw-775, section.banner-section .banner-content-wrapper h1.mw-780 { max-width: 100%; } section.banner-section .banner-image-wrapper img { position: unset; margin-left: auto; margin-right: -25px; display: block; } section.contact-section .contact-grid { grid-template-columns: 1fr; gap: 44px; } section.contact-section .contact-copy .section-heading, section.contact-section .contact-detail-list { max-width: 100%; } section.contact-section .contact-detail-list { margin-top: 48px; } section.product-section .product-grid img, section.product-section .product-grid .progressive-img-wrap { height: 100%; } footer.section-footer { padding-bottom: 80px; } .footer-menu-wrapper, .footer-wrapper .footer-left span { display: none; } .footer-wrapper { justify-content: center; } .footer-bottom-wrapper { flex-direction: column-reverse; gap: 35px; background-color: transparent; border-radius: 0; padding: 0; margin-top: 30px; } .footer-bottom-wrapper p { font-size: 9px; } .footer-wrapper .footer-left a { margin-bottom: 0px; } .mobile-only { display: block; } .desktop-only { display: none; } } @media (min-width: 992px) and (max-width: 1199px) { .header-section .header-menu-wrapper nav ul li a { padding: 12px 12px; } section.banner-section .banner-content-wrapper h1 { font-size: 45px; line-height: 55px; max-width: 550px } section.banner-section .banner-image-wrapper img { max-width: 550px; } section.product-section .product-grid img, section.product-section .product-grid .progressive-img-wrap { height: auto; aspect-ratio: 1; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .capabilities-grid.capabilities-grid-wrapper.small-font { flex-direction: column; display: flex; } .banner-image-wrapper.mobile-only { display: none; } .banner-image-wrapper.desktop-only { display: block; } .banner-image-wrapper.product-banner-image-wrapper { height: auto; } a.inner-pages-arrow.desktop-only { display: block; } a.inner-pages-arrow.mobile-only { display: none; } section.features-section.recognised-section.bg-brown.pt-70 .features-head { flex-direction: column; gap: 20px; } .curriculum-section .section-head span { padding-left: 15%; } section.features-section.bg-brown.products-page .features-head { flex-direction: column; gap: 20px; } section.features-section.recognised-section.bg-brown.mobile-none .features-head { flex-direction: column; gap: 20px; } } .error-page .primary-cta { background-color: #FFFFFF40; } .error-page .primary-cta:hover { background-color: var(--color-dark-green); color: var(--color-white); } .post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .post-card { display: flex; flex-direction: column; border-radius: 12px; background-color: #F3F3F3; overflow: hidden; transition: transform 0.3s ease; } .post-card:hover { transform: translateY(-4px); } .post-card-cover { width: 100%; height: 220px; object-fit: cover; display: block; } .post-card-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; } .post-card-body p { font-weight: 400; font-size: 16px; line-height: 24px; margin: 0; } .post-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .post-date { font-size: 13px; color: var(--color-brown); letter-spacing: 0.05em; text-transform: uppercase; } .post-tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { font-size: 12px; padding: 4px 12px; border-radius: 100px; background-color: var(--color-dark-gray); color: var(--color-white); } .post-article { max-width: 760px; margin: 0 auto; } .post-hero { width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; margin-bottom: 32px; } .post-header { margin-bottom: 32px; } .post-header h1 { margin-top: 12px; } .post-body { font-weight: 400; font-size: 16px; line-height: 28px; color: var(--color-dark-gray); } .post-body h2, .post-body h3 { color: var(--color-dark-green); margin-top: 40px; margin-bottom: 16px; } .post-body p { margin-bottom: 20px; } .post-body a { color: var(--color-brown); text-decoration: underline; } .post-body code { background-color: #F3F3F3; padding: 2px 6px; border-radius: 4px; font-size: 14px; } .post-body pre { background-color: var(--color-dark-green); color: var(--color-white); padding: 20px; border-radius: 8px; overflow-x: auto; } .post-body pre code { background: none; padding: 0; } .post-article .primary-cta { margin-top: 40px; display: inline-block; } @media (max-width: 767px) { .post-grid { grid-template-columns: 1fr; } } .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .gallery-tile { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: block; position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 8px; } .gallery-tile-blur { position: absolute; inset: 0; } .gallery-tile-blur-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s ease; filter: blur(10px); transform: scale(1.08); } .gallery-tile-blur-img.loaded { opacity: 1; } .gallery-tile-img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.35s ease, transform 0.3s ease; } .gallery-tile-img.loaded { opacity: 1; } .gallery-tile:hover .gallery-tile-img, .gallery-tile:focus-visible .gallery-tile-img { transform: scale(1.05); } @media (max-width: 991px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; } } .gallery-lightbox { display: none; position: fixed; inset: 0; background-color: rgba(20, 40, 40, 0.95); z-index: 1000; align-items: center; justify-content: center; } .gallery-lightbox.active { display: flex; } body.lightbox-open { overflow: hidden; } .gallery-lightbox figure { margin: 0; max-width: min(90vw, 1100px); max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 16px; } .gallery-lightbox-image-wrap { position: relative; display: inline-flex; max-width: 100%; max-height: 78vh; overflow: hidden; border-radius: 8px; transition: width 0.25s ease, height 0.25s ease; } .gallery-lightbox-blur { position: absolute; inset: 0; border-radius: 8px; z-index: 0; } .gallery-lightbox-blur-img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s ease; filter: blur(16px); transform: scale(1.08); } .gallery-lightbox-blur-img.loaded { opacity: 1; } .gallery-lightbox-image { position: relative; z-index: 2; max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 8px; opacity: 0; transition: opacity 0.35s ease; } .gallery-lightbox-image.loaded { opacity: 1; } .gallery-lightbox-caption { color: #DCD7C9; font-size: 16px; line-height: 24px; text-align: center; } .gallery-lightbox-close, .gallery-lightbox-prev, .gallery-lightbox-next { appearance: none; border: 0; background-color: #FFFFFF40; color: #FFFFFF; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.3s ease; position: fixed; } .gallery-lightbox-close:hover, .gallery-lightbox-prev:hover, .gallery-lightbox-next:hover { background-color: #F0F0F0; color: #142828; } .gallery-lightbox-close svg, .gallery-lightbox-prev svg, .gallery-lightbox-next svg { width: 22px; height: 22px; } .gallery-lightbox-close { top: 28px; right: 28px; } .gallery-lightbox-prev { left: 28px; top: 50%; transform: translateY(-50%); } .gallery-lightbox-next { right: 28px; top: 50%; transform: translateY(-50%); } @media (max-width: 767px) { .gallery-lightbox-close, .gallery-lightbox-prev, .gallery-lightbox-next { width: 40px; height: 40px; } .gallery-lightbox-close { top: 16px; right: 16px; } .gallery-lightbox-prev { left: 8px; } .gallery-lightbox-next { right: 8px; } } .progressive-img-wrap { position: relative; display: block; overflow: hidden; height: 0 !important; padding-bottom: var(--pib, 56.25%); } .progressive-img-blur, .progressive-img-real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; } .progressive-img-blur { filter: blur(10px); transform: scale(1.08); } .progressive-img-blur.loaded, .progressive-img-real.loaded { opacity: 1; }