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, ol, ul, li, fieldset, form, label, 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;
font: normal 13px 'barlowregular', Arial, Helvetica, sans-serif;
}
html, html * {
box-sizing: border-box;
outline: none;
}
@font-face {
font-family: 'agency_fbbold';
src: url('../fonts/agencyb-webfont.eot');
src: url('../fonts/agencyb-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/agencyb-webfont.woff2') format('woff2'), url('../fonts/agencyb-webfont.woff') format('woff'), url('../fonts/agencyb-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'agency_fbregular';
src: url('../fonts/agencyr-webfont.eot');
src: url('../fonts/agencyr-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/agencyr-webfont.woff2') format('woff2'), url('../fonts/agencyr-webfont.woff') format('woff'), url('../fonts/agencyr-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'barlowregular';
src: url('../fonts/barlow-regular-webfont.eot');
src: url('../fonts/barlow-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/barlow-regular-webfont.woff2') format('woff2'), url('../fonts/barlow-regular-webfont.woff') format('woff'), url('../fonts/barlow-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'barlowsemibold';
src: url('../fonts/barlow-semibold-webfont.eot');
src: url('../fonts/barlow-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/barlow-semibold-webfont.woff2') format('woff2'), url('../fonts/barlow-semibold-webfont.woff') format('woff'), url('../fonts/barlow-semibold-webfont.ttf') format('truetype'), url('../fonts/barlow-semibold-webfont.svg#barlowsemibold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'century_gothicregular';
src: url('../fonts/gothic-webfont.eot');
src: url('../fonts/gothic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/gothic-webfont.woff2') format('woff2'), url('../fonts/gothic-webfont.woff') format('woff'), url('../fonts/gothic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'century_gothicbold';
src: url('../fonts/gothicb-webfont.eot');
src: url('../fonts/gothicb-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/gothicb-webfont.woff2') format('woff2'), url('../fonts/gothicb-webfont.woff') format('woff'), url('../fonts/gothicb-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'open_sansregular';
src: url('../fonts/opensans-regular-webfont.eot');
src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-regular-webfont.woff2') format('woff2'), url('../fonts/opensans-regular-webfont.woff') format('woff'), url('../fonts/opensans-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'montserratregular';
src: url('../fonts/montserrat-regular-webfont.eot');
src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat-regular-webfont.woff2') format('woff2'), url('../fonts/montserrat-regular-webfont.woff') format('woff'), url('../fonts/montserrat-regular-webfont.ttf') format('truetype'), url('../fonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
font-weight: normal;
font-style: normal;
}
/*--GENERAL & FONTS STYLES--*/
* {
margin: 0px;
padding: 0px;
}
img {
outline: none;
border: none;
background: none;
}
a {text-decoration: none;}
h1 {font: normal 30px 'century_gothicregular'; color: /*#022d70*/ #144ba0; letter-spacing: 0.04em; line-height: 1em;}
h2 {font: normal 28px 'century_gothicregular'; color: /*#022d70*/ #144ba0; letter-spacing: 0.04em; line-height: 1em;}
h3 {font: normal 13px 'open_sansregular'; color: #161616; letter-spacing: 0.25em; line-height: 2em; text-transform: uppercase; word-spacing: 0.1em;}
h4 {font: normal 13px 'barlowsemibold'; color: #161616; letter-spacing: 0.25em; line-height: 2em; text-transform: uppercase; word-spacing: 0.1em;}
p {font: normal 15px 'barlowregular'; color: #000; letter-spacing: 0.05em; line-height: 1.6em;}
p a {font: normal 15px 'barlowregular'; color: #000; letter-spacing: 0.05em; line-height: 1.6em; border-bottom: 2px dotted #888888;}
p a:hover {font: normal 15px 'barlowregular'; color: #f5871f; letter-spacing: 0.05em; line-height: 1.6em; border-bottom: none;}
p u{font: normal 15px 'barlowregular'; color: #000; letter-spacing: 0.05em; line-height: 1.6em; text-decoration: underline;}
p b{font: normal 15px 'barlowsemibold'; color: #000; letter-spacing: 0.05em; line-height: 1.6em;}
ul {list-style: url("../images/icon.png"); list-style-position: outside; margin: 15px 0 10px 30px;}
ul li{font: normal 15px 'barlowregular'; color: #000; letter-spacing: 0.05em; line-height: 1.6em; margin: 0 0 15px;}
ul li a{font: normal 15px 'barlowregular'; color: #000; letter-spacing: 0.05em; line-height: 1.6em; margin: 0 0 15px; text-decoration: none; border-bottom: 2px dotted #888888;}
ul li a:hover{font: normal 15px 'barlowregular'; color: #f5871f; letter-spacing: 0.05em; line-height: 1.6em; margin: 0 0 15px; text-decoration: none; border-bottom: none;}
ul li b{font: normal 15px 'barlowsemibold'; color: #000; letter-spacing: 0.05em; line-height: 1.6em;}
ul li u{font: normal 15px 'barlowregular'; color: #000; letter-spacing: 0.05em; line-height: 1.6em; text-decoration: underline;}
ul li span{font: normal 15px 'barlowregular'; color: #000; letter-spacing: 0.05em; line-height: 1.6em;}
ol {list-style-position: inside; margin: 15px 0 10px 5px;}
ol li{font: normal 15px 'barlowregular'; color: #000; letter-spacing: 0.05em; line-height: 1.6em; margin: 0 0 15px;}
/*--GENERAL & FONTS STYLES--*/
/*--COMMON STYLES--*/
.clear {clear: both;}
.clr-none {clear: none !important;}
.no-border {border: none !important;}
.no-margin {margin: 0 !important;}
.no-btm-margin {margin-bottom: 0 !important;}
.no-padding {padding: 0 !important;}
.auto-margin {margin: 0 auto; float: none !important;}
.float-lt {float: left !important;}
.float-rt {float: right !important;}
.float-none {float: none !important;}
.txt-center {text-align: center !important;}
.txt-justify {text-align: justify !important;}
.txt-lt {text-align: left !important;}
.txt-rt {text-align: right !important;}
.top-margin70 {margin-top: 70px !important;}
.top-margin40 {margin-top: 40px !important;}
.top-margin30 {margin-top: 30px !important;}
.top-margin20 {margin-top: 20px !important;}
.top-margin10 {margin-top: 10px!important;}
.top-margin05 {margin-top: 5px!important;}
.btm-margin30 {margin-bottom: 30px !important;}
.btm-margin20 {margin-bottom: 20px !important;}
.rt-margin20 {margin-right: 20px !important;}
.lt-margin20 {margin-left: 20px !important;}
.btm-padding0 {padding-bottom: 0 !important;}
.width90{width: 90% !important;}
.width80{width: 80% !important;}
.width40{width: 40% !important;}
.border-btm{border-bottom: 1px solid #c0c0c0;}
.border-btm2{border-bottom: 1px solid #939393;}
.jc-lt{justify-content: flex-start!important;}
.align-center {align-items: center !important;}
.indent20 {text-indent: 20px;}
.uppercase {text-transform: uppercase;}
.white {color: #fff;}
.black {color: #000;}
.lightblue{color: #144ba0;}
.darkblue{color: /*#022d70*/ #144ba0;}
.orange{color: #f5871f;}
.content-area {width: 1100px; margin: 0 auto;}
.content-holder{width: 100%; float: left; padding: 60px 0 0;}
.vline{position: relative; width: 3px; height: 240px; background-color: #f5871f; float: left; border: 0;}
.hline{position: relative; width: 30px; height: 2px; background-color: #f5871f; float: left; border: 0;}
.hline2{position: relative; width: 100%; height: 2px; background-color: #c0c0c0; float: left; border: 0;}
/*--BREADCRUMB--*/
.breadcrumb{width: 90%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; font: normal 16px 'barlowsemibold'; color: #39a3e1; letter-spacing: 0.02em; line-height: 2em;}
.breadcrumb a {font: normal 16px 'barlowregular'; color: #666666; letter-spacing: 0.02em; line-height: 2em; text-decoration: none; float: left;}
.breadcrumb a:hover {font: normal 16px 'barlowregular'; color: #666666; letter-spacing: 0.02em; line-height: 2em; text-decoration: none; float: left;}
.breadcrumb img {width: 10px !important; float: left !important; margin: 12px 10px 0px !important; clear: none !important;}
/*--BREADCRUMB--*/
/*--BUTTON--*/
div.btn{justify-content:center; align-items:center; display:flex; margin-top: 40px;}
button{font: normal 13px 'open_sansregular'; color: #424242; letter-spacing: 0.25em; text-transform: uppercase; border:none; padding:10px 20px; cursor:pointer; transform:all 0.3s; position:relative; background: none;}
button a{font: normal 13px 'open_sansregular'; color: #424242; letter-spacing: 0.25em; text-transform: uppercase;}
button:before{content:""; position :absolute; width:24px; height:24px; top:-5px; left:-5px; border-top:2px solid #f5871f; border-left:2px solid #f5871f; transition:all 0.25s;}
button:hover:before ,button:hover:after{width:104%; height:110%;}
button:after{content:""; position :absolute; width:24px; height:24px; bottom:-2px; right:-2px; border-bottom:2px solid #f5871f; border-right:2px solid #f5871f; transition:all 0.30s;}
/*--BUTTON--*/
/*--LINKS--*/
.link a {
color: #f5871f;
font:normal 12px 'century_gothicbold';
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
margin-top: 1em;
display: inline-block;
padding: 0.5em;
margin-left: -0.5em;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.link a:before, .link a:after {
position: absolute;
content: "";
border-bottom: 3px solid /*#022d70*/ #144ba0;
border-radius: 1em;
bottom: 0.3em;
transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.link a:before {
width: 1em;
transform-origin: left;
}
.link a:after {
width: 87%;
left: 1em;
transform: translateX(110%);
}
.link a:hover:before {
transform: scaleX(0.3);
}
.link a:hover:after {
transform: translateX(0);
}
/*--LINKS--*/
/*--LINES IN THE END OF TEXT--*/
.line-container {display: flex; align-items: center; justify-content: center; gap: 1rem;}
.line-container h1, .line-container h2 {
/* This prevents the text from shrinking and ensures the lines get their fixed width */
flex-shrink: 0;
}
.line-container::before,
.line-container::after {
content: "";
display: block; /* Important for width to be applied */
width: 30px; /* Sets the fixed width of the lines */
border-bottom: 3px solid #f5871f;
}
/*--LINES IN THE END OF TEXT--*/
/*--COMMON STYLES--*/
/*--HEADER STARTS--*/
header {width: 100%; height: auto; background: #fff; float: left; padding: 20px 0; z-index: 1; position: relative;}
header .logo {width: 25%; height: 72px; float: left; display: flex; align-items: center;}
header .logo img {width: 200px;}
/*--MENU STARTS--*/
header nav.dropdown-menu{width: 65%; float: right; display: flex; justify-content: flex-end;}
.dropdown-menu ul {list-style: none; padding: 0; margin: 0;}
.dropdown-menu > ul {width: 100%; height: 72px; display: flex; justify-content: space-between;}
.dropdown-menu > ul > li {position: relative; margin: 0; line-height: normal; display: flex; align-items: center;}
.dropdown-menu ul li{margin: 0;}
.dropdown-menu ul li a{margin: 0;}
.dropdown-menu ul li a:hover{margin: 0;}
/* --- Global Reset and Basic Styling --- */
.dropdown-menu a {
display: block;
text-decoration: none;
padding: 10px 15px;
background-color: transparent; /* Ensure no background interference */
border-bottom: 1px solid #eee;
white-space: nowrap;
position: relative;
/* Base color and transition for ALL links (used by submenus) */
color: #333;
transition: color 0.3s ease;
}
/* --- Level 1 (Main Menu) Styling (Border Animation) --- */
.dropdown-menu > ul > li > a {
border-bottom: none; /* Remove default border from main links */
/*background-color: #ddd;*/
/* ADDED: Transition for the ::after border width, applied only to main links */
transition: color 0.3s ease, width 0.3s ease-out;
}
/* --- Border Animation Setup (::after) - ONLY for Main Menu (Level 1) --- */
.dropdown-menu > ul > li > a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background-color: #f5871f;
transition: width 0.3s ease-out;
}
/* Hover and Active Effects for Level 1 */
.dropdown-menu > ul > li > a:hover {
color: #f5871f; /* Hover text color */
}
.dropdown-menu > ul > li > a:hover::after {
width: 100%; /* Animated border on hover */
}
/* --- Submenu (Level 2 & 3) Styling (Color Change Only) --- */
/* Remove default border from submenu links */
.submenu a {
border-bottom: 1px solid #E1E1E1; /* Keep a separator border */
}
/* Hover and Active Effects for Level 2 & 3 */
.submenu a:hover {
color: #f5871f; /* Submenu hover text color */
border-bottom: 1px solid #E1E1E1; /* Keep a separator border */
/*background-color: #f9f9f9;*/ /* Subtle background change for clarity */
}
/* Hide the ::after element for submenus */
.submenu a::after {
display: none;
}
/* --- Active Link Highlighting (Selective) --- */
/* 2. Highlight for the current page link (.active) in SUBMENUS */
.submenu .active {
color: #f5871f; /* Darker green for active page text */
font-weight: bold;
/*background-color: #f0fff0;*/ /* Very light background for active clarity */
}
/* 3. Highlight Main Menu when on Submenu Page (.active-parent) - Level 1 */
.dropdown-menu .active-parent {
color: #f5871f; /* Active parent text color */
}
.dropdown-menu .active-parent::after {
width: 100%; /* Force the border to be 100% wide */
background-color: #f5871f; /* Active parent border color */
}
/* --- Dropdown Positioning (Unchanged) --- */
.submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 250px;
display: none;
background-color: #fff;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.level-3 {
top: 0;
left: 100%;
}
.dropdown-menu li:hover > .level-2 {
display: block;
}
.level-2 li:hover > .level-3 {
display: block;
background-color: #F1F6FD;
}
/*--MENU ENDS--*/
/*--HEADER ENDS--*/
/*--BANNER STARTS--*/
#banner{width: 100%; height: 100vh; background: url("../images/banner.jpg") no-repeat center; background-size: cover;}
#abtus-banner{width: 100%; height: 100vh; background: url("../images/abtus-banner.jpg") no-repeat center; background-size: cover;}
#ehss-banner{width: 100%; height: 100vh; background: url("../images/ehss-banner.jpg") no-repeat center; background-size: cover;}
#csr-banner{width: 100%; height: 100vh; background: url("../images/csr-banner.jpg") no-repeat center; background-size: cover;}
#services-banner{width: 100%; height: 100vh; background: url("../images/services-banner.jpg") no-repeat center; background-size: cover;}
#dc-banner{width: 100%; height: 100vh; background: url("../images/dc-banner.jpg") no-repeat center; background-size: cover;}
#comp-banner{width: 100%; height: 100vh; background: url("../images/comp-banner.jpg") no-repeat center; background-size: cover;}
#mc-banner{width: 100%; height: 100vh; background: url("../images/mc-banner.jpg") no-repeat center; background-size: cover;}
#sc-banner{width: 100%; height: 100vh; background: url("../images/sc-banner.jpg") no-repeat center; background-size: cover;}
#ac-banner{width: 100%; height: 100vh; background: url("../images/ac-banner.jpg") no-repeat center; background-size: cover;}
#tc-banner{width: 100%; height: 100vh; background: url("../images/tc-banner.jpg") no-repeat center; background-size: cover;}
#cdmo-banner{width: 100%; height: 100vh; background: url("../images/cdmo-banner.jpg") no-repeat center; background-size: cover;}
#pc-banner{width: 100%; height: 100vh; background: url("../images/pc-banner.jpg") no-repeat center; background-size: cover;}
#infra-banner{width: 100%; height: 100vh; background: url("../images/infra-banner.jpg") no-repeat center; background-size: cover;}
#career-banner{width: 100%; height: 100vh; background: url("../images/career-banner.jpg") no-repeat center; background-size: cover;}
#blog-banner{width: 100%; height: 100vh; background: url("../images/blog-banner.jpg") no-repeat center; background-size: cover;}
#blog1-banner{width: 100%; height: 100vh; background: url("../images/blog1-banner.jpg") no-repeat center; background-size: cover;}
#contact-banner{width: 100%; height: 100vh; background: url("../images/contact-banner.jpg") no-repeat center; background-size: cover;}
/*--BANNER ENDS--*/
/*--GP1 STARTS--*/
#gp1{width: 100%; background: #f7f7f7; padding: 60px 0; text-align: center;}
#gp1 p{width: 70%; margin: 25px auto;}
/*--GP1 ENDS--*/
/*--GP2 STARTS--*/
#gp2{width: 100%; padding: 60px 0;}
#gp2 h2{font: normal 18px 'century_gothicregular'; line-height: 1.5em;}
#gp2 h3{text-align: center;}
#gp2 h4{letter-spacing: 0.3em;}
#gp2 p{font: normal 13px 'barlowregular'; line-height: 1.5em; margin: 15px 0;}
#gp2 hr{opacity: 0.8;}
#gp2 #services-holder{width: 100%; margin-top: 60px; display: flex; flex-direction: row; justify-content: space-between;}
#gp2 #services-holder .image-zoom-container {width: 230px; display: block;}
/* Base style for the image */
#gp2 #services-holder .zoom-image {margin-bottom: 20px; width: 100%; max-width: 500px; transition: transform 0.3s ease-in-out; /* Add a smooth animation */}
/* Style for the hover trigger text */
#gp2 #services-holder .hover-trigger {font: normal 13px 'century_gothicbold'; color: #f5871f; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer;}
#gp2 #services-holder .hover-trigger a{font: normal 13px 'century_gothicbold'; color: #f5871f; letter-spacing: 0.15em; text-transform: uppercase;}
/* The zoom effect that is triggered by JavaScript */
#gp2 #services-holder .image-zoom-container.is-hovered .zoom-image {transform: scale(1.1); /* Zooms the image to 110% */}
/*--GP2 ENDS--*/
/*--GP3 STARTS--*/
#gp3{width: 100%; background: #fff; padding: 60px 0;}
#gp3 .aa{width: 90%; float: none; margin: 0 auto; display: flex; flex-direction: row;}
#gp3 section{width: 40%; display: flex; justify-content: center;}
#gp3 section img{width: 400px; position: relative; object-fit: contain;}
#gp3 aside{width: 60%; height: 500px; padding: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#gp3 aside .txt{width: auto; display: flex; flex-direction: column;}
/*--GP3 ENDS--*/
/*--GP4 STARTS--*/
#gp4{width: 100%; background: #f7f7f7; padding: 60px 0;}
#gp4 .fac{width: 100%; margin: 60px 0 80px; display: flex; flex-direction: row; justify-content: space-between;}
#gp4 .fac div{width: 300px; background: #fff; border-radius: 20px; padding: 0px; box-shadow: 3px 4px 30px #9c9c9c; transition: box-shadow 0.5s ease-in-out;}
#gp4 .fac div:hover{box-shadow: none;}
#gp4 .fac div img{width: 300px; border-radius: 20px 20px 0 0;}
#gp4 .fac div section{width: 100%; padding: 25px 25px 30px 25px; float: left; text-align: left;}
#gp4 .fac div h4{font: normal 22px 'open_sansregular'; color: #144ba0; letter-spacing: 0.02em; line-height: 1.8em;}
#gp4 .fac div h4 a{font: normal 22px 'open_sansregular'; color: #f5871f; letter-spacing: 0.02em;}
#gp4 .fac div p{font: normal 13px 'barlowregular'; color: #1D1D1D; letter-spacing: 0.06em; line-height: 1.4em;}
#gp4 .fac div p b{font: normal 13px 'barlowsemibold'; color: #1D1D1D; letter-spacing: 0.06em; line-height: 2em;}
#gp4 .fac div p b a{font: normal 13px 'barlowsemibold'; color: #1D1D1D; letter-spacing: 0.06em; line-height: 2em;}
/*--GP4 ENDS--*/
/*--FOOTER STARTS--*/
footer{width: 100%; padding: 60px 0 0; background: /*#022d70*/ #144ba0; float: left;}
footer .content-area{display: flex; flex-direction: row; justify-content: space-between; padding-bottom: 30px;}
footer address{width: 30%; font: normal 13px 'century_gothicregular'; letter-spacing: 0.08em; line-height: 1.7em; color: #ECECEC;}
footer section{width: auto; display: flex; justify-content: center; flex-direction: column; align-items: flex-start;}
footer h3{font: normal 14px 'century_gothicbold'; color: #fff; letter-spacing: 0.08em; line-height: 3em; text-transform: uppercase; word-spacing: 0.1em;}
footer ul{list-style: none; margin: 0; columns:2; column-gap: 100px;}
footer ul li{color: #ECECEC;}
footer ul li a{color: #E5E5E5;}
footer ul li a:hover{color: #fff;}
footer .copy{width: 100%; float: left; clear: both; border-top: 1px solid #8D8D8D; padding: 20px 0 0;}
footer .copy span{width: 40%; font: normal 11px 'century_gothicregular'; letter-spacing: 0.08em; line-height: 1.7em; color: #ECECEC;}
footer .copy span a{font: normal 11px 'century_gothicregular'; letter-spacing: 0.08em; line-height: 1.7em; color: #ECECEC;}
/*--FOOTER ENDS--*/
/*--INNERPG STARTS--*/
main{width: 100%; float: left; padding-top: 60px; padding-bottom: 60px;}
main p{margin: 20px 0 15px; text-align: justify;}
main #vvp{width: 100%; padding: 60px 0; background: #f7f7f7; margin: 60px 0 0; float: left;}
/*--VVP STARTS--*/
.tab-nav-bar {
position: relative;
margin: 0;
}
.tab-navigation {
position: relative;
display: flex;
margin: 0;
border-bottom: 1px solid #c0c0c0;
}
.tab-menu {
list-style: none;
max-width: 800px;
padding: 0px;
white-space: nowrap;
scroll-behavior: smooth;
user-select: none;
overflow-x: auto;
margin: 0;
}
.tab-menu.dragging {
scroll-behavior: unset;
cursor: grab;
}
.tab-menu::-webkit-scrollbar {
display: none;
}
.tab-btn {
display: inline-block;
margin: 0 50px 0 0;
cursor: pointer;
user-select: none;
transition: background-color .3s ease;
font: normal 25px 'open_sansregular';
letter-spacing: 0.0em;
line-height: 2em;
color: #161616;
}
.tab-menu.dragging .tab-btn {
pointer-events: none;
}
.tab-btn:hover {
color: #f5871f;
}
.tab-btn.active {
color: #f5871f;
}
.left-btn,
.right-btn {
position: absolute;
color: var(--text-color);
font-size: 1.8em;
padding: 10px;
cursor: pointer;
}
/* ===== Tab content ===== */
.tab-content {
position: relative;
display: flex;
justify-content: center;
width: 100%;
margin: 50px 0 0;
}
.tab {
position: relative;
top: 0;
right: auto;
bottom: 0;
left: auto;
max-width: 980px;
padding: 0;
opacity: 0;
transform: translateX(25px);
content-visibility: hidden;
}
.tab.active {
transform: translateX(0);
content-visibility: visible;
opacity: 1;
transition: opacity 1s ease, transform 1s ease;
}
.tab .row {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
gap: 40px;
}
.tab .img-card {
position: relative;
width: 400px;
max-width: 400px;
height: 500px;
max-height: 500px;
border-radius: 30px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.tab .img-card img {
width: 100%;
object-fit: cover;
}
.right-column {
max-width: 800px;
}
.info .city,
.info .description p {
margin-bottom: 10px;
}
.info .city {
font-size: 2em;
}
/* ===== Media queries (max-width: 1050px;) ===== */
@media screen and (max-width: 1050px) {
section {
margin: 0 0;
}
.tab-nav-bar {
margin: 65px 20px 40px 25px;
}
.tab {
padding: 15px 25px;
}
.tab .row {
flex-direction: column;
}
.tab .img-card {
width: auto;
max-width: 600px;
}
}
/*--VVP ENDS--*/
#ya{width: 100%; float: left; display: flex; justify-content: center; flex-direction: column; margin: 60px 0 0;}
#ya .heading{width: 100%; float: left; margin-bottom: 40px;}
#ya .txt{width: 90%; display: flex; flex-direction: row; justify-content: center; border-bottom: 1px solid #c0c0c0; margin-bottom: 25px;}
#ya .txt span{font: normal 70px 'open_sansregular'; color: #c9c9c9; padding: 0 10px 10px 0; border-right: 1px solid #c0c0c0; margin-bottom: 25px;}
#ya .txt p{width: 80%; padding: 0 0 0 20px;}
#ya .txt p b{color: #161616;}
main .ehss{width: 100%; background: #fff; float: left;}
main .ehss h3{font: normal 16px 'barlowsemibold'; color: #000; letter-spacing: 0.04em; line-height: 1.6em;}
main #osc{width: 100%; padding: 60px 0; background: #f7f7f7; margin: 60px 0 0; float: left; display: flex; justify-content: center;}
main #osc section{width: 40%; display: flex; float: left;}
main #osc section ul li{text-align: justify; margin-bottom: 25px;}
main #osc aside{width: 50%; height: 580px; display: flex; justify-content: flex-end; align-items: center;}
main #osc aside img{width: 400px; border-radius: 40px;}
main ul#ema{columns: 3; column-gap: 95px; padding-top: 20px;}
main ul#ema li{height: 135px; text-align: justify; font: normal 14px 'barlowregular'; letter-spacing: 0.05em; line-height: 1.6em;}
main p.ema{width: 100%; border-bottom: 1px solid #c0c0c0; padding-bottom: 10px;}
main .csr{width: 100%; background: #fff; float: left;}
main .csr ul{columns: 3; column-gap: 95px; padding-top: 20px;}
main .csr ul li{height: 125px; text-align: justify; font: normal 14px 'barlowregular'; letter-spacing: 0.05em; line-height: 1.6em;}
main #services-holder{width: 90%; margin: 60px auto 0;}
main #services-holder .services{width: auto; display: flex; flex-direction: row; align-items: flex-end; margin-bottom: 80px;}
main #services-holder .services img{border-radius: 30px; width: 400px;}
main #services-holder .services .txt-holder{display: flex; justify-content: flex-end; flex-direction: column;}
main #services-holder .services .txt-holder h2{font: normal 35px 'open_sansregular'; letter-spacing: 0em; bottom: 0px; position: relative; left: 20px; line-height: 1em;}
main #services-holder .services .txt-holder h4{font: normal 13px 'open_sansregular'; letter-spacing: 0.25em; line-height: 1.5em;}
main #services-holder .services .txt-holder p{margin: 10px 25px;}
main #services-holder .services .txt-holder .link a{margin-top: 0; margin-left: 16px;}
main#disc-chem{width: 100%; float: left;}
main#disc-chem .sa-holder{width: 100%; float: left; margin-top: 40px; display: flex; align-items: center;}
main#disc-chem .sa-holder section{width: 70%; float: left; text-align: right;}
main#disc-chem .sa-holder section img{width: 700px; border-radius: 40px;}
main#disc-chem .sa-holder aside{width: 30%; float: left;}
main#disc-chem .sa-holder aside h4 {font: normal 18px 'barlowsemibold'; color: #161616; letter-spacing: 0.05em; line-height: 1.5em; text-transform: uppercase; word-spacing: 0.1em;}
main#disc-chem .holder{width: 100%; float: left; margin-top: 40px;}
main#disc-chem .holder .cc-holder{width: 90%; display: flex; flex-direction: row; justify-content: space-between; margin: 40px auto 0; flex-wrap: wrap;}
main#disc-chem .holder .cc-holder .cc-items{width: 45%; display: flex; flex-direction: column; margin-bottom: 40px; border: 1px solid #c0c0c0; padding: 30px 40px 0px;}
main#disc-chem .holder .cc-holder h3{font: normal 14px 'barlowsemibold'; letter-spacing: 0.1em; line-height: 2em; color: #000;}
main#disc-chem .holder .cc-holder h3 a{font: normal 14px 'barlowsemibold'; letter-spacing: 0.1em; line-height: 2em; color: #000;}
main#disc-chem .holder .cc-holder h3 a:hover{font: normal 14px 'barlowsemibold'; letter-spacing: 0.1em; line-height: 2em; color: #f5871f;}
main#disc-chem .holder .cc-holder p{margin: 20px 0 0;}
main#disc-chem .holder .cc-holder ul{margin: 10px 0 10px 14px; list-style: square;}
main#disc-chem .holder .cc-holder ul li{font: normal 14px 'barlowregular';}
main#infra{width: 100%; float: left;}
main#infra .holder{width: 100%; float: left; margin:40px 0; display: flex; flex-direction: row; align-items: center;}
main#infra .holder .img-holder{width: 50%; display: flex;}
main#infra .holder .img-holder img{width: 500px; height: 333px; border-radius: 40px; box-shadow: 3px 4px 30px #9c9c9c; transition: box-shadow 0.5s ease-in-out;}
main#infra .holder .img-holder img:hover{box-shadow: none;}
main#infra .holder .heading-holder{width: 50%; display: flex; flex-direction: column;}
main#infra .txt-holder{width: 100%; display: flex; justify-content: space-between; align-items: center;}
main#infra .txt-holder section{width: 60%; display: flex; flex-direction: column;}
main#infra .txt-holder aside{width: 35%; display: flex; justify-content: flex-end;}
main#infra .txt-holder aside img{width: 300px;}
main#contact .holder{display: flex; flex-direction: row; justify-content: space-between; margin-top: 40px;}
main#contact address{width: 30%; font: normal 13px 'century_gothicregular'; letter-spacing: 0.08em; line-height: 1.7em; color: #161616;}
main#contact section{width: auto; display: flex; justify-content: center; flex-direction: column; align-items: flex-start;}
main#contact address h3{font: normal 13px 'barlowsemibold'; color: #161616; letter-spacing: 0.05em; line-height: 1.5em; text-transform: uppercase; word-spacing: 0.1em; margin-bottom: 10px;}
main#contact ul{list-style: none; margin: 0; columns:2; column-gap: 100px;}
main#contact ul li{color: #c9c9c9;}
main#contact ul li a{color: #c9c9c9;}
main#contact ul li a:hover{color: #fff;}
main#comp-chem{width: 100%; float: left;}
main#comp-chem .sa-holder{width: 100%; float: left; margin-top: 40px; display: flex; align-items: center; justify-content: space-between;}
main#comp-chem .sa-holder section{width: 60%; float: left;}
main#comp-chem .sa-holder aside{width: 30%; float: left;}
main#comp-chem .sa-holder aside h2{line-height: 1.5em;}
main#comp-chem .holder{width: 100%; float: left; margin-top: 40px;}
main#med-chem{width: 100%; float: left;}
main#med-chem .holder{width: 100%; float: left; margin-top: 40px;}
main#med-chem .holder h4{font: normal 15px 'barlowsemibold'; letter-spacing: 0.08em; line-height: 1.5em; text-transform: none;}
main#med-chem .sa-holder{width: 100%; float: left; margin-top: 40px; display: flex; align-items: center; justify-content: space-between;}
main#med-chem .sa-holder section{width: 60%; float: left;}
main#med-chem .sa-holder aside{width: 30%; float: left;}
main#med-chem .sa-holder aside h2{line-height: 1.5em;}
main#med-chem .holder h2.wa-mc{font: normal 20px 'century_gothicregular'; letter-spacing: 0.04em; line-height: 1em;}
main#cdmo{width: 100%; float: left;}
main#cdmo .sa-holder{width: 100%; float: left; margin-top: 40px; display: flex; align-items: center;}
main#cdmo .sa-holder section{width: 70%; float: left; text-align: right;}
main#cdmo .sa-holder section img{width: 700px; border-radius: 40px;}
main#cdmo .sa-holder aside{width: 30%; float: left;}
main#cdmo .sa-holder aside h4 {font: normal 18px 'barlowsemibold'; color: #161616; letter-spacing: 0.05em; line-height: 1.5em; text-transform: uppercase; word-spacing: 0.1em;}
main#cdmo .holder{width: 100%; float: left; margin-top: 40px;}
main#cdmo .holder .cc-holder{width: 90%; display: flex; flex-direction: row; justify-content: space-between; margin: 40px auto 0; flex-wrap: wrap;}
main#cdmo .holder .cc-holder .cc-items{width: 45%; display: flex; flex-direction: column; margin-bottom: 40px; border: 1px solid #c0c0c0; padding: 30px 40px 0px;}
main#cdmo .holder .cc-holder h3{font: normal 13px 'barlowsemibold'; letter-spacing: 0.1em; line-height: 1.5em; color: #000;}
main#cdmo .holder .cc-holder p{margin: 20px 0 0; font: normal 14px 'barlowregular'; line-height: 1.5em;}
main#cdmo .holder .cc-holder ul{margin: 25px 0 10px 14px; list-style: square;}
main#cdmo .holder .cc-holder ul li{font: normal 14px 'barlowregular'; line-height: 1.5em;}
main#cdmo .holder h2.wa-mc{font: normal 20px 'century_gothicregular'; letter-spacing: 0.04em; line-height: 1em;}
main .pv-sa-holder{width: 100%; float: left; margin-top: 40px; display: flex; align-items: center; justify-content: space-between;}
main .pv-sa-holder section{width: 60%; float: left;}
main .pv-sa-holder aside{width: 30%; float: left;}
main .pv-sa-holder aside h2{line-height: 1.5em;}
main#career .holder{width: 100%; float: left; margin-top: 40px;}
main#career .holder h2{font: normal 20px 'century_gothicregular'; letter-spacing: 0.04em; line-height: 1em;}
main#career .holder h4 {font: normal 16px 'barlowsemibold'; color: #161616; letter-spacing: 0.05em; line-height: 1.5em; text-transform: none; word-spacing: 0.1em;}
main#blog .holder{width: 90%; float: left; margin-top: 40px; display: flex; justify-content: space-between;}
main#blog .holder section{width: 75%; float: left;}
main#blog .holder aside{width: 20%; float: left;}
main#blog .holder h2{font: normal 18px 'century_gothicregular'; letter-spacing: 0.04em; line-height: 1em;}
main#blog .holder h3 {font: normal 13px 'barlowsemibold'; color: #161616; letter-spacing: 0.05em; line-height: 1.5em; text-transform: none; word-spacing: 0.1em;}
main#blog .holder h4 {font: normal 13px 'barlowsemibold'; color: #161616; letter-spacing: 0.05em; line-height: 1.5em; text-transform: uppercase; word-spacing: 0.1em;}
main#blog .holder h4 a{font: normal 13px 'barlowsemibold'; color: #161616; letter-spacing: 0.05em; line-height: 1.5em; text-transform: uppercase; word-spacing: 0.1em; border-bottom: 2px dotted #888888;}
main#blog .holder h4 a:hover{font: normal 13px 'barlowsemibold'; color: #f5871f; letter-spacing: 0.05em; line-height: 1.5em; text-transform: uppercase; word-spacing: 0.1em; border-bottom: none;}
main#article{width: 100%; float: left;}
main#article h1{font: normal 25px 'century_gothicregular'; line-height: 1em;}
main#article h2{font: normal 18px 'century_gothicregular'; letter-spacing: 0.04em; line-height: 1em;}
main#article h3 {font: normal 13px 'barlowsemibold'; color: #161616; letter-spacing: 0.05em; line-height: 1.5em; word-spacing: 0.1em; margin-top: 20px;}
main#article .holder{width: 100%; float: left; margin-top: 40px; display: flex; align-items: center; justify-content: space-between;}
main#article .holder section{width: 55%; float: left;}
main#article .holder aside{width: 40%; float: left;}
main#article .holder aside img{width: 100%; max-width: 500px;}
main#article .holder2{width: 100%; float: left; margin-top: 60px;}
/*--INNERPG ENDS--*/