/**
* Theme Name: Wellaitech
* Description: Wellaitech Trading WLL - Green & Black Theme
* Version: 1.1
*/

/* Bootstrap col-lg overrides removed – using standard Bootstrap grid */
.post-share-options {
    position: relative;
    padding-bottom: 20px;
    padding-top: 20px;
    border-bottom: 1px solid rgba(var(--white-color-rgb), 0.15);
}

/* ===== Wellaitech Green & Black Theme Enhancements ===== */

/* Header Logo – plain PNG only, no outer box */
.main-header .header-lower .logo-box .logo {
    position: relative;
    padding: 20px 0px 20px;
}

.main-header .header-lower .logo-box .logo a {
    display: inline-block;
    background: none;
    padding: 0;
    border: none;
    box-shadow: none;
}

.main-header .header-lower .logo-box .logo a:hover {
    background: none;
    border: none;
    box-shadow: none;
}

.main-header .main-box .logo-box .logo img,
.main-header .header-lower .logo-box .logo img {
    max-height: 42px;
    width: auto;
    display: block;
    vertical-align: middle;
}

.main-header.fixed-header .header-lower .logo-box .logo a {
    padding: 0;
}

.main-header.fixed-header .main-box .logo-box .logo img,
.main-header.fixed-header .header-lower .logo-box .logo img {
    max-height: 34px;
}

/* Desktop: larger logo in header */
@media only screen and (min-width: 992px) {
    .main-header .main-box .logo-box .logo img,
    .main-header .header-lower .logo-box .logo img {
        max-height: 56px;
    }
    .main-header.fixed-header .main-box .logo-box .logo img,
    .main-header.fixed-header .header-lower .logo-box .logo img {
        max-height: 46px;
    }
}

/* Mobile menu logo – plain PNG only */
.mobile-menu .nav-logo img {
    max-width: 180px;
}

.mobile-menu .nav-logo a {
    display: inline-block;
    background: none;
    padding: 0;
    border: none;
}

/* Footer logo – plain PNG only */
.footer-logo a {
    display: inline-block;
    background: none;
    padding: 0;
    border: none;
    box-shadow: none;
}

.footer-logo a:hover {
    background: none;
    border: none;
}

.footer-logo img {
    max-height: 50px;
    width: auto;
    display: block;
}

/* Green CTA box – half height on all pages */
.cta-one .inner-container::before {
    top: 20px;
}
.cta-one_title-outer {
    padding-top: 55px;
    padding-bottom: 25px;
}
.cta-one_title {
    margin-bottom: 17px;
}

/* Enhanced Button Glow Effect for Green */
.btn-style-one {
    box-shadow: 0 4px 15px rgba(var(--main-color-rgb), 0.25);
}

.btn-style-one:hover {
    box-shadow: 0 6px 20px rgba(var(--main-color-rgb), 0.35);
}

/* Green accent gradients refinement */
.header-top {
    background: var(--main-color);
    background: linear-gradient(to right, var(--main-color) 0%, var(--color-five) 100%);
}

/* Enhanced section title icon styling */
.sec-title_icon {
    color: var(--color-five);
    border-top-color: var(--color-five);
    background-color: rgba(var(--main-color-rgb), 0.15);
}

/* Preloader with green theme */
.handle-preloader {
    background-color: #111111;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:before {
    color: var(--main-color);
}

.handle-preloader .animation-preloader .spinner {
    border: 3px solid var(--main-color);
    border-top-color: rgba(var(--main-color-rgb), 0.3);
}

/* Subtle green glow for social icons on hover */
.footer-social_box a:hover,
.header-three-socials a:hover {
    box-shadow: 0 0 12px rgba(var(--main-color-rgb), 0.3);
}

/* Enhanced service cards with green accent */
.services-block_one-inner:hover {
    border-color: rgba(var(--main-color-rgb), 0.3);
}

/* Newsletter input focus */
.newsletter-box .form-group input:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 8px rgba(var(--main-color-rgb), 0.2);
}

/* Scrollbar refined */
::-webkit-scrollbar-thumb {
    border-radius: 5px;
}

/* ===== Mobile Menu - Left Side, Dark Theme, Hierarchy ===== */

