/* ============================================================
   PREMIUM PORTFOLIO - CSS
   ============================================================ */

/* CSS Variables */
:root {
    --color-primary: #0B0B0B;
    --color-secondary: #1A1A1A;
    --color-tertiary: #2A2A2A;
    --color-accent: #00E5A8;
    --color-text: #FFFFFF;
    --color-text-secondary: #B0B0B0;
    --color-text-muted: #808080;
    --color-border: #333333;
    
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 20px;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 20px rgba(0, 229, 168, 0.15);
    
    --transition: all 0.3s ease-in-out;
}

/* ============================================================
   GLOBAL STYLES
   ============================================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-primary);
    color: var(--color-text);
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
   letter-spacing: -0.5px;
}

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

a {
   color: var(--color-accent);
   text-decoration: none;
   transition: var(--transition);
}

a:hover {
   color: #00d49a;
}

/* ============================================================
  UTILITY CLASSES
  ============================================================ */

.section-padding {
   padding: 5rem 0;
}

.section-header {
   margin-bottom: 3rem;
}

.accent-line {
   width: 60px;
   height: 4px;
   background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
   border-radius: 2px;
   margin-top: 1rem;
}

.accent-text {
   color: var(--color-accent);
}

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

.hover-accent {
   transition: color 0.3s ease;
}

.hover-accent:hover {
   color: var(--color-accent) !important;
}

/* Glassmorphism */
.glassmorphism {
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: var(--radius-lg);
   transition: var(--transition);
}

.glassmorphism:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(0, 229, 168, 0.2);
   box-shadow: var(--shadow-glow);
}

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

.navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   background: transparent;
   border-bottom: 1px solid transparent;
   transition: var(--transition);
   padding: 1rem 0;
}

.navbar.scrolled {
   background: rgba(11, 11, 11, 0.95);
   backdrop-filter: blur(10px);
   border-bottom-color: var(--color-border);
   padding: 0.75rem 0;
   box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}

.navbar-brand {
   font-size: 1.5rem;
   font-weight: 700;
   letter-spacing: 1px;
   color: var(--color-text) !important;
}

.navbar-brand span {
   color: var(--color-accent);
}

.nav-link {
   color: var(--color-text-secondary) !important;
   font-weight: 500;
   transition: var(--transition);
   position: relative;
   margin: 0 0.5rem;
}

.nav-link:hover,
.nav-link.active {
   color: var(--color-accent) !important;
}

.nav-link::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 50%;
   width: 0;
   height: 2px;
   background: var(--color-accent);
   transform: translateX(-50%);
   transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
   width: 100%;
}

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

#hero {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
   margin-top: 60px;
}

.hero-background {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 0;
}

.shape {
   position: absolute;
   opacity: 0.1;
   animation: float 6s ease-in-out infinite;
}

.shape-1 {
   width: 400px;
   height: 400px;
   background: radial-gradient(circle, var(--color-accent), transparent);
   border-radius: 50%;
   top: -100px;
   right: -100px;
   animation: float 8s ease-in-out infinite;
}

.shape-2 {
   width: 300px;
   height: 300px;
   background: radial-gradient(circle, var(--color-accent), transparent);
   border-radius: 50%;
   bottom: -50px;
   left: -100px;
   animation: float 10s ease-in-out infinite reverse;
}

@keyframes float {
   0%, 100% { transform: translateY(0px) translateX(0px); }
   50% { transform: translateY(-30px) translateX(20px); }
}

.hero-content {
   position: relative;
   z-index: 1;
   text-align: center;
   max-width: 900px;
   margin: 0 auto;
}

.hero-title {
   font-size: clamp(2.5rem, 5vw, 4.5rem);
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 2rem;
   letter-spacing: -1px;
}

.typing-text {
   color: var(--color-accent);
   min-height: 1.2em;
}

.hero-subtitle {
   font-size: 1.25rem;
   color: var(--color-text-secondary);
   max-width: 600px;
   margin: 0 auto 2rem;
   line-height: 1.8;
}

.hero-buttons {
   display: flex;
   gap: 1rem;
   justify-content: center;
   flex-wrap: wrap;
   margin-bottom: 3rem;
}

.hero-socials {
   display: flex;
   gap: 2rem;
   justify-content: center;
   margin-bottom: 3rem;
}

