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

body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    background: #000;
    width: 100%;
    height: 100vh;
    /* Fallback */
    height: 100dvh;
    /* Use dynamic viewport height for mobile */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    /* Prevent scrolling */
}

.main-container {
    width: 100%;
    /* Full width, no max-width constraint */
    background: #000;
    margin: 0 auto;
}

.image-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* Responsive image that fills viewport without black bars */
.full-screen-image {
    display: block;
    width: 100%;
    height: 100%;
    /* Fill parent height */
    object-fit: cover;
    /* Covers entire viewport, may crop slightly to fill */
    object-position: center;
}

.text-layer {
    position: absolute;
    color: #fff;
    /* White text for visibility on dark backgrounds */
    font-family: Arial, sans-serif;
    z-index: 10;
}

/* Greeting Section (Top Left) */
.greeting-layer {
    top: 25%;
    left: 2%;
    width: 60%;
    /* Limit width to force wrapping if needed, though BRs are used */
    text-align: left;
}

.greeting-layer p {
    margin-bottom: 5px;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.4;
}

.greeting-layer .title {
    font-size: 1.5rem;
    font-weight: normal;
}

.greeting-layer .warning {
    margin-top: 20px;
    font-size: 1.4rem;
}

/* Info Section (Middle - Contact Info) */
.info-layer {
    top: 58%;
    /* Moved down from 40% to fix overlap */
    left: 30%;
    /* Indented from the left */
    width: 60%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.info-layer p {
    margin: 0;
    font-size: 0.65rem;
    /* Small font for contact info */
    color: #000;
    font-weight: bold;
    /* Looks slightly bolder in screenshot */
    transform: scale(0.9);
    /* Slight scaling to match the thin crisp look if needed, or just font-size */
    transform-origin: left;
}

.info-layer .contact {
    margin-bottom: 10px;
}

.info-layer .company {
    margin-top: 5px;
    line-height: 1.4;
}



/* Flags Section (Bottom Left) */
.flags-container {
    position: absolute;
    bottom: 0;
    /* At the bottom edge */
    left: 2%;
    /* Moved closer to the edge */
    display: flex;
    gap: 10px;
    padding-bottom: 15px;
}

.flag {
    width: 60px;
    height: 40px;
    border: 1px solid #333;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
    background-color: #fff;
    /* fallback */
}

/* Syria: Red, White, Black horizontal */
.syria {
    background: linear-gradient(to bottom,
            #CE1126 33.33%,
            #fff 33.33%, #fff 66.66%,
            #000 66.66%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.syria .star {
    color: #007A3D;
    font-size: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.syria .star.left {
    left: 25%;
}

.syria .star.right {
    right: 25%;
}

/* France: Blue, White, Red vertical */
.france {
    background: linear-gradient(to right,
            #0055A4 33.33%,
            #fff 33.33%, #fff 66.66%,
            #EF4135 66.66%);
}

/* Germany: Black, Red, Gold horizontal */
.germany {
    background: linear-gradient(to bottom,
            #000 33.33%,
            #DD0000 33.33%, #DD0000 66.66%,
            #FFCE00 66.66%);
}

/* Russia: White, Blue, Red horizontal */
.russia {
    background: linear-gradient(to bottom,
            #fff 33.33%,
            #0039A6 33.33%, #0039A6 66.66%,
            #D52B1E 66.66%);
}

/* Responsive adjustments for mobile */
@media (max-width: 480px) {
    .greeting-layer {
        top: 22%;
        left: 8%;
    }

    .greeting-layer .title {
        font-size: 0.95rem;
    }

    .greeting-layer .warning {
        font-size: 0.9rem;
        margin-top: 15px;
    }

    .info-layer {
        top: 60%;
        left: 30%;
        gap: 10px;
    }

    .info-layer p {
        font-size: 0.55rem;
    }



    .flags-container {
        bottom: 0;
        left: 8%;
        gap: 8px;
        padding-bottom: 15px;
    }

    .flag {
        width: 36px;
        height: 24px;
    }

    .syria .star {
        font-size: 8px;
    }
}