/*==================================================
                RESPONSIVE CSS
==================================================*/


/*==================================================
                1400px
==================================================*/

@media (max-width:1400px){

    .container{

        max-width:1200px;

    }

    .hero-name{

        font-size:58px;

    }

    .hero-title{

        font-size:32px;

    }

    .hero-description{

        font-size:18px;

    }

    .image-wrapper{

        width:380px;

        height:380px;

    }

}


/*==================================================
                1200px
==================================================*/

@media (max-width:1200px){

    .container{

        max-width:960px;

    }

    .navbar{

        padding:16px 28px;

    }

    .nav-links{

        gap:22px;

    }

    .nav-links a{

        font-size:15px;

    }

    .hero-name{

        font-size:52px;

    }

    .hero-title{

        font-size:28px;

    }

    .hero-description{

        font-size:17px;

    }

    .image-wrapper{

        width:340px;

        height:340px;

    }

    .project-card{

        gap:40px;

    }

}

/*==================================================
                992px
==================================================*/

@media (max-width:992px){

/*==========================
        GENERAL
==========================*/

.section-padding{

    padding:90px 0;

}

.section-title h2{

    font-size:42px;

}

.section-title p{

    font-size:17px;

}

/*==========================
        HEADER
==========================*/

.header{

    width:96%;

    top:12px;

}

.navbar{

    padding:15px 22px;

    position:relative;

}

.logo{

    font-size:28px;

}

.resume-btn{

    display:none;

}

.menu-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    width:46px;

    height:46px;

    border-radius:12px;

    background:rgba(255,255,255,.05);

    cursor:pointer;

}

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

.nav-links{

    position:absolute;

    top:110%;

    left:0;

    width:100%;

    flex-direction:column;

    gap:0;

    background:var(--surface);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:translateY(-20px);

    transition:.35s;

    box-shadow:0 25px 45px rgba(0,0,0,.35);

}

.nav-links li{

    width:100%;

}

.nav-links a{

    display:block;

    padding:18px;

    text-align:center;

}

.nav-links.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/*==========================
        HERO
==========================*/

.hero{

    text-align:center;

    padding-top:150px;

}

.hero .row{

    flex-direction:column-reverse;

}

.hero-image{

    margin-bottom:45px;

}

.image-wrapper{

    width:320px;

    height:320px;

    margin:auto;

}

.hero-name{

    font-size:48px;

}

.hero-title{

    font-size:28px;

}

.hero-description{

    max-width:700px;

    margin:25px auto;

}

.hero-social{

    justify-content:center;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}

.hero-stack{

    justify-content:center;

    margin-top:30px;

}

/*==========================
        STATS
==========================*/

.hero .row.mt-5{

    justify-content:center;

}

.stat-card{

    padding:22px;

}

.stat-card h3{

    font-size:34px;

}

}

/*==================================================
                768px
==================================================*/

@media (max-width:768px){

/*==========================
        GENERAL
==========================*/

.container{
    padding:0 20px;
}

.section-padding{
    padding:80px 0;
}

.section-title{
    margin-bottom:55px;
}

.section-title h6{
    font-size:14px;
}

.section-title h2{
    font-size:36px;
}

.section-title p{
    font-size:16px;
    line-height:1.8;
}

/*==========================
        HEADER
==========================*/

.header{
    width:95%;
    top:10px;
}

.navbar{
    padding:15px 20px;
    position:relative;
}

.logo{
    font-size:26px;
}

.resume-btn{
    display:none;
}

.menu-btn{
    display:flex;
    justify-content:center;
    align-items:center;
    width:46px;
    height:46px;
    border-radius:12px;
    background:rgba(255,255,255,.05);
}

.nav-links{

    position:absolute;
    top:110%;
    left:0;
    width:100%;

    display:flex;
    flex-direction:column;

    background:var(--surface);
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);

    overflow:hidden;

    opacity:0;
    visibility:hidden;
    transform:translateY(-20px);

    transition:.35s;
}

.nav-links li{
    width:100%;
}

.nav-links a{
    display:block;
    padding:18px;
    text-align:center;
}

