/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    font-size: 18px;
}

/* Container - main flex container */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* Header */
.header {
    flex-shrink: 0;
    background-color: #363940;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.header-image {
    max-width: 50%;
    height: auto;
    display: block;
}

/* Banner */
.banner {
    flex-shrink: 0;
}

.image-class {
    max-width: 50% !important;;
}

.banner-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Main content area */
.main {
    flex: 1;
    padding: 10px 20px;
    width: 90%;
    text-align: center;
    margin: 0 auto;
}

.main img {
    max-width: 100%; /* Reduced from 100% to 50% */
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Specific image sizes */
.title-image {
    max-width: 100% !important; /* Bigger for "Let's simplify attendee tracking" */
}

.main-image {
    max-width: 100% !important; /* Bigger for "Monitor" and other main images */
}

.big {
    max-width: 100% !important; /* Full width for "No Scan" */
}

/* Typography */
p {
    padding: 8px 0; /* Added padding above and below p tags */
    line-height: 1.2rem;;
}

h4 {
    padding: 12px 0; /* Added slightly more padding for h4 tags */
}

/* Features list */
.features-list {
    list-style-type: none;
    text-align: center;
    display: inline-block;
    margin: 16px 0;
}

.features-list li {
    line-height: 1.4;
    margin-bottom: 8px;
}

/* Footer */
.footer {
    flex-shrink: 0;
    background-color: #363940;
    display: flex;
    align-items: center;
    padding: 1.5rem;
    gap: 1.25rem;
}

.footer img {
    flex-shrink: 0;
    max-width: 75px; /* Footer image remains same size */
    height: auto;
    filter: brightness(0) saturate(100%) invert(56%) sepia(68%) saturate(395%) hue-rotate(120deg) brightness(95%) contrast(85%);
}

.footer-text {
    flex: 1;
    color: white;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-text h4 {
    padding: 0;
    margin: 0;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container {
        /* Small device container styles */
    }
    
    .main {
        padding: 15px 0;
        width: 90%;
        /* Small device main styles */
    }
    
    .footer {
        /* Small device footer styles */
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        margin: 0 auto;
        /* Medium device container styles */
    }
    
    .main {
        padding: 15px 0;
        width: 90%;
        /* Medium device main styles */
    }
    
    .footer {
        /* Medium device footer styles */
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
        /* Large device container styles */
    }
    
    .main {
        padding: 15px 0;
        width: 90%;
        /* Large device main styles */
    }
    
    .footer {
        /* Large device footer styles */
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        /* Extra large device container styles */
    }
    
    .main {
        padding: 15px 0;
        width: 90%;
        /* Extra large device main styles */
    }
    
    .footer {
        /* Extra large device footer styles */
    }
}