/* Reset default browser spacing & enforce white background */
html, body {
  margin-top: 0;
  padding: 0;
  background-color: #fff;
  height: 100%;
}

/* Section background */
.u-section-1 {
  min-height: 100vh;
  background-image: url("images/bg.webp");
  background-position: 50% 50%;
  background-size: cover;
  position: relative;
  padding-top: 0;
  margin-top: 0;
}

/* General logo styles to prevent stretching */
.u-section-1 img {
  display: block;
  max-width: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
}

/* ---------------------------------------------------
   Desktop layout positions
--------------------------------------------------- */
.u-section-1 .u-image-1 {
  width: 427px; height: 213px;
  margin: 35px calc(((100% - 1140px) / 2) + 59px) 0 auto;
}

.u-section-1 .u-image-2 {
  width: 394px; height: 215px;
  margin: -213px auto 0 calc(((100% - 1140px) / 2) + 54px);
}

.u-section-1 .u-image-3 {
  width: 464px; height: 348px;
  margin: -10px auto 0 calc(((100% - 1140px) / 2) + 328px);
}

.u-section-1 .u-image-4 {
  width: 258px; height: 167px;
  margin: -257px auto 0 calc(((100% - 1140px) / 2) + 424px);
}

.u-section-1 .u-image-5 {
  width: 348px; height: 230px;
  margin: -217px auto 0 calc(((100% - 1140px) / 2) - 17px);
}

.u-section-1 .u-image-6 {
  width: 374px; height: 240px;
  margin: -235px calc(((100% - 1140px) / 2)) 0 auto;
}

.u-section-1 .u-image-7 {
  width: 418px; height: 248px;
  margin: 22px auto 0 calc(((100% - 1140px) / 2) + 54px);
}

.u-section-1 .u-image-8 {
  width: 444px; height: 233px;
  margin: -248px calc(((100% - 1140px) / 2) + 28px) 34px auto;
}

/* ---------------------------------------------------
   Responsive tweaks — Large tablets
--------------------------------------------------- */
@media (max-width: 1199px) {
  .u-section-1 { min-height: 873px; }
  .u-section-1 .u-image-1 {
    height: 214px;
    margin-top: 76px;
    margin-right: calc(((100% - 940px) / 2) - 37px);
  }
  .u-section-1 .u-image-2 {
    margin-top: -215px;
    margin-left: calc(((100% - 940px) / 2) - 12px);
  }
  .u-section-1 .u-image-3 {
    height: 310px;
    margin-top: 19px;
    margin-left: calc(((100% - 940px) / 2) + 227px);
  }
  .u-section-1 .u-image-4 { margin-top: -238px; margin-left: auto; }
  .u-section-1 .u-image-5 { margin-top: -204px; margin-left: 0; }
  .u-section-1 .u-image-6 { margin-top: -222px; margin-right: 0; }
  .u-section-1 .u-image-7 { margin-top: 35px; margin-left: calc(((100% - 940px) / 2) + 28px); }
  .u-section-1 .u-image-8 {
    margin-top: -240px;
    margin-right: calc(((100% - 940px) / 2) + 12px);
    margin-bottom: 6px;
  }
}

/* ---------------------------------------------------
   Tablets
--------------------------------------------------- */
@media (max-width: 991px) {
  .u-section-1 { min-height: 1317px; }
  .u-section-1 .u-image-1 { margin-right: calc(((100% - 720px) / 2) - 37px); }
  .u-section-1 .u-image-2 { margin-left: 0; }
  .u-section-1 .u-image-3 {
    margin-top: 263px;
    margin-right: calc(((100% - 720px) / 2) + 52px);
    margin-left: auto;
  }
  .u-section-1 .u-image-4 {
    margin-top: -246px;
    margin-right: calc(((100% - 720px) / 2) + 164px);
  }
  .u-section-1 .u-image-5 { margin-top: -25px; }
  .u-section-1 .u-image-6 { margin-top: -661px; }
  .u-section-1 .u-image-7 { margin-top: 479px; margin-left: 0; }
  .u-section-1 .u-image-8 {
    margin-top: -248px;
    margin-right: calc(((100% - 720px) / 2) - 64px);
    margin-bottom: 38px;
  }
}

