:root{

  --bg:#0f0a1f;
  --bg2:#1b1335;

  --text:#ffffff;

  --primary:#c084fc;
  --secondary:#a855f7;

  --glass:rgba(255,255,255,0.06);

  body.dark-mode{
    --card-bg:#1b1b2f;
    --text-color:#ffffff;
}


}
 body .navbar-toggler-icon {
filter: invert(1);
}


body.light{

  --bg:#f8f5ff;
  --bg2:#ede9fe;

  --text:#111;

  --glass:rgba(255,255,255,0.5);
  :root{
    --card-bg:#ffffff;
    --text-color:#222;
}

body.light .skills-tittle{
  color: #111 !important;
  transition: 0.3s;

}

}

body{

  background:var(--bg);

  color:var(--text);

  font-family:sans-serif;

  overflow-x:hidden;

  transition:0.4s;

}

/* NAVBAR */
.navbar{

  padding:20px 0;

  backdrop-filter:blur(16px);

  background:rgba(15,10,31,0.4);

}

.navbar a{

  color:var(--text);

  text-decoration:none;

  transition:0.3s;

}

.navbar a:hover{

  color:var(--primary);

}

.navbar-brand{

  color:white;

  font-size:24px;

  font-weight:bold;

}

/* THEME BUTTON */
.theme-btn{

  width:45px;

  height:45px;

  border:none;

  border-radius:50%;

  background:var(--glass);

  color:white;

}

/* HERO */
.hero{

  min-height:100vh;

  position:relative;

  overflow:hidden;

  background:
  radial-gradient(circle at top left,
  rgba(192,132,252,0.2),
  transparent 30%),

  radial-gradient(circle at bottom right,
  rgba(168,85,247,0.25),
  transparent 30%),

  var(--bg);

}

/* HERO CIRCLES */
.hero-circle{

  position:absolute;

  border-radius:50%;

  filter:blur(100px);

}

.hero-circle-1{

  width:300px;
  height:300px;

  background:#c084fc;

  top:-100px;
  left:-100px;

}

.hero-circle-2{

  width:350px;
  height:350px;

  background:#7c3aed;

  bottom:-100px;
  right:-100px;

}

/* HERO TAG */
.hero-tag{

  padding:10px 20px;

  border-radius:30px;

  background:var(--glass);

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

}

/* HERO TITLE */
.hero-title{

  font-size:70px;

  font-weight:800;

  line-height:1.1;

}

.hero-title span{

  background:
  linear-gradient(90deg,
  #c084fc,
  #a855f7);

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;

}

/* HERO TEXT */
.hero-text{

  font-size:18px;

  line-height:1.8;

  max-width:550px;

}

/* BUTTON */
.main-btn{

  background:
  linear-gradient(90deg,
  #c084fc,
  #7c3aed);

  color:white;

  padding:14px 30px;

  border-radius:40px;

  text-decoration:none;

  border:none;

  transition:0.4s;

}

.main-btn:hover{

  transform:translateY(-5px);

  box-shadow:
  0 15px 40px rgba(192,132,252,0.4);

  color:white;

}

/* OUTLINE BUTTON */
.outline-btn{

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

  padding:14px 30px;

  border-radius:40px;

  text-decoration:none;

  color:var(--text);

}

/* HERO IMAGE */
.hero-img{

  width:420px;

  max-width:100%;

  border-radius:30px;

  animation:float 4s ease-in-out infinite;

  /* box-shadow:0px 20px 60px rgba(192,132,252,0.3); */

}

/* FLOAT */
@keyframes float{

  0%{
    transform:translateY(0);
  }

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

  100%{
    transform:translateY(0);
  }

}

/* SECTION */
.section{

  padding:100px 0;

}

/* TITLE */
.section-title{

  font-size:45px;

  font-weight:bold;

}

/* ABOUT */
.about-box{

  background:var(--glass);

  backdrop-filter:blur(20px);

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

  border-radius:30px;

  padding:50px;

}

.about-img{

  border-radius:20px;

}

/* skills */
.skills-tittle{
  color: #111;
  transition: 0.3s;
}
.skill-card{
    background: var(--card-bg);
    border: 2px solid rgba(180,130,255,.2);
    border-radius: 25px;
    padding: 35px 20px;
    text-align: center;
    transition: all .4s ease;
    height: 100%;
    backdrop-filter: blur(10px);
}

.skill-card:hover{
    transform: translateY(-10px);
    border-color: #b57cff;
    box-shadow: 0 15px 35px rgba(181,124,255,.35);
}

.skill-card i{
    font-size: 55px;
    color: #b57cff;
    margin-bottom: 15px;
}

.skill-card h5{
    font-weight: 700;
    margin-bottom: 10px;
}

.skill-card p{
    opacity: .8;
    margin: 0;
}

/* PROJECT CARD */
.project-card{

  background:var(--glass);

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

  border-radius:30px;

  overflow:hidden;

  transition:0.5s;

}

.project-card:hover{

  transform:translateY(-10px);

  box-shadow:
  0 20px 40px rgba(192,132,252,0.2);

}

.project-img{

  overflow:hidden;

}

.project-img img{

  width:100%;

  transition:0.5s;

}

.project-card:hover img{

  transform:scale(1.1);

}

/* CONTENT */
.project-content{

  padding:30px;

}

.project-content span{

  color:#9982b1;

  font-size:14px;

}

.project-content h3{

  margin:15px 0;

}

.project-content p{

  line-height:1.8;

}

.project-content a{

  color:#d8b4fe;

  text-decoration:none;

}

/* CONTACT */
.contact-box{

  background:var(--glass);

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

  border-radius:30px;

  padding:50px;

  max-width:700px;

  margin:auto;
}





/* FOOTER */
footer{

  text-align:center;

  padding:40px 0;

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

   backdrop-filter:blur(16px);

  background:rgba(15,10,31,0.4);

}

.socials a{

  color:#9982b1;
   /* background:var(--glass); */

  margin:0 10px;

  font-size:50px;
  padding: 10px;
  text-align: center;

}
.socials a:hover{
  transform: scale(1.3) !important;
  transition: 0.3s;
  color: #513483;

 
}
/* CURSOR */
.cursor{

  position:fixed;

  width:20px;
  height:20px;

  border-radius:50%;

  background:
  radial-gradient(circle,
  #c084fc,
  transparent);
  outline: 1px solid #7c3aed;
  outline-offset: 5px;

  pointer-events:none;

  z-index:9999;

     transform: translate(-50%,-50%);
    transition: width 0.2s, height 0.2s, opacity 0.2s;
    mix-blend-mode: difference;

}
.cursor-ring {
    width: 36px; height: 36px;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%,-50%);
    transition: all 0.12s ease;
    opacity: 0.5;
  }

/* RESPONSIVE */
@media(max-width:991px){

  .hero{

    text-align:center;

    padding-top:120px;

  }

  .hero-title{

    font-size:50px;

  }

  .hero-img{

    width:300px;

    margin-top:50px;

  }

}