body,
html {
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    background-color: #fff;
    color: #655547;
    font-family: "Playwrite DE Grund", cursive;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}
body {
    display: flex;
    flex-direction: column;
    padding-top: 56px;
}

.content-wrapper{
    background-color: #fff;
}

a,p,h1,h2,h3,h4,span,small{
    color: #655547;
}

.progress-bar {
    background-color: #8eb987;
}

/* Scripture Quote - Centered */
.scripture-quote {
    max-width: 60%;
    margin: auto;
    text-align: center;
    font-size: .8em;
}

/* Course Container - Responsive */
.courses-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Course Cards */
.course-card {
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    flex: 0 0 calc(25% - 10px); /* Default: 4 across */
    padding: 20px;
    height: 225px;
    background-color: #fff;
    border: 1px solid #ddd;
}

.last-watched{
    padding: 10px;
}

.last-watched-course-thumb-container{
    width: 25%;
}

.right-text{
    float: right;
}

.last-watched-course-name{
    padding-left: 15px;
    margin-bottom: 5px;
}





.book-card{
    width: 180px;
    height: 250px;
}

.book-card img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.book-shelf{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}


/* Last Watched Course Styling */
.last-watched {
    border: 1px solid #a4d19c;
}



.last-watched img {
   width: 100%;
    height: 100%;
    object-fit: cover;
}

.last-watched .course-card-body {
    text-align: left;
}

.last-watched .course-card-body h5 {
    color: #8bc34a;
}

/* Course Card Hover Effect */
/*.card:hover, .last-watched:hover {*/
/*    transform: translateY(-5px);*/
/*    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
/*}*/

/* Progress Bar Position */
.progress {
    margin-top: 3px;
    height: 4px;
}


.main-header{
    border: unset;
    background-color: #f8f2ed;
    z-index: 1039!important;
}

#hamburger-icon{
    position: relative;
    z-index: 1039!important;
}

.layout-navbar-fixed .wrapper .brand-link{
    background-color: #f8f2ed;
    border: unset;
}

.main-sidebar{
    z-index: 1038;
}

.sidebar{
    background-color: #f8f2ed;
    border: unset;
    border-right:1px solid #d1bfb4;
    height: 100vh!important;

}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color: #d1bfb4;
}
.sidebar li p{
    color: #655547;
    font-size: 1em;
}
.sidebar li i{
    color: #655547;
}







.card-link a{
    text-decoration: none;
    color: #000;
}

.card-link a:after{
    text-decoration: none;
    color: #000;
}

.top-simple-nav{

}



.member-ack-list{
    padding-left: 10px;
}
.member-ack-list li{
    list-style-type: disclosure-closed!important;
    margin: 10px;
}

.top-simple-nav ul{
    display: flex;
    width: fit-content;
    margin: auto;
}



.top-simple-nav li{
    padding: 10px;
    font-weight: bold;
}

.top-simple-nav li a {
    text-decoration: none;
    color: #000;
}

.top-simple-nav li.active a {
    text-decoration: underline;
    color: #007bff;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    padding: 10px;
    font-weight: bold;
}

.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
    margin-right: .25em;
}

.separator:not(:empty)::after {
    margin-left: .25em;
}

.saved-cards-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.saved-card{
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 5px;
    height: 150px;
    position: relative;
}

.remove-card{
    cursor: pointer;
    position: absolute;
    right: 10px;
    top:0px;
}

.saved-card .details{
    display: grid;
    align-items: center;
    justify-content: center;
    height: 75%;
}

.saved-card .details p{
    font-size: 90%;
    text-align: center;
    margin: 0;
    padding: 0;
}

.saved-card .actions{
    display: inline-block;
    height: 25%;

}

.saved-card .actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    height: 25%;
}

.saved-card .action{
    font-size: 90%;
    text-align: center;
    flex: 1;

}

.tab-content{
    margin-top: 10px;
}



@media only screen and (max-width: 819px) {
    .top-simple-nav li {
        font-size: 75%;
    }
}

@media (min-width: 768px) {
    #hamburger-icon,.sidebar,.main-sidebar {
        display: none;
    }
}

@media (max-width: 768px) {
    .desktop-nav-item {
        display: none;
    }
    .course-card .position-absolute{
        display: none;
    }
}


/* Adjusts card width for mobile screens */
@media (max-width: 1024px) {
    .course-card {
        flex: 0 0 calc(33.333% - 10px); /* 3 across on tablets */
    }
}
@media (min-width: 768px) {

    .last-watched-course-name{
        text-align: left;
    }
}

@media (max-width: 768px) {
    .right-text{
        float: unset;
    }
    .course-card {
        flex: 0 0 calc(50% - 10px); /* 2 across on smaller screens */
    }
    .courses-container{
        justify-content: center;
    }
    .book-card, img {
        height: 80%;
    }
    .last-watched-course-thumb-container{
        width: 50%;
        margin: auto;
    }
    .course-card .progress{
        border-radius: 0;
    }
    /* Scripture Quote - Centered */
    .scripture-quote {
        max-width: 100%;
    }

}

@media (max-width: 480px) {
    .course-card {
        flex: 0 0 100%; /* Full width on mobile */
        text-align: center;
    }
}