.elementor-4438 .elementor-element.elementor-element-4e2e66a{--display:flex;--min-height:90vh;--justify-content:center;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}@media(max-width:767px){.elementor-4438 .elementor-element.elementor-element-7aeda58 > .elementor-widget-container{padding:0px 20px 0px 20px;}}/* Start custom CSS for html, class: .elementor-element-7aeda58 */body {
            font-family: 'Red Hat Display', sans-serif;
            background-color: #111827;
            background-image: radial-gradient(ellipse at top, #4c1d95, #111827 70%);
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        
        #quiz-container {
            transition: background-color 0.5s ease;
            margin:auto;
            position: relative;
            z-index: 10;
            background-color: rgba(31, 41, 55, 0.8);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        #soundwave-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        #quiz-container h2, #quiz-container h3 {
            color: #fff !important;
        }

        .quiz-step {
            display: none;
            animation: fadeIn 0.6s ease-in-out;
        }
        .quiz-step.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .option-card, .service-label {
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
            cursor: pointer;
        }
        .option-card:hover, .service-label:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
        }
  
        .option-card.selected, .service-label.selected {
            border-color: #818cf8; /* indigo-400 */
            background-color: #374151; /* gray-700 */
            box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.4);
            transform: translateY(-2px);
        }
        
        .mb-8{
            padding-bottom:10px;
        }

        #progress-bar-inner {
            transition: width 0.5s ease-in-out;
        }

        /* --- Overrides for external theme styles --- */
        .nav-button {
            border: none !important;
        }
        .nav-button:hover {
            transform: translateY(-2px);
        }
        .nav-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        #lead-form button[type="submit"] {
             border: none !important;
        }


        .result-card, .build-your-own-card {
            animation: popIn 0.5s ease-out;
        }
        @keyframes popIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }

        /* Custom scrollbar for services container */
        #services-container::-webkit-scrollbar {
            width: 8px;
        }
        #services-container::-webkit-scrollbar-track {
            background: #374151; /* gray-700 */
        }
        #services-container::-webkit-scrollbar-thumb {
            background: #6b7280; /* gray-500 */
            border-radius: 10px;
        }
        #services-container::-webkit-scrollbar-thumb:hover {
            background: #9ca3af; /* gray-400 */
        }/* End custom CSS */