:root {
  --bg: #0b0e14;
  --bg-alt: #0f1420;
  --text: #d7e2f0;
  --muted: #9fb0c3;
  --card: rgba(255,255,255,0.04);
  --border: rgba(255, 255, 255, 0.089);
  --accent: #30e9ff;   /* neon cyan */
  --accent-2: #ff4dde; /* neon magenta */
  --accent-3: #8a5cff; /* electric purple */
  --shadow: 0 10px 30px rgba(0,0,0,0.4);
  --radius: 16px;
  --blur: 12px;
  --transition: 220ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, rgba(48,233,255,0.08), transparent 60%),
              radial-gradient(900px 700px at 110% 10%, rgba(255,77,222,0.08), transparent 60%),
              var(--bg);
}

.closebtn{
  border:1px solid gray;
  border-radius:50px;
  color:black;
  padding:10px;
  background:transparent;
}




.theme-light {
  --bg: #f8fafc;
  --bg-alt: #eef2f7;
  --text: #0f172a;
  --muted: #42526b;
  --card: rgba(0,0,0,0.04);
  --border: rgba(0,0,0,0.09);
  background: linear-gradient(180deg, #ffffff, #f7f9fc 50%, #eef2f7);
}
/* Light theme navbar background */
.theme-light .site-header {
  background: linear-gradient(90deg, #ffffff, #f5f8ff);
  border-bottom: 1px solid #e0e0e0;
}




.ilearn{
  padding-left:22px;
}
.glassabout:hover{
       transform: translateY(-8px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.1);
      border: 2px solid var(--accent);  
      /* box-shadow: 0 0 0 2px rgb(0, 195, 255), 
                  0 0 0 4px rgb(144, 75, 205); */
                  box-shadow: 
    0 0 5px rgb(28, 244, 89),    /* Inner glow, subtle */
    0 0 10px rgb(221, 130, 32),   /* Mid-range glow */
    0 0 20px rgb(199, 33, 246),   /* Outer glow, stronger */
    0 0 40px rgb(14, 211, 229);
}
.card:hover{
    border-color:#d7e2f0;

}


#java{
  height: 250px;
  width:350px;
  position:relative;
  left:0px;
  border-radius:20px;
  top:0px;
  padding-bottom:15px;

}


#java2{
  height: 250px;
  width:350px;
  position:relative;
  left:30px;
  border-radius:20px 20px;
  top:0px;
  padding-bottom:15px;

}

.ex{

   padding:5px;
}





a { color: var(--accent); text-decoration: none; }
a:hover { opacity: 0.9; }

.container { width: min(1200px, 92%);margin: 0 auto; padding-bottom:150px}
.containers { width: min(1200px, 92%);margin: 0 auto; }
.containerfoter { width: min(1200px, 92%);margin: 0 auto;}





.containervideo { width: min(1200px, 92%);margin: 0 auto}

.containerex { width: min(1200px, 92%);margin: 0 auto; padding-bottom:100px}






.sectionex { padding: 80px 0;padding-top:10px;;position: relative; }

.containerres { width: min(1200px, 92%);margin: 5px auto;gap:15px; margin-top:200px}

.list-cards {
  margin-bottom: 2rem; /* Adds space below each grid */
}
.classexper{

background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));


}
.containerblogs { width: min(1200px, 92%);margin: 180px auto; }


.glass-list-card:hover{


box-shadow: 
    0 0 5px rgb(28, 244, 89),    /* Inner glow, subtle */
    0 0 20px rgb(199, 33, 246),   /* Outer glow, stronger */
    0 0 30px rgb(14, 211, 229);
      transition: transform 0.8s ease, box-shadow 0.3s ease;
       
       transform: translateY(-8px);
  
}

.sectionlearn { margin-top: 10px;position:relative; }

#learning-title{
position:relative;
margin-top:150px;
}

.learn {
  /* position: relative;
  width: 1300px;
  height: 650px;  
  border: 1px solid white; 
  margin-left:100px;
  border-image: white; 
  margin-top:90px;
  border-radius: 20px;   
  overflow: hidden;      
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.2);
  margin-bottom:50px;  */
background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  padding-left:5px;
  width:1200px; 
height:600px;
margin-bottom:150px;
margin-top:0px;
top:-10px;
position:relative;
border-radius: 15px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }


   .experience-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