/* Move mobile menu to left side */
.mobile-menu {
    left: 0 !important;
    right: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.mobile-menu .menu-box {
    left: -400px !important;
    right: auto !important;
    background: #111811 !important;
    border-right: 1px solid rgba(91, 191, 36, 0.15);
}

.mobile-menu-visible .mobile-menu .menu-box {
    left: 0px !important;
    right: auto !important;
}

.mobile-menu .menu-backdrop {
    left: 0 !important;
    right: auto !important;
    -webkit-transform: translateX(-101%);
    -ms-transform: translateX(-101%);
    transform: translateX(-101%);
}

.mobile-menu-visible .mobile-menu .menu-backdrop {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    width: 100vw;
}

/* Close button at top-right of the menu panel */
.mobile-menu .close-btn {
    right: 15px !important;
    left: auto !important;
    color: #aaa !important;
    font-size: 20px;
}

/* Dark themed navigation items */
.main-header .mobile-menu .navigation {
    border-top: 1px solid rgba(91, 191, 36, 0.12) !important;
}

.main-header .mobile-menu .navigation li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.main-header .mobile-menu .navigation li > a {
    color: #e0e0e0 !important;
    font-size: 15px !important;
    padding: 12px 20px !important;
    font-weight: 500 !important;
}

/* Only top-level items turn green when current */
.main-header .mobile-menu .navigation > li:hover > a,
.main-header .mobile-menu .navigation > li.current > a {
    color: #5BBF24 !important;
}

/* Level 1 - Main menu items (bold, larger) */
.main-header .mobile-menu .navigation > li > a {
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    padding: 14px 20px !important;
    color: #ffffff !important;
}

/* Level 2 - Sub-menu category headers (Broadcasting Services, Lighting, etc.) */
.main-header .mobile-menu .navigation > li > ul > li > a {
    padding-left: 30px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-left: 3px solid rgba(91, 191, 36, 0.3) !important;
}

.main-header .mobile-menu .navigation > li > ul > li > a:hover,
.main-header .mobile-menu .navigation > li > ul > li.current > a {
    color: #5BBF24 !important;
}

.main-header .mobile-menu .navigation > li > ul > li:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Level 3 - Individual service items (XR Solutions, Pro Lighting, etc.) */
.main-header .mobile-menu .navigation > li > ul > li > ul > li > a {
    padding-left: 48px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #b0b0b0 !important;
    border-left: none !important;
    background: transparent !important;
    position: relative;
}

.main-header .mobile-menu .navigation > li > ul > li > ul > li > a::before {
    content: '›';
    position: absolute;
    left: 36px;
    color: rgba(91, 191, 36, 0.4);
    font-size: 16px;
    font-weight: bold;
}

.main-header .mobile-menu .navigation > li > ul > li > ul > li > a:hover,
.main-header .mobile-menu .navigation > li > ul > li > ul > li.current > a {
    color: #5BBF24 !important;
}

.main-header .mobile-menu .navigation > li > ul > li > ul > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* Dropdown toggle buttons - must be visible and tappable */
.main-header .mobile-menu .navigation li.dropdown .dropdown-btn {
    position: absolute !important;
    right: 0px !important;
    top: 0px !important;
    width: 44px !important;
    height: 44px !important;
    text-align: center !important;
    line-height: 44px !important;
    cursor: pointer !important;
    z-index: 5 !important;
    display: block !important;
    color: #5BBF24 !important;
}

.main-header .mobile-menu .navigation li.dropdown .dropdown-btn:after {
    content: '' !important;
    position: absolute !important;
    left: 0px !important;
    top: 10px !important;
    width: 1px !important;
    height: 24px !important;
    border-left: 1px solid rgba(91, 191, 36, 0.15) !important;
}

/* Ensure submenu lists are hidden by default (no !important so jQuery can override) */
.mobile-menu .menu-outer .navigation li > ul,
.mobile-menu .menu-outer .navigation li > ul > li > ul {
    display: none;
}

/* Mobile menu logo area */
.mobile-menu .nav-logo {
    padding: 20px 20px !important;
    border-bottom: 1px solid rgba(91, 191, 36, 0.1);
}

/* ===== WhatsApp Floating Button ===== */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55);
}

.whatsapp-float svg {
    width: 30px;
    height: 30px;
    fill: #ffffff;
}

.whatsapp-float .whatsapp-tooltip {
    position: absolute;
    right: 68px;
    top: 50%;
    transform: translateY(-50%);
    background: #1a1a1a;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    border: 1px solid rgba(91, 191, 36, 0.2);
}

.whatsapp-float .whatsapp-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 6px solid #1a1a1a;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
}

