@font-face {
    font-family: 'syne-regular';
    src: url('syne-web-kit/syne-regular-webfont.woff2') format('woff2'),
         url('syne-web-kit/syne-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*{
    padding: 0;
    margin: 0;
    font-family: "syne-regular", sans-serif;
    box-sizing: border-box;
    -webkit-backface-visibility:hidden;
}

p {
    outline: 1px solid transparent;
    will-change: transform;
    box-shadow: 0 0 1px rgba(255,255,255,0);
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-chars: 6 3 3;
    -webkit-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-last: always;
    -webkit-hyphenate-limit-zone: 8%;     -moz-hyphens: auto;
    -moz-hyphenate-limit-chars: 6 3 3;
    -moz-hyphenate-limit-lines: 2;
    -moz-hyphenate-limit-last: always;
    -moz-hyphenate-limit-zone: 8%;     -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: 6 3 3;
    -ms-hyphenate-limit-lines: 2;
    -ms-hyphenate-limit-last: always;
    -ms-hyphenate-limit-zone: 8%;     hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

/* First fix: Make the about section take full width */
#about {
width: 100%;
margin-top: 70px;
margin-bottom: 20px; /* Add some space between about and the next section */
padding: 0 25px;
}

/* Main section container */
#about-section {
display: flex;
flex-direction: row;
width: 100%;
height: 30vh;
padding: 0 25px;
}

#about-container {
    display: flex;
    flex-direction: column;
    min-height: 95vh;
padding: 10px 0 10px 0; /* Add some vertical padding */
}
.spacer {
    flex-grow: 1; /* This makes the spacer expand to fill available space */
}
#intro{
    max-width: 1150px;
}
/* Ensure services and contact are aligned properly */
#services, #contact {
width: 50%; /* Use percentage instead of vw for these children */
}

#services {
flex-grow: 1;
}

#contact {
flex-grow: 1;
}

.category-name {
margin-bottom: 10px;
}



p{
    cursor: default;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
  p, a {
    color: inherit;
    display: inline-block;
    /* cursor: pointer; */
}

.hover-text, .hover-link {
    text-decoration: none;
    display: inline-block;
}

/* Transition effect for fading the color back and rotation */
/* span.fade {
    transition: color 1s ease, transform 0.5s ease; 
}

span {
    margin-right: 5px;
    display: inline-block; 
    cursor: default;
}

.hover-link {
    transition: color 0.5s ease;
} */

/* Add this CSS to manage the space between spans */
.hover-text span {
    word-spacing: -0.25em;  /* Adjust the space between spans */
    display: inline-block;  /* Ensure inline-block to allow spacing control */
}

/* Ensure spacing for links behaves correctly */
.hover-link {
    word-spacing: 0;  /* No special handling needed for links */
}



#intro{
   /*  padding: 30px; */
    /* color: black; */
    /* max-width: 1200px; */
    font-size: 35px;
    line-height: 47px;
    /* padding: 15px; */
}
#services, #contact{
    font-size: 30px;
    line-height: 40px;

}
#contact{
   padding-bottom: 20px;

}
/* #about-section{
    height: calc(100vh - 60px);
    height: 95vh;
} */

.category-name{
    font-size: 15px;
    border-bottom: 1px solid rgb(73, 73, 73);
    padding-bottom: 5px;
    width: 100%;
}


  /* Media query */
@media (max-width: 800px) {
    #about-section, #about {
      flex-direction: column;
      padding: 0 10px;
    }
    #about{
        margin-top: 30px;
           padding-bottom: 0;
        margin-bottom: 0;
    }
    #services{
        margin-top: 0;
    }
    .category:first{
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .spacer{
        display: none;
    }
    footer{
    /*     position: absolute;
        bottom: 0; */
        width: 100%;
        margin-top: 10px;
        padding: 5px 0 5px 5px;
        border-top: 1px solid rgb(73, 73, 73);
        border-bottom: 1px solid rgb(73, 73, 73);
    }
  footer {
    position: relative; /* Not fixed */
    width: 100%;
    height: 40px; /* Or your preferred height */
    margin-top: auto; /* Pushes footer to the bottom */
    padding: 0;
    border-top: 1px solid rgb(73, 73, 73);
    border-bottom: 1px solid rgb(73, 73, 73);
    background-color: #f0f0f0;
  }
  /* Assurer que la classe hide fonctionne correctement si nécessaire */
  .hide {
    display: inline; /* Ou ajustez selon votre besoin */
  }
    footer *{
        text-align: center;
    }
    #services, #contact {
    width: 100%;
    }
    .hide, footer{
        display: none;
    }
    .hover-text, #intro, .category p:not(.category-name), #contact{
    font-size: 23px;
    line-height: 34px;
    }

    }


  
/**/
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
  }
  
  /* Your main content container */
  #content-wrapper {
    flex: 1;
  }

.line-break-mobile {
    display: none;
}

@media (max-width: 600px) {
    .line-break-mobile {
        display: block;
        line-height: .01;
    }
    .line-break-desktop {
        display: none;
    }
}

  
  .scroll-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
  }

  .hover-text a.hover-link {
    display: inline; /* Assure que le lien se comporte comme du texte */
    text-decoration: none; /* Enlève le soulignement par défaut */
    color: inherit; /* Utilise la même couleur que le texte parent */
    
    box-sizing: border-box; /* Assure que le modèle de boîte est cohérent */
    /* Option: ajouter une légère indication visuelle qu'il s'agit d'un lien */
     /* Ou tout autre style subtil */
  }
  


  .hover-link {
    display: inline;
    text-decoration: none;
    
    /* Retiré: border-bottom pour éviter tout conflit */
  }
  
  /* Effet de survol - style original */
  .hover-link:hover {
    text-decoration: underline 1.5px solid black !important;
  }
  

  /*  P TAGS FONT SMOOTHING  */
  /* === P TAG SPECIFIC CHROME ANTI-ALIASING & SMOOTH BORDERS CSS === */

