/* General Reset */
      

body {
  margin: 0;
   font-family: 'Montserrat', sans-serif;
  background: linear-gradient(90deg, #000000, #0d1b2a);
   color: #f5f5f5; /* white text */;
}

/* Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #000000, #0d1b2a);
  padding: 10px 20px;
  color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

nav {
  
}

.logo-left img,
.logo-right {
  height: 40px;
  cursor: pointer;
}
/* Center title */
.nav-center {
  font-size:8px;
  flex: 1;                          /* take remaining space */
  text-align: center;               /* center content */
}

.right-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

.dropdown {
  position: relative;
}

.dropdown-toggle {
  background: none;
  border: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
}

.dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  top: 50px;
  right: 0;
  width: 180px;
  background: #1565c0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  display: none;
  flex-direction: column;
}

.dropdown-menu li {
  padding: 10px 20px;
}

.dropdown-menu li a {
  text-decoration: none;
  color: white;
  display: block;
}

.dropdown-menu li a:hover {
  background: rgba(255,255,255,0.15);
}

.dropdown-menu.open {
  display: flex;
}

/* Centered Round Image */
.profile-image {
  display: flex;
  justify-content: center;
  margin: 40px 0; /* space below navbar */
}

.profile-image img {
  width: 140px;
  height: 140px;
  border-radius: 50%;              /* make it round */
  object-fit: cover;               /* crop nicely */
  border: 4px solid #1976d2;       /* bluish border */
  box-shadow: 0 6px 20px rgba(0,0,0,0.2); /* soft shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-image img:hover {
  transform: scale(1.05);          /* smooth zoom on hover */
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* Sections */
section {
  min-height: 1vh;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* Scroll Animation Base */
.content {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

.content.show {
  opacity: 1;
  transform: translateY(0);
}

/* Different Effects */
.fade-left {
  transform: translateX(-80px);
}
.fade-right {
  transform: translateX(80px);
}
.fade-up {
  transform: translateY(90px);
}

.fade-left.show,
.fade-right.show,
.fade-up.show {
  transform: translate(0, 0);
  opacity: 1;
}

/* Scroll Reveal Effect */
.content {
  opacity: 0;
  transform: translateY(80px); /* Start lower */
  transition: all 0.8s ease-out;
}

.content.show {
  opacity: 1;
  transform: translateY(0); /* Move up into place */
}
/* Reset margins/padding to prevent sideways shift */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* stop horizontal scroll */
}
/* ABOUT SECTION - slim rectangle full width */
.about-section {
  position: relative;
  width: 100%;        
  height: 253px;      /* slim banner height */
  overflow: hidden;
  margin: 0;          
  padding: 0;
  border-radius: 110px;   /* ✅ circular ends */
}

/* Background image */
.about-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;        
  height: 100%;
  object-fit: cover;
  filter: blur(4px) brightness(0.7);
  transform: scale(1.05);
  z-index: 1;
  border-radius: 80px;   /* ✅ match parent curve */
}

/* Overlay */
.about-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 2;
  border-radius: 80px;   /* ✅ match curve */
}

/* Text */
.about-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  padding: 0 15px;
}

.about-content h2 {
  margin: 0;
  font-size: 1.6rem;
}

.about-content p {
  margin: 6px 0 0;
  font-size: 0.95rem;
  max-width: 700px;
}


html {
  scroll-behavior: smooth;
}  


  :root{
  --cube-w: 170px;
  --cube-h: 300px;
  --tz: 85px;
  --section-radius: 100px;
}
*{box-sizing:border-box}

/* container */
.skills-section{
  position:relative;
  margin:28px;
  border-radius:var(--section-radius);
  overflow:hidden;
  padding:28px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  min-height:420px;
  background:transparent;
}

/* two background layers for smooth crossfade */
.bg-layer{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transition:opacity 0.6s ease;
  opacity:0;
  z-index:0;
  filter: blur(6px) brightness(0.75);
  transform: scale(1.02);
  pointer-events:none;
}
#bgA { opacity:1; }

/* header */
.skills-content{
  position:relative; z-index:2; color:#fff; text-align:center;
}
.skills-content h2{margin:0;font-size:1.9rem}
.skills-content p{margin:6px 0 0;font-size:0.95rem;color:#e6eef9}

/* cube area */
.cube-area{ position:relative; z-index:2; width:100%; display:flex; align-items:center; justify-content:center; }

/* cube container */
.cube-container{
  width:var(--cube-w);
  height:var(--cube-h);
  perspective:1200px;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action: pan-y;
}

/* cube */
.cube{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform 0.6s cubic-bezier(.2,.9,.2,1);
}

/* face */
.face{
  position:absolute;
  width:100%;
  height:100%;
  border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:16px;
  color:#fff; text-align:center;
  backface-visibility:hidden;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 10px 28px rgba(2,10,30,0.25);
  overflow:hidden;
}
.face::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.22));
  z-index:0;
}
.face > * { position:relative; z-index:1 }
.face h3{ margin:0 0 8px; color:#4A90E2; font-size:1.25rem }
.face p{ margin:0;font-size:0.92rem;line-height:1.35;color:#e9f3ff }

/* positions */
.front { transform: rotateY(0deg) translateZ(var(--tz)); }
.right { transform: rotateY(90deg) translateZ(var(--tz)); }
.back  { transform: rotateY(180deg) translateZ(var(--tz)); }
.left  { transform: rotateY(-90deg) translateZ(var(--tz)); }

/* responsive */
@media (max-width:900px){
  :root{ --cube-w:150px; --cube-h:260px; --tz:72px }
  .skills-section{ min-height:420px }
}
@media (max-width:520px){
  :root{ --cube-w:120px; --cube-h:220px; --tz:60px }
  .skills-section{ padding:22px 12px; min-height:360px }
  .skills-content h2{ font-size:1.3rem }
}
/* Work Together Section */
.work-section {
  margin: 40px 20px;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  padding: 40px 20px;
}

/* Content */
.work-content {
  color: #fff;
}

/* Highlight behind the text */
.highlight-text {
  background: #0d1b2a; /* transparent blue */
  padding: 10px 25px;
  border-radius: 40px;
  backdrop-filter: blur(6px);
  font-size: 2rem;
  font-weight: 600;
}

/* Glowing button */
.hire-btn {
  margin-top: 20px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 500;
  color:white;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.4s ease;
  animation: pulseGlow 2.5s infinite ease-in-out;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Hover effect */
.hire-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(0, 180, 255, 0.9),
              0 0 40px rgba(0, 180, 255, 0.6),
              0 0 60px rgba(0, 180, 255, 0.4);
}

/* Button pulse animation */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 25px rgba(0, 180, 255, 0.8),
                0 0 50px rgba(0, 180, 255, 0.6);
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .highlight-text {
    font-size: 1.5rem;
    padding: 8px 18px;
  }
  .hire-btn {
    padding: 10px 24px;
    font-size: 0.9rem;
  }
}

.footer {
  background: #0d1b2a;          /* dark blue background */
  color: white;
  text-align: center;
  padding: 30px 15px 15px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}

.footer-socials {
  margin-bottom: 15px;
}

.footer-socials .social {
  display: inline-block;
  margin: 0 12px;
  font-size: 1.4rem;
  color: white;
  transition: all 0.3s ease;
}

.footer-socials .social:hover {
  color: #00b4d8;   /* glowing blue hover */
  transform: scale(1.2);
}

.footer-copy {
  font-size: 0.9rem;
  opacity: 0.8;
}