/* Hide toggle sections by default (since "tutup" is the default value) */
            #ekaut-fields-container,
            #hadiah-fields-container,
            #gambar-fields-container {
                display: none;
            }

            /* Design Page Accordion Styles */
            .design-accordion {
                margin-top: 20px;
                border-radius: 12px;
                overflow: hidden;
                background: #fff;
                box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            }

            .design-accordion-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 16px 20px;
                background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
                cursor: pointer;
                border: none;
                width: 100%;
                text-align: left;
                transition: all 0.3s ease;
                border-bottom: 1px solid #e9ecef;
            }

            .design-accordion-header:hover {
                background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
            }

            .design-accordion-header.active {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: #fff;
            }

            .design-accordion-title {
                display: flex;
                align-items: center;
                gap: 10px;
                font-weight: 600;
                font-size: 15px;
                margin: 0;
            }

            .design-accordion-title i {
                font-size: 18px;
                opacity: 0.8;
            }

            .design-accordion-chevron {
                transition: transform 0.3s ease;
                font-size: 14px;
            }

            .design-accordion-header.active .design-accordion-chevron {
                transform: rotate(180deg);
            }

            .design-accordion-content {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.4s ease, padding 0.3s ease;
                background: #fff;
            }

            .design-accordion-content.open {
                padding: 20px;
            }

            .design-accordion-inner {
                opacity: 0;
                transform: translateY(-10px);
                transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
            }

            .design-accordion-content.open .design-accordion-inner {
                opacity: 1;
                transform: translateY(0);
            }

            /* Center the navigation */

            body {
                font-family: 'Poppins', sans-serif !important;
                margin: 0;
                padding: 0;
            }

            ul.nav-tabs {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: #333;
                display: flex;
                justify-content: center;
                /* Center horizontally */
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
                /* Add shadow */

                /* Remove any default border */
                border: none;
                border-radius: 10px;
                /* Adjust this value as you see fit */

            }

            ul.nav-tabs li {
                /* Remove float and set flex properties for equal spacing */
                flex: 1;

                /* Remove margins and padding to prevent any unexpected white space */
                margin: 0;
                padding: 0;
            }

            ul.nav-tabs li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                border: none;
                /* Ensure there's no border on anchor tags */
            }

            ul.nav-tabs li a:hover:not(.active) {
                background-color: #111;
            }

            ul.nav-tabs li.active a {
                background-color: #04AA6D;
            }

            /* Make it mobile responsive */
            @media (max-width: 600px) {
                ul.nav-tabs {
                    flex-direction: column;
                    /* Stack items vertically on small screens */
                }

                ul.nav-tabs li {
                    flex: initial;
                    /* Reset flex property to default */
                }
            }



            /*premium*/

            .premium-tab .nav-link {
                background-color: #000000;
                /* A light red background */
                position: relative;
                color: #FFFFFF;
            }

            .premium-tag {
                background-color: #F1C27B;
                /* A slightly darker red background */
                padding: 0 5px;
                border-radius: 3px;
                margin-left: 5px;
                font-size: 0.75em;
                color: #000000;
                /* Black text color */
            }


            /* Style for grayed-out input elements */
            .disabled-input {
                pointer-events: none;
                background-color: #f0f0f0;
                /* You can choose a gray color for the background */
                color: #777;
                /* You can choose a gray color for the text */
            }

            .waze-link-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                margin-bottom: 6px;
            }

            .waze-link-helper {
                display: block;
                font-size: 0.8rem;
                color: #6c757d;
                margin-top: 6px;
            }


            /**style gambar*/

            .image-upload-row {
                display: flex;
            }

            .image-upload-row div {
                line-height: 200px;
            }

            .image-upload-row img {
                max-width: 200px;
                max-height: 200px;
                padding: 5px;
                vertical-align: middle;
                text-align: center;
            }

            @supports (object-fit: cover) {
                .image-upload-row img {
                    width: 200px;
                    height: 200px;
                    object-fit: cover;
                }
            }


            .hidden {
                display: none;
            }

            .card {
                margin-left: auto;
                margin-right: auto;
                /* your other styles */
            }

            .parent-container {
    display: flex;
    justify-content: center;
    max-width: 800px;
    margin: 0 auto;
}


            #uploadForm label,
            #uploadForm input[type="file"],
            #uploadForm input[type="submit"] {
                display: block;
                width: 100%;
                margin-bottom: 10px;
                /* optional: adds a little space between each element */
            }


            /* Banner Styles */
            .promo-banner {
                font-family: 'Poppins', sans-serif;
                /* Set the font family specifically for the banner */
                background-color: #FF5733;
                /* Vibrant background color */
                color: #fff;
                /* Light text color */
                padding: 20px 0;
                /* Vertical padding */
                text-align: center;
                /* Center the text */
                font-weight: 500;
                /* Semi-bold font weight */
                font-size: 1.5rem;
                /* Slightly larger font size */
                border-radius: 10px;
                /* Rounded corners for modern look */
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
                /* Soft shadow for depth */
                margin: 20px 0;
                /* Spacing from other elements, adjust if needed */
            }

            /* Additional aesthetic: Diagonal stripe pattern in the background */
            .promo-banner::before {
                content: "";
                position: absolute;
                background: repeating-linear-gradient(-45deg,
                        #DCD6F7,
                        #DCD6F7 10px,
                        #F4EEFF 10px,
                        #F4EEFF 20px);
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                opacity: 0.2;
                /* Adjust this value if you want the pattern more or less visible */
                z-index: -1;
                /* To keep it behind the text */
            }

            /* Account banner (SaaS-style) */
            .account-banner-wrap {
                padding: 8px 16px 0;
            }

            .account-banner {
                --banner-bg: #f7f8fc;
                --banner-bg-alt: #eef1f7;
                --banner-border: rgba(15, 23, 42, 0.08);
                --banner-text: #0f172a;
                --banner-muted: #5b6b7d;
                --chip-bg: rgba(15, 23, 42, 0.06);
                --chip-border: rgba(15, 23, 42, 0.1);
                --chip-text: #0f172a;
                --action-bg: #111827;
                --action-text: #ffffff;
                --action-border: rgba(15, 23, 42, 0.14);
                --accent-bg: linear-gradient(135deg, #ffcf7b, #ff9f4f);
                --accent-text: #1b1b1b;
                --toggle-bg: rgba(255, 255, 255, 0.9);
                --toggle-text: #0f172a;
                --toggle-border: rgba(15, 23, 42, 0.14);
                position: relative;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 16px;
                flex-wrap: wrap;
                padding: 16px 18px;
                border-radius: 16px;
                background: linear-gradient(135deg, var(--banner-bg), var(--banner-bg-alt));
                border: 1px solid var(--banner-border);
                box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
                color: var(--banner-text);
                font-family: 'Poppins', sans-serif;
                overflow: hidden;
            }

            .account-banner::before {
                content: "";
                position: absolute;
                width: 240px;
                height: 240px;
                right: -120px;
                top: -140px;
                background: radial-gradient(circle, rgba(56, 189, 248, 0.25), transparent 70%);
                pointer-events: none;
            }

            .account-banner::after {
                content: "";
                position: absolute;
                width: 180px;
                height: 180px;
                left: -90px;
                bottom: -120px;
                background: radial-gradient(circle, rgba(251, 191, 36, 0.2), transparent 70%);
                pointer-events: none;
            }

            .account-banner[data-theme="dark"] {
                --banner-bg: #0f172a;
                --banner-bg-alt: #1f2937;
                --banner-border: rgba(148, 163, 184, 0.25);
                --banner-text: #f8fafc;
                --banner-muted: #cbd5f5;
                --chip-bg: rgba(248, 250, 252, 0.08);
                --chip-border: rgba(248, 250, 252, 0.18);
                --chip-text: #f8fafc;
                --action-bg: #f8fafc;
                --action-text: #0f172a;
                --action-border: rgba(248, 250, 252, 0.3);
                --accent-bg: linear-gradient(135deg, #7dd3fc, #38bdf8);
                --accent-text: #0b1220;
                --toggle-bg: rgba(15, 23, 42, 0.9);
                --toggle-text: #f8fafc;
                --toggle-border: rgba(248, 250, 252, 0.2);
            }

            .account-banner__left {
                display: flex;
                flex-direction: column;
                gap: 10px;
                min-width: 0;
                flex: 1 1 240px;
            }

            .account-banner__title {
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            .account-banner__eyebrow {
                font-size: 0.72rem;
                letter-spacing: 0.12em;
                text-transform: uppercase;
                color: var(--banner-muted);
                font-weight: 600;
            }

            .account-banner__headline {
                font-size: 1.1rem;
                font-weight: 600;
                margin: 0;
            }

            .account-banner__chips {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }

            .account-chip {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 6px 12px;
                border-radius: 999px;
                background: var(--chip-bg);
                color: var(--chip-text);
                border: 1px solid var(--chip-border);
                font-size: 0.85rem;
                font-weight: 600;
                white-space: nowrap;
            }

            .account-banner__right {
                display: flex;
                align-items: center;
                gap: 10px;
                flex-wrap: wrap;
                justify-content: flex-end;
                flex: 1 1 220px;
            }

            .account-actions {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
            }

            .account-actions form {
                margin: 0;
            }

            .account-action {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 6px;
                padding: 7px 14px;
                border-radius: 999px;
                border: 1px solid transparent;
                font-size: 0.85rem;
                font-weight: 600;
                line-height: 1;
                text-decoration: none;
                transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
            }

            .account-action:hover {
                transform: translateY(-1px);
                text-decoration: none;
            }

            .account-action--primary {
                background: var(--action-bg);
                color: var(--action-text);
                box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
            }

            .account-action--outline {
                background: transparent;
                color: var(--banner-text);
                border-color: var(--action-border);
            }

            .account-action--accent {
                background: var(--accent-bg);
                color: var(--accent-text);
            }

            .account-theme-toggle {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                border: 1px solid var(--toggle-border);
                background: var(--toggle-bg);
                color: var(--toggle-text);
                cursor: pointer;
                transition: transform 0.2s ease, box-shadow 0.2s ease;
            }

            .account-theme-toggle:hover {
                transform: translateY(-1px);
                box-shadow: 0 6px 14px rgba(15, 23, 42, 0.15);
            }

            @media (max-width: 768px) {
                .account-banner {
                    align-items: flex-start;
                }

                .account-banner__right {
                    width: 100%;
                    justify-content: space-between;
                }
            }



            .tab-pane {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    font-family: 'Poppins', sans-serif;
}

.container-fluid {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}




            #logoutButton {
                position: absolute;
                top: 10px; // Adjust as needed
                right: 10px; // Adjust as needed
                padding: 5px 10px; // Padding for the button
                background-color: #B23B3B; // Red color, change as you prefer
                color: white; // Text color
                border: none; // No border
                cursor: pointer; // Pointer cursor on hover
            }

            #logoutButton:hover {
                background-color: #B23B3B; // Slightly darker red on hover
            }




            /* Custom Slider Styling */

            .center-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 15px 15px;
                /* Reducing vertical padding */
                background-color: white;
                border-radius: 8px;
                box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
                text-align: center;
                width: 85%;
                /* Adjusted the width */
                margin: 20px auto;
            }

            .slider-container {
                width: 90%;
                /* Increased the width for the slider */
                margin: 20px 0;
            }

            .custom-slider {
                -webkit-appearance: none;
                width: 100%;
                height: 10px;
                border-radius: 5px;
                background: #d3d3d3;
                outline: none;
                opacity: 0.7;
                transition: opacity .2s;
            }

            .custom-slider:hover {
                opacity: 1;
            }

            .custom-slider::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background: #4CAF50;
                cursor: pointer;
            }

            .custom-slider::-moz-range-thumb {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background: #4CAF50;
                cursor: pointer;
            }

            .custom-alert {
                background-color: #f8d7da;
                /* light red background */
                border-color: #f5c6cb;
                /* light red border */
                color: #721c24;
                /* dark red text */
            }

            #saveStatus {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                padding: 20px;
                background-color: white;
                border: 1px solid #ddd;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                z-index: 9999;
                /* To ensure the message appears above other content */
                opacity: 0.9;
            }

            #savedMessage i {
                animation: checkmark 0.2s;
            }

            @keyframes checkmark {
                0% {
                    transform: scale(0);
                }

                100% {
                    transform: scale(1);
                }
            }


            .link-card {
                background-color: #ffffff;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
                border: 1px solid #e7e7e7;
            }

            .link-card:hover {
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            }

            .link-url {
                font-size: 20px;
                color: #007BFF;
                transition: all 0.3s ease;
                text-decoration: none;
                margin-top: 15px;
                display: inline-block;
                border: 2px solid #007BFF;
                padding: 5px 10px;
                border-radius: 5px;
            }

            .link-url:hover {
                background-color: #007BFF;
                color: #ffffff;
                text-decoration: none;
            }

            .arrow-buttons-container {
                text-align: center;
                /* Center the buttons within the container */
                margin-bottom: 20px;
                /* Space between the arrows and the "Simpan" button */
            }

            .arrow-button {
                background-color: #4CAF50;
                /* A modern green */
                border: none;
                color: white;
                padding: 10px 20px;
                /* Larger touch target */
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 4px 2px;
                /* Some space between the buttons */
                cursor: pointer;
                border-radius: 12px;
                /* Rounded corners */
                box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
                /* Shadow for 3D effect */
                transition: background-color 0.3s, transform 0.3s;
                /* Smooth color change and press effect */
            }

            .arrow-button:hover {
                background-color: #45a049;
                /* Darker green on hover */
            }

            .arrow-button:active {
                transform: scale(0.96);
                /* Subtle "press" effect */
            }

            .modal {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.7);
                animation-name: fadeIn;
                animation-duration: 0.5s;
            }

            .modal-content {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 80%;
                /* Adjust this as per your requirement */
                max-width: 400px;
                /* Maximum width of the modal */
                transform: translate(-50%, -50%);
                background-color: #ffffff;
                padding: 20px;
                border-radius: 5px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                animation-name: slideDown;
                animation-duration: 0.5s;
            }


            .close-btn {
                position: absolute;
                right: 20px;
                top: 10px;
                cursor: pointer;
            }


            /* The Close Button */
            .close {
                color: #aaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
            }

            .close:hover,
            .close:focus {
                color: black;
                text-decoration: none;
                cursor: pointer;
            }

            @keyframes fadeIn {
                from {
                    background-color: rgba(0, 0, 0, 0);
                }

                to {
                    background-color: rgba(0, 0, 0, 0.7);
                }
            }

            @keyframes slideDown {
                from {
                    transform: translate(-50%, -60%);
                }

                to {
                    transform: translate(-50%, -50%);
                }
            }


            .form-group {
                margin-bottom: 15px;
            }

            .form-control {
                font-family: 'Poppins', sans-serif;
                height: 60px;
            }


            .form-control-reg {
                width: 100%;
                padding: 8px 15px;
                box-sizing: border-box;
                border: 1px solid #ddd;
                border-radius: 5px;
            }

            body {
                font-family: 'Nunito', sans-serif;
                background-color: #f7f8fc;
                padding-top: 50px;
            }

            .form-container {
                max-width: 400px;
                margin: 0 auto;
                background-color: #ffffff;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
            }

            .logo {
                display: block;
                margin: 0 auto 20px;
                width: 200px;
            }

            .error-message {
                color: red;
                text-align: center;
                margin-bottom: 15px;
            }

            h2.text-center {
                color: #333;
                font-weight: 200;
                margin-bottom: 30px;
                font-size: 28px;
            }

            .preview-text {
                font-size: 12px;
                color: #888;
                border: 1px dashed #ced4da;
                padding: 6px 10px;
                border-radius: 4px;
                background-color: #f9f9f9;
            }

            .preview-label {
                font-size: 14px;
                color: #333;
                margin-right: 5px;
            }

            html,
            body {
                margin: 3px;
                padding: 0;
            }

            .container-fluid {
                padding-top: 0 !important;
            }

            .modal-dialog-centered {
                display: flex;
                align-items: center;
                min-height: calc(100% - 1rem);
            }

            .modal {
                overflow-y: auto;
            }

            /* Modal specific styles */
            #paymentGatewayModal .modal-content {
                border-radius: 10px;
            }

            #paymentGatewayModal .modal-header {
                background-color: #f8f9fa;
                border-bottom: 1px solid #dee2e6;
            }

            #paymentGatewayModal .modal-title {
                color: #495057;
            }

            #paymentGatewayModal .form-group {
                margin-bottom: 1rem;
            }

            #paymentGatewayModal .form-control {
                border: 1px solid #ced4da;
                border-radius: 0.25rem;
                transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            }

            #paymentGatewayModal .form-control:focus {
                border-color: #80bdff;
                outline: 0;
                box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
            }

            #paymentGatewayModal .btn-primary {
                color: #fff;
                background-color: #ffffff;
                border-color: #007bff;
                transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            }

            #paymentGatewayModal .btn-primary:hover {
                color: #fff;
                background-color: #0069d9;
                border-color: #0062cc;
            }

            #paymentGatewayModal .btn-primary:focus {
                box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
            }

            #paymentGatewayModal .btn-primary:disabled {
                background-color: #007bff;
                border-color: #007bff;
            }

            #paymentGatewayModal .modal-footer {
                border-top: 1px solid #dee2e6;
            }

            .thumbnail {
                width: 100px;
                height: 140px;
                margin-right: 10px;
            }

            /* Style for the jQuery UI dropdown menu */
            .ui-menu {
                max-height: 400px;
                /* Adjust this value as needed */
                overflow-y: auto;
                /* Enables vertical scrolling */
                overflow-x: hidden;
                /* Hides horizontal scrollbar */
            }

            .select2-container--default .select2-selection--single {
                height: 60px !important;
                /* Adjust height as needed */
            }

            .select2-container .select2-selection--single .select2-selection__rendered {
                line-height: 60px !important;
                /* Adjust line height to match the height */
            }

            .select2-container--default .select2-selection--single .select2-selection__arrow {
                height: 38px !important;
                /* Adjust arrow height to match the height */
            }

            .select2-container--default .select2-selection--single {
                border: 1px solid #aaa !important;
                border-radius: 4px !important;
            }

            .select2-container .select2-selection--single {
                box-sizing: border-box;
                cursor: pointer;
                display: block;
                min-height: 32px;
                user-select: none;
                -webkit-user-select: none;
            }

            .select2-container--open .select2-dropdown--below {
                width: min(300px, calc(100vw - 32px)) !important;
                /* Adjust dropdown width as needed */
            }

            .select2-container--default .select2-results>.select2-results__options {
                height: 400px !important;
                /* Adjust the max height as needed */
                overflow-y: auto;
            }


            /*flow*/

            /*mobile*/
            @media (max-width: 768px) {
                .nav-pills {
                    flex-direction: column;
                    align-items: flex-start;
                }

                .nav-pills::before {
                    top: 0;
                    bottom: 0;
                    left: 20px;
                    height: auto;
                    width: 2px;
                }

                .nav-item {
                    width: 100%;
                    margin: 10px 0;
                }

                .nav-link {
                    width: 90%;
                    /* Adjust based on desired width */
                    margin: 0 auto;
                    /* Center the tab */
                    justify-content: flex-start;
                    padding-left: 40px;
                    /* Give some space for number */
                }

                .step-number {
                    position: absolute;
                    left: 10px;
                }

                .connector-line {
                    display: none;
                    /* Hide the connector line on mobile */
                }

                .navigation-buttons {
                    flex-direction: column;
                    align-items: center;
                }

                .btn-prev,
                .btn-next {
                    width: 90%;
                    /* Match the width of the tabs */
                    margin: 10px 0;
                    /* Add some space between the buttons */
                }
            }

            /*end mobile*/

            .wizard-navigation {
                background: white;
                /* Soft pastel purple background */
                padding: 20px;
                border-radius: 10px;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            }

            .nav-pills {
                padding: 0;
                margin: 0;
                list-style-type: none;
                display: flex;
                justify-content: space-around;
                align-items: center;
                position: relative;
            }

            .nav-pills::before {
                content: '';
                position: absolute;
                top: 20px;
                left: 0;
                right: 0;
                height: 2px;
                background: #e4dcef;
                /* Lighter shade for the connecting line */
                z-index: 1;
            }

            .nav-item {
                margin: 0 10px;
                z-index: 2;
            }

            .nav-link {
                padding-left: 2px;
                /* Decreased from 45px */

                padding: 5px 15px;
                border-radius: 50px;
                background: white;
                /* Light pastel purple */
                color: #333;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background 0.3s, color 0.3s;
            }

            .nav-item a {
                font-family: 'Poppins', sans-serif;
                font-weight: 400;
                font-size: 12px;
            }

            .nav-link.active {
                background: #a8d0e6;
                /* Soft pastel blue for active tab */
                color: #333;
            }

            .nav-link:hover {
                background: #a8b9d0;
                /* Darker pastel blue for hover state */
                color: #333;
                cursor: pointer;
            }

            .step-number {

                font-size: 0.8rem;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: #fff;
                /* Contrasting background */
                color: #000000;
                /* Pastel color */
                font-weight: bold;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                /* Subtle shadow for depth */
                transition: transform 0.3s, background 0.3s, color 0.3s;

            }

            .nav-link.active .step-number {
                background: #a8d0e6;
                /* Active step background color */
                color: #00000;
                /* Text color for active step */
                transform: scale(1.1);
                /* Slightly enlarge active step */
            }

            .nav-link:hover .step-number {
                background: #a8b9d0;
                /* Hover state background color */
                color: #fff;
                /* Text color for hover state */
                transform: scale(1.05);
                /* Slightly enlarge on hover */
            }

            .navigation-buttons {
                display: flex;
                justify-content: space-between;
                margin-top: 20px;
            }

            .btn-prev,
            .btn-next {
                padding: 10px 20px;
                border: none;
                border-radius: 50px;
                cursor: pointer;
                transition: background 0.3s, transform 0.3s;
            }

            .btn-prev:hover,
            .btn-next:hover {
                background: #f8c6ca;
                /* Soft pastel red for hover state */
                color: #333;
                transform: scale(1.05);
            }

            .btn-secondary {
                background: #f8c6ca;
                /* Soft pastel red */
                color: #333;
            }

            .btn-primary {
                background: #FFEEF4;
                /* Soft pastel red */
                color: #333;

            }


            .summernote-small {
                height: 100px !important;
                /* Set the desired height */
            }

            .summernote-small+.note-editor.note-frame .note-editing-area .note-editable {
                height: 100px;
                /* Adjust the height of the editing area */
            }

            @keyframes wiggleZoom {

                0%,
                100% {
                    transform: scale(1);
                }

                50% {
                    transform: scale(1.1) rotate(-5deg);
                }

                50% {
                    transform: scale(1.1) rotate(5deg);
                }
            }

            .btn-primary{

                color: white; 
            }

            .btn-modern {
                border: none;
                color: #fff;
                background-color: #fff;
                box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
                padding: 10px 20px;
                border-radius: 50px;
                /* Rounded corners */
                transition: all 0.15s ease;
                outline: none;
                /*text-transform: uppercase; /* Optional: transforms text to uppercase */
                font-weight: bold;
                font-size: 12px;
                letter-spacing: 0.025em;
                cursor: pointer;
            }

            .btn-modern:hover {
                transform: translateY(-1px);
                box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
            }

            .btn-modern:active {
                transform: translateY(1px);
                box-shadow: none;
            }

            /* Customize colors for different button types */
            .btn-modern-secondary {
                background-color: #f7f8fa;
                color: #6c757d;
            }

            .btn-modern-primary {
                background-color: #007bff;
                color: #fff;
            }

            .btn-success-modern {
                background-color: #28a745;
            }

            /* Ensure the background color is filled to the border */
            .navigation-buttons-modern .btn-modern {
                border: none;
                overflow: hidden;
            }

            .navigation-buttons-modern {
                display: flex;
                justify-content: space-between;
                gap: 10px;
                /* Adjust the space between buttons if necessary */
            }



            .btn-modern-pastel {
                background-color: #e4dcef;
                /* pastel blue */
                color: #000000;
                /* dark text for better contrast */
                /* Other styles can remain the same as .btn-modern */
            }

            /* Adjust hover state for pastel button */
            .btn-modern-pastel:hover {
                background-color: #9bb8d7;
                /* slightly darker pastel blue for hover effect */
                /* Rest of the hover effects can stay the same as .btn-modern */
            }

            /* Adjust active state for pastel button */
            .btn-modern-pastel:active {
                background-color: #a7c7e7;
                /* back to original pastel color on active */
                /* Rest of the active effects can stay the same as .btn-modern */
            }

            /* Apply the font to jQuery UI's selectmenu text */
            .ui-selectmenu-text {
                font-family: 'Roboto', sans-serif !important;
                /* Adding !important to override jQuery UI styles */
            }

            /* Apply the font to jQuery UI's menu item text */
            .ui-menu-item .ui-menu-item-wrapper {
                font-family: 'Roboto', sans-serif !important;
                /* Adding !important to override jQuery UI styles */
            }

            @keyframes giftFormFadeIn {
                from {
                    opacity: 0;
                }

                to {
                    opacity: 1;
                }
            }

            .form-animate {
                animation: giftFormFadeIn 1s ease-in-out;
            }

            .info-section {
                max-width: 550px;
                /* Adjust this value as needed */
                margin: auto;
                /* Centers the div */
                padding: 15px;
                /* Add some padding inside the div */
                /* Add any other styling properties needed for consistency */
            }


            /*quil style*/

            .quill-editor-small {
                height: 30px;
                /* Set the height you prefer */
            }


            #paymentGatewayModal .modal-content {
                border-radius: 10px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            }

            #paymentGatewayModal .modal-header {
                border-bottom: none;
            }

            #paymentGatewayModal .modal-footer {
                border-top: none;
            }

            #paymentGatewayModal .form-control {
                border: none;
                border-radius: 5px;
                background-color: #f5f5f5;
                padding: 12px;
            }

            #paymentGatewayModal .price-info {
                text-align: center;
                margin-top: 20px;
            }

            #paymentGatewayModal .price {
                font-size: 24px;
                font-weight: bold;
            }

            #paymentGatewayModal .normal-price {
                color: #888;
                text-decoration: line-through;
                margin-left: 10px;
            }

            #paymentGatewayModal .btn-primary {
                background-color: #007bff;
                border-color: #007bff;
                border-radius: 5px;
                padding: 12px;
            }