/* Tailwind CSS via CDN */
@import 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';

/* Custom Tailwind Overrides to match existing design */

/* Color Variables */
:root {
    --primary: #2c3e50;    /* Dark blue/navy */
    --secondary: #3498db;  /* Bright blue */
    --accent: #e67e22;     /* Orange accent for CTA buttons */
    --light: #ecf0f1;      /* Light gray */
    --dark: #2c3e50;       /* Dark blue/gray */
    --success: #2ecc71;    /* Green */
    --warning: #f39c12;    /* Orange */
    --text: #333333;       /* Main text color */
    --text-light: #7f8c8d; /* Light text color */
    --border: #ddd;        /* Border color */
}

/* Typography Overrides */
.font-primary {
    font-family: 'Poppins', sans-serif;
}

.font-secondary {
    font-family: 'Montserrat', sans-serif;
}

/* Custom Colors */
.bg-primary {
    background-color: var(--primary);
}

.bg-secondary {
    background-color: var(--secondary);
}

.bg-accent {
    background-color: var(--accent);
}

.bg-light {
    background-color: var(--light);
}

.bg-dark {
    background-color: var(--dark);
}

.bg-success {
    background-color: var(--success);
}

.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--secondary);
}

.text-accent {
    color: var(--accent);
}

.text-light {
    color: var(--light);
}

.text-dark {
    color: var(--dark);
}

.text-success {
    color: var(--success);
}

.text-custom-light {
    color: var(--text-light);
}

/* Button Styles */
.btn-primary {
    @apply bg-success text-white font-semibold py-3 px-6 rounded transition duration-300 ease-in-out;
}

.btn-primary:hover {
    @apply transform -translate-y-1 shadow-lg;
    background-color: #27ae60;
}

.btn-secondary {
    @apply bg-transparent border-2 border-primary text-primary font-semibold py-3 px-6 rounded transition duration-300 ease-in-out;
}

.btn-secondary:hover {
    @apply bg-primary text-white transform -translate-y-1 shadow-lg;
}

/* Header Styles */
header {
    @apply bg-primary shadow-md;
}

.header-container {
    @apply flex justify-between items-center;
    height: 70px;
}

/* Navigation Styles */
nav ul li a {
    @apply font-medium px-5 transition duration-300 ease-in-out;
}

nav ul li a.active {
    @apply text-white bg-secondary;
}

/* Service Cards */
.service-card {
    @apply bg-white rounded-lg shadow-md p-8 text-center transition duration-300 ease-in-out cursor-pointer overflow-hidden;
}

.service-card:hover {
    @apply transform -translate-y-2 shadow-xl;
}

/* Section Titles */
.section-title {
    @apply text-primary text-4xl font-bold mb-12 text-center;
}

/* Footer Styles */
footer {
    @apply bg-dark text-white py-16 pb-8;
}

.footer-column h4 {
    @apply text-white mb-6 text-xl;
}

.footer-column ul li a {
    @apply text-gray-400 transition duration-300 ease-in-out;
}

.footer-column ul li a:hover {
    @apply text-white no-underline;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero, .page-hero {
        @apply py-24 pb-16;
    }
    
    .hero-content h1, .page-hero h1 {
        @apply text-4xl;
    }
}