:root {
    --font-primary: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
    --font-secondary: "Eczar", Georgia, "Times New Roman", "PT Serif" serif;
    --font-heading: "Domine", "Palatino Linotype", "Book Antiqua", Palatino,
        serif;
    --font-size-xs: 1.2rem;
    --font-size-sm: 1.4rem;
    --font-size-base: 1.6rem;
    --font-size-md: 1.8rem;
    --font-size-lg: 2.4rem;
    --font-size-xl: 3rem;
    --font-size-xxl: 3.8rem;
    --font-size-hero: 4.8rem;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    --line-height-heading: 54.72px;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --primary-blue: #3b5163;
    --secondary-red: #a91f23;
    --color-text-primary: #3b5163;
    --color-text-gray: #6c757d;
    --color-text-muted: #9ca3af;
    --color-text-heading: #1477ba;
    --color-text-secondary: #a91f23;
    --color-text-black: #051d2e;
    --color-text-white: #ffffff;
    --spacing-1: 0.6em;
    --spacing-2: 1.6em;
    --spacing-3: 2.4em;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
input,
select,
textarea,
button {
    outline: 0;
}
html {
    font-size: 62.5%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-regular);
}
.h1,
h1 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-tight);
}
@media (min-width: 768px) {
    .h1,
    h1 {
        font-size: clamp(1.6rem, 5vw, 2rem);
        line-height: 1.5;
    }
}
.h2,
h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}
.h3,
h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
    margin-bottom: 0.6rem;
}
.h4,
h4 {
    font-family: var(--font-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-black);
    line-height: 32px;
    margin-bottom: 0.5rem;
}
.h5,
h5 {
    font-family: var(--font-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-gray);
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: 0.4rem;
}
.h6,
h6 {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: 0.3rem;
}
p {
    font-size: var(--font-size-sm);
    color: var(--color-text-black);
    margin-bottom: 2rem;
    line-height: var(--line-height-relaxed);
}
ul li {
    list-style: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
}
a {
    display: inline-block;
    color: var(--secondary-red);
    text-decoration: none;
}
.text-small {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.text-center {
    text-align: center;
}
.text-muted {
    color: var(--text-muted);
}
.mt-md {
    margin-top: var(--spacing-md);
}
.mt-lg {
    margin-top: var(--spacing-lg);
}
.primary-color {
    color: var(--primary-blue) !important;
}
.secondary-color {
    color: var(--secondary-red) !important;
}
button {
    align-self: stretch;
    background-color: var(--secondary-red);
    color: #fff;
    font-size: 1.8rem;
    padding: 0.3em 1.2em;
    border: none;
    cursor: pointer;
}
button:hover {
    background-color: var(--primary-blue);
    /* border: inset 1px solid var(--secondary-red); */
    box-shadow: 2px 2px 10px -20px #252525;
}
.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-md);
}
.input-label {
    font-size: 1.4rem;
    color: var(--text-color);
    margin-bottom: var(--spacing-sm);
}
section {
    width: 100%;
    padding: var(--spacing-lg);
}
.heading-primary {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    color: var(--primary-color);
}
.heading-secondary {
    font-family: var(--font-secondary);
    font-size: 2.4rem;
    color: var(--text-color);
}
/* Search Section */
.search-wrapper {
  /* overflow: hidden; */
  position: relative;
}
.search-input-part {
  position: absolute;
  left: 0;
  top: -120px;
  width: 100%;
  height: 100%;
  background-color: var(--secondary-red);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  opacity: 1;
  pointer-events: none;
  transition: all 0.5s ease-in-out;
  z-index: 100;
}
#search-toggle:checked ~ form .search-input-part {
  top: 0;
  opacity: 1;
  pointer-events: auto;
}
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 90;
}
#search-toggle:checked ~ .search-overlay {
  opacity: 1;
  pointer-events: auto;
}
/* Pagination Section */
.pagination {
    display: flex;
    justify-content: center;
}
.pagination .border {
    border-radius: 20px;
}
.pagination nav .flex {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}
.pagination nav .flex span {
    color: #bbb9b9;
}
.pagination nav .flex a:hover {
    color: var(--color-text-white);
    background-color: var(--primary-blue) !important;
}
.pagination nav p {
    display: none;
}
.pagination nav .hidden {
    display: flex;
    justify-content: center;
}
.pagination nav .hidden .relative {
    display: flex;
    gap: 10px;
    box-shadow: none !important;
}
.pagination nav .hidden .relative .border {
    border-radius: 10px;
}
.pagination nav .hidden .relative a:hover {
    color: var(--color-text-white);
    background-color: var(--primary-blue) !important;
}
.brand-header {
    display: flex;
    height: 32px;
    align-items: center;
    gap: 4px;
    color: #fff;
    letter-spacing: 0.64px;
}

/* Footer Section */
.footer {
    background-color: rgba(3, 19, 31, 1);
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 0 20px;
    /* padding: 40px 100px; */
    overflow: hidden;
}
.footer-background {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/footer-background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.footer-heading {
    font-family: var(--font-heading);
    font-size: 2.4rem;
}
.footer-cross-icon {
    height: 22px;
}
.footer-heading span {
    font-size: 2rem;
}
.footer-link {
    text-decoration: none;
    padding-inline: 8px;
}
.footer-link a {
    color: #a6a6b0;
}
.footer-links ul {
    padding-left: 0;
}
.footer-links ul li {
    font-size: 1.6rem;
    list-style: none;
    margin-bottom: 1rem;
}
.footer-links ul li:last-child {
    margin-bottom: 0;
}
.footer-link:hover {
    text-decoration: none;
}
.footer-brand {
    flex: 0 0 240px;
}
.footer-content {
    z-index: 1;
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 30px;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 48px 0;
}
.footer-content .brand-container img {
    width: 55px;
}
.footer-column {
    display: flex;
    flex-direction: column;
    font-weight: 400;
    width: 200px;
}
.footer-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-transform: capitalize;
    letter-spacing: -0.24px;
    font: 24px/1 Domine, sans-serif;
}
.footer-icon {
    aspect-ratio: 0.63;
    width: 10px;
    margin: auto 0;
}
.footer-links {
    display: flex;
    margin-top: 12px;
    flex-direction: column;
    color: #a6a6b0;
    padding: 0 16px;
    font: 1.6rem/32px Mulish, sans-serif;
}
.follow-section {
    display: flex;
    /* min-width: 240px; */
    flex-direction: column;
    /* width: 400px; */
}
.follow-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-transform: capitalize;
    letter-spacing: -0.24px;
    font: 2.4rem/1 Domine, serif;
}
.follow-header img {
    object-fit: contain;
}
.follow-content {
    display: flex;
    margin-top: 16px;
    flex-direction: column;
    font-family: Mulish, sans-serif;
    padding: 0 2.4rem;
}
.follow-description {
    color: #a6a6b0;
    font-size: 3rem;
    /* line-height: 32px; */
}
.follow-form {
    display: flex;
    margin-top: 16px;
    gap: 12px;
}
.copyright {
    background: rgba(3, 19, 31, 1);
    padding: 14px 0;
    text-align: center;
}
.copyright .copyright-content p {
    font-size: 1.6rem;
    color: white;
    margin-bottom: 0;
}
@media (min-width: 572px) {
    .footer-cross-icon {
        height: 25px;
    }
}
@media (min-width: 768px) {
    .footer-cross-icon {
        height: 30px;
    }
    .footer-heading span {
        font-size: 2.4rem;
    }
}
@media (min-width: 992px) {
    .footer {
        padding: 48px 10%;
    }
}
/* Notification section */
/* .notifi {
  position: absolute;
  right: 20px;
  top: 10%;
  transform: translateY(-50%);
} */
.main-nav {
    background-color: #fff;
    display: flex;
    min-height: 80px;
    width: 100%;
    align-items: center;
    gap: 32px;
    padding: 12px 100px;
}
.main-header {
    width: 100%;
    background-color: #fff;
    position: sticky;
    padding: 0 3%;
    top: 0;
    z-index: 999;
}
#search-container {
    position: relative;
}
#searchModal .modal-content {
    background: rgba(255, 255, 255, 0.97);
}
.navbar {
    background: #f2f2f2;
    /* z-index: 99; */
    transition: all 0.5s;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.04);
}
.sticky-wrapper.is-sticky .navbar {
    background-color: #f2f2f2;
    padding: 0.2em 3%;
    transition: all 0.5s;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}
.main-header .nav-link {
    margin: 0 10px;
}
.main-header .nav-link.active {
    color: var(--secondary-red);
    font-weight: 600;
}
.search-input {
    display: none;
    margin-left: 10px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}
.search-input.show {
    display: inline-block;
}
.hamburger-icon {
    border: 0;
}
.hamburger-icon:hover {
    background-color: unset;
}
.hamburger-icon:focus {
    box-shadow: none;
}
.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 20px;
    cursor: pointer;
}
.hamburger-menu span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #000;
    transition: transform 0.3s, opacity 0.3s;
}
/* .input {
  width: 0;
  background-color: #f5f5f5;
  color: #242424;
  padding: 0.15rem 0.9rem;
  min-height: 40px;
  border-radius: 4px;
  outline: 0;
  border: none;
  line-height: 1.15;
  transition: all 0.5s ease-in-out;
  opacity: 0;
  visibility: hidden;
}
.input-visible {
  width: 100%;
  opacity: 1;
  visibility: visible;
} */
/* input:focus {
  border-bottom: 2px solid #5b5fc7;
  border-radius: 4px 4px 2px 2px;
} */
/* input:hover {
  outline: 1px solid #d3d3d3;
} */
.mobile-nav {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    padding: 2em;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-200%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 99;
}
.mobile-nav-link {
    padding: 15px;
    text-align: center;
    text-decoration: none;
    color: #000;
    border-bottom: 1px solid #e5e5e5;
    font-size: 16px;
}
.mobile-nav.active {
    transform: translateY(0);
}
@media (min-width: 992px) {
    .hamburger-menu {
        display: none;
    }
    .mobile-nav {
        display: none;
    }
    /* .notification {
    position: absolute;
    right: 7%;
    top: 50%;
    transform: translateY(-50%);
  } */
}
.header-dropdown {
    width: 160px !important;
    top: 136% !important;
}
.header-dropdown li .dropdown-item:active {
    background-color: rgba(170, 31, 35, 0.8);
}
.header-dropdown li a {
    color: #777;
    padding: 8px 20px;
    line-height: normal;
    font-size: 1.6rem;
}
.header-dropdown li a i {
    min-width: 19px;
}
header .header-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
}
header .brand-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* gap: 4px;
  width: 237px; */
}
.header-background {
    position: absolute;
    bottom: 0;
    left: -96px;
    right: -96px;
    z-index: 1;
    overflow: hidden;
}
.background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.brand-logo {
    width: 46px;
    object-fit: cover;
    margin: 0;
}
.brand-name {
    font-family: Eczar, serif;
    font-size: 2.6rem;
    font-weight: 400;
    color: var(--secondary-red);
    letter-spacing: -0.64px;
    white-space: nowrap;
}
.footer-content > .brand-name {
    font-size: 3.2rem;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.64px;
    white-space: nowrap;
}
.nav-links {
    display: flex;
    gap: 48px;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-base);
    border-top: 1px solid #ddd;
}
@media (min-width: 1200px) {
    .nav-links {
        gap: 64px;
        font-size: var(--font-size-md);
    }
}
.nav-link .active {
    color: var(--color-text-secondary);
    font-weight: 700;
}
.nav-link:hover {
    color: var(--primary-blue);
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 32px;
}
.header-actions img {
    width: 26px;
    height: 26px;
    object-fit: cover;
}
.header-actions svg {
    width: 10px;
    height: 10px;
}
.search-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.logo {
    width: 48px;
    height: 48px;
    object-fit: cover;
}
/* Notification Icon */

