/* css/clouds.css */

.klb-clouds {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    pointer-events: none;
    z-index: -1;
    overflow-x: clip;
  }
  
.klb-clouds svg {
    filter: none;
}

  /* common cloud style */
  .klb-cloud {
    position: absolute;
    fill: white;
    opacity: 0.9;
  }
  
  /* top left cloud */
  .klb-cloud.top-left {
    top: 200px;
    left: calc(100vw / 2 - 350px);
    width: 150px;
  }
  
  /* top right cloud */
  .klb-cloud.top-right {
    top: 0px;
    right: calc(100vw/2 - 350px);
    width: 250px;
  }
  
  /* bottom cloud strip */
  .klb-cloud.bottom {
    top: 350px;
    left: 0;
    max-width: 1100px;
    position: relative;
    /* filter: drop-shadow(16px -6px 6px rgba(0, 0, 0, 0.1)); */
  }
  

  @media only screen and (max-width: 600px) {
    .klb-cloud.bottom {
      min-width: 800px;
      top: 480px;
    }
    .klb-cloud.top-right {
      top: 125px;
      width: 180px;
      right: calc(100vw/2 - 200px);
    }
    .klb-cloud.top-left {
      top: 50px;
      width: 80px;
      left: calc(100vw / 2 - 150px);
    }
    .hero-section {
      padding: 50px 0;
    }
    main {
      margin-top: 0px;
    }
  }

  /*---------------- Random Clouds on page ----------------------- */
  #random-clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
  }
  
  .random-cloud {
    fill: #fff;
  }