*{

    transition:

    color .3s ease,

    background-color .3s ease,

    border-color .3s ease,

    box-shadow .35s ease,

    transform .35s ease,

    opacity .35s ease;

}



html{

    scroll-behavior:smooth;

}

img,

button,

.btn,

.card,

.project-card,

.skill-card,

.education-card,

.internship-card,

.certificate-card,

.contact-card{

    will-change:transform;

    transform:translateZ(0);

}


@keyframes fadeUp{

0%{

opacity:0;

transform:

translateY(60px);

}

100%{

opacity:1;

transform:

translateY(0);

}

}


@keyframes fadeDown{

0%{

opacity:0;

transform:

translateY(-60px);

}

100%{

opacity:1;

transform:

translateY(0);

}

}


@keyframes fadeLeft{

0%{

opacity:0;

transform:

translateX(-60px);

}

100%{

opacity:1;

transform:

translateX(0);

}

}


@keyframes fadeRight{

0%{

opacity:0;

transform:

translateX(60px);

}

100%{

opacity:1;

transform:

translateX(0);

}

}

@keyframes scaleUp{

0%{

opacity:0;

transform:

scale(.85);

}

100%{

opacity:1;

transform:

scale(1);

}

}


@keyframes floating{

0%{

transform:

translateY(0);

}

25%{

transform:

translateY(-8px);

}

50%{

transform:

translateY(-16px);

}

75%{

transform:

translateY(-8px);

}

100%{

transform:

translateY(0);

}

}

@keyframes glow{

0%{

box-shadow:

0 0 0 rgba(59,130,246,.2);

}

50%{

box-shadow:

0 0 40px rgba(59,130,246,.5);

}

100%{

box-shadow:

0 0 0 rgba(59,130,246,.2);

}

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

@keyframes rotateSlow{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

@keyframes shine{

0%{

left:-120%;

}

100%{

left:140%;

}

}


@keyframes bounce{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

@keyframes blurIn{

0%{

opacity:0;

filter:blur(12px);

transform:translateY(30px);

}

100%{

opacity:1;

filter:blur(0);

transform:translateY(0);

}

}

@keyframes rotateGlow{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

.hover-lift:hover{

transform:

translateY(-8px)

scale(1.02);

}

.hover-zoom{

overflow:hidden;

}

.hover-zoom img{

transition:

transform .45s ease;

}

.hover-zoom:hover img{

transform:scale(1.08);

}


.header{

    transition:

    transform .45s ease,

    background .45s ease,

    box-shadow .45s ease;

}

.header:hover{

    transform:

    translateX(-50%)

    translateY(-2px);

}

.nav-links a{

    position:relative;

    overflow:hidden;

}

.nav-links a::before{

    content:"";

    position:absolute;

    left:-100%;

    bottom:-2px;

    width:100%;

    height:2px;

    background:

    linear-gradient(

    90deg,

    #3B82F6,

    #06B6D4,

    #8B5CF6

    );

    transition:.45s;

}

.nav-links a:hover::before{

    left:0;

}

.nav-links a:hover{

    transform:translateY(-2px);

}

.logo{

    transition:.35s;

}

.logo:hover{

    text-shadow:

    0 0 18px rgba(59,130,246,.55);

}

.resume-btn{

    position:relative;

    overflow:hidden;

}

.resume-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:

    rgba(255,255,255,.35);

    transform:skewX(-25deg);

}

.resume-btn:hover::before{

    animation:

    shine .8s ease;

}

.resume-btn:hover{

    transform:

    translateY(-4px)

    scale(1.03);

}

.hero{

    position:relative;

    overflow:hidden;

}

.hero-content h1{

    animation:

    fadeLeft .9s ease;

}

.hero-content h2{

    animation:

    fadeLeft 1.1s ease;

}

.hero-description{

    animation:

    fadeLeft 1.3s ease;

}

.hero-buttons{

    animation:

    fadeUp 1.4s ease;

}

.hero-buttons .btn{

    position:relative;

    overflow:hidden;

}

.hero-buttons .btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:

    rgba(255,255,255,.35);

    transform:skewX(-25deg);

}

.hero-buttons .btn:hover::before{

    animation:

    shine .8s ease;

}

.hero-buttons .btn:hover{

    transform:

    translateY(-5px)

    scale(1.04);

}

.hero-image{

    animation:

    floating 6s ease-in-out infinite;

}

.image-wrapper{

    position:relative;

}

.image-wrapper::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    background:

    linear-gradient(

    135deg,

    #3B82F6,

    #06B6D4,

    #8B5CF6,

    #3B82F6

    );

    z-index:-1;

    animation:

    rotateSlow 8s linear infinite;

    filter:blur(1px);

}

.image-wrapper:hover{

    transform:

    scale(1.03);

}

.image-wrapper:hover img{

    transform:scale(1.05);

}

.hero-stack span{

    transition:.35s;

}

.hero-stack span:hover{

    transform:

    translateY(-6px)

    scale(1.05);

}


.stat-card{

    animation:

    scaleUp .8s ease;

}

.stat-card:hover{

    transform:

    translateY(-8px)

    scale(1.03);

}

.hero-social a{

    position:relative;

    overflow:hidden;

}

.hero-social a::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(255,255,255,.25),

    transparent

    );

    opacity:0;

    transition:.35s;

}

