@import "tailwindcss";
 /* Import Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');


 * {
     @apply box-border;
     font-family: 'DM Sans', 'sans-serif';
 }

 /* Add this to your main CSS file or in a <style> tag in your layout */


 /* Define custom font classes for Tailwind */
 .font-playfair {
     font-family: 'Playfair Display', serif;
 }

 .font-inter {
     font-family: 'Inter', sans-serif;
 }

 .playfair {
     font-family: 'Playfair Display', serif;
 }

 .text-primary {
     color: #CEFF68;
 }

 .bg-primary {
     background-color: #CEFF68;
 }

 .border-primary {
     border-color: #CEFF68;
 }


 .x-thin-scroll {
     width: 100%;
     /* Hide vertical scrollbar */
     white-space: nowrap;
     /* Prevent wrapping */
     -ms-overflow-style: none;
     /* Hide scrollbar on Edge */
     scrollbar-width: none;
     /* Hide scrollbar on Firefox */
 }

 .y-thin-scroll {
     width: 100%;
     overflow-x: hidden;
     /* Enable horizontal scrolling */
     overflow-y: auto;
     /* Hide vertical scrollbar */
     white-space: nowrap;
     /* Prevent wrapping */
     -ms-overflow-style: none;
     /* Hide scrollbar on Edge */
     scrollbar-width: none;
     /* Hide scrollbar on Firefox */

     &::-webkit-scrollbar {
         @apply hidden;
     }
 }

 .y-thin-scroll-bar {
     width: 100%;
     overflow-x: hidden;
     /* Enable horizontal scrolling */
     overflow-y: auto;
     /* Hide vertical scrollbar */
     white-space: nowrap;
     /* Prevent wrapping */
     -ms-overflow-style: none;

     scrollbar-width: 2px;
     /* Hide scrollbar on Firefox */

     &::-webkit-scrollbar {
         @apply w-1;
     }

     &::-webkit-scrollbar-track {
         @apply bg-gray-100 mr-2;
     }

     &::-webkit-scrollbar-thumb {
         @apply rounded-full bg-gray-300;
     }
 }

 /* Hide scrollbar on WebKit browsers */
 .x-thin-scroll::-webkit-scrollbar {
     display: none;
 }