/* Adjust WhatsApp button for mobile - ensure it's always visible */
@media only screen and (max-width: 767px) {
    .whatsapp-float {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        bottom: 16px !important;
        right: 16px !important;
        width: 50px !important;
        height: 50px !important;
        position: fixed !important;
        z-index: 999999 !important;
    }
    .whatsapp-float svg {
        width: 26px;
        height: 26px;
    }
    .whatsapp-float .whatsapp-tooltip {
        display: none !important;
    }
}

/* ===== Footer Services Grid ===== */
.footer-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 30px;
    align-items: start;
}

.footer-services-grid .footer-service-category h6 {
    color: #5BBF24;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-services-grid .footer-service-category ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.footer-services-grid .footer-service-category ul li {
    margin-bottom: 6px;
}

.footer-services-grid .footer-service-category ul li a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    transition: color 0.3s ease;
    text-decoration: none;
}

.footer-services-grid .footer-service-category ul li a:hover {
    color: #5BBF24;
}

@media only screen and (max-width: 599px) {
    .footer-services-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Footer Quick Links ===== */
.footer-quick-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

.footer-quick-links li {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px;
    position: relative;
    padding-left: 16px;
    box-sizing: border-box;
}

.footer-quick-links li::before {
    content: '›';
    position: absolute;
    left: 0;
    top: 0;
    color: #5BBF24;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.footer-quick-links li a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    transition: color 0.3s ease, padding-left 0.3s ease;
    text-decoration: none;
}

.footer-quick-links li a:hover {
    color: #5BBF24;
    padding-left: 4px;
}

/* Mobile: 2 items per row */
@media only screen and (max-width: 767px) {
    .footer-quick-links {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .footer-quick-links li {
        display: block !important;
        width: 50% !important;
    }
}

/* ===== Footer Contact Info / Address ===== */
.footer-contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact-info li {
    margin-bottom: 18px;
    padding-left: 34px;
    position: relative;
}

.footer-contact-info li i {
    color: #5BBF24;
    font-size: 16px;
    position: absolute;
    left: 0;
    top: 2px;
}

.footer-contact-info li span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline;
}

.footer-contact-info li a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-info li a:hover {
    color: #5BBF24;
}

.footer-contact-info li br + span,
.footer-contact-info li br + a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

.footer-contact-info li span a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-info li span a:hover {
    color: #5BBF24;
}

/* Footer Phone - separate section with icon */
.footer-widget-phone {
    margin-bottom: 24px;
}

.footer-phone-block a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
}

.footer-phone-block a i {
    color: #5BBF24;
    font-size: 18px;
    flex-shrink: 0;
}

.footer-phone-block a:hover {
    color: #5BBF24;
}

.footer-phone-block a:hover i {
    color: #5BBF24;
}

/* ===== Trusted by industry leaders – all text white for readability ===== */
.choose-one .sec-title_title,
.choose-one .sec-title_heading,
.choose-one .sec-title_heading span,
.choose-one .counter-block_one-count,
.choose-one .counter-block_one-count i,
.choose-one .counter-block_one-text {
    color: #ffffff !important;
}

.choose-one .counter-block_one-icon {
    color: #ffffff !important;
}

/* ===== Core Values (About) – value block text white for readability ===== */
.value-one .value-block_one-title,
.value-one .value-block_one-text {
    color: #ffffff !important;
}

/* ===== Border radius for all content images ===== */
.service-detail_image,
.service-detail_image img,
.service-detail_image-two,
.service-detail_image-two img,
.about-one_tab-image,
.about-one_tab-image img,
.news-block_one-image img,
.news-block_three-image img,
.testimonial-block_one-image img,
.testimonial-block_two-image img,
.member-block_one-image img,
.team-block_one-image img,
.story-one_image img,
.video-one_play img,
.video-box .video-image img,
.blog-detail_image img,
.answer-one_author-image img {
    border-radius: 12px;
}

/* ===== Banner / slider images: border-radius + size for better aesthetic ===== */
.slider-one_image {
    overflow: hidden;
    border-radius: 20px;
}

.slider-one_image img {
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
    display: block;
}

.slider-one_image-outer {
    padding-bottom: 50px;
}

/* Slightly smaller banner image column for balance */
.slider-one_image-column {
    max-width: 100%;
}

@media (min-width: 992px) {
    .slider-one_image img {
        max-height: 420px;
    }
}