

      html {
      scroll-behavior: smooth;
      scroll-padding-top: 60px;
      }
      .raw-dotted {
        border-top: 2px solid #ffffff;
        position: relative;
      }
      .col-dotted {
      border-left: 2px solid #ffffff;
      position: relative;
      }

      /* Scrollbar styles */
      ::-webkit-scrollbar {
      width: 10px;
      background: #1e293b;
      }
      ::-webkit-scrollbar-thumb {
      background: #2563eb;
      border-radius: 8px;
      }
      ::-webkit-scrollbar-thumb:hover {
      background: #1d4ed8;
      }
      /* Firefox */
      html {
      scrollbar-color: #2563eb #1e293b;
      scrollbar-width: thin;
      }







      .outer-circle {
          position: relative;
          width: 300px;
          height: 300px;
          border-radius: 50%;
          border: 2px solid #2563EB;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .inner-circle {
          position: relative;
          width: 150px;
          height: 150px;
          border-radius: 50%;
          border: 2px solid #2563EB;
      }

      .logo {
          position: absolute;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          object-fit: cover;
      }

      /* Logos pour le grand cercle */
      .outer-circle > .logo {
          top: 50%;
          left: 50%;
          transform-origin: 0 0;
      }

      .outer-circle > .logo:nth-child(1) {
          transform: translate(-50%, -50%) rotate(0deg) translate(150px) rotate(0deg);
      }

      .outer-circle > .logo:nth-child(2) {
          transform: translate(-50%, -50%) rotate(60deg) translate(150px) rotate(-60deg);
      }

      .outer-circle > .logo:nth-child(3) {
          transform: translate(-50%, -50%) rotate(120deg) translate(150px) rotate(-120deg);
      }

      .outer-circle > .logo:nth-child(4) {
          transform: translate(-50%, -50%) rotate(180deg) translate(150px) rotate(-180deg);
      }

      .outer-circle > .logo:nth-child(5) {
          transform: translate(-50%, -50%) rotate(240deg) translate(150px) rotate(-240deg);
      }

      .outer-circle > .logo:nth-child(6) {
          transform: translate(-50%, -50%) rotate(300deg) translate(150px) rotate(-300deg);
      }

      /* Logos pour le petit cercle */
      .inner-circle > .logo {
          top: 50%;
          left: 50%;
          transform-origin: 0 0;
      }

      .inner-circle > .logo:nth-child(1) {
          transform: translate(-50%, -50%) rotate(0deg) translate(75px) rotate(0deg);
      }

      .inner-circle > .logo:nth-child(2) {
          transform: translate(-50%, -50%) rotate(120deg) translate(75px) rotate(-120deg);
      }

      .inner-circle > .logo:nth-child(3) {
          transform: translate(-50%, -50%) rotate(240deg) translate(75px) rotate(-240deg);
      }