/**
 * FIBIS Agencyo - Custom Styles
 * Bulgarian Accountancy Company - Based on Agencyo index-3.php
 *
 * Color Palette (matching original teal design):
 * - Primary Dark: #132136 (dark blue/teal for text)
 * - Teal Accent: #0f6466 (for buttons and accents)
 * - Top Bar: #132136 (dark teal)
 * - Light Gray: #f8f9fa
 * - White: #ffffff
 */

/* ===================================
   CSS Variables Override
=================================== */
:root {
    /* FIBIS Colors - matching original teal design */
    --fibis-primary: #132136;
    --fibis-primary-dark: #0a151f;
    --fibis-teal: #0f6466;
    --fibis-teal-dark: #0d5355;
    --fibis-light: #f8f9fa;
    --fibis-white: #ffffff;
    --fibis-dark: #333333;
    --fibis-text: #666666;
    --fibis-topbar: #132136;

    /* Override Agencyo theme colors */
    --theme-color1: #132136;
    --theme-color2: #0f6466;
    --theme-color3: #0f6466;
}

/* ===================================
   Button Theme - Colors via CSS Variables
   (--theme-color3 is set to #0f6466 above)
=================================== */

/* ===================================
   Header Top Bar - Light background like reference
=================================== */
.header-style-three .header-top {
    background: #e6f6fa !important;
}

.header-style-three .header-top .list-style-one li,
.header-style-three .header-top .list-style-one li a {
    color: var(--fibis-primary) !important;
}

.header-style-three .header-top .list-style-one li i {
    color: var(--fibis-primary) !important;
}

.header-style-three .header-top .header-socials li a {
    color: var(--fibis-primary) !important;
}

.header-style-three .header-top .header-socials li a:hover {
    color: var(--fibis-teal) !important;
}

/* Top right info (location, etc) */
.header-style-three .header-top .top-right span,
.header-style-three .header-top .top-right .inner span {
    color: var(--fibis-primary) !important;
}

.header-style-three .header-top .top-right span i {
    color: var(--fibis-primary) !important;
}

/* Language Switcher in Header - Microweber mw-dropdown */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    margin-left: 15px;
    position: relative;
    z-index: 99999;
}

.lang-switcher .module-multilanguage {
    display: inline-block;
    position: relative;
    z-index: 99999;
}

/* The dropdown trigger button */
.lang-switcher .mw-dropdown {
    position: relative;
    z-index: 99999;
}

.lang-switcher .mw-dropdown.active {
    z-index: 999999;
}

