@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Outfit:wght@100..900&display=swap');

@import url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/unicons.css");

html {
  scroll-behavior: smooth;
}

 /* Common */
:root { --primary-color: #FFC20E; --secondary-color: #F7F5EB; --tertiary-color: #002C43; --text-color: #00081A; --white-color: #fff; --black-color: #000; --outfit: "Outfit", sans-serif; --ibm-plex-sans: "IBM Plex Sans", sans-serif; --be-vietnam-pro: "Be Vietnam Pro", sans-serif; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extra-bold: 800; --font-weight-black: 900; --font-14:14px; --font-16:16px; --font-18:18px; --font-20:20px; --font-22:22px; --font-24:24px; --font-26:26px; --font-28:28px; --font-30:30px; --font-32:32px; --font-34:34px; --font-36:36px; --font-38:38px; --font-40:40px; --font-42:42px; --font-44:44px; --font-46:46px; --font-48:48px; --font-50:50px; --font-52:52px; --font-54:54px; --font-60:60px; --font-80:80px; }
body { font-family: "Outfit", sans-serif; background-color: var(--secondary-color); }
.primaryBtn { background-color: var(--primary-color); color: var(--black-color); padding: 15px 50px; border-radius: 30px; font-size: var(--font-16); font-weight: var(--font-weight-medium); transition: all 0.3s !important; text-transform: uppercase; border: 1px solid var(--primary-color); text-decoration: none; display: inline-block; font-family: var(--be-vietnam-pro); }
.primaryBtn:hover { background-color: transparent; color: var(--primary-color); }
.secondaryBtn { backdrop-filter: blur(10px); color: var(--white-color); padding: 13px 20px; border-radius: 30px; font-size: var(--font-16); font-weight: var(--font-weight-normal); transition: all 0.3s; border: 1px solid var(--primary-color); text-decoration: none; display: inline-block; font-family: var(--be-vietnam-pro); }
.secondaryBtn:hover { background-color: var(--primary-color); color: var(--black-color); }
.headingLine { position: relative; }
.headingLine:before { content: ''; position: absolute; top: calc(100% + 10px); left: 0; width: 160px; height: 36px; background: url(../images/heading-line.png) no-repeat left center / contain; }
.headingTringle { position: relative; }
.headingTringle:before { content: ''; position: absolute; bottom: calc(100% + 10px); left: 0; width: 65px; height: 65px; background: url(../images/heading-tringle.svg) no-repeat left center / contain; }
.sectionHeading { font-size: var(--font-60); font-weight: var(--font-weight-bold); text-transform: uppercase; line-height: 73px; letter-spacing: -1px; text-align: center; color: var(--text-color); width: 50%; margin: 0 auto; }
.primaryLink { font-size: var(--font-18); color: var(--primary-color); font-family: var(--ibm-plex-sans); }
table, td, th { border: 1px solid; }
table { width: 100%; border-collapse: collapse; }
.scrollOff { overflow: hidden; }
*::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; }
*::--webkit-media-controls-play-button { display: none !important; -webkit-appearance: none; }
*::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

/* width */
::-webkit-scrollbar { width: 5px; }

