mobileStyles.css

/* Mobile styles for Header */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: center;
        padding: 0.1rem;
    }

    header .logo {
        /* margin-bottom: 0.1rem; */
        font-size: 1rem;
    }

    header nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Center items horizontally */
        padding: 0;
        margin: 0;
    }

    header nav ul li {
        width: 45%; /* Allows for two items per row */
        margin: 0.1rem 1%; /* Adjust spacing between items */
        text-align: center;
        background: #444;
        border-radius: 25px;
        transition: background-color 0.3s ease; /* Smooth background transition */
    }

    header nav ul li a {
        display: block;
        padding: 0.7rem;
        color: #fff;
        font-size: 0.6rem;
        text-transform: uppercase;
        border-radius: 30px;
        transition: color 0.3s ease, background-color 0.3s ease; /* Smooth color transition */
    }

    header nav ul li a:hover {
        color: #f4a261;
        background-color: #222;
    }

}

/* Mobile Styles for Side Navigation */
@media (max-width: 768px) {
    .side-nav {
        visibility: hidden;
        opacity: 0; /* Start hidden */
    }

    .side-nav.show-side-nav {
        visibility: hidden;
        opacity: 0; /* Fully visible when shown */
    }

    /* .side-nav ul {
        visibility: hidden;
    }

    .side-nav ul li a {
        visibility: hidden;
    }

    /* Active Section Indicator */
    /* .side-nav ul li a.active {
        visibility: hidden;
    } */ 
}

/* Mobile Styles for Hero Section */
@media (max-width: 768px) {
    .hero {
        padding: 0rem;
    }

    .profile-photo-container {
        margin-top: 0rem;
        margin-bottom: 0%;
    }

    /* Adjust Social Icons for Mobile */
    .social-icons {
        position: static; /* Position the icons statically */
        display: flex;
        justify-content: center; /* Center the icons horizontally */
        margin-top: 1rem; /* Add space above the icons */
        margin-bottom: 0rem; 
        flex-direction: row; /* Align the icons horizontally */
        box-shadow: none; /* Remove shadow effect */
        transform: none; /* Remove any scaling or transformation */
        filter: none; /* Remove grayscale or other filters */
        transition: none; /* Disable any transitions or animations */
    }

    .social-icon {
        font-size: 1.2rem; /* Slightly smaller icons */
        width: 30px; /* Adjust icon size */
        height: 30px; /* Adjust icon size */
        margin: 0 5px; /* Space between icons */
        box-shadow: none; /* Remove shadow effect */
        transform: none; /* Remove any scaling or transformation */
        filter: none; /* Remove grayscale or other filters */
        transition: none; /* Disable any transitions or animations */
    }

    /* Adjust Intro Text for Mobile */
    .intro-text {
        margin-top: 0rem;
        font-size: 0.1rem; /* Smaller text size */
        /* padding: 1rem; Adjust padding */
        max-width: 95%; /* Reduce max width */
        padding: 0.1rem;
    }
        /* Profile Name Adjustments */
    .hero.in-view .profile-name {
            font-size: 1.5rem; /* Reduce name size */
    }

    /* Hover Effect */
    .social-icon:hover {
        box-shadow: none; /* Remove shadow effect */
        transform: none; /* Remove any scaling or transformation */
        filter: none; /* Remove grayscale or other filters */
        transition: none; /* Disable any transitions or animations */
    }

    /* Smooth Transition for Icons */
    .social-icons a {
        box-shadow: none; /* Remove shadow effect */
        transform: none; /* Remove any scaling or transformation */
        filter: none; /* Remove grayscale or other filters */
        transition: none; /* Disable any transitions or animations */
    }

    .social-icons a:hover {
        box-shadow: none; /* Remove shadow effect */
        transform: none; /* Remove any scaling or transformation */
        filter: none; /* Remove grayscale or other filters */
        transition: none; /* Disable any transitions or animations */
    }

}


/* Skills Section - Mobile */
@media (max-width: 768px) {
    .skills {
        margin-top: 1.5rem;
        padding: 0 1rem; /* Add padding to avoid content touching the edges */
        text-align: center; /* Center the title */
    }

    /* Skills Section Title - Mobile */
    .skills h2 {
        font-size: 1.5rem; /* Reduce the font size for better visibility on small screens */
        margin-bottom: 1.5rem;
        transform: translateY(-15px); /* Slightly reduce the translation */
    }

    /* Adjusted Category Title - Mobile */
    .category-title {
        font-size: 1.25rem; /* Reduce the font size for mobile */
        margin-bottom: 0.75rem;
    }

    /* Adjust container for proper alignment - Mobile */
    .skills-compact-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Adjust grid for smaller screens */
        gap: 8px; /* Reduce gap between grid items */
        max-width: 100%; /* Ensure it fits within the screen width */
        transform: translateY(15px); /* Slightly reduce the translation */
    }

    /* Skill Item - Mobile */
    .skill-item {
        padding: 8px 15px; /* Reduce padding for smaller screens */
        font-size: 0.75rem; /* Further reduce font size */
        transform: scale(1); /* Default scale */
    }

    /* Highlight on Hover - Mobile */
    .skill-item:hover {
        transform: scale(1.1); /* Slightly smaller scale on hover */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* Slightly reduce shadow size */
    }

    /* Blur effect adjustment - Mobile */
    .skills-compact-grid:hover .skill-item:not(:hover) {
        filter: blur(3px); /* Slightly reduce the blur effect */
    }

    /* Active class when in view - Mobile */
    .skills.in-view h2,
    .skills.in-view .skills-compact-grid {
        transform: translateY(0); /* Bring to original position */
    }
}


