/* =========================================
   MD MARUF AL HOSSAIN PORTFOLIO
   RESPONSIVE SYSTEM
   RESPONSIVE.CSS PART 1/2
========================================= */



/* =========================
   LARGE DESKTOP
   1440px+
========================= */


@media (min-width:1440px){


    .hero {


        padding-left:10%;

        padding-right:10%;


    }



    .section {


        padding-left:10%;

        padding-right:10%;


    }




    .hero-image {


        width:500px;



    }



}








/* =========================
   LAPTOP
   1024px - 1280px
========================= */


@media(max-width:1280px){



    .navbar {


        width:92%;



    }





    .hero {


        gap:40px;



    }




    .hero-image {


        width:380px;



    }





    .projects-grid {


        grid-template-columns:

        repeat(
            2,
            1fr
        );



    }




    .tech-grid {


        grid-template-columns:

        repeat(
            4,
            1fr
        );



    }



}








/* =========================
   TABLET
   768px - 1024px
========================= */


@media(max-width:1024px){



    .section {


        padding:

        100px 6%;



    }





    .navbar {


        padding:

        16px 25px;



    }





    .nav-links {


        gap:20px;



    }





    .hero {


        flex-direction:column;


        text-align:center;



        padding-top:150px;



    }





    .hero-content {


        display:flex;


        flex-direction:column;


        align-items:center;



    }





    .hero-description {


        max-width:650px;



    }





    .hero-buttons {


        justify-content:center;



    }





    .hero-image {


        width:350px;



    }





    .about-container {


        grid-template-columns:1fr;



    }




    .about-text {


        text-align:center;



    }





    .stats-grid {


        max-width:700px;


        margin:auto;



    }





    .skills-container {


        grid-template-columns:

        repeat(
            2,
            1fr
        );



    }





    .service-grid {


        grid-template-columns:

        repeat(
            2,
            1fr
        );



    }





    .achievement-box {


        grid-template-columns:

        repeat(
            3,
            1fr
        );



    }



}









/* =========================
   MOBILE LANDSCAPE
   600px - 768px
========================= */