.hero-social a:hover::before{

    opacity:1;

}

.hero-social a:hover{

    animation:

    pulse .7s ease;

}

.hero::before{

    animation:

    floating 14s ease-in-out infinite;

}

.hero::after{

    animation:

    floating 18s ease-in-out infinite reverse;

}

.scroll-indicator{

    animation:

    bounce 2s infinite;

}

.section-title{

    animation:

    blurIn .9s ease;

}

.section-title h6{

    animation:

    fadeUp .7s ease;

}

.section-title h2{

    animation:

    fadeUp .9s ease;

}

.section-title p{

    animation:

    fadeUp 1.1s ease;

}

.skill-card,
.education-card,
.internship-card,
.project-card,
.certificate-card,
.contact-card,
.about-list{

    position:relative;

    overflow:hidden;

    transform-style:preserve-3d;

    transition:

    transform .45s ease,

    box-shadow .45s ease,

    border-color .45s ease;

}

.skill-card::after,
.education-card::after,
.internship-card::after,
.project-card::after,
.certificate-card::after,
.contact-card::after,
.about-list::after{

    content:"";

    position:absolute;

    top:-150%;

    left:-120%;

    width:70%;

    height:280%;

    background:

    linear-gradient(

    transparent,

    rgba(255,255,255,.15),

    transparent

    );

    transform:rotate(25deg);

    transition:1s;

}



.skill-card:hover::after,
.education-card:hover::after,
.internship-card:hover::after,
.project-card:hover::after,
.certificate-card:hover::after,
.contact-card:hover::after,
.about-list:hover::after{

    left:180%;

}

.skill-card:hover,
.education-card:hover,
.internship-card:hover,
.project-card:hover,
.certificate-card:hover,
.contact-card:hover,
.about-list:hover{

    transform:

    perspective(1200px)

    rotateX(4deg)

    translateY(-10px)

    scale(1.02);

}

.skill-badge{

    position:relative;

    overflow:hidden;

}



.skill-badge::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.18),

    transparent

    );

    opacity:0;

    transition:.35s;

}



.skill-badge:hover::before{

    opacity:1;

}



.skill-badge:hover{

    animation:

    glow 1.2s ease;

}

.education-card{

    animation:

    fadeLeft .9s ease;

}



.education-card:nth-child(2){

    animation-delay:.15s;

}



.education-card:nth-child(3){

    animation-delay:.30s;

}



