:root {
    --color-gold: #cea85e;
    --color-black: #0f0f0f;
    --color-blue: #003858;
    --color-grey: #c4c4c4;
    --color-white: #ffffff;
    --color-bg-dark: #141414;
    --color-border: rgba(255, 255, 255, 0.1);
}

* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Base Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navbar Transparent Pill */
.navbar-wrapper {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    z-index: 50;
    display: flex;
    justify-content: center;
}

.navbar-pill {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 10px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 1200px;
    box-sizing: border-box;
}

.navbar-pill .logo img {
    height: 35px;
    vertical-align: middle;
}

/* Sidebar Overlay */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Desktop Nav Container styling */
.nav-sidebar {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: space-between;
    margin-left: 40px;
}

.sidebar-header {
    display: none; /* Only visible on mobile */
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}

.sidebar-logo {
    height: 35px;
}

.close-btn {
    font-size: 2.2rem;
    color: var(--color-white);
    cursor: pointer;
    line-height: 1;
}

.menu-toggle {
    display: none;
    font-size: 1.8rem;
    color: var(--color-white);
    cursor: pointer;
    z-index: 105; /* Must sit above everything else */
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    color: var(--color-white);
    font-size: 0.9rem;
    text-decoration: none;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--color-gold);
    opacity: 1;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Language Selector */
.lang-selector {
    color: var(--color-white);
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    cursor: pointer;
}

.lang-selector-dropdown .lang-menu {
    border-radius: 8px;
    padding: 8px 0;
}
.lang-selector-dropdown .lang-menu a {
    white-space: nowrap;
    font-size: 16px !important;
}

.lang-selector i {
    font-size: 1.1rem;
}

