:root {
            --bs-primary-custom: #10b981; 
            --bs-dark-custom: #1e293b;     
            --bs-whatsapp-green: #25D366;  
        }
        
       
        .bg-primary-custom { background-color: var(--bs-primary-custom) !important; }
        .text-primary-custom { color: var(--bs-primary-custom) !important; }
        .bg-dark-custom { background-color: var(--bs-dark-custom) !important; }

       
        .btn-primary-custom {
            background-color: var(--bs-primary-custom);
            border-color: var(--bs-primary-custom);
            transition: all 0.3s ease;
        }
        .btn-primary-custom:hover {
            background-color: #059669; 
            border-color: #059669;
            transform: translateY(-1px);
            box-shadow: 0 5px 10px rgba(16, 185, 129, 0.5);
        }
        
      
        .btn-whatsapp-custom {
            background-color: var(--bs-whatsapp-green);
            border-color: var(--bs-whatsapp-green);
            color: white;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        .btn-whatsapp-custom:hover {
            background-color: #128C7E;  
            border-color: #128C7E;
            color: white;
            box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
        }
        .btn-email-custom {
            border: 2px solid var(--bs-primary-custom);
            color: var(--bs-primary-custom);
            font-weight: bold;
            background-color: white;
            transition: all 0.3s ease;
        }
        .btn-email-custom:hover {
            background-color: var(--bs-primary-custom);
            color: white;
        }

      
        .card-service {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-radius: 1rem;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }
        .card-service:hover {
            transform: translateY(-5px);
            box-shadow: 0 1rem 3rem rgba(16, 185, 129, 0.2) !important;
        }

        
        .chat-window {
            height: 400px;
            background-color: #e5ddd5;  
            border-radius: 0.5rem;
            padding: 1rem;
            overflow-y: auto;
            display: flex; 
            flex-direction: column; 
        }
        .chat-bubble {
            max-width: 80%;
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            margin-bottom: 0.5rem;
            word-wrap: break-word;
        }
        .bot-message {
            background-color: #e0ffc7; 
            align-self: flex-start;
            margin-right: auto;
        }
        .user-message {
            background-color: #dcf8c6; 
            align-self: flex-end;
            margin-left: auto;
        }

        #servicios, #ventajas, #contacto {
            scroll-margin-top: 4rem; 
        }