:root {
    --font-text:
        'Fustat', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
    --font-heading:
        'Modius', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';

    --color-white: #ffffff;
    --color-black: #000000;
    --color-primary: #8ac75a;
    --color-primary-dark: #6aa63a;
    --color-gray: #e7e9ea;
    --color-gray-20: rgba(231, 233, 234, 0.2);
    --color-control-slate: #6c7d92;
    --color-iron-core: #313841;
    --color-night-rig: #202c35;

    --font-h1: 38px;
    --font-h1-small: 30px;
    --font-h2: 28px;
    --font-h3: 20px;
    --font-h4: 18px;
    --font-h5: 28px;
    --font-h6: 22px;
    --text-xl: 22px;
    --text-lg: 20px;
    --text-md: 18px;
    --text-base: 16px;
    --text-sm: 14px;
    --text-xs: 12px;
    --text-body: var(--size-16);

    --transition: all 0.3s ease-in-out;

    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --container-width: 1072px;
    --container-width-lg: 1312px;

    --size-0: 0px;
    --size-1: 1px;
    --size-2: 2px;
    --size-4: 4px;
    --size-6: 6px;
    --size-8: 8px;
    --size-10: 10px;
    --size-12: 12px;
    --size-14: 14px;
    --size-16: 16px;
    --size-18: 18px;
    --size-20: 20px;
    --size-24: 24px;
    --size-28: 28px;
    --size-32: 32px;
    --size-36: 36px;
    --size-40: 40px;
    --size-44: 44px;
    --size-48: 48px;
    --size-52: 52px;
    --size-56: 56px;
    --size-60: 60px;
    --size-64: 64px;
    --size-68: 68px;
    --size-72: 72px;
    --size-76: 76px;
    --size-80: 80px;
    --size-84: 84px;
    --size-88: 88px;
    --size-92: 92px;
    --size-96: 96px;

    --section-padding-top: var(--size-60);
    --section-padding-bottom: var(--size-60);
    --scrollspy-nav-marker-duration: 200ms;
    --scrollspy-nav-marker-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

@font-face {
    font-family: 'Modius';
    src:
        url('../fonts/Morgant-Regular.woff2') format('woff2'),
        url('../fonts/Morgant-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*,
*:after,
*:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: inherit;
}
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-text);
    background-color: var(--color-night-rig);
    color: var(--color-gray);
    font-size: var(--text-body);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img {
    border: 0;
    vertical-align: top;
    max-width: 100%;
    height: auto;
}
ul,
ol {
    margin: 0 0 24px 0;
    padding: 0;
    list-style-position: inside;
}
a {
    --_a-color: var(--a-color, --color-primary);
    color: var(--_a-color);
    text-decoration: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
button {
    border: unset;
    background: unset;
    text-decoration: none;
    font-family: var(--font-text);
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    cursor: pointer;
    text-align: left;
}
input,
textarea,
select {
    outline: none;
    resize: none;
    font-family: var(--font-text);
}
p {
    padding-bottom: 16px;
}
p a {
    text-decoration: underline;
}

strong {
    font-weight: var(--font-weight-bold);
}

svg {
    display: block;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    padding: 0;
    margin: -1px;
    border: 0;
}
html:not(.no-js) [data-aos='fade-up'] {
    -webkit-transform: translate3d(0, 80px, 0);
    transform: translate3d(0, 80px, 0);
}
/* ================================
   Global Component Styles - START
================================ */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin: 0;
    padding: 0 0 16px 0;
    font-weight: var(--font-weight-normal);
    font-family: var(--font-heading);
    color: inherit;
    line-height: 1.2;
}

.h1,
h1 {
    font-size: var(--font-h1);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-normal);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.h1-small {
    font-size: var(--font-h1-small);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-normal);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.h2,
h2 {
    font-size: var(--font-h2);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-normal);
    line-height: 1.2;
    text-transform: uppercase;
}
.h3,
h3 {
    font-size: var(--font-h3);
    font-family: var(--font-heading);
    line-height: 1.2;
    letter-spacing: 0.03em;
}
.h4,
h4 {
    font-size: var(--font-h4);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-normal);
    line-height: 1.2;
    letter-spacing: 0.03em;
}
.h5,
h5 {
    font-size: var(--font-h5);
    font-family: var(--font-text);
    line-height: 1.3;
}
.h6,
h6 {
    font-size: var(--font-h6);
    font-family: var(--font-text);
    line-height: 1.4;
}
h2.h6 {
    text-transform: none;
}

sup {
    font-size: 55%;
}
.text-lg {
    font-size: var(--text-lg);
}

.container,
.container-lg {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: var(--size-16);
    padding-right: var(--size-16);
}
.container-lg {
    max-width: var(--container-width-lg);
}

.cover-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn {
    padding: 10px 26px 9px 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    background: var(--color-primary);
    border: 1px solid #c7ff9a;
    border-radius: var(--size-24);
    font-family: var(--font-text);
    font-size: var(--text-base);
    line-height: 23px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-iron-core);
    transition: var(--transition);
    cursor: pointer;
    box-shadow: none;
    letter-spacing: 0.01em;
}
.btn-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-iron-core);
    color: var(--color-gray);
    border-radius: 50%;
    transition: var(--transition);
}
.btn:hover,
.btn:focus {
    background: var(--color-gray);
    color: var(--color-iron-core);
    border-color: var(--color-white);
    box-shadow: none;
    outline: none;
}
.btn:hover .btn-icon,
.btn:focus .btn-icon {
    background: var(--color-control-slate);
    color: var(--color-gray);
}
.btn:has(.btn-icon) {
    padding: var(--size-8) var(--size-10) var(--size-8) var(--size-24);
}

.is-hover-dark:hover,
.is-hover-dark:focus {
    border-color: #20242a;
    background: var(--color-iron-core);
    color: var(--color-gray);
}
.btn.is-hover-dark:hover .btn-icon,
.btn.is-hover-dark:focus .btn-icon {
    background: var(--color-primary);
    color: var(--color-white);
}

.is-outline {
    background: var(--color-iron-core);
    border-color: #a2a2a2;
    color: var(--color-gray);
    font-weight: var(--font-weight-medium);
}
.is-outline .btn-icon {
    background: var(--color-gray);
    color: var(--color-iron-core);
}
.is-outline:hover,
.is-outline:focus {
    background: var(--color-primary);
    border-color: #c7ff9a;
    color: var(--color-iron-core);
}
.is-outline:hover .btn-icon,
.is-outline:focus .btn-icon {
    background: var(--color-iron-core);
    color: var(--color-gray);
}

.is-outline-gray {
    background: #2c3a44;
    border-color: #586874;
    color: var(--color-gray);
    font-weight: var(--font-weight-medium);
}
.is-outline-gray .btn-icon {
    background: var(--color-control-slate);
    color: var(--color-gray);
}
.is-outline-gray:hover,
.is-outline-gray:focus {
    background: #46657c;
    border-color: #586874;
    color: var(--color-white);
}
.is-outline-gray:hover .btn-icon,
.is-outline-gray:focus .btn-icon {
    background: var(--color-primary);
    color: var(--color-gray);
}

.is-outline-dark {
    background: var(--color-gray);
    border-color: var(--color-control-slate);
    color: var(--color-iron-core);
    font-weight: var(--font-weight-semibold);
}
.is-outline-dark .btn-icon {
    background: var(--color-iron-core);
    color: var(--color-gray);
}
.is-outline-dark:hover,
.is-outline-dark:focus {
    background: var(--color-iron-core);
    border-color: var(--color-iron-core);
    color: var(--color-gray);
}
.is-outline-dark:hover .btn-icon,
.is-outline-dark:focus .btn-icon {
    background: var(--color-gray);
    color: var(--color-iron-core);
}

.is-link {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 15px;
    color: var(--color-gray);
    gap: var(--size-10);
    font-weight: var(--font-weight-medium);
}
.btn.is-link:has(.btn-icon) {
    padding: 0;
}
.is-link .btn-icon {
    width: auto;
    height: auto;
    background: transparent;
    color: currentColor;
    border-radius: 0;
    transition: none;
}
.is-link:hover,
.is-link:focus {
    background: transparent;
    color: var(--color-primary);
    gap: var(--size-12);
}
.is-link:hover .btn-icon,
.is-link:focus .btn-icon {
    background: transparent;
    color: currentColor;
}

.is-block {
    width: 100%;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--size-20);
}

.is-pb-0 {
    padding-bottom: 0 !important;
}
.is-pt-0 {
    padding-top: 0 !important;
}

.is-pt-80 {
    padding-top: var(--size-80) !important;
}
.is-pb-80 {
    padding-bottom: var(--size-80) !important;
}
.is-py-80 {
    padding-top: var(--size-80) !important;
    padding-bottom: var(--size-80) !important;
}

.is-pb-64 {
    padding-bottom: var(--size-64) !important;
}

