html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Things', Arial, sans-serif;
    -webkit-overflow-scrolling: touch;
}

/* Hide page content during initial load transition */
body.initial-loading [data-barba="container"] {
    opacity: 0;
}

/********************
Variables
*********************/
:root {
    --white: #FFFFFF;
    --red-bg: #D31720;
    --red-text: #EB1B24;
    --dark-red: #AA0C0C;
    --text-on-white: #787575;
    --text-on-red: #FFB5B8;
    --grey-bg: #f4f4f4;
}

/********************
Fonts
*********************/
@font-face {
    font-family: 'Things';
    src: url('../fonts/Things.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.lato-light {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.lato-regular {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.lato-bold {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Things', serif;
    font-weight: 400;
}

p,
a,
button,
li,
input,
textarea {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.text-red {
    color: var(--red-text);

}

.section-h2 {
    font-size: 4rem;
    line-height: 1.1;
    color: var(--red-text);
    margin-bottom: 1rem;
}

.text-on-white,
.text-on-red {
    font-size: 1.125rem;
    line-height: 1.7;
    font-weight: 400;
}

.text-on-white {
    color: var(--text-on-white);
}

.text-on-red {
    color: var(--text-on-red);
}

.built-in-africa-content p {
    width: 84%;
}

.navbar-expand-lg .navbar-nav {
    gap: 1.5rem
}

.about-hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 2rem;
    color: var(--white);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


h2.statement-paragraph,
.service-single-content--list h2,
.service-single-content-case-studies h2 {
    font-size: 1.5rem;
    font-family: 'Lato', sans-serif;
    margin-bottom: 0;
    max-width: 100ch;
    line-height: 180%;
    font-weight: 400;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

h2.statement-paragraph span,
.service-single-content--list h2,
.service-single-content-case-studies h2 {
    font-weight: 700;
    color: var(--red-text);
}

footer h2.section-h2 {
    font-size: 4rem;
    max-width: 15ch;
    line-height: 125%;
    margin-bottom: 0.3rem;
}

.service-single-content--intro {
    width: 100%;
}

.services-overview h2.statement-paragraph {
    max-width: 70ch;
}

ul {
    list-style: none;
    padding-left: 0;
    display: flex;
}

.service-single-content--intro .service-single-content--list h2,
.service-single-content-case-studies h2 {
    margin-bottom: 0rem;
    padding-bottom: 1rem;
}

.service-single-content--list ul {
    display: flex;
    align-items: center;
    gap: 1.5rem 2rem;
    flex-wrap: wrap;
}

.service-single-content--list ul li {
    font-size: 1rem;
}

.rooted-culture h2 {
    max-width: 18ch;
}

.projects-home .section-h2 {
    max-width: 15ch;
}

.clients-section-home .section-h2 {
    max-width: 100%;
    text-align: center;
}

/********************
Navigation
*********************/
.navbar {
    padding: 2rem 1rem 1rem;
    border-radius: 13px;
    margin: auto;
    z-index: 5;
    background-color: rgba(60, 9, 9, 0.4) !important;
    backdrop-filter: blur(20px) saturate(1) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1) !important;
}

.navbar-nav {
    gap: 0.7rem
}

.navbar-nav .btn-hidden {
    margin-top: 1rem;
}

.navbar-brand img {
    width: 100px;
}

.navbar-nav .nav-link {
    color: var(--white);
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.938rem;
    transition: all 0.3s ease;
    text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.7);
}

.navbar-nav .nav-link.active {
    color: var(--white);
    /* text-decoration-line: underline;
    text-decoration-style: wavy;
    text-underline-offset: 0.3rem; */
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    border-radius: 15px;
    text-decoration: none;
    padding: 7px 20px;
}

.navbar-nav .nav-link:hover {
    color: var(--white);
    /* text-decoration-line: underline;
    text-decoration-style: wavy;
    text-underline-offset: 0.3rem; */
    border-bottom: 1px solid white;
    border-radius: 15px;
    text-decoration: none;
    padding: 7px 20px;
}

h2.section-h2.heading-small {
    font-size: 3rem;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 0;
}

.team-section h2 + p {
    max-width: 70ch;
}

.hero-horizontal-content h1 {
    max-width: 23ch;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/********************
Sections
*********************/
section.white-bg {
    background-color: var(--white);
}

section.bg-red,
footer {
    background-color: var(--red-bg);
}

section.hero-section {
    position: sticky;
    top: 0;
}


section.hero-section.work-hero,
section.hero-section.services-hero,
section.hero-section.about-hero,
section.contacts-form,
section.contacts-hero {
    position: relative;
    overflow-y: visible;
}

section.built-in-africa,
section.contacts-form {
    padding-top: 5rem;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    min-height: 100dvh;
    position: sticky;
    top: 0;
}

section.rooted-culture {
    padding-top: 5rem;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    min-height: 100dvh;
    position: sticky;
    top: 0;
}

section.rooted-culture.rooted-culture-2 {
    position: relative;
    margin-top: 5rem;
    padding-bottom: 5rem;
    margin-bottom: 5rem;
}

section.projects-home {
    padding-top: 5rem;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    min-height: 100dvh;
    position: relative;
    top: 0;
    margin-bottom: -1rem;
}

.clients-section-home {
    margin-top: 5rem;
    text-align: center;
}

.clients-section-home h2 {
    margin-bottom: 3rem;
}

section.projects-home hr,
.services-home hr {
    margin-top: 5rem;
    color: var(--text-on-white);
}

.services-home {
    padding-top: 5rem;
    padding-bottom: 5rem;
    position: relative;
}

.services-home-container {
    background-color: var(--red-bg);
    position: relative;
    padding: 2rem;
    margin-top: 4rem;
    border-radius: 10px;
}

.culture-home {
    position: relative;
    padding-bottom: 5rem;
}

.culture-scroll-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Ensure pointer events pass through to culture-cards */
    pointer-events: none;
}


.culture-navigation-arrows {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
    display: flex;
    gap: 15px;
    padding: 12px 16px;
    pointer-events: auto;
}

.culture-scroll-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #e9ecef;
    border-radius: 50%;
    background: white;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
}

.culture-scroll-btn:hover {
    border-color: var(--red-bg);
    color: var(--red-bg);
}

.culture-scroll-btn i {
    font-size: 1rem;
}

.culture-cards {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 3rem 2rem;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    pointer-events: auto;

    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(235, 27, 36, 0.6) rgba(255, 255, 255, 0.1);
}

.culture-cards::-webkit-scrollbar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.culture-cards::-webkit-scrollbar-thumb {
    background: rgba(235, 27, 36, 0.6);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.culture-cards::-webkit-scrollbar-thumb:hover {
    background: rgba(235, 27, 36, 0.8);
}

.culture-cards::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

/* Improve dragging state */
.culture-cards.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: auto;
    /* Disable iOS momentum during drag */
}

.culture-cards.dragging .culture-card {
    pointer-events: none;
    user-select: none;
}

/* Enhanced card styling with clean 3D transforms */
.culture-cards .culture-card {
    flex: 0 0 350px;
    min-width: 350px;
    max-width: 350px;

    /* Optimize for touch and 3D */
    touch-action: manipulation;
    will-change: transform;
    transform-style: preserve-3d;
    transform-origin: center center;

    /* Default inactive 3D state - rotated and scaled down, but fully visible */
    transform: perspective(1500px) rotateY(-25deg) scale(0.8) translateZ(-80px);

    /* Smooth transitions */
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Clean 3D shadows */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2),
    0 5px 15px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);

    border-radius: 16px;
    overflow: hidden;
}

/* Active/centered card styling with 3D */
.culture-cards .culture-card.active {
    transform: perspective(1500px) rotateY(0deg) scale(1.1) translateZ(50px);
    z-index: 10;

    /* Enhanced active 3D shadow */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3),
    0 15px 30px rgba(0, 0, 0, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Right side cards - rotated opposite direction */
.culture-cards .culture-card.right {
    transform: perspective(1500px) rotateY(25deg) scale(0.8) translateZ(-80px);
}

/* Left side cards - enhanced left rotation */
.culture-cards .culture-card.left {
    transform: perspective(1500px) rotateY(-35deg) scale(0.75) translateZ(-100px);
}

/* Hover effects - subtle enhancement for interactivity */
@media (hover: hover) and (pointer: fine) {
    .culture-cards .culture-card:hover {
        /* Slightly enhance the shadow on hover */
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3),
        0 10px 25px rgba(0, 0, 0, 0.2),
        0 0 0 2px rgba(255, 255, 255, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    }
}

/* Re-enable text selection only for content */
.culture-cards .culture-card-content h6,
.culture-cards .culture-card-content p,
.culture-cards .culture-card-content a {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    touch-action: manipulation;
}

/* Mobile-first responsive design with enhanced performance */
@media (max-width: 768px) {
    .culture-scroll-container {
        position: relative;
        padding: 0 1rem;
    }

    .culture-navigation-arrows {
        padding: 0 1rem;
        margin-bottom: 1rem;
    }

    .culture-scroll-btn {
        width: 44px;
        height: 44px;
        /* Larger touch targets for mobile */
        font-size: 1.2rem;
    }

    .culture-cards {
        gap: 1.5rem;
        padding: 1.5rem 1rem 2rem;
        perspective: none;
        /* Disable 3D for better mobile performance */

        /* Enhanced mobile touch */
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        /* Prevent overscroll bounce */
    }

    .culture-cards .culture-card {
        flex: 0 0 300px;
        min-width: 300px;
        max-width: 300px;
        scroll-snap-align: center;
        touch-action: manipulation;

        /* Simplified mobile styling - no 3D transforms */
        transform: none;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    /* Mobile active card - enhanced focus effect matching desktop hover */
    .culture-cards .culture-card.active,
    .culture-cards .culture-card:focus {
        transform: perspective(600px) rotateY(0deg) rotateX(0deg) translateY(-12px) translateZ(40px) scale(1.05);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25),
        0 8px 24px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1);
        z-index: 10;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Touched state - immediate feedback with desktop hover transform */
    .culture-cards .culture-card.touched {
        transform: perspective(600px) rotateY(0deg) rotateX(0deg) translateY(-15px) translateZ(50px) scale(1.08);
        box-shadow: 0 25px 70px rgba(235, 27, 36, 0.2),
        0 12px 30px rgba(0, 0, 0, 0.2),
        0 0 0 2px rgba(235, 27, 36, 0.1);
        z-index: 15;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Touch state transforms for child elements */
    .culture-cards .culture-card.touched iframe,
    .culture-cards .culture-card.active iframe {
        transform: translateZ(20px) scale(1.02);
    }

    .culture-cards .culture-card.touched .culture-card-content,
    .culture-cards .culture-card.active .culture-card-content {
        transform: translateZ(25px);
    }

    /* Enhanced touch feedback */
    .culture-cards .culture-card.touched::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle, rgba(235, 27, 36, 0.1) 0%, transparent 70%);
        pointer-events: none;
        animation: touchPulse 0.4s ease-out;
    }

    @keyframes touchPulse {
        0% {
            opacity: 0;
            transform: scale(0.8);
        }

        50% {
            opacity: 1;
            transform: scale(1);
        }

        100% {
            opacity: 0;
            transform: scale(1.1);
        }
    }

    /* Remove complex transforms for mobile performance */
    .culture-cards .culture-card.right,
    .culture-cards .culture-card.left {
        transform: none;
    }

    /* Mobile card content adjustments */
    .culture-card-content {
        padding: 1rem 0 0;
    }

    .culture-card-content h6 {
        font-size: 1.1rem;
    }

    .culture-card-content p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
}

@media (max-width: 480px) {
    .culture-scroll-container {
        padding: 0 0.5rem;
    }

    .culture-navigation-arrows {
        padding: 0 0.5rem;
    }

    .culture-cards {
        gap: 1rem;
        padding: 1rem 0.5rem 1.5rem;
    }

    .culture-cards .culture-card {
        flex: 0 0 280px;
        min-width: 280px;
        max-width: 280px;
    }

    .culture-card-content {
        padding: 0.75rem 0 0;
    }

    .culture-card-content h6 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .culture-card-content p {
        font-size: 0.85rem;
        margin-bottom: 0.75rem;
    }

    .culture-card-content a {
        font-size: 0.85rem;
    }
}

/* Mobile landscape optimization */
@media (max-width: 768px) and (orientation: landscape) {
    .culture-cards {
        padding: 1rem 1rem 1.5rem;
    }

    .culture-cards .culture-card {
        flex: 0 0 260px;
        min-width: 260px;
        max-width: 260px;
    }
}

/* High DPI mobile displays */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    .culture-cards .culture-card {
        /* Optimize for retina displays */
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}


