/* Template Name: Authea - Tailwind CSS Authentication Pages Template
   Author: Zoyothemes
   Email: zoyothemes@gmail.com
   Website: http://zoyothemes.com/
   Version: 1.0.0
   Created: January 2024
   File: Main Css File
*/
@import url("https://fonts.googleapis.com/css?family=Nunito:300,400,600,700&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
/*********************************/
/*             General           */
/*===============================*/
html {
  @apply scroll-smooth;
}

body {
  @apply font-nunito text-[15px] text-black;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  @apply font-nunito;
}

p {
  @apply leading-relaxed;
  @apply font-nunito;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  @apply font-nunito;
}

/********************/
/*     Buttons      */
/*==================*/
/* Note: If you want to add your own colors, you can do so by going to this tailwind.config.js file  */
.btn {
  @apply py-2 px-5 inline-block font-normal tracking-wide border align-middle transition duration-500 ease-in-out text-base text-center;
  /*  Button icons */
  /* Button Link */
}

.btn.btn-lg {
  @apply py-2.5 px-6 text-lg;
}

.btn.btn-sm {
  @apply py-[5px] px-4 text-sm;
}

.btn.btn-icon {
  @apply p-0 h-9 w-9 inline-flex items-center text-center justify-center text-base;
}

.btn.btn-icon.btn-lg {
  @apply h-12 w-12;
}

.btn.btn-icon.btn-sm {
  @apply h-8 w-8;
}

.btn.btn-link {
  @apply relative p-0 border-none after:content-[''] after:absolute after:h-px after:w-0 after:right-0 after:bottom-0 after:left-0 after:transition-all after:duration-500;
}

.btn.btn-link:hover {
  @apply after:w-full after:right-auto;
}

/*********************************/
/*             Menu              */
/*===============================*/
.navbar {
  @apply fixed top-0 left-0 right-0 z-999 bg-transparent py-3 transition-all duration-500 font-nunito;
}

.navbar .navigation {
  @apply w-full m-0;
}

.navbar .navigation .navbar-nav {
  @apply mt-4 flex flex-row overflow-y-scroll h-24;
}

.navbar .navigation .navbar-nav .nav-link {
  @apply block p-3 text-black hover:text-blue-500 dark:text-white/60 dark:hover:text-white;
}

.navbar .navigation .navbar-nav .active .nav-link {
  @apply text-blue-500 dark:text-white;
}

.navbar .navbar-brand {
  @apply mr-12 p-0;
}

.navbar .navbar-brand .l-dark,
.navbar .navbar-brand .logo-dark-mode {
  @apply hidden;
}

.navbar .navbar-brand .l-light,
.navbar .navbar-brand .logo-light-mode {
  @apply inline-block;
}

@media (max-width: 991.98px) {
  .navbar .navbar-brand .l-dark {
    @apply inline-block !important;
  }
  .navbar .navbar-brand .l-light {
    @apply hidden !important;
  }
}

.navbar .menu-social .login-btn-primary {
  @apply hidden;
}

.navbar .menu-social .login-btn-light {
  @apply inline-block;
}

@media (max-width: 991.98px) {
  .navbar .menu-social .login-btn-primary {
    @apply inline-block !important;
  }
  .navbar .menu-social .login-btn-light {
    @apply hidden !important;
  }
}

.navbar.is-sticky {
  @apply bg-white dark:bg-black shadow dark:shadow-slate-800;
}

.navbar.is-sticky .navbar-brand .l-dark {
  @apply inline-block;
}

.navbar.is-sticky .navbar-brand .l-light {
  @apply hidden;
}

.navbar.is-sticky .menu-social .login-btn-primary {
  @apply inline-block;
}

.navbar.is-sticky .menu-social .login-btn-light {
  @apply hidden;
}

@media (min-width: 992px) {
  .navbar {
    @apply py-3;
  }
  .navbar .navigation {
    @apply flex w-auto;
  }
  .navbar .navigation .navbar-nav {
    @apply h-auto mt-0 overflow-visible;
  }
  .navbar .navigation .navbar-nav .nav-link {
    @apply border-0 hover:bg-transparent;
  }
  .navbar .navigation .navbar-nav.nav-light .nav-link {
    @apply block p-3 text-white/60 hover:text-white;
  }
  .navbar .navigation .navbar-nav.nav-light .active .nav-link {
    @apply text-white;
  }
  .navbar .nav-icons .collapse-btn {
    @apply hidden;
  }
  .navbar.is-sticky {
    @apply py-3;
  }
  .navbar.is-sticky .navbar-nav .nav-link {
    @apply text-black;
  }
  .navbar.is-sticky .navbar-nav .active .nav-link {
    @apply text-blue-500;
  }
  .navbar.is-sticky .navbar-nav.nav-light .nav-link {
    @apply text-black hover:text-blue-500 dark:text-white/60 dark:hover:text-white;
  }
  .navbar.is-sticky .navbar-nav.nav-light .active .nav-link {
    @apply text-blue-500 dark:text-white;
  }
}

@media (max-width: 991px) {
  .navbar {
    @apply bg-white shadow dark:shadow-slate-800 dark:bg-black !important;
  }
  .navbar .navigation .navbar-nav {
    @apply block h-[21.25rem];
  }
  .navbar .navigation .navbar-nav .nav-link {
    @apply text-black;
  }
  .navbar .navigation .navbar-nav .active .nav-link {
    @apply text-blue-500;
  }
  .navbar .navigation .navbar-nav .menu-social {
    @apply mb-5 !important;
  }
}

/* // _footer.scss */
/*********************************/
/*         Footer                */
/*===============================*/
.footer .foot-subscribe input::-webkit-input-placeholder {
  @apply text-gray-200;
}
.footer .foot-subscribe input:-ms-input-placeholder {
  @apply text-gray-200;
}
.footer .foot-subscribe input::-ms-input-placeholder {
  @apply text-gray-200;
}
.footer .foot-subscribe input::placeholder {
  @apply text-gray-200;
}

/*********************************/
/*             Helper            */
/*===============================*/
.container,
.contacinr-fluid {
  @apply relative;
}

.text-type-element {
  @apply z-2 after:content-[''] after:absolute after:h-1 after:w-auto after:bg-orange-300 after:right-0 after:bottom-0 after:left-0 after:z-0 after:rounded-md after:transition-all after:duration-300 after:ease-in-out;
}

/*****************/
/* Tobii Lighbox */
/*****************/
.tobii__btn svg {
  height: theme("height.5");
  width: auto;
}

.tobii__counter {
  font-size: theme("fontSize.base");
}

.tobii-zoom {
  display: block;
}

.tobii-zoom__icon {
  display: none;
}

#grid {
  padding: theme("spacing.0");
}

