*, *::before, *::after {
    box-sizing: border-box !important
}
/* Theme Color Variables - Modern Corporate Dark Blue Palette */
:root {
    /* Primary Accent - Electric Blue */
    --color1: #3B82F6;
    /* Primary Text - Off White */
    --color2: #F8FAFC;
    /* Secondary Text - Muted Slate */
    --color3: #94A3B8;
    /* Secondary Background/Border - Dark Slate */
    --color4: #1E293B;
    /* Main Background - Deep Slate/Black */
    --color5: #020617;
    /* RGB for transparency calculations */
    --color-5-rgb: 2, 6, 23;
}

html, body {
    background-color: var(--color5);
    color: var(--color2);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    margin-left: 0;
    margin-right: 0;
}

body {
    background-color: var(--color5) !important;
    color: var(--color2) !important;
}

header {
    background-color: rgba(var(--color-5-rgb) / 0.70);
    color: var(--color1);
}

footer {
    background-color: rgba(var(--color-5-rgb) / 0.70);
    color: var(--color1);
}

/* Background Color Utilities */
.bg-color1 {
    background-color: var(--color1) !important;
}

.bg-color2 {
    background-color: var(--color2) !important;
}

.bg-color3 {
    background-color: var(--color3) !important;
}

.bg-color4 {
    background-color: var(--color4) !important;
}

.bg-color5 {
    background-color: var(--color5) !important;
}
/* Text Color Utilities */
.text-color1 {
    color: var(--color1) !important;
}

.text-color2 {
    color: var(--color2) !important;
}

.text-color3 {
    color: var(--color3) !important;
}

.text-color4 {
    color: var(--color4) !important;
}

.text-color5 {
    color: var(--color5) !important;
}
/* Border Color Utilities */
.border-color1 {
    border-color: var(--color1) !important;
}

.border-color2 {
    border-color: var(--color2) !important;
}

.border-color3 {
    border-color: var(--color3) !important;
}

.border-color4 {
    border-color: var(--color4) !important;
}

.border-color5 {
    border-color: var(--color5) !important;
}
/* Hover Utilities for Background */
.hover\:bg-color1:hover {
    background-color: var(--color1) !important;
}

.hover\:bg-color2:hover {
    background-color: var(--color2) !important;
}

.hover\:bg-color3:hover {
    background-color: var(--color3) !important;
}

.hover\:bg-color4:hover {
    background-color: var(--color4) !important;
}

.hover\:bg-color5:hover {
    background-color: var(--color5) !important;
}
/* Hover Utilities for Text */
.hover\:text-color1:hover {
    color: var(--color1) !important;
}

.hover\:text-color2:hover {
    color: var(--color2) !important;
}

.hover\:text-color3:hover {
    color: var(--color3) !important;
}

.hover\:text-color4:hover {
    color: var(--color4) !important;
}

.hover\:text-color5:hover {
    color: var(--color5) !important;
}
/* Hover Utilities for Border */
.hover\:border-color1:hover {
    border-color: var(--color1) !important;
}

.hover\:border-color2:hover {
    border-color: var(--color2) !important;
}

.hover\:border-color3:hover {
    border-color: var(--color3) !important;
}

.hover\:border-color4:hover {
    border-color: var(--color4) !important;
}

.hover\:border-color5:hover {
    border-color: var(--color5) !important;
}
/* Focus Utilities */
.focus\:border-color1:focus {
    border-color: var(--color1) !important;
}

.focus\:border-color2:focus {
    border-color: var(--color2) !important;
}

.focus\:border-color3:focus {
    border-color: var(--color3) !important;
}

.focus\:border-color4:focus {
    border-color: var(--color4) !important;
}

.focus\:border-color5:focus {
    border-color: var(--color5) !important;
}

.focus\:bg-color1:focus {
    background-color: var(--color1) !important;
}

.focus\:bg-color2:focus {
    background-color: var(--color2) !important;
}

.focus\:bg-color3:focus {
    background-color: var(--color3) !important;
}

.focus\:bg-color4:focus {
    background-color: var(--color4) !important;
}

.focus\:bg-color5:focus {
    background-color: var(--color5) !important;
}

.focus\:text-color1:focus {
    color: var(--color1) !important;
}

.focus\:text-color2:focus {
    color: var(--color2) !important;
}

.focus\:text-color3:focus {
    color: var(--color3) !important;
}

