/*
Theme Name: BubbleCare
Description: Custom theme for BubbleCare website
Version: 1.0
Author: BubbleCare
*/

@font-face {
    font-family: 'Aptos';
    src: url('/wp-content/uploads/2026/02/Aptos.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Aptos';
    src: url('/wp-content/uploads/2026/02/Aptos-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Aptos';
    src: url('/wp-content/uploads/2026/02/Aptos-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Aptos';
    src: url('/wp-content/uploads/2026/02/Aptos-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Aptos';
    src: url('/wp-content/uploads/2026/02/Aptos-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

body {
    font-family: Aptos, sans-serif !important;
    overflow-x: hidden;
    letter-spacing: 0%;
    margin: 0;
    padding: 0;
    background-color: #F8F8F8;
}

.navbar.scrolled {
    background-color: transparent !important;
}

.header-text-scroll {
	font-weight: bold;
}

.bold-span {
	font-weight: 600 !important;
}

.container {
    max-width: 100%;
	padding:2%;
}

.container.padding {
    padding-top: 6%;
    padding-bottom: 6%;
}

header {
    background: rgba(49, 74, 112, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font-weight: 400;
    position: fixed;
    width: 100vw;
    z-index: 1000;
}

.navbar {
    padding: 0.8% 2.8%;
}

a.nav-link {
    text-transform: uppercase;
}

.navbar-text,
.navbar a.nav-link {
    font-size: 16px;
    line-height: 100%;
    color: #FFFAEE;
    cursor: pointer;
}

#industriesDropdown svg {
    transition: transform .2s ease;
}

#industriesDropdown[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.industriesMenu .nav-item a.nav-link {
    padding-top: 9%;
    padding-left: 2rem;
}

.navbar a {
    color: #FFFAEE;
    font-size: 24px;
    line-height: 120%;
}

.navbar-text:hover, .navbar a.nav-link:hover, .navbar a:hover {
    color: #FFFAEE;
}

.navbar-nav {
    gap: 38px;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
    width: 178%;
}

.dropdown-item {
    padding: 10%;
}

ul.dropdown-menu li a.dropdown-item:focus {
    box-shadow: none;
    background: #FFFFFF;
}

ul.dropdown-menu li:hover a.dropdown-item {
    background: #1D2A3E;
    color: #FFFFFF !important;
}

.dropdown-toggle::after {
    display: none;
}

.navbar-nav .nav-link.active {
    color: #FFFAEE
}

/* Mega menu */
.mega-nav-item {
    position: static;
}

.mega-menu {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease, visibility 0s linear 0.3s;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    background: #FFFFFF;
    padding: 2rem 0;
    border-top: 1px solid #314A70;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 1050;
}

.mega-nav-item:hover .mega-menu {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.15s ease, visibility 0s linear;
}

/* Each sector is now just its title (the company sub-lists were removed), so
   the column centres its single label between its own separators instead of
   flush-left, which left the label visibly off-centre against the divider. */
.mega-col {
    padding: 0 1.5rem;
    border-right: 1px solid #EEF2F7;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mega-col:last-child {
    border-right: none;
}

.mega-industry-title {
    display: block;
    font-weight: 600;
    color: #314A70 !important;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.mega-industry-title:hover {
    color: #1D2A3E !important;
}

.mega-sub-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-sub-links li a {
    color: #607697 !important;
    font-size: 13px;
    line-height: 2;
    text-decoration: none;
    display: block;
}

.mega-sub-links li a:hover {
    color: #314A70 !important;
}

.border-bottom {
    border-bottom: 1px solid #FFFAEE !important;
}

h1 {
    font-size: 84px;
    line-height: 120%;
}

h2 {
    font-size: 48px;
    line-height: 100%;
}

h3 {
    font-size: 64px;
    line-height: 120%;
}

p {
    font-size: 18px;
}

p.cta {
    margin-bottom: 6px;
    text-transform: uppercase;
    color: #FFFFFF;

}

h5 {
    font-size: 24px;
    line-height: 120%;
}

h4 {
    font-size: 36px;
    line-height: 120%;
    letter-spacing: 0%;
}

.blue-text {
    color: #314A70 !important;
}

.white-text {
    color: #FFFFFF !important;
}

.gradient-text {
    color: #314A70;
    /* background: linear-gradient(90deg,
            #5A88CE,
            #1D2A3E,
            #5A88CE);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    animation: shimmer 3s linear infinite; */
}

@keyframes shimmer {
    to {
        background-position: 200% center;
    }
}


.cta-width {
    width: 40%;
}

#about_us .cta-width {
    width: 60%;
}

.card .blue-text {
    height:150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Logo Carousel Styles */
.logo-carousel-container {
    padding: 20px 0;
}

.logo-carousel .logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.logo-carousel .logo-item img {
    max-width: 120px;
    max-height: 80px;
	border-radius: 12px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.logo-carousel .logo-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.cta-width.desktopview {
    display: flex !important;
}

.w-70 {
    width: 72%;
}

.inside-goal small, .inside-goal div {
    font-size: 24px;
}

.laundry-about-us {
    margin-top: 3%;
	flex-direction: column;
}

.laundry-about-us .border-bottom {
    border-bottom: 1px solid #314A70 !important;
}

.shade-bg {
    /* placeholder utility for shaded backgrounds */
    background-repeat: no-repeat;
}

.bg-white {
    background: #FFFFFF;
}

.blue-bg {
    background: #1D2A3E
}

.industries-cards-row {
    padding-left: 2rem;
    padding-right: 2rem;
    gap: 1rem;
}

.industry-cards .card-head {
    width: 100%;
}

.industry-cards {
    background: #F8F8F8;
    position: relative;
    overflow: hidden;
    color: #607697 !important;
    aspect-ratio: 1;
    display: flex;
    cursor: pointer;
}

.industry-cards .card-default {
    padding: 1.5rem;
}

.industry-cards h5 {
    margin-top: 10px;
    margin-bottom: 10px;
    color: #314A70;
}

.cards p {
    font-size: 16px;
    line-height: 100%;
}

/* Overlay that slides up on hover */
.card-overlay {
    background: #314A70;
    color: #FFFFFF;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.industry-cards:hover .card-overlay {
    transform: translateY(0);
}

.overlay-description {
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
    margin-bottom: 0;
}

.overlay-read-more {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Touch: tap to reveal overlay on mobile */
.industry-cards.overlay-active .card-overlay {
    transform: translateY(0);
}

.backimg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.achievement-card:hover {
    border: 1px solid #FFFAEE;
}

.achievement-card.first {
    background-image: url('https://bubbleholding.wpenginepowered.com/wp-content/uploads/2025/09/13.jpg');
    height: 880px;
}

.achievement-card.second {
    background-image: url('https://bubbleholding.wpenginepowered.com/wp-content/uploads/2025/09/10.jpg');
}

.achievement-card.third {
    background-image: url('https://bubbleholding.wpenginepowered.com/wp-content/uploads/2025/09/11.jpg');
}

.extra-padding {
    padding-top: 35%;
    padding-bottom: 10%;
}

.careers-hero {
    position: relative;
    background-image: url(image/careers.jpg);
    height: 90vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.careers-overlay {
    width: 100%;
    height: 100%;
    position: relative;
}

.top-right-box {
    background: #F8F8F8;
    color: #314A70;
    padding: 2%;
    position: absolute;
    align-content: center;
    text-align: center;
    top: 10%;
    right: 8%;
    width: 340px;
    height: 174px;
    opacity: 1;
}

.top-right-box p {
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
}

.top-right-box .d-flex {
    justify-content: center;
}

.bottom-left-content {
    position: absolute;
    bottom: 10%;
    left: 5%;
}


footer ul li a,
footer p {
    font-size: 16px;
    color: #314A70;
    line-height: 100%;
    letter-spacing: 0%;
}

footer .border-bottom {
    border-bottom: 1px solid #314A70 !important;
}

footer ul.list-unstyled {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.social-link {
}

.content.bottom-0 {
    bottom: 7% !important;
}

.employee-card {
	justify-content: center;
}

.underline {
    border-bottom: 1px solid #607697;
    margin-top: 0.5rem;
}

.content-div {
    align-content: center;
}

.content-div-left {
    padding-left: 2%;
    padding-left: 2%;
    align-content: center;
}

.content-div-right {
    padding-left: 2%;
    padding-left: 2%;
    align-content: center;
}

.team-section {
    color: white;
    padding: 7.5% 4.8%;
}

.image-container {
	height:100%;
	width:100%;
    position: absolute;
    top: -100px;
}

.image-container a {
	display:flex;
	height:100%;
	width:100%;
}

.image-container img {
    width: 100%;
    height: 900px;
    display: block;
}

.overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    padding: 5%;
}

.achievement-image {
    position: relative;
	align-items: center;
    justify-content: center;
    display: flex;
}

.our-achievements .row.g-4>.col-md-6.achievement-image:not(:nth-child(1)):not(:nth-child(2)) {
    margin-top: -40px;
}

.cursor-pointer {
    cursor: pointer;
}

.carousel-inner {
    display: flex;
    gap: 5px;
}


.bg-cover {
    width: 100%;
    height: 100%;
    min-height: 300px; /* adjust based on your design */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px; /* optional */
}


.carousel-item {
    display: flex;
    gap: 5px;
}

.carousel-inner .card {
    border: none;
    text-align: center;
    flex: 0 0 calc(25% - 15px);
}

.button-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20px;
}

.arrow-btn {
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    cursor: pointer;
    background-color: transparent;
}

.card-img-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#leaders .card {
    height: 100%;
}

#leaders .card-img-top,
#leaders .card img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    object-position: top;
}

.pe-6 {
    padding-right: 10%;
}

.ps-6 {
    padding-left: 6%;
}

.blue-cta {
    color: #314A70 !important;
    border-bottom: 1px solid #314A70 !important;
}

.job-item {
    border-top: 1px solid #314A70;
    border-bottom: 1px solid #314A70;
    padding-top: 4%;
    padding-bottom: 4%;
}

.job-item button {
    background: #F8F8F8;
    color: #314A70;
}

.form-control {
    border: none;
    border-bottom: 1px solid #C6C6C6;
    border-radius: 0;
    padding-left: 0;
    font-size: 18px;
    color: #C6C6C6;
}

.form-control:focus {
    box-shadow: none;
    border-bottom: 1px solid #1d3557 !important;
}

.map-card {
    background: #F8F8F8;
    color: #314A70;
    padding: 1%;
    position: absolute;
    top: 6%;
    left: 4.8%;
    width: 466px;
}

.map-card a {
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
}

h6 {
    font-size: 20px;
}

.map-card p {
    color: #757575;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
}

.connect-hero {
    position: relative;
    background-image:
        radial-gradient(50% 50% at 50% 50%, rgba(255, 250, 238, 0.8) 0%, rgba(49, 74, 112, 0.8) 100%),
        url("image/connect-image.png");
    background-blend-mode: multiply;
    height: 85vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.connect-hero .bottom-left-content {
    width: 929px;
}

.connect-hero .top-right-box {
    width: 466px;
    padding: 1%;
}

.healthcare.connect-hero {
    background-image:
        radial-gradient(50% 50% at 50% 50%, rgba(255, 250, 238, 0.8) 0%, rgba(49, 74, 112, 0.8) 100%),
        url("image/healthcare-connect.png");
    background-blend-mode: multiply;
}

.retail.connect-hero {
    background-image:
        radial-gradient(50% 50% at 50% 50%, rgba(255, 250, 238, 0.8) 0%, rgba(49, 74, 112, 0.8) 100%),
        url("image/retail-connect.png");
    background-blend-mode: multiply;
}

.manufacturing.connect-hero {
    background-image:
        radial-gradient(50% 50% at 50% 50%, rgba(255, 250, 238, 0.8) 0%, rgba(49, 74, 112, 0.8) 100%),
        url("image/hangers-connect.png");
    background-blend-mode: multiply;
}

.housekeeping.connect-hero {
    background-image:
        radial-gradient(50% 50% at 50% 50%, rgba(255, 250, 238, 0.8) 0%, rgba(49, 74, 112, 0.8) 100%),
        url("image/housekeeping-connect.png");
    background-blend-mode: multiply;
}

#locations,
#life-at-bubble,
#our-achievements {
    scroll-margin-top: 100px;
}

/* Start Exploring on the hero jumps here — without this the fixed header
   covers the top of the intro paragraph and it reads as cut off. */
#about_us {
    scroll-margin-top: 120px;
}

.achievement-image {
    overflow: hidden;
}

.achievement-image img {
    transition: transform 0.5s ease-in-out;
}

.achievement-image:hover img {
    transform: scale(1.1);
}

/* Hero image zoom helper for GSAP animation */
.hero-zoom {
    transform-origin: center center;
    will-change: transform;
    display: block;
}

/* Dark overlay for hero section */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* Ensure hero content stays above overlay */
section.position-relative .container.position-absolute {
    z-index: 2;
}

.desktopview {
    display: flex !important;
}

.mobileview {
    display: none !important;
}

.offcanvas {
    background: #314A70;
    padding: 1% 3%;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
}

.offcanvas-body {
    margin-top: 10%;
    overflow-y: auto;
    flex-grow: 1;
}

.offcanvas-body .navbar-nav {
    gap: 20px;
}

.offcanvas-body .social-link {
    background: #1D2A3E;
}

.offcanvas-body .d-grid {
    position: relative;
    bottom: 2%;
    left: 0;
    right: 5%;
}

.spot-icon svg {
    margin-bottom: 2px;
}

.social-link svg {
    margin-bottom: 3px;
}

button.owl-next, button.owl-prev {
    padding: 0;
    border: 0;
}

.info-card {
    min-height: 237px;
	height:100%;
    align-content: center;
}

.img-div {
    height: 530px;
}

.img-div .overlay-icon {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    display: none;
}

.card {
    align-items: center;
    transition: transform 0.3s ease;
}

.card:hover {
    cursor: pointer;
    transform: scale(1.05);
}

#leaders .card:hover .overlay-icon {
    display: block;
    cursor: pointer;
}

footer .cta-width {
    width: 100%;
}

.banner-section .cta-width {
    width: 60%;
}

#leaders .owl-theme .owl-nav.disabled+.owl-dots {
    display: none !important;
}

#leaders .mobileview.custom-owl-nav {
    display: flex !important;
    padding-right: 0 !important;
}

h1.slide-up, h2.slide-up, h3.slide-up, p.animated-para, h4.animated-para, h4.animated-para, h5.animated-para {
    transform: translateY(20px);
    opacity: 0;
}

.slide-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;

}

