.text-xl {



    font-size: 1.25rem;



    line-height: 1.75rem;



}







.font-bold {



    font-weight: 700;



}







* {



    margin: 0;



    padding: 0;



    box-sizing: border-box;



}







.sub-footer {



    font-size: 1.125rem;



    line-height: 1.75rem;



    font-weight: 600;



}







body {



    font-family: Inter, sans-serif;



}







.text-3xl {



    font-size: 1.875rem;



    line-height: 2.25rem;



}







/* Fix extra padding/gutter that pushes cards unevenly */



.row {



    margin-left: 0;



    margin-right: 0;



}







[class*="col-"] {



    padding-left: 0.75rem;



    padding-right: 0.75rem;



}







/* Optional: force equal margin left/right for sections */



section .container {



    padding-left: 1.5rem;



    padding-right: 1.5rem;



}











/* Header */



header {



    position: fixed;



    top: 0;



    left: 0;



    right: 0;



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



    backdrop-filter: blur(10px);



    padding: 1rem 0;



    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);



    z-index: 1000;



}







nav {



    display: flex;



    justify-content: space-between;



    align-items: center;



}







.h-8 {



    height: 2rem;



}







.w-8 {



    width: 2rem;



}







.logo {



    display: flex;



    align-items: center;



    gap: 10px;



    font-size: 1.5rem;



    font-weight: 600;



    color: #4285f4;



}







.logo svg {



    width: 32px;



    height: 32px;



    color: #4285f4;



}







.nav-links {



    display: flex;



    list-style: none;



    margin-bottom: 0;







}







.py-2 {



    padding-top: 0.5rem;



    padding-bottom: 0.5rem;



}







.px-3 {



    padding-left: 0.75rem;



    padding-right: 0.75rem;



}







.nav-links a {



    text-decoration: none;



    transition: color 0.3s ease;



}







.nav-links a:hover {



    color: #4285f4;



}







/* Main Content */



main {



    margin-top: 80px;



    /* Account for fixed header */



}







.hero {



    padding-top: 8rem;







    display: grid;



    padding-left: 2rem;



    padding-right: 2rem;



    margin: 0 auto;



    grid-template-columns: 1fr 1fr;



    gap: 3rem;



    align-items: center;



    background: linear-gradient(135deg, #e8f2ff 0%, #f0f4ff 100%);







}







.hero-content {



    padding-right: 2rem;



}







.hero h1 {



    font-size: 3.5rem;



    font-weight: 700;



    margin-bottom: 1.5rem;



    color: #333;



}







.hero h1 .highlight {



    color: #4285f4;



}







.cta-buttons {



    display: flex;



    gap: 1rem;



    margin-bottom: 3rem;



    margin-top: 2rem;



}







.btn {



    border: none;



    border-radius: 0.5rem;



    font-size: 1.125rem;



    font-weight: 500;



    padding-left: 1.5rem;



    padding-right: 1.5rem;



    cursor: pointer;



    transition: all 0.3s ease;



    text-decoration: none;



    display: inline-flex;



    align-items: center;



    gap: 8px;



    padding-top: 0.75rem;



    padding-bottom: 0.75rem;



    line-height: 1.75rem;



}







.btn-primary {



    --tw-bg-opacity: 1;



    background-color: rgb(95 216 144 / var(--tw-bg-opacity, 1));



    color: white;



    box-shadow: 0 4px 20px rgba(66, 133, 244, 0.3);



}







.btn-primary:hover {



    --tw-bg-opacity: 1;



    background-color: rgb(86 227 143 / var(--tw-bg-opacity, 1));



    transform: translateY(-2px);



    box-shadow: 0 6px 25px rgba(86, 227, 143, 0.4);



}







.btn-secondary {



    background: transparent;



    color: #5fd890;



    border: 2px solid #56e38f;



}







.btn-secondary:hover {



    background: #5fd890;



    color: white;



    transform: translateY(-2px);



    border: 2px solid #5fd890;



}







/* Hero Image - Adjusted positioning */



.hero-image {



    position: relative;



    transform: translateY(-4rem);



    /* Move up by 3rem */



}







.brain-container {



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



    backdrop-filter: blur(10px);



    border-radius: 0.75rem;



    padding: 2rem;



    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);



    position: relative;



}







@keyframes rotate {



    from {



        transform: rotate(0deg);



    }







    to {



        transform: rotate(360deg);



    }



}







