/* =====================================================
   SENIOR DEVELOPER PORTFOLIO
   STYLE.CSS PART 1

   - Reset
   - Variables
   - 3D Background
   - Loader
   - Navbar
   - Hero Section
===================================================== */


/* =========================
   GOOGLE FONT
========================= */

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



/* =========================
   RESET
========================= */

*{

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

}


html{

    scroll-behavior:smooth;

}


body{

    background:#214c33;
    color:#ffffff;
    overflow-x:hidden;

}



a{

    text-decoration:none;
    color:white;

}


img{

    max-width:100%;
    display:block;

}





/* =========================
   VARIABLES
========================= */


:root{


    --primary:#00f51d;

    --secondary:#77ff00;

    --cyan:#00f88c;


    --dark:#050816;


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


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



    --shadow:
    0 0 40px rgba(123, 255, 0, 0.4);


}








/* =========================
   3D BACKGROUND
========================= */


.background{


    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-1;


}





/* Moving Grid */

.grid{


    position:absolute;

    width:100%;

    height:100%;


    background-image:

    linear-gradient(
    rgba(255,255,255,.04) 1px,
    transparent 1px
    ),



    linear-gradient(
    90deg,
    rgba(255,255,255,.04) 1px,
    transparent 1px
    );


    background-size:
    70px 70px;



    animation:gridMove 25s linear infinite;


}





@keyframes gridMove{


    from{

        transform:translateY(0);

    }


    to{

        transform:translateY(70px);

    }


}








/* =========================
   GLOWING ORBS
========================= */


.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:#00ff99;


    top:-150px;

    left:-150px;


}




.orb:nth-child(2){


    width:350px;

    height:350px;


    background:#018653;


    right:-120px;

    top:200px;


}





.orb:nth-child(3){


    width:300px;

    height:300px;


    background:#00ff15;


    bottom:-120px;

    left:40%;


}






@keyframes floating{


    0%,100%{


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


    }


    50%{


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


    }


}










/* =========================
   LOADER
========================= */


.loader{


    position:fixed;

    inset:0;

    background:#050816;

    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);

    }


}









/* =========================
   NAVBAR
========================= */


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(5,8,22,.35);



    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 SECTION
========================= */


.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);


}










/* =========================
   PROFILE 3D CARD
========================= */


.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 SECTION
========================= */


.about{


    padding:

    100px 10%;


}





.about-container{


    display:flex;


    align-items:center;


    justify-content:center;


    gap:80px;


}




.about-image{


    width: 436px;
    height: 520px;


    border-radius:30px;


    padding:20px;



    background:

    rgba(255,255,255,.08);



    backdrop-filter:

    blur(20px);



    border:

    1px solid var(--border);



    box-shadow:

    var(--shadow);


}





.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:#b8c4dd;


    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;


}









/* =========================
   SKILLS SECTION
========================= */


.skills{


    padding:

    100px 10%;


}






.skills-container{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);



    gap:30px;


}






.skill-card{


    background:

    var(--glass);



    border:

    1px solid var(--border);



    padding:35px;



    border-radius:25px;



    text-align:center;



    backdrop-filter:

    blur(20px);



    transition:.4s;


}







.skill-card:hover{


    transform:

    translateY(-15px);



    box-shadow:

    var(--shadow);


}






.skill-card i{


    font-size:55px;


    color:

    var(--primary);



    margin-bottom:20px;


}






.skill-card h3{


    margin-bottom:20px;


    font-size:22px;


}







.skill-bar{


    width:100%;


    height:10px;


    background:

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



    border-radius:20px;


    overflow:hidden;


}




.skill-bar span{


    display:block;


    height:100%;


    background:


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


    border-radius:20px;


}



.skill-card p{


    margin-top:15px;


    color:#94a3b8;


}









/* =========================
   ACHIEVEMENT SECTION
========================= */


.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;


}











/* =========================
   STATISTICS
========================= */


.statistics{


    padding:

    80px 10%;


}





.stats-container{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);



    gap:30px;


}







.stat-box{


    text-align:center;


    padding:40px;


    background:

    var(--glass);



    border:

    1px solid var(--border);



    border-radius:25px;



    backdrop-filter:

    blur(20px);



    transition:.4s;


}






.stat-box:hover{


    transform:

    translateY(-10px);


    box-shadow:

    var(--shadow);


}






.stat-box h2{


    font-size:55px;


    color:

    var(--cyan);



}




.stat-box p{


    color:#94a3b8;


    font-size:18px;


}

/* =====================================================
   STYLE.CSS PART 3

   - Projects
   - Timeline
   - Services
   - Contact
   - Footer
   - Responsive Design
===================================================== */





/* =========================
   PROJECT SECTION
========================= */


.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;


}




.project-content a{


    display:inline-block;


    margin-top:10px;


    color:

    var(--primary);



    font-weight:600;


}









/* =========================
   EXPERIENCE TIMELINE
========================= */


.timeline-section{


    padding:

    100px 10%;


}





.timeline-container{


    position:relative;


    max-width:900px;


    margin:auto;


}




.timeline-container::before{


    content:"";


    position:absolute;


    left:50%;


    transform:translateX(-50%);



    width:3px;


    height:100%;


    background:


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


}







.timeline-item{


    width:50%;


    padding:30px;


    position:relative;


}





.timeline-item:nth-child(odd){


    left:0;


}





.timeline-item:nth-child(even){


    left:50%;


}






