@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700;900&display=swap');
 :root{
--bDarkBlue :#021849;
--bFadedBlue :#082860;
--bHighlight :#00FFEC;
--bGradientBlue :#0A4BF2;
--bGradientHighLight:#00FFEC;
--bLightGradient: linear-gradient(to right, var(--bGradientHighLight), var(--bGradientBlue));
--headerH: 88px;
 }

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ul,
li,
fieldset,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video{
  margin: 0;
  padding: 0;
  border: 0;}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section{
  display: block;}

body{
  font-family: 'poppins', Arial, Helvetica, Sans-Serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.2;}
  

body {
  background: var(--bDarkBlue);}

body[data-bg][data-base="none"] {
  background: var(--page-bg, var(--bDarkBlue));}

body[data-bg][data-base]:not([data-base="none"]) {
  background: linear-gradient(to bottom, var(--page-bg, var(--bDarkBlue)), var(--page-base, var(--bDarkBlue)));}

h1,
h2,
h3,
h4,
h5,
h6{
  font-family: 'Poppins';
  font-weight: 700;
  font-style: normal;}

.site-header {
  width: 100%;
  position:fixed;
  top:0;
  left:0;
  background:var(--bFadedBlue);
  z-index:10;}

.header-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 35px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;}

.navbar-brand img {
  width:100%;
  max-width:230px;
  height:auto;}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;}
  
.main-nav li{
  padding-left:35px;
  padding-right:35px;}

.main-nav a.nav-link {
  text-decoration: none;
  color: #fff;
  font-weight: 300;
  font-size:1.4em;}

.service-nav {
  display: flex;
  gap: 1.2rem;}
  
.service-nav a{
  display: flex;
  gap: 1rem;
  font-size:1.4em;
  font-weight:300;}
  
.service-nav .btn:hover {
  padding:5px 30px;
  border-radius: 6px;
  background:var(--bHighlight);
  color: var(--bDarkBlue);
  text-decoration: none;
  border:1px solid var(--bHighlight);}

.service-nav .btn {
  padding:5px 30px;
  border-radius: 6px;
  background:transparent;
  color: #fff;
  text-decoration: none;
  border:1px solid var(--bHighlight);}

.main-nav .nav-link {
  position: relative;
  display: inline-block;
  font-weight: 500;}
  
.main-nav .nav-link::after {
  content: "";
  border:none;
  border-top:2px solid;
  margin:0;
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 1px;
  transform: scaleX(0);     
  transform-origin: left;   
  transition: transform 420ms ease; 
  will-change: transform;
  color:var(--bHighlight);}

.main-nav .nav-link.active::after {
  transform: scaleX(1);}

.primeNav__link.active.show{
  color:#fff;}
  
.dropdown {
  position: relative; }                

.dropdown-menu {
  margin-top:20px!important;
  position: absolute;                             
  display: block !important;                   
  padding-left:0;
  padding-right:0;
  background: #fff;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  padding-top:20px!important;
  padding-bottom:20px!important;
  min-width: 250px;
  z-index: 1000;
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
  transform 280ms ease,
  opacity 280ms ease,
  visibility 0ms linear 280ms;  
  will-change: transform, opacity;}

.dropdown-menu li {
  padding-left:0px;
  padding-right:0px;}
 
.dropdown-menu.show {
  left:35px!important;
  transform: scaleY(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
   transform 680ms ease,
   opacity 680ms ease,
   visibility 0ms;}
 
.dropdown-item.subNavItem {
  padding: .6rem .75rem;}
  
.subNavItem__title {
  display:block;
  font-weight:700;
  line-height:1.25;
  font-size:1.25em; }
  
.subNavItem__desc  {
  display:block;
  font-size:.92rem;
  font-weight:400;
  opacity:.8;
  font-size:1.00em;
  line-height:1.25;
  margin-top:.15rem; }

.burger-menu {
  position: absolute!important;
  right: 50px;
  font-size: 28px;
  cursor: pointer;
  color: white;
  line-height: 1;}

#burgerNavStyle{
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  top:20px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1005;
  margin-right: 5px;}

#burgerNavStyle span{
  display: block;
  position: absolute;
  width: 100%;
  height: 6px;
  background-color:#fff;
  border-radius: 3px;
  transition: all 0.3s ease-in-out;}

#burgerNavStyle span:nth-child(1){
  top: 5px;}

#burgerNavStyle span:nth-child(2){
  top: 18px;}

#burgerNavStyle span:nth-child(3){
  top: 31px;}

#burgerNavStyle.active span:nth-child(1){
  transform: rotate(45deg);
  top: 18px;}

#burgerNavStyle.active span:nth-child(2){
  opacity: 0;}

#burgerNavStyle.active span:nth-child(3){
  transform: rotate(-45deg);
  top: 18px;}
 
.burger-menu {
  display: block;}

div.page-body {
  display:block;
  width:100%;
  margin-top:156px;}

footer {
  width:100%;
  display:block;
  padding-left:20px;
  padding-right:20px;}

.footerContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;  
  max-width: 1500px;
  margin: 0 auto;
  padding: 60px 0px;
  color: #fff;
  font-size: 0.95em;}

.footerinfo {
  flex: 0 0 40%;
  text-align: left;}

.footernav {
  flex: 0 0 60%;
  text-align: right;}

.footernav ul {
  list-style: none;
  margin: 0;
  padding: 0;}

.footernav ul li {
  display: inline-block;
  margin-left: 20px;}

.footernav ul li:first-child {
  margin-left: 0;}

.footernav a {
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s;}

.footernav a:hover {
  opacity: 0.7;}

.hero-glow {
  position: relative;
  background: 
  radial-gradient(ellipse 70% 60% at center, 
  rgba(2,24,73,0) 0%, 
  rgba(2,24,73,0) 40%, 
  #021849 100%),
  linear-gradient(to right, #00ffec 25%, #0a4bf2 90%);
  text-align: center;
  color: #fff;
  padding-top:10rem;
  padding-bottom:4rem;
  padding-left:1rem;
  padding-right:1rem;
  overflow: hidden;
  min-height: 400px;}

.hero-glow::after {
  content: "";
  position: absolute;
  top: 30%;  
  left: 50%;
  width: 200%;
  height: 550%;
  background:var(--bDarkBlue);  
  border-radius: 50% 50% 0 0;
  transform: translateX(-50%);
  z-index: 0;}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width:1200px;
  margin: 0 auto;
  padding-top:7rem;}
  
.hero-glow {
  display: flex;
  align-items: flex-end;  
  justify-content: center;}

.hero-inner {
  padding-bottom: 2rem;}
  
.hero-icon {
  margin-bottom: 1rem;}
  
.hero-icon img{
  max-width:60px;
  height:auto;}

.hero-header {
  font-size: 3.75em;   
  line-height: 1.167;
  font-weight: 300;
  padding-bottom: 1rem;}

.hero-header span {
  font-weight: 700;}

.hero-inner p {
  font-size: 1.625em; 
  line-height: 1.492;
  font-weight: 300;
  max-width: 700px;
  margin: 0 auto;padding-top:15px;}

.scroll-two-col-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;         
  margin: 0;           
  color: #fff;
  overflow: hidden;
  align-items: center;}

.scroll-two-col-left {
  flex: 0 0 40%;
  max-width: 40%;
  position: relative;
  overflow: hidden;
  padding-top: 130px;
  padding-bottom: 130px;}


.scroll-two-col-right {
  flex: 0 0 60%;
  max-width: 60%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;}

.scroll-two-col-right img {
  width: 100%;       
  height: auto;      
  display: block;
  object-fit: cover;}

.scroll-two-col-left-inner {
  padding-left: 150px;  
  padding-right: 1rem;  
  box-sizing: border-box;}

.scroll-two-col-headline {
  display: block;}

.scroll-two-col-headline .icon {
  display:block;
  margin-bottom: 0.5rem;}