.lang-switcher .mw-dropdown-value {
    background: transparent !important;
    border: none !important;
    padding: 4px 10px !important;
    color: var(--fibis-primary) !important;
    box-shadow: none !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.lang-switcher .mw-dropdown-value:hover {
    color: var(--fibis-teal) !important;
}

/* The dropdown content/menu */
.lang-switcher .mw-dropdown-content {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    transform: translateX(0);
    background: var(--fibis-white) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 150px;
    z-index: 9999999 !important;
    white-space: nowrap;
    margin-right: -20px;
}

.lang-switcher .mw-dropdown-content ul {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.lang-switcher .mw-dropdown-content ul li {
    padding: 8px 15px;
    cursor: pointer;
    color: var(--fibis-primary) !important;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.lang-switcher .mw-dropdown-content ul li:hover {
    background: rgba(15, 100, 102, 0.1) !important;
    color: var(--fibis-teal) !important;
}

/* Flag icon sizing */
.lang-switcher .flag-icon {
    width: 20px;
    height: 15px;
    display: inline-block;
}

/* Header top inner alignment - FORCE overflow visible for dropdown */
.main-header.header-style-three .header-top,
.header-style-three .header-top,
header .header-top,
.header-top {
    position: relative;
    z-index: 99999 !important;
    overflow: visible !important;
}

.main-header.header-style-three .header-top .inner-container,
.header-style-three .header-top .inner-container,
.header-top .inner-container {
    overflow: visible !important;
}

.main-header.header-style-three .header-top .top-right,
.header-style-three .header-top .top-right,
.header-top .top-right {
    overflow: visible !important;
    position: relative;
}

.header-style-three .header-top .top-right .inner {
    display: flex;
    align-items: center;
    gap: 15px;
    overflow: visible !important;
    position: relative;
}

.header-style-three .header-top .top-right .inner > * {
    display: inline-flex;
    align-items: center;
}

/* Ensure header lower doesn't overlap dropdown */
.main-header.header-style-three .header-lower,
.header-style-three .header-lower,
.header-lower {
    position: relative;
    z-index: 99 !important;
}

/* Main header stacking */
.main-header .auto-container {
    overflow: visible !important;
}

/* Page wrapper - allow overflow for dropdowns */
.page-wrapper {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* ===================================
   Navigation
=================================== */
.main-menu .navigation > li > a {
    color: var(--fibis-primary) !important;
    font-weight: 600;
}

.main-menu .navigation > li > a:hover,
.main-menu .navigation > li.current > a {
    color: var(--fibis-teal) !important;
}

/* ===================================
   Hero Banner - No bottom spacing
=================================== */
.slider-three {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.slider-three .animations-mode .animate-title {
    color: rgba(30, 58, 95, 0.05);
    font-weight: 800;
}

/* Fix for editable scrolling text - maintain flex layout inside edit wrapper */
.animations-mode .edit.safe-mode,
.animations-mode > .edit {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.slider-three .title {
    color: var(--fibis-primary);
    font-weight: 700;
}

.slider-three .text {
    color: var(--fibis-text);
}

/* ===================================
   Service Section - Flush with hero, no padding
=================================== */
.service-section-three {
    background: var(--fibis-white);
    padding: 0;
    margin-top: -1px; /* Remove any gap */
}

.service-block_three .inner {
    background: var(--fibis-white);
    transition: all 0.3s ease;
}

.service-block_three .inner:hover {
    background: var(--fibis-primary);
}

.service-block_three .number {
    color: var(--fibis-teal);
    font-weight: 700;
}

.service-block_three .inner:hover .number {
    color: rgba(255, 255, 255, 0.3);
}

.service-block_three .title a {
    color: var(--fibis-primary);
}

.service-block_three .inner:hover .title a {
    color: var(--fibis-white);
}

.service-block_three .icon {
    color: var(--fibis-teal);
}

.service-block_three .text {
    color: var(--fibis-text);
}

.service-block_three .inner:hover .text {
    color: rgba(255, 255, 255, 0.8);
}

/* ===================================
   About Section (Business Two) - Light gray background
=================================== */
.business-two {
    padding: 100px 0;
    background: var(--fibis-light);
}

.business-two .sub-title {
    color: var(--fibis-teal);
    font-weight: 600;
}

.business-two h2 {
    color: var(--fibis-primary);
}

.business-two .list li {
    color: var(--fibis-dark);
}

.business-two .list li i {
    color: var(--fibis-teal);
}

.business-two .experiance {
    background: var(--fibis-primary);
}

.business-two .experiance .award-text {
    color: rgba(255, 255, 255, 0.9);
}

.business-two .experiance-count {
    color: var(--fibis-teal);
}

.business-two .year {
    background: var(--fibis-teal);
    color: var(--fibis-white);
}

/* ===================================
   Skills / Why Us Section - DARK Background like original
=================================== */
.skill-section {
    padding: 100px 0;
    background: var(--fibis-primary) !important;
    position: relative;
}

/* Wave pattern at top */
.skill-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom right, var(--fibis-light) 49%, transparent 50%);
}

.skill-section .sub-title {
    color: var(--fibis-teal) !important;
}

.skill-section h2,
.skill-section .sec-title h2 {
    color: var(--fibis-white) !important;
}

.skill-section .text,
.skill-section .sec-title .text {
    color: rgba(255, 255, 255, 0.8) !important;
}

.skill-section .default-skill-title {
    color: var(--fibis-white) !important;
}

.skill-section .default-count-box {
    color: var(--fibis-white) !important;
}

.default-skill-item .default-skill-title {
    color: var(--fibis-primary);
    font-weight: 600;
}

.default-skill-item .default-bar {
    background: var(--fibis-teal) !important;
}

.default-skill-item .default-count-box {
    color: var(--fibis-primary);
}

/* ===================================
   Steps / Process Section - Light background
=================================== */
.steps-two {
    padding: 100px 0;
    background: var(--fibis-light);
}

.steps-two .sub-title {
    color: var(--fibis-teal);
}

.steps-two h2 {
    color: var(--fibis-primary);
}

.step-block_two .number {
    color: var(--fibis-teal);
    font-size: 48px;
    font-weight: 700;
}

.step-block_two .title {
    color: var(--fibis-primary);
}

.step-block_two .text {
    color: var(--fibis-text);
}

/* ===================================
   Statistics / Funfact Section - White background
=================================== */
.funfact-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: var(--fibis-white);
}

.funfact-section .title-box {
    color: var(--fibis-primary);
}

.funfact-counts .designation {
    color: var(--fibis-teal);
}

.funfact-counts .count-box {
    color: var(--fibis-primary);
}

/* ===================================
   Testimonials Section - Light background
=================================== */
.testimonial-section-five {
    background: var(--fibis-light);
    padding-bottom: 100px;
}

.testimonial-section-five .upper-box {
    background: var(--fibis-light);
}

.testimonial-section-five .animations-mode .title {
    color: rgba(30, 58, 95, 0.08);
    text-transform: uppercase;
}

.testimonial-section-five .title-box {
    color: var(--fibis-primary);
}

/* Testimonial card - colors only, preserve original layout */
.testimonial-block_five .info .name {
    color: var(--fibis-primary) !important;
}

.testimonial-block_five .info .designation {
    color: var(--fibis-teal) !important;
}

.testimonial-block_five .title {
    color: var(--fibis-teal) !important;
}

/* Fix avatar image - ensure proper fit and show face */
.testimonial-block_five .info .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
}

.testimonial-block_five .text {
    color: var(--fibis-text);
}

.testimonial-section-five .nav-box div {
    background: var(--fibis-primary);
    color: var(--fibis-white);
}

.testimonial-section-five .nav-box div:hover {
    background: var(--fibis-teal);
}

/* ===================================
   Contact Section (Fluid Two)
=================================== */
.fluid-two .left-box {
    background: var(--fibis-primary);
}

.fluid-two .right-box {
    background: var(--fibis-primary-dark);
}

.fluid-two .sub-title {
    color: var(--fibis-teal);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--fibis-white) !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.contact-form label {
    color: rgba(255, 255, 255, 0.8);
}

/* ===================================
   Footer
=================================== */
.main-footer.color-two {
    background: var(--fibis-primary);
}

/* Footer logo size - reduce oversized logo */
.main-footer .footer-logo img,
.main-footer .middle-box .footer-logo img,
.footer-logo img,
.footer-logo a img {
    max-width: 160px !important;
    height: auto !important;
}

.main-footer .footer-title {
    color: var(--fibis-white);
    font-weight: 600;
    margin-bottom: 25px;
}

.main-footer .footer-text {
    color: rgba(255, 255, 255, 0.7);
}

.main-footer .footer-list li a {
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}

.main-footer .footer-list li a:hover {
    color: var(--fibis-teal);
    padding-left: 5px;
}

.main-footer .social-links li a {
    background: rgba(255, 255, 255, 0.1);
    color: var(--fibis-white);
}

.main-footer .social-links li a:hover {
    background: var(--fibis-teal);
    color: var(--fibis-white);
}

.main-footer .subscribe-text {
    color: var(--fibis-white);
}

.main-footer .middle-box .info {
    color: rgba(255, 255, 255, 0.7);
}

.main-footer .middle-box .info a {
    color: var(--fibis-white);
}

.main-footer .middle-box .info a:hover {
    color: var(--fibis-teal);
}

.main-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.main-footer .copyright {
    color: rgba(255, 255, 255, 0.6);
}

.main-footer .footer-bottom_nav li a {
    color: rgba(255, 255, 255, 0.6);
}

.main-footer .footer-bottom_nav li a:hover {
    color: var(--fibis-teal);
}

/* ===================================
   Section Titles
=================================== */
.sec-title .sub-title {
    color: var(--fibis-teal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
}

.sec-title h2,
.sec-title h1 {
    color: var(--fibis-primary);
    font-weight: 700;
}

.sec-title .text {
    color: var(--fibis-text);
}

.sec-title.light .sub-title {
    color: var(--fibis-teal);
}

.sec-title.light h2,
.sec-title.light h1 {
    color: var(--fibis-white);
}

.sec-title.light .text {
    color: rgba(255, 255, 255, 0.8);
}

/* ===================================
   Preloader
=================================== */
.preloader .icon {
    border-color: var(--fibis-primary);
    border-top-color: var(--fibis-teal);
}

/* ===================================
   Scroll to Top
=================================== */
.scroll-to-top {
    background: var(--fibis-teal);
}

.scroll-to-top:hover {
    background: var(--fibis-primary);
}

/* ===================================
   Responsive Adjustments
=================================== */
@media (max-width: 991px) {
    .slider-three .title {
        font-size: 32px;
    }

    .service-section-three,
    .business-two,
    .skill-section,
    .steps-two,
    .funfact-section {
        padding: 60px 0;
    }
}

@media (max-width: 767px) {
    .slider-three .title {
        font-size: 28px;
    }

    .fluid-two .outer-container {
        flex-direction: column;
    }

    .fluid-two .left-box,
    .fluid-two .right-box {
        width: 100%;
    }

    .main-footer .footer-bottom_nav {
        text-align: center !important;
        margin-top: 15px;
    }
}

/* ===================================
   Smooth hover transitions
=================================== */
a, button, .service-block_three .inner {
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--fibis-teal);
    outline-offset: 2px;
}

/* ===================================
   Print Styles
=================================== */
@media print {
    .preloader,
    .scroll-to-top,
    .mobile-nav-toggler {
        display: none !important;
    }
}

/* ===================================
   FIX: Service Boxes Equal Height
=================================== */
.service-section-three .inner-container > .row {
    display: flex;
    flex-wrap: wrap;
}

.service-section-three .column {
    display: flex;
}

.service-block_three {
    width: 100%;
    display: flex;
}

.service-block_three .inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.service-block_three .text {
    flex-grow: 1;
}

/* ===================================
   FIX: Footer Background No Repeat
=================================== */
.main-footer {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* ===================================
   FIX: Max Viewport for Ultrawide Screens
=================================== */
@media (min-width: 1921px) {
    body {
        background: var(--fibis-primary);
    }

    .page-wrapper {
        max-width: 1920px;
        margin: 0 auto;
        background: var(--fibis-white);
        overflow: hidden;
    }

    .main-footer {
        background-color: var(--fibis-primary) !important;
    }
}