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

   DIGITA - Neumorphism Design System

   Style moderne avec effet relief doux

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



:root {

    /* Couleurs Neumorphism */

    --neu-bg: #e8eef3;

    --neu-bg-dark: #d1d9e6;

    --neu-bg-light: #ffffff;



    /* Couleurs Digita Brand */

    --primary: #F89520;

    --primary-dark: #e67e00;

    --primary-light: #ffab4a;

    --primary-glow: rgba(248, 149, 32, 0.4);



    --secondary: #5D4EA9;

    --secondary-dark: #4a3d8c;

    --secondary-light: #7a6bc2;

    --secondary-glow: rgba(93, 78, 169, 0.4);



    /* Couleurs neutres */

    --dark: #2d3436;

    --gray: #636e72;

    --gray-light: #b2bec3;

    --white: #ffffff;



    /* Ombres Neumorphism */

    --neu-shadow-out: 8px 8px 16px #c8ced3, -8px -8px 16px #ffffff;

    --neu-shadow-out-sm: 4px 4px 8px #c8ced3, -4px -4px 8px #ffffff;

    --neu-shadow-out-lg: 12px 12px 24px #c8ced3, -12px -12px 24px #ffffff;

    --neu-shadow-in: inset 4px 4px 8px #c8ced3, inset -4px -4px 8px #ffffff;

    --neu-shadow-in-lg: inset 8px 8px 16px #c8ced3, inset -8px -8px 16px #ffffff;



    /* Ombres colorees */

    --neu-shadow-primary: 8px 8px 16px rgba(200, 206, 211, 0.8), -8px -8px 16px #ffffff, 0 0 20px var(--primary-glow);

    --neu-shadow-secondary: 8px 8px 16px rgba(200, 206, 211, 0.8), -8px -8px 16px #ffffff, 0 0 20px var(--secondary-glow);



    /* Radius */

    --radius-sm: 12px;

    --radius: 20px;

    --radius-lg: 30px;

    --radius-xl: 50px;

    --radius-round: 100px;



    /* Transition */

    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    --transition-fast: all 0.2s ease;



    /* Fonts */

    --font-primary: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --font-secondary: 'Inter', sans-serif;

}



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

   BASE STYLES

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



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: var(--font-primary);

    background: var(--neu-bg);

    color: var(--dark);

    line-height: 1.7;

    overflow-x: hidden;

}



h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: var(--font-primary);

    font-weight: 700;

    line-height: 1.2;

    color: var(--dark);

}



h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}



p {

    color: var(--gray);

    line-height: 1.8;

    font-size: 1.05rem;

}



a {

    text-decoration: none;

    color: var(--secondary);

    transition: var(--transition);

}



section {

    padding: 6rem 0;

}



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

   NEUMORPHIC COMPONENTS

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



/* Neumorphic Card - Relief */

.neu-card {

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-out);

    padding: 2rem;

    transition: var(--transition);

}



.neu-card:hover {

    box-shadow: var(--neu-shadow-out-lg);

    transform: translateY(-5px);

}



/* Neumorphic Card - Enfonce */

.neu-card-inset {

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-in);

    padding: 2rem;

}



/* Neumorphic Flat (pour conteneurs) */

.neu-flat {

    background: var(--neu-bg);

    border-radius: var(--radius);

}



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

   NAVIGATION

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



.header-sticky {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;

    padding: 1rem 0;

    transition: var(--transition);

}



.header-sticky.scrolled {

    background: rgba(232, 238, 243, 0.95);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

}



.navbar {

    padding: 0.5rem 0;

}



.navbar-brand img {

    height: 45px;

    transition: var(--transition);

}



.nav-neu {

    background: var(--neu-bg);

    border-radius: var(--radius-round);

    box-shadow: var(--neu-shadow-out-sm);

    padding: 0.5rem 1rem;

}



.nav-link {

    font-weight: 600;

    font-size: 0.95rem;

    color: var(--gray) !important;

    padding: 0.75rem 1.25rem !important;

    border-radius: var(--radius-round);

    transition: var(--transition);

    position: relative;

}



.nav-link:hover,

.nav-link.active {

    color: var(--primary) !important;

    background: var(--neu-bg);

    box-shadow: var(--neu-shadow-in);

}



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

   BUTTONS NEUMORPHIC

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



.btn-neu {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    font-weight: 700;

    font-size: 1rem;

    padding: 1rem 2rem;

    border: none;

    border-radius: var(--radius-round);

    cursor: pointer;

    transition: var(--transition);

    text-decoration: none;

}



.btn-neu-primary {

    background: linear-gradient(145deg, var(--primary-light), var(--primary-dark));

    color: var(--white);

    box-shadow: 6px 6px 12px #c8ced3, -6px -6px 12px #ffffff, inset 0 0 0 rgba(255, 255, 255, 0);

}



