/* ================================
   Toufikul Alam Portfolio
   Main Styling
================================ */


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



/* ================================
   Global Variables
================================ */

:root {

    --bg: #0B1120;

    --primary: #3B82F6;

    --secondary: #38BDF8;

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

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

    --text: #ffffff;

    --gray: #cbd5e1;

    --shadow:
    0 10px 30px rgba(0,0,0,0.3);

}





/* ================================
   Reset
================================ */

* {

    margin:0;
    padding:0;

    box-sizing:border-box;

    scroll-behavior:smooth;

}



body {

    font-family:'Poppins',sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

}




a {

    text-decoration:none;

    color:white;

}



ul {

    list-style:none;

}






/* ================================
   Navbar
================================ */


header {

    position:fixed;

    top:0;

    width:100%;

    z-index:1000;

}




.navbar {

    width:90%;

    margin:auto;

    margin-top:20px;

    padding:15px 30px;


    display:flex;

    justify-content:space-between;

    align-items:center;


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

    backdrop-filter:blur(15px);


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

    border-radius:20px;


}



.logo {

    font-size:28px;

    font-weight:700;

}



.logo span {

    color:var(--secondary);

}





.nav-links {

    display:flex;

    gap:30px;

}



.nav-links a {

    color:var(--gray);

    transition:.3s;

}



.nav-links a:hover {

    color:var(--secondary);

}




.menu-icon {

    display:none;

    font-size:28px;

    cursor:pointer;

}









/* ================================
   Hero Section
================================ */


.hero {

    height:100vh;

    min-height:700px;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    text-align:center;

    overflow:hidden;


}



#particles-js {

    position:absolute;

    width:100%;

    height:100%;

    top:0;

    left:0;

}




.hero-content {

    z-index:2;

}




.profile-container {

    margin-bottom:20px;

}




.profile-image {

    width:170px;

    height:170px;

    border-radius:50%;

    object-fit:cover;


    border:4px solid var(--primary);


    box-shadow:

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

}




.hero h1 {

    font-size:55px;

    font-weight:800;

}



.hero h2 {

    margin-top:15px;

    font-size:20px;

    color:var(--gray);

}


.hero h2 span {

    color:var(--secondary);

}




.hero h3 {

    margin-top:15px;

    color:var(--secondary);

    font-size:28px;

}





/* Buttons */


.hero-buttons {

    margin-top:35px;

    display:flex;

    justify-content:center;

    gap:20px;

}




.btn {

    padding:12px 28px;

    border-radius:30px;

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

    transition:.3s;

    background:transparent;

}




.btn:hover {

    background:var(--primary);

    transform:translateY(-5px);

}



.btn.primary {

    background:var(--primary);

}







/* ================================
 Sections
================================ */


.section {

    padding:100px 8%;

}



.container {

    max-width:1200px;

    margin:auto;

}




.section-title {

    text-align:center;

    font-size:40px;

    margin-bottom:50px;


    color:white;

}



.section-title::after {

    content:"";

    display:block;

    width:70px;

    height:4px;

    background:var(--secondary);

    margin:15px auto;

    border-radius:10px;

}







/* ================================
 Glass Cards
================================ */


.card {

    background:var(--card);

    backdrop-filter:blur(15px);

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

    border-radius:20px;

    padding:30px;

    box-shadow:var(--shadow);


    transition:.4s;

}



.card:hover {

    transform:translateY(-10px);

    border-color:var(--secondary);

}





/* ================================
 Skills Grid
================================ */


.skills-grid {


    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(160px,1fr));


    gap:25px;

}



.skill-card {

    text-align:center;

}




.skill-card img {

    width:55px;

    height:55px;

    margin-bottom:15px;

}







/* ================================
 Experience
================================ */


.experience-grid {


    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(300px,1fr));


    gap:30px;

}





/* ================================
 Learning Timeline
================================ */


.timeline {

    border-left:3px solid var(--primary);

    padding-left:30px;

}



.timeline-item {

    margin-bottom:30px;

    position:relative;

}



.timeline-item::before {

    content:"";

    position:absolute;

    left:-42px;

    top:5px;


    width:18px;

    height:18px;


    background:var(--secondary);

    border-radius:50%;


}






/* ================================
 Contact
================================ */


.contact-box {

    text-align:center;

}




.contact-box img {

    width:35px;

    margin-right:10px;

}




.contact-item {

    margin:20px;

    font-size:18px;

}






/* ================================
 Footer
================================ */


footer {

    text-align:center;

    padding:30px;

    background:

    rgba(255,255,255,0.05);


    color:var(--gray);

}








/* ================================
 Animations
================================ */


@keyframes floating {


    0% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-15px);

    }


    100% {

        transform:translateY(0);

    }

}



.profile-image {

    animation:floating 4s infinite;

}







/* ================================
 Responsive Design
================================ */


@media(max-width:768px){


    .navbar {

        width:95%;

    }



    .nav-links {


        position:absolute;

        top:70px;

        right:0;


        width:220px;


        flex-direction:column;

        padding:30px;


        background:#111827;


        border-radius:20px;


        display:none;


    }



    .nav-links.active {

        display:flex;

    }




    .menu-icon {

        display:block;

    }





    .hero h1 {

        font-size:38px;

    }




    .hero h2 {

        font-size:16px;

    }



    .hero h3 {

        font-size:22px;

    }




    .hero-buttons {

        flex-direction:column;

        align-items:center;

    }



    .section-title {

        font-size:32px;

    }



}

.about-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

}



.about-card h3{

    color:var(--secondary);

    margin-bottom:20px;

    font-size:24px;

}



.about-card p{

    color:var(--gray);

    line-height:1.8;

    margin-bottom:15px;

}



.education-item h4{

    margin-bottom:10px;

    color:white;

}

.role{

    color:var(--secondary);

    font-weight:500;

    margin:10px 0;

}



.experience-list{

    margin-top:20px;

    padding-left:20px;

}



.experience-list li{

    color:var(--gray);

    margin-bottom:12px;

}



.project{

    margin-top:25px;

    padding:20px;

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

    border-radius:15px;

}



.project h4{

    color:white;

    margin-bottom:10px;

}



.project p{

    color:var(--gray);

}



.project-link{

    display:inline-block;

    margin-top:12px;

    color:var(--secondary);

    transition:.3s;

}



.project-link:hover{

    color:var(--primary);

}

.skill-card{

    text-align:center;

    min-height:220px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}



.skill-card img{

    width:65px;

    height:65px;

    object-fit:contain;

    margin-bottom:20px;

}



.skill-card h3{

    color:white;

    margin-bottom:10px;

}



.skill-card p{

    color:var(--gray);

    font-size:14px;

}



.skill-card:hover img{

    transform:scale(1.15);

    transition:.3s;

}

.learning-container{

    max-width:900px;

    margin:auto;

}



.timeline .card{

    padding:25px;

}



.timeline .card h3{

    color:var(--secondary);

    margin-bottom:15px;

}



.timeline .card p{

    color:var(--gray);

    line-height:1.7;

}

.contact-box{

    max-width:700px;

    margin:auto;

}



.contact-box h3{

    font-size:30px;

    color:var(--secondary);

    margin-bottom:20px;

}



.contact-box p{

    color:var(--gray);

    line-height:1.7;

    margin-bottom:30px;

}



.contact-item{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

}



.contact-item img{

    width:35px;

    height:35px;

}



.contact-item a{

    color:white;

    font-size:18px;

    transition:.3s;

}



.contact-item a:hover{

    color:var(--secondary);

}