@tailwind components;
@tailwind utilities;

@layer components {
  .all-\[unset\] {
    all: unset;
  }
}

:root {
  --cards-shadow-shadow-1-medium-card: 8px 10px 20px 1px
    rgba(152, 152, 152, 0.16);
  --gray-5: rgba(224, 224, 224, 1);
  --pure-white: rgba(255, 255, 255, 1);
  --slate-gray-pg-color: rgba(124, 136, 147, 1);
  --whi: rgba(255, 255, 255, 1);
  --white: rgba(255, 255, 255, 1);
  --x-2: rgba(51, 51, 51, 1);
  --x-4: rgba(255, 255, 255, 1);
}

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: transparent;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --card: transparent;
    --card-foreground: 213 31% 91%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;

    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}



/* Optional: Add these custom styles for the slider */
.slick-carousel {
  margin: 0 -12px;
  padding-bottom: 20px;
}

.slick-carousel .slick-list {
  margin: 0 -10px;
}

.slick-carousel .slick-slide {
  margin: 0 10px;
}

/* Optional: Fade transition instead of slide */
.slick-fade .slick-slide {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slick-fade .slick-slide.slick-active {
  opacity: 1;
}

/* Line clamp for title */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Line clamp utility for text truncation */
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Blog slider custom styling */
.blog-slider-container .slick-slide {
  padding: 0 12px;
  height: auto;
}

.blog-slider-container .slick-track {
  display: flex;
  align-items: stretch;
}

.blog-slider-container .slick-slide > div {
  height: 100%;
}

.blog-slider-container .slick-slide article {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.blog-slider-container .slick-slide article > div:last-child {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-slider-container .slick-slide article p {
  flex-grow: 1;
}






/* Add this to your CSS file or in a <style> tag in the head */
.custom-slider-dots .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #F57C00;
  transition: all 0.3s ease;
}

.custom-slider-dots .dot.active {
  background-color: #F57C00;
}

.custom-slider-dots .dot:not(.active) {
  background-color: transparent;
}

#blogs-carousel .slick-track{
  margin-bottom: 40px;
}