.btn-neu-primary:hover {

    box-shadow: 4px 4px 8px #c8ced3, -4px -4px 8px #ffffff, inset 2px 2px 4px rgba(0, 0, 0, 0.1);

    transform: translateY(-2px);

    color: var(--white);

}



.btn-neu-primary:active {

    box-shadow: var(--neu-shadow-in);

    transform: translateY(0);

}



.btn-neu-secondary {

    background: linear-gradient(145deg, var(--secondary-light), var(--secondary-dark));

    color: var(--white);

    box-shadow: 6px 6px 12px #c8ced3, -6px -6px 12px #ffffff;

}



.btn-neu-secondary:hover {

    box-shadow: 4px 4px 8px #c8ced3, -4px -4px 8px #ffffff, inset 2px 2px 4px rgba(0, 0, 0, 0.1);

    transform: translateY(-2px);

    color: var(--white);

}



.btn-neu-outline {

    background: var(--neu-bg);

    color: var(--dark);

    box-shadow: var(--neu-shadow-out-sm);

}



.btn-neu-outline:hover {

    box-shadow: var(--neu-shadow-in);

    color: var(--primary);

}



.btn-neu-lg {

    padding: 1.25rem 2.5rem;

    font-size: 1.1rem;

}



.btn-neu-sm {

    padding: 0.75rem 1.5rem;

    font-size: 0.9rem;

}



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

   HERO SECTION

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



.hero-neu {

    min-height: 100vh;

    display: flex;

    align-items: center;

    position: relative;

    padding-top: 100px;

    overflow: hidden;

}



.hero-neu::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -20%;

    width: 80%;

    height: 150%;

    background: linear-gradient(135deg, var(--primary-glow) 0%, var(--secondary-glow) 100%);

    border-radius: 50%;

    filter: blur(100px);

    opacity: 0.5;

    z-index: 0;

}



.hero-content {

    position: relative;

    z-index: 2;

}



.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem 1.5rem;

    background: var(--neu-bg);

    border-radius: var(--radius-round);

    box-shadow: var(--neu-shadow-out-sm);

    font-weight: 600;

    font-size: 0.9rem;

    color: var(--primary);

    margin-bottom: 1.5rem;

}



.hero-badge i {

    font-size: 0.8rem;

}



.hero-title {

    margin-bottom: 1.5rem;

}



.hero-title .highlight {

    background: var(--primary);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.hero-description {

    font-size: 1.2rem;

    color: var(--gray);

    margin-bottom: 2.5rem;

    max-width: 600px;

}



.hero-buttons {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

}



.hero-image {

    position: relative;

    z-index: 1;

}



.hero-image-wrapper {

    position: relative;

    background: var(--neu-bg);

    border-radius: var(--radius-lg);

    box-shadow: var(--neu-shadow-out-lg);

    padding: 1.5rem;

    overflow: hidden;

}



.hero-image-wrapper img {

    border-radius: var(--radius);

    width: 100%;

    height: auto;

}



.hero-floating-card {

    position: absolute;

    background: var(--white);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-out);

    padding: 1rem 1.5rem;

    display: flex;

    align-items: center;

    gap: 1rem;

}



.hero-floating-card.card-1 {

    bottom: 10%;

    left: -10%;

    animation: float 4s ease-in-out infinite;

}



.hero-floating-card.card-2 {

    top: 10%;

    right: -5%;

    animation: float 4s ease-in-out infinite 1s;

}



@keyframes float {

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

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

}



.hero-floating-icon {

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    border-radius: var(--radius-sm);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--white);

    font-size: 1.25rem;

}



.hero-floating-text h5 {

    font-size: 1rem;

    margin-bottom: 0.25rem;

}



.hero-floating-text p {

    font-size: 0.85rem;

    margin: 0;

}



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

   SECTION HEADER

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



.section-header {

    text-align: center;

    margin-bottom: 4rem;

}



.section-badge {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.6rem 1.25rem;

    background: var(--neu-bg);

    border-radius: var(--radius-round);

    box-shadow: var(--neu-shadow-in);

    font-weight: 600;

    font-size: 0.85rem;

    color: var(--primary);

    margin-bottom: 1rem;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.section-title {

    margin-bottom: 1rem;

}



.section-subtitle {

    font-size: 1.15rem;

    color: var(--gray);

    max-width: 600px;

    margin: 0 auto;

}



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

   SERVICE CARDS

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



.service-card-neu {

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-out);

    padding: 2.5rem 2rem;

    text-align: center;

    transition: var(--transition);

    height: 100%;

    position: relative;

    overflow: hidden;

}



.service-card-neu::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: var(--primary);

    transform: scaleX(0);

    transition: var(--transition);

}



.service-card-neu:hover {

    transform: translateY(-10px);

    box-shadow: var(--neu-shadow-primary);

}



.service-card-neu:hover::before {

    transform: scaleX(1);

}