.row {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--size-24);
    margin: 0 calc(-1 * var(--size-8));
}
.justify-content-between {
    justify-content: space-between;
}
.col-5 {
    width: 41.66666667%;
    padding: 0 var(--size-8);
}
.col-6,
.col-md-6 {
    width: 50%;
    padding: 0 var(--size-8);
}
.col-7 {
    width: 58.33333333%;
    padding: 0 var(--size-8);
}
.row-gap-16 {
    row-gap: var(--size-16);
}

.title-wrap :is(h1, h2, h3, h4, h5, h6) {
    padding-bottom: 0;
    margin-bottom: 0;
}
.title-wrap :is(h1, h2, h3, h4, h5) :is(span) {
    display: inline-block;
}
.title-wrap .title-text {
    padding-top: var(--size-16);
}
.title-wrap .title-text p:last-child {
    padding-bottom: 0;
}
.title-wrap .btn-group {
    padding-top: var(--size-24);
}

[data-tab-panel] {
    display: none;
    opacity: 0;
    transform: translate(0, 15px);
    transition:
        opacity 0.3s ease-in-out,
        transform 0.3s linear;
}

[data-tab-panel].active {
    display: block;
    opacity: 1;
    transform: translate(0, 0px);
}
[data-tab-target].active {
    pointer-events: none;
}
[data-tab-target].is-mobile {
    display: none;
    width: 100%;
}

.embla {
    overflow: hidden;
    position: relative;
}
.embla__container {
    display: flex;
}
.embla__slide {
    flex: 0 0 100%;
    min-width: 0;
}

.is-section-light {
    background: var(--color-gray);
}

/* ================================
   Global Component Styles - END
================================ */

/* ================================
   Header Style - START
================================ */
.header-wrap {
    position: sticky;
    top: 0;
    width: 100%;
    height: 94px;
    color: var(--color-gray);
    z-index: 12345;
}
.header-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(6px);
    background: rgba(32, 44, 53, 0.84);
    z-index: -1;
}
.header-wrap .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-16);
}
.header-wrap .logo a {
    display: inline-block;
}
.header-wrap .menu > ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-44);
    margin: 0;
    list-style: none;
}
.header-wrap .menu > ul > li {
    padding: 25px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.header-wrap .menu > ul > li > a {
    padding: 10px 0;
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray);
    display: block;
    transition: var(--transition);
}
.header-wrap .menu > ul > li .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    background: var(--color-iron-core);
    white-space: nowrap;
    list-style: none;
    padding: var(--size-8) 0;
    border-radius: 5px;
    border: 1px solid #a2a2a2;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    min-width: 100%;
}
.header-wrap .menu > ul > li .sub-menu li a {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray);
    padding: var(--size-8) var(--size-28);
    transition: var(--transition);
    text-align: center;
}
.header-wrap .menu > ul > li .nav-link-toggle {
    transition: var(--transition);
    pointer-events: none;
}
.header-wrap .menu > ul > li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
}
.menu-toggle .icon-x,
.menu-toggle.active .icon-bar {
    display: none;
}
.menu-toggle.active .icon-x {
    display: block;
}
.header-user-login a,
.menu-toggle {
    color: var(--color-white);
    display: block;
    transition: var(--transition);
}
.menu-toggle:hover {
    color: var(--color-primary);
}
/* ================================
   Header Style - END
================================ */

/* ================================
   Footer Style - START
================================ */
.footer-wrap {
    background: var(--color-night-rig);
}
.footer-wrap ul {
    list-style: none;
    margin: 0;
}
.footer-top {
    border-bottom: 1px solid var(--color-gray-20);
}
.footer-wrap .footer-top .container {
    display: flex;
    justify-content: space-between;
    gap: var(--size-16);
    align-items: center;
}
.footer-top-menu {
    display: flex;
    gap: var(--size-24);
    align-items: center;
}
.quick-links ul {
    display: flex;
    align-items: center;
    border-left: 1px solid var(--color-gray-20);
}
.quick-links ul li {
    border-right: 1px solid var(--color-gray-20);
}
.quick-links ul li a {
    padding: 35px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-12);
    font-size: var(--text-base);
    color: var(--color-gray);
    min-width: 210px;
    transition: var(--transition);
}
.quick-links ul li a .btn-icon {
    background: var(--color-control-slate);
}
.quick-links ul li a:hover {
    color: var(--color-primary);
}
.quick-links ul li a:hover .btn-icon {
    background: var(--color-primary);
    color: var(--color-iron-core);
}
.social-share {
    padding: 0 28px;
}
.social-share ul {
    display: flex;
    align-items: center;
    gap: var(--size-44);
}
.social-share ul li a {
    display: block;
    color: var(--color-gray);
    transition: var(--transition);
}
.social-share ul li a:hover {
    color: var(--color-primary);
}

.footer-wrap .footer-bottom {
    padding: var(--size-24) 0;
}

.footer-wrap .footer-bottom .container {
    display: flex;
    flex-direction: column;
    gap: var(--size-28);
}

.footer-bottom-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--size-24);
}

.footer-contact-info ul {
    display: flex;
    gap: 54px;
}
.footer-contact-info ul li a {
    display: flex;
    gap: var(--size-8);
    color: var(--color-gray);
    font-size: 13px;
    letter-spacing: 0.03em;
    transition: var(--transition);
}
.footer-contact-info ul li a .icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-contact-info ul li a span {
    padding-top: 5px;
    display: block;
}
.terms-links {
    padding-top: 5px;
    display: flex;
    align-items: center;
    gap: var(--size-24);
}
.terms-links a {
    color: var(--color-gray);
    font-size: 13px;
    letter-spacing: 0.03em;
    transition: var(--transition);
}
.terms-links a:hover,
.footer-contact-info ul li a:hover {
    color: var(--color-primary);
}
.copyright {
    color: var(--color-gray);
    font-size: 13px;
    letter-spacing: 0.03em;
    opacity: 0.6;
}
/* ================================
   Footer Style - END
================================ */

/* ================================
   Banner Section Style - START
================================ */
.banner-section {
    padding-top: 66px;
    position: relative;
}
.banner-section .container {
    position: relative;
    z-index: 1;
}
.banner-content {
    max-width: 643px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
.banner-img-wrap {
    position: relative;
}
.arc-wrap {
    width: 100%;
    max-width: 1320px;
    position: absolute;
    top: -140px;
    left: 0;
}
.arc-wrap svg {
    display: block;
    width: 100%;
    height: auto;
}
.banner-img-box {
    max-width: 720px;
    margin: 0 auto;
    padding-top: 40px;
    text-align: center;
}
.banner-img-box img.banner-animation-img {
    aspect-ratio: 1 / 1;
    animation: moveUpDown 3200ms linear infinite alternate;
}
.banner-bg-img.cover-img {
    object-fit: fill;
}
@keyframes moveUpDown {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(30px);
    }
}
.banner-section.is-inner-banner {
    min-height: 500px;
    overflow: hidden;
}
.banner-section.is-inner-banner .banner-bg-img.cover-img {
    height: 900px;
}
/* ================================
   Banner Section Style - END
================================ */

/* ================================
   Advantage Section Style - START
================================ */
.advantage-section {
    padding: var(--size-44) 0;
}
.advantage-section .title-wrap {
    text-align: center;
    color: var(--color-primary);
    padding-bottom: 26px;
}
.advantage-section .title-wrap .title-icon {
    padding-bottom: var(--size-16);
}
.advantage-section .title-wrap .title-icon svg {
    margin: 0 auto;
}

.advantage-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--size-8);
    margin: 0 -4px;
}
.advantage-list .advantage-list-item {
    width: 33.33%;
    padding: 0 4px;
}