.btn_text {
    display: block;
    transition: transform 0.4s ease;
    white-space: nowrap;
}

.btn_text--default {
    transform: translateY(0%);
}

.btn_text--hover {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(0%);
}

.slide-link .slide-button {
    display: inline-block;
    overflow: hidden;
    color: #314A70;
}

.slide-link .btn_text-wrapper {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.slide-link .btn_text {
    display: block;
    transition: transform 0.4s ease;
    white-space: nowrap;
}

.slide-link .btn_text--default {
    transform: translateY(0%);
}

.slide-link .btn_text--hover {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(0%);
}

.slide-link:hover .btn_text--default {
    transform: translateY(-100%);
}

.slide-link:hover .btn_text--hover {
    transform: translateY(-100%);
}

.heading {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.heading>div {
    overflow: hidden;
}

.heading>div>h1 {
    width: max-content;
    white-space: nowrap;
    margin: 0;
    line-height: 117%;
}

.slide-up {
    animation: slide-up 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.9s ease, opacity 0.8s ease;
    animation-delay: 0.1s;
}


@keyframes slide-up {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.animated-para {
    animation-delay: 0.2s;
}

p#animated-text {
    max-width: 100%;
}

.back-blur{
    background-color: rgba(255, 255, 255, 0.263);
    backdrop-filter: blur(5px);
}


@media (max-width: 1599.98px) {

    h1 {
        font-size: 70px;
    }

    .industry-cards .card-head {
        gap: 18%;
    }

    .image-container img {
        height: 904px;
    }

    .cta-width {
        width: 65%;
    }

}

.service-logo {
	border-radius: 12px;
	max-width: 100px;
	height: auto;
}

#company-listing > div > div.desktopview.back-blur.flex-column.gap-5 > div > div > div.col-md-6.content-div-left.blue-text > div.logo-carousel-container.mt-4.mb-4 > div > div.owl-stage-outer > div {
	display: flex !important;
	justify-content: center !important;
	
}

.owl-item.cloned.active, .owl-item {
	display: flex !important;
	align-content: center !important;
}

@media (max-width: 1399.98px) {
    h3 {
        font-size: 52px;
    }

    p {
        font-size: 16px;
    }

    h1 {
        font-size: 58px;
    }

    .industry-cards .card-head {
        gap: 10%;
    }

    .ps-6 {
        padding-left: 0;
    }

    .image-container img {
        height: 825px;
    }
}

@media (max-width: 1199.98px) {

    h1 {
        font-size: 48px;
    }

    .navbar-nav {
        gap: 9px;
    }

    .inside-goal small, .inside-goal div {
        font-size: 18px;
    }

    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 38px;
    }
	
    p {
        font-size: 14px;
    }

    .info-card {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .cards p {
        font-size: 14px;
    }

    h5 {
        font-size: 22px;
    }

    .map-card p {
        font-size: 16px;
    }

    .navbar-text, .navbar a.nav-link {
        font-size: 14px;
    }

    .job-item .cta-width {
        width: 35%;
    }

    .banner-section .mobileview {
        display: flex !important;
    }

    .connect-hero .bottom-left-content {
        width: 780px;
    }

    .image-container img {
        height: 730px;
    }

    .part-out-team.extra-spacing {
        padding-top: 0%;
        padding-bottom: 0%;
    }

    .industries-sections .owl-theme .owl-nav.disabled+.owl-dots {
        margin-top: 0px;
    }

    .industries-sections .custom-owl-nav.mobileview,
    #leaders .mobileview.custom-owl-nav {
        position: absolute;
        top: 87%;
        width: 90%;
        z-index: 500;
        display: flex !important;
        justify-content: space-between !important;
        padding-right: 0 !important;
    }

    #leaders .owl-theme .owl-nav.disabled+.owl-dots {
        display: block !important;
    }

    .custom-owl-nav.mobileview.ourachievements {
        position: absolute;
        top: 91%;
        width: 90%;
        z-index: 500;
        display: flex !important;
        justify-content: space-between !important;
        padding-right: 0 !important;
    }

    .owl-theme .owl-dots .owl-dot span {
        background: #314A70;
        border-radius: 0;
        margin: 5px 5px;
        width: 13px;
        height: 13px;
    }

    .owl-theme .owl-dots .owl-dot.active span {
        background: #FFFFFF;
        width: 17px;
        height: 17px;
    }

    #companylisting.owl-theme .owl-dots .owl-dot span, #ourleaders.owl-theme .owl-dots .owl-dot span,
    #ourachievements.owl-theme .owl-dots .owl-dot span, #ourleaders.owl-theme .owl-dots .owl-dot span {
        background: #D9D9D9;
    }

    #companylisting.owl-theme .owl-dots .owl-dot.active span, #ourleaders.owl-theme .owl-dots .owl-dot.active span,
    #ourachievements.owl-theme .owl-dots .owl-dot.active span, #ourleaders.owl-theme .owl-dots .owl-dot.active span {
        background: #314A70;
    }

    .cta-width {
        width: 65%;
    }

    #ourachievements .item .card-body {
        padding-top: 4%;
        padding-bottom: 4%;
    }

    #ourachievements .item .card-body h5 {
        font-size: 25px;
    }

    #ourachievements .item .card-body .cta-width {
        width: 50%;
    }
}

