/* styles.css */


/* Global Reset & Base Configurations */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


body {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    line-height: 1.6;

    color: #333333;

    background-color: #f8f9fa;

}


/* Fluid Container Layout */

.container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}


/* Navigation Bar Styling */

.navbar {

    background-color: #ffffff;

    box-shadow: 0 2px 4px rgba(0,0,0,0.05);

    padding: 15px 0;

    position: sticky;

    top: 0;

    z-index: 1000;

}


.navbar-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.brand-logo {

    font-size: 1.5rem;

    font-weight: 700;

    color: #007bff;

    text-decoration: none;

}


.nav-links a {

    color: #555555;

    text-decoration: none;

    margin-left: 20px;

    font-weight: 500;

    transition: color 0.2s ease;

}


.nav-links a:hover {

    color: #007bff;

}


/* Hero Component Section */

.hero-section {

    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);

    color: #ffffff;

    padding: 80px 0;

    text-align: center;

}


.hero-content h1 {

    font-size: 2.5rem;

    margin-bottom: 15px;

}


.hero-content p {

    font-size: 1.2rem;

    margin-bottom: 30px;

    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

    opacity: 0.9;

}


.cta-button {

    display: inline-block;

    background-color: #ffffff;

    color: #007bff;

    padding: 12px 30px;

    border-radius: 5px;

    text-decoration: none;

    font-weight: 600;

    transition: background-color 0.2s;

}


.cta-button:hover {

    background-color: #f1f1f1;

}


/* Mobile-First Feature Grid Presentation */

.feature-grid {

    display: flex;

    flex-direction: column; /* Renders layout inside a single vertical stack on mobile devices */

    gap: 25px;

    padding-top: 50px;

    padding-bottom: 50px;

}


.feature-card {

    background-color: #ffffff;

    padding: 30px;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0,0,0,0.02);

    border: 1px solid #eef2f5;

}


.feature-card h3 {

    margin-bottom: 12px;

    color: #111111;

}


/* Footer Section */

.site-footer {

    background-color: #222222;

    color: #aaaaaa;

    text-align: center;

    padding: 30px 0;

    font-size: 0.9rem;

    margin-top: auto;

}


/* ==========================================================================

   Responsive Breakpoints via CSS Media Queries

   ========================================================================== */


/* Tablet & Smaller Desktop Viewports (Widths above 768px) */

@media (min-width: 768px) {

    .hero-section {

        padding: 120px 0;

    }


    .hero-content h1 {

        font-size: 3.5rem;

    }


    /* Transform stacking vertical lists into an aligned horizontal three-column layout grid */

    .feature-grid {

        flex-direction: row;

    }


    .feature-card {

        flex: 1; /* Grants cards completely uniform widths inside parent row space wrappers */

    }

}