.timeline-dot{


    position:absolute;


    top:40px;



    width:20px;


    height:20px;



    background:

    var(--cyan);



    border-radius:50%;



    box-shadow:

    0 0 25px var(--cyan);



}






.timeline-item:nth-child(odd)
.timeline-dot{


    right:-10px;


}





.timeline-item:nth-child(even)
.timeline-dot{


    left:-10px;


}







.timeline-content{


    padding:30px;


    background:

    var(--glass);



    border:

    1px solid var(--border);



    border-radius:25px;


    backdrop-filter:

    blur(20px);



    transition:.4s;


}





.timeline-content:hover{


    transform:

    translateY(-10px);



    box-shadow:

    var(--shadow);



}





.timeline-content span{


    color:

    var(--cyan);



    font-weight:700;


}





.timeline-content h3{


    margin:15px 0;


}





.timeline-content p{


    color:#b8c4dd;


    line-height:1.7;


}










/* =========================
   SERVICES
========================= */


.services{


    padding:

    100px 10%;


}





.service-container{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);



    gap:30px;


}






.service-card{


    padding:40px;




    background:

    var(--glass);



    border:

    1px solid var(--border);



    border-radius:25px;



    transition:.4s;



}




.service-card:hover{


    transform:

    translateY(-15px);



    box-shadow:

    var(--shadow);



}





.service-card i{


    font-size:50px;


    color:

    var(--primary);



    margin-bottom:25px;


}




.service-card p{


    margin-top:15px;


    color:#b8c4dd;


    line-height:1.7;
text-align: justify;

}









/* =========================
   CONTACT
========================= */


.contact{


    padding:

    100px 10%;


}





.contact-container{


    display:grid;


    grid-template-columns:

    1fr 1fr;



    gap:50px;


}





.contact-info{


    padding:40px;


    background:

    var(--glass);



    border:

    1px solid var(--border);



    border-radius:25px;



    backdrop-filter:

    blur(20px);


}





.contact-info h3{


    font-size:35px;


}





.contact-info p{


    margin:20px 0;


    color:#b8c4dd;


}





.contact-box{


    display:flex;


    align-items:center;


    gap:20px;


    margin:25px 0;


}




.contact-box i{


    width:50px;


    height:50px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:50%;



    background:

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



}








.contact-form{


    display:flex;


    flex-direction:column;


    gap:20px;


}





.contact-form input,
.contact-form textarea{


    width:100%;


    padding:18px;


    border:none;


    outline:none;



    border-radius:15px;



    background:

    rgba(255,255,255,.08);



    color:white;



    border:

    1px solid var(--border);



}



.contact-form textarea{


    resize:none;


}









/* =========================
   FOOTER
========================= */


footer{


    padding:

    60px 10%;



    background:

    rgba(0,0,0,.3);



    text-align:center;


}



.footer-content h2{


    font-size:35px;


}



.footer-content span{


    color:

    var(--primary);


}





.footer-content p{


    color:#94a3b8;


    margin:20px 0;


}





.footer-social{


    display:flex;


    justify-content:center;


    gap:20px;


}





.footer-social a{


    width:45px;


    height:45px;


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;



    background:

    var(--glass);



    transition:.3s;


}





.footer-social a:hover{


    background:

    var(--primary);



    transform:

    translateY(-5px);


}







/* =========================
   BACK TO TOP
========================= */


.top-btn{


    position:fixed;


    right:30px;


    bottom:30px;


    width:50px;


    height:50px;


    display:flex;


    justify-content:center;


    align-items:center;



    border-radius:50%;



    background:

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



    box-shadow:

    var(--shadow);



}









/* =========================
   RESPONSIVE DESIGN
========================= */


@media(max-width:1100px){


.hero{

    flex-direction:column;

    text-align:center;

    gap:60px;

}



.skills-container,
.achievement-container,
.stats-container,
.project-container,
.service-container{


    grid-template-columns:

    repeat(2,1fr);


}



.about-container{


    flex-direction:column;


}



}




@media(max-width:768px){



header{


    padding:20px 5%;


}



nav{


    display:none;


}



.menu-btn{


    display:block;


}



.hero-text h1{


    font-size:45px;


}



.hero-text h2{


    font-size:25px;


}




.hero-image{


    width:300px;

    height:300px;


}





.skills-container,
.achievement-container,
.stats-container,
.project-container,
.service-container,
.contact-container{


    grid-template-columns:1fr;


}





.info{


    grid-template-columns:1fr;


}





.timeline-container::before{


    left:10px;


}





.timeline-item,
.timeline-item:nth-child(even){


    width:100%;

    left:0;

    padding-left:50px;


}





.timeline-item .timeline-dot,
.timeline-item:nth-child(even)
.timeline-dot{


    left:0;


}




.section-title h2{


    font-size:35px;


}



}
/* =========================
   LANDING PAGE BUTTON
========================= */

.home-button-container{
    margin-top:40px;
    display:flex;
    justify-content:center;
    align-items:center;
}


.home-btn{
    display:inline-block;
    padding:15px 35px;

    color:#ffffff;
    background:linear-gradient(
        45deg,
        var(--primary),
        var(--secondary)
    );

    border-radius:50px;

    font-weight:700;
    font-size:16px;

    border:2px solid rgba(255,255,255,0.3);

    box-shadow:
    0 0 30px rgba(0,255,29,0.5);

    transition:0.4s;

    position:relative;
    z-index:10;
}


.home-btn:hover{

    transform:translateY(-8px);

    box-shadow:
    0 0 50px rgba(0,255,29,0.8);

    color:white;

}