/* Basic styling for QR Code Generator content */
.card { background-color: var(--card-bg); padding: 20px; border-radius: 8px; box-shadow: 0 0 10px var(--shadow-color); max-width: 400px; margin: 20px auto; }
.card h1 { text-align: center; color: var(--text-primary); margin-bottom: 20px; }
.card label { display: block; margin-bottom: 5px; font-weight: bold; color: var(--text-primary); }
.card input[type="url"] { width: calc(100% - 22px); padding: 10px; margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--input-bg); color: var(--text-primary); }
.card button { background-color: var(--accent-blue); color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; width: auto; display: block; margin: 0 auto; }
.card button:hover { background-color: var(--link-hover-color); }
.qr-code-container { text-align: center; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.qr-code-container img { max-width: 100%; height: auto; border: 1px solid var(--border-color); padding: 4px; background-color: var(--card-bg); margin-bottom: 10px; }
.error-message { color: red; background-color: #ffe0e0; border: 1px solid red; padding: 10px; margin-bottom: 15px; border-radius: 4px; text-align: center; }
.download-link { display: inline-block; margin-top: 10px; padding: 8px 12px; background-color: #28a745; color: white; text-decoration: none; border-radius: 4px; }
.download-link:hover { background-color: #218838; }

/* Basic styling for MD5 Converter content */
.md5-converter-container { background-color: var(--card-bg); padding: 20px; border-radius: 8px; box-shadow: 0 0 10px var(--shadow-color); max-width: 500px; margin: 20px auto; }
.md5-converter-container h1 { text-align: center; color: var(--text-primary); margin-bottom: 20px; }
.md5-converter-container textarea { width: calc(100% - 22px); padding: 10px; margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--input-bg); color: var(--text-primary); min-height: 100px; }
.md5-converter-container button { background-color: var(--accent-blue); color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; width: auto; display: block; margin: 0 auto; }
.md5-converter-container button:hover { background-color: var(--link-hover-color); }
.md5-result-container { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.md5-result-container h3 { color: var(--text-primary); }
.md5-result-container pre { background-color: var(--input-bg); padding: 10px; border-radius: 4px; white-space: pre-wrap; word-wrap: break-word; color: var(--text-primary); }

/* Basic styling for PPT to PDF Converter content */
.ppt-to-pdf-container { background-color: var(--card-bg); padding: 20px; border-radius: 8px; box-shadow: 0 0 10px var(--shadow-color); max-width: 500px; margin: 20px auto; }
.ppt-to-pdf-container h1 { text-align: center; color: var(--text-primary); margin-bottom: 20px; }
.ppt-to-pdf-container input[type="file"] { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--input-bg); color: var(--text-primary); }
.ppt-to-pdf-container button { background-color: var(--accent-blue); color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; width: auto; display: block; margin: 0 auto; }
.ppt-to-pdf-container button:hover { background-color: var(--link-hover-color); }
.ppt-to-pdf-container .status-message { margin-top: 15px; text-align: center; font-weight: bold; }
.ppt-to-pdf-container .download-link { display: inline-block; margin-top: 10px; padding: 8px 12px; background-color: #28a745; color: white; text-decoration: none; border-radius: 4px; }
.ppt-to-pdf-container .download-link:hover { background-color: #218838; }

/* Basic styling for PDF to PowerPoint Converter content */
.pdf-to-ppt-container { background-color: var(--card-bg); padding: 20px; border-radius: 8px; box-shadow: 0 0 10px var(--shadow-color); max-width: 500px; margin: 20px auto; }
.pdf-to-ppt-container h1 { text-align: center; color: var(--text-primary); margin-bottom: 20px; }
.pdf-to-ppt-container input[type="file"] { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--input-bg); color: var(--text-primary); }
.pdf-to-ppt-container button { background-color: var(--accent-blue); color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; width: auto; display: block; margin: 0 auto; }
.pdf-to-ppt-container button:hover { background-color: var(--link-hover-color); }
.pdf-to-ppt-container .status-message { margin-top: 15px; text-align: center; font-weight: bold; }
.pdf-to-ppt-container .download-link { display: inline-block; margin-top: 10px; padding: 8px 12px; background-color: #28a745; color: white; text-decoration: none; border-radius: 4px; }
.pdf-to-ppt-container .download-link:hover { background-color: #218838; }

/* Basic styling for Login/Register content */
.auth-container { background-color: var(--card-bg); padding: 20px; border-radius: 8px; box-shadow: 0 0 10px var(--shadow-color); max-width: 400px; margin: 20px auto; }
.auth-container h2 { text-align: center; color: var(--text-primary); margin-bottom: 20px; }
.auth-container .form-group { margin-bottom: 15px; }
.auth-container label { display: block; margin-bottom: 5px; font-weight: bold; color: var(--text-primary); }
.auth-container input[type="text"], .auth-container input[type="email"], .auth-container input[type="password"] { width: calc(100% - 22px); padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--input-bg); color: var(--text-primary); }
.auth-container button { background-color: var(--accent-blue); color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; width: 100%; }
.auth-container button:hover { background-color: var(--link-hover-color); }
.auth-container .alert { padding: 10px; margin-bottom: 15px; border-radius: 4px; }
.auth-container .alert-danger { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.auth-container .alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.auth-container .text-center { text-align: center; }
.auth-container .text-center a { color: var(--accent-blue); }

/* Basic styling for User Dashboard content */
.user-dashboard-section { padding: 50px 0; }
.user-dashboard-section h2 { color: var(--text-primary); }
.user-dashboard-section .lead { color: var(--text-secondary); }
.user-dashboard-section .img-thumbnail { border: 1px solid var(--border-color); }

/* Basic styling for Contact Us content */
.contact-section { padding: 50px 0; }
.contact-section h2 { color: var(--text-primary); }
.contact-section p { color: var(--text-secondary); }
.contact-section .form-group label { color: var(--text-primary); }
.contact-section .form-control { background-color: var(--input-bg); color: var(--text-primary); border: 1px solid var(--border-color); }
.contact-section .btn-primary { background-color: var(--accent-blue); border-color: var(--accent-blue); }
.contact-section .btn-primary:hover { background-color: var(--link-hover-color); border-color: var(--link-hover-color); }

/* Basic styling for About Us content */
.about-section { padding: 50px 0; }
.about-section h2 { color: var(--text-primary); }
.about-section p { color: var(--text-secondary); }

/* Basic styling for Disclaimer content */
.disclaimer-section { padding: 50px 0; }
.disclaimer-section h2 { color: var(--text-primary); }
.disclaimer-section p { color: var(--text-secondary); }

/* Basic styling for Blog content */
.blog-section { padding: 50px 0; }
.blog-section h2 { color: var(--text-primary); }
.blog-section .card { background-color: var(--card-bg); border: 1px solid var(--border-color); }
.blog-section .card-title a { color: var(--text-primary); }
.blog-section .card-text { color: var(--text-secondary); }
.blog-section .btn-primary { background-color: var(--accent-blue); border-color: var(--accent-blue); }
.blog-section .btn-primary:hover { background-color: var(--link-hover-color); border-color: var(--link-hover-color); }

/* Basic styling for Single Post content */
.single-post-section { padding: 50px 0; }
.single-post-section h1 { color: var(--text-primary); }
.single-post-section .post-meta { color: var(--text-secondary); }
.single-post-section .post-content { color: var(--text-primary); }
.single-post-section .featured-image { max-width: 100%; height: auto; }

/* Basic styling for Services content */
.services-section { padding: 50px 0; }
.services-section h2 { color: var(--text-primary); }
.services-section .service-card { background-color: var(--card-bg); border: 1px solid var(--border-color); padding: 20px; border-radius: 8px; text-align: center; }
.services-section .service-card i { font-size: 40px; color: var(--accent-blue); margin-bottom: 15px; }
.services-section .service-card h3 { color: var(--text-primary); }
.services-section .service-card p { color: var(--text-secondary); }
.subtitle-style {
    font-size: 1.5rem; /* Adjust size as needed */
    font-weight: 400; /* Lighter than the main title */
    color: var(--text-secondary); /* Use a secondary, less prominent color */
    margin-top: 0.5rem; /* Space below the main title */
    margin-bottom: 1.5rem; /* Space before the content below */
}
/* Add this to your existing CSS file, e.g., custom.css */

.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it's on top of everything */
}

.loader {
    width: 100px; /* Adjust size as needed */
    height: 100px; /* Adjust size as needed */
}
/* Add this to your existing CSS file, e.g., custom.css */

.status-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

.status-message.success {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green */
    border: 1px solid #c3e6cb;
}

.status-message.error {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red */
    border: 1px solid #f5c6cb;
}
/* Add this to your existing CSS file, e.g., custom.css */

.download-link {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #28a745; /* Green color for success/download */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}

.download-link:hover {
    background-color: #218838; /* Darker green on hover */
    color: white;
    text-decoration: none;
}
/* Add this to your existing CSS file, e.g., custom.css */

.file-upload-form {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--shadow-color);
    max-width: 600px;
    margin: 40px auto;
}

.file-upload-form h1 {
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 25px;
}

.file-upload-form .form-group {
    margin-bottom: 20px;
}

.file-upload-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-primary);
}

.file-upload-form input[type="file"] {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--input-bg);
    color: var(--text-primary);
}

/* Custom file input styling (optional but recommended) */
.file-upload-form input[type="file"]::file-selector-button {
    background-color: var(--accent-blue);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.file-upload-form input[type="file"]::file-selector-button:hover {
    background-color: var(--link-hover-color);
}

.file-upload-form button[type="submit"] {
    background-color: var(--accent-blue);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    transition: background-color 0.3s;
}

.file-upload-form button[type="submit"]:hover {
    background-color: var(--link-hover-color);
}

.file-upload-form button[type="submit"]:disabled {
    background-color: #555;
    cursor: not-allowed;
}
/* Add this to your existing CSS file, e.g., custom.css */

.progress-container {
    width: 100%;
    background-color: var(--input-bg);
    border-radius: 5px;
    margin-top: 20px;
    display: none; /* Hidden by default */
}

.progress-bar {
    width: 0%;
    height: 20px;
    background-color: #4caf50; /* Green progress bar */
    border-radius: 5px;
    text-align: center;
    line-height: 20px;
    color: white;
    font-weight: bold;
}
/* Add this to your existing CSS file, e.g., custom.css */

.status-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    display: none; /* Hidden by default */
}

.status-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-message .download-link {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #28a745;
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

.status-message .download-link:hover {
    background-color: #218838;
}
/* Add this to your existing CSS file, e.g., custom.css */

.back-to-tool-link {
    display: inline-block;
    margin-top: 20px;
    text-align: center;
    width: 100%;
}

.back-to-tool-link a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: bold;
}

.back-to-tool-link a:hover {
    text-decoration: underline;
}
/* Add this to your existing CSS file, e.g., custom.css */

.page-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px;
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--shadow-color);
}