.service-icon-neu {

    width: 90px;

    height: 90px;

    margin: 0 auto 1.5rem;

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-in);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.25rem;

    color: var(--primary);

    transition: var(--transition);

}



.service-card-neu:hover .service-icon-neu {

    background: var(--primary);

    box-shadow: 0 10px 30px var(--primary-glow);

    color: var(--white);

    transform: scale(1.1) rotate(5deg);

}



.service-card-neu h4 {

    margin-bottom: 1rem;

    font-size: 1.25rem;

}



.service-card-neu p {

    font-size: 0.95rem;

    margin-bottom: 0;

}



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

   STATS SECTION

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



.stats-section-neu {

    background: var(--primary);

    border-radius: var(--radius-lg);

    padding: 4rem 2rem;

    margin: 0 1rem;

    position: relative;

    overflow: hidden;

}



.stats-section-neu::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);

    animation: pulse 4s ease-in-out infinite;

}



@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.3;
    }

}



.stat-item-neu {

    text-align: center;

    position: relative;

    z-index: 1;

}



.stat-number {

    font-size: 4rem;

    font-weight: 800;

    color: var(--white);

    line-height: 1;

    margin-bottom: 0.5rem;

    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);

}



.stat-label {

    font-size: 1.1rem;

    color: rgba(255, 255, 255, 0.9);

    font-weight: 500;

}



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

   PROJECT CARDS

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



.project-card-neu {

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-out);

    overflow: hidden;

    transition: var(--transition);

    height: 100%;

}



.project-card-neu:hover {

    transform: translateY(-10px);

    box-shadow: var(--neu-shadow-out-lg);

}



.project-image-wrapper {

    position: relative;

    overflow: hidden;

    height: 220px;

    margin: 1rem;

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-in);

}



.project-image-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition);

}



.project-card-neu:hover .project-image-wrapper img {

    transform: scale(1.1);

}



.project-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);

    opacity: 0;

    transition: var(--transition);

    display: flex;

    align-items: flex-end;

    padding: 1.5rem;

}



.project-card-neu:hover .project-overlay {

    opacity: 1;

}



.project-overlay .btn-neu {

    padding: 0.6rem 1.25rem;

    font-size: 0.85rem;

}



.project-body {

    padding: 1.5rem;

}



.project-category {

    display: inline-block;

    padding: 0.4rem 1rem;

    background: var(--neu-bg);

    box-shadow: var(--neu-shadow-in);

    border-radius: var(--radius-round);

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--primary);

    margin-bottom: 1rem;

}



.project-body h5 {

    margin-bottom: 0.5rem;

}



.project-body p {

    font-size: 0.9rem;

    margin-bottom: 1rem;

}



.project-link {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--primary);

    font-weight: 600;

    font-size: 0.95rem;

}



.project-link:hover {

    color: var(--secondary);

    gap: 0.75rem;

}



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

   CTA SECTION

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



.cta-neu {

    background: var(--neu-bg);

    border-radius: var(--radius-lg);

    box-shadow: var(--neu-shadow-out-lg);

    padding: 4rem 3rem;

    position: relative;

    overflow: hidden;

}



.cta-neu::before {

    content: '';

    position: absolute;

    top: 0;

    right: 0;

    width: 40%;

    height: 100%;

    background: linear-gradient(135deg, var(--primary-glow), var(--secondary-glow));

    filter: blur(60px);

    opacity: 0.6;
    z-index: -1;

}



.cta-content {

    position: relative;

    z-index: 1;

}



.cta-title {

    margin-bottom: 1rem;

}



.cta-title .highlight {

    background: var(--primary);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.cta-text {

    font-size: 1.1rem;

    margin-bottom: 0;

}



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

   FOOTER

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



.footer-neu {

    background: var(--dark);

    color: var(--gray-light);

    padding: 5rem 0 2rem;

    margin-top: 4rem;

}



.footer-logo {

    margin-bottom: 1.5rem;

}



.footer-logo img {

    height: 45px;

}



.footer-about {

    font-size: 0.95rem;

    line-height: 1.8;

    margin-bottom: 1.5rem;

    color: var(--gray-light);

}



.footer-social {

    display: flex;

    gap: 0.75rem;

}



.social-icon-neu {

    width: 45px;

    height: 45px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: var(--radius-sm);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--gray-light);

    transition: var(--transition);

}



.social-icon-neu:hover {

    background: var(--primary);

    color: var(--white);

    transform: translateY(-3px);

}



.footer-title {

    color: var(--white);

    font-size: 1.15rem;

    margin-bottom: 1.5rem;

    font-weight: 600;

}



.footer-links {

    list-style: none;

    padding: 0;

    margin: 0;

}



.footer-links li {

    margin-bottom: 0.75rem;

}



.footer-links a {

    color: var(--gray-light);

    font-size: 0.95rem;

    transition: var(--transition);

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

}



.footer-links a:hover {

    color: var(--primary);

    padding-left: 0.5rem;

}



