/* =====================================
   AVINASH KONDURI PORTFOLIO
   PREMIUM 3D DESIGN SYSTEM
===================================== */

:root {

  --bg-primary: #0b1120;
  --bg-secondary: #111827;

  --primary: #38bdf8;
  --secondary: #8b5cf6;
  --accent: #06b6d4;

  --text-primary: #ffffff;
  --text-secondary: #94a3b8;

  --glass-bg: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.1);

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

  --transition: all .4s ease;
}

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

html{
  scroll-behavior:smooth;
}

body{

  font-family:'Inter',sans-serif;

  background:
  linear-gradient(
      135deg,
      #020617,
      #0f172a,
      #111827
  );

  color:var(--text-primary);

  overflow-x:hidden;
}

/* =====================================
   THREE CANVAS
===================================== */

#bgCanvas{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  z-index:-1;
}

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

.navbar{

  background:
  rgba(11,17,32,.85);

  backdrop-filter:blur(15px);

  padding:15px 0;

  transition:var(--transition);

  z-index:999;
}

.navbar-brand{

  color:white !important;

  font-weight:800;

  letter-spacing:1px;
}

.nav-link{

  color:#cbd5e1 !important;

  margin-left:15px;

  transition:.3s;
}

.nav-link:hover{

  color:var(--primary) !important;
}

.navbar-toggler{

  border:none;
  color:white;
}

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

.hero{

  min-height:100vh;

  display:flex;

  align-items:center;

  padding-top:120px;
  padding-bottom:80px;
}

.hero-badge{

  display:inline-block;

  background:
  rgba(56,189,248,.15);

  color:var(--primary);

  padding:10px 18px;

  border-radius:50px;

  margin-bottom:25px;

  font-size:14px;
}

.hero h1{

  font-size:4.5rem;

  font-weight:800;

  line-height:1.1;
}

.gradient-text{

  background:
  linear-gradient(
      90deg,
      var(--primary),
      var(--secondary)
  );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;
}

.hero-tech{

  font-size:1.2rem;

  color:var(--primary);

  margin:25px 0;
}

.hero-description{

  color:var(--text-secondary);

  font-size:1.1rem;

  line-height:1.8;

  max-width:700px;
}

.hero-buttons{

  margin-top:35px;

  display:flex;

  gap:15px;

  flex-wrap:wrap;
}

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

.btn-primary-custom{

  background:
  linear-gradient(
      90deg,
      var(--primary),
      var(--secondary)
  );

  border:none;

  color:white;

  padding:14px 28px;

  border-radius:50px;

  text-decoration:none;

  transition:var(--transition);
}

.btn-primary-custom:hover{

  transform:translateY(-5px);

  color:white;

  box-shadow:
  0 15px 30px rgba(56,189,248,.35);
}

.btn-outline-custom{

  border:1px solid var(--primary);

  color:var(--primary);

  padding:14px 28px;

  border-radius:50px;

  text-decoration:none;
}

.btn-outline-custom:hover{

  background:var(--primary);

  color:white;
}

/* =====================================
   SOCIAL
===================================== */

.social-links{

  display:flex;

  gap:15px;

  margin-top:40px;
}

.social-links a{

  width:50px;
  height:50px;

  display:flex;

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

  border-radius:50%;

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

  color:white;

  text-decoration:none;

  transition:var(--transition);
}

.social-links a:hover{

  transform:translateY(-5px);

  background:
  linear-gradient(
      90deg,
      var(--primary),
      var(--secondary)
  );
}

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

.profile-wrapper{

  position:relative;

  display:inline-block;
}

.hero-image{

  width:380px;

  border-radius:50%;

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

  box-shadow:
  0 30px 60px rgba(0,0,0,.4);

  animation:
  float 5s ease infinite;
}