.advantage-item {
    position: relative;
    padding: 24px;
    height: 100%;
    background:
        linear-gradient(#1b2730, #1b2730) padding-box,
        linear-gradient(to right, #535b64, #3f4c5d) border-box;
    border: 1px solid transparent;
    min-height: 214px;
    border-radius: 3px;
    overflow: hidden;
    font-size: 17px;
    line-height: 1.3;
    font-weight: var(--font-weight-light);
    transition: var(--transition);
    z-index: 1;
}
.advantage-item:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--color-gray);
    z-index: -1;
    opacity: 0;
    transition: var(--transition);
}
.advantage-item:before {
    content: '';
    position: absolute;
    left: -204px;
    bottom: 19px;
    width: 202px;
    height: 132px;
    background: url(../images/advantage-card-arrow.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    transition: var(--transition);
}
.card-dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border-top-left-radius: 2px;
}
.advantage-item .advantage-item-icon {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-control-slate);
    color: var(--color-primary);
    border-radius: 100%;
    margin-bottom: 14px;
    transition: var(--transition);
}
.advantage-item .advantage-item-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--size-8);
    transition: padding 0.3s ease-in-out;
}
.advantage-item .advantage-item-content .h6 {
    padding-bottom: 0;
    color: var(--color-primary);
    transition: var(--transition);
    letter-spacing: 0;
}
.advantage-item .advantage-item-content p {
    max-width: 197px;
}
.advantage-item:hover,
.advantage-item:focus {
    color: var(--color-iron-core);
    font-weight: var(--font-weight-normal);
}
.advantage-item:hover:after,
.advantage-item:focus:after {
    opacity: 1;
}
.advantage-item:hover:before,
.advantage-item:focus:before {
    left: -102px;
}
.advantage-item:hover .advantage-item-icon,
.advantage-item:focus .advantage-item-icon {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.advantage-item:hover .advantage-item-content .h6,
.advantage-item:focus .advantage-item-content .h6 {
    color: var(--color-primary-dark);
}
.advantage-item:hover .advantage-item-content,
.advantage-item:focus .advantage-item-content {
    padding-left: 84px;
}

.advantage-list-wrap {
    overflow: hidden;
    position: relative;
}
.advantage-list-wrap .container {
    position: relative;
    z-index: 1;
}
.advantage-list-wrap .cascade-lines {
    position: absolute;
    top: 0;
    width: 9999px;
    display: flex;
}
.advantage-list-wrap .cascade-lines img {
    flex-shrink: 0;
}
.advantage-list-wrap .cascade-lines.is-left {
    top: 0;
    right: 100%;
}
.advantage-list-wrap .cascade-lines.is-right {
    top: 0;
    left: 100%;
}
.advantage-list-wrap .cascade-lines.is-left:before,
.advantage-list-wrap .cascade-lines.is-right:after {
    content: '';
    width: 100%;
    height: 130px;
    background: var(--color-primary);
    opacity: 0.5;
    display: block;
}

.is-section-light .advantage-list-wrap .cascade-lines.is-left:before,
.is-section-light .advantage-list-wrap .cascade-lines.is-right:after {
    background: #6c7d92;
}

.mission-vision-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--size-8);
    margin: 0 -4px;
}
.mission-vision-list .mission-vision-list-item {
    width: 50%;
    padding: 0 4px;
}
.mission-vision-list.is-4-col .mission-vision-list-item {
    width: 25%;
    padding: 0 4px;
}
.mission-vision-list.is-3-col .mission-vision-list-item {
    width: 33.33%;
    padding: 0 4px;
}

.mission-vision-item {
    position: relative;
    padding: 24px 24px 40px;
    height: 100%;
    background:
        linear-gradient(#313841, #313841) padding-box,
        linear-gradient(to right, #3f4c5d, #535b64) border-box;
    border: 1px solid transparent;
    border-radius: 3px;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.4;
    font-weight: var(--font-weight-medium);
    transition: var(--transition);
    z-index: 1;
    letter-spacing: 0.02em;
}
.mission-vision-item .mission-vision-item-icon-title {
    display: flex;
    align-items: center;
    gap: var(--size-14);
    padding-bottom: var(--size-14);
}
.mission-vision-item .mission-vision-item-icon {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-control-slate);
    color: var(--color-primary);
    border-radius: 100%;
    transition: var(--transition);
    flex-shrink: 0;
}
.mission-vision-item .mission-vision-item-title h3 {
    padding-bottom: 0;
    color: var(--color-primary);
    font-size: var(--size-16);
    text-transform: uppercase;
}
.mission-vision-item .mission-vision-item-text > *:last-child {
    padding-bottom: 0;
}

/* ================================
   Advantage Section Style - END
================================ */

/* ================================
   Featured Section Style - START
================================ */
.featured-solutions-section {
    padding-top: var(--size-44);
    padding-bottom: var(--size-84);
}
.featured-solutions-section .title-wrap {
    display: flex;
    gap: 34px;
    padding-bottom: var(--size-44);
}
.featured-solutions-section .title-wrap :is(h1, h2, h3, h4, h5, h6) {
    width: 465px;
    flex-shrink: 0;
    color: var(--color-primary);
}
.featured-solutions-section .title-wrap .title-text {
    width: 100%;
    padding-top: 0;
}
.solutions-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 18px;
    margin: 0 -9px;
}
.solutions-list .solutions-list-item {
    width: 33.33%;
    padding: 0 9px;
}
.solutions-list .solutions-list-item.is-half-width {
    width: 50%;
    padding: 0 9px;
}

.solution-item {
    height: 100%;
    background: #1b2730;
    border: 1px solid #535b64;
    border-radius: 7px;
    padding: 34px 20px 34px 24px;
    display: flex;
    flex-direction: column;
    gap: var(--size-24);
    min-height: 400px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.is-half-width .solution-item {
    min-height: 460px;
}
.solution-item .solution-item-title {
    padding-bottom: 0;
    color: var(--color-primary);
    position: relative;
    z-index: 2;
}
.solution-item .solution-item-action {
    margin-top: auto;
    position: relative;
    z-index: 2;
}
.solution-item .solution-item-shape {
    position: absolute;
    top: -30px;
    right: 0;
    width: 88px;
    height: 185px;
    object-fit: cover;
    object-position: left top;
    z-index: -1;
}
.is-half-width .solution-item .solution-item-shape {
    height: 180px;
    width: 233px;
}
.solution-item .solution-item-list {
    position: relative;
    z-index: 2;
}
.solution-item .solution-item-list ul {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--size-8);
    max-width: 290px;
}
.solution-item .solution-item-list ul li a {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    line-height: 1.3;
    color: var(--color-gray);
    font-weight: var(--font-weight-medium);
    gap: 2px;
    padding: 11px 12px 11px 18px;
    background: #2c3a44;
    border: 1px solid #586874;
    border-radius: 3px 25px 25px 3px;
    overflow: hidden;
    transition: var(--transition);
}
.solution-item .solution-item-list ul li a .btn-icon {
    background: var(--color-control-slate);
}
.solution-item .solution-item-list ul li a:before {
    content: '';
    position: absolute;
    top: 0;
    left: -4px;
    width: 4px;
    height: 100%;
    background: var(--color-primary);
    transition: var(--transition);
}
.solution-item .solution-item-list ul li a:hover {
    background: #46657c;
    border-color: #586874;
    color: var(--color-white);
    padding-left: 26px;
}
.solution-item .solution-item-list ul li a:hover:before {
    left: -1px;
}
.solution-item .solution-item-list ul li a:hover .btn-icon {
    background: var(--color-primary);
    color: var(--color-gray);
}
.solution-item .solution-item-img {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}
/* ================================
   Featured Section Style - END
================================ */
/* ================================
   Services Section Style - START
================================ */
.services-section {
    background: var(--color-gray);
    color: var(--color-iron-core);
    padding: var(--size-64) 0;
}
.services-section-title-wrap {
    display: flex;
    gap: var(--size-16);
    padding-bottom: var(--size-24);
    border-bottom: 1px solid rgba(108, 125, 146, 0.24);
}
.services-section-title-wrap .icon {
    flex-shrink: 0;
    color: var(--color-primary);
}
.services-section-title-wrap .services-section-title {
    padding: 0;
    font-size: var(--size-16);
    color: var(--color-control-slate);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.services-section .container > .title-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-44);
    padding-bottom: var(--size-24);
    padding-top: 34px;
    border-bottom: 1px solid rgba(108, 125, 146, 0.24);
}
.services-section .container > .title-wrap :is(.h6) {
    font-weight: var(--font-weight-semibold);
}
.services-section .container > .title-wrap .title-text {
    padding-top: 0;
}

.services-tabs {
    display: flex;
    gap: 74px;
    padding-top: 34px;
}
.services-tabs .tab-nav-wrap {
    width: 334px;
    flex-shrink: 0;
    position: relative;
}
.services-tabs .tab-nav-wrap .title-wrap {
    padding-bottom: 34px;
}
.services-tabs .tab-nav-wrap .title-wrap .h6 {
    font-weight: var(--font-weight-semibold);
}
.services-tabs .tab-nav-cta {
    padding-top: var(--size-40);
}
.services-tabs .tab-nav-cta.is-mobile {
    display: none;
}
.services-tabs .tab-content {
    width: 100%;
}
.services-tabs .services-tabs-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 51px;
    background: transparent;
    color: var(--color-night-rig);
    position: absolute;
    right: 1px;
    top: 1px;
}
.services-tabs .services-tabs-toggle .icon-x,
.services-tabs .services-tabs-toggle.active .icon-bar {
    display: none;
}
.services-tabs .services-tabs-toggle.active .icon-x {
    display: block;
}

