*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  width:100%;
  min-height:100vh;
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  cursor:none;
  color:white;

  background:
  
  radial-gradient(
    circle at top left,
    rgba(6,0,117,0.55) 0%,
    transparent 35%
  ),

  radial-gradient(
    circle at top right,
    rgba(0,89,255,0.18) 0%,
    transparent 30%
  ),

  radial-gradient(
    circle at bottom left,
    rgba(98,0,255,0.15) 0%,
    transparent 35%
  ),

  linear-gradient(
    135deg,
    #020203 0%,
    #050510 25%,
    #060075 55%,
    #04040d 75%,
    #000000 100%
  );

  background-attachment:fixed;

  position:relative;
}

/* =========================
   GRID
========================= */

body::before{

  content:"";

  position:fixed;
  inset:0;

  background-image:
  linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

  background-size:20px 20px;

  z-index:-3;
}

/* =========================
   NOISE
========================= */

body::after{

  content:"";

  position:fixed;
  inset:0;

  background:url('https://grainy-gradients.vercel.app/noise.svg');

  opacity:0.05;

  z-index:-2;
}

/* =========================
   LIGHTS
========================= */

.gradient-light{

  position:absolute;

  width:900px;
  height:900px;

  background:
  radial-gradient(circle,
  rgba(6,0,117,0.45),
  transparent 65%);

  top:-300px;
  right:-200px;

  filter:blur(90px);

  animation:moveLight 12s ease-in-out infinite alternate;

  z-index:-1;
}

.gradient-light2{

  position:absolute;

  width:700px;
  height:700px;

  background:
  radial-gradient(circle,
  rgba(0,140,255,0.18),
  transparent 65%);

  bottom:-250px;
  left:-150px;

  filter:blur(90px);

  animation:moveLight2 15s ease-in-out infinite alternate;

  z-index:-1;
}

@keyframes moveLight{

  0%{
    transform:translate(0,0);
  }

  100%{
    transform:translate(-120px,90px);
  }
}

@keyframes moveLight2{

  0%{
    transform:translate(0,0);
  }

  100%{
    transform:translate(140px,-80px);
  }
}

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

.hero{
  width:100%;
  min-height:100svh;
  position:relative;
}

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

.navbar{

  width:100%;

  padding:30px 40px;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  position:relative;
  z-index:100;
}

.logo h1{

  font-size:2rem;
  font-weight:800;

  letter-spacing:-1px;

  color:white;
}

.logo p{

  color:#9c9cb0;

  margin-top:5px;

  font-size:0.95rem;
}

.nav-right{

  display:flex;
  align-items:center;
  gap:40px;
}

.nav-right a{

  text-decoration:none;

  color:#e5e5ff;

  font-weight:500;

  transition:0.3s ease;
}

.nav-right a:hover{

  color:#7b7dff;
}

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

.work-btn{

  border:none;

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

  color:white;

  padding:16px 26px;

  border-radius:999px;

  display:flex;
  align-items:center;
  gap:12px;

  font-weight:600;

  backdrop-filter:blur(15px);

  border:1px solid rgba(255,255,255,0.08);

  box-shadow:
  0 10px 30px rgba(0,0,0,0.3),
  inset 0 0 20px rgba(255,255,255,0.05);
}

.dot{

  width:10px;
  height:10px;

  border-radius:50%;

  background:#00ff88;

  box-shadow:
  0 0 10px #00ff88,
  0 0 20px #00ff88;
}

/* =========================
   HERO TEXT
========================= */

.hero-text{

  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  font-size:16vw;

  font-weight:900;

  letter-spacing:-12px;

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

  user-select:none;

  z-index:1;
}

/* =========================
   IMAGE GLOW
========================= */

.image-glow{

  position:absolute;

  width:500px;
  height:760px;

  top:50%;
  left:50%;

  transform:translate(-50%, -50%);

  border-radius:260px;

  background:
  radial-gradient(circle,
  rgba(255,255,255,0.15),
  rgba(6,0,117,0.45),
  transparent 70%);

  filter:blur(70px);

  animation:pulseGlow 5s ease-in-out infinite;

  z-index:2;
}

@keyframes pulseGlow{

  0%{
    opacity:0.6;
    transform:translate(-50%, -50%) scale(1);
  }

  50%{
    opacity:1;
    transform:translate(-50%, -50%) scale(1.08);
  }

  100%{
    opacity:0.6;
    transform:translate(-50%, -50%) scale(1);
  }
}