/* Highlighted Company Name - Mobile */
@media (max-width: 768px) {
    .company-name {
        font-size: 1rem; /* Adjust font size for mobile */
        padding: 0.15rem 0.3rem; /* Adjust padding for mobile */
        border-radius: 4px; /* Slightly reduce border-radius */
    }
}

/* Experience Section - Mobile */
@media (max-width: 768px) {
    .experience {
        margin: 2rem 0; /* Reduce margin to fit mobile screens */
        padding: 1.5rem; /* Adjust padding for better spacing */
        transform: translateY(15px); /* Slightly reduce the translation */
    }

    /* Experience Section Title - Mobile */
    .experience h2 {
        font-size: 2rem; /* Reduce font size for mobile */
        margin-bottom: 2rem; /* Reduce bottom margin for better spacing */
        transform: translateY(-15px); /* Slightly reduce the translation */
    }

    /* Experience Item - Mobile */
    .experience-item {
        margin-bottom: 1.5rem; /* Reduce margin between items */
        padding: 1rem; /* Adjust padding for better fit */
        transform: translateY(15px); /* Slightly reduce the translation */
    }

    .experience-item h3 {
        font-size: 1.5rem; /* Reduce font size for mobile */
    }

    .experience-duration {
        font-size: 0.9rem; /* Adjust font size for readability on mobile */
    }

    .experience-description {
        font-size: 0.9rem; /* Adjust font size for readability on mobile */
    }
}


/* Project Section - Mobile */
@media (max-width: 768px) {
    .projects {
        padding: 2rem 0.5rem; /* Reduce padding for better fit on mobile */
        margin-bottom: 1.5rem; /* Adjust bottom margin */
    }

    .projects h2 {
        font-size: 2rem; /* Reduce font size for mobile */
        margin-bottom: 0.75rem; /* Adjust bottom margin */
        animation: fadeInTitle 1s ease-out forwards; /* Keep the same animation */
    }

    .projects.in-view .project-card {
        padding: 1.5rem; /* Reduce padding for smaller screens */
        margin: 1rem 0; /* Keep margin consistent */
        max-width: 100%; /* Ensure full width on mobile */
        border-radius: 8px; /* Slightly reduce border-radius */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Adjust shadow for smaller screens */
    }

    .project-card h3 {
        font-size: 1.5rem; /* Reduce font size for mobile */
        margin-bottom: 0.75rem; /* Adjust bottom margin */
    }

    .project-card p,
    .project-card ul li {
        font-size: 0.9rem; /* Slightly reduce font size for better readability */
        margin-bottom: 0.5rem; /* Keep consistent spacing */
    }

    .project-link {
        padding: 0.4rem 0.8rem; /* Adjust padding for mobile */
        font-size: 0.9rem; /* Slightly reduce font size */
        border-radius: 4px; /* Slightly reduce border-radius */
    }
}


/* Contact Section - Mobile */
@media (max-width: 768px) {
    .contact.in-view {
        padding: 1rem 0.5rem; /* Reduce padding for mobile */
        margin: 0.5rem 0; /* Reduce margin */
        flex-direction: column; /* Stack elements vertically on mobile */
    }

    /* Contact Box - Mobile */
    .contact.in-view .contact-box {
        max-width: 100%; /* Full width on mobile */
        border-radius: 10px; /* Slightly reduce border-radius */
        padding: 1.5rem; /* Add padding inside the box for better spacing */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Adjust shadow for mobile */
    }

    /* Contact Content - Mobile */
    .contact-content {
        padding: 1.5rem; /* Reduce padding inside the content */
    }

    /* Contact Section Title - Mobile */
    .contact-content h2 {
        font-size: 2rem; /* Reduce font size for mobile */
        margin-bottom: 1rem; /* Add some margin at the bottom */
    }

    /* Form Elements - Mobile */
    .contact-content form {
        gap: 0.75rem; /* Reduce gap between form elements */
    }

    input[type="text"],
    input[type="email"],
    textarea {
        padding: 0.6rem; /* Adjust padding for mobile */
        font-size: 0.9rem; /* Reduce font size */
        border-radius: 8px; /* Slightly reduce border-radius */
    }

    textarea {
        height: 120px; /* Reduce textarea height for mobile */
    }

    /* Submit Button Styling - Mobile */
    button {
        padding: 0.6rem; /* Adjust padding for mobile */
        font-size: 1rem; /* Reduce font size */
        border-radius: 8px; /* Slightly reduce border-radius */
    }

}


/* Mobile Optimization */
@media (max-width: 768px) {
    .scroll-button {
        padding: 0.75rem;
        font-size: 0.875rem;
        bottom: 15px;
        right: 15px;
    }
}

@media (max-width: 480px) {
    .scroll-button {
        padding: 0.6rem;
        font-size: 0.75rem;
        bottom: 10px;
        right: 10px;
    }
}