@import "tailwindcss";
@import "swiper/css";
@import "swiper/css/free-mode";

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

  body {
    background-color: #0F172A;
    /* slate-900 */
    color: #CBD5E1;
    /* slate-300 */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    /* Smooth scrolling for a more polished feel */
    scroll-behavior: smooth;
    /* Antialiasing for crisp text */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
  }

  @keyframes float {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-8px);
    }
  }

  .float-animate {
    animation: float 2.5s ease-in-out infinite;
    /* Slightly slower animation for a more gentle float */
  }

  /* Custom scrollbar for a more integrated dark theme look (optional, but a nice touch) */
  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background: #1E293B;
    /* slate-800 */
  }

  ::-webkit-scrollbar-thumb {
    background: #334155;
    /* slate-700 */
    border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #475569;
    /* slate-600 */
  }


  @keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(60px);
  }
}

@keyframes slide-up {
  from {
    transform: translateY(130px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-30px);
  }
}

/* Global but more fancy */
::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Swiper specific fixes */
.swiper {
  width: 100%;
  overflow: hidden;
}

.swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.swiper-slide {
  flex-shrink: 0;
  width: auto !important;
  height: auto;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
  body, html {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  main {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  .swiper {
    overflow: hidden;
    margin-left: calc(-1rem);
    margin-right: calc(-1rem);
    padding-left: 1rem;
    padding-right: 1rem;
    width: calc(100vw - 2rem);
  }
  
  .swiper-slide {
    margin-right: 1rem;
  }
  
  /* Fix grid width on mobile */
  .grid {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }
  
  /* Ensure course cards don't cause overflow */
  .grid > div {
    min-width: 0;
    max-width: 100%;
  }
  
  /* Ensure sections don't overflow */
  section {
    max-width: 100vw;
    overflow-x: hidden;
  }
}