/* Mobile Responsive */

@media (max-width:768px) {


    /* General */

    body {

        overflow-x: hidden;

    }


    section {

        padding: 40px 20px;

    }



 /* Mobile Navbar Fix */

nav {

    width:90%;

    flex-direction:row;

    justify-content:space-between;

    align-items:center;

    position:relative;

}


.nav-links {

    display:none;

    position:absolute;

    top:70px;

    left:0;

    width:100%;

    flex-direction:column;

    align-items:center;

    gap:20px;

    padding:25px 0;

    background:rgba(255,255,255,0.08);

    backdrop-filter:blur(20px);

    border-radius:20px;

}


.nav-links li {

    width:100%;

    text-align:center;

}


.menu-toggle {

    display:block;

}


.nav-btn {

    width:auto;

    padding:10px 20px;

}
@media (max-width:768px) {

    .nav-links {

        display:none;

    }


    .nav-links.active {

        display:flex;

    }


    .menu-toggle {

        display:block;

    }

}


    /* Hero */

    .hero {

        flex-direction: column;

        text-align: center;

        gap: 40px;

        padding: 120px 20px 50px;

    }


    .hero-text {

        max-width: 100%;

    }


    .hero-text h1 {

        font-size: 38px;

        line-height: 1.2;

    }


    .hero-text p {

        font-size: 16px;

    }



    /* Hero Buttons */

    .main-btn,
    .secondary-btn {

        width: 100%;

        margin: 10px 0;

        display: flex;

        justify-content: center;

        align-items: center;

        box-sizing: border-box;

    }


    .secondary-btn {

        margin-left: 0;

    }



    /* Profile Image */

    .profile-box {

        width: 220px;

        height: 220px;

    }


    .profile-box img {

        width: 200px;

        height: 200px;

    }



    /* Headings */

    h2 {

        font-size: 32px;

    }


    .section-header h2 {

        font-size: 32px;

    }



    /* Cards */

    .services-container,
    .workflow-container,
    .tech-container,
    .skills-container,
    .why-container {

        grid-template-columns: 1fr;

    }


    .service-card,
    .workflow-card,
    .why-card,
    .tech-card {

        padding: 25px;

    }



    /* Projects */

    .project-showcase {

        flex-direction: column;

        gap: 30px;

    }


    .project-showcase.reverse {

        flex-direction: column;

    }


    .project-image img {

        width: 100%;

        height: auto;

    }


    .project-info h3 {

        font-size: 26px;

    }



    /* Contact Buttons */

    .contact-buttons {

        display: flex;

        flex-direction: column;

        width: 100%;

        gap: 15px;

        align-items: center;

    }


    .contact-buttons a {

        width: 90%;

        max-width: 350px;

        display: flex;

        justify-content: center;

        align-items: center;

        text-align: center;

        box-sizing: border-box;

    }


}