.modal {
            background-color: #00000085;
        }

        /* Add some margin and padding to the modal content */
        .modal-content {
            border-radius: 10px;
        }

        /* Style the share button */
        /* #share-btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        } */

        /* Style the modal title */
        .modal-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        /* Style the icon list */
        .icon-list {
            display: flex;
            justify-content: space-between;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* Style individual icons */
        .icons {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            /* Larger font size for icons */
            width: 50px;
            /* Set the width for circular icons */
            height: 50px;
            /* Set the height for circular icons */
            border-radius: 50%;
            /* Make icons circular */
            margin-bottom: 10px;
            text-decoration: none;
            /* Remove text decoration from links */
            transition: background-color 0.3s ease, color 0.3s ease;
            /* Add smooth color transition */
            text-align: center;
            /* Center icon names */
            font-weight: bold;
            /* Make the icon names bold */

            color: #333;

            /* Default icon name color */
            background-color: whitesmoke;
            /* Circle background color */
        }



        .icons:hover {
            background-color: #f5f5f5;
            /* Change background color on hover */
        }



        /* Define colors for each brand */
        .icon-list li .whatsapp {
            color: #25D366 !important;
        }

        .icon-list li .facebook {
            color: #1877F2 !important;
        }

        .icon-list li .instagram {
            color: #C13584 !important;
        }

        .icon-list li .twitter {
            color: #1DA1F2 !important;
        }

        .icon-list li .youtube {
            color: #FF0000 !important;
        }

        .icon-list li .copy {
            color: #3498db !important;
        }

        .icons:hover {
            background-color: #f5f5f5;
            /* Change background color on hover */
        }

        a {
            text-decoration: none !important;
        }

        .icon-list li p {
            font-size: 12px;
        }



        @media (max-width: 420px) {
            .modal-title {
                font-size: 20px;
                font-weight: bold;
                margin-bottom: 5px;
            }

            .icons {
                font-size: 20px;
                /* Larger font size for icons */
                width: 40px;
                /* Set the width for circular icons */
                height: 40px;

            }

            .icon-list li p {
                font-size: 10px;
            }
        }