.notification-icon {
    fill: var(--primary-blue);
    width: 18px;
    height: 18px;
}
.notification .notify-no {
    width: 24px;
    height: 24px;
    line-height: 20px;
    border-radius: 50%;
    background: var(--secondary-red);
    position: absolute;
    font-size: 13px;
    top: -10px;
    right: -7px;
    border: 2px solid #fff;
    color: #fff;
    text-align: center;
}
/* .custom-dropdown .btn:active, .custom-dropdown .btn:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  outline: none;
} */

/* .custom-dropdown .btn.btn-custom {
  border: 1px solid #efefef;
} */

.custom-dropdown .title-wrap {
    padding-bottom: 10px;
}

.custom-dropdown .title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

/* .custom-dropdown .dropdown-link {
  color: #888;
  display: inline-block;
  padding-right: 0px;
  position: relative;
} */

/* .custom-dropdown .dropdown-link .wrap-icon {
  font-size: 30px;
} */

.custom-dropdown .dropdown-link .number {
    width: 22px;
    height: 22px;
    line-height: 18px;
    border-radius: 50%;
    background: var(--secondary-red);
    position: absolute;
    font-size: 13px;
    top: -8px;
    right: -10px;
    border: 2px solid #fff;
    color: #fff;
    text-align: center;
}

.custom-dropdown .dropdown-menu {
    border: 1px solid transparent;
    top: 133%;
    -webkit-box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2);
    margin-top: 0px !important;
    padding-top: 0;
    padding-bottom: 0;
    padding: 10px;
    opacity: 0;
    /* left: 0 !important; */
    -webkit-transition: 0.3s margin-top ease, 0.3s opacity ease,
        0.3s visibility ease;
    -o-transition: 0.3s margin-top ease, 0.3s opacity ease, 0.3s visibility ease;
    transition: 0.3s margin-top ease, 0.3s opacity ease, 0.3s visibility ease;
    visibility: hidden;
    min-width: 300px;
}

.custom-dropdown .dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    margin-top: 10px !important;
}

.custom-dropdown .custom-notifications {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 200px;
    overflow-y: scroll;
    border-bottom: 1px solid #efefef;
}

.custom-dropdown .custom-notifications > li {
    display: block;
    font-size: 14px;
    margin-bottom: 10px;
}

.custom-dropdown .custom-notifications > li:last-child {
    margin-bottom: 0;
}

.custom-dropdown .custom-notifications > li > a {
    display: block;
    padding: 20px;
    color: #bfbfbf;
}

.custom-dropdown .custom-notifications > li > a:hover {
    background: #f9f9f9;
}

.custom-dropdown .custom-notifications > li > a .img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40px;
    flex: 0 0 40px;
}

.custom-dropdown .custom-notifications > li > a .img img {
    width: 40px;
    border-radius: 50%;
}

.custom-dropdown .custom-notifications > li > a .text {
    margin-top: 0px;
}

.custom-dropdown .custom-notifications > li > a .text strong {
    font-weight: 700;
    color: #000;
}

.custom-dropdown .custom-notifications > li.unread a {
    background: rgba(169, 31, 35, 0.1);
}
/* .notification .badge {
  font-size: 1.2rem;
  transform: translate(-80%, -50%);
  padding: 0.4rem 0.7rem;
  border: 1px solid white;
}
.notification .badge span {
  line-height: 10px;
  font-size: 0.8rem;
} */
@media (min-width: 768px) {
    .header-actions img {
        width: 35px;
        height: 35px;
    }
    .header-actions svg {
        width: 12px;
        height: 12px;
    }
    .header-actions i {
        font-size: 1.5rem;
    }
    .notification-icon {
        width: 20px;
        height: 20px;
    }
    .notification .badge {
        font-size: 1.2rem;
        padding: 0.5rem 0.8rem;
    }
    .notification .badge span {
        line-height: 13px;
        font-size: 1.2rem;
    }
    .search-icon {
        width: 24px;
        height: 24px;
    }
}

/* Login */

