/* custom css */

/* for title */
.custom-margin-right {
  margin-right: -3rem;
  /* Responsive font sizes */
  @media (min-width: 576px) {
    margin-right: -3rem;
  }
  @media (min-width: 768px) {
    margin-right: -3.5rem;
  }
  @media (min-width: 992px) {
    margin-right: -4rem;
  }
  @media (min-width: 1200px) {
    margin-right: -4.5rem;
  }
  @media (min-width: 1400px) {
    margin-right: -5rem;
  }
}

/* for bg masthead */
.masthead-custom {
  margin-top: 6.5rem;
  /* Responsive top padding */
  @media (min-width: 992px) {
    margin-top: 0;
  }
}

/* whole page */
.page-custom {
  margin-right: 0rem;
  padding-right: 0rem;
  width: 100%;
}

/* transferwise */

/* Spinner Styles */
#loading-spinner {
  max-width: 100%;
  margin: 0 auto;
}

/* Calculator container styles */
#wise-calc-widget {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Adjust max-width for larger screens */
@media (min-width: 768px) {
  #wise-calc-widget {
    max-width: 700px; /* Adjust as needed */
  }
}

/* Make all inner elements responsive */
#wise-calc-widget * {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Responsive images and media */
#wise-calc-widget img,
#wise-calc-widget video {
  width: 100%;
  height: auto;
}

/* Adjust font size for smaller screens */
@media (max-width: 767px) {
  #wise-calc-widget {
    font-size: 14px;
  }
}

