/* Set the body background to black in dark mode */
html[data-bs-theme="dark"] body {
    background-color: #000000;
    color: #ffffff;
    /* Text color to make sure it contrasts with the black background */
}

.nav-item {
    font-size: 17px;
    font-weight: 600;
}

.navbar-brand {
    font-size: 24px;
}

.header-menu {
    background-color: rgba(0, 0, 0, 0.07);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: backdrop-filter 0.1s ease-in-out;
    box-shadow: none;
}

html[data-bs-theme="dark"] .header-menu {
    background-color: rgba(255, 255, 255, 0.07);
    /* Darker background with higher opacity in dark mode */
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    border-radius: 10px;
    padding: 0;
}

.nav-container {
    border-radius: 10px;
    padding: 20px;
}

.blog-container {
    background-color: rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    padding: 20px;
}

html[data-bs-theme="dark"] .blog-container {
    background-color: rgba(255, 255, 255, 0.07);
}

.blog-container a {
    text-decoration: none;
    color: inherit;
    border-bottom: 2px solid transparent;
    /* Initially transparent */
}

.blog-container a:hover {
    color: inherit;
    /* Keep the text color unchanged */
    border-bottom-color: #6c757d;
    /* Bootstrap's secondary color (gray) */
}

.blog-title {
    font-size: 18px;
    font-weight: 600;
}

.blog-badge {
    border-radius: 4px;
    background-color: rgba(5, 5, 5, 0.2);
    font-size: 12px;
    color: #161616;
}

html[data-bs-theme="dark"] .blog-badge {
    color: #e9e9e9;
    background-color: rgba(255, 255, 255, 0.2);
}

.section-title {
    font-size: 25px;
    text-decoration: underline;
    text-decoration-color: #6c757d;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;

}


.footer-links {
    text-decoration: none;
    padding: 6px;
    font-size: 20px;
}

@media only screen and ((min-width: 1400px)) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 880px;
    }

}

@media only screen and ((max-width: 760px)) {
    .sm-padding {
        padding-left: .5rem;
        padding-right: .5rem;
    }
}

@media only screen and ((max-width: 1000px)) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 880px;
    }
}

#modeIcon {
    cursor: pointer;
    display: flex;
    font-size: 21px;
    height: 45px;
    width: 45px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

#modeIcon:hover {
    background-color: rgb(78, 77, 77, 0.2);
}

p {
    margin-top: 0;
    margin-bottom: 5px;
}


/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/


.footer-item:hover {
    background-color: #7472725d;
    border-radius: 4px;
    width: 38px;
    height: 38px;
}

.topcorner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: -1;
}

.list-group-item:hover {
    color: var(--bs-nav-pills-link-active-color);
    background-color: rgba(217, 0, 255, 0.122);
}

/* Remove default bullet points */
.feature-list {
    list-style-type: none;
    padding-left: 0;
    line-height: 1.2
}

/* Add custom icons before each list item */
.feature-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
}

/* Add Font Awesome rocket icon before each item */
.feature-list li::before {
    content: '\f0a9';
    position: absolute;
    left: 0;
    top: 60%;
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 16px;
    color: rgba(56, 56, 56, 0.5);
}

html[data-bs-theme="dark"] .feature-list li::before {
    color: rgba(255, 255, 255, 0.5);
    /* Text color to make sure it contrasts with the black background */
}

/* Custom link button styling */
.custom-link-btn {
    display: inline-block;
    margin-right: 10px;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border-radius: 4px;
    background-color: rgba(5, 5, 5, 0.2);
    color: #161616;
}