background: var(--card);
      border-radius: 15px;
      padding: 25px;
      top:50px;
      max-width: 1000px;
      margin: auto;
      box-shadow: 0 8px 20px rgba(0,0,0,0.4);
      position: relative;
      overflow: hidden;
      animation: fadeIn 1s ease-in-out;
      margin-bottom:340px;
    }
#experience-title{

margin-left:270px;


}
.jaava{
  width:330px;
  height: 251px;
  border-radius:30px;
}











    
#learningCanvas{
width:1200px;
height:600px;
margin-top:-320px;


}

.sectionlearn{
margin-left:120px;

margin-top:-70px;
margin-bottom:120px;
}





.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Adjust number of columns as needed */
  gap: 16px; /* Space between grid items */
}

.glassf, .glasss, .glasst {
  background: var(--card);
  border: 5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  padding: 15px;
  margin-bottom: 20px; /* Space between each skill card */
}



.glassf{
  position:relative;
  top:420px;
}
.glasss{
  position:relative;
  top:250px;
  right:20px;
}
.glasst{
  position:relative;
  top:90px;
  right:50px;
}
.chips {
  display: inline-block; /* Display chips in a line */
  margin: 4px; /* Add margin around each chip */
  padding: 4px 8px; /* Add padding inside each chip */
  border-radius: 999px; /* Round the corners of each chip */
  background: rgba(255,255,255,0.06); /* Background color */
  border: 1px solid var(--border); /* Border color */
  color: var(--text); /* Text color */
  font-size: 1.0rem; /* Adjust font size if needed */
}
#mentorship-title{
  position:relative;
  left:0px;
}

.glassmentor{
  position:relative;
  top:20px;
  right:0px;
  width:650px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--card);
  padding-left:20px;
}


.card-icon1{
  font-size: 2.0rem;
  margin-bottom: 12px;
  
}


.containernarrow{
width: min(1200px, 92%);margin: 0 auto;
  

}
.glassmentor:hover , .glasscard:hover{
border-color:#277e96;
}

.testimonial{
  top:-220px;
  margin-top:60px;
  position:relative;
}

.glasscard{
  display: inline-block; /* Display chips in a line */
  margin: 4px; /* Add margin around each chip */
  padding: 4px 8px; /* Add padding inside each chip */
  border-radius: 20px; /* Round the corners of each chip */
  /* background: rgba(255,255,255,0.06); Background color */
  border: 1px solid var(--border); /* Border color */
  color: var(--text); /* Text color */
  font-size: 1.0rem; /* Adjust font size if needed */
margin-left:690px;
background: var(--card);
position:relative;
top:-260px;
}

.glasscard-3d{
border: 1px solid var(--border); /* Border color */
  color: var(--text); 
  border-radius:30px;


}

.card-icon {
  font-size: 2.4rem;
  margin-bottom: 12px;
}



.sectionblog { padding: 80px 0;padding-top:10px;position: relative; }



.sectionmentor { padding: 25px 0;position: relative; }



.grid-3blogs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;  ;}
.grid-3blogs:hover{

border-color:white;

  
}





.sectionalt { padding: 20px 0;;position: relative; }

#about-title{
  text-align:center;
 font-size: 40px;
}
#about-intro{
  text-align:center;
  margin-top:-20px;
  
}

 .card:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.1);
      border: 2px solid #277e96;

       transform: translateY(-8px);



    }

    .card-icon {
      font-size: 2.5rem;
      margin-bottom: 0.8rem;
    }

#about-now-title , .card-icon ,.abouttext{
    text-align:center;

}
.sectionproject { padding: 80px 0;padding-top:180px;position: relative; }

.sectionre { padding: 80px 0;padding-top:210px;;position: relative; }



.sectionsk { padding: 80px 0;padding-top:0px;;position: relative; }
.sectioncon{
  padding: 80px 0;padding-top:30  0px;position: relative;
}

