:root {
    --color-light: #ffffff;
    --color-dark: #232323;
    --color-text-light: #000000;
    --color-text-dark: #e8e8e8;
    --color-hover-light: #162d66;
    --color-hover-dark: #aaacc0;
}

/* .dark-mode {
    background-color: var(--color-dark);
    color: var(--color-text-dark);
} */

body {
    background-color: var(--color-light);
    color: var(--color-text-light);
}



.dark-mode body{
    background-color: var(--color-dark);
    color: var(--color-text-dark);
}

.dynamic-color {
    color: var(--color-text-light);
}

.dark-mode .dynamic-color {
    color: var(--color-text-dark);
}

body, h1, h2, h3, h4, h5, h6, p, a {
    color: var(--color-text-light);
}

a {
    color: var(--color-text-light); /* Light Mode */
    text-decoration: none; /* Optional: Removes underline */
}

a:hover {
    color: var(--color-hover-light); /* Hover in Light Mode */
}

/* Dark Mode Link Colors */
.dark-mode a {
    color: var(--color-text-dark); /* Dark Mode */
}

.dark-mode a:hover {
    color: var(--color-hover-dark); /* Hover in Dark Mode */
}

.dark-mode body,
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6,
.dark-mode p, .dark-mode a {
    color: var(--color-text-dark);
}