.services-tabs .tab-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--size-12);
    font-size: 17px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--color-iron-core);
    background: transparent;
    border-bottom: 1px solid rgba(108, 125, 146, 0.24);
    width: 100%;
    transition: var(--transition);
    border-radius: 0;
}
.services-tabs .tab-nav-item .btn-icon {
    background: var(--color-control-slate);
    color: var(--color-gray);
}
.services-tabs .tab-nav-item.active {
    background: rgba(108, 125, 146, 0.2);
    border-color: transparent;
    border-radius: 3px;
    font-weight: var(--font-weight-medium);
}
.services-tabs .tab-nav-item.active .btn-icon {
    color: var(--color-control-slate);
    background: var(--color-gray);
}
.services-tabs .tab-nav-item:not(.active):hover,
.services-tabs .tab-nav-item:not(.active):focus {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: transparent;
}
.services-tabs .tab-nav-item:not(.active):hover .btn-icon,
.services-tabs .tab-nav-item:not(.active):focus .btn-icon {
    background: var(--color-gray);
    color: var(--color-control-slate);
}
.services-tabs .services-img {
    position: relative;
    aspect-ratio: 1 / 0.632;
}
.services-tabs .services-img img {
    border-radius: 3px;
}
/* ================================
   Services Section Style - END
================================ */

/* ================================
   Technologies Section Style - START
================================ */
.technologies-section {
    padding: 103px 0;
    position: relative;
}
.technologies-bg-img.cover-img {
    object-fit: fill;
}
.technologies-section .container {
    position: relative;
    z-index: 2;
}
.technologies-section .title-wrap {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: var(--size-44);
}
.technologies-section .title-wrap :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-primary);
    max-width: 440px;
    margin: 0 auto;
}
.center-btn {
    padding-top: var(--size-44);
    text-align: center;
}
.technologies-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--size-14);
    margin: 0 -7px;
}
.technologies-list .technologies-list-item {
    width: 50%;
    padding: 0 7px;
}
.technology-item {
    position: relative;
    padding: 24px;
    height: 100%;
    background:
        linear-gradient(#1b2730, #1b2730) padding-box,
        linear-gradient(to right, #535b64, #3f4c5d) border-box;
    border: 1px solid transparent;
    min-height: 200px;
    border-radius: 3px 7px 7px 7px;
    overflow: hidden;
    font-size: var(--text-xl);
    line-height: 1.3;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
    transition: var(--transition);
    z-index: 1;
}
.technology-item:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--color-gray);
    z-index: -1;
    opacity: 0;
    transition: var(--transition);
}
.technology-item .technology-item-icon {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 100%;
    background: var(--color-iron-core);
    border: 1px solid var(--color-control-slate);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.technology-item .technology-item-title {
    position: relative;
    z-index: 1;
    max-width: 170px;
    padding-top: var(--size-14);
}
.technology-item .technology-item-images {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
.technology-item .technology-item-shape {
    position: absolute;
    right: 0;
    bottom: 0;
    transition: var(--transition);
}
.technology-item .technology-item-img {
    position: absolute;
    right: 0;
    top: 37px;
    transition: var(--transition);
}
.technology-item:hover {
    color: var(--color-iron-core);
}
.technology-item:hover:after {
    opacity: 1;
}
.technology-item:hover .technology-item-shape {
    bottom: -43px;
}
.technology-item:hover .technology-item-img {
    top: 0;
}
/* ================================
   Technologies Section Style - END
================================ */

.served-section {
    padding: var(--size-84) 0;
}

.served-row {
    display: flex;
    gap: var(--size-8);
}
.served-row .served-col-left {
    width: 419px;
    flex-shrink: 0;
}
.served-row .served-col-right {
    width: 100%;
}

.served-row .title-wrap {
    max-width: 340px;
    padding-bottom: var(--size-24);
}
.served-row .title-wrap :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-primary);
    padding-bottom: 8px;
}
.map-legend-wrap .map-legend-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    padding-bottom: var(--size-12);
}
.map-legend-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-20);
}
.map-legend-item {
    display: flex;
    align-items: center;
    gap: var(--size-12);
}
.map-legend-item .map-legend-icon {
    width: 24px;
    height: 24px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray);
    border: 1px solid #e7e9ea;
    background: #313841;
}
.map-legend-item.is-primary .map-legend-icon {
    background: var(--color-primary);
    color: var(--color-white);
}
.map-legend-item .map-legend-text {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.served-cta {
    padding-top: var(--size-44);
}

/* ================================
   Testimonial Section Style - START
================================ */
.testimonial-cta-section {
    background: var(--color-gray);
    color: var(--color-iron-core);
}
.testimonial-cta-section .testimonial-section {
    background: transparent;
}
.testimonial-section {
    background: var(--color-gray);
    padding: var(--size-64) 0;
    color: var(--color-iron-core);
}
.testimonial-section .container {
    position: relative;
    z-index: 2;
}
.testimonial-section .title-wrap {
    max-width: 325px;
    margin: 0 auto;
    padding-bottom: var(--size-44);
    text-align: center;
}
.embla__scrollbar {
    position: relative;
    width: 90%;
    height: 4px;
    background: rgba(108, 125, 146, 0.28);
    margin-top: 24px;
    max-width: 746px;
    margin: 0 auto;
    cursor: pointer;
}

.embla__scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 20%;
    background: var(--color-primary);
    cursor: grab;
    will-change: transform;
    touch-action: none;
}

.embla__scrollbar-thumb:active {
    cursor: grabbing;
}

.testimonial-slider {
    --slide-spacing: 14px;
    --slide-size: 33.33%;
    overflow: visible;
}
.testimonial-slider .testimonial-slider-viewport {
    overflow: hidden;
}
.testimonial-slider .embla__container {
    touch-action: pan-y pinch-zoom;
    margin-left: calc(var(--slide-spacing) * -1);
    padding-bottom: var(--size-24);
}
.testimonial-slider .embla__slide {
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: var(--slide-spacing);
    flex: 0 0 var(--slide-size);
}

.testimonial-item {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f7f7f7;
    border: 1px solid #e4e4e4;
    border-radius: 3px 7px 7px 7px;
    padding: 28px 36px 36px;
}
.testimonial-item .testimonial-item-text {
    font-size: 15px;
    line-height: 1.36;
    font-weight: var(--font-weight-medium);
    color: rgba(49, 56, 65, 0.8);
    padding-bottom: 14px;
}
.testimonial-item .testimonial-item-info {
    display: flex;
    align-items: center;
    gap: var(--size-16);
    margin-top: auto;
}

.testimonial-item .testimonial-item-by {
    width: 100%;
}
.testimonial-item .testimonial-item-logo {
    width: 90px;
    flex-shrink: 0;
    text-align: right;
}
.testimonial-item .testimonial-item-name {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    line-height: 1.14;
    color: var(--color-primary-dark);
    padding-bottom: var(--size-8);
}
.testimonial-item .testimonial-item-position {
    font-size: var(--size-14);
    font-weight: var(--font-weight-bold);
    line-height: 1.14;
    color: rgba(108, 125, 146, 0.8);
    padding-bottom: 4px;
}
.testimonial-item .testimonial-item-logo-name {
    font-size: var(--size-14);
    font-weight: var(--font-weight-semibold);
    line-height: 1.14;
    color: rgba(108, 125, 146, 0.8);
    text-transform: uppercase;
}

/* ================================
   Testimonial Section Style - END
================================ */
/* ================================
   CTA Section Style - START
================================ */
.cta-section {
    background: var(--color-gray);
    padding: var(--size-64) 0;
    position: relative;
}

.cta-section .container {
    position: relative;
    z-index: 2;
}

.cta-section.is-overflow-hidden {
    overflow: hidden;
}

.cta-section .cta-shape {
    position: absolute;
    bottom: 142px;
    left: 0;
}

.cta-section-box {
    background: var(--color-iron-core);
    border-radius: 7px;
    position: relative;
    overflow: hidden;
    padding: 54px 24px;
}
.cta-section-box .title-wrap {
    max-width: 460px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}
.cta-section-box .title-wrap .title-icon {
    color: var(--color-primary);
    display: flex;
    justify-content: center;
    padding-bottom: 28px;
}
.cta-section-box .title-wrap .h6 {
    color: var(--color-primary);
    font-family: var(--font-heading);
    letter-spacing: 0.02em;
}

.cta-section-box .cta-img {
    position: absolute;
    width: 31.44%;
}
.cta-section-box .cta-img.is-top {
    top: 0;
    right: 0;
}
.cta-section-box .cta-img.is-bottom {
    bottom: 0;
    left: 0;
}
/* ================================
   CTA Section Style - END
================================ */

/* ================================
   Inner Banner Section Style - START
================================ */
.inner-banner-section {
    position: relative;
    overflow: hidden;
    background: var(--color-night-rig);
    padding: 66px 0 90px;
}
.inner-banner-section.is-set-min-height {
    min-height: 360px;
}
.inner-banner-section.is-image-visible {
    overflow: visible;
}
.inner-banner-section .container {
    position: relative;
}
.inner-banner-section .inner-banner-bg-img {
    top: -90px;
}
.inner-banner-section .inner-banner-bg-img svg {
    width: 100%;
    max-width: 1440px;
}
.inner-banner-section .title-wrap {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}
.inner-banner-section .title-wrap :is(h1, h2, h3, h4, h5, h6) {
    max-width: var(--heading-width, 510px);
    margin: 0 auto;
}