.containerintern { width: min(1200px, 92%);margin: 0 auto; margin-top:-150px;}

.containern{
  width: min(1200px, 92%);margin: 0 auto;
}

.narrow { width: min(880px, 92%); padding-top:0px;margin: 0 auto; }
.sectionabout { padding: 0px 0;margin-top:-20px;position: relative; margin-right:170px}


.section { padding: 80px 0;padding-top:180px;;position: relative; }
.section.alt { background: linear-gradient(180deg, var(--bg-alt), transparent); }
.section.altt {background: linear-gradient(180deg, var(--bg-alt), transparent); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5,8,14,0.65);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-title { font-weight: 700; letter-spacing: 0.2px; color: var(--text); left:-120px;position:relative;}
.logo-dot { width: 15px; height: 15px; border-radius: 50%; left:-120px;position:relative;background: linear-gradient(45deg, var(--accent), var(--accent-2)); box-shadow: 0 0 16px var(--accent); }

.site-nav ul { display: flex; gap: 12px; list-style: none; padding: 0; margin: 0; align-items: center; }
.site-nav a { padding: 8px 10px; border-radius: 10px; color: var(--text); }
.site-nav a.active { background: linear-gradient(180deg, rgba(48,233,255,0.14), rgba(138,92,255,0.14)); box-shadow: inset 0 0 0 1px var(--border); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 4px 0; transition: var(--transition); }

@media (max-width: 980px) {
  .site-nav ul { position: absolute; right: 4%; top: 64px; background: rgba(10,14,22,0.9); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: 14px; padding: 10px; display: none; flex-direction: column; width: 260px; }
  .nav-toggle { display: inline-block; }
  .site-nav[aria-expanded="true"] ul { display: flex; }
}

.butonmentor {
  border: 1px solid var(--border); color: var(--text);
  padding: 10px 14px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: var(--shadow);
  position:relative;
  top: -200px;
  margin-left:10px;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.butonmentor:hover { transform: translateY(-1px); opacity: 0.95; }
.butonmentor { border-color: rgba(48,233,255,0.4); background: linear-gradient(180deg, rgba(48,233,255,0.16), rgba(138,92,255,0.16)); }
.butonmentor { border-color: rgba(255,77,222,0.4); background: linear-gradient(180deg, rgba(255,77,222,0.16), rgba(48,233,255,0.12)); cursor:pointer}
.butonmentor { background: transparent; }
.butonmentor { box-shadow: 0 0 22px rgba(48,233,255,0.35), inset 0 0 0 1px rgba(48,233,255,0.35); }

.btnsentc{

  border: 1px solid var(--border); color: var(--text);
  padding: 10px 14px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: var(--shadow);
  position:relative;
  top: 0px;
  margin-left:10px;
  width:140px;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);



}
.btnsentc:hover { transform: translateY(-1px); opacity: 0.95; }
.btnsentc { border-color: rgba(48,233,255,0.4); background: linear-gradient(180deg, rgba(48,233,255,0.16), rgba(138,92,255,0.16)); }
.btnsentc { border-color: rgba(255,77,222,0.4); background: linear-gradient(180deg, rgba(255,77,222,0.16), rgba(48,233,255,0.12)); cursor:pointer}
.btnsentc { background: transparent; }
.btnsentc { box-shadow: 0 0 22px rgba(48,233,255,0.35), inset 0 0 0 1px rgba(48,233,255,0.35); }





.btn {
  border: 1px solid var(--border); color: var(--text);
  padding: 10px 14px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: var(--shadow);
  
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.btn:hover { transform: translateY(-1px); opacity: 0.95; }
.btn-primary { border-color: rgba(48,233,255,0.4); background: linear-gradient(180deg, rgba(48,233,255,0.16), rgba(138,92,255,0.16)); }
.btn-secondary { border-color: rgba(255,77,222,0.4); background: linear-gradient(180deg, rgba(255,77,222,0.16), rgba(48,233,255,0.12)); cursor:pointer}
.btn-ghost { background: transparent; margin-left:50px; }
.glow { box-shadow: 0 0 22px rgba(48,233,255,0.35), inset 0 0 0 1px rgba(48,233,255,0.35); }

.lead { color: var(--muted); font-size: 1.1rem; }
.meta { list-style: none; padding: 0; margin: 14px 0 0; display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); }

