@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;

}


html{

    scroll-behavior:smooth;

}


body{

    background:#310464;
    color:#ffffff;
    overflow-x:hidden;

}

a{

    text-decoration:none;
    color:white;

}
img{

    max-width:100%;
    display:white;

}


:root{


    --primary:#3b82f6;

    --secondary:#8b5cf6;

    --cyan:#22d3ee;


    --dark:#050816;


    --glass:
    rgba(255,255,255,0.08);


    --border:
    rgba(255,255,255,0.15);



    --shadow:
    0 0 40px rgba(59,130,246,.4);


}

.background{


    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-1;


}

/* Moving Grid */


@keyframes gridMove{


    from{

        transform:translateY(0);

    }


    to{

        transform:translateY(70px);

    }


}




.orb{


    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.7;


    animation:
    floating 12s infinite ease-in-out;


}





.orb:nth-child(1){


    width:400px;

    height:400px;


    background:#2563eb;


    top:-150px;

    left:-150px;


}




.orb:nth-child(2){


    width:350px;

    height:350px;


    background:#7c3aed;


    right:-120px;

    top:200px;


}



.orb:nth-child(3){


    width:300px;

    height:300px;


    background:#06b6d4;


    bottom:-120px;

    left:40%;


}




@keyframes floating{


    0%,100%{


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


    }


    50%{


        transform:
        translateY(-50px)
        rotate(180deg);


    }


}



.loader{


    position:fixed;

    inset:0;

    background:#ad05b3;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;


    z-index:9999;


}




.loader-circle{


    width:80px;

    height:80px;


    border-radius:50%;


    border:

    5px solid transparent;


    border-top-color:
    var(--primary);



    animation:
    spin 1s linear infinite;


}


.loader h2{


    margin-top:20px;

    color:white;

    letter-spacing:2px;


}



@keyframes spin{


    from{

        transform:rotate(0);

    }


    to{

        transform:rotate(360deg);

    }


}



header{


    position:fixed;


    top:0;

    left:0;


    width:100%;


    padding:

    25px 10%;



    display:flex;


    justify-content:space-between;


    align-items:center;



    backdrop-filter:
    blur(20px);



    background:

    rgba(168, 8, 16, 0.801);



    border-bottom:

    1px solid rgba(255,255,255,.1);



    z-index:1000;



}







.logo{


    font-size:32px;

    font-weight:800;


    letter-spacing:2px;


}



.logo span{


    color:var(--primary);


}








nav{


    display:flex;

    gap:35px;


}





nav a{


    position:relative;


    font-weight:500;


    transition:.3s;


}





nav a::after{


    content:"";


    position:absolute;


    width:0;


    height:3px;


    bottom:-8px;


    left:0;


    background:

    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary)
    );


    transition:.3s;


}





nav a:hover::after{


    width:100%;


}





nav a:hover{


    color:var(--cyan);


}






.menu-btn{


    display:none;

    font-size:25px;

}




.hero{


    min-height:100vh;


    padding:

    150px 10% 80px;



    display:flex;


    justify-content:space-between;


    align-items:center;



}



.hero-text{


    max-width:650px;


}




.welcome{


    color:

    var(--cyan);


    font-size:24px;


}






.hero-text h1{


    font-size:75px;


    line-height:1.1;


    margin:15px 0;


    font-weight:800;


}




.hero-text h2{


    font-size:38px;


    color:

    var(--primary);


}





.hero-text p{
text-align: justify;

    margin-top:25px;


    line-height:1.8;


    color:#b8c4dd;


    font-size:18px;


}


/* BUTTONS */


.btn-group{


    margin-top:40px;


    display:flex;


    gap:20px;


}





.btn{


    padding:

    15px 35px;



    border-radius:50px;


    font-weight:600;


    transition:.4s;


}







.btn-primary{


    background:

    linear-gradient(
    45deg,
    var(--primary),
    var(--secondary)
    );



    box-shadow:

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


}





