/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* General Body & Background */
body {
    background-color: #0d1117; /* Deeper dark background */
    color: #c9d1d9; /* Softer white for text */
    font-family: 'Inter', sans-serif; /* Modern sans-serif */
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.light-theme {
    background-color: #f8f9fa; /* Light background */
    color: #343a40; /* Darker text */
}

/* Anek Bangla for specific content */
.bangla-text {
    font-family: 'Anek Bangla', sans-serif;
    font-weight: 300; /* Default for body text */
}
.bangla-text strong, .bangla-text h1, .bangla-text h2 {
    font-weight: 700; /* Bolder for headings and strong tags */
}
.bangla-text .sub-heading {
    font-weight: 400; /* Slightly less bold for sub-heading */
}

/* Navbar */
.navbar {
    background-color: #161b22; /* Slightly darker than body */
    border-bottom: 1px solid #30363d; /* Subtle border */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3); /* More pronounced shadow for depth */
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1030; /* Ensure navbar stays on top */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
body.light-theme .navbar {
    background-color: #ffffff;
    border-bottom-color: #e9ecef;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.navbar-brand {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    color: #58a6ff !important; /* Accent color for brand (GitHub blue) */
    letter-spacing: 1.2px; /* Slight spacing for premium feel */
    font-size: 1.75rem;
    display: flex;
    align-items: center;
}
.navbar-brand img {
    height: 3.5rem; /* Adjust logo size */
    margin-right: 10px;
    border-radius: 50%;
}
body.light-theme .navbar-brand {
    color: #0056b3 !important;
}

/* Search Input (General form control styling) */
.form-control {
    background-color: #21262d; /* Darker input background */
    color: #c9d1d9;
    border: 1px solid #30363d;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.3s ease, color 0.3s ease;
    padding: 0.6rem 0.9rem;
}
body.light-theme .form-control {
    background-color: #ffffff;
    color: #495057;
    border-color: #ced4da;
}
.form-control::placeholder {
    color: #8b949e; /* Lighter placeholder */
}
body.light-theme .form-control::placeholder {
    color: #6c757d;
}
.form-control:focus {
    background-color: #21262d;
    color: #c9d1d9;
    border-color: #58a6ff; /* Accent color on focus */
    box-shadow: 0 0 0 0.25rem rgba(88, 166, 255, 0.25); /* Subtle glow */
}
body.light-theme .form-control:focus {
    background-color: #fff;
    border-color: #007bff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.2);
}
.input-group-text {
    background-color: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
body.light-theme .input-group-text {
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #495057;
}

/* Dropdown Button */
.btn-secondary {
    background-color: #30363d; /* Darker secondary button */
    border-color: #30363d;
    transition: all 0.2s ease-in-out;
    color: #c9d1d9;
}
body.light-theme .btn-secondary {
    background-color: #e9ecef;
    border-color: #e9ecef;
    color: #495057;
}
.btn-secondary:hover {
    background-color: #444c56; /* Slightly lighter on hover */
    border-color: #444c56;
    transform: translateY(-1px);
}
body.light-theme .btn-secondary:hover {
    background-color: #dee2e6;
    border-color: #dee2e6;
}
.dropdown-menu-dark {
    background-color: #21262d; /* Darker dropdown background */
    border: 1px solid #30363d;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
body.light-theme .dropdown-menu-dark {
    background-color: #ffffff;
    border-color: #e0e0e0;
}
.dropdown-item {
    color: #c9d1d9;
    padding: 0.6rem 1rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}
body.light-theme .dropdown-item {
    color: #343a40;
}
.dropdown-item:hover {
    background-color: #30363d; /* Darker hover for dropdown items */
    color: #58a6ff; /* Accent color on hover */
}
body.light-theme .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #007bff;
}

/* Footer */
footer {
    background: linear-gradient(135deg, #161b22 0%, #21262d 100%); /* Cool gradient background */
    padding: 35px 0;
    border-top: 2px solid #58a6ff;
    color: #c9d1d9;
    position: relative;
    overflow: hidden;
    margin-top: 50px !important; /* More space from content */
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease, border-top-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
body.light-theme footer {
    background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
    border-top-color: #007bff;
    color: #343a40;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
}
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #58a6ff, transparent);
    transition: background 0.3s ease;
}
body.light-theme footer::before {
    background: linear-gradient(90deg, transparent, #007bff, transparent);
}
footer a {
    color: #58a6ff; /* Accent color for links */
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}
body.light-theme footer a {
    color: #007bff;
}
footer a:hover {
    color: #79c0ff;
    text-shadow: 0 0 10px rgba(88, 166, 255, 0.5);
}
body.light-theme footer a:hover {
    color: #0056b3;
    text-shadow: none;
}
.social-buttons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 25px;
}
.social-button {
    border-radius: 50%; /* Circular buttons */
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: white !important;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 2px solid transparent;
}
.social-button:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}
.facebook-btn {
    background: linear-gradient(135deg, #1877F2, #166fe5);
}
.facebook-btn:hover {
    background: linear-gradient(135deg, #166fe5, #1465d6);
}
.whatsapp-btn {
    background: linear-gradient(135deg, #25D366, #128C7E);
}
.whatsapp-btn:hover {
    background: linear-gradient(135deg, #128C7E, #075E54);
}
.telegram-btn {
    background: linear-gradient(135deg, #26A5E4, #229edc);
}
.telegram-btn:hover {
    background: linear-gradient(135deg, #229edc, #1e8bc3);
}
.youtube-btn {
    background: linear-gradient(135deg, #FF0000, #cc0000);
}
.youtube-btn:hover {
    background: linear-gradient(135deg, #cc0000, #990000);
}
footer p {
    margin-bottom: 12px;
    font-size: 0.70rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
body.light-theme footer p {
    text-shadow: none;
}

/* Theme Switch */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    margin-left: 15px;
}
.theme-switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 48px;
}
.theme-switch input {
    display: none;
}
.slider {
    background-color: #30363d;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border-radius: 34px;
}
body.light-theme .slider {
    background-color: #ccc;
}
.slider:before {
    background-color: #c9d1d9;
    bottom: 4px;
    content: "";
    height: 16px;
    left: 4px;
    position: absolute;
    width: 16px;
    transition: .4s;
    border-radius: 50%;
}
body.light-theme .slider:before {
    background-color: #fff;
}
input:checked + .slider {
    background-color: #58a6ff;
}
body.light-theme input:checked + .slider {
    background-color: #007bff;
}
input:checked + .slider:before {
    transform: translateX(24px);
}
.theme-switch-wrapper .form-check-label {
    margin-left: 10px;
    color: #c9d1d9;
    font-size: 0.9rem;
}
body.light-theme .theme-switch-wrapper .form-check-label {
    color: #343a40;
}

/* Content Section (General styling for main content blocks) */
.content-section {
    background-color: #161b22;
    border: 1px solid #30363d;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.content-section h2 {
    color: #58a6ff; /* Accent color for headings */
    font-family: 'Anek Bangla', sans-serif;
    font-weight: 700;
    margin-bottom: 15px;
}
.content-section p, .content-section ul li, .content-section table {
    color: #c9d1d9;
    font-family: 'Anek Bangla', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    font-weight: 300; /* Default for body text */
}
.content-section ul {
    list-style: none; /* Remove default bullet points */
    padding-left: 0;
}
.content-section ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px; /* Space for custom bullet */
}
.content-section ul li::before {
    content: '•'; /* Custom bullet point */
    color: #fecc4c; /* Accent color for bullet */
    position: absolute;
    left: 0;
    font-size: 1.2em;
    line-height: 1;
}
.code-block {
    background-color: #0d1117;
    color: #79c0ff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #30363d;
    font-family: 'Fira Code', monospace;
    font-size: 0.95rem;
    white-space: pre-wrap;
    word-break: break-all;
    margin-top: 15px;
    margin-bottom: 20px;
}
.image-placeholder {
    background-color: #21262d;
    color: #8b949e;
    border: 1px dashed #30363d;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    font-style: italic;
}
.section-divider {
    border-top: 1px solid #30363d;
    margin: 40px 0;
}
.main-heading {
    color: #fecc4c; /* Yellow accent for main heading */
    font-family: 'Anek Bangla', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 10px;
}
.sub-heading {
    color: #c9d1d9;
    font-family: 'Anek Bangla', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 30px;
}
.final-message {
    color: #3fb950; /* Green for success message */
    font-family: 'Anek Bangla', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    text-align: center;
    margin-top: 40px;
}
.tip-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.tip-table th, .tip-table td {
    border: 1px solid #30363d;
    padding: 12px 15px;
    text-align: left;
}
.tip-table th {
    background-color: #21262d;
    color: #58a6ff;
    font-weight: 700;
}
.tip-table td {
    background-color: #0d1117;
    color: #c9d1d9;
}
.tip-table tr:nth-child(even) td {
    background-color: #161b22;
}
.author-info {
    text-align: right;
    margin-top: 30px;
    font-size: 0.95rem;
    color: #8b949e;
}
.author-info span {
    color: #c9d1d9;
    font-weight: 400;
}
.important-note {
    color: #fecc4c; /* Yellow accent for important notes */
    font-weight: 700;
}
.download-button-container {
    text-align: center;
    margin: 30px 0;
}
.download-button {
    background-color: #fecc4c; /* Accent color */
    border-color: #fcfcfc;
    color: #0d1117; /* Dark text on accent */
    padding: 12px 25px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    display: inline-block; /* Allows margin and padding */
}
.download-button:hover {
    background-color: #79c0ff; /* Slightly lighter accent on hover */
    border-color: #79c0ff;
    transform: translateY(-2px); /* Subtle lift */
    box-shadow: 0 4px 10px rgba(88, 166, 255, 0.3);
    color: #0d1117; /* Ensure text remains dark on hover */
}
/* --- 404 Page Specific Styles --- */
.error-container {
    min-height: calc(100vh - 200px); /* Adjust based on navbar/footer height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 50px 20px;
}
.error-code {
    font-size: 10rem; /* Large 404 number */
    font-weight: 700;
    color: #fecc4c; /* Yellow accent */
    text-shadow: 0 0 20px rgba(254, 204, 76, 0.5); /* Glowing effect */
    animation: pulse 2s infinite alternate; /* Subtle animation */
    line-height: 1;
    margin-bottom: 20px;
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.05); opacity: 0.8; }
}
.error-message {
    font-size: 2.5rem;
    font-weight: 700;
    color: #58a6ff; /* Blue accent */
    margin-bottom: 20px;
    font-family: 'Anek Bangla', sans-serif; /* Apply Bangla font */
}
.error-description {
    font-size: 1.2rem;
    color: #c9d1d9;
    margin-bottom: 40px;
    max-width: 600px;
    font-family: 'Anek Bangla', sans-serif; /* Apply Bangla font */
}
.home-button {
    background-color: #3fb950; /* Green accent for button */
    border-color: #3fb950;
    color: #0d1117;
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.home-button:hover {
    background-color: #2ea043;
    border-color: #2ea043;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    color: #0d1117;
}