/* Components CSS */

/* Button Hover Effects */
.btn-sophisticated {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-sophisticated::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s;
}

.btn-sophisticated:hover::before {
    left: 100%;
}

.btn-sophisticated:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 10px 25px rgba(51, 97, 171, 0.4),
        0 0 30px rgba(51, 97, 171, 0.3);
}

/* Card Hover Effects */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(51, 97, 171, 0.2);
}

/* Rounded Corners */
.rounded-custom {
    border-radius: 12px;
}

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

.rounded-custom-xl {
    border-radius: 20px;
}

/* Gradient Text */
.text-gradient {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Loading States */
.skeleton {
    background: linear-gradient(90deg, #1f2937, #374151, #1f2937);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Print Styles */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
}

/* Image Styles */
img {
    max-width: 100%;
    height: auto;
}

/* Link Styles */
a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: #3cb289;
}

/* Section Spacing */
section {
    position: relative;
}

/* Gradient Backgrounds */
.bg-gradient-animated {
    background: linear-gradient(-45deg, #000000, #3361ab, #000000, #1a1a1a);
    background-size: 400% 400%;
    animation: gradient-shift 4s ease infinite;
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}