@import url('styles.css');

.portfolio-hero{text-align:center;padding:90px 20px 70px;animation:fadeUp 1s ease}
.portfolio-title{font-size:clamp(3rem,5vw,5rem);font-weight:800;margin-bottom:20px}
.portfolio-title span{color:var(--teal)}
.portfolio-desc{max-width:800px;margin:auto;color:var(--text-gray);margin-bottom:40px}
.stat-card,.browser-frame,.project-content{background:var(--glass);backdrop-filter:blur(18px);border:1px solid rgba(15,148,176,.12);border-radius:24px;box-shadow:0 20px 45px rgba(0,21,59,.08)}
.stat-card{padding:25px;text-align:center}
.portfolio-projects{padding:80px}
.project-row{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin-bottom:100px}
.reverse .browser-frame{order:2}
.browser-frame{overflow:hidden;transition:.4s}
.browser-frame:hover{transform:translateY(-10px)}
.browser-bar{height:50px;background:#eef5f9;display:flex;align-items:center;padding:0 18px;gap:8px}
.browser-bar span{width:12px;height:12px;border-radius:50%;background:#b7c4cf}
.browser-content{height:320px;background:linear-gradient(135deg,#dff7ff,#bdeef8)}
.project-content{padding:30px}
.project-tag{display:inline-block;background:#0f94b0;color:#fff;padding:8px 18px;border-radius:30px;margin-bottom:15px}
.project-content ul{padding-left:20px;line-height:2}
.project-content a{
    margin-left: 75%;
    text-decoration: none;
    background-color:#0f94b0;
    padding: 5px 10px;
    border-radius: 10px;
    color: #dff7ff;
    font-weight: 600;
    box-shadow: 2px 4px 10px rgba(0,21,59,.5);
}
.project-content a:hover{
background-color: #dff7ff;
color: #0f94b0;
padding: 8px 16px;
font-size: 20px;
transition-duration: .5s;
border-radius: 20px;
}
@media(max-width:991px){.project-row{grid-template-columns:1fr}.reverse .browser-frame{order:0}.portfolio-projects{padding:60px 20px}}

@media(max-width:450px){

.project-content a{
    margin-left: 75%;
   
}
}
@media(max-width:382px){

.project-content a{
    margin-left: 35%;
    
   
}
}

.browser-frame{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

.browser-content{
    max-height:420px;
    overflow:auto;
}

.browser-content img{
    width:100%;
    height:auto;
    display:block;
}