/*
Theme Name: Qa3aty
Theme URI: https://qa3at.com/
Template: astra
Author: T. Horizon
Author URI: https://tehorizon.com
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.3.1751101180
Updated: 2025-06-28 08:59:40

*/

/* Container for the entire section */
.iframe-ribbon-container {
    width: 100%;
    max-width: 1200px; /* Adjust max-width as needed for your layout */
    margin: 0 auto; /* Center the container */
    padding: 20px 0;
}

/* Styling for the ribbon itself */
.iframe-ribbon {
    display: flex; /* Use flexbox for icon layout */
    justify-content: center; /* Center icons horizontally */
    gap: 20px; /* Space between icons */
    background-color: #f8f8f8; /* Light background for the ribbon */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
    flex-wrap: wrap; /* Allow icons to wrap to the next line on smaller screens */
    margin-bottom: 20px; /* Space below the ribbon */
}

/* Styling for individual icons */
.ribbon-icon {
    display: flex;
    flex-direction: column; /* Stack image and text vertically */
    align-items: center; /* Center content horizontally */
    text-decoration: none; /* Remove underline from links */
    color: #333; /* Default text color */
    font-size: 14px;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
    cursor: pointer; /* Indicate clickable */
}

/* Icon image styling */
.ribbon-icon img {
    width: 40px; /* Adjust icon size */
    height: 40px;
    margin-bottom: 5px; /* Space between icon and text */
    border-radius: 50%; /* Make icons circular if desired */
    object-fit: cover; /* Ensure images fill their space */
}

/* Hover and active (selected) state for icons */
.ribbon-icon:hover, 
.ribbon-icon.active {
    background-color: #0073aa; /* Standard WordPress blue for active/hover */
    color: #fff; /* White text for active/hover */
}
.ribbon-icon.active img {
    filter: brightness(0) invert(1); /* Make icon white when active/hovered (if it's black) */
}


/* Styling for the iframe wrapper */
.iframe-content-wrapper {
    border: 1px solid #ddd; /* Light border around the iframe */
    border-radius: 8px;
    overflow: hidden; /* Ensures content stays within rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow for the iframe */
}

/* Styling for the iframe itself */
#dynamicIframe {
    width: 100%;
    min-height: 800px; /* Set a minimum height for the iframe */
    border: none; /* Remove default iframe border */
    display: block; /* Remove extra space below iframe */
}

/* Basic Responsiveness for smaller screens */
@media (max-width: 768px) {
    .iframe-ribbon {
        gap: 10px; /* Reduce gap on smaller screens */
        padding: 10px;
    }
    .ribbon-icon {
        padding: 5px 8px;
        font-size: 12px;
    }
    .ribbon-icon img {
        width: 30px;
        height: 30px;
    }
    #dynamic