.hero { overflow: clip; }
.grid-2 { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 36px; }
@media (max-width: 980px) { .grid-2 { grid-template-columns: 1fr; } }
.hero-text .neon-title { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.1; }
.accent { background: linear-gradient(45deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 20px rgba(48,233,255,0.25); }

.hero-visual { position: relative; min-height: 320px; display: grid; place-items: center; }
.orb { position: absolute; filter: blur(40px); opacity: 0.6; border-radius: 50%; mix-blend-mode: screen; }
.orb-cyan { width: 360px; height: 360px; background: radial-gradient(circle, rgba(48,233,255,0.6), transparent 60%); top: -40px; left: -40px; }
.orb-magenta { width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,77,222,0.5), transparent 60%); bottom: -40px; right: -10px; }

.glass {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  padding:15px;
}



.glass:hover{
  border-color:rgb(32, 128, 145);
  box-shadow: 
    0 0 15px rgb(9, 25, 250),    /* Inner glow, subtle */
     0 0 15px rgb(32, 128, 145),
    0 0 30px rgb(14, 211, 229);
}
.glass-list-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  padding:15px;
}


.glassabout{

background: var(--card);
  /* border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));*/
  padding:15px;
  width:340px; 

      padding: 1.5rem;
      border-radius: 15px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
      border: 2px solid transparent;
}

.glasslearn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  width:350px;
  padding:15px;
}

.glasslearn2{

  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  width:350px;
  position:relative;
  margin-top:50px;
  left:200px;
  padding:15px;
}
.glasslearn3{

  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  width:350px;
  position:relative;
  margin-top:50px;
  left:400px;
  padding:15px;
}

h3{
    padding-left:10px;
}
#bio{
        padding-left:10px;

}

.grid-3projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top:10px ;}

.containerproject { width: min(1200px, 92%);margin: -250px auto; }

/* .mentortext{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  padding: 10px;
  padding-left:30px;
  margin-bottom: 20px; /* Space between each skill card */

 




.card { padding: 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); }
.card img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; }
.card-body { padding: 10px 4px 4px; }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.tag { font-size: 0.8rem; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); }
.actions { display: flex; gap: 10px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top:180px ;}
@media (max-width: 980px) { .grid-3 { grid-template-columns: 1fr; } }

.filters { display: flex; gap: 10px; margin: 14px 0 24px; flex-wrap: wrap; }
.chip { padding: 8px 20px; border-radius: 999px; gap:50px;border: 1px solid var(--border); background: rgba(255,255,255,0.05); color: var(--text); cursor: pointer; }
.chip.active { background: linear-gradient(180deg, rgba(48,233,255,0.16), rgba(138,92,255,0.16)); gap: 50px;}
.chip1{border:1px solid var(--border) ; border-radius:50px; padding:10px;color: var(--text);cursor:pointer}
.list-cards { display: grid; gap: 16px; }
.list-card { padding: 16px; }
.muted { color: var(--muted); margin-left:23px}





.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .about-grid { grid-template-columns: 1fr; } }

.skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.badge-card { padding: 18px; }

.form { display: grid; gap: 12px; padding: 16px; }
.form input, .form textarea {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); color: var(--text);
}
.form button { width: fit-content; }
.form-note { color: var(--muted); font-size: 0.9rem; }

.video-thumb { position: relative; cursor: pointer; border-radius: 12px; overflow: hidden; }
.video-thumb img { display: block; width: 100%; height: 180px; object-fit: cover; }
.video-thumb .play { position: absolute; inset: auto auto 10px 10px; background: rgba(0,0,0,0.6); padding: 8px 10px; border-radius: 10px; }

.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.timeline li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: baseline; }
.timeline .dot { width: 10px; height: 10px; background: linear-gradient(45deg, var(--accent), var(--accent-2)); border-radius: 50%; box-shadow: 0 0 16px rgba(48,233,255,0.6); }

