:root {
    --primary-red: #FE0000;
    --text-dark: #1A1A1A;
    --text-grey: #9CA3AF;
    --bg-white: #FFFFFF;
    --card-bg: #FFFFFF;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #FFFFFF;
    height: 100vh;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    display: flex;
    width: 100%;
    max-width: 1440px;
    height: 100vh;
    margin: 0 auto;
    background: #fff;
    align-items: center;
    /* Ensure items are centered */
}

/* Left Section */
/* Left Section */
.left-section {
    flex: 0 0 65.65%;
    /* approx 862 / (862+451) */
    max-width: 65.65%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 4rem;
    padding-right: 20px;
    z-index: 1;
}

/* ... */

/* Right Section */
.right-section {
    flex: 0 0 34.35%;
    /* approx 451 / (862+451) */
    max-width: 34.35%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    /* Allow image to bleed if needed, or hidden if strict. Let's try visible to ensure it's seen if slightly off, but hidden is safer for layout. User complained image not showing. */
    padding-right: 24px;
    /* Ensure image isn't flush with edge so border radius is visible */
}

/* ... */

.image-wrapper img {
    max-height: 90vh;
    max-width: 100%;
    /* Critical to prevent overflowing the flex percent */
    width: auto;
    object-fit: cover;
    /* User preference */
    margin-right: 0;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Optional: helps define edge against white bg if image is light */
}

/* Toast Notification */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    z-index: 1000;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px);
}

/* Carousel Arrow */
.carousel-arrow {
    width: 48px;
    height: 48px;
    background: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.carousel-arrow.left-arrow {
    right: auto;
    left: -24px;
}

.content-wrapper {
    max-width: 100%;
}

header {
    margin-bottom: 3rem;
}

h1 {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    /* Normal weight */
    background: linear-gradient(to right, #6A6A6A, #C7C7C7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    /* Required for background-clip on some browsers */
}

/* Cards Section */
.cards-container-wrapper {
    background: #F8F8F8;
    padding: 2.5rem;
    border-radius: 30px;
    margin-bottom: 3rem;
    position: relative;
    border: 1px solid #D0D0D0;
    display: flex;
    align-items: center;
    width: 100%;
}

.cards-container {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1rem 0.5rem;
    justify-content: flex-start;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cards-container::-webkit-scrollbar {
    display: none;
}

.card {
    background: white;
    border-radius: 20px;
    width: 175px;
    /* Updated width */
    height: 288px;
    /* Updated height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.card .icon-box {
    width: 60px;
    /* Slightly larger icon area for larger cards */
    height: 60px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card .icon-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Default icons are red based on design if they are svg, or we use filter */
}

/* Assuming SVGs are initially red or we need to color them. 
   If they are black/colored, we might need filters to make them red/white.
   Let's assume input SVGs are red-ish or we apply a red filter. 
   Actually, usually SVGs are black. Let's force a filter if needed, 
   but the active state definitely needs white. 
*/

.card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
}

/* Active State */
.card.active {
    background-color: var(--primary-red);
    box-shadow: 0 8px 25px rgba(254, 0, 0, 0.3);
}

.card.active h3 {
    color: white;
}

.card.active .icon-box img {
    filter: brightness(0) invert(1);
    /* Turns icon white */
}

/* Carousel Arrow */
.carousel-arrow {
    width: 48px;
    height: 48px;
    background: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.carousel-arrow:hover {
    transform: translateY(-50%) scale(1.1);
}

.carousel-arrow svg path {
    stroke: white;
}

/* Buttons */
.actions {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.btn {
    padding: 0.8rem 2.5rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Source Sans Pro', sans-serif;
}

.btn-outline {
    background: transparent;
    border: 1px solid #ddd;
    color: #333;
    min-width: 120px;
}

.btn-outline:hover {
    border-color: #bbb;
    background: #f5f5f5;
}

.btn-primary {
    background: var(--primary-red);
    border: none;
    color: white;
    min-width: 180px;
}

.btn-primary:hover {
    background: #e60000;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(254, 0, 0, 0.3);
}

/* Right Section */
.right-section {
    flex: 1;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.image-wrapper img {
    max-height: 90vh;
    width: auto;
    object-fit: contain;
    margin-right: -5%;
    border-radius: 30px;
}


/* Responsive */
@media (max-width: 1024px) {
    .left-section {
        max-width: 55%;
        padding: 0 2rem;
    }

    h1 {
        font-size: 2rem;
    }

    .card {
        width: 120px;
        height: 150px;
    }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        height: auto;
    }

    .left-section {
        max-width: 100%;
        padding: 3rem 1.5rem;
        order: 2;
    }

    .right-section {
        height: 40vh;
        order: 1;
    }

    .image-wrapper img {
        max-height: 100%;
        margin-right: 0;
    }
}