@font-face {
      font-family: 'ArgestaText-Regular';
      src: url('fonts/ArgestaText-Regular.otf');
    }

    @font-face {
      font-family: 'ArgestaHeadline-Regular';
      src: url('fonts/ArgestaHeadline-Regular.otf');
    }

    /*  @font-face {
      font-family: 'ArgestaText-Bold';
      src: url('fonts/ArgestaText-Bold.otf');
    } */

    body,
    html {
      margin: 0;
      padding: 0;
      height: 900vh;
      background-color: #000000;
      color: #ffffff;
      overflow-x: hidden;
      font-family: "ArgestaText-Regular", sans-serif;
      scroll-behavior: smooth;
      letter-spacing: 1px;
      line-height: 1.3;
      font-size: 12px;

    }

    .select-wrapper {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 999;
      width: 6vw;
      height: 4vh;
    }

    .language-selector {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;

      width: 100%;
      height: 100%;
      border-radius: 5vh;
      border: 3px solid white;
      background: black;
      color: white;
      padding-right: 1.5em;
      text-align: center;
    }

    .select-wrapper::after {
      content: "▼";
      position: absolute;
      right: 1em;
      top: 50%;
      transform: translateY(-50%);
      color: white;
      pointer-events: none;
    }


    #three-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 10;
    }

    .content {
      width: 100%;
      text-align: center;
    }

    .section-1 {
      position: fixed;
      width: 100%;
      top: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 20;
      text-align: center;
    }

    .section-2 {
      position: absolute;
      width: 100%;
      top: 860vh;
      z-index: 20;
      text-align: center;
    }

    .section-2-mobile {
      display: none;
    }

    .text-block {
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
      position: absolute;
      width: 100%;
      padding: 0 20px;
    }

    .text-block-2 {
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
      width: 100%;
      padding: 0 20px;
    }

    .fade-in {
      opacity: 1;
      transition: opacity 0.5s ease-in-out;
    }

    .fade-in-logo {
      opacity: 1 !important;
      transition: opacity 0.5s ease-in-out;
    }

    h1,
    h2 {
      font-size: 4rem;
      margin-bottom: 1rem;
    }

    h3,
    h4 {
      font-size: 3rem;
      margin-bottom: 1rem;
    }

    p {
      font-size: 1.6rem;
      font-family: 'ArgestaHeadline-Regular';
      font-weight: 300;
    }

    .legado-box {
      width: 35vw;
      margin: 0 auto;
      text-align: left;
      padding-left: 10vh;
    }

    .inicio-box-2 {
      /* padding-top: 25vh; */
      padding-top: 25vh;
      width: 55vw;
      margin: 0 auto;
      font-family: "ArgestaHeadline-Regular", sans-serif;

    }

    .experiencia-box {
      width: 36vw;
      margin: 0 auto;
      text-align: left;

    }

    .compromiso-box {
      width: 36vw;
      margin: 0 auto;
      text-align: left;
      padding-left: 10vh;

    }

    .vision-box {
      width: 36vw;
      margin: 0 auto;
      text-align: left;
      padding-left: 10vh;
    }

    .vision-box-2 {
      display: inline-block;
      width: 25%;
      vertical-align: top;
      text-align: left;
      padding: 10px;
    }

    .animated-lines {
      text-align: left;
      width: 75%;
      margin: 0 auto;
      padding-top: 0px;
    }

    .animated-lines span {
      display: block;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .animated-lines.active span {
      opacity: 1;
      transform: translateY(0);
    }

    .animated-lines.active span:nth-child(1) {
      transition-delay: 0.3s;
    }

    .animated-lines.active span:nth-child(2) {
      transition-delay: 0.6s;
    }

    .fade-in-vision {
      transition: opacity 0.5s ease-in-out;
      opacity: 1;
    }

    .vision-extra {
      opacity: 0;
      padding-top: 35px;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .vision-extra.show {
      opacity: 1;
      transform: translateY(0);

      transition-delay: 0.9s;
    }

    .torre-downtown-box {
      /* width: 47vw; */
      width: 38%;
      text-align: left;
      padding-left: 10vh;
      padding-top: 5%;
      padding-bottom: 5%;
    }

    .text-block-downtown-guadalajara {
      opacity: 0;
      transition: opacity 0.5s ease;
      position: absolute;
    }

    .text-block-downtown-guadalajara.active {
      opacity: 1;
      transition: opacity 0.5s ease;
    }

    .sticky-gallery {
      position: relative;
      display: block;
      text-align: right;
      position: relative;
    }

    .sticky {
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .sticky-img {
      position: sticky;
      /* width: 700px; */
      width: 50%;
      display: block;
      justify-self: right;
      top: 103vh;
      z-index: 0;
      filter: brightness(70%);
      /* Reduce brillo para oscurecer */
      transform: translateY(-75vh);
      /* padding-right: 5vw; */
      filter: grayscale(1);
    }

    .sticky-img:nth-child(2) {
      z-index: 1;
    }

    .sticky-img:nth-child(3) {
      z-index: 2;
    }

    .sticky-img:nth-child(4) {
      z-index: 3;
    }

    /* Más si tienes más imágenes */

    .text-block-torres-icon {
      opacity: 0;
      transition: opacity 0.5s ease;

      position: fixed;
      width: 100%;
      top: 0;
      z-index: 20;
      text-align: center;
    }

    .text-block-torres-icon.active {
      opacity: 1;
      transition: opacity 0.5s ease;
    }

    .torres-icon-box {
      width: 40vw;
      text-align: left;
      padding-left: 10vh;
      padding-top: 5%;
      padding-bottom: 5%;
    }

    .img-logo {
      width: 20%;
      height: auto;
      position: fixed;
      top: 20px;
      left:
        100px;
      z-index: 20;
      opacity: 0;
    }

    .text-block-macrolibramiento {
      opacity: 0;
      transition: opacity 0.5s ease;

      position: fixed;
      width: 100%;
      top: 0;
      z-index: 20;
      text-align: center;
    }

    .text-block-macrolibramiento.active {
      opacity: 1;
      transition: opacity 0.5s ease;
    }

    .macrolibramiento-box {
      width: 40vw;
      text-align: left;
      padding-left: 10vh;
      padding-top: 5%;
      padding-bottom: 5%;
    }

    .text-block-laperla {
      opacity: 0;

      position: fixed;
      width: 100%;
      top: 0;
      z-index: 20;
      text-align: center;
    }

    .text-block-laperla.active {
      opacity: 1;
      transition: opacity 0.5s ease;
    }

    .laperla-box {
      width: 40vw;
      text-align: left;
      padding-left: 10vh;
      padding-top: 5%;
      padding-bottom: 5%;
    }

    .section-3 {
      position: absolute;
      width: 100%;
      top: 1170vh;
      z-index: 20;
      text-align: center;
    }

    .text-block-fundador {
      transition: opacity 0.5s ease-in-out;
      padding: 30vh 25vw;
    }

    .animated-fundador span {
      display: block;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    }

    .animated-fundador.active span {
      opacity: 1;
      transform: translateY(0);
    }

    .animated-fundador.active span:nth-child(1) {
      transition-delay: 0.3s;
    }

    .animated-fundador.active span:nth-child(2) {
      transition-delay: 0.6s;
    }

    .animated-fundador.active span:nth-child(3) {
      transition-delay: 0.9s;
    }

    .animated-fundador.active span:nth-child(4) {
      transition-delay: 1.2s;
    }


    .text-block-contacto {
      transition: opacity 0.5s ease-in-out;
    }

    .contacto {
      display: inline-block;
      vertical-align: top;
      text-align: left;
      padding: 0 2vw 0 5vw;
    }

    .direccion {
      display: inline-block;
      vertical-align: top;
      text-align: left;
      padding: 0 0 0 5vw;
    }

    .espacio1 {
      display: inline-block;
      width: 40%;
    }

    .espacio2 {
      display: inline-block;
      width: 1%;
    }

    #containerlogo {
      height: 700px;

    }

    .direccion-contacto-container {
      padding-bottom: 15vh;
      text-align: right;
      line-height: 2;
      font-size: 20px;
      border-top: 1px solid #575757;
      padding-top: 8vh;
      width: 100%;
      /* justify-self: center; */
    }

    .whatsapp-float {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 60px;
      height: 60px;
      background-color: #ffffff;
      color: white;
      border-radius: 50%;
      text-align: center;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: bounce 2s infinite;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease;
    }

    .whatsapp-float:hover {
      transform: scale(1.15);
    }

    @keyframes bounce {

      0%,
      20%,
      50%,
      80%,
      100% {
        transform: translateY(0);
      }

      40% {
        transform: translateY(-8px);
      }

      60% {
        transform: translateY(-4px);
      }
    }

    /* #contact-form {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    #contact-form input,
    #contact-form textarea {
      padding: 10px;
      border-radius: 5px;
      border: 3px solid #fff;
      background-color: #000;
      color: white;
      font-size: 20px;
    }

    #contact-form button {
      padding: 10px;
      background-color: #000;
      color: white;
      border: 3px solid #fff;
      border-radius: 5px;
      cursor: pointer;
      font-size: 20px;

    }

    #contact-form button:hover {
      background-color: #fff;

      color: #000;
    } */

    /* .text-block-formulario {
      justify-self: center;
      align-items: center;
      justify-content: center;
      width: 50%;
      padding: 10vh;
    } */

    @media screen and (max-width: 768px) {
      * {
        position: static !important;
        transform: none;
        will-change: auto !important;
      }

      #three-container {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw;
        height: 50vh;
        z-index: 0;
        /* o 0 si quieres que quede detrás del contenido */
        pointer-events: none;
        /* para que no bloquee clics */
      }

      body,
      html {
        height: auto;
        overflow-x: hidden;
      }

      h1,
      h2,
      h3,
      h4 {
        font-size: 2.5rem;
      }

      p {
        font-size: 1.5rem;
      }

      .legado-box,
      .inicio-box-2,
      .experiencia-box,
      .compromiso-box,
      .vision-box {
        width: 100%;
        padding: 10vh 0;
        margin: 0 auto;
        text-align: left;
      }

      .torre-downtown-box,
      .torres-icon-box,
      .macrolibramiento-box,
      .laperla-box {
        width: 100%;
        padding: 0;
        margin: 0 auto;
        text-align: left;
      }

      .text-block,
      .text-block-2,
      .text-block-torres-icon,
      .text-block-macrolibramiento,
      .text-block-laperla,
      .text-block-fundador {
        width: 90%;
        text-align: left;
        padding: 50vh 5% 0 5%;
      }
      
      .text-block-downtown-guadalajara {
        width: 90%;
        text-align: left;
        padding: 200vh 5% 0 5%;
      }

      .text-block-2 {
        opacity: 1 !important;
      }

      .text-block-downtown-guadalajara.active,
      .text-block-torres-icon.active,
      .text-block-macrolibramiento.active,
      .text-block-laperla.active,
      .text-block-fundador.active {
        opacity: 1 !important;
        transition: opacity 0.5s ease;
      }

      .text-block-contacto {
        opacity: 1 !important;
        width: 100%;
        text-align: left;
      }

      .text-block {
        padding-top: 5vh;
      }

      .text-block.legado-box,
      #experiencia-box,
      #compromiso,
      #vision {
        padding-top: 50vh;
      }

      .sticky-img {
        width: 100%;
        display: block;
        margin: 20px auto;
        filter: brightness(100%);
        transform: translate(0, 0);
        filter: grayscale(1);
      }

      .img-logo {
        width: 70%;
        margin: 20px auto;
        display: block;
        opacity: 1 !important;
      }

      .animated-fundador {
        opacity: 0;
        width: 90%;
        padding: 0 5%;
        transition: opacity 0.5s ease;
      }

      .animated-fundador.active {
        opacity: 1 !important;
        transition: opacity 0.5s ease;
      }

      .animated-lines span,
      .vision-extra {
        opacity: 1 !important;
        transform: none !important;
      }

      .animated-fundador span {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
      }

      .animated-fundador.active span {
        opacity: 1;
        transform: translateY(0);
      }

      .animated-fundador.active span:nth-child(1) {
        transition-delay: 0.3s;
      }

      .animated-fundador.active span:nth-child(2) {
        transition-delay: 0.6s;
      }

      .animated-fundador.active span:nth-child(3) {
        transition-delay: 0.9s;
      }

      .animated-fundador.active span:nth-child(4) {
        transition-delay: 1.2s;
      }

      .vision-extra {
        padding-top: 75px;
      }

      .section-1 {

        transform: translate(0, 5vh);
        z-index: 20;
        background: transparent;
      }

      .section-2 {
        padding-top: 50vh;
        display: none;
      }

      .section-2-mobile {
        padding-top: 50vh;
        display: block !important;
        opacity: 1 !important;
      }

      .section-3 {
        padding-top: 20vh;
      }

      .contacto {
        display: block;
        text-align: left;
        padding: 5vw 0 0 0;
        width: 90%;
        padding: 5vw 5%;
      }

      .direccion {
        display: block;
        text-align: left;
        width: 90%;
        padding: 5vw 5%;
      }

      #containerlogo {
        height: 700px;

      }

      .inicio-box-2 {
        text-align: center !important;
        padding-top: 5vh;
      }

      #inicio {
        transform: translate(0, -5vh);
        text-align: center !important;
      }

      .espacio1,
      .espacio2 {
        display: none;
      }

      .vision-box-2 {

        display: block;
        width: 100%;
        text-align: left;

      }

      .animated-lines {
        width: 100%;
        padding-top: 50px;
      }

      .torres-icon-title {
        margin-top: 50px;
        display: block;
        justify-self: left;
        padding-top: 5vh;
      }

      .perla-title {
        margin-top: 50px;
        display: block;
        justify-self: left;
        padding-top: 5vh;
      }

      .direccion-contacto-container {
        padding-bottom: 5vh;
        line-height: 2;
        font-size: 20px;
        border-top: 1px solid #575757;
        padding-top: 8vh;
        width: 90%;
        justify-self: center;
      }

      .select-wrapper {
        position: fixed !important;
        top: 20px;
        right: 20px;
        z-index: 999;
        width: 25vw;
        height: 5vh;
      }

      .language-selector {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        width: 100%;
        height: 100%;
        border-radius: 5vh;
        border: 3px solid white;
        background: black;
        color: white;
        padding-right: 1.5em;
        text-align: center;
      }

      .select-wrapper::after {
        content: "▼";
        position: absolute;
        right: 1em;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        pointer-events: none;
      }

      .whatsapp-float {
        position: fixed !important;
        bottom: 30px;
        right: 25px;
        width: 70px;
        height: 70px;
        background-color: #ffffff;
        color: white;
        border-radius: 50%;
        text-align: center;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: bounce 2s infinite;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
      }

      .whatsapp-float:hover {
        transform: scale(1.15);
      }

      /*   .text-block-formulario {
        width: 80%;
      } */
    }


    /*////////////////////////// NEW ADDS /////////////////////////// */

    .main-title {
      font-size: 6em;
      line-height: 1.1;
    }

    .frase_inicio {
      font-size: 1.6em;
    }

    p {
      font-weight: 300;
    }

    .title-vision {
      font-size: 3em;
      font-weight: 600;
    }


    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
      color: #aca49c;
      font-size: 1em;
    }

    input:focus::-webkit-input-placeholder,
    textarea:focus::-webkit-input-placeholder {
      color: #bbb5af;
    }

    input::-moz-placeholder,
    textarea::-moz-placeholder {
      color: #aca49c;
      font-size: 1em;
    }

    input:focus::-moz-placeholder,
    textarea:focus::-moz-placeholder {
      color: #bbb5af;
    }

    input::placeholder,
    textarea::placeholder {
      color: #aca49c;
      font-size: 1em;
    }

    input:focus::placeholder,
    textarea::focus:placeholder {
      color: #bbb5af;
    }

    input::-ms-placeholder,
    textarea::-ms-placeholder {
      color: #aca49c;
      font-size: 1em;
    }

    input:focus::-ms-placeholder,
    textarea:focus::-ms-placeholder {
      color: #bbb5af;
    }

    /* on hover placeholder */

    input:hover::-webkit-input-placeholder,
    textarea:hover::-webkit-input-placeholder {
      color: #e2dedb;
      font-size: 1em;
    }

    input:hover:focus::-webkit-input-placeholder,
    textarea:hover:focus::-webkit-input-placeholder {
      color: #cbc6c1;
    }

    input:hover::-moz-placeholder,
    textarea:hover::-moz-placeholder {
      color: #e2dedb;
      font-size: 1em;
    }

    input:hover:focus::-moz-placeholder,
    textarea:hover:focus::-moz-placeholder {
      color: #cbc6c1;
    }

    input:hover::placeholder,
    textarea:hover::placeholder {
      color: #e2dedb;
      font-size: 1em;
    }

    input:hover:focus::placeholder,
    textarea:hover:focus::placeholder {
      color: #cbc6c1;
    }

    input:hover::placeholder,
    textarea:hover::placeholder {
      color: #e2dedb;
      font-size: 1em;
    }

    input:hover:focus::-ms-placeholder,
    textarea:hover::focus:-ms-placeholder {
      color: #cbc6c1;
    }


    #formulario {
      position: relative;
      /* width: 500px; */
      width: 50%;
      margin: 50px auto 100px auto;
      padding-bottom: 200px;
      padding-top: 200px;
    }

    input {
      font-family: 'Lato', sans-serif;
      font-size: 1em;
      width: 470px;
      height: 50px;
      padding: 0px 15px 0px 15px;

      background: transparent;
      outline: none;
      color: #726659;

      border: solid 1px #b3aca7;
      border-bottom: none;

      transition: all 0.3s ease-in-out;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
    }

    input:hover {
      background: #b3aca734;
      color: #e2dedb;
    }

    textarea {
      width: 470px;
      max-width: 470px;
      height: 110px;
      max-height: 110px;
      padding: 15px;
      background: transparent;
      outline: none;
      color: #726659;
      font-family: 'Lato', sans-serif;
      font-size: 1em;
      border: solid 1px #b3aca7;
      transition: all 0.3s ease-in-out;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
    }

    textarea:hover {
      background: #b3aca734;
      color: #e2dedb;
    }

    #submit {
      width: 502px;
      padding: 20px;
      margin: -5px 0px 0px 0px;
      font-size: 1.2em;
      color: #b3aca7;
      outline: none;
      cursor: pointer;
      border: solid 1px #b3aca7;
      border-top: none;
      background: none;
    }

    #submit:hover {
      color: #e2dedb;
    }

    .direccion-contacto-container {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
      /* Espacio entre columnas */
      padding: 20px;
      background-color: #000000;
      /* o el color que quieras */
    }

    .direccion-contacto-container .col {
      flex: 1;
      min-width: 150px;
      /* evita que las columnas se hagan muy pequeñas */
    }

    .direccion-contacto-container .logo {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .direccion-contacto-container .logo img {
      max-width: 100%;
      height: auto;
      max-height: 100px;
      /* ajusta la altura del logo */
    }

    /* MOUSE SCROLL ANIMATION */

    .mouseDown {
      font-size: 0.9em;
      /* CONTROL MOUSE SIZE */
      border: 2px solid rgba(255, 255, 255, 1);
      display: block;
      width: 1.3em;
      height: 2.4em;
      border-radius: 0.9em;
      margin: 0 auto;
      text-decoration: none;
      transition: border 0.2s ease-out;
    }

    .mouseDown:hover {
      border: 2px solid rgba(255, 255, 255, 0.7);
    }

    .mouseDown span {
      display: block;
      background: #fff;
      width: 0.2em;
      height: 0.3em;
      margin: 0.7em auto 0;
      border-radius: 0.4em;
    }

    .mouseDown span {
      -webkit-animation-name: scroll;
      animation-name: scroll;
      -webkit-animation-duration: 1.5s;
      animation-duration: 1.5s;
      -webkit-animation-timing-function: cubic-bezier(0.65, -0.55, 0.25, 1.5);
      animation-timing-function: cubic-bezier(0.65, -0.55, 0.25, 1.5);
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      will-change: transform;
    }

    .mouseDown:hover span {
      -webkit-animation-duration: 0.7s;
      animation-duration: 0.7s;
    }

    @-webkit-keyframes scroll {

      0%,
      20% {
        -webkit-transform: translateY(0) scaleY(1);
      }

      10% {
        opacity: 1;
      }

      100% {
        -webkit-transform: translateY(1.2em) scaleY(1.5);
        opacity: 0.01;
      }
    }

    @keyframes scroll {

      0%,
      20% {
        transform: translateY(0) scaleY(1);
      }

      10% {
        opacity: 1;
      }

      100% {
        transform: translateY(1.2em) scaleY(1.5);
        opacity: 0.01;
      }
    }

    .sdown {
      padding-top: 1vw;
      font-size: 1.6em;
    }

    .our_vision {
      font-size: 2.5em;
      font-weight: 800;
    }


    @media screen and (max-width: 768px) {
      .main-title {
        font-size: 3em;
      }

      .text-block {
        padding-top: 0;
      }

      #formulario {
        width: 100%;
      }

      #formulario input,
      #formulario textarea,
      #formulario button {
        width: 335px;
      }

      .direccion-contacto-container {
        flex-direction: column;
      }
    }

    #project-tabs {
      padding: 10px 0px;
      margin-top: 20px;
      transition: transform 0.4s ease;
    }

    .tab-title {
      color: gray;
      font-weight: bold;
      cursor: default;
      transition: color 0.3s ease;
    }

    .tab-title.active {
      color: white !important;
    }

    .tab-title {
      padding-right: 10px
    }

    .animated-fundador {
      font-size: 4em;
    }

    .aaron-name {
      font-size: 2rem;
      margin-bottom: 1rem;
      font-family: 'ArgestaHeadline-Regular';
    }


    .logo-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      /* ocupa pantalla completa */
      background-color: #000;
      overflow: hidden;
    }

    .logo-animated {
      width: 200px;
      opacity: 0;
      transform: scale(0.8);
      filter: brightness(0.5) drop-shadow(0 0 0 transparent);
      transition: all 1.2s ease-out;
    }

    /* clase que se activa cuando entra en vista */
    .logo-animated.active {
      opacity: 1;
      transform: scale(1);
      filter: brightness(1) drop-shadow(0 0 20px #ffffffaa);
      animation: lightSweep 3s ease-in-out infinite;
    }

    @keyframes lightSweep {
      0% {
        filter: brightness(1) drop-shadow(0 0 0px white);
      }

      50% {
        filter: brightness(1.5) drop-shadow(0 0 20px #ffffffaa);
      }

      100% {
        filter: brightness(1) drop-shadow(0 0 0px white);
      }
    }

    .fixed-projects-title {
      position: sticky;
      top: 40px;
      justify-items: start;
    }

    .fixed-projects-title h4 {
      font-size: 2em;
    }

    .ptitle {
      font-size: 5em;
    }