.social-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 50px;
   height: 50px;
   background: rgba(0, 229, 168, 0.1);
   border: 1px solid rgba(0, 229, 168, 0.3);
   border-radius: 50%;
   color: var(--color-accent);
   font-size: 1.25rem;
   transition: var(--transition);
}

.social-icon:hover {
   background: rgba(0, 229, 168, 0.2);
   transform: translateY(-5px) scale(1.1);
   box-shadow: var(--shadow-glow);
}

.scroll-indicator {
   position: absolute;
   bottom: 30px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2;
   animation: bounce 2s infinite;
}

.scroll-indicator svg {
   width: 30px;
   height: 30px;
   stroke: var(--color-accent);
   fill: none;
   stroke-width: 2;
}

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

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

.btn {
   padding: 0.75rem 2rem;
   border: none;
   border-radius: var(--radius-md);
   font-weight: 600;
   font-size: 1rem;
   cursor: pointer;
   transition: var(--transition);
   text-decoration: none;
   display: inline-block;
   position: relative;
   overflow: hidden;
}

.btn::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 0;
   height: 0;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   transform: translate(-50%, -50%);
   transition: width 0.6s, height 0.6s;
}

.btn:active::before {
   width: 300px;
   height: 300px;
}

.btn-primary {
   background: var(--color-accent);
   color: var(--color-primary);
}

.btn-primary:hover {
   background: #00d49a;
   transform: translateY(-3px);
   box-shadow: 0 10px 30px rgba(0, 229, 168, 0.3);
}

.btn-secondary {
   background: transparent;
   color: var(--color-accent);
   border: 2px solid var(--color-accent);
}

.btn-secondary:hover {
   background: rgba(0, 229, 168, 0.1);
   transform: translateY(-3px);
}

.btn-lg {
   padding: 1rem 2.5rem;
   font-size: 1.1rem;
}

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

.about-image-wrapper {
   position: relative;
   border-radius: var(--radius-lg);
   overflow: hidden;
}

.about-image-wrapper img {
   width: 100%;
   height: auto;
   display: block;
}

.stat-box {
   padding: 1.5rem;
   background: rgba(0, 229, 168, 0.05);
   border-radius: var(--radius-md);
   border: 1px solid rgba(0, 229, 168, 0.1);
   transition: var(--transition);
}

.stat-box:hover {
   background: rgba(0, 229, 168, 0.1);
   border-color: var(--color-accent);
   transform: translateY(-5px);
}

.counter {
   font-size: 2.5rem;
}

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

.skill-card {
   height: 100%;
   transition: var(--transition);
}

.skill-card:hover {
   transform: translateY(-10px);
}

.progress-bar-custom {
   height: 8px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   overflow: hidden;
}

.progress-fill {
   height: 100%;
   background: linear-gradient(90deg, var(--color-accent), #00d49a);
   border-radius: 10px;
   width: 0%;
   animation: progressAnimation 1.5s ease-out forwards;
}

@keyframes progressAnimation {
   from {
       width: 0%;
   }
   to {
       width: 100%;
   }
}

/* ============================================================
  PORTFOLIO SECTION
  ============================================================ */

.portfolio-filters {
   margin-bottom: 3rem;
}

.filter-btn {
   padding: 0.75rem 1.75rem;
   background: transparent;
   border: 2px solid var(--color-border);
   color: var(--color-text-secondary);
   border-radius: var(--radius-md);
   cursor: pointer;
   font-weight: 600;
   transition: var(--transition);
}

.filter-btn:hover,
.filter-btn.active {
   border-color: var(--color-accent);
   color: var(--color-accent);
   background: rgba(0, 229, 168, 0.1);
}

/* Portfolio grid: force 4 columns on wide screens and let CSS handle sizing so portfolio items fill their column width */
.portfolio-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 2rem;
}


.portfolio-card {
   overflow: hidden;
   border-radius: var(--radius-lg);
   cursor: pointer;
   transition: var(--transition);
}

.portfolio-card:hover {
   transform: translateY(-10px);
}

.portfolio-image {
   position: relative;
   overflow: hidden;
   aspect-ratio: 4/3;
   background: var(--color-secondary);
}

.portfolio-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: var(--transition);
}

.portfolio-card:hover .portfolio-image img {
   transform: scale(1.1);
}

.portfolio-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: var(--transition);
}

.portfolio-card:hover .portfolio-overlay {
   opacity: 1;
}

