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

@layer components {
  .ka-btn {
    @apply relative overflow-hidden rounded-[5px] pl-3  sm:pl-5 md:pl-[25px] pr-12 sm:pr-14 md:pr-[74px] border border-kaSoft bg-white  cursor-pointer;
  }
  .ka-btn:hover {
    @apply border-kaBrown bg-kaAccentCream
  }
  .ka-btn1 {
    @apply py-2 md:py-[10px];
  }
  .ka-btn2 {
    @apply py-2 md:py-[17px];
  }

  .ka-btn-icon {
    @apply absolute h-4 w-4  md:h-6 md:w-6 transition-all duration-300  ease-in;
  }

  .ka-btn-icon-left {
    @apply  left-[-26px] ;
  }

  .ka-btn:hover .ka-btn-icon-left {
    @apply left-[26px] ;
  }
  .ka-btn-icon-right {
    @apply right-[26px] ;
  }

  .ka-btn:hover .ka-btn-icon-right {
    @apply right-[-26px] ;
  }

  .ka-btn-text{
   @apply text-kaDark font-manrope uppercase transition-all duration-300 ease-in font-bold text-xs sm:text-sm md:text-base/[26px] tracking-[3%] text-center;
  }

  .ka-btn:hover .ka-btn-text {
    @apply translate-x-10  text-kaBrown;
  }

  /* navbar css */
  .ka-nav-dark{
    @apply text-kaAccentCream bg-[#FFFFFF1A] ;
  }

  .ka-nav-light{
    @apply text-kaAccentCream lg:text-black bg-white ;
  }


 .ka-bottom-navbar.ka-nav-static  .ka-navbar-bottom__link:hover{
@apply bg-kaAccentCream
  }
  
/* accordian css */
  .ka-accordian .ka-item.active {
    @apply bg-kaAccentCream;
  }
 .ka-accordian .ka-item.active .ka-header .ka-title{
  @apply text-kaBrown
 }

  .ka-accordian .ka-item:not(.active) .ka-content {
    @apply h-0 overflow-hidden;
  }
  .ka-accordian .ka-item.active .ka-content {
    @apply py-2;
  }
  .ka-accordian .ka-item.active .ka-acc-icon {
    @apply -rotate-45;
  }

  /* hamburger css */
.ka-hamburger .ka-hamburger-line.ka-ham-dark{
  @apply bg-kaAccentCream;
}

.ka-hamburger .ka-hamburger-line.ka-ham-light{
  @apply bg-kaBrown;
}

.ka-hamburger.active .ka-hamburger-line{
    @apply absolute transition-all duration-200 ease-out;
}
.ka-hamburger.active .ka-hamburger-line.ka-line-1{
    @apply rotate-45
}
.ka-hamburger.active .ka-hamburger-line.ka-line-3{
    @apply -rotate-45
}
.ka-hamburger.active .ka-hamburger-line.ka-line-2{
    @apply hidden
}

/* navbar css */
.ka-fade-in-menu.ka-show-menu {
    @apply translate-y-0 transition-all ease-in duration-75 overflow-hidden;
}

}


/* courses box css */
.ka-course-title-box{
  @apply py-[15px] px-[25px] bg-kaOffBgWhite shadow-[0px_1px_4px_0px_#00000026] rounded-[25px] self-start text-kaSoft cursor-pointer
}
.ka-course-title-box.active{
  @apply  bg-kaDark text-white ;
}



/* form css */
.ka-form .ka-row.ka-row__1 {
  @apply grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-6
}
.ka-form .ka-row.ka-row__2{
  @apply grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6
}

.ka-form .ka-form-control-wrap .ka-form-control{
@apply  w-full py-[13px] px-4 lg:px-6 border border-kaOffBg shadow-[0px_1px_2px_0px_#0000000D] rounded-[5px]
}

.ka-form .ka-form-control-wrap .ka-form-control.ka-place-holder{
  @apply placeholder:font-manrope placeholder:font-medium placeholder:lg:text-sm/[24px] placeholder:text-xs placeholder:text-[#5F5F5F4D] placeholder:capitalize
}

.ka-form-group .ka-label{
@apply font-manrope font-medium text-sm md:text-base/[26px] text-kaDark pb-3
}


.ka-student-love .ka-content .ka-content-box{
@apply transition-all duration-300 ease-in
}

.ka-student-love .ka-content .ka-content-box:hover{
@apply bg-kaAccentCream border border-kaBrown text-kaBrown
}



 /* default */
.ka-bottom-navbar{
@apply  border-b border-[#FFFFFF1A]
}
 /* scrolled */
.ka-bottom-navbar.is-scrolled{
@apply border border-b-[0.5px] border-[#E7E7E7]
}


/* default state */
.ka-bottom-navbar .ka-navbar-bottom__link {
    @apply hover:bg-white;
}

/* active state (static OR scrolled) */
.ka-bottom-navbar.is-active .ka-navbar-bottom__link {
    @apply hover:bg-kaAccentCream;
}