/* Mobile Responsive CSS for Atop Kitchenware */
/* This file ensures mobile responsiveness with logo always visible */

/* ===== DESKTOP VIEW - HIDE MOBILE MENU BUTTON ===== */
/* Hide mobile menu toggle on desktop */
.mobile-menu-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ===== MOBILE NAVBAR - BOTTOM NAVIGATION DESIGN ===== */

/* Mobile breakpoint - Bottom navigation bar */
@media (max-width: 1024px) {
    /* Blog banner visibility fix */
    .blog-banner {
        position: relative !important;
        z-index: 999 !important;
        margin-top: 60px !important;
        width: 100% !important;
        background: #23272f !important;
        color: #fff !important;
        padding: 18px 0 !important;
        text-align: center !important;
        font-size: 1.15rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Blog hero section fix */
    .blog-hero {
        margin-top: 0 !important;
        width: 100% !important;
        height: 260px !important;
        background: #f8f8f8 !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .blog-hero img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        filter: brightness(0.92) !important;
    }
    
    .blog-hero-title {
        position: absolute !important;
        bottom: 24px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: rgba(255,255,255,0.92) !important;
        padding: 16px 32px !important;
        border-radius: 8px !important;
        font-size: 2.1rem !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 800 !important;
        color: #181818 !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
        text-align: center !important;
        max-width: 90vw !important;
    }
    
    /* Blog grid tablet fixes */
    .blog-main-container {
        flex-direction: column !important;
        gap: 30px !important;
        padding: 0 20px 40px 20px !important;
    }
    
    .eui-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
    
    .eui-card {
        max-width: 100% !important;
    }
    
    .blog-sidebar {
        order: -1 !important;
        margin-bottom: 30px !important;
    }
    /* Header container - Top bar with logo only */
    header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background-color: #000000 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
        height: 60px !important;
    }
    
    /* Navigation container - Logo centered */
    nav {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        width: 100% !important;
        height: 60px !important;
        padding: 0 20px !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
    }
    
    /* Bottom Navigation Bar */
    .bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
        z-index: 1001 !important;
        padding: 8px 0 !important;
        border-top: 1px solid #e5e5e5 !important;
    }
    
    .bottom-nav-container {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
    }
    
    .bottom-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        color: #666666 !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        padding: 4px 8px !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
        min-width: 60px !important;
    }
    
    .bottom-nav-item.active {
        color: #FFD700 !important;
        background: rgba(255, 215, 0, 0.1) !important;
    }
    
    .bottom-nav-item:hover {
        color: #FFD700 !important;
        background: rgba(255, 215, 0, 0.1) !important;
    }
    
    .bottom-nav-icon {
        font-size: 20px !important;
        margin-bottom: 2px !important;
        display: block !important;
    }
    
    .bottom-nav-text {
        font-size: 10px !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
    
    /* LOGO - ALWAYS VISIBLE AND CENTERED */
    .logo,
    nav .logo,
    header .logo,
    .nav-left .logo {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1000 !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        margin: 0 !important;
        align-items: center !important;
        gap: 0 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        color: #ffffff !important;
        text-align: center !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Logo text colors */
    .logo .logo-gold {
        color: #FFD700 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .logo .logo-white {
        color: #ffffff !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure logo spans are visible */
    .logo span {
        visibility: visible !important;
        opacity: 1 !important;
        display: inline !important;
    }
    
    /* Mobile menu toggle - SHOW ON MOBILE */
    .mobile-menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1001 !important;
        background: none !important;
        border: none !important;
        color: #ffffff !important;
        font-size: 24px !important;
        cursor: pointer !important;
        padding: 8px !important;
    }
    
    /* Add bottom padding to main content */
    main {
        padding-bottom: 80px !important;
    }
    
    body {
        padding-bottom: 80px !important;
    }
    
    /* HIDE ALL OTHER NAVBAR ELEMENTS */
    .nav-left,
    .nav-right,
    .search-container,
    .navbar-icons,
    .nav-icon-btn,
    .nav-left ul.desktop-menu,
    .nav-left ul,
    nav > *:not(.logo):not(.mobile-menu-toggle) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
    
    /* ENSURE LOGO IS ALWAYS VISIBLE - OVERRIDE ANY HIDING RULES */
    .nav-left .logo {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1000 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Tablet breakpoint */
@media (max-width: 768px) {
    /* Blog banner mobile optimization */
    .blog-banner {
        margin-top: 60px !important;
        padding: 15px 10px !important;
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
    
    /* Blog hero mobile optimization */
    .blog-hero {
        height: 160px !important;
    }
    
    .blog-hero-title {
        font-size: 1.2rem !important;
        padding: 10px 10vw !important;
        bottom: 20px !important;
    }
    
    /* Logo size adjustment */
    .logo,
    nav .logo,
    header .logo,
    .nav-left .logo {
        font-size: 32px !important;
        font-weight: 700 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1000 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        gap: 0 !important;
        margin: 0 !important;
        letter-spacing: 1px !important;
        text-align: center !important;
    }
    
    /* Menu button adjustment */
    .mobile-menu-toggle {
        right: 15px !important;
        font-size: 22px !important;
    }
    
    /* ENSURE LOGO IS ALWAYS VISIBLE - OVERRIDE ANY HIDING RULES */
    .nav-left .logo {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1000 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Mobile breakpoint */
@media (max-width: 480px) {
    /* Blog banner small mobile optimization */
    .blog-banner {
        margin-top: 60px !important;
        padding: 12px 8px !important;
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }
    
    /* Blog hero small mobile optimization */
    .blog-hero {
        height: 90px !important;
    }
    
    .blog-hero-title {
        font-size: 0.98rem !important;
        padding: 7px 2vw !important;
        bottom: 15px !important;
    }
    
    /* Logo size adjustment */
    .logo,
    nav .logo,
    header .logo,
    .nav-left .logo {
        font-size: 30px !important;
        font-weight: 700 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1000 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        gap: 0 !important;
        margin: 0 !important;
        letter-spacing: 1px !important;
        text-align: center !important;
    }
    
    /* Menu button adjustment */
    .mobile-menu-toggle {
        right: 10px !important;
        font-size: 20px !important;
    }
    
    /* ENSURE LOGO IS ALWAYS VISIBLE - OVERRIDE ANY HIDING RULES */
    .nav-left .logo {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1000 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Small mobile breakpoint */
@media (max-width: 360px) {
    /* Logo size adjustment */
    .logo,
    nav .logo,
    header .logo,
    .nav-left .logo {
        font-size: 26px !important;
        font-weight: 700 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1000 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        gap: 0 !important;
        margin: 0 !important;
        letter-spacing: 1px !important;
        text-align: center !important;
    }
    
    /* Menu button adjustment */
    .mobile-menu-toggle {
        right: 8px !important;
        font-size: 18px !important;
    }
    
    /* ENSURE LOGO IS ALWAYS VISIBLE - OVERRIDE ANY HIDING RULES */
    .nav-left .logo {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1000 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ===== MOBILE MENU STYLES ===== */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mobile-menu.active {
    left: 0;
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.mobile-menu ul li {
    margin: 20px 0;
}

.mobile-menu ul li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 24px;
    font-weight: 500;
    transition: color 0.3s ease;
    display: block;
    padding: 10px 20px;
}

.mobile-menu ul li a:hover {
    color: #FFD700;
}

.mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 30px;
    cursor: pointer;
    padding: 10px;
    transition: color 0.3s ease;
}

.mobile-menu-close:hover {
    color: #FFD700;
}

/* ===== MOBILE FOOTER FIXES ===== */
@media (max-width: 768px) {
    .footer-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 15px !important;
        padding: 30px 20px !important;
        text-align: left !important;
    }
    
    /* Make the first section (company info) span full width */
    .footer-container > div:first-child {
        grid-column: 1 / -1 !important;
        margin-bottom: 15px !important;
    }
    
    /* Make the last section (quick links, products, brand registry) span full width */
    .footer-container > div:last-child {
        grid-column: 1 / -1 !important;
        margin-top: 15px !important;
}

.footer-section,
.footer-logo {
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 20px !important;
}

/* Brand Registry section specific styling for mobile - HIGHER SPECIFICITY */
.footer-container .footer-section:nth-child(4) {
        text-align: center !important;
}

.footer-container .footer-section:nth-child(4) h4 {
        text-align: center !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        margin-bottom: 12px !important;
        color: #ffffff !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
}

.footer-container .footer-section:nth-child(4) ul {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
}

.footer-container .footer-section:nth-child(4) ul li {
        text-align: center !important;
        margin-bottom: 6px !important;
        line-height: 1.4 !important;
}

.footer-container .footer-section:nth-child(4) ul li span {
        font-size: 13px !important;
        color: #ffffff !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
        text-align: center !important;
        display: inline-block !important;
}

/* Additional brand registry targeting for better compatibility */
.footer-section h4:first-letter {
        /* This targets any h4 that starts with 'B' (Brand Registry) */
}

/* Target brand registry by content - more specific approach */
.footer-section:has(h4) {
        /* Fallback for browsers that support :has() */
}

/* Ensure brand registry spans are properly styled - HIGHER SPECIFICITY */
.footer-container .footer-section ul li span.footer-link-disabled {
        font-size: 13px !important;
        color: #ffffff !important;
        text-align: center !important;
        display: inline-block !important;
}

.footer-section h4 {
        font-size: 16px !important;
        font-weight: 700 !important;
        margin-bottom: 12px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.footer-section ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-section ul li {
        margin-bottom: 6px !important;
        line-height: 1.4 !important;
    }
    
.footer-section ul li a {
        font-size: 13px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.footer-section ul li a:hover {
    color: #FFD700 !important;
}

    .contact-info p {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
        gap: 8px !important;
}

.contact-info p i {
    color: #FFD700 !important;
    width: 16px !important;
        text-align: center !important;
}

.newsletter-form {
    position: relative !important;
        margin-top: 10px !important;
}

.newsletter-form input[type="email"] {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        border: 1px solid #333 !important;
    border-radius: 4px !important;
        background: #1a1a1a !important;
    color: #ffffff !important;
}

.newsletter-form input[type="email"]::placeholder {
        color: #888 !important;
}

.social-icons {
    display: flex !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        margin-top: 15px !important;
}

.social-icon {
        font-size: 18px !important;
    color: #ffffff !important;
        text-decoration: none !important;
    transition: color 0.2s ease !important;
        padding: 8px !important;
}

.social-icon:hover {
    color: #FFD700 !important;
}

.footer-bottom {
    text-align: center !important;
        padding: 15px 20px !important;
        border-top: 1px solid #333 !important;
    margin-top: 20px !important;
}

.footer-bottom p {
        font-size: 12px !important;
        color: #888 !important;
    margin: 0 !important;
    }
}

@media (max-width: 480px) {
    .footer-container {
        padding: 25px 15px !important;
        gap: 12px !important;
    }
    
    /* Maintain three-column layout on smaller screens */
    .footer-container > div:first-child {
        grid-column: 1 / -1 !important;
        margin-bottom: 10px !important;
    }
    
    .footer-container > div:last-child {
        grid-column: 1 / -1 !important;
        margin-top: 10px !important;
    }
    
    /* Brand Registry section center alignment for smaller mobile - HIGHER SPECIFICITY */
    .footer-container .footer-section:nth-child(4) {
        text-align: center !important;
    }
    
    .footer-container .footer-section:nth-child(4) ul {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .footer-container .footer-section:nth-child(4) ul li {
        text-align: center !important;
    }
    
    .footer-section h4 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
    
    /* Brand Registry section specific styling for smaller mobile - HIGHER SPECIFICITY */
    .footer-container .footer-section:nth-child(4) h4 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }
    
    .footer-section ul li {
        margin-bottom: 5px !important;
    }
    
    .footer-section ul li a {
        font-size: 12px !important;
    }
    
    .footer-container .footer-section:nth-child(4) ul li span {
        font-size: 12px !important;
        text-align: center !important;
    }
    
    /* Ensure brand registry spans are properly styled on smaller screens - HIGHER SPECIFICITY */
    .footer-container .footer-section ul li span.footer-link-disabled {
        font-size: 12px !important;
        color: #ffffff !important;
        text-align: center !important;
        display: inline-block !important;
    }
    
    .contact-info p {
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }
    
    .newsletter-form input[type="email"] {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    
    .social-icons {
        gap: 10px !important;
        margin-top: 12px !important;
    }
    
    .social-icon {
        font-size: 16px !important;
        padding: 6px !important;
    }
    
    .footer-bottom {
        padding: 12px 15px !important;
    }
    
    .footer-bottom p {
        font-size: 11px !important;
    }
}

/* ===== MOBILE CONTENT FIXES ===== */
@media (max-width: 768px) {
    /* Ensure content doesn't overlap with fixed header */
    body {
        padding-top: 60px !important;
    }
    
    /* Product detail page fixes */
    .product-detail {
        flex-direction: column !important;
        padding: 0 15px !important;
        margin-top: 80px !important;
    }
    
    .product-image-container {
        margin-bottom: 20px !important;
    }
    
    .product-title {
        font-size: 1.5rem !important;
    }
    
    /* Blog page fixes */
    .blog-content {
        padding: 20px !important;
    }
    
    .blog-content h1 {
        font-size: 1.8rem !important;
    }
    
    .blog-content p {
        font-size: 14px !important;
    }
    
    /* Blog grid and cards mobile fixes */
    .blog-main-container {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 15px 40px 15px !important;
    }
    
    .eui-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 10px 0 !important;
    }
    
    .eui-card {
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .eui-card img {
        height: 200px !important;
    }
    
    .eui-card-content {
        padding: 15px !important;
    }
    
    .eui-card-title {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }
    
    .eui-card-date {
        font-size: 0.85rem !important;
        margin-bottom: 10px !important;
    }
    
    .eui-card-desc {
        font-size: 0.9rem !important;
        margin: 10px 0 15px 0 !important;
        line-height: 1.5 !important;
    }
    
    .eui-card-link {
        font-size: 0.9rem !important;
        padding: 8px 0 !important;
    }
    
    .blog-sidebar {
        order: -1 !important;
        margin-bottom: 20px !important;
    }
    
    /* Contact page fixes */
    .contact-main-flex {
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    .contact-form {
        width: 100% !important;
    }
    
    .form-row {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .contact-form input,
    .contact-form textarea {
        padding: 12px !important;
        font-size: 14px !important;
    }
    
    .contact-btn {
        width: 100% !important;
        padding: 15px !important;
        font-size: 16px !important;
    }
    }
    
@media (max-width: 480px) {
    .product-title {
        font-size: 1.3rem !important;
    }
    
    .blog-content h1 {
        font-size: 1.5rem !important;
    }
    
    /* Blog grid and cards small mobile fixes */
    .blog-main-heading {
        font-size: 2rem !important;
        margin: 40px 0 20px 0 !important;
    }
    
    .blog-main-container {
        padding: 0 10px 30px 10px !important;
    }
    
    .eui-grid {
        gap: 15px !important;
    }
    
    .eui-card img {
        height: 180px !important;
    }
    
    .eui-card-content {
        padding: 12px !important;
    }
    
    .eui-card-title {
        font-size: 1rem !important;
    }
    
    .eui-card-date {
        font-size: 0.8rem !important;
    }
    
    .eui-card-desc {
        font-size: 0.85rem !important;
    }
    
    .eui-card-link {
        font-size: 0.85rem !important;
    }
    
    .contact-form input,
    .contact-form textarea {
        padding: 10px !important;
        font-size: 13px !important;
    }
    
    .contact-btn {
        padding: 12px !important;
        font-size: 14px !important;
    }
}

/* ===== MOBILE UTILITY CLASSES ===== */
.mobile-hide {
    display: none !important;
}

.mobile-show {
    display: block !important;
}

/* ===== MOBILE PERFORMANCE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    /* Reduce animations for better performance */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
    
    /* Disable complex animations on mobile */
    .slide-content,
    .hero-badge,
    .feature-item {
        animation: none !important;
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== HERO SLIDER MOBILE FIXES ===== */
@media (max-width: 768px) {
    /* Hero slider mobile optimization */
    .hero-section {
        height: 300px !important;
    }
    
    .hero-section .slide-content h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }
    
    .hero-section .slide-content p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
    }
    
    .hero-section .hero-features {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .hero-section .feature-item {
        font-size: 0.8rem !important;
        padding: 4px 8px !important;
    }
    
    .hero-section .hero-badge {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
    }
    
    .slider-nav {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    .hero-section {
        height: 250px !important;
    }
    
    .hero-section .slide-content h2 {
        font-size: 1.6rem !important;
    }
    
    .hero-section .slide-content p {
        font-size: 0.8rem !important;
    }
    
    .hero-section .feature-item {
        font-size: 0.75rem !important;
    }
    
    .slider-nav {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.8rem !important;
    }
}

/* ===== COMPANY INTRODUCTION MOBILE FIXES ===== */
@media (max-width: 768px) {
    .company-intro h2 {
        font-size: 2.2rem !important;
        margin-bottom: 15px !important;
    }
    
    .company-intro p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 480px) {
    .company-intro h2 {
        font-size: 1.8rem !important;
    }
    
    .company-intro p {
        font-size: 0.9rem !important;
    }
}

/* ===== TWO-COLUMN SECTION MOBILE FIXES ===== */
@media (max-width: 768px) {
    .two-column-section {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }
    
    .mission-column, .company-story-column {
        padding: 20px !important;
        min-height: auto !important;
    }
    
    .mission-column h2, .company-story-column h2 {
        font-size: 1.8rem !important;
        margin-bottom: 15px !important;
    }
    
    .mission-column p, .company-story-column p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }
    
    .mission-column button, .company-story-column button {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    .two-column-section {
        padding: 0 10px !important;
    }
    
    .mission-column, .company-story-column {
        padding: 15px !important;
    }
    
    .mission-column h2, .company-story-column h2 {
        font-size: 1.5rem !important;
    }
    
    .mission-column p, .company-story-column p {
        font-size: 0.85rem !important;
    }
}

/* ===== TESTIMONIAL SECTION MOBILE FIXES ===== */
@media (max-width: 768px) {
    .testimonial-row-section h2 {
        font-size: 2rem !important;
        margin-bottom: 25px !important;
    }
    
    .testimonial-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .testimonial-mini-card {
        min-height: 140px !important;
        padding: 15px !important;
    }
    
    .testimonial-quote {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    
    .testimonial-name {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .testimonial-row-section h2 {
        font-size: 1.6rem !important;
    }
    
    .testimonial-mini-card {
        min-height: 120px !important;
        padding: 12px !important;
    }
    
    .testimonial-quote {
        font-size: 0.8rem !important;
    }
}

/* ===== VISION & GOALS SECTION MOBILE FIXES ===== */
@media (max-width: 768px) {
    .vision-goals-section h2 {
        font-size: 2rem !important;
        margin-bottom: 20px !important;
    }
    
    .vision-goals-section p {
        font-size: 1rem !important;
        margin-bottom: 25px !important;
    }
    
    .vision-goals-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .vision-card, .goals-card, .values-card {
        padding: 20px !important;
        min-height: auto !important;
    }
    
    .vision-card h3, .goals-card h3, .values-card h3 {
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
    }
    
    .vision-card p, .goals-card ul, .values-card ul {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 480px) {
    .vision-goals-section h2 {
        font-size: 1.6rem !important;
    }
    
    .vision-goals-section p {
        font-size: 0.9rem !important;
    }
    
    .vision-card, .goals-card, .values-card {
        padding: 15px !important;
    }
    
    .vision-card h3, .goals-card h3, .values-card h3 {
        font-size: 1.2rem !important;
    }
    
    .vision-card p, .goals-card ul, .values-card ul {
        font-size: 0.85rem !important;
    }
}

/* ===== FEATURED PRODUCTS MOBILE FIXES ===== */
@media (max-width: 768px) {
    .featured-products h2 {
        font-size: 2rem !important;
        margin-bottom: 20px !important;
    }
    
    .featured-products p {
        font-size: 1rem !important;
        margin-bottom: 25px !important;
    }
    
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    .product-card {
        padding: 0 0 15px 0 !important;
    }
    
    .product-card img {
        height: 180px !important;
    }
    
    .product-card h3 {
        font-size: 0.9rem !important;
        margin: 10px 0 8px 0 !important;
        padding: 0 10px !important;
    }
    
    .product-card p {
        font-size: 0.8rem !important;
        margin-bottom: 10px !important;
        padding: 0 10px !important;
        line-height: 1.4 !important;
    }
    
    .product-card .enquiry-btn {
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
        margin: 0 10px !important;
    }
}

@media (max-width: 480px) {
    .featured-products h2 {
        font-size: 1.6rem !important;
    }
    
    .featured-products p {
        font-size: 0.9rem !important;
    }
    
    .product-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .product-card img {
        height: 200px !important;
    }
    
    .product-card h3 {
        font-size: 1rem !important;
    }
    
    .product-card p {
        font-size: 0.85rem !important;
    }
    
    .product-card .enquiry-btn {
        font-size: 0.9rem !important;
        padding: 10px 15px !important;
    }
}

/* ===== BLOG POSTS GRID MOBILE FIXES ===== */
@media (max-width: 768px) {
    .latest-post-section h2 {
        font-size: 2rem !important;
        margin-bottom: 15px !important;
    }
    
    .latest-post-section .blog-desc {
        font-size: 1rem !important;
        margin-bottom: 25px !important;
    }
    
    .blog-posts-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .blog-post-card img {
        height: 200px !important;
    }
    
    .blog-content {
        padding: 20px 15px 15px 15px !important;
    }
    
    .blog-content h3 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
    }
    
    .blog-content p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 480px) {
    .latest-post-section h2 {
        font-size: 1.6rem !important;
    }
    
    .latest-post-section .blog-desc {
        font-size: 0.9rem !important;
    }
    
    .blog-post-card img {
        height: 180px !important;
    }
    
    .blog-content {
        padding: 15px 12px 12px 12px !important;
    }
    
    .blog-content h3 {
        font-size: 1rem !important;
    }
    
    .blog-content p {
        font-size: 0.85rem !important;
    }
}

/* ===== CONTACT SECTION MOBILE FIXES ===== */
@media (max-width: 768px) {
    .contact-section-home h2 {
        font-size: 2rem !important;
        margin-bottom: 15px !important;
    }
    
    .contact-section-home p {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
    }
    
    .contact-section-home > div:last-child {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 20px 15px !important;
    }
    
    .contact-section-home > div:last-child > div:first-child {
        flex: 1 1 100% !important;
    }
    
    .contact-section-home > div:last-child > div:last-child {
        flex: 1 1 100% !important;
        margin-top: 0 !important;
    }
    
    .contact-section-home h2 {
        font-size: 1.8rem !important;
        margin-bottom: 15px !important;
    }
    
    .contact-section-home div[style*="margin-bottom: 0.7rem"] {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    .contact-section-home form {
        gap: 15px !important;
    }
    
    .contact-section-home form > div:first-child,
    .contact-section-home form > div:nth-child(2) {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .contact-section-home input,
    .contact-section-home select,
    .contact-section-home textarea {
        padding: 12px 15px !important;
        font-size: 0.9rem !important;
    }
    
    .contact-section-home .contact-btn {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    .contact-section-home h2 {
        font-size: 1.6rem !important;
    }
    
    .contact-section-home p {
        font-size: 0.9rem !important;
    }
    
    .contact-section-home > div:last-child {
        padding: 15px 10px !important;
    }
    
    .contact-section-home h2 {
        font-size: 1.5rem !important;
    }
    
    .contact-section-home div[style*="margin-bottom: 0.7rem"] {
        font-size: 0.85rem !important;
    }
    
    .contact-section-home input,
    .contact-section-home select,
    .contact-section-home textarea {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
    }
    
    .contact-section-home .contact-btn {
        padding: 10px 15px !important;
        font-size: 0.85rem !important;
    }
}

/* ===== PRODUCTS PAGE MOBILE FIXES ===== */
@media (max-width: 768px) {
    .products-section h1 {
        font-size: 2rem !important;
        margin-bottom: 25px !important;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }
    
    .product-card {
        padding: 15px !important;
    }
    
    .product-card img {
        height: 160px !important;
    }
    
    .product-card h3 {
        font-size: 1rem !important;
        margin: 10px 0 8px 0 !important;
    }
    
    .product-card p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }
    
    .product-card .enquiry-btn {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
    }
}

@media (max-width: 480px) {
    .products-section h1 {
        font-size: 1.6rem !important;
    }
    
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        padding: 0 10px !important;
    }
    
    .product-card {
        padding: 12px !important;
    }
    
    .product-card img {
        height: 180px !important;
    }
    
    .product-card h3 {
        font-size: 1.1rem !important;
    }
    
    .product-card p {
        font-size: 0.9rem !important;
    }
    
    .product-card .enquiry-btn {
        font-size: 0.9rem !important;
        padding: 10px 15px !important;
    }
}

/* ===== ABOUT PAGE MOBILE FIXES ===== */
@media (max-width: 768px) {
    main > section {
        padding: 30px 0 !important;
    }
    
    main h2 {
        font-size: 1.8rem !important;
        margin-bottom: 20px !important;
    }
    
    main h3 {
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
    }
    
    main p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    main > section > div > div:last-child {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 0 15px !important;
    }
    
    main > section:nth-child(2) > div > div:last-child > div:first-child {
        height: auto !important;
        min-height: 250px !important;
    }
    
    main > section:nth-child(2) > div > div:last-child > div:last-child > div:first-child {
        width: 100% !important;
        height: 180px !important;
    }
}

@media (max-width: 480px) {
    main > section {
        padding: 20px 0 !important;
    }
    
    main h2 {
        font-size: 1.5rem !important;
    }
    
    main h3 {
        font-size: 1.2rem !important;
    }
    
    main p {
        font-size: 0.85rem !important;
    }
    
    main > section > div > div:last-child {
        padding: 0 10px !important;
    }
    
    main > section:nth-child(2) > div > div:last-child > div:last-child > div:first-child {
        height: 150px !important;
    }
}

/* ===== CONTACT PAGE MOBILE FIXES ===== */
@media (max-width: 768px) {
    .contact-hero h1 {
        font-size: 2rem !important;
        margin-bottom: 15px !important;
    }
    
    .contact-hero p {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
    }
    
    .contact-modern-container,
    .contact-container.contact-two-partition {
        flex-direction: column !important;
        gap: 30px !important;
        padding: 20px 15px !important;
    }
    
    .contact-modern-left,
    .contact-left {
        flex: 1 1 100% !important;
    }
    
    .contact-modern-form,
    .contact-form-section {
        flex: 1 1 100% !important;
    }
    
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        padding: 12px 15px !important;
        font-size: 0.9rem !important;
    }
    
    .contact-form .submit-btn {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
    }
    
    .contact-map {
        height: 250px !important;
    }
    
    .stats-bar {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

@media (max-width: 480px) {
    .contact-hero h1 {
        font-size: 1.6rem !important;
    }
    
    .contact-hero p {
        font-size: 0.9rem !important;
    }
    
    .contact-modern-container,
    .contact-container.contact-two-partition {
        padding: 15px 10px !important;
    }
    
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
    }
    
    .contact-form .submit-btn {
        padding: 10px 15px !important;
        font-size: 0.85rem !important;
    }
    
    .contact-map {
        height: 200px !important;
    }
    
    .stats-bar {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* ===== ENQUIRY PAGE MOBILE FIXES ===== */
@media (max-width: 768px) {
    .enquiry-container {
        width: 95% !important;
        max-width: 100% !important;
        margin: 20px auto !important;
    }
    
    .enquiry-header h1 {
        font-size: 0.9rem !important;
    }
    
    .enquiry-header .subtitle {
        font-size: 0.6rem !important;
    }
    
    .form-content {
        padding: 0.8rem !important;
    }
    
    .form-section h3 {
        font-size: 0.75rem !important;
    }
    
    .form-group label {
        font-size: 0.6rem !important;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.65rem !important;
    }
    
    .submit-btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.7rem !important;
    }
    
    .message {
        font-size: 0.6rem !important;
        padding: 0.25rem !important;
    }
}

@media (max-width: 480px) {
    .enquiry-container {
        width: 98% !important;
        margin: 15px auto !important;
    }
    
    .enquiry-header h1 {
        font-size: 0.8rem !important;
    }
    
    .enquiry-header .subtitle {
        font-size: 0.55rem !important;
    }
    
    .form-content {
        padding: 0.6rem !important;
    }
    
    .form-section h3 {
        font-size: 0.7rem !important;
    }
    
    .form-group label {
        font-size: 0.55rem !important;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.25rem 0.4rem !important;
        font-size: 0.6rem !important;
    }
    
    .submit-btn {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.65rem !important;
    }
    
    .message {
        font-size: 0.55rem !important;
        padding: 0.2rem !important;
    }
}

/* ===== MOBILE TOUCH OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    /* Ensure touch targets are large enough */
button, 
.nav-icon-btn,
.enquiry-btn,
.contact-btn,
.cta-button {
    min-height: 44px;
    min-width: 44px;
}

/* Improve touch targets for links */
a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    /* Ensure images are responsive */
    img, video {
        max-width: 100%;
        height: auto;
    }
    
    /* Make tables scrollable on mobile */
    table {
        width: 100%;
        display: block;
        overflow-x: auto;
    }
}

/* ===== FINAL LOGO OVERRIDE - ULTIMATE VISIBILITY ===== */
@media (max-width: 1024px) {
    /* Force logo visibility with maximum specificity */
    header nav .nav-left .logo,
    nav .nav-left .logo,
    .nav-left .logo,
    header .logo,
    nav .logo,
    .logo {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 9999 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        white-space: nowrap !important;
        overflow: visible !important;
        color: #ffffff !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Force logo text visibility */
    header nav .nav-left .logo span,
    nav .nav-left .logo span,
    .nav-left .logo span,
    header .logo span,
    nav .logo span,
    .logo span {
        visibility: visible !important;
        opacity: 1 !important;
        display: inline !important;
        color: inherit !important;
    }
    
    header nav .nav-left .logo .logo-gold,
    nav .nav-left .logo .logo-gold,
    .nav-left .logo .logo-gold,
    header .logo .logo-gold,
    nav .logo .logo-gold,
    .logo .logo-gold {
        color: #FFD700 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    header nav .nav-left .logo .logo-white,
    nav .nav-left .logo .logo-white,
    .nav-left .logo .logo-white,
    header .logo .logo-white,
    nav .logo .logo-white,
    .logo .logo-white {
        color: #ffffff !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Override any inline styles that might be hiding the logo */
    header nav .nav-left .logo[style],
    nav .nav-left .logo[style],
    .nav-left .logo[style],
    header .logo[style],
    nav .logo[style],
    .logo[style] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 9999 !important;
        width: auto !important;
        height: auto !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        white-space: nowrap !important;
        overflow: visible !important;
        color: #ffffff !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
} 

/* ===== CONTACT FORM MOBILE FIXES ===== */
@media (max-width: 768px) {
    /* Contact form container fixes */
    .contact-section-home > div:last-child,
    .contact-main-flex {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 20px 15px !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    /* Contact form wrapper fixes */
    .contact-section-home > div:last-child > div:last-child,
    .contact-main-flex > div:last-child {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        padding: 1.5rem 1rem !important;
        min-height: auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }
    
    /* Contact form specific fixes */
    #contactPageForm {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        min-height: auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }
    
    /* Form row fixes - stack inputs vertically on mobile */
    #contactPageForm > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        min-height: auto !important;
    }
    
    /* Individual form inputs */
    #contactPageForm input,
    #contactPageForm select,
    #contactPageForm textarea {
        width: 100% !important;
        flex: none !important;
        padding: 12px 15px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        border: 2px solid #e9ecef !important;
        border-radius: 6px !important;
        font-family: 'Poppins', sans-serif !important;
        background: #fff !important;
        color: #333 !important;
        box-sizing: border-box !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* Textarea specific fixes */
    #contactPageForm textarea {
        min-height: 120px !important;
        max-height: 200px !important;
        resize: vertical !important;
        width: 100% !important;
        overflow-y: auto !important;
    }
    
    /* Submit button fixes */
    #contactPageForm .contact-btn,
    .contact-btn {
        width: 100% !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
        color: #181818 !important;
        border: none !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        font-family: 'Poppins', sans-serif !important;
        box-shadow: 0 4px 15px rgba(255,215,0,0.3) !important;
        min-height: auto !important;
    }
    
    /* Success/Error message fixes */
    #contactPageForm .message,
    #successMessage,
    #errorMessage,
    #contactPageSuccess {
        width: 100% !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
        margin-top: 10px !important;
        text-align: center !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    /* Contact section text fixes */
    .contact-section-home h2,
    .contact-section-home p,
    .contact-section-home div[style*="margin-bottom: 0.7rem"] {
        font-size: 1.8rem !important;
        margin-bottom: 15px !important;
        text-align: center !important;
        padding: 0 10px !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    .contact-section-home p {
        font-size: 1rem !important;
        margin-bottom: 25px !important;
    }
    
    .contact-section-home div[style*="margin-bottom: 0.7rem"] {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    /* Ensure contact section is fully visible */
    .contact-section-home {
        padding: 60px 0 !important;
        min-height: auto !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Fix any potential overflow issues */
    .contact-section-home * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Override any inline styles that might cause visibility issues */
    .contact-section-home > div:last-child > div:last-child[style*="justify-content: center"] {
        justify-content: flex-start !important;
    }
    
    .contact-section-home > div:last-child > div:last-child[style*="align-items: center"] {
        align-items: stretch !important;
    }
}

@media (max-width: 480px) {
    /* Smaller mobile optimizations */
    .contact-section-home > div:last-child,
    .contact-main-flex {
        padding: 15px 10px !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    .contact-section-home > div:last-child > div:last-child,
    .contact-main-flex > div:last-child {
        padding: 1rem 0.8rem !important;
        min-height: auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    
    #contactPageForm {
        gap: 12px !important;
        min-height: auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    
    #contactPageForm > div[style*="display: flex"] {
        gap: 12px !important;
        min-height: auto !important;
    }
    
    #contactPageForm input,
    #contactPageForm select,
    #contactPageForm textarea {
        padding: 10px 12px !important;
        font-size: 16px !important;
        min-height: auto !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }
    
    #contactPageForm textarea {
        min-height: 100px !important;
        max-height: 180px !important;
        overflow-y: auto !important;
    }
    
    #contactPageForm .contact-btn,
    .contact-btn {
        padding: 12px 15px !important;
        font-size: 14px !important;
        min-height: auto !important;
    }
    
    #contactPageForm .message,
    #successMessage,
    #errorMessage,
    #contactPageSuccess {
        padding: 10px 12px !important;
        font-size: 13px !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    .contact-section-home h2 {
        font-size: 1.5rem !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    .contact-section-home p {
        font-size: 0.9rem !important;
    }
    
    .contact-section-home div[style*="margin-bottom: 0.7rem"] {
        font-size: 0.85rem !important;
    }
    
    /* Ensure contact section is fully visible on small screens */
    .contact-section-home {
        padding: 40px 0 !important;
        min-height: auto !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Fix any potential overflow issues on small screens */
    .contact-section-home * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ===== CONTACT PAGE SPECIFIC FIXES ===== */
@media (max-width: 768px) {
    /* Contact page form container */
    .contact-modern-container,
    .contact-container.contact-two-partition {
        flex-direction: column !important;
        gap: 30px !important;
        padding: 20px 15px !important;
    }
    
    .contact-modern-left,
    .contact-left {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    
    .contact-modern-form,
    .contact-form-section {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    
    /* Contact page form specific styles */
    .contact-form {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .contact-form .form-row {
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }
    
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        width: 100% !important;
        padding: 12px 15px !important;
        font-size: 16px !important;
        border: 2px solid #e9ecef !important;
        border-radius: 6px !important;
        font-family: 'Poppins', sans-serif !important;
        background: #fff !important;
        color: #333 !important;
        box-sizing: border-box !important;
    }
    
    .contact-form textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }
    
    .contact-form .submit-btn {
        width: 100% !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
        color: #181818 !important;
        border: none !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        font-family: 'Poppins', sans-serif !important;
        box-shadow: 0 4px 15px rgba(255,215,0,0.3) !important;
    }
    
    /* Contact page hero section */
    .contact-hero h1 {
        font-size: 2rem !important;
        margin-bottom: 15px !important;
        padding: 0 10px !important;
    }
    
    .contact-hero p {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
        padding: 0 10px !important;
    }
    
    /* Contact map fixes */
    .contact-map {
        height: 250px !important;
        width: 100% !important;
    }
    
    .contact-map iframe {
        height: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    /* Smaller mobile optimizations for contact page */
    .contact-modern-container,
    .contact-container.contact-two-partition {
        padding: 15px 10px !important;
    }
    
    .contact-form {
        gap: 12px !important;
    }
    
    .contact-form .form-row {
        gap: 12px !important;
    }
    
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        padding: 10px 12px !important;
        font-size: 16px !important;
    }
    
    .contact-form textarea {
        min-height: 100px !important;
    }
    
    .contact-form .submit-btn {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }
    
    .contact-hero h1 {
        font-size: 1.6rem !important;
    }
    
    .contact-hero p {
        font-size: 0.9rem !important;
    }
    
    .contact-map {
        height: 200px !important;
    }
}

/* ===== ENSURE FORM VISIBILITY ON ALL MOBILE DEVICES ===== */
@media (max-width: 1024px) {
    /* Force contact form visibility and proper layout */
    #contactPageForm,
    .contact-form {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure form containers are visible */
    .contact-section-home > div:last-child > div:last-child,
    .contact-main-flex > div:last-child,
    .contact-modern-form,
    .contact-form-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Force form inputs to be visible and properly sized */
    #contactPageForm input,
    #contactPageForm select,
    #contactPageForm textarea,
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Ensure submit buttons are visible */
    #contactPageForm .contact-btn,
    .contact-btn,
    .contact-form .submit-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        position: relative !important;
        z-index: 1 !important;
    }
} 

/* ===== CONTACT FORM BANNER HEADING MOBILE FIXES ===== */
@media (max-width: 768px) {
    /* Contact form banner heading fixes */
    .contact-section-home h2,
    .contact-section-home > div:first-child h2,
    .contact-main-flex h2,
    .contact-modern-container h2,
    .contact-container h2 {
        font-size: 1.8rem !important;
        font-weight: 800 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
        padding: 0 15px !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Contact form description text fixes */
    .contact-section-home p,
    .contact-section-home > div:first-child p,
    .contact-main-flex p,
    .contact-modern-container p,
    .contact-container p {
        font-size: 1rem !important;
        margin-bottom: 25px !important;
        text-align: center !important;
        padding: 0 15px !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Contact form detailed description fixes */
    .contact-section-home div[style*="margin-bottom: 0.7rem"],
    .contact-section-home > div:first-child div[style*="margin-bottom: 0.7rem"] {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        text-align: justify !important;
        padding: 0 15px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 20px !important;
    }
    
    /* Contact page hero section heading fixes */
    .contact-hero h1,
    .contact-hero h2 {
        font-size: 2rem !important;
        font-weight: 800 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
        padding: 0 15px !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .contact-hero p {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
        text-align: center !important;
        padding: 0 15px !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    /* Smaller mobile optimizations for banner headings */
    .contact-section-home h2,
    .contact-section-home > div:first-child h2,
    .contact-main-flex h2,
    .contact-modern-container h2,
    .contact-container h2 {
        font-size: 1.5rem !important;
        padding: 0 10px !important;
        margin-bottom: 12px !important;
        line-height: 1.3 !important;
    }
    
    .contact-section-home p,
    .contact-section-home > div:first-child p,
    .contact-main-flex p,
    .contact-modern-container p,
    .contact-container p {
        font-size: 0.9rem !important;
        padding: 0 10px !important;
        margin-bottom: 20px !important;
    }
    
    .contact-section-home div[style*="margin-bottom: 0.7rem"],
    .contact-section-home > div:first-child div[style*="margin-bottom: 0.7rem"] {
        font-size: 0.85rem !important;
        padding: 0 10px !important;
        margin-bottom: 15px !important;
    }
    
    .contact-hero h1,
    .contact-hero h2 {
        font-size: 1.6rem !important;
        padding: 0 10px !important;
        margin-bottom: 12px !important;
    }
    
    .contact-hero p {
        font-size: 0.9rem !important;
        padding: 0 10px !important;
        margin-bottom: 25px !important;
    }
}

@media (max-width: 360px) {
    /* Extra small mobile optimizations */
    .contact-section-home h2,
    .contact-section-home > div:first-child h2,
    .contact-main-flex h2,
    .contact-modern-container h2,
    .contact-container h2 {
        font-size: 1.3rem !important;
        padding: 0 8px !important;
        margin-bottom: 10px !important;
    }
    
    .contact-section-home p,
    .contact-section-home > div:first-child p,
    .contact-main-flex p,
    .contact-modern-container p,
    .contact-container p {
        font-size: 0.85rem !important;
        padding: 0 8px !important;
        margin-bottom: 18px !important;
    }
    
    .contact-section-home div[style*="margin-bottom: 0.7rem"],
    .contact-section-home > div:first-child div[style*="margin-bottom: 0.7rem"] {
        font-size: 0.8rem !important;
        padding: 0 8px !important;
        margin-bottom: 12px !important;
    }
    
    .contact-hero h1,
    .contact-hero h2 {
        font-size: 1.4rem !important;
        padding: 0 8px !important;
        margin-bottom: 10px !important;
    }
    
    .contact-hero p {
        font-size: 0.85rem !important;
        padding: 0 8px !important;
        margin-bottom: 20px !important;
    }
    
    /* Contact form specific fixes for very small screens */
    .contact-section-home > div:last-child,
    .contact-main-flex {
        padding: 10px 8px !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    .contact-section-home > div:last-child > div:last-child,
    .contact-main-flex > div:last-child {
        padding: 0.8rem 0.6rem !important;
        min-height: auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    
    #contactPageForm {
        gap: 10px !important;
        min-height: auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    
    #contactPageForm > div[style*="display: flex"] {
        gap: 10px !important;
        min-height: auto !important;
    }
    
    #contactPageForm input,
    #contactPageForm select,
    #contactPageForm textarea {
        padding: 8px 10px !important;
        font-size: 16px !important;
        min-height: auto !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }
    
    #contactPageForm textarea {
        min-height: 80px !important;
        max-height: 150px !important;
        overflow-y: auto !important;
    }
    
    #contactPageForm .contact-btn,
    .contact-btn {
        padding: 10px 12px !important;
        font-size: 13px !important;
        min-height: auto !important;
    }
    
    #contactPageForm .message,
    #successMessage,
    #errorMessage,
    #contactPageSuccess {
        padding: 8px 10px !important;
        font-size: 12px !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    /* Ensure contact section is fully visible on very small screens */
    .contact-section-home {
        padding: 30px 0 !important;
        min-height: auto !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Fix any potential overflow issues on very small screens */
    .contact-section-home * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ===== FORCE BANNER HEADING VISIBILITY ===== */
@media (max-width: 1024px) {
    /* Ensure all contact form banner headings are visible */
    .contact-section-home h2,
    .contact-section-home > div:first-child h2,
    .contact-main-flex h2,
    .contact-modern-container h2,
    .contact-container h2,
    .contact-hero h1,
    .contact-hero h2 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto 15px auto !important;
        padding: 0 15px !important;
        text-align: center !important;
        font-family: 'Poppins', sans-serif !important;
        font-weight: 800 !important;
        color: #1e293b !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
    }
    
    /* Ensure contact form description text is visible */
    .contact-section-home p,
    .contact-section-home > div:first-child p,
    .contact-main-flex p,
    .contact-modern-container p,
    .contact-container p,
    .contact-hero p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto 25px auto !important;
        padding: 0 15px !important;
        text-align: center !important;
        font-family: 'Poppins', sans-serif !important;
        color: #444 !important;
        line-height: 1.5 !important;
    }
    
    /* Ensure detailed description text is visible */
    .contact-section-home div[style*="margin-bottom: 0.7rem"],
    .contact-section-home > div:first-child div[style*="margin-bottom: 0.7rem"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto 20px auto !important;
        padding: 0 15px !important;
        text-align: justify !important;
        font-family: 'Poppins', sans-serif !important;
        color: #444 !important;
        line-height: 1.6 !important;
    }
}