.scroll-two-col-headline .fixed-text {
  display:block;
  font-size:2.8em;
  color: var(--bHighlight);
  font-weight: 700;}
 
.scrolling-list {
  height: 320px;  
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom,
   white calc(100% - 60px),
   transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
   mask-image: linear-gradient(to bottom,
   white calc(100% - 60px),
   transparent 100%);
   mask-repeat: no-repeat;
   mask-size: 100% 100%;}

.scrolling-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  animation: scroll-up 14s linear forwards;}

.scrolling-list li {
  font-size: 2.8em;
  font-weight:300;
  padding: 0.25rem 0;
  color: #fff;}

 
@keyframes scroll-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }  
}

.scroll-two-col-right {
  padding: 0;}

.scroll-two-col-right img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;}

.panel-divider-wrapper {
  max-width: 1600px;
  padding-left:50px;
  padding-right:50px;
  margin: 0 auto;  
  padding-top:20px;
  padding-bottom:20px;}

.panel-divider {
  position: relative;
  width: 100%;      
  height: 40px;}

.panel-divider::before,
.panel-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 47%;
  height: 2px;
  background: #fff;}

.panel-divider::before { left: 0; }
.panel-divider::after  { right: 0; }

.panel-divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -75%) rotate(45deg); 
  border-right: 2px solid var(--bHighlight);
  border-bottom: 2px solid var(--bHighlight);}

.pharma-section {
  color: #fff;
  padding: 60px 20px;}

.pharma-container {
  width:100%;
  max-width: 1240px;
  margin: 0 auto;}

.pharma-header {
  text-align: center;
  margin-bottom: 124px;
  margin-top:50px;}

.pharma-header .section-title {
  font-size: 3.75em;   
  line-height: 1.167;
  color: var(--bHighlight);
  font-weight: 700;
  margin-bottom: 20px;
  display:block;}

.pharma-header .section-subtitle {
  font-size: 1.625em; 
  line-height: 1.192;
  color: #fff;
  display:block;}

.pharma-body {
  display: flex;
  flex-wrap: nowrap;   
  align-items: center;
  justify-content: space-between; 
  gap: 40px;}


.pharma-left {
  flex: 0 0 calc(50% - 20px); 
  max-width: calc(50% - 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding:50px;
  border-radius:8px;
  background:var(--bFadedBlue);}

.pharma-right {
  flex: 0 0 calc(50% - 20px);
  max-width: calc(50% - 20px);}

.pharma-logo img {
  max-width: 240px;
  height: auto;
  margin-bottom: 10px;}

.pharma-logo .tagline {
  font-size: 1.4em;
  color: #eaeaea;
  margin-bottom: 40px;}

.pharma-categories {
  display: flex;
  justify-content: center;
  gap: 40px;
  font-size: 1.4rem;
  font-weight: 300;}

.pharma-categories span {
  position: relative;}

.pharma-categories span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 26px;
  background: var(--bHighlight);}

.pharma-content .icon img{
  display:block;
  max-width:50px;
  height:auto;}

.pharma-content .solutionheader {
  font-size: 3.75em;   
  line-height: 1.167;
  font-weight: 300;
  margin: 10px 0 15px;display:block;}

.pharma-content .solutionheader span {
  color: var(--bHighlight);
  font-weight: 700;display:block;}

.pharma-content p {
  font-size: 1.625em; 
  line-height: 1.192;
  margin-bottom: 20px;
  color: #eaeaea;}

.btn {
  display: inline-block;
  padding: 8px 30px;
  background: var(--bHighlight);
  color: var(--bDarkBlue);
  text-decoration: none;
  font-weight: 400;
  border-radius: 6px;
  font-size: 1.375em;
  transition: background 0.3s ease;}

.btn:hover {
  background: #00d9cf;}

.panel-carousel-section {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  padding-top: 80px;}

#panel-carousel {
  max-width: 1150px; 
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  padding-top: 40px;}

#panel-carousel .carousel-track {
  display: flex;
  min-height: 600px;
  align-items: center;
  transition: transform 0.5s ease;}

#panel-carousel .panel {
  flex: 0 0 360px;
  margin: 0 15px;
  height: 445px;
  background: var(--bFadedBlue);
  border-radius: 12px;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transform: scale(0.8);
  opacity: 0.6;
  transition: transform 0.4s ease, opacity 0.4s ease;
  padding: 30px;}

#panel-carousel .panel-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;}

#panel-carousel .panel img.panel-logo {
  max-width: 260px;
  height: auto;
  display: block;}

#panel-carousel p {
  font-size: 1.375em;
  line-height: 1.2;}

#panel-carousel .btn {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 30px;
  background: var(--bHighlight);
  color: var(--bDarkBlue);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.3s;
  font-size:  1.375em;
  font-weight: 400;}

#panel-carousel .btn:hover {
  background: #00d9cf;}

#panel-carousel .ribbon {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  background: var(--bHighlight);
  color: var(--bDarkBlue);
  padding: 8px 15px;
  font-weight: bold;
  font-size: 1.375em;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 3;}

#panel-carousel .panel.active {
  transform: scale(1.2);
  opacity: 1;
  z-index: 2;}

.panel-carousel-section .carousel-btn {
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  background: var(--bFadedBlue);
  border-radius: 50%;
  color: var(--bHighlight);
  font-size: 2.8em;
  width: 100px;
  height: 100px;
  font-weight: 300;
  cursor: pointer;
  z-index: 5;
  border: none;}

.panel-carousel-section .carousel-btn.prev { 
  left: -60px;}
  
.panel-carousel-section .carousel-btn.next { 
  right: -60px;}

.panel-carousel-section .carousel-btn:hover {
  background: var(--bHighlight);
  color: var(--bFadedBlue);
  opacity: .8;}

div.gradient {
  background: var(--bLightGradient);
  display:block;
  width:100%;
  padding-left:50px;
  padding-right:50px;}
    
div.gradient-container{
  width:100%;
  max-width:1200px;
  padding-top:90px;
  padding-bottom:90px;
  text-align:center;
  margin:0 auto;}
    
div.gradient-container header.gradient-header {
  font-weight:700;
  font-size: 3.75em; 
  line-height: 1.167;
  color:var(--bDarkBlue);}

div.gradient-container p {
  color:var(--bDarkBlue);
  font-weight:400;
  line-height: 1.167;
  font-size:3.75em;}

div.gradient-container.light-bold header.gradient-header {
  font-weight:300!important;}

div.gradient-container.light-bold p {
  color:var(--bDarkBlue);
  font-weight:700!important;}

.text-image {
  width: 100%;
  padding: 60px 20px;}

.text-image-container {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;}

.text-image-image,
.text-image-text {
  flex: 0 0 50%;
  max-width: 750px;}

.text-image-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;}

.text-image-text {
  display: flex;
  flex-direction: column;
  padding-left: 80px;
  padding-right: 0;}

.text-image.image-left .text-image-image {
  padding-right: 80px;
  order: 1;}

.text-image.image-left .text-image-text {
  padding-left: 0;
  order: 2;}

.text-image.image-right .text-image-image {
  padding-left: 80px;
  order: 2;}

.text-image.image-right .text-image-text {
  padding-right: 0;
  order: 1;}

.text-image-text .asterix {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;}

.text-image-text header.text-image-header {
  font-size: 3.75em;
  line-height: 1.167;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 20px;
  color:#FFF;
  text-align:left;}

.text-image-text header.text-image-header span {
  display: block;
  color: var(--bHighlight);
  font-weight: 700;}

.text-image-text p {
  font-size: 1.625em;
  line-height: 1.192em;
  margin-bottom: 25px;
  color: #FFF;
  text-align:left;}

.text-image-text .btn {
  display: inline-block;
  width:fit-content;
  padding: 12px 30px;
  background: var(--bHighlight);
  color: var(--bDarkBlue);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 400;
  transition: background 0.3s ease;}

