:root,
[data-bs-theme="dark"] {
    --bs-primary: #1e3a8a;
    --bs-primary-rgb: 30, 58, 138;
}

:root {
    --bs-body-font-family: 'Raleway', sans-serif;
}

body, h1, h2, h3, h4, h5, h6 {
    font-family: var(--bs-body-font-family);
}


    
    body {
      scroll-behavior: smooth;
    }
    header {
      background: #0d6efd;
      color: white;
      padding: 4rem 0;
    }
    section {
      padding: 4rem 0;
    }
    .section-title {
      font-size: 2rem;
      margin-bottom: 2rem;
    }
    footer {
      background-color: #f8f9fa;
      padding: 2rem 0;
    }
    


  
  

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

  .btn-primary:hover {
    background-color: #2c4995;
    border-color: #2c4995;
  }

  header {
    background-color: var(--bs-primary);
  }
  
  .logo  {
    fill: #fff;
    stroke: none; 
  }
  
  @media (min-width: 900px) {
    .logo{
        max-width: 700px;
    }
  }
  
  a, button {
  transition: color 0.2s ease, background-color 0.2s ease;
}
a:hover, button:hover {
  background-color: var(--blue-light);
}

:focus {
  outline: 3px dashed var(--blue-light);
  outline-offset: 3px;
}
    
    .animate-text {
      opacity: 0; /* Hidden by default */
      transform: translateY(20px); /* Move text slightly down */
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    
    /* Add the visible class when the section is in the viewport */
    .animate-text.visible {
      opacity: 1; /* Fully visible */
      transform: translateY(0); /* Move to original position */
    }