/**
 * Custom Updates for Navbar and Footer
 * v3 - Enhanced smoothness for all transitioning properties
 */

/* Target both the header wrapper and the potential sticky section */
.elementor-location-header,
.the7-e-sticky-effect-yes {
    transition: background-color 0.5s ease-in-out, padding 0.5s ease, box-shadow 0.5s ease-in-out !important;
}

/* Force Sticky Header on All Pages */
.elementor-location-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

/* =========================================
   Blog Page UI Improvements
   ========================================= */

/* Blog Post Cards */
.blog .wf-cell .post,
.page-id-349 .wf-cell .post {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0, 0, 0, 0.03);
    overflow: hidden;
    height: 100%;
}

.blog .wf-cell .post:hover,
.page-id-349 .wf-cell .post:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Post Thumbnail */
.blog .post-thumbnail-rollover,
.page-id-349 .post-thumbnail-rollover {
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.blog .post-thumbnail-rollover img,
.page-id-349 .post-thumbnail-rollover img {
    transition: transform 0.8s ease;
}

.blog .wf-cell .post:hover .post-thumbnail-rollover img,
.page-id-349 .wf-cell .post:hover .post-thumbnail-rollover img {
    transform: scale(1.08);
}

/* Post Content Padding */
.blog .post-entry-content,
.page-id-349 .post-entry-content {
    padding: 25px 30px 35px;
}

/* Post Title */
.blog .post-title,
.page-id-349 .post-title {
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
    transition: color 0.3s ease;
}

/* Read More Button - Make it look premium */
.blog .post-entry-content .box-button,
.page-id-349 .post-entry-content .box-button {
    background: transparent !important;
    color: #333 !important;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog .post-entry-content .box-button:hover,
.page-id-349 .post-entry-content .box-button:hover {
    background: #111 !important;
    color: #fff !important;
    /* Fixed: White text on dark hover */
    border-color: #111;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Load More Button - Center and Style */
.blog .paginator-more-button,
.page-id-349 .paginator-more-button {
    text-align: center;
    margin-top: 50px;
}

.blog .button-load-more,
.page-id-349 .button-load-more {
    background: #FFFFFF;
    color: #333;
    font-size: 18px;
    /* Increased */
    font-weight: 500;
    text-transform: none;
    padding: 20px 80px;
    /* Increased */
    border-radius: 50px;
    /* Pill shape for Load More too, matching Read More style if desired, or keep 0 */
    border: 1px solid #ccc;
    box-shadow: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.blog .button-load-more:hover,
.page-id-349 .button-load-more:hover {
    background: #FFFFFF;
    color: #30a46c;
    /* Green text */
    border-color: #30a46c;
    /* Green border */
    transform: none;
    box-shadow: none;
}

/* Active Category Filter - Green Underline */
.filter-item.act {
    color: #30a46c !important;
    border-bottom: 2px solid #30a46c;
    padding-bottom: 4px;
    text-decoration: none !important;
}

/* Ensure images cover the area */
.blog .post-thumbnail-rollover img,
.page-id-349 .post-thumbnail-rollover img {
    width: 100%;
    height: 240px;
    /* Force consistent height */
    object-fit: cover;
}


/* State: Scrolled Down (White Background) */
.scrolled-nav {
    background-color: #ffffff !important;
    background-image: none !important;
    /* Remove any gradients */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Smooth transition for text and icons */
.elementor-location-header .menu-item-text,
.elementor-location-header .menu-text,
.elementor-location-header .item-content,
.elementor-location-header a,
.elementor-location-header i,
.elementor-location-header .elementor-heading-title,
.elementor-location-header .elementor-icon,
.elementor-location-header .e-font-icon-svg,
.the7-e-sticky-effect-yes .menu-item-text,
.the7-e-sticky-effect-yes .menu-text,
.the7-e-sticky-effect-yes .item-content,
.the7-e-sticky-effect-yes a,
.the7-e-sticky-effect-yes i,
.the7-e-sticky-effect-yes .elementor-heading-title,
.the7-e-sticky-effect-yes .elementor-icon,
.the7-e-sticky-effect-yes .e-font-icon-svg {
    transition: color 0.5s ease-in-out, fill 0.5s ease-in-out !important;
}

/* Change Text Color on White Background */
.scrolled-nav .menu-item-text,
.scrolled-nav .menu-text,
.scrolled-nav .item-content,
.scrolled-nav a,
.scrolled-nav i,
.scrolled-nav .elementor-heading-title,
.scrolled-nav .elementor-icon {
    color: #333333 !important;
    fill: #333333 !important;
    /* For SVGs */
}

/* Ensure Logo Aspect Ratio is Preserved */
.elementor-location-header .elementor-widget-image img,
.the7-e-sticky-effect-yes .elementor-widget-image img {
    height: auto !important;
    width: auto !important;
    max-height: 80px !important;
    object-fit: contain !important;
    transition: all 0.5s ease-in-out !important;
}

/* Fix for specific The7/Elementor svg icons if needed */
.scrolled-nav .e-font-icon-svg {
    fill: #333333 !important;
}

/* Footer Logo Size Increase */
footer#footer .elementor-widget-image img {
    width: 250px !important;
    max-width: 100% !important;
    height: auto !important;
}

footer#footer .elementor-widget-image {
    padding: 10px 0;
}

/* =========================================
   Responsive Styles
   ========================================= */

/* Global Fixes */
img {
    max-width: 100%;
    height: auto;
}

body {
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

/* Tablet and Mobile (max-width: 1024px) */
@media (max-width: 1024px) {

    /* =========================================
       Navbar Layout Fixes (Tablet/Mobile)
       ========================================= */

    /* Force Logo and Menu to be on the same row */
    .elementor-location-header .elementor-container {
        flex-wrap: nowrap !important;
    }

    /* -----------------------------------------
       Tablet Layout (769px - 1024px)
       Logo: 25% | Right: 75% (Status: Fixed IDs)
       ----------------------------------------- */
    @media (min-width: 769px) {

        /* Logo Column - Target Specific ID */
        .elementor-location-header .elementor-element-7f74ca0a {
            width: 25% !important;
        }

        /* Menu Column (Right Side) - Target Specific ID */
        .elementor-location-header .elementor-element-538e7af9 {
            width: 75% !important;
            display: flex !important;
            flex-direction: row !important;
            /* Changed from column to row */
            align-items: center !important;
            /* Align center vertically */
            justify-content: flex-end !important;
            /* Align to right */
        }

        /* Extra Info Wrapper (Phone + Socials) */
        .header-extra-info {
            display: flex !important;
            flex-direction: row;
            /* Row for side-by-side within itself if needed, or keep column if user wants stacked phone/socials but next to hamburger */
            align-items: center;
            margin-bottom: 0px;
            /* Remove bottom margin */
            margin-right: 20px;
            /* Add right margin for separation */
            width: auto;
            /* Auto width to fit content */
        }

        /* Phone Widget Styling - Sidebar layout inside row */
        .header-extra-info .elementor-widget-heading .elementor-heading-title {
            font-size: 13px !important;
            color: #fff !important;
            white-space: nowrap;
            text-align: right;
            margin-bottom: 0px !important;
            /* Remove bottom margin */
            margin-right: 15px !important;
            /* Add spacing between phone and socials */
        }

        .scrolled-nav .header-extra-info .elementor-widget-heading .elementor-heading-title {
            color: #333 !important;
        }

        /* Socials Wrapper */
        .header-socials-wrap {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .header-socials-wrap .elementor-widget-the7_icon_widget {
            margin-bottom: 0 !important;
        }

        .header-socials-wrap .elementor-icon {
            font-size: 14px;
            color: #fff;
        }

        .scrolled-nav .header-socials-wrap .elementor-icon {
            color: #333;
        }

        /* Hamburger Position - Push firmly to right */
        /* Target the specific widget to ensure it takes full width */
        .elementor-location-header .elementor-element-253d8b08 {
            width: auto !important;
            /* Let it take natural width */
        }

        .horizontal-menu-toggle {
            margin-top: 5px;
            width: 100% !important;
            /* Full width track */
            justify-content: flex-end !important;
            /* Align item to end */
            display: flex !important;
        }
    }


    /* -----------------------------------------
       Mobile Layout (< 769px)
       Logo: 50% | Right: 50% (Hamburger Only)
       ----------------------------------------- */
    @media (max-width: 768px) {

        /* Logo Column */
        .elementor-location-header .elementor-column:first-child,
        .elementor-location-header .elementor-col-50:first-child {
            width: 50% !important;
        }

        /* Menu Column (Right Side) */
        .elementor-location-header .elementor-column:last-child,
        .elementor-location-header .elementor-col-50:last-child {
            width: 50% !important;
            display: flex !important;
            justify-content: flex-end !important;
            align-items: center !important;
        }

        /* HIDE Info on Mobile */
        .header-extra-info {
            display: none !important;
        }

        /* Reset Logo Size */
        .elementor-location-header .elementor-widget-image img {
            max-height: 50px !important;
        }
    }

    /* Increase Logo Size on Tablet Only */
    @media (min-width: 769px) and (max-width: 1024px) {
        .elementor-location-header .elementor-widget-image img {
            max-height: 70px !important;
            width: auto !important;
        }
    }

    /* Remove extra margins that might cause stacking */
    .elementor-location-header .elementor-widget-wrap {
        padding: 0 !important;
    }

    /* =========================================
       Mobile/Tablet Menu Styles - Refined
       (Moved from 768px to 1024px for Tablet Support)
       ========================================= */

    /* 1. Toggle Button & Close Icon */
    .horizontal-menu-toggle {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        cursor: pointer;
        z-index: 99999 !important;
        /* Super High Z-Index */
        position: relative;
        padding: 5px;
        align-items: center;
        justify-content: flex-end;
    }

    .horizontal-menu-toggle svg {
        transition: opacity 0.3s ease;
        width: 35px;
        height: 35px;
        fill: #fff;
    }

    /* Scrolled state toggle color */
    .scrolled-nav .horizontal-menu-toggle svg,
    .scrolled-nav .horizontal-menu-toggle svg path {
        fill: #000000 !important;
        stroke: #000000 !important;
        /* In case it's stroke-based */
        color: #000000 !important;
    }

    /* Transform to X when toggled */
    .horizontal-menu-toggle.toggled svg {
        display: none;
        /* Hide hamburger */
    }

    /* Ensure the toggle button itself stays on top */
    .horizontal-menu-toggle.toggled {
        position: fixed;
        top: 25px;
        right: 25px;
        z-index: 100010 !important;
        /* Higher than menu overlay (100004) */
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
    }

    .horizontal-menu-toggle.toggled::after {
        content: '✕';
        /* Close icon */
        font-family: sans-serif;
        /* Ensure standard font for X */
        font-size: 32px;
        color: #333 !important;
        /* Always dark on white menu */
        line-height: 1;
        display: block;
        height: 32px;
        width: 32px;
        text-align: center;
        /* No need for fixed here if parent is fixed, but let's be safe */
    }

    /* 2. Full Screen Menu Overlay - Image 3 Style */
    .dt-nav-menu-horizontal--main {
        display: none;
        position: fixed;
        /* Fixed to cover screen */
        top: 0;
        /* Cover full screen */
        left: 0;
        width: 100%;
        height: 100vh;
        /* Full height */
        background-color: #fff;
        padding-top: 100px;
        /* Space for top elements (header) */
        z-index: 9998 !important;
        /* Just below header (9999) */
        overflow-y: auto;
    }

    /* 3. Show Menu When Open */
    .horizontal-menu-wrap.mobile-menu-open .dt-nav-menu-horizontal--main {
        display: block !important;
        animation: fadeIn 0.3s ease forwards;
    }

    /* 4. List Items Styling */
    .dt-nav-menu-horizontal {
        flex-direction: column !important;
        align-items: center !important;
        /* Center items */
        padding: 0 40px;
        display: flex !important;
        /* Force display flex */
    }

    .dt-nav-menu-horizontal>li {
        width: 100%;
        margin: 0 !important;
        border-bottom: 1px solid #f0f0f0;
        padding: 15px 0;
        text-align: left;
    }

    .dt-nav-menu-horizontal>li>a {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        color: #333 !important;
        font-size: 18px !important;
        /* Larger text */
        font-weight: 600 !important;
        text-decoration: none !important;
    }

    /* Green text for active/hover */
    .dt-nav-menu-horizontal>li>a:hover,
    .dt-nav-menu-horizontal>li.current-menu-item>a {
        color: #27a844 !important;
        /* Green */
    }

    /* Submenu Indicators - Rotate */
    .submenu-indicator {
        float: none;
        margin-left: 10px;
        transform: rotate(-90deg);
        /* Point right */
    }

    /* Animation */
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
}

/* Mobile Specific (max-width: 768px) */
@media (max-width: 768px) {

    /* Header Adjustments */
    .elementor-location-header {
        position: fixed !important;
        /* Keep fixed */
    }

    /* Ensure footer aligns center */
    footer#footer .elementor-column {
        text-align: center !important;
    }
}

/* Ensure visible on Desktop */
@media (min-width: 1025px) {
    .horizontal-menu-toggle {
        display: none !important;
    }

    .header-extra-info {
        display: flex !important;
        /* Show custom moved elements */
        align-items: center;
        margin-right: 30px;
    }

    .header-socials-wrap {
        display: flex;
        gap: 15px;
    }

    .header-socials-wrap .elementor-widget-the7_icon_widget {
        margin-bottom: 0;
    }

    /* Colors for Desktop - Ensure visibility */
    .header-extra-info .elementor-heading-title {
        color: #fff !important;
        /* Initial transparent header */
        font-size: 14px;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .header-socials-wrap .elementor-icon {
        color: #fff !important;
        font-size: 16px;
    }

    /* Scrolled State Colors */
    .scrolled-nav .header-extra-info .elementor-heading-title,
    .scrolled-nav .header-socials-wrap .elementor-icon {
        color: #333 !important;
    }


    /* Define Desktop Header Layout */
    /* Target Logo Column */
    .elementor-location-header .elementor-element-7f74ca0a {
        width: 20% !important;
    }

    /* Target Menu Column */
    .elementor-location-header .elementor-element-538e7af9 {
        width: 80% !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    /* Ensure the widget wrap inside the column is also flex/aligned */
    .elementor-location-header .elementor-element-538e7af9 .elementor-widget-wrap {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        width: 100%;
    }
}

/* =========================================
   Logo Size Overrides
   ========================================= */

/* Desktop & Tablet Logo (Normal & Sticky) */
.elementor-element-483bb4a9 img,
.elementor-element-7b1fd09 img {
    width: 200px !important;
    max-width: none !important;
    height: auto !important;
}

/* Mobile Logo */
.elementor-element-2b6fe46 img {
    width: 150px !important;
    max-width: none !important;
    height: auto !important;
}

/* Ensure containers don't restrict size */
.elementor-element-483bb4a9,
.elementor-element-7b1fd09,
.elementor-element-2b6fe46,
.elementor-element-2b6fe46 .elementor-widget-container,
.elementor-element-483bb4a9 .elementor-widget-container,
.elementor-element-7b1fd09 .elementor-widget-container {
    max-width: none !important;
    width: auto !important;
}