/* --- General Body and Layout Styling --- */
/*body {*/
/*    height: 100vh;*/
/*    margin: 0;*/
/*    font-family: Arial, sans-serif;*/
/*    background-color: #f0f2f5;*/
    /* Optional: Example background to see the icons floating */
/*}*/

/* --- Floating Icons Container --- */
.floating-icons {
    position: fixed;
    /* This makes the icons stay in a fixed position on the screen */
    top: 50%;
    /* Aligns the top of the container to the vertical center of the screen */
    right: 20px;
    /* Adjust this value to control the distance from the right edge */
    transform: translateY(-50%);
    /* Moves the container up by half of its own height, perfectly centering it */
    z-index: 1000;
    /* Ensures the icons are on top of other content */
    display: flex;
    flex-direction: column;
    /* Arranges the icons in a vertical column */
    gap: 15px;
    /* Adds space between the icons */
}

/* --- Individual Icon Styling --- */
.floating-icons .icon {
    display: flex;
    /* Use flexbox to center the icon inside the circle */
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Creates a perfect circle */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Subtle shadow for a 3D effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth hover effect */
    color: #fff;
    /* Default icon color */
    text-decoration: none;
    /* Removes the underline from the link */
    cursor: pointer;
}

/* --- Specific Color for each Icon --- */
.floating-icons .whatsapp {
    background-color: #25D366;
}

.floating-icons .instagram {
    background-color: #E1306C;
}

.floating-icons .facebook {
    background-color: #1877F2;
}

.floating-icons .phone {
    background-color: #FFA500;
}

/* --- Hover Effect --- */
.floating-icons .icon:hover {
    transform: scale(1.1);
    /* Makes the icon slightly bigger on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    /* Darker shadow on hover */
}

/* --- Icon Sizing for Font Awesome --- */
.floating-icons .icon i {
    font-size: 30px;
    /* Adjust the size of the icon inside the circle */
    color: #fff;
}

/* -------------------------------------------------------------------------- */
/* MEDIA QUERY FOR MOBILE DEVICES                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    /* This rule applies to screens with a maximum width of 768px (e.g., tablets and phones) */

    .floating-icons {
        /* Move the icons closer to the right edge */
        right: 10px;
        /* Reduce the space between icons */
        gap: 10px;
    }

    .floating-icons .icon {
        /* Reduce the size of the circular containers */
        width: 50px;
        height: 50px;
    }

    .floating-icons .icon i {
        /* Reduce the size of the Font Awesome icons inside the circles */
        font-size: 24px;
    }
    .rs-contact-page__info-box .info-box-item .rs-info-contact .title, .rs-contact-page__info-box .info-box-item .rs-info-contact h5 a, .rs-contact-3__content .rs-contact-info h4 a {
    font-size: 18px !important;
    }
}