@font-face {
        font-family: "Goudy Old Style";
        font-style: normal;
        font-weight: normal;
        src: local("Goudy Old Style"), url("/fonts/GOUDOS.woff") format("woff");
      }

      @font-face {
        font-family: "Futura Cyrillic Book";
        src: url("/fonts/FuturaCyrillicBook.woff2") format("woff2"),
          url("/fonts/FuturaCyrillicBook.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }
      

      @font-face {
        font-family: "Futura Cyrillic Light";
        font-style: normal;
        font-weight: 300; 
        src: url("../fonts/FuturaCyrillicLight.woff2") format("woff2"),
          url("../fonts/FuturaCyrillicLight.woff") format("woff");
      }

      * {
        margin: 0;
        padding: 0;
      }

      body {
        margin: 0;
        padding: 0;
        text-align: center;
        scroll-behavior: smooth;
        color: #0a3161;
        background: url("/fonts/background.jpg") no-repeat center center fixed;
        background-size: cover;
        overflow:hidden;
      }

      .header {
        width: 100%;
        font-family: "Goudy Old Style", serif;
        position: absolute;
        top: 8%;
        z-index: 1000;
        background: inherit;
        background: url("/fonts/background.jpg") no-repeat center center fixed;
        background-size: cover;
      }

      .header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        z-index: -1;
      }

      .title {
        font-size: 3rem;
      }

      .subtitle {
        font-size: 1.3rem;
      }

      .page {
        height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        min-height: 100vh;
        position: relative;
      }

  
      
        .description {
        font-family: "Futura Cyrillic Light";
        opacity: 0;
        transition:none;
        font-weight: 300;
        transform: translateY(30px);
      }




      .credits {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 80%;
      }

      /*.aos-animate,*/
      /*.active {*/
      /*  opacity: 1;*/
      /*  transform: translateY(0);*/
      /*}*/
      
      
         @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(30px); /* Start lower */
        }
        to {
          opacity: 1;
          transform: translateY(0); /* Moves up smoothly */
        }
      }   
      
         .aos-animate,.active {
        opacity: 1;
        /* transform: translateY(10px);  */
        animation: fadeUp 1.2s ease-out forwards; /* Smooth transition when appearing */
      }
      
      
      

      input[type="text"],
      input[type="email"],
      input[type="tel"],
      input[type="url"] {
        width: 100%;
        border: none;
        border-bottom: 1px solid #a6caec;
        box-sizing: border-box;
        font-size: 1.3rem;
        color: #0a3161;
        background-color: transparent;
        outline: none;
        font-family: "Futura Cyrillic Light";
        font-weight: normal;
        text-align: center;
        margin: 5px 0;
        padding: 10px 0;
      }

      .submit {
        border: none;
        background-color: transparent;
        font-family: "Futura Cyrillic Light", serif;
        font-size: 1.3rem;
        margin-top: 30px;
        cursor: pointer;
        color: #0a3161;
      }

      form {
        position:absolute;
        top: 30%;
        max-width:80%;
      }
      
      #formContent{
          display: flex;
          justify-content: center;
      }

      form h1 {
        font-size: 2.5rem;
        font-family: "Goudy Old Style";
        font-weight: normal;
        margin-bottom: 5%;
      }

        
    /* Initially hide inputs */
    .form-field {
      opacity: 0;
      transform: translateY(30px); /* Start from below */
      transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    }
    
    /* When active, apply the fadeUp effect */
    .form-field.active {
      opacity: 1;
      transform: translateY(0); /* Move to normal position */
    }