/* ==========================================================================
   BASE LAYER (global defaults & variables)
   ========================================================================== */
  :root {
    /* TYPOGRAPHY */
    --text-sm:   clamp(0.8rem,  1vw, 0.9rem);
    --text-base: clamp(0.95rem, 1.5vw, 1.1rem);
    --text-lg:   clamp(1.1rem,  2vw, 1.3rem);
    --text-xl:   clamp(1.3rem, 2.5vw, 1.6rem);
    --text-2xl:  clamp(1.5rem,  3vw, 1.9rem);
    --text-3xl:  clamp(1.8rem, 3.5vw, 2.2rem);
    --text-4xl:  clamp(2.2rem,  4vw, 2.6rem);
    --text-5xl:  clamp(2.5rem,  5vw, 3rem);

    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semi-bold: 600;
    --font-weight-bold:      700;

    --font-poppins:      'Poppins', sans-serif;
    --font-merriweather: 'Merriweather', serif;

    --line-height-normal: 1.5;
    --line-height-medium: 1.6;
    --line-height-tight:  1.2;

    --letter-spacing-normal: 0;
    --letter-spacing-tight:  -0.01em;

    /* SPACING */
    --space-4:  clamp(0.3rem, 1vw,   0.5rem);
    --space-8:  clamp(0.6rem, 1.5vw, 1rem);
    --space-12: clamp(0.9rem, 2vw,   1.4rem);
    --space-16: clamp(1.2rem, 2.5vw, 2rem);
    --space-24: clamp(1.8rem, 3vw,   3rem);
    --space-32: clamp(2.4rem, 4vw,   4rem);
    --space-48: clamp(3.6rem, 5vw,   6rem);
    --space-64: clamp(4.8rem, 6vw,   8rem);

    /* CONTAINER WIDTHS */
    --container-width-md:70rem;
    --container-width-lg:  80rem;
    --container-width-xl:  120rem;

    /* BORDERS & RADIUS */
    --border-sm:   1px;
    --border-base: 2px;
    --border-lg:   3px;
    --border-xl:   4px;

    --radius-sm: clamp(0.2rem, 0.5vw, 0.4rem);
    --radius-md: clamp(0.4rem, 1vw,   0.8rem);
    --radius-lg: clamp(0.6rem, 1.5vw, 1rem);
    --radius-xl: clamp(0.8rem, 2vw,   1.2rem);

     --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.10);
    --shadow-xl: 0 16px 40px rgba(0,0,0,0.14);
    /* COLORS */
    --primary-50:  #f3f0ff;
    --primary-100: #e5dbff;
    --primary-200: #d0bfff;
    --primary-300: #b197fc;
    --primary-400: #9775fa;
    --primary-500: #845ef7;
    --primary-600: #7950f2;
    --primary-700: #7048e8;
    --primary-800: #6741d9;
    --primary-900: #5f3dc4;

    --neutral-50:  #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;
    --neutral-950: #0f0f0f;

    --white: #ffffff;
    --black: #000000;

    /* LIGHT MODE SEMANTICS */
    --bg-page:          var(--neutral-50);
    --surface-color:    var(--white);
    --border-primary:     var(--neutral-200);
    --border-secondary: var(--neutral-300);
    --border-secondary:var(--neutral-400);

    --text-secondary:   var(--neutral-800);
    --text-primary:     var(--neutral-700);
    --hero-bg:var(--neutral-50);
    --portfolio-bg:var(--neutral-50);
    --tech-bg:var(--neutral-50);
    --cta-bg:var(--neutral-50);

     --about-bg:var(--primary-50);
     --service-bg:var(--primary-50);
     --resume-bg:var(--primary-50);
     --contact-bg:var(--primary-50);
     --footer-bg:var(--primary-50);
    

    --btn-primary-bg:           var(--primary-600);
    --btn-primary-text:         var(--white);
    --btn-primary-border:       var(--primary-600);
    --btn-primary-hover-bg:     var(--primary-700);
    --btn-primary-hover-border: var(--primary-700);
    --button-shadow:          0 4px 14px rgba(121, 80, 242, 0.25);
    --button-shadow-hover:    0 8px 24px rgba(121, 80, 242, 0.35);
    --btn-primary-outline-bg:           transparent;
    --btn-primary-outline-text:         var(--primary-600);
    --btn-primary-outline-border:       var(--primary-600);
    --btn-primary-outline-hover-bg:     var(--primary-700);
    --btn-primary-outline-hover-border: var(--primary-700);
    --btn-primary-outline-hover-text:   var(--white);

    --navbar-bg:         rgba(255, 255, 255, 0.25);
    --navbar-backdrop:   blur(12px);
    --navbar-border:     1px solid rgba(255, 255, 255, 0.18);
    --navbar-text:       var(--text-secondary);
    --navbar-shadow:          var(--shadow-lg);

    --nav-menu-bg:       rgba(255, 255, 255, 0.88);
    --nav-menu-backdrop: blur(20px);
    --nav-menu-border:   1px solid rgba(0, 0, 0, 0.08);
    --nav-menu-shadow:   0 16px 48px rgba(0, 0, 0, 0.25);

    /* Shadows – light mode primitives */
    

    --shadow-primary:         var(--shadow-md);
    --shadow-primary-hover: var(--shadow-xl);
    --shadow-secondary:var(--shadow-lg);
    --shadow-secondary-hover:var(--shadow-xl);
    
    --floating-action-shadow: var(--shadow-xl);
    
  }


