body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #774508;
        }
		
		a {
			/*color: #213f23; este color era muy oscuro, queda por las dudas */
			color: #31B03A;
		}
        header {
            background-color: #213f23;
            color: white;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
		.header-image {
			width: 100%;
			overflow: hidden;
			display: flex;
			justify-content: center;
		}

		.header-image img {
			display: block;
			max-width: 100%;
			height: auto;
		}
        .logo {
            font-size: 1.5em;
            font-weight: bold;
        }
        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }
        nav ul li {
            position: relative;
        }
        nav ul li a {
            color: white;
            text-decoration: none;
            padding: 15px 20px;
            display: block;
            transition: background-color 0.3s;
        }
        nav ul li:hover {
            background-color: #5a3207;
        }
        nav ul li:hover > a {
            background-color: #5a3207;
        }
        nav ul li:hover .submenu {
            display: block;
        }
        .submenu {
            display: none;
            position: absolute;
            background-color: #784509;
            list-style: none;
            padding: 10px;
            margin: 0;
            top: 100%;
            left: 0;
            min-width: 150px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }
        .submenu li {
            margin: 5px 0;
        }
        .submenu li a {
            color: white;
            text-decoration: none;
            display: block;
            padding: 8px 15px;
            font-size: 0.9em;
        }
        .submenu li a:hover {
            background-color: #5a3207;
        }
        .container {
            text-align: center;
            padding: 50px;
        }
        .content {
            background: white;
            padding: 20px;
            max-width: 800px;
            margin: auto;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
        .btn {
            display: inline-block;
            margin-top: 15px;
            padding: 8px 16px;
            background-color: #213f23;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            font-size: 0.9em;
        }
        .btn:hover {
            background-color: #213f23;
        }
        .three-columns {
            display: flex;
            justify-content: space-around;
            margin-top: 40px;
            flex-wrap: wrap;
            gap: 20px;
        }
        .column {
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 28%;
            min-width: 250px;
            border-radius: 5px;
            text-align: center;
            height: 250px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .column h3 {
            font-size: 1.2em;
            margin-bottom: 15px;
        }
        .column p {
            font-size: 0.9em;
            color: #555;
        }
        footer {
            background-color: #213f23;
            color: white;
            text-align: center;
            padding: 10px;
            margin-top: 40px;
            font-size: 0.8em;
        }
		
/* Media Queries for Responsiveness */

/* Mobile Styles (up to 767px) */
@media (max-width: 767px) {
    header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    nav ul {
        flex-direction: column;
        text-align: center;
    }

    nav ul li {
        width: 100%;
    }

    .container {
        padding: 20px;
    }

    .three-columns {
        flex-direction: column;
    }

    .column {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* Tablet Styles (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .three-columns {
        flex-wrap: wrap;
    }

    .column {
        width: 48%;
        margin-bottom: 20px;
    }
}