*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

body{
background:#000;
color:#fff;
line-height:1.8;
}

section{
max-width:1100px;
margin:auto;
padding:100px 20px;
}

.hero{
text-align:center;
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
}

.profile{
width:180px;
height:180px;
border-radius:50%;
object-fit:cover;
margin:auto;
margin-bottom:25px;
}

.hero h1{
font-size:5rem;
font-weight:800;
}

.info{
display:flex;
justify-content:center;
gap:20px;
margin:20px 0;
color:#aaa;
}

.subtitle{
font-size:1.2rem;
}

h2{
color:#c8b39b;
letter-spacing:2px;
margin-bottom:40px;
}

.summary p{
max-width:800px;
}

.timeline{
border-left:2px solid #222;
padding-left:30px;
}

.timeline-item{
margin-bottom:40px;
}

.timeline-item ul{
padding-left:20px;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
text-align:center;
}

.grid h1{
font-size:4rem;
}

.timer-box{
background:#111;
border:1px solid #222;
border-radius:25px;
padding:40px;
display:flex;
justify-content:center;
align-items:center;
gap:20px;
}

.timer-box h1{
font-size:4rem;
}

.timer-box button{
width:60px;
height:60px;
border:none;
border-radius:50%;
font-size:22px;
cursor:pointer;
}

footer{
text-align:center;
padding:50px 0 120px;
}

.social-bar{
position:fixed;
bottom:25px;
left:50%;
transform:translateX(-50%);
background:#111;
border:1px solid #222;
padding:15px 30px;
border-radius:50px;
display:flex;
gap:30px;
backdrop-filter:blur(15px);
}

.social-bar a{
color:white;
font-size:20px;
transition:.3s;
}

.social-bar a:hover{
transform:translateY(-4px);
}

@media(max-width:768px){

.hero h1{
font-size:3rem;
}

.info{
flex-direction:column;
gap:5px;
}

.timer-box{
flex-direction:column;
}

.social-bar{
gap:15px;
padding:12px 20px;
}

}
#theme-toggle{
position:fixed;
top:20px;
right:20px;
width:50px;
height:50px;
border:none;
border-radius:50%;
background:#111;
color:white;
font-size:20px;
cursor:pointer;
z-index:1000;
border:1px solid #333;
}

.light-mode{
background:#ffffff;
color:#111111;
}

.light-mode .social-bar{
background:#f5f5f5;
border:1px solid #ddd;
}

.light-mode .timer-box{
background:#f5f5f5;
border:1px solid #ddd;
}

.light-mode .social-bar a{
color:#111;
}

.light-mode h2{
color:#8b5e3c;
}

.light-mode #theme-toggle{
background:#fff;
color:#111;
border:1px solid #ddd;
}




/* ______________________________This line of  code is used to control the size of my image ______________________________________*/
.profile-img{
    width:200px;
    max-width:100%;
    height:auto;

    display:block;
    margin:0 auto 30px;

    object-fit:contain;

    border:none;
    border-radius:0;
    box-shadow:none;

    transition:0.4s ease;
}

.profile-img:hover{
    transform:scale(1.03);
}
    

/*______________________  This Line of code Is used for control opacity of image from  lower part from my image _______________________*/ 
.profile-img{
width:200px;
height:auto;
-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 50%,rgba(0,0,0,0));
mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 50%,rgba(0,0,0,0));
}

/* ________________________________This Line of Code is add to  Qr button  ________________________________________________________*/


.qr-btn{
    color:white;
    font-size:20px;
    transition:.3s;
    text-decoration:none;
}

.qr-btn:hover{
    transform:translateY(-4px);
}

.popup{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.85);
    justify-content:center;
    align-items:center;
    z-index:1000;
}

.popup-content{
    background:#111;
    padding:30px;
    border-radius:10px;
    text-align:center;
    position:relative;
}

.popup-content img{
    width:350px;
    height:350px;
    object-fit:contain;
    background:rgb(6, 6, 6);
    padding:10px;
    border-radius:10px;
}

.close{
    position:absolute;
    top:5px;
    right:5px;
    color:rgb(248, 246, 246);
    font-size:30px;
    cursor:pointer;
}

.popup-content h4{
    color:white;
}

/*_________________________________Lofi Player________________________________________________  */ 
.lofi-player{
    cursor:pointer;
    color:#aaa;
    transition:0.3s;
    user-select:none;
}

.lofi-player:hover{
    color:white;
}

.lofi-player.playing{
    color:#c8b39b;
    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    0%{opacity:1;}
    50%{opacity:0.5;}
    100%{opacity:1;}
}


.playing{
    color:#c8b39b;
}

.playing i{
    animation:pulse 1s infinite;
}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.2);}
    100%{transform:scale(1);}
}



/*___________________________________________________________________________________________________________*/

/* Floating Buttons */

.floating-btn{
    position: fixed;
    right: 20px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border:1px solid rgba(255,255,255,.5);
    background:#111;
    color:#fff;
    cursor:pointer;

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

    font-size:22px;

    transition:.3s;
    z-index:999;
}

/* Theme Button */
#theme-toggle{
    top:20px;
}

/* Dashboard Button */
.dashboard-btn{
    top:80px;   /* below theme button */
}

.floating-btn:hover{
    transform:scale(1.1);
    background:#fff;
    color:#000;
}