/* Import Google font - Poppins */
        /*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

        

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: #E3F2FD;
        }*/* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            /*font-family: "Poppins", sans-serif;*/
        }

        .show-modal {
            outline: none;
            border: none;
            cursor: pointer;
            color: #fff;
            
            font-size: 12px;
            /*padding: 15px 22px;
            background: #4A98F7;border-radius: 6px;
            transition: 0.3s ease;
            box-shadow: 0 10px 18px rgba(52,87,220,0.18);*/
        }

            .show-modal:hover {
                background: #2382f6;
            }

        .bottom-sheet {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            opacity: 0;
            pointer-events: none;
            align-items: center;
            flex-direction: column;
            justify-content: flex-end;
            transition: 0.1s linear;z-index: 1002;
        }

            .bottom-sheet.show {
                opacity: 1;
                pointer-events: auto;
            }

            .bottom-sheet .sheet-overlay {
                position: fixed;
                top: 0;
                left: 0;
                z-index: -1;
                width: 100%;
                height: 100%;
                opacity: 0.2;
                background: #000;
            }

            .bottom-sheet .content {
                width: 100%;
                position: relative;
                background: #fff;
                max-height: 80vh;
                height: 50vh;
                /*max-width: 1150px;*/
                padding: 25px 0px;
                transform: translateY(100%);
                transition: 0.3s ease;
                border-radius: 12px 12px 0 0;
                box-shadow: 0 10px 20px rgba(0,0,0,0.03);
                
            }

            .bottom-sheet.show .content {
                transform: translateY(0%);
            }

            .bottom-sheet.dragging .content {
                transition: none;
            }

            .bottom-sheet.fullscreen .content {
                border-radius: 0;
                overflow-y: hidden;
            }

            .bottom-sheet .headerc {
                display: flex;
                justify-content: center;
            }

        .headerc .drag-icon {
            cursor: grab;
            user-select: none;
            padding: 15px;
            margin-top: -15px;
           
        }

            .headerc .drag-icon span {
                height: 4px;
                width: 50px;
                display: block;
                background: #C7D0E1;
                border-radius: 50px;
            }

        .bottom-sheet .body {
            height: 100%;
            overflow-y: auto;
            /*padding: 15px 0 40px;
            scrollbar-width: none;*/-webkit-overflow-scrolling: touch;
        }

            .bottom-sheet .body::-webkit-scrollbar {
                width: 0;
            }


            .bottom-sheet .body h2 {
                font-size: 1.8rem;
            }

            .bottom-sheet .body p {
                margin-top: 20px;
                font-size: 1.05rem;
            }
			
			


.bottom-sheet .body {
    max-height: 80vh; /* Restrict the body height */
    overflow-y: auto; /* Allow scrolling within the body */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
}



        .icon-circle {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 50px; /* Increased size */
            height: 50px; /* Increased size */
            border-radius: 50%;
            background-color: #e0e0e0; /* Background color for the circle */
            margin-right: 10px; /* Spacing between icon and text */
        }

            .icon-circle i {
                font-size: 24px; /* Increased icon size */
                color: #545353; /* Icon color */
            }

        .no-comments-container {
            display: flex; /* Use flexbox */
            align-items: center; /* Center items vertically */
            justify-content: center; /* Center items horizontally */
            color: #545353; /* Text color */
            padding: 20px; /* Padding for better spacing */
             /* Full height of the parent container */
            flex-direction: column; /* Align items in a column */
        }

        .comments {
            display: flex;
            flex-direction: column;
            
             /* justify-content: center;Center content vertically */
            padding: 5px 16px; /* Padding */
        }