.auth-home {
    position: relative;
    /* max-width: 850px; */
    width: 100%;
    background: #fff;
    padding: 40px 30px;
    margin-bottom: 100px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.auth-home .cover {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
}
.login-home .cover {
    left: 50%;
}
.register-home .cover {
    left: 0%;
}
.auth-home .cover .front {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.auth-home .cover img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 12;
}
.auth-home .cover .text {
    position: absolute;
    z-index: 111;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cover .text .text-1,
.cover .text .text-2 {
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;
}
.cover .text .text-2 {
    font-size: 15px;
    font-weight: 500;
}
.form-contents .login-form,
.form-contents .signup-form {
    width: calc(100% / 2 - 30px);
}
.signup-form .title:before {
    width: 20px;
}
.form-contents .input-boxes {
    margin-top: 30px;
}
.form-contents .input-box:hover {
    border: 1px solid rgba(59, 81, 99, 0.5) !important;
}
.form-contents .input-box {
    display: flex;
    align-items: center;
    height: 50px;
    width: 100%;
    margin: 10px 0;
    position: relative;
}
.form-contents .input-box input {
    height: 100%;
    width: 100%;
    outline: none;
    border: none !important;
    padding: 0 38px;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}
.form-contents .input-box input:focus,
.form-contents .input-box input:valid {
    border-color: var(--primary-color);
    box-shadow: none;
}
.form-contents .input-box i {
    position: absolute;
    color: var(--primary-color);
    font-size: 17px;
}
.form-contents .text {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
.form-contents .text a {
    text-decoration: none;
}
.form-contents .text a:hover {
    text-decoration: underline;
    color: var(--primary-blue);
}
.form-contents .button {
    color: #fff;
    margin-top: 40px;
}
.form-contents .button input {
    color: #fff;
    background: var(--secondary-red);
    padding: 0;
    cursor: pointer;
    transition: all 0.4s ease;
}
.form-contents .button input:hover {
    background: var(--primary-blue);
}
.form-contents label {
    color: var(--primary-blue);
}
.form-contents .login-text,
.form-contents .sign-up-text {
    text-align: center;
    margin-top: 25px;
}
@media (max-width: 768px) {
    .auth-home .cover {
        display: none;
    }
    .form-contents .login-form,
    .form-contents .signup-form {
        width: 100%;
    }
    /* .form-contents .signup-form {
      display: none;
  } */
}

.login-btn {
    padding-inline: 2em;
}
@media (min-width: 768px) {
    .nav-links {
        border-top: none;
    }
}
@media (max-width: 480px) {
    .brand-name {
        font-size: 17px;
    }
    .header-actions,
    .nav-link {
        /* display: none; */
        font-size: 16px;
    }
    .login-btn {
        font-size: var(--font-size-xs);
    }
}
.mobile-menu-toggle {
    display: none;
}
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
        background: 0 0;
        border: none;
        cursor: pointer;
        padding: 5px;
    }
}
.login-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2em 5rem 5rem 5rem;
}
.login-wrapper {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: end;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.17);
}
.welcome-container {
    width: 100%;
    text-align: center;
    padding: 0 4em;
}
.welcome-header {
    color: #4b5563;
    font-size: 1.6rem;
}
.welcome-title {
    font-family: Eczar, serif;
    font-size: 3rem;
    font-weight: 400;
    color: var(--secondary-red);
}
.welcome-description {
    text-align: center;
    color: var(--primary-blue);
}
.login-form-container {
    background-color: #fffefa;
    display: flex;
    min-width: 240px;
    flex: 1;
    flex-basis: 0%;
    flex-direction: column;
    justify-content: center;
    margin: auto 0;
    padding: 32px 40px;
}
.form-content {
    background-color: #fff;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: start;
    padding: 0 24px;
}
.form-group {
    display: flex;
    /* margin-top: 2.4em; */
    flex-direction: column;
}
.input-group {
    display: flex;
    gap: 16px;
    margin: 0 0 1em 0;
    flex-direction: column;
}
.input-label {
    color: var(--Text-gray, #475569);
    font: 400 16px Mulish, sans-serif;
}
input {
    width: 100%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
input::placeholder {
    opacity: 0.5;
    color: #6c757d;
    font-size: 1.5rem;
}
input:focus-visible {
    outline: 0;
}
.input-icon {
    background: var(--HitBox, rgba(255, 255, 255, 0));
    width: 1.8em;
    height: 1.8em;
    padding: 0 1px;
}
.input-placeholder {
    color: var(--Gray-600, #6c757d);
    font: 400 18px Mulish, sans-serif;
}
.form-actions {
    display: flex;
    margin-top: 24px;
    width: 100%;
    flex-direction: column;
    font-family: Mulish, sans-serif;
}
.form-footer {
    display: flex;
    margin-top: 24px;
    width: 100%;
    align-items: center;
    font-size: 16px;
    color: var(--Text-gray, #475569);
    justify-content: space-between;
    flex-wrap: wrap;
}
.image-section {
    position: relative;
    display: flex;
    flex: 1;
    background-color: #663399;
}
.image-section img {
    object-fit: cover;
}
.hero-image {
    aspect-ratio: 1.16;
    object-fit: contain;
    width: 100%;
    min-width: 240px;
    flex: 1;
}
@media (max-width: 991px) {
    .login-container {
        max-width: 100%;
        padding: 0 20px;
    }
    .login-wrapper {
        box-shadow: none;
        max-width: 100%;
    }
    .login-form-container {
        max-width: 100%;
        padding: 0 20px;
    }
    .form-content {
        max-width: 100%;
        padding: 0 20px;
    }
    .image-section {
        display: none;
        max-width: 100%;
        aspect-ratio: 9 16;
    }
    .hero-image {
        max-width: 100%;
    }
}

/* Custom btn */
.custom-btn {
    background: var(--secondary-red);
    border: 2px solid transparent;
    border-radius: 100px;
    color: var(--color-text-white);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: normal;
    transition: all 0.3s;
    padding: 10px 25px;
}

.custom-btn:hover {
    background: var(--primary-blue);
    color: var(--color-text-white);
}

/* .custom-border-btn {
  background: transparent;
  border: 2px solid var(--custom-btn-bg-color);
  color: var(--custom-btn-bg-color);
}

.custom-border-btn:hover {
  background: var(--custom-btn-bg-color);
  border-color: transparent;
  color: var(--white-color);
} */

.custom-btn-bg-white {
    border-color: var(--white-color);
    color: var(--white-color);
}

.custom-btn-group .link {
    color: var(--white-color);
    font-weight: var(--font-weight-medium);
}

.custom-btn-group .link:hover {
    color: var(--link-hover-color);
}

/* Brand Section */

.email-input {
    flex: 1;
    background-color: #fff;
    min-width: 240px;
    font-size: 14px;
    color: #a6a6b0;
    padding: 8px 12px;
    border: 2px solid transparent;
}
.subscribe-button {
    background-color: #1477ba;
    color: #fff;
    font-size: 15px;
    padding: 8px 16px;
    border: 2px solid #1477ba;
    cursor: pointer;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
@media (max-width: 991px) {
    .brand-header {
        white-space: normal;
    }
    .footer-links {
        white-space: normal;
    }
    .subscribe-button {
        white-space: normal;
    }
}
main {
    display: flex;
    flex-direction: column;
    padding: 0 0 48px 0;
    align-items: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    flex-wrap: nowrap;
    background-color: #fffefa;
}
.hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
}
@media (min-width: 1200px) {
    .banner-section {
        height: 90vh;
    }
}
.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1477ba;
    margin-top: 1rem;
}
.hero-description {
    font-size: 1.2rem;
    color: #475569;
    margin: 1rem 0;
}
.prayer-circle-container {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding-inline: 2em;
    display: flex;
    flex-direction: column;
    gap: 5%;
    text-align: center;
    z-index: 1;
}
@media (min-width: 768px) {
    .prayer-circle-container {
        top: 50%;
        padding-inline: 15%;
        text-align: left;
    }
    .welcome-title {
        font-size: 4rem;
    }
}
.section-heading {
    font-size: 4rem;
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
@media (min-width: 768px) {
    .section-heading {
        font-size: 6rem;
        line-height: 1.3;
    }
    @media (min-width: var(--breakpoint-xl)) {
        body {
            font-size: 70%;
        }
        .section-heading {
            font-size: 10.4rem;
            line-height: 120px;
        }
    }
}
.section-text {
    font-size: 1.6rem;
    width: 90%;
    max-width: 90%;
    height: auto;
    line-height: 1.5;
    color: #fff;
    overflow: hidden;
    word-wrap: break-word;
}
@media (min-width: 768px) {
    .section-text {
        font-size: 2.4rem;
        width: 80%;
        line-height: 32px;
    }
}
@media (max-width: 767.98px) {
    .section-heading {
        font-size: 2.4rem;
    }
    .section-text {
        font-size: 1.4rem;
        line-height: 1.4;
    }
}
.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
    background: none;
}
.carousel-inner {
    width: 100%;
    height: auto;
}
.carousel-item {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
    z-index: 1;
}
.main-container {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    overflow: hidden;
}
.main-content {
    margin-left: 250px;
    padding: 20px;
}
.get-involve-img {
    width: 100%;
    height: 30vh;
    object-fit: cover;
    object-position: bottom;
}
@media screen and (min-width: 572px) {
    .carousel-item {
        min-height: 57vh;
    }
    .get-involve-img {
        height: 40vh;
    }
}
@media screen and (min-width: 768px) {
    .main-container {
        gap: 8rem;
    }
    .get-involve-img {
        height: 45vh;
    }
}
@media screen and (min-width: 992px) {
    .carousel-item {
        height: 100vh;
    }
    .get-involve-img {
        height: 60vh;
    }
}
.about-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 5%;
    padding-top: 2rem;
    min-height: 70vh;
    align-items: center;
}
.about-section img {
    width: 100%;
    /* max-width: 80%; */
    height: 100%;
    object-fit: cover;
    position: relative;
}
#dot-pattern-1,
#dot-pattern-2 {
    width: 50%;
    height: 50%;
    position: absolute;
    background-image: url("../images/dot-pattern.png");
    z-index: 0;
}
#dot-pattern-1 {
    bottom: -6%;
    right: -4%;
}
#dot-pattern-2 {
    left: -4%;
    top: -7%;
}
@media (max-width: 429px) {
    #dot-pattern-1,
    #dot-pattern-2 {
        display: none;
    }
}
#cross-icon {
    width: 21px;
    height: 31px;
    background-repeat: no-repeat;
    background-image: url(https://cdn.builder.io/api/v1/image/assets/TEMP/3778b12dfb8b751ee45a6d4fa3d862b7126562161d44660c1da140b12a0e1200?placeholderIfAbsent=true&apiKey=abebc751c1754b4eac46155cfb49606a);
}
.welcome-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    margin: auto 0;
    padding-inline: 48px 0;
}
.header-content {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
}
.title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-blue);
    letter-spacing: -0.24px;
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
}
.icon {
    aspect-ratio: 0.68;
    object-fit: contain;
    object-position: center;
    width: 21px;
    align-self: stretch;
    margin: auto 0;
}
.title {
    align-self: stretch;
    margin: auto 0;
}
.main-heading {
    color: var(--color-text-black);
    /* margin-top: 3%; */
    font-size: 3rem;
    font-weight: 800;
    font-family: var(--font-primary), sans-serif;
}
.progress-indicators {
    display: flex;
    margin-top: 4%;
    align-items: center;
    gap: 12px;
}
.progress-primary {
    border-radius: 10px;
    background-color: var(--secondary-red);
    width: 50px;
    height: 5px;
}
.description-primary {
    color: var(--Text-gray, #6f7b8d);
}
.description-secondary {
    color: rgba(5, 29, 46, 1);
    letter-spacing: 0.96px;
    margin-top: 4%;
    font-family: Charm, serif;
    font-weight: 400;
    font-style: normal;
    line-height: 24px;
}
/* Prayer Section */
.prayer-section {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding: 6rem 0 0 0;
}
.prayer-section .container {
    z-index: 10;
}
#prayer-image {
    position: absolute;
    top: 0;
    width: 100%;
    min-height: 90vh;
    z-index: 1;
    background-image: url("../images/prayer-home-bg.png");
    background-size: cover;
    background-position: center;
}
.prayer-detail-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: 0 100%;
}
.clamp-text {
    display: -webkit-box; /* Use a flex container in webkit browsers */
    -webkit-line-clamp: 2; /* Limits the paragraph to 2 lines */
    -webkit-box-orient: vertical; /* Sets the box orientation to vertical */
    overflow: hidden; /* Hides the overflowing text */
    white-space: normal; /* Allows text wrapping */
    line-height: 1.5;
    position: relative;
}
.read-more {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    display: none; /* Initially hidden, only shown if text is truncated */
    position: absolute;
    bottom: 0;
    right: 0;
    background: white; /* Background to ensure visibility */
    padding: 0 4px;
}
.readMore {
    color: var(--secondary-red) !important;
    font-size: 1.4rem;
}
.container-fluid {
    padding-inline: 0.8em;
}
.recent-section {
    background-color: white;
    padding: 1rem;
    box-shadow: 1px 0px 4px 0px rgba(0, 0, 0, 0.15);
}
.recent-section img {
    width: 100%;
    height: 110px;
    object-fit: cover;
}
.recent-section h5 p {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    font-weight: 500;
}
.recent-txt-clip {
    height: 2em;
    overflow: hidden;
}
#prayer-image {
    /* max-height: 90vh; */
    min-height: 60vh;
}
@media (min-width: 1200px) {
    .prayer-section {
        min-height: 70vh;
    }
    #prayer-image {
        min-height: 85vh;
    }
    .prayer-title {
        font-size: 15rem;
    }
}
.prayer-heading {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    width: 100%;
    text-align: center;
}
.prayer-heading > p {
    color: var(--bs-gray-600);
    max-width: 90%;
}
.prayer-title {
    gap: 16px;
    font-size: 2.4rem;
    color: var(--primary-blue);
    letter-spacing: -0.96px;
}
.divider-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.divider-icon {
    aspect-ratio: 0.68;
    object-fit: contain;
    object-position: center;
    width: 21px;
    align-self: stretch;
    margin: auto 0;
}
.divider-left,
.divider-right {
    background-color: rgba(220, 38, 38, 0.4);
    width: 5%;
    height: 1px;
    margin: auto 0;
}
.testimony-container {
    width: 100%;
    margin: 3rem 0;
}
.testimony-container::-webkit-scrollbar {
    width: 100%;
}
.prayer-card {
    background: #fff;
    box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 6px;
    flex-direction: column;
    flex: 1;
    min-width: 235px;
    min-height: 241px;
    /* margin: 3% 0; */
    padding: 1rem 1.4rem;
    border: 1px solid rgba(59, 81, 99, 0.1);
    /* transition: 0.3s; */
}
/* .prayer-card:hover {
  transform: scale(1.01);
  padding: 0;
} */
#calender-icon {
    width: 16px;
    height: 16px;
    background-image: url(https://cdn.builder.io/api/v1/image/assets/TEMP/413ba3bac1eeb1bedbeed0d0af3e9e1c8ad7ccb5823f15d2b82a04a7db798acd?placeholderIfAbsent=true&apiKey=abebc751c1754b4eac46155cfb49606a);
}
#fav-icon {
    width: 16px;
    height: 16px;
    background-image: url(https://cdn.builder.io/api/v1/image/assets/TEMP/1956a33894d2a98cc147d445536dc9d4e68720695be3865f4a65f18c0fb7c253?placeholderIfAbsent=true&apiKey=abebc751c1754b4eac46155cfb49606a);
    background-size: cover; /* Ensure the image is properly sized */
    display: inline-block; /* Make sure it aligns with the text */
    margin-right: 10px; /* Add space between icon and text */
    padding-right: 16px;
}
#tag-icon {
    width: 16px;
    height: 16px;
    background-image: url(https://cdn.builder.io/api/v1/image/assets/TEMP/6370a1c0c0bd492165f618ba95ed756de15db37b256daa944d1213d8870ce8ad?placeholderIfAbsent=true&apiKey=abebc751c1754b4eac46155cfb49606a);
}
#user-icon {
    width: 16px;
    height: 16px;
    aspect-ratio: 1.1;
    background-image: url(../images/user.png);
    background-position: center;
    background-size: cover;
}
#quote-image {
    position: absolute;
    width: 108px;
    height: 138%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background-image: url("../images/quote.png");
    background-repeat: no-repeat;
    opacity: 0.8;
}
.date-container {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    color: var(--secondary-red);
}
.date-text {
    flex: 1;
}
.category-badge {
    display: flex;
    margin-top: 24px;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    border: 2px solid transparent;
}
.category-icon-wrapper {
    justify-content: center;
    align-items: center;
    background: var(--HitBox, rgba(255, 255, 255, 0));
    display: flex;
    width: 16px;
    height: 16px;
}
.category-icon {
    aspect-ratio: 1;
    object-fit: contain;
    width: 16px;
}
.category-text {
    color: var(--color-text-black);
    text-align: center;
    font-size: var(--font-size-sm);
}
.prayer-content {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 4px;
}
#card-divider {
    width: 100%;
    height: 1px;
    margin: 0.4rem 0;
    background-color: var(--color-text-heading);
    opacity: 0.2;
}
.prayer-content h2 {
    font-size: var(--font-size-lg);
    color: var(--color-text-black);
    font-weight: 600;
    letter-spacing: 1px;
    word-wrap: break-word;
}
.prayer-content p {
    margin: 0;
    font-size: var(--font-size-base);
}
.prayer-heading {
    color: var(--Text-black, #051d2e);
    font: 500 24px/1 Domine, sans-serif;
}
.card-divider-wrapper {
    display: flex;
    margin-top: 12px;
    min-height: 1px;
    width: 100%;
    flex-direction: column;
}
.card-divider {
    aspect-ratio: 125;
    object-fit: contain;
    width: 100%;
    border-radius: 1px;
}
.prayer-text {
    color: var(--Text-gray, #475569);
    margin-top: 12px;
    font: 400 16px Mulish, sans-serif;
}
.author-container {
    display: flex;
    align-items: center;
    font-family: Mulish, sans-serif;
}
.author-details > p {
    margin-bottom: 0;
    font-size: var(--font-size-sm);
    padding: 0;
    line-height: 24px;
}
.author-details i {
    color: var(--color-text-secondary);
}
.church-quote h4 {
    color: var(--bs-gray-700);
    font-family: var(--font-heading);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 12px;
    font-weight: 400;
}
.church-quote p {
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 1.6rem;
}
@media (max-width: 991px) {
    .church-quote {
        max-width: 100%;
    }
}
#blog-background {
    width: 100%;
    /* height: calc(100vw * (16 / 9)); */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-image: url("../images/test.png");
    background-size: contain;
}
#blog-background::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1%;
    background-color: #fff;
}
.blog-card {
    background-color: #fff;
    -webkit-box-shadow: 27px 29px 49px -45px rgba(0, 0, 0, 0.43);
    -moz-box-shadow: 27px 29px 49px -45px rgba(0, 0, 0, 0.43);
    box-shadow: 27px 29px 49px -45px rgba(0, 0, 0, 0.43);
    align-self: stretch;
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: flex-start; */
    /* flex-wrap: nowrap; */
    overflow: hidden;
    align-items: center;
    /* min-width: 300px; */
    /* flex: 1; */
    border: 1px solid rgba(59, 81, 99, 0.1);
    cursor: pointer;
    margin: 2% 0;
    height: 502px;
    margin: auto 0;
}
.blog-card h4 {
    margin-bottom: 1rem;
}
.blog-body {
    display: flex;
    padding: 13.913px 13.913px 13.913px 13.913px;
    flex-direction: column;
    gap: 6.956px;
    align-items: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    flex-wrap: nowrap;
    background-color: rgba(255, 255, 255, 0);
    position: relative;
    z-index: 70;
    height: 250px;
    max-height: 250px;
}
.blog-detail-title {
    font-size: 2.5rem;
}
.blog-detail-txt p,
.prayer-detail-txt p {
    color: rgba(59, 81, 99, 0.9);
}
#right-arrow {
    width: 16px;
    height: 16px;
    background-image: url(../images/arrow-right.png);
}
.owl-carousel .owl-stage-outer {
    overflow: hidden;
    padding-bottom: 12px;
}
.owl-item {
    width: 100%;
    padding-bottom: 50px 20px;
}
.blog-carousel {
    margin: 0 auto;
}
.item {
    width: 100%;
    margin: 0 0 15% 0;
    /* max-width: 360px; */
}
.blog-text {
    height: 5em; /* Height for 3 lines of text (adjust based on font size and line-height) */
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}
.card-image {
    background-blend-mode: normal;
    display: flex;
    height: 250px;
    object-fit: cover;
    width: 100%;
    flex-direction: column;
    align-items: end;
    color: rgba(220, 38, 38, 0.9);
    position: relative;
    background-color: var(--color-text-primary);
}
.blog-section {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    padding: 2em 0;
}
@media (min-width: 992) {
    .blog-section {
        min-height: 100dvh;
    }
}
@media (max-width: 575px) {
    .blog-section {
        min-height: 70dvh;
    }
}
.blog-card .card-header {
    width: 100%;
    background-color: #663399;
}
.card-image img {
    height: 100%;
    object-fit: cover;
}
.date-badge {
    position: absolute;
    right: 4%;
    bottom: -7%;
    width: 70px;
    height: 70px;
    background-color: #fff;
    box-shadow: 0 3.478px 4.348px 0 rgba(79, 79, 79, 0.12);
    display: flex;
    gap: 0;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out,
        top 0.4s ease-in-out;
    color: var(--color-text-secondary);
}
.date-badge h3 {
    margin: 0 0 0.2rem;
    line-height: 18px;
    color: var(--color-text-secondary);
}
.date-badge > p {
    line-height: 17px;
    margin: 0;
    font-size: 12px;
    color: var(--color-text-secondary);
}
.blog-card:hover .date-badge {
    background-color: var(--color-text-secondary);
    color: #fff;
    transition-delay: 0.8s;
    bottom: 5%;
    transition: ease-in-out;
    transition-duration: 0.4s;
}
.blog-card:hover .date-badge h3 {
    color: #fff;
}
.blog-card > p {
    color: var(--color-text-heading);
}
.blog-card > .card-title {
    line-height: 40px;
}
.blog-card:hover .date-badge p {
    color: #fff;
}
.card-content {
    display: flex;
    width: 100%;
    flex-direction: column;
}
.card-title {
    color: var(--color-text-black);
}
.blog-container {
    z-index: 10;
    /* min-height: 80vh; */
    gap: 1vh;
    align-items: center;
}
.blog-container > button {
    width: fit-content;
    margin: 0 auto;
}
.divider {
    background-color: rgba(220, 38, 38, 0.3);
    height: 1px;
    width: 100%;
}
.blog-card .badge-container {
    align-items: center;
}
.blog-card .badge-container .badge {
    display: flex;
    align-items: center;
}
.blog-card .badge-container img {
    margin-top: 0;
    width: 14px;
}
.blog-card .badge-container span {
    font-size: var(--font-size-sm);
    color: var(--color-text-gray);
}
.blog-card:has(p, span) .badge-container p {
    font-size: var(--font-size-sm);
    line-height: 14px;
    width: 100%;
}
.my-next-blog,
.my-next-button,
.my-prev-blog,
.my-prev-button {
    padding: 0.1em 0.8em;
    color: #fff;
    cursor: pointer;
    background-color: var(--color-text-secondary);
}
.quote-container {
    margin-top: 8rem;
}
@media (min-width: 430px) {
    .hero {
        min-height: 10vh;
    }
    .description-secondary,
    p {
        font-size: 1.6rem;
    }
    .about-section img {
        max-width: 80%;
    }
    #dot-pattern-1 {
        right: 5%;
    }
    #dot-pattern-2 {
        /* top: -5%; */
        left: 5%;
    }
    .title {
        font-size: 2.4rem;
    }
    .main-heading {
        font-size: 3.4rem;
        line-height: 50px;
        font-weight: 800;
    }
    .progress-indicators {
        margin-top: 1rem;
    }
    .progress-primary {
        height: 4px;
        width: 12%;
    }
    .prayer-title {
        font-size: 2.5rem;
    }
    #prayer-image {
        min-height: 58vh;
    }
    #quote-image {
        height: 90%;
    }
    .prayer-card h2 {
        font-size: 2.4rem;
    }
    .prayer-card h4,
    .dashboard-pray-card h4 {
        font-size: 2rem;
        line-height: 1.4;
    }
    .blog-container {
        gap: 0.5rem;
        min-height: 0;
    }
    .quote-container {
        min-height: 30dvh;
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 1rem 0;
    }
    h4 {
        font-size: 1.8rem;
    }
    .blog-card h4 {
        font-size: 2rem;
    }
    .blog-card p {
        color: #4b5563;
        line-height: 21px;
    }
    #blog-background {
        min-height: 50vh;
        background-size: cover;
        top: 0;
    }
}
@media (min-width: 760px) {
    .about-section {
        gap: 5%;
    }
    .about-section img {
        height: 50vh;
    }
    .title {
        font-size: 2.4rem;
    }
    .description-primary,
    .description-secondary {
        line-height: 28px;
    }
    #prayer-image {
        height: 50vh;
    }
    .prayer-content h2 {
        font-size: 2rem;
    }
    .container-fluid {
        padding-inline: 10%;
    }
    .blog-container {
        gap: 2vh;
    }
    h4 {
        font-size: 2.4rem;
    }
    .blog-card h4 {
        font-size: 2.2rem;
    }
    .blog-body p {
        font-size: 1.6rem;
        line-height: 24px;
    }
    .blog-section {
        min-height: 0;
        padding: 0 0;
    }
    .blog-text {
        height: 4.4em;
    }
    .blog-detail-title {
        font-size: 3rem;
    }
    #blog-background {
        height: 112vh;
        background-size: cover;
        top: -5%;
    }
}
@media (min-width: 991px) {
    .card-image {
        height: 250px;
    }
    .about-section img {
        height: 70vh;
        margin: 0 auto;
    }
    .welcome-container {
        padding: 24px 0;
        text-align: center;
    }
    .title {
        font-size: 3.2rem;
    }
    .main-heading {
        font-size: 3.8rem;
        line-height: 50px;
    }
    .description-primary,
    .description-secondary {
        font-size: 1.8rem;
        margin-top: 10px;
    }
    .progress-indicators {
        margin-top: 2rem;
    }
    .progress-primary {
        height: 5px;
        width: 12%;
    }
    .prayer-title {
        font-size: 3rem;
    }
    .prayer-description {
        max-width: 100%;
    }
    #prayer-image {
        height: 58vh;
    }
    .blog-section {
        padding: 2em 0;
    }
    #blog-background {
        height: 120vh;
    }
}
@media (min-width: 1200px) {
    .h1,
    h1 {
        font-size: clamp(1.6rem, 5vw, 4.8rem);
        line-height: 1.5;
    }
    p {
        font-size: clamp(1.8rem, 1.2vw, 2rem);
        line-height: 2;
    }
    .about-section img {
        max-width: 80%;
        height: 55vh;
        object-fit: cover;
        margin: 0 auto;
    }
    .title {
        font-size: 2.4rem;
    }
    /* .main-heading {
    font-size: 4.2rem;
    line-height: 64px;
    margin-top: 16px;
  } */
    .progress-primary {
        height: 5px;
        width: 12%;
    }
    #prayer-image {
        /* min-height: 60vh; */
    }
    #blog-background {
        top: -5%;
        height: 100%;
        background-size: cover;
    }
}
@media (min-width: 2400px) {
    .section-text,
    p {
        font-size: 3rem;
    }
    /* .main-heading {
    font-size: 6.4rem;
    line-height: 96px;
  } */
    .description-primary,
    .description-secondary {
        font-size: 3rem;
        line-height: 2;
    }
    .prayer-title {
        font-size: 6rem;
    }
    .prayer-content h2 {
        font-size: 4rem;
    }
    .prayer-content p {
        font-size: 2.4rem;
    }
    #prayer-image {
        /* min-height: 48vh; */
    }
    #blog-background {
        top: -30%;
        height: 190vh;
        background-size: contain;
    }
    #blog-background::before {
        display: none;
    }
    .church-quote {
        font-size: 5rem;
        line-height: 80px;
    }
}
.badge-container {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: var(--spacing-2);
}
.badge {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: var(--spacing-1);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: 17px;
    color: var(--color-text-secondary);
    opacity: 90%;
}
.badge img {
    width: 16px;
    aspect-ratio: square;
}
.badge p {
    line-height: 20px;
    font-size: var(--font-size-base);
    margin: 0;
}
.badge span {
    line-height: 20px;
    font-size: var(--font-size-sm);
    margin: 0;
}
.top-button {
    display: none;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: var(--color-text-secondary);
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px 18px;
    cursor: pointer;

    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.top-button a {
    text-decoration: none;
    color: #fff;
}
.top-button.show {
    display: block;
    transform: translateY(0);
    opacity: 1;
}
.top-button.hide {
    opacity: 0;
    transform: translateY(20px);
}

/* Otp Page */
.otp-container {
    min-height: calc(
        100vh - 87px - 385px
    ); /* Adjust for header and footer height */
    display: flex;
    justify-content: center;
    align-items: center;
}
.otp-card {
    /* width: 310px; */
    border: none;
    /* height: 300px; */
    padding: 3.5rem 6.5rem;
    box-shadow: 0px 5px 20px 0px #d2dae3;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.otp-field {
    flex-direction: row;
    column-gap: 16px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.otp-field input {
    height: 45px;
    width: 42px;
    border-radius: 6px;
    outline: none;
    font-size: 1.5rem;
    text-align: center;
    border: 1px solid #ddd;
}
.otp-field input:focus {
    box-shadow: none;
    border: 2px solid var(--secondary-red);
}
.otp-field input::-webkit-inner-spin-button,
.otp-field input::-webkit-outer-spin-button {
    display: none;
}
.resend-otp {
    font-size: 1.3rem;
}

/* Newly added css */

.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 6rem 0 3rem;
}

.pagination .page-item {
    display: inline-block;
}

.pagination .page-link {
    padding: 10px 15px;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    cursor: pointer;
}

.pagination .active .page-link {
    background-color: #007bff;
    color: #fff;
}

/* @media (max-width: 991px) {
  .input {
    width: 100%;  Always show input on small screens
    opacity: 1;
    visibility: visible;
  }
} */

/* Accordion Section */
.accordion {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 2rem;
}
.accordion-item {
    position: relative;
    border: 0;
}
.accordion-item.active .heading {
    color: var(--color-text-primary);
}
.accordion-item.active .icon {
    background: rgba(169, 31, 35, 0.4);
}
.accordion-item.active .icon:before {
    background: rgba(59, 81, 99, 0.8);
}
.accordion-item.active .icon:after {
    width: 0;
}
.accordion-item .heading {
    display: block;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: 1.6rem;
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 7rem;
    transition: 0.3s ease-in-out;
}
.accordion-item .heading:hover {
    color: var(--color-text-secondary);
}
.accordion-item .heading:hover .icon:before,
.accordion-item .heading:hover .icon:after {
    background: rgba(59, 81, 99, 0.8);
}
.accordion-item .icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 5rem;
    height: 5rem;
    border: 2px solid rgba(59, 81, 99, 0.3);
    border-radius: 3px;
    transform: translateY(-50%);
}
.accordion-item .icon:before,
.accordion-item .icon:after {
    content: "";
    width: 1.5rem;
    height: 0.3rem;
    background: var(--color-text-primary);
    position: absolute;
    border-radius: 3px;
    left: 50%;
    top: 50%;
    transition: 0.3s ease-in-out;
    transform: translate(-50%, -50%);
}
.accordion-item .icon:after {
    transform: translate(-50%, -50%) rotate(90deg);
    z-index: -1;
}
.accordion-item .content {
    display: none;
}
.accordion-item .content p {
    margin-top: 0;
}
@media (min-width: 640px) {
    .accordion-item .heading {
        font-size: 1.8rem;
    }
    .accordion-item .content {
        line-height: 1.75;
    }
}

