/* Heritage Marketing - Mobile Responsive Fixes */

/* Override carousel image height on mobile for better display */
@media (max-width: 767px) {
    .hero-post-slider-two .hero-image img {
        height: auto !important;
        max-height: 250px !important;
        width: 100% !important;
        object-fit: contain !important;
        border-radius: 8px;
    }

    /* Ensure image is visible and centered with reduced spacing */
    .hero-post-slider-two .hero-image {
        display: flex !important;
        align-items: center;
        justify-content: center;
        order: -1;
        margin-bottom: 15px !important;
        min-height: auto !important;
        padding: 0 !important;
    }

    /* Make sure content wrapper is flex column with reduced gap */
    .hero-post-slider-two .hero-content-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Reduce carousel wrapper padding */
    .hero-post-slider-two .hero-wrapper-two {
        padding: 30px 0 !important;
        min-height: auto !important;
    }

    /* Reduce content spacing */
    .hero-post-slider-two .hero-content {
        padding: 0 !important;
    }

    /* Tighten up text spacing */
    .hero-post-slider-two .hero-content .tag-line {
        margin-bottom: 10px !important;
    }

    .hero-post-slider-two .hero-content h1 {
        margin-bottom: 15px !important;
        font-size: 24px !important;
    }

    /* Hide description text on mobile */
    .hero-post-slider-two .hero-content p {
        display: none !important;
    }

    /* Reduce button margin */
    .hero-post-slider-two .hero-content .theme-btn {
        margin-top: 5px !important;
    }
}

/* Hide Contact Title on Mobile */
@media (max-width: 767px) {

    /* Hide only the Contact widget title in footer on mobile */
    .footer-widget.about-company-widget .widget-title {
        display: none !important;
    }

    /* Remove any decorative elements from contact widget */
    .footer-widget.about-company-widget::before,
    .footer-widget.about-company-widget::after {
        display: none !important;
    }

    /* Ensure contact info is properly centered */
    .footer-widget.about-company-widget {
        text-align: center !important;
    }

    .footer-widget.about-company-widget .widget-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* Additional Mobile Spacing Optimizations */
@media (max-width: 767px) {

    /* Reduce section padding on mobile */
    .intro-section {
        padding: 40px 0 !important;
    }

    .what-we-offer-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .why-choose-us-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .philosophy-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .brand-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    /* Reduce margins on mobile */
    .offer-card {
        margin-bottom: 20px !important;
    }

    .strength-item {
        margin-bottom: 20px !important;
    }

    /* Tighten footer spacing */
    .footer-widget-area {
        padding-bottom: 40px !important;
    }

    .footer-widget {
        margin-bottom: 20px !important;
    }

    /* Reduce copyright area padding */
    .copyright-area {
        padding: 20px 0 !important;
    }
}

/* Fix Carousel Dots Overlap on Mobile */
@media (max-width: 767px) {

    /* Add bottom padding to carousel wrapper to make room for dots */
    .hero-post-slider-two .hero-wrapper-two {
        padding-bottom: 60px !important;
    }

    /* Position dots lower and ensure they don't overlap content */
    .hero-section .slick-dots {
        bottom: 10px !important;
        position: absolute;
        z-index: 100;
    }

    /* Add margin to button to prevent overlap */
    .hero-post-slider-two .hero-content .theme-btn {
        margin-bottom: 10px !important;
    }

    /* Ensure button has proper spacing from dots */
    .hero-post-slider-two .hero-content {
        padding-bottom: 10px !important;
    }
}

/* Fix Sticky Navbar Padding on Mobile */
@media (max-width: 991px) {

    /* Add proper padding to sticky navbar on mobile/tablet */
    .header-navigation.sticky {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* Ensure logo has breathing room */
    .header-navigation.sticky .brand-logo {
        padding: 8px 0 !important;
    }

    /* Add padding to nav items */
    .header-navigation.sticky .nav-right-item {
        padding: 5px 0 !important;
    }
}

@media (max-width: 767px) {

    /* Extra padding for very small screens */
    .header-navigation.sticky {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    /* Ensure buttons have proper spacing */
    .header-navigation.sticky .theme-btn {
        padding: 10px 15px !important;
    }
}

/* Set Default Logo Size for Desktop (Non-Sticky) - Desktop Only */
@media (min-width: 992px) {
    .header-navigation .brand-logo img {
        width: 280px !important;
        transition: width 0.3s ease;
    }

    /* Sticky logo remains at 170px */
    .header-navigation.sticky .brand-logo img {
        width: 170px !important;
    }
}

/* Fix WhatsApp Button Spacing on Desktop */
.nav-right-item.style-one {
    display: flex;
    align-items: center;
    gap: 10px !important;
}

/* Remove any extra margins from WhatsApp button */
.nav-right-item .whatsapp-btn-green,
.nav-right-item .desktop-whatsapp-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure consistent spacing between buttons */
.nav-right-item .theme-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Fix WhatsApp Button Icon Margin */
.nav-right-item .whatsapp-btn-green i,
.nav-right-item .desktop-whatsapp-btn i {
    margin-left: 0 !important;
    margin-right: 0px !important;
}

/* Ensure Get Quote button doesn't have icon margin issues */
.nav-right-item .theme-btn.style-one i {
    margin-left: 0 !important;
}
/* Center Core Values on Mobile */
@media (max-width: 767px) {
    .values-section .row {
        justify-content: center !important;
    }
    
    .values-section .value-item {
        text-align: center !important;
    }
    
    .values-section .value-icon-box {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}