* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Geist", sans-serif; } :root { --transparent: rgba(255, 255, 255, 0); --green-1: #F6FFF8; --green-2: #C3E2CA; --green-3: #93CBA1; --green-4: #61B375; --green-5: #319D4B; --green-6: #048724; --green-7: #03731F; --green-8: #03601A; --green-9: #024D15; --green-10: #023D10; --red-1: #FBE8E8; --red-2: #F4C9C9; --red-3: #EC9D9D; --red-4: #E37070; --red-5: #DA4545; --red-6: #D21C1C; --red-7: #B31818; --red-8: #951414; --red-9: #781010; --red-10: #5E0D0D; --neutral-0: #FFFFFF; --neutral-1: #ECEDEE; --neutral-2: #D2D4D6; --neutral-3: #AFB2B6; ---text--teritiary: #8A8F95; --neutral-5: #666D74; --neutral-6: #454D56; ---text--secondary: #3B4149; --neutral-8: #31373D; ---text--primary: #272C31; --neutral-10: #1F2327; --secondary-1: #E9F4ED; --secondary-2: #CAE5D3; --secondary-3: #A0D1AF; --secondary-4: #74BB8A; --secondary-5: #4AA667; --secondary-6: #229346; --secondary-7: #1D7D3C; --secondary-8: #186832; --secondary-9: #135428; --secondary-10: #0F421F; --primary-1: #E6E9EF; --primary-2: #C2CAD8; --primary-3: #91A0B9; --primary-4: #5E7498; --primary-5: #2E4B79; --primary-6: #00235C; --primary-7: #001E4E; --primary-8: #001941; --primary-9: #001434; --primary-10: #001029; /* Text-size styles */ /* base size: label---label-2-regular (16px) */ /* Text-size styles */ --label-1-regular: 18px; --label-2-regular: 16px; --label-3-regular: 15px; --label-4-regular: 14px; --label-5-regular: 12px; --body-1-regular: 16px; --body-2-regular: 14px; --body-3-regular: 13px; --body-0-regular: 20px; --tiny-medium: 10px; --heading-h6-regular: 18px; --heading-h5-regular: 22px; --heading-h4-regular: 28px; --heading-h3-regular: 36px; --heading-h2-regular: 44px; --heading-h1-regular: 56px; --button--font: 18px; /* Effect styles */ --shadow--sm: 0px 1px 2px rgba(0, 0, 0, 0.05); --shadow: 0px 0px 3px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.1); --shadow--md: 0px 0px 6px rgba(0, 0, 0, 0.1); --shadow--lg: 0px 0px 15px rgba(0, 0, 0, 0.1), 0px 0px 6px rgba(0, 0, 0, 0.1); --shadow--xl: 0px 20px 25px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1); --shadow-2xl: 0px 25px 50px rgba(0, 0, 0, 0.25); } .section-gap-1 { padding: 40px 0; } .section-gap-2 { padding-bottom: 80px; } @media (max-width:576px) { :root { --label-1-regular: 18px; --label-2-regular: 16px; --label-3-regular: 15px; --label-4-regular: 14px; --label-5-regular: 12px; --body-1-regular: 16px; --body-2-regular: 14px; --body-3-regular: 13px; --body-0-regular: 20px; --tiny-medium: 10px; --heading-h6-regular: 16px; --heading-h5-regular: 18px; --heading-h4-regular: 20px; --heading-h3-regular: 24px; --heading-h2-regular: 28px; --heading-h1-regular: 32px; --button--font: 16px; } .section-gap-1 { padding: 30px 0; } .section-gap-2 { padding-bottom: 40px; } } h1, .h1 { font-size: var(--heading-h1-regular); } h2, .h2 { font-size: var(--heading-h2-regular); } h3, .h3 { font-size: var(--heading-h3-regular); } h4, .h4 { font-size: var(--heading-h4-regular); } h5, .h5 { font-size: var(--heading-h5-regular); } h6, .h6 { font-size: var(--heading-h6-regular); } .primary-text { color: var(---text--primary); } .secondary-text { color: var(---text--secondary); } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fs-14 { font-size: 14px; } .primary-button { line-height: 1; text-decoration: none; display: inline-flex; border: none; cursor: pointer; align-items: center; gap: 0.75rem; background-color: var(--secondary-7); color: #fff; border-radius: 10rem; font-weight: 600; padding: 1rem 1.5rem; padding-left: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color 0.3s; font-size: 18px; } .cta-btn-lets-talk .primary-button { font-size: 15px; padding: .8rem 1rem; } .button__icon-wrapper { flex-shrink: 0; width: 25px; height: 25px; position: relative; color: var(--secondary-7); background-color: #fff; border-radius: 50%; display: grid; place-items: center; overflow: hidden; } .primary-button:hover { background-color: var(--secondary-6); } .primary-button:active { background-color: var(--secondary-7); } .button__icon-svg--copy { position: absolute; transform: translate(-150%, 150%); } .primary-button:hover .button__icon-svg:first-child { transition: transform 0.3s ease-in-out; transform: translate(150%, -150%); } .primary-button:hover .button__icon-svg--copy { transition: transform 0.3s ease-in-out 0.1s; transform: translate(0); } .gradient-effect { font-weight: 600; max-width: 800px; margin: auto; text-align: center; background: linear-gradient(105deg, #054BBD 7.02%, #1D7D3C 82.21%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .non-gradient-effect { font-weight: 600; max-width: 800px; margin: auto; color: white; text-align: center; } .color-white { color: white; } .title-caption { background-color: var(--secondary-1); border: 0.5px solid var(--secondary-7); text-transform: uppercase; color: var(--secondary-8); width: max-content; margin: auto; padding: 6px 8px; border-radius: 2px; margin-bottom: 8px; font-size: 14px; font-weight: 500; } .testimonial { box-shadow: var(--shadow--md); padding: 24px; /* margin: 12px; */ border-radius: 8px; height: 100%; display: flex; flex-direction: column; justify-content: center; } .testimonial-content { font-size: var(--label-2-regular); color: var(---text--secondary); margin: 24px 0; } .desc-type-1 { color: var(---text--secondary); font-size: var(--label-2-regular); } .title-type-1 { font-size: var(--label-1-regular); font-weight: 600; color: var(---text--primary); } .arrow-custom-setup { display: flex; align-items: center; justify-content: center; } .promotion-bar { background-image: url("../../assets/img/background-images/promotion-bg.webp"); background-size: cover; background-position: bottom center; background-repeat: no-repeat; padding: 100px 150px; border-radius: 16px; } .promotion-bar .h2 { font-weight: 600; text-align: center; color: white; } .promotion-content { text-align: center; font-size: var(--label-2-regular); color: var(--neutral-0); } .why-trust-card { display: flex; align-items: flex-start; gap: 24px; padding: 24px; background-color: white; border-radius: 8px; height: 100%; } .why-trust-card .title-type-1 { margin-bottom: 8px; } .why-trust-section { background-image: url("../../assets/img/background-images/why-trust.webp"); background-position: center center; background-repeat: no-repeat; background-size: cover; } .carousel-heading-2 { text-align: left; margin: unset; width: max-content; padding-left: 12px; } .carousel-arrow-type-2 { position: absolute; top: 12px; right: 12px; } .carousel-card-2 { height: 100%; } .carousel-card-2 a { text-decoration: unset; } .carousel-card-2 .title-type-1 { margin: 12px 0 8px 0; } .carousel-card-2 .desc-type-1 { margin-bottom: 12px; } .hoverImageWrapper3 { position: relative; overflow: hidden; width: 100%; height: auto; border-radius: 10px; display: flex; } .hoverImage3 { position: relative; align-self: stretch; height: auto; flex-shrink: 0; object-fit: cover; border-radius: 10px; max-width: 100%; transition: transform 0.3s ease-in-out; } .carousel-card-2:hover .hoverImage3, .blog-card-html:hover .hoverImage3, .img-hover:hover .hoverImage3 { transform: scale(1.05); } .blog-card-html .hoverImageWrapper3 { border-radius: 4px !important; } .menu__link { color: var(--primary-7); line-height: 2; position: relative; padding-right: 4px; text-decoration: unset; } .menu__link:hover { text-decoration: underline; } .menu__link::before { content: ''; width: 8px; height: 8px; border-top: solid 2px var(--primary-5); border-right: solid 2px var(--primary-5); border-radius: 2px; position: absolute; top: 55%; left: 100%; transform: translateY(-50%) rotate(45deg); transition: transform .4s; } .menu__link:hover::before { transform: translateX(4px) translateY(-50%) rotate(45deg); } .faq-illustration-box { background-color: var(--primary-1); padding: 24px; border-radius: 8px; position: relative; } .faq-illustraion-img { position: absolute; right: 15%; bottom: 24px; } .faq-illustration-box .h5 { max-width: 260px; line-height: 32px; margin-bottom: 24px; font-weight: 600; } .faq-illustration-box a { font-size: var(--label-1-regular); font-weight: 600; color: var(--primary-6); } .key-challenge-card { position: relative; padding: 32px; border-radius: 12px; overflow: hidden; /* Needed for pseudo-element clipping */ } .key-challenge-card>* { position: relative; z-index: 2; } .key-challenge-card::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(0); transition: backdrop-filter 0.2s ease; z-index: 1; /* Keep it behind content */ } /* Apply blur on hover */ .key-challenge-card:hover::after { backdrop-filter: blur(12.5px); } .key-challenge-card p { opacity: 0; color: white; transition: 0.2s; margin-top: 12px; } .key-challenge-card:hover p { opacity: 1; transition: 0.2s; } .retail-challenge-bg-1 { background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 55.77%), center / cover no-repeat url("../../assets/img/challenges-we-solve/disconnected-data-ecosystems.webp"); } .retail-challenge-bg-2 { background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 55.77%), center / cover no-repeat url("../../assets/img/challenges-we-solve/inaccurate-demand-forecasting.webp"); } .collapse-card { padding: 24px; box-shadow: var(--shadow--md); } .acc-cap { padding: 24px; box-shadow: var(--shadow--md); border-radius: 8px; height: 100%; } /* Container transition */ .capabilities-main-div { transition: transform 0.5s ease, opacity 0.5s ease; opacity: 1; } /* Animate in from left */ .capability-slide-in { transform: translateX(-100%); opacity: 0; animation: slideInLeft 0.5s forwards; } /* Animate out to right */ .capability-slide-out { animation: slideOutRight 0.5s forwards; } @keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } .blog-pill { color: var(---text--secondary); font-size: var(--label-5-regular); font-weight: 500; padding: 2px 8px; background-color: var(--neutral-1); width: max-content; border-radius: 99px; } .blog-read { color: var(---text--secondary); font-weight: 500; font-size: var(--label-5-regular); display: flex; align-items: center; } .blog-read img { padding-right: 4px; padding-left: 12px; } .events img { padding-right: 4px; padding-left: 0; width: 28px; } .blog-card-top { display: flex; align-items: center; } .excerpt4 { display: -webkit-box; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .excerpt2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .excerpt3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .blog-card-html { display: flex; align-items: center; background-color: white; padding: 20px; gap: 24px; border-radius: 8px; box-shadow: var(--shadow--md); } .blog-img img { border-radius: 4px; } .blog-half { flex: 1; } .blog-title { text-decoration: unset; } .num-count { width: max-content; text-align: left; margin: unset; } .counter-card { border: 1.5px solid var(--secondary-7); padding: 32px; height: 100%; border-radius: 12px; display: flex; flex-direction: column; } .counter-card2 { border: 1.5px solid var(--secondary-7); padding: 20px; border-radius: 12px; height: 100%; } @media (max-width:1920px) { .num-count-cst { font-size: 2vw; } } .logo-scroll { background-color: #F0F5FF; } .formula-box { background-color: var(--secondary-1); border: 1px solid var(--secondary-7); padding: 48px 24px 24px 24px; border-radius: 8px; height: 100%; } .formula-box .title { font-size: var(--label-1-regular); font-weight: 600; color: var(---text--primary); padding-bottom: 16px; text-align: center; } .formula-box .desc { padding-bottom: 8px; } .form-title { color: var(---text--primary); font-size: var(--label-1-regular); font-weight: 600; padding-bottom: 16px; } .form-container form { padding: 24px; border-radius: 12px; background-color: white; } .form-container { padding: 8px; background-color: var(--secondary-3); border-radius: 16px; } .form-label { font-size: var(--label-4-regular) !important; color: var(---text--secondary); margin-bottom: 4px !important; } .form-control, .form-select { padding: 12px 16px !important; border: 1px solid var(--neutral-6) !important; } .form-check-input { border: 1px solid var(--neutral-6) !important; } .form-check-input:checked { background-color: var(--secondary-6) !important; } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--neutral-10) !important; box-shadow: 0 0 0 .25rem rgba(172, 172, 172, 0.25); } .form-label span { color: var(--red-5); } /* HTML:
*/ /* HTML:
*/ .loader { width: 16px; aspect-ratio: 1; display: grid; -webkit-mask: conic-gradient(from 15deg, #0000, #000); animation: l26 1s infinite steps(12); } .loader, .loader:before, .loader:after { background: radial-gradient(closest-side at 50% 12.5%, #ffffff 96%, #0000) 50% 0/20% 80% repeat-y, radial-gradient(closest-side at 12.5% 50%, #ffffff 96%, #0000) 0 50%/80% 20% repeat-x; } .loader:before, .loader:after { content: ""; grid-area: 1/1; transform: rotate(30deg); } .loader:after { transform: rotate(60deg); } @keyframes l26 { 100% { transform: rotate(1turn) } } .contact-details .detail a { color: var(---text--primary); text-decoration: unset; } .contact-details .title { color: var(---text--primary); font-size: var(--label-1-regular); } .contact-details .detail a:hover { text-decoration: underline; } .contact-details { display: flex; align-items: center; background-color: var(--secondary-1); padding: 24px; border-radius: 99px; } .industry-card { width: 307px; background-color: green; padding: 24px; } .industry-img { position: relative; right: -60px; bottom: -24px; } /* header code starts here */ .float-header .navbar>.container, .float-header2 .navbar>.container { flex-wrap: unset !important; justify-content: space-between !important; } .float-header nav, .float-header2 nav { width: 100vw; } .bg-active, .bg-active-static, .bg-active2 { /* transition: all 0.3s ease-in-out; */ box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05); } .float-header, .float-header2 { /* border-bottom: 1px solid #f8f8f813; */ /* transition: 0.5s; */ z-index: 99999999 !important; } .bg-active, .bg-active-static, .bg-active2 { background-color: white; /* border-bottom: 1px solid #f8f8f8; */ /* transition: 0.5s; */ } .bg-active #navbarSupportedContent>ul>li>a, .bg-active-static #navbarSupportedContent>ul>li>a, .bg-active2 #navbarSupportedContent>ul>li>a { color: #3f3f3f !important; } /* .bg-active #navbarSupportedContent > ul > li > a:hover, .bg-active-static #navbarSupportedContent > ul > li > a:hover{ color: #027442!important; background-color: #c2ead8; } */ .new-bg-active #navbarSupportedContent>ul>li>a { color: #3f3f3f !important; } .new-bg-active #navbarSupportedContent>ul>li>a:hover { color: #027442 !important; background-color: var(--secondary-1); } .light-logo { display: none; /* transition: 0.5s; */ } .bg-active .light-logo, .bg-active-static .light-logo, .bg-active2 .light-logo { display: block; /* transition: 0.5s; */ } .bg-active .dark-logo, .bg-active-static .dark-logo, .bg-active2 .dark-logo { display: none; /* transition: 0.5s; */ } #navbarSupportedContent .navbar-nav .nav-item .nav-link { color: white; padding: 16px 8px !important; border: 4px solid transparent; font-weight: 500; font-size: 15px; } #navbarSupportedContent .navbar-nav .nav-item .nav-link:hover { color: var(--secondary-7); border-bottom: 4px solid var(--secondary-7); color: var(--secondary-7) !important; } #navbarSupportedContent .navbar-link-item.active { color: var(--secondary-7) !important; border-bottom: 4px solid var(--secondary-7) !important; color: var(--secondary-7) !important; } .dropdown-toggle::after, .dropdown-toggle2::after { content: ""; border: none; background-image: url('../../assets/svg/menu-caret.svg'); background-repeat: no-repeat; background-position: center center; background-size: contain; position: relative; top: 5px; width: 0.75em; height: 0.75em; transition: unset !important; } /* Rotate on hover or dropdown open */ .dropdown-toggle:hover::after, .dropdown-toggle2:hover::after { transform: rotate(180deg); background-image: url('../../assets/svg/menu-caret-hover.svg') !important; } .bg-active .dropdown-toggle::after, .dropdown-toggle2::after, .bg-active2 .dropdown-toggle::after { background-image: url('../../assets/svg/menu-caret-before.svg'); } .float-header:hover .dropdown-toggle::after, .dropdown-toggle2::after, .float-header2:hover .dropdown-toggle::after { background-image: url('../../assets/svg/menu-caret-before.svg'); } .dropdown-toggle.caret-hover::after, .dropdown-toggle2.caret-hover::after { transform: rotate(180deg); background-image: url('../../assets/svg/menu-caret-hover.svg') !important; } /* .services-dropdown.show{ */ /* transform: translateX(-50%) !important; */ /* left: 50% !important; */ /* width: 100%!important; padding: 24px; */ /* } */ .services-dropdown { width: max-content !important; } .services-dropdown { padding: 20px; } .services-dropdown a { text-decoration: unset; } .dropdown-menu a { text-decoration: unset; } a .menu-card-type-1 { text-decoration: unset; padding: 12px; border-radius: 4px; width: 100%; } a .menu-card-type-1:hover { background-color: var(--secondary-1); } .menu-card-type-1 .primary-text span { background-color: #F9F5FF; color: #6941C6; font-size: var(--label-5-regular); font-weight: 600; padding: 2px 8px; border-radius: 99px; } .case-card .numbers { font-size: var(--heading-h5-regular) !important; } .float-header .navbar>.container, .float-header2 .navbar>.container { flex-wrap: unset !important; justify-content: space-between !important; } .float-header nav, .float-header2 nav { width: 100vw; } .hamburger-button { border: unset !important; padding: 4px 12px !important; border-radius: 8px !important; } .hamburger-button:hover { background-color: unset !important; width: unset !important; } .hamburger-button:active { background-color: #ffffff34 !important; } .bg-active .hamburger-button svg path, .bg-active-static .hamburger-button svg path, .bg-active2 .hamburger-button svg path { fill: rgb(41, 41, 41) !important; } .bg-active .hamburger-button:active, .bg-active2 .hamburger-button:active { background-color: #a1a1a134 !important; } .navbar-mobile-overflow { overflow-y: scroll !important; max-height: 100vh; padding: 16px 0; } .navbar-mobile-overflow .menu-desc { width: 100%; } .new-header { position: fixed; z-index: 999999999 !important; width: 100%; border-bottom: 1px solid rgba(200, 200, 200, 0.159); } .offcanvas-end { height: 100vh; } .canvas-dark { background-color: #0058C0 !important; } .text-bg-dark { background-color: RGBA(0, 28, 61, var(--bs-bg-opacity, 1)) !important; } .offcanvas-title { color: white !important; } .canvas-dark .nav-link { color: #e6e6e6 !important; padding: 12px !important; } .canvas-dark .nav-link:hover { color: #ffffff !important; background-color: #00914b; } .dropdown-mobile { position: relative !important; transform: unset !important; } header .nav-link:focus-visible { outline: -webkit-focus-ring-color auto 1px !important; box-shadow: unset !important; } /* header code ends here */ /* @media (max-width:1024px) { .offcanvas.offcanvas-end { top: 0!important; right: 0!important; width: var(--bs-offcanvas-width)!important; border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color)!important; transform: translateX(100%)!important; } .navbar-expand-lg .offcanvas { position: static; z-index: auto; flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: transparent !important; border: 0 !important; transform: none !important; transition: none; } } */ /* @media (max-width:1200px) { .offcanvas.hiding, .offcanvas.show, .offcanvas.showing { visibility: visible!important; } .offcanvas.offcanvas-end { top: 0; right: 0; width: var(--bs-offcanvas-width); border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); transform: translateX(100%);} } */ /* footer code starts here */ footer { background-color: var(--primary-9); padding: 80px 0 0 0; } /* social media code */ .social-media-button { cursor: pointer; width: 50px; height: 50px; border-radius: 50px; border: none; background-color: var(--primary-7); position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; margin-right: 10px; transition: 0.1s; } .social-media-button svg { color: white; width: 30px; height: 30px; z-index: 9; } .custom svg { width: 24px; height: 24px; } .social-media-button:active { transform: scale(0.85); } .social-media-button:hover { transform: scale(0.85); } .social-media-button:hover::before { width: 0px; height: 0px; } /* social media code */ .footer-desc { color: var(--neutral-2); margin: 16px 0; } .email-subscription-box { max-width: 450px; } #email-subscription-form { width: max-content; margin: auto; float: inline-end; } .subscribe-btn { margin-left: 4px; } .menu_link_footer { color: var(--neutral-3); line-height: 1.8; position: relative; text-decoration: unset; } .menu_link_footer:hover { color: var(--neutral-0); } .menu_link_footer::before { content: ''; width: 0; height: 1px; border-radius: 2px; background-color: #fff; position: absolute; color: var(--neutral-0); bottom: -.25rem; right: 0; transition: right .4s, width .4s, left .4s; } .menu_link_footer:hover::before { width: 100%; left: 0; color: var(--neutral-0); } .footer-ul { padding-left: unset; list-style-type: unset !important; } .footer-ul li { list-style: none !important; margin-bottom: 4px; } .footer-ul li span { background-color: var(--secondary-1); color: var(--secondary-8); font-size: var(--label-5-regular); font-weight: 600; padding: 2px 8px; border-radius: 99px; } .footer-line { border: 1px solid rgba(255, 255, 255, 0.308) !important; margin: 40px 0; } .copyright { background-color: var(--primary-10); text-align: center; padding: 8px 12px; color: var(--neutral-3); margin-top: 32px; } /* footer code ends here */ .capabilities .h2 { margin: unset; text-align: left; } .capabilities .title-caption { text-align: left; margin-left: unset; } .capabilities { height: 100%; overflow-y: scroll; } .custom-section { transition: background-image 0.5s ease-in-out; background-size: cover; background-position: center; padding: 40px 0; } /* video section */ /* .video-bg { position: relative; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; z-index: -1; } */ .content { position: absolute; z-index: 1; color: white; text-align: center; top: 50%; transform: translateY(-50%); font-family: sans-serif; } .video-section { width: 100%; height: 100vh; position: absolute; } .video-section video { width: 100%; height: 100vh; position: relative; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; } .carousel-section { width: 100%; height: 100vh; } .hero-heading h1 { color: white; font-weight: 600; text-align: center; max-width: 800px; margin: auto; } .hero-heading p { color: white; text-align: center; font-size: 20px; max-width: 600px; margin: auto; margin: 16px auto; } .hero-heading { padding-top: 10vw; } /* video section */ /* tech-stack */ .box { max-height: 450px; height: 80vh; overflow: hidden; display: flex; align-items: flex-end; width: 100%; -webkit-mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 6.25rem, rgb(0, 0, 0) calc(100% - 6.25rem), rgba(0, 0, 0, 0) 100%); } @keyframes moveSlideshow { 100% { transform: translateY(50%); } } .transform { max-width: 520px; margin: auto; } .element { transform: translate3d(0, 0, 0); /* Hey browser, please use my GPU */ position: relative; overflow: hidden; animation-name: moveSlideshow; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 30s; animation-direction: reverse; animation-delay: 0s; display: flex; justify-content: flex-end; align-items: center; flex-direction: column; height: max-content; flex-shrink: 0; width: 100%; } .element2 { transform: translate3d(0, 0, 0); /* Hey browser, please use my GPU */ position: relative; overflow: hidden; animation-name: moveSlideshow; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 30s; animation-direction: normal; animation-delay: 0s; display: flex; justify-content: flex-end; align-items: center; flex-direction: column; height: max-content; flex-shrink: 0; width: 100%; } .items { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; flex-shrink: 0; } .item { box-shadow: 1px 1px 4px #CCC; background-color: #FFF; width: 90px; height: 90px; margin-bottom: 24px; border-radius: 4px; display: flex; justify-content: center; align-items: center; opacity: 1; border-radius: 4px; } /* tech stack */ .heliosz-number-box { display: flex; align-items: start; justify-content: space-between; } .heliosz-number-box p { max-width: 450px; text-align: end; } .spacer, .wrapper { width: 100%; min-height: 30vh; } .card-wrapper { width: 100%; perspective: 500px; margin-bottom: 50px; } .card-wrapper:last-child { margin-bottom: 0; } .cards { width: 100%; max-width: 750px; margin: 0 auto; padding: 0 0; } .card-new { width: 100%; height: 720px; display: flex; justify-content: center; align-items: center; font-size: 30px; border-radius: 10px; background-size: contain; background-repeat: no-repeat; background-position: top center; } .card-new { background-image: url("../../assets/svg/capabilities-flow/business-consulting.svg"); } .card-new.two { background-image: url("../../assets/svg/capabilities-flow/data-engineering-services.svg"); } .card-new.three { background-image: url("../../assets/svg/capabilities-flow/data-science-services.svg"); } .card-new.four { background-image: url("../../assets/svg/capabilities-flow/gen-ai.svg"); } .card-new.five { background-image: url("../../assets/svg/capabilities-flow/agenic-ai.svg"); } .titles-list { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 12px; padding: 0 40px; } .title-item { cursor: pointer; font-size: 18px; padding: 20px; transition: color 0.3s, font-weight 0.3s; color: var(---text--secondary); display: flex; align-items: center; justify-content: space-between; } .title-item.active { font-weight: 600; border-left: 3px solid var(--secondary-7); background-color: var(--secondary-1); color: var(---text--primary); } .chevron-right-flow { opacity: 0; } .title-item.active .chevron-right-flow { opacity: 1; } .carousel-indicators { background-color: rgba(255, 255, 255, 0.137); width: max-content; margin-left: auto; margin-right: auto; padding: 0px 16px !important; border-radius: 16px !important } .carousel-indicators .carousel-control-prev, .carousel-indicators .carousel-control-next { background-color: unset !important; width: 24px !important; height: 24px !important; position: relative !important; border: unset !important; } .carousel-indicators button { width: 9px !important; height: 9px !important; border-radius: 50% !important; } .carousel-indicators button.active { background-color: var(--secondary-5) !important; } .sub-hero-desc { color: var(--neutral-1); font-size: 18px; } .breadcrumb-item, .breadcrumb-item a { color: var(--neutral-2) !important; text-decoration: unset; } .breadcrumb-item a:hover { text-decoration: underline; } .breadcrumb-item+.breadcrumb-item::before { color: var(--neutral-2) !important; } .industry-specific .container { max-width: 1000px !important; } .industry-card { width: 100%; height: 350px; background-color: #B1EFDD; border-radius: 12px; padding: 24px; position: relative; overflow: hidden; z-index: 0; } .industry-card2 { background-color: #B8E7F4; } .title { font-size: 18px; font-weight: 600; color: var(---text--primary); } .image-container { position: absolute; bottom: 0; right: 0; transition: transform 0.3s ease; } .industry-card:hover .image-container { transform: scale(1.1) translate(-5px, -5px); } .industry-card a { opacity: 0; position: relative; z-index: 3; } .industry-card:hover.industry-card a { opacity: 1; } .pill { font-size: var(--label-4-regular); font-weight: 500; padding: 4px 8px; border-radius: 99px; background-color: var(--secondary-7); color: white; width: max-content; margin: auto; } .flow-card { padding: 32px; background-color: white; border: 1px solid var(--secondary-7); border-radius: 12px; text-align: center; margin: 0 12px; /* height: 100%; */ } .flow-card img { padding: 20px 0; } .flow-text { font-size: var(--label-1-regular); color: var(---text--primary); font-weight: 600; } .top-bar-1 { padding: 142px 0 80px 0; background-color: var(--primary-9); } .ebook-card { box-shadow: var(--shadow--md); padding: 24px; border-radius: 8px; } .case-card { box-shadow: var(--shadow--md); padding: 24px; border-radius: 8px; } .details-list li { list-style: none; display: flex; align-items: start; margin-bottom: 8px; } .details-list { padding-left: unset; } .sticky-container { padding-top: 80px; } .details-left { padding-top: 80px; } .pagination-link { text-decoration: unset; } .pagination-container { padding: 24px; border-radius: 8px; background-color: var(--secondary-1); border: 1px solid var(--secondary-1); height: 100%; } .pagination-link:hover .pagination-container { border: 1px solid var(--secondary-6); } .pagination-container img { transition: 0.3s; } .pagination-link:hover .pagination-container img { transform: translateX(5px); transition: 0.3s; } .previous:hover .pagination-container img { transform: translateX(-5px); transition: 0.3s; } .previous { text-align: right; } .info-details p, .case-details p { color: var(---text--primary); } #optivosModal, #book-a-demo-Modal { z-index: 999999999 !important; } .modal-dialog { max-width: 1250px !important; } .modal-backdrop.show { z-index: 99999999 !important; } .modal-body { padding: 48px 38px; } #helioszModal .btn-close { --bs-btn-close-bg: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI4IiBoZWlnaHQ9IjI4IiByeD0iMTQiIGZpbGw9IiNFQ0VERUUiLz4KPHBhdGggZD0iTTE4LjI5MjkgOC4yOTI4OUMxOC42ODM0IDcuOTAyMzcgMTkuMzE2NCA3LjkwMjM3IDE5LjcwNyA4LjI5Mjg5QzIwLjA5NzUgOC42ODM0MiAyMC4wOTc1IDkuMzE2NDMgMTkuNzA3IDkuNzA2OTZMMTUuNDE0IDEzLjk5OTlMMTkuNzA3IDE4LjI5MjlDMjAuMDk3NSAxOC42ODM0IDIwLjA5NzUgMTkuMzE2NCAxOS43MDcgMTkuNzA3QzE5LjMxNjQgMjAuMDk3NSAxOC42ODM0IDIwLjA5NzUgMTguMjkyOSAxOS43MDdMMTMuOTk5OSAxNS40MTRMOS43MDY5NiAxOS43MDdDOS4zMTY0MyAyMC4wOTc1IDguNjgzNDIgMjAuMDk3NSA4LjI5Mjg5IDE5LjcwN0M3LjkwMjM3IDE5LjMxNjQgNy45MDIzNyAxOC42ODM0IDguMjkyODkgMTguMjkyOUwxMi41ODU5IDEzLjk5OTlMOC4yOTI4OSA5LjcwNjk2QzcuOTAyMzcgOS4zMTY0MyA3LjkwMjM3IDguNjgzNDIgOC4yOTI4OSA4LjI5Mjg5QzguNjgzNDIgNy45MDIzNyA5LjMxNjQzIDcuOTAyMzcgOS43MDY5NiA4LjI5Mjg5TDEzLjk5OTkgMTIuNTg1OUwxOC4yOTI5IDguMjkyODlaIiBmaWxsPSIjNjY2RDc0Ii8+Cjwvc3ZnPgo=) !important; width: 24px !important; height: 24px !important; background-size: cover; top: 10px !important; } .close-container { position: absolute; top: 10px; right: 10px; } .event-card { padding: 24px; border-radius: 8px; background-color: white; height: 100%; } .event-card img { margin-bottom: 12px; } .why-event { background-color: var(--primary-9); } /* .map-bg{ background-image: url('/assets/svg/global-map.svg'); background-position: center center; background-size: contain; background-repeat: no-repeat; } */ .meet-card img { border-radius: 8px; position: relative; bottom: -80px; } .meet-card { text-align: center; padding: 32px; } .expert .contents { background-color: var(--primary-8); padding: 80px 24px 24px 24px; text-align: center; border-radius: 20px; } .custom-top-padding { position: relative; top: -80px; } .error-div { display: flex; align-items: center; margin-top: 60px; } .error-div a { margin-right: 12px; } .page-not-found { padding: calc(80px + 62.5px) 0 80px 0; background-color: #f9fbff; } .btn-light { background-color: var(--neutral-0) !important; } .not-found-text { font-size: 20px; } .page-not-found .gradient-effect { text-align: left; margin: auto; } /* For small screens, hide section background and show image inside */ @media (max-width: 575.98px) { .custom-section { background-image: none !important; padding-top: unset; } } .bg-mobile { display: none; width: 100%; height: auto; border-radius: 8px; } @media (max-width:1024px) { .hero-heading { padding-top: 15vw; } .industry-card a { opacity: 1; } .industry-card .image-container { transform: scale(1.1) translate(-5px, -5px); } } @media (max-width:1200px) { .num-count-cst { font-size: 2.5vw !important; } } @media (max-width:992px) { .carousel-indicators { padding: 8px 8px !important; border-radius: 99px !important } .services-bg-1.accelerator-sub { padding: 100px 0 50px 0; height: 100%; } .promotion-bar { padding: 75px 32px; border-radius: 8px; } .why-trust-card { display: block; gap: 24px; } .why-trust-card img { width: 32px; margin-bottom: 12px; } .faq-illustraion-img { position: relative; right: unset; bottom: unset; } .faq-illustration-box { display: flex; align-items: center; justify-content: space-around; } .collapse-card { padding: 16px; } .menu__link { font-size: 14px; } .excerpt4 { display: -webkit-box !important; -webkit-line-clamp: 2; } .h4 a.blog-title, .h6 a.blog-title { font-size: var(--heading-h5-regular) !important; line-height: 1.4 !important; } .sticky-container { padding-top: unset; } .error-img img { width: 80% !important; } .page-not-found { padding: calc(80px + 62.5px) 0 80px 0; background-color: #f9fbff; text-align: center !important; } .page-not-found .gradient-effect { text-align: center; margin: auto; } .error-div { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 24px; } .error-div a { margin-right: 12px; margin-bottom: 16px; } .page-not-found { padding: calc(32px + 62.5px) 0 32px 0; background-color: #f9fbff; } .not-found-text { font-size: 16px; } } @media (max-width:768px) { .heliosz-number-box { display: block; text-align: center; } .heliosz-number-box p { max-width: unset; text-align: center; margin-bottom: 24px; } .num-count-cst { font-size: 6vw !important; } } /* Responsive edit below */ @media (max-width:576px) { .primary-button { font-size: 16px; padding: 0.75rem 1.5rem; } .title-caption { padding: 2px 4px; margin-bottom: 8px; font-size: 12px; } .promotion-bar { padding: 50px 24px; border-radius: 8px; } .carousel-heading-2 { text-align: center; padding-left: unset; width: max-content; margin: auto; } .carousel-arrow-type-2 { position: relative; top: unset; right: unset; } .faq-illustration-box { justify-content: space-between; } .faq-illustration-box .h5 { max-width: auto; line-height: 26px; margin-bottom: 16px; } .faq-illustraion-img { width: 70%; } .key-challenge-card { padding: 24px; } .key-challenge-card .h4 { font-size: var(--heading-h3-regular) !important; } .blog-card-html { display: block; align-items: center; background-color: white; padding: 16px; gap: 0; border-radius: 8px; box-shadow: var(--shadow--md); } .excerpt4 { display: -webkit-box !important; -webkit-line-clamp: 2; } .h4 a.blog-title, .h6 a.blog-title { font-size: var(--heading-h5-regular) !important; line-height: 1.4 !important; } .footer-ul li { list-style: none !important; margin-bottom: 2px; } footer { padding: 40px 0 0 0; } .hero-heading { padding-top: 40%; } .item { box-shadow: 1px 1px 3px #CCC; background-color: #FFF; width: 60px; height: 60px; margin-bottom: 20px; border-radius: 2px; display: flex; justify-content: center; align-items: center; opacity: 1; border-radius: 4px; } .tech-stack-img { height: 40px; } .num-count-cst { font-size: 10vw !important; } .titles-list { padding: unset; } .sub-hero-desc { color: var(--neutral-1); font-size: 15px; } .industry-card { width: 100%; height: 300px; } .flow-card { padding: 24px; background-color: white; border: 1px solid var(--secondary-7); border-radius: 12px; text-align: center; margin: 0 12px; height: 100%; } .flow-card img { padding: 12px 0; height: 90px; } .flow-text { font-size: var(--label-2-regular); } .filter-box { background-color: white; border-radius: 99px; box-shadow: var(--shadow--md); padding: 8px 12px; } .top-bar-1 { padding: 100px 0 60px 0; background-color: var(--primary-9); } #pill-container { width: 100% } .sticky-container { padding-top: 0; } .details-left { padding-top: 40px; } .ebook-details .img-container { text-align: center; } .previous { text-align: left !important; } .pagination-link { text-align: right; } .ebook-card, .case-card { padding: 20px; } .modal-body { padding: 0; } #helioszModal .modal-dialog { --bs-modal-bg: var(--transparent) !important; border: unset !important; } #helioszModal .btn-close { width: 16px !important; height: 16px !important; } .expert2 { position: relative; top: -80px; } } .new-section-1 { background-color: #F0F5FF; } .solutions-text { font-size: var(--label-1-regular); color: var(---text--primary); } .solutions-text-box, .impact-text-box, .impact-text-box2 { display: flex; align-items: start; margin-bottom: 16px; } .solutions-text span { font-weight: 600; } .impact-text { font-size: var(--label-2-regular); color: var(---text--primary); } .impact-text2 { font-size: var(--label-1-regular); color: var(---text--primary); } .impact-text span { font-weight: 600; } .impact-box { height: 100%; background-color: white; padding: 24px; border-radius: 8px; box-shadow: var(--shadow--md); } @media (max-width:576px) { .solutions-text-box { display: flex; align-items: start; margin-bottom: 12px; } .solutions-text { font-size: var(--label-2-regular); } .solutions-text-box img { width: 20px; position: relative; top: 2px; } } /* ---new css 25-09-2025 --- */ .details-list span { font-weight: 600; } .agentic-industry-list li { font-size: var(--label-1-regular); margin-bottom: 16px; } .agentic-industry-button .active { background-color: var(--secondary-6) !important; font-weight: 500; color: var(--neutral-0) !important; border-color: var(--secondary-6) !important; } .none { right: -15px; opacity: 0; transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out; z-index: -1; } .agentic-industry-button .active .none { opacity: 1; transform: scale(1); right: -15px; } .agentic-industry-button { width: 100%; transition: unset; } .agentic-industry-button button { font-size: var(--label-1-regular) !important; border: 1px solid var(--neutral-2) !important; padding: 12px 4px !important; color: var(---text--secondary) !important; margin-bottom: 12px; border-radius: unset !important; position: relative; } @media (max-width:1440px) { .agentic-industry-list li { font-size: var(--label-2-regular); margin-bottom: 16px; } .agentic-industry-button button { font-size: var(--label-2-regular) !important; } } @media (max-width:576px) { .agentic-services-list { margin-top: 8px; margin-bottom: unset; } .agentic-services-list li { margin-bottom: 4px; font-size: var(--label-2-regular); } .agentic-ai-services-card { padding: 20px; } .agentic-ai-services-card img { width: 50px; margin-bottom: unset; } } /* ---new css 25-09-2025 --- */ /* accelerator section 29-09-2025*/ .other-accelerator { background-image: url('../../assets/img/background-images/other-accelerators-bg.webp'); background-position: center center; background-size: cover; background-repeat: no-repeat; } .carousel-card-3 { /* height: 100%; */ background-color: white; border-radius: 8px; padding: 24px; } .carousel-card-3 img { width: 40px; } .carousel-card-3 a { text-decoration: unset; } .carousel-card-3 .title-type-1 { margin: 12px 0 8px 0; } .carousel-card-3 .desc-type-1 { margin-bottom: 12px; } .key-features-card-new { border-bottom: 1px solid var(--neutral-2); padding-top: 16px; } .absolute-arrow { position: absolute; left: 0; top: 150px; z-index: -1; } @media (max-width:1920px) { .absolute-arrow { width: 40vw; } } #workflow-accelerator .flow-card { padding: 20px; } .diff-card { background-color: rgba(255, 255, 255, 0.096); border-top: 1px solid white; border-bottom: 1px solid white; padding: 24px; position: relative; } .diff-card .h6 { font-size: var(--label-2-regular) !important; } .hover-dp { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s ease, opacity 0.5s ease; } .diff-card:hover .hover-dp { max-height: 250px; /* Enough to show full content */ opacity: 1; } .diff-card:hover { background-color: rgba(32, 255, 88, 0.096); border-top: 2px solid var(--secondary-7); border-bottom: 2px solid var(--secondary-7); padding: 24px; transition: max-height 0.5s ease, opacity 0.5s ease; } .outcomes-card { text-align: center; padding: 24px; } .outcomes-card p { font-size: var(--label-1-regular); color: var(---text--primary); padding-top: 12px; } .outcomes-card img { width: 100px; } .border-custom { border-right: 2px solid var(--neutral-2); } .accerlator-middle-section { padding: 40px; border-radius: 16px; box-shadow: var(--shadow--lg); background-color: white; max-width: 1000px; margin: auto; position: relative; z-index: 1; } .accerlator-middle-section p { font-size: var(--label-1-regular); color: var(---text--secondary); text-align: center; } .acc-section-new { background-color: #F6F6F6; } .flow-card-height img { width: 65px; } .flow-card-height { padding: 20px; height: 100% } .flow-card-height .flow-text { font-size: var(--label-2-regular); } @media (max-width:1024px) { .border-custom { border-right: 2px solid var(--neutral-2); } .accerlator-middle-section { padding: 32px; border-radius: 12px; box-shadow: var(--shadow--lg); background-color: white; max-width: 800px; margin: auto; position: relative; z-index: 1; } .accerlator-middle-section p { font-size: var(--label-2-regular); color: var(---text--secondary); text-align: center; } .absolute-arrow { width: 45vw; top: 200px; } } /* @media (max-width:1440px) { .diff-card{ height: 200px; } .diff-card:hover{ height: auto; transition: max-height 0.5s ease, opacity 0.5s ease; } } */ @media (max-width:1024px) { .diff-card { text-align: center; } } @media (max-width:992px) { .border-custom { border-right: 0px solid var(--neutral-2); border-bottom: 0px solid var(--neutral-2); } .border-custom-2 { border-bottom: 0px solid var(--neutral-2); } .absolute-arrow { display: none; } .accerlator-middle-section { max-width: 600px; } } @media (max-width:768px) { .accerlator-middle-section { max-width: 550px; } } @media (max-width:576px) { .outcomes-card { padding: 0px; /* display: flex; */ } .outcomes-card img { width: 60px; } .outcomes-card p { font-size: var(--label-2-regular); color: var(---text--primary); padding-top: 8px; } .border-custom { border-right: 0 solid var(--neutral-2); border-bottom: unset; } .border-custom { border-right: 0px solid var(--neutral-2); border-bottom: 1px solid var(--neutral-2); } .accerlator-middle-section { padding: 24px; border-radius: 12px; box-shadow: var(--shadow--lg); background-color: white; margin: auto; position: relative; z-index: 1; } .onedata-wave { position: absolute; bottom: -40px; left: 0; right: 0; height: 350px; background-image: url('../../assets/img/background-images/accelerator-middle-bg.webp'); background-size: cover; background-position: center; z-index: 0; border-radius: 0; } } /* accelerator section */ /* event css */ .why-attend { padding: 8px 0 8px 32px; border-left: 1px solid var(--secondary-7); position: relative; } .border-stripe { position: absolute; top: 0; left: -2px; } .why-icon { margin-bottom: 16px; } .why-choose-event-card { background: linear-gradient(180deg, #FFF 0%, #F6FFF8 100%); border-radius: 16px; padding: 24px; height: 100%; } .rosen-shignle { background-image: url('../../assets/img/events/ana-masters/cloud-bg.webp'); background-position: center center; background-size: cover; background-repeat: no-repeat; padding-top: 100px; } .hotel-marker { display: flex; align-items: center; justify-content: center; margin: 24px 0; } .event-hero { padding: calc(80px + 62.5px) 0 80px 0; background-image: url('../../assets/img/events/ana-masters/event-bg.webp'); background-position: center center; background-size: cover; background-repeat: no-repeat; } .event-details-bar { display: flex; align-items: center; border-radius: 8px; border: 1.5px solid #FFF; background: rgba(255, 255, 255, 0.15); box-shadow: 0 6px 0 0 rgba(255, 255, 255, 0.25); backdrop-filter: blur(15px); width: max-content; padding: 16px; gap: 16px; margin-top: 12px; } @media (max-width:992px) { .event-details-bar { margin-bottom: 24px; } } @media (max-width:576px) { .why-icon { padding-right: 16px; width: 75px; margin-bottom: unset; } } /* New Menu and Services */ .menu-column-8 { padding: 20px 20px 20px 8px; } .hover-menu-side { background-color: #F2F2F2; border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); margin: unset !important; padding: unset !important; } .hover-menu { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; cursor: pointer; } /* .hover-menu:hover{ background-color: var(--secondary-2); } */ .arrow-icon-menu { display: none; } .hover-menu.active .arrow-icon-menu { display: block; } .hover-menu.active { background-color: var(--secondary-7); color: white; } .hover-menu-title { margin-bottom: unset; } .services-v2 { background-color: var(--primary-8); padding-top: calc(80px + 62.5px); padding-bottom: 220px; } .services-v3 { background-color: var(--primary-8); padding-top: calc(80px + 62.5px); padding-bottom: 80px; } .float-box { background-color: white; box-shadow: 0 8px 10px -6px rgba(0, 0, 0, 0.10), 0 20px 25px -5px rgba(0, 0, 0, 0.10); border-radius: 48px; width: 900px; margin: auto; padding: 48px; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 100%; } .float-box .secondary-text { font-size: var(--label-2-regular); max-width: 800px; margin: auto; text-align: center; } .pain-point-section { padding-top: 240px; } .why-trust-card-2 .title { font-size: var(--heading-h5-regular); margin-bottom: 8px; color: var(--neutral-1); } .why-trust-card-2 .desc { font-size: var(--label-2-regular); color: var(--neutral-2); } .why-trust-card-2 { background-color: var(--primary-7); padding: 24px; /* border: 1px solid var(--secondary-6); */ border-radius: 6px; /* border: 1px solid transparent; border-image: linear-gradient(20deg, #ff00cc, #3333ff) 1; */ overflow: hidden; position: relative; } .why-g { background: linear-gradient(107deg, #048724 -2.95%, rgba(4, 135, 36, 0.00) 80.94%); padding: 1px; border-radius: 6px; } .why-b { background-color: var(--primary-6); border-radius: 6px; padding: 4px; } .dots-position { position: absolute; top: -1px; left: -2px; } .shape-position { position: absolute; right: 0; top: 0; } .services-card { padding: 24px; background-color: white; border-radius: 8px; border: 1px solid var(--neutral-2); } @media (max-width:1024px) { .services-v2, .services-v3 { padding-top: calc(40px + 46px); } } @media (max-width:992px) { .services-v2, .services-v3 { padding-bottom: 40px; } .pain-point-section { padding-top: 40px; } .float-box { position: relative; width: 100%; transform: unset; left: unset; top: unset; padding: 32px; border-radius: 32px; } } @media (max-width:768px) { .float-box { position: relative; width: 100%; transform: unset; left: unset; top: unset; padding: 32px; border-radius: 32px; } .services-v2, .services-v3 { padding-bottom: 40px !important; } .pain-point-section { padding-top: 40px; } } @media (max-width:576px) { .float-box { position: relative; width: 100%; transform: unset; left: unset; top: unset; padding: 24px; border-radius: 16px; } } .progress-container { width: 200px; /* adjust size */ height: 4px; /* thickness of line */ background: #eee; /* background bar */ overflow: hidden; position: relative; } .progress-line { width: 0%; height: 100%; background: var(--secondary-6); /* color of the animated bar */ transition: width 8s ease-in-out; } .progress-container.active .progress-line { width: 100%; } .services-card { position: relative; } .progress-container { width: 100%; height: 4px; background: #eee; margin-bottom: 10px; overflow: hidden; position: absolute; top: 0; left: 0; border-top-left-radius: 12px; border-top-right-radius: 12px; opacity: 0; } .progress-line { width: 0%; height: 100%; background: var(--secondary-6); transition: width 8s linear; } .control-btn { display: none; } .slide.active .control-btn { display: inline-block; } .progress-container.active { opacity: 1; } /* From Uiverse.io by bbaginuk */ /*------ Settings ------*/ .pp-container { --color: rgb(202, 202, 202); --size: 20px; display: flex; justify-content: center; align-items: center; position: relative; cursor: pointer; font-size: var(--size); user-select: none; fill: var(--color); } .pp-container .play { position: relative; animation: keyframes-fill 0.3s; } .pp-container .pause { position: relative; display: none; animation: keyframes-fill 0.3s; } /* ------ On check event ------ */ .pp-container input:checked~.play { display: none; } .pp-container input:checked~.pause { display: block; } /* ------ Hide the default checkbox ------ */ .pp-container input { position: relative; opacity: 0; cursor: pointer; height: 0; width: 0; } .play-pause-abs { display: none; } .services-card.active .play-pause-abs { display: block; } /* ------ Animation ------ */ @keyframes keyframes-fill { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); } } meter { width: 100%; position: absolute; top: -4px; left: 0; padding: unset; margin: unset !important; outline: unset; border: unset; height: 12px; opacity: 0; } meter::-webkit-meter-bar { background: var(--neutral-1); border-radius: 12px; } meter::-webkit-meter-optimum-value { background: var(--secondary-6); border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .services-card.active meter { opacity: 1; } .services-card.active { background-color: #F6FFF8; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .services-card { cursor: pointer; } .thumbnails { display: flex; margin: 1rem auto 0; padding: 0; justify-content: center; } .thumbnail { overflow: hidden; list-style: none; margin: 0 0.2rem; cursor: pointer; } .thumbnail img { width: 100%; height: auto; } .thumbnails { display: flex; margin: 0 auto 0; padding: 0; justify-content: center; } .thumbnail { overflow: hidden; list-style: none; cursor: pointer; width: max-content; } .nav-links { background-color: #ECEDEE; padding: 12px 20px !important; border: none; border-radius: 99px; color: var(---text--secondary); font-weight: 500; white-space: nowrap; } .nav-links:hover { background-color: #f0f0f0; } .thumbnail.is-active button { background: linear-gradient(105deg, #054BBD 7.02%, #1D7D3C 82.21%); color: white; } .nav-pillss { /* position: absolute; */ background-color: white; width: max-content; margin: auto; padding: 12px; border-radius: 99px; box-shadow: var(--shadow--lg); position: absolute; z-index: 1; transform: translate(-50%, -50%) !important; left: 50% !important; top: 0 !important; } .section-gap-custom { padding: 100px 0; } @media (max-width:576px) { .section-gap-custom { padding: 40px 0; } } /* New Menu and Services */ .thumbnail2 button { background-color: var(--neutral-0); outline: unset; border: unset; width: 110px; height: 110px; border-radius: 99px; box-shadow: var(--shadow--lg); } .thumbnail2.is-active button { background-color: var(--secondary-6); outline: unset; border: unset; } .thumbnail2.is-active button img { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(106deg) brightness(108%) contrast(101%); } .thumbnail2 button img { width: 60px; } .thumbnails2 { list-style-type: none; } .thumbnail2.one, .thumbnail2.five { top: 100px; position: relative; } .thumbnail2.two, .thumbnail2.four { margin-top: 50px; position: relative; } .nav-pills-business { /* position: absolute; */ background-color: white; margin: auto; padding: 12px; border-radius: 99px; /* position: absolute; */ z-index: 1; /* transform: translate(-50%, -50%) !important; */ /* left: 50% !important; */ /* top: 0 !important; */ display: flex; align-items: center; justify-content: space-around; max-width: 1100px; } @media (max-width:768px) { .thumbnail2.one, .thumbnail2.five { top: unset; position: relative; } .thumbnail2.two, .thumbnail2.four { margin-top: unset; position: relative; } .thumbnail2 button { width: 90px; height: 90px; } .thumbnail2 button img { width: 48px; } } @media (max-width:576px) { .thumbnail2 button { width: calc((100vw - 100px) / 5); height: calc((100vw - 100px) / 5); } .thumbnail2 button img { width: 9vw; } } .new-pain-point { background-color: white; padding: 24px; } .new-pain-point .nav-link { white-space: nowrap; background-color: unset; color: var(---text--secondary); display: flex; align-items: center; justify-content: space-between; padding: 16px 24px !important; font-size: 18px !important; border-radius: unset !important; font-weight: 500; } .new-pain-point .nav-link img { opacity: 0; } .new-pain-point .nav-link.active img { opacity: 1; } .new-pain-point .nav-link.active { background: linear-gradient(105deg, #054BBD 7.02%, #1D7D3C 82.21%) !important; } .new-pain-point-img { width: 200px; } .power-apps-card { padding: 24px; box-shadow: var(--shadow--lg); background-color: white; border: 1px solid white; } .power-apps-card.blue { background-color: #EDFDFF; border: 1px solid #94E2EB; } .power-apps-card.orange { background-color: #FFEDF1; border: 1px solid #FFBFCD; } .power-apps-card.yellow { background-color: #F7FFED; border: 1px solid #AAD871; } /* Footer New CSS Below */ .specialize-card { background-color: var(--secondary-7); color: white !important; font-size: var(--label-1-regular); display: flex; align-items: center; padding: 12px; border-radius: 99px; width: max-content; } .specialize-card img { padding-right: 8px; } .specialize-div { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } .animated-integrations-card { background-color: white; box-shadow: var(--shadow--lg); /* transform: rotate(-90deg); */ width: 100px; align-items: center; height: 500px; justify-content: center; cursor: pointer; } .animated-integrations-card .h5 { transform: rotate(-90deg); width: max-content; } .animated-integrations-card img, .animated-integrations-card .desc-type-1 { display: none; } /* .animated-integrations-card{ transform: rotate(-90deg); } */ .animated-integrations-card.active { transform: unset; width: fit-content; cursor: unset; } .animated-integrations-card.active img, .animated-integrations-card.active .desc-type-1 { display: block; } .animated-integrations-card.active .h5 { transform: unset; } .vertical-menu { display: flex; gap: 32px; } @media (max-width:992px) { .vertical-menu { display: block; } .animated-integrations-card { width: auto; height: auto; cursor: pointer; margin-bottom: 20px; } .animated-integrations-card .h5 { transform: unset; width: max-content; } .animated-integrations-card img, .animated-integrations-card .desc-type-1 { display: block; } } /* 15-04-2026 */ .title-caption span { text-transform: lowercase; } .threelayers { padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; border: 1px solid transparent; background-color: var(--neutral-1); margin-bottom: 32px; cursor: pointer; } /* .threelayers:not(.active) .gradient-effect, .threelayers:not(.active) .secondary-text { display: none; } */ .threelayers.active .gradient-effect, .threelayers.active .secondary-text { display: block; } .threelayers .secondary-text { font-size: 18px; } .threelayers.active { border: 4px solid var(--green-6); background-color: unset; align-items: start; } .threelayers.active img { mix-blend-mode: unset; } .threelayers img { mix-blend-mode: luminosity; } .rm-card { background-color: var(--primary-9); /* fallback base */ background-image: url("../../assets/img/bg-gradient.webp"); background-repeat: repeat, no-repeat; background-position: center, top; background-size: auto, cover; padding: 24px; border-radius: 16px; height: 100%; } .rm-card2 { padding: 16px; } .rm-content { padding: 24px; border: 1px solid rgba(255, 255, 255, 0.527); border-radius: 8px; backdrop-filter: blur(11.5px); background: rgba(255, 255, 255, 0.027); } .rm-section { background-color: #ECF4FA; } .rm-content p { color: var(--neutral-2); font-size: 18px; } .rm-enquiry-top p { color: var(--neutral-2); } .rm-enquiry-top { text-align: center; } .rm-enquiry .line { height: 1px; background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.712) 0, rgba(255, 255, 255, 0.712) 0 5px, transparent 5px, transparent 10px); margin: 16px 0; } .rm-enquiry-header { background-color: rgba(255, 255, 255, 0.144); border-radius: 8px; padding: 16px; } .rm-enquiry-footer { display: flex; flex-direction: column; width: min-content; margin: auto; padding-top: 32px; } .rm-enquiry { display: flex; flex-direction: column; } .rm-content2 { display: flex; gap: 16px; } .dashboard-img { padding: 8px; background-color: #C7C7C7; border-radius: 12px; } .use-case-bg { background-color: var(--primary-9); } .use-case-card p { color: var(--neutral-2); } .use-case-card { display: flex; background-image: url('../../assets/img/noise.png'); background-position: center center; background-repeat: repeat; padding: 40px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.233); } .use-case-left { display: flex; flex-direction: column; justify-content: space-between; align-items: start; height: 100%; } .use-case-left p { font-size: 18px; margin-top: 16px; } .use-case-btn { color: var(--neutral-1) !important; background-color: unset; display: flex; align-items: center; gap: 8px; width: 100%; font-size: 18px; margin-bottom: 16px; opacity: 0.5 !important; } .use-case-btn.active { background-color: rgba(255, 255, 255, 0.075) !important; border-bottom: 1px solid white; border-radius: unset; opacity: 1 !important; } .use-case-bg .nav-pills { display: block; } html { scroll-padding-top: 100px; /* same as navbar height */ } .title-row { margin: 12px 0 24px 0; border-bottom: 1px solid #AFB2B6; } .use-case-card { padding: 20px; } .use-case-left p { font-size: 16px; margin-top: 8px; } .gradient-left-align { text-align: left; margin: unset; } .title-caption-unset { margin: unset; } .sub-hero-descv3 { font-size: 24px; } .hero-top-content { padding-top: 120px; } .sub-services-card { padding: 24px; background-image: url('../../assets/img/sub-services-bg-1.webp'); background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 12px; display: flex; flex-direction: column; justify-content: space-between; } .sub-services-card2 { background-image: url('../../assets/img/sub-services-bg-2.webp'); } .sub-services-card .title { color: white; font-weight: 400; font-size: 15px; margin-bottom: 4px; } .sub-services-card h3 { color: white; } .sub-services-card p { color: var(--neutral-2); } .sub-services-card h5 { color: white; } .wd-c { width: 300px; flex-wrap: wrap; } .vas-bg { background-image: url('../../assets/img/vas-bg.webp'); background-position: center center; background-size: cover; background-repeat: no-repeat; padding-bottom: 0; } .lt-card1 h5 { color: var(--neutral-3); } .lt-card1 p { color: var(---text--teritiary); margin-bottom: unset; } .lt-card1 { display: flex; align-items: start; gap: 16px; padding: 24px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(17px); height: 100% !important; } .lt-card2 { display: flex; align-items: start; gap: 16px; padding: 24px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.70); background: linear-gradient(105deg, #07347D 7.02%, #0C5323 82.21%); backdrop-filter: blur(17px); height: 100%; } .lt-card2 p { color: var(--neutral-1); margin-bottom: unset; } .lt-card2 h5 { color: white; } .absolute-cards { background-color: white; padding: 24px; border-radius: 12px; box-shadow: 0 8px 10px -6px rgba(0, 0, 0, 0.10), 0 20px 25px -5px rgba(0, 0, 0, 0.10); } .inner-div-abs { padding-bottom: 220px; } .position-div { position: absolute; transform: translate(-50%, -50%) !important; left: 50% !important; top: 100% !important; width: 100%; } .teams-cards { padding: 24px; background-color: #dcecdf; border: 1px solid var(--green-3); height: 100%; } .lottie-icon { width: 64px; height: 64px; } .animation-icon-card { display: flex; align-items: start; gap: 20px; padding: 24px; height: 100%; } .animation-icon-card.third { border-top: 1px dotted var(--neutral-5); border-bottom: 1px dotted var(--neutral-5); border-right: 1px dotted var(--neutral-5); } .animation-icon-card.first, .animation-icon-card.fifth { border-right: 1px dotted var(--neutral-5); } .animation-icon-card.second { border-left: unset; } .animation-icon-card.four { border-top: 1px dotted var(--neutral-5); border-bottom: 1px dotted var(--neutral-5); } .optivo-bg { background-color: var(--primary-8); background-image: unset; padding: 100px 0; height: unset; } @media (max-width:1200px) { .sub-service-menu { font-size: 14px; } .animation-icon-card.third { border-top: 1px dotted var(--neutral-5); border-bottom: unset; border-right: unset; } .animation-icon-card.second { border-top: 1px dotted var(--neutral-5); } .animation-icon-card.first, .animation-icon-card.fifth { border-right: unset; } .animation-icon-card.second { border-left: unset; } .animation-icon-card.four { border-top: 1px dotted var(--neutral-5); border-bottom: 1px dotted var(--neutral-5); } .animation-icon-card.sixth { border-top: 1px dotted var(--neutral-5); } } @media (max-width:992px) { .hero-top-content { padding-top: 90px; } .optivo-bg { background-color: var(--primary-8); background-image: unset; padding: 90px 0; } .inner-div-abs { padding-bottom: 24px; } .position-div { position: relative; transform: unset !important; left: unset !important; top: unset !important; width: auto; } .vas-bg { padding-bottom: 40px; } } @media (max-width:576px) { .hero-top-content { padding-top: 90px; } .animation-icon-card { gap: 16px; padding: 16px; } .optivo-bg { padding: 85px 0 32px 0; } .sub-hero-descv3 { font-size: 20px; } .fd-c { flex-direction: column; } .lt-card2 img, .lt-card1 img { width: 40px; } .lt-card1 { padding: 20px; } .lt-card2 { padding: 20px; } } .optivo-capabilities { background-color: var(--primary-9); } .sub-service-menu { background-color: white; color: var(---text--secondary); text-decoration: unset; padding: 4px 8px; border-radius: 32px; text-align: center; white-space: nowrap; } .sub-service-menu:hover { background-color: var(--secondary-6); color: white; text-decoration: unset; border-radius: 32px; } .business-impact { background-image: url('../../assets/img/pattern-stats.webp'); background-position: center center; background-size: cover; } .titl-sub { font-size: 20px; color: white; } .title-stat-div { font-size: 18px; } .stats-new-v3 { color: var(--neutral-3); } .optivo-card { background-color: white; padding: 24px; border-radius: 12px; height: 100%; } @media (max-width:576px) { .optivo-card { padding: 24px; } } .scroll-accordion { padding: 24px; border-bottom: 1px solid var(--neutral-2); } .scroll-accordion p { display: none; font-size: 18px; color: white; margin-bottom: unset; } .scroll-accordion.active h3 { color: white; } .scroll-accordion.active { background: var(--Icon-Gradient, linear-gradient(105deg, #054BBD 7.02%, #1D7D3C 82.21%)); } .scroll-accordion.active p { display: block; color: white; } .scroll-accordion { cursor: pointer; transition: 0.3s ease; } .scroll-accordion:hover { background-color: var(--neutral-1); transition: 0.1s ease; } .hero-content-section { width: 100%; height: 100vh; position: relative; z-index: 1; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.90) 10%, rgba(0, 0, 0, 0) 139.31%) !important; } .top-pill-variant-2 { font-size: 18px; letter-spacing: 1px; color: white; margin-bottom: 12px; } .transparent-services-card { position: relative; overflow: hidden; padding: 24px; border-top: 1px solid white; z-index: 1; } .transparent-services-card p { color: var(--neutral-2); } .transparent-services-card h3 { color: var(--neutral-0); } .transparent-services-card h3 a { color: var(--neutral-0); text-decoration: unset; } /* animated background layer */ .transparent-services-card::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(25.5px); transform: scaleY(0); transform-origin: top; transition: transform 0.4s ease; z-index: -1; } .transparent-services-card:hover { border-top: 1px solid #FFF; } .transparent-services-card:hover::before { transform: scaleY(1); } .menu__link.color-white { color: white; } .menu__link.color-white::before { border-top: solid 2px var(--neutral-0); border-right: solid 2px var(--neutral-0); } .menu__link:hover::before { transform: translateX(4px) translateY(-50%) rotate(45deg); } .sticky-top.custom { top: 100px !important; } .modal-counter .counter-card { padding: 20px; height: 100%; background-color: var(--green-1); display: block; } .gradient-box { background: linear-gradient(105deg, #054BBD 7.02%, #1D7D3C 82.21%); color: white; width: fit-content; padding: 12px 16px; margin-bottom: 24px; } .counter-text { font-size: 24px !important; line-height: 1.3 !important; margin-bottom: 8px; } #helioszModal2 { z-index: 999999999 !important; } #helioszModal2 .modal-body { background-color: var(--green-3) !important; padding: unset; } #helioszModal2 .btn-close { --bs-btn-close-bg: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI4IiBoZWlnaHQ9IjI4IiByeD0iMTQiIGZpbGw9IiNFQ0VERUUiLz4KPHBhdGggZD0iTTE4LjI5MjkgOC4yOTI4OUMxOC42ODM0IDcuOTAyMzcgMTkuMzE2NCA3LjkwMjM3IDE5LjcwNyA4LjI5Mjg5QzIwLjA5NzUgOC42ODM0MiAyMC4wOTc1IDkuMzE2NDMgMTkuNzA3IDkuNzA2OTZMMTUuNDE0IDEzLjk5OTlMMTkuNzA3IDE4LjI5MjlDMjAuMDk3NSAxOC42ODM0IDIwLjA5NzUgMTkuMzE2NCAxOS43MDcgMTkuNzA3QzE5LjMxNjQgMjAuMDk3NSAxOC42ODM0IDIwLjA5NzUgMTguMjkyOSAxOS43MDdMMTMuOTk5OSAxNS40MTRMOS43MDY5NiAxOS43MDdDOS4zMTY0MyAyMC4wOTc1IDguNjgzNDIgMjAuMDk3NSA4LjI5Mjg5IDE5LjcwN0M3LjkwMjM3IDE5LjMxNjQgNy45MDIzNyAxOC42ODM0IDguMjkyODkgMTguMjkyOUwxMi41ODU5IDEzLjk5OTlMOC4yOTI4OSA5LjcwNjk2QzcuOTAyMzcgOS4zMTY0MyA3LjkwMjM3IDguNjgzNDIgOC4yOTI4OSA4LjI5Mjg5QzguNjgzNDIgNy45MDIzNyA5LjMxNjQzIDcuOTAyMzcgOS43MDY5NiA4LjI5Mjg5TDEzLjk5OTkgMTIuNTg1OUwxOC4yOTI5IDguMjkyODlaIiBmaWxsPSIjNjY2RDc0Ii8+Cjwvc3ZnPgo=) !important; width: 24px !important; height: 24px !important; background-size: cover; top: 10px !important; } #helioszModal2 .close-container { position: absolute; top: 16px; right: 16px; } .model-inner-body { padding: 48px 38px; background-color: white; margin: 8px; border-radius: 4px; } .middle-line { border-left: 2px dotted #c6c6c6; position: absolute; } .new-model-left { padding-right: 32px; } .new-model-right { padding-left: 32px; } #helioszModal2 .modal-dialog { max-width: 1250px !important; } @media (max-width:1275px) { #helioszModal2 .modal-dialog { max-width: 1200px !important; } } @media (max-width:1200px) { #helioszModal2 .modal-dialog { max-width: 1100px !important; } .middle-line { border-left: unset; position: absolute; } #helioszModal2 .gradient-effect { margin: unset; } } @media (max-width:1100px) { #helioszModal2 .modal-dialog { max-width: 1000px !important; } } @media (max-width:1000px) { #helioszModal2 .modal-dialog { max-width: 900px !important; } } @media (max-width:900px) { #helioszModal2 .modal-dialog { max-width: 800px !important; } .new-model-left { padding-right: 12px; } .new-model-right { padding-left: 12px; } } @media (max-width:850px) { #helioszModal2 .modal-dialog { max-width: max-content !important; } } @media (max-width:768px) { .model-inner-body { padding: 24px 24px; } #helioszModal2 .num-count-cst { font-size: 4vw !important; } } @media (max-width:576px) { #helioszModal2 .btn-close { width: 16px !important; height: 16px !important; } #helioszModal2 .num-count-cst { font-size: 28px !important; } .model-inner-body { padding: 24px 8px; } } /* Optivos */ .heading-variant-2 { color: var(---text--primary); font-weight: 600; } .heading-variant-2 span { color: var(--green-6); } .title-desc { color: var(---text--secondary); font-size: 18px; } .optivos-industries-btn { background-color: unset; font-size: 24px; font-weight: 300; border: unset; width: 100%; background: linear-gradient(90deg, #ECEDEE 0%, rgba(236, 237, 238, 0.00) 100%); text-align: start; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; } .optivos-industries-btn:hover { background: linear-gradient(90deg, #dfe3e6 0%, rgba(223, 227, 230, 0.2) 100%); } .optivos-industries-btn.active { background: linear-gradient(105deg, #054BBD 7.02%, #1D7D3C 82.21%) !important; color: white; } .optivos-industries-btn img { opacity: 0; } .optivos-industries-btn.active img { opacity: 100%; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7493%) hue-rotate(280deg) brightness(108%) contrast(102%); } .industries-content p { color: var(---text--primary); padding-top: 24px; font-size: 18px; } .industries-content img { opacity: 0; transform: translateY(20px) scale(0.98); transition: opacity 0.5s ease, transform 0.5s ease; } .industries-content.active img { opacity: 1; transform: translateY(0) scale(1); } @media (max-width:1200px) { .optivos-industries-btn { font-size: 20px; padding: 12px 24px; } } @media (max-width:576px) { .optivos-industries-btn.active img { opacity: 100%; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7493%) hue-rotate(280deg) brightness(108%) contrast(102%); transform: rotate(90deg); } .industries-content p { color: var(---text--primary); padding-top: 12px; font-size: 16px; } .optivos-industries-btn { font-size: 18px; padding: 12px 16px; } } /* ========================================= ROOT VARIABLES ========================================= */ :root { /* --header-height: 80px; */ --primary-color: #111827; --secondary-color: #6b7280; --bg-color: #ffffff; --container-radius: 24px; --transition-speed: 0.35s; } /* ========================================= GLOBAL ========================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--primary-color); background: var(--bg-color); } img { max-width: 100%; display: block; } /* ========================================= HEADER ========================================= */ /* .site-header { height: var(--header-height); position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: white; transform: translateY(-100%); transition: transform .3s ease; } */ .site-header.is-visible { transform: translateY(0); } /* .navbar { height: var(--header-height); display: flex; align-items: center; } */ /* ========================================= INTRO SECTION ========================================= */ .capability-intro { padding-top: 80px; /* padding-bottom: 80px; */ text-align: center; } .capability-intro h1 { max-width: 900px; font-size: clamp(42px, 5vw, 72px); line-height: 1.05; font-weight: 700; } /* ========================================= CAPABILITIES SECTION ========================================= */ .capabilities-section { position: relative; padding-bottom: 50px; } .capabilities-pin-wrapper { position: relative; } /* ========================================= TABS ========================================= */ .capability-tabs-wrapper { overflow: hidden; } .capability-tabs { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; } .capability-tabs::-webkit-scrollbar { display: none; } .capability-tab { border: 0; background: none; padding: 12px 20px; white-space: nowrap; cursor: pointer; color: var(---text--secondary); position: relative; } .capability-tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2.5px; width: 100%; background: var(--green-6); transform: scaleX(0); transform-origin: left; transition: .3s ease; } .capability-tab.active { color: #111; background-color: var(--green-1) !important; } .capability-tab.active::after { transform: scaleX(1); } .capability-tab:hover { background-color: var(--green-1); } /* ========================================= CONTENT AREA ========================================= */ .capability-content { /* min-height: 500px; */ padding: 30px; margin-top: 32px; background-color: white; border-radius: 16px; box-shadow: 0 0 0 12px var(--neutral-1); } .capability-copy { max-width: 550px; } .capability-copy p { color: var(---text--primary); font-size: 18px; } .capability-button { margin-top: 30px; } /* ========================================= VISUAL AREA ========================================= */ .capability-visual { width: 100%; min-height: 420px; display: flex; align-items: center; justify-content: center; } .capability-visual img { width: 100%; max-width: 650px; border-radius: var(--container-radius); } /* ========================================= NEXT SECTION ========================================= */ .next-section { min-height: 700px; padding: 100px 0; background: #f5f5f5; } /* ========================================= TABLET ========================================= */ @media(max-width:991px) { .capability-content { min-height: auto; padding-top: 40px; } .capability-visual { margin-top: 50px; min-height: auto; } } /* ========================================= MOBILE ========================================= */ @media(max-width:767px) { .capability-intro { padding-top: 40px; padding-bottom: 0; } .capability-tabs { gap: 10px; } .capability-tab { padding: 10px 14px; } } .capability-tab { position: relative; display: flex; flex-direction: column; gap: 10px; background: none; border: 0; cursor: pointer; } .tab-title { font-size: 16px; } .tab-range { width: 100%; height: 4px; background: #ddd; overflow: hidden; border-radius: 10px; } .tab-progress { display: block; height: 100%; width: 0%; background: #111; border-radius: 10px; } .capability-tab.active .tab-title { font-weight: 700; } #eventModal { z-index: 999999999 !important; } #eventModal .modal-dialog { max-width: 500px !important; } #optivosModal .modal-body { background-color: var(--green-3) !important; padding: unset; } #optivosModal .btn-close { --bs-btn-close-bg: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI4IiBoZWlnaHQ9IjI4IiByeD0iMTQiIGZpbGw9IiNFQ0VERUUiLz4KPHBhdGggZD0iTTE4LjI5MjkgOC4yOTI4OUMxOC42ODM0IDcuOTAyMzcgMTkuMzE2NCA3LjkwMjM3IDE5LjcwNyA4LjI5Mjg5QzIwLjA5NzUgOC42ODM0MiAyMC4wOTc1IDkuMzE2NDMgMTkuNzA3IDkuNzA2OTZMMTUuNDE0IDEzLjk5OTlMMTkuNzA3IDE4LjI5MjlDMjAuMDk3NSAxOC42ODM0IDIwLjA5NzUgMTkuMzE2NCAxOS43MDcgMTkuNzA3QzE5LjMxNjQgMjAuMDk3NSAxOC42ODM0IDIwLjA5NzUgMTguMjkyOSAxOS43MDdMMTMuOTk5OSAxNS40MTRMOS43MDY5NiAxOS43MDdDOS4zMTY0MyAyMC4wOTc1IDguNjgzNDIgMjAuMDk3NSA4LjI5Mjg5IDE5LjcwN0M3LjkwMjM3IDE5LjMxNjQgNy45MDIzNyAxOC42ODM0IDguMjkyODkgMTguMjkyOUwxMi41ODU5IDEzLjk5OTlMOC4yOTI4OSA5LjcwNjk2QzcuOTAyMzcgOS4zMTY0MyA3LjkwMjM3IDguNjgzNDIgOC4yOTI4OSA4LjI5Mjg5QzguNjgzNDIgNy45MDIzNyA5LjMxNjQzIDcuOTAyMzcgOS43MDY5NiA4LjI5Mjg5TDEzLjk5OTkgMTIuNTg1OUwxOC4yOTI5IDguMjkyODlaIiBmaWxsPSIjNjY2RDc0Ii8+Cjwvc3ZnPgo=) !important; width: 24px !important; height: 24px !important; background-size: cover; top: 10px !important; } #eventModal .btn-close { --bs-btn-close-bg: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI4IiBoZWlnaHQ9IjI4IiByeD0iMTQiIGZpbGw9IiNFQ0VERUUiLz4KPHBhdGggZD0iTTE4LjI5MjkgOC4yOTI4OUMxOC42ODM0IDcuOTAyMzcgMTkuMzE2NCA3LjkwMjM3IDE5LjcwNyA4LjI5Mjg5QzIwLjA5NzUgOC42ODM0MiAyMC4wOTc1IDkuMzE2NDMgMTkuNzA3IDkuNzA2OTZMMTUuNDE0IDEzLjk5OTlMMTkuNzA3IDE4LjI5MjlDMjAuMDk3NSAxOC42ODM0IDIwLjA5NzUgMTkuMzE2NCAxOS43MDcgMTkuNzA3QzE5LjMxNjQgMjAuMDk3NSAxOC42ODM0IDIwLjA5NzUgMTguMjkyOSAxOS43MDdMMTMuOTk5OSAxNS40MTRMOS43MDY5NiAxOS43MDdDOS4zMTY0MyAyMC4wOTc1IDguNjgzNDIgMjAuMDk3NSA4LjI5Mjg5IDE5LjcwN0M3LjkwMjM3IDE5LjMxNjQgNy45MDIzNyAxOC42ODM0IDguMjkyODkgMTguMjkyOUwxMi41ODU5IDEzLjk5OTlMOC4yOTI4OSA5LjcwNjk2QzcuOTAyMzcgOS4zMTY0MyA3LjkwMjM3IDguNjgzNDIgOC4yOTI4OSA4LjI5Mjg5QzguNjgzNDIgNy45MDIzNyA5LjMxNjQzIDcuOTAyMzcgOS43MDY5NiA4LjI5Mjg5TDEzLjk5OTkgMTIuNTg1OUwxOC4yOTI5IDguMjkyODlaIiBmaWxsPSIjNjY2RDc0Ii8+Cjwvc3ZnPgo=) !important; width: 12px !important; height: 12px !important; background-size: cover; } #optivosModal .close-container, #eventModal .close-container { position: absolute; top: 16px; right: 16px; } .model-inner-body { padding: 48px 38px; background-color: white; margin: 8px; border-radius: 4px; } .middle-line { border-left: 2px dotted #c6c6c6; position: absolute; } .new-model-left { padding-right: 32px; } .new-model-right { padding-left: 32px; } #optivosModal .modal-dialog { max-width: 1250px !important; } @media (max-width:1275px) { #optivosModal .modal-dialog { max-width: 1200px !important; } } @media (max-width:1200px) { #optivosModal .modal-dialog { max-width: 1100px !important; } .middle-line { border-left: unset; position: absolute; } #optivosModal .gradient-effect { margin: unset; } } @media (max-width:1100px) { #optivosModal .modal-dialog { max-width: 1000px !important; } } @media (max-width:1000px) { #optivosModal .modal-dialog { max-width: 900px !important; } } @media (max-width:900px) { #optivosModal .modal-dialog { max-width: 800px !important; } .new-model-left { padding-right: 12px; } .new-model-right { padding-left: 12px; } } @media (max-width:850px) { #optivosModal .modal-dialog { max-width: max-content !important; } } @media (max-width:768px) { .model-inner-body { padding: 24px 24px; } .capabilities-section { padding-bottom: 30px; } #optivosModal .num-count-cst { font-size: 4vw !important; } } .optivo-hero-head { font-size: 35px; max-width: 650px; } .openOptivoFaqModal img { width: 70px; height: 70px; } @media (max-width:576px) { #optivosModal .btn-close, #eventModal .btn-close { width: 16px !important; height: 16px !important; } #optivosModal .num-count-cst { font-size: 28px !important; } .model-inner-body { padding: 24px 8px; } .optivo-hero-head { font-size: 24px !important; } .openOptivoFaqModal img { width: 60px; height: 60px; } .capability-content { padding: 16px 4px; margin: 24px 8px; background-color: white; border-radius: 8px; box-shadow: 0 0 0 8px var(--neutral-1); } } .floating-faq { position: fixed; bottom: 90px; right: 10px; } .floating-faq button { background: unset !important; outline: 0 !important; border: unset; } .new-testimonial img { width: 50px; } .new-testimonial .num-count-cst { font-size: 20px; } .new-testimonial p { font-size: 16px; } .new-testimonial .counter-card { padding: 16px; } .optivo-desc { font-size: 16px; } /* ========================================= Comparison Wrapper ========================================= */ .comparison-wrapper { width: 100%; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } /* Scrollbar */ .comparison-wrapper::-webkit-scrollbar { height: 6px; } .comparison-wrapper::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .25); border-radius: 10px; } /* ========================================= Main Comparison Layout ========================================= */ .comparison-table { display: flex; flex-direction: column; min-width: 1000px; } .comparison-row { display: grid; grid-template-columns: minmax(220px, 22%) minmax(430px, 43%) minmax(350px, 35%); align-items: stretch; } .comparison-cell { position: relative; min-width: 0; } /* ========================================= Feature Content ========================================= */ .feature-item { display: flex; align-items: flex-start; gap: 12px; } .feature-item img { width: 20px; height: 20px; flex-shrink: 0; } .feature-item p { margin: 0; } /* ========================================= Title Column ========================================= */ .title-column { color: white; font-size: 18px; overflow-wrap: anywhere; padding: 16px; display: flex; align-items: center; } .bt1 { border-top: 1px solid #ffffff40; } .bb1 { border-bottom: 1px solid #ffffff40; } /* ========================================= Header ========================================= */ .comparison-header { align-items: center; } /* ========================================= Desktop Hover ========================================= */ @media(min-width:992px) { .comparison-row:hover .comparison-cell { transition: .25s ease; } } /* ========================================= Tablet + Mobile ========================================= */ @media(max-width:991.98px) { .title-desc { font-size: 16px; } /* Total scroll width Creates horizontal scrolling */ .comparison-table { min-width: 1200px; } .comparison-row { grid-template-columns: minmax(50px, 15%) minmax(250px, 42.5%) minmax(250px, 42.5%) } /* Sticky left column */ /* Header stays above rows */ .comparison-header .title-column { z-index: 60; } } /* ========================================= Small Mobile ========================================= */ @media(max-width:575.98px) { .comparison-table { min-width: 900px; } /* .comparison-row { grid-template-columns: 20vw 60vw 20vw; } */ } .comp-tabl { background-image: url('../../assets/img/table-bg.webp'); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 50px 0; } .optivos-column h3, .optivos-column p { color: white; padding: 16px; } .optivos-column { border: 1px solid #ffffff30; background-color: #ffffff12; } .others-column h3, .others-column p { color: #ffffff80; font-weight: 400 !important; padding: 16px; } .tick-box { padding: 16px; border-right: 1px solid #ffffff30; background-color: #ffffff12; height: -webkit-fill-available; display: flex; align-items: center; } .promotion-bar-v2 { background-color: #001526; padding: 64px 0 64px 64px; display: flex; align-items: center; justify-content: space-between; border-radius: 24px; } .promotion-bar-v2 h2 { color: white; max-width: 600px; } .promotion-bar-v2 .promotion-content { font-size: 18px; text-align: start; color: var(--neutral-2); margin-bottom: 12px; max-width: 700px; } .marketing-flow { mix-blend-mode: lighten; } @media (max-width:992px) { .promotion-bar-v2 { padding: 48px; border-radius: 16px; display: flex; flex-direction: column; align-items: end; } } @media (max-width:768px) { .promotion-bar-v2 { padding: 24px; } } .why-optivos { overflow: hidden; background-image: url('../../assets/img/why-choose-optivos.webp'); background-position: center center; background-repeat: no-repeat; background-size: cover; } .animation-wrapper { position: relative; height: 650px; } .feature-card { position: absolute; width: 350px; padding: 24px; color: #fff; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.40); background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(70px); } .feature-card p { margin-bottom: unset; } .card-1 { top: 100px; left: 150px; } .card-2 { top: 100px; right: 150px; } .card-3 { bottom: 90px; left: 150px; } .card-4 { bottom: 60px; right: 150px; } /* Tablet & Mobile */ @media(max-width:991px) { .animation-wrapper { height: auto; display: flex; flex-direction: column; gap: 20px; } .bg-placeholder { display: none; } .feature-card { position: relative; inset: auto; width: 100%; } } .enterprise-section { overflow: hidden; } .horizontal-wrapper { overflow: hidden; width: 100%; } .horizontal-track { display: flex; gap: 4px; width: max-content; } .enterprise-card { margin: 12px; max-width: 274px; border-radius: 16px; border: 1px solid #FFF; background: #F2F2F2; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.20); } .enterprise-card-img { border-radius: 16px; } .ent-content { background-color: #F2F2F2; padding: 16px; } .enterprise-card img { width: 70px; } .enterprise-card h5 { margin-bottom: 12px; color: var(---text--primary); } .enterprise-card p { margin: 0; color: var(---text--secondary); } @media (max-width:992px) { .enterprise-card { margin: 0; max-width: 100%; border-radius: 12px; border: 1px solid #FFF; background: #F2F2F2; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.20); height: 100%; } .enterprise-card-img { border-radius: 12px; } .enterprise-card h5 { font-size: 16px !important; margin-bottom: 6px; } .enterprise-card p { font-size: 14px !important; } } @media (max-width:992px) { .enterprise-card { margin: 0 20px; } } .contact-details2 .detail a, .contact-details2 .detail { color: white; text-decoration: unset; } .contact-details2 .title { color: var(--neutral-2); font-size: var(--label-1-regular); font-weight: 400 !important; } .contact-details2 .detail a:hover { text-decoration: underline; } .contact-details2 { display: flex; align-items: center; } .footer-ul { display: flex; align-items: center; gap: 24px; } @media (max-width:576px) { .footer-ul { display: block; align-items: center; gap: 12px; } .contact-details2 img { width: 40px; } } .services-bg-1.home-rev2 { height: auto !important; background-color: var(--primary-9) !important; background-image: unset; padding-bottom: 24px; } .default-opacity { opacity: 0.5; transition: all; } .default-opacity:hover { opacity: 1; transition: all; transform: scale(1.01); } .hero-card-1-hub { position: absolute; top: -106%; left: 0; z-index: 0; } .hero-card-2-hub { position: absolute; bottom: 0; left: 10px; z-index: 0; } .hero-card-3-hub { position: absolute; left: -100%; bottom: 0; } .hero-card-4-hub { position: absolute; left: 0; bottom: 106%; } .hero-card-5-hub { position: absolute; left: 0; bottom: 187%; } .hero-card-6-hub { position: absolute; top: -130%; right: 0; z-index: 0; } .hero-card-7-hub { position: absolute; bottom: 40px; right: 10px; z-index: 0; } .hero-card-8-hub { position: absolute; right: -100%; bottom: 0; } .hero-card-9-hub { position: absolute; right: 0; bottom: 106%; } .hero-card-10-hub { position: absolute; right: 0; bottom: 207%; } @media (max-width:1400px) { .hero-card-2-hub { position: absolute; bottom: 0; left: -60px; z-index: 0; } .hero-card-7-hub { position: absolute; bottom: 40px; right: -90px; z-index: 0; } } @media (max-width:1200px) { .hero-card-2-hub { position: absolute; bottom: 0; left: -140px; z-index: 0; } .hero-card-7-hub { position: absolute; bottom: 40px; right: -170px; z-index: 0; } } @media (max-width:992px) { .hero-card-2-hub, .hero-card-7-hub { display: none; } .capability-copy p { color: var(---text--primary); font-size: 15px; } } #book-a-demo-Modal .form-control, #book-a-demo-Modal .form-select { padding: 8px 12px !important; } #book-a-demo-Modal .form-control, #book-a-demo-Modal .form-select { font-size: 14px !important; } #book-a-demo-Modal .form-label { font-size: 13px !important; } .support-text-btn { color: rgba(255, 255, 255, 0.804); font-size: 18px; } @media (max-width:576px) { .dark-logo, .light-logo { width: 100px; } .support-text-btn { color: rgba(255, 255, 255, 0.804); font-size: 15px; } } .jconfirm { z-index: 99999999999 !important; } .jconfirm .jconfirm-box { padding: 20px 20px 0 !important; } #what-sets-us-apart .table { --bs-table-bg: unset !important; --bs-table-color: white !important; } #what-sets-us-apart .table td:nth-child(2), #what-sets-us-apart .table th:nth-child(2) { background-color: #ffffff12; } #what-sets-us-apart .table td:nth-child(2) img { width: 15px; height: 15px; } #what-sets-us-apart .table th:nth-child(2) img { width: 19px; height: 19px; align-self: center; }