/* 1. BASIC P TAG FONT SMOOTHING */
p {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 2. P TAGS WITH TRANSFORMS & ROTATIONS */
p.rotate,
p[style*="transform"],
p[style*="rotate"] {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 3. P TAGS WITH TEXT STROKE */
p[style*="text-stroke"],
p.-webkit-text-stroke,
p.text-stroke {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    -webkit-text-stroke-linejoin: round;
    -webkit-text-stroke-linecap: round;
    /* Add slight stroke in same color for better anti-aliasing */
    -webkit-text-stroke: 0.025em currentColor;
}

/* 4. P TAGS WITH HOVER EFFECTS */
p:hover {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, color;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 5. P TAGS IN ANIMATIONS */
p.animate,
p[style*="transition"],
p.transition {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 6. P TAGS WITH SPECIFIC CLASSES */
p.hover-text,
p.interactive,
p.effect {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    transform: translateZ(0);
}

/* 7. P TAGS WITH BORDERS */
p[style*="border"],
p.bordered {
    /* Use box-shadow instead of borders for smoother edges */
    border: none !important;
    box-shadow: 0 0 0 1px currentColor;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 8. P TAGS WITH ROUNDED CORNERS */
p[style*="border-radius"],
p.rounded {
    background-clip: content-box;
    padding: 1px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 9. P TAGS FOR HIGH-DPI DISPLAYS */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    p {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: geometricPrecision;
        font-feature-settings: "kern" 1;
        font-optical-sizing: auto;
    }
}

/* 10. CHROME-SPECIFIC P TAG FIXES */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    p {
        -webkit-font-smoothing: antialiased;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
    }
    
    /* P tags with any webkit text stroke */
    p[style*="-webkit-text-stroke"] {
        -webkit-text-stroke-linejoin: round;
        -webkit-text-stroke-linecap: round;
        text-rendering: geometricPrecision;
    }
}

/* 11. WEBKIT-ONLY P TAG SMOOTHING */
@supports (-webkit-text-stroke: 1px black) {
    p {
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke: 0.01em transparent;
    }
}

/* 12. P TAGS WITH SPECIFIC TEXT EFFECTS */
p.outline,
p.stroke,
p.border-text {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    -webkit-text-stroke-linejoin: round;
    -webkit-text-stroke-linecap: round;
    /* Hardware acceleration */
    transform: translateZ(0);
    will-change: transform;
}

/* 13. P TAGS WITH TEXT SHADOW OUTLINES */
p.text-outline {
    text-shadow: 
        -1px -1px 0 currentColor,
         1px -1px 0 currentColor,
        -1px  1px 0 currentColor,
         1px  1px 0 currentColor;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 14. PERFORMANCE-OPTIMIZED P TAGS */
p.performance {
    -webkit-font-smoothing: antialiased;
    will-change: transform;
    contain: layout style paint;
    transform: translateZ(0);
}

/* 15. COMPREHENSIVE P TAG SMOOTHING */
p.ultra-smooth {
    /* Font smoothing */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    
    /* Text rendering */
    text-rendering: geometricPrecision;
    font-feature-settings: "kern" 1;
    
    /* Transform smoothing */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
    /* Hardware acceleration */
    will-change: transform;
    transform: translateZ(0);
    
    /* Text stroke smoothing */
    -webkit-text-stroke-linejoin: round;
    -webkit-text-stroke-linecap: round;
}

/* 16. SPECIFIC HOVER STATES FOR P TAGS */
p.hover-text:hover {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    will-change: transform, color;
}

/* 17. P TAGS WITH ROTATED TEXT */
p.rotated,
p[style*="rotate"] {
    /* Micro rotation to avoid jagged 45-degree increments */
    transform: rotate(2.0001deg) translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 18. P TAGS WITH NESTED SPANS (for word-level effects) */
p span {
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 19. P TAGS WITH LINKS */
p a {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 20. UTILITY CLASSES FOR P TAGS */
p.subpixel-antialiased { -webkit-font-smoothing: subpixel-antialiased; }
p.antialiased { -webkit-font-smoothing: antialiased; }
p.force-3d { transform: translateZ(0); }
p.smooth-text { text-rendering: optimizeLegibility; }
p.crisp-edges { image-rendering: crisp-edges; }

/* === SPECIFIC USE CASES === */

/* For p tags with hover text effects like your script */
p.hover-text {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    transform: translateZ(0);
}

p.hover-text span {
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, color;
}

/* For p tags with webkit text stroke */
p[style*="-webkit-text-stroke"] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-stroke-linejoin: round;
    -webkit-text-stroke-linecap: round;
    text-rendering: geometricPrecision;
    transform: translateZ(0);
}

/* PROCESSING */
.hover-text {
    font-family: inherit;
    font-size: inherit;
}

.hover-text span {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: none;
    transform-origin: center center;
    font-family: inherit;
}

.hover-text a {
    color: inherit;
    text-decoration: underline;
}


#processing-canvas {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2;
}