.copy-tooltip {
    display: none;
    flex-wrap: wrap;
    background: var(--text-white);
    color: var(--text-black);
    border: none;
    padding: 0.1rem;
    font-size: var(--great-small-font-size);
    border-radius: 0.1rem;
    align-items: center;
    position: absolute;
    left: 3rem;
    /* Adding glowing effect */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5),
                0 0 10px rgba(255, 255, 255, 0.5),
                0 0 15px rgba(255, 255, 255, 0.5),
                0 0 20px rgba(255, 255, 255, 0.5),
                0 0 25px rgba(255, 255, 255, 0.5),
                0 0 30px rgba(255, 255, 255, 0.5),
                0 0 35px rgba(255, 255, 255, 0.5);
    transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
}

/* Extra small devices (phones, 50px and up) */
@media (min-width: 50px) {
    /* CSS rules for extra small devices */
    #share-modal-container {
        display: none; /* Hidden by default */
        /* Stay in place */
        position: fixed; 
        left: 0;
        top: 0;
        z-index: 1; /* Sit on top */
        width: 100%; 
        height: 100%;
        padding: 0 0.8rem;
        /* Enable scroll if needed */
        /* overflow: auto;   */
        background-color: var(--modal-background);
    }

    .share-modal-bg {
        margin-top: 1rem;
        display: flex;
        width: 100%; 
        height: 5.5rem; 
        background-image: url('../image/ppx7_sharing_modal_mobile_bg.webp');
        justify-content: center;
        align-items: center;
    }
    
    #share-modal-close-button {
        height: 0.5rem;
        width: 0.5rem;
        float: right;
        position: absolute;
        top: 1.2rem;
        right: 1.8rem;
        background-image: url("../image/ppx7_close_icon.webp");
    }

    .share-modal-content {
        height: 95%;
        width: 80%;
        padding: 0.2rem;
    }

    .share-modal-top-content-container {
        height: 20%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .share-modal-title-text {
        text-align: center;
        color: var(--text-white);
        font-size: var(--medium-font-size);
        font-weight: var(--bold-font-weight);
    }

    .share-modal-body-content-container {
        height: 60%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .share-modal-body-content-top-container {
        height: 30%;
        width: 100%;
        text-align: center;
    }

    .share-modal-body-sub-text {
        color: var(--text-white);
        font-size: var(--small-font-size);
        font-weight: var(--light-font-weight);
    }

    .share-modal-body-content-bottom-container {
        height: 70%;
        width: 100%;
        display: flex;
        flex-direction: row;
    }

    .instagram {
        flex: 1;
        background-image: url("../image/instagram.webp");
    }
    
    .x {
        flex: 1;
        background-image: url("../image/X.webp");
    }

    .facebook {
        flex: 1;
        background-image: url("../image/Facebook.webp");
    }

    .telegram {
        flex: 1;
        background-image: url("../image/telegram.webp");
    }

    .whatsapp {
        flex: 1;
        background-image: url("../image/WhatsApp.webp");
    }
    
    .share-modal-bottom-content-container {
        height: 20%;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.15rem;
    }
    
    .share-modal-bottom-left-content {
        height: 100%;
        width: 84%;
        border-radius: 0.2rem;
        padding: 0.15rem;
        justify-content: center;
        align-items: center;
        overflow: hidden; /* Ensure the container hides overflow content */
    }
    
    .shareLinkText {
        color: var(--text-white);
        font-size: var(--small-font-size);
        font-weight: var(--light-font-weight);
        /* Allow long words to break and wrap to the next line */
        word-wrap: break-word; 
        /* Break long words at any character to wrap */
        word-break: break-all;  
        display: -webkit-box; /* Necessary for limiting the number of lines */
        -webkit-box-orient: vertical; /* Set the box orientation to vertical */
        -webkit-line-clamp: 2; /* Show only 2 lines */
        overflow: hidden; /* Hide the overflow content */
        text-overflow: ellipsis; /* Display '...' for overflow text */
        line-height: 1.5; /* Set line-height to make it easier to adjust line clamping */
    }

    .share-modal-bottom-right-content {
        height: 100%;
        width: 16%;
        display: flex;
        border-radius: 0.2rem;
        padding: 0.2rem;
    }

    .copy-tooltip {
        font-size: var(--greater-mini-font-size);
        left: 4rem;
    }

    .share-link-icon {
        flex: 1;
        background-image: url("../image/ppx7_sharelink.webp");
    }
}

/* Medium devices (small laptops, 768px and up) */
@media (min-width: 768px) {
    /* CSS rules for medium devices */
    .share-modal-bg {
        margin-top: 1rem;
        display: flex;
        width: 100%; 
        height: 2.5rem; 
        background-image: url('../image/ppx7_sharing_modal_desktop_bg.webp');
        justify-content: center;
        align-items: center;
    }
    
    #share-modal-close-button {
        height: 0.2rem;
        width: 0.2rem;
        float: none;
        position: absolute;
        top: 1.1rem;
        right: 2.72rem;
        background-image: url("../image/ppx7_close_icon.webp");
    }

    .share-modal-content {
        height: 95%;
        width: 55%;
        padding: 0.2rem;
    }

    .share-modal-title-text {
        text-align: center;
        color: var(--text-white);
        font-size: var(--small-font-size);
        font-weight: var(--bold-font-weight);
    }

    .share-modal-body-sub-text {
        color: var(--text-white);
        font-size: var(--great-mini-font-size);
        font-weight: var(--light-font-weight);
    }

    .share-modal-body-content-bottom-container {
        height: 50%;
        width: 100%;
        display: flex;
        flex-direction: row;
    }

    .share-modal-bottom-content-container {
        margin-top: 0.05rem;
        gap: 0.1rem;
    }
    
    .share-modal-bottom-left-content {
        height: 100%;
        width: 89%;
        border-radius: 0.1rem;
        padding: 0.08rem;
        justify-content: center;
        align-items: center;
        overflow: hidden; /* Ensure the container hides overflow content */
    }

    .shareLinkText {
        color: var(--text-white);
        font-size: var(--great-mini-font-size);
        font-weight: var(--light-font-weight);
        /* Allow long words to break and wrap to the next line */
        word-wrap: break-word; 
        /* Break long words at any character to wrap */
        word-break: break-all;  
        display: -webkit-box; /* Necessary for limiting the number of lines */
        -webkit-box-orient: vertical; /* Set the box orientation to vertical */
        -webkit-line-clamp: 2; /* Show only 2 lines */
        overflow: hidden; /* Hide the overflow content */
        text-overflow: ellipsis; /* Display '...' for overflow text */
        /* Set line-height to make it easier to adjust line clamping */
        line-height: 1.5;
    }
    
    .share-modal-bottom-right-content {
        height: 100%;
        width: 11%;
        display: flex;
        border-radius: 0.1rem;
        padding: 0.08rem;
    }

    .copy-tooltip {
        padding: 0.2rem;
        font-size: var(--mini-font-size) !important; /* !important overriding the font size*/
        left: 6rem;
    }
}