/* Custom CSS for CloudMSPShield */

/* Dropdown hover effects */
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

.group:hover .group-hover\:visible {
    visibility: visible;
}

/* Smooth transitions */
* {
    transition: all 0.3s ease;
}

/* Custom button styles */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors;
}

.btn-secondary {
    @apply border-2 border-blue-600 text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 hover:text-white transition-colors;
}

/* Card hover effects */
.card-hover {
    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

/* Form styles */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent resize-vertical;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent bg-white;
}

/* Alert styles */
.alert {
    @apply px-4 py-3 rounded border;
}

.alert-success {
    @apply bg-green-100 border-green-400 text-green-700;
}

.alert-error {
    @apply bg-red-100 border-red-400 text-red-700;
}

.alert-warning {
    @apply bg-yellow-100 border-yellow-400 text-yellow-700;
}

.alert-info {
    @apply bg-blue-100 border-blue-400 text-blue-700;
}

/* Loading spinner */
.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Gradient backgrounds */
.gradient-blue {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Text gradients */
.text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Mobile menu animation */
#mobile-menu {
    transition: all 0.3s ease-in-out;
}

/* Service cards */
.service-card {
    @apply bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 border-t-4 border-blue-600;
}

.service-card:hover {
    transform: translateY(-5px);
}

/* Testimonial cards */
.testimonial-card {
    @apply bg-white p-8 rounded-lg shadow-md;
}

/* Stats section */
.stat-number {
    @apply text-4xl font-bold text-blue-600 mb-2;
}

/* Team member cards */
.team-card {
    @apply bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow;
}

/* FAQ accordion */
.faq-item {
    @apply border-b border-gray-200 py-4;
}

.faq-question {
    @apply font-semibold text-lg cursor-pointer hover:text-blue-600 transition-colors;
}

.faq-answer {
    @apply mt-2 text-gray-600;
}

/* Pricing cards */
.pricing-card {
    @apply bg-white rounded-lg shadow-lg overflow-hidden;
}

.pricing-card.featured {
    @apply ring-2 ring-purple-600 transform scale-105;
}

/* Blog post cards */
.blog-card {
    @apply bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow;
}

/* Resource cards */
.resource-card {
    @apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow;
}

/* Industry cards */
.industry-card {
    @apply bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow border-t-4 border-blue-600;
}

/* Solution cards */
.solution-card {
    @apply bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow border-t-4 border-blue-600;
}

/* Contact info cards */
.contact-info-card {
    @apply bg-gray-50 p-8 rounded-lg;
}

/* Feature list */
.feature-list {
    @apply space-y-4;
}

.feature-item {
    @apply flex items-start space-x-3;
}

.feature-icon {
    @apply h-6 w-6 text-green-500 mt-1;
}

/* CTA sections */
.cta-section {
    @apply bg-blue-600 text-white py-16;
}

.cta-button {
    @apply bg-yellow-400 text-black px-8 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition-colors inline-block;
}

/* Hero sections */
.hero-section {
    @apply bg-gradient-to-r from-blue-600 to-purple-700 text-white py-20;
}

/* Section spacing */
.section-padding {
    @apply py-16;
}

.section-padding-sm {
    @apply py-8;
}

.section-padding-lg {
    @apply py-24;
}

/* Container max widths */
.container-xl {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Responsive text sizes */
@media (max-width: 640px) {
    .text-responsive-xl {
        font-size: 2.5rem;
    }
}

@media (min-width: 641px) {
    .text-responsive-xl {
        font-size: 3.75rem;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
}