body {  
    background-image: url('fondo.jpg'); 
    background-size: cover;   
    background-position: center;   
    height: 100%;  
    position: relative;  
    color:rgb(255, 255, 255);  
    animation: fadeIn 2s;   
}  

footer {  
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    padding: 10px;  
    background: rgb(255, 255, 255);    
    color: rgb(0, 12, 182);   
    position: relative;  
    bottom: 0;  
    width: 100%;  
}  

.logo {  
    cursor: pointer;  
    height: 60px; 
    transition: transform 0.3s;  
}  

.logo:hover {  
    transform: scale(2.1); 
}

header {  
    background: rgba(10, 6, 6, 0.938);    
    color: rgb(255, 255, 255);    
    padding: 20px;  
    text-align: center;  
}  

.content {  
    padding: 20px;  
    text-align: justify;  
    background:rgba(0, 0, 0, 0.897);    
    margin: 20px; 
    border-radius: 30px;  
}  

.content h1,  
.content h2 {  
    color:rgb(43, 195, 206);  
}  

.contact-info {  
    background: rgba(0, 0, 0, 0.945);  
    padding: 20px;  
    border-radius: 5px;  
    box-shadow: 0 4px 10px rgb(0, 0, 0);  
    margin-top: 20px;  
}  

footer {  
    text-align: center;  
    padding: 10px;  
    background: rgb(7, 4, 4);   
    color: white;  
    position: relative;  
    bottom: 0;  
    width: 100%;  
}  

a {  
    color: rgb(43, 195, 206);  
    text-decoration: none;  
}  

 
@media (max-width: 768px) {  
    .logo {  
        top: 5%;  
        height: 40px; 
    }  

    header, .content, .contact-info, footer {  
        padding: 10px; 
    }  

    .content h1,   
    .content h2 {  
        font-size: 1.5em; 
    }  
}  

@media (max-width: 480px) {  
    .logo {  
        height: 30px; 
    }  

    .content h1,  
    .content h2 {  
        font-size: 1.2em; 
    }  

    .contact-info {  
        padding: 10px; 
    }  
}
.footer-container {  
    display: flex;  
    flex-direction: row;   
    align-items: center;  
    justify-content: center;   
    padding: 10px;  
    background-color: rgb(0, 0, 0);  
    margin-top: 20px;  
    flex-wrap: wrap;  
}  

.footer-container img {   
    width: 100px;   
    margin: 0 10px;   
}  

.footer-info {  
    text-align: center;  
    margin-top: 10px;  
    padding: 10px;  
}  

@media (max-width: 600px) {  
    .form-row {  
        flex-direction: column;  
    }  

    .form-column {  
        width: 100%;  
    }  

    button {  
        width: 100%;  
        margin: 5px 0;  
    }  
}