@media screen and (max-width:768px){

html{

font-size:15px;

}

body{

overflow-x:hidden;

}

.container{

width:92%;

margin:0 auto;

}

section{

padding:80px 0;

}

.section-header{

text-align:center;

margin-bottom:50px;

}

.section-title{

font-size:2.2rem;

line-height:1.3;

}

.section-tag{

font-size:.95rem;

}

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

height:75px;

padding:0 20px;

z-index:9999;

}

.navbar-container{

display:flex;

justify-content:space-between;

align-items:center;

height:100%;

}

.logo{

font-size:1.5rem;

white-space:nowrap;

}

.menu-toggle{

display:flex;

align-items:center;

justify-content:center;

width:45px;

height:45px;

background:transparent;

border:none;

cursor:pointer;

z-index:10000;

}

.nav-links{

position:fixed;

top:0;

right:-100%;

width:280px;

height:100vh;

background:#0b1220;

display:flex;

flex-direction:column;

justify-content:flex-start;

align-items:flex-start;

padding:100px 35px 40px;

gap:25px;

list-style:none;

transition:.35s ease;

z-index:9998;

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

}

.nav-links.active{

right:0;

}

.nav-links li{

width:100%;

}

.nav-links a{

display:block;

width:100%;

padding:8px 0;

font-size:1rem;

}

.hero{

padding:120px 0 70px;

min-height:auto;

}

.hero-container{

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

gap:55px;

}

.hero-left{

order:2;

width:100%;

}

.hero-right{

order:1;

width:100%;

}

.hero-image{

width:300px;

height:300px;

margin:auto;

}

.hero-image img{

width:210px;

height:auto;

}

.hero-glow{

width:260px;

height:260px;

}

.hero-name{

font-size:2.8rem;

line-height:1.15;

margin-bottom:20px;

}

.hero-title{

font-size:1rem;

}

.hero-description{

font-size:1rem;

line-height:1.8;

margin-bottom:30px;

padding:0 5px;

}

.hero-buttons{

display:flex;

flex-direction:column;

gap:15px;

width:100%;

}

.hero-buttons .btn{

width:100%;

justify-content:center;

}

.hero-stats{

display:grid;

grid-template-columns:1fr;

gap:15px;

margin-top:35px;

}

.stat-card{

width:100%;

}

.scroll-indicator{

display:none;

}

.tech{

width:46px;

height:46px;

}

.tech i{

font-size:1.3rem;

}

.tech img{

width:24px;

height:24px;

}

.tech-python{

top:-5px;

left:125px;

}

.tech-html{

top:45px;

right:0;

}

.tech-css{

top:165px;

right:-10px;

}

.tech-js{

bottom:15px;

right:20px;

}

.tech-mysql{

bottom:-8px;

left:120px;

}

.tech-flask{

top:45px;

left:0;

}

.tech-git{

top:165px;

left:-10px;

}

.tech-github{

top:80px;

left:35px;

}

}

.about{

padding:80px 0;

}

.about-container{

display:flex;

flex-direction:column;

align-items:center;

gap:45px;

}

.about-left{

width:100%;

display:flex;

justify-content:center;

}

.about-photo{

width:430px;

max-width:100%;

}

.about-right{

width:100%;

text-align:center;

}

.about-right h3{

font-size:2rem;

margin-bottom:20px;

}

.about-right p{

font-size:1rem;

line-height:1.9;

margin-bottom:22px;

}

.about-details{

display:grid;

grid-template-columns:1fr;

gap:18px;

margin-top:35px;

}

.detail-card{

width:100%;

padding:18px 20px;

display:flex;

justify-content:space-between;

align-items:center;

gap:15px;

border-radius:16px;

}

.detail-card h5{

font-size:1rem;

margin:0;

white-space:nowrap;

flex-shrink:0;

}

.detail-card span{

flex:1;

text-align:right;

font-size:.95rem;

word-break:break-word;

}

.about-highlights{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:12px;

margin-top:25px;

}

.about-highlights span{

padding:8px 16px;

font-size:.85rem;

}

.about-buttons{

display:flex;

flex-direction:column;

gap:15px;

margin-top:30px;

}

.about-buttons .btn{

width:100%;

justify-content:center;

}

.about-experience{

margin-top:35px;

text-align:center;

}

.about-experience h3{

font-size:1.8rem;

margin-bottom:8px;

}

.about-experience p{

font-size:.95rem;

line-height:1.7;

}

.skills{

padding:80px 0;

}

.skills-grid{

display:grid;

grid-template-columns:1fr;

gap:20px;

margin-top:50px;

}

.skill-card{

padding:25px;

text-align:center;

}

.skill-icon{

width:70px;

height:70px;

margin:0 auto 20px;

}

