/**
 * Contact Page Mobile Fix - iPhone and Android
 * Ensures all contact page content is visible and black on mobile devices
 */

/* Contact info section - force black text on mobile */
@media only screen and (max-width: 767px) {
    /* Contact info section intro text - "Visit our showroom..." paragraph */
    .contact-info-section .sec-title p,
    .contact-info-section .sec-title p a,
    .contact-info-section .sec-title p strong,
    .contact-info-section .sec-title p a[href^="fleet.html"],
    .contact-info-section .sec-title p a[href^="benefits.html"],
    .contact-info-section .sec-title p a[href^="sustainability.html"],
    .contact-info-section .sec-title h2,
    .contact-info-section .sec-title h3,
    .contact-info-section .sec-title .sub-title {
        color: #000000 !important;
    }
    
    /* Banner section paragraph text - match banner text color #b36b56 on mobile */
    /* This includes the phone number "+973 38133833" in the banner paragraph */
    .contact-page .banner-section .banner-carousel .content-box p,
    .contact-page .banner-section .banner-carousel .content-box p strong,
    .contact-page .banner-section .banner-carousel .content-box p *,
    .contact-page .banner-section .content-box p,
    .contact-page .banner-section .content-box p strong,
    .contact-page .banner-section .content-box p *,
    .contact-page .banner-section .slide-item .content-box p,
    .contact-page .banner-section .slide-item .content-box p strong,
    .contact-page .banner-section .slide-item .content-box p * {
        color: #b36b56 !important;
    }
    
    /* Info blocks - Our Location, Email Address, Phone Number */
    .contact-info-section .info-block,
    .contact-info-section .info-block *,
    .contact-info-section .info-block-one,
    .contact-info-section .info-block-one *,
    .contact-info-section .info-block .inner-box,
    .contact-info-section .info-block .inner-box *,
    .contact-info-section .info-block-one .inner-box,
    .contact-info-section .info-block-one .inner-box *,
    .contact-info-section .info-block .inner-box h3,
    .contact-info-section .info-block .inner-box p,
    .contact-info-section .info-block .inner-box p a,
    .contact-info-section .info-block .inner-box p a[href^="mailto:"],
    .contact-info-section .info-block .inner-box p a[href^="tel:"],
    .contact-info-section .info-block-one .inner-box h3,
    .contact-info-section .info-block-one .inner-box p,
    .contact-info-section .info-block-one .inner-box p a,
    .contact-info-section .info-block-one .inner-box p a[href^="mailto:"],
    .contact-info-section .info-block-one .inner-box p a[href^="tel:"],
    .info-block-one .inner-box h3,
    .info-block-one .inner-box p,
    .info-block-one .inner-box p a,
    .info-block-one .inner-box p a[href^="mailto:"],
    .info-block-one .inner-box p a[href^="tel:"],
    .info-block .inner-box h3,
    .info-block .inner-box p,
    .info-block .inner-box p a,
    .info-block .inner-box p a[href^="mailto:"],
    .info-block .inner-box p a[href^="tel:"] {
        color: #000000 !important;
    }
    
    /* Ensure text is visible and has proper display */
    .contact-info-section .info-block .inner-box,
    .contact-info-section .info-block-one .inner-box,
    .info-block-one .inner-box,
    .info-block .inner-box {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }
    
    /* Ensure headings and paragraphs are visible */
    .contact-info-section .info-block .inner-box h3,
    .contact-info-section .info-block-one .inner-box h3,
    .info-block-one .inner-box h3,
    .info-block .inner-box h3 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #000000 !important;
    }
    
    .contact-info-section .info-block .inner-box p,
    .contact-info-section .info-block-one .inner-box p,
    .info-block-one .inner-box p,
    .info-block .inner-box p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #000000 !important;
    }
    
    /* Icon box - keep theme color */
    .contact-info-section .info-block .inner-box .icon-box,
    .contact-info-section .info-block-one .inner-box .icon-box,
    .info-block-one .inner-box .icon-box {
        color: #ffffff !important;
    }
    
    /* Icon box icons */
    .contact-info-section .info-block .inner-box .icon-box i,
    .contact-info-section .info-block-one .inner-box .icon-box i,
    .info-block-one .inner-box .icon-box i {
        color: #ffffff !important;
    }
}

/* Tablet specific */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact-info-section .sec-title p,
    .contact-info-section .sec-title p a,
    .contact-info-section .sec-title p strong,
    .contact-info-section .sec-title p a[href^="fleet.html"],
    .contact-info-section .sec-title p a[href^="benefits.html"],
    .contact-info-section .sec-title p a[href^="sustainability.html"],
    .contact-info-section .sec-title h2,
    .contact-info-section .info-block .inner-box h3,
    .contact-info-section .info-block .inner-box p,
    .contact-info-section .info-block .inner-box p a,
    .contact-info-section .info-block-one .inner-box h3,
    .contact-info-section .info-block-one .inner-box p,
    .contact-info-section .info-block-one .inner-box p a,
    .info-block-one .inner-box h3,
    .info-block-one .inner-box p,
    .info-block-one .inner-box p a {
        color: #000000 !important;
    }
    
    /* Banner section paragraph text - match banner text color #b36b56 on tablet */
    /* This includes the phone number "+973 38133833" in the banner paragraph */
    .contact-page .banner-section .banner-carousel .content-box p,
    .contact-page .banner-section .banner-carousel .content-box p strong,
    .contact-page .banner-section .banner-carousel .content-box p *,
    .contact-page .banner-section .content-box p,
    .contact-page .banner-section .content-box p strong,
    .contact-page .banner-section .content-box p *,
    .contact-page .banner-section .slide-item .content-box p,
    .contact-page .banner-section .slide-item .content-box p strong,
    .contact-page .banner-section .slide-item .content-box p * {
        color: #b36b56 !important;
    }
}