@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
@import "tailwindcss";
@plugin "daisyui";

:root {
  --site-primary: #004b49;
  --site-secondary: #438aba;
  --site-accent: #004b49;
  --site-dark: #333333;
  --site-light: #ffffff;

  /* Auto-generated wave shades */
  --primary-1: color-mix(in srgb, var(--site-primary) 90%, rgb(106, 105, 105));
  --primary-2: color-mix(in srgb, var(--site-primary) 75%, rgb(106, 105, 105));
  --primary-3: var(--site-primary);
  --primary-4: color-mix(in srgb, var(--site-primary) 80%, black);
  --primary-5: color-mix(in srgb, var(--site-primary) 65%, black);

  /* Wave gradient */
  --primary-wave-gradient: linear-gradient(to right top,
      var(--primary-1),
      var(--primary-2),
      var(--primary-3),
      var(--primary-2),
      var(--primary-4),
      var(--primary-1),
      var(--primary-3),
      var(--primary-2),
      var(--primary-5),
      var(--primary-1),
      var(--primary-3),
      var(--primary-1));

  /* Auto-generated wave shades */
  --secondary-1: color-mix(in srgb, var(--site-secondary) 90%, rgb(106, 105, 105));
  --secondary-2: color-mix(in srgb, var(--site-secondary) 75%, rgb(106, 105, 105));
  --secondary-3: var(--site-secondary);
  --secondary-4: color-mix(in srgb, var(--site-secondary) 80%, black);
  --secondary-5: color-mix(in srgb, var(--site-secondary) 65%, black);

  /* Wave gradient */
  --secondary-wave-gradient: linear-gradient(to right top,
      var(--secondary-1),
      var(--secondary-2),
      var(--secondary-3),
      var(--secondary-2),
      var(--secondary-4),
      var(--secondary-1),
      var(--secondary-3),
      var(--secondary-2),
      var(--secondary-5),
      var(--secondary-1),
      var(--secondary-3),
      var(--secondary-1));
  /* Auto-generated gradients */

  --primary-gradient: linear-gradient(120deg,
      color-mix(in srgb, var(--site-primary) 75%, rgb(106, 105, 105)) 0%,
      var(--site-primary) 50%,
      color-mix(in srgb, var(--site-primary) 80%, black) 100%);

  --secondary-gradient: linear-gradient(120deg,
      color-mix(in srgb, var(--site-secondary) 75%, rgb(106, 105, 105)) 0%,
      var(--site-secondary) 50%,
      color-mix(in srgb, var(--site-secondary) 80%, black) 100%);



  --site-gradient: linear-gradient(135deg, var(--site-primary), var(--site-secondary));

  --site-gradient-soft: linear-gradient(180deg,
      color-mix(in srgb, var(--site-primary) 85%, transparent),
      color-mix(in srgb, var(--site-secondary) 85%, transparent));
}

/* Webkit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 12px;
  /* Width of vertical scrollbar */
  height: 12px;
  /* Height of horizontal scrollbar */
}

::-webkit-scrollbar-track {
  background: transparent;
  /* Track background */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00695c, #2c6ca1);
  /* Theme gradient */
  border-radius: 10px;
  border: 3px solid transparent;
  /* creates padding effect */
  background-clip: content-box;
  /* ensures border is outside thumb */
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #2c6ca1, #00695c);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #00695c transparent;
  /* thumb and track */
}

html {
  scroll-behavior: smooth;
}

/* Option 1: Basic approach */
body {
  overflow-x: hidden !important;
  overflow-y: auto;
  scrollbar-width: auto;
  scrollbar-color: var(--site-primary) transparent;
  font-family: var(--font-body) !important;
  width: 100%;
  max-width: 100vw;
}

/* Option 2: More comprehensive approach */
body {
  overflow-x: hidden !important;
  overflow-y: auto;
  width: 100%;
  max-width: 100vw;
  position: relative;
  scrollbar-width: auto;
  scrollbar-color: var(--site-primary) transparent;
  font-family: var(--font-body) !important;
}