.text-image-text .btn:hover {
  background: #00d9cf;}
.text-image-text p a{color:var(--bHighlight);
    text-decoration:none;
}
.home-client-panel {
  width: 100%;
  padding: 60px 20px;}

header.home-client-panel-header {
  display:block;
  font-size: 3.75em;
  line-height: 1.167;
  font-weight:700;
  text-align:center;
  color:var(--bHighlight);
  font-weight:700;
  margin-bottom:90px;}
  
.home-client-panel-container {
  max-width: 1500px;
  margin: 0 auto;
  align-items: center;}

.home-client-pane-container{
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;}

.home-client-pane-text,
.home-client-pane-client {
  flex: 0 0 50%;
  max-width: 700px;}

.home-client-pane-text {
  display: flex;
  flex-direction: column;
  padding-right: 40px;
  order: 1;}

.home-client-pane-client {
  display: flex;
  flex-direction: column;   
  align-items: center;      
  justify-content: center;  
  background: var(--bFadedBlue);
  border-radius: 6px;
  padding: 80px 50px;      
  text-align: center;
  order:2;}

.home-client-pane-client img {
  max-width: 240px;
  height: auto;
  margin-bottom: 40px;     
  display: block;}

.home-client-pane-client .quote {
  font-size: 1.625em; 
  line-height: 1.192;
  font-style: italic;     
  color: #FFF;
  display: block;}

.home-client-pane-text .asterix {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;}

.home-client-pane-text header.home-client-pane-header {
  font-size: 3.75em;   
  line-height: 1.167;
  font-weight: 300;
  margin-bottom: 20px;
  color:#FFF;text-align:left;}

.home-client-pane-text header.home-client-pane-header span {
  display: block;
  color: var(--bHighlight);
  font-weight: 700;}

.home-client-pane-text .btn {
  display: inline-block;
  width: fit-content;
  padding: 12px 30px;
  background: var(--bHighlight);
  color: var(--bDarkBlue);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 400;
  transition: background 0.3s ease;}
    
.home-client-pane-text .btn:hover {
  background: #00d9cf;}

.home-client-pane-text p {
  max-width:520px;
  font-size: 1.625em; 
  line-height: 1.192;
  margin-bottom: 25px;
  color: #FFF;
  text-align:left;}

section.text-row{
  display:block;
  width:100%;
  padding-left:50px;
  padding-right:50px;}

div.text-row-container {
  display:block;
  max-width:1500px;
  margin:0 auto;
  padding-top:80px;
  padding-bottom:80px;
  text-align:center;}

header.text-row-header {
  color:var(--bHighlight);
  font-weight:700;
  font-size: 3.75em;  
  line-height: 1.167;
  padding-bottom:30px;}
    
.text-row-container p{
  color:#FFF;
  font-weight:400;
  font-size:1.625em;
  line-height:1.2;
  padding-bottom:30px;
  max-width:1060px;
  display:block;
  margin:0 auto;}

.text-row-container .btn {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 30px;
  background: var(--bHighlight);
  color: var(--bDarkBlue);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.3s;
  font-size: 1.375em;
  font-weight: 400;}

.text-row-container .btn:hover {
  background: #00d9cf;}

.clientStories {
  padding: 100px 20px 50px 20px;}

.clientStory {
  background: var(--bFadedBlue);
  border-radius: 8px;
  max-width: 1260px;
  margin: 0px auto 100px auto;
  padding: 30px;}

.clientStory-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;}

.clientStory-left {
  flex: 0 0 30%;
  max-width: 30%;
  padding-right: 10px;
  border-right: 2px solid #FFF;
  text-align: left;
  padding-left:20px;}

.clientStory-logo {
  max-width: 200px;
  height: auto;
  margin-bottom: 40px;}

.clientStory-person {
  display:block;
  color:var(--bHighlight);
  font-size:1.375em;
  font-weight: 700;
  margin-bottom: 5px;}

.clientStory-position {
  font-size:1.375em;
  margin-bottom: 5px;
  color: #FFF;
  font-weight:300;
  margin-bottom:40px;}

.clientStory-company {
  font-size:1.375em;
  font-weight: 700;
  color: #FFF;}

.clientStory-right {
  flex: 0 0 70%;
  max-width: 70%;
  padding-left: 30px;
  text-align: left;
  border-left: 2px solid #FFF;
  margin-left:-2px;}

.clientStory-right p {
  font-size: 1.375em;
  line-height: 1.192;
  color: #FFF;
  margin-bottom: 1rem;
  padding-bottom:30px;}
  
.clientStory-right p:last-child{
  padding-bottom:0px;}

.clientStory-quote {
  color: #FFF;}

.clientStory-quote p:first-child::before {
  content: "“";
  margin-right: 10px;}

.clientStory-quote p:last-child::after {
  content: "”";
  margin-left: 10px;}

.shortTestimonials {
  padding: 60px 20px;
  text-align: center;}

.shortTestimonials-header span.shortTestimonialsHeader {
  color: var(--bHighlight);
  font-size: 3.75em;   
  line-height: 1.167;
  font-weight:700;
  display:block;
  margin-bottom: 30px;}

.shortTestimonials-header span.shortTestimonialsSubHeader p {
  color: #FFF;
  font-weight:400;
  font-size: 1.625em; 
  line-height: 1.192; display:block;
  margin-bottom: 30px;}

.shortTestimonials-filters {
  margin-bottom: 40px;}

.shortTestimonials-filters button {
  background: transparent;
  border: 2px solid var(--bHighlight);
  color: #fff;
  padding: 8px 18px;
  margin: 0 10px;
  border-radius: 6px;
  cursor: pointer;font-size: 1.625em; }

.shortTestimonials-filters button.active,
.shortTestimonials-filters button:hover {
  background: var(--bHighlight);
  color: var(--bDarkBlue);}
  
.shortTestimonials-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: stretch;}

.shortTestimonial-card {
  flex: 1 1 calc(50% - 40px); 
  max-width: 600px;
  min-height: 280px;          
  background: var(--bFadedBlue);
  border-radius: 8px;
  padding: 30px;
  display: flex;
  justify-content: center;    
  align-items: center;        
  text-align: center;
  color: #fff;}

.shortTestimonial-text {
  font-size: 1.25em;
  line-height: 1.5;
  margin-bottom: 20px;}

.shortTestimonial-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;                  
  max-width: 90%;}
  
.shortTestimonial-text {
  font-size: 1.375em;
  line-height: 1.2;}

.shortTestimonial-name {
  font-weight:500;
  color: var(--bHighlight);}
  
.shortTestimonial-text p:first-child::before {
  content: "“";
  margin-right: 10px;}

.shortTestimonial-text p:last-child::after {
  content: "”";
  margin-left: 10px;}

.logo-roll {
  padding: 40px 0;}

.logo-roll-container {
  max-width: 1500px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;}

.logo-roll-container::before,
.logo-roll-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 15%;
  height: 100%;
  z-index: 2;
  pointer-events: none;}

.logo-roll-container::before {
  left: 0;
  background: linear-gradient(to right, var(--bDarkBlue) 0%, transparent 100%);}

.logo-roll-container::after {
  right: 0;
  background: linear-gradient(to left, var(--bDarkBlue) 0%, transparent 100%);}

.logo-track {
  display: flex;
  align-items: center;     gap: 60px;             
  white-space: nowrap;
  will-change: transform;}

.logo-track img {
  max-height: 80px;        width: auto;
  object-fit: contain;     flex-shrink: 0;
  display: block;}

.infoCarousel {
  color: #fff;
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px 0px  60px 0px;}

.infoCarousel-tabs {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  margin-bottom: 80px;}

.infoCarousel-tab {
  font-size:3.125em;
  flex: 1;
  padding: 30px 20px;
  border:none;
  border-radius: 10px;
  background: var(--bFadedBlue);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s ease;
  text-align: center;}

.infoCarousel-tab.active {
  background: var(--bHighlight);
  color: var(--bDarkBlue);}

.infoCarousel-body {
  display: flex;
  align-items: center;
  justify-content: space-between;}

.infoCarousel-content {
  width: 795px;
  margin: 0 auto;
  min-height: 120px;
  text-align: center;}

.infoCarousel-panel {
  display: none;
  font-size: 1.625em; 
  line-height: 1.192;}

.infoCarousel-panel.active {
  display: block;}

.infoCarousel-prev,
.infoCarousel-next {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: none;
  font-size: 2.8em;
  cursor: pointer;
  background: var(--bFadedBlue);
  color: var(--bHighlight);
  transition: all .3s ease;}

.infoCarousel-prev:hover,
.infoCarousel-next:hover {
  background: var(--bHighlight);
  color: var(--bDarkBlue);}

.heroBullet {
  color: #fff;
  padding: 80px 20px;
  position: relative;
  overflow: hidden;}

.heroBullet-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
  z-index: 2;}


.heroBullet-text {
  flex: 0 0 60%;
  max-width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;}


.heroBullet-image {
  flex: 0 0 40%;
  max-width: 40%;
  position: relative;
  z-index: 1;}

.heroBullet-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;}

.heroBullet-title {
  font-size: 1.625rem; 
  line-height: 1.2;
  color: var(--bHighlight);
  margin-bottom: 20px;}

.heroBullet-header {
  font-size: 3.75rem; 
  line-height: 1.17; 
  font-weight: 300;
  margin-bottom: 30px;}

.heroBullet-header span {
  font-weight: 700;
  color: var(--bHighlight);
  display: block;}

.heroBullet-copy p {
  font-size: 1.625rem; 
  line-height: 1.2;
  margin-bottom: 20px;}

.heroBullet-points {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: 30px 0 0;}

.heroBullet-points li {
  display: flex;
  align-items: center;
  margin-bottom: 20px;}

.heroBullet-points img {
  width: 55px;
  height: auto;
  margin-right: 15px;}

.heroBullet-points span {
  font-size: 1.625rem;
  line-height: 1.2;}


.heroBullet:not(.constrain-image) .heroBullet-image {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  max-width: 50%;
  width: 50%;
  z-index: 1;}

.heroBullet {
  position: relative;}

.heroBullet-inner {
  position: static;}

.heroBullet.constrain-image .heroBullet-image {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  max-width: 40%;
  flex: 0 0 40%;}

.heroBullet.image-left .heroBullet-inner {
  flex-direction: row-reverse;}

.heroBullet.image-left .heroBullet-text {
  align-items: flex-end;
  text-align: right;}

.heroBullet.image-left .heroBullet-points {
  text-align: right;
  margin-left: auto;
  margin-right: 0;}

.heroBullet.image-left .heroBullet-points li {
  flex-direction: row-reverse;
  justify-content: flex-end;}

.heroBullet.image-left .heroBullet-points img {
  margin-left: 15px;
  margin-right: 0;}

.processElement {
  color: #fff;
  padding: 80px 20px;}

.processElement-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  gap: 60px;}