.page-container h1, .page-container h2, .page-container h3 {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.page-container p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 15px;
}

.page-container ul {
    color: var(--text-secondary);
    padding-left: 20px;
    margin-bottom: 15px;
}

.page-container ul li {
    margin-bottom: 10px;
}

.page-container a {
    color: var(--accent-blue);
}

.page-container a:hover {
    text-decoration: underline;
}
/* Add this to your existing CSS file, e.g., custom.css */

.contact-form-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--shadow-color);
}

.contact-form-container h1 {
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 25px;
}

.contact-form-container .form-group {
    margin-bottom: 20px;
}

.contact-form-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-primary);
}

.contact-form-container .form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

.contact-form-container textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.contact-form-container button[type="submit"] {
    background-color: var(--accent-blue);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    transition: background-color 0.3s;
}

.contact-form-container button[type="submit"]:hover {
    background-color: var(--link-hover-color);
}

.contact-form-container .alert {
    margin-top: 20px;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
}

.contact-form-container .alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.contact-form-container .alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
/* Add this to your existing CSS file, e.g., custom.css */

.blog-container {
    max-width: 900px;
    margin: 40px auto;
}

.blog-post-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 30px;
    overflow: hidden; /* To contain the image */
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s;
}

.blog-post-card:hover {
    box-shadow: 0 8px 20px var(--shadow-color);
}