.footer-links i {

    font-size: 0.85rem;

    color: var(--primary);

}



.footer-bottom {

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    margin-top: 3rem;

    padding-top: 2rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 1rem;

}



.footer-copyright {

    margin: 0;

    font-size: 0.9rem;

}



.footer-bottom a {

    color: var(--gray-light);

    font-size: 0.9rem;

}



.footer-bottom a:hover {

    color: var(--primary);

}



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

   BACK TO TOP

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



.back-to-top-neu {

    position: fixed;

    right: 2rem;

    bottom: 2rem;

    width: 55px;

    height: 55px;

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-out);

    display: none;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-size: 1.25rem;

    z-index: 999;

    transition: var(--transition);

    cursor: pointer;

}



.back-to-top-neu:hover {

    box-shadow: var(--neu-shadow-in);

    color: var(--secondary);

}



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

   RESPONSIVE

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



@media (max-width: 991px) {

    section {

        padding: 4rem 0;

    }



    .navbar-collapse {

        background: var(--neu-bg);

        padding: 1.5rem;

        border-radius: var(--radius);

        box-shadow: var(--neu-shadow-out);

        margin-top: 1rem;

    }



    .nav-neu {

        box-shadow: none;

        padding: 0;

    }



    .nav-link {

        padding: 1rem !important;

    }



    .hero-floating-card {

        display: none;

    }



    .stats-section-neu {

        margin: 0;

        border-radius: 0;

    }

}



@media (max-width: 767px) {

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }



    section {

        padding: 3rem 0;

    }



    .hero-neu {

        padding-top: 120px;

        min-height: auto;

        padding-bottom: 4rem;

    }



    .hero-buttons {

        flex-direction: column;

    }



    .btn-neu {

        width: 100%;

        justify-content: center;

    }



    .stat-number {

        font-size: 3rem;

    }



    .cta-neu {

        padding: 2.5rem 1.5rem;

        text-align: center;

    }



    .footer-bottom {

        flex-direction: column;

        text-align: center;

    }

}



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

   ANIMATIONS

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



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.animate-fadeInUp {

    animation: fadeInUp 0.8s ease forwards;

}



.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}



/* Utility */

.text-gradient {

    background: linear-gradient(135deg, var(--primary), var(--secondary));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



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

   PAGE ABOUT - NEUMORPHISM STYLES

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



/* Page Header Section */

.page-header-neu {

    padding: 8rem 0 4rem;

    position: relative;

    overflow: hidden;

}



.page-header-neu::before {

    content: '';

    position: absolute;

    top: -30%;

    right: -10%;

    width: 50%;

    height: 150%;

    background: linear-gradient(135deg, var(--primary-glow) 0%, var(--secondary-glow) 100%);

    border-radius: 50%;

    filter: blur(80px);

    opacity: 0.4;

    z-index: -1;

}



.breadcrumb-neu {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.6rem 1.25rem;

    background: var(--neu-bg);

    border-radius: var(--radius-round);

    box-shadow: var(--neu-shadow-in);

    font-size: 0.9rem;

    margin-bottom: 1.5rem;

}



.breadcrumb-neu a {

    color: var(--gray);

    transition: var(--transition);

}



.breadcrumb-neu a:hover {

    color: var(--primary);

}



.breadcrumb-neu .separator {

    color: var(--gray-light);

}



.breadcrumb-neu .current {

    color: var(--primary);

    font-weight: 600;

}



.page-title-neu {

    font-size: clamp(2.5rem, 5vw, 3.5rem);

    margin-bottom: 1.5rem;

}



.page-description {

    font-size: 1.2rem;

    color: var(--gray);

    max-width: 600px;

}



/* About Image Card */

.about-image-card {

    position: relative;

    z-index: 1;

}



.about-image-wrapper {

    background: var(--neu-bg);

    border-radius: var(--radius-lg);

    box-shadow: var(--neu-shadow-out-lg);

    padding: 1.5rem;

    position: relative;

}



.about-image-wrapper img {

    border-radius: var(--radius);

    width: 100%;

    height: auto;

}



.experience-badge-neu {

    position: absolute;

    bottom: -20px;

    left: -20px;

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    color: var(--white);

    padding: 1.5rem 2rem;

    border-radius: var(--radius);

    box-shadow: 0 10px 40px var(--primary-glow);

    text-align: center;

    z-index: 2;

}



.experience-badge-neu h3 {

    font-size: 2.5rem;

    color: var(--white);

    margin-bottom: 0.25rem;

    line-height: 1;

}



.experience-badge-neu p {

    font-size: 0.9rem;

    color: rgba(255, 255, 255, 0.9);

    margin: 0;

}



/* Story Section */

.story-section {

    position: relative;

}



.story-content h2 {

    margin-bottom: 1.5rem;

}



.story-content p {

    margin-bottom: 1rem;

}



.feature-list-neu {

    list-style: none;

    padding: 0;

    margin: 2rem 0;

}



.feature-list-neu li {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-bottom: 1rem;

    padding: 0.75rem 1rem;

    background: var(--neu-bg);

    border-radius: var(--radius-sm);

    box-shadow: var(--neu-shadow-out-sm);

    transition: var(--transition);

}



.feature-list-neu li:hover {

    box-shadow: var(--neu-shadow-in);

    transform: translateX(5px);

}



.feature-list-neu .feature-icon {

    width: 40px;

    height: 40px;

    background: linear-gradient(135deg, var(--primary), var(--primary-dark));

    border-radius: var(--radius-sm);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--white);

    font-size: 0.9rem;

    flex-shrink: 0;

}



