.container h1 {margin: 20px auto !important; text-align:center!important; margin-bottom:25px !important;}

.container {
    max-width: 960px;
    margin: auto;
    overflow: hidden;
    padding: 0 20px;
    background-color: #fff;
  margin-bottom:45px; margin-top:60px !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1, h2 {
    color: #333;
}

/* --- News Page Styling --- */
.article {
    display: flex; /* Use flexbox for side-by-side layout */
    margin-bottom: 30px;
    padding-bottom: 20px;
  line-height:1.8em !important;
    border-bottom: 1px solid #eee;
    background-color: #fff; /* Optional: background for each article */
    padding: 15px;          /* Optional: padding */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Optional: shadow */
}

.article-text {
    flex: 2; /* Allow text to take more space */
    padding-right: 20px; /* Space between text and image */
}
.article-text h2 {
    margin-top: 0;
    color: #0056b3;
}


.article-image {
    flex: 1; /* Allow image to take space */
    max-width: 350px; /* Max width for the image container */
  margin-top:23px;
}

.article-image img {
    max-width: 100%; /* Make image responsive within its container */
    height: auto;
    display: block; /* Remove extra space below image */
    border: 1px solid #ddd; /* Optional: border around image */
}

/* --- Dashboard Styling --- */
.dashboard-section {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.dashboard-section h2 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.dashboard-section label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.dashboard-section input[type="text"],
.dashboard-section textarea,
.dashboard-section input[type="file"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Include padding in width */
}

.dashboard-section textarea {
    height: 150px;
    resize: vertical;
}

.dashboard-section button {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-size: 1em;
}
.dashboard-section button:hover {
    background-color: #218838;
}


.delete-form {
    display: inline; /* Keep delete button next to title */
    margin-left: 15px;
}

.delete-form button {
    background-color: #dc3545;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
}
.delete-form button:hover {
    background-color: #c82333;
}

.article-list li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.article-list li:last-child {
    border-bottom: none;
}

.message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}


/* --- Responsive Styling (Mobile) --- */
@media (max-width: 768px) {
    .article {
        flex-direction: column; /* Stack items vertically */
    }

    .article-text {
        padding-right: 0; /* Remove right padding */
        margin-bottom: 15px; /* Add space below text */
    }

    .article-image {
        max-width: 100%; /* Allow image container to take full width */
        flex-basis: auto; /* Reset flex basis */
      margin-top:0px !important;
    }
    .article-image img {
        width: 100%; /* Ensure image itself uses full width */
    }

    .dashboard-section input[type="text"],
    .dashboard-section textarea,
    .dashboard-section input[type="file"] {
        width: 95%; /* Adjust for smaller screens if needed */
    }
 
}

@media (max-width: 1025px) { .container {margin:20px 20px 50px 20px !important}
}