:root {
            --primary-blue: #0b2463;
            --secondary-blue: #143d8f;
            --light-blue: #eaf2ff;
            --gold: #f4b942;
            --orange: #ff7a18;
            --pink: #ec407a;
            --purple: #6f42c1;
            --white: #ffffff;
            --dark: #111c35;
            --muted: #667085;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: "Segoe UI", Arial, sans-serif;
            background: #f5f8ff;
            color: var(--dark);
        }

        .church-message-section {
            position: relative;
            min-height: 100vh;
            padding: 75px 0;
            overflow: hidden;
            background:
                radial-gradient(circle at 8% 18%, rgba(255, 185, 66, 0.18), transparent 24%),
                radial-gradient(circle at 92% 15%, rgba(111, 66, 193, 0.15), transparent 25%),
                radial-gradient(circle at 85% 90%, rgba(20, 61, 143, 0.12), transparent 26%),
                linear-gradient(135deg, #fffaf0 0%, #f2f7ff 48%, #fff4fa 100%);
        }

        .background-shape {
            position: absolute;
            border-radius: 50%;
            filter: blur(2px);
            pointer-events: none;
            animation: floatingShape 8s ease-in-out infinite;
        }

        .shape-one {
            width: 230px;
            height: 230px;
            top: -85px;
            left: -70px;
            background: linear-gradient(135deg, rgba(255, 122, 24, 0.18), rgba(244, 185, 66, 0.08));
        }

        .shape-two {
            width: 180px;
            height: 180px;
            right: -55px;
            top: 28%;
            background: linear-gradient(135deg, rgba(111, 66, 193, 0.15), rgba(236, 64, 122, 0.08));
            animation-delay: 1.5s;
        }

        .shape-three {
            width: 260px;
            height: 260px;
            bottom: -130px;
            left: 35%;
            background: linear-gradient(135deg, rgba(20, 61, 143, 0.13), rgba(60, 199, 255, 0.08));
            animation-delay: 3s;
        }

        @keyframes floatingShape {
            0%, 100% {
                transform: translateY(0) scale(1);
            }
            50% {
                transform: translateY(-18px) scale(1.04);
            }
        }

        .section-heading-box {
            position: relative;
            margin: 0 auto 42px;
            padding: 5px;
            border-radius: 10px;
            background: #fdfff0;
            background-size: 300% 300%;
            box-shadow:
                0 22px 45px rgba(11, 36, 99, 0.18),
                0 0 30px rgba(236, 64, 122, 0.12);
            animation: headingGradient 8s ease infinite;
        }

        @keyframes headingGradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .section-heading-inner {
            position: relative;
            padding: 30px 25px;
            text-align: center;
            overflow: hidden;
            border-radius: 10px;
            background:
                linear-gradient(135deg, rgba(10, 33, 89, 0.97), rgba(91, 43, 135, 0.95));
        }

        .section-heading-inner::before {
            content: "";
            position: absolute;
            width: 190px;
            height: 190px;
            top: -115px;
            left: -50px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.09);
        }

        .section-heading-inner::after {
            content: "";
            position: absolute;
            width: 150px;
            height: 150px;
            right: -55px;
            bottom: -105px;
            border-radius: 50%;
            background: rgba(244, 185, 66, 0.16);
        }

        .section-heading-icon {
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 63px;
            height: 63px;
            margin-bottom: 13px;
            border: 2px solid rgba(255, 255, 255, 0.6);
            border-radius: 18px;
            color: #fff4b5;
            font-size: 27px;
            background: linear-gradient(135deg, #ff7a18, #ec407a);
            box-shadow:
                0 12px 24px rgba(0, 0, 0, 0.24),
                0 0 20px rgba(255, 190, 70, 0.35);
            animation: iconGlow 2.5s ease-in-out infinite;
        }

        @keyframes iconGlow {
            0%, 100% {
                transform: translateY(0);
                box-shadow:
                    0 12px 24px rgba(0, 0, 0, 0.24),
                    0 0 15px rgba(255, 190, 70, 0.28);
            }
            50% {
                transform: translateY(-5px);
                box-shadow:
                    0 18px 30px rgba(0, 0, 0, 0.22),
                    0 0 28px rgba(255, 190, 70, 0.52);
            }
        }

        .section-title {
            position: relative;
            z-index: 2;
            margin: 0 0 8px;
            color: var(--white);
            font-size: clamp(28px, 4vw, 46px);
            font-weight: 900;
            letter-spacing: 0.5px;
        }

        .section-subtitle {
            position: relative;
            z-index: 2;
            max-width: 700px;
            margin: 0 auto;
            color: rgba(255, 255, 255, 0.84);
            font-size: 16px;
            line-height: 1.8;
        }

        .messages-wrapper {
            position: relative;
            z-index: 2;
            padding: 14px;
            border: 1px solid rgba(20, 61, 143, 0.12);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.65);
            box-shadow: 0 30px 65px rgba(23, 46, 97, 0.13);
            backdrop-filter: blur(15px);
        }

        .message-sidebar {
            position: relative;
            height: 720px;
            padding: 18px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.24);
            border-radius: 10px;
            background:
                radial-gradient(circle at top right, rgba(255, 185, 66, 0.24), transparent 26%),
                linear-gradient(165deg, #081c4d, #123e8a 58%, #0b285f);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.16),
                0 20px 45px rgba(8, 28, 77, 0.25);
        }

        .message-sidebar::before {
            content: "";
            position: absolute;
            width: 170px;
            height: 170px;
            top: -110px;
            right: -90px;
            border: 25px solid rgba(255, 255, 255, 0.05);
            border-radius: 50%;
        }

        .sidebar-header {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 13px;
            margin-bottom: 17px;
            padding: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.09);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
        }

        .sidebar-header-icon {
            display: flex;
            flex: 0 0 48px;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 14px;
            color: #0b2463;
            font-size: 21px;
            background: linear-gradient(135deg, #fff7c7, #f4b942);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
        }

        .sidebar-header h3 {
            margin: 0 0 3px;
            color: var(--white);
            font-size: 18px;
            font-weight: 800;
        }

        .sidebar-header p {
            margin: 0;
            color: rgba(255, 255, 255, 0.67);
            font-size: 12px;
        }

        .message-list {
            position: relative;
            z-index: 2;
            height: calc(100% - 97px);
            padding-right: 5px;
            overflow-y: auto;
        }

        .message-list::-webkit-scrollbar {
            width: 5px;
        }

        .message-list::-webkit-scrollbar-track {
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.08);
        }

        .message-list::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: linear-gradient(#f4b942, #ff7a18);
        }

        .message-title-item {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 82px;
            margin-bottom: 11px;
            padding: 12px;
            overflow: hidden;
            cursor: pointer;
            user-select: none;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 16px;
            color: rgba(255, 255, 255, 0.9);
            background:
                linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.11),
                    rgba(255, 255, 255, 0.045)
                );
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
            transition: all 0.35s ease;
        }

        .message-title-item::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 65%;
            height: 100%;
            transform: skewX(-22deg);
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.16),
                transparent
            );
            transition: left 0.6s ease;
        }

        .message-title-item:hover::before {
            left: 140%;
        }

        .message-title-item:hover {
            transform: translateX(5px);
            border-color: rgba(244, 185, 66, 0.5);
            background: rgba(255, 255, 255, 0.14);
        }

        .message-title-item.active {
            transform: translateX(4px);
            border-color: rgba(255, 238, 163, 0.9);
            color: #102353;
            background: linear-gradient(135deg, #fff7c7, #f4b942);
            box-shadow:
                0 12px 24px rgba(0, 0, 0, 0.2),
                0 0 18px rgba(244, 185, 66, 0.3);
        }

        .message-list-icon {
            display: flex;
            flex: 0 0 48px;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            margin-right: 12px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 14px;
            font-size: 19px;
            background: rgba(255, 255, 255, 0.1);
            transition: 0.35s;
        }

        .message-title-item.active .message-list-icon {
            color: var(--white);
            border-color: transparent;
            background: linear-gradient(135deg, #ff7a18, #ec407a);
            box-shadow: 0 7px 16px rgba(133, 50, 79, 0.25);
        }

        .message-title-text {
            flex: 1;
            min-width: 0;
        }

        .message-title-text h4 {
            margin: 0 0 5px;
            font-size: 14px;
            font-weight: 800;
            line-height: 1.35;
        }

        .message-title-text span {
            display: block;
            overflow: hidden;
            color: rgba(255, 255, 255, 0.58);
            font-size: 11px;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .message-title-item.active .message-title-text span {
            color: rgba(16, 35, 83, 0.68);
        }

        .message-arrow {
            margin-left: 8px;
            font-size: 13px;
            opacity: 0.55;
            transition: 0.3s;
        }

        .message-title-item.active .message-arrow {
            transform: translateX(3px);
            opacity: 1;
        }

        .message-content-panel {
            position: relative;
            min-height: 720px;
            padding: 34px;
            overflow: hidden;
            border: 1px solid rgba(19, 58, 132, 0.1);
            border-radius: 10px;
            background:
                radial-gradient(circle at 92% 8%, rgba(244, 185, 66, 0.17), transparent 22%),
                radial-gradient(circle at 5% 92%, rgba(111, 66, 193, 0.1), transparent 24%),
                linear-gradient(145deg, #ffffff, #f9fbff);
            box-shadow:
                inset 0 1px 0 #ffffff,
                0 20px 45px rgba(28, 62, 120, 0.1);
        }

        .message-content-panel::after {
            content: "\f647";
            position: absolute;
            right: -20px;
            bottom: -50px;
            color: rgba(20, 61, 143, 0.035);
            font-family: "Font Awesome 6 Free";
            font-size: 220px;
            font-weight: 900;
            transform: rotate(-8deg);
            pointer-events: none;
        }

        .message-content {
            position: relative;
            z-index: 2;
            display: none;
            animation: messageFade 0.55s ease;
        }

        .message-content.active {
            display: block;
        }

        @keyframes messageFade {
            from {
                opacity: 0;
                transform: translateY(18px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .message-top-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 23px;
        }

        .message-category {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 15px;
            border: 1px solid rgba(255, 122, 24, 0.17);
            border-radius: 50px;
            color: #b84b00;
            font-size: 12px;
            font-weight: 800;
            background: linear-gradient(135deg, #fff4e6, #fff9df);
        }

        .message-date {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #74809a;
            font-size: 12px;
            font-weight: 600;
        }

        .content-heading-box {
            position: relative;
            margin-bottom: 25px;
            padding: 22px 23px 22px 27px;
            overflow: hidden;
            border: 1px solid rgba(20, 61, 143, 0.12);
            border-radius: 10px;
            background:
                linear-gradient(120deg, rgba(11, 36, 99, 0.98), rgba(41, 83, 164, 0.94));
            box-shadow: 0 16px 32px rgba(11, 36, 99, 0.19);
        }

        .content-heading-box::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 7px;
            height: 100%;
            background: linear-gradient(#f4b942, #ff7a18, #ec407a);
        }

        .content-heading-box::after {
            content: "";
            position: absolute;
            width: 130px;
            height: 130px;
            right: -70px;
            top: -65px;
            border: 20px solid rgba(255, 255, 255, 0.06);
            border-radius: 50%;
        }

        .content-heading-box h2 {
            position: relative;
            z-index: 2;
            margin: 0 0 9px;
            color: var(--white);
            font-size: clamp(25px, 3vw, 28px);
            font-weight: 500;
            line-height: 1.25;
            text-transform: uppercase;
        }

        .content-heading-box p {
            position: relative;
            z-index: 2;
            max-width: 700px;
            margin: 0;
            color: rgba(255, 255, 255, 0.75);
            font-size: 14px;
            line-height: 1.65;
        }

        .bible-verse-box {
            position: relative;
            margin-bottom: 25px;
            padding: 22px 24px 22px 72px;
            overflow: hidden;
            border: 1px solid rgba(244, 185, 66, 0.35);
            border-radius: 17px;
            color: #513a00;
            background:
                linear-gradient(135deg, #fff8d7, #fffdf3);
            box-shadow: 0 13px 30px rgba(132, 96, 12, 0.09);
        }

        .verse-icon {
            position: absolute;
            top: 21px;
            left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 12px;
            color: var(--white);
            background: linear-gradient(135deg, #f4b942, #ff7a18);
            box-shadow: 0 8px 15px rgba(255, 122, 24, 0.23);
        }

        .bible-verse-box p {
            margin: 0 0 8px;
            font-size: 15px;
            font-weight: 700;
            font-style: italic;
            line-height: 1.75;
        }

        .bible-verse-box span {
            color: #b26e00;
            font-size: 12px;
            font-weight: 900;
            letter-spacing: 0.5px;
        }

        .message-body {
            color: #4f5e78;
            font-size: 15px;
            line-height: 1.9;
        }

        .message-body p {
            margin-bottom: 17px;
        }

        .message-point-box {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            margin: 19px 0;
            padding: 17px;
            border: 1px solid rgba(20, 61, 143, 0.11);
            border-radius: 15px;
            background: linear-gradient(135deg, #f5f8ff, #ffffff);
            box-shadow: 0 9px 22px rgba(20, 61, 143, 0.06);
        }

        .point-icon {
            display: flex;
            flex: 0 0 42px;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 13px;
            color: var(--white);
            background: linear-gradient(135deg, #6f42c1, #ec407a);
        }

        .message-point-box h5 {
            margin: 0 0 4px;
            color: #132a5e;
            font-size: 15px;
            font-weight: 850;
        }

        .message-point-box p {
            margin: 0;
            color: #6b7690;
            font-size: 13px;
            line-height: 1.7;
        }

        .pastor-info {
            display: flex;
            align-items: center;
            gap: 13px;
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px dashed rgba(20, 61, 143, 0.18);
        }

        .pastor-avatar {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 51px;
            height: 51px;
            border: 3px solid #ffffff;
            border-radius: 50%;
            color: #ffffff;
            font-size: 20px;
            background: linear-gradient(135deg, #0d6efd, #6f42c1);
            box-shadow:
                0 0 0 2px #f4b942,
                0 8px 17px rgba(20, 61, 143, 0.18);
        }

        .pastor-info h6 {
            margin: 0 0 3px;
            color: #132a5e;
            font-size: 14px;
            font-weight: 850;
        }

        .pastor-info span {
            color: #8490a7;
            font-size: 12px;
        }

        .mobile-message-toggle {
            display: none;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 14px;
            padding: 14px 17px;
            cursor: pointer;
            border: 1px solid rgba(20, 61, 143, 0.15);
            border-radius: 15px;
            color: #ffffff;
            background: linear-gradient(135deg, #0b2463, #6f42c1);
            box-shadow: 0 12px 25px rgba(20, 61, 143, 0.2);
        }

        .mobile-message-toggle span {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: 800;
        }

        .mobile-message-toggle i:last-child {
            transition: transform 0.35s ease;
        }

        .mobile-message-toggle.open i:last-child {
            transform: rotate(180deg);
        }

        @media (max-width: 991.98px) {
            .church-message-section {
                padding: 55px 0;
            }

            .messages-wrapper {
                padding: 10px;
                border-radius: 22px;
            }

            .mobile-message-toggle {
                display: flex;
            }

            .message-sidebar {
                display: none;
                height: auto;
                max-height: 500px;
                margin-bottom: 14px;
            }

            .message-sidebar.mobile-open {
                display: block;
                animation: mobileSidebarOpen 0.4s ease;
            }

            @keyframes mobileSidebarOpen {
                from {
                    opacity: 0;
                    transform: translateY(-12px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .message-list {
                height: auto;
                max-height: 380px;
            }

            .message-content-panel {
                min-height: auto;
                padding: 27px;
            }
        }

        @media (max-width: 575.98px) {
            .church-message-section {
                padding: 38px 0;
            }

            .section-heading-box {
                margin-bottom: 27px;
                border-radius: 19px;
            }

            .section-heading-inner {
                padding: 24px 15px;
                border-radius: 15px;
            }

            .section-heading-icon {
                width: 55px;
                height: 55px;
                font-size: 23px;
            }

            .section-subtitle {
                font-size: 13px;
                line-height: 1.7;
            }

            .message-content-panel {
                padding: 18px;
                border-radius: 17px;
            }

            .message-top-meta {
                align-items: flex-start;
                flex-direction: column;
                gap: 9px;
            }

            .content-heading-box {
                padding: 20px 17px 20px 22px;
            }

            .content-heading-box h2 {
                font-size: 24px;
            }

            .bible-verse-box {
                padding: 65px 18px 19px;
            }

            .verse-icon {
                top: 17px;
                left: 18px;
            }

            .message-body {
                font-size: 14px;
                line-height: 1.8;
            }

            .message-point-box {
                padding: 14px;
            }

            .point-icon {
                flex-basis: 38px;
                width: 38px;
                height: 38px;
            }
        }