/* Combined CSS for cdve.org */


/* General Styles */
body { 
    font-family: Verdana, Georgia, Arial, sans-serif;
	margin: 0;
font-size: 11px;
}

/* Header styles just to make sure that the heading style can be applied properly*/
header {
    background-color: white;
    color: white;
    padding: 0;
    text-align: center;
}
h1, h2, h3, h4, h5, h6 {
    color: #8C0044; /* Set a global text color for headers */
    margin: 10px 0; /* Set global margin for headers */
}

.banner img {
    width: 100%;
    height: auto;
    max-width: 900px; /* Limit width on large screens */
    display: block;
    margin: 0 auto;
}

.nav-buttons {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}

.nav-buttons button {
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 11px;
    font-weight:light;
    color: #8C0044;
}

.mobile-menu {
    display: none; /* Hidden by default, shown on small screens */
    text-align: center;
    padding: 10px;
    background-color: #f8f8f8;
}

.mobile-menu img {
    width: 50px;
    height: auto;
}

.content {
    padding: 20px;
    margin: 0 auto;
    text-align: justify;
}

.content h1 {
    color: #8C0044;
    font-size: 20px;
    text-align: center;
}

.content h2 {
    color: #8C0044;
    font-size: 16px;
}

.content p {
    font-size: 12px;

}

/* Logo Section Styles */
.logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    background-color: #f8f8f8;
    gap: 20px; /* Add gap between logos */
}
		.logos h2 {
    	color: #8C0044;
    	font-size: 16px;
		}
.logo-container {
    text-align: center;
    flex: 1 1 calc(20% - 20px); /* Adjust the percentage to control logos per row */
    box-sizing: border-box;
}

.logo-container img {
    max-width: 100%;
    max-height: 100px; /* Limit height of logos */
    height: auto;
    display: block;
    margin: 0 auto;
}

.logo-container p {
    margin-top: 10px;
    font-size: 12px; /* Adjust font size as needed */
}

/* Contact Section */
.contact {
    text-align: center;
    padding: 12px;
    background-color: #8C0044;
    color: #fff;
    font-size: 10px;
}

/* Media Queries for Responsive Design */
@media (max-width: 767px) {
    .nav-buttons {
        display: none; /* Hide navigation buttons on small screens */
    }

    .mobile-menu {
        display: block; /* Show mobile menu on small screens */
    }

    .logos {
        flex-direction: column;
        align-items: center;
    }

    .logo-container {
        margin-bottom: 10px; /* Add margin between logos in column layout */
        flex: 1 1 100%; /* Make logos take full width on small screens */
    }
}