/* ==========================================================================
   DARK MODE – ONLY OVERRIDE WHAT CHANGES
   ========================================================================== */

[data-theme="dark"] {
  /* Page & text */
  --bg-page:           var(--neutral-950);
  --surface-color:     var(--neutral-900);
  --border-primary:      var(--neutral-700);

  --text-secondary:    var(--neutral-100);
  --text-primary:      var(--neutral-200);
  --text-secondary:  var(--neutral-100);
  --hero-bg: var(--neutral-950);
  --tech-bg:var(--neutral-950);
  --portfolio-bg:var(--neutral-950);
   --cta-bg:var(--neutral-950);

   --about-bg:rgba(121,80,242,0.05);
   
   --resume-bg:rgba(121,80,242,0.05);
   
   --service-bg:rgba(121,80,242,0.05);

   --footer-bg:rgba(121,80,242,0.05);
   
     
   --contact-bg:rgba(121,80,242,0.05);
   
  

  /* Buttons */
  --btn-primary-outline-bg: transparent;

  /* Glassmorphism & Menus */
  --navbar-bg:         rgba(30, 30, 30, 0.92);
  --navbar-backdrop:   blur(16px);
  --navbar-border:     1px solid rgba(255, 255, 255, 0.08);
  --navbar-text:       var(--neutral-100);
   --navbar-shadow:          var(--shadow-lg);

  --nav-menu-bg:       rgba(30, 30, 30, 0.65);
  --nav-menu-backdrop: blur(20px);
  --nav-menu-border:   1px solid rgba(255, 255, 255, 0.10);
  --nav-menu-shadow:   var(--shadow-xl);  /* reuse dark primitive */

  /* Shadows – use dark-adjusted primitives (no hard-coding) */
  --shadow-primary:         var(--shadow-md);
  --shadow-primary-hover:   var(--shadow-xl);
  
  --floating-action-shadow: var(--shadow-xl);
  --button-shadow:          0 4px 14px rgba(121, 80, 242, 0.20);
  --button-shadow-hover:    0 8px 24px rgba(121, 80, 242, 0.30);
}

/* ==========================================================================
   BASE STYLES (after variables)
   ========================================================================== */

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

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

body {
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  font-size: var(--text-lg);
  padding-top: var(--space-48);
  background-color: var(--bg-page);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-merriweather);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--text-secondary);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl);  }
h6 { font-size: var(--text-lg);  }

ul, ol { list-style: none; }

a {
  text-decoration: none;
  color: inherit;
    }
    





  
    


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


.btn,
.text-input,
.form-input {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  justify-content: center;
  align-items: center;
   gap:0.5em;
   text-align:center;
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-16);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}



.btn-primary {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: var(--border-sm) solid var(--btn-primary-border);
  box-shadow: var(--button-shadow);
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-border);
  transform: translateY(-2px);
  box-shadow: var(--button-shadow-hover);
}

