/* Mobile Navigation Fix - Override all other styles */

/* Force hide sidebar on mobile screens */
@media screen and (max-width: 991px) {
    .aside {
        left: -270px !important;
        transition: left 0.3s ease !important;
    }
    
    .aside .nav-toggler {
        display: flex !important;
        left: 20px !important;
        z-index: 1001 !important;
        position: fixed !important;
        top: 15px !important;
        background: #fff !important;
        border: 2px solid var(--skin-color) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
        height: 40px !important;
        width: 45px !important;
    }
    
    .aside .nav-toggler span {
        height: 2px !important;
        width: 18px !important;
    }
    
    .aside .nav-toggler span::before,
    .aside .nav-toggler span::after {
        height: 2px !important;
        width: 18px !important;
    }
    
    .main-content {
        padding-left: 0 !important;
    }
    
    .section {
        left: 0 !important;
        padding: 40px 15px !important;
    }
    
    .aside.open {
        left: 0 !important;
    }
    
    .aside.open .nav-toggler {
        left: 280px !important;
    }
    
    .section.open {
        left: 270px !important;
    }
    
    /* General Section Spacing */
    .section .container {
        padding: 0 15px !important;
    }
    
    .section-title {
        margin-bottom: 30px !important;
    }
    
    .section-title h2 {
        font-size: 28px !important;
        margin-bottom: 15px !important;
    }
    
    /* Fix Profile Image and Social Icons on Mobile - HOME SECTION */
    .home .home-img {
        display: block !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-top: 30px !important;
        margin-bottom: 20px !important;
    }
    
    .home .home-img img {
        max-width: 200px !important;
        height: auto !important;
        border-radius: 10px !important;
        margin-bottom: 15px !important;
    }
    
    .profile-social-icons {
        display: flex !important;
        justify-content: center !important;
        margin-top: 15px !important;
        margin-bottom: 25px !important;
        gap: 10px !important;
    }
    
    .home .home-info {
        margin-bottom: 20px !important;
    }
    
    .home .home-info .btn.hire-me {
        margin-top: 25px !important;
        margin-bottom: 15px !important;
    }
    
    /* ABOUT SECTION Spacing */
    .about .about-content {
        padding: 20px 0 !important;
    }
    
    .about .timeline-item {
        margin-bottom: 25px !important;
        padding: 20px !important;
    }
    
    /* SERVICES SECTION Spacing */
    .service .service-item {
        margin-bottom: 25px !important;
    }
    
    .service .service-item-inner {
        padding: 25px 20px !important;
    }
    
    /* PORTFOLIO SECTION Spacing */
    .portfolio .portfolio-item {
        margin-bottom: 25px !important;
    }
    
    .portfolio-heading {
        margin-bottom: 25px !important;
    }
    
    /* Portfolio Links Mobile Styles */
    .portfolio-links {
        gap: 15px !important;
    }
    
    .portfolio-link {
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--skin-color) !important;
        color: white !important;
        text-decoration: none !important;
        border-radius: 50% !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
        z-index: 12 !important;
    }
    
    .portfolio-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.8) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
        z-index: 10 !important;
    }
    
    .portfolio-item-inner:hover .portfolio-overlay {
        opacity: 1 !important;
    }
    
    /* Touch support for mobile devices */
    .portfolio-item-inner:active .portfolio-overlay,
    .portfolio-item-inner:focus .portfolio-overlay {
        opacity: 1 !important;
    }
    
    .portfolio-item-inner {
        cursor: pointer !important;
    }
    
    /* PUBLICATIONS SECTION Spacing */
    .publications .publication-item {
        margin-bottom: 25px !important;
        padding: 20px !important;
    }
    
    /* CERTIFICATES SECTION Spacing */
    .certificates .certificates-list li {
        margin-bottom: 20px !important;
        padding: 15px !important;
    }
    
    /* CONTACT SECTION Spacing */
    .contact .contact-form {
        padding: 20px 0 !important;
    }
    
    .contact .form-item {
        margin-bottom: 20px !important;
    }
    
    .contact-title {
        margin-bottom: 20px !important;
    }
}

/* Smaller mobile screens */
@media screen and (max-width: 767px) {
    .aside {
        width: 250px !important;
        left: -250px !important;
    }
    
    .aside .nav-toggler {
        left: 15px !important;
        top: 12px !important;
        height: 40px !important;
        width: 45px !important;
    }
    
    .aside .nav-toggler span {
        width: 18px !important;
    }
    
    .aside .nav-toggler span::before,
    .aside .nav-toggler span::after {
        width: 18px !important;
    }
    
    .aside.open .nav-toggler {
        left: 260px !important;
    }
    
    .section.open {
        left: 250px !important;
    }
    
    .section {
        padding: 30px 10px !important;
    }
    
    .home .home-img img {
        max-width: 180px !important;
        margin-bottom: 12px !important;
    }
    
    .profile-social-icons {
        margin-bottom: 20px !important;
    }
    
    .section-title h2 {
        font-size: 24px !important;
    }
}

/* Very small screens */
@media screen and (max-width: 480px) {
    .aside {
        width: 220px !important;
        left: -220px !important;
    }
    
    .aside .nav-toggler {
        left: 10px !important;
        top: 10px !important;
        height: 40px !important;
        width: 45px !important;
    }
    
    .aside .nav-toggler span {
        width: 18px !important;
    }
    
    .aside .nav-toggler span::before,
    .aside .nav-toggler span::after {
        width: 18px !important;
    }
    
    .aside.open .nav-toggler {
        left: 230px !important;
    }
    
    .section.open {
        left: 220px !important;
    }
    
    .section {
        padding: 25px 8px !important;
    }
    
    .home .home-img img {
        max-width: 150px !important;
        margin-bottom: 10px !important;
    }
    
    .profile-social-icons {
        gap: 8px !important;
        margin-bottom: 18px !important;
    }
    
    .home .home-info .btn.hire-me {
        margin-top: 20px !important;
    }
    
    .section-title h2 {
        font-size: 22px !important;
    }
    
    /* Portfolio Links for Very Small Screens */
    .portfolio-links {
        gap: 12px !important;
    }
    
    .portfolio-link {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}