@media (max-width: 991.98px) {

    .info-card {
        min-height: 189px;
    }

    footer .cta-width {
        width: 50%;
    }

    .map-card p {
        font-size: 14px;
    }

    h5 {
        font-size: 18px;
    }

    .job-item .cta-width {
        width: 39%;
    }

    .connect-hero .bottom-left-content {
        width: 686px;
    }

    .image-container {
        top: -63px;
    }

    .image-container img {
        height: 690px;
    }

    #leaders .mobileview.custom-owl-nav {
        width: 90%;
        top: 91%;
    }

    h1 {
        font-size: 43px;
    }

    .navbar-toggler {
        border: 0;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }
}

@media (max-width: 767.98px) {
    #ourleaders.owl-carousel .owl-item {
        display: block !important;
    }

    #ourleaders .col,
    #ourleaders .card {
        width: 100%;
        margin: 0 auto;
    }

    .spot-icon svg {
        margin-bottom: 5px;
    }

    header {
        background: #314A70 !important;
    }

    .navbar {
        padding: 1% 3%;
    }

    .navbar-brand {
        font-size: 12px;
    }

    .navbar a {
        font-size: 12px;
    }

    .cta-width {
        width: 100%;
    }

    #company-listing > div > div.desktopview.back-blur.flex-column.gap-5 {
        display: none !important;
    }

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 28px;
    }

    .cta-div {
        margin-bottom: 12%;
    }

    .inside-goal small, .inside-goal div {
        font-size: 10px;
    }

    h3 {
        font-size: 28px;
    }

    p {
        font-size: 14px;
    }

    p.cta {
        font-size: 16px;
    }

    #ourindustries.owl-carousel .owl-item {
        display: block !important;
    }

    .industry-cards.mobile {
        width: 100%;
        margin: 0 auto;
    }

    footer ul li a {
        font-size: 15px;
    }

    footer ul.list-unstyled {
        gap: 25px;
    }

    .d-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .social-link {
        justify-content: center;
    }

    /* The footer social label used to be hidden on mobile (icon only) — that
       made sense when three icons had to sit side by side. LinkedIn is now the
       only social link, so the label shows next to the icon, centred by the
       .social-link rule above. */

    .offcanvas-body .social-link p {
        color: #FFFFFF;
    }

    .offcanvas-body .social-link svg path {
        fill: #FFFFFF;
    }

    footer .social-link svg path {
        fill: #314A70;
    }

    .owl-carousel.mobileview {
        display: block !important;
    }

    .part-out-team .desktopview {
        display: none !important;
    }

    .part-out-team .mobileview {
        display: block !important;
    }

    .industries-cards-row.desktopview {
        display: none !important;
    }

    .careers-hero {
        background-image: url(image/careers-mobile.jpg);
    }

    .bottom-left-content {
        right: 5%;
    }

    .connect-hero .top-right-box {
        width: 224px;
        height: 94px;
        padding: 5%;
    }

    .top-right-box {
        background: #1D2A3E;
        color: #FFFFFF;
        padding: 4%;
        height: 71px;
        width: 202px;
        top: 5%;
        right: 5%;
    }

    .top-right-box svg path {
        fill: #FFFFFF;
    }

    .top-right-box p {
        font-size: 10px;
    }

    h5 {
        font-size: 14px;
    }

    .ceo-message p {
        font-size: 18px;
    }

    .extra-spacing {
        padding-top: 12%;
        padding-bottom: 10%;
    }

    #ourachievements h5 {
        font-size: 18px;
    }

    p.lr-text,
    #ourachievements p {
        font-size: 16px;
    }

    .card-body {
        padding-top: 10%;
    }

    .job-item {
        border: 0;
    }

    #companylisting p {
        font-size: 16px;
    }

    #companylisting h5,
    .job-item h5 {
        font-size: 18px;
    }

    #testimonial img {
        width: 30% !important;
    }

    form.mobileview {
        display: block !important;
    }

    form.mobileview .form-control {
        background-color: #F8F8F8;
    }

    #locations.mobileview {
        display: block !important;
    }

    .map-section.desktopview {
        display: none !important;
    }

    .connect-hero .bottom-left-content {
        width: auto;
    }

    .custom-owl-nav {
        justify-content: space-between !important;
        padding-right: 0 !important;
    }

    .info-card {
        min-height: auto;
    }

    footer .cta-width {
        width: 100%;
    }

    .extra-padding {
        padding-top: 23%;
    }

    .connect-hero .top-right-box {
        height: 103px;
        padding: 4%;
    }

    #our-achievements .mobileview.custom-owl-nav {
        position: absolute;
        top: 91%;
        width: 90%;
        z-index: 500;
    }

    #leaders .mobileview.custom-owl-nav {
        width: 90%;
    }

    #leaders .owl-stage {
        padding-left: 0 !important;
    }

    .careers-hero .top-right-box {
        height: 113px;
    }
}

