*{

    font-family: "syne-regular", sans-serif;
    font-variant-alternates: normal;
    font-variant-emoji: normal;
}

body{
    
    background-color: #F2F2F2;
    font-smooth: never;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  max-width: 100%;

}
@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;
}
@font-face {
    font-family: 'syne-medium';
    src: url('syne-web-kit/syne-medium-webfont.woff2') format('woff2'),
         url('syne-web-kit/syne-medium-webfont.woff') format('woff');
    font-weight: medium;
    font-style: medium;
}
@font-face {
    font-family: 'syne-bold';
    src: url('syne-web-kit/syne-bold-webfont.woff2') format('woff2'),
         url('syne-web-kit/syne-extrabold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: bold;
}
@font-face {
    font-family: 'NotoSansSymbols2';
    src: url('NotoSansSymbols2-Regular.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}
.noto-sans-symbols-2-regular {
  font-family: "Noto2", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.symbol{
    font-family: Noto2, NotoSansSymbols2, sans;
}


/* @font-face {
    font-family: 'uncut_sansmedium_italic';
    src: url('/webfontkit/uncutsans-mediumitalic.woff2') format('woff2'),
         url('/webfontkit/uncutsans-mediumitalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
} */
/*********************** hyphenation *************************/
/* French language setting for hyphenation */
html {
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
  }
  
  /* Paragraph styles */
  p {
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
  
    word-break: break-word; /* Allows breaking long words onto the next line */
    overflow-wrap: break-word; /* Manages word wrapping for overflow situations */
    line-height: 1.5; /* Provides readable line spacing */
  
    /* Refined hyphenation settings */
    hyphenate-limit-chars: 12 4 3; /* Min word length of 10, 4 chars before, 3 after hyphen */
    hyphenate-limit-lines: 1; /* Limit to 1 consecutive hyphenated line */
    hyphenate-limit-zone: 12%; /* Expands the hyphenation-free zone at line ends */
  }
  
html{
  /*   background-color: lightgray; */
  font-smooth: never;
-webkit-font-smoothing : none;
}

/* Change font alternates */

/* 
 * Replace alternate 'g' with standard 'g' using font-feature-settings
 * The 'ss01' feature in many fonts controls alternate glyphs
 * For Syne specifically, we need to ensure standard 'g' is used
 */
 .standard-g {
    font-feature-settings: "ss01" 0;
  }
  
  /* 
   * Convert lowercase/oldstyle numbers to full-size lining numbers
   * 'lnum' enables lining figures (full-height digits)
   * This disables oldstyle/lowercase numbers
   */
  .lining-numbers {
    font-feature-settings: "lnum" on;
  }
  
  /* 
   * If you want to apply both adjustments together
   */
  .typography-adjusted {
    font-feature-settings: "ss01" 0, "lnum" on;
  }
  
  /* 
   * Apply to specific elements as needed
   * Example usage for various elements:
   */
  h1, h2, h3, h4, h5, h6, p, span, div {
    font-family: 'syne-regular', sans-serif;
    font-feature-settings: "ss01" 0, "lnum" on;
  }
/**************************************** HEADER ****************************************/
header{
    height: 60px;
    width: 100%;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    letter-spacing: .02rem;
    /* background: #ffffff;
    background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);

    background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0.9) 20%, 
    rgba(255, 255, 255, 0.7) 40%, 
    rgba(255, 255, 255, 0.4) 60%, 
    rgba(255, 255, 255, 0.1) 80%, 
    rgba(255, 255, 255, 0) 100%)
}

header>*{
    font-size: 15px;
    padding: 25px;
    margin-top: -10px;
    text-decoration: none;
    color: black;
    font-weight: regular;
   
}

h1{
    font-size: 15px;
    font-weight: normal;
}
@media (max-width: 800px) {
    .hide{
        display: none;
    }
}

/******************************************** ARROW SECTION ********************************************/
#arrows{
    height: 60px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
gap: 0; /* No gap between grid items */
}


.flex2-container{
text-transform: uppercase;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}

.flex2-container>*{
text-decoration: none;
}
.flex2-container div{
    display: flex;
    flex-direction: row;
    /*  justify-content: start; */
    min-width: 46vw;
    padding: 10px;
}
.project-type{
    padding-left: 10px;
    font-style: italic;
}
.arrow{
    font-size: 60px;
}
.arrow1, .arrow2{
    position: absolute;
    top: 50%; /* Vertically center it in the parent */
transform: translateY(-50%); /* Adjust for the height of the element */
}
.arrow1{
right: 10px; /* Lock the <p> to the right side */
}
.arrow2{
position: absolute;
left: 10px; /* Initial left alignment */
top: 50%;
transform: translateY(-50%);
}

 
   

.project-container-suivant{
    display: flex;
    justify-content: flex-end; /* Aligns the text to the right */
    width: 100%;
}

@media (max-width: 800px) {
    header *{
        font-size: 14px;
        padding: 5px;
        margin-top: -10px;;
    }
    #arrows{
        grid-template-columns: repeat(1, 1fr); /* 2 equal columns */
        height: 150px;
    }

    .flex2-container div{
        flex-direction: column;
    }
    .project-type{
        padding-left: 0;
        /*  padding-top: 5px; */
    }
    .flex2-container.suivant {
        position: relative; /* Ensure the arrow is positioned relative to this parent */
    }

    .arrow2 {
        position: absolute;
        right: 10px; /* Move it to the right */
        left: auto; /* Disable left positioning */
        top: 50%;
        transform: translateY(-50%);
    }
}
    
    /******************************************** FOOTER ********************************************/
/* footer{
    background-color: rgb(118, 118, 118);
    background-color: #f2f2f2;
    color: rgb(101, 101, 101);
    height: 30px;
    position: relative;
    text-align: center;


    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    
}
 */
 /* Conteneur pour le texte défilant */
 .scrolling-text {
    display: flex;
    white-space: nowrap;
    animation: scrollText 60s linear infinite;
}

/* Style pour le texte */
.scrolling-text p {
    margin-right: 50px; /* Espace entre les duplications du texte */
}   

/* Animation pour faire défiler le texte en continu */
@keyframes scrollText {
    0% {
        transform: translateX(0); /* Texte commence normalement */
    }
    100% {
        transform: translateX(-100%); /* Le texte défile vers la gauche */
    }
}
/* Style pour le texte */

/**** FOOTER *****/
footer {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 0;
    padding: 5px 0 5px 5px;
    border-top: 1px solid rgb(73, 73, 73);
    border-bottom: 1px solid rgb(73, 73, 73);
    position: relative; /* Not absolute */
    z-index: auto; /* Or a lower z-index than other elements */
    width: 100%;
    /* padding: 5px; */
    border-top: 1px solid rgb(73, 73, 73);
    border-bottom: 1px solid rgb(73, 73, 73);
    clear: both; /* This ensures it appears below floated elements */
  }
    footer *{
        text-align: center;
    }
    
/* Container to hold the scrolling text */
.scroll-container {
    background-color: #f0f0f0; /* Background color (optional) */
    width: 100%; /* Full width */
    overflow: hidden; /* Hide the text overflow */
    white-space: nowrap; /* Prevent text wrapping */
    position: relative; /* For positioning the child elements */
    
    
}
main, #main-content, #about-section {
    flex: 1;
  }

/* The text to scroll */
.scroll-text {
    display: inline-block;
    animation: scrollText 60s linear infinite; /* Smooth, infinite scrolling */
}

/* Keyframes for continuous scrolling */
@keyframes scrollText {
    0% {
        transform: translateX(0); /* Start from the left */
    }
    100% {
        transform: translateX(-50%); /* Move left by 50% of its total width */
    }
}

/* Duplicate text for seamless scrolling */
.scroll-text::after {
    content: attr(data-text); /* Duplicate the text */
}

.symbol-svg{
    /* padding-top: 10px; */
    height: 25px;
   vertical-align: middle;
   padding-bottom: 6px;
  
}