.site-footer { padding: 32px 0; border-top: 1px solid var(--border); text-align: center; color: var(--muted); }

.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 30;
  opacity: 0; pointer-events: none; transition: var(--transition);
  border-radius: 10px; border: 1px solid var(--border); background: rgba(0,0,0,0.35); color: var(--text);
  padding: 8px 10px;
}
.to-top.visible { opacity: 1; pointer-events: auto; }
#profile{
    width:280px;
    border-radius: 20px;
    height:250px;
}
.link-btn{
  border:1px solid gray;
  padding:10px;
  margin:20px;
  background-color:#31363e;
  color:white;
  border-radius:10px;
  cursor:pointer;
}
.card-3dd{
  width:300px;
  height:270px;
  border-radius:20px;
}




.card-3d { 
  
  width:300px;
  height:270px;
  margin-top:-0px;
  position:relative;
  top:50px;
  
  border-radius:30px;transform-style: preserve-3d; transform: perspective(800px) rotateX(0) rotateY(0); transition: transform 180ms ease; }
.card-3d:hover { will-change: transform; border:1px solid white; }

.modal::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
.modal { border: 0; border-radius: 16px; padding: 0; max-width: 800px; width: 92%; }
.modal article { padding: 16px; }
.modal header { display: flex; justify-content: space-between; align-items: center; }
.icon-btn { border: 1px solid var(--border); background: transparent; border-radius: 10px; color: var(--text); padding: 6px 8px; cursor: pointer; }

.responsive-video { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; }
.responsive-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.skip-link {
  position: absolute; left: -999px; top: auto;
}
.skip-link:focus {
  left: 8px; top: 8px; background: var(--bg-alt); color: var(--text); padding: 8px 10px; border-radius: 8px;
}


    /* Floating stars */
    .stars {
      position: fixed;
      width: 100%;
      height: 100%;
      background: transparent url("https://www.transparenttextures.com/patterns/stardust.png");
      z-index: -1;
      animation: moveStars 200s linear infinite;
      opacity: 0.4;
    }

    @keyframes moveStars {
      from {background-position: 0 0;}
      to {background-position: 10000px 5000px;}
    }

    .skills-container {
      max-width: 1500px;
      margin: auto;
      padding: 5rem 2rem;
      text-align: center;
      position: relative;
      margin-top:-200px;
    }

    .skills-header h1 {
      font-size: 2.0rem;
      margin-bottom: 1rem;
      margin-top:5rem;
      background: var(--text);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      /* animation: glow 2s infinite alternate; */
    }

    .skills-header p {
      font-size: 1.2rem;
      color: #bbb;
      margin-bottom: 4rem;
    }

    @keyframes glow {
      from { text-shadow: 0 0 15px rgba(255,255,255,0.2); }
      to { text-shadow: 0 0 30px rgba(255,255,255,0.6); }
    }

    /* Orbit layout for WOW effect */
    .skills-orbit {
      display: flex;
      justify-content: center;
        display: grid;                          
  grid-template-columns: repeat(3, 240px); /* fixed column width */
             
  justify-items: center;  
      align-items: center;
      flex-wrap: wrap;
      gap:3rem;
      perspective: 2000px;
    }

    .skill-card {
      width: 250px;
      height: 210px;
      background: rgba(255,255,255,0.05);
      border-radius: 20px;
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 0 30px rgba(0,255,200,0.2);
      display: flex;
      flex-direction: column;
      justify-content: center;
        grid-template-columns: repeat(3, 1fr); /* exactly 3 columns */

      align-items: center;
      position: relative;
      overflow: hidden;
      transform: rotateY(10deg) rotateX(8deg);
      transition: transform 0.6s ease, box-shadow 0.6s ease; 
    }

    .skill-card:hover {
      transform: rotateY(0) rotateX(0) scale(1.1);
      /* box-shadow: 0 0 40px rgba(0,255,200,0.5); */

box-shadow: 
    0 0 5px rgb(28, 244, 89),    /* Inner glow, subtle */
    0 0 10px rgb(221, 130, 32),   /* Mid-range glow */
    0 0 20px rgb(199, 33, 246),   /* Outer glow, stronger */
    0 0 40px rgb(14, 211, 229);

    }

    .skill-icon {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
      animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
      0%,100% { transform: translateY(0);}
      50% { transform: translateY(-8px);}
    }

    .skill-card h3 {
      margin: 0;
      font-size: 1.3rem;
      background: linear-gradient(45deg, #24c6dc, #5433ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .skill-card p {
      font-size: 0.8rem;
      color: #ccc;
    }

    /* Halo animation */
    .skill-card::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: conic-gradient(
        from 0deg,
        #ff6f61,
        #fddb92,
        #24c6dc,
        #5433ff,
        #ff6f61
      );
      animation: spin 6s linear infinite;
      opacity: 0.2;
    }

    .skill-card::after {
      content: "";
      position: absolute;
      inset: 5px;
      background: rgba(0,0,0,0.9);
      border-radius: 15px;
      z-index: 1;
    }

    .skill-card * {
      position: relative;
      z-index: 2;
    }

    @keyframes spin {
      to { transform: rotate(360deg);}
    }




    canvas { display: block; }






