* {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background: #f7f9ff;
            font-family: "Nunito", sans-serif;
            color: #18233b;
        }

        .bible-plan-detail-section {
            position: relative;
            width: 100%;
            padding: 70px 15px;
            overflow: hidden;
            background:
                radial-gradient(
                    circle at 10% 20%,
                    rgba(255, 167, 38, 0.15),
                    transparent 28%
                ),
                radial-gradient(
                    circle at 90% 80%,
                    rgba(24, 73, 155, 0.13),
                    transparent 30%
                ),
                linear-gradient(135deg, #fffaf1 0%, #f4f8ff 50%, #fffdf8 100%);
        }

        .bible-plan-detail-section::before,
        .bible-plan-detail-section::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            filter: blur(2px);
        }

        .bible-plan-detail-section::before {
            width: 280px;
            height: 280px;
            left: -110px;
            top: 100px;
            border: 45px solid rgba(255, 145, 0, 0.08);
            animation: rotateShape 18s linear infinite;
        }

        .bible-plan-detail-section::after {
            width: 230px;
            height: 230px;
            right: -80px;
            bottom: -65px;
            background: rgba(20, 73, 157, 0.06);
            animation: floatingShape 8s ease-in-out infinite;
        }

        .plan-wrapper {
            position: relative;
            z-index: 2;
            max-width: 1180px;
            margin: auto;
            border: 1px solid rgba(25, 67, 133, 0.12);
            border-radius: 10px;
            padding: 14px;
            background: rgba(255, 255, 255, 0.65);
            box-shadow:
                0 24px 60px rgba(29, 52, 93, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(14px);
        }

        /* Row 1 - Day Box */

        .day-box {
            position: relative;
            min-height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 10px;
            padding: 25px;
            background:
                linear-gradient(
                    120deg,
                    #ff7400,
                    #ff991c,
                    #ff6a00,
                    #ffb13b
                );
            background-size: 300% 300%;
            box-shadow:
                0 18px 38px rgba(255, 116, 0, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.45);
            animation: orangeGradient 8s ease infinite;
        }

        .day-box::before {
            content: "";
            position: absolute;
            width: 270px;
            height: 270px;
            top: -160px;
            left: -80px;
            border: 38px solid rgba(255, 255, 255, 0.12);
            border-radius: 50%;
            animation: rotateShape 15s linear infinite;
        }

        .day-box::after {
            content: "";
            position: absolute;
            width: 230px;
            height: 230px;
            right: -90px;
            bottom: -130px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            animation: pulseShape 5s ease-in-out infinite;
        }

        .day-pattern {
            position: absolute;
            inset: 0;
            opacity: 0.25;
            background-image:
                linear-gradient(
                    45deg,
                    rgba(255, 255, 255, 0.17) 25%,
                    transparent 25%
                ),
                linear-gradient(
                    -45deg,
                    rgba(255, 255, 255, 0.17) 25%,
                    transparent 25%
                );
            background-size: 36px 36px;
            animation: patternMove 14s linear infinite;
        }

        .day-content {
            position: relative;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            color: #ffffff;
            text-align: center;
        }

        .day-icon {
            width: 76px;
            height: 76px;
            flex: 0 0 76px;
            display: grid;
            place-items: center;
            border: 2px solid rgba(255, 255, 255, 0.48);
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.18);
            box-shadow:
                0 12px 30px rgba(125, 55, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(8px);
            animation: dayIconFloat 4s ease-in-out infinite;
        }

        .day-icon i {
            font-size: 34px;
        }

        .day-label {
            margin-bottom: 4px;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 4px;
            text-transform: uppercase;
            opacity: 0.9;
        }

        .day-title {
            margin: 0;
            font-family: "Archivo Black", sans-serif;
            font-size: clamp(32px, 5vw, 46px);
            line-height: 1;
            text-shadow: 0 5px 16px rgba(120, 50, 0, 0.25);
            text-align: left;
        }

        /* Row 2 */

        .reading-info-row {
            position: relative;
            margin-top: 16px;
            padding: 28px;
            overflow: hidden;
            border: 1px solid rgba(30, 70, 130, 0.1);
            border-radius: 18px;
            background:
                linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.98),
                    rgba(242, 247, 255, 0.96)
                );
            box-shadow:
                0 14px 35px rgba(36, 63, 108, 0.1),
                inset 0 1px 0 #ffffff;
        }

        .reading-info-row::before {
            content: "";
            position: absolute;
            width: 170px;
            height: 170px;
            right: 5%;
            top: -105px;
            border: 30px solid rgba(255, 151, 24, 0.08);
            border-radius: 50%;
        }

        .reading-info-row::after {
            content: "";
            position: absolute;
            left: -35px;
            bottom: -55px;
            width: 150px;
            height: 150px;
            border-radius: 45% 55% 60% 40%;
            background: rgba(24, 75, 158, 0.055);
            animation: morphShape 7s ease-in-out infinite;
        }

        .info-card {
            position: relative;
            z-index: 2;
            height: 100%;
            min-height: 175px;
            display: flex;
            align-items: center;
            gap: 18px;
            overflow: hidden;
            padding: 25px;
            border-radius: 17px;
            transition:
                transform 0.35s ease,
                box-shadow 0.35s ease;
        }

        .info-card:hover {
            transform: translateY(-7px);
        }

        .info-card-left {
            border: 1px solid rgba(29, 90, 179, 0.2);
            background:
                linear-gradient(
                    145deg,
                    rgba(237, 246, 255, 0.98),
                    rgba(255, 255, 255, 0.98)
                );
            box-shadow:
                0 14px 28px rgba(24, 73, 145, 0.1),
                inset 5px 0 0 #1d63bb;
        }

        .info-card-left:hover {
            box-shadow:
                0 20px 35px rgba(24, 73, 145, 0.17),
                inset 5px 0 0 #1d63bb;
        }

        .info-card-right {
            border: 1px solid rgba(230, 141, 18, 0.25);
            background:
                linear-gradient(
                    145deg,
                    rgba(255, 249, 235, 0.98),
                    rgba(255, 255, 255, 0.98)
                );
            box-shadow:
                0 14px 28px rgba(189, 111, 8, 0.1),
                inset 5px 0 0 #f29418;
        }

        .info-card-right:hover {
            box-shadow:
                0 20px 35px rgba(189, 111, 8, 0.17),
                inset 5px 0 0 #f29418;
        }

        .info-card::after {
            content: "";
            position: absolute;
            width: 130px;
            height: 130px;
            right: -65px;
            top: -65px;
            border-radius: 50%;
            border: 22px solid rgba(31, 92, 176, 0.055);
            transition: transform 0.5s ease;
        }

        .info-card-right::after {
            border-color: rgba(244, 148, 24, 0.075);
        }

        .info-card:hover::after {
            transform: scale(1.15) rotate(25deg);
        }

        .info-icon {
            position: relative;
            width: 68px;
            height: 68px;
            min-width: 68px;
            display: grid;
            place-items: center;
            border-radius: 18px;
            color: #ffffff;
            font-size: 28px;
            box-shadow: 0 12px 24px rgba(34, 59, 100, 0.2);
        }

        .info-card-left .info-icon {
            background: linear-gradient(135deg, #0d438e, #287bd5);
        }

        .info-card-right .info-icon {
            background: linear-gradient(135deg, #e66b08, #ffa52d);
        }

        .info-icon::before {
            content: "";
            position: absolute;
            inset: -6px;
            border: 1px dashed currentColor;
            border-radius: 22px;
            opacity: 0.25;
            animation: rotateShape 10s linear infinite;
        }

        .info-content {
            position: relative;
            z-index: 2;
        }

        .info-small-title {
            margin-bottom: 7px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .info-card-left .info-small-title {
            color: #1b65bb;
        }

        .info-card-right .info-small-title {
            color: #de700f;
        }

        .info-title {
            margin: 0 0 7px;
            font-family: "Archivo Black", sans-serif;
            font-size: clamp(21px, 3vw, 29px);
            color: #172846;
        }

        .info-description {
            margin: 0;
            color: #647089;
            font-size: 15px;
            line-height: 1.7;
        }

        /* Row 3 - Verses */

        .verse-section {
            position: relative;
            margin-top: 16px;
            padding: 30px;
            overflow: hidden;
            border-radius: 10px;
            border: 1px solid rgba(30, 72, 138, 0.12);
            background:
                linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.99),
                    rgba(250, 246, 238, 0.99)
                );
            box-shadow:
                0 16px 38px rgba(36, 59, 96, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }

        .verse-section::before {
            content: "\f02d";
            position: absolute;
            right: 15px;
            bottom: -45px;
            font-family: "Font Awesome 6 Free";
            font-size: 180px;
            font-weight: 900;
            color: rgba(25, 72, 145, 0.035);
            transform: rotate(-8deg);
        }

        .verse-heading {
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 22px;
            padding: 11px 18px;
            border-radius: 10px;
            color: #ffffff;
            background: linear-gradient(135deg, #172d57, #215da8);
            box-shadow: 0 10px 24px rgba(21, 61, 119, 0.2);
        }

        .verse-heading i {
            color: #ffd36c;
        }

        .verse-heading h3 {
            margin: 0;
            font-size: 17px;
            font-weight: 800;
            letter-spacing: 0.5px;
        }

        .verse-list {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .verse-line {
            position: relative;
            display: grid;
            grid-template-columns: 58px minmax(0, 1fr);
            align-items: flex-start;
            gap: 17px;
            padding: 18px;
            overflow: hidden;
            border: 1px solid rgba(22, 66, 134, 0.1);
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.86);
            box-shadow: 0 8px 20px rgba(30, 57, 99, 0.07);
            transition:
                transform 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
        }

        .verse-line:hover {
            transform: translateX(5px);
            border-color: rgba(236, 132, 15, 0.35);
            box-shadow: 0 13px 28px rgba(30, 57, 99, 0.12);
        }

        .verse-line::after {
            content: "";
            position: absolute;
            width: 100px;
            height: 100px;
            right: -65px;
            bottom: -65px;
            border-radius: 50%;
            background: rgba(255, 151, 27, 0.07);
        }

        .verse-number {
            position: relative;
            z-index: 2;
            width: 58px;
            height: 50px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            color: #ffffff;
            font-family: "Archivo Black", sans-serif;
            font-size: 18px;
            background: linear-gradient(145deg, #f0780a, #ffa52c);
            box-shadow:
                0 9px 19px rgba(232, 111, 4, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }

        .verse-number::before {
            content: "";
            position: absolute;
            inset: 4px;
            border: 1px solid rgba(255, 255, 255, 0.32);
            border-radius: 9px;
        }

        .verse-text {
            position: relative;
            z-index: 2;
            margin: 0;
            padding-top: 3px;
            color: #39465e;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.85;
            text-align: left;
        }

        .verse-reference {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            margin-top: 8px;
            padding: 5px 11px;
            border-radius: 20px;
            color: #17539d;
            font-size: 12px;
            font-weight: 800;
            background: #eaf3ff;
        }

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

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes rotateShape {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes patternMove {
            from {
                background-position: 0 0;
            }

            to {
                background-position: 150px 80px;
            }
        }

        @keyframes dayIconFloat {
            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-9px);
            }
        }

        @keyframes pulseShape {
            0%,
            100% {
                transform: scale(1);
                opacity: 0.65;
            }

            50% {
                transform: scale(1.16);
                opacity: 1;
            }
        }

        @keyframes floatingShape {
            0%,
            100% {
                transform: translateY(0) rotate(0deg);
            }

            50% {
                transform: translateY(-22px) rotate(15deg);
            }
        }

        @keyframes morphShape {
            0%,
            100% {
                border-radius: 45% 55% 60% 40%;
                transform: rotate(0deg);
            }

            50% {
                border-radius: 60% 40% 35% 65%;
                transform: rotate(25deg);
            }
        }

        @media (max-width: 767.98px) {
            .bible-plan-detail-section {
                padding: 40px 10px;
            }

            .plan-wrapper {
                padding: 9px;
                border-radius: 18px;
            }

            .day-box {
                min-height: 135px;
                padding: 20px 14px;
            }

            .day-content {
                gap: 13px;
            }

            .day-icon {
                width: 61px;
                height: 61px;
                flex-basis: 61px;
                border-radius: 17px;
            }

            .day-icon i {
                font-size: 27px;
            }

            .day-label {
                font-size: 10px;
                letter-spacing: 2.5px;
            }

            .reading-info-row,
            .verse-section {
                padding: 18px;
            }

            .info-card {
                min-height: auto;
                padding: 20px 16px;
            }

            .info-icon {
                width: 58px;
                height: 58px;
                min-width: 58px;
                font-size: 24px;
            }

            .info-description {
                font-size: 14px;
            }

            .verse-line {
                grid-template-columns: 48px minmax(0, 1fr);
                gap: 12px;
                padding: 14px;
            }

            .verse-number {
                width: 48px;
                height: 45px;
                font-size: 16px;
            }

            .verse-text {
                font-size: 14px;
                line-height: 1.75;
            }
        }

        @media (max-width: 420px) {
            .day-content {
                flex-direction: column;
            }

            .info-card {
                align-items: flex-start;
            }

            .verse-section {
                padding: 15px 12px;
            }

            .verse-line {
                grid-template-columns: 42px minmax(0, 1fr);
                gap: 10px;
                padding: 13px 10px;
            }

            .verse-number {
                width: 42px;
                height: 42px;
                border-radius: 10px;
                font-size: 14px;
            }

            .verse-text {
                padding-top: 0;
                font-size: 13px;
                line-height: 1.7;
            }
        }