.brain-image {



    width: 100%;



    height: 20rem;





    position: relative;



    z-index: 1;





    overflow: hidden;







}







.stats-badge {



    position: absolute;



    bottom: -20px;



    right: -20px;



    background: #2563eb;



    color: white;



    border-radius: 0.75rem;



    padding: 1rem;



    box-shadow: 0 10px 30px rgba(66, 133, 244, 0.3);



    z-index: 2;



}















.stats-number {



    font-size: 1.5rem;



    line-height: 2rem;



    display: block;



}







.stats-text {



    font-size: 0.9rem;



    opacity: 0.9;



}







/* Features */



.features {



    display: flex;



    justify-content: center;



    align-items: flex-start;



    gap: 4rem;



    /* horizontal spacing between items */



    margin-top: 2rem;



    padding: 2rem 0;



}







.feature {



    display: flex;



    align-items: center;



    gap: 0.75rem;



    /* spacing between icon and text */



    font-size: 0.95rem;



    color: #2a2a2a;



}







.feature svg {



    color: #5fd890;



    width: 18px;



    height: 18px;



    flex-shrink: 0;



}







.feature span {



    line-height: 1.3;



}











.bg-gray-50 {



    --tw-bg-opacity: 1;



    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));







}







/* Responsive */



@media (max-width: 768px) {



    .cta-buttons .btn-primary {



        width: 283px !important;



    }

    .brain-image {

        height: 10rem;



    }





    .cta-buttons .btn-secondary {



        width: 186px !important;



    }



    .hero {



        grid-template-columns: 1fr;



        gap: 2rem;



    }







    .hero-content {



        padding-right: 0;



    }







    .hero h1 {



        font-size: 2.5rem;



    }







    .nav-links {



        display: none;



    }







    .cta-buttons {



        flex-direction: column;



        align-items: center;



    }







    .features {



        grid-template-columns: 1fr;



        gap: 1rem;



    }







    /* Reset transform on mobile for better layout */



    .hero-image {



        transform: translateY(-1rem);



    }



}







.text-gray-800 {



    --tw-text-opacity: 1;



    color: rgb(31 41 55 / var(--tw-text-opacity, 1));



}







.text-gray-700 {



    --tw-text-opacity: 1;



    color: rgb(55 65 81 / var(--tw-text-opacity, 1));



}







.font-medium {



    font-weight: 500;



}







.text-sm {



    font-size: 0.875rem;



    line-height: 1.25rem;



}







.space-x-8> :not([hidden])~ :not([hidden]) {



    --tw-space-x-reverse: 0;



    margin-right: calc(2rem * var(--tw-space-x-reverse));



    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));



}







.lg\:text-6xl {



    font-size: 3.75rem;



    line-height: 1;



}







.block {



    display: block;



}











.leading-relaxed {



    line-height: 1.625;



}







.text-gray-600 {



    --tw-text-opacity: 1;



    color: rgb(75 85 99 / var(--tw-text-opacity, 1));



}







/* page solutions  */



.hero-section {



    padding: 0px 0 60px;



    text-align: center;



}







.hero-title {



    font-size: 1.875rem;



    line-height: 2.25rem;



    margin-bottom: 30px;



}







.hero-subtitle {



    font-size: 1.125rem;



    line-height: 1.75rem;







    max-width: 800px;



    margin: 0 auto;



}











.solution-card {



    background: white;



    height: 100%;



    border-radius: 0.75rem;



    padding: 1.5rem;



    transition: all 0.3s ease;



    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;



}







.solution-card:hover {



    transform: translateY(-5px);



    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;



    --tw-bg-opacity: 1;



    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));



}







.icon-container {



    width: 66px;



    height: 66px;



    display: flex;



    align-items: center;



    justify-content: center;



    margin-bottom: 30px;



    font-size: 2.5rem;



    --tw-bg-opacity: 1;



    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));



    border-radius: 0.5rem;



}















.card-title {



    font-weight: 700;



    margin-bottom: 20px;



    font-size: 1.125rem;



    line-height: 1.75rem;



}







.card-description {



    color: #6c757d;



    font-size: 1rem;



    line-height: 1.6;



    margin-bottom: 30px;



}







.feature-list {



    list-style: none;



    padding: 0;



    margin-bottom: 30px;



}







.feature-item {



    display: flex;



    align-items: center;



    margin-bottom: 12px;



    color: #495057;



}