@media (max-width: 575.98px) {

    .extra-padding {
        padding-top: 25%;
    }

    #ourachievements .item .card-body h5 {
        font-size: 21px;
    }

    #ourachievements .item .card-body .cta-width {
        width: 100%;
    }

    .custom-owl-nav.mobileview.ourachievements {
        top: 89%;
    }

    .careers-hero .top-right-box {
        height: 88px;
    }

.reveal {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.reveal img {
    width: 100%;
    height: auto;
    display: block;
}

}

/* Contact Form 7 fixes: ensure form controls match theme and textarea appears correctly */
.wpcf7 .form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 0;
    border: none;
    border-bottom: 1px solid #C6C6C6;
    border-radius: 0;
    background: transparent;
    font-size: 18px;
    color: #314A70;
}
.wpcf7 textarea.form-control {
    min-height: 160px;
    padding: 0.75rem 0;
    resize: vertical;
    color: #314A70;
}

/* Style the CF7 submit button to a solid blue CTA that matches site colors */
.wpcf7 .wpcf7-submit,
.wpcf7 input[type="submit"] {
    background: #314A70 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.6rem 1.1rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-transform: uppercase;
}
.wpcf7 .wpcf7-submit:hover,
.wpcf7 input[type="submit"]:hover {
    opacity: 0.95;
}