/*****************/
/* Subscribe Form */
/*****************/
.subcribe-form form {
  @apply max-w-xl;
}

.subcribe-form form input {
  @apply py-4 pr-40 pl-8 w-full h-11 outline-none text-dark;
}

.subcribe-form form .btn {
  @apply absolute top-0 right-0 h-11;
}

/*****************/
/*    Shapes     */
/*****************/
/* Shapes */
.shape {
  @apply absolute right-0 -bottom-px left-0;
}

.shape > svg {
  @apply w-full h-auto;
  -webkit-transform: scale(2);
          transform: scale(2);
  -webkit-transform-origin: theme("transformOrigin.top") theme("transformOrigin.center");
          transform-origin: theme("transformOrigin.top") theme("transformOrigin.center");
}

/*****************/
/*  back-to-top  */
/*****************/
.back-to-top {
  @apply hidden;
}

/*****************/
/*  Bg Video Hero  */
/*****************/
.bg-video-wrapper {
  @apply absolute top-0 left-0 w-full h-full z-0 pointer-events-none overflow-hidden;
}

.bg-video-wrapper iframe {
  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-screen h-[56.25vw] min-h-screen min-w-[177.77vw];
}

/*****************/
/*    Switcher   */
/*****************/
.label .ball {
  -webkit-transition: -webkit-transform 0.2s linear;
  transition: -webkit-transform 0.2s linear;
  transition: transform 0.2s linear;
  transition: transform 0.2s linear, -webkit-transform 0.2s linear;
  @apply translate-x-0;
}

.checkbox:checked + .label .ball {
  @apply translate-x-6;
}