.btn-primary-outline {
  color: var(--btn-primary-outline-text);
  background-color: var(--btn-primary-outline-bg);
  border: var(--border-sm) solid var(--btn-primary-outline-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.btn-primary-outline:hover {
  color: var(--btn-primary-outline-hover-text);
  background-color: var(--btn-primary-outline-hover-bg);
  border-color: var(--btn-primary-outline-hover-border);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(121, 80, 242, 0.2);
 }

 .text-input,
.form-input{
   background-color:var(--surface-color);
   border: 1px solid var(--border-primary);
   text-align:left;
   color:var(--text-primary);
   font-weight:300;
   font-size:14px;
}
.text-input:focus,
.form-input:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(121, 80, 242, 0.18);
  outline: none;
}

.text-input:hover,
.form-input:hover {
  border-color: var(--primary-400);
}

.text-input::placeholder,
.form-input::placeholder {
  color: var(--text-primary);
  opacity: 0.7;
 }
   
   .form-label{
   display:block;
   font-weight:var(--font-weight-medium);
   font-size:var(--text-3xl);
   margin-bottom:var(--space-12);
}


.form-description{
   font-size:var(--text-3xl);
  margin-bottom:var(--space-16);
}

  .form-container .btn-primary,
  .form-container, .form-input,
   .form-container .text-input{
     width:100%;
     padding:var(--space-16);
  }


.form-container .btn-primary{
    padding:var(--space-16);
}


   
     
.text-input{
           margin-bottom:var(--space-16);
  }

 .form-group{
   margin-bottom:var(--space-24);
 }

   /* ==========================================================================
   CARDS & FORMS
   ========================================================================== */

.card,
.form-container {
  background-color: var(--surface-color);
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  box-shadow: var(--shadow-primary);
  transition:
    transform 0.25s ease,
    box-shadow 0.3s ease,
    border-color 0.2s ease;
  overflow: hidden;
}

.card:hover,
.card:focus-within,
.form-container:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-primary-hover);
  border-color: var(--primary-400);
 }

   /* Only update the floating button to use the new shadow var */
.whatsapp-float {
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 10001;
  background-color: #25D366;
   padding:var(--space-12);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  box-shadow: var(--floating-action-shadow);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  background-color: #128C7E;
  }

  

.card-content{
   margin-top:var(--space-8);
}

.card-heading{
margin-bottom:var(--space-12);
font-size:var(--text-2xl);
}

.card-paragraph{
font-size:var(--text-xl);
margin-bottom:var(--space-12);
}

.icon-container{
margin-bottom: var(--space-8);
font-size:var(--text-xl);
color:var(--primary-500);
}
 
.card-link{
text-decoration: underline solid var(--primary-600) 2px;
                               }

  .navbar-container{
  position: fixed;
  top: 0;
  width: 100%;
  padding: var(--space-12) var(--space-16);
 z-index: 1000;
  top: 0;
  z-index: 1000;
   background: var(--navbar-bg);
  backdrop-filter: var(--navbar-backdrop);
  -webkit-backdrop-filter: var(--navbar-backdrop);  /* Safari support */
  border-bottom: var(--navbar-border);
  box-shadow: var(--navbar-shadow);
}
   
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
  width:90%;
  margin: 0 auto;
  max-width:var(--container-width-xl);
}

/*NAVBAR-LOGO*/
.brand-logo {
font-family: var(--font-merriweather);
font-weight: var(--font-weight-bold);
font-size: var(--text-4xl);
color: var(--primary-600);
display: flex;
align-items: center;
gap: var(--space-4);
 }


   .navbar-right{
    display:flex;
    align-items:center;
      justify-content:center;
    gap:var(--space-8);
} 

.nav-links-container {
  display: block;
  position: static;      /* This is good, keep it */
  width: auto;           /* Change from 100% to auto */
  background: none;      /* REMOVE THE BACKGROUND - This kills the dark box */
  backdrop-filter: none; /* REMOVE THE BLUR */
  border: none;          /* REMOVE THE BORDERS */
  box-shadow: none;      /* REMOVE THE SHADOW */
  padding: 0;            /* Remove the extra padding */
  max-height: none;      /* Let the content breathe */
  overflow: visible;
}