/* ---------------------------------------------------
   Large Phones
--------------------------------------------------- */
@media (max-width: 767px) {
  .u-section-1 { min-height: 2004px; }
  .u-section-1 .u-image-1 {
    width: 443px; height: 250px;
    margin-top: 1414px;
    margin-left: calc(((100% - 540px) / 2) + 38px);
    margin-right: auto;
  }
  .u-section-1 .u-image-2 {
    margin-top: -1631px;
    margin-right: calc(((100% - 540px) / 2));
    margin-left: auto;
  }
  .u-section-1 .u-image-3 { margin-top: 519px; margin-right: calc(((100% - 540px) / 2) + 45px); }
  .u-section-1 .u-image-4 { margin-top: -247px; margin-left: calc(((100% - 540px) / 2) + 131px); }
  .u-section-1 .u-image-5 { margin-top: -426px; }
  .u-section-1 .u-image-6 { margin-top: 305px; margin-right: calc(((100% - 540px) / 2) - 29px); }
  .u-section-1 .u-image-7 { margin-top: 359px; margin-left: calc(((100% - 540px) / 2) - 29px); }
  .u-section-1 .u-image-8 {
    margin: -1652px auto 60px calc(((100% - 540px) / 2) + 30px);
  }
}

/* ---------------------------------------------------
   Small Phones
--------------------------------------------------- */
@media (max-width: 575px) {
  .u-section-1 { min-height: 1861px; }
  .u-section-1 .u-image-1 {
    width: 344px; height: 199px;
    margin-top: 1119px;
    margin-left: calc(((100% - 340px) / 2) - 15px);
  }
  .u-section-1 .u-image-2 {
    width: 340px; height: 186px;
    margin-top: -1230px;
    margin-right: calc(((100% - 340px) / 2));
  }
  .u-section-1 .u-image-3 {
    width: 374px; height: 282px;
    margin-top: 553px;
    margin-right: calc(((100% - 340px) / 2) - 34px);
  }
  .u-section-1 .u-image-4 {
    margin-top: -224px;
    margin-right: calc(((100% - 340px) / 2) + 24px);
    margin-left: auto;
  }
  .u-section-1 .u-image-5 { margin-top: -720px; margin-left: auto; }
  .u-section-1 .u-image-6 {
    width: 340px; height: 218px;
    margin-top: 826px;
    margin-left: calc(((100% - 340px) / 2) - 15px);
    margin-right: auto;
  }
  .u-section-1 .u-image-7 {
    width: 340px; height: 201px;
    margin-top: -989px;
    margin-right: calc(((100% - 340px) / 2) - 17px);
    margin-left: auto;
  }
  .u-section-1 .u-image-8 {
    width: 340px; height: 178px;
    margin-top: 836px;
    margin-left: calc(((100% - 340px) / 2) - 13px);
    margin-bottom: 30px;
  }
}

.u-section-1 {
  position: relative;
  overflow: hidden; /* Ensure SVGs don't overflow */
}

/* Container for floating SVGs */
.background-svgs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let clicks pass through */
  z-index: 1; /* Behind logos which have z-index default or higher */
}

/* All SVG shapes styled to float slowly */
.background-svgs .bg-svg {
  position: absolute;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Individual animation and positioning */
.background-svgs .svg1 {
  width: 150px;
  height: 150px;
  top: 10%;
  left: 15%;
  animation-name: floatUpDown;
  animation-duration: 8s;
}

.background-svgs .svg2 {
  width: 120px;
  height: 120px;
  top: 60%;
  left: 70%;
  animation-name: floatLeftRight;
  animation-duration: 10s;
}

.background-svgs .svg3 {
  width: 100px;
  height: 100px;
  top: 30%;
  left: 45%;
  animation-name: floatUpDown;
  animation-duration: 12s;
}

/* Keyframes for animations */

@keyframes floatUpDown {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

@keyframes floatLeftRight {
  from { transform: translateX(0); }
  to { transform: translateX(20px); }
}
.u-section-1 {
  position: relative;
  overflow: hidden; /* Prevent SVG edges from overflowing */
}

/* Container for floating SVG circles */
.background-svgs {
  position: absolute;
  top: 0;
  right: 0;  /* Align container to top right */
  width: 40%; /* Limit width to keep shapes on top right */
  height: 40%; /* Limit height for top corner placement */
  pointer-events: none; /* Allow clicks through */
  z-index: 1; /* Behind logos */
}

/* SVG circles styling */
.background-svgs .bg-svg {
  position: absolute;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  opacity: 0.1;
}

/* Preloader container covering full viewport */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff; /* Background behind the logo */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* On top of all page content */
}

/* Logo styling and fade-in animation */
.preloader-logo {
  width: 150px; /* Adjust size as needed */
  height: auto;
  opacity: 0;
  animation: fadeInOpacity 3s forwards;
}

/* Fade-in keyframes */
@keyframes fadeInOpacity {
  from { opacity: 0; }
  to { opacity: 1; }
}