/* Frequently Asked Questions */
.faq_area {
    position: relative;
    z-index: 1;
    background-color: #f5f5ff;
    padding: 8rem 0;
}

.faq-accordian {
    position: relative;
    z-index: 1;
}
.faq-accordian .card {
    position: relative;
    z-index: 1;
    margin-bottom: 1.5rem;
}
.faq-accordian .card:last-child {
    margin-bottom: 0;
}
.faq-accordian .card .card-header {
    background-color: #ffffff;
    padding: 0;
    border-bottom-color: #ebebeb;
}
.faq-accordian .card .card-header h6 {
    cursor: pointer;
    padding: 1.75rem 2rem;
    color: var(--secondary-red);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.faq-accordian .card .card-header h6 span {
    font-size: 1.5rem;
}
.faq-accordian .card .card-header h6.collapsed {
    color: var(--primary-blue);
}
.faq-accordian .card .card-header h6.collapsed i {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
/* .faq-accordian .card .card-body {
    padding: 1.75rem 2rem;
} */
.faq-accordian .card .card-body p:last-child {
    margin-bottom: 0;
}

/* ===== User Profile Section ===== */
.user-profile-main-container {
    margin-top: 160px;
}
.user-profile-container {
    margin: 0px auto 20px;
    padding: 1.5rem;
    border-radius: 0.375rem;
    background-color: #fff;
    box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.05);
}
.user-profile-cover {
    background: linear-gradient(to right, rgb(247 164 167), rgb(139 189 231));
    height: 130px;
}
.user-profile-img {
    margin-top: 4rem;
    width: 150px;
}
.user-profile-img img {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.05);
}
.profile-add-btn {
    height: 38px;
    font-size: 1.5rem;
    border-radius: 30px;
    padding: 0.5rem 2.5rem;
    background-color: #007bff;
}
.profile-add-btn:hover {
    color: #007bff;
    border: 1px solid #007bff;
    background-color: #fff;
}
.profile-follow-btn {
    height: 38px;
    color: #007bff;
    font-size: 1.5rem;
    border-radius: 30px;
    padding: 0.5rem 2.5rem;
    background-color: #fff;
    border: 1px solid #007bff;
}
.profile-follow-btn:hover {
    color: #fff;
    background-color: #007bff;
}
.profile-intro p {
    font-size: 1.6rem;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}
