*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Trebuchet MS', Arial, sans-serif;
    scroll-behavior:smooth;
}

body{
    background:#000;
}

/* MAIN BACKGROUND */
.main{
    min-height:100vh;
    background:url(images/2.jpeg) center/cover no-repeat;
}

/* NAVBAR */
.nav-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 5%;
    border-bottom:1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
}

#webName{
    color:#fff;
}

/* NAV LINKS */
#nav-ele{
    display:flex;
    gap:15px;
}

#nav-ele li{
    list-style:none;
    padding:8px 15px;
    background:#dadada;
    border-radius:10px;
    transition:0.3s;
}

#nav-ele li:hover{
    background:#a0eade;
    box-shadow:0 5px 10px yellow;
    transform:scale(1.05);
}

a{
    text-decoration:none;
    color:black;
}

/* HAMBURGER */
#menu-btn{
    display:none;
    font-size:26px;
    color:white;
    cursor:pointer;
}

/* ABOUT */
#about{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:50px 5%;
    min-height:90vh;
}

#left{
    width:50%;
    color:#dadada;
}

#left h1{
    margin:10px 0;
}

#name{
    color:aqua;
}

#right{
    width:50%;
    display:flex;
    justify-content:center;
}

/* PROFILE IMAGE */
#pic{
    width:300px;
    height:300px;
    border-radius:50%;
    background:url(images/5.jpg) center/cover;
    box-shadow:0 10px 25px yellow;
    transition:0.3s;
}

#pic:hover{
    transform:scale(1.05);
}

/* RESUME BUTTON */
#resume{
    margin-top:20px;
    padding:10px 20px;
    background:#dadada;
    color: #000;
    border-radius:10px;
    font-weight:bold;
    display:inline-block;
    cursor:pointer;
    transition:0.3s;
}

#resume:hover{
    box-shadow:0 5px 15px yellow;
    transform:scale(1.05);
}

/* SKILLS */
#skills{
    background:#000;
    color:#fff;
    padding:60px 5%;
}

.tags{
    text-align:center;
    margin-bottom:30px;
    background:#dadada;
    color:#000;
    display:inline-block;
    padding:10px 25px;
    border-radius:10px;
    box-shadow:0 2px 10px white;
}

/* GRID */
.card{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

/* SKILL BOX */
.container{
    background:#26262e;
    padding:20px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 2px 10px rgba(255,255,255,0.2);
    transition:0.3s;
}

.container:hover{
    box-shadow:0 5px 15px yellow;
    transform:scale(1.07);
}

/* PROJECT */
#project{
    background:#000;
    color:#fff;
    padding:60px 5%;
}

.card-project{
    display:flex;
    gap:25px;
    flex-wrap:wrap;
}

/* PROJECT BOX */
.pro-box{
    flex:1 1 250px;
    text-align:center;
}

.pro-img{
    height:150px;
    background:url(images/10.png) center/cover;
    border-radius:10px;
    box-shadow:0 2px 10px white;
    transition:0.3s;
}

.pro-img:hover{
    box-shadow:0 5px 15px yellow;
    transform:scale(1.05);
}

/* CONTACT */
#contact{
    background:#000;
    color:#fff;
    padding:60px 5%;
    text-decoration: underline;
}

/* FOOTER */
#footer-box{
    text-align:center;
    padding:15px;
    background:#000;
    color:#dadada;
    border-top:1px solid #dadada;
}

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

/* TABLET */
@media(max-width:900px){

    #about{
        flex-direction:column;
        text-align:center;
    }

    #left, #right{
        width:100%;
    }

    #pic{
        margin-top:20px;
    }

    .card{
        grid-template-columns:repeat(2,1fr);
    }
}

/* MOBILE */
@media(max-width:600px){

    #menu-btn{
        display:block;
    }

    #nav-ele{
        position:absolute;
        top:70px;
        right:0;
        background:#000;
        flex-direction:column;
        width:200px;
        display:none;
        box-shadow:0 5px 15px rgba(0,0,0,0.5);
    }

    #nav-ele.active{
        display:flex;
    }

    #nav-ele li{
        margin:10px;
        text-align:center;
    }

    .card{
        grid-template-columns:1fr;
    }

    .card-project{
        flex-direction:column;
    }

    #pic{
        width:200px;
        height:200px;
    }
}