@media (max-width: 768px) {
    /* Mobile-Specific Styles for Grid Cards */
    .grid {
        grid-template-columns: 1fr; /* Ensure a single-column layout for smaller screens */
    }

    .grid-div {
        grid-template-columns: 1fr; /* Ensure a single-column layout for smaller screens */
        align-items: center;
    }

    /* Logo for Mobile */
    .logo img {
        width: 100px; /* Adjust logo size for mobile */
        height: 100px;
        position: relative;
        top: 5px; /* Adjust position for better alignment */
        left: 5px;
    }

    /* Navbar for Mobile */
    .nav-links {
        display: none; /* Hide navbar links on mobile */
    }

    .hamburger-menu {
        position: fixed;
        top: 15px;
        right: 20px;
        z-index: 1002;
        cursor: pointer;
        background-color: #000;
        padding: 10px;
        border-radius: 5px;
    }

    .hamburger-menu div {
        width: 25px;
        height: 3px;
        background-color: #00aced;
        margin: 4px 0;
    }

    .hamburger-menu:hover {
        background-color: #000;
    }

    .nav-links.active {
        display: flex; /* Show navbar links when expanded on mobile */
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.9);
        position: fixed;
        top: 60px;
        right: 20px;
        padding: 10px;
        border-radius: 5px;
    }

    /* Make the links visible and styled appropriately when active */
    .nav-links li a {
        color: white; /* Default color */
        text-decoration: none;
        padding: 10px;
        transition: color 0.3s;
    }

    .nav-links li a:hover {
        color: #00aced; /* Highlight on hover */
    }

    /* Add specific color when the menu is active */
    .nav-links.active li a {
        color: white; /* Adjust to ensure visibility when active */
    }

    /* Social Media Icons for Mobile */
    .social-media-icons-footer {
        display: flex; /* Show the icons only in the header on mobile */
        justify-content: center;
        gap: 10px;
        padding: 10px 0;
    }

    .social-media-icons-footer a {
        width: 40px; /* Set size for the icons */
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .social-media-icons-footer img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .social-media-bar {
        display: none; /* Hide sidebar social media icons on mobile */
    }

    /* Mobile-Specific Styles for Modals */
    .modal {
        width: 90%;  /* Adjust width for mobile */
        top: 10%;  /* Move closer to the top of the screen */
        padding: 15px;  /* Adjust padding for better fit */
    }

    .modal-content {
        width: 95%;
        margin: 10% auto; /* Adjust modal content margin for better fit on mobile */
    }

    .contact-grid {
        grid-template-columns: 1fr; /* Switch to a single-column layout */
    }

    .map-container,
    .contact-info {
        grid-column: 1; /* Both items take up the full width in a single-column layout */
    }

    .contact-info {
        padding: 10px; /* Adjust padding for better fit on mobile */
    }

    .toggle-button {
        width: 100%; /* Make the button take the full width on mobile for better UX */
    }
}