/* Light Mode */
#themeToggleBtn {
    background-color: #FFFFFF; /* Light Mode Background */
    border: 1px solid #6c7fd8; /* Border Color */
    transition: background-color 0.3s, color 0.3s;
}

/* Icon color */
#themeToggleBtn i {
    color: #6c7fd8; /* Icon color */
}

/* Dark Mode */
.dark #themeToggleBtn {
    background-color: #22252f; /* Dark Mode Background */
}

/* Ensure the icon color stays the same in dark mode */
.dark #themeToggleBtn i {
    color: #6c7fd8;
}

/*#search-results {*/
/*    max-height: 300px; !* limit the height of the dropdown *!*/
/*    overflow-y: auto; !* add scrolling if results exceed max-height *!*/
/*    position: absolute;*/
/*    z-index: 999;*/
/*    border-radius: 10px;*/
/*    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);*/
/*    width: 100%;*/
/*    background-color: white;*/
/*}*/

/*#search-results li {*/
/*    padding: 10px;*/
/*    cursor: pointer;*/
/*    transition: background-color 0.3s;*/
/*}*/

/*#search-results li:hover {*/
/*    background-color: #f2f2f2;*/
/*}*/


.img-magnifier-glass {
    position: absolute;
    border: 3px solid #000;
    border-radius: 50%;
    cursor: none;
    width: 150px;
    height: 150px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 999;
    pointer-events: none;
}

/* For Mobile (hide the magnifier effect) */
@media (max-width: 767px) {
    .img-magnifier-glass {
        display: none !important;
    }

    .main-image {
        transition: transform 0.3s ease-in-out;
    }

    /* Optional: Zoom effect on mobile */
    .main-image.zoomed {
        transform: scale(1.5); /* Adjust zoom scale */
    }
}

.video-container {
    width: 100%;
    height: 500px;
}

.video-container video {
    width: 100%;
    height: 500px;
    border-radius: 10px; /* Optional styling */
}

/* Container styling */
.captcha-container {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* Remove any line breaks that Django might insert */
.captcha-container br {
    display: none;
}

/* Make container a flex container */
.captcha-container > div {
    display: flex;
    flex-direction: row-reverse; /* For RTL layout but with image on left */
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Style the image */
.captcha-container img {
    order: 2; /* Move to the left in flex-direction: row-reverse */
    height: auto; /* Match input height */
    width: auto;
    vertical-align: auto;
    margin-right: 12px;
    border-radius: 10%;
}

/* Style the input */
.captcha-container input {
    order: 1; /* Move to the right in flex-direction: row-reverse */
    flex: 1;
    max-width: 300px;
    height: 46px;
    padding: 10px;
    font-size: 14px;
    font-weight: normal;
    color: #686e7d;
    border: 1px solid #eee;
    outline: 0;
    line-height: 26px;
    border-radius: 10px;
    vertical-align: middle;
}

/* Handle any additional elements that Django might insert */
.captcha-container a {
    order: 3;
    margin-right: 5px;
    vertical-align: bottom;
}

.captcha-error {
    display: block;
    flex-direction: row-reverse;
    justify-content: right;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;

}

.big-404 {
    font-size: 120px;
    color: #eee;
    position: absolute;
    z-index: 0;
    user-select: none;
}

.faq-light {
  display: block;
}
.faq-dark {
  display: none;
}