/* . NAV BAR*/
/* Light Mode */
.navbar-custom {
    background-color: var(--color-light);
    border-bottom: 1px solid #cccccc; /* Adjust the color as needed */
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav .nav-link {
    color: var(--color-text-light);
}

.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-nav .nav-link:hover {
    color: var(--color-hover-light);
}

/* Dark Mode */
.dark-mode .navbar-custom {
    background-color: var(--color-dark);
    border-bottom: 1px solid #c6c6c6; /* Adjust the color as needed */
}

.dark-mode .navbar-custom .navbar-brand,
.dark-mode .navbar-custom .navbar-nav .nav-link {
    color: var(--color-text-dark);
}

.dark-mode .navbar-custom .navbar-brand:hover,
.dark-mode .navbar-custom .navbar-nav .nav-link:hover {
    color: var(--color-hover-dark);
}

/* .FOOTER*/
.footer-custom {
    background-color: var(--color-light);
    padding: 10px 0;
    width: 100%;
    margin-top: auto;
}
.footer-custom a {
    color: #343a40;
    margin: 0 10px;
}
.social-icons {
    margin: 10px 0;
}
.social-icons a {
    color: #343a40;
    margin: 0 10px;
    font-size: 1.2rem;
}

.dark-mode .footer-custom {
    background-color: var(--color-dark);
    color: var(--color-text-dark);
}
.dark-mode .footer-custom a,
.dark-mode .social-icons a {
    color: var(--color-text-dark);
}

/* CARD */
.dark-mode .card {
    background-color: #1f1f1f;
    color: var(--color-text-dark);
    border-color: #333; /* Change border color to dark */
}
.dark-mode .jumbotron {
    background-color: var(--color-dark);
    color: var(--color-text-dark);
    border-color: #333; /* Change border color to dark */
}
.dark-mode .container {
    background-color: var(--color-dark);
    color: var(--color-text-dark);
    border-color: #333; /* Change border color to dark */
}
.dark-mode .form-control {
    background-color: #333;
    color: var(--color-text-dark);
    border-color: #555; /* Change border color to dark */
}
.dark-mode .blog-content {
    background-color: var(--color-dark);
    color: var(--color-text-dark);
    border-color: #333; /* Change border color to dark */
}

.theme-toggle {
    font-size: 0.8rem;
    padding: 3px 10px;
    background-color:var(--color-dark);
    border: 1px solid #343a40;
    border-radius: 5px;
    color: #343a40;
    display: flex;
    align-items: center; 
}

.dark-mode .theme-toggle {
    background-color: var(--color-dark);
    color: var(--color-text-dark);
    border-color: #ffffff;
}
.splash-container {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.splash-container img {
    width: 100%;
    height: 300px;
    object-fit: cover;

}

.content {
    flex: 1;
}

.button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80vh; /* Adjust this value as needed */
}

.card-link {
    text-decoration: none;
    color: inherit;
}
.card-link:hover .card {
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.btn-pastel {
    background-color: #ffffff;
    border-color: #cccccc; /* Black border */
    color: #212529;
}
.btn-pastel:hover {
    background-color: #cfcfcf;
    border-color: #949494; /* Black border */
    color: #212529;
}

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.embed-responsive::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 aspect ratio */
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.jumbotron {
    color: #000000;
    background-color: #ffffff;
}

.embed-video {
    width: 100%;
    max-width: 600px; /* Adjust this value as needed */
    height: auto;
    display: block;
    margin: 0 auto; /* Center the video */
}

.video-left {
    float: left;
    margin-right: 40px; /* Adjust this value as needed for the desired space */
    margin-bottom: 40px; /* Add space below the video */
}

.embed-video::-webkit-media-controls {
    display: none !important;
}
.embed-video::-moz-media-controls {
    display: none !important;
}
.embed-video::-ms-media-controls {
    display: none !important;
}
.embed-video::media-controls {
    display: none !important;
}

.main-content {
    display: none;
}

.spacer {
    height: 50px; /* Adjust the height as needed */
}

.verticalLine {
    border-left: thick solid #e1dfdf;
  }

.toc {
    margin-top: 20px;
    color: #ffffff
}
.toc ul {
    list-style: none;
    padding-left: 0;
}
.toc a {
    text-decoration: none;
    color: #007bff;
}
.toc a:hover {
    text-decoration: underline;
}



.form-group {
    /* display: flex; */
    align-items: center;
}
.form-group label {
    margin-right: 10px;
}
.form-group input {
    margin-right: 10px;
}


.container {
    max-width: 100% !important; /* Ensure the container uses full width */
    padding-left: 2rem; /* Optional: Adjust padding as needed */
    padding-right: 0rem; /* Optional: Adjust padding as needed */
}


/* Increase padding for medium screens */
@media (min-width: 768px) {
    .container.main-content {
        padding-left: 2rem;
        padding-right: 0rem;
    }
}

/* Further increase padding for large screens */
@media (min-width: 992px) {
    .container.main-content {
        padding-left: 2rem;
        padding-right: 0rem;
    }
}

/* Maximum padding for extra-large screens */
@media (min-width: 1200px) {
    .container.main-content {
        padding-left: 3rem;
        padding-right: 0rem;
    }
}

/* Maximum padding for extra-large screens */
@media (min-width: 1200px) {
    .container.home-page {
        padding-left: 3rem;
        padding-right: 0rem;
    }
}


@media (min-width: 900px) {
    .container.home-page {
        padding-left: 3rem;
        padding-right: 0rem;
    }
}

/* Ensure the main content takes full width */
.container.home-page {
    display: flex; 
    max-width: 100% !important;
    padding-left: 1rem;
    padding-right: 2rem;
}

/* Ensure the main content takes full width */
.container.blog-detail {
    display: flex; 
    max-width: 100% !important;
    padding-left: 1rem;
    padding-right: 0rem;
}

@media (min-width: 768px) {
    .container.blog-detail {
        flex-wrap: nowrap;
        padding-left: 1rem;
        padding-right: 0rem;
    }
}

@media (min-width: 992px) {
    .container.blog-detail {
        padding-left: 1rem;
        padding-right: 0rem;
    }
}

@media (min-width: 1200px) {
    .container.blog-detail {
        padding-left: 1rem;
        padding-right: 0rem;
    }
}


/* TOC styling */
#toc {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 50px; /* Adjust as needed */
    max-height: calc(100vh - 40px); /* Adjust based on your layout */
    overflow-y: auto;
    padding: 10px;
    border: 0px solid #ffffff;
    background-color: var(--color-light);
    color: var(--color-text-light);
}

.dark-mode #toc{
    background-color: var(--color-dark);
    color:  var(--color-text-dark);

}

/* Style TOC links */
#toc .nav-link {
    color: gray;
    font-size: 0.9rem;
}

#toc .nav-link:active,
#toc .nav-link:hover {
    color: rgb(108, 108, 253);
}

.dark-mode #toc .nav-link {
    color: rgb(218, 218, 218);
    font-size: 0.9rem;
}
.dark-mode #toc .nav-link:hover {
    color: rgb(108, 108, 253);
}



.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 90%;
    height: 150px; /* Adjust the height as needed */
}

.card-img-top {
    height: 150px; /* Adjust the height as needed */
    object-fit: cover;
}


/* Add a gray line between the content and the TOC */
/* .content-divider {
    border-left: 2px solid #ccc;
    height: 100%;
    position: relative;
    left: 66.66%; /* Adjust based on your layout */
    /* top: 0; */
/* } */ 

.small_content-divider {
    border-left: 2px solid #ccc;
    height: auto;
    /* position: relative; */
}

.content-divider {
    border-left: 2px solid #ccc;
    height: auto;
    /* position: relative; */
    min-height: 100vh; /* Ensure it extends the full height */
}