.nav-links.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/*==========================
        HERO
==========================*/

.hero{

    min-height:auto;
    padding-top:130px;
    padding-bottom:70px;
    text-align:center;

}

.hero .row{

    flex-direction:column-reverse;
    align-items:center;
    gap:40px;

}

.hero-content{
    text-align:center;
}

.hero-image{
    display:flex;
    justify-content:center;
}

.image-wrapper{

    width:250px;
    height:250px;

}

.hero-name{

    font-size:42px;

}

.hero-title{

    font-size:24px;

}

.hero-description{

    font-size:16px;
    max-width:600px;
    margin:20px auto;

}

.hero-buttons{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;

}

.hero-social{

    justify-content:center;

}

.hero-stack{

    justify-content:center;
    flex-wrap:wrap;
    gap:10px;

}

/*==========================
        HERO STATS
==========================*/

.hero .row.mt-5{

    display:flex;
    flex-wrap:nowrap;
    gap:12px;

}

.hero .row.mt-5 .col-4{

    width:33.333%;
    padding:0;

}

.stat-card{

    width:100%;
    padding:18px 10px;
    min-height:110px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

}

.stat-card h3{

    font-size:28px;

}

.stat-card p{

    font-size:13px;
    text-align:center;

}

/*==========================
        ABOUT
==========================*/

.about{
    text-align:center;
}

.about-image{
    margin-bottom:35px;
}

.about-image img{

    width:260px;
    height:260px;

}

.about-name{

    font-size:34px;

}

.about-text{

    font-size:16px;
    line-height:1.9;

}

.about-list li{

    display:flex;
    align-items:flex-start;
    gap:10px;

    padding:18px 22px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

}
.about-stats{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:35px;

}

.about .btn{

    width:100%;
    margin-top:30px;

}

.about-list li strong{

    color:#fff;

    font-weight:600;

    white-space:nowrap;

}

.about-list li span{

    color:var(--text-light);

    text-align:left;

}

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

.skill-card{

    padding:25px;

}

.skill-card h3{

    text-align:center;

}

.skill-list{

    justify-content:center;
    gap:12px;

}

.education-timeline::before{



    display:none;



}

.education-card{



    padding:100px 30px 35px;



    text-align:center;



    overflow:visible;



}



.education-year{



    top:-45px;



    left:50%;



    transform:translateX(-50%);



    width:90px;



    height:90px;



    font-size:16px;



}



.education-content h3{



    font-size:28px;



}



.education-content h5{



    font-size:22px;



}



.education-content .score{



    display:inline-block;



}

/*==========================
        INTERNSHIP
==========================*/

section{
    scroll-margin-top:100px;
}
.internship{
    padding-top:120px;
}
.internship.section-padding{
    padding-top:120px;
}

.internship-card{

    padding:30px;

}

.internship-header{

    flex-direction:column;
    text-align:center;
    gap:18px;

}

.internship-location{
    text-align:center;
}

.internship-description{
    text-align:center;
    line-height:1.9;
    margin-top:20px;
    font-size:16px;
}

.internship-tech{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.internship-buttons{
    display:flex;
    flex-direction:column;
    gap:15px;
    margin-top:25px;
}

.internship-buttons .btn{
    width:100%;
}

/*==========================
        PROJECTS
==========================*/

.project-card{

    display:flex;
    flex-direction:column;
    gap:30px;
    padding:28px;

}

.project-image{

    width:100%;

}

.project-image img{

    width:100%;
    height:auto;
    display:block;

}

.project-details{

    width:100%;

}

.project-features{

    grid-template-columns:1fr;

}

.project-buttons{

    flex-direction:column;
    gap:15px;

}

.project-buttons .btn{

    width:100%;

}

/*==========================
        CERTIFICATES
==========================*/

.certificate-card{

    min-height:auto;

}

.certificate-image{

    height:220px;

}

.certificate-btn{

    width:100%;

}

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

.contact-card{

    padding:25px;

}

.contact-item{

    text-align:center;

}

.social-contact{

    justify-content:center;
    flex-wrap:wrap;

}

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

.footer{

    text-align:center;

}

.footer-social{

    justify-content:center;
    margin-top:20px;
    flex-wrap:wrap;

}

}
/*==================================================
                576px
==================================================*/

