@charset "utf-8";

/*common css start*/
@media (prefers-reduced-motion:no-preference) {
   :root { scroll-behavior: initial !important; }
}
*:focus { outline: none; }
body { margin: 0px; padding: 0px; background-color: #fff; color: #444444; font-family: "Google Sans", sans-serif; font-size: 24px; font-style: normal; font-weight: 400; line-height: 36px; }
a { -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; }
p { margin-bottom: 20px; }
a { color: #231069; cursor: pointer; text-decoration: none; outline: none; }
a:hover { color: #444444; text-decoration: none; }
ul, li { list-style: none; margin: 0px; padding: 0px; }
img { border: 0; vertical-align: middle; height: auto; max-width: 100%; }
.left-padding { padding-left: calc(((100% - 1512px) - 30px) / 2); }
.right-padding { padding-right: calc(((100% - 1512px) - 30px) / 2); }
.mob .row [class*="col-"]:first-child { margin-top: -50px; }
strong { font-weight: 700; }

/*heading css*/
h1, h2, h3, h4, h5, h6, .th1, .th2, .th3, .th4, .th5, .th6 { color: #231069; font-weight: 500; line-height: 1.1; margin: 0px; padding: 0px; font-family: "Google Sans", sans-serif; }
h1, .th1, h2, .th2 { font-size: 100px; line-height: 1.1; letter-spacing: -4px; margin-bottom: 30px; }
h3, .th3 { font-size: 70px; margin-bottom: 20px; letter-spacing: -3px; }
h4, .th4 { font-size: 50px; margin-bottom: 20px; }
h5, .th5 { font-size: 36px; margin-bottom: 20px; }
h6, .th6 { font-size: 18px; margin-bottom: 20px; }
.titleanim { letter-spacing: -3px; }

/*extra heading & text*/
.t250 { font-size: 250px; letter-spacing: -5px; text-transform: uppercase; line-height: 1; }
.t150 { font-size: 150px; line-height: 1; letter-spacing: -8px; }
.t150 .split-word .char-mask { padding-right: 5px; }
.t80 { font-size: 80px; }
.t50 { font-size: 50px; line-height: 1.2; letter-spacing: -1px; }
.t36 { font-size: 36px; line-height: 1.3; }
.t30 { font-size: 30px; line-height: 1.2; }
.t24 { font-size: 24px; line-height: 1.2; }
.t20 { font-size: 20px; line-height: 1.2; }
.t18 { font-size: 18px; line-height: 1.2; }
.tlspace { letter-spacing: 0px; }
.twhite { color: #fff; }

/*font-weight*/
.fwr { font-weight: 400; }
.fwm { font-weight: 500; }
.fws { font-weight: 600; }
.fwb { font-weight: 700; }
.fw-italic { font-style: italic; }

/*button start*/
ins { text-decoration: none; }
button { border: none; }
button:focus { outline: none; }
.btn-theme { display: inline-flex; outline: 0px; position: relative; transition: all .5s ease; color: #231069; font-weight: 400; line-height: 1; padding: 15px 25px; border: 1px solid #231069; font-size: 18px; }
.btn-theme:hover { background-color: #231069; color: #fff; }
.btn-theme::after { content: ""; background-image: url(../images/btn-arrow-right-white.svg); background-position: center; background-repeat: no-repeat; width: 0px; height: 15px; margin-top: 2px; transition: all 0.3s ease; transform: translateX(-10px) }
.btn-submit { display: inline-flex; outline: 0px; position: relative; transition: all .5s ease; border: 1px solid #231069; }
.btn-submit:hover { background-color: #231069; color: #fff; }
.btn-submit::after { content: ""; position: absolute; right: 20px; top: 17px; transform: translateX(-10px); background-image: url(../images/btn-arrow-right-white.svg); background-position: center; background-repeat: no-repeat; width: 0px; height: 15px; transition: all 0.3s ease; transform: translateX(0px) }
.btn-submit input[type="submit"] { color: #231069; font-weight: 400; line-height: 1; padding: 15px 25px; font-size: 18px; line-height: 1; background-color: transparent; border: none; transition: all 0.3s ease; }
.btn-submit:hover input[type="submit"] { color: #fff; padding-right: 45px; }
.btn-submit:hover::after { width: 16px; transform: translateX(0px); background-size: 16px; }
.btn-circle { transition: all 0.3s ease; width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; background-color: #fff; background-image: url(../images/btn-arrow-blue.svg); background-position: center; background-repeat: no-repeat; border: 1px solid #fff; }
.btn-circle:hover { background-color: transparent; background-image: url(../images/btn-arrow-white.svg); }
.btn-circle-blue { background-color: #231069; background-image: url(../images/btn-arrow-white.svg); border-color: #231069; }
.btn-circle-blue:hover { background-image: url(../images/btn-arrow-blue.svg); background-color: #ffffff; }
.btn-line-text { position: relative; font-size: 18px; padding-bottom: 10px; font-weight: 500; color: #231069; line-height: 1; position: relative; }
.btn-line-text:hover { color: #231069; }
.btn-line-text::before { content: ''; bottom: 0px; left: 0px; position: absolute; background-color: #231069; width: 100%; height: 1px; }
.btn-line-text::after { content: ''; position: absolute; right: -25px; top: 4px; background-image: url(../images/btn-arrow-right-blue.svg); width: 17px; height: 13px; opacity: 0; transform: translateX(-10px); transition: all 0.3s ease; }
.btn-line-text:hover::after { opacity: 1; transform: translateX(0px); }

/*bullet*/
.bullet-list ul li:before { content: ""; position: absolute; top: 12px; left: 0px; height: 14px; width: 17px; background: url(../images/bullet-img.svg) no-repeat; }
.bullet-list ul li { position: relative; padding-left: 30px; margin-bottom: 10px; }

/*margin-top*/
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-15 { margin-top: 15px; }
.mt-30 { margin-top: 30px; }
.mt-50 { margin-top: 50px; }
.mt-70 { margin-top: 70px; }
.mt-100 { margin-top: 100px; }
.mt-24 { margin-top: 24px; }

/*margin-bottom*/
.mb0 { margin-bottom: 0px; }
.mb-0 { margin-bottom: 0px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }
.mb-80 { margin-bottom: 80px; }
.mb-90 { margin-bottom: 90px; }
.mb-100 { margin-bottom: 100px; }
.mb-150 { margin-bottom: 150px; }
.mb-180 { margin-bottom: 180px; }
.mb-200 { margin-bottom: 200px; }
.mb-230 { margin-bottom: 230px; }
.mb-250 { margin-bottom: 250px; }
.mb-300 { margin-bottom: 300px; }

/*padding-top*/
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-30 { padding-top: 30px; }
.pt-50 { padding-top: 50px; }
.pt-100 { padding-top: 100px; }
.pt-300 { padding-top: 300px; }

/*padding-bottom*/
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }
.pb-25 { padding-bottom: 25px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pb-50 { padding-bottom: 50px; }
.pb-70 { padding-bottom: 70px; }
.pb-80 { padding-bottom: 80px; }
.pb-90 { padding-bottom: 90px; }
.pb-100 { padding-bottom: 100px; }
.pb-150 { padding-bottom: 150px; }
.pb-300 { padding-bottom: 300px; }
.pt-250 { padding-top: 250px; }
.pb-250 { padding-bottom: 250px; }
.pl-100 { padding-left: 100px; }
.pr-100 { padding-right: 100px; }

/*form start*/
input[type="submit"], input[type="button"], button[type="submit"], button[type="button"] { outline: none; }
label { display: inline-block; max-width: 100%; }
textarea { resize: none; height: 110px; border-radius: 20px; }
.form-control { display: block; width: 100%; height: auto; padding: 0px 0px 20px; font-size: 20px; line-height: 1; color: #231069; border: 0px; transition: all 0.8s ease; border-bottom: 1px solid #CCCCCC; box-shadow: none; font-weight: 400; text-overflow: ellipsis; border-radius: 0px; }
.form-control:focus, .input-text:focus { color: #231069; border-bottom: 1px solid #231069; outline: 0; box-shadow: none; }
.form-control::-webkit-input-placeholder { color: #999999; font-weight: 400; }
.form-control::-moz-placeholder { color: #999999; opacity: 1; font-weight: 400; }
.form-control::-ms-input-placeholder { color: #999999; font-weight: 400; }
.form-control:focus::-webkit-input-placeholder { color: #231069; font-weight: 400; }
.form-control:focus::-moz-placeholder { color: #231069; opacity: 1; font-weight: 400; }
.form-control:focus::-ms-input-placeholder { color: #231069; font-weight: 400; }
textarea.form-control, textarea { height: 100px; }
select.form-control, select { line-height: 1.2; background-image: url(../images/arrow-select.svg); background-repeat: no-repeat; background-position: calc(100% - 12px) 50%; }
.form-group { margin-bottom: 20px; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { appearance: none; -moz-appearance: textfield; -webkit-appearance: none; }
input[type="date"]::-webkit-inner-spin-button { display: none; }
input[type="date"]::-webkit-calendar-picker-indicator { color: rgba(0, 0, 0, 0); opacity: 1; background-image: none; background: transparent; }
input[type="radio"], input[type="checkbox"] { cursor: pointer; }
.form-group { margin-bottom: 20px; z-index: 1; }
.form-check-input[type=checkbox] { border-radius: 0px; }
.form-check-input { margin-top: 8px; border-radius: 0px; border-color: #000; }
.form-check-input:focus { border-color: #000; box-shadow: none; }
.form-check-input:checked:focus { border-color: #0d6efd; }
.wpcf7-spinner { position: absolute; margin-left: 40px; bottom: -30px; }
.wpcf7 form.sent .wpcf7-response-output { line-height: 24px; background: #dff0d8; border: 1px solid #c3e6cb; margin: 20px 0 0; padding: 7px 12px; color: #155724; position: relative; z-index: 1; border-radius: 5px; font-size: 16px; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { line-height: 24px; background: #f8d7da; border: 1px solid #f5c6cb; margin: 20px 0 0; padding: 7px 15px; color: #721c24; position: relative; z-index: 1; border-radius: 5px; font-size: 16px; text-align: left; }
span.wpcf7-not-valid-tip { color: #ed1c24; position: relative; text-align: left; font-size: 14px; }
.wpcf7-response-output { max-width: 1256px; width: 100%; margin: 0 auto; }
/*.contactfrmrow span.wpcf7-not-valid-tip { color: #fff; }*/

/*vc plugin css start*/
.vc_row { margin: 0px !important }
.vc_column_container>.vc_column-inner { padding: 0px !important }

/*img-scale*/
.slick-dots { left: 0px; }
.img-scale { overflow: hidden; }
.img-scale img { transition: all 0.3s ease; transform: scale(1); }
.img-scale:hover img { transition: all 0.3s ease; transform: scale(1.1); }
.borderal { border: 1px solid #000000 }
.border-radius-20 { border-radius: 20px; }
section.d-inline-block { vertical-align: top; }
.h-spacer { height: 100vh; }
.split-word, .split-line { display: inline-block; vertical-align: top; line-height: 1; }
.split-word .char-mask { padding-bottom: 10px; padding-right: 2px; }
.centerclipmask img { transform-origin: center; }
.lefttopvector { position: absolute; left: 0px; top: 0px; }
.righttopvector { position: absolute; right: 0px; top: 0px; }
.leftbottomvector { position: absolute; left: 0px; bottom: 0px; }
.rightbottomvector { position: absolute; bottom: 0px; right: 0px; }
.textLoad .split-word { opacity: 0; }
.textLoad .split-char, .titleanim .split-char, .paraload { transform: translateX(-250px) scaleX(1.5); }
.paraload, .wordbg { opacity: 0; }
.fadeUpElem, .fadeUpLoad { transform: translateY(50px); opacity: 0; }
.graybg { background-color: #F5F5F5; }
.arrowblue .slick-prev { left: -60px; }
.arrowblue .slick-next { right: -60px; }
.text-blue { color: #231069; }

/*common css End*/

/*header-css-start*/
.logo a, .logo { line-height: 1; display: block; }
.mainheader { width: 100%; position: fixed; top: 0; z-index: 20; transition: all 0.3s ease; }
.navheader { position: relative; transition: all 0.3s ease; padding: 30px 100px; }
.mainheader.sticky .navheader { background: rgba(221, 221, 221, 0.3); backdrop-filter: blur(15px); padding-top: 20px; padding-bottom: 20px; }
.menuoffcanvas { transform: translateX(100%); transition: all 0.5s ease; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); z-index: 30; position: fixed; height: 100%; width: 100%; top: 0; right: 0; backface-visibility: hidden; overflow: hidden; will-change: transform; }
.menuoffcanvas.slide { transform: translateX(0); }
.menuoffcanvas .container { height: 100%; }
.menugridrow { height: 100%; }
.menulogocol { width: 55%; display: flex; flex-direction: column; gap: 20px; justify-content: space-between; padding: 100px 50px 50px 100px; position: relative; }
.menulogocol h2 { font-weight: 700; letter-spacing: -2px; font-size: 80px; }
.navmenu { width: 45%; height: 100%; background-color: #231069; overflow: auto; padding: 100px 100px 50px 100px; position: relative; }
.navmenu>ul { margin: 0; padding: 0; }
.navmenu>ul>li { position: relative; list-style: none; margin-bottom: 30px; line-height: 1; }
.navmenu>ul>li>a { color: #fff; display: inline-block; font-size: 50px; line-height: 1; font-weight: 300; text-transform: capitalize; padding: 0px 0px 5px; position: relative; }
.navmenu>ul>li>a:after, .navmenu>ul>li>ul>li>a::after, .menubottom a::after { position: absolute; bottom: 0px; height: 2px; width: 0%; background-color: #fff; content: ""; left: 0px; bottom: 0px; transition: all 0.3s ease; }
.navmenu>ul>li>a:hover:after, .navmenu>ul>li.current-menu-item>a::after, .navmenu>ul>li>ul>li>a:hover:after, .menubottom a:hover::after,
.navmenu>ul>li.current-menu-ancestor>a::after, .navmenu>ul>li.current-menu-ancestor ul>li.current-menu-item>a::after { width: 100%; }
.navmenu>ul>li.current-menu-item>a, .navmenu>ul>li>a:hover, .navmenu>ul>li.current-menu-ancestor>a::after,.navmenu>ul>li.current-menu-ancestor ul>li.current-menu-item>a::after { color: #fff; }
.submenu-toggle { text-align: center; overflow: hidden; padding: 8px; display: inline-block; vertical-align: top; line-height: 0; cursor: pointer; margin-top: 12px; margin-left: 10px; }
.navmenu>ul>li ul { display: none; margin-top: 15px; }
.navmenu>ul>li>ul>li { margin-bottom: 20px; }
.navmenu>ul>li>ul>li:last-child { margin-bottom: 0px; }
.navmenu>ul>li>ul>li>a { font-size: 24px; color: #fff; position: relative; padding-bottom: 5px; }
.navmenu>ul>li:last-child { margin-bottom: 0px; display: none }
.closeBtn { line-height: 1; z-index: 5; position: absolute; top: 50px; right: 50px; width: 20px; height: 20px; border: none; background-color: transparent; padding: 0; transform: rotate(45deg); display: inline-flex; align-items: center; justify-content: center; }
.closeBtn::after { background-color: #fff; width: 100%; height: 2px; content: ''; display: inline-block; vertical-align: middle; transition: all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1); }
.closeBtn::before { background-color: #fff; height: 100%; width: 2px; position: absolute; top: 0; content: ''; transition: all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1); }
.navbtn { background-color: #231069; padding: 0px; width: 50px; height: 50px; border: 1px solid #231069; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; flex-direction: column; margin-left: 50px }
.icnline { background-color: #fff; position: relative; transition: all 0.3s ease; width: 26px; height: 2px; display: inline-block; line-height: 1; margin-bottom: 5px; }
.icnline:last-child { margin-bottom: 0px; }
.navbtn:hover { background-color: transparent; }
.navbtn:hover .icnline { Background-color: #231069; }
.submenu-arrow-icon { background-image: url(../images/menu-arrow-normal.svg); background-position: center; background-repeat: no-repeat; width: 22px; height: 20px; display: inline-block; transition: all 0.3s ease; background-size: contain; }
.submenu-arrow-up { transform: rotate(-180deg); }
.menuopen { overflow: hidden; padding-right: 17px; }
.menulogocol, .navmenu { opacity: 0; transform: translateX(100%); transition: all 1s ease 0.5s; }
.menuopen .menulogocol, .menuopen .navmenu { opacity: 1; transform: translateX(0px); }
.menubottom { position: absolute; bottom: 50px; left: 0px; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0px 100px; }
.menubottom a { color: #fff; font-size: 24px; line-height: 1; display: inline-block; position: relative; padding-bottom: 5px; }

/*header-css-end*/

/* homepage css start */
.heromobilesection { display: none; }
.counteritems { padding-bottom: 50px; margin-bottom: 50px; display: flex; align-items: center; border-bottom: 1px solid #ddd; transform: translateX(30%); opacity: 0; }
.counteritems span { font-size: 100px; font-weight: 500; color: #231A1C; line-height: 1; }
.counteritems:last-child { margin-bottom: 0px; }
.expertise-item { position: relative; opacity: 0.5; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #ddd; transition: all 0.3s ease; }
.expertise-item:last-child { margin-bottom: 0px; }
.expertise-item h4 { margin-bottom: 0px; letter-spacing: -2px; }
.expertise-head { display: flex; align-items: center; gap: 20px; cursor: pointer; margin-bottom: 20px; }
.expertise-head  span { color: #231A1C; font-weight: 500; }
.expertise-item .content { padding-left: 50px; padding-bottom: 20px; }
.expertise-item.active, .expertise-item:hover { opacity: 1; border-bottom: 1px solid #231069; }
.exp-content-wrap { display: none }
.progress { height: 1px; background: #ddd; overflow: hidden; position: absolute; bottom: 0px; width: 100%; }
.progress span { display: block; width: 0%; height: 100%; background: #231069; }
.expertise-item.active .progress span { animation: progressFill 5s linear forwards; }
.productlist { padding: 0px 100px; }
.productlist .row { margin: 0px -64px; align-items: flex-start; }
.productlist .row [class*="col-"] { padding: 0px 64px; margin-bottom: 100px; }
.prtitle { position: relative; position: absolute; top: 0px; left: 0px; z-index: 3; padding: 50px; transition: all 0.6s ease; }
.prtitle h4 { color: #ffffff; }
.productitem { display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.productitem::before, .productitem::after { content: ''; left: 0px; bottom: 0px; position: absolute; transition: all 0.6s ease; opacity: 0; }
.productitem::before { width: 100%; height: 100%; opacity: 0.3; z-index: 1; background-color: #000; }
.productitem::after { width: 50px; height: 50px; position: absolute; border-radius: 100%; z-index: 1; background-color: #231069; }
.productitem:hover::after { transform: scale(5); width: 100%; height: 100%; opacity: 1; }
.productitem:hover .prtitle { opacity: 1; transform: translateY(-10px); }
.prdimage { text-align: right; flex: 1; position: relative; }
.productitem .btn-circle { position: absolute; bottom: 40px; left: 40px; opacity: 0; z-index: 2; transform: translate(-10px, 10px); }
.productitem:hover .btn-circle { opacity: 1; transform: translate(0px, 0px); }
.productitem:hover h4 { color: #ffffff; }
.productlist .row:nth-child(odd) [class*="col-"]:nth-of-type(5n + 1) { margin-top: 150px; }
.productlist .row:nth-child(odd) [class*="col-"]:nth-of-type(5n + 3) { margin-top: 250px; }
.productlist .row:nth-child(odd) [class*="col-"]:nth-of-type(5n + 5) { margin-top: 150px; }
.productlist .row:nth-child(even) [class*="col-"]:nth-of-type(5n + 1) { margin-top: -100px; }
.productlist .row:nth-child(even) [class*="col-"]:nth-of-type(5n + 2) { margin-top: 150px; }
.productlist .row:nth-child(even) [class*="col-"]:nth-of-type(5n + 4) { margin-top: 150px; }
.colParallax { transform: translateY(150px); }
.stickygraybg { position: sticky; top: 0px; }
.wepromodernstyle { height: 100vh; display: flex; align-items: center; clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0); position: relative; z-index: 5; }
.capabliticol::before { content: ''; background-color: rgba(0, 0, 0, 0.2); top: 0px; left: 0px; right: 0px; bottom: 0px; position: absolute; transition: all 0.5s ease; }
.capabliticol h3 { margin-bottom: 0px; transition: all 0.5s ease; animation-name: fadeInUp; animation-duration: 0.5s; animation-fill-mode: both; }
.capabliticol:hover h3 { transform: translateY(0); animation-name: fadeInDown; animation-duration: 0.5s; animation-fill-mode: both; }
.imgcapcard { padding: 0px 50px 50px; position: absolute; bottom: 0px; left: 0px; right: 0px; color: #fff; }
.imgcapcard h3 { color: #fff; }
.capcontent { display: none; animation-name: fadeInDown; animation-duration: 0.5s; animation-fill-mode: both; margin-top: 20px; }
.capcontent p { margin-bottom: 30px; }
.capabliticol:hover .capcontent { animation-name: fadeInUp; animation-duration: 0.5s; animation-fill-mode: both; display: inline-block; }
.capabliticol:hover::before { background-color: rgba(0, 0, 0, 0.5); }
.capablitysrow { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); clip-path: polygon(0% 100%, 0% 100%, 0% 0%, 0% 0%); }
.catsliderpro .slick-slide { padding: 0px 12px; }
.slider-wrapper { position: relative; width: 100%; height: 700px; display: flex; justify-content: flex-end; padding: 0px 100px; }
.prjcarditem { position: absolute; width: 53.5%; will-change: transform, opacity; }
.imgcarprd { width: 100%; height: 600px; overflow: hidden; margin-bottom: 30px; }
.prjcarditem img { width: 100%; height: 100%; object-fit: cover; }
.slider-caption { z-index: 2; opacity: 0; visibility: hidden; }
.controls { position: absolute; top: 50%; left: 20px; right: 20px; display: flex; z-index: 9; transform: translateY(-50%); justify-content: space-between; margin-top: -20px }
.slide-arrow { font-size: 0; line-height: 0; display: inline-block; position: relative; width: 50px; height: 50px; padding: 0; cursor: pointer; outline: none; background-color: transparent; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; z-index: 1; border: 1px solid #ddd; background-repeat: no-repeat; background-position: center; }
.slide-arrow:hover { background-color: #231069; border-color: #231069; }
.slide-prev { background-image: url(../images/btn-arrow-left.svg); }
.slide-next { background-image: url(../images/btn-arrow-right.svg); }
.slide-prev:hover { background-image: url(../images/btn-arrow-left-white.svg); }
.slide-next:hover { background-image: url(../images/btn-arrow-right-white.svg); }
.imgsmthumb { position: absolute; right: 50px; bottom: 50px; }
.rightcolslide { padding-left: 100px; padding-top: 150px; padding-bottom: 150px; }
.imgsmthumb, .leftslidercol .slick-slide[aria-hidden="true"]:not(.slick-cloned) ~ .slick-cloned[aria-hidden="true"] .imgsmthumb { transition: all 0.5s ease; opacity: 0; transform: translate(50px, 50px); }
.leftslidercol .slick-current .imgsmthumb, .leftslidercol .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] .imgsmthumb { opacity: 1; transform: translate(0px, 0px); }
.thumborder, .navslidercol .slick-slide[aria-hidden="true"]:not(.slick-cloned) ~ .slick-cloned[aria-hidden="true"] .thumborder { border: 1px solid #D2D2D2; transition: all 0.3s ease; }
.navslidercol .slick-slide { padding: 0px 12px; }
.navslidercol .slick-current .thumborder, .navslidercol .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] .thumborder { border: 3px solid #231069; }
.rightcolslide { justify-content: space-between; }
.clintlogo { flex: 0 0 auto; width: auto; text-align: center; border-bottom: 1px solid #DDDDDD; border-top: 1px solid #ddd; border-right: 1px solid #DDDDDD; min-height: 288px; display: flex; align-items: center; justify-content: center; filter: grayscale(1); padding: 50px; }
.clintlogo:hover { filter: grayscale(0); }
.testislider .slick-slide { padding: 0px 12px; }
.testislider .slick-track { display: flex; flex-direction: row; }
.textslide { padding: 40px; margin-top: 20px; position: relative; min-height: 100%; }
.textslide p { margin-bottom: 10px; }
.quoteicn { margin-bottom: 50px; display: inline-block; }
.playiconbtn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.playicn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease; background-image: url(../images/play-icn.svg); background-position: center; background-repeat: no-repeat; width: 115px; height: 115px; }
.playicn:hover { background-image: url(../images/play-icn-hover.svg); }
.has-html5video .f-html, .has-youtube .f-html, .has-vimeo .f-html { max-width: 1280px; max-height: 720px; }
.rotationtext { animation: spin 10s linear infinite; will-change: transform; }
@keyframes progressFill {
   from { width: 0%; }
   to { width: 100%; }
}
@keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

/* homepage css end */

/* footer css start */
.mainfooter { color: #958CB5; position: relative; background-color: #231069; padding-top: 150px; font-size: 20px; }
.mainfooter a { color: #958CB5; }
.mainfooter a:hover { color: #ffffff; }
.mainfooter h4 { margin-bottom: 40px; }
.mainfooter h2, .mainfooter h3, .mainfooter h4 { color: #fff; }
.infofooter { display: inline-flex; align-items: flex-start; width: 100%; }
.infofooter i { font-style: normal; width: 25px; flex-shrink: 0; font-weight: 700; }
.footermenucol { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
.footermenucol h4 { margin-bottom: 15px; }
.footmenulink ul li { margin-bottom: 5px; }
.footmenulink ul li a, .infofooter a { color: #958CB5; position: relative; display: inline-block; padding-bottom: 5px; line-height: 1; }
.footmenulink ul li a:after, .infofooter a:after { position: absolute; bottom: 0px; height: 2px; width: 0%; background-color: #fff; content: ""; left: 0px; bottom: 0px; transition: all 0.3s ease; }
.footmenulink ul li a:hover:after, .infofooter a:hover::after { width: 100%; }
.socialicon { display: flex; align-items: flex-start; }
.socialicon a { border: 1px solid #958CB5; padding-bottom: 0px; width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; margin-right: 20px; }
.socialicon a svg { fill: #958CB5; }
.socialicon a:hover { border: 1px solid #ffffff; background-color: #ffffff; }
.socialicon a:hover svg { fill: #231069; }
.calltocation h2 { color: #DDDDDD }
.calltocation a { color: #ddd; transition: all 0.3s ease; }
.calltocation a:hover { color: #231069; }

/* footer css start */

/* canvas css start */
.hmheroelement { height: 1300vh; }
.video-stage { position: sticky; top: 0px; height: 100vh; width: 100%; overflow: hidden; }
.hero-poster { object-fit: contain; object-position: center center; opacity: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; z-index: 2; pointer-events: none; margin-top: 100px; }
.hero-canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; }
.cptlogoheader { position: absolute; top: 50%; left: 0; width: 100%; padding: 0 100px; z-index: 2; transform: translateY(-50%); }
.cptlogoheader img { width: 100%; transform-origin: left; }
.homeheader { top: -100px; transition: top 0.5s ease; }
.homeheader.sticky { top: 0px; }
.productcanvasrow { height: 550vh; }
.pc-banner-canvas { height: 600vh; }

/* canvast css end */
.pagetopoffset { padding-top: 250px; }

/* blog listing */
.bloglistcontent h5 { margin-bottom: 0px; }
.datacol { font-size: 18px; line-height: 1; }
.datacol span { color: #444444; }
.datacol a { font-weight: 500; }
.blogitemrow > [class*="col-"]:nth-child(4n + 3) { margin-top: 100px; }
.blogitemrow > [class*="col-"]:nth-child(4n + 3) .blogimglist a { height: 616px; display: block }
.blogitemrow > [class*="col-"]:nth-child(4n + 3) .blogimglist img { height: 100%; width: 100%; object-fit: cover; }
.loadmorebtn { width: 100%; text-align: center; display: inline-block; margin-bottom: 150px; }
.paginav { color: #444444; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; }
.paginav a, .paginav span { text-decoration: none; margin: 0px; margin-right: 10px; text-align: center; font-size: 20px; width: 50px; height: 50px; line-height: 50px; color: #fff; }
.paginav span.arrow-previous, .paginav span.arrow-next { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-right: 0px; }
.paginav a { border: 1px solid #444444; }
.paginav span.current, .paginav a:hover { border-color: #231069; background-color: #231069; }
.arrow-previous::before, .arrow-next::before { height: 15px; width: 17px; content: ''; transition: all 0.3s ease; display: inline-block; }
.arrow-previous::before { background: url(../images/btn-arrow-left-blue.svg) center center no-repeat; }
.arrow-next::before { background: url(../images/btn-arrow-right-blue.svg) center center no-repeat; }
.paginav a:hover .arrow-previous::before { background-image: url(../images/blog-arrow-left-white.svg); }
.paginav a:hover .arrow-next::before { background-image: url(../images/blog-arrow-right-white.svg); }
.blogtitledetail { padding-left: 12px; }
.blogdatsticky { position: sticky; top: 120px; margin-bottom: 30px; padding-left: 12px; }
.blogdetailrow .datecol { font-size: 30px; }
.blogdetailrow .datecol span { display: block; }
.blogdetailcontent { padding-right: 200px; }
.blogdetailcontent p { margin-bottom: 30px; }
.blogdetailcontent h2, .blogdetailcontent h3, .blogdetailcontent h4, .blogdetailcontent h5 { margin-bottom: 20px; letter-spacing: -3px; }
.blogdetailcontent h2 { font-size: 70px; }
.blogdetailcontent h3 { font-size: 50px; }
.blogdetailcontent h4 { font-size: 36px; letter-spacing: -2px; }
.blogdetailcontent h5 { font-size: 30px; letter-spacing: -2px; }
.blogdetailcontent ul { margin-bottom: 30px; }
.blogdetailcontent ul li ul { margin-top: 15px; }
.blogdetailcontent ul li, .blogdetailcontent ol li { margin-bottom: 5px; }
.blogdetailcontent ol>li:last-child { margin-bottom: 0px }
.blogdetailcontent ol { margin-bottom: 20px; counter-reset: item; display: inline-block; width: 100%; padding-left: 0px; }
.blogdetailcontent ol li { margin-bottom: 5px; }
.blogdetailcontent ol ol, .blogdetailcontent ol li ul { padding-left: 20px; margin: 15px 0px 10px; }
.blogdetailcontent ol li::before { content: counters(item, ".") ". "; counter-increment: item; }
.blogdetailcontent ol li ul li::before { content: ''; }
.blogdetailcontent img { margin: 20px 0px; display: inline-block; }
.blogdetailnav { display: inline-flex; justify-content: space-between; width: 100%; margin-top: 50px; border-top: 1px solid #DDDDDD; padding-top: 30px; }
.blogdetailnav .prevblog.btn-line-text::after { left: -25px; right: auto; top: 2px; background-image: url(../images/btn-arrow-left-blue.svg); transform: translateX(10px); }
.blogdetailnav .prevblog.btn-line-text:hover::after { transform: translateX(0px); }
.categoryrow { display: flex; justify-content: space-between; }
.categorybtn { width: 25%; text-align: right; }
.category-list { width: 70%; }
.category-list ul { display: none; }
.category-list ul li { display: inline-block; vertical-align: top; margin-right: 15px; margin-left: -3px; overflow: hidden; padding: 10px 0px; }
.category-list ul li a { font-size: 36px; color: #cacaca; transform: translateY(50px); transition: all 0.5s ease 0.1s; display: inline-block; }
.category-list ul li a:hover, .category-list ul li.active a { color: #231069; }
.category-list ul li:before { content: '/'; font-size: 36px; color: #cacaca; margin-right: 15px; transform: translateY(50px); transition: all 0.5s ease 0.1s; display: inline-block; }
.category-list ul li:first-child:before { content: '' }
.category-list ul li sup { margin-left: 5px; }
ul.catOpen li a, ul.catOpen li:before { transform: translateY(0px); }
.otherbloglist .blog-box { margin-bottom: 0px; }

/* blog listing */
.contactinfo { display: inline-flex; align-items: center; gap: 20px; line-height: 1; flex-wrap: wrap; }
.contactinfo i { flex-shrink: 0; }
.contactinfo a { color: #444444; }
.contactinfo a:hover { color: #231069; }
.marqeetopabs { position: absolute; top: 200px; z-index: -1; }
.marqueetrack { display: flex; width: max-content; gap: 50px; will-change: transform; animation: scrollLogos 30s linear infinite; -webkit-animation: scrollLogos 30s linear infinite; }
.borderbottomtitle { border-bottom: 1px solid #DDDDDD; padding-bottom: 30px; }
.newsitemsrow .bloglistcontent h5 { margin-bottom: 30px; }
.newslistinrow .paginav { justify-content: flex-end; }
.newsitemsrow > [class*="col-"]:nth-child(4n + 4), .newsitemsrow > [class*="col-"]:nth-child(4n + 1) { margin-top: 50px; }
.newsdetailrow .blogdetailcontent { padding-right: 12px; }
.careersidebar { transition: all 0.5s linear; display: flex; flex-wrap: wrap; width: 100%; position: fixed; top: 0px; right: -100%; height: 100vh; background-color: #231069; z-index: 100; }
.careersidebar.slide { right: 0%; }
.OverlayCareers { z-index: 100; }
.jobtitle { margin-bottom: 20px; }
.jobtitle p { margin-bottom: 5px; }
.careersfrm { width: 40%; padding: 100px; height: 100%; overflow: auto; position: relative; }
.caredetailcol { width: 60%; background-color: #fff; padding: 100px; height: 100%; overflow: auto; }
.uploadBox input[type="file"] { display: none; }
.uploadBox label { width: 100%; display: flex; justify-content: space-between; padding: 0px 0px 15px; border-bottom: 1px solid #fff; white-space: nowrap; cursor: pointer; font-size: 20px; line-height: 20px; }
.uploadBox label span { font-size: 16px; font-weight: 500; color: #ffffff; }
.uploadBox label span.filename { color: #999999; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-transform: none; width: 70%; letter-spacing: 0px; font-weight: 400; }
.uploadBox label.selected span.filename { color: #fff; }
.careersidebar .form-control { color: #fff; font-size: 18px; background-color: transparent; border-color: #958CB5; }
.careersidebar .form-control:focus { border-color: #fff; }
.careersidebar .form-control::-webkit-input-placeholder { color: #999999; font-weight: 400; }
.careersidebar .form-control::-moz-placeholder { color: #999999; opacity: 1; font-weight: 400; }
.careersidebar .form-control::-ms-input-placeholder { color: #999999; font-weight: 400; }
.careersidebar .form-control:focus::-webkit-input-placeholder { color: #fff; font-weight: 400; }
.careersidebar .form-control:focus::-moz-placeholder { color: #fff; opacity: 1; font-weight: 400; }
.careersidebar .form-control:focus::-ms-input-placeholder { color: #fff; font-weight: 400; }
.careersidebar .btn-submit input[type="submit"] { color: #fff; border: 1px solid #fff; }
.careersidebar .btn-submit::after { background-image: url(../images/btn-arrow-right-blue.svg); }
.careersidebar .btn-submit:hover { background-color: #fff; }
.careersidebar .btn-submit:hover input[type="submit"] { color: #231069; }
.careersidebar .wpcf7-not-valid-tip { color: #fff; line-height: 1; margin-top: 3px; }
.caredetailcol h3 { font-size: 50px; margin-bottom: 20px; }
.caredetailcol ul li { margin-bottom: 3px; }
.caredetailcol ul { margin-bottom: 25px; }
.careersfrm h3 { color: #fff; }
.careervacancy:first-child { border-top: 1px solid #ddd; }
.careervacancy { width: 100%; padding: 50px 0px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
.postvacancy { width: 65%; }
.expcol { width: 30%; color: #444444; }
.btn-arrow { background-image: url(../images/btn-arrow-right-blue.svg); width: 26px; height: 20px; background-size: 24px; background-repeat: no-repeat; }
.careervacancy:hover .btn-arrow { background-image: url(../images/btn-arrow-right-white.svg); }
.numbercol { width: 15%; color: #231A1C; }
.team-marquee { position: relative; overflow: hidden; padding: 0px 45px; }
.team-marquee-track { display: flex; flex-direction: row; width: max-content; gap: 24px; animation: teamMarquee 20s linear infinite; }
.team-card { display: inline-block; overflow: hidden; vertical-align: top; }
.imgleftcontentrow { padding: 0px 100px; }
.imgleftcontentrow h4 { font-weight: 400; color: #444444; letter-spacing: -1px; line-height: 1.3; }
.team-card img { max-width: 488px; max-height: 595px; }
@keyframes teamMarquee {
   from { transform: translateX(0); }
   to { transform: translateX(-50%); }
}
@keyframes scrollLogos {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
}
@media only screen and (min-width:1200px) {
   .fadeUpCard { transform: translateY(50px); opacity: 0; }
   .formulatedcard:hover { background-color: rgba(255, 255, 255, 0.08); }
   .formulatedcard:hover .formulatedcardimg { opacity: 1; }
   .formulatedcard:hover .formulatedcardimg img { transform: scale(1); }
   .formulatedcard:hover .formulatedcardtop { opacity: 0; }
   .formulatedcard:hover .formulatedcardsmallnum { opacity: 1; }
   .blogcontent .borderbox:hover .text-btn-arrow { transform: translateY(0px); opacity: 1; }
   .blogcontent .borderbox:hover p { transform: translateY(0); }
   .blogcontent .borderbox:hover { background-color: #FE000C; color: #fff; }
   .blogcontent .borderbox:hover h1 { color: #fff; }
   .stickyHorizontalrow, .productspecificrow { align-content: center; align-items: center; display: flex; flex: none; flex-direction: column; flex-wrap: nowrap; gap: 0px; height: min-content; justify-content: flex-start; overflow: visible; position: relative; width: 100%; }
   .stickymainwrapper { width: 100%; display: inline-flex; position: relative; flex-wrap: wrap; }
   .stickyhrwrapper { position: sticky; top: 20vh; overflow: hidden; display: flex; flex-wrap: wrap; }
   .hm-industries-wrap { padding: 0px calc((100% - 1512px) / 2); display: flex; flex: 1; will-change: transform; position: relative; transform-origin: left; align-items: center; }
   .hm-industries-wrap .borderbox { min-width: 488px; width: initial; margin-right: 30px; }
   .rightproductbox .borderbox { min-width: 744px; }
   .btn-theme:hover::after { width: 16px; margin-left: 10px; transform: translateX(0px); background-size: 16px; }
   .careervacancy:hover { background-color: #231069; color: #fff; padding: 50px 80px 50px 50px; }
   .careervacancy:hover h5, .careervacancy:hover .numbercol, .careervacancy:hover .expcol { color: #fff; }
}

/*rk*/
.marqueetrackstop { display: flex; width: max-content; flex-shrink: 0; will-change: transform; }
.marqueetrackstop:hover { animation-play-state: paused; -webkit-animation-play-state: paused; }
.marqueetrackstop a { margin-right: 24px; min-width: 360px; }
.btn-outline { border: 1px solid #DDD; display: inline-flex; align-items: center; outline: 0px; position: relative; transition: all .3s ease-out; line-height: 1; padding: 45px 0px; justify-content: center; overflow: hidden; color: #444; }
.btn-outline:hover { background-color: #231069; color: #fff; border-color: #231069; }
.btn-outline span { display: inline-block; vertical-align: top; transform: translateY(0px); transition: all 0.5s ease; }
.btn-outline:hover span { transform: translateY(-100px); }
.btn-outline::after { content: ''; width: 20px; height: 20px; background-size: 20px; background-image: url(../images/btn-arrow-white.svg); background-repeat: no-repeat; background-position: center; position: absolute; top: 50%; transform: translateY(100px); transition: all 0.5s ease; }
.btn-outline:hover::after { transform: translateY(-50%); }
.btn-outline span { display: inline-block; vertical-align: top; transform: translateY(0px); transition: all 0.5s ease; }
.bordergray { border: 1px solid #DDDDDD; }
.pd-perform-item { border-bottom: 1px solid #ddd; }
.pd-pattern-slide { padding: 20px 10px; text-align: center; }
.pd-pattern-slide, .pp-acoustics-items, .pp-certifications-items { margin: 0px 12px; }
.pd-pattern .slick-list.draggable, .pp-acoustics-slider .slick-list.draggable, .pp-certifications .slick-list.draggable { margin: 0px -12px; }
.pd-perform-item { display: flex; align-items: center; padding-bottom: 30px; margin-bottom: 0px; flex-wrap: wrap; min-height: 100%; padding-top: 50px; }
.pd-perform-item-img { width: 100px; }
.pd-perform-item-content { width: calc(100% - 100px); padding-left: 20px; }
.pd-perform-item-content p { margin-bottom: 5px; }
.pd-perform .row [class*="col-"]:first-child .pd-perform-item { padding-top: 0px; }
.pd-perform-title { position: sticky; top: 20vh; }
.pd-designedmore-img { text-align: right; margin-bottom: 70px; }
.pd-perform-item-title { position: relative; z-index: 2; }
.pd-designedmore-item { overflow: hidden; padding: 30px; position: relative; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; }
.pd-designedmore-item:hover::after { transform: scale(5); width: 100%; height: 100%; opacity: 1; }
.pd-designedmore-item::after { width: 50px; height: 50px; position: absolute; border-radius: 100%; z-index: 1; background-color: #231069; content: ""; content: ''; left: 0px; bottom: 0px; position: absolute; transition: all 0.6s ease; opacity: 0; }
.pd-designedmore-item:hover  p { color: #fff; }
.pd-designedmore-img { position: relative; z-index: 2; }
.pd-designedmore-item p { transition: color 0.6s ease; -webkit-transition: color 0.6s ease; }
.pd-designedmore-item svg path { transition: stroke 0.6s ease; -webkit-transition: stroke 0.6s ease; }
.pd-designedmore-item:hover svg path { stroke: #fff; }
.table { background-color: transparent; border-spacing: 0; border-radius: 0px; }
.table-bordered >:not(caption) > * > * { background-color: transparent; border-width: 1px; color: #444444; }
.table tr th, .table tr td { padding: 6px 20px; }
.table > thead > tr { background-color: #231069; }
.table > thead > tr > th { color: #fff; border-top-color: #231069; border-left-color: #231069; font-weight: 500; }
.table > thead > tr > th:last-child { border-right-color: #231069; }
.table > tbody > tr:nth-of-type(even) { background-color: #F5F5F5; }
.table > tbody > tr > td { border-bottom: 0px; font-size: 20px; }
.table > tbody > tr > td:last-child { border-left: 0px; }
.table > tbody > tr:last-child > td { border-bottom: 1px solid #CCCCCC; }
.pd-specification-table p { margin-bottom: 0px; }
.table-note { display: flex; justify-content: space-between; }
.table > tbody > tr.bg-skyblue td { background: #E6F6FF; }
.table > tbody > tr.bg-lightgreen td { background: #E8F5D4; }
.table > tbody > tr.bg-lightorange td { background: #FFEACC; }
.color-table .table > tbody > tr:nth-of-type(even) { background-color: transparent; }
.pd-component .slick-dots { bottom: -35px; }
.pd-iconcontent-img { padding-right: 30px; }
.pd-iconcontent-item { display: flex; align-items: center; border-bottom: 1px solid #DDDDDD; padding: 50px 0px 30px; min-height: 100%; }
.pd-iconcontent-content p { margin-bottom: 5px; }
.pd-options-items-title, .pp-acoustics-items-title, .pp-certifications-content { background: #231069; padding: 12px 12px; width: 100%; text-align: center; }
.pd-ci-item, .pd-options-items, .tv-people-item, .pd-acoustic-items,.pd-download-catalogues-items { margin: 0px 12px; }
.pd-component-right .slick-list.draggable, .pd-options .slick-list.draggable, .pd-otherproduct .slick-list.draggable, .sliderarrow .slick-list.draggable, .pd-acoustic-slider .slick-list.draggable, .sliderarrow .slick-list.draggable,.pd-download-catalogues-slider .slick-list.draggable { margin: 0px -12px; }
.pd-pattern .slick-prev, .pd-options .slick-prev, .pd-otherproduct .slick-prev, .sliderarrow .slick-prev, .pp-acoustics-slider .slick-prev, .pp-certifications .slick-prev, .pp-banner-slider .slick-prev, .pd-acoustic-slider .slick-prev,.pd-download-catalogues-slider .slick-prev { left: -70px; }
.pd-pattern .slick-next, .pd-options .slick-next, .pd-otherproduct .slick-next, .sliderarrow .slick-next, .pp-acoustics-slider .slick-next, .pp-certifications .slick-next, .pp-banner-slider .slick-next, .pd-acoustic-slider .slick-next,.pd-download-catalogues-slider .slick-next { right: -70px; }
.pd-otherproduct .pd-otherproduct-items { padding: 0px 12px; }
.pd-otherproduct  .prdimage img { width: 100%; }
.pc-banner-top { position: sticky; top: 0; left: 0; width: 100%; z-index: 10; }
.fa-team-section { min-height: 500vh; }
.pc-banner-canvas { opacity: 0; }
.pc-banner-canvas { margin-top: -70vh; }
.bg-blue { background-color: #231069; }
.table tr th { padding-top: 16px; padding-bottom: 16px; }
.fa-team-title { position: sticky; top: 25vh; padding-bottom: 20vh; }
.tv-people-top .row { align-items: end; }
.tv-people-content { padding-bottom: 20px; }
.tv-people-item-content { position: absolute; bottom: 0px; width: 100%; padding: 20px 30px; }
.tv-mission-wrap { height: 100vh; position: sticky; top: 0; width: 100%; }
.tv-mission-content { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); opacity: 0; }
.tv-mission-content-repeater .row { justify-content: space-between; }
.tv-mission-content-repeater { opacity: 0; position: absolute; width: 100%; left: 0; top: 0; transform: translateY(50px); }
.tv-mission-content-repeater:first-child { position: relative; }
.tv-mission-img { position: relative; clip-path: inset(100%); }
.tv-mission-img:after { content: ""; height: 100%; width: 100%; background: #000; top: 0; left: 0; position: absolute; opacity: 0.5; }
.extra-space { height: 200vh; }
.v-mission-content-left h2 { display: flex; }
.v-mission-content-left h2 span { padding-right: 30px; color: #FFF; font-size: 24px; padding-top: 20px; font-weight: 500; line-height: 1; letter-spacing: -0.48px; }
.tvmissionrow-pro { width: 100%; height: 3px; background: #797979; margin-bottom: 20px; overflow: hidden; }
.tvmissionrow-pro span { display: block; width: 100%; height: 100%; background: #ddd; transform: scaleX(0); transform-origin: left center; }
.tv-mission-img img { width: 100%; object-fit: cover; height: 100%; }
.tv-mission-img { height: 100%; }
.v-mission-content-left h2 { letter-spacing: -1px; }
.pcbannermobilesection { display: none; }
.pd-component .slick-track { margin: 0; }
.pd-component .pd-component-installation-sliderwrap + .pd-component-installation-sliderwrap { margin-top: 50px; }
.pd-component .slick-arrow { left: auto; right: 0px; top: -40px; transform: none; }
.pd-component .slick-prev { right: 35px; }
.pd-component .slick-arrow { height: 25px; width: 25px; }
.pd-component .slick-prev::before, .pd-component .slick-next::before { transform: scale(0.7); }
.pd-component .row { align-items: flex-start; }
.pd-component-left { position: sticky; top: 20vh; }
.pd-component-right-img { margin-top: 100px; }
.tss-develop-content { background-color: #231069; }
.tss-develop-content-wrap { position: absolute; right: 0px; width: 100%; bottom: 0px; }
.tss-develop-content { padding: 50px; }
.tss-design-left, .tss-design-right { display: flex; flex-direction: column; justify-content: space-between; }
.tss-systems-img { margin-left: -198px; }
.tss-systems-right { display: flex; flex-direction: column; justify-content: space-between; }
.tss-systems-bottom ul { margin-bottom: 20px; }

/**/
.tss-guides-item { position: relative; min-height: 234px; overflow: hidden; padding: 40px; background: transparent; color: #351064; transition: color 0.5s ease; }
.tss-guides-item::after { content: ""; position: absolute; left: 40px; bottom: 40px; width: 50px; height: 50px; border-radius: 50%; background-color: #231069; z-index: 0; transform: scale(0); transform-origin: center; opacity: 0; transition: transform 0.76s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; }
.tss-different-left { display: flex; flex-direction: column; justify-content: space-between; }
.tss-different-title h2 { white-space: nowrap; letter-spacing: -4px; }
.different-word { display: inline-block; position: relative; vertical-align: baseline; }
.different-word span { display: none; white-space: nowrap; }
.different-word span:first-child { display: inline-block; }
.pp-banner-img { position: relative; }
.pp-banner-img:after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); }
.pp-banner-height { position: absolute; top: 0; z-index: 1; width: 100%; height: 100vh; }
.pp-banner-img-wrap { height: 100vh; overflow: hidden; }
.pp-banner-img { height: 100vh; }
.pp-banner-title { padding-top: 100px; }
.pp-banner-wrap { display: flex; flex-direction: column; height: 100vh; justify-content: space-between; }
.pp-banner-content h4, .pp-banner-title h2, .pp-banner-item p { color: #fff; }
.safetycol { padding: 30px 30px 50px; display: block; }
.pp-banner-item-icon { text-align: right; margin-top: 60px; }
.pp-banner-item { background: #231069; margin: 0px 12px; }
.pp-banner .slick-track { margin: 0px; }
.pp-banner .slick-list.draggable { margin: 0px -12px; }
.document-popup { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9999; display: none; }
.document-popup.active { display: flex; align-items: center; justify-content: center; }
.document-popup-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); }
.document-popup-inner { position: relative; z-index: 2; max-width: 90%; max-height: 90%; }
.document-popup-image { display: block; max-width: 100%; max-height: 85vh; width: auto; height: auto; object-fit: contain; }
.document-popup-close { position: absolute; right: 0px; top: 0px; width: 50px; height: 50px; border: 0; background: #231069; z-index: 3; display: flex; align-items: center; justify-content: center; }
.document-popup .closeBtn { position: static; }
.pp-acoustics-img { text-align: center; }
.pp-standards-item { padding: 50px 0px; border-bottom: 1px solid #ddd; }
.tooltipcustom{display:inline-block;position:relative; margin: 0px 25px 5px;}
.stdtip {cursor: pointer; color: #444444; margin-top: 5px; margin-bottom: 5px;}
.stdtip::before{ content: ''; width: 100%; height: 1px;position: absolute;bottom:0px;left:0px; background-color: #231069; transform: scaleX(0); transition: all 0.3s ease;transform-origin: left;    }
.stdtip:hover { color: #231069; }
.stdtip:hover::before{ transform: scaleX(1); }
.tooltip-text {position: absolute;left: 0%;font-size:20px; top:calc(100% + 10px);opacity: 0;transform:translateY(10px); pointer-events: none;color: #444444;line-height: 1.1;min-width: 300px;}
.tooltipcustom:hover .tooltip-text {opacity: 1;pointer-events: auto;transition: all 0.3s ease;transform:translateY(0);}
.tss-systems-bottom h5 { color: #444444; font-weight: 400; line-height: 1.3; }
.tss-systems-bottom h5 strong { color: #231069; font-weight: 500; }


/* Align slides to the top */
.pp-certificate-name{position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;padding:0px 50px;}
.pp-certifications .slick-track { display: flex;justify-content: flex-start;   }
.pp-certifications .slick-slide { padding: 0px 12px;text-align:center;height:auto;min-height: 100%; }
.pp-certifications-items{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;margin:0px;}
.pp-certifications-img { position:relative;padding:0px 0px 20px;}
.pp-certifications-content{padding:20px;font-weight: 500;letter-spacing:-1px;line-height: 1.2;flex:1;display:flex;align-items:center;justify-content:center;text-align:center}
.pp-banner .slick-arrow { background-color: #231069; border: 1px solid #231069; opacity: 1; }
.pp-banner .slick-prev::before { background-image: url(../images/btn-arrow-left-white.svg); }
.pp-banner .slick-next::before { background-image: url(../images/btn-arrow-right-white.svg); }
.pp-banner .slick-arrow:hover { border-color: #fff; }
.pp-banner-img img { height: 100%; width: 100%; object-fit: cover; }
.projectlisting-row .gallery a:not(:first-child) { display: none; }
.projectlisting-row .gallery img { width: 100%; height: auto; object-fit: contain; }
.f-thumbs.is-horizontal .f-thumbs__track { padding-bottom: 40px; }
.projectlist-item-img { margin-bottom: 30px; }
.resourcesfixmenu { position: fixed; left: 0px; top: 50%; transform: translateY(-50%); opacity: 0; transition: all 0.3s linear; }
.resourcesfixmenu ul { width: 42px; }
.resourcesfixmenu ul li { position: relative; margin-bottom: 3px; }
.resourcesfixmenu ul li a { text-transform: uppercase; line-height: 42px; text-align: center; color: #231069; font-weight: 500; display: block; text-align: center; background-color: #F5F5F5; font-size: 20px; position: relative; }
.resourcesfixmenu ul li .floatingcol a { font-weight: 600; font-size: 18px; padding: 0px 20px; transition: all 0.2s linear; display: inline-block; letter-spacing: 0.9px; }
.resourcesfixmenu ul li .floatingcol a:hover, .resourcesfixmenu ul li a:hover { background-color: #231069; color: #fff; }
.resourcesfixmenu ul li .floatingcol { padding-left: 3px; visibility: hidden; white-space: nowrap; text-align: left; opacity: 0; position: absolute; left: -100%; top: 0px; z-index: -1; transition: all 0.3s linear; height: 100%; }
.resourcesfixmenu ul li:hover .floatingcol { opacity: 1; left: 100%; visibility: visible; }
.resourcesfixmenu { opacity: 1; z-index: 5; }
.pd-acoustic-img { text-align: center; padding: 20px; }
.pd-acoustic-content p { line-height: 1.7; }
.pd-ci-item-in { overflow: hidden; position: relative; }
.pd-acoustic-items-wrap { margin-bottom: 20px; }
.pd-tabrow .nav-tabs { border: navajowhite; margin-bottom: 30px; }
.pd-tabrow li.nav-item + li { margin-left: 60px; }
.pd-tabrow .nav-tabs .nav-link { transition: color 0.3s ease; background-color: transparent; color: #555555; position: relative; border: none; padding: 0 0 5px; }
/* Animated bottom border */
.nav-tabs .nav-link::after { content: ""; position: absolute; left: 0; bottom: 0px; width: 0; height: 1px; background-color: #231069; transition: width 0.4s ease; }

/* Active + Hover */
.nav-tabs .nav-item.show .nav-link::after, .nav-tabs .nav-link.active::after, .nav-tabs .nav-link:hover::after, .nav-tabs .nav-link:focus::after { width: 100%; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { color: #231069; border: none; opacity: 1; }
.pd-tab-content { display: flex; flex-wrap: wrap; margin: 0px -12px 5px; }
.pd-tab-item { margin: 0px 12px; width: calc(25% - 24px); margin-bottom: 24px; }
.pd-tab-item-title { padding: 20px; color: #444444; }
.pd-tab-item-img img { width: 100%; }
.pd-tabrow .row { align-items: flex-start; }
.pd-tabrow-left { position: sticky; top: 15vh; left: 0; margin-bottom: 40px; }
.pd-tabrow-right ul { background: #fff; position: sticky; top: 90px; z-index: 2; }
.pd-range-wrap {background: #F5F5F5;padding: 100px 0px;}
.pd-range-wrap .btn-submit {width: auto;}
.pd-range-wrap .form-control {background: transparent;border-color: #BBBBBB;}
.pd-range-wrap .form-control:focus,.pd-range-wrap .input-text:focus {border-bottom: 1px solid #231069; }
.pd-download-catalogues-title{color: #444444}
.product-details-vector {position: absolute;bottom: -150px;right: 0px;}
.product-details-vector img {max-width: 488px;}
.pd-ci-item-img {text-align: center;}
.pp-banner-slider .slick-track {display: flex; flex-direction: row;}
.pp-banner-slider .pp-banner-item{min-height: 100%;height:auto;}