body:has(.navbar-collapse.collapse.show) {
overflow: hidden;
}
/* Header */
.left_nav {
gap: 32px;
}
header .op_container {
padding-block: 22px 20px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.05);
backdrop-filter: blur(30px);
}
header .navbar {
z-index: 99;
}
.custom-logo {
max-width: 136px;
width: 100%;
height: auto;
object-fit: cover;
}
#menu-left-menu {
gap: 10px;
}
#menu-right-menu {
gap: 16px;
}
#primaryNavbarRight {
gap: 32px;
}
header .nav-link {
padding: 10px 12px !important;
color: var(--op-heading-color);
}
header .nav-item:hover .nav-link,
.mega_link:hover a {
color: var(--op-primary-color);
}
.navbar-nav .nav-link.active-item{
color: var(--op-primary-color);
}
header .left_nav .nav-link {
font-weight: 600;
}
header .right_nav .nav-link {
font-weight: 500;
line-height: 125%;
}
header .right_nav a.op_btn {
width: fit-content;
}
/* Mega menu */
/* ========== Mega Menu Base ========== */
.nav-item.has-mega-menu,
.has-mega-menu {
/* position: relative; */
}
.nav-item.has-mega-menu a.mega-toggle {
outline: none!important;
position: relative;
}
.nav-item.has-mega-menu a.mega-toggle:after {
content: "";
position: absolute;
right: -5px;
top: 18px;
background-image: url('data:image/svg+xml,');
height: 6px;
width: 10px;
background-repeat: no-repeat;
transform: rotate(0deg);
transition: transform 0.2s ease;
}
.nav-item.has-mega-menu:hover a.mega-toggle:after {
background-image: url('data:image/svg+xml,');
transform: rotate(-180deg);
}
.mega-menu-panel {
position: absolute;
top: 105%;
/* left: -43rem; */
right: 7vw;
width: 58vw;
background: #fff;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition:
opacity 0.2s ease,
transform 0.2s ease,
visibility 0.2s ease;
z-index: 999;
border-radius: 12px;
}
.mega-menu-panel.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mega_menu_items{
row-gap: 1rem;
}
/* Grid */
/* Column */
.mega_col a {
text-decoration: none;
color: inherit;
}
/* Design style */
.mega_col h4 {
color: var(--op-seconday-color);
font-weight: 600;
margin-bottom: 18px;
font-size: 18px;
}
.mega_col ul {
color: var(--op-subheading-color-2);
font-weight: 500;
line-height: normal;
list-style: none;
padding: 0;
margin: 0;
}
.mega_col li {
margin-bottom: 12px;
}
.mega-inner {
max-width: 1200px; /* container width */
margin: 0 auto;
padding: 30px 40px;
/* border-radius: 12px; */
box-shadow: 2px 3px 30px 0 rgba(0, 0, 0, 0.15);
}
/* Featured card */
.mega_card {
position: relative;
background: #d9d9d9;
border-radius: 8px;
aspect-ratio: 16/9;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: start;
flex-direction: column;
justify-content: end;
padding: 16px 14px;
}
.mega_card:before {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 33.23%, #000 100%);
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
border-radius: 8px;
}
.card_badge {
color: #003c71;
font-size: 12px;
line-height: normal;
padding: 4px 8px;
border-radius: 3px;
background: var(--op-light-blue-color);
}
.mega_card .card_link {
color: #fff;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 120%;
}
.mega_menu_head_container{
gap: 10px;
transform: translateX(-22px);
}
.mega_menu_head_container svg{
vertical-align: baseline;
}
/* Home */
/* Banner */
.banner_wrapper {
background: linear-gradient(180deg, rgba(227, 240, 255, 0) 0%, #e3f0ff 100%);
position: relative;
}
.home_banner_sec {
/* height: 85vh; */
padding-block: 7rem;
background-image: url("https://www.onpointinsights.us/wp-content/uploads/2026/01/numeric.svg");
background-position: bottom;
background-repeat: no-repeat;
}
/* .home_banner_sec:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
background-image: url(https://www.onpointinsights.us/wp-content/uploads/2026/01/numeric.svg);
} */
.banner_bg {
position: absolute;
bottom: 0;
left: 0;
}
.home_banner_sec h1 {
color: var(--op-heading-color);
/* font-size: 62px; */
line-height: normal;
position: relative;
}
.home_banner_sec .arrow_svg:before {
position: absolute;
content: "";
top: -2rem;
left: 55%;
width: 20vw;
height: 3rem;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
}
.home_banner_sec .arrow_svg {
position: relative;
}
.home_banner_sec h1 span {
font-size: 60px;
}
.home_banner_sec .intro_description {
font-size: 18px;
margin: 10px 0 0 0;
max-width: 700px;
margin-inline: auto;
}
.intro_description {
line-height: normal;
margin: 4px 0 0 0;
}
.home_banner_sec .text_badge {
margin-block: 44px 79px;
padding: 0.62vw 1.35vw;
font-size: 18px;
border-radius: 6px;
gap: 10px;
}
.text_slider {
height: 33px;
overflow: hidden;
}
.text_items {
height: 33px;
display: flex;
align-items: center;
white-space: nowrap;
}
.text_track {
display: flex;
flex-direction: column;
animation: slideUp 6s infinite;
}
@keyframes slideUp {
0%,
15% {
transform: translateY(0);
}
25%,
40% {
transform: translateY(-33px);
}
50%,
65% {
transform: translateY(-66px);
}
75%,
90% {
transform: translateY(-99px);
}
100% {
transform: translateY(-132px);
}
}
.text_badge span span {
font-weight: 700;
margin-inline: 4px;
}
.banner_learn_more {
font-size: 18px;
font-style: italic;
line-height: normal;
}
.banner_learn_more_link {
color: var(--OP---Primary, #2369d2);
text-decoration: none;
gap: 14px;
}
.home_banner_decor {
position: absolute;
left: 0;
top: 5vw;
width: 15.93vw;
height: 21.14vw;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.home_banner_decor:last-child {
left: auto;
right: 0;
}
/* Impact */
.sec_title {
margin-top: 6px;
line-height: normal;
}
.sec_title span {
font-size: 54px;
}
.impact_wrapper {
margin-block: 36px;
display: flex;
gap: 20px;
}
.impact_card {
position: relative;
flex: 1;
transition: flex 1.5s ease;
height: 461px;
overflow: hidden;
border-radius: 6px;
}
.impact_card:hover {
flex: 2;
}
.impact_card:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
transition: opacity 0.8s ease;
z-index: 1;
pointer-events: none;
}
.impact_card img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 6px;
transition:
transform 1.2s ease,
filter 1.2s ease;
will-change: transform, filter;
}
.impact_card:hover img {
transform: scale(1.3);
filter: blur(3px);
}
.impact_content {
position: absolute;
padding-inline: 3rem;
bottom: 36px;
left: 0;
z-index: 2;
gap: 12px;
transform: translateY(85px);
transition: transform 1.2s ease;
will-change: transform;
justify-self: anchor-center;
}
.impact_card:hover .impact_content {
transform: translateY(0);
}
.impact_desc {
opacity: 0;
transform: translateY(10px);
transition:
opacity 0.6s ease,
transform 0.6s ease;
transition-delay: 0.3s;
}
.impact_card:hover .impact_desc {
opacity: 1;
transform: translateY(0);
}
.impact_head {
position: relative;
font-size: 22px;
color: #fff;
}
.impact_head:before {
position: absolute;
content: "";
left: 0;
bottom: -15px;
width: 100%;
height: 1px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
#fff 47.6%,
rgba(255, 255, 255, 0) 100%
);
opacity: 0;
transition: opacity 0.6s ease;
}
.impact_card:hover .impact_head::before {
opacity: 1;
}
.impact_desc {
margin: 12px 0 0 0;
color: #fff;
line-height: normal;
}
/* About section */
.about_sec {
padding-block: 5rem;
}
.about_sec_left {
position: relative;
}
.about_sec_left img {
border-radius: 0 8px 8px 0;
}
.about_sec_left .op_btn {
position: absolute;
right: 33px;
bottom: 24px;
}
.about_sec_right {
padding-inline: 3.22vw;
padding-block: 3.59vw 4.84vw;
background-color: #f7faff;
border-radius: 8px 0 0 8px;
}
.as_feature_cards_container {
gap: 30px;
margin-top: 50px;
}
.as_feature_card {
gap: 14px;
border-radius: 8px;
border: 1px solid rgba(35, 105, 210, 0.1);
background: linear-gradient(275deg, #fff9ed 3.05%, #eaeeff 98.53%);
}
.as_fc_img img {
border-radius: 4px;
}
.as_fc_title {
color: #3c3c3c;
line-height: normal;
}
.as_fc_desc {
margin: 4px 0 0 0;
color: #707070;
font-size: 14px;
line-height: normal;
}
.op_divider {
margin-block: 55px 45px;
opacity: 1;
border-image: linear-gradient(
90deg,
rgba(190, 216, 255, 0),
rgba(190, 216, 255, 1),
rgba(190, 216, 255, 0)
)
1;
background: none;
}
.as_numbers_container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1.87vw;
}
.as_number {
color: var(--op-seconday-color);
font-size: 52px;
line-height: normal;
}
.as_number_head {
color: var(--op-seconday-color);
font-size: 20px;
line-height: normal;
}
.as_number_caption {
margin-top: 12px;
color: rgba(11, 76, 176, 0.9);
font-size: 14px;
line-height: normal;
border-radius: 4px;
background: rgba(226, 238, 255, 0.42);
padding: 7px 16px 8px 16px;
}
/* Our services section */
.our_services_sec {
background-image: url(https://www.onpointinsights.us/wp-content/uploads/2026/01/blue-decor-bg.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.os_services_container {
margin-top: 72px;
gap: 3.12vw;
}
.os_service_wrapper {
position: relative;
border-radius: 10px;
border: 1px solid #b3bad3;
background: linear-gradient(276deg, #fff9ed 0.49%, #eaeeff 99.72%);
padding: 2.6vw 2.08vw 2.6vw 2.6vw;
transition:
background 0.4s ease,
border-color 0.4s ease;
}
.os_service_wrapper:not(.service_wrapper_service_page):hover {
border-color: #dfc39a;
background: #fff9f0;
}
.os_service_wrapper:before {
content: "";
position: absolute;
top: 50%;
left: 46%;
width: 265px;
height: 396px;
background-image: url(https://www.onpointinsights.us/wp-content/uploads/2026/01/feature-card-decor.webp);
background-size: contain;
background-repeat: no-repeat;
border-radius: 4px;
transform: translate(-46%, -50%) rotate(7.99deg) scale(0);
opacity: 0;
transition:
transform 0.4s ease,
opacity 0.4s ease;
pointer-events: none;
}
.os_service_wrapper:hover:before {
transform: translate(-46%, -50%) rotate(7.99deg) scale(0.8);
opacity: 1;
}
.os_sc_title {
color: var(--op-heading-color);
font-size: var(--font-size-h5);
line-height: 130%;
transition: color 0.4s ease;
}
.os_sc_number {
color: var(--op-hover-color);
font-size: 70px;
line-height: normal;
transition: color 0.4s ease;
}
.os_service_wrapper:not(.service_wrapper_service_page):hover
:is(.os_sc_number, .os_sc_title) {
color: #684309;
}
.os_sc_desc {
margin: 6px 0 0 0;
}
.os_service_nav .nav {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 2.39vw;
}
.os_service_nav .nav-link {
position: relative;
padding: 0.93vw 0.52vw 1.04vw 0.52vw;
color: #353535;
/* font-size: 18px; */
line-height: 130%;
border-bottom: solid 1px #cbd2ea;
height: 100%;
}
.os_service_nav .nav-item:hover .nav-link {
color: var(--op-primary-color);
}
.os_service_nav .nav-item:hover .nav-link svg path {
fill: var(--op-primary-color);
}
.os_service_nav .nav-link:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 2px solid var(--op-primary-color);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
pointer-events: none;
}
.os_service_nav .nav-item:hover .nav-link:before {
transform: scaleX(1);
}
/* Technology Stack */
.technology_stack_sec_wrapper,
.we_help_sec {
background-image: url(https://www.onpointinsights.us/wp-content/uploads/2026/01/blue-decor-bg-2.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.technology_stack_sec {
background-image: url(https://www.onpointinsights.us/wp-content/uploads/2026/01/square-bg-decor.svg);
background-repeat: no-repeat;
background-position: center;
}
.ts_col {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4.27vw;
}
.ts_col:before {
/* content: "";
position: absolute;
left: 3vw;
top: 5vw;
width: 316px;
height: 100%;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
z-index: -1; */
content: "";
position: absolute;
left: 5vw;
top: 4vw;
width: 120px;
height: 100%;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
z-index: -1;
}
.ts_col:last-child:before {
left: 2vw;
top: -4vw;
rotate: 180deg;
}
.ts_col:last-child:after {
left: 7vw;
top: -4vw;
rotate: 180deg;
}
.ts_col:after {
content: "";
position: absolute;
left: 10vw;
top: 4vw;
width: 120px;
height: 100%;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
z-index: -1;
}
.ts_col .ts_logo {
grid-column: span 3;
}
.ts_col:first-child .ts_logo:is(:first-child, :last-child),
.ts_col:last-child .ts_logo:nth-child(2) {
place-self: end;
}
/* Industries */
.industries_sec {
position: relative;
background-color: #f7faff;
overflow: hidden;
}
.industries_wall_decor {
position: absolute;
content: "";
left: 0;
top: 50%;
transform: translateY(-50%);
width: 250px;
height: 1038px;
background-repeat: no-repeat;
background-position: left center;
}
.industries_wall_decor:nth-of-type(2) {
left: auto;
right: 0;
top: auto;
bottom: 50%;
rotate: 180deg;
background-position: right center;
}
.industries_card {
position: relative;
border-radius: 8px;
overflow: hidden;
}
.industries_card > img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
transition:
transform 0.8s ease,
filter 0.8s ease;
will-change: transform, filter;
}
.industries_card:hover > img {
filter: blur(2px);
transform: scale(1.01);
}
.industries_swiper {
margin-top: 55px;
margin-inline: calc(-9.5vw);
}
.ic_content {
position: absolute;
left: 50%;
bottom: 26px;
transform: translateX(-50%);
transform-origin: bottom center;
background-color: white;
padding: 16px 24px;
border-radius: 8px;
width: calc(100% - 26px);
transition: transform 0.8s cubic-bezier(0.22, 1.61, 0.36, 1);
overflow: hidden;
}
/* @keyframes icContentStretch {
0% {
transform: translateX(-50%) scaleY(1);
}
55% {
transform: translateX(-50%) scaleY(1.035);
}
100% {
transform: translateX(-50%) scaleY(1);
}
} */
.industries_card:hover .ic_content {
/* animation: icContentStretch 0.45s ease-out; */
transform: translateX(-50%) scaleY(1);
}
.ic_content_head {
color: var(--op-hover-color);
font-size: var(--font-size-h6);
line-height: 150%;
}
.ic_content_desc {
color: #636363;
line-height: 120%;
margin: 4px 0 0 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.8s ease;
}
.industries_card:hover .ic_content_desc {
max-height: 190px;
transition-duration: 0.8s;
}
.industries_card:not(:hover) .ic_content_desc {
transition-duration: 0.35s;
}
.swiper-navigation-icon {
display: none !important;
}
.industries_swiper :is(.swiper-button-prev, .swiper-button-next) {
position: static !important;
margin-top: 0;
}
:is(.swiper-button-prev, .swiper-button-next):before {
content: "";
background-image: url('data:image/svg+xml,');
width: 40px;
height: 40px;
rotate: 180deg;
z-index: 13;
}
.swiper-button-next:before {
rotate: 360deg;
}
:is(.industries_swiper, .our_solutions_swiper) .swiper_btn_container {
display: flex;
margin-top: 40px;
gap: 10px;
justify-content: center;
min-height: 40px;
}
/* Footer */
.site-footer {
background-color: #000e3a;
}
.site-footer :is(.ftr_para, h6, ul, a) {
color: #fff;
}
.ftr_container {
display: flex;
flex-direction: column;
gap: 53px;
}
.ftr_bg {
position: relative;
/* margin-top: -5rem; */
margin-inline: -9.5vw;
}
.ftr_bg:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(180deg, rgba(0, 14, 58, 0) 0%, #000e3a 100%);
}
.ftr_col_container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 50px;
}
.ftr_logo_container a:last-child {
border-left: 1px solid #dbdbdb;
margin-left: 16px;
padding-left: 16px;
}
.ftr_para {
color: #fff;
line-height: 130%;
margin: 0;
}
.social_icons {
margin-top: 12px;
gap: 25px;
}
.ftr_col_head {
font-size: 18px;
}
.ft_list {
margin-top: 12px;
}
.site-footer :is(li, li a) {
color: #cbd2ea !important;
}
.ftr_col_container.menus_container {
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.to_top_container {
margin-bottom: 26px;
}
.to_top_container:before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
background-color: white;
}
.to_top_container a {
background: #000e3a;
padding-inline: 18px;
z-index: 1;
}
.ftr_copyright {
margin-top: 26px;
padding-bottom: 50px;
}
.copyright_text p,
.ft_copyright_menu .menu-item a {
color: #f1f4ff !important;
font-size: var(--fs-14);
line-height: 125%;
}
.copyright_text {
text-align: center;
}
.ft_copyright_menu {
margin-top: 15px;
justify-content: center;
}
/* Data sources */
.data_sources_wrapper {
background-image: url(https://www.onpointinsights.us/wp-content/uploads/2026/01/data-source-bg.svg);
}
.data_sources,
.outcomes_sec {
background-image: url(https://www.onpointinsights.us/wp-content/uploads/2026/01/data-source-bg-decor.svg);
background-position: 65% 50%;
background-repeat: no-repeat;
}
.ds_grid {
display: grid;
grid-template-columns: 0.5fr 1.1fr 1.1fr;
margin-top: 53px;
gap: 6.3vw; /* 121px */
}
.ds_grid_item:first-child {
grid-row: span 2;
}
.ds_grid_item:last-child {
grid-row: span 2;
}
.ds_grid_item:nth-child(3) {
grid-column: 2;
grid-row: 2;
}
.ds_grid_item img {
width: 100%;
}
.ds_grid_item {
position: relative;
}
.ds_grid_item:is(:first-child, :nth-child(2), :nth-child(3)):before {
content: "";
background-image: url(https://www.onpointinsights.us/wp-content/uploads/2026/01/Connector-line-1.svg);
background-size: contain;
width: 5.93vw;
height: 14.11vw;
position: absolute;
left: 100%;
top: 50%;
background-repeat: no-repeat;
}
.ds_grid_item:nth-child(2):before {
top: 40%;
}
.ds_grid_item:nth-child(3):before {
top: -40%;
transform: scaleY(-1);
}
.ds_grid_item:nth-child(2):after {
position: absolute;
content: "";
left: 50%;
top: 99%;
width: 16px;
height: 6.3vw;
background-image: url(https://www.onpointinsights.us/wp-content/uploads/2026/01/Connector-line-2.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
/* **************
Life Sciences Page
****************/
/* How we help */
.we_help_sec .row {
margin-top: 2.6vw;
}
.wh_left_img img {
border-radius: 8px;
height: 100%;
width: 100%;
object-fit: cover;
}
.wh_right_content .wh_content {
margin: 0;
display: flex;
gap: 6px;
}
.wh_content svg {
margin-top: 5px;
flex-shrink: 0;
}
.wh_list {
margin-block: 10px 38px;
}
.wh_list li {
position: relative;
padding-left: 23px;
}
.wh_list li:before {
content: "";
position: absolute;
top: 4px;
left: 0;
background: url('data:image/svg+xml,');
width: 16px;
height: 16px;
background-repeat: no-repeat;
}
.wh_author_wrapper {
position: relative;
padding-left: 1.3rem;
/* border-left: solid 6px var(--op-medium-blue-color);
border-radius: 0 4px 4px 0; */
gap: 6px;
}
.wh_author_wrapper:before {
width: 6px;
height: 100%;
background-color: var(--op-medium-blue-color);
border-radius: 0 4px 4px 0;
content: "";
position: absolute;
top: 0;
left: 0;
}
.wh_author_txt {
font-size: 18px;
font-style: italic;
font-weight: 500;
margin-bottom: 6px;
line-height: 130%;
}
.wh_author_txt span {
font-weight: 700;
color: var(--op-hover-color);
}
.wh_author {
color: var(--op-subheading-color-2);
font-size: 18px;
font-style: italic;
font-weight: 500;
line-height: 140%;
}
/* Expertise */
.expertise_sec {
background-color: #f0f6fd;
position: relative;
}
.expertise_sec_inner {
background-image: url(https://www.onpointinsights.us/wp-content/uploads/2026/02/saqre-bg-decor.svg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.expertise_bg {
position: absolute;
top: 0;
left: 0;
}
.expertise_left_content,
.outcomes_img {
position: sticky;
top: 75px;
}
.expertise_card_item {
display: flex;
padding: 20px 22px 24px 24px;
align-items: flex-start;
gap: 20px;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 17px 0 rgba(35, 105, 210, 0.07);
}
.expertise_card_wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.56vw;
}
.expertise_card_item .expertise_card_title,
.osc_title {
font-size: 18px;
color: #353535;
font-weight: 600;
line-height: 130%;
}
.expertise_card_content ul {
margin: 12px 0 0 0;
padding-left: 15px;
color: var(--op-subheading-color-2);
line-height: 130%;
}
/* Our Solutions */
.our_solutions_swiper .swiper-wrapper {
min-height: 370px;
}
.our_solutions_swiper .swiper-wrapper .swiper-slide {
height: auto;
}
.our_solutions_card {
display: flex;
height: 100%;
padding: 26px 22px;
flex-direction: column;
justify-content: space-between;
border-radius: 10px;
background: linear-gradient(275deg, #fff6e5 3.05%, #e0e6ff 98.53%);
gap: 30px;
}
.osc_num {
color: rgba(11, 76, 176, 0.7);
font-size: var(--font-size-h1);
font-weight: 600;
line-height: 90%;
}
.osc_content {
padding: 18px 20px 22px 20px;
border-radius: 6px;
border: 1px solid #849fff;
background: #fff;
}
.osc_title {
color: #333;
line-height: normal;
}
.osc_description {
color: var(--op-subheading-color-2);
font-size: var(--fs-14);
line-height: normal;
border-top: 1px solid rgba(180, 208, 246, 0.4);
margin-top: 14px;
padding-top: 16px;
}
/* Let's Connect */
.lets_connect_sec .text_badge {
font-size: var(--font-size-h6);
line-height: normal;
background: var(--op-yellow);
}
.lets_connect_sec .sec_title {
margin-top: 12px;
}
.lets_connect_sec .sec_title span {
color: var(--op-yellow);
}
.lets_connect_sec .intro_description {
color: #cbd2ea;
}
.lets_connect_sec .op_btn.transparent_btn {
padding: 10px 16px 11px 18px;
border: 1px solid #ffffff;
margin-top: 40px;
}
/* Outcomes */
.outcomes_row {
margin-top: 2.91vw;
}
#accordionOutcomes .accordion-item {
margin-block: 22px;
/* padding: 30px 30px 24px 30px; */
/* padding: 1.56vw 1.56vw 1.25vw 1.56vw; */
border-radius: 12px;
border: 1px solid rgba(11, 76, 176, 0.6);
background: #fff;
}
/* #accordionOutcomes .accordion-item:has( .show) {
padding: 1.25vw 1.25vw 1.66vw 1.56vw;
} */
#accordionOutcomes .accordion-button {
padding: 1.56vw 1.56vw 1.25vw 1.56vw;
color: var(--op-seconday-color);
font-size: 18px;
line-height: 140%;
gap: 10px;
border-radius: 12px;
}
#accordionOutcomes .accordion-button:focus {
box-shadow: none;
}
#accordionOutcomes .accordion-button:not(.collapsed) {
background-color: transparent;
box-shadow: none;
/* padding-bottom: 0; */
}
#accordionOutcomes .accordion-button::after {
width: 2.12rem;
height: 2.12rem;
background-size: contain;
background-image: url('data:image/svg+xml,');
}
#accordionOutcomes .accordion-button.collapsed:hover::after {
background-image: url('data:image/svg+xml,');
transform: rotate(90deg);
}
#accordionOutcomes .accordion-button:not(.collapsed)::after {
transform: rotate(0deg);
background-image: url('data:image/svg+xml,');
}
#accordionOutcomes .accordion-body {
color: var(--op-subheading-color-2);
padding: 0 1.56vw 1.25vw 1.56vw;
line-height: 140%;
}
.outcomes_img img {
border-radius: 8px;
}
/* FAQs */
#accordionFaqs {
max-width: 1240px;
margin-top: 2.6vw;
}
#accordionFaqs .accordion-item {
position: relative;
border: 0;
border-bottom: solid 1px #cbd2ea;
border-radius: 0;
}
#accordionFaqs .accordion-item:has(.accordion-collapse.show) {
border-color: var(--op-primary-color);
}
#accordionFaqs .accordion-item:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 1px solid var(--op-primary-color);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
pointer-events: none;
}
#accordionFaqs .accordion-item:hover:before {
transform: scaleX(1);
}
#accordionFaqs .accordion-button {
padding: 16px 20px 12px 20px;
font-size: 20px;
color: var(--op-seconday-color);
line-height: 150%;
background: transparent;
box-shadow: none;
gap: 1rem;
transform: translateX(0);
transition: all 0.4s ease;
}
#accordionFaqs .accordion-item:hover .accordion-button,
#accordionFaqs .accordion-item .accordion-button:not(.collapsed) {
transform: translateX(3px);
color: var(--op-primary-color);
}
#accordionFaqs .accordion-item:hover .accordion-button:after {
transform: translateX(0);
transition: all 0.4s ease;
}
/* #accordionFaqs .accordion-item:hover .accordion-button:after,
#accordionFaqs .accordion-item .accordion-button:not(.collapsed):after {
transform: translateX(-3px);
} */
#accordionFaqs .accordion-button::after {
background-image: url('data:image/svg+xml,');
width: 1.87rem;
height: 1.87rem;
background-position: center;
background-size: contain;
}
#accordionFaqs .accordion-item:hover .collapsed::after {
background-image: url('data:image/svg+xml,');
}
#accordionFaqs .accordion-button:not(.collapsed)::after {
background-image: url('data:image/svg+xml,');
transform: rotate(-180deg) !important;
}
#accordionFaqs .accordion-body {
padding-block: 0 28px;
padding-inline: 20px;
color: var(--op-subheading-color-2);
}
/* Explore industries */
.explore_industries_sec {
background: linear-gradient(
180deg,
rgba(255, 249, 240, 0.7) 0%,
rgba(255, 249, 240, 0) 100%
);
}
.explore_industries_sec h5 {
color: var(--op-heading-color);
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-weight: 600;
line-height: normal;
}
.op_btn.transparent_btn.ei_cta {
color: var(--op-seconday-color) !important;
}
.ei_btns {
margin-top: 26px;
gap: 22px;
}
.ei_btns .btn {
display: inline-flex;
padding: 9px 26px 10px 26px;
border-radius: 8px !important;
border: 1px solid transparent;
backdrop-filter: blur(40px);
color: var(--op-seconday-color);
font-weight: 500;
line-height: normal;
align-items: center;
justify-content: center;
gap: 6px;
background:
linear-gradient(#ffffff, #ffffff) padding-box,
radial-gradient(
120% 150% at -10% -20%,
rgba(35, 105, 210, 0.8) 0%,
rgba(35, 105, 210, 0.25) 35%,
transparent 65%
)
border-box,
radial-gradient(
120% 150% at 110% 120%,
rgba(35, 105, 210, 0.4) 0%,
transparent 60%
)
border-box;
}
.ei_btns .btn:hover {
color: var(--op-primary-color);
}
.ei_btns .btn:hover svg path {
fill: var(--op-primary-color);
}
/* Media Queries */
@media (min-width: 1920px) {
/* Headaer */
header .left_nav .nav-link {
font-size: 18px;
}
.mega_col h4 {
font-size: 20px;
}
/* Home */
/* Baner */
.home_banner_sec h1 {
font-size: 70px;
}
.home_banner_sec h1 span {
font-size: 74px;
}
.home_banner_sec h1:before {
right: 36rem;
}
.home_banner_sec .intro_description,
.banner_learn_more {
font-size: 22px;
}
.intro_description {
font-size: 20px;
}
.home_banner_sec .text_badge {
font-size: 20px;
}
/* Impact */
.impact_head {
font-size: var(--font-size-h5);
}
/* About section */
.as_fc_title {
font-size: 18px;
}
/* Services section */
.os_service_wrapper:hover:before {
transform: translate(-46%, -50%) rotate(7.99deg) scale(1);
}
.os_sc_title {
font-size: 30px;
}
.os_sc_desc {
margin: 8px 0 0 0;
}
.os_service_nav .nav-link {
font-size: var(--font-size-h6);
}
/* Industries */
.industries_swiper {
margin-inline: calc(-12.5vw);
}
.ic_content_head {
font-size: 24px;
}
/* Data sources */
.ds_grid {
grid-template-columns: 0.6fr 1.3fr 1.3fr;
}
/* .ds_grid_item:nth-child(2):after {
top: 79%;
width: 24px;
height: 11.3vw;
} */
/* Footer */
.ftr_bg {
margin-inline: -12.5vw;
}
.ftr_col_head {
font-size: var(--font-size-h6);
}
/* **************
Life Sciences
************** */
/* Expertise */
.expertise_card_item .expertise_card_title,
.osc_title {
font-size: var(--font-size-h6);
}
/* Outcomes */
#accordionOutcomes .accordion-button {
font-size: 24px;
}
/* FAQs */
#accordionFaqs .accordion-button {
font-size: 22px;
}
/* Explore industries */
.ei_cta {
font-size: 18px;
}
}
@media (max-width: 1440px) {
header .left_nav .nav-link {
font-size: 14px;
}
}
@media (max-width: 1365px) {
#menu-left-menu {
margin-left: 1rem;
}
}
@media (max-width: 1330px) {
.op_container {
padding-inline: 7.5vw;
}
.ftr_bg {
margin-inline: -7.5vw;
}
}
/* Mobile behavior */
@media (max-width: 1200px) {
.ftr_col_container {
grid-template-columns: repeat(2, 1fr);
}
.navbar_mobile_main {
width: 100%;
}
#menu-right-menu,
#menu-left-menu {
margin-left: 0;
}
#menu-right-menu {
gap: 10px;
}
.right_nav {
margin-top: 10px;
}
.left_nav {
margin-top: 1rem;
}
.mega-menu-panel {
position: static;
box-shadow: none;
transform: none;
opacity: 1;
visibility: visible;
display: none;
width: 100%;
}
.mega-menu-panel.is-open {
display: block;
}
.mega-menu-panel {background: transparent;}
.mega-inner{padding: 1rem 2rem;box-shadow: none;background: transparent;}
}
@media (max-width: 1024px) {
/* Impact */
.sec_title span {
font-size: 46px;
}
.impact_content {
padding-inline: 1rem;
transform: translateY(7rem);
}
}
@media (max-width: 991px) {
.technology_stack_sec {
overflow: hidden;
}
.as_feature_cards_container {
margin-top: 35px;
}
.op_divider {
margin-block: 35px;
}
.as_number {
font-size: 42px;
}
.os_sc_number {
font-size: 50px;
}
/* Outcomes */
#accordionOutcomes .accordion-item {
padding: 1rem;
}
}
@media (max-width: 768px) {
.home_banner_sec {padding-block: 3rem;}
.nav-item.has-mega-menu a.mega-toggle:after {right: 0;}
.navbar-collapse.collapse {max-height: 60vh;overflow-y: scroll;scrollbar-width: none;}
/* Banner */
.home_banner_sec h1 span {
font-size: 40px;
}
.home_banner_decor {
display: none;
}
/* Impact */
.sec_title span {
font-size: 36px;
}
.impact_wrapper {
flex-direction: column;
}
.impact_card img {
max-height: 300px;
height: 100%;
}
.impact_content {
transform: translateY(0);
}
.impact_head:before,
.impact_desc {
opacity: 1;
}
/* About section */
.about_sec {
padding-block: 3rem;
padding-inline: 1rem;
}
.about_sec > .row {
margin: 0;
}
/* Technology Stack */
.ts_row {
gap: 12.2vw;
justify-content: center;
}
.ts_col {
/* display: flex; */
/* justify-content: center; */
gap: 20px;
/* overflow: auto; */
width: auto;
margin-inline: auto;
}
.ts_col .ts_logo {
max-width: 150px;
width: 100%;
grid-column: auto;
}
.ts_col:after,
.ts_col:before {
content: none;
}
/* Industries */
.industries_swiper {
margin-inline: calc(-1rem);
}
/* Footer */
.ftr_bg {
/* margin-top: -3rem; */
/* margin-inline: -1rem; */
}
/* **************
Life Sciences
************** */
/* How we help */
.we_help_sec .row {
margin-top: 2rem;
}
/* Expertise */
.expertise_card_wrapper {
grid-template-columns: 1fr;
gap: 1.5rem;
}
/* FAQs */
#accordionFaqs .accordion-button {
font-size: 16px;
}
}
@media (max-width: 520px) {
header .op_container {padding-inline: 15px;}
.navbar-collapse.collapse {max-height: 75vh;}
/* Banner */
.home_banner_sec h1 span {
font-size: 34px;
}
.home_banner_sec :is(.intro_description, .text_badge) {
font-size: 16px;
}
.home_banner_sec .text_badge {
margin-block: 40px 30px;
}
.os_sc_number {
font-size: 45px;
}
.os_service_wrapper:before {
content: none;
}
.os_service_nav .nav {
grid-template-columns: 1fr;
gap: 1rem;
}
.os_services_container {
gap: 2rem;
}
.os_service_wrapper {
padding: 1.5rem;
}
/* Impact */
.sec_title span {
font-size: 32px;
}
/* Technology Stack */
/* .ts_col {
justify-content: start;
} */
/* Footer */
.ftr_col_container {
grid-template-columns: 1fr;
}
}
@media (max-width: 380px) {
/* Footer */
.copyright_text p,
.ft_copyright_menu .menu-item a {
font-size: 12px;
}
}