.portfolio-content {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.portfolio-item {
   display: none;
   width: 100%;
   box-sizing: border-box;
}

.portfolio-item.show {
   display: block; /* when filter shows item, ensure it takes full column width */
   width: 100%;
   animation: fadeInUp 0.5s ease-out;
}


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

.timeline {
   position: relative;
   padding: 2rem 0;
}

.timeline::before {
   content: '';
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: 2px;
   height: 100%;
   background: linear-gradient(180deg, var(--color-accent), transparent);
}

.timeline-item {
   margin-bottom: 3rem;
   position: relative;
}

.timeline-item:nth-child(odd) .timeline-content {
   margin-left: auto;
   margin-right: 52%;
   text-align: right;
}

.timeline-item:nth-child(even) .timeline-content {
   margin-left: 52%;
   text-align: left;
}

.timeline-marker {
   position: absolute;
   left: 50%;
   top: 0;
   transform: translateX(-50%);
   width: 20px;
   height: 20px;
   background: var(--color-primary);
   border: 3px solid var(--color-accent);
   border-radius: 50%;
   z-index: 2;
}

.timeline-content {
   transition: var(--transition);
}

.timeline-content:hover {
   transform: translateY(-5px);
}

@media (max-width: 768px) {
   .timeline::before {
       left: 0;
   }
    
   .timeline-item:nth-child(odd) .timeline-content,
   .timeline-item:nth-child(even) .timeline-content {
       margin-left: 50px;
       margin-right: 0;
       text-align: left;
   }
    
   .timeline-marker {
       left: 0;
   }
}

/* ============================================================
  TESTIMONIALS SECTION
  ============================================================ */

.carousel-control-prev,
.carousel-control-next {
   opacity: 0.7;
   transition: var(--transition);
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
   opacity: 1;
   color: var(--color-accent);
}

.testimonial-card {
   border: 1px solid rgba(0, 229, 168, 0.2);
}

.carousel-item {
   transition: var(--transition);

}

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

.form-input {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: var(--color-text);
   border-radius: var(--radius-md);
   padding: 0.875rem 1.25rem;
   transition: var(--transition);
   font-size: 1rem;
}

.form-input::placeholder {
   color: var(--color-text-muted);
}

.form-input:focus {
   background: rgba(255, 255, 255, 0.08);
   border-color: var(--color-accent);
   box-shadow: 0 0 15px rgba(0, 229, 168, 0.15);
   color: var(--color-text);
   outline: none;
}

.contact-item {
   display: flex;
   gap: 1.5rem;
   margin-bottom: 2rem;
}

.contact-item i {
   flex-shrink: 0;
   margin-top: 0.25rem;
}

.social-icon-large {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 55px;
   height: 55px;
   background: rgba(0, 229, 168, 0.1);
   border: 1px solid rgba(0, 229, 168, 0.3);
   border-radius: 50%;
   color: var(--color-accent);
   font-size: 1.5rem;
   transition: var(--transition);
}

.social-icon-large:hover {
   background: rgba(0, 229, 168, 0.2);
   transform: translateY(-5px) rotate(10deg) scale(1.1);
   box-shadow: var(--shadow-glow);
}

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

footer {
   background: rgba(0, 0, 0, 0.5);
   border-top-color: var(--color-border);
   position: relative;
}

.back-to-top {
   position: fixed;
   bottom: 30px;
   right: 30px;
   width: 50px;
   height: 50px;
   background: var(--color-accent);
   color: var(--color-primary);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
   transition: var(--transition);
   z-index: 999;
   font-size: 1.25rem;
   font-weight: bold;
}

.back-to-top.show {
   opacity: 1;
   visibility: visible;
}

.back-to-top:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 30px rgba(0, 229, 168, 0.4);
}

/* ============================================================
  ANIMATIONS
  ============================================================ */

@keyframes fadeIn {
   from {
       opacity: 0;
   }
   to {
       opacity: 1;
   }
}