.education-card:nth-child(4){

    animation-delay:.45s;

}

.education-year{

    transition:.4s;

}



.education-card:hover .education-year{

    transform:

    scale(1.08)

    rotate(-3deg);

}

.internship-card{

    animation:

    fadeRight .9s ease;

}



.internship-tech span{

    transition:.35s;

}



.internship-tech span:hover{

    transform:

    translateY(-6px)

    scale(1.06);

}

.about-image{

    animation:

    floating 7s ease-in-out infinite;

}



.about-image:hover{

    transform:

    scale(1.02)

    rotate(-2deg);

}


.about-list{

    animation:

    fadeUp .8s ease;

}

.about-text,
.project-description,
.internship-description{

    transition:

    .35s;

}



.about-text:hover,
.project-description:hover,
.internship-description:hover{

    color:white;

}
.skill-card h3,
.education-content h3,
.internship-header h3{

    transition:.35s;

}



.skill-card:hover h3,
.education-card:hover h3,
.internship-card:hover h3{

    color:#58C4FF;

}

.contact-item i,
.project-features i{

    transition:.4s;

}



.contact-item:hover i{

    transform:

    rotate(360deg)

    scale(1.12);

}

.skill-card:hover,
.education-card:hover,
.internship-card:hover,
.project-card:hover{

    border-color:

    rgba(59,130,246,.45);

}
.about-image img,
.certificate-image{

    transition:

    transform .45s ease,

    filter .45s ease;

}



.about-image:hover img,
.certificate-card:hover .certificate-image{

    transform:scale(1.06);

    filter:brightness(1.08);

}

.skill-card:nth-child(1){

    animation-delay:.1s;

}

.skill-card:nth-child(2){

    animation-delay:.2s;

}

.skill-card:nth-child(3){

    animation-delay:.3s;

}

.skill-card:nth-child(4){

    animation-delay:.4s;

}

.btn:hover{

    animation:

    glow 1.2s ease;

}

.hidden{

opacity:0;

transform:

translateY(90px);

transition:

all .9s cubic-bezier(.215,.61,.355,1);

}

.show{

opacity:1;

transform:

translateY(0);

}

.show .skill-card,

.show .education-card,

.show .internship-card,

.show .project-card,

.show .certificate-card,

.show .contact-item{

opacity:0;

transform:

translateY(40px);

animation:

cardReveal .8s forwards;

}

.show .skill-card:nth-child(1),
.show .education-card:nth-child(1),
.show .project-card:nth-child(1),
.show .certificate-card:nth-child(1),
.show .contact-item:nth-child(1){

animation-delay:.15s;

}

.show .skill-card:nth-child(2),
.show .education-card:nth-child(2),
.show .project-card:nth-child(2),
.show .certificate-card:nth-child(2),
.show .contact-item:nth-child(2){

animation-delay:.30s;

}

.show .skill-card:nth-child(3),
.show .education-card:nth-child(3),
.show .project-card:nth-child(3),
.show .certificate-card:nth-child(3),
.show .contact-item:nth-child(3){

animation-delay:.45s;

}

.show .skill-card:nth-child(4),
.show .education-card:nth-child(4),
.show .project-card:nth-child(4),
.show .certificate-card:nth-child(4),
.show .contact-item:nth-child(4){

animation-delay:.60s;

}

.show .certificate-card:nth-child(5){

animation-delay:.75s;

}

.show .certificate-card:nth-child(6){

animation-delay:.90s;

}

.project-card,
.skill-card,
.education-card,
.internship-card,
.certificate-card,
.contact-card{

position:relative;

overflow:hidden;

}

/*==================================================
                CARD REVEAL
==================================================*/

@keyframes cardReveal{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.show .skill-card,
.show .education-card,
.show .internship-card,
.show .project-card,
.show .certificate-card,
.show .contact-item{

    opacity:1;

    visibility:visible;

    animation:cardReveal .8s ease forwards;

}