.home-container {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
   }
   
   .content-wrapper {
     flex: 1;
     max-width: 1200px;
     margin: 0 auto;
     padding: 2rem;
   }
   
   .hero-section {
     text-align: center;
     padding: 4rem 2rem;
     background: linear-gradient(135deg, #6c5ce7, #a363d9);
     color: white;
     margin-bottom: 3rem;
     border-radius: 10px;
     box-shadow: 0 8px 32px rgba(108, 92, 231, 0.2);
   }
   
   // Animation for title
   .animate-title {
     font-size: 3.5rem;
     margin-bottom: 1rem;
     opacity: 0;
     animation: slideDown 0.8s ease forwards;
   }
   
   .animate-subtitle {
     font-size: 1.3rem;
     opacity: 0;
     animation: slideUp 0.8s ease 0.3s forwards;
   }
   
   .features {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2rem;
     padding: 0 1rem;
     margin: 0 auto;
     max-width: 1200px;
   }
   
   .feature-card {
     background: white;
     padding: 2.5rem;
     border-radius: 15px;
     text-align: center;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     opacity: 0;
     transform: translateY(20px);
   
     &:hover {
       transform: translateY(-5px) scale(1.02);
       box-shadow: 0 8px 16px rgba(108, 92, 231, 0.2);
     }
   
     &.animate-card {
       animation: fadeInUp 0.6s ease forwards;
     }
   
     @for $i from 1 through 3 {
       &:nth-child(#{$i}) {
         animation-delay: #{$i * 0.2}s;
       }
     }
   
     i {
       font-size: 2.8rem;
       color: #6c5ce7;
       margin-bottom: 1.5rem;
       transition: transform 0.3s ease;
   
       &:hover {
         transform: rotate(360deg);
       }
     }
   
     h3 {
       margin-bottom: 1rem;
       color: #2d3436;
       font-size: 1.5rem;
     }
   
     p {
       color: #636e72;
       line-height: 1.6;
     }
   }
   
   // Footer styles
   .footer {
     background: #2d3436;
     color: white;
     padding: 3rem 0 1rem;
     margin-top: 4rem;
   
     .footer-content {
       max-width: 1200px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 2rem;
       padding: 0 2rem;
     }
   
     .footer-section {
       h4 {
         color: #6c5ce7;
         margin-bottom: 1rem;
         font-size: 1.2rem;
       }
   
       p {
         color: #b2bec3;
         line-height: 1.6;
       }
     }
   
     .social-icons {
       display: flex;
       gap: 1rem;
       margin-top: 1rem;
   
       i {
         font-size: 1.5rem;
         cursor: pointer;
         transition: color 0.3s ease;
   
         &:hover {
           color: #6c5ce7;
         }
       }
     }
   
     .footer-bottom {
       text-align: center;
       margin-top: 2rem;
       padding-top: 2rem;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
   
       p {
         color: #b2bec3;
         font-size: 0.9rem;
       }
     }
   }
   
   // Animations
   @keyframes slideDown {
     from {
       transform: translateY(-30px);
       opacity: 0;
     }
     to {
       transform: translateY(0);
       opacity: 1;
     }
   }
   
   @keyframes slideUp {
     from {
       transform: translateY(30px);
       opacity: 0;
     }
     to {
       transform: translateY(0);
       opacity: 1;
     }
   }
   
   @keyframes fadeInUp {
     from {
       opacity: 0;
       transform: translateY(20px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   // Responsive adjustments
   @media (max-width: 768px) {
     .hero-section {
       padding: 3rem 1rem;
     }
   
     .animate-title {
       font-size: 2.5rem;
     }
   
     .features {
       grid-template-columns: 1fr;
     }
   }