body {background: #161515;font-family: sans-serif;}
h1 {font-size: 40px;text-align: center;color: #1790D2;margin-top: 50px;}
span.colored {color: #fff;}
.demo-button {margin-top: 140px}
.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)}
.object {display: flex;flex: 0 1 100%;justify-content: center;align-items: center;align-content: stretch;}
.outline {width: 60px;height: 60px;border-radius: 50%;border: 8px solid #B5A4A4;animation: pulse 3s;animation-timing-function: ease-out;animation-iteration-count: infinite;position: absolute}
.button {width: 120px;height: 120px;border-radius: 50%;background: #194247;box-shadow: 0px 0px 80px #0084F9;position: absolute;}

@keyframes pulse {
    0% {transform: scale(0);opacity: 0;border: 65px solid #0B3082;}
    50% {border: solid #A3FFC2;opacity: 0.8}
    90% {transform: scale(3.2);opacity: 0.2;border: 3px solid #2E3CFF;}
    100% {transform: scale(3.3);opacity: 0;border: 1px solid #7A89FF;}
}
#delayed {animation-delay: 1.5s;}
#circlein {width: 100px;height: 100px;border-radius: 50%;background: #0f484e;box-shadow: 0px -2px 15px #E0FF94;position: absolute;}
.mic-icon {height: 60px;position: absolute;margin: 21px;left: 0;}

/* Tabbed Section */
.tab-wrapper {text-align: center;display: block;margin: auto;margin-top: 50px;}
.wrapper {margin: auto;margin-top: 50px;max-width: 100%;padding: 0 15px;}
.tabbed_sec_inner {display: flex;justify-content: space-between;max-width: 800px;margin: 50px auto 0;flex-wrap: wrap;position:relative;}

/* Make tabs scrollable */
.tab-wrapper {text-align: center;display: block;margin: auto;overflow-x: auto;white-space: nowrap;width: 100%;padding-bottom: 5px;-webkit-overflow-scrolling: touch;}

/* Hide scrollbar in Webkit browsers */
.tab-wrapper::-webkit-scrollbar {display: none;}
.tabs {margin: 0;padding: 0;display: flex;justify-content: center;gap: 10px;min-width: max-content;}
.tab-link {margin: 0 1%;list-style: none;padding: 10px 20px;color: #aaa;cursor: pointer;font-weight: 700;transition: all ease 0.5s;border-bottom: solid 3px transparent;letter-spacing: 1px;flex-shrink: 0;}
/* Hover effect */
.tab-link:hover {color: #999;border-color: #999;}
.tab-link.active {color: #333;border-color: #333;}
.tab-link:nth-of-type(1).active, #tab-1 p {color: #EE6534;border-color:#EE6534;}
.tab-link:nth-of-type(2).active, #tab-2 p {color: #d0ff71;border-color:#d0ff71;}
.tab-link:nth-of-type(3).active, #tab-3 p {color: #EEC63B;border-color:#EEC63B}
.tab-link:nth-of-type(4).active, #tab-4 p {color: #fff;border-color: #fff;}
.tab-link:nth-of-type(5).active, #tab-5 p {color: green;border-color: green;}

/* Content Section */
.content-wrapper {padding: 20px;text-align: center;}
.tab-content {display: none;text-align: center;color: #888;font-weight: 300;font-size: 15px;opacity: 0;transform: translateY(15px);animation: fadeIn 0.5s ease 1 forwards;position: relative;}
.tab-content.active {display: block;}
@keyframes fadeIn {
    100% {opacity: 1;transform: none;}
}
.tabbed-para p {border: 2px solid grey;padding: 5px;border-radius: 15px;width: max-content;}
.tabbed-para {position: absolute;top: -198px;}

/* FOOTER */
.footer-section {max-width: 800px;margin: 80px auto 0;}
p.footer-para {color: grey;}
.footer-section {text-align: center;}
.footer-button a {color: #fff;text-decoration: none;padding: 10px 20px;border: 1px solid grey;margin: 0 5px;border-radius: 8px;}
.footer-button {width: 100%;height: max-content;margin-top: 30px;display: block;}

/* FEATURES */
.feature-box p {padding: 10px 20px;border-radius: 28px;box-shadow: inset 0px 3px 17px rgba(208, 255, 113, 0.35);background-color: #191919;border: 2px solid #3e3e3e;color: #e3dada;}
.feature1.feature-box {padding: 10px 20px;border-radius: 10px;position: relative;border-right: 1px solid #b1d762;}
.feature1.feature-box:after {position: absolute;content: "";width: 110px;height: 2px;background: #b1d762;left: 100%;top: 50%;}
.feature2.feature-box {padding: 10px 20px;border-radius: 10px;position: relative;border-left: 1px solid #b1d762;}
.feature2.feature-box:after {position: absolute;content: "";width: 70px;height: 2px;background: #b1d762;right: 100%;top: 50%;}
select#voice-select {display: none;opacity: 0;}

/* TOGGLE BUTTON */
.toggle-wrapper {display: flex;align-items: center;font-family: Arial, sans-serif;gap: 15px;margin: 20px 0;justify-content: center;}
.language-text {font-size: 16px;font-weight: bold;cursor: pointer;}
.active {color: white;}
.inactive {color: gray;}
.toggle-container {width: 50px;height: 25px;background-color: #ccc;border-radius: 25px;position: relative;cursor: pointer;transition: background 0.3s;}
.toggle-circle {width: 20px;height: 20px;background-color: white;border-radius: 50%;position: absolute;top: 50%;left: 5px;transform: translateY(-50%);transition: left 0.3s;}
.toggled .toggle-circle {left: 25px;}
span.random-lat{color: grey;}

@media(max-width:939px){
    .tabbed_sec_inner {flex-wrap: wrap;}
    .feature1.feature-box {flex: 0 0 100%;max-width: 100%;border-right: none;}
    .demo-button {flex: 0 0 100%;max-width: 100%;}
    .feature2.feature-box {flex: 0 0 100%;max-width: 100%;margin-top: 40px;border-left: none;}
    .feature1.feature-box:after {display: none;}    
    .feature2.feature-box:after {display: none;}
    .footer-section{margin-top: 50px;}
    .tabbed_sec_inner{justify-content: center;margin-top: 20px;}
}

/* Make tabs scrollable on small screens */
@media screen and (max-width: 768px) {
    .tab-wrapper {overflow-x: auto;white-space: nowrap;width: 100%;padding-bottom: 5px;}
    .tabs {flex-wrap: nowrap;justify-content: center;}
    .tab-link {padding: 10px 15px;font-size: 14px;}
    .footer-section{margin-top: 20px;}
}
.content-wrapper p {margin: 0;color: #cac4c4;letter-spacing: .75px;}

.audio-player{display: none;}
#chat-box{color: #fff;text-align: center;}
.popup-container {position: fixed;top: 72%;left: 50%;transform: translateX(-50%);background-color: rgba(255, 255, 255, 0.2); /* White semi-transparent */color: #fff; /* White text */padding: 12px 24px;border-radius: 8px;font-size: 18px;font-weight: bold;font-family: Arial, sans-serif;text-align: center;z-index: 9999; /* Ensures it's on top */opacity: 1;width: auto;min-width: 250px;max-width: 400px;white-space: nowrap;overflow: hidden;z-index: 99999;}
.popup-text {display: inline-block;transition: transform 0.5s ease-out, opacity 0.5s ease-in-out;}
.popup-text.slide-out {transform: translateX(-100%);opacity: 0;}

/*CONFIRMATION POPUP*/
:root {--primary-color: rgb(255, 255, 255);--primary-glow: rgba(255, 255, 255, 0.8);--border-glow: rgba(255, 255, 255, 0.2);}
.alert-box {position: fixed;top: 20px;left: 50%;transform: translateX(-50%);background: linear-gradient(145deg, rgba(0, 0, 0, 0.95),rgba(20, 20, 20, 0.9));border-radius: 16px;padding: 24px;width: 420px;color: #fff;backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);box-shadow: 0 0 30px rgba(0, 0, 0, 0.7),inset 0 0 0 1px rgba(255, 255, 255, 0.1),inset 0 0 0 2px rgba(255, 255, 255, 0.05);z-index: 1000;border: 1px solid rgba(255, 255, 255, 0.15);}    
.alert-box::before {content: '';position: absolute;top: -1px;left: -1px;right: -1px;bottom: -1px;background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);border-radius: 16px;z-index: -1;}
.alert-header {display: flex;align-items: center;margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);position: relative;}
.alert-header::after {content: '';position: absolute;bottom: -1px;left: 0;width: 30%;height: 1px;background: linear-gradient(90deg, var(--primary-color),transparent);}
.icon {width: 28px;height: 28px;margin-right: 15px;color: var(--primary-color);filter: drop-shadow(0 0 8px var(--border-glow));}
.alert-title {margin: 0;font-size: 1.25rem;font-weight: 600;background: linear-gradient(90deg, #ffffff, #cccccc);-webkit-background-clip: text;background-clip: text;color: transparent;letter-spacing: 0.5px;}
.alert-message {margin-bottom: 24px;line-height: 1.6;color: rgba(255, 255, 255, 0.9);font-size: 0.95rem;padding: 0 4px;}
.alert-footer {display: flex;justify-content: flex-end}
.dismiss-btn {background: rgba(255, 255, 255, 0.1);color: #fff;border: 1px solid rgba(255, 255, 255, 0.2);padding: 10px 20px;border-radius: 8px;cursor: pointer;font-size: 14px;font-weight: 500;transition: all 0.3s ease;position: relative;overflow: hidden;}
.dismiss-btn::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(45deg,transparent,rgba(255, 255, 255, 0.1),transparent);transform: translateX(-100%);transition: transform 0.6s ease;}
.dismiss-btn:hover {background: rgba(255, 255, 255, 0.15);border-color: rgba(255, 255, 255, 0.3);box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);}
.dismiss-btn:hover::before {transform: translateX(100%);}
.hidden {display: none;}
@keyframes slideDown {
    from {opacity: 0;transform: translate(-50%, -100%);}
    to {opacity: 1;transform: translate(-50%, 0);}
}
.alert-box:not(.hidden) {animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1)}
@keyframes glow {
    0%, 100% { filter: drop-shadow(0 0 8px var(--border-glow)); }
    50% { filter: drop-shadow(0 0 12px var(--border-glow)); }
}
.icon {animation: glow 2s ease-in-out infinite;}