:root{
        --primary-bg: #0d1117; 
        --card-bg: #161b22;   
        --accent-color: #58a6ff; 
        --text-color: #c9d1d9;
        --btn-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
  
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
body {
        font-family: 'Inter', sans-serif;
        background-color: var(--primary-bg);
        color: var(--text-color);
        min-height: 100vh;
        line-height: 1.6;
        
    }



/* animation  and transition */
 .animated-content > * {
            opacity: 0; /* Hidden by default */
            animation: fadeIn 0.8s ease-out forwards;
        }

  .animated-content:first-child > *:nth-child(1) { animation-delay: 0.1s; } /* H1 */
  .animated-content:first-child > *:nth-child(2) { animation-delay: 0.3s; } /* P */
  .animated-content:first-child > *:nth-child(3) { animation-delay: 0.5s; } /* CTA Button */
  

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

.cta-button {
        background-color: rgb(29, 78, 216);
          transition: all 0.3s ease;
          border: 2px solid #6366f1;
      }
      
      .cta-button:hover {
          background-color:#161b22;
          transform: scale(1.05);
          
      }