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

body {
    font-family: 'Poppins', sans-serif;
    background: url(fondoOficial.png) fixed no-repeat center;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

/*------------ Login container ------------*/
.box-area {
    width: 930px;
}

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

/*------------ Custom Placeholder ------------*/
::placeholder {
    font-size: 16px;
}

.rounded-4 {
    border-radius: 20px;
}

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

/*-----------Login Button------------*/
.btn {
    background-color: rgb(200, 215, 228);
    color: black;
}

.btn:hover {
    background-color: rgb(37, 56, 72);
    color: white;
}

/*------------ For small screens ------------*/
@media only screen and (max-width: 768px) {
    .box-area {
        margin: 0 10px;
    }
    .left-box {
        height: 330px;
        overflow: hidden;
    }
    .right-box {
        padding: 20px;
    }
}

/*------------ Responsive-Image ------------*/
.responsive-image {
    max-width: 100%;  
    height: auto;     
    display: block;   
}

/*---- Container ----*/
.featured-image {
    width: 100%;      
    max-width: 500px; 
    text-align: center; 
    margin: 0 auto;  
}