/* =========================================================
   Silverwings Consultancy - Custom Styles
   ========================================================= */

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    color: #0f172a;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Poppins', sans-serif;
}

/* Glassmorphism Utilities */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Scroll Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* =========================================================
   Global Scrollbar (page-level)
   ========================================================= */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

html {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

/* =========================================================
   FIX: Job Details popup scrollbar + overall modal styling
   -----------------------------------------------------------
   Previously the modal's own overflow-y-auto container used the
   browser's default square-cornered scrollbar which visually
   clashed with the modal's rounded-3xl corners (the thumb/track
   ran flush to the edge and looked "cut off"). This is fixed by:
     1. Letting the OUTER card own overflow:hidden + rounded-3xl,
        so nothing (including a scrollbar) can bleed past the
        rounded corners.
     2. Giving the INNER scrollable pane its own slim, rounded
        scrollbar with breathing room (margin) top/bottom so the
        thumb never touches the card's curved corners.
   ========================================================= */
.modal-card {
    /* Guarantees child scrollbars are clipped to the rounded corners */
    isolation: isolate;
}

.custom-scrollbar {
    scrollbar-width: thin;                 /* Firefox */
    scrollbar-color: #cbd5e1 transparent;  /* Firefox: thumb / track */
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 20px; /* keeps the track from touching the rounded top/bottom corners */
    border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box; /* creates the illusion of rounded "floating" padding */
    min-height: 40px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
    background-clip: padding-box;
}

.modal-scroll {
    /* Small right padding so the thumb doesn't sit glued to the
       card's edge / rounded corner, and content isn't clipped by it */
    padding-right: 2px;
}

/* View Management (kept for legacy in-page anchor smooth-scroll) */
.view-section { scroll-margin-top: 6rem; }

/* Gradients */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #0f172a, #0ea5e9);
}

.bg-gradient-corporate {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* Marquee specific */
.marquee-container {
    display: flex;
    width: 200%;
}

/* Loader */
#loader {
    position: fixed;
    inset: 0;
    background: white;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s;
}
.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #0ea5e9;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@keyframes blob {
    0%, 100% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}
.animate-blob { animation: blob 8s infinite; }
.animation-delay-2000 { animation-delay: 2s; }