.skill-icon i{

font-size:2rem;

}

.skill-card h3{

font-size:1.2rem;

margin-bottom:15px;

}

.skill-card p{

font-size:.95rem;

line-height:1.8;

}

.skill-tags{

justify-content:center;

gap:10px;

margin-top:18px;

}

.skill-tags span{

font-size:.8rem;

padding:8px 14px;

}

.experience{

padding:80px 0;

}

.timeline{

margin-top:50px;

padding-left:20px;

}

.timeline::before{

left:10px;

}

.timeline-item{

width:100%;

left:0 !important;

padding-left:40px;

padding-right:0;

margin-bottom:45px;

text-align:left;

}

.timeline-item::before{

left:0;

right:auto;

width:18px;

height:18px;

}

.timeline-content{

padding:25px;

}

.timeline-content h3{

font-size:1.25rem;

line-height:1.4;

}

.timeline-content h4{

font-size:1rem;

margin-top:8px;

}

.timeline-date{

display:inline-block;

margin:15px 0;

font-size:.9rem;

}

.timeline-content p{

font-size:.95rem;

line-height:1.8;

}

.timeline-content ul{

margin-top:15px;

padding-left:20px;

}

.timeline-content li{

margin-bottom:10px;

line-height:1.7;

font-size:.95rem;

}

.education{

padding:80px 0;

}

.education-grid{

display:grid;

grid-template-columns:1fr;

gap:25px;

margin-top:50px;

}

.education-card{

padding:28px;

text-align:center;

}

.education-icon{

width:70px;

height:70px;

margin:0 auto 20px;

}

.education-icon i{

font-size:2rem;

}

.education-card h3{

font-size:1.25rem;

line-height:1.5;

margin-bottom:10px;

}

.education-card h4{

font-size:1rem;

margin-bottom:12px;

}

.education-card p{

font-size:.95rem;

line-height:1.8;

}

.education-year{

display:inline-block;

margin-top:15px;

font-size:.9rem;

padding:8px 18px;

}

.projects{

padding:80px 0;

}

.projects-grid{

display:grid;

grid-template-columns:1fr;

gap:30px;

margin-top:50px;

}

.project-card{

width:100%;

overflow:hidden;

border-radius:20px;

}

.project-image{

height:220px;

overflow:hidden;

}

.project-image img{

width:100%;

height:100%;

object-fit:cover;

}

.project-content{

padding:25px;

text-align:center;

}

.project-content h3{

font-size:1.4rem;

margin-bottom:15px;

}

.project-content p{

font-size:.95rem;

line-height:1.8;

margin-bottom:20px;

}

.project-tech{

justify-content:center;

flex-wrap:wrap;

gap:10px;

margin-bottom:22px;

}

.project-tech span{

padding:8px 14px;

font-size:.8rem;

}

.project-buttons{

display:flex;

flex-direction:column;

gap:15px;

}

.project-buttons .btn{

width:100%;

justify-content:center;

}

.gallery-modal{

padding:20px;

}

.gallery-content{

width:100%;

max-width:100%;

}

.gallery-image{

max-width:100%;

max-height:75vh;

object-fit:contain;

}

.gallery-close{

top:15px;

right:20px;

font-size:2rem;

}

.gallery-prev,

.gallery-next{

width:45px;

height:45px;

font-size:1.3rem;

}

.gallery-prev{

left:10px;

}

.gallery-next{

right:10px;

}

.gallery-counter{

font-size:.9rem;

padding:8px 15px;

}

.certificates{

padding:80px 0;

}

.certificates-grid{

display:grid;

grid-template-columns:1fr;

gap:30px;

margin-top:50px;

}

.certificate-card{

width:100%;

overflow:hidden;

border-radius:20px;

}

.certificate-image{

height:220px;

overflow:hidden;

}

.certificate-image img{

width:100%;

height:100%;

object-fit:cover;

}

.certificate-content{

padding:25px;

text-align:center;

}

.certificate-content h3{

font-size:1.25rem;

margin-bottom:12px;

}

.certificate-content p{

font-size:.95rem;

line-height:1.7;

margin-bottom:20px;

}

.certificate-content .btn{

width:100%;

justify-content:center;

}

.certificate-modal{

padding:20px;

}

.certificate-modal-content{

max-width:100%;

max-height:80vh;

object-fit:contain;

}

.certificate-close{

top:15px;

right:20px;

font-size:2rem;

}

footer{

padding:70px 0 25px;

}

.footer-content{

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

gap:40px;

}

.footer-brand{

max-width:650px;

}

.footer-brand h2{

font-size:2rem;

margin-bottom:15px;

}

.footer-brand p{

line-height:1.8;

margin-bottom:25px;

}

