:root {
            --primary: #00efff;
            --secondary: #7000ff;
            --dark: #0a0e27;
            --surface: #1a1f3a;
            --placeholder: #ffffff;
        }
        body {
            font-family: 'Outfit', sans-serif;
            background-color: var(--dark);
            color: #e0e6ff;
        }
        .navbar {
            background-color: rgba(10, 14, 39, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
             font-family: 'Outfit', sans-serif;
        }
        
        .rounded-full
		 {
		    border-radius: 9999px;
		}
        .hero {
            position: relative;
            min-height: 90vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: linear-gradient(rgba(10, 14, 39, 0.6), rgba(10, 14, 39, 0.6)), url('/img/Empty_Stage_with_Audience2_1767993879401.jpg');
            background-size: cover;
            background-position: center;
            text-align: center;
        }
        .hero img.logo {
            height: 150px;
            filter: drop-shadow(0 0 30px rgba(0, 239, 255, 0.3));
        }
        .section-padding { padding: 100px 0; }
        .card {
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            border-radius: 20px;
            transition: transform 0.3s, border-color 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
            border-color: var(--primary);
        }
        .btn-primary {
            background-color: var(--primary);
            border: none;
            color: black;
            font-weight: bold;
            border-radius: 50px;
            padding: 12px 30px;
            box-shadow: 0 0 20px rgba(0, 239, 255, 0.4);
        }
        .btn-primary:hover {
            background-color: #00d4ff;
            box-shadow: 0 0 30px rgba(0, 239, 255, 0.6);
        }
        .feature-icon {
            width: 60px;
            height: 60px;
            background-color: rgba(0, 239, 255, 0.1);
            color: var(--primary);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 24px;
        }
        .faq-item {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 15px;
        }
        .get-started-form {
            background: rgba(255, 255, 255, 0.05);
            padding: 40px;
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .form-control {
            background: #0a0e27;
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            padding: 12px;
        }
        .form-control:focus {
            background: #0a0e27;
            border-color: var(--primary);
            color: white;
            box-shadow: none;
        }
        
        .alt-section {
		    --bs-bg-opacity: 1;
		    background-color: rgb(0 43 87 / 10%) !important;
		    border-top: 1px solid rgba(255, 255, 255, 0.1);
		    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		}
		p.text-muted {
		    color: rgb(148, 163, 184) !important;
		}
		.alt-section2 {
		    --bs-bg-opacity: 1;
		    background-color:	rgb(14,33,52) !important;
	    }
	    .form-control::placeholder { 
		  color: var(--placeholder); 
		  opacity: 0.5;    
		}
		/* Chrome, Opera, Safari */
		::-webkit-input-placeholder {
		  color: var(--placeholder); 
		}
		
		/* Internet Explorer 10-11 */
		:-ms-input-placeholder {
		  color: var(--placeholder); 
		}
		
		/* Microsoft Edge */
		::-ms-input-placeholder {
		  color: var(--placeholder); 
		}
		
		/* Firefox 19+ */
		::-moz-placeholder {
		  color: var(--placeholder); 
		  opacity: 0.5; 
		}
		
		.input_error {
			padding: 2px;
		    color: red;
		    font-size: 0.8em;
		}
		
		.faq_title {
			cursor:pointer;	
		}
		
		.social_links .social {
		    font-size: 30px;
		    vertical-align: middle;
		    color: #fff !important;
		    background: #000;
		    text-align: center;
		    border-radius: 50%;
		    display: inline-block;
		    width: 40px;
		}
		
		#about_mt {
		    max-width: 600px;
		    margin: 50px auto;
		    width: 90%;
		    text-align: center;
		    border-bottom: 1px solid #888;
		    padding-bottom: 30px;
		}
		
		
		
		#appdownload {
		    margin: 10px auto 50px auto;
		    max-width: 850px;
		}
		#appdownload .appstoreimg {
		    width: 40%;
		    float: left;
		    margin: 10px 5%;
		}
		#appdownload div:last-child img
		
		 {
		    width: 90%;
		    margin: 10px auto;
		    max-width: 350px;
		    display: block;
		}
		
		@media (max-width: 979px) {
			.nav-link {
				padding-left:20px !important	
			}
			
			
						
		}
		
		@media (max-width: 767px) {
			.hero img.logo {
				max-width:90%;
			    height: auto;
			   
			}
		}