/* style.css */

/* Base styles for body and font */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f9fafb; /* A very light gray, almost white */
    color: #1f2937; /* Very dark gray for main text */
}

/* Hero section background and overlay */
.hero-background {
    /* Blue gradient background as fallback */
    background: linear-gradient(to right, #1a73e8, #4285f4);
    position: relative;
    overflow: hidden;
    /* Properties for the background image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Overlay layer for text legibility */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px; /* Minimum height to ensure visibility */
}

.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Dark overlay to improve white text legibility */
    z-index: 1;
}

.hero-background .container {
    position: relative;
    z-index: 2; /* Ensures content is above the dark layer */
}

/* Pulse animation for the background, remains if no image */
.hero-background.animated::before {
    animation: pulse 10s infinite alternate;
}

@keyframes pulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(1.2); opacity: 0.8; }
}

/* Gradient for alternating sections */
.section-gradient {
    background: linear-gradient(to bottom, #ffffff, #f3f4f6); /* White to very light gray */
}

/* Card hover effect */
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Primary button styles */
.btn-primary {
    background-color: #1d4ed8; /* Deeper blue */
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #1e3a8a; /* Even darker blue on hover */
}

/* Secondary button styles */
.btn-secondary {
    border: 2px solid #1d4ed8; /* Deeper blue border */
    color: #1d4ed8; /* Deeper blue text */
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #1d4ed8; /* Deeper blue background on hover */
    color: white;
}

/* Styles for fixed and colorful icons */
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px; /* w-16 */
    height: 64px; /* h-16 */
    border-radius: 9999px; /* rounded-full */
    background-color: #2563eb; /* bg-blue-600 - vibrant blue */
    margin-bottom: 16px; /* mb-4 */
}

.icon-box svg {
    color: white; /* White SVG icons */
    width: 32px; /* w-8 */
    height: 32px; /* h-8 */
}

.icon-box img {
    /* Ensures icon images fit and are visible */
    width: 48px; /* Fixed size for icon images */
    height: 48px;
    object-fit: contain;
}

/* Fade-in animation on scroll */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}