.feature-list-neu span {

    font-weight: 600;

    color: var(--dark);

}



/* Mission Vision Values Cards */

.mvv-card-neu {

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-out);

    padding: 2.5rem 2rem;

    text-align: center;

    height: 100%;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

}



.mvv-card-neu::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: var(--primary);

    transform: scaleX(0);

    transition: var(--transition);

}



.mvv-card-neu:hover {

    transform: translateY(-10px);

    box-shadow: var(--neu-shadow-out-lg);

}



.mvv-card-neu:hover::after {

    transform: scaleX(1);

}



.mvv-icon-neu {

    width: 90px;

    height: 90px;

    margin: 0 auto 1.5rem;

    background: var(--neu-bg);

    border-radius: 50%;

    box-shadow: var(--neu-shadow-in);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--transition);

}



.mvv-icon-neu i {

    font-size: 2.25rem;

    background: var(--primary);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.mvv-card-neu:hover .mvv-icon-neu {

    background: var(--primary);

    box-shadow: 0 10px 30px var(--primary-glow);

}



.mvv-card-neu:hover .mvv-icon-neu i {

    background: var(--white);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.mvv-card-neu h4 {

    margin-bottom: 1rem;

    font-size: 1.35rem;

}



.mvv-card-neu p {

    font-size: 0.95rem;

    margin-bottom: 0;

}



/* Values Grid */

.values-grid-neu {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1rem;

    margin-top: 1rem;

}



.value-item-neu {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 1rem;

    background: var(--neu-bg);

    border-radius: var(--radius-sm);

    box-shadow: var(--neu-shadow-out-sm);

    transition: var(--transition);

}



.value-item-neu:hover {

    box-shadow: var(--neu-shadow-in);

}



.value-item-neu i {

    color: var(--primary);

    font-size: 1.1rem;

}



.value-item-neu span {

    font-weight: 600;

    font-size: 0.95rem;

    color: var(--dark);

}



/* Testimonial Cards Neumorphism */

.testimonial-card-neu {

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-out);

    padding: 2rem;

    height: 100%;

    transition: var(--transition);

    position: relative;

}



.testimonial-card-neu::before {

    content: '\f10d';

    font-family: 'Font Awesome 6 Free';

    font-weight: 900;

    position: absolute;

    top: 1.5rem;

    right: 1.5rem;

    font-size: 2.5rem;

    color: var(--primary);

    opacity: 0.15;

}



.testimonial-card-neu:hover {

    transform: translateY(-8px);

    box-shadow: var(--neu-shadow-primary);

}



.testimonial-rating-neu {

    display: flex;

    gap: 0.25rem;

    margin-bottom: 1rem;

}



.testimonial-rating-neu i {

    color: #ffc107;

    font-size: 0.9rem;

}



.testimonial-text-neu {

    font-size: 1rem;

    color: var(--gray);

    line-height: 1.8;

    margin-bottom: 1.5rem;

    font-style: italic;

}



.testimonial-author-neu {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding-top: 1rem;

    border-top: 1px solid rgba(0, 0, 0, 0.05);

}



.testimonial-avatar-neu {

    width: 55px;

    height: 55px;

    background: var(--neu-bg);

    border-radius: 50%;

    box-shadow: var(--neu-shadow-in);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--primary);

}



.testimonial-info h5 {

    font-size: 1rem;

    margin-bottom: 0.25rem;

}



.testimonial-info p {

    font-size: 0.85rem;

    color: var(--gray);

    margin: 0;

}



/* Why Choose Us Section */

.why-us-card-neu {

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-out);

    padding: 2rem;

    display: flex;

    align-items: flex-start;

    gap: 1.5rem;

    transition: var(--transition);

    height: 100%;

}



.why-us-card-neu:hover {

    transform: translateY(-5px);

    box-shadow: var(--neu-shadow-out-lg);

}



.why-us-icon-neu {

    width: 65px;

    height: 65px;

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-in);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    color: var(--primary);

    flex-shrink: 0;

    transition: var(--transition);

}



.why-us-card-neu:hover .why-us-icon-neu {

    background: linear-gradient(135deg, var(--primary), var(--primary-dark));

    box-shadow: 0 8px 25px var(--primary-glow);

    color: var(--white);

}