/* Swipe Hint for Mobile */
.culture-swipe-hint {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
    .culture-swipe-hint {
        bottom: 0.5rem;
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}

/* Enhanced Navigation Buttons */
.culture-scroll-btn {
    position: relative;
    overflow: hidden;
}

.culture-scroll-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(235, 27, 36, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.culture-scroll-btn:hover::before {
    width: 100%;
    height: 100%;
}

.culture-scroll-btn:disabled {
    pointer-events: none;
    cursor: not-allowed;
}

/* Desktop-only hover effects */
@media (hover: hover) and (pointer: fine) {
    .culture-cards:hover {
        cursor: grab;
    }

    .culture-cards:active {
        cursor: grabbing;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .culture-cards {
        cursor: default;
        /* Remove grab cursor on touch devices */
        scroll-snap-type: x mandatory;
    }

    .culture-cards .culture-card {
        scroll-snap-align: start;
    }
}

footer {
    position: relative;
    padding: 3rem 0 0 0;
    overflow: hidden;
    width: 100%;
    margin: auto;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
}

.footer-logo p {
    width: 100%;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

footer .btn {
    margin-top: 1.5rem;
}

.footer-links {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: center;
}

.footer-links .footer-logo img {
    width: 130px;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
}

.footer-nav,
.footer-social {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-social i {
    font-size: 20px;
}

footer h3 {
    color: #7B0C0C;
    font-size: clamp(3rem, 8vw, 7rem);
    position: relative;
    bottom: -2rem;
    z-index: 0;
    text-align: center;
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.02em;
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Responsive adjustments for different screen sizes */
@media (max-width: 1200px) {
    footer h3 {
        font-size: clamp(2.8rem, 7.5vw, 6rem);
        bottom: -1.8rem;
    }
}

@media (max-width: 992px) {
    footer h3 {
        font-size: clamp(2.5rem, 7vw, 5.5rem);
        bottom: -1.5rem;
    }
}

@media (max-width: 768px) {
    footer h3 {
        font-size: clamp(2.2rem, 6.5vw, 5rem);
        bottom: -1.2rem;
        line-height: 1;
        letter-spacing: -0.01em;
    }
}

@media (max-width: 480px) {
    footer h3 {
        font-size: clamp(2rem, 6vw, 4rem);
        bottom: -1rem;
        line-height: 1.1;
        letter-spacing: 0;
        padding: 0 1rem;
    }
}

@media (max-width: 320px) {
    footer h3 {
        font-size: clamp(1.8rem, 5.5vw, 3rem);
        bottom: -0.8rem;
        line-height: 1.2;
    }
}

footer hr {
    opacity: .3;
    margin: 3rem 0;
    border-color: #ffffff;
}

/* Rooted in Africa Section */
.rooted-africa {
    background: var(--white);
    padding: 3rem auto;
}

.about-hero {
    background: var(--red-bg);
    color: white;
    position: relative;
}

.about-hero-content {
    text-align: center;
}

/* Removed duplicate .rooted-africa selector to fix error */

.team-section {
    position: relative;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.trusted-leaders,
.world-attention {
    background-color: var(--white);
    height: auto;
    position: relative;
}

.contacts-form .grid-2-col {
    gap: 4rem;
}

.contact-details ul {
    padding-left: 0;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
}

.contact-details ul li {
    font-family: "Lato", sans-serif;
    list-style: none;
    margin-bottom: 2rem;
    color: var(--text-on-white);
}

.contact-details ul li i {
    margin-right: 0.5rem;
    font-weight: 600;
}

.contact-details ul li span {
    font-weight: 500;
    color: var(--red-text);
    margin-right: 0.5rem;
}

.contact-details-map {
    max-width: 100%;
    overflow: hidden;
}

.contact-details-map iframe {
    width: 100%;
    height: 350px;
    border: 0;
    border-radius: 10px;
}

.contact-form {
    font-family: 'Lato', sans-serif;
    padding: 2rem;
    border-radius: 10px;
    background-color: var(--white);
    border: 1px solid #eee;
    box-shadow: 0 0 26px rgba(0, 0, 0, 0.05);
}

.contact-form h2.section-h2 {
    margin-bottom: 2rem;
}

.contact-form label {
    font-size: 0.9rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    border: 1px solid #eee9e9;
    background-color: var(--grey-bg);
}

.contacts-form button {
    background-color: var(--red-bg);
    color: var(--white);
    margin-top: 1rem;
    width: 100%;
}

.contacts-form button:hover {
    background-color: #961217;
    color: var(--white)
}


section.single-blog {
    background-color: var(--white);
    position: relative;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    padding-top: 6rem;
    padding-bottom: 3rem;
}

div.single-blog--content {
    max-width: 750px;
    width: 100%;
    margin: auto;
}

.single-blog--content h3 {
    margin-top: 2rem;
}

.single-blog--content p {
    font-size: 1rem;
    line-height: 170%;
    margin-bottom: 2rem;
}

.case-study-content--intro,
.case-study-content--challenge,
.case-study-content--solution,
.case-study-content--results {
    background-color: #f4f4f4;
    padding: 2rem;
    border-radius: 10px;
    font-family: 'Lato', sans-serif;
}

.case-study-content--challenge,
.case-study-content--solution {
    padding: 1.5rem 1.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.case-study-content--intro--img {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.case-study-content--intro--img img {
    width: auto;
    height: 100px;
    object-fit: contain;
}

.case-study-content--intro ul {
    display: flex;
    gap: 1rem 3rem;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.case-study-content--intro ul li {
    color: var(--text-on-white);
    font-size: 1rem;
    font-weight: 400;
}

.case-study-content--intro ul li span {
    font-weight: 600;
    color: var(--red-text);
}

.case-study-content p.case-study-content--intro--brief {
    font-size: 1rem;
    color: var(--text-on-white);
    margin-top: 2rem;
    line-height: 170%;
    max-width: 105ch;
}

p.case-study-content--intro--brief span {
    font-weight: 600;
    color: var(--red-text);
}

.case-study-content--challenge h3,
.case-study-content--solution h3,
.case-study-content--slider h2,
.case-study-content--results h3,
.case-study--results-stats--2--item h3,
.case-study-content--solution h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--red-text);
    font-family: 'Lato', sans-serif;
}

.case-study--results-stats--2--item h3 {
    color: var(--text-on-white);
    font-size: 1.1rem;
}

.case-study-content .case-study-content--solution h4 {
    font-weight: 1rem;
    color: var(--text-on-white);
    font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.case-study-content .case-study-content--solution h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-on-white);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-family: 'Lato', sans-serif;
}

.case-study-content .case-study-content--challenge p,
.case-study-content .case-study-content--solution p,
.case-study-content--results--stats-2--item p {
    font-size: 0.9rem;
    line-height: 170%;
    margin-bottom: 1rem;
    color: var(--text-on-white);
}

.case-study-content--slider {
    margin-top: 3rem;
}

/********************
Grids
*********************/
.grid-2-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    overflow: visible;
}

.trusted-logos .grid-2-col {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-3-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

section.rooted-culture .grid-2-col {
    align-items: center;
    overflow: visible;
}

section.projects-home .grid-2-col,
section.services-home .grid-2-col {
    align-items: baseline;
}

/* Clients Swiper Styles */
.clients-swiper-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.clients-swiper {
    width: 100%;
    overflow: hidden;
}

.clients-swiper .swiper-slide {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 300px;
}

/* Original grid layout within each slide */
.clients-home {
    display: grid;
    grid-template-columns: repeat(auto-fit, 120px);
    gap: 6rem 5rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2rem 0 3rem 0;
}


/* Clients Pagination */
.clients-swiper-pagination {
    position: relative;
    margin-top: 1rem;
    text-align: center;
}

.clients-swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(235, 27, 36, 0.3);
    border-radius: 50%;
    margin: 0 8px;
    opacity: 1;
    transition: all 0.3s ease;
}

.clients-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--red-text);
    transform: scale(1.2);
}

.trusted-leaders .grid-2-col {
    align-items: center;
    gap: 4rem;
}

.trusted-logos .grid-2-col {
    align-items: center;
    gap: 2rem;
}

.trusted-content p {
    max-width: 50ch;
}

.trusted-logos img {
    width: 150px;
    height: 120px;
    object-fit: contain;
}

.trusted-logos .logo-item:nth-child(3) img,
.trusted-logos .logo-item:nth-child(4) img {
    width: 80px;
    height: 120px;
    object-fit: contain;
}


.trusted-logos .logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eaecef;
    border-radius: 10px;
    padding: 1rem;
    min-height: 200px;
    flex-direction: column;
    gap: 1rem
}

.trusted-logos .logo-item p {
    font-size: 1.1rem;
    color: var(--text-dark);

}

.grid-2-col .footer-circular {
    display: flex;
    justify-content: flex-end;
}

footer .grid-2-col {
    align-items: flex-start;
    margin-bottom: 5rem;
}

.single-blog .grid-3-col {
    margin-bottom: 4rem;
}

.blogs-section .grid-2-col {
    align-items: center;
    margin-bottom: 3rem;
}

.case-study--results--stats--2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 3rem;
    margin-top: 3rem;

}

.hero-section-2 .grid-2-col {
    align-items: center;
}

.hero-section-2.about-hero .grid-2-col,
.hero-section-2.services-hero .grid-2-col,
.hero-section-2.contacts-hero .grid-2-col {
    align-items: baseline;
}

/********************
Buttons
*********************/
button.btn {
    border-radius: 60px;
    padding: 0.7rem 1rem;
    font-family: "Lato", sans-serif;
    font-weight: 600;
    font-size: 0.938rem;
    min-width: 125px;
}

button.btn-white {
    background-color: var(--white);
    color: var(--red-text);
    min-width: 150px;
    border: 2px solid var(--white);
}

.navbar button.btn-white {
    min-width: 125px;
    padding: 0.5rem 1rem;
}

button.btn-white-border {
    background-color: transparent;
    border: 2px solid var(--white);
    color: var(--white);
    min-width: 150px;
}

button.btn-white:hover {
    background-color: transparent;
    color: var(--white);
    border: 2px solid var(--white);

}

button.btn-white-border:hover {
    background-color: var(--white);
    color: var(--red-text);
}

a.link-on-white,
a.link-on-red {
    font-family: "Lato", sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    text-decoration: none;
    color: var(--red-text);
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    max-width: max-content;
    gap: 0.5rem;
    align-items: center;
}

a.link-on-white.small,
a.link-on-red.small {
    font-size: 0.93rem;
}

a.link-on-red {
    color: var(--white);
}

a.link-on-white i {
    font-size: 30px;
}

a.link-on-white.small i,
a.link-on-red.small i {
    font-size: 22px;
}

/********************
Hero Section
*********************/
.hero-section {
    background-color: var(--red-bg);
    background-size: cover;
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
    min-height: 90dvh;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    position: relative;
    /* Contain absolutely positioned children */
}

.hero-section.hero-main {
    min-height: 650px;
    padding-bottom: 5rem;
}

.hero-section.hero-main .hero-content h1 {
    display: flex;
    flex-direction: column;
}

.hero-section.hero-section-2.work-hero,
.hero-section-2.culture-hero,
.hero-section-2.contacts-hero,
.hero-section-2.case-study-hero,
.hero-section-2.contacts-hero {
    min-height: 600px;
}

/* .hero-section-2.contacts-hero {
    min-height: 500px;
} */

.hero-section-2.blog-single-hero {
    min-height: 650px;
    color: var(--white);
    padding-bottom: 5rem;
}

.hero-section-2 .hero-content h1.hero-text-small {
    text-align: left;
    line-height: 125%;
}

.hero-section.services-hero,
.hero-section-2.about-hero,
.hero-section-2.hero-section-2.hero-aligned-left {
    min-height: 550px;
    overflow-y: visible;
}

.hero-section-2.hero-section-2.hero-aligned-left .grid-2-col {
    align-items: center;
}

.hero-section.hero-section-2.blog-single-hero {
    height: 600px;
    position: relative;
}

.hero-section-2.blog-single-hero .hero-horizontal-content h1 {
    text-align: center;
    max-width: 21ch;
    margin-top: calc(3vh + 3rem);
    margin-bottom: 2rem;
}

.hero-section-2.hero-aligned-left {
    position: relative;
}

.hero-section h1 {
    color: #731110;
    font-family: 'Things', serif;
    font-weight: 400;
    font-size: 7rem;
    text-align: center;
    align-self: center;
    margin-top: 4rem;
    line-height: 105%;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 4;
}

.hero-section.hero-section-2 h1 {
    margin-left: inherit;
}

.work-hero .hero-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
}

.hero-section-2 h1 {
    color: var(--white);
    font-size: 3.5rem;
}

.hero-section-2.case-study-hero h1 {
    font-size: 3rem;
    max-width: 20ch;
}

.hero-section-2.case-study-hero p {
    max-width: 55ch;
    margin: 0.5rem 0 0 0;
}

.hero-content {
    text-align: center;
    position: relative;
}

.about-hero .hero-content {
    align-items: flex-start;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-hero .hero-content p {
    width: 60%;
    text-align: left;
    margin-left: 0;
}

.hero-section-2.about-hero h1 {
    max-width: 25ch;
    margin-right: auto !important;

}

.hero-content p {
    width: 40%;
    margin: 0 auto;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.125rem;
    margin-bottom: 2rem;
    z-index: 6;
}

.work-hero .hero-content p,
.contacts-hero .hero-content p,
.hero-horizontal-content p {
    width: auto;
    margin-top: 0.3rem;
}

.hero-content .buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    z-index: 4;
    position: relative;
}

/* Hero title colors and interactions */
.hero-content h1 span {
    color: #731110;
    transition: color 0.6s ease;
}

.hero-content h1 span.active,
.hero-content h1 span:hover {
    color: white;
    cursor: pointer;
}

/* Smaller text for "We" and "We are" parts */
.hero-content h1 span .smaller {
    font-size: 0.65em;
    /* Makes "We" and "We are" smaller */
    font-weight: 300;
    opacity: 0.9;
}

/* When span is active, smaller text also becomes white */
.hero-content h1 span.active .smaller,
.hero-content h1 span:hover .smaller {
    color: white;
}

.hero-section-2.blog-single-hero .grid-2-col {
    grid-template-columns: auto;

}

.hero-section-2.work-hero .grid-2-col {
    align-items: center;
}

.hero-content .grid-2-col h1 {
    margin: 0;
}

.hero-content-section-2 .hero-content .grid-2-col p {
    max-width: auto;
}

.work-hero-video {
    display: flex;
    justify-content: flex-end;
}

.service-single-hero-icon {
    display: flex;
    justify-content: center;
}

.hero-section-2.contacts-hero .hero-content,
.hero-section-2.services-hero .hero-content,
.hero-section-2.hero-aligned-left .hero-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-section-2.about-hero .hero-content,
.hero-section-2.services-hero .hero-content,
.hero-section-2.contacts-hero .hero-content,
.hero-section-2.blog-hero .hero-content {
    justify-content: flex-end;
}

.hero-section-2.contacts-hero .hero-content p,
.hero-section-2.services-hero .hero-content p,
.hero-section-2.hero-aligned-left .hero-content p {
    text-align: left;
    margin-left: inherit;
    z-index: auto;
}

section.hero-section.hero-horizontal {
    position: static;
}

.hero-section-2.services-hero .hero-content p {
    max-width: 70ch;
    width: 100%;
}

.hero-section-2.hero-aligned-left .hero-content p {
    max-width: 80ch;
    width: 100%;
    z-index: auto;
}

.hero-section-2.hero-section-2.hero-aligned-left.service-single-hero .hero-content p {
    max-width: 65ch;
}

.hero-horizontal .hero-content {
    margin-top: 5rem;
}

.case-study-content--results--stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 4rem 8rem;
    margin-top: 3rem;
    justify-content: flex-start;
    align-items: center;
}