@media (max-width: 395px) {
    .user-card-content .row button i {
        display: none;
    }
}

/* ===== User Dashboard Section ===== */

.dashboard-sidebar {
    height: 100vh;
    position: sticky;
    max-width: 292px;
    top: 0;
    left: 0%;
    background-color: #343a40;
    color: white;
}
.dashboard-sidebar a {
    color: var(--color-text-primary);
    text-decoration: none;
    padding: 15px;
    display: block;
}
.dashboard-sidebar a:hover {
    background-color: #495057;
    color: #fff;
}
/* @media (max-width: 768px) {
  .dashboard-sidebar {
    position: static;
    height: auto;
  }
} */
.profile-btn {
    z-index: 1;
    color: white;
    font-size: 1.3rem;
    border: 1px solid #0dcaf0;
    background-color: var(--primary-blue);
}
.fren-list-card {
    background-color: #fff;
    padding: 1rem;
    border: 1px solid rgba(59, 81, 99, 0.1);
    box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
}
.fren-list-card img {
    height: 50px;
    width: 50px;
    margin-right: 1rem;
    object-fit: cover;
}
#dashboard-banner {
    position: fixed;
    width: 100%;
    top: 7%;
    right: 0;
    height: 275px;
    background-size: cover;
    background-position: top;
    background-image: url(../images/dashboardBanner.png);
    background-repeat: no-repeat;
}
.dashboard-sidebar .nav-pills .nav-link.active {
    background-color: var(--primary-blue);
}
.filter-container {
    padding: 1.6rem 1rem;
    background-color: #eff6ff;
}
.filter-container .form-select,
.filter-container .form-control {
    font-size: 1.5rem;
}
.filter-container select,
.filter-container input {
    color: rgba(59, 81, 99, 0.7);
}
.filter-container button {
    font-size: 1.5rem;
    padding: 0.4rem 2rem;
}
#plus-icon {
    width: 16px;
    height: 28px;
    background-image: url(../images/plus.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
#tab-edit-icon {
    width: 20px;
    height: 20px;
    background-image: url(../images/tab-edit.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
#startDate::placeholder {
    font-size: 1rem;
    color: #888;
}
/* tabs */
/* Remove this container when use*/
.component-title {
    width: 100%;
    z-index: 9;
    left: 0;
    padding: 0;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #888;
    text-align: center;
}
.tab-container {
    position: relative;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border: none;
}
.nav-tabs .nav-link {
    border: none;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border: none;
    border-bottom: 2px solid var(--secondary-red);
}
.nav-tabs .nav-item .nav-link.active p i {
    color: var(--secondary-red);
}
.indicator {
    content: "";
    width: 100px;
    height: 2px;
    background: var(--secondary-red);
    position: absolute;
    bottom: 0px;
    left: 1%;
    z-index: 9;
    border: 0.5px solid rgba(0, 0, 0, 0.04);
    border-radius: 7px;
    transition: all 0.2s ease-out;
}
.tab {
    width: 100px;
    height: 28px;
    position: absolute;
    z-index: 99;
    outline: none;
    opacity: 0;
    padding: 12px 8px;
}
.tab_label {
    padding: 12px 8px;
    position: relative;
    z-index: 99;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    opacity: 0.6;
    cursor: pointer;
}
.tab--1:checked ~ .tab_label {
    color: var(--secondary-red);
}
.tab--1:checked ~ .indicator {
    left: 1%;
}
.tab--2:checked ~ .indicator {
    width: 130px;
    left: calc(100px + 2%);
}
input[type="file"]::-webkit-file-upload-button {
    /* display: none; */
    padding: 15px;
    border: none;
    /* border-radius: 8px 0 0 8px; */
}
.testimonial-card:hover {
    transform: scale(1.01);
    padding: 0;
}
#profilePicPreview {
    width: 110px;
    height: 110px;
    object-fit: cover;
    z-index: 1;
    margin-top: 7rem;
}