/* --- FULL WIDTH BOTTOM NAVIGATION --- */
/* --- FULL WIDTH BOTTOM NAVIGATION --- */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;            /* Pinned flat to the very bottom edge */
  left: 0;              /* Start from the left edge */
  width: 100%;          /* Go all the way to the right edge */
  z-index: 9999;
  
  /* Glassmorphism */
  background: var(--nav-menu-bg); 
  backdrop-filter: var(--nav-menu-backdrop);
  -webkit-backdrop-filter: var(--nav-menu-backdrop);
  
  /* Border only on the top to separate from content */
  border-top: var(--nav-menu-border); 
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
}

.nav-link-groups {
  display: flex;
  justify-content:space-around; 
  align-items: center;
   gap:var(--space-12);
  padding: 0.6rem 0;     /* Balanced vertical space */
  width: 100%;
  max-width: 800px;      /* Stops it from spreading too far on wide phones */
  margin: 0 auto;        /* Centers the icons within the bar */
}

.nav-links{
  display: flex;
  flex-direction: column; 
  align-items: center;
  gap: 4px;
  text-decoration: none;
   color: #ffffff !important;
  opacity: 1 !important;
  font-size: var(--text-2xl);     /* Small and clean labels */
  transition: all 0.3s ease;
        /* Dimmer when not active */
}

/* Active/Hover state */
.nav-links:hover, .nav-links.active {
  opacity: 1;
  color: var(--primary-500);
}

.nav-links i {
  /*font-size: 1.2rem;*/     /* Larger icons for thumb targets */
}



   

/* NAVBAR-TOGGLE-BTN */

.theme-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--text-4xl);
  padding: var(--space-4);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
  color: var(--primary-600);
  margin-right:0 auto;
}

.theme-toggle:hover {
  background-color: var(--secondary-100);
}
/* NAVBAR-BTN-COLOR */
.dark-mode .theme-toggle {
  color: var(--primary-400);
}

   /*CAROUSEL-COMPONENTS*/
.carousel-track{
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-16) var(--space-8);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;  /* Hide scrollbar Firefox */
  width: 100%;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track .card {
  flex: 0 0 280px;        /* Fixed card width for swiping */
  scroll-snap-align: start;
  margin: 0;
                     }
.carousel-indicators {
  display: flex;
 justify-content: center;
  gap:var(--space-8);
  margin-top: var(--space-16);
}

/* Individual dots */
.carousel-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-indicator.active {
  background-color: var(--primary-500);
  width: 24px;
  border-radius: 4px;
}
 
    
  
  
/*HIGHLIGHTS*/
.highlight-primary{
    color:var(--primary-600);
}












  
  


/* HERO SECTION */
.hero-section {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-48);
    padding-top:var(--space-64);
    background-color: var(--hero-bg);
    /* Add this to ensure the glow doesn't overlap other sections */
    z-index: 1; 
}

/* THE NEW GLOW (The "Aura") */
.hero-section::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 140%;
    /* This creates the soft mint/cyan glow behind the rings */
    /* Update your background line */
background: radial-gradient(circle, rgba(45, 212, 191, 0.3) 0%, rgba(0, 0, 0, 0) 90%);
    filter: blur(80px);
    z-index: -1; /* Sits behind the canvas rings */
    pointer-events: none;
}

#hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Rings are on top of the glow */
    pointer-events: none;
}

/* IMPORTANT: Ensure your text/buttons are on top of everything */
.hero-content {
    position: relative;
    z-index: 2; /* Text is on top of the rings and the glow */
   }

/* HERO CONTAINER */
.hero-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-24);
  max-width: var(--container-width-lg);
  margin: 0 auto;
  width: 90%;
}

.hero-img-container{
    overflow:hidden;
     width:100%;
    aspect-ratio:1;
   border-radius:50%;
   max-width:400px;
}

.hero-img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

/* HERO BADGE */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  background-color: rgba(121, 80, 242, 0.08);
  border: 1px solid rgba(121, 80, 242, 0.25);
  color: var(--primary-600);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-4) var(--space-12);
  border-radius: 100px;
  margin-bottom: var(--space-16);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