/* =========================
   IMAGE
========================= */

.image-container{

  position:absolute;

  top:50%;
  left:50%;

  width:430px;
  height:670px;

  border-radius:240px;

  overflow:hidden;

  z-index:20;

  transform:
  translate(-50%, -50%)
  perspective(2000px);

  transition:
  transform 0.15s linear,
  filter 0.4s ease,
  box-shadow 0.4s ease;

  animation:floatImage 6s ease-in-out infinite;

  isolation:isolate;
}

.image-container img{

  width:100%;
  height:100%;

  object-fit:cover;

  border-radius:240px;

  transform:scale(1.05);

  transition:
  transform 0.5s ease,
  filter 0.5s ease;

  position:relative;
  z-index:1;
}

.image-container::before{

  content:"";

  position:absolute;
  inset:-2px;

  border-radius:240px;

  background:
  linear-gradient(
  135deg,
  rgba(0,140,255,0.35),
  rgba(6,0,117,0.4),
  rgba(0,255,200,0.2),
  rgba(255,255,255,0.05));

  mix-blend-mode:screen;

  opacity:0;

  filter:blur(18px);

  transition:0.5s ease;

  z-index:2;
}

.image-container::after{

  content:"";

  position:absolute;

  width:200%;
  height:200%;

  top:-50%;
  left:-50%;

  background:
  linear-gradient(
  120deg,
  transparent 30%,
  rgba(255,255,255,0.3) 45%,
  transparent 60%);

  transform:rotate(25deg);

  opacity:0;

  transition:0.5s ease;

  z-index:3;
}

.image-container:hover{

  box-shadow:
  0 30px 100px rgba(0,0,0,0.45),
  0 0 120px rgba(6,0,117,0.45);
}

.image-container:hover img{

  transform:scale(1.1);

  filter:
  contrast(1.1)
  saturate(1.15)
  brightness(1.05);
}

.image-container:hover::before{

  opacity:1;

  animation:rgbShift 3s linear infinite;
}

.image-container:hover::after{

  opacity:1;

  animation:lightSweep 2.5s linear infinite;
}

@keyframes rgbShift{

  0%{
    transform:translateX(-8px);
  }

  50%{
    transform:translateX(8px);
  }

  100%{
    transform:translateX(-8px);
  }
}

@keyframes lightSweep{

  0%{
    transform:
    translateX(-100%)
    rotate(25deg);
  }

  100%{
    transform:
    translateX(100%)
    rotate(25deg);
  }
}

@keyframes floatImage{

  0%{
    transform:
    translate(-50%, -50%)
    translateY(0px);
  }

  50%{
    transform:
    translate(-50%, -50%)
    translateY(-18px);
  }

  100%{
    transform:
    translate(-50%, -50%)
    translateY(0px);
  }
}

/* =========================
   TAGS
========================= */

.tag{

  position:absolute;

  padding:14px 22px;

  border-radius:999px;

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

  backdrop-filter:blur(15px);

  border:
  1px solid rgba(255,255,255,0.08);

  color:white;

  font-weight:700;

  letter-spacing:1px;

  box-shadow:
  0 10px 30px rgba(0,0,0,0.25);

  animation:floatTag 5s ease-in-out infinite;

  z-index:20;
}

.t1{
  top:22%;
  left:18%;
}

.t2{
  top:20%;
  right:18%;
}

.t3{
  bottom:25%;
  left:20%;
}

.t4{
  bottom:22%;
  right:20%;
}

@keyframes floatTag{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-15px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* =========================
   BOTTOM SECTION
========================= */

.bottom-section{

  position:absolute;

  bottom:35px;
  left:40px;
  right:40px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  z-index:100;
}

.left{

  display:flex;
  align-items:center;
  gap:25px;
}

.scroll-box{

  width:70px;
  height:70px;

  border-radius:20px;

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

  backdrop-filter:blur(15px);

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

  font-size:2rem;

  color:white;

  border:
  1px solid rgba(255,255,255,0.08);

  box-shadow:
  0 10px 30px rgba(0,0,0,0.25);

  animation:bounce 2s infinite;
}

@keyframes bounce{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(10px);
  }
}