.why-us-content h5 {

    margin-bottom: 0.5rem;

    font-size: 1.15rem;

}



.why-us-content p {

    font-size: 0.95rem;

    margin-bottom: 0;

}



/* Timeline Styles */

.timeline-neu {

    position: relative;

    padding-left: 3rem;

}



.timeline-neu::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 4px;

    background: var(--neu-bg);

    border-radius: 2px;

    box-shadow: var(--neu-shadow-in);

}



.timeline-item-neu {

    position: relative;

    padding-bottom: 2rem;

}



.timeline-item-neu:last-child {

    padding-bottom: 0;

}



.timeline-dot-neu {

    position: absolute;

    left: -3rem;

    top: 0;

    width: 20px;

    height: 20px;

    background: linear-gradient(135deg, var(--primary), var(--primary-dark));

    border-radius: 50%;

    box-shadow: 0 0 0 4px var(--neu-bg), 0 4px 10px var(--primary-glow);

    transform: translateX(-8px);

}



.timeline-content-neu {

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-out);

    padding: 1.5rem;

}



.timeline-year {

    display: inline-block;

    padding: 0.25rem 0.75rem;

    background: linear-gradient(135deg, var(--primary), var(--primary-dark));

    color: var(--white);

    border-radius: var(--radius-round);

    font-size: 0.8rem;

    font-weight: 600;

    margin-bottom: 0.75rem;

}



.timeline-content-neu h5 {

    margin-bottom: 0.5rem;

}



.timeline-content-neu p {

    font-size: 0.95rem;

    margin-bottom: 0;

}



@media (max-width: 991px) {

    .experience-badge-neu {

        bottom: -10px;

        left: 50%;

        transform: translateX(-50%);

    }



    .about-image-card {

        margin-bottom: 3rem;

    }



    .values-grid-neu {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 767px) {

    .page-header-neu {

        padding: 7rem 0 3rem;

    }



    .experience-badge-neu {

        padding: 1rem 1.5rem;

    }



    .experience-badge-neu h3 {

        font-size: 2rem;

    }

}



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

   PAGE SERVICES - NEUMORPHISM STYLES

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



/* Service Detail Card */

.service-detail-card-neu {

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-out);

    padding: 2.5rem;

    height: 100%;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

}



.service-detail-card-neu::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background: var(--primary);

    transform: scaleX(0);

    transform-origin: left;

    transition: var(--transition);

}



.service-detail-card-neu:hover {

    transform: translateY(-10px);

    box-shadow: var(--neu-shadow-primary);

}



.service-detail-card-neu:hover::before {

    transform: scaleX(1);

}



.service-detail-icon {

    width: 100px;

    height: 100px;

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-in);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1.5rem;

    transition: var(--transition);

}



.service-detail-icon i {

    font-size: 2.5rem;

    background: linear-gradient(135deg, var(--primary), var(--secondary));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    transition: var(--transition);

}



.service-detail-card-neu:hover .service-detail-icon {

    background: linear-gradient(135deg, var(--primary), var(--primary-dark));

    box-shadow: 0 10px 30px var(--primary-glow);

}



.service-detail-card-neu:hover .service-detail-icon i {

    background: var(--white);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.service-detail-card-neu h4 {

    font-size: 1.35rem;

    margin-bottom: 1rem;

}



.service-detail-card-neu p {

    color: var(--gray);

    margin-bottom: 1.5rem;

    font-size: 0.95rem;

}



.service-features-list {

    list-style: none;

    padding: 0;

    margin: 0 0 1.5rem 0;

}



.service-features-list li {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.5rem 0;

    font-size: 0.9rem;

    color: var(--dark);

}



.service-features-list li i {

    color: var(--primary);

    font-size: 0.8rem;

}



/* Process Steps Neumorphism */

.process-section-neu {

    position: relative;

}



.process-step-neu {

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-out);

    padding: 2rem;

    text-align: center;

    height: 100%;

    transition: var(--transition);

    position: relative;

}



.process-step-neu:hover {

    transform: translateY(-8px);

    box-shadow: var(--neu-shadow-out-lg);

}



.process-step-number {

    width: 70px;

    height: 70px;

    background: var(--primary);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.75rem;

    font-weight: 800;

    color: var(--white);

    margin: 0 auto 1.5rem;

    box-shadow: 0 8px 25px var(--primary-glow);

    position: relative;

    z-index: 2;

}



.process-step-neu h4 {

    font-size: 1.15rem;

    margin-bottom: 1rem;

}



.process-step-neu p {

    font-size: 0.95rem;

    margin-bottom: 0;

    color: var(--gray);

}



/* Process connector line */

.process-connector {

    position: relative;

}



