*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    padding-top: 56px;
}

:root {
   
--bs-primary:#1D0200;
--bs-secondary: #5D4037;
--bs-light: #FFDBB8;
--bs-info: #F5E6D3;
--light-bg: #F5F5F5;
--bs-dark: #333333;
}
  /* Apply to Bootstrap classes */
  .glass-card.navbar {
    --bs-navbar-color: var(--bs-info);
    --bs-navbar-hover-color: var(--bs-light);
    --bs-navbar-active-color: var(--bs-light);
    --bs-navbar-brand-color: var(--bs-light);
    --bs-navbar-toggler-border-color: var(--bs-light);
}

/* Force all nav items to use your colors */
.glass-card .navbar-nav .nav-link {
    color: var(--bs-navbar-color);
}

.glass-card .navbar-nav .nav-link:hover {
    color: var(--bs-navbar-hover-color);
}
.light-text{
    color: var(--bs-info);
}
.card-text{
    color: var(--light-bg);
}

.section-2-text{
  color: var(--bs-secondary);
}
.section-2-headings{
  color: var(--bs-dark);
}
.card-tool-text{
    background-color: var(--bs-secondary);
    border-radius: 5px;
    padding: 4px;
}
.navbar-brand {
    pointer-events: none; /* Disables all hover/click effects */
  }

  .progress-container {
    height: 3px;
    width: 100%;
    background: transparent;
  }
  
  .progress-bar{
    height: 3px; 
    background: var(--secondary-warm);
  }
  /* Make navbar sticky (optional) */
  .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
  }
 /* ---- particles.js container ---- */
#particles-js {
    position: fixed; /* Changed from absolute to fixed */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1; /* Ensure it stays behind content */
    background-color: var(--bs-primary); /* Using your color variable */
    overflow: hidden;
}

/* glass effect */
.glass-card {
    background: hsla(14, 26%, 29%, 0.5); 
    backdrop-filter: blur(5px); /* Adjust blur intensity */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); /* Optional subtle shadow for depth */
    border-radius: 10px; /* Optional rounded corners */
    padding: 10px; 
   
}

/* Hero Section Styling */
@media (min-width:767.98px) {
    .hero{
      max-width: 900px;
      padding: 0;
    }
    .card{
        height: 210px;
        width: 300px;
    }
   
    
  }
.hero {
    position: relative; /* Needed for z-index */
    color: var(--bs-light); /* Sets default text color */
    background: transparent; /* Or add a background if needed */
    z-index: 1; /* Ensures text appears above particles.js */
    padding: 0 15px; /* Mobile padding */
    margin: 0 auto;
    text-align: justify;
    width: 100%;
  }
  
  .hero-text {
    font-weight: 700; /* Bold text */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Better readability */
    letter-spacing: 1px; /* More elegant spacing */
    
  }

  .card{
    width: 100%; /* Full width on mobile */
    height: 200px; /* Flexible height */
    margin-bottom: 1rem;
  }
  button {
    border: 1px solid var(--secondary-warm);
    background-color: var(--bs-info);
    border-radius: 25px;
    transition: ease-in 0.3s;
  }
  button:hover{
    opacity: 0.9;
    transform: scale(1.1);
    
  }
  section:nth-of-type(2){
   min-width: 100%;
    background-color: var(--bs-secondary);
    margin-top: 10%;
  }
  
.card-bg{
  background: linear-gradient(to right,var(--bs-light),var(--bs-info))!important;
  opacity: 0.9;
}

/* Responsive Introduction Card */
.detail-card {
  min-height: 220px; /* adjust as needed for desktop */
  height: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media (max-width: 576px) {
  .detail-card {
    min-height: unset;
    height: auto;
    padding-bottom: 2rem; /* extra space for text */
  }
}


#particles-js-fourth {
  z-index: -1;
  pointer-events: none; 
}

.fourth-section{
    position: relative;
    z-index: 1;
   min-width: 100%;
    background-color: var(--bs-light);
    margin-top: 10%;
}

.project{
  background: #5D4037;
  background: radial-gradient(circle, rgba(93, 64, 55, 1) 0%, rgba(29, 2, 0, 1) 100%);
}