/* =========================
GLOBAL STYLES
========================= */

body{
margin:0;
background:black;
color:white;
font-family:Inter, sans-serif;
overflow-x:hidden;
cursor:none;
}

/* Background canvas */

canvas{
position:fixed;
top:0;
left:0;
z-index:-1;
}


/* =========================
CURSOR
========================= */

.cursor{
width:15px;
height:15px;
border:2px solid cyan;
border-radius:50%;
position:fixed;
pointer-events:none;
z-index:999;
}

.cursor-trail{
width:40px;
height:40px;
background:rgba(0,255,255,0.1);
border-radius:50%;
position:fixed;
pointer-events:none;
z-index:998;
}


/* =========================
NAVBAR
========================= */

.navbar{
position:fixed;
top:0;
width:100%;
background:rgba(0,0,0,0.4);
backdrop-filter:blur(15px);
z-index:100;
}

.navbar a{
transition:0.3s;
}

.navbar a:hover{
color:#00ffff;
}

@keyframes flow {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

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

.hero-title{
font-family:Orbitron;
font-size:clamp(3rem,7vw,7rem);
background:linear-gradient(90deg,#ffffff,#00ffff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}


/* =========================
COMMON SECTION
========================= */

.section{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:80px 20px;
}


/* =========================
GLASS CARD (ABOUT)
========================= */

.glass-card{
background:rgba(255,255,255,0.03);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,0.1);
border-radius:15px;
padding:40px;
max-width:1000px;
transition:0.4s;
box-shadow:0 0 40px rgba(0,255,255,0.3);
}

.glass-card:hover{
box-shadow:0 0 40px rgba(0,255,255,0.3);
transform:translateY(-5px);
}


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

.about-title{
font-family:Orbitron;
font-size:2.5rem;
background:linear-gradient(90deg,#00ffff,#ffffff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.highlight{
color:#00ffff;
font-weight:600;
}


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

.skills-wrapper{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:100px 20px;
}

.skills-section{
position:relative;
width:100%;
max-width:1150px;
border-radius:20px;
padding:70px 50px;
background:rgba(255,255,255,0.03);
backdrop-filter:blur(20px);
border:1px solid rgba(148,163,184,0.15);
box-shadow:0 0 40px rgba(0,255,255,0.3);
overflow:hidden;
}

#skillsCanvas{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
}

.skills-content{
position:relative;
z-index:2;
}


/* Section title (shared) */

.section-title{
font-family:Orbitron;
font-size:3rem;
text-align:center;
margin-bottom:60px;
background:linear-gradient(90deg,#00ffff,#ffffff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}


/* Skill category */

.category{
margin-bottom:50px;
}

.category-title{
text-align:center;
font-size:1.5rem;
margin-bottom:25px;
color:#fff;
letter-spacing:1px;
}


/* Skill cards */

.skill-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:25px;
}

.skill-card{
width:110px;
height:110px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border-radius:14px;
background:rgba(255,255,255,0.03);
border:1px solid #00ffff;
transition:all 0.35s ease;
}

.skill-card:hover{
transform:translateY(-10px) scale(1.08);
background:rgba(255,255,255,0.06);
border-color:#00ffff;
box-shadow:0 10px 40px rgba(0,255,255,0.2);
}

.skill-card i{
font-size:42px;
margin-bottom:10px;
}

.skill-card span{
font-size:12px;
color:#cbd5e1;
text-align:center;
}


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

.projects-wrapper{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:100px 20px;
}

.projects-section{
position:relative;
width:100%;
max-width:1200px;
padding:70px 50px;
border-radius:20px;
background:rgba(255,255,255,0.03);
backdrop-filter:blur(20px);
border:1px solid rgba(148,163,184,0.15);
box-shadow:0 0 40px rgba(0,255,255,0.3);
overflow:hidden;
}

#projectsCanvas{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
}

.projects-content{
position:relative;
z-index:2;
}

/* FIX mobile jitter permanently */

.video-container{

position:relative;
width:100%;
padding-top:56.25%; /* 16:9 ratio */

overflow:hidden;

border-radius:10px;

}


.video-container iframe{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

border:none;

}



.project-row{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:30px;
padding:30px;
border-radius:15px;
background:rgba(1,20,30,0.76);
border:1px solid #00ffff;;
margin-bottom:40px;
transition:0.4s;
}

.project-row:hover{
border-color:#00ffff;
box-shadow:0 0 50px rgba(0,255,255,0.15);
transform:translateY(-5px);
}

.project-video iframe{
width:100%;
height:280px;
border:none;
border-radius:10px;
}

.project-info h3{
color:#00ffff;
font-size:1.7rem;
margin-bottom:10px;
}

.project-info p{
color:#cbd5e1;
margin-bottom:15px;
line-height:1.7;
}

.project-features li{
color:#94a3b8;
font-size:14px;
margin-bottom:5px;
}

.project-links a{
display:inline-block;
margin-right:15px;
padding:8px 18px;
border-radius:8px;
border:1px solid #00ffff;
transition:0.3s;
}

.project-links a:hover{
background:#00ffff;
color:black;
}

/* =========================
MOBILE PROJECT SECTION REDESIGN
========================= */

@media (max-width:768px){

  /* wrapper spacing */

  .projects-wrapper{
    padding:60px 15px;
    align-items:flex-start;
  }


  /* main container */

  .projects-section{
    padding:25px 15px;
    border-radius:15px;
    backdrop-filter: blur(8px);
    box-shadow:0 0 20px rgba(0,255,255,0.15);
  }


  /* stack layout vertically */

  .project-row{
    display:flex;
    flex-direction:column;
    gap:15px;
    padding:15px;
    border-radius:12px;
    margin-bottom:25px;
    transform:none;
  }


  /* remove hover animation on mobile */

  .project-row:hover{
    transform:none;
    box-shadow:0 0 20px rgba(0,255,255,0.1);
  }


  /* responsive video container */

  .project-video{
    width:100%;
    border-radius:10px;
    overflow:hidden;
  }


  /* FIXED VIDEO CONTAINER METHOD */

  .video-container{
    position:relative;
    width:100%;
    padding-top:56.25%; /* 16:9 ratio */
    overflow:hidden;
    border-radius:10px;
  }

  .video-container iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:none;
    border-radius:10px;
  }


  /* project info */

  .project-info h3{
    font-size:1.2rem;
    line-height:1.4;
  }

  .project-info p{
    font-size:14px;
    line-height:1.6;
  }


  /* features list */

  .project-features li{
    font-size:13px;
  }


  /* buttons */

  .project-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }

  .project-links a{
    padding:6px 14px;
    font-size:13px;
  }


  /* section title */

  .projects-section .section-title{
    font-size:1.8rem;
    margin-bottom:30px;
  }

}
/* =========================
CONTACT SECTION
========================= */

