/*
|--------------------------------------------------------------------------
| 1. CSS VARIABLES (Custom Properties)
|--------------------------------------------------------------------------
*/
:root {
  /* Dark Theme Only (Max Visibility) */
  --color-primary: #f0f0f0; /* Very light grey for general text */
  --color-secondary: #9e9e9e; /* Light grey for secondary/border/metadata text */
  --color-accent: #00bcd4; /* Brighter Cyan for Main highlight */
  --color-accent-hover: #ffffff; /* White hover for buttons */
  --color-bg-dark: #121212; /* Deeper background color for contrast */
  --color-text-light: #ffffff; /* Pure white for headlines */
  --color-bg-card: #1e1e1e; /* Darker card background */
  --color-bg-section-alt: #1a1a1a; /* Subtle variation for sections */
  --color-form-bg: rgba(255, 255, 255, 0.05);
  
  /* Fonts & Spacing (Theme Agnostic) */
  --spacing-section: 60px;
  --font-family-main: "Poppins", sans-serif;
  
  /* NEW VARIABLE for Dark Navbar Text */
  --color-navbar-text: #212529; /* Dark Bootstrap default color */
}


/*
|--------------------------------------------------------------------------
| 2. BASE STYLES & TYPOGRAPHY
|--------------------------------------------------------------------------
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--color-bg-dark);
  color: var(--color-primary);
  font-family: var(--font-family-main);
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: var(--color-primary);
  transition: color 0.3s ease;
}

a:hover { color: var(--color-accent); }

h1, h2, h3 { color: var(--color-text-light); }

.section-title {
    font-size: 2.5rem;
    color: var(--color-text-light);
    margin-bottom: 2rem;
    padding-top: 1rem;
    border-bottom: 2px solid var(--color-accent);
    display: inline-block;
}

hr {
    border-top: 1px solid var(--color-secondary);
    opacity: 0.5; 
}


/*
|--------------------------------------------------------------------------
| 3. HEADER & NAVIGATION
|--------------------------------------------------------------------------
*/
.site-header {
  position: fixed;
  width: 100%;
  z-index: 1030;
  /* Light navbar background for dark text visibility */
  background-color: rgba(255, 255, 255, 0.95); 
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-secondary);
}

.navbar-brand { 
  /* Navbar Brand Text Color */
  color: var(--color-navbar-text) !important; 
  font-size: 1.5rem; 
}

/* Navbar Link Visibility Fix: Dark Text */
.nav-link { 
  color: var(--color-navbar-text) !important; 
  font-weight: 500;
  font-size: 1.1rem;
}

.nav-link:hover, .nav-link.active {
    /* Use the accent color for hover/active state */
    color: var(--color-accent) !important;
    border-bottom: 2px solid var(--color-accent);
}

/* Ensure the toggler icon is visible on the light header background */
.navbar-toggler {
    border-color: rgba(0,0,0,.1);
}
.navbar-toggler-icon {
    /* Bootstrap default uses a dark icon image */
    filter: invert(0); 
}


/*
|--------------------------------------------------------------------------
| 4. SECTION BASE STYLES
|--------------------------------------------------------------------------
*/
.section {
    padding: var(--spacing-section) 0;
    min-height: 80vh; 
    padding-top: calc(var(--spacing-section) + 80px);
}

.service-section, .contact-section {
    background-color: var(--color-bg-section-alt) !important; 
}


/*
|--------------------------------------------------------------------------
| 5. HOME SECTION (.home-section)
|--------------------------------------------------------------------------
*/
.home-section {
  background-image: url(image/background.png);
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 0;
}

.home-passport img {
  width: 100%;
  max-width: 300px;
  border-radius: 50%;
  border: 5px solid var(--color-accent);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s ease-in-out;
}

.home-passport:hover img { transform: scale(1.05); }

/* Home Section "Hey, I am" Text Fix: White color */
.home-description p {
    color: var(--color-text-light) !important; 
    font-weight: 500;
}
.home-name { text-shadow: 2px 2px 5px var(--color-secondary); }


/* Keyframe Activation Fix: Targeting span directly inside .home-profile */
.home-profile span::before {
  content: "Front-End Engineer"; /* Default content */
  color: var(--color-accent);
  font-size: 1.5rem;
  font-weight: 500;
  animation-name: change-text;
  animation-duration: 8s; 
  animation-iteration-count: infinite;
}

@keyframes change-text {
  0% { content: "I am a Front-End Engineer"; }
  20% { content: "I am a Mobile App Developer"; }
  40% { content: "I am an AI Agent Developer"; }
  60% { content: "I am a Brand Strategist"; }
  80% { content: "I am a Digital Marketing Specialist"; }
  100% { content: "I am a Front-End Engineer"; }
}

.home-button.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-bg-dark);
    border: 2px solid var(--color-accent);
}
.home-button.btn-primary:hover {
    background-color: var(--color-bg-dark);
    color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}


/*
|--------------------------------------------------------------------------
| 6. ABOUT SECTION (.about-section)
|--------------------------------------------------------------------------
*/
.about-skills .list-unstyled li {
    background-color: #2c2c2c; 
    color: var(--color-primary);
    border-left: 3px solid var(--color-accent);
    opacity: 1;
    font-weight: 500;
}


/*
|--------------------------------------------------------------------------
| 7. SERVICES SECTION (.service-section)
|--------------------------------------------------------------------------
*/
.service-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-secondary);
    padding: 0;
    position: relative;
    overflow: hidden;
    min-height: 250px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

/* Common Background Image Styling */
.service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    transition: opacity 0.3s ease, transform 0.5s ease;
    z-index: 1;
}

/* Individual Background Images */
.service-mobile::before { background-image: url('image/mobile_app.png'); }
.service-web::before { background-image: url('image/webdesign.png'); }
.service-brand::before { background-image: url('image/contentcreation.png'); }
.service-digital::before { background-image: url('image/AI_software_engineer.png'); }

.service-card:hover::before {
    opacity: 0.5;
    transform: scale(1.05);
}

.card-body {
    position: relative;
    z-index: 2;
    text-align: center;
    height: 100%;
    padding: 20px;
}

.text-overlay-white {
    color: var(--color-text-light);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    font-size: 1.5rem;
}


/*
|--------------------------------------------------------------------------
| 8. PORTFOLIO SECTION (.portfolio-section)
|--------------------------------------------------------------------------
*/
.project-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-secondary);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}


/*
|--------------------------------------------------------------------------
| 9. CONTACT SECTION (.contact-section)
|--------------------------------------------------------------------------
*/

.form-label {
    color: var(--color-primary);
    font-weight: 500;
}

.form-control {
    background-color: #2c2c2c;
    border-color: #444;
    color: var(--color-text-light);
}
.form-control::placeholder {
    color: #888;
}

.form-control:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.25rem rgba(0, 188, 212, 0.25);
}

/* Form Submit Button Styling */
.contact-section .btn-primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg-dark);
    font-weight: 600;
}

.contact-section .btn-primary:hover {
    background-color: #008c9f;
    border-color: #008c9f;
}


/*
|--------------------------------------------------------------------------
| 10. FOOTER
|--------------------------------------------------------------------------
*/
.developer-text {
    color: var(--color-primary) !important;
    font-weight: 500;
}