.left p{

  width:420px;

  font-size:0.95rem;

  line-height:1.6;

  color:#c6c6d8;

  font-weight:500;
}

.right{

  display:flex;
  align-items:center;
  gap:50px;
}

.exp{

  display:flex;
  align-items:flex-end;
  gap:15px;
}

.exp h2{

  font-size:3.8rem;
  font-weight:800;

  color:white;
}

.exp span{

  width:80px;

  color:#a8a8c0;

  font-size:0.9rem;

  line-height:1.2;
}

.service{

  display:flex;
  align-items:center;
  gap:15px;

  color:white;
}

.service i{

  width:60px;
  height:60px;

  border-radius:50%;

  border:
  1px solid rgba(255,255,255,0.12);

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

  font-size:1.5rem;

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

  backdrop-filter:blur(15px);
}

.service span{

  font-weight:600;
}

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

.about-section{

  width:100%;

  min-height:100svh;

  padding:140px 70px;

  position:relative;

  display:flex;
  justify-content:space-between;
  gap:100px;

  overflow:hidden;
}

.about-bg-text{

  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%, -50%);

  font-size:18vw;

  font-weight:900;

  letter-spacing:-10px;

  color:rgba(255,255,255,0.03);

  pointer-events:none;

  user-select:none;
}

.about-left{

  width:35%;

  position:sticky;

  top:120px;

  height:max-content;

  z-index:2;
}

.about-number{

  font-size:1rem;

  color:#7b7dff;

  margin-bottom:20px;

  font-weight:700;

  letter-spacing:2px;
}

.about-left h2{

  font-size:4.5rem;

  line-height:1;

  letter-spacing:-4px;

  font-weight:800;

  color:white;
}

.about-right{

  width:55%;

  position:relative;

  z-index:2;
}

.about-description{

  font-size:1.2rem;

  line-height:1.9;

  color:#c5c5da;

  margin-bottom:80px;

  max-width:700px;
}

.skills-grid{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:30px;
}

.skill-card{

  padding:35px;

  border-radius:30px;

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

  backdrop-filter:blur(20px);

  border:
  1px solid rgba(255,255,255,0.08);

  transition:
  transform 0.4s ease,
  background 0.4s ease,
  border 0.4s ease;

  position:relative;

  overflow:hidden;
}

.skill-card:hover{

  transform:
  translateY(-10px);

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

  border:
  1px solid rgba(123,125,255,0.3);

  box-shadow:
  0 20px 60px rgba(6,0,117,0.35);
}

.skill-card::before{

  content:"";

  position:absolute;

  width:250px;
  height:250px;

  background:
  radial-gradient(circle,
  rgba(123,125,255,0.18),
  transparent 70%);

  top:-120px;
  right:-120px;

  transition:0.5s ease;

  opacity:0;
}

.skill-card:hover::before{

  opacity:1;
}

.skill-card span{

  font-size:0.9rem;

  color:#7b7dff;

  font-weight:700;

  letter-spacing:2px;
}

.skill-card h3{

  margin-top:20px;

  font-size:1.7rem;

  font-weight:700;

  color:white;
}

.skill-card p{

  margin-top:18px;

  line-height:1.7;

  color:#b8b8cc;

  font-size:0.98rem;
}

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

.cursor{

  width:22px;
  height:22px;

  border:2px solid white;

  border-radius:50%;

  position:fixed;

  top:0;
  left:0;

  pointer-events:none;

  transform:translate(-50%, -50%);

  z-index:9999;

  transition:
  width 0.3s ease,
  height 0.3s ease,
  background 0.3s ease,
  transform 0.08s linear;
}

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

@media(max-width:1100px){

  .hero-text{
    font-size:20vw;
  }

  .image-container{
    width:320px;
    height:500px;
  }

  .bottom-section{
    flex-direction:column;
    align-items:flex-start;
    gap:40px;
  }

  .right{
    flex-wrap:wrap;
  }

  .about-section{

    flex-direction:column;

    gap:70px;
  }

  .about-left,
  .about-right{

    width:100%;
  }

  .about-left{

    position:relative;

    top:0;
  }

  .about-left h2{

    font-size:3.5rem;
  }
}