.footer-social{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.footer-links{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

width:100%;

}

.footer-column{

text-align:center;

}

.footer-column h3{

margin-bottom:18px;

}

.footer-column ul{

padding:0;

margin:0;

list-style:none;

}

.footer-column ul li{

margin-bottom:12px;

}

.footer-bottom{

margin-top:40px;

padding-top:25px;

text-align:center;

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

}

@media(max-width:480px){

.footer-links{

grid-template-columns:1fr;

gap:25px;

}

.footer-brand h2{

font-size:1.7rem;

}

.footer-brand p{

font-size:.95rem;

}

.footer-social{

justify-content:center;

}

}

footer{

padding:70px 0 25px;

}

.footer-content{

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

gap:45px;

}

.footer-brand{

max-width:600px;

}

.footer-brand h2{

font-size:2rem;

margin-bottom:15px;

}

.footer-brand p{

font-size:.95rem;

line-height:1.8;

margin-bottom:25px;

}

.footer-social{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.footer-social a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:1.2rem;

}

.footer-links{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

width:100%;

}

.footer-column{

text-align:center;

}

.footer-column h3{

font-size:1.15rem;

margin-bottom:18px;

}

.footer-column ul{

list-style:none;

padding:0;

margin:0;

}

.footer-column ul li{

margin-bottom:12px;

}

.footer-column ul li a{

font-size:.95rem;

}

.footer-bottom{

margin-top:45px;

padding-top:25px;

text-align:center;

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

}

.footer-bottom p{

font-size:.9rem;

line-height:1.7;

}

@media screen and (max-width:480px){

.container{

width:94%;

}

.hero{

padding:110px 0 60px;

}

.hero-image{

width:260px;

height:260px;

}

.hero-image img{

width:185px;

}

.hero-glow{

width:220px;

height:220px;

}

.hero-name{

font-size:2.3rem;

}

.hero-description{

font-size:.95rem;

}

.tech{

width:42px;

height:42px;

}

.tech i{

font-size:1.15rem;

}

.tech img{

width:20px;

height:20px;

}

.tech-python{

top:-5px;

left:110px;

}

.tech-html{

top:40px;

right:-5px;

}

.tech-css{

top:145px;

right:-10px;

}

.tech-js{

bottom:10px;

right:10px;

}

.tech-mysql{

bottom:-8px;

left:105px;

}

.tech-flask{

top:40px;

left:-5px;

}

.tech-git{

top:145px;

left:-10px;

}

.tech-github{

top:80px;

left:25px;

}

.section-title{

font-size:2rem;

}

.about-photo{

width:200px;

}

.footer-links{

grid-template-columns:1fr;

gap:25px;

}

}

@media screen and (max-width:390px){

.logo{

font-size:1.35rem;

}

.nav-links{

width:250px;

padding:90px 25px 30px;

}

.hero-name{

font-size:2rem;

}

.hero-image{

width:235px;

height:235px;

}

.hero-image img{

width:170px;

}

.hero-glow{

width:200px;

height:200px;

}

.hero-description{

font-size:.92rem;

}

.hero-buttons .btn{

padding:14px 20px;

font-size:.95rem;

}

.section-title{

font-size:1.8rem;

}

.project-content,

.certificate-content,

.timeline-content,

.contact-form,

.education-card,

.skill-card{

padding:20px;

}

.contact-card{

padding:18px;

}

.footer-brand h2{

font-size:1.7rem;

}

}

@media screen and (max-width:360px){

.hero-name{

font-size:1.8rem;

}

.hero-image{

width:220px;

height:220px;

}

.hero-image img{

width:160px;

}

.hero-glow{

width:185px;

height:185px;

}

.tech{

width:38px;

height:38px;

}

.tech i{

font-size:1rem;

}

.tech img{

width:18px;

height:18px;

}

.section-title{

font-size:1.7rem;

}

.detail-card{

padding:15px;

}

.contact-card{

flex-direction:column;

text-align:center;

}

.contact-card i{

margin-bottom:10px;

}

.footer-social a{

width:42px;

height:42px;

}

}

@media screen and (max-width:320px){

.logo{

font-size:1.2rem;

}

.hero-name{

font-size:1.6rem;

}

.hero-image{

width:200px;

height:200px;

}

.hero-image img{

width:145px;

}

.hero-glow{

width:170px;

height:170px;

}

.hero-description{

font-size:.9rem;

}

.hero-buttons .btn{

font-size:.9rem;

padding:12px 18px;

}

.section-title{

font-size:1.5rem;

}

.timeline-content,

.project-content,

.certificate-content,

.contact-form,

.education-card,

.skill-card{

padding:18px;

}

.footer-brand h2{

font-size:1.5rem;

}

.footer-bottom p{

font-size:.8rem;

}

}