@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    margin: 0; /* Elimina márgenes por defecto */
    padding: 0; /* Elimina relleno por defecto */
    box-sizing: border-box; /* Ajusta el modelo de caja */
}

/* Contenedor principal */
#divContainer {
    width: 60%; /* Ajusta el ancho */
    margin: 0 auto; /* Centra el contenido */
    text-align: center; /* Centra el texto */
}

/* Contenedor del logo */
.image-container {
    background-image: url('https://munirimac.gob.pe/images/banner/logo.jpg');
    background-size: contain; /* Asegura que la imagen completa se muestre */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    width: 100%; /* Ocupa el ancho completo del contenedor */
    height: 300px; /* Altura fija que puedes ajustar */
    border-radius: 15px; /* Bordes redondeados */
}

/* Títulos */
h2 {
    text-align: center;
}

/* Redes sociales */
#redesS {
    margin-top: 5%;
    display: flex;
    justify-content: center; /* Centra las redes sociales */
}

    #redesS div {
        text-align: center;
    }

/* Login container */
.box-area {
    width: 75%;
}

/* Caja derecha */
.right-box {
    padding: 40px 30px 40px 40px;
}

/* Personalización de placeholder */
::placeholder {
    font-size: 16px;
}

/* Bordes personalizados */
.rounded-4 {
    border-radius: 20px;
}

.rounded-5 {
    border-radius: 30px;
}

/* Botón de login */
#btnLogin:hover {
    background-color: #EAA21A;
}

/* Diseño responsivo (dispositivos pequeños) */
@media only screen and (max-width: 768px) {
    #divContainer {
        width: 90%; /* Ajusta el ancho en pantallas pequeñas */
    }

    .image-container {
        height: 200px; /* Reduce la altura del logo */
    }

    .box-area {
        margin: 0 10px;
    }

    .left-box {
        height: auto; /* Ajusta la altura automáticamente */
    }

    .right-box {
        padding: 20px;
    }
}