@media(max-width:768px){

  .navbar{
    flex-direction:column;
    gap:30px;
  }

  .nav-right{
    flex-wrap:wrap;
    gap:20px;
  }

  .image-container{
    width:240px;
    height:380px;
  }

  .hero-text{
    font-size:24vw;
  }

  .left{
    flex-direction:column;
    align-items:flex-start;
  }

  .left p{
    width:100%;
    font-size:1rem;
  }

  .right{
    gap:25px;
  }

  .about-section{

    padding:100px 25px;
  }

  .about-left h2{

    font-size:2.5rem;

    letter-spacing:-2px;
  }

  .about-description{

    font-size:1rem;
  }

  .skills-grid{

    grid-template-columns:1fr;
  }

  .about-bg-text{

    font-size:28vw;
  }
}
/* =========================
   PROJECTS SECTION
========================= */

.projects-section{

  width:100%;

  min-height:100vh;

  padding:140px 70px;

  position:relative;

  overflow:hidden;
}

/* BG TEXT */

.projects-bg-text{

  position:absolute;

  top:100px;
  left:50%;

  transform:translateX(-50%);

  font-size:18vw;

  font-weight:900;

  color:rgba(255,255,255,0.03);

  letter-spacing:-12px;

  user-select:none;

  pointer-events:none;
}

/* TOP */

.projects-top{

  position:relative;

  z-index:5;

  margin-bottom:120px;
}

.projects-label{

  color:#7b7dff;

  font-size:1rem;

  font-weight:700;

  letter-spacing:2px;

  margin-bottom:20px;
}

.projects-top h2{

  font-size:6rem;

  line-height:0.9;

  letter-spacing:-5px;

  margin-bottom:30px;
}

.projects-top p{

  max-width:650px;

  font-size:1.1rem;

  line-height:1.8;

  color:#b8b8cc;
}

/* WRAPPER */

.projects-wrapper{

  display:flex;
  flex-direction:column;
  gap:120px;

  position:relative;

  z-index:2;
}

/* CARD */

.project-card{

  display:grid;

  grid-template-columns:1.1fr 0.9fr;

  gap:60px;

  align-items:center;

  position:relative;
}

/* IMAGE */

.project-image{

  position:relative;

  width:100%;
  height:750px;

  border-radius:40px;

  overflow:hidden;

  background:#111;

  transform-style:preserve-3d;

  transition:
  transform 0.5s ease,
  box-shadow 0.5s ease;

  isolation:isolate;
}

/* VIDEO */

.project-image video,
.project-image img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
  transform 0.8s ease,
  filter 0.8s ease;
}

/* OVERLAY */

.project-overlay{

  position:absolute;
  inset:0;

  background:
  linear-gradient(
  to top,
  rgba(0,0,0,0.6),
  transparent 40%);

  z-index:2;
}

/* HOVER */

.project-card:hover .project-image{

  transform:
  perspective(2000px)
  rotateY(-6deg)
  rotateX(3deg)
  scale(1.02);

  box-shadow:
  0 30px 120px rgba(6,0,117,0.45);
}

.project-card:hover video,
.project-card:hover img{

  transform:scale(1.08);

  filter:
  contrast(1.08)
  saturate(1.15)
  brightness(1.05);
}

/* RGB BORDER */

.project-image::before{

  content:"";

  position:absolute;
  inset:-2px;

  border-radius:40px;

  background:
  linear-gradient(
  135deg,
  rgba(0,140,255,0.4),
  rgba(6,0,117,0.5),
  rgba(0,255,200,0.3));

  opacity:0;

  transition:0.5s ease;

  z-index:1;

  filter:blur(20px);
}

.project-card:hover .project-image::before{

  opacity:1;
}

/* CONTENT */

.project-content{

  position:relative;

  z-index:5;
}

.project-number{

  color:#7b7dff;

  font-size:0.9rem;

  font-weight:700;

  letter-spacing:2px;

  margin-bottom:20px;
}

/* TITLE */

.project-content h3{

  font-size:4rem;

  line-height:0.95;

  letter-spacing:-3px;

  margin-bottom:30px;
}

/* DESCRIPTION */

.project-content p{

  font-size:1rem;

  line-height:1.9;

  color:#b8b8cc;

  margin-bottom:40px;

  max-width:500px;
}

/* TAGS */

.project-tags{

  display:flex;
  flex-wrap:wrap;
  gap:15px;
}