@keyframes fadeUp {
   from {
       opacity: 0;
       transform: translateY(30px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

@keyframes fadeInUp {
   from {
       opacity: 0;
       transform: translateY(20px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

@keyframes slideLeft {
   from {
       opacity: 0;
       transform: translateX(30px);
   }
   to {
       opacity: 1;
       transform: translateX(0);
   }
}

@keyframes slideRight {
   from {
       opacity: 0;
       transform: translateX(-30px);
   }
   to {
       opacity: 1;
       transform: translateX(0);
   }
}

@keyframes scaleUp {
   from {
       opacity: 0;
       transform: scale(0.9);
   }
   to {
       opacity: 1;
       transform: scale(1);
   }
}

/* Scroll Reveal Animation Classes */
.fade-up {
   opacity: 0;
   transform: translateY(30px);
   animation: fadeUp 0.6s ease-out forwards;
}

.fade-in {
   opacity: 0;
   animation: fadeIn 0.6s ease-out forwards;
}

.slide-left {
   opacity: 0;
   transform: translateX(30px);
   animation: slideLeft 0.6s ease-out forwards;
}

.slide-right {
   opacity: 0;
   transform: translateX(-30px);
   animation: slideRight 0.6s ease-out forwards;
}

.scale-up {
   opacity: 0;
   transform: scale(0.9);
   animation: scaleUp 0.6s ease-out forwards;
}

/* Stagger animations */
.fade-up:nth-child(1) { animation-delay: 0.1s; }
.fade-up:nth-child(2) { animation-delay: 0.2s; }
.fade-up:nth-child(3) { animation-delay: 0.3s; }
.fade-up:nth-child(4) { animation-delay: 0.4s; }
.fade-up:nth-child(5) { animation-delay: 0.5s; }
.fade-up:nth-child(6) { animation-delay: 0.6s; }

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

.modal-content {
   background: rgba(26, 26, 26, 0.95);
   border-radius: var(--radius-lg);
}

.modal-header {
   border-bottom-color: var(--color-border);
}

.modal-backdrop {
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(5px);
}

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

@media (max-width: 1024px) {
   .section-padding {
       padding: 4rem 0;
   }
    
   .hero-title {
       font-size: clamp(2rem, 4vw, 3.5rem);
   }
}

@media (max-width: 768px) {
   .section-padding {
       padding: 3rem 0;
   }
    
   .navbar {
       padding: 0.5rem 0;
   }
    
   .navbar-brand {
       font-size: 1.3rem;
   }
    
   .nav-link {
       font-size: 0.95rem;
       margin: 0.25rem 0;
   }
    
   .hero-title {
       font-size: clamp(1.75rem, 3vw, 2.5rem);
   }
    
   .hero-subtitle {
       font-size: 1rem;
   }
    
   .hero-buttons {
       flex-direction: column;
       align-items: center;
   }
    
   .hero-buttons .btn {
       width: 100%;
       max-width: 300px;
   }
    
   .hero-socials {
       gap: 1.5rem;
   }
    
   .portfolio-grid {
       grid-template-columns: 1fr;
   }
    
   .timeline::before {
       display: none;
   }
    
   .timeline-marker {
       display: none;
   }
    
   .timeline-item:nth-child(odd) .timeline-content,
   .timeline-item:nth-child(even) .timeline-content {
       margin-left: 0;
       margin-right: 0;
       text-align: left;
   }
    
   .social-icon-large {
       width: 48px;
       height: 48px;
       font-size: 1.25rem;
   }
    
   .back-to-top {
       width: 45px;
       height: 45px;
       bottom: 20px;
       right: 20px;
   }
}

@media (max-width: 576px) {
   body {
       font-size: 0.95rem;
   }
    
   .section-header h2 {
       font-size: 2rem;
   }
    
   .hero-buttons .btn {
       padding: 0.65rem 1.75rem;
       font-size: 0.95rem;
   }
    
   .display-4 {
       font-size: 2rem;
   }
    
   .skill-card {
       padding: 1.5rem !important;
   }
    
   .contact-item {
       gap: 1rem;
   }
    
   .contact-item i {
       font-size: 1.25rem;
   }
    
   .hero-socials {
       gap: 1rem;
   }
    
   .social-icon {
       width: 45px;
       height: 45px;
   }
}
/* ============================= */
/* Scroll Animation */
/* ============================= */

.reveal-up,
.reveal-left,
.reveal-right{
    opacity:0;
    transition:all .8s cubic-bezier(.22,1,.36,1);
}

.reveal-up{
    transform:translateY(40px);
}

.reveal-left{
    transform:translateX(-60px);
}

.reveal-right{
    transform:translateX(60px);
}

.reveal-up.show,
.reveal-left.show,
.reveal-right.show{
    opacity:1;
    transform:translate(0,0);
}
.hero-logo{
    width: 12vw;
    max-width: 720px;
    min-width: 480px;
    height: auto;
    display: block;
    margin: 0 auto 25px;
}
.map-img{
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
    margin: 0 auto;
}