html { scroll-behavior: smooth; }

    .glass {
      background: rgba(18,18,18,0.65);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .border-left-card {
      border-left: 5px solid rgb(255, 97, 97);
    }
    .border-left-card-1 {
      border-left: 5px solid rgb(189, 0, 0);
    }
    .border-left-card-2 {
      border-left: 5px solid #ef4444;
    }
    .border-left-card-3 {
      border-left: 5px solid #f97316;
    }

    .gradient-text {
      background: linear-gradient(90deg,#ff3b6a,#ff7a18);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .card-hover {
      transition: all .4s ease;
    }

    .card-hover:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 35px 90px rgba(255,60,100,0.35);
    }

    .hamburger-hover:hover {
      transform: translateY(-5px);
      transition: all .3s ease;
      box-shadow: 0 15px 40px rgba(255,60,100,0.25);
    }

    .glow::before {
      content: "";
      position: absolute;
      inset: -2px;
      background: linear-gradient(135deg,#ff3b6a,#ff7a18,#ff3b6a);
      filter: blur(18px);
      opacity: .8;
      z-index: -1;
      border-radius: inherit;
    }

    .nav-btn {
      position: relative;
      transition: color .3s ease;
    }
    .nav-btn:hover{
      background: linear-gradient(90deg,#ff3b6a,#ff7a18);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: all .3s ease;
      transform: scale(1.1);
    }

    .main {
      background-image: url('https://www.transparenttextures.com/patterns/dark-mosaic.png');
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translate(-50%, 20px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }

    .animate-fade-in {
      animation: fadeIn .35s ease;
    }
  
    @keyframes fadeOut {
      from { opacity: 1; transform: translate(-50%, 20px); }
      to { opacity: 0; transform: translate(-50%, 0); }
    }

    .animate-fade-out {
      animation: fadeOut .35s ease-in forwards;
    }

    .text-fade-in {
        animation: textFadeIn .8s ease-out forwards
    }

    @keyframes textFadeIn {
        0% { opacity: 0; transform: translateY(0px) }
        90% { opacity: 1; transform: translateY(-20px) }
        100% { opacity: 1; transform: translateY(0px) }
    }

  .btn-hover { 
    position: relative; 
    overflow: hidden; 
    transition: all .3s ease; 
  } 
  .btn-hover:hover { 
    transform: translateY(-6px) scale(1.02); 
    box-shadow: 0 35px 90px rgba(255,255,255,0.6); 
  } 
  .btn-info { 
    position: relative; 
    transition: all .3s ease; 
    color: #ffffff; 
    background-color: #1f2937; 
    border-radius: 0.75rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    top: -10px;
    margin-left: -10px;
  }
  .btn-info:hover { 
    transform: translateY(-4px) scale(1.05); 
    box-shadow: 0 25px 70px rgba(255,255,255,0.4); 
  }
  li {
    list-style-type: circle;
    margin-left: -2px;
  }