/* ============================================
   TOP MENU - MOBILE OPTIMIZATION
   Phone & Email in Same Line
   Mobile Only (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {
    
    /* ============================================
       1. TOP BAR - MOBILE LAYOUT - PREMIUM STYLING
       ============================================ */
    
    .top-bar {
        padding: 2.5px 0 !important; /* Reduced by 50% from 5px to 2.5px */
        font-size: 11px !important;
        background: #1a1a1a !important; /* Simple dark background */
        border: none !important; /* No red border */
        box-shadow: none !important;
        position: relative !important;
        overflow: visible !important;
        margin: 0 !important; /* Remove margins */
    }
    
    /* Removed animated gradient line */
    .top-bar::before {
        display: none !important;
    }
    
    /* Removed pattern overlay */
    .top-bar::after {
        display: none !important;
    }
    
    .top-bar .container {
        padding: 0 8px !important; /* Reduced by 20% from 10px to 8px */
        position: relative;
        z-index: 1;
    }
    
    .top-bar .top-flex {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important; /* Reduced by 50% from 4px to 2px */
        align-items: center !important;
    }
    
    /* ============================================
       2. TOP INFO - PHONE & EMAIL SAME LINE
       ============================================ */
    
    .top-info {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 0.3px 8px !important; /* Reduced by 60% from 0.75px to 0.3px (top/bottom) */
        background: transparent !important; /* Background removed */
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        backdrop-filter: none !important;
        transition: none !important;
        margin: 0 !important; /* Minimum margin */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .top-info span {
        margin: 0 !important; /* Minimum margin */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        font-size: clamp(13px, 3.2vw, 14px) !important; /* Increased font size for mobile numbers */
        color: #ffffff !important;
        flex-shrink: 0 !important;
        padding: 0.4px 5px !important; /* Reduced by 60% from 1px to 0.4px (top/bottom) */
        background: transparent !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        transition: none !important;
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Phone number links - larger font */
    .top-info span.phone-top,
    .top-info span.phone-top a {
        font-size: clamp(14px, 3.5vw, 15px) !important; /* Even larger for phone numbers */
        font-weight: 500 !important;
    }
    
    /* Removed span::before animation */
    
    /* Removed hover effects */
    
    .top-info span i {
        margin-right: 6px !important; /* Reduced margin */
        color: #ffffff !important; /* White icon color */
        font-size: clamp(11px, 2.8vw, 12px) !important; /* Smaller icon */
        flex-shrink: 0 !important;
        text-shadow: none !important; /* Removed text shadow */
        transition: none !important; /* Removed transition */
    }
    
    /* Phone Top - Both Numbers Styled - Enhanced */
    .top-info span.phone-top {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        padding: 1.6px 14px !important; /* Reduced by 60% from 4px to 1.6px (top/bottom) */
        background: linear-gradient(135deg, rgba(198, 40, 40, 0.15) 0%, rgba(198, 40, 40, 0.08) 100%) !important;
        border: 1px solid rgba(198, 40, 40, 0.3) !important;
        margin: 0 !important; /* Minimum margin */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .top-info span.phone-top:hover {
        background: linear-gradient(135deg, rgba(198, 40, 40, 0.25) 0%, rgba(198, 40, 40, 0.15) 100%) !important;
        border-color: rgba(198, 40, 40, 0.6) !important;
    }
    
    .top-info span.phone-top a {
        color: #ffffff !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        padding: 3px 6px !important;
        border-radius: 4px !important;
        font-weight: 500 !important;
        position: relative !important;
    }
    
    .top-info span.phone-top a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--primary-red, #c62828);
        transition: width 0.3s ease;
    }
    
    .top-info span.phone-top a:hover {
        color: #ff5252 !important;
        background: rgba(198, 40, 40, 0.25) !important;
        text-shadow: 0 0 8px rgba(255, 82, 82, 0.6) !important;
        transform: scale(1.05);
    }
    
    .top-info span.phone-top a:hover::after {
        width: 100%;
    }
    
    .top-info span.phone-top a:first-child::after {
        content: ' |';
        margin: 0 6px;
        color: rgba(255, 255, 255, 0.4);
        font-weight: 300;
    }
    
    /* Email link styling - Enhanced */
    .top-info span a {
        color: #ffffff !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        padding: 2px 4px !important;
        border-radius: 4px !important;
        position: relative !important;
    }
    
    .top-info span a::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--primary-red, #c62828), #ff5252);
        transition: width 0.3s ease;
    }
    
    .top-info span a:hover {
        color: #ff5252 !important;
        text-shadow: 0 0 8px rgba(255, 82, 82, 0.6) !important;
        transform: scale(1.03);
    }
    
    .top-info span a:hover::after {
        width: 100%;
    }
    
    /* Override inline margin-left styles */
    .top-info span[style*="margin-left"] {
        margin-left: 0 !important;
    }
    
    /* Phone & Email - Force Same Line (first two spans) */
    .top-info span:nth-child(1),
    .top-info span:nth-child(2) {
        display: inline-flex !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    /* Clock/Time - Hide in mobile view (third span) */
    .top-info span:nth-child(3) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
    
    /* Hide spans with clock icon */
    .top-info span:has(i.fa-clock) {
        display: none !important;
    }
    
    /* Hide clock by content matching */
    .top-info span:contains("10:00 AM"),
    .top-info span:contains("05:00 PM") {
        display: none !important;
    }
    
    /* Hide Email Address in Mobile View */
    .top-info span:has(i.fa-envelope),
    .top-info span:has(a[href^="mailto:"]),
    .top-info span:nth-child(2) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
    
    /* Also hide email link directly */
    .top-info span a[href^="mailto:"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
    
    /* ============================================
       3. SOCIAL ICONS - MOBILE STYLING
       ============================================ */
    
    .social-icons {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 3px !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding: 1px 6px !important; /* Reduced by 50% from 2px to 1px */
        background: #000000 !important; /* Black background like image */
        border-radius: 0 !important;
        border: none !important; /* No red border */
        box-shadow: none !important;
        backdrop-filter: none !important;
        overflow-x: visible !important;
        -webkit-overflow-scrolling: touch !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important; /* Remove bottom margin */
    }
    
    .social-icons a {
        width: 26px !important; /* Reduced size */
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        color: #ffffff !important; /* White icon color */
        font-size: 14px !important; /* Increased icon size for better visibility */
        transition: none !important; /* Removed transition */
        text-decoration: none !important;
        position: relative !important;
        overflow: visible !important;
        box-shadow: none !important; /* Removed shadow */
        flex-shrink: 0 !important;
        border: 1.5px solid currentColor !important; /* Border matches icon color */
        background: #ffffff !important; /* White background for all circles */
    }
    
    /* Default icon color - will be overridden by specific brand colors */
    .social-icons a i {
        color: #333333 !important; /* Default, will be overridden */
    }
    
    /* All circles have white background - Borders match icon colors */
    /* Call/Phone - Green Icon */
    .social-icons a[href^="tel:"],
    .social-icons a[aria-label="Call"] {
        background: #ffffff !important; /* White background */
        border-color: #25d366 !important; /* Green border matching icon */
    }
    .social-icons a[href^="tel:"] i,
    .social-icons a[aria-label="Call"] i {
        color: #25d366 !important; /* Green icon color */
    }
    
    /* WhatsApp - Green Icon */
    .social-icons a[href*="wa.me"],
    .social-icons a[href*="whatsapp"],
    .social-icons a[aria-label="WhatsApp"] {
        background: #ffffff !important; /* White background */
        border-color: #25d366 !important; /* Green border matching icon */
    }
    .social-icons a[href*="wa.me"] i,
    .social-icons a[href*="whatsapp"] i,
    .social-icons a[aria-label="WhatsApp"] i {
        color: #25d366 !important; /* Green icon color */
    }
    
    /* Email - Red Icon */
    .social-icons a[href^="mailto:"],
    .social-icons a[aria-label="Email"] {
        background: #ffffff !important; /* White background */
        border-color: #c62828 !important; /* Red border matching icon */
    }
    .social-icons a[href^="mailto:"] i,
    .social-icons a[aria-label="Email"] i {
        color: #c62828 !important; /* Red icon color */
    }
    
    /* Facebook - Blue Icon */
    .social-icons a[href*="facebook"] {
        background: #ffffff !important; /* White background */
        border-color: #1877f2 !important; /* Blue border matching icon */
    }
    .social-icons a[href*="facebook"] i {
        color: #1877f2 !important; /* Blue icon color */
    }
    
    /* Instagram - Gradient Border with Pink Icon */
    .social-icons a[href*="instagram"] {
        background: #ffffff !important; /* White background */
        border: 1.5px solid transparent !important; /* Transparent base for gradient */
        position: relative !important;
    }
    .social-icons a[href*="instagram"]::before {
        content: '' !important;
        position: absolute !important;
        inset: -1.5px !important;
        border-radius: 50% !important;
        padding: 1.5px !important;
        background: linear-gradient(135deg, #fd1d1d 0%, #833ab4 50%, #fcb045 100%) !important;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
        -webkit-mask-composite: xor !important;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
        mask-composite: exclude !important;
        z-index: -1 !important;
    }
    .social-icons a[href*="instagram"] i {
        color: #e4405f !important; /* Pink icon color */
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: #e4405f !important;
        background-clip: unset !important;
    }
    
    /* Twitter/X - Light Blue Icon */
    .social-icons a[href*="twitter"],
    .social-icons a[href*="x.com"] {
        background: #ffffff !important; /* White background */
        border-color: #1da1f2 !important; /* Light blue border matching icon */
    }
    .social-icons a[href*="twitter"] i,
    .social-icons a[href*="x.com"] i {
        color: #1da1f2 !important; /* Light blue icon color */
    }
    
    /* YouTube - Red Icon */
    .social-icons a[href*="youtube"] {
        background: #ffffff !important; /* White background */
        border-color: #ff0000 !important; /* Red border matching icon */
    }
    .social-icons a[href*="youtube"] i {
        color: #ff0000 !important; /* Red icon color */
    }
    
    /* Pinterest - Red Icon */
    .social-icons a[href*="pinterest"] {
        background: #ffffff !important; /* White background */
        border-color: #bd081c !important; /* Red border matching icon */
    }
    .social-icons a[href*="pinterest"] i {
        color: #bd081c !important; /* Red icon color */
    }
    
    /* Removed ::before and ::after animations */
    .social-icons a::before,
    .social-icons a::after {
        display: none !important;
    }
    
    .social-icons a i {
        position: relative;
        z-index: 1;
        transition: none !important; /* Removed transition */
        filter: none !important; /* Removed filter */
        color: #ffffff !important; /* White icon color inside circle */
        font-size: inherit !important; /* Inherit from parent for proper sizing */
    }
    
    /* Ensure Instagram icon is white (override gradient) */
    .social-icons a[href*="instagram"] i {
        color: #ffffff !important; /* White icon color */
        background: none !important; /* Remove gradient background from icon */
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: #ffffff !important;
        background-clip: unset !important;
    }
    
    /* Simplified hover - just slight scale */
    .social-icons a:hover {
        transform: scale(1.1) !important;
        opacity: 0.9 !important;
    }
    
    /* Social Media Specific Colors */
    .social-icons a[href*="facebook"]:hover {
        color: #1877f2 !important;
        background: rgba(24, 119, 242, 0.15) !important;
        border-color: #1877f2 !important;
    }
    
    .social-icons a[href*="instagram"]:hover {
        color: #e4405f !important;
        background: rgba(228, 64, 95, 0.15) !important;
        border-color: #e4405f !important;
    }
    
    .social-icons a[href*="twitter"]:hover,
    .social-icons a[href*="x.com"]:hover {
        color: #1da1f2 !important;
        background: rgba(29, 161, 242, 0.15) !important;
        border-color: #1da1f2 !important;
    }
    
    .social-icons a[href*="youtube"]:hover {
        color: #ff0000 !important;
        background: rgba(255, 0, 0, 0.15) !important;
        border-color: #ff0000 !important;
    }
    
    .social-icons a[href*="pinterest"]:hover {
        color: #bd081c !important;
        background: rgba(189, 8, 28, 0.15) !important;
        border-color: #bd081c !important;
    }
    
    /* Call/Phone */
    .social-icons a[href^="tel:"]:hover,
    .social-icons a[aria-label="Call"]:hover {
        color: #25d366 !important;
        background: rgba(37, 211, 102, 0.2) !important;
        border-color: #25d366 !important;
        box-shadow: 0 8px 20px rgba(37, 211, 102, 0.5), 0 0 20px #25d366 !important;
    }
    
    /* WhatsApp */
    .social-icons a[href*="wa.me"]:hover,
    .social-icons a[href*="whatsapp"]:hover,
    .social-icons a[aria-label="WhatsApp"]:hover {
        color: #25d366 !important;
        background: rgba(37, 211, 102, 0.25) !important;
        border-color: #25d366 !important;
        box-shadow: 0 8px 20px rgba(37, 211, 102, 0.6), 0 0 25px #25d366 !important;
    }
    
    /* Email */
    .social-icons a[href^="mailto:"]:hover,
    .social-icons a[aria-label="Email"]:hover {
        color: #c62828 !important;
        background: rgba(198, 40, 40, 0.25) !important;
        border-color: #c62828 !important;
        box-shadow: 0 8px 20px rgba(198, 40, 40, 0.5), 0 0 25px #c62828 !important;
    }
}

/* ============================================
   4. VERY SMALL SCREENS (max-width: 480px)
   ============================================ */

@media (max-width: 480px) {
    .top-bar {
        padding: 2.5px 0 !important; /* Reduced by 50% from 5px to 2.5px */
        font-size: 10px !important;
        margin: 0 !important; /* Remove margins */
    }
    
    .top-bar .top-flex {
        gap: 2px !important; /* Reduced by 50% from 4px to 2px */
    }
    
    .top-info {
        gap: 6px !important;
        font-size: clamp(9px, 2.2vw, 10px) !important;
        padding: 0.3px 8px !important; /* Reduced by 60% from 0.75px to 0.3px (top/bottom) */
        background: transparent !important; /* Background removed */
        margin: 0 !important; /* Minimum margin */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .top-info span {
        font-size: clamp(9px, 2.2vw, 10px) !important;
        padding: 0.4px 5px !important; /* Reduced by 60% from 1px to 0.4px (top/bottom) */
    }
    
    .top-info span i {
        font-size: clamp(10px, 2.5vw, 11px) !important;
        margin-right: 4px !important;
    }
    
    .social-icons {
        gap: 2px !important; /* Reduced gap */
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
        -webkit-overflow-scrolling: touch !important;
        justify-content: center !important;
        padding: 0.5px 6px !important; /* Reduced by 50% from 1px to 0.5px */
        background: #000000 !important; /* Black background like image */
        margin-top: 0 !important;
        margin-bottom: 0 !important; /* Remove bottom margin */
    }
    
    .social-icons a {
        width: 24px !important; /* Further reduced for small screens */
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        font-size: 13px !important; /* Increased icon size for better visibility */
        flex-shrink: 0 !important;
        border: 1.5px solid currentColor !important; /* Border matches icon color */
        background: #ffffff !important; /* White background for all circles */
    }
    
    /* Default icon color for small screens - will be overridden */
    .social-icons a i {
        color: #333333 !important; /* Default, will be overridden */
    }
    
    /* All circles white - Borders match icon colors (Small Screen) */
    /* Call/Phone - Green Icon */
    .social-icons a[href^="tel:"],
    .social-icons a[aria-label="Call"] {
        background: #ffffff !important; /* White background */
        border-color: #25d366 !important; /* Green border matching icon */
    }
    .social-icons a[href^="tel:"] i,
    .social-icons a[aria-label="Call"] i {
        color: #25d366 !important; /* Green icon color */
    }
    
    /* WhatsApp - Green Icon */
    .social-icons a[href*="wa.me"],
    .social-icons a[href*="whatsapp"],
    .social-icons a[aria-label="WhatsApp"] {
        background: #ffffff !important; /* White background */
        border-color: #25d366 !important; /* Green border matching icon */
    }
    .social-icons a[href*="wa.me"] i,
    .social-icons a[href*="whatsapp"] i,
    .social-icons a[aria-label="WhatsApp"] i {
        color: #25d366 !important; /* Green icon color */
    }
    
    /* Email - Red Icon */
    .social-icons a[href^="mailto:"],
    .social-icons a[aria-label="Email"] {
        background: #ffffff !important; /* White background */
        border-color: #c62828 !important; /* Red border matching icon */
    }
    .social-icons a[href^="mailto:"] i,
    .social-icons a[aria-label="Email"] i {
        color: #c62828 !important; /* Red icon color */
    }
    
    /* Facebook - Blue Icon */
    .social-icons a[href*="facebook"] {
        background: #ffffff !important; /* White background */
        border-color: #1877f2 !important; /* Blue border matching icon */
    }
    .social-icons a[href*="facebook"] i {
        color: #1877f2 !important; /* Blue icon color */
    }
    
    /* Instagram - Gradient Border with Pink Icon */
    .social-icons a[href*="instagram"] {
        background: #ffffff !important; /* White background */
        border: 1.5px solid transparent !important; /* Transparent base for gradient */
        position: relative !important;
    }
    .social-icons a[href*="instagram"]::before {
        content: '' !important;
        position: absolute !important;
        inset: -1.5px !important;
        border-radius: 50% !important;
        padding: 1.5px !important;
        background: linear-gradient(135deg, #fd1d1d 0%, #833ab4 50%, #fcb045 100%) !important;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
        -webkit-mask-composite: xor !important;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
        mask-composite: exclude !important;
        z-index: -1 !important;
    }
    .social-icons a[href*="instagram"] i {
        color: #e4405f !important; /* Pink icon color */
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: #e4405f !important;
        background-clip: unset !important;
    }
    
    /* Twitter/X - Light Blue Icon */
    .social-icons a[href*="twitter"],
    .social-icons a[href*="x.com"] {
        background: #ffffff !important; /* White background */
        border-color: #1da1f2 !important; /* Light blue border matching icon */
    }
    .social-icons a[href*="twitter"] i,
    .social-icons a[href*="x.com"] i {
        color: #1da1f2 !important; /* Light blue icon color */
    }
    
    /* YouTube - Red Icon */
    .social-icons a[href*="youtube"] {
        background: #ffffff !important; /* White background */
        border-color: #ff0000 !important; /* Red border matching icon */
    }
    .social-icons a[href*="youtube"] i {
        color: #ff0000 !important; /* Red icon color */
    }
    
    /* Pinterest - Red Icon */
    .social-icons a[href*="pinterest"] {
        background: #ffffff !important; /* White background */
        border-color: #bd081c !important; /* Red border matching icon */
    }
    .social-icons a[href*="pinterest"] i {
        color: #bd081c !important; /* Red icon color */
    }
}