/* Ensure CF7 validation messages don't push layout oddly */
.wpcf7-response-output {
    box-sizing: border-box;
}

/* Remove arrow and bottom border for CTA containers that should be plain */
.slide-link.blue-cta {
    border-bottom: none !important;
}
.slide-link.blue-cta svg {
    display: none !important;
}
.slide-link.blue-cta .slide-button {
    border: none !important;
}

/* Gallery grid */
.gallery-section .section-title {
    text-align: center;
    margin-bottom: 1rem;
}
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
	grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
}
.gallery-item {
    box-sizing: border-box;
    flex: 0 0 calc(25% - 12px);
    margin: 0;
}
.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
@media (max-width: 900px) {
    .gallery-item { flex: 0 0 calc(33.333% - 10.666px); }
}
@media (max-width: 600px) {
    .gallery-item { flex: 0 0 calc(50% - 8px); }
}
@media (max-width: 400px) {
    .gallery-item { flex: 0 0 100%; }
}

/* Simple lightbox for gallery images */
.lv-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 24px;
}
.lv-lightbox-overlay.active { display: flex; }
.lv-lightbox-inner {
    max-width: 95%;
    max-height: 95%;
    position: relative;
}
.lv-lightbox-inner img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.lv-lightbox-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
}
.lv-lightbox-caption {
    margin-top: 10px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    opacity: 0.9;
}

.map-text {
	color: #314A70 !important;
}

