:root{
      --size: 20px; /* cursor diameter */
      --trail: .6; /* smoothing factor (0-1) */
    }

    html {
      width: 100%;
      padding: 0;
      overflow-x: hidden;
      margin:0;
      cursor:none;
      scroll-behavior: smooth;
    }

    body{
      width: 100%;
      padding: 0;
      overflow-x: hidden;
      margin:0;
      cursor:none;
      display:flex;
      flex-direction: column;
      background-color: white;
    }

    .cursor{
      position:fixed;
      left:0; top:0;
      width:var(--size);
      height:var(--size);
      border-radius:50%;
      background: #fff;
      mix-blend-mode: difference;
      transform:translate(-50%,-50%) scale(1);
      transition:width .18s ease,height .18s ease,transform .18s ease,opacity .2s ease;
      will-change:transform,left,top;
      z-index:999999;
    }
    .cursor.pointer-down{ transform: translate(-50%,-50%) scale(1.5); }
    @media (pointer:coarse){
      .cursor{display:none}
      body{cursor:auto}
    }

   @font-face {
   font-family: "Tanklager-Original";
   src: url("fonts/Tanklager-Original.woff2") format("woff2"),
        url("fonts/Tanklager-Original.woff") format("woff");
   font-weight: normal;
   font-style: normal;
    }

    @font-face {
    font-family: "Karrik-Regular";
    src: url("fonts/Karrik-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
     }

     @font-face {
     font-family: "Karrik-Italic";
     src: url("fonts/Karrik-Italic.woff2") format("woff2");
     font-weight: normal;
     font-style: italic;
      }

      @font-face {
      font-family: "lunchtype22-regular";
      src: url("fonts/lunchtype22-regular-webfont.woff2") format("woff2");
      font-weight: normal;
      font-style: normal;
       }

    .contenedor1 {
      display: flex;
      flex-direction: column;
      align-items: center;
      align-content: flex-start;
      justify-content: flex-start;
      width: 100%;
      height: 100vh;
      margin: 0;
      padding: 0;
      background-color: white;
      background-image: url(images/animated-background.webp);
      background-size: 20%;
      background-position: center;
      background-repeat: no-repeat;
      font-family: 'Tanklager-Original';
    }

    .contenedor1 p{
      width: 20%;
      font-family:'Karrik-Regular';
      text-align: justify;
      margin-top: 12%;
    }

    .contenedor1 h1{
      font-size: 5em;
      padding: 5%;
      color: black;
    }

    .nav a{
      font-family: 'Karrik-Regular';
      font-size: 1em;
      padding: 5vw;
      color: black;
      text-decoration: none;
      padding: 1em;
      margin: 0;
      background-color: transparent;
    }

    .nav {
      display: flex;
      flex-direction: row;
      width: 100vw;
      justify-content: space-around;
      padding: 0;
      background-color: transparent;
    }

    a:hover {
      cursor: none;
    }

    .contenedor2 {
      width: 50%;
      height: 100vh;
      padding: 0;
      margin: 0;
      background-color: white;
    }

    .contenedor2 img{
      width: 80%;
      margin-left: 10%;
      border-radius: 10px;
      filter: drop-shadow(0px 0px 2px lightgray);
    }

    .contenedor1, .contenedor2 {
      flex-shrink: 0;
      overflow-y: hidden;
      overflow-x: hidden;
    }

    .contenedor2 p, .contenedor2 h2{
      width: 80%;
      margin-left: 10%;
      font-family: 'Karrik-Regular';
      text-align: justify;
    }

    .contenedor2 h2{
      font-family: 'lunchtype22-regular';
      width: 80%;
      margin-left: 10%;
      text-align: justify;
    }

    .video1 {
      width: 80%;
      border-radius: 10px;
      filter: drop-shadow(0px 0px 2px lightgray);
      margin-left: 10%;
    }

    .contenedorgran{
      display: flex;
      flex-direction: row;
    }

    .marquee-container {
      width: 100%;
      overflow: hidden;
      height: 260px; /* Match marquee height */
      display: flex;
      align-items: center;
    }

    .clients-section {
      padding: 40px 0;
      background: white;
      text-align: center;
      overflow: hidden; /* Add this */
    }

    .clients-section{
      font-family: 'Tanklager-Original';
    }

    .marquee {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      height: 260px; /* Fixed height */
      display: flex;
      align-items: center;
    }

    /* Add this to ensure proper vertical alignment */
    .marquee-content {
      display: inline-flex;
      align-items: center;
      height: 100%;
    }

    @media only screen and (max-width: 720px) {
      body, html {
      }

      .contenedor1 p{
        text-align: left;
        width: 30%;
        margin-top: 35vh;
        background-color: white;
        padding: 1em;
        background-blend-mode: difference;
      }

      .contenedor1 h1{
        color: white;
        mix-blend-mode: difference;
        /*text-shadow: 3px 3px 0px black;*/
      }

      .contenedor1{
        background-size: 90%!important;
        height: 100vh;
        width: 100vw;
      }

      .cursor{
        display: none;
      }

      .marquee {
        height: 60px; /* Adjust for mobile */
      }
    }