/* Also add this to prevent any container from causing overflow */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  color: rgb(27, 27, 27);
}

/* Optional: Apply to all elements to be extra safe */
* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading) !important;
}

.font-surjo {
  font-family: var(--font-shurjo) !important;
}

.font-poppins {
  font-family: var(--font-body) !important;
}

/* Roboto Slab */
.font-roboto-slab {
  font-family: "Roboto Slab", serif !important;
}

.font-merriweather {
  font-family: var(--font-heading) !important;
}

.font-primary {
  font-family: var(--font-secondary) !important;
}

.bg-site-primary {
  background-color: var(--site-primary) !important;
}

.bg-site-accent {
  background-color: var(--site-accent) !important;
}

.bg-site-secondary {
  background-color: var(--site-secondary) !important;
}

.bg-site-gradient {
  background: var(--site-gradient) !important;
}

.bg-site-gradient-soft {
  background: var(--site-gradient-soft) !important;
}

.border-t-primary {
  border-top-color: var(--site-primary) !important;
}

.border-b-primary {
  border-bottom-color: var(--site-primary) !important;
}

.border-t-secondary {
  border-top-color: var(--site-secondary) !important;
}

.border-b-secondary {
  border-bottom-color: var(--site-secondary) !important;
}

.bg-primary-gradient {
  background: var(--primary-gradient) !important;
  background-size: 200% 200%;
  transition: background-position 0.4s ease;

}
.bg-secondary-gradient {
  background: var(--secondary-gradient) !important;
  background-size: 200% 200%;
  transition: background-position 0.4s ease;

}

:root {
  --primary-a-10: color-mix(in srgb, var(--site-primary) 10%, transparent);
  --primary-a-20: color-mix(in srgb, var(--site-primary) 20%, transparent);
  --primary-a-40: color-mix(in srgb, var(--site-primary) 40%, transparent);

  --primary-10: color-mix(in srgb, var(--site-primary) 10%, transparent);
  --primary-20: color-mix(in srgb, var(--site-primary) 20%, transparent);
  --primary-30: color-mix(in srgb, var(--site-primary) 30%, transparent);
}

.bg-primary-gradient-soft {
  background-image: linear-gradient(to right,
      var(--primary-10),
      var(--primary-20),
      var(--primary-10));
}


.bg-gradient-primary-soft {
  --tw-gradient-from: var(--primary-a-10);
  --tw-gradient-via: var(--primary-a-20);
  --tw-gradient-to: var(--primary-a-10);

  background-image: linear-gradient(to right,
      var(--tw-gradient-from),
      var(--tw-gradient-via),
      var(--tw-gradient-to));
}

/* bg-primary-gradient/10 */
.bg-primary-gradient\/10 {
  background: var(--primary-gradient) !important;
  background-size: 200% 200%;
  transition: background-position 0.4s ease;

}

.-wave-gradient {
  background-image: var(--primary-wave-gradient) !important;
  background-size: 300% 300%;
}

.secondary-wave-gradient {
  background-image: var(--secondary-wave-gradient) !important;
  background-size: 300% 300%;
}

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

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

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

.animate-wave {
  animation: waveGradient 18s ease infinite;
}

/* Mega menu panel smoothness */
.mega-shadow {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}



.text-site-primary {
  color: var(--site-primary) !important;
}

.text-site-accent {
  color: var(--site-accent) !important;
}

.text-site-secondary {
  color: var(--site-secondary) !important;
}

@media (hover:hover) {
  .hover\:primary-color:hover {
    color: var(--site-primary);
  }
}

@media (hover:hover) {
  .hover\:secondary-color:hover {
    color: var(--site-secondary);
  }
}

/* Custom Css */
.badge-ribon {
  transform: rotate(-83deg);
  top: 50px;
  left: -15px;
  text-align: center;
  width: 110px;
}

