.accordion-item {
    background-color: transparent;

    /* Remove borders for a cleaner look */
}

.accordion-button {
    background-color: transparent;
    color: inherit;
    /* Make sure text color adapts to light/dark mode */
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: inherit;
}

.accordion-body {
    background-color: transparent;
    color: inherit;
    /* Match text color with the theme */
    border-top: none;
    /* Remove border between accordion and content */
}

.accordion-item::after {
    background-color: transparent;
}

body {
    font-family: 'Heebo', sans-serif;
    overflow-x: hidden;
}

[data-bs-theme="light"] body {
    background-color: #ffffff;
}

[data-bs-theme="dark"] body {
    background-color: #212121;
}

[data-bs-theme="light"] .navbar {
    background-color: white;
    /* Adjust if needed */
}

[data-bs-theme="dark"] .navbar {
    background-color: #212121;
    /* Adjust if needed */
}

.navbar {
    background-color: var(--section-bg-color);
}

.signika {
    font-family: 'Signika', sans-serif;
}

.google-play-button img {
    width: 150px;
    height: auto;
}

[data-bs-theme="dark"] .navbar {
    background-color: #212121;
}

[data-bs-theme="dark"] .dark-mode-bg {
    background-color: #212121;
}

[data-bs-theme="dark"] .navbar .nav-link {
    color: #ffffff;
}

[data-bs-theme="dark"] .navbar .navbar-brand {
    color: #ffffff;
}

.hero-section {
    background-color: var(--section-bg-color);
    padding: 2rem 0;
}

[data-bs-theme="light"] .hero-section {
    --section-bg-color: white;
}

[data-bs-theme="dark"] .hero-section {
    --section-bg-color: #212121;
}

.dark-section {
    background-color: var(--section-bg-color);
    padding: 2rem 0;
}

[data-bs-theme="light"] .dark-section {
    --section-bg-color: #f8f9fa;
}

[data-bs-theme="dark"] .dark-section {
    --section-bg-color: #262626;
}

.light-section {
    background-color: var(--section-bg-color);
    padding: 2rem 0;
    overflow-x: hidden;
}


[data-bs-theme="light"] .light-section {
    --section-bg-color: white;
}

[data-bs-theme="dark"] .light-section {
    --section-bg-color: #212121;
}

.check-list {
    list-style-type: none;
    padding-left: 0;
}

.check-list li {
    margin-bottom: 10px;
}

.check-list li:before {
    content: "\f00c";
    /* Unicode for check icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 8px;
}

.form-check-input:checked {
    background-color: lightgray;
    border-color: lightgray;
}

/* Remove the blue border and shadow on focus */
.form-check-input:focus {
    box-shadow: none;
    border-color: lightgray;
}

/* Custom styles for the slider (thumb) */
.form-check-input:checked {
    background-color: lightgray;
}

/* Custom styles for the slider (thumb) when in dark mode */
.form-check-input:checked::after {
    background-color: lightgray;
}

.responsive-img {
    max-height: 35vh;
    width: auto;
}

[data-bs-theme="dark"] .dark-mode-bg {
    background-color: #212121;
}

.theme-switch {
    position: absolute;
    top: 10px;
    /* Adjust this value as needed */
    right: 10px;
    /* Adjust this value as needed */
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.page-content {
    margin-top: 20vh;
}

.custom-container {
    max-width: 960px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
    margin-left: 10px;
    /* Adjust the value as needed */
}


/* Hide Default Checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Slider Track */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 17px;
}

.slider:before {
    position: absolute;
    content: '';
    height: 26px;
    width: 26px;
    left: -10px;
    bottom: -4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    transition: 0.4s;
    border-radius: 50%;
    background-color: black;
    /* Black background for moon */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="%23fff" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3A7 7 0 0 0 21 12.79Z"/></svg>');
    /* White moon icon */
}

/* Checked state (when sun is visible) */
input:checked+.slider {
    background-color: white;
    /* Switch background stays white when sun is visible */
}

input:checked+.slider:before {
    transform: translateX(26px);
    background-color: white;
    /* Sun background should be white */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="%23000" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>');
    /* Sun icon */
}

/* Dark Mode Styles */
body[data-bs-theme="dark"] {
    background-color: #121212;
    color: white;
}

/* Dark Mode Styles */
body[data-bs-theme="dark"] .slider:before {
    background-color: black;
    /* Moon should have black background in dark mode */
}

body[data-bs-theme="dark"] input:checked+.slider:before {
    background-color: white;
    /* Ensure sun icon has white background in dark mode */
}