.processElement-inner::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bHighlight);
  z-index: 1;}


.processItem {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: 33%;}

.processCircle {
  width: 100px;
  height: 100px;
  border: 3px solid var(--bHighlight);
  border-radius: 50%;
  background: var(--bDarkBlue);
  color: var(--bHighlight);
  font-weight: 700;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;}

.processItem:first-child::before,
.processItem:last-child::before {
  content: "";
  position: absolute;
  top: 50px; 
  width: 50%;
  height: 2px;
  background: var(--bDarkBlue);
  z-index: -4;}

.processItem:first-child::before {
  left: 0;}

.processItem:last-child::before {
  right: 0;}

.processHeader {
  display: block;
  color: var(--bHighlight);
  font-weight: 700;
  font-size: 1.625rem; 
  line-height: 1.2;
  margin-bottom: 10px;
  text-transform: none;}

.processSubHeader {
  font-size: 1.625rem;
  line-height: 1.3;
  font-weight: 400;
  color: #fff;
  margin: 0 auto;
  max-width: 400px;}

section.singleImageWrapper {display: block;
  width: 100%;
  padding-left: 50px;
  padding-right: 50px;}

div.singleImageContainer {display: block;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;}
    
div.singleImageContainer img {
  display:block;
  width:100%;
  height:auto;}

.counterSection {
  color: #fff;
  text-align: center;
  padding: 80px 20px;}

.counter-inner {
  max-width: 1500px;
  margin: 0 auto;
}

.counter-header {
  font-size: 3.75em;   
  line-height: 1.167;
  font-weight: 700;
  color: var(--bHighlight);
  margin-bottom: 10px;}

.counter-inner p {
  font-size: 1.625em; 
  line-height: 1.192;
  color: #fff;}

.counter-boxes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;}

.counter-box {
  width: 70px;
  height: 90px;
  background: var(--bFadedBlue);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  font-size: 2.4rem;
  font-weight:700;
  display: flex;
  justify-content: center;
  align-items: center;}

.digit-scroll {
  position: absolute;
  top: 0;
  width: 100%;
  transition: transform 3s cubic-bezier(0.22, 1.2, 0.36, 1);}

.digit-scroll span {
  display: block;
  height: 90px;
  line-height: 90px;
  text-align: center;}

.counter-separator {
  color: var(--bHighlight);
  font-size: 3.75em;
  width: auto;
  padding: 0 10px;
  margin-bottom:-30px;}

.timeline {
  background: var(--bDarkBlue);
  color: #fff;
  position: relative;
  padding: 100px 0;}

.timeline-inner {
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 100px;}

.timeline-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--bHighlight);
  transform: translateX(-50%);
  z-index: 0;}

.timeline-item {
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 1;}

.timeline-item.left {
  flex-direction: row;
  justify-content: flex-end;
  text-align: right;}

.timeline-item.right {
  flex-direction: row-reverse;
  justify-content: flex-start;
  text-align: left;}

.timeline-content {
  flex: 1;
  max-width: 48%;
  padding: 0 40px;}

.timeline-item.no-image {
  margin-top: 40px;}

.timeline-item.no-image.overlap {
  margin-top: -180px;}

.timeline-item.no-image .timeline-content {
  max-width: 660px;}

.timeline-image {
  flex: 1;
  max-width: 48%;
  text-align: center;}

.timeline-image img {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: inline-block;}

.timeline-date {
  font-size: 1.625em;
  line-height: 1.192;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;}

.timeline-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 3.125em;
  line-height: 1.192;
  font-weight: 300;
  margin-bottom: 15px;}

.timeline-icon {
  width: 55px;
  height: auto;
  display: block;
  margin-bottom: 6px;}

.header-light {
  font-weight: 300;
  display: block;}

.header-bold {
  font-weight: 700;
  color: var(--bHighlight);
  display: block;}

.timeline-item.left .timeline-header {
  align-items: flex-end;
  text-align: right;}

.timeline-item.right .timeline-header {
  align-items: flex-start;
  text-align: left;}

.timeline-copy p {
  font-size: 1.625em;
  line-height: 1.192;
  color: #fff;}

.timeline-item.left .timeline-content {
  margin-right: auto;
  text-align: right;}

.timeline-item.right .timeline-content {
  margin-left: auto;
  text-align: left;}

.team-section {
  color: #fff;
  padding: 80px 20px;
  text-align: center;}
  
.team-section-inner {
  max-width: 1500px;
  margin: 0 auto;}
  
.team-title {display:block;
  font-size: 3.75rem;
  line-height: 1.17;
  margin-bottom: 60px;
  color: var(--bHighlight);}

.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  max-width: 1500px;
  margin: 0 auto;}

.team-member {margin-bottom:30px;
  flex: 0 0 330px;
  cursor: pointer;
  transition: transform 0.3s ease;}

.team-member:hover {
  transform: translateY(-5px);}

.team-member-img img {
  width: 100%;
  border-radius: 15px;
  filter: grayscale(100%) contrast(1.1);
  transition: filter 0.4s ease, transform 0.4s ease;}