/*****************/
/*   Preloader   */
/*****************/
#preloader {
  background-image: linear-gradient(45deg, #ffffff, #ffffff);
  z-index: 99999;
  @apply fixed inset-0;
}

#preloader #status {
  @apply absolute left-0 right-0 top-1/2 -translate-y-1/2;
}

#preloader #status .spinner {
  @apply w-10 h-10 relative my-[100px] mx-auto;
}

#preloader #status .spinner .double-bounce1, #preloader #status .spinner .double-bounce2 {
  @apply w-full h-full rounded-full bg-orange-600/60 absolute top-0 left-0;
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
          animation: sk-bounce 2.0s infinite ease-in-out;
}

#preloader #status .spinner .double-bounce2 {
  -webkit-animation-delay: -1.0s;
          animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-bounce {
  0%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/*****************/
/*  Timeline     */
/*****************/
.timeline {
  @apply after:content-[''] after:absolute after:top-0 after:right-0 after:left-0 after:w-px after:h-full after:m-auto after:border-l-2 after:border-dashed after:border-gray-200 dark:after:border-gray-600;
}

.timeline .timeline-item .date-label-left,
.timeline .timeline-item .duration-right {
  @apply after:content-[''] after:absolute after:rounded-full after:z-10 after:top-[9px] after:w-2.5 after:h-2.5 after:bg-orange-600 before:content-[''] before:absolute before:rounded-full before:z-10 before:border-2 before:border-dashed before:border-gray-200 dark:before:border-gray-600 before:top-0 before:w-7 before:h-7 before:bg-white dark:before:bg-black;
}

.timeline .timeline-item .date-label-left {
  @apply float-right mr-6 after:-right-[34px] before:-right-[43px];
}

.timeline .timeline-item .duration-right {
  @apply float-left mr-6 after:-left-[34px] before:-left-[43px];
}

.timeline .timeline-item .event.event-description-right {
  @apply text-left ml-6;
}

.timeline .timeline-item .event.event-description-left {
  @apply text-right mr-6;
}

@media (max-width: 575px) {
  .timeline {
    @apply ml-3 after:m-0 after:-ml-[7px];
  }
  .timeline .timeline-item .event.event-description-right, .timeline .timeline-item .event.event-description-left {
    @apply text-left m-0 ml-6 !important;
  }
  .timeline .timeline-item .duration {
    @apply float-left ml-6 mr-auto text-left after:-left-9 before:-left-11;
  }
  .timeline .timeline-item .duration .event {
    @apply text-left ml-[15px] !important;
  }
}

/*********************************/
/*             Contact           */
/*===============================*/
.form-input {
  @apply w-full py-2 px-3 border border-inherit dark:border-gray-800 dark:bg-slate-900 dark:text-slate-200 rounded h-10 outline-none bg-transparent;
}

.form-input:focus {
  @apply border-orange-600/50 shadow-none;
}

/* Validation */
.error {
  @apply my-2 mx-0 hidden text-orange-600;
}

#ajaxsuccess {
  @apply text-base w-full hidden clear-both my-2 mx-0;
}

.error_message,
#success_page {
  @apply p-2.5 mb-5 text-center rounded-md;
}

.error_message {
  @apply bg-orange-600/5 text-orange-600;
}

.contact-loader {
  @apply hidden;
}

#success_page {
  @apply bg-emerald-600/5 text-emerald-600;
}

/*****************/
/*  Testimonial  */
/*****************/
.tns-controls button[data-controls="prev"],
.tns-controls button[data-controls="next"] {
  @apply absolute top-1/2 -translate-y-1/2 text-base w-8 h-8 rounded-full bg-white dark:bg-black text-dark dark:text-white border-none z-1 shadow-lg shadow-slate-200 dark:shadow-slate-700;
}

.tns-controls button[data-controls="prev"]:hover,
.tns-controls button[data-controls="next"]:hover {
  @apply bg-orange-600 text-white;
}

.tns-controls button[data-controls="prev"] {
  @apply left-0 md:-left-2;
}

.tns-controls button[data-controls="next"] {
  @apply right-0 md:-right-2;
}
/*# sourceMappingURL=tailwind.css.map */