.feature-icon {



    width: 8px;



    height: 8px;



    border-radius: 50%;



    margin-right: 15px;



    flex-shrink: 0;



}











.value-description {



    font-size: 0.875rem;



    line-height: 1.25rem;



}







.learn-more-link {



    text-decoration: none;



    font-weight: 500;



    display: flex;



    justify-content: space-between;



    align-items: center;



    border-top: 1px solid #e5e7eb;



    padding-top: 16px;



    margin-top: 16px;



    transition: all 0.3s ease;



}







.learn-more-link:hover {



    color: #5fd890;



    transform: translateX(5px);



}















.green-link {



    color: #10b981;



}







.green-link:hover {



    color: #059669;



}







.purple-link {



    color: #8b5cf6;



}







.purple-link:hover {



    color: #7c3aed;



}







.solutions-section {



    padding-top: 80px;



    padding-bottom: 80px;



}







.mt-20 {



    margin-top: 5rem;



}







.text-gray-900 {



    --tw-text-opacity: 1;



    color: rgb(17 24 39 / var(--tw-text-opacity, 1));



}







.bg-gray-700 {



    --tw-bg-opacity: 1;



    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));



}







.subtitle {



    font-size: 1.1rem;



    color: #6c757d;



    margin-bottom: 0;



    font-weight: 400;



}







.mission-section {



    margin-bottom: 80px;



}







.section-title {



    font-size: 1.5rem;



    line-height: 2rem;



    margin-bottom: 2rem;



}







.mission-text {



    font-size: 1rem;



    line-height: 1.5rem;



    margin-bottom: 1.5rem;



}







.doctor-image {



    border-radius: 0.75rem;



    width: 100%;



    height: 20rem;



    object-fit: cover;



}







.stats-section {



    margin-top: 40px;



}







.stat-card {



    display: flex;



    flex-direction: column;



    justify-content: flex-start;



    height: 100%;



    background-color: white;



    border-radius: 0.75rem;



    padding: 1.5rem;



    text-align: center;



}















.stat-card .description-section {



    margin-top: auto;



    /* pushes description down to align across all cards */



}







.stat-number {



    font-size: 1.5rem;



    line-height: 2rem;



    margin-bottom: 0.5rem;



}







.stat-number.blue {



    color: #5fd890;



}







.stat-number.purple {



    color: #6f42c1;



}







.stat-number.orange {



    color: #fd7e14;



}







.stat-number.dark {



    color: #2c3e50;



}







.stat-label {



    font-size: 0.95rem;







    margin: 0;



}







.shadow-lg {



    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);



    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);



    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;



}







.w-12 {



    width: 3rem;



}







.h-12 {



    height: 3rem;



}







.mb-4 {



    margin-bottom: 1rem;



}







.project-card {



    background-color: white;



    border-radius: 20px;



    overflow: hidden;



    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);



    margin-bottom: 30px;



    transition: transform 0.3s ease, box-shadow 0.3s ease;



}















.project-header {



    height: 200px;



    background-size: cover;



    background-position: center;



    position: relative;



}







.project-header.brain {



    background-image: url('doctor.webp');



}







.project-header.surgery {



    background-image: url('machine.webp');



}







.project-header.centre {



    background-image: url('soiled.webp');



}



.project-header.labo {



    background-image: url('third.webp');



}





.text-yellow-800 {



    --tw-text-opacity: 1;



    color: rgb(133 77 14 / var(--tw-text-opacity, 1));



}







.bg-yellow-100 {



    --tw-bg-opacity: 1;



    background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));



}







.status-badges {



    position: absolute;



    top: 15px;



    left: 15px;



    right: 15px;



    display: flex;



    justify-content: space-between;



}







.status-badge {



    padding-top: 0.25rem;



    padding-bottom: 0.25rem;



    border-radius: 20px;



    font-size: 0.75rem;



    line-height: 1rem;



    padding-left: 0.75rem;



    padding-right: 0.75rem;



    border: none;



}







.status-badge.medical {



    --tw-bg-opacity: 1;



    background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));



    --tw-text-opacity: 1;



    color: rgb(107 33 168 / var(--tw-text-opacity, 1));



}







.status-badge.deployed {



    --tw-text-opacity: 1;



    color: rgb(22 101 52 / var(--tw-text-opacity, 1));



    --tw-bg-opacity: 1;



    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));



}