.team-member:hover img {
  filter: grayscale(0%);
  transform: scale(1.03);}

.team-modal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;}

.team-member-name {
  font-weight: 700;
  font-size: 1.625rem;
  margin-top: 15px;}

.team-member-position {
  color: var(--bHighlight);
  font-size: 1.375rem;}

.team-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;}

.team-modal.active {
  display: flex;}

.team-modal-content {
  padding:40px;
  background: var(--bFadedBlue);
  border-radius: 15px;
  max-width: 1500px;
  width: 95%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;}

.team-modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 4rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;}

.team-modal-image {
  flex: 0 0 45%;
  position: relative;}

.team-modal-image img {
  border-radius: 15px;
  width: 100%;
  height: 100%;
  object-fit: cover;}

.linkedin-icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: block;
  z-index:+1000;}

.team-modal-text {
  flex: 0 0 55%;
  padding: 40px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-height: 550px; 
  overflow: hidden;}

.team-modal-name {
  font-size: 2.5rem;
  padding-bottom:15px;
  color: var(--bHighlight);
  font-weight: 700;}

.team-modal-position {
  font-size: 2.5rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 20px;}

.team-modal-bio {
  flex-grow: 1;
  overflow-y: auto;       
  padding-right: 10px;    
  scrollbar-width: thin;  
  scrollbar-color: var(--bHighlight) rgba(255,255,255,0.1);}

.team-modal-bio::-webkit-scrollbar {
  width: 6px;}
  
.team-modal-bio::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;}
  
.team-modal-bio::-webkit-scrollbar-thumb {
  background-color: var(--bHighlight);
  border-radius: 3px;}
  
.team-modal-bio p {
  font-size: 1.625rem; 
  line-height: 1.2;
  color: #fff;padding-bottom:20px;}

.video-roll {
  padding: 20px 0;
  color: #fff;
  text-align: center;
  position: relative;}

.video-roll-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;}

.video-roll-inner {
  display: flex;
  overflow-x: hidden;
  overflow-y: hidden; 
  scroll-behavior: smooth;
  width: 80%;
  max-width: 950px;
  scroll-snap-type: x mandatory;}

.video-item {
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;}

.video-frame {
  overflow: hidden; 
  border-radius: 15px;}

.video-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: 15px;}

.video-copy {
  margin-top: 80px;}

.videoItemHeader {
  display: block;
  color: var(--bHighlight);
  font-size: 1.625rem;
  line-height: 1.192;
  font-weight: 700;
  padding-bottom:40px;}

.videoItemText {
  font-size: 1.625rem;
  line-height: 1.192;
  color: #fff;
  margin-top: 10px;}

.video-roll-nav {
  background: var(--bFadedBlue);
  border: none;
  color:var(--bHighlight);
  width: 100px;
  height: 100px;
  font-weight:300;
  border-radius: 50%;
  font-size: 2rem;
  cursor: pointer;
  transition: background 0.3s ease;}

.video-roll-nav:hover {
  background: var(--bHighlight);
  color:var(--bFadedBlue);}

.video-roll-nav.prev {
  margin-left:20px;
  margin-right: 20px;}
  
.video-roll-nav.next {
  margin-right:20px;
  margin-left: 20px;}

.accordion-section {
  max-width:1600px;
  padding-left:50px;
  padding-right:50px;
  margin: 0px auto;
  color: #fff;text-align:left;
  padding-bottom:40px;}

.accordion-header {
  width: 100%;
  background: none;
  border: none;
  font-size: 1.625rem;
  font-weight: 700;
  text-align: left;
  padding-bottom: 20px;
  cursor: pointer;
  display: flex;
  justify-content: left;
  align-items: center;
  transition: color 0.3s ease;
  color: #fff;}
 
.accordion-header:hover {
  opacity:.8;}

.accordion-icon {
  margin-right:15px;
  font-size: 2rem;
  transition: transform 0.3s ease;}

.accordion-item.active .accordion-icon {
  transform: rotate(90deg);}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 20px;}

.accordion-item.active .accordion-content {
  max-height: 600px; 
  padding: 20px;}

.accordion-content p {
  font-size: 1.625rem;
  line-height: 1.5;
  margin: 0 0 10px;}

.richTextWrapper {
  display:block;
  width:100%;
  padding-left:50px;
  padding-right:50px;}

.richTextContainer {
  display:block;
  width:100%;
  max-width:1500px;
  margin:0 auto;}

