/* Custom styles for animations */
    @keyframes floatAnimation {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
        100% {
            transform: translateY(0);
        }
    }

    @keyframes scaleDown {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(0.9);
            opacity: 0.8; /* Reduce opacity by 20% */
            filter: blur(10px);
        }
        100% {
            transform: scale(1);
            opacity: 1;
            filter: blur(0px);
        }
    }

    /* Apply animation to floating images */
    .floating-image {
        animation: floatAnimation 4s ease-in-out infinite;
    }

    .scale-down {
        animation: scaleDown 4s ease-in-out infinite;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    .fade-in {
      animation: fadeIn 1s ease-in forwards;
    }

.hidden{
  opacity: 1;
}
    #hero {
      position: relative;
      overflow: hidden;
    }

    .video-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1; /* Ensure the video is behind other content */
    }

    .messages .message {
      clear: both;
      float: left;
      padding: 10px 20px;
      border-radius: 30px;
      background-color: #26252A;

      font-size: 20px; /* Default font size */
      line-height: 1.4;
      position: relative;
      background: linear-gradient(to bottom, #035c59 0%, #027966 60%);
      /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */
    }

    /* Media query for screens smaller than 768px */
    @media (max-width: 767px) {
      .messages .message {
        font-size: 14px;
        margin: 20px 40px 15px 70px;
      }
    }

    /* Media query for screens between 768px and 1023px */
    @media (min-width: 768px) and (max-width: 1023px) {
      .messages .message {
        font-size: 16px;
        margin: 20px 60px 15px 70px;
      }
    }

    /* Media query for screens 1024px and larger */
    @media (min-width: 1024px) {
      .messages .message {
        font-size: 20px;
        margin: 20px 100px 15px 70px;
      }
    }
    .loader-container {
      position: relative;
      width: 50px;
      overflow-y: unset; /* Enable vertical scrolling */
      max-height: unset; /* Adjust as needed to fit your design */
      height: 50px;
      animation: rotate 4s ease-out infinite;
      filter: url("#gooey");
      transform: scale(1);
    }
@keyframes rotate {
  0% {
    transform: rotate(360deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.loader-container {
  position: relative;
  width: 50px;
  overflow-y: unset; /* Enable vertical scrolling */
  max-height: unset; /* Adjust as needed to fit your design */
  overflow: visible;
  height: 50px;
  animation: rotate 4s ease-out infinite;
  filter: url("#gooey");
  transform: scale(1);
}

#typewriter-container {
  font-family: monospace; /* Optional: for a typewriter font */
  white-space: pre-wrap; /* Preserve whitespace and line breaks */
  line-height: 1.5; /* Adjust line height for readability */
}
.loader-container .liquid {
  position: absolute;
  top: 50%;
  overflow: visible;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(45deg, #FFEBC7, #FCB042);
  width: 40px;
  height: 40px;
  border-radius: 20%;
  --ani_dur: 4s;
}
.loader-container .liquid:nth-child(1) {
  top: 0;
  animation: animate1 var(--ani_dur) linear infinite;
}
.loader-container .liquid:nth-child(2) {
  left: 0;
  animation: animate2 var(--ani_dur) linear infinite;
}
.loader-container .liquid:nth-child(3) {
  left: 100%;
  animation: animate3 var(--ani_dur) linear infinite;
}
.loader-container .liquid:nth-child(4) {
  top: 100%;
  animation: animate4 var(--ani_dur) linear infinite;
}
@keyframes animate1 {
  0% {
    top: 0;
  }
  50% {
    top: 100%;
  }
  100% {
    top: 100%;
  }
}
@keyframes animate2 {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
iti__country-container{border: 1px solid red !important}
@keyframes animate3 {
  0% {
    left: 100%;
  }
  50% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
@keyframes animate4 {
  0% {
    top: 100%;
  }
  50% {
    top: 0;
  }
  100% {
    top: 0;
  }
}
svg {
  width: 0;
  height: 0;
}
svg {
  width: 0;
  height: 0;
}

.modal {
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: 1.5;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(15px);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 1s ease, visibility 1s ease;
    }

    .modal-content {
        /* background: #FFF9D4; */
        min-height: 80px;
        transform: scale(0.8);
        transition: transform 0.5s ease, opacity 0.5s ease;
        opacity: 0;
    }

    .modal.show {
        opacity: 1;
        visibility: visible;
    }

    .modal.show .modal-content {
        transform: scale(1);
        opacity: 1;
    }

    #autocomplete {
        transition: width 0.5s ease, border-color 0.5s ease;
        width: 100%; /* Initial width */
    }

    .animate-to-square {
        width: 50px; /* Target width */
        border-color: yellow; /* Target border color */
    }


    .bubbles-desktop{
      display: none;
  }
  .bubbles-mobile{
      display: block;
  }
  
      /* Media query for screens between 768px and 1023px */
      @media (min-width: 768px) {
          .bubbles-desktop{
              display: block;
          }
          .bubbles-mobile{
              display: none;
          }
        }