.btn-signin {
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 8px 25px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-signin:hover {
    background-color: var(--color-gold);
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.video-background iframe {
    width: 100%;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right,
        rgba(0, 56, 88, 0.8),
        rgba(15, 15, 15, 0.5)
    );
    z-index: 10;
}

.hero-content {
    position: relative;
    z-index: 15;
    padding-left: 10%;
    max-width: 50%;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-content p {
    font-size: 1.05rem;
    color: var(--color-grey);
    margin-bottom: 30px;
    line-height: 1.6;
    max-width: 460px;
}

/* Widget on Hero */
.hero-widget-container {
    position: absolute;
    right: 10%;
    bottom: 15%;
    z-index: 15;
    max-width: 500px;
    width: 100%;
}

.hero-widget {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 52px 64px 58px;
    min-height: 360px;
    box-sizing: border-box;
    border-radius: 44px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 760' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82 0H718C812 0 872 62 872 154C872 226 918 274 982 288C994 291 1000 300 1000 316V646C1000 710 950 760 886 760H568C525 760 492 748 456 725L420 702C389 682 357 674 320 674H82C36 674 0 638 0 592V82C0 36 36 0 82 0Z' fill='black'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 760' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82 0H718C812 0 872 62 872 154C872 226 918 274 982 288C994 291 1000 300 1000 316V646C1000 710 950 760 886 760H568C525 760 492 748 456 725L420 702C389 682 357 674 320 674H82C36 674 0 638 0 592V82C0 36 36 0 82 0Z' fill='black'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
}

.hero-widget-container .widget-icon {
    position: absolute;
    top: 10px;
    right: 2px;
    width: 64px;
    height: 64px;
    background: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 20;
}

.hero-widget h3 {
    font-size: 2.1rem;
    margin-bottom: 18px;
    margin-top: 0;
    line-height: 1.22;
    max-width: 78%;
}

.hero-widget p {
    color: var(--color-grey);
    font-size: 0.9rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

.btn-gold {
    background-color: var(--color-gold);
    color: var(--color-white);
    border: none;
    padding: 10px 30px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    transition:
        transform 0.2s,
        background-color 0.2s;
}

.btn-gold:hover {
    transform: translateY(-2px);
    background-color: #dab773;
}

/* Section 1: Helping Industry */
.industries-section {
    padding: 100px 0;
    text-align: center;
    background-color: var(--color-black);
}

.industries-section h2 {
    font-size: 2.5rem;
    margin-bottom: 80px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.industries-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    text-align: left;
}

.industries-text {
    flex: 1;
}

.industries-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--color-grey);
    margin-bottom: 30px;
}

.stat-box {
    margin-top: 40px;
}

.stat-box h3 {
    font-size: 3.5rem;
    color: var(--color-gold);
    margin: 0;
}

.stat-box p {
    font-size: 0.9rem;
    color: var(--color-gold);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.industries-image {
    flex: 1;
}

.industries-image img {
    width: 100%;
    border-radius: 20px;
    max-width: 400px;
    object-fit: cover;
}

.partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-top: 80px;
    opacity: 0.6;
    flex-wrap: wrap;
}

.partner-logos img {
    height: 30px;
    /* filter: grayscale(100%) invert(100%) brightness(200%); */
}

/* Section 2: Services Header */
.services-header {
    text-align: center;
    padding: 100px 0 50px;
    background-color: var(--color-black);
}

.services-header h2 {
    font-size: 2.5rem;
    margin-bottom: 80px !important;
    /* max-width: 600px; */
    margin: 0 auto;
}

/* Section 2: Services Grid */
.services-section {
    padding: 0 0 100px;
    background-color: var(--color-black);
}

.services-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.service-card-wrapper {
    position: relative;
    flex: 1;
    max-width: 560px;
}

.service-card {
    background: var(--color-white);
    color: var(--color-black);
    border-radius: 48px;
    padding: 88px 64px 86px;
    text-align: left;
    height: 100%;
    min-height: 520px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 780' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82 0H918C964 0 1000 36 1000 82V515C1000 570 955 615 900 615H882C824 615 782 657 782 715V718C782 754 754 780 718 780H82C36 780 0 744 0 698V82C0 36 36 0 82 0Z' fill='black'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 780' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82 0H918C964 0 1000 36 1000 82V515C1000 570 955 615 900 615H882C824 615 782 657 782 715V718C782 754 754 780 718 780H82C36 780 0 744 0 698V82C0 36 36 0 82 0Z' fill='black'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
}

.service-icon {
    width: 50px;
    height: 50px;
    background: var(--color-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    color: var(--color-white);
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.service-card p.desc {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    /* flex-grow: 1; */
}

.btn-black {
    background: var(--color-black);
    color: var(--color-white);
    padding: 12px 25px;
    border-radius: 25px;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: bold;
    border: none;
    cursor: pointer;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-black svg {
    color: var(--color-gold);
}

.service-card-arrow {
    position: absolute;
    bottom: 48px;
    right: 6px;
    width: 68px;
    height: 68px;
    background: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    color: var(--color-gold);
}

.service-card-blue {
    background-color: #7bb2c3;
    background-size: cover;
    background-position: center;
    color: var(--color-white);
    padding: 40px;
    border-radius: 30px;
    flex: 1;
    max-width: 500px;
    text-align: left;
    position: relative;
    overflow: hidden;
    min-height: 450px;
}

.service-card-blue p.tag {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    color: #fff;
}

.service-card-blue h3 {
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 20px;
    max-width: 400px;
    font-weight: 500;
}

/* Section 3: Careers */
.careers-wrapper {
    padding: 0 20px;
    margin-bottom: 100px;
}

.careers-image-container {
    position: relative;
    max-width: 520px;
    width: 100%;
    flex: 1;
}

.careers-section {
    background-color: var(--color-blue);
    border-radius: 40px;
    padding: 60px 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

.careers-content {
    flex: 1;
    padding-right: 50px;
}

.careers-content p.tag {
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
    text-transform: uppercase;
}

.careers-content h2 {
    font-size: 3rem;
    margin-bottom: 40px;
    line-height: 1.2;
}

.btn-dark {
    background: var(--color-black);
    color: var(--color-gold);
    padding: 12px 30px;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-bottom: 40px;
    border: none;
    display: inline-block;
    text-transform: uppercase;
}

.careers-content p.desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 400px;
    margin: 0;
}

.careers-image {
    flex: 1;
    position: relative;
    max-width: 520px;
    height: 520px;
    border-radius: 44px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M222 0H918C964 0 1000 36 1000 82V918C1000 964 964 1000 918 1000H82C36 1000 0 964 0 918V224C0 205 13 192 32 192H70C142 192 192 142 192 70V32C192 13 205 0 222 0Z' fill='black'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M222 0H918C964 0 1000 36 1000 82V918C1000 964 964 1000 918 1000H82C36 1000 0 964 0 918V224C0 205 13 192 32 192H70C142 192 192 142 192 70V32C192 13 205 0 222 0Z' fill='black'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
    overflow: hidden;
}

.careers-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.careers-arrow {
    position: absolute;
    top: 0px;
    left: -2px;
    width: 72px;
    height: 72px;
    background: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 20;
}

.careers-arrow svg {
    transform: rotate(-90deg);
}

.about-feature-image-container {
    position: relative;
    width: 100%;
    max-width: 460px;
}

.about-feature-image {
    position: relative;
    width: 100%;
    height: 460px;
    border-radius: 44px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M222 0H918C964 0 1000 36 1000 82V918C1000 964 964 1000 918 1000H82C36 1000 0 964 0 918V224C0 205 13 192 32 192H70C142 192 192 142 192 70V32C192 13 205 0 222 0Z' fill='black'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M222 0H918C964 0 1000 36 1000 82V918C1000 964 964 1000 918 1000H82C36 1000 0 964 0 918V224C0 205 13 192 32 192H70C142 192 192 142 192 70V32C192 13 205 0 222 0Z' fill='black'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
    overflow: hidden;
}

.about-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-feature-arrow {
    position: absolute;
    top: 0px;
    left: -2px;
    width: 72px;
    height: 72px;
    background: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 20;
}

.about-feature-arrow svg {
    transform: rotate(-90deg);
}

.about-hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* News Section */
.news-section-wrapper {
    background-color: var(--color-black);
    padding-bottom: 100px;
}

.news-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.news-section h2.section-label {
    font-size: 0.9rem;
    color: var(--color-grey);
    margin-bottom: 30px;
    text-transform: uppercase;
}

.news-grid {
    display: flex;
    gap: 40px;
    overflow: hidden;
}

.news-slider {
    display: flex;
    gap: 40px;
    transition: transform 0.4s ease-in-out;
    width: 100%;
}

.news-card {
    min-width: calc(50% - 20px);
    flex: 0 0 calc(50% - 20px);
    border-top: 1px solid var(--color-border);
    padding-top: 20px;
}

.news-card .date {
    color: var(--color-gold);
    font-size: 0.85rem;
    margin-bottom: 15px;
}

.news-card h3 {
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 500;
}

.news-controls {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 50px;
}

.news-controls button {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.news-controls button:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Footer */
.footer {
    padding: 100px 20px 60px;
    background-color: #111111;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.footer-top,
.footer-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    gap: 40px;
}

.footer-logo img {
    height: 120px;
}

.footer-links h4 {
    font-size: 1.8rem;
    margin-bottom: 25px;
    margin-top: 0;
    font-weight: 500;
}

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

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--color-grey);
    font-size: 0.95rem;
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--color-white);
}

.footer-title h2 {
    font-size: 2.5rem;
    color: var(--color-gold);
    max-width: 550px;
    text-align: right;
    line-height: 1.5;
    margin: 0;
    margin-left: auto;
}

.footer-desc {
    color: var(--color-grey);
    font-size: 0.85rem;
    line-height: 1.8;
}

.social-icons-wrapper {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    height: 100%;
}

.social-icons-wrapper a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    transition: 0.3s;
    font-size: 1rem;
}

.social-icons-wrapper a:hover {
    background: var(--color-white);
    color: var(--color-black);
}

.copyright {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    text-align: right;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;
}

/* RESPONSIVE DESIGN */

/* Tablet Adjustments */
@media (max-width: 1024px) {
    .navbar-wrapper {
        top: 0;
    }

    .navbar-pill {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        padding: 15px 5%;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .hero-widget-container {
        max-width: 460px;
    }

    .industries-grid {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .industries-image {
        order: -1;
    }

    .industries-image img {
        max-width: 100%;
        height: auto;
    }

    .services-grid {
        flex-direction: column;
        align-items: center;
    }

    .service-card-wrapper,
    .service-card-blue {
        max-width: 100%;
        width: 100%;
    }

    .careers-section {
        flex-direction: column;
        padding: 40px;
    }

    .careers-content {
        padding-right: 0;
        margin-bottom: 40px;
        text-align: center;
    }

    .careers-content p.desc {
        margin: 0 auto;
    }

    .careers-image-container {
        max-width: 100%;
    }

    .footer-top,
    .footer-bottom {
        grid-template-columns: 1fr 1fr;
    }

    .footer-title h2 {
        text-align: left;
        margin-left: 0;
    }
}

/* Mobile Adjustments */
@media (max-width: 1024px) {
    .navbar-pill {
        padding: 10px 20px;
        flex-wrap: wrap;
    }

    .menu-toggle {
        display: block;
    }

    /* Mobile Sidebar Styling */
    .nav-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        background-color: var(--color-black);
        flex-direction: column;
        align-items: center; /* Centered menu items for full screen */
        justify-content: flex-start;
        margin: 0;
        padding: 0;
        z-index: 100;
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        box-shadow: none; /* No shadow needed if full screen */
    }

    .nav-sidebar.active {
        left: 0;
    }

    .sidebar-header {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        padding: 25px 20px; /* Adjust padding for full screen */
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        width: 90%;
        text-align: center;
        padding: 30px 0;
        gap: 30px;
        font-size: 1.5rem;
        overflow: visible;
    }

    .nav-links a {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 15px;
        width: 100%;
    }

    .nav-right {
        margin-top: auto;
        margin-bottom: 50px;
        width: 80%;
        padding: 0;
        flex-direction: column;
        align-items: center; /* Centered */
        font-size: 1.2rem;
        gap: 25px;
        box-sizing: border-box;
    }

    .btn-signin {
        width: 100%;
        text-align: center;
    }

    .hero-content {
        padding-left: 5%;
        max-width: 90%;
        text-align: center;
        margin-top: 0;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

    .hero-widget-container {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 40px auto 0;
        width: 90%;
    }

    .hero-section {
        flex-direction: column;
        justify-content: center;
        height: auto;
        min-height: 100vh;
        padding: 120px 0 60px;
    }

    .hero-widget {
        padding: 40px 32px 48px 32px;
        min-height: auto;
        border-radius: 32px;
        -webkit-mask: none;
        mask: none;
    }

    .hero-widget h3 {
        font-size: 1.65rem;
        max-width: 100%;
    }

    .hero-widget p {
        max-width: 100%;
    }

    .hero-widget-container .widget-icon {
        width: 54px;
        height: 54px;
        top: 16px;
        right: 16px;
    }

    .industries-section h2 {
        font-size: 1.8rem;
    }

    .stat-box h3 {
        font-size: 2.5rem;
    }

    .partner-logos {
        gap: 30px;
    }

    .partner-logos img {
        height: 25px;
    }

    .services-header h2 {
        font-size: 1.8rem;
    }

    .service-card {
        padding: 30px;
        min-height: auto;
    }

    .service-card h3 {
        font-size: 1.3rem;
    }

    .careers-content h2 {
        font-size: 2rem;
    }

    .news-slider {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 20px;
        width: 100%;
        max-width: 100vw;
        /* Optional: Add snap scrolling for better UX */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .news-card {
        min-width: calc(100% - 40px);
        scroll-snap-align: start;
    }

    .news-grid {
        flex-direction: column;
        max-width: 100vw;
    }

    .footer-top,
    .footer-bottom {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-col-3.footer-title h2 {
        font-size: 2.5rem;
    }

    .social-icons-wrapper,
    .copyright {
        justify-content: flex-start;
    }
}

/* === Nav Dropdown === */
.nav-dropdown {
    position: relative;
    display: inline-block;
}
.nav-dropdown-toggle {
    color: var(--color-white);
    font-size: 0.9rem;
    text-decoration: none;
    opacity: 0.8;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown.active .nav-dropdown-toggle {
    color: var(--color-gold);
    opacity: 1;
}
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background: rgba(20, 20, 20, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    z-index: 200;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(2px);
}
.nav-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 12px;
}
.nav-links .nav-dropdown-menu a {
    display: block;
    padding: 10px 22px;
    color: var(--color-white);
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0.85;
    white-space: nowrap;
    font-size: 16px !important;
    transition: all 0.2s ease;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
    color: var(--color-gold);
    background: rgba(255, 255, 255, 0.04);
    opacity: 1;
}

/* === Navbar Fix against White Header === */
.navbar-pill {
    background-color: rgba(20, 20, 20, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.lang-selector {
    color: var(--color-white);
    opacity: 0.8;
}

/* === Consolidated Mobile Nav Dropdown (≤ 900px) === */
@media (max-width: 1024px) {
    .nav-dropdown-menu {
        position: static !important;
        transform: none !important;
        opacity: 1;
        visibility: visible;
        background: transparent;
        border: none;
        box-shadow: none;
        min-width: 0;
    }

    .nav-dropdown {
        width: 100%;
        text-align: center;
        position: relative;
    }

    .nav-dropdown-toggle {
        justify-content: center;
        width: 100%;
    }

    .nav-links .nav-dropdown {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 15px;
        overflow: visible;
    }

    .nav-links .nav-dropdown > a.nav-dropdown-toggle {
        border-bottom: none;
        padding-bottom: 0;
        width: auto;
    }

    /* Hidden by default, toggled via JS on tap */
    .nav-links .nav-dropdown-menu {
        padding: 15px 0 0 0;
        min-width: 100%;
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        overflow: visible;
    }

    .nav-links .nav-dropdown-menu a {
        border-bottom: none !important;
        padding: 8px 20px !important;
        font-size: 1.1rem;
        opacity: 0.6;
        width: auto;
        text-align: center;
        white-space: nowrap;
        font-size: 16px !important;
        overflow: visible;
    }

    /* Hide Language Menu by Default on Mobile */
    .lang-selector-dropdown .lang-menu {
        display: none !important;
        position: static !important;
        margin-top: 10px;
        background: rgba(30, 30, 30, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 10px;
    }

    .lang-selector-dropdown.active .lang-menu {
        display: flex !important;
        flex-direction: column;
    }
    .lang-selector-dropdown .lang-menu a {
        border-bottom: none !important;
        padding: 8px 16px !important;
        text-align: center;
    }
}

/* Fix lang dropdown positioning */
.lang-selector-dropdown .nav-dropdown-menu {
    left: auto;
    right: 0;
    transform: translateY(8px);
}
.lang-selector-dropdown:hover .nav-dropdown-menu,
.lang-selector-dropdown:focus-within .nav-dropdown-menu {
    transform: translateY(2px);
}

/* Fix mobile menu icon overlap */
@media (max-width: 1024px) {
    .nav-sidebar .sidebar-header {
        position: relative;
    }
    .menu-toggle {
        z-index: 1001; /* Ensure it doesn't overlap weirdly when open, or hide it if nav is open */
    }
}

/* Ensure hamburger icon is hidden when sidebar is active to prevent overlap */
body.sidebar-open .menu-toggle {
    display: none;
}

/* Fix Lang Dropdown Box alignment and width */
.lang-selector-dropdown .lang-menu.nav-dropdown-menu {
    left: auto !important;
    right: 0 !important;
    transform: translateY(8px) !important;
    min-width: 140px !important;
    padding: 8px 0 !important;
}
.lang-selector-dropdown:hover .lang-menu.nav-dropdown-menu,
.lang-selector-dropdown:focus-within .lang-menu.nav-dropdown-menu {
    transform: translateY(2px) !important;
}

/* Ensure mobile menu doesn't push lang dropdown off screen */
@media (max-width: 1024px) {
    .lang-selector-dropdown .lang-menu.nav-dropdown-menu {
        position: static !important;
        transform: none !important;
        min-width: 100% !important;
        text-align: center !important;
    }
}

/* Final responsive shape tuning for the white service card */
@media (max-width: 1024px) {
    body {
        overflow-x: hidden;
    }

    .services-section .container {
        box-sizing: border-box;
        max-width: 100%;
        overflow: hidden;
    }

    .service-card-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 auto;
        box-sizing: border-box;
        --cutout-w: clamp(120px, 35vw, 180px);
        --cutout-h: calc(var(--cutout-w) * (265 / 282));
    }

    .service-card {
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: auto !important;
        padding: 40px !important;
        padding-bottom: calc(var(--cutout-h) + 20px) !important;
        border-radius: 46px !important;

        -webkit-mask:
            linear-gradient(#000, #000) top left / 100%
                calc(100% - var(--cutout-h) + 2px) no-repeat,
            linear-gradient(#000, #000) bottom left /
                calc(100% - var(--cutout-w) + 2px) var(--cutout-h) no-repeat,
            url("data:image/svg+xml,%3Csvg viewBox='0 0 282 265' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L282 0 C282 55 237 100 182 100 L164 100 C106 100 64 142 64 200 L64 203 C64 239 36 265 0 265 Z' fill='black'/%3E%3C/svg%3E")
                bottom right / var(--cutout-w) var(--cutout-h) no-repeat !important;
        mask:
            linear-gradient(#000, #000) top left / 100%
                calc(100% - var(--cutout-h) + 2px) no-repeat,
            linear-gradient(#000, #000) bottom left /
                calc(100% - var(--cutout-w) + 2px) var(--cutout-h) no-repeat,
            url("data:image/svg+xml,%3Csvg viewBox='0 0 282 265' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L282 0 C282 55 237 100 182 100 L164 100 C106 100 64 142 64 200 L64 203 C64 239 36 265 0 265 Z' fill='black'/%3E%3C/svg%3E")
                bottom right / var(--cutout-w) var(--cutout-h) no-repeat !important;
    }

    .service-icon {
        width: clamp(52px, 14vw, 58px);
        height: clamp(52px, 14vw, 58px);
        margin-top: 0;
        margin-bottom: 4px;
        flex-shrink: 0;
    }

    .service-card h3 {
        font-size: clamp(1.85rem, 4.2vw, 2rem);
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .service-card p.desc {
        font-size: clamp(1rem, 2.8vw, 1.05rem);
        line-height: 1.55;
        margin-bottom: 22px;
    }

    .service-card .btn-black {
        margin-top: 15px;
    }

    .service-card-arrow {
        --arrow-size: clamp(48px, 14vw, 70px);
        width: var(--arrow-size) !important;
        height: var(--arrow-size) !important;
        aspect-ratio: auto !important;

        right: calc((var(--cutout-w) - var(--arrow-size)) / 2) !important;
        bottom: calc((var(--cutout-h) - var(--arrow-size)) / 2) !important;
        transform: none;
    }

    .careers-image-container {
        width: min(92vw, 460px);
        max-width: min(92vw, 460px);
        margin: 0 auto;
    }

    .careers-image {
        width: 100%;
        height: min(92vw, 460px);
    }

    .careers-arrow {
        width: 62px;
        height: 62px;
        top: -14px;
        left: 16px;
    }

    .about-feature-image-container {
        width: min(92vw, 460px);
        max-width: min(92vw, 460px);
        margin: 0 auto;
    }

    .about-feature-image {
        height: min(92vw, 460px);
    }

    .about-feature-arrow {
        width: 62px;
        height: 62px;
        top: 0px;
        left: 0px;
    }
}

/* ================================================================
   REUSABLE LAYOUT CLASSES  (used across all company-profile pages)
   ================================================================ */

/* --- Flex row (stacks on mobile) --- */
.cp-flex-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    gap: 60px;
    text-align: left;
}
.cp-flex-col {
    flex: 1;
}

/* --- Highlight box (blue / dark card with 2-col) --- */
.cp-highlight-box {
    background-color: var(--color-blue);
    border-radius: 40px;
    padding: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}
.cp-hl-text {
    flex: 1;
    padding-right: 20px;
}
.cp-hl-img {
    flex: 1;
}

/* --- Card row (3 cards side by side) --- */
.cp-card-row {
    display: flex;
    gap: 30px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Growth card --- */
.cp-growth-card {
    flex: 1;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    height: 300px;
    background-size: cover;
    background-position: center;
    text-align: left;
    padding: 40px;
}
.cp-growth-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.4) 0%,
        transparent 100%
    );
}
.cp-growth-tag {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #fff;
}
.cp-growth-title {
    font-size: 1.4rem;
    font-weight: 500;
    color: #fff;
}

/* --- 2-column grid (hero, quadrants, capabilities) --- */
.cp-grid-2col {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
}
.cp-grid-2 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

/* --- Page hero --- */
.cp-page-hero {
    padding: 140px 60px 60px;
    background-color: var(--color-bg-dark);
}
.cp-page-hero-h1 {
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--color-white);
    margin: 0 0 30px;
}

/* --- Blog featured card --- */
.cp-blog-featured {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 50px;
    background: #1a1a1a;
    border-radius: 30px;
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 50px;
}
.cp-blog-featured-img {
    height: 380px;
}
.cp-blog-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cp-blog-featured-text {
    padding: 50px 40px 50px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Blog grid (3 columns) --- */
.cp-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.cp-blog-card {
    background: #1a1a1a;
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

/* --- Leader grid (3 columns) --- */
.cp-leader-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 40px;
}
.cp-leader-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.cp-leader-img {
    flex: 0 0 130px;
    height: 160px;
    border-radius: 16px;
    overflow: hidden;
    background: #222;
}

/* --- Form grid (2 columns) --- */
.cp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 22px;
}

/* --- Detail content box --- */
.cp-detail-box {
    padding: 70px;
}

/* ================================================================
   RESPONSIVE OVERRIDES  –  All new components
   ================================================================ */

/* ---------- Tablet (≤ 1024px) ---------- */
@media (max-width: 1024px) {
    .cp-grid-2col {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }
    .cp-page-hero {
        padding: 140px 20px 60px;
    }
    .cp-page-hero-h1 {
        font-size: 2.4rem;
    }
    .cp-highlight-box {
        flex-direction: column;
        padding: 50px;
    }
    .cp-hl-text {
        padding-right: 0;
    }
    .cp-hl-img img {
        height: 350px !important;
    }
    .cp-blog-featured {
        grid-template-columns: 1fr;
    }
    .cp-blog-featured-img {
        height: 260px;
    }
    .cp-blog-featured-text {
        padding: 30px;
    }
}

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 1024px) {
    /* Flex rows → column */
    .cp-flex-row {
        flex-direction: column !important;
        gap: 40px;
        text-align: center;
    }

    /* Highlight box */
    .cp-highlight-box {
        padding: 40px 24px;
        border-radius: 28px;
        flex-direction: column;
    }
    .cp-hl-img img {
        height: 280px !important;
        border-radius: 20px !important;
    }

    /* Card row → column */
    .cp-card-row {
        flex-direction: column !important;
    }
    .cp-growth-card {
        height: 320px;
        flex: none !important;
        width: 100%;
    }

    /* 2-col grid → 1-col */
    .cp-grid-2col,
    .cp-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* Page hero */
    .cp-page-hero {
        padding: 120px 20px 40px;
    }
    .cp-page-hero-h1 {
        font-size: 2rem;
    }

    /* Blog */
    .cp-blog-featured {
        grid-template-columns: 1fr;
        border-radius: 22px;
    }
    .cp-blog-featured-img {
        height: 220px;
    }
    .cp-blog-featured-text {
        padding: 24px;
    }
    .cp-blog-featured-text h2 {
        font-size: 1.4rem !important;
    }
    .cp-blog-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* Leader grid → 1 col on small, 2 col on medium */
    .cp-leader-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    .cp-leader-card {
        flex-direction: row;
    }
    .cp-leader-img {
        flex: 0 0 100px;
        height: 120px;
    }

    /* Form grids → 1 col */
    .cp-form-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Detail box */
    .cp-detail-box {
        padding: 30px 20px !important;
        border-radius: 24px !important;
    }

    /* About hero text */
    .about-hero-section .hero-content h1 {
        font-size: 2.5rem !important;
    }

    /* CTA sections */
    .container[style*="border-radius: 40px"] {
        padding: 40px 24px !important;
        border-radius: 24px !important;
    }

    /* Fix inline heading sizes on mobile */
    section h2[style*="font-size: 2.5rem"],
    section h2[style*="font-size: 2.4rem"],
    section h2[style*="font-size: 2.8rem"],
    section h2[style*="font-size: 2.2rem"] {
        font-size: 1.6rem !important;
    }
    section h1[style*="font-size: 3rem"],
    section h1[style*="font-size: 4rem"],
    section h1[style*="font-size: 2.6rem"],
    section h1[style*="font-size: 2.4rem"] {
        font-size: 2rem !important;
    }

    /* Fix inline padding on mobile */
    section[style*="padding: 140px 60px"] {
        padding: 120px 20px 40px !important;
    }
    section[style*="padding: 100px 20px"] {
        padding: 60px 16px !important;
    }

    /* Blog detail hero image */
    section img[style*="height: 460px"] {
        height: 220px !important;
        border-radius: 20px !important;
    }

    /* Contact / Job form container */
    .container[style*="border-radius: 30px"][style*="padding: 50px"] {
        padding: 30px 20px !important;
        border-radius: 22px !important;
    }

    /* News slider: show 1 card at a time on mobile */
    .news-card {
        min-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ---------- Small mobile (≤ 480px) ---------- */
@media (max-width: 480px) {
    .cp-page-hero-h1 {
        font-size: 1.65rem;
    }
    .cp-growth-card {
        height: 260px;
        padding: 28px;
    }
    .cp-growth-title {
        font-size: 1.15rem;
    }
    .cp-leader-img {
        flex: 0 0 80px;
        height: 100px;
    }
    .cp-blog-featured-text h2 {
        font-size: 1.2rem !important;
    }
}

.lang-selector-dropdown .lang-menu a {
    display: block;
    padding: 12px 20px !important;
    text-decoration: none;
    transition: all 0.2s ease;
}
.lang-selector-dropdown .lang-menu a:hover {
    background: rgba(255, 255, 255, 0.08); /* slight highlight background */
    color: var(--color-gold);
}

/* Entry Animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.7s ease-out,
        transform 0.7s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}