.hero-section-2.den-lab-hero .vanta-canvas {
    min-height: 550px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.hero-section-2.den-lab-hero .hero-content {
    margin-top: 1.5rem;
}

/* === Darken overlay for den-lab-hero section === */
.hero-section-2.den-lab-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 550px;
    /* background: linear-gradient(to right, rgb(60,9,9, .2) 30%, rgba(60, 9, 9, 0.2) 40%, rgba(60, 9, 9, 0) 100%); */

    /* Dark overlay with 40% opacity */
    z-index: 1;
    pointer-events: none;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.hero-section-2.den-lab-hero .hero-content h1.hero-text-small,
.hero-section-2.den-lab-hero.hero-aligned-left .hero-content p {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9);
}

.hero-section-2.den-lab-hero.hero-aligned-left .hero-content p {
    max-width: 70ch;
}

.den-blogs-section {
    margin-top: 3rem;
}

.den-blogs-section .grid-3-col {
    grid-template-columns: repeat(auto-fit, minmax(301px, 1fr));
}

.den-blogs-section .content-card-2 {
    margin-top: 0rem;
    margin-bottom: 3rem;
    padding-left: 0;
    padding-right: 0;
    height: 400px;
}

.den-contacts {
    padding-bottom: 5rem;
}

.culture-hero h1 span {
    display: flex;
}

.culture-hero h1 img {
    width: 65px;
    height: 65px;
    margin-left: -0.5rem;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 170px;
    height: auto;
    object-fit: cover;
}

/********************
Images
*********************/
img {
    max-width: 100%;
}