.wave {
  display: inline-block;
  animation: wave 2.5s infinite;
  transform-origin: 70% 70%;
  font-size: inherit;
}

@keyframes wave {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(14deg); }
  20%  { transform: rotate(-8deg); }
  30%  { transform: rotate(14deg); }
  40%  { transform: rotate(-4deg); }
  50%  { transform: rotate(10deg); }
  60%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.wave:hover { animation: none; }

   .hero-btn-container{
       display:flex;
      flex-direction:column;
       gap:var(--space-16);
   }



/* HERO HEADING */
.hero-heading {
  margin-bottom: var(--space-24);
}

/* HERO PARAGRAPH */
.hero-paragraph {
  margin-bottom: var(--space-32);
   font-size:var(--text-2xl);
}



.typing-text {
  color: var(--primary-600);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-merriweather);
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  position: relative;
  display: block;
}

.typing-text::after {
  content: "|";
  color: var(--primary-600);
  animation: blink 0.8s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}
.hero-content {
  position: relative;
  z-index: 2; 
}





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

/*ABOUT-MAIN-SECTION*/
.about-section{
margin-bottom: var(--space-48);
   background-color:var(--about-bg);
   padding:var(--space-24);
}

/*ABOUT__CONTAINER*/
.about-container {
display: flex;
flex-direction:column;
  /*align-items:center;*/
gap: var(--space-24);
   width: clamp(90%, 80vw, var(--container-width-xl));
  max-width: var(--container-width-lg);
margin: 0 auto;
width: 90%;
}



/*ABOUT-IMG-CONTAINER*/
.about-img-container {
display: flex;
/*justify-content:center;*/
   
align-items:center;
width:100%;
max-width:400px;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--radius-xl);
}

/*ABOUT-IMG*/
.about-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-xl);
}

/*ABOUT-HEADING & ABOUT-PARAGRAPH-SHARED-STYLES*/
.about-heading,
.about-paragraph {
margin-bottom: var(--space-16);
   }

/*ABOUT-HEADING*/
.about-heading {
font-size: var(--text-2xl);
}

/*ABOUT-PARAGRAPH*/
.about-paragraph {
font-size: var(--text-xl);
}


/*TECH-SECTION*/
.tech-section{
    background-color:var(--tech-bg);
    padding:var(--space-16);
}

.tech-container{
   display: flex;
   gap: var(--space-16);
    margin: 0 auto;
    width:90%;
    max-width:var(--container-width-xl);
}

.tech-stack-description,.tech-stack-title{
    text-align:center;
}

.tech-stack-description,
.tech-stack-title{
   margin-bottom:var(--space-16);
}

.tech-stack-title{
    font-size:var(--text-2xl);
}

.tech-stack-description{
   font-size:var(--text-xl);
}

.tech-stack-description{
    max-width:40ch;
    margin-inline: auto;
}

.tech-img-wrapper{
    overflow:hidden;
    width:100%;
}

.tech-img{
       width:100%;
       height:100%;
       object-fit:cover;
        display:block;
   mix-blend-mode: overlay; 
    opacity: 0.8;

}

.tech-container .card {
    position: relative;
    /*height: 180px; */
    border-radius: 12px;
    overflow: hidden;
    background: #000; /* Solid base for contrast */
}

    /* 1. THE WRAPPER OVERLAY */
.tech-img-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* This adds a dark tint directly to the wrapper background */
    background-color: rgba(0, 0, 0, 0.6); 
}



/* 3. THE TEXT CONTENT */
.card-content {
    position: relative;
    z-index: 2; /* Ensures text is always on top of the dark tint */
    padding: 1.5rem;
    height: 100%;
}

/* 4. FORCE TEXT COLOR */
.card-heading, .card-paragraph {
    color: #ffffff; /* Essential for contrast on dark images */
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Extra safety for readability */
}





/*RESUME__SECTION*/

/*RESUME-MAIN-SECTION*/
.resume-section{
margin-bottom:var(--space-64);
   background-color:var(--resume-bg);
   padding:var(--space-32);
}
/*RESUME-CONTAINER*/
.resume-container{
max-width: var(--container-width-xl);
width: 90%;
margin:0 auto;
display:flex;
flex-direction: column;
justify-content:center;
align-items:center;
}


