@font-face {
    font-family: 'Bayon';
    src: url('./bayon.ttf') format('truetype')
    /* Autres propriétés de police (poids, style, etc.) */
}

html {
    background-color: #1C1C1C;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.main-container {
    position: relative;
}

.container .title-2, .container .title-3 {
    display: block; /* Place chaque span sur une ligne distincte */
}

.container span {
    line-height: 14vw;
}

.container-contact {
    position: absolute;
    top: 1vw;
    right: 0vw;
}

.container-end {
    text-align: end;
}

.title-1 {
    color: #FFF;
    font-family: 'Bayon';
    font-size: 17vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 19.46px;
    text-transform: uppercase;
}

.title-2 {
    color: rgba(209, 209, 209, 0.83);
    font-family: 'Bayon';
    font-size: 17vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 19.46px;
    text-transform: uppercase;
}

.title-3 {
    color: #FFF;
    font-family: 'Bayon';
    font-size: 14vw;
    font-style: normal;
    font-weight: 400;
    line-height: 237px; /* 102.597% */
    letter-spacing: 16.17px;
    text-transform: uppercase;
}

.subtitle-1 {
    color: rgba(252, 143, 64, 0.70);
    font-family: 'Bayon';
    font-size: 2vw;
    font-style: normal;
    font-weight: 400;
    line-height: 2vw;
    letter-spacing: 0.64px;
    text-transform: uppercase;
}

.subtitle-2 {
    color: #FC8F40;
    font-family: 'Bayon';
    font-size: 2vw;
    font-style: normal;
    font-weight: 400;
    line-height: 2vw;
    letter-spacing: 0.64px;
    text-transform: uppercase;
}

.container-contact i {
    color: #FC8F40;
    font-size: 1vw;
}

.contact-box {
    width: 2vw;
    height: 2vw;
    border: 1px solid #FC8F40;
    border-radius: 50%;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-box:hover, .contact-box:hover a i {
    border-color: #FFF;
    color: #FFF;
}

.mobile-img {
    display: none;
}

@media screen and (max-width: 650px) {   
    .title-1, .title-2 {
        font-size: 13vw;
        letter-spacing: 8.46px;
    }

    .title-3 {
        font-size: 11vw;
        letter-spacing: 8.46px;
    }

    .container-end {
        text-align: center;
    }

    .mobile-img {
        margin-bottom: 10px;
        display: block;
    }

    .mobile-img img {
        width: 90vw;
    }

    .container img {
        display: none;
    }

    .subtitle-1, .subtitle-2 {
        font-size: 4vw;
        line-height: 4vw;
    }

    .contact-box {
        width: 4vw;
        height: 4vw;
    }

    .container-contact i {
        color: #FC8F40;
        font-size: 2vw;
    }

    .container span {
        line-height: 12vw;
    }
}