/* Base styles will be handled by Tailwind CSS */

/* Custom Styles */
:root {
  /* --primary-dark: #0F2B46;
      --primary: #1E3A8A;
      --primary-light: #3B82F6;
      --accent: #0EA5E9;
      --accent-light: #38BDF8;
      --accent-extra-light: #BAE6FD;
      --highlight: #FB7185; */
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 200px;
}
div#contact-us {
  scroll-snap-align: start;
}
body {
  font-family: "Poppins", "Lato", "Montserrat", sans-serif;
  /* font-family: "Raleway", "Montserrat", sans-serif; */
  font-weight: 500;
}

/* Navbar */
.page-template-page-home-3 .home-page {
  padding-top: 64px;
  background-color: white;
}

/* ***************************** */
/* HOME CSS - START  */
/* ***************************** */

/* Add keyframes animation style block for bubble and fadeIn animations  */
@keyframes bubble {
  0% {
    bottom: -50px;
    opacity: 0;
    transform: translateX(0);
  }

  20% {
    opacity: 0.2;
  }

  40% {
    opacity: 0.4;
  }

  60% {
    opacity: 0.1;
  }

  80% {
    transform: translateX(-20px);
  }

  100% {
    bottom: 100%;
    opacity: 0;
    transform: translateX(20px);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }

  100% {
    width: 500%;
    height: 500%;
    opacity: 0;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

.animate-float {
  animation: float 8s ease-in-out infinite;
}

.animate-float-delay {
  animation: float 8s ease-in-out 2s infinite;
}

.section-title-animated {
  margin-bottom: 2.5rem;
}
/* Animation classes for scroll-triggered animations */
.section-title-animated.show,
.section-subtitle-animated.show,
.section-underline-animated.show {
  opacity: 1;
  transform: translateY(0);
}

/* ***************************** */
/* HOME CSS - END  */
/* ***************************** */