@import url('assets/css/reset.css');


.main-container {
    max-width: 1200px; /* Adjust container width */
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
}


body {
    font-family: 'Arial', sans-serif;
    background-color: #E2EDE3;
    color: #333;
    margin: 0;
    padding: 0;
}

header {
    background-color: #b4c3ba;
    color: #fff;
    padding: 10px;
    text-align: center;
}

/* Main Heading Styles (h1) */
h1 {
    font-size: 36px;
    color: #FFFFFF; /* Adjust the color as needed */

}

/* Section Styles */
section {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* Subheading Styles (h2) */
h2 {
    font-size: 24px;
    color: #6d956f; /* Adjust the color as needed */
    margin-bottom: 15px;
}

/* Input Styles */
input[type="text"],
input[type="password"],
textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    box-sizing: border-box;
}

/* Button Styles */
button {
    background-color: #6d956f;
    color: #fff;
    padding: 10px;
    margin: 5px 10px; /* Adjusted margin to provide space between buttons */
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

/* Link Styles */
a {
    color: #6d956f;
    text-decoration: none;
}

a:hover {
    color: #0056b3;
}

.container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for responsiveness */
    gap: 20px; /* Adjust gap between columns */
    justify-content: space-between;
}

/* Consolidated Card Styles */
.card {
    flex: 1;
    min-width: calc(50% - 10px);
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px; /* Slightly more rounded edges */
    padding: 20px;
    margin-bottom: 20px;
}

@media (min-width: 600px) {
    .card {
        width: calc(50% - 10px); /* Cards take half width with some margin in between */
    }
}

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
}

/* 2-column layout */
.two-column .flex-item {
    flex: 1 1 calc(48% - 20px); /* 48% width for 2 columns with gap */
}

/* 3-column layout */
.three-column .flex-item {
    flex: 1 1 calc(31.33% - 20px); /* 31.33% width for 3 columns with gap */
}


/* Logo and Navigation */
header .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #b4c3ba;
    padding: 10px 20px;
    color: white;
}

header .logo img {
    max-height: 50px;
}

header .menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

header .menu li {
    display: inline;
}

header .menu a {
    color: #4c5252;
    text-decoration: none;
    font-size: 16px;
}

header .menu a:hover {
    text-decoration: underline;
}

/* Banner Ad */
.banner-ad {
    text-align: center;
    margin: 20px 0;
}

.banner-ad img {
    max-width: 100%;
    height: auto;
}

/* Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

table th {
    background-color: #E2EDE3;
}

/* Responsive Cards */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.card.full-width {
    flex-basis: 100%;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .flex-container .flex-item {
        flex: 1 1 100%; /* Stack items on smaller screens */
    }
}