/* Proxima Nova */
  @font-face {
    font-family: "proxima-nova";
    src: url("https://use.typekit.net/af/1be3c2/00000000000000007735e606/30/l?subset_id=2&fvd=n3&v=3") format("woff2"),
        url("https://use.typekit.net/af/1be3c2/00000000000000007735e606/30/d?subset_id=2&fvd=n3&v=3") format("woff"),
        url("https://use.typekit.net/af/1be3c2/00000000000000007735e606/30/a?subset_id=2&fvd=n3&v=3") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
  }

  @font-face {
    font-family: "proxima-nova";
    src: url("https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/l?subset_id=2&fvd=n4&v=3") format("woff2"),
        url("https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/d?subset_id=2&fvd=n4&v=3") format("woff"),
        url("https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/a?subset_id=2&fvd=n4&v=3") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
  }

  @font-face {
    font-family: "proxima-nova";
    src: url("https://use.typekit.net/af/23e139/00000000000000007735e605/30/l?subset_id=2&fvd=n5&v=3") format("woff2"),
        url("https://use.typekit.net/af/23e139/00000000000000007735e605/30/d?subset_id=2&fvd=n5&v=3") format("woff"),
        url("https://use.typekit.net/af/23e139/00000000000000007735e605/30/a?subset_id=2&fvd=n5&v=3") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
  }

  @font-face {
    font-family: "proxima-nova";
    src: url("https://use.typekit.net/af/78aca8/00000000000000007735e60d/30/l?subset_id=2&fvd=n6&v=3") format("woff2"),
        url("https://use.typekit.net/af/78aca8/00000000000000007735e60d/30/d?subset_id=2&fvd=n6&v=3") format("woff"),
        url("https://use.typekit.net/af/78aca8/00000000000000007735e60d/30/a?subset_id=2&fvd=n6&v=3") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
  }

  @font-face {
    font-family: "proxima-nova";
    src: url("https://use.typekit.net/af/2555e1/00000000000000007735e603/30/l?subset_id=2&fvd=n7&v=3") format("woff2"),
        url("https://use.typekit.net/af/2555e1/00000000000000007735e603/30/d?subset_id=2&fvd=n7&v=3") format("woff"),
        url("https://use.typekit.net/af/2555e1/00000000000000007735e603/30/a?subset_id=2&fvd=n7&v=3") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
  }

  @font-face {
    font-family: "proxima-nova";
    src: url("https://use.typekit.net/af/bd0e3a/00000000000000007758cf8e/30/l?subset_id=2&fvd=i6&v=3") format("woff2"),
        url("https://use.typekit.net/af/bd0e3a/00000000000000007758cf8e/30/d?subset_id=2&fvd=i6&v=3") format("woff"),
        url("https://use.typekit.net/af/bd0e3a/00000000000000007758cf8e/30/a?subset_id=2&fvd=i6&v=3") format("opentype");
    font-weight: 600;
    font-style: italic;
    font-stretch: normal;
    font-display: auto;
  }

  @font-face {
    font-family: "proxima-nova";
    src: url("https://use.typekit.net/af/474f13/00000000000000007758cf7d/30/l?subset_id=2&fvd=i7&v=3") format("woff2"),
        url("https://use.typekit.net/af/474f13/00000000000000007758cf7d/30/d?subset_id=2&fvd=i7&v=3") format("woff"),
        url("https://use.typekit.net/af/474f13/00000000000000007758cf7d/30/a?subset_id=2&fvd=i7&v=3") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-stretch: normal;
    font-display: auto;
  }

  /* Adobe Garamond Pro */
  @font-face {
    font-family: "adobe-garamond-pro";
    src: url("https://use.typekit.net/af/ae2c96/00000000000000007735d927/30/l?subset_id=2&fvd=n4&v=3") format("woff2"),
        url("https://use.typekit.net/af/ae2c96/00000000000000007735d927/30/d?subset_id=2&fvd=n4&v=3") format("woff"),
        url("https://use.typekit.net/af/ae2c96/00000000000000007735d927/30/a?subset_id=2&fvd=n4&v=3") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
  }

  @font-face {
    font-family: "adobe-garamond-pro";
    src: url("https://use.typekit.net/af/1f8c82/00000000000000007735d92a/30/l?subset_id=2&fvd=n6&v=3") format("woff2"),
        url("https://use.typekit.net/af/1f8c82/00000000000000007735d92a/30/d?subset_id=2&fvd=n6&v=3") format("woff"),
        url("https://use.typekit.net/af/1f8c82/00000000000000007735d92a/30/a?subset_id=2&fvd=n6&v=3") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
  }

  @font-face {
    font-family: "adobe-garamond-pro";
    src: url("https://use.typekit.net/af/e1c5c9/00000000000000007735d91e/30/l?subset_id=2&fvd=n7&v=3") format("woff2"),
        url("https://use.typekit.net/af/e1c5c9/00000000000000007735d91e/30/d?subset_id=2&fvd=n7&v=3") format("woff"),
        url("https://use.typekit.net/af/e1c5c9/00000000000000007735d91e/30/a?subset_id=2&fvd=n7&v=3") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
  }

  @font-face {
    font-family: "adobe-garamond-pro";
    src: url("https://use.typekit.net/af/28328c/00000000000000007735d924/30/l?subset_id=2&fvd=i4&v=3") format("woff2"),
        url("https://use.typekit.net/af/28328c/00000000000000007735d924/30/d?subset_id=2&fvd=i4&v=3") format("woff"),
        url("https://use.typekit.net/af/28328c/00000000000000007735d924/30/a?subset_id=2&fvd=i4&v=3") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-stretch: normal;
    font-display: auto;
  }

  @font-face {
    font-family: "adobe-garamond-pro";
    src: url("https://use.typekit.net/af/095ec6/00000000000000007735d921/30/l?subset_id=2&fvd=i7&v=3") format("woff2"),
        url("https://use.typekit.net/af/095ec6/00000000000000007735d921/30/d?subset_id=2&fvd=i7&v=3") format("woff"),
        url("https://use.typekit.net/af/095ec6/00000000000000007735d921/30/a?subset_id=2&fvd=i7&v=3") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-stretch: normal;
    font-display: auto;
  }
  /* Reset body to remove constraints */
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  /* Style de la Navbar générée par Quarto */
  .navbar {
    background: transparent !important;
    padding: 20px 40px !important;
    z-index: 10;
    border: none !important;
  }

  /* Logo ou titre */
  .navbar-brand {
    color: #fff !important;
    font-size: 1.5em !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
  }

  /* Liens de navigation */
  .navbar-nav .nav-link {
    color: #fff !important;
    font-size: 1.1em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    margin-left: 30px !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
    transition: color 0.3s ease !important;
  }

  .navbar-nav .nav-link:hover {
    color: #ddd !important;
  }

  /* Bouton Résumé (à droite) */
  .navbar-nav .nav-item:last-child .nav-link {
    background-color: #fff !important;
    color: #000 !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    text-shadow: none !important;
    transition: background-color 0.3s ease !important;
  }

  .navbar-nav .nav-item:last-child .nav-link:hover {
    background-color: #eee !important;
  }

  /* Page Title */
  .page-title {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 3em;
    font-weight: bold;
    color: #333;
  }

  /* Profile Photo */
  .profile-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70vh; /* Augmenter à 90vh pour repousser le contenu */
    z-index: -1;
  }

  .profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .photo-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    z-index: 1;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
  }

  /* Profile Content */
  .profile-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: -30px 0px 0px; /* Augmenter à 300px pour descendre encore plus */
    min-height: 100vh;
    margin-bottom: 0px;
    margin-top: -150px;
    
  }

  .about-left ul li {
    color: rgb(97, 94, 94);
    font-family: "proxima-nova", serif;
    font-weight: 400;
    font-size: 0.7em;
    text-transform: uppercase;
    margin-bottom: 10px; /* Espacement entre les éléments */
    cursor: pointer; /* Indique que c’est cliquable */
    transition: color 0.3s ease, transform 0.2s ease; /* Animation au survol */
    list-style-type: none; /
  }


  /* About Section */
  .about-section {
    display: flex;
    justify-content: flex-start;
    margin-left: 0px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
  }


  .about-right {
    width: 65%;
    margin-left: 160px;
    position: absolute;
  }

  .about-right p {
    color: #414040;
    font-size: 1em;
    line-height: 1.6;
    margin-left: 70px;
    font-family: "adobe-garamond-pro", serif;
  }

  .about-right ul {
    padding-left: 20px;
    margin-bottom: 0px;
    list-style: none; /* Supprimer les puces */
    font-family: "adobe-garamond-pro", serif;
  }

  .about-right img {
    width: 60px;
    height: 30px;
    object-fit: cover;
    margin-bottom: 30px; /* Espacement actuel */
    position: absolute;
    margin-left:600px;
    display: block;
    

  
  }

  .about-right h3 {
    color: #000;
    font-size: 1.5em;
    text-transform: capitalize;
    margin-left: 50px;
    font-family: "adobe-garamond-pro", serif; /* Proxima Nova avec fallback */
    font-weight: 400; /* Choisissez le poids désiré : 300, 400, 500, 600, 700 */
    font-style: normal; /* ou italic */

    margin-top: 40px;

    
  }

  .about-right h4 {
    color: #414040;
    top: 40px;
    font-size: 0.9em;
    text-transform: capitalize;
    margin-bottom: 10px;
    margin-left: 50px;
    font-family: "adobe-garamond-pro", serif; /* Proxima Nova avec fallback */
    font-weight: 400; /* Choisissez le poids désiré : 300, 400, 500, 600, 700 */
    font-style: normal; /* ou italic */
    margin-top: 40px;

  }

  .company-description {
    margin-left: 28px; /* Vous pouvez ajuster la valeur selon vos besoins */
    font-family: "adobe-garamond-pro", serif;
    color:#545454
    

  }

  .about-right .company-descriptionbtp {
    margin-right: 40px !important;
    font-family: "adobe-garamond-pro", serif; /* Proxima Nova avec fallback */
    font-weight: 400; /* Choisissez le poids désiré : 300, 400, 500, 600, 700 */
    font-style: normal; /* ou italic */


    color: #514f4f !important;
    
  }

  .about-right .company-descriptionbtp h4{
    color: #414040;
    top: 40px;
    font-size: 0.9em;
    text-transform: capitalize;
    margin-bottom: 10px;
    margin-left: 50px;
    font-family: "adobe-garamond-pro", serif; /* Proxima Nova avec fallback */
    font-weight: 400; /* Choisissez le poids désiré : 300, 400, 500, 600, 700 */
    font-style: normal; /* ou italic */
    margin-top: 40px;

  }

  .about-right ol {
    padding-left: 20px;
    
  }

  .about-right ol li {
    color: #333;
    font-size: 1em;
    line-height: 1.6;
    white-space: nowrap;
    font-family: "adobe-garamond-pro", serif; /* Proxima Nova avec fallback */
    font-weight: 400; /* Choisissez le poids désiré : 300, 400, 500, 600, 700 */
    font-style: normal; /* ou italic */

  
  }

  ul li {
    white-space: nowrap;
  }



  .about-right p {
    color: #333;
    font-size: 1em;
    line-height: 1.6;
  }



  /* About Section */
  .about-section {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
  }




  .about-left h3 {
    color: #000;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: capitalize; 
  
  }

  .about-left {
    width: 30%;
    margin-left: -70px;
    position: absolute;
    

  }

  .about-left h4 {
    color: #414040;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: capitalize; 
  
  }



  /* Style pour le titre "About" */
  .about-left h2 {
    color: #00AEDB;
    font-family: "proxima-nova", serif; /* Proxima Nova avec fallback */
    font-weight: 400; /* Choisissez le poids désiré : 300, 400, 500, 600, 700 */
    font-style: normal; /* ou italic */

    font-size: 1.5em;
    margin-bottom: 20px;
    text-transform: capitalize; /* Première lettre en majuscule, reste en minuscules */
  }



  /* Style pour les éléments de liste comme "WORK EXPERIENCE", "EDUCATION", etc. */
  .about-left ul li {
    color: rgb(97, 94, 94); /* Couleur gris foncé pour la liste */
    
    transition: color 0.3s ease; /* Transition fluide */
    font-family: "proxima-nova", serif; /* Proxima Nova avec fallback */
    font-weight: 400; /* Choisissez le poids désiré : 300, 400, 500, 600, 700 */
    font-style: normal; /* ou italic */

    font-size: 0.7em;
    text-transform: uppercase; /* Pour uniformiser en majuscules */
    margin-bottom: 0px;
  }


  .about-left ul li:hover {
    color: rgb(22, 21, 21); /* Couleur au survol */
  }




  .timeline {
    position: relative;
    padding: 20px 0;
  }

  .timeline::before {
    content: '';
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 20px;
    width: 1px;
    background-color: #8d8b8b; /* Couleur de la ligne verticale */
  }

  .mission {
    position: relative;
    margin-bottom: 40px; /* Espacement entre les missions */
  }

  .mission .circle {
    position: absolute;
    left: 17px; /* Centre le cercle sur la ligne */
    top: 20px; /* Alignement avec le texte */
    width: 7px;
    height: 7px;
    border-radius: 50%; /* Forme circulaire */
    background-color: #9da0a0; /* Couleur du cercle */
    transition: transform 0.3s ease; /* Animation subtile au survol */
  }

  .mission:hover .circle {
    transform: scale(1.2); /* Agrandit légèrement le cercle au survol */
  }

  .mission .description {
    margin-left: 40px; /* Décalage à droite du cercle */
    padding: 15px;
    
  }

  .mission .description h4 {
    margin-top: 0;
    color: #333; /* Couleur sombre pour le titre */
    font-family: "Aboreto", serif;
  }

  .mission .description p {
    margin-bottom: 0;
    color: #666; /* Couleur plus claire pour le texte */
  } 


  /* probtpDataanalyst */


  .experience-content {
    flex: 1; /* Takes up remaining space */
  
  }

  .experience-content h4{
    color: #414040;
    top: 40px;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: capitalize;
    margin-bottom: 10px;
    margin-left: 30px;
    font-family: "adobe-garamond-pro", serif;


  }
  /* Styles pour les liens sociaux */
  .social-links {
    margin-top: 20px; /* Espacement entre le paragraphe et les icônes */
    margin-left: 50px; /* Aligné avec le texte au-dessus */
    display: flex;
    gap: 20px; /* Espacement entre les icônes */
  }

  .social-links a {
    color: #333; /* Couleur par défaut des icônes */
    font-size: 1.5em; /* Taille des icônes (ajustable) */
    text-decoration: none; /* Pas de soulignement */
    transition: color 0.3s ease; /* Animation au survol */
  }

  .social-links a:hover {
    color: #00AEDB; /* Couleur au survol, assortie à votre thème */
  }

  .about-right .skill-icon {
    top: -30px; /* Décalage vers le bas */
    position: relative;
    width: 90px; /* Appliqué */
    height: 30px; /* Appliqué */
  }
  .about-right .icon-rstudio {
    top: -30px; /* Décalage vers le bas */
    position: relative;
    width: 90px; /* Appliqué */
    height: 30px; /* Appliqué */
    margin-left: 550px;
  }


  .about-right .icon-snowflake1 {
    width: 50px; /* Largeur fixe */
    height: auto; /* Hauteur automatique */
    display: block; /* Évite des problèmes d’affichage inline par défaut */
    margin-left: 290px;
  }

  .about-right .icon-snowflake2 {
    width: 50px; /* Largeur fixe */
    height: auto; /* Hauteur automatique */
    display: block; /* Évite des problèmes d’affichage inline par défaut */
    margin-left: 60px;
  }
  .about-right .icon-snowflake3 {
    width: 50px; /* Largeur fixe */
    height: auto; /* Hauteur automatique */
    display: block; /* Évite des problèmes d’affichage inline par défaut */
    margin-left: 0px;
  }
  .about-right .icon-snowflake4 {
    width: 100px; /* Largeur fixe */
    height: auto; /* Hauteur automatique */
    display: block; /* Évite des problèmes d’affichage inline par défaut */
    margin-left: 120px;
  }

  .about-right .icon-snowflake5 {
    width: 50px; /* Largeur fixe */
    height: auto; /* Hauteur automatique */
    display: block; /* Évite des problèmes d’affichage inline par défaut */
    margin-left: 220px;
  }





  /* Project container*/

  /* Conteneur pour les cartes */
  .projects-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espace entre les cartes si vous en ajoutez plusieurs */
    margin-top: 20px;
  }


  /* Style de la carte */
  .article1-card {
    background: #414141;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    margin-left: 50px;
    height: 500px;
    min-height: 500px;
    margin-bottom: 100px;
    
  }


  /* Style de la carte */
  .article2-card {
    background: #414141;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    margin-left: 50px;
    height: 500px;
    
    margin-bottom: 100px;
    padding-bottom: 0;
    
  }


  /* Style de la carte */
  .article3-card {
    background: #414141;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    margin-left: 50px;
    height: 500px;
    min-height: 500px;
  }




  .article-header {
    position: center;
    height: 400px;
    width: 900px;
    max-width: 1200px; /* Ajuste selon ton besoin */
  
  }

  .article-image-cars {
    width: 91.4% !important; /* Forcer la largeur */
    height: 6% !important; /* Forcer la hauteur automatique */;
    margin-left: -70px !important;
    border-radius: 10px 10px 0 0; /* Coins arrondis uniquement en haut */

    margin-top: -15px;}


  .article-image-fifa {
    width: 91.4% !important; /* Forcer la largeur */
    height: 6% !important; /* Forcer la hauteur automatique */;
    margin-left: -70px !important;
    border-radius: 10px 10px 0 0; /* Coins arrondis uniquement en haut */

    margin-top: -15px;}



    .article-image-kpi {
      width: 91.4% !important; /* Forcer la largeur */
      height: 6% !important; /* Forcer la hauteur automatique */;
      margin-left: -70px !important;
      border-radius: 10px 10px 0 0; /* Coins arrondis uniquement en haut */

      margin-top: -1px;
    }


  .article-category {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: #f4a261;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    color: #fff;
  }

  .article-details {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .article-title-wrapper {
    margin-bottom: 15px;
  }

  .article-title {
    font-size: 18px;
    margin: 0;
    color: #ffffff;
    text-transform: capitalize;
    margin-bottom: -20px;
  }



  /* Titre */
  .article-title-fifa {
    font-size: 18px;
    margin: 0;
    color: #ffffff;
    text-transform: capitalize;
    margin-top: -40px;
    border-bottom: none !important;
    text-decoration: none !important;
    
  }


  .article-title-kpi {
    font-size: 18px;
    margin: 0;
    color: #ffffff;
    text-transform: capitalize;
    margin-top: -38px;
    border-bottom: none !important;
    text-decoration: none !important;
  }




  .article-content {
    flex-grow: 1;
  }

  .article-content p {
    font-size: 16px;
    line-height: 1.5;
    color: #ccc;
  }

  .article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3px;
  }

  .article-date {
    font-size: 14px;
    color: #888;
  }

  .article-button {
    background-color: #f4a261;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
  }

  .article-button:hover {
    background-color: #e07a5f;
  }


  a {
    text-decoration: none !important;
    border-bottom: none !important;
  }

  .about-right .img-univ {
    width: 89px;
    height: 24px;
    margin-top: 38px;
    margin-right: 30px;

  }

  .subscribe-section {
    background-color: #333; /* Fond gris foncé comme dans l'image */
    color: #fff;
    padding: 40px 20px;
    text-align: center;
    font-family: "proxima-nova", sans-serif;
    margin-top: 6000px !important;

  }

  .subscribe-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .subscribe-section h2 {
    font-size: 2em;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .subscribe-section p {
    font-size: 1em;
    color: #ccc;
    margin-bottom: 20px;
  }

  .subscribe-section form {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
  }

  .subscribe-section input {
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    font-size: 1em;
  }

  .subscribe-section button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #666; /* Bouton gris foncé */
    color: #fff;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .subscribe-section button:hover {
    background-color: #555; /* Légère variation au survol */
  }

  .privacy-text {
    font-size: 0.9em;
    margin-bottom: 20px;
  }

  .social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
  }

  .social-links a {
    color: #fff;
    font-size: 1.5em;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .social-links a:hover {
    color: #00AEDB; /* Couleur assortie à votre thème */
  }

  .contact-info {
    font-size: 0.9em;
    color: #ccc;
  }

  @media (max-width: 768px) {
    .about-section {
      flex-direction: column; /* Empiler verticalement sur les petits écrans */
    }
  }


  @media (max-width: 768px) {
    .navbar .right {
      display: none; /* Masquer la section "Resume" sur les petits écrans */
    }
  
    .about-left {
      order: 2; /* Changer l'ordre des éléments */
    }
  
    .about-right {
      order: 1;
    }
  }

  /* Styles pour les petits écrans */
@media (max-width: 768px) {
  .profile-photo {
    height: 40vh;
  }

  .photo-text {
    font-size: 1.5em;
  }

  .about-section {
    flex-direction: column;
  }

  .about-left, .about-right {
    width: 100%;
    padding: 0 10px;
  }

  .about-right h3, .about-right h4 {
    margin-left: 0;
    font-size: 1.2em;
  }

  .about-right p {
    font-size: 0.9em;
  }

  .article1-card, .article2-card, .article3-card {
    max-width: 100%;
    margin-left: 0;
  }

  .article-header {
    height: 200px;
  }
}