.richTextContainer p{
  font-size: 1.625em; 
  line-height: 1.192;
  color:#fff;}

.richTextContainer p strong{
font-weight:700;
  color:#fff;}

.richTextContainer ol, 
.richTextContainer ul {
  padding-bottom:40px;}

.richTextContainer li {
  font-size: 1.625em; 
  line-height: 1.192;
  color:#fff;}

.richTextContainer li ol,
.richTextContainer li ul{
  margin-left:40px;}

.richTextContainer li li {
  font-size: 1em; 
  line-height: 1.192;
  color:#fff;}

.richTextContainer p{
  font-size: 1.625em; 
  line-height: 1.192;
  color:#fff;
  padding-bottom:40px;}

.richTextContainer a{
  color:var(--bHighlight);}

.richTextContainer a:hover{
  opacity:.8;}

.richTextContainer span.highlightHeaderBold {
  color:var(--bHighlight);
  font-size: 2.31em;
  font-weight:700;
  display:block;}

.richTextContainer span.highlightHeaderLight {
  font-size: 2.31em;
    font-weight:400;
    display:block;}

.webtoFormWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
  color: #fff;}

.webtoFormContainer {
  background: var(--bFadedBlue);
  max-width:1280px;
  border-radius: 20px;
  padding: 60px 50px;
  width: 100%;}

.webtoFormTitle {
  font-size: 3rem;
  font-weight: 400;
  margin-bottom: 40px;
  color: #fff;}

.form-row {
  display: flex;
  gap: 30px;
  margin-bottom: 25px;}

.form-row.single {
  flex-direction: column;}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom:30px;}

label {
  font-weight: 700;
  font-size: 1.625em; 
  line-height: 1.192;
  margin-bottom: 8px;}

input,
select {
  font-size: 1.1rem;
  padding: 12px 16px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  outline: none;}

input::placeholder {
  color: #ccc;}

select {
  color: #ccc;
  background: transparent;
  appearance: none;}

.submit-btn {
  display: block;
  margin: 40px auto 0;
  background: var(--bHighlight);
  color: #000;
  border: none;
  padding: 15px 40px;
  border-radius: 15px;
  font-weight: 700;
  font-size: 1.625em; 
  line-height: 1.192;
  cursor: pointer;
  transition: background 0.3s ease;
  text-align: center;
  width:100%;
  max-width:560px;}

.submit-btn:hover {
  background: #00ffee;}

.webtoFormThankYou {
  text-align: center;
  background: var(--bDarkBlue);
  border-radius: 20px;
  padding: 0px 40px;
  max-width: 900px;
  width: 100%;}

.webtoFormThankYou .formThankyou {
  font-size: 3rem;
  color: var(--bHighlight);
  margin-bottom: 20px;}

.webtoFormThankYou p {
  font-size: 1.4rem;
  color: #fff;}

.enquireWrapper {
  background: transparent; 
  padding: 60px 20px;
  color: #fff;
  text-align:left;}

.enquireContainer {
  max-width: 1280px;
  padding: 60px 50px;
  margin: 0 auto;
  background:var(--bFadedBlue);
  border-radius:20px;}

.enquireHeader {
  font-size: 3.75rem;
  line-height: 1.17;
  color: white;
  margin-bottom: 60px;
  font-weight:400;}

.enquireItems {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0; 
  border-radius: 15px;
  overflow: hidden; }

.enquireItem {
  flex: 1 1 50%;
  padding: 0 40px;
  box-sizing: border-box;
  border-left: 2px solid rgba(255,255,255,0.4);}

.enquireItem:first-child {
  border-left: none;}

.enquireTypeHeader {
  font-size: 1.625rem; 
  line-height: 2.25rem; 
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;}

.enquireTypeGroup {
  display: flex;
  flex-direction: column;
  gap: 15px;}

.enquireTypeLine {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.625rem; 
  line-height: 1.9rem; 
  color: #fff;}

.enquireIcon {
  width: 32px;
  height: auto;
  display: inline-block;
  vertical-align: middle;}

div.careersWrapper{
  padding: 20px 20px;
  color: #fff;
  text-align:left;}

div.careersContainer{
  max-width: 1280px;
  padding: 60px 50px;
  margin: 0 auto;
  background:var(--bFadedBlue);
  border-radius:20px;}

.jobsWrapper {
  background: transparent;
  padding: 60px 20px;
  color: #fff;}

.jobsContainer {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--bFadedBlue);
  padding: 60px 50px;
  border-radius: 20px;
  text-align: center;}

.jobsHeader {
  font-size: 3.75rem;
  line-height: 1.17;
  color: #fff;
  font-weight: 400;
  margin-bottom: 60px;}

.jobsList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;}

.jobCard {
  background: #fff;
  color: var(--bDarkBlue);
  border-radius: 15px;
  padding: 30px;
  width: 100%;
  max-width: 500px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;}

.jobTitle {
  font-size: 1.75rem; 
  font-weight: 700;
  margin-bottom: 15px;}

.jobSummary {
  font-size: 1.25rem;
  line-height: 1.4;
  margin-bottom: 25px;}

.jobTags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 25px;}

.jobTag {
  background:var(--bFadedBlue);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 5px 15px;
  border-radius: 50px;}

.jobLinkWrap {
  margin-top: auto;}

.jobLink {
  display: inline-block;
  background: var(--bHighlight);
  color: #000;
  font-weight: 700;
  padding: 12px 25px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.3s ease;}

.jobLink:hover {
  opacity:.8;}

.noVacancies {
  font-size: 1.5rem;
  margin-top: 20px;}

.language-dropdown {
 
  z-index: 999;}

.language-dropdown select {
  font-family: inherit;
  font-size: 0.9rem;
  border-radius: 6px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath fill='%23231f20' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
  background-size: 8px 5px;
  appearance: none;
  cursor: pointer;
  padding:.9em;
  transition: border-color 0.2s ease;
  color:var(--bDarkBlue);
  border:1px solid var(--bHighlight);
    
}

.language-dropdown select:hover {
  border-color: #999;}

/* ===== Responsive ===== */
 
show shortcuts
alt
+
shift
+
k

Save
File saved: File saved without any errors
@media (max-width:1499.98px){
    
    .infoCarousel {
     padding: 20px 50px  60px 50px;}

    .infoCarousel-tabs {
     gap: 40px;
     margin-bottom: 60px;}

   .infoCarousel-tab {
    font-size:2.8em;
    flex: 1;}
    
}

@media (max-width: 1199.98px) {
    
    .team-member {
     flex: 0 0 calc(50% - 40px);
     max-width: 400px;}
     
    .heroBullet-header {
     font-size: 3.45rem;}
     
    .infoCarousel-tab {
     font-size:1.8em;}

    .infoCarousel-content {
     width: 700px; }

    .infoCarousel-prev,
    .infoCarousel-next {
     width: 60px;
     height: 60px;
     font-size: 2.2em;}

    .panel-carousel-section {
     max-width: 900px;}    
    
    #panel-carousel .panel {
     flex: 0 0 300px;
     height: 420px;}
     
    #panel-carousel .panel img.panel-logo {
     max-width: 220px;}
     
    .panel-carousel-section .carousel-btn {
     width: 60px;
     height: 60px;
     font-size: 2.2rem;
     bottom: 20px;
     top:auto;}
  
    .panel-carousel-section .carousel-btn.next {
     right: 80px;}
     
    .panel-carousel-section .carousel-btn.prev {
     left: 80px;}

    .hero-glow::after {
     width: 300%;}
     
    .scroll-two-col-left {
     padding-top: 100px;
     padding-bottom: 100px;}

    .scroll-two-col-left-inner {
     padding-left: 50px;}

    .scroll-two-scrolling-list {
     height: 280px;}

    div.scroll-two-headline span.icon img{
     max-width:40px;
     height:auto;}

    .scroll-two-col-headline .fixed-text {
     font-size: 2.2em;} 
    
    .scroll-two-col-scrolling-list li {
     font-size: 2.2em;}
    
}

@media (min-width: 991px) {
    
    .burger-menu {
     display: none;}

}

@media (max-width: 991.98px) {
    
    .enquireItems {
     flex-direction: column;}

    .enquireItem {
     width: 100%;
     border-left: none;
     border-top: 2px solid rgba(255,255,255,0.4);
     padding: 30px 0;
     text-align: center;}

    .enquireItem:first-child {
     border-top: none;}

    .enquireTypeLine {
     justify-content: center;}
    
    .richTextWrapper {
     padding-left:20px;
     padding-right:20px;}
     
    .timeline-line {
     display: none;}

    .timeline-inner {
     gap: 60px;}

    .timeline-item {
     display: flex !important;
     flex-direction: column !important; 
     align-items: flex-start !important;
     justify-content: flex-start !important;
     text-align: left !important;
     margin: 0 auto;
     width: 100%;
     max-width: 800px;
     gap: 20px;padding-left:20px;
     padding-right:20px;}

    .timeline-item.left,
    .timeline-item.right {
     flex-direction: column !important;}

    .timeline-item .timeline-image {
     order: 1 !important;
     width: 100%;
     max-width: 100%;
     text-align: center;
     margin-bottom: 20px;}

    .timeline-image img {
     max-width: 90%;
     margin: 0 auto;
     display: block;}

    .timeline-item.no-image .timeline-content,
    .timeline-item .timeline-content {
     order: 2 !important;
     width: 100%;
     max-width: 100%;
     padding: 0;}
 
    .timeline-header,
    .timeline-date,
    .timeline-copy {
     text-align: left !important;
     align-items: flex-start !important;}
  
    .timeline-icon {
     width: 45px;}


    .timeline-item.no-image,
    .timeline-item.no-image.overlap {
     margin-top: 0;}
    
    .processCircle {
     width: 80px;
     height: 80px;
     font-size: 1.6rem;}
    
    .processElement-inner {
     flex-direction: column;
     align-items: center;}

    .processElement-inner::before {
     display: none;}

    .processItem {
     max-width: 100%;
     margin-bottom: 20px;}

    .processCircle {
     margin-bottom: 20px;}
    
    .heroBullet-inner {
     flex-direction: column;
     gap: 40px;
     text-align: left;
     padding-left:30px;
     padding-right:30px;}

    .heroBullet-text {
     flex: 0 0 auto;
     max-width: 100%;
     width: 100%;
     text-align: left;
     order: 1;}

    .heroBullet-image {
     flex: 0 0 auto;
     max-width: 100%;
     width: 100%;
     position: relative !important;
     top: auto !important;
     right: auto !important;
     left: auto !important;
     transform: none !important;
     order: 2;
     z-index: 1;
     display: flex;
     justify-content: center;}
     
    .heroBullet-points {
     max-width: 600px;
     margin: 20px 0 0;    
     text-align: left;    
     align-self: flex-start;}

    .heroBullet-points li {
     justify-content: flex-start;}
    
    .text-image-text header.text-image-header,
    header.text-row-header, 
    div.gradient-container p, 
    div.gradient-container header.gradient-header, 
    .heroBullet-header,
    .timeline-header{
      font-size: 2.75rem;}
     
    .timeline-copy p,
    .processSubHeader,
    .processHeader,
    .text-image-text p,
    .text-row-container p,
    .heroBullet-points span, 
    .heroBullet-title,   
    .heroBullet-copy p {
     font-size: 1.4rem;}
     
    .heroBullet-image img {
     width: 90%;
     height: auto;
     display: block;}

    .heroBullet.image-left .heroBullet-inner {
     flex-direction: column;}

    .heroBullet.image-left .heroBullet-text {
     align-items: center;
     text-align: left;}

    .heroBullet.image-left .heroBullet-points,
    .heroBullet-points {
     margin: 20px auto 0;
     text-align: left;}

    .heroBullet.image-left .heroBullet-points li {
     flex-direction: row;
     justify-content: flex-start;}

    .heroBullet.image-left .heroBullet-points img {
     margin: 0 10px 0 0;}

    .infoCarousel{
     padding-left:20px;
     padding-right:20px;}
     
    .infoCarousel-tabs {
     gap: 30px;
     margin-bottom: 60px;}

    .infoCarousel-tab {
     font-size:1.2em;
     padding: 20px 10px;
     border-radius: 8px;}

    .infoCarousel-content {
     width: 605px;
     margin: 0 auto;
     min-height: 120px;
     text-align: center;}

    .infoCarousel-panel {
     display: none;
     font-size: 1.425em; 
     line-height: 1.192;}

    .infoCarousel-panel.active {
     display: block;}

    .infoCarousel-prev,
    .infoCarousel-next {
     width: 40px;
     height: 40px;}

    .home-client-pane-container {
     flex-direction: column;
     text-align: center;}

    .home-client-pane-client,
    .home-client-pane-text {
     max-width: 100%;
     padding: 0;}

    .home-client-pane-client {
     margin-bottom: 30px;
     margin-top: 30px;
     padding: 30px;}
    
    .text-image-container {
     flex-direction: column;
     text-align: center;}

    .text-image-image,
    .text-image-text {
     max-width: 100%;
     padding: 0;}

    .text-image-image {
     margin-bottom: 30px;}
  
    .text-image.image-left .text-image-image {
     padding-right: 0px;
     order: 1;}

    .text-image.image-left .text-image-text {
     padding-left: 0;
     order: 2;}

    .text-image.image-right .text-image-image {
     padding-left: 0px;
     order: 1;}

    .text-image.image-right .text-image-text {
     padding-right: 0;
     order: 2;}
 
    #panel-carousel {
     max-width: 768px;}
     
    #panel-carousel .panel {
     flex: 0 0 280px;
     height: 380px;
     padding: 25px;
     opacity:.4;}
     
    #panel-carousel .panel img.panel-logo {
     max-width: 200px;}
  
    .panel-carousel-section .carousel-btn.next {
     right: 40px;}
    
    .panel-carousel-section .carousel-btn.prev {
     left: 40px;}
    
    .pharma-section {
     padding: 40px 20px;}
     
    .pharma-header {
     text-align: center;
     margin-bottom: 60px;
     margin-top:30px;}

    .pharma-header .section-title {
     font-size: 2.4em;}

    .pharma-header .section-subtitle {
     font-size: 1.4em;}

    .pharma-logo .tagline {
     font-size: 1.2em;
     color: #eaeaea;
     margin-bottom: 20px;}

    .pharma-categories {
     gap: 30px;
     font-size: 1.375em;}

    .pharma-categories span {
     position: relative;}

    .pharma-categories span:not(:last-child)::after {
     content: "";
     position: absolute;
     right: -15px;
     top: 50%;
     transform: translateY(-50%);
     width: 2px;
     height: 24px;
     background: var(--bHighlight);}
     
    .pharma-content .icon img{
     display:block;
     max-width:40px;
     height:auto;}

    .pharma-content h3 {
     font-size:2.6em;}

    .pharma-content h3 span {
     color: var(--bHighlight);
     font-weight: 700;
     display:block;}

    .pharma-content p {
     font-size: 1.4em;
     line-height: 1.2;}
    
    .btn {
     display: inline-block;
     padding: 8px 30px;
     background: var(--bHighlight);
     color: var(--bDarkBlue);
     text-decoration: none;
     font-weight: 400;
     border-radius: 6px;
     font-size: 1.375em;
     transition: background 0.3s ease;}

    .btn:hover {
     background: #00d9cf;}
 
    .pharma-left, 
    .pharma-right {
     flex: 0 0 100% !important;   
     max-width: 100% !important;  
     text-align: center;}
    
    .pharma-right {padding-top:40px;}
    .pharma-body {
     flex-wrap: wrap; 
     gap: 20px;}
 
    .hero-header {
     font-size: 2.75em;
     line-height: 1.167;}
  
    .hero-glow {
     padding-top: 7rem;
     padding-bottom: 2em;}
 
    .header-inner {
     flex-direction: row;
     justify-content: space-between;
     padding: 20px;}
     
    .navbar-brand img {
     max-width: 180px; }

    #mainNav.collapse {
     position: fixed;
     top: var(--headerH, 88px);
     left: 0; right: 0;
     height: calc(100vh - var(--headerH, 88px));
     background: var(--bFadedBlue);
     z-index: 1000;
     padding: 20px;
     overflow-y: auto;
     display: none;              
     flex-direction: column;
     align-items: center;
     opacity: 0;
     visibility: hidden;
     transition: opacity .3s ease;}

    #mainNav.collapse.show {
     display: flex !important;   
     opacity: 1;
     visibility: visible;}
     
    .service-nav {   
     width: 100%;
     justify-content: center;
     margin-bottom: 1.5rem;}
     
    .service-nav a {
     background: var(--bHighlight);
     color: var(--bDarkBlue);
     border: none;
     font-size: 1.2rem;
     padding: 10px 20px;
     border-radius: 6px;}

    .main-nav {
     width: 100%;
     text-align: center;}
     
    .main-nav ul {
     flex-direction: column;
     gap: 10px;
     align-items: center;}

    .main-nav li {
     width: 100%;}

    .main-nav .nav-link {
     font-size: 1.4rem;
     font-weight: 500;
     color: #fff;
     padding: 14px;
     width: 100%;
     text-align: center;
     border-radius: 6px;
     background: rgba(255,255,255,0.05);}

    .dropdown {
     position: static; }

    .dropdown-menu {
     position: static !important;
     overflow: hidden;
     max-height: 0;
     opacity: 0;
     margin: 0;
     padding: 0;
     border-radius: 6px;
     border: 1px solid rgba(0,0,0,.08);
     background: #fff;
     box-shadow: none;
     transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;}

    .dropdown-menu.animating {
     padding: 8px;}

   .dropdown-menu.open {
     max-height: 600px;  
     opacity: 1;
     padding: 8px;}
     
    div.page-body{
     display:block;
     width:100%;
     margin-top:113px;}
     
    .scroll-two-col-left {
     padding-top: 80px;
     padding-bottom: 80px;}

    .scroll-two-col-left-inner {
     padding-left: 50px;}

    div.scroll-two-headline span.icon img{
     max-width:30px;
     height:auto;}

    .scroll-two-col-headline .fixed-text {
     font-size: 1.8em;} 
    
    .scrolling-list li {
     font-size: 1.8em;}
    
    .scrolling-list {
     height: 260px;}
     
    .pharma-content .solutionheader {
     font-size: 2.75em;}
     
    .shortTestimonials-filters button {
     margin: 10px 10px;
     cursor: pointer;
     font-size: 1.425em; }
    
}

@media (max-width: 767.98px) {
    .jobsList {
    flex-direction: column;
    align-items: center;
  }

  .jobCard {
    max-width: 100%;
  }
     .form-row {
    flex-direction: column;
    gap: 20px;
  }
      .video-roll-inner {
    width: 100%;
  }

  .video-roll-nav {
    width: 50px;
    height: 50px;
    font-size: 1.6rem;
  }

  .videoItemHeader,
  .videoItemText {
    font-size: 1.25rem;
  }
    .team-member {
     flex: 0 0 100%;
     max-width: 480px;}
     
    .team-modal-name {
     font-size:1.2em;}
    
    .team-modal-position {
     font-size:1.2em;}
     
    .team-modal-image {
     max-width:220px;margin:0 auto;}
    
    .team-modal-content {
     flex-direction: column;}

    .team-modal-bio {
     max-height:300px;}
    
    .team-modal-bio p{
     font-size:1.05em;}
    
    .team-modal-content {
     padding:20px;}
    
    .team-modal-text {
     padding:0px;}
    
    .team-modal-image,
    .team-modal-text {
     flex: none;
     width: 100%;}

    .linkedin-icon {
     bottom: 10px;
     right: 10px;}
    
    .counter-box {
     width: 50px;
     height: 65px;
     font-size: 1.5rem;}
     
    .digit-scroll span {
     height: 65px;
     line-height: 65px;}
    
    .shortTestimonials,
    .home-client-panel,
    .text-image,
    .pharma-section {
     padding: 40px 20px;}
    
    .hero-header,
    .pharma-header .section-title,
    .pharma-content .solutionheader,
    div.gradient-container header.gradient-header,
    .text-image-text header.text-image-header,
    header.home-client-panel-header,
    .home-client-pane-text header.home-client-pane-header,
    header.text-row-header,
    .shortTestimonials-header span.shortTestimonialsHeader {
     font-size: 2.75em;}
    
    div.gradient {
     padding-left: 20px;
     padding-right: 20px;}
    
    section.text-row{
     padding-left:20px;
     padding-right:20px;}

    div.text-row-container {
     padding-top:40px;
     padding-bottom:40px;}

    header.text-row-header {
     padding-bottom:15px;}
    
    .text-row-container p{
     font-size:1.425em;
     padding-bottom:15px;}
    
    .home-client-pane-text .btn,
    .text-row-container .btn,
    .text-image-text .btn{
     font-size:1.175em;}

    .text-image-text p {
     font-size: 1.425em;}
     
    .clientStory-container {
     flex-direction: column;
     text-align: center;}

    .clientStory-left {
     max-width: 100%;
     flex: 0 0 100%;
     border-right: none;
     padding-right: 0;
     padding-bottom: 20px;
     margin-bottom: 20px;}

    .clientStory-right {
     max-width: 100%;
     flex: 0 0 100%;
     padding-left: 0;
     text-align: left; 
     border-left: none;
     margin-left:none;
     border-top: 2px solid #FFF;
     padding-top:30px;}
     
    .clientStory-right p {
     font-size: 1.2rem;
     line-height: 1.4;
     color: #FFF;
     margin-bottom: 1rem;}
     
    #panel-carousel {
     max-width: 600px;}
     
    #panel-carousel .panel {
     flex: 0 0 280px;
     height: 380px;
     padding: 25px;
     opacity:.4;}
     
    #panel-carousel .panel img.panel-logo {
     max-width: 200px;}
    
    .pharma-header {
     text-align: center;
     margin-bottom: 60px;
     margin-top:30px;}
     
    .pharma-header .section-subtitle {
     font-size: 1.625em; 
     line-height: 1.192;}

    .pharma-logo .tagline {
     font-size: 1.2em;
     color: #eaeaea;
     margin-bottom: 20px;}

    .pharma-categories {
     gap: 16px;
     font-size: .95em;}

    .pharma-categories span {
     position: relative;}

    .pharma-categories span:not(:last-child)::after {
     content: "";
     position: absolute;
     right: -8px;
     top: 50%;
     transform: translateY(-50%);
     width: 2px;
     height: 18px;}

    .pharma-content .icon img{
     max-width:30px;}

    .pharma-content h3 {
     font-size:2.2em;}

    .pharma-content h3 span {
     color: var(--bHighlight);
     font-weight: 700;display:block;}

    .pharma-content p {
     font-size: 1.2em;
     line-height: 1.2;}

    .pharma-left {
     padding: 20px;}
 
    .panel-divider::before,
    .panel-divider::after {
     width: 45%;}    
    
    .panel-divider span {
     width: 20px;
     height: 20px;}
  
    .panel-divider-wrapper {
     padding-left:20px;
     padding-right:20px;}
    
    .shortTestimonial-card {
     flex: 1 1 100%;
     max-width: none;}
     
    .hero-inner {
     padding-top: 4rem;}
    
    .hero-header {
     display:block;
     font-size: 1.5rem;
     padding-bottom:15px;}
    
    .hero-inner p {
     font-size: 0.9rem;}
     
    .hero-glow::after {
     top: 15%;
     width: 340%;}
     
    .header-inner {
     flex-direction: column;
     align-items: stretch;
     gap: 0.75rem;}

    .main-nav ul {
     flex-direction: column;
     gap: 0.75rem;
     align-items: center;}

    .service-nav {
     justify-content: center;}
     
    .footerContainer {
     flex-direction: column;
     text-align: center;}

    .footerinfo, 
    .footernav {
     flex: 0 0 100%;
     text-align: center;
     margin: 5px 0;}

    .footernav ul li {
     display: inline-block;
     margin: 0 10px;}
     
    .hero-glow {
     padding: 4rem 1rem;}

    .scroll-two-col-left,
    .scroll-two-col-right {
     flex: 0 0 100%;
     max-width: 100%;}

    .scroll-two-col-left {
     padding-top: 20px;
     padding-bottom: 20px;}

    section.singleImageWrapper,
    .scroll-two-col-left-inner {
     padding-left: 20px;
     padding-right: 20px;}

    .scroll-two-col-right {
     justify-content: center; }

    .scrolling-list {
     height: 220px;}
    
    div.gradient-container {
     padding-top: 40px;
     padding-bottom: 40px;}
     
    div.gradient-container p {
     font-size:1.75em;}
     
    header.home-client-panel-header {
     margin-bottom: 40px;} 
     
}