.status-badge.instruments {



    background-color: rgba(23, 162, 184, 0.9);



    color: white;



}







.status-badge.production {



    --tw-text-opacity: 1;



    color: rgb(30 64 175 / var(--tw-text-opacity, 1));



    --tw-bg-opacity: 1;



    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));



}







.project-content {



    padding: 30px;



}







.project-year {



    color: #6c757d;



    font-size: 0.9rem;



    margin-bottom: 5px;



}







.project-stats {



    display: flex;



    gap: 30px;



    margin-bottom: 25px;



    font-size: 0.9rem;







}







.stat-item {



    display: flex;



    align-items: center;



    gap: 5px;



}







.results-section h4 {



    font-size: 1rem;



    font-weight: 600;







    margin-bottom: 15px;



}







.result-item {



    display: flex;



    align-items: center;



    gap: 8px;



    margin-bottom: 8px;



    font-size: 0.95rem;



}







.result-item i {



    color: #28a745;



    font-size: 0.8rem;



}







.tech-section {



    margin-top: 25px;



}







.tech-section h4 {



    font-size: 1rem;



    font-weight: 600;



    color: #2c3e50;



    margin-bottom: 15px;



}







.tech-tags {



    display: flex;



    flex-wrap: wrap;



    gap: 8px;







}







.bg-gray-100 {



    --tw-bg-opacity: 1;



    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));



}







.tech-tag {







    padding-left: 0.5rem;



    padding-right: 0.5rem;



    padding-top: 0.25rem;



    padding-bottom: 0.25rem;



    border-radius: 0.375rem;



    font-size: 0.75rem;



    line-height: 1rem;







}







.view-details {



    gap: 5px;



    text-decoration: none;



    font-weight: 500;



    margin-top: 20px;



    padding-top: 16px;



    display: flex;



    justify-content: space-between;



    align-items: center;



    border-top: 1px solid #e5e7eb;



}







.view-details:hover {



    color: #5fd890;



}







.hero-container {



    background: linear-gradient(90deg, rgba(94, 214, 147, 1) 0%, rgba(103, 211, 149, 1) 85%);



    border-radius: 1rem;



    padding: 2rem;



    text-align: center;







}







.text-2xl {



    font-size: 1.5rem;



    line-height: 2rem;



}







.text-white {



    --tw-text-opacity: 1;



    color: rgb(255 255 255 / var(--tw-text-opacity, 1));



}







.text-blue-100 {



    --tw-text-opacity: 1;



    color: rgb(219 234 254 / var(--tw-text-opacity, 1));



}







.max-w-2xl {



    max-width: 42rem;



}







.mx-auto {



    margin-left: auto;



    margin-right: auto;



}







.cta-button {



    background: white;



    color: #5fd890;



    font-size: 1rem;



    font-weight: 500;



    padding: 14px 32px;



    border: none;



    border-radius: 8px;



    text-decoration: none;



    display: inline-block;



    transition: all 0.2s ease;



    cursor: pointer;



    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);



}







.cta-button:hover {



    background: #f4f4f4;



    color: #5fd890;



}







.footer {



    background-color: rgb(31, 41, 55);







    color: #9ca3af;



    padding: 50px 0 30px 0;



}







.footer-content {



    max-width: 1200px;



    margin: 0 auto;



    padding: 0 0px;



}







.footer-grid {



    display: grid;



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



    /* 4 equal columns */



    gap: 40px;



    margin-bottom: 30px;



}











.footer-brand {



    display: flex;



    align-items: center;



    margin-bottom: 20px;







}











.footer-brand h3 {



    color: white;



    font-size: 1.25rem;



    font-weight: 600;



    margin: 0;



    margin-left: 12px;



}







.footer-description {



    font-size: 16px;



    line-height: 1.5;



    margin-bottom: 25px;



    max-width: 300px;



}







.footer-contact {



    list-style: none;



    padding: 0;



    margin: 0;



}







.footer-contact li {



    display: flex;



    align-items: center;



    margin-bottom: 6px;



    font-size: 0.9rem;



}







.footer-contact i {



    width: 16px;



    margin-right: 12px;



    color: #9ca3af;



}







.footer-section h4 {



    color: white;



    font-size: 1rem;



    font-weight: 600;



    margin-bottom: 16px;



}







.footer-links {



    list-style: none;



    padding: 0;



    margin: 0;



}