/* Hero images with preserved positioning and enhanced transitions */
.hero-images img {
    width: 180px;
    height: 130px;
    object-fit: cover;
    border-radius: 13px;
    z-index: 2;
    transform: scale(0.85) rotate(353deg);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    filter: blur(3px) brightness(0.7);
    position: absolute;
    border: 1.5px solid var(--white);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.clients-home img {
    width: 100%;
    height: 90px;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.clients-home img:hover {
    filter: grayscale(0%);
}

/* Restore original positioning for each image */
.hero-image-1 {
    position: absolute;
    /*
    clamp(minimum, preferred, maximum)
    - 120px: Minimum distance from top (prevents image from getting too close to edge on small screens)
    - 20vh: Preferred value (20% of viewport height - scales with screen size)
    - 180px: Maximum distance from top (prevents image from going too far down on large screens)
    */
    top: clamp(180px, 30vh, 180px);

    /*
    clamp(minimum, preferred, maximum)
    - 20px: Minimum distance from left edge (ensures image stays visible on small screens)
    - 20vw: Preferred value (20% of viewport width - responsive positioning)
    - 240px: Maximum distance from left (prevents image from going too far right on wide screens)
    */
    left: calc((100vw - 1320px) / 2);
    transition-delay: 0.1s;
}

.hero-image-2 {
    position: absolute;
    /*
    - 350px: Minimum top position (ensures image doesn't overlap with image 1)
    - 60vh: Preferred value (60% down from top - maintains relative position across screen sizes)
    - 480px: Maximum top position (prevents image from going too low on very tall screens)
    */
    top: clamp(550px, 60vh, 550px);

    /*
    - 20px: Minimum left margin (keeps image visible on narrow screens)
    - 15vw: Preferred value (15% from left - slightly less than image 1 for visual variety)
    - 180px: Maximum left position (prevents overlap with center content on wide screens)
    */
    left: clamp(0px, 0vw, 0px);
    transition-delay: 0.2s;
}

.hero-image-4 {
    position: absolute;
    /*
    - 400px: Minimum top position (keeps image in lower portion of viewport)
    - 65vh: Preferred value (65% from top - slightly lower than image 2)
    - 540px: Maximum top position (prevents image from going below fold on large screens)
    */
    top: clamp(600px, 75vh, 600px);
    right: clamp(0px, 0vw, 0px);

    /*
    - 20px: Minimum right margin (ensures visibility on narrow screens)
    - 15vw: Preferred value (15% from right edge - responsive spacing)
    - 180px: Maximum right position (prevents image from going too far left on wide screens)
    */

    transition-delay: 0.3s;
}

/* Arrow within the video-arrow-group */
.video-arrow-group .hero-arrow {
    position: absolute;
    top: 205px;
    left: 10px;
    object-fit: contain;
    width: clamp(60px, 8vw, 75px);
    transform: rotate(5deg);
    /* Gentle movement animation */
    animation: gentlePoint 3s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1;
}

/* Standalone arrow (fallback for backwards compatibility) */
.hero-arrow:not(.video-arrow-group .hero-arrow) {
    position: absolute;
    top: clamp(353px, 34vh, 290px);
    object-fit: contain;
    width: clamp(60px, 8vw, 90px);
    right: clamp(40px, 20vw, 280px);
    transform: rotate(5deg);
    /* Gentle movement animation */
    animation: gentlePoint 3s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
}

/* Gentle arrow animation - movement forward and back toward video */
@keyframes gentlePoint {

    0%,
    100% {
        transform: rotate(5deg) scale(1);
        opacity: 0.9;
    }

    50% {
        transform: rotate(5deg) scale(1.1);
        opacity: 1;
    }
}

/* Group hover effects */
.video-arrow-group:hover {
    transform: scale(1.08) rotate(7deg);
}

.video-arrow-group:hover .hero-arrow {
    transform: rotate(5deg) scale(1.15);
    opacity: 1;
}

.video-arrow-group:hover video.hero-image-3 {
    transform: scale(1.08) rotate(360deg);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* Simple scale hover effect for standalone arrow */
.hero-arrow:not(.video-arrow-group .hero-arrow):hover {
    transform: rotate(5deg) scale(1.15);
    opacity: 1;
    animation-play-state: paused;
}


/* Video-Arrow Group Container */
.video-arrow-group {
    position: absolute;
    top: clamp(180px, 20vh, 220px);
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(.68, -0.55, .27, 1.55);
    opacity: 1;
    display: block;
}

/* Ensure video-arrow-group is always visible and draggable regardless of section */
.video-arrow-group.draggable-media {
    pointer-events: auto !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 1000 !important;
    display: block !important;
    visibility: visible !important;
}

/* Additional override for video when parent has reduced opacity */
.hero-images .video-arrow-group.draggable-media {
    opacity: 1 !important;
    filter: none !important;
}

.hero-images .video-arrow-group.draggable-media video {
    opacity: 1 !important;
    filter: none !important;
}

/* Override for video in human-images container when not active */
.human-images .video-arrow-group.draggable-media {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    filter: none !important;
    z-index: 1000 !important;
}

.human-images .video-arrow-group.draggable-media video {
    opacity: 1 !important;
    filter: none !important;
}

/* Video within the group */
.video-arrow-group video.hero-image-3 {
    width: 280px;
    height: 170px;
    position: relative;
    top: 0;
    right: 0;
    object-fit: cover;
    pointer-events: auto;
    opacity: 1;
    border-radius: 13px;
    transform: scale(1) rotate(353deg);
    filter: none;
    transition: transform 0.2s cubic-bezier(.68, -0.55, .27, 1.55);
    border: 2px solid var(--white);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Add the new orbital text styles - naturally wrapping around video frame */
.orbit-text {
    position: absolute;
    color: var(--white);
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;

    /* Position at bottom right of video */
    bottom: -36px;
    right: 80px;

    /* Simple animation similar to arrow */
    animation: gentleFloat 3s ease-in-out infinite;

    /* Styling for better visibility */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    padding: 4px 8px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    rotate: -10deg;
}

.single-blog--img,
.single-blog--video {
    width: 100%;
    height: 400px;
    border-radius: 10px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

/* Gentle floating animation similar to arrow */
@keyframes gentleFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Elegant floating animation for hero images */
@keyframes elegantFloat {

    0%,
    100% {
        transform: scale(1) rotate(353deg) translateY(0px);
    }

    33% {
        transform: scale(1.01) rotate(354deg) translateY(-2px);
    }

    66% {
        transform: scale(0.99) rotate(352deg) translateY(1px);
    }
}

/* Pause animation on hover for better UX */
.video-arrow-group:hover .orbit-text {
    animation-play-state: paused;
}

/* Standalone video (fallback for backwards compatibility) */
/* video.hero-image-3:not(.video-arrow-group video.hero-image-3) {
    width: 180px;
    height: 130px;
    position: absolute;
    top: clamp(180px, 30vh, 180px);
    right: clamp(0px, 0vw, 0px);
    z-index: 2;
    object-fit: cover;
    pointer-events: auto;
    opacity: 1;
    border-radius: 13px;
    transform: scale(1) rotate(353deg);
    filter: none;
    transition: transform 0.2s cubic-bezier(.68, -0.55, .27, 1.55);
    border: 1.5px solid var(--white);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
} */

.hero-image-3.work-hero-video {
    width: 90%;
    height: 300px;
    z-index: 2;
    object-fit: cover;
    pointer-events: auto;
    opacity: 1;
    border-radius: 13px;
    position: static;
    transform: scale(1) rotate(-4deg);
    filter: none;
    transition: transform 0.2s cubic-bezier(.68, -0.55, .27, 1.55);
    border: 1.5px solid var(--white);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.hero-horizontal-content--img img,
.hero-horizontal-content--img video {
    height: 350px;
    width: 90%;
    object-fit: cover;
    border-radius: 20px;
    transform: scale(1.08);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s cubic-bezier(.68, -0.55, .27, 1.55);
    border: 2px solid white;
}

.hero-horizontal-content--img img:hover,
.hero-horizontal-content--img video:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.hero-section-2.blog-single-hero .hero-horizontal-content--img img {
    max-width: 700px;
    width: 95%;
    margin: auto;
    height: 350px;
    position: relative;
    z-index: 1;
}

/* Base state for active images - no animation yet */
.think-images.active img,
.create-images.active img,
.human-images.active img {
    transform: scale(1) rotate(353deg);
    opacity: 1;
    filter: blur(0) brightness(1);
}

/* Animations only when hero section is in viewport */
.hero-section.in-viewport .think-images.active img,
.hero-section.in-viewport .create-images.active img,
.hero-section.in-viewport .human-images.active img {
    animation: elegantFloat 4s ease-in-out infinite;
}

/* Staggered animation delays for natural movement - only when in viewport */
.hero-section.in-viewport .think-images.active img:nth-child(1),
.hero-section.in-viewport .create-images.active img:nth-child(1),
.hero-section.in-viewport .human-images.active img:nth-child(1) {
    animation-delay: 0s;
}

.hero-section.in-viewport .think-images.active img:nth-child(2),
.hero-section.in-viewport .create-images.active img:nth-child(2),
.hero-section.in-viewport .human-images.active img:nth-child(2) {
    animation-delay: 1.3s;
}

.hero-section.in-viewport .think-images.active img:nth-child(3),
.hero-section.in-viewport .create-images.active img:nth-child(3),
.hero-section.in-viewport .human-images.active img:nth-child(3) {
    animation-delay: 2.6s;
}

/* Enhanced hover effects */
.hero-images img:hover {
    transform: scale(1.08) rotate(360deg);
    transition: transform 0.2s cubic-bezier(.68, -0.55, .27, 1.55);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* Ensure all draggable media elements are interactive */
.draggable-media {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Video hover - only for standalone videos (not in groups) */
video.hero-image-3:not(.video-arrow-group video.hero-image-3):not(.work-hero-video):hover {
    /*transform: scale(1.08) rotate(0deg);*/
    transition: transform 0.2s cubic-bezier(.68, -0.55, .27, 1.55);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

video.hero-image-3.work-hero-video:hover {
    /*transform: scale(1.08) rotate(0deg);*/
    transition: transform 0.2s cubic-bezier(.68, -0.55, .27, 1.55);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* Container transitions for smoother group changes */
.think-images,
.create-images,
.human-images {
    transition: opacity 0.8s ease;
    opacity: 0;
    pointer-events: none !important;
    /* Never block clicks */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.think-images.active,
.create-images.active,
.human-images.active {
    opacity: 1;
    pointer-events: none !important;
    /* Container never blocks clicks */
    z-index: 5;
}

/* Only individual images are interactive */
.think-images .draggable-media,
.create-images .draggable-media,
.human-images .draggable-media {
    pointer-events: auto !important;
}

/* Touch devices - make draggable elements interactive but maintain visibility logic */
@media (hover: none) and (pointer: coarse) {

    /* Allow all draggable elements to be interactive, regardless of parent section state */
    .think-images .draggable-media,
    .create-images .draggable-media,
    .human-images .draggable-media {
        pointer-events: auto !important;
        opacity: 1;
        transform: scale(1) rotate(353deg);
    }

    /* Keep section visibility logic but ensure draggable children are always interactive */
    .think-images,
    .create-images,
    .human-images {
        pointer-events: none !important;
    }

    /* Only active sections show their images, but all individual draggable elements remain interactive */
    .think-images.active img,
    .create-images.active img,
    .human-images.active img {
        transform: scale(1) rotate(353deg);
        opacity: 1;
    }
}


.hero-images.entering img {
    animation: imageSlideIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes imageSlideIn {
    0% {
        transform: scale(0.6) rotate(320deg);
        opacity: 0;
        filter: blur(8px) brightness(0.3);
    }

    50% {
        transform: scale(1.05) rotate(350deg);
        filter: blur(2px) brightness(0.8);
    }

    100% {
        transform: scale(1) rotate(353deg);
        opacity: 1;
        filter: blur(0) brightness(1);
    }
}

/* Duplicate .clients-home img selector removed to fix error */
/* Duplicate .clients-home img selector removed to fix error */

.footer-circular img {
    display: block;
    max-width: 100%;
    width: 270px;
    height: auto;
    animation: rotate-circular 50s linear infinite;
}

.ubuntu-content__image img:nth-child(2) {
    position: absolute;
    animation: rotate-circular 50s linear infinite;
    top: 240px;
    width: 140px;
    height: auto;
    right: 15px;
}

@keyframes rotate-circular {
    0% {
        transform: rotate(-0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

/* Removed duplicate .blogs-section .grid-2-col selector to fix error */
.blogs-section select {
    max-width: 240px;
    width: 100%;
    margin-left: auto;
    font-family: 'Lato', sans-serif;
    border: 2px solid #e9ecef;
    font-size: 0.95rem;
    border-radius: 10px;
    color: #6c757d;
    cursor: pointer;
    height: 50px;
}

.blogs-section select.active,
.blogs-section select:hover {
    border-color: var(--red-bg);
}

.case-study-hero .hero-horizontal-content--img img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.culture-hero {
    overflow: hidden;
}

.culture-hero .hero-horizontal-content--img {
    display: flex;
    justify-content: flex-end;
}

.culture-hero .hero-horizontal-content--img img {
    width: 240px;
    height: 330px;
    transition: transform 0.3s cubic-bezier(.68, -0.55, .27, 1.55);
    object-fit: cover;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.culture-hero .hero-horizontal-content--img img:nth-child(1) {
    transform: rotate(-12deg);
    z-index: 1;
}

.culture-hero .hero-horizontal-content--img img:nth-child(2) {
    transform: rotate(10deg);
}

.culture-hero .hero-horizontal-content--img img:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1) contrast(1.1);

}

.values .section-h2 + p {
    max-width: 70ch;
}

.values .grid-col-3 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 4rem 5rem;
    margin-top: 4rem;
}

.values-content__item {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    background-color 0.3s ease,
    border-color 0.3s ease,
    border-radius 0.3s ease;
    padding: 01em 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid white;
    transform-origin: center center;
    background-color: transparent;
}

.values-content__item:hover {
    border-color: var(--red-bg);
    border-radius: 10px;
    background-color: #fafafa;
    transform: rotateZ(1deg) scale(1.02);
}

.values-content__icon img {
    height: 25px;
    width: 25px;
}

.values-content__title h3 {
    font-family: 'Lato', sans-serif;
    font-size: 1.4rem;
    color: var(--red-text);
    margin: 1.4rem 0 0.5rem 0;
}

.values-content__description p {
    color: var(--text-on-white);
}

.ubuntu {
    margin-top: 5rem;
    background-color: #f1f3f4;
    padding: 5rem 0;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.ubuntu-content__text h2 img {
    margin-left: 0.3rem;
}

.ubuntu .grid-2-col {
    display: grid;
    grid-template-columns: 40% auto;
    gap: 4rem;
    align-items: center;
}

.ubuntu-content__image {
    order: 2;
    position: relative;
    overflow: hidden;
}

.ubuntu-content__image img {
    border-radius: 10px;
    height: 400px;
    width: 100%;
    object-fit: cover;
}

.quote {
    padding: 5rem 0;
    margin-top: 17rem;
}

.quote-content p {
    font-size: 6rem;
    color: var(--red-text);
    font-family: 'Things', serif;
    /* display: flex;
    flex-direction: column; */
}

.quote-content p .letter {
    display: inline-block;
    transition: transform 0.3s ease;
    cursor: default;
}

.quote-content p .letter:hover {
    transform: scale(1.3) skew(-5deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

.quote-content cite {
    font-size: 2rem;
}

.mad-scientists .grid-3-col {
    margin-top: 2rem;
}

.mad-scientists .grid-3-col .content-card--text {
    padding: 1rem 1rem 0.3rem 1rem;
}

.mad-scientists-card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
    border-radius: 10px;
    position: relative;
    color: white;
    display: flex;
    align-items: flex-end;
}

.mad-scientists-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 60%, rgba(0, 0, 0, 0.7) 100%);
    border-radius: 10px;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Hide gradient overlay on hover to let images show clearly */
.mad-scientists-card:hover::before {
    opacity: 0;
}

/* Original gradient overlay for text readability */
.mad-scientists-card .gradient-overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 70%, rgba(0, 0, 0, 0.4) 100%);
    border-radius: 10px;
    z-index: 1;
    pointer-events: none;
}

.mad-scientists-card.one {
    background-image: url('../images/profiles/den-nelson.jpg');
}

.mad-scientists-card.two {
    background-image: url('../images/profiles/den-martin.jpg');
}

.mad-scientists-card.three {
    background-image: url('../images/profiles/den-musembi.jpg');
}

.mad-scientists-card.four {
    background-image: url('../images/profiles/den-sam.jpg');
}

/* Hover Image Switching Effect */
.mad-scientists-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(1.1);
    filter: blur(12px) brightness(0.6);
    z-index: 1;
}

/* Alternate images for hover effect */
.mad-scientists-card.one::after {
    background-image: url('../images/profiles/Nelson.webp');
}

.mad-scientists-card.two::after {
    background-image: url('../images/profiles/Marto.webp');
}

.mad-scientists-card.three::after {
    background-image: url('../images/profiles/sembi.webp');
}

.mad-scientists-card.four::after {
    background-image: url('../images/profiles/Muriithi.webp');
}

/* Blur & Focus Effect */
.mad-scientists-card {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    position: relative;
    filter: blur(0px) brightness(1);
}

.mad-scientists-card:hover {
    transform: scale(1);
    filter: blur(2px) brightness(0.8);
}

/* New image focuses in clearly */
.mad-scientists-card:hover::after {
    opacity: 1;
    transform: scale(1);
    filter: blur(2px) brightness(0.8) contrast(1.1);
}

/* Text content with hide on hover */
.mad-scientists-card .content-card--text {
    position: relative;
    z-index: 2;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Hide content on hover */
.mad-scientists-card:hover .content-card--text {
    opacity: 0;
    transform: translateY(20px);
}

.den-form-img {
    display: flex;
    justify-content: center;
}

.den-form-img img {
    max-width: 400px;
    width: 100%;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) translateX(0px);
    }

    50% {
        transform: translateY(-10px) translateX(-10px);
    }
}

/********************
Portfolio Grid System
*********************/
/* Culture grid mobile fixes */
section.culture-grid {
    display: block;
}

.culture-grid {
    min-height: auto;
}

.portfolio-container {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100vh;
}

/* Portfolio maintains consistent desktop experience across all devices */

.culture-grid_header {
    padding-left: 2rem;
}

.culture-grid_header p {
    max-width: 80ch;
}

/* Filter Bar */
.portfolio-filters {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 1rem 0;
}

.filter-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -ms-overflow-style: none;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.filter-scroll::-webkit-scrollbar {
    display: none;
}

.filter-btn {
    white-space: nowrap;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50px;
    background: white;
    color: #333;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: relative;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: -1;
}

.filter-btn:hover::before {
    left: 100%;
}

.filter-btn:hover:not(.active) {
    background: #f5f5f5;
    transform: translateY(-1px);
}

.filter-btn.active:hover {
    transform: translateY(-1px);
}

.filter-btn.active {
    background: var(--red-text);
    color: white;
    border-color: var(--red-text);
}

.filter-btn .count {
    opacity: 0.7;
    font-size: 0.8rem;
}

/* Portfolio Viewport */
.portfolio-viewport {
    position: relative;
    width: 96%;
    height: calc(100vh - 0px);
    overflow: hidden;
    cursor: grab;
    background-color: var(--grey-bg);
    margin: auto;
    border-radius: 8px;
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.15);
}

/* Mobile-specific adjustments for better scrolling */
@media (max-width: 768px) {
    .portfolio-viewport {
        height: 85vh;
        /* Reduced height on mobile to allow page scrolling */
        width: 100%;
        margin: 1rem auto;
        border-radius: 0;
        box-shadow: none;
    }

    .portfolio-container {
        min-height: auto;
        padding-bottom: 2rem;
    }

    .culture-grid_header {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .culture-grid_header h2 {
        font-size: 1.8rem;
    }

    .culture-grid_header p {
        font-size: 0.95rem;
        max-width: 100%;
    }
}

/* Removed mobile-specific portfolio overrides to maintain desktop experience */

.portfolio-viewport::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/SVG/dots.svg');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

.portfolio-viewport:active {
    cursor: grabbing;
}

/* Portfolio Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 260px);
    grid-auto-flow: row;
    gap: 3rem 8rem;
    width: max-content;
    min-width: 1200px;
    max-height: 95vh;
    padding: 10px;
    position: relative;
    will-change: transform;
    transition: transform 0.2s ease;
    justify-content: center;
    align-content: start;
    transform: translateX(0) translateY(0);
}

/* Zoom Level Indicator */
.zoom-indicator {
    position: absolute;
    top: 30px;
    right: 15px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Lato', sans-serif;
    backdrop-filter: blur(10px);
    z-index: 10;
    opacity: 1;
    transition: all 0.2s ease;
    pointer-events: none;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.zoom-indicator.visible {
    opacity: 1;
}

.zoom-percentage {
    color: #fff;
}

/* Zoom Reset Hint */
.zoom-hint {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(235, 27, 36, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    font-family: 'Lato', sans-serif;
    backdrop-filter: blur(10px);
    z-index: 10;
    opacity: 1;
    transition: all 0.2s ease;
    pointer-events: none;
    user-select: none;
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.zoom-hint.visible {
    opacity: 1;
    transform: translateY(0);
}

.hint-text {
    color: #fff;
}

/* Touch-Friendly Zoom Controls */
.zoom-controls {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.zoom-controls.visible {
    opacity: 1;
    pointer-events: auto;
}

.zoom-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.zoom-btn:hover {
    background: rgba(235, 27, 36, 0.9);
    transform: scale(1.1);
}

.zoom-btn:active {
    transform: scale(0.95);
}

.zoom-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.5);
}

.zoom-btn:disabled:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: none;
}

.zoom-reset-btn {
    margin-top: 4px;
    background: rgba(235, 27, 36, 0.9);
}

.zoom-reset-btn:hover {
    background: rgba(235, 27, 36, 1);
}

.zoom-fit-btn {
    background: rgba(34, 139, 34, 0.9);
}

.zoom-fit-btn:hover {
    background: rgba(34, 139, 34, 1);
}

/* Show controls on touch devices or when hovered */
@media (hover: none) and (pointer: coarse) {
    .zoom-controls {
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 20 !important;
    }

    .zoom-btn {
        width: 56px;
        height: 56px;
        font-size: 20px;
        background: rgba(0, 0, 0, 0.95);
        border: 2px solid rgba(255, 255, 255, 0.3);
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }

    .zoom-btn:active {
        transform: scale(0.85);
        background: rgba(235, 27, 36, 0.95);
        border-color: rgba(235, 27, 36, 0.5);
    }

    .zoom-btn:focus {
        outline: none;
        background: rgba(235, 27, 36, 0.95);
    }
}

/* Desktop: show on hover */
@media (hover: hover) and (pointer: fine) {
    .portfolio-viewport:hover .zoom-controls {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Portfolio Items */
.portfolio-item {
    position: relative;
    background: white;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 350px;
    height: 360px;
    aspect-ratio: 1;
}

.portfolio-item.spotify-item {
    box-shadow: none;
    background: transparent;
}

/* Animation states for filtering */
.portfolio-item.filtering-out {
    opacity: 0;
    transform: translateZ(0) scale(0.9);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.portfolio-item.filtering-in {
    opacity: 1;
    transform: translateZ(0) scale(1);
    pointer-events: auto;
    transition: opacity 0.4s ease, transform 0.4s ease;
}


.portfolio-item.hidden {
    display: none !important;
}


.portfolio-item:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.portfolio-image {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.portfolio-item:hover .portfolio-image img {
    transform: scale(1.05);
}

/* Video Items */
.portfolio-video {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.portfolio-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.portfolio-item:hover .portfolio-video video {
    transform: scale(1.05);
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.play-button {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transform: scale(1);
    transition: transform 0.3s ease;
}

.portfolio-item:hover .play-button {
    transform: scale(1.1);
}

/* Spotify Items */
.portfolio-spotify {
    width: 100%;
    height: 100%;
}

.portfolio-spotify iframe {
    width: 100%;
    height: 100%;
    border: none;
    transition: opacity 0.3s ease;
}

.spotify-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(29, 185, 84, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.spotify-item:hover .spotify-overlay {
    opacity: 0;
}


/* Spotify Loading States */
.spotify-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 3px solid #1db954;
    animation: spotify-spin 1s linear infinite;
    z-index: 2;
}

.spotify-loading iframe {
    opacity: 0.3;
}

.spotify-loaded iframe {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.spotify-error::before {
    content: '⚠️';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #ff4444;
    z-index: 2;
}

.spotify-error::after {
    content: 'Playlist temporarily unavailable';
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: #fff;
    text-align: center;
    z-index: 2;
}

@keyframes spotify-spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Hero Section Draggable System */
.hero-section {
    /* Preserve original hero styling while adding draggable functionality */
    position: relative;
}

/* Optional: Subtle boundary indicators on hover */
.hero-section::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 1px dashed rgba(211, 23, 32, 0.15);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.hero-section.show-bounds::after,
.hero-section:hover::after {
    opacity: 1;
}

.hero-section .draggable-media {
    cursor: grab;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, filter 0.2s ease;
    user-select: none;
    z-index: 1;
    touch-action: none;
    will-change: transform;
    /* Preserve original absolute positioning for hero images */
}

/* Don't override the original hero image positioning */
.hero-section .hero-image-1,
.hero-section .hero-image-2,
.hero-section .hero-image-4,
.hero-section .hero-image-3,
.hero-section .hero-arrow {
    /* Keep their original position: absolute and positioning values */
}

.draggable-media:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    z-index: 10;
    filter: brightness(1.05);
}

.draggable-media:active,
.draggable-media.dragging {
    cursor: grabbing;
    transform: scale(1.08) rotate(1deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    filter: brightness(1.1) saturate(1.1);
    transition: box-shadow 0.1s ease, filter 0.1s ease;
}

/* Better cursor indication for video dragging */
.draggable-media video {
    cursor: grab;
}

.draggable-media video:active {
    cursor: grabbing;
}

.draggable-media:hover::after {
    opacity: 1;
}

/* Boundary constraints for hero section */
.hero-section .draggable-media {
    will-change: transform;
}

/* Enhanced hover effects for media elements */
.draggable-media img,
.draggable-media video {
    border-radius: 8px;
    transition: inherit;
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Mobile responsiveness for draggable */
@media (max-width: 768px) {
    .hero-section {
        /* Hero section mobile styles preserved */
    }

    .draggable-media:hover {
        transform: scale(1.01);
    }

    .draggable-media:active,
    .draggable-media.dragging {
        transform: scale(1.03);
    }
}

/* Media Type Indicators */
.video-item::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

/* Card Sizes - All cards fit within 300x300 grid cells */
.size-small {
    width: 100%;
    height: 100%;
}

.size-medium {
    width: 100%;
    height: 100%;
}

.size-large {
    width: 100%;
    height: 100%;
}

.size-wide {
    width: 100%;
    height: 100%;
}

.size-tall {
    width: 100%;
    height: 100%;
}

.size-xl {
    width: 100%;
    height: 100%;
}

.size-spotify-tall {
    width: 100%;
    height: 100%;
}

.size-spotify-wide {
    width: 100%;
    height: 100%;
}

/* Portfolio Overlay */
.portfolio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
    transform: translateY(0);
}

.portfolio-overlay h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.portfolio-overlay p {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox.active .lightbox-content {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.lightbox-close:hover {
    background: white;
}

.lightbox-image {
    width: 100%;
    height: auto;
    display: block;
}

.lightbox-video {
    width: 100%;
    height: auto;
    display: block;
    max-height: 70vh;
}

.lightbox-info {
    padding: 1.5rem;
    border-top: 1px solid #eee;
}

.lightbox-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.lightbox-client {
    color: #666;
    margin: 0;
}

/* Responsive Design */
/* Portfolio maintains desktop experience across all screen sizes */

.lightbox-content {
    max-width: 95vw;
    max-height: 95vh;
}

.lightbox-info {
    padding: 1rem;
}


/* Ensures minimum 3 columns at all screen sizes while allowing more on larger screens */

/* Loading Animation */
.portfolio-item.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

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

    100% {
        background-position: 200% 0;
    }
}

/********************
Swiper - Rooted Culture (Vertical TikTok Style)
*********************/
/* Rooted Culture Swiper Container */
section.rooted-culture .rooted-culture-swiper-container {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    overflow: visible;
    width: 400px;
}

/* TikTok icon overlay on individual slides */
section.rooted-culture .swiper-slide .tiktok-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    background: rgb(211, 23, 33, 0.6);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}

section.rooted-culture .swiper-slide .tiktok-icon i {
    color: white;
    font-size: 20px;
}

section.rooted-culture .swiper-slide .tiktok-icon:hover,
section.rooted-culture .swiper-slide .tiktok-icon:focus {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
    outline: none;
}

section.rooted-culture .swiper-slide .tiktok-icon:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.rooted-culture .rooted-culture-swiper {
    width: 400px;
    height: 740px;
    border: 15px solid white;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    pointer-events: auto;
}

.rooted-culture .rooted-culture-swiper .swiper-slide {
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rooted-culture .rooted-culture-swiper .swiper-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.rooted-culture .rooted-culture-swiper .swiper-slide-project img {
    width: 120px;
    height: auto;
    object-fit: fill;
}


/* Pagination for vertical swiper (rooted culture) */
.rooted-culture .rooted-culture-swiper .rooted-culture-swiper-pagination {
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: auto !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
}

.rooted-culture .rooted-culture-swiper .rooted-culture-swiper-pagination .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    background: rgba(85, 84, 84, 0.9);
    border-radius: 50%;
    margin: 0 !important;
    opacity: 0.7;
}

.rooted-culture .rooted-culture-swiper .rooted-culture-swiper-pagination .swiper-pagination-bullet-active {
    background: white;
}


/* Navigation arrows for rooted culture swiper */
section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-next,
section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-prev {
    position: absolute;
    right: -70px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 25;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    left: auto;
}

section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-prev {
    top: 45%;
    transform: translateY(-50%);
}

section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-next {
    top: 55%;
    transform: translateY(-50%);
}

section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-prev:hover,
section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-next:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-prev:after {
    content: '↑';
    font-size: 24px;
    color: #333;
    line-height: 1;
}

section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-next:after {
    content: '↓';
    font-size: 24px;
    color: #333;
    line-height: 1;
}

section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-next.swiper-button-disabled,
section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-prev.swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Simple Ubuntu Swiper */
.ubuntuSwiper {
    width: 100%;
    height: 400px;
    position: relative;
}

.ubuntuSwiper .swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 10px;

}

.ubuntuSwiper .swiper-slide img,
.ubuntuSwiper .swiper-slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ubuntuSwiper .swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
    border-radius: 10px;
}

.ubuntuSwiper .circle-overlay {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 150px;
    height: 150px;
    z-index: 10;
    animation: rotate-circular 20s linear infinite;
}

.ubuntuSwiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
}

.ubuntuSwiper .swiper-pagination-bullet-active {
    background: white;
}

/* Video controls */
.video-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 15;
    pointer-events: auto;
}

.volume-btn {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.volume-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 2rem;
}

.team-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    background-color: #f6f6f6;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: grayscale(100%);
    -webkit-backdrop-filter: grayscale(100%);
    backdrop-filter: grayscale(100%);


}

.team-image img:hover {
    transform: scale(1.15) rotate(-2deg) translateY(-15px);
    box-shadow: 0 12px 32px rgb(66 10 13 / 66%);
}

.team-info {
    color: var(--white);
    margin-top: 1rem;
}

.team-info h4 {
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0;
}

.team-info p {
    font-size: 0.9rem;
    font-weight: 300;
}

/********************
Swiper - Projects (Horizontal)
*********************/
.swiper-projects {
    width: 100%;
    overflow: hidden;
    margin-top: 3rem;
}

.swiper-projects .swiper-navigation-awards--arrows {
    justify-content: flex-end;
    padding-bottom: 0;
}

.swiper-projects .swiper-slide {
    height: auto;
    display: flex;
    flex-direction: column;
}

.swiper-slide-project {
    background-image: linear-gradient(181deg, rgb(0 0 0 / 20%), rgb(120 34 10 / 87%)), url(../images/slider_jahazi_banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 450px;
    padding: 2rem;
    border-radius: 13px;
    width: 100%;
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transform: scale(1) translateY(0px);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.swiper-slide-project:hover {
    transform: scale(0.98) translateY(2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.swiper-slide-project.project-2 {
    background-image: linear-gradient(181deg, rgb(0 0 0 / 20%), rgb(2 22 50 / 87%)), url(../images/madison-banner.png);
}

.swiper-slide-project.project-3 {
    background-image: linear-gradient(181deg, rgb(0 0 0 / 20%), rgb(2 22 50 / 87%)), url(../images/T4H-banner.jpg);
}

.swiper-slide-project.project-4 {
    background-image: linear-gradient(181deg, rgb(0 0 0 / 20%), rgb(2 22 50 / 87%)), url(../images/edusave.png);
}

.swiper-slide-project a {
    text-decoration: none;
}

.swiper-slide-project h3 {
    color: var(--white);
    font-family: 'Things', serif;
    font-size: 1.8rem;
    line-height: 1.1;
    font-weight: 400;
    margin-bottom: 0.3rem;
}

.swiper-slide-project a p {
    color: var(--white);
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    width: 90%;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
}


.swiper-slide-project-info {
    display: flex;
    gap: 1rem;
    justify-content: space-around;
    align-items: flex-end;
    width: 90%;
}

.swiper-slide-project-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.swiper-slide-project-stats-top,
.swiper-slide-project-stats-bottom {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-on-white);
    font-family: 'Lato', sans-serif;
}

.swiper-slide-project-stats-middle {
    font-size: 2.5rem;
    color: var(--red-text);
    font-family: 'Things', serif;
    line-height: 1.1;
    font-weight: 400;
}

/* Projects progressbar */
.swiper-pagination-projects.swiper-pagination-progressbar {
    background: rgba(255, 255, 255, 0.3);
    height: 6px;
    border-radius: 3px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    width: auto;
    z-index: 10;
}

.swiper-pagination-projects .swiper-pagination-progressbar-fill {
    background: var(--red-bg);
    border-radius: 3px;
    transition: transform 0.3s ease;
}

.case-study-hero--logo {
    width: 100%;
    height: 200px;
}

/*****************************
Accordion - Simple Dark Red Active State
******************************/
.accordion-item {
    background-color: var(--red-bg);
    margin-bottom: 8px;
    border-radius: 12px;
    border: none;
    border-bottom: 1px solid var(--white);
    overflow: hidden;
}

/* Dark red on hover and active */
.accordion-item:hover,
.accordion-item:has(.accordion-collapse.show),
.accordion-item.active {
    background-color: var(--dark-red);
}

.accordion-button {
    background-color: transparent;
    color: var(--white);
    border: none;
    font-family: 'Things', sans-serif;
    font-size: 1.8rem;
    font-weight: normal;
    padding: 1.5rem 2rem;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-button:not(.collapsed) {
    color: var(--white);
    background-color: transparent;
    box-shadow: none;
}

.accordion-collapse {
    height: 0;
    overflow: hidden;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-collapse.show {
    overflow: visible;
}

.accordion-body {
    color: var(--text-on-red);
    padding: 0 2rem 2rem 2rem;
}

.accordion-body p {
    width: 80%;
    margin-bottom: 1rem;
}

/* Arrow rotation */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after,
.accordion-item.active .accordion-button::after {
    transform: rotate(-180deg);
}

/* Ensure arrows stay white on touch/active states */
.accordion-button:active::after,
.accordion-button:focus::after,
.accordion-button:hover::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .accordion-button {
        font-size: 1.4rem;
        padding: 1.2rem 1.5rem;
    }

    .accordion-body {
        padding: 0 1.5rem 1.5rem 1.5rem;
    }

    .accordion-body p {
        width: 100%;
    }
}

.africa-map-container {
    width: 100%;
    max-width: 750px;
    margin: 0rem auto;
    border-radius: 13px;
    overflow: hidden;
    position: relative;

}

/* Add to your existing CSS */

/* SVG Map Container */
#africamap {
    width: 100%;
    height: auto;
    border-radius: 13px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Add this to your styles.css - update the country image container */

/* Country Image Container */
/* .country-image-container {

    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: all 0.3s ease;
    opacity: 0.2;
    object-position: 50% 75%;

} */

.country-image-container.show {
    display: flex !important;
    pointer-events: none;
}

.country-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.8s ease, transform 0.8s ease;
    position: absolute;
    opacity: 0.5 !important;
    top: 0;
    align-items: center;
    justify-content: center;
    z-index: -15;
    object-position: 50% 100%;
}

/* .country-image-container:hover img {
    transform: scale(1.05);
} */

.country-image-container {
    display: block;
}

/* Reduce tooltip z-index so other sections appear above it */
.country-tooltip {
    z-index: 100 !important;
}

/********************
Responsive
*********************/
@media (max-width: 768px) {

    section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-next,
    section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-prev {
        right: -50px;
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-next:after,
    section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-prev:after {
        font-size: 18px;
    }

    /* Mobile TikTok icon adjustments */
    section.rooted-culture .swiper-slide .tiktok-icon {
        top: 20px;
        right: 20px;
        width: 35px;
        height: 35px;
    }

    section.rooted-culture .swiper-slide .tiktok-icon i {
        font-size: 18px;
    }

    .swiper-pagination-projects.swiper-pagination-progressbar {
        bottom: 15px;
        left: 15px;
        right: 15px;
        height: 5px;
    }
}

@media (max-width: 480px) {
    #africamap {
        height: 300px;
    }
}

/* Advanced transition states */
.hero-images.exiting {
    opacity: 0;
    transform: perspective(1000px) rotateY(-15deg) translateZ(-50px) scale(0.9);
    transition: all 0.4s ease-out;
}

.hero-images.exiting img {
    transform: scale(0.7) rotate(340deg) translateY(30px);
    opacity: 0;
    filter: blur(5px) brightness(0.5);
    transition: all 0.4s ease-out;
    animation: imageSlideIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;


}

.hero-images.entering {
    animation: slideInRotate 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}


@keyframes slideInRotate {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateY(25deg) translateZ(-80px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg) translateZ(0px) scale(1);
    }
}

@keyframes imageSlideIn {
    0% {
        transform: scale(0.6) rotate(320deg);
        opacity: 0;
        filter: blur(8px) brightness(0.3);
    }

    50% {
        transform: scale(1.05) rotate(350deg);
        filter: blur(2px) brightness(0.8);
    }

    100% {
        transform: scale(1) rotate(353deg);
        opacity: 1;
        filter: blur(0) brightness(1);
    }
}

.clients-home img:hover {
    filter: grayscale(0%);
}

/********************
Culture Section Spotify Iframe Styling - Fixed version */
.culture-card {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    background-color: #f8f8f8;
    /* min-height: 550px; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: perspective(850px) rotateX(0deg) rotateY(-20deg) rotateZ(0deg);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    padding: 1.5rem 1.5rem 2rem 1.5rem;
    position: relative;
    transform-style: preserve-3d;
    cursor: pointer;
}

.culture-card:nth-child(1) {
    transform: perspective(850px) rotateX(0deg) rotateY(-20deg) rotateZ(0deg);
}

.culture-card:nth-child(2) {
    transform: perspective(850px) rotateX(0deg) rotateY(-20deg) rotateZ(0deg);
}

.culture-card:nth-child(3) {
    transform: perspective(850px) rotateX(0deg) rotateY(-20deg) rotateZ(0deg);
}

/* Fixed hover effect - removed !important */
.culture-cards .culture-card:hover {
    transform: perspective(850px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.08) translateY(-15px);
    box-shadow: 0 30px 60px rgba(235, 27, 36, 0.35);
    z-index: 10;
    background-color: #ffffff;
    animation-play-state: paused;
}

/* Fixed Spotify iframe styling */
.culture-card iframe {
    border-radius: 15px;
    transform: perspective(400px) rotateX(0deg) rotateY(2deg);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
    height: 450px;
    border: none;
    transform-style: preserve-3d;
    flex-shrink: 0;
    flex-grow: 1;
}

.culture-cards .culture-card:hover iframe {
    transform: perspective(400px) rotateX(0deg) rotateY(0deg) scale(1.02);
}

/* Fixed content area styling */
.culture-card-content {
    padding: 1rem 0.5rem 0rem;
    transform: perspective(400px) rotateX(0deg) rotateY(1deg);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 70px;
    transform-style: preserve-3d;
}

.culture-cards .culture-card:hover .culture-card-content {
    transform: perspective(400px) rotateX(0deg) rotateY(0deg) scale(1.02);
}

.culture-card-content h6 {
    font-size: 1.1rem;
    color: var(--red-text);
    font-weight: 700;
    margin-bottom: 0.4rem;
    font-family: 'Lato', sans-serif;
    line-height: 1.2;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.culture-card-content p {
    font-size: 0.85rem;
    color: var(--text-on-white);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    opacity: 0.8;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.culture-cards .culture-card:hover .culture-card-content h6 {
    color: var(--red-text);
    transform: translateY(-2px);
}

.culture-cards .culture-card:hover .culture-card-content p {
    opacity: 1;
    transform: translateY(-1px);
}

.culture-card-content a {
    color: var(--red-text);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.culture-card-content a:hover {
    text-decoration: underline;
    transform: translateX(5px) scale(1.05);
    color: #d31720;
}

/* Enhanced 3D effects */
.culture-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-radius: 20px;
    pointer-events: none;
    transform: translateZ(1px);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
}

.culture-cards .culture-card:hover::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    opacity: 1;
}

.culture-card::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateZ(-5px);
    width: 70%;
    height: 15px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    filter: blur(6px);
    z-index: -1;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.culture-cards .culture-card:hover::after {
    width: 90%;
    height: 25px;
    background: radial-gradient(ellipse, rgba(235, 27, 36, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(12px);
    transform: translateX(-50%) translateZ(-10px);
}

/* Updated responsive adjustments - removed manual margins */
@media (max-width: 992px) {
    .culture-cards {
        gap: 2rem;
        /* Slightly smaller gap on medium screens */
    }

    .culture-card {
        height: 420px;
        padding: 1.2rem 1.2rem 1.5rem 1.2rem;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .culture-card:nth-child(1) {
        transform: perspective(700px) rotateX(0deg) rotateY(-15deg) rotateZ(0deg);
    }

    .culture-card:nth-child(2) {
        transform: perspective(700px) rotateX(0deg) rotateY(-15deg) rotateZ(0deg);
    }

    .culture-card:nth-child(3) {
        transform: perspective(700px) rotateX(0deg) rotateY(-15deg) rotateZ(0deg);
    }

    .culture-cards .culture-card:hover {
        transform: perspective(700px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.06) translateY(-12px);
    }

    .culture-card iframe,
    .culture-card-content,
    .culture-card-content h6,
    .culture-card-content p,
    .culture-card-content a,
    .culture-card::before,
    .culture-card::after {
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

@media (max-width: 768px) {
    .culture-cards {
        gap: 2rem;
        /* Consistent spacing on mobile */
        grid-template-columns: 1fr;
        /* Single column on mobile */
    }

    .culture-card {
        height: 390px;
        padding: 1rem 1rem 1.2rem 1rem;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .culture-card:nth-child(1) {
        transform: perspective(600px) rotateX(0deg) rotateY(-12deg) rotateZ(0deg);
    }

    .culture-card:nth-child(2) {
        transform: perspective(600px) rotateX(0deg) rotateY(-12deg) rotateZ(0deg);
    }

    .culture-card:nth-child(3) {
        transform: perspective(600px) rotateX(0deg) rotateY(-12deg) rotateZ(0deg);
    }

    .culture-card-content {
        min-height: 55px;
    }

    .culture-cards .culture-card:hover {
        transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.04) translateY(-10px);
    }

    .culture-card iframe,
    .culture-card-content,
    .culture-card-content h6,
    .culture-card-content p,
    .culture-card-content a,
    .culture-card::before,
    .culture-card::after {
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

@media (max-width: 480px) {
    .culture-cards {
        gap: 1.5rem;
        /* Slightly tighter spacing on small screens */
    }

    .culture-card {
        height: 360px;
        padding: 0.8rem 0.8rem 1rem 0.8rem;
        transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .culture-card:nth-child(1) {
        transform: perspective(500px) rotateX(0deg) rotateY(-8deg) rotateZ(0deg);
    }

    .culture-card:nth-child(2) {
        transform: perspective(500px) rotateX(0deg) rotateY(-8deg) rotateZ(0deg);
    }

    .culture-card:nth-child(3) {
        transform: perspective(500px) rotateX(0deg) rotateY(-8deg) rotateZ(0deg);
    }

    .culture-card-content {
        min-height: 45px;
        padding: 0.8rem 0.5rem 0rem;
    }

    .culture-card-content h6 {
        font-size: 1rem;
        margin-bottom: 0.3rem;
    }

    .culture-card-content p {
        font-size: 0.8rem;
        margin-bottom: 0.4rem;
    }

    .culture-card-content a {
        font-size: 0.8rem;
    }

    .culture-cards .culture-card:hover {
        transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1) translateY(-8px);
    }

    .culture-card iframe,
    .culture-card-content,
    .culture-card-content h6,
    .culture-card-content p,
    .culture-card-content a,
    .culture-card::before,
    .culture-card::after {
        transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

/* Pause animations on hover */
.culture-card:hover {
    animation-play-state: paused;
}

/********************
Work Page Styling
*********************/

/* Work Hero Section - Centered Layout */
.work-hero {
    background: var(--red-bg);
    color: white;
    position: relative;
}

.work-hero-content,
.hero-horizontal-content {
    text-align: left;
}

.hero-section-2.blog-single-hero .hero-horizontal-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.work-hero-content h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 2rem;
    color: var(--white);

}

.work-hero-content p {
    font-size: 1.2rem;
    line-height: 1.6;

}

/* Video Container - Centered */
.work-video-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.video-thumbnail {
    width: 300px;
    height: 180px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.video-thumbnail:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.play-button {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red-text);
    font-size: 1.5rem;
}

/* Featured Case Studies */
.featured-cases {
    background: #f8f9fa;
}

.case-study-filters {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    margin-top: 2rem;
    overflow-x: auto;
}

/* Duplicate filter-btn styles removed - using the first definition above */

/* Case Study Cards */
.case-study-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.case-study-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.case-study-image {
    height: 200px;
    overflow: hidden;
    background: #e9ecef;
}

.case-study-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.case-study-card:hover .case-study-image img {
    transform: scale(1.1);
}

.case-study-content {
    padding: 1.5rem;
}

.case-study-content h4 {
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.case-study-content p {
    color: #6c757d;
    margin-bottom: 1rem;
    line-height: 1.5;
    font-size: 0.9rem;
}

.learn-more-btn {
    color: var(--red-text);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.learn-more-btn:hover {
    color: #d31720;
    transform: translateX(5px);
}

/* Awards Section */
.world-attention {
    background: white;
}

.swiper-navigation {
    display: flex;
    gap: 0.5rem;
}

/* Add to your styles.css */
.awards-grid,
.case-study-content--slider {
    position: relative;
    overflow-x: hidden;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.swiper-container {
    width: 100%;
}

.swiper-wrapper {
    width: 100%;
}

.swiper-button-prev-awards,
.swiper-button-next-awards {
    width: 40px;
    height: 40px;
    border: 2px solid #e9ecef;
    border-radius: 50%;
    background: white;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swiper-button-prev-awards:hover,
.swiper-button-next-awards:hover {
    border-color: var(--red-bg);
    color: var(--red-bg);
}

/* Projects swiper navigation - same styling as awards */
.swiper-button-prev-projects,
.swiper-button-next-projects {
    width: 40px;
    height: 40px;
    border: 2px solid #e9ecef;
    border-radius: 50%;
    background: white;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swiper-button-prev-projects:hover,
.swiper-button-next-projects:hover {
    border-color: var(--red-bg);
    color: var(--red-bg);
}

.swiper-navigation-awards--arrows {
    z-index: 10;
    display: flex;
    gap: 15px;
    padding: 12px 16px;
}

.swiper-navigation-awards {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
}

.award-card p {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--text-on-white);
}

.award-card p span:nth-child(1) {
    font-size: 3em;
    color: var(--red-text);
    margin-top: 0.3rem;
    font-weight: 600;
}


/* Removed duplicate .swiper-button-prev-awards, .swiper-button-next-awards selector block to fix error */

.awards-swiper {
    margin-top: 2rem;
}

.awards-grid .award-card {
    background: #f4f4f4;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    width: 100%;
}

.award-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);
}

.award-image {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f4;
    border-radius: 10px;
}

.award-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.award-card h4 {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin: 0;
    font-weight: 600;
}

.case-study-content--slider .award-card {
    padding: 1rem;
}

.case-study-content--slider--card {
    transition: all 0.3s ease;
    background: transparent;

}

.case-study-content--slider--card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3);
}

.content-card--slier--card--img {
    margin-bottom: 0;
}

/* Testimonials */
.testimonials {
    background: #f8f9fa;
}

.testimonial-container {
    margin-top: 3rem;
}

.testimonial-card {
    background: white;
    padding: 1.5rem 2rem;
    border-radius: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    min-height: 215px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.testimonial-card p {
    color: var(--red-text);
    line-height: 1.6;
    margin-bottom: 0;
}

.testimonial-author {
    color: #6c757d;
    font-size: 0.9rem;
}

.testimonial-card > p {
    font-size: 1.2rem;
    color: var(--text-on-white);
}

/* CTA Section */
.cta-section {
    background: var(--red-bg);
    color: white;
    padding: 5rem 0;
}

.cta-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.cta-content p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.cta-image {
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
}

/* Services Page Styling */

/* Services Hero Section */
.services-hero {
    background: var(--red-bg);
    color: white;
    position: relative;
}

.services-hero-content {
    text-align: center;
}

.services-hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 2rem;
    color: var(--white);
}

.services-hero-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Services Overview */
.services-overview {
    background: white;
    padding: 5rem 0;
}

.services-intro h2 {
    font-size: 2rem;
    line-height: 1.4;
    color: #6c757d;
    font-weight: 400;
    font-family: 'Lato', sans-serif;
}

.highlight-text {
    color: var(--red-text);
    font-weight: 600;
}

/* Services Grid */
.services-grid {
    margin-top: 3rem;
}

.content-card {
    background-color: var(--white);
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}

.content-card--image {
    height: 230px;
    overflow: hidden;
    background: #f8f9fa;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.content-card--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-overview .content-card--image {
    background-color: var(--red-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 170px;
}

.services-overview .content-card--image img {
    height: 120px;
    object-fit: contain;
}

.content-card,
.content-card-2 {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.icon-animate {
    width: 126px;
    height: 126px;
}

.services-hero .hero-art svg {
    width: 90%;
    transform: rotate(-8deg);
}

.blog-hero .hero-art,
.contacts-hero .hero-art {
    height: 300px;
    max-width: 100%;
    overflow: clip;
}

.contacts-hero .hero-art svg,
.blog-hero .hero-art svg {
    width: 100%;
    height: 100%;
    transform: scale(2);
    transform-origin: center center;
}

.blog-hero .hero-art svg {
    transform: scale(1.4);

}

.service-single-hero-icon .icon-animate-2 {
    max-width: 350px;
    width: 100%;
    height: auto;

}

.accordion-body-content {
    display: flex;
    justify-content: space-between;
}

.accordion-body-content .icon-animate {
    width: 95px;
    height: 95px;
}

.accordion-icon {
    display: flex;
    justify-content: flex-end;
}

.df-value-icon {
    width: 36px;
    height: 36px;
}

.services-home-container .grid-2-col {
    justify-content: space-between;
}

.content-card--image img,
.content-card-2--image img {
    transition: transform 0.3s ease;
}

.content-card--image img:hover,
.content-card-2--image img:hover {
    transform: scale(1.1);
}

.content-card--text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.content-card--text--header h4 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.content-card--text--header p {
    font-size: 0.9rem;
}

.content-card-2 {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    max-height: 100%;
    height: 450px;
    overflow: hidden;
    border-radius: 10px;
}

.content-card-2--image {
    overflow: hidden;
    width: 100%;
    height: 100%;
}


.content-card-2--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-card-2--text {
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--white);
    width: 100%;
    height: 100%;
}

.content-card-2--text--header h4 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--red-text);
}

.content-card-2--text--header p {
    font-size: 1rem;
}

.content-card-2:hover,
.content-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.service-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f3f4;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.service-image {
    height: 200px;
    overflow: hidden;
    background: #f8f9fa;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.service-content {
    padding: 2rem;
}

.service-content h4 {
    font-size: 1.125rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.service-content p {
    color: #6c757d;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 1rem;
}

.service-content .learn-more-btn {
    color: var(--red-text);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.service-content .learn-more-btn:hover {
    color: #d31720;
    transform: translateX(5px);
}

/* Services Action Section */
.services-action,
.mad-scientists {
    background: #f8f9fa;
    padding: 4rem 0;
}

.action-card {
    background: #f4f4f4;
    border-radius: 20px;
    padding: 4rem 3rem;
    text-align: center;
}

.action-content h3 {
    font-size: 2.2rem;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    font-weight: 600;
    font-family: 'Things', serif;
}

.action-content p {
    font-size: 1.1rem;
    color: #6c757d;
    margin-bottom: 2.5rem;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.action-content .btn {
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--red-bg);
    color: white;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.action-content .btn:hover {
    background: #d31720;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(235, 27, 36, 0.3);
}

/* Update existing CTA section for services */
.services-hero ~ .cta-section {
    background: var(--red-bg);
    color: white;
    padding: 5rem 0;
}

.services-hero ~ .cta-section .cta-content h2 {
    font-family: 'Things', serif;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.services-hero ~ .cta-section .cta-content p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.services-hero ~ .cta-section .cta-image {
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
}

/* About Page Styling */

/* About Hero Section */
.africa-slide {
    width: 100%;
}

.africa-slider-container img {
    max-width: 100%;
    width: 370px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* Africa Slider Styles - Full Width */
.africa-slider-container {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    border-radius: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.africa-slider {
    display: flex;
    width: 200vw;
    /* Double viewport width for seamless loop */
    animation: slideShow 20s linear infinite;
    transition: none;
    gap: 2rem;
}

@keyframes slideShow {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50vw);
        /* Move half way for seamless loop */
    }
}


/* ===== BROWSER FALLBACKS ===== */

/* 1. text-underline-offset fallback for IE/older browsers */
@supports not (text-underline-offset: 4px) {
    .navbar-nav .nav-link.active {
        border-bottom: 2px wavy var(--white);
        text-decoration: none;
        padding-bottom: 2px;
    }
}

/* 2. backdrop-filter fallbacks */
@supports not (backdrop-filter: blur(10px)) {

    .zoom-indicator,
    .zoom-hint,
    .zoom-btn {
        background: rgba(0, 0, 0, 0.95) !important;
    }

    .zoom-fit-btn {
        background: rgba(34, 139, 34, 0.95) !important;
    }

    .zoom-reset-btn {
        background: rgba(235, 27, 36, 0.95) !important;
    }

    .zoom-hint {
        background: rgba(235, 27, 36, 0.95) !important;
    }
}

/* 3. CSS Grid fallback for very old browsers */
@supports not (display: grid) {
    .portfolio-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }
}

/* 4. Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/********************************************
Media Queries
*********************************************/
/* Hero Elements - Viewport-Based Positioning System */
:root {
    /* Base viewport positioning - easy to adjust for dramatic effects */
    --hero-left-base: 10vw;
    /* Distance from left viewport edge */
    --hero-right-base: 6vw;
    /* Distance from right viewport edge */
    --hero-left-offset: 0px;
    /* Fine-tuning left elements */
    --hero-right-offset: 0px;
    /* Fine-tuning right elements */

    /* Minimum safe distances on small screens */
    --hero-min-edge: 15px;
    --hero-max-distance: 300px;
}


/* 1200 Min */
@media screen and (min-width: 1200px) {
    .btn-hidden {
        display: none;
    }

}


/* Navbar fix for exact 1200px breakpoint */
@media screen and (min-width: 1200px) {
    .navbar-collapse {
        display: flex !important;
    }

    .navbar-toggler {
        display: none !important;
    }
}

@media screen and (max-width: 1199px) {
    .navbar-collapse {
        display: none !important;
        opacity: 0;
        transform: translateY(-20px);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .navbar-collapse.show {
        display: block !important;
        opacity: 1;
        transform: translateY(0);
    }

    .navbar-collapse.collapsing {
        display: block !important;
        transform: translateY(-10px);
    }

    .navbar-toggler {
        display: block !important;
    }
}

/* 1200px Max */
@media screen and (max-width: 1199px) {

    /* Hero Elements - Viewport-Based Positioning System */
    :root {
        /* Base viewport positioning - easy to adjust for dramatic effects */
        --hero-left-base: 7vw;
        /* Distance from left viewport edge */
        --hero-right-base: 7vw;
        /* Distance from right viewport edge */
        --hero-left-offset: 0px;
        /* Fine-tuning left elements */
        --hero-right-offset: 0px;
        /* Fine-tuning right elements */

        /* Minimum safe distances on small screens */
        --hero-min-edge: 15px;
        --hero-max-distance: 300px;
    }

    .orbit-text {
        right: 20px;
    }

    .hero-section.hero-main .hero-content h1 {
        gap: 1.5rem;
    }

    .culture-hero .grid-2-col {
        grid-template-columns: auto;
    }


    .hero-section-2.culture-hero .hero-horizontal-content {
        margin-bottom: 2rem;
    }

    .hero-section-2.culture-hero .hero-horizontal-content h1 {
        text-align: center;
        max-width: 30ch;
        margin: auto;
    }

    .hero-section-2.culture-hero .hero-horizontal-content--img {
        justify-content: center;
    }

    .section-h2,
    footer h2.section-h2 {
        font-size: 3.375rem;
    }

    section.projects-home .grid-2-col,
    section.services-home .grid-2-col {
        align-items: flex-start;
    }

    section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-next,
    section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-prev {
        display: none;
    }


    .navbar {
        position: absolute;
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 2rem);
        max-width: 1200px;
        z-index: 999999;
        padding: 2rem 1rem 1rem;
        border-radius: 13px;
        margin: auto;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .hero-content {
        margin-top: 7rem;
    }

    .hero-section-2 .hero-content {
        margin-top: 7rem !important;
    }

    .hero-section-2.about-hero .hero-content,
    .hero-section-2.services-hero .hero-content,
    .hero-section-2.contacts-hero .hero-content,
    .hero-section-2.blog-hero .hero-content {
        margin-top: 4rem !important;
    }

    /* .hero-content .grid-2-col {
        gap: 0;
    } */
    .navbar-collapse {
        border-top: 0.5px solid white;
        margin-top: 1.5rem;
    }

    .navbar-collapse ul {
        display: flex;
        flex-direction: initial;
        flex-wrap: wrap;
        gap: 1.5rem 3rem;
        align-items: baseline;
        margin-top: 2rem;

    }

    /* Ensure navbar stays above all hero elements on mobile */
    .navbar-collapse,
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        z-index: 99999 !important;
    }

    /* Force hero elements below navbar on mobile */
    .video-arrow-group.draggable-media,
    .hero-images .video-arrow-group.draggable-media,
    .human-images .video-arrow-group.draggable-media,
    .think-images.active,
    .create-images.active,
    .human-images.active,
    .hero-section .draggable-media {
        z-index: 1 !important;
    }

    /* Hero section itself should not create stacking context issues */
    .navbar-toggler {
        border-color: var(--white);
    }

    .btn-hidden-2 {
        display: none;
    }

    .swiper-project {
        margin-top: 0;
    }

    .swiper-projects {
        margin-top: 0;
    }

    .footer-circular img {
        width: 220px;
    }

    .hero-section h1,
    .hero-section-2 .hero-content h1.hero-text-small {
        font-size: 3rem;
    }


    .we-think,
    .we-create,
    .we-human {
        font-size: 4.5rem;
    }

    .hero-images img {
        width: 140px;
        height: 100px;
    }

    .hero-content p {
        width: 50%;
    }

    .hero-section-2 .hero-content p {
        width: 100%;
    }

    video.hero-image-3 {
        width: 200px;
        height: 120px;
    }

    .hero-image-2 {
        top: clamp(500px, 60vh, 500px);
    }

    .hero-image-4 {
        top: clamp(530px, 75vh, 530px);
    }

    h2.statement-paragraph,
    .service-single-content--list h2,
    .service-single-content-case-studies h2 {
        font-size: 1.3rem;
    }

    .video-arrow-group video.hero-image-3 {
        width: 200px;
        height: 120px;
    }

    .video-arrow-group .hero-arrow {
        width: 60px;
        top: 145px;
    }

    .hero-section-2.blog-single-hero .hero-horizontal-content h1 {

        margin-top: calc(2vh + 1rem);
    }

    section.single-blog {
        padding-top: 6rem;
    }
}


/* 992 max */
@media screen and (max-width: 992px) {

    /* Hero Elements - Viewport-Based Positioning System */
    :root {
        /* Base viewport positioning - easy to adjust for dramatic effects */
        --hero-left-base: 0.5vw;
        --hero-right-base: 0.5vw;
        --hero-left-offset: 10px;
        --hero-right-offset: 10px;

        /* Minimum safe distances on small screens */
        --hero-min-edge: 15px;
        --hero-max-distance: 300px;
    }

    .hero-content p {
        width: 70%;
    }

    .hero-images img {
        width: 130px;
        height: 100px;
    }

    .video-arrow-group video.hero-image-3 {
        width: 185px;
        height: 120px;
    }


    section {
        padding-bottom: 5rem;
    }

    .grid-2-col {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-section-2.about-hero .grid-2-col,
    .hero-section-2.services-hero .grid-2-col,
    .hero-section-2.contacts-hero .grid-2-col,
    .service-single-hero .grid-2-col,
    .blog-hero .grid-2-col {
        gap: 0;
    }

    .section-h2 {
        font-size: 3.375rem;
    }

    section.hero-section,
    section.rooted-culture,
    section.built-in-africa,
    section,
    .country-image-container img {
        position: relative;
    }

    .built-in-africa {
        padding-bottom: 2px;
    }

    .country-image-container.show {
        height: 230px;
    }

    .country-image-container img {
        z-index: 0;
    }

    .rooted-culture .grid-2-col,
    .ubuntu .grid-2-col {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .rooted-culture .rooted-culture-swiper-container {
        order: 2;
    }

    section.rooted-culture .rooted-culture-swiper {
        max-width: 100%;
        margin-left: 0;
        margin-top: 2rem;
    }

    .swiper-slide-project-info {
        justify-content: space-between;
    }

    .projects-home .grid-2-col,
    .services-home .grid-2-col,
    .culture-home .grid-2-col {
        gap: 0;
    }

    .services-home {
        padding-top: 0;
    }

    .projects-home .section-h2,
    .rooted-culture h2 {
        max-width: 100%
    }

    footer .grid-2-col {
        grid-template-columns: auto auto;
    }

    .footer-circular img {
        width: 180px;
    }

    .built-in-africa-content p {
        width: 100%;
    }

    .content-card-2 {
        flex-direction: column;
    }

    .accordion-body p {
        width: 100%;
    }

    .accordion-header button {
        font-size: 1.4rem;
    }

    .trusted-logos .grid-2-col {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .hero-section-2.case-study-hero .hero-horizontal-content--img {
        margin-top: 2rem;
    }

    .work-hero-video {
        justify-content: flex-start;
    }

    .clients-home {
        grid-template-columns: repeat(auto-fit, 90px);
        gap: 4rem 3rem;
    }

}

@media screen and (max-width: 991px) {

    section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-next,
    section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-prev {
        display: flex;
    }
}

/* 768px min */
@media screen and (min-width: 768px) {
    .hero-video-mobile {
        display: none;
    }
}

/* 768px max */
@media screen and (max-width: 768px) {

    section.hero-section,
    section.rooted-culture,
    section.built-in-africa,
    section {
        overflow-y: visible;
    }

    /* Hide desktop hero images on mobile */
    .hero-images,
    .hero-image-3,
    .hero-arrow {
        display: none;
    }

    /* Mobile hero images container */
    .mobile-hero-images {
        display: flex;
        max-width: 100%;
        overflow: scroll;
        width: 100%;
        position: relative;
        height: 150px;
        margin: 3rem 0 2rem 0;
    }

    /* Hide all mobile image sections by default */
    .mobile-hero-section {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        gap: 1rem;
        height: 100%;
        min-width: 120%;
        flex-shrink: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateX(20px);
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Show active mobile image sections */
    .mobile-hero-section.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    /* Style mobile hero images */
    .mobile-hero-img {
        position: relative;
        max-width: 200px;
        width: 100%;
        height: 100%;
        flex: 0 0 200px;
        opacity: 0;
        transform: translateY(15px);
        transition: opacity 0.4s ease-out, transform 0.4s ease-out;
        transition-delay: 0.1s;
    }

    /* Animate images when parent section becomes active */
    .mobile-hero-section.active .mobile-hero-img {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stagger the image animations */
    .mobile-hero-section.active .mobile-hero-img:nth-child(1) {
        transition-delay: 0.2s;
    }

    .mobile-hero-section.active .mobile-hero-img:nth-child(2) {
        transition-delay: 0.3s;
    }

    .mobile-hero-section.active .mobile-hero-img:nth-child(3) {
        transition-delay: 0.4s;
    }

    /* Additional mobile hero image properties */
    .mobile-hero-img {
        object-fit: cover;
        border-radius: 8px;
        cursor: pointer;
        pointer-events: auto;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }


    .hero-content p {
        width: 100%;
    }

    .hero-section h1 {
        font-size: 4rem;
    }

    .hero-section-2 .hero-content h1.hero-text-small {
        font-size: 2.5rem;
    }


    .culture-hero .hero-horizontal-content--img img {
        width: 200px;
        height: 250px;
    }

    .section-h2,
    footer h2.section-h2 {
        font-size: 2.8rem;
    }

    footer h2.section-h2,
    h2.section-h2.heading-small {
        font-size: 2.5rem;
    }

    section.rooted-culture .rooted-culture-swiper-container {
        width: 400px;
    }

    .footer-circular img {
        width: 150px;
    }

    section.rooted-culture .rooted-culture-swiper {
        height: 640px
    }

    .portfolio-viewport {
        width: 85%;
    }

    h2.statement-paragraph,
    .service-single-content--list h2,
    .service-single-content-case-studies h2 {
        font-size: 1rem;
    }

    .hero-video-mobile {
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 1;
    }

    .hero-image-3.work-hero-video {
        display: block;
    }

    .work-hero-video {
        justify-content: center;
    }

    .hero-video-mobile video.hero-image-3,
    .hero-image-3.work-hero-video {
        display: block;
        position: relative;
        top: 4.5rem;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 500px;
        width: 95%;
        height: 100%;
        object-fit: cover;
        pointer-events: auto;
        opacity: 1;
        border-radius: 13px;
        /*transform: scale(1) rotate(0deg);*/
        filter: none;
        transition: transform 0.2s cubic-bezier(.68, -0.55, .27, 1.55);
        border: 1.5px solid var(--white);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    }

    .hero-image-3.work-hero-video {
        /*transform: rotate(-4deg);*/
        position: relative;
        top: 1rem;
    }

    .featured-cases {
        padding-top: 5rem !important;
    }

    .orbit-text {
        display: none;
    }

    .contact-details p {
        font-size: 1rem;
    }

    div.single-blog--content {
        max-width: 100%;
    }

    .hero-section-2.work-hero .grid-2-col {
        gap: 0;
    }

    section.single-blog {
        padding-top: 6rem;
    }

    .accordion-body-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .accordion-body-content .icon-animate {
        width: 70px;
        height: 70px;
    }

    .accordion-body {
        overflow: scroll;
        padding: 1rem;
    }

    .flush-collapseOne {
        height: auto;
        overflow: scroll;
    }

    .accordion-button {
        padding: 1rem;
    }
    .rooted-culture .bg-red
    {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

}

/* 544px max */
@media screen and (max-width: 544px) {

    .navbar button.btn-white,
    .navbar-nav .btn-hidden {
        width: 100%;
    }
}

/* 500px max */
@media screen and (max-width: 500px) {

    section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-next,
    section.rooted-culture .rooted-culture-swiper-container .rooted-culture-swiper-button-prev {
        display: none;
    }

    section.rooted-culture .rooted-culture-swiper-container {
        width: auto;
    }

    .rooted-culture .rooted-culture-swiper {
        width: 360px;
    }

    /* Smaller mobile TikTok icon positioning */
    section.rooted-culture .swiper-slide .tiktok-icon {
        top: 15px;
        right: 15px;
        width: 32px;
        height: 32px;
    }

    section.rooted-culture .swiper-slide .tiktok-icon i {
        font-size: 16px;
    }

    footer .grid-2-col {
        grid-template-columns: 1fr;
    }

    section.rooted-culture .swiper {
        height: 500px
    }

    .swiper-slide-project-stats-middle {
        font-size: 1.8rem;
    }

    .swiper-slide-project-stats-top,
    .swiper-slide-project-stats-bottom {
        font-size: 0.8rem;
    }

    .footer-circular {
        position: absolute;
        top: 110px;
        right: 10px;
    }

    .swiper-navigation-awards {
        flex-direction: column;
        align-items: flex-end;
        gap: 1rem;
    }

    .awards-swiper {
        margin: 1rem;
    }

    .trusted-logos .grid-2-col {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    .country-image-container.show {
        height: 130px;
    }


}

/* 410 max */
@media screen and (max-width: 410px) {
    .rooted-culture .swiper {
        width: 310px;
    }

}

@media screen and (max-width: 370px) {
    section.rooted-culture .rooted-culture-swiper-container {
        width: auto;
    }

    .rooted-culture .rooted-culture-swiper {
        width: 280px;
    }

    /* Very small mobile TikTok icon positioning */
    section.rooted-culture .swiper-slide .tiktok-icon {
        top: 15px;
        right: 15px;
        width: 30px;
        height: 30px;
    }

    section.rooted-culture .swiper-slide .tiktok-icon i {
        font-size: 14px;
    }
}


/* Hero Images - Viewport-Based Positioning */
.hero-image-1,
.hero-image-2 {
    left: clamp(calc(var(--hero-min-edge) + var(--hero-left-offset)),
    calc(var(--hero-left-base) + var(--hero-left-offset)),
    calc(var(--hero-max-distance) + var(--hero-left-offset)));
}

.hero-image-4,
video.hero-image-3,
.video-arrow-group {
    right: clamp(calc(var(--hero-min-edge) + var(--hero-right-offset)),
    calc(var(--hero-right-base) + var(--hero-right-offset)),
    calc(var(--hero-max-distance) + var(--hero-right-offset)));
}

/* Hero Arrow - Tied to right elements with offset */
.hero-arrow {
    position: absolute;
    top: clamp(335px, 34vh, 290px);
    object-fit: contain;
    width: clamp(60px, 8vw, 90px);
    right: clamp(calc(var(--hero-min-edge) + 25px + var(--hero-right-offset)),
    calc(var(--hero-right-base) + 5vw + var(--hero-right-offset)),
    calc(var(--hero-max-distance) + 50px + var(--hero-right-offset)));
    transform: rotate(5deg);
    animation: gentlePoint 3s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
}

/* Responsive Adjustments - Viewport-Based */
@media (max-width: 768px) {
    :root {
        --hero-left-base: 5vw;
        /* Closer to edge on tablets */
        --hero-right-base: 8vw;
        /* Tighter spacing */
        --hero-max-distance: 200px;
        /* Reduce max distance */
    }

    .hero-image-1,
    .hero-image-2,
    .hero-image-4 {
        width: clamp(120px, 25vw, 180px);
        height: clamp(90px, 20vw, 140px);
    }

    video.hero-image-3 {
        width: clamp(150px, 30vw, 200px);
        height: clamp(100px, 20vw, 130px);
        top: clamp(160px, 25vh, 180px);
    }

    /* Video-arrow-group responsive sizing for medium screens */
    .video-arrow-group video.hero-image-3 {
        width: clamp(150px, 30vw, 200px);
        height: clamp(100px, 20vw, 130px);
    }

    .video-arrow-group .hero-arrow {
        top: clamp(110px, 22vw, 140px);
        /* Adjusted to be below the medium video */
        left: clamp(40px, 8vw, 50px);
        width: clamp(45px, 7vw, 70px);
    }

    .hero-arrow {
        top: clamp(240px, 30vh, 270px);
        width: clamp(55px, 7vw, 80px);
    }
}

@media (max-width: 480px) {
    :root {
        --hero-left-base: 3vw;
        /* Very close to edge on mobile */
        --hero-right-base: 5vw;
        /* Minimal spacing */
        --hero-max-distance: 120px;
        /* Compact layout */
    }

    .hero-image-1,
    .hero-image-2,
    .hero-image-4 {
        width: clamp(100px, 20vw, 150px);
        height: clamp(75px, 15vw, 120px);
    }

    video.hero-image-3 {
        width: clamp(130px, 25vw, 170px);
        height: clamp(85px, 16vw, 110px);
        top: clamp(140px, 22vh, 160px);
    }

    /* Video-arrow-group responsive sizing */
    .video-arrow-group video.hero-image-3 {
        width: clamp(130px, 25vw, 170px);
        height: clamp(85px, 16vw, 110px);
    }

    .video-arrow-group .hero-arrow {
        top: clamp(95px, 18vw, 120px);
        /* Adjusted to be below the smaller video */
        left: clamp(30px, 6vw, 40px);
        width: clamp(40px, 6vw, 60px);
    }

    .hero-arrow {
        top: clamp(200px, 26vh, 230px);
        width: clamp(45px, 5vw, 60px);
    }
}

/* CULTURE SECTION FIX - Enhanced 3D Experience */
.culture-cards {
    display: flex !important;
    flex-direction: row !important;
    gap: 3rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    padding: 4rem 3rem !important;
    -webkit-overflow-scrolling: touch !important;
    cursor: grab !important;
    pointer-events: auto !important;
    width: 100% !important;
    transform: none !important;
    perspective: 1200px !important;
    perspective-origin: center center !important;
}

.culture-cards .culture-card {
    flex: 0 0 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    background: white !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
    transform: perspective(600px) rotateY(-15deg) rotateX(3deg) translateZ(-20px) !important;
    transform-style: preserve-3d !important;
    transform-origin: center center !important;
    position: relative !important;
}

.culture-cards .culture-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%) !important;
    opacity: 0 !important;
    transition: opacity 0.6s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.culture-cards .culture-card:hover {
    transform: perspective(600px) rotateY(0deg) rotateX(0deg) translateY(-12px) translateZ(40px) scale(1.05) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    z-index: 10 !important;
}

.culture-cards .culture-card:hover::before {
    opacity: 1 !important;
}

.culture-card iframe {
    width: 100% !important;
    height: 352px !important;
    border: none !important;
    border-radius: 16px !important;
    transform: translateZ(10px) !important;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.culture-cards .culture-card:hover iframe {
    transform: translateZ(20px) scale(1.02) !important;
}

.culture-card-content {
    transform: translateZ(15px) !important;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.culture-cards .culture-card:hover .culture-card-content {
    transform: translateZ(25px) !important;
}

/* Hero Video Controls - Ensure fullscreen button is always visible */
.hero-image-3::-webkit-media-controls-panel {
    display: flex !important;
}

.hero-image-3::-webkit-media-controls-fullscreen-button {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-image-3::-webkit-media-controls {
    opacity: 1 !important;
    transition: opacity 0.3s ease !important;
}

.hero-image-3:hover::-webkit-media-controls {
    opacity: 1 !important;
}

/* Firefox video controls */
.hero-image-3::-moz-video-controls {
    opacity: 1 !important;
}

/* Ensure hero video controls are always accessible */
.hero-image-3 {
    position: relative;
}

.hero-image-3::-webkit-media-controls-panel {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* FINAL DESKTOP OVERRIDE - Ensure hero images show on desktop */
@media screen and (min-width: 769px) {
    .mobile-hero-images {
        display: none !important;
    }

    .hero-images,
    .hero-image-1,
    .hero-image-2,
    .hero-image-3,
    .hero-image-4,
    .hero-arrow,
    .video-arrow-group {
        display: block !important;
        visibility: visible !important;
    }
}