body {
            font-family: 'Inter', sans-serif;
            background-color: #f1f5f9;  
        }       
        .bg-custom-blue { background-color: #3b82f6; }
        .bg-custom-cyan { background-image: linear-gradient(to top, #22d3ee, #06b6d4); }
        .bg-custom-yellow { background-image: linear-gradient(to top, #c6d83b, #a3e635); }
        .bg-custom-green { background-color: #22c55e; }
        .bg-custom-pink { background-color: #ec4899; }
        .bg-custom-gray { 
            background-color: #4b5563;
            background-image: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
        }
        .bg-custom-purple { background-color: #8b5cf6; }
        


            @media (min-width: 340px) and (max-width: 370px) {
         
        h3 {
            font-size: 1.94rem !important;  
            line-height: 2.00;   
        }
        
        
        p.font-medium {
            font-size: 1.16rem;  
        }
         
        p.opacity-80 {
            font-size: 1.11rem;  
        }
    }
    
   
   @media (min-width: 340px) and (max-width: 370px) {
    
    .w-\[clamp\(3rem\,calc\(2rem\+4vw\)\,4rem\)\] {
        width: 4.8rem !important;
        height: 4.8rem !important;
        margin-bottom: 1.95rem !important;
    }
     
    .absolute.top-1.left-1 {
        width: 4.5rem !important;
        height: 4.5rem !important;
    }
}



            @media (min-width: 370px) and (max-width: 400px) {
         
        h3 {
            font-size: 0.94rem !important;  
            line-height: 2.00;   
        }
                 
        p.font-medium {
            font-size: 0.66rem;  
        }

         
        p.opacity-80 {
            font-size: 0.61rem; 
        }
    }
    
   
   @media (min-width: 370px) and (max-width: 400px) {
     
    .w-\[clamp\(3rem\,calc\(2rem\+4vw\)\,4rem\)\] {
        width: 2.8rem !important;
        height: 2.8rem !important;
        margin-bottom: 0.75rem !important;
    }

     
    .absolute.top-1.left-1 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}



            @media (min-width: 400px) and (max-width: 450px) {
         
        h3 {
            font-size: 0.98rem !important;  
            line-height: 2.20;   
        }        
         
        p.font-medium {
            font-size: 0.70rem; 
        }
         
        p.opacity-80 {
            font-size: 0.65rem;  
        }
    }
    
   
   @media (min-width: 400px) and (max-width: 450px) {
     
    .w-\[clamp\(3rem\,calc\(2rem\+4vw\)\,4rem\)\] {
        width: 2.9rem !important;
        height: 2.9rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .absolute.top-1.left-1 {
        width: 2.6rem !important;
        height: 2.6rem !important;
    }
}




            @media (min-width: 450px) and (max-width: 500px) {
         
        h3 {
            font-size: 1.18rem !important;  
            line-height: 2.40;   
        }        
         
        p.font-medium {
            font-size: 0.80rem;  
        }
         
        p.opacity-80 {
            font-size: 0.75rem;  
        }
    }
    
   
   @media (min-width: 450px) and (max-width: 500px) {
     
    .w-\[clamp\(3rem\,calc\(2rem\+4vw\)\,4rem\)\] {
        width: 3.2rem !important;
        height: 3.2rem !important;
        margin-bottom: 0.75rem !important;
    }
     
    .absolute.top-1.left-1 {
        width: 2.9rem !important;
        height: 2.9rem !important;
    }
}





            @media (min-width: 500px) and (max-width: 550px) {
         
        h3 {
            font-size: 1.18rem !important;  
            line-height: 2.40;   
        }        
        
        p.font-medium {
            font-size: 0.80rem;  
        }
         
        p.opacity-80 {
            font-size: 0.75rem; 
        }
    }
    
   
   @media (min-width: 500px) and (max-width: 550px) {
     
    .w-\[clamp\(3rem\,calc\(2rem\+4vw\)\,4rem\)\] {
        width: 3.5rem !important;
        height: 3.5rem !important;
        margin-bottom: 1.75rem !important;
    }
     
    .absolute.top-1.left-1 {
        width: 3.2rem !important;
        height: 3.2rem !important;
    }
}


            @media (min-width: 550px) and (max-width: 600px) {
         
        h3 {
            font-size: 1.28rem !important;  
            line-height: 2.40;   
        }
                 
        p.font-medium {
            font-size: 0.88rem;  
        }
         
        p.opacity-80 {
            font-size: 0.83rem;  
        }
    }
    
   
   @media (min-width: 550px) and (max-width: 600px) {
     
    .w-\[clamp\(3rem\,calc\(2rem\+4vw\)\,4rem\)\] {
        width: 3.8rem !important;
        height: 3.8rem !important;
        margin-bottom: 1.75rem !important;
    }
     
    .absolute.top-1.left-1 {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }
}



            @media (min-width: 600px) and (max-width: 650px) {
         
        h3 {
            font-size: 1.00rem !important;  
            line-height: 2.00;   
        }        
         
        p.font-medium {
            font-size: 0.66rem;  
        }
         
        p.opacity-80 {
            font-size: 0.61rem; 
        }
    }
    
   
   @media (min-width: 600px) and (max-width: 650px) {
     
    .w-\[clamp\(3rem\,calc\(2rem\+4vw\)\,4rem\)\] {
        width: 3.0rem !important;
        height: 3.0rem !important;
        margin-bottom: 0.75rem !important;
    }
     
    .absolute.top-1.left-1 {
        width: 2.7rem !important;
        height: 2.7rem !important;
    }
}


            @media (min-width: 650px) and (max-width: 700px) {
         
        h3 {
            font-size: 1.15rem !important; 
            line-height: 2.00;   
        }
                 
        p.font-medium {
            font-size: 0.72rem;  
        }
         
        p.opacity-80 {
            font-size: 0.67rem;  
        }
    }
    
   
   @media (min-width: 650px) and (max-width: 700px) {
     
    .w-\[clamp\(3rem\,calc\(2rem\+4vw\)\,4rem\)\] {
        width: 3.2rem !important;
        height: 3.2rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .absolute.top-1.left-1 {
        width: 2.9rem !important;
        height: 2.9rem !important;
    }
}



            @media (min-width: 700px) and (max-width: 750px) {
         
        h3 {
            font-size: 1.15rem !important;  
            line-height: 2.40;   
        }        
         
        p.font-medium {
            font-size: 0.72rem; 
        }
        
        p.opacity-80 {
            font-size: 0.67rem;  
        }
    }
    
   
   @media (min-width: 700px) and (max-width: 750px) {
     
    .w-\[clamp\(3rem\,calc\(2rem\+4vw\)\,4rem\)\] {
        width: 3.4rem !important;
        height: 3.4rem !important;
        margin-bottom: 1.15rem !important;
    }
    
    .absolute.top-1.left-1 {
        width: 3.1rem !important;
        height: 3.1rem !important;
    }
}


            @media (min-width: 750px) and (max-width: 2000px) {
         
        h3 {
            font-size: 1.15rem !important;  
            line-height: 2.40;   
        }        
         
        p.font-medium {
            font-size: 0.72rem;  
        }
         
        p.opacity-80 {
            font-size: 0.67rem;  
        }
    }
    
   
   @media (min-width: 750px) and (max-width: 2000px) {
     
    .w-\[clamp\(3rem\,calc\(2rem\+4vw\)\,4rem\)\] {
        width: 3.5rem !important;
        height: 3.5rem !important;
        margin-bottom: 1.75rem !important;
    }
     
    .absolute.top-1.left-1 {
        width: 3.2rem !important;
        height: 3.2rem !important;
    }
}