/* ── Company Milestones Section ──
   Ringed-circle zigzag timeline (matches the client's reference layout):
   each year sits inside a white, blue-ringed node, connected by a straight
   zigzag path instead of a curved line. Hovering a node zooms it in and
   pops the event copy out into a wider card so the text can rewrap at a
   larger size instead of just inflating inside the old narrow column. */
.milestones-section {
    position: relative;
    background: linear-gradient(180deg, #F2F6FC 0%, #FFFFFF 100%);
}

/* Desktop zigzag timeline */
.milestone-track {
    display: flex;
    align-items: stretch;
    position: relative;
    min-height: 460px;
}
/* Straight lines drawn from each node's actual centre to the next one's —
   a single non-repeating polyline (not a repeating decorative tile) sized
   to this track's 7 evenly-spaced items and their ±40px zigzag offset, so
   the line genuinely connects circle to circle instead of just texturing
   the background. x-coordinates are percentages of the track width
   (item i's centre sits at (i+0.5)/7); y is real pixels via a matching
   viewBox height, alternating between the peak/valley lines below. */
.milestone-track::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 220px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 220' preserveAspectRatio='none'><polyline points='7.14,70 21.43,150 35.71,70 50,150 64.29,70 78.57,150 92.86,70' fill='none' stroke='%23314A70' stroke-width='2' vector-effect='non-scaling-stroke' opacity='0.4'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 220px;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}
/* min-width:0 is load-bearing, not tidying. A flex item defaults to
   min-width:auto, so each column was forced out to the min-content width of
   the 200px event text inside it (~216px). Seven of those overflowed the
   track (1512px of items in a 1411px track, spilling out and getting clipped
   by body{overflow-x:hidden}), while ::before's polyline is drawn across the
   *track's* width — so the line came out horizontally compressed against the
   dots and the drift compounded left-to-right, leaving the last circle ~94px
   off its vertex. With min-width:0 the columns are a true 1/7 each and the
   dot centres land exactly on the polyline's (i+0.5)/7 vertices. */
.milestone-item {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.milestone-item:hover {
    z-index: 5;
}
/* Alternate nodes up/down into an actual zigzag instead of sitting on one
   flat centreline — "peak" items (text above) rise, "valley" items (text
   below) drop, matching the reference layout and the connecting line above. */
.milestone-item:nth-child(odd) .milestone-dot {
    --zig-offset: -40px;
}
.milestone-item:nth-child(even) .milestone-dot {
    --zig-offset: 40px;
}
.milestone-top {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    /* Bottom padding clears the peak node's own reach (zig-offset 40px +
       its 44px radius) plus a real visible gap, so the (always in-flow)
       text never sits behind the node even at rest. Side padding is kept
       tight — the column is only ~1/7 of the track, and every pixel spent
       here comes straight out of the event text's line width. */
    padding: 0 0.25rem 6.5rem;
    text-align: center;
}
.milestone-bottom {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 6.5rem 0.25rem 0;
    text-align: center;
}
/* The ringed node — pinned to the centre of the item, then nudged along the
   zigzag by --zig-offset, year label inside it. --zig-scale is the single
   hover lever so the offset and the zoom compose in one transform instead
   of two rules fighting over the same property. */
.milestone-dot {
    --zig-offset: 0px;
    --zig-scale: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(var(--zig-offset)) scale(var(--zig-scale));
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem;
    background: #FFFFFF;
    border: 5px solid #314A70;
    box-shadow: 0 6px 16px rgba(29, 42, 62, 0.18);
    cursor: pointer;
    z-index: 1;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.milestone-item:hover .milestone-dot {
    --zig-scale: 1.25;
    border-color: #5A88CE;
    box-shadow: 0 12px 26px rgba(29, 42, 62, 0.28);
}
/* Deliberately no independent font-size bump here: the dot's own
   transform:scale already enlarges this text in proportion to the ring, so
   it can never grow past the ring's edge. A separate font-size increase on
   top of that (the old behaviour) double-counted the zoom and made long
   labels like "2015/2016" spill outside the circle. */
.milestone-year {
    color: #314A70;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.15;
    transition: color 0.35s ease;
}
.milestone-year--compact {
    font-size: 0.72rem;
}
/* Keeps a multi-word brand name (e.g. "Bubble Clean Easy") from being split
   across a line break inside the narrow milestone text columns. */
.nowrap {
    white-space: nowrap;
}
.milestone-item:hover .milestone-year {
    color: #1D2A3E;
}
/* The event copy is a fixed 200px wide at all times. On hover it's enlarged
   with transform:scale rather than a font-size change — scaling grows the
   whole block uniformly, so the wrap points stay byte-for-byte identical
   between rest and hover (a font-size increase would fit fewer characters
   per 200px line and force a reflow). transform-origin points away from the
   node so the text grows outward, not over the circle. */
.milestone-top p,
.milestone-bottom p {
    position: relative;
    /* Fluid, capped — never a fixed 200px. A fixed width here is what used to
       blow the column out past its 1/7 share (see .milestone-item min-width). */
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    color: #607697;
    font-size: 0.82rem;
    line-height: 1.5;
    padding: 0.4rem 0.35rem;
    border-radius: 12px;
    transition: transform 0.35s ease, color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.milestone-top p {
    transform-origin: center bottom;
}
.milestone-bottom p {
    transform-origin: center top;
}
.milestone-item:hover .milestone-top p,
.milestone-item:hover .milestone-bottom p {
    transform: scale(1.28);
    color: #1D2A3E;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 14px 30px rgba(29, 42, 62, 0.2);
    z-index: 6;
}

/* Mobile vertical timeline — same ringed-node look at a smaller size. Text
   stays put and readable at a glance; there's no hover state on touch
   devices, so no reflow concern there. */
.milestone-track-mobile {
    position: relative;
    padding-left: 2.5rem;
}
.milestone-track-mobile::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: rgba(49, 74, 112, 0.35);
}
.milestone-item-mobile {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
    position: relative;
}
.milestone-item-mobile:last-child {
    margin-bottom: 0;
}
.milestone-dot-mobile {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 4px solid #314A70;
    box-shadow: 0 3px 8px rgba(29, 42, 62, 0.18);
    flex-shrink: 0;
    margin-top: 3px;
    position: relative;
    z-index: 1;
    margin-left: -2.5rem;
}
.milestone-content-mobile .milestone-year {
    color: #314A70;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.25rem;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.milestone-content-mobile p {
    color: #607697;
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0.25rem 0 0;
}
@media (max-width: 1199.98px) {
    .milestone-track.desktopview {
        display: none !important;
    }
    .milestone-track-mobile.mobileview {
        display: block !important;
    }
}

/* ── About Us paragraph (home page): larger, legible body copy ── */
#about_us .sticky-panel p.blue-text {
    font-size: 20px;
}

/* ── About Us intro band: same font as the "diversified UAE-based group"
   paragraph below it, set on a brand-blue band so it reads as a uniform,
   intentional section rather than an oversized floating heading. ── */
.about-intro-band {
    background: #314A70;
    padding: 3rem 1.5rem;
    margin-bottom: 2.5rem;
    border-radius: 8px;
}

.about-intro-text {
    font-family: Aptos, sans-serif;
    font-size: 20px !important;
    font-weight: 400;
    line-height: 150%;
    text-align: center;
    color: #FFFFFF;
    max-width: 960px;
    margin: 0 auto;
}

.about-intro-text .bold-span {
    color: #FFFFFF;
}

/* ── Hero: the industries carousel's nav arrows have no positioned
   ancestor, so they render pinned near the top of the document and
   float on top of the hero on tablet and below. Hide them there —
   the carousel itself is only shown on real mobile. ── */
@media (max-width: 1199.98px) {
    .industries-sections .custom-owl-nav.mobileview {
        display: none !important;
    }
}

/* ── Tablet (768px–1199.98px) layout fixes ── */
@media (min-width: 768px) and (max-width: 1199.98px) {

    /* Banner/hero sections shared by About + industry pages:
       fit within one viewport, clear the fixed navbar, keep left padding */
    .banner-section {
        min-height: 100vh;
        display: flex;
        align-items: center;
        padding-top: 110px;
        box-sizing: border-box;
    }

    .banner-section .backimg {
        display: none !important;
    }

    .banner-section .container {
        padding-left: 3rem;
        width: 100%;
    }

    /* Our Services: desktop-style cards wrapped 3 on top, 2 below, centered */
    .industries-cards-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .industries-cards-row .industry-cards.cards {
        flex: 0 0 30%;
        max-width: 30%;
    }

    /* Our Achievements: one certificate per row instead of a cramped 2-column grid */
    .our-achievements .row.g-4.desktopview > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── Footer socials: LinkedIn is the only one left, so it gets a single centred
   column. This was `repeat(3, 1fr)` to sit Instagram/Facebook/LinkedIn side by
   side on tablet and mobile — with one item left that dropped it into the first
   of three tracks, i.e. left of centre. The offcanvas socials stay stacked. ── */
@media (max-width: 991.98px) {
    footer .d-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        justify-items: center;
    }

    .offcanvas-body .d-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   Sector page additions (July 2026 client feedback): Products We
   Process / Services We Provide, Market Sectors tiles, Why Choose Us.
   Added on top of existing .heading / .industries-cards-row / .info-card
   patterns — no existing rules changed.
   ══════════════════════════════════════════════════════════════ */

/* Products We Process / Services We Provide — simple checked list item */
.product-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #EEF2F7;
}

.product-item svg {
    flex-shrink: 0;
}

.product-item span {
    font-size: 15px;
    line-height: 1.3;
}

.product-item--more {
    color: #607697;
    font-style: italic;
}

/* Market Sectors — image tile grid (reuses .industries-cards-row spacing) */
.sector-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.sector-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(29, 42, 62, 0.15) 0%, rgba(29, 42, 62, 0.85) 100%);
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    transition: background 0.3s ease;
}