@media (max-width: 575.98px) {
    
    .infoCarousel-tabs {
     gap: 25px;
     margin-bottom: 40px;}

    .infoCarousel-tab {
     font-size:1.05em;}

    .infoCarousel-content {
     width: 400px;
     margin: 0 auto;
     min-height: 120px;
     text-align: center;}

    .infoCarousel-panel {
     display: none;
     font-size: 1.025em; 
     line-height: 1.192;}
    
    .processSubHeader,
    .processHeader,
    #panel-carousel p {
     font-size: 1.175em;
     line-height: 1.2;}

    .text-image-text header.text-image-header,
    header.text-row-header, 
    div.gradient-container p, 
    div.gradient-container header.gradient-header, 
    .heroBullet-header{
     font-size: 2.25em; }
    
    
    .text-image-text p,
    .text-row-container p{
     font-size:1.125em;}

    .text-row-container .btn {
     font-size: 1.075em;
     font-weight: 400;}

    #panel-carousel {
     max-width: 320px;}
     
    #panel-carousel .panel {
     flex: 0 0 240px;
     height: 340px;
     padding: 20px;}
     
    #panel-carousel .panel img.panel-logo {
     max-width: 180px;}
     
    .panel-carousel-section .carousel-btn {
     width: 40px;
     height: 40px;
     font-size: 1.5rem;
     top: 55%;}
     
    #panel-carousel .ribbon {
     top:-35px;
     transform: translateX(-50%);
     max-width: 220px;
     font-weight: bold;
     font-size: .8em;}
     
    .panel-carousel-section {
     padding-top: 20px;
     max-width: 420px;}
     
    #panel-carousel {
     padding-top: 0px;}

    .panel-carousel-section .carousel-btn.next {
     right: 10px;}
     
     .panel-carousel-section .carousel-btn.prev {
     left: 10px;}
     
    .hero-glow {
     padding: 1.5rem 1rem;}
        
    .hero-inner {
     padding-top: 4rem;}
    
    .hero-header {
     display:block;
     font-size: 1.3rem;
     padding-bottom:10px;}
    
    .hero-inner p {
     font-size: 0.9rem;}
     
    .hero-glow::after {
     top: 15%;
     width: 340%;}
    
    div.gradient-container header.gradient-header {
     font-size: 2.05em;}

    div.gradient-container p {
     font-size:2.05em;}

}