@import url('./global.css');

#mobilePromo {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: #000;
    /* fundo preto */
    overflow: hidden;
    margin: 20px 0;
}

/* Logo grande do lado esquerdo */
.mobile-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.mobile-logo img {
    max-width: 300px;
    height: auto;
}

/* Container do lado direito com a imagem de fundo */
.mobile-container {
    flex: 2;
    height: 100%;
    display: flex;
    align-items: center;
    background: url('../img/mobilepromo.png') no-repeat center center;
    background-size: cover;
    border-radius: 100% 0 0 100% / 55%;
    /* borda arredondada como na 2ª imagem */
    padding: 40px;
    color: #fff;
    text-align: left;
}

/* Conteúdo de texto */
.promo-content {
    max-width: 500px;
    text-align: center;
}