/* Dashboard Card Hover */
.private-badge span {
    color: #dc2626 !important;
}
.public-badge span {
    color: #0891b2 !important;
}
.group-badge span {
    color: #1cb208 !important;
}
.private-badge span i,
.group-badge span i,
.public-badge span i {
    font-size: var(--font-size-sm);
    margin-right: 5px;
}
.dashboard-container {
    max-width: 1000px;
    margin: 90px auto 50px;
    box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.05);
}
.dashboard-pray-card {
    position: relative;
    height: 260px; /* Default height */
    border: 1px solid rgba(169, 31, 35, 0.3);
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}
.dashboard-pray-card .badge-container span {
    color: var(--color-text-gray);
}
.dashboard-pray-card:hover {
    height: 258px; /* Extend the card height */
}
.card-actions-dash {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 12px 0;
    height: 50px;
    width: 100%;
    border-top: 1px solid rgba(169, 31, 35, 0.1);
    transform: none; /* Initially hidden outside the card */
    opacity: 1; /* Initially invisible */
    transition: all 0.3s ease-in-out;
}
.card-actions-dash button:hover {
    transform: scale(1.1);
}
.dashboard-pray-card:hover .card-actions-dash {
    transform: translateY(0); /* Move into view */
    opacity: 1; /* Make visible */
}
.dashboard-saved-pray-card {
    height: 230px !important;
}
.badge-prayer-card-container {
    justify-content: space-between; /* Distribute space between items */
    /* gap: 10px; */
    overflow: hidden; /* Prevent overflow */
    flex-wrap: nowrap; /* Ensure items stay in one row */
    box-sizing: border-box;
}
.dashboard-sche-pray-card {
    position: relative;
    height: 140px;
    border: 1px solid rgba(169, 31, 35, 0.3);
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.08);
}
/* Question Dashboard Card */
.dashboard-ques-card {
  position: relative;
  height: 150px;
  border: 1px solid rgba(169, 31, 35, 0.3);
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}
.dashboard-ques-card:hover {
    height: 200px; /* Extend the card height */
}
.dashboard-ques-card:hover .card-actions-dash {
    transform: translateY(0); /* Move into view */
    opacity: 1; /* Make visible */
}

/* Blog Dashboard Card */
.dashboard-blog-card {
    position: relative;
    height: 500px; /* Default height */
    border: 1px solid rgba(169, 31, 35, 0.3);
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}
.dashboard-blog-card:hover {
    height: 500px;
}
.dashboard-blog-card:hover .card-actions-dash {
    transform: translateY(0); /* Move into view */
    opacity: 1; /* Make visible */
}
/* .dashboard-blog-card .card-actions-dash {
  bottom: -40px;
} */
.dashboard-blog-card h4 {
    font-size: 2rem;
}

@media (min-width: 480px) {
    #profilePicPreview {
        width: 150px;
        height: 150px;
        margin-top: 3rem;
    }
    .tab_label {
        font-size: 1.8rem;
    }
}
@media (min-width: 768px) {
    #profilePicPreview {
        /* width: 100%; */
        /* height: 180px;
    border-left: 1px solid #dee2e6; */
    }
    /* .dashboard-blog-card {
    height: 525px;
  } */
}
@media (min-width: 992px) {
    .dashboard-container {
        margin: 200px auto 50px;
    }
    .dashboard-pray-card {
        height: 210px; /* Extend the card height */
    }
    .dashboard-blog-card {
        height: 455px; /* Extend the card height */
    }
    .card-actions-dash {
        opacity: 0;
        transform: translateY(50px);
    }
}

@media (max-width: 480px) {
    .badge p {
        font-size: var(--font-size-sm);
    }
    .add-dash {
        font-size: 1.5rem;
    }
    #plus-icon {
        width: 12px;
        /* height: 24px; */
    }
    .badge-prayer-card-container {
        width: 90%;
    }
    .badge-prayer-card-container .badge-container .badge span {
        font-size: var(--font-size-sm);
    }
}

/* Dashboard Form Modal */
.form-modal {
    overflow: hidden;
    border: none;
    position: relative;
    padding: 0 !important;
    -webkit-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
    box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
}
.form-modal .form-modal-header {
    position: relative;
    padding: 0;
    border: none;
    height: 150px;
    background: #a91f23;
    background: -moz-linear-gradient(45deg, #a91f23 0%, #3b5163 100%);
    background: -webkit-gradient(
        left bottom,
        right top,
        color-stop(0%, #a91f23),
        color-stop(100%, #3b5163)
    );
    background: -webkit-linear-gradient(45deg, #a91f23 0%, #3b5163 100%);
    background: -o-linear-gradient(45deg, #a91f23 0%, #3b5163 100%);
    background: -ms-linear-gradient(45deg, #a91f23 0%, #3b5163 100%);
    background: linear-gradient(180deg, #a91f23 0%, #3b5163 130%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a91f23', endColorstr='#3b5163', GradientType=1 );
}
.form-modal-header button.close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    margin: 0;
    width: 40px;
    height: 40px;
    z-index: 1;
    color: #fff;
    background-color: unset;
}
.form-modal .form-modal-body {
    border: none;
    overflow: hidden;
    margin-top: -113px;
    z-index: 2;
}
.form-modal .form-modal-body h2 {
    font-weight: 700;
    color: #fff;
}
.form-modal-header:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -35px;
    overflow: visible;
    width: 50%;
    height: 70px;
    z-index: 1;
    -webkit-transform: skewY(-5deg);
    -moz-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    -o-transform: skewY(-5deg);
    transform: skewY(-5deg);
    background-color: #fff;
}
.form-modal-header:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -35px;
    overflow: visible;
    width: 50%;
    height: 70px;
    z-index: 1;
    -webkit-transform: skewY(5deg);
    -moz-transform: skewY(5deg);
    -ms-transform: skewY(5deg);
    -o-transform: skewY(5deg);
    transform: skewY(5deg);
    background-color: #fff;
}
.form-modal form {
    margin-top: 60px;
}
.form-modal form .form-group {
    margin-top: 0;
}
.form-modal label {
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.form-modal .form-control {
    padding: 0.5rem 1rem;
    font-size: 1.6rem;
}
.form-modal .card-footer button {
    padding: 1rem 4rem;
    font-size: 1.5rem;
    background-color: var(--primary-blue);
}

/* Recntly added */

.profile-icon:focus {
    box-shadow: none;
}

#navbarNav {
    top: 63px;
}

input[type="date"]#user-dob {
    text-align: left;
    display: block;
    margin-left: 0;
}

input[type="date"]#user-dob::-webkit-calendar-picker-indicator {
    display: none;
}

/* Choices input */
.choices__input {
    margin: 0 !important;
    padding: 0 !important;
}
.choices__inner {
    min-height: auto !important;
    padding: 6px 7.5px !important;
}
.choices__list--multiple .choices__item {
    border-radius: 2.5px !important;
    padding: 0px 6px !important;
}
.choices[data-type*="select-multiple"] .choices__button,
.choices[data-type*="text"] .choices__button {
    padding-left: 6px !important;
}

.no-hover {
  pointer-events: none;
  cursor: default;
}

.no-hover:hover {
    pointer-events: none;
}

/* Song Language */
.language-section {
    padding: 0 0 5rem;
}
.language-card {
    background: linear-gradient(
        90deg,
        rgba(140, 166, 188, 1) 0%,
        rgba(181, 210, 235, 1) 100%
    );
    /* background: linear-gradient(90deg, rgb(169 31 35 / 50%) 0%, rgb(255 195 197 / 50%) 100%); */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 7px 7px rgba(0, 0, 0, 0.09),
        0px 15px 9px rgba(0, 0, 0, 0.05), 0px 26px 10px rgba(0, 0, 0, 0.01),
        0px 41px 11px transparent;
    transition: 0.2s ease-in-out;
    padding: 3.4rem 2.5rem 2.4rem;
    margin-bottom: 3rem;
    border-radius: 0.375rem;
    position: relative;
}
.language-card:hover {
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1),
        0px 7px 7px rgba(0, 0, 0, 0.09), 0px 15px 9px rgba(0, 0, 0, 0.05),
        0px 26px 10px rgba(0, 0, 0, 0.01), 0px 41px 11px transparent;
}
.language-card img {
    position: absolute;
    top: 10%;
    width: 72px;
    right: 35px;
}
.language-title {
    font-family: "inter", sans-serif;
    font-weight: 700;
    color: #fff;
}
.language-subtitle {
    font-family: "inter", sans-serif;
    opacity: 0.7;
    font-size: 1.25rem;
    font-weight: 300;
    color: #fff;
    z-index: 1;
}
.eng-bg,
.nepali-bg,
.hindi-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
}
.eng-bg {
    background-image: url(../images/english-bg.png);
    opacity: 30%;
}
.nepali-bg {
    background-image: url(../images/nepali-bg.png);
    opacity: 50%;
}
.hindi-bg {
    background-image: url(../images/hindi-bg.png);
    opacity: 30%;
}

