:root{
      --text-secondary: #4a5568;
  --space-4xl: 6rem;
 --background-white: #ffffff;
  --radius-xl: 1rem;
 --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --transition-normal: 0.3s ease;
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --space-lg: 1.5rem;
  --primary-teal: #13b495;
  --dark-teal: #0d8b75;
  --font-weight-semibold: 600;
 --font-weight-medium: 500;
  --space-sm: 0.5rem;
  --space-2xl: 3rem;
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --gradient-primary: linear-gradient(135deg, var(--primary-teal) 0%, var(--dark-teal) 100%);

 }
 body {
            font-family: 'Inter', sans-serif;
        }

        .fade-in {
            animation: fadeIn 0.6s ease-in-out;
        }

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

        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .animate-on-scroll.animate {
            animation: fadeInUp 0.6s ease forwards;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #ffffff 0%, #d8f8f2 50%, #ffffff 100%);

        }

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

        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                        0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .text-brand-green {
            color: #14b595 !important; /* Tailwind's green-500 */
        }

        .bg-brand-green {
            background-color: #14b595 !important;
        }

        .border-brand-green {
            border-color: #14b595 !important;
        }
.bg-brand-g
        {
            background-color: #DCFCE7 !important;
        }

        .text-brand-blue-gray {
            color: #334155; /* Tailwind's slate-800 */
        }

        .hover-scale:hover {
            transform: scale(1.05);
        }

        .transition-all {
            transition: all 0.3s ease;
        }
        .font{
            font-size:3.8rem;
        }
        .transition-hover {
            transition: transform 0.3s ease;
        }

        .transition-hover:hover {
            transform: scale(1.05);
            /* Optional: add a subtle shadow to enhance the zoom */
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .bg-purple {
            background-color: #7f7886 !important; /* Bootstrap's purple */
        }
        .text-purple{
            color:#9333EA;
        }
        .orange{
            color:orange !important;
        }

    .hover-industry:hover{
        background-color: #D8F8F2 !important;
        transition: all 0.3s ease !important;
        transform: translateY(-5px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
     




        /* resource */
/* Optional: Custom Enhancements */
.resource-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #00bfa6, #00796b); /* Example gradient */
  font-size: 1.25rem;
  z-index: 2;
}

.resource-image {
  height: 200px;
  object-fit: contain;
}

.resource-link {
  color: #00bfa6;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.3s ease;
}

.resource-link:hover {
  color: #00796b;
}


/* Style only when auto-assign.webp is shown */
img#benefitImage[src="img/auto-assign.webp"] {
  height: 380px;
  width: auto;
  display: block;
  margin-top: auto;
  margin-bottom: auto;
  object-fit: contain;
}


        /* resource end */
@media only screen and (max-width: 768px) {
 
    .font{
        font-size: 28px !important;
    }
    .size{
        font-size: 20px !important;
    }
    .btn-size
    {
        width:100% !important;
    }
   
}