.project-tags span{

  padding:14px 22px;

  border-radius:999px;

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

  border:
  1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(15px);

  font-size:0.9rem;

  color:white;

  transition:0.3s ease;
}

.project-tags span:hover{

  background:
  rgba(123,125,255,0.15);

  border:
  1px solid rgba(123,125,255,0.4);
}

/* =========================
   MAGNETIC LIGHT EFFECT
========================= */

.project-card::after{

  content:"";

  position:absolute;

  width:300px;
  height:300px;

  background:
  radial-gradient(circle,
  rgba(6,0,117,0.18),
  transparent 70%);

  filter:blur(50px);

  top:50%;
  left:50%;

  transform:
  translate(-50%, -50%);

  opacity:0;

  transition:0.5s ease;

  pointer-events:none;
}

.project-card:hover::after{

  opacity:1;
}

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

@media(max-width:1100px){

  .project-card{

    grid-template-columns:1fr;

    gap:40px;
  }

  .project-image{

    height:550px;
  }

  .project-content h3{

    font-size:3rem;
  }
}

@media(max-width:768px){

  .projects-section{

    padding:100px 25px;
  }

  .projects-top h2{

    font-size:3.5rem;
  }

  .project-image{

    height:380px;

    border-radius:25px;
  }

  .project-content h3{

    font-size:2.2rem;
  }

  .projects-bg-text{

    font-size:28vw;
  }
}
/* =========================
   CREATIVE WALL
========================= */

.creative-wall{

  width:100%;

  min-height:220vh;

  position:relative;

  padding:160px 60px;

  overflow:hidden;
}

/* BG TEXT */

.wall-bg-text{

  position:absolute;

  top:120px;
  left:50%;

  transform:translateX(-50%);

  font-size:17vw;

  font-weight:900;

  color:rgba(255,255,255,0.03);

  letter-spacing:-10px;

  pointer-events:none;

  user-select:none;
}

/* TOP */

.wall-top{

  position:relative;

  z-index:10;

  max-width:700px;

  margin-bottom:140px;
}

.wall-top span{

  color:#7b7dff;

  letter-spacing:2px;

  font-size:0.9rem;

  font-weight:700;
}

.wall-top h2{

  font-size:7rem;

  line-height:0.9;

  letter-spacing:-5px;

  margin-top:20px;

  margin-bottom:30px;
}

.wall-top p{

  color:#b8b8cc;

  font-size:1.1rem;

  line-height:1.9;
}

/* WALL */

.wall-container{

  position:relative;

  width:100%;

  height:1800px;
}

/* ITEM */

.wall-item{

  position:absolute;

  overflow:hidden;

  border-radius:35px;

  background:#111;

  cursor:pointer;

  transition:
  transform 0.5s ease,
  box-shadow 0.5s ease;

  isolation:isolate;

  backdrop-filter:blur(10px);
}

/* MEDIA */

.wall-item video,
.wall-item img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
  transform 0.8s ease,
  filter 0.8s ease;
}

/* POSITIONS */

.item1{

  width:620px;
  height:780px;

  top:0;
  left:0;
}

.item2{

  width:400px;
  height:500px;

  top:120px;
  right:40px;
}

.item3{

  width:520px;
  height:650px;

  top:850px;
  left:120px;
}

.item4{

  width:420px;
  height:580px;

  top:760px;
  right:0;
}

.item5{

  width:650px;
  height:420px;

  bottom:0;
  left:50%;

  transform:translateX(-50%);
}

/* OVERLAY */

.wall-overlay{

  position:absolute;

  inset:0;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  padding:35px;

  background:
  linear-gradient(
  to top,
  rgba(0,0,0,0.7),
  transparent 40%);

  z-index:2;
}

.wall-overlay h3{

  font-size:2rem;

  font-weight:700;

  margin-bottom:12px;
}

.wall-overlay span{

  color:#d0d0e8;

  font-size:0.95rem;
}

/* RGB GLOW */

.wall-item::before{

  content:"";

  position:absolute;

  inset:-2px;

  border-radius:35px;

  background:
  linear-gradient(
  135deg,
  rgba(0,140,255,0.4),
  rgba(6,0,117,0.5),
  rgba(0,255,200,0.3));

  opacity:0;

  transition:0.5s ease;

  filter:blur(20px);

  z-index:1;
}

/* HOVER */