/* Track */
::-webkit-scrollbar-track { background: #f1f1f1; }

/* Handle */
::-webkit-scrollbar-thumb { background: var(--primary-color); }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #555; }

/* header css */
header { position: relative; top: 0; left: 0; width: 100%; z-index: 999; padding: 40px 0; }
.headerInner { display: flex; align-items: center; justify-content: space-between; }
main { margin: -144px 0 0 0; }
.blackHeader .defaultLogo { display: none; }
.blackLogo { display: none; }
.blackHeader .blackLogo { display: block !important; }
.blackHeader .headerOptions > ul { background: #0606061F; }
.blackHeader .headerOptions > ul li a { color: var(--black-color); }
.blackHeader .headerCta .secondaryBtn { background: #FFC20E38; color: var(--black-color); }
.mobileToggle { width: 50px; height: 50px; border-radius: 50%; background-color: #8C90984D; backdrop-filter: blur(10px); display: none; align-items: center; justify-content: space-between; flex-direction: column; padding: 15px 0; transition: all 0.3s; }
.mobileToggle span { display: block; width: 25px; height: 2px; background-color: #fff; border-radius: 20px; }

/* banner css */
section.banner { position: relative; height: calc(100vh + 590px); }
.banner>img, .banner> .iframe, .banner > video { width: 100%; height: 100%; object-fit: cover; }
.bannerInner { position: absolute; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; left: 50%; transform: translateX(-50%); }
.bannerHeading { font-size: var(--font-54); font-weight: var(--font-weight-bold); color: var(--white-color); text-transform: uppercase; width: 85%; text-align: center; }
.bannerInner .primaryBtn { margin-top: 30px; }
.bannerBottom { position: absolute; bottom: 0; border-top: 1px solid #fff; width: 100%; }
.bannerBottomInner { display: flex; justify-content: space-between; }
.IconText { text-align: center; padding: 100px 0; width: calc(100% / 3); border-right: 1px solid #fff; }
.IconText span { display: block; color: #fff; font-size: 28px; font-weight: 500; margin: 0 auto; }
.IconText:last-child { border-right: none; }
.bannerRockImage { position: absolute; bottom: 240px; left: 33%; transform: translateX(-50%); }
.bannerRockImage img { animation: floating 2.8s infinite ease-in-out; }
@keyframes floating {
	0% { transform: translateY(0); }
	50% { transform: translateY(-20px); }
	100% { transform: translateY(0); }
}
.bannerRock2Image { position: absolute; bottom: -50px; left: 66%; transform: translateX(-50%); width: 250px; z-index: 2; }
.bannerRock2Image img { animation: floating2 3s infinite ease-in-out; }
@keyframes floating2 {
	0% { transform: translateY(0); }
	50% { transform: translateY(-28px); }
	100% { transform: translateY(0); }
}
.lottie { width: 120px; aspect-ratio: 1; margin: 0 auto; }

/* produce css */
.produce { background-color: var(--secondary-color); position: relative; }
.produceInner:before { content: ''; position: absolute; top: 0; left: 100px; width: 1px; height: 0; background-color: var(--black-color); transition: all 0.5s; }
.in-viewport .produceInner:before { height: 130px; }
.waveImage img { width: 100%; height: auto; object-fit: cover; }
.produceInner { padding: 170px 0; position: relative; }
.produceHeading h2 { font-size: var(--font-48); font-weight: var(--font-weight-bold); color: var(--black-color); }
.produceContent span { font-size: var(--font-26); font-weight: var(--font-weight-semibold); color: var(--black-color); line-height: 54px; display: inline-block; }
.waveImage { position: relative; padding: 0 0 90px 0; }
.waveImage:before { content: ''; position: absolute; bottom: calc(100% - 65px); left: 50%; transform: translateX(-50%); width: 1px; height: 200px; transition: all 0.5s; background-color: var(--black-color); }

/* .in-viewport.waveImage:before { height: 200px; } */
.produceContent { padding: 0 0 0 100px; }

/* crushWell css */
.crushWell { background: url(../images/long-bg.png) no-repeat center center / cover; position: relative; overflow: hidden; padding: 0; }
.crushWellTop { background: url(../images/circle-bg.png) no-repeat center center; padding: 200px 0 400px; background-size: 110%; background-position: 50% -730px; position: relative; }
.crushWellTop:before { content: ''; position: absolute; top: calc(100% - 120px); left: 50%; transform: translateX(-50%); width: 250px; height: 180px; background: url(../images/rock-2.png) no-repeat center center / contain; animation: floatingRock 2.8s infinite ease-in-out; z-index: 1; }
@keyframes floatingRock {
	0% { transform: translateY(0) translateX(-50%); }
	50% { transform: translateY(-20px) translateX(-50%); }
	100% { transform: translateY(0) translateX(-50%); }
}
.crushWellHeading h2 { font-size: var(--font-40); font-weight: var(--font-weight-semibold); color: var(--white-color); line-height: 60px; }
.crushWellContent p { font-size: var(--font-22); font-weight: var(--font-weight-normal); font-family: var(--ibm-plex-sans); color: var(--white-color); line-height: 200%; margin: 0 0 20px 0; }
.crushWellContent .primaryBtn { margin-top: 30px; }
.crushWellInner { position: relative; z-index: 1; }
.crushWellInner:before { content: ''; position: absolute; bottom: -55%; left: -20%; width: 120%; aspect-ratio: 1; border-radius: 50%; border: 2px solid #ffffff5b; }
.crushWellInner:after { content: ''; position: absolute; background: url(../images/banner-rock.svg)center center no-repeat; width: 500px; height: 500px; bottom: 0; left: 50%; transform: translateX(-50%); background-size: contain; animation: floatingRock 2.5s infinite ease-in-out; z-index: -1; }
.mainCrushWell:after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 0; width: 1px; background-color: var(--white-color); z-index: -10; transition: all 1s; }
.in-viewport.mainCrushWell:after { height: 100vh; }
.mainCrushWell h2.headingTringle { font-size: var(--font-80); font-weight: var(--font-weight-semibold); line-height: 90px; display: inline-block; width: 50%; color: var(--white-color); }
.mainCrushWell { padding: 270px 0 50px 0; position: relative; }
.mainCrushWell:before { content: ''; background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000000 100%); width: 100%; height: 100%; position: absolute; bottom: 0; z-index: -1; transition: all 0.5s; }
.problemList span { font-size: var(--font-24); font-weight: var(--font-weight-semibold); color: var(--primary-color); text-transform: uppercase; display: block; position: absolute; bottom: 10px; }
.problemListing { display: flex; flex-direction: column; width: 80%; margin-left: auto; margin-top: -250px; position: relative; }
.learnMoreBtn { position: absolute; top: 50%; right: 160px; transform: translateY(-50%); z-index: 1; }
.problemListing .primaryBtn:hover { background-color: var(--black-color); color: var(--primary-color); border: 1px solid var(--black-color); }
.problemList { width: 525px; height: 525px; outline: 4px solid #ffffff42; display: flex; flex-direction: column; justify-content: center; align-items: center; backdrop-filter: blur(38.79999923706055px); box-shadow: 0px 65px 48.3px 0px #000000C7; border-radius: 50%; margin-left: auto; margin-block: -50px; text-align: center; position: relative; cursor: pointer; z-index: 1; }
.problemList img { width: 250px; height: auto; object-fit: cover; }
.problemList:first-child:before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 1px; height: 0; background-color: var(--white-color); transition: all 1s; }
.in-viewport.problemList:first-child:before { height: 100%; }
.problemList:nth-child(2) { margin-left: unset; }
.problemList:nth-child(2):before { content: ''; position: absolute; top: 50%; left: 100%; transform: translateY(-50%); width: 0; height: 1px; background-color: var(--white-color); transition: all 1s; }
.in-viewport.problemList:nth-child(2):before { width: 100vw; }
.mainCrushWell h2.headingLine { font-size: var(--font-40); font-weight: var(--font-weight-semibold); color: var(--white-color); line-height: 60px; width: 30%; margin: 70px 0 0 0; }
.problemList:hover img { animation: rotateRock 10s infinite linear; }
.CrushWellSwiper { display: none; }
.CrushWellSwiper .learnMoreBtn { display: none; }
@keyframes rotateRock {
	0% { transform: rotate(0); }
	100% { transform: rotate(360deg); }
}

/* swiperWrap css */
.swiperWrap { background-blend-mode: multiply; padding: 50px 0 150px 0; background: linear-gradient(0deg, rgba(0, 8, 26, 0), #000 96.71%); position: relative; }
.swiperWrap:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tertiary-color); z-index: -1; }
.swiper-scrollbar-drag { background-color: var(--white-color); position: relative; height: 5px; top: -2px; }
.swiper-scrollbar-drag:before { content: ''; background-color: var(--white-color); position: relative; left: -99vw; top: 0; position: absolute; bottom: 0; height: 100%; width: 100vw; z-index: 999; }
.swiperWrap .swiper { margin: 0 0 10px 22%; }
.swiperWrap .swiper-wrapper { margin: 0 0 75px 0; }
.swiperWrap .swiper-slide { height: auto; }

/* .swiperWrap .swiper { margin: 0 0 0 15%; } */
.slideContent { border: 2px solid transparent; padding: 50px 65px 50px 50px; border: 2px solid #ffc20e33; border-radius: 40px; overflow: hidden; color: #fff; background: url(../images/noice.png)center center no-repeat; background-size: cover; font-size: var(--font-18); line-height: 30px; font-family: var(--ibm-plex-sans); display: flex; flex-direction: column; justify-content: space-between; height: 100%; background-color: var(--tertiary-color); position: relative; min-height: 400px; }
.slideContent:before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(150.59deg, rgba(255, 255, 255, 0.45) 17.37%, rgba(255, 255, 255, 0) 101.21%, rgba(255, 255, 255, 0) 101.21%); top: 0; left: 0; }
span.slideName { font-size: 20px; font-weight: bold; font-family: 'Outfit'; }
.slideContent img { width: 30px; height: auto; object-fit: contain; }
.slideContent div span { display: block; margin: 15px 0 0 0; }
.swiper-scrollbar.swiper-scrollbar-horizontal { background-color: var(--primary-color); height: 2px; bottom: 10px; }
.swiper-scrollbar-drag:after { content: ''; position: absolute; top: -8px; right: 0; width: 20px; height: 20px; background-color: var(--primary-color); border-radius: 50%; }

/* operation css */
.operation { position: relative; z-index: 0; overflow: hidden; background-color: var(--secondary-color); }
.operation:before { content: ''; position: absolute; top: -250px; left: -150px; width: 500px; height: 500px; background: url(../images/operation-banner-bg.svg)no-repeat center center / cover; z-index: -1; transform: rotate(45deg); animation: rotateImage 15s infinite linear; }
@keyframes rotateImage {
	0% { transform: rotate(0); }
	100% { transform: rotate(-360deg); }
}
.operationMap img { width: 100%; }
.operationMap img { width: 100%; }
.locationIcon { width: 25px; height: auto; transition: all 0.5s; transform-origin: center center; }
.locationIcon img { width: 100%; height: auto; }
.office { position: absolute; cursor: pointer; width: 30px; height: 30px; }
.Office1 { bottom: 28%; left: 60%; }
.Office2 { top: 68%; left: 47%; }
.Office3 { bottom: 38%; left: 32%; }
.Office4 { bottom: 40%; left: 50%; }
.Office5 {top: 46%; left: 36%; }
.Office6 {top: 33%; left: 33%; }
.operationMapWrap { position: relative; padding: 120px 0 120px 50px; }
.operationInner .row .col-lg-4 { position: relative; }
.operationInner .row .col-lg-4:before { content: ''; position: absolute; width: 1px; height: 100%; background-color: var(--black-color); right: 0; top: 0; }
.operationBox { height: 100%; display: flex; flex-direction: column; justify-content: space-between; position: relative; padding: 210px 10px 160px 0; }
.operationBox:before { content: ''; position: absolute; width: 20px; height: 20px; background-color: var(--black-color); border-radius: 50%; right: -22px; top: 50%; transform: translateY(-50%); }
.operationHeading { font-size: 52px; font-weight: 700; line-height: 52px; text-transform: uppercase; color: var(--primary-color); }
.operationHeading span { color: var(--tertiary-color); }
.operationContent span { font-size: 24px; line-height: 46px; font-family: 'IBM Plex Sans'; display: inline-block; }
.operationInner .row .col-lg-4:after { content: ''; position: absolute; width: 100vw; height: 1px; background-color: var(--black-color); top: 50%; right: 0; z-index: -1; }
.locationName { padding: 5px 15px; border: 1px solid hsl(45deg 100% 53% / 60%); border-radius: 10px; overflow: hidden; color: #fff; background: url(../images/noice.png)center center no-repeat; background-size: cover; font-size: var(--font-14); height: auto; background-color: var(--tertiary-color); position: relative; opacity: 0; visibility: hidden; transition: all 0.5s; transform: translateX(-100%) translateY(20px);width: 120px; }
.locationName:before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(150.59deg, rgba(255, 255, 255, 0.45) 17.37%, rgba(255, 255, 255, 0) 101.21%, rgba(255, 255, 255, 0) 101.21%); top: 0; left: 0; }
.locationIcon:hover + .locationName { opacity: 1; visibility: visible; transform: translateX(-100%) translateY(0px); }
.locationName strong { display: block; }
.locationIcon:hover { transform: scale(1.2) rotate(45deg); filter: invert(35%) sepia(95%) saturate(300%) hue-rotate(1deg); }

/* ============================ */

/* team page css */

/* ============================ */
.paddingTop { padding: 250px 0 0 0; }
.teamMemberListing { margin: 115px 0; }
.teamMemberList { text-decoration: none; margin: 40px; display: inline-block; display: flex; flex-direction: column; justify-content: center; }
.memberDetail { text-align: center; width: 85%; margin-inline: auto; margin-top: 20px; }
.memberDetail strong { font-family: var(--ibm-plex-sans); font-size: var(--font-24); font-weight: var(--font-weight-semibold); display: block; color: var(--text-color); }
.memberDetail span { font-family: var(--ibm-plex-sans); font-size: var(--font-24); font-weight: var(--font-weight-normal); color: var(--text-color); }
.teamMemberListing > .row { position: relative; padding: 50px 0; }
.teamMemberListing > .row:before { content: ''; position: absolute; width: 1px; height: 100%; background-color: var(--black-color); left: calc(100% / 3); top: 0; }
.teamMemberListing > .row::after { content: ''; position: absolute; width: 1px; height: 100%; background-color: var(--black-color); left: calc((100% / 3) * 2); top: 0; }
.memberImage { width: 250px; aspect-ratio: 1; margin: 0 auto; }
.memberImage img { width: 100%; height: 100%; object-fit: contain; }

/* .teamMemberListing > .row.special-class::after {height: 100%; } */
.teamMemberListing > .row > .col-lg-4 { position: relative; }
.teamMemberListing > .row > .col-lg-4:before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: calc(100% + 120px); height: 1px; background-color: var(--black-color); }
.teamMemberListing > .row > .col-lg-4:nth-child(n+4)::before { display: none; }
.teamMemberListing > .row > .col-lg-4:after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(100% + 120px); height: 1px; background-color: var(--black-color); }
.popUpContent { position: fixed; background-color: var(--tertiary-color); z-index: 9; bottom: 0; right: 0; height: 60vh; max-width: 50vw; border: 1px solid var(--black-color); transform-origin: bottom right; transform: scale(0); transition: all 0.3s; overflow: hidden; }
.popUpContent.showPopUp { transform: scale(1); }
.PopUpmemberDetail { padding: 75px 60px; color: var(--white-color); }
.memberLinkedin { display: flex; align-items: center; justify-content: center; padding: 12px; border: 1px solid #f8f5eb54; }
a.linkediIcon { color: var(--tertiary-color); width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; background-color: var(--primary-color); border-radius: 50%; font-size: 18px; padding: 4px 0 2px 1px; transition: all 0.3s; border: 1px solid var(--primary-color); }
a.linkediIcon:hover { color: var(--primary-color); background-color: transparent; }
.memberContent { font-family: var(--ibm-plex-sans); font-weight: var(--font-weight-light); font-size: var(--font-16); line-height: 33px; overflow: auto; max-height: 350px; padding: 0 15px 0 0; }
.PopUpmemberName { margin: 0 0 40px 0; font-family: var(--ibm-plex-sans); }
.PopUpmemberName strong { display: block; font-size: var(--font-18); font-weight: var(--font-weight-medium); }
.PopUpmemberName span { display: block; font-size: var(--font-18); font-weight: var(--font-weight-light); }
.contactPageBannerInner .popUpContent { background-color: var(--white-color); border: 1px solid var(--primary-color); }

/* insights css */
.insights { padding: 90px 0; background-color: var(--tertiary-color); }
.insightsSwiper .swiper { margin: 0; }
.cardDesign { border: 2px solid rgb(255 255 255 / 50%); padding: 15px; border-radius: 30px; overflow: hidden; position: relative; }
.cardDesign:before { content: ''; position: absolute; background: url(../images/noice.png)center center no-repeat; width: 100%; height: 100%; top: 0; background-size: cover; left: 0; z-index: -1; opacity: 0.3; }
.cardImage { border-radius: 20px; overflow: hidden; }
.cardImage img { width: 100%; }
.cardContent { padding: 30px 24px; }
.cardContent span { display: block; margin: 0 0 20px 0; color: #8E8E8E; line-height: 24px; font-family: var(--ibm-plex-sans); }
.insightsTop .row { justify-content: space-between; align-items: center; }
.secrionTitle { display: flex; align-items: center; }
.secrionTitle h3 { font-size: var(--font-34); line-height: 54px; font-weight: var(--font-weight-bold); letter-spacing: -1px; color: var(--white-color); display: inline-block; }
.secrionTitle span { color: var(--white-color); font-size: var(--font-18); line-height: 33px; letter-spacing: -1px; font-family: var(--ibm-plex-sans); font-weight: 300; width: 70%; display: inline-block; }
.insightsTop { padding: 0 0 70px 0; }
.insightsSwiperController { display: flex; align-items: center; justify-content: flex-end; }
.swiperBtn { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; position: relative; z-index: 1; cursor: pointer; }
.swiperBtn:last-child { margin: 0 0 0 30px; }
.swiperBtn:before { content: ''; position: absolute; top: 0; left: 0; background: radial-gradient(80.38% 222.5% at -13.75% -12.36%, #FFC20E 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(80.69% 208.78% at 108.28% 112.58%, #C1FFBF 0%, rgba(135, 38, 183, 0) 100%); width: 100%; height: 100%; border-radius: 50%; z-index: -2; }
.swiperBtn:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 3px); height: calc(100% - 3px); background-color: var(--tertiary-color); border-radius: 50%; z-index: -1; }
.insightsSwiperController a { line-height: 0; }

/* ============================ */

/* company page css */

/* ============================ */
.barriers .waveImage { margin: 180px 0 0 0; }
.barriers .sectionHeading { width: 60%; }
.redefining { position: relative; overflow: hidden; padding: 600px 0 200px 0; margin: -360px 0 0 0; }
.redefining .redefiningBgImage { position: absolute; top: 0; left: 0; width: 100%; }
.redefiningBgImage img { width: 100%; height: 100%; }
.redefiningInner h2 { font-size: var(--font-54); line-height: 64px; font-weight: var(--font-weight-bold); }
.redefiningContent { font-size: var(--font-24); font-weight: var(--font-weight-normal); line-height: 54px; font-family: var(--ibm-plex-sans); margin-top: 180px; margin-left: -120px; }
.patent { position: relative; height: 200vh; }
.patentInner { position: absolute; top: 0; left: 0; width: 100%; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.opproachTitle h2 { margin: 0 auto; color: var(--white-color); font-size: var(--font-44); font-weight: var(--font-weight-medium); line-height: 64px; width: 50%; text-align: center; }
.headingLine2 { position: relative; }
.headingLine2:before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: url(../images/heading-line-2.svg)center center no-repeat; width: 150px; height: 50px; background-size: contain; }
.approachDiv { position: relative; z-index: 1; padding: 160px 0 0 0; }
.patentMainContent h2 { font-size: var(--font-40); font-weight: var(--font-weight-semibold); color: var(--white-color); line-height: 60px; margin: 70px 0 0 0; position: relative; z-index: 2; }
.patentMainContent p { display: inline-block; font-size: var(--font-26); font-weight: var(--font-weight-light); color: var(--white-color); }
.patentInner > .container-xl { height: 90vh; position: relative; z-index: 1; }
.patentMain { height: 100vh; position: relative; overflow: hidden; background: url(/wp-content/uploads/2024/10/long-bg.png)bottom center no-repeat; background-size: cover; }
.patentBgVideo, .patentBgVideoTag { height: 100vh; width: 100%; object-fit: cover; position: relative; }
.patentMain > .container-xl { height: 100%; }
.patentVerticleHeading { position: absolute; font-size: var(--font-60); font-weight: var(--font-weight-bold); writing-mode: vertical-rl; left: -100px; top: 50%; transform: translateY(-50%) rotate(180deg); color: var(--white-color); margin: 0; text-transform: uppercase; }
h2.patentVerticleHeading span { color: #FFC20E; }
.patentMainInner { height: 100%; position: relative; }
.patentMainInner::before { content: ''; position: absolute; background: url(../images/banner-rock.svg)center center no-repeat; width: 500px; height: 500px; top: 50%; left: 100%; background-size: contain; animation: floatingRockPatent 2.5s infinite ease-in-out; transform: translateY(-50%); z-index: 2; }
@keyframes floatingRockPatent {
	0% { transform: translateY(-50%) }
	50% { transform: translateY(calc(-50% - 20px)) }
	100% { transform: translateY(-50%) }
}
.patentMainInner .row { height: 100%; justify-content: space-between; }
.patentMainInner .row .col-lg-6:last-child .patentMainContent { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 50px 0 80px 0; }
.patentMainVideo video { width: 400px; height: 400px; border-radius: 50%; overflow: hidden; object-fit: cover; border: 1px solid #fff; object-position: center -220px; }
.patentMainVideo { display: flex; align-items: center; height: 100%; position: relative; z-index: 1; }
.patentMainVideo::before { content: ''; position: absolute; left: 50%; height: 0; width: 1px; background-color: var(--white-color); z-index: -1; transition: all 0.8s; transform-origin: center; opacity: 0.4; }
.patentMainVideo.in-viewport::before { height: 100%; }
.patentMainVideo:after { content: ''; position: absolute; top: 50%; left: calc(100% - 50px); width: 0; height: 1px; background-color: var(--white-color); z-index: -1; transition: all 0.8s; opacity: 0.4; }
.patentMainVideo.in-viewport:after { width: 100vw; }
.patentMain:before { content: ''; position: absolute; width: 100%; height: 90%; background-color: #00081A; opacity: 0.5; filter: blur(60px); }
.patentMain:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: #fff; z-index: 1; }
.patentBgVideo:before { content: ''; position: absolute; bottom: -80px; left: 0; width: 250px; height: 180px; background: url(../images/rock-2.png) no-repeat center center / contain; animation: floatingRock 2.8s infinite ease-in-out; z-index: 2; }
.patentBgVideo:after { content: ''; position: absolute; bottom: -180px; width: 99vw; height: 280px; background-color: #00081A; left: 0; z-index: 1; filter: blur(70px); }
.leadership { padding: 85px 0; overflow: hidden; }
.leadershipHeading { font-size: var(--font-52); font-weight: var(--font-weight-bold); writing-mode: vertical-rl; transform: rotate(180deg); color: var(--black-color); margin: 0; text-transform: uppercase; line-height: 1; }
h2.leadershipHeading span { color: #FFC20E; display: block; }
.leadershipSubHeading { font-size: var(--font-54); line-height: 64px; font-weight: var(--font-weight-bold); margin-left: 85px; margin-top: 50px; }
.leadershipContent { font-size: var(--font-24); font-weight: var(--font-weight-normal); line-height: 54px; font-family: var(--ibm-plex-sans); margin-top: 250px; margin-left: -240px; }
.meetTeamBtn .primaryBtn { line-height: normal; }

/* circle photo gallery css */
.outerCircle { width: 100vw; height: 80vh; overflow: hidden; }
.circleWrapp { width: 120vw; aspect-ratio: 1; border: 1px solid #000; border-radius: 50%; position: relative; margin: 0 auto; left: 50%; transform: translate(-50%, -75%); transition: transform 1s linear;    /* Smooth rotation transition */ }
.circleImage { width: 300px; height: calc(50% + 150px); position: absolute; bottom: -150px; left: 50%; transform: translateX(-50%); transform-origin: top center; display: flex; align-items: flex-end; }
.circleImage img { width: 300px; height: 300px; overflow: hidden; object-fit: cover; position: relative; }
.innerImage { position: relative; }

/* ============================ */

/* recoveryTop css */

/* ============================ */
.recoveryTop .sectionHeading { width: 65%; }
.recoveryTop span { font-size: var(--font-30); font-family: var(--ibm-plex-sans); font-weight: var(--font-weight-light); display: inline-block; margin: 30px 0; }

/* news css */
.news { padding: 100px 0 80px 0; }
.single-news .row { padding: 50px 0; }
article.news { padding: 0; }
.post-navigation { display: flex; justify-content: space-between; }
.post-navigation a { text-decoration: none; color: var(--black-color); transition: all 0.3s; }
.post-navigation a:hover { color: var(--primary-color); }
.entry-content img { width: 100%; height: auto; object-fit: cover; border-radius: 16px; margin-bottom: 30px; }
.widget-area ul { margin: 0; padding: 0; list-style: none; }
.widget-area ul a { color: var(--black-color); text-decoration: none; padding: 0 0 10px 0; display: inline-block; }
.swiperTop { display: flex; align-items: center; justify-content: space-between; }
.blackBtn { display: flex; align-items: center; }
.blackBtn .swiperBtn:last-child { margin: 0 0 0 30px; }
.blackBtn a { line-height: 0; }
.blackSwiper .cardDesign { border: 1px solid var(--text-color); }
.blackSwiper .cardContent span { color: #272727; }
.blackBtn .swiperBtn { background-color: transparent; border: 1px solid var(--text-color); }
.blackBtn .swiperBtn:before { display: none; }
.blackBtn .swiperBtn:after { display: none; }
.swiperTop h3 { font-size: var(--font-44); font-weight: var(--font-weight-medium); line-height: 70px; }
.swiperTop { margin: 0 0 30px 0; }
.blog { padding: 0 0 70px 0; }

/* ============================ */

/* resources page css */

/* ============================ */
.successTop span { font-size: var(--font-30); font-family: var(--ibm-plex-sans); font-weight: var(--font-weight-light); display: inline-block; margin: 30px 0; }
.successTop .sectionHeading { width: 60%; }
.caseStudyWrapper { margin: 160px 0 0 0; }
.caseStudyWrapper .cardDesign { height: 100%; }
.caseStudyWrapper .row .col-lg-4 { margin: 0 0 30px 0; }

/* ============================ */

/* hse page css */

/* ============================ */
.hseBanner { background: url(../images/long-bg.png)center center no-repeat; background-size: cover; }
.waveImageWhite img { width: 100%; }
.hseBannerContent { text-align: center; }
.hseBannerContent h2 { font-size: var(--font-52); color: var(--white-color); text-transform: uppercase; text-align: center; margin: 0 auto; margin-bottom: 50px; }
.gradiantClass { position: relative; z-index: 1; }
.gradiantClass::before { content: ''; position: absolute; top: 0; left: 0; opacity: 0.55; background: linear-gradient(180deg, rgba(0, 8, 26, 0) 0%, #00081A 34.93%); width: 100%; height: 100%; z-index: -1; }
.minimising { display: flex; align-items: center; }
.minimisingVideo video { width: 580px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.minimisingVideo { background: url(../images/dot-border.png)center center no-repeat; background-size: contain; width: 60%; height: 800px; display: flex; align-items: center; justify-content: center; position: relative; }
.minimisingVideo:before { content: ''; position: absolute; background: url(../images/banner-rock.svg)center center no-repeat; width: 400px; height: 400px; top: -180px; left: 50px; background-size: contain; animation: floatingRock 2.5s infinite ease-in-out; }
.minimisingVideo:after { content: ''; position: absolute; bottom: -100px; right: -100px; width: 250px; height: 180px; background: url(../images/rock-2.png) no-repeat center center / contain; animation: floatingRock 2.5s infinite ease-in-out; z-index: 1; }
.minimising { border-top: 1px solid var(--white-color); border-bottom: 1px solid var(--white-color); }
.minimisingContent { width: 40%; }
.minimisingContent h2 { color: var(--white-color); font-size: var(--font-46); font-weight: var(--font-weight-semibold); }
.minimisingContent p { font-size: var(--font-22); font-family: var(--ibm-plex-sans); line-height: 46px; font-weight: var(--font-weight-light); color: #fff; margin: 90px 0 0 0; }
.environmental { padding: 170px 0; }
.environmentalInner h2 { margin: 0; font-size: var(--font-46); color: var(--white-color); line-height: 70px; font-weight: var(--font-weight-semibold); }
.environmentalSlide { backdrop-filter: blur(38.79999923706055px); border: 5px solid #ffffff33; box-shadow: 0px 65px 28px 0px #000000C7; background-color: #00081A05; padding: 30px; padding-top: 80px; border-radius: 12px; height: 100%; margin: 0 27px; }
.environmentalSwiper { padding: 70px 0 0 0; }
.environmentalSwiper .swiper-wrapper { margin: 0 0 140px 0; }
.environmentalSwiper .swiper-slide { height: auto; }
.environmentalSlide .slideNumber { font-size: var(--font-48); line-height: 60px; font-weight: var(--font-weight-semibold); color: var(--primary-color); }
.environmentalSlide p { font-size: var(--font-26); line-height: 46px; font-family: var(--ibm-plex-sans); color: var(--white-color); font-weight: var(--font-weight-light); margin: 30px 0 0 0; }
.safety { padding: 130px 0 180px 0; height: 100vh; overflow: hidden; }

/* .safety .safetyContent { position: sticky; top: 130px; } */
.safety .safetyContent h2 { font-size: var(--font-48); font-weight: var(--font-weight-bold); line-height: 60px; color: var(--black-color); text-transform: uppercase; }
.safety .safetyContent h2 span { color: var(--primary-color); }
.safetyContent > span { font-size: var(--font-44); font-weight: var(--font-weight-normal); line-height: 54px; margin-top: 80px; display: inline-block; }
ul.safetyUl { margin: 0 0 0 150px; padding: 0 0 0 90px; list-style: none; height: 100vh; }
.eachStep .stepCounter { text-transform: uppercase; font-size: var(--font-30); display: block; line-height: 50px; font-weight: var(--font-weight-normal); }
.eachStep strong { font-size: var(--font-36); line-height: 50px; display: inline-block; margin: 20px 0; font-weight: var(--font-weight-bold); }
.eachStep p { font-size: var(--font-24); font-weight: var(--font-weight-normal); line-height: 44px; }
ul.safetyUl:before { content: ''; position: absolute; top: 0; left: 150px; width: 1px; height: 100%; background-color: #000; }
.safetyInner .col-lg-8 { position: relative; }
.safetyInner .col-lg-8:before { content: ''; position: absolute; top: calc(50% + 150px); left: 0; width: 100vw; height: 1px; background-color: var(--black-color); }

/* ul.safetyUl:after { content: ''; position: absolute; background: url(../images/step-active-circle.svg) center center no-repeat; background-size: contain; width: 97px; height: 97px; top: 56px; left: 102px; transition: all 0.3s; } */
.eachStep { padding: 80px 0; }

/* ul.safetyUl li:before { content: ''; position: absolute; top: 101px; left: -94px; width: 9px; height: 9px; border-radius: 50%; background-color: #000; } */

/* ul.safetyUl li:after { content: ''; position: absolute; top: 0; left: -94px; width: 97px; height: 97px; background: url(../images/step-active-circle.svg) center center no-repeat; background-size: contain; } */
ul.safetyUl li { position: absolute; top: 0; }
.eachStep { opacity: 0; visibility: hidden; transition: all 0.5s; transform: translateY(50px); }
.eachStep.active { opacity: 1; visibility: visible; transform: translateY(0); }
ul.safetyUl li.active { opacity: 1; }

/* ul.safetyUl li:not(:first-child) .eachStep { margin-top: -450px; } */
.waveImages img { width: 100%; object-fit: cover; }
.dotWrapper a { width: 9px; height: 9px; border-radius: 50%; background-color: var(--black-color); display: inline-block; margin: 0 0 60px 0; position: relative; }
.dotWrapper a:after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: url(../images/step-active-circle.svg) center center no-repeat; background-size: contain; transform: translate(-50%, -50%) scale(0); opacity: 0; visibility: hidden; transition: all 0.3s; }
.dotWrapper a.active:after { transform: scale(1) translate(-50%, -50%); opacity: 1; visibility: visible; width: 97px; height: 97px; }
.dotWrapper { display: flex; flex-direction: column; align-items: center; position: absolute; left: 146px; top: 101px; }
.safetySteps { display: flex;    /* padding: 0 0 0 90px; */    /* margin: 0 0 0 150px; */
position: relative; }

/* .driving { background: url(../images/driving-bg.png) center center no-repeat; background-size: cover; padding: 230px 0;} */
.drivingBgImage img { width: 100%; object-fit: cover; }
.drivingInner { width: 100%; margin-top: -860px; padding: 150px 0; }
section.driving { position: relative; overflow: hidden; margin: -240px 0 0 0; }
.drivingInner h2 { font-size: var(--font-54); font-weight: var(--font-weight-bold); line-height: 64px; }
.drivingContent { margin-top: 240px; margin-left: -250px; }
.drivingContent p { font-size: var(--font-24); font-weight: var(--font-weight-normal); line-height: 54px; font-family: var(--ibm-plex-sans); }
.drivingInner .primaryBtn { margin: 20px 0 0 0; }

/* ============================ */

/* well-remediation page css */

/* ============================ */
.force { /* background: url(../images/well-remediation-banner-bg.png)center center no-repeat; */ background-size: cover; height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; overflow: clip; }
.forceVideoBanner { position: absolute; top: -100px; left: 0; height: 100%; width: 100%; object-fit: cover; border-radius: 0 0 1100px 1100px; padding: 0 30px 30px 30px; border: 2px solid #777F78; transform: scale(1.2); }
.force::before { content: ''; position: absolute; background: url(../images/force-banner-circle.png) center center no-repeat; left: 0; bottom: 20px; width: 300px; aspect-ratio: 1; background-size: contain; }
.fourceInner { text-align: center; }
.fourceInner h2 { font-size: var(--font-60); font-weight: var(--font-weight-bold); text-transform: uppercase; line-height: 80px; margin: 0 0 30px 0; color: var(--white-color); }
.wellRemediation { padding: 100px 0 150px 0; position: relative; overflow-x: clip; }
.wellRemediation:before { content: ''; position: absolute; background: url(../images/rock-2.png)center center no-repeat; width: 250px; height: 180px; top: 30px; right: -120px; background-size: contain; animation: floatingRockwellRemediation 2.5s infinite ease-in-out; }
.wellRemediation:after { content: ''; position: absolute; background: url(../images/rock-2.png)center center no-repeat; width: 250px; height: 180px; bottom: 30px; left: -120px; background-size: contain; animation: floatingRockwellRemediation2 4.5s infinite ease-in-out; }
@keyframes floatingRockwellRemediation {
	0% { transform: translateY(0) }
	50% { transform: translateY(-20px) }
	100% { transform: translateY(0) }
}
@keyframes floatingRockwellRemediation2 {
	0% { transform: translateY(0) }
	50% { transform: translateY(-30px) }
	100% { transform: translateY(0) }
}
.wellRemediationInner h2 { font-size: var(--font-48); font-weight: var(--font-weight-bold); font-family: var(--ibm-plex-sans); line-height: 60px; }
.wellRemediationInner p { font-size: var(--font-26); font-family: var(--ibm-plex-sans); font-weight: var(--font-weight-semibold); line-height: 54px; }
.multiSection { background: url(../images/long-bg.png) center center no-repeat; background-size: cover; position: relative; z-index: 1; }
section.multiSection:before { content: ''; position: absolute; width: 100%; height: 100%; background-color: #00081A; filter: blur(100px); z-index: -1; top: 0; left: 0; opacity: 0.7; }
.drivingRoi { /* background: url(../images/driving-roi-bg.png) center left no-repeat; */ background-size: 40%; padding: 150px 0; height: 100vh; display: flex; align-items: center; border-bottom: 1px solid var(--white-color); position: relative; }
video#background-video { position: absolute; left: 0; width: 40%; height: 100%; object-fit: cover; top: 0; }
.drivingRoi:before { content: ''; position: absolute; width: 1px; height: calc(100% + 70px); background-color: var(--white-color); left: 40%; top: 0; }
.drivingRoiInner .row { justify-content: flex-end; align-items: center; }
.drivingRoiInner h2 { color: var(--white-color); font-size: var(--font-40); line-height: 50px; font-weight: var(--font-weight-semibold); }
.drivingRoiInner p { font-size: var(--font-22); line-height: 51px; font-weight: var(--font-weight-light); font-family: var(--ibm-plex-sans); margin: 70px 0 40px 0; color: var(--white-color); }
.triple { padding: 100px 0 200px 0; }
.tripleInner h2 { font-size: var(--font-60); font-weight: var(--font-weight-semibold); line-height: 80px; color: var(--white-color); }
.tripleSwiper { display: none; }
.powerListing { margin: 70px 0 0 0; }
.powerList .problemList { margin: 0; }
.powerList .problemList img { width: 320px; }
.powerList .problemList::before { display: none; }
.powerList { display: flex; align-items: center; padding: 0 0 120px; }
.powerList:last-child { padding: 0; }
.powerListContent { width: calc(100% - 525px); }
.powerListContent h2 { font-size: var(--font-40); line-height: normal; position: relative; margin: 0 0 35px 0; padding: 0 0 35px 70px; }
.powerListContent h2::before { content: ''; position: absolute; bottom: 0; left: calc(0px - 30px); width: 85%; height: 1px; background-color: var(--white-color); z-index: -1; opacity: 0.5; }
.powerListContent h2::after { content: ''; position: absolute; bottom: -6px; right: 19%; width: 14px; height: 14px; background-color: var(--white-color); border-radius: 50%; }
.powerListContent h2 span { display: block; color: var(--primary-color); }
.powerListText { padding: 0 0 0 70px; }
.powerListText p { font-family: var(--ibm-plex-sans); font-weight: var(--font-weight-light); font-size: var(--font-22); line-height: 36px; color: var(--white-color); margin: 0 0 40px 0; }
.howItWork { overflow: hidden; padding: 100px 0 300px 0; position: relative; }
.howItWork:before { content: ''; position: absolute; bottom: 0; left: 50%; width: 150vw; height: 200vw; border: 2px solid #00081A; border-radius: 50%; transform: translateX(-50%); }
.vrtlText h2 { font-size: var(--font-52); font-weight: var(--font-weight-bold); writing-mode: vertical-rl; transform: rotate(180deg); color: var(--black-color); margin: 0; text-transform: uppercase; }
.vrtlText h2 span { color: #FFC20E; }
.howItWorkInner h2 { font-size: var(--font-44); font-weight: var(--font-weight-bold); line-height: 60px; }
.howItWorkContent { margin-top: 150px; margin-left: -250px; }
.howItWorkContent p { font-size: var(--font-28); font-weight: var(--font-weight-normal); font-family: var(--ibm-plex-sans); line-height: 54px; }
.timeLine { padding: 120px 0 0 0; }
.timeLineInner > span { text-align: center; margin: 0 auto; display: flex; justify-content: center; font-size: var(--font-40); font-weight: var(--font-weight-normal); ; line-height: 60px; }
.timeLineWrapper ul { margin: 0 auto; padding: 0; list-style: none; position: relative; }
.timeLineWrapper ul li { width: 50%; padding-block: 50px; position: relative; animation: blur 15s linear; animation-timeline: view(); }
@keyframes blur {
	0% { filter: blur(10px); }
	35%, 60% { filter: blur(0); }
	100% { filter: blur(10px); }
}
.timeLineWrapper ul li:nth-child(even) { margin-left: auto; padding-left: 70px; }
.timeLineWrapper ul:before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 0; background-color: var(--black-color); z-index: -2; animation: timeLine 15s linear forwards; animation-timeline: view(10% 50%); }
@keyframes timeLine {
	from { height: 0; }
	to { height: 100%; }
}
.timeLineWrapper { padding: 80px 0 0 0; }
.timeLineWrapper ul li:not(:nth-child(even)) { text-align: right; padding-right: 70px; }
.timeLineWrapper ul li:before { content: ''; position: absolute; width: 22px; height: 22px; background-color: var(--primary-color); border-radius: 50%; top: 122px; animation: scaleDot 15s linear; animation-timeline: view(50% 0%); }
@keyframes scaleDot {
	from { transform: scale(0); }
	to { transform: scale(1); }
}
.timeLineWrapper ul li:not(:nth-child(even)):before { right: -11px; }
.timeLineWrapper ul li:nth-child(even):before { left: -11px; }
.timeLineTitle { font-size: var(--font-36); margin: 0 0 20px 0; }
.timeLineTitle span { display: block; font-family: var(--ibm-plex-sans); font-weight: var(--font-weight-bold); color: transparent; -webkit-text-stroke: 1px var(--black-color); }
.timeLineWrapper ul li p { font-size: var(--font-26); line-height: 46px; font-family: var(--ibm-plex-sans); }
.approachOffer { background: url(../images/approch-offer-bg.png) center center no-repeat; background-size: cover; padding: 130px 0; position: relative; z-index: 1; }
.approachOffer::before { content: ''; position: absolute; width: 100%; height: 90%; background-color: #00081A; opacity: 0.5; filter: blur(60px); z-index: -1; }
.approachOfferTop { text-align: center; }
.approachWrapper { padding: 80px 0 0 0; overflow: clip; }
.approachOfferTop h2 { color: #F8F5EB; font-weight: var(--font-weight-medium); font-size: var(--font-34); line-height: 54px; opacity: 0.4 !important; }
.approachOfferTop strong { color: var(--primary-color); font-weight: var(--font-weight-bold); font-size: var(--font-36); line-height: 50px; margin: 80px 0 0 0; display: inline-block; }
.approachList span { display: inline-block; font-size: var(--font-24); font-family: var(--ibm-plex-sans); font-weight: var(--font-weight-light); line-height: 35px; color: var(--white-color); ; }

/* .approachListing { display: flex; align-items: flex-end; padding: 90px 10px 0 10px; overflow: hidden; } */
.approachListing .approachList:nth-child(even) { min-height: 250px; display: inline-block; }
.approachList { min-height: 440px; position: relative; width: calc(100% / 8); display: flex; flex-direction: column; }
.line { position: relative; }
.line:before { content: ''; position: absolute; width: 1px; height: 0; background-color: var(--primary-color); top: calc(100% + 10px); left: 0; transition: all 0.8s; transform-origin: center bottom; transition-delay: var(--delay, 0s); opacity: 0; }
.in-viewport .line:before { height: 400px; opacity: 1; }
.line:after { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; top: 10px; background-color: var(--primary-color); left: -5px; }

/* .approachList:before { content: ''; position: absolute; width: 1px; height: 100%; left: 0; bottom: 0; background-color: var(--primary-color); } */
.approachOffer .waveImageWhite { margin: -120px 0 0 0; }
.waveImageWhitePng { display: none; }
.approachBottomSwiper { background: transparent; padding: 100px 0 0 0; }
.approachBottomSwiper::before { display: none; }
.approachBottomSwiper h2 { margin: 0 0 100px 0; color: var(--white-color); font-size: var(--font-40); font-weight: var(--font-weight-semibold); line-height: 60px; }
.singleShot { padding: 130px 0; }
.singleShotTop h2 { text-align: center; font-weight: var(--font-weight-bold); font-size: var(--font-44); line-height: 60px; }
.singleShoTable { padding: 70px 0 0 0; }
table thead tr { background-color: var(--primary-color); }
table thead tr th { padding: 24px; border-bottom: 1px solid transparent; font-size: var(--font-24); font-weight: var(--font-weight-semibold); font-family: var(--ibm-plex-sans); }
table thead tr th:first-child { width: 30%; }
table thead tr th:nth-child(2) { width: 15%; }
table thead tr th:nth-child(3) { width: 15%; }
table thead tr th:last-child { width: 40%; }
table tbody tr td { vertical-align: baseline; padding: 20px; font-size: var(--font-20); font-family: var(--ibm-plex-sans); font-weight: var(--font-weight-medium); }
table tbody tr td a { font-weight: var(--font-weight-semibold); color: var(--black-color); }

/* ============================ */

/* Contact page css */

/* ============================ */
.contactPageBanner { background: url(../images/contact-banner-image.png)center center no-repeat; background-size: cover; }
.contactPageBannerInner.paddingTop { padding: 180px 0 0 0; }
.contactPageBannerInner h2 { font-size: var(--font-60); color: var(--primary-color); font-weight: var(--font-weight-semibold); line-height: 70px; }
.contactPageBannerInner h2 span { color: var(--white-color); }
.contactMainContent { font-size: var(--font-20); font-family: var(--ibm-plex-sans); font-weight: var(--font-weight-normal); line-height: 46px; color: var(--white-color); margin: 120px 0 0 0; }
.contactPageBannerInner form { background: linear-gradient(150.59deg, rgba(255, 255, 255, 0.324) 17.37%, rgba(255, 255, 255, 0) 101.21%, rgba(255, 255, 255, 0) 101.21%); padding: 50px; border-radius: 36px 36px 0 0; backdrop-filter: blur(17.118698120117188px); margin: 50px 0 0 0; }
.contactPageBannerInner .feild-group textarea { height: 150px; }
.contactPageBanner .container-xl { height: 100%; }
.contactPageBannerInner { height: 100%; }
.contactPageBannerInner > .row { height: 100%; align-items: flex-end; }
.contactPageBannerInner form input:not([type="submit"]), .contactPageBannerInner form textarea { background-color: transparent !important; border: none; border-bottom: 1px solid #ffffff5e; color: var(--white-color); padding: 15px; width: 100%; margin: 0 0 20px 0; font-family: var(--ibm-plex-sans); outline: none; display: block; }
.contactPageBannerInner form .primaryBtn { margin: 35px 0 0 0; }
.formWrapper input::placeholder, .formWrapper textarea::placeholder { color: var(--white-color); }
.addressContact ul li { color: var(--white-color); font-family: var(--ibm-plex-sans); font-size: var(--font-20); line-height: 40px; padding: 0 0 25px 0; }
.addressContact ul li:last-child { padding: 0; }
.addressContact ul { list-style: none; margin: 0; padding: 0; }
.addressContactDetail { display: flex; align-items: flex-start; }
.addressContactText span { display: block; }
.addressContactText { margin: 0 0 0 20px; }
.addressContactIcon svg { color: var(--primary-color); }
.addressContact { position: relative; padding: 50px 0 0 0; margin: 50px 0 0 0; }
.addressContact:before { content: ''; position: absolute; width: 100vw; height: 1px; background-color: var(--white-color); right: calc(0px - 60px); top: .0; opacity: 0.4; }
.addressContactText a { text-decoration: none; color: var(--white-color); }
.wpcf7-not-valid-tip { position: absolute; bottom: -24px; font-size: var(--font-14); width: 100%; display: block; white-space: nowrap; }
.contactPageBannerInner .popUpContent span:first-child { font-size: 22px; display: block; color: var(--primary-color); }
.contactPageBannerInner .popUpContent { padding: 20px; height: 20vh; }
.contactPageBannerInner .popUpContent span { font-size: 18px; }

/* footer css */
footer { background-color: var(--tertiary-color); }
.footerOptions ul { display: flex; margin: 0; padding: 0; list-style: none; }
.footerInner { display: flex; align-items: center; justify-content: space-between; padding: 50px 0; }
.footerOptions ul li a { text-decoration: none; color: var(--white-color); display: inline-block; margin: 0 20px 0; transition: all 0.3s; }
.footerOptions ul li a:hover, .footerOptions ul li.active a { color: var(--primary-color); }
.footerCta a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--primary-color); border-radius: 50%; color: var(--tertiary-color); font-size: var(--font-20); border: 1px solid var(--primary-color); transition: all 0.3s; }
.footerCta a:hover { background-color: transparent; color: var(--primary-color); }

/* #Progress
================================================== */

.progress-wrap {
  position: fixed;
  right: 20px;
  bottom: 70px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.progress-wrap::after {
  position: absolute;
  font-family: "unicons";
  content: "\e84b";
  text-align: center;
  line-height: 46px;
  font-size: 24px;
  color: var(--primary-color); /* --- Pijl kleur --- */
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.progress-wrap:hover::after {
  opacity: 0;
}
.progress-wrap::before {
  position: absolute;
  font-family: "unicons";
  content: "\e84b";
  text-align: center;
  line-height: 46px;
  font-size: 24px;
  opacity: 0;
  background: black; /* --- Pijl hover kleur --- */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.progress-wrap:hover::before {
  opacity: 1;
}
.progress-wrap svg path {
  fill: none;
}
.progress-wrap svg.progress-circle path {
  stroke: var(--primary-color); /* --- Lijn progres kleur --- */
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

@-webkit-keyframes border-transform {
  0%,
  100% {
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
  }
  56% {
    border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
  }
}
/* Coming Soon Banner */
body.page-id-584 
{
	overflow: hidden;
}
section.coming-soon-banner.banner {
    height: calc(100vh + 0px);
}
section.coming-soon-banner.banner {
    height: calc(100vh + 0px);
}
.coming-soon-banner .bannerHeading
{
	width: 100%;
}
.page-id-584 footer
{
	display: none;
}
.page-id-584 .headerOptions, .page-id-584 .mobileToggle
{
	display: none;
}
.page-id-584 .headerInner {
    display: block !important;
    margin: 0px auto !important;
    text-align: center !important;
}