.fas.fa-shopping-bag {
    display: none;
}

.logo-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* Change to desired color if needed */
    padding: 0;
    margin: 0 auto;
    width: 90px; /* Ensure the width matches the logo size */
    height: 80px; /* Ensure the height matches the logo size */
}

/* Ensure the logo image fits within the container */
.logo-image .custom-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.social-links a {
    font-size: 18px; /* Adjust the size as needed */
    display: inline-flex;
    align-items: center;
}

.social-links a .fab {
    font-size: 24px; /* Adjust the size as needed */
    margin-right: 8px; /* Adjust spacing between icon and text */
}

.social-links a .fab.fa-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Desktop styles */
.contact-info-link {
    color: #ffffff; /* Ensures it matches the email link color on desktop */
    font-family: inherit; /* Inherit the font family */
    font-size: inherit; /* Inherit the font size */
    text-decoration: none; /* Remove underline */
}

.contact-info-link:hover {
    color: #ffffff; /* Ensure the hover color matches as well */
    text-decoration: underline; /* Optional: underline on hover */
}

.contact-info-link .fas {
    color: #ffffff; /* Ensure the icon color matches */
    font-family: inherit; /* Inherit the font family */
    font-size: inherit; /* Inherit the font size */
}

/* Mobile styles */
@media (max-width: 768px) {
    .contact-info-link {
        color: #000000; /* Change this to black or the appropriate color for mobile */
    }

    .contact-info-link:hover {
        color: #000000; /* Ensure the hover color matches as well */
    }

    .contact-info-link .fas {
        color: #000000; /* Ensure the icon color matches */
    }
}

/* Reduce logo rectangle size on mobile */
@media (max-width: 843px) {
    .logo-image {
        padding: 5px; /* Adjust padding as needed */
        width: 100%; /* Adjust width as needed */
        margin: 0 auto; /* Center the logo */
    }

    .logo-content {
        font-size: 16px; /* Adjust font size as needed */
    }

    .main-header .container {
        padding: 0 15px; /* Reduce padding for the container */
    }
}