@media(max-width:768px){



    html {


        overflow-x:hidden;



    }





    .section {


        padding:

        80px 5%;



    }





    .navbar {


        top:15px;


        width:92%;


        border-radius:30px;



    }





    .nav-links {


        position:absolute;


        top:80px;


        left:0;



        width:100%;



        padding:30px;



        flex-direction:column;



        align-items:center;



        background:

        rgba(
            10,
            10,
            10,
            .9
        );



        backdrop-filter:

        blur(20px);



        border-radius:25px;



        opacity:0;



        pointer-events:none;



        transform:

        translateY(-20px);



        transition:

        .4s ease;



    }





    .nav-links.active {


        opacity:1;



        pointer-events:auto;



        transform:

        translateY(0);



    }






    .menu-toggle {


        display:flex;



        flex-direction:column;



        gap:5px;



    }





    .menu-toggle span {


        width:25px;


        height:2px;



        background:white;



    }







    .hero {


        min-height:auto;



        padding-top:140px;



    }





    .hero h1 {


        font-size:

        clamp(
            2.8rem,
            12vw,
            4rem
        );



    }





    .hero h2 {


        font-size:1.5rem;



    }





    .hero-description {


        font-size:1rem;



    }





    .hero-image {


        width:280px;



    }





    .stats-grid {


        grid-template-columns:

        1fr;



    }






    .timeline-item {


        padding-left:55px;



    }






    .timeline-content {


        padding:25px;



    }
    /* =========================================
   RESPONSIVE.CSS PART 2/2
   MOBILE + FINAL OPTIMIZATION
========================================= */





/* =========================
   SMALL TABLETS
   600px
========================= */


@media(max-width:600px){



    .section-heading {


        margin-bottom:45px;



    }





    .section-heading h2 {


        font-size:2rem;



    }





    .skills-container,
    .service-grid,
    .projects-grid {


        grid-template-columns:

        1fr;



    }





    .tech-grid {


        grid-template-columns:

        repeat(
            2,
            1fr
        );



    }





    .achievement-box {


        grid-template-columns:

        1fr;



    }





    .tech-item {


        min-height:130px;



    }





    .tech-item i {


        font-size:2.4rem;



    }





    .project-image {


        height:220px;



    }





    .project-content {


        padding:25px;



    }





    .contact-form button {


        width:100%;



    }



}









/* =========================
   LARGE PHONES
   425px
========================= */


@media(max-width:425px){



    .navbar {


        padding:

        14px 20px;



    }





    .logo {


        font-size:1.3rem;



    }





    .theme-toggle {


        width:38px;


        height:38px;



    }





    .hero {


        padding-top:

        120px;



    }





    .hero h1 {


        font-size:

        2.6rem;



    }





    .hero-buttons {


        flex-direction:column;


        width:100%;



    }





    .hero-buttons .btn {


        width:100%;



    }





    .hero-image {


        width:240px;



    }





    .stat-card {


        padding:25px;



    }





    .stat-card h3 {


        font-size:2.5rem;



    }





    .timeline {


        margin-left:5px;



    }





    .timeline::before {


        left:12px;



    }





    .timeline-dot {


        left:0;


        width:24px;


        height:24px;



    }





    .timeline-item {


        padding-left:45px;



    }





    .skill-category {


        padding:25px;



    }





    .skill {


        font-size:.9rem;



    }





    .testimonial-card {


        padding:30px;



    }





    .testimonial-card p {


        font-size:1.05rem;



    }




}









/* =========================
   SMALL PHONES
   375px
========================= */


@media(max-width:375px){



    .hero h1 {


        font-size:2.3rem;



    }





    .hero h2 {


        font-size:1.25rem;



    }





    .hero-description {


        font-size:.95rem;



    }





    .hero-image {


        width:210px;



    }





    .tech-grid {


        grid-template-columns:

        1fr;



    }





    .btn {


        padding:

        13px 22px;



    }





    .footer {


        padding:

        50px 5%;



    }



}









/* =========================
   EXTRA SMALL DEVICES
   320px
========================= */


@media(max-width:320px){



    .section {


        padding:

        70px 4%;



    }





    .navbar {


        width:95%;



    }





    .logo {


        font-size:1.1rem;



    }





    .hero h1 {


        font-size:2rem;



    }





    .hero-image {


        width:180px;



    }





    .section-heading h2 {


        font-size:1.7rem;



    }





    .project-content h3 {


        font-size:1.2rem;



    }





    .social-links a {


        width:42px;


        height:42px;



    }



}









/* =========================
   TOUCH DEVICES
========================= */


@media(hover:none){



    .project-card:hover,
    .service-card:hover,
    .tech-item:hover {


        transform:none;



    }





    .btn:hover {


        transform:none;



    }





}









/* =========================
   LANDSCAPE MOBILE
========================= */


@media(
    max-height:500px
) and (
    orientation:landscape
){



    .hero {


        min-height:auto;


        padding-top:120px;



    }





    .hero-image {


        width:200px;



    }



}









/* =========================
   PRINT FRIENDLY
========================= */


@media print {



    .navbar,
    .cursor,
    .cursor-follower,
    #particles,
    #three-background {


        display:none;



    }





    body {


        background:white;


        color:black;



    }



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

    .personal-about-container{

        grid-template-columns:1fr;

        text-align:center;

    }



    .personal-info-grid{

        grid-template-columns:1fr;

    }

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


    .skills-showcase{

        grid-template-columns:

        repeat(2,1fr);

    }


}



@media(max-width:600px){


    .skills-showcase{

        grid-template-columns:

        1fr;

    }


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


.social-contact-grid{


    grid-template-columns:

    repeat(2,1fr);


}


}





@media(max-width:600px){


.social-contact-grid{


    grid-template-columns:

    1fr;


}



.availability{

    font-size:.9rem;

}



}
/* =====================================
   COMPLETE MOBILE RESPONSIVE FIX
===================================== */