.inner-banner-section .title-wrap .title-text {
    max-width: var(--text-width, 610px);
    margin: 0 auto;
}
/* ================================
   Inner Banner Section Style - END
================================ */

/* ================================
   About Intro Section Style - START
================================ */
.about-intro-section {
    padding: var(--size-64) 0 var(--size-24);
}
.about-intro-eyebrow {
    display: flex;
    align-items: flex-end;
    gap: var(--size-16);
    margin-bottom: var(--size-24);
}
.about-intro-eyebrow-icon {
    display: flex;
    flex-shrink: 0;
    color: var(--color-primary);
}
.about-intro-eyebrow h2 {
    margin: 0;
    padding: 0;
    font-size: var(--text-base);
    letter-spacing: 0.03em;
    color: var(--color-control-slate);
}
.about-intro-sep {
    height: 1px;
    background: rgba(108, 125, 146, 0.24);
    margin-bottom: var(--size-28);
}
.about-intro-row {
    display: flex;
    gap: var(--size-44);
    align-items: flex-start;
    margin-bottom: var(--size-32);
}
.about-intro-row > div {
    flex: 1 1 0;
    min-width: 0;
}
.about-intro-lead p {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    color: var(--color-iron-core);
}
.about-intro-text {
    color: var(--color-iron-core);
}
.about-intro-text p:last-child {
    padding-bottom: 0;
}
.about-intro-img-wrap {
    overflow: hidden;
    position: relative;
    aspect-ratio: 1 / 0.346;
}
.about-intro-img-wrap .about-intro-img {
    display: block;
    width: 100%;
    border-radius: 10px;
    clip-path: polygon(0 0, calc(100% - 84px) 0, 100% 84px, 100% 100%, 0 100%);
}
.about-intro-img-wrap .about-intro-shape {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 1;
}
/* ================================
   About Intro Section Style - END
================================ */

/* ================================
   QHSE Section Style - START
================================ */
.qhse-section {
    padding: var(--size-80) 0;
    position: relative;
}
.qhse-section .container {
    position: relative;
    z-index: 1;
}
.qhse-section .qhse-bg-img {
    height: 140%;
    bottom: 0;
    top: auto;
    max-width: 1440px;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.qhse-logo-shape {
    position: absolute;
    left: 0;
    bottom: -54px;
}
.qhse-row {
    display: flex;
    gap: var(--size-40);
    align-items: flex-start;
}
.qhse-label {
    flex-shrink: 0;
    width: 206px;
}
.qhse-label h2 {
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    color: var(--color-primary);
}
.qhse-cards {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--size-14);
}
.qhse-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--size-14);
    min-height: 232px;
    padding: var(--size-32) var(--size-24);
    background:
        linear-gradient(#1b2730, #1b2730) padding-box,
        linear-gradient(to right, #535b64, #3f4c5d) border-box;
    border: 1px solid transparent;
    border-radius: 3px;
    overflow: hidden;
}
.qhse-item .qhse-item-title {
    padding-bottom: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-primary);
    text-transform: none;
    font-family: var(--font-text);
}
.qhse-item p {
    max-width: 340px;
    padding-bottom: 0;
    font-size: 15px;
    line-height: 1.4;
}
/* ================================
   QHSE Section Style - END
================================ */

/* ================================
   Team Section Style - START
================================ */
.team-section {
    padding: var(--size-80) 0;
}
.team-section .title-wrap {
    text-align: center;
    color: var(--color-primary);
    padding-bottom: var(--size-44);
}
.team-section .title-wrap .title-icon {
    padding-bottom: var(--size-16);
}
.team-section .title-wrap .title-icon svg {
    margin: 0 auto;
}
.team-row-wrap {
    position: relative;
    overflow: hidden;
}
.team-row-wrap .container {
    position: relative;
    max-width: 1232px;
}
.team-row-wrap + .team-row-wrap {
    margin-top: var(--size-92);
}
.team-row-wrap .cascade-lines {
    position: absolute;
    top: 90px;
    width: 9999px;
    display: flex;
}
.team-row-wrap .cascade-lines img {
    flex-shrink: 0;
}
.team-row-wrap .cascade-lines.is-left {
    right: 100%;
}
.team-row-wrap .cascade-lines.is-right {
    left: 100%;
}
.team-row-wrap .cascade-lines.is-left:before,
.team-row-wrap .cascade-lines.is-right:after {
    content: '';
    width: 100%;
    height: 130px;
    background: var(--color-primary);
    opacity: 0.5;
    display: block;
}
.team-row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.team-card {
    width: 25%;
}
.team-card-photo {
    position: relative;
    height: 320px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.team-card-photo:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(225deg, rgba(138, 199, 90, 0) 74%, var(--color-primary) 99%);
    pointer-events: none;
}
.team-card-linkedin {
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-gray);
    color: var(--color-iron-core);
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.26);
    opacity: 0;
    transform: translateY(12px);
    transition: var(--transition);
    z-index: 2;
}
.team-card:hover .team-card-linkedin {
    opacity: 1;
    transform: translateY(0);
}
.team-card:hover .team-card-photo {
    border-bottom-left-radius: 29px;
}
.team-card-info {
    padding: var(--size-24) 0 0 0;
}
.team-card-name {
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-primary);
    font-family: var(--font-text);
    padding-bottom: var(--size-8);
}
.team-card-title {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-bottom: 0;
}
/* ================================
   Team Section Style - END
================================ */

/* ================================
   Team Bio Popup Style - START
================================ */
.team-bio-list {
    display: none;
}
.fancybox__slide:has(.is-sidebar-popup) {
    align-items: flex-end;
}
.fancybox__slide.has-close-btn:has(.is-sidebar-popup) {
    padding: 0;
}
.team-bio > .f-button.is-close-button {
    display: none;
}
.fancybox__slide.has-html:has(.is-sidebar-popup) {
    overflow: hidden;
}
.fancybox__slide:has(.is-sidebar-popup):before,
.fancybox__slide:has(.is-sidebar-popup):after {
    display: none;
}
.fancybox__backdrop {
    background: rgba(32, 44, 65, 0.65);
    backdrop-filter: blur(8px);
}
.fancybox-fadeIn {
    animation: var(--f-transition-duration, 0.3s) ease both fancybox-fadeIn;
}

.fancybox-fadeOut {
    animation: var(--f-transition-duration, 0.3s) ease both fancybox-fadeOut;
}

@keyframes fancybox-fadeIn {
    0% {
        transform: translate3d(var(--f-zoomInUp-x, 24px), var(--f-zoomInUp-y, 0), 0);
        opacity: var(--f-zoomInUp-opacity, 0);
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fancybox-fadeOut {
    to {
        transform: translate3d(var(--f-zoomOutDown-x, 24px), var(--f-zoomOutDown-y, 0), 0);
        opacity: 0;
    }
}
.team-bio {
    max-width: 1040px;
    padding: 0;
    background: var(--color-gray);
    border-radius: 7px;
    color: var(--color-iron-core);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--size-14);
}
.team-bio.f-html {
    padding: 0;
    background: var(--color-gray);
}
.team-bio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--size-18) var(--size-14) var(--size-18) var(--size-24);
    flex-shrink: 0;
}
.team-bio-title {
    display: flex;
    align-items: center;
    gap: var(--size-16);
}
.team-bio-title .team-bio-title-icon {
    width: 34px;
    height: 34px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    background: var(--color-primary);
    flex-shrink: 0;
}
.team-bio-title h2 {
    font-family: var(--font-text);
    font-size: var(--size-14);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    color: var(--color-night-rig);
    padding-bottom: 0;
}
.close-btn {
    background: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 13px;
    color: var(--color-control-slate);
    transition: all 0.3s ease-in-out;
}
.close-btn:hover {
    color: var(--color-white);
    background: var(--color-primary);
}
.team-bio-row {
    display: flex;
    gap: 34px;
    /* align-items: flex-start;
    height: 100%; */
    overflow: auto;
    padding: 0 var(--size-72) var(--size-48) var(--size-48);
}
.team-bio-photo {
    flex-shrink: 0;
    width: 460px;
    padding-top: var(--size-24);
}
.team-bio-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%);
}
.team-bio-content {
    width: 100%;
}
.team-bio-name-position {
    padding: 34px 0 24px;
    border-top: 1px solid rgba(108, 125, 146, 0.24);
}
.team-bio-name-position:has(.team-bio-position) .team-bio-name {
    padding-bottom: var(--size-8);
}
.team-bio-name {
    padding-bottom: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-iron-core);
    font-family: var(--font-text);
    text-transform: none;
    letter-spacing: 0;
}
.team-bio-position {
    padding-bottom: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
}
.team-bio-text {
    padding-bottom: var(--size-24);
    color: var(--color-iron-core);
}
.team-bio-text p:last-child {
    padding-bottom: 0;
}
.team-bio .btn-icon-inline {
    display: inline-flex;
    width: 20px;
    height: 20px;
    margin-right: -8px;
}
/* ================================
   Team Bio Popup Style - END
================================ */