html[data-bs-theme="dark"] .custom-link-btn {
    color: #e9e9e9;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Hover effect for the link */
.custom-link-btn:hover {
    background-color: rgba(5, 5, 5, 0.3);
    text-decoration: none;
}

/* Styling for the icon */
.custom-link-btn i {
    margin-right: 5px;
}

/* Optional: Add some spacing between the two buttons */
.custom-link-btn+.custom-link-btn {
    margin-left: 10px;
}

.newsletter-container {
    background-color: rgba(196, 196, 196, 0.1);
    border-radius: 10px;
    padding: 20px;
    border: rgba(196, 196, 196, 0.5) 1px solid;
}

html[data-bs-theme="dark"] .newsletter-container {
    background-color: rgba(61, 61, 61, 0.1);
    border: rgba(61, 61, 61, 0.5) 1px solid;
}

.newsletter-container a {
    text-decoration: none;
    color: inherit;
    border-bottom: 2px solid transparent;
}

.newsletter-container a:hover {
    color: inherit;
    border-bottom-color: #6c757d;
}

.icon-container {
    width: 80px;
    height: 70px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.07);
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

html[data-bs-theme="dark"] .icon-container {
    background-color: rgba(255, 255, 255, 0.07);
}

.icon-container a i {
    font-size: 25px;
}

.form-control {
    background-color: rgba(255, 255, 255, 1);
    opacity: 1;
}


html[data-bs-theme="dark"] .form-control {
    background-color: #000000;
}

.form-control:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #1a1a1a;
    box-shadow: none
}

html[data-bs-theme="dark"] .form-control:focus {
    border-color: #eceaea;
}

.btn-outline-secondary:hover {
    background-color: rgba(5, 5, 5, 0.2);
}

html[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

small {
    font-size: 13px;
}

.search-blog-container {
    background-color: rgba(196, 196, 196, 0.1);
    border-radius: 10px;
    padding: 14px;
    border: rgba(196, 196, 196, 0.2) 1px solid;
}

html[data-bs-theme="dark"] .search-blog-container {
    background-color: rgba(61, 61, 61, 0.1);
    border: rgba(61, 61, 61, 0.5) 1px solid;
}


.experience-container {
    background-color: rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    padding: 20px;
}

html[data-bs-theme="dark"] .experience-container {
    background-color: rgba(255, 255, 255, 0.07);
}

.no-bullets {
    list-style-type: none;
}

.indent-left {
    margin-left: -20px;
}

.contact-info-container {
    background-color: rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    padding: 20px;
}

html[data-bs-theme="dark"] .contact-info-container {
    background-color: rgba(255, 255, 255, 0.07);
}
pre {
    display: block;
    white-space: nowrap;
    /* Prevent line wrapping */
    overflow-x: auto;
    /* Enable horizontal scroll */
    max-width: 100%;
    /* Prevent overflow beyond container */
}

/* Custom styling for code blocks */
pre code {
    display: inline;
    /* Prevent block-level display in code */
    color: #000000;
    /* Text color */
    font-size: 16px;
    line-height: 1.5;
    font-family: 'Courier New', Courier, monospace;
    /* Monospaced font */
    white-space: pre;
    border-radius: 6px;
}
code[class*=language-],
pre[class*=language-] {
    border-radius: 6px;
}
pre {
    position: relative;
}

html[data-bs-theme="dark"] pre code {
    color: #ffffff;
}


/* Highlight syntax keywords (optional) */

.keyword {
    color: #c678dd;
    /* Purple color for keywords */
    font-weight: bold;
    text-shadow: 0 !important;
}

.function {
    color: #ffb700;
    font-weight: bold;
    /* Light blue color for functions */
}

.string {
    color: #98c379;
    font-weight: bold;
    /* Green color for strings */
}

.comment {
    color: #34912e;
    font-weight: bold;
    /* Gray color for comments */
}

.variable {
    color: #e06c75;
    font-weight: bold;
    /* Red color for variables */
}

.advance {
    color: #973000;
    font-weight: bold;
    /* Red color for variables */
}

.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #757575;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    z-index: 10;
}

.copy-btn:hover {
    background-color: #908e8e;
}

.access {
    color: rgb(13, 152, 232);
    font-weight: bold;
}

