/* RESET & BASE */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Orbitron', sans-serif; }
body { color:white; scroll-behavior:smooth; overflow-x:hidden; position:relative; z-index:1; }

/* BACKGROUND */
.gradient-bg {
  position: fixed; width:100%; height:100%;
  background: linear-gradient(135deg, rgb(94,128,130), #1f2f33, #0a0a0a);
  z-index:-2;
}

/* HEADER */
header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(12px);
  z-index:1000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 40px;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
}
.logo{font-size:1.6rem; font-weight:bold; letter-spacing:2px;}
nav ul{list-style:none; display:flex; gap:20px;}
nav a{color:white; text-decoration:none; transition:0.3s;}
nav a:hover{color:rgb(170,220,225);}

/* SECTIONS */
.section{padding:120px 10%; text-align:center; position:relative; z-index:2; scroll-margin-top:120px;}
.section-title{font-size:2.8rem; margin-bottom:40px; background:linear-gradient(90deg,rgb(94,128,130),white); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}

/* HERO */
.hero{min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.hero-container{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:60px; text-align:left;}
.hero-text{max-width:500px;}
.hero-text h1{font-size:3rem; line-height:1.2; margin-bottom:20px;}
.gradient-text{background:linear-gradient(90deg,rgb(94,128,130),white); -webkit-background-clip:text; color:transparent;}
.hero-text p{font-size:1.1rem; margin-bottom:30px; opacity:0.85;}
.primary-btn{display:inline-block; padding:14px 32px; background:rgb(94,128,130); border-radius:30px; color:white; text-decoration:none; transition:0.3s; box-shadow:0 0 15px rgba(94,128,130,0.6);}
.primary-btn:hover{transform:translateY(-3px); background:rgb(120,160,165);}
.hero-image img{width:280px; height:280px; border-radius:50%; border:4px solid rgba(255,255,255,0.3); object-fit:cover; box-shadow:0 0 30px rgba(94,128,130,0.7); transition:transform 0.5s;}
.hero-image img:hover{transform:scale(1.05);}

/* ABOUT */
.about-container{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:50px;}
.about-img{width:280px; border-radius:12px; box-shadow:0 0 25px rgba(94,128,130,0.5);}
.about-text{max-width:500px; text-align:left;}
.skills{margin-top:20px; display:flex; flex-wrap:wrap; gap:10px;}
.skills span{background:rgba(255,255,255,0.1); padding:6px 12px; border-radius:20px; font-size:0.9rem;}

/* SERVICES */
.services-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:40px;}
.service-card{background:rgba(255,255,255,0.05); backdrop-filter:blur(12px); border-radius:12px; padding:30px; text-align:center; transition:transform 0.3s, background 0.3s;}
.service-card:hover{transform:translateY(-10px); background:rgba(255,255,255,0.08);}
.service-card img{width:80px; margin-bottom:15px;}

/* PROJECTS */
.portfolio-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:30px;}
.project{position:relative; overflow:hidden; border-radius:12px; cursor:pointer; transition:transform 0.3s;}
.project img{width:100%; border-radius:12px; transition:transform 0.5s;}
.project:hover img{transform:scale(1.1);}
.project-info{position:absolute; bottom:0; width:100%; background:rgba(0,0,0,0.6); padding:12px 15px; text-align:left;}
.project-info h4{margin-bottom:5px;}
.project-info a{text-decoration:none; color:rgb(94,128,130); font-weight:bold; transition:color 0.3s;}
.project-info a:hover{color:rgb(170,230,235);}

/* CONTACT */
.contact p{margin-bottom:20px;}
.contact-icons{display:flex; justify-content:center; gap:30px;}
.contact-icons img{width:40px;  transition:transform 0.3s ease;}
.contact-icons a:hover img{transform:scale(1.2);}

/* FOOTER */
footer{background:rgba(0,0,0,0.6); text-align:center; padding:20px; font-size:0.9rem;}

/* SCROLL ANIMATIONS */
.reveal{opacity:0; transform:translateY(50px); transition:all 0.8s ease-out;}
.reveal.active{opacity:1; transform:translateY(0);}

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

nav ul{flex-direction:column; gap:10px; margin-top:10px;}
.hero-container, .about-container{flex-direction:column-reverse; text-align:center;}
.hero-text, .about-text{text-align:center;}
.hero-image img, .about-img{width:200px; height:200px;}
.services-grid, .portfolio-grid{grid-template-columns:1fr;}
.service-card, .project{width:100%;}
}

/* HAMBURGER */

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.hamburger span{
  width:25px;
  height:3px;
  background:white;
  display:block;
}

/* MOBILE NAV */

@media (max-width:900px){

  nav{
    position:absolute;
    top:80px;
    right:0;
    width:100%;
    background:rgba(0,0,0,0.95);
    backdrop-filter:blur(10px);
    max-height:0;
    overflow:hidden;
    transition:0.4s;
  }

  nav.active{
    max-height:400px;
  }

  nav ul{
    flex-direction:column;
    align-items:center;
    gap:25px;
    padding:25px 0;
  }

  .hamburger{
    display:flex;
  }

}

/* CAROUSEL */

.carousel-container{
  overflow:hidden;
  width:100%;
  margin-top:40px;
}

.carousel-track{
  display:flex;
  gap:20px;
  width:max-content;
  animation: infiniteScroll 25s linear infinite;
}

.carousel-item{
  min-width:320px;
  flex-shrink:0;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(12px);
  border-radius:12px;
  padding:15px;
}

.carousel-item img{
  width:100%;
  height:230px;
  object-fit:cover;
  border-radius:10px;
}

/* infinite animation */

@keyframes infiniteScroll{

  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(-50%);
  }

}

/* pause on hover */

.carousel-track:hover{
  animation-play-state:paused;
}