.btn-primary:hover{


    transform:
    translateY(-8px);



}





.btn-outline{


    border:

    2px solid var(--primary);



}





.btn-outline:hover{


    background:var(--primary);


}



.hero-image{


    width:430px;


    height:430px;


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;



    background:

    var(--glass);



    backdrop-filter:blur(25px);

    

    border:1px solid var(--border);



    box-shadow:
var(--shadow);

}


.profile-card img{


        width: 100%;


    height:90%;


    border-radius:50%;


    object-fit:cover;


}


/* =========================
   SECTION TITLE
========================= */


.section-title{

    text-align:center;

    margin-bottom:70px;

}


.section-title h2{

    font-size:45px;

    font-weight:800;

    position:relative;

    display:inline-block;

}



.section-title h2::after{

    content:"";

    position:absolute;

    width:70%;

    height:4px;

    background:

    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary)
    );


    bottom:-15px;

    left:15%;

    border-radius:20px;

}



.section-title p{

    margin-top:25px;

    color:#94a3b8;

    font-size:18px;

}

.about{


    padding:

    100px 10%;


}

.about-container{


    display:flex;


    align-items:center;


    justify-content:center;


    gap:80px;


}


.about-image img{


    width:100%;


    height:100%;


    object-fit:cover;


    border-radius:20px;


}


.about-text{


    max-width:600px;


}

.about-text h3{


    font-size:35px;


    margin-bottom:20px;


    color:

    var(--cyan);


}

.about-text p{


    color:#010713;


    line-height:1.9;


    font-size:17px;
text-align: justify;

}


.info{


    margin-top:35px;


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:20px;


}


.info div{


    background:

    var(--glass);



    padding:20px;



    border-radius:15px;



    border:

    1px solid var(--border);



    transition:.4s;



}

.info div:hover{


    transform:

    translateY(-10px);


    box-shadow:

    var(--shadow);


}

.info h4{


    color:

    var(--primary);


}

.info span{


    color:#ddd;


    font-size:14px;


}


.achievement{


    padding:

    100px 10%;


}

.achievement-container{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);



    gap:25px;


}

.achievement-card{


    padding:35px 25px;



    text-align:center;



    background:

    var(--glass);



    border:

    1px solid var(--border);



    border-radius:25px;



    backdrop-filter:

    blur(20px);



    transition:.5s;



}

.achievement-card:hover{


    transform:

    translateY(-15px)
    rotateX(8deg);



    box-shadow:

    0 0 40px
    rgba(139,92,246,.5);


}

.achievement-card .icon{


    width:80px;


    height:80px;


    margin:auto;



    display:flex;


    justify-content:center;


    align-items:center;



    border-radius:50%;


    background:


    linear-gradient(
    45deg,
    var(--primary),
    var(--secondary)
    );



    font-size:35px;


    margin-bottom:25px;


}

.achievement-card h3{


    font-size:22px;


    margin-bottom:15px;


}

.achievement-card p{


    color:#b8c4dd;


    line-height:1.7;


}

.projects{

    padding:

    100px 10%;

}





.project-container{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:35px;


}


.project-card{


    background:

    var(--glass);



    border:

    1px solid var(--border);



    border-radius:25px;


    overflow:hidden;


    backdrop-filter:

    blur(20px);



    transition:.5s;



}


.project-card:hover{


    transform:

    translateY(-15px);



    box-shadow:

    var(--shadow);



}


.project-card img{


    width:100%;


    height:230px;


    object-fit:cover;


}




.project-content{


    padding:30px;


}


.project-content h3{


    font-size:25px;


    margin-bottom:15px;


}




.project-content p{


    color:#b8c4dd;


    line-height:1.7;


}





.tech{


    display:flex;


    flex-wrap:wrap;


    gap:10px;


    margin:20px 0;


}




.tech span{


    padding:

    7px 15px;


    background:

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



    border-radius:30px;



    color:

    var(--cyan);



    font-size:13px;


}