/*
Theme Name: Online Audience
Theme URI: https://onlineaudience.co.uk
Author: Online Audience
Author URI: https://onlineaudience.uk
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Description: A professional blue-themed design for Online Audience.
*/

/* --- 1. Global Page Styles --- */
body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    overflow-x: hidden; /* Prevents unwanted horizontal scrolling */
    -webkit-font-smoothing: antialiased;
}

/* --- 2. Hero Section (Blue Atmosphere) --- */
.hero {
    /* Layered blue radial glow with a subtle linear transition */
    background: 
        radial-gradient(40% 100% at 50% 150%, rgba(0, 115, 230, 0.4) 0%, #fcfdfd 100%), 
        linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #0073e6 165%);
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}

/* --- 3. Icon Box Styling (Features & Radio) --- */
.features_fyr .elementor-image-box-img,
.radio-fyr .elementor-image-box-img,
.radio-fyr.elementor-image-box-img {
    background-color: #0073e6; /* Primary Blue */
    border: 8px solid #eaf3fd;  /* Soft Blue Border */
    border-radius: 100%;
    width: 48px;
    height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* Subtle hover effect for interactivity */
.features_fyr .elementor-image-box-img:hover {
    transform: scale(1.05);
}

.features_fyr .elementor-image-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Pill-shaped description tags */
.features_fyr .elementor-image-box-description,
.radio-fyr .elementor-image-box-description {
    border-radius: 100px;
    display: inline-block;
    padding: 4px 12px;
    background-color: #f0f7ff; /* Extremely light blue background */
}

/* --- 4. Tabs & UI Components --- */
.e-n-tab-title-text {
    flex-direction: column;
}

.e-n-tab-title-text span {
    font-size: 18px;
    color: #004b99; /* Darker blue for better readability */
}

.elementor-image-box-content {
    padding: 48px 30px;
}

/* --- 5. General Image Box Adjustments --- */
.elementor-image-box-img {
    background: linear-gradient(180deg, #f5f5f5, #edf6ff);
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}