body {
    margin: 0;
    font-family: 'Times New Roman', Times, serif;
    padding: 0 clamp (4rem, 12vw, 20rem); 
    color:rgb(255, 255, 255);
    background:  #19181A;
}

  .blog-header {
    transition: transform 0.3s ease-in-out;
  }


  .blog-header.hidden {
    transform: translateY(-100%);
  }
  .small-logo {
      position: fixed; /* Change to fixed positioning */
      left: 1rem;
      top: 0.5rem; /* Adjust top position */
      width: 40px; /* Adjust size as needed */
      width: 4vw;
      min-width: 4px;
      height: auto;
    }
  
  
  /* Add these new styles to your existing CSS */
  .reveal-type-first {
    visibility: hidden; /* Hide text initially */
  }
  .blog-header {
    background-color: #19181A;
    opacity: 0.9;
    transition: transform 0.7s ease-in-out;
  }
  
  .blog-header.hidden {
    transform: translateY(-100%);
  }
  
  .hero-image {
    margin-top: 2rem; /* Should match the header height */
  }

  
  .hero-image img {
    width: 100%;
    display: block;
  }
    section { 
    position: relative;
    display: flex;
    flex-direction: column;  
    min-height: 125px;
    padding: 100px 15vw;  
    }

    .center-con {
      display: flex;
      /* height: 100vh; */
      align-items: center;
      justify-content: center;
      margin-bottom: -15em;
      margin-top: 10em;
  }
  
  
  
  .round {
      /* position: absolute; */
      border: 2px solid #fff;
      width: 40px;
      height: 40px;
      border-radius: 100%;
      transform: rotate(90deg);
      
  }
  
  #cta{
      width:100%; 
      cursor: pointer; 
      position: absolute;
  }
  
  #cta .arrow{left: 30%;}
  .arrow {position: absolute; bottom: 0;  margin-left:0px; width: 12px; height: 12px; background-size: contain; top:15px;}
  .segunda{margin-left: 8px;}
  .next {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHN0eWxlPi5zdDB7ZmlsbDojZmZmfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxOS4xIDIxN2MyMC4yIDIwLjIgMTkuOSA1My4yLS42IDczLjdzLTUzLjUgMjAuOC03My43LjZsLTE5MC0xOTBjLTIwLjEtMjAuMi0xOS44LTUzLjIuNy03My43UzEwOSA2LjggMTI5LjEgMjdsMTkwIDE5MHoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzE5LjEgMjkwLjVjMjAuMi0yMC4yIDE5LjktNTMuMi0uNi03My43cy01My41LTIwLjgtNzMuNy0uNmwtMTkwIDE5MGMtMjAuMiAyMC4yLTE5LjkgNTMuMi42IDczLjdzNTMuNSAyMC44IDczLjcuNmwxOTAtMTkweiIvPjwvc3ZnPg==);
  }
  
  @keyframes bounceAlpha {
    0% {opacity: 1; transform: translateX(0px) scale(1);}
    25%{opacity: 0; transform:translateX(10px) scale(0.9);}
    26%{opacity: 0; transform:translateX(-10px) scale(0.9);}
    55% {opacity: 1; transform: translateX(0px) scale(1);}
  }
  
  .bounceAlpha {
      animation-name: bounceAlpha;
      animation-duration:1.4s;
      animation-iteration-count:infinite;
      animation-timing-function:linear;
  }
  
  .arrow.primera.bounceAlpha {
      animation-name: bounceAlpha;
      animation-duration:1.4s;
      animation-delay:0.2s;
      animation-iteration-count:infinite;
      animation-timing-function:linear;
  }
  
  .round:hover .arrow{
      animation-name: bounceAlpha;
      animation-duration:1.4s;
      animation-iteration-count:infinite;
      animation-timing-function:linear;
  }
  .round:hover .arrow.primera{
      animation-name: bounceAlpha;
      animation-duration:1.4s;
      animation-delay:0.2s;
      animation-iteration-count:infinite;
      animation-timing-function:linear;
  }
  


    h01{
      font-size: 40px ;
      font-family: 'Times New Roman', Times, serif;
      margin-top: 7.5em;
      /* margin-left: 30%; */
      margin-bottom: -2.9em;
      text-align: center;
      /* position: absolute; */

      /* &:nth-of-type(5) {
        color: yellow;
      } */
    }



    h0 {
      font-size: 2rem;  /* Adjust the font size */
      align-items:self-end; /* Align text to the left */
      text-align: left;
      font-family: 'Times New Roman', Times, serif;
      max-width: 70%; /* Adjust for desired width */
      margin: 20px 20px;  /*Adjust this value to control top/bottom spacing */
      padding: 0px 0px; /* Add some horizontal padding */
      line-height: 1.4; /*Adjust for desired line spacing  */
      word-break: keep-all; 
    } 

    .blue {
    background: #3c31dd;
    }
    .green {
    background: #479761;
    }
    .pink {
    background: #ad5479;
    min-height: 300px;
    }
    .dark {
    background: #19181A;
    min-height: 300px;
    }

    .wave {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        line-height: 0;
    }
    
    .wave svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 90px;
    }
    
    .wave .shape-fill {
        fill: #AD5479;
    }

    .spacer {
    aspect-ratio: 960/300; 
    width: 100%;
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover;
    }
    
    .layer1 {
    background-image: url('./svg/layer1.svg');
    }
    .flip {
    transform: rotate (180deg) ;
    }

    .blob-motion{
        position: absolute;
        transform: translateY(50%);
    }