/* Song Category */
.song-cat-background {
    background-image: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 1) 25%,
            rgba(255, 255, 255, 0) 100%
        ),
        url(../images/categorysectionbackground.png);
    background-size: cover;
    background-position: center;
    min-height: 65vh;
}
.song-cat-card {
    position: relative;
    background-size: cover;
    background-position: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0px 7px 7px rgba(0, 0, 0, 0.18),
        0px 15px 9px rgba(0, 0, 0, 0.1), 0px 26px 10px rgba(0, 0, 0, 0.02),
        0px 41px 11px transparent;
    transition: 0.2s ease-in-out;
}
.song-cat-card .song-cat-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}
.chorus-card {
    background-image: url(../images/chorusbgimg.jpg);
}
.hymn-card {
    background-image: url(../images/hymnbackground2.png);
}
.other-card {
    background-image: url(../images/otherbackground2.jpg);
}
.song-cat-card:hover {
    box-shadow: none;
}
.song-cat-title {
    font-family: "domine", sans-serif;
    font-size: 2.5rem;
}
/* Song list */
.song-list-lang {
    width: 8%;
    margin-right: 15px;
}
.song-list-cat {
    width: 20%;
}
.music-card {
    background-color: #f5e8e8;
    border-radius: 5px;
    border: 1px solid #fff;
    padding: 5px;
    max-width: 600px;
    height: min-content;
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    margin: 10px 0;
    color: white;
    position: relative;
    left: 30px;
    box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.15);
}
.profile-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-image: url("../images/song-list.jpg");
    background-size: cover;
    background-position: center;
    position: absolute;
    left: -45px;
    top: -40px;
}
.music-icon-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.music-info {
    margin-left: 50px;
}
.music-info small {
    margin: 0 0 0 2px;
    font-size: 12px;
    color: #474747;
}
.stat-icon {
    font-size: 12px;
    color: #474747;
}
.headphones-img {
    opacity: 0.5;
    height: 80px;
    margin: 0 20px 0 0;
}
.recent-lyrics {
    border: 1px solid #ccc;
}
.recent-lyrics img {
    height: 60px;
    width: 60px;
}
.cust-lyric-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
}
/* .interactive button {
  border: 0;
  border-radius: 0.5rem;
  padding: 0.5rem;
  width: 40px;
  background-color: rgb(241, 241, 241);
} */
.interactive a {
    border: 0;
    border-radius: 0.5rem;
    padding: 0.5rem;
    width: 40px;
    background-color: rgb(241, 241, 241);
}
.interactive a i {
    color: var(--secondary-red);
}
.interactive a i:hover {
    color: var(--primary-blue);
}

/* Worship */

.worship-list-card {
    transition: all 0.3s ease;
}
.worship-list-card {
    position: relative;
    border-radius: 6px;
    height: 258px;
    border: 1px solid rgba(169, 31, 35, 0.3);
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}
.worship-list-card::before {
  position: absolute;
  width: 10%;
  background-color: red;
}
.worship-list-card:hover {
    height: 259px;
}
.worship-list-card:hover .card-actions-dash {
    transform: translateY(0);
    opacity: 1;
}
.worship-date {
    display: flex;
    align-items: center;
    background-color: var(--primary-blue);
    color: #fff;
    gap: 15px;
    padding: 10px 16px;
}
.worship-date span {
    font-weight: 600;
    border-left: 1px solid #fff;
    padding-left: 12px;
    color: #fff;
}
.worship-card-detail {
    padding: 10px 14px 0px;
    height: 100px;
}
.worship-card-detail img {
  position: absolute;
  right: -24px;
  top: 40px;
  opacity: 0.1;
  width: 35%;
}
.worship-list p {
    font-family: "Domine", serif;
    font-size: 1.8rem;
    color: #6b7280;
    margin-bottom: 0;
}
.worship-list p span {
    position: relative;
    display: inline-block;
    width: 11px;
    text-align: center;
    color: var(--primary-blue);
    margin-right: 8px;
}
.worship-list p span::before {
    content: "";
    position: absolute;
    background-color: var(--secondary-red);
    width: 100%;
    bottom: 4px;
    left: 0;
    height: 2px;
}
.worship-remark {
    padding: 4px 10px;
    background-color: #f7f7f7;
    border-top: 1px solid #dee2e6;
}
.worship-remark p {
    font-size: 1.6rem;
    margin-bottom: 0;
    color: var(--primary-blue);
}
.worship-remark-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--secondary-red);
}
.worship-remark-title span {
    margin: 0;
    font-size: 1.4rem;
}
.worship-remark .worship-remark-title svg {
    height: 2rem;
    width: 1.6rem;
}
.remark-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 992px) {
    .worship-list-card {
        height: 210px;
    }
}

/* Worship End */

/* Worship detail */
#worship-heading {
    text-transform: uppercase;
    color: var(--primary-blue);
    display: flex;
}

#worship-msform {
    text-align: center;
    position: relative;
    margin-top: 35px;
}

#worship-msform fieldset:not(:first-of-type) {
    display: none;
}

#worship-msform .action-button {
    width: 100px;
    background: var(--secondary-red);
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 0px 10px 5px;
    float: right;
}

#worship-msform .action-button:hover,
#worship-msform .action-button:focus {
    background-color: var(--primary-blue);
}

#worship-msform .action-button-previous {
    width: 100px;
    background: #616161;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px 10px 0px;
    float: right;
}

#worship-msform .action-button-previous:hover,
#worship-msform .action-button-previous:focus {
    background-color: #000000;
}

.worship-card {
    z-index: 0;
    border: none;
    position: relative;
}

.fs-title {
    font-size: 25px;
    color: var(--secondary-red);
    margin-bottom: 15px;
    font-weight: normal;
    text-align: left;
}

.purple-text {
    color: var(--secondary-red);
    font-weight: normal;
}

.steps {
    font-size: 25px;
    color: gray;
    margin-bottom: 10px;
    font-weight: normal;
    text-align: right;
}

.fieldlabels {
    color: gray;
    text-align: left;
}

#worship-progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey;
}

#worship-progressbar .active {
    color: var(--secondary-red);
}

#worship-progressbar li {
    list-style-type: none;
    font-size: 15px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 400;
}

#worship-progressbar .music-ico:before {
    font-family: "Font Awesome 5 Free" !important;
    content: "\f001";
    font-weight: 600;
}

#worship-progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px;
}

#worship-progressbar li:after {
    content: "";
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: -1;
}

#worship-progressbar li.active:before {
    background: var(--secondary-red);
    border: 1px solid rgba(169, 31, 35, 0.3);
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    content: "";
}

.progress {
    height: 20px;
}

.progress-bar {
    background-color: var(--secondary-red);
}

.fit-image {
    width: 100%;
    object-fit: cover;
}

#sidebar-nav .nav-link.active {
    background-color: #f8f9fa;
    border-left: 3px solid #0d6efd;
    color: #0d6efd;
    font-weight: bold;
}

#sidebar-nav .nav-link {
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

#sidebar-nav .nav-link:hover {
    background-color: #f8f9fa;
}

.selectedPrayerTableBody {
    cursor: move;
}

/* Default: normal single column */
/* Default single column view */
.description-content {
    column-count: 1;
    column-gap: 2rem;
}

/* Fullscreen view */
.custom-block-info:fullscreen {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally center */
    justify-content: center; /* Vertically center */
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    padding: 2rem;
    background-color: white; /* Avoid black background */
    box-sizing: border-box;
}

/* Description content adjustments */
.custom-block-info:fullscreen .description-content {
    column-count: 2;
    column-gap: 2rem;
    font-size: 1.2rem;
    color: #000;
    width: 100%;
    max-width: 90%; /* To prevent overflow */
    height: auto;
}

.description-columns {
    column-count: 2;
    column-gap: 40px;
}

.description-columns p {
    white-space: pre-wrap;
    line-height: 1.7;
    font-size: 1.1rem;
}

/* Responsive fallback: 1 column on small screens */
@media (max-width: 768px) {
    .description-columns {
        column-count: 2;
        column-gap: 10px;
    }

    .description-columns p {
        /* white-space: pre-wrap; */
        font-size: 10px;
    }
}

/* Bible Section css */

.bible-header {
    padding: 19px 0;
    margin-bottom: 10px;
}

/* navbar */
.header-list {
    list-style: none;
    display: inline-flex;
    gap: 2rem;
    padding: 0;
    margin: 0;
}
.bible-header a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    font-family: var(--primary-font);
    font-size: clamp(1.3rem, 1.2vw, 1.6rem);
}

.bible-header img {
    width: 18px;
    height: 18px;
    margin-left: 11px;
}
.active-item {
    font-weight: bold;
    color: var(--primary-blue);
    position: relative;
}
.active-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1rem;
    width: 100%;
    height: 3px;
    background-color: var(--secondary-red);
}
.hover-item {
    position: relative;
}
.hover-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1rem;
    width: 0%;
    height: 3px;
    background-color: var(--secondary-red);
    transition: all 0.3s ease;
}
.hover-item:hover::after {
    width: 100%;
}

