@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;900&family=Roboto+Condensed&family=Saira+Condensed:wght@400;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {
  .max-container {
    max-width: 1440px;
    margin: 0 auto;
  }

  .input {
    @apply sm:flex-1 max-sm:w-full text-base leading-normal text-slate-gray pl-5 max-sm:p-5 outline-none sm:border-none border max-sm:border-slate-gray max-sm:rounded-full;
  }
}

@layer utilities {
  .padding {
    @apply sm:px-16 px-8 sm:py-24 py-12;
  }

  .padding-x {
    @apply sm:px-16 px-8;
  }

  .padding-x1 {
    @apply sm:px-8 px-4
  }

  .padding-y {
    @apply sm:py-24 py-12;
  }

  .padding-l {
    @apply sm:pl-16 pl-8;
  }

  .padding-r {
    @apply sm:pr-16 pr-8;
  }

  .padding-t {
    @apply sm:pt-24 pt-12;
  }

  .padding-b {
    @apply sm:pb-24 pb-12;
  }

  .info-text {
    @apply font-montserrat text-slate-gray text-lg leading-7;
  }

  .nvbrtext-current {
    @apply font-poppins text-base font-semibold text-light-blue 
  }

  .nvbrtext {
    @apply font-poppins text-base font-semibold hover:text-light-blue text-white duration-300
  }

  .nvbrtext2 {
    @apply font-poppins text-base font-semibold hover:text-light-blue text-[#00000070] duration-300
  }

  .btnfont {
    @apply font-saira text-lg font-bold
  }

  .ftrfont {
    @apply text-white font-poppins text-base leading-9
  }

  .pfont {
    @apply  font-roboto text-lg font-normal leading-normal pb-4 max-w-md md:max-w-xl max-md:text-center
  }

  .bgfont {
    @apply font-poppins text-[110px] text-center font-black opacity-50
  }

  .osframwfont {
    @apply font-roboto font-bold leading-normal text-[#163C70] text-2xl
  }

  .centering {
    @apply absolute right-1/2 translate-x-1/2 top-1/2 -translate-y-1/2
  }

}

.hvreffect:hover .hvreffect1 {
  transform: translate(15px ,15px);
}

.maxrevert {
  max-width: revert;
}

.partnergrid {
  grid-column-gap: 2rem;
  grid-row-gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-top: .5rem;
  padding-bottom: .5rem;
  display: flex;
}

.reveal {
  position: relative;
  transform: translateY(200px);
  opacity: 0;
  transition: all 2s ease;
}

.show-ainmate {
  transform: translateY(0px);
  opacity: 1;
}

.animate-spin {
  animation: spin 10s linear infinite;
}

.animate-float {
  animation: float 5s linear infinite;
}

.animate-float1 {
  animation: float1 5s linear infinite;
}

.fade-in-element-r {
  opacity: 0; 
  transform: translateX(200px); 
  animation: fadeInRight 1s ease forwards; 
}

.fade-in-element-l {
  opacity: 0; 
  transform: translateX(-100px); 
  animation: fadeInRight 1s ease forwards; 
}

@keyframes fadeInRight {
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

@keyframes spin1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0% {
    transform: translate(0,0);
    transform: scale(1);
  }
  50% {
    transform: translate(-15px,15px);
    transform: scale(1.05);
  }
  100% {
    transform: translate(0,0);
    transform: scale(1);
  }
}

@keyframes float1 {
  0% {
    transform: translate(0,0);
    transform: scale(1);
  }
  50% {
    transform: translate(15px,-15px);
    transform: scale(1.05);
  }
  100% {
    transform: translate(0,0);
    transform: scale(1);
  }
}