.focus\:text-color4:focus {
    color: var(--color4) !important;
}

.focus\:text-color5:focus {
    color: var(--color5) !important;
}
/* Utility classes for scrollbars */

::-webkit-scrollbar {
    width: 8px !important;
}

::-webkit-scrollbar-track {
    background: var(--color5) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--color5) !important;
    border-left: 1px solid var(--color4) !important;
    border-right: 1px solid var(--color4) !important;
    border-radius: 10px !important;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color5) !important;
    }

/* Utility outline classes */
.outline-color1 {
    outline: 2px solid var(--color1) !important;
}

.outline-color2 {
    outline: 2px solid var(--color2) !important;
}

.outline-color3 {
    outline: 2px solid var(--color3) !important;
}

.outline-color4 {
    outline: 2px solid var(--color4) !important;
}

.outline-color5 {
    outline: 2px solid var(--color5) !important;
}
/* Placeholder utility classes for input */
.placeholder-color1::placeholder {
    color: var(--color1) !important;
}

.placeholder-color2::placeholder {
    color: var(--color2) !important;
}

.placeholder-color3::placeholder {
    color: var(--color3) !important;
}

.placeholder-color4::placeholder {
    color: var(--color4) !important;
}

.placeholder-color5::placeholder {
    color: var(--color5) !important;
}
/* Disabled State utility classes for background and text */
.disabled\:bg-color1:disabled {
    background-color: var(--color1) !important;
}

.disabled\:bg-color2:disabled {
    background-color: var(--color2) !important;
}

.disabled\:bg-color3:disabled {
    background-color: var(--color3) !important;
}

.disabled\:bg-color4:disabled {
    background-color: var(--color4) !important;
}

.disabled\:bg-color5:disabled {
    background-color: var(--color5) !important;
}

.disabled\:text-color1:disabled {
    color: var(--color1) !important;
}

.disabled\:text-color2:disabled {
    color: var(--color2) !important;
}

.disabled\:text-color3:disabled {
    color: var(--color3) !important;
}

.disabled\:text-color4:disabled {
    color: var(--color4) !important;
}

.disabled\:text-color5:disabled {
    color: var(--color5) !important;
}
/* Border radius utility classes */
.rounded-sm {
    border-radius: 4px !important;
}

.rounded {
    border-radius: 8px !important;
}

.rounded-lg {
    border-radius: 16px !important;
}

.rounded-full {
    border-radius: 9999px !important;
}
/* Shadow utility classes */
.shadow-sm {
    box-shadow: 0 1px 2px 0 var(--color2);
}

.shadow {
    box-shadow: 0 2px 8px 0 var(--color2);
}

.shadow-lg {
    box-shadow: 0 4px 16px 0 var(--color3);
}
input::placeholder{
    font-size: 0.8rem
}

input, select, textarea {
    box-shadow: 1px 1px var(--color3);
    background-color: var(--color5);
    color: var(--color3)
}

select option{
    color:var(--color3); background-color:var(--color5)
}
/* Utility Animations */
@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadein {
    animation: fadein 0.5s ease;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeout {
    animation: fadeout 0.5s ease both;
}

@keyframes scalein {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.scalein {
    animation: scalein 0.4s cubic-bezier(.32, 2, .55, .27);
}

@keyframes scaledown {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

.scaledown {
    animation: scaledown 0.4s cubic-bezier(.32, 2, .55, .27);
}

@keyframes popin {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }

    60% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.popin {
    animation: popin 0.35s cubic-bezier(.21, 1.89, .63, .81);
}

@keyframes slidein-up {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slidein-up {
    animation: slidein-up 0.4s cubic-bezier(.21, 1.89, .63, .81);
}

@keyframes slidein-down {
    from {
        transform: translateY(-40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slidein-down {
    animation: slidein-down 0.4s cubic-bezier(.21, 1.89, .63, .81);
}

@keyframes slidein-left {
    from {
        transform: translateX(40px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slidein-left {
    animation: slidein-left 0.4s cubic-bezier(.21, 1.89, .63, .81);
}

@keyframes slidein-right {
    from {
        transform: translateX(-40px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slidein-right {
    animation: slidein-right 0.4s cubic-bezier(.21, 1.89, .63, .81);
}
/* Animation Utilities */
.animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

.reveal-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.reveal-active {
    opacity: 1;
    transform: translateY(0);
}