/* Contact Page Styles */
.contact-page {
    padding: 0 !important;
    margin: 0 !important;
    background-color: #f8f9fa !important;
}

/* Override gallery-hero styles specifically for Contact page */
.contact-page .gallery-hero,
body .contact-page .gallery-hero,
html body .gallery-hero,
.gallery-hero {
    background: linear-gradient(135deg, var(--primary) 0%, #2c3e50 100%) !important;
    color: white !important;
    padding: 3rem 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

/* Ensure breadcrumb styling is consistent */
.contact-page .gallery-hero .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
}

.contact-page .gallery-hero .breadcrumb-item {
    color: rgba(255, 255, 255, 0.8) !important;
}

.contact-page .gallery-hero .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
}

.contact-page .gallery-hero .breadcrumb-item a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

.contact-page .gallery-hero .breadcrumb-item.active {
    color: #fff !important;
}

.contact-page .gallery-title {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
    color: #fff !important;
}

.contact-page .gallery-meta {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
}

.contact-page .meta-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    padding: 8px 16px !important;
    border-radius: 30px !important;
    font-size: 14px !important;
    color: var(--primary) !important;
}

.contact-page .meta-item i {
    font-size: 16px !important;
    color: var(--secondary) !important;
}

/* Contact Content Section */
.contact-content {
    padding: 40px 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    background-color: #fff !important;
}

.section-header {
    margin-bottom: 2rem !important;
    text-align: center !important;
}

.section-title {
    font-size: 2rem !important;
    font-weight: 600 !important;
    color: var(--primary) !important;
    margin-bottom: 0.5rem !important;
}

.section-divider {
    height: 2px !important;
    background: linear-gradient(to right, transparent, var(--primary), transparent) !important;
    margin: 1rem auto !important;
    max-width: 200px !important;
}

/* Contact Grid Styles */
.contact-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
}

.contact-info-card {
    background: #fff !important;
    padding: 2rem !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    transition: transform 0.3s ease !important;
}

.contact-info-card:hover {
    transform: translateY(-5px) !important;
}

.info-icon {
    width: 70px !important;
    height: 70px !important;
    background: var(--primary) !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1.5rem !important;
}

.info-icon i {
    font-size: 2rem !important;
}

.contact-info-card h3 {
    color: var(--primary) !important;
    margin-bottom: 1rem !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
}

.contact-info-card address {
    font-style: normal !important;
    line-height: 1.6 !important;
    color: #555 !important;
}

.contact-info-card a {
    color: #555 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color 0.3s ease !important;
}

.contact-info-card a:hover {
    color: var(--primary) !important;
}

/* Social Links */
.social-links {
    display: flex !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
}

.social-link {
    width: 45px !important;
    height: 45px !important;
    background: #f5f5f5 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--primary) !important;
    font-size: 1.2rem !important;
    transition: all 0.3s ease !important;
}

.social-link:hover {
    background: var(--primary) !important;
    color: white !important;
}

/* Useful Links */
.useful-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.useful-links li {
    margin-bottom: 0.8rem !important;
}

.useful-links a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #555 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.useful-links a::before {
    content: "\f105" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: var(--primary) !important;
}

.useful-links a:hover {
    color: var(--primary) !important;
    padding-left: 5px !important;
}

/* Manufacturing Units Styles */
.units-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
}

.unit-card {
    background: #fff !important;
    padding: 2rem !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    transition: transform 0.3s ease !important;
}

.unit-card:hover {
    transform: translateY(-5px) !important;
}

.unit-icon {
    width: 70px !important;
    height: 70px !important;
    background: var(--primary) !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1.5rem !important;
}

.unit-icon i {
    font-size: 2rem !important;
}

.unit-card h3 {
    color: var(--primary) !important;
    margin-bottom: 1rem !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
}

.unit-card address {
    font-style: normal !important;
    line-height: 1.6 !important;
    color: #555 !important;
}

.unit-contact {
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #eee !important;
}

.unit-contact p {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 0.5rem !important;
}

.unit-contact i {
    color: var(--primary) !important;
    min-width: 20px !important;
    text-align: center !important;
}

/* Responsive styles */
@media (max-width: 991px) {
    .contact-page .gallery-hero,
    body .contact-page .gallery-hero,
    .gallery-hero {
        padding: 2.5rem 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .contact-page .gallery-title {
        font-size: 2rem !important;
    }
    
    .section-title {
        font-size: 1.75rem !important;
    }
    
    .contact-grid, 
    .units-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .contact-page .gallery-hero,
    body .contact-page .gallery-hero,
    .gallery-hero {
        padding: 2rem 0 !important;
    }
    
    .contact-page .gallery-title {
        font-size: 1.75rem !important;
    }
    
    .section-title {
        font-size: 1.5rem !important;
    }
    
    .contact-grid, 
    .units-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 576px) {
    .contact-page .gallery-meta {
        flex-direction: column !important;
    }
    
    .contact-info-card,
    .unit-card {
        padding: 1.5rem !important;
    }
}

/* Fix any spacing issues with the main site wrapper */
html body main.contact-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Target any global styles that might be causing issues */
html body .rti-page .gallery-hero,
html body .gallery-hero,
html body .corporate-banner,
html body .rti-page,
html body .shared-hero-section,
html body [class*="-header"] {
    margin-top: auto !important;
}

/* Specific fix for any collapsing margins */
html body header + .contact-page .gallery-hero,
html body header + .contact-page {
    margin-top: 0 !important;
}

/* Fix for RTI or other templates affecting spacing */
html body .contact-page.gallery-page,
html body .contact-page {
    margin-top: 0 !important;
}