@media (max-width:576px){

/*==========================
        GENERAL
==========================*/

.project-card{

    display:flex;
    flex-direction:column;

}

.project-image{

    width:100%;
    margin-bottom:20px;

}

.project-image img{

    width:100%;
    height:auto;
    object-fit:cover;
    display:block;

}

.container{

    padding-left:18px;

    padding-right:18px;

}

.section-padding{

    padding:70px 0;

}

.section-title h2{

    font-size:30px;

}

.section-title p{

    font-size:15px;

}

/*==========================
        HEADER
==========================*/

.header{

    width:95%;

    top:10px;

}

.navbar{

    padding:14px 18px;

}

.logo{

    font-size:22px;

}

.menu-btn{

    width:42px;

    height:42px;

}

/*==========================
        HERO
==========================*/

.hero{

    padding-top:130px;

}

.image-wrapper{

    width:240px;

    height:240px;

}

.hero-name{

    font-size:38px;

}

.hero-title{

    font-size:22px;

}

.hero-description{

    font-size:15px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.hero-buttons .btn{

    width:100%;

    max-width:280px;

}

.hero-social{

    gap:12px;

}

.hero-social a{

    width:48px;

    height:48px;

    font-size:18px;

}

.hero-stack{

    justify-content:center;

}

.hero-stack span{

    font-size:13px;

    padding:8px 14px;

}

/*==========================
        HERO STATS
==========================*/

.hero .row.mt-5{

    display:flex;

    flex-wrap:nowrap;

    gap:10px;

}

.hero .row.mt-5 .col-4{

    width:33.333%;

    padding:0 4px;

}

.stat-card{

    padding:15px 8px;

}

.stat-card h3{

    font-size:24px;

}

.stat-card p{

    font-size:12px;

}

/*==========================
        PROJECTS
==========================*/

.project-card{

    padding:22px;

}

.project-image img{

    height:220px;

}

.project-details h3{

    font-size:24px;

}

.project-description{

    font-size:15px;

}

.project-features{

    grid-template-columns:1fr;

}

.project-buttons{

    flex-direction:column;

}

.project-buttons .btn{

    width:100%;

}

/*==========================
        CERTIFICATES
==========================*/

.certificate-card{

    min-height:auto;

}

.certificate-image{

    height:200px;

}

.certificate-content{

    padding:20px;

}

.certificate-content h5{

    min-height:auto;

    font-size:20px;

}

.certificate-btn{

    width:100%;

}

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

.contact-card{

    padding:25px;

}

.contact-item{

    padding:22px;

}

.social-contact{

    gap:14px;

    flex-wrap:wrap;

}

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

.footer{

    text-align:center;

}

.footer-social{

    justify-content:center;

    margin-top:25px;

    flex-wrap:wrap;

}

/*==========================
        GALLERY
==========================*/

#galleryImage{

    max-width:92vw;

    max-height:70vh;

}

#prevImage,
#nextImage{

    width:45px;

    height:45px;

    font-size:20px;

}

#closeGallery{

    top:15px;

    right:15px;

    font-size:34px;

}

#imageCounter{

    font-size:13px;

}

/*==========================
        SCROLL BUTTON
==========================*/

#scrollTopBtn{

    width:48px;

    height:48px;

    right:20px;

    bottom:20px;

}

}

/*==================================================
                400px
==================================================*/

@media (max-width:400px){

.hero-name{

    font-size:32px;

}

.hero-title{

    font-size:19px;

}

.hero-description{

    font-size:14px;

}

.image-wrapper{

    width:210px;

    height:210px;

}

.stat-card{

    padding:12px 5px;

}

.stat-card h3{

    font-size:20px;

}

.stat-card p{

    font-size:11px;

}

.skill-badge{

    font-size:12px;

    padding:8px 12px;

}

.project-image img{

    height:180px;

}

.certificate-image{

    height:180px;

}

.footer-social a{

    width:46px;

    height:46px;

    font-size:18px;

}

}