/* ========================================
   PBX Hosting – Power Pages Custom Styles
   Based on original Elementor CSS files
   ======================================== */

/* ----- CSS Variables (your brand colors) ----- */
:root {
    --primary: #3e5fff;
    --primary-dark: #2a45cc;
    --secondary: #2c303b;
    --text-dark: #333333;
    --text-light: #666666;
    --background-light: #f4f8ff;
    --white: #ffffff;
    --font-primary: 'Nunito Sans', sans-serif;
    --font-secondary: 'Nunito', sans-serif;
    --border-radius: 3px;
    --transition: all 0.3s ease;
}

/* ----- Typography ----- */
body {
    font-family: var(--font-secondary);
    color: var(--text-dark);
    line-height: 1.6;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

h1, .h1 { font-size: 44px; }
h2, .h2 { font-size: 36px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 20px; }
h5, .h5 { font-size: 18px; }
h6, .h6 { font-size: 16px; }

/* Heading colors from your site */
.text-white { color: var(--white); }
.text-primary { color: var(--primary); }
.text-dark { color: var(--text-dark); }

/* ----- Links ----- */
a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}
a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ----- Buttons (from .elementor-button) ----- */
.btn, .elementor-button {
    display: inline-block;
    font-family: var(--font-secondary);
    font-size: 15px;
    font-weight: 400;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    background-color: var(--primary);
    color: var(--white);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}
.btn:hover, .elementor-button:hover {
    background-color: var(--primary-dark);
    color: var(--white);
    opacity: 0.9;
    text-decoration: none;
}

/* Button sizes */
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 16px 32px; font-size: 18px; }

/* Button variations */
.btn-outline {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
}
.btn-outline:hover {
    background: var(--primary);
    color: var(--white);
}

/* Animations from Elementor */
.elementor-animation-grow, .btn-grow {
    transition: transform 0.3s;
}
.elementor-animation-grow:hover, .btn-grow:hover {
    transform: scale(1.1);
}

.elementor-animation-float, .btn-float {
    transition: transform 0.3s;
}
.elementor-animation-float:hover, .btn-float:hover {
    transform: translateY(-8px);
}

/* Specific buttons from your site */
.btn-info-home0 {
    margin-top: 4rem;
    color: var(--primary);
    border-color: var(--primary);
    background: transparent;
}
.btn-info-home2 {
    color: #1B3978;
    border: 1px solid #B5B5B5;
    background: var(--background-light);
}

/* ----- Header & Navigation ----- */
.navbar.navbar-inverse {
    background-color: var(--white);
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}
.navbar-brand {
    padding: 10px 15px;
}
.navbar-brand img {
    height: 36px;
    width: auto;
}
.navbar-nav > li > a {
    color: var(--text-dark) !important;
    font-family: var(--font-primary);
    font-weight: 600;
    padding: 15px 20px;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
    color: var(--primary) !important;
    background-color: transparent;
}
.navbar-toggle {
    border: none;
}
.navbar-toggle .icon-bar {
    background-color: var(--primary);
}
.dropdown-menu {
    background-color: var(--white);
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.dropdown-menu > li > a {
    color: var(--text-dark);
    padding: 10px 20px;
}
.dropdown-menu > li > a:hover {
    background-color: var(--background-light);
    color: var(--primary);
}

/* Mobile menu (from your popup) */
.elementor-popup-modal {
    background-color: var(--white);
}
.elementor-nav-menu--dropdown a {
    color: var(--text-dark);
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
}
.elementor-nav-menu--dropdown a:hover {
    background-color: var(--background-light);
    color: var(--primary);
}

/* ----- Hero Section (full-width image/text) ----- */
.full-width-image-text-module {
    background-color: var(--secondary);
    color: var(--white);
    padding: 80px 0;
}
.full-width-image-text-module h1 {
    color: var(--white);
    font-size: 52px;
    margin-bottom: 20px;
}

/* ----- Industry Cards (from .is-hover-scale) ----- */
.industry-card {
    background: var(--white);
    border-radius: 20px;
    padding: 30px;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.industry-card:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.industry-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
}
.industry-card h3 {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-dark);
}
.industry-card p {
    font-family: var(--font-secondary);
    font-size: 16px;
    color: var(--text-light);
    margin-bottom: 20px;
}
.button-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hover-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}
.hover-icon:hover {
    background: var(--primary-dark);
}
.hover-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--white);
}
.expand-button a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.expand-button a:hover {
    text-decoration: underline;
}