/* ===== HERO Typing Effect Styling ===== */
#typed-text {
  font-size: 1.3rem;
  color: var(--muted);
  margin-top: 8px;
  min-height: 28px;
}
.typed-cursor {
  display: none !important;
}


/* ===== ABOUT Glow Hover ===== */


/* ===== PROJECT Overlay Hover ===== */



/* ===== SKILLS Progress Bars ===== */
.skill-card {
  position: relative;
  padding-bottom: 40px;
}
.skill-progress {
  position: absolute;
  bottom: 32px;
  left: 70px;
  width: 100px;
  height: 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.skill-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 1s ease-in-out;
}

/* ===== BLOG Read-Time Badge ===== */
.grid-3blogs .card {
  position: relative;
}
.grid-3blogs .card::after {
  content: "⏱ 3 min read";
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--accent);
  color: black;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
}

/* ===== MENTORSHIP Contact Enhancements ===== */
.sectionmentor .mentortext::after {
  content: " ⚡ Reply within 24h";
  display: block;
  font-size: 0.8rem;
  color: white;
  margin-top: 6px;
}



/* ============================= */
/* 📱 Responsive Adjustments     */
/* ============================= */

@media (max-width: 1024px) {
  .learn,
  #learningCanvas {
    width: 100%;
    height: auto;
  }

  .experience-card {
    flex-direction: column;
    text-align: center;
    margin-bottom: 100px;
  }
  .experience-image img {
    max-width: 90%;
    height: auto;
    margin-top: 20px;
  }
}

@media (max-width: 768px) {
  .container,
  .containers,
  .containerfoter,
  .containerblogs,
  .containerproject,
  .containerres,
  .containern,
  .containernarrow {
    width: 95%;
    margin: auto;
    padding: 0 10px;
  }

  .grid-2,
  .grid-3,
  .grid-3blogs,
  .grid-3projects,
  .about-grid,
  .skills-grid {
    grid-template-columns: 1fr !important;
  }

  .learn {
    margin-left: 0;
    padding: 20px;
  }

  .glasslearn,
  .glasslearn2,
  .glasslearn3 {
    width: 100%;
    left: 0;
    margin: 15px 0;
  }

  .brand-title,
  .logo-dot {
    position: static;
  }

  .site-nav ul {
    right: 0;
    width: 100%;
  }

  #experience-title {
    margin-left: 0;
    text-align: center;
  }

  .glasscard {
    margin: 20px auto;
    top: 0;
  }
}

@media (max-width: 480px) {
  h1, h2, h3 {
    font-size: 1.2rem;
  }

  .btn, .btnsentc, .butonmentor {
    font-size: 0.85rem;
    padding: 8px 10px;
  }

  #profile,
  .card-3dd,
  .jaava {
    width: 100%;
    height: auto;
  }

  .meta {
    flex-direction: column;
    gap: 6px;
  }

  .hero-text {
    text-align: center;
  }
}