/* ================================
   Contact Section Style - START
================================ */
.contact-section {
    padding: var(--size-64) 0 var(--size-84);
}
.contact-section .container {
    position: relative;
    z-index: 1;
}
.contact-section .title-wrap {
    text-align: center;
    color: var(--color-primary);
    padding-bottom: var(--size-44);
}
.contact-section .title-wrap .title-icon {
    padding-bottom: var(--size-16);
}
.contact-section .title-wrap .title-icon svg {
    margin: 0 auto;
}
.contact-card-wrap {
    position: relative;
}
.contact-card-shape {
    position: absolute;
    left: 0;
    bottom: -105px;
    pointer-events: none;
    z-index: 0;
}
.contact-card {
    position: relative;
    z-index: 1;
    display: flex;
    gap: var(--size-52);
    padding: var(--size-32);
    border: 1px solid #3f4c5d;
    background: #1b2730;
    border-radius: 7px;
    overflow: hidden;
}
.contact-info {
    width: 220px;
    flex-shrink: 0;
}
.contact-info-title {
    padding-bottom: var(--size-24);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    font-family: var(--font-text);
}
.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-16);
    list-style: none;
    margin: 0;
}
.contact-info-list li a {
    display: flex;
    gap: var(--size-8);
    color: var(--color-gray);
    font-size: 13px;
    letter-spacing: 0.03em;
    transition: var(--transition);
}
.contact-info-list li a .icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}
.contact-info-list li a span:not(.icon) {
    padding-top: 5px;
    display: block;
}
.contact-info-list li a:hover {
    color: var(--color-primary);
}
.contact-form {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--size-24);
    background: var(--color-gray);
    border-radius: 5px;
}
.contact-form .about-intro-eyebrow,
.contact-form .about-intro-sep {
    margin-bottom: var(--size-24);
}
.form-fields {
    display: flex;
    flex-direction: column;
    gap: var(--size-16);
    padding-bottom: var(--size-16);
}
.form-row {
    display: flex;
    gap: var(--size-16);
}
.form-field {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--size-6);
}
.form-field .form-label {
    display: block;
    font-size: 13px;
    color: var(--color-iron-core);
    letter-spacing: 0.03em;
}
.form-field .form-control {
    display: block;
    width: 100%;
    padding: 0 18px 0 18px;
    height: 45px;
    border: 1px solid #a5b2bb;
    border-radius: 5px;
    background: var(--color-white);
    font-family: var(--font-text);
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    color: #637183;
}
.form-field .form-control::placeholder {
    color: #adadad;
    font-weight: var(--font-weight-medium);
}
.form-field select.form-control {
    appearance: none;
    color: #637183;
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5251 5.99999C5.42128 6.00056 5.31837 5.98165 5.22226 5.94434C5.12615 5.90704 5.03873 5.85207 4.96502 5.7826L0.231991 1.28491C0.0834497 1.14375 0 0.952306 0 0.752682C0 0.553059 0.0834497 0.361611 0.231991 0.220456C0.380532 0.0793003 0.581997 0 0.792066 0C1.00214 0 1.2036 0.0793003 1.35214 0.220456L5.5251 4.19342L9.69806 0.227952C9.84896 0.105145 10.0431 0.0409732 10.2416 0.0482603C10.4401 0.0555475 10.6285 0.133757 10.769 0.267259C10.9094 0.400762 10.9917 0.579724 10.9994 0.768384C11.0071 0.957044 10.9396 1.14151 10.8103 1.28491L6.07729 5.7826C5.93036 5.92109 5.73204 5.99916 5.5251 5.99999Z' fill='%23313841'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: right 16px center;
}
.form-field .iti {
    width: 100%;
}
.form-field textarea.form-control {
    min-height: 124px;
    resize: vertical;
    padding-top: 12px;
}
.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--size-12);
    padding-bottom: var(--size-24);
}
.form-checkbox input[type='checkbox'] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    appearance: none;
    border: 1px solid #c4c4c4;
    background-color: var(--color-white);
    border-radius: 3px;
    transition: all 0.3s ease-out;
    position: relative;
}
.form-checkbox input[type='checkbox']:after {
    content: '';
    display: block;
    width: 19px;
    height: 19px;
    left: 0;
    top: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-check'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none' /%3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
    transform: scale(0);
    opacity: 0;
    transition: all 0.3s ease-out;
}
.form-checkbox input[type='checkbox']:checked {
    border-color: var(--color-primary);
    background: var(--color-primary);
}
.form-checkbox input[type='checkbox']:checked:after {
    transform: scale(1);
    opacity: 1;
}

.form-checkbox label {
    font-size: 13px;
    line-height: 1.3;
    color: var(--color-iron-core);
    cursor: pointer;
}
.form-checkbox label a {
    text-decoration: underline;
}
.form-checkbox .wpcf7-list-item {
    margin: 0;
}
.form-checkbox .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: var(--size-12);
}
.wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    display: block;
    padding-top: 2px;
}
div.wpcf7-response-output {
    display: none;
}
/* ================================
   Contact Section Style - END
================================ */

/* ================================
   Privacy Section Style - START
================================ */
.privacy-section {
    padding: var(--size-64) 0;
}
.privacy-section .container {
    position: relative;
    z-index: 1;
}

.privacy-content-wrap {
    padding: 34px;
    border-radius: 7px;
    border: 1px solid #3f4c5d;
    background: #1b2730;
}

.privacy-content-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--size-16);
    padding-bottom: var(--size-24);
}
.privacy-content-header .h6 {
    padding-bottom: 0;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.content-block {
    font-size: 13px;
    letter-spacing: 0.03em;
}
.content-block p:last-child {
    padding-bottom: 0;
}
.content-block ul,
.content-block ol {
    list-style-position: outside;
    display: flex;
    flex-direction: column;
    gap: var(--size-16);
    padding-left: var(--size-24);
}
.content-block ul:last-child,
.content-block ol:last-child {
    margin-bottom: 0;
}
.content-block p a,
.content-block ul a,
.content-block ol a {
    text-decoration: underline;
    transition: var(--transition);
    color: var(--color-primary);
}
.content-block p a:hover,
.content-block ul a:hover,
.content-block ol a:hover {
    color: var(--color-primary-dark);
}
.content-block hr {
    margin-bottom: 16px;
    border: 0;
    height: 1px;
    background: var(--color-gray-2);
}
.text-primary {
    color: var(--color-primary);
}

.privacy-content-wrap .content-block h3 {
    text-transform: none;
    color: var(--color-primary);
    font-family: var(--font-text);
    font-size: var(--size-16);
}
/* ================================
   Privacy Section Style - END
================================ */

/* ================================
   Wellhead Systems Section Style - START
================================ */
.wellhead-systems-section {
    padding: 104px 0;
    overflow: hidden;
    position: relative;
}
.wellhead-systems-section .banner-bg-img {
    max-height: 900px;
}
.wellhead-systems-section .container {
    position: relative;
    z-index: 1;
}
.wellhead-systems-section .title-wrap {
    text-align: center;
    padding-bottom: var(--size-44);
}
.wellhead-systems-section .title-wrap :is(h2, h3, h4, h5) {
    color: var(--color-primary);
}

.wellhead-accordion .accordion {
    display: flex;
    flex-direction: column;
    gap: var(--size-8);
}
.wellhead-accordion .accordion-item {
    border: 1px solid #535b64;
    background: #1b2730;
    border-radius: 7px;
    transition: var(--transition);
}
.wellhead-accordion .accordion-item:has(.accordion-header.active) {
    background: var(--color-gray);
}

.wellhead-accordion .accordion-header {
    display: flex;
    padding: var(--size-18) 13px var(--size-18) var(--size-24);
    align-items: center;
    width: 100%;
    gap: var(--size-16);
}

.wellhead-accordion .accordion-logo-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    border: 1px solid #3f4c5d;
    background: var(--color-iron-core);
    transition: var(--transition);
}
.wellhead-accordion .accordion-header-title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    color: var(--color-gray);
    text-transform: uppercase;
    transition: var(--transition);
}
.wellhead-accordion .accordion-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 13px;
    color: var(--color-white);
    margin-left: auto;
    transition: var(--transition);
}
.wellhead-accordion .accordion-icon .is-minus,
.wellhead-accordion .active .accordion-icon .is-plus {
    display: none;
}
.wellhead-accordion .active .accordion-icon {
    background-color: var(--color-white);
    color: var(--color-control-slate);
}
.wellhead-accordion .active .accordion-icon .is-minus {
    display: block;
}

.wellhead-accordion .accordion-item:has(.accordion-header:not(.active)):hover {
    background: #27333b;
}