.process-connector::after {

    content: '';

    position: absolute;

    top: 35px;

    left: calc(50% + 50px);

    width: calc(100% - 100px);

    height: 4px;

    background: var(--neu-bg);

    box-shadow: var(--neu-shadow-in);

    border-radius: 2px;

    z-index: 1;

}



.process-connector:last-child::after {

    display: none;

}



/* Technologies/Tools Grid */

.tech-grid-neu {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

    gap: 1.5rem;

    margin-top: 2rem;

}



.tech-item-neu {

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-out);

    padding: 1.5rem;

    text-align: center;

    transition: var(--transition);

}



.tech-item-neu:hover {

    box-shadow: var(--neu-shadow-in);

    transform: scale(1.05);

}



.tech-item-neu i {

    font-size: 2.5rem;

    margin-bottom: 0.75rem;

    background: linear-gradient(135deg, var(--primary), var(--secondary));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.tech-item-neu span {

    display: block;

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--dark);

}



/* Pricing Cards (optional) */

.pricing-card-neu {

    background: var(--neu-bg);

    border-radius: var(--radius-lg);

    box-shadow: var(--neu-shadow-out);

    padding: 2.5rem;

    text-align: center;

    height: 100%;

    transition: var(--transition);

    position: relative;

}



.pricing-card-neu.featured {

    background: linear-gradient(135deg, var(--primary), var(--secondary));

    box-shadow: 0 20px 60px var(--primary-glow);

}



.pricing-card-neu.featured * {

    color: var(--white);

}



.pricing-card-neu:hover {

    transform: translateY(-10px);

}



.pricing-badge {

    position: absolute;

    top: -12px;

    left: 50%;

    transform: translateX(-50%);

    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));

    color: var(--white);

    padding: 0.5rem 1.5rem;

    border-radius: var(--radius-round);

    font-size: 0.8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.pricing-title {

    font-size: 1.5rem;

    margin-bottom: 1rem;

}



.pricing-price {

    font-size: 3rem;

    font-weight: 800;

    margin-bottom: 0.5rem;

}



.pricing-price span {

    font-size: 1rem;

    font-weight: 500;

}



.pricing-features {

    list-style: none;

    padding: 0;

    margin: 2rem 0;

    text-align: left;

}



.pricing-features li {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.75rem 0;

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

}



.pricing-features li i {

    color: var(--primary);

}



.pricing-card-neu.featured .pricing-features li {

    border-color: rgba(255, 255, 255, 0.2);

}



.pricing-card-neu.featured .pricing-features li i {

    color: var(--white);

}



/* FAQ Section */

.faq-item-neu {

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-out);

    margin-bottom: 1rem;

    overflow: hidden;

}



.faq-question-neu {

    padding: 1.5rem;

    font-weight: 600;

    font-size: 1.05rem;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: var(--transition);

}



.faq-question-neu:hover {

    color: var(--primary);

}



.faq-question-neu i {

    transition: var(--transition);

    color: var(--primary);

}



.faq-question-neu.active i {

    transform: rotate(180deg);

}



.faq-answer-neu {

    padding: 0 1.5rem 1.5rem;

    color: var(--gray);

    font-size: 0.95rem;

    line-height: 1.8;

}



@media (max-width: 991px) {

    .process-connector::after {

        display: none;

    }

}



@media (max-width: 767px) {

    .service-detail-card-neu {

        padding: 1.5rem;

    }



    .service-detail-icon {

        width: 80px;

        height: 80px;

    }



    .service-detail-icon i {

        font-size: 2rem;

    }



    .tech-grid-neu {

        grid-template-columns: repeat(3, 1fr);

        gap: 1rem;

    }

}



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

   PAGE PROJETS - NEUMORPHISM STYLES

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



/* Filter Tabs */

.filter-tabs-neu {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 0.75rem;

    margin-bottom: 3rem;

}



.filter-tab-neu {

    padding: 0.75rem 1.5rem;

    background: var(--neu-bg);

    border: none;

    border-radius: var(--radius-round);

    box-shadow: var(--neu-shadow-out-sm);

    font-weight: 600;

    font-size: 0.9rem;

    color: var(--gray);

    cursor: pointer;

    transition: var(--transition);

}



.filter-tab-neu:hover {

    color: var(--primary);

    box-shadow: var(--neu-shadow-in);

}



.filter-tab-neu.active {

    background: linear-gradient(135deg, var(--primary), var(--primary-dark));

    color: var(--white);

    box-shadow: 0 8px 25px var(--primary-glow);

}



/* Project Card Neumorphism */

.project-card-neu {

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-out);

    overflow: hidden;

    height: 100%;

    transition: var(--transition);

}



.project-card-neu:hover {

    transform: translateY(-10px);

    box-shadow: var(--neu-shadow-primary);

}



.project-image-neu {

    position: relative;

    overflow: hidden;

    aspect-ratio: 16/10;

}



.project-image-neu img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition);

}



.project-card-neu:hover .project-image-neu img {

    transform: scale(1.08);

}



