@charset "utf-8";
/* Amatex homepage - fits one screen, no scrolling.
   The whole design is a 2000 x 1625 canvas scaled to the viewport.
   Sizes use cqw (1% of the canvas width) so text scales with the layout. */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #404040;
}

/* Canvas: as large as possible while keeping the 2000:1625 ratio, centred */
.page {
    position: relative;
    width: min(100vw, calc(100vh * 2000 / 1625));
    aspect-ratio: 2000 / 1625;
    margin: 0 auto;
    container-type: inline-size;
    overflow: hidden;
    margin-top: 12vh;
}

/* ---------- Hero (top 64% of the canvas) ---------- */

.hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 64.18%;
    background: url("images/home-background.jpg") center / cover no-repeat;
    overflow: hidden;
}

.tagline {
    position: absolute;
    top: 6.5%;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-style: italic;
    font-weight: bold;
    font-size: 3.5cqw;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #2b0d06;
    white-space: nowrap;
}

.logo {
    position: absolute;
    left: 40%;
    top: 36%;
    width: 40%;
    height: auto;
}

.lang {
    position: absolute;
    left: 4.5%;
    top: 65%;
}

    .lang a {
        display: block;
        margin-bottom: 2.6cqw;
        font-style: italic;
        font-weight: bold;
        font-size: 2cqw;
        line-height: 1;
        color: #ffffff;
        text-decoration: none;
    }

.web {
    position: absolute;
    left: 50%;
    top: 78.5%;
    transform: translateX(-50%);
    font-size: 2cqw;
    line-height: 1;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}

.etracon {
    position: absolute;
    left: 83.75%;
    top: 88.5%;
    width: 12.5%;
    height: auto;
}

/* ---------- Footer / contact (bottom 36% of the canvas) ---------- */

.contact {
    position: absolute;
    top: 64.18%;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5cqw 1cqw 0;
    box-sizing: border-box;
    text-align: center;
    font-size: 18px;
    line-height: 2;
    color: #404040;
}

    .contact p {
        margin: 0;
    }

    .contact a {
        color: #1F598B;
        text-decoration: underline;
    }

        .contact a:visited {
            color: #17588E;
        }

        .contact a:hover {
            color: #1F598B;
        }

    .contact .credit {
        margin-top: 1.5cqw;
        font-size: 1.4cqw;
        color: #808080;
    }

        .contact .credit a {
            color: #1F598B;
            text-decoration: underline;
        }