/* 
Theme: Vibrant
Description: Bright gradients, bouncy animations, huge rounded corners.
*/

:root {
    --vib-radius: 30px;
    --vib-bg: #fff5f8;
    --vib-surface: #ffffff;
    --vib-text: #2d3748;
}

body {
    background-color: var(--vib-bg) !important;
    color: var(--vib-text) !important;
    font-family: 'Comic Sans MS', 'Nunito', 'Segoe UI', sans-serif !important; /* Playful */
}

h1, h2, h3, h4, h5, h6, .display-4, .display-5, .display-6, .ik-hero-title, .ik-section-title, .ik-feat-title {
    color: #1a202c !important;
    font-weight: 800 !important;
}

/* Hero & Colorful areas */
.hero-section, .ik-hero, .ik-hero-section, .col-lg-5.text-white.p-5 {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), #ff007f) !important;
    background-size: 300% 300% !important;
    animation: gradientShift 5s ease infinite !important;
    border-bottom-left-radius: 100px !important;
    border-bottom-right-radius: 100px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
    margin-bottom: 40px !important;
}

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

.hero-section h1, .ik-hero h1, .ik-hero-section h1,
.hero-section p, .ik-hero p, .ik-hero-section p,
.col-lg-5.text-white.p-5 h2, .col-lg-5.text-white.p-5 p {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2) !important;
}

/* Cards */
.card, .ik-feat-card, .bg-dark {
    background-color: var(--vib-surface) !important;
    border: none !important;
    border-radius: var(--vib-radius) !important;
    box-shadow: 0 10px 30px rgba(var(--primary-color), 0.1) !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
}

.card:hover, .ik-feat-card:hover {
    transform: translateY(-15px) scale(1.03) !important;
    box-shadow: 0 20px 40px rgba(var(--primary-color), 0.2) !important;
}

.ik-feat-card h3, .ik-feat-card h4, .ik-feat-card p {
    color: var(--vib-text) !important;
}

/* Navbar */
.ik-navbar {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 50px !important;
    margin: 15px auto !important;
    max-width: 95% !important;
    padding: 10px 20px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05) !important;
}
.ik-navbar .nav-link {
    color: var(--vib-text) !important;
    font-weight: 700 !important;
}

/* Buttons */
.btn, .ik-btn-primary, .ik-nav-cta, .ik-btn-ghost {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color)) !important;
    color: #ffffff !important;
    border-radius: 50px !important; /* Pill shape */
    border: none !important;
    font-weight: 800 !important;
    padding: 12px 30px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.btn:hover, .ik-btn-primary:hover, .ik-nav-cta:hover, .ik-btn-ghost:hover {
    transform: scale(1.1) rotate(-2deg) !important;
    box-shadow: 0 15px 25px rgba(0,0,0,0.2) !important;
}

/* Inputs */
.form-control, .form-select, textarea {
    border-radius: 20px !important;
    border: 2px solid #e2e8f0 !important;
    background-color: var(--vib-surface) !important;
    color: var(--vib-text) !important;
    padding: 15px !important;
}
.form-control:focus, .form-select:focus, textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-color), 0.2) !important;
}

/* Icons */
.icon-box, .ik-feat-icon, .number-box {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    border-radius: 50% !important;
    transform: rotate(5deg) !important;
}