.wellhead-accordion .accordion-header:not(.active):hover .accordion-logo-icon,
.wellhead-accordion .active .accordion-logo-icon {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: #6aa63a;
}
.wellhead-accordion .active .accordion-logo-icon {
    border-color: var(--color-primary);
}
.wellhead-accordion .accordion-header:not(.active):hover .accordion-header-title {
    color: var(--color-primary);
}
.wellhead-accordion .accordion-header:not(.active):hover .accordion-icon {
    background: rgba(108, 125, 146, 0.4);
}

.wellhead-accordion .active .accordion-header-title {
    color: var(--color-night-rig);
}
.wellhead-accordion .accordion-collapse {
    display: none;
}
.wellhead-accordion .accordion-collapse.active {
    display: block;
}

.wellhead-accordion-content {
    padding: 14px 72px 44px 48px;
    color: var(--color-iron-core);
}
.wellhead-row {
    display: flex;
    gap: 34px;
}
.wellhead-row .wellhead-col-left {
    width: 100%;
}
.wellhead-content-block {
    display: flex;
    flex-direction: column;
    gap: var(--size-44);
}
.wellhead-content-block-text {
    padding-top: 35px;
    border-top: 1px solid rgba(108, 125, 146, 0.24);
}
.wellhead-content-block-text .h6 {
    padding-bottom: var(--size-24);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
}
.wellhead-content-block-text > *:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

.wellhead-key-features h4 {
    font-size: var(--text-xs);
    color: var(--color-primary-dark);
    text-transform: uppercase;
}
.wellhead-key-features ul {
    margin: 0;
    list-style: none;
}
.wellhead-key-features.is-list-two-column ul {
    display: grid;
    column-gap: var(--size-16);
    grid-template-columns: 1fr 1fr;
}
.wellhead-key-features ul li {
    position: relative;
    padding: 12px 12px 12px 22px;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    border-bottom: 1px solid rgba(108, 125, 146, 0.24);
}
.wellhead-key-features ul li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    height: 11px;
    width: 6px;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='11' viewBox='0 0 6 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.99999 5.4749C6.00056 5.57872 5.98165 5.68163 5.94434 5.77774C5.90704 5.87385 5.85207 5.96127 5.7826 6.03498L1.28491 10.768C1.14375 10.9166 0.952306 11 0.752682 11C0.553059 11 0.361611 10.9166 0.220456 10.768C0.0793003 10.6195 0 10.418 0 10.2079C0 9.99786 0.0793003 9.7964 0.220456 9.64786L4.19342 5.4749L0.227952 1.30194C0.105145 1.15104 0.0409732 0.956924 0.0482603 0.758392C0.0555475 0.55986 0.133757 0.371533 0.267259 0.231046C0.400762 0.0905581 0.579724 0.00825691 0.768384 0.000588417C0.957044 -0.00707912 1.14151 0.0604486 1.28491 0.189681L5.7826 4.92271C5.92109 5.06964 5.99916 5.26796 5.99999 5.4749Z' fill='%236AA63A'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
}

.wellhead-row .wellhead-col-right {
    width: 460px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 29px;
}
.wellhead-row .wellhead-col-right .wellhead-img img {
    width: 100%;
    border-radius: 8px;
    clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%);
}
.wellhead-row .wellhead-col-right .btn-group {
    justify-content: space-between;
}

.wellhead-accordion-content > .btn-group {
    padding-top: var(--size-44);
    justify-content: flex-start;
}

.wellhead-row-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-48);
}
.wellhead-row-list .wellhead-row:nth-child(2n) {
    flex-direction: row-reverse;
}
/* ================================
   Wellhead Systems Section Style - END
================================ */

/* ================================
   Patents Section Style - START
================================ */
.patents-section {
    padding: var(--size-64) 0 var(--size-84);
}
.patents-section .title-wrap {
    text-align: center;
    color: var(--color-primary);
    padding-bottom: 34px;
}
.patents-section .title-wrap .title-icon {
    padding-bottom: var(--size-16);
}
.patents-section .title-wrap .title-icon svg {
    margin: 0 auto;
}
.patent-list {
    display: flex;
    flex-direction: column;
}
.patent-item {
    padding: var(--size-20) 0;
    border-bottom: 1px solid rgba(108, 125, 146, 0.24);
    min-height: 174px;
}
.patent-item-row {
    display: grid;
    grid-template-columns: 440px 1fr;
    grid-template-areas: 'heading desc' 'cta desc';
    column-gap: var(--size-16);
    row-gap: var(--size-16);
}
.patent-item-heading {
    grid-area: heading;
    display: flex;
    gap: var(--size-16);
}
.patent-item-number {
    padding-top: 6px;
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--color-control-slate);
    transition: var(--transition);
}
.patent-item-title {
    padding-bottom: 0;
    font-family: var(--font-text);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-transform: none;
    color: var(--color-gray);
    max-width: 264px;
    transition: var(--transition);
}
.patent-item-cta {
    grid-area: cta;
    padding-left: 28px;
}
.patent-item-desc {
    grid-area: desc;
    color: var(--color-gray);
}
.patent-item-desc p:last-child {
    padding-bottom: 0;
}
.patent-item:hover {
    border-color: rgba(138, 199, 90, 0.24);
}
.patent-item:hover .patent-item-number {
    color: var(--color-white);
}
.patent-item:hover .patent-item-title {
    color: var(--color-primary);
}
.patent-item.is-hover-button-show .patent-item-cta,
.patent-item .patent-item-cta {
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}
.patent-item.is-hover-button-show:hover .patent-item-cta,
.patent-item:hover .patent-item-cta {
    opacity: 1;
    visibility: visible;
}
/* ================================
   Patents Section Style - END
================================ */

/* ================================
   Career Section Style - START
================================ */
.career-section {
    padding: var(--size-64) 0 var(--size-84);
}
.career-section .container {
    position: relative;
    z-index: 1;
}
.career-section .title-wrap {
    text-align: center;
    color: var(--color-primary);
    padding-bottom: var(--size-44);
}
.career-section .title-wrap .title-icon {
    padding-bottom: var(--size-16);
}
.career-section .title-wrap .title-icon svg {
    margin: 0 auto;
}
.career-list, .whr-items {
    display: flex;
    flex-direction: column;
    gap: var(--size-16);
}
.career-item,
.whr-item{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--size-14);
    padding: var(--size-24);
    border: 1px solid #3f4c5d;
    background: #1b2730;
    border-radius: 7px;
}
.whr-info{
    display: none;
}
.career-item-content {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    gap: var(--size-24);
}
.career-item-meta,
.whr-title{
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--size-12);
}
.career-item-title,
.whr-title {
    padding-bottom: 0;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    font-size: var(--font-h6);
    font-family: var(--font-text);
}
.career-item-tags {
    font-size: var(--text-base);
    line-height: 1.4;
    color: var(--color-gray);
    padding-bottom: 0;
}
.career-item-desc {
    flex: 1 1 0;
    min-width: 0;
    color: var(--color-gray);
}
.career-item-desc p:last-child {
    padding-bottom: 0;
}
.career-item-cta {
    flex-shrink: 0;
}
.career-item-cta .is-outline:not(:hover) {
    border-color: #586874;
    background: #2c3a44;
}
.whr-description{
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.whr-description > *{
    padding: 0;
    margin: 0;
}
/* ================================
   Career Section Style - END
================================ */

/* ================================
   Product Section Style - START
================================ */
.product-section {
    padding: 104px 0;
    position: relative;
    overflow: hidden;
}
.product-section .banner-bg-img {
    max-height: 900px;
    user-select: none;
}
.product-section .container {
    position: relative;
    z-index: 1;
}
.product-section .title-wrap {
    text-align: center;
    padding-bottom: var(--size-44);
}
.product-section .title-wrap :is(h2, h3, h4, h5) {
    color: var(--color-primary);
}
.product-list-wrap {
    padding: 0 36px;
}
.product-info-popups {
    display: none;
}
.product-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 34px;
    margin: 0 -17px;
}
.product-list .product-list-item {
    width: 33.33%;
    padding: 0 17px;
}
.product-item {
    position: relative;
    overflow: hidden;
    height: 100%;
    background: #1b2730;
    border-radius: 3px 7px 7px 7px;
    border: 1px solid #3f4c5d;
    padding: var(--size-16);
    display: flex;
    flex-direction: column;
    gap: var(--size-16);
    transition: var(--transition);
    cursor: pointer;
}
.product-item .product-item-img {
    position: relative;
    aspect-ratio: 1 / 1.119;
    background: var(--color-night-rig);
    border: 1px solid #535b64;
    border-radius: 10px;
    overflow: hidden;
    transition: var(--transition);
}
.product-item .product-item-info {
    display: flex;
    gap: var(--size-24);
    padding-bottom: var(--size-6);
}
.product-item .product-item-title {
    width: 100%;
    transition: var(--transition);
    padding-left: var(--size-6);
    padding-bottom: 0;
    font-family: var(--font-text);
    font-size: var(--text-md);
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--color-gray);
    position: relative;
    min-height: 46px;
}
.product-item .product-item-title:before {
    content: '';
    position: absolute;
    left: -46px;
    top: -8px;
    width: 28px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='59' viewBox='0 0 26 59' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-25.9118 -10.1861L-26.1874 -10.4522L-26.1874 -23L21.7119 19.6909C23.9639 21.6966 25.2561 24.5674 25.2656 27.5903L25.2656 32.4763C25.2656 35.4991 23.9829 38.3889 21.7404 40.3947C7.28796 53.3132 -14.5095 72.6671 -24.6861 81.6787L-26.1779 83L-26.1779 70.0625L-25.8833 69.7963C-21.2369 65.6328 6.79386 40.6323 15.2791 33.0752C16.1533 32.2957 16.6474 31.1835 16.6474 30.0143C16.6474 28.845 16.1438 27.7233 15.2696 26.9534L-3.78179 10.0044L-25.9118 -10.1671L-25.9118 -10.1861Z' fill='%238AC75A'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: contain;
    transition: var(--transition);
}
.product-item .product-item-action {
    flex-shrink: 0;
}
.product-item .btn-icon {
    background: var(--color-control-slate);
    color: var(--color-gray);
}

