/* Import Inter Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Tailwindcss */
@media (min-width: 1024px) {
  .lg\:flex-row-reverse {
    flex-direction: row-reverse;
  }
}
.text-blue-600 {
  color: #0574ba !important;
}

.bg-blue-600 {
  background-color: #0574ba !important;
}

/* End Tailwindcss */


/* Animation */
[data-animation] {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

[data-animation].is-visible {
  opacity: 1;
  transform: translateY(0px);
}
/* End Animation */

/* root */
    /* ------------------- VARIABLES ------------------- */
    :root {
    --font: 'Inter', sans-serif;


    --color-primary: #0574ba;
    --color-primary-600: #084fcc;
    --color-primary-300: #77aaff;


    --color-neutral-900: #111827;
    --color-neutral-700: #374151;
    --color-neutral-500: #6b7280;
    --color-neutral-300: #d1d5db;
    --color-neutral-100: #f3f4f6;
    --color-white: #ffffff;


    --color-success: #22c55e;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    }

    /* Body */
    body {
      font-family: var(--font);
    }

    /* Typography */

	#blog-detail h1, 
#blog-detail h2, 
#blog-detail h3, 
#blog-detail h4, 
#blog-detail h5, 
#blog-detail h6, 
#blog-detail p, 
#blog-detail a, 
#blog-detail ul li, 
#blog-detail ol li, 
#blog-detail blockquote {
  line-height: 2;
  letter-spacing: -0.02em;
}

#blog-detail h1 {
  font-size: 2.5rem;
}

#blog-detail h2 {
  font-size: 2rem;
}

#blog-detail h3 {
  font-size: 1.75rem;
}

#blog-detail h4 {
  font-size: 1.5rem;
}

#blog-detail h5, #blog-detail h6, {
  font-size: 1.25rem;
}

#blog-detail p, 
#blog-detail ul li, 
#blog-detail ol li, 
#blog-detail blockquote, 
#blog-detail a {
  font-size: 1rem;
}

#blog-detail ul, 
#blog-detail ol {
  display: block;
  list-style: inherit;
  padding-left: 1.5rem;
  margin-top: 0;
  margin-bottom: 0;
}

#blog-detail ul li, 
#blog-detail ol li {
  line-height: 2;
  letter-spacing: -0.02em;
  font-size: 1rem;
}

@media (max-width: 1200px) {
  #blog-detail h1 {
    font-size: 2.5rem;
  }
  #blog-detail h2 {
    font-size: 2.2rem;
  }
  #blog-detail h3 {
    font-size: 1.8rem;
  }
  #blog-detail h4 {
    font-size: 1.6rem;
  }
  #blog-detail h5 {
    font-size: 1.4rem;
  }
  #blog-detail h6 {
    font-size: 1.2rem;
  }
  #blog-detail p, 
  #blog-detail ul li, 
  #blog-detail ol li, 
  #blog-detail blockquote, 
  #blog-detail a {
    font-size: 0.95rem;
  }
}

@media (max-width: 768px) {
  #blog-detail h1 {
    font-size: 2rem;
  }
  #blog-detail h2 {
    font-size: 1.8rem;
  }
  #blog-detail h3 {
    font-size: 1.6rem;
  }
  #blog-detail h4 {
    font-size: 1.5rem;
  }
  #blog-detail h5 {
    font-size: 1.3rem;
  }
  #blog-detail h6 {
    font-size: 1.1rem;
  }
  #blog-detail p, 
  #blog-detail ul li, 
  #blog-detail ol li, 
  #blog-detail blockquote, 
  #blog-detail a {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  #blog-detail h1 {
    font-size: 1.8rem;
  }
  #blog-detail h2 {
    font-size: 1.6rem;
  }
  #blog-detail h3 {
    font-size: 1.4rem;
  }
  #blog-detail h4 {
    font-size: 1.3rem;
  }
  #blog-detail h5 {
    font-size: 1.2rem;
  }
  #blog-detail h6 {
    font-size: 1rem;
  }
  #blog-detail p, 
  #blog-detail ul li, 
  #blog-detail ol li, 
  #blog-detail blockquote, 
  #blog-detail a {
    font-size: 0.85rem;
  }
}


    a:hover{color: var(--color-primary);}
    a.bg-blue-600:hover{color: var(--color-white);}
    
    /* Navbar Setup */
    nav{position: sticky; top: 0;}
    /* Desktop hover show dropdown */
    @media (min-width: 768px) {
            .group:hover > .dropdown-menu {
            display: block;
            }
            .group:hover > .dropdown-submenu {
            display: block;
            }
        }
  /* End Navbar Setup */

  /* Splide setups */
  #hero .splide__arrows svg{fill: #0574ba !important;}
  #hero .splide__pagination__page.is-active{background-color: #0574ba !important;}

  /* count setup*/
  .counter::after{content: '+';}

  /* section */
  section{overflow: hidden;}

   /* floating animation */
    @keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px); 
    }
    100% {
        transform: translateY(0px);
    }
    }

    
    [floating] {animation: float 3s ease-in-out infinite;}

    @media (max-width:991px){
    [floating] {animation: unset;}
    }

    [floating]:nth-child(odd) {
    animation-duration: 2.5s;
    }

    [floating]:nth-child(even) {
    animation-duration: 3.5s;
    }

    /* Hero Setup */

     #hero .splide__slide img {
    z-index: 0;
  }

  #hero .splide__slide > div {
    z-index: 10;
  }

  /* Custom dot styling */
  .splide__pagination__page {
    width: 12px;
    height: 12px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 9999px;
    margin: 0 4px;
    transition: all 0.3s;
  }

  .splide__pagination__page.is-active {
    background-color: #2563eb; /* Tailwind blue-600 */
    transform: scale(1.2);
  }

  /* End Hero Setup */