/* ======================================================= */
/* ====== HARDWARE SOLUTION BANNER CSS =================== */
/* ======================================================= */

.hw-banner-section {
    background-color: #f3f4f6; /* bg-gray-100 */
    padding-top: 0.5rem;    /* py-2 */
    padding-bottom: 0.5rem;
}
@media (min-width: 640px) { /* sm:py-2 */
    .hw-banner-section {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

.hw-banner-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 0.5rem; /* px-2 */
}

.hw-banner-card {
    /* background-color: white; */
    border-radius: 0.75rem; /* rounded-xl */
    /* box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); shadow-lg */
    padding: 2rem; /* p-8 */
}

.hw-banner-grid {
    max-width: 80rem; /* max-w-7xl */
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem; /* gap-8 */
    align-items: center;
}
@media (min-width: 1024px) { /* lg:grid-cols-2 */
    .hw-banner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Left Side: Text --- */
.text-content {
    text-align: center;
}
@media (min-width: 1024px) { /* lg:text-left */
    .text-content {
        text-align: left;
    }
}

.main-title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700;
    color: #1f2937;
    display: inline-block;
    position: relative;
    padding-bottom: 0.75rem; /* pb-3 */
}
@media (min-width: 640px) { /* sm:text-5xl */
    .main-title {
        font-size: 3rem;
    }
}
.title-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px; /* h-1 */
    background-color: black;
}

.subtitle {
    margin-top: 1rem; /* mt-4 */
    color: #4b5563; /* text-gray-600 */
    max-width: 24rem; /* max-w-sm */
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1024px) { /* lg:mx-0 */
    .subtitle {
        margin-left: 0;
        margin-right: 0;
    }
}

/* --- Right Side: Image Collage --- */
.image-collage {
    position: relative;
    min-height: 300px;
}
@media (min-width: 640px) { /* sm:min-h-[450px] */
    .image-collage {
        min-height: 450px;
    }
}

.collage-image {
    position: absolute;
    object-fit: cover;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); /* shadow-lg */
}

/* --- Positioning Classes --- */
.pos-top-left {
    width: 50%; /* w-1/2 */
    top: 0;
    left: 0;
}
.pos-top-right {
    width: 50%; /* w-1/2 */
    top: 0;
    right: 0;
}
.pos-bottom-left {
    width: 50%; /* w-1/2 */
    bottom: 0;
    left: 0;
}
.pos-bottom-right {
    width: 50%; /* w-1/2 */
    bottom: 0;
    right: 0;
}
.pos-center {
    width: 50%;
    height: 75%; /* h-75 (approx) */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
    .pos-top-left, .pos-top-right, .pos-bottom-left, .pos-bottom-right {
        width: 41.666667%; /* md:w-5/12 */
    }
    .pos-center {
        width: 50%; /* md:w-1/2 */
    }
}

.z-10 { z-index: 10; }
.z-20 { z-index: 20; }