/* .calendar {
    background-color: #1e1e1e;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
} */

.calendar {
    background-color: rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    padding: 20px;
}

html[data-bs-theme="dark"] .calendar {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.calendar-header button {
    background-color: rgba(0, 0, 0, .1);
    border: none;
    color: black;
    font-size: 18px;
    cursor: pointer;
    height: 56px;
    width: 56px;
    border-radius: 6px;
}

html[data-bs-theme="dark"] .calendar-header button {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.calendar-header button:hover {
    color: #585858;
    background-color: rgba(0, 0, 0, 0.2);
}

html[data-bs-theme="dark"] .calendar-header button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.calendar-header h3 {
    margin: 0;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.day {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #b0b0b0;
    border-radius: 5px;
    cursor: pointer;
    color: #000000;
    font-weight: 700;
}

html[data-bs-theme="dark"] .day {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.day:hover {
    background-color: #3a3a3adb;
    color: #fff;
}
html[data-bs-theme="dark"] .day:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.day.selected {
    background-color: #3a3a3a;
    color: #fff;
    font-weight: bold;
}
html[data-bs-theme="dark"] .day.selected {
    background-color: rgba(255, 255, 255, 0.5);
}

.day.inactive {
    color: #555555;
    cursor: default;
    font-weight: 500;
}

html[data-bs-theme="dark"] .day.inactive {
    color: #555555;
}

.day-header {
    text-align: center;
    font-weight: bold;
    color: #030303;
}

html[data-bs-theme="dark"] .day-header {
    color: #ffffff;
}

#selectedDate {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.time-selector {
    margin-top: 20px;
    text-align: center;
}

.time-selector button {
    margin: 5px;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #b0b0b0;
    color: #000;
    cursor: pointer;
    font-weight: 700;
}

html[data-bs-theme="dark"] .time-selector button {
    background-color: #2b2b2b;
    color: #ffffff;
}

.time-selector button:hover {
    background-color: #3a3a3a;
    color: #ffffff;
}

html[data-bs-theme="dark"] .time-selector button:hover {
    background-color: #2b2b2b;
    color: #ffffff;
}

.time-selector button.selected {
    background-color: #3a3a3a;
    color: #fff;
    font-weight: bold;
}

html[data-bs-theme="dark"] .time-selector button.selected {
    background-color: #626161;
}

.highlight {
    background-color: rgba(255, 230, 0, 0.521);
    font-weight: bold;
    padding: 4px;
    border-radius: 6px;
}

html[data-bs-theme="dark"] .highlight {
    background-color: rgba(255, 230, 0, 0.2);
}

.hero-icon-bar {
    display: flex;
    height: 130px;
    width: 130px;
    font-size: 80px;
    background-color: rgba(0, 0, 0, 0.07);
    border-radius: 6px;
    align-items: center;
    justify-content: center;
}

html[data-bs-theme="dark"] .hero-icon-bar {
    background-color: rgba(255, 255, 255, 0.07);
}

.text-right {
    text-align: right;
    padding-right: 0;
}

/* Light Mode */
html[data-bs-theme="light"] .blog-detail-container {
    color: #212529;
}


/* Dark Mode */
html[data-bs-theme="dark"] .blog-detail-container {
    color: #f1f1f1;
}

html[data-bs-theme="dark"] .blog-detail-container pre {
    background-color: #333333;
    /* Code block background for dark mode */
    color: #e8e8e8;
}

.modal-content {
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(2px) !important;
    border-radius: 8px !important;

}

html[data-bs-theme="dark"] .modal-content {
    background-color: rgba(51, 51, 51, 0.1) !important;
    color: #e8e8e8 !important;
}

h4 {
    padding: 8px 0 !important;
    font-weight: 700 !important;
    margin-top: 20px;
}

h3 {
    padding: 10px 0 !important;
    font-weight: 800 !important;
    margin-top: 16px;
}