.wall-item:hover{

  transform:
  translateY(-20px)
  scale(1.03);

  box-shadow:
  0 40px 120px rgba(6,0,117,0.4);
}

.wall-item:hover::before{

  opacity:1;
}

.wall-item:hover video,
.wall-item:hover img{

  transform:scale(1.08);

  filter:
  contrast(1.1)
  saturate(1.15)
  brightness(1.05);
}

/* FLOATING ANIMATION */

.item1{
  animation:float1 8s ease-in-out infinite;
}

.item2{
  animation:float2 10s ease-in-out infinite;
}

.item3{
  animation:float3 7s ease-in-out infinite;
}

.item4{
  animation:float4 9s ease-in-out infinite;
}

.item5{
  animation:float5 11s ease-in-out infinite;
}

@keyframes float1{

  0%,100%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-20px);
  }
}

@keyframes float2{

  0%,100%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(25px);
  }
}

@keyframes float3{

  0%,100%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-18px);
  }
}

@keyframes float4{

  0%,100%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(22px);
  }
}

@keyframes float5{

  0%,100%{
    transform:
    translateX(-50%)
    translateY(0px);
  }

  50%{
    transform:
    translateX(-50%)
    translateY(-20px);
  }
}

/* RESPONSIVE */

@media(max-width:1100px){

  .wall-container{

    height:auto;

    display:flex;
    flex-direction:column;
    gap:40px;
  }

  .wall-item{

    position:relative !important;

    width:100% !important;

    height:500px !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;

    transform:none !important;
  }

  .wall-top h2{

    font-size:4rem;
  }
}

@media(max-width:768px){

  .creative-wall{

    padding:100px 25px;
  }

  .wall-top h2{

    font-size:3rem;
  }

  .wall-item{
    height:auto !important;
    aspect-ratio:9/12;
  }

  .wall-overlay h3{

    font-size:1.5rem;
  }

  .wall-bg-text{

    font-size:25vw;
  }
}
/* =========================================
SMOOTH SCROLL FIX
========================================= */

html.lenis,
html.lenis body{
  height:auto;
}

.lenis.lenis-smooth{
  scroll-behavior:auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent]{
  overscroll-behavior:contain;
}

.lenis.lenis-stopped{
  overflow:hidden;
}

/* =========================================
SCROLL REVEAL
========================================= */

.reveal-up{
  opacity:0;
  transform:translateY(120px);
}

.reveal-left{
  opacity:0;
  transform:translateX(-120px);
}

.reveal-right{
  opacity:0;
  transform:translateX(120px);
}

.scale-reveal{
  opacity:0;
  transform:scale(0.8);
}

/* =========================================
PREMIUM SECTION TRANSITIONS
========================================= */

.hero,
.about-section,
.projects-section,
.creative-wall{

  position:relative;
  z-index:2;
}

/* =========================================
PARALLAX LIGHTS
========================================= */

.gradient-light,
.gradient-light2{
  will-change:transform;
}

/* =========================================
PROJECT HOVER GLOW
========================================= */

.project-card{
  overflow:visible;
}

.project-card::before{

  content:"";

  position:absolute;

  width:450px;
  height:450px;

  background:
  radial-gradient(
    circle,
    rgba(6,0,117,0.25),
    transparent 70%
  );

  top:50%;
  left:50%;

  transform:
  translate(-50%, -50%)
  scale(0.6);

  opacity:0;

  filter:blur(60px);

  transition:
  opacity 0.5s ease,
  transform 0.5s ease;

  pointer-events:none;
}

.project-card:hover::before{

  opacity:1;

  transform:
  translate(-50%, -50%)
  scale(1);
}

/* =========================================
MAGNETIC BUTTONS
========================================= */

.work-btn{

  position:relative;

  overflow:hidden;

  transition:
  transform 0.3s ease,
  box-shadow 0.3s ease;
}

.work-btn:hover{

  transform:scale(1.06);

  box-shadow:
  0 20px 60px rgba(6,0,117,0.45);
}

/* =========================================
CINEMATIC SCROLL BAR
========================================= */

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-track{
  background:#050510;
}

::-webkit-scrollbar-thumb{

  background:
  linear-gradient(
    180deg,
    #060075,
    #4d5bff
  );

  border-radius:999px;
}


/*Contact Page */