/* breadcrumb-navigation */
.breadcrumb-navigation {
    margin: 1rem 0;
}
.breadcrumb-navigation a {
    margin-left: 5px;
    font-size: clamp(0.875rem, 1vw, 1.6rem);
    color: var(--primary-blue);
    font-weight: 500;
    padding: 8px 10px;
    border-radius: 6px;
}

.breadcrumb-navigation .active {
    font-weight: 500 !important;
    color: var(--secondary-red);
    background-color: #f3f3f3;
}

/* verse section css */
.verse-section,
.chapter-section {
    padding: 3rem 0;
    background-color: #faf8f7;
}
.main-section {
    position: relative;
    margin: 15px 0 20px 0;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 32px 45px;
    background-color: white;
    border-bottom: 5px solid var(--secondary-red);
    z-index: 20;
    transition: all 0.3s ease;
}
.main-section:hover {
    box-shadow: none;
}
.main-section img:nth-child(1) {
    position: absolute;
    right: 50%;
    top: 47%;
    transform: translate(50%, -50%);
    opacity: 0.1;
    width: 60px;
    z-index: 5;
}
.light {
    position: absolute;
    right: 0;
    top: -90px;
    z-index: 10;
    width: clamp(6.25rem, 5.125rem + 4.5vw, 14rem);
    opacity: 0.2;
}

.main-section h4 {
    font-size: clamp(1rem, 0.712rem + 1.15vw, 1.75rem);
    font-family: var(--secondary-font);
    font-weight: 600;
    line-height: 36px;
}
.main-section h4 .translation {
    color: #bc895b;
    font-size: clamp(1rem, 1.8vw, 1.5rem);
}
.main-section h4 .line {
    margin: 0 10px 0 10px;
    font-weight: 400;
}

.main-section p {
    font-size: clamp(1.5rem, 1.4vw, 2rem);
    font-family: var(--primary-font);
    color: #4b4b4f;
}

.verse-counter {
    position: absolute;
    right: 1rem;
    color: var(--secondary-red) !important;
    text-decoration: underline;
    font-family: var(--secondary-font) !important;
    font-size: clamp(0.9375rem, 1.6vw, 1.25rem) !important;
    font-weight: 600;
}
.btn-container {
    margin-bottom: 30px;
}
/* .btn-primary {
  background-color: var(--secondary-color);
  border: none;
  border-radius: 12px;
  padding: 11px 0;
  width: 100%;
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  font-weight: 600;
  color: #4a515a;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background-color: var(--secondary-red);
  color: white;
} */

.verse-navigation {
    border-radius: 12px;
    border: 1px solid #d6d6d6;
}
.previousbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    color: white;
    border-right: 1px solid #d6d6d6;
    border-radius: 12px 0 0 12px;
    background-color: var(--secondary-red);
    transition: all 0.3s ease;
}
.previousbtn:hover {
    background-color: var(--primary-blue);
    color: white;
}
.previousbtn:hover i {
    animation: fa-fade 1.2s infinite;
}
.nextbtn {
    border-radius: 0 12px 12px 0;
    border-left: 1px solid #d6d6d6;
}
.info {
    padding: 1rem 1.5rem;
}
.info p:nth-child(1) {
    font-size: clamp(0.625rem, 0.8vw, 1.4rem);
    color: #6d727a;
    margin-bottom: 8px;
}
.info p:nth-child(2) {
    font-size: clamp(0.75rem, 1vw, 1.8rem);
    color: var(--primary-blue);
    font-weight: bold;
}
.bible-read-more a {
    font-weight: 500;
    color: var(--secondary-red);
}

/* chapter section css */
/* scrollbar style */
.translation-dropdown::-webkit-scrollbar-thumb,
.scroll-section::-webkit-scrollbar-thumb,
.scroll-section-2::-webkit-scrollbar-thumb {
    background-color: var(--secondary-red);
    border-radius: 6px;
}
.translation-dropdown::-webkit-scrollbar-track,
.scroll-section::-webkit-scrollbar-track,
.scroll-section-2::-webkit-scrollbar-track {
    background: var(--secondary-color);
}
.translation-dropdown::-webkit-scrollbar,
.scroll-section::-webkit-scrollbar,
.scroll-section-2::-webkit-scrollbar {
    width: 4px;
}
/* translation dropdown */

.translation-dropdown {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    height: 300px;
    overflow: auto;
    padding: 10px;
}

.translation-dropdown .dropdown-item {
    background-color: #fff;
    border-radius: 10px;
    padding: 12px 54px 12px 16px;
    margin-bottom: 10px;
    border: none;
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.1) !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: background-color 0.2s ease;
}
.translation-dropdown .dropdown-item:hover {
    background-color: #f1f1f1;
}
.translation-dropdown .dropdown-item:hover .title-shortform {
    background-color: var(--primary-blue);
}
.size-6 {
    width: 16px;
    margin-right: 4px;
}
.current-translation {
    border: 1.5px solid var(--secondary-red) !important;
    border-radius: 6px;
    position: relative;
}
.current-translation i {
    position: absolute;
    right: 9px;
    top: 0;
    color: var(--secondary-red);
    font-size: clamp(1.125rem, 2vw, 1.25rem);
}
.current-translation:hover {
    background-color: inherit !important;
}
.current-translation:hover .title-shortform {
    background-color: var(--secondary-red) !important;
}
/* .translation-status {
  position: static;
  padding: 6px 6px;
  font-size: 10px;
  color: white;
  background-color: var(--secondary-red);
  border-radius: 20px;
} */
.translation-title {
    font-family: var(--primary-font);
    font-size: clamp(0.75rem, 1vw, 1.4rem);
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #333;
}
.title-shortform {
    font-family: var(--primary-font);
    border-radius: 6px;
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    padding: 3px 6px;
    margin-top: 6px;
    margin-bottom: 0;
    color: white;
    background-color: var(--secondary-red);
    transition: all 0.3s ease;
}
.dropdown-menus .btn-dropdown {
    background-color: transparent !important;
    color: #212529;
    border: none;
    border-radius: 0.5rem;
    padding: 0rem 1rem;
    font-size: clamp(1.3rem, 1.2vw, 1.6rem);
    cursor: pointer;
    font-weight: 500;
    opacity: 0.7;
    transition: all 0.3s ease;
}
.dropdown-menus .btn-dropdown:hover {
    color: black;
    opacity: 1;
}
.btn-secondary.dropdown-toggle.show {
    color: #000 !important;
}

/* book dropdown style */

.section-header {
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: var(--secondary-red);
    padding-left: 0.5rem;
}
.dropdown-menu-custom {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    width: 100%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    height: 300px;
}

.scroll-section {
    display: relative;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}
.bible-icon {
    position: absolute;
    top: 50%;
    color: var(--secondary-red);
    opacity: 0.2;
    font-size: 50px;
}
.scroll-section-2 {
    max-height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 50%;
}
.two-column-list {
    columns: 2;
    column-gap: 1rem;
}
/* old and new testament */
.old-testament .dropdown-item,
.new-testament .dropdown-item {
    border-bottom: 2px solid #cacaca;
    border-radius: 10px;
    padding: 10px 13px;
    color: #333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.old-testament .dropdown-item {
    background-color: #f7f6f6;
}
.new-testament .dropdown-item {
    background-color: #f3f8fd;
}
.new-testament .dropdown-item {
    margin-left: 10px;
}
.old-testament .dropdown-item::before {
    color: var(--secondary-red);
}
.new-testament .dropdown-item::before {
    color: var(--primary-blue);
}
.ot-icon {
    color: var(--secondary-red);
    font-size: clamp(0.875rem, 1vw, 1rem);
    margin-right: 6px;
}
.new-testament .ot-icon {
    color: var(--primary-blue);
}

.current-testament {
    background-color: transparent !important;
    color: var(--secondary-red) !important;
    font-weight: 500 !important;
    border: 1.5px solid var(--secondary-red) !important;
}
.current-verse {
    color: var(--secondary-red) !important;
    font-weight: bold !important;
}
.current-testament:hover,
.current-verse:hover {
    color: var(--secondary-red);
    font-weight: bold;
    background-color: white;
}
.book-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 20px;
    margin-bottom: 5px;
    font-size: clamp(0.875rem, 1vw, 1.4rem);
    font-weight: 400;
    letter-spacing: 0.3px;
    border: 1.5px solid white;
    transition: all 0.4s ease;

    font-family: var(--secondary-font);
}
.book-dropdown .dropdown-item:hover {
    border-bottom: 2px solid var(--primary-blue);
}

/* main section */
.open-book {
    position: absolute;
    top: 0;
    right: -110px;
    transform: rotate(30deg);
    opacity: 0.2;
    width: 14%;
}
.chap-info {
    position: relative;
    margin-bottom: 9px;
    background-color: white;
    padding: 1rem 1.56rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.chap-info h4 {
    font-weight: 600;
    font-size: clamp(1rem, 1.2vw, 1.8rem);
}
.chap-info .total-verses {
    margin: 5px 0;
    font-size: clamp(0.6875rem, 1vw, 1.4rem);
    color: #6d727a;
}
.chap-info .total-read {
    font-size: clamp(0.875rem, 1vw, 0.9375rem);
    color: #353336;
}
.chap-info:hover {
    background-color: #f7f7f7;
}
.status {
    position: absolute;
    right: 24px;
    top: 16px;
    border-radius: 20px;
    background-color: var(--secondary-red);
    color: white;
    padding: 0.4rem 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.Read-btn {
    color: var(--secondary-red);
    border: 1px solid var(--secondary-red);
    background-color: white;
    transition: all 0.3s ease;
}
.Read-btn:hover {
    background-color: var(--secondary-red);
    color: white;
}
.currently-reading {
    border: 1.3px solid rgb(192, 183, 183);
}

.book-items li {
    margin-bottom: 10px !important;
}
.book-items h6 {
    margin-bottom: 0;
    line-height: 36px;
}

/* media query */
@media (max-width: 580px) {
    .container {
        width: auto;
    }
}
@media (max-width: 1300px) {
    .light {
        top: -100px;
    }
}
@media (max-width: 970px) {
    .light {
        top: -76px;
    }
}