/* Import Google Font for a modern look */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');

:root {
    --primary-color: #ffffff; /* White text */
    --accent-color: #cccccc; /* Light gray for subtle accents */
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.intro-page {
    /* Set the generated image as the full background */
    background-image: url('background.jpg'); 
    background-size: cover;
    background-position: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    position: relative; /* Needed for absolute positioning of elements */
}

/* --- Header (Logo and Company Name) --- */
.header {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    width: 90%;
    /* This ensures the logo and name are aligned to the top center, matching the image placement */
}

.logo-container {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.logo {
    /* Set dimensions based on the logo in the image */
    /*width: 35px; 
    height: 35px;*/
    margin-right: 10px;
    /* Since the image has the logo included, this is mostly a placeholder style */
    /*display: none; /* Hide the HTML logo since the background image contains it */
}

.company-name {
    font-size: 1.2em;
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--primary-color);
    /* Since the background image contains the text, you might hide this too */
    /*display: none; /* Hide the HTML text since the background image contains it */
}

/* --- Main Slogan Block --- */
.content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.slogan-block {
    text-align: center;
    font-size: 1.5em;
    font-weight: 300;
    line-height: 1.5;
    /* Adjustments to match the center-placed text from the image */
    padding-top: 50px; 
}

.slogan-line {
    margin: 5px 0;
    letter-spacing: 5px;
}

/* --- Bottom Geometric Elements (optional, can be skipped if relying only on image) --- */
.bottom-element, .corner-element {
    /* These elements are visual placeholders for the small shapes in the image */
    position: absolute;
    display: none; /* Keep these hidden if the image handles all graphics */
}

.corner-element {
    bottom: 3%;
    right: 3%;
}