.resume-heading {
margin-top:var(--space-12);
margin-bottom: var(--space-24);
font-size:var(--text-3xl);
   text-align:center;
}

/*RESUME-PARAGRAPH*/
.resume-paragraph{
margin-bottom:var(--space-16);
font-size:var(--text-xl);
   max-width:55ch;
   margin-inline: auto;
   text-align:center;
}

.resume-btn-container{
  display:flex;
  flex-direction:column;
   width:100%;
}

/*.resume-btn-container .btn-primary{
    display:block;
}*/

/* ===== SERVICE SECTION ===== */

/*SERVICE-MAIN-SECTION*/
.service-section{
margin-bottom: var(--space-64);
   background-color:var(--service-bg);
   padding:var(--space-32);
   
}

.service-container{
    margin: 0 auto;
   width:90%;
   max-width:var(--container-width-xl);
   display: flex;
   gap: var(--space-16);
}

.service-container .card{
      padding:0;
}

.service-container .card-content{
    padding:var(--space-8);
   
}
.service-img-wrapper{
     overflow: hidden;
      width:100%;
}

.service-img{
   width:100%;
   height:100%;
   object-fit:cover;
}

.service-container .card {
    position: relative;
    /*height: 180px; */
    border-radius: 12px;
    overflow: hidden;
    background: #000; /* Solid base for contrast */
}

    /* 1. THE WRAPPER OVERLAY */
.service-img-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* This adds a dark tint directly to the wrapper background */
    background-color: rgba(0, 0, 0, 0.6); 
}

/* 2. THE IMAGE (Sits behind the tint) */
.service-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* This mixes the image with the dark background above */
    mix-blend-mode: overlay; 
    opacity: 0.8;
}

/* 3. THE TEXT CONTENT */
.card-content {
    position: relative;
    z-index: 2; /* Ensures text is always on top of the dark tint */
    padding: 1.5rem;
    height: 100%;
}

/* 4. FORCE TEXT COLOR */
.card-heading, .card-paragraph {
    color: #ffffff; /* Essential for contrast on dark images */
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Extra safety for readability */
   }


/*SERVICE-HEADING*/
.service-heading {
   
margin-bottom: var(--space-24);
  font-size:var(--text-2xl);
}
/*SERVICE-PARAGRAPH*/
.service-paragraph {
   margin-top:var(--space-16);
font-size: var(--text-xl);
margin-bottom: var(--space-16);
}
 

.service-card-link,
.service-heading,
.service-paragraph {
text-align: center; 
}

.service-card-link{
  display:block;
   margin-top:var(--space-12);
}



/* ===== WORK / PORTFOLIO SECTION ===== */
/*WORK-MAIN-SECTION*/
.work-section{
margin-bottom: var(--space-64);
   background-color:var(--portfolio-bg);
   padding:var(--space-32);
}


.portfolio-container{
   display: flex;
   gap: var(--space-16);
    margin: 0 auto;
   width:90%;
   max-width:var(--container-width-xl);
}

   .portfolio-container .card{
      padding:0;
   }

.portfolio-container .card-content{
    padding:var(--space-8);
}

       


.portfolio-heading,
.portfolio-paragraph,
.card-link {
text-align: center;
}

/*WORK-PARAGRAPH*/
.portfolio-paragraph {
   font-size: var(--text-xl);
   margin-bottom:var(--space-16);
}
/*WORK-HEADING*/
.portfolio-heading{
    margin-bottom:var(--space-24);
    font-size:var(--text-2xl);
}

   . screenshot-wrapper{
  width: 100%;
  overflow: hidden;
   }

   .project-screenshot{
          width:100%;
           height:100%;
          object-fit:cover;
      display:block;
   }
.portfolio-container .card {
    position: relative;
    /*height: 180px; */
    border-radius: 12px;
    overflow: hidden;
    background: #000; /* Solid base for contrast */
}

    /* 1. THE WRAPPER OVERLAY */