.contact-section{
background:#020617;
padding:80px 20px;
}

.contact-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}


/* Contact cards */

.contact-info,
.contact-form-container{

background:rgba(255,255,255,0.05);

border:1px solid rgba(0,255,255,0.2);

border-radius:20px;

padding:40px;

backdrop-filter:blur(20px);

box-shadow:0 0 40px rgba(0,255,255,0.3);

}


/* Title */

.contact-title{

font-size:2.5rem;

font-family:Orbitron;

color:#00ffff;

margin-bottom:20px;

}


/* Description */

.contact-description{

color:#cbd5e1;

margin-bottom:30px;

line-height:1.6;

}


/* Contact details */

.contact-details{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-label{

color:#00ffff;

font-weight:600;

}

.contact-value{

color:#e2e8f0;

}


/* Form */

.contact-form{

display:flex;

flex-direction:column;

gap:15px;

}

.contact-input,
.contact-textarea{

width:100%;

padding:12px;

border-radius:10px;

background:rgba(0,0,0,0.4);

border:1px solid rgba(0,255,255,0.2);

color:white;

outline:none;

transition:0.3s;

}

.contact-input:focus,
.contact-textarea:focus{

border-color:#00ffff;

box-shadow:0 0 10px rgba(0,255,255,0.3);

}

.contact-textarea{

height:120px;

resize:none;

}


/* Button */

.contact-button{

padding:12px;

border-radius:10px;

border:1px solid #00ffff;

color:#00ffff;

background:transparent;

font-weight:600;

cursor:pointer;

transition:0.3s;

}

.contact-button:hover{

background:#00ffff;

color:black;

}


/* Status */

.contact-status{

color:#00ffcc;

margin-top:10px;

}

.hidden{
display:none;
}


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

@media(max-width:900px){

.contact-container{

grid-template-columns:1fr;

}

.contact-title{

font-size:2rem;

}

}



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

#scrollTopBtn{
position:fixed;
bottom:30px;
right:30px;
border:1px solid #00ffff;
background:transparent;
color:#00ffff;
border-radius:50%;
padding:10px 15px;
cursor:pointer;
transition:0.3s;
}

#scrollTopBtn:hover{
background:#00ffff;
color:black;
}


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

/* Tablet */

@media(max-width:1024px){

.hero-title{
font-size:clamp(2.5rem,6vw,5rem);
}

.section-title{
font-size:2.5rem;
}

.skills-section,
.projects-section{
padding:50px 30px;
}

}


/* Mobile */

@media(max-width:768px){

.navbar{
padding:10px;
}

.hero-title{
font-size:clamp(2rem,5vw,4rem);
}

.section{
padding:60px 15px;
}

.glass-card{
padding:25px;
}

.project-row{
grid-template-columns:1fr;
}

.project-video iframe{
height:220px;
}

.skill-card{
width:90px;
height:90px;
}

.skill-card i{
font-size:32px;
}

.section-title{
font-size:2rem;
}

}


/* Small Mobile */

@media(max-width:480px){

.hero-title{
font-size:2rem;
}

.section-title{
font-size:1.7rem;
}

.skill-grid{
gap:15px;
}

.skill-card{
width:80px;
height:80px;
}

.skill-card i{
font-size:28px;
}

}





/* Sidebar Container */
.social-sidebar {
  position: fixed;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 25px;
  z-index: 1000;
}

/* Hide Sidebar on Mobile */
@media (max-width: 768px) {
  .social-sidebar {
    display: none;
  }
}

/* Icon Base */
.social-sidebar .icon {
  width: 45px;
  height: 45px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: white;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: 0.4s ease;
  position: relative;
  overflow: hidden;
}

/* Neon Glow Colors */
.email:hover {
  box-shadow: 0 0 20px #00f7ff, 0 0 40px #00f7ff;
  transform: scale(1.15);
}

.linkedin:hover {
  box-shadow: 0 0 20px #0a66c2, 0 0 40px #0a66c2;
  transform: scale(1.15);
}

.github:hover {
  box-shadow: 0 0 20px #a855f7, 0 0 40px #a855f7;
  transform: scale(1.15);
}

/* Hover Background Animation */
.social-sidebar .icon::before {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  background: linear-gradient(45deg, transparent, rgba(0,255,255,0.4), transparent);
  transform: rotate(45deg);
  top: -100%;
  left: -100%;
  transition: 0.5s;
}

.social-sidebar .icon:hover::before {
  top: 100%;
  left: 100%;
}