.blog-post-card .post-image {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    object-fit: cover; /* Cover the area, might crop */
}

.blog-post-card .post-content {
    padding: 25px;
}

.blog-post-card .post-title {
    margin-top: 0;
    margin-bottom: 15px;
}

.blog-post-card .post-title a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 600;
}

.blog-post-card .post-title a:hover {
    color: var(--accent-blue);
}

.blog-post-card .post-meta {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.blog-post-card .post-excerpt {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.blog-post-card .read-more-btn {
    display: inline-block;
    background-color: var(--accent-blue);
    color: white;
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s;
}

.blog-post-card .read-more-btn:hover {
    background-color: var(--link-hover-color);
    color: white;
}
/* Add this to your existing CSS file, e.g., custom.css */

.single-post-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px;
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--shadow-color);
}

.single-post-container .post-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 15px;
}

.single-post-container .post-meta {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.single-post-container .featured-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 25px;
}

.single-post-container .post-content {
    color: var(--text-primary);
    line-height: 1.8;
    font-size: 1.1rem;
}

/* Styling for elements within the post content */
.single-post-container .post-content h2,
.single-post-container .post-content h3 {
    color: var(--text-primary);
    margin-top: 30px;
    margin-bottom: 15px;
}

.single-post-container .post-content p {
    margin-bottom: 20px;
}