.screenshot-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* This adds a dark tint directly to the wrapper background */
    background-color: rgba(0, 0, 0, 0.6); 
}

/* 2. THE IMAGE (Sits behind the tint) */
.project-screenshot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* This mixes the image with the dark background above */
    mix-blend-mode: overlay; 
    opacity: 0.8;
}

/* 3. THE TEXT CONTENT */
.card-content {
    position: relative;
    z-index: 2; /* Ensures text is always on top of the dark tint */
    padding: 1.5rem;
    height: 100%;
}

/* 4. FORCE TEXT COLOR */
.card-heading, .card-paragraph {
    color: #ffffff; /* Essential for contrast on dark images */
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Extra safety for readability */
}

/*CTA__SECTION*/
/*CTA-MAIN-SECTION*/
.cta-section{
margin-bottom: var(--space-32);
   padding:var(--space-32);
   
}
/*CTA-CONTAINER*/
.cta-container{
display: flex;
flex-direction: column;
justify-content: center;
gap:var(--space-16);
max-width: var(--container-width-lg);
margin: 0 auto;
width:90%;
}

/*CTA-BTN-CONTAINER*/
.cta-btn-container{
display:flex;
gap:var(--space-16);
flex-direction:column;
}

.cta-btn-container .btn-primary{
   justify-content: center;
}

/*CTA-PARAGRAPH*/
.cta-paragraph{
font-size:var(--text-2xl);
text-align:center;
}
/*CTA-HEADING*/
.cta-heading{
font-size:var(--text-5xl);
  text-align:center;
}
 
/*CONTACT SECTION*/
/*CTA-MAIN-SECTION*/
.contact-section{
   padding-top:var(--space-64);
   min-height:100vh;
  /* background-color:var(--contact-bg);*/
   margin-bottom:var(--space-32);
}

   

/*CTA-CONTAINER*/
.contact-container{
   display:flex;
   justify-content:center;
   flex-wrap:wrap;
    align-items:center;
    
    margin:0 auto;
    width:90%;
    max-width:650px;
}

.contact-heading{
   text-align:center;
  font-size:clamp(2.8rem, 5vw, 4.2rem);
   margin-bottom:var(--space-32);
}

.contact-description{
     max-width:40ch;
     font-size:var(--text-2xl);
   margin-bottom:var(--space-24);
   text-align: center;
}

/* TOAST POPUP */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #22c55e;
  color: white;
  padding: 1rem 2rem;
  border-radius: 100px;
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  box-shadow: 0 8px 30px rgba(34, 197, 94, 0.3);
  z-index: 9999;
  opacity: 0;
  transition: all 0.4s ease;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ===== FOOTER ===== */
/*FOOTER-MAIN-SECTION*/
.footer-section{
 margin-bottom: var(--space-48);
 border-top:1px solid  var(--border-color);
 padding:40px;
   background-color:var(--footer-bg)
}


/*FOOTER-CONTAINER*/
.footer-container {
display: flex;
 flex-direction:column;
  justify-content:center;
align-items: center;
gap: var(--space-8);
max-width: var(--container-width-lg);
margin: 0 auto;
width: 90%;
}

/*FOOTER-DESCRIPTION*/
.footer-description{
font-size: var(--text-2xl);
  text-align:center;
}

/*FOOTER-LINKS-CONTAINER*/
.social-link-container {
display: flex;
gap: var(--space-12);
justify-content:center;
}

/*FOOTER-LINKS*/
.social-links  {
font-size: var(--text-5xl);
color: var(--primary-500);
display: inline-flex;
justify-content: center;
align-items: center;
text-decoration:none;
} 



/* ── SCROLL ANIMATIONS ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
   }

/* The container: fixed at the top, full width */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px; /* Thin and elegant */
  background: transparent; /* Invisible until the bar moves */
  z-index: 2000; /* Stays above everything else */
}

/* The actual bar: This is what grows */
.progress-bar {
  height: 4px;
  background: #7b55f7; /* Your brand purple */
  width: 0%; /* Starts at nothing */
  box-shadow: 0 0 10px rgba(123, 85, 247, 0.7); /* Adds a 'light' effect */
  transition: width 0.1s ease-out; /* Makes it smooth as you scroll */
}