@keyframes float{

  0%{
      transform:translateY(0);
  }

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

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

/* =====================================
   ORBITS
===================================== */

.orbit{

  position:absolute;

  padding:10px 15px;

  border-radius:30px;

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

  backdrop-filter:blur(10px);

  font-size:12px;

  animation:
  orbitMove 6s infinite ease-in-out;
}

.orbit-1{
  top:-10px;
  left:20px;
}

.orbit-2{
  top:70px;
  right:-40px;
}

.orbit-3{
  bottom:90px;
  left:-40px;
}

.orbit-4{
  bottom:-20px;
  right:40px;
}

.orbit-5{
  top:50%;
  left:-70px;
}

@keyframes orbitMove{

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

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

section{

  padding:100px 0;
}

.section-header{

  text-align:center;

  margin-bottom:60px;
}

.section-header h2{

  font-size:3rem;

  font-weight:800;
}

.section-header p{

  color:var(--text-secondary);
}

/* =====================================
   GLASS CARD
===================================== */

.glass-card{

  background:var(--glass-bg);

  backdrop-filter:blur(14px);

  border:1px solid var(--glass-border);

  border-radius:24px;

  padding:30px;

  transition:var(--transition);

  height:100%;
}

.glass-card:hover{

  transform:translateY(-10px);

  box-shadow:var(--shadow);
}

/* =====================================
   STATS
===================================== */

.stats{

  padding-top:40px;
}

.stat-card{

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

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

  border-radius:20px;

  padding:35px;

  text-align:center;

  transition:var(--transition);
}

.stat-card:hover{

  transform:translateY(-8px);
}

.stat-card h2{

  font-size:3rem;

  font-weight:800;

  color:var(--primary);
}

.stat-card p{

  margin:0;

  color:var(--text-secondary);
}

/* =====================================
   FEATURE CARDS
===================================== */

.feature-card{

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

  border-radius:20px;

  padding:30px;

  text-align:center;

  transition:var(--transition);

  height:100%;
}

.feature-card:hover{

  transform:translateY(-10px);
}

.feature-card i{

  font-size:50px;

  color:var(--primary);

  margin-bottom:20px;
}

.feature-card h4{

  margin-bottom:15px;
}

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

.project-card{

  overflow:hidden;

  position:relative;
}

.project-card img{

  width:100%;

  height:220px;

  object-fit:cover;

  border-radius:18px;

  cursor:pointer;

  transition:var(--transition);
}

.project-card:hover img{

  transform:scale(1.05);
}

.project-content{

  margin-top:20px;
}

.project-category{

  display:inline-block;

  font-size:12px;

  background:rgba(56,189,248,.15);

  color:var(--primary);

  padding:8px 12px;

  border-radius:20px;

  margin-bottom:15px;
}

.tech-stack{

  display:flex;

  gap:8px;

  flex-wrap:wrap;

  margin-top:20px;
}

.tech-stack span{

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

  padding:8px 12px;

  border-radius:20px;

  font-size:12px;
}

/* =====================================
   ARCHITECTURE
===================================== */

.architecture-card{

  text-align:center;
}

.architecture-flow{

  display:flex;

  justify-content:center;

  align-items:center;

  flex-wrap:wrap;

  gap:20px;
}

.arch-box{

  padding:20px 25px;

  border-radius:15px;

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

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

  font-weight:600;
}

.arch-arrow{

  font-size:30px;

  color:var(--primary);
}

/* =====================================
   AI LAB
===================================== */

.ai-card{

  text-align:center;
}

.ai-card i{

  font-size:55px;

  color:var(--primary);

  margin-bottom:20px;
}

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

.skill-pills{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:20px;
}

.skill-pills span{

  padding:10px 15px;

  border-radius:25px;

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

  transition:var(--transition);
}

.skill-pills span:hover{

  background:var(--primary);

  color:#fff;
}

/* =====================================
   CERTIFICATIONS
===================================== */

.cert-card{

  text-align:center;

  font-weight:600;

  display:flex;

  align-items:center;

  justify-content:center;

  min-height:140px;
}

.cert-card:hover{

  background:
  linear-gradient(
      135deg,
      rgba(56,189,248,.15),
      rgba(139,92,246,.15)
  );
}

/* =====================================
   TIMELINE
===================================== */

.timeline{

  position:relative;

  max-width:800px;

  margin:auto;
}

.timeline::before{

  content:"";

  position:absolute;

  left:20px;

  top:0;

  width:3px;

  height:100%;

  background:var(--primary);
}

.timeline-item{

  position:relative;

  padding-left:60px;

  margin-bottom:40px;
}

.timeline-item::before{

  content:"";

  position:absolute;

  left:11px;

  top:8px;

  width:20px;

  height:20px;

  border-radius:50%;

  background:var(--primary);
}

.timeline-item h4{

  margin-bottom:5px;
}

.timeline-item span{

  color:var(--text-secondary);
}

/* =====================================
   CONTACT
===================================== */

.contact-card{

  text-align:center;
}

.contact-buttons{

  display:flex;

  justify-content:center;

  gap:15px;

  flex-wrap:wrap;

  margin-top:25px;
}

/* =====================================
   MODAL
===================================== */

.modal-content{

  background:#111827;

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

  border-radius:20px;
}

.modal-title{

  color:white;
}

.btn-close{

  filter:invert(1);
}

#modalImage{

  max-height:80vh;

  object-fit:contain;
}

/* =====================================
   FOOTER
===================================== */

footer{

  padding:40px 0;

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

  text-align:center;
}

footer p{

  margin:0;

  color:var(--text-secondary);
}

/* =====================================
   SCROLLBAR
===================================== */

::-webkit-scrollbar{

  width:10px;
}

::-webkit-scrollbar-track{

  background:#020617;
}

::-webkit-scrollbar-thumb{

  background:var(--primary);

  border-radius:10px;
}

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

@media(max-width:991px){

  .hero{

      text-align:center;
  }

  .hero h1{

      font-size:3rem;
  }

  .hero-image{

      width:280px;

      margin-top:50px;
  }

  .social-links{

      justify-content:center;
  }

  .hero-buttons{

      justify-content:center;
  }

  .architecture-flow{

      flex-direction:column;
  }

  .arch-arrow{

      transform:rotate(90deg);
  }

  .navbar-collapse{

      background:#111827;

      padding:20px;

      border-radius:20px;

      margin-top:15px;
  }

  section{

      padding:70px 0;
  }
}

@media(max-width:576px){

  .hero h1{

      font-size:2.4rem;
  }

  .section-header h2{

      font-size:2rem;
  }

  .stat-card h2{

      font-size:2.2rem;
  }

  .hero-image{

      width:220px;
  }

  .orbit{

      display:none;
  }
}