@charset "utf-8";



/* Estilos generales */

body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

    background-color: #F1FEE3;

    color: #333;

}



header {

    position: relative;

    background: url('../img/banner.jpeg') no-repeat top center;

    background-size: cover;

    color: white;

    height: 80vh;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

}



.logo {

    width: 80px;

    height: auto;

    margin-right: 20px;

    padding-left: 8.5rem;

    margin-top: 10px;

}



.header-content {

    position: relative;

    z-index: 1;

}



nav {

    display: flex;

    align-items: center;

    position: absolute;

    width: 100%;

    top: 0;

    left: 0;

    z-index: 2;

}



nav a {

    color: white;

    padding: 1rem;

    text-decoration: none;

}



nav a:hover {

    background-color: rgba(0, 157, 77, 0.8); /* Fondo de hover transparente */

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding-left: 15rem;

    padding-right: 15rem;

}



section {

    margin: 2rem 0;

}



footer {

    background-color: #009D4D;

    color: white;

    text-align: center;

}



.cta-button {

    background-color: #009D4D;

    color: white;

    padding: 0.5rem 1rem;

    text-decoration: none;

    border-radius: 5px;

    display: inline-block;

    margin-top: 1rem;

}



.cta-button:hover {

    background-color: #45a049;

}



.service {

    background-color: white;

    padding: 1rem;

    border-radius: 5px;

    margin-bottom: 1rem;

}



.contact-section {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.contact-form {

    background-color: rgba(76, 175, 80, 0.1);

    border-radius: 10px;

    width: 100%;

    max-width: 800px;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.contact-form h2 {

    text-align: center;

}



.form-content {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    width: 100%;

}



.contact-form form {

    flex: 1;

    margin-right: 2rem;

	margin-left: 2rem;

}



.contact-form p {

    margin: 0;

}



.contact-form label {

    display: block;

    margin-bottom: 0.5rem;

    font-weight: bold;

}



.contact-form input,

.contact-form textarea {

    width: 100%;

    margin-bottom: 1rem;

    border: 1px solid #ccc;

    border-radius: 5px;

	padding-bottom: 1rem;

}



.contact-form input[type="submit"] {

    background-color: #4CAF50;

    color: white;

    border: none;

    cursor: pointer;

    width: 100%;

	padding-top: 0.5rem;

	padding-bottom: 0.5rem;

}



.contact-form input[type="submit"]:hover {

    background-color: #45a049;

}



.image-text {

    text-align: center;

    flex: 1;

}



.image-text img {

    max-width: 20%;

    height: auto;

    border-radius: 10px;

    margin-bottom: 1rem;

	margin-top: 2rem;

}



.map {

    margin-top: 2rem;

    border-radius: 10px;

    overflow: hidden;

    width: 100%;

    height: 450px; /* Aumenta el tamaño del mapa */

}



/* Footer styles */

.footer-section {

    display: flex;

    justify-content: space-around;

    padding: 1rem 0;

}



.footer-col {

    flex: 1;

    text-align: center;

}



.footer-col img {

    width: 24px;

    height: 24px;

    margin: 0 5px;

}



a {

    text-decoration: none;

    color: white;

}



/* Media Queries */



/* Tablets y pantallas pequeñas */

@media (max-width: 768px) {

    nav {

        flex-direction: column;

        align-items: center;

    }



    .container {

        padding: 1rem 0.5rem;

    }



    .footer-section {

        flex-direction: column;

    }



    .form-content {

        flex-direction: column;

        align-items: center;

    }



    .contact-form form {

        margin-right: 0;

    }

}



/* Móviles */

@media (max-width: 480px) {

    header {

        padding: 0.5rem 0;

        height: 30vh; /* Adjusted for smaller screens */

    }



    nav a {

        padding: 0.5rem;

    }



    .service {

        margin-bottom: 0.5rem;

    }



    .contact-form {

        padding: 1rem;

    }



    .cta-button {

        padding: 0.5rem;

    }



    section {

        margin: 1rem 0;

    }



    .container {

        padding: 1rem 0.5rem;

    }



    .footer-section {

        flex-direction: column;

    }

}