.contact-section{
    position:relative;
    width:100%;
    min-height:100svh;
    padding:120px 8%;
    overflow:hidden;
}

.contact-bg{
    position:absolute;
    width:700px;
    height:700px;
    background:radial-gradient(circle,
    rgba(123,125,255,.2),
    transparent 70%);
    filter:blur(100px);
    top:-250px;
    right:-150px;
    pointer-events:none;
}

.contact-header{
    text-align:center;
    max-width:800px;
    margin:auto;
}

.contact-header span{
    color:#7b7dff;
    letter-spacing:3px;
    font-weight:700;
}

.contact-header h2{
    font-size:clamp(3rem,6vw,6rem);
    margin:20px 0;
    line-height:1;
}

.contact-header p{
    color:#a8a8c0;
    line-height:1.8;
}

.contact-grid{
    margin-top:80px;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.contact-card{
    position:relative;

    padding:40px;

    border-radius:30px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    text-decoration:none;

    color:white;

    overflow:hidden;

    transition:.4s;
}

.contact-card::before{
    content:"";
    position:absolute;
    inset:-2px;

    background:
    linear-gradient(
    135deg,
    #7b7dff,
    #060075,
    #00e1ff);

    opacity:0;
    transition:.4s;

    z-index:-1;
    filter:blur(25px);
}

.contact-card:hover{
    transform:translateY(-12px);
}

.contact-card:hover::before{
    opacity:1;
}

.icon{
    width:80px;
    height:80px;

    border-radius:50%;

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

    background:rgba(255,255,255,.05);

    font-size:2rem;

    margin-bottom:25px;
}

.whatsapp .icon{
    color:#00ff88;
}

.email .icon{
    color:#7b7dff;
}

.contact-card h3{
    font-size:1.8rem;
    margin-bottom:10px;
}

.contact-card p{
    color:#b8b8cc;
}

/* FORM */

.contact-form{
    margin-top:80px;

    padding:50px;

    border-radius:40px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
}

.input-group{
    position:relative;
    margin-bottom:40px;
}

.input-group input,
.input-group textarea{

    width:100%;

    background:none;
    border:none;

    border-bottom:1px solid rgba(255,255,255,.15);

    padding:15px 0;

    color:white;

    font-size:1rem;

    outline:none;
}

.input-group textarea{
    resize:none;
    height:150px;
}

.input-group label{

    position:absolute;

    left:0;
    top:15px;

    color:#888;

    pointer-events:none;

    transition:.3s;
}

.input-group input:focus + label,
.input-group input:valid + label,
.input-group textarea:focus + label,
.input-group textarea:valid + label{

    top:-15px;

    font-size:.8rem;

    color:#7b7dff;
}

.send-btn{

    border:none;

    padding:18px 35px;

    border-radius:999px;

    background:
    linear-gradient(
    135deg,
    #7b7dff,
    #060075);

    color:white;

    display:flex;
    align-items:center;
    gap:12px;

    cursor:pointer;

    font-weight:700;

    transition:.4s;
}

.send-btn:hover{
    transform:translateY(-4px);
    box-shadow:
    0 20px 50px rgba(6,0,117,.4);
}

@media(max-width:768px){

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

    .contact-form{
        padding:30px;
    }
}

/* =========================================
   MOBILE FIXES (max-width: 480px)
========================================= */

@media(max-width:480px){

  /* --- BODY --- */
  body{
    background-attachment:scroll; /* fixed attachment breaks on iOS */
  }

  /* --- CURSOR --- */
  .cursor{
    display:none; /* no mouse on touch screens */
  }
  body{
    cursor:auto;
  }

  /* --- NAVBAR --- */
  .navbar{
    padding:20px 18px;
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }

  .logo h1{
    font-size:1.5rem;
  }

  .nav-right{
    width:100%;
    flex-wrap:wrap;
    gap:12px;
  }

  .work-btn{
    padding:12px 18px;
    font-size:0.88rem;
  }

  /* --- HERO TEXT --- */
  .hero-text{
    font-size:28vw;
    letter-spacing:-4px;
  }

  /* --- IMAGE CONTAINER --- */
  .image-container{
    width:180px;
    height:290px;
    border-radius:120px;
  }

  .image-container img{
    border-radius:120px;
  }

  /* --- TAGS (floating) --- */
  .tag{
    padding:10px 14px;
    font-size:0.75rem;
    letter-spacing:0.5px;
  }

  /* Hide far-side tags that overflow on small screens */
  .t1{ left:4%; top:20%; }
  .t2{ right:4%; top:20%; }
  .t3{ left:4%; bottom:22%; }
  .t4{ right:4%; bottom:22%; }

  /* --- BOTTOM SECTION --- */
  .bottom-section{
    position:relative;
    bottom:auto;
    left:auto;
    right:auto;
    padding:30px 18px;
    flex-direction:column;
    gap:30px;
  }

  .left{
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
  }

  .left p{
    width:100%;
    font-size:0.9rem;
  }

  .scroll-box{
    width:54px;
    height:54px;
    font-size:1.5rem;
  }

  .right{
    flex-direction:column;
    gap:18px;
  }

  .exp h2{
    font-size:2.8rem;
  }

  /* --- ABOUT SECTION --- */
  .about-section{
    padding:80px 18px;
    gap:50px;
  }

  .about-left h2{
    font-size:2rem;
    letter-spacing:-1px;
  }

  .about-description{
    font-size:0.95rem;
  }

  .about-bg-text{
    font-size:32vw;
  }

  .skills-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .skill-card{
    padding:25px;
  }

  .skill-card h3{
    font-size:1.3rem;
  }

  /* --- PROJECTS SECTION --- */
  .projects-section{
    padding:80px 18px;
  }

  .projects-top{
    margin-bottom:60px;
  }

  .projects-top h2{
    font-size:2.5rem;
    letter-spacing:-2px;
  }

  .projects-top p{
    font-size:0.95rem;
  }

  .projects-wrapper{
    gap:70px;
  }

  .project-image{
    height:260px;
    border-radius:20px;
  }

  .project-content h3{
    font-size:1.8rem;
    letter-spacing:-1px;
  }

  .project-content p{
    font-size:0.9rem;
    max-width:100%;
  }

  .project-tags span{
    padding:10px 16px;
    font-size:0.82rem;
  }

  .projects-bg-text{
    font-size:32vw;
  }

  /* --- CREATIVE WALL --- */
  .creative-wall{
    padding:80px 18px;
    min-height:auto;
  }

  .wall-top{
    margin-bottom:50px;
  }

  .wall-top h2{
    font-size:2.2rem;
    letter-spacing:-2px;
  }

  .wall-top p{
    font-size:0.95rem;
  }

  .wall-container{
    height:auto;
    display:flex;
    flex-direction:column;
    gap:25px;
  }

  .wall-item{
    position:relative !important;
    width:100% !important;
    height:260px !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    border-radius:20px;
  }

  .wall-overlay h3{
    font-size:1.2rem;
  }

  .wall-bg-text{
    font-size:30vw;
  }

  /* --- CONTACT SECTION --- */
  .contact-section{
    padding:80px 18px;
  }

  .contact-header h2{
    font-size:2.2rem;
  }

  .contact-grid{
    grid-template-columns:1fr;
    gap:20px;
    margin-top:50px;
  }

  .contact-card{
    padding:28px;
  }

  .contact-card h3{
    font-size:1.4rem;
  }

  .contact-form{
    width:100%;
    padding:25px;
}

  /* --- BACKGROUND ATTACHMENT FIX FOR IOS --- */
  body::before,
  body::after{
    position:absolute;
  }
}
/* =========================================
   PREMIUM MOBILE HERO FIX
========================================= */

@media screen and (max-width: 768px){

  .hero{
    min-height:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-bottom:60px;
  }

  .navbar{
    padding:20px;
  }

  .nav-right{
    justify-content:center;
    width:100%;
  }

  .hero-text{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    margin-top:20px;
    font-size:22vw;
    text-align:center;
    line-height:0.9;
  }

  .image-glow{
    width:280px;
    height:420px;
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    margin-top:-40px;
  }

  .image-container{
    position:relative;
    top:auto;
    left:auto;
    transform:none !important;
    width:250px;
    height:380px;
    margin-top:-350px;
    animation:floatImage 6s ease-in-out infinite;
  }

  .tag{
    display:none;
  }

  .bottom-section{
    position:relative;
    bottom:auto;
    left:auto;
    right:auto;
    width:100%;
    padding:40px 20px 0;
    margin-top:40px;
  }

}