/* ================= HOME SECTION ================= */

.homecontainer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:50px;
    padding:80px 8%;
    flex-wrap:wrap;
}

/* ================= LEFT SIDE ================= */

.leftpart{
    display:flex;
    flex-direction:column;
    gap:15px;
    max-width:550px;
}

/* Main heading */

.punchline{
    font-family:"Oswald",sans-serif;
    font-size:3.2rem;
    font-weight:700;
}

/* Typed text */

#element{
    font-family:"Oswald",sans-serif;
    font-size:2.6rem;
    color:rgb(101,28,109);
}

/* Typed container */

.typed-container{
    min-height:60px;
}

/* ===== FIXED TYPED CURSOR ===== */

.typed-cursor{
    font-size:2.6rem !important;
    color:rgb(101,28,109);
    line-height:1;
}

/* ================= SOCIAL ICONS ================= */

.sociallinks{
    display:flex;
    gap:20px;
    margin-top:20px;
}

.sociallinks img{
    width:38px;
    height:38px;
    transition:transform .3s ease;
}

.sociallinks img:hover{
    transform:translateY(-6px);
}

/* ================= RESUME BUTTON ================= */

.resumedownload{
    margin-top:20px;
}

.resumedownload a{
    display:inline-block;
    background:rgb(101,28,109);
    color:white;
    padding:12px 28px;
    border-radius:30px;
    text-decoration:none;
    font-family:"Iosevka Charon", monospace;
    font-weight:600;
    transition:all .3s ease;
}

.resumedownload a:hover{
    transform:translateY(-3px);
    background:rgb(126,99,151);
    box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

/* ================= RIGHT SIDE ================= */

.rightpart{
    display:flex;
    justify-content:center;
}

.rightpart dotlottie-wc{
    width:420px;
    height:420px;
}

/* ================= TABLET ================= */

@media (max-width:900px){

    .homecontainer{
        flex-direction:column;
        text-align:center;
        padding:60px 6%;
    }

    .leftpart{
        align-items:center;
    }

    .punchline{
        font-size:2.6rem;
    }

    #element{
        font-size:2.2rem;
    }

    .typed-cursor{
        font-size:2.2rem !important;
    }

}

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

@media (max-width:600px){

    .punchline{
        font-size:2.1rem;
    }

    #element{
        font-size:1.8rem;
    }

    .typed-cursor{
        font-size:1.8rem !important;
    }

    .sociallinks img{
        width:34px;
        height:34px;
    }

    /* hide animation */

    .rightpart{
        display:none;
    }

}