.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(37 99 235 / 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(29 78 216 / var(--tw-bg-opacity, 1));

    transform: translateY(-2px);

    box-shadow: 0 6px 25px rgba(66, 133, 244, 0.4);

}



.btn-secondary {

    background: transparent;

    color: #2563eb;

    border: 2px solid #2563eb;

}



.btn-secondary:hover {

    background: #2563eb;

    color: white;

    transform: translateY(-2px);

    border: 2px solid #2563eb;

}



/* 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: #2563eb;

    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;

}



.text-blue-600 {

    --tw-text-opacity: 1;

    color: rgb(37 99 235 / var(--tw-text-opacity, 1));

}



.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: #2563eb;

    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: #007bff;

}



.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: #0056b3;

}



.hero-container {

    background: linear-gradient(90deg, rgba(10, 75, 240, 1) 0%, rgba(84, 77, 232, 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: #4366F7;

    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: #4366F7;

}



.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: #2563eb;

  }



  .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;

}