@keyframes blink {
    0% { color: black; }
    50% { color: red; }
    100% { color: white; }
}
.bars {
display: flex;
justify-content: center;
align-items: flex-end;
height: 200px; /* Adjusted height for better proportions */
}
.bar {
width: 30px;
margin: 0 8px; /* Consistent spacing */
animation: pulse 1.5s ease-in-out infinite; /* Smooth, slower animation */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}
.bar1 { height: 50px; background-color: #b4c7e7; animation-delay: 0s; }
.bar2 { height: 50px; background-color: #7094d2; animation-delay: 0.3s; }
.bar3 { height: 50px; background-color: #2f5596; animation-delay: 0.6s; }
.bar4 { height: 50px; background-color: #294982; animation-delay: 0.9s; }

@keyframes pulse {
0%, 100% {
height: 50px; /* Minimum height */
}
50% {
height: 150px; /* Maximum height for dynamic effect */
}
}

.new-bg{background-image: radial-gradient(white,DodgerBlue); color:rgb(60, 60, 60);}
.new-rbg{background-image: linear-gradient(to right, white,DodgerBlue); color:rgb(60, 60, 60);}

.slide-item {
flex: 0 0 20%; /* All slides visible */
opacity: 0.5;
transition: all 0.5s ease;
transform: scale(0.8);
}

.slide-item.active {
opacity: 1;
transform: scale(1); /* Highlighted slide zoomed in */
}




html,body,h1,h2,h3,h4,h5,h6 
{
font-family: "Roboto", sans-serif
}
img 
{
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
}
p{
white-space: pre-wrap;
}

a{
color: inherit;
text-decoration: none;    
}

a:hover{
color: inherit;
text-decoration: none;
}
#webcam {
width: 100%;
height: auto;
}

@media (min-width: 480px) {
#webcam {
width: 100%;
height: auto; 
}
}

.loader 
{
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin 
{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin 
{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.template_faq {
background: #edf3fe none repeat scroll 0 0;
}
.panel-group {
background: #fff none repeat scroll 0 0;
border-radius: 3px;
box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.04);
margin-bottom: 0;
padding: 30px;
}
#accordion .panel {
border: medium none;
border-radius: 0;
box-shadow: none;
margin: 0 0 15px 10px;
}
#accordion .panel-heading {
border-radius: 30px;
padding: 0;
}
#accordion .panel-title a {
background: #ffb900 none repeat scroll 0 0;
border: 1px solid transparent;
border-radius: 30px;
color: #fff;
display: block;
font-size: 18px;
font-weight: 600;
padding: 12px 20px 12px 50px;
position: relative;
transition: all 0.3s ease 0s;
}
#accordion .panel-title a.collapsed {
background: #fff none repeat scroll 0 0;
border: 1px solid #ddd;
color: #333;
}
#accordion .panel-title a::after, #accordion .panel-title a.collapsed::after {
background: #ffb900 none repeat scroll 0 0;
border: 1px solid transparent;
border-radius: 50%;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.58);
color: #fff;
content: "";
font-family: fontawesome;
font-size: 25px;
height: 55px;
left: -20px;
line-height: 55px;
position: absolute;
text-align: center;
top: -5px;
transition: all 0.3s ease 0s;
width: 55px;
}
#accordion .panel-title a.collapsed::after {
background: #fff none repeat scroll 0 0;
border: 1px solid #ddd;
box-shadow: none;
color: #333;
content: "";
}
#accordion .panel-body {
background: transparent none repeat scroll 0 0;
border-top: medium none;
padding: 20px 25px 10px 9px;
position: relative;
}
#accordion .panel-body p {
border-left: 1px dashed #8c8c8c;
padding-left: 25px;
}