Update style.css

style.css

@@ -5,7 +5,7 @@
   font-family:"Poppins","Inter",system-ui,sans-serif;
 }
 
-/* ===== DREAMY LIGHT BACKGROUND ===== */
+/* BACKGROUND */
 body{
   min-height:100vh;
   background:
@@ -17,13 +17,13 @@ body{
   overflow-x:hidden;
 }
 
-/* ===== FLOATING ORBS ===== */
+/* FLOATING ORBS */
 .orb{
   position:absolute;
   width:260px;
   height:260px;
   border-radius:50%;
-  background:rgba(255,255,255,0.4);
+  background:rgba(255,255,255,0.45);
   filter:blur(40px);
   animation: float 12s infinite alternate;
 }
@@ -36,7 +36,7 @@ body{
   to{transform:translateY(-60px);}
 }
 
-/* ===== HERO ===== */
+/* HERO */
 .hero{
   min-height:100vh;
   display:flex;
@@ -61,16 +61,16 @@ body{
 }
 
 .hero p{
-  max-width:620px;
+  max-width:650px;
   margin:28px auto;
   font-size:17px;
   color:#374151;
 }
 
-/* ===== GLASS 3D ===== */
+/* GLASS 3D */
 .glass-3d{
-  background:rgba(255,255,255,0.55);
-  backdrop-filter:blur(25px);
+  background:rgba(255,255,255,0.6);
+  backdrop-filter:blur(26px);
   border-radius:30px;
   box-shadow:
     0 30px 80px rgba(0,0,0,0.15),
@@ -83,12 +83,12 @@ body{
   box-shadow:0 50px 120px rgba(124,58,237,.25);
 }
 
-/* ===== BUTTONS ===== */
+/* BUTTON */
 .glass-btn{
   position:relative;
   padding:16px 42px;
   border-radius:999px;
-  background:rgba(255,255,255,0.6);
+  background:rgba(255,255,255,0.65);
   backdrop-filter:blur(18px);
   border:1px solid rgba(255,255,255,0.9);
   color:#4f46e5;
@@ -119,7 +119,70 @@ body{
 
 .small{padding:12px 30px;}
 
-/* ===== PROJECTS ===== */
+/* INFO SECTIONS */
+.info-section{
+  max-width:900px;
+  margin:80px auto;
+  padding:40px;
+  text-align:center;
+}
+
+.info-section h3{
+  font-size:34px;
+  margin-bottom:18px;
+  background:linear-gradient(90deg,#7c3aed,#ec4899);
+  -webkit-background-clip:text;
+  -webkit-text-fill-color:transparent;
+}
+
+.info-section span{
+  color:#6b7280;
+}
+
+/* SKILLS */
+.skills-area{
+  padding:120px 8% 60px;
+  text-align:center;
+}
+
+.skills-title{
+  font-size:36px;
+  margin-bottom:50px;
+  color:#5b21b6;
+}
+
+.bubble-wrap{
+  display:flex;
+  flex-wrap:wrap;
+  justify-content:center;
+  gap:26px;
+}
+
+.bubble{
+  padding:20px 34px;
+  border-radius:999px;
+  background:rgba(255,255,255,0.7);
+  backdrop-filter:blur(22px);
+  border:1px solid rgba(255,255,255,0.95);
+  font-weight:600;
+  color:#4f46e5;
+  box-shadow:0 20px 50px rgba(124,58,237,0.25);
+  animation: floatBubble 6s ease-in-out infinite;
+  transition:.4s;
+}
+
+.bubble:hover{
+  transform:scale(1.15);
+  box-shadow:0 30px 70px rgba(236,72,153,.4);
+}
+
+@keyframes floatBubble{
+  0%{transform:translateY(0);}
+  50%{transform:translateY(-18px);}
+  100%{transform:translateY(0);}
+}
+
+/* PROJECTS */
 .projects{
   padding:100px 8%;
   text-align:center;
@@ -147,13 +210,7 @@ body{
   color:#312e81;
 }
 
-.project p{
-  font-size:15px;
-  margin-bottom:20px;
-  color:#374151;
-}
-
-/* ===== FOOTER ===== */
+/* FOOTER */
 footer{
   text-align:center;
   padding:40px;