.single-post-container .post-content a {
    color: var(--accent-blue);
    text-decoration: underline;
}

.single-post-container .post-content blockquote {
    border-left: 4px solid var(--accent-blue);
    padding-left: 20px;
    margin: 20px 0;
    font-style: italic;
    color: var(--text-secondary);
}

.single-post-container .post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 15px 0;
}
/* Add this to your existing CSS file, e.g., custom.css */

.auth-container {
    max-width: 450px;
    margin: 50px auto;
    padding: 30px;
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--shadow-color);
}

.auth-container h2 {
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 25px;
    font-weight: 600;
}

.auth-container .form-group {
    margin-bottom: 20px;
}

.auth-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-primary);
}

.auth-container .form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    box-sizing: border-box;
    font-size: 1rem;
}

.auth-container .btn-primary {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    font-weight: 500;
    background-color: var(--accent-blue);
    border: none;
    transition: background-color 0.3s;
}

.auth-container .btn-primary:hover {
    background-color: var(--link-hover-color);
}

.auth-container .alert {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
}

.auth-container .alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.auth-container .alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.auth-container .text-center {
    text-align: center;
    margin-top: 20px;
    color: var(--text-secondary);
}

.auth-container .text-center a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 500;
}

.auth-container .text-center a:hover {
    text-decoration: underline;
}
/* Add this to your existing CSS file, e.g., custom.css */

.dashboard-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 30px;
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--shadow-color);
}

.dashboard-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-header h2 {
    color: var(--text-primary);
    margin-top: 0;
}

.dashboard-header .lead {
    color: var(--text-secondary);
}

.profile-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent-blue);
    margin-top: 15px;
}

.dashboard-content p {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.dashboard-content .btn {
    margin-top: 20px;
}
/* Add this to your existing CSS file, e.g., custom.css */

.registration-success-container {
    max-width: 600px;
    margin: 50px auto;
    padding: 40px;
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--shadow-color);
    text-align: center;
}

.registration-success-container h1 {
    color: #28a745; /* Green for success */
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.registration-success-container p {
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.registration-success-container .btn-primary {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    padding: 12px 25px;
    font-size: 1.1rem;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.registration-success-container .btn-primary:hover {
    background-color: var(--link-hover-color);
    border-color: var(--link-hover-color);
}
/* Add this to your existing CSS file, e.g., custom.css */

.services-page-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
}

.services-page-container h1 {
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 40px;
}

.service-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%; /* Ensure cards in a row have the same height */
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px var(--shadow-color);
}

.service-card .service-icon {
    font-size: 3rem;
    color: var(--accent-blue);
    margin-bottom: 20px;
}

.service-card .service-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 15px;
}

.service-card .service-description {
    color: var(--text-secondary);
    line-height: 1.6;
}