/* ----- Testimonials Carousel (from Swiper) ----- */
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #ccc;
    opacity: 0.5;
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--primary);
}
.testimonial-card {
    background: var(--background-light);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
}
.testimonial-card p {
    font-size: 18px;
    font-style: italic;
    margin-bottom: 20px;
}
.testimonial-author {
    font-weight: 600;
    color: var(--text-dark);
}
.testimonial-company {
    color: var(--primary);
    font-weight: 600;
}

/* ----- Icon List (from widget-icon-list) ----- */
.icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.icon-list li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.icon-list .icon {
    display: flex;
    width: 24px;
    margin-right: 10px;
}
.icon-list .icon svg {
    fill: var(--primary);
    width: 20px;
    height: 20px;
}
.icon-list .text {
    color: var(--text-dark);
    text-decoration: none;
}
.icon-list .text:hover {
    text-decoration: underline;
}

/* Footer specific */
.footer-contact .icon-list .text {
    color: var(--white);
}
.footer-contact .icon-list .icon svg {
    fill: var(--white);
}

/* ----- Image Box (from widget-image-box) ----- */
.image-box {
    text-align: center;
    margin-bottom: 20px;
}
.image-box .image-box-img {
    display: inline-block;
    margin-bottom: 15px;
}
.image-box .image-box-img img {
    max-width: 100%;
    border-radius: 10px;
}
.image-box .image-box-title {
    font-family: var(--font-primary);
    font-weight: 700;
    margin-bottom: 10px;
}
.image-box .image-box-description {
    font-family: var(--font-secondary);
    color: var(--text-light);
}

/* ----- Social Icons (from widget-social-icons) ----- */
.social-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--white);
    transition: opacity 0.3s;
}
.social-icon:hover {
    opacity: 0.9;
    color: var(--white);
    text-decoration: none;
}
.social-icon.linkedin { background-color: #0077b5; }
.social-icon.twitter { background-color: #1da1f2; }
.social-icon.facebook { background-color: #3b5998; }
.social-icon.youtube { background-color: #cd201f; }

/* ----- Footer ----- */
.footer-container {
    background-color: var(--secondary);
    color: var(--white);
    padding: 40px 0;
}
.footer-container a {
    color: var(--white);
}
.footer-container a:hover {
    color: var(--primary);
}
.footerbtn {
    background: transparent;
    border: none;
    color: var(--white);
    font-family: var(--font-secondary);
    font-size: 16px;
    padding: 5px 0;
    text-align: left;
    width: 100%;
    cursor: pointer;
}
.footerbtn:hover {
    color: var(--primary);
}
.copyright {
    text-align: right;
    color: #E9E9E9;
    font-size: 14px;
}

/* ----- Responsive Overrides ----- */
@media (max-width: 1024px) {
    h1, .h1 { font-size: 36px; }
    h2, .h2 { font-size: 28px; }
}

@media (max-width: 768px) {
    .navbar-nav > li > a {
        padding: 10px 15px;
    }
    .full-width-image-text-module h1 {
        font-size: 36px;
    }
    .industry-card {
        padding: 20px;
    }
    .copyright {
        text-align: left;
        margin-top: 20px;
    }
    .footerbtn {
        text-align: center;
    }
}

@media (max-width: 480px) {
    h1, .h1 { font-size: 28px; }
    h2, .h2 { font-size: 24px; }
}

/* ----- Safari Flexbox Fixes (from apple-webkit.min.css) ----- */
.e--ua-appleWebkit .elementor-grid-0.elementor-share-buttons--align-center .elementor-grid,
.e--ua-appleWebkit .elementor-grid-0.elementor-widget-social-icons.e-grid-align-center .elementor-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: calc(-.5 * var(--grid-column-gap, 5px));
    margin-right: calc(-.5 * var(--grid-column-gap, 5px));
    width: auto;
}
.e--ua-appleWebkit .elementor-grid-0.elementor-share-buttons--align-center .elementor-grid-item,
.e--ua-appleWebkit .elementor-grid-0.elementor-widget-social-icons.e-grid-align-center .elementor-grid-item {
    margin-left: calc(.5 * var(--grid-column-gap, 5px));
    margin-right: calc(.5 * var(--grid-column-gap, 5px));
}