@import "tailwindcss";
@import "pages/homePage.css";
@import "pages/aboutPage.css";

:root {
  font-family: "Inter", "Figtree", sans-serif;
}

html, body, body * {
  font-family: "Inter", "Figtree", sans-serif;
}

.no-scrollbar {
  -ms-overflow-style: none;  
  scrollbar-width: none;     
}

.no-scrollbar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
    
    /* top section bar (for every section) */
    .badge-container {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: linear-gradient(135deg, #2805ec 0%, #064003 100%);
        border-radius: 9999px;
        box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
        animation: float 3s ease-in-out infinite;
    }
    
    .badge-icon {
        font-size: 1.25rem;
        animation: pulse 2s ease-in-out infinite;
        display: inline-flex;
        align-items: center;
    }
    
    @keyframes float {
        0% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-10px);
        }
        100% {
            transform: translateY(0px);
        }
    }
    
    @keyframes pulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
        }
    }
    
    .animate-float {
        animation: float 3s ease-in-out infinite;
    }
    
    .animate-pulse-slow {
        animation: pulse 2s ease-in-out infinite;
    }
    
    
    @media (max-width: 640px) {
        .badge-container {
            padding: 0.5rem 1rem;
            gap: 0.375rem;
        }
        
        .badge-text {
            font-size: 16px !important;
        }
        
        .badge-icon {
            font-size: 1rem;
        }
        
        .badge-icon svg {
            width: 14px;
            height: 14px;
        }
    }
    
    @media (max-width: 480px) {
        .badge-container {
            padding: 0.375rem 0.75rem;
            gap: 0.25rem;
        }
        
        .badge-text {
            font-size: 14px !important;
        }
        
        .badge-icon svg {
            width: 12px;
            height: 12px;
        }
    }