/* Set global box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Custom row to set max-width and center it */
.row-custom {
  display: flex;
  flex-wrap: wrap;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* Columns */
.row-custom .col-md-6 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* On larger screens, set columns to 50% width */
@media (min-width: 768px) {
  .row-custom .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Ensure iframe is responsive */
.row-custom .col-md-6 iframe {
  width: 100%;
  height: 400px;
  border: 0;
}

/* Custom padding-bottom class */
.pb-10 {
  padding-bottom: 10px;
}

/* service section */
/* for about section */
.service-custom {
  padding-top: 2.5rem;
  padding-bottom: 1rem;
}
.service-custom h2 {
  font-size: 2.5rem;
  padding-bottom: 0.4rem;
  font-weight: 500;

  /* Responsive font sizes */
  @media (min-width: 576px) {
    font-size: 2.5rem;
  }
  @media (min-width: 768px) {
    font-size: 2.6rem;
  }
  @media (min-width: 992px) {
    font-size: 2.7rem;
  }
  @media (min-width: 1200px) {
    font-size: 2.8rem;
  }
}

.icon-custom {
    padding-bottom: 0;
    @media (max-width: 768px) {
        padding-bottom: 1.2rem;
    }
}

@media (max-width: 768px) {
  .font-flex-custom {
    text-align: center;
    padding-bottom: 0.3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .font-flex-custom h3 {
    font-size: 1.2rem;
  }

  .font-flex-custom p {
      font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
    .font-flex-custom h3 {
        font-size: 1.5rem;
    }

    .font-flex-custom p {
        font-size: 1.1rem;
    }
}

/* ========== NAVBAR ANIMATION ========== */
#mainNav, .navbar-brand {
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

.loaded #mainNav, .loaded .navbar-brand {
    opacity: 1;
}

/* ========== MASTHEAD ANIMATION ========== */
.masthead .text-wrapper-h1, .masthead .text-wrapper-h2 {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.masthead .text-wrapper-h1 {
    min-height: 40px;
    max-height: 110px;
    height: auto;
    min-width: 100%;
    padding-right: 10px;
}

.masthead .text-wrapper-h2 {
    min-height: 10px;
    max-height: 20px;
    height: auto;
    min-width: 100%;
}

/* Hide text below the baseline */
.masthead h1 span, .masthead h2 span {
    display: inline-block;
    opacity: 0;
    transform: translateY(120px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Animate letters when .loaded is applied */
.loaded .masthead h1 span, .loaded .masthead h2 span {
    opacity: 1;
    transform: translateY(0);
}

/* Delays for h1 */
.loaded .masthead h1 span:nth-child(1) { transition-delay: 0.1s; }
.loaded .masthead h1 span:nth-child(2) { transition-delay: 0.2s; }
.loaded .masthead h1 span:nth-child(3) { transition-delay: 0.3s; }
.loaded .masthead h1 span:nth-child(4) { transition-delay: 0.4s; }
.loaded .masthead h1 span:nth-child(5) { transition-delay: 0.5s; }
.loaded .masthead h1 span:nth-child(6) { transition-delay: 0.6s; }

/* Delays for h2 */
.loaded .masthead h2 span:nth-child(1) { transition-delay: 0.6s; }
.loaded .masthead h2 span:nth-child(2) { transition-delay: 0.65s; }
.loaded .masthead h2 span:nth-child(3) { transition-delay: 0.7s; }
.loaded .masthead h2 span:nth-child(4) { transition-delay: 0.75s; }
.loaded .masthead h2 span:nth-child(5) { transition-delay: 0.8s; }
.loaded .masthead h2 span:nth-child(6) { transition-delay: 0.85s; }
.loaded .masthead h2 span:nth-child(7) { transition-delay: 0.9s; }
.loaded .masthead h2 span:nth-child(8) { transition-delay: 0.95s; }
.loaded .masthead h2 span:nth-child(9) { transition-delay: 1s; }
.loaded .masthead h2 span:nth-child(10) { transition-delay: 1.05s; }
.loaded .masthead h2 span:nth-child(11) { transition-delay: 1.1s; }
.loaded .masthead h2 span:nth-child(12) { transition-delay: 1.15s; }
.loaded .masthead h2 span:nth-child(13) { transition-delay: 1.2s; }
.loaded .masthead h2 span:nth-child(14) { transition-delay: 1.25s; }
.loaded .masthead h2 span:nth-child(15) { transition-delay: 1.3s; }

/* Button Animation */
.masthead a {
    opacity: 0;
    transform: translateY(20px);
}

.loaded .masthead a {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transition-delay: 2s;
}

/* ========== ABOUT SECTION ANIMATIONS ========== */
.about-custom {
  padding-top: 8rem;
  padding-bottom: 5rem;

  /* Responsive breakpoints */
  @media (min-width: 576px) {
    padding-top: 8rem;
    padding-bottom: 5rem;
  }
  @media (min-width: 768px) {
    padding-top: 9rem;
    padding-bottom: 6rem;
  }
  @media (min-width: 992px) {
    padding-top: 10rem;
    padding-bottom: 6rem;
  }

  p {
    margin-bottom: 1.2rem;
    font-size: 0.9rem;

    @media (min-width: 576px) {
      font-size: 0.9rem;
    }
    @media (min-width: 768px) {
      font-size: 1rem;
    }
    @media (min-width: 992px) {
      font-size: 1rem;
    }
    @media (min-width: 1200px) {
      font-size: 1.1rem;
    }

    opacity: 0;
    transition: opacity 1.5s ease-out;

    &.in-view {
      opacity: 1;
    }
  }

  h2 {
    font-size: 2.5rem;
    margin: 0;
    font-weight: 500;

    /* Responsive font sizes */
    @media (min-width: 576px) {
      font-size: 2.5rem;
    }
    @media (min-width: 768px) {
      font-size: 2.6rem;
    }
    @media (min-width: 992px) {
      font-size: 2.8rem;
    }
    @media (min-width: 1200px) {
      font-size: 3rem;
    }

    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;

    @media (max-width: 576px) {
      transform: translateY(30px);
    }
    @media (min-width: 768px) {
      transform: translateY(50px);
    }

    &.in-view {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .text-wrapper-h2 {
    overflow: hidden;
  }
}

/* ========== SERVICES SECTION ANIMATIONS ========== */

#services .service-custom h2 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 2s ease-out, transform 2s ease-out;
}
#services .service-custom h2.in-view {
  opacity: 1;
  transform: translateY(0);
}

#services .animate-content {
  opacity: 0;
  transition: opacity 2s ease-out;
}
#services .animate-content.in-view {
  opacity: 1;
}

/* ========== TRANSFERWISE SECTION ANIMATIONS ========== */

#example h2 {
  font-size: 2.2rem;
  margin: 0;
  font-weight: 500;

  /* Responsive font sizes */
  @media (min-width: 576px) {
    font-size: 2.2rem;
  }
  @media (min-width: 768px) {
    font-size: 2.3rem;
  }
  @media (min-width: 992px) {
    font-size: 2.4rem;
  }
  @media (min-width: 1200px) {
    font-size: 2.5rem;
  }

  opacity: 0;
  transform: translateY(30px);
  transition: opacity 2s ease-out, transform 2s ease-out;
}

#example h2.in-view {
  opacity: 1;
  transform: translateY(0);
}

.animate-content {
  opacity: 0;
  transition: opacity 2s ease-out;
}

.animate-content.in-view {
  opacity: 1;
}

/* ========== CONTACT SECTION ANIMATIONS ========== */

#contact h1 {
  font-size: 2.2rem;
  margin: 0;
  font-weight: 500;

  /* Responsive font sizes */
  @media (min-width: 576px) {
    font-size: 2.2rem;
  }
  @media (min-width: 768px) {
    font-size: 2.3rem;
  }
  @media (min-width: 992px) {
    font-size: 2.4rem;
  }
  @media (min-width: 1200px) {
    font-size: 2.5rem;
  }

  opacity: 0;
  transform: translateY(30px);
  transition: opacity 2s ease-out, transform 2s ease-out;
}

#contact h1.in-view {
  opacity: 1;
  transform: translateY(0);
}

#contact iframe,
#contact .contact-form {
  opacity: 0;
  transition: opacity 2s ease-out;
}

#contact iframe.in-view,
#contact .contact-form.in-view {
  opacity: 1;
}

/* ========== Q&A SECTION ANIMATIONS ========== */

#qa .qa-custom h2 {
  font-size: 2.2rem;
  margin: 0;
  font-weight: 500;

  /* Responsive font sizes */
  @media (min-width: 576px) {
    font-size: 2.2rem;
  }
  @media (min-width: 768px) {
    font-size: 2.3rem;
  }
  @media (min-width: 992px) {
    font-size: 2.4rem;
  }
  @media (min-width: 1200px) {
    font-size: 2.5rem;
  }
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 2s ease-out, transform 2s ease-out;
}
#qa .qa-custom h2.in-view {
  opacity: 1;
  transform: translateY(0);
}

#qa .animate-content {
  opacity: 0;
  transition: opacity 2s ease-out;
}
#qa .animate-content.in-view {
  opacity: 1;
}

/* global css */

.in-view {
  transition-delay: 0.2s !important;
}

.heading-wrapper {
  overflow: hidden;
}