:root{
    --brand1:#ffd23a;
    --brand2:#091723;
    --brand3:#091723;
    --textColor: #ffffff;
}

html, body {
    background-color: #07121b;
    color: var(--textColor);
    height: 100%;
    margin: 0;
    font-family: "Open Sans", serif!important;
    font-weight: 300;


}
/* Sticky Header Styling */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 80px;
    background-color: #091723; /* You can adjust this background color as needed */
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    max-width: 500px;
    margin: auto;
    border: 1px solid rgb(229, 231, 235, 0.3);
}

/* Logo Container */
.logo-container img {
    height: 40px; /* Adjust as needed to fit nicely within the 80px header */
    /*object-fit: contain;*/
}

.content-box {
    background-color: var(--brand2);
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    padding: 20px 20px 80px 20px;
    border: 1px solid rgb(229, 231, 235, 0.3);
    margin-top: 80px;

}

/* Input field styling */
.form-control {
    background-color: #0c2031;
    color: #ffffff;
    border: none;
}

.banner{
    min-height: 150px;
    display: flex;
    align-items: center; /* Align vertically */
    justify-content: start; /* Align horizontally */
    text-align: left; /* Center text if it's multiline */
    border-radius: 20px;
    /*padding: 20px 20px 0 40px;*/
    background: #050d15 url('/images/banner.png') no-repeat center top / auto;
}

.banner h2{
font-size: 1.8rem;
}

.banner h2 span{
    display: block;
    color: var(--brand1);
}
.btn-block {
    width: 100%;
}
.record,
.listen,
.retake{
    width: 90px;
    height: 90px;
    color:#ffffff;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid rgb(229, 231, 235, 0.8);
}
.record{ background: #D2122E;}
.listen{ background-image: linear-gradient(to top, #09203f 0%, #537895 100%);}
.retake{ background-image: linear-gradient(to right, #F2994A 0%, #F2C94C  51%, #F2994A  100%)}
.record:hover, .listen:hover,.retake:hover{
background: var(--brand1);
}
#dBValue{
    margin-top: 80px;
    font-weight: 700;
    font-size: 3rem;
    font-family: "Open Sans", serif;
    display: flex;
    align-items: center;
    justify-content: center;
}
#dBValue span{ font-size: 1rem;}
@media (max-width: 768px) {
    .content-box {
        width: 95%;
    }
}