html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      background: #fff8e1;
    }

    #loader-wrapper {
      position: fixed;
      width: 100%;
      height: 100%;
      background: #faf4d8;
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: opacity 0.6s ease-out;
    }

    #loader-wrapper.fade-out {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease; /* 1 second */
  }


    #loader {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .farmer {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 220px;
      height: 220px;
      background-image: url('../loader_images/farmerImage.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      transform: translate(-50%, -50%);
      filter: blur(10px);
      opacity: 0;
      animation: farmerCycle 4s ease-in-out forwards;
      z-index: 10;
    }

    @keyframes farmerCycle {
      0%   { opacity: 0; filter: blur(10px); }
      30%  { opacity: 1; filter: blur(0px); }
      70%  { opacity: 1; filter: blur(0px); }
      100% { opacity: 0; filter: blur(10px); }
    }

    .company-name {
      position: absolute;
      left: 50%;
      top: calc(52% + 100px);
      transform: translateX(-50%);
      font-size: 28px;
      font-weight: bold;
      color: #8b4308;
      font-family: 'Georgia', serif;
      opacity: 0;
      filter: blur(10px);
      animation: nameReveal 4s ease-in-out forwards;
      animation-delay: 0.3s;
    }

    @keyframes nameReveal {
      0% { opacity: 0; filter: blur(10px); }
      35% { opacity: 1; filter: blur(0); }
      65% { opacity: 1; filter: blur(0); }
      100% { opacity: 0; filter: blur(10px); }
    }

    .bee {
      position: absolute;
      width: 60px;
      height: 60px;
      background-image: url('../loader_images/cartoonimage.png');
      background-size: contain;
      background-repeat: no-repeat;
      opacity: 0;
      will-change: transform;
      transform-origin: center;
    }

    @media (max-width: 768px) {
      .company-name {
        font-size: 5vw;
        top: calc(50% + 25vw);
      }
      .farmer { width: 40vw; }
      .bee { width: 14vw; }
    }