/* Add margin below each header in the content */
.blog-detail h1,
.blog-detail h2,
.blog-detail h3,
.blog-detail h4,
.blog-detail h5,
.blog-detail h6 {
    margin-bottom: 10px; /* Adjust as needed */
    margin-top: 50px; /* Adjust as needed */
}

/* Light Mode */
.list-group-item {
    /* background-color: var(--color-light); */
    background-color: #f6f4ff;
    color: var(--color-text-light);
    border-color: #9c9c9c; /* Optional: Adjust border color as needed */
    font-weight: bold; /* Make the text bold */
    font-size: 1.1rem; /* Increase the font size */
}

.list-group-item a {
    color: inherit; /* Ensures link color inherits from the list item */
}

/* Dark Mode */
.dark-mode .list-group-item {
    background-color: #2a2a2a;
    /* background-color: var(--color-dark);; */
    color: var(--color-text-dark);;
    border-color: #444444; /* Optional: Adjust border color as needed */
}

.dark-mode .list-group-item a {
    color: inherit; /* Ensures link color inherits from the list item */
}


.justified-text {
    text-align: justify;
}


.image-container {
    text-align: center;
    margin-bottom: 2em;
}

.image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 5px; /* Optional rounded edges */
}

.image-container h5 {
    margin-top: 0.5em;
    font-size: 1.1em;
    color: #333;
    font-weight: bold;
}

.image-container p {
    font-size: 0.9em;
    color: gray;
    margin-top: 0.2em;
}



.video-container {
    max-width: 100%;
    margin: 15px auto; /* Ensures consistent spacing between videos */
    text-align: center;
    height: 200px; /* Set a consistent height */
}

.video-container video {
    height: 200px; /* Set a consistent height */
    width: auto;   /* Automatically adjust width to maintain aspect ratio */
    border-radius: 8px;
}

.video-container p {
    font-size: 0.9em;
    text-align: center;
    margin-top: 8px;
}


.module-image {
    text-align: left;        /* Centers the entire container */
    margin: 2em auto;          /* Adds vertical spacing and centers the container */
    margin-top: 3em;
  }
  
  .module-image img {
    max-width: 80%;            /* Limits the image width */
    height: auto;              /* Maintains aspect ratio */
    display: block;            /* Ensures the image behaves as a block element */
    margin: 0 auto;            /* Centers the image within the container */
    margin-left: 0; 
  }
  
  .module-image .caption {
    font-size: 1em;            /* Sets a consistent font size */
    color: gray;               /* Sets the caption color */
    margin-top: 0.5em;         /* Adds spacing between the image and the caption */
  }

/* Sticky container for both module navigation boxes */
.nav-container {
    position: sticky;
    top: calc(20px + 60px);  /* 20px extra spacing plus navbar height */
    display: flex;
    flex-direction: column;
    gap: 20px;              /* Consistent spacing between the boxes */
    z-index: 1000;
}

/* Styling for both boxes */
.pre-module-nav,
.next-module-nav {
    background: #ffffff;
    padding: 10px 15px;
    border-radius: 5px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); */
    margin-bottom: 2px; 
}

/* Specific styling for previous module */
.pre-module-nav a {
    text-decoration: none;
    color: #002750;
    font-weight: bold;
    text-align: left;
    display: block;
    margin-bottom: 0em;
}

/* Specific styling for next module */
.next-module-nav a {
    text-decoration: none;
    color: #002750;
    font-weight: bold;
    text-align: left;
    display: block;
}

.next-module-nav a:hover {
    text-decoration: underline;  /* Underline on hover to indicate it's clickable */
}

.next-module-nav .arrow {
    margin-left: 5px;         /* Adds space between the module title and the arrow */
}


a {
    font-family: 'Arial', sans-serif;  /* Change to your preferred font */
    color: #003268;                    /* A clear, noticeable color */
    text-decoration: underline;        /* Underlined by default */
    font-weight: bold;                 /* Bold to make them stand out */
}

/* Override for links inside the nav bar */
.navbar a {
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    font-weight: normal;
}


.navbar a,
nav a {
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    font-weight: normal;
}


/* Override for links inside the table of contents */
#toc a {
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    font-weight: normal;
}


.citation-link {
    color: #007bff;
    text-decoration: none;
}

.citation-link:hover {
    text-decoration: underline;
}

.references-list {
    margin-top: 20px;
}

.reference-item {
    margin-bottom: 10px;
    padding: 5px 0;
    line-height: 1.6;
}

.dark-mode .reference-item {
    color: var(--color-text-dark);
}