/* assets/css/home.css */
/* Styles specific to the Home page */

.hero-section {
    position: relative;
    width: 100%;
    height: 90vh; /* Takes up 90% of the viewport height */
    background-image: url('../images/hero2.jpg'); /* Your background image */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff; /* White text for contrast */
    overflow: hidden; /* Ensures image doesn't spill out */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(39, 37, 37, 0.4); /* Dark overlay for text readability */
    /* Optional: Add a subtle blue tint */
    background-image: linear-gradient(to top, rgba(10, 25, 47, 0.6), rgba(0, 0, 0, 0.2)); 
    z-index: 1; /* Make sure overlay is behind text */
}

.hero-content {
    position: relative;
    z-index: 2; /* Make sure content is above the overlay */
    max-width: 800px;
    padding: 20px;
}

.hero-content h1 {
    font-size: 3.5rem; /* Large heading */
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.2;
    color: #fff; /* White color for headings */
}

.hero-content p {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 30px;
    color: #e0e0e0; /* Slightly off-white for body text */
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between buttons */
    margin-top: 30px;
}

.btn {
    display: inline-block;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn-primary {
    background-color: #1e3a8a; /* Dark blue from your header login button */
    color: #ffffff;
    border: 2px solid #1e3a8a;
}

.btn-primary:hover {
    background-color: #3b82f6; /* Lighter blue on hover */
    border-color: #3b82f6;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff; /* White border */
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Slight white background on hover */
    transform: translateY(-2px);
}

/* Ensure main content padding from header doesn't interfere */
body main {
    padding: 0; /* Remove default padding from main for hero section */
}

/* --- Stats Section --- */
.stats-section {
    background-color: #f4f6f9; /* Light grey background to contrast cards */
    padding: 50px 20px;
}

.stats-container {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Ensures cards are the same height */
    gap: 40px; /* Increased the gap between cards */
    max-width: 1200px; /* Widened the container for more space */
    margin: 0 auto;
    padding: 0 20px; /* Adds a little space on the sides */
}

.stat-card {
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    text-align: center;
    flex: 1; /* <-- This is the key change */
    min-width: 200px; /* Prevents cards from getting too small */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover {
    transform: translateY(-5px); /* Lift card on hover */
    box-shadow: 0 15px 30px rgba(64, 94, 190, 0.12);
}

.stat-number {
    font-size: 3rem;
    font-weight: bold;
    color: #0056b3; /* A strong blue for the number */
    margin-bottom: 5px;
}

.stat-label {
    font-size: 1rem;
    color: #555; /* A dark grey for the label text */
    margin: 0;
}

/* --- Services Section --- */
.services-section {
    background-color: #f4f6f9; /* Matches the light grey from the stats section */
    padding: 50px 20px;
    text-align: center;
}

.section-header h2 {
    font-size: 2.5rem;
    color: #0d47a1; /* A strong, dark blue */
    margin-bottom: 15px;
    position: relative;
    display: inline-block; /* Allows the underline to be sized to the text */
    padding-bottom: 10px;
}

/* This creates the blue underline effect */
.section-header h2::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 4px;
    background-color: #3b82f6; /* A lighter, vibrant blue */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

.section-header p {
    font-size: 1.1rem;
    color: #555;
    max-width: 600px;
    margin: 0 auto 50px auto; /* Centers the subtitle and adds space below */
}

.services-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap; /* Allows cards to wrap on smaller screens */
    max-width: 1200px;
    margin: 0 auto;
}

.service-card {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    text-align: left; /* Aligns text to the left inside the card */
    flex: 1; /* Allows cards to grow equally */
    min-width: 300px; /* Minimum width before wrapping */
    border-top: 4px solid #e7f5ff; /* Subtle light blue top border */
    transition: transform 0.3s ease, border-top-color 0.3s ease;
    margin-bottom: 30px;
}

.service-card:hover {
    transform: translateY(-5px);
    border-top-color: #3b82f6; /* Makes the top border vibrant on hover */
}

.service-card h3 {
    font-size: 1.5rem;
    color: #1e3a8a; /* Dark blue for the card title */
    margin-top: 0;
    margin-bottom: 15px;
}

.service-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

/* --- Promise Section --- */
.promise-section {
    background-color: #f4f6f9; /* Matches the light grey theme */
    padding: 50px 20px;
    text-align: center;
}

.promise-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    max-width: 1200px;
    margin: 50px auto 0 auto; /* Adds space above the columns */
}

.promise-item {
    flex: 1;
    min-width: 300px; /* Minimum width before wrapping */
    padding: 0 15px; /* Adds a little space on the sides of each item */
}

.promise-icon {
    background-color: #3b82f6; /* Vibrant blue background */
    border-radius: 12px;
    width: 64px;
    height: 64px;
    margin: 0 auto 25px auto; /* Centers the icon and adds space below */
    display: flex;
    justify-content: center;
    align-items: center;
}

.promise-icon img {
    height: 36px; /* Controls the size of the icon image inside the blue box */
    width: 36px;
}

.promise-item h3 {
    font-size: 1.5rem;
    color: #1e3a8a; /* Dark blue for the title */
    margin-bottom: 15px;
}

.promise-item p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

/* --- Assurance Section --- */
.assurance-section {
    background-color: #f4f6f9; /* Matches the light grey theme */
    padding: 50px 20px;
    text-align: center;
}

.assurance-section h2 {
    font-size: 2.5rem;
    color: #1e3a8a; /* Dark blue heading */
    margin-bottom: 25px;
}

.assurance-section p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
    max-width: 800px; /* Constrains the width for readability */
    margin: 0 auto 20px auto; /* Centers the paragraph and adds space below */
}

/* --- CTA Section --- */
.cta-section {
    padding: 80px 20px;
    text-align: center;
    color: #ffffff;
    
    /* This creates the dark blue grid background */
    background-color: #0a192f; /* Dark blue base */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px; /* Size of the grid squares */
}

.cta-section h2 {
    font-size: 2.8rem;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 15px;
    color: #ffffff;
}

.cta-section p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 30px auto;
    color: #ccd6f6; /* Soft white from your theme */
}

.btn-cta {
    display: inline-block;
    background-color: #051222; /* Very dark blue, almost black */
    color: #ffffff;
    padding: 15px 35px;
    font-size: 1rem;
    font-weight: bold;
    border: 1px solid #3b82f6; /* Blue border */
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); /* Subtle blue glow */
    transition: all 0.3s ease;
}

.btn-cta:hover {
    background-color: #1e3a8a;
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.6); /* Brighter glow on hover */
    transform: translateY(-2px);
}