/* Custom CSS for Instituto Minuci */
body {
  font-family: 'Lato', sans-serif;
}

/* Font Family */
.font-lato {
  font-family: 'Lato', sans-serif;
}

.font-inter {
    font-family: 'Inter', sans-serif;
}

/* Hero Gradient */
.hero-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Card Hover Effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Animations */
.animate-fade-in {
    animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.animate-slide-in {
    animation: slideIn 0.6s ease-out;
}

@keyframes slideIn {
    from { 
        transform: translateX(-100%); 
    }
    to { 
        transform: translateX(0); 
    }
}

.animate-bounce-in {
    animation: bounceIn 0.8s ease-out;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Button Styles */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-3 rounded-full font-semibold hover:bg-blue-700 transition-colors;
}

.btn-secondary {
    @apply border-2 border-blue-600 text-blue-600 px-6 py-3 rounded-full font-semibold hover:bg-blue-600 hover:text-white transition-colors;
}

/* Custom Card Styles */
.card {
    @apply bg-white rounded-xl shadow-lg border border-gray-100 p-6;
}

.card-hover-effect {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}

/* Custom Form Styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

/* Custom Section Spacing */
.section-padding {
    @apply py-20;
}

.section-padding-sm {
    @apply py-12;
}

/* Custom Text Styles */
.text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom Icon Styles */
.icon-circle {
    @apply w-16 h-16 rounded-full flex items-center justify-center;
}

.icon-circle-sm {
    @apply w-12 h-12 rounded-full flex items-center justify-center;
}

.icon-circle-lg {
    @apply w-20 h-20 rounded-full flex items-center justify-center;
}

/* Custom Background Patterns */
.bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f4f6' fill-opacity='0.4'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Custom Loading Animation */
.loading-spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Custom Focus Styles */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

/* Custom Shadow Styles */
.shadow-custom {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.shadow-custom-lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Custom Border Styles */
.border-gradient {
    border: 2px solid;
    border-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) 1;
}

/* Custom Typography */
.heading-1 {
    @apply text-5xl md:text-6xl font-bold text-gray-800;
}

.heading-2 {
    @apply text-4xl font-bold text-gray-800;
}

.heading-3 {
    @apply text-3xl font-bold text-gray-800;
}

.heading-4 {
    @apply text-2xl font-bold text-gray-800;
}

.text-large {
    @apply text-xl text-gray-600;
}

.text-body {
    @apply text-lg text-gray-600;
}

/* Custom Grid Styles */
.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Custom Responsive Utilities */
@media (max-width: 640px) {
    .mobile-hidden {
        display: none;
    }
}

@media (min-width: 641px) {
    .desktop-hidden {
        display: none;
    }
}

/* Custom Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-after: always;
    }
}

/* Custom Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .dark-mode {
        @apply bg-gray-900 text-white;
    }
}

/* Custom Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Custom Animation Delays */
.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

.delay-400 {
    animation-delay: 400ms;
}

.delay-500 {
    animation-delay: 500ms;
}

/* Background color */
.bg-blueg {
    background-color: #24687F;
}
.bg-tiffany {
    background-color: #22BFB3;
}

/* CTA Section */
#cta-section {
    background-color: #22BFB3;
}

.text-darkblue {
    color: #143a5e;
}

.text-green2 {
    color: #22BFB3;
}

/* Footer */
footer {
    background-color: #143a5e;
}