.top-bar {
  /* background-image: url("/images/topbar-bg.png"); */
  background-color: var(--site-primary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.footer-glass {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}


/* Only affect the About page editor content */
.kau-editor-content p[style*="text-align: center"]>img {
  margin-left: auto;
  margin-right: auto;
}

.kau-editor-content p[style*="text-align: right"]>img {
  margin-left: auto;
  margin-right: 0;
}

.kau-editor-content p[style*="text-align: left"]>img {
  margin-left: 0;
  margin-right: auto;
}


@media (min-width: 1033px) and (max-width: 1280px) {
  /* .logo-img img {
    height: 270px !important;
    width: 80px !important;
    height: 70px !important;
    width: 70px !important;
  } */

  .logo-container h2:first-child {
    font-size: 1.4rem !important;
    line-height: 1.3;
  }

  .logo-container h3:nth-child(2) {
    font-size: 0.9rem !important;
  }

}


.footer-bg-secondary {
  position: relative;
  /* ensure overlay works correctly */
  background-image: var(--primary-gradient) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Glass overlay */
.footer-bg-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.1);
  /* semi-transparent white */
  backdrop-filter: blur(20px);
  /* glassy effect */
  -webkit-backdrop-filter: blur(20px);
  /* Safari support */
  z-index: 0;
}

.explore-section {
  background-image: var(--primary-gradient) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.about-section {
  background-image: var(--primary-gradient) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  width: 30px !important;
  border-radius: 10px !important;
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-pagination-bullet {
  background: rgb(255, 255, 255) !important;
  border-radius: 10px !important;
  width: 30px !important;
  margin-bottom: 30px !important;
  padding: 5px !important;
}

.faculty-icon {
  font-size: 130px !important;
  opacity: 0.1;
  position: relative;
  bottom: -118px;
  left: 232px;
}

.faculty-cards:hover .faculty-icon {
  opacity: 0.2;
}

/* Arrow hidden by default with opacity */
.drop-icon {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.menu-link-title {
  font-size: 18px !important;
}

/* Fade in arrow on hover of its parent link */
.drop-link:hover .drop-icon {
  opacity: 1;
}



.sticky-menu nav {
  background-color: transparent !important;
}

@keyframes zoomLoop {
  0% {
    transform: scale(1.1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1.1);
  }
}

.slide-zoom {
  animation: zoomLoop 12s ease-in-out infinite;
}

/* For Text Editor */
.content-style * {
  all: revert;
  /* restores browser default styling */
}

/* Optional: small improvements */
.content-style img {
  max-width: 100%;
  height: auto;
}

.content-style table {
  border-collapse: collapse;
  width: 100%;
}

.content-style table,
.content-style th,
.content-style td {
  border: 1px solid #ddd;
  padding: 8px;
}

.content-style th {
  background-color: var(--site-primary);
  color: white;
}

/* For Text Editor End*/
@media screen and (max-width: 1366px) {
  .menu-link-title {
    font-size: 16px !important;
  }

  .logo-container h2:first-child {
    /* font-size: 1.8rem !important; */
    line-height: 1.3;
  }

  .logo-container h3:nth-child(2) {
    font-size: 1.1rem !important;
  }
}

@media screen and (max-width: 600px) {
  .btn-one {
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: normal;
  }

  .d-m-none {
    display: none !important;
  }

  .top-bar {
    display: none !important;
  }

  .header-container {
    display: flex;
    justify-content: center;
  }

  .breaking-tag {
    padding: 10px 10px !important;
    font-size: 12px !important;
  }

  .scroll-to-top {
    bottom: 100px;
  }

  .scroll-to-top button {
    width: 50px !important;
    height: 50px !important;
  }

  .logo-container h6{
    font-size: 12.3px;
  }
}

/* Animation */

/* HTML Renderer global styles - reusable for all API content */
.html-renderer {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: #333;
  line-height: 1.6;
}

.html-renderer table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 0.95rem;
}

.html-renderer th,
.html-renderer td {
  border: 1px solid #ddd;
  padding: 8px;
}

.html-renderer th {
  background: var(--site-primary);
  font-weight: 600;
  text-align: left;
  color: #ffffff;
}

.html-renderer ul,
.html-renderer ol {
  padding-left: 1.5rem;
  /* proper indentation */
  margin-bottom: 15px;
  font-size: 1rem;
}

.html-renderer li {
  margin-bottom: 6px;
}

.html-renderer ul {
  list-style-type: disc;
  /* default bullets */
}

.html-renderer ul li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 0.5rem;
}

/* Optional: custom bullets using pseudo-element */
.html-renderer ul li::marker {
  color: var(--site-primary);
  /* bullet color */
  font-size: 1.1rem;
  /* bullet size */
}

.html-renderer h1,
.html-renderer h2,
.html-renderer h3,
.html-renderer h4,
.html-renderer h5,
.html-renderer h6 {
  margin-top: 20px;
  margin-bottom: 12px;
  font-weight: bold;
  line-height: 1.3;
  color: #222;
}

.html-renderer h1 {
  font-size: 2.25rem;
  /* 36px */
}

.html-renderer h2 {
  font-size: 1.875rem;
  /* 30px */
}

.html-renderer h3 {
  font-size: 1.5rem;
  /* 24px */
}

.html-renderer h4 {
  font-size: 1.25rem;
  /* 20px */
}

.html-renderer h5 {
  font-size: 1.125rem;
  /* 18px */
}

.html-renderer h6 {
  font-size: 1rem;
  /* 16px */
}

.html-renderer p {
  margin-bottom: 12px;
  font-size: 1rem;
}

.html-renderer a {
  color: #0066cc;
  text-decoration: underline;
}

.html-renderer img {
  max-width: 100%;
  height: auto;
  margin-bottom: 12px;
}

.html-renderer blockquote {
  padding: 8px 16px;
  margin: 12px 0;
  background: #f5f5f5;
  border-left: 4px solid #438aba;
  font-style: italic;
}

/* Optional: make tables scrollable on small screens */
.html-renderer .table-wrapper {
  overflow-x: auto;
}

@keyframes scroll {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.animate-scroll {
  animation: scroll 40s linear infinite;
}

.animate-scroll:hover {
  animation-play-state: paused;
}

@keyframes blink {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.animate-blink {
  animation: blink 1s infinite;
}

/* Animation for hero Slider  text*/

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeUp {
  animation: fadeUp 0.8s ease forwards;
}

/* Optional delay utilities */
.delay-150 {
  animation-delay: 0.15s;
}

.delay-300 {
  animation-delay: 0.3s;
}

.clip-latest {
  background-color: transparent;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}

/* ============================
   Department Staff List UI
   - uses dynamic CSS vars:
     --site-primary, --site-secondary
     --primary-gradient, --secondary-gradient
   ============================ */

/* Decorative top glow (PRIMARY) */
.dept-top-glow-primary {
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--site-primary) 12%, transparent),
    color-mix(in srgb, var(--site-primary) 18%, transparent),
    color-mix(in srgb, var(--site-primary) 12%, transparent)
  );
}

/* Small dot / accent (PRIMARY) */
.dot-primary {
  background-color: var(--site-primary) !important;
}

/* Button gradient (SECONDARY) */
.btn-secondary-gradient {
  background: var(--secondary-gradient) !important;
  background-size: 200% 200%;
  transition: background-position 0.35s ease, transform 0.2s ease,
    box-shadow 0.2s ease;
}

.btn-secondary-gradient:hover {
  background-position: 100% 0%;
}
/* ===========================
   Department Staff List Theme Helpers
   =========================== */

/* Decorative top glow uses PRIMARY dynamic color */
.dept-top-glow {
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--site-primary) 12%, transparent),
    color-mix(in srgb, var(--site-primary) 18%, transparent),
    color-mix(in srgb, var(--site-primary) 12%, transparent)
  );
}

/* Buttons use SECONDARY dynamic gradient */
.btn-secondary-gradient {
  background: var(--secondary-gradient) !important;
  color: #fff !important;
}

.btn-secondary-gradient:hover {
  filter: brightness(1.02);
}

/* Optional: focus ring consistent with theme */
.btn-secondary-gradient:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--site-secondary) 35%, transparent);
  outline-offset: 2px;
}


/* Custom Css End */