@media (max-width: 768px){



    /* GLOBAL FIXES */


    html{

        overflow-x:hidden;

    }



    body{

        overflow-x:hidden;

    }





    .section{

        padding:

        70px 20px;

    }





    /* NAVBAR */


    .navbar{

        padding:

        20px;

    }



    .nav-links{

        position:fixed;

        top:80px;

        left:0;

        width:100%;


        background:

        rgba(5,5,5,.95);


        backdrop-filter:blur(20px);


        flex-direction:column;


        align-items:center;


        padding:40px;


        transform:

        translateY(-120%);


        transition:.4s;


    }





    .nav-links.active{

        transform:

        translateY(0);

    }






    .menu-toggle{

        display:flex;

    }







    /* =========================
       HERO MOBILE ORDER
    ========================= */


    .hero{


        display:flex;


        flex-direction:column;


        text-align:center;


        gap:40px;


        min-height:auto;


        padding-top:120px;


    }





    /* PHOTO FIRST */


    .hero-image{


        order:1;


        width:100%;


        display:flex;


        justify-content:center;


    }





    .hero-image img{


        width:

        min(80vw,350px);


        height:

        min(80vw,350px);


        object-fit:cover;


        border-radius:50%;


    }





    /* TEXT SECOND */


    .hero-content{


        order:2;


    }





    .hero-tag{


        font-size:.9rem;


    }






    .hero h1{


        font-size:

        clamp(2.5rem,10vw,4rem);


        line-height:1.1;


    }





    .hero h2{


        font-size:1.3rem;


    }





    .hero-description{


        font-size:1rem;


        line-height:1.7;


    }





    .hero-buttons{


        flex-direction:column;


        width:100%;


        gap:15px;


    }





    .btn{


        width:100%;


    }









    /* ABOUT */


    .about-container,


    .personal-about-container{


        grid-template-columns:

        1fr;


        text-align:center;


    }






    .stats-grid{


        grid-template-columns:

        1fr 1fr;


    }







    /* SKILLS */


   




    .creative-skill-card{


        padding:30px 20px;


    }







    /* PROJECTS */


    .projects-grid{


        grid-template-columns:

        1fr;


    }






    .project-card{


        width:100%;


    }






    /* SERVICES */


    .service-grid{


        grid-template-columns:

        1fr;


    }







    /* CONTACT */


    





    .social-contact-card{


        padding:

        30px 20px;


    }







    /* FOOTER */


    .footer{


        text-align:center;


        padding:

        40px 20px;


    }




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


.hero{


    gap:50px;


}



.hero h1{


    font-size:4rem;


}



.skills-showcase{


    grid-template-columns:

    repeat(2,1fr);


}



.projects-grid{


    grid-template-columns:

    repeat(2,1fr);


}



}
/* =====================================
   MOBILE CARD OPTIMIZATION
===================================== */


@media(max-width:768px){


/* ALL CARD GRIDS */

.skills-showcase,
.social-contact-grid,
.service-grid,
.projects-grid,
.achievement-box,
.stats-grid,
.personal-info-grid{


    grid-template-columns:repeat(2, 1fr);

    gap:15px;


}





/* ALL CARDS */

.creative-skill-card,
.social-contact-card,
.service-card,
.project-card,
.achievement-card,
.stat-card,
.info-card{


    padding:18px 12px;

    border-radius:18px;


}





/* CARD ICONS */


.skill-icon,
.social-icon{


    width:50px;

    height:50px;

    border-radius:15px;

    margin-bottom:15px;


}



.skill-icon i,
.social-icon i{


    font-size:22px;


}





/* CARD TITLES */


.creative-skill-card h3,
.social-contact-card h3,
.service-card h3,
.project-content h3,
.achievement-card h3,
.info-card h3{


    font-size:1rem;

    line-height:1.3;

}





/* CARD DESCRIPTIONS */


.creative-skill-card p,
.social-contact-card p,
.service-card p,
.project-content p,
.info-card p{


    font-size:.8rem;

    line-height:1.5;

}





/* REMOVE HUGE HEIGHTS */


.social-contact-card p{


    min-height:auto;


}





.project-image img{


    height:150px;

    object-fit:cover;


}





}



/* SMALL PHONES */

@media(max-width:420px){


.skills-showcase,
.social-contact-grid,
.service-grid,
.projects-grid,
.achievement-box,
.stats-grid,
.personal-info-grid{


    grid-template-columns:1fr 1fr;

    gap:10px;


}





.creative-skill-card,
.social-contact-card,
.service-card,
.project-card,
.achievement-card,
.stat-card,
.info-card{


    padding:15px 10px;


}





.creative-skill-card h3,
.social-contact-card h3,
.service-card h3{


    font-size:.85rem;


}





.creative-skill-card p,
.social-contact-card p,
.service-card p{


    font-size:.72rem;


}





.social-contact-card a{


    font-size:.8rem;


}



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


    /* Slow down hero photo floating on mobile */

    .hero-image img{

        animation-duration:12s !important;

        animation-delay:2s !important;

    }



    /* Slow down floating shapes */

    .floating-shape{

        animation-duration:20s !important;

        animation-delay:3s !important;

    }



    /* Reduce movement distance */

    @keyframes float{


        0%,100%{

            transform:translateY(0);

        }


        50%{

            transform:translateY(-10px);

        }


    }




    @keyframes shapeFloat{


        0%,100%{

            transform:
            translateY(0)
            rotate(0deg);

        }



        50%{

            transform:
            translateY(-25px)
            rotate(90deg);

        }


    }


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


    /* Slow hero image glow */

    .image-glow{

        animation-duration:12s !important;

    }



    /* Slow card glow effects */

    .creative-skill-card:hover,
    .social-contact-card:hover,
    .service-card:hover,
    .project-card:hover{

        box-shadow:

        0 0 25px rgba(0,168,255,0.15);

    }



    /* Slow any pulse/glow animations */

    .glow,
    .gradient-glow,
    .floating-glow{

        animation-duration:15s !important;

    }


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


    .hero h1 span{

        animation-duration:12s !important;

    }



}