/* style.css */

/* Import Tailwind base, components, and utilities if using a build process.
   For CDN, Tailwind classes are applied directly in HTML.
   This file is for custom styles that complement or override Tailwind,
   or for styles not easily achievable with utility classes alone. */

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    /* Tailwind classes bg-slate-900 text-slate-100 are applied in HTML body tag */
}

.hero-bg {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}

.section-title {
    font-size: 2.5rem; /* 40px */
    font-weight: 700; /* Corresponds to font-bold */
    margin-bottom: 1.5rem; /* Corresponds to mb-6 */
    text-align: center;
    /* Color is inherited (text-slate-100 from body) */
}
/* Span inside section-title for colored text */
.section-title .text-blue-400 {
    color: #60a5fa; /* Tailwind blue-400 */
}


.feature-card {
    /* Tailwind classes: bg-slate-800 p-8 rounded-xl shadow-xl border border-slate-700 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
    /* Tailwind class: shadow-2xl */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.cta-button {
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* Tailwind classes for font, padding, rounded are in HTML */
}

.cta-button:hover {
    transform: scale(1.05);
}

.nav-link { 
    transition: color 0.3s ease;
    /* Tailwind classes for padding, rounded, text color are in HTML */
}
.nav-link:hover {
    color: #60a5fa; /* Tailwind blue-400 */
}

.icon-placeholder {
    width: 3rem; /* 48px */
    height: 3rem; /* 48px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem; /* rounded-lg */
    margin-bottom: 1rem; /* mb-4 */
    /* Icon placeholder background and text colors are applied via Tailwind classes in HTML */
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1e293b; /* slate-800 */
}
::-webkit-scrollbar-thumb {
    background: #3b82f6; /* blue-500 */
    border-radius: 4px; /* rounded */
}
::-webkit-scrollbar-thumb:hover {
    background: #2563eb; /* blue-600 */
}

/* Modal Styles (Only for Contact Modal now) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75); 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; 
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.modal-content { /* Primarily for Contact Modal */
    background-color: #1e293b; /* slate-800 */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); /* shadow-xl */
    width: 90%; /* w-[90%] */
    max-width: 28rem; /* max-w-md, approx 448px */
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}