.footer-links li {



    margin-bottom: 8px;



}







.footer-links a {



    color: #9ca3af;



    text-decoration: none;



    font-size: 16px;



    transition: color 0.2s ease;



}







.footer-links a:hover {



    color: white;



}







.social-icons {



    display: flex;



    gap: 16px;



    margin-top: 8px;



}







.social-icons a {



    color: #9ca3af;



    font-size: 1.2rem;



    transition: color 0.2s ease;



}







.social-icons a:hover {



    color: white;



}







.footer-bottom {



    border-top: 1px solid #374151;



    padding-top: 20px;



    display: flex;



    justify-content: space-between;



    align-items: center;



    font-size: 0.875rem;



}







.footer-bottom-right {



    display: flex;



    align-items: center;



    gap: 8px;



}







.heart {



    color: #ef4444;



    font-size: 1rem;



}







/* === Mobile Responsive Fixes === */



@media (max-width: 576px) {



    .hero h1 {



        font-size: 2rem !important;



    }







    .text-xl {



        font-size: 1rem !important;



    }







    .hero {



        padding: 7rem 1rem 4rem 1rem !important;



        /* top  right  bottom left */



    }















    .features {



        flex-direction: column !important;







    }



    .feature span {



        white-space: nowrap;



    }



    .feature span br {



        display: none;



    }







    .cta-buttons {



        flex-direction: column !important;



        align-items: stretch !important;



        gap: 0.75rem !important;



    }







    .solution-card {



        padding: 1rem !important;



    }







    .hero-image {



        transform: none !important;



        margin-top: 2rem !important;



    }







    .project-card {



        margin-bottom: 1.5rem !important;



    }



















}



@media (max-width: 768px) {



    /* Stack footer sections vertically */











    .footer {



        padding: 1.5rem;



    }







    /* Show brand at the top left */



    .footer-main {



        display: block;



        margin-bottom: 2rem;



    }







    .footer-brand {



        display: flex;



        align-items: center;



        gap: 0.5rem;



        margin-bottom: 1rem;



    }











    /* Stack sections vertically */



    .footer-grid {



        display: flex;



        flex-direction: column;



        gap: 2rem;



    }







    .footer-section {



        width: 100%;



    }







    .footer-section h3 {



        margin-bottom: 1rem;



        font-size: 1.125rem;



    }







    .footer-links {



        margin-bottom: 0;



    }







    .footer-links li {



        margin-bottom: 0.75rem;



    }







    /* Social icons under Suivez-nous */



    .social-icons {



        display: flex;



        gap: 1rem;



        margin-top: 0.5rem;



    }







    /* Center the footer bottom */



    .footer-bottom {



        display: flex;



        flex-direction: column;



        align-items: center;



        text-align: center;



        gap: 0.25rem;



        margin-top: 2rem;



        padding-top: 1.5rem;



        border-top: 1px solid #4b5563;



    }







    .footer-bottom-right {



        display: flex;



        align-items: center;



        gap: 0.25rem;



        justify-content: center;



    }



    .mobile-menu-toggle {



        display: block;



        cursor: pointer;



        color: #000;



    }







    .mobile-nav {



        position: fixed;



        top: 0;



        left: 0;



        right: 0;



        background: #fff;



        z-index: 9999;



        padding: 1rem 1.5rem;



        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);



        transform: translateY(-100%);



        transition: transform 0.3s ease-in-out;



    }







    .mobile-nav.open {



        transform: translateY(0);



    }







    .mobile-nav-header {



        display: flex;



        justify-content: space-between;



        align-items: center;



        margin-bottom: 1.5rem;



    }







    .nav-links-mobile {



        list-style: none;



        padding: 0;



        margin: 0;



    }







    .nav-links-mobile li {



        margin-bottom: 1rem;



    }







    .nav-links-mobile a {



        font-size: 1rem;



        font-weight: 500;



        color: #111827;



        text-decoration: none;



    }







    .nav-links-mobile a:hover {



        color: #5fd890;



    }







    .close-btn {



        font-size: 1.25rem;



        cursor: pointer;



    }







    .nav-links {



        display: none !important;



    }



}



/* Prevent horizontal scroll on mobile */



body,
html {



    overflow-x: hidden;



}







/* Fix potential large width from transform or padding */



* {



    max-width: 100%;



    box-sizing: border-box;



}