/* Base styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

a {
    color: #0b3d91;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Header and navigation */
header {
    background-color: #0b3d91;
    color: #fff;
    padding: 40px 20px;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 2.5em;
    letter-spacing: 1px;
}

header p {
    margin-top: 10px;
    font-size: 1.1em;
    font-weight: 300;
}

nav {
    background-color: #08316e;
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 10px 0;
}

nav a {
    color: #fff;
    font-weight: bold;
    font-size: 0.95em;
}

nav a:hover {
    text-decoration: underline;
}

/*
 * Call-to-Action section
 *
 * A dark banner inviting visitors to start a conversation with SURILABS.
 * The button leverages the primary button styling defined earlier.
 */
.call-to-action {
    background-color: #0b3d91;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
}
.call-to-action h2 {
    margin: 0 0 10px;
    font-size: 2em;
    font-weight: 600;
}
.call-to-action p {
    margin: 0 0 20px;
    font-size: 1.1em;
    font-weight: 300;
}
.call-to-action .btn {
    margin-top: 10px;
}

/* Ensure the site title link in the header remains visible and accessible */
header a {
    /* Inherit the header colour so the text contrasts against the dark background */
    color: #fff;
    text-decoration: none;
}

header a:hover {
    /* Provide a subtle visual cue when hovering */
    text-decoration: underline;
}

/* Sections */
section {
    padding: 60px 20px;
}

/*
 * Use alternating light backgrounds for regular sections, but do not
 * override the page hero banners. The :not(.page-hero) selector
 * ensures the dark banner retains its own colour.
 */
section:not(.page-hero):nth-of-type(odd) {
    background-color: #f7f9fc;
}

h2 {
    color: #0b3d91;
    margin-bottom: 20px;
}

.container {
    max-width: 900px;
    margin: 0 auto;
}

/* Grid for cards */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/*
 * Hero section
 *
 * The hero section sits at the top of the homepage and uses a
 * full‑width background image to set the tone for the site. A
 * semi‑transparent overlay is applied to ensure the headline
 * text is legible against the image. A call‑to‑action button
 * invites visitors to start a conversation with SURILABS.
 */
.hero {
    position: relative;
    background-image: url('hero.png');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 120px 20px;
    text-align: center;
}
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*
     * Increase the overlay opacity to improve legibility of
     * the hero text. A darker overlay provides greater
     * contrast against the background image without
     * obscuring it entirely.
     */
    /* Darken the overlay further to improve contrast of the hero text.
       The increased opacity provides a stronger backdrop for white
       headings and subtext, ensuring maximum legibility. */
    background: rgba(0, 0, 0, 0.75);
    z-index: 0;
}
.hero .content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}
/* Hero heading style */
.hero h2 {
    font-size: 2.8em;
    margin: 0 0 20px;
    font-weight: 600;
    line-height: 1.2;
    /* Add subtle shadow for better contrast over the image */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Explicitly set colour to white for maximum contrast */
    color: #fff;
}
/* Hero subtext style */
.hero p {
    font-size: 1.2em;
    margin: 0 0 30px;
    font-weight: 300;
    /* Improve readability against the background */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    /* Explicitly set text colour to white for maximum contrast */
    color: #fff;
}

/* Remove erroneous closing brace after hero styles */
.btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.btn-primary {
    background-color: #0b3d91;
    color: #fff;
}
.btn-primary:hover {
    background-color: #052e74;
}
.btn-secondary {
    background-color: #fff;
    color: #0b3d91;
}
.btn-secondary:hover {
    background-color: #e0eaff;
}

/*
 * Metrics section
 *
 * A set of statistic cards highlighting tangible results
 * delivered by SURILABS. The grid adapts to screen size.
 */
.metrics {
    padding: 60px 20px;
    background-color: #f7f9fc;
}
.metrics .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}
.metric-card {
    background-color: #fff;
    padding: 30px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
}
.metric-card h3 {
    font-size: 2em;
    margin: 0;
    color: #0b3d91;
}
.metric-card p {
    margin-top: 10px;
    font-size: 0.9em;
    color: #555;
}

/*
 * Experience grid
 * The Professional Highlights section uses a custom two‑column layout to
 * improve visual balance on large screens. This grid falls back to a
 * single column on narrow viewports via the auto‑fit behaviour.
 */
.experience-grid {
    display: grid;
    /* Set a minimum width of 400px for each card so the layout
       naturally forms a two‑column grid on larger screens. With
       the available width (~1024px), this will yield two columns
       instead of three, creating a more balanced arrangement for
       the four professional highlight cards. On narrower screens
       the grid will collapse into a single column automatically. */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}

.card h3 {
    margin-top: 0;
    color: #0b3d91;
    font-size: 1.2em;
}

.card p {
    margin: 10px 0 0;
    font-size: 0.95em;
}

/* Footer */
footer {
    background-color: #0b3d91;
    color: #fff;
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
}

/*
 * Page hero banner
 *
 * For inner pages (About, Expertise, Experience, Skills, Services and Contact),
 * we introduce a simple hero banner at the top of the page. This section
 * replaces the large image hero used on the homepage and provides a
 * consistent, high‑contrast entry point for each page. The dark
 * background ties into the primary palette while the light tagline
 * text offers visual variety.
 */
.page-hero {
    background-color: #052e74; /* dark blue slightly different from header */
    color: #fff;
    padding: 80px 20px;
    text-align: center;
}
.page-hero h2 {
    margin: 0 0 10px;
    font-size: 2.2em;
    font-weight: 600;
    /* Override the global h2 colour so the page hero heading
       stands out against the dark banner. Without this, the
       heading inherits the dark blue from the global h2 rule
       making it nearly invisible on the blue background. */
    color: #fff;
}
.page-hero p {
    margin: 0;
    font-size: 1.1em;
    font-weight: 300;
    /* Soften the tagline colour slightly for improved contrast against the dark banner */
    /* Lighten the tagline colour further for improved contrast against the dark banner */
    color: #d6e3ff;
}