.product-item:hover {
    background: var(--color-gray);
}
.product-item:hover .product-item-img {
    background: rgba(255, 255, 255, 0.57);
    border-color: #d8dee2;
}
.product-item:hover .product-item-title {
    padding-left: var(--size-20);
    color: var(--color-iron-core);
    font-weight: var(--font-weight-semibold);
}
.product-item:hover .product-item-title:before {
    left: -16px;
}
.product-item:hover .btn-icon {
    background: var(--color-primary);
    color: var(--color-iron-core);
}

.product-info-popup .team-bio-text {
    padding-bottom: var(--size-44);
}
.product-info-popup .wellhead-key-features + .wellhead-key-features {
    padding-top: var(--size-44);
}
.product-info-popup .wellhead-key-features ul li {
    font-weight: var(--font-weight-normal);
    color: var(--color-black);
}
.product-info-popup .wellhead-key-features ul li:before {
    top: 16px;
}
.product-info-popup .team-bio-photo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--size-44);
    width: 484px;
}
.product-info-action {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-16);
}
.product-info-action.is-mobile {
    display: none;
}
/* ================================
   Product Section Style - END
================================ */

/* ================================
   Services Page Section Style - START
================================ */
.services-page-section {
    padding: var(--size-80) 0;
    position: relative;
    overflow: hidden;
}
.services-page-shape {
    position: absolute;
    left: 0;
    top: 327px;
}
.services-page-section .container {
    position: relative;
    z-index: 1;
}
.services-page-section .title-wrap {
    text-align: center;
    color: var(--color-primary);
    padding-bottom: var(--size-24);
}
.services-page-section .title-wrap .title-icon {
    padding-bottom: var(--size-16);
}
.services-page-section .title-wrap .title-icon svg {
    margin: 0 auto;
}
.services-page-section .wellhead-content-block {
    gap: 30px;
}
.services-page-section .wellhead-content-block .btn-group {
    justify-content: flex-start;
}
/* ================================
   Services Page Section Style - END
================================ */

/* ================================
   Resouces Section Style - Start
================================ */
.resouces-section {
    padding: 32px 0 64px;
    position: relative;
    z-index: 12;
}
.resouces-section .title-wrap {
    text-align: center;
    color: var(--color-primary);
    padding-bottom: 26px;
}
.resouces-section .title-wrap .title-icon svg {
    margin: 0 auto;
}
.resouces-section .title-wrap .title-icon {
    padding-bottom: var(--size-16);
}
.resouces-nav {
    padding-bottom: 34px;
}
.resouces-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
.resouces-nav ul li a {
    padding: 10px 24px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 22px;
    font-weight: 600;
    font-size: 16px;
    line-height: 23px;
    display: flex;
    align-items: center;
    letter-spacing: 0.01em;
    text-transform: capitalize;
    color: #637183;
    transition: var(--transition);
}
.resouces-nav ul li.active a,
.resouces-nav ul li:hover a {
    background: #8AC75A;
    border-color: #C7FF9A;
    color: #313841;
}
.resouces-list-items {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -6px;
    row-gap: 16px;
}
.resouces-list-item {
    width: 33.33%;
    padding: 0 6px;
}
.resouces-item {
    width: 100%;
    background: #2C3A44;
    border-radius: 6px;
    overflow: hidden;
}
.resouces-media {
    position: relative;
    aspect-ratio: 1 / 0.544;
    overflow: hidden;
    display: block;
}
.resouces-media img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: var(--transition);
}
.resouces-desc {
    padding: 22px 24px;
}
.resouces-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 12px;
}
.resouces-tags .tag {
    background: #C7FF9A;
    border-radius: 16px;
    padding: 5px 11px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.01em;
    text-transform: capitalize;
    color: #202C35;
    text-align: center;
    transition: var(--transition);
}
.resouces-desc h3 {
    font-family: var(--font-text);
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    display: flex;
    align-items: center;
    text-transform: capitalize;
    color: #FFFFFF;
    padding: 0;
    margin: 0;
    transition: var(--transition);
}
.resouces-item:hover .resouces-media img {
    scale: 1.1;
}
.resouces-item:hover .resouces-desc h3 {
    color: #6AA63A;
}
.resouces .btn-wrap {
    text-align: center;
    padding-top: 34px;
}
.resouces .btn-wrap .btn {
    color: #CBCBCB;
}
.resouces .btn-wrap .btn:hover {
    color: #C7FF9A;
}
/* ================================
   Resouces Section Style - END
================================ */
/* ================================
   innovation Section Style - Start
================================ */
.innovation-section {
    background: var(--color-gray);
    color: var(--color-iron-core);
    padding: var(--size-64) 0;
}
.innovation-section-title-wrap {
    display: flex;
    gap: var(--size-16);
    padding-bottom: var(--size-24);
    border-bottom: 1px solid rgba(108, 125, 146, 0.24);
}
.innovation-section-title-wrap .services-section-title {
    padding: 0;
    font-size: var(--size-16);
    color: var(--color-control-slate);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.innovation-section .container > .title-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-44);
    padding-bottom: var(--size-24);
    padding-top: 34px;
    border-bottom: 1px solid rgba(108, 125, 146, 0.24);
}
.innovation-section .container > .title-wrap :is(.h6) {
    font-weight: var(--font-weight-semibold);
}
.innovation-section .container > .title-wrap .title-text {
    padding-top: 0;
}
.our-platform-tab {
    padding-top: 34px;
}
.our-platform-tab .title-wrap {
    padding-bottom: 16px;
}
.our-platform-tab .services-tabs {
    padding-top: 0;
    flex-direction: column;
    gap: 44px;
}
.our-platform-tab .title-wrap .h6 {
    font-weight: var(--font-weight-semibold);
}
.our-platform-tab .services-tabs .tab-nav-wrap {
    width: 100%;
    flex-shrink: 1;
}
.our-platform-tab .tab-nav {
    display: flex;
    flex-wrap: wrap;
}
.our-platform-tab .services-tabs .tab-nav-item {
    width: auto;
    padding: 12px 31px;
    font-weight: 600 !important;
}
.our-platform-tab .innovation-info {
    display: flex;
    gap: 48px;
}
.our-platform-tab .innovation-info .services-desc {
    width: 100%;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    color: #313841;
}
.our-platform-tab .innovation-info .services-img {
    width: 502px;
    flex-shrink: 0;
    aspect-ratio: inherit;
    border-radius: 8px;
    overflow: hidden;
    
}
.our-platform-tab .innovation-info .services-img img {
    width: 100%;
    height: auto;
    object-fit: inherit;
    position: relative;
}
.our-platform-tab .innovation-info .services-desc .desc-box {
    width: 100%;
    max-width: 445px;
}
.our-platform-tab .innovation-info .services-desc h3 {
    font-family: var(--font-text);
    font-weight: 600;
    font-size: 24px;
    line-height: 31px;
    color: #313841;
    padding-bottom: 12px;
}
.our-platform-tab .innovation-info .services-desc ul {
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 70px;
    grid-row-gap: 16px;
    list-style: none;
}
.our-platform-tab .innovation-info .services-desc ul li {
    padding-left: 12px;
    position: relative;
    font-weight: 700;
}
.our-platform-tab .innovation-info .services-desc ul li:before {
    content: "";
    width: 7px;
    height: 7px;
    background: #8AC75A;
    border-radius: 100%;
    position: absolute;
    top: 7px;
    left: 0;
}
.our-platform-tab .services-tabs .tab-nav-cta {
    padding-top: 24px;
}
.our-platform-tab .services-tabs .tab-nav-item.active {
    background: #CBCBCB;
}
/* ================================
   innovation Section Style - END
================================ */
.banner-section.resource .banner-content {
    max-width: 100%;
}