.project-overlay-neu {

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);

    opacity: 0;

    transition: var(--transition);

    display: flex;

    align-items: flex-end;

    padding: 1.5rem;

}



.project-card-neu:hover .project-overlay-neu {

    opacity: 1;

}



.project-overlay-actions {

    display: flex;

    gap: 0.75rem;

}



.project-overlay-btn {

    width: 45px;

    height: 45px;

    background: var(--white);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-size: 1rem;

    transition: var(--transition);

    text-decoration: none;

}



.project-overlay-btn:hover {

    background: var(--primary);

    color: var(--white);

    transform: scale(1.1);

}



.project-content-neu {

    padding: 1.75rem;

}



.project-category-neu {

    display: inline-block;

    padding: 0.35rem 0.85rem;

    background: var(--neu-bg);

    border-radius: var(--radius-round);

    box-shadow: var(--neu-shadow-in);

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--primary);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 1rem;

}



.project-title-neu {

    font-size: 1.25rem;

    margin-bottom: 0.5rem;

    transition: var(--transition);

}



.project-card-neu:hover .project-title-neu {

    color: var(--primary);

}



.project-client-neu {

    font-size: 0.9rem;

    color: var(--gray);

    margin-bottom: 0.75rem;

}



.project-description-neu {

    font-size: 0.95rem;

    color: var(--gray);

    line-height: 1.7;

    margin-bottom: 1.25rem;

}



.project-tech-stack {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    margin-bottom: 1.25rem;

}



.tech-tag-neu {

    padding: 0.3rem 0.6rem;

    background: var(--neu-bg);

    border-radius: var(--radius-sm);

    box-shadow: var(--neu-shadow-out-sm);

    font-size: 0.75rem;

    font-weight: 500;

    color: var(--dark);

}



.project-link-neu {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--primary);

    font-weight: 600;

    font-size: 0.95rem;

    transition: var(--transition);

}



.project-link-neu:hover {

    color: var(--primary-dark);

    gap: 0.75rem;

}



.project-link-neu i {

    font-size: 0.85rem;

    transition: var(--transition);

}



/* Featured Project Card */

.featured-project-neu {

    background: var(--neu-bg);

    border-radius: var(--radius-lg);

    box-shadow: var(--neu-shadow-out-lg);

    overflow: hidden;

    margin-bottom: 3rem;

}



.featured-project-image {

    position: relative;

    overflow: hidden;

}



.featured-project-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    min-height: 300px;

}



.featured-badge {

    position: absolute;

    top: 1.5rem;

    left: 1.5rem;

    padding: 0.5rem 1rem;

    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));

    color: var(--white);

    border-radius: var(--radius-round);

    font-size: 0.8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

}



.featured-project-content {

    padding: 2.5rem;

}



.featured-project-content .project-category-neu {

    margin-bottom: 1.25rem;

}



.featured-project-content .project-title-neu {

    font-size: 1.75rem;

    margin-bottom: 1rem;

}



.featured-project-content .project-description-neu {

    font-size: 1rem;

    margin-bottom: 1.5rem;

}



/* Project Stats */

.project-stats-neu {

    display: flex;

    gap: 2rem;

    margin-bottom: 1.5rem;

    padding: 1rem 0;

    border-top: 1px solid rgba(0, 0, 0, 0.05);

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

}



.project-stat-item {

    text-align: center;

}



.project-stat-value {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--primary);

    line-height: 1;

}



.project-stat-label {

    font-size: 0.8rem;

    color: var(--gray);

    margin-top: 0.25rem;

}



/* Empty State */

.no-projects-neu {

    background: var(--neu-bg);

    border-radius: var(--radius);

    box-shadow: var(--neu-shadow-in);

    padding: 4rem 2rem;

    text-align: center;

}



.no-projects-neu i {

    font-size: 4rem;

    color: var(--gray-light);

    margin-bottom: 1.5rem;

}



.no-projects-neu h4 {

    margin-bottom: 0.75rem;

}



.no-projects-neu p {

    color: var(--gray);

    margin-bottom: 0;

}



@media (max-width: 991px) {

    .featured-project-neu .row {

        flex-direction: column-reverse;

    }



    .featured-project-image img {

        min-height: 250px;

    }



    .project-stats-neu {

        gap: 1.5rem;

    }

}



@media (max-width: 767px) {

    .filter-tabs-neu {

        gap: 0.5rem;

    }



    .filter-tab-neu {

        padding: 0.6rem 1rem;

        font-size: 0.85rem;

    }



    .project-content-neu {

        padding: 1.25rem;

    }



    .featured-project-content {

        padding: 1.5rem;

    }



    .featured-project-content .project-title-neu {

        font-size: 1.35rem;

    }



    .project-stats-neu {

        flex-wrap: wrap;

        gap: 1rem;

    }



    .project-stat-item {

        flex: 1;

        min-width: 80px;

    }

}