.sector-tile:hover .sector-tile-overlay {
    background: linear-gradient(180deg, rgba(49, 74, 112, 0.25) 0%, rgba(49, 74, 112, 0.9) 100%);
}

.sector-tile-title {
    color: #FFFAEE;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

/* Why Choose Us — feature card on top of the existing .info-card shell */
.why-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.why-item svg {
    flex-shrink: 0;
    margin-top: 3px;
}

.why-item p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    .sector-tile {
        aspect-ratio: 16 / 10;
    }
}

/* ══════════════════════════════════════════════════════════════
   Sector page v2 — Hospitality redesign (client mockup, July 2026)
   Namespaced .sp-* on purpose. The older .product-item / .sector-tile
   / .why-item rules above are still used by healthcare, manufacturing,
   housekeeping and retail — nothing here touches them, so those four
   pages are unaffected until this design is rolled out to them too.
   Hero and Let's Connect keep their existing markup/CSS.
   ══════════════════════════════════════════════════════════════ */

/* --- section shells --- */
.sp-section {
    padding: 112px 64px;
}

.sp-section--light { background: #FFFFFF; }
.sp-section--mist  { background: #F4F6F9; }
.sp-section--dark  { background: #16273E; }

.sp-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- section headers --- */
.sp-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7A8AA3;
    font-size: 11px;
    letter-spacing: 0.18em;
    font-weight: 600;
    text-transform: uppercase;
}

.sp-eyebrow--onDark { color: rgba(255, 250, 238, 0.55); }

.sp-title {
    color: #314A70;
    font-size: 40px;
    line-height: 1.25;
    font-weight: 600;
    margin: 0;
}

.sp-title--onDark { color: #FFFAEE; }

.sp-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 64px;
}

.sp-head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 72px;
}

.sp-head--split .sp-head-titles {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sp-head-count {
    color: #8B99AF;
    font-size: 13px;
    letter-spacing: 0.08em;
    padding-bottom: 6px;
    white-space: nowrap;
}

/* --- Industries We Serve: centred intro band --- */
.sp-intro {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

.sp-intro-text {
    color: #5C6B82;
    font-size: 17px;
    line-height: 1.75;
    margin: 0;
    max-width: 680px;
}

/* --- Our Companies: alternating cards --- */
.sp-company-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sp-company {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #FFFFFF;
    border: 1px solid #E6EAF1;
    border-radius: 20px;
    overflow: hidden;
}

.sp-company-media {
    min-height: 420px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.sp-company-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 56px 64px;
}

.sp-company-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp-company-logo {
    max-width: 140px;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sp-company-num {
    color: #C3CCDA;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.sp-company-title {
    color: #314A70;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.sp-company-text {
    color: #5C6B82;
    font-size: 15px;
    line-height: 1.75;
    margin: 0;
}

.sp-link {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 220px;
    margin-top: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #314A70;
    color: #314A70;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: gap 0.25s ease, opacity 0.25s ease;
}

.sp-link:hover {
    color: #16273E;
    gap: 24px;
}

/* On desktop, every other card puts the photo on the right. On mobile the
   grid collapses to one column and the photo always leads. */
@media (min-width: 992px) {
    .sp-company--flip .sp-company-media { order: 2; }
}

/* --- Products We Process: pill grid --- */
.sp-products {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 80px;
}

.sp-products-blurb {
    color: #5C6B82;
    font-size: 15px;
    line-height: 1.7;
    margin: 8px 0 0;
}

.sp-pillwrap {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 12px;
}

.sp-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid #D9E0EA;
    border-radius: 100px;
    background: #FBFCFE;
    color: #314A70;
    font-size: 15px;
    font-weight: 500;
}

.sp-pill--more {
    border: 1px dashed #B9C4D4;
    background: transparent;
    color: #7A8AA3;
    font-style: italic;
}

/* --- Market Sectors: tall cards, caption below --- */
.sp-sectors {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.sp-sector {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-sector-media {
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.35s ease;
}

.sp-sector:hover .sp-sector-media {
    transform: scale(1.03);
}

.sp-sector-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.sp-sector-num {
    color: rgba(255, 250, 238, 0.4);
    font-size: 12px;
    font-weight: 600;
}

.sp-sector-title {
    color: #FFFAEE;
    font-size: 16px;
    font-weight: 600;
}

/* --- Why Choose Us: numbered cards --- */
.sp-why {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sp-why-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    background: #F4F6F9;
    border-radius: 16px;
}

/* The check-tick icon that used to share this row is gone, so it holds only the
   01/02/03 index, pinned to the top-left of the card. */
.sp-why-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sp-why-num {
    color: #C3CCDA;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* flex:1 + centred main axis floats the title/text block in the middle of the
   card's remaining height. Cards in a grid row all stretch to the tallest, so
   without this the copy hugged the top and left a ragged well of dead space
   underneath every card shorter than its neighbour. The index deliberately
   stays in flow above (rather than being absolutely positioned, which would
   let the tallest card's text grow up underneath it). */
.sp-why-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.sp-why-title {
    color: #314A70;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

.sp-why-text {
    color: #5C6B82;
    font-size: 17px;
    line-height: 1.65;
}

/* ── Responsive ─────────────────────────────────────────────── */

/* Laptop / small desktop */
@media (max-width: 1199.98px) {
    .sp-section { padding: 96px 40px; }
    .sp-sectors { grid-template-columns: repeat(3, 1fr); }
    .sp-why     { grid-template-columns: repeat(2, 1fr); }
    .sp-products { grid-template-columns: 1fr; gap: 40px; }
    .sp-company-body { padding: 40px; }
}

/* Tablet and below — cards go single column */
@media (max-width: 991.98px) {
    .sp-section { padding: 72px 24px; }
    .sp-title { font-size: 30px; }

    .sp-head { margin-bottom: 40px; }

    .sp-head--split {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 40px;
    }

    .sp-head-count { padding-bottom: 0; }

    .sp-company { grid-template-columns: 1fr; }
    .sp-company-media { min-height: 260px; }
    .sp-company-body { padding: 32px 28px; }
    .sp-company-title { font-size: 22px; }

    .sp-intro { gap: 18px; }
    .sp-intro-text { font-size: 15px; }
}

/* Phone */
@media (max-width: 767.98px) {
    .sp-section { padding: 56px 20px; }
    .sp-title { font-size: 26px; }

    .sp-sectors { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .sp-why { grid-template-columns: 1fr; }

    .sp-why-card { padding: 24px; }
    .sp-pill { padding: 10px 16px; font-size: 14px; }

    .sp-link { width: 100%; }
}