:root {
  --primary: #020202;
  --primary-dark: Black;
  --secondary:#496cbe;
  --background: #f4f4f4;
  --text: #020202;
  --container-bg: #fff;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: var(--background);
color: var(--text);
}
h2{
color: var(--secondary);
}
.main-content{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 4rem;
margin-bottom: 4rem;
}
.container {
background: var(--container-bg);
border-radius: 10px;
padding: 40px;
max-width: 500px !important;
width: 100% !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
text-align: center;
}

.container h1 {
margin-top: 0;
color: var(--secondary);
font-size: 1.8rem;
font-weight: 600
}
.container p {
font-size: 1rem;
margin: 0 0 20px 0;
color: #555;
}

.voice-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem; /* 12px vertical, 24px horizontal */
font-size: 1rem;
font-weight: 500;
background-color: var(--primary); /* Blue-600 */
color: white;
border: none;
border-radius: 9999px; /* Full pill */
cursor: pointer;
transition: background-color 0.3s ease, opacity 0.3s ease;
}

.voice-button:hover {
background-color: var(--primary-dark); /* Blue-700 */
}

.voice-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}

footer {
margin-top: 40px;
font-size: 0.85rem;
color: #999;
text-align: center;
}
.demo-context {
background-color: var(--container-bg);

border-radius: 20px;
border: 1px solid rgba(59, 130, 246, 0.2);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(59, 130, 246, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
margin: 1.5rem 0;
}

.demo-context .config-form {
background-color: var(--container-bg);

}
.demo-context .config-form label {
color: var(--text);
}
.demo-context .config-form input {
background-color: var(--demo-context-bg);
color: var(--text);
}
.demo-context h2 {
font-size: 1.3rem;     
margin-bottom: 0.5rem;
}

.demo-context ul {
list-style: none;
padding: 0;
}
.demo-context li {
margin: 0.3rem 0;
}
.gradient-border {
position: relative;
border-radius: 1.5rem; /* same as rounded-3xl */
padding: 4px; /* width of the gradient border */
background: var(--primary);
}

.gradient-border .inner-content {
background: white;
border-radius: 1.25rem; /* inner rounding slightly smaller */
padding: 1.5rem;
}

.call-active {
background-color: #d32f2f; /* red */
}

.call-active:hover {
background-color: #b71c1c; /* darker red on hover */
}
.btn-rounded-demo {
display: inline-block;
background-color: var(--primary); /* bg-blue-600 */
color: #ffffff;
padding: 0.5rem 1rem; /* py-2 px-4 */
border-radius: 9999px; /* rounded-full */
transition: background-color 0.2s ease;
}

.btn-rounded-demo:hover {
background-color: var(--primary-dark); /* bg-blue-700 */
}
.logo-img {
  display: block;       
  margin-left: auto;    
  margin-right: auto;
  margin-bottom: 1.5rem;
  height: 6rem;         
  width: auto;          
}
.demo-card {
border-radius: 1rem; 
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* shadow-lg */
border: 1px solid #edf2f7; 
padding: 1.5rem; 
background-color: var(--